/* ==========================================================================
   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; }