/* ==========================================================
   A Fae Diary — brand styles
   Colours are taken from the A Fae Diary logo.
   ========================================================== */
:root {
  --espresso: #3A1E09;      /* brand brown – emblem & wordmark */
  --cocoa: #5A3A28;
  --copper: #B0694F;        /* logo hair lines */
  --copper-light: #D08A6C;
  --copper-dark: #8A4E39;
  --cream: #FBF7F2;         /* page background */
  --parchment: #F4ECE3;
  --blush: #EEDDD3;
  --ink: #2A1608;
  --muted: #7B665F;
  --line: #E6D8CC;
  --white: #FFFDFB;
  --sale: #9C3D2E;

  --font-display: "Cinzel", "Cinzel fb", "Times New Roman", serif;
  --font-serif: "Cormorant Garamond", "Cormorant fb", "Cormorant fb2", Georgia, serif;
  --font-sans: "Jost", "Jost fb", "Jost fb2", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px -18px rgba(31, 21, 19, .45);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }  /* nothing may make the page scroll sideways on phones */
body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; top: 8px; left: 8px; background: var(--espresso); color: var(--cream); padding: 8px 14px; z-index: 100;
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; margin: 0; color: var(--espresso); }
.eyebrow {
  font: 500 12px/1.2 var(--font-display);
  letter-spacing: .22em; text-transform: uppercase; color: var(--copper-dark);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow svg { width: 12px; height: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--espresso); color: var(--cream);
  font: 500 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--copper-dark); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--espresso); box-shadow: inset 0 0 0 1px var(--espresso); }
.btn--ghost:hover { background: var(--espresso); color: var(--cream); }
.btn--copper { background: var(--copper); }
.btn--copper:hover { background: var(--copper-dark); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link { color: var(--copper-dark); border-bottom: 1px solid currentColor; }
.link:hover { color: var(--copper); }

/* ---------- announcement ---------- */
.announce { background: var(--espresso); color: var(--parchment); text-align: center; overflow: hidden; height: 36px; }
.announce__track { display: grid; }
.announce__item {
  grid-area: 1 / 1; height: 36px; display: flex; align-items: center; justify-content: center;
  font: 400 12px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; padding: 0 16px;
}
.announce__item.is-on { opacity: 1; transform: none; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(251, 247, 242, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
.header__bar .header__menu { display: none; }
.brand { grid-column: 2; display: flex; align-items: center; }
/* Wordmark: spaced caps, as in the AFAEDIARY brand file (Liberation Serif → Tinos on the web) */
.wordmark { font: 400 28px/1 "Tinos", "Liberation Serif", "Times New Roman", serif; letter-spacing: .27em; margin-right: -.27em; color: var(--espresso); white-space: nowrap; }
.wordmark--sm { font-size: 19px; display: block; margin: 14px 0 10px; }
.header__actions { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
.icon-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--espresso); transition: background .2s; }
.icon-btn:hover { background: var(--parchment); }
.count {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--copper); color: var(--white);
  font: 500 11px/18px var(--font-sans); text-align: center;
}

.nav { display: flex; justify-content: center; gap: 4px; border-top: 1px solid var(--line); }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 4px; padding: 13px 16px;
  font: 500 12.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--cocoa);
}
.nav__link svg { width: 14px; height: 14px; transition: transform .2s; }
.nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--copper); }
.nav__item:hover .nav__link svg, .nav__item:focus-within .nav__link svg { transform: rotate(180deg); }
.nav__link.is-accent { color: var(--copper-dark); }
.mega {
  position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 520px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 15px; color: var(--cocoa); }
.mega a:hover { background: var(--parchment); color: var(--copper-dark); }
.mega a small { color: var(--muted); font-size: 12px; }
.mega__all { grid-column: 1 / -1; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.mega__all a { font: 500 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--copper-dark); }

/* ---------- search ---------- */
.search { position: fixed; inset: 0 0 auto 0; z-index: 75; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: 85vh; overflow: auto; }
.search__box { display: flex; align-items: center; gap: 12px; height: 84px; }
.search__box > svg { color: var(--copper); }
.search__box input { flex: 1; border: 0; background: none; font: 500 26px/1.2 var(--font-serif); color: var(--espresso); outline: none; min-width: 0; }
.search__results { padding-bottom: 24px; }
.search__results .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.search__more { margin-top: 18px; text-align: center; }

/* ---------- sections ---------- */
.section { padding: 72px 0; }
.section--tint { background: var(--parchment); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.section__head h2 { font-size: clamp(30px, 4vw, 42px); margin-top: 8px; }
.section__head p { color: var(--muted); margin: 6px 0 0; max-width: 520px; }
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--copper); margin: 0 auto; }
.divider::before, .divider::after { content: ""; height: 1px; width: 64px; background: currentColor; opacity: .5; }
.divider svg { width: 14px; height: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, var(--blush) 0%, transparent 55%), var(--cream); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 76px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; margin: 18px 0 20px; letter-spacing: -.01em; }
.hero h1 em { font-style: italic; color: var(--copper); }
.hero p { font-size: 18px; color: var(--muted); max-width: 520px; margin: 0 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__deal { font-size: 15px !important; color: var(--ink, #3A1E09) !important; font-weight: 500; letter-spacing: .02em; margin: -18px 0 26px !important; }
.page-head .page-head__deal { margin-top: 10px; color: var(--ink, #3A1E09); font-weight: 500; font-size: 15px; }
/* a Meta ad's own page (#/shop?tag=ad-…): only its pieces, nothing between the heading and the photos */
.shop.shop--bare { display: block; }
.shop--bare .filters, .shop--bare .toolbar, .shop--bare .fandom-chips, .shop--bare .chips { display: none !important; }
.hero__art { position: relative; height: 520px; }
.hero__mark { position: absolute; inset: 50% auto auto 50%; width: 118%; translate: -50% -50%; opacity: .07; pointer-events: none; }
.arch {
  position: absolute; overflow: hidden; border-radius: 999px 999px 18px 18px; background: var(--parchment);
  box-shadow: 0 30px 50px -30px rgba(31, 21, 19, .55); border: 6px solid var(--white);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--1 { width: 46%; height: 78%; left: 27%; top: 4%; z-index: 2; }
.arch--2 { width: 34%; height: 58%; left: 0; top: 30%; }
.arch--3 { width: 34%; height: 58%; right: 0; top: 22%; }
.sparkle { position: absolute; color: var(--copper-light); animation: twinkle 3.2s ease-in-out infinite; }
.sparkle--a { top: 4%; left: 12%; width: 18px; height: 18px; }
.sparkle--b { bottom: 8%; right: 10%; width: 14px; height: 14px; animation-delay: 1.1s; }
.sparkle--c { top: 18%; right: 4%; width: 10px; height: 10px; animation-delay: 2s; }
@keyframes twinkle { 50% { opacity: .25; transform: scale(.7); } }

/* ---------- promises ---------- */
.promises { border-block: 1px solid var(--line); background: var(--white); }
.promises__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.promise { display: flex; gap: 14px; align-items: center; padding: 22px 18px; }
.promise + .promise { border-left: 1px solid var(--line); }
.promise svg { width: 30px; height: 30px; color: var(--copper); }
.promise b { display: block; font: 500 12.5px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--espresso); }
.promise span { font-size: 14px; color: var(--muted); }

/* ---------- genre cards ---------- */
.genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 20px; }
.genre-card { text-align: center; }
.genre-card__img { aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; background: var(--parchment); border: 1px solid var(--line); position: relative; }
.genre-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.genre-card:hover img { transform: scale(1.06); }
.genre-card h3 { font-size: 22px; margin-top: 14px; }
.genre-card p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- fandom row ---------- */
.fandoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 24px 16px; }
.fandom { text-align: center; }
.fandom__img { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--white); outline: 1px solid var(--copper-light); outline-offset: 4px; margin: 6px; background: var(--parchment); }
.fandom__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fandom:hover img { transform: scale(1.08); }
.fandom b { display: block; margin-top: 12px; font: 500 12px/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cocoa); }

/* ---------- category tiles ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.cat-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--espresso); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .6s, opacity .3s; }
.cat-tile:hover img { transform: scale(1.05); opacity: .6; }
.cat-tile__label { position: absolute; inset: auto 0 0 0; padding: 20px; color: var(--cream); background: linear-gradient(transparent, rgba(31, 21, 19, .85)); }
.cat-tile__label h3 { color: var(--cream); font-size: 26px; }
.cat-tile__label span { font: 400 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blush); }

/* ---------- product grid & cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 30px 20px; }
.grid > *, .genres > * { min-width: 0; }
.card__media img { max-width: 100%; }
.card__name { overflow-wrap: anywhere; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--copper-light) transparent; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((100% - 60px) / 4); } }

.shop > div { min-width: 0; }  /* keeps the scrolling chip row from widening the product grid */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } }
.fandom-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--copper-light) transparent; }
.fchip { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: 500 11.5px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cocoa); white-space: nowrap; }
.fchip:hover { border-color: var(--copper-light); color: var(--copper-dark); }
.fchip.is-on { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.card { position: relative; display: flex; flex-direction: column; }
.card__media { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--parchment); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform .6s; }
.card__media img + img { opacity: 0; }
.card:hover .card__media img + img { opacity: 1; }
.card:hover .card__media img:only-child { transform: scale(1.04); }
.badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; align-items: flex-start; }
.badge { padding: 5px 10px; border-radius: 999px; font: 500 10.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; background: var(--white); color: var(--espresso); }
.badge--new { background: var(--espresso); color: var(--cream); }
.badge--best { background: var(--copper-dark); color: var(--white); }
.badge--sale { background: var(--sale); color: var(--white); }
.badge--out { background: var(--muted); color: var(--white); }
.card__wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 251, .9); color: var(--espresso); transition: color .2s, transform .2s; }
.card__wish:hover { color: var(--copper); transform: scale(1.08); }
.card__wish.is-on { color: var(--copper); }
.card__wish svg { width: 19px; height: 19px; }
.card__quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; padding: 12px; border-radius: 999px; display: block; text-align: center;
  background: var(--espresso); color: var(--cream); font: 500 11.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: .25s;
}
.card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
.card__quick:hover { background: var(--copper-dark); }
.card__body { padding: 14px 2px 0; }
.card__genre { font: 500 10.5px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--copper-dark); }
.card__name { font: 600 19px/1.2 var(--font-serif); color: var(--espresso); margin: 6px 0 6px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.4em; }
.card__genre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.price { font: 500 15px/1 var(--font-sans); color: var(--cocoa); display: flex; gap: 8px; align-items: baseline; }
.price s { color: var(--muted); font-size: 13px; }
.price .is-sale { color: var(--sale); }

/* ---------- page head / breadcrumbs ---------- */
.page-head { padding: 44px 0 28px; text-align: center; background: linear-gradient(var(--parchment), var(--cream)); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(34px, 5vw, 54px); margin: 10px 0 8px; }
.page-head p { color: var(--muted); margin: 0 auto; max-width: 620px; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.crumbs a:hover { color: var(--copper); }

/* ---------- shop ---------- */
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 36px 0 80px; }
.filters { position: sticky; top: 140px; align-self: start; max-height: calc(100vh - 160px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.filters__close { display: none; }
.fgroup { border-bottom: 1px solid var(--line); padding: 16px 0; }
.fgroup summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font: 500 12.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--espresso); }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary svg { width: 16px; height: 16px; transition: transform .2s; }
.fgroup[open] summary svg { transform: rotate(180deg); }
.fgroup ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-size: 14.5px; color: var(--cocoa); }
.fopt:hover { background: var(--parchment); }
.fopt input { accent-color: var(--copper); width: 16px; height: 16px; margin: 0; }
.fopt small { margin-left: auto; color: var(--muted); font-size: 12px; }
.fgroup .more { margin-top: 6px; font-size: 13px; color: var(--copper-dark); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.toolbar__count { color: var(--muted); font-size: 14px; }
.toolbar__right { display: flex; gap: 10px; align-items: center; }
.select { appearance: none; border: 1px solid var(--line); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23B0694F' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; padding: 10px 36px 10px 14px; border-radius: 999px; font-size: 14px; }
.filter-toggle { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--parchment); border: 1px solid var(--line); font-size: 13px; color: var(--cocoa); }
.chip svg { width: 14px; height: 14px; }
.chip:hover { border-color: var(--copper-light); color: var(--copper-dark); }
.chip--clear { background: none; text-decoration: underline; border: 0; }
.more-wrap { text-align: center; margin-top: 40px; }
.more-wrap p { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty h3 { font-size: 28px; margin-bottom: 8px; }

/* ---------- product page ---------- */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 36px 0 72px; }
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-self: start; position: sticky; top: 140px; }
.gallery__main { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--parchment); grid-column: 2; grid-row: 1; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.gallery__thumbs button { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); opacity: .7; transition: .2s; }
.gallery__thumbs button.is-on, .gallery__thumbs button:hover { opacity: 1; border-color: var(--copper); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery--single { grid-template-columns: 1fr; }
.gallery--single .gallery__main { grid-column: 1; }
.pdp__info .crumbs { justify-content: flex-start; margin-bottom: 14px; }
.pdp h1 { font-size: clamp(32px, 4vw, 46px); margin: 10px 0 14px; }
.pdp .price { font-size: 22px; margin-bottom: 20px; }
.pdp .price s { font-size: 17px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tag { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--copper-light); color: var(--copper-dark); font: 500 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.tag:hover { background: var(--copper); color: var(--white); border-color: var(--copper); }
.pdp__desc { color: var(--cocoa); font-size: 16.5px; margin: 0 0 24px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font: 500 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--espresso); }
.field textarea { border: 1px solid var(--line); background: var(--white); border-radius: 12px; padding: 12px 14px; min-height: 80px; resize: vertical; }
.field textarea:focus { outline: none; border-color: var(--copper); }
.buy { display: flex; gap: 12px; margin-bottom: 14px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.qty button { width: 42px; height: 46px; font-size: 18px; color: var(--cocoa); }
.qty span { min-width: 26px; text-align: center; }
.buy .btn { flex: 1; }
.wish-btn { width: 50px; height: 50px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--white); color: var(--espresso); }
.wish-btn.is-on { color: var(--copper); border-color: var(--copper-light); }
.acc { border-top: 1px solid var(--line); margin-top: 26px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; font: 500 12.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary svg { width: 16px; height: 16px; transition: transform .2s; }
.acc details[open] summary svg { transform: rotate(180deg); }
.acc p, .acc ol { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.acc ol { padding-left: 20px; }

/* ---------- story ---------- */
.story { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.story__logo { max-width: 380px; justify-self: center; width: 100%; }
.story h2 { font-size: clamp(32px, 4vw, 44px); margin: 10px 0 18px; }
.story p { color: var(--cocoa); font-size: 17px; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.steps li { counter-increment: s; display: flex; gap: 14px; align-items: flex-start; }
.steps li::before { content: counter(s); flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--copper); color: var(--white); display: grid; place-items: center; font: 500 14px/1 var(--font-display); }

/* ---------- footer ---------- */
.footer { background: var(--parchment); border-top: 1px solid var(--line); margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 36px; padding: 60px 0 36px; }
.footer__brand img { width: 88px; height: auto; }
.contact-list a { display: inline-flex; align-items: center; gap: 10px; }
.contact-list svg { width: 20px; height: 20px; color: var(--copper); }
.contact-list small { display: block; color: var(--muted); font-size: 12px; }
.footer__delivery { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; padding: 16px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--cocoa); }
.footer__delivery span { display: inline-flex; align-items: center; gap: 8px; }
.footer__delivery svg { width: 20px; height: 20px; color: var(--copper); }
.footer__delivery a { color: var(--copper-dark); text-decoration: underline; }
.delivery-note { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--parchment); border: 1px solid var(--line); font-size: 14.5px; color: var(--cocoa); }
.delivery-note svg { width: 24px; height: 24px; color: var(--copper); margin-top: 1px; }
.delivery-note a { color: var(--copper-dark); text-decoration: underline; }
.free-ship { font-size: 13.5px; color: var(--cocoa); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.free-ship svg { width: 22px; height: 22px; color: var(--copper); }
.free-ship__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--parchment); overflow: hidden; }
.free-ship__bar span { display: block; height: 100%; background: var(--copper); border-radius: 3px; }
.free-ship.is-done { color: var(--copper-dark); font-weight: 500; }
.drawer .delivery-note { margin: 0; font-size: 13px; padding: 10px 12px; }
.info { max-width: 760px; margin: 0 auto; }
.info .steps li { font-size: 17px; }
.info__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.info__points li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.info__points svg { width: 24px; height: 24px; color: var(--copper); flex: none; margin-top: 2px; }
.returns { margin-top: 36px; padding: 22px 22px 20px; border-radius: 16px; background: var(--parchment); border: 1px solid var(--copper-light); }
.returns h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; margin-bottom: 10px; }
.returns h2 svg { width: 26px; height: 26px; color: var(--copper); }
.returns p { margin: 0; font-size: 16.5px; color: var(--cocoa); }
.info__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.footer__brand p { color: var(--muted); font-size: 14.5px; max-width: 300px; }
.footer h2 { margin-top: 0; }
.footer h2, .footer h4 { font: 500 12.5px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14.5px; color: var(--cocoa); }
.footer ul a { display: inline-block; padding: 5px 0; min-height: 30px; }  /* easy to tap on phones */
.footer ul a:hover { color: var(--copper); }
.socials { display: flex; gap: 6px; margin-top: 10px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--espresso); background: var(--white); }
.socials a:hover { color: var(--copper); border-color: var(--copper-light); }
.footer__base { border-top: 1px solid var(--line); padding: 20px 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- drawers ---------- */
.scrim { position: fixed; inset: 0; background: rgba(31, 21, 19, .45); z-index: 70; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 80; background: var(--cream);
  display: flex; flex-direction: column; transform: translateX(105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); box-shadow: -20px 0 40px -30px rgba(0, 0, 0, .5);
}
.drawer--left { right: auto; left: 0; transform: translateX(-105%); }
.drawer:not(.is-shown) { display: none; }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font-size: 26px; }
.drawer__body { flex: 1; overflow: auto; padding: 8px 20px; }
.drawer__foot { padding: 18px 20px 22px; border-top: 1px solid var(--line); background: var(--white); display: grid; gap: 10px; }
.drawer__foot .row { display: flex; justify-content: space-between; font-size: 17px; font-weight: 500; }
.drawer__foot small { color: var(--muted); font-size: 12.5px; }
.line-item { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line-item img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: var(--parchment); }
.line-item h5 { margin: 0 0 4px; font: 600 17px/1.2 var(--font-serif); color: var(--espresso); }
.line-item .note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 0 0 8px; }
.line-item__row { display: flex; justify-content: space-between; align-items: center; }
.line-item .qty button { width: 32px; height: 34px; font-size: 16px; }
.line-item .remove { font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.mnav a, .mnav summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); font: 500 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav details a { font: 400 15px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; padding: 11px 12px; }
.mnav svg { width: 16px; height: 16px; }

.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 90; background: var(--espresso); color: var(--cream); padding: 12px 20px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; }
.toast a { color: var(--copper-light); text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; padding-top: 40px; }
  .hero__art { height: 420px; max-width: 560px; width: 100%; margin: 0 auto; }
  .promises__grid { grid-template-columns: repeat(2, 1fr); }
  .promise:nth-child(3) { border-left: 0; }
  .promise:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gallery { position: static; }
  .story { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .header__bar .header__menu { display: grid; }
  .header__bar { height: 72px; }
  .wordmark { font-size: 20px; letter-spacing: .22em; margin-right: -.22em; }
  .shop { grid-template-columns: 1fr; padding-top: 20px; }
  .filters { position: fixed; inset: 0 auto 0 0; top: 0; width: min(340px, 88%); max-height: none; z-index: 80; background: var(--cream); padding: 16px 20px; transform: translateX(-105%); transition: transform .3s; box-shadow: var(--shadow); }
  .filters:not(.is-shown) { display: none; }
  .filters.is-open { transform: none; }
  .filters__close { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
  .filters__close h3, .filters__close h2 { font-size: 24px; }
  .filter-toggle { display: inline-flex; }
  .filters { top: 0; }
  .card__quick { opacity: 1; transform: none; position: static; margin-top: 10px; background: var(--parchment); color: var(--espresso); padding: 10px; }
  .card__media .card__quick { display: none; }
}
@media (max-width: 560px) {
  .section { padding: 52px 0; }
  .section__head { flex-direction: row; align-items: baseline; gap: 12px; }
  .section__head .link { flex: none; font-size: 14px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .rail { grid-auto-columns: 62%; }
  .card__name { font-size: 16.5px; }
  .badges { top: 8px; left: 8px; max-width: calc(100% - 56px); }
  .badge { font-size: 9.5px; padding: 4px 8px; letter-spacing: .08em; }
  .card__wish { width: 34px; height: 34px; }
  .genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .genre-card h3 { font-size: 19px; }
  .fandoms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .fandom b { font-size: 10.5px; }
  .promises__grid { grid-template-columns: 1fr; }
  .promise, .promise + .promise { border-left: 0; border-top: 1px solid var(--line); }
  .promise:first-child { border-top: 0; }
  .hero__art { height: 330px; }
  .hero p { font-size: 16.5px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__main { grid-column: 1; }
  .gallery__thumbs { grid-row: 2; flex-direction: row; overflow-x: auto; }
  .gallery__thumbs button { width: 64px; flex: none; }
  .search__box input { font-size: 20px; }
  .announce__item { font-size: 11px; letter-spacing: .06em; line-height: 1.25; }
  .wordmark { font-size: 17px; letter-spacing: .18em; margin-right: -.18em; }
  .header__actions { gap: 0; }
  .header .icon-btn { width: 38px; height: 38px; }
  .header__actions a[href="#/wishlist"] { display: none; }  /* wishlist stays in the menu */
  .footer__delivery { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- all phones ---------- */
@media (max-width: 860px) {
  input, select, textarea, .select { font-size: 16px !important; }
}
.drawer__foot { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.drawer, .filters { padding-top: env(safe-area-inset-top); }
.toast { bottom: max(24px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
a, button { -webkit-tap-highlight-color: transparent; }
img { height: auto; }
.card__media img, .genre-card__img img, .arch img, .cat-tile img, .gallery__main img { height: 100%; }
@media (max-width: 360px) {
  .wrap { width: calc(100% - 24px); }
  .grid { gap: 20px 10px; }
  .card__name { font-size: 15px; }
  .price { font-size: 14px; }
  .hero h1 { font-size: 34px; }
  .btn { padding: 13px 20px; letter-spacing: .1em; }
  .section__head h2 { font-size: 28px; }
  .wordmark { font-size: 15px; letter-spacing: .14em; margin-right: -.14em; }
  .announce__item { font-size: 11px; letter-spacing: .03em; padding: 0 10px; }
}

.paint-note { display: flex; gap: 12px; align-items: flex-start; margin: -8px 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--parchment); border: 1px solid var(--copper-light); font-size: 14.5px; color: var(--cocoa); }
.paint-note svg { width: 24px; height: 24px; color: var(--copper); flex: none; margin-top: 1px; }
.paint-note b { color: var(--espresso); }

.price { flex-wrap: wrap; }
.price__set { flex-basis: 100%; margin-top: 2px; line-height: 1.3; font-size: 12px; font-weight: 400; color: var(--muted); }
.variant { display: grid; gap: 8px; margin: 4px 0 18px; }
.variant label { display: block; cursor: pointer; }
.variant input { position: absolute; opacity: 0; pointer-events: none; }
.variant span { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-size: 15px; color: var(--cocoa); }
.variant b { color: var(--espresso); white-space: nowrap; }
.variant input:checked + span { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper); }
.variant input:focus-visible + span { outline: 2px solid var(--copper); outline-offset: 2px; }
.pdp__size { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14.5px; color: var(--cocoa); }
.pdp__size svg { width: 16px; height: 16px; color: var(--copper); }

/* ---------- painting: before/after slider + kit ---------- */
.ba { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.ba h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 10px 0 16px; }
.ba p { color: var(--cocoa); font-size: 16.5px; }
.ba__frame { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--parchment); user-select: none; }
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__white { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba__frame::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--x); z-index: 2; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--espresso); box-shadow: var(--shadow); pointer-events: none; }
.ba__tag { position: absolute; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 8px; background: var(--white); font: 500 12px/1 var(--font-display); letter-spacing: .08em; color: var(--espresso); }
.ba__tag--l { left: 14px; } .ba__tag--r { right: 14px; }
.ba__frame input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.kit { text-align: center; }
.kit h2 { margin-bottom: 32px; }
.kit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 28px; justify-content: center; }
.kit__item { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }
.kit__img { aspect-ratio: 1; margin-bottom: 12px; border-radius: 16px; overflow: hidden; background: var(--parchment); display: grid; place-items: center; }
.kit__img img { width: 100%; height: 100%; object-fit: cover; }
.kit__img svg { width: 78%; height: 78%; }
.kit__item span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 760px) {
  .ba { grid-template-columns: 1fr; gap: 28px; }
  .kit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kit__item { padding: 10px; border-radius: 16px; font-size: 13px; }
  .kit__item span { font-size: 12px; }
}

/* ---------- brand name, language switch ---------- */
.wordmark { font-family: var(--font-serif); font-size: 32px; font-weight: 600; letter-spacing: .01em; margin-right: 0; }
.wordmark--sm { font-size: 22px; }
.header__actions { align-items: center; }
.lang-btn { min-width: 38px; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--espresso); font: 500 12px/1 var(--font-display); letter-spacing: .1em; cursor: pointer; }
.lang-btn:hover { border-color: var(--copper-light); color: var(--copper-dark); }

/* ---------- card: size + light for bigger pieces ---------- */
.card__meta { margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.pdp__lead { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 14.5px; color: var(--cocoa); }
.pdp__lead svg { width: 18px; height: 18px; color: var(--copper); flex: none; }

/* ---------- sticky WhatsApp order bar (product pages) ---------- */
.wa-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; justify-content: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 247, 242, .96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
.wa-sticky .btn { width: 100%; max-width: 460px; justify-content: center; }
.wa-sticky { transition: transform .25s, visibility .25s; }
.wa-sticky.is-off { transform: translateY(110%); visibility: hidden; }
.btn--wa { background: #177a41; }  /* WhatsApp green, dark enough for 4.5:1 with cream text */
.btn--wa:hover { background: #115e32; }
body.has-sticky { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
body.has-sticky .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- footer social ---------- */
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding: 18px 0; border-top: 1px solid var(--line); }
.footer__social a { display: inline-flex; align-items: center; gap: 8px; color: var(--copper-dark); font-weight: 500; }
.footer__social svg { width: 20px; height: 20px; }

@media (max-width: 760px) {
  .wordmark { font-size: 24px; letter-spacing: .03em; margin-right: 0; }
  /* hero: pictures first and smaller, so they show on the first screen */
  .hero__inner { padding: 18px 0 40px; gap: 18px; }
  .hero__art { order: -1; height: 230px; max-width: 360px; }
  .arch--1 { width: 40%; height: 92%; left: 30%; top: 2%; }
  .arch--2 { width: 30%; height: 70%; left: 2%; top: 26%; }
  .arch--3 { width: 30%; height: 70%; right: 2%; top: 20%; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 21px; }
  .hero__art { height: 200px; }
  .lang-btn { min-width: 32px; padding: 0 6px; }
}

.price__ask { font-style: italic; color: var(--copper-dark); }

/* phones: no text under 11px, tap targets at least ~36px high (Google mobile-friendliness) */
@media (max-width: 760px) {
  .badge { font-size: 11px; padding: 5px 9px; }
  .card__genre, .fandom b { font-size: 11.5px; }
  .tag, .fchip { font-size: 12px; min-height: 36px; display: inline-flex; align-items: center; }
  .chip { min-height: 36px; }
  .fopt { min-height: 36px; }
  .line-item .remove { padding: 8px 0; }
}

/* French visitors: wait for the translation instead of seeing the English pre-rendered page (boot.js) */
.fr-wait #app, .fr-wait .nav, .fr-wait .footer, .fr-wait .announce__track { visibility: hidden; }
.js .seo-static { display: none; }
/* until app.js has drawn the page, keep its space so the footer doesn't jump down */
.js:not(.ready) #app { min-height: 100vh; }
/* read by screen readers only */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.filters__title { margin: 0; }
.privacy { max-width: 760px; }
.privacy h2 { font-size: 26px; margin: 28px 0 10px; }
.privacy h2:first-child { margin-top: 0; }
.privacy p { color: var(--cocoa); font-size: 16.5px; margin: 0 0 12px; }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h2 { font-size: 21px; margin: 0; }
.faq summary svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0 0 18px; color: var(--cocoa); font-size: 16.5px; }
.faq .info__cta { margin-top: 28px; }
/* share button (product page) */
.share-btn svg { width: 20px; height: 20px; }
/* cookie banner */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95; max-width: 560px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 12px; }
.consent p { margin: 0; font-size: 14.5px; color: var(--cocoa); }
.consent div { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.consent .btn { padding: 11px 22px; }
.has-sticky .consent { bottom: 86px; }
.kit__mix { max-width: 640px; margin: 28px auto 0; color: var(--muted); }

/* wishlist: order everything on WhatsApp */
.wish-order { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; }
.grid + .wish-order { margin: 28px 0 0; }
.wish-order small { color: var(--muted); font-size: 13.5px; max-width: 420px; }
@media (max-width: 560px) { .wish-order .btn { width: 100%; } }
/* Phones: the two hero buttons are always stacked full width. Before, they sat right at the edge of fitting
   side by side and jumped to two rows when the brand font arrived (Google "layout shift", 13 Nov 2026). */
@media (max-width: 560px) { .hero__cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }