/* =========================================
   PRODUCT PAGE LAYOUT
========================================= */

.product-page-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 10vh;
  padding: 0 20px;
  background: var(--bg-color);
}

/* =========================================
   IMAGE GALLERY (LEFT SIDE)
========================================= */
.product-gallery {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  padding: var(--topbar-h) 20px 20px 0;
  /* overflow-x: hidden removed — it was clipping the 4th thumbnail's touch target */
  min-width: 0;
}

.main-image {
  position: relative;
  /* Fix for absolute positioned nav arrows */
  width: 100%;
  max-width: 540px;
  max-height: 720px;
  margin-left: 0;
  /* Align left within the column */
  margin-right: auto;
  margin-bottom: 16px;
  background-color: var(--surface-alt);
  overflow: hidden;
  cursor: zoom-in;
  /* Fixed aspect ratio — prevents height jump when switching images */
  aspect-ratio: 3 / 4;
  /* background-image/size/position set by JS hover zoom */
  background-repeat: no-repeat;
  background-size: 200%;
  /* Reduced from 220% — less aggressive zoom, less blur */
  transition: background-image 0s;
}

/* ── Gallery Stack: all images pre-loaded in DOM, opacity toggle = instant switch ── */
#gallery-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-img {
  /* absolute stack: every image occupies the same box */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0;
  /* transition added only after first image loads (.ready class via JS) */
}

.gallery-img.active {
  opacity: 1;
  z-index: 1;
  /* active image sits on top of the stack */
  position: relative;
  /* makes container inherit height from active image */
}

/* JS adds .ready to #gallery-stack once first image loads → enables crossfade */
#gallery-stack.ready .gallery-img {
  transition: opacity 0.15s ease;
}

.thumbnail-list {
  display: flex;
  justify-content: flex-start;
  /* Align thumbnails to the left with main image */
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 4px 2px;
  /* minimal breathing room — no longer needs outline-offset hacks */
  width: 100%;
  /* constrain to parent — overflow-x:auto only works when width is bounded */
  max-width: 540px;
  /* Matches main-image width */
  margin-left: 0;
  margin-right: auto;
  min-width: 0;
  /* allow shrinking as flex child */
  box-sizing: border-box;
  /* Firefox */
}

.thumbnail-list::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.thumbnail {
  width: 88px;
  height: 116px;
  object-fit: cover;
  object-position: center top;
  /* show face/upper body, not waist */
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  border-radius: 6px;
  /* border always occupies box space — never overflows parent, never gets clipped */
  border: 2px solid transparent;
  box-sizing: border-box;
  /* border included in 88×116 — no layout shift */
  flex-shrink: 0;
  display: block;
}

.thumbnail:hover {
  opacity: 0.85;
}

.thumbnail.active {
  opacity: 1;
  border-color: var(--color-ink);
  /* crisp, premium black border — all 4 sides, always visible */
}

/* =========================================
   GALLERY COUNTER (X / N pill)
   Absolute overlay on bottom-right of main image
========================================= */
.gallery-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  display: none;
}

.gallery-counter.visible {
  display: block;
}

/* =========================================
   THUMBNAIL STRIP — Right-Edge Fade Indicator
   Signals more images exist off-screen (mobile)
========================================= */
.thumbnail-wrapper {
  position: relative;
}

.thumb-fade-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg-color));
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.thumbnail-wrapper.has-overflow .thumb-fade-right {
  opacity: 1;
}

/* Desktop: vertical strip has its own scrollbar — no fade needed */
@media (min-width: 993px) {
  .thumb-fade-right {
    display: none;
  }
}


/* =========================================
   DESKTOP GALLERY — Vertical Left Thumbnails
   ≥ 768px: thumbnails move to the left of
   the main image in a vertical scrollable strip.
   < 768px: keeps current horizontal-below layout.
========================================= */
@media (min-width: 993px) {

  /* Gallery becomes a row: [thumbs | main-image] */
  .product-gallery {
    flex-direction: row;
    align-items: flex-start;
    /* tops aligned */
    gap: 10px;
  }

  /* Thumbnail strip — vertical, left side */
  .thumbnail-list {
    order: -1;
    /* move before main-image without changing HTML */
    flex-direction: column;
    /* stack vertically */
    overflow-x: hidden;
    overflow-y: auto;
    /* scroll if more images than visible height */
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    max-height: 720px;
    /* matches .main-image max-height */
    padding: 0;
    scrollbar-gutter: stable;
    /* reserves scrollbar space — thumb never clips */
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
    justify-content: flex-start;
    /* Reset mobile overrides */
    overflow-x: hidden;
  }

  .thumbnail-list::-webkit-scrollbar {
    display: block;
    width: 3px;
  }

  .thumbnail-list::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 2px;
  }

  .thumbnail-list::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Thumbnail size — exactly 3:4 within the 80px strip */
  .thumbnail {
    width: 80px;
    height: 107px;
    /* 80 × 4/3 = 106.6 → 107px */
  }

  /* Main image fills remaining width */
  .main-image {
    flex: 1;
    margin-bottom: 0;
    /* no gap below — thumbnails are now beside, not below */
  }
}

/* =========================================
   MAIN IMAGE NAVIGATION ARROWS (Desktop)
   Injected by initZoom() in product.js
========================================= */
.main-img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--glass-light);
  border: none;
  width: 36px;
  height: 72px;
  cursor: pointer;
  font-size: 2rem;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 10;
  border-radius: 0 4px 4px 0;
  line-height: 1;
  user-select: none;
  /* Don't trigger hover zoom */
  pointer-events: auto;
}

.main-img-nav.main-img-next {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.main-img-nav.main-img-prev {
  left: 0;
}

/* Show on hover over main image (desktop only) */
.main-image:hover .main-img-nav {
  opacity: 1;
}

/* Mobile: never show arrows (swipe handles navigation) */
@media (max-width: 768px) {
  .main-img-nav {
    display: none !important;
  }
}


/* =========================================
   SIZE GUIDE PANEL
========================================= */
.size-guide-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 90vw;
  max-width: 400px;
  height: 100vh;
  background: var(--bg-color, var(--bg-color));
  z-index: 2000;
  transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-drawer);
  overflow: hidden;
}

.size-guide-panel.active {
  right: 0;
}

.size-guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-scrim);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.size-guide-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.size-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid var(--border-light, var(--border-light));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.close-panel-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-strong);
}

.size-guide-content {
  flex: 1;
  overflow-y: auto;
  padding: 25px;
}

.size-chart-image {
  width: 100%;
  height: auto;
  display: block;
}

.size-chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.size-chart-table th,
.size-chart-table td {
  border: 1px solid var(--border-light);
  padding: 10px;
  text-align: center;
}

.size-chart-table th {
  background: var(--surface-subtle);
  font-weight: 600;
}

.size-chart-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* A phone: five columns (Size, Chest, Length, Shoulder, Sleeve) fit without scrolling
   sideways — tighter cells, and the panel's own padding halved. */
@media (max-width: 480px) {
  .size-guide-content {
    padding: 16px;
  }

  .size-chart-table {
    font-size: 0.8rem;
  }

  .size-chart-table th,
  .size-chart-table td {
    padding: 8px 4px;
  }

  .size-chart-table th {
    font-size: 0.72rem;
    line-height: 1.25;
  }
}


/* =========================================
   PRODUCT INFO (RIGHT SIDE STICKY)
========================================= */
.product-info-wrapper {
  padding: var(--topbar-h) 0 40px 20px;
  background: var(--bg-color);
  overflow-x: clip;
  /* clip: prevents overflow without creating a new scroll context (iOS scroll fix) */
  max-width: 100%;
  /* Grid items carry an implicit `min-width: auto`, so this track could never
     shrink below the widest unbreakable thing inside it. On mobile that let the
     1fr column blow out to 1322px inside a 375px grid — measured — and the
     `overflow-x: clip` above then sliced the accordion text off mid-sentence.
     `max-width: 100%` cannot help: the track itself was already too wide.
     Note `overflow-wrap: break-word` does NOT fix this — it only breaks at paint
     time and leaves the min-content contribution untouched. This does. */
  min-width: 0;
}

.product-info {
  position: sticky;
  /* 50px header + 22px air, plus the offer strip when it is showing */
  top: calc(var(--topbar-h) + 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
  margin: 0 auto;
}

.product-page-title {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  /* Posh Palace: the name in a light weight, large */
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  color: var(--color-ink);
  word-break: break-word;
}

.product-title-tags-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}

.product-price-badge-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.product-page-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-ink);
  margin: 0;
}

/* Was / now / saving — pagePriceHTML in functions/product/[slug].js and js/product.js */
.pp-was {
  font-size: 1.1rem;
  color: var(--price-strike);
  text-decoration: line-through;
}

.pp-now {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.pp-now.pp-sale {
  color: var(--color-sale);
}

.pp-off {
  display: inline-block;
  background: var(--color-sale);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 11px 4px;
  border-radius: var(--radius-pill);
}

.product-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

/* Promotion Badge */
.promo-badge-label {
  display: inline-block;
  background: var(--color-ink);
  color: var(--bg-color);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  text-transform: uppercase;
  margin: 0;
}

.promo-badge-text {
  display: inline-block;
  background: var(--surface-alt);
  color: var(--text-strong);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 3px 8px;
  margin: 0;
}

.product-gender-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-top: 2px;
  margin-bottom: 8px;
}

/* Tags - chip style near title. Not shown in the Posh look (the old site's tags are
   category slugs, and the category already sits above the title); they still feed search. */
.product-tags {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.tag-chip {
  display: inline-block;
  background: var(--bg-color);
  color: var(--color-ink);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 3px 8px;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.product-description {
  font-size: 0.9rem;
  color: var(--gray-700);
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 12px;
}

/* Typography safety — prevent mid-word breaks */
#product-description-content,
#dynamic-shipping-accordion {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Specific element containment — no !important */
#product-description-content img,
#dynamic-shipping-accordion img {
  max-width: 100%;
  height: auto;
  display: block;
}

#product-description-content table,
#dynamic-shipping-accordion table {
  width: 100%;
  table-layout: fixed;
}

#product-description-content pre,
#dynamic-shipping-accordion pre {
  white-space: pre-wrap;
  word-break: break-all;
}

/* Rich text content from Quill editor */
#product-description-content h2,
#dynamic-shipping-accordion h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 14px 0 6px;
}

#product-description-content h3,
#dynamic-shipping-accordion h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin: 12px 0 4px;
}

#product-description-content p,
#dynamic-shipping-accordion p {
  margin-bottom: 8px;
  color: var(--gray-700);
  line-height: 1.65;
}

#product-description-content ul,
#dynamic-shipping-accordion ul,
#product-description-content ol,
#dynamic-shipping-accordion ol {
  padding-left: 1.4rem;
  margin: 6px 0 10px;
}

#product-description-content li,
#dynamic-shipping-accordion li {
  margin-bottom: 4px;
  color: var(--gray-700);
  font-size: 0.88rem;
}

#product-description-content strong,
#dynamic-shipping-accordion strong {
  font-weight: 700;
}

#product-description-content em,
#dynamic-shipping-accordion em {
  font-style: italic;
}

#product-description-content a,
#dynamic-shipping-accordion a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#product-description-content a:hover,
#dynamic-shipping-accordion a:hover {
  color: var(--gray-700);
}

/* =========================================
   COLOR SELECTOR
========================================= */
.product-color-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-selector-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 10px;
}

.color-selector-label .selected-color-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.color-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s, transform 0.15s;
  padding: 0;
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-swatch.active {
  outline-color: var(--text-color);
}

/* Size: out of stock */
.size-box.size-oos {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* =========================================
   SIZE SELECTOR
========================================= */
/* Posh Palace: the size picker sits in its own pale panel */
.product-size-section {
  background: #f7f7f4;
  border: 1px solid rgba(5, 5, 5, 0.1);
  padding: 14px 14px 16px;
}

.size-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.size-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink);
}

/* Inline Size Guide — bordered button beside "Select your size" */
.size-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
  background: var(--bg-color);
  border: 1px solid rgba(5, 5, 5, 0.22);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: none;
  padding: 4px 10px;
  transition: color 0.2s, border-color 0.2s, transform 0.1s ease;
  animation: guide-pulse 2.2s ease-out infinite;
}

.size-guide-link:hover {
  color: var(--text-color);
  border-color: var(--text-color);
  animation: none;
  /* pause pulse on hover */
}

/* Press-down feel + pause pulse */
.size-guide-link:active {
  transform: scale(0.96);
  animation: none;
}

/* CSS Ripple on click */
.size-guide-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.10) 0%, transparent 65%);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

.size-guide-link:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

/* Breathing glow ring — signals this is clickable */
@keyframes guide-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.18);
  }

  60% {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* gap before size grid */

.size-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

/* ── Size selection feedback ── */
@keyframes size-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(3px);
  }
}

.product-size-section.size-shake .size-grid {
  animation: size-shake 0.5s ease;
}

.size-hint-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #92400e;
  letter-spacing: 0.3px;
  background: rgba(217, 119, 6, 0.07);
  border-left: 2.5px solid #d97706;
  border-radius: 0 3px 3px 0;
  padding: 6px 10px;
  margin-top: 0;
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.size-hint-msg.show {
  max-height: 3em;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
  margin-bottom: 4px;
}

.size-box {
  border: 1px solid rgba(5, 5, 5, 0.22);
  background: var(--bg-color);
  padding: 10px 0;
  text-align: center;
  line-height: 1.4;
  /* vertical centering via line-height — avoids flex+hidden-input click bug */
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink);
  transition: all 0.2s ease;
  user-select: none;
  touch-action: manipulation;
  /* eliminates 300ms tap-delay on mobile */
}

.size-box input {
  display: none;
}

.size-box:hover {
  border-color: var(--gray-500);
}

.size-box:has(input:checked) {
  border-color: var(--text-color);
  background-color: var(--text-color);
  color: var(--bg-color);
}

/* =========================================
   QUANTITY SELECTOR
========================================= */
.quantity-selector {
  display: flex;
  align-items: center;
  border: 1px solid rgba(5, 5, 5, 0.16);
  background-color: #f7f7f4;
  height: 52px;
  width: 90px;
  flex-shrink: 0;
}

.qty-btn {
  background: none;
  border: none;
  width: 30px;
  height: 100%;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease;
}

.qty-btn:hover {
  background: var(--border-color);
}

.qty-input {
  width: 30px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  background: transparent;
}

.qty-input:focus {
  outline: none;
}

/* =========================================
   PRODUCT ACTIONS (BUTTONS)
========================================= */
.product-actions {
  display: grid;
  /* Row 1: qty | Add to Cart.  Row 2: Buy Now across both columns. */
  grid-template-columns: 90px 1fr;
  grid-template-rows: 52px 52px;
  gap: 10px;
}

.btn-buy-now {
  grid-column: 1 / -1;
}

.btn-add-to-cart,
.btn-buy-now {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-transform: none;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Locked state — until the customer selects the required size/color */
.btn-add-to-cart.btn-locked,
.btn-buy-now.btn-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Posh Palace: Add to cart solid black, Buy now the sale red in capitals */
.btn-add-to-cart {
  background-color: var(--color-ink);
  color: #fff;
  border: 1px solid var(--color-ink);
}

.btn-add-to-cart:hover {
  background-color: #2b2b2b;
}

.btn-buy-now {
  background-color: var(--color-sale);
  color: #fff;
  border: 1px solid var(--color-sale);
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.btn-buy-now:hover {
  opacity: 0.92;
  background-color: #b80f12;
}

/* =========================================
   ACCORDIONS (PRODUCT DETAILS)
========================================= */
.product-accordion {
  border-top: 1px solid var(--border-light);
  margin-top: 12px;
}

.product-accordion details {
  border-bottom: 1px solid var(--border-light);
  width: 100%;
  /* bound <details> — prevents Quill content from expanding it */
  overflow: hidden;
  /* clip anything that still overflows */
}

.product-accordion summary {
  padding: 18px 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  /* Removes default arrow in most browsers */
}

.product-accordion summary::-webkit-details-marker {
  display: none;
  /* Removes default arrow in Safari/Chrome */
}

.product-accordion summary::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-color);
}

.product-accordion details[open] summary::after {
  content: '−';
}

.accordion-content {
  width: 100%;
  /* bound width to parent — makes max-width:100% work on children */
  padding-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  word-break: normal;
  /* don't break words at arbitrary character positions */
  overflow-wrap: break-word;
  /* only break genuinely long tokens (URLs etc.) */
  overflow-x: hidden;
}

.accordion-content * {
  max-width: 100% !important;
  box-sizing: border-box;
  white-space: normal !important;
}

.accordion-content img,
.accordion-content iframe,
.accordion-content video {
  max-width: 100% !important;
  height: auto !important;
}

.accordion-content table {
  width: 100% !important;
  table-layout: fixed;
  overflow-wrap: break-word;
}

.accordion-content ul,
.accordion-content ol {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.accordion-content ul {
  list-style-type: disc !important;
}

.accordion-content ol {
  list-style-type: decimal !important;
}

.accordion-content li {
  margin-bottom: 6px;
}

/* =========================================
   RESPONSIVE DESIGN (MOBILE)
========================================= */
@media (max-width: 992px) {
  .product-page-container {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: var(--topbar-h) 0 0 0;
    /* Clear left/right padding on mobile, account for topbar */
    margin: 0;
  }

  .product-info-wrapper {
    padding: 2px 20px 20px 20px;
    /* Bottom padding for sticky cart btn if needed */
  }

  .product-info {
    position: static;
    max-width: 100%;
  }

  .product-page-title {
    font-size: 1.5rem;
  }

  /* Adjust gallery for mobile */
  .product-gallery {
    padding: 0;
    /* Edge to edge on mobile */
  }

  .main-image {
    width: 100%;
    max-height: none;
    max-width: 100%;
    margin: 0 0 8px 0;
    aspect-ratio: 3 / 4;
    border-radius: 0;
  }



  .thumbnail-list {
    padding: 4px 16px 16px 16px;
    justify-content: flex-start;
    /* reset desktop flex-end alignment */
    margin: 0;
    max-width: 100%;
  }


  /* Fix for cramped product actions on mobile */
  .product-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  .quantity-selector {
    width: 100%;
    justify-content: center;
    background-color: var(--surface-subtle);
  }

  .btn-add-to-cart,
  .btn-buy-now {
    flex: 1;
    min-width: 45%;
    padding: 0 10px;
  }

  /* Mobile size button: enforce minimum touch target height (Apple/Google: 44px) */
  .size-box {
    min-height: 44px;
    padding: 12px 0;
  }
}

/* =========================================
   YOU MAY ALSO LIKE (RECOMMENDATIONS)
========================================= */
.recommendations-section {
  width: 100%;
  padding: 30px 0;
  background: var(--bg-color);
  border-top: 1px solid var(--border-light);
}

.recommendations-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 28px;
}

/* ── Section (one per collection / recommended / new arrivals) ── */
.ymal-section {
  margin-bottom: 20px;
}

.ymal-section:last-child {
  margin-bottom: 0;
}

/* Section header — CENTERED, same on desktop + mobile */
.ymal-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 0;
}

/* Title: circle image stacked above text, both centered */
.ymal-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Posh Palace section heading: big, heavy capitals (as on the home page) */
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-align: center;
}

/* Collection circle image — 48px, centered */
.ymal-collection-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color, #eee);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Desktop header link — removed (not used) */
.ymal-show-more {
  display: none;
}

/* View All button wrapper — visible on ALL screen sizes */
.ymal-mobile-btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* View All button (anchor tag styled as button) */
.ymal-more-btn {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  background: none;
  border: 1.5px solid var(--text-color);
  padding: 11px 36px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ymal-more-btn:hover {
  background: var(--text-color);
  color: var(--bg-color);
}

/* ── Product grid ── */
/* Same gutters as .product-grid (components.css), for the same cards */
.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px 24px;
  padding: 0 32px 8px;
  background: var(--bg-color);
}

@media (max-width: 768px) {
  .recommendations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 12px;
    padding: 0 14px 6px;
  }
}

/* ── Scoped product card styles (rec-product-*) kept for backwards compat ── */
.rec-product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--bg-color);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
}

.rec-product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-media);
  background-color: var(--surface-muted);
}

.rec-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.rec-product-image .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

@media (hover: hover) {
  .rec-product-card:hover .img-default {
    opacity: 0;
  }

  .rec-product-card:hover .img-hover {
    opacity: 1;
  }
}

.rec-product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 15px 12px 25px 12px;
}

.rec-product-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 6px;
  line-height: 1.4;
}

.rec-product-price {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 15px;
}

/* Overlay icons */
.rec-add-icon {
  position: absolute;
  bottom: 10px;
  width: 36px;
  height: 36px;
  background: var(--glass-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
  z-index: 5;
  font-size: 0.9rem;
  color: var(--text-color);
}

.rec-add-icon {
  right: 10px;
}

.rec-product-card:hover .rec-add-icon {
  opacity: 1;
  transform: translateY(0);
}

.rec-add-icon:hover {
  background: var(--text-color);
  color: var(--bg-color);
}

/* =========================================
   IMAGE LIGHTBOX
========================================= */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--overlay-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* visibility flips only after the fade-out finishes, so closing still animates */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
  /* Safe area insets for notched phones (iPhone X+) */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overscroll-behavior: contain;
}

/* Belt-and-braces: a closed lightbox must be fully out of hit-testing, so no
   descendant rule can ever resurrect it as a tap target over the page. */
.img-lightbox:not(.active) {
  visibility: hidden;
}

.img-lightbox.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  /* opening: become visible immediately, then fade in */
  transition: opacity 0.22s ease, visibility 0s;
}

.lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 100vw/100dvh = true full-screen including mobile browser chrome area */
  /* dvh = dynamic viewport height, shrinks when mobile URL bar is visible */
  width: 100vw;
  height: 100dvh;
  /* fallback: 100vh for older browsers */
  height: 100vh;
  height: 100dvh;
  touch-action: none;
  /* we handle all touch events manually */
  overflow: hidden;
  position: relative;
}

.lb-img {
  display: block;
  /* Fill as much of the wrap as possible while keeping aspect ratio */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 2px;
  transform-origin: 0 0;
  /* anchor top-left so we control offset precisely */
  cursor: zoom-in;
  will-change: transform;
  /* GPU compositing hint */
  /* Note: do NOT use image-rendering:crisp-edges — that's for pixel art, not photos */
}

/* Applied briefly on double-click toggle for smooth scale animation */
.lb-img.zoom-transition {
  transition: transform 0.22s ease;
}

/* Close button */
.lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: var(--white-a08);
  border: 1px solid var(--white-a15);
  color: var(--bg-color);
  font-size: 1.2rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: opacity 0.2s, background 0.2s;
  z-index: 9001;
  line-height: 1;
}

.lb-close:hover {
  opacity: 1;
  background: var(--white-a18);
}

/* Prev / Next arrows */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white-a08);
  border: 1px solid var(--white-a12);
  color: var(--bg-color);
  font-size: 2rem;
  width: 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, opacity 0.2s;
  z-index: 9001;
  user-select: none;
  line-height: 1;
  opacity: 0.7;
}

.lb-prev {
  left: 16px;
}

.lb-next {
  right: 16px;
}

.lb-nav:hover {
  background: var(--white-a18);
  opacity: 1;
}

.lb-nav.hidden {
  display: none;
}

/* Counter e.g. "2 / 4" */
.lb-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white-a55);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
}

/* Hide nav arrows on mobile (swipe instead) */
@media (max-width: 640px) {
  .lb-nav {
    display: none;
  }
}

/* =========================================
   DELIVERY INFO BLOCK (below ATC button)
   Geo-aware, populated by app.js
========================================= */
.product-delivery-block {
  margin: 2px 0 0;
  border: 1px solid rgba(5, 5, 5, 0.14);
  border-radius: 0;
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-color);
  font-size: 0.83rem;
  color: var(--text-color);
  animation: delivery-fadein 0.35s ease;
}

/* "Shipping & Payment ……… COD AVAILABLE" — the old site's box heading */
.delivery-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px 2px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(5, 5, 5, 0.1);
  background: #f7f7f4;
}

.delivery-block-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-ink);
}

.delivery-block-cod-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@keyframes delivery-fadein {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.delivery-block-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}

/* ── Pulse dot — replaces bi-truck icon ── */
.delivery-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.delivery-dot--active {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: delivery-pulse 1.8s ease-in-out infinite;
}

.delivery-dot--muted {
  background: var(--gray-400, #9ca3af);
  opacity: 0.45;
}

@keyframes delivery-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }

  60% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* ── COD badge — replaces bi-cash-coin icon ── */
.delivery-cod-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  flex-shrink: 0;
  user-select: none;
}

/* Secondary zone row — slightly muted */
.delivery-block-secondary {
  opacity: 0.55;
  font-size: 0.78rem;
}

/* Toggle button */
.delivery-toggle-btn {
  margin-left: auto;
  background: var(--surface-muted, #efefef);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.71rem;
  font-family: inherit;
  color: var(--text-color);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.delivery-toggle-btn:hover {
  background: var(--color-ink, #111);
  color: var(--bg-color, #fff);
  border-color: var(--color-ink, #111);
}


/* COD row separator */
.delivery-cod-row {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  margin-top: 1px;
}

/* =========================================
   STICKY ATC BAR (mobile product page)
========================================= */
.sticky-atc-bar {
  position: fixed;
  left: 0;
  width: 100%;
  background: var(--bg-color);
  border-top: 1px solid var(--border-light);
  z-index: 999;
  /* below bottom-bar (1000) */
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  bottom: 67px;
  /* above mobile-bottom-bar height */
  transform: translateY(110%);
  /* start off-screen */
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  /* GPU compositing — prevents scroll jank on slide-up */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    bottom 0.3s ease,
    visibility 0.3s;
}

.sticky-atc-bar.visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Desktop: never show */
@media (min-width: 769px) {
  .sticky-atc-bar {
    display: none !important;
  }
}

/* Row wrapper */
.sticky-atc-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Row 1: Sizes ── */
.sticky-sizes-row {
  min-height: 34px;
}

.sticky-size-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding-block: 2px;
  /* prevent top/bottom border clipping from overflow-x:auto */
}

.sticky-size-chips::-webkit-scrollbar {
  display: none;
}

.sticky-size-chip {
  flex-shrink: 0;
  border: 1.5px solid var(--border-color);
  border-radius: 2px;
  background: none;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-primary);
  color: var(--text-color);
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.sticky-size-chip.active {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}

.sticky-size-chip.oos {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.sticky-size-guide-link {
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--border-color);
  border-radius: 2px;
  padding: 5px 8px;
  /* matches chip height */
  font-size: 0.68rem;
  /* compact — smaller than chips */
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: none;
  /* natural case — matches main page */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.sticky-size-guide-link:hover {
  color: var(--text-color);
  border-color: var(--text-color);
}

/* ── Row 2: Action buttons ── */
.sticky-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sticky-btn {
  height: 46px;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: all 0.2s ease;
}

/* Same pair as the main buttons: black Add to cart, red Buy now */
.sticky-btn-atc {
  background: var(--color-ink);
  border: 1.5px solid var(--color-ink);
  color: #fff;
}

.sticky-btn-atc:hover {
  background: #2b2b2b;
}

.sticky-btn-buy {
  background: var(--color-sale);
  color: #fff;
  text-transform: uppercase;
}

.sticky-btn-buy:hover {
  background: #b80f12;
}

/* Locked state — visual only, still clickable for flash feedback */
.sticky-btn.btn-locked {
  opacity: 0.55;
}

/* Sticky bar inline hint message */
.sticky-hint-msg {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #92400e;
  background: rgba(217, 119, 6, 0.07);
  border-left: 2.5px solid #d97706;
  border-radius: 0 3px 3px 0;
  padding: 5px 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: -10px;
  /* cancel flex gap: 10px when hidden */
  transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.sticky-hint-msg.show {
  max-height: 2.5em;
  opacity: 1;
  margin-top: 0;
  /* normal position when visible */
}
/* ── Colour strip — the same design in other colours ─────────────────────────
   Separate from .color-swatch below, which is the within-product variant picker.
   These are different PRODUCTS, and the swatch is each one's own photograph rather
   than a flat chip: the buyer sees the actual fabric, and no hex codes get typed. */
.product-colour-strip { margin: 0 0 0.55rem; }

/* Matches .size-selector-header / .size-label exactly, so "Colour" and "Select your
   size" read as one pair rather than two designs stacked on top of each other. */
.cs-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.cs-title {
    font-size: 0.80rem; font-weight: 600; text-transform: none;
    letter-spacing: 0.5px; color: var(--text-strong);
}
.cs-current {
    font-size: 0.80rem; font-weight: 600; letter-spacing: 0.5px;
    color: var(--gray-500);
}

/* Scrolls rather than wraps: ten Drop-Shoulder colours would otherwise push the size
   chips off a phone screen entirely. */
.cs-row {
    display: flex; gap: 14px; overflow-x: auto;
    /* 5px, not 2px. The active swatch's ring sits 4px outside the circle, and
       overflow-x:auto clips anything past the padding box — so the top of the ring was
       being sliced off. */
    padding: 5px 5px 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cs-row::-webkit-scrollbar { display: none; }

.cs-item {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 4px; text-decoration: none; color: inherit; width: 58px;
}
.cs-dot {
    width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
    display: block; background: var(--gray-100, #f1f1f1);
    box-shadow: 0 0 0 1px rgba(0,0,0,.10);
    transition: box-shadow .18s ease, transform .18s ease;
}
.cs-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-blank { display: block; width: 100%; height: 100%; background: var(--gray-200, #e5e5e5); }

.cs-item.active .cs-dot {
    box-shadow: 0 0 0 2px var(--bg-color, #fff), 0 0 0 4px var(--text-color, #111);
}
.cs-item:hover .cs-dot { transform: translateY(-1px); }

.cs-name {
    font-size: 0.7rem; line-height: 1.15; text-align: center; color: var(--gray-500);
    max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-item.active .cs-name { color: var(--text-color, #111); font-weight: 600; }

/* Struck through when the chosen size is gone in that colour. Set by JS the moment a
   size is picked, so the row answers "who has my size" before it is asked. */
.cs-item.cs-nosize .cs-dot { opacity: .38; }
.cs-item.cs-nosize .cs-name { text-decoration: line-through; }

/* The answer under an out-of-stock size chip: which colours still have it. */
.cs-elsewhere {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 10px; font-size: 0.8rem;
}
.cs-elsewhere-label { color: var(--gray-500); }
.cs-go {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 4px; border-radius: 999px;
    border: 1px solid var(--border-light, #e5e5e5); background: var(--bg-color, #fff);
    text-decoration: none; color: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
}
.cs-go img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cs-go:hover { border-color: var(--text-color, #111); }

/* ── The model in the photographs ────────────────────────────────────────────
   One line, under the size chips. The size chart already gives measurements; what it
   cannot say is whether the person wearing the shirt is anything like the person looking
   at it, and that is the part that makes a photo read as "not for me". */
.model-line {
    display: flex; align-items: center; gap: 7px;
    margin-top: 10px; font-size: .76rem; color: var(--gray-500);
}
.model-line i { font-size: .9rem; opacity: .7; }
.model-line strong { color: var(--text-strong); font-weight: 600; }

/* =========================================
   MANUAL COMBO OFFER (js/combo.js)
========================================= */
/* The card is back, but built from the page's own tokens — 1px var(--border-color) and
   the 2px radius the design system uses (.size-guide-link), not a bespoke rounded panel.
   The pickers inside reuse .color-swatch / .size-grid / .size-box / .size-selector-header
   / .size-guide-link, so nothing here restyles them. */
.combo-offer-section { width: 100%; padding: 8px 0 28px; margin: 0; }
.combo-card {
  border: 1px solid var(--border-color);
  border-radius: 2px;
  padding: 18px 16px;
  background: var(--bg-color);
}
.combo-desc { margin: 0 0 12px; font-size: .86rem; color: var(--text-muted, #666); }
.combo-cover-img { width: 100%; max-height: 320px; object-fit: cover; margin-bottom: 14px; }

/* One component per row, full width — so the reused 6-column .size-grid has room. */
.combo-items { display: flex; flex-direction: column; gap: 18px; }
.combo-item { display: flex; gap: 14px; min-width: 0; width: 100%; }
.combo-item-img { flex: 0 0 88px; }
.combo-item-img img { width: 88px; height: 116px; object-fit: cover; display: block; background: var(--surface-muted, #f3f3f3); }
.combo-item-body { min-width: 0; flex: 1; }
.combo-item-title { display: block; font-size: .9rem; font-weight: 600; color: var(--text-strong, #111); text-decoration: none; line-height: 1.25; }
.combo-item-title:hover { text-decoration: underline; }
.combo-item-price { font-size: .82rem; color: var(--text-muted, #777); margin: 2px 0 10px; }
/* Tighter spacing inside a combo row than on the main page. */
.combo-item .size-selector-header { margin-bottom: 8px; padding-bottom: 6px; }
/* The page's 6-column grid leaves ~33px cells in the combo's narrower column, which reads
   as a tall square. Fit as many ~52px cells as the row allows instead, and trim the
   vertical padding, so the chips are wider than they are tall. Cells themselves are still
   the page's .size-box — only the track sizing and padding are adjusted, and only here. */
.combo-item .size-grid { gap: 8px; grid-template-columns: repeat(4, 1fr); }
/* min-height:0 drops the mobile 44px touch-target floor, which was holding these cells
   tall whatever the padding. Scoped here — the product page's own cells keep it. */
.combo-item .size-box { padding: 5px 2px; line-height: 1.2; font-size: .75rem; letter-spacing: 0; min-height: 0; }
.combo-item .color-swatches { margin-bottom: 10px; }

.combo-foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-color, #eee);
  display: flex; flex-direction: column; gap: 14px;
}
.combo-pricing { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.combo-now { font-size: 1.45rem; font-weight: 800; color: var(--text-strong, #111); }
.combo-was { font-size: .98rem; color: #999; text-decoration: line-through; }
.combo-save { font-size: .76rem; font-weight: 700; color: #1a7f45; background: #e8f6ee; padding: 3px 10px; border-radius: 2px; }

/* Primary actions REUSE the main product page buttons (.btn-add-to-cart / .btn-buy-now),
   so font, weight, radius, colours and hover all match it. This only lays them out: both
   in ONE row. The page's own .btn-buy-now spans `grid-column: 1 / -1` for the layout it
   sits in there, which would push it onto a second row here — so it is reset. */
.combo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.combo-btns .btn-add-to-cart,
.combo-btns .btn-buy-now { height: 52px; grid-column: auto; }


/* ── The combo card inside the quick-add sheet ─────────────────────────────── */
/* .qa-section's own padding, so the card lines up with the sheet's other rows
   instead of bleeding to the edges. The 20px bottom replaces the gap .qa-add-btn's
   margin normally leaves — that button is hidden while a combo is shown. */
#qa-combo { padding: 16px 20px 20px; }
#qa-combo .combo-offer-section { padding: 0; }
#qa-combo .combo-card { border: none; padding: 0; }
#qa-combo .combo-item { min-width: 0; }


/* =========================================
   POSH PALACE — PRODUCT PAGE DETAILS
   The pieces of the old site's product page that sit on top of the shared layout.
========================================= */

/* "Size chart" — a small button at the end of the "Select your size" row, so it reads as
   the chart for these sizes. Lifted by the label's rule (8px) so the two sit on one line. */
.size-chart-btn {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: -4px;
  height: 28px;
  padding: 0 11px;
  gap: 6px;
  border: 1px solid rgba(5, 5, 5, 0.25);
  border-radius: 0;   /* square, like Add to Cart and Buy Now */
  background: var(--bg-color);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.size-chart-btn svg {
  font-size: 0.9rem;
}

.size-chart-btn:hover {
  border-color: var(--color-ink);
}

/* "Select your size" with a short rule under it */
.size-label {
  position: relative;
  padding-bottom: 8px;
}

.size-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 1px;
  background: var(--color-ink);
}

.size-box {
  min-width: 44px;
}

.size-grid {
  grid-template-columns: repeat(auto-fill, 44px);
  gap: 10px;
}

/* Quantity: three boxes in a row — minus, the number, plus */
.quantity-selector {
  width: 120px;
}

.product-actions {
  grid-template-columns: 120px 1fr;
}

.qty-btn {
  width: 38px;
}

.qty-input {
  width: 44px;
  border-left: 1px solid rgba(5, 5, 5, 0.16);
  border-right: 1px solid rgba(5, 5, 5, 0.16);
  background: var(--bg-color);
}

/* BUY IT NOW ↗ */
.btn-buy-now::after {
  content: "\2197";
  margin-left: 8px;
  font-size: 1.05em;
}

/* Shipping & Payment: each line its own row, split by rules, and a black COD tag */
.product-delivery-block {
  gap: 0;
  padding-bottom: 0;
}

.product-delivery-block .delivery-block-row {
  padding: 13px 0;
  border-top: 1px solid rgba(5, 5, 5, 0.1);
}

.delivery-block-head + .delivery-block-row {
  border-top: none;
}

.delivery-dot--active {
  background: var(--color-ink);
  animation: none;
  box-shadow: none;
}

.delivery-block-secondary {
  opacity: 1;
  font-size: 0.83rem;
}

.delivery-dot--muted {
  background: var(--color-ink);
  opacity: 1;
}

.delivery-cod-badge {
  background: var(--color-ink);
  border-radius: 0;
  font-size: 0.66rem;
  padding: 6px 9px;
}

.delivery-cod-row {
  border-top: 1px solid rgba(5, 5, 5, 0.1);
  margin-top: 0;
}

/* Description: one outlined box, the old site's tab panel */
.product-accordion {
  border: 1px solid rgba(5, 5, 5, 0.12);
  margin-top: 18px;
  padding: 0 18px;
}

.product-accordion details:last-child {
  border-bottom: none;
}

/* Phone gallery: the photo inset from the edges with rounded corners */
@media (max-width: 992px) {
  .product-gallery {
    padding: 0 15px;
  }

  .main-image {
    border-radius: 16px;
    overflow: hidden;
  }
}

/* Buttons and size boxes at the old site's exact sizes (measured on poshpalacebd.com) */
.product-size-section {
  padding: 12px 12px 14px;
}

.size-label {
  font-size: 0.72rem;
}

.size-grid {
  grid-template-columns: repeat(auto-fill, 44px);
  gap: 7px;
}

.size-box {
  width: 44px;
  min-width: 44px;
  height: 35px;
  padding: 0;
  line-height: 33px;
  border: 1px solid rgba(5, 5, 5, 0.14);
  font-size: 0.7rem;
  font-weight: 760;
  text-transform: uppercase;
}

.product-actions {
  grid-template-columns: 108px 1fr;
  grid-template-rows: 38px 48px;
  gap: 7px 8px;
}

.quantity-selector {
  width: 108px;
  height: 38px;
}

.qty-btn {
  width: 30px;
  font-size: 0.85rem;
}

.qty-input {
  width: 46px;
  font-size: 0.75rem;
  font-weight: 800;
}

.btn-add-to-cart {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  padding: 0 12px;
}

/* Before a size is chosen: the old site's pale grey, not a faded black */
.btn-add-to-cart.btn-locked {
  opacity: 1;
  background-color: #dcdcdc;
  border-color: #dcdcdc;
  color: #6b6b6b;
}

.btn-buy-now {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 3px;
}

@media (max-width: 992px) {
  .product-page-container {
    padding-top: calc(var(--topbar-h) + 12px);
  }
}

/* On a computer the photo and the title sat right against the top bar */
@media (min-width: 993px) {
  .product-gallery,
  .product-info-wrapper {
    padding-top: calc(var(--topbar-h) + 24px);
  }
}

/* The phone rule above gives size boxes a 44px tap height; the old site keeps them 35px */
@media (max-width: 992px) {
  .size-box {
    min-height: 35px;
    padding: 0;
  }
}

/* Type and buttons at the old site's sizes: the name in Albert Sans, Montserrat for
   the rest, and Buy Now 48px on phones, 46px with 14px type on desktop */
.product-page-title,
.product-page-title.product-page-title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.pp-was {
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}

.pp-now {
  font-size: 1.625rem;
  letter-spacing: 0;
}

.product-description,
#product-description-content p,
#dynamic-shipping-accordion p {
  font-size: 0.875rem;
  color: #545454;
}

@media (min-width: 993px) {
  .product-page-title,
  .product-page-title.product-page-title {
    font-size: 1.75rem;
  }

  .pp-now {
    font-size: 1.75rem;
  }

  .product-actions {
    grid-template-columns: 136px 1fr;
    grid-template-rows: 38px 46px;
  }

  .quantity-selector {
    width: 136px;
  }

  .qty-btn {
    width: 38px;
  }

  .qty-input {
    width: 58px;
  }

  .btn-buy-now {
    font-size: 0.875rem;
  }
}