/* ==========================================================================
   Purkhe storefront
   --------------------------------------------------------------------------
   Two ideas carry this design, both taken from the product itself:

   1. THE STRIPE. The shirt is vertically striped, so vertical rules are the
      page's structural device -- they mark columns and section edges rather
      than decorate.
   2. THE COLOURWAY RETINTS THE PAGE. Choosing Mocha, Blue or Peach re-tints
      the whole storefront, not just the photo. The site wears what you pick.

   Base palette is unbleached khadi and textile indigo. Accents are sampled
   from the garments in the shoot.
   ========================================================================== */

:root {
  /* ---- Brand, taken from the Purkhe logo ------------------------------
     The mark is gold Devanagari on deep oxblood. Those two colours lead;
     everything else supports them. Body text is a warm near-black rather
     than the oxblood itself, which is too saturated to read at length. */
  --oxblood:      #74252b;
  --oxblood-deep: #5b1b20;
  --gold:         #d3aa72;
  --gold-deep:    #b98f52;
  --gold-pale:    #ecdcc2;

  --paper:      #f4ece1;   /* warm oatmeal — sits under gold without greying it */
  --paper-deep: #e8dcca;
  --ink:        #2e1a1c;   /* warm near-black for body copy */
  --ink-soft:   #6b5253;
  --ink-faint:  #9a8384;
  --rule:       rgba(116, 37, 43, 0.18);

  /* Accent follows the selected colourway, so the page picks up the shirt
     the customer is actually looking at. Brand furniture stays oxblood/gold. */
  --accent:      #4a7bb5;
  --accent-pale: #bfd8d2;
  --accent-deep: #35598a;

  --stripe-w: 1px;
  --measure: 62ch;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.18rem + 0.6vw, 1.65rem);
  --step-2:  clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --step-3:  clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
  --step-4:  clamp(3rem, 1.6rem + 6.6vw, 7rem);
}

[data-colour="Blue"]  { --accent: #4a7bb5; --accent-pale: #c3dbd6; --accent-deep: #33578a; }
[data-colour="Peach"] { --accent: #d9502a; --accent-pale: #f4b9a4; --accent-deep: #ad3a1c; }
[data-colour="Mocha"] { --accent: #9d4130; --accent-pale: #cf9184; --accent-deep: #772c1e; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Karla, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  transition: background-color 400ms ease;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 {
  color: var(--oxblood);
  font-family: Fraunces, "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

/* --- the stripe rule, used to edge sections ---------------------------- */
.rule-top {
  border-top: var(--stripe-w) solid var(--rule);
}

.shell {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
}

/* ======================================================================
   Masthead
   ====================================================================== */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* The brand bar carries the logo's own pairing: gold on oxblood. */
.brandbar { background: var(--oxblood); }
.brandbar .masthead { color: var(--gold); }
.brandbar .masthead nav a { color: rgba(236, 220, 194, 0.82); }
.brandbar .masthead nav a:hover { color: var(--gold); }

.logo-mark {
  height: 2.1rem;
  width: auto;
  display: block;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: Fraunces, Georgia, serif;
  font-size: var(--step-1);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  color: var(--gold);
}

.masthead nav {
  display: flex;
  gap: 1.5rem;
  font-size: var(--step--1);
}

.masthead nav a { text-decoration: none; color: var(--ink-soft); }
.masthead nav a:hover { color: var(--accent-deep); }

/* ======================================================================
   Hero — full-bleed shoot photograph, wordmark laid over it
   ====================================================================== */
.hero {
  position: relative;
  min-height: min(80vh, 44rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--oxblood-deep);
}

/* Each colourway is its own layer; only one is opaque at a time. */
.hero-stage { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms ease, transform 7s ease-out;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);   /* a slow settle, not a zoom that draws attention */
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(46, 16, 18, 0.82) 0%,
    rgba(46, 16, 18, 0.30) 42%,
    rgba(46, 16, 18, 0) 70%);
}

.hero-body {
  position: relative;
  z-index: 1;
  padding: 0 0 3.5rem;
  color: #f4efe4;
}

.hero-statement {
  color: #f6ece0;
  font-family: Fraunces, Georgia, serif;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  margin: 0;
  max-width: 18ch;
}

.hero-sub {
  max-width: 42ch;
  margin: 0.9rem 0 0;
  font-size: var(--step-0);
  color: rgba(244, 239, 228, 0.8);
}

/* ======================================================================
   Product
   ====================================================================== */
.product {
  display: grid;
  gap: 3rem;
  padding: 4rem 0;
}

@media (min-width: 62rem) {
  .product {
    grid-template-columns: 1.15fr 1fr;
    gap: 4.5rem;
    align-items: start;
  }
  .product .detail { position: sticky; top: 2rem; }
}

.gallery-main {
  background: var(--paper-deep);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-strip {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.55rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gallery-strip button {
  flex: 0 0 5.2rem;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: var(--stripe-w) solid transparent;
  background: var(--paper-deep);
  cursor: pointer;
  overflow: hidden;
}
.gallery-strip button[aria-current="true"] { border-color: var(--accent); }
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; }

.detail h1 { font-size: var(--step-3); color: var(--oxblood); }

.tagline {
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
  max-width: 34ch;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  font-size: var(--step-2);
  font-family: Fraunces, Georgia, serif;
}
.price .was {
  font-size: var(--step-0);
  color: var(--ink-faint);
  text-decoration: line-through;
  font-family: Karla, sans-serif;
}
.price .save {
  font-size: var(--step--1);
  font-family: Karla, sans-serif;
  color: var(--oxblood);
  background: var(--gold-pale);
  padding: 0.15rem 0.5rem;
}
.tax-line { font-size: var(--step--1); color: var(--ink-faint); margin: 0.2rem 0 0; }

/* --- colourway switcher: the striped swatches -------------------------- */
.colourways { margin: 2rem 0 0; }
.colourways h3 { font-family: Karla, sans-serif; font-size: var(--step--1); font-weight: 600; margin-bottom: 0.7rem; }

.swatches { display: flex; gap: 0.8rem; padding: 0; margin: 0 0 1.8rem; list-style: none; }

.swatch {
  --a: var(--accent);
  --b: var(--accent-pale);
  display: block;               /* swatches are links, so they need a box */
  width: 3.6rem;
  height: 4.4rem;
  padding: 0;
  border: var(--stripe-w) solid var(--rule);
  cursor: pointer;
  position: relative;
  background-image: repeating-linear-gradient(90deg, var(--a) 0 6px, var(--b) 6px 12px);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--oxblood); }
.swatch .name {
  position: absolute;
  left: 0; right: 0; bottom: -1.5rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
}
.swatch[aria-disabled="true"] { opacity: 0.4; }
.swatch[aria-disabled="true"]::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(233,228,217,.75) 5px 7px);
}

.swatch-blue  { --a: #4a7bb5; --b: #c3dbd6; }
.swatch-peach { --a: #d9502a; --b: #f4b9a4; }
.swatch-mocha { --a: #9d4130; --b: #cf9184; }

.stock-line { margin: 2.6rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.stock-line.out { color: var(--accent-deep); }

/* --- the order button -------------------------------------------------- */
.order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.8rem;
  padding: 1.05rem 1.5rem;
  background: var(--oxblood);
  color: var(--gold);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.order-btn:hover { background: var(--oxblood-deep); }
.order-btn svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.order-note { font-size: var(--step--1); color: var(--ink-faint); margin: 0.7rem 0 0; text-align: center; }

/* --- specs & size chart ------------------------------------------------ */
.specs { margin: 2.8rem 0 0; border-top: var(--stripe-w) solid var(--rule); }
.specs dl { display: grid; grid-template-columns: 9rem 1fr; margin: 0; }
.specs dt, .specs dd {
  padding: 0.75rem 0;
  border-bottom: var(--stripe-w) solid var(--rule);
  margin: 0;
}
.specs dt { color: var(--ink-soft); font-size: var(--step--1); }

.sizechart { margin: 2.8rem 0 0; }
.sizechart h3 { font-size: var(--step-1); }
.sizechart table { width: 100%; border-collapse: collapse; margin-top: 0.8rem; }
.sizechart th, .sizechart td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: var(--stripe-w) solid var(--rule);
  font-size: var(--step--1);
}
.sizechart th { color: var(--ink-soft); font-weight: 500; }
.sizechart td { font-variant-numeric: tabular-nums; }
.sizechart .pending { color: var(--ink-faint); font-style: italic; }

/* ======================================================================
   Editorial strip — the shoot, full width
   ====================================================================== */
.shoot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.55rem;
  padding: 0 0 4rem;
}
.shoot img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ======================================================================
   Footer
   ====================================================================== */
.footer {
  border-top: 3px solid var(--oxblood);
  padding: 2.5rem 0 4rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  justify-content: space-between;
}
.footer a { color: var(--ink-soft); }

/* --- sticky order bar on small screens --------------------------------- */
.sticky-order {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: var(--stripe-w) solid var(--rule);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sticky-order .order-btn { margin: 0; width: auto; flex: 1; padding: 0.85rem 1.2rem; }
.sticky-order .p { font-family: Fraunces, Georgia, serif; font-size: var(--step-1); }
@media (min-width: 62rem) { .sticky-order { display: none; } }
@media (max-width: 61.99rem) { body { padding-bottom: 5.5rem; } }

/* ======================================================================
   Accessibility & motion
   ====================================================================== */
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  z-index: 50;
  background: var(--oxblood);
  color: var(--gold);
  padding: 0.6rem 1rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shown in place of the order button when the WhatsApp line is not connected —
   an honest note beats a button that goes nowhere. */
.order-unavailable {
  margin: 0.8rem 0 0;
  padding: 0.9rem 1rem;
  border: var(--stripe-w) solid var(--rule);
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: 34ch;
}

/* The first-order offer. Deliberately quiet — a loud sale badge would fight
   the photography, which is the thing actually selling the shirt. */
.first-order-offer {
  margin: 1rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--gold-pale);
  color: var(--oxblood);
  border-left: 3px solid var(--gold);
  font-size: var(--step--1);
  max-width: 34ch;
}


/* ---- hero colourway picker ------------------------------------------------
   Doubles as navigation and as a preview: hovering shows that colourway,
   clicking commits the whole page to it. */
.hero-picker {
  display: flex;
  gap: 0.9rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}

.hero-dot {
  --a: var(--gold);
  --b: var(--gold-pale);
  position: relative;
  display: block;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 2px solid rgba(246, 236, 224, 0.45);
  background-image: repeating-linear-gradient(90deg, var(--a) 0 5px, var(--b) 5px 10px);
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease;
}
.hero-dot:hover, .hero-dot:focus-visible { transform: translateY(-3px); }
.hero-dot.is-active {
  border-color: #f6ece0;
  box-shadow: 0 0 0 3px rgba(246, 236, 224, 0.22);
}
.hero-dot[data-swatch="blue"]  { --a: #4a7bb5; --b: #c3dbd6; }
.hero-dot[data-swatch="peach"] { --a: #d9502a; --b: #f4b9a4; }
.hero-dot[data-swatch="mocha"] { --a: #9d4130; --b: #cf9184; }

.hero-dot-name {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(246, 236, 224, 0.78);
  white-space: nowrap;
}
.hero-dot.is-active .hero-dot-name { color: #f6ece0; }

/* A quiet nudge that there is more below. */
.hero-cue {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(246, 236, 224, 0.85);
  background: rgba(46, 16, 18, 0.35);
  animation: cue-drift 2.6s ease-in-out infinite;
}
.hero-cue svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.hero-cue:hover { color: #fff; }

@keyframes cue-drift {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 5px); }
}

@media (max-width: 40rem) {
  .hero-picker { gap: 0.75rem; margin-top: 1.3rem; }
  .hero-dot { width: 2.4rem; height: 2.4rem; }
  .hero-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 200ms linear; transform: none; }
  .hero-slide.is-active { transform: none; }
  .hero-cue { animation: none; }
}