/* ==========================================================================
   QRBELL Store — Product detail page (spec §16, §17, §92)
   Loaded only by product.html, so the homepage does not pay for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page rhythm.
   The global --section-gap (64–80px) is tuned for content pages. This page
   is a storefront and sits beside the homepage and shop, so it runs to the
   same tighter beat.
   -------------------------------------------------------------------------- */

.store-product { --section-gap: var(--space-8); }

@media (min-width: 768px)  { .store-product { --section-gap: var(--space-10); } }
@media (min-width: 1200px) { .store-product { --section-gap: 56px; } }

/* Section headings match the shop and homepage scale (24–30px desktop) */
.store-product h2 { font-size: 1.25rem; }

@media (min-width: 768px)  { .store-product h2 { font-size: 1.5rem; } }
@media (min-width: 1200px) { .store-product h2 { font-size: 1.625rem; } }

/* --------------------------------------------------------------------------
   The gallery column is a fixed width rather than a fraction.
   As a fraction it grew with the viewport — at 1900px the product image was
   ~630px square and dominated the page. A capped column keeps the image
   generous but lets the buy box take the space it gains.
   -------------------------------------------------------------------------- */

/* Three regions: gallery, product info, and a buy box.
   Separating the buy box out is the one marketplace convention worth
   borrowing — it keeps "what is this?" apart from "how do I get it?", so the
   price, stock, delivery and actions read as one decision rather than being
   strung through the description. */

.store-product .qb-split--product {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "gallery" "info" "buy";
  gap: var(--space-6);
}

@media (min-width: 992px) {
  .store-product .qb-split--product {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    grid-template-areas:
      "gallery info"
      "gallery buy";
    gap: var(--space-6) var(--space-8);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .store-product .qb-split--product {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr) 300px;
    grid-template-areas: "gallery info buy";
    gap: var(--space-8);
  }
}

.pdp-gallery { grid-area: gallery; }
.pdp-info    { grid-area: info; min-width: 0; }
.pdp-buy     { grid-area: buy;  min-width: 0; }


/* --------------------------------------------------------------------------
   BUY BOX
   -------------------------------------------------------------------------- */

.pdp-buy__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

@media (min-width: 1200px) {
  .pdp-buy__panel {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-4));
  }
}

.pdp-buy__total { line-height: 1.15; }
.pdp-buy__total-label { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.pdp-buy__total-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums;
}

/* Stock + delivery rows */
.pdp-fact { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.pdp-fact i { flex: 0 0 auto; margin-top: 2px; font-size: 1rem; }
.pdp-fact--stock  { color: var(--color-success-strong); font-weight: var(--weight-semibold); }
.pdp-fact--stock i { color: var(--color-success-strong); }
.pdp-fact--muted  { color: var(--color-text-muted); }
.pdp-fact--muted i { color: var(--color-text-faint); }
.pdp-fact strong { color: var(--color-text); font-weight: var(--weight-semibold); }

.pdp-buy__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.pdp-buy__qty-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* Actions stack inside the panel — two full-width buttons read more clearly
   in a ~300px column than two half-width ones. */
.pdp-buy__actions { display: flex; flex-direction: column; gap: var(--space-2); }

.pdp-buy__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-faint);
  font-size: var(--text-2xs);
}

.pdp-buy__sold {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  line-height: 1.5;
}
.pdp-buy__sold strong { color: var(--color-text); font-weight: var(--weight-semibold); }

/* Collapsible price breakdown — §17 still requires every component to be
   visible, but it does not have to occupy the panel by default. */
.pdp-breakdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.pdp-breakdown__toggle:hover { color: var(--color-text); }
.pdp-breakdown__toggle i { transition: transform var(--transition-base); }
.pdp-breakdown__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.pdp-breakdown__panel[hidden] { display: none; }

/* Buy-box controls sit tighter than the shared defaults */
.store-product .qb-variants .qb-option { padding: var(--space-3); }
.store-product .qb-option__title { font-size: var(--text-sm); }
.store-product .qb-option__price { font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   GALLERY
   Desktop: large stage with a thumbnail rail beneath.
   Mobile:  a snap-scrolling carousel with dots — no library needed.
   -------------------------------------------------------------------------- */

.qb-gallery { display: flex; flex-direction: column; gap: var(--space-3); }

.qb-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.qb-gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.qb-gallery__track::-webkit-scrollbar { display: none; }

.qb-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
}
.qb-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Dots — mobile only; desktop uses the thumbnail rail instead */
.qb-gallery__dots {
  position: absolute;
  left: 0; right: 0; bottom: var(--space-3);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.qb-gallery__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: rgba(7, 9, 28, 0.25);
  border: 0;
  padding: 0;
  transition: all var(--transition-base);
}
.qb-gallery__dot.is-active { background: var(--qb-navy-900); width: 20px; border-radius: var(--radius-pill); }

.qb-gallery__thumbs { display: none; gap: var(--space-2); }

@media (min-width: 992px) {
  .qb-gallery__dots { display: none; }
  .qb-gallery__thumbs { display: flex; flex-wrap: wrap; }
  /* On desktop the track is driven by the thumbnails, not by dragging */
  .qb-gallery__track { overflow: hidden; }
}

.qb-gallery__thumb {
  width: 60px; height: 60px;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
  transition: border-color var(--transition-base);
}
.qb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qb-gallery__thumb:hover { border-color: var(--color-border-strong); }
.qb-gallery__thumb.is-active { border-color: var(--color-accent); }

/* Placeholder badge, so a stand-in image is never mistaken for the real thing */
.qb-gallery__placeholder-note {
  position: absolute;
  left: var(--space-3); bottom: var(--space-3);
  padding: 4px var(--space-2);
  background: rgba(7, 9, 28, 0.78);
  color: #fff;
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}


/* --------------------------------------------------------------------------
   PRODUCT HEADER
   Mobile priority order — image, name, price, key benefit, variant, delivery,
   CTA — comes from source order; secondary content sits below (spec §92).
   -------------------------------------------------------------------------- */

/* Type scale deliberately below the shared heading tokens. A product title is
   a label on a buy box, not a page headline — the price and the actions should
   win the eye, not the name. */

.qb-pdp__title {
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

@media (min-width: 992px)  { .qb-pdp__title { font-size: 1.5rem; } }
@media (min-width: 1200px) { .qb-pdp__title { font-size: 1.625rem; } }

.qb-pdp__tagline {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.qb-pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.qb-pdp__price-now {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (min-width: 992px) { .qb-pdp__price-now { font-size: 2rem; } }

.qb-pdp__save {
  color: var(--color-success-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.qb-pdp__tax-note { color: var(--color-text-faint); font-size: var(--text-xs); }


/* --------------------------------------------------------------------------
   VARIANTS — spec §17
   -------------------------------------------------------------------------- */

/* Vertical tiles. The previous version laid name, sub-label and price out
   inline and hung the badge outside the tile on a negative offset — which
   clipped against the row above and broke long labels mid-word
   ("Metal-" / "finish"). Everything now stacks inside the tile's own box. */

.qb-variants {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.qb-variant {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}
.qb-variant:hover { border-color: var(--qb-grey-400); }

.qb-variant.is-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.qb-variant__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.qb-variant__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.qb-variant__badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-xs);
  font-size: 0.5625rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  line-height: 1.5;
}

.qb-variant__sub {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  line-height: 1.3;
}

.qb-variant__price {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   PRICE BREAKDOWN — spec §17 requires every component to be visible
   -------------------------------------------------------------------------- */

.qb-breakdown {
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   SCAN ACTIONS — what the tag actually does, taken from real artwork
   -------------------------------------------------------------------------- */

.qb-actions-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.qb-action-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.qb-action-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  background: var(--qb-navy-900);
  color: var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: 1rem;
}

.qb-action-tile__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.2; }
.qb-action-tile__hint  { font-size: var(--text-xs); color: var(--color-text-muted); }


/* --------------------------------------------------------------------------
   SPEC TABLE
   -------------------------------------------------------------------------- */

.qb-specs { width: 100%; border-collapse: collapse; }

.qb-specs th,
.qb-specs td {
  padding: var(--space-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
}
.qb-specs tr:last-child th,
.qb-specs tr:last-child td { border-bottom: 0; }

.qb-specs th {
  width: 42%;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}
.qb-specs td { font-weight: var(--weight-medium); }


/* --------------------------------------------------------------------------
   ACCORDION — FAQ (spec §16) and collapsible mobile sections
   -------------------------------------------------------------------------- */

.qb-accordion { border-top: 1px solid var(--color-border); }

.qb-accordion__item { border-bottom: 1px solid var(--color-border); }

.qb-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-4) 0;
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.qb-accordion__trigger:hover { color: var(--color-accent); }

.qb-accordion__icon { flex: 0 0 auto; color: var(--color-text-faint); transition: transform var(--transition-base); }
.qb-accordion__trigger[aria-expanded="true"] .qb-accordion__icon { transform: rotate(180deg); }

.qb-accordion__panel {
  padding-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.qb-accordion__panel[hidden] { display: none; }


/* --------------------------------------------------------------------------
   REVIEWS — spec §16
   -------------------------------------------------------------------------- */

.qb-review-summary {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 768px) {
  .qb-review-summary { grid-template-columns: 200px minmax(0, 1fr); }
}

.qb-review-score {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.qb-review-score__value {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: var(--weight-extra);
  line-height: 1;
}

.qb-review-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.qb-review-bar__track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.qb-review-bar__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }
.qb-review-bar__count { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

.qb-review {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.qb-review:last-child { border-bottom: 0; }

.qb-review__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  background: var(--qb-navy-900);
  color: var(--color-primary);
  border-radius: var(--radius-circle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.qb-review__name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.qb-review__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.qb-review__title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: var(--space-3) 0 var(--space-1); }
.qb-review__text { margin: 0; color: var(--color-text-muted); line-height: var(--leading-normal); }


/* --------------------------------------------------------------------------
   DESKTOP CTA
   The sticky bar is mobile-only, so the desktop buy box holds the actions.
   -------------------------------------------------------------------------- */

/* Two actions: Add to cart, and Buy now. Side by side once there is room. */
.qb-buybox {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 576px) {
  .qb-buybox--pair { grid-template-columns: 1fr 1fr; }
}

/* Below lg the sticky bar carries Buy now, so showing it inline as well would
   put the same action on screen twice. Add to cart stays inline. */
@media (max-width: 991.98px) {
  .qb-buybox__buynow { display: none; }
  .qb-buybox--pair { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   DELIVERY / TRUST ROW
   -------------------------------------------------------------------------- */

.qb-assurance {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.qb-assurance__item { display: flex; align-items: flex-start; gap: var(--space-2); }
.qb-assurance__item i { color: var(--color-success-strong); font-size: 1rem; flex: 0 0 auto; margin-top: 1px; }
.qb-assurance__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.25; }
.qb-assurance__hint  { font-size: var(--text-2xs); color: var(--color-text-muted); }