/* EffieFinds: design system
   Tokens and components lifted from "EffieFinds Site Pages.dc.html".
   Category theming only ever touches --tint and --accent. The shell never changes. */

/* ---------- tokens ---------- */
:root {
  /* ink */
  --ink:        #1B1B1F;
  --ink-body:   #3A3A42;
  --ink-muted:  #6A6A74;
  --ink-faint:  #9A9AA4;
  --ink-ondark: #C9C9D2;
  --ink-ondark-faint: #7A7A88;

  /* surfaces */
  --canvas:     #E9E8EF;
  --surface:    #FFFFFF;
  --surface-2:  #F2F1F7;
  --surface-hover: #EDECF3;

  /* brand periwinkle */
  --peri:        #8A8EE8;
  --peri-hover:  #767AE0;
  --peri-deep:   #6266D0;
  --peri-dark:   #4B4FB8;
  --peri-tint:   #E6E7FA;

  /* notice */
  --warn-bg:    #FFEED4;
  --warn-ink:   #8A6633;

  /* per-category, overridden by [data-cat] below */
  --tint:       var(--surface-2);
  --accent:     var(--peri-deep);
  --photo-ph:   var(--ink-faint);

  --radius-page:  28px;
  --radius-card:  24px;
  --radius-panel: 22px;
  --radius-tile:  20px;
  --radius-soft:  18px;
  --radius-inner: 16px;
  --radius-photo: 14px;

  --shadow-pill: 0 1px 3px rgba(20,20,30,0.14);
  --shadow-page: 0 2px 14px rgba(20,20,30,0.08);

  --maxw: 1240px;
}

[data-cat="nerdy"]           { --tint:#E4F7EE; --accent:#6BA897; --photo-ph:#8FB5A8; }
[data-cat="moon-girl"]       { --tint:#F2EBFC; --accent:#9A85CC; --photo-ph:#AFA0CF; }
[data-cat="cute-and-trendy"] { --tint:#FDEAEF; --accent:#C98799; --photo-ph:#D8A8B5; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-body);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Must come after any element rule that sets `display`. `img { display: block }` and
   `.cart-count { display: flex }` both outrank the browser's own [hidden] rule, which
   left every gallery photo painted on top of the last one. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--peri-deep); outline-offset: 2px; border-radius: 4px; }

/* ---------- wordmark ---------- */
.wordmark { display: flex; align-items: center; gap: 9px; }
.wordmark span {
  font-size: 14px; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--ink); text-indent: 0.34em;
}
.wordmark i { width: 5px; height: 5px; border-radius: 999px; background: var(--peri); display: block; }
.wordmark--sm span { font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; }
.wordmark--sm i { width: 4px; height: 4px; }
.wordmark--ondark span { color: #FFFFFF; }

/* ---------- promo banner ---------- */
.banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; font-size: 13px; font-weight: 700; text-align: center;
}
.banner--drop  { background: var(--peri); color: #FFFFFF; }
.banner--code  { background: var(--ink);  color: #FFFFFF; }
.banner--date  { background: var(--warn-bg); color: var(--warn-ink); }
.banner__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.banner__cta { text-decoration: underline; text-underline-offset: 3px; }
.banner__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; font-size: 16px; line-height: 1;
  opacity: 0.75; padding: 6px;
}
.banner__close:hover { opacity: 1; }
.banner-slot { position: relative; }
@media (max-width: 640px) {
  .banner { font-size: 11px; padding: 8px 12px; }
  .banner__cta, .banner__close { display: none; }
  .banner__truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- nav ---------- */
.nav { background: var(--surface); position: sticky; top: 0; z-index: 40; }
.nav__row {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px;
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-body);
  transition: background 120ms ease;
}
.nav__link:hover { background: var(--surface-hover); }
.nav__link[data-cat="nerdy"]:hover           { background: #E4F7EE; }
.nav__link[data-cat="moon-girl"]:hover       { background: #F2EBFC; }
.nav__link[data-cat="cute-and-trendy"]:hover { background: #FDEAEF; }
.nav__link.is-active { font-weight: 700; color: var(--ink); background: var(--tint); }

.icon-btn {
  width: 34px; height: 34px; border-radius: 999px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; position: relative;
  border: 0; padding: 0; flex: none;
}
.cart-count {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--peri); color: #FFFFFF;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* the cart + burger cluster only exists below the nav breakpoint */
.nav__actions { display: none; gap: 8px; }
.burger { display: none; flex-direction: column; gap: 4px; }
.burger span { width: 13px; height: 2px; border-radius: 2px; background: var(--ink-body); }

/* mobile menu, every row 48px */
.menu { display: none; background: var(--surface); padding: 4px 16px 16px; }
.menu.is-open { display: block; }
.menu__row {
  display: flex; align-items: center; min-height: 48px; padding: 12px 16px;
  border-radius: var(--radius-inner); font-size: 16px; font-weight: 700; color: var(--ink);
  margin-bottom: 8px; background: var(--surface-2);
}
.menu__row[data-cat="nerdy"]           { background: #E4F7EE; }
.menu__row[data-cat="moon-girl"]       { background: #F2EBFC; }
.menu__row[data-cat="cute-and-trendy"] { background: #FDEAEF; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .burger { display: flex; }
  .nav__row { padding: 12px 16px; }
  .nav__actions { display: flex; }
}
@media (min-width: 861px) { .burger, .menu { display: none !important; } }

/* ---------- pre-order badge ---------- */
.preorder {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.preorder__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--peri); flex: none; }
/* on photography */
.preorder--photo { background: #FFFFFF; color: var(--ink); box-shadow: var(--shadow-pill); }
/* on flat surfaces */
.preorder--tint { background: var(--peri-tint); color: var(--peri-deep); }
.preorder--tint .preorder__dot { background: var(--peri-deep); }
/* in the buy box */
.preorder--solid { background: var(--peri); color: #FFFFFF; }
.preorder--solid .preorder__dot { background: #FFFFFF; }
.preorder--sm { height: 24px; padding: 0 10px; font-size: 10px; gap: 5px; }
.preorder--sm .preorder__dot { width: 5px; height: 5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 22px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 700; transition: background 120ms ease;
}
.btn--primary { background: var(--peri); color: #FFFFFF; }
.btn--primary:hover { background: var(--peri-hover); }
.btn--quiet { background: var(--surface); color: var(--ink-body); }
.btn--quiet:hover { background: var(--surface-hover); }
.btn--lg { height: 54px; font-size: 16px; }
.btn--sm { height: 46px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink-body);
  font-size: 14px; font-weight: 600; border: 0; white-space: nowrap;
}
.chip:hover { background: var(--surface-hover); }
.chip.is-active { background: var(--accent); color: #FFFFFF; font-weight: 700; }
.chip--ink.is-active { background: var(--ink); }

.field {
  height: 48px; width: 100%; border: 0; border-radius: 999px; background: var(--surface-2);
  padding: 0 18px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
}
.field::placeholder { color: var(--ink-faint); }
.field--boxy { border-radius: var(--radius-inner); height: 50px; font-size: 15px; }
.field--area { height: 130px; padding: 14px 16px; resize: vertical; line-height: 1.5; }

/* ---------- generic blocks ---------- */
.card    { background: var(--surface); border-radius: var(--radius-card); padding: 24px; }
.panel   { background: var(--surface); border-radius: var(--radius-panel); padding: 20px; }
.note    { background: var(--peri-tint); border-radius: var(--radius-panel); padding: 20px; color: var(--peri-dark); }
.note h2, .note h3 { color: var(--peri-dark); margin: 0 0 8px; }

h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin: 0; }
h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.lede { font-size: 16px; line-height: 1.6; }
.stack   { display: flex; flex-direction: column; gap: 14px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.stack-l { display: flex; flex-direction: column; gap: 20px; }
.page-pad { padding: 24px 0 40px; }

.squiggle { display: block; color: var(--accent); }

/* ---------- category hero ---------- */
.hero { background: var(--tint); }
.hero__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 44px 40px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.hero__mark {
  width: 46px; height: 46px; border-radius: 999px; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.hero__title { font-size: 52px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); margin: 0; }
.hero__count { font-size: 14px; font-weight: 700; color: var(--accent); padding-bottom: 6px; white-space: nowrap; }

@media (max-width: 860px) {
  .hero__inner { padding: 26px 20px 22px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__title { font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; }
  .hero__mark { width: 42px; height: 42px; }
  .hero__count { padding-bottom: 0; font-size: 12px; }
}

/* ---------- filter bar ---------- */
.filters { background: var(--surface); }
.filters__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.filters__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filters__chips::-webkit-scrollbar { display: none; }
.filters__chips .chip { flex: none; }
@media (max-width: 860px) {
  .filters__inner { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  .filters__meta { display: flex; align-items: center; justify-content: space-between; }
  .filters__chips .chip { height: 34px; padding: 0 14px; font-size: 13px; }
}
.filters__count { font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* ---------- product grid ---------- */
.grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: 24px 40px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; } }

.pcard {
  background: var(--surface); border-radius: 22px; padding: 14px;
  display: flex; flex-direction: column; gap: 11px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-page); }
.pcard__shot {
  position: relative; border-radius: var(--radius-inner); background: var(--tint);
  overflow: hidden; aspect-ratio: 1 / 1;
}
.pcard__shot img { width: 100%; height: 100%; object-fit: cover; }
.pcard__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--photo-ph);
}
.pcard__badge { position: absolute; left: 10px; bottom: 10px; }
.pcard__name  { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pcard__price { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
@media (max-width: 860px) {
  .pcard { border-radius: var(--radius-tile); padding: 10px; gap: 9px; }
  .pcard__shot { border-radius: var(--radius-photo); }
  .pcard__badge { left: 8px; bottom: 8px; }
  .pcard__name  { font-size: 14px; }
  .pcard__price { font-size: 13px; }
}

/* ---------- empty state ---------- */
.empty {
  background: var(--surface); border-radius: var(--radius-card); padding: 28px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.empty h2 { font-size: 22px; }
.empty__form { width: 100%; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; max-width: 420px; }

/* ---------- product detail ---------- */
.crumbs { max-width: var(--maxw); margin: 0 auto; padding: 28px 40px 12px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.pdp { max-width: var(--maxw); margin: 0 auto; padding: 8px 40px 32px; display: flex; gap: 28px; align-items: flex-start; }
.pdp__thumbs { flex: 0 0 96px; display: flex; flex-direction: column; gap: 10px; }
.pdp__thumb {
  height: 96px; border-radius: var(--radius-inner); background: var(--tint);
  overflow: hidden; border: 2px solid transparent; padding: 0; width: 100%;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-active { border-color: var(--peri); }
.pdp__stage {
  flex: 1 1 0; position: relative; border-radius: var(--radius-card);
  background: var(--tint); overflow: hidden; aspect-ratio: 1 / 1; max-height: 500px;
}
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__badge { position: absolute; left: 18px; top: 18px; }
.pdp__zoom {
  position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 999px;
  background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pill); border: 0;
}
.pdp__buy {
  flex: 0 0 400px; background: var(--surface); border-radius: var(--radius-card);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.pdp__cat {
  display: inline-flex; align-self: flex-start; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 999px; background: var(--tint); color: var(--accent); font-size: 12px; font-weight: 700;
}
.pdp__title { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin: 0; }
.pdp__price { font-size: 24px; font-weight: 700; color: var(--ink); }
.pdp__ship { background: var(--surface-2); border-radius: var(--radius-soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.pdp__ship p { font-size: 13px; line-height: 1.45; color: var(--ink-body); }
.pdp__undertext { text-align: center; font-size: 12px; font-weight: 500; color: var(--ink-muted); }

.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size {
  width: 46px; height: 46px; border-radius: 999px; background: var(--surface-2); border: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--ink-body);
}
.size.is-active { background: var(--ink); color: #FFFFFF; }

.spec { display: flex; gap: 10px; }
.spec dt { flex: 0 0 92px; font-size: 13px; font-weight: 600; color: var(--ink-muted); margin: 0; }
.spec dd { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }

/* the two prose blocks live in the buy column on mobile and side by side on desktop */
.pdp__mobile-prose { display: none; }
@media (max-width: 980px) {
  .pdp__mobile-prose { display: block; }
  .pdp__prose { display: none; }
}

.pdp__prose { max-width: var(--maxw); margin: 0 auto; padding: 0 40px 32px; display: flex; gap: 20px; }
.pdp__prose > :first-child { flex: 1; }
.pdp__prose > :last-child  { flex: 0 0 400px; }
.related { max-width: var(--maxw); margin: 0 auto; padding: 0 40px 40px; }
.related h2 { font-size: 20px; margin-bottom: 14px; }
.related .grid { padding: 0; max-width: none; }

@media (max-width: 980px) {
  .crumbs { padding: 16px 16px 8px; }
  .pdp { flex-direction: column; padding: 0 0 8px; gap: 0; }
  .pdp__thumbs { display: none; }
  .pdp__stage { border-radius: 0; max-height: none; width: 100%; }
  .pdp__badge { left: 16px; top: 16px; }
  .pdp__buy { flex: 1 1 auto; width: 100%; border-radius: 0; padding: 20px 18px 22px; }
  .pdp__title { font-size: 26px; letter-spacing: -0.025em; line-height: 1.15; }
  .pdp__price { font-size: 22px; }
  .pdp__prose { flex-direction: column; padding: 0 16px 20px; }
  .pdp__prose > :last-child { flex: 1 1 auto; }
  .related { padding: 0 16px 24px; }
  .size { width: 48px; height: 48px; }
}

/* photo dots, mobile carousel */
.dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 6px; }
.dots span { width: 5px; height: 5px; border-radius: 999px; background: rgba(27,27,31,0.28); }
.dots span.is-active { width: 20px; background: var(--ink); }

/* ---------- disclosure (accordion) ---------- */
.disc { border-top: 1px solid var(--surface-2); }
.disc summary {
  padding: 15px 0; display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none;
}
.disc summary::-webkit-details-marker { display: none; }
.disc summary::after { content: "+"; font-size: 16px; font-weight: 600; color: var(--ink-muted); }
.disc[open] summary::after { content: "−"; }
.disc__body { padding-bottom: 14px; font-size: 14px; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq { background: var(--surface); border-radius: var(--radius-card); padding: 6px 20px; }
.faq .disc { border-top: 0; border-bottom: 1px solid var(--surface-2); }
.faq .disc:last-child { border-bottom: 0; }
.faq summary { padding: 16px 0; align-items: flex-start; gap: 12px; line-height: 1.35; }

/* ---------- numbered steps ---------- */
.steps { display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step__n {
  width: 26px; height: 26px; border-radius: 999px; background: var(--peri); color: #FFFFFF;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.step__b { font-size: 14px; line-height: 1.5; color: var(--ink-body); }

/* ---------- newsletter ---------- */
.signup { display: flex; flex-direction: column; gap: 10px; }
.signup__row { display: flex; gap: 8px; }
.signup__row .field { height: 44px; }
.signup__row .btn { height: 44px; padding: 0 20px; font-size: 14px; flex: none; }
.signup__msg { font-size: 13px; font-weight: 600; color: var(--peri-deep); min-height: 18px; }

/* ---------- footer ---------- */
.foot { background: var(--surface); }
.foot__inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px; }
.foot__cols { display: flex; gap: 32px; flex-wrap: wrap; }
.foot__brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.foot__col { flex: 0 0 160px; display: flex; flex-direction: column; gap: 9px; }
.foot__h { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.foot__col a { font-size: 14px; font-weight: 500; color: var(--ink-body); }
.foot__col a:hover { color: var(--peri-deep); }
.foot__base {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 18px; margin-top: 24px; border-top: 1px solid var(--surface-2);
  font-size: 12px; font-weight: 500; color: var(--ink-faint);
}
.foot__social { display: flex; gap: 8px; }
@media (max-width: 700px) {
  .foot__cols { flex-direction: column; gap: 24px; }
  .foot__brand { order: -1; }
}

/* dark mini-footer used on the narrow legal/utility pages */
.foot-dark { background: var(--ink); padding: 22px 20px; }
.foot-dark__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.foot-dark__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-dark__links a { font-size: 13px; font-weight: 500; color: var(--ink-ondark); }
.foot-dark__links a:hover { color: #FFFFFF; }
.foot-dark__legal { font-size: 11px; font-weight: 500; color: var(--ink-ondark-faint); }

/* ---------- narrow content pages ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 14px; }
.doc__head { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.doc .panel h3 { margin-bottom: 8px; }
.doc .panel p { font-size: 14px; line-height: 1.55; }
.pill-links { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.pill-links a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink-body);
}
.pill-links a:hover { background: var(--surface-hover); }

/* ---------- home ---------- */
.home-hero { padding: 48px 20px 32px; max-width: var(--maxw); margin: 0 auto; text-align: center; }
.home-hero h1 { font-size: 52px; letter-spacing: -0.035em; line-height: 1.02; }
.home-hero p { font-size: 17px; max-width: 560px; margin: 14px auto 0; }
@media (max-width: 700px) { .home-hero { padding: 32px 20px 24px; } .home-hero h1 { font-size: 36px; } }

/* Three shelves side by side. Point at one and it opens: it takes more of the row,
   the other two squeeze up, and its photo grows from a sliver to a proper picture. */
.shelves {
  --shelf-dur: 460ms;
  --shelf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  max-width: var(--maxw); margin: 0 auto; padding: 8px 20px 40px;
  display: flex; gap: 20px; align-items: stretch;
}
.shelf {
  flex: 1 1 0; min-width: 0;
  background: var(--tint); border-radius: var(--radius-page); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px; min-height: 260px;
  transition: flex-grow var(--shelf-dur) var(--shelf-ease),
              min-height var(--shelf-dur) var(--shelf-ease);
}
.shelf__mark { width: 46px; height: 46px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.shelf__title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.shelf__blurb { font-size: 14px; line-height: 1.45; color: var(--ink-body); }
.shelf__count { font-size: 12px; font-weight: 700; color: var(--accent); flex: none; }

/* The sliver absorbs whatever height the card has spare. That way when the row grows,
   every photo grows with its box instead of leaving tall empty panels beside the open one. */
.shelf__sliver {
  display: block; flex: 1 1 96px; min-height: 96px;
  border-radius: var(--radius-photo); overflow: hidden;
  background: rgba(255,255,255,0.55);
}
.shelf__sliver picture { display: block; width: 100%; height: 100%; }
.shelf__sliver img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.06); transform-origin: center;
  transition: transform var(--shelf-dur) var(--shelf-ease);
}

/* Only on pointer devices. On a touchscreen there is no hover, so the cards just sit
   at a comfortable size instead of needing a tap to reveal themselves. */
@media (hover: hover) and (min-width: 861px) {
  /* the whole row grows taller, so all three photos open together */
  .shelves:hover .shelf,
  .shelves:focus-within .shelf { flex-grow: 0.62; min-height: 440px; }
  /* and the one you point at takes the width off the other two */
  .shelf:hover,
  .shelf:focus-within { flex-grow: 2.6; }
  .shelf:hover .shelf__sliver img,
  .shelf:focus-within .shelf__sliver img { transform: scale(1); }
}

@media (max-width: 860px) {
  .shelves { flex-direction: column; padding: 8px 16px 32px; }
  .shelf { min-height: 0; }
  .shelf__sliver { flex: none; height: 180px; }
  .shelf__sliver img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf, .shelf__sliver img { transition: none; }
}

.home-section { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 40px; }
.home-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.home-section__head h2 { font-size: 24px; }
.home-section__head a { font-size: 14px; font-weight: 700; color: var(--peri-deep); }
.home-section .grid { padding: 0; max-width: none; }

.trust { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr; } }
.trust .card { display: flex; flex-direction: column; gap: 8px; }
.trust p { font-size: 14px; line-height: 1.55; }

/* ---------- utility pages ---------- */
.center-card {
  background: var(--surface); border-radius: var(--radius-card); padding: 36px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.center-card__mark { width: 56px; height: 56px; border-radius: 999px; background: var(--peri-tint); display: flex; align-items: center; justify-content: center; color: var(--peri-deep); }
.big404 { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.big404 span { color: var(--peri); }

.shelf-links { display: flex; flex-direction: column; gap: 10px; }
.shelf-link {
  border-radius: var(--radius-soft); padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.shelf-link small { font-size: 12px; font-weight: 700; color: var(--accent); }

.line-item { display: flex; gap: 12px; align-items: center; }
.line-item__shot { width: 56px; height: 56px; border-radius: var(--radius-photo); background: var(--tint); flex: none; overflow: hidden; }
.line-item__shot img { width: 100%; height: 100%; object-fit: cover; }
.line-item__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.line-item__ship { font-size: 12px; font-weight: 600; color: var(--peri-deep); }
.line-item__price { font-size: 14px; font-weight: 700; color: var(--ink); }

/* ---------- Snipcart theming ---------- */
/* maps the design's cart drawer onto Snipcart's markup */
#snipcart {
  --color-default: #1B1B1F;
  --color-alt: #6A6A74;
  --color-icon: #3A3A42;
  --bgColor-default: #F2F1F7;
  --bgColor-alt: #FFFFFF;
  --color-link: #6266D0;
  --color-link-hover: #4B4FB8;
  --borderColor-default: #F2F1F7;
  --bgColor-buttonPrimary: #8A8EE8;
  --bgColor-buttonPrimary-hover: #767AE0;
  --color-buttonPrimary: #FFFFFF;
  --borderColor-buttonPrimary: #8A8EE8;
  --borderRadius-l: 24px;
  --borderRadius-m: 18px;
  --borderRadius-s: 999px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
#snipcart .snipcart-cart--edit { border-radius: 24px 0 0 24px; }
#snipcart .snipcart-item-line { background: #FFFFFF; border-radius: 18px; }
#snipcart .snipcart-item-quantity__quantity { border-radius: 999px; background: #F2F1F7; }
#snipcart .snipcart-button-primary { border-radius: 999px; font-weight: 700; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- print ---------- */
@media print {
  .nav, .foot, .banner-slot, .menu { display: none !important; }
  body { background: #FFFFFF; }
}