/* Luxe by CK — storefront and admin.
   Emerald, ivory and gold (brand tokens in :root). Cormorant for display, Jost for reading.
   Mobile first: most customers will arrive from Instagram or WhatsApp on a phone. */

:root {
  /* ---- THE BRAND. Change a palette here and nowhere else. ----
     Emerald & Gold, chosen 25 Sep 2026. Every text/background pair below
     passes WCAG AA (4.5:1) - check any new colour before swapping it in. */
  --ink: #0a2a20;          /* forest: text on ivory, footer            */
  --espresso: #0f3d2e;     /* emerald: hero, dark sections, buttons    */
  --cocoa: #2c4a3e;        /* secondary text                            */
  --cream: #f7f3e9;        /* ivory: page background                    */
  --sand: #ece6d6;
  --paper: #fffdf8;        /* cards, panels                             */
  --gold: #8a6a2a;         /* gold TEXT on ivory, 4.5:1                 */
  --gold-soft: #c9a45c;    /* gold on emerald, 5.2:1                    */
  --blush: #f3d9d0;        /* soft accent: sale / best-seller badges    */
  --blush-ink: #6f2f22;
  --on-dark: #f7f3e9;
  --on-dark-muted: #b9c9bf;
  --dark-line: #1d4a3a;
  --rose: #b9786a;
  --muted: #56655d;
  --line: #e2dccb;
  --ok: #2f6b4f;
  --warn: #9a5b12;
  --bad: #a3362c;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(10, 42, 32, .06), 0 8px 24px rgba(10, 42, 32, .06);
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 15px/1.55 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- announcement + header ---------- */
.announce { background: var(--espresso); color: var(--gold-soft); text-align: center; font-size: 12.5px; letter-spacing: .06em; padding: 8px 16px; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(247, 243, 233, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.logo b { font: 600 26px/1 var(--display); letter-spacing: .14em; }
.logo i { font: italic 500 17px/1 var(--display); color: var(--gold); }
.nav { display: none; gap: 22px; margin-left: 18px; }
.nav a { text-decoration: none; font-size: 13.5px; letter-spacing: .04em; color: var(--cocoa); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold-soft); }
.head-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; text-decoration: none; font-size: 13.5px; }
.icon-btn:hover { background: var(--sand); }
.icon-btn svg { width: 20px; height: 20px; }
.bag-count { background: var(--ink); color: var(--cream); font-size: 11px; font-weight: 600; min-width: 19px; height: 19px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 5px; }
.menu-toggle { display: inline-flex; }
.mobile-nav { display: none; border-top: 1px solid var(--line); padding: 8px 16px 14px; }
.mobile-nav a { display: block; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav.open { display: block; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .menu-toggle { display: none; }
}

/* ---------- buttons, forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); padding: 13px 22px; border-radius: 999px; font-weight: 500; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:hover { background: var(--espresso); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--sand); }
.btn.gold { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.btn.block { width: 100%; }
.btn.small { padding: 8px 14px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
label { display: block; font-size: 13px; font-weight: 500; margin: 14px 0 6px; color: var(--cocoa); }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 164, 92, .35); }
textarea { min-height: 80px; resize: vertical; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.alert { border-radius: 12px; padding: 12px 14px; margin: 14px 0; font-size: 14px; }
.alert.bad { background: #f6e1dc; color: #6f231b; border: 1px solid #ecc2b9; }
.alert.ok { background: #e3efe7; color: #1f4a36; border: 1px solid #c3dccb; }
.alert.info { background: var(--sand); border: 1px solid var(--line); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, #1a5a44 0%, var(--espresso) 45%, var(--ink) 100%); color: var(--cream); }
.hero .wrap { display: grid; gap: 28px; padding-top: 56px; padding-bottom: 56px; align-items: center; }
.hero h1 { font: 500 clamp(40px, 8vw, 72px)/1.02 var(--display); margin: 0 0 18px; letter-spacing: -.01em; }
.hero h1 em { color: var(--gold-soft); font-style: italic; }
.hero p { color: var(--on-dark-muted); max-width: 34em; font-size: 16px; margin: 0 0 26px; }
.hero .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hero .btn.ghost { background: transparent; color: var(--cream); border-color: rgba(247, 243, 233, .5); }
.hero-art { position: relative; aspect-ratio: 4/5; border-radius: 200px 200px 18px 18px; overflow: hidden; border: 1px solid rgba(201, 164, 92, .35); max-width: 260px; justify-self: center; width: 100%; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); animation: hero-in .8s ease both; }
@media (min-width: 860px) { .hero-art { max-width: 420px; } }
.hero-art img, .hero-art svg { width: 100%; height: 100%; object-fit: cover; }
.eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; display: block; }
.hero-rating { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--on-dark-muted); margin: -10px 0 22px; }
.hero-rating .stars { color: var(--gold-soft); letter-spacing: 1px; }
@media (min-width: 860px) { .hero .wrap { grid-template-columns: 1.1fr .9fr; padding-top: 80px; padding-bottom: 80px; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }

.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust ul { list-style: none; margin: 0; padding: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; font-size: 13px; color: var(--cocoa); font-weight: 500; }
.trust li { display: flex; gap: 10px; align-items: center; }
.trust li svg { width: 19px; height: 19px; flex: none; color: var(--gold); }
@media (min-width: 760px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }

/* ---------- sections ---------- */
section.block { padding: 48px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head h2, h1.page-title { font: 500 clamp(30px, 5vw, 42px)/1.05 var(--display); margin: 0; }
.section-head a { font-size: 13.5px; }
.page-title { margin: 28px 0 6px !important; }
.lede { color: var(--muted); margin: 0 0 20px; }

.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat { position: relative; display: block; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--cream); background: var(--espresso); }
.cat svg, .cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cat:hover svg, .cat:hover img { transform: scale(1.04); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); }
.cat span { position: absolute; z-index: 1; left: 14px; bottom: 14px; right: 14px; font: 500 24px/1.1 var(--display); text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.cat small { display: block; font: 12px var(--sans); letter-spacing: .08em; opacity: .85; margin-top: 4px; }
@media (min-width: 760px) { .cats { grid-template-columns: repeat(var(--n, 4), 1fr); } }

/* ---------- testimonials ---------- */
.testi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.testi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.testi .stars { color: var(--gold); letter-spacing: 1px; margin: 10px 0 8px; display: block; }
.testi p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cocoa); }
.testi img, .testi-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.testi-avatar { background: var(--espresso); color: var(--gold-soft); font: 600 16px var(--display); display: flex; align-items: center; justify-content: center; }
.testi-who { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.testi-who b { font-size: 13.5px; }
.testi-who a { color: var(--muted); text-decoration: none; }
.testi-who a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; } }
@media (min-width: 1080px) { .grid.four { grid-template-columns: repeat(4, 1fr); } }
.card { text-decoration: none; display: block; }
.card .ph { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.card .ph img, .card .ph svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .ph img, .card:hover .ph svg { transform: scale(1.03); }
.card h3 { font: 500 19px/1.2 var(--display); margin: 12px 0 3px; }
.card .meta { font-size: 12.5px; color: var(--muted); }
.card .price { font-weight: 600; margin-top: 4px; font-size: 14.5px; }
.card .price s { color: var(--muted); font-weight: 400; margin-left: 6px; }
.badge { position: absolute; left: 10px; top: 10px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.badge.dark { background: var(--ink); color: var(--cream); }
.badge.sale, .badge.best { background: var(--blush); color: var(--blush-ink); }
.badge.low { background: var(--warn); color: var(--cream); }

/* ---------- shop filters ---------- */
.shop { display: grid; gap: 24px; padding-bottom: 60px; }
@media (min-width: 900px) { .shop { grid-template-columns: 230px 1fr; } }
.filters { font-size: 14px; }
.filters h4 { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--paper); font-size: 13px; }
.chip[aria-current] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.toolbar select { width: auto; padding: 8px 12px; }
.empty { text-align: center; padding: 60px 16px; color: var(--muted); }

/* ---------- product page ---------- */
.pdp { display: grid; gap: 28px; padding: 24px 0 60px; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.gallery .main { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.gallery .main img, .gallery .main svg { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.thumbs button { flex: none; width: 68px; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--sand); }
.thumbs button[aria-current] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { font-size: 12.5px; color: var(--muted); margin: 18px 0 0; }
.crumbs a { text-decoration: none; }
.pdp h1 { font: 500 clamp(32px, 5vw, 44px)/1.05 var(--display); margin: 6px 0 8px; }
.pdp .sub { color: var(--muted); font-size: 14px; }
.pdp .price { font-size: 24px; font-weight: 600; margin: 16px 0 4px; }
.pdp .price s { font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; font-weight: 500; font-size: 14px; }
.opt span small { font-weight: 400; font-size: 11px; color: var(--muted); }
.opt input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt.out span { color: #9aa79f; text-decoration: line-through; background: transparent; }
.stock-note { font-size: 13px; margin: 12px 0; min-height: 20px; }
.stock-note.low { color: var(--warn); }
.stock-note.out { color: var(--bad); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.qty button { width: 38px; height: 42px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.qty input { width: 44px; text-align: center; border: 0; padding: 0; background: none; box-shadow: none !important; }
.buy-row { display: flex; gap: 10px; margin: 16px 0; }
.buy-row .btn { flex: 1; }
.perks { border-top: 1px solid var(--line); margin-top: 22px; }
.perks details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.perks summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.perks summary::after { content: "+"; color: var(--gold); font-size: 18px; }
.perks details[open] summary::after { content: "–"; }
.perks p, .perks ul { color: var(--cocoa); font-size: 14px; margin: 10px 0 0; }

/* ---------- bag + checkout ---------- */
.two-col { display: grid; gap: 26px; padding-bottom: 60px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 380px; align-items: start; } }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel h2 { font: 500 26px/1.1 var(--display); margin: 0 0 6px; }
.panel h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 22px 0 4px; }
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line .ph { aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: var(--sand); }
.line .ph img, .line .ph svg { width: 100%; height: 100%; object-fit: cover; }
.line .name { font: 500 18px/1.2 var(--display); text-decoration: none; }
.line .var { font-size: 13px; color: var(--muted); }
.line .amt { font-weight: 600; text-align: right; }
.line form { display: inline; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 12.5px; }
.sum { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sum td { padding: 7px 0; }
.sum td:last-child { text-align: right; }
.sum .total td { border-top: 1px solid var(--line); padding-top: 12px; font-weight: 600; font-size: 17px; }
.sum .muted td { color: var(--muted); font-size: 13px; }
.choice { display: block; position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 14px 44px; margin-top: 10px; cursor: pointer; background: var(--paper); }
.choice input { position: absolute; left: 16px; top: 17px; accent-color: var(--ink); width: 17px; height: 17px; margin: 0; }
.choice b { display: block; font-weight: 600; }
.choice small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.choice .fee { position: absolute; right: 14px; top: 14px; font-weight: 600; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice.disabled { opacity: .5; cursor: not-allowed; }
.pay-logos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pay-logos span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color: var(--cocoa); background: var(--cream); }
.grid-2 { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- order page ---------- */
.steps { list-style: none; margin: 18px 0 0; padding: 0; }
.steps li { position: relative; padding: 0 0 18px 30px; color: var(--muted); }
.steps li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.steps li::after { content: ""; position: absolute; left: 10.5px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li.done { color: var(--ink); }
.steps li.done::before { background: var(--gold); }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.now::before { background: var(--ink); box-shadow: 0 0 0 4px rgba(10, 42, 32, .12); }
.steps small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.status-pill { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .03em; background: var(--sand); }

/* ---------- info blocks ---------- */
.how { display: grid; gap: 16px; counter-reset: s; }
.how div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.how div::before { counter-increment: s; content: "0" counter(s); font: 500 30px/1 var(--display); color: var(--gold); display: block; margin-bottom: 10px; }
.how h3 { margin: 0 0 6px; font-size: 16px; }
.how p { margin: 0; color: var(--muted); font-size: 14px; }
@media (min-width: 760px) { .how { grid-template-columns: repeat(3, 1fr); } }
.length-chart { display: flex; align-items: end; gap: 6px; height: 170px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.length-chart a { flex: 1 0 44px; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: end; height: 100%; font-size: 12px; color: var(--muted); }
.length-chart i { display: block; width: 8px; border-radius: 8px; background: linear-gradient(var(--cocoa), var(--gold-soft)); margin-bottom: 6px; }
.length-chart a:hover i { background: var(--ink); }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq p { color: var(--cocoa); margin: 10px 0 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding: 48px 0 26px; margin-top: 40px; font-size: 14px; }
.site-footer .cols { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h4 { color: var(--cream); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; display: block; padding: 3px 0; }
.site-footer a:hover { color: var(--cream); }
.site-footer .logo b { color: var(--cream); }
.site-footer .fine { border-top: 1px solid var(--dark-line); margin-top: 30px; padding-top: 18px; font-size: 12px; color: #8fa89a; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 54px; height: 54px; border-radius: 50%; background: #1f7a4d; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.wa-float svg { width: 28px; height: 28px; }

/* ================= ADMIN ================= */
body.admin { background: #f1eee4; }
.admin-top { background: var(--ink); color: var(--cream); }
.admin-top .wrap { display: flex; align-items: center; gap: 16px; height: 56px; max-width: 1320px; }
.admin-top .logo b { color: var(--cream); font-size: 21px; }
.admin-top nav { display: flex; gap: 4px; overflow-x: auto; margin-left: 10px; }
.admin-top nav a { color: var(--on-dark-muted); text-decoration: none; font-size: 13.5px; padding: 7px 11px; border-radius: 8px; white-space: nowrap; }
.admin-top nav a[aria-current], .admin-top nav a:hover { background: #164a38; color: var(--cream); }
.admin-top .right { margin-left: auto; font-size: 12.5px; color: #8fa89a; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.admin-top .right a { color: var(--on-dark-muted); }
.admin main { max-width: 1320px; margin: 0 auto; padding: 22px 16px 60px; }
.admin h1 { font: 500 32px/1.1 var(--display); margin: 4px 0 16px; }
.admin h2 { font: 500 24px/1.1 var(--display); margin: 28px 0 12px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--gold); transform: translateY(-1px); }
.tile .n { font: 600 30px/1.1 var(--sans); letter-spacing: -.02em; }
.tile .l { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tile .go { font-size: 12px; color: var(--gold); margin-top: 8px; }
.tile.hot { border-color: #e2b38e; background: #fdf3ea; }
.tile.hot .n { color: #8a3f10; }
.tile.zero .n { color: #9fb0a6; }
.tbl-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #f8f6ee; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid #ebe6d8; vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl a.num-link { text-decoration: none; border-bottom: 1px dotted var(--gold); }
.tbl tr.low td { background: #fdf6ea; }
.tbl tr.out td { background: #fbece9; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill.awaiting_payment, .pill.awaiting_deposit { background: #eee6db; color: var(--muted); }
.pill.to_confirm { background: #fdebd3; color: #8a4b0f; }
.pill.to_pack { background: #e0ecf6; color: #1f4f78; }
.pill.packed { background: #e6e3f5; color: #463a8a; }
.pill.out_for_delivery { background: #dff1ee; color: #1d5f55; }
.pill.delivered { background: #e3efe7; color: #1f4a36; }
.pill.needs_attention, .pill.refund { background: #f6ddd8; color: #7b241b; }
.pill.cancelled, .pill.expired, .pill.returned { background: #efebe7; color: #8a7f76; }
.filters-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin .panel { margin-bottom: 16px; }
.admin form.inline { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.admin form.inline label { margin: 0 0 4px; }
.admin form.inline > div { flex: 1 1 160px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.admin-cols { display: grid; gap: 16px; }
@media (min-width: 980px) { .admin-cols { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.thumb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb-row img, .thumb-row svg { width: 72px; height: 90px; object-fit: cover; border-radius: 8px; }
.sample-flag { font-size: 11px; background: #efe6ff; color: #4b2f8a; border-radius: 6px; padding: 2px 6px; font-weight: 600; }
.login { max-width: 380px; margin: 10vh auto; }
.muted { color: var(--muted); }
.mt0 { margin-top: 0 !important; }
.timeline { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.timeline li { padding: 8px 0; border-bottom: 1px solid #ebe6d8; }
.timeline time { color: var(--muted); font-size: 12px; display: block; }

/* Logo on dark backgrounds: gold on emerald, never the text-gold. */
.site-footer .logo i, .admin-top .logo i, .hero .logo i { color: var(--gold-soft); }
.site-footer .logo b, .admin-top .logo b { color: var(--on-dark); }
.site-footer { background: var(--ink); }
.admin-top { background: var(--espresso); }
.logo svg.strand { display: none; }

/* Shop filters: a tap-to-open box on phones, always open on wide screens. */
.filter-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 500; margin-top: 12px; }
.filter-toggle::-webkit-details-marker { display: none; }
.filter-toggle::before { content: ""; width: 14px; height: 10px; background: linear-gradient(var(--ink), var(--ink)) 0 0/100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50%/70% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 100%/40% 1.5px no-repeat; }
@media (min-width: 900px) { .filter-toggle { display: none; } .filter-box:not([open]) > :not(summary) { display: revert; } }

/* Owner area (only the owner ever sees these) */
.admin-top nav { min-width: 0; flex: 1 1 auto; }
.admin-top .right a.owner-link { color: var(--gold); font-weight: 600; text-decoration: none; }
.pill.risk-high { background: #f6ddd8; color: #7b241b; }
.pill.risk-watch { background: #fdebd3; color: #8a4b0f; }
.pill.risk-normal { background: #efebe7; color: #8a7f76; }
.pill.refused { background: #efebe7; color: #8a7f76; text-decoration: line-through; }
.tbl tr.risk-high td { background: #fbf0ee; }
.tbl tr.hl td { outline: 2px solid var(--gold); outline-offset: -2px; }
.chg { margin-top: 6px; font-size: 12.5px; }
.chg summary { cursor: pointer; color: var(--gold); }
.chg table { border-collapse: collapse; margin-top: 6px; }
.chg td, .chg th { padding: 3px 10px 3px 0; text-align: left; vertical-align: top; font-weight: normal; }
.chg .was { color: #8a3f10; text-decoration: line-through; }
.chg .now { color: #1f4a36; }
.acct { display: grid; gap: 12px; }
.acct .panel form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; }
.acct .panel form.inline input { width: auto; flex: 1 1 160px; min-width: 0; }
/* Laptop/desktop: the menu has 14 items now, more than fits beside the logo and
   the name/sign-out links, and a clipped menu hid Reviews, Import and Settings.
   It gets its own row under the logo and wraps, so every item is always visible. */
@media (min-width: 861px) {
  .admin-top .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 8px; row-gap: 6px; }
  .admin-top nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; margin-left: -11px; }
}
/* Phone: the admin menu gets its own swipeable row instead of being squeezed to nothing. */
@media (max-width: 860px) {
  .admin-top .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; }
  .admin-top nav { order: 3; flex-basis: 100%; margin-left: -11px; padding-bottom: 4px; }
}

/* Bag: "Not ready yet?" reminder box and honest low-stock line */
.remind-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.remind-box p { margin-bottom: 8px; }
.remind-box .consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 10px 0; font-weight: 400; }
.remind-box .consent input { width: auto; margin-top: 3px; }
.hint.low-left { color: #8a4b1c; font-weight: 500; }

/* Reports: day-by-day bar, clickable like every number */
.tbl a.bar { display: block; height: 12px; border-radius: 6px; background: var(--gold-soft); opacity: .9; min-width: 4px; }
.tbl a.bar:hover { opacity: 1; }

/* Brand artwork (real product photos on designed backgrounds) and drawn icons */
.hero-art picture, .cat picture { position: absolute; inset: 0; display: block; }
.hero-art { position: relative; }
.hero-art picture img, .cat picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip .tex-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--gold); }
.chip[aria-current] .tex-ico { color: currentColor; }
.how div { position: relative; }
.how-ico { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; color: var(--gold); opacity: .9; }
.how-ico svg { width: 100%; height: 100%; }

/* ---------- life: gentle motion (all of it off for "reduce motion") ---------- */
/* Second photo fades in on hover (mouse devices only; phones keep the first). */
.card .ph img.alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease, transform .5s ease; }
@media (hover: hover) { .card:hover .ph.has-alt img.alt { opacity: 1; } }
.card .ph { box-shadow: 0 1px 0 rgba(10, 42, 32, .04); transition: box-shadow .35s ease, transform .35s ease; }
@media (hover: hover) { .card:hover .ph { box-shadow: 0 18px 36px -18px rgba(10, 42, 32, .35); transform: translateY(-3px); } }
/* Sections rise in as they scroll into view; children follow one after another. */
.js-motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js-motion .reveal.in { opacity: 1; transform: none; }
.js-motion .reveal .card, .js-motion .reveal .cat, .js-motion .reveal .how > div, .js-motion .reveal .length-chart a { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js-motion .reveal.in .card, .js-motion .reveal.in .cat, .js-motion .reveal.in .how > div, .js-motion .reveal.in .length-chart a { opacity: 1; transform: none; }
.js-motion .reveal.in :is(.card, .cat, .how > div, .length-chart a):nth-child(2) { transition-delay: .08s; }
.js-motion .reveal.in :is(.card, .cat, .how > div, .length-chart a):nth-child(3) { transition-delay: .16s; }
.js-motion .reveal.in :is(.card, .cat, .how > div, .length-chart a):nth-child(4) { transition-delay: .24s; }
.js-motion .reveal.in :is(.card, .cat, .how > div, .length-chart a):nth-child(n+5) { transition-delay: .3s; }
/* Length bars grow up from the floor. */
.js-motion .reveal .length-chart i { transform: scaleY(.1); transform-origin: bottom; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .2s; }
.js-motion .reveal.in .length-chart i { transform: none; }
/* The homepage banner drifts slowly, like a camera breathing. */
.hero-art img { animation: hero-drift 22s ease-in-out infinite alternate; transform-origin: 55% 40%; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
.hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(230, 201, 138, .16) 50%, transparent 65%); background-size: 250% 100%; animation: hero-sheen 9s ease-in-out 1.2s infinite; }
@keyframes hero-sheen { 0% { background-position: 120% 0; } 45%, 100% { background-position: -30% 0; } }
/* "Only N left": a small live dot. */
.badge.low::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffd9a8; margin-right: 6px; vertical-align: 1px; animation: low-pulse 1.8s ease-out infinite; }
@keyframes low-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 217, 168, .8); } 70% { box-shadow: 0 0 0 7px rgba(255, 217, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 217, 168, 0); } }
/* Buttons lift a little. */
.btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(10, 42, 32, .5); } }
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal, .js-motion .reveal * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-art img, .hero-art::after, .badge.low::before { animation: none !important; }
  .card .ph, .card .ph img, .btn { transition: none !important; transform: none !important; }
}