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

.product-page-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  padding: 84px 32px 40px 32px;
  /* top: 52px topbar + 32px gap; bottom: 40px breathing room */
  background: var(--bg-color);
}

/* =========================================
   IMAGE GALLERY (LEFT SIDE)
========================================= */
.product-gallery {
  display: flex;
  flex-direction: row;
  /* main image LEFT, thumbs RIGHT (desktop) */
  gap: 12px;
  background-color: var(--bg-color);
  padding: 0 20px 20px 0;
  /* NO top padding — container handles topbar+gap */
  align-items: flex-start;
  min-width: 0;
}

.main-image {
  position: relative;
  flex: 1;
  /* fills remaining width after thumb strip */
  min-width: 0;
  max-width: 560px;
  background-color: var(--surface-300);
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: zoom-in;
  /* Cloco system: 3:4 portrait PLACEHOLDER only — the active image switches to
     position:relative below, so the box takes the image's NATURAL height and
     the full photo is always visible (never cropped). */
  aspect-ratio: 3 / 4;
  max-height: 720px;
  background-repeat: no-repeat;
  background-size: 200%;
  transition: background-image 0s;
}

/* Gallery Stack — relative flow (Cloco): active image defines the height */
#gallery-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center top;
  opacity: 0;
  /* No transition until .ready — prevents flash on first load */
}

.gallery-img.active {
  opacity: 1;
  z-index: 1;
  /* active image sits in normal flow → container inherits its natural height
     → whole photo visible, no crop (Cloco gallery mechanics) */
  position: relative;
}

/* Enable crossfade only after first image loads (JS adds .ready class) */
#gallery-stack.ready .gallery-img {
  transition: opacity 0.25s ease;
}

/* =========================================
   VERTICAL THUMBNAIL STRIP (LEFT)
   — sticky, scrollable if images > height
========================================= */
.gallery-thumbs-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  /* internal scroll when 5+ images */
  scrollbar-width: none;
  width: 102px;
  flex-shrink: 0;
  max-height: 560px;
  /* cap to 1:1 image max-height */
  align-self: stretch;
  /* stretches to exactly match main-image height */
  position: relative;
  /* NOT sticky — scroll together with image */
  box-sizing: border-box;
}

.gallery-thumbs-col::-webkit-scrollbar {
  display: none;
}

.thumbnail {
  width: 88px;
  height: 110px;
  /* portrait 4:5 — mirrors/decor photos are tall (Cloco standard) */
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  box-sizing: border-box;
  flex-shrink: 0;
  display: block;
  width: 100%;
  /* fills gallery-thumbs-col width */
}

.thumbnail:hover {
  opacity: 0.85;
}

.thumbnail.active {
  opacity: 1;
  border: 2.5px solid var(--brand-500);
}

/* =========================================
   MAIN IMAGE NAVIGATION ARROWS (Desktop)
   Injected by initZoom() in product.js
========================================= */
.main-img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(var(--paper-rgb), 0.82);
  border: none;
  width: 36px;
  height: 72px;
  cursor: pointer;
  font-size: 2rem;
  color: var(--ink-800);
  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;
  line-height: 1;
  user-select: none;
  /* Don't trigger hover zoom */
  pointer-events: auto;
}

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

.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: -5px 0 15px rgba(var(--ink-rgb), 0.1);
  overflow: hidden;
}

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

.size-guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--ink-rgb), 0.5);
  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: -0.01em;
}

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

.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-140);
  font-weight: 600;
}


/* =========================================
   PRODUCT INFO (RIGHT SIDE STICKY)
========================================= */
.product-info-wrapper {
  padding: 0 0 40px 20px;
  /* NO top padding — container handles topbar+gap */
  background: var(--bg-color);
}

.product-info {
  position: sticky;
  top: 100px;
  /* Offset for topbar */
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 500px;
  margin: 0 auto;
}

/* Empty option container creates ghost gap when product has no variants */
#product-dynamic-options-container:empty {
  display: none;
}

.product-breadcrumbs {
  font-size: 0.75rem;
  color: var(--ink-300);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.product-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.product-breadcrumbs a:hover {
  color: var(--text-color);
}

.product-page-title {
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
  color: var(--text-color);
}

.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: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

/* Price block — base + sale on same line, baseline-aligned */
.product-page-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  line-height: 1;
}

/* Main (sale) price */
.product-page-price .product-price {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Currency label — hidden (BDT removed from JS) */
.product-price-currency {
  display: none;
}

/* Base price strikethrough — same line, slightly bigger */
.product-page-price .price-original {
  font-size: 0.95rem;
  color: var(--ink-380);
  text-decoration: line-through;
  font-weight: 500;
  letter-spacing: 0;
}

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

/* Promotion Badge */
.promo-badge-label {
  display: inline-block;
  background: var(--ink-900);
  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-300);
  color: var(--ink-700);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 3px 8px;
  margin: 0;
}

/* .product-gender-label removed — home decor have no gender concept */

/* Tags - chip style near title */
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

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

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

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

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

#product-description-content p {
  margin-bottom: 8px;
  color: var(--ink-600);
  line-height: 1.65;
}

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

#product-description-content li {
  margin-bottom: 4px;
  color: var(--ink-600);
  font-size: 0.88rem;
}

#product-description-content strong {
  font-weight: 700;
}

#product-description-content em {
  font-style: italic;
}

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

#product-description-content a:hover {
  color: var(--ink-500);
}

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

.color-selector-label {
  font-size: 0.95rem;
  color: var(--ink-700);
  font-weight: 600;
  margin-bottom: 10px;
}

.color-selector-label .selected-color-name {
  font-weight: 700;
  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(--brand-600);
  /* brand green — consistent with CTA buttons */
}

/* Size: out of stock */
.size-box.size-oos {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}

.size-box.size-oos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, transparent 45%, var(--line-250) 45%, var(--line-250) 55%, transparent 55%);
}

/* =========================================
   SIZE SELECTOR
========================================= */
.size-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
}

.size-label {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  color: var(--ink-700);
}

.size-label .selected-option-value {
  font-weight: 700;
  color: var(--text-color);
}

/* Not picked yet — muted "Select" */
.selected-option-value.osv-unset,
.selected-color-name.osv-unset {
  color: var(--ink-300);
}

.size-guide-btn {
  font-size: 0.75rem;
  text-decoration: underline;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}

.size-guide-btn:hover {
  color: var(--text-color);
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 10px;
}

.size-box {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  /* global 8px token */
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  transition: all 0.2s ease;
  user-select: none;
}

.size-box input {
  display: none;
}

.size-box:hover {
  border-color: var(--ink-250);
}

.size-box:has(input:checked) {
  border-color: var(--brand-600);
  /* brand green outline */
  background-color: var(--brand-600);
  /* brand green fill */
  color: var(--bg-color);
  /* white text — readable on brand-600 */
}

/* =========================================
   QUANTITY SELECTOR
========================================= */
/* Scoped to .product-actions so these don't collide with the global
   cart-drawer stepper (.quantity-selector / .qty-btn in components.css). */
.product-actions .quantity-selector {
  display: flex;
  align-items: center;
  background: var(--brand-50);
  border: 1.5px solid var(--brand-500);
  border-radius: 0;
  /* matches CTA buttons + weight chips (one radius system) */
  height: 100%;
  /* fills 52px grid row */
  width: 100%;
  /* fills 100px grid col */
  overflow: hidden;
}

.product-actions .qty-btn {
  background: none;
  border: none;
  width: 28px;
  height: 100%;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--brand-600);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.product-actions .qty-btn:hover {
  background: var(--brand-100);
}

.qty-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-600);
  background: transparent;
  font-family: inherit;
}

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

/* Hide number spin arrows — matches weight-custom-input */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input[type=number] {
  -moz-appearance: textfield;
}

/* =========================================
   WEIGHT PICKER (LOOSE / BY WEIGHT)
========================================= */

/* Preset button grid — auto-fill so it wraps on narrow screens */
.weight-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

/* Individual preset card — a SELECTION control, so the affordance must read at a
   glance: visible mid-tone border, crisp corners, solid text. */
.weight-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--ink-380);
  border-radius: 0;
  padding: 12px 8px;
  cursor: pointer;
  background: var(--bg-color);
  transition: border-color 0.18s ease, background 0.18s ease;
  user-select: none;
}

.weight-preset input[type="radio"] {
  display: none;
}

.weight-preset:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

/* Selected state */
.weight-preset:has(input:checked) {
  border-color: var(--brand-600);
  background-color: var(--brand-600);
}

.weight-preset-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  letter-spacing: 0.02em;
  transition: color 0.18s;
}

.weight-preset-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand-600);
  transition: color 0.18s;
}

/* Per-tier "was" price (struck-through) inside a preset chip and on the main price. */
.weight-preset-was {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-380);
  text-decoration: line-through;
  margin-right: 2px;
}

.product-price-was {
  font-size: 0.95rem;
  color: var(--ink-380);
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 6px;
}

/* White text when selected */
.weight-preset:has(input:checked) .weight-preset-label,
.weight-preset:has(input:checked) .weight-preset-price {
  color: #fff;
}

.weight-preset:has(input:checked) .weight-preset-was {
  color: rgba(255, 255, 255, 0.7);
}

/* Custom weight section divider */
.weight-custom-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.weight-custom-label {
  font-size: 0.78rem;
  color: var(--ink-600);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  display: block;
}

/* Custom-amount stepper — crisp corners to match the preset chips (was a 12px pill) */
.weight-stepper {
  display: flex;
  align-items: center;
  background: var(--brand-50);
  border: 1.5px solid var(--brand-500);
  border-radius: 0;
  height: 48px;
  overflow: hidden;
}

.weight-step-btn {
  width: 44px;
  height: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--brand-600);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.18s ease;
}

.weight-step-btn:hover {
  background: var(--brand-100);
}

.weight-custom-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-600);
  font-family: inherit;
}

.weight-custom-input:focus {
  outline: none;
}

/* Hide browser number spin arrows */
.weight-custom-input::-webkit-outer-spin-button,
.weight-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.weight-custom-input[type=number] {
  -moz-appearance: textfield;
}

.weight-hint {
  font-size: 0.78rem;
  color: var(--ink-350);
  display: block;
  margin-top: 7px;
  text-align: center;
  /* centered below stepper */
}

/* =========================================
   PRODUCT ACTIONS (BUTTONS)
   Layout: 2-column × 2-row CSS grid
   Col 1 = 1fr  (ATC / Buy Now)
   Col 2 = 100px (qty stepper / wishlist)
   Row 1 = 52px  Row 2 = 52px
========================================= */
.product-actions {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 52px 52px;
  gap: 10px;
  margin-top: 2px;
}

/* Grid placement — HTML order: ATC, qty, buy-now (wishlist = cards only) */
.product-actions .quantity-selector {
  grid-area: 1 / 1;
}

/* Row 1, Left  (100px) */
#add-to-cart-btn {
  grid-area: 1 / 2;
}

/* Row 1, Right (1fr)   */
#buy-now-btn {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* Row 2, FULL width    */

/* Weight / loose-sell mode: qty hidden, ATC spans full width */
.product-actions.weight-mode .quantity-selector {
  display: none;
}

.product-actions.weight-mode #add-to-cart-btn {
  grid-column: 1 / -1;
  /* span both columns */
}


.btn-add-to-cart,
.btn-buy-now {
  width: 100%;
  /* fill 1fr grid cell */
  height: 100%;
  /* fill 52px row */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  border-radius: 0;
  /* one radius system: CTAs, qty, chips, stepper all 6px */
  transition: all 0.18s ease;
  font-size: 0.95rem;
  white-space: nowrap;
}

.btn-add-to-cart {
  background-color: var(--surface);
  color: var(--brand-600);
  border: 1.5px solid var(--brand-500);
}

.btn-add-to-cart:hover {
  background-color: var(--brand-50);
  transform: translateY(-1px);
}

.btn-buy-now {
  background-color: var(--brand-500);
  color: #fff;
  border: 1.5px solid var(--brand-500);
  box-shadow: var(--shadow-sm);
}

.btn-buy-now:hover {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-add-to-cart:active,
.btn-buy-now:active {
  transform: translateY(0);
}

/* (PDP wishlist button removed — wishlist lives on product cards only)
   Guard: edge-cached SSR HTML (s-maxage) may still carry the old button for a few
   minutes after a deploy — hide it so stale markup can never render a stray heart. */
#product-wishlist-btn {
  display: none !important;
}

/* =========================================
   ACCORDIONS (PRODUCT DETAILS)
========================================= */
.product-accordion {
  border-top: 1px solid var(--border-light);
  margin-top: 0;
  /* reset: strip container handles spacing now */
}

.product-accordion details {
  border-bottom: 1px solid var(--border-light);
}

.product-accordion summary {
  padding: 20px 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-color);
  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 {
  padding-bottom: 20px;
  font-size: 0.97rem;
  color: var(--ink-500);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
  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;
}

/* =========================================
   PRODUCT DETAILS STRIP
   Full-width section below the 2-col grid
   (Product Details + Shipping & Returns)
========================================= */
.product-details-strip {
  grid-column: 1 / -1;
  /* spans both gallery + info columns */
  padding: 0 0 20px 0;
  min-width: 0;
}

/* Inner accordion: constrained to readable width, aligned left */
.product-details-strip .product-accordion {
  max-width: 860px;
  /* comfortable reading width */
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-light);
}

/* Product Details opens by default (via HTML open attr) but can still be toggled */

/* =========================================
   RESPONSIVE DESIGN (MOBILE)
========================================= */
@media (max-width: 992px) {
  .product-page-container {
    grid-template-columns: 1fr;
    padding: 52px 0 0 0;
    /* exactly topbar height — image starts right below topbar, no gap */
  }

  .product-info-wrapper {
    padding: 24px 20px 20px 20px;
  }

  /* Product Details + Shipping strip — match product-info horizontal padding */
  .product-details-strip {
    padding: 0 20px 20px 20px;
  }

  .product-details-strip .product-accordion {
    max-width: 100%;
    /* reset desktop 860px cap */
  }

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

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

  /* Mobile gallery: image FULL WIDTH top, thumbs horizontal scroll below */
  .product-gallery {
    flex-direction: column;
    /* stack: image top, thumbs below */
    padding: 0;
    /* NO top — container handles topbar+gap on mobile too */
    gap: 0;
  }

  .main-image {
    width: 100%;
    max-width: 100%;
    flex: none;
    /* placeholder only — active image's natural height wins (no crop) */
    aspect-ratio: 3 / 4;
    max-height: none;
    border-radius: 0;
    margin: 0;
  }

  .main-image img {
    /* natural fill */
  }

  /* Horizontal thumbnail scroll strip below image on mobile */
  .gallery-thumbs-col {
    flex-direction: row;
    /* horizontal on mobile */
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    max-height: none;
    position: static;
    padding: 8px 16px 12px 16px;
    gap: 8px;
  }

  .thumbnail {
    width: 82px;
    height: 102px;
    /* portrait — matches the tall product photos */
    flex-shrink: 0;
    border-radius: 0;
  }

  /* Fix product-actions on mobile — keep grid, just adjust gap */
  .product-actions {
    gap: 8px;
  }



  .btn-add-to-cart,
  .btn-buy-now {
    font-size: 0.85rem;
    padding: 0 10px;
  }
}

/* =========================================
   YOU MAY ALSO LIKE (RECOMMENDATIONS)
========================================= */
.recommendations-section {
  width: 100%;
  padding: 60px 32px;
  /* 32px horizontal = matches home page common margin */
  background: var(--bg-color);
  border-top: 1px solid var(--border-light);
  box-sizing: border-box;
}

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

.recommendations-tabs {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.recommendation-tab {
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-300);
  padding-bottom: 5px;
  cursor: pointer;
  transition: color 0.2s;
}

.recommendation-tab.active {
  color: var(--text-color);
  border-bottom: 2px solid var(--text-color);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  background: var(--bg-color);
}

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

  /* Mobile: reduce to 16px horizontal padding */
  .recommendations-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 769px) {
  .recommendations-grid {
    gap: 16px;
  }
}

/* Scoped Product Card for Recommendations */
.rec-product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--bg-color);
  text-decoration: none;
  color: inherit;
}

.rec-product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--line-120);
}

.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;
}

/* "You may also like" cards — same kind of card, so the same type scale as
   .product-title / .product-price in components.css. Left smaller, the PDP's
   own recommendations looked like a different component. */
.rec-product-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 6px;
  line-height: 1.35;
}

.rec-product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-600, #002d18);
  margin-bottom: 15px;
}

/* Overlay icons on rec-product-image */
.rec-love-icon,
.rec-add-icon {
  position: absolute;
  bottom: 10px;
  width: 36px;
  height: 36px;
  background: rgba(var(--paper-rgb), 0.92);
  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-love-icon {
  right: 52px;
}

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

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

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

/* More button */
.ymal-more-wrap {
  width: 100%;
  text-align: center;
  padding: 10px 0 10px;
  display: block;
  clear: both;
}

.ymal-more-btn {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  background: none;
  border: 1px solid var(--text-color);
  padding: 10px 30px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

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

/* Tab content spacing */
.tab-content {
  animation: fadeIn 0.3s ease;
}

/* =========================================
   IMAGE LIGHTBOX
========================================= */
.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(var(--ink-rgb), 0.95);
  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: 0;
  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: rgba(var(--paper-rgb), 0.08);
  border: 1px solid rgba(var(--paper-rgb), 0.15);
  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: rgba(var(--paper-rgb), 0.18);
}

/* Prev / Next arrows */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(var(--paper-rgb), 0.08);
  border: 1px solid rgba(var(--paper-rgb), 0.12);
  color: var(--bg-color);
  font-size: 2rem;
  width: 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0;
  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: rgba(var(--paper-rgb), 0.18);
  opacity: 1;
}

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

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

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

/* =========================================
   DESKTOP: COMMON PAGE MARGIN
   Mirrors home.css:
   .category-pills-section, .ts-section, etc.
   → max-width 1440px, margin auto on 1024px+
========================================= */
@media (min-width: 1024px) {

  .product-page-container,
  .recommendations-section {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
   DELIVERY OPTIONS — below Buy Now (dynamic, /api/shipping-methods)
   Compact rate card; hidden until data loads.
========================================= */
.pdp-delivery {
  font-size: 0.9rem;
  background: var(--bg-color);
}

/* Label row — OUTSIDE the box, same rhythm as "Mirror Size:" labels */
.pdp-delivery__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pdp-delivery__label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-700);
}

/* The bordered box now wraps only the rates content */
.pdp-delivery__box {
  padding: 10px 12px;
  border: 1px solid var(--line-200);
  background: var(--bg-color);
}

.pdp-delivery[hidden] {
  display: none;
}

.pdp-delivery__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: 6px;
}

.pdp-delivery__head i {
  color: var(--brand-500);
}

/* Cash-on-Delivery pill — pushed to the right edge of the delivery-charge header. */
.pdp-delivery__cod {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  white-space: nowrap;
}

.pdp-delivery__cod i {
  color: inherit;
  font-size: 0.82rem;
}

.pdp-delivery__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--line-200);
}

.pdp-delivery__row:first-child {
  border-top: none;
}

.pdp-delivery__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-800);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.pdp-delivery__name i {
  color: var(--brand-500);
  font-size: 0.9em;
}

.pdp-delivery__rate {
  color: var(--ink-600);
  text-align: right;
  align-self: flex-start;
  /* rate wraps from the top; name stays centered */
}

/* ── zone_flat row — one cell per zone, spread edge to edge ──────────────────
   "Inside Dhaka ৳70" left, "Outside Dhaka ৳130" right. The zone names are the
   labels, so this row has no __name/__rate pair in front of it. */
.pdp-delivery__row--zones {
  gap: 10px;
}

.pdp-zone {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pdp-zone__label {
  color: var(--ink-800);
  font-weight: 500;
  white-space: nowrap;
}

.pdp-zone__rate {
  color: var(--ink-700);
  font-weight: 600;
  white-space: nowrap;
}

/* 3+ zones would crowd on a phone — let them wrap instead of shrinking */
@media (max-width: 420px) {
  .pdp-delivery__row--zones { flex-wrap: wrap; row-gap: 4px; }
}

.pdp-delivery__notes {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-200);
  font-size: 0.78rem;
  color: var(--ink-500);
}

.pdp-delivery__notes i {
  font-size: 0.9em;
}

/* ── Delivery charge — per-size rate table (variant_zone) ────────────────────
   3 fixed columns so long size lists never wrap/break. The row matching the
   currently selected size gets .active (synced by product.js). */
.pdp-vz-table {
  display: flex;
  flex-direction: column;
  padding: 4px 0 2px;
}

.pdp-vz-row {
  display: grid;
  grid-template-columns: 1fr 84px 96px;
  align-items: center;
  /* right gutter reserved for the header chevron — same on every row so the
     columns stay aligned */
  padding: 7px 26px 7px 10px;
  font-size: 0.84rem;
  border-radius: 0;
  transition: background 0.15s ease;
}

.pdp-vz-thead {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-300, #a5a7a1);
  /* right gutter matches the data rows so the chevron never crowds "Outside" */
  padding: 2px 26px 4px 10px;
}

.pdp-vz-size {
  font-weight: 600;
  color: var(--ink-900, #1c211e);
}

.pdp-vz-in,
.pdp-vz-out {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700, #3e443f);
}

.pdp-vz-thead .pdp-vz-size {
  font-weight: 700;
  color: inherit;
}

.pdp-vz-dho {
  color: var(--brand-600);
  font-size: 0.74rem;
  font-weight: 600;
  font-style: italic;
}

.pdp-vz-row.active {
  background: var(--brand-50, #edf3f0);
}

.pdp-vz-row.active .pdp-vz-size {
  color: var(--brand-600, #002d18);
}


/* ── Option pill anatomy: value + per-size price + Dhaka-only tag ──────────── */
.size-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px 8px;
  line-height: 1.15;
}

.sb-val {
  font-size: 0.88rem;
  font-weight: 700;
}

.sb-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-400, #7b7d78);
  font-variant-numeric: tabular-nums;
}

.size-box:has(input:checked) .sb-price {
  color: rgba(255, 255, 255, 0.85);
}

.sb-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-50);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-top: 2px;
  white-space: nowrap;
}

.size-box:has(input:checked) .sb-tag {
  background: rgba(255, 255, 255, 0.92);
}

/* ── Model in the photos ─────────────────────────────────────────────────────
   One quiet line under the size chips. Deliberately understated: it is a fact
   the buyer checks against themselves, not a claim the shop is making. */
.model-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: -4px 0 16px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-500);
}

.model-line svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand-500);
}

.model-line strong {
  font-weight: 600;
  color: var(--ink-700);
}

/* ── Colour Options — the same design sold as other PRODUCTS ─────────────────
   Not .product-color-section below, which is the within-product variant picker.
   Each swatch here is a link to a different product page.

   The swatch is the product's own photograph, circular — so the buyer sees the
   actual fabric instead of a flat hex nobody typed in. */
.product-colour-strip {
  margin: 0 0 16px;
}

.cs-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.cs-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-600);
}

.cs-current {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
}

/* Scrolls sideways rather than wrapping — ten colours must not push the size
   chips off the first screen. */
.cs-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  /* The active ring is a box-shadow — it is drawn OUTSIDE the circle, and
     `overflow-x: auto` clips at this element's padding box. Without room the
     ring's top and bottom were sliced off, so the selected swatch read as a
     cropped circle. 5px covers the 4px ring plus a hair. */
  padding: 5px 0;
  margin: -5px 0;   /* the breathing room must not add to the strip's height */
}

.cs-row::-webkit-scrollbar {
  display: none;
}

.cs-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 58px;
  text-decoration: none;
  color: var(--ink-500);
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
}

.cs-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-150);
  /* Ring sits OUTSIDE the circle, so the photo is never cropped by it */
  box-shadow: 0 0 0 1px var(--line-250);
  transition: box-shadow 0.15s ease;
}

.cs-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-blank {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-150);
}

.cs-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-item.active .cs-dot {
  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--brand-500);
}

.cs-item.active .cs-name {
  color: var(--text-color);
  font-weight: 700;
}

/* Hasn't got the size the customer just picked. Faded, and the NAME is struck
   through rather than the photo — a line across the fabric reads as "damaged". */
.cs-nosize .cs-dot {
  opacity: 0.4;
}

.cs-nosize .cs-name {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Still a link: the colour may be the one they actually want, and its page
   says so honestly. Never disabled. */

@media (max-width: 480px) {
  .cs-item { width: 52px; }
  .cs-dot  { width: 44px; height: 44px; }
}

/* ── Sticky buy bar — Cloco mechanics, mobile only ─────────────────────────── */
.sticky-atc-bar {
  position: fixed;
  left: 0;
  width: 100%;
  background: var(--bg-color);
  border-top: 1px solid var(--border-light);
  z-index: 999;
  /* below mobile bottombar (1000) */
  padding: 10px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
  bottom: 64px;
  /* above the mobile bottombar */
  transform: translateY(115%);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

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

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

.sticky-atc-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

/* ── Option pills inside the bar ─────────────────────────────────────────────
   Proxies for the real picker (buildStickyOpts in js/product.js) so a customer
   who has scrolled past the picker can still choose a size without scrolling
   back up. Deliberately flatter/smaller than .size-box — this is a toolbar. */
.sticky-atc-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sticky-opt-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sticky-opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sticky-opt-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-600);
}

.sticky-opt-val {
  font-weight: 700;
  color: var(--text-color);
}

.sticky-opt-val.osv-unset {
  font-weight: 500;
  color: var(--ink-400, #7b7d78);
}

.sticky-opt-guide {
  font-size: 0.72rem;
  text-decoration: underline;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Long size lists scroll sideways rather than making the bar tall */
.sticky-opt-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 1px;
}

.sticky-opt-pills::-webkit-scrollbar {
  display: none;
}

.sticky-opt-pill {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-700);
  background: var(--bg-color);
  border: 1px solid var(--line-250);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sticky-opt-pill.active {
  border-color: var(--brand-500);
  background: var(--brand-500);
  color: #fff;
}

.sticky-opt-swatch {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-250);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sticky-opt-swatch.active {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--bg-color) inset, 0 0 0 1px var(--brand-500);
}

/* The bar copies #product-price's innerHTML, but the strikethrough + spacing
   rules were scoped to .product-page-price — so here the two prices ran
   together as "৳1,400৳1,000". Same treatment, smaller. */
.sticky-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.sticky-price .price-original,
.sticky-price .product-price-was {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-380);
  text-decoration: line-through;
  letter-spacing: 0;
}

.sticky-sel {
  font-size: 0.78rem;
  color: var(--ink-400, #7b7d78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sticky-atc-actions {
  display: flex;
  gap: 8px;
}

.sticky-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sticky-btn-atc {
  background: #fff;
  border: 1.5px solid var(--brand-500);
  color: var(--brand-600);
}

.sticky-btn-buy {
  background: var(--brand-500);
  border: 1.5px solid var(--brand-500);
  color: #fff;
}

.sticky-btn-buy:hover {
  background: var(--brand-600);
}


/* ── Variant-required UX (Cloco): locked CTAs + shake + inline hint ────────── */
.btn-locked {
  opacity: 0.5;
}

@keyframes optShake {

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

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

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

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

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

.option-row.opt-shake {
  animation: optShake 0.45s ease;
}

.option-hint-msg {
  display: none;
  margin: 6px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #B91C1C;
}

.option-hint-msg.show {
  display: block;
}

.sticky-hint-msg {
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #B91C1C;
}

.sticky-hint-msg.show {
  display: block;
}




/* hint sits inside the option row it belongs to */
.option-row .option-hint-msg {
  margin-top: 8px;
}

/* ── Reviews accordion (admin-uploaded) ────────────────────────────────────── */
.pr-summary-meta {
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-500);
}
.pr-summary-meta .bi-star-fill { color: #F59E0B; font-size: 0.78rem; }
.pr-card {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.pr-card:last-child { border-bottom: none; }
.pr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pr-stars { color: #F59E0B; font-size: 0.78rem; letter-spacing: 1px; white-space: nowrap; }
.pr-stars .bi-star { color: var(--line-250); }
.pr-name { font-weight: 600; font-size: 0.88rem; color: var(--ink-800); }
.pr-date { font-size: 0.75rem; color: var(--ink-300); margin-left: auto; }
.pr-text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-600); }


/* ── Delivery box v4: ONE head row is prompt + summary + accordion toggle ──── */
.pdp-vz-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pdp-vz-head .bi-truck { color: var(--brand-500); flex-shrink: 0; }
.pdp-vz-head-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* chevron drawn in CSS so the head needs no glyph juggling */
.pdp-vz-chev {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--brand-600, #002d18);
  border-bottom: 1.5px solid var(--brand-600, #002d18);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.pdp-vz-table.vz-expanded .pdp-vz-chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Rows stay closed until the head is tapped — the summary already says it all */
.pdp-vz-rows { max-height: 280px; overflow-y: auto; }
/* idle: only the prompt head shows (rows open on tap) */
.pdp-vz-table.vz-idle .pdp-vz-rows { display: none; }
.pdp-vz-table.vz-idle.vz-expanded .pdp-vz-rows { display: block; }
/* selected: the table speaks for itself — the prompt head steps aside */
.pdp-vz-table:not(.vz-idle) .pdp-vz-head { display: none; }
/* collapsed: header + the picked size's row only */
.pdp-vz-table.vz-collapsed .pdp-vz-row:not(.active):not(.pdp-vz-thead) { display: none; }

/* Column header doubles as the accordion toggle once a size is picked */
.pdp-vz-thead { position: relative; cursor: pointer; }
.pdp-vz-thead .pdp-vz-chev {
  position: absolute;
  right: 9px;
  top: 50%;
  margin-top: -6px;
}
.pdp-vz-table.vz-idle .pdp-vz-thead { cursor: default; }


/* ── Option rows (dynamic builder — no inline styles) ──────────────────────── */
.option-row { margin-bottom: 10px; }
.size-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* the Size Chart button is taller than the label */
  gap: 12px;
  margin-bottom: 8px;
}


.pr-img {
  margin-top: 8px;
  max-width: 160px;
  max-height: 200px;
  display: block;
  border: 1px solid var(--border-light);
}


/* ── Gallery video slot (inline only — fullscreen disabled) ────────────────── */
.gallery-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: #000;
}

/* Hide native fullscreen icon from control bar completely */
.gallery-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.thumb-video { position: relative; cursor: pointer; overflow: hidden; }
.thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}


/* ── Video sound toggle (autoplay starts muted — tap to unmute) ────────────── */
.vid-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.vid-sound:hover { background: rgba(0, 0, 0, 0.75); }

/* ── Live preview dock — picture-in-picture of the selected combination ─────
   Rounded floating card (YouTube PiP look), draggable, and only alive in the
   blind window: gallery scrolled away, buy buttons not yet passed, sticky bar
   (which carries its own thumb) not up. */
.pdp-dock {
  position: fixed;
  right: 12px;
  /* Parks beside the option rows (the empty right gutter), clear of the buy
     buttons — and the customer can drag it anywhere from there */
  top: 46%;
  margin-top: -74px;
  z-index: 990;             /* under the sticky buy bar (999) + bottombar (1000) */
  width: 108px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  touch-action: none;       /* drag owns the gesture */
  cursor: grab;
}
.pdp-dock.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.pdp-dock.is-dragging { cursor: grabbing; transition: none; }
.pdp-dock.is-dragging .pdp-dock-thumb { box-shadow: 0 14px 38px rgba(16, 24, 40, 0.34); }
.pdp-dock.is-snapping { transition: left 0.2s ease, top 0.2s ease; }
.pdp-dock.is-swap .pdp-dock-thumb { animation: pdp-dock-pulse 0.45s ease; }
@keyframes pdp-dock-pulse {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1);    }
}

.pdp-dock-thumb {
  position: relative;
  display: block;
  width: 108px;
  height: 135px;
  padding: 0;
  border: none;
  border-radius: 14px;      /* the one rounded surface in a sharp system —
                               a floating overlay reads as a card, not a panel */
  overflow: hidden;
  background: #0b0f14;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.28),
              0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pdp-dock-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Caption rides inside the card over a gradient, like a PiP title bar */
.pdp-dock-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 6px 6px;
  background: linear-gradient(transparent, rgba(8, 12, 18, 0.82));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pdp-dock-cap:empty { display: none; }
.pdp-dock-zoom {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 0.66rem;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.5);
  color: #fff;
  pointer-events: none;
}
.pdp-dock-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(8, 12, 18, 0.55);
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
}
.pdp-dock-x:hover { background: rgba(8, 12, 18, 0.78); }

/* Sticky buy bar mini thumbnail */
.sticky-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  flex: 0 0 32px;
  align-self: center;
}