/* PrestoStore - Bookshop */
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/libre-baskerville-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/libre-baskerville-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{--font-body:"Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--font-heading:"Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, serif;--heading-scale:1.00;--radius-btn:3px;--radius-card:2px;--logo-w:300px;--card-ratio:2 / 3;--c-sale:#a3341f;--c-sale-fg:#ffffff;--page-w:1240px;--btn-border:1.5px;--card-shadow:none;--card-align:left;--header-h:70px;--menu-font:var(--font-body);--menu-size:16px;--menu-weight:400;--menu-case:none;--menu-track:normal;--menu-pad:12px;--menu-radius:8px;--c-outside:#e7e4dd;--menu-btn:#2f3136;--menu-btn-fg:#ffffff;--side-w:240px;--side-btn:#2f3136;--side-btn-fg:#ffffff;--logo-w-phone:220px;}
.scheme-light{--bg:#fbf7ee;--fg:#2b2622;--accent:#c8102e;--accent-fg:#ffffff;}
.scheme-soft{--bg:#f1e9d8;--fg:#2b2622;--accent:#c8102e;--accent-fg:#ffffff;}
.scheme-accent{--bg:#c8102e;--fg:#ffffff;--accent:#ffffff;--accent-fg:#c8102e;}
.scheme-dark{--bg:#2b2622;--fg:#fbf7ee;--accent:#fbf7ee;--accent-fg:#2b2622;}
.site-header.own-colors{--bg:#ffffff;--fg:#2b2622;--line:color-mix(in srgb,var(--fg) 14%,transparent);--muted:color-mix(in srgb,var(--fg) 70%,var(--bg));--tint:color-mix(in srgb,var(--fg) 5%,var(--bg));background:var(--bg);color:var(--fg);}
.site-header.own-colors .sub>ul,.site-header.own-colors .mega-panel,.site-header.own-colors .drawer-nav{--bg:#ffffff;--fg:#1c1d21;--line:color-mix(in srgb,var(--fg) 14%,transparent);--muted:color-mix(in srgb,var(--fg) 70%,var(--bg));--tint:color-mix(in srgb,var(--fg) 5%,var(--bg));background:var(--bg);color:var(--fg);}

/*
 * PrestoStore storefront - the base every theme builds on, and the section
 * library's styles (PLAN.md section 7). Mobile first.
 *
 * Served inside /theme.css?v=..., after the store's tokens (Theme::tokensCss):
 *   --font-body --font-heading --heading-scale --radius-btn --radius-card
 *   --logo-w --card-ratio --c-sale --c-sale-fg
 *   --page-w --btn-border --card-shadow --card-align (phase 14a)
 *   --c-outside --menu-btn --menu-btn-fg (phase 17a)  --side-w --side-btn --side-btn-fg (phase 17e)
 * and, per color scheme (.scheme-light/-soft/-accent/-dark):
 *   --bg --fg --accent --accent-fg
 * Every var() here has a fallback, so this file alone (the "store not
 * available" page) still reads well.
 *
 * Never an inline style (the CSP has no 'unsafe-inline'), so every variant a
 * setting can produce is a class here: .h-small, .ov-30, .grid-4, .cols-3...
 */

/* ------------------------------------------------------------------ fonts */
/* Manrope, served from the store's own host. Only the weights used. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/manrope-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/manrope-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/manrope-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/manrope-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/manrope-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ----------------------------------------------------------------- schemes */
/* Each section paints its own scheme; these are derived from the four. */
.layer-store, [class*="scheme-"] {
  --line:  color-mix(in srgb, var(--fg, #1c1d21) 14%, transparent);
  --muted: color-mix(in srgb, var(--fg, #1c1d21) 70%, var(--bg, #fff));
  --tint:  color-mix(in srgb, var(--fg, #1c1d21) 5%, var(--bg, #fff));
  background: var(--bg, #fff);
  color: var(--fg, #1c1d21);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0 0 14px; }
h1, h2, h3, .sec-heading, .page-title {
  font-family: var(--font-heading, inherit);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 14px;
  text-wrap: balance;
  font-weight: 700;
}
:focus-visible { outline: 3px solid var(--accent, #2f3136); outline-offset: 2px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--page-w, 1240px); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 750px) { .wrap { padding-inline: 32px; } }
.narrow { max-width: 820px; }
.text-center { text-align: center; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; border-radius: 8px; }
.skip:focus { top: 12px; }
.meta { font-size: 14px; color: var(--muted); }
.h-small { font-size: 18px; }

/* ---------------------------------------------------------------- sections */
.sec { padding-block: 44px; }
@media (min-width: 750px) { .sec { padding-block: 64px; } }
/* Two sections in the same scheme sit closer, as one would expect. */
.sec.scheme-light + .sec.scheme-light, .sec.scheme-soft + .sec.scheme-soft { padding-top: 8px; }
/* Two classes, so a theme's own .sec spacing (phase 8) never reaches these. */
.sec.sec-header, .sec.sec-announcement, .sec.sec-footer, .sec.sec-slideshow { padding-block: 0; }
.sec-heading { font-size: calc(26px * var(--heading-scale, 1)); }
@media (min-width: 750px) { .sec-heading { font-size: calc(32px * var(--heading-scale, 1)); } }
.page-title { font-size: calc(32px * var(--heading-scale, 1)); }
@media (min-width: 750px) { .page-title { font-size: calc(42px * var(--heading-scale, 1)); } }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.sec-head .sec-heading { margin: 0; }
.link-more { font-weight: 700; white-space: nowrap; }
.empty-state { padding-block: 22px; color: var(--muted); }
.empty-store { padding-block: 40px; }
.caption { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* ----------------------------------------------------------------- buttons */
.button, .link-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border: var(--btn-border, 1.5px) solid var(--accent, #2f3136); border-radius: var(--radius-btn, 8px);
  background: var(--accent, #2f3136); color: var(--accent-fg, #fff);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: opacity .15s, transform .05s;
}
.button:hover { opacity: .9; }
.button:active { transform: translateY(1px); }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.button-secondary { background: transparent; color: var(--fg, #1c1d21); border-color: var(--line); }
.button-secondary:hover { border-color: var(--fg, #1c1d21); opacity: 1; }
.button-full { width: 100%; }
.button .icon { width: 20px; height: 20px; }
.link-button { min-height: 40px; padding: 6px 2px; background: none; border: 0; color: inherit; text-decoration: underline; font-weight: 600; }
.icon { width: 24px; height: 24px; flex: none; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
}
.icon-button:hover { background: var(--tint); }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:active { transform: none; } }

/* ------------------------------------------------------------------ header */
.announce { font-size: 14px; font-weight: 600; text-align: center; }
.announce .wrap { padding-block: 9px; }
.announce p { margin: 0; }
.announce a { text-decoration: none; }
.announce a:hover { text-decoration: underline; }

.site-header { border-bottom: 1px solid var(--line); background: var(--bg, #fff); }
.sec-header:has(.is-sticky) { position: sticky; top: 0; z-index: 20; }
.header-row { display: flex; align-items: center; gap: 8px; min-height: var(--header-h, 64px); }
.logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; min-height: 44px; }
.logo-text { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.logo-img { width: var(--logo-w-phone, calc(var(--logo-w, 140px) * .78)); max-height: 64px; object-fit: contain; object-position: left center; }
@media (min-width: 750px) { .logo-img { width: var(--logo-w, 140px); max-height: 90px; } }
.header-icons { display: flex; align-items: center; gap: 2px; }
.cart-count {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--accent, #2f3136); color: var(--accent-fg, #fff); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}
.header-nav { display: none; }
.header-nav ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Phase 15b: the menu's type, spacing and corners are the theme's settings (Theme::tokensCss). */
.header-nav a, .header-nav summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px var(--menu-pad, 12px); border-radius: var(--menu-radius, 8px);
  font-family: var(--menu-font, inherit); font-size: var(--menu-size, 16px); font-weight: var(--menu-weight, 600);
  text-transform: var(--menu-case, none); letter-spacing: var(--menu-track, normal);
  text-decoration: none; cursor: pointer; list-style: none;
}
.header-nav summary::-webkit-details-marker { display: none; }
.header-nav a:hover, .header-nav summary:hover { background: var(--tint); }
.header-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.header-nav .icon { width: 16px; height: 16px; }
.has-sub { position: relative; }
.sub > ul {
  position: absolute; top: 100%; left: 0; z-index: 30; display: grid; min-width: 220px; padding: 8px;
  background: var(--bg, #fff); color: var(--fg, #1c1d21); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .25);
}
.sub ul a { display: flex; width: 100%; }
.header-nav summary[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; }
.sub > ul.sub-end { left: auto; right: 0; }
/* Phase 13h: a third level - a link with links under it flies its own list out
   beside the dropdown, level with it (8px padding + 1px border), or to its left
   when the window has no room on the right (store.js). */
.has-fly { position: relative; }
.header-nav .fly > summary { display: flex; width: 100%; justify-content: space-between; gap: 12px; }
.fly[open] > summary { background: var(--tint); }
.fly > ul { top: -9px; left: calc(100% + 9px); }
.fly > ul.sub-end { left: auto; right: calc(100% + 9px); }
.header-nav .menu-label { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; color: var(--muted); }
@media (min-width: 990px) {
  .header-nav { display: block; }
  .drawer { display: none; }
  /* The menu on the left, the logo in the middle (the Header section's "logo in the middle"; phase 15a's arrangement "centered"). */
  .arr-centered .header-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .arr-centered .logo { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .arr-centered .header-nav { grid-column: 1; grid-row: 1; }
  .arr-centered .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* The phone menu: a <details> that opens a full-width panel. */
.drawer summary { list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer .icon-close, .drawer[open] .icon-menu { display: none; }
.drawer[open] .icon-close { display: block; }
.drawer-nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: calc(100dvh - 80px); overflow-y: auto;
  padding: 8px 16px 20px; background: var(--bg, #fff); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .3);
}
/* In line with the page's own gutter (.wrap), which widens on a tablet. */
@media (min-width: 750px) { .drawer-nav { padding-inline: 32px; } }
.site-header { position: relative; }
.drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-nav a { display: flex; align-items: center; min-height: 52px; font-size: 18px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer-nav ul ul a { padding-left: 18px; font-size: 16px; font-weight: 400; }
/* Phase 13a: a link with links under it opens its own list, down to the third level. */
.drawer-sub > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 18px; font-weight: 600;
  border-bottom: 1px solid var(--line); cursor: pointer; list-style: none; }
.drawer-sub > summary::-webkit-details-marker { display: none; }
.drawer-sub > summary .icon { width: 18px; height: 18px; transition: transform .15s; }
.drawer-sub[open] > summary .icon { transform: rotate(180deg); }
.drawer-sub .drawer-sub > summary { padding-left: 18px; font-size: 16px; }
.drawer-nav ul ul ul a { padding-left: 36px; }
@media (prefers-reduced-motion: reduce) { .drawer-sub > summary .icon { transition: none; } }

/* ------------------------------------------------------------------ footer */
.site-footer { padding-block: 48px 24px; font-size: 15px; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 750px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; } }
.footer-h { font-size: 15px; letter-spacing: .02em; margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact .icon { width: 18px; height: 18px; margin-top: 11px; opacity: .8; }
.footer-contact address { font-style: normal; padding-block: 8px; }
.footer-about .rte { color: var(--muted); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 36px; padding-top: 18px;
                 border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.footer-bottom p { margin: 0; }
.footer-bottom a { text-decoration: none; }
.site-footer .sublinks { padding-left: 14px; }
.menu-label { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; }

/* ------------------------------------------- a page's own sections (13b) */
.sec-main-page:has(.title-only) { padding-block: 0; }
.sec.sec-divider { padding-block: 0; }
.divider-small { padding-block: 8px; } .divider-medium { padding-block: 24px; } .divider-large { padding-block: 48px; }
.divider hr { margin: 0; border: 0; border-top: 1px solid var(--line); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-card, 8px); }
.table-scroll:focus-visible { outline: 2px solid var(--accent, #2f3136); outline-offset: 2px; }
.sec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sec-table th, .sec-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sec-table thead th { font-weight: 700; background: var(--tint); }
.sec-table tbody tr:last-child td { border-bottom: 0; }
.table-note { margin: 10px 0 0; font-size: 14px; }

/* ------------------------------------------------------- the Menu section */
/* Phase 13a: a menu's links on a page (views/sections/link-list.php). */
.menu-links ul { list-style: none; margin: 0; padding: 0; }
.menu-links a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-links a[aria-current="page"] { font-weight: 700; }
.ll-list > ul, .menu-links .sublinks, .ll-col ul { display: grid; gap: 0; }
.menu-links .sublinks { padding-left: 18px; }
.text-center.ll-list .sublinks { padding-left: 0; }
.ll-cols { display: grid; gap: 20px 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ll-col-h { margin: 0 0 4px; font-size: 17px; }
.ll-flat { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ll-buttons .ll-flat { gap: 10px; }
.text-center .ll-flat { justify-content: center; }

/* --------------------------------------------------------------- slideshow */
.slideshow { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; overflow: hidden; }
.h-small .slide { min-height: 320px; }
.h-medium .slide { min-height: 440px; }
.h-large .slide { min-height: 560px; }
@media (min-width: 750px) { .h-small .slide { min-height: 380px; } .h-medium .slide { min-height: 560px; } .h-large .slide { min-height: 720px; } }
.h-adapt .slide { min-height: 280px; }
.slide-img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.h-adapt .slide-img { height: auto; }
.slide::after { content: ""; grid-area: 1 / 1; background: #000; opacity: 0; pointer-events: none; }
.ov-10::after { opacity: .1; } .ov-20::after { opacity: .2; } .ov-30::after { opacity: .3; } .ov-40::after { opacity: .4; }
.ov-50::after { opacity: .5; } .ov-60::after { opacity: .6; } .ov-70::after { opacity: .7; } .ov-80::after { opacity: .8; }
.slide-text { grid-area: 1 / 1; z-index: 1; align-self: center; width: 100%; max-width: var(--page-w, 1240px); margin-inline: auto; padding: 48px 20px; }
@media (min-width: 750px) { .slide-text { padding: 64px 40px; } }
.slide:not(.slide-plain) .slide-text { color: #fff; }
.slide:not(.slide-plain) .button { background: #fff; color: #111; border-color: #fff; }
.align-center .slide-text { text-align: center; }
.align-center .slide-copy { margin-inline: auto; }
.slide-heading { font-size: calc(34px * var(--heading-scale, 1)); max-width: 16em; }
.align-center .slide-heading { margin-inline: auto; }
@media (min-width: 750px) { .slide-heading { font-size: calc(54px * var(--heading-scale, 1)); } }
.slide-copy { font-size: 18px; max-width: 36em; margin-bottom: 22px; }
.slide-controls { display: flex; align-items: center; justify-content: center; gap: 6px; padding-block: 10px; }
.slide-dots { display: flex; gap: 2px; }
.dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; }
.dot[aria-current="true"]::before { background: currentColor; }

/* ------------------------------------------------------------------- grids */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 750px) {
  .grid { gap: 36px 22px; }
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 990px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.posts { grid-template-columns: 1fr; }
@media (min-width: 750px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------- cards */
.card { display: block; text-decoration: none; color: inherit; text-align: var(--card-align, left); }
.card-pic { position: relative; display: block; overflow: hidden; border-radius: var(--radius-card, 8px); background: var(--tint); aspect-ratio: var(--card-ratio, 1 / 1); box-shadow: var(--card-shadow, none); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .card-pic img { transform: scale(1.03); }
.card-pic-none { display: block; aspect-ratio: var(--card-ratio, 1 / 1); background: var(--tint); border-radius: var(--radius-card, 8px); }
.card-vendor { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card-title { display: block; margin-top: 10px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.card-vendor + .card-title { margin-top: 2px; }
.card:hover .card-title { text-decoration: underline; }
.card-price { display: block; margin-top: 4px; }
.ccard .card-title { font-size: 18px; }
.badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-sale { background: var(--c-sale, #b3261e); color: var(--c-sale-fg, #fff); }
.badge-out { background: var(--bg, #fff); color: var(--fg, #1c1d21); border: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .card-pic img { transition: none; } .card:hover .card-pic img { transform: none; } }

.price { font-variant-numeric: tabular-nums; }
.price-from { color: var(--muted); }
.price-sale { color: var(--c-sale, #b3261e); }
.price-was { color: var(--muted); font-size: .9em; margin-left: 4px; }

/* -------------------------------------------------------------- the product */
.product { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 990px) { .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.product-media { min-width: 0; }
@media (min-width: 990px) { .product-media { position: sticky; top: 90px; } }
.gallery-main img, .gallery-none { width: 100%; border-radius: var(--radius-card, 8px); background: var(--tint); }
.gallery-none { aspect-ratio: 1 / 1; }
.thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.thumb { display: block; width: 76px; flex: none; border: 2px solid transparent; border-radius: calc(var(--radius-card, 8px) + 2px); overflow: hidden; }
.thumb img { width: 72px; height: 72px; object-fit: cover; }
.thumb.is-current { border-color: var(--fg, #1c1d21); }
.vendor { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.product-title { font-size: calc(30px * var(--heading-scale, 1)); }
@media (min-width: 750px) { .product-title { font-size: calc(38px * var(--heading-scale, 1)); } }
.product-price { font-size: 22px; font-weight: 600; margin-bottom: 18px; }
.product-form { display: grid; gap: 14px; margin-bottom: 22px; }
.product-description { margin-top: 26px; }
.form-status { margin: 0; min-height: 1.6em; font-weight: 600; }
.form-status a { font-weight: 700; }
/* Turnstile's frame in a store form (store.js, 18): no room until the check needs the shopper. */
.ts-frame { display: block; width: 300px; max-width: 100%; height: 0; border: 0; }
.ts-frame.is-shown { height: 65px; }
.pickers { display: grid; gap: 14px; }
.picker legend { font-size: 14px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-btn, 8px); cursor: pointer; font-weight: 600;
}
.swatch input:checked + span { border-color: var(--fg, #1c1d21); box-shadow: inset 0 0 0 1px var(--fg, #1c1d21); }
.swatch input:focus-visible + span { outline: 3px solid var(--accent, #2f3136); outline-offset: 2px; }
.swatch.is-out span { color: var(--muted); text-decoration: line-through; }
.fproduct { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 750px) { .fproduct { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.fproduct-pic img { border-radius: var(--radius-card, 8px); }
.fproduct .sec-heading a { text-decoration: none; }

/* ------------------------------------------------------------------- forms */
.field { display: grid; gap: 6px; }
.field label, .price-range legend { font-size: 14px; font-weight: 700; }
.field input, .field select, .search-form input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px;   /* never under 16px: iOS zooms */
  color: var(--fg, #1c1d21); background: var(--bg, #fff); border: 1.5px solid var(--line); border-radius: var(--radius-btn, 8px);
}
.field input:focus, .field select:focus, .search-form input:focus { outline: none; border-color: var(--fg, #1c1d21); }
.qty input { max-width: 120px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent, #2f3136); margin: 0; }
.search-form { display: flex; gap: 8px; max-width: 640px; margin-bottom: 26px; }
.text-center .search-form { margin-inline: auto; }
.search-form .button { flex: none; padding-inline: 16px; }
.notice { padding: 12px 16px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); font-weight: 600; }

/* -------------------------------------------------------------- collection */
.collection-description { max-width: 46em; margin-bottom: 18px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 10px 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.toolbar .count { margin: 0 0 12px auto; color: var(--muted); }
.sort { min-width: 210px; }
.filters { flex-basis: 100%; }
.filters > summary { list-style: none; min-height: 44px; }
.filters > summary::-webkit-details-marker { display: none; }
.filters-body { display: grid; gap: 14px; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
@media (min-width: 750px) { .filters-body { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; } }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0; }
.price-range legend { grid-column: 1 / -1; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
.chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; }
.chips a:hover { border-color: var(--fg, #1c1d21); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; }
.pager p { margin: 0; color: var(--muted); }
.pager-links { display: flex; gap: 8px; }

/* ------------------------------------------------------------- text blocks */
.rte { overflow-wrap: anywhere; }
.rte > :last-child { margin-bottom: 0; }
.rte h2 { font-size: 24px; margin-top: 28px; } .rte h3 { font-size: 20px; margin-top: 22px; }
.rte ul, .rte ol { padding-left: 22px; }
.rte img { border-radius: var(--radius-card, 8px); }
.rte table { border-collapse: collapse; width: 100%; }
.rte th, .rte td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.rte blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--line); color: var(--muted); }
.rte a { font-weight: 600; }
/* A button after formatted words: the words' last paragraph has no margin. */
.rte + .button { margin-top: 22px; }
.text-center .button { margin-top: 6px; }

.iwt { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 750px) {
  .iwt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .iwt-second .iwt-pic { order: 2; }
}
.iwt-noimg { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.iwt-pic img { width: 100%; border-radius: var(--radius-card, 8px); }

.cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 750px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 990px) { .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.col-pic { margin-bottom: 14px; overflow: hidden; border-radius: var(--radius-card, 8px); background: var(--tint); }
.col-pic img { width: 100%; height: 100%; object-fit: cover; }
.ratio-square .col-pic { aspect-ratio: 1 / 1; } .ratio-landscape .col-pic { aspect-ratio: 4 / 3; } .ratio-portrait .col-pic { aspect-ratio: 4 / 5; }
.col-title { font-size: 20px; margin-bottom: 8px; }
.col-title a { text-decoration: none; }
.col-title a:hover { text-decoration: underline; }

.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 750px) { .quotes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.quote { margin: 0; height: 100%; padding: 24px; border-radius: var(--radius-card, 8px); background: color-mix(in srgb, var(--bg, #fff) 70%, #fff); border: 1px solid var(--line); }
.quote blockquote { margin: 0 0 14px; font-size: 18px; }
.quote blockquote p { margin: 0; }
.quote figcaption { font-weight: 700; }
.quote figcaption::before { content: "— "; }

.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
.logos img { width: auto; max-width: 160px; max-height: 64px; object-fit: contain; }

.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card, 8px); background: #111; }
.video iframe, .video-facade, .video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade img { object-fit: cover; opacity: .85; }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 700; font-size: 18px; }
.video-play .icon { width: 64px; height: 64px; padding: 18px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.video-facade:hover .video-play .icon { background: rgba(0, 0, 0, .75); }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 750px) { .gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card, 8px); }
.gallery figcaption { margin-top: 6px; font-size: 14px; color: var(--muted); }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding-block: 10px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item .rte { padding-bottom: 18px; }

.location { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 750px) { .location { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.location address { font-style: normal; margin-bottom: 18px; }

.post-card .post-pic { margin-bottom: 14px; aspect-ratio: 3 / 2; }
.post-title { font-size: 20px; margin-bottom: 8px; }
.post-title a { text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-card .meta { margin-bottom: 6px; }
.article .article-pic { margin-block: 18px 26px; }
.article .article-pic img { border-radius: var(--radius-card, 8px); width: 100%; }
.back { margin-top: 36px; }

.countdown-ends { color: inherit; opacity: .85; }
.countdown-clock { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.link-list a { display: inline-flex; min-height: 40px; align-items: center; font-weight: 600; }
.contact-list { display: grid; gap: 4px 20px; grid-template-columns: 1fr; margin: 0 0 30px; }
@media (min-width: 560px) { .contact-list { grid-template-columns: 120px 1fr; } }
.contact-list dt { font-weight: 700; color: var(--muted); }
.contact-list dd { margin: 0 0 10px; }
.contact-list address { font-style: normal; }

/* -------------------------------------------------------------------- cart */
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--line); }
.cart-pic { grid-row: span 2; }
.cart-pic img, .cart-pic .card-pic-none { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-card, 8px); }
.cart-title { font-weight: 700; text-decoration: none; }
.cart-title:hover { text-decoration: underline; }
.cart-what .meta { margin: 2px 0 0; }
.cart-total { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cart-qty { grid-column: 2; }
.cart-qty label { font-size: 13px; }
.cart-qty input { max-width: 96px; }
.cart-line .link-button { grid-column: 3; justify-self: end; align-self: end; }
@media (min-width: 750px) {
  .cart-line { grid-template-columns: 96px minmax(0, 1fr) 130px 110px; align-items: center; }
  .cart-pic { grid-row: auto; }
  .cart-pic img, .cart-pic .card-pic-none { width: 96px; height: 96px; }
  .cart-qty { grid-column: 3; }
  .cart-total { grid-column: 4; }
  .cart-line .link-button { grid-column: 2; justify-self: start; align-self: start; margin-top: -8px; }
}
.cart-update { text-align: right; margin-top: 16px; }
.cart-summary { max-width: 380px; margin: 26px 0 0 auto; padding: 22px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; }
.cart-summary p { margin: 0; }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 18px; }

/* ------------------------------------------------------------ preview bar */
/* PrestoStore's, not the merchant's: dark and amber, unlike any theme, so it
   never blends in (PLAN.md section 6). */
.preview { background: #1C1D21; color: #FFD27A; font-size: 14px; padding-top: env(safe-area-inset-top, 0px); }
.preview-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding-block: 8px; }
.preview p { margin: 0; }
.preview b { color: #fff; margin-right: 6px; }
.preview-admin { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 8px; background: #FFD27A; color: #1C1D21; font-weight: 700; text-decoration: none; }
.preview-admin:hover { background: #fff; }

/* ---------------------------------------------------------------- checkout */
/* Phase 4 (PLAN.md section 8): views/checkout.php and the pages in
   layout_checkout.php. Mobile first: the summary is a collapsible bar above
   the form and Pay sits in a bar that clears the home indicator; from 900px
   the summary stands beside the form. Address and pay-on-pickup follow the
   delivery choice with :has(), so none of it needs script. */
.m-0 { margin: 0; }
.co-body { min-height: 100vh; display: flex; flex-direction: column; }
.co-body main { flex: 1; }
.co-test .preview-row { justify-content: center; text-align: center; }
.co-header { border-bottom: 1px solid var(--line); }
.co-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.co-header .logo { margin-right: 0; }
.co { display: grid; gap: 0 48px; padding-bottom: 32px; }
.co-sum { order: -1; margin-inline: -16px; background: var(--tint); border-bottom: 1px solid var(--line); }
.co-sum-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; }
.co-sum-bar::-webkit-details-marker { display: none; }
.co-sum-label::after { content: " \25BE"; }
.co-sum[open] .co-sum-label::after { content: " \25B4"; }
.co-sum-total { font-variant-numeric: tabular-nums; font-size: 18px; }
.co-sum-body { padding: 0 16px 18px; }
.co-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.co-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.co-line-plain { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.co-pic { position: relative; }
.co-pic img, .co-pic .card-pic-none { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-card, 8px); border: 1px solid var(--line); background: var(--bg, #fff); }
.co-qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--fg, #1c1d21); color: var(--bg, #fff); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.co-what { display: grid; min-width: 0; line-height: 1.35; }
.co-what b { overflow-wrap: anywhere; }
.co-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.co-totals { margin: 0; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.co-totals div { display: flex; justify-content: space-between; gap: 12px; }
.co-totals dt { color: var(--muted); }
.co-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.co-grand { padding-top: 6px; font-size: 20px; font-weight: 700; }
.co-grand dt { color: inherit; }
.co-main { display: grid; gap: 26px; padding-top: 22px; min-width: 0; align-content: start; }
.co-h { font-size: 20px; margin: 0 0 12px; }
.co-step { display: grid; gap: 14px; }
.co-step .co-h { margin: 0; }
.co-step-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
/* Errors in the red box, no "!" (as the admin's). */
.co-err { display: block; margin: 0; padding: 8px 12px; border: 1px solid currentColor; border-radius: 8px; color: var(--c-sale, #b3261e);
          background: color-mix(in srgb, var(--c-sale, #b3261e) 7%, var(--bg, #fff)); font-size: 14px; font-weight: 600; }
.co-field input[aria-invalid="true"], .co-field select[aria-invalid="true"] { border-color: var(--c-sale, #b3261e); }
.co-problem { color: var(--c-sale, #b3261e); border-color: currentColor; background: color-mix(in srgb, var(--c-sale, #b3261e) 7%, var(--bg, #fff)); }
.co-check { font-weight: 500; }
.co-address { display: grid; gap: 14px; }
.co-row3 { display: grid; gap: 14px; }
@media (min-width: 600px) { .co-row3 { grid-template-columns: 1.4fr 1fr 1fr; } }
.co-choices, .co-methods { border: 1px solid var(--line); border-radius: 12px; padding: 0; margin: 0; overflow: hidden; min-width: 0; }
.co-choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; margin: 0; cursor: pointer; }
.co-choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent, #2f3136); }
.co-choice > span { display: grid; line-height: 1.35; }
.co-choices .co-choice + .co-choice, .co-method + .co-method { border-top: 1px solid var(--line); }
.co-method:has(input:checked) { background: var(--tint); }
.co-panel { display: none; padding: 0 16px 16px 48px; }
.co-method:has(input:checked) .co-panel { display: block; }
.co-panel .meta { margin: 0; }
.co-card { min-height: 56px; }
.co-form:has(#co-d-pickup:checked) .co-address { display: none; }
.co-form:has(#co-d-ship:checked) .co-m-pickup { display: none; }
.co-express { display: grid; gap: 10px; }
.co-express .co-h { margin: 0; font-size: 16px; text-align: center; color: var(--muted); }
.co-express-paypal { margin: 0; }
.co-paypal { background: #FFC439; border-color: #FFC439; color: #111; }
.co-paypal b { font-style: italic; color: #003087; }
.co-or { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.co-or::before, .co-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
/* Turnstile before Pay by card, once a card has been declined (Cards, K4). */
.co-human .ts-frame.is-shown { margin-bottom: 12px; }
.co-paybar { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg, #fff); border-top: 1px solid var(--line); }
.co-pay { min-height: 56px; font-size: 18px; }
.co-pay[aria-busy="true"] { opacity: .6; cursor: progress; }
.co-footer { border-top: 1px solid var(--line); padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
.co-policies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
@media (min-width: 900px) {
  .co { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; padding-top: 34px; }
  .co-main { grid-column: 1; grid-row: 1; padding-top: 0; }
  .co-sum { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: 24px; margin: 0; border: 1px solid var(--line); border-radius: 12px; }
  .co-sum-bar { pointer-events: none; }
  .co-sum-label::after, .co-sum[open] .co-sum-label::after { content: none; }
  .co-paybar { position: static; margin: 0; padding: 0; border: 0; background: none; }
}

/* the order's own page, a shopper's account, the stand-in processor */
.co-done, .co-account-page, .co-test-page { padding-block: 30px 40px; display: grid; gap: 16px; align-content: start; }
.co-done > *, .co-account-page > *, .co-test-page > * { margin: 0; }
.co-done-num { font-weight: 600; }
.co-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #1C1D21; color: #FFD27A; font-size: 13px; font-weight: 700; }
.co-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 10px; margin: 0; }
.co-facts div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.co-facts dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.co-facts dd { margin: 0; font-weight: 600; }
.co-howtopay, .co-account { display: grid; gap: 6px; font-weight: 400; }
.co-shipment { padding: 12px 14px; border-left: 4px solid var(--accent, #2f3136); background: var(--tint); border-radius: 6px; }
.co-addr { line-height: 1.5; }
.co-signin { display: grid; gap: 14px; max-width: 420px; }
.co-orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.co-order-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.co-order-link .meta { grid-column: 1; }
.co-order-link .co-amt { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.co-test-amount { font-size: 20px; }
.co-test-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Shipping and tax (phase 5). The region field and the postal code's label
   follow the country chosen - without script, through :has(). A browser
   without :has() shows the US layout, which still works everywhere. */
.co-region-text, .co-ca, .co-intl { display: none; }
.co-address:has(#co-country option[value="CA"]:checked) .co-us { display: none; }
.co-address:has(#co-country option[value="CA"]:checked) .co-ca { display: inline; }
.co-address:has(#co-country option:checked:not([value="US"])) label[for="co-postal"] .co-us { display: none; }
.co-address:has(#co-country option:checked:not([value="US"])) label[for="co-postal"] .co-intl { display: inline; }
.co-address:has(#co-country option:checked:not([value="US"])) label[for="co-postal"] .co-ca { display: none; }
.co-address:has(#co-country option:checked:not([value="US"]):not([value="CA"])) .co-region-list { display: none; }
.co-address:has(#co-country option:checked:not([value="US"]):not([value="CA"])) .co-region-text { display: block; }
.co-rates { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.co-h3 { font-size: 16px; margin: 4px 0 0; }
[data-co-rate-list] { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
[data-co-rate-list] > p { margin: 0; padding: 14px 16px; }
.co-rate + .co-rate { border-top: 1px solid var(--line); }
.co-rate:has(input:checked) { background: var(--tint); }
.co-rate .co-rate-what { flex: 1; min-width: 0; }
.co-rate-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.co-rates-btn { justify-self: start; }
.co-taxnote { margin: 8px 0 0; font-size: 13px; }
.co-exempt { margin: 0; }
.co-review { padding-block: 30px 40px; display: grid; gap: 16px; align-content: start; }
.co-review > *, .co-review-form > * { margin: 0; }
.co-review-form { display: grid; gap: 16px; }
.co-review .co-rates { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; gap: 0; }
.co-review .co-rates legend { padding: 14px 16px 0; }
/* The cart's estimate of shipping and tax (section 8: the total never jumps). */
.cart-estimate { margin-top: 14px; }
.cart-estimate summary { cursor: pointer; font-weight: 600; }
.cart-estimate form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 10px; }
.cart-estimate .field { margin: 0; }
.cart-estimate .field input { width: 8.5em; }
.cart-estimate-out { margin: 10px 0 0; display: grid; gap: 4px; }
.cart-estimate-out p { margin: 0; }
/* the built-in CAPTCHA's field no person can see (Captcha::builtinWidget) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Phase 9 (PLAN.md section 11): lead capture, the pop-up, a share link's
   bar, back in stock, gift cards; at checkout the code field. */
.signup { margin-top: 16px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: center; }
.signup-row .field { flex: 1 1 14rem; margin: 0; text-align: left; }
.signup-consent { margin: 8px 0 0; }
.form-status.is-error { color: var(--c-sale, #b3261e); }
.footer-signup { padding-top: 32px; padding-bottom: 24px; max-width: 40rem; }
.footer-signup .signup-row { justify-content: flex-start; }
.newsletter p { margin: 0 auto; max-width: 36rem; }
.popup { width: min(92vw, 30rem); padding: 28px 24px 20px; border: 0; border-radius: var(--radius-card, 8px); color: var(--fg, #1c1d21); background: var(--bg, #fff); }
.popup::backdrop { background: rgba(0, 0, 0, .45); }
.popup-close { position: absolute; top: 6px; right: 6px; margin: 0; }
.popup-close .iconbtn { width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; }
.promo-bar { margin: 0; padding: 10px 16px; text-align: center; font-weight: 600; background: var(--accent, #2f3136); color: var(--accent-fg, #fff); }
.stock-request { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card, 8px); }
.stock-request .signup-row { justify-content: flex-start; margin-top: 8px; }
.stock-request[hidden] { display: none; }
.giftcard-fields { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card, 8px); }
.giftcard-fields legend { font-weight: 700; padding: 0 4px; }
/* Phase 18d: a product's custom fields, above Add to cart. */
.custom-fields { margin: 14px 0; display: grid; gap: 12px; }
.custom-fields .field { margin: 0; }
.cf-info { margin: 0; color: var(--muted); }
.cf-hint { margin: 2px 0 6px; }
.cf-amount { display: flex; align-items: center; gap: 6px; max-width: 12rem; }
.cf-error { margin: 4px 0 0; color: var(--c-sale, #b3261e); font-size: 14px; font-weight: 600; }
.cf-error[hidden] { display: none; }
.line-fields { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.line-fields li, .line-fields .line-field { display: block; overflow-wrap: anywhere; }
span.line-fields { display: block; }
.line-field-label { font-weight: 600; }
.contact-form { margin-top: 12px; max-width: 34rem; }
.contact-section .contact-form { margin-left: auto; margin-right: auto; }
.giftcard-page form { max-width: 26rem; margin: 18px 0; }
.co-code { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.co-code-row { display: flex; gap: 8px; align-items: flex-end; }
.co-code-row .co-field { flex: 1; margin: 0; }
.co-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.co-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint); font-weight: 700; font-size: 14px; }
.co-linkbtn { border: 0; background: none; padding: 4px; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* Phase 10: "Report this store" (PLAN.md section 17) - the platform's line
   under every live store's footer, which no theme can take away. Small and
   quiet, in the store's own colors. */
.platform-note { margin: 0 auto; padding: 8px 16px 16px; font-size: 13px; text-align: center; }
.platform-note a { color: inherit; opacity: .75; }

/* The cookie banner (phase 10): shown by store.js only for a store with a
   pixel switched on, until the shopper chooses. Nothing loads before then. */
.consent { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; max-width: 36rem; margin: 0 auto;
  background: var(--bg, #fff); color: var(--fg, #1c1d21); border: 1px solid var(--line, rgba(0, 0, 0, .15)); border-radius: var(--radius-card, 10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); padding: 14px 16px; display: grid; gap: 10px; font-size: 15px; }
.consent p { margin: 0; }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent-actions button { min-height: 44px; padding: 0 16px; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; }
.consent-actions button.consent-yes { background: var(--accent, #1c1d21); color: var(--accent-fg, #fff); border-color: var(--accent, #1c1d21); }

/* "Cookie choices" beside "Report this store": a button that reads as a link. */
.link-button-plain { border: 0; padding: 0; background: none; font: inherit; color: inherit; opacity: .75; text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------- layouts (phase 14b) */
/* The theme's layout choices arrive as classes on <body> (Theme::bodyClasses).
   With none of them, every page is laid out as before. Each rule starts with
   its body class, so it outweighs the base and theme rules it changes. */

/* The sort and count, kept together at the toolbar's end. */
.toolbar-end { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }

/* Header: logo above, the menu centered below it (wide screens). */
@media (min-width: 990px) {
  .arr-stacked .header-row { display: grid; grid-template-columns: 1fr auto 1fr; row-gap: 0; padding-top: 10px; }
  .arr-stacked .logo { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .arr-stacked .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }
  .arr-stacked .header-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding-bottom: 6px; }
  .arr-stacked .header-nav > ul { justify-content: center; }
}

/* Header laid over the home page's first slideshow. Its own row only: the
   dropdowns and the phone's drawer keep their colors. It is never kept in
   view while scrolling - a see-through bar over the page would hide it. */
.hdr-over .sec-header, .hdr-over .sec-header:has(.is-sticky) { position: absolute; top: auto; left: 0; right: 0; z-index: 20; background: transparent; }
.hdr-over .site-header { background: transparent; border-bottom-color: transparent; }
.hdr-over .header-row > .logo, .hdr-over .header-row > .header-icons, .hdr-over .header-row > .drawer > summary,
.hdr-over .header-nav > ul > li > a, .hdr-over .header-nav > ul > li > .sub > summary { color: #fff; }
.hdr-over .header-nav > ul > li > a:hover, .hdr-over .header-nav > ul > li > .sub > summary:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hdr-over .logo-text { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hdr-over main > .sec:first-child .slide-text { padding-top: 104px; }
@media (min-width: 990px) { .hdr-over.hdr-stacked main > .sec:first-child .slide-text, .hdr-over:has(.rows-2) main > .sec:first-child .slide-text { padding-top: 150px; } }

/* Product cards under the pointer. */
.card-pic-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.hover-second .card:hover .card-pic-alt, .hover-second .card:focus-visible .card-pic-alt { opacity: 1; }
.hover-second .card:hover .card-pic img, .hover-none .card:hover .card-pic img { transform: none; }
@media (hover: none) { .card-pic-alt { display: none; } }
@media (prefers-reduced-motion: reduce) { .card-pic-alt { transition: none; } }

/* Product pictures: thumbnails beside the large one (wide screens). */
@media (min-width: 990px) {
  .gal-left .product-media { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; }
  .gal-left .product-media .gallery-main { grid-column: 2; grid-row: 1; }
  .gal-left .product-media .thumbs { grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; max-height: 70vh; overflow: auto; }
}
/* Every picture large, one under another; a row to swipe on a phone. */
.gallery-stack { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.gallery-stack li { flex: 0 0 86%; scroll-snap-align: start; }
.gallery-stack img { width: 100%; border-radius: var(--radius-card, 8px); background: var(--tint); }
@media (min-width: 990px) {
  .gal-stacked .product-media { position: static; }
  .gallery-stack { display: grid; gap: 14px; margin-top: 14px; overflow: visible; }
  .gal-stacked .product-info { position: sticky; top: 90px; }
}

/* The description folded under "Description". */
.product-more { margin-top: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.product-more > summary::-webkit-details-marker { display: none; }
.product-more > summary .icon { width: 18px; height: 18px; transition: transform .2s ease; }
.product-more[open] > summary .icon { transform: rotate(180deg); }
.product-more .product-description { margin: 0 0 18px; }

/* The buy bar, on a phone, once the page's own button is out of sight (store.js). */
.buy-bar-box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: var(--bg, #fff); color: var(--fg, #1c1d21); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .35); }
.buy-bar-row { display: flex; align-items: center; gap: 12px; }
.buy-bar-text { display: grid; min-width: 0; flex: 1; }
.buy-bar-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar-price { font-size: 14px; }
.buy-bar-row .button { min-height: 44px; padding: 10px 18px; }
/* Room under the page while the bar shows, so it covers nothing at the end. */
@media (max-width: 989px) { body:has(.buy-bar-box:not([hidden])) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } }
@media (min-width: 990px) { .buy-bar-box { display: none; } }

/* Collection filters in a column beside the products (wide screens). */
@media (min-width: 990px) {
  .filt-side .collection-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .filt-side .collection-body > * { grid-column: 2; }
  .filt-side .toolbar { display: contents; }
  .filt-side .toolbar > .filters { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 90px; }
  .filt-side .toolbar > .toolbar-end { grid-column: 2; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .filt-side .filters > summary { display: none; }
  .filt-side .filters-body { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border: 0; }
}

/* ---------------------------------------- more layouts (phase 14d) */

/* Six across: three on a tablet, four on a small desk, six on a wide one. */
@media (min-width: 750px) { .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 990px) { .grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* A card's quick add: its own form under the card's link (Ui::quickAdd). */
.card-add-form { margin: 0; }
.card-add { width: 100%; min-height: 40px; margin-top: 10px; padding: 8px 12px; font-size: 14px; }
.card-add.is-added { border-color: var(--fg, #1c1d21); }

/* Header: the logo in the middle, the menu either side of it (wide screens). */
@media (min-width: 990px) {
  .arr-split .header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 20px; }
  .arr-split .header-nav.nav-split { display: contents; }
  .arr-split .nav-split > ul:first-child { grid-column: 1; grid-row: 1; justify-content: flex-end; }
  .arr-split .logo { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .arr-split .nav-split > ul:last-child { grid-column: 3; grid-row: 1; justify-content: flex-start; }
  .arr-split .header-icons { grid-column: 4; grid-row: 1; justify-self: end; }
}

/* Collection pages as a list: the picture beside the words. */
.coll-list .sec-main-collection .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.coll-list .sec-main-collection .grid > li { padding: 16px 0; border-bottom: 1px solid var(--line); }
/* The words together, centered beside the picture: room above and below
   them takes the picture's extra height, not the space between them. */
.coll-list .sec-main-collection .card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: 18px; text-align: left; }
.coll-list .sec-main-collection .card-pic { grid-column: 1; grid-row: 1 / -1; }
.coll-list .sec-main-collection .card > :not(.card-pic) { grid-column: 2; }
.coll-list .sec-main-collection .card-vendor { grid-row: 2; }
.coll-list .sec-main-collection .card-title { grid-row: 3; }
.coll-list .sec-main-collection .card-price { grid-row: 4; }
.coll-list .sec-main-collection .card-vendor, .coll-list .sec-main-collection .card-title { margin-top: 0; }
.coll-list .sec-main-collection .card-add { width: auto; margin-left: 130px; }
@media (min-width: 750px) {
  .coll-list .sec-main-collection .card { grid-template-columns: 180px minmax(0, 1fr); column-gap: 28px; }
  .coll-list .sec-main-collection .card-title { font-size: 18px; }
  .coll-list .sec-main-collection .card-add { margin-left: 208px; }
}

/* Collection filters in a panel that slides in from the side, on a dimmed page. */
.filt-drawer .filters[open]::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(17, 18, 20, .45); }
.filt-drawer .filters[open] > .filters-body {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 41; width: min(380px, 88vw); margin: 0; padding: 18px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; overflow-y: auto;
  border: 0; border-radius: 0; background: var(--bg, #fff); color: var(--fg, #1c1d21); box-shadow: 0 0 40px rgba(0, 0, 0, .25);
}
.filters-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .filt-drawer .filters[open] > .filters-body { animation: filters-in .2s ease-out; }
  @keyframes filters-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* --------------------------------------------- color swatches (phase 14f) */
/* store.js draws an option as dots when the theme says so (body.swatches-on)
   and every value has a color (Swatches); the dot is its color, set through
   CSSOM, and the legend names the one chosen. */
.swatches-color { gap: 6px; }
.swatch-color .swatch-dot {
  width: 36px; height: 36px; min-height: 0; padding: 0; margin: 4px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg, #1c1d21) 22%, transparent);
}
.swatch-color input:checked + .swatch-dot { border-color: transparent; box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--fg, #1c1d21); }
.swatch-color.is-out .swatch-dot {
  opacity: .5;
  background-image: linear-gradient(to top left, transparent calc(50% - 1px), var(--fg, #1c1d21) 50%, transparent calc(50% + 1px));
}
.swatch-color .vh { padding: 0; border: 0; min-height: 0; }
.picker-chosen { font-weight: 400; }

/* ---------------------------------- picture swatches, card swatches (14g) */
/* An option with no colors but its own picture for each value. */
.swatches-pic { gap: 8px; }
.swatch-pic { position: relative; cursor: pointer; }
.swatch-pic img {
  display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-card, 6px);
  border: 1px solid var(--line); background: var(--line);
}
.swatch-pic input:checked + img { border-color: transparent; box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--fg, #1c1d21); }
.swatch-pic input:focus-visible + img { outline: 3px solid var(--accent, #2f3136); outline-offset: 4px; }
.swatch-pic.is-out img {
  opacity: .5;
  background-image: linear-gradient(to top left, transparent calc(50% - 1px), var(--fg, #1c1d21) 50%, transparent calc(50% + 1px));
}
.swatch-pic .vh { padding: 0; border: 0; min-height: 0; }

/* A card's colors (Ui::cardSwatches): links of their own under its link. */
.card-swatches {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--card-align, left); gap: 2px;
  margin: 6px -6px 0; padding: 0; list-style: none;
}
.card-swatches a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%;
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.card-swatches svg { display: block; width: 20px; height: 20px; }
.card-swatches circle { stroke: color-mix(in srgb, var(--fg, #1c1d21) 22%, transparent); stroke-width: 1; }
.card-swatches a:hover svg, .card-swatches a:focus-visible svg { outline: 1.5px solid var(--fg, #1c1d21); outline-offset: 2px; border-radius: 50%; }
.card-swatches-more { padding: 0 4px; }
.coll-list .sec-main-collection .card-swatches { margin-left: 124px; }
@media (min-width: 750px) { .coll-list .sec-main-collection .card-swatches { margin-left: 202px; } }

/* ------------------------------------------------- phase 15a: the header
   Its arrangements and choices are classes on the <header> (Theme::
   headerClasses). The view writes the parts in the order they are read on a
   wide screen; these rules only place them. A phone always shows the menu
   button, the logo and the buttons in one row. */

/* The thin bar above: the store's phone and email, its social links. */
.header-top { border-bottom: 1px solid var(--line); font-size: 13px; }
.header-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; min-height: 36px; }
.header-contact, .header-social { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.header-contact li { display: inline-flex; align-items: center; gap: 6px; }
.header-contact .icon { width: 15px; height: 15px; }
.header-contact a, .header-social a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; }
.header-contact a:hover, .header-social a:hover { text-decoration: underline; }
@media (max-width: 749px) { .header-top .header-social, .header-top .contact-email { display: none; } }

/* The social links, the search box and an empty place in the header's own row: wide screens only. */
.header-social-zone, .header-zone-empty, .header-find { display: none; }
.header-social-zone { font-size: 14px; font-weight: 600; }

/* The search box: a plain form to /search; its button inside it. */
.header-find { position: relative; align-items: center; }
.header-find input {
  width: 100%; min-height: 42px; padding: 8px 46px 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-btn, 8px);
  background: var(--bg, #fff); color: var(--fg, #1c1d21); font: inherit; font-size: 15px;
}
.header-find .icon-button { position: absolute; right: 1px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); }

/* The buttons' words (phones show the icons alone). */
.btn-word { display: none; }
@media (min-width: 750px) {
  .btns-words .header-icons > .icon-button, .btns-both .header-icons > .icon-button,
  .btns-words .drawer > summary, .btns-both .drawer > summary { width: auto; gap: 6px; padding: 0 10px; border-radius: 8px; }
  .btns-words .btn-word, .btns-both .btn-word { display: inline; font-size: 15px; font-weight: 600; }
  .btns-words .header-icons > .icon-button, .btns-both .header-icons > .icon-button { text-decoration: none; }
  .btns-words .header-icons > .icon-button > .icon, .btns-words .drawer > summary > .icon { display: none; }
  .btns-words .cart-count, .btns-both .cart-count { position: static; margin-left: 2px; }
}

/* The logo in the middle on a phone. */
@media (max-width: 989px) {
  .logo-phone-center .header-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .logo-phone-center .drawer { grid-column: 1; grid-row: 1; justify-self: start; }
  .logo-phone-center .logo { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .logo-phone-center .logo-img { object-position: center; }
  .logo-phone-center .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* As wide as the window. */
.hdr-full .wrap { max-width: none; }
@media (min-width: 990px) { .hdr-full .wrap { padding-inline: 32px; } }

/* Kept in view only when scrolling back up (store.js adds hdr-away to its section). */
.sec-header:has(.sticky-up) { transition: transform .25s ease; }
.sec-header.hdr-away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .sec-header:has(.sticky-up) { transition: none; } }

/* Over the home page's slideshow, the new parts in white too. */
.hdr-over .header-top, .hdr-over .header-row > .header-social { color: #fff; }
.hdr-over .header-top { border-bottom-color: rgba(255, 255, 255, .25); }

@media (min-width: 990px) {
  .header-social-zone, .header-zone-empty, .header-find { display: flex; }
  .header-icons .header-find { width: 220px; margin-right: 6px; }
  .find-phone { display: none; }

  /* 1, one row: the menu beside the logo, or centered on the page (beside the buttons, as before, by default). */
  .arr-standard.menu-left .logo { margin-right: 12px; }
  .arr-standard.menu-left .header-nav { flex: 1 1 auto; }
  .arr-standard.menu-center .header-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .arr-standard.menu-center .logo { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; }
  .arr-standard.menu-center .header-nav { grid-column: 2; grid-row: 1; }
  .arr-standard.menu-center .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }

  /* 2 and 7, the menu in a row below: logo and buttons above it, and between them in 7 a wide search box. */
  .arr-below .header-row, .arr-search .header-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; row-gap: 0; padding-top: 6px; }
  .arr-below .logo, .arr-search .logo { grid-column: 1; grid-row: 1; margin: 0; }
  .arr-search .header-find { grid-column: 2; grid-row: 1; width: 100%; max-width: 620px; justify-self: center; }
  .arr-below .header-icons, .arr-search .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }
  .arr-below .header-nav, .arr-search .header-nav { grid-column: 1 / -1; grid-row: 2; padding-bottom: 6px; }
  .arr-below .header-nav > ul, .arr-search .header-nav > ul { justify-content: flex-end; }
  .arr-below.menu-left .header-nav > ul, .arr-search.menu-left .header-nav > ul { justify-content: flex-start; margin-left: -12px; }
  .arr-below.menu-center .header-nav > ul, .arr-search.menu-center .header-nav > ul { justify-content: center; }

  /* 6, social links (or the search box) on the left, the logo in the middle, the menu centered below. */
  .arr-social .header-row { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 20px; row-gap: 0; padding-top: 10px; }
  .arr-social .header-social-zone, .arr-social .header-find, .arr-social .header-zone-empty { grid-column: 1; grid-row: 1; justify-self: start; }
  .arr-social .header-find { width: min(100%, 260px); }
  .arr-social .logo { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .arr-social .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }
  .arr-social .header-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; padding-bottom: 6px; }
  .arr-social .header-nav > ul { justify-content: center; }

  /* 8 to 10, the menu only behind the Menu button, on a wide screen too: its panel lines up with the page. */
  .arr-button-right .drawer, .arr-button-center .drawer, .arr-button-left .drawer { display: block; }
  .arr-button-center .header-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .arr-button-center .drawer { grid-column: 1; grid-row: 1; justify-self: start; }
  .arr-button-center .logo { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
  .arr-button-center .header-icons { grid-column: 3; grid-row: 1; justify-self: end; }
  .arr-button-right .drawer-nav, .arr-button-center .drawer-nav, .arr-button-left .drawer-nav {
    padding-inline: max(32px, calc((100% - var(--page-w, 1240px)) / 2 + 32px));
  }
  .hdr-full.arr-button-right .drawer-nav, .hdr-full.arr-button-center .drawer-nav, .hdr-full.arr-button-left .drawer-nav { padding-inline: 32px; }
}

/* ----------------------------------------------- phase 15b: the menu's look
   Its type, spacing and corners are custom properties (Theme::tokensCss,
   used by the .header-nav rule above); the rest are the header's classes.
   Each theme's own rules for these moved into its defaults, so a merchant
   can change them. Over the home page's slideshow the hover stays white. */

/* No line under the header (each theme draws its own: a rule, a double rule, a shadow). */
.site-header.no-line { border-bottom-color: transparent; box-shadow: none; }

/* A link under the pointer: a soft background (as before), underlined, in the buttons' color, or on it. */
.hover-line .header-nav a:hover, .hover-line .header-nav summary:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
.hover-accent .header-nav a:hover, .hover-accent .header-nav summary:hover { background: none; color: var(--accent, #2f3136); }
.hover-fill .header-nav a:hover, .hover-fill .header-nav summary:hover { background: var(--accent, #2f3136); color: var(--accent-fg, #fff); }

/* The page you're on: underlined (as before), a thin or thick line, or in the buttons' color. */
.cur-thin .header-nav a[aria-current="page"], .cur-thin .header-nav summary[aria-current="true"] { text-decoration-thickness: 1px; }
.cur-thick .header-nav a[aria-current="page"], .cur-thick .header-nav summary[aria-current="true"] { text-decoration-thickness: 3px; text-underline-offset: 6px; }
.cur-accent .header-nav a[aria-current="page"], .cur-accent .header-nav summary[aria-current="true"] { text-decoration: none; color: var(--accent, #2f3136); }

/* Dropdowns: a border and a shadow (as before), the border alone, or the shadow alone. */
.dd-line .sub > ul { box-shadow: none; }
.dd-soft .sub > ul { border-color: transparent; box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .28); }

/* A dropdown opening: at once (as before), fading in, or sliding down a little. */
@keyframes menu-fade { from { opacity: 0; } }
@keyframes menu-slide { from { opacity: 0; transform: translateY(-6px); } }
.open-fade .sub[open] > ul { animation: menu-fade .16s ease-out; }
.open-slide .sub[open] > ul { animation: menu-slide .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .open-fade .sub[open] > ul, .open-slide .sub[open] > ul { animation: none; } }

/* ----------------------------------------------- phase 15c: the menu's working
   A wide panel (MegaMenu): its links in columns, its pictures or products
   beside them - as wide as the page (by default), the window, or its
   columns. Under the header, not under its link, except "as wide as its
   columns". A categories button at the start of a menu row. Opening under
   the pointer is store.js's. */
.has-mega { position: static; }
.mega-panel {
  position: absolute; top: 100%; left: 16px; right: 16px; z-index: 30; max-width: calc(var(--page-w, 1240px) - 32px); margin-inline: auto;
  max-height: calc(100dvh - var(--header-h, 64px) - 24px); overflow-y: auto;
  background: var(--bg, #fff); color: var(--fg, #1c1d21); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .25);
}
.mega-in { display: flex; gap: 32px; padding: 20px 24px 24px; }
.mega-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 32px; flex: 1 1 auto; align-content: flex-start; }
.mega-cols ul { display: grid; align-content: start; gap: 0; margin: 0; padding: 0; list-style: none; }
.mega-col { min-width: 160px; max-width: 260px; }
.header-nav .mega-col a { display: flex; width: 100%; min-height: 40px; padding-inline: 8px; font-size: max(14px, calc(var(--menu-size, 16px) - 1px)); }
.header-nav .mega-head { margin: 0 0 4px; }
.header-nav .mega-head a, .header-nav .mega-head .menu-label { min-height: 40px; padding-inline: 8px; font-weight: 700; color: inherit; }
/* Two classes, to outrank the menu's own .header-nav ul (a wrapping row). */
.header-nav .mega-side { display: grid; grid-template-columns: repeat(var(--mega-n, 2), minmax(0, 180px)); gap: 16px; margin: 0; padding: 0; list-style: none; flex: 0 1 auto; }
.mega-side:has(> li:nth-child(3)) { --mega-n: 3; }
.mega-side:has(> li:nth-child(4)) { --mega-n: 4; }
.mega-side:has(> li:only-child) { --mega-n: 1; }
/* A picture or a product is not a menu link: none of the links' padding, type or hover (15b's, two classes deep). */
.site-header .header-nav .mega-side a {
  display: grid; gap: 8px; min-height: 0; padding: 0; border-radius: 0; font-family: inherit; font-size: 14px; font-weight: 400;
  text-transform: none; letter-spacing: normal; text-decoration: none;
}
.site-header .header-nav .mega-side a:hover { background: none; color: inherit; text-decoration: none; }
.mega-tile { display: grid; gap: 8px; }
.mega-pic { display: block; overflow: hidden; border-radius: var(--radius-card, 8px); background: var(--tint); aspect-ratio: 4 / 5; }
.mega-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mega-tile:hover .mega-pic img { transform: scale(1.03); }
.mega-pic-none { display: none; }
.mega-pic-h { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 16px; line-height: 1.3; }
.mega-pic-b { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.site-header .header-nav .mega-products .card { display: block; }
.mega-products .card:hover .card-title { text-decoration: underline; }
.mega-products .card-title { margin-top: 8px; font-size: 14px; }
.mega-products .badge { display: none; }
@media (prefers-reduced-motion: reduce) { .mega-pic img { transition: none; } }
/* Pictures or products on the left. */
.mega-left .mega-in { flex-direction: row-reverse; }
/* The whole window: edge to edge, its contents at the page's width. */
.mega-full .mega-panel { left: 0; right: 0; max-width: none; border-width: 1px 0; border-radius: 0; }
.mega-full .mega-in { max-width: var(--page-w, 1240px); margin-inline: auto; padding-inline: 32px; }
.hdr-full.mega-full .mega-in { max-width: none; }
/* As wide as its columns: under its link, as a dropdown is (store.js turns it left near the edge). */
.mega-fit .has-mega { position: relative; }
.mega-fit .mega-panel { left: 0; right: auto; width: max-content; max-width: min(1100px, calc(100vw - 32px)); margin: 0; }
.mega-fit .mega-panel.sub-end { left: auto; right: 0; }
/* The menu's look (15b) for the panels too. */
.dd-line .mega-panel { box-shadow: none; }
.dd-soft .mega-panel { border-color: transparent; box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .28); }
.open-fade .sub[open] > .mega-panel { animation: menu-fade .16s ease-out; }
.open-slide .sub[open] > .mega-panel { animation: menu-slide .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .open-fade .sub[open] > .mega-panel, .open-slide .sub[open] > .mega-panel { animation: none; } }

/* A categories button at the start of the menu row, in the buttons' colors. */
.header-nav .cats > summary.cats-button, .hdr-over .header-nav .cats > summary.cats-button {
  gap: 8px; margin-right: 10px; background: var(--accent, #2f3136); color: var(--accent-fg, #fff); text-decoration: none;
}
.header-nav .cats > summary.cats-button:hover { background: var(--accent, #2f3136); color: var(--accent-fg, #fff); opacity: .9; text-decoration: none; }
.header-nav .cats-button .icon-menu { width: 20px; height: 20px; }
.arr-below .header-nav > ul:has(> .has-cats), .arr-search .header-nav > ul:has(> .has-cats) { justify-content: flex-start; margin-left: 0; }

/* ------------------------------------------------- phase 15d: the phone's menu
   The Menu button's panel - a phone's, and a desk's with the Menu-button
   headers: under the header (as before), sliding in from the side over the
   page dimmed, or filling the screen under the header; its levels opening
   under each other (as before) or one at a time with Back; a foot with
   Account, the phone, the email and the social links. Still <details>, so
   no script is needed: the dimmed page is the Menu button's own summary, a
   tap on it closes the menu, and an open level's summary is its Back row.
   store.js only measures where the header ends (--drawer-top). */
.drawer-side .drawer-nav, .drawer-full .drawer-nav { height: calc(100dvh - var(--drawer-top, 80px)); max-height: none; overscroll-behavior: contain; }
.site-header.drawer-side .drawer-nav {
  --drawer-pad: 20px; left: 0; right: auto; width: min(400px, 88vw); padding-inline: 20px;
  border-right: 1px solid var(--line); box-shadow: 18px 0 40px -24px rgba(0, 0, 0, .35);
}
.site-header.drawer-side.drawer-right .drawer-nav { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--line); box-shadow: -18px 0 40px -24px rgba(0, 0, 0, .35); }
/* The page under it dimmed - under the header's own background, so the header stays as it is. */
.drawer-side .drawer[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(17, 18, 20, .45); cursor: default; }
body:not(.hdr-over) .sec-header:not(:has(.is-sticky)):has(.drawer-side .drawer[open]) { position: relative; z-index: 20; }
html:has(.drawer-side .drawer[open]), html:has(.drawer-full .drawer[open]) { overflow: hidden; }
@keyframes drawer-in-left { from { transform: translateX(-100%); } }
@keyframes drawer-in-right { from { transform: translateX(100%); } }
.drawer-side .drawer[open] > .drawer-nav { animation: drawer-in-left .22s ease-out; }
.drawer-side.drawer-right .drawer[open] > .drawer-nav { animation-name: drawer-in-right; }
@media (prefers-reduced-motion: reduce) { .drawer-side .drawer[open] > .drawer-nav { animation: none; } }
/* Filling the screen: larger words. */
.site-header.drawer-full .drawer-nav { padding-top: 16px; }
.drawer-full .drawer-nav > ul > li > a, .drawer-full .drawer-nav > ul > li > .drawer-sub > summary { min-height: 60px; font-size: 22px; }

/* One level at a time: an open level covers the menu, its summary the Back row at the top. */
.drawer-steps .drawer-nav { min-height: min(440px, calc(100dvh - var(--drawer-top, 80px))); }
.drawer-steps .drawer-nav ul ul a, .drawer-steps .drawer-sub .drawer-sub > summary { padding-left: 0; }
.drawer-steps .drawer-sub > summary .icon-prev { display: none; }
.drawer-steps .drawer-sub > summary .icon-down { transform: rotate(-90deg); }
.drawer-steps .drawer-sub[open] > summary {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; justify-content: flex-start; gap: 8px;
  padding: 0 var(--drawer-pad, 16px); background: var(--bg, #fff); font-size: 16px;
}
.drawer-steps .drawer-sub[open] > summary .icon-prev { display: block; transform: none; }
.drawer-steps .drawer-sub[open] > summary .icon-down { display: none; }
.drawer-steps .drawer-sub[open] > ul {
  position: absolute; top: 52px; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 var(--drawer-pad, 16px) 20px; background: var(--bg, #fff); overflow-y: auto;
}
/* A level open in an open level: only the innermost shows, its Back row at the top. */
.drawer-steps .drawer-sub[open]:has(.drawer-sub[open]) > summary { visibility: hidden; }
.drawer-steps .drawer-sub[open]:has(.drawer-sub[open]) > ul { top: 0; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .drawer-steps .drawer-sub[open] > ul { animation: drawer-in-right .18s ease-out; }
}

/* The foot: Account, the phone and email, the social links. */
.drawer-foot { display: grid; gap: 12px; margin-top: 20px; }
.drawer-nav .drawer-contact a { gap: 10px; min-height: 44px; font-size: 16px; font-weight: 400; border-bottom: 0; overflow-wrap: anywhere; }
.drawer-contact .icon { width: 20px; height: 20px; opacity: .8; }
.drawer-nav .drawer-social { display: flex; flex-wrap: wrap; gap: 0 18px; }
.drawer-nav .drawer-social a { min-height: 44px; font-size: 15px; font-weight: 600; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }

/* Phase 15g: a link's badge - a small pill after its name, in the accent, the
   sale color or dark. An inline-block, so the current page's underline stays
   under the name. In a row that spreads its parts apart (a fly-out's or the
   drawer's summary) it keeps beside the name, the arrow still at the end. */
.menu-badge {
  display: inline-block; flex: none; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; line-height: 18px;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-decoration: none;
}
.menu-badge-accent { background: var(--accent, #2f3136); color: var(--accent-fg, #fff); }
.menu-badge-sale   { background: var(--c-sale, #b3261e); color: var(--c-sale-fg, #fff); }
.menu-badge-dark   { background: var(--fg, #1c1d21); color: var(--bg, #fff); }
.fly > summary .menu-badge, .drawer-sub > summary .menu-badge { margin-inline-end: auto; }
/* On a link filled with the accent under the pointer, an accent badge keeps its edge. */
.hover-fill .header-nav a:hover .menu-badge-accent, .hover-fill .header-nav summary:hover .menu-badge-accent { box-shadow: 0 0 0 1px var(--accent-fg, #fff); }

/* Phase 16b: search suggestions - a panel under the search box as the shopper
   types (store.js), over the page, never pushing it down. Lined up with the
   box, at least 360px wide where there is room, or with its end near the
   window's edge (.suggest-end). The theme's own colors, line and corners. */
.has-suggest { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: max(100%, min(400px, calc(100vw - 32px))); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px 0; background: var(--bg, #fff); color: var(--fg, #1c1d21);
  border: 1px solid var(--line); border-radius: var(--radius-card, 8px); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .3);
  text-align: start;
}
.suggest[hidden] { display: none; }
.suggest.suggest-end { left: auto; right: 0; }

/* Phase 16c: the bar a phone's search button opens under the header - its
   own box, the whole width, with the suggestions under it. Solid even over
   a slideshow; never on a wide window, where the button is the search page. */
.find-bar { border-top: 1px solid var(--line); background: var(--bg, #fff); color: var(--fg, #1c1d21); }
.find-bar[hidden] { display: none; }
.find-bar-in { display: flex; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.find-bar .header-find { display: flex; flex: 1; min-width: 0; }
.find-bar .suggest { left: 0; width: 100%; max-height: min(65vh, 520px); }
@media (min-width: 990px) { .find-bar { display: none; } }
.suggest-group + .suggest-group, .suggest-group + .suggest-all, .suggest-none + .suggest-all { border-top: 1px solid var(--line); }
.suggest-head { margin: 0; padding: 10px 14px 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.suggest-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px;
  color: inherit; text-decoration: none; font-size: 15px; line-height: 1.3;
}
.suggest-row:hover, .suggest-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent, #2f3136) 10%, transparent); }
.suggest-row[aria-selected="true"] { outline: 2px solid var(--accent, #2f3136); outline-offset: -2px; }
.suggest-pic { flex: none; width: 48px; height: 48px; border-radius: calc(var(--radius-card, 8px) / 2); overflow: hidden; background: var(--line); }
.suggest-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.suggest-text { display: flex; flex-direction: column; min-width: 0; }
.suggest-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.suggest-price { color: var(--muted); font-size: 14px; }
.suggest-price.price-sale { color: var(--c-sale, #b3261e); }
.suggest-price .price-was { color: var(--muted); }
.suggest-sold { color: var(--muted); }
.suggest-none { margin: 0; padding: 12px 14px; color: var(--muted); }
.suggest-all { font-weight: 600; }

/* Phase 17a (LEGACY-LOOKS-PLAN.md): the canvas.
   The page FRAMED: on a wide screen the header, the page and the footer sit
   centered at the page's width (.page-frame, layout_store.php) on the color
   around it, or the store's picture (Theme::canvasCss, after this file).
   Narrower, the frame is the whole window, as every page is. */
@media (min-width: 1000px) {
  .layer-store.page-framed { background-color: var(--c-outside, #e7e4dd); }
  .page-framed .page-frame {
    max-width: var(--page-w, 1240px); min-height: 100vh; margin-inline: auto;
    background: var(--bg, #fff); box-shadow: 0 0 0 1px rgba(17, 18, 20, .06), 0 10px 40px rgba(17, 18, 20, .18);
  }
  /* The header as wide as the window means as wide as the frame. */
  .page-framed .hdr-full .wrap { padding-inline: 32px; }
}

/* The BANNER header: a slim row (the contact details on a wide screen, the
   buttons), the banner across the page in place of the logo, the menu below.
   It never stays in view: a banner would fill the screen. */
.sec-header:has(.arr-banner.is-sticky) { position: static; }
.arr-banner .header-row { min-height: 48px; }
.arr-banner .header-row > .logo { display: none; }
.arr-banner .header-icons { margin-left: auto; }
.arr-banner .header-reach { display: none; }
.banner-row { max-width: var(--page-w, 1240px); margin-inline: auto; }
.header-banner { display: block; }
.header-banner .banner-img { width: 100%; height: auto; }
.nav-row { display: none; }
/* On a phone, the logo in the row instead (banner_phone). */
@media (max-width: 989px) {
  .banner-phone-logo .header-row > .logo { display: inline-flex; }
  .banner-phone-logo .banner-row { display: none; }
}
@media (min-width: 990px) {
  .arr-banner .header-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-right: auto; font-size: 13px; }
  .arr-banner .header-icons { margin-left: 0; }
  .nav-row { display: block; padding-block: 8px; }
  .nav-row .header-nav > ul { justify-content: center; }
  .arr-banner.menu-left .nav-row .header-nav > ul { justify-content: flex-start; }
}

/* The menu's top links as BUTTONS, in centered rows, like store30's button
   bars: the menu buttons' colors and the menu's corners (Theme settings). */
@media (min-width: 990px) {
  .menu-buttons .header-nav > ul { gap: 6px; }
  .menu-buttons .header-nav > ul > li > a, .menu-buttons .header-nav > ul > li > .sub > summary {
    background: var(--menu-btn, #2f3136); color: var(--menu-btn-fg, #fff); border-radius: var(--menu-radius, 8px);
  }
  .menu-buttons .header-nav > ul > li > a:hover, .menu-buttons .header-nav > ul > li > .sub > summary:hover,
  .menu-buttons .header-nav > ul > li > .sub[open] > summary {
    background: color-mix(in srgb, var(--menu-btn, #2f3136) 82%, #000); color: var(--menu-btn-fg, #fff);
  }
  .menu-buttons .header-nav > ul > li > a[aria-current="page"], .menu-buttons .header-nav > ul > li > .sub > summary[aria-current="true"] {
    text-decoration: underline; text-decoration-thickness: 2px; color: var(--menu-btn-fg, #fff);
  }
}

/* Phase 17e (LEFT-MENU-COLUMN-PLAN.md): the side column.
   On a wide screen, the Side column's sections and the page side by side
   (.with-side, layout_store.php) at the page's width - the page's own
   sections fill their column, losing their own width. Narrower, the column
   isn't shown and the page is as it always was; its menu is in the Menu
   panel (.drawer-more). Not sticky: a long menu scrolls with the page. */
.side-col { display: none; }
@media (min-width: 990px) {
  .with-side {
    display: grid; grid-template-columns: var(--side-w, 240px) minmax(0, 1fr); gap: 32px; align-items: start;
    width: 100%; max-width: var(--page-w, 1240px); margin-inline: auto; padding-inline: 32px;
  }
  .with-side > main .wrap { max-width: none; padding-inline: 0; }
  .side-col { display: grid; gap: 24px; padding-block: 32px 48px; }
  .side-col > .sec { padding-block: 0; background: none; }
  .side-col .wrap { padding-inline: 0; }
  .side-col .rte { font-size: 15px; }
  .side-col .sec-heading { margin-bottom: 8px; font-size: 1.1rem; }
  /* C1: less room, so a grid of four or five shows three across, six shows four. */
  .side-on .with-side .grid-4, .side-on .with-side .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .side-on .with-side .grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* C2: a product's pictures over its details until there is room beside them. */
  .side-on .with-side .product { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .side-on .with-side .product-media { position: static; }
  /* The side menu is in the column; the Menu panel (a menu-button header's) needn't say it again. */
  .side-on .drawer-more { display: none; }
}
@media (min-width: 1240px) {
  .side-on .with-side .product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
  .side-on .with-side .product-media { position: sticky; }
}

/* The side menu: a heading, the top links - a list with a line between, or
   buttons in the menu buttons' colors - and under a link the links under it. */
.side-head { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side-menu ul { list-style: none; margin: 0; padding: 0; }
.side-menu a, .side-sub > summary { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.side-menu a:hover { text-decoration: underline; text-underline-offset: 3px; }
.side-menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.side-list > li > a, .side-list > li > .side-row, .side-list > li > .side-sub > summary { min-height: 40px; padding-block: 8px; }
.side-list > li > a { display: block; }
.side-row { display: flex; align-items: center; gap: 6px; }
.side-row > a { flex: 1; min-width: 0; }
.side-toggle {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer;
}
.side-toggle[hidden] { display: none; }
.side-toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.side-toggle .icon { width: 16px; height: 16px; transition: transform .15s; }
.side-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.side-sub > summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; list-style: none; }
.side-sub > summary::-webkit-details-marker { display: none; }
.side-sub > summary .icon { width: 16px; height: 16px; transition: transform .15s; }
.side-sub[open] > summary .icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .side-toggle .icon, .side-sub > summary .icon { transition: none; } }
.side-kids[hidden] { display: none; }
.side-menu ul ul { padding: 2px 0 8px 14px; font-size: .94em; }
.side-menu ul ul a, .side-menu ul ul .side-sub > summary { display: block; padding-block: 5px; }
.side-menu ul ul .side-row { padding-block: 0; }
.side-list .side-row > a { padding-block: 0; }
/* A list: a line between the top links. */
.side-list > li { border-bottom: 1px solid var(--line); }
.side-as-buttons .side-list > li { border-bottom: 0; }
/* Buttons: a filled box per top link, like store30's. */
.side-as-buttons .side-list { display: grid; gap: 6px; }
.side-as-buttons .side-list > li > a, .side-as-buttons .side-list > li > .side-row, .side-as-buttons .side-list > li > .side-sub > summary {
  padding: 8px 10px; background: var(--side-btn, #2f3136); color: var(--side-btn-fg, #fff); border-radius: var(--menu-radius, 8px);
}
.side-as-buttons .side-list > li > a:hover, .side-as-buttons .side-list > li > .side-row:hover, .side-as-buttons .side-list > li > .side-sub > summary:hover {
  background: color-mix(in srgb, var(--side-btn, #2f3136) 82%, #000);
}
.side-as-buttons .side-list > li > a[aria-current="page"], .side-as-buttons .side-row > a[aria-current="page"] { color: var(--side-btn-fg, #fff); }
.side-as-buttons .side-list > li > .side-kids > ul, .side-as-buttons .side-list > li > .side-sub > ul { padding-top: 6px; }

/* A side picture: the column's width, never more than its own. */
.side-pic { display: block; }
.side-pic .side-img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--radius-card, 8px) / 2); }

/* In the Menu panel, the side menu under its heading. */
.drawer-more { margin-top: 16px; }
.drawer-head { margin: 0; padding: 12px 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/*
 * Bookshop (phase 8, PLAN.md section 7). Warm and bookish, for books,
 * stationery and anything browsed slowly: an old-style serif on paper
 * tones, double rules under headings like a printed page, covers standing
 * tall (2:3) with a little shadow, and the author - a book's vendor - in
 * italics over its title. Blog posts open with a drop capital.
 *
 * Over store.css and the same section library as every theme - only the
 * look changes when a store switches.
 */

body { font-size: 17px; line-height: 1.65; }
h1, h2, h3, .sec-heading, .page-title, .product-title { letter-spacing: 0; }

/* ----------------------------------------------------------- sections */
.sec-head { padding-bottom: 10px; border-bottom: 3px double var(--line); margin-bottom: 22px; }
.sec-heading { font-size: calc(24px * var(--heading-scale, 1)); }
@media (min-width: 750px) { .sec-heading { font-size: calc(30px * var(--heading-scale, 1)); } }
.link-more { font-weight: 400; font-style: italic; }

/* ------------------------------------------------------------- header */
.announce { font-weight: 400; font-style: italic; }
.site-header { border-bottom: 3px double var(--line); }
.logo-text { letter-spacing: 0; }
@media (min-width: 750px) { .logo-text { font-size: 25px; } }
/* Its height, regular-weight menu and thin current-page line are its defaults (phase 15b, Theme::THEMES). */

/* ------------------------------------------------------------ buttons */
.button { font-weight: 600; letter-spacing: .02em; }

/* --------------------------------------------------------------- grid */
.grid { gap: 32px 18px; }
@media (min-width: 750px) { .grid { gap: 44px 28px; } }
.card-pic { overflow: visible; background: none; }
.card-pic img {
  border-radius: var(--radius-card, 2px);
  box-shadow: 0 1px 2px rgba(40, 30, 20, .18), 0 10px 22px -12px rgba(40, 30, 20, .45);
}
.card:hover .card-pic img { transform: translateY(-3px); }
.card-pic-none { box-shadow: inset 0 0 0 1px var(--line); }
.card-vendor { margin-top: 14px; font-size: 14px; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; }
.card-title { font-family: var(--font-heading, serif); font-weight: 700; font-size: 16px; line-height: 1.3; }
.card-price { color: var(--muted); font-size: 15px; }
.badge { left: 8px; top: 8px; border-radius: 2px; font-weight: 600; }
.ccard .card-pic img { box-shadow: none; }

/* ------------------------------------------------------------ product */
.vendor { font-size: 17px; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; }
.vendor::before { content: "by "; }
.gallery-main img { box-shadow: 0 2px 4px rgba(40, 30, 20, .16), 0 18px 36px -18px rgba(40, 30, 20, .5); }
.product-price { font-weight: 400; }

/* ------------------------------------------------------- reading pages */
.article .rte > p:first-child::first-letter {
  float: left; margin: 7px 10px 0 0; font-family: var(--font-heading, serif); font-size: 3.4em; line-height: .82; color: var(--accent, #24503f);
}
.rte blockquote { border-left-color: var(--accent, #24503f); font-style: italic; }
.quote { background: none; border: 0; border-left: 3px solid var(--accent, #24503f); border-radius: 0; padding: 4px 0 4px 20px; }
.quote blockquote { font-family: var(--font-heading, serif); font-size: 19px; font-style: italic; }
.faq-item summary { font-family: var(--font-heading, serif); }
.post-title { font-size: 22px; }
.footer-h { font-size: 17px; letter-spacing: 0; }
.footer-bottom { font-style: italic; }
@media (prefers-reduced-motion: reduce) { .card:hover .card-pic img { transform: none; } }