/* State Street — storefront styles. Tokens come from theme.json (--wp--preset--*). */

:root {
  --sss-paper: var(--wp--preset--color--paper);
  --sss-tile: var(--wp--preset--color--tile);
  --sss-ink: var(--wp--preset--color--ink);
  --sss-soft: var(--wp--preset--color--ink-soft);
  --sss-green: var(--wp--preset--color--green);
  --sss-yellow: var(--wp--preset--color--yellow);
  --sss-blue: var(--wp--preset--color--blue);
  --sss-white: var(--wp--preset--color--white);
  --sss-display: var(--wp--preset--font-family--display);
  --sss-radius: 6px;
  --sss-ease: cubic-bezier(.2,.7,.2,1);
}

@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1,h2,h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; max-width: 68ch; }
:focus-visible { outline: 3px solid var(--sss-blue); outline-offset: 3px; }

/* ---------- Header ---------- */
.sss-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--sss-paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in oklab, var(--sss-ink) 14%, transparent); padding-top: .6rem; padding-bottom: .6rem; }
body.admin-bar .sss-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sss-header { top: 46px; } }
.sss-header-row { align-items: center; gap: 1.25rem; }
.sss-mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sss-ink); flex: 0 0 auto; }
.sss-mark-text { display: flex; flex-direction: column; line-height: 1; }
.sss-mark-text b { font: 800 1.55rem/1 var(--sss-display); letter-spacing: .04em; text-transform: uppercase; }
.sss-mark-text i { font-style: normal; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sss-soft); margin-top: .22rem; }

.sss-nav { flex: 1 1 auto; }
.sss-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem .25rem; flex-wrap: wrap; position: static; inset: auto; width: auto; height: auto; border: 0; background: transparent; overflow: visible; color: inherit; }
.sss-nav-list a { display: inline-block; padding: .45rem .7rem; border-radius: var(--sss-radius); color: var(--sss-ink); text-decoration: none; font-weight: 600; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; }
.sss-nav-list a:hover { background: var(--sss-tile); }
.sss-nav-toggle { display: none; }

.sss-search { display: flex; align-items: center; border: 1.5px solid color-mix(in oklab, var(--sss-ink) 35%, transparent); border-radius: 999px; padding: .15rem .25rem .15rem .9rem; background: var(--sss-white); flex: 0 1 240px; min-width: 150px; }
.sss-search input[type=search] { border: 0; background: transparent; font: inherit; width: 100%; min-width: 0; outline: 0; }
.sss-search button { border: 0; background: var(--sss-ink); color: var(--sss-white); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.sss-search button:hover { background: var(--sss-green); }

@media (max-width: 860px) {
  .sss-header-row { flex-wrap: wrap; }
  .sss-nav { order: 3; flex: 0 0 auto; }
  .sss-search { order: 2; flex: 1 1 140px; }
  .sss-nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; border: 0; background: transparent; padding: .5rem; cursor: pointer; }
  .sss-nav-toggle span { display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--sss-ink); }
  .sss-nav-list { display: none; }
  .sss-nav-list:popover-open { display: flex; flex-direction: column; position: fixed; inset: auto 0 0 0; margin: 0; width: auto; border: 0; border-top: 4px solid var(--sss-green); background: var(--sss-paper); padding: 1rem 1.25rem 2rem; box-shadow: 0 -12px 40px rgba(21,38,28,.18); }
  .sss-nav-list:popover-open a { display: block; font: 700 1.6rem/1.15 var(--sss-display); padding: .5rem .25rem; }
  .sss-nav-list::backdrop { background: rgba(21,38,28,.35); }
}

/* ---------- Layout ---------- */
.sss-main { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--60); }
.sss-section-title { font: 800 clamp(1.9rem, 3.6vw, 2.6rem)/1 var(--sss-display); margin: var(--wp--preset--spacing--50) 0 1rem; display: flex; align-items: baseline; gap: 1rem; }
.sss-section-title::after { content: ""; flex: 1; height: 3px; background: var(--sss-ink); opacity: .9; transform: translateY(-.35em); }
.sss-page-title { font: 800 clamp(2.4rem, 5vw, 4rem)/.95 var(--sss-display); margin: 0 0 1.25rem; }
.sss-page .wp-block-post-content { margin-top: 1rem; }

/* ---------- Hero ---------- */
.sss-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1rem, 3vw, 2.5rem) 0 var(--wp--preset--spacing--40); }
.sss-hero-title { font: 800 clamp(2.9rem, 7.2vw, 6.6rem)/.9 var(--sss-display); letter-spacing: .005em; margin: 0 0 1.1rem; max-width: 12ch; }
.sss-hero-lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--sss-soft); max-width: 36ch; margin: 0 0 1.5rem; }
.sss-hero-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 0; }
.sss-hero-btn { font-size: 1.35rem; }
.sss-hero-link { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.sss-hero-tiles { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .75rem; }
.sss-hero-tile { position: relative; display: block; background: var(--sss-tile); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--sss-ink); aspect-ratio: 1; }
.sss-hero-tile:first-child { grid-row: 1 / span 2; }
.sss-hero-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.sss-hero-tile:first-child img { padding: 10%; }
.sss-hero-tile-cap { position: absolute; left: .75rem; bottom: .75rem; right: .75rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font: 700 .95rem/1.2 var(--wp--preset--font-family--body); background: color-mix(in oklab, var(--sss-paper) 90%, transparent); padding: .35rem .6rem; border-radius: var(--sss-radius); }
.sss-hero-tile-cap b { font: 800 1.1rem/1 var(--sss-display); color: var(--sss-green); white-space: nowrap; }
@media (max-width: 760px) {
  .sss-hero { grid-template-columns: 1fr; }
  .sss-hero-tiles { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .sss-hero-tile-cap { display: none; }
  .sss-hero-tile:first-child .sss-hero-tile-cap { display: flex; }
}

/* ---------- Product-type strip ---------- */
.sss-type-row { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: .25rem; }
.sss-type-row li { scroll-snap-align: start; flex: 0 0 auto; }
.sss-type-link { display: inline-block; padding: .55rem 1rem; border: 1.5px solid var(--sss-ink); border-radius: 999px; color: var(--sss-ink); text-decoration: none; font: 700 1.1rem/1 var(--sss-display); letter-spacing: .02em; }
.sss-type-link:hover { background: var(--sss-ink); color: var(--sss-paper); }

/* ---------- Filters ---------- */
.sss-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 1.5rem; }
.sss-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sss-chip { display: inline-block; padding: .4rem .8rem; border-radius: 999px; background: var(--sss-tile); color: var(--sss-ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.sss-chip:hover { background: color-mix(in oklab, var(--sss-tile) 70%, var(--sss-ink)); color: var(--sss-paper); }
.sss-chip.is-on { background: var(--sss-ink); color: var(--sss-paper); }
.sss-filter-form { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.sss-select { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--sss-soft); }
.sss-select select { font: inherit; font-size: .95rem; color: var(--sss-ink); padding: .45rem 2rem .45rem .6rem; border: 1.5px solid color-mix(in oklab, var(--sss-ink) 35%, transparent); border-radius: var(--sss-radius); background: var(--sss-white); }
.sss-filter-go { font: 700 1rem/1 var(--sss-display); letter-spacing: .03em; padding: .6rem .9rem; border: 1.5px solid var(--sss-ink); background: transparent; color: var(--sss-ink); border-radius: var(--sss-radius); cursor: pointer; }
.sss-filter-go:hover { background: var(--sss-ink); color: var(--sss-paper); }
.sss-empty { padding: 2rem 0; color: var(--sss-soft); }

/* ---------- Grid + cards (specificity beats the snippet's inline CSS) ---------- */
body .sss-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem) clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); container-type: inline-size; }
body .sss-card { position: relative; display: flex; flex-direction: column; gap: 0; }
body .sss-card-link { display: block; color: inherit; text-decoration: none; }
body .sss-card-media { position: relative; display: block; aspect-ratio: 1; background: var(--sss-tile); border-radius: 10px; overflow: hidden; }
body .sss-card img.sss-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; background: none; border-radius: 0; transition: opacity .35s var(--sss-ease), transform .6s var(--sss-ease); }
body .sss-card img.sss-card-img-alt { opacity: 0; }
@media (hover: hover) {
  body .sss-card:hover img.sss-card-img-alt { opacity: 1; }
  body .sss-card:hover img.sss-card-img:not(.sss-card-img-alt) { transform: scale(1.03); }
  body .sss-card:has(.sss-card-img-alt):hover img.sss-card-img:not(.sss-card-img-alt) { opacity: 0; }
}
body .sss-card-title { display: block; margin: .7rem 0 .15rem; font: 700 1.05rem/1.2 var(--wp--preset--font-family--body); }
body .sss-card-meta { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .85rem; color: var(--sss-soft); }
body .sss-card-price { font: 800 1.15rem/1 var(--sss-display); color: var(--sss-ink); white-space: nowrap; }
.sss-badge { position: absolute; top: .6rem; left: .6rem; z-index: 2; background: var(--sss-yellow); color: var(--sss-ink); font: 800 .8rem/1 var(--sss-display); letter-spacing: .06em; text-transform: uppercase; padding: .35rem .5rem .3rem; border-radius: 3px; }
.sss-badge-title { position: static; display: inline-block; vertical-align: middle; margin-left: .75rem; font-size: 1rem; transform: translateY(-.35em); }

/* Buy buttons */
body a.sss-buy { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: var(--sss-green); color: var(--sss-white); text-decoration: none; font: 700 1.15rem/1 var(--sss-display); letter-spacing: .03em; padding: .7rem 1rem .65rem; border-radius: var(--sss-radius); transition: background .2s; }
body a.sss-buy:hover { background: var(--sss-ink); color: var(--sss-white); }
body a.sss-buy .sss-buy-price { opacity: .85; font-weight: 600; }
body a.sss-card-buy { margin-top: .6rem; width: 100%; padding: .55rem .75rem .5rem; font-size: 1.05rem; }
@container (max-width: 480px) { body a.sss-card-buy { font-size: 1rem; } }

/* ---------- Theme tiles ---------- */
.sss-theme-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sss-theme-tile { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: .75rem; border-radius: 10px; background: var(--sss-tile); color: var(--sss-ink); text-decoration: none; min-height: 112px; }
.sss-theme-tile img { grid-row: 1 / span 2; width: 96px; height: 96px; object-fit: contain; mix-blend-mode: multiply; }
.sss-theme-tile:not(:has(img)) { grid-template-columns: 1fr; }
.sss-theme-name { font: 800 1.45rem/1 var(--sss-display); align-self: end; }
.sss-theme-count { font-size: .85rem; color: var(--sss-soft); align-self: start; }
.sss-theme-tile:hover { background: var(--sss-ink); color: var(--sss-paper); }
.sss-theme-tile:hover .sss-theme-count { color: color-mix(in oklab, var(--sss-paper) 75%, transparent); }
.sss-theme-tile:hover img { mix-blend-mode: screen; }

/* ---------- Story / home extra ---------- */
.sss-story { margin-top: var(--wp--preset--spacing--50); max-width: 60ch; }
.sss-story p { font-size: 1.1rem; }
.sss-home-extra:empty { display: none; }
.sss-home-extra { margin-top: var(--wp--preset--spacing--50); }

/* ---------- Design page ---------- */
.sss-crumbs { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .85rem; color: var(--sss-soft); margin-bottom: 1rem; }
.sss-crumbs a { color: inherit; text-decoration: none; }
.sss-crumbs a:hover { color: var(--sss-ink); text-decoration: underline; }
.sss-crumbs a + a::before { content: "/"; margin: 0 .5rem 0 .25rem; opacity: .5; }
.sss-design-title { font: 800 clamp(2.4rem, 5.5vw, 4.4rem)/.95 var(--sss-display); margin: 0 0 1.5rem; max-width: 20ch; }
.sss-picker { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.sss-stage { margin: 0; background: var(--sss-tile); border-radius: 12px; overflow: hidden; position: sticky; top: calc(var(--sss-header-h, 76px) + 1rem); }
.sss-stage img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: opacity .25s; }
.sss-stage img.is-loading { opacity: .35; }
.sss-stage figcaption { position: absolute; left: .9rem; bottom: .8rem; font: 700 .95rem/1 var(--wp--preset--font-family--body); background: color-mix(in oklab, var(--sss-paper) 90%, transparent); padding: .4rem .6rem; border-radius: var(--sss-radius); }
.sss-picker:not(.is-swapping) .sss-stage figcaption { display: none; }
.sss-picker-range { margin: 0 0 .75rem; color: var(--sss-soft); font-weight: 600; }
.sss-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; max-height: 52vh; overflow: auto; padding: 2px; scrollbar-width: thin; }
.sss-option { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: .6rem; padding: .45rem; border: 1.5px solid color-mix(in oklab, var(--sss-ink) 18%, transparent); border-radius: 8px; background: var(--sss-white); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sss-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sss-option img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; background: var(--sss-tile); border-radius: 6px; }
.sss-option-swatch { width: 56px; height: 56px; border-radius: 6px; background: var(--sss-tile); display: grid; place-items: center; font: 800 .75rem/1 var(--sss-display); color: var(--sss-soft); }
.sss-option-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sss-option-label { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.sss-option-price { font: 800 1.05rem/1 var(--sss-display); color: var(--sss-green); }
.sss-option:has(input:checked) { border-color: var(--sss-ink); box-shadow: inset 0 0 0 1.5px var(--sss-ink); }
.sss-option:has(input:focus-visible) { outline: 3px solid var(--sss-blue); outline-offset: 2px; }
.sss-cta { margin-top: 1rem; }
body a.sss-buy-main { width: 100%; font-size: 1.5rem; padding: .9rem 1.25rem .85rem; }
.sss-trust { font-size: .85rem; color: var(--sss-soft); margin: .6rem 0 0; }
.sss-design-copy { margin-top: var(--wp--preset--spacing--40); max-width: 64ch; }
.sss-design-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sss-related { margin-top: var(--wp--preset--spacing--40); }
@media (max-width: 820px) {
  .sss-picker { grid-template-columns: 1fr; }
  .sss-stage { position: static; }
  .sss-options { max-height: none; }
  body.sss-design .sss-cta { position: sticky; bottom: 0; z-index: 20; background: color-mix(in oklab, var(--sss-paper) 92%, transparent); backdrop-filter: blur(8px); padding: .75rem 0 .6rem; margin: 1rem calc(-1 * var(--wp--style--root--padding-right)) 0 calc(-1 * var(--wp--style--root--padding-left)); padding-inline: var(--wp--style--root--padding-left); border-top: 1px solid color-mix(in oklab, var(--sss-ink) 14%, transparent); }
  .sss-trust { display: none; }
}

/* ---------- Footer ---------- */
.sss-footer { margin-top: var(--wp--preset--spacing--50); border-top: 3px solid var(--sss-ink); padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); }
.sss-footer-row { gap: 2rem; align-items: start; }
.sss-footer-blurb { max-width: 46ch; font-size: .95rem; color: var(--sss-soft); }
.sss-footer-blurb strong { color: var(--sss-ink); font: 800 1.35rem/1 var(--sss-display); }
.sss-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sss-footer-links a { color: var(--sss-ink); text-decoration: none; font-weight: 600; }
.sss-footer-links a:hover { text-decoration: underline; }
.sss-footer-fine { font-size: .78rem; color: var(--sss-soft); margin-top: 1.5rem; max-width: none; }

/* ---------- One orchestrated reveal: cards ride in as the grid scrolls into view ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body .sss-card { animation: sss-ride both linear; animation-timeline: view(); animation-range: entry 0% entry 28%; }
    @keyframes sss-ride { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
}

/* Keep the snippet's old rules from leaking. */
body .sss-note { display: none; }
.sss-option-swatch::before { content: attr(data-type); text-transform: uppercase; letter-spacing: .04em; font-size: .62rem; text-align: center; padding: 0 .25rem; }

/* Other-shop designs sit below the home shop's. */
.sss-others-title { margin-top: var(--wp--preset--spacing--50); font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--sss-soft); }
.sss-others-title::after { opacity: .35; }
.sss-shops { margin-top: 1.5rem; }
.sss-shops h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
.sss-shops ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.sss-shops a { font-weight: 600; }
.sss-shops span { color: var(--sss-soft); font-size: .85rem; margin-left: .3rem; }

/* Collection tiles (gift guides) */
.sss-collection-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.sss-collection-tile { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border: 1.5px solid color-mix(in oklab, var(--sss-ink) 25%, transparent); border-radius: 10px; color: var(--sss-ink); text-decoration: none; }
.sss-collection-tile .sss-theme-name { font-size: 1.3rem; }
.sss-collection-tile:hover { background: var(--sss-ink); color: var(--sss-paper); }
.sss-collection-tile:hover .sss-theme-count { color: color-mix(in oklab, var(--sss-paper) 75%, transparent); }
.sss-chip-collection { background: var(--sss-yellow); }
.sss-landing-intro { max-width: 64ch; font-size: 1.1rem; margin-bottom: 1.5rem; }
.sss-landing-intro p { font-size: inherit; }
.sss-faq { max-width: 64ch; margin-top: var(--wp--preset--spacing--40); }
.sss-faq h3 { font-size: 1.25rem; margin: 1rem 0 .3rem; }

/* ===== WISCONSIN LAYER v1 (30 Oct 2026): reflective guide-sign ground, the state on the hero,
   arrowed sign rules, a highway-at-night footer. CSS only; copy and markup unchanged. ===== */
:root {
--sss-sign: #006B3F;
--sss-sign-deep: #00552F;
--sss-night: #003B22;
--sss-asphalt: #262A27;
--sss-legend: #FFFFFF;
--sss-amber: #F2C230;
--sss-panel-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 16px 30px -18px rgba(0, 25, 12, .75);
--sss-panel-lift: 0 2px 0 rgba(0, 0, 0, .18), 0 26px 44px -22px rgba(0, 25, 12, .85);
}

/* Ground: retroreflective sign sheeting under headlights (fine grain + a soft highlight up top) */
body {
background-color: var(--sss-sign) !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%22.5%22/%3E%3C/svg%3E"),
radial-gradient(1100px 620px at 12% -8%, rgba(255, 255, 255, .11), transparent 62%),
radial-gradient(900px 700px at 100% 8%, rgba(255, 255, 255, .05), transparent 60%),
linear-gradient(180deg, var(--sss-sign) 0, var(--sss-sign) 60%, #00603A 100%) !important;
background-size: 220px 220px, auto, auto, auto;
background-blend-mode: soft-light, normal, normal, normal;
}

/* Header: one row on wide screens, a white sign rule beneath */
.sss-header { border-bottom: 0 !important; box-shadow: 0 2px 0 rgba(255, 255, 255, .55), 0 10px 24px -18px rgba(0, 0, 0, .6); }
@media (min-width: 1180px) {
.sss-nav-list { flex-wrap: nowrap; gap: 0 .1rem; justify-content: center; }
.sss-nav-list a { padding: .45rem .55rem; font-size: .8rem; letter-spacing: .06em; white-space: nowrap; }
}
.sss-nav-list a { position: relative; }
.sss-nav-list a::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .2rem; height: 2px; background: var(--sss-amber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--sss-ease); }
.sss-nav-list a:hover { background: transparent !important; }
.sss-nav-list a:hover::after, .sss-nav-list a[aria-current]::after { transform: scaleX(1); }

/* Hero: the state itself sits behind the designs, with Madison marked */
.sss-hero { position: relative; isolation: isolate; }
.sss-hero-tiles::before { content: ""; position: absolute; right: 0; bottom: calc(100% + 1.25rem); width: clamp(150px, 15vw, 230px); aspect-ratio: 1040 / 1115; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 1040 1115%22%3E%3Cpath d=%22M0 326 L3 292 L18 281 L31 251 L59 237 L63 230 L73 232 L80 220 L93 223 L96 212 L103 209 L107 66 L120 71 L127 62 L122 58 L138 47 L162 64 L191 62 L261 39 L285 23 L292 28 L297 23 L304 25 L327 4 L335 7 L346 0 L363 18 L341 50 L346 65 L336 72 L331 90 L337 91 L359 79 L366 66 L394 91 L418 96 L422 104 L432 99 L435 108 L441 106 L451 112 L467 151 L639 198 L686 226 L700 224 L714 233 L721 227 L736 225 L740 232 L753 236 L760 232 L769 239 L791 241 L805 249 L810 258 L801 272 L808 280 L826 278 L830 286 L845 287 L857 298 L862 305 L855 313 L863 326 L855 334 L861 348 L850 364 L852 370 L847 381 L852 385 L867 384 L877 374 L884 378 L887 385 L873 426 L887 442 L899 446 L892 456 L892 471 L868 476 L857 485 L857 496 L833 536 L831 563 L824 574 L831 580 L844 580 L854 563 L873 552 L878 534 L896 506 L919 499 L926 492 L935 498 L931 487 L954 446 L957 425 L977 418 L979 403 L987 394 L1000 393 L1000 412 L991 413 L991 443 L985 450 L978 450 L972 464 L967 472 L971 481 L963 488 L966 495 L948 515 L923 574 L911 630 L918 661 L895 683 L881 737 L888 784 L874 814 L874 831 L861 858 L855 890 L860 909 L857 920 L864 932 L859 946 L868 959 L873 989 L883 1001 L875 1042 L879 1072 L703 1075 L373 1072 L361 1042 L319 1029 L300 1016 L292 981 L285 975 L279 937 L280 921 L301 892 L293 878 L274 865 L274 830 L265 792 L270 767 L263 749 L237 712 L211 704 L189 679 L162 662 L156 632 L148 623 L102 601 L85 575 L49 570 L45 562 L36 559 L35 550 L6 525 L17 480 L16 459 L9 450 L20 437 L18 396 L38 370 L39 360 L19 329 L0 326Z%22 fill=%22%23fff%22 fill-opacity=%22.10%22 stroke=%22%23fff%22 stroke-opacity=%22.75%22 stroke-width=%225%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%22596%22 cy=%22936%22 r=%2234%22 fill=%22none%22 stroke=%22%23F2C230%22 stroke-width=%226%22 opacity=%22.9%22/%3E%3Ccircle cx=%22596%22 cy=%22936%22 r=%2213%22 fill=%22%23F2C230%22/%3E%3C/svg%3E") no-repeat center / contain; transform: rotate(-3deg); transform-origin: bottom right; pointer-events: none; }
.sss-hero-tiles { position: relative; }
.sss-hero-tile { box-shadow: var(--sss-panel-shadow); border-radius: 12px !important; transition: transform .3s var(--sss-ease), box-shadow .3s var(--sss-ease); }
.sss-hero-tile:hover { transform: translateY(-4px); box-shadow: var(--sss-panel-lift); }

/* The guide sign: layered border, sheeting sheen, and one headlight sweep when the page opens */
.sss-hero-copy { position: relative; overflow: hidden; background: linear-gradient(155deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%), var(--sss-sign) !important; box-shadow: 0 0 0 6px var(--sss-sign), 0 0 0 8px rgba(0, 0, 0, .12), 0 22px 44px -20px rgba(0, 0, 0, .55) !important; }
.sss-hero-copy::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%); transform: translateX(-60%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.sss-hero-copy::after { animation: sss-headlights 2.4s .5s var(--sss-ease) both; }
@keyframes sss-headlights { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
}
.sss-hero-btn { box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }

/* Section titles: the white guide-sign rule now ends in an arrowhead */
.sss-section-title::after { height: 16px !important; opacity: 1 !important; border-radius: 0 !important; transform: translateY(-.12em) !important;
background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 1l10 7-10 7z%22 fill=%22%23fff%22/%3E%3C/svg%3E") right center / 16px 16px no-repeat, linear-gradient(var(--sss-legend), var(--sss-legend)) left center / calc(100% - 12px) 4px no-repeat !important; }
.sss-others-title::after { opacity: .45 !important; }

/* Cards and tiles: sign panels with real depth */
body .sss-card-media, .sss-theme-tile { border-radius: 12px !important; box-shadow: var(--sss-panel-shadow); transition: transform .3s var(--sss-ease), box-shadow .3s var(--sss-ease), background-color .2s; }
@media (hover: hover) {
body .sss-card:hover .sss-card-media, .sss-theme-tile:hover { transform: translateY(-4px); box-shadow: var(--sss-panel-lift); }
}
body .sss-card-title { letter-spacing: .005em; }
body .sss-card-price { color: var(--sss-legend); }
body a.sss-card-buy { border-radius: 8px; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
/* Best seller badge reads like a yellow warning plate: black inset border */
.sss-badge { box-shadow: inset 0 0 0 1.5px #10291B, 0 1px 0 rgba(0, 0, 0, .25); border-radius: 4px; padding: .38rem .55rem .32rem; }

/* Product chips */
.sss-type-link { border-width: 2px !important; transition: background-color .2s, color .2s, transform .2s var(--sss-ease); }
.sss-type-link:hover { transform: translateY(-2px); }

/* Gift guides: each one a small guide sign (inset white border, legend left-aligned, exit arrow up right) */
.sss-collection-tile { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start; text-align: left !important;
background: var(--sss-sign-deep) !important; border: 0 !important; border-radius: 12px !important; padding: .95rem 2.8rem 1rem 1.1rem !important;
box-shadow: inset 0 0 0 2.5px var(--sss-legend), inset 0 0 0 5px var(--sss-sign-deep), var(--sss-panel-shadow); transition: transform .25s var(--sss-ease), box-shadow .25s var(--sss-ease), background-color .2s, color .2s; }
.sss-collection-tile > * { text-align: left !important; align-self: stretch; margin-left: 0 !important; }
.sss-collection-tile:hover { background: var(--sss-legend) !important; color: var(--sss-sign) !important; transform: translateY(-3px); box-shadow: inset 0 0 0 2.5px var(--sss-sign), inset 0 0 0 5px var(--sss-legend), var(--sss-panel-lift); }
.sss-collection-grid { gap: .8rem !important; }

/* Highway at night: the footer opens with a two-lane road and carries the state */
.sss-footer { position: relative; border-top: 0 !important; margin-top: clamp(4rem, 8vw, 6rem) !important; padding-top: calc(var(--wp--preset--spacing--40) + 44px) !important; overflow: hidden;
background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-20 -20 1040 1115%22%3E%3Cpath d=%22M0 326 L3 292 L18 281 L31 251 L59 237 L63 230 L73 232 L80 220 L93 223 L96 212 L103 209 L107 66 L120 71 L127 62 L122 58 L138 47 L162 64 L191 62 L261 39 L285 23 L292 28 L297 23 L304 25 L327 4 L335 7 L346 0 L363 18 L341 50 L346 65 L336 72 L331 90 L337 91 L359 79 L366 66 L394 91 L418 96 L422 104 L432 99 L435 108 L441 106 L451 112 L467 151 L639 198 L686 226 L700 224 L714 233 L721 227 L736 225 L740 232 L753 236 L760 232 L769 239 L791 241 L805 249 L810 258 L801 272 L808 280 L826 278 L830 286 L845 287 L857 298 L862 305 L855 313 L863 326 L855 334 L861 348 L850 364 L852 370 L847 381 L852 385 L867 384 L877 374 L884 378 L887 385 L873 426 L887 442 L899 446 L892 456 L892 471 L868 476 L857 485 L857 496 L833 536 L831 563 L824 574 L831 580 L844 580 L854 563 L873 552 L878 534 L896 506 L919 499 L926 492 L935 498 L931 487 L954 446 L957 425 L977 418 L979 403 L987 394 L1000 393 L1000 412 L991 413 L991 443 L985 450 L978 450 L972 464 L967 472 L971 481 L963 488 L966 495 L948 515 L923 574 L911 630 L918 661 L895 683 L881 737 L888 784 L874 814 L874 831 L861 858 L855 890 L860 909 L857 920 L864 932 L859 946 L868 959 L873 989 L883 1001 L875 1042 L879 1072 L703 1075 L373 1072 L361 1042 L319 1029 L300 1016 L292 981 L285 975 L279 937 L280 921 L301 892 L293 878 L274 865 L274 830 L265 792 L270 767 L263 749 L237 712 L211 704 L189 679 L162 662 L156 632 L148 623 L102 601 L85 575 L49 570 L45 562 L36 559 L35 550 L6 525 L17 480 L16 459 L9 450 L20 437 L18 396 L38 370 L39 360 L19 329 L0 326Z%22 fill=%22%23fff%22 fill-opacity=%22.05%22 stroke=%22%23fff%22 stroke-opacity=%22.16%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%22596%22 cy=%22936%22 r=%2234%22 fill=%22none%22 stroke=%22%23F2C230%22 stroke-width=%226%22 opacity=%22.7%22/%3E%3Ccircle cx=%22596%22 cy=%22936%22 r=%2213%22 fill=%22%23F2C230%22/%3E%3C/svg%3E") no-repeat left 58% bottom -14px / min(230px, 44vw) auto, linear-gradient(180deg, var(--sss-sign-deep), var(--sss-night)) !important; }
.sss-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px;
background:
linear-gradient(var(--sss-legend), var(--sss-legend)) left top / 100% 3px no-repeat,
linear-gradient(var(--sss-legend), var(--sss-legend)) left bottom / 100% 3px no-repeat,
linear-gradient(90deg, var(--sss-amber) 0 46px, transparent 46px 86px) 0 center / 86px 4px repeat-x,
var(--sss-asphalt); }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.sss-footer::before { animation: sss-drive linear both; animation-timeline: scroll(root); }
@keyframes sss-drive { from { background-position: left top, left bottom, 0 center; } to { background-position: left top, left bottom, -860px center; } }
}
}
.sss-footer-fine { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--wide-size, 1200px) !important; margin-inline: auto !important; padding-inline: 0; opacity: .8; }
.sss-footer-links a { color: var(--sss-legend) !important; }
.sss-footer-links a:hover { color: var(--sss-amber) !important; text-decoration: none; }

/* Design page: the stage and product options as panels */
.sss-stage { border-radius: 14px !important; box-shadow: var(--sss-panel-lift); }
.sss-option { border-radius: 10px !important; }

@media (max-width: 760px) {
.sss-hero-tiles::before { display: none; }
.sss-footer { background-size: 200px auto, auto !important; background-position: right -30px bottom -40px, 0 0 !important; }
}
@media (max-width: 820px) {
/* Phone Buy bar: pad both sides so it no longer runs 16px past the screen edge */
body.sss-design .sss-cta { box-sizing: border-box; padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right) !important; }
body a.sss-buy-main { box-sizing: border-box; max-width: 100%; }
}
/* ===== /WISCONSIN LAYER v1 ===== */

/* ===== UI LAYER v2 (1 Nov 2026) ===== */
/* Additive polish on top of the theme, snippet 1646 palette and Wisconsin layer v1.
   Fixes: content-box overflow (art cropped on the right, buy button +16 px, header search +6 px),
   bottom-aligned card buy buttons, phone tap targets, visible focus on green and on light panels.
   Adds: transform/opacity micro-interactions, art zoom, skeleton panels, header scroll shadow,
   scroll reveals for sections (only where animation-timeline: view() exists). Revert: delete this block. */

/* ---------- 1. Box model: padding counts inside widths (the cropped-art bug) ---------- */
.wp-site-blocks *, .wp-site-blocks *::before, .wp-site-blocks *::after { box-sizing: border-box; }
.sss-hero-tile img, .sss-card-media img { inset: 0; width: 100%; height: 100%; max-width: none; }
.sss-stage img, .sss-buy, .sss-cta { max-width: 100%; }

/* ---------- 2. Header: no overflow at 1180-1400 px, scroll shadow ---------- */
@media (min-width: 1180px) {
  .sss-header-row > .sss-search { flex: 0 1 210px; min-width: 132px; }
}
@media (min-width: 1180px) and (max-width: 1380px) {
  .sss-nav-list a { padding-inline: 6px; letter-spacing: .03em; }
}
.sss-search { transition: box-shadow .25s var(--sss-ease, ease), transform .25s var(--sss-ease, ease); }
.sss-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 224, 122, .85), 0 8px 22px rgba(0, 0, 0, .22); }
@supports (animation-timeline: scroll()) {
  .sss-header { animation: sss-v2-headshadow linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes sss-v2-headshadow {
    from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    to   { box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .45); }
  }
}
html { scroll-padding-top: 96px; }

/* ---------- 3. Focus: yellow ring on green, sign green on light panels ---------- */
:focus-visible { outline: 3px solid #FFE07A; outline-offset: 3px; border-radius: 4px; }
.sss-card :focus-visible, .sss-chip:focus-visible, .sss-hero-tile:focus-visible, .sss-theme-tile:focus-visible,
.sss-option:focus-visible, .sss-collection-tile:focus-visible, .sss-search :focus-visible, .pxs :focus-visible, .pod-cpl :focus-visible {
  outline-color: #10291B; outline-offset: 2px;
}
.sss-card:has(:focus-visible) { outline: 3px solid #FFE07A; outline-offset: 4px; border-radius: 10px; }
::selection { background: #FFE07A; color: #10291B; }
:root { accent-color: #F2C230; }

/* ---------- 4. Cards: equal rhythm, buy buttons on one line per row ---------- */
.sss-grid { align-items: stretch; }
.sss-card { height: 100%; }
.sss-card-link { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.sss-card-title { margin-top: 10px; line-height: 1.25; text-wrap: balance; }
.sss-card-meta { margin-top: auto; padding-top: 4px; align-items: baseline; }
.sss-card-buy { margin-top: 10px; }
.sss-card-media {
  isolation: isolate;
  background:
    linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%) 0 0 / 220% 100% no-repeat,
    var(--wp--preset--color--tile, #F4F6F1);
}
.sss-card-media img, .sss-hero-tile img, .sss-theme-tile img {
  transition: transform .5s var(--sss-ease, ease), opacity .35s ease;
  will-change: transform;
}
@media (hover: hover) {
  .sss-card-link:hover .sss-card-media img, .sss-hero-tile:hover img, .sss-theme-tile:hover img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: no-preference) {
  .sss-card-media { animation: sss-v2-shimmer 1.6s ease-in-out 3; }
  @keyframes sss-v2-shimmer { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
}

/* ---------- 5. Buttons and chips: tactile, transform/opacity only ---------- */
.sss-buy, .sss-chip, .sss-hero-btn, .sss-type-link, .sss-option, .wp-element-button {
  transition: transform .18s var(--sss-ease, ease), box-shadow .18s var(--sss-ease, ease), background-color .18s ease, color .18s ease;
}
@media (hover: hover) {
  .sss-buy:hover, .sss-hero-btn:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.45); }
  .sss-chip:hover, .sss-type-link:hover { transform: translateY(-1px); }
}
.sss-buy:active, .sss-chip:active, .sss-hero-btn:active, .sss-type-link:active, .wp-element-button:active { transform: translateY(0) scale(.98); }

/* ---------- 6. Hero tiles: label sits on a frosted strip ---------- */
.sss-hero-tile > :not(img) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- 7. Section reveals (supporting browsers only; never hides content elsewhere) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sss-section-title, .sss-collection-tile, .sss-theme-tile, .sss-faq details, .sss-faq h3,
    .sss-landing-intro > *, .pxs, .pod-cpl, .sss-related > h2 {
      animation: sss-v2-rise both linear; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
    @keyframes sss-v2-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ---------- 8. View transitions: quicker, gentler cross-fade ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--sss-ease, ease); }

/* ---------- 9. Phone: 44 px tap targets, tidy gutters ---------- */
@media (max-width: 820px) {
  .sss-chip, .sss-type-link, .sss-card-buy, .sss-nav-list a, .sss-footer a, .sss-breadcrumb a,
  .sss-filters select, .sss-filters button { min-height: 44px; }
  .sss-chip, .sss-type-link, .sss-nav-list a, .sss-footer a { display: inline-flex; align-items: center; }
  .sss-chips { gap: 8px; }
  .sss-card-buy { justify-content: center; }
}

/* ---------- 10. Reduced motion: everything above stands still ---------- */
@media (prefers-reduced-motion: reduce) {
  .sss-card-media img, .sss-hero-tile img, .sss-theme-tile img, .sss-buy, .sss-chip, .sss-hero-btn, .sss-type-link { transition: none !important; transform: none !important; }
  .sss-header { animation: none !important; }
}
/* ===== /UI LAYER v2 ===== */

/* ===== UI LAYER v3 (sales, 1 Nov 2026) ===== */
/* Goal: shorter path to the Buy click. Clear Buy hierarchy (sign-yellow primary on the green ground,
   highway-green Buy on light cards), denser phone grids, a sticky buy panel, scroll-driven polish
   that never hides content or moves the first paint. CSS only; revert = delete this block. */

/* ---------- 1. Buy hierarchy ---------- */
/* Primary: the design page's main Buy — a yellow warning-sign plate on the green ground */
.sss-buy.sss-buy-main {
  background: var(--wp--preset--color--yellow, #F2C230) !important;
  color: var(--sss-panel-ink, #10291B) !important;
  border: 0 !important;
  min-height: 56px;
  width: 100%;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1.15rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(16, 41, 27, .9), inset 0 0 0 5px var(--wp--preset--color--yellow, #F2C230), 0 8px 20px rgba(0, 0, 0, .22);
  transition: transform .18s var(--sss-ease, ease), box-shadow .18s var(--sss-ease, ease), filter .18s ease;
}
.sss-buy.sss-buy-main:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(16, 41, 27, .9), inset 0 0 0 5px var(--wp--preset--color--yellow, #F2C230), 0 14px 28px rgba(0, 0, 0, .28); }
.sss-buy.sss-buy-main:active { transform: translateY(0) scale(.985); }
.sss-buy.sss-buy-main:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sss-buy.sss-buy-main .sss-buy-price {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 1.35em; font-weight: 800; line-height: 1;
  padding: .2em .5em; border-radius: 6px;
  background: rgba(16, 41, 27, .1);
}

/* Secondary-but-decisive: Buy on light cards is highway green (the theme's original Buy colour) */
.sss-card .sss-buy.sss-card-buy {
  background: var(--sss-sign, #006B3F) !important;
  color: #fff !important;
  border-color: var(--sss-sign, #006B3F) !important;
  font-weight: 800;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.sss-card .sss-buy.sss-card-buy .sss-buy-price { color: inherit; font-weight: 800; }
.sss-card:hover .sss-buy.sss-card-buy,
.sss-card .sss-buy.sss-card-buy:hover,
.sss-card .sss-buy.sss-card-buy:focus-visible {
  background: var(--wp--preset--color--yellow, #F2C230) !important;
  color: var(--sss-panel-ink, #10291B) !important;
  border-color: var(--wp--preset--color--yellow, #F2C230) !important;
}
.sss-card .sss-buy.sss-card-buy:active { transform: scale(.98); }

/* ---------- 2. Cards that scan: title, then price, then Buy ---------- */
.sss-card-title { text-wrap: balance; line-height: 1.2; }
.sss-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .6rem; }
.sss-card-price { font-weight: 800; color: var(--sss-panel-ink, #10291B); font-variant-numeric: tabular-nums; }
.sss-card-type { opacity: .72; }
.sss-card-media img { transition: transform .35s var(--sss-ease, ease); }

/* ---------- 3. Design page: compact picker, sticky buy panel on desktop ---------- */
.sss-options { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.sss-option { min-height: 60px; align-content: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sss-option:hover { transform: translateY(-1px); }
.sss-option img { width: 46px; height: 46px; object-fit: contain; }
.sss-option:has(input:checked) { box-shadow: 0 0 0 3px var(--wp--preset--color--yellow, #F2C230); }
.sss-option:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--yellow, #F2C230); outline-offset: 2px; }
.sss-picker-range { font-weight: 700; }
@media (min-width: 821px) {
  .sss-picker { align-items: start; }
  .sss-picker-panel { position: sticky; top: calc(70px + 1.25rem); }
  .sss-cta { margin-top: 1.1rem; }
  .sss-trust { font-size: .88rem; opacity: .85; margin-top: .6rem; }
}

/* Phone buy bar: a solid full-width plate pinned to the bottom, clear of the home indicator */
@media (max-width: 820px) {
  /* fixed (not sticky inside the picker) so Buy stays in reach while reading the copy below */
  body.sss-design { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  body.sss-design .sss-cta {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; margin: 0 !important; z-index: 60 !important;
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)) !important;
    background: color-mix(in oklab, var(--sss-panel-ink, #10291B) 94%, transparent) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .25);
    padding-top: .6rem !important;
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)) !important;
    display: flex; flex-direction: column; gap: .35rem;
  }
  body.sss-design .sss-cta > p:empty { display: none; }
  body.sss-design .sss-cta .sss-buy-main { min-height: 54px; box-shadow: inset 0 0 0 2px rgba(16, 41, 27, .9), inset 0 0 0 5px var(--wp--preset--color--yellow, #F2C230); }
  body.sss-design .sss-trust { margin: 0; font-size: .74rem; line-height: 1.3; color: rgba(255, 255, 255, .82); text-align: center; }
  .sss-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4. Phone grids: two products per row (half the scrolling to see the range) ---------- */
@media (max-width: 600px) {
  .sss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .sss-grid .sss-card { min-width: 0; }
  .sss-grid .sss-card-title { font-size: .98rem; }
  .sss-grid .sss-card-meta { font-size: .82rem; }
  .sss-grid .sss-card-price { font-size: 1rem; }
  .sss-grid .sss-badge { font-size: .62rem; padding: .2em .45em; }
  .sss-grid .sss-buy.sss-card-buy { min-height: 44px; font-size: .9rem; padding-inline: .6rem; }
  .sss-grid .sss-buy.sss-card-buy .sss-buy-price { margin-left: .35em; }
  /* related designs on a design page: a swipeable strip instead of another long column */
  .sss-related .sss-grid {
    grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 46%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding-bottom: .6rem; scrollbar-width: thin;
  }
  .sss-related .sss-grid > .sss-card { scroll-snap-align: start; }
  /* "near me" prompt: compact so the products come sooner */
  .pf-near.pf-section { margin: 1.25rem auto; padding: 14px; }
  .pf-near .pf-pin { width: 36px; height: 36px; }
  .pf-near .pf-h2 { font-size: 1.12rem; }
  .pf-near .pf-note { font-size: .85rem; }
  .pf-near .pf-ask-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-near .pf-ask-act .pf-btn, .pf-near .pf-ask-act select { width: 100%; font-size: .9rem; }
}

/* Type links and other chip rows scroll with snap points */
ul:has(> li > a.sss-type-link) { scroll-snap-type: x proximity; }
li:has(> a.sss-type-link) { scroll-snap-align: start; }

/* ---------- 5. Speed: skip rendering far-below-the-fold sections until they are near ---------- */
.sss-story, .sss-home-extra, .sss-shops, .sss-design-copy ~ .pxs, .sss-related, .pod-cpl {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* ---------- 6. Scroll-driven polish (only where supported; nothing starts hidden) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* a thin sign-yellow trip meter under the sticky header */
    .sss-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
      background: var(--wp--preset--color--yellow, #F2C230);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: sss-v3-trip linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
    /* the hero's Wisconsin outline drifts slower than the page (decoration only, never the hero images) */
    .sss-hero-tiles::before { animation: sss-v3-drift linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
  @supports (animation-timeline: view()) {
    /* design-page art eases up a touch as the copy scrolls past (starts at full size: no first-paint change) */
    body.sss-design .sss-stage img { animation: sss-v3-settle linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes sss-v3-trip { to { transform: scaleX(1); } }
@keyframes sss-v3-drift { from { translate: 0 0; } to { translate: 0 70px; } }
@keyframes sss-v3-settle { from { scale: 1; } to { scale: .96; } }

/* ---------- 7. Hover lift for art in cards (pointer devices only) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sss-card:hover .sss-card-media img { transform: scale(1.04); }
}

/* ---------- 8. Reduced motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .sss-buy.sss-buy-main, .sss-card .sss-buy.sss-card-buy, .sss-option, .sss-card-media img { transition: none !important; }
  .sss-buy.sss-buy-main:hover, .sss-option:hover { transform: none; }
}
@media print {
  .sss-header::after { display: none !important; }
  body.sss-design .sss-cta { position: static !important; box-shadow: none !important; background: none !important; }
  .sss-story, .sss-home-extra, .sss-shops, .sss-related, .pod-cpl { content-visibility: visible; }
}
/* ===== /UI LAYER v3 ===== */