/* ============================================================
   Oakly® — The Oak Lounge · Product detail page
   ============================================================ */

.breadcrumb {
  display: flex; gap: 0.5rem; align-items: center;
  padding-top: clamp(1.2rem, 3vw, 2rem);
  font-size: 0.82rem; color: var(--ink-faint);
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { opacity: 0.5; }
.breadcrumb b { color: var(--ink-soft); font-weight: 500; }

/* -- Layout --------------------------------------------------- */

.product {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.4rem);
  padding-top: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}

/* -- Gallery -------------------------------------------------- */

.gallery { position: sticky; top: 96px; display: grid; gap: 14px; }

.gallery__main {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  background: var(--paper);
}
.gallery__main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity .4s var(--ease-out);
}
.gallery__main:hover img { transform: scale(1.05); }

.gallery__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 12px;
  font-size: 0.74rem; font-weight: 500; color: var(--cream);
  background: rgba(26, 20, 14, 0.42);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.gallery__badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--oak);
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(32,26,20,0.55); }
  50%     { box-shadow: 0 0 0 6px rgba(32,26,20,0); }
}

.thumbs { display: flex; gap: 12px; }
.thumb {
  flex: 1; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  border: 2px solid transparent; background: var(--paper);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { transform: translateY(-2px); }
.thumb.is-active { border-color: var(--ink); }

/* -- Info panel ----------------------------------------------- */

.info { padding-top: 0.4rem; }

.info__eyebrow { font-family: var(--font-eyebrow); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oak-deep); font-weight: 600; }

.info__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.015em;
  margin: 0.5rem 0 0.4rem;
  text-wrap: balance;
}
.info__sub { color: var(--ink-soft); font-size: 1.02rem; }

.rating { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft); }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 16px; height: 16px; }

/* flex-wrap so a too-narrow screen drops "Save 13%" (or the struck
   price) to its own line as a whole unit, and white-space:nowrap on
   each figure so it can't ever break mid-number — a flex item can
   shrink below its content's natural width by default, which was
   splitting "PKR 152,000" into "PKR" / "152,000" on common phone
   widths (320–390px) instead of wrapping the row cleanly. */
.price { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.7rem; margin: 1.3rem 0; }
.price__now { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; white-space: nowrap; }

.price__was {
  position: relative;
  font-size: 0.98rem; font-weight: 500; color: var(--ink-faint);
  white-space: nowrap;
}
/* A cleaner strike than the default text-decoration line: dead
   straight, centered on the x-height, tapered at both ends instead of
   a flat hard-edged bar. */
.price__was::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 50%;
  height: 1.5px; transform: translateY(-50%);
  background: linear-gradient(to right, transparent, currentColor 18%, currentColor 82%, transparent);
  opacity: 0.6;
}

.price__off {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--cream);
  background: linear-gradient(135deg, var(--oak-deep), var(--oak) 130%);
  padding: 5px 10px 5px 8px;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 14px -6px rgba(32, 26, 20, 0.5);
  white-space: nowrap;
  animation: price-off-in .5s var(--ease-out) .1s both;
}
.price__off svg { width: 11px; height: 11px; flex: none; }

@keyframes price-off-in {
  from { opacity: 0; transform: scale(0.85) translateX(-2px); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}

.opt { margin-bottom: 1.4rem; }
.opt__label { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.6rem; }
.opt__label b { font-weight: 500; }
.opt__label span { color: var(--ink-faint); }

.swatches { display: flex; gap: 12px; }
.swatch {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--line);
  position: relative;
  transition: transform .25s var(--ease-out), border-color .25s;
}
.swatch::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { border-color: var(--ink); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 0.55rem 1.1rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); font-size: 0.9rem;
  transition: border-color .25s, background-color .25s, color .25s, transform .25s var(--ease-out);
}
.chip:hover { transform: translateY(-1px); }
.chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--cream); }

.buy-row { display: flex; gap: 12px; align-items: stretch; margin: 1.6rem 0 1rem; }
.qty {
  display: flex; align-items: center; gap: 0.2rem;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 0 0.4rem;
}
.qty button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: var(--ink-soft); transition: background-color .2s; }
.qty button:hover { background: rgba(32,26,20,0.06); }
.qty input {
  width: 34px; text-align: center; border: none; background: none;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.reassure-list { display: grid; gap: 0.7rem; margin: 1.4rem 0; }
.reassure-list li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; color: var(--ink-soft); }
.reassure-list svg { width: 18px; height: 18px; color: var(--oak-deep); flex: none; }

/* -- Accordion ------------------------------------------------ */

.accordion { border-top: 1px solid var(--line); margin-top: 1.4rem; }
.acc { border-bottom: 1px solid var(--line); }
.acc__head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.15rem 0; font-size: 1rem; font-weight: 500; text-align: left;
}
.acc__head svg { width: 20px; height: 20px; transition: transform .35s var(--ease-out); color: var(--ink-soft); }
.acc.is-open .acc__head svg { transform: rotate(45deg); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.acc.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p, .acc__inner ul { padding-bottom: 1.15rem; color: var(--ink-soft); font-size: 0.94rem; }
.acc__inner ul { display: grid; gap: 0.4rem; }
.acc__inner li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line-soft); padding-bottom: 0.4rem; }
.acc__inner li b { color: var(--ink); font-weight: 500; }

/* ============================================================
   Complete the look
   ============================================================ */

.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  margin-top: clamp(3rem, 7vw, 6rem); margin-bottom: 1.8rem;
}
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.01em; }
.section-head__nav { display: flex; align-items: center; gap: 1.4rem; }
.section-head a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.9rem; color: var(--oak-deep); font-weight: 500;
  transition: gap .25s var(--ease-out);
}
.section-head a:hover { gap: 10px; }

.rail-arrows { display: flex; gap: 8px; }
.rail-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.rail-arrow svg { width: 17px; height: 17px; }
.rail-arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.rail-arrow:disabled { opacity: 0.32; pointer-events: none; }

.rail-wrap { position: relative; }

.rail {
  /* Fixed/clamped track sizes, not minmax(_, 1fr) — 1fr tracks in an
     auto-scrolling grid are sized off the scrollport rather than the
     content, and mobile WebKit in particular can blow a lone track up
     to the full viewport width. clamp() keeps every card a predictable,
     content-appropriate size on any screen. */
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 26vw, 280px);
  gap: 20px; overflow-x: auto; padding: 32px 16px 64px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; height: 0; }

.rail .pcard {
  /* radius lives on .pcard__media (top) below — overflow:hidden + border-radius
     on this element would fight the hover transform/shadow in Safari, which
     can drop the corner clip mid-transition and leave square corners behind
     a hard-edged shadow. Keeping the lift/shadow on an unclipped box avoids
     that entirely. */
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.rail .pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 54px -26px rgba(40,28,16,0.3);
  border-color: var(--line);
}

.rail .pcard__media {
  position: relative; aspect-ratio: 4 / 3.6; overflow: hidden; background: var(--cream);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.rail .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.rail .pcard:hover .pcard__media img { transform: scale(1.08); }
.rail .pcard__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,15,10,0.28), rgba(20,15,10,0) 45%);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.rail .pcard:hover .pcard__media::after { opacity: 1; }

.rail .pcard__tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); background: rgba(251,248,243,0.9);
  padding: 5px 10px; border-radius: var(--r-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.rail .pcard__body { padding: 1.1rem 1.15rem 1.2rem; }
.rail .pcard__cat { font-family: var(--font-eyebrow); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.rail .pcard__name {
  font-size: 1.08rem; font-weight: 500; margin: 0.25rem 0 0.7rem;
  letter-spacing: -0.005em;
}
.rail .pcard__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.rail .pcard__price b { font-weight: 600; font-size: 1.02rem; }

.rail .pcard__add.pcard__add--rail {
  width: auto; margin-top: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.55rem 1.05rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); font-size: 0.85rem; font-weight: 500;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-out),
    width .35s var(--ease-out);
}
.rail .pcard__add--rail svg { width: 15px; height: 15px; }
/* Same reasoning as the sticky button: the label overlay is out of
   flow, so this needs an explicit width once it's showing "Added to
   cart" instead of "Add" — auto-sizing can't see it. */
.rail .pcard__add--rail.is-added { width: 148px; }
.rail .pcard__add--rail:hover {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  /* Mobile is the primary surface here, not an afterthought: cards are
     sized as a "peek" carousel (most of the viewport, a sliver of the
     next card showing) so touch-swipe is the obvious interaction —
     arrow buttons are desktop-only and hidden below. */
  .section-head {
    flex-direction: column; align-items: stretch; gap: 0.7rem;
    margin-top: clamp(2.4rem, 12vw, 3.4rem); margin-bottom: 1.3rem;
  }
  .section-head__nav { justify-content: space-between; }

  .rail-arrows { display: none; }
  .rail { grid-auto-columns: 78vw; gap: 12px; padding: 20px 4px 1.3rem; }

  .rail .pcard__body { padding: 0.95rem 1rem 1.05rem; }
  .rail .pcard__name { font-size: 1.02rem; margin-bottom: 0.55rem; }
  .rail .pcard__foot { gap: 0.5rem; }
  .rail .pcard__add--rail { padding: 0.5rem 0.9rem; font-size: 0.82rem; flex: none; }
}

@media (max-width: 380px) {
  .rail { grid-auto-columns: 84vw; }
}

/* ============================================================
   Sticky mobile add-bar
   ============================================================ */

/* Same frosted-glass material as the sticky header (.nav in body.is-scrolled):
   light beige, heavy blur+saturate, a hairline highlight border and an
   inset top sheen, so the two "docked" surfaces read as one system —
   edge-to-edge, not a floating capsule. Content inside lines up with
   the footer's own .wrap (same max-width + side padding vars), so the
   price starts where "Oakly" starts and the button ends where the
   footer's last column ends. */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex;
  padding-block: 0.9rem;
  padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  background: rgba(243, 237, 228, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(30px) saturate(1.15);
  -webkit-backdrop-filter: blur(30px) saturate(1.15);
  box-shadow: 0 -12px 30px -22px rgba(40, 28, 16, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateY(120%);
  transition: transform .4s var(--ease-out);
}
.sticky-buy.is-on { transform: translateY(0); }

/* Mirrors .wrap's exact box model (same max-width + padding-inline
   vars, on one element) rather than nesting a second inset inside the
   outer padding — that compounded into misalignment with the footer's
   own .wrap instead of lining up with it. */
.sticky-buy__capsule {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
}

.sticky-buy__thumb {
  width: 44px; height: 44px; border-radius: 12px;
  overflow: hidden; flex: none;
  background: var(--cream);
}
.sticky-buy__thumb img { width: 100%; height: 100%; object-fit: cover; }

.sticky-buy__price { line-height: 1.1; }
.sticky-buy__price b { font-size: 1.1rem; font-weight: 600; }
.sticky-buy__price small { display: block; font-size: 0.72rem; color: var(--ink-faint); }

/* Solid circular icon button — same relationship as the hero email
   capture's white circle button inside its frosted bar. On add, it
   grows into a pill to show its own "Added to cart" label instead of
   popping a separate toast — same background throughout, no color
   inversion, just the shape and content changing. */
.sticky-buy .btn {
  position: relative;
  margin-left: auto; flex: none;
  width: 3rem; height: 3rem; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink);
  border: none;
  transition: transform .3s var(--ease-out), width .4s var(--ease-out),
    padding .4s var(--ease-out), border-radius .4s var(--ease-out);
}
/* Kill the base .btn hover sweep (a solid near-black fill sliding up
   over the button) — this button should stay its plain white circle
   always, no hover/press color inversion. On touch devices a tap can
   leave :hover "stuck" until the next tap elsewhere, which is exactly
   what made this look like a black oval appearing after clicking. */
.sticky-buy .btn::before { content: none; }

.sticky-buy .btn svg { width: 20px; height: 20px; }
.sticky-buy .btn > span:not(.add-label) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sticky-buy .btn:hover { transform: scale(1.045); }

.sticky-buy .btn.is-added {
  /* Explicit width, not auto: the label is position:absolute (so it can
     crossfade over the resting icon instead of hard-cutting to it),
     which takes it out of flow and makes auto-sizing blind to its
     content — the button would only ever measure the tiny icon. */
  width: 176px; height: 3rem; padding: 0;
  border-radius: var(--r-pill);
}
.sticky-buy .btn .add-label { font-size: 0.9rem; font-weight: 500; }

/* Reserve room at the bottom of every product page so the sticky bar
   never sits over the footer/last section — shows on all sizes now,
   not just mobile. */
body { padding-bottom: 76px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; }
  .gallery { position: static; }
}