/* stylesheet-rev: 2026-07-26d - blog section (index cards + post pages) */
:root {
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-heading: 'Libre Baskerville', Georgia, serif;
  --heading-weight: 400;
  --text: #222222;
  --bg: #ffffff;
  --section-bg: #f7f7f7;
  --accent: #56cfe1;
  /* accent darkened to >=4.5:1 for TEXT uses (WCAG 1.4.3); --accent stays for
     decorative underlines/rules/dots where contrast rules don't apply. */
  --accent-text: #10717f;
  --btn-bg: #fce477;
  --btn-text: #121212;
  --btn-border: #222222;
  --btn-hover-bg: #f5d94f;
  --btn-hover-text: #121212;
  --btn-radius: 30px;
  /* 68% (was 55%): 55% lands ~3.3-3.7:1 on both brand palettes - under the
     WCAG AA 4.5:1 floor for the 12-13px notes that use it. 68% clears it. */
  --muted: color-mix(in srgb, var(--text) 68%, var(--bg));
  --border: color-mix(in srgb, var(--text) 10%, var(--bg));
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  font-weight: 400; color: var(--text); background: var(--bg);
  line-height: 1.7; font-size: 15px;
}
h1, h2, h3 {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  color: var(--text); letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Buttons (shared shape - Kalles pill / Horizon 14px per theme token) */
.btn-primary, .btn-buy {
  display: inline-block; text-align: center;
  background: var(--btn-bg); color: var(--btn-text);
  border: 2px solid var(--btn-border); border-radius: var(--btn-radius);
  padding: 14px 38px; min-width: 160px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 500;
  transition: background .2s, color .2s;
}
.btn-primary:hover, .btn-buy:hover {
  background: var(--btn-hover-bg); color: var(--btn-hover-text);
}
.btn-buy { display: block; margin-top: 8px; padding: 16px 20px; font-size: 13px; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 5vw; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: #ffffff; z-index: 10;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 46px; width: auto; }
/* Wide wordmark image in place of the badge+text (header_logo_url). */
.logo-banner { height: 50px; width: auto; max-width: 60vw; object-fit: contain; }
@media (max-width: 640px) { .logo-banner { height: 40px; } }
.logo-text { font-family: var(--font-heading); font-size: 26px; font-weight: 600; }
/* Brand wordmark beside the logo badge - fills the otherwise-empty sticky
   header bar so the brand identity stays on screen while scrolling. */
.logo-word {
  font-family: var(--font-heading); font-size: 22px; font-weight: 600;
  color: var(--text); letter-spacing: 0.01em; white-space: nowrap;
}
@media (max-width: 640px) { .logo-word { display: none; } }
.announce-bar {
  text-align: center; font-size: 13px; padding: 8px 16px;
  background: #c8102e;
  color: #ffffff;
  border-bottom: 1px solid var(--border);
}
.site-nav a {
  margin-left: 28px; font-size: 14px;
  letter-spacing: 0;
  text-transform: none; font-weight: 500; transition: color .2s;
}
.site-nav a:hover { color: var(--accent-text); }
.site-nav .nav-item { position: relative; display: inline-block; }
.site-nav .nav-item > a { margin-left: 28px; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 20px; z-index: 20;
  background: var(--bg); border: 1px solid var(--border); min-width: 200px;
  padding: 10px 0; box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block; margin: 0; padding: 8px 18px; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.nav-dropdown a:hover { background: var(--section-bg); }

/* Hero */
.hero { text-align: center; padding: 90px 5vw 70px; background: var(--section-bg); }
.hero h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 10px; }
.hero-tagline { font-size: 17px; color: var(--muted); margin-bottom: 28px; }

/* Sections + product grid */
.section { padding: 60px 5vw; max-width: 1400px; margin: 0 auto; }
.section-title {
  text-align: center; font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 40px; position: relative;
}
.section-title::after {
  content: ''; display: block; width: 46px; height: 2px;
  background: var(--accent); margin: 14px auto 0;
}
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px 22px;
}
/* Bestsellers (and any short featured row): when there are fewer cards than
   the grid has columns, auto-fill leaves an empty trailing slot and the row
   hugs the left. Cap the column width and center the tracks so a 3-card row
   sits centered instead of drifting left. */
.bestsellers .product-grid,
#featured .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
}
.product-card .card-img {
  aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; position: relative;
  background: #f7f7f7;
}
.product-card .card-img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
.product-card:hover .card-img img { transform: scale(1.06); }
/* Hover-swap: hero = the design-on-color square; hovering (or keyboard-
   focusing) the card cross-fades to a mockup photo (.card-hover, stacked
   on top). CSS-only - the reduced-motion media query makes it instant. */
.card-img .card-hover {
  position: absolute; top: 0; left: 0;
  opacity: 0; transition: opacity .25s ease;
}
.product-card:hover .card-img .card-hover,
.product-card:focus-visible .card-img .card-hover { opacity: 1; }
.product-card h3 {
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  color: #222222; line-height: 1.4;
}
.price { color: #222222; font-weight: 500; margin-top: 4px; }
.price-lg { font-size: 22px; margin: 10px 0 18px; }
.empty-note, .footer-note { color: var(--muted); font-size: 13px; }
.about { text-align: center; max-width: 760px; }

/* Home tiles ("Shop by Doodle Breed" - faithful port of the live
   fluffydoodle-shop-by-doodle section: cream band, 9-across grid, gold
   underline growing on hover) */
.home-tiles { background: var(--section-bg); padding: 56px 24px; }
.home-tiles-inner { max-width: 1500px; margin: 0 auto; }
.home-tiles h2 {
  font-size: clamp(24px, 3vw, 36px); line-height: 1.15;
  text-align: center; margin: 0 0 32px;
}
.tiles-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 24px; }
@media (max-width: 1099px) { .tiles-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) {
  .home-tiles { padding: 40px 16px; }
  .tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.tile {
  display: flex; flex-direction: column; align-items: center;
  transition: transform 180ms ease;
}
.tile:hover { transform: translateY(-3px); }
.tile img { width: 100%; height: auto; margin-bottom: 12px; }
.tile-label {
  font-weight: 500; font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.04em; padding: 8px 4px 0; text-align: center;
  position: relative;
}
.tile-label::after {
  content: ''; display: block; height: 1px; background: var(--accent);
  margin: 6px auto 0; width: 0; transition: width 180ms ease;
}
.tile:hover .tile-label::after { width: 70%; }

/* Secondary outlined pill button (live FD "Shop all") */
.btn-secondary {
  display: inline-block; background: transparent; color: var(--text);
  border: 1px solid var(--text); border-radius: var(--btn-radius);
  padding: 12px 28px; font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s; white-space: nowrap;
}
.btn-secondary:hover { background: var(--text); color: var(--bg); }

/* Home-page section stack (ported from the live Shopify home pages) */
.banner-section img, .full-image-section img { width: 100%; height: auto; }
/* Boxed banner: image capped at the shop content width (same 1400px +
   side padding as .section) on a full-width color band (section bg set
   inline from the home_sections 'bg' key, matched to the image edges). */
.banner-boxed .banner-inner { max-width: 1400px; margin: 0 auto; padding: 0 5vw; }
.hero-compact {
  display: flex; align-items: center; justify-content: center; gap: 60px;
  background: var(--section-bg); padding: 48px 5vw; flex-wrap: wrap;
}
.hero-compact img { max-height: 155px; width: auto; max-width: min(760px, 82vw); }
.full-image-section { background: var(--section-bg); padding: 56px 24px; }
.full-image-section img { max-width: 1400px; margin: 0 auto; }
@media (max-width: 599px) { .full-image-section { padding: 40px 16px; } }

/* Compact, centered promo carousel (was full-bleed + giant). Capped width +
   rounded so it reads as a contained banner, not a full-screen takeover. */
.carousel-section {
  position: relative; overflow: hidden;
  width: 90%; max-width: 780px; margin: 44px auto; border-radius: 14px;
}
.carousel-slide { width: 100%; height: auto; display: none; border-radius: 14px; }
.carousel-slide.active { display: block; }
.carousel-dots {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.carousel-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.55); cursor: pointer; padding: 0;
}
.carousel-dots button.active { background: var(--accent); }

.image-text-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
  align-items: center; padding: 60px 5vw; max-width: 1400px; margin: 0 auto;
}
/* Give the illustration more room: narrow the copy column so the image
   (FluffyDoodle's "doodles playing") renders noticeably larger. image-right
   => cell order is [copy][media], so the wide track is column 2. */
.image-text-section.image-right { grid-template-columns: 0.68fr 1.32fr; }
.image-text-section.image-right .image-text-media { order: 2; }
.image-text-section img { width: 100%; height: auto; }
.image-text-copy h2 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 16px; }
.image-text-copy h2::before {
  content: ''; display: block; width: 52px; height: 2px;
  background: var(--accent); margin-bottom: 18px;
}
.image-text-copy p { margin-bottom: 12px; }
@media (max-width: 860px) {
  /* Match the .image-right override's specificity so the section stacks to a
     single column on phones instead of two cramped ones. */
  .image-text-section,
  .image-text-section.image-right { grid-template-columns: 1fr; gap: 24px; }
  .image-text-section.image-right .image-text-media { order: 0; }
}

/* Wide tile grids (TickleStitch's 11 manual collection tiles) */
.tiles-grid-wide { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1099px) { .tiles-grid-wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .tiles-grid-wide { grid-template-columns: repeat(2, 1fr); } }

/* Capsule tiles (live Kalles collections row: tall pill images in one row,
   yellow count badge, label below) */
.tiles-grid-capsule {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 18px; max-width: 1400px; margin: 0 auto;
}
.tiles-grid-capsule .tile { position: relative; }
.tiles-grid-capsule .tile img {
  aspect-ratio: 1 / 2.1; object-fit: cover; border-radius: 999px;
  width: 100%; margin-bottom: 10px;
}
.tile-count {
  position: absolute; top: 34px; right: 8px;
  background: #fce477; color: #121212; font-size: 11px; font-weight: 600;
  min-width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.tiles-grid-capsule .tile-label { font-size: 12px; }

/* Product page */
.product-page {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 50px; padding: 50px 5vw; max-width: 1400px; margin: 0 auto;
}
@media (max-width: 860px) { .product-page { grid-template-columns: 1fr; } }
/* The hero is square, so its WIDTH sets its height. Left uncapped it took
   7/12 of a 1400px page (~790px tall) and pushed the buy panel off a 1080p
   screen at 100% zoom - the operator had to scroll to see the whole shirt.
   Cap it against BOTH axes: 520px on a wide screen, and 58vh so a short
   window shrinks it instead of scrolling. */
.product-gallery { width: 100%; max-width: min(520px, 58vh); }
@media (max-width: 860px) { .product-gallery { margin: 0 auto; } }
.gallery-hero { position: relative; aspect-ratio: 1; background: var(--section-bg); overflow: hidden; }
.gallery-hero img { width: 100%; height: 100%; object-fit: cover; }
/* Prev/next arrows over the hero (shown only when a product has >1 image). */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%;
  background: rgba(0,0,0,.42); color: #ffffff; cursor: pointer;
  font-size: 24px; line-height: 1; display: flex; align-items: center;
  justify-content: center; transition: background .2s, opacity .2s; opacity: .85;
}
.gallery-nav:hover { background: rgba(0,0,0,.72); opacity: 1; }
.gallery-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumbs img {
  width: 72px; height: 72px; object-fit: cover; cursor: pointer;
  border: 1px solid var(--border); transition: border-color .2s;
}
.gallery-thumbs img:hover,
.gallery-thumbs .thumb-btn.active img { border-color: var(--accent); }
/* WF1v product video, under the thumbnails. Width-constrained by
   .product-gallery like the hero, so it can never reintroduce the overflow
   the hero cap just fixed. The rendered clip is 1080x1080. */
.gallery-video {
  width: 100%; aspect-ratio: 1; margin-top: 14px; display: block;
  background: var(--section-bg); object-fit: cover;
}
.buy-panel h1 { font-size: 32px; line-height: 1.25; }
.trust-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }
.also-available { margin-top: 22px; font-size: 13px; color: var(--muted); }
.also-available a { margin-left: 10px; color: var(--accent-text); text-decoration: underline; }

/* Buyer reviews (2026-09-03): Etsy-style stars under the title, list below. */
.rating-summary { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 12px;
  color: var(--text); text-decoration: none; font-size: 14px; }
.rating-summary:hover .rating-count { text-decoration: underline; }
.stars { color: #f5a623; letter-spacing: 1px; white-space: nowrap; }
.rating-count { color: var(--muted); font-size: 13px; }
.reviews { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.reviews h2 { font-size: 20px; margin: 0 0 14px; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 10px; }
.review { padding: 14px 0; border-top: 1px solid var(--border); }
.review:first-of-type { border-top: 0; padding-top: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.review-title { font-size: 15px; }
.review-body { margin: 8px 0 0; font-size: 14px; color: var(--text); }
.review-meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.product-desc {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}

/* Variation pills (Etsy deep-links): pick size/color, the buy button
   carries the choices to Etsy. Selected = aria-pressed (accent-text border
   + weight, not color alone). */
.variation-picker { margin: 4px 0 14px; }
.var-group { margin-bottom: 12px; }
.var-label {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.var-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.var-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; font-family: var(--font-body); font-size: 13px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--btn-radius);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.var-pill:hover { border-color: var(--accent-text); }
.var-pill[aria-pressed="true"] {
  border-color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-text);
  font-weight: 600;
}
.swatch-dot {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.25);
}
.var-note { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Collection pages */
.collection-subnav { text-align: center; margin: -20px 0 30px; }
.collection-subnav a {
  display: inline-block; margin: 0 8px 8px; padding: 7px 20px;
  border: 1px solid var(--border); border-radius: var(--btn-radius);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  transition: all .2s;
}
.collection-subnav a:hover { border-color: var(--accent); color: var(--accent-text); }

/* Policy pages */
.policy-page { max-width: 820px; margin: 0 auto; padding: 60px 5vw; }
.policy-page h1 { font-size: 36px; margin-bottom: 26px; }
.policy-body h2, .policy-body h3 { margin: 26px 0 10px; }
.policy-body p, .policy-body li { margin-bottom: 10px; font-size: 14px; }

/* Blog */
.blog-page { max-width: 900px; margin: 0 auto; padding: 60px 5vw; }
.blog-page h1 { font-size: 36px; margin-bottom: 8px; }
.blog-intro { color: var(--muted); margin-bottom: 36px; }
.blog-list { display: flex; flex-direction: column; gap: 30px; }
.blog-card {
  display: flex; gap: 26px; align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 24px;
}
.blog-card-img { flex: 0 0 220px; }
.blog-card-img img { width: 220px; height: 160px; object-fit: cover; border-radius: 8px; }
.blog-card-body { flex: 1; min-width: 0; }
.blog-date {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.blog-card-title { font-size: 22px; margin-bottom: 8px; }
.blog-card-title a:hover { color: var(--accent-text); }
.blog-excerpt { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.blog-more {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 500; color: var(--accent-text);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
@media (max-width: 640px) {
  .blog-card { flex-direction: column; }
  .blog-card-img, .blog-card-img img { width: 100%; flex-basis: auto; }
}
.blog-post { max-width: 760px; margin: 0 auto; padding: 60px 5vw; }
.blog-post h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 22px; }
.blog-hero { width: 100%; border-radius: 10px; margin-bottom: 26px; }
.blog-body h2 { font-size: 24px; margin: 30px 0 12px; clear: both; }
.blog-body h3 { font-size: 18px; margin: 22px 0 10px; }
.blog-body p, .blog-body li { margin-bottom: 12px; font-size: 15px; }
.blog-body ul, .blog-body ol { padding-left: 22px; margin-bottom: 14px; }
.blog-body a { color: var(--accent-text); text-decoration: underline; }
/* In-post product plug: mockup photo floated INTO the running text like a
   book illustration - the float is deliberately NOT contained, so following
   paragraphs keep wrapping around the photo until its height is used up.
   Default floats left; .plug-right alternates to the right side. Headings
   and the post footer clear, so a plug never bleeds past its section. */
.blog-product-plug .plug-img {
  float: left; width: 168px; margin: 6px 18px 8px 0;
}
.blog-product-plug.plug-right .plug-img {
  float: right; margin: 6px 0 8px 18px;
}
.blog-product-plug .plug-img img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--border);
}
/* Floating hero-design overlay shown while hovering a plug's mockup
   (desktop only - blog_post.html gates on hover + fine pointer). */
.plug-hero-pop {
  position: fixed; z-index: 90; pointer-events: none; display: none;
  max-width: 420px; max-height: 420px; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; border: 2px solid #fff;
  background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
@media (max-width: 560px) {
  .blog-product-plug .plug-img { width: 124px; margin: 4px 14px 6px 0; }
  .blog-product-plug.plug-right .plug-img { margin: 4px 0 6px 14px; }
}
.blog-post-footer {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border);
  clear: both;
}
.blog-back { font-size: 13px; color: var(--muted); }
.blog-back:hover { color: var(--accent-text); }

/* Blog share bar */
.share-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0 22px;
}
.share-label {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--muted); cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, transform .15s;
}
.share-btn:hover {
  color: var(--accent-text); border-color: var(--accent);
  transform: translateY(-1px);
}
.share-copied { font-size: 12px; color: var(--accent-text); }

/* "From the blog" home-page card (_latest_blog_post.html): single newest
   post, image left / copy right on desktop, stacked on mobile. */
.latest-blog-card {
  display: grid; grid-template-columns: minmax(0, 440px) 1fr;
  gap: 34px; align-items: center; max-width: 1000px; margin: 0 auto;
  color: inherit; text-decoration: none;
}
.latest-blog-img {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px;
  background: #f7f7f7;
}
.latest-blog-img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease;
}
.latest-blog-card:hover .latest-blog-img img { transform: scale(1.04); }
.latest-blog-copy h3 { font-size: clamp(20px, 2.4vw, 28px); margin: 4px 0 12px; }
.latest-blog-excerpt {
  font-size: 15px; color: var(--muted); margin-bottom: 16px; max-width: 46ch;
}
.latest-blog-link {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent-text); font-weight: 600;
}
@media (max-width: 720px) {
  .latest-blog-card { grid-template-columns: 1fr; gap: 18px; }
}

/* Blog subscribe card (index + post pages; posts to the email-marketing
   signup endpoint like the footer form) */
.blog-subscribe {
  margin-top: 44px; padding: 28px 30px; text-align: center;
  background: var(--section-bg); border-radius: 12px;
  border: 1px solid var(--border);
}
.blog-subscribe h3 { font-size: 22px; margin-bottom: 6px; }
.blog-subscribe p {
  font-size: 14px; color: var(--muted); max-width: 460px;
  margin: 0 auto 16px;
}
.blog-subscribe .nl-form {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.blog-subscribe .nl-form input[type="email"] {
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--btn-radius);
  font-size: 14px; min-width: 240px; font-family: var(--font-body);
}
.blog-subscribe .nl-form button {
  background: var(--btn-bg); color: var(--btn-text);
  border: 2px solid var(--btn-border); border-radius: var(--btn-radius);
  padding: 10px 26px; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 500; cursor: pointer;
  transition: background .2s, color .2s;
}
.blog-subscribe .nl-form button:hover {
  background: var(--btn-hover-bg); color: var(--btn-hover-text);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border); padding: 50px 5vw 30px;
  background: var(--section-bg); margin-top: 60px;
}
.footer-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px; max-width: 1200px; margin: 0 auto 30px;
}
.site-footer h4 {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 12px;
}
.site-footer a { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.site-footer a:hover { color: var(--accent-text); }
.footer-copy { text-align: center; font-size: 12px; color: var(--muted); }

/* Newsletter signup (product buy-panel + footer; posts to the YOJ
   public subscribe endpoint - see apps/email_marketing) */
.newsletter-inline { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.newsletter-title {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  font-size: 15px; margin-bottom: 10px;
}
.nl-form { display: flex; gap: 8px; }
.nl-form input[type=email] {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--btn-radius);
  font-family: var(--font-body); font-size: 14px;
  background: var(--bg); color: var(--text);
}
.nl-form input[type=email]:focus { border-color: var(--accent-text); }
.nl-form button {
  background: var(--btn-bg); color: var(--btn-text);
  border: 2px solid var(--btn-border); border-radius: var(--btn-radius);
  padding: 0 22px; font-family: var(--font-body); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: all .2s;
}
.nl-form button:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); }
.nl-form button:disabled { opacity: .6; cursor: wait; }
/* Honeypot: visually gone, still in the DOM for bots to fill */
.nl-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.nl-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.nl-done { font-size: 14px; margin: 10px 0; }
.nl-error { font-size: 12px; color: #c8102e; margin-top: 8px; }
.footer-newsletter .nl-form { max-width: 340px; }

/* ============================================================
   Shop layout - catalog + collection pages (home reorg Phase 2/3):
   left category sidebar + sort toolbar + load-more grid.
   ============================================================ */
.shop-layout { display: flex; gap: 40px; align-items: flex-start; }
.shop-sidebar { flex: 0 0 210px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.shop-sidebar-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 14px; }
.shop-cats-toggle { display: none; }
.shop-cats { display: flex; flex-direction: column; gap: 1px; }
.shop-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14px; color: var(--text); border-radius: 7px; transition: background .15s, color .15s; }
.shop-cat:hover { background: var(--section-bg); color: var(--accent-text); }
.shop-cat.active { background: var(--section-bg); color: var(--accent-text); font-weight: 600; }
.shop-cat-count { font-size: 11px; color: var(--muted); }
.shop-subcats { display: flex; flex-direction: column; margin: 1px 0 6px 12px; border-left: 1px solid var(--border); }
.shop-subcat { padding: 5px 12px; font-size: 13px; color: var(--muted); transition: color .15s; }
.shop-subcat:hover, .shop-subcat.active { color: var(--accent-text); }
.shop-main { flex: 1 1 auto; min-width: 0; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.shop-count { font-size: 13px; color: var(--muted); }
.shop-sort { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.shop-sort select { font-family: var(--font-body); font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); cursor: pointer; }
.shop-more-wrap { text-align: center; margin-top: 44px; }

/* Home "Shop by Category" cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; max-width: 1050px; margin: 0 auto; }
.cat-card { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 70px; padding: 16px 20px; background: var(--section-bg); border: 1px solid var(--border); border-radius: 12px; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 15px; color: var(--text); transition: border-color .15s, color .15s, transform .15s; }
.cat-card:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.shop-all-wrap { text-align: center; margin-top: 40px; }

@media (max-width: 899px) {
  .shop-layout { flex-direction: column; gap: 18px; }
  .shop-sidebar { position: static; flex: none; width: 100%; max-height: none; overflow: visible; }
  .shop-sidebar-title { display: none; }
  .shop-cats-toggle { display: block; width: 100%; text-align: left; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
  .shop-cats { display: none; margin-top: 8px; }
  .shop-cats.open { display: flex; }
  .shop-subcats { display: none; }
}

/* ============================================================
   Accessibility (WCAG 2.1 AA pass, 2026-07-26 - mirrors the YOJ
   admin site's exercise: skip link, focus indicators, reduced
   motion, screen-reader utilities, and the a11y widget classes).
   ============================================================ */

/* Skip navigation: visually hidden until it receives keyboard focus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text); color: var(--bg);
  padding: 10px 18px; font-size: 14px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Screen-reader-only utility (e.g. "opens in a new tab" notes). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible focus indicator on every interactive element for keyboard users
   (mouse clicks don't trigger :focus-visible, so the look is unchanged). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px;
}

/* Product-page gallery thumbnails are real buttons (keyboard-activatable). */
.thumb-btn {
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; display: block;
}

/* Carousel pause/play control (WCAG 2.2.2: auto-advancing content needs a
   way to stop it). */
.carousel-pause {
  position: absolute; bottom: 10px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #ffffff; cursor: pointer;
  font-size: 13px; line-height: 30px; text-align: center; padding: 0;
}

/* Honor the OS-level motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* --- Accessibility widget (floating panel; classes set on <body> by
       a11y.js, preferences persisted in localStorage) --- */
body.a11y-text-lg { zoom: 1.1; }
body.a11y-text-xl { zoom: 1.25; }
body.a11y-high-contrast {
  --text: #000000; --muted: #262626; --border: #555555;
  --accent-text: #000000; --bg: #ffffff; --section-bg: #ffffff;
}
body.a11y-high-contrast .product-card .card-img,
body.a11y-high-contrast .cat-card { border: 1px solid #555555; }
body.a11y-dyslexia-font, body.a11y-dyslexia-font * {
  font-family: 'OpenDyslexic', 'Open-Dyslexic', 'Comic Sans MS', sans-serif !important;
}
body.a11y-highlight-links a {
  text-decoration: underline !important;
  outline: 1px dashed currentColor; outline-offset: 1px;
}
body.a11y-reduce-motion *, body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation: none !important; transition: none !important;
  scroll-behavior: auto !important;
}
#a11y-toggle-btn {
  position: fixed; bottom: 20px; left: 20px; z-index: 9998;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--btn-bg); color: var(--btn-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
#a11y-panel {
  position: fixed; bottom: 78px; left: 20px; z-index: 9999;
  width: 280px; background: #ffffff; color: #222222; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); display: none;
  max-height: 80vh; overflow-y: auto; font-family: var(--font-body);
}
#a11y-panel.open { display: block; }
.a11y-head {
  background: #222222; color: #ffffff; padding: 12px 16px;
  border-radius: 12px 12px 0 0; font-size: 14px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.a11y-head button {
  background: none; border: none; color: #ffffff; font-size: 20px;
  cursor: pointer; line-height: 1; padding: 0 0 0 8px;
}
.a11y-body { padding: 10px 16px 16px; }
.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 0; border-bottom: 1px solid #eeeeee;
  font-size: 13px; color: #222222;
}
.a11y-switch {
  width: 42px; height: 24px; border-radius: 12px; border: none;
  background: #bbbbbb; cursor: pointer; position: relative; padding: 0;
  flex-shrink: 0;
}
.a11y-switch[aria-checked="true"] { background: #222222; }
.a11y-switch span {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #ffffff; transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.a11y-switch[aria-checked="true"] span { left: 20px; }
.a11y-cycle {
  padding: 4px 10px; border: 1px solid #bbbbbb; border-radius: 6px;
  background: #f8f8f8; color: #222222; font-size: 12px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.a11y-cycle.on { background: #222222; color: #ffffff; }
.a11y-reset {
  width: 100%; margin-top: 12px; padding: 8px 0;
  border: 1px solid #dddddd; border-radius: 8px; background: #f8f8f8;
  color: #222222; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* =====================================================================
   DIRECT CHECKOUT: variant picker + cart drawer   (2026-08-22)

   Colour is chosen on the .var-pill row that already previewed it. Size and
   quantity sit under it, and Add to cart drops the line into a panel on the
   right that PUSHES the page narrower rather than covering it, so every
   button on the shop stays reachable while the cart stays in view.

   Below 900px the panel never opens - there is no room to give it - and the
   header cart becomes a plain link to the checkout handoff. cart.js reads the
   same 900px breakpoint, so behaviour and layout cannot disagree.
   ===================================================================== */

/* --- the picker -------------------------------------------------------- */
.direct-pick { margin: 4px 0 2px; }
.pick-label {
  font-size: 13px; font-weight: 600; margin: 18px 0 9px;
  letter-spacing: .04em; text-transform: uppercase;
}
.pick-label .pick-value {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted);
}
.pick-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* Size CIRCLES, matching the colour swatches above them: the two questions
   are the same KIND of question, and one shape makes that legible at a
   glance. The circle is fixed so 2XL and S line up on the same grid. */
.pick-sz {
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font: inherit; font-size: 13px; line-height: 1;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.pick-sz:hover:not([disabled]) { border-color: var(--text); }
.pick-sz[aria-pressed="true"] {
  background: var(--btn-bg); color: var(--btn-text);
  border-color: var(--btn-border); font-weight: 600;
}
.pick-sz[disabled] { opacity: .3; cursor: not-allowed; }

/* The colour pills double as the colour CHOICE, so they need the same
   selected state the sizes have. */
.var-pill[aria-pressed="true"] {
  border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 600;
}

/* Quantity: a stepper, because a bare number input on a phone opens a
   keyboard to change 1 into 2. */
.qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.qty-step {
  width: 42px; height: 44px; border: 0; background: var(--bg);
  color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
}
.qty-step:hover:not([disabled]) { background: var(--section-bg); }
.qty-step[disabled] { opacity: .3; cursor: not-allowed; }
.qty-input {
  width: 52px; height: 44px; border: 0; text-align: center;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 15px; -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn-buy.is-disabled { opacity: .45; pointer-events: none; }
/* `hidden` is how cart.js reveals things, and an author `display` rule beats
   the UA sheet's [hidden]{display:none} every time - .btn-buy sets
   display:block, so the Checkout button sat there on an empty cart until this
   line existed. Caught in the browser, not by reading the CSS. */
[hidden] { display: none !important; }
/* Checkout appears UNDER Add to cart the moment there is something to check
   out, on desktop and on a phone alike. `hidden` is toggled by cart.js. */
.btn-checkout { background: transparent; color: var(--text); }
.btn-checkout:hover { background: var(--text); color: var(--bg); }
.price-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* --- the header cart --------------------------------------------------- */
.cart-toggle {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; margin-left: 22px;
  border-radius: 50%; color: var(--text); flex-shrink: 0;
  transition: background .2s;
}
.cart-toggle:hover { background: var(--section-bg); }
.cart-pill {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: #d32f2f; color: #ffffff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* --- the drawer -------------------------------------------------------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; z-index: 60;
  display: none; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0,0,0,.06);
}
body.cart-open .cart-drawer { display: flex; }
/* The page NARROWS - it is not covered. Sticky children (the header) are laid
   out in this flow, so they narrow with it and every button on them stays
   reachable while the buyer keeps shopping. */
@media (min-width: 900px) {
  body { transition: padding-right .2s ease; }
  body.cart-open { padding-right: 340px; }
}
/* Belt and braces: below the breakpoint cart.js refuses to open the drawer,
   and this makes sure a stale body class left by a resized window cannot put
   a 340px panel across a phone screen. */
@media (max-width: 899px) {
  body.cart-open { padding-right: 0; }
  body.cart-open .cart-drawer { display: none; }
}

.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.cart-drawer-head h2 { font-size: 17px; }
.cart-drawer-close {
  border: 0; background: none; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.cart-drawer-close:hover { color: var(--text); }
.cart-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px; }
.cart-drawer-empty { flex: 1 1 auto; padding: 28px 20px; }
.cart-drawer-empty p { margin-bottom: 6px; }
.cart-drawer-note { font-size: 12px; color: var(--muted); line-height: 1.5; }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line-img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); flex-shrink: 0;
}
.cart-line-body { flex: 1 1 auto; min-width: 0; }
.cart-line-title {
  font-size: 13px; font-weight: 600; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-line-variant { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.cart-line-controls {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.cart-line-qty {
  width: 52px; padding: 5px 4px; text-align: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.cart-line-price { font-size: 13px; font-weight: 600; margin-left: auto; }
.cart-line-rm {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline; padding: 0;
}
.cart-line-rm:hover { color: var(--text); }

.cart-drawer-foot {
  border-top: 1px solid var(--border); padding: 16px 20px 20px;
  background: var(--section-bg);
}
.cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 600; margin-bottom: 2px;
}
.cart-checkout { margin-top: 12px; width: 100%; }

/* Dark mode (the storefront's own `dark-version` class). Everything above is
   painted from a theme token except the count pill, which stays red in both
   themes because that is what makes it read as a count. */
body.dark-version .pick-sz,
body.dark-version .qty-step,
body.dark-version .qty-input,
body.dark-version .cart-line-qty,
body.dark-version .cart-drawer,
body.dark-version .cart-drawer-foot {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28);
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Click-to-enlarge lightbox (product page).

   The gallery hero is capped at min(520px, 58vh) so the buy panel stays on
   screen, which means the shirt is shown far smaller than the R2 mockup
   actually is. Buyers judge print quality from detail, so the hero and every
   thumbnail open a full-viewport overlay that renders the SAME file at
   `object-fit: contain` (no crop), with a click-to-zoom pass at 2.6x that
   pans with the pointer. `object-fit: cover` on the inline hero crops the
   sides; the overlay must never do that.
   --------------------------------------------------------------------------- */
.gallery-hero img,
.gallery-thumbs img { cursor: zoom-in; }
.gallery-zoom-hint {
  margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: center;
}

.lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.93);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 16px 16px;
}
/* display:flex would otherwise beat the `hidden` attribute. */
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }

.lightbox-stage {
  flex: 1 1 auto; width: 100%; max-width: 1100px; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lightbox-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: #ffffff; cursor: zoom-in;
  transform-origin: center center; transition: transform .18s ease-out;
}
/* Zoomed: origin is rewritten from the pointer position, so the transition is
   dropped or the pan lags a frame behind the cursor. */
.lightbox-stage.zoomed img { transform: scale(2.6); cursor: zoom-out; transition: none; }

.lightbox-close,
.lightbox-nav {
  position: absolute; z-index: 2; padding: 0; border: none; cursor: pointer;
  color: #ffffff; background: rgba(255,255,255,.16); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .2s;
}
.lightbox-close { top: 14px; right: 16px; width: 42px; height: 42px; font-size: 26px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255,255,255,.34); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.lightbox-hint {
  margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.62);
  text-align: center;
}
.lightbox-thumbs {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
  justify-content: center; max-width: 100%;
}
.lightbox-thumbs button {
  padding: 0; border: none; background: none; cursor: pointer; display: block;
}
.lightbox-thumbs img {
  width: 56px; height: 56px; object-fit: cover; display: block;
  border: 2px solid transparent; opacity: .55;
  transition: opacity .2s, border-color .2s;
}
.lightbox-thumbs img:hover,
.lightbox-thumbs button.active img { opacity: 1; border-color: #ffffff; }
.lightbox-thumbs button:focus-visible img { outline: 2px solid #ffffff; outline-offset: 2px; }

@media (max-width: 640px) {
  .lightbox { padding: 54px 8px 10px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
  .lightbox-close { width: 38px; height: 38px; font-size: 24px; }
  .lightbox-thumbs img { width: 44px; height: 44px; }
}