/* ==========================================================================
   JAMIE STITCHES — Bone & Ink
   Drop-agnostic chrome. Products carry the color. Chrome is warm-neutral
   so any colorway (summer, earth-tones, winter pastels) sits on it cleanly.
   ========================================================================== */

/* ----- DESIGN TOKENS ------------------------------------------------------ */
:root {
  /* Core palette — warm bone + near-black, no fixed accent. */
  --bone:         #F5F1EA;    /* primary background */
  --bone-deep:    #EDE7DB;    /* surfaces (cards, panels) */
  --bone-warm:    #E8E2D5;    /* hover surfaces */
  --ink:          #1A1A1A;    /* primary text + borders */
  --ink-soft:     #4A4A4A;    /* secondary text */
  --white:        #FFFFFF;

  /* Legacy accent tokens — kept so existing selectors compile, but
     remapped to neutrals so the old summer palette no longer fights
     a drop. If a drop wants per-drop accent in the chrome later, swap
     just one token (--hot-pink) and the buttons inherit it. */
  --cream:        var(--bone);
  --cream-deep:   var(--bone-deep);
  --candy:        var(--bone-warm);
  --bubblegum:    #2A2A2A;
  --hot-pink:     var(--ink);
  --peach:        var(--bone-warm);
  --sun:          var(--ink);
  --tangerine:    var(--ink);
  --sky:          var(--bone-warm);
  --ocean:        var(--ink);
  --lavender:     var(--bone-warm);
  --violet:       var(--ink);
  --grape:        var(--ink);

  /* Functional */
  --bg:          var(--bone);
  --fg:          var(--ink);
  --fg-soft:     var(--ink-soft);
  --line:        rgba(26, 26, 26, 0.14);

  /* Type stack */
  --display: "Fraunces", ui-serif, Georgia, serif;
  --hand:    "Caveat", "Brush Script MT", cursive;
  --body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Motion */
  --ease:    cubic-bezier(.2, .8, .2, 1);
  --t-fast:  140ms var(--ease);
  --t:       240ms var(--ease);
  --t-slow:  520ms var(--ease);

  /* Radii */
  --r-sm: 10px;
  --r:    20px;
  --r-lg: 32px;
  --r-xl: 48px;
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* No atmospheric paint layer — the bone background carries the page on its
   own and stays neutral so any drop's colorway can ride on top without
   color clash. (Was four radial gradients in old summer palette.) */

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

a {
  color: var(--ink);
  text-decoration-color: var(--bubblegum);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--ink-soft); }

button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--ink); color: var(--bone); }

.visually-hidden {
  position: absolute !important; height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ----- BUTTONS ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t-fast);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.btn--primary { --btn-bg: var(--hot-pink); --btn-fg: var(--cream); }
.btn--primary:hover { --btn-bg: var(--bubblegum); }

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn--ghost:hover { --btn-bg: var(--cream-deep); }

.btn--lg { padding: 20px 30px; font-size: 16px; }
.btn--sm { padding: 12px 20px; font-size: 13px; }

/* ----- SCALLOP / CROCHET-EDGE DIVIDERS ------------------------------------ */
.scallop {
  display: block; width: 100%; height: 32px;
}
.scallop--bottom { color: var(--cream-deep); margin-top: -1px; }
.scallop--top    { color: var(--ink); margin-bottom: -1px; }

/* ==========================================================================
   TICKER (yarn marquee)
   ========================================================================== */
.ticker {
  position: relative;
  z-index: 5;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  font-family: var(--body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 12.5px;
  padding: 11px 0;
}
.ticker__track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: ticker 38s linear infinite;
  padding-left: 36px;
}
.ticker__track > span { display: inline-block; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 247, 235, 0.94);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
}

.brand {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink);
}
.brand__mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--ink), 4px 4px 0 var(--ink);
  transition: transform var(--t);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }
.brand__wordmark {
  display: flex; flex-direction: column; line-height: .82;
}
.brand__top {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "SOFT" 50, "opsz" 90;
  font-size: 26px;
  font-style: italic;
  color: var(--ink);
}
.brand__bot {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink-soft);
  margin-top: -2px;
  margin-left: 18px;
  transform: rotate(-3deg);
}

.primary-nav {
  display: flex; gap: 28px;
  justify-content: center;
  font-weight: 500;
  font-size: 15px;
}
.primary-nav a {
  text-decoration: none;
  position: relative;
  padding: 4px 2px;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 8px;
  background: radial-gradient(circle at 4px 4px, var(--hot-pink) 2px, transparent 2.5px) 0 0 / 8px 8px;
  opacity: 0;
  transition: opacity var(--t);
}
.primary-nav a:hover::after { opacity: 1; }

.header-actions { display: inline-flex; gap: 8px; align-items: center; }

.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  position: relative;
  transition: transform var(--t-fast), background var(--t-fast);
  box-shadow: 3px 3px 0 var(--ink);
}
.icon-btn:hover { background: var(--candy); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.icon-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }

.icon-btn--cart .cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--hot-pink); color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

.icon-btn--menu { display: none; flex-direction: column; gap: 4px; }
.icon-btn--menu span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 28px clamp(80px, 8vw, 120px);
  max-width: 1320px;
  margin: 0 auto;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

/* — copy side */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  margin: 0 0 22px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hero__eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hot-pink);
  box-shadow: 0 0 0 4px rgba(255,61,140,.25);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }

.hero__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 900;
  font-size: clamp(58px, 10vw, 132px);
  line-height: .88;
  letter-spacing: -.025em;
  margin: 0 0 26px;
  color: var(--ink);
}
.hero__line { display: block; }
.hero__line--1 { color: var(--ink); }
.hero__line--2 {
  color: var(--hot-pink);
  font-style: italic;
  margin-left: clamp(20px, 6vw, 90px);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hero__line--3 { color: var(--ocean); }
.hero__line--4 {
  color: var(--sun);
  margin-left: clamp(40px, 9vw, 140px);
  display: inline-block;
  position: relative;
}
.hero__line--4 em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }
.squiggle {
  position: absolute;
  left: 6%; right: 6%;
  bottom: -10px;
  width: 88%; height: 18px;
  color: var(--violet);
  pointer-events: none;
}

.hero__lede {
  max-width: 480px;
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0 0 30px;
}
.hero__lede a {
  text-decoration-color: var(--violet);
}

.hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 40px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  max-width: 480px;
}
.hero__meta strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  font-style: italic;
  color: var(--hot-pink);
  line-height: 1;
}
.hero__meta span {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* — media side: layered polaroids + stickers */
.hero__media {
  position: relative;
  height: clamp(440px, 60vw, 640px);
}

.polaroid {
  background: var(--white);
  padding: 12px 12px 50px;
  border-radius: 4px;
  margin: 0;
  box-shadow: 0 18px 38px rgba(37,23,68,.18);
}
.polaroid img,
.polaroid__video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--cream-deep);
}

/* Polaroid that contains a video — keep the frame identical, but tag it
   with a tiny "live" indicator so visitors notice the motion. */
.polaroid--video { position: relative; }
.polaroid__live {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 2;
}
.polaroid__live::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hot-pink);
  margin-right: 4px;
  vertical-align: 1px;
  animation: pulse 2s var(--ease) infinite;
}
.polaroid figcaption {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--hand);
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
}

.hero__media .polaroid { position: absolute; }
.polaroid--lg {
  width: 58%;
  top: 0; right: 4%;
  transform: rotate(4deg);
  z-index: 2;
}
.polaroid--md {
  width: 42%;
  bottom: 6%;
  left: 0;
  transform: rotate(-7deg);
  z-index: 3;
}
.polaroid--sm {
  width: 32%;
  top: 38%; right: -4%;
  transform: rotate(11deg);
  z-index: 1;
}
/* (removed expensive hover transform on giant polaroids) */

/* — stickers */
.sticker {
  position: absolute;
  z-index: 4;
  filter: drop-shadow(3px 3px 0 var(--ink));
  user-select: none;
  pointer-events: none;
}
.sticker--badge {
  width: 130px; height: 130px;
  top: -16px; left: -10px;
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  animation: spin 22s linear infinite;
  will-change: transform;
}
.sticker--badge svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }

.sticker--tag {
  font-family: var(--display); font-weight: 900; font-style: italic;
  font-size: 20px; line-height: 1;
  text-transform: uppercase;
  background: var(--bubblegum); color: var(--cream);
  padding: 18px 22px 18px 32px;
  bottom: 26%; right: 0;
  border: 3px solid var(--ink);
  border-radius: 6px 24px 24px 6px;
  transform: rotate(-9deg);
  text-align: center;
}
.sticker--tag .sticker__hole {
  position: absolute; left: 12px; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  transform: translateY(-50%);
}

.sticker--blob {
  width: 100px; height: 100px;
  bottom: -10px; right: 12%;
  color: var(--ocean);
  display: grid; place-items: center;
  transform: rotate(8deg);
  animation: bob 5s var(--ease) infinite;
}
.sticker--blob svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticker--blob span {
  position: relative;
  font-family: var(--display); font-style: italic; font-weight: 900;
  font-size: 18px; color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .04em;
}
@keyframes bob {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-6px); }
}

/* hero scallop divider */
.hero .scallop--bottom { color: var(--cream-deep); }

/* ==========================================================================
   SECTION HEADS / common
   ========================================================================== */
.section-head { margin: 0 0 36px; max-width: 720px; }
.section-head__kicker {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink-soft);
  margin: 0 0 4px;
  line-height: 1;
  transform: rotate(-2deg);
  display: inline-block;
}
.section-head__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.section-head__title em {
  color: var(--ink-soft);
  font-style: italic;
  font-weight: 400;
}
.section-head__lede {
  margin: 0;
  color: var(--ink-soft);
  max-width: 60ch;
}
.section-head--inline {
  display: flex; align-items: end; justify-content: space-between;
  gap: 20px;
}
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head--center .section-head__kicker { display: inline-block; }

/* ==========================================================================
   CATEGORIES
   ========================================================================== */
.categories {
  position: relative;
  padding: clamp(80px, 10vw, 130px) 28px;
  max-width: 1320px;
  margin: 0 auto;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.cat-card {
  position: relative;
  text-align: left;
  padding: 28px 24px 110px;
  min-height: 280px;
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--body);
  overflow: hidden;
}
.cat-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 10px 10px 0 var(--ink);
}
.cat-card:active { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--ink); }

.cat-card__no {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .05em;
  opacity: .5;
}
.cat-card h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: .95;
  margin: 8px 0 8px;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Long labels (e.g. "Accessories") get a tighter cap to never overflow the card */
.cat-card h3.cat-card__title--long {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -.01em;
}
.cat-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 22ch;
}
.cat-card__cta {
  position: absolute;
  bottom: 24px; left: 24px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 999px;
  transition: background var(--t-fast);
}
.cat-card:hover .cat-card__cta { background: var(--hot-pink); }

/* Decorative shapes per card */
.cat-card::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  right: -90px; bottom: -90px;
  opacity: .9;
  transition: transform var(--t-slow);
}
.cat-card:hover::after { transform: scale(1.15) rotate(20deg); }

/* All category cards share the same bone surface — differentiation is by
   number, title, and decorative blob shape, not by hue. */
.cat-card--bottoms,
.cat-card--tops,
.cat-card--accessories,
.cat-card--custom            { background: var(--bone-deep); }
.cat-card--bottoms::after,
.cat-card--tops::after,
.cat-card--accessories::after,
.cat-card--custom::after     { background: var(--ink); opacity: .08; }

/* ==========================================================================
   FEATURED GRID
   ========================================================================== */
.featured {
  padding: clamp(40px, 6vw, 80px) 28px clamp(80px, 10vw, 120px);
  max-width: 1320px;
  margin: 0 auto;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.product-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  padding: 14px 14px 18px;
  display: flex; flex-direction: column;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--t), box-shadow var(--t);
  overflow: hidden;
}
.product-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: 8px 8px 0 var(--ink);
}
.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream-deep);
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__cat {
  position: absolute; top: 10px; left: 10px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em;
  padding: 5px 10px;
}
.product-card__price-tag {
  position: absolute; top: 10px; right: 10px;
  background: var(--ink);
  color: var(--bone);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  padding: 6px 12px;
  transform: rotate(6deg);
}
.product-card__body { padding: 14px 4px 0; flex: 1; display: flex; flex-direction: column; }
.product-card__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "SOFT" 80;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 6px;
}
.product-card__desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  flex: 1;
}
.product-card__add {
  align-self: flex-start;
  font-size: 13px;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.about__media {
  position: relative;
  height: clamp(420px, 50vw, 560px);
}
.about__media .polaroid {
  position: absolute;
}
.polaroid--rotL { transform: rotate(-6deg); }
.polaroid--rotR { transform: rotate(7deg); }
.about__media .polaroid--md {
  width: 70%; top: 0; left: 0;
  z-index: 2;
}
.about__media .polaroid--sm {
  width: 48%; bottom: 0; right: 0;
  z-index: 1;
}
/* Video polaroid is always the lead element, regardless of size or DOM order */
.about__media .polaroid--video {
  z-index: 3;
  box-shadow: 0 22px 44px rgba(37, 23, 68, .26);
}
.about__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(42px, 6vw, 84px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 4px 0 22px;
}
.about__copy p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 52ch;
}

/* ==========================================================================
   CUSTOM STRIP
   ========================================================================== */
.custom-strip {
  margin: clamp(40px, 6vw, 80px) auto;
  max-width: 1280px;
  padding: 0 28px;
}
.custom-strip__inner {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  border: 3px solid var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 64px);
  box-shadow: 10px 10px 0 var(--ink);
  text-align: center;
  overflow: hidden;
}
.custom-strip__inner::before,
.custom-strip__inner::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 3px dashed rgba(255,247,235,.6);
}
.custom-strip__inner::before { top: -110px; left: -110px; }
.custom-strip__inner::after  { bottom: -110px; right: -110px; }
.custom-strip h2 {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(38px, 6vw, 76px);
  line-height: .9;
  margin: 0 0 16px;
}
.custom-strip h2 em { color: var(--bone-warm); font-style: italic; }
.custom-strip p {
  max-width: 50ch;
  margin: 0 auto 28px;
  font-size: 17px;
  opacity: .92;
}

/* ==========================================================================
   DROPS / SUBSCRIBE
   ========================================================================== */
.drops {
  max-width: 1280px;
  margin: clamp(40px, 6vw, 100px) auto;
  padding: 0 28px;
}
.drops__panel {
  position: relative;
  background: var(--cream-deep);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
  box-shadow: 8px 8px 0 var(--ink);
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
}
.drops__panel::before {
  /* Gradient halos removed in the Bone & Ink palette — the panel reads on
     its own surface contrast against the bone background. */
  display: none;
}
.drops__panel > * { position: relative; z-index: 1; }

.sticker--corner {
  position: absolute !important;
  top: -22px; right: -16px;
  background: var(--hot-pink);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 50%;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 900; font-style: italic;
  text-transform: uppercase;
  font-size: 24px;
  transform: rotate(14deg);
  box-shadow: 4px 4px 0 var(--ink);
  pointer-events: none;
  z-index: 2;
}

.drops__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(42px, 6vw, 80px);
  line-height: .9;
  margin: 8px 0 14px;
  color: var(--ink);
}
.drops__lede {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 52ch;
  margin: 0 0 26px;
}

.drops-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 540px;
}
.drops-form__input {
  font-family: var(--body);
  font-size: 16px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  width: 100%;
  box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow var(--t-fast);
}
.drops-form__input:focus {
  outline: none;
  box-shadow: 5px 5px 0 var(--ink);
}
.drops-form__msg {
  margin: 14px 0 0;
  font-size: 14px;
  min-height: 22px;
}
.drops-form__msg.success { color: var(--ink); font-weight: 700; }
.drops-form__msg.error   { color: #B6234C; font-weight: 700; }
.drops__fineprint {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) 28px;
}
.contact .section-head { margin-left: auto; margin-right: auto; text-align: center; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.contact-form {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 8px 8px 0 var(--ink);
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 6px; }
.field label {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  width: 100%;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--candy);
  outline-offset: 2px;
}
.contact-form__msg { font-size: 14px; min-height: 22px; margin: 0; }
.contact-form__msg.success { color: var(--ink); font-weight: 700; }
.contact-form__msg.error   { color: #B6234C; font-weight: 700; }

.contact__aside {
  position: relative;
  padding: 8px 4px;
}
.contact__aside h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 16px;
  color: var(--ink);
}
.contact__line {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
}
.contact__line strong {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.contact__line a, .contact__line span {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.contact__photo {
  width: 75%;
  margin: 24px auto 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  margin-top: 60px;
}
.site-footer__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 28px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
}
.site-footer__brand img {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--white);
  padding: 6px;
}
.site-footer__brand p {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  margin: 14px 0 0;
  color: var(--bone-warm);
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.site-footer__nav h4 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bone-warm);
  margin: 0 0 12px;
}
.site-footer__nav a {
  display: block;
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
  padding: 4px 0;
  opacity: .9;
}
.site-footer__nav a:hover { color: var(--candy); }
.site-footer__legal {
  border-top: 1px solid rgba(255,247,235,.18);
  text-align: center;
  font-size: 13px;
  padding: 22px 24px;
  margin: 0;
  color: rgba(255,247,235,.7);
}

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */
.search-overlay {
  position: fixed; inset: 0;
  display: none;
  z-index: 100;
  background: rgba(37, 23, 68, 0.72);
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  overflow-y: auto;
}
.search-overlay.is-open { display: flex; animation: fadeIn var(--t); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.search-overlay__panel {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 760px;
  box-shadow: 12px 12px 0 var(--ink);
  overflow: hidden;
}
.search-overlay__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px;
  border-bottom: 2px solid var(--ink);
  background: var(--white);
}
.search-overlay__bar input {
  flex: 1;
  border: 0; background: transparent;
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
  font-weight: 600;
}
.search-overlay__bar input:focus { outline: none; }
.search-overlay__bar input::placeholder { color: var(--ink-soft); opacity: .55; }

.search-overlay__results {
  padding: 14px 8px 22px;
  max-height: 60vh;
  overflow-y: auto;
}
.search-hint {
  margin: 16px;
  color: var(--ink-soft);
  font-family: var(--hand);
  font-size: 24px;
  font-weight: 700;
}

.search-category-group { padding: 10px 14px; }
.search-category-label {
  margin: 6px 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
/* Uniform-width result rows: fixed image col + flex text col + fixed price col */
.search-result-item {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 84px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 2px solid transparent;
  min-height: 80px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.search-result-item + .search-result-item { margin-top: 4px; }
.search-result-item:hover,
.search-result-item:focus-visible {
  background: var(--cream-deep);
  border-color: var(--ink);
  outline: none;
}
.search-result-img {
  width: 56px; height: 56px;
  border-radius: 12px; object-fit: cover;
  border: 2px solid var(--ink);
}
.search-result-info { min-width: 0; }
.search-result-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-desc {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-price {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  color: var(--ink);
  font-size: 18px;
  text-align: right;
  white-space: nowrap;
}
.search-result-item mark {
  background: var(--bone-warm); color: var(--ink);
  padding: 0 3px; border-radius: 3px;
  font-weight: 700;
}
.search-no-results {
  padding: 30px 20px; text-align: center; color: var(--ink-soft);
  font-family: var(--display); font-style: italic; font-size: 18px;
}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(100%, 460px);
  background: var(--cream);
  border-left: 3px solid var(--ink);
  box-shadow: -16px 0 40px rgba(37,23,68,.18);
  z-index: 110;
  transform: translateX(100%);
  transition: transform var(--t-slow);
  display: flex; flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px;
  border-bottom: 2px solid var(--ink);
  background: var(--candy);
}
.cart-drawer__head h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
  margin: 0;
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.cart-empty {
  margin: 30px 10px;
  font-family: var(--hand);
  font-size: 26px;
  color: var(--ink-soft);
  text-align: center;
}
.cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  gap: 14px;
  padding: 14px 6px;
  border-bottom: 1px dashed var(--line);
  align-items: center;
}
.cart-item-img {
  width: 64px; height: 64px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  object-fit: cover;
}
.cart-item-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  margin: 0 0 2px;
  line-height: 1.15;
}
.cart-item-price {
  font-size: 13px; color: var(--ink-soft); margin: 0;
}
.cart-item-controls {
  display: flex; align-items: center; gap: 4px;
}
.cart-qty-btn,
.cart-remove-btn {
  width: 28px; height: 28px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.cart-qty-btn:hover { background: var(--candy); }
.cart-remove-btn:hover { background: var(--bubblegum); color: var(--cream); }
.cart-qty {
  width: 22px; text-align: center; font-weight: 700;
}

.cart-drawer__foot {
  border-top: 2px solid var(--ink);
  padding: 22px;
  background: var(--white);
}
.cart-totals {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px;
  margin-bottom: 4px;
}
.cart-totals strong {
  font-family: var(--display);
  font-style: italic; font-weight: 900;
  font-size: 28px;
  color: var(--ink);
}
.cart-foot-note { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; }
.cart-secure { font-size: 12px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }
#cart-checkout { width: 100%; justify-content: center; }

/* ==========================================================================
   PRODUCT MODAL
   ========================================================================== */
.product-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(37,23,68,.72);
  padding: 30px 16px;
  z-index: 105;
  overflow-y: auto;
}
.product-modal.is-open { display: flex; animation: fadeIn var(--t); }
.product-modal__panel {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 12px 12px 0 var(--ink);
  width: 100%;
  max-width: 1100px;
  overflow: hidden;
}
.product-modal__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px;
  padding: 26px 30px;
  border-bottom: 2px solid var(--ink);
  background: var(--candy);
}
.product-modal__head h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(34px, 5vw, 56px);
  margin: 0;
  line-height: 1;
}
.product-modal__grid {
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.product-modal__empty {
  padding: 40px 30px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
}

/* ==========================================================================
   ITEM DETAIL MODAL — click a product card to enlarge + navigate
   shop.html only. Photo on the left, info + CTA on the right, with
   prev/next arrows. ◂ / ▸ arrow keys and ESC are wired in main.js.
   ========================================================================== */
.item-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(26, 26, 26, 0.72);
  z-index: 115;
  padding: 16px;
  overflow-y: auto;
}
.item-modal.is-open { display: flex; animation: fadeIn var(--t); }

.item-modal__panel {
  position: relative;
  background: var(--bone);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 14px 14px 0 var(--ink);
  width: 100%;
  max-width: 960px;
  /* Always fits inside the viewport with our 16px padding accounted for. */
  max-height: calc(100vh - 32px);
  overflow: hidden;
  animation: pop var(--t) var(--ease);
  display: flex;
  flex-direction: column;
}

.item-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.item-modal__media {
  position: relative;
  margin: 0;
  background: var(--bone-deep);
  overflow: hidden;
  border-right: 2px solid var(--ink);
  /* Portrait-ish aspect for product photos; capped to row height so it never
     drives the panel taller than the viewport. */
  aspect-ratio: 3 / 4;
  max-height: 100%;
}
.item-modal__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.item-modal__info {
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-width: 0;
}

.item-modal__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.item-modal__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.05;
  margin: 0 0 4px;
  color: var(--ink);
}
.item-modal__price {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 16px;
}
.item-modal__desc {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 28px;
  flex: 1;
}
.item-modal__add {
  align-self: stretch;
  justify-content: center;
}
.item-modal__counter {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 18px 0 0;
  text-align: center;
  font-weight: 600;
}

.item-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.94);
}

/* Prev/next live INSIDE the photo area now, so they're always anchored to
   the image regardless of viewport size — never clipped at the edges.
   Translucent ink-on-glass treatment reads on any photo color. */
.item-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(26, 26, 26, 0.55);
  color: var(--bone);
  border: 1.5px solid rgba(245, 241, 234, 0.6);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast), transform var(--t-fast);
  padding: 0;
}
.item-modal__nav:hover {
  background: rgba(26, 26, 26, 0.88);
  transform: translateY(-50%) scale(1.06);
}
.item-modal__nav:active {
  transform: translateY(-50%) scale(0.96);
}
.item-modal__nav[hidden] { display: none; }
.item-modal__nav--prev { left: 12px; }
.item-modal__nav--next { right: 12px; }

/* Card-level signal that the whole card is now interactive (not just the
   Add-to-bag button). */
body[data-page="shop"] .product-card { cursor: pointer; }

@media (max-width: 760px) {
  .item-modal { padding: 10px; }
  /* Stack: photo on top (constrained so info stays visible), info below. */
  .item-modal__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .item-modal__media {
    aspect-ratio: 4 / 5;
    max-height: 52vh;
    border-right: none;
    border-bottom: 2px solid var(--ink);
  }
  .item-modal__info { padding: 22px 20px; }
  .item-modal__nav {
    width: 38px; height: 38px;
  }
  .item-modal__nav--prev { left: 10px; }
  .item-modal__nav--next { right: 10px; }
}

/* ==========================================================================
   ADD-TO-CART CONFIRMATION MODAL
   ========================================================================== */
.add-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(37,23,68,.55);
  z-index: 115;
  padding: 20px;
}
.add-modal.is-open { display: flex; animation: fadeIn var(--t); }

.add-modal__panel {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--ink);
  width: 100%; max-width: 460px;
  padding: 28px 26px 24px;
  animation: pop var(--t) var(--ease);
}
@keyframes pop {
  from { transform: translateY(8px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.add-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
}

.add-modal__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.add-modal__check {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--hot-pink);
  color: var(--cream);
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
  border: 2px solid var(--ink);
}
.add-modal__kicker {
  margin: 0;
  font-family: var(--hand);
  color: var(--ink-soft);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.add-modal__body {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r);
  margin-bottom: 18px;
}
.add-modal__img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid var(--ink);
}
.add-modal__name {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
}
.add-modal__price {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  color: var(--ink);
  font-size: 18px;
}

.add-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.add-modal__actions .btn { width: 100%; justify-content: center; padding: 14px 16px; font-size: 13px; }

@media (max-width: 480px) {
  .add-modal__actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--bubblegum);
  font-weight: 600; font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  z-index: 200;
}
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   MOBILE MENU — side drawer with translucent backdrop
   The container (.mobile-menu) is the page-darkening backdrop; clicks on it
   that don't hit the panel close the menu. The actual menu chrome lives in
   .mobile-menu__panel and slides in from the left.
   ========================================================================== */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  pointer-events: none;
  transition: background var(--t), visibility 0s linear var(--t-slow);
}
.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.42);
  transition: background var(--t), visibility 0s linear 0s;
}

.mobile-menu__panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 360px);
  background: rgba(26, 26, 26, 0.86);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  padding: 26px 28px 28px;
  transform: translateX(-100%);
  transition: transform var(--t-slow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
  border-right: 1px solid rgba(245, 241, 234, 0.12);
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.icon-btn--menu-close {
  align-self: flex-end;
  background: rgba(245, 241, 234, 0.12);
  border-color: rgba(245, 241, 234, 0.4);
  color: var(--bone);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
}
.icon-btn--menu-close:hover { background: rgba(245, 241, 234, 0.22); }

.mobile-menu__nav {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 24px;
}
.mobile-menu__nav a {
  font-family: var(--display);
  font-style: italic; font-weight: 900;
  font-size: 38px;
  color: var(--bone);
  text-decoration: none;
  line-height: 1.05;
  padding: 6px 0;
  transition: color var(--t-fast), transform var(--t-fast);
}
.mobile-menu__nav a:hover {
  color: var(--bone-warm);
  transform: translateX(4px);
}
.mobile-menu__contact {
  margin-top: auto;
  font-family: var(--hand);
  font-size: 22px;
  color: var(--bone-warm);
}
.mobile-menu__contact a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 234, 0.3);
}
.mobile-menu__contact a:hover { border-bottom-color: var(--bone); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { height: 460px; max-width: 560px; margin: 0 auto; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; margin: 0 auto; }
  .contact__grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .primary-nav { display: none; }
  .icon-btn--menu { display: inline-flex; }

  /* Prevent rotated stickers / polaroids from causing horizontal scroll */
  .hero, .about, .categories, .featured, .contact { overflow: clip; }

  .hero__title { font-size: clamp(48px, 13vw, 76px); }
  .hero__line--2 { margin-left: 24px; }
  .hero__line--4 { margin-left: 48px; }
  .hero__meta { grid-template-columns: 1fr 1fr; }

  /* Keep the small polaroid inside the visible area */
  .polaroid--sm { right: 2%; }

  .cat-card { padding: 22px 18px 100px; min-height: 240px; }

  .featured-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .product-card { padding: 10px 10px 14px; }
  .product-card__name { font-size: 18px; }

  .drops-form { grid-template-columns: 1fr; }

  .site-footer__nav { grid-template-columns: 1fr 1fr; }

  .sticker--badge { width: 96px; height: 96px; top: -20px; left: -8px; }
  .sticker--tag { font-size: 16px; padding: 14px 18px 14px 28px; }
  .sticker--blob { width: 76px; height: 76px; }
  .sticker--blob span { font-size: 14px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .site-header__row { padding: 12px 16px; gap: 10px; }
  .brand__mark { width: 48px; height: 48px; }
  .brand__top { font-size: 20px; }
  .brand__bot { font-size: 22px; margin-left: 14px; }
  .header-actions { gap: 6px; }
  .hero { padding-left: 18px; padding-right: 18px; }
  .categories, .featured, .about, .contact { padding-left: 18px; padding-right: 18px; }
  .drops, .custom-strip { padding-left: 16px; padding-right: 16px; }
  .cat-grid { grid-template-columns: 1fr; }
  .hero__meta { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .section-head--inline { flex-direction: column; align-items: flex-start; }

  /* Tighter product cards on narrow phones — cat-tag goes into the body
     to avoid overlapping the price tag inside a ~134px-wide image */
  .product-card__cat {
    position: static;
    display: inline-block;
    margin: 10px 0 6px;
    font-size: 10px;
    padding: 4px 8px;
  }
  .product-card__price-tag {
    top: 8px; right: 8px;
    font-size: 13px; padding: 4px 10px;
    transform: rotate(4deg);
  }
  .product-card__name { font-size: 16px; }
  .product-card__desc { font-size: 12.5px; margin-bottom: 10px; }
}

@media (max-width: 380px) {
  /* Header on tiny phones (iPhone SE-ish) */
  .site-header__row { gap: 6px; padding: 10px 12px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__top { font-size: 17px; }
  .brand__bot { font-size: 18px; margin-left: 10px; }
  .icon-btn { width: 38px; height: 38px; }

  /* Cart drawer: stack the qty controls under the item info to keep the row readable */
  .cart-item { grid-template-columns: 56px minmax(0,1fr); }
  .cart-item-img { width: 56px; height: 56px; }
  .cart-item-controls { grid-column: 1 / -1; justify-content: flex-end; margin-top: 6px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   LANDING — full-bleed video hero
   index.html only. The video itself carries the brand; chrome is minimal.
   ========================================================================== */
.landing {
  position: relative;
  /* Landing page has no header or ticker — the video is full-bleed and
     the hamburger floats directly on it. CTAs sit at the bottom of the
     video frame; the inner block's bottom padding keeps the breathing room. */
  min-height: 100vh;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background: var(--ink);
}
.landing__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.landing__veil {
  /* Subtle bottom-weight gradient so the buttons read on bright frames. */
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.landing__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* Top padding kept generous for spacing if content is ever added above
     the CTAs; bottom padding shrunk so the buttons hug the video's edge.
     env(safe-area-inset-bottom) keeps them clear of the iOS home indicator
     in viewport-fit=cover mode. */
  padding-top: clamp(40px, 8vw, 120px);
  padding-right: 28px;
  padding-left: 28px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  text-align: center;
  color: var(--bone);
}
.landing__eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(26,26,26,.4);
  border: 1.5px solid rgba(245,241,234,.55);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0 0 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.landing__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-weight: 900;
  font-size: clamp(48px, 9vw, 120px);
  line-height: .9;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: var(--bone);
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.landing__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--bone-warm);
}
.landing__lede {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(245,241,234,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.landing__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.landing__cta .btn {
  min-width: 200px;
  justify-content: center;
}
/* On the dark video background we need ghost buttons to read white. */
.landing__cta .btn--ghost {
  --btn-fg: var(--bone);
  background: rgba(26,26,26,.35);
  border-color: var(--bone);
  color: var(--bone);
  box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.landing__cta .btn--ghost:hover { background: rgba(26,26,26,.55); }
.landing__cta .btn--primary {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  border-color: var(--bone);
  box-shadow: 4px 4px 0 rgba(0,0,0,.55);
}
.landing__cta .btn--primary:hover { --btn-bg: var(--bone-warm); }

/* Sound toggle pinned to the corner of the video. */
.landing__mute {
  position: absolute;
  bottom: 22px; right: 22px;
  z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(26,26,26,.55);
  color: var(--bone);
  border: 1.5px solid rgba(245,241,234,.55);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.landing__mute:hover { background: rgba(26,26,26,.85); }

/* Hamburger pinned over the video, top-left. Matches the mute toggle's
   translucent-ink-on-glass treatment so they read as a pair. */
.landing__menu {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 3;
  width: 46px; height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.55);
  border: 1.5px solid rgba(245, 241, 234, 0.55);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-fast), transform var(--t-fast);
  padding: 0;
}
.landing__menu:hover {
  background: rgba(26, 26, 26, 0.85);
  transform: scale(1.04);
}
.landing__menu span {
  display: block;
  width: 18px; height: 2px;
  background: var(--bone);
  border-radius: 2px;
}

/* Slim header on the landing page (no cart icon, no inline nav — the
   hamburger reveals the full menu so the video occupies the visual top). */
.site-header--landing { background: rgba(245, 241, 234, 0.94); }
body[data-page="landing"] .icon-btn--menu { display: inline-flex; }

/* Landing footer sits flush against the video — the scallop edge is the
   divider, no extra gap above it. */
body[data-page="landing"] .site-footer { margin-top: 0; }
body[data-page="landing"] main { display: block; }

@media (max-width: 760px) {
  .landing__cta .btn { min-width: 0; flex: 1 1 100%; }
  .landing__menu { top: 16px; left: 16px; width: 42px; height: 42px; }
  .landing__mute { bottom: 16px; right: 16px; }
}

/* ==========================================================================
   EXIT-INTENT SUBSCRIBE POPUP
   ========================================================================== */
.exit-popup {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(26,26,26,.62);
  z-index: 130;
  padding: 24px;
  animation: fadeIn var(--t);
}
.exit-popup.is-open { display: flex; }
.exit-popup__panel {
  position: relative;
  background: var(--bone);
  border: 3px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 14px 14px 0 var(--ink);
  width: 100%; max-width: 460px;
  padding: 40px 32px 32px;
  text-align: center;
  animation: pop var(--t) var(--ease);
}
.exit-popup__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.exit-popup__kicker {
  margin: 0 0 6px;
  font-family: var(--hand);
  font-size: 26px;
  color: var(--ink-soft);
  transform: rotate(-2deg);
  display: inline-block;
}
.exit-popup__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 5vw, 44px);
  line-height: .95;
  margin: 0 0 12px;
  color: var(--ink);
}
.exit-popup__lede {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--ink-soft);
}
.exit-popup .drops-form {
  grid-template-columns: 1fr;
  max-width: 100%;
}
.exit-popup .drops-form__submit { width: 100%; justify-content: center; }
.exit-popup__fineprint {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ==========================================================================
   SHOP — category tab filter
   shop.html only.
   ========================================================================== */
.shop {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 28px clamp(80px, 10vw, 120px);
}
.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 36px;
  padding: 6px 0 18px;
  border-bottom: 2px dashed var(--line);
  position: sticky;
  top: 84px;
  z-index: 20;
  background: var(--bone);
}
.shop-tab {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 20px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--t-fast), background var(--t-fast);
}
.shop-tab:hover {
  background: var(--bone-warm);
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.shop-tab.is-active {
  background: var(--ink);
  color: var(--bone);
}
.shop-tab .shop-tab__count {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  opacity: .7;
  font-weight: 600;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
}
.shop-empty {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .shop-tabs { top: 64px; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
}

/* ==========================================================================
   CUSTOM ORDER — image upload field
   custom.html only.
   ========================================================================== */
.custom-order {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 28px clamp(80px, 10vw, 120px);
}
.custom-order .section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.custom-order__intro {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 36px;
  color: var(--ink-soft);
}

/* Drag-and-drop file zone. Uses the same form-field cosmetics as text inputs
   so the upload block reads as part of the form, not a tacked-on widget. */
.upload-field {
  position: relative;
  display: block;
  border: 2px dashed var(--ink);
  border-radius: 18px;
  padding: 28px 20px;
  background: var(--bone);
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.upload-field:hover,
.upload-field.is-drag {
  background: var(--bone-warm);
  border-color: var(--ink);
  border-style: solid;
}
.upload-field input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-field__icon {
  width: 44px; height: 44px;
  margin: 0 auto 8px;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 800;
  font-family: var(--display);
  font-style: italic;
}
.upload-field__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--ink);
}
.upload-field__hint {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.upload-preview {
  display: none;
  margin-top: 14px;
  padding: 14px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  align-items: center;
  gap: 14px;
}
.upload-preview.is-shown { display: flex; }
.upload-preview img {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.upload-preview__info {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.upload-preview__name {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-preview__size {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.upload-preview__remove {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.upload-preview__remove:hover { background: var(--ink); color: var(--bone); }

/* About page — single static photo (no video) ------------------------------ */
.about--simple .about__media { height: clamp(360px, 45vw, 520px); }
.about--simple .about__media .polaroid--md {
  width: 80%; top: 0; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
}