/* ==========================================================================
   LoopedbyLo — replicated from the Claude Design system "Lolas Bags Site"
   Tokens, webfonts, components. Static CSS, no build step.
   ========================================================================== */

/* ---- Webfonts (self-hosted, extracted from the design bundle) ---- */
/* Hanken Grotesk — variable weight file, subsets */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/hanken-var-cyr-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/hanken-var-viet.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/hanken-var-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/hanken-var-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-italic-cyr-ext.woff") format('woff');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-italic-viet.woff") format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-italic-latin-ext.woff") format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-italic-latin.woff") format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Color tokens. Every hue is sampled from the signature striped crochet pattern. ---- */
:root {
  /* Base yarn hues */
  --yarn-red: #c0322c;
  --yarn-red-deep: #9c2723;
  --yarn-pink: #f2b3b8;
  --yarn-butter: #f0e096;
  --yarn-sage: #94a26b;
  --yarn-sage-deep: #6f7d4c;
  --yarn-blue: #6da5d3;
  --yarn-navy: #252c3e;
  --yarn-ink: #1b1916;
  --yarn-cream: #faf7f0;
  --yarn-paper: #f3eee2;
  --yarn-white: #fdfcf8;

  /* Neutrals (warm, from cream to ink) */
  --n-0: #fdfcf8;
  --n-1: #faf7f0;
  --n-2: #f3eee2;
  --n-3: #e6dfcf;
  --n-4: #c9c1ae;
  --n-5: #8f887a;
  --n-6: #57524a;
  --n-7: #2e2b26;
  --n-8: #1b1916;

  /* Semantic — text */
  --text-primary: var(--n-8);
  --text-secondary: var(--n-6);
  --text-muted: var(--n-5);
  --text-inverse: var(--n-1);
  --text-accent: var(--yarn-red);

  /* Semantic — surfaces */
  --surface-page: var(--n-1);
  --surface-card: var(--n-0);
  --surface-raised: #ffffff;
  --surface-tint: var(--n-2);
  --surface-ink: var(--n-8);

  /* Semantic — actions */
  --action-primary: var(--yarn-red);
  --action-primary-hover: var(--yarn-red-deep);
  --action-secondary: var(--n-8);
  --focus-ring: var(--yarn-blue);

  /* Borders */
  --border-soft: var(--n-3);
  --border-strong: var(--n-8);

  /* Typography */
  --font-display: "Young Serif", "Georgia", serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --text-hero: 64px;
  --text-h1: 44px;
  --text-h2: 32px;
  --text-h3: 22px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-eyebrow: 13px;
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --ls-eyebrow: 0.14em;

  /* Spacing, radii, shadows, motion */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(27, 25, 22, 0.06);
  --shadow-raised: 0 8px 28px rgba(27, 25, 22, 0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html {
  background: var(--surface-page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--surface-page);
  font-family: var(--font-body);
  color: var(--text-primary);
}
img { max-width: 100%; }
/* <picture> is a layout no-op: display:contents keeps the inner <img> as the
   direct child of .pc-media / .gallery-track / .thumb, so every existing
   `<parent> img` rule below still applies unchanged. */
picture { display: contents; }
button { font-family: var(--font-body); }

/* ---- Motion ---- */
@keyframes lblDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes lblFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lblRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lblWallDrift { from { transform: scale(1.05) translate(-1%, -0.6%); } to { transform: scale(1.12) translate(1%, 0.6%); } }
@media (prefers-reduced-motion: reduce) {
  .lbl-wall-img { animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- Crochet wall backdrop ---- */
.wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Warm tone close to the yarn texture: if the image ever falls short of an
     edge (WebKit resolves the % overscan smaller than Chrome), the sliver
     blends instead of flashing white. */
  background-color: #b9a49b;
}
.lbl-wall-img {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  max-width: none; /* the base img{max-width:100%} clamp shrank the overscan to
                      viewport width, leaving a bare strip on the right edge */
  object-fit: cover;
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
  animation: lblWallDrift 44s ease-in-out infinite alternate;
}
.lbl-wall-img.on { opacity: 1; }
.wall-veil {
  position: absolute;
  inset: 0;
  background: rgba(250, 247, 240, 0.32);
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.app > main { flex: 1; }

/* ---- Shared surfaces ---- */
.glass {
  background: rgba(253, 252, 248, 0.2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(230, 223, 207, 0.4);
  border-radius: var(--radius-md);
}
.rise { animation: lblRiseIn 280ms var(--ease-out) both; }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stripe-band {
  /* round (not repeat-x): WebKit drops the final partial tile, leaving a light
     gap at the right edge on iPhones; round rescales tiles to fit exactly.
     The dark background-color paints any remaining shortfall invisibly. */
  background-color: #221d17;
  background-image: url("../images/crochet-band.jpg");
  background-image: image-set(url("../images/w/crochet-band-1400.webp") type("image/webp"),
                              url("../images/crochet-band.jpg") type("image/jpeg"));
  background-size: auto 400%;
  background-position: center;
  background-repeat: round no-repeat;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-sm { padding: 8px 18px; font-size: 13px; }
.btn-md { padding: 12px 26px; font-size: 15px; }
.btn-lg { padding: 16px 34px; font-size: 16px; }
.btn-primary { background: var(--action-primary); color: #fff; }
.btn-ink { background: var(--surface-ink); color: #fff; }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-full { width: 100%; justify-content: center; }

/* ---- Badges ---- */
.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
}
.badge-ink {
  background: var(--surface-ink);
  color: var(--text-inverse);
  border-color: transparent;
}

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 20; }
.header-bar {
  background: rgba(250, 247, 240, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}
.header-nav { display: flex; gap: 28px; align-items: center; }
.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  padding-bottom: 2px;
  cursor: pointer;
}
.nav-link.active { border-bottom-color: var(--text-primary); }
.nav-bag { display: inline-flex; align-items: center; gap: 6px; }
.nav-bag svg { width: 20px; height: 20px; }
.header-band { height: 6px; }

/* ---- Sections ---- */
.section { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.hero-section { padding: 172px 32px 156px; }
.hero-card { padding: 96px 96px 88px; max-width: 780px; }
.hero-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(54px, 5.6vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 400;
  color: var(--text-primary);
}
.hero-sub {
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  max-width: 420px;
  margin: 0;
}
.hero-actions { display: flex; gap: 16px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.home-band { height: 8px; }

.collection-section { padding: 88px 32px; }
.panel { padding: 56px 48px; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
.panel-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin: 0;
  font-weight: 400;
  color: var(--text-primary);
}
.panel-head span { font-size: 14px; color: var(--text-muted); }
.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.values-section { padding: 0 32px 104px; }
.values-panel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.value h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  margin: 0 0 10px;
  font-weight: 400;
  color: var(--text-primary);
}
.value p { font-size: 15px; line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }

/* ---- Product card ---- */
.product-card {
  font-family: var(--font-body);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.pc-media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-tint);
}
.pc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform var(--dur-med) var(--ease-out);
}
.pc-media .badge { position: absolute; top: 10px; left: 10px; }
.pc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pc-name { font-family: var(--font-display); font-size: 18px; color: var(--text-primary); }
.pc-price { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.pc-note { font-size: 13px; color: var(--text-muted); margin-top: 4px; display: block; }

/* ---- Product page ---- */
.product-main { max-width: 1200px; margin: 0 auto; padding: 36px 32px 96px; width: 100%; }
.product-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 24px;
  flex-wrap: wrap;
}
.back-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}
.layout-switch { display: flex; align-items: center; gap: 10px; }
.layout-switch .eyebrow { letter-spacing: var(--ls-eyebrow); }
.layout-pills { display: flex; gap: 6px; }
.layout-pill {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.layout-pill.active {
  border-color: var(--surface-ink);
  background: var(--surface-ink);
  color: var(--text-inverse);
}

.product-split { padding: 40px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; }
.product-mirrored { padding: 40px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }

.gallery-col { display: flex; flex-direction: column; gap: 14px; }
.gallery {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  aspect-ratio: 4 / 5;
  background: var(--surface-tint);
}
.gallery-track {
  display: flex;
  height: 100%;
  transition: transform 320ms var(--ease-out);
}
.gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(253, 252, 248, 0.88);
  color: var(--text-primary);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-arrow.prev { left: 16px; }
.gallery-arrow.next { right: 16px; }
.gallery-counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(27, 25, 22, 0.55);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.gallery-dots { display: flex; justify-content: center; gap: 8px; }
.gallery-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--n-4);
  transition: background var(--dur-fast) var(--ease-out);
}
.gallery-dot.active { background: var(--n-8); }

.product-info { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.badge-row { display: flex; gap: 8px; }
.product-title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  margin: 0;
  font-weight: 400;
  color: var(--text-primary);
}
.product-price { font-size: 21px; font-weight: 600; color: var(--text-primary); }
.product-swatch {
  width: 56%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--surface-tint);
}
.product-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-mirrored .product-swatch { width: 50%; margin-top: 4px; }
.product-desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }
.buy-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ship-note { font-size: 14px; color: var(--text-muted); }
.stat-list {
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  font-size: 14px;
  line-height: 1.55;
}
.stat-row .t { font-weight: 600; color: var(--text-primary); }
.stat-row .d { color: var(--text-secondary); }

/* Immersive layout */
.product-immersive { display: flex; flex-direction: column; gap: 24px; }
.immersive-wrap { position: relative; }
.immersive-stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  height: 66vh;
  min-height: 480px;
  background: var(--surface-tint);
}
.immersive-stage .gallery-arrow { width: 44px; height: 44px; }
.immersive-stage .gallery-arrow.prev { left: 20px; }
.immersive-stage .gallery-arrow.next { left: 74px; right: auto; }
.immersive-stage .gallery-counter { bottom: 18px; left: 20px; right: auto; }
.immersive-card {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 360px;
  background: rgba(253, 252, 248, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(230, 223, 207, 0.5);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.immersive-card .product-title { font-size: var(--text-h2); }
.immersive-card .product-price { font-size: 19px; }
.immersive-card .product-swatch { width: 46%; }
.immersive-card .buy-row { gap: 12px; }
.immersive-card .ship-note { font-size: 13px; }
.immersive-stats {
  padding: 36px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
}
.immersive-stat { display: flex; flex-direction: column; gap: 8px; }
.immersive-stat .t {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.immersive-stat .d { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* ---- Quantity stepper ---- */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-raised);
}
.stepper button {
  font-size: 18px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1;
}
.stepper button.dim { opacity: 0.35; }
.stepper .val {
  font-size: 15px;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
  color: var(--text-primary);
}

/* ---- About page ---- */
.about-main { max-width: 1200px; margin: 0 auto; padding: 64px 32px 104px; width: 100%; }
.about-card {
  padding: 64px;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  margin: 0;
  font-weight: 400;
  color: var(--text-primary);
}
.about-lead { font-size: var(--text-body-lg); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }
.about-body { font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.about-grid > div {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.about-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--border-soft);
  padding-top: 24px;
  flex-wrap: wrap;
}
.about-foot .eyebrow { font-size: 13px; letter-spacing: var(--ls-eyebrow); }

/* ---- Legal pages (privacy) ----
   Reuses the about card; only the run of headed sections is new. */
.legal-sec { display: flex; flex-direction: column; gap: 10px; }
.legal-h {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  font-weight: 400;
  margin: 0;
  color: var(--text-primary);
}
.legal-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.legal-sec a {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Long URLs and addresses must not push the card wider than the phone. */
  overflow-wrap: break-word;
}
.legal-sec b { color: var(--text-primary); font-weight: 600; }

/* ---- Footer ---- */
.site-footer {
  background-image: url("../images/crochet-ink.jpg");
  background-image: image-set(url("../images/w/crochet-ink-1400.webp") type("image/webp"),
                              url("../images/crochet-ink.jpg") type("image/jpeg"));
  background-size: cover;
  color: var(--text-inverse);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .wordmark { font-family: var(--font-display); font-size: 28px; }
.footer-brand p { font-size: 14px; opacity: 0.8; max-width: 320px; line-height: 1.6; margin: 0; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-col .col-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-4);
  margin-bottom: 4px;
}
.footer-col a { color: var(--text-inverse); text-decoration: none; cursor: pointer; opacity: 0.85; }
.footer-legal { border-top: 1px solid rgba(250, 247, 240, 0.15); }
.footer-legal-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  opacity: 0.7;
  flex-wrap: wrap;
}
.footer-legal-inner .made { letter-spacing: 0.14em; text-transform: uppercase; }
.footer-legal-inner .legal-row { display: flex; align-items: center; gap: 16px; }
.legal-link { color: var(--text-inverse); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---- Cart drawer ---- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 25, 22, 0.35);
  z-index: 40;
  animation: lblFadeIn 200ms ease-out both;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  background: rgba(253, 252, 248, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(230, 223, 207, 0.5);
  z-index: 41;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-raised);
  animation: lblDrawerIn 280ms var(--ease-out) both;
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
}
.cart-head .cart-title { font-family: var(--font-display); font-size: 22px; color: var(--text-primary); }
.cart-head .cart-title .count { font-family: var(--font-body); font-size: 15px; color: var(--text-muted); }
.cart-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-band { height: 6px; }
.cart-items {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart-empty { font-size: 15px; color: var(--text-muted); margin: 0; }
.cart-error {
  font-size: 13px;
  line-height: var(--lh-body);
  color: var(--text-accent);
  margin: 0;
}
.cart-error:empty { display: none; }
.cart-item { display: flex; gap: 16px; align-items: flex-start; }
.cart-item .thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  flex: none;
}
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item .info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cart-item .name { font-family: var(--font-display); font-size: 16px; color: var(--text-primary); }
.cart-item .meta { font-size: 13px; color: var(--text-muted); }
.cart-item .remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}
.cart-item .line-total { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cart-foot {
  border-top: 1px solid var(--border-soft);
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-subtotal { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cart-ship { font-size: 13px; color: var(--text-muted); }

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 45%, transparent);
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive — the design is desktop-first; these adaptations preserve
   its proportions on tablet and phone.
   ========================================================================== */
@media (max-width: 1024px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-section { padding: 120px 32px 104px; }
  .hero-card { padding: 64px 48px 56px; }
  .product-split, .product-mirrored { grid-template-columns: 1fr; gap: 32px; }
  .product-mirrored .gallery-col { order: -1; }
  .values-panel { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 720px) {
  .layout-switch { display: none; }
  .glass { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .header-bar { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .cart-drawer { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(253, 252, 248, 0.78); }
  .header-inner { padding: 0 20px; gap: 16px; }
  .header-nav { gap: 18px; }
  .hero-section { padding: 88px 20px 72px; }
  .hero-card { padding: 40px 28px 36px; }
  .hero-stack { gap: 24px; }
  .hero-title { font-size: clamp(38px, 10.5vw, 54px); }
  .collection-section { padding: 56px 20px; }
  .values-section { padding: 0 20px 72px; }
  .panel { padding: 32px 24px; }
  .product-main { padding: 24px 20px 64px; }
  .product-split, .product-mirrored { padding: 24px; }
  .about-main { padding: 40px 20px 72px; }
  .about-card { padding: 36px 24px; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 32px; }
  .footer-legal-inner { flex-direction: column; gap: 6px; padding: 16px 20px; }
  .immersive-stage { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .immersive-card { position: static; width: 100%; margin-top: 12px; }
  .stat-row { grid-template-columns: 110px 1fr; }
}

@media (max-width: 480px) {
  /* Two-across boutique grid: compact cards, name over price, no blurb */
  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .panel { padding: 24px 12px; }
  .panel-head { margin-bottom: 20px; padding: 0 6px; }
  .product-card { padding: 8px 8px 12px; gap: 8px; }
  .pc-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .pc-name { font-size: 15px; }
  .pc-price { font-size: 13px; }
  .pc-note { display: none; }
  .cart-drawer { width: 100vw; max-width: 100vw; border-left: none; }
}

/* ---- Touch & pointer ---- */
html { -webkit-tap-highlight-color: transparent; }
button, .btn, a, .product-card { touch-action: manipulation; }
.gallery, .immersive-stage { touch-action: pan-y; }

/* Hover affordances only where a real pointer exists (avoids sticky hover on touch) */
@media (hover: hover) {
  .btn-primary:hover { background: var(--action-primary-hover); }
  .btn-ink:hover { background: var(--surface-ink); }
  .btn-secondary:hover { background: var(--surface-tint); }
  .btn-ghost:hover { background: var(--surface-tint); }
  .product-card:hover .pc-media img { transform: scale(1.03); }
  .gallery-arrow:hover { background: #ffffff; }
  .footer-col a:hover { opacity: 1; }
  .cart-close:hover { background: var(--surface-tint); }
}

/* Press feedback on tap */
.btn:active { transform: scale(0.98); }
.gallery-arrow:active, .cart-close:active { background: var(--surface-tint); }
.product-card:active .pc-media img { transform: scale(1.03); }
.footer-col a:active { opacity: 1; }

/* Finger-sized hit areas on touch devices; visuals unchanged */
@media (pointer: coarse) {
  .nav-link { padding: 14px 6px; margin: -14px -6px; border-bottom: none; }
  .nav-link.active { text-decoration: underline; text-underline-offset: 5px; }
  .back-link { padding: 12px 10px; margin: -12px -10px; }
  .footer-col a { padding: 7px 0; margin: -5px 0; }
  .legal-link { padding: 14px 6px; margin: -14px -6px; }
  .gallery-arrow { width: 44px; height: 44px; }
  .stepper button { width: 44px; height: 44px; }
  .cart-close { width: 44px; height: 44px; }
  .cart-item .remove { padding: 10px 10px 10px 0; margin: -10px -10px -10px 0; }
  .gallery-dots { gap: 0; }
  .gallery-dot, .gallery-dot.active { width: 40px; height: 40px; background: transparent; position: relative; }
  .gallery-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--n-4);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .gallery-dot.active::before { background: var(--n-8); }
}


/* ==========================================================================
   Customizer
   ========================================================================== */
.design-main { max-width: 1200px; margin: 0 auto; padding: 36px 32px 96px; width: 100%; }
.design-wrap {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 40px;
  padding: 32px;
  /* Far more opaque than the standard .glass surface. The customizer is a tool
     with dense small controls, and .glass at 0.2 leaves them sitting on a busy
     photograph of crochet -- legible enough for a headline, not for a palette. */
  background: rgba(253, 252, 248, 0.82);
}

/* ---- Preview ---- */
.design-preview {
  position: sticky;
  top: 92px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bag-stage {
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px;
}
.bag-svg { display: block; width: 100%; height: auto; }
.bag-stage .bag-svg { max-height: 62vh; }
/* The bag is painted by dragging *vertically*, which is also the page-scroll
   gesture -- so the stage has to claim the gesture outright. The palette below
   it stays scrollable, and on phones the stage is capped at 40vh so there is
   always somewhere else to put your thumb. */
.design-preview .bag-svg { touch-action: none; }
.bag-row, .bag-handle { cursor: pointer; }
.bag-row:focus-visible,
.bag-handle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}
.design-caption { display: flex; flex-direction: column; gap: 4px; }
.design-name {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--text-primary);
}
.design-sum { font-size: 14px; color: var(--text-muted); margin: 0; }

/* ---- Controls ---- */
.design-controls { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.dc-block { display: flex; flex-direction: column; gap: 12px; }
.dc-head {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  margin: 0;
  color: var(--text-primary);
}
.dc-hint { font-size: 14px; color: var(--text-secondary); margin: -4px 0 0; line-height: var(--lh-body); }

.preset-row, .charm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-btn, .charm-btn {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.preset-wild { border-style: dashed; color: var(--text-accent); }
.charm-btn.on {
  background: var(--surface-ink);
  color: var(--text-inverse);
  border-color: var(--surface-ink);
}
.preset-btn:focus-visible, .charm-btn:focus-visible, .swatch:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.brush-now {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
}
.brush-now b { color: var(--text-primary); }
.brush-chip {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--yarn);
  border: 1px solid rgba(27, 25, 22, 0.2);
  display: inline-block;
  flex: none;
}

.palette-family { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.palette-head {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 9px 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-family: var(--font-body);
  cursor: pointer;
}
.swatch-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--yarn);
  border: 1px solid rgba(27, 25, 22, 0.18);
  flex: none;
}
.swatch-name { font-size: 11px; color: var(--text-secondary); line-height: 1.2; text-align: center; }
.swatch.on {
  border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.swatch.on .swatch-name { color: var(--text-primary); font-weight: 600; }

.initial-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.initial-row label { font-size: 14px; color: var(--text-secondary); }
.initial-in {
  width: 56px;
  min-height: 44px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.initial-in:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.design-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.design-actions .btn-lg { margin-left: auto; }
.btn.dim { opacity: 0.45; cursor: default; }
.design-note { font-size: 13px; color: var(--text-accent); margin: 0; min-height: 1em; }
/* The exact words that land on Lola's order, shown to the customer so there is
   no gap between what they designed and what gets made. */
.design-spec {
  font-size: 13px;
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-tint);
  border: 1px solid var(--border-soft);
}
.btn-makeyours { align-self: flex-start; }

/* ---- Design tile in the collection grid ---- */
.design-tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.design-tile-media .bag-svg { width: 100%; height: 100%; }

/* ---- Designed bag in the cart ---- */
.thumb-design {
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-design .bag-svg { width: 100%; height: 100%; }
.meta-spec { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 1024px) {
  .design-wrap { grid-template-columns: 1fr; gap: 22px; }
  .design-preview { position: static; }
}

@media (max-width: 720px) {
  .design-main { padding: 24px 20px 64px; }
  .design-wrap { padding: 20px; }
  /* Keep the bag on screen while the palette scrolls under it. Capped at 40vh
     so there is always palette visible below the fold. */
  .design-wrap { background: rgba(253, 252, 248, 0.95); }
  .design-preview {
    position: sticky;
    top: 76px;
    z-index: 5;
    background: var(--surface-card);
    padding-bottom: 12px;
    margin: -8px -8px 0;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 1px solid var(--border-soft);
  }
  .bag-stage { display: flex; justify-content: center; }
  /* Height drives, width follows the intrinsic ratio -- so the bag always fits
     the sticky band and never pushes the palette off screen. */
  .bag-stage { padding: 6px; }
  .bag-stage .bag-svg { width: auto; height: 34vh; max-width: 100%; }
  .design-name { font-size: 26px; }
  .design-actions .btn-lg { margin-left: 0; width: 100%; }
}

@media (max-width: 480px) {
  .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .design-wrap { padding: 16px; }
}

@media (hover: hover) {
  .preset-btn:hover, .charm-btn:hover { border-color: var(--border-strong); }
  .swatch:hover { border-color: var(--border-strong); }
  .bag-row:hover, .bag-handle:hover { filter: brightness(1.07); }
}

/* ---- Low-power mode ------------------------------------------------------
   Applied to <html> by the boot script in index.html when the device reports
   Save-Data / a slow network / little memory, and by main.js when the first
   second of animation actually drops frames (the only signal Safari gives).

   backdrop-filter over a full-screen photograph is by far the most expensive
   thing on this page -- it re-blurs a large region every frame. The wall drift
   is second. Both are traded for solid surfaces, which have to be far more
   opaque than the glass ones to stay legible over the busy crochet wall.
   -------------------------------------------------------------------------- */
html.low-power .glass {
  background: rgba(253, 252, 248, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.low-power .header-bar {
  background: rgba(250, 247, 240, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.low-power .cart-drawer {
  background: rgba(253, 252, 248, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.low-power .immersive-card {
  background: rgba(253, 252, 248, 0.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.low-power .lbl-wall-img { animation: none; }
/* The crossfade is the one motion worth keeping -- it is a single opacity
   transition on a composited layer -- but shorten it so it ends sooner. */
html.low-power .lbl-wall-img { transition-duration: 450ms; }