/* COC Product Showcase — frontend styles */

.coc-psw { font-family: 'Poppins', inherit; }
.coc-psw * { box-sizing: border-box; }

/* ---------- Header ---------- */
.coc-psw-header { margin-bottom: 28px; }
.coc-psw-align-left    { text-align: left; }
.coc-psw-align-center  { text-align: center; }
.coc-psw-align-right   { text-align: right; }
.coc-psw-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: #010101;
}
.coc-psw-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #767676;
  max-width: 620px;
}
.coc-psw-align-center .coc-psw-desc { margin-left: auto; margin-right: auto; }
.coc-psw-align-right  .coc-psw-desc { margin-left: auto; }

/* ---------- Empty state ---------- */
.coc-psw-empty {
  padding: 40px 20px;
  text-align: center;
  color: #767676;
  font-size: 14px;
  border: 1px dashed #ddd;
  border-radius: 10px;
}

/* ---------- Grid ---------- */
.coc-psw-grid {
  display: grid;
  grid-template-columns: repeat(var(--coc-cols-d, 4), 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .coc-psw-grid { grid-template-columns: repeat(var(--coc-cols-t, 3), 1fr); }
}
@media (max-width: 767px) {
  .coc-psw-grid { grid-template-columns: repeat(var(--coc-cols-m, 2), 1fr); gap: 14px; }
}

/* ---------- Slider ---------- */
.coc-psw-slider-wrap { position: relative; padding: 0 4px; }
.coc-psw-slider.swiper { overflow: hidden; padding: 4px 4px 8px; }
.coc-psw-slider .swiper-slide { height: auto; display: flex; }
.coc-psw-slider .coc-psw-card { width: 100%; }

.coc-psw-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  cursor: pointer;
  color: #010101;
  z-index: 5;
  transition: transform .15s ease;
}
.coc-psw-nav:hover { transform: translateY(-50%) scale(1.08); }
.coc-psw-prev { left: -8px; }
.coc-psw-next { right: -8px; }
.coc-psw-nav.swiper-button-disabled { opacity: .35; cursor: default; }
.coc-psw-nav.swiper-button-disabled:hover { transform: translateY(-50%); }

.coc-psw-pagination {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 18px;
}
.coc-psw-pagination .swiper-pagination-bullet {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E5E5E5; opacity: 1; margin: 0 !important;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.coc-psw-pagination .swiper-pagination-bullet-active {
  background: #EF7170; transform: scale(1.2);
}

@media (max-width: 767px) {
  .coc-psw-nav { display: none; }
}

/* ---------- Card ---------- */
.coc-psw-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.coc-psw-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  transform: translateY(-3px);
}

.coc-psw-media {
  position: relative;
}
.coc-psw-card-img {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f4f4f4;
}
.coc-ratio-square    { aspect-ratio: 1 / 1; }
.coc-ratio-portrait  { aspect-ratio: 4 / 5; }
.coc-ratio-landscape { aspect-ratio: 16 / 9; }
.coc-psw-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.coc-psw-card:hover .coc-psw-card-img img { transform: scale(1.05); }

.coc-psw-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: #EF7170;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}

/* ---------- Wishlist heart (overlay, top-right of image) ---------- */
.coc-psw-wishlist {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
}
.coc-psw-wishlist .coc-wl-btn {
  width: 30px;
  height: 30px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}

/* ---------- Quick-add "+" button (overlay, notched into bottom-right of image) ---------- */
.coc-psw-quickadd {
  --coc-qa-size: 36px;
  --coc-qa-bg: #010101;
  --coc-qa-icon: #ffffff;
  --coc-qa-added-bg: #16a34a;
  position: absolute;
  right: 10px;
  bottom: calc(var(--coc-qa-size) / -2);
  z-index: 3;
}
.coc-psw-quickadd .add_to_cart_button,
.coc-psw-quickadd .button {
  position: relative;
  display: block;
  width: var(--coc-qa-size);
  height: var(--coc-qa-size);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--coc-qa-bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  font-size: 0;    /* hide the "Add to cart" / "Select options" text */
  line-height: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
.coc-psw-quickadd .add_to_cart_button:hover { transform: scale(1.06); }
.coc-psw-quickadd .add_to_cart_button:active { transform: scale(0.94); }

/* plus / check icons — real inline SVGs injected via PHP, shown/hidden
   with plain display toggles (robust against theme icon-font CSS, unlike
   ::before/::after content which themes frequently override). */
.coc-psw-qa-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  color: var(--coc-qa-icon);
  line-height: 0;
}
.coc-psw-qa-check { display: none; }
.coc-psw-quickadd .add_to_cart_button.added .coc-psw-qa-plus  { display: none; }
.coc-psw-quickadd .add_to_cart_button.added .coc-psw-qa-check { display: flex; }

/* loading state — WC adds .loading while the AJAX request is in flight */
.coc-psw-quickadd .add_to_cart_button.loading { background: #8a8a8a; }
.coc-psw-quickadd .add_to_cart_button.loading .coc-psw-qa-icon { opacity: .4; }

/* added state — WC adds .added once the item is in the cart */
.coc-psw-quickadd .add_to_cart_button.added { background: var(--coc-qa-added-bg); }

/* WC appends a "View cart" link after the button on success — the floating
   layout has no room for it inline, the toast (below) covers that job instead. */
.coc-psw-quickadd .added_to_cart { display: none; }

/* ---------- "Added to cart" toast ---------- */
#coc-psw-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.coc-psw-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #010101;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  max-width: 90vw;
  white-space: nowrap;
  animation: coc-psw-toast-in .25s ease;
}
.coc-psw-toast a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}
.coc-psw-toast.coc-psw-toast-out { animation: coc-psw-toast-out .2s ease forwards; }
@keyframes coc-psw-toast-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coc-psw-toast-out { to { opacity: 0; transform: translateY(6px); } }

.coc-psw-card-body {
  padding: 16px;
  padding-top: 20px; /* clears the quick-add button notched into the image edge */
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.coc-psw-card-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #767676;
}

.coc-psw-card-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #010101;
  line-height: 1.35;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coc-psw-card-title:hover { text-decoration: underline; }

.coc-psw-card-rating .star-rating { font-size: 13px; }

.coc-psw-price { font-size: 16px; font-weight: 700; }
.coc-psw-price del { opacity: .5; font-weight: 400; font-size: 13px; margin-right: 6px; }
.coc-psw-price ins { text-decoration: none; }