/* Product card layout — tokens come from layout.jinja :root (--pc-*). Do not redeclare
   border/fit/radius/card-bg on .pc: that overrides inheritance and ignores theme colors.
   Image fit and height scale are theme settings (--pc-img-fit, --pc-img-height-scale-*). */
:root {
  --pc-card-bg: transparent;
}

/*
 * Equal-height product cards (listing + section grids)
 * Row stretches to tallest card → .pc-body grows → .pc-card-bar stays on one baseline.
 * Never use height:100% on CSS grid items when the grid height is content-sized.
 * Column counts: --ath-pl-cols-* from layout (defaults 2 / 3 / 4 / 5).
 */
#products-list.ath-products-grid,
.products-container .ath-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--ath-pl-cols-xs, 2), minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 20px);
  align-items: stretch;
}

@media (min-width: 768px) {
  #products-list.ath-products-grid,
  .products-container .ath-products-grid {
    grid-template-columns: repeat(var(--ath-pl-cols-sm, 3), minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  #products-list.ath-products-grid,
  .products-container .ath-products-grid {
    grid-template-columns: repeat(var(--ath-pl-cols-md, 4), minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  #products-list.ath-products-grid,
  .products-container .ath-products-grid {
    grid-template-columns: repeat(var(--ath-pl-cols-lg, 5), minmax(0, 1fr));
  }
}

.ath-products-grid {
  align-items: stretch;
}

.ath-products-grid__item,
.tpt-grid-cell,
.cps-grid-cell {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

/*
 * CPS/TPT wrap the card in .*-slide__inner — that middle layer must flex-fill
 * or equal-height never reaches .product-item / .pc-card-bar.
 */
.cps-grid-cell > .cps-slide__inner,
.tpt-grid-cell > .tpt-slide__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.ath-products-grid__item > .product-item.pc,
.cps-grid-cell > .cps-slide__inner > .product-item.pc,
.tpt-grid-cell > .tpt-slide__inner > .product-item.pc {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.product-item.pc > .pc-inner {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-item.pc .pc-body {
  flex: 1 1 auto;
  min-height: 0;
}

.product-item.pc .pc-card-bar {
  margin-top: auto;
  flex-shrink: 0;
}

/* Same row height in grids/sliders: stretch via flex, not height:100% on grid cells. */
.product-item.pc {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Type scale — mobile (px for predictable Arabic/Latin sizing) */
  --pc-fs-title: 14px;
  --pc-fs-price: 15px;
  --pc-fs-price-prev: 13px;
  --pc-fs-discount: 13px;
  --pc-fs-cta: 14px;
  --pc-fs-btn-wide: 14px;
  --pc-fs-meta: 13px;
  --pc-fs-rating: 13px;
  --pc-fs-rating-star: 15px;
  --pc-fs-rating-count: 12px;
  --pc-fs-subline: 13px;
  --pc-fs-sold: 12px;
  --pc-fs-spec: 13px;
  --pc-fs-badge-pill: 10px;
  --pc-fs-oos-badge: 12px;
  --pc-fs-oos-notify: 13px;
  --pc-fs-count-val: 13px;
  --pc-fs-count-lbl: 11px;
  --pc-fs-strip-badge: 13px;
  --pc-fs-strip-note: 13px;
  --pc-fs-urgency: 13px;
  --pc-fs-ticker: 12px;
  --pc-fs-iv-select: 13px;
  --pc-fs-iv-label: 12px;
  --pc-fs-iv-item: 13px;
  --pc-fs-qty-btn: 16px;
  --pc-fs-qty-val: 14px;
  --pc-fs-inline-cta-ico: 1.25rem;
  --pc-promo-img-h: 30px;
}

@media (min-width: 769px) {
  .product-item.pc {
    --pc-fs-title: 16px;
    --pc-fs-price: 17px;
    --pc-fs-price-prev: 14px;
    --pc-fs-discount: 14px;
    --pc-fs-cta: 15px;
    --pc-fs-btn-wide: 15px;
    --pc-fs-meta: 14px;
    --pc-fs-rating: 14px;
    --pc-fs-rating-star: 16px;
    --pc-fs-rating-count: 13px;
    --pc-fs-subline: 14px;
    --pc-fs-sold: 13px;
    --pc-fs-spec: 14px;
    --pc-fs-badge-pill: 12px;
    --pc-fs-oos-badge: 12px;
    --pc-fs-oos-notify: 14px;
    --pc-fs-count-val: 14px;
    --pc-fs-count-lbl: 11px;
    --pc-fs-strip-badge: 13px;
    --pc-fs-strip-note: 14px;
    --pc-fs-urgency: 14px;
    --pc-fs-ticker: 13px;
    --pc-fs-iv-select: 14px;
    --pc-fs-iv-label: 13px;
    --pc-fs-iv-item: 14px;
    --pc-fs-qty-btn: 17px;
    --pc-fs-qty-val: 15px;
    --pc-fs-inline-cta-ico: 1.35rem;
    --pc-promo-img-h: 34px;
  }
}

.pc-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border-radius: var(--pc-radius, 24px);
  /* Default / fallback; wide desktop overrides idle to transparent below */
  border: var(--pc-border-rest, 1px solid transparent);
  background-color: var(--pc-card-bg, transparent);
  overflow: hidden;
  transition:
    border-color 0.22s ease,
    background-color 0.22s ease;
  box-shadow: none;
}

/* Media / strip stay natural height; body + footer share the leftover */
.pc-media,
.pc-after-image {
  flex-shrink: 0;
}

/* Phone + tablet (lg–down): always show stroke (uses --pc-border-hover from theme / :root). */
@media (max-width: 991.98px) {
  .pc .pc-inner {
    border: var(--pc-border-hover, 1px solid rgba(0, 0, 0, 0.13));
  }

  .pc.pc--no-hover-border .pc-inner {
    border: 1px solid transparent;
  }
}

/* Desktop (lg+): idle stroke hidden; hover or keyboard focus shows --pc-border-hover. */
@media (min-width: 992px) {
  .pc .pc-inner {
    border: 1px solid transparent;
  }

  .pc:hover .pc-inner,
  .pc:focus-within .pc-inner {
    border: var(--pc-border-hover, 1px solid rgba(0, 0, 0, 0.13));
  }

  .pc.pc--no-hover-border:hover .pc-inner,
  .pc.pc--no-hover-border:focus-within .pc-inner {
    border: 1px solid transparent;
  }

  /* Unified Figma card: keep border visible at rest. */
  .pc.pc--border-always .pc-inner,
  .pc.pc--border-always:hover .pc-inner,
  .pc.pc--border-always:focus-within .pc-inner,
  .pc.pc--style-unified .pc-inner,
  .pc.pc--style-unified:hover .pc-inner,
  .pc.pc--style-unified:focus-within .pc-inner {
    border: var(--pc-border-rest, var(--pc-border-hover, 1px solid rgba(0, 0, 0, 0.1)));
  }
}

/* Unified card: centered body, no wishlist chrome */
.pc.pc--style-unified .pc-body {
  text-align: center;
  align-items: center;
}

.pc.pc--style-unified .pc-body .pc-body-main-link,
.pc.pc--style-unified .pc-body .pc-title,
.pc.pc--style-unified .pc-body .pc-price-block,
.pc.pc--style-unified .pc-body .pc-inline-price,
.pc.pc--style-unified .pc-body .pc-card-meta-row,
.pc.pc--style-unified .pc-body .pc-rating-row,
.pc.pc--style-unified .pc-body .section-product-price {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.pc.pc--style-unified .pc-card-bar__wish,
.pc.pc--style-unified .pc-actions-overlay--corner {
  display: none !important;
}

/* No card lift shadow on touch devices — flat card per Figma. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .pc .pc-inner {
    box-shadow: none;
  }
}

.pc-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none !important;
  color: inherit;
  min-height: 0;
}

.pc-media {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  /* Flush to card edges (Figma): no inset — top curve from .pc-inner overflow */
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 0;
  background: transparent;
  gap: 0;
  container-type: inline-size;
  container-name: pc-media;
}

.pc-media-single,
.pc-scroll-carousel {
  width: 100%;
}

/* Equal media frames — aspect from layout tokens (height scale by default). */
.pc-media-inner,
.pc-scroll-carousel__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pc-img-aspect-m, calc(10 / var(--pc-img-height-scale-m, 11)));
  height: auto;
  min-height: 0;
  max-height: none;
  background: transparent;
  /* Bottom edge stays sharp; top follows card via .pc-inner { overflow: hidden; border-radius } */
  border-radius: 0;
  overflow: hidden;
}

@media (min-width: 769px) {
  .pc-media-inner,
  .pc-scroll-carousel__stage {
    aspect-ratio: var(--pc-img-aspect-d, calc(10 / var(--pc-img-height-scale-d, 13)));
  }
}

/* Full-size overlay stack — Figma 30:6242 (icons + badges on the image) */
.pc-media-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
}

.pc-media-overlay-layer > .product-card-bundle-offer,
.pc-media-overlay-layer > .pc-actions-overlay,
.pc-media-overlay-layer > .pc-image-badge-stack,
.pc-media-overlay-layer > .pc-card-ticker,
.pc-media-overlay-layer > .pc-scroll-carousel__nav,
.pc-media-overlay-layer > .pc-scroll-carousel__dots,
.pc-media-overlay-layer > .pc-glance-trigger,
.pc-media-overlay-layer > .pc-glance-corner,
.pc-media-overlay-layer > .pc-glance-cat,
.pc-media-overlay-layer > .pc-glance-tools {
  pointer-events: auto;
}

/* Beat legacy `.product-item img { object-fit }` in main.css (tag raises specificity).
   Absolute fill keeps every card’s image box identical regardless of source aspect. */
.product-item.pc .pc-img-primary,
.product-item.pc .pc-img-secondary,
.pc-img-primary,
.pc-img-secondary {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: var(--pc-img-fit, cover);
  object-position: top center;
  transform-origin: center center;
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.pc--img-contain .pc-img-primary,
.pc--img-contain .pc-img-secondary,
.product-item.pc.pc--img-contain .pc-img-primary,
.product-item.pc.pc--img-contain .pc-img-secondary {
  object-position: center;
}

.pc--img-contain .pc-media-inner,
.pc--img-contain .pc-scroll-carousel__stage {
  background: var(--pc-img-bg, transparent);
}

.pc--second-hover .pc-img-secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.pc--second-hover:hover .pc-img-secondary,
.pc--second-hover:focus-within .pc-img-secondary {
  opacity: 1;
}

.pc-zoom-hover:hover .pc-img-primary,
.pc-zoom-hover:focus-within .pc-img-primary {
  transform: scale(1.08);
}

.pc-badge-slot {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
}

/* Zid badge.jinja injects <style> that sets .badge-name and .badge-name-product-card
   to position:absolute (top/right hardcoded). That class is also on this slot, so
   the pill escapes the card. Keep slot + pill in normal flow inside the stack. */
.pc-badge-slot.pc-badge-slot--stack,
.pc-image-badge-stack .pc-badge-slot.badge-name-product-card {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  max-width: 100% !important;
  min-width: 0;
  width: auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.pc-badge-slot.pc-badge-slot--stack :is(.badge-name, .badge-name-product-card, span[class*="badge"]) {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  max-width: 100%;
  min-width: 0;
  border-radius: 35px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.pc-badge-slot.pc-badge-slot--stack .badge-name > svg {
  flex: 0 0 auto;
}

.pc-badge-slot.pc-badge-slot--stack .badge-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="rtl"] .pc-badge-slot:not(.pc-badge-slot--stack) {
  left: auto;
  right: 8px;
}

/* Wishlist + cart/notify — bottom-end stack, always visible (Figma) */
.pc-actions-overlay--corner {
  position: absolute;
  top: auto;
  bottom: 10px;
  inset-inline-start: auto;
  inset-inline-end: 10px;
  z-index: 9;
  padding: 0;
  margin: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  direction: ltr;
}

.pc-actions-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pc-actions-overlay__item {
  margin: 0;
  padding: 0;
}

/* Undo global .add-to-wishlist { position:absolute } from custom.css — it hid the heart outside the overlay column */
.pc-actions-overlay--corner .add-to-wishlist {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Single heart: keep clicks working; visibility via Zid guest/customer + ath-is-customer */
.pc-actions-overlay--corner .add-to-wishlist button.pc-action-btn--wishlist,
.pc-actions-overlay--corner .add-to-wishlist a.pc-action-btn--wishlist {
  pointer-events: auto !important;
  cursor: pointer;
}

.pc-actions-overlay--corner .add-to-wishlist.is-wishlist-loading button.pc-action-btn--wishlist,
.pc-actions-overlay--corner .add-to-wishlist.is-wishlist-loading a.pc-action-btn--wishlist {
  opacity: 0.35;
  pointer-events: none !important;
}

.pc-actions-overlay--corner .pc-actions-overlay__list,
.pc-actions-overlay--corner .pc-actions-overlay__item,
.pc-actions-overlay--corner .pc-action-wishlist {
  pointer-events: auto;
}

/*
 * Only ONE heart control at a time.
 * Zid often strips zid-visible-* attrs from the live DOM, and
 * .pc-action-btn { display:inline-flex !important } would show both.
 * Use stable data-pc-wishlist-* hooks (+ optional zid attrs if still present).
 * Covers product cards + PDP title/gallery hearts.
 */
.add-to-wishlist > [data-pc-wishlist-toggle],
.add-to-wishlist > [zid-visible-customer="true"],
.add-to-wishlist > button.pc-action-btn--wishlist,
.add-to-wishlist > button.pc-card-bar__heart,
.add-to-wishlist > button.pc-glance-ico--wish,
.add-to-wishlist > button.pd-gallery-action-btn--wishlist,
.add-to-wishlist > button.pd-title-action-btn--wishlist,
.add-to-wishlist > button.icon-heart-mask {
  display: none !important;
}
.add-to-wishlist > [data-pc-wishlist-login],
.add-to-wishlist > [zid-visible-guest="true"],
.add-to-wishlist > a.pc-action-btn--wishlist,
.add-to-wishlist > a.pc-card-bar__heart,
.add-to-wishlist > a.pc-glance-ico--wish,
.add-to-wishlist > a.pd-gallery-action-btn--wishlist,
.add-to-wishlist > a.pd-title-action-btn--wishlist,
.add-to-wishlist > a.icon-heart-mask {
  display: inline-flex !important;
}
/* Logged-in: customer toggle only */
html.ath-is-customer .add-to-wishlist > [data-pc-wishlist-toggle],
html.ath-is-customer .add-to-wishlist > [zid-visible-customer="true"],
html.ath-is-customer .add-to-wishlist > button.pc-action-btn--wishlist,
html.ath-is-customer .add-to-wishlist > button.pc-card-bar__heart,
html.ath-is-customer .add-to-wishlist > button.pc-glance-ico--wish,
html.ath-is-customer .add-to-wishlist > button.pd-gallery-action-btn--wishlist,
html.ath-is-customer .add-to-wishlist > button.pd-title-action-btn--wishlist,
html.ath-is-customer .add-to-wishlist > button.icon-heart-mask {
  display: inline-flex !important;
}
html.ath-is-customer .add-to-wishlist > [data-pc-wishlist-login],
html.ath-is-customer .add-to-wishlist > [zid-visible-guest="true"],
html.ath-is-customer .add-to-wishlist > a.pc-action-btn--wishlist,
html.ath-is-customer .add-to-wishlist > a.pc-card-bar__heart,
html.ath-is-customer .add-to-wishlist > a.pc-glance-ico--wish,
html.ath-is-customer .add-to-wishlist > a.pd-gallery-action-btn--wishlist,
html.ath-is-customer .add-to-wishlist > a.pd-title-action-btn--wishlist,
html.ath-is-customer .add-to-wishlist > a.icon-heart-mask {
  display: none !important;
}
/* Safety: if a heart is in wishlist, never show the guest login heart beside it */
.add-to-wishlist.is-in-wishlist > [data-pc-wishlist-login],
.add-to-wishlist.is-in-wishlist > a.pc-action-btn--wishlist,
.add-to-wishlist.is-in-wishlist > a.pc-card-bar__heart,
.add-to-wishlist.is-in-wishlist > a.pc-glance-ico--wish,
.add-to-wishlist.is-in-wishlist > a.pd-gallery-action-btn--wishlist,
.add-to-wishlist.is-in-wishlist > a.pd-title-action-btn--wishlist,
.add-to-wishlist.is-in-wishlist > a.icon-heart-mask {
  display: none !important;
}
.add-to-wishlist.is-in-wishlist > [data-pc-wishlist-toggle],
.add-to-wishlist.is-in-wishlist > button.pc-action-btn--wishlist,
.add-to-wishlist.is-in-wishlist > button.pc-card-bar__heart,
.add-to-wishlist.is-in-wishlist > button.pc-glance-ico--wish,
.add-to-wishlist.is-in-wishlist > button.pd-gallery-action-btn--wishlist,
.add-to-wishlist.is-in-wishlist > button.pd-title-action-btn--wishlist,
.add-to-wishlist.is-in-wishlist > button.icon-heart-mask {
  display: inline-flex !important;
}

/* Mask heart sits INSIDE white circle — never put icon-heart-mask on same node as pc-action-btn (white bg hides glyph). */
.pc-actions-overlay--corner
  .pc-action-btn--wishlist
  .pc-heart-icon.icon-heart-mask {
  display: inline-block;
  width: 20px;
  height: 18px;
  flex-shrink: 0;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--heart-outlined-icon);
  mask-image: var(--heart-outlined-icon);
  background-color: #6b7280;
}

.pc-actions-overlay--corner
  .pc-action-btn--wishlist
  .pc-heart-icon.icon-heart-mask.filled {
  -webkit-mask-image: var(--heart-filled-icon);
  mask-image: var(--heart-filled-icon);
  background-color: var(--primary_color, var(--primary-color, #c94f6d));
}

.pc-actions-overlay--corner
  .pc-action-btn--wishlist:hover
  .pc-heart-icon.icon-heart-mask:not(.filled),
.pc-actions-overlay--corner
  .pc-action-btn--wishlist:focus-visible
  .pc-heart-icon.icon-heart-mask:not(.filled) {
  background-color: var(--primary-color, #3d0b17);
}

.pc-inner:hover .pc-actions-overlay--corner,
.pc-inner:focus-within .pc-actions-overlay--corner {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ─── Card foot bar: text ATC + heart (mobile ≤767, or pc--cta-bar-always) ─── */
.pc-card-bar {
  display: none;
  align-items: center;
  gap: 8px;
  /* Pin to card foot when row cards stretch to equal height */
  margin-top: auto;
  /* Match side inset; keep bottom tight so foot doesn’t look oversized */
  padding: 10px 16px 12px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.pc-card-bar__main {
  flex: 1 1 auto;
  min-width: 0;
}

.pc-card-bar--wish-only {
  justify-content: flex-end;
}

.pc-card-bar--wish-only .pc-card-bar__wish {
  margin-inline-start: 0;
}

.pc-card-bar__cta--off {
  display: none !important;
}

.pc-card-bar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  height: 42px;
  padding: 0 1rem;
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17));
  color: var(--pc-cta-text, #fff) !important;
  border: none;
  border-radius: 12px;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}

.pc.pc--style-unified .pc-card-bar {
  padding: 8px 16px 16px;
}

.pc.pc--style-unified .pc-card-bar__cta {
  min-height: 42px;
  height: 42px;
  border-radius: 12px;
}

.pc-card-bar__cta:hover,
.pc-card-bar__cta:focus-visible {
  opacity: 0.92;
  color: var(--pc-cta-text, #fff) !important;
}

.pc-card-bar__cta-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: block;
}

.pc-card-bar__cta-text {
  font-family: var(--ath-body-font-family, inherit);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: none;
}

.pc-card-bar__cta .add-to-cart-progress {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}

.pc-card-bar__cta[aria-busy="true"] .pc-card-bar__cta-text,
.pc-card-bar__cta[aria-busy="true"] .pc-card-bar__cta-ico,
.pc-card-bar__cta:has(.add-to-cart-progress:not(.d-none))
  .pc-card-bar__cta-text,
.pc-card-bar__cta:has(.add-to-cart-progress:not(.d-none))
  .pc-card-bar__cta-ico {
  opacity: 0;
}

.pc-card-bar__wish {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Modern / classic: heart stays beside CTA. Glance hides it (heart lives on the image). */
.pc:not(.pc--style-glance) .pc-card-bar__wish {
  display: flex !important;
}

.pc-card-bar__wish .add-to-wishlist {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.pc-card-bar__heart {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--pc-bar-heart-radius, var(--pc-bar-heart-radius-sm, 0)) !important;
  background: #fff !important;
  border: 1px solid rgba(26, 26, 26, 0.12) !important;
  box-shadow: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.pc-card-bar__heart:hover,
.pc-card-bar__heart:focus-visible {
  border-color: var(--primary-color, #3d0b17) !important;
  color: var(--primary-color, #3d0b17);
  outline: none;
}

.pc-card-bar__heart-ico {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}

.pc-card-bar__heart .pc-heart-icon.icon-heart-mask {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: var(--heart-outlined-icon);
  mask-image: var(--heart-outlined-icon);
}

.pc-card-bar__heart .pc-heart-icon.icon-heart-mask.filled,
.add-to-wishlist.is-in-wishlist .pc-card-bar__heart .pc-card-bar__heart-ico,
.add-to-wishlist.is-on .pc-card-bar__heart .pc-card-bar__heart-ico,
.pc-card-bar__heart[aria-pressed="true"] .pc-card-bar__heart-ico {
  fill: currentColor;
  stroke: currentColor;
  color: var(--primary-color, #3d0b17);
}

.pc-card-bar__heart .pc-heart-icon.icon-heart-mask.filled {
  -webkit-mask-image: var(--heart-filled-icon);
  mask-image: var(--heart-filled-icon);
  background-color: var(--primary-color, #3d0b17);
}

.pc-card-bar__wish .loader {
  position: absolute;
  inset: 0;
  margin: auto;
}

.pc-card-bar__wish .add-to-wishlist.is-wishlist-loading .pc-card-bar__heart {
  opacity: 0.35;
  pointer-events: none !important;
}

@media (max-width: 767.98px) {
  .pc-actions-overlay--corner {
    display: none !important;
  }

  .pc-card-bar {
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 6px;
    padding: 10px 12px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Heart fixed beside CTA; CTA fills remaining width */
  .pc-card-bar__main {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
  }

  .pc:not(.pc--style-glance) .pc-card-bar__wish {
    display: flex !important;
    flex: 0 0 auto;
  }

  .pc-card-bar__cta {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 12px;
  }

  .pc-card-bar__cta-ico {
    width: 16px;
    height: 16px;
  }

  .pc-card-bar__cta-text {
    white-space: nowrap;
    font-size: 12px;
    letter-spacing: 0;
  }

  .pc-card-bar__heart {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .pc-card-bar__heart .pc-heart-icon.icon-heart-mask {
    width: 14px;
    height: 13px;
  }

  /* Classic on mobile: keep full-width bar (not hug-content cluster) */
  .pc.pc--style-classic .pc-card-bar {
    justify-content: stretch;
    gap: 6px;
  }

  .pc.pc--style-classic .pc-card-bar__main {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .pc.pc--style-classic .pc-card-bar__cta {
    width: 100%;
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
  }

  .pc.pc--style-classic .pc-card-bar__heart {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .pc-body {
    padding-bottom: 0;
  }

}

/* Opt-in: same foot CTA bar on tablet/desktop (hides corner overlay icons). */
.pc.pc--cta-bar-always .pc-actions-overlay--corner {
  display: none !important;
}

.pc.pc--cta-bar-always .pc-card-bar {
  display: flex;
}

.pc.pc--cta-bar-always .pc-body {
  padding-bottom: 0;
}

/* Classic: full-width CTA + heart at the end. If wishlist hidden, CTA alone fills the bar. */
.pc.pc--style-classic .pc-card-bar {
  justify-content: stretch;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pc.pc--style-classic .pc-card-bar__main {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
}

.pc.pc--style-classic .pc-card-bar__cta {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 20px;
}

.pc.pc--style-classic .pc-card-bar__wish {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.pc.pc--style-classic .pc-card-bar__heart {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-color: rgba(26, 26, 26, 0.85) !important;
}

/* ── Quick glance (نظرة سريعة): Figma Delile 142:789 base
   Image + divider + title + price + full CTA.
   Theme extras on image: category top-left + eye + heart (colors from settings). */
.pc.pc--style-glance .pc-inner,
.pc.pc--style-glance:hover .pc-inner,
.pc.pc--style-glance:focus-within .pc-inner,
.pc.pc--style-glance.pc--border-always .pc-inner,
.pc.pc--style-glance.pc--border-always:hover .pc-inner,
.pc.pc--style-glance.pc--border-always:focus-within .pc-inner {
  background: var(--pc-card-bg, #ffffff);
  border: var(--pc-border-rest, var(--pc-border-hover, 1px solid var(--primary-color, #678f8a)));
  border-radius: var(--pc-radius, 24px);
}

.pc.pc--style-glance .pc-media {
  border-bottom: var(--pc-border-rest, var(--pc-border-hover, 1px solid var(--primary-color, #678f8a)));
}

.pc.pc--style-glance .pc-media-inner,
.pc.pc--style-glance .pc-scroll-carousel__stage {
  aspect-ratio: 327 / 295;
}

/* No classic overlay stack on glance — tools are .pc-glance-cat + .pc-glance-tools */
.pc.pc--style-glance .pc-actions-overlay--corner {
  display: none !important;
}

.pc.pc--style-glance .pc-body {
  --pc-body-align: center;
  --pc-body-justify: center;
  text-align: center;
  align-items: center;
  padding: 12px 20px 0;
  gap: 5px;
}

.pc.pc--style-glance .pc-body .pc-body-main-link,
.pc.pc--style-glance .pc-body .pc-title,
.pc.pc--style-glance .pc-body .pc-price-block {
  text-align: center;
}

.pc.pc--style-glance .pc-body .pc-inline-price,
.pc.pc--style-glance .pc-body .pc-spec-lines,
.pc.pc--style-glance .pc-body .pc-stock-chip,
.pc.pc--style-glance .pc-body .pc-card-meta-row,
.pc.pc--style-glance .pc-body .section-product-price {
  justify-content: center;
  text-align: center;
}

.pc.pc--style-glance .pc-body .pc-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--pc-card-title, var(--primary-color, #678f8a));
}

.pc.pc--style-glance .pc-body .product-price,
.pc.pc--style-glance .pc-body .product-price span,
.pc.pc--style-glance .pc-body .section-product-price .product-price,
.pc.pc--style-glance .pc-body .section-product-price .product-price span {
  color: var(--pc-price, var(--primary-color, #678f8a));
  font-weight: 700;
  font-size: 18px;
}

.pc.pc--style-glance .pc-body .product-prev-price {
  color: var(--pc-compare-price, rgba(0, 0, 0, 0.3));
  font-weight: 700;
  font-size: 14px;
  text-decoration: line-through;
}

.pc.pc--style-glance .pc-card-bar {
  display: flex;
  justify-content: center;
  padding: 10px 20px 12px;
  gap: 0;
}

/* Heart on image next to eye — ONLY glance. Modern/classic keep heart beside CTA. */
.pc.pc--style-glance .pc-card-bar__wish {
  display: none !important;
}

.pc.pc--style-glance .pc-card-bar__main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
}

.pc.pc--style-glance .pc-card-bar__cta {
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 20px;
  border-radius: 15px;
  font-weight: 600;
  font-size: 16px;
  gap: 0;
}

.pc.pc--style-glance .pc-card-bar__cta-ico {
  display: none !important;
}

@media (min-width: 768px) {
  .pc.pc--style-glance .pc-body {
    padding: 14px 20px 0;
    gap: 5px;
  }

  .pc.pc--style-glance .pc-body .pc-title {
    font-size: 18px;
  }

  .pc.pc--style-glance .pc-body .product-price,
  .pc.pc--style-glance .pc-body .product-price span,
  .pc.pc--style-glance .pc-body .section-product-price .product-price,
  .pc.pc--style-glance .pc-body .section-product-price .product-price span {
    font-size: 20px;
  }

  .pc.pc--style-glance .pc-body .product-prev-price {
    font-size: 16px;
  }

  .pc.pc--style-glance .pc-card-bar {
    padding: 10px 20px 12px;
  }
}

@media (max-width: 767.98px) {
  .pc.pc--style-glance .pc-body {
    padding: 10px 14px 0;
  }

  .pc.pc--style-glance .pc-card-bar {
    padding: 10px 14px 14px;
  }

  .pc.pc--style-glance .pc-card-bar__cta {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
  }
}

@media (max-width: 449.98px) {
  /* Keep compact full-width bar from ≤767; only tighten padding on very small phones */
  .pc-card-bar {
    gap: 6px;
    padding: 8px 10px 10px;
  }

  .pc-card-bar__cta {
    min-height: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
  }

  .pc-card-bar__cta-text {
    font-size: 13px;
    letter-spacing: 0;
  }

  .pc-card-bar__cta-ico {
    width: 16px;
    height: 16px;
  }

  .pc-card-bar__heart {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .pc.pc--style-classic .pc-card-bar {
    gap: 6px;
  }

  .pc.pc--style-classic .pc-card-bar__cta {
    width: 100%;
    min-height: 34px;
    height: 34px;
    padding: 0 8px;
  }

  .pc.pc--style-classic .pc-card-bar__heart {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
}

.pc-overlay,
.pc-oos-overlay,
.pc-mobile-cta,
.pc-oos-badge {
  display: none !important;
}

.pc-action-btn,
button.pc-action-btn--wishlist {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px !important;
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.pc-action-btn:hover,
.pc-action-btn:focus-visible {
  color: var(--primary-color, #3d0b17) !important;
  border-color: var(--primary-color, #3d0b17) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.pc-action-btn--cart,
.pc-action-btn--notify,
.pc-action-btn--options {
  text-decoration: none !important;
}

.pc-action-btn--cart svg,
.pc-action-btn--notify svg,
.pc-action-btn--options svg {
  display: block;
}

.pc-action-btn--cart {
  position: relative;
}

.pc-action-btn--cart .add-to-cart-progress {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
}

.pc-action-btn--cart[aria-busy="true"] .pc-action-btn__icon,
.pc-action-btn--cart:has(.add-to-cart-progress:not(.d-none))
  .pc-action-btn__icon {
  opacity: 0;
}

.pc-action-wishlist .add-to-wishlist {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-action-wishlist .loader {
  position: absolute;
  inset: 0;
  margin: auto;
}

@keyframes pc-shine-sweep {
  0% {
    transform: translate(-115%, -48%) rotate(26deg);
  }
  100% {
    transform: translate(115%, 48%) rotate(26deg);
  }
}

@keyframes pc-shine-btn {
  0% {
    transform: translateX(-120%) skewX(-16deg);
  }
  100% {
    transform: translateX(220%) skewX(-16deg);
  }
}

.pc.pc--shine-hover .pc-scroll-carousel__stage,
.pc.pc--shine-hover .pc-media-inner {
  isolation: isolate;
}

.pc.pc--shine-hover .pc-scroll-carousel__stage::before,
.pc.pc--shine-hover .pc-media-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  border-radius: 0;
}

/* Photo shine only over the image/stage — not while pointer is on desktop overlay or OOS strip */
.pc.pc--shine-hover
  .pc-scroll-carousel__stage:hover:not(:has(.pc-overlay--desktop:hover)):not(
    :has(.pc-oos-overlay:hover)
  )::before,
.pc.pc--shine-hover
  .pc-scroll-carousel__stage:focus-within:not(
    :has(.pc-overlay--desktop:focus-within)
  ):not(:has(.pc-oos-overlay:focus-within))::before,
.pc.pc--shine-hover
  .pc-media-inner:hover:not(:has(.pc-overlay--desktop:hover)):not(
    :has(.pc-oos-overlay:hover)
  )::before,
.pc.pc--shine-hover
  .pc-media-inner:focus-within:not(:has(.pc-overlay--desktop:focus-within)):not(
    :has(.pc-oos-overlay:focus-within)
  )::before {
  opacity: 1;
  background: linear-gradient(
    125deg,
    transparent 44%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 255, 255, 0.58) 50%,
    rgba(255, 255, 255, 0.18) 52%,
    transparent 56%
  );
  animation: pc-shine-sweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}

.pc.pc--shine-hover .pc-overlay .btn-primary,
.pc.pc--shine-hover .pc-overlay .btn-product-card-select-variant,
.pc.pc--shine-hover .pc-featured-cta .btn-primary,
.pc.pc--shine-hover .pc-featured-cta .btn-product-card-select-variant,
.pc.pc--shine-hover .pc-mobile-cta .btn-primary,
.pc.pc--shine-hover .pc-mobile-cta .btn-product-card-select-variant,
.pc.pc--shine-hover .pc-card-bar__cta {
  position: relative;
  overflow: hidden;
}

.pc.pc--shine-hover .pc-overlay .btn-primary::after,
.pc.pc--shine-hover .pc-overlay .btn-product-card-select-variant::after,
.pc.pc--shine-hover .pc-featured-cta .btn-primary::after,
.pc.pc--shine-hover .pc-featured-cta .btn-product-card-select-variant::after,
.pc.pc--shine-hover .pc-mobile-cta .btn-primary::after,
.pc.pc--shine-hover .pc-mobile-cta .btn-product-card-select-variant::after,
.pc.pc--shine-hover .pc-card-bar__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -45%;
  width: 28%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.pc.pc--shine-hover .pc-overlay .btn-primary:hover::after,
.pc.pc--shine-hover .pc-overlay .btn-primary:focus-visible::after,
.pc.pc--shine-hover .pc-overlay .btn-product-card-select-variant:hover::after,
.pc.pc--shine-hover
  .pc-overlay
  .btn-product-card-select-variant:focus-visible::after,
.pc.pc--shine-hover .pc-featured-cta .btn-primary:hover::after,
.pc.pc--shine-hover .pc-featured-cta .btn-primary:focus-visible::after,
.pc.pc--shine-hover
  .pc-featured-cta
  .btn-product-card-select-variant:hover::after,
.pc.pc--shine-hover
  .pc-featured-cta
  .btn-product-card-select-variant:focus-visible::after,
.pc.pc--shine-hover .pc-mobile-cta .btn-primary:hover::after,
.pc.pc--shine-hover .pc-mobile-cta .btn-primary:focus-visible::after,
.pc.pc--shine-hover
  .pc-mobile-cta
  .btn-product-card-select-variant:hover::after,
.pc.pc--shine-hover
  .pc-mobile-cta
  .btn-product-card-select-variant:focus-visible::after,
.pc.pc--shine-hover .pc-card-bar__cta:hover::after,
.pc.pc--shine-hover .pc-card-bar__cta:focus-visible::after {
  opacity: 1;
  animation: pc-shine-btn 0.55s ease-in-out 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  .pc.pc--shine-hover
    .pc-scroll-carousel__stage:hover:not(:has(.pc-overlay--desktop:hover)):not(
      :has(.pc-oos-overlay:hover)
    )::before,
  .pc.pc--shine-hover
    .pc-scroll-carousel__stage:focus-within:not(
      :has(.pc-overlay--desktop:focus-within)
    ):not(:has(.pc-oos-overlay:focus-within))::before,
  .pc.pc--shine-hover
    .pc-media-inner:hover:not(:has(.pc-overlay--desktop:hover)):not(
      :has(.pc-oos-overlay:hover)
    )::before,
  .pc.pc--shine-hover
    .pc-media-inner:focus-within:not(
      :has(.pc-overlay--desktop:focus-within)
    ):not(:has(.pc-oos-overlay:focus-within))::before,
  .pc.pc--shine-hover .pc-overlay .btn-primary:hover::after,
  .pc.pc--shine-hover .pc-overlay .btn-primary:focus-visible::after,
  .pc.pc--shine-hover .pc-overlay .btn-product-card-select-variant:hover::after,
  .pc.pc--shine-hover
    .pc-overlay
    .btn-product-card-select-variant:focus-visible::after,
  .pc.pc--shine-hover .pc-featured-cta .btn-primary:hover::after,
  .pc.pc--shine-hover .pc-featured-cta .btn-primary:focus-visible::after,
  .pc.pc--shine-hover
    .pc-featured-cta
    .btn-product-card-select-variant:hover::after,
  .pc.pc--shine-hover
    .pc-featured-cta
    .btn-product-card-select-variant:focus-visible::after,
  .pc.pc--shine-hover .pc-mobile-cta .btn-primary:hover::after,
  .pc.pc--shine-hover .pc-mobile-cta .btn-primary:focus-visible::after,
  .pc.pc--shine-hover
    .pc-mobile-cta
    .btn-product-card-select-variant:hover::after,
  .pc.pc--shine-hover
    .pc-mobile-cta
    .btn-product-card-select-variant:focus-visible::after,
  .pc.pc--shine-hover .pc-card-bar__cta:hover::after,
  .pc.pc--shine-hover .pc-card-bar__cta:focus-visible::after {
    animation: none !important;
    opacity: 0.22 !important;
  }
}

/* Border ring = only .pc-inner (single stroke). No extra outline on default variant. */

.pc-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 10px 12px;
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 6;
}

/* Let hover reach the image until the overlay is shown (also keeps photo-shine :has() accurate). */
.pc .pc-overlay--desktop {
  pointer-events: none;
}

.pc:hover .pc-overlay--desktop,
.pc:focus-within .pc-overlay--desktop {
  pointer-events: auto;
}

.pc:hover .pc-overlay,
.pc:focus-within .pc-overlay {
  opacity: 1;
}

/* Phone + tablet (lg–down): image overlays off — CTAs live under price (.pc-mobile-cta.d-lg-none). */
@media (max-width: 991.98px) {
  .pc .pc-overlay--desktop {
    display: none !important;
  }
}

/* --- Body — Figma rhythm: ~17px under image, 8px title→price --- */
.pc-body {
  padding: 17px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Grow into leftover card height so CTA foot stays on one baseline */
  flex: 1 1 auto;
  min-height: 0;
  text-align: var(--pc-body-align, center);
  align-items: var(--pc-body-justify, center);
}

.pc-body > * {
  width: 100%;
  max-width: 100%;
}

.pc-body .pc-body-main-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: var(--pc-body-align, center);
}

.pc-body .pc-card-meta-row,
.pc-body .pc-inline-price,
.pc-body .pc-spec-lines,
.pc-body .pc-stock-chip,
.pc-body .pc-rating-row,
.pc-body .product-card-rating-wrapper {
  display: flex;
  justify-content: var(--pc-body-justify, center);
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  text-align: var(--pc-body-align, center);
}

.pc-body .pc-price-block {
  width: 100%;
  text-align: var(--pc-body-align, start);
}

.pc-body .pc-inline-price {
  width: 100%;
}

.pc-body .pc-spec-lines {
  flex-direction: column;
  align-items: var(--pc-body-justify, flex-start);
}

.pc-body .pc-title,
.pc-body .pc-category,
.pc-body .pc-opts-hint {
  text-align: var(--pc-body-align, start);
  width: 100%;
}

/* Under-image strip — align horizontal padding with .pc-body */
.pc-after-image {
  flex-shrink: 0;
  padding: 10px 12px 12px;
}

.pc-price-block--featured .pc-featured-price-hit {
  margin-bottom: 2px;
}

.pc-featured-cta {
  margin-top: auto;
  padding-top: 10px;
}

.pc-featured-cta .btn-primary,
.pc-featured-cta .btn-product-card-select-variant {
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17)) !important;
  color: var(--pc-cta-text, #fff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  font-weight: 600;
  min-height: 40px;
}

/* Zid badges — physical top-right, inside the image (not hanging off the card) */
.pc-media-overlay-layer > .pc-image-badge-stack,
.pc-media-inner > .pc-image-badge-stack,
.pc-scroll-carousel__stage > .pc-image-badge-stack {
  position: absolute;
  top: 12px;
  right: 14px;
  bottom: auto;
  left: auto;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 28px);
  pointer-events: none;
}

.pc-image-badge-stack__item,
.pc-image-badge-stack .pc-badge-slot {
  pointer-events: auto;
}

.pc-extra-ship-badge,
.pc-extra-oos-badge {
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
  font-size: var(--pc-fs-badge-pill, 12px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  line-height: 1.2;
}

.pc-extra-oos-badge {
  color: #b42318;
  background: rgba(234, 75, 72, 0.12);
}

.pc-extra-feat-ribbon {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: var(--pc-fs-badge-pill, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transition: transform 0.22s ease;
}

/* In image stack: ribbon is not bottom-left */
.pc-image-badge-stack .pc-extra-feat-ribbon {
  position: static;
  bottom: auto;
  inset-inline-start: auto;
  z-index: auto;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pc:hover .pc-extra-feat-ribbon:not(.pc-image-badge-stack__item) {
  transform: translateY(-2px);
}

.pc:hover .pc-image-badge-stack .pc-extra-feat-ribbon {
  transform: translateY(-1px);
}

.pc-thumb-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0 2px 4px;
}

.pc-thumb-strip .pc-thumb {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.pc-thumb-strip .pc-thumb.is-active {
  border-color: var(--primary-color, #3d0b17);
  box-shadow: 0 0 0 1px var(--primary-color, #3d0b17);
}

.pc-thumb-strip .pc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Follow body_text_align (start / center / end) — same as title & price */
  justify-content: var(--pc-body-justify, flex-start);
  text-align: var(--pc-body-align, start);
  gap: 6px 10px;
  margin-bottom: 0;
  /* Keep row height even when a product has no reviews */
  min-height: calc(var(--pc-fs-rating-star, 15px) + 2px);
}

.pc-card-meta-row--empty {
  visibility: hidden;
  pointer-events: none;
}

.pc-card-rating-brief {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 4px;
  font-size: var(--pc-fs-rating, 13px);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
}

.pc-card-rating-brief__star {
  color: var(--pc-rating-star, #f5b814);
  font-size: var(--pc-fs-rating-star, 15px);
  line-height: 1;
}

.pc-card-rating-brief__count {
  font-weight: 500;
  font-size: var(--pc-fs-rating-count, 12px);
  color: rgba(0, 0, 0, 0.55);
}

/* Same token as sub-line under meta row (--pc-card-subline from layout «لون السطر فوق العنوان») */
.pc-card-sold-line,
.pc-card-subline {
  color: var(--pc-card-subline, #777);
}

.pc-card-sold-line {
  font-size: var(--pc-fs-sold, 12px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pc-card-subline {
  font-size: var(--pc-fs-subline, 13px);
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.35;
}

.pc-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-top: 6px;
}

.pc-stock-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #1a1a1a;
}

.pc-stock-chip.is-low {
  background: rgba(197, 160, 89, 0.1);
}

.pc-stock-chip__ico {
  flex: 0 0 auto;
}

.pc-title-row .pc-title {
  flex: 1 1 auto;
  min-width: 0;
}

.pc-sku {
  flex: 0 0 auto;
  font-size: var(--pc-fs-meta, 13px);
  font-weight: 500;
  color: var(--pc-card-title, inherit);
  opacity: 0.72;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.pc .pc-body .pc-title {
  color: var(--pc-card-title, #1a1a1a);
}

.pc-title {
  font-size: var(--pc-fs-title, 14px);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Leaf category under title — name link only (no image) */
.pc-category {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-size: var(--pc-fs-category, 12px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--pc-category, #888888);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.pc-category:hover,
a.pc-category:focus-visible {
  color: var(--primary-color, #3d0b17);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  outline: none;
}
.pc-category--static {
  cursor: default;
}

.pc-body-main-link--below {
  margin-top: 0;
}

.pc-opts-hint {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #6a7282;
  letter-spacing: 0.01em;
}

.pc-rating-row {
  min-height: 0;
}

.pc-rating-row .product-card-rating-wrapper {
  background: transparent;
  border-radius: 0;
  padding: 2px 0;
}

.pc .product-card-rating .icon-star1:before,
.pc .product-card-rating .icon-half-star:before {
  color: var(--pc-rating-star, inherit);
}

.pc .product-card-rating-count {
  color: var(--pc-rating-count, inherit);
}

/* Price / name colors — separate theme tokens */
.product-item.pc .pc-price-block .product-price,
.product-item.pc .pc-price-block .product-price span,
.product-item.pc .pc-price-block .section-product-price .product-price span,
.pc-price-block .product-price,
.pc-price-block .product-price span,
.pc-price-block .section-product-price .product-price span {
  color: var(--pc-price, #1a1a1a) !important;
}

.product-item.pc .pc-price-block .product-prev-price,
.pc-price-block .product-prev-price {
  color: var(--pc-compare-price, #999999) !important;
  opacity: 1;
  text-decoration: line-through;
}

.product-item.pc .pc-price-block .pc-discount-pill,
.pc-price-block .pc-discount-pill {
  color: var(--pc-discount, var(--pc-price, #1a1a1a)) !important;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.product-item.pc .pc-body .pc-title,
.pc .pc-body .pc-title {
  color: var(--pc-card-title, #1a1a1a) !important;
}

.product-item.pc .pc-price-block .product-price,
.product-item.pc .pc-price-block .product-price span,
.product-item.pc .pc-price-block .section-product-price .product-price span {
  font-size: var(--pc-fs-price, 15px);
}

.product-item.pc .pc-price-block .product-prev-price {
  font-size: var(--pc-fs-price-prev, 13px);
}

.product-item.pc .pc-price-block .pc-discount-pill {
  font-size: var(--pc-fs-discount, 13px);
}

/* Sale + compare prices — one centered/aligned row (or stack when pc--price-stack).
 * Target only the outer row (not nested .product-price.section-product-price). */
.pc .pc-price-block .pc-inline-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--pc-body-justify, flex-start);
  align-items: center;
  width: 100%;
}

.pc .pc-price-block .pc-inline-price > .section-product-price {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--pc-body-justify, flex-start);
  gap: 0.35rem 0.55rem;
  width: auto;
  max-width: 100%;
  margin-inline: 0;
}

/* Opt-in: stack sale + compare vertically (still follows body align) */
.pc.pc--price-stack .pc-price-block .pc-inline-price > .section-product-price {
  flex-direction: column;
  align-items: var(--pc-body-justify, flex-start);
  gap: 0.2rem;
}

.pc .pc-price-block .pc-inline-price > .section-product-price > .product-price {
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 0;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}

/* Compare/old price wrapper + optional discount pill */
.pc .pc-price-block .pc-inline-price > .section-product-price > div:not(.product-price) {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--pc-body-justify, flex-start);
  gap: 0.3rem 0.45rem;
  min-width: 0;
  flex: 0 0 auto;
  margin-top: 0;
}

/* Non-sale single price still aligns with body */
.pc .pc-price-block .pc-inline-price > .product-price.section-product-price {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin-bottom: 0;
}

.pc-price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pc-price-row .pc-prices {
  flex: 1;
  min-width: 0;
}

.pc-inline-cta {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17));
  color: var(--pc-cta-text, #fff);
  box-shadow: none;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.pc-inline-cta:hover {
  opacity: 0.9;
  transform: none;
}

.pc-inline-cta span {
  font-size: var(--pc-fs-inline-cta-ico, 1.25rem);
  line-height: 1;
}

.pc-inline-cta--ghost {
  background: transparent;
  color: var(--pc-cta-bg, var(--primary-color, #3d0b17));
  border: 2px solid currentColor;
  box-shadow: none;
}

.pc-footer {
  padding: 0 12px 12px;
}

.pc-footer .btn-product-card-out-of-stock,
.pc-overlay .btn-product-card-out-of-stock {
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17));
  color: var(--pc-cta-text, #fff);
  border-color: transparent;
}

.pc-btn-wide {
  width: 100%;
  border-radius: 10px;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  font-size: var(--pc-fs-btn-wide, 14px);
}

/* Overlay CTAs: flat, no Bootstrap shadow */
.pc-overlay .btn,
.pc-overlay .btn:hover,
.pc-overlay .btn:focus,
.pc-overlay .btn:active {
  box-shadow: none !important;
}

.pc-overlay .btn-primary,
.pc-overlay .btn-product-card-select-variant {
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17)) !important;
  color: var(--pc-cta-text, #fff) !important;
  border-color: transparent !important;
}

.pc-overlay .product-card-add-to-cart {
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17)) !important;
  color: var(--pc-cta-text, #fff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.pc-spec-lines small {
  display: block;
  font-size: var(--pc-fs-spec, 13px) !important;
  color: rgba(0, 0, 0, 0.62);
}

/* Under-price row (d-lg-none): pin to bottom of .pc-body when cards stretch to equal height. */
.pc-mobile-cta {
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
}

/* Same CTA tokens as .pc-overlay / .pc-featured-cta — mobile row is outside overlay so it was using global .btn-primary (--primary-color only). */
.pc-mobile-cta .btn,
.pc-mobile-cta .btn:hover,
.pc-mobile-cta .btn:focus,
.pc-mobile-cta .btn:active {
  box-shadow: none !important;
}

.pc-mobile-cta .btn-primary,
.pc-mobile-cta .btn-primary:hover,
.pc-mobile-cta .btn-primary:focus,
.pc-mobile-cta .btn-primary:active,
.pc-mobile-cta .btn-primary:not(:disabled):not(.disabled).active,
.pc-mobile-cta .btn-product-card-select-variant,
.pc-mobile-cta .btn-product-card-select-variant:hover,
.pc-mobile-cta .btn-product-card-select-variant:focus,
.pc-mobile-cta .btn-product-card-select-variant:active {
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17)) !important;
  color: var(--pc-cta-text, #fff) !important;
  border-color: transparent !important;
  filter: none;
}

.pc-mobile-cta .product-card-add-to-cart,
.pc-mobile-cta .product-card-add-to-cart:hover,
.pc-mobile-cta .product-card-add-to-cart:focus,
.pc-mobile-cta .product-card-add-to-cart:active {
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17)) !important;
  color: var(--pc-cta-text, #fff) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none;
}

/* CTAs + options: one type size token (overrides Bootstrap .btn-sm on cards) */
.product-item.pc .pc-overlay .btn,
.product-item.pc .pc-overlay .product-card-add-to-cart,
.product-item.pc .pc-mobile-cta .btn,
.product-item.pc .pc-mobile-cta .product-card-add-to-cart,
.product-item.pc .pc-featured-cta .btn,
.product-item.pc .pc-featured-cta .product-card-add-to-cart,
.product-item.pc .pc-pdp-opts-cta .btn {
  font-size: var(--pc-fs-cta, 14px);
}

/* --- Image carousel (all breakpoints; arrows mostly mobile) --- */
.pc-scroll-carousel {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 0;
  position: relative;
  /* Nav sizing: scales per breakpoint; mobile = compact */
  --pc-nav-hit: 32px;
  --pc-nav-icon: 15px;
  --pc-nav-inset: 5px;
  --pc-nav-bg: rgba(255, 255, 255, 0.93);
  --pc-nav-bg-hover: #fff;
  --pc-nav-fg: rgba(0, 0, 0, 0.52);
  --pc-nav-fg-hover: rgba(0, 0, 0, 0.72);
  --pc-nav-ring: rgba(0, 0, 0, 0.06);
  --pc-nav-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  --pc-nav-shadow-hover: 0 3px 12px rgba(0, 0, 0, 0.14);
}

@media (min-width: 769px) {
  .pc-scroll-carousel {
    --pc-nav-hit: 36px;
    --pc-nav-icon: 17px;
    --pc-nav-inset: 7px;
  }
}

@media (min-width: 992px) {
  .pc-scroll-carousel {
    --pc-nav-hit: 38px;
    --pc-nav-icon: 18px;
    --pc-nav-inset: 9px;
  }
}

@media (min-width: 1400px) {
  .pc-scroll-carousel {
    --pc-nav-hit: 40px;
    --pc-nav-icon: 19px;
    --pc-nav-inset: 10px;
  }
}

.pc-scroll-carousel__stage {
  position: relative;
  overflow: hidden;
  display: block;
}

.pc-scroll-carousel__strip {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  /* pan-x alone blocks vertical page scroll when the finger starts on the image. */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  overflow-anchor: none;
}

.pc-scroll-carousel__strip::-webkit-scrollbar {
  display: none;
}

.pc-scroll-carousel__slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate;
}

.pc-scroll-carousel__slide .pc-media-detail-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.pc-scroll-carousel__slide .pc-media-detail-link:focus-visible {
  outline: 2px solid var(--primary-color, #3d0b17);
  outline-offset: 3px;
  border-radius: 4px;
}

.pc-media-inner .pc-media-detail-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.pc-media-inner .pc-media-detail-link:focus-visible {
  outline: 2px solid var(--primary-color, #3d0b17);
  outline-offset: 3px;
}

.product-item.pc .pc-scroll-carousel__slide img,
.pc-scroll-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: var(--pc-img-fit, cover);
  object-position: top center;
  transition: transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform-origin: center center;
}

.pc--img-contain .pc-scroll-carousel__slide img {
  object-position: center;
}

.pc-scroll-carousel__slide {
  position: relative;
  height: 100%;
  min-height: 0;
}

.pc-scroll-carousel__slide .pc-media-detail-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Zoom only the active slide — scaling every slide peeked the next image on the side */
.pc-scroll-carousel--zoom:hover .pc-carousel-slide-img,
.pc-scroll-carousel--zoom:focus-within .pc-carousel-slide-img {
  transform: none;
}

.pc-scroll-carousel--zoom:hover
  .pc-scroll-carousel__slide.is-active
  .pc-carousel-slide-img,
.pc-scroll-carousel--zoom:focus-within
  .pc-scroll-carousel__slide.is-active
  .pc-carousel-slide-img {
  transform: scale(1.08);
}

/* Mid-image nav: compact on phones; scales via --pc-nav-* on .pc-scroll-carousel */
.pc-scroll-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  box-sizing: border-box;
  width: var(--pc-nav-hit);
  height: var(--pc-nav-hit);
  min-width: var(--pc-nav-hit);
  min-height: var(--pc-nav-hit);
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pc-nav-ring);
  border-radius: 50%;
  background: var(--pc-nav-bg);
  color: var(--pc-nav-fg);
  box-shadow: var(--pc-nav-shadow);
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pc-scroll-carousel__nav:disabled {
  opacity: 0.28;
  cursor: default;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Prev / next on logical edges; chevrons point outward (away from image center) */
.pc-scroll-carousel__nav--prev {
  inset-inline-start: var(--pc-nav-inset);
  inset-inline-end: auto;
}

.pc-scroll-carousel__nav--next {
  inset-inline-end: var(--pc-nav-inset);
  inset-inline-start: auto;
}

.pc-scroll-carousel__nav svg,
.pc-scroll-carousel__nav-icon {
  display: block;
  flex-shrink: 0;
  width: var(--pc-nav-icon);
  height: var(--pc-nav-icon);
}

/* SVGs are drawn for LTR; flip only in RTL so arrows still point outward */
[dir="rtl"] .pc-scroll-carousel__nav-icon {
  transform: scaleX(-1);
}

.pc-scroll-carousel__nav:hover:not(:disabled),
.pc-scroll-carousel__nav:focus-visible:not(:disabled) {
  background: var(--pc-nav-bg-hover);
  color: var(--pc-nav-fg-hover);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: var(--pc-nav-shadow-hover);
  transform: translateY(-50%) scale(1.03);
}

.pc-scroll-carousel:hover .pc-scroll-carousel__nav,
.pc-scroll-carousel:focus-within .pc-scroll-carousel__nav {
  opacity: 1;
}

/* Touch / narrow viewports: always show arrows (no hover). */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .pc-scroll-carousel .pc-scroll-carousel__nav {
    opacity: 1;
  }

  .pc-scroll-carousel .pc-scroll-carousel__nav:disabled {
    opacity: 0.28;
  }
}

.pc-scroll-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 8px;
  margin: 0;
  /* Wrapper must not steal taps meant for the product link. */
  pointer-events: none;
  opacity: 1;
}

.pc-scroll-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.pc-scroll-carousel__dot.is-active {
  background: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

/* Above-title promo strip — same proportions as .product-box .tp-content-wrapper .promotional-image */
.pc .pc-promo-banner.tp-content-wrapper .promotional-image,
.pc .pc-promo-banner .promotional-image {
  display: block;
  width: 100%;
  height: var(--pc-promo-img-h, 30px);
  max-height: var(--pc-promo-img-h, 30px);
  object-fit: contain;
}

/* Product showcase swipers: slides match tallest visible card */
.swiper > .swiper-wrapper:has(.cps-slide__inner .product-item.pc),
.swiper > .swiper-wrapper:has(.bwp-slide__inner .product-item.pc),
.swiper > .swiper-wrapper:has(.tpt-slide__inner .product-item.pc),
.swiper > .swiper-wrapper:has(.fpp-slide__inner .product-item.pc),
.swiper > .swiper-wrapper:has(.athar-slide__inner .product-item.pc) {
  align-items: stretch;
}

/* Section product grids (tabbed / curated): equal card height + CTA baseline */
.tpt-product-grid,
.cps-product-grid {
  align-items: stretch;
}

.tpt-grid-cell,
.cps-grid-cell {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

.cps-grid-cell > .cps-slide__inner,
.tpt-grid-cell > .tpt-slide__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cps-grid-cell > .cps-slide__inner > .product-item.pc,
.tpt-grid-cell > .tpt-slide__inner > .product-item.pc {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.cps-grid-cell > .cps-slide__inner > .product-item.pc > .pc-inner,
.tpt-grid-cell > .tpt-slide__inner > .product-item.pc > .pc-inner {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.swiper-slide:has(> .cps-slide__inner > .product-item.pc),
.swiper-slide:has(> .bwp-slide__inner > .product-item.pc),
.swiper-slide:has(> .tpt-slide__inner > .product-item.pc),
.swiper-slide:has(> .fpp-slide__inner > .product-item.pc),
.swiper-slide:has(> .athar-slide__inner > .product-item.pc) {
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.swiper-slide .cps-slide__inner,
.swiper-slide .bwp-slide__inner,
.swiper-slide .tpt-slide__inner,
.swiper-slide .fpp-slide__inner,
.swiper-slide .athar-slide__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.swiper-slide .cps-slide__inner > .product-item.pc,
.swiper-slide .bwp-slide__inner > .product-item.pc,
.swiper-slide .tpt-slide__inner > .product-item.pc,
.swiper-slide .fpp-slide__inner > .product-item.pc,
.swiper-slide .athar-slide__inner > .product-item.pc {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.swiper-slide .cps-slide__inner > .product-item.pc > .pc-inner,
.swiper-slide .bwp-slide__inner > .product-item.pc > .pc-inner,
.swiper-slide .tpt-slide__inner > .product-item.pc > .pc-inner,
.swiper-slide .fpp-slide__inner > .product-item.pc > .pc-inner,
.swiper-slide .athar-slide__inner > .product-item.pc > .pc-inner {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Mobile / tablet (<1000px): media frame is height-locked, so stretch is safe
 * and keeps CTAs on one baseline across the row. */
@media (max-width: 999.98px) {
  .swiper > .swiper-wrapper:has(.bwp-slide__inner .product-item.pc),
  .swiper > .swiper-wrapper:has(.cps-slide__inner .product-item.pc),
  .swiper > .swiper-wrapper:has(.tpt-slide__inner .product-item.pc),
  .swiper > .swiper-wrapper:has(.fpp-slide__inner .product-item.pc),
  .swiper > .swiper-wrapper:has(.athar-slide__inner .product-item.pc) {
    align-items: stretch;
  }

  .swiper-slide:has(> .bwp-slide__inner > .product-item.pc),
  .swiper-slide:has(> .cps-slide__inner > .product-item.pc),
  .swiper-slide:has(> .tpt-slide__inner > .product-item.pc),
  .swiper-slide:has(> .fpp-slide__inner > .product-item.pc),
  .swiper-slide:has(> .athar-slide__inner > .product-item.pc) {
    height: auto !important;
    align-self: stretch;
    display: flex;
  }

  .swiper-slide .bwp-slide__inner,
  .swiper-slide .cps-slide__inner,
  .swiper-slide .tpt-slide__inner,
  .swiper-slide .fpp-slide__inner,
  .swiper-slide .athar-slide__inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    width: 100%;
  }

  .swiper-slide .bwp-slide__inner > .product-item.pc,
  .swiper-slide .cps-slide__inner > .product-item.pc,
  .swiper-slide .tpt-slide__inner > .product-item.pc,
  .swiper-slide .fpp-slide__inner > .product-item.pc,
  .swiper-slide .athar-slide__inner > .product-item.pc {
    flex: 1 1 auto;
    height: auto;
    min-height: 100%;
  }

  .swiper-slide .bwp-slide__inner > .product-item.pc .pc-inner,
  .swiper-slide .cps-slide__inner > .product-item.pc .pc-inner,
  .swiper-slide .tpt-slide__inner > .product-item.pc .pc-inner,
  .swiper-slide .fpp-slide__inner > .product-item.pc .pc-inner,
  .swiper-slide .athar-slide__inner > .product-item.pc .pc-inner {
    height: 100%;
  }

  /* Respect theme height scale inside product swipers */
  .swiper-slide .bwp-slide__inner > .product-item.pc .pc-media-inner,
  .swiper-slide .cps-slide__inner > .product-item.pc .pc-media-inner,
  .swiper-slide .tpt-slide__inner > .product-item.pc .pc-media-inner,
  .swiper-slide .fpp-slide__inner > .product-item.pc .pc-media-inner,
  .swiper-slide .athar-slide__inner > .product-item.pc .pc-media-inner,
  .swiper-slide .bwp-slide__inner > .product-item.pc .pc-scroll-carousel__stage,
  .swiper-slide .cps-slide__inner > .product-item.pc .pc-scroll-carousel__stage,
  .swiper-slide .tpt-slide__inner > .product-item.pc .pc-scroll-carousel__stage,
  .swiper-slide .fpp-slide__inner > .product-item.pc .pc-scroll-carousel__stage,
  .swiper-slide .athar-slide__inner > .product-item.pc .pc-scroll-carousel__stage {
    aspect-ratio: var(--pc-img-aspect-m, calc(10 / var(--pc-img-height-scale-m, 11)));
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* Legacy slick columns (e.g. related products) */
.products-slider .prod-col:has(> .product-item.pc),
#related-products .prod-col:has(> .product-item.pc) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.products-slider .prod-col:has(> .product-item.pc) > .product-item.pc,
#related-products .prod-col:has(> .product-item.pc) > .product-item.pc {
  flex: 1 1 auto;
  min-height: 0;
}

/* Slick product row (e.g. products-showcase-background): slides match tallest card */
.cps-slider.slick-initialized .slick-track {
  display: flex;
  align-items: stretch;
}

.cps-slider.slick-initialized .slick-slide {
  height: auto;
  display: flex;
}

.cps-slider.slick-initialized .slick-slide > .cps-slide {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.cps-slider .cps-slide__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cps-slider .cps-slide__inner > .product-item.pc {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.cps-slider:not(.slick-initialized) > .cps-slide {
  display: flex;
  flex-direction: column;
}

.pc-price-row__hit {
  display: block;
  min-width: 0;
}

/* --- Sale countdown: compact pill columns (colors via layout CSS vars, optional theme settings) --- */
.tp-countdown.pc-sale-countdown,
.pc-sale-countdown {
  margin: 0;
  padding: 8px 4px 12px;
  background: transparent;
  border: none;
}

.pc-sale-countdown--overlay {
  position: absolute;
  top: auto;
  bottom: 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 7;
  width: max-content;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* Avoid 00:00:00 flash before JS confirms a live sale window */
.pc-sale-countdown--overlay:not(.is-ready),
.pc-sale-countdown--overlay[hidden] {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Fixed squares per viewport. Do not use cqw here: a 2-up phone card
   and a 5-up desktop card were shrinking the units below the type. */
.pc-sale-countdown--overlay .tp-countdown__units--stacked,
.pc-sale-countdown--overlay ul.tp-countdown__units {
  width: auto;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.pc-sale-countdown--overlay .tp-countdown__unit {
  flex: 0 0 44px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  aspect-ratio: auto;
  padding: 4px 2px 5px;
  border-radius: 8px;
  background: var(--pc-cd-unit-bg, #bacd92);
  color: var(--pc-cd-unit-text, #ffffff);
  box-shadow: none;
  border: none;
  gap: 1px;
}

.pc-sale-countdown--overlay .tp-countdown__val,
.pc-sale-countdown--overlay .tp-countdown .pc-cd-d,
.pc-sale-countdown--overlay .tp-countdown .pc-cd-h,
.pc-sale-countdown--overlay .tp-countdown .pc-cd-m,
.pc-sale-countdown--overlay .tp-countdown .pc-cd-s {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  text-transform: none;
}

.pc-sale-countdown--overlay .tp-countdown__lbl,
.pc-sale-countdown--overlay .tp-countdown-label.tp-countdown__lbl {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: inherit;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-sale-countdown--media {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 2px;
}

.tp-countdown__units--stacked,
.tp-countdown ul.tp-countdown__units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
}

.tp-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 24px;
  max-width: 40px;
  padding: 7px 3px 5px;
  border-radius: 6px;
  background: var(
    --pc-cd-unit-bg,
    color-mix(
      in srgb,
      var(--primary-color, #3d0b17) 11%,
      rgba(255, 255, 255, 0.94)
    )
  );
  color: var(--pc-cd-unit-text, var(--primary-color, #3d0b17));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@supports not (background: color-mix(in srgb, black 50%, white)) {
  .tp-countdown__unit {
    background: var(--pc-cd-unit-bg, rgba(61, 11, 23, 0.09));
  }
}

.tp-countdown__val,
.tp-countdown .pc-cd-d,
.tp-countdown .pc-cd-h,
.tp-countdown .pc-cd-m,
.tp-countdown .pc-cd-s {
  display: block;
  font-weight: 800;
  font-size: var(--pc-fs-count-val, 13px);
  line-height: 1.1;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.tp-countdown__lbl,
.tp-countdown-label.tp-countdown__lbl {
  display: block;
  font-size: var(--pc-fs-count-lbl, 11px);
  line-height: 1.2;
  font-weight: 600;
  color: inherit;
  opacity: 0.88;
  text-align: center;
}

.tp-countdown[dir="rtl"] .tp-countdown__units--stacked {
  flex-direction: row-reverse;
}

.tp-countdown[dir="ltr"] .tp-countdown__units--stacked {
  flex-direction: row;
}

/* Re-assert fixed sizes after the generic 40px cap above. */
@media (max-width: 1199.98px) {
  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__units--stacked,
  .tp-countdown.pc-sale-countdown--overlay ul.tp-countdown__units {
    gap: 6px;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__unit {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    border-radius: 8px;
    padding: 4px 2px 5px;
    gap: 1px;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__val,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-d,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-h,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-m,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-s {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__lbl,
  .tp-countdown.pc-sale-countdown--overlay .tp-countdown-label.tp-countdown__lbl {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.05;
    white-space: nowrap;
    opacity: 1;
  }
}

@media (max-width: 767.98px) {
  .tp-countdown.pc-sale-countdown--overlay {
    bottom: 8px;
    left: 4px;
    right: 4px;
    width: auto;
    max-width: none;
    transform: none;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__units--stacked,
  .tp-countdown.pc-sale-countdown--overlay ul.tp-countdown__units {
    width: 100%;
    max-width: 100%;
    gap: 4px;
    justify-content: center;
    align-items: center;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__unit {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    border-radius: 8px;
    padding: 3px 1px 4px;
    gap: 0;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__val,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-d,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-h,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-m,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-s {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__lbl,
  .tp-countdown.pc-sale-countdown--overlay .tp-countdown-label.tp-countdown__lbl {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 1;
  }
}

@media (min-width: 1400px) {
  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__units--stacked,
  .tp-countdown.pc-sale-countdown--overlay ul.tp-countdown__units {
    gap: 8px;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__unit {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    border-radius: 10px;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__val,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-d,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-h,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-m,
  .tp-countdown.pc-sale-countdown--overlay .pc-cd-s {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .tp-countdown.pc-sale-countdown--overlay .tp-countdown__lbl,
  .tp-countdown.pc-sale-countdown--overlay .tp-countdown-label.tp-countdown__lbl {
    font-size: 12px;
    font-weight: 600;
  }
}

/* --- Out of stock --- */
.product-item.pc.product-item-out-of-stock {
  filter: none;
}

.pc.product-item-out-of-stock .pc-img-primary,
.pc.product-item-out-of-stock .pc-img-secondary,
.pc.product-item-out-of-stock .pc-scroll-carousel__slide img {
  filter: grayscale(1);
  opacity: 0.9;
}

.pc-oos-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  inset-inline-end: auto;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--pc-fs-oos-badge, 12px);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(135deg, #5a5a5a, #3a3a3a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.pc-oos-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 10px 12px;
  z-index: 12;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none;
}

.pc-media-inner:hover .pc-oos-overlay,
.pc-media-inner:focus-within .pc-oos-overlay,
.pc-scroll-carousel__stage:hover .pc-oos-overlay,
.pc-scroll-carousel__stage:focus-within .pc-oos-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pc-oos-notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #222;
  font-size: var(--pc-fs-oos-notify, 13px);
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.pc-oos-notify__ico {
  flex-shrink: 0;
  font-size: var(--pc-fs-inline-cta-ico, 1.25rem);
  line-height: 1;
}

.pc-oos-notify .pc-oos-notify__ico {
  color: var(--primary-color, #3d0b17);
}

@media (max-width: 991.98px) {
  .pc-oos-overlay {
    display: none !important;
  }
}

.pc-oos-notify-btn {
  border-radius: 10px !important;
  font-size: var(--pc-fs-cta, 14px) !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  background: var(--pc-cta-bg, var(--primary-color, #3d0b17)) !important;
  color: var(--pc-cta-text, #fff) !important;
}

.pc-oos-notify-btn:hover {
  opacity: 0.93;
  color: var(--pc-cta-text, #fff) !important;
}

.pc-oos-notify-btn .pc-oos-notify__ico {
  color: inherit;
  opacity: 0.95;
  font-size: var(--pc-fs-inline-cta-ico, 1.25rem);
}

/* Override global .product-crd-spec min-height so price stack stays tight */
.pc .product-crd-spec.pc-price-block {
  min-height: 0 !important;
  margin-top: 2px;
}

.pc-spec-lines {
  margin-top: 4px;
}

.pc-price-block .section-product-price,
.pc-price-block .product-price {
  margin-bottom: 0;
}

.pc-price-block .section-product-price .product-price {
  line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .pc-inner,
  .pc-img-primary,
  .pc-img-secondary,
  .pc-overlay,
  .pc-inline-cta {
    transition-duration: 0.01ms !important;
  }

  .pc-zoom-hover:hover .pc-img-primary,
  .pc-zoom-hover:focus-within .pc-img-primary {
    transform: none;
  }
}

/* PDP link row — “choose options” when card can’t add inline (inputs / bundle) */
.pc-pdp-opts-cta {
  width: 100%;
}

/* --- Under-image strip — same promo language as PDP (scoped to .pc-after-image) --- */
.pc-after-image .pd-promo-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 0;
}

.pc-after-image .pd-promo-badges-list {
  gap: 8px 10px;
}

.pc-after-image .pd-promo-badge-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--pc-fs-strip-badge, 13px);
  letter-spacing: 0.02em;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  unicode-bidi: isolate;
}

@media (max-width: 449.98px) {
  .pc-after-image .pd-promo-badge-item {
    font-size: 10px;
  }
}

.pc-after-image .pd-promo-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--pc-fs-strip-badge, 13px);
  letter-spacing: 0.02em;
  background: #fff !important;
  border: 1px solid var(--pd-badge-accent, rgba(0, 0, 0, 0.14));
  color: var(--pd-badge-accent, rgba(0, 0, 0, 0.88));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pc-after-image .pd-promo-strip-note-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.pc-after-image .pd-promo-note-ico {
  flex-shrink: 0;
  color: var(--primary-color, #3d0b17);
  animation: pc-card-promo-note-pulse 1.35s ease-in-out infinite;
}

@keyframes pc-card-promo-note-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    opacity: 0.08;
    transform: scale(0.92);
  }
  55% {
    opacity: 0.08;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-after-image .pd-promo-note-ico {
    animation: none;
  }
}

.pc-after-image .pd-promo-strip-note {
  font-size: var(--pc-fs-strip-note, 13px);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.78);
  unicode-bidi: isolate;
}

.pc-urgency-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--pc-urg-row-fg, inherit);
}

.pc-urgency-line__ico {
  flex-shrink: 0;
  color: var(--primary-color, #3d0b17);
  animation: pc-urgency-flash-pulse 1.15s ease-in-out infinite;
}

.pc-urgency-line__text {
  font-size: var(--pc-fs-urgency, 13px);
  font-weight: 600;
  line-height: 1.35;
  unicode-bidi: isolate;
}

@keyframes pc-urgency-flash-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-urgency-line__ico {
    animation: none;
  }
  .pc .pd-promo-ticker-marquee-row {
    -webkit-animation: none !important;
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    row-gap: 0.5rem;
  }
  .pc .pd-promo-ticker-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Figma 224:1799 — 171×35, pad 10, text 12/15 Regular, optically centered */
.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner {
  --pc-corner-tk-h: 35px;
  --pc-corner-tk-pad-x: 10px;
  --pc-corner-tk-fs: 12px;
  --pc-corner-tk-lh: 15px;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 9;
  width: max-content;
  max-width: min(65%, 171px);
  margin: 0;
  background: var(--pd-promo-tk-bg, #9896ff);
  color: var(--pd-promo-tk-fg, #fff);
  border-radius: var(--pc-radius, 24px) 0 0 0;
  overflow: hidden;
  box-sizing: border-box;
  height: var(--pc-corner-tk-h);
  min-height: var(--pc-corner-tk-h);
  max-height: var(--pc-corner-tk-h);
  display: block;
  box-shadow: none;
  pointer-events: none;
  flex-shrink: 0;
  line-height: 0;
  padding: 0;
}

/* One copy only — sets the badge width. The animated row is position:absolute so it cannot widen the badge to both copies. */
.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-sizer {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  width: max-content;
  padding: 0 var(--pc-corner-tk-pad-x);
  box-sizing: content-box;
}

.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* flex-start: a centered row shifts the seam, so translateX(-50%) no longer lands on the duplicate copy. */
  justify-content: flex-start;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0 var(--pc-corner-tk-pad-x);
  box-sizing: border-box;
  overflow: hidden;
  contain: none;
  -webkit-mask-image: none;
  mask-image: none;
  line-height: normal;
}

.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-marquee-row {
  align-items: center;
  height: var(--pc-corner-tk-lh);
  /* Don't let the 171px corner squeeze the row — -50% must be exactly one copy. No gap here; spacing lives on each copy. */
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  gap: 0;
  -webkit-animation-name: announcement-ticker-marquee-kf;
  animation-name: announcement-ticker-marquee-kf;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

/* Same as the header bar: Arabic scrolls toward the right. Keyframes stay 0 → -50%. */
html[dir="rtl"] .pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-marquee-row {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-content {
  gap: 0.75rem;
  padding-inline: 0;
  /* Trailing pad = item gap, so the join between the two copies matches the space inside a copy. */
  padding-inline-end: 0.75rem;
  align-items: center;
  height: var(--pc-corner-tk-lh);
  line-height: var(--pc-corner-tk-lh);
}

.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-item {
  font-family: var(--ath-body-font-family, inherit);
  font-size: var(--pc-corner-tk-fs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--pc-corner-tk-lh);
  height: var(--pc-corner-tk-lh);
  color: var(--pd-promo-tk-fg, #fff) !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner .pd-promo-ticker-star {
  display: none;
}

@media (max-width: 768px) {
  .pc .pd-promo-ticker.pc-card-ticker--media.pc-card-ticker--corner {
    --pc-corner-tk-h: 30px;
    --pc-corner-tk-pad-x: 8px;
    --pc-corner-tk-fs: 11px;
    --pc-corner-tk-lh: 13px;
    max-width: min(70%, 150px);
  }
}


/* Marquee under card image (legacy under-body placement) */
.pc .pd-promo-ticker.pc-card-ticker:not(.pc-card-ticker--media) {
  background: var(--pd-promo-tk-bg, #0ea94c);
  color: var(--pd-promo-tk-fg, #fff);
  border-radius: 10px;
  overflow: hidden;
  padding: 0.55rem 0;
  position: relative;
}

.pc .pd-promo-ticker.pc-card-ticker .pd-promo-ticker-viewport {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  contain: layout;
  direction: ltr;
  unicode-bidi: isolate;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
}

.pc .pd-promo-ticker.pc-card-ticker .pd-promo-ticker-marquee-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: announcement-ticker-marquee-kf linear infinite;
  -webkit-animation-duration: var(--ab-scroll-dur, 18s);
  animation: announcement-ticker-marquee-kf linear infinite;
  animation-duration: var(--ab-scroll-dur, 18s);
}

@media (hover: hover) and (pointer: fine) {
  .pc
    .pd-promo-ticker.pc-card-ticker
    .pd-promo-ticker-viewport:hover
    .pd-promo-ticker-marquee-row {
    animation-play-state: paused;
  }

  /* Corner ribbon stays moving. Hover-pause made it look "off" while the cursor was on the card. */
  .pc
    .pd-promo-ticker.pc-card-ticker--corner
    .pd-promo-ticker-viewport:hover
    .pd-promo-ticker-marquee-row {
    -webkit-animation-play-state: running;
    animation-play-state: running;
  }
}

.pc .pd-promo-ticker.pc-card-ticker .pd-promo-ticker-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  flex-shrink: 0;
  width: max-content;
  white-space: nowrap;
}

.pc .pd-promo-ticker.pc-card-ticker .pd-promo-ticker-item {
  font-size: var(--pc-fs-ticker, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pd-promo-tk-fg, #fff);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pc .pd-promo-ticker.pc-card-ticker .pd-promo-ticker-star {
  color: #ffd23f;
}

/* Add-to-cart + qty: single row (nowrap) on wide viewports; below 1460px wrap — qty + CTA each full width. */
.product-item .pc-cta-with-qty,
.pc .pc-cta-with-qty {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 0.625rem;
}

/* .pc-btn-wide is width:100% globally — beside the qty strip, flex children need auto width. */
.product-item
  .pc-cta-with-qty
  .product-card-add-to-cart.pc-btn-wide:not(.w-100),
.pc .pc-cta-with-qty .product-card-add-to-cart.pc-btn-wide:not(.w-100) {
  width: auto;
  max-width: 100%;
}

.product-item .pc-cta-with-qty .product-card-add-to-cart:not(.w-100),
.pc .pc-cta-with-qty .product-card-add-to-cart:not(.w-100) {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

.product-item .pc-cta-with-qty .product-card-add-to-cart,
.pc .pc-cta-with-qty .product-card-add-to-cart {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 1459.98px) {
  .product-item .pc-cta-with-qty,
  .pc .pc-cta-with-qty {
    flex-wrap: wrap;
  }

  .product-item
    .pc-cta-with-qty
    .product-card-add-to-cart.pc-btn-wide:not(.w-100),
  .pc .pc-cta-with-qty .product-card-add-to-cart.pc-btn-wide:not(.w-100) {
    width: 100%;
    max-width: 100%;
  }

  .product-item .pc-cta-with-qty .product-card-add-to-cart:not(.w-100),
  .pc .pc-cta-with-qty .product-card-add-to-cart:not(.w-100) {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .product-item .pc-card-qty,
  .pc .pc-card-qty {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

/* Quantity stepper beside add-to-cart (compact strip on wide screens; full width below 1460px in .pc-cta-with-qty) */
.product-item .pc-card-qty,
.pc .pc-card-qty {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #dddddd;
  border-radius: 10px;
  overflow: hidden;
  height: 40px;
  max-height: 100%;
  color: #222;
}
.product-item .pc-card-qty-btn,
.pc .pc-card-qty-btn {
  width: 30px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--pc-fs-qty-btn, 16px);
  font-weight: 700;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.product-item .pc-card-qty-btn:hover,
.pc .pc-card-qty-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.product-item .pc-card-qty-val,
.pc .pc-card-qty-val {
  width: 26px;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: var(--pc-fs-qty-val, 14px);
  font-weight: 700;
  color: inherit;
  outline: none;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.product-item .pc-card-qty-val:hover,
.pc .pc-card-qty-val:hover {
  background: rgba(0, 0, 0, 0.04);
}
.product-item .pc-card-qty-val:focus,
.product-item .pc-card-qty-val:focus-visible,
.pc .pc-card-qty-val:focus,
.pc .pc-card-qty-val:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
}
.product-item .pc-card-qty-val::-webkit-outer-spin-button,
.product-item .pc-card-qty-val::-webkit-inner-spin-button,
.pc .pc-card-qty-val::-webkit-outer-spin-button,
.pc .pc-card-qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Compact overlay / mobile: align stepper with shorter buttons */
@media (max-width: 767.98px) {
  .product-item .pc-card-qty,
  .pc .pc-card-qty {
    height: 38px;
  }
  .product-item .pc-card-qty-btn,
  .pc .pc-card-qty-btn {
    width: 28px;
  }
  .product-item .pc-card-qty-val,
  .pc .pc-card-qty-val {
    width: 24px;
  }
}

/* Inline variant dropdowns — label on its own line, control centered under it. */
.pc-iv-root {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 0.35rem;
  width: 100%;
}

.pc-iv-opt-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.pc-iv-opt-row--colors {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
}

.pc-iv-opt-label,
.pc-iv-swatches__label {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #333;
  font-size: var(--pc-fs-iv-label, 12px);
  line-height: 1.2;
}

.pc-iv-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
}

.pc-iv-swatches__label {
  flex: 1 0 100%;
}

.pc-iv-swatch {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pc-swatch, #ccc);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 1.5px rgba(41, 45, 50, 0.28);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pc-iv-swatch:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 1.5px rgba(41, 45, 50, 0.45);
}

.pc-iv-swatch.is-selected {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 0 2px #fff,
    0 0 0 4px #292d32;
}

.pc-iv-swatch.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 767.98px) {
  .pc-iv-swatch {
    width: 25px;
    height: 25px;
    min-width: 25px;
  }
}

.pc-iv-opt-select {
  appearance: none;
  width: min(100%, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  cursor: pointer;
  font-size: var(--pc-fs-iv-select, 13px);
  line-height: 1.25;
  color: #222;
  text-align: center;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.pc-iv-opt-select:hover {
  border-color: var(--primary-color, #3d0b17);
}

.pc-iv-opt-select[aria-expanded="true"] {
  border-color: var(--primary-color, #3d0b17);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.pc-iv-opt-select-name {
  flex: 0 0 auto;
  font-weight: 700;
  color: #333;
  font-size: var(--pc-fs-iv-label, 12px);
  padding-inline-end: 0.45rem;
  border-inline-end: 1px solid rgba(0, 0, 0, 0.08);
}

.pc-iv-opt-select-val {
  flex: 0 1 auto;
  text-align: center;
  font-weight: 600;
  font-size: var(--pc-fs-meta, 13px);
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-iv-opt-select-val.is-placeholder {
  color: #292d32;
  font-weight: 600;
  font-style: normal;
}

.pc-iv-opt-caret {
  flex: 0 0 auto;
  color: #292d32;
  transition: transform 0.2s ease;
}

.pc-iv-opt-select[aria-expanded="true"] .pc-iv-opt-caret {
  transform: rotate(180deg);
  color: var(--primary-color, #3d0b17);
}

/* Menu portaled to body + position:fixed via JS — never clipped by the card */
.pc-iv-opt-menu {
  list-style: none;
  margin: 0;
  padding: 4px;
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  min-width: 140px;
  max-width: min(90vw, 280px);
  box-sizing: border-box;
  z-index: 10050;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.22);
  max-height: min(50vh, 320px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pc.pc--style-unified .pc-iv-opt-select {
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.pc.pc--style-unified .pc-iv-opt-select-name {
  font-size: 12px;
}

.pc.pc--style-unified .pc-iv-opt-select-val {
  font-size: 13px;
}

.pc-iv-opt-menu[hidden] {
  display: none;
}

.pc-iv-opt-menu li {
  list-style: none;
  margin: 0;
}

.pc-iv-opt-item {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 7px 9px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: var(--pc-fs-iv-item, 13px);
  font-weight: 500;
  color: #222;
  text-align: start;
}

.pc-iv-opt-item:hover,
.pc-iv-opt-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.pc-iv-opt-item.is-selected {
  background: var(--primary-color, #3d0b17);
  color: #fff;
  font-weight: 700;
}

.pc-iv-opt-item.is-disabled {
  opacity: 0.4;
  text-decoration: line-through;
}

.pc-iv-opt-item.is-selected.is-disabled {
  opacity: 1;
  text-decoration: line-through;
}

.pc-iv-opt-item-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-iv-opt-item-check {
  flex: 0 0 auto;
  display: inline-flex;
  opacity: 0;
}

.pc-iv-opt-item.is-selected .pc-iv-opt-item-check {
  opacity: 1;
}

/* Grouped layout: option name + chip row in a rounded frame (theme setting: inline_variant_layout = stacked) */
.pc-iv-root--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}

.pc-iv-root--stacked .pc-iv-opt-row--stacked {
  flex: 1 1 auto;
  min-width: 100%;
  max-width: 100%;
}

.pc-iv-opt-group {
  border: 1.5px solid rgba(0, 0, 0, 0.11);
  border-radius: 12px;
  padding: 9px 10px 11px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.pc-iv-opt-group__label {
  font-weight: 700;
  font-size: var(--pc-fs-iv-label, 12px);
  color: #333;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  line-height: 1.3;
}

.pc-iv-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pc-iv-opt-chip {
  appearance: none;
  margin: 0;
  padding: 6px 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #fafafa;
  color: #222;
  font-size: var(--pc-fs-iv-item, 13px);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.pc-iv-opt-chip:hover,
.pc-iv-opt-chip:focus-visible {
  border-color: var(--primary-color, #3d0b17);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(61, 11, 23, 0.08);
}

.pc-iv-opt-chip.is-selected {
  border-color: var(--primary-color, #3d0b17);
  background: var(--primary-color, #3d0b17);
  color: #fff;
  box-shadow: 0 2px 8px rgba(61, 11, 23, 0.25);
}

.pc-iv-opt-chip.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  text-decoration: line-through;
  box-shadow: none;
}

/* Lazy listing cards: `.pc-iv-lazy` has no visible skeleton until JS adds `.is-loading` after a delay if the PDP fetch is still in flight. */
.pc-iv-root.is-loading {
  min-height: 44px;
  flex: 1 1 100%;
  width: 100%;
  align-self: stretch;
}

.pc-iv-root.is-loading .pc-iv-skeleton {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.pc-iv-skeleton-row {
  flex: 1 1 auto;
  min-width: min(100%, 9.5rem);
  max-width: 100%;
}

.pc-iv-skeleton {
  display: none;
}

.pc-iv-skeleton-select {
  display: block;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.11) 50%,
    rgba(0, 0, 0, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: pc-iv-skel 1.3s ease-in-out infinite;
}

@keyframes pc-iv-skel {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.pc-iv-root.is-fetch-failed {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pc-iv-skeleton-select {
    animation: none;
  }
}

/* ── Phone + tablet (Bootstrap lg–down, <992px): same CTA flex-wrap as desktop; no hover-only polish (zoom, shine, sticky :hover) ── */
@media (max-width: 991.98px) {
  .pc-media-overlay-layer > .pc-image-badge-stack,
  .pc-media-inner > .pc-image-badge-stack,
  .pc-scroll-carousel__stage > .pc-image-badge-stack {
    top: 12px;
    right: 14px;
    left: auto;
    gap: 3px;
    max-width: calc(100% - 28px);
  }

  .pc-image-badge-stack .pc-extra-ship-badge,
  .pc-image-badge-stack .pc-extra-feat-ribbon,
  .pc-image-badge-stack .pc-extra-oos-badge {
    padding: 0.12rem 0.32rem;
    font-size: 9px;
    gap: 0.12rem;
  }

  .pc-image-badge-stack .pc-extra-ship-badge svg,
  .pc-image-badge-stack .pc-extra-feat-ribbon svg {
    width: 11px;
    height: 11px;
  }

  .product-item.pc .pc-img-primary,
  .product-item.pc .pc-img-secondary,
  .pc-img-primary,
  .pc-img-secondary,
  .product-item.pc .pc-scroll-carousel__slide img,
  .pc-scroll-carousel__slide img {
    transition: opacity 0.35s ease;
  }

  .pc-zoom-hover:hover .pc-img-primary,
  .pc-zoom-hover:focus-within .pc-img-primary,
  .pc-scroll-carousel--zoom:hover .pc-carousel-slide-img,
  .pc-scroll-carousel--zoom:focus-within .pc-carousel-slide-img {
    transform: none !important;
  }

  .pc--second-hover:hover .pc-img-secondary,
  .pc--second-hover:focus-within .pc-img-secondary,
  .pc--second-hover .pc-img-secondary {
    opacity: 0 !important;
  }

  .pc.pc--shine-hover .pc-scroll-carousel__stage::before,
  .pc.pc--shine-hover .pc-media-inner::before {
    content: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  .pc.pc--shine-hover .pc-overlay .btn-primary::after,
  .pc.pc--shine-hover .pc-overlay .btn-product-card-select-variant::after,
  .pc.pc--shine-hover .pc-featured-cta .btn-primary::after,
  .pc.pc--shine-hover .pc-featured-cta .btn-product-card-select-variant::after,
  .pc.pc--shine-hover .pc-mobile-cta .btn-primary::after,
  .pc.pc--shine-hover .pc-mobile-cta .btn-product-card-select-variant::after,
  .pc.pc--shine-hover .pc-card-bar__cta::after {
    content: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  .pc:hover .pc-extra-feat-ribbon:not(.pc-image-badge-stack__item),
  .pc:hover .pc-image-badge-stack .pc-extra-feat-ribbon {
    transform: none !important;
  }

  .pc-scroll-carousel__nav:hover:not(:disabled),
  .pc-scroll-carousel__nav:focus-visible:not(:disabled) {
    background: var(--pc-nav-bg);
    color: var(--pc-nav-fg);
    border-color: var(--pc-nav-ring);
    box-shadow: var(--pc-nav-shadow);
    transform: translateY(-50%);
  }

  .pc-scroll-carousel .pc-scroll-carousel__dots {
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .pc-scroll-carousel .pc-scroll-carousel__dot {
    pointer-events: auto !important;
  }

  .pc-inline-cta:hover {
    opacity: 1;
    transform: none;
  }

  .pc-action-btn:hover,
  .pc-action-btn:focus-visible {
    color: #374151 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
  }

  .pc-actions-overlay--corner
    .pc-action-btn--wishlist:hover
    .pc-heart-icon.icon-heart-mask:not(.filled),
  .pc-actions-overlay--corner
    .pc-action-btn--wishlist:focus-visible
    .pc-heart-icon.icon-heart-mask:not(.filled) {
    background-color: #6b7280;
  }

  .product-item .pc-card-qty-btn:hover,
  .pc .pc-card-qty-btn:hover,
  .product-item .pc-card-qty-val:hover,
  .pc .pc-card-qty-val:hover {
    background: transparent;
  }

  .pc-oos-notify-btn:hover {
    opacity: 1;
  }

  .pc-iv-opt-select:hover {
    border-color: rgba(0, 0, 0, 0.12);
  }

  .pc-iv-opt-item:hover {
    background: transparent;
  }

  .pc-iv-opt-chip:hover {
    border-color: rgba(0, 0, 0, 0.14);
    background: #fafafa;
    box-shadow: none;
  }
}

/* ── Glance only: category = plain text top-left; eye+heart = bare icons bottom-left ── */
.pc-glance-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 12;
  display: inline-block;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pc-glance-cat-color, var(--pc-category, #678f8a));
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.pc-glance-cat:hover,
.pc-glance-cat:focus-visible {
  color: var(--pc-glance-cat-color, var(--primary-color, #678f8a));
  text-decoration: none;
  outline: none;
}

/* Bottom-left of the product image — eye + heart, no circles/shadows */
.pc-glance-tools {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: auto;
  top: auto;
  z-index: 12;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.pc-glance-ico,
.pc-glance-trigger.pc-glance-ico {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  line-height: 0;
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* Eye only — separate color from heart */
.pc-glance-trigger.pc-glance-ico:not(.pc-glance-ico--wish) {
  color: var(--pc-glance-eye-color, #1a1a1a);
}

/* Heart only — separate color from eye */
.pc-glance-ico.pc-glance-ico--wish {
  color: var(--pc-glance-heart-color, #1a1a1a);
}

.pc-glance-trigger.pc-glance-ico:not(.pc-glance-ico--wish):hover,
.pc-glance-trigger.pc-glance-ico:not(.pc-glance-ico--wish):focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pc-glance-eye-color, var(--primary-color, #678f8a));
  outline: none;
  opacity: 0.85;
  text-decoration: none;
}

.pc-glance-ico.pc-glance-ico--wish:hover,
.pc-glance-ico.pc-glance-ico--wish:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pc-glance-heart-color, var(--primary-color, #678f8a));
  outline: none;
  opacity: 0.85;
  text-decoration: none;
}

.pc-glance-ico:active {
  opacity: 0.7;
}

.pc-glance-ico__svg {
  display: block;
  width: 20px;
  height: 20px;
}

.pc-glance-wish {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pc-glance-ico--wish .pc-glance-heart-ico {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.pc-glance-wish.is-in-wishlist .pc-glance-heart-ico,
.pc-glance-wish.is-on .pc-glance-heart-ico,
.pc-glance-ico--wish .pc-glance-heart-ico.filled {
  fill: currentColor;
  stroke: currentColor;
  color: var(--pc-glance-heart-color, var(--primary-color, #678f8a));
}

.pc-glance-wish.is-wishlist-loading .pc-glance-ico--wish {
  opacity: 0.35;
  pointer-events: none;
}

@media (min-width: 768px) {
  .pc-glance-cat {
    top: 14px;
    left: 14px;
    font-size: 13px;
  }

  .pc-glance-tools {
    bottom: 14px;
    left: 14px;
    gap: 12px;
  }

  .pc-glance-ico,
  .pc-glance-trigger.pc-glance-ico {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
  }

  .pc-glance-ico__svg,
  .pc-glance-ico--wish .pc-glance-heart-ico {
    width: 22px;
    height: 22px;
  }
}

/* ── Quick View — compact premium modal (not full-screen) ── */
.pc-qv {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.pc-qv[hidden] {
  display: none !important;
}
.pc-qv__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 0.55);
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  animation: pc-qv-fade-in 0.18s ease;
}
.pc-qv__dialog {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  max-height: min(78dvh, 640px);
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--pc-qv-panel-bg, #fff);
  color: #111;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  outline: none;
  animation: pc-qv-dialog-in 0.22s ease;
}
.pc-qv__close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(17, 17, 17, 0.4);
  cursor: pointer;
  touch-action: manipulation;
}
.pc-qv__close:hover,
.pc-qv__close:focus-visible {
  color: #111;
  outline: 2px solid var(--primary-color, #678f8a);
  outline-offset: 2px;
}
.pc-qv__grid {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}
.pc-qv__media {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 34dvh;
  background: var(--pc-qv-image-bg, #f5f5f5);
  overflow: hidden;
}
.pc-qv__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pc-qv__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 16px;
  text-align: center;
  background: var(--pc-qv-panel-bg, transparent);
  -webkit-overflow-scrolling: touch;
}
.pc-qv__name {
  margin: 0;
  max-width: 28ch;
  font-family: var(--ath-body-font-family, inherit);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pc-qv-title, #111);
}
.pc-qv__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.pc-qv__rating[hidden],
.pc-qv__desc[hidden],
.pc-qv__cta[hidden],
.pc-qv__qty[hidden],
.pc-qv__wish[hidden],
.pc-qv__wish-wrap[hidden] {
  display: none !important;
}
.pc-qv__stars {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
  color: #e8c547;
  font-size: 15px;
}
.pc-qv__star {
  opacity: 0.28;
}
.pc-qv__star.is-on {
  opacity: 1;
}
.pc-qv__rating-txt {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  color: rgba(17, 17, 17, 0.45);
}
.pc-qv__desc {
  margin: 0;
  max-width: 34ch;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pc-qv-desc, rgba(17, 17, 17, 0.48));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-qv__price {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--pc-qv-price, var(--pc-price, var(--primary-color, #678f8a)));
}
.pc-qv__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.pc-qv__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--pc-qv-cta-bg, var(--pc-cta-bg, var(--primary-color, #678f8a)));
  color: var(--pc-qv-cta-text, var(--pc-cta-text, #fff));
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.2s ease;
}
.pc-qv__cta:hover,
.pc-qv__cta:focus-visible {
  opacity: 0.92;
  color: var(--pc-qv-cta-text, var(--pc-cta-text, #fff));
  text-decoration: none;
  outline: 2px solid var(--pc-qv-cta-bg, var(--pc-cta-bg, var(--primary-color, #678f8a)));
  outline-offset: 2px;
}
.pc-qv__cta--muted {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}
.pc-qv__cta--muted:hover,
.pc-qv__cta--muted:focus-visible {
  color: #111;
}
.pc-qv__cta[aria-busy="true"],
.pc-qv__cta:disabled {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}
.pc-qv__cta .add-to-cart-progress {
  width: 16px;
  height: 16px;
}
.pc-qv__cta-ico {
  flex-shrink: 0;
}
.pc-qv__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.pc-qv__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pc-qv-qty, rgba(17, 17, 17, 0.5));
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.pc-qv__qty-btn:hover,
.pc-qv__qty-btn:focus-visible {
  color: var(--pc-qv-qty, #111);
  outline: 2px solid var(--primary-color, #678f8a);
  outline-offset: 1px;
}
.pc-qv__qty-input {
  width: 28px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pc-qv-qty, #111);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pc-qv__qty-input::-webkit-outer-spin-button,
.pc-qv__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Kill global .add-to-wishlist absolute / left:0 so heart stays in the action row */
.pc-qv .pc-qv__wish-wrap.add-to-wishlist,
.pc-qv .add-to-wishlist {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pc-qv__wish-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
/* Real heart outline (SVG) — filled when wishlisted */
.pc-qv .pc-qv__wish {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  min-height: 36px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pc-qv-wish, rgba(17, 17, 17, 0.55));
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none !important;
  line-height: 0;
}
.pc-qv .pc-qv__wish:hover,
.pc-qv .pc-qv__wish:focus-visible {
  color: var(--pc-qv-wish, var(--primary-color, #678f8a));
  outline: none;
  box-shadow: none;
}
.pc-qv .pc-qv__wish.is-on,
.pc-qv .pc-qv__wish-wrap.is-in-wishlist .pc-qv__wish,
.pc-qv .pc-qv__wish-wrap.is-on .pc-qv__wish {
  color: var(--pc-qv-wish, var(--primary-color, #678f8a));
}
.pc-qv__wish-ico {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}
.pc-qv .pc-qv__wish.is-on .pc-qv__wish-ico,
.pc-qv .pc-qv__wish-wrap.is-in-wishlist .pc-qv__wish-ico,
.pc-qv .pc-qv__wish-wrap.is-on .pc-qv__wish-ico {
  fill: currentColor;
  stroke: currentColor;
}

@keyframes pc-qv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pc-qv-dialog-in {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (min-width: 768px) {
  .pc-qv {
    padding: 32px;
  }
  .pc-qv__dialog {
    width: min(720px, 92vw);
    max-height: min(70vh, 480px);
    border-radius: 16px;
  }
  .pc-qv__grid {
    flex-direction: row;
    align-items: stretch;
    height: min(70vh, 440px);
  }
  .pc-qv__media {
    width: 44%;
    max-height: none;
    aspect-ratio: auto;
    height: 100%;
    flex-shrink: 0;
  }
  .pc-qv__info {
    flex: 1 1 auto;
    justify-content: center;
    gap: 12px;
    padding: 28px 28px 24px;
    overflow-y: auto;
  }
  .pc-qv__name {
    font-size: 20px;
  }
  .pc-qv__price {
    font-size: 22px;
  }
  .pc-qv__row {
    gap: 12px;
    margin-top: 6px;
  }
  .pc-qv__cta {
    flex: 0 1 auto;
    min-width: 150px;
    min-height: 46px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-qv__backdrop,
  .pc-qv__dialog,
  .pc-glance-trigger {
    animation: none !important;
    transition: none !important;
  }
}

/* Lock page scroll — overflow only (no body position:fixed; that left a white gap under the dim) */
html.pc-qv-open,
html.pc-qv-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}