/*
Theme Name: Faunawave
Description: Lightweight showcase theme for Faunawave funny animal streetwear, sold on Etsy.
Version: 0.1.0
Requires PHP: 8.1
Text Domain: faunawave
*/

/* Palette and type from the DROP 001 site: bone cream, near-black, vermillion.
   Barlow (headings) uses font-display: block: it is preloaded and tiny, and the much wider
   fallback reflowed the hero headline on Android (CLS 0.10). */
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: block; src: url(assets/fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: block; src: url(assets/fonts/barlow-condensed-800.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400 700; font-display: swap; src: url(assets/fonts/dm-sans.woff2) format('woff2'); }

:root {
  --cream: #fefaee;            /* = the raccoon video background, so the video has no visible edge */
  --ink: #151412;
  --accent: #e84a22;
  --accent-deep: #a63a1e;
  --muted: #6b6055;
  --dark: #0d0d0d;
  --dark-line: #302b25;
  --dark-muted: #b3a593;
  --line: #e4dccb;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
}

* { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-cond); font-weight: 800; line-height: 1; letter-spacing: .005em; text-transform: uppercase; margin: 0 0 .4em; }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--ink); }
.skip { position: absolute; top: -100px; left: 16px; z-index: 20; background: var(--accent); padding: 10px 14px; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { display: block; font-family: var(--font-cond); font-weight: 600; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.text-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- buttons ---------- */
.fw-btn, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 24px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--cream); font-family: var(--font-cond); font-weight: 800;
  font-size: 18px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background .2s, color .2s;
}
.fw-btn:hover, .woocommerce a.button.alt:hover, .woocommerce a.button:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.fw-btn--ghost { background: transparent; color: var(--ink); }
.fw-btn--small { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; height: var(--header-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); background: var(--cream); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--font-cond); font-weight: 800; font-size: 26px; letter-spacing: .06em; text-decoration: none; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a { font-family: var(--font-cond); font-weight: 600; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.nav a:hover { color: var(--accent-deep); }
@media (max-width: 859px) {
  .site-header { gap: 12px; }
  .nav { order: 3; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--line); overflow-x: auto; }
  /* All five items fit from ~340px: size follows the screen, items spread edge to edge.
     Narrower phones scroll, and the fade on the right says so. */
  .nav ul { justify-content: space-between; gap: 12px; padding: 10px 16px; white-space: nowrap;
    scrollbar-width: none; }
  .nav { scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: clamp(13px, 3.75vw, 17px); letter-spacing: .06em; }
  .header-etsy { margin-left: auto; }
  .site-header + main, .site-header ~ main { margin-top: 44px; }
}

/* ---------- bands ---------- */
.band { padding: clamp(48px, 7vw, 96px) var(--gutter); }
.band--dark { background: var(--dark); color: var(--cream); }
.band--dark .label { color: var(--dark-muted); }
.band-head { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 24px; margin-bottom: 32px; }
.band-head .label { flex-basis: 100%; margin: 0; }
.band-head h2 { font-size: clamp(32px, 4.4vw, 60px); margin: 0; max-width: 18ch; }
.band-head .text-link { margin-left: auto; }

/* ---------- product cards ---------- */
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 44vw), 1fr)); gap: clamp(14px, 2vw, 28px); }
.fw-card { display: flex; flex-direction: column; gap: 10px; }
.fw-card__link { text-decoration: none; }
.fw-card__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f3eee2; }
.fw-card__title { font-size: 21px; margin: 12px 0 0; }
.fw-card .fw-btn { align-self: flex-start; margin-top: auto; }

/* WooCommerce grids (shop, collections, related): WooCommerce's own stylesheet loads after
   ours and turns the button back into a padded block (label stuck to the top), so these
   selectors are stronger. Cards are columns: the button always sits at the bottom. */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 42vw), 1fr)); gap: clamp(14px, 2vw, 28px); }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { display: flex; flex-direction: column; float: none; width: auto !important; margin: 0 !important; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { flex: 1 0 auto; }
.woocommerce ul.products li.product a.button {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  margin-top: auto; min-height: 44px; padding: 0 18px; line-height: 1; font-size: 16px;
}
.fw-nowrap { white-space: nowrap; }

.crew-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 42vw), 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.crew-list a { display: block; text-decoration: none; }
.crew-list img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.crew-list span { display: block; margin-top: 10px; font-family: var(--font-cond); font-weight: 800; font-size: 22px; text-transform: uppercase; }

.band--facts { border-top: 2px solid var(--ink); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.facts strong { display: block; font-family: var(--font-cond); font-size: 26px; text-transform: uppercase; }
.facts span { color: var(--muted); }

/* ---------- pages, WooCommerce ---------- */
.page-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter); }
.page-wrap.narrow { max-width: 760px; }
.page-wrap h1 { font-size: clamp(40px, 6vw, 80px); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { display: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-cond); font-weight: 800; font-size: 21px; text-transform: uppercase; }
.woocommerce div.product .product_title { font-size: clamp(36px, 4vw, 56px); }
.woocommerce div.product form.cart, .woocommerce div.product p.cart { margin: 20px 0 8px; }
.fw-etsy-note { font-size: 14px; color: var(--muted); max-width: 46ch; }
.woocommerce-breadcrumb { font-size: 14px; color: var(--muted); }
.term-description { max-width: 70ch; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- characters, gift guide, content pages ---------- */
.page-intro, .lead { font-size: 19px; max-width: 62ch; color: var(--muted); }
.page-wrap.narrow h2 { font-size: 30px; margin-top: 1.6em; }
.page-wrap.narrow li { margin-bottom: .4em; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 44vw), 1fr)); gap: 24px; list-style: none; margin: 32px 0 0; padding: 0; }
.char-card a { display: block; text-decoration: none; }
.char-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.char-card h2 { font-size: 26px; margin: 14px 0 4px; }
.char-card p { margin: 0; color: var(--muted); }
.char-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; margin-top: 16px; }
.char-hero__art { background: var(--dark); padding: clamp(16px, 3vw, 40px); }
.char-hero__art img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.char-hero h1 { font-size: clamp(44px, 6vw, 88px); }
.char-tagline { font-family: var(--font-cond); font-weight: 600; font-size: 26px; color: var(--accent-deep); margin: 0 0 16px; }
.char-story { font-size: 18px; max-width: 56ch; }
.band--flush { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.band--flush h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 24px; }
.crew-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.crew-chips a { display: inline-block; padding: 8px 16px; border: 2px solid var(--ink); font-family: var(--font-cond); font-weight: 800; font-size: 18px; text-transform: uppercase; text-decoration: none; }
.crew-chips a:hover { background: var(--ink); color: var(--cream); }
.guide-section { margin-top: clamp(40px, 6vw, 80px); }
.guide-section h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 6px; }
.guide-intro { color: var(--muted); margin: 0 0 22px; max-width: 60ch; }
.fw-meet { margin: 6px 0 0; }
@media (max-width: 859px) { .char-hero { grid-template-columns: 1fr; } }

/* ---------- product page, phones first ---------- */
.fw-details { clear: both; max-width: 70ch; padding-top: 32px; }
.fw-details h2 { font-size: 28px; }
.fw-details p { margin: 0 0 1em; }
.fw-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .25s ease; }
.fw-sticky-buy.is-on { transform: none; }
.fw-sticky-buy span { flex: 1; min-width: 0; font-family: var(--font-cond); font-weight: 800; font-size: 18px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 860px) { .fw-sticky-buy { display: none; } }
@media (max-width: 859px) {
  .single-product .page-wrap { padding-top: 12px; }
  .woocommerce div.product .product_title { font-size: 34px; margin-top: 8px; }
  .woocommerce div.product form.cart .button, .woocommerce div.product p.cart .button { width: 100%; min-height: 54px; font-size: 20px; }
  .woocommerce div.product .flex-control-thumbs { display: flex; overflow-x: auto; gap: 6px; }
  .woocommerce div.product .flex-control-thumbs li { flex: 0 0 22%; width: auto !important; }
  .single-product .site-footer { padding-bottom: 96px; }
}

/* ---------- 27/10: purchase block, filters, size guide, mascot ---------- */
.fw-price { margin: 18px 0 6px; font-size: 16px; color: var(--muted); }
.fw-price b { font-family: var(--font-cond); font-weight: 800; font-size: 32px; color: var(--ink); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.fw-price span { display: block; font-size: 14px; }
.fw-facts { margin: 22px 0 12px; border-top: 1px solid var(--line); }
.fw-facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fw-facts dt { font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.fw-facts dd { margin: 0; font-size: 15px; }
.fw-facts a, .fw-etsy-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fw-etsy-note { font-size: 15px; color: var(--muted); max-width: 52ch; }
.fw-mockup-note { clear: both; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.fw-from { font-size: 15px; color: var(--muted); }
.fw-from b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fw-card__price { margin: 2px 0 4px; }
.woocommerce ul.products li.product .price { display: block; margin: 2px 0 8px; color: var(--muted); }
@media (max-width: 859px) { .fw-facts div { grid-template-columns: 1fr; gap: 2px; } }

.fw-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.fw-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); font-family: var(--font-cond); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.fw-chips a:hover { background: var(--ink); color: var(--cream); }
.fw-chips a[aria-current="page"] { background: var(--ink); color: var(--cream); }
.woocommerce .woocommerce-ordering select { min-height: 44px; padding: 0 10px; border: 2px solid var(--ink); background: var(--cream); font: inherit; }
.fw-shop-intro { max-width: 72ch; margin-bottom: 22px; }
.fw-shop-intro a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Current page in the menus (skill: nav-state-active). */
.nav .current-menu-item > a, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.size-guide { margin-top: 40px; }
.table-scroll { overflow-x: auto; margin: 0 0 18px; }
.size-guide table { width: 100%; min-width: 320px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.size-guide caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.size-guide th, .size-guide td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.size-guide th[scope="row"], .size-guide thead th:first-child { text-align: left; }
.size-guide thead th { font-family: var(--font-cond); font-size: 17px; letter-spacing: .06em; border-bottom: 2px solid var(--ink); }


.real-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 44vw), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.real-photos figure { margin: 0; }
.real-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.real-photos figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.fw-shop-intro--after { margin-top: 40px; }
.fw-shop-intro--after h2 { font-size: 28px; }
@media (max-width: 859px) {
  .fw-chips ul { gap: 6px; }
  .fw-chips a { padding: 0 12px; font-size: 14px; letter-spacing: .04em; }
}
@media (max-width: 859px) {
  .size-guide th, .size-guide td { padding: 9px 6px; font-size: 14px; }
  .size-guide thead th { font-size: 15px; }
  }
/* Anchors (size guide #tees/#hoodies) land below the sticky header (+ the menu row on phones). */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
@media (max-width: 859px) { html { scroll-padding-top: calc(var(--header-h) + 60px); } }

/* ---------- 27/10 bis: logo, aligned prices, centred footer ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .brand__logo { display: block; width: auto; height: 44px; } /* cut-out FW + crown, ink on cream */
@media (max-width: 859px) { .brand .brand__logo { height: 38px; } .brand span { font-size: 22px; } }

/* Product names take one or two lines; reserving two keeps prices and buttons level across a row. */
.fw-card__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 2em; line-height: 1; }

/* Any name length: the link is a column whose title area stretches, so price + button share a baseline per row. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; } /* WooCommerce sets display:block with this exact selector */
.woocommerce ul.products li.product .woocommerce-loop-product__title { flex: 1 0 auto; }
.fw-card__link { flex: 1 0 auto; display: flex; flex-direction: column; }
.fw-card__title { flex: 1 0 auto; }

/* =====================================================================
   Home + header + footer, mockups 27/10 (mobile first)
   ===================================================================== */
@font-face { font-family: 'Permanent Marker'; font-display: swap; src: url(assets/fonts/permanent-marker.woff2) format('woff2'); }
.fw-btn--accent { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--cream); }
.fw-btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* --- header: compact menu on phones --- */
.menu-toggle { display: none; }
.menu-etsy { display: none; }
@media (max-width: 859px) {
  .site-header + main, .site-header ~ main { margin-top: 0; }
  .header-etsy { display: none; }
  .menu-toggle { display: grid; place-items: center; margin-left: auto; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .menu-toggle__bars { position: relative; }
  .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__bars::before { top: -8px; }
  .menu-toggle__bars::after { top: 8px; }
  .is-open .menu-toggle__bars { background: transparent; }
  .is-open .menu-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
  .is-open .menu-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; border-bottom: 2px solid var(--ink); -webkit-mask-image: none; mask-image: none; }
  .site-header.is-open .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 4px var(--gutter) 12px; }
  .nav li a { display: flex; align-items: center; min-height: 48px; font-size: 20px; border-bottom: 1px solid var(--line); }
  .menu-etsy { display: block; }
  .menu-etsy a { color: var(--accent-deep); }
}

/* --- hero (mockups): phones = big title, then text left | crew right; desktop = text column | crew + handwritten line --- */
.home-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 38% 62%; grid-template-areas: "title title" "text crew";
  padding: 16px var(--gutter) 8px; column-gap: 0; }
.home-hero h1 { display: contents; }
.home-hero__big { grid-area: title; display: block; font-size: clamp(44px, 13.6vw, 150px); line-height: .86; }
.home-hero__text { display: contents; }
.home-hero__side { grid-area: text; position: relative; z-index: 3; align-self: start; padding-top: 12px; }
.home-hero__sub { display: block; margin: 0; font-family: var(--font-cond); font-weight: 800; font-size: clamp(18px, 5.2vw, 40px); line-height: 1.02; text-transform: uppercase; }
.home-hero__sub em { font-style: normal; color: var(--accent-deep); }
.home-hero__lead { margin: 10px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.home-hero__cta { min-height: 44px; padding: 0 10px; font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
.home-hero__crew { grid-area: crew; position: relative; margin-top: calc(-1 * clamp(60px, 19vw, 120px)); align-self: end; }
/* F = figure height. Cut-out measurements (feet): bear ends .585F in, raccoon feet span .436F (frame .61F),
   cat starts .142F in. Bear and cat stand .1F closer than "feet apart" (the mockup's tight group,
   bear in front of the raccoon's tail): group width 1.415F + 16px. */
.trio { --k: .24; --F: min(250px, calc((63vw - 22px) / 1.135)); position: relative; height: var(--F); width: calc((1.615 - 2 * var(--k)) * var(--F) + 16px); margin-left: auto; }
.trio > * { position: absolute; bottom: 0; }
.trio__bear { left: 0; height: var(--F); width: auto; z-index: 2; }
.trio__raccoon { z-index: 1; left: calc((.535 - var(--k)) * var(--F) + 8px); height: calc(var(--F) / .92); width: calc(var(--F) / .92 * 560 / 998); bottom: calc(var(--F) / .92 * -40 / 998); }
.trio__raccoon picture, .trio__raccoon .hero-raccoon__poster { display: block; width: 100%; height: 100%; }
.hero-raccoon__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero-raccoon__video.is-ready { opacity: 1; }
.trio__cat { left: calc((.959 - 2 * var(--k)) * var(--F) + 16px); height: var(--F); width: auto; z-index: 2; }
.home-hero__note { display: none; }
.hero-mascot { grid-column: 1 / -1; margin: 8px 0 0; text-align: right; font-family: var(--font-cond); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hero-mascot span { color: var(--ink); }
@media (min-width: 860px) {
  .home-hero { grid-template-columns: 40% 60%; grid-template-areas: "title crew" "text crew"; align-items: start;
    max-width: 1400px; margin: 0 auto; padding: 24px var(--gutter) 10px; }
  .home-hero__big { font-size: clamp(64px, 7.4vw, 118px); align-self: end; }
  .home-hero__side { padding-top: 18px; }
  .home-hero__sub { font-size: clamp(30px, 3vw, 46px); }
  .home-hero__lead { font-size: 18px; max-width: 34ch; }
  .home-hero__cta { min-height: 54px; padding: 0 26px; font-size: 22px; }
  .home-hero__crew { margin: 0; align-self: center; padding: 0 clamp(180px, 15vw, 230px) 26px 0; }
  .trio { --k: .1; --F: min(440px, calc(100svh - 260px), calc(min(100vw, 1400px) * .42 / 1.415)); margin: 0 auto; }
  .home-hero__note { display: block; position: absolute; right: 0; top: 24%; z-index: 3; margin: 0; max-width: 7.2em; transform: rotate(-12deg);
    font-family: "Permanent Marker", var(--font-cond); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.02; color: #3a3632; text-align: left; }
  .home-hero__note::after { content: ""; display: block; height: 4px; margin: 10px auto 0; width: 64%; background: var(--accent-deep); border-radius: 4px; transform: rotate(-6deg); }
  .hero-mascot { position: absolute; right: var(--gutter); bottom: 8px; z-index: 4; margin: 0; font-size: 12px; }
}

/* --- featured designs (mockups): vertical cards that swipe on phones, 4 horizontal cards on desktop --- */
.featured { padding: 22px 0 22px; border-top: 1px solid var(--line); }
.featured__head { display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter); margin-bottom: 14px; }
.featured__head h2 { font-size: clamp(30px, 7.5vw, 44px); margin: 0; }
.featured__all { display: none; margin-left: auto; font-family: var(--font-cond); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.featured__swipe { margin-left: auto; font-family: var(--font-cond); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.featured__swipe span { display: inline-block; animation: fw-nudge 1.6s ease-in-out infinite; }
@keyframes fw-nudge { 50% { transform: translateX(5px); } }
.featured__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 2px var(--gutter) 10px; margin: 0; list-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.featured__track::-webkit-scrollbar { display: none; }
.fcard { flex: 0 0 27%; min-width: 96px; max-width: 200px; scroll-snap-align: start; }
.fcard a { display: flex; flex-direction: column; height: 100%; background: #f3ede0; border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 1px 0 var(--line); }
.fcard__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: top; }
.fcard__body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 6px 10px 8px; background: #fbf7ee; }
.fcard__name { font-family: var(--font-cond); font-weight: 800; font-size: 12.5px; line-height: 1.1; text-transform: uppercase; }
.fcard__go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ece4d3; font-size: 15px; }
.fcard a:hover .fcard__go, .fcard a:focus-visible .fcard__go { background: var(--ink); color: var(--cream); }
@media (min-width: 860px) {
  .featured { max-width: 1400px; margin: 0 auto; }
  .featured__all { display: inline; }
  .featured__swipe { display: none; }
  .featured__track { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .fcard { max-width: none; }
  .fcard a { display: grid; grid-template-columns: 55% 45%; }
  .fcard__img { aspect-ratio: auto; height: 150px; object-position: center top; }
  .fcard__body { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 22px 16px 16px 6px; background: none; }
  .fcard__name { font-size: 20px; }
  .fcard__go { width: 40px; height: 40px; font-size: 20px; }
  .fcard__body { padding: 22px 16px 16px 6px; }
  .fcard__go { align-self: flex-end; }
}

/* --- Christmas banner + meet the crew: stacked on phones, side by side on desktop --- */
.xmas-banner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; overflow: hidden; min-height: 200px;
  color: var(--cream); background: #1a0f0a url(assets/home/xmas-bg-mobile.webp) right center / cover no-repeat; }
.xmas-banner__text { position: relative; z-index: 2; padding: 24px 0 24px var(--gutter); align-self: center; }
.xmas-banner .label { color: #e9d9bf; margin-bottom: 4px; }
.xmas-banner h2 { font-size: clamp(30px, 8.6vw, 66px); line-height: .92; margin: 0 0 6px; }
.xmas-banner p { margin: 0 0 12px; font-size: 13px; color: #efe4d2; }
.xmas-banner .fw-btn { white-space: nowrap; min-height: 44px; padding: 0 14px; font-size: 15px; }
.xmas-banner__cat { align-self: end; justify-self: end; width: 118%; max-width: none; height: auto; margin-right: -12%; margin-bottom: -2px; }
.crew-row { padding: 26px 0 18px; }
.crew-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 0 var(--gutter); margin-bottom: 14px; }
.crew-row__head h2 { font-size: clamp(26px, 7vw, 44px); margin: 0; }
.crew-row__tag { margin: 0; font-family: var(--font-cond); font-weight: 800; font-size: 14px; line-height: 1.05; text-transform: uppercase; color: var(--accent-deep); text-align: right; }
.crew-row ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0 calc(var(--gutter) - 6px); }
.crew-row__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; text-decoration: none; }
.crew-row__item img { width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; border-radius: 50%; }
.crew-row__item strong { margin-top: 4px; font-family: var(--font-cond); font-weight: 800; font-size: 11.5px; white-space: nowrap; line-height: 1.05; text-transform: uppercase; }
.crew-row__item span { font-size: 10.5px; line-height: 1.3; color: var(--muted); }
a.crew-row__item:hover strong { text-decoration: underline; }
.crew-row__all { display: inline-block; margin: 10px var(--gutter) 0; font-size: 14px; }
@media (min-width: 860px) {
  .xmas-crew { display: grid; grid-template-columns: 57% 43%; align-items: stretch; }
  .xmas-banner { background-image: url(assets/home/xmas-bg-desktop.webp); min-height: 0; height: 300px; }
  .xmas-banner__text { padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .xmas-banner__cat { width: auto; height: 300px; margin-right: 6%; }
  .crew-row { padding: 18px var(--gutter) 18px 28px; align-self: center; }
  .crew-row__head, .crew-row ul { padding-left: 0; padding-right: 0; }
  .crew-row__all { margin-left: 0; }
}

/* --- trust strip: two columns, as in the mockups --- */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 8px var(--gutter) 30px; padding: 16px 6px; background: #f3ede0; border-radius: 12px; }
.trust__item { display: flex; gap: 12px; align-items: flex-start; padding: 0 12px; }
.trust__item + .trust__item { border-left: 1px solid #d9cfbc; }
.trust__item svg { flex: none; width: 26px; height: 26px; }
.trust__item strong { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 14px; line-height: 1.1; text-transform: uppercase; }
.trust__item span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
@media (min-width: 860px) { .trust { max-width: 1400px; margin: 10px auto 34px; box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); padding: 18px 10px; }
  .trust__item { justify-content: center; } .trust__item div { max-width: 46ch; } }

/* --- footer: brand | menu | official icons, then legal line --- */
.site-footer { padding: 28px var(--gutter) 18px; background: var(--dark); color: var(--cream); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-row { display: flex; flex-direction: column; gap: 18px; }
.footer-brand__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-cond); font-weight: 800; font-size: 24px; letter-spacing: .06em; }
.site-footer .footer-brand__logo img { height: 40px; width: auto; }
.footer-brand p { margin: 6px 0 0; font-size: 14px; color: var(--dark-muted); }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.footer-links a { font-family: var(--font-cond); font-weight: 600; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
.footer-social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; transition: transform .2s; }
.footer-social svg path { fill: var(--cream); }
.footer-social a:hover svg path { fill: var(--accent); }
.footer-social a:hover { transform: translateY(-2px); }
.footer-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--dark-line); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.footer-legal a, .site-footer .footer-small { font-size: 13px; color: var(--dark-muted); }
.site-footer .footer-small { margin: 0; }
@media (min-width: 860px) {
  .footer-row, .footer-bottom { max-width: 1320px; margin-left: auto; margin-right: auto; }
  .footer-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 859px) {
  /* Footer as in the mobile mockup: brand left, links right, icons underneath. */
  .footer-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand links" "social social"; align-items: start; gap: 16px 14px; }
  .footer-brand { grid-area: brand; }
  .footer-links { grid-area: links; }
  .footer-links ul { justify-content: flex-end; gap: 6px 12px; }
  .footer-links a { font-size: 12px; letter-spacing: .08em; }
  .footer-social { grid-area: social; }
  .footer-brand__logo { font-size: 20px; }
  .site-footer .footer-brand__logo img { height: 32px; }
  .footer-brand p { font-size: 12px; max-width: 16ch; }
}
@media (min-width: 860px) {
  .trust__item strong { font-size: 18px; } .trust__item span { font-size: 13px; }
  .crew-row__item strong { font-size: 14px; } .crew-row__item span { font-size: 12px; } .crew-row__tag { font-size: 18px; }
  .xmas-banner p { font-size: 17px; } .xmas-banner .fw-btn { font-size: 18px; }
}
@media (min-width: 860px) {
  /* Footer on one line as in the desktop mockup: legal links + note sit with the icons. */
  .footer-row { gap: 24px; }
  .footer-bottom { margin-top: 14px; padding-top: 10px; }
}
@media (max-width: 859px) {
  .footer-social a { width: 36px; height: 36px; }
  .footer-social svg { width: 20px; height: 20px; }
  .footer-bottom { margin-top: 12px; }
  .footer-legal a, .site-footer .footer-small { font-size: 11.5px; }
}

/* =====================================================================
   Catalogue (shop + categories), mockups 27/10: title, one line, pill filters,
   crew band on desktop; beige tiles with centred name, "From" price and a
   full-width "View on Etsy" button. 2 columns on phones, 3 then 4 on wider screens.
   ===================================================================== */
.post-type-archive-product .page-wrap, .tax-product_cat .page-wrap, .tax-product_tag .page-wrap { max-width: 1400px; padding-top: 14px; }
.shop-head { margin-bottom: 18px; }
.shop-head__title { margin: 0; font-size: clamp(46px, 14vw, 120px); line-height: .86; }
.shop-head__sub { display: none; }
.shop-head__lead { margin: 10px 0 16px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.shop-head__band { display: none; }
.fw-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fw-chips a { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #efe7d6;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: none; }
.fw-chips a:hover { background: #e2d7c1; color: var(--ink); }
.fw-chips a[aria-current="page"] { background: var(--ink); color: var(--cream); }
@media (max-width: 859px) { .fw-chips ul { gap: 6px; } .fw-chips a { padding: 0 15px; font-size: 14px; } }
@media (min-width: 860px) {
  .shop-head { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 62%); align-items: end; column-gap: 24px; margin-bottom: 14px; }
  .shop-head__title { font-size: clamp(64px, 6.4vw, 104px); }
  .shop-head__sub { display: block; margin: 14px 0 0; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
  .shop-head__sub em { display: block; font-style: normal; font-family: var(--font-cond); font-weight: 800; font-size: 1.3em; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
  .shop-head__lead { margin: 8px 0 18px; font-size: 16px; max-width: 40ch; }
  .shop-head__band { display: block; align-self: end; }
  .shop-head__band img { display: block; width: 100%; height: auto; }
}

.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
@media (min-width: 700px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.woocommerce ul.products li.product { padding: 10px 10px 12px; border-radius: 10px; background: #f3ede0; text-align: center; }
.woocommerce ul.products li.product a img { margin: 0 0 10px; border-radius: 6px; mix-blend-mode: multiply; } /* white Etsy backgrounds take the tile colour */
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 0; font-size: 16px; line-height: 1.05; }
.woocommerce ul.products li.product .price { margin: 6px 0 10px; font-size: 14px; color: var(--muted); }
.woocommerce ul.products li.product .price .amount { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.woocommerce ul.products li.product a.button.fw-card-etsy { align-self: stretch; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 8px;
  border-radius: 4px; background: var(--ink); border-color: var(--ink); color: var(--cream);
  font-family: var(--font-cond); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.woocommerce ul.products li.product a.button.fw-card-etsy:hover, .woocommerce ul.products li.product a.button.fw-card-etsy:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
@media (min-width: 860px) {
  .woocommerce ul.products li.product { padding: 14px 16px 16px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 19px; }
  .woocommerce ul.products li.product .price { font-size: 15px; }
}
/* Etsy flat-lay photos have wide white margins: zoom 1.2 inside the same box (clip, then scale = no overflow). */
.woocommerce ul.products li.product a img { aspect-ratio: 1; object-fit: cover; transform: scale(1.2); clip-path: inset(8.33%); }

/* =====================================================================
   Product page, mockups 27/10: gallery (thumbnails left on desktop, under the photo on phones),
   name, kind, "From" price, key facts, sizes (information), Buy on Etsy, sections that open.
   ===================================================================== */
.single-product .page-wrap { max-width: 1400px; padding-top: 16px; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .flex-viewport { background: #f3ede0; border-radius: 8px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img { mix-blend-mode: multiply; }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 0; padding: 0 0 4px; scrollbar-width: thin; }
.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 72px; width: 72px !important; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img { border: 2px solid transparent; border-radius: 6px; background: #f3ede0; mix-blend-mode: multiply; opacity: 1; }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: var(--accent-deep); }
.woocommerce div.product div.images .flex-control-thumbs li img:hover { border-color: var(--ink); }
.woocommerce div.product div.images { position: relative; }
.woocommerce div.product div.images .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce div.product div.images .flex-direction-nav a { position: absolute; top: calc(50% - 40px); z-index: 3; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(254, 250, 238, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); color: var(--ink); font-size: 0; text-decoration: none; }
.woocommerce div.product div.images .flex-direction-nav a::before { content: ""; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 0 2.5px 2.5px; transform: translateX(2px) rotate(45deg); }
.woocommerce div.product div.images .flex-direction-nav .flex-prev { left: 10px; }
.woocommerce div.product div.images .flex-direction-nav .flex-next { right: 10px; }
.woocommerce div.product div.images .flex-direction-nav .flex-next::before { transform: translateX(-2px) rotate(-135deg); }
.woocommerce div.product div.images .flex-direction-nav .flex-disabled { opacity: .35; pointer-events: none; }

.woocommerce div.product .product_title { margin: 0; font-size: clamp(36px, 9.5vw, 64px); line-height: .92; }
.fw-kind { margin: 6px 0 0; font-family: var(--font-cond); font-weight: 800; font-size: clamp(19px, 5vw, 26px); text-transform: uppercase; color: #4a4540; }
.fw-price { margin: 8px 0 12px; font-size: 15px; color: var(--accent-deep); }
.fw-price b { font-size: 34px; color: var(--accent-deep); }
.fw-price span { display: inline; margin-left: 6px; font-size: 13px; color: var(--muted); }
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: #4a4540; }

.fw-keyfacts { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 4px 0 18px; padding: 0; text-align: center; }
.fw-keyfacts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; }
.fw-keyfacts li + li { border-left: 1px solid #d9cfbc; }
.fw-keyfacts svg { margin-bottom: 4px; }
.fw-keyfacts strong { font-family: var(--font-cond); font-weight: 800; font-size: 17px; line-height: 1.05; text-transform: uppercase; }
.fw-keyfacts span { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.fw-sizes { margin: 0 0 14px; }
.fw-sizes__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; }
.fw-sizes__head > span { font-family: var(--font-cond); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.fw-sizes__head a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-cond); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); text-decoration: none; }
.fw-sizes__head a:hover { text-decoration: underline; }
.fw-sizes__list { margin: 0; font-family: var(--font-cond); font-weight: 600; font-size: 20px; letter-spacing: .08em; }
.fw-sizes__note { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

.woocommerce div.product p.cart { margin: 6px 0 8px; }
.woocommerce div.product p.cart .single_add_to_cart_button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  border-radius: 4px; background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; font-size: 24px; letter-spacing: .1em; }
.woocommerce div.product p.cart .single_add_to_cart_button:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.fw-etsy-note { margin: 0 auto 16px; max-width: 46ch; text-align: center; font-size: 14px; }

.fw-acc { border-top: 1px solid #d9cfbc; }
.fw-acc details { border-bottom: 1px solid #d9cfbc; }
.fw-acc summary { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 14px; min-height: 64px; padding: 8px 2px; cursor: pointer; list-style: none; }
.fw-acc summary::-webkit-details-marker { display: none; }
.fw-acc summary strong { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 19px; line-height: 1.1; text-transform: uppercase; }
.fw-acc summary small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.fw-acc summary i { position: relative; width: 18px; height: 18px; justify-self: end; }
.fw-acc summary i::before, .fw-acc summary i::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--ink); transition: transform .2s ease; }
.fw-acc summary i::after { transform: rotate(90deg); }
.fw-acc details[open] summary i::after { transform: rotate(0); }
.fw-acc summary:hover strong { text-decoration: underline; }
.fw-acc__body { padding: 0 2px 16px 46px; font-size: 15px; line-height: 1.55; color: #4a4540; }
.fw-acc__body p, .fw-acc__body ul { margin: 0 0 10px; }
.fw-acc__body ul { padding-left: 18px; }
.fw-acc__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fw-meet { margin: 14px 0 0; }
.fw-mockup-note { font-size: 12.5px; }

.woocommerce div.product .related.products { clear: both; padding-top: 34px; border-top: 1px solid var(--line); margin-top: 34px; }
.woocommerce div.product .related.products > h2 { font-size: clamp(28px, 7vw, 44px); margin: 0 0 14px; }

@media (min-width: 860px) {
  .woocommerce div.product div.images { width: 57%; }
  .woocommerce div.product div.summary { width: 38%; }
  .woocommerce div.product div.images.woocommerce-product-gallery { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; }
  .woocommerce div.product div.images .flex-viewport, .woocommerce div.product div.images > .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
  .woocommerce div.product div.images .flex-control-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; max-height: 640px; overflow-y: auto; overflow-x: hidden; }
  .woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 auto; width: 100% !important; }
  .woocommerce div.product div.images .fw-mockup-note { grid-column: 2; }
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger { right: 12px; }
  .woocommerce div.product div.images .flex-direction-nav { display: none; }
  .woocommerce div.product .product_title { font-size: clamp(44px, 4vw, 64px); }
}

/* =====================================================================
   Characters page, mockups 27/10: original artwork + name + mood + one line + link to the products.
   Phones: readable rows (portrait left); tablets 3, desktop 4 columns of tiles. Mascot apart.
   ===================================================================== */
.chars-page { max-width: 1400px; padding-top: 18px; }
.chars-head h1 { margin: 2px 0 6px; font-size: clamp(46px, 12vw, 104px); line-height: .9; }
.chars-head__lead p { margin: 0 0 18px; max-width: 56ch; font-size: 17px; color: var(--muted); }
.char-cards { display: grid; grid-template-columns: 1fr; gap: 10px; list-style: none; margin: 0; padding: 0; }
.char-card a { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; height: 100%; padding: 10px; border-radius: 10px; background: #f3ede0; text-decoration: none; color: var(--ink); }
.char-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.char-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.char-card__name { font-family: var(--font-cond); font-weight: 800; font-size: 21px; line-height: 1.02; text-transform: uppercase; }
.char-card__tag { font-weight: 600; font-size: 14px; color: var(--accent-deep); }
.char-card__story { font-size: 14px; line-height: 1.45; color: #4a4540; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.char-card__go { margin-top: 4px; font-family: var(--font-cond); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.char-card a:hover .char-card__go, .char-card a:focus-visible .char-card__go { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) {
  .char-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .char-card a { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; padding: 12px 12px 16px; }
  .char-card__body { padding: 4px 4px 0; }
  .char-card__name { font-size: 24px; }
  .char-card__go { margin-top: auto; padding-top: 8px; }
}
@media (min-width: 1100px) { .char-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.mascot-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin: 28px 0 8px; padding: 16px; border: 2px dashed #cbbfa8; border-radius: 12px; }
.mascot-card img { width: 96px; height: 96px; border-radius: 50%; }
.mascot-card h2 { margin: 2px 0 4px; font-size: clamp(24px, 6vw, 34px); }
.mascot-card p { margin: 0; font-size: 15px; color: #4a4540; }
@media (min-width: 860px) { .mascot-card { grid-template-columns: 120px 1fr; max-width: 760px; } .mascot-card img { width: 120px; height: 120px; } }

/* fw_card (gift guide, character pages) = the catalogue tile: beige, centred name + "From" price, full-width button. */
.fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .fw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .fw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.fw-card { gap: 0; padding: 10px 10px 12px; border-radius: 10px; background: #f3ede0; text-align: center; }
.fw-card__img { background: none; border-radius: 6px; mix-blend-mode: multiply; transform: scale(1.2); clip-path: inset(8.33%); }
.fw-card__title { margin: 10px 0 0; font-size: 16px; line-height: 1.05; }
.fw-card__price { margin: 6px 0 10px; font-size: 14px; color: var(--muted); }
.fw-card .fw-btn.fw-card__etsy { align-self: stretch; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; border-radius: 4px; font-size: 15px; letter-spacing: .06em; white-space: nowrap; }
.fw-card .fw-btn.fw-card__etsy:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
@media (min-width: 860px) { .fw-card { padding: 14px 16px 16px; } .fw-card__title { font-size: 19px; } }

/* =====================================================================
   Gift guide, mockups 27/10: title + crew band, four "For ..." cards, then the products of each.
   ===================================================================== */
.gift-page { max-width: 1400px; padding-top: 12px; }
.gift-hero { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.gift-hero__band img { display: block; width: 100%; height: auto; }
.gift-hero h1 { margin: 0; font-size: clamp(44px, 12.5vw, 112px); line-height: .88; text-align: center; }
.gift-hero h1 em { display: block; font-style: normal; color: var(--accent-deep); }
.gift-hero__lead p { margin: 10px auto 0; max-width: 60ch; font-size: 16px; line-height: 1.5; color: #4a4540; text-align: center; }
.gift-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gift-card { display: grid; grid-template-columns: minmax(0, 1fr) 38%; align-items: center; gap: 12px; padding: 18px 14px 18px 18px; border-radius: 12px; background: #f1e8d8; }
.gift-card:nth-child(2) { background: #f6e3dc; }
.gift-card__for { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.gift-card h2 { margin: 0 0 8px; font-size: clamp(30px, 8.5vw, 52px); line-height: .92; }
.gift-card h2 em { font-style: normal; color: var(--accent-deep); }
.gift-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: #4a4540; }
.gift-card__btn { min-height: 48px; padding: 0 14px; font-size: 15px; letter-spacing: .06em; text-align: left; }
.gift-card__art { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 6px 18px rgba(21, 20, 18, .18); transform: rotate(2deg); }
.gift-card:nth-child(even) .gift-card__art { transform: rotate(-2deg); }
.guide-section { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (max-width: 859px) { .guide-section { scroll-margin-top: calc(var(--header-h) + 60px); } }
@media (min-width: 860px) {
  .gift-hero { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); align-items: end; gap: 24px; }
  .gift-hero__band { order: 2; }
  .gift-hero h1, .gift-hero__lead p { text-align: left; }
  .gift-hero__lead p { margin-left: 0; font-size: 18px; }
  .gift-hero h1 { font-size: clamp(56px, 5.2vw, 92px); }
  .gift-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gift-card { padding: 24px 22px 24px 28px; grid-template-columns: minmax(0, 1fr) 40%; }
}

/* =====================================================================
   About, mockups 27/10: hero + crew band, the characters (text + avatar list), how it works, say hi.
   ===================================================================== */
.about-page { max-width: 1400px; padding-top: 16px; }
.about-rule { display: block; }
.about-rule::before, span.about-rule:empty { content: ""; display: block; width: 52px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--accent-deep); }
span.about-rule:empty::before { display: none; }
.about-hero { display: flex; flex-direction: column; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.about-hero h1 { margin: 0; font-size: clamp(50px, 15vw, 118px); line-height: .88; }
.about-hero h1 em { font-style: normal; color: var(--accent-deep); }
.about-hero__lead { margin: 12px 0 18px; max-width: 46ch; font-size: 17px; line-height: 1.5; color: #4a4540; }
.about-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.about-hero__ctas .fw-btn { min-height: 50px; }
.about-hero__band img { display: block; width: 100%; height: auto; }
.about-chars { display: grid; gap: 18px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.about-chars h2, .about-how h2, .about-hi h2 { margin: 0 0 10px; font-size: clamp(34px, 9vw, 60px); line-height: .95; }
.about-chars h2 em { font-style: normal; color: var(--accent-deep); }
.about-chars__text p { margin: 0 0 12px; max-width: 52ch; font-size: 17px; line-height: 1.5; color: #4a4540; }
.about-chars__list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 10px; border-radius: 12px; background: #f3ede0; }
.about-chars__list a, .about-chars__list li > div { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; min-height: 64px; padding: 4px 6px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.about-chars__list a:hover { background: #ebe2cf; }
.about-chars__list img { width: 56px; height: 56px; border-radius: 50%; }
.about-chars__list strong { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.about-chars__list small { display: block; font-size: 13.5px; color: var(--muted); }
.about-how { padding: 28px 0; border-bottom: 1px solid var(--line); }
.about-how h2 .about-rule { margin-bottom: 0; }
.about-steps { display: grid; gap: 18px; list-style: none; margin: 8px 0 22px; padding: 0; }
.about-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.about-steps svg { grid-row: span 2; color: var(--accent-deep); }
.about-steps strong { font-family: var(--font-cond); font-weight: 800; font-size: 21px; text-transform: uppercase; }
.about-steps span { font-size: 15px; line-height: 1.45; color: #4a4540; }
.about-how__etsy { min-height: 52px; }
.about-hi { padding: 28px 0 8px; }
.about-hi p { margin: 0; max-width: 60ch; font-size: 17px; color: #4a4540; }
.about-hi a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 860px) {
  .about-hero { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); align-items: center; gap: 28px; }
  .about-hero h1 { font-size: clamp(64px, 6.4vw, 112px); }
  .about-chars { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .about-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 859px) { .gift-card__btn { padding: 0 12px; font-size: 14px; letter-spacing: .04em; white-space: nowrap; } }
/* No layout shift while the gallery script starts: before it runs only the first photo shows, and phones
   reserve the final height (square photo + thumbnail strip). */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2):not([style*="float"]) { display: none; }
@media (max-width: 859px) {
  .woocommerce div.product div.images.woocommerce-product-gallery { min-height: calc(100vw - 2 * var(--gutter) + 86px); }
  /* the slider stacks every photo for one frame while it starts: never taller than the square photo */
  .woocommerce div.product div.images .flex-viewport { max-height: calc(100vw - 2 * var(--gutter)); overflow: hidden; }
}

/* =====================================================================
   28/10 (Karim): every button rounded, room under the crew's sneakers, footer as in the mockups.
   ===================================================================== */
.fw-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce a.button.alt,
.woocommerce div.product p.cart .single_add_to_cart_button,
.woocommerce ul.products li.product a.button.fw-card-etsy, .fw-card .fw-btn.fw-card__etsy { border-radius: 999px; }
.home-hero .hero-mascot { margin-top: 18px; }
@media (min-width: 860px) { .home-hero .hero-mascot { margin-top: 0; } }

/* Footer, phones (mobile mockups): everything centred: logo, menu on one line, icons, then legal + note. */
@media (max-width: 859px) {
  .footer-row { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .footer-brand p { max-width: none; margin-top: 4px; }
  .footer-links ul { justify-content: center; gap: 4px 16px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; letter-spacing: .1em; }
  .footer-social { justify-content: center; gap: 6px; }
  .footer-social a { width: 44px; height: 44px; }
  .footer-social svg { width: 22px; height: 22px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-legal { justify-content: center; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 32px; }
}
/* Footer, desktop (desktop mockups): logo left, menu centred, icons right; legal + note underneath. */
@media (min-width: 860px) {
  .footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .footer-links ul { justify-content: center; }
  .footer-social { justify-content: flex-end; }
}

/* =====================================================================
   28/10 copy of the mobile home mockup, block 1 (header + hero). Sizes follow the mockup as a share of
   the screen width (vw); minimums keep text readable and touch targets 44px.
   ===================================================================== */
.home-hero .hero-mascot span { color: var(--muted); }
.fw-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce a.button.alt,
.woocommerce div.product p.cart .single_add_to_cart_button,
.woocommerce ul.products li.product a.button.fw-card-etsy, .fw-card .fw-btn.fw-card__etsy { border-radius: 8px; }
@media (max-width: 859px) {
  :root { --header-h: 54px; }
  .brand .brand__logo { height: 32px; }
  .brand span { font-size: 20px; }

  .home-hero { display: block; position: relative; overflow: hidden; padding: 3.4vw var(--gutter) 0; border-bottom: 1px solid var(--line); }
  .home-hero__big { position: relative; z-index: 2; font-size: 16.6vw; line-height: .79; }
  .home-hero__side { position: relative; z-index: 3; width: 44%; padding-top: 3vw; }
  .home-hero__sub { font-size: 5.2vw; line-height: .9; }
  .home-hero__lead { margin: 3vw 0 4.2vw; font-size: 12.5px; line-height: 1.55; }
  .home-hero__cta { width: 112%; min-height: max(46px, 8.2vw); padding: 0 10px; font-size: max(15px, 4.4vw); letter-spacing: .06em; box-shadow: 0 3px 8px rgba(166, 58, 30, .25); }
  /* the crew: 56% of the width tall, from the "MOOD" line to just above the mascot line, touching the right edge */
  .home-hero__crew { position: absolute; z-index: 1; right: 0; bottom: calc(16px + 6vw); margin: 0; }
  .trio { --F: 56vw; --k: .27; }
  .home-hero .hero-mascot { position: relative; z-index: 2; margin: 7.6vw 0 0; padding: 0 0 4.4vw 36%; text-align: center; font-size: 10.5px; letter-spacing: .1em; }
}
@media (max-width: 859px) {
  :root { --header-h: 48px; }
  .brand .brand__logo { height: 28px; }
  .brand span { font-size: 17px; }
  .home-hero__big { font-size: 13.2vw; line-height: .8; }
  .home-hero__side { width: 40%; padding-top: 3.4vw; }
  .home-hero__sub { font-size: 4.45vw; line-height: .92; }
  .home-hero__sub em { display: block; }
  .home-hero__lead { margin: 3.4vw 0 4.2vw; font-size: 12px; line-height: 1.6; }
  .home-hero__cta { width: 105%; min-height: 44px; font-size: max(13px, 3.75vw); }
  .home-hero .hero-mascot { margin-top: 6.4vw; padding-left: 34%; font-size: 9.5px; letter-spacing: .07em; }
}
@media (max-width: 859px) {
  .home-hero__side { width: 37%; }
  .home-hero__lead { width: 108%; font-size: 11.5px; line-height: 1.5; color: #5a544d; }
}
@media (max-width: 859px) {
  .trio { --F: 61vw; }
  .home-hero__lead { width: 100%; }
  .home-hero__cta { width: 43vw; padding: 0 8px; gap: .4em; }
}
@media (max-width: 859px) { .trio { --F: 57vw; --k: .19; } }
@media (max-width: 859px) { .home-hero__crew { right: -4vw; } }
@media (max-width: 859px) { .trio { --F: min(57vw, 330px); } }
/* 28/10 bis (Karim, block 1): mockup button colour, smaller button and text, feet apart, crew a little higher. */
.fw-btn--accent, .home-hero__cta { background: #c0411e; border-color: #c0411e; }
@media (max-width: 859px) {
  .home-hero__cta { width: auto; min-height: 42px; padding: 0 14px; font-size: 13.5px; letter-spacing: .07em; }
  .home-hero__lead { font-size: 10.5px; line-height: 1.55; }
  .trio { --k: .1; --F: min(calc((74vw - 16px) / 1.415), 300px); }
  .home-hero__crew { right: -3vw; bottom: calc(16px + 12vw); }
}
@media (max-width: 859px) {
  .home-hero__lead { font-size: 9.5px; line-height: 1.6; }
  .home-hero .hero-mascot { margin-top: 2vw; }
  .home-hero__crew { bottom: calc(16px + 8.5vw); }
}
/* 28/10 ter (Karim): thinner button, paragraph on 3 lines, crew higher (bear's head just under "YOUR"), cat a bit right. */
.m-br { display: none; }
@media (max-width: 859px) {
  .m-br { display: inline; }
  .home-hero__lead { width: 125%; font-size: 8.6px; line-height: 1.65; white-space: nowrap; }
  .home-hero__cta { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
  .home-hero__crew { top: calc(3.4vw + 10.4vw); bottom: auto; }
  .trio__cat { left: calc((.959 - 2 * var(--k)) * var(--F) + 24px); }
  .trio { width: calc((1.615 - 2 * var(--k)) * var(--F) + 24px); }
  .home-hero .hero-mascot { margin-top: 4vw; }
}
@media (max-width: 859px) {
  .trio { --F: min(calc((69vw - 24px) / 1.415), 285px); }
  .home-hero .hero-mascot { margin-top: 3vw; }
}
@media (max-width: 380px) { .home-hero__lead { font-size: 8.2px; } }
/* 28/10 quater (Karim): buttons drawn like the mockup (semi-bold letters, wide spacing, small radius, flat),
   mascot line right under the sneakers. */
.fw-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce a.button.alt,
.woocommerce div.product p.cart .single_add_to_cart_button,
.woocommerce ul.products li.product a.button.fw-card-etsy, .fw-card .fw-btn.fw-card__etsy { border-radius: 5px; font-weight: 600; letter-spacing: .1em; box-shadow: none; }
.home-hero__cta { box-shadow: none; }
.home-hero__crew .hero-mascot { position: static; margin: 8px 0 0; padding: 0; text-align: center; }
@media (max-width: 859px) {
  .home-hero { min-height: calc(13.8vw + min(calc((69vw - 24px) / 1.415), 285px) + 36px); padding-bottom: 4vw; }
  .home-hero__cta { min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .1em; }
  .home-hero__crew .hero-mascot { margin-top: 2px; font-size: 9.5px; letter-spacing: .07em; }
}
.home-hero__crew .hero-mascot { position: relative; z-index: 4; margin-top: 10px; white-space: nowrap; }
@media (max-width: 859px) { .home-hero__crew .hero-mascot { margin-top: 6px; } }
@media (max-width: 400px) { .home-hero__crew .hero-mascot { padding-right: 3vw; text-align: right; font-size: 8.5px; letter-spacing: .03em; } }
@media (max-width: 400px) { .home-hero__crew .hero-mascot { padding-right: calc(3vw + 12px); } }

/* 28/10 copy of the mobile home mockup, block 2 (featured designs). */
@media (max-width: 859px) {
  .featured { padding: 3vw 0 4.6vw; border-top: 0; }
  .featured__head { margin-bottom: 2.6vw; }
  .featured__head h2 { font-size: 6.2vw; }
  .featured__swipe { font-size: 11px; letter-spacing: .12em; }
  .featured__track { gap: 6px; padding: 2px 9px 8px; scroll-padding-inline: 9px; }
  .fcard { flex: 0 0 25.4vw; max-width: none; }
  .fcard a { border-radius: 6px; background: #f4efe4; box-shadow: 0 1px 3px rgba(21, 20, 18, .08); }
  .fcard__img { aspect-ratio: 188 / 235; object-fit: cover; object-position: 50% 0; transform: scale(1.12); transform-origin: 50% 0; }
  .fcard__body { position: relative; z-index: 1; gap: 4px; padding: 7px 5px 9px 7px; background: #faf7f0; }
  .fcard__name { font-size: 12.2px; font-weight: 600; line-height: 1.12; }
  .fcard__go { width: 22px; height: 22px; background: #ebe5d9; font-size: 0; }
  .fcard__go::before { content: ""; width: 11px; height: 11px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151412' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
}
@media (max-width: 859px) {
  .fcard__img { transform: scale(1.3); }
  .fcard__name { font-size: 10px; letter-spacing: .02em; }
}
@media (max-width: 859px) { .fcard__img { transform: none; object-fit: contain; object-position: 50% 100%; } }
@media (max-width: 859px) { .fcard__img { aspect-ratio: 188 / 200; } }

/* 28/10 copy of the mobile home mockup, block 3 (Christmas banner): shorter, big cat from the hat to the belly. */
@media (max-width: 859px) {
  .xmas-banner { display: block; height: 38vw; min-height: 150px; }
  .xmas-banner__text { position: relative; z-index: 2; padding: 4vw 0 0 var(--gutter); }
  .xmas-banner .label { margin: 0 0 1vw; font-size: max(9px, 2.5vw); letter-spacing: .1em; }
  .xmas-banner h2 { margin: 0 0 1.2vw; font-size: 8.4vw; line-height: .86; }
  .xmas-banner p { margin: 0 0 2.6vw; font-size: max(10px, 2.8vw); }
  .xmas-banner .fw-btn { min-height: max(30px, 7.6vw); padding: 0 3.6vw; font-size: max(11px, 3.3vw); }
  .xmas-banner__cat { position: absolute; z-index: 1; left: 39vw; top: -4vw; width: 58vw; height: auto; margin: 0; }
}
@media (max-width: 859px) {
  .xmas-banner__text { width: 48vw; }
  .xmas-banner h2 { font-size: 9vw; }
  .xmas-banner p { white-space: nowrap; }
  .xmas-banner__cat { top: -1.5vw; left: 38vw; width: 56vw; }
}
@media (max-width: 859px) {
  .xmas-banner { height: 40vw; }
  .xmas-banner__text { padding-top: 3.6vw; }
  .xmas-banner h2 { font-size: 8.6vw; line-height: .84; margin-bottom: .8vw; }
  .xmas-banner p { margin-bottom: 2.2vw; }
}

/* 28/10 copy of the mobile home mockup, block 4 (meet the crew): title and tag on one row, close-up portraits. */
@media (max-width: 859px) {
  .crew-row { padding: 4vw 0 5vw; }
  .crew-row__head { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 3vw; }
  .crew-row__head h2 { font-size: 6.6vw; }
  .crew-row__tag { font-size: 3.4vw; line-height: 1.05; }
  .crew-row ul { gap: 1.2vw; padding: 0 1.6vw; }
  .crew-row__item img { max-width: none; width: 100%; background: #efe7d6; object-fit: cover; object-position: 50% 0; transform: scale(1); }
  .crew-row__item { overflow: visible; }
  .crew-row__item strong { margin-top: 2vw; font-size: 3.2vw; white-space: nowrap; }
  .crew-row__item span { font-size: 2.6vw; line-height: 1.4; }
  .crew-row__all { display: none; }
}
@media (max-width: 859px) { .crew-row__item img { background: none; } }
@media (max-width: 859px) {
  .crew-row ul { gap: 2.4vw; padding: 0 3vw; }
  .crew-row__item strong { font-size: max(10px, 2.75vw); }
  .crew-row__item span { font-size: max(9px, 2.3vw); }
}

/* 28/10 copy of the mobile home mockup, block 5: compact trust strip; footer = brand | menu, rule, icons | legal + note. */
@media (max-width: 859px) {
  .trust { margin: 2vw 3vw 4vw; padding: 3.4vw 2vw; border-radius: 8px; }
  .trust__item { gap: 2.4vw; padding: 0 2.6vw; }
  .trust__item svg { width: 7vw; height: 7vw; }
  .trust__item strong { font-size: max(11px, 3.1vw); }
  .trust__item span { font-size: max(9px, 2.35vw); line-height: 1.45; }

  .site-footer { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand links" "social legal" "social small"; column-gap: 0; padding: 5vw 4.8vw 4vw; }
  .site-footer .footer-row, .site-footer .footer-bottom { display: contents; }
  .footer-brand { grid-area: brand; text-align: left; padding-bottom: 3.6vw; }
  .footer-brand__logo { font-size: 5vw; }
  .site-footer .footer-brand__logo img { height: 8vw; }
  .footer-brand p { margin-top: 1vw; font-size: max(10px, 2.5vw); line-height: 1.3; max-width: 26ch; text-align: left; }
  .footer-links { grid-area: links; align-self: center; padding-bottom: 3.6vw; }
  .footer-links ul { justify-content: flex-end; gap: 2px 4.2vw; }
  .footer-links a { min-height: 32px; font-size: max(9px, 2.3vw); letter-spacing: .06em; }
  .footer-social { grid-area: social; align-self: start; justify-content: flex-start; gap: 1vw; padding-top: 2.6vw; border-top: 1px solid var(--dark-line); }
  .footer-social a { width: 40px; height: 40px; place-items: center start; }
  .footer-social svg { width: 17px; height: 17px; }
  .footer-legal { grid-area: legal; justify-content: flex-end; gap: 0 3vw; padding-top: 2.6vw; border-top: 1px solid var(--dark-line); }
  .footer-legal a { min-height: 26px; font-size: max(9px, 2.3vw); }
  .site-footer .footer-small { grid-area: small; text-align: right; font-size: max(9px, 2.3vw); }
}
@media (max-width: 859px) {
  .footer-brand__logo { font-size: 4.3vw; gap: 2vw; }
  .site-footer .footer-brand__logo img { height: 6.6vw; }
  .footer-brand p { max-width: 20ch; }
  .footer-links ul { flex-wrap: nowrap; gap: 0 3.4vw; }
  .footer-links a { font-size: max(8.5px, 2.15vw); letter-spacing: .05em; white-space: nowrap; }
  .footer-social { gap: 0; }
  .footer-social a { width: 36px; height: 36px; }
  .footer-social svg { width: 15px; height: 15px; }
  .footer-legal { flex-wrap: nowrap; gap: 0 2.4vw; }
  .footer-legal a { font-size: max(8.5px, 2.1vw); white-space: nowrap; min-height: 22px; }
  .site-footer .footer-small { font-size: max(8.5px, 2.1vw); line-height: 1.5; }
}
@media (max-width: 859px) {
  .site-footer { grid-template-columns: auto minmax(0, 1fr); padding-left: 4.8vw; padding-right: 4.8vw; }
  .footer-links ul { gap: 0 2.6vw; }
}
@media (max-width: 400px) { .footer-links ul { flex-wrap: wrap; gap: 0 3vw; } .footer-links a { min-height: 24px; } .footer-legal { flex-wrap: wrap; } }
@media (max-width: 400px) {
  .footer-links ul, .footer-legal { flex-wrap: nowrap; gap: 0 2.2vw; }
  .footer-links a, .footer-legal a { font-size: 8px; letter-spacing: .03em; }
  .footer-social a { width: 30px; }
}
@media (max-width: 365px) { .footer-links ul, .footer-legal { flex-wrap: wrap; } }

/* =====================================================================
   28/10 copy of the mobile SHOP mockup: big title, one-line intro, small pills, tight 2-column tiles
   (big garment, small centred name, small "From" price, compact black button).
   ===================================================================== */
@media (max-width: 859px) {
  .post-type-archive-product .page-wrap, .tax-product_cat .page-wrap { padding: 3.4vw 2.6vw 6vw; }
  .shop-head { margin: 0 1.4vw 3.4vw; }
  .shop-head__title { font-size: 11.6vw; line-height: .84; }
  .shop-head__lead { margin: 1.6vw 0 3.6vw; font-size: max(10px, 2.75vw); line-height: 1.4; }
  .fw-chips ul { gap: 2vw; flex-wrap: nowrap; }
  .fw-chips a { min-height: 34px; padding: 0 4.6vw; font-size: max(11px, 2.9vw); }
  .woocommerce ul.products { gap: 2.2vw; }
  .woocommerce ul.products li.product { padding: 2vw 2vw 2.6vw; border-radius: 6px; background: #f4eee3; }
  .woocommerce ul.products li.product a img { margin: 0 0 1.6vw; transform: scale(1.32); clip-path: inset(12%); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 0; font-size: max(10.5px, 2.85vw); line-height: 1.1; }
  .woocommerce ul.products li.product .price { margin: .8vw 0 1.8vw; font-size: max(10px, 2.6vw); }
  .woocommerce ul.products li.product a.button.fw-card-etsy { min-height: 32px; font-size: max(10.5px, 2.85vw); letter-spacing: .08em; border-radius: 4px; }
}
@media (max-width: 859px) {
  .woocommerce ul.products li.product { overflow: hidden; }
  .shop-head__title { font-size: 14.2vw; }
  .shop-head__lead { font-size: max(10.5px, 3vw); }
  .fw-chips ul { justify-content: space-between; }
  .fw-chips li { flex: 1 1 auto; }
  .fw-chips a { justify-content: center; width: 100%; padding: 0 3vw; }
  .fw-chips li:first-child { flex: 0 0 18%; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: max(11px, 3.2vw); letter-spacing: .01em; }
  .woocommerce ul.products li.product .price .fw-from { font-size: max(10px, 2.6vw); }
  .woocommerce ul.products li.product .price .fw-from b { font-size: 1.08em; }
  .woocommerce ul.products li.product a.button.fw-card-etsy { font-size: max(11px, 3vw); font-weight: 700; }
}
@media (max-width: 859px) {
  .woocommerce ul.products li.product a img { transform: scale(1.18); clip-path: inset(7.6%); margin-bottom: 2.4vw; }
  .shop-head__title { font-size: 15.6vw; line-height: .82; }
}
@media (max-width: 859px) { .page-wrap .shop-head__title { font-size: 15.6vw; line-height: .82; } }
@media (max-width: 859px) { .shop-head__lead { font-size: max(11px, 3.3vw); } }

/* =====================================================================
   28/10 copy of the mobile CHARACTERS mockup: centred title, horizontal cards (picture | animal, name,
   mood, red "View designs"); mascot card with a grey "Not for sale" box. 2 columns on desktop.
   ===================================================================== */
.chars-page { max-width: 1240px; padding: 4vw 3vw 6vw; }
.chars-head { text-align: center; margin: 0 0 4vw; }
.chars-head h1 { margin: 0; font-size: clamp(42px, 15vw, 96px); line-height: .9; }
.chars-head__sub { margin: 2.4vw 0 1.6vw; font-family: var(--font-cond); font-weight: 600; font-size: clamp(13px, 3.6vw, 22px); letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; color: #3b3732; }
.chars-head__lead { margin: 0 auto; max-width: 52ch; font-size: clamp(12px, 3.3vw, 17px); line-height: 1.45; color: #3b3732; }
.crew-cards { display: grid; gap: 2.2vw; list-style: none; margin: 0; padding: 0; }
.crew-card { display: grid; grid-template-columns: 47% 1fr; align-items: center; min-height: 0; overflow: hidden; border-radius: 8px; background: #f4eee3; }
.crew-card__img { display: block; width: 100%; height: auto; align-self: end; }
.crew-card--art .crew-card__img { width: 84%; margin: 8%; border-radius: 6px; align-self: center; }
.crew-card__body { padding: 3vw 4vw 3vw 1vw; }
.crew-card__animal { display: block; font-family: var(--font-cond); font-weight: 700; font-size: clamp(11px, 3.2vw, 18px); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.crew-card__name { margin: 0 0 1.6vw; font-size: clamp(26px, 8.4vw, 44px); line-height: .92; }
.crew-card__line { margin: 0 0 3vw; font-size: clamp(11px, 3.2vw, 16px); line-height: 1.4; color: #3b3732; }
.page-wrap .crew-card__btn { width: 100%; min-height: 40px; padding: 0 8px; font-size: clamp(13px, 4vw, 20px); background: #b13b1c; border-color: #b13b1c; }
.crew-card__nfs { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 2vw; border-radius: 5px; background: #e6e0d5; text-align: center; }
.crew-card__nfs strong { font-family: var(--font-cond); font-weight: 700; font-size: clamp(13px, 3.8vw, 19px); letter-spacing: .1em; text-transform: uppercase; }
.crew-card__nfs span { font-family: var(--font-cond); font-weight: 600; font-size: clamp(9px, 2.5vw, 13px); letter-spacing: .12em; text-transform: uppercase; color: #4a4540; }
@media (min-width: 860px) {
  .chars-page { padding: 32px var(--gutter) 56px; }
  .chars-head { margin-bottom: 32px; }
  .chars-head__sub { margin: 16px 0 10px; }
  .crew-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .crew-card__body { padding: 20px 28px 20px 8px; }
  .crew-card__name { margin-bottom: 10px; }
  .crew-card__line { margin-bottom: 18px; }
  .crew-card__nfs { padding: 12px; }
}
@media (max-width: 859px) {
  .crew-card { grid-template-columns: 44% 1fr; }
  .crew-card__name { font-size: 7.1vw; margin-bottom: 1.2vw; }
  .crew-card__line { font-size: max(11px, 2.9vw); margin-bottom: 2.6vw; }
  .page-wrap .crew-card__btn { min-height: 36px; font-size: max(13px, 3.7vw); }
  .crew-card__body { padding: 2.6vw 4vw 2.6vw 1vw; }
}
@media (max-width: 859px) {
  .crew-card__img { height: 40vw; object-fit: cover; object-position: 50% 0; }
  .crew-card--art .crew-card__img { height: auto; }
  .crew-card__name { font-size: 7.6vw; }
}
@media (min-width: 860px) { .crew-card__img { height: 300px; object-fit: cover; object-position: 50% 0; } .crew-card--art .crew-card__img { height: auto; } }

/* =====================================================================
   28/10 copy of the mobile GIFT GUIDE mockup: crew band, centred two-colour title, short line,
   compact cards (text + dark button left, characters right), 3-item reassurance row.
   ===================================================================== */
.gift-page { padding: 0 2.6vw 6vw; }
.gift-page .gift-hero { display: block; margin: 0 0 3.4vw; text-align: center; }
.gift-hero__band { display: block; margin: 0 -2.6vw; }
.gift-hero__band img { display: block; width: 100%; height: auto; }
.gift-page .gift-hero h1 { margin: -2vw 0 0; font-size: 12.4vw; line-height: .84; text-align: center; }
.gift-page .gift-hero h1 em { display: block; color: #b13b1c; }
.gift-hero__lead { margin: 2.4vw auto 0; max-width: 46ch; font-size: max(11px, 3.1vw); line-height: 1.35; color: #3b3732; }
.gift-page .gift-cards { grid-template-columns: 1fr; gap: 2.2vw; }
.gift-page .gift-card { grid-template-columns: 52% 48%; gap: 0; align-items: stretch; min-height: 0; padding: 0; overflow: hidden; border-radius: 8px; background: #f1e7d7; }
.gift-page .gift-card:nth-child(2) { background: #f7e3da; }
.gift-page .gift-card__text { align-self: center; padding: 3.4vw 0 3.6vw 4vw; }
.gift-page .gift-card__for { font-size: max(10px, 2.9vw); }
.gift-page .gift-card h2 { margin: 0 0 1.6vw; font-size: 8.2vw; line-height: .9; }
.gift-page .gift-card h2 em { color: #b13b1c; }
.gift-page .gift-card p { margin: 0 0 2.8vw; font-size: max(10.5px, 2.9vw); line-height: 1.35; }
.gift-page .gift-card__btn { min-height: 32px; padding: 0 3.2vw; font-size: max(10px, 2.8vw); letter-spacing: .08em; white-space: nowrap; }
.gift-page .gift-card__art { align-self: end; width: 100%; height: 100%; max-height: 46vw; object-fit: cover; object-position: 50% 0; border-radius: 0; box-shadow: none; transform: none; }
.gift-page .gift-card:nth-child(even) .gift-card__art { transform: none; }
.gift-trust { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 4vw 0 2vw; padding: 0; }
.gift-trust li { display: flex; gap: 2vw; align-items: flex-start; padding: 0 2vw; }
.gift-trust li + li { border-left: 1px solid #d9cfbc; }
.gift-trust svg { flex: none; width: 7vw; height: 7vw; max-width: 34px; max-height: 34px; }
.gift-trust strong { display: block; font-family: var(--font-cond); font-weight: 800; font-size: max(9.5px, 2.6vw); line-height: 1.1; text-transform: uppercase; }
.gift-trust span { display: block; margin-top: 2px; font-size: max(9px, 2.3vw); line-height: 1.35; color: var(--muted); }
@media (min-width: 860px) {
  .gift-page { max-width: 1240px; padding: 0 var(--gutter) 56px; }
  .gift-hero__band { margin: 0 auto; max-width: 980px; }
  .gift-page .gift-hero h1 { margin-top: -18px; font-size: clamp(56px, 6vw, 96px); }
  .gift-hero__lead { margin-top: 14px; font-size: 18px; }
  .gift-page .gift-hero { margin-bottom: 28px; }
  .gift-page .gift-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gift-page .gift-card__text { padding: 24px 0 24px 28px; }
  .gift-page .gift-card h2 { font-size: clamp(36px, 3.6vw, 52px); margin-bottom: 10px; }
  .gift-page .gift-card p { font-size: 15px; margin-bottom: 16px; }
  .gift-page .gift-card__btn { min-height: 44px; font-size: 15px; padding: 0 18px; }
  .gift-page .gift-card__art { max-height: 300px; }
  .gift-trust { margin: 32px 0 8px; }
  .gift-trust li { gap: 12px; padding: 0 20px; }
  .gift-trust strong { font-size: 16px; } .gift-trust span { font-size: 14px; }
}
@media (max-width: 859px) {
  .gift-page .gift-card { grid-template-columns: 58% 42%; }
  .gift-page .gift-card h2 { font-size: 7.6vw; white-space: nowrap; }
  .gift-page .gift-card p { font-size: max(10px, 2.7vw); }
  .gift-page .gift-card__art { height: auto; max-height: none; object-fit: contain; object-position: 100% 100%; align-self: end; }
  .gift-page .gift-card--cat-lovers .gift-card__art, .gift-page .gift-card--christmas-hosts .gift-card__art { width: 118%; max-width: none; margin-left: -18%; }
  .gift-page .gift-hero h1 { margin-top: -4vw; }
}
@media (max-width: 859px) {
  .gift-page .gift-card { display: block; position: relative; min-height: 46vw; }
  .gift-page .gift-card__text { position: relative; z-index: 2; width: 52%; padding: 3.4vw 0 3.6vw 4vw; }
  .gift-page .gift-card__art, .gift-page .gift-card--cat-lovers .gift-card__art, .gift-page .gift-card--christmas-hosts .gift-card__art {
    position: absolute; z-index: 1; right: 0; bottom: 0; top: 3vw; width: auto; height: calc(100% - 3vw); max-width: 56%; margin: 0; object-fit: contain; object-position: 100% 100%; }
  .gift-page .gift-card h2 { white-space: normal; }
  .gift-page .gift-card--christmas-hosts h2 { font-size: 7vw; }
}
@media (max-width: 859px) { .gift-page .gift-card__art, .gift-page .gift-card--cat-lovers .gift-card__art, .gift-page .gift-card--christmas-hosts .gift-card__art { max-width: 54%; top: 1vw; height: calc(100% - 1vw); } }
@media (max-width: 859px) {
  .gift-page .gift-card { min-height: 40vw; }
  .gift-page .gift-card p { max-width: 34vw; font-size: max(10px, 2.75vw); }
  .gift-page .gift-card__art, .gift-page .gift-card--cat-lovers .gift-card__art, .gift-page .gift-card--christmas-hosts .gift-card__art { max-width: 60%; }
}
@media (max-width: 859px) {
  .gift-page .gift-card--cat-lovers .gift-card__art, .gift-page .gift-card--christmas-hosts .gift-card__art { top: -2vw; height: calc(100% + 2vw); max-width: 66%; }
  .gift-page .gift-card--christmas-hosts h2 { white-space: nowrap; font-size: 6.4vw; }
}

/* =====================================================================
   28/10 copy of the mobile PRODUCT mockup: big flat photo, 5 square thumbnails across, tight title block,
   compact price, smaller description; sizes stay plain text (chosen on Etsy).
   ===================================================================== */
@media (max-width: 859px) {
  .single-product .page-wrap { padding: 2vw 3.6vw 8vw; }
  .woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
  .woocommerce div.product div.images .flex-viewport { background: none; border-radius: 0; }
  .woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2vw; margin-top: 2vw; overflow: hidden; }
  .woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; flex: none; }
  .woocommerce div.product div.images .flex-control-thumbs li:nth-child(n+6) { display: none; }
  .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: 3px; aspect-ratio: 1; object-fit: cover; }
  .woocommerce div.product div.images .flex-direction-nav a { width: 36px; height: 36px; background: rgba(254, 250, 238, .95); }
  .woocommerce div.product .product_title { margin-top: 1vw; font-size: 9.6vw; line-height: .95; }
  .fw-kind { margin-top: 1vw; font-size: 4.6vw; }
  .fw-price { margin: 2vw 0 2.6vw; font-size: 13px; }
  .fw-price b { font-size: 6.4vw; }
  .woocommerce div.product .woocommerce-product-details__short-description p { margin-bottom: 3.6vw; font-size: max(12px, 3.4vw); line-height: 1.45; }
  .fw-keyfacts { margin-bottom: 4vw; }
  .fw-keyfacts svg { width: 8.6vw; height: 8.6vw; }
  .fw-keyfacts strong { font-size: max(13px, 3.6vw); }
  .fw-keyfacts span { font-size: max(9px, 2.5vw); }
  .fw-sizes__head > span { font-size: 5vw; }
  .fw-sizes__head a { font-size: max(13px, 3.6vw); }
  .woocommerce div.product p.cart .single_add_to_cart_button { min-height: 50px; font-size: 5.4vw; border-radius: 3px; }
  .fw-etsy-note { font-size: max(11px, 3vw); }
  .fw-acc summary strong { font-size: max(15px, 4vw); }
  .fw-acc summary small { font-size: max(11px, 3vw); }
}
@media (max-width: 859px) {
  .woocommerce div.product div.images { margin-bottom: 3vw; }
  .woocommerce div.product div.images.woocommerce-product-gallery { min-height: 0; }
  .woocommerce div.product div.images .woocommerce-product-gallery__image img { transform: scale(1.16); }
  .woocommerce div.product div.images .flex-viewport { overflow: hidden; }
  .woocommerce div.product .woocommerce-product-details__short-description p { font-size: max(12px, 3.2vw); }
  .fw-sizes__list { font-size: 5vw; }
}
@media (max-width: 859px) { .woocommerce div.product div.images .woocommerce-product-gallery__image img { clip-path: inset(6.9%); } }

/* =====================================================================
   28/10 copy of the mobile ABOUT mockup.
   ===================================================================== */
.about-page { max-width: 1240px; padding: 3vw 4vw 6vw; }
.about-top { text-align: center; }
.about-top h1 { margin: 0; font-size: 15.4vw; line-height: .86; }
.about-top h1 em { font-style: normal; color: #b13b1c; }
.about-top__crew { display: block; margin: 2vw -4vw 0; }
.about-top__crew img { display: block; width: 100%; height: auto; }
.about-intro { padding: 4vw 1vw 3vw; }
.about-intro h2 { margin: 0 0 1.4vw; font-size: 6.6vw; line-height: .95; }
.about-intro h2 em { display: block; font-style: normal; color: #b13b1c; }
.about-intro p { margin: 0 0 3vw; max-width: 50ch; font-size: max(12px, 3.3vw); line-height: 1.45; color: #2f2b27; }
.about-intro__ctas { display: flex; flex-wrap: wrap; gap: 2vw; }
.about-intro__ctas .fw-btn { min-height: 40px; padding: 0 4vw; font-size: max(12px, 3.4vw); }
.about-card { position: relative; display: block; min-height: 66vw; overflow: hidden; margin: 2vw 0 0; border-radius: 8px; background: #f0e9dd; }
.about-card__text { position: relative; z-index: 2; width: 46%; padding: 4vw 0 4vw 4vw; }
.about-card h2 { margin: 0; font-size: 8vw; line-height: .9; }
.about-page .about-rule { display: block; width: 11vw; max-width: 60px; height: 3px; margin: 2.2vw 0; border-radius: 2px; background: #b13b1c; }
.about-page .about-rule::before { display: none; }
.about-card p { margin: 0 0 2vw; font-size: max(11px, 3vw); line-height: 1.4; color: #2f2b27; }
.about-card .text-link { font-size: max(11px, 3vw); }
.about-card__img { position: absolute; z-index: 1; right: 0; bottom: 0; width: 64%; height: auto; }
.about-how { padding: 5vw 1vw 2vw; border: 0; }
.about-how h2 { margin: 0; font-size: 8.6vw; }
.about-page .about-steps { position: relative; grid-template-columns: repeat(3, 1fr); gap: 2vw; margin: 3vw 0 4vw; text-align: center; }
.about-page .about-steps li { display: flex; flex-direction: column; align-items: center; gap: 1vw; }
.about-page .about-steps li + li::before { content: "→"; position: absolute; transform: translate(-17vw, 4vw); color: #b13b1c; font-size: 5vw; }
.about-page .about-steps svg { grid-row: auto; width: 10vw; height: 10vw; color: var(--ink); }
.about-page .about-steps strong { font-size: max(12px, 3.6vw); }
.about-page .about-steps span { font-size: max(10px, 2.8vw); line-height: 1.35; }
.about-how__etsy { display: flex; width: 82%; margin: 0 auto; min-height: 46px; gap: 3vw; font-size: max(13px, 3.8vw); border-radius: 8px; }
.about-how__e { padding: 4px; border-radius: 4px; background: #f1641e; box-sizing: content-box; }
.about-hi { padding: 5vw 1vw 0; text-align: center; }
.about-hi h2 { font-size: 7vw; }
.about-hi p { margin: 0 auto; font-size: max(12px, 3.2vw); }
@media (min-width: 860px) {
  .about-page { padding: 28px var(--gutter) 56px; }
  .about-top h1 { font-size: clamp(64px, 7vw, 120px); }
  .about-top__crew { margin: 16px auto 0; max-width: 1000px; }
  .about-intro { padding: 32px 0 24px; text-align: center; }
  .about-intro h2 { font-size: 48px; } .about-intro p { margin: 0 auto 20px; font-size: 18px; }
  .about-intro__ctas { justify-content: center; } .about-intro__ctas .fw-btn { min-height: 50px; font-size: 18px; padding: 0 24px; }
  .about-card { min-height: 380px; }
  .about-card__text { width: 44%; padding: 40px 0 40px 44px; }
  .about-card h2 { font-size: 56px; } .about-page .about-rule { margin: 16px 0; }
  .about-card p, .about-card .text-link { font-size: 17px; }
  .about-card__img { width: 58%; }
  .about-how { padding: 40px 0 16px; } .about-how h2 { font-size: 56px; }
  .about-page .about-steps { margin: 24px 0 32px; gap: 40px; }
  .about-page .about-steps li + li::before { transform: translate(-200px, 20px); font-size: 28px; }
  .about-page .about-steps svg { width: 48px; height: 48px; }
  .about-page .about-steps strong { font-size: 22px; } .about-page .about-steps span { font-size: 15px; max-width: 30ch; }
  .about-how__etsy { width: auto; display: inline-flex; padding: 0 32px; font-size: 20px; }
  .about-how { text-align: center; } .about-how .about-rule { margin-left: auto !important; margin-right: auto !important; }
  .about-hi h2 { font-size: 40px; } .about-hi p { font-size: 17px; }
}
.about-card { min-height: 58vw; }
.about-card__img { width: 66%; }
.about-print { margin: 0; padding: 0 1vw; text-align: center; font-size: max(11px, 3vw); color: var(--muted); }
@media (min-width: 860px) { .about-card { min-height: 380px; } .about-card__img { width: 56%; } .about-print { font-size: 16px; } }
@media (max-width: 859px) { .about-card { min-height: 62vw; } .about-card__img { width: auto; height: 86%; max-width: none; right: -16vw; } }
@media (max-width: 859px) { .about-card__img { width: 58%; height: auto; right: 0; } .about-card { min-height: 60vw; } }
.about-card__img { top: 0; bottom: 0; height: 100%; object-fit: cover; object-position: 30% 0; }
@media (max-width: 859px) { .about-card__img { width: 60%; } }
@media (min-width: 860px) { .about-card__img { width: 56%; } }
.about-page .about-card { display: grid; grid-template-columns: 46% 54%; align-items: end; min-height: 0; }
.about-page .about-card__text { width: auto; align-self: center; padding-right: 2vw; }
.about-page .about-card__img { position: static; width: 100%; height: auto; object-fit: contain; object-position: 50% 100%; max-width: none; }
@media (min-width: 860px) { .about-page .about-card__text { padding-right: 24px; } }
.about-page .about-card { grid-template-columns: 44% 56%; }
.about-page .about-card__img { margin-top: 3vw; }
/* Codex group portrait (hero/codex-about): fills the right of the card, as in the mockup. */
.about-page .about-card { grid-template-columns: 42% 58%; }
.about-page .about-card__img { margin-top: 2vw; }
/* No layout shift while the condensed font loads: the two About buttons always share one line on phones. */
@media (max-width: 859px) {
  .about-intro__ctas { flex-wrap: nowrap; }
  .about-intro__ctas .fw-btn { flex: 1 1 auto; min-width: 0; padding: 0 2.6vw; white-space: nowrap; font-size: max(11px, 3.1vw); }
  .chars-head__sub { min-height: 2.6em; }
}

/* 28/10 (Karim, desktop fixes): air under the sneakers, whole characters in cards, tidy crew row,
   Etsy icon at the same visual size as the others, centred footer note. */
@media (min-width: 860px) {
  .home-hero__crew .hero-mascot { margin-top: 16px; }
  .crew-row__item span { font-size: 11.5px; text-wrap: balance; }
  .crew-row__item strong { font-size: 13.5px; white-space: nowrap; }
  a.crew-row__item:hover strong { text-decoration: none; color: var(--accent-deep); }
  .crew-card__img { height: 300px; padding-top: 14px; box-sizing: border-box; object-fit: contain; object-position: 50% 100%; }
  .gift-page .gift-card__art { height: 100%; max-height: 300px; padding-top: 14px; box-sizing: border-box; object-fit: contain; object-position: 100% 100%; }
  .gift-page .gift-card__for { font-size: 18px; }
  .gift-page .gift-card { grid-template-columns: minmax(0, 1fr) 50%; }
  .site-footer .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .site-footer .footer-small { text-align: center; }
}
.footer-social a[aria-label$="Etsy"] svg { transform: scale(.78); }
@media (max-width: 859px) {
  .site-footer { grid-template-areas: "brand links" "social legal" "small small"; }
  .site-footer .footer-small { text-align: center; padding-top: 3vw; }
}
/* 28/10 (Karim): nothing may cross its box: card pictures stay in their column, sneakers never touch. */
.crew-card { column-gap: 10px; }
.crew-card__img { max-width: 100%; overflow: hidden; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 859px) {
  .crew-card__img { height: 40vw; }
  .trio__cat { left: calc((.959 - 2 * var(--k)) * var(--F) + 36px); }
  .trio { width: calc((1.615 - 2 * var(--k)) * var(--F) + 36px); }
}
@media (max-width: 859px) {
  .trio__cat { left: calc((.959 - 2 * var(--k)) * var(--F) + 29px); }
  .trio { width: calc((1.615 - 2 * var(--k)) * var(--F) + 29px); }
}

/* Newsletter sign-up ("Get new drops first"): dark band, title + line left, form right on desktop. */
.nl { display: grid; gap: 14px; margin: 0 var(--gutter) 28px; padding: 22px 20px; border-radius: 10px; background: var(--ink); color: var(--cream); }
.nl .label { color: #d9cfbc; margin-bottom: 4px; }
.nl h2 { margin: 0 0 6px; font-size: clamp(30px, 8vw, 48px); line-height: .95; color: var(--cream); }
.nl h2 em { font-style: normal; color: #e8673f; }
.nl__text p { margin: 0; font-size: 14px; line-height: 1.45; color: #d9cfbc; max-width: 46ch; }
.nl__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-content: center; }
.nl__form input[type=email] { min-height: 48px; padding: 0 14px; border: 2px solid #3a3632; border-radius: 6px; background: #fefaee; color: var(--ink); font: inherit; font-size: 16px; min-width: 0; }
.nl__form input[type=email]:focus { outline: 3px solid #e8673f; outline-offset: 1px; border-color: transparent; }
.nl__form .fw-btn { min-height: 48px; padding: 0 18px; white-space: nowrap; }
.nl__legal { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: #b5ab99; }
.nl__legal a { color: #d9cfbc; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 860px) {
  .nl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1400px; box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); margin: 0 auto 40px; padding: 34px 40px; }
  .nl__text p { font-size: 16px; }
  .single-product .nl { width: 100%; margin: 40px 0 0; }
}
@media (max-width: 859px) { .single-product .nl { margin: 28px 0 0; } }
.nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl__msg { grid-column: 1 / -1; margin: 0; min-height: 1.3em; font-size: 14px; font-weight: 600; color: #f2c9b8; }
.nl__form.is-done .nl__msg { color: #b9e3b0; }
.nl__form button:disabled { opacity: .6; cursor: wait; }
.nl .fw-btn--accent:hover, .nl .fw-btn--accent:focus-visible { background: #e8673f; border-color: #e8673f; color: #fff; }
/* Desktop: a little more room between the raccoon's and the cat's sneakers (they touched from 1024px). */
@media (min-width: 860px) {
  .trio__cat { left: calc((.959 - 2 * var(--k)) * var(--F) + 16px + .06 * var(--F)); }
  .trio { width: calc((1.615 - 2 * var(--k)) * var(--F) + 16px + .06 * var(--F)); }
}
/* Sneaker spacing proportional to the figure height (F), so the gap stays the same at every width. */
.trio__raccoon { left: calc((.535 - var(--k) + .05) * var(--F)); }
.trio__cat { left: calc((.959 - 2 * var(--k) + .19) * var(--F)); }
.trio { width: calc((1.615 - 2 * var(--k) + .19) * var(--F)); }
@media (min-width: 860px) {
  .trio__raccoon { left: calc((.535 - var(--k) + .04) * var(--F)); }
  .trio__cat { left: calc((.959 - 2 * var(--k) + .15) * var(--F)); }
  .trio { width: calc((1.615 - 2 * var(--k) + .15) * var(--F)); }
}
/* The group is now 1.605F (phones) / 1.565F (desktop) wide: size F from those widths. */
@media (max-width: 859px) { .trio { --F: min(calc((69vw - 8px) / 1.605), 285px); } }
@media (min-width: 860px) { .trio { --F: min(440px, calc(100svh - 260px), calc(min(100vw, 1400px) * .40 / 1.565)); } }
.crew-row ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (min-width: 860px) and (max-width: 1199px) { .crew-row__item strong { white-space: normal; font-size: 12.5px; } }