/* =============================================================
   DOODLY — App-shell & multi-page styles
   Builds on assets/css/styles.css (tokens, buttons, glass, nav).
   Adds: dashboard shell (sidebar/topbar/breadcrumbs), tables,
   forms, KPI cards, badges, tabs, pagination, timeline, states,
   auth, blog, legal, product detail, generic content pages.
   ============================================================= */

/* ---------- Page header (every inner page) ---------- */
.page-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.page-head .ph-title { font-family: "Fraunces", serif; font-weight: 600; letter-spacing: -.02em; color: var(--forest); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.05; }
.page-head .ph-sub { color: var(--ink-2); margin-top: 8px; max-width: 60ch; }
.page-head .ph-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-3); transition: color .2s; }
.crumbs a:hover { color: var(--leaf-600); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--forest); font-weight: 600; }

/* ---------- Generic content section (marketing inner pages) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-family: "Fraunces", serif; color: var(--forest); font-size: 1.5rem; margin: 34px 0 12px; }
.prose h3 { color: var(--forest); font-size: 1.12rem; margin: 24px 0 8px; }
.prose p { color: var(--ink-2); margin-bottom: 14px; }
.prose ul.bullets { margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.prose ul.bullets li { position: relative; padding-left: 26px; color: var(--ink-2); }
.prose ul.bullets li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 70ch; }

/* split content + media */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 880px){ .split { grid-template-columns: 1fr 1fr; } .split.rev > :first-child { order: 2; } }
.media-card { border-radius: var(--r-xl); background: var(--grad-deep); color:#fff; min-height: 280px; display: grid; place-items: center; box-shadow: var(--shadow-lg); padding: 28px; text-align:center; }
.media-card .big { font-size: 3.4rem; }
.media-card .display { color:#fff; }

/* stat strip used across marketing pages */
.kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi-row > .kpi { min-width: 0; }
@media (min-width:760px){ .kpi-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kpi { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-sm); }
.kpi .n { font-family:"Fraunces",serif; font-weight:700; font-size:1.9rem; color: var(--leaf-600); }
.kpi .l { color: var(--ink-3); font-size:.85rem; margin-top:2px; }
.kpi .delta { font-size:.78rem; font-weight:700; margin-top:8px; display:inline-block; }
.kpi .delta.up { color: var(--leaf-600); }
.kpi .delta.down { color:#d9534f; }

/* ---------- App shell (customer / admin / driver) ---------- */
.app { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 1000px){ .app { grid-template-columns: 264px 1fr; } }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 80; width: 264px; max-width: 84vw;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(-105%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1);
}
.sidebar.open { transform: none; }
@media (min-width:1000px){ .sidebar { position: sticky; top: 0; height: 100vh; transform: none; } }
.sidebar .sb-brand { display:flex; align-items:center; gap:.55rem; padding: 18px 20px; font-weight:800; font-size:1.2rem; color:var(--forest); border-bottom:1px solid var(--line); }
.sidebar .sb-brand .dot { width:26px; height:26px; border-radius:9px; background:var(--grad-leaf); display:grid; place-items:center; }
.sidebar .sb-brand .dot::after { content:""; width:9px; height:9px; border-radius:50%; background:#fff; }
.sidebar .sb-role { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--leaf-600); margin-left:auto; background:var(--mint-soft); padding:.2rem .5rem; border-radius:999px; }
.sb-scroll { overflow-y:auto; padding: 14px 12px 24px; flex:1; }
.sb-group + .sb-group { margin-top: 18px; }
.sb-group .sb-h { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding: 6px 12px; }
.sb-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius: 12px; color:var(--ink-2); font-weight:500; font-size:.93rem; transition: background .18s, color .18s; }
.sb-link svg { width:18px; height:18px; flex-shrink:0; opacity:.85; }
.sb-link:hover { background: var(--surface-2); color: var(--forest); }
.sb-link.active { background: var(--mint-soft); color: var(--forest-700); font-weight:700; }
.sb-link .tag-soon { margin-left:auto; font-size:.62rem; font-weight:700; color:var(--gold); background:var(--gold-soft); padding:.1rem .4rem; border-radius:999px; }
.sb-foot { padding: 12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.sb-signout { background:none; border:0; width:100%; text-align:left; cursor:pointer; font-family:inherit; color:#c0392b; }
.sb-signout:hover { background:#fdecea; color:#c0392b; }

/* ---------- public blog reader (layout.js wireBlog) ---------- */
.blog-read { max-width: 720px; margin: 32px auto; padding: 0 20px; }
.blog-back { display:inline-block; margin-bottom:14px; font-weight:600; }
.blog-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 12px; }
.blog-byline { margin-bottom: 20px; }
.blog-hero-img { width:100%; border-radius:16px; margin: 8px 0 24px; display:block; }
.blog-article { font-size: 1.05rem; line-height: 1.75; color: var(--ink-2, #33403b); }
.blog-article p { margin: 0 0 1.1em; }
.blog-article h2 { font-family:'Fraunces',serif; color:var(--forest); font-size:1.5rem; margin:1.6em 0 .5em; }
.blog-article h3 { font-family:'Fraunces',serif; color:var(--forest); font-size:1.2rem; margin:1.4em 0 .4em; }
.blog-article ul, .blog-article ol { margin:0 0 1.1em 1.2em; }
.blog-article li { margin: .3em 0; }
.blog-article a { color: var(--leaf-600); font-weight:600; }
.blog-article img { max-width:100%; border-radius:12px; }
.blog-article blockquote { border-left:3px solid var(--leaf); padding-left:16px; margin:1.2em 0; color:var(--ink-3); font-style:italic; }
.blog-cta { margin: 28px 0 8px; }

/* main column */
.main-col { min-width: 0; display:flex; flex-direction:column; }
.topbar {
  position: sticky; top: 0; z-index: 60; height: 64px;
  display:flex; align-items:center; gap:14px; padding: 0 clamp(16px,3vw,28px);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom:1px solid var(--glass-brd);
}
.topbar .burger { display:grid; }
@media (min-width:1000px){ .topbar .burger { display:none; } }
.topbar .tb-search { flex:1; max-width:420px; display:none; }
@media (min-width:680px){ .topbar .tb-search { display:block; } }
.tb-search input { width:100%; padding:.6rem 2.4rem .6rem 2.2rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.tb-search { position:relative; }
/* ONLY the direct-child search magnifier is the absolutely-positioned left icon —
   NOT a descendant svg like the injected ⓘ help-tip (data-help="search"). */
.tb-search > svg { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--ink-3); width:16px; height:16px; }
/* the contextual-help ⓘ injected into the search box sits at the right, clear of the text */
.tb-search > .help-tip { position:absolute; right:.55rem; top:50%; transform:translateY(-50%); margin:0; }
.topbar .tb-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tb-icon { position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); transition:transform .2s; }
.tb-icon:hover { transform:translateY(-2px); }
.tb-icon .dot-badge { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 2px var(--surface); }
.tb-user { display:flex; align-items:center; gap:10px; padding:4px 6px 4px 4px; border-radius:999px; border:1px solid var(--line); background:var(--surface); }
.tb-user .av { width:34px; height:34px; border-radius:50%; background:var(--grad-leaf); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.85rem; }
.tb-user .nm { font-size:.85rem; font-weight:600; color:var(--forest); display:none; }
@media (min-width:560px){ .tb-user .nm { display:block; } }

/* ---------- account dropdown (sign-out) — public nav chip + dashboard top-bar ---------- */
.acct-dd { position:relative; }
.acct-dd > summary { list-style:none; cursor:pointer; }
.acct-dd > summary::-webkit-details-marker { display:none; }
.acct-dd > summary::marker { content:""; }
.acct-dd[open] > summary { outline:none; }
.acct-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:196px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 44px rgba(15,61,46,.18); padding:6px; z-index:200; display:flex; flex-direction:column; gap:2px; animation:acctPop .16s ease; }
@keyframes acctPop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.acct-mi { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:.9rem; background:none; border:0; width:100%; text-align:left; cursor:pointer; font-family:inherit; text-decoration:none; }
.acct-mi:hover { background:var(--surface-2); color:var(--forest); }
.acct-mi svg { width:17px; height:17px; opacity:.85; flex-shrink:0; }
.acct-signout { color:#c0392b; }
.acct-signout:hover { background:#fdecea; color:#c0392b; }
.acct-who { padding:8px 12px 8px; font-weight:700; color:var(--forest); font-size:.9rem; border-bottom:1px solid var(--line); margin-bottom:4px; line-height:1.3; }
.acct-who small { display:block; font-weight:500; color:var(--ink-3); font-size:.76rem; margin-top:2px; word-break:break-all; }

.content { padding: clamp(18px,3vw,30px); flex:1; }
.content > .reveal { will-change: opacity, transform; }

.scrim { position:fixed; inset:0; background:rgba(8,20,14,.5); z-index:70; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.show { opacity:1; pointer-events:auto; }
@media (min-width:1000px){ .scrim { display:none; } }

/* ---------- Cards / panels ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.panel-pad { padding: clamp(18px,2.4vw,26px); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); }
.panel-head h3 { font-size:1.05rem; color:var(--forest); font-family:"Fraunces",serif; }
.panel-head .link { font-size:.85rem; font-weight:700; color:var(--leaf-600); }
.grid-cards { display:grid; gap:18px; }
.cols-2 { grid-template-columns:1fr; } .cols-3 { grid-template-columns:1fr; } .cols-4 { grid-template-columns:1fr; }
@media (min-width:680px){ .cols-2,.cols-3,.cols-4 { grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .cols-3 { grid-template-columns:repeat(3,1fr);} .cols-4 { grid-template-columns:repeat(4,1fr);} }
.span-2 { grid-column: span 1; }
@media (min-width:1000px){ .span-2 { grid-column: span 2; } }

/* info / list tiles */
.tile { padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.tile h4 { color:var(--forest); font-size:1rem; margin-bottom:6px; }
.tile p { color:var(--ink-2); font-size:.9rem; }

/* definition rows */
.deflist { display:grid; gap:0; }
.deflist .row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px dashed var(--line); }
.deflist .row:last-child { border-bottom:none; }
.deflist .k { color:var(--ink-3); font-size:.9rem; }
.deflist .v { font-weight:600; color:var(--forest); font-size:.92rem; text-align:right; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.02em; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.green { color:var(--leaf-600); background:var(--mint-soft); }
.badge.amber { color:#a9791b; background:var(--gold-soft); }
.badge.red { color:#c33; background:#fbe9e9; }
.badge.blue { color:#2563a8; background:#e6f0fb; }
.badge.grey { color:var(--ink-3); background:var(--surface-2); }
[data-theme="dark"] .badge.red { background:#3a1c1c; } [data-theme="dark"] .badge.blue { background:#15263a; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); }
table.tbl { width:100%; border-collapse:collapse; min-width:560px; }
table.tbl th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; padding:14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2); }
table.tbl td { padding:14px 16px; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-2); white-space:nowrap; }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tbody tr { transition:background .15s; }
table.tbl tbody tr:hover { background:var(--surface-2); }
table.tbl td .strong { color:var(--forest); font-weight:700; }
.cell-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.82rem; color:var(--ink-3); }
.cell-user { display:flex; align-items:center; gap:10px; }
.cell-user .av { width:30px; height:30px; border-radius:50%; background:var(--grad-leaf); color:#fff; display:grid; place-items:center; font-size:.78rem; font-weight:700; }

/* toolbar: filters + search above tables */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.toolbar .grow { flex:1; min-width:180px; }
.seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; }
.seg button { padding:.45rem .85rem; border-radius:999px; font-size:.82rem; font-weight:600; color:var(--ink-3); }
.seg button.active { background:var(--surface); color:var(--forest); box-shadow:var(--shadow-sm); }
.input, .select { padding:.6rem .85rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; }
.input::placeholder { color:var(--ink-3); }
.search-box { position:relative; }
.search-box svg { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--ink-3); width:16px; height:16px; }
.search-box input { padding-left:2.2rem; width:100%; }

/* pagination */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
.pager .pages { display:flex; gap:6px; }
.pager .pg { min-width:36px; height:36px; padding:0 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; font-size:.85rem; font-weight:600; color:var(--ink-2); }
.pager .pg.active { background:var(--forest); color:#fff; border-color:var(--forest); }
[data-theme="dark"] .pager .pg.active { background:var(--leaf); color:#06140d; }
.pager .meta { color:var(--ink-3); font-size:.85rem; }

/* ---------- Forms ---------- */
.form-grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .form-grid.two { grid-template-columns:1fr 1fr; } }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.85rem; font-weight:600; color:var(--forest); }
.field .hint { font-size:.78rem; color:var(--ink-3); }
.field input, .field select, .field textarea { padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--leaf); box-shadow:var(--ring); }
.field textarea { min-height:120px; resize:vertical; }
.check { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-2); }
.check input { width:18px; height:18px; accent-color:var(--leaf); }
.field .req { color:#d9534f; }
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.15); }
.form-msg { margin-top:14px; font-size:.85rem; padding:9px 13px; border-radius:10px; }
.form-msg.ok { background:var(--mint-soft,#E4F6EC); color:var(--leaf-600,#178a52); border:1px solid var(--leaf,#1FAE66); }
.form-msg.err { background:#fdecea; color:#a3382f; border:1px solid #f0b6b1; }
.tab-panel[hidden] { display:none; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto; }
.tabs button { padding:.7rem 1rem; font-weight:600; font-size:.92rem; color:var(--ink-3); border-bottom:2px solid transparent; white-space:nowrap; }
.tabs button.active { color:var(--forest); border-bottom-color:var(--leaf); }

/* ---------- Timeline ---------- */
.timeline { position:relative; padding-left:30px; }
.timeline::before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line); }
.tl-item { position:relative; padding:0 0 22px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item .dot { position:absolute; left:-24px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--line); display:grid; place-items:center; }
.tl-item.done .dot { background:var(--leaf); border-color:var(--leaf); color:#fff; }
.tl-item.active .dot { border-color:var(--leaf); box-shadow:var(--ring); }
.tl-item .tl-t { font-weight:700; color:var(--forest); font-size:.95rem; }
.tl-item .tl-s { color:var(--ink-3); font-size:.83rem; margin-top:2px; }

/* ---------- States ---------- */
.state { text-align:center; padding:48px 24px; border-radius:var(--r-lg); border:1px dashed var(--line); background:var(--surface); }
.state .ic { width:64px; height:64px; border-radius:20px; background:var(--mint-soft); color:var(--leaf-600); display:grid; place-items:center; margin:0 auto 16px; }
.state h3 { color:var(--forest); font-size:1.2rem; }
.state p { color:var(--ink-2); margin:8px auto 18px; max-width:42ch; }
.state.error .ic { background:#fbe9e9; color:#c33; }
[data-theme="dark"] .state.error .ic { background:#3a1c1c; }

.skeleton { background:linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:10px; }
@keyframes sk { 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
.sk-line { height:14px; margin:8px 0; } .sk-line.w60{ width:60%; } .sk-line.w40{ width:40%; } .sk-line.w80{ width:80%; }

.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--leaf); animation:spin .8s linear infinite; margin:24px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Progress / meters ---------- */
.meter { height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line); }
.meter > span { display:block; height:100%; background:var(--grad-leaf); border-radius:999px; }
.bars { display:flex; align-items:flex-end; gap:8px; height:140px; padding-top:10px; }
.bars .bar { flex:1; background:var(--grad-leaf); border-radius:8px 8px 0 0; min-height:6px; position:relative; opacity:.92; transition:height .6s ease; }
.bars .bar span { position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:.7rem; color:var(--ink-3); }
.chart-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; font-size:.82rem; color:var(--ink-3); }

/* donut */
.donut { width:150px; height:150px; border-radius:50%; display:grid; place-items:center; margin:0 auto; }
.donut .hole { width:96px; height:96px; border-radius:50%; background:var(--surface); display:grid; place-items:center; text-align:center; }
.donut .hole .n { font-family:"Fraunces",serif; font-weight:700; font-size:1.5rem; color:var(--forest); }
.donut .hole .l { font-size:.7rem; color:var(--ink-3); }

/* ---------- Auth ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:920px){ .auth { grid-template-columns:1.05fr .95fr; } }
.auth-aside { display:none; position:relative; background:var(--grad-deep); color:#fff; padding:48px; overflow:hidden; }
@media (min-width:920px){ .auth-aside { display:flex; flex-direction:column; justify-content:space-between; } }
.auth-aside::before { content:""; position:absolute; inset:0; background:radial-gradient(500px 500px at 80% 10%, rgba(143,227,181,.3), transparent 70%); }
.auth-aside .display { color:#fff; font-size:2.2rem; position:relative; }
.auth-aside .pts { position:relative; display:grid; gap:14px; margin-top:24px; }
.auth-aside .pts li { display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.9); }
.auth-aside .pts .ic { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12); display:grid; place-items:center; }
.auth-main { display:grid; place-items:center; padding:32px 20px; }
.auth-card { width:100%; max-width:420px; }
.auth-card .logo { margin-bottom:22px; }
.auth-card h1 { font-family:"Fraunces",serif; color:var(--forest); font-size:1.7rem; }
.auth-card .sub { color:var(--ink-2); margin:6px 0 24px; }
.auth-card .btn { width:100%; margin-top:6px; }
.auth-alt { text-align:center; margin-top:18px; color:var(--ink-3); font-size:.9rem; }
.auth-alt a { color:var(--leaf-600); font-weight:700; }
.divider { display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:.8rem; margin:18px 0; }
.divider::before, .divider::after { content:""; height:1px; background:var(--line); flex:1; }
.otp-row { display:flex; gap:10px; justify-content:space-between; }
.otp-row input { width:100%; aspect-ratio:1; text-align:center; font-size:1.4rem; font-weight:700; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--forest); }
.otp-row input:focus { outline:none; border-color:var(--leaf); box-shadow:var(--ring); }

/* ---------- Product detail ---------- */
.pd-grid { display:grid; gap:30px; }
/* mobile: gallery scrolls naturally in the single-column flow (no sticky) */
.pd-gallery { border-radius:var(--r-xl); background:var(--grad-hero); border:1px solid var(--line); padding:30px; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
/* desktop two-column layout: sticky image + parallax only here */
@media (min-width:920px){
  .pd-grid { grid-template-columns:1fr 1fr; align-items:start; }
  .pd-gallery { position:sticky; top:84px; }
  .pd-figure { will-change:transform; }
}
@media (max-width:480px){
  .pd-gallery { padding:18px; }
  .pd-thumbs .th { width:54px; height:54px; }
}
@media (max-width:400px){
  .pd-stage { min-height:260px; }
  .pd-main { max-height:360px; }
}
.pd-thumbs { display:flex; gap:10px; margin-top:18px; justify-content:center; }
.pd-thumbs .th { width:62px; height:62px; border-radius:14px; background:#F6FAF6; border:1px solid var(--line); display:grid; place-items:center; font-size:1.4rem; cursor:pointer; }
.pd-thumbs .th.active { border-color:var(--leaf); box-shadow:var(--ring); }
.pd-thumbs .th { overflow:hidden; padding:0; }
.pd-thumbs .th img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Real product photography ---------- */
.pd-stage { position:relative; width:100%; border-radius:var(--r-lg); overflow:hidden; display:grid; place-items:center; min-height:340px;
  background:radial-gradient(260px 220px at 50% 42%, rgba(143,227,181,.32), transparent 72%), linear-gradient(180deg, #FFFFFF 0%, #F6FAF6 100%); }
.pd-main { width:100%; max-height:460px; padding:18px; object-fit:contain; display:block; transition:opacity .25s ease, transform .4s cubic-bezier(.2,.8,.2,1); cursor:zoom-in; transform-origin:center; filter:drop-shadow(0 18px 26px rgba(15,61,46,.18)); }
.pd-main.swap { opacity:0; }
.pd-zoom { position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; background:var(--glass-bg); border:1px solid var(--glass-brd); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); color:var(--forest); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.pd-zoom:hover { background:var(--surface); }

/* hero floating bottle + soft glow */
.hero-card .bottle { position:relative; }
.hero-card .bottle::before { content:""; position:absolute; left:50%; bottom:4%; width:64%; height:34%; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(31,174,102,.26), transparent 70%); filter:blur(10px); z-index:0; }
.hero-bottle-img { position:relative; z-index:1; height:256px; width:auto; max-width:100%; object-fit:contain; margin:0 auto; display:block; filter:drop-shadow(0 16px 26px rgba(15,61,46,.20)); }

/* ---------- Premium product poster cards ---------- */
.product { display:flex; flex-direction:column; }
.product .from { margin-top:12px; }
.product .plink { margin-top:auto; }                 /* push CTA down => uniform card heights */
.pstage {
  position:relative; width:100%; height:160px; border-radius:var(--r); overflow:hidden;
  display:grid; place-items:center; margin-bottom:14px; border:1px solid var(--line);
  background:
    radial-gradient(140px 96px at 50% 44%, rgba(143,227,181,.36), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F6FAF6 100%);
}
.pstage::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 42%, rgba(255,255,255,.4) 50%, transparent 58%); transform:translateX(-130%); }
.product:hover .pstage::after { animation:sheen .9s ease; }
.pstage .pbottle { max-height:142px; width:auto; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 12px 16px rgba(15,61,46,.20)); }
.pstage .pemoji { font-size:3rem; position:relative; z-index:1; }

.badge-fresh { position:absolute; top:16px; left:16px; z-index:3; background:var(--grad-leaf); color:#fff;
  font-weight:800; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; padding:.34rem .62rem;
  border-radius:999px; box-shadow:0 6px 14px rgba(31,174,102,.36); }

/* =============================================================
   Centralized product status badges (.pstatus) — driven by
   DOODLY_STATUS. Premium, animated, accessible (icon + text +
   aria, never colour alone).
   ============================================================= */
.pstatus { display:inline-flex; align-items:center; gap:.34rem; vertical-align:middle;
  font-weight:800; font-size:.68rem; letter-spacing:.02em; line-height:1.05;
  padding:.32rem .58rem; border-radius:999px; border:1px solid transparent;
  box-shadow:0 4px 12px rgba(15,61,46,.14); backdrop-filter:saturate(140%) blur(4px); white-space:nowrap;
  animation:psIn .4s cubic-bezier(.2,.9,.3,1.1) both; }
.pstatus-ic { display:inline-grid; place-items:center; }
.pstatus-ic svg { display:block; }
.pstatus-tx { display:inline-flex; flex-direction:column; }
.pstatus-sub { font-weight:600; font-size:.78em; opacity:.85; letter-spacing:0; }
/* corner placement over an image stage */
.pstatus--tl { position:absolute; top:14px; left:14px; z-index:4; }
.pstatus--tr { position:absolute; top:14px; right:14px; z-index:4; }

/* tones */
.pstatus--available { background:linear-gradient(180deg,#eafaf0,#dcf4e6); color:#11663f; border-color:#bfe8cf; }
.pstatus--low { background:linear-gradient(180deg,#fff4dc,#ffe9bf); color:#7a4f00; border-color:#f2cd86;
  animation:psIn .4s cubic-bezier(.2,.9,.3,1.1) both, psPulse 2.6s ease-in-out 1.2s infinite; }
.pstatus--oos { background:linear-gradient(180deg,#fde6e2,#fad3cc); color:#a32b1b; border-color:#f3b6ab; }
.pstatus--soon { position:relative; overflow:hidden; color:#5b3da8;
  background:linear-gradient(180deg,#efe9fc,#e4dafa); border-color:#cdbcf3;
  animation:psIn .4s cubic-bezier(.2,.9,.3,1.1) both, psGlow 3.2s ease-in-out 1s infinite; }
.pstatus--soon::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);
  transform:translateX(-130%); animation:psShimmer 3.4s ease-in-out infinite; }
.pstatus--discontinued { background:linear-gradient(180deg,#eef1f0,#e2e7e5); color:#5b6a63; border-color:#d3dbd7; }
[data-theme="dark"] .pstatus { box-shadow:0 4px 14px rgba(0,0,0,.4); }
[data-theme="dark"] .pstatus--available { background:linear-gradient(180deg,#13301f,#102a1b); color:#7fe0a6; border-color:#1f5235; }
[data-theme="dark"] .pstatus--low { background:linear-gradient(180deg,#33260c,#2a1f09); color:#ffce7a; border-color:#5c4517; }
[data-theme="dark"] .pstatus--oos { background:linear-gradient(180deg,#371814,#2c130f); color:#ff9d8a; border-color:#5e271f; }
[data-theme="dark"] .pstatus--soon { background:linear-gradient(180deg,#241a3d,#1d1531); color:#c3aef6; border-color:#3d2f63; }
[data-theme="dark"] .pstatus--discontinued { background:linear-gradient(180deg,#1c2420,#161d1a); color:#9fb0a8; border-color:#2b3631; }

/* card-level treatments (image quality NOT touched — grayscale the CARD chrome only) */
.product.is-oos, .product.is-discontinued { opacity:.92; }
.product.is-oos .pstage, .product.is-discontinued .pstage { filter:grayscale(.5); }
.product.is-oos .pstage .pbottle, .product.is-discontinued .pstage .pbottle { filter:grayscale(0) drop-shadow(0 12px 16px rgba(15,61,46,.18)); }
.product.is-soon .pstage { box-shadow:inset 0 0 0 1px rgba(123,90,200,.18); }

@keyframes psIn { from{ opacity:0; transform:translateY(-4px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes psPulse { 0%,100%{ box-shadow:0 4px 12px rgba(242,176,60,.18); } 50%{ box-shadow:0 4px 16px rgba(242,176,60,.5); } }
@keyframes psGlow { 0%,100%{ box-shadow:0 4px 12px rgba(123,90,200,.16); } 50%{ box-shadow:0 6px 20px rgba(123,90,200,.42); } }
@keyframes psShimmer { 0%{ transform:translateX(-130%); } 55%,100%{ transform:translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .pstatus, .pstatus--low, .pstatus--soon { animation:none !important; }
  .pstatus--soon::after { display:none; }
}

/* Notify-me block (replaces purchase actions for oos / coming soon) */
.notify-box { border:1px solid var(--line); background:var(--surface-2); border-radius:16px; padding:14px; }
.notify-box .nb-head { display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--forest); margin-bottom:4px; }
.notify-box .nb-sub { font-size:.84rem; color:var(--ink-3); margin-bottom:10px; }
.notify-box .nb-row { display:flex; gap:8px; }
.notify-box input { flex:1; padding:.7rem .9rem; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font:inherit; }
.notify-box input:focus { outline:none; border-color:var(--leaf); box-shadow:var(--ring); }
.notify-box.done .nb-row { display:none; }
.notify-box .nb-ok { display:none; align-items:center; gap:.4rem; color:var(--leaf-600); font-weight:700; font-size:.9rem; }
.notify-box.done .nb-ok { display:flex; }
.cart-warn { display:flex; align-items:center; gap:.5rem; background:#fde6e2; color:#a32b1b; border:1px solid #f3b6ab;
  border-radius:12px; padding:.6rem .8rem; font-weight:600; font-size:.88rem; }
[data-theme="dark"] .cart-warn { background:#371814; color:#ff9d8a; border-color:#5e271f; }

/* status placements + disabled purchase controls */
.pd-statusrow { margin-bottom:10px; }
.pd-title + .pd-rating, .pd-statusrow + .pd-title { margin-top:2px; }
.pd-bb-status { display:inline-flex; align-items:center; }
@media (max-width:430px){ .pd-bb-status { display:none; } }
.btn.is-disabled { opacity:.5; pointer-events:none; filter:grayscale(.25); }

/* avatar thumbnails (admin table) */
.av-img { background:#fff !important; padding:0 !important; overflow:hidden; }
.av-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Variant posters (product detail) ---------- */
.vposters { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.vposter { position:relative; border-radius:var(--r); border:1px solid var(--line); overflow:hidden; padding:14px 8px 16px; text-align:center;
  background:radial-gradient(120px 80px at 50% 38%, rgba(143,227,181,.30), transparent 72%), linear-gradient(180deg, var(--surface), var(--surface-2));
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .2s; }
.vposter:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--mint); }
.vp-stage { height:118px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(180deg, #FFFFFF, #F6FAF6); }
.vp-stage img { width:auto; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(15,61,46,.18)); }
.vp-qty { font-weight:800; color:var(--forest); margin-top:6px; }
.vp-sub { font-size:.74rem; color:var(--ink-3); }
.vp-price { margin-top:6px; font-weight:800; color:var(--leaf-600); }

/* Interactive variant cards */
.vposter { cursor:pointer; -webkit-user-select:none; user-select:none; outline:none; }
.vposter:focus-visible { box-shadow:0 0 0 3px var(--mint), var(--shadow); border-color:var(--leaf-600); }
.vposter.selected { border-color:var(--leaf-600); box-shadow:0 0 0 2px var(--leaf-600), 0 14px 30px rgba(15,61,46,.16); transform:translateY(-4px);
  background:radial-gradient(120px 80px at 50% 38%, rgba(143,227,181,.42), transparent 72%), linear-gradient(180deg, var(--surface), var(--surface-2)); }
.vposter.selected .vp-qty { color:var(--leaf-700, var(--forest)); }
/* "Selected" badge + animated check */
.vp-selbadge { position:absolute; top:8px; left:8px; z-index:3; display:inline-flex; align-items:center; gap:.28rem;
  font-size:.66rem; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--leaf-600);
  border-radius:999px; padding:.22rem .5rem .22rem .42rem; box-shadow:0 4px 10px rgba(15,61,46,.28);
  opacity:0; transform:scale(.6) translateY(-4px); transition:opacity .2s, transform .26s cubic-bezier(.2,1.3,.4,1); pointer-events:none; }
.vposter.selected .vp-selbadge { opacity:1; transform:scale(1) translateY(0); }
.vp-selbadge svg { display:block; }
/* Stock badge */
.vp-stockbadge { position:absolute; top:8px; right:8px; z-index:3; font-size:.62rem; font-weight:800; letter-spacing:.02em;
  border-radius:999px; padding:.2rem .48rem; }
.vp-stockbadge.oos { color:#fff; background:#c0392b; }
.vp-stockbadge.low { color:#7a4f00; background:#ffe7b3; border:1px solid #f2c965; }
/* Out-of-stock card */
.vposter.is-oos { cursor:not-allowed; opacity:.62; filter:grayscale(.35); }
.vposter.is-oos:hover { transform:none; box-shadow:none; border-color:var(--line); }
.vposter.is-oos .vp-stage img { filter:grayscale(.5) drop-shadow(0 8px 12px rgba(15,61,46,.10)); }
/* Selected-info panel */
.vp-selected:empty { display:none; }
.vp-selected { border:1px solid var(--mint); background:var(--mint-soft); border-radius:14px; padding:.7rem .85rem; }
.vp-selected.flash { animation:vpFlash .5s ease; }
@keyframes vpFlash { 0%{ background:var(--mint); } 100%{ background:var(--mint-soft); } }
.vp-sel-name { font-weight:800; color:var(--forest); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.vp-sel-meta { font-size:.82rem; color:var(--ink-2); margin-top:.18rem; }
/* Action bar */
.vp-actions { display:flex; flex-wrap:wrap; gap:10px; }
.vp-actions .btn { flex:1 1 auto; }
.vp-actions .vp-cart { flex:0 1 auto; }
@media (max-width:560px){ .vp-actions .btn { flex:1 1 100%; } }
.pulse-cta { animation:vpPulse 1.1s ease 2; }
@keyframes vpPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(58,168,109,.0); } 50%{ box-shadow:0 0 0 8px rgba(58,168,109,.28); } }
/* Toast */
.vp-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px); z-index:1200;
  background:var(--forest); color:#fff; font-weight:600; font-size:.86rem; padding:.7rem 1.1rem; border-radius:999px;
  box-shadow:0 12px 30px rgba(15,61,46,.32); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:90vw; }
.vp-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* USP chip strip */
.usp-strip { display:flex; flex-wrap:wrap; gap:8px; }
.usp-chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--forest-700);
  background:var(--mint-soft); border:1px solid var(--mint); border-radius:999px; padding:.35rem .7rem; }
.usp-chip svg { color:var(--leaf-600); }

/* ---------- Hero card quick-order CTAs ---------- */
.hero-card-eyebrow { font-size:.8rem; font-weight:800; color:var(--leaf-600); margin-bottom:8px; }
.hero-card-cta { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.hero-card-cta .js-qorder { width:100%; }
.hero-card-link { font-size:.86rem; font-weight:700; color:var(--leaf-600); }
.hero-card-link:hover { text-decoration:underline; }

/* ---------- Floating quick-buy widget ---------- */
.qbuy { position:fixed; right:22px; bottom:22px; z-index:120; width:308px; max-width:calc(100vw - 32px);
  opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.qbuy.in { opacity:1; transform:none; }
.qbuy.hide { opacity:0; transform:translateY(22px); pointer-events:none; }
.qbuy-fab { display:none; }
.qbuy-card { position:relative; text-align:center; padding:20px 18px 16px; border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,250,245,.95));
  border:1px solid var(--glass-brd); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-lg); }
.qbuy-flag { position:absolute; top:-11px; right:16px; background:var(--gold); color:#3a2c06; font-weight:800;
  font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; box-shadow:var(--shadow); }
.qbuy-x { position:absolute; top:10px; left:10px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-3); background:var(--surface-2); border:1px solid var(--line); font-size:1.1rem; line-height:1; }
.qbuy-x:hover { color:var(--forest); }
.qbuy-eyebrow { font-size:.78rem; font-weight:800; color:var(--leaf-600); margin-bottom:2px; }
.qbuy-stage { height:128px; border-radius:18px; display:grid; place-items:center; margin:6px 0 10px;
  background:radial-gradient(120px 80px at 50% 42%, rgba(143,227,181,.34), transparent 72%), linear-gradient(180deg, #FFFFFF, #F6FAF6); }
.qbuy-stage img { max-height:120px; width:auto; filter:drop-shadow(0 10px 14px rgba(15,61,46,.2)); }
.qbuy-title { font-family:"Fraunces",serif; color:var(--forest); font-size:1.08rem; line-height:1.2; }
.qbuy-meta { font-size:.8rem; color:var(--ink-3); margin-top:4px; }
.qbuy-price { font-family:"Fraunces",serif; font-weight:700; color:var(--forest); font-size:1.7rem; margin-top:6px; }
.qbuy-price span { font-size:.8rem; font-weight:600; color:var(--ink-3); font-family:var(--font-body); }
.qbuy-badges { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:10px 0 14px; }
.qb-badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.66rem; font-weight:700; color:var(--forest-700);
  background:var(--mint-soft); border:1px solid var(--mint); border-radius:999px; padding:.22rem .48rem; }
.qb-badge svg { color:var(--leaf-600); }
.qbuy-cta { width:100%; }
.qbuy-details { display:inline-block; margin-top:10px; font-size:.86rem; font-weight:700; color:var(--leaf-600); }
.qbuy-details:hover { text-decoration:underline; }
.qbuy-trust { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line); font-size:.68rem; color:var(--ink-3); }

/* ---------- Quick-order modal / slide-over ---------- */
.qmodal { position:fixed; inset:0; z-index:300; display:flex; justify-content:flex-end; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.qmodal.open { opacity:1; pointer-events:auto; }
.qmodal-scrim { position:absolute; inset:0; background:rgba(7,20,14,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.qmodal-panel { position:relative; width:440px; max-width:100%; height:100%; overflow-y:auto; background:var(--surface);
  padding:30px 28px; box-shadow:var(--shadow-lg); transform:translateX(44px); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.qmodal.open .qmodal-panel { transform:none; }
.qmodal-panel:focus { outline:none; }
.qmodal-close { position:absolute; top:16px; right:18px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); font-size:1.5rem; line-height:1; }
.qmodal-close:hover { color:var(--forest); }
.qmodal-head { display:flex; gap:16px; align-items:center; margin:6px 0 20px; }
.qmodal-stage { width:104px; height:124px; flex-shrink:0; border-radius:18px; display:grid; place-items:center;
  background:radial-gradient(80px 60px at 50% 42%, rgba(143,227,181,.34), transparent 72%), linear-gradient(180deg, #FFFFFF, #F6FAF6); }
.qmodal-stage img { max-height:116px; width:auto; filter:drop-shadow(0 8px 12px rgba(15,61,46,.2)); }
.qmodal-head h3 { font-family:"Fraunces",serif; color:var(--forest); font-size:1.25rem; margin:8px 0 4px; }
.qmodal-price { font-family:"Fraunces",serif; font-weight:700; color:var(--forest); font-size:1.6rem; }
.qmodal-price small { font-size:.8rem; font-weight:600; color:var(--ink-3); font-family:var(--font-body); }
.qmodal-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-bottom:18px; }
.qm-card { padding:14px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line); }
.qm-h { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--leaf-600); margin-bottom:8px; }
.qm-card .bullets { margin:0; }
.qmodal-controls { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:16px; }
.qm-qty { display:flex; align-items:center; gap:12px; font-weight:600; color:var(--forest); }
.qm-stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.qm-stepper button { width:36px; height:36px; font-size:1.2rem; color:var(--forest); background:var(--surface); }
.qm-stepper button:hover { background:var(--mint-soft); }
.qm-qty-val { min-width:30px; text-align:center; font-weight:800; color:var(--forest); }
.qm-total { font-size:.95rem; color:var(--ink-2); }
.qm-total b { font-family:"Fraunces",serif; font-size:1.5rem; color:var(--forest); margin-left:6px; }
.qm-auth { margin-bottom:14px; }
.qm-guest, .qm-addr { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--ink-2); padding:12px 14px; border-radius:14px; background:var(--mint-soft); border:1px solid var(--mint); }
.qm-guest a, .qm-addr a { color:var(--leaf-600); font-weight:700; }
.qmodal-checkout { width:100%; }
.qmodal .fineprint { margin-top:12px; font-size:.78rem; color:var(--ink-3); }

/* ---------- Responsive: mobile FAB + bottom-sheet ---------- */
@media (max-width:620px) {
  .qbuy { right:14px; bottom:14px; width:auto; }
  .qbuy-card { display:none; position:fixed; right:14px; bottom:14px; width:300px; max-width:calc(100vw - 28px); }
  .qbuy-fab { display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 9px; border-radius:999px;
    background:linear-gradient(180deg, #fff, var(--surface-2)); border:1px solid var(--glass-brd); box-shadow:var(--shadow-lg); }
  .qbuy-fab img { width:40px; height:40px; object-fit:contain; }
  .qbuy-fab span { text-align:left; line-height:1.1; }
  .qbuy-fab b { display:block; color:var(--forest); font-size:.95rem; }
  .qbuy-fab small { color:var(--ink-3); font-size:.72rem; }
  .qbuy.open .qbuy-card { display:block; }
  .qbuy.open .qbuy-fab { display:none; }
  .qmodal { align-items:flex-end; justify-content:center; }
  .qmodal-panel { width:100%; height:auto; max-height:92vh; border-radius:26px 26px 0 0; transform:translateY(48px); }
  .qmodal-grid { grid-template-columns:1fr; }
}

/* ---------- Product page: scroll perf + parallax + mobile buy bar ---------- */
.pd-figure { width:100%; display:grid; place-items:center; }
/* skip the heavy animated footer scene while it is off-screen => smoother scrolling above */
.footer-scene { content-visibility:auto; contain-intrinsic-size:1px 220px; }

/* the builder summary doubles as a sticky purchase panel on desktop */
@media (min-width:900px){
  .builder .pane-right { position:sticky; top:84px; align-self:start; }
}

/* mobile fixed purchase bar (only rendered on the product detail page) */
.pd-buybar { display:none; }
@media (max-width:620px){
  .pd-buybar { display:flex; align-items:center; gap:8px; position:fixed; left:10px; right:10px; bottom:10px; z-index:130;
    padding:9px 12px; border-radius:18px; background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-brd); box-shadow:var(--shadow-lg); }
  .pd-buybar-price { display:flex; flex-direction:column; line-height:1.05; margin-right:auto; }
  .pd-buybar-price span { font-size:.6rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
  .pd-buybar-price b { font-family:"Fraunces",serif; color:var(--forest); font-size:1.05rem; }
  .pd-buybar-price small { font-weight:600; color:var(--ink-3); font-size:.66rem; }
  .pd-buybar .btn { padding:.55rem .8rem; font-size:.82rem; }
  /* the product page has its own purchase bar => hide the global trial FAB here, and
     reserve space so the bar never covers the last content */
  body[data-route="products/milk"] .qbuy { display:none; }
  body[data-route="products/milk"] #main { padding-bottom:84px; }
}

/* lightbox / fullscreen preview */
.lightbox { position:fixed; inset:0; z-index:400; background:rgba(7,20,14,.84); display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s ease; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lightbox.open { opacity:1; pointer-events:auto; }
.lightbox img { max-width:92vw; max-height:86vh; border-radius:var(--r); box-shadow:var(--shadow-lg); transform:scale(.95); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.lightbox.open img { transform:scale(1); }
.lightbox .lb-close { position:absolute; top:16px; right:18px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; font-size:1.6rem; line-height:1; }
.lightbox .lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; font-size:1.8rem; line-height:1; }
.lightbox .lb-nav:hover, .lightbox .lb-close:hover { background:rgba(255,255,255,.26); }
.lightbox .lb-prev { left:16px; } .lightbox .lb-next { right:16px; }

/* ---------- Admin CMS product editor (slide-over) ---------- */
.cms-modal { position:fixed; inset:0; z-index:320; display:flex; justify-content:flex-end; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.cms-modal.open { opacity:1; pointer-events:auto; }
.cms-scrim { position:absolute; inset:0; background:rgba(7,20,14,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cms-panel { position:relative; width:680px; max-width:100%; height:100%; display:flex; flex-direction:column; background:var(--surface); box-shadow:var(--shadow-lg); transform:translateX(50px); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.cms-modal.open .cms-panel { transform:none; }
.cms-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid var(--line); }
.cms-head h3 { font-family:"Fraunces",serif; color:var(--forest); font-size:1.4rem; }
.cms-x { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); font-size:1.5rem; line-height:1; flex-shrink:0; }
.cms-x:hover { color:var(--forest); }
.cms-tabs { padding:0 24px; margin:0; }
.cms-body { flex:1; overflow-y:auto; padding:22px 24px; }
.cms-body .table-wrap { overflow-x:auto; }
.cms-body .input { padding:.45rem .6rem; }
.cms-foot { display:flex; align-items:center; gap:8px; padding:16px 24px; border-top:1px solid var(--line); background:var(--surface-2); }
.cms-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--forest); color:#fff; padding:13px 20px; border-radius:14px; box-shadow:var(--shadow-lg); z-index:400; opacity:0; transition:opacity .3s, transform .3s; font-size:.92rem; }
[data-theme="dark"] .cms-toast { background:var(--leaf); color:#06140d; }
.cms-toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:620px){
  .cms-modal { align-items:flex-end; justify-content:center; }
  .cms-panel { width:100%; height:auto; max-height:94vh; border-radius:24px 24px 0 0; transform:translateY(40px); }
  .cms-head, .cms-tabs, .cms-body, .cms-foot { padding-left:16px; padding-right:16px; }
}
.pd-title { font-family:"Fraunces",serif; color:var(--forest); font-size:2rem; }
.pd-rating { display:flex; align-items:center; gap:8px; margin:8px 0 16px; color:var(--ink-3); font-size:.9rem; }
.nutri { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px){ .nutri { grid-template-columns:repeat(4,1fr); } }
.nutri .n { padding:14px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); text-align:center; }
.nutri .n b { display:block; font-family:"Fraunces",serif; font-size:1.3rem; color:var(--leaf-600); }
.nutri .n small { color:var(--ink-3); font-size:.74rem; }

/* ---------- Blog ---------- */
.blog-grid { display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:680px){ .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .blog-grid { grid-template-columns:repeat(3,1fr); } }
.post { border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.post:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.post .cover { height:160px; background:var(--grad-leaf); display:grid; place-items:center; font-size:2.6rem; }
.post .pbody { padding:20px; }
.post .cat { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--leaf-600); }
.post h3 { color:var(--forest); font-size:1.12rem; margin:8px 0; font-family:"Fraunces",serif; }
.post p { color:var(--ink-2); font-size:.9rem; }
.post .meta { color:var(--ink-3); font-size:.8rem; margin-top:12px; }

/* chips row (filters / categories) */
.chips-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chips-row .chip-f { padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:.85rem; font-weight:600; color:var(--ink-2); cursor:pointer; }
.chips-row .chip-f.active { background:var(--forest); color:#fff; border-color:var(--forest); }
[data-theme="dark"] .chips-row .chip-f.active { background:var(--leaf); color:#06140d; }

/* ---------- Calendar ---------- */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .dow { text-align:center; font-size:.72rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; padding:6px 0; }
.cal .day { aspect-ratio:1; border-radius:12px; border:1px solid var(--line); background:var(--surface); padding:6px; font-size:.82rem; color:var(--ink-2); position:relative; }
.cal .day.muted { opacity:.4; }
.cal .day.deliver { background:var(--mint-soft); border-color:var(--mint); color:var(--forest-700); font-weight:700; }
.cal .day.paused { background:var(--gold-soft); border-color:rgba(232,184,100,.5); }
.cal .day .d-dot { position:absolute; bottom:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--leaf); }

/* ---------- Pills / quick actions ---------- */
.qa-row { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .qa-row { grid-template-columns:repeat(4,1fr); } }
.qa-tile { padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); text-align:center; transition:transform .2s, box-shadow .2s; }
.qa-tile:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.qa-tile .ic { width:46px; height:46px; border-radius:14px; background:var(--mint-soft); color:var(--leaf-600); display:grid; place-items:center; margin:0 auto 10px; }
.qa-tile .t { font-weight:700; color:var(--forest); font-size:.92rem; }
.qa-tile .s { color:var(--ink-3); font-size:.78rem; margin-top:2px; }

/* ---------- Notifications / activity feed ---------- */
.feed { display:grid; gap:2px; }
.feed .item { display:flex; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line); }
.feed .item:last-child { border-bottom:none; }
.feed .item .ic { width:38px; height:38px; border-radius:12px; background:var(--mint-soft); color:var(--leaf-600); display:grid; place-items:center; flex-shrink:0; }
.feed .item .t { font-weight:600; color:var(--forest); font-size:.92rem; }
.feed .item .s { color:var(--ink-3); font-size:.82rem; }
.feed .item.unread { background:var(--surface-2); border-radius:12px; }

/* ---------- Misc helpers ---------- */
.stack { display:grid; gap:20px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.muted-sm { color:var(--ink-3); font-size:.84rem; }
.notice { padding:14px 16px; border-radius:14px; background:var(--mint-soft); border:1px solid var(--mint); color:var(--forest-700); font-size:.9rem; display:flex; gap:10px; align-items:flex-start; }
.notice.warn { background:var(--gold-soft); border-color:rgba(232,184,100,.5); color:#8a6a1c; }
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:30px}
.hl { color:var(--leaf-600); font-weight:700; }
.big-num { font-family:"Fraunces",serif; font-weight:700; color:var(--forest); }

/* page reveal for app content */
.app .content .reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.app .content .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .app .content .reveal { opacity:1; transform:none; } .sidebar { transition:none; } }

/* footer simplified inside marketing inner pages reuse existing .footer */
.inner-hero { background:var(--grad-hero); border-bottom:1px solid var(--line); }
.inner-hero .wrap { padding-block: clamp(34px,6vw,64px); }
.inner-hero .eyebrow { display:block; margin-bottom:10px; }
.inner-hero h1 { font-family:"Fraunces",serif; color:var(--forest); font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.02em; line-height:1.05; }
.inner-hero p { color:var(--ink-2); margin-top:14px; max-width:60ch; font-size:1.08rem; }

/* ---------- Brand logo (single source: assets/img/logo.svg) ---------- */
.logo-img { height: 34px; width: auto; display: block; object-fit: contain; }
.logo-img.logo-lg { height: 54px; }
.nav .logo-img { height: 34px; }
.sb-brand .logo-img { height: 30px; }
.footer .about .logo-img { height: 56px; }   /* prominent footer anchor (~40% larger) */
.footer .foot-logo { margin-bottom: 6px; }
@media (max-width: 559px){ .footer .about .logo-img { height: 50px; margin-inline: auto; } }
.foot-tag { margin-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf-600); }
/* the official mark already carries the tagline; hide the duplicate text line in the footer */
.footer .about .foot-tag { display: none; }
/* the logo + product images are theme-INDEPENDENT: never filter/brightness by theme */
@media (max-width: 560px){ .nav .logo-img { height: 30px; } }

/* ---------- Mobile menu (public) ---------- */
/* Full-screen premium mobile menu (frosted overlay, staggered) */
.mobile-menu { position:fixed; inset:0; z-index:1100; display:flex; flex-direction:column;
  background:rgba(244,250,246,.9); backdrop-filter:saturate(160%) blur(22px); -webkit-backdrop-filter:saturate(160%) blur(22px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s ease, visibility .32s; }
[data-theme="dark"] .mobile-menu { background:rgba(9,22,16,.92); }
.mobile-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
.mm-inner { display:flex; flex-direction:column; gap:20px; height:100%; overflow-y:auto;
  padding:16px 22px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.mm-head { display:flex; align-items:center; justify-content:space-between; }
.mm-logo img { height:30px; width:auto; display:block; animation:mmFloat 3.2s ease-in-out infinite; }
.mm-close { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line);
  background:var(--surface); color:var(--forest); cursor:pointer; transition:transform .25s, background .2s; }
.mm-close:hover { transform:rotate(90deg); background:var(--mint-soft); }
.mm-close:focus-visible { outline:none; box-shadow:var(--ring); }
.mm-links { display:flex; flex-direction:column; }
.mm-links a { display:flex; align-items:center; justify-content:space-between; padding:.7rem 0; border-bottom:1px solid var(--line);
  font-family:"Fraunces",serif; font-size:1.5rem; font-weight:500; color:var(--forest);
  opacity:0; transform:translateY(16px); }
.mobile-menu.open .mm-links a { opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i) * 55ms + 110ms); }
.mm-links a svg { color:var(--leaf); opacity:.45; transition:transform .2s, opacity .2s; }
.mm-links a:hover svg, .mm-links a.active svg { opacity:1; transform:translateX(4px); }
.mm-links a.active { color:var(--leaf-600); }
.mm-quick-h { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.mm-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:380px){ .mm-grid { grid-template-columns:repeat(3, 1fr); } }
.mm-tile { display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:.85rem .3rem; border-radius:16px;
  background:var(--surface); border:1px solid var(--line); color:var(--forest); font-size:.7rem; font-weight:700; cursor:pointer; text-align:center;
  box-shadow:var(--shadow-sm); opacity:0; transform:translateY(14px) scale(.95); }
.mobile-menu.open .mm-tile { opacity:1; transform:none; transition:opacity .4s ease, transform .4s cubic-bezier(.2,.85,.3,1.1); transition-delay:calc(var(--i) * 45ms + 320ms); }
.mm-tile svg { color:var(--leaf-600); }
.mm-tile:hover, .mm-tile:active { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--mint); }
.mm-cta { margin-top:auto; display:flex; gap:10px; }
.mm-cta .btn { flex:1; }
@keyframes mmFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* inline nav (9 links + CTAs) only fits ~1280px+; below that use the hamburger */
@media (min-width:1280px){ .nav-links { display:flex; } .nav-cta { display:inline-flex; } #navBurger { display:none; } .mobile-menu { display:none !important; } }
/* JS fit-guard: if the full inline nav would overflow the row at the current width
   (font-width / scrollbar / zoom variance can tip the hairline 1280 breakpoint into
   overflow and clip "Subscribe"), layout.js adds body.nav-compact to fall back to the
   hamburger — exactly the mobile header, which always fits. Higher specificity + !important
   beats the min-width:1280 rules above. */
body.nav-compact .nav-links,
body.nav-compact .nav-cta { display:none !important; }
body.nav-compact #navBurger { display:grid !important; }
body.nav-compact .mobile-menu { display:flex !important; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mm-links a, .mm-tile { transition:none !important; }
  .mm-logo img { animation:none; }
  .mobile-menu.open .mm-links a, .mobile-menu.open .mm-tile { opacity:1; transform:none; }
}
code { background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:.08em .4em; font-size:.86em; font-family:ui-monospace,Menlo,monospace; color:var(--leaf-600); }

/* ---------- Shipping & Delivery policy document ---------- */
.policy { padding: 8px 0 48px; }
.policy-illus { max-width: 720px; margin: 0 auto 26px; }
.policy-illus .sv-svg { width: 100%; height: auto; display: block; }
.policy-updated { text-align: center; font-size: .8rem; color: var(--ink-3); margin: 0 0 14px; }
.policy-lede { max-width: 68ch; margin: 0 auto; font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); text-align: center; }
.policy-sections { list-style: none; margin: 26px auto 0; padding: 0; max-width: 760px; display: grid; gap: 14px; }
.policy-sec { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s; }
.policy-sec:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--mint); }
.ps-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #fff; background: var(--grad-leaf); box-shadow: 0 4px 10px rgba(31,174,102,.3); }
.ps-body h2 { font-family: 'Fraunces', Georgia, serif; color: var(--forest); font-size: 1.2rem; line-height: 1.25; margin: 3px 0 9px; }
.ps-body p { color: var(--ink-2); line-height: 1.7; margin: 0 0 9px; }
.ps-body p:last-child { margin-bottom: 0; }
.ps-list { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 7px; }
.ps-list li { position: relative; padding-left: 24px; color: var(--ink-2); line-height: 1.55; }
.ps-list li::before { content: ""; position: absolute; left: 4px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.ps-contact { margin-top: 10px; background: var(--mint-soft); border: 1px solid var(--mint); border-radius: 14px; padding: 14px 16px; }
.ps-contact .psc-name { font-weight: 800; color: var(--forest); margin: 0 0 8px; }
.ps-contact p { display: flex; gap: 10px; align-items: baseline; margin: 5px 0; line-height: 1.5; }
.ps-contact .psc-k { color: var(--ink-3); font-weight: 700; min-width: 66px; flex: 0 0 auto; }
.ps-contact a { color: var(--leaf-600); }
.policy-foot { text-align: center; max-width: 62ch; margin: 28px auto 0; color: var(--forest); font-weight: 600; font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 560px) {
  .policy-sec { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .policy-lede { text-align: left; }
  .ps-contact p { flex-wrap: wrap; gap: 4px 10px; }
}
.ps-subsec { margin-top: 10px; }
.ps-sub { font-weight: 800; color: var(--forest); font-size: .98rem; margin: 8px 0 5px; }

/* ============================================================
   Careers page (public) — Why join / roles / values / hiring /
   benefits / Apply Now form. Brand-token driven, responsive.
   ============================================================ */
.careers{padding:clamp(20px,4vw,44px) 0 8px}
.careers .cr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:clamp(28px,5vw,52px)}
.cr-card{background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:18px;padding:22px 20px;box-shadow:0 10px 30px -18px rgba(11,31,23,.25);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cr-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px -20px rgba(11,31,23,.32)}
.cr-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gold-soft,#FBF0D9);color:var(--leaf-600,#169A57);margin-bottom:12px}
.cr-card h3{font:600 1.06rem/1.3 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:0 0 6px}
.cr-card p{margin:0;color:var(--ink-3,#6B7E74);font-size:.92rem;line-height:1.55}
.cr-block{margin:0 0 clamp(28px,5vw,52px)}
.cr-h{font:600 clamp(1.3rem,2.6vw,1.9rem)/1.2 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:0 0 10px}
.cr-lede{color:var(--ink-2,#3A4D44);max-width:60ch;margin:0 0 16px;line-height:1.6}
.cr-chips{display:flex;flex-wrap:wrap;gap:10px}
.cr-chip{display:inline-flex;align-items:center;font:600 .86rem/1 var(--sans,"Hanken Grotesk",system-ui);color:var(--ink-2,#233b30);background:var(--milk-2,#F2F6F1);border:1px solid var(--line,#e1e9e3);padding:9px 15px;border-radius:99px;transition:background .25s,border-color .25s,color .25s}
.cr-chip:hover{background:#e8f6ee;border-color:rgba(31,174,102,.4);color:var(--leaf-600,#169A57)}
.cr-chip.cr-benefit::before{content:"✓";color:var(--leaf,#1FAE66);font-weight:800;margin-right:7px}
.cr-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 clamp(28px,5vw,52px)}
.cr-panel{background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:20px;padding:clamp(20px,3vw,30px);box-shadow:0 10px 30px -20px rgba(11,31,23,.22)}
.cr-panel.cr-life{background:linear-gradient(160deg,#f3f9f4,#eef6f0)}
.cr-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cr-list li{position:relative;padding-left:28px;color:var(--ink-2,#3A4D44);line-height:1.5}
.cr-list li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--gold-soft,#FBF0D9);box-shadow:inset 0 0 0 2px var(--leaf,#1FAE66)}
.cr-note{margin:14px 0 0;color:var(--ink-3,#6B7E74);font-size:.88rem;font-style:italic}
.cr-life p{color:var(--ink-2,#3A4D44);line-height:1.65;margin:0 0 12px}
.cr-steps{list-style:none;margin:0;padding:0;counter-reset:cr;display:grid;gap:13px}
.cr-steps li{counter-increment:cr;position:relative;padding-left:44px;color:var(--ink-2,#3A4D44);line-height:1.5;min-height:32px;display:flex;align-items:center}
.cr-step-n{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--leaf,#1FAE66);color:#fff;font-weight:800;font-size:.9rem}
.cr-step-n::before{content:counter(cr)}
.cr-apply{background:linear-gradient(165deg,#ffffff,#f4faf5);border:1px solid var(--line,#dfeae2);border-radius:24px;padding:clamp(22px,4vw,40px);box-shadow:0 26px 60px -34px rgba(11,31,23,.4);scroll-margin-top:90px}
.cr-apply-head{text-align:center;margin-bottom:22px}
.cr-apply-head .cr-lede{margin-inline:auto}
.cr-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cr-f{display:flex;flex-direction:column;gap:6px}
.cr-f>span{font:600 .82rem/1.3 var(--sans,"Hanken Grotesk",system-ui);color:var(--ink-2,#3A4D44)}
.cr-f>span i{color:var(--danger,#c0392b);font-style:normal}
.cr-f>span small{color:var(--ink-3,#6B7E74);font-weight:500}
.cr-f .input{width:100%}
.cr-f.cr-full{grid-column:1/-1}
.cr-form input[type=file].input{padding:9px 12px;background:var(--milk-2,#F2F6F1);cursor:pointer}
.cr-submit-row{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.cr-status{margin:0;font-size:.9rem;font-weight:600}
.cr-status.ok{color:var(--leaf-600,#169A57)}
.cr-status.err{color:var(--danger,#c0392b)}
@media (max-width:820px){.careers .cr-grid{grid-template-columns:1fr 1fr}.cr-two{grid-template-columns:1fr}}
@media (max-width:560px){.careers .cr-grid{grid-template-columns:1fr}.cr-form{grid-template-columns:1fr}}
/* Careers admin — rating stars */
.cr-stars{display:inline-flex;gap:3px}
.cr-star{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1;color:#d9e2dc;padding:0 1px;transition:color .15s}
.cr-star.on,.cr-star:hover{color:var(--gold,#E8B864)}

/* ============================================================
   About page (rich, CMS-hydratable) + farm-to-home journey timeline
   ============================================================ */
.ab-page{--abg:#f3f9f4}
.ab-narrow{max-width:820px}
.ab-h{font:600 clamp(1.4rem,2.8vw,2.15rem)/1.18 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:.2em 0 .5em;letter-spacing:-.01em}
.ab-rich{color:var(--ink-2,#3A4D44);line-height:1.7;font-size:1.02rem}
.ab-rich p{margin:0 0 1em}.ab-rich ul{margin:.6em 0 0;padding-left:0;list-style:none;display:grid;gap:9px}
.ab-rich li{position:relative;padding-left:26px}.ab-rich li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--gold-soft,#FBF0D9);box-shadow:inset 0 0 0 2px var(--leaf,#1FAE66)}
.ab-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.ab-panel{background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:18px;padding:24px;box-shadow:0 12px 30px -22px rgba(11,31,23,.28)}
.ab-panel h3{font:600 1.12rem/1.3 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:10px 0 6px}
.ab-panel p{margin:0;color:var(--ink-3,#6B7E74);line-height:1.6}
.ab-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--gold-soft,#FBF0D9);color:var(--leaf-600,#169A57)}
.ab-band{background:linear-gradient(180deg,var(--abg),#eef6f0);margin-top:8px;padding:clamp(28px,5vw,56px) 0}
.ab-band-head{text-align:center;max-width:640px;margin:0 auto 22px}
.ab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ab-card{background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:18px;padding:22px 20px;box-shadow:0 12px 30px -24px rgba(11,31,23,.26);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ab-card:hover{transform:translateY(-4px);box-shadow:0 20px 46px -22px rgba(11,31,23,.3)}
.ab-card .ab-ic{margin-bottom:12px}
.ab-card h3{font:600 1.04rem/1.3 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:0 0 6px}
.ab-card p{margin:0;color:var(--ink-3,#6B7E74);font-size:.92rem;line-height:1.55}
.ab-split-wrap{display:grid;gap:20px}
.ab-split{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center;background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:20px;padding:clamp(18px,3vw,30px);box-shadow:0 12px 30px -24px rgba(11,31,23,.24)}
.ab-split.ab-rev{grid-template-columns:1fr 180px}.ab-split.ab-rev .ab-split-media{order:2}
.ab-split-media{font-size:76px;text-align:center;filter:drop-shadow(0 10px 14px rgba(11,31,23,.14));animation:abFloat 6s ease-in-out infinite}
.ab-trust{text-align:center}
.ab-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px}
.ab-kpi{background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:16px;padding:18px 10px}
.ab-kpi .n{font:600 clamp(1.3rem,2.4vw,1.9rem)/1 var(--serif,"Fraunces",serif);color:var(--leaf-600,#169A57)}
.ab-kpi .l{font-size:.8rem;color:var(--ink-3,#6B7E74);margin-top:6px}
/* journey timeline */
.jt-wrap{padding:clamp(30px,5vw,60px) 0}
.jt-head{text-align:center;max-width:640px;margin:0 auto 30px}
.jt-head h2{font:600 clamp(1.4rem,2.8vw,2.1rem)/1.2 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:.15em 0 0}
.jt-track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;position:relative;overflow-x:auto;scroll-snap-type:x proximity}
.jt-track::before{content:"";position:absolute;left:5%;right:5%;top:34px;height:3px;background:linear-gradient(90deg,var(--gold,#E8B864),var(--leaf,#1FAE66));border-radius:3px;opacity:.5}
.jt-step{scroll-snap-align:center;text-align:center;padding:0 6px;position:relative}
.jt-dot{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;margin:0 auto 12px;border-radius:50%;background:var(--surface,#fff);border:2px solid var(--leaf,#1FAE66);font-size:30px;box-shadow:0 10px 22px -12px rgba(11,31,23,.3);animation:abFloat 5.5s ease-in-out infinite}
.jt-step:nth-child(even) .jt-dot{animation-delay:.6s}
.jt-body b{display:block;font:600 .95rem/1.25 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin-bottom:4px}
.jt-body p{margin:0;font-size:.82rem;color:var(--ink-3,#6B7E74);line-height:1.45}
@keyframes abFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr 1fr}.ab-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.ab-two,.ab-split,.ab-split.ab-rev{grid-template-columns:1fr}.ab-split.ab-rev .ab-split-media{order:0}.ab-split-media{font-size:56px}
  .jt-track{grid-auto-flow:row;grid-auto-columns:auto}.jt-track::before{left:34px;right:auto;top:5%;bottom:5%;width:3px;height:auto}.jt-step{display:grid;grid-template-columns:68px 1fr;align-items:center;text-align:left;gap:14px}.jt-dot{margin:0}}
@media (max-width:520px){.ab-grid{grid-template-columns:1fr}.ab-kpis{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.ab-split-media,.jt-dot{animation:none !important}}

/* ---- Our Farmers page (reuses .ab-*/.jt-*; fm-* = interactive farm cards) ---- */
.fm-sub{max-width:600px;margin:.6em auto 0;color:var(--ink-3,#6B7E74);line-height:1.6;font-size:.95rem}
.fm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;align-items:start}
.fm-card{background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:18px;box-shadow:0 12px 30px -24px rgba(11,31,23,.26);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.fm-card:hover{transform:translateY(-4px);box-shadow:0 20px 46px -22px rgba(11,31,23,.3)}
.fm-card.open{box-shadow:0 24px 50px -22px rgba(11,31,23,.34)}
.fm-card-btn{width:100%;display:flex;align-items:center;gap:13px;padding:18px 18px 14px;background:none;border:none;cursor:pointer;text-align:left;color:inherit;font:inherit}
.fm-av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--gold-soft,#FBF0D9);font-size:26px;line-height:1}
.fm-hd{flex:1;min-width:0;display:grid;gap:2px}
.fm-hd b{font:600 1.02rem/1.25 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17)}
.fm-hd small{display:inline-flex;align-items:center;gap:4px;color:var(--ink-3,#6B7E74);font-size:.82rem}
.fm-hd small svg{opacity:.7}
.fm-chev{flex:none;color:var(--leaf-600,#169A57);display:grid;place-items:center;transition:transform .3s ease}
.fm-card.open .fm-chev{transform:rotate(90deg)}
.fm-meta{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 16px}
.fm-meta span{font-size:.74rem;font-weight:600;color:var(--leaf-600,#169A57);background:var(--mint-soft,#eef6ef);border-radius:999px;padding:4px 10px}
.fm-detail{overflow:hidden;border-top:1px solid var(--line,#e7ece8);padding:0 18px;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease,padding .4s ease}
.fm-card.open .fm-detail{max-height:320px;opacity:1;padding:16px 18px}
.fm-detail blockquote{margin:0;color:var(--ink-2,#3A4D44);line-height:1.6;font-size:.92rem;font-style:italic}
.fm-who{margin-top:10px;font-size:.8rem;font-weight:600;color:var(--ink,#0B1F17)}
.fm-join{text-align:center;background:linear-gradient(180deg,#fff,var(--mint-soft,#f2f9f3));border:1px solid var(--line,#e7ece8);border-radius:22px;padding:clamp(24px,4vw,40px)}
.fm-join .ab-h{margin-top:.1em}
.fm-join-cta{margin-top:18px}
@media (max-width:900px){.fm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fm-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fm-card,.fm-chev,.fm-detail{transition:none !important}}

/* ---- FAQ hub (searchable + category-tabbed; backend-hydrated) ---- */
.faqhub{max-width:820px;margin:0 auto}
.faqhub-search{display:flex;align-items:center;gap:10px;background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:14px;padding:12px 16px;box-shadow:0 12px 30px -24px rgba(11,31,23,.28)}
.faqhub-search svg{color:var(--ink-3,#6B7E74);flex:none}
.faqhub-search input{flex:1;border:none;outline:none;background:none;font:inherit;font-size:1rem;color:var(--ink,#0B1F17)}
.faqhub-clear{border:none;background:var(--mint-soft,#eef6ef);color:var(--ink-3,#6B7E74);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;flex:none}
.faqhub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.faqhub-tab{border:1px solid var(--line,#e7ece8);background:var(--surface,#fff);color:var(--ink-2,#37463d);border-radius:999px;padding:7px 15px;font-size:.86rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.faqhub-tab:hover{border-color:var(--leaf,#1FAE66)}
.faqhub-tab.active{background:var(--leaf-600,#169A57);border-color:var(--leaf-600,#169A57);color:#fff}
.faqhub-group{margin-bottom:26px}
.faqhub-cat{font:600 1.05rem/1.3 var(--serif,"Fraunces",serif);color:var(--ink,#0B1F17);margin:0 0 10px;padding-left:2px}
.faqhub-empty{text-align:center;padding:40px 20px;color:var(--ink-3,#6B7E74)}
.faqhub-empty svg{color:var(--line,#cdd8ce)}
.faqhub-empty p{font-weight:600;color:var(--ink-2,#37463d);margin:12px 0 4px}
.faqhub-empty span{font-size:.9rem}
.faqhub-foot{text-align:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--line,#eef2ee);color:var(--ink-3,#6B7E74);font-size:.92rem}
.faqhub-foot a{color:var(--leaf-600,#169A57);font-weight:600}
@media (prefers-reduced-motion:reduce){.faqhub-tab{transition:none !important}}

/* ---- Related products rail (PDP carousel; backend-driven, lazy) ---- */
.rel-wrap{background:var(--milk-2,#f4faf5);padding:clamp(34px,5vw,60px) 0}
.rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.rel-head-txt .eyebrow{color:var(--leaf-600,#169A57)}
.rel-head .display{margin:.1em 0 0}
.rel-nav{display:flex;gap:8px;flex:none}
.rel-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line,#e7ece8);background:var(--surface,#fff);color:var(--forest,#0F3D2E);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -14px rgba(11,31,23,.4);transition:background .2s,border-color .2s,opacity .2s,transform .2s}
.rel-arrow:hover:not(:disabled){background:var(--mint-soft,#eef6ef);border-color:var(--leaf,#1FAE66);transform:translateY(-1px)}
.rel-arrow:disabled{opacity:.35;cursor:default}
.rel-prev svg{transform:rotate(180deg)}
.rel-viewport{position:relative}
.rel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:6px 2px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.rel-track::-webkit-scrollbar{display:none}
.rel-track.dragging{cursor:grabbing;scroll-behavior:auto}
.rel-card{position:relative;flex:0 0 274px;scroll-snap-align:start;background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);border-radius:20px;overflow:hidden;box-shadow:0 14px 34px -26px rgba(11,31,23,.3);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;animation:relIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.rel-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(11,31,23,.36)}
@keyframes relIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rel-shot{position:relative;display:grid;place-items:center;height:190px;padding:16px;background:radial-gradient(150px 120px at 50% 44%,rgba(143,227,181,.34),transparent 72%),linear-gradient(180deg,#fff 0%,#f6faf6 100%);overflow:hidden}
.rel-shot::after{content:"";position:absolute;left:50%;bottom:12%;width:56%;height:20px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(15,61,46,.22),transparent 70%);filter:blur(7px)}
.rel-img{max-height:158px;width:auto;object-fit:contain;position:relative;z-index:1;transition:transform .5s ease;filter:drop-shadow(0 12px 16px rgba(15,61,46,.18))}
.rel-card:hover .rel-img{transform:scale(1.07)}
.rel-emoji{font-size:3.4rem;position:relative;z-index:1}
.rel-glass{position:absolute;left:12px;bottom:12px;z-index:2;width:30px;height:30px;border-radius:9px;background:var(--surface,#fff);border:1px solid var(--line,#e7ece8);display:grid;place-items:center;color:var(--leaf-600,#169A57);box-shadow:0 6px 14px -8px rgba(11,31,23,.4)}
.rel-wish{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#e7ece8);background:var(--surface,#fff);color:var(--ink-3,#6b7c72);display:grid;place-items:center;cursor:pointer;transition:color .2s,transform .2s,background .2s}
.rel-wish:hover{transform:scale(1.08);color:#e0607a}
.rel-wish.on{color:#e0607a;background:#fff0f3;border-color:#f5c6d1}.rel-wish.on svg{fill:currentColor}
.rel-flag{position:absolute;top:12px;left:12px;z-index:2;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.32rem .55rem;border-radius:999px;color:#fff;box-shadow:0 6px 14px -8px rgba(11,31,23,.5)}
.rel-flag.best{background:linear-gradient(135deg,#E8B864,#d89b3c)}.rel-flag.new{background:var(--grad-leaf,linear-gradient(135deg,#1FAE66,#169A57))}.rel-flag.feat{background:var(--forest,#0F3D2E)}
.rel-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.rel-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rel-rating{font-size:.78rem;color:var(--ink-3,#6b7c72)}.rel-rating b{color:var(--forest,#0F3D2E)}
.rel-name{font:600 1.06rem/1.25 var(--serif,"Fraunces",serif);margin:2px 0 0}
.rel-name a{color:var(--ink,#0B1F17);text-decoration:none}.rel-name a:hover{color:var(--leaf-600,#169A57)}
.rel-desc{font-size:.86rem;color:var(--ink-3,#6b7c72);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.rel-price{font-size:1.05rem;color:var(--forest,#0F3D2E);margin-top:2px}.rel-price b{font-weight:800}.rel-price span{font-size:.8rem;font-weight:600;color:var(--ink-3,#6b7c72)}
.rel-price.soon{font-size:.9rem;font-weight:700;color:var(--gold-600,#b8860b)}
.rel-sub{font-size:.78rem;font-weight:700;color:var(--leaf-600,#169A57);text-decoration:none}.rel-sub:hover{text-decoration:underline}
.rel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.rel-actions .btn.sm{padding:.5rem .8rem;font-size:.82rem}
.rel-actions .rel-add,.rel-actions .rel-notify{flex:1 1 auto}
.rel-skel{pointer-events:none}.rel-skel .rel-shot{background:var(--milk-2,#f4faf5)}.rel-skel .rel-body{gap:10px;padding:16px}
@media (max-width:640px){.rel-card{flex:0 0 80vw;max-width:320px}.rel-head .rel-nav{display:none}.rel-track{scroll-snap-type:x mandatory}}
@media (prefers-reduced-motion:reduce){.rel-card{animation:none !important;transition:none !important}.rel-img{transition:none !important}.rel-track{scroll-behavior:auto}}
/* admin recommendations manager */
.reco-global{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem;color:var(--ink,#0B1F17);background:var(--mint-soft,#eef6ef);border:1px solid var(--line,#e7ece8);border-radius:12px;padding:11px 14px;margin-bottom:6px}
.reco-list{display:grid;gap:12px}
.reco-row{border:1px solid var(--line,#e7ece8);border-radius:14px;padding:12px 14px;display:grid;gap:10px;background:var(--surface,#fff)}
.reco-row-h{display:flex;align-items:center;gap:10px}
.reco-row-h b{font-size:.96rem}.reco-row-h .muted-sm{flex:1}
.reco-status{max-width:150px;padding:6px 10px;font-size:.82rem}
.reco-chips{display:flex;flex-wrap:wrap;gap:7px}
.reco-chip{border:1px solid var(--line,#e7ece8);background:var(--surface,#fff);color:var(--ink-2,#37463d);border-radius:999px;padding:5px 13px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.reco-chip:hover{border-color:var(--leaf,#1FAE66)}
.reco-chip.on{background:var(--leaf-600,#169A57);border-color:var(--leaf-600,#169A57);color:#fff}
.reco-rel{display:grid;gap:5px}.reco-rel>span{font-size:.8rem;font-weight:600;color:var(--ink-2,#37463d)}
.reco-rel-in{font-size:.85rem}

/* ---- Trial-Pack cashback benefit callout (homepage hero card) ---- */
.tp-benefit{position:relative;overflow:hidden;margin:14px 0 4px;text-align:left;border-radius:16px;padding:13px 15px;
  background:linear-gradient(135deg,#fff8ea 0%,#eefaf0 100%);border:1px solid var(--gold-soft,#f3e2bd);
  box-shadow:0 0 0 3px rgba(232,184,100,.10),0 14px 30px -20px rgba(184,134,60,.45)}
[data-theme="dark"] .tp-benefit{background:linear-gradient(135deg,rgba(232,184,100,.14),rgba(31,174,102,.12));border-color:rgba(232,184,100,.32)}
.tp-glow{position:absolute;top:-40%;left:-30%;width:70%;height:180%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.85),transparent 70%);transform:skewX(-18deg);
  animation:tpSweep 5.5s ease-in-out infinite}
@keyframes tpSweep{0%{left:-40%;opacity:0}35%{opacity:.7}70%{left:120%;opacity:0}100%{left:120%;opacity:0}}
.tp-b-head{display:flex;align-items:center;gap:7px;position:relative;z-index:1}
.tp-b-head b{font:700 .92rem/1 var(--serif,"Fraunces",serif);color:var(--forest,#0F3D2E)}
.tp-b-emoji{font-size:1.05rem;animation:tpPop 2.6s ease-in-out infinite}
@keyframes tpPop{0%,100%{transform:scale(1) rotate(0)}12%{transform:scale(1.18) rotate(-8deg)}24%{transform:scale(1.05) rotate(6deg)}}
.tp-b-txt{position:relative;z-index:1;margin:7px 0 9px;font-size:.82rem;line-height:1.5;color:var(--ink-2,#37463d)}
.tp-b-txt b{color:var(--forest,#0F3D2E)}
.tp-b-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tp-chip{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:999px;white-space:nowrap}
.tp-chip.one{background:var(--gold,#E8B864);color:#4a3607}
.tp-chip.wallet{background:var(--mint-soft,#eef6ef);color:var(--leaf-600,#169A57);border:1px solid var(--mint,#cfead8)}
.tp-chip.wallet svg{width:13px;height:13px}
.tp-how{border:none;background:none;cursor:pointer;font:inherit;font-size:.76rem;font-weight:700;color:var(--forest,#0F3D2E);display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:2px;padding:2px}
.tp-how:hover{color:var(--leaf-600,#169A57)}
.tp-how svg{width:13px;height:13px}
/* "How it works" modal steps + inline reminders (checkout / order success / dashboard) */
.tp-steps{list-style:none;margin:6px 0 0;padding:0;counter-reset:tp;display:grid;gap:12px}
.tp-steps li{position:relative;padding-left:40px;color:var(--ink-2,#37463d);font-size:.92rem;line-height:1.5}
.tp-steps li::before{counter-increment:tp;content:counter(tp);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;background:var(--grad-leaf,linear-gradient(135deg,#1FAE66,#169A57))}
.tp-note{display:flex;gap:11px;align-items:flex-start;border-radius:14px;padding:13px 15px;font-size:.9rem;line-height:1.5;
  background:linear-gradient(135deg,#fff8ea,#eefaf0);border:1px solid var(--gold-soft,#f3e2bd);color:var(--ink-2,#37463d)}
.tp-note .tp-note-ic{font-size:1.2rem;line-height:1;flex:none}
.tp-note b{color:var(--forest,#0F3D2E)}
@media (prefers-reduced-motion:reduce){.tp-glow,.tp-b-emoji{animation:none !important}.tp-glow{display:none}}
/* customer wallet — Trial Pack Benefit status card */
.tp-status{position:relative;overflow:hidden;border-radius:18px;padding:16px 18px;margin:0 0 16px;
  background:linear-gradient(135deg,#fff8ea 0%,#eefaf0 100%);border:1px solid var(--gold-soft,#f3e2bd);
  box-shadow:0 0 0 3px rgba(232,184,100,.09),0 16px 34px -24px rgba(184,134,60,.4)}
[data-theme="dark"] .tp-status{background:linear-gradient(135deg,rgba(232,184,100,.14),rgba(31,174,102,.12));border-color:rgba(232,184,100,.3)}
.tp-status-h{display:flex;align-items:center;gap:9px;position:relative;z-index:1;margin-bottom:10px}
.tp-status-h b{font:700 1.02rem/1 var(--serif,"Fraunces",serif);color:var(--forest,#0F3D2E)}
.tp-status-ic{font-size:1.3rem}
.tp-status-h .tp-chip{margin-left:auto}
.tp-status-rows{position:relative;z-index:1;display:grid;gap:9px}
.tp-status-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--ink-2,#37463d);padding-bottom:9px;border-bottom:1px dashed var(--gold-soft,#f0e4c8)}
.tp-status-rows>div:last-child{border-bottom:none;padding-bottom:0}
.tp-yn{font-weight:700;font-size:.85rem}.tp-yn.yes{color:var(--leaf-600,#169A57)}.tp-yn.no{color:var(--ink-3,#8494)}
.tp-status-cta{position:relative;z-index:1;margin-top:14px;width:100%}
@media (prefers-reduced-motion:reduce){.tp-status .tp-glow{display:none}}

/* ---- "Choose plan" → builder: land clear of the sticky nav + confirm the selection ---- */
#builder { scroll-margin-top: 92px; }
#planRow .opt.opt-flash { animation: optFlash .9s ease; }
@keyframes optFlash {
  0%, 100% { box-shadow: none; transform: none; }
  30% { box-shadow: 0 0 0 4px rgba(31,174,102,.4); transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { #planRow .opt.opt-flash { animation: none; } }

/* ---- official website QR (download-app card) ---- */
.dl-qr { display:inline-block; padding:14px; background:#fff; border-radius:18px; border:1px solid var(--line, #E3EDE6);
  box-shadow:0 14px 34px rgba(15,61,46,.14); line-height:0; }
.dl-qr img { display:block; border-radius:6px; image-rendering:pixelated; }
.dl-qr-hint { margin-top:4px; font-size:.85rem; color:rgba(255,255,255,.82); }
.dl-qr-hint b { color:#fff; }

/* ---- signed-in customer chip in the public nav ---- */
.nav-user { display:inline-flex; align-items:center; gap:8px; padding:4px 13px 4px 5px; border-radius:999px;
  border:1px solid var(--line, #E3EDE6); background:var(--surface, #fff); text-decoration:none;
  font-weight:700; color:var(--forest, #0F3D2E); transition:box-shadow .18s, transform .18s, border-color .18s; }
.nav-user:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,61,46,.12); border-color:var(--leaf, #1FAE66); }
.nav-av { width:28px; height:28px; border-radius:50%; background:var(--leaf, #1FAE66); color:#fff;
  display:grid; place-items:center; font-size:.7rem; font-weight:800; letter-spacing:.02em; }
.nav-un { font-size:.88rem; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 720px) { .nav-un { display:none; } .nav-user { padding:4px; } }

/* ---- customer account actions (account.js) ---- */
.acc-tls { display:flex; flex-direction:column; gap:10px; }
.acc-tl { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; }
.acc-tl-dot { width:10px; height:10px; border-radius:50%; background:var(--leaf, #1FAE66); margin-top:5px; flex:none; }
.acc-nf-actions { display:flex; gap:6px; margin-left:auto; align-self:center; }
.acc-nf-btn { width:28px; height:28px; border-radius:8px; border:1px solid var(--line, #E3EDE6); background:var(--surface, #fff);
  cursor:pointer; font-size:.8rem; color:var(--ink-2, #55655C); transition:background .15s, color .15s; }
.acc-nf-btn:hover { background:var(--mint-soft, #EAF7EF); color:var(--forest, #0F3D2E); }
.feed .item { transition:opacity .25s; }
.acc-addr { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line, #E3EDE6); }
.acc-addr:last-child { border-bottom:0; }