/* Fauji Funk v2: the sketchbook layer over the forked v1 styles (css/v1/).
   Paper, pencil and handwriting in two themes: day (ink on paper) and night (chalk on slate).
   Every colour comes from a --t-* token below; v1's own variables are mapped onto them.
   Rough.js frames come from js/theme.js (.sk-frame); the theme toggle from js/mode.js. */

/* ---------- theme tokens ---------- */

:root {
  --t-paper: #fbf8f1;  --paper-rgb: 251 248 241;
  --t-ink: #24221f;    --ink-rgb: 36 34 31;
  --t-ink-2: #4a463f;
  --t-pencil: #69645a;
  --t-surface: #f6f1e4; --t-surface-2: #f2ecdd; --t-surface-3: #e9e2cf;
  --t-field: #fffdf7;
  --t-dot: #e4ddcc;
  --t-rule: rgb(36 34 31 / .045);
  --t-tape: rgba(236, 228, 204, .8);
  --t-placeholder: #767064;
  --t-marker: #f3dd7a;              /* fills behind text: stickers, badges, highlights */
  --t-hl: #f3dd7a;                  /* highlighter behind headings */
  --t-note: #fbefb4;                /* sticky-note yellow */
  --t-accent: #556326;  --accent-rgb: 85 99 38;
  --t-amber: #8a5a12;
  --t-maroon: #b0412e;
  --t-peach: #f2c6a8;
  --t-sticker: #fbf6e6;
  --shadow-rgb: 36 34 31;
  --t-doodles: url("../img/doodles-ink.svg");
  --t-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .13 0 0 0 0 .12 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --t-grain-a: .6;
}

:root[data-theme="dark"] {
  --t-paper: #2a2e29;  --paper-rgb: 42 46 41;
  --t-ink: #f3eee2;    --ink-rgb: 243 238 226;
  --t-ink-2: #dcd6c6;
  --t-pencil: #bcb6a6;
  --t-surface: #31362f; --t-surface-2: #353a33; --t-surface-3: #3c4239;
  --t-field: #353a33;
  --t-dot: #3d433b;
  --t-rule: rgb(243 238 226 / .045);
  --t-tape: rgba(170, 160, 128, .35);
  --t-placeholder: #aaa496;
  --t-marker: #f3dd7a;
  --t-hl: #f3dd7a;
  --t-note: #f6e9a8;
  --t-accent: #b8c878;  --accent-rgb: 184 200 120;
  --t-amber: #e2b65b;
  --t-maroon: #ec8d75;
  --t-peach: #6a4b39;
  --t-sticker: #e9e2cd;
  --shadow-rgb: 0 0 0;
  --t-doodles: url("../img/doodles-chalk.svg");
  --t-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --t-grain-a: .5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-paper: #2a2e29;  --paper-rgb: 42 46 41;
    --t-ink: #f3eee2;    --ink-rgb: 243 238 226;
    --t-ink-2: #dcd6c6;
    --t-pencil: #bcb6a6;
    --t-surface: #31362f; --t-surface-2: #353a33; --t-surface-3: #3c4239;
    --t-field: #353a33;
    --t-dot: #3d433b;
    --t-rule: rgb(243 238 226 / .045);
    --t-tape: rgba(170, 160, 128, .35);
    --t-placeholder: #aaa496;
    --t-marker: #f3dd7a;
    --t-hl: #f3dd7a;
    --t-note: #f6e9a8;
    --t-accent: #b8c878;  --accent-rgb: 184 200 120;
    --t-amber: #e2b65b;
    --t-maroon: #ec8d75;
    --t-peach: #6a4b39;
    --t-sticker: #e9e2cd;
    --shadow-rgb: 0 0 0;
    --t-doodles: url("../img/doodles-chalk.svg");
    --t-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .84 .45 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --t-grain-a: .5;
    color-scheme: dark;
  }
}

/* v1's variables, mapped onto the tokens */
:root {
  --obsidian: var(--t-paper);
  --paper: var(--t-paper);
  --ink: var(--t-surface); --ink-2: var(--t-surface-2); --ink-3: var(--t-surface-3);
  --bone: var(--t-ink); --bone-2: var(--t-ink-2);
  --muted: var(--t-pencil); --pencil: var(--t-pencil);
  --brass: var(--t-accent); --brass-2: var(--t-amber); --brass-dim: var(--t-pencil);
  --maroon: var(--t-maroon);
  --marker: var(--t-marker);
  --line: rgb(var(--ink-rgb) / .16);
  --line-2: rgb(var(--ink-rgb) / .32);
  --olive: #6b7a3a; --olive-2: #7f8c4f; --olive-3: #94a065;
  --khaki: #b8a97c;
  --display: 'Caveat', 'Segoe Print', cursive;
  --serif: 'Caveat', 'Segoe Print', cursive;
  --sans: 'Patrick Hand', 'Comic Sans MS', cursive;
  --mono: 'Patrick Hand', 'Comic Sans MS', cursive;
  --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --on-marker: #24221f;           /* text on yellow, stickers and notes, in both themes */
  /* paper textures, used on panels below */
  --tex-lined: repeating-linear-gradient(to bottom, transparent 0 27px, var(--t-rule) 27px 28px);
  --tex-grid: linear-gradient(var(--t-rule) 1px, transparent 1px), linear-gradient(90deg, var(--t-rule) 1px, transparent 1px);
  --tex-hatch: repeating-linear-gradient(-45deg, transparent 0 9px, var(--t-rule) 9px 10px);
}

/* ---------- the page: paper, dots, doodles, grain ---------- */

body {
  /* the paper itself (rules, margin, holes, doodles, grain) is css/notebook.css */
  color: var(--bone);
  font: 400 15px/1.6 var(--sans);
  transition: background-color .4s, color .4s;
}
body::before { display: none; }
::selection { background: var(--t-hl); color: var(--on-marker); }

/* no splash screen or custom cursor in the sketchbook */
.loader, .cursor { display: none !important; }
body.has-cursor, body.has-cursor * { cursor: auto; }

/* ---------- type ---------- */

h1, h2, h3, .h-xl, .h-lg, .h-md, .h-sm {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
}
:is(h1, h2, h3, .h-xl, .h-lg, .h-md, .h-sm) em {
  font-style: normal;
  color: var(--on-marker) !important;
  background: linear-gradient(transparent 14%, var(--t-hl) 14%, var(--t-hl) 90%, transparent 90%);
  padding: 0 .08em;
}
.eyebrow { font-family: var(--sans); font-size: 15px; color: var(--pencil); }
.eyebrow::before { background: var(--pencil); }
.mono { font-family: var(--sans); }
.lede { color: var(--bone-2); font-size: clamp(18px, 1.6vw, 22px); }
.gold { color: var(--brass); }

/* handwriting everywhere: no tracked-out capitals, no tiny type */
body * { letter-spacing: normal !important; text-transform: none !important; }
/* Patrick Hand's x-height is 0.47 against Inter's 0.55: scale it up so v1's small sizes stay legible */
body { font-size-adjust: ex-height 0.6; }
h1, h2, h3, .h-xl, .h-lg, .h-md, .h-sm, .sticker, .btn, .wordmark, .card-body .name,
.footer h4, .drawer nav a, .marquee-track span, .newsletter-mini button, .card-quick button,
[class*="display"], .tl .yr { font-size-adjust: none; }

/* ---------- topbar + header ---------- */

.topbar {
  background: transparent;
  color: var(--pencil);
  border-bottom: 1.5px dashed var(--line-2);
  font-size: 15px;
}
.topbar b { color: var(--bone); font-weight: 400; }

.header, .header.solid {
  background: rgb(var(--paper-rgb) / .92);
  border-bottom: 1.5px dashed transparent;
  backdrop-filter: none;
}
.header.solid { border-bottom-color: var(--line-2); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 92px; }
.header .logo { order: 1; margin-right: auto; }
.header .nav { order: 2; display: flex; gap: 14px; align-items: center; }
.header .actions { order: 3; }
.header .menu-btn { order: 0; }

.wordmark {
  display: grid;
  font-family: var(--display);
  font-weight: 700;
  font-size: 34px;
  line-height: .95;
  color: var(--bone);
}
.wordmark small, .header .logo .wordmark small {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--pencil);
  margin-top: 3px;
}
.logo .brand-mark { display: none; }

.sticker, .header .nav a.sticker {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 84px;
  padding: 10px 18px 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--bone) !important;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.sticker::after { display: none !important; }
.sticker span { position: relative; z-index: 1; }
.sticker:hover, .sticker:focus-visible, .sticker.active {
  transform: rotate(calc(var(--tilt, 0deg) * -0.4)) translateY(-3px) scale(1.05);
}
.sticker.active span { text-decoration: underline wavy 1.5px; text-underline-offset: 5px; }
.sticker::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  width: 42px; height: 16px;
  margin-left: -21px;
  background: var(--t-tape);
  transform: rotate(-4deg);
  clip-path: polygon(3% 0, 97% 8%, 100% 92%, 0 100%, 4% 50%);
  z-index: 2;
}

.actions a, .actions button { color: var(--bone); font-family: var(--sans); font-size: 16px; }
.actions a:hover, .actions button:hover { color: var(--brass); }
.cart-count {
  background: var(--marker);
  color: var(--on-marker);
  border: 1.5px solid var(--on-marker);
  border-radius: var(--wobble);
  font-family: var(--sans);
}

/* the day / night toggle (js/mode.js draws the sun and moon) */
.mode-btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--bone);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.mode-btn:hover { transform: rotate(-14deg) scale(1.1); }
.mode-ico { width: 26px; height: 26px; overflow: visible; }
.mode-ico .mode-sun { display: none; }
:root[data-theme="dark"] .mode-ico .mode-sun { display: inline; }
:root[data-theme="dark"] .mode-ico .mode-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode-ico .mode-sun { display: inline; }
  :root:not([data-theme="light"]) .mode-ico .mode-moon { display: none; }
}

/* ---------- frames and icons drawn by theme.js ---------- */

.sk-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  color: var(--bone);
}
.sk-host:has(> .sk-under) { isolation: isolate; }
.sk-frame.sk-under { z-index: -1; }
.sk-paper { fill: var(--paper); }
/* stickers stay light paper with dark ink, day or night */
.sk-sticker { fill: var(--t-sticker); }
.sticker, .header .nav a.sticker { color: #24221f !important; }
.sk-framed { border-color: transparent !important; box-shadow: none !important; }
/* small round things get a gentle pencil wobble */
.soc-link svg, .card-body .sw i, .swatches .sw, .color-dots .cd, .stars-r { filter: url(#sk-wobble); }

/* ---------- buttons + links ---------- */

.btn, .btn-gold, .btn-solid, .btn-dark {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: var(--bone) !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  padding: 12px 26px 10px;
  box-shadow: none;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.btn::before { display: none !important; }
.btn-gold, .btn-solid, .card-quick button:not([disabled]) { color: var(--on-marker) !important; }
.btn-gold:hover, .btn-solid:hover { color: var(--on-marker) !important; }
.btn:hover { transform: rotate(-1.2deg) translateY(-2px); color: var(--bone) !important; }
.btn .arrow, .btn svg { stroke: currentColor; }
.btn[disabled], .btn:disabled { opacity: .5; transform: none; }

.link-line { color: var(--bone); }
.link-line::after { background: var(--bone); height: 1.5px; }

/* ---------- pictures ---------- */

.img, .card-media { background: var(--ink); }
.img img, .card-media img { object-fit: cover; }
.card-media::after, .tile::after { display: none !important; }
.img.mask, .img.mask img { clip-path: none !important; }

/* ---------- product cards ---------- */

.card { color: var(--bone); background: var(--ink); }
.card-body { background-image: var(--tex-lined); background-position: 0 6px; }
.card-media { border-radius: 0; }
.card-tag, .card-tag.gold, .card-tag.sale, .card-tag.low, .card-tag.out {
  background: var(--paper);
  color: var(--bone);
  border: 1.5px solid var(--bone);
  border-radius: var(--wobble);
  font-family: var(--sans);
  font-size: 14px;
  padding: 2px 10px;
  transform: rotate(-3deg);
}
.card-tag.sale { background: var(--marker); color: var(--on-marker); border-color: var(--on-marker); }
.card-tag.gold { background: #f2c6a8; color: var(--on-marker); border-color: var(--on-marker); }
.card-tag.out { color: var(--maroon); border-color: var(--maroon); }
.card-wish, .wish-btn, .card-custom {
  background: var(--paper);
  border: 1.5px solid var(--bone);
  border-radius: 50%;
  color: var(--bone);
}
.card-wish.on svg, .wish-btn.on svg { fill: var(--maroon); stroke: var(--maroon); }
.card-quick { background: transparent; }
.card-quick button {
  background: var(--paper) !important;
  color: var(--bone) !important;
  border: 0 !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
}
.card-body .cat, .card-body .cat .unit { font-family: var(--sans); font-size: 14px; color: var(--pencil); }
.card-body .name { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.05; }
.card-body .price { font-family: var(--sans); font-size: 19px; color: var(--bone); }
.card-body .price s { color: var(--pencil); }
.card-body .sw i { border: 1.5px solid var(--bone); }
.stars-r .s1 svg { fill: var(--bone); }

/* ---------- forms ---------- */

.field label { font-family: var(--sans); font-size: 15px; color: var(--bone-2); }
.field input, .field select, .field textarea,
.newsletter-mini input, .search-bar input {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--bone);
}
.field input, .field select, .field textarea, .ffpay-field input, .ffpay-field select {
  background: var(--t-field);
  border: 2px solid var(--bone);
  border-radius: var(--wobble);
  padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bone);
  box-shadow: 3px 4px 0 var(--t-accent);
  outline: none;
}
.field select option, .ffpay-field select option { background: var(--t-field); color: var(--bone); }
.check input { border: 2px solid var(--bone); border-radius: 3px 6px 4px 5px; background: var(--t-field); }
.check input:checked { background: var(--marker); }
.check input:checked::after { border-color: var(--on-marker); }
input::placeholder, textarea::placeholder { color: var(--t-placeholder); }

/* grouped inputs (phone with +91, promo + apply, PIN + check): the wrapper carries the pencil border */
body :is(.ck-tel, .ck-promo, .ff-pin-row, .bag-promo form) {
  background: var(--t-field);
  border: 2px solid var(--bone);
  border-radius: var(--wobble);
}
body :is(.ck-tel, .ck-promo, .ff-pin-row, .bag-promo form):focus-within {
  border-color: var(--bone);
  box-shadow: 3px 4px 0 var(--t-accent);
}
.bag-promo form { padding-left: 14px; }
body :is(.ck-promo, .ff-pin-row, .bag-promo form) button {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--bone);
  border-left: 2px dashed var(--line-2);
  padding-inline: 16px;
}
.ck-promo button:hover, .ff-pin-row button:hover, .bag-promo form button:hover { background: var(--marker); color: var(--on-marker); }
.chips input:checked + span { background: var(--marker); color: var(--on-marker); border-color: var(--on-marker); }

/* ---------- paper textures on panels ---------- */

/* graph paper: totals and summaries */
.ck-summary, .bag-sum, .ffbag-foot, .addr-card, .addr, .quote-box, .co-card, .spec, .ck-inv {
  background-image: var(--tex-grid);
  background-size: 18px 18px;
}
/* lined notebook: forms and notes */
.auth-form, .addr-form, .rv-form, .note, .personal, .ck-user, .ck-guest, .mini-addr {
  background-image: var(--tex-lined);
  background-position: 0 10px;
}
/* pencil hatching only in the margins of feature panels, where no text sits */
.tile, .tl, .val, .step, .fact {
  background-image: linear-gradient(var(--ink-2), var(--ink-2)), var(--tex-hatch);
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
}

/* ---------- search overlay, drawer, toast ---------- */

.search-ov { background: rgb(var(--paper-rgb) / .6); }
.search-panel { background: var(--paper); background-image: var(--tex-grid); background-size: 18px 18px; border-bottom: 2px solid var(--bone); }
.search-bar { border: 0; padding: 10px 16px; }
.search-bar input { font-size: 26px; }
.sr-item mark { background: var(--t-hl); color: var(--on-marker); }
.sr-chips button { border: 1.5px solid var(--bone); border-radius: var(--wobble); font-family: var(--sans); }
.drawer { background: var(--paper); background-image: var(--tex-lined); border-left: 2px solid var(--bone); }
.drawer nav a { font-family: var(--display); font-weight: 700; }
.toast {
  background: var(--t-note);
  color: var(--on-marker);
  border: 2px solid var(--on-marker);
  border-radius: var(--wobble);
  box-shadow: 4px 5px 0 rgb(var(--shadow-rgb) / .18);
  font-family: var(--sans);
  font-size: 17px;
  transition: transform .5s var(--ease), opacity .3s;
}
.toast:not(.show) { opacity: 0; }
.toast i { background: var(--olive); }

/* ---------- footer ---------- */

.footer { background: transparent; color: var(--bone); border-top: 2px dashed var(--line-2); }
.footer h4 { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--bone); }
.footer li a { color: var(--bone-2); font-size: 17px; }
.footer li a:hover { color: var(--bone); text-decoration: underline wavy 1.5px; text-underline-offset: 4px; }
.footer-brand p { color: var(--bone-2); }
.footer-bottom { color: var(--pencil); font-family: var(--sans); border-top: 1.5px dashed var(--line-2); }
.footer-legal a, .footer-legal button { color: var(--pencil); }
.newsletter-mini { border-bottom: 2px solid var(--bone); }
.newsletter-mini button { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--bone); }
.footer-wordmark.battlefield { box-shadow: none; border-radius: 12px; margin-top: 56px; }

/* ---------- misc v1 components ---------- */

.marquee { border-block: 2px dashed var(--line-2); }
.marquee-track span { font-family: var(--display); font-weight: 700; color: var(--bone); }
.page-hero .crumbs { font-family: var(--sans); }
.hr { border-color: var(--line-2); border-style: dashed; }
.soc-link { color: var(--bone); }
.ann-bar { background: var(--marker); color: var(--on-marker); border-bottom: 2px solid var(--on-marker); }

/* v1's inverted "light" bands become a shaded, hatched page instead of a black slab */
.light {
  background-color: var(--ink-2);
  color: var(--bone);
  --line: rgb(var(--ink-rgb) / .16); --line-2: rgb(var(--ink-rgb) / .32);
  --muted: var(--t-pencil); --bone-2: var(--t-ink-2); --ink-2: var(--t-surface-3); --ink-3: var(--t-surface-3);
  border-block: 2px dashed var(--line-2);
}
.light .eyebrow { color: var(--pencil); }

/* cookie banner */
.ffc-banner, .ffc-sheet {
  background: var(--paper) !important;
  background-image: var(--tex-lined) !important;
  color: var(--bone);
  border: 2px solid var(--bone) !important;
  border-radius: var(--wobble) !important;
  box-shadow: 5px 6px 0 rgb(var(--shadow-rgb) / .15) !important;
}
.ffc-eyebrow { color: var(--pencil); font-family: var(--sans); }
.ffc-btn, .ffc-primary {
  background: var(--paper) !important;
  color: var(--bone) !important;
  border: 2px solid var(--bone) !important;
  border-radius: var(--wobble) !important;
  font-family: var(--display) !important;
  font-weight: 700;
  font-size: 22px !important;
}
.ffc-primary { background: var(--marker) !important; color: var(--on-marker) !important; border-color: var(--on-marker) !important; }
.ffc-link { font-family: var(--sans); }

/* ---------- smaller screens ---------- */

/* labels go first, then the stickers move into the menu drawer */
@media (max-width: 1180px) {
  /* labels hidden visually only, so the Bag link keeps its name */
  .header .actions .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header .actions { gap: 10px; }
}
@media (max-width: 820px) {
  .header .nav { display: none; }
  .header-inner { min-height: 72px; gap: 14px; }
  .header .menu-btn { display: flex; }
  .wordmark { font-size: 28px; }
  .drawer nav a { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ---------- the last straight edges, made wobbly ---------- */

/* small boxes: pills, chips, tabs, steppers get a hand-cut outline */
body :is(.pill, .qty, .ff-share-trigger, .faq-tabs button, .opts > span, .topic > span, .sr-chips button) {
  border-width: 2px;
  border-color: var(--bone);
  border-radius: var(--wobble);
}
body :is(.pill.on, .faq-tabs button.on, .opts > span.on, .topic > span.on) {
  background: var(--marker);
  color: var(--on-marker);
  border-color: var(--on-marker);
}
/* round things: a pencil wobble instead of a compass-perfect circle */
.card-wish, .wish-btn, .card-custom, summary > i, .colors > span, .cd { filter: url(#sk-wobble); }

/* ---------- the notebook ---------- */

/* holes and margin line sit in v1's page gutter, so text starts just right of the red line */
:root { --nb-hole-x: calc(var(--gutter) / 2 - 6px); --nb-margin-x: calc(var(--gutter) - 14px); }
@media (max-width: 760px) { :root { --nb-hole-x: -40px; --nb-margin-x: -12px; } }
/* the social rail would sit on the punched holes; the same links are in the footer */
.soc-rail { display: none !important; }

/* ruler-straight dividers become wavy pencil lines */
.topbar { border-bottom: 0; background: var(--nb-squiggle) left bottom / 120px 8px repeat-x; }
.header.solid { border-bottom-color: transparent; background: rgb(var(--paper-rgb) / .94) var(--nb-squiggle) left bottom / 120px 8px repeat-x; }
.footer { border-top: 0; background: var(--nb-squiggle) left top / 120px 8px repeat-x; }
.footer-bottom { border-top: 0; background: var(--nb-squiggle) left top / 120px 8px repeat-x; }
.marquee { border-block: 0; background: var(--nb-squiggle) left top / 120px 8px repeat-x, var(--nb-squiggle) left bottom / 120px 8px repeat-x; }
.light { border-block: 0; background-image: var(--nb-squiggle), var(--nb-squiggle); background-position: left top, left bottom; background-size: 120px 8px; background-repeat: repeat-x; }
.hr { border: 0; height: 8px; background: var(--nb-squiggle) left center / 120px 8px repeat-x; }

/* nothing sits perfectly square on a hand-made page */
.product-grid > .card:nth-child(3n+1) { rotate: -.5deg; }
.product-grid > .card:nth-child(3n+2) { rotate: .35deg; }
.product-grid > .card:nth-child(3n) { rotate: -.15deg; }
.page-hero h1, .h-xl { rotate: -.8deg; }
.h-lg { rotate: -.5deg; }
.eyebrow { rotate: -1deg; }

/* ---------- accessibility ---------- */

:focus-visible { outline: 2.5px dashed var(--t-ink); outline-offset: 3px; }
/* the sale badge on the product page: paper ink on the red tag */
body .info .price .off { color: var(--t-paper); font-size: 14px; }
/* header icons: thumb-sized targets */
.menu-btn { min-width: 44px; min-height: 44px; }
.header .actions > a, .header .actions > button {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .split-lines .ln span { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}
/* phones: the bigger header targets need the room; Saved stays in the menu drawer */
@media (max-width: 480px) {
  .header .actions { gap: 0; }
  .header .actions > a, .header .actions > button { min-width: 40px; }
  .header .actions .wish-link { display: none; }
  .header-inner { gap: 6px; }
  .wordmark { font-size: 24px; }
  .wordmark small { font-size: 11px; }
}

/* ---------- phones (checked on a 390px iPhone and a 360px Android) ---------- */
/* Pages keep v1's inline <style>, which loads after this file, so rules aimed at page parts start with "body". */

/* the sticky header is solid paper, so headings scrolling under it no longer show through the logo */
.header, .header.solid { background-color: var(--t-paper); }
/* the footer's wordmark tagline was left at v1's 8px */
.footer .logo .wordmark small { font-size: 13px; }
/* an empty required field without a placeholder counted as "invalid" and loaded with a red border (contact form) */
.field input:invalid:not(:placeholder-shown):not(:focus):not(:user-invalid) { border-color: var(--bone); }

/* Caveat lines take their height from the x-height boost (line-height: normal follows it), so a heading that wraps
   no longer writes over itself: FAQ questions, bag lines, the lookbook and about quotes, guide cards */
body :is(.qa summary, .ffbag-nm, .bag-nm, .chapter p, .wide .q, details > summary, .g-prod-name, .g-list span) { line-height: normal; }
/* rough frames on side-by-side buttons need room: v1's 2px seams made them draw over each other (quote, confirm, pay) */
body :is(.qt-acts, .cf-state .acts, .py-state .acts) { gap: 12px; }
/* the free-delivery figure sits in a <span> inside the big <b>, and took the card's small-label style */
body .fact b span { font: inherit; color: inherit; }
/* policy pages: a long link or cookie name breaks instead of widening the page past the screen */
body .prose { min-width: 0; overflow-wrap: anywhere; }
body .ptable :is(code, .mono) { overflow-wrap: normal; }
/* the photo credits page has no section list, so its text takes the whole row, not the list's 230px column */
body .policy > .prose:only-child { grid-column: 1 / -1; }
/* the cookie buttons get Caveat at their set size; the boost made them 1.7x and the banner filled the screen */
.ffc-btn, .ffc-primary { font-size-adjust: none; }

@media (max-width: 760px) {
  /* form fields at 16px or more, or iOS zooms the whole page in when one is tapped */
  #sort, #rvSort, #ff-pin-in, #faqQ, #storeLink, #q { font-size: 16px !important; }
  /* the PIN field fills its row from zero width, so the bigger type doesn't widen the page on a 360px phone */
  .ff-pin-row input { width: 0; }
}

/* the smallest phones (320px): the header's four icons, menu and wordmark need 307px of a 280px row */
@media (max-width: 360px) {
  .menu-btn { min-width: 40px; }
  .header .actions > a, .header .actions > button { min-width: 36px; }
  .header-inner { gap: 4px; }
  .wordmark { font-size: 22px; }
}

@media (max-width: 600px) {
  /* product cards: the quick-add bar is always shown on phones, so it stays one slim line at the foot of the picture
     (Unit order is on the product page and the unit tile) */
  .card-quick { left: 8px; right: 8px; bottom: 8px; }
  .card-quick button { font-size: 18px; padding: 7px 8px 5px; min-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-quick button[data-go] { display: none; }
  .card-wish { width: 40px; height: 40px; }

  /* cookie banner: a short strip with the two choices side by side */
  .ffc-banner { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 14px 16px 12px; }
  .ffc-eyebrow { margin-bottom: 4px; }
  .ffc-text { font-size: 14px; }
  .ffc-acts { margin-top: 12px; gap: 8px; flex-wrap: nowrap; }
  .ffc-acts .ffc-btn { flex: 1 1 0; min-height: 44px; padding: 6px 8px 4px; font-size: 20px !important; white-space: nowrap; }
  .ffc-link { min-height: 44px; flex: none; }

  /* product page: the buy bar is one slim line, and the page ends above it */
  body .sticky-buy .in { gap: 12px; padding-block: 8px calc(8px + env(safe-area-inset-bottom)); }
  body .sticky-buy .l { gap: 10px; flex: 1; min-width: 0; }
  body .sticky-buy .l > div:last-child { min-width: 0; }
  body .sticky-buy .img { width: 36px; height: 45px; flex: none; }
  body .sticky-buy .nm { display: block; font-size: 15px; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body .sticky-buy #sBtn { flex: none; padding: 8px 18px 6px !important; font-size: 21px; white-space: nowrap; }
  body:has(#stickyBuy) .footer-bottom { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body .qty { min-height: 46px; }
  body .wish-btn { width: 44px; height: 44px; }
  body .story .txt { padding: 48px 20px; }
  body .bar { padding-block: 5px; }

  /* the bag drawer: a shorter head and foot leave room for the pieces; Checkout and View bag sit side by side */
  .ffbag-head { padding-block: 16px 12px; }
  .ffbag-head h2 { font-size: 34px; }
  .ffbag-foot { grid-template-columns: 1fr 1fr; gap: 8px; padding-block: 12px calc(14px + env(safe-area-inset-bottom)); }
  .ffbag-foot > :not(.btn, .sk-frame) { grid-column: 1 / -1; }
  .ffbag-foot .btn { padding: 10px 8px 8px; font-size: 20px; white-space: nowrap; }
  .ffbag-row.tot { padding-block: 2px; }
  .ffqty { height: 40px; } .ffqty button { width: 38px; }
  .ffbag-rm, .bag-act { padding: 12px 0; }
  /* with the drawer open, the "added to bag" note shows at the top instead of over the Checkout button */
  html.ffbag-lock .toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }

  /* footer: the three link lists in two columns, and legal links big enough to tap */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 52px 8px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer li { margin-bottom: 2px; }
  .footer li a { display: inline-block; padding-block: 7px; }
  .footer-wordmark.battlefield { margin-top: 32px; }
  .footer-bottom { font-size: 13px; gap: 6px 16px; }
  .footer-legal { gap: 0 18px; }
  .footer-legal a, .footer-legal button { display: inline-block; padding-block: 10px; }
  .footer-social .soc-link { width: 40px; height: 40px; }

  /* breadcrumbs and journal tabs: thumb-sized */
  .page-hero .crumbs { font-size: 12px; align-items: center; }
  .page-hero .crumbs a { padding-block: 10px; }
  body .tabs { gap: 4px 6px; }
  body .tabs button { min-width: 44px; padding: 10px 8px 14px; }

  /* lookbook: the plane flies above the title instead of through it */
  body .lb-hero .bg img { object-fit: contain; object-position: 50% 24%; }
  /* about: the closing quote, smaller and lifted off the tank's hatching */
  body .wide .q { font-size: 22px; bottom: 8%; text-shadow: 0 0 6px var(--t-paper), 0 0 14px var(--t-paper); }
  /* units page: regiment names fit their tiles, the delivered wall in three columns */
  body .trusted div { font-size: 19px; padding: 22px 12px; }
  body .comm { grid-template-columns: repeat(3, 1fr); }
  /* collections: the department pictures keep the page margin, so their pencil frames aren't cut by the screen edge */
  body .coll-art { margin-inline: 20px; }
  body .coll-copy { padding: 44px 20px; }

  /* policy pages: one column, the section links wrap instead of running off the edge, and each table row
     becomes a short block with its column names (js/theme.js copies them onto the cells) */
  body .policy { grid-template-columns: minmax(0, 1fr); }
  body .toc { display: flex; flex-wrap: wrap; overflow: visible; gap: 0 4px; }
  body .toc a { padding: 12px 10px; }
  body .ptable, body .ptable :is(tbody, tr, td) { display: block; width: auto; }
  body .ptable thead { display: none; }
  body .ptable tr { padding: 12px 0; border-bottom: 1.5px dashed var(--line-2); }
  body .ptable td { padding: 2px 0; border: 0; }
  body .ptable td:first-child { font-size: 16px; }
  body .ptable .mono { white-space: normal; }
  body .ptable td[data-th]:not(:first-child)::before { content: attr(data-th) ": "; color: var(--pencil); }
  /* guides: the worked address example in one readable size */
  body .g-body blockquote { font-size: 17px; line-height: normal; }
}