/* shop.css: styles for shop.html and product.html.
   Tokens and shared classes come from base.css and are never redefined here.
   Colour pairs: --ink on --bg or --surface; --bg on --ink; --accent-ink on --accent.
   --muted is only used on --bg (it is 4.2:1 on --surface). */

/* ================================================================ Shop */

.shop-head {
  display: grid;
  gap: 14px var(--gap);
  padding-block: clamp(28px, 4vw, 64px) clamp(20px, 2.4vw, 36px);
}
.shop-title {
  font-size: clamp(2.75rem, 1rem + 6.6vw, 8rem);
  line-height: .95;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.shop-lead {
  max-width: 28ch;
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.shop-title:empty { min-height: .95em; }
.shop-lead:empty { display: none; }
@media (min-width: 900px) {
  .shop-head { grid-template-columns: minmax(0, 1fr) minmax(0, 28ch); align-items: end; }
}

/* Sticky category bar. Chips scroll sideways; the ring padding keeps focus outlines unclipped. */
.shop-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--bg);
}
.shop-bar__inner { display: flex; align-items: center; gap: 8px; padding-block: 8px; }
.shop-scroll {
  flex: 1 1 auto;
  min-width: 0;
  margin: -6px calc(var(--margin) * -1);
  padding: 6px var(--margin);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--margin);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.shop-scroll::-webkit-scrollbar { display: none; }
.shop-chips { display: flex; align-items: center; gap: 8px; width: max-content; }
.shop-chips .chip { flex: none; }
.shop-chips .chip svg { width: 16px; height: 16px; flex: none; }
.shop-arrows { display: flex; flex: none; gap: 4px; }
.shop-arrows .icon-btn { width: 48px; height: 48px; background: var(--surface); }
.shop-arrows .icon-btn:hover { background: var(--ink); color: var(--bg); }
.shop-arrows [aria-disabled="true"] { opacity: .35; cursor: default; }
.shop-arrows [aria-disabled="true"]:hover { background: var(--surface); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .shop-bar .shop-scroll { margin-right: 0; padding-right: 6px; }
}

/* Tools: budget and occasion chips, count, sort. */
.shop-tools { display: grid; gap: 14px var(--gap); padding-block: 6px 24px; }
.shop-groups { display: flex; align-items: center; gap: 8px 28px; width: max-content; }
.shop-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-count { font-weight: 500; font-variant-numeric: tabular-nums; }
.shop-sort { display: flex; align-items: center; gap: 12px; }
.shop-sort label { font-weight: 500; white-space: nowrap; }
.shop-select { position: relative; display: inline-flex; }
.shop-select select {
  min-height: 48px;
  padding: 0 44px 0 16px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color .15s linear;
}
.shop-select select:hover { background: var(--surface-deep); }
.shop-select svg { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; margin-top: -8px; stroke-width: 2.4; pointer-events: none; }
@media (min-width: 900px) {
  .shop-scroll--tools { margin: 0; padding: 0; overflow: visible; }
  .shop-groups { flex-wrap: wrap; width: auto; }
  .shop-groups .shop-chips { flex-wrap: wrap; width: auto; }
  .shop-sortbar { margin-top: 6px; }
}

.shop-results { padding-block: 4px clamp(72px, 10vw, 180px); min-height: 60vh; min-height: 60svh; }
.shop-empty {
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 42rem;
  padding: clamp(24px, 4.5vw, 64px);
  background: var(--surface);
}
.shop-empty__title { font-size: var(--step-head); }
.shop-empty__text { max-width: 34ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.shop-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Heading swap when a filter changes. */
@keyframes shop-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.shop-title.is-swap, .shop-lead.is-swap { animation: shop-swap var(--t-mid) var(--ease-out) both; }

/* ============================================================ Product */

body[data-page="product"] { --pdp-title: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); }

.pdp-crumbs { padding-block: 6px 4px; }
.pdp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; font-size: var(--step-small); }
.pdp-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.pdp-crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--muted); }
.pdp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }

.pdp { display: grid; gap: 22px; padding-block: 0 clamp(56px, 7vw, 112px); }

/* Gallery: one scroll-snap strip. Phones swipe it edge to edge; desktop adds thumbnails. */
.pdp-gallery { min-width: 0; margin-inline: calc(var(--margin) * -1); }
.pdp-thumbs { display: none; }
.pdp-stage {
  position: relative;
  width: min(100%, calc(85vh * .8));
  width: min(100%, calc(85svh * .8));
  margin-inline: auto;
}
.pdp-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Page ground, not white: when the photo frame is lifted out for a view transition, the hole must match the page. */
  background: var(--bg);
}
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-track:focus-visible { outline-offset: -3px; }
.pdp-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.pdp-slide img { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
/* Invisible twin of the stage: the "fly to bag" thumbnail starts from here whichever photo is showing. */
.pdp-fly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
/* Detail crops: the same photo, scaled by --s so the point (--cx, --cy) sits in the middle. */
.crop img {
  transform-origin: 0 0;
  transform: translate(calc((.5 - var(--s) * var(--cx)) * 100%), calc((.5 - var(--s) * var(--cy)) * 100%)) scale(var(--s));
}
.pdp-dots { display: flex; gap: 12px; padding: 14px var(--margin) 0; }
/* The active dot stretches into a short bar (transform only, so nothing reflows). */
.pdp-dots span { width: 8px; height: 8px; background: var(--ink); opacity: .28; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.pdp-dots span.is-on { opacity: 1; transform: scaleX(2.5); }

/* Phones: each photo drifts sideways inside its frame as it is swiped past (compositor only). At rest it sits at the
   card's own scale (1.06), so the card-to-page morph meets itself; mid-swipe it eases in to cover the drift.
   The slide clips, so the view timeline is named on the slide itself. Detail crops are already enlarged: they only drift. */
@keyframes ng-slide-drift {
  from { translate: -8% 0; scale: 1.16; }
  50% { translate: 0 0; scale: 1.06; }
  to { translate: 8% 0; scale: 1.16; }
}
@keyframes ng-crop-drift { from { translate: -3% 0; } to { translate: 3% 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Same resting scale as the card photo on every screen, so the morph from the card meets itself. */
    .pdp-slide:not(.crop) img { scale: 1.06; }
  }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pdp-slide { view-timeline: --ng-slide inline; }
    .pdp-slide img { animation: ng-slide-drift linear both; animation-timeline: --ng-slide; }
    .pdp-slide.crop img { animation-name: ng-crop-drift; }
  }
}

.pdp-thumb {
  position: relative;
  display: block;
  width: 72px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
  transition: scale .1s linear;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity var(--t-fast) var(--ease-out); }
.pdp-thumb:hover img, .pdp-thumb[aria-current="true"] img { opacity: 1; }
.pdp-thumb:active { scale: .97; }
.pdp-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-fast) var(--ease-out); }
.pdp-thumb[aria-current="true"]::after { transform: none; }

@media (min-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }
  .pdp-gallery {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    margin-inline: 0;
  }
  .pdp-thumbs { display: flex; flex-direction: column; gap: 12px; }
  .pdp-stage {
    width: min(100%, calc((100vh - var(--header-h) - 48px) * .8));
    width: min(100%, calc((100svh - var(--header-h) - 48px) * .8));
    margin: 0;
  }
  .pdp-dots { display: none; }
}

/* Info column */
.pdp-info { display: grid; gap: clamp(22px, 2.2vw, 30px); align-content: start; min-width: 0; max-width: 40rem; }
.pdp-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdp-titlebox { display: grid; gap: 8px; min-width: 0; }
.pdp-code { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.pdp-name { font-size: var(--pdp-title); line-height: 1; letter-spacing: -.04em; }
/* Reuses .card__heart so core.js wires the click, the toast and the heart sync; this only resets its card-grid layout. */
.pdp-heart { flex: none; grid-area: auto; align-self: auto; justify-self: auto; margin: -2px -8px 0 0; }

.pdp-priceblock { display: grid; gap: 6px; }
.pdp-priceline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pdp-price { font-size: var(--step-lead); gap: 2px 14px; letter-spacing: -.02em; }
.pdp-badge { padding: 4px 12px; background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 500; line-height: 1.3; }

.pdp-colour { display: flex; align-items: center; gap: 12px; }
.pdp-colour .pdp-label { margin-right: 4px; }
.pdp-swatch { flex: none; width: 28px; height: 28px; background: var(--sw); }
.pdp-label { font-weight: 600; letter-spacing: -.01em; }

.pdp-rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pdp-rowhead .link { margin-right: -2px; }

/* Size picker: a native radio group. Flat --surface tiles; one ink tile (carrying the chosen size) slides to the choice. */
.size-picker { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.size-picker[data-n="1"] { grid-template-columns: minmax(0, 11rem); }
.size-picker__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 0;
  height: 0;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--t-fast) var(--ease-out), opacity .15s linear;
}
.size { position: relative; display: block; }
.size__input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.size__face {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s linear, color .2s linear, scale .1s linear;
}
.size__input:not(:checked):not(:disabled) + .size__face:hover { background: var(--surface-deep); }
.size__input:not(:disabled) + .size__face:active { scale: .97; }
.size-picker:not(.has-thumb) .size__input:checked + .size__face { background: var(--ink); color: var(--bg); }
.size__input:focus-visible + .size__face { outline: 3px solid var(--focus); outline-offset: 3px; }
.size__input:disabled + .size__face { background: var(--strike) center / 100% 100% no-repeat, var(--surface); cursor: not-allowed; }
.size-picker.is-nudge { animation: pdp-nudge .45s var(--ease-out); }
@keyframes pdp-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }
.pdp-note { margin-top: 10px; }
.pdp-error { margin-top: 10px; color: var(--accent); font-weight: 600; }

.pdp-fit { display: grid; gap: 6px; padding: 16px 18px; background: var(--surface); }
.pdp-fit__lead { font-weight: 600; letter-spacing: -.01em; }
.pdp-fit__measure { font-variant-numeric: tabular-nums; }

/* Actions */
.pdp-actions { display: grid; gap: 12px; }
.pdp-add, .pdp-wa { min-height: 56px; }
@media (min-width: 900px) {
  .pdp-actions { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
/* With the bag off, Ask on WhatsApp is the only action: one full-width button and a small line under it. */
.pdp-actions.pdp-actions--solo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pdp-try { font-size: var(--step-small); color: var(--muted); }

.pdp-assure { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.pdp-assure svg { flex: none; width: 22px; height: 22px; margin-top: 1px; stroke-width: 2.2; }

/* Pincode check */
.pdp-pin { display: grid; gap: 8px; }
.pdp-pin__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pdp-pin__input {
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  background: var(--surface);
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.pdp-pin__input::placeholder { color: var(--ink); font-weight: 400; letter-spacing: 0; opacity: .72; }
.pdp-pin__input[aria-invalid="true"] { outline: 3px solid var(--accent); outline-offset: -3px; }
.pdp-pin__out { min-height: 1.5em; }
.pdp-pin__out b { font-weight: 600; }
.pdp-pin__out.is-error { color: var(--accent); font-weight: 600; }

/* Details */
.pdp-details { display: grid; gap: 12px; }
.pdp-h2 { font-size: var(--step-lead); letter-spacing: -.03em; line-height: 1.1; }
.pdp-dl { display: grid; margin: 0; }
.pdp-dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 16px; padding: 12px 14px; }
.pdp-dl > div:nth-child(odd) { background: var(--surface); }
.pdp-dl dt { font-weight: 600; }
.pdp-dl dd { margin: 0; }

/* Complete the look */
.pdp-look { padding-block: clamp(48px, 7vw, 104px) clamp(72px, 10vw, 180px); }
.pdp-look__title { margin-bottom: clamp(24px, 3vw, 40px); font-size: var(--pdp-title); line-height: 1; }
@media (min-width: 768px) and (max-width: 1199px) {
  .pdp-look .product-grid > :nth-child(n + 4) { display: none; }
}

/* Not found */
.pdp-missing { display: grid; gap: 20px; justify-items: start; padding-block: clamp(48px, 9vw, 140px); }
.pdp-missing__title { font-size: var(--step-head); }
.pdp-missing__text { max-width: 34ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }

/* Sticky buy bar: single-column layouts only. */
.pdp-bar { display: none; }
@media (max-width: 899px) {
  .pdp-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--t-mid) var(--ease-ui), visibility 0s linear var(--t-mid);
  }
  .pdp-bar.is-on {
    transform: none;
    visibility: visible;
    transition: transform var(--t-mid) var(--ease-out), visibility 0s;
  }
  .pdp-bar .price { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; font-size: var(--step-body); }
  .pdp-bar .price__mrp { color: var(--ink); font-size: var(--step-small); }
  .pdp-bar .btn { flex: 1 1 auto; max-width: 15rem; }
  html.has-pdp-bar { scroll-padding-bottom: 96px; }
}

/* Size guide dialog: a bottom sheet on phones, a centred panel from 640px. */
.size-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto 0 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out), overlay var(--t-fast) allow-discrete, display var(--t-fast) allow-discrete;
}
.size-dialog[open] { opacity: 1; transform: none; }
@starting-style { .size-dialog[open] { opacity: 0; transform: translateY(32px); } }
.size-dialog::backdrop {
  background: rgba(53, 26, 43, .55);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out), overlay var(--t-fast) allow-discrete, display var(--t-fast) allow-discrete;
}
.size-dialog[open]::backdrop { opacity: 1; }
@starting-style { .size-dialog[open]::backdrop { opacity: 0; } }
.size-dialog__box { display: grid; gap: 18px; padding: 20px var(--margin) calc(28px + env(safe-area-inset-bottom, 0px)); }
.size-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.size-dialog__title { font-size: var(--pdp-title); line-height: 1; }
.size-dialog__close { margin-right: -8px; }
.size-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.size-table tbody tr.is-current { background: var(--ink); color: var(--bg); }
.size-table tbody tr.is-current th { font-weight: 600; }
@media (min-width: 640px) {
  .size-dialog { width: min(560px, calc(100% - 48px)); margin: auto; }
  .size-dialog__box { padding: 28px 32px 32px; }
}

/* Reduced motion: fades only, no travel. */
@media (prefers-reduced-motion: reduce) {
  .shop-title.is-swap, .shop-lead.is-swap { animation: ng-fade-in .2s linear both; }
  .size-picker__thumb { transition: opacity .15s linear; }
  .size-picker.is-nudge { animation: none; outline: 3px solid var(--accent); outline-offset: 4px; }
  .pdp-dots span { transition: none; }
  .pdp-dots span.is-on { transform: none; }
  .pdp-bar { transform: none; opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
  .pdp-bar.is-on { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  .size-dialog { transform: none; transition: opacity .2s linear, overlay .2s allow-discrete, display .2s allow-discrete; }
  @starting-style { .size-dialog[open] { transform: none; } }
}