/* Sadie's Custom Gifts — public site
   Builds on the design system in style.css (tokens, hero, bulk, footer, .btn-primary,
   .btn-secondary, .btn-text-link). Mobile-first: base = phone, 480px+ = tablet, 900px+ = desktop. */

:root {
  --header-h: 64px;
  --cream: #f4f0e8;
  --glow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-accent), 0 0 28px rgba(200, 245, 59, 0.18);
  --safe-top: env(safe-area-inset-top, 0px);
}

html { scroll-padding-top: calc(var(--header-h) + 1rem); scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }
.footer { flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 300; padding: 0.6rem 1.1rem; background: var(--color-accent); color: #111; font-weight: 700; border-radius: 50px; }
.skip-link:focus { left: 0.5rem; }
.icon { display: block; flex: none; }
[hidden] { display: none !important; }

/* ---------- Page transitions (cross-document View Transitions; ignored where unsupported) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: ease; }
.site-header { view-transition-name: site-header; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  padding-top: var(--safe-top);
  background: rgba(26, 23, 20, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: 0.25rem; min-height: var(--header-h); }
.site-header__brand {
  margin-right: auto; display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px;
  font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
}
.site-header__brand span { color: var(--color-accent); }

.cart-link, .nav-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent; color: var(--color-text-primary); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.cart-link:hover, .nav-toggle:hover, .cart-link:focus-visible, .nav-toggle:focus-visible { background: var(--color-bg-secondary); color: var(--color-accent); }
.cart-badge {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 50px;
  display: grid; place-items: center; background: var(--color-accent); color: #111; font: 800 0.72rem/1 var(--font-body);
}
.nav-toggle__close { display: none; }
body.nav-open .nav-toggle__open { display: none; }
body.nav-open .nav-toggle__close { display: block; }
body.nav-open { overflow: hidden; }

/* Phone/tablet: slide-down panel */
.site-nav {
  position: fixed; left: 0; right: 0; top: calc(var(--header-h) + var(--safe-top)); z-index: 90;
  max-height: calc(100vh - var(--header-h) - var(--safe-top)); max-height: calc(100dvh - var(--header-h) - var(--safe-top));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.25rem 1.5rem;
  background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.site-nav__list > li > a { display: flex; align-items: center; min-height: 52px; font-weight: 600; font-size: 1.1rem; text-decoration: none; border-bottom: 1px solid var(--color-border); }
.site-nav__list > li > a:hover { color: var(--color-accent); }
.site-menu { padding: 0 0 0.4rem 1rem; border-bottom: 1px solid var(--color-border); }
.site-menu a { display: flex; align-items: center; min-height: 46px; color: var(--color-text-secondary); text-decoration: none; }
.site-menu a:hover { color: var(--color-accent); }
.site-nav__has-menu > a { border-bottom: 0 !important; }
.site-nav__link[aria-current="page"], .site-nav__link.is-current { color: var(--color-accent); }

/* Desktop: inline nav with hover dropdown */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav__sale { order: 99; }
  .site-header__brand { margin-right: 2rem; font-size: 1.35rem; }
  .site-header__inner { gap: 0.5rem; }
  .site-nav { position: static; flex: 1; order: 2; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav__list { display: flex; align-items: center; gap: 0.25rem; }
  .site-nav__list > li { position: relative; }
  .site-nav__list > li > a { min-height: 44px; padding: 0 0.85rem; font-size: 0.95rem; border: 0; position: relative; }
  .site-nav__link::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 8px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
  .site-nav__link:hover::after, .site-nav__link:focus-visible::after, .site-nav__has-menu:focus-within > .site-nav__link::after { transform: scaleX(1); }
  .site-menu {
    position: absolute; top: 100%; left: 0; min-width: 230px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg-secondary); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .site-nav__has-menu:hover > .site-menu, .site-nav__has-menu:focus-within > .site-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease; }
  .site-menu a { padding: 0 0.85rem; min-height: 42px; border-radius: 6px; color: var(--color-text-primary); }
  .site-menu a:hover { background: var(--color-bg); }
  .cart-link { order: 3; }
  body.nav-open { overflow: auto; }
}

/* ---------- Layout helpers ---------- */
.section { padding: 3rem 0; }
.section--tight { padding-top: 1.75rem; }
.section__head { text-align: center; margin-bottom: 2rem; }
.section__head .showcase__heading { margin-bottom: 0.5rem; }
.section__sub { color: var(--color-text-secondary); }
.section__more { display: flex; justify-content: center; margin-top: 2.25rem; }

.page-hero { padding: 2.75rem 0 0.75rem; }
.page-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; font-weight: 600; color: var(--color-accent); margin-bottom: 0.9rem; }
.page-hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.12; }
.page-hero__sub { max-width: 40rem; margin-top: 0.9rem; color: var(--color-text-secondary); font-size: clamp(1rem, 2.5vw, 1.1rem); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.75rem; }
.page-hero--404 { padding: 5rem 0 4rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.pdp-page .crumbs, .dpage ~ .crumbs { justify-content: flex-start; }
.section .crumbs { justify-content: flex-start; margin-bottom: 1.25rem; }
.page-hero .crumbs { justify-content: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs [aria-current] { color: var(--color-text-primary); }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Empty states / notices ---------- */
.empty-state, .notice {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem;
  max-width: 34rem; margin: 1rem auto; padding: 2.25rem 1.5rem;
  background: var(--color-bg-secondary); border: 1px dashed #3d372f; border-radius: var(--radius);
}
.empty-state--inline { margin: 1.5rem 0; max-width: none; }
.empty-state__title, .notice__title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.empty-state__text, .notice__text { color: var(--color-text-secondary); max-width: 28rem; margin-bottom: 0.6rem; }
.notice { border-style: solid; padding: 2.5rem 1.5rem; }
.notice > .icon { color: var(--color-accent); margin-bottom: 0.25rem; }
.notice__ctx { color: var(--color-accent); font-size: 0.9rem; }

/* ---------- "Don't see our email? Check your spam folder" box — confirmation pages + the newsletter sign-up ---------- */
.spamnote { display: flex; align-items: flex-start; gap: 0.85rem; max-width: 34rem; margin: 1rem auto 0; padding: 1rem 1.1rem; text-align: left; background: var(--color-bg-secondary); border: 1.5px solid var(--color-accent); border-radius: var(--radius); color: var(--color-text-primary); }
.spamnote > .icon { flex: none; margin-top: 0.1rem; color: var(--color-accent); }
.spamnote__text { margin: 0; font-size: 1rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.spamnote--inline { max-width: none; margin: 0.75rem 0 0; padding: 0.7rem 0.8rem; gap: 0.65rem; }
.spamnote--inline > .icon { width: 20px; height: 20px; }
.spamnote--inline .spamnote__text { font-size: 0.875rem; line-height: 1.45; }
.spamnote[hidden] { display: none; }

/* ---------- the cart already holds the other kind of item: the dialog (with JavaScript) and the page (without) ---------- */
.cartconflict { gap: 0.9rem; }
.cartconflict__form { display: contents; }
.cartconflict .notice__text { font-size: 1.05rem; max-width: 30rem; }
.cartconflict .btn-primary, .cartconflict .btn-secondary { width: 100%; max-width: 22rem; justify-content: center; }
.cdialog { padding: 0; border: 1.5px solid var(--color-accent); border-radius: var(--radius); background: var(--color-bg-secondary); color: var(--color-text-primary); width: min(30rem, calc(100vw - 2rem)); margin: auto; }
.cdialog::backdrop { background: rgba(0, 0, 0, 0.65); }
.cdialog__box { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.4rem 1.25rem 1.25rem; }
.cdialog__title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
.cdialog__text { margin: 0; line-height: 1.5; color: var(--color-text-primary); }
.cdialog__error { margin: 0; color: #e65a46; font-size: 0.95rem; }
.cdialog__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.2rem; }
.cdialog__actions > * { width: 100%; justify-content: center; text-align: center; }
.cartmixed { display: flex; flex-direction: column; gap: 0.75rem; }
.cartmixed__actions { display: flex; flex-direction: column; gap: 0.6rem; }
.cartmixed__actions form { display: contents; }
.cartmixed__actions .btn-secondary { width: 100%; justify-content: center; }
.grab-card__form { display: contents; }

/* ---------- Placeholder tile ---------- */
.ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--color-text-muted); font-size: 0.85rem;
  background: radial-gradient(circle at 30% 20%, #2a2620, var(--color-bg-secondary) 70%);
}

/* ---------- Home: Pick your product ---------- */
.jump-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
/* products start right after the hero: the section's top padding is trimmed (it used to sit under a big heading) */
.section.pick { padding-top: 1.25rem; }
.jump-link { display: inline-flex; align-items: center; min-height: 35px; padding: 0 0.95rem; border: 1.5px solid var(--color-accent); border-radius: 50px; color: var(--color-accent); font-weight: 600; font-size: 0.8rem; text-decoration: none; transition: background 0.2s, color 0.2s; }
.jump-link:hover, .jump-link:focus-visible, .jump-link:active { background: var(--color-accent); color: #111; }

.pick-group { margin-top: 2.25rem; }
.pick-group:first-child { margin-top: 0; }
.pick-group__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; row-gap: 0.5rem; margin-bottom: 1.1rem; }
.pick-group__title-row { display: flex; align-items: baseline; gap: 1rem; flex: 1 1 220px; min-width: 180px; }
.pick-group__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0; color: var(--color-text-primary); white-space: nowrap; }
.pick-group__line { flex: 1 1 auto; min-width: 2rem; height: 2px; background: var(--color-accent); }
.pick-group__meta { display: flex; align-items: center; gap: 1rem; flex: none; white-space: nowrap; }
.pick-group__count { font-size: 0.85rem; color: var(--color-text-muted); }

.pick-grid {
  list-style: none; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -1.25rem; padding: 0.25rem 1.25rem 0.5rem; scroll-padding: 0 1.25rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pick-grid::-webkit-scrollbar { display: none; }
.pick-grid > li { flex: 0 0 72%; scroll-snap-align: start; }
.pick-grid__seeall a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  width: 100%; height: 100%; aspect-ratio: 4 / 5; border: 1.5px dashed var(--color-border); border-radius: var(--radius);
  color: var(--color-accent); font-weight: 700; text-decoration: none; text-align: center; transition: border-color 0.2s;
}
.pick-grid__seeall a:hover, .pick-grid__seeall a:focus-visible { border-color: var(--color-accent); }

/* ---------- Cards (categories / products) ---------- */
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.cards-grid--products { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cards-grid + .showcase__heading { margin-top: 2.5rem; }
.product-card__link { display: block; color: inherit; text-decoration: none; }
.product-card:hover, .product-card:focus-within { box-shadow: var(--glow); }
.product-card__name--lg { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.product-card__price--soon { color: var(--color-text-secondary); font-size: 1rem; font-family: var(--font-body); font-weight: 500; }
.product-card__flag { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; background: var(--color-bg); } /* the one badge still allowed on the photo (Buy 10) */


/* ---------- Grab-n-Go cards ---------- */
.grab__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grab-card { display: flex; flex-direction: column; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.grab-card:hover { box-shadow: var(--glow); border-color: transparent; }
.grab-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--color-bg); overflow: hidden; }
.grab-card__media img, .grab-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.grab-card__media img { transition: transform 0.6s ease; }
.grab-card:hover .grab-card__media img { transform: scale(1.04); }
.grab-card__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; background: rgba(26, 23, 20, 0.35); color: var(--color-accent); cursor: pointer; }
.grab-card__play .icon { padding: 14px; box-sizing: content-box; width: 22px; height: 22px; border-radius: 50%; background: rgba(26, 23, 20, 0.85); }
.grab-card__sold { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; padding: 0.3rem 0.9rem; border-radius: 50px; background: var(--color-accent); color: #111; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.grab-card.is-sold .grab-card__media img { opacity: 0.45; filter: grayscale(0.6); }
.grab-card.is-sold .grab-card__name, .grab-card.is-sold .grab-card__price { color: var(--color-text-muted); }
.grab-card__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.25rem 1.25rem; }
.grab-card__name { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.grab-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--color-accent); }
.grab-card__was { font-weight: 400; font-size: 1rem; color: var(--color-text-muted); }
.grab-card__ready { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(200, 245, 59, 0.6); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(200, 245, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 245, 59, 0); } }
.grab-card__cta { align-self: flex-start; padding: 0.5rem 0; font-size: 0.95rem; }

/* Home preview: swipeable row on phones */
.grab__grid--preview { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1.25rem; padding: 0.5rem 1.25rem 1rem; scroll-padding: 0 1.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.grab__grid--preview::-webkit-scrollbar { display: none; }
.grab__grid--preview > li { flex: 0 0 76%; scroll-snap-align: start; }
html.js .grab__grid--preview > li.reveal { transform: none; }
.grab-note { margin: 0.5rem auto 0; max-width: 40rem; text-align: center; font-size: 0.82rem; font-style: italic; color: var(--color-text-muted); } /* sits right under the Grab and Go intro line */

/* ---------- On-sale strip (home page, below hero) ---------- */
.sale-strip { padding: 0.15rem 0 1.5rem; text-align: center; }
.sale-strip__inner { display: flex; justify-content: center; }
.sale-strip__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; border-radius: 50px; border: 1px solid var(--color-accent); color: var(--color-accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.sale-strip__link:hover { background: var(--color-accent); color: #111; }
.sale-strip__label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; }

/* ---------- Grab and Go preview cards (home): compact, no CTA, whole card is a link ---------- */
.grab-preview-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; color: inherit; transition: box-shadow 0.3s ease; }
.grab-preview-card:hover, .grab-preview-card:focus-visible { box-shadow: var(--glow); }
.grab-preview-card__media { position: absolute; inset: 0; background: var(--color-bg); }
.grab-preview-card__media img, .grab-preview-card__media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.grab-preview-card__sold { position: absolute; top: 0.6rem; left: 0.6rem; padding: 2px 9px; border-radius: 50px; background: var(--color-bg); color: var(--color-text-primary); font: 700 0.68rem var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }
.grab-preview-card__scrim { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 0.85rem; background: linear-gradient(to bottom, rgba(26,23,20,0) 0%, rgba(26,23,20,0.65) 55%, rgba(26,23,20,0.95) 100%); }
.grab-preview-card__name { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary); }
.grab-preview-card__price { display: block; font-family: var(--font-display); font-weight: 700; color: var(--color-accent); font-size: 1.05rem; }
.grab-preview-card.is-sold .grab-preview-card__media { opacity: 0.45; filter: grayscale(0.6); }

/* ---------- Slim promo band (home, above the footer) ---------- */
.promo-band { padding: 1.75rem 0; border-top: 1px solid var(--color-border); }
.promo-band__inner { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.promo-band__text { font-weight: 600; color: var(--color-text-primary); }
.promo-band__links { display: flex; flex-direction: column; gap: 0.6rem; }
.promo-band__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent); font-weight: 600; text-decoration: none; transition: gap 0.2s ease; }
.promo-band__link:hover { gap: 0.65rem; }

/* ---------- Slim newsletter sign-up band (home, above the footer) ---------- */
.newsletter-band { padding: 1.75rem 0; border-top: 1px solid var(--color-border); }
.newsletter-band__inner { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.newsletter-band__title { font-weight: 600; color: var(--color-text-primary); margin: 0; }
.newsletter-band__sub { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0.25rem 0 0; }
.newsletter-band .newsletter-form { width: 100%; max-width: 26rem; }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.gallery { position: relative; min-width: 0; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--radius); background: var(--color-bg-secondary); border: 1px solid var(--color-border); overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(26, 23, 20, 0.75); color: var(--color-text-primary); cursor: pointer; transition: background 0.2s, color 0.2s; }
.gallery__nav:hover, .gallery__nav:focus-visible { background: var(--color-accent); color: #111; }
.gallery__nav--prev { left: 0.6rem; }
.gallery__nav--next { right: 0.6rem; }
@media (hover: hover) and (min-width: 600px) { .gallery__nav { display: grid; } }
.gallery__dots { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; }
.gallery__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.gallery__dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--color-accent); transition: background 0.2s, transform 0.2s; }
.gallery__dot.is-active::after { background: var(--color-accent); transform: scale(1.2); }

.pdp__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; margin-bottom: 0.5rem; }
.pdp__price { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); font-size: 1.6rem; margin-bottom: 1.25rem; }
.pdp__price-note { margin-left: 0.6rem; font: 500 0.85rem var(--font-body); color: var(--color-text-muted); }
.pdp__text { color: var(--color-text-secondary); margin-bottom: 0.9rem; }
.gift-idea { margin: 1.1rem 0; padding: 0.6rem 0 0.6rem 1rem; border-left: 3px solid var(--color-accent); color: var(--color-text-secondary); }
.gift-idea strong { color: var(--color-accent); }
.deal { margin: 1.25rem 0; padding: 0.9rem 1rem; border: 1px solid #3d372f; border-radius: var(--radius); background: var(--color-bg-secondary); color: var(--color-text-secondary); font-size: 0.95rem; }
.deal strong { color: var(--color-accent); }
.deal--sm { font-size: 0.88rem; margin: 0.25rem 0; }
.pdp-designs .dgrid { margin-top: 0; }

/* Pick a design / Request a custom design: stacked on phones (Pick a design first), side by side from tablet */
.pdp__cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; margin-top: 0.25rem; }
.pdp__cta-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.pdp__cta-note { margin: 0; padding-left: 0.3rem; font-size: 0.82rem; color: var(--color-text-muted); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary:disabled::before { display: none; }
@media (min-width: 480px) {
  .pdp__cta-row { flex-direction: row; align-items: flex-start; }
}
/* Phones: both buttons span the full width and are exactly the same size */
@media (max-width: 479.98px) {
  .pdp__cta-row { align-items: stretch; }
  .pdp__cta-row > .btn-primary, .pdp__cta-row > .btn-secondary, .pdp__cta-item > .btn-primary { box-sizing: border-box; width: 100%; min-height: 56px; padding-top: 0; padding-bottom: 0; justify-content: center; }
  .pdp__cta-item { align-items: stretch; }
}

/* Option pills */
.opt { margin: 0 0 1.2rem; border: 0; min-width: 0; }
.opt__label { padding: 0; margin-bottom: 0.55rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.opt__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill__box { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 46px; padding: 0 1.1rem; border: 1.5px solid var(--color-border); border-radius: 50px; background: var(--color-bg-secondary); font-weight: 600; font-size: 0.95rem; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.3s, box-shadow 0.3s; }
.pill__box em { font-style: normal; font-weight: 500; font-size: 0.8rem; color: var(--color-text-muted); }
.pill:hover .pill__box { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200, 245, 59, 0.14); }
.pill input:checked + .pill__box { border-color: var(--color-accent); background: rgba(200, 245, 59, 0.12); color: var(--color-accent); }
.pill input:checked + .pill__box em { color: var(--color-accent); }
.pill input:focus-visible + .pill__box { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---------- Designs: filters, grid ---------- */
.input { width: 100%; min-height: 48px; padding: 0 1.15rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 50px; color: var(--color-text-primary); font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(200, 245, 59, 0.18); }
.input--area { padding: 0.8rem 1.15rem; border-radius: 14px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; }
.filters { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.filters__apply { justify-content: center; min-height: 48px; }
.filters__count { margin: 1rem 0 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); }
html.js .filters__apply { display: none; }

.dfilters { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.dfilters .field--search { width: 100%; }
/* Category picker: one button + a panel of every category (replaces the old row of chips) */
.catpick { position: relative; }
.catpick__group { display: inline-flex; max-width: 100%; }
.catpick__btn, .catpick__clear { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; border: 1.5px solid var(--color-accent); background: none; color: var(--color-accent); font: 600 0.9rem var(--font-body); cursor: pointer; transition: background 0.2s, color 0.2s; }
.catpick__btn { padding: 0 1.1rem; border-radius: 50px; min-width: 0; }
.catpick__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catpick__caret { font-size: 0.8rem; transition: transform 0.2s; }
.catpick.is-open .catpick__caret { transform: rotate(180deg); }
.catpick__btn:hover, .catpick__btn:focus-visible, .catpick__clear:hover, .catpick__clear:focus-visible { background: rgba(200, 245, 59, 0.12); }
.catpick.has-selection .catpick__btn { background: var(--color-accent); color: #111; border-radius: 50px 0 0 50px; }
.catpick.has-selection .catpick__clear { background: var(--color-accent); color: #111; min-width: 44px; justify-content: center; padding: 0 0.9rem 0 0.6rem; border-radius: 0 50px 50px 0; border-left: 1px solid rgba(0, 0, 0, 0.25); }
.catpick.has-selection .catpick__btn:hover, .catpick.has-selection .catpick__clear:hover { background: var(--color-accent-hover); }
.catpick__clear[hidden] { display: none; }
.catpick__panel { margin-top: 0.6rem; padding: 0.8rem; max-height: min(60vh, 28rem); overflow-y: auto; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.catpick__panel[hidden] { display: none; }
html:not(.js) .catpick__panel[hidden] { display: block; }
html:not(.js) .catpick__btn { display: none; }
.catpick__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.4rem; }
.catpick__item { width: 100%; min-height: 44px; padding: 0.4rem 0.9rem; text-align: left; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); color: var(--color-text-primary); font: 600 0.9rem var(--font-body); cursor: pointer; overflow-wrap: anywhere; }
.catpick__item:hover, .catpick__item:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.catpick__item.is-selected { background: var(--color-accent); border-color: var(--color-accent); color: #111; }
.dselect-field { max-width: 16rem; }
.dselect { min-height: 42px; font-size: 0.88rem; padding-left: 1rem; }
.dfilters__apply { align-self: flex-start; }
html.js .dfilters__apply { display: none; }
.dresults__count { margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); }
.dmore { display: flex; justify-content: center; margin-top: 2rem; }

.dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.dcard { min-width: 0; }
.dcard__link { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; text-decoration: none; padding: 0.6rem 0.6rem 0.9rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.dcard__link:hover, .dcard__link:focus-visible { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 26px rgba(200, 245, 59, 0.16); }
.dcard__img { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--color-bg); overflow: hidden; }
.dcard__img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.dcard__link:hover .dcard__img img { transform: scale(1.05); }
.dcard__name { padding: 0 0.3rem; font-weight: 600; font-size: 0.92rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dcard__tag { padding: 0 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 2rem; }
.pager__info { color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------- Design page ---------- */
.dpage { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.dpage__frame { display: grid; place-items: center; padding: 1rem; background: var(--cream); border-radius: var(--radius); border: 1px solid var(--color-border); }
.dpage__frame img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 0.85rem; border: 1px solid var(--color-border); border-radius: 50px; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--color-text-secondary); transition: border-color 0.2s, color 0.2s; }
.chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.buy { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }
.panel { display: contents; }
.placement-panel { display: contents; }
.placement-panel > fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.customize-box { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); }
.customize-box__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.customize-box__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.customize-box__sub { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); }
.customize-box__lines { display: flex; flex-direction: column; gap: 1rem; }
.field { position: relative; display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); }
.field__label em { font-style: normal; font-weight: 400; color: var(--color-text-muted); }
.field__count { align-self: flex-end; font-size: 0.72rem; color: var(--color-text-muted); }
.field__hint { font-size: 0.82rem; color: var(--color-text-muted); }
.field__error { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 600; color: #e65a46; }
.fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.font-choice { position: relative; cursor: pointer; }
.font-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.font-choice__box { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 0.4rem 0.6rem; text-align: center; font-size: 1.35rem; line-height: 1.2; border: 1.5px solid var(--color-border); border-radius: 12px; background: var(--color-bg); transition: border-color 0.2s, background 0.2s, transform 0.3s, box-shadow 0.3s; }
.font-choice__box--any { font-size: 0.95rem; font-style: italic; font-weight: 600; color: var(--color-text-secondary); border-style: dashed; }
.font-choice:hover .font-choice__box { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200, 245, 59, 0.14); }
.font-choice input:checked + .font-choice__box { border-color: var(--color-accent); background: rgba(200, 245, 59, 0.1); color: var(--color-accent); }
.font-choice input:focus-visible + .font-choice__box { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.placement-fixed { margin: 0; font-weight: 600; }
.note { font-size: 0.85rem; font-style: italic; color: var(--color-text-secondary); }
.buy__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.qty { display: flex; flex-direction: column; gap: 0.4rem; }
.qty__ctl { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: 50px; background: var(--color-bg-secondary); overflow: hidden; }
.qty__btn { width: 48px; height: 48px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; transition: color 0.2s, background 0.2s; }
.qty__btn:hover { color: var(--color-accent); background: var(--color-bg); }
.qty__input { width: 3.2rem; height: 48px; padding: 0; border: 0; background: none; text-align: center; font-weight: 700; font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; color: var(--color-accent); }
.buy__price { display: flex; flex-direction: column; align-items: flex-end; }
.buy__total { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--color-accent); }
.buy__each { font-size: 0.82rem; color: var(--color-text-muted); min-height: 1.2em; }
.buy__submit { justify-content: center; width: 100%; min-height: 56px; }
.buy__status { min-height: 1.4em; text-align: center; font-size: 0.9rem; color: var(--color-accent); }
.buy__gate { margin: 0; text-align: center; font-size: 0.9rem; line-height: 1.4; color: var(--color-text-secondary); }
.buy__gate[hidden] { display: none; }

.fitems__photos { margin-bottom: 1.5rem; }

/* "Have a code?" on the cart page */
.codebox { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.codebox__more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 0.95rem; color: var(--color-accent); }
.codebox__form { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.4rem; }
.codebox__form .input { flex: 1; min-width: 0; text-transform: uppercase; font-size: 16px; }
.codebox__form .input::placeholder { text-transform: none; }
.codebox__on { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--color-accent); border-radius: var(--radius); background: rgba(200, 245, 59, 0.07); }
.codebox__chip { margin: 0; font-size: 0.9rem; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.codebox__chip b { letter-spacing: 0.06em; color: var(--color-accent); }
.codebox__chip span { color: var(--color-text-secondary); }
.codebox__note { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); }
.codebox__msg { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.codebox__msg--error { color: #f3b0a6; }
.codebox__msg--ok { color: var(--color-accent); }

/* …and on its line in the cart */
.cart-line__photos { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--color-accent); font-weight: 600; }
.cart-line__photo { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--color-border); background: #2a2622; }
.cart-line__photos span { margin-left: 0.2rem; }

/* The customer's own photo(s) on a design that asks for them */
.pphotos { display: grid; gap: 0.75rem; }
.pphotos__hint { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--color-text-muted); }
.pphotos__count { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); }
.pphotos.is-ready .pphotos__count { color: var(--color-accent); }
.pphotos__add { justify-self: start; }
.pphotos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.pphotos__grid:empty { display: none; }
.pphotos.is-drag { outline: 2px dashed var(--color-accent); outline-offset: 6px; }
.pphoto { position: relative; display: grid; gap: 0.2rem; align-content: start; min-width: 0; padding: 0.4rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.pphoto.is-error { border-color: #e65a46; }
.pphoto__img { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #2a2622; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.pphoto__img img { width: 100%; height: 100%; object-fit: cover; }
.pphoto__meta { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pphoto__status { font-size: 0.78rem; line-height: 1.3; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.pphoto.is-done .pphoto__status { color: var(--color-accent); }
.pphoto.is-error .pphoto__status { color: #f3b0a6; }
.pphoto__bar { height: 5px; border-radius: 50px; background: var(--color-border); overflow: hidden; }
.pphoto__bar > span { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width 0.15s; }
.pphoto__bar[hidden], .pphoto__again[hidden] { display: none; }
/* the remove (×) sits on the corner of the picture: a 44px tap target with a small dark circle drawn inside it */
.pphoto__x { position: absolute; top: 0.4rem; right: 0.4rem; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; color: #fff; font: 400 1.5rem/1 var(--font-body); background: radial-gradient(circle, rgba(0, 0, 0, 0.78) 0 14px, transparent 15px); }
.pphoto__x:hover { color: var(--color-accent); }
.pphoto__x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; border-radius: 50%; }
.pphoto__x:disabled { opacity: 0.5; cursor: wait; }
.pphoto__again { min-height: 44px; padding: 0 0.85rem; background: none; border: 1px solid var(--color-border); border-radius: 50px; color: var(--color-text-secondary); font: 600 0.8rem var(--font-body); cursor: pointer; }
.pphoto__again:hover { border-color: var(--color-accent); color: var(--color-accent); }
@media (min-width: 560px) { .pphotos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* five or more photos: smaller tiles in three columns on a phone (no file names, shorter status), four on wider screens — ten fit without a long scroll */
.pphotos--many .pphotos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.pphotos--many .pphoto { padding: 0.3rem; gap: 0.15rem; }
.pphotos--many .pphoto__meta { display: none; }
.pphotos--many .pphoto__status { font-size: 0.7rem; }
.pphotos--many .pphoto__x { top: 0.3rem; right: 0.3rem; }
@media (min-width: 560px) { .pphotos--many .pphotos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Tablet ---------- */
@media (min-width: 480px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--products { gap: 1.5rem; }
  .grab__grid { grid-template-columns: repeat(2, 1fr); }
  .dgrid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .fonts { grid-template-columns: repeat(3, 1fr); }
  .dfilters .field--search { max-width: 24rem; }
  /* .grab__grid--preview stays a swipeable row through tablet — it only becomes a grid at desktop below. */
}
@media (min-width: 600px) {
  .filters { grid-template-columns: 2fr 1.4fr 1.4fr; }
  .filters__apply { grid-column: 1 / -1; }
  .promo-band__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 1.5rem; }
  .promo-band__links { flex-direction: row; gap: 2rem; }
  .newsletter-band__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 1.5rem; }
}
/* "Pick your product" swipes on phones (below); from here it's a real grid, 3 across, 4 at desktop. */
@media (min-width: 700px) {
  .pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .pick-grid > li { flex: none; }
  .pick-grid__seeall { display: none; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .section { padding: 4rem 0; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .cards-grid--products { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; }
  .pick-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .grab__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .grab__grid--preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; overflow: visible; margin: 0; padding: 0; }
  .grab__grid--preview > li { flex: none; }
  .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .dpage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .dpage__art { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .dgrid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .dgrid--compact { grid-template-columns: repeat(4, 1fr); }
  .filters { grid-template-columns: 2fr 1.4fr 1.4fr auto; }
  .filters__apply { grid-column: auto; }
  .buy__submit { width: auto; align-self: flex-start; min-width: 16rem; }
}
@media (min-width: 1100px) {
  .grab__grid:not(.grab__grid--preview) { grid-template-columns: repeat(4, 1fr); }
  .dgrid:not(.dgrid--compact) { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 479px) {
  .section { padding: 2.25rem 0; }
  .site-header__brand { font-size: 1.1rem; }
  .page-hero { padding-top: 2rem; }
}
@media (max-width: 359px) {
  .site-header__brand { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
  .dot { animation: none; }
  @view-transition { navigation: none; }
  .dcard__link:hover, .pill:hover .pill__box, .font-choice:hover .font-choice__box { transform: none; }
  .grab-card:hover .grab-card__media img, .dcard__link:hover .dcard__img img { transform: none; }
}

/* Touch targets: the small pill variants stay compact but never under 44px tall */
.btn-primary--sm, .btn-secondary--sm { min-height: 44px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.gallery__dot { width: 36px; height: 36px; }
.gallery__dot::after { inset: 13px; }

/* =====================================================================
   Cart, checkout, toasts
   ===================================================================== */
.flash { margin: 0 0 1.25rem; padding: 0.85rem 1rem; border-radius: var(--radius); font-size: 0.95rem; }
.flash--ok { background: rgba(200, 245, 59, 0.08); border: 1px solid rgba(200, 245, 59, 0.35); }
.flash--error { background: rgba(230, 90, 70, 0.12); border: 1px solid rgba(230, 90, 70, 0.5); color: #f3b0a6; }

.toast {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 400; display: flex; align-items: center; gap: 1rem;
  max-width: min(92vw, 30rem); padding: 0.85rem 1.25rem; border-radius: 50px; background: var(--color-bg-secondary); border: 1px solid var(--color-accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 28px rgba(200, 245, 59, 0.15); font-size: 0.95rem; font-weight: 600;
  opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast--error { border-color: #e65a46; color: #f3b0a6; }
.toast a { flex: none; color: var(--color-accent); text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid var(--color-accent); }

/* Grab-n-Go card buttons */
.grab-card__add { margin-top: 0.7rem; justify-content: center; width: 100%; }
.grab-card__add:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.grab-card__reserved { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #f3d79b; }
.dot--off { background: #f3d79b; animation: none; box-shadow: none; }

/* ---------- Cart page ---------- */
.cart { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
.cart__lines { display: flex; flex-direction: column; gap: 1rem; }
.cart-line { display: grid; grid-template-columns: 84px 1fr; gap: 0.9rem; padding: 0.9rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); }
.cart-line.has-issue { border-color: #e65a46; }
.cart-line__img { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--cream); overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__noimg { display: grid; place-items: center; width: 100%; height: 100%; color: #8a8378; }
.cart-line__body { min-width: 0; }
.cart-line__name { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.cart-line__name a { text-decoration: none; }
.cart-line__name a:hover { color: var(--color-accent); }
.cart-line__sub { font-size: 0.85rem; color: var(--color-text-muted); }
.cart-line__meta { margin-top: 0.35rem; font-size: 0.88rem; color: var(--color-text-secondary); }
.cart-line__meta li { margin: 0.1rem 0; }
.cart-line__meta span, .cart-line__notes span { color: var(--color-text-muted); }
.cart-line__meta em { font-style: normal; color: var(--color-text-muted); font-size: 0.8rem; }
.cart-line__pers li b { font-size: 1.15rem; font-weight: 400; color: var(--color-text-primary); }
.cart-line__notes { margin-top: 0.3rem; font-size: 0.85rem; font-style: italic; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.cart-line__issue { margin-top: 0.4rem; font-size: 0.88rem; font-weight: 600; color: #f3b0a6; }
.cart-line__note { margin-top: 0.3rem; font-size: 0.78rem; color: var(--color-text-muted); }
.deal-note { margin: 1.25rem 0; font-size: 0.88rem; color: var(--color-text-muted); }
.cart-line__free { margin-top: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--color-accent); }
.cart-line__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.7rem; }
.cart-line__one { font-size: 0.8rem; color: var(--color-text-muted); }
.cart-line__remove { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.9rem; color: var(--color-text-secondary); }
.cart-line__price { margin-left: auto; text-align: right; font-family: var(--font-display); }
.cart-line__price b { color: var(--color-accent); font-size: 1.2rem; }
.cart-line__price s { color: var(--color-text-muted); font-size: 0.95rem; }
.cart-line__price small { display: block; font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); }
.qty-form { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: 50px; background: var(--color-bg); overflow: hidden; }
.qty-form .qty__btn { width: 44px; height: 44px; }
.qty-form .qty__btn:disabled { opacity: 0.3; cursor: default; }
.qty-form__n { min-width: 2.2rem; text-align: center; font-weight: 700; }

.cart__summary { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); }
.deal-box { padding: 0.9rem 1rem; border: 1px dashed #3d372f; border-radius: var(--radius); background: var(--color-bg); }
.deal-box.is-earned { border-style: solid; border-color: var(--color-accent); background: rgba(200, 245, 59, 0.07); }
.deal-box__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-accent); }
.deal-box__list { margin: 0.4rem 0; font-size: 0.9rem; }
.deal-box__list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0; color: var(--color-text-secondary); }
.deal-box__list b { color: var(--color-accent); white-space: nowrap; }
.deal-box__save { font-weight: 700; margin-bottom: 0.4rem; }
.deal-box__next { font-weight: 600; }
.deal-box__next b { color: var(--color-accent); }
.deal-box__fine { margin-top: 0.35rem; font-size: 0.78rem; font-style: italic; color: var(--color-text-muted); }
.totals { display: flex; flex-direction: column; gap: 0.35rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-text-secondary); }
.totals__free dd { color: var(--color-accent); }
.totals__total { padding-top: 0.6rem; margin-top: 0.3rem; border-top: 1px solid var(--color-border); color: var(--color-text-primary) !important; font-weight: 700; font-size: 1.2rem; }
.totals__total dd { font-family: var(--font-display); color: var(--color-accent); font-size: 1.5rem; }
.checkout { display: flex; flex-direction: column; gap: 1rem; }
.opt__choices--stack { flex-direction: column; }
.pill--block { display: block; }
.pill--block .pill__box { display: flex; width: 100%; }
.checkout__btn { justify-content: center; width: 100%; min-height: 56px; }
.checkout__btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.checkout__secure, .checkout__hold { text-align: center; font-size: 0.8rem; color: var(--color-text-muted); }
.success-card .btn-primary { margin-top: 0.75rem; }
.success-card .btn-primary__label { line-height: 1.3; text-align: center; } /* a long group name in "Back to the … fundraiser" wraps onto a few lines — keep them readable */
.success-card .btn-primary:has(.btn-primary__label:only-child) { padding-top: 0.85rem; padding-bottom: 0.85rem; }

@media (min-width: 600px) {
  .cart-line { grid-template-columns: 112px 1fr; padding: 1.1rem; gap: 1.1rem; }
}
@media (min-width: 900px) {
  .cart { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 2.25rem; }
  .cart__summary { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* =====================================================================
   Custom request form  (/custom-request)  and the private approval page  (/requests/<token>)
   ===================================================================== */
.container--form { max-width: 720px; }

.crform { display: grid; gap: 2rem; }
.crsection { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.crsection__title { float: none; width: 100%; padding: 0; margin: 0 0 0.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.25; }
.crsection__title em { font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: 0.9rem; color: var(--color-text-muted); }
.crsection__hint { font-size: 0.9rem; color: var(--color-text-secondary); }
.crerrors { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.crerrors li { margin: 0.15rem 0; }

/* honeypot: off-screen, not display:none (some bots skip hidden fields but fill off-screen ones) */
.crhp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* products: a checkbox list grouped by category */
.crgroup__name { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin: 0.6rem 0 0.5rem; }
.crproducts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.crproduct { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color 0.2s; }
.crproduct.is-on { border-color: var(--color-accent); }
.crproduct__pick { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.55rem 0.9rem; cursor: pointer; min-width: 0; }
.crproduct__pick input, .crcheck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.crproduct__box, .crcheck__box { flex: none; width: 24px; height: 24px; border: 2px solid var(--color-text-muted); border-radius: 6px; display: grid; place-items: center; transition: background 0.15s, border-color 0.15s; }
.crproduct__pick input:checked + .crproduct__box, .crcheck input:checked + .crcheck__box { background: var(--color-accent); border-color: var(--color-accent); }
.crproduct__pick input:checked + .crproduct__box::after, .crcheck input:checked + .crcheck__box::after { content: ""; width: 6px; height: 11px; border: solid #111; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.crproduct__pick input:focus-visible + .crproduct__box, .crcheck input:focus-visible + .crcheck__box { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.crproduct__name { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.crproduct__price { flex: none; font-size: 0.9rem; color: var(--color-text-secondary); }
.crproduct.is-on .crproduct__price { color: var(--color-accent); font-weight: 600; }
.crproduct__qty { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem 0.4rem 0; transition: opacity 0.2s; }
.crproduct:not(.is-on) .crproduct__qty { opacity: 0.35; }
.crproduct__qtylabel { font-size: 0.8rem; color: var(--color-text-muted); }
.crproduct__qtyinput { width: 4.5rem; min-height: 44px; padding: 0 0.6rem; border-radius: 12px; text-align: center; }

/* A product with its own options (size, design sides, color): pick row on top, then qty + option
   pickers below (hidden while unticked), then any extra lines for a second size/color. */
.crproduct--opts { display: block; padding: 0.7rem 0.9rem; }
.crproduct--opts .crproduct__pick { padding: 0; min-height: auto; margin-bottom: 0.7rem; }
.cropts { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.9rem; }
.cropts[disabled] { display: none; }
.cropts .crproduct__qty, .cropt-extra .crproduct__qty { padding: 0; opacity: 1; }
.cropts__extra { display: grid; gap: 0.9rem; }
.cropt-extra { margin-top: 0.9rem; padding: 0.8rem; border: 1px dashed var(--color-border); border-radius: var(--radius); display: grid; gap: 0.9rem; }
.cropts__add { display: inline-block; margin-top: 0.8rem; }

/* Arrived from a product page's "Request a custom design" button: one product, no checklist */
.crsolo { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem; background: var(--color-bg-secondary); border: 1px solid var(--color-accent); border-radius: var(--radius); }
.crsolo__media { position: relative; flex: none; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--color-bg); }
.crsolo__img { width: 100%; height: 100%; object-fit: contain; }
.crsolo__media .ph .icon { width: 22px; height: 22px; }
.crsolo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.crsolo__name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.crsolo__price { font-size: 0.9rem; color: var(--color-accent); font-weight: 600; }
.crsolo__qty { padding: 0; }

.craddmore__summary { list-style: none; cursor: pointer; }
.craddmore__summary::-webkit-details-marker { display: none; }
.craddmore__body { display: grid; gap: 1rem; margin-top: 1rem; }

.crrow { display: grid; gap: 1rem; }

.crnote { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--radius); font-size: 0.95rem; line-height: 1.5; }
.crnote--warn { background: rgba(200, 245, 59, 0.07); border: 1px solid rgba(200, 245, 59, 0.35); }
.crnote .icon { flex: none; margin-top: 0.15rem; color: var(--color-accent); }

/* uploader */
.crfiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.crfile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.55rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); }
.crfile.is-error { border-color: #e65a46; }
.crfile__thumb { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 3px; background: #2a2622; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.crfile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.crfile__body { min-width: 0; display: grid; gap: 0.25rem; }
.crfile__name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crfile__meta { font-size: 0.8rem; color: var(--color-text-secondary); }
.crfile.is-error .crfile__meta { color: #f3b0a6; }
.crfile__bar { height: 6px; border-radius: 50px; background: var(--color-border); overflow: hidden; }
.crfile__bar > span { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width 0.15s; }
.crfile__remove { min-height: 44px; padding: 0 0.85rem; background: none; border: 1px solid var(--color-border); border-radius: 50px; color: var(--color-text-secondary); font: 600 0.8rem var(--font-body); cursor: pointer; }
.crfile__remove:hover { border-color: var(--color-accent); color: var(--color-accent); }
.crfiles__add { justify-self: start; }
.crfiles__error { color: #f3b0a6; font-size: 0.9rem; }
[data-uploader].is-drag { outline: 2px dashed var(--color-accent); outline-offset: 6px; }

.crcheck { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; line-height: 1.45; }
.crcheck .crcheck__box { margin-top: 0.1rem; }
.crform__submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.crform__fine { text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }

/* approval page */
.rqsection__title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin: 0 0 0.9rem; }
.rqtag { display: inline-block; vertical-align: middle; margin-left: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 50px; background: var(--color-accent); color: #111; font: 700 0.7rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.rqmock, .rqprice, .rqact, .rqhist { margin: 0 0 2rem; }
.rqmock__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.rqmock__item { background: #f4f0e8; border-radius: var(--radius); overflow: hidden; }
.rqmock__item a { display: block; }
.rqmock__item img { display: block; width: 100%; height: auto; }
.rqmock__grid--small { grid-template-columns: repeat(3, 1fr); }
.rqnote { margin-top: 0.9rem; padding: 0.8rem 1rem; border-left: 3px solid var(--color-accent); background: var(--color-bg-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.rqlines { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.rqlines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.rqlines li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.rqline__opts { color: var(--color-text-muted); font-size: 0.82rem; }
.rqfree { font-style: normal; color: var(--color-accent); font-size: 0.85rem; }
.rqtotals { margin: 0; }
.rqtotals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; color: var(--color-text-secondary); }
.rqtotals dd { margin: 0; }
.rqtotals__free { color: var(--color-accent) !important; }
.rqtotals__total { font-size: 1.25rem; font-weight: 700; color: var(--color-text-primary) !important; border-top: 1px solid var(--color-border); margin-top: 0.4rem; padding-top: 0.7rem !important; }
.rqfine { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.6rem; }
.rqfine--center { text-align: center; }
.rqform { margin: 0 0 1.25rem; display: grid; gap: 0.9rem; }
.rqform .btn-primary, .rqform .btn-secondary { justify-self: start; }
.rqform--changes { padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.rqhist__list { margin: 0; padding-left: 1.1rem; }
.rqhist__list li { margin: 0.4rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.rqhist--older summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.rqold { margin: 0.5rem 0 1rem; }
.rqold__title { font-family: var(--font-body); font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--color-text-secondary); }

@media (min-width: 600px) {
  .crrow { grid-template-columns: 1fr 1fr; }
  .rqmock__grid { grid-template-columns: 1fr 1fr; }
  .rqmock__grid--one { grid-template-columns: minmax(0, 520px); }
  .crfile { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .crfile__thumb { width: 72px; height: 72px; }
}

/* =====================================================================
   Sale price / "sold as" / Buy-10-eligible badges — shared wherever a price appears
   ===================================================================== */
.badge-sale { display: inline-block; padding: 2px 9px; border-radius: 50px; background: var(--color-accent); color: #111; font: 700 0.68rem var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; margin-left: 0.5rem; }
.price-was { text-decoration: line-through; color: var(--color-text-muted); font-weight: 500; margin-right: 0.45rem; }
.sold-as { font: 500 0.85rem var(--font-body); color: var(--color-text-muted); font-style: italic; }
.included-line { font-size: 0.92rem; color: var(--color-text-secondary); margin: 0.3rem 0 0.6rem; }
.pdp__options { font-size: 0.88rem; color: var(--color-text-muted); margin: -0.9rem 0 0.6rem; }
.badge-free10 { display: inline-flex; align-items: center; gap: 0.35rem; padding: 3px 10px; border-radius: 50px; border: 1px solid var(--color-accent); color: var(--color-accent); font: 700 0.68rem var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }
.ask-pricing { color: var(--color-text-secondary); font-size: 0.95rem; margin: 0.75rem 0; }

/* Sale nav link: always lime, not just on hover/current, so it stands out from the rest of the nav. */
.site-nav__link--sale { color: var(--color-accent); }

/* Optional product "name note" (e.g. "(many colors available)"): smaller text after the name */
.name-note { font-family: var(--font-body); font-size: 0.6em; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0; text-transform: none; white-space: normal; }
.product-card__name .name-note { font-size: 0.82em; }

/* Info pages (About, Contact, FAQ, Returns, Privacy, Terms) */
.info { max-width: 46rem; }
.info__body { color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.7; }
.info__body > * + * { margin-top: 1rem; }
.info__body h2 { font-family: var(--font-display); color: var(--color-text-primary); font-size: 1.4rem; line-height: 1.25; margin-top: 2rem; }
.info__body ul, .info__body ol { padding-left: 1.4rem; }
.info__body li + li { margin-top: 0.4rem; }
.info__body strong { color: var(--color-text-primary); }
.info__body a { color: var(--color-accent); text-underline-offset: 3px; }

/* Returns note beside the checkout button */
.returns-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); text-align: center; }
.returns-note a { color: var(--color-text-secondary); }

/* Designs filter bar: search + category button + product select on ONE line from 800px up (panel floats over the grid);
   below that the three stack and the category panel opens inline. */
@media (min-width: 800px) {
  .dfilters { position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
  .dfilters .field--search { flex: 1 1 14rem; width: auto; }
  .dfilters .dselect-field { flex: 0 1 16rem; }
  .catpick { position: static; }
  .catpick__panel { position: absolute; z-index: 20; left: 0; top: calc(100% - 0.6rem); width: min(46rem, 100%); }
}

/* Pictures of designs/products: no iOS "Save Image" long-press menu, no text-style selection, no drag ghost */
img[draggable="false"] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* Home "Pick your product" jump links: ONE row on phones. Buttons grow to fill the row in proportion to their
   labels (so "Other Great Items" gets the room it needs), keep the same pill look, and wrap their label inside the
   button — never truncate — if a screen is too narrow. More categories than fit: the row scrolls sideways. */
@media (max-width: 599.98px) {
  .jump-links { flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.1rem; }
  .section.pick { padding-top: 0.9rem; }
  .jump-links::-webkit-scrollbar { display: none; }
  .jump-link { flex: 1 1 auto; min-width: min-content; min-height: 40px; justify-content: center; text-align: center; padding: 0.3rem 0.7rem; font-size: 0.8rem; line-height: 1.15; }
}

/* Custom Request: the apparel "made just for you" note above the needed-by date */
.crnote--apparel { display: block; margin: 0 0 1rem; background: rgba(200, 245, 59, 0.07); border: 1px solid rgba(200, 245, 59, 0.35); color: var(--color-text-secondary); }
.crnote--apparel[hidden] { display: none; }
.crnote--apparel p + p { margin-top: 0.5rem; }
.crnote--apparel strong { color: var(--color-text-primary); }

/* ---------- Announcement bar (events + announcements): lime, scrolling right-to-left ---------- */
.annbar { position: relative; overflow: hidden; background: #c8f53b; color: #1a1714; font: 700 0.9rem/1 var(--font-body); height: 38px; }
.annbar__track { display: flex; width: max-content; height: 100%; animation: annbar-scroll var(--annbar-dur, 40s) linear infinite; will-change: transform; }
.annbar:hover .annbar__track, .annbar:focus-within .annbar__track, .annbar.is-paused .annbar__track { animation-play-state: paused; }
@keyframes annbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.annbar__list { display: flex; align-items: center; flex: none; min-width: 100vw; margin: 0; padding: 0; list-style: none; height: 100%; }
.annbar__msg, .annbar__sep { display: flex; align-items: center; flex: none; height: 100%; }
.annbar__sep { padding: 0 1.3rem; }
.annbar__link { display: inline-flex; align-items: center; gap: 0.5rem; height: 100%; color: inherit; text-decoration: none; white-space: nowrap; }
a.annbar__link:hover, a.annbar__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
a.annbar__link:focus-visible { outline: 2px solid #1a1714; outline-offset: -4px; }
.annbar .paw { flex: none; display: block; color: #1a1714; }
/* a soft light shimmer sweeps across every ~6 seconds */
.annbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%); transform: translateX(-120%); animation: annbar-shimmer 6s ease-in-out infinite; }
@keyframes annbar-shimmer { 0% { transform: translateX(-120%); } 22% { transform: translateX(120%); } 100% { transform: translateX(120%); } }
/* reduced motion (or JS says so): no scrolling, no shimmer — one centered message at a time, fading */
@media (prefers-reduced-motion: reduce) {
  .annbar { height: auto; min-height: 38px; }
  .annbar::after { display: none; }
  .annbar__track { animation: none; width: 100%; justify-content: center; }
  .annbar__list { flex: 1 1 100%; width: 100%; min-width: 0; justify-content: center; }
  .annbar__list--dup, .annbar__sep { display: none; }
  .annbar__msg { display: none; flex: 0 1 auto; max-width: 100%; height: auto; min-height: 38px; padding: 0.4rem 1rem; text-align: center; }
  .annbar__msg:first-child, .annbar__msg.is-current { display: flex; }
  .annbar__link { display: block; white-space: normal; text-align: center; line-height: 1.3; height: auto; }
  .annbar .paw { display: inline-block; vertical-align: -2px; margin: 0 0.35em; }
  .annbar__msg.is-current { animation: annbar-fade 0.6s ease; }
}
.annbar.is-static .annbar__msg:first-child:not(.is-current) { display: none; }
.annbar.is-static .annbar__msg.is-current { display: flex; }
@keyframes annbar-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Event poster pop-up ---------- */
html.evmodal-open, html.evmodal-open body { overflow: hidden; }
.evmodal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 0.75rem; background: rgba(10, 8, 6, 0.82); overscroll-behavior: contain; }
.evmodal[hidden] { display: none; }
.evmodal__dialog { position: relative; width: min(100%, 640px); max-height: calc(100dvh - 1.5rem); overflow-y: auto; overscroll-behavior: contain; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); outline: none; }
.evmodal__close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(26, 23, 20, 0.85); color: var(--color-text-primary); cursor: pointer; }
.evmodal__close:hover, .evmodal__close:focus-visible { background: var(--color-accent); color: #111; }
.evmodal__poster { display: flex; justify-content: center; background: #100e0c; }
.evmodal__poster img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(72dvh, 900px); object-fit: contain; }
.evmodal__body { padding: 1.1rem 1.25rem 1.4rem; }
.evmodal__title { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; margin: 0 2.4rem 0.5rem 0; }
.evmodal__poster:not([hidden]) + .evmodal__body .evmodal__title { margin-right: 0; }
.evmodal__when { font-weight: 700; color: var(--color-accent); margin: 0 0 0.3rem; }
.evmodal__where, .evmodal__notes { margin: 0 0 0.4rem; color: var(--color-text-secondary); line-height: 1.5; }
.evmodal__notes { white-space: pre-line; }
.evmodal__dir { margin-top: 0.8rem; }
@media (prefers-reduced-motion: no-preference) { .evmodal { animation: annbar-fade 0.2s ease; } }

/* ---------- Fundraisers ---------- */
.fbar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 14px; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-bg-secondary); box-shadow: inset 0 0 0 1px var(--color-border); }
.fbar::-webkit-progress-bar { background: transparent; border-radius: 999px; }
.fbar::-webkit-progress-value { background: var(--color-accent); border-radius: 999px; }
.fbar::-moz-progress-bar { background: var(--color-accent); border-radius: 999px; }
.fbar--sm { height: 9px; }

.fpage__preview { margin-bottom: 1.25rem; padding: 0.8rem 1rem; border: 1.5px dashed #f3c56b; border-radius: var(--radius); background: rgba(243, 197, 107, 0.08); color: #f3c56b; font-size: 0.92rem; }
.fpage__preview a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fpage__head { margin-bottom: 1.5rem; max-width: 46rem; }
.fpage__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
.fpage__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.12; margin-bottom: 0.6rem; }
.fpage__blurb { color: var(--color-text-secondary); font-size: 1.05rem; max-width: 40rem; white-space: pre-line; }
.fpage__layout { display: flex; flex-direction: column; gap: 1.1rem; }
.fpage__side { display: contents; } /* phone: progress → deadline → poster → pickup, in that order */
.fprogress, .fended { order: 1; }
.fdeadline { order: 2; }
.fpage__poster-col { order: 3; display: flex; justify-content: center; }
.fpickup { order: 4; }
.fpage__poster { position: relative; display: block; width: auto; max-width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); cursor: zoom-in; overflow: hidden; color: inherit; font: inherit; }
.fpage__poster img { display: block; width: auto; max-width: 100%; height: auto; max-height: 72vh; margin: 0 auto; } /* the whole poster, never cropped */
.fpage__zoom { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(26, 23, 20, 0.85); color: var(--color-text-primary); font-size: 0.75rem; font-weight: 600; }
.fpage__poster:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.fprogress { padding: 1.1rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); }
.fprogress__raised { margin-bottom: 0.6rem; font-size: 1.05rem; color: var(--color-text-secondary); }
.fprogress__raised b { font-family: var(--font-display); font-size: 1.9rem; color: var(--color-accent); margin-right: 0.15rem; }
.fprogress__goal { margin-top: 0.55rem; font-size: 0.9rem; color: var(--color-text-secondary); }
.fprogress__goal b { color: var(--color-text-primary); }
.fdeadline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-size: 1.05rem; }
.fdeadline__left { padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--color-accent); color: #111; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; }
.fpickup { padding: 1.1rem 1.2rem; border: 1.5px solid var(--color-accent); border-radius: var(--radius); background: rgba(200, 245, 59, 0.05); }
.fpickup__title { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
.fpickup__place { font-size: 1.05rem; margin-bottom: 0.5rem; }
.fpickup__when { font-weight: 700; margin-bottom: 0.6rem; }
.fpickup__dir { display: inline-block; margin-bottom: 0.7rem; }
.fpickup__contact { padding-top: 0.7rem; border-top: 1px solid var(--color-border); font-size: 0.92rem; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fpickup__contact a { color: var(--color-accent); }
.fpickup__note { margin-top: 0.6rem; font-size: 0.8rem; font-style: italic; color: var(--color-text-muted); }
.fended { padding: 1.3rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); }
.fended__title { font-family: var(--font-display); font-size: clamp(1.4rem, 4.5vw, 1.9rem); line-height: 1.2; margin-bottom: 0.5rem; }
.fended__text { font-size: 1.1rem; color: var(--color-text-secondary); }
.fended__text b { color: var(--color-accent); font-size: 1.3rem; }
.fitems { margin-top: 2.5rem; }
.fitems__title { font-family: var(--font-display); font-size: clamp(1.5rem, 4.5vw, 2rem); margin-bottom: 1.1rem; }
.fitems__grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.fitems__note { margin-top: 1.1rem; font-size: 0.85rem; font-style: italic; color: var(--color-text-muted); }
.fitem { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); overflow: hidden; }
.fitem__media { display: grid; place-items: center; background: var(--cream, #f4efe6); padding: 0.75rem; aspect-ratio: 4 / 3; }
.fitem__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fitem__noimg { color: #3b342b; font-weight: 600; text-align: center; padding: 1rem; }
.fitem__form { display: flex; flex-direction: column; gap: 0.9rem; padding: 1rem 1.1rem 1.2rem; }
.fitem__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.fitem__design { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--color-text-secondary); }
.fitem__price { font-size: 1.5rem; font-family: var(--font-display); font-weight: 700; color: var(--color-accent); }
.fitem__help { font: 500 0.82rem var(--font-body); color: var(--color-text-muted); margin-left: 0.3rem; }
.fitem .opt { margin: 0; }
.fitem .buy__total { font-size: 1.6rem; }
@media (min-width: 600px) { .fitems__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .fpage__layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 2.5rem; row-gap: 1.1rem; align-items: start; }
  .fpage__poster-col { grid-column: 1; grid-row: 1 / span 4; display: block; }
  .fpage__poster { width: 100%; }
  .fpage__poster img { width: 100%; max-height: none; }
  .fprogress, .fended, .fdeadline, .fpickup { grid-column: 2; }
  .fpage__layout--nopic { grid-template-columns: minmax(0, 40rem); }
  .fpage__layout--nopic .fprogress, .fpage__layout--nopic .fended, .fpage__layout--nopic .fdeadline, .fpage__layout--nopic .fpickup { grid-column: 1; }
  .fitems__grid { grid-template-columns: repeat(3, 1fr); }
}

/* poster lightbox (opened by /js/fundraiser.js) */
.zoom { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; background: rgba(10, 8, 6, 0.92); overflow: auto; overscroll-behavior: contain; cursor: zoom-out; }
.zoom img { display: block; max-width: 100%; max-height: calc(100vh - 2rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.zoom__close { position: fixed; top: calc(0.6rem + env(safe-area-inset-top, 0px)); right: 0.6rem; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(26, 23, 20, 0.9); color: var(--color-text-primary); cursor: pointer; }
.zoom__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* home page card */
.fcard-wrap { padding: 0.25rem 0 1.5rem; }
.fcard { display: flex; gap: 1.1rem; align-items: stretch; padding: 1rem; border: 1.5px solid var(--color-accent); border-radius: var(--radius); background: rgba(200, 245, 59, 0.05); text-decoration: none; color: inherit; transition: box-shadow 0.3s ease, background 0.3s ease; }
.fcard:hover, .fcard:focus-visible { background: rgba(200, 245, 59, 0.09); box-shadow: var(--glow, 0 0 24px rgba(200, 245, 59, 0.18)); }
.fcard:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.fcard__thumb { flex: 0 0 auto; width: 28%; max-width: 150px; align-self: center; }
.fcard__thumb img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.fcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.fcard__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
.fcard__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 4.5vw, 1.8rem); line-height: 1.2; }
.fcard__raised { font-size: 0.92rem; color: var(--color-text-secondary); }
.fcard__raised b { color: var(--color-accent); font-size: 1.1rem; }
.fcard .fbar { max-width: 22rem; }
.fcard__by { font-size: 0.9rem; }
.fcard__cta { margin-top: 0.35rem; pointer-events: none; }
@media (max-width: 420px) { .fcard { flex-direction: column; } .fcard__thumb { width: 52%; max-width: 190px; align-self: flex-start; } }

/* fundraiser lines + pickup box in the cart and on the thank-you page */
.cart-line__fund { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.4; color: var(--color-text-secondary); }
.cart-line__fund b { color: var(--color-accent); }
.fundbox { margin: 0 0 1.1rem; padding: 0.85rem 1rem; border: 1.5px solid var(--color-accent); border-radius: var(--radius); background: rgba(200, 245, 59, 0.05); font-size: 0.92rem; }
.fundbox p + p { margin-top: 0.4rem; }
.fundbox__title { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.fundbox__text { color: var(--color-text-secondary); overflow-wrap: anywhere; }
.fundbox a { color: var(--color-accent); }
.fundbox--success { margin: 0.9rem 0; text-align: left; }

/* ---------- Fundraiser: design-first gallery + a design's page ---------- */
.totals [hidden] { display: none; }
.totals__ship dd { color: var(--color-text-primary); }
.fgal { margin-top: 2.5rem; }
.fgal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1rem; }
.fgal__search { flex: 1 1 16rem; max-width: 26rem; }
.fgal__search .input { width: 100%; }
.fgal__count { font-size: 0.88rem; color: var(--color-text-muted); }
.fgal__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.ftile[hidden] { display: none; }
.ftile__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); overflow: hidden; transition: border-color 0.2s, box-shadow 0.3s; }
.ftile__link:hover, .ftile__link:focus-visible { border-color: var(--color-accent); box-shadow: 0 6px 18px rgba(200, 245, 59, 0.14); }
.ftile__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ftile__img { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 0.5rem; background: var(--cream, #f4efe6); } /* a fixed square, so the page doesn't jump as pictures load */
.ftile__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ftile__name { padding: 0.55rem 0.7rem 0.7rem; font-size: 0.9rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.fgal__none { padding: 1.5rem 0; color: var(--color-text-secondary); }
@media (min-width: 600px) { .fgal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fgal__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.fdpage__top { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 0.5rem 0 2rem; }
.fdpage__art .dpage__frame img { max-height: 60vh; }
.fdpage__info { display: flex; flex-direction: column; gap: 0.7rem; align-content: center; }
.fdpage__lead { color: var(--color-text-secondary); font-size: 1.05rem; }
.fdpage__pickup { font-size: 0.92rem; color: var(--color-text-secondary); }
@media (min-width: 900px) { .fdpage__top { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 2.5rem; align-items: center; } }
.fpickup__instr { margin: -0.2rem 0 0.7rem; font-size: 0.95rem; color: var(--color-text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.fdpage__pickup em, .cart-line__fund em { font-style: italic; color: var(--color-text-muted); }

/* ---------- Fundraiser mode: just the name + the cart in the header, a slim footer ---------- */
.site-header--lean .site-header__brand { margin-right: auto; }
.footer--lean .footer__links { margin-bottom: 0.9rem; }
.footer--lean .footer__links ul { justify-content: center; }
.cart__back { margin: 0 0 1rem; }
.cart-line__fundnote { margin-top: 0.35rem; font-size: 0.82rem; font-style: italic; color: var(--color-text-muted); }
.fgal__sub { margin: -0.6rem 0 1.1rem; font-size: 1.05rem; color: var(--color-text-secondary); }
.fdpage__top--solo .fitem__form { padding: 0; margin-top: 0.4rem; }
.fdpage__top--solo .fitem__name { font-size: 1.5rem; }
.fdpage__recap { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 900px) { .fdpage__top--solo { align-items: start; } }

/* ---------- a design's pictures: flat design first, then its mockup — swipe, thumbnails, tap to enlarge ---------- */
.fpics { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; min-width: 0; }
.fpics__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--cream, #f4efe6); }
.fpics__track::-webkit-scrollbar { display: none; }
.fpics__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* The picture sits INSIDE a fixed square (4:3 on item cards), so a tall phone photo can't stretch the frame and push the thumbnails off the screen. */
.fpics__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; overflow: hidden; aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; -webkit-tap-highlight-color: transparent; }
.fpics--card .fpics__slide { aspect-ratio: 4 / 3; }
.fpics__slide img { position: absolute; inset: 0.9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.8rem); object-fit: contain; }
.fpics--card .fpics__slide img { inset: 0.5rem; width: calc(100% - 1rem); height: calc(100% - 1rem); }
.fpics__thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.fpics__thumb { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 68px; padding: 0.25rem; border: 1.5px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-secondary); color: var(--color-text-secondary); font: 600 0.68rem/1.1 var(--font-body); cursor: pointer; }
.fpics__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--cream, #f4efe6); border-radius: 3px; }
.fpics__thumb.is-active { border-color: var(--color-accent); color: var(--color-accent); }
.fpics__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fitem__media--pics { display: block; padding: 0.55rem; aspect-ratio: auto; background: var(--color-bg-secondary); }
.fitem__media--pics .fpics__thumb { width: 56px; }