/* ==========================================================================
   HiGHKEY — clothing that speaks confidence.
   Design tokens — cream / ink monochrome, peach pulled from the mascot art
   ========================================================================== */
:root {
  --cream: #f2ebe0;
  --cream-deep: #e8ddc7;
  --paper: #fbf8f2;
  --ink: #18140f;
  --ink-soft: #5b5648;
  --line: #ddd0b6;
  --peach: #e7ad78;
  --peach-ink: #3a2414;
  --white: #ffffff;
  --danger: #b5482f;

  --font-display: "Lilita One", "Arial Rounded MT Bold", sans-serif;
  --font-body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peach-ink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.4em;
  height: 3px;
  background: var(--peach);
  display: inline-block;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  font-weight: 400;
}

h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }

.lede {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.8em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur-med) var(--ease-in-out);
  z-index: 0;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--cream); }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.btn-primary::before { background: var(--peach); }
.btn-primary:hover { color: var(--peach-ink); }

.btn-ghost {
  border-color: var(--line);
  color: var(--ink-soft);
}
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--cream); border-color: var(--ink); }

.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 235, 224, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
}
.nav__logo img {
  width: clamp(120px, 16vw, 160px);
  height: 46px;
  object-fit: cover;
  object-position: center 42%;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 8px;
  transform: rotate(-2deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__logo:hover img { transform: rotate(0deg) scale(1.03); }

.nav__links {
  display: flex;
  gap: clamp(1.2rem, 2vw, 2.4rem);
}
.nav__links a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 0.3rem;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--ink);
  transition: right var(--dur-fast) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { right: 0; }

.nav__search {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.35em 0.5em 0.35em 1em;
  gap: 0.4em;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav__search:focus-within { border-color: var(--ink); }
.nav__search input {
  border: none;
  background: transparent;
  outline: none;
  width: 130px;
  font-size: 0.82rem;
  color: var(--ink);
}
.nav__search input::placeholder { color: var(--ink-soft); }
.nav__search button { display: flex; align-items: center; color: var(--ink-soft); flex-shrink: 0; }
.nav__search button:hover { color: var(--ink); }
@media (max-width: 640px) { .nav__search input { width: 80px; } }
@media (max-width: 480px) { .nav__search input { display: none; } .nav__search { padding: 0.4em; } }

.nav__actions { display: flex; align-items: center; gap: 1.2rem; }
.nav__icon-btn {
  position: relative;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.nav__icon-btn:hover { color: var(--ink); }
.cart-count {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.7rem;
  min-width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
}
.nav__toggle span { height: 2px; background: var(--ink); display: block; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  /* The header sets backdrop-filter, which makes it the containing block for
     this fixed panel. `bottom: 0` would therefore resolve against the ~80px
     header rather than the viewport, collapsing the panel to a stub and letting
     the links spill over the page. Height is stated explicitly instead.
     dvh follows mobile browser chrome as it hides; vh is the fallback. */
  .nav__links {
    position: fixed;
    top: 80px;
    right: 0;
    left: 30%;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    z-index: 120;
    background: var(--cream);
    border-left: 2px solid var(--ink);
    box-shadow: -18px 0 44px rgba(24, 20, 15, 0.2);
    flex-direction: column;
    padding: 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-in-out);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { font-size: 1rem; }
}

/* ==========================================================================
   Rotating stamp badge — signature element
   ========================================================================== */
.stamp {
  --size: 108px;
  width: var(--size);
  height: var(--size);
  position: relative;
  flex-shrink: 0;
}
.stamp svg { animation: spin 16s linear infinite; }
.stamp__core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--ink);
  background: var(--peach);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: auto;
  border: 2px solid var(--ink);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.hero__title {
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  overflow: hidden;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line span {
  display: block;
  animation: hero-line-in 0.9s var(--ease-out) both;
}
.hero__title .line:nth-child(2) span { animation-delay: 0.08s; color: var(--peach-ink); -webkit-text-stroke: 1px var(--ink); }
.hero__title .line:nth-child(3) span { animation-delay: 0.16s; }
@keyframes hero-line-in {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__bg-text {
  position: absolute;
  top: 45%;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 22vw;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  white-space: nowrap;
  z-index: -1;
  user-select: none;
  pointer-events: none;
}

/* ==========================================================================
   Sections
   ========================================================================== */
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}

.alt-surface {
  background: var(--cream-deep);
}

/* reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.32s; }

/* ==========================================================================
   Category strip
   ========================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
  border: 2px solid var(--ink);
}
.cat-card {
  background: var(--paper);
  position: relative;
  aspect-ratio: 4/5;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  overflow: hidden;
}
.cat-card__ph,
.cat-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-card:hover .cat-card__ph,
.cat-card:hover .cat-card__img { transform: scale(1.06) rotate(-1deg); }
.cat-card__count {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(24,20,15,0.82) 100%);
  z-index: 1;
}
.cat-card__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase;
  color: var(--cream);
}
.cat-card__label small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--peach);
  font-weight: 700;
  margin-top: 0.4rem;
}

@media (max-width: 760px) {
  .cat-grid { grid-template-columns: 1fr; }

  /* The giant outlined HIGHKEY watermark is a desktop flourish. At 22vw on a
     phone the word is as wide as the screen and lands straight across the
     headline and the tagline — the outline strokes cut through "EVERYONE."
     and "Considered pieces, delivered across Nepal.", making both hard to
     read. It carries no information the logo above it doesn't already give,
     so on a phone it simply goes. */
  .hero__bg-text { display: none; }
}

/* ==========================================================================
   Placeholder art (used until real product photography lands)
   ========================================================================== */
/* Placeholder tile: woven texture + centred HK monogram so it reads as an
   intentional branded swatch rather than a broken image, until real product
   photography replaces it. The monogram is an SVG background so it scales
   proportionally at every size the tile is used (cart thumb through to PDP). */
.ph-art {
  width: 100%;
  height: 100%;
  display: block;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Ctext x='60' y='46' text-anchor='middle' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='48' fill='rgba(24,20,15,0.12)'%3EHK%3C/text%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(24,20,15,0.06) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #e2d5ba, #cdbd98 70%);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: center, center, center;
  background-size: 45% auto, 220% 220%, 220% 220%;
}
/* Monogram layer stays centred; only the texture/gradient layers shift. */
.ph-art--1 { background-position: center, 10% 20%, 10% 20%; }
.ph-art--2 { background-position: center, 60% 40%, 60% 40%; }
.ph-art--3 { background-position: center, 30% 80%, 30% 80%; }
.ph-art--4 { background-position: center, 80% 10%, 80% 10%; }

/* ==========================================================================
   Product grid
   ========================================================================== */
.filter-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.chip {
  padding: 0.55em 1.1em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* A true grid, not masonry columns. Every photo is cropped to the same 4:5, so
   an even grid lines the garments up row to row — which is what makes a
   catalogue read as a real shop rather than a scrapbook. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.product-card {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid var(--ink);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.product-card:hover {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: 0 14px 24px rgba(24,20,15,0.16);
  z-index: 2;
}
.product-card__frame {
  position: relative;
  overflow: hidden;
}
.product-card__frame .ph-art { transition: transform var(--dur-slow) var(--ease-out); }
.product-card:hover .ph-art { transform: scale(1.05); }
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--cream-deep);
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__img { transform: scale(1.05); }

.product-card__tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--peach);
  color: var(--peach-ink);
  border: 1.5px solid var(--ink);
  padding: 0.3em 0.6em;
  font-weight: 700;
  border-radius: 999px;
}

.product-card__oos {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream);
  padding: 0.3em 0.6em;
  font-weight: 700;
  border-radius: 999px;
}
.product-card.is-oos .ph-art { filter: grayscale(0.6); opacity: 0.55; }
.product-card.is-oos:hover { transform: none; box-shadow: none; }

.product-card__best {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--peach);
  padding: 0.3em 0.6em;
  font-weight: 700;
  border-radius: 999px;
}

.product-card__body {
  padding: 1.1rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.product-card__cat {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.product-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.product-card__rating {
  font-size: 0.85rem;
  color: var(--peach-ink);
  letter-spacing: 0.02em;
}
.product-card__rating small { color: var(--ink-soft); font-weight: 400; }
.product-card__price {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
}
.product-card__lowstock {
  font-size: 0.72rem;
  color: var(--danger);
  font-weight: 600;
}
.product-card a.product-card__link { position: absolute; inset: 0; z-index: 1; }

/* ==========================================================================
   Saved items (wishlist)
   ========================================================================== */

/* z-index 2 puts the heart above the stretched card link — at z-index 1 the
   link swallows the tap and you navigate instead of saving. */
.wish-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.wish-btn:hover { background: var(--peach); color: var(--peach-ink); transform: scale(1.08); }
.wish-btn.is-on { background: var(--peach); color: var(--peach-ink); }
.wish-btn:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }

/* A single acknowledging pop on save. Deliberately short — a wishlist tap is a
   small action and shouldn't be celebrated with a toast that covers the grid. */
.wish-btn.just-saved { animation: wish-pop 0.42s var(--ease-out); }
@keyframes wish-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.34); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wish-btn.just-saved { animation: none; }
  .wish-btn:hover { transform: none; }
}

/* On the product page the heart sits inline beside Add to Cart, not floating */
.wish-btn--inline { position: static; width: 46px; height: 46px; flex-shrink: 0; }

.nav__icon-btn .wish-count,
.wish-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.35em;
  margin-left: 0.4em;
  border-radius: 999px;
  background: var(--peach);
  color: var(--peach-ink);
  font-size: 0.72em;
  font-weight: 800;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 14px;
  background: var(--cream);
  clip-path: polygon(
    0% 100%, 3% 20%, 7% 90%, 12% 10%, 17% 80%, 22% 0%, 28% 70%, 33% 15%,
    39% 95%, 44% 25%, 50% 85%, 55% 5%, 61% 75%, 67% 20%, 72% 100%, 78% 15%,
    83% 90%, 89% 10%, 94% 80%, 100% 0%, 100% 100%
  );
}
.site-footer .nav__logo img { background: var(--cream); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 1rem;
}
.footer-col a, .footer-col p { color: var(--cream); opacity: 0.85; font-size: 0.88rem; display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.55rem; }
.footer-col a svg { flex-shrink: 0; }
.footer-col a:hover { opacity: 1; color: var(--peach); }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242,235,224,0.2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--cream);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

/* Policy links sit in the bottom bar rather than as a fifth footer column —
   the footer grid is fixed at four, and small print belongs down here anyway.
   On a phone the bar wraps and these fall onto their own line. */
.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.footer-policies a {
  color: var(--cream);
  white-space: nowrap;
}
.footer-policies a:hover { color: var(--peach); }

/* ==========================================================================
   Brand strip
   --------------------------------------------------------------------------
   Replaces three large lifestyle photos that filled a whole phone screen
   before a shopper reached anything they could buy. Pure text: it costs
   nothing to download and nothing to lay out.
   ========================================================================== */
.brandstrip {
  padding: clamp(1.6rem, 5vw, 2.6rem) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--cream-deep);
  text-align: center;
}
.brandstrip__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 3.4vw, 1.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--ink);
}
.brandstrip__note {
  margin: 0.9rem auto 0;
  max-width: 46ch;
  font-size: clamp(0.82rem, 2.6vw, 0.95rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ==========================================================================
   Touch targets
   --------------------------------------------------------------------------
   Most people reaching this shop arrive from a phone link, so a control that
   is merely visible is not good enough — it has to be hittable with a thumb.

   Measured on a 375px viewport before this block existed:
       menu toggle .............. 26 x 18
       cart link ................ 58 x 19
       nav links ................ 197 x 29
       footer policy links ...... 36-55 x 18
       lookbook dots ............ 22 x 8

   WCAG 2.5.8 sets 24x24 as the AA minimum; Apple's guidance is 44x44. These
   are brought to 44 high wherever the layout allows.

   The trick throughout is to grow the HIT AREA without growing the ink: extra
   padding, or a transparent ::after that stretches the clickable box. The
   design looks unchanged; it just stops missing.
   ========================================================================== */

/* Hamburger — the single most important control on a phone. */
.nav__toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 9px;
  justify-content: center;
  /* Stops iOS painting a grey flash box over the whole button on tap */
  -webkit-tap-highlight-color: transparent;
}

/* Cart, and any other pill in the header row */
.nav__icon-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 860px) {
  /* Drawer links: 29px tall rows sit too close together to hit confidently */
  .nav__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Footer small print — 18px tall links are a coin flip on a phone */
.footer-policies a {
  padding: 0.55rem 0;
  display: inline-flex;
  align-items: center;
}

/* The footer's Shop / Support / Follow columns measured 148x21 on a phone:
   full-width rows only 21px high, stacked close together. Padding replaces
   most of the margin so the hit area roughly doubles without the footer
   growing much taller. */
@media (max-width: 780px) {
  .footer-col a {
    min-height: 40px;
    padding: 0.35rem 0;
    margin-bottom: 0.15rem;
  }
}

/* Lookbook dots were 8px tall. The dot stays small; the target does not. */
.lookbook__dot {
  position: relative;
}
.lookbook__dot::after {
  content: "";
  position: absolute;
  /* Pulls the hit box out to 44x44 around a dot of any size */
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Close buttons: the drawer, the filter sidebar, the lightbox */
.drawer__close,
.filter-sidebar__close,
.lightbox__close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quantity steppers get thumbed repeatedly, so they matter more than most.
   The markup is .qty-control > button (.qty-inc / .qty-dec) — sized in em, so
   they came out around 30px in the cart drawer. */
@media (max-width: 720px) {
  .qty-control button,
  .drawer-line .qty-control button {
    min-width: 40px;
    min-height: 40px;
  }

  /* Filter chips were 35px; fine for a mouse, tight for a thumb in a list
     where the wrong tap silently changes what the shopper is looking at. */
  .chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* The save heart sits over a photo, so a miss opens the product instead —
     annoying enough that it's worth the extra few pixels. */
  .wish-btn {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.stars { display: inline-flex; gap: 0.1rem; color: var(--peach-ink); vertical-align: middle; }

.review-summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.review-summary__score {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3rem);
  line-height: 1;
  color: var(--ink);
}
.review-summary__count { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }

.review-list { display: grid; gap: 1rem; }
.review {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  background: var(--paper);
}
.review__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.review__title { margin: 0.4rem 0 0; font-size: 1rem; }
.review__body { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.65; white-space: pre-wrap; }
.review__meta { margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.review__badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--peach);
  color: var(--peach-ink);
  border: 1.5px solid var(--ink);
}

.review-form {
  margin-top: 2rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.3rem;
  background: var(--paper);
  max-width: 640px;
}
.rating-picker { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rating-picker legend {
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
/* The radio itself is hidden but still focusable, so keyboard users get the
   ring on the visible label rather than on an invisible input. */
.rating-picker label { position: relative; }
.rating-picker input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rating-picker span {
  display: inline-block;
  padding: 0.45em 0.85em;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.88rem;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.rating-picker input:checked + span { border-color: var(--ink); background: var(--peach); color: var(--peach-ink); }
.rating-picker input:focus-visible + span { outline: 2px solid var(--peach-ink); outline-offset: 2px; }

.review-form__msg { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--peach-ink); min-height: 1.2em; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.radio-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: border-color var(--dur-fast);
  background: var(--paper);
}
.radio-card:has(input:checked) { border-color: var(--ink); }
.radio-card input { accent-color: var(--ink); width: 1.1em; height: 1.1em; }
.radio-card .rc-title { font-weight: 700; font-size: 0.92rem; }
.radio-card .rc-sub { font-size: 0.78rem; color: var(--ink-soft); }

.qr-panel {
  display: none;
  align-items: center;
  gap: 1.2rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-top: 0.6rem;
  background: var(--paper);
}
.qr-panel.is-shown { display: flex; }
.qr-panel img {
  width: 96px;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.qr-panel p { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.qr-panel strong { color: var(--ink); }
.qr-panel__code { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.qr-panel__brand {
  width: 96px;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* ==========================================================================
   Cart / Checkout
   ========================================================================== */
.cart-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) { .cart-row { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; } }
.cart-row__thumb { width: 90px; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--line); }
@media (max-width: 640px) { .cart-row__thumb { width: 64px; } }
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--line);
}
.qty-control button { width: 2.2em; height: 2.2em; }
.qty-control button:hover { color: var(--peach-ink); }
.qty-control input {
  width: 2.4em;
  text-align: center;
  background: transparent;
  border: none;
  border-inline: 1px solid var(--line);
  padding: 0.4em 0;
}

.summary-row { display: flex; justify-content: space-between; padding-block: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }
.summary-row.total { color: var(--ink); font-weight: 700; font-size: 1.2rem; border-top: 2px solid var(--ink); margin-top: 0.6rem; padding-top: 1rem; }
.summary-row.total .amt { color: var(--peach-ink); }

.notice {
  border: 2px dashed var(--line);
  padding: 1rem 1.2rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper);
}
.notice strong { color: var(--peach-ink); }

/* ==========================================================================
   Cart drawer — slides in from the right on every page
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 20, 15, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
  z-index: 200;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--cream);
  border-left: 2px solid var(--ink);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-in-out);
  z-index: 201;
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem var(--gutter);
  border-bottom: 2px solid var(--ink);
  flex-shrink: 0;
}
.drawer__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; }
.drawer__close { font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: 0.2em; }
.drawer__close:hover { color: var(--ink); }

.drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--gutter); }
.drawer__foot {
  border-top: 2px solid var(--ink);
  padding: 1.2rem var(--gutter);
  flex-shrink: 0;
  background: var(--paper);
}

.drawer-line {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.drawer-line__thumb {
  width: 66px; aspect-ratio: 3/4; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--cream-deep);
}
.drawer-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drawer-line__name { font-weight: 700; font-size: 0.86rem; line-height: 1.3; }
.drawer-line__meta { font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.2rem; }
.drawer-line__price { font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.drawer-line__remove {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); text-decoration: underline; margin-top: 0.5rem;
}
.drawer-line__remove:hover { color: var(--danger); }
.drawer-line .qty-control { margin-top: 0.5rem; }
.drawer-line .qty-control button { width: 1.9em; height: 1.9em; font-size: 0.9rem; }
.drawer-line .qty-control input { width: 2em; font-size: 0.82rem; }

/* Progress toward free delivery — a concrete nudge to add one more item */
.drawer__progress { margin-bottom: 0.9rem; }
.drawer__progress-bar {
  height: 6px; background: var(--line); border-radius: 999px;
  overflow: hidden; margin-top: 0.45rem;
}
.drawer__progress-fill {
  height: 100%; background: var(--ink); border-radius: 999px;
  transition: width var(--dur-med) var(--ease-out);
}
.drawer__progress-fill.is-complete { background: var(--peach); }
.drawer__progress-text { font-size: 0.76rem; color: var(--ink-soft); }
.drawer__progress-text strong { color: var(--peach-ink); }

.drawer__empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }

/* ---- Rewards ---- */
.rewards-box {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
  background: var(--paper);
}
.rewards-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--peach);
  color: var(--peach-ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.3em 0.7em;
}
.rewards-strip {
  border-block: 2px solid var(--ink);
  background: var(--cream-deep);
  padding: 0.9rem 0;
  text-align: center;
  font-size: 0.85rem;
}
.rewards-strip strong { color: var(--peach-ink); }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop, .drawer__progress-fill { transition: none !important; }
}

/* ==========================================================================
   Custom cursor (desktop only, decorative)
   ========================================================================== */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--ease-out), opacity 0.2s;
}
.cursor-dot.is-active { transform: translate(-50%, -50%) scale(2.4); background: var(--peach); }

/* ==========================================================================
   Utility
   ========================================================================== */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--ink); color: var(--cream);
  padding: 0.6em 1em; z-index: 1000;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   Colour variants
   ========================================================================== */
.color-dots {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.45rem;
  align-items: center;
}
.color-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: block;
}
.color-dot.is-current { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3.5px var(--ink); }

/* Larger, clickable version on the product page */
.swatch-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  padding: 3px;
  background: var(--paper);
  display: block;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(24,20,15,0.25);
}
.swatch:hover { transform: translateY(-2px); border-color: var(--ink-soft); }
.swatch.is-active { border-color: var(--ink); }

/* ==========================================================================
   Product specification panel
   ========================================================================== */
.spec-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.spec-list dt, .spec-list .spec-key {
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  flex: 0 0 auto;
}
.spec-list .spec-val { text-align: right; font-weight: 600; }
.spec-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.9rem; }
.spec-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--peach);
  color: var(--peach-ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.3em 0.75em;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.care-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.8rem; }

/* ==========================================================================
   Order history
   ========================================================================== */
.order-card {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.3rem;
  margin-bottom: 1.2rem;
}
.order-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
}
.order-card__id { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; }
.order-card__date { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.order-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.25em 0.7em;
}
.order-status.is-ok { background: var(--peach); color: var(--peach-ink); }
.order-status.is-wait { background: var(--cream-deep); color: var(--ink-soft); }
.order-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  padding: 0.4rem 0;
}
.order-line__meta { color: var(--ink-soft); font-size: 0.78rem; }
.order-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  border-top: 2px solid var(--ink);
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}
.order-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--ink);
  border: 2px solid var(--ink);
  margin-bottom: 2rem;
}
.order-stat { background: var(--paper); padding: 1.2rem; text-align: center; }
.order-stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--peach-ink); }
.order-stat span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
@media (max-width: 620px) { .order-stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   Cinematic intro
   --------------------------------------------------------------------------
   Shown once per browsing session. The markup is injected by JS and removed
   when finished, so if JS never runs the shopper simply sees the site — the
   intro can never trap the page behind a curtain.
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: intro-out 0.75s var(--ease-out) 1.85s forwards;
}
.intro__inner { text-align: center; perspective: 800px; }
.intro__mark {
  width: clamp(88px, 16vw, 132px);
  height: clamp(88px, 16vw, 132px);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cream);
  display: block;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: intro-mark 1.5s var(--ease-out) forwards;
}
.intro__word {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 5rem);
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: 0.04em;
  margin-top: 1.1rem;
  display: flex;
  justify-content: center;
  gap: 0.02em;
}
.intro__word i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(70%) rotateX(-80deg);
  animation: intro-letter 0.62s var(--ease-out) forwards;
}
.intro__tag {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--peach);
  font-weight: 700;
  margin-top: 0.9rem;
  opacity: 0;
  animation: intro-fade 0.6s var(--ease-out) 1.1s forwards;
}
.intro__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.14) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: intro-sweep 1.5s var(--ease-out) 0.45s forwards;
  pointer-events: none;
}
.intro__skip {
  position: absolute;
  bottom: 1.6rem;
  right: 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
  font-weight: 700;
  padding: 0.6em 1em;
  border: 1.5px solid rgba(245,240,232,0.4);
  border-radius: 999px;
  transition: opacity var(--dur-fast);
}
.intro__skip:hover { opacity: 1; }
@keyframes intro-mark {
  0%   { opacity: 0; transform: rotateY(-95deg) scale(0.7); }
  60%  { opacity: 1; transform: rotateY(12deg) scale(1.04); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}
@keyframes intro-letter {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-sweep { to { transform: translateX(100%); } }
@keyframes intro-out {
  to { opacity: 0; visibility: hidden; transform: scale(1.06); }
}
/* Keeps the page from scrolling behind the curtain while it plays */
body.intro-lock { overflow: hidden; }

/* ==========================================================================
   3D depth and immersive interaction
   --------------------------------------------------------------------------
   Tilt values are written to custom properties by JS on pointer move. Only
   enabled where a real pointer exists — on touch it would fire on scroll.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
  }
  .tilt.is-tilting {
    transition: transform 0.08s linear;
    transform: perspective(900px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg))
               translateZ(10px);
  }
  /* Lifts the image inside the frame a little further than the card itself,
     which is what sells the depth rather than a flat rotation. */
  .tilt.is-tilting .product-card__img,
  .tilt.is-tilting .cat-card__img { transform: scale(1.05) translateZ(28px); }

  /* Glare that follows the pointer across the card face */
  .tilt__glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
                rgba(255,255,255,0.34), transparent 55%);
  }
  .tilt.is-tilting .tilt__glare { opacity: 1; }

  .magnetic { transition: transform 0.35s var(--ease-out); }
}

/* Hero layers drift at different rates on scroll for a sense of depth */
.parallax { will-change: transform; }

/* ==========================================================================
   Lookbook — the only lifestyle photography on the site
   --------------------------------------------------------------------------
   Slides cross-fade rather than slide sideways: with portrait photography a
   horizontal track needs the images to share an exact width, and a fade keeps
   the frame perfectly still while the picture changes.
   ========================================================================== */
.worn { background: var(--cream-deep); }
.worn__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .worn__grid { grid-template-columns: 1fr; } }

.lookbook {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--ink);
  touch-action: pan-y;            /* sideways drag changes photo, page still scrolls */
}
.lookbook__track { position: relative; aspect-ratio: 4 / 5; }
.lookbook__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.lookbook__slide.is-active { opacity: 1; }
.lookbook__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lookbook__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(242, 235, 224, 0.9);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.lookbook:hover .lookbook__arrow,
.lookbook:focus-within .lookbook__arrow { opacity: 1; }
.lookbook__arrow:hover { background: var(--peach); }
.lookbook__arrow--prev { left: 0.8rem; }
.lookbook__arrow--next { right: 0.8rem; }
/* On touch there is no hover to reveal them, and swipe covers it */
@media (hover: none) { .lookbook__arrow { display: none; } }

.lookbook__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  background: rgba(24, 20, 15, 0.42);
  backdrop-filter: blur(3px);
  border-radius: 999px;
}
.lookbook__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(242, 235, 224, 0.5);
  transition: background var(--dur-fast), width var(--dur-fast);
}
.lookbook__dot.is-active { background: var(--peach); width: 22px; border-radius: 999px; }

.lookbook.is-single .lookbook__arrow,
.lookbook.is-single .lookbook__dots { display: none; }

.worn__copy h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }

/* ==========================================================================
   Sale pricing
   ========================================================================== */
.price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.price { color: var(--peach-ink); font-weight: 700; }
.price--lg { font-size: 1.4rem; }
.price--sale { color: var(--danger); }
.price-was {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.86em;
  text-decoration-thickness: 1.5px;
}
.price-save {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  padding: 0.22em 0.55em;
}
.price-row--lg .price-save { font-size: 0.72rem; }

/* Sits where the New / Limited badge would, and takes its place when both apply */
.product-card__sale {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--danger);
  color: #fff;
  border: 1.5px solid var(--ink);
  padding: 0.3em 0.6em;
  font-weight: 700;
  border-radius: 999px;
}
.sale-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.45rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.pager:empty { display: none; }
.pager__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 0.8em;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.pager__btn:hover:not([disabled]):not(.is-current) { border-color: var(--ink); color: var(--ink); }
.pager__btn.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
  cursor: default;
}
.pager__btn[disabled] { opacity: 0.3; pointer-events: none; }
.pager__gap { color: var(--ink-soft); padding: 0 0.2rem; }

/* ==========================================================================
   Mobile filter toggle
   ========================================================================== */
.filter-toggle { display: none; }

@media (max-width: 720px) {
  .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    margin-top: 1.6rem;
    padding: 0.75em 1.3em;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 2px 0 var(--ink);
  }
  .filter-toggle[aria-expanded="true"] { background: var(--ink); color: var(--cream); }
  .filter-toggle__count {
    background: var(--peach);
    color: var(--peach-ink);
    border-radius: 999px;
    min-width: 1.5em;
    padding: 0.1em 0.45em;
    font-size: 0.72rem;
  }
  /* The collapse itself is declared in shop.html, next to the toolbar's base
     display rule — that sheet loads after this one and would otherwise win. */
}

/* ==========================================================================
   Build Your Rotation — multi-buy progress track
   --------------------------------------------------------------------------
   The depth is done with inset shadows and a lit top edge rather than real 3D
   transforms: this sits above the cart on every page including checkout, so it
   has to stay perfectly crisp and cost nothing to repaint as the cart changes.
   ========================================================================== */
.rotation {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.1rem 1.3rem 2.6rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 3px 0 var(--ink);
}
.rotation--compact { padding: 0.9rem 1rem 2.3rem; margin-bottom: 1.1rem; }

.rotation__head { margin-bottom: 1.5rem; }
.rotation__title {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.rotation--compact .rotation__title { font-size: 0.78rem; }
.rotation__title strong { color: var(--peach-ink); }

.rotation__track { position: relative; height: 14px; }

/* The groove */
.rotation__rail {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--cream-deep);
  box-shadow: inset 0 2px 4px rgba(24, 20, 15, 0.28),
              inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}

/* The filled length, lit along its top edge so it reads as a raised bar */
.rotation__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--peach) 0%, #d3945c 55%, #b87a45 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
              0 1px 3px rgba(24, 20, 15, 0.35);
  transition: width 0.55s var(--ease-out);
}

.rotation__node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.rotation__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--cream);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
}
.rotation__node.is-done .rotation__dot {
  background: var(--ink);
  color: var(--peach);
  transform: scale(1.12);
}
.rotation__tag {
  position: absolute;
  top: 34px;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
.rotation__node.is-done .rotation__tag { color: var(--peach-ink); }

/* Every node is centred on its position, including the last one — nudging it
   inward made the spacing read as uneven. The container's side padding is wide
   enough for the final dot to sit centred on the track end. */

.rotation.is-active { border-color: var(--peach-ink); }

@media (max-width: 460px) {
  .rotation__head { flex-direction: column; gap: 0.35rem; }
  .rotation__tag { font-size: 0.58rem; }
}

/* ==========================================================================
   Image lightbox — zoom and swipe on product photography
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  /* Fully opaque, not translucent: the image sits on its own compositing layer
     (it's transformed), and against a semi-transparent backdrop the page bled
     through enough to read. A solid ground also makes garment colour easier to
     judge, which is the reason someone zooms in. */
  background: #14110c;
  display: none;
  place-items: center;
  touch-action: none;
}
.lightbox.is-open { display: grid; }
.lightbox__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lightbox__img {
  max-width: 92vw;
  max-height: 84vh;
  transform-origin: center center;
  transition: transform 0.25s var(--ease-out);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-zoomed .lightbox__img { cursor: grab; transition: none; }
.lightbox.is-panning .lightbox__img { cursor: grabbing; transition: none; }

.lightbox__bar {
  position: absolute;
  top: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.lightbox__btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1.5px solid rgba(245,240,232,0.45);
  background: rgba(24,20,15,0.6);
  color: var(--cream);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.lightbox__btn:hover { background: var(--peach); color: var(--peach-ink); border-color: var(--peach); }
.lightbox__btn[disabled] { opacity: 0.35; pointer-events: none; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
}
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

.lightbox__count {
  position: absolute;
  bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 2;
}
@media (max-width: 620px) {
  .lightbox__nav { display: none; }   /* swipe instead */
}

/* Signals that the main product image opens */
.pdp-frame { cursor: zoom-in; }
.pdp-zoom-hint {
  position: absolute;
  bottom: 0.7rem; right: 0.7rem;
  z-index: 3;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.35em 0.8em;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ==========================================================================
   Sold out
   ========================================================================== */
.product-card.is-oos .product-card__img { filter: grayscale(0.85) opacity(0.5); }
.product-card__oos {
  background: var(--danger, #a8321f);
  color: #fff;
}
.oos-banner {
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-top: 1.2rem;
}
.oos-banner strong { display: block; font-size: 1rem; margin-bottom: 0.25rem; }
.oos-banner p { font-size: 0.84rem; opacity: 0.85; margin: 0; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stamp svg { animation: none; }
  .reveal, .reveal-stagger > *, .hero__title .line span,
  .cat-card__ph, .cat-card__img, .product-card .ph-art, .btn::before, .cursor-dot,
  .tilt, .tilt.is-tilting, .magnetic, .parallax,
  .tilt.is-tilting .product-card__img, .tilt.is-tilting .cat-card__img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .tilt__glare { display: none; }
  .rotation__fill, .rotation__dot { transition: none !important; }
  /* The curtain still appears but leaves immediately rather than animating */
  .intro { animation: intro-out 0.01s linear forwards; }
  .intro__mark, .intro__word i, .intro__tag, .intro__sweep {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
  .cursor-dot { display: none; }
}

/* The Sale chip earns a colour so it reads as an offer, not another category */
.chip--sale { border-color: var(--danger); color: var(--danger); font-weight: 700; }
.chip--sale.is-active { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ==========================================================================
   Phone spacing  —  deliberately last in the file

   Nearly all spacing here is clamp(min, vw, max), and the FIRST value is a
   floor, so the narrower the screen the larger the padding is relative to it.
   That is backwards, and it showed: on a 375px phone the first product sat
   919px down, past the bottom of an 812px screen, behind 495px of hero and
   187px of brand strip. Someone arriving from Instagram saw a title, a
   sentence and a row of brand names, and had to scroll before anything they
   could buy appeared.

   This block lives at the end of the file on purpose. Placed higher up it
   was overridden by .brandstrip and .site-footer, which are defined further
   down at equal specificity — the later rule wins, so half of it silently
   did nothing. Desktop keeps the original clamps untouched.
   ========================================================================== */
@media (max-width: 760px) {
  section { padding-block: 2rem; }

  .hero { padding-block: 1.75rem 2rem; }
  .hero__title { font-size: clamp(2.4rem, 11vw, 3rem); line-height: 0.95; }
  .hero .lede { font-size: 0.95rem; }

  .brandstrip { padding: 1rem 0; }
  .brandstrip__note { margin-top: 0.5rem; }

  .section-head { margin-bottom: 1rem; }

  /* The footer repeats the whole nav under every page; on a phone that is a
     lot of scrolling past nothing the customer asked for. */
  .site-footer { padding-block: 2rem; }

  /* CARD HEIGHT.
   *
   * In a two-column grid a card is about 162px wide, and the text under the
   * photo had grown taller than the photo deserved: 197px of image carrying
   * 235px of text. The name wrapped to four lines at 1.05rem, and the price
   * row wrapped to three because "Rs. 1,500", the old price and the discount
   * could not sit side by side in that width.
   *
   * The discount is the easy one — every discounted card already shows a
   * "Sale −17%" badge across the corner of the photo, so printing it again
   * two lines below was costing a whole line to repeat itself. */
  .product-card .price-save { display: none; }

  .product-card__name { font-size: 0.92rem; line-height: 1.15; }
  .product-card__price { padding-top: 0.4rem; font-size: 0.9rem; }
  .price-row { gap: 0.35rem; }
}

/* The offer deadline under a card price. Deliberately quiet — it states a
   fact, it is not a flashing timer. */
.product-card__offer-ends {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--danger);
}