/* =====================================================================
THIS LITTLE LIGHT — site.css
Loaded after Bootstrap 5.3 on every public + account page.
Sections:
1. Fonts
2. Tokens (morning) + [data-lit="true"] evening + Bootstrap re-tint
3. Base + typography
4. Layout helpers (wrap, panel, stack, sprig)
5. Buttons + the "Let it shine" toggle
6. Forms
7. Flash messages + notice banner
8. Header / navbar / mobile sheet
9. Footer + verse
10. Candle art (SVG) + flame flicker + stage glow
11. Shared option controls (pills, wax discs, cards, list rows, hearts)
12. Auth pages
13. Error pages
14. Utilities
The storefront extends this file (builder, cart, home); the account and
studio areas add account.css / admin.css. Keep tokens here.
===================================================================== */
/* 1. Fonts ------------------------------------------------------------ */
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("../fonts/figtree-latin-var.woff2") format("woff2-variations"),
url("../fonts/figtree-latin-var.woff2") format("woff2");
font-weight: 300 900; font-style: normal; font-display: swap;
}
/* 2. Tokens ----------------------------------------------------------- */
:root {
/* morning — soft daylight */
--tll-room: #F8EEEF; /* page background, petal blush */
--tll-wax: #FFFBF9; /* surfaces / panels */
--tll-ink: #3B2340; /* text, deep plum */
--tll-smoke: #7A6578; /* secondary text; hairlines at low alpha */
--tll-rose: #A8496A; /* primary actions, links, hearts */
--tll-flame: #E9A823; /* the light itself: flame, glow, selected ring, lit toggle */
--tll-leaf: #4F7D68; /* success, "ready" */
--tll-ember: #B3401F; /* errors, sold out */
--tll-on-rose: #FFFFFF; /* text on primary buttons */
--tll-rose-hover: #923B5A;
--tll-hairline: rgba(122, 101, 120, .16); /* smoke at ~15% */
--tll-hairline-strong: rgba(122, 101, 120, .32);
--tll-wash: rgba(168, 73, 106, .06); /* faint rose wash for hovers */
--tll-glow: rgba(233, 168, 35, 0); /* stage glow — off in the morning */
--tll-shadow: none; /* no drop shadows in morning mode */
--tll-font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
--tll-font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* type scale: 1.25 from a 17px body */
--tll-fs-sm: .85rem; /* 13.6 */
--tll-fs-base: 1.0625rem;/* 17 */
--tll-fs-md: 1.328rem; /* 21.3 */
--tll-fs-lg: 1.66rem; /* 26.6 */
--tll-fs-xl: 2.075rem; /* 33.2 */
--tll-fs-2xl: 2.594rem; /* 41.5 */
--tll-fs-3xl: 3.243rem; /* 51.9 */
--tll-radius: 20px;
--tll-radius-sm: 12px;
--tll-radius-pill: 999px;
--tll-touch: 48px; /* minimum touch target */
--tll-gutter: 16px;
--tll-ease: 600ms ease; /* the room changing */
/* Bootstrap re-tint */
--bs-body-bg: var(--tll-room);
--bs-body-color: var(--tll-ink);
--bs-body-font-family: var(--tll-font-ui);
--bs-body-font-size: var(--tll-fs-base);
--bs-body-line-height: 1.55;
--bs-link-color: var(--tll-rose);
--bs-link-color-rgb: 168, 73, 106;
--bs-link-hover-color: var(--tll-rose-hover);
--bs-link-hover-color-rgb: 146, 59, 90;
--bs-border-color: var(--tll-hairline-strong);
--bs-border-radius: var(--tll-radius-sm);
--bs-secondary-color: var(--tll-smoke);
--bs-emphasis-color: var(--tll-ink);
--bs-primary: var(--tll-rose);
--bs-primary-rgb: 168, 73, 106;
--bs-success: var(--tll-leaf);
--bs-danger: var(--tll-ember);
--bs-focus-ring-color: rgba(233, 168, 35, .45);
}
/* evening — the candle is lit */
:root[data-lit="true"] {
--tll-room: #2A1730;
--tll-wax: #3A2242;
--tll-ink: #FBEFE6;
--tll-smoke: #CDB7CC;
--tll-rose: #F0A3B8;
--tll-flame: #FFC45A;
--tll-leaf: #8FCDB0;
--tll-ember: #FF8A5C;
--tll-on-rose: #2A1730;
--tll-rose-hover: #F6BCCB;
--tll-hairline: rgba(205, 183, 204, .16);
--tll-hairline-strong: rgba(205, 183, 204, .3);
--tll-wash: rgba(240, 163, 184, .08);
--tll-glow: rgba(255, 196, 90, .30);
--bs-link-color-rgb: 240, 163, 184;
--bs-link-hover-color-rgb: 246, 188, 203;
--bs-primary-rgb: 240, 163, 184;
color-scheme: dark;
}
/* 3. Base + typography ------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--tll-room);
color: var(--tll-ink);
font-family: var(--tll-font-ui);
font-size: var(--tll-fs-base);
line-height: 1.55;
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background-color var(--tll-ease), color var(--tll-ease);
}
main { flex: 1 0 auto; }
h1, h2, h3, .display {
font-family: var(--tll-font-display);
font-weight: 600;
line-height: 1.1;
color: var(--tll-ink);
letter-spacing: -.005em;
}
h1, .h1 { font-size: var(--tll-fs-2xl); }
h2, .h2 { font-size: var(--tll-fs-xl); }
h3, .h3 { font-size: var(--tll-fs-lg); }
/* Cormorant is delicate: below 24px use the UI face */
h4, h5, h6, .h4, .h5, .h6 {
font-family: var(--tll-font-ui);
font-weight: 600;
line-height: 1.3;
color: var(--tll-ink);
}
h4, .h4 { font-size: var(--tll-fs-md); }
h5, .h5 { font-size: var(--tll-fs-base); }
.display-xl { font-family: var(--tll-font-display); font-weight: 600; font-size: var(--tll-fs-3xl); line-height: 1.05; }
@media (max-width: 575.98px) {
h1, .h1 { font-size: var(--tll-fs-xl); }
.display-xl { font-size: var(--tll-fs-2xl); }
}
p { margin-bottom: 1rem; }
.lead { font-size: var(--tll-fs-md); line-height: 1.5; font-weight: 400; }
.muted, .text-muted { color: var(--tll-smoke) !important; }
small, .small { font-size: var(--tll-fs-sm); }
a { color: var(--tll-rose); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tll-rose-hover); }
hr { border-color: var(--tll-hairline-strong); opacity: 1; }
::selection { background: rgba(233, 168, 35, .35); }
/* prices are set in the display face (≥ 24px) */
.price { font-family: var(--tll-font-display); font-weight: 600; font-size: var(--tll-fs-lg); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.price-sm { font-family: var(--tll-font-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
/* keyboard focus — always visible, always gold */
:focus-visible {
outline: 2px solid var(--tll-flame);
outline-offset: 2px;
}
.visually-hidden-focusable:focus { position: static !important; }
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 2000;
background: var(--tll-wax); color: var(--tll-ink); padding: 10px 14px; border-radius: var(--tll-radius-sm);
}
.skip-link:focus { top: 12px; }
/* 4. Layout helpers ---------------------------------------------------- */
.tll-wrap {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding-left: var(--tll-gutter);
padding-right: var(--tll-gutter);
}
.tll-wrap-narrow { max-width: 760px; }
.tll-section { padding-top: 3rem; padding-bottom: 3rem; }
.panel {
background: var(--tll-wax);
border: 1px solid var(--tll-hairline);
border-radius: var(--tll-radius);
padding: 1.5rem;
box-shadow: var(--tll-shadow);
transition: background-color var(--tll-ease), border-color var(--tll-ease);
}
.panel-tight { padding: 1rem; }
.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.sprig { display: inline-block; width: 44px; height: 22px; color: var(--tll-leaf); vertical-align: middle; }
.section-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.section-head h2 { margin: 0; }
/* 5. Buttons ------------------------------------------------------------ */
.btn-tll, .btn-tll-quiet, .btn-lit {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-height: var(--tll-touch);
padding: .65rem 1.4rem;
border-radius: var(--tll-radius-pill);
font-family: var(--tll-font-ui);
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
border: 1.5px solid transparent;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-tll { background: var(--tll-rose); color: var(--tll-on-rose); border-color: var(--tll-rose); }
.btn-tll:hover, .btn-tll:focus-visible { background: var(--tll-rose-hover); border-color: var(--tll-rose-hover); color: var(--tll-on-rose); }
.btn-tll:disabled, .btn-tll[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-tll-quiet { background: transparent; color: var(--tll-ink); border-color: var(--tll-hairline-strong); }
.btn-tll-quiet:hover, .btn-tll-quiet:focus-visible { border-color: var(--tll-rose); color: var(--tll-rose); background: var(--tll-wash); }
.btn-tll-link {
background: none; border: 0; padding: 0; color: var(--tll-rose); font-weight: 600; text-decoration: underline;
text-underline-offset: .18em; cursor: pointer; min-height: auto;
}
.btn-tll-block { width: 100%; }
.btn-tll-sm { min-height: 40px; padding: .4rem 1rem; font-size: .92rem; }
/* "Let it shine" — gold belongs to the light */
.btn-lit {
background: transparent;
color: var(--tll-ink);
border-color: var(--tll-flame);
}
.btn-lit .lit-dot {
width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: var(--tll-flame);
box-shadow: 0 0 0 0 rgba(233, 168, 35, 0);
transition: box-shadow var(--tll-ease);
}
.btn-lit:hover { background: rgba(233, 168, 35, .12); color: var(--tll-ink); }
.btn-lit[aria-pressed="true"] { background: rgba(255, 196, 90, .14); }
.btn-lit[aria-pressed="true"] .lit-dot { box-shadow: 0 0 14px 4px rgba(255, 196, 90, .55); }
/* 6. Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field-label, .form-label {
display: block; font-weight: 600; font-size: .98rem; margin-bottom: .35rem; color: var(--tll-ink);
}
.field-help, .form-text { color: var(--tll-smoke); font-size: var(--tll-fs-sm); margin-top: .3rem; }
.field-error { color: var(--tll-ember); font-size: var(--tll-fs-sm); margin-top: .3rem; font-weight: 500; }
.form-control, .form-select, .tll-input {
display: block; width: 100%;
min-height: var(--tll-touch);
padding: .65rem .95rem;
font-family: var(--tll-font-ui);
font-size: 1rem;
color: var(--tll-ink);
background-color: var(--tll-wax);
border: 1.5px solid var(--tll-hairline-strong);
border-radius: var(--tll-radius-sm);
transition: border-color .2s ease, background-color var(--tll-ease), color var(--tll-ease);
}
textarea.form-control, textarea.tll-input { min-height: 110px; line-height: 1.5; }
.form-control::placeholder, .tll-input::placeholder { color: var(--tll-smoke); opacity: .8; }
.form-control:focus, .form-select:focus, .tll-input:focus {
outline: none;
border-color: var(--tll-flame);
box-shadow: 0 0 0 3px rgba(233, 168, 35, .25);
background-color: var(--tll-wax);
color: var(--tll-ink);
}
.is-invalid, .form-control.is-invalid { border-color: var(--tll-ember); }
.form-check-input { width: 1.2em; height: 1.2em; border-color: var(--tll-hairline-strong); background-color: var(--tll-wax); }
.form-check-input:checked { background-color: var(--tll-rose); border-color: var(--tll-rose); }
.form-check-input:focus { border-color: var(--tll-flame); box-shadow: 0 0 0 3px rgba(233, 168, 35, .25); }
.char-count { font-size: var(--tll-fs-sm); color: var(--tll-smoke); text-align: right; font-variant-numeric: tabular-nums; }
.char-count.is-over { color: var(--tll-ember); font-weight: 600; }
/* 7. Flash + notice ------------------------------------------------------ */
.flash-stack { padding-top: 1rem; }
.flash {
display: flex; align-items: flex-start; gap: .75rem;
padding: .85rem 1.1rem;
border-radius: var(--tll-radius-sm);
border: 1px solid var(--tll-hairline);
background: var(--tll-wax);
border-left: 4px solid var(--tll-smoke);
margin-bottom: .6rem;
}
.flash-success { border-left-color: var(--tll-leaf); }
.flash-info { border-left-color: var(--tll-flame); }
.flash-warning { border-left-color: var(--tll-flame); }
.flash-danger { border-left-color: var(--tll-ember); }
.flash-msg { flex: 1; }
.flash-close {
background: none; border: 0; color: var(--tll-smoke); font-size: 1.3rem; line-height: 1; padding: 0 .25rem; cursor: pointer;
min-width: 32px; min-height: 32px;
}
.notice-banner {
background: var(--tll-wax);
border-bottom: 1px solid var(--tll-hairline);
font-size: var(--tll-fs-sm);
padding: .55rem 0;
text-align: center;
}
/* 8. Header / navbar ---------------------------------------------------- */
.site-header {
border-bottom: 1px solid var(--tll-hairline);
background: var(--tll-room);
transition: background-color var(--tll-ease);
position: relative;
z-index: 50;
}
.site-nav { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.wordmark {
font-family: var(--tll-font-display);
font-weight: 600;
font-size: 1.7rem;
line-height: 1;
color: var(--tll-ink);
text-decoration: none;
white-space: nowrap;
display: inline-flex; align-items: center; gap: .45rem;
}
.wordmark:hover { color: var(--tll-ink); }
.wordmark-flame { width: 14px; height: 20px; color: var(--tll-flame); flex: none; }
.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a, .nav-account a {
display: inline-flex; align-items: center; gap: .4rem;
min-height: var(--tll-touch);
padding: 0 .85rem;
color: var(--tll-ink);
text-decoration: none;
font-weight: 500;
border-radius: var(--tll-radius-pill);
}
.nav-links a:hover, .nav-account a:hover { background: var(--tll-wash); color: var(--tll-ink); }
.nav-links a[aria-current="page"] { color: var(--tll-rose); }
.nav-account { display: flex; align-items: center; gap: .25rem; padding-left: .75rem; margin-left: .25rem; border-left: 1px solid var(--tll-hairline); }
.cart-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px;
border-radius: var(--tll-radius-pill);
background: var(--tll-rose); color: var(--tll-on-rose);
font-size: .78rem; font-weight: 700; line-height: 1;
}
.cart-count.is-empty { background: transparent; color: var(--tll-smoke); border: 1px solid var(--tll-hairline-strong); }
.nav-sheet { display: none; margin-left: auto; position: relative; }
.nav-sheet > summary {
list-style: none; cursor: pointer;
display: inline-flex; align-items: center; gap: .5rem;
min-height: var(--tll-touch); padding: 0 1rem;
border: 1.5px solid var(--tll-hairline-strong); border-radius: var(--tll-radius-pill);
font-weight: 600;
}
.nav-sheet > summary::-webkit-details-marker { display: none; }
.nav-sheet-panel {
position: absolute; right: 0; top: calc(100% + 8px);
width: min(320px, calc(100vw - 32px));
background: var(--tll-wax);
border: 1px solid var(--tll-hairline);
border-radius: var(--tll-radius);
padding: .5rem;
}
.nav-sheet-panel a {
display: flex; align-items: center; justify-content: space-between;
min-height: var(--tll-touch); padding: 0 1rem;
color: var(--tll-ink); text-decoration: none; font-weight: 500;
border-radius: var(--tll-radius-sm);
}
.nav-sheet-panel a:hover { background: var(--tll-wash); }
.nav-sheet-panel hr { margin: .4rem .5rem; }
@media (max-width: 899.98px) {
.nav-links, .nav-account { display: none; }
.nav-sheet { display: block; }
.wordmark { font-size: 1.5rem; }
}
/* 9. Footer -------------------------------------------------------------- */
.site-footer {
margin-top: 4rem;
border-top: 1px solid var(--tll-hairline);
padding: 2.5rem 0 2rem;
color: var(--tll-smoke);
font-size: var(--tll-fs-sm);
transition: background-color var(--tll-ease);
}
.site-footer a { color: var(--tll-smoke); }
.site-footer a:hover { color: var(--tll-rose); }
.footer-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-start; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.verse {
font-family: var(--tll-font-display);
font-style: italic;
font-weight: 500;
font-size: var(--tll-fs-lg);
line-height: 1.2;
color: var(--tll-ink);
margin: 0;
}
.verse cite {
display: block;
font-family: var(--tll-font-ui);
font-style: normal;
font-size: var(--tll-fs-sm);
color: var(--tll-smoke);
margin-top: .35rem;
letter-spacing: .01em;
}
/* the verse under a lit candle: hidden until the room is lit */
.lit-verse { opacity: 0; visibility: hidden; transition: opacity var(--tll-ease), visibility var(--tll-ease); text-align: center; }
:root[data-lit="true"] .lit-verse { opacity: 1; visibility: visible; }
/* 10. Candle art -------------------------------------------------------- */
.candle-art { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; overflow: visible; }
.candle-art.is-small { max-width: 120px; }
.candle-art.is-fit { overflow: hidden; } /* cropped card art: keep the lit glow inside the card */
.candle-flame { animation: tll-flicker 2.4s ease-in-out infinite; transform-box: view-box; }
@keyframes tll-flicker {
0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
20% { transform: scale(.97, 1.04) skewX(-1.5deg); }
45% { transform: scale(1.03, .97) skewX(1deg); opacity: .94; }
70% { transform: scale(.98, 1.03) skewX(-.8deg); }
}
/* show the lit or unlit drawing to match the room (no JS needed for the swap) */
.show-lit { display: none; }
:root[data-lit="true"] .show-lit { display: block; }
:root[data-lit="true"] .show-unlit { display: none; }
.stage {
position: relative;
border-radius: var(--tll-radius);
background: radial-gradient(closest-side at 50% 42%, var(--tll-glow), transparent 70%), var(--tll-wax);
border: 1px solid var(--tll-hairline);
padding: 1.5rem;
transition: background-color var(--tll-ease);
}
/* 11. Shared option controls --------------------------------------------
Markup contract (radios/checkboxes stay real and focusable):
List rows can carry a heart:
---------------------------------------------------------------------- */
.opt-group { border: 0; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
.opt-question {
font-family: var(--tll-font-ui);
font-weight: 700;
font-size: var(--tll-fs-md);
line-height: 1.25;
color: var(--tll-ink);
margin-bottom: .25rem;
float: none; width: auto; padding: 0;
}
.opt-help { color: var(--tll-smoke); font-size: var(--tll-fs-sm); margin: 0 0 .75rem; }
.opt-choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.opt { position: relative; cursor: pointer; margin: 0; }
.opt-input {
position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.opt-face {
display: flex; align-items: center; gap: .55rem;
min-height: var(--tll-touch);
background: var(--tll-wax);
border: 1.5px solid var(--tll-hairline-strong);
color: var(--tll-ink);
transition: border-color .2s ease, box-shadow .2s ease, background-color var(--tll-ease);
}
.opt:hover .opt-face { border-color: var(--tll-smoke); }
.opt-name { font-weight: 600; line-height: 1.2; }
.opt-note { color: var(--tll-smoke); font-size: var(--tll-fs-sm); font-variant-numeric: tabular-nums; }
.opt-tag {
display: inline-block; font-size: .75rem; font-weight: 600; line-height: 1;
padding: .3rem .55rem; border-radius: var(--tll-radius-pill);
color: var(--tll-ember); border: 1px solid currentColor;
}
.opt-tag.is-new { color: var(--tll-leaf); }
/* selected = a 2px gold ring + a small check; never a heavy fill */
.opt-input:checked + .opt-face {
border-color: var(--tll-flame);
box-shadow: 0 0 0 1px var(--tll-flame);
}
.opt-input:focus-visible + .opt-face { outline: 2px solid var(--tll-flame); outline-offset: 3px; }
.opt-check {
position: absolute; top: -6px; right: -6px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--tll-flame);
display: none;
pointer-events: none;
}
.opt-check::after {
content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 10px;
border: solid #2A1730; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.opt-input:checked ~ .opt-check { display: block; }
.opt.is-sold-out { cursor: not-allowed; }
.opt.is-sold-out .opt-face { opacity: .55; border-style: dashed; }
.opt-input:disabled + .opt-face { opacity: .55; cursor: not-allowed; }
/* pills — sizes, wicks, lids, timing */
.opt-pills .opt-face { border-radius: var(--tll-radius-pill); padding: .5rem 1.15rem; }
/* wax-disc swatches — round, a little dimensional, like a poured disc */
.opt-swatches { gap: .85rem 1rem; }
.opt-swatch .opt-face {
flex-direction: column; gap: .35rem; background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0;
width: 64px; text-align: center;
}
.opt-disc {
width: 52px; height: 52px; border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
radial-gradient(circle at 50% 50%, var(--swatch, #f4ecd8) 62%, color-mix(in srgb, var(--swatch, #f4ecd8) 82%, #3b2340) 100%);
border: 1px solid var(--tll-hairline-strong);
transition: box-shadow .2s ease;
}
.opt-swatch .opt-name { font-size: .8rem; font-weight: 500; line-height: 1.15; }
.opt-swatch .opt-note { font-size: .72rem; }
.opt-swatch .opt-input:checked + .opt-face { box-shadow: none; border: 0; }
.opt-swatch .opt-input:checked + .opt-face .opt-disc { box-shadow: 0 0 0 3px var(--tll-wax), 0 0 0 5px var(--tll-flame); }
.opt-swatch .opt-check { top: -4px; right: 2px; }
/* cards — vessels, label designs: small card with SVG art */
.opt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: .75rem; }
.opt-card .opt-face {
flex-direction: column; align-items: stretch; gap: .35rem;
border-radius: var(--tll-radius-sm);
padding: .65rem .65rem .75rem;
height: 100%;
text-align: center;
}
.opt-art { display: block; height: 84px; }
.opt-art svg { width: 100%; height: 100%; max-width: none; }
.opt-card .opt-name { font-size: .92rem; }
/* list rows — scents (with family sub-heads and hearts), finishing touches */
.opt-list { flex-direction: column; flex-wrap: nowrap; gap: .5rem; }
.opt-family {
font-size: var(--tll-fs-sm); font-weight: 700; color: var(--tll-smoke);
margin: .75rem 0 .1rem;
}
.opt-family:first-child { margin-top: 0; }
.opt-row { display: flex; align-items: stretch; gap: .5rem; }
.opt-row > .opt { flex: 1; }
.opt-row .opt-face, .opt-list > .opt .opt-face {
border-radius: var(--tll-radius-sm);
padding: .65rem .95rem;
justify-content: space-between;
}
.opt-row .opt-text, .opt-list .opt-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.opt-desc { color: var(--tll-smoke); font-size: var(--tll-fs-sm); line-height: 1.35; }
.opt-heart {
flex: none;
width: var(--tll-touch); min-height: var(--tll-touch);
display: inline-flex; align-items: center; justify-content: center;
background: var(--tll-wax);
border: 1.5px solid var(--tll-hairline-strong);
border-radius: var(--tll-radius-sm);
color: var(--tll-smoke);
cursor: pointer;
}
.opt-heart svg { width: 20px; height: 20px; }
.opt-heart[aria-pressed="true"] { color: var(--tll-rose); border-color: var(--tll-rose); }
.opt-heart[aria-pressed="true"] svg path { fill: currentColor; }
.opt.is-favorite .opt-name::after { content: " ♥"; color: var(--tll-rose); font-weight: 400; }
.opt-error { color: var(--tll-ember); font-size: var(--tll-fs-sm); font-weight: 600; margin: .5rem 0 0; }
.opt-group.has-error .opt-question { color: var(--tll-ember); }
/* text groups (words on the label) */
.opt-text-input { max-width: 420px; }
.opt-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.opt-suggestion {
border: 1px dashed var(--tll-hairline-strong); background: transparent; color: var(--tll-ink);
border-radius: var(--tll-radius-pill); padding: .35rem .8rem; font-size: var(--tll-fs-sm); min-height: 36px; cursor: pointer;
}
.opt-suggestion:hover { border-color: var(--tll-rose); color: var(--tll-rose); }
/* 12. Auth pages ---------------------------------------------------------- */
.auth-wrap { max-width: 460px; margin: 3rem auto 0; padding: 0 var(--tll-gutter); }
.auth-card h1 { margin-bottom: .35rem; }
.auth-card .sub { color: var(--tll-smoke); margin-bottom: 1.5rem; }
.auth-swap { margin-top: 1.25rem; color: var(--tll-smoke); font-size: .95rem; }
.auth-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
/* 13. Error pages ---------------------------------------------------------- */
.error-wrap { max-width: 560px; margin: 4rem auto 0; padding: 0 var(--tll-gutter); }
.error-wrap .candle-art { max-width: 160px; margin: 0 0 1rem; }
/* 14. Utilities ---------------------------------------------------------- */
.hairline { border-top: 1px solid var(--tll-hairline); }
.tabular { font-variant-numeric: tabular-nums; }
.text-ink { color: var(--tll-ink) !important; }
.text-rose { color: var(--tll-rose) !important; }
.text-leaf { color: var(--tll-leaf) !important; }
.text-ember { color: var(--tll-ember) !important; }
.badge-status {
display: inline-block; font-size: .78rem; font-weight: 600; line-height: 1;
padding: .35rem .65rem; border-radius: var(--tll-radius-pill);
border: 1px solid var(--tll-hairline-strong); color: var(--tll-ink); background: var(--tll-wax);
}
.badge-status.is-good { color: var(--tll-leaf); border-color: currentColor; }
.badge-status.is-warn { color: var(--tll-ember); border-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
.candle-flame { animation: none; }
}
/* =====================================================================
15. Storefront (Phase 2) — builder, stage, price bar, cards, cart,
checkout, home, scents, reviews. One voice with the shell above.
===================================================================== */
/* 15.1 Shared bits ------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.stars { color: var(--tll-flame); vertical-align: -3px; flex: none; }
.empty-state { max-width: 560px; }
.empty-state .lead { font-family: var(--tll-font-display); font-weight: 600; font-size: var(--tll-fs-xl); }
.price-card { font-size: var(--tll-fs-lg); }
.section-intro { color: var(--tll-smoke); max-width: 640px; margin-top: -.5rem; margin-bottom: 1.5rem; }
.totals { margin: 1rem 0; }
.totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--tll-hairline); }
.totals dt { font-weight: 500; }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.totals .totals-total { border-bottom: 0; padding-top: .7rem; }
.totals .totals-total dt { font-weight: 700; }
/* 15.2 The stage (SVG fallback + 3-D canvas) ------------------------------ */
.stage-svg .candle-art { max-width: 340px; }
.stage.has-3d { padding: 0; overflow: hidden; }
.stage.has-3d .stage-svg { display: none; }
.stage-canvas {
display: block; width: 100% !important; height: 100% !important;
cursor: grab; touch-action: pan-y; outline: none; border-radius: var(--tll-radius);
}
.stage-canvas.is-dragging { cursor: grabbing; }
.stage-canvas:focus-visible { outline: 2px solid var(--tll-flame); outline-offset: -4px; }
.stage-hint {
position: absolute; left: 0; right: 0; bottom: .65rem; margin: 0; text-align: center;
font-size: var(--tll-fs-sm); color: var(--tll-smoke); pointer-events: none;
}
.stage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.lit-verse { margin-top: .9rem; }
/* "See it burn" */
.burn-control { display: flex; align-items: center; gap: .75rem; min-height: var(--tll-touch); }
.burn-control[hidden] { display: none; }
.burn-label { font-weight: 600; white-space: nowrap; }
.burn-control input[type="range"] { width: min(220px, 50vw); accent-color: var(--tll-flame); height: 32px; cursor: pointer; }
/* 15.3 Builder layout ------------------------------------------------------- */
.builder { padding-top: 1.75rem; }
.builder-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.builder-stage { height: clamp(300px, 46vh, 420px); display: flex; align-items: center; justify-content: center; }
.builder-head h1 { margin-bottom: .35rem; }
.builder-tagline { color: var(--tll-ink); margin-bottom: .5rem; }
.builder-rating a { display: inline-flex; align-items: center; gap: .5rem; color: var(--tll-ink); text-decoration: none; }
.builder-rating a:hover span { text-decoration: underline; }
.builder-mode { color: var(--tll-smoke); margin: .5rem 0 0; }
.builder-head { margin-bottom: 1.5rem; }
.builder-problems {
border: 1px solid var(--tll-hairline); border-left: 4px solid var(--tll-ember); background: var(--tll-wax);
border-radius: var(--tll-radius-sm); padding: .85rem 1.1rem; margin-bottom: 1.5rem;
}
.builder-problems ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.builder-problems[hidden] { display: none; }
.builder-photos { margin-top: 1.25rem; }
.builder-photos-title { font-weight: 600; margin-bottom: .5rem; }
.photo-strip { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.photo-strip img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--tll-radius-sm); border: 1px solid var(--tll-hairline); display: block; }
.photo-strip a:focus-visible img { outline: 2px solid var(--tll-flame); outline-offset: 2px; }
.builder-request textarea { margin-bottom: .25rem; }
.ref-attached { display: flex; gap: .85rem; align-items: center; margin-top: .9rem; padding: .6rem; border: 1px solid var(--tll-hairline); border-radius: var(--tll-radius-sm); background: var(--tll-wax); }
.ref-attached img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.ref-remove { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; cursor: pointer; }
.ref-file { padding: .55rem .75rem; }
.builder-save { border-top: 1px solid var(--tll-hairline); padding-top: 1.25rem; margin: .5rem 0 1.5rem; }
.builder-save h2 { margin-bottom: .25rem; }
.builder-save-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.builder-save-row .form-control { flex: 1 1 220px; width: auto; }
.builder-more { display: grid; gap: 2.5rem; margin-top: 3rem; }
.builder-about p { max-width: 62ch; }
/* option extras the builder needs */
.opt-text { display: flex; flex-direction: column; min-width: 0; }
.opt-meta { display: inline-flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.opt-pill .opt-face { gap: .45rem; }
.opt-card .opt-meta { justify-content: center; }
.opt-conflict {
display: block; flex-basis: 100%; font-size: .78rem; line-height: 1.3; color: var(--tll-ember); font-weight: 500;
}
.opt-conflict[hidden] { display: none; }
.opt-pills .opt-face { flex-wrap: wrap; }
.opt-pills .opt-conflict { max-width: 22ch; }
.opt.is-conflict { cursor: not-allowed; }
.opt.is-conflict .opt-face { border-style: dashed; }
.opt.is-conflict .opt-name, .opt.is-conflict .opt-disc, .opt.is-conflict .opt-art { opacity: .55; }
.opt-swatch .opt-conflict { font-size: .7rem; }
.opt-disc-none { background: repeating-linear-gradient(135deg, var(--tll-wax) 0 6px, var(--tll-hairline-strong) 6px 7px); }
.opt-suggestions-label { font-size: var(--tll-fs-sm); color: var(--tll-smoke); align-self: center; margin-right: .1rem; }
.opt-suggestions[hidden] { display: none; }
.opt-text-count { max-width: 420px; }
.opt-group[hidden] { display: none; }
.opt-list .opt-face { min-height: 56px; }
.opt-row .opt-face .opt-meta, .opt-list > .opt .opt-meta { margin-left: auto; text-align: right; flex: none; }
.opt-row .opt-face, .opt-list > .opt .opt-face { flex-wrap: wrap; }
/* 15.4 Price bar ------------------------------------------------------------ */
.price-bar {
position: sticky; bottom: 0; z-index: 30;
background: var(--tll-wax);
border: 1px solid var(--tll-hairline-strong);
border-radius: var(--tll-radius);
padding: .9rem 1.1rem;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center;
margin-bottom: 1rem;
transition: background-color var(--tll-ease), border-color var(--tll-ease);
}
.pb-main { min-width: 0; }
.pb-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.pb-price .price { font-size: var(--tll-fs-xl); min-width: 5.2ch; display: inline-block; }
.pb-each { color: var(--tll-smoke); }
.pb-saving { font-size: var(--tll-fs-sm); font-weight: 600; color: var(--tll-leaf); }
.pb-saving[hidden], .pb-total[hidden], .pb-tier[hidden] { display: none; }
.pb-total { font-size: var(--tll-fs-sm); color: var(--tll-smoke); font-variant-numeric: tabular-nums; }
.pb-ready { display: flex; flex-direction: column; font-size: .95rem; line-height: 1.35; margin-top: .15rem; }
.pb-ready strong { color: var(--tll-ink); }
.pb-breakdown { font-size: var(--tll-fs-sm); color: var(--tll-smoke); }
.pb-tier { margin: .3rem 0 0; font-size: var(--tll-fs-sm); font-weight: 600; color: var(--tll-rose); }
.pb-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.pb-qty-help { grid-column: 1 / -1; margin: 0; font-size: var(--tll-fs-sm); color: var(--tll-smoke); }
.pb-qty-help:empty { display: none; }
.qty-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--tll-hairline-strong); border-radius: var(--tll-radius-pill); background: var(--tll-wax); overflow: hidden; }
.qty-stepper:focus-within { border-color: var(--tll-flame); }
.qty-btn {
width: 44px; min-height: var(--tll-touch); border: 0; background: transparent; color: var(--tll-ink);
font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.qty-btn:hover { background: var(--tll-wash); }
.qty-btn[hidden] { display: none; }
.qty-stepper .qty-input { width: 4.2rem; border: 0; border-radius: 0; text-align: center; padding: .5rem .25rem; background: transparent; -moz-appearance: textfield; }
.qty-stepper .qty-input:focus { box-shadow: none; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper .qty-input.is-invalid { color: var(--tll-ember); }
@media (min-width: 992px) {
.builder-grid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 3rem; align-items: start; }
.builder-stage-col { position: relative; height: 100%; }
.builder-stage-sticky { position: sticky; top: 1.25rem; }
.builder-stage { height: min(64vh, 600px); }
.builder-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
/* mobile: the stage stays in view (shorter), the options scroll under it, the price bar is fixed */
.builder-stage-col { position: sticky; top: 0; z-index: 20; background: var(--tll-room); padding-top: .25rem; margin: 0 calc(-1 * var(--tll-gutter)); padding-left: var(--tll-gutter); padding-right: var(--tll-gutter); border-bottom: 1px solid var(--tll-hairline); transition: background-color var(--tll-ease); }
.builder-stage { height: 34vh; min-height: 220px; max-height: 340px; }
.builder-stage-col .stage-controls { margin-top: .5rem; margin-bottom: .5rem; gap: .5rem 1rem; }
.builder-stage-col .lit-verse { display: none; }
.builder-stage-col .builder-photos { display: none; }
.stage-hint { display: none; }
.price-bar {
position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
border-radius: var(--tll-radius) var(--tll-radius) 0 0; border-bottom: 0;
padding: .7rem var(--tll-gutter) calc(.7rem + env(safe-area-inset-bottom));
grid-template-columns: minmax(0, 1fr);
}
.pb-actions { justify-content: space-between; }
.pb-actions .btn-tll { flex: 1; }
.pb-ready { flex-direction: row; flex-wrap: wrap; gap: 0 .5rem; }
.pb-breakdown { display: none; }
.page-builder .site-footer { padding-bottom: 12rem; }
.builder-more { margin-top: 2rem; }
}
@media (max-width: 991.98px) and (max-height: 560px) {
.builder-stage-col { position: relative; }
}
@media (max-width: 380px) {
.pb-price .price { font-size: var(--tll-fs-lg); }
.qty-btn { width: 40px; }
.qty-stepper .qty-input { width: 3.4rem; }
}
/* 15.5 Reviews -------------------------------------------------------------- */
.review-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.review { background: var(--tll-wax); border: 1px solid var(--tll-hairline); border-radius: var(--tll-radius); padding: 1.1rem 1.25rem; }
.review-stars { margin-bottom: .35rem; }
.review-title { margin-bottom: .3rem; }
.review-body { margin-bottom: .5rem; }
.review-by { font-size: var(--tll-fs-sm); font-weight: 600; margin: 0; }
.review-reply { margin: .75rem 0 0; padding-left: .9rem; border-left: 2px solid var(--tll-flame); font-size: .95rem; }
.review-summary { display: flex; align-items: center; gap: .6rem; }
.review-bars { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .3rem; max-width: 320px; }
.review-bars li { display: grid; grid-template-columns: 4.2rem 1fr 2rem; align-items: center; gap: .5rem; font-size: var(--tll-fs-sm); }
.review-bar { height: 8px; border-radius: 99px; background: var(--tll-hairline); overflow: hidden; }
.review-bar span { display: block; height: 100%; background: var(--tll-flame); border-radius: 99px; }
/* 15.6 Product cards + ideas ------------------------------------------------- */
.product-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1.25rem; }
.product-card { height: 100%; }
.product-card-link {
display: flex; flex-direction: column; height: 100%;
background: var(--tll-wax); border: 1px solid var(--tll-hairline); border-radius: var(--tll-radius);
color: var(--tll-ink); text-decoration: none; overflow: hidden;
transition: border-color .2s ease, background-color var(--tll-ease);
}
.product-card-link:hover { border-color: var(--tll-rose); color: var(--tll-ink); }
.product-card-link:hover .product-card-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.product-card-art { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.25rem .25rem; background: radial-gradient(closest-side at 50% 45%, var(--tll-glow), transparent 75%); }
.product-card-art.has-photo { padding: 0; }
.product-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card-art .candle-art { max-width: 210px; max-height: 100%; }
.product-card-body { padding: .9rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card-name { font-size: var(--tll-fs-lg); margin: 0; }
.product-card-tagline { margin: 0; color: var(--tll-ink); }
.product-card-price { margin: auto 0 0; padding-top: .35rem; }
.product-card-time { margin: 0; font-size: var(--tll-fs-sm); }
.idea-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.idea-link {
display: flex; flex-direction: column; height: 100%;
background: var(--tll-wax); border: 1px solid var(--tll-hairline); border-radius: var(--tll-radius);
color: var(--tll-ink); text-decoration: none; transition: border-color .2s ease, background-color var(--tll-ease);
}
.idea-link:hover { border-color: var(--tll-rose); color: var(--tll-ink); }
.idea-art { height: 170px; padding: 1rem 1rem 0; display: flex; justify-content: center; }
.idea-art .candle-art { height: 100%; width: auto; max-width: 100%; }
.idea-body { padding: .6rem 1rem 1rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.idea-occasion { margin: 0; font-size: var(--tll-fs-sm); font-weight: 600; color: var(--tll-rose); }
.idea-name { font-family: var(--tll-font-ui); font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.3; }
.idea-blurb { margin: 0; font-size: var(--tll-fs-sm); color: var(--tll-smoke); }
.idea-meta { margin: auto 0 0; padding-top: .4rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .95rem; }
.occasion-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; padding: 0; list-style: none; }
/* 15.7 Home ----------------------------------------------------------------- */
.home-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.hero-copy .lead { max-width: 34ch; }
.hero-ready { color: var(--tll-smoke); margin-top: 1rem; max-width: 44ch; }
.hero-ready strong { color: var(--tll-ink); }
.hero-stage { height: clamp(320px, 52vh, 520px); display: flex; align-items: center; justify-content: center; }
.hero-stage .candle-art { max-height: 100%; width: auto; max-width: 300px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
@media (min-width: 992px) {
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.steps li { counter-increment: step; background: var(--tll-wax); border: 1px solid var(--tll-hairline); border-radius: var(--tll-radius); padding: 1.25rem; transition: background-color var(--tll-ease); }
.steps li::before {
content: counter(step); display: inline-flex; align-items: center; justify-content: center;
width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--tll-flame);
font-family: var(--tll-font-display); font-weight: 600; font-size: 1.35rem; margin-bottom: .6rem; color: var(--tll-ink);
}
.steps h3 { font-family: var(--tll-font-ui); font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--tll-ink); }
.timing-panel { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .timing-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.timing-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.timing-bars li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; align-items: center; }
.timing-bar { height: 12px; border-radius: 99px; background: var(--tll-hairline); display: flex; gap: 2px; overflow: hidden; }
.timing-bar .seg { display: block; height: 100%; min-width: 3px; }
.seg-queue, .key-queue { background: var(--tll-smoke); }
.seg-pour, .key-pour { background: var(--tll-rose); }
.seg-cure, .key-cure { background: var(--tll-leaf); }
.timing-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.timing-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: .5rem; }
.timing-legend .key:first-child { margin-left: 0; }
.timing-label { font-size: var(--tll-fs-sm); }
.timing-label strong { display: block; font-size: 1rem; }
.big-date { font-family: var(--tll-font-display); font-weight: 600; font-size: var(--tll-fs-2xl); line-height: 1.05; margin: .2rem 0 .5rem; }
/* 15.8 Scents ----------------------------------------------------------------- */
.family-nav { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.family-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1.5px solid var(--tll-hairline-strong); border-radius: var(--tll-radius-pill); color: var(--tll-ink); text-decoration: none; font-weight: 500; }
.family-nav a:hover { border-color: var(--tll-rose); color: var(--tll-rose); }
.scent-family { margin-bottom: 2.5rem; scroll-margin-top: 1rem; }
.scent-family h2 { margin-bottom: 1rem; }
.scent-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .85rem; }
.scent-card { display: flex; gap: .85rem; align-items: flex-start; background: var(--tll-wax); border: 1px solid var(--tll-hairline); border-radius: var(--tll-radius); padding: 1rem 1.1rem; height: 100%; transition: background-color var(--tll-ease); scroll-margin-top: 1rem; }
.scent-card .opt-disc { width: 40px; height: 40px; flex: none; }
.scent-card-text { flex: 1; min-width: 0; }
.scent-card h3 { font-family: var(--tll-font-ui); font-size: 1.05rem; font-weight: 700; margin: 0 0 .2rem; }
.scent-card p { margin: 0; font-size: .95rem; color: var(--tll-smoke); }
.scent-card .opt-tag { margin-top: .4rem; }
.scent-card form { margin: 0; }
.scent-card .opt-heart { width: 44px; min-height: 44px; }
/* 15.9 Cart + checkout ------------------------------------------------------------ */
.cart-grid, .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 992px) {
.cart-grid, .checkout-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; }
.cart-summary, .checkout-summary { position: sticky; top: 1.25rem; }
}
.cart-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
.cart-item.is-invalid { border-color: var(--tll-ember); }
.cart-item-art { width: 96px; height: 112px; }
.cart-item-art .candle-art { width: 100%; height: 100%; max-width: none; }
.cart-item-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.cart-item-name { margin: 0; }
.cart-item-total { font-size: var(--tll-fs-lg); margin: 0; white-space: nowrap; }
.cart-item-summary { margin: .3rem 0 .15rem; }
.cart-item-unit { font-size: var(--tll-fs-sm); margin: 0 0 .5rem; }
.cart-item-request { margin: .5rem 0; padding: .6rem .8rem; border-radius: var(--tll-radius-sm); background: var(--tll-wash); }
.cart-item-errors { margin: .6rem 0; color: var(--tll-ember); font-size: .95rem; }
.cart-item-errors ul { margin: 0; padding-left: 1.2rem; }
.cart-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .6rem; }
.cart-qty { display: inline-flex; align-items: center; gap: .4rem; }
.cart-qty-label { font-size: var(--tll-fs-sm); font-weight: 600; }
.cart-qty .qty-input { width: 5rem; min-height: 40px; padding: .35rem .5rem; text-align: center; }
.cart-remove { min-height: 40px; padding: 0 .25rem; }
.cart-addons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.cart-addons form { margin: 0; }
.addon-btn {
display: inline-flex; gap: .4rem; align-items: center; min-height: 40px; padding: .35rem .95rem;
border: 1.5px dashed var(--tll-hairline-strong); border-radius: var(--tll-radius-pill); background: transparent; color: var(--tll-ink);
font-weight: 600; font-size: .92rem; cursor: pointer;
}
.addon-btn::before { content: "+"; color: var(--tll-rose); font-weight: 700; }
.addon-btn:hover { border-color: var(--tll-rose); background: var(--tll-wash); }
.cart-when { margin: .5rem 0 1rem; }
.cart-quote-note { padding: .6rem .8rem; border-radius: var(--tll-radius-sm); background: var(--tll-wash); }
@media (max-width: 575.98px) {
.cart-item { grid-template-columns: 64px minmax(0, 1fr); padding: 1rem; }
.cart-item-art { width: 64px; height: 76px; }
.cart-item-top { flex-direction: column; gap: .1rem; }
}
.checkout-section { margin-bottom: 1.25rem; }
.checkout-section legend { float: none; width: auto; margin-bottom: .75rem; font-family: var(--tll-font-ui); font-weight: 700; font-size: var(--tll-fs-md); }
.ship-options, .address-options { display: grid; gap: .6rem; }
.ship-option, .address-option { position: relative; display: block; cursor: pointer; margin: 0; }
.ship-option input, .address-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ship-face, .address-face {
display: flex; flex-direction: column; gap: .15rem; min-height: var(--tll-touch);
padding: .8rem 1rem .8rem 2.6rem; border: 1.5px solid var(--tll-hairline-strong); border-radius: var(--tll-radius-sm);
background: var(--tll-wax); position: relative; transition: border-color .2s ease;
}
.ship-face::before, .address-face::before {
content: ""; position: absolute; left: .95rem; top: 1.05rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
border: 1.5px solid var(--tll-hairline-strong); background: var(--tll-wax);
}
.ship-option input:checked + .ship-face, .address-option input:checked + .address-face { border-color: var(--tll-flame); box-shadow: 0 0 0 1px var(--tll-flame); }
.ship-option input:checked + .ship-face::before, .address-option input:checked + .address-face::before { border: 5px solid var(--tll-flame); }
.ship-option input:focus-visible + .ship-face, .address-option input:focus-visible + .address-face { outline: 2px solid var(--tll-flame); outline-offset: 3px; }
.ship-name { font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
.ship-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.ship-when, .ship-desc { font-size: .95rem; }
.new-address { margin-top: 1rem; }
.new-address[hidden] { display: none; }
.co-items { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .6rem; }
.co-items li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .65rem; align-items: center; }
.co-art { width: 44px; height: 52px; display: block; }
.co-art .candle-art { width: 100%; height: 100%; max-width: none; }
.co-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.pay-note { padding: .75rem .9rem; border-radius: var(--tll-radius-sm); background: var(--tll-wash); }
.order-placed .placed-art { width: 110px; margin-bottom: 1rem; }
.order-placed .placed-art .candle-art { max-width: 110px; margin: 0; }
.next-steps { padding-left: 1.2rem; margin-bottom: .75rem; }
.next-steps li { margin-bottom: .35rem; }
/* 15.10 Shared design page + how it works ------------------------------------------ */
.share-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 900px) { .share-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.share-stage { height: clamp(300px, 50vh, 480px); display: flex; align-items: center; justify-content: center; }
.share-list { padding: 0; margin: 1rem 0; list-style: none; }
.share-list li { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--tll-hairline); }
.share-list li span:first-child { color: var(--tll-smoke); font-size: var(--tll-fs-sm); padding-top: .15rem; }
.prose { max-width: 66ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { font-family: var(--tll-font-ui); font-size: 1.15rem; font-weight: 700; margin-top: 1.5rem; }
.care-list { padding-left: 1.2rem; }
.care-list li { margin-bottom: .4rem; }