/* ==========================================================================
   mustprint storefront styles
   Plain CSS, no build step. Edit freely; sections follow the page order.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
    --red: #d10a12;
    --red-dark: #a9070d;
    --red-50: #fdf3f4;
    --red-100: #fde6e7;
    --red-200: #fbd0d3;
    --ink: #111318;
    --text: #2b2c34;
    --muted: #6b6d75;
    --soft: #9a9ca3;
    --line: #ececee;
    --line-soft: #f3f3f4;
    --page: #efefef;
    --white: #fff;
    --green: #0e7a1f;
    --purple: #542ca3;
    --orange: #f7931e;
    /* Supporting palette (from the colourful "p" in the logo) */
    --c-orange: #ea580c;
    --c-amber: #d97706;
    --c-green: #16a34a;
    --c-teal: #0d9488;
    --c-blue: #2563eb;
    --c-indigo: #4f46e5;
    --c-purple: #7c3aed;
    --c-pink: #db2777;
    --navy: #1c2231;

    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(17, 19, 24, .05), 0 2px 10px rgba(17, 19, 24, .04);
    --shadow: 0 6px 24px rgba(17, 19, 24, .08);
    --shadow-red: 0 8px 18px rgba(209, 10, 18, .22);

    --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --container: 1426px;
    --gutter: 22px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
    padding-inline: clamp(0px, 2.1vw, 32px);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. Buttons ---------- */
.btn {
    --btn-bg: var(--red);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 18px;
    border-radius: var(--radius-sm);
    background: var(--btn-bg); color: #fff;
    font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
    transition: transform .15s var(--ease), box-shadow .2s, filter .2s;
}
.btn:hover { filter: brightness(.92); }
.btn:active { transform: translateY(1px); }
.btn-red { box-shadow: var(--shadow-red); }
.btn-lg { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn-lg i { font-size: 14px; }
.btn-sm { min-height: 28px; padding: 0 12px; font-size: 11px; border-radius: 6px; gap: 6px; }
.btn-sm i { font-size: 10px; }
.btn-xs { min-height: 28px; padding: 0 14px; font-size: 12px; border-radius: 999px; }
.btn-white { --btn-bg: #fff; color: var(--red); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.btn-outline { --btn-bg: #fff; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.btn-light { --btn-bg: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.btn-light:hover { --btn-bg: #fff; box-shadow: inset 0 0 0 1px #d8d9dd, var(--shadow); }
.btn-ghost { --btn-bg: transparent; color: var(--muted); box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--line-soft); color: var(--ink); }

.icon-btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    border-radius: 10px; font-size: 18px; color: var(--ink);
}
.icon-btn:hover { background: var(--line-soft); }

/* ---------- 4. Top bar ---------- */
.topbar { font-size: 12px; color: #363636; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 45px; padding-block: 6px; }
.topbar-offer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-offer > i { color: var(--orange); font-size: 14px; }
.topbar-offer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-offer .btn { margin-left: 8px; }
.topbar-links { display: flex; align-items: center; gap: 26px; white-space: nowrap; }
.topbar-links li, .topbar-links a { display: inline-flex; align-items: center; gap: 8px; }
.topbar-links a { min-height: 32px; }
.topbar-links i { font-size: 13px; color: #3d3f47; }
.topbar-links a:hover { color: var(--red); }

/* ---------- 5. Page sheet ---------- */
.sheet {
    max-width: 1472px; margin-inline: auto;
    background: var(--white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: clip;
}

/* Admin live preview: the article only, no header or footer */
.is-embed { background: var(--white); }
.is-embed .sheet { border-radius: 0; padding-top: 18px; padding-bottom: 30px; }
.is-embed .read-progress { display: none; }

/* ---------- 6. Header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); }
.header-row { display: flex; align-items: center; gap: 22px; padding-top: 19px; padding-bottom: 19px; }
.menu-toggle { display: none; }
.brand { flex: none; }
.brand img { width: 184px; height: auto; }

/* Search: one rounded pill with the category menu, the box and a round red button */
.search {
    position: relative; flex: 1 1 auto; max-width: 612px; margin-left: 42px;
    display: flex; align-items: center; gap: 4px; height: 50px; padding: 4px;
    border: 1.5px solid #e3e3e6; border-radius: 999px; background: #fff;
    box-shadow: 0 6px 18px -14px rgba(17, 19, 24, .35);
    transition: border-color .2s, box-shadow .2s;
}
.search:hover { border-color: #d6d7db; }
.search:focus-within { border-color: var(--red-200); box-shadow: 0 0 0 4px var(--red-50), 0 6px 18px -14px rgba(209, 10, 18, .45); }
.search-cat { position: relative; flex: none; align-self: stretch; }
.search-cat select {
    appearance: none; -webkit-appearance: none;
    height: 100%; width: 158px; padding: 0 34px 0 18px;
    border: 0; border-radius: 999px; background: #f4f4f6; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
    transition: background .2s;
}
.search-cat select:hover { background: var(--red-50); }
.search-cat > i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; color: var(--ink); transition: transform .25s var(--ease); }
.search input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0 10px 0 12px; font-size: 13.5px; background: transparent; color: var(--ink);
}
.search input::placeholder { color: #9c9ea5; }
.search button[type="submit"] {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #f0323b, var(--red) 55%, var(--red-dark)); color: #fff; font-size: 16px;
    box-shadow: 0 8px 16px -8px rgba(209, 10, 18, .8);
    transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.search button[type="submit"]:hover { transform: scale(1.07); filter: brightness(1.05); box-shadow: 0 10px 20px -8px rgba(209, 10, 18, .9); }
.search button[type="submit"]:active { transform: scale(.96); }

/* Themed category menu (built by site.js on top of the drop-down above) */
.search-cat.is-enhanced select { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.search-cat.is-enhanced > i { display: none; }
.sc-trigger {
    display: flex; align-items: center; gap: 8px; height: 100%; max-width: 190px; padding: 0 14px 0 6px; border-radius: 999px;
    background: #f4f4f6; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s;
}
.sc-trigger:hover, .search-cat.is-open .sc-trigger { background: var(--red-50); color: var(--red); }
.sc-trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sc-trigger .sc-ico { width: 30px; height: 30px; font-size: 12.5px; }
.sc-label { overflow: hidden; text-overflow: ellipsis; }
.sc-chev { font-size: 10px; transition: transform .25s var(--ease); }
.search-cat.is-open .sc-chev { transform: rotate(180deg); }
.sc-ico {
    --ic: var(--c-blue); flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    color: var(--ic); background: color-mix(in srgb, var(--ic) 12%, #fff); font-size: 13px;
}
.sc-panel {
    position: absolute; z-index: 40; left: -4px; top: calc(100% + 10px); width: 272px; padding: 8px;
    border-radius: 20px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 26px 50px -18px rgba(17, 19, 24, .35), 0 4px 12px rgba(17, 19, 24, .05);
    transform-origin: top left; animation: sc-open .22s var(--ease-out);
}
.sc-panel[hidden] { display: none; }
.sc-panel::before { content: ""; position: absolute; left: 34px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.sc-title { padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.sc-list { display: grid; gap: 2px; max-height: min(470px, 65vh); overflow-y: auto; outline: 0; scrollbar-width: thin; }
.sc-opt {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 34px 5px 6px; border-radius: 14px;
    font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; transition: background .15s, color .15s;
}
.sc-opt:hover, .sc-opt.is-active { background: var(--red-50); color: var(--red); }
.sc-opt[aria-selected="true"] { font-weight: 700; color: var(--ink); }
.sc-opt[aria-selected="true"]::after { content: "\f00c"; position: absolute; right: 12px; font: 900 11px/1 "Font Awesome 6 Free"; color: var(--red); }
.sc-opt .sc-ico { transition: transform .2s var(--ease); }
.sc-opt:hover .sc-ico, .sc-opt.is-active .sc-ico { transform: scale(1.1) rotate(-6deg); }
.sc-opt:first-child { margin-bottom: 4px; }
.sc-opt:first-child::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: -4px; height: 1px; background: var(--line-soft); }
/* Same icon colours as the category sidebar */
.sc-opt:nth-child(1) .sc-ico, .sc-ico.is-all { --ic: var(--ink); }
.sc-opt:nth-child(9n+2) .sc-ico { --ic: var(--c-blue); }
.sc-opt:nth-child(9n+3) .sc-ico { --ic: var(--c-pink); }
.sc-opt:nth-child(9n+4) .sc-ico { --ic: var(--c-green); }
.sc-opt:nth-child(9n+5) .sc-ico { --ic: var(--c-orange); }
.sc-opt:nth-child(9n+6) .sc-ico { --ic: var(--c-amber); }
.sc-opt:nth-child(9n+7) .sc-ico { --ic: var(--c-purple); }
.sc-opt:nth-child(9n+8) .sc-ico { --ic: var(--c-teal); }
.sc-opt:nth-child(9n+9) .sc-ico { --ic: var(--c-indigo); }
.sc-opt:nth-child(9n+10) .sc-ico { --ic: var(--red); }
@keyframes sc-open { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

.header-actions { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.hact { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.hact:hover { color: var(--red); }
.hact > i { font-size: 21px; }
.hact-text > span:not(.hact-avatar) { display: flex; flex-direction: column; line-height: 1.35; }
.hact-text strong { font-size: 11.5px; font-weight: 500; }
.hact-text small { font-size: 10.5px; color: var(--muted); }
.hact-account strong { font-weight: 500; }
.hact-icon { gap: 14px; min-height: 40px; min-width: 40px; justify-content: center; }
.hact-ico { position: relative; font-size: 19px; line-height: 1; }
.hact-lbl { font-size: 12px; font-weight: 500; }
.count {
    position: absolute; top: -9px; right: -10px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 999px; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 600; line-height: 1; font-style: normal;
    border: 2px solid #fff; box-sizing: content-box;
}
.count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

/* ---------- 7. Homepage top grid ---------- */
.home-top {
    display: grid;
    grid-template-columns: 217px minmax(0, 1fr) 184px;
    grid-template-areas:
        "side hero panel"
        "side strip strip";
    column-gap: 17px;
    row-gap: 22px;
    padding-top: 2px;
}

/* Sidebar */
.cat-sidebar { grid-area: side; width: 196px; align-self: start; }
.cat-sidebar-head {
    display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px;
    background: var(--red); color: #fff; font-size: 13px; font-weight: 500;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.cat-sidebar-head i { font-size: 16px; }
.cat-sidebar .cat-menu { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.cat-menu a {
    display: flex; align-items: center; gap: 14px; height: 43px; padding: 0 16px;
    font-size: 12.5px; font-weight: 500; color: #13151f;
    border-bottom: 1px solid var(--line-soft);
    transition: background .15s, color .15s, padding .2s var(--ease);
}
.cat-menu li:last-child a { border-bottom: 0; }
.cat-menu i { width: 18px; text-align: center; font-size: 15px; color: #41444f; transition: color .15s, transform .2s var(--ease); }
.cat-menu a:hover { background: var(--red-50); color: var(--red); padding-left: 20px; }
.cat-menu a:hover i { transform: scale(1.15); }
.cat-menu li:nth-child(9n+1) i { color: var(--c-blue); }
.cat-menu li:nth-child(9n+2) i { color: var(--c-pink); }
.cat-menu li:nth-child(9n+3) i { color: var(--c-green); }
.cat-menu li:nth-child(9n+4) i { color: var(--c-orange); }
.cat-menu li:nth-child(9n+5) i { color: var(--c-amber); }
.cat-menu li:nth-child(9n+6) i { color: var(--c-purple); }
.cat-menu li:nth-child(9n+7) i { color: var(--c-teal); }
.cat-menu li:nth-child(9n+8) i { color: var(--c-indigo); }
.cat-menu li:nth-child(9n+9) i { color: var(--red); }

.upload-box {
    display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 9px 14px;
    border-radius: var(--radius-sm); background: var(--red-50); color: var(--red);
    transition: background .2s;
}
.upload-box:hover { background: var(--red-100); }
.upload-box > i { font-size: 22px; }
.upload-box span { display: flex; flex-direction: column; line-height: 1.4; }
.upload-box strong { font-size: 12px; font-weight: 600; white-space: nowrap; }
.upload-box small { font-size: 10.5px; color: #c7474d; }

/* ---------- 8. Hero slider ---------- */
.hero { grid-area: hero; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--hero-bg, #fdecec); isolation: isolate; container: hero / inline-size; display: flex; flex-direction: column; }
.hero-track { flex: 1; display: grid; grid-template-rows: 1fr; min-height: 0; height: 100%; }
.hero-slide {
    --slide-bg: #fdecec;
    --slide-accent: var(--red);
    grid-area: 1 / 1;
    position: relative;
    min-height: 377px;
    height: 100%;
    background:
        radial-gradient(circle at 92% 58%, rgba(255, 255, 255, .55) 0 108px, transparent 109px),
        radial-gradient(circle at 34% 110%, rgba(255, 255, 255, .45) 0 140px, transparent 141px),
        linear-gradient(135deg, var(--slide-bg) 0%, color-mix(in srgb, var(--slide-bg) 80%, #fff) 100%);
    visibility: hidden;
}
.hero-slide.is-active { visibility: visible; z-index: 2; }
.hero-slide.is-leaving { visibility: visible; z-index: 1; }
/* decorative dot grids */
.hero-slide::before, .hero-slide::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--slide-accent) 24%, transparent) 1.6px, transparent 2px);
    background-size: 11px 11px;
}
.hero-slide::before { width: 55px; height: 50px; left: 43%; top: 34px; }
.hero-slide::after { width: 44px; height: 55px; left: 39%; bottom: 58px; opacity: .8; }

.hero-copy { position: relative; z-index: 2; max-width: 480px; padding: 30px 0 30px 46px; } /* 46px keeps text clear of the ◀ arrow */
.hero-tags {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
    padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--slide-accent) 12%, #fff);
    color: var(--slide-accent); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.hero-tags span + span::before { content: "•"; margin: 0 9px; }
.hero-title {
    margin-top: 12px;
    /* shrinks with the slider so the headline never runs into the picture */
    font-size: clamp(24px, calc(6.2cqw - 12px), 48px); line-height: 1.07; font-weight: 700; letter-spacing: -.015em;
    color: var(--ink);
}
.hero-title span { color: var(--slide-accent); }
.hero-sub { margin-top: 14px; max-width: min(330px, 34cqw); font-size: 13px; line-height: 1.6; color: #454241; }
.hero-features { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 22px; margin-top: 22px; font-size: 11.5px; color: #36383f; }
.hero-features li { display: flex; align-items: center; gap: 9px; }
.hero-features i { color: var(--slide-accent); font-size: 13px; width: 14px; text-align: center; }
.hero-features li:nth-child(4n+1) i { color: var(--c-orange); }
.hero-features li:nth-child(4n+2) i { color: var(--c-green); }
.hero-features li:nth-child(4n+3) i { color: var(--c-blue); }
.hero-features li:nth-child(4n+4) i { color: var(--c-purple); }
.hero-slide .btn-red { --btn-bg: var(--slide-accent); box-shadow: 0 8px 18px -4px color-mix(in srgb, var(--slide-accent) 45%, transparent); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 24px; }
.hero-play { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.hero-play-icon {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; color: var(--slide-accent); font-size: 13px; box-shadow: var(--shadow);
    transition: transform .2s var(--ease);
}
.hero-play-icon i { margin-left: 3px; }
.hero-play:hover .hero-play-icon { transform: scale(1.08); }

.hero-media {
    position: absolute; z-index: 1; top: 0; bottom: 0; right: clamp(14px, 3.9cqw, 38px); width: 49%;
    display: flex; align-items: center; justify-content: center;
}
/* Narrower sliders (small laptops): tighter spacing, smaller badge */
/* Side-by-side slider only (tablet and up); phones use their own layout below */
@media (min-width: 768px) {
    @container hero (width <= 860px) {
        .hero-sub { font-size: 12.5px; }
        .hero-features { gap: 7px 14px; margin-top: 16px; font-size: 11px; }
        .hero-actions { gap: 16px; margin-top: 18px; }
        .price-badge { top: 24px; right: -10px; width: 82px; height: 82px; }
        .price-badge strong { font-size: 23px; }
        .price-badge small { font-size: 9px; }
    }
    @container hero (400px < width <= 720px) {
        .hero-media { width: 44%; }
        .hero-tags { padding: 3px 6px; font-size: 10px; letter-spacing: 0; }
        .hero-tags span + span::before { margin: 0 6px; }
        /* only the round play button; the label stays available to screen readers */
        .hero-play-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .hero-features { grid-template-columns: max-content; }
        .hero-actions .btn-lg { min-height: 40px; padding: 0 16px; font-size: 13px; }
    }
}
.hero-media.is-bleed { align-items: flex-start; }
.hero-media img { width: auto; max-width: 100%; max-height: 100%; will-change: transform; backface-visibility: hidden; }
/* Centred pictures always get the same comfortable size, whatever the uploaded file's resolution */
.hero-media:not(.is-bleed) img { max-width: 92%; max-height: 76%; object-fit: contain; }
.price-badge {
    position: absolute; top: 38px; right: -24px;
    width: 98px; height: 98px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; color: var(--slide-accent); text-align: center; line-height: 1.15;
    box-shadow: 0 10px 30px rgba(209, 10, 18, .12);
    /* Its own layer, so the gentle float stays smooth (and never snaps to whole pixels) */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.price-badge small { font-size: 10px; font-weight: 500; }
.hero-price-pill { display: none; }
.price-badge strong { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }

.hero-arrow {
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; color: var(--ink); font-size: 11px; box-shadow: var(--shadow-sm);
    transition: background .15s, color .15s;
}
.hero-arrow:hover { background: var(--red); color: #fff; }
.hero-prev { left: 8px; }
.hero-next { right: 8px; }
.hero-dots { position: absolute; z-index: 3; left: 50%; bottom: 10px; display: flex; gap: 8px; transform: translateX(-50%); }
.hero-dots button {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: inset 0 0 0 1.5px #d9d9dd;
    transition: background .2s, box-shadow .2s;
}
.hero-dots button.is-active { position: relative; background: var(--red); box-shadow: 0 0 0 3px #fff; }
/* Active dot doubles as a countdown ring to the next slide */
@property --hero-progress { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.hero-dots button.is-active::after {
    --hero-progress: 100%;
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    background: conic-gradient(var(--red) var(--hero-progress), var(--red-200) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.hero.is-playing .hero-dots button.is-active::after { animation: hero-progress var(--hero-delay, 6s) linear both; }
.hero.is-paused .hero-dots button.is-active::after { animation-play-state: paused; }

/* ---- Slider animation ---- */
/* The new banner slides over the old one, which drifts back and dims. */
.hero[data-dir="next"] .hero-slide.is-in { animation: hero-in-next .85s var(--ease-out) both; }
.hero[data-dir="prev"] .hero-slide.is-in { animation: hero-in-prev .85s var(--ease-out) both; }
.hero[data-dir="next"] .hero-slide.is-leaving { animation: hero-out-next .85s var(--ease-out) both; }
.hero[data-dir="prev"] .hero-slide.is-leaving { animation: hero-out-prev .85s var(--ease-out) both; }

/* Content arrives one piece after another (also on first page load). */
.hero-slide.is-in .hero-copy > *,
.hero-slide.is-intro .hero-copy > * { animation: hero-rise .75s var(--ease-out) both; }
.hero-slide.is-in .hero-copy > :nth-child(1) { animation-delay: .30s; }
.hero-slide.is-in .hero-copy > :nth-child(2) { animation-delay: .38s; }
.hero-slide.is-in .hero-copy > :nth-child(3) { animation-delay: .46s; }
.hero-slide.is-in .hero-copy > :nth-child(4) { animation-delay: .54s; }
.hero-slide.is-in .hero-copy > :nth-child(5) { animation-delay: .62s; }
.hero-slide.is-intro .hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-slide.is-intro .hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-slide.is-intro .hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-slide.is-intro .hero-copy > :nth-child(5) { animation-delay: .32s; }

.hero-slide.is-in .hero-media img { animation: hero-art 1s var(--ease-out) .2s both; }
.hero-slide.is-in .hero-media:not(.is-bleed) img,
.hero-slide.is-intro .hero-media:not(.is-bleed) img { animation: hero-art 1s var(--ease-out) .2s both, hero-float 4s ease-in-out 1.2s infinite alternate; }

.hero-slide.is-active .price-badge { animation: hero-float 3.2s ease-in-out infinite alternate; }
.hero-slide.is-in .price-badge,
.hero-slide.is-intro .price-badge { animation: hero-pop .7s cubic-bezier(.34, 1.56, .64, 1) .6s both, hero-float 3.2s ease-in-out 1.3s infinite alternate; }

@keyframes hero-in-next { from { transform: translateX(100%); } to { transform: none; } }
@keyframes hero-in-prev { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes hero-out-next { from { transform: none; } to { transform: translateX(-28%); filter: brightness(.93); } }
@keyframes hero-out-prev { from { transform: none; } to { transform: translateX(28%); filter: brightness(.93); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-art { from { opacity: 0; transform: translateX(70px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hero-pop { from { opacity: 0; transform: scale(.3) rotate(-18deg); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes hero-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -7px, 0); } }
@keyframes hero-progress { from { --hero-progress: 0%; } to { --hero-progress: 100%; } }

/* ---------- 9. Highlights (red panel) ---------- */
.highlights {
    grid-area: panel;
    display: flex; flex-direction: column;
    padding: 22px 14px 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 112% -6%, rgba(255, 255, 255, .13) 0 92px, transparent 93px),
        radial-gradient(circle at -18% 62%, rgba(255, 255, 255, .07) 0 70px, transparent 71px),
        linear-gradient(160deg, #262d40, #161b27);
    color: #fff;
}
.highlights ul { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; flex: 1; }
.highlights li { transition: transform .2s var(--ease); }
.highlights li:hover { transform: translateX(3px); }
.highlights li:hover .highlight-icon { transform: scale(1.12) rotate(-6deg); }
.highlight-icon { transition: transform .25s var(--ease); }
.highlights li:nth-child(4n+1) .highlight-icon { background: var(--c-orange); }
.highlights li:nth-child(4n+2) .highlight-icon { background: var(--c-green); }
.highlights li:nth-child(4n+3) .highlight-icon { background: var(--c-blue); }
.highlights li:nth-child(4n+4) .highlight-icon { background: var(--c-pink); }

/* "Explore categories" box: overlapping product thumbnails */
.highlight-explore {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 14px; padding: 10px;
    border: 1px dashed rgba(255, 255, 255, .45); border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    transition: background .2s;
}
.highlight-explore:hover { background: rgba(255, 255, 255, .18); }
.explore-thumbs { display: flex; align-items: center; }
.explore-thumbs > * {
    flex: none; width: 32px; height: 32px; margin-left: -9px;
    border-radius: 50%; border: 2px solid #fff; background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    object-fit: cover;
    transition: transform .25s var(--ease);
}
.explore-thumbs > :first-child { margin-left: 0; }
.explore-thumbs > :nth-child(2) { transition-delay: .03s; }
.explore-thumbs > :nth-child(3) { transition-delay: .06s; }
.explore-thumbs > :nth-child(4) { transition-delay: .09s; }
.explore-thumbs > :nth-child(5) { transition-delay: .12s; }
.highlight-explore:hover .explore-thumbs > * { transform: translateY(-3px); }
.explore-more { display: grid; place-items: center; color: var(--red); font-size: 10.5px; font-weight: 700; }
.explore-text { display: flex; flex-direction: column; line-height: 1.35; }
.highlights .explore-text strong { font-size: 11px; }
.highlights .explore-text small { display: flex; align-items: center; gap: 5px; }
.explore-text i { font-size: 8px; transition: transform .2s var(--ease); }
.highlight-explore:hover .explore-text i { transform: translateX(3px); }
.highlights li { display: flex; align-items: center; gap: 10px; }
.highlight-icon {
    flex: none; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%;
    background: rgba(255, 255, 255, .16); font-size: 14px;
}
.highlights li > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.highlights strong { font-size: 11.5px; font-weight: 600; }
.highlights small { font-size: 9.5px; color: #aeb5c4; }
.highlights .btn { width: 100%; margin-top: 12px; min-height: 38px; font-size: 13px; border-radius: 6px; }

/* Offers with a live countdown: when offers are running they fill the whole panel */
.highlights.has-offers { padding: 0; overflow: hidden; background: var(--navy); }
.offer-rotator { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.offer-track { flex: 1; display: grid; }
.offer-card {
    grid-area: 1 / 1; position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    padding: 16px 15px 28px; color: #fff;
    background:
        radial-gradient(circle at 112% -4%, rgba(255, 255, 255, .2) 0 84px, transparent 85px),
        radial-gradient(circle at -24% 104%, rgba(255, 255, 255, .12) 0 74px, transparent 75px),
        linear-gradient(160deg, var(--from, #ea580c), var(--to, #db2777));
    opacity: 0; visibility: hidden; transform: translateX(40px);
    transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.offer-card.is-active { z-index: 1; opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s; }
.offer-card.is-leaving { visibility: visible; transform: translateX(-40px); }
/* light sweeping across the offer */
.offer-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 62%);
    transform: translateX(-130%); animation: offer-shine 4.5s ease-in-out infinite;
}
@keyframes offer-shine { 55%, 100% { transform: translateX(130%); } }
.offer-deco { position: absolute; z-index: -1; right: -16px; top: 58px; font-size: 96px; color: rgba(255, 255, 255, .12); transform: rotate(-18deg); }
.offer-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .2); font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.offer-badge i { color: #fde047; animation: offer-bolt 1s ease-in-out infinite alternate; }
@keyframes offer-bolt { to { transform: scale(1.3); filter: drop-shadow(0 0 4px #fde047); } }
.offer-title { font-size: 24px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.offer-sub { margin-top: 4px; font-size: 12px; line-height: 1.4; opacity: .95; }
.offer-ends { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
.offer-timer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.offer-unit {
    display: flex; flex-direction: column; align-items: center; padding: 4px 0 3px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: rgba(0, 0, 0, .2);
}
.offer-unit b { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.offer-unit b.tick { animation: offer-tick .35s var(--ease-out); }
@keyframes offer-tick { from { transform: translateY(-60%); opacity: 0; } }
.offer-unit small { margin-top: 1px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.offer-ended { grid-column: 1 / -1; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); font-size: 12px; font-weight: 600; text-align: center; }
.offer-foot { display: flex; flex-direction: column; gap: 8px; }
/* Offers without a coupon code get a bigger countdown so the card still feels full */
@media (min-width: 1024px) {
    .offer-card:not(:has(.offer-code)) .offer-timer { gap: 8px; }
    .offer-card:not(:has(.offer-code)) .offer-unit { padding: 9px 0 8px; }
    .offer-card:not(:has(.offer-code)) .offer-unit b { font-size: 25px; }
    .offer-card:not(:has(.offer-code)) .offer-unit small { font-size: 9px; }
}
.offer-code {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 11px;
    border: 1.5px dashed rgba(255, 255, 255, .85); border-radius: 9px; color: #fff; transition: background .2s;
}
.offer-code span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.offer-code span small { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.offer-code:hover { background: rgba(255, 255, 255, .16); }
.offer-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border-radius: 9px;
    background: #fff; color: var(--to, #db2777); font-size: 13.5px; font-weight: 700;
    box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .35); transition: transform .2s var(--ease);
}
.offer-cta i { font-size: 11px; transition: transform .2s var(--ease); }
.offer-cta:hover { transform: translateY(-2px); }
.offer-cta:hover i { transform: translateX(4px); }
.offer-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 11px; display: flex; justify-content: center; gap: 5px; }
.offer-dots button { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .4); transition: width .3s var(--ease-out), background .3s; }
.offer-dots button.is-active { width: 18px; background: #fff; }

/* Tablets: offer laid out in one wide row */
@media (max-width: 1023px) {
    .offer-card {
        display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(190px, 230px);
        grid-template-areas: "badge timer foot" "main timer foot";
        align-items: center; column-gap: 24px; row-gap: 8px; padding: 18px 22px 28px;
    }
    .offer-badge { grid-area: badge; justify-self: start; }
    .offer-main { grid-area: main; }
    .offer-countdown { grid-area: timer; }
    .offer-foot { grid-area: foot; margin-top: 0; }
    .offer-timer { grid-template-columns: repeat(4, 60px); }
}

/* Phones: stacked, countdown in one row */
@media (max-width: 767px) {
    .offer-card { display: flex; align-items: stretch; padding: 18px 16px 30px; }
    .offer-badge { align-self: flex-start; }
    .offer-timer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .offer-foot { flex-direction: row; }
    .offer-foot > * { flex: 1; }
    .offer-title { font-size: 24px; }
}

/* ---------- 10. Category strip ---------- */
.cat-strip { grid-area: strip; display: flex; align-items: stretch; gap: 22px; padding-left: 10px; }
.cat-strip-list { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cat-strip-list li { position: relative; }
.cat-strip-list li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 4px; width: 1px; background: var(--line-soft); }
.cat-strip-list a { display: flex; flex-direction: column; align-items: center; padding: 0 6px 6px; text-align: center; }
.cat-thumb {
    display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px;
    border-radius: 50%; background: #f7f7f8; overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-strip-list a:hover .cat-thumb { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(17, 19, 24, .1); }
.cat-strip-list strong { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cat-strip-list small { margin-top: 3px; font-size: 10.5px; color: #545454; }
.cat-strip-list a:hover strong { color: var(--red); }

.cat-all {
    flex: none; width: 139px; align-self: flex-start;
    display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 86px;
    border-radius: 14px; background: var(--red-50);
    font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.5;
    transition: background .2s;
}
.cat-all:hover { background: var(--red-100); }
.grid-icon { display: grid; grid-template-columns: repeat(2, 12px); gap: 4px; }
.grid-icon i { width: 12px; height: 12px; border-radius: 3px; background: var(--red); }
.grid-icon i:nth-child(2) { background: var(--c-amber); }
.grid-icon i:nth-child(3) { background: var(--c-green); }
.grid-icon i:nth-child(4) { background: var(--c-blue); }

/* Desktop alignment: the circles sit exactly under the slider, "View all" exactly under the
   side panel, and the sidebar runs the full height of both rows. */
@media (min-width: 1024px) {
    .cat-sidebar { align-self: stretch; display: flex; flex-direction: column; }
    .cat-sidebar .cat-menu { flex: 1; display: flex; flex-direction: column; }
    .cat-sidebar .cat-menu li { flex: 1; display: flex; }
    .cat-sidebar .cat-menu a { flex: 1; height: auto; min-height: 40px; }
    .cat-strip { display: grid; grid-template-columns: subgrid; column-gap: normal; row-gap: 0; padding-left: 0; }
    .cat-strip .cat-strip-list { grid-column: 1; }
    .cat-strip .cat-all { grid-column: 2; width: auto; align-self: stretch; }
}

/* ---------- 11. Promo banners ---------- */
.promo-wrap { position: relative; margin-top: 22px; }
.promo-row {
    display: grid;
    grid-template-columns: 1.02fr 1fr .92fr .97fr 1fr;
    gap: 12px;
}
.promo-card {
    --promo-bg: #fdf3e5; --promo-ink: var(--red);
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column;
    min-height: 146px; padding: 16px 16px 15px;
    border-radius: 18px; border: 1px solid color-mix(in srgb, var(--promo-ink) 12%, transparent);
    background:
        radial-gradient(circle at 88% 96%, rgba(255, 255, 255, .75) 0 58px, transparent 59px),
        linear-gradient(125deg, var(--promo-bg) 0%, color-mix(in srgb, var(--promo-bg) 62%, #fff) 100%);
    transition: transform .3s var(--ease), box-shadow .3s;
}
/* faint dots in the corner, and a light sweep on hover */
.promo-card::before {
    content: ""; position: absolute; z-index: -1; right: 10px; top: 10px; width: 54px; height: 40px;
    background-image: radial-gradient(color-mix(in srgb, var(--promo-ink) 30%, transparent) 1.3px, transparent 1.6px); background-size: 9px 9px;
}
.promo-card::after {
    content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-110%);
}
.promo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -24px var(--promo-ink); }
.promo-card:hover::after { transform: translateX(110%); transition: transform .9s var(--ease-out); }
/* The copy fills the card and the button sits at the bottom, so every card's button lines up. */
.promo-copy { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.promo-copy h2 { margin-bottom: 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.promo-copy p { margin-bottom: 12px; max-width: 58%; font-size: 11.5px; line-height: 1.5; color: #3b3d44; }
.promo-copy .btn { margin-top: auto; border-radius: 999px; padding-inline: 14px; box-shadow: 0 8px 16px -8px var(--promo-ink); }
.promo-copy .btn i { transition: transform .25s var(--ease); }
.promo-card:hover .promo-copy .btn i { transform: translateX(4px); }
.promo-art {
    position: absolute; z-index: 0; right: 0; bottom: 0; max-width: 46%; max-height: 92%; width: auto; pointer-events: none;
    transform-origin: bottom right; transition: transform .45s var(--ease-out);
}
.promo-card:hover .promo-art { transform: scale(1.07) translateY(-3px); }
.promo-card:first-child .promo-art { max-width: 62%; opacity: .95; }
/* A PNG cut-out of an ID card on its lanyard: it hangs from the top, swings gently, and the cut end of the lanyard fades out */
.promo-card .promo-art[src*="school-id-cards"] {
    right: 6px; bottom: 8px; width: 44%; max-width: 130px; max-height: none; opacity: 1;
    transform-origin: 50% 0; animation: pa-swing 3.6s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%);
    filter: drop-shadow(0 8px 10px rgba(29, 78, 216, .25));
}
@keyframes pa-swing { from { transform: rotate(-5deg); } to { transform: rotate(2deg); } }
.promo-card:has(.promo-art[src*="school-id-cards"]) .promo-copy p { max-width: 54%; }
@media (max-width: 767px) { .promo-card .promo-art[src*="school-id-cards"] { width: 36%; bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .promo-card .promo-art[src*="school-id-cards"] { animation: none; transform: rotate(-3deg); } }

/* The cards rise in one after another */
.js .promo-wrap[data-reveal] .promo-card { opacity: 0; translate: 0 22px; }
.js .promo-wrap[data-reveal].is-visible .promo-card { animation: card-rise .6s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }

/* ---------- 12. Product shelves: Bestsellers, Trending, Newly Added ---------- */
.shelf { padding-bottom: 28px; }
.bestsellers { margin-top: 24px; }
.section-head { display: flex; align-items: center; gap: 12px 36px; margin-bottom: 14px; }
.section-head h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.section-head h2 i { font-size: 20px; background: linear-gradient(180deg, #ffb620, #ef3b11); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head h2.is-trending i { background-image: linear-gradient(180deg, #f472b6, #db2777); }
.section-head h2 b { font-weight: inherit; }
.section-head h2.is-trending b { color: var(--c-pink); }
.section-head h2.is-new i { background-image: linear-gradient(180deg, #60a5fa, #4f46e5); }
.section-head h2.is-new b { color: var(--c-indigo); }
.section-sub { margin-left: -24px; font-size: 12.5px; color: var(--muted); }

/* Soft coloured panel behind a shelf (Trending = warm, Newly Added = cool) */
.shelf-panel {
    --panel-a: #f6f7fb; --panel-b: #f6f7fb; --panel-line: var(--line); --panel-glow: transparent;
    position: relative; overflow: hidden; isolation: isolate;
    padding: 16px 20px 20px; border-radius: 22px; border: 1px solid var(--panel-line);
    background:
        radial-gradient(circle at 102% -8%, var(--panel-glow) 0 150px, transparent 151px),
        radial-gradient(circle at -4% 112%, var(--panel-glow) 0 110px, transparent 111px),
        linear-gradient(135deg, var(--panel-a) 0%, #fff 52%, var(--panel-b) 100%);
}
.shelf-panel.is-warm { --panel-a: #fff1e6; --panel-b: #fdecf4; --panel-line: #fbe0d2; --panel-glow: rgba(249, 115, 22, .08); }
.shelf-panel .product-card { border-color: rgba(17, 19, 24, .06); box-shadow: 0 2px 10px rgba(17, 19, 24, .04); }
.shelf-panel .pill-link { background: #fff; }

/* Horizontally scrolling row of product cards (shared by every shelf) */
.rail { position: relative; }
.rail-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: 2px; margin: -2px;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail .hs-arrow { --c: var(--ink); }
/* Product rows show every card in full: arrows only appear while the row is hovered */
@media (hover: hover) {
    .shelf .rail:not(:hover):not(:focus-within) > .hs-arrow { opacity: 0; pointer-events: none; }
}

/* Small tags on product cards (rank in Trending, "New" in Newly Added) */
.card-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 42px); }
.card-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}
.card-tag i { font-size: 9px; }
.card-tag.is-trend { background: linear-gradient(90deg, #f97316, #db2777); }
.card-tag.is-new { background: linear-gradient(90deg, #6366f1, #2563eb); }
.tabs { display: flex; gap: 8px; }
.tabs button {
    flex: none; white-space: nowrap;
    height: 28px; padding: 0 18px; border-radius: 999px;
    font-size: 11px; font-weight: 500; color: #2b2c34; background: var(--line-soft);
    transition: background .15s, color .15s;
}
.tabs button:hover { background: #e9eaee; color: var(--ink); }
.tabs button.is-active { background: var(--ink); color: #fff; }
.section-head-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pill-link {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 16px;
    border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--ink);
}
.pill-link:hover { border-color: var(--red-200); color: var(--red); }

.empty-note { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted); }

.product-card {
    position: relative; scroll-snap-align: start;
    display: flex; flex-direction: column;
    padding: 7px 7px 12px;
    border: 1px solid var(--line); border-radius: 16px;
    background: #fff;
    transition: border-color .2s, box-shadow .25s, transform .25s var(--ease);
}
.product-card:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }
.badge-off {
    padding: 4px 8px; border-radius: 999px; background: var(--c-green); color: #fff;
    font-size: 10px; font-weight: 600; line-height: 1;
}
.wish-form { position: absolute; top: 8px; right: 8px; z-index: 2; }
.wish-btn {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); color: #8a8c93; font-size: 14px;
    opacity: 0; transition: opacity .2s, color .2s, transform .2s;
}
.product-card:hover .wish-btn, .wish-btn:focus-visible, .wish-btn.is-active { opacity: 1; }
.wish-btn:hover, .wish-btn.is-active { color: var(--red); }
.wish-btn:active { transform: scale(.9); }
.product-media { position: relative; display: block; aspect-ratio: 1 / 1; margin: 0 0 10px; overflow: hidden; border-radius: 11px; background: #f3f3f5; }
/* The uploaded photo fills the frame (any normal square photo works, no background removal needed) */
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.product-card:hover .product-media img { transform: scale(1.07); }
/* More than one photo: they slide past while the card is hovered */
.pm-track { position: absolute; inset: 0; display: flex; transform: translateX(calc(var(--slide, 0) * -100%)); transition: transform .65s var(--ease-out); }
.pm-track img { flex: none; }
.product-card:hover .has-photos img { transform: none; }
.pm-dots {
    position: absolute; z-index: 1; left: 50%; bottom: 8px; display: flex; gap: 4px; padding: 4px 6px; border-radius: 999px;
    background: rgba(17, 19, 24, .38); backdrop-filter: blur(4px); transform: translate(-50%, 4px); opacity: 0; transition: opacity .25s, transform .25s;
}
.pm-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .55); transition: width .3s var(--ease-out), background .3s; }
.pm-dots i.is-on { width: 16px; background: #fff; }
.product-card:hover .pm-dots { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .pm-dots { opacity: 1; transform: translate(-50%, 0); } }
.product-body {
    flex: 1; padding: 0 5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: end; column-gap: 8px;
    grid-template-areas: "name name" "desc cart" "price cart";
}
.product-body > form { grid-area: cart; align-self: end; }
.product-name { grid-area: name; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.product-name a:hover { color: var(--red); }
/* long names stop after two lines */
.product-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-desc { grid-area: desc; margin-top: 1px; font-size: 10.5px; color: #525254; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-price { grid-area: price; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin-top: 4px; line-height: 1.3; }
.product-price strong { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.product-price s { font-size: 11px; color: #97999e; }
.cart-btn {
    display: grid; place-items: center; width: 33px; height: 31px; border-radius: 7px;
    background: var(--red); color: #fff; font-size: 14px;
    transition: background .15s, transform .15s;
}
.cart-btn:hover { background: var(--red-dark); }
.cart-btn:active { transform: scale(.94); }
.cart-btn[disabled], .wish-btn[disabled] { opacity: .6; cursor: progress; }
.cart-btn.added { animation: bump .45s var(--ease); }

/* ---------- 12b. Customer reviews ---------- */
.reviews { padding-bottom: 44px; }
.reviews-inner {
    position: relative;
    display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 26px; align-items: center;
    padding: 22px; border-radius: 24px;
    background:
        radial-gradient(circle at 96% 8%, rgba(124, 58, 237, .07) 0 120px, transparent 121px),
        linear-gradient(135deg, #f6f3ff 0%, #fff 55%, #f3f0ff 100%);
    border: 1px solid #ebe5fb;
}

/* Purple intro card */
.reviews-intro {
    position: relative; overflow: hidden; isolation: isolate; align-self: stretch;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 30px 28px; border-radius: 20px; color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, .14) 0 110px, transparent 111px),
        radial-gradient(circle at 0 100%, rgba(255, 255, 255, .08) 0 90px, transparent 91px),
        linear-gradient(150deg, #7c3aed 0%, #4c1d95 100%);
    box-shadow: 0 20px 40px -14px rgba(76, 29, 149, .5);
}
.reviews-bigquote { position: absolute; z-index: -1; right: 16px; bottom: 6px; font-size: 118px; color: rgba(255, 255, 255, .1); }
.reviews-tag {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.reviews-tag i { animation: heart-beat 1.6s ease-in-out infinite; }
@keyframes heart-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(.95); } }
.reviews-intro h2 { margin-top: 14px; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.reviews-lead { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: #e9ddff; }
.reviews-score {
    display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px 16px;
    border-radius: 14px; background: rgba(255, 255, 255, .12);
}
.reviews-score > strong { font-size: 38px; font-weight: 700; line-height: 1; }
.reviews-score > span { display: flex; flex-direction: column; gap: 4px; }
.reviews-score .review-stars { color: #ffd166; }
.reviews-score small { font-size: 11.5px; color: #e9ddff; }
.reviews-first { display: flex; gap: 10px; margin-top: 18px; font-size: 13px; line-height: 1.55; color: #fff; }
.reviews-first i { margin-top: 3px; }
.reviews-intro .btn { margin-top: 22px; min-height: 44px; padding: 0 22px; }
.reviews-intro .btn-white { color: #5b21b6; }
.reviews-intro .btn i { font-size: 12px; transition: transform .25s var(--ease); }
.reviews-intro .btn:hover i { transform: rotate(-15deg) translateY(-1px); }

/* Moving rows of review cards */
.reviews-marquee {
    position: relative; min-width: 0; display: grid; gap: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-row { overflow: hidden; padding: 12px 0; }
.marquee-track, .marquee-copy { display: flex; gap: 18px; }
.marquee-track { width: max-content; animation: marquee var(--duration, 60s) linear infinite; }
.marquee-row.is-reverse .marquee-track { animation-direction: reverse; }
.reviews-marquee:hover .marquee-track,
.reviews-marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }

.marquee-toggle {
    position: absolute; right: 16px; bottom: 12px; z-index: 2;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: #fff; color: var(--ink); font-size: 10px; box-shadow: var(--shadow-sm);
    opacity: .75; transition: opacity .2s, background .2s, color .2s;
}
.marquee-toggle:hover, .marquee-toggle:focus-visible { opacity: 1; background: var(--c-purple); color: #fff; }

/* Review card */
.review-card {
    position: relative; flex: none; width: 330px; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px 22px 18px; border-radius: 16px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 4px 18px rgba(17, 19, 24, .05);
    transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
.review-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(76, 29, 149, .12); border-color: #ddd6fe; }
.review-top { display: flex; align-items: center; justify-content: space-between; }
.review-stars { display: inline-flex; gap: 3px; color: #f5a623; font-size: 14px; }
.review-stars .is-off { color: #e3e4e8; }
.review-quote-icon { font-size: 26px; color: #ede9fe; transition: color .35s, transform .35s var(--ease-out); }
.review-card:hover .review-quote-icon { color: var(--c-purple); transform: rotate(-10deg) scale(1.12); }
.review-card blockquote {
    margin: 0; font-size: 13.5px; line-height: 1.65; color: #3b3d44;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.65em * 4);
}
.review-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px dashed #ececee; }
.review-avatar {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--avatar, var(--red)); color: #fff; font-size: 14px; font-weight: 600; object-fit: cover;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #ececee;
}
.review-person { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.review-person strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.review-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.review-product {
    flex: none; margin-left: auto; padding: 4px 10px; border-radius: 999px;
    background: #f3f0ff; color: #6d28d9; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.reviews-empty { display: grid; place-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--muted); }
.reviews-empty i { font-size: 34px; color: #f5a623; }

/* Scroll-in animation (only when JavaScript is running, so content is never hidden without it) */
.js .reviews[data-reveal] .reviews-intro { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reviews[data-reveal] .marquee-row { opacity: 0; transform: translateX(60px); transition: opacity .9s var(--ease-out) .15s, transform .9s var(--ease-out) .15s; }
.js .reviews[data-reveal] .marquee-row.is-reverse { transform: translateX(-60px); transition-delay: .3s; }
.js .reviews.is-visible .reviews-intro,
.js .reviews.is-visible .marquee-row,
.js .reviews.is-visible .marquee-row.is-reverse { opacity: 1; transform: none; }
.js .reviews.is-visible .review-card .review-stars i { animation: star-pop .5s var(--ease-out) both; }
.js .reviews.is-visible .review-stars i:nth-child(2) { animation-delay: .08s; }
.js .reviews.is-visible .review-stars i:nth-child(3) { animation-delay: .16s; }
.js .reviews.is-visible .review-stars i:nth-child(4) { animation-delay: .24s; }
.js .reviews.is-visible .review-stars i:nth-child(5) { animation-delay: .32s; }
@keyframes star-pop { from { opacity: 0; transform: scale(.2) rotate(-45deg); } }

/* Write-a-review pop-up and page */
.review-dialog {
    width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    padding: 0; border: 0; border-radius: 20px; overflow: auto;
    color: var(--text); box-shadow: 0 30px 80px rgba(17, 19, 24, .3);
}
.review-dialog::backdrop { background: rgba(17, 19, 24, .55); backdrop-filter: blur(3px); }
.review-dialog[open] { animation: dialog-in .4s var(--ease-out); }
.review-dialog[open]::backdrop { animation: fade-in .3s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(28px) scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
.review-dialog-head {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--red-50), #fff 70%);
}
.review-dialog-head h2, .review-dialog-head h1 { font-size: 18px; font-weight: 700; color: var(--ink); }
.review-dialog-head p { font-size: 12.5px; color: var(--muted); }
.review-dialog-head .icon-btn { margin-left: auto; flex: none; }
.review-dialog-icon {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: var(--red); color: #fff; font-size: 17px; box-shadow: var(--shadow-red);
}
.review-form { display: grid; gap: 14px; padding: 18px 20px 20px; }
.star-input { margin: 0; padding: 0; border: 0; text-align: center; }
.star-input legend { width: 100%; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.star-input-row { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 30px; color: #dfe1e6; cursor: pointer; transition: color .15s, transform .2s var(--ease-out); }
.star-input label:hover { transform: scale(1.18); }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: #f5a623; }
.star-input input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
    width: 100%; padding: 11px 14px; border: 1px solid #e3e3e6; border-radius: 10px;
    background: #fff; font-size: 13.5px; color: var(--ink); outline: 0;
    transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red-200); box-shadow: 0 0 0 4px var(--red-50); }
.review-form .btn { width: 100%; min-height: 46px; }
.form-error { padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12.5px; }
.form-note { display: flex; gap: 8px; font-size: 11.5px; color: var(--muted); }
.form-note i { margin-top: 2px; color: var(--green); }
.review-page { padding-top: 8px; padding-bottom: 60px; }
.review-page-card { max-width: 560px; margin: 24px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }

@media (max-width: 1023px) {
    .reviews-inner { grid-template-columns: 1fr; }
    .reviews-intro { padding: 26px 24px; }
}
@media (max-width: 767px) {
    .reviews { padding-bottom: 30px; }
    .reviews-inner { gap: 16px; padding: 12px; border-radius: 20px; }
    .reviews-intro h2 { font-size: 23px; }
    .reviews-intro .btn { width: 100%; }
    .review-card { width: 280px; padding: 18px 18px 16px; }
    .review-card blockquote { font-size: 13px; }
    .review-product { display: none; }
    .field-row { grid-template-columns: 1fr; }
}

/* Motion-sensitive visitors: no gliding rows, just a row they can swipe */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .marquee-row { overflow-x: auto; scrollbar-width: none; }
    .marquee-copy, .marquee-toggle { display: none; }
    .reviews-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 12bb. Shop by need (product collections) ---------- */
.needs { padding-bottom: 30px; }
.needs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; }
.needs-head h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--ink); }
.needs-head h2 i { font-size: 18px; color: var(--c-orange); }
.needs-head h2 b { font-weight: inherit; color: var(--c-orange); }
.needs-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.needs-tabs::-webkit-scrollbar { display: none; }
.needs-tabs button {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font-size: 12.5px; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
    transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.needs-tabs button i { font-size: 12px; }
.needs-tabs button:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 16%, #fff); }
.needs-tabs button.is-active { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 8px 16px -8px var(--c); }

.needs-panel { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 4fr); gap: 16px; }
.needs-intro, .needs-track > * { animation: needs-rise .5s var(--ease-out) both; }
.needs-track > :nth-child(1) { animation-delay: .06s; }
.needs-track > :nth-child(2) { animation-delay: .12s; }
.needs-track > :nth-child(3) { animation-delay: .18s; }
.needs-track > :nth-child(n+4) { animation-delay: .24s; }

/* Horizontal product scroller: 4 cards visible on desktop, the rest a scroll away */
.needs-scroller { position: relative; min-width: 0; display: grid; }
.needs-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding: 2px; margin: -2px;
}
.needs-track::-webkit-scrollbar { display: none; }
/* Shared by every horizontal scroller: edge fades + round arrow buttons */
[data-hscroll]:not(.rail).can-next > [data-hscroll-track] { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
[data-hscroll]:not(.rail).can-prev > [data-hscroll-track] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%); mask-image: linear-gradient(90deg, transparent, #000 8%); }
[data-hscroll]:not(.rail).can-prev.can-next > [data-hscroll-track] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hs-arrow {
    position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: #fff; color: var(--c, var(--ink)); font-size: 12px; box-shadow: 0 6px 18px rgba(17, 19, 24, .16);
    opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.8);
    transition: opacity .2s, transform .25s var(--ease-out), background .2s, color .2s;
}
.hs-arrow.is-prev { left: -10px; }
.hs-arrow.is-next { right: -10px; }
[data-hscroll].can-prev > .hs-arrow.is-prev,
[data-hscroll].can-next > .hs-arrow.is-next { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.hs-arrow:hover { background: var(--c, var(--red)); color: #fff; }
@keyframes needs-rise { from { opacity: 0; transform: translateY(16px); } }

/* Colour-matched intro card */
.needs-intro {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 20px 20px 18px; border-radius: 18px; color: #fff;
    background:
        radial-gradient(circle at 110% -10%, rgba(255, 255, 255, .22) 0 70px, transparent 71px),
        linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 70%, #111318));
    box-shadow: 0 12px 24px -14px var(--c);
}
.needs-intro-deco { position: absolute; z-index: -1; right: -18px; bottom: -22px; font-size: 150px; color: rgba(255, 255, 255, .12); transform: rotate(-12deg); }
.needs-intro-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 14px; background: rgba(255, 255, 255, .2); font-size: 18px; }
.needs-intro h3 { margin-top: 4px; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.needs-intro p { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
@media (min-width: 768px) { .needs-intro-btn { margin-top: auto; } }
.needs-intro-btn {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 7px 13px; border-radius: 8px;
    background: #fff; color: var(--c); font-size: 12px; font-weight: 700; transition: transform .2s var(--ease);
}
.needs-intro-btn i { font-size: 10px; transition: transform .2s var(--ease); }
.needs-intro-btn:hover { transform: translateY(-1px); }
.needs-intro-btn:hover i { transform: translateX(3px); }

@media (max-width: 1199px) {
    .needs-panel { grid-template-columns: minmax(0, 1fr); }
    .needs-track { grid-auto-columns: calc((100% - 3 * 16px) / 3.4); }
    .needs-intro { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; padding: 14px 16px; }
    .needs-intro-icon { grid-row: span 2; }
    .needs-intro h3 { margin-top: 0; }
    .needs-intro p { grid-column: 2; margin-top: 2px; }
    .needs-intro .needs-intro-btn { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 767px) {
    .needs { padding-bottom: 24px; }
    .needs-head { gap: 10px; }
    .needs-head h2 { font-size: 18px; }
    .needs-tabs { width: 100%; }
    .needs-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .needs-track { grid-auto-columns: calc((100% - 10px) / 2.2); gap: 10px; }
    .hs-arrow { display: none; }
    .needs-intro { grid-template-columns: auto 1fr; }
    .needs-intro .needs-intro-btn { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .needs-intro, .needs-track > * { animation: none; }
    .needs-track { scroll-behavior: auto; }
}

/* ---------- 12c. FAQ (compact, two columns) ---------- */
.faq { padding-bottom: 28px; }
.faq-panel {
    padding: 16px 18px 18px; border-radius: 20px; border: 1px solid #dbeafe;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 55%, #f0f9ff 100%);
}

/* Header row: title on the left, help buttons on the right */
.faq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.faq-title { display: flex; align-items: center; gap: 12px; }
.faq-badge {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--c-blue); color: #fff; font-size: 18px; box-shadow: 0 8px 18px -4px rgba(37, 99, 235, .45);
}
.faq-title h2 { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.faq-title h2 span { color: var(--c-blue); }
.faq-title p { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.faq-help { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.faq-help > span { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; font-size: 12.5px; font-weight: 500; color: var(--text); }
.faq-help > span i { color: var(--c-blue); }
.faq-help .btn { min-height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 8px; }
.faq-help .btn-red { --btn-bg: var(--c-blue); box-shadow: none; }
.faq-help .btn-outline { color: var(--c-blue); box-shadow: inset 0 0 0 1.5px var(--c-blue); }

/* Two independent columns */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: start; }
.faq-col { display: grid; gap: 8px; }
.faq-item {
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    transition: border-color .25s, box-shadow .25s;
}
.faq-item:hover { border-color: #bfdbfe; }
.faq-item.is-open { border-color: #bfdbfe; box-shadow: 0 10px 24px -14px rgba(37, 99, 235, .4); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    text-align: left; color: var(--ink); border-radius: 12px;
}
.faq-num {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
    background: var(--line-soft); color: var(--muted); font-size: 11px; font-weight: 700;
    transition: background .25s, color .25s;
}
.faq-item.is-open .faq-num { background: var(--c-blue); color: #fff; }
.faq-q-text { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.35; transition: color .2s; }
.faq-q:hover .faq-q-text, .faq-item.is-open .faq-q-text { color: var(--c-blue); }
.faq-icon {
    position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: #eff6ff; transition: background .25s, transform .4s var(--ease-out);
}
.faq-icon::before, .faq-icon::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; border-radius: 2px;
    background: var(--c-blue); transform: translate(-50%, -50%); transition: transform .4s var(--ease-out), background .25s;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon { background: var(--c-blue); transform: rotate(180deg); }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: #fff; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Smooth height animation: the answer row grows from 0fr to 1fr */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-a-inner {
    overflow: hidden; min-height: 0; visibility: hidden;
    padding: 0 14px 0 48px; opacity: 0; transform: translateY(-4px);
    transition: opacity .3s, transform .4s var(--ease-out), visibility .4s, padding .4s var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a-inner { visibility: visible; padding-bottom: 12px; opacity: 1; transform: none; transition-delay: .05s; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a-inner { visibility: visible; padding-bottom: 12px; opacity: 1; transform: none; }
.faq-a-inner p { font-size: 13px; line-height: 1.65; color: #4b4d55; }
.faq-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--c-blue); }
.faq-link i { font-size: 10px; transition: transform .2s var(--ease-out); }
.faq-link:hover i { transform: translateX(4px); }

/* Scroll-in animation */
.js .faq[data-reveal] .faq-head { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .faq[data-reveal] .faq-item { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), border-color .25s, box-shadow .25s; transition-delay: calc(var(--i, 1) * 50ms); }
.js .faq.is-visible .faq-head,
.js .faq.is-visible .faq-item { opacity: 1; transform: none; }
.js .faq.is-visible .faq-item:hover, .js .faq.is-visible .faq-item.is-open { transition-delay: 0s; }

@media (max-width: 1023px) {
    .faq-list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .faq { padding-bottom: 22px; }
    .faq-panel { padding: 14px 12px; border-radius: 16px; }
    .faq-title h2 { font-size: 18px; }
    .faq-title p { display: none; }
    .faq-badge { width: 34px; height: 34px; font-size: 15px; }
    .faq-help { width: 100%; }
    .faq-help > span { width: 100%; }
    .faq-help .btn { flex: 1; }
    .faq-q-text { font-size: 13px; }
}

/* ---------- 13. Footer ---------- */
/* All footer rules live here, including tablet and phone sizes. */

/* Trust strip */
.trust-strip { border-top: 1px solid var(--line); background: #fff; }
.trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 16px; padding-bottom: 16px; }
.trust-list li { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 2px 14px; }
.trust-list li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 32px; width: 1px; background: #e4e5e8; transform: translateY(-50%); }
.trust-list img { flex: none; width: auto; height: 34px; }
.trust-list span { display: flex; flex-direction: column; line-height: 1.35; }
.trust-list strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.trust-list small { margin-top: 1px; font-size: 12.5px; color: #5b5f68; }

/* Dark footer */
.site-footer { --footer-bg: #141921; --footer-line: #282e36; --footer-text: #d5d8de; --footer-muted: #a7adb7; }
.footer-main { background: var(--footer-bg); color: var(--footer-text); }
.footer-grid {
    display: grid;
    grid-template-columns: 21.5fr 16fr 15.8fr 16.5fr 27.5fr;
    padding-top: 40px; padding-bottom: 38px;
}
.site-footer h2 { margin-bottom: 12px; font-size: 15.5px; font-weight: 600; color: #fff; }

.footer-brand { padding-right: 32px; border-right: 1px solid var(--footer-line); }
.footer-logo img { width: 170px; height: auto; }
.footer-tagline { margin-top: 14px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #fff; }
.footer-about { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--footer-muted); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social a, .footer-social span {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid #353b44; color: #fff; font-size: 14px;
    transition: background .2s, border-color .2s, transform .2s;
}
.footer-social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }

.footer-col { padding: 0 18px 0 38px; }
.chevron-list { display: grid; gap: 0; }
.chevron-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 180px; padding: 4px 0; font-size: 13px; color: var(--footer-text);
    transition: color .2s;
}
.chevron-list i { font-size: 10px; color: #7b808a; transition: color .2s, transform .2s var(--ease); }
.chevron-list a:hover { color: #fff; }
.chevron-list a:hover i { color: var(--red); transform: translateX(3px); }

.icon-list { display: grid; gap: 0; }
.icon-list a { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 13px; color: #e7e9ed; transition: color .2s; }
.icon-list img { flex: none; width: 18px; height: 18px; object-fit: contain; opacity: .95; transition: transform .2s var(--ease); }
.icon-list a:hover { color: #fff; }
.icon-list a:hover img { transform: scale(1.1); }
.support-contact { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--footer-line); }
.support-contact li { display: flex; align-items: flex-start; gap: 12px; }
.support-contact img { flex: none; width: 17px; height: 17px; margin-top: 2px; object-fit: contain; }
.support-contact span { display: flex; flex-direction: column; line-height: 1.35; }
.support-contact a { display: inline-block; padding: 4px 0; margin: -4px 0; font-size: 13.5px; font-weight: 500; color: #fff; }
.support-contact a:hover { color: #ffb4b7; }
.support-contact small { margin-top: 2px; font-size: 11.5px; color: var(--footer-muted); white-space: nowrap; }

.footer-news { padding-left: 40px; border-left: 1px solid var(--footer-line); }
.footer-news p { font-size: 13px; line-height: 1.6; color: #c9cdd4; }
.news-form { margin-top: 12px; }
.news-field { display: flex; height: 42px; }
.news-field input[type="email"] {
    flex: 1; min-width: 0; padding: 0 18px; border: 0; outline: 0;
    border-radius: 8px 0 0 8px; background: #f9f9fb; color: var(--ink); font-size: 13.5px;
}
.news-field input[type="email"]::placeholder { color: #9ca3af; }
.news-field input[type="email"]:focus { box-shadow: inset 0 0 0 2px var(--red-200); }
.news-field button {
    flex: none; width: 48px; border-radius: 0 8px 8px 0; background: var(--red); color: #fff; font-size: 15px;
    transition: background .2s;
}
.news-field button i { transition: transform .2s var(--ease); }
.news-field button:hover { background: var(--red-dark); }
.news-field button:hover i { transform: translate(2px, -2px); }
.news-field button[disabled] { opacity: .6; cursor: progress; }
.news-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.news-consent { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: #c9cdd4; cursor: pointer; }
.news-consent input {
    appearance: none; -webkit-appearance: none; flex: none;
    width: 20px; height: 20px; margin: 0; border-radius: 5px; background: #fff; cursor: pointer;
    display: grid; place-items: center; transition: background .15s;
}
.news-consent input::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.news-consent input:checked { background: var(--red); }
.news-consent input:checked::after { transform: rotate(45deg) scale(1); }
.news-consent input:focus-visible { outline: 2px solid var(--red-200); outline-offset: 2px; }
.news-error { margin-top: 10px; font-size: 12.5px; color: #fca5a5; }

.news-app { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--footer-line); }
.news-app h2 { margin-bottom: 6px; }
.soon-pill { display: inline-block; margin-left: 8px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(209, 10, 18, .18); color: #ff9ea2; font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.app-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.app-badges img { width: auto; height: 42px; }
.app-badges a { transition: transform .2s var(--ease); }
.app-badges a:hover { transform: translateY(-2px); }
.app-badges .is-soon { cursor: default; }
.footer-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; font-size: 10.5px; color: #c9cdd4; }
.footer-perks li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); text-align: center; white-space: nowrap; }
.footer-perks img { flex: none; width: auto; height: 20px; }

/* Bottom bar */
.footer-bottom { background: #f7f8fa; color: #374151; }
.footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 12px; padding-bottom: 12px; }
.footer-copy p { font-size: 13px; }
.footer-copy strong { font-weight: 600; color: var(--ink); }
.footer-copy .footer-company { margin-top: 3px; font-size: 11.5px; color: #6b7280; }
.footer-company span { margin: 0 6px; color: #b3b7bf; }
.payment-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.payment-list li {
    display: grid; place-items: center; width: 56px; height: 34px;
    border: 1px solid #eceef1; border-radius: 6px; background: #fff;
}
.payment-list img { max-width: 40px; max-height: 19px; width: auto; height: auto; }
.footer-made { display: flex; align-items: center; gap: 24px; }
.footer-made p {
    display: flex; align-items: center; gap: 7px; padding: 4px 20px;
    border-left: 1px solid #d5d8dd; border-right: 1px solid #d5d8dd;
    font-size: 12.5px; color: #4b5563; white-space: nowrap;
}
.footer-made i { color: var(--red); font-size: 15px; }
.footer-made img { width: auto; height: 38px; }

/* Footer on small laptops and tablets */
@media (max-width: 1199px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
    .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 36px; padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--footer-line); }
    .footer-brand > * { grid-column: 2; }
    .footer-logo { grid-column: 1; grid-row: 1 / span 4; }
    .footer-tagline { margin-top: 0; }
    .footer-social { margin-top: 14px; }
    .footer-col:first-of-type { padding-left: 0; }
    .footer-news { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--footer-line); }
    .news-app { margin-top: 0; padding-top: 0; border-top: 0; }
    .footer-bottom-row { flex-wrap: wrap; justify-content: center; text-align: center; }
    .payment-list { order: 3; flex-basis: 100%; }
}

@media (max-width: 1023px) {
    .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .trust-list li { justify-content: flex-start; }
    .trust-list li:nth-child(3)::before { display: none; }
    .footer-col { padding: 0 12px 0 0; }
    .footer-support { padding-left: 12px; }
}

/* Footer on phones */
@media (max-width: 767px) {
    .trust-list { gap: 14px 12px; padding-top: 16px; padding-bottom: 16px; }
    .trust-list li { flex-direction: row; align-items: center; gap: 10px; padding: 0; }
    .trust-list li::before { display: none; }
    .trust-list img { height: 26px; }
    .trust-list strong { font-size: 12.5px; line-height: 1.3; }
    .trust-list small { font-size: 11px; }

    .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 26px; padding-top: 30px; padding-bottom: 30px; }
    .footer-brand { display: block; padding-bottom: 22px; }
    .footer-logo img { width: 150px; }
    .footer-tagline { margin-top: 12px; }
    .footer-social { gap: 10px; }
    .footer-social a, .footer-social span { width: 36px; height: 36px; }
    .footer-col, .footer-support { padding: 0; }
    .chevron-list a { max-width: none; font-size: 13px; }
    .footer-support { grid-column: 1 / -1; }
    .footer-support .icon-list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
    .icon-list a { font-size: 13px; gap: 10px; }
    .footer-news { display: block; padding-top: 22px; }
    .news-app { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--footer-line); }
    .app-badges img { height: 40px; }

    .footer-bottom-row { flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .payment-list { order: 0; }
    .payment-list { gap: 7px; }
    .payment-list li { width: 50px; height: 34px; }
    .payment-list img { max-width: 38px; max-height: 18px; }
    .footer-made p { padding: 4px 16px; }
}

/* ---------- 14. Drawer, mobile nav, toast, flash ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(17, 19, 24, .45); opacity: 0; transition: opacity .25s; }
.drawer-panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(330px, 86vw);
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px 16px 24px; overflow-y: auto; overscroll-behavior: contain;
    background: #fff; box-shadow: var(--shadow);
    transform: translateX(-100%); transition: transform .3s var(--ease);
}
.drawer.is-open .drawer-overlay { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-head img { width: 130px; }
.drawer-account { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--line-soft); }
.drawer-account i { font-size: 20px; }
.drawer-account span { display: flex; flex-direction: column; line-height: 1.35; }
.drawer-account strong { font-size: 13px; font-weight: 600; }
.drawer-account small { font-size: 11px; color: var(--muted); }
.drawer-title { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--red); color: #fff; font-size: 13px; font-weight: 500; }
.drawer .cat-menu a { height: 44px; font-size: 13px; }
.drawer .upload-box { margin-top: 0; }
.drawer-links { border-top: 1px solid var(--line); padding-top: 8px; }
.drawer-links a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-size: 13px; }
.drawer-links i { width: 18px; text-align: center; color: var(--red); }
body.is-locked { overflow: hidden; }

.mobile-nav { display: none; }

.toast {
    position: fixed; z-index: 80; left: 50%; bottom: 24px;
    max-width: calc(100vw - 32px);
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: 10px;
    background: var(--ink); color: #fff; font-size: 13px; box-shadow: var(--shadow);
    transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s, transform .3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast i { color: #4ade80; }
.toast.is-error i { color: #fca5a5; }

.flash { margin: 6px 0 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: #ecfdf3; color: #146c2e; font-size: 13px; }

/* ---------- 15. Placeholder (coming soon) pages ---------- */
.coming-soon { padding-top: 8px; padding-bottom: 60px; }
/* Breathing room so the trail never touches the box below it */
.breadcrumb { padding: 2px 0 14px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--soft); }
.breadcrumb a:hover { color: var(--red); }
/* The current page's name shortens with … instead of wrapping onto its own line */
.breadcrumb li[aria-current] { flex: 1 1 0; min-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coming-soon-card {
    max-width: 640px; margin: 28px auto 0; padding: 48px 32px; text-align: center;
    border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--red-50), #fff 70%);
    border: 1px solid var(--line);
}
.coming-soon-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--red); font-size: 24px; box-shadow: var(--shadow); }
.coming-soon-card h1 { margin-top: 18px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--ink); line-height: 1.25; }
.coming-soon-card p { margin-top: 12px; color: var(--muted); }
.coming-soon-card .coming-soon-intro { color: var(--text); }
.coming-soon-card p a { color: var(--red); font-weight: 600; }
.coming-soon-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below 1500px the five banners would get too narrow: keep them full size and let them scroll */
@media (max-width: 1499px) {
    .promo-row {
        grid-template-columns: repeat(5, minmax(300px, 1fr)); overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 6px; margin: -4px -2px -6px;
    }
    .promo-row::-webkit-scrollbar { display: none; }
    .promo-card { scroll-snap-align: start; }
}

/* Touch screens swipe the scrollers, so their arrow buttons are not needed there */
@media (hover: none) {
    .hs-arrow { display: none; }
}

/* Large laptops */
@media (max-width: 1360px) {
    .header-actions { gap: 24px; }
    .search { margin-left: 16px; }
    .home-top { grid-template-columns: 214px minmax(0, 1fr) 176px; }
    .cat-sidebar { width: 190px; }
    .rail-track { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
}

/* Small laptops */
@media (max-width: 1199px) {
    :root { --gutter: 18px; }
    .hact-text small { display: none; }
    .hact-bulk { display: none; }
    .home-top { grid-template-columns: 200px minmax(0, 1fr) 168px; column-gap: 14px; }
    .cat-sidebar { width: 184px; }
    .cat-menu a { gap: 10px; padding: 0 12px; }
    .cat-menu a:hover { padding-left: 15px; }
    .hero-copy { padding-top: 26px; padding-bottom: 28px; }
    .cat-strip { padding-left: 0; }
    .cat-all { width: 118px; }
    .promo-card { scroll-snap-align: start; }
    .rail-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}

/* Tablets: sidebar moves into the drawer */
@media (max-width: 1023px) {
    .topbar-links li:not(:last-child) { display: none; }
    .menu-toggle { display: inline-grid; margin-left: -8px; }
    .header-row { gap: 14px; }
    .brand img { width: 150px; }
    .search { margin-left: 0; }
    .search-cat { display: none; }
    .hact-account { display: none; }
    .home-top {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "hero" "panel" "strip";
        row-gap: 16px;
    }
    .cat-sidebar { display: none; }
    .highlights { flex-direction: row; align-items: center; gap: 20px; padding: 16px 18px; }
    .highlights ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
    .highlights .btn { width: auto; margin-top: 0; flex: none; padding: 0 22px; }
    .highlights .highlight-explore { display: none; } /* the category strip sits right below */
    .cat-strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .cat-strip::-webkit-scrollbar { display: none; }
    .cat-strip-list { display: flex; flex: none; }
    .cat-strip-list li { flex: none; width: 104px; scroll-snap-align: start; }
    .cat-all { min-height: 100px; width: 110px; flex-direction: column; gap: 10px; margin-left: 10px; text-align: center; font-size: 11.5px; }
    .rail-track { grid-auto-columns: calc((100% - 3 * 16px) / 3.4); }
    .section-sub { display: none; }
    .section-head { flex-wrap: wrap; gap: 10px 12px; }
    .tabs { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* Phones */
@media (max-width: 767px) {
    :root { --gutter: 14px; }
    body { padding-inline: 0; padding-bottom: calc(62px + env(safe-area-inset-bottom)); font-size: 13.5px; }
    .sheet { border-radius: 0; }

    .topbar { background: var(--ink); color: #fff; }
    .topbar-row { justify-content: center; min-height: 38px; }
    .topbar-offer { font-size: 11.5px; }
    .topbar-offer .btn { min-height: 24px; padding: 0 10px; font-size: 11px; margin-left: 2px; }
    .topbar-links { display: none; }

    .header-row { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 12px; }
    .brand img { width: 128px; }
    .header-actions { gap: 20px; }
    .hact-lbl { display: none; }
    .hact-wishlist { display: none; }
    .search { order: 5; flex-basis: 100%; max-width: none; height: 46px; }
    .search input { padding-left: 14px; }
    .search button[type="submit"] { width: 36px; height: 36px; font-size: 14px; }

    .hero { border-radius: 16px; }
    .hero-slide { display: flex; flex-direction: column; min-height: 0; }
    .hero-slide::before { width: 44px; height: 33px; }
    .hero-slide::before { left: auto; right: 16px; top: auto; bottom: 18px; }
    .hero-slide::after { display: none; }
    .hero-media { position: relative; order: -1; top: auto; bottom: auto; right: auto; width: 100%; height: 196px; padding: 0 18px; }
    .hero-media:not(.is-bleed) { padding-top: 14px; }
    .hero-media img { max-height: 100%; }
    .hero-media:not(.is-bleed) img { max-width: 88%; max-height: 92%; }
    /* the round badge would cover the photo on a phone; the price shows as a pill in the text instead */
    .price-badge { display: none; }
    .hero-price-pill {
        display: inline-flex; align-items: baseline; gap: 5px; align-self: flex-start;
        padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--slide-accent);
        font-size: 11.5px; font-weight: 500; box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--slide-accent) 60%, transparent);
    }
    .hero-price-pill strong { font-size: 15px; font-weight: 800; }
    .hero-copy:has(.hero-price-pill) .hero-tags { display: none; }
    .hero-copy { flex: 1; display: flex; flex-direction: column; max-width: none; padding: 14px 18px 40px; }
    .hero-tags { align-self: flex-start; font-size: 10.5px; }
    .offer-unit small, .offer-code span small { font-size: 10px; }
    .hero-title { margin-top: 10px; font-size: 25px; }
    .hero-sub { margin-top: 8px; max-width: none; font-size: 12.5px; line-height: 1.5; }
    .hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-top: 12px; font-size: 11.5px; }
    .hero-features li { min-width: 0; white-space: nowrap; }
    /* buttons sit at the same height on every slide */
    .hero-actions { gap: 14px; margin-top: auto; padding-top: 16px; }
    .hero-play { gap: 8px; }
    .hero-actions .btn-lg { min-height: 44px; font-size: 14px; padding: 0 16px; }
    .hero-play-icon { width: 38px; height: 38px; }
    .hero-arrow { display: none; }
    .hero-dots { left: 50%; bottom: 12px; margin: 0; transform: translateX(-50%); }

    .highlights { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border-radius: 16px; }
    .highlights ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
    .highlights li { gap: 10px; }
    .highlights .btn { width: 100%; margin-top: 0; }

    .cat-strip-list li { width: 96px; }
    .cat-strip-list strong { white-space: nowrap; }
    .cat-thumb { width: 64px; height: 64px; }
    .cat-strip-list strong { font-size: 12px; }

    .promo-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 320px); gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }

    .section-head h2 { font-size: 18px; }
    .tabs button { height: 32px; font-size: 12px; }
    .shelf { padding-bottom: 22px; }
    .shelf-panel { padding: 14px 12px 14px; border-radius: 18px; }
    .rail-track { grid-auto-columns: calc((100% - 10px) / 2.2); gap: 10px; }
    .card-badges { top: 8px; left: 8px; gap: 3px; }
    .card-tag, .badge-off { padding: 4px 6px; }
    .card-tag i { display: none; }
    .product-card { padding: 6px 6px 10px; }
    .wish-btn { opacity: 1; }
    .product-price strong { font-size: 14px; }


    .mobile-nav {
        position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
        display: grid; grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(17, 19, 24, .06);
    }
    .mobile-nav > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; font-size: 10.5px; font-weight: 500; color: #4a4c54; }
    .mobile-nav i { font-size: 18px; }
    .mobile-nav .is-active { color: var(--red); }
    .mn-ico { position: relative; }
    .mn-ico .count { top: -7px; right: -14px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 10px; border-width: 1.5px; }
    .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
    .hero-title { font-size: 23px; }
    .hero-features { font-size: 11px; }
    /* keep the two buttons on one row: only the round play button, label stays for screen readers */
    .hero-play-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .topbar-offer > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Product page
   ========================================================================== */
.page-product main { padding-bottom: 40px; }
.shop-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 6px; }
.shop-side { grid-area: auto; position: sticky; top: 88px; width: 100%; align-self: start; display: block; }
.shop-side .cat-menu, .shop-side .cat-menu li, .shop-side .cat-menu a { flex: none; display: block; }
.shop-side .cat-menu a { display: flex; height: 43px; }
.shop-main { min-width: 0; }

/* Photo on the left stays in view while the details on the right scroll; the extras sit under the buy buttons */
.product-top {
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: auto 1fr;
    column-gap: 28px; row-gap: 16px; align-items: start; margin-top: 4px;
}
.product-top > .product-gallery { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 92px; }
.product-top > .product-info { grid-column: 2; grid-row: 1; }
.product-top > .gallery-extras { grid-column: 2; grid-row: 2; }

/* Under the photo */
.gallery-extras { display: grid; gap: 12px; }
.trust-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.trust-cards li {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 11px; text-align: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s var(--ease), box-shadow .2s;
}
.trust-cards li:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
@media (max-width: 600px) {
    .trust-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-cards li { flex-direction: row; gap: 10px; padding: 10px 11px; text-align: left; }
}
.trust-cards i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; }
.trust-cards li:nth-child(1) i { background: #e8f0fe; color: var(--c-blue); }
.trust-cards li:nth-child(2) i { background: #fff7e0; color: var(--c-amber); }
.trust-cards li:nth-child(3) i { background: #e9f9ef; color: var(--c-green); }
.trust-cards li:nth-child(4) i { background: #f5f0ff; color: var(--c-purple); }
.trust-cards strong { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.25; }
.trust-cards small { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; }
.best-price {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius);
    background: linear-gradient(120deg, #fff7e0, #fff 75%); border: 1px solid #fde7a8; font-size: 12.5px; color: var(--text);
}
.best-price i { color: var(--c-amber); font-size: 14px; }
.best-price strong { color: var(--red); font-size: 14px; }
.best-price a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.help-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--radius);
    background: var(--navy, #1c2231); color: #fff;
}
.hc-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 15px; }
.hc-text { flex: 1 1 150px; min-width: 0; }
.hc-text strong { display: block; font-size: 13px; }
.hc-text small { display: block; font-size: 11px; color: rgba(255, 255, 255, .7); }
.hc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hc-actions .btn { min-height: 34px; font-size: 12px; }

/* ---- Photos ---- */
.product-gallery { min-width: 0; }
/* Square frame that always shows the whole photo */
.pg-stage {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden; outline: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.pg-stage:focus-visible { box-shadow: 0 0 0 3px var(--red-100); }
.pg-track {
    position: absolute; inset: 0; display: flex; touch-action: pan-y;
    transform: translateX(calc(var(--at, 0) * -100%)); transition: transform .55s var(--ease-out);
}
.pg-track.is-dragging { transition: none; }
.pg-track img { flex: none; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.pg-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: var(--c-green); color: #fff; font-size: 11px; font-weight: 700; }
.pg-nav {
    position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 14px; box-shadow: 0 8px 20px -8px rgba(17, 19, 24, .45);
    transform: translateY(-50%); transition: opacity .2s, background .2s, color .2s, transform .2s var(--ease);
}
.pg-nav:hover { background: var(--red); color: #fff; }
.pg-nav.is-prev { left: 12px; }
.pg-nav.is-next { right: 12px; }
@media (hover: hover) {
    .pg-stage .pg-nav { opacity: 0; }
    .pg-stage:hover .pg-nav, .pg-stage:focus-within .pg-nav { opacity: 1; }
}
.pg-count {
    position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px;
    background: rgba(17, 19, 24, .72); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(4px);
}
.pg-zoom {
    position: absolute; z-index: 2; right: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 14px; box-shadow: 0 8px 20px -8px rgba(17, 19, 24, .45); transition: background .2s, color .2s;
}
.pg-zoom:hover { background: var(--red); color: #fff; }

.pg-thumbs { display: flex; gap: 10px; margin-top: 12px; padding: 3px 3px 6px; overflow-x: auto; scrollbar-width: none; }
.pg-thumbs::-webkit-scrollbar { display: none; }
.pg-thumb { flex: none; width: 76px; height: 76px; padding: 3px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pg-thumb:hover { border-color: var(--red-200); transform: translateY(-2px); }
.pg-thumb.is-active { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-50); }

/* Full-screen view */
.pg-lightbox {
    width: min(92vw, 920px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 22px;
    background: #fff; overflow: visible; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6);
}
.pg-lightbox[open] { animation: dialog-in .3s var(--ease-out); }
.pg-lightbox::backdrop { background: rgba(10, 12, 20, .78); backdrop-filter: blur(4px); }
.pg-lightbox img { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: 22px; user-select: none; -webkit-user-drag: none; }
.pg-lb-frame { position: relative; overflow: hidden; border-radius: 22px; cursor: zoom-in; }
.pg-lightbox img.from-right { animation: pg-in-right .45s var(--ease-out); }
/* "see all slabs" lands the slabs just below the sticky header and flashes them */
.bulk-band { scroll-margin-top: 100px; }
@media (max-width: 767px) { .bulk-band { scroll-margin-top: 132px; } }
.bulk-band.is-flash { animation: slabs-flash 1.6s var(--ease-out); }
@keyframes slabs-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 10, 18, 0); } 25% { box-shadow: 0 0 0 6px rgba(209, 10, 18, .25); } }
.pg-lightbox img.from-left { animation: pg-in-left .45s var(--ease-out); }
@keyframes pg-in-right { from { opacity: .2; transform: translateX(60px); } }
@keyframes pg-in-left { from { opacity: .2; transform: translateX(-60px); } }
.pg-lightbox .pg-nav.is-prev { left: -21px; }
.pg-lightbox .pg-nav.is-next { right: -21px; }
.pg-lightbox .pg-count { left: 50%; transform: translateX(-50%); bottom: 14px; }
.pg-lb-close {
    position: absolute; z-index: 3; top: -16px; right: -16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; color: var(--ink); font-size: 16px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); transition: background .2s, color .2s, transform .2s;
}
.pg-lb-close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }
@media (max-width: 767px) {
    .pg-lightbox .pg-nav.is-prev { left: 8px; }
    .pg-lightbox .pg-nav.is-next { right: 8px; }
    .pg-lb-close { top: 8px; right: 8px; }
}

/* ---- Details ---- */
.product-info { min-width: 0; }
.pi-title { font-size: 24px; line-height: 1.24; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.pi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pi-rating { display: inline-flex; align-items: center; gap: 7px; }
.pi-rating strong { color: var(--ink); }
.pi-rating:hover { color: var(--red); }
.pi-rating.is-empty i { color: #f5a623; }
.stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: #dfe1e6; }
.pi-sku { font-size: 12px; color: var(--soft); }
.pill-best { padding: 4px 11px; border-radius: 999px; background: #e9f9ef; color: #0e7a1f; font-size: 11.5px; font-weight: 700; }
.pi-summary { margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--text); max-width: 62ch; }

.pi-priceline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-top: 12px; }
.pi-priceline strong { font-size: 29px; font-weight: 800; letter-spacing: -.02em; color: var(--red); }
.pi-per { font-size: 15px; color: var(--muted); }
.pi-priceline s { font-size: 15px; color: var(--soft); }
.pi-save { padding: 4px 10px; border-radius: 999px; background: #e9f9ef; color: #0e7a1f; font-size: 11.5px; font-weight: 700; }
.pill-bulk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--red-50); color: var(--red); font-size: 11.5px; font-weight: 700; }
.pi-tax { flex-basis: 100%; font-size: 12px; color: var(--muted); }

/* Options panel */
.buy-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.bp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bp-row + .bp-row, .bp-design + .bp-row { margin-top: 12px; }
.bp-field { min-width: 0; }
.bp-field > label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink); }
.bp-field > label span { font-weight: 400; color: var(--muted); }
.bp-field input[type="text"], .bp-field select {
    width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e3e3e6; border-radius: 10px;
    background: #fff; font-size: 13.5px; color: var(--ink); outline: 0; transition: border-color .2s, box-shadow .2s;
}
.bp-field select { cursor: pointer; }
.bp-field input[type="text"]:focus, .bp-field select:focus { border-color: var(--red-200); box-shadow: 0 0 0 4px var(--red-50); }
.bp-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.qty-box { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.qty-box button { width: 40px; height: 42px; display: grid; place-items: center; color: var(--muted); font-size: 12px; transition: background .15s, color .15s; }
.qty-box button:hover { background: var(--line-soft); color: var(--ink); }
.qty-box input {
    width: 76px; height: 42px; border: 0; border-inline: 1px solid var(--line); text-align: center;
    font-size: 15px; font-weight: 700; color: var(--ink); outline: 0; -moz-appearance: textfield;
}
.qty-box input::-webkit-outer-spin-button, .qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bp-design { margin: 12px 0 0; padding: 0; border: 0; }
.bp-design legend { margin-bottom: 8px; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.design-card {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid var(--line); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;
}
.design-card:hover { border-color: var(--red-200); }
.design-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.design-card:has(input:checked) { border-color: var(--red); background: var(--red-50); box-shadow: 0 0 0 3px var(--red-50); }
.design-card:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.dc-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--red-50); color: var(--red); font-size: 15px; }
.design-card:has(input:checked) .dc-icon { background: var(--red); color: #fff; }
.dc-text strong { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.dc-text small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.bp-delivery {
    display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 12px; border-radius: 12px;
    background: #ecfdf3; border: 1px solid #bbf7d0;
}
.bp-delivery i { color: #0e7a1f; font-size: 15px; }
.bp-delivery strong { display: block; font-size: 13px; color: #0f5132; }
.bp-delivery small { display: block; font-size: 11.5px; color: #3f7a55; }
.bp-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.bp-total strong { font-size: 20px; font-weight: 800; color: var(--ink); }

.pi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.pi-actions .btn { flex: 1 1 200px; min-height: 50px; font-size: 14.5px; }
.pi-actions .btn-red { box-shadow: var(--shadow-red); }
.btn-quote { --btn-bg: #a9070d; color: #fff; }
.btn-quote:hover { --btn-bg: #8c060b; }
.pi-wish .wish-btn {
    opacity: 1;
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px;
    border: 1.5px solid var(--line); background: #fff; color: var(--muted); font-size: 18px; transition: all .15s;
}
.pi-wish .wish-btn:hover { border-color: var(--red-200); color: var(--red); }
.pi-wish .wish-btn.is-active { color: var(--red); border-color: var(--red-200); background: var(--red-50); }
.wish-fallback { display: none; }


/* ---- Tabs ---- */
.product-detail { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.pd-tabs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--line-soft); }
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab { flex: none; height: 42px; padding: 0 20px; border-radius: 10px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.pd-tab:hover { color: var(--ink); background: #fff; }
.pd-tab.is-active { color: var(--red); background: #fff; box-shadow: var(--shadow-sm); }
.pd-tab span { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--red-50); color: var(--red); font-size: 11px; }
.pd-panel { padding: 18px 20px 22px; }
.desc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.prose { font-size: 13.5px; line-height: 1.75; color: var(--text); }
.prose p + p { margin-top: 10px; }
.pd-desc > * + * { margin-top: 10px; }
.pd-desc ul { display: grid; gap: 6px; }
.pd-desc ul li { position: relative; padding-left: 24px; }
.pd-desc ul li::before { content: "\f00c"; position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: 900 8.5px/1 "Font Awesome 6 Free"; color: #fff; background: var(--c-green); }
.pd-desc strong { color: var(--ink); }
.pd-desc h1, .pd-desc h2, .pd-desc h3, .pd-desc h4 { margin-top: 16px; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.pd-desc > :first-child { margin-top: 0; }
.pd-desc ol { display: grid; gap: 6px; counter-reset: pd; }
.pd-desc ol li { position: relative; padding-left: 26px; counter-increment: pd; }
.pd-desc ol li::before { content: counter(pd); position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-weight: 800; line-height: 1; color: var(--ink); background: var(--line-soft); }
.muted-note { font-size: 13px; color: var(--muted); }
.spec-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* "At a glance" card beside the description when there are no specifications */
.glance-card { padding: 18px 18px 8px; border-radius: 18px; background: linear-gradient(150deg, #f4f6ff, #fff 70%); border: 1px solid #e3e8fb; }
.glance-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.glance-card h3 i { color: var(--c-indigo); }
.glance-card li { display: grid; grid-template-columns: 30px 110px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed #e3e6f0; font-size: 13px; }
.glance-card li:first-child { border-top: 0; }
.glance-card li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 12.5px; color: var(--ic, var(--c-blue)); background: color-mix(in srgb, var(--ic, var(--c-blue)) 12%, #fff); }
.glance-card li:nth-child(8n+2) i { --ic: var(--c-pink); }
.glance-card li:nth-child(8n+3) i { --ic: var(--c-green); }
.glance-card li:nth-child(8n+4) i { --ic: var(--c-orange); }
.glance-card li:nth-child(8n+5) i { --ic: var(--c-purple); }
.glance-card li:nth-child(8n+6) i { --ic: var(--c-teal); }
.glance-card li:nth-child(8n+7) i { --ic: var(--red); }
.glance-card li:nth-child(8n+8) i { --ic: var(--c-amber); }
.glance-card span { color: var(--muted); }
.glance-card strong { font-weight: 600; color: var(--ink); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 10px 13px; text-align: left; font-size: 12.5px; border: 1px solid var(--line); }
.spec-table th { width: 42%; font-weight: 600; color: var(--muted); background: var(--line-soft); }
.spec-table td { color: var(--ink); }
.bulk-table { max-width: 560px; margin-top: 14px; }
.bulk-table thead th { width: auto; color: var(--ink); }

.pr-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.pr-score { display: flex; align-items: center; gap: 10px; }
.pr-score strong { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; }
.pr-score small { font-size: 12px; color: var(--muted); }
.pr-summary .btn { margin-left: auto; }
.pr-list { display: grid; gap: 18px; }
.pr-item { display: flex; gap: 14px; }
.pr-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; }
.pr-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.pr-name small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.pr-title { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pr-body { margin-top: 4px; font-size: 13.5px; line-height: 1.65; color: var(--text); }
.pr-date { display: block; margin-top: 5px; font-size: 11.5px; color: var(--soft); }
.pr-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 16px; text-align: center; }
.pr-empty > i { font-size: 30px; color: var(--soft); margin-bottom: 4px; }
.pr-empty .btn { margin-top: 8px; }

/* ---- Bulk pricing band ---- */
.bulk-band {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
    margin-top: 20px; padding: 14px 18px; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--red-50), #fff 60%); border: 1px solid var(--red-100);
}
.bb-head { display: flex; align-items: center; gap: 12px; }
.bb-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; font-size: 15px; box-shadow: var(--shadow-red); }
.bb-head h2 { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.bb-head small { font-weight: 400; font-size: 12px; color: var(--muted); }
.bb-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 10px; }
.tier {
    position: relative; padding: 12px 8px; border-radius: 12px; text-align: center;
    background: #fff; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tier:hover { border-color: var(--red-200); transform: translateY(-2px); }
.tier.is-active { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-50); }
.tier-tag {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    padding: 3px 9px; border-radius: 999px; background: linear-gradient(90deg, #f97316, var(--red)); color: #fff; font-size: 10.5px; font-weight: 700;
}
.tier-range { display: block; font-size: 11.5px; color: var(--muted); }
.tier-price { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; color: var(--ink); }
.tier.is-active .tier-price { color: var(--red); }
.bb-quote { text-align: right; }
.bb-quote p { display: grid; margin-bottom: 8px; }
.bb-quote strong { font-size: 13px; color: var(--ink); }
.bb-quote small { font-size: 11.5px; color: var(--muted); }

.related-shelf { margin-top: 20px; padding-inline: 0; }

/* ---- Sticky buy bar (phones) ---- */
.buy-bar {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 60px;
    display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(17, 19, 24, .08);
}
.buy-bar .bb-price { display: grid; line-height: 1.2; }
.buy-bar .bb-price strong { font-size: 17px; font-weight: 800; color: var(--red); }
.buy-bar .bb-price small { font-size: 11px; color: var(--muted); }
.buy-bar .btn { min-height: 44px; }
.buy-bar .btn-red { flex: 1; }

/* ---- Bulk quote pop-up ---- */
.sheet-dialog {
    width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    padding: 0; border: 0; border-radius: 20px; overflow: auto;
    color: var(--text); box-shadow: 0 30px 80px rgba(17, 19, 24, .3);
}
.sheet-dialog::backdrop { background: rgba(17, 19, 24, .55); backdrop-filter: blur(3px); }
.sheet-dialog[open] { animation: dialog-in .35s var(--ease-out); }
.sheet-dialog form { display: grid; gap: 16px; padding: 20px; }
.qd-head { display: flex; align-items: flex-start; gap: 12px; }
.qd-head h2 { font-size: 19px; font-weight: 700; color: var(--ink); }
.qd-head p { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.qd-close { flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); background: var(--line-soft); }
.qd-close:hover { color: var(--ink); background: #e9eaee; }
.qd-product { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--line-soft); }
.qd-product img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; }
.qd-product strong { display: block; font-size: 13.5px; color: var(--ink); }
.qd-product small { font-size: 12px; color: var(--muted); }
.qd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qd-grid .field-wide { grid-column: 1 / -1; }
.qd-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.qd-foot .btn { flex: 1 1 180px; min-height: 48px; }
.btn-wa { --btn-bg: #25d366; color: #fff; }
.btn-wa:hover { --btn-bg: #1eb257; }

@media (max-width: 1100px) {
    .shop-layout { grid-template-columns: minmax(0, 1fr); }
    .shop-side { display: none; }
}
@media (max-width: 1023px) {
    .product-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 18px; }
    .product-top > .product-gallery, .product-top > .product-info, .product-top > .gallery-extras { grid-column: auto; grid-row: auto; }
    .product-top > .product-gallery { position: static; }
    .product-top > .product-gallery { order: 1; }
    .product-top > .product-info { order: 2; }
    .product-top > .gallery-extras { order: 3; }
    .pi-title { font-size: 22px; }
    .pi-priceline strong { font-size: 27px; }
    .desc-split { grid-template-columns: minmax(0, 1fr); }
    .bulk-band { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .bb-quote { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .bb-quote p { margin-bottom: 0; }
}
@media (max-width: 767px) {
    .bp-row, .design-grid, .spec-columns { grid-template-columns: minmax(0, 1fr); }
        .pi-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .pi-actions .btn { flex: none; width: 100%; }
    .pi-actions .btn-red { grid-column: 1; grid-row: 1; }
    .hc-actions { flex-basis: 100%; }
    .hc-actions .btn { flex: 1; }
    .pi-wish { grid-column: 2; grid-row: 1; }
    .pi-actions .btn-quote { grid-column: 1 / -1; grid-row: 2; }
    .pi-title { font-size: 20px; }
    .buy-panel { padding: 12px; }
    .pd-panel { padding: 18px 16px 22px; }
    .pr-summary .btn { margin-left: 0; width: 100%; }
    .qd-grid { grid-template-columns: minmax(0, 1fr); }
    .page-product main, .page-cart main { padding-bottom: 130px; }
    .bb-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qty-box input { width: 70px; }
}
@media (min-width: 768px) {
    .buy-bar { display: none !important; }
}

/* ==========================================================================
   Product listings (category, search, all products)
   ========================================================================== */
.catalog { padding-bottom: 50px; }
.catalog-head { display: flex; align-items: center; gap: 20px; margin: 4px 0 18px; }
.catalog-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.catalog-head p { margin-top: 6px; max-width: 70ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.catalog-head-img { flex: none; width: 92px; height: 92px; object-fit: contain; margin-left: auto; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }

.subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.subcats a {
    padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
    font-size: 12.5px; font-weight: 500; color: var(--text); transition: border-color .15s, color .15s;
}
.subcats a:hover { border-color: var(--red-200); color: var(--red); }

.catalog-body { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 22px; align-items: start; }

/* Filters */
.catalog-aside { position: sticky; top: 90px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.fl-head { display: none; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fl-head h2 { font-size: 15px; font-weight: 700; color: var(--ink); }
.fl-close { width: 34px; height: 34px; border-radius: 50%; color: var(--muted); background: var(--line-soft); }
.fl-group { padding: 16px; border-bottom: 1px solid var(--line-soft); }
.fl-group h3 { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.fl-cats { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.fl-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px;
    font-size: 13px; color: var(--text); transition: background .15s, color .15s;
}
.fl-cats a:hover { background: var(--line-soft); color: var(--ink); }
.fl-cats a.is-active { background: var(--red-50); color: var(--red); font-weight: 600; }
.fl-cats span { font-size: 11px; color: var(--soft); }
.fl-price { display: flex; align-items: center; gap: 8px; }
.fl-price input {
    width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #e3e3e6; border-radius: 9px;
    font-size: 13px; color: var(--ink); outline: 0;
}
.fl-price input:focus { border-color: var(--red-200); box-shadow: 0 0 0 3px var(--red-50); }
.fl-check { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--text); cursor: pointer; }
.fl-check input { width: 17px; height: 17px; accent-color: var(--red); cursor: pointer; }
.fl-actions { display: grid; gap: 8px; padding: 16px; }
.fl-actions .btn { width: 100%; }
.fl-help { padding: 16px; background: var(--red-50); font-size: 12.5px; color: var(--text); }
.fl-help strong { color: var(--ink); }
.fl-help .btn { margin-top: 10px; }

/* Toolbar + grid */
.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.catalog-count { font-size: 13px; color: var(--muted); }
.catalog-count strong { color: var(--ink); }
.catalog-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--muted); }
.catalog-sort select {
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
    font-size: 13px; color: var(--ink); cursor: pointer;
}
.catalog-sort select:focus { outline: 0; border-color: var(--red-200); box-shadow: 0 0 0 3px var(--red-50); }
.fl-count { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; }
.only-touch { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
}
.filter-chip:hover { background: var(--red); }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-grid .product-card { scroll-snap-align: none; }

.catalog-empty { display: grid; justify-items: center; gap: 10px; padding: 60px 20px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.catalog-empty i { font-size: 34px; color: var(--soft); }
.catalog-empty h2 { font-size: 18px; font-weight: 700; color: var(--ink); }
.catalog-empty p { max-width: 460px; font-size: 13.5px; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

/* A category's "About" text under its products */
.cat-about { margin-top: 28px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cat-about h2 { margin-bottom: 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
.cat-about .prose { max-width: 820px; }
.cat-about .prose ul { display: grid; gap: 6px; margin: 8px 0 10px; }
.cat-about .prose li { position: relative; padding-left: 24px; }
.cat-about .prose li::before { content: "\f00c"; position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: 900 8.5px/1 "Font Awesome 6 Free"; color: #fff; background: var(--c-green); }
.cat-about .prose strong { color: var(--ink); }
@media (max-width: 640px) { .cat-about { padding: 18px 16px; } }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.pg-link {
    display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 11px;
    background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--text);
    transition: border-color .15s, color .15s, background .15s;
}
.pg-link:hover { border-color: var(--red-200); color: var(--red); }
.pg-link.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg-link.is-disabled { color: #cfd0d4; background: var(--line-soft); }
.pg-gap { display: grid; place-items: center; min-width: 24px; height: 40px; color: var(--soft); }

.filters-backdrop { display: none; }

@media (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .catalog-body { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .catalog-body { grid-template-columns: minmax(0, 1fr); }
    .only-touch { display: inline-flex; }
    .fl-head { display: flex; }
    .catalog-aside {
        position: fixed; z-index: 70; inset: 0 auto 0 0; width: min(330px, 86vw); border-radius: 0;
        transform: translateX(-100%); transition: transform .3s var(--ease); overflow-y: auto;
    }
    .filters-open .catalog-aside { transform: none; box-shadow: 0 0 60px rgba(17, 19, 24, .3); }
    .filters-open .filters-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(17, 19, 24, .45); }
    .catalog-head-img { width: 70px; height: 70px; }
}
@media (max-width: 600px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .catalog-head h1 { font-size: 21px; }
    .catalog-sort { margin-left: 0; width: 100%; }
    .catalog-sort select { flex: 1; }
    .catalog-count { order: 3; width: 100%; }
}

/* ==========================================================================
   Cart
   ========================================================================== */
.cart-page { padding-bottom: 50px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.cart-items { display: grid; gap: 12px; }
.cart-line {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto 32px; align-items: center; gap: 14px;
    padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.cl-media { display: grid; place-items: center; width: 76px; height: 76px; padding: 7px; border-radius: var(--radius); background: var(--line-soft); }
.cl-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cl-info h2 { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cl-info h2 a:hover { color: var(--red); }
.cl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.cl-tag { color: var(--c-purple); }
.cl-choices { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cl-choices li { padding: 3px 9px; border-radius: 999px; background: var(--line-soft); font-size: 11px; color: var(--text); }
.cl-choices li span { color: var(--soft); }
.cl-unit { margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cl-unit small { font-weight: 400; color: var(--muted); }
.cl-note { margin-top: 3px; font-size: 11.5px; color: var(--soft); }
.cl-qty { display: grid; justify-items: center; gap: 6px; }
.cl-qty .qty-box { border-radius: 10px; }
.cl-qty .qty-box button { width: 34px; height: 40px; }
.cl-qty .qty-box input { width: 52px; height: 40px; font-size: 14px; }
.cl-update { font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: underline; }
.cl-update:hover { color: var(--red); }
.js .cl-update { display: none; }
.cl-total { text-align: right; min-width: 92px; }
.cl-total strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.cl-total small { display: block; margin-top: 2px; font-size: 11px; color: var(--c-green); }
.cl-remove button {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    color: var(--soft); background: var(--line-soft); transition: color .15s, background .15s;
}
.cl-remove button:hover { color: var(--red); background: var(--red-50); }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.cart-actions form { display: inline-flex; }

.cart-summary { position: sticky; top: 90px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cart-summary h2 { font-size: 16px; font-weight: 700; color: var(--ink); }
.cs-rows { display: grid; gap: 10px; margin: 16px 0; font-size: 13.5px; }
.cs-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-rows dt { color: var(--muted); }
.cs-rows dd { font-weight: 600; color: var(--ink); }
.cs-rows .is-save dd { color: var(--c-green); }
.muted-text { font-weight: 400 !important; color: var(--soft) !important; font-size: 12.5px; }
.cs-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
.cs-total strong { font-size: 24px; font-weight: 800; color: var(--ink); }
.cart-summary .btn { margin-bottom: 10px; }
.btn-block { width: 100%; }
.cs-trust { display: grid; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.cs-trust li { display: flex; align-items: center; gap: 9px; }
.cs-trust i { color: var(--c-green); }

.cart-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cart-empty > i { font-size: 36px; color: var(--soft); }
.cart-empty h2 { font-size: 19px; font-weight: 700; color: var(--ink); }
.cart-empty p { max-width: 440px; font-size: 13.5px; color: var(--muted); }

@media (max-width: 960px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr); }
    .cart-summary { position: static; }
}
@media (max-width: 680px) {
    .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "media info remove" "qty qty total"; row-gap: 10px; column-gap: 10px; }
    .cl-media { grid-area: media; width: 64px; height: 64px; }
    .cl-qty .qty-box button { width: 34px; }
    .cl-qty .qty-box input { width: 46px; }
    .cl-info { grid-area: info; }
    .cl-qty { grid-area: qty; justify-items: start; }
    .cl-total { grid-area: total; }
    .cl-remove { grid-area: remove; }
}

/* Checkout bar that stays in reach on phones */
.cart-bar { position: fixed; }
.cart-bar .btn { flex: 1; }
@media (min-width: 768px) { .cart-bar { display: none !important; } }

/* ==========================================================================
   Checkout, order confirmation, tracking
   ========================================================================== */
.checkout, .order-page { padding-top: 10px; padding-bottom: 50px; }

.steps { display: flex; justify-content: center; gap: 8px; margin: 4px 0 20px; font-size: 12.5px; font-weight: 600; color: var(--soft); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--line); }
.steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line-soft); color: var(--muted); font-size: 11px; }
.steps .is-done { color: var(--c-green); }
.steps .is-done span { background: var(--c-green); color: #fff; }
.steps .is-done + li::before, .steps .is-current::before { background: var(--c-green); }
.steps .is-current { color: var(--ink); }
.steps .is-current:not(.is-done) span { background: var(--red); color: #fff; box-shadow: 0 0 0 4px var(--red-50); }

.checkout-grid, .order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.co-main, .order-main { display: grid; gap: 14px; }
.co-card { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.co-card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.co-card h2 > i { color: var(--red); }
.co-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; }
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.co-grid .field-wide { grid-column: 1 / -1; }
.co-card .field input, .co-card .field select, .co-card .field textarea { padding: 10px 13px; font-size: 14px; }
.co-card .field textarea { min-height: 84px; }
.field.has-error input, .field.has-error select { border-color: #fca5a5; background: #fffafa; }
.field-error { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; color: #b91c1c; }
.input-prefix { display: flex; }
.input-prefix span { display: grid; place-items: center; padding: 0 12px; border: 1px solid #e3e3e6; border-right: 0; border-radius: 10px 0 0 10px; background: var(--line-soft); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.input-prefix input { border-radius: 0 10px 10px 0 !important; }

.co-more { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.co-more summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--c-blue); }
.co-more summary::-webkit-details-marker { display: none; }
.co-more summary span { font-weight: 400; color: var(--muted); }
.co-more[open] summary { margin-bottom: 12px; }

.pay-options { display: grid; gap: 10px; }
.pay-option {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
    border: 1.5px solid var(--line); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;
}
.pay-option:hover { border-color: var(--red-200); }
.pay-option input { position: absolute; opacity: 0; }
.pay-option:has(input:checked) { border-color: var(--red); background: var(--red-50); box-shadow: 0 0 0 3px var(--red-50); }
.pay-option:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.po-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.pay-razorpay .po-icon { background: #e8f0fe; color: var(--c-blue); }
.pay-upi .po-icon { background: #e9f9ef; color: var(--c-green); }
.pay-cod .po-icon { background: #fff7e0; color: var(--c-amber); }
.po-text { flex: 1; min-width: 0; }
.po-text strong { display: block; font-size: 14px; color: var(--ink); }
.po-text small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.po-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); color: transparent; font-size: 10px; }
.pay-option:has(input:checked) .po-check { border-color: var(--red); background: var(--red); color: #fff; }
.pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.pay-logos img { height: 22px; width: auto; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.pay-none { display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: #fff7e0; border: 1px solid #fde7a8; }
.pay-none > i { font-size: 22px; color: var(--c-amber); margin-top: 2px; }
.pay-none strong { color: var(--ink); }
.pay-none p { margin: 4px 0 10px; font-size: 13px; color: var(--text); }

.co-summary { position: sticky; top: 90px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.co-summary h2 { display: flex; align-items: baseline; justify-content: space-between; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.co-summary h2 a { font-size: 12px; font-weight: 600; color: var(--red); }
.co-items { display: grid; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.co-items li { display: flex; align-items: center; gap: 11px; }
.co-thumb { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 4px; border-radius: 10px; background: var(--line-soft); }
.co-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.co-thumb b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; }
.co-item-text { flex: 1; min-width: 0; }
.co-item-text strong { display: block; font-size: 13px; line-height: 1.3; color: var(--ink); }
.co-item-text small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.co-item-price { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.co-summary .cs-rows { margin: 12px 0; }
.free { color: var(--c-green); font-weight: 700; }
.free-nudge { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px; background: #ecfdf3; font-size: 12px; color: #0f5132; }
.co-agree { display: flex; gap: 9px; margin: 4px 0 12px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.co-agree input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--red); }
.co-agree a { color: var(--red); text-decoration: underline; }
.co-agree.has-error { color: #b91c1c; }
.co-place { min-height: 50px; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.co-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.co-trust li { display: flex; align-items: center; gap: 6px; }
.co-trust li:nth-child(1) i { color: var(--c-blue); }
.co-trust li:nth-child(2) i { color: var(--c-amber); }
.co-trust li:nth-child(3) i { color: var(--c-green); }

/* Payment progress on the order page: paid so far, the advance mark, what is still to pay */
.ordpay { margin-top: 4px; padding: 12px; border-radius: 12px; background: #f5f3ff; }
.ordpay-bar { position: relative; height: 8px; border-radius: 999px; background: #e9e5fb; overflow: visible; }
.ordpay-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #16a34a); }
.ordpay-bar i { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 2px; background: #5b21b6; }
.ordpay dl { display: grid; gap: 6px; margin-top: 10px; font-size: 12.5px; }
.ordpay dl > div { display: flex; justify-content: space-between; gap: 10px; }
.ordpay dt { color: var(--muted); }
.ordpay dd { font-weight: 700; color: var(--ink); }
.ordpay .is-due dt, .ordpay .is-due dd { color: #6d28d9; }
.ordpay-done { display: flex; align-items: center; gap: 7px; margin-top: 4px; padding: 9px 12px; border-radius: 10px; background: #ecfdf3; font-size: 12.5px; font-weight: 600; color: #15803d; }
.ordpay-switch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.ordpay-switch a { font-weight: 700; color: var(--c-purple); text-decoration: underline; text-underline-offset: 2px; }
.pay-plan-note { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: #f5f3ff; font-size: 13px; color: #5b21b6; }

/* Offer code box (checkout summary) */
.ocode { margin: 14px 0 4px; padding: 12px; border-radius: 14px; border: 1.5px dashed #f5b8bb; background: linear-gradient(135deg, #fff7ed 0%, #fdf2f8 100%); }
.ocode.is-applied { border-style: solid; border-color: #86efac; background: linear-gradient(135deg, #ecfdf3 0%, #f0fdfa 100%); }
.ocode.has-error { border-color: #fca5a5; }
.ocode-box summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: #be185d; }
.ocode-box summary::-webkit-details-marker { display: none; }
.ocode-box summary::after { content: '\f078'; font: var(--fa-font-solid); font-size: 10px; margin-left: auto; color: #db2777; transition: transform .2s; }
.ocode-box[open] summary::after { transform: rotate(180deg); }
.ocode-box[open] summary { margin-bottom: 10px; }
.ocode-row { display: flex; gap: 6px; }
.ocode-row input {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #f3c4d6; background: #fff;
    font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.ocode-row input::placeholder { font-weight: 500; letter-spacing: 0; text-transform: none; color: #b8a3ad; }
.ocode-row input:focus { outline: none; border-color: #db2777; box-shadow: 0 0 0 3px #fce7f3; }
.ocode-apply { flex: none; height: 38px; padding: 0 16px; border-radius: 10px; background: linear-gradient(135deg, #db2777, #ea580c); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.ocode-apply:hover { filter: brightness(.94); }
.ocode-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ocode-chips small { width: 100%; font-size: 11px; color: var(--muted); }
.ocode-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px 4px 4px; border-radius: 999px; cursor: pointer;
    background: #fff; border: 1px solid #f3c4d6; font-size: 11.5px; color: var(--text); text-align: left;
}
.ocode-chip:hover { border-color: #db2777; }
.ocode-chip b { flex: none; padding: 3px 8px; border-radius: 999px; background: #fce7f3; color: #be185d; font-size: 11px; letter-spacing: .05em; }
.ocode-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocode-applied { display: flex; align-items: center; gap: 10px; }
.ocode-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--c-green); color: #fff; font-size: 15px; }
.ocode-text { flex: 1; min-width: 0; }
.ocode-text strong { display: block; font-size: 14px; letter-spacing: .06em; color: #14532d; }
.ocode-text small { display: block; font-size: 11.5px; line-height: 1.35; color: #166534; }
.ocode-remove { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #bbf7d0; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ocode-remove:hover { color: #b91c1c; border-color: #fecaca; }
.ocode-msg { display: flex; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 1.4; }
.ocode-msg i { margin-top: 2px; }
.ocode-msg.is-error { color: #b91c1c; }
.ocode-msg.is-ok { color: #15803d; }
.cs-rows .is-offer dt { color: #15803d; font-weight: 600; }
.cs-rows .is-offer dt i { font-size: 11px; }

/* Advance or everything now (checkout) */
.payplan { margin-top: 14px; padding: 12px; border-radius: 14px; background: #f5f3ff; border: 1px solid #ddd6fe; }
.payplan[hidden] { display: none; }
.payplan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: #5b21b6; }
.payplan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.payplan-option { position: relative; display: block; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #ddd6fe; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.payplan-option input { position: absolute; opacity: 0; }
.payplan-option:has(input:checked) { border-color: var(--c-purple); box-shadow: 0 0 0 3px #ede9fe; }
.payplan-option:has(input:focus-visible) { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.payplan-text strong { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.payplan-text small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
@media (max-width: 480px) { .payplan-options { grid-template-columns: 1fr; } }

.adv-split { display: grid; gap: 6px; margin: -4px 0 14px; padding: 12px; border-radius: 12px; background: #f5f3ff; font-size: 13px; }
.adv-split > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.adv-now { color: #5b21b6; font-weight: 700; }
.adv-now strong { font-size: 18px; font-weight: 800; }
.adv-later { color: var(--muted); }
.adv-later strong { font-weight: 700; color: var(--ink); }
.adv-split small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.adv-split p { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; color: #6d28d9; }
.adv-split.is-full .adv-later, .adv-split.is-full p { display: none; }

/* Confirmation */
.order-hero {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 20px; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, #ecfdf3, #fff 70%); border: 1px solid #bbf7d0;
}
.order-hero.is-waiting { background: linear-gradient(120deg, #fff7e0, #fff 70%); border-color: #fde7a8; }
.oh-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-green); color: #fff; font-size: 22px; box-shadow: 0 8px 20px -6px rgba(22, 163, 74, .6); }
.order-hero.is-waiting .oh-icon { background: var(--c-amber); box-shadow: 0 8px 20px -6px rgba(217, 119, 6, .6); }
.order-hero h1 { font-size: 21px; font-weight: 700; color: var(--ink); }
.order-hero p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.order-no { color: var(--ink); letter-spacing: .02em; }
.pay-now { border-color: #fde7a8; background: linear-gradient(180deg, #fffbeb, #fff 60%); }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pay-box { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.pay-box small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.pay-box strong { font-size: 16px; color: var(--ink); word-break: break-all; }
.pay-box p { font-size: 13px; line-height: 1.6; }
.pay-box .btn { justify-self: start; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.upi-app-btn { display: none !important; }
.artwork-card { border-color: #c7d2fe; background: linear-gradient(180deg, #eef2ff, #fff 60%); }
.artwork-card h2 > i { color: var(--c-indigo); }
.artwork-card p { margin-bottom: 12px; font-size: 13px; color: var(--text); }
.artwork-card.is-locked { border-color: #ddd6fe; background: linear-gradient(180deg, #f5f3ff, #fff 60%); }
.artwork-card.is-locked h2 > i { color: #7c3aed; }
.artwork-card.is-locked p { margin-bottom: 0; }
.artwork-card.is-review { border-color: #fde68a; background: linear-gradient(180deg, #fff7ed, #fdf2f8 70%, #fff); }
.artwork-card.is-review h2 > i { color: #f59e0b; }
.artwork-card.is-received { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, #fff 60%); }
.artwork-card.is-received h2 > i { color: #16a34a; }
.order-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.order-facts h3 { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.order-facts p { font-size: 13px; line-height: 1.6; color: var(--text); }
.pill-paid, .pill-unpaid { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pill-paid { background: #e9f9ef; color: #0e7a1f; }
.pill-unpaid { background: #fff7e0; color: #92400e; }

/* Timeline */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.timeline li { position: relative; display: grid; justify-items: center; gap: 7px; text-align: center; }
.timeline li::before { content: ""; position: absolute; top: 18px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 3px; border-radius: 3px; background: var(--line); }
.timeline li:first-child::before { display: none; }
.timeline li.is-done::before { background: var(--c-green); }
.tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--line-soft); color: var(--soft); font-size: 14px; }
.timeline .is-done .tl-dot { background: var(--c-green); color: #fff; }
.timeline .is-current .tl-dot { box-shadow: 0 0 0 5px #dcfce7; }
.tl-text strong { display: block; font-size: 12px; color: var(--ink); }
.timeline li:not(.is-done) .tl-text strong { color: var(--soft); font-weight: 500; }
.tl-text small { display: block; font-size: 10.5px; color: var(--muted); }
.tl-note { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--text); }
.tracking-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--line-soft); font-size: 13px; }
.order-cancelled { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #fdecec; color: #991b1b; font-size: 13px; }

/* Tracking page */
.track-wrap { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.track-form { display: grid; gap: 12px; }
.track-form h1 { font-size: 21px; font-weight: 700; color: var(--ink); }
.track-form .oh-icon { background: var(--red); box-shadow: var(--shadow-red); }
.track-form form { display: grid; gap: 12px; }
.track-result { display: grid; gap: 18px; }
.tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* Track your order: what is in it (no prices), and where the rest is */
.trk-items { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.trk-items li { padding: 10px 12px; border-radius: 10px; background: var(--line-soft); font-size: 13.5px; }
.trk-items strong { color: var(--ink); }
.trk-items span { color: var(--muted); }
.trk-items small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.trk-more { display: flex; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.trk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.trk-facts > div { padding: 12px 14px; border-radius: 10px; background: var(--line-soft); font-size: 13.5px; line-height: 1.6; }
.trk-facts h3 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.trk-more i { margin-top: 3px; }
.trk-more a { font-weight: 600; color: var(--red); }
.tr-head h2 { margin: 0; font-size: 17px; }
.status-pill { padding: 5px 12px; border-radius: 999px; background: #e9f9ef; color: #0e7a1f; font-size: 12px; font-weight: 700; }
.status-awaiting_payment { background: #fff7e0; color: #92400e; }
.status-cancelled { background: #fdecec; color: #991b1b; }
.pay-card { display: grid; gap: 12px; justify-items: start; }
.pay-card h1 { font-size: 24px; font-weight: 800; color: var(--ink); }
.pay-card .oh-icon { background: var(--c-blue); box-shadow: none; }

@media (max-width: 1000px) {
    .checkout-grid, .order-grid, .track-wrap { grid-template-columns: minmax(0, 1fr); }
    .co-summary { position: static; }
}
@media (max-width: 767px) {
    .co-grid, .order-facts { grid-template-columns: minmax(0, 1fr); }
    .co-card { padding: 16px 14px; }
    .steps { gap: 4px; font-size: 11.5px; }
    .steps li + li::before { width: 14px; }
    .order-hero { align-items: flex-start; padding: 16px; }
    .order-hero h1 { font-size: 18px; }
    .oh-icon { width: 44px; height: 44px; font-size: 18px; }
    .timeline { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 0; }
    .timeline li { grid-template-columns: 38px minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding-bottom: 14px; text-align: left; }
    .timeline li::before { top: auto; bottom: calc(100% - 4px); left: 17px; right: auto; width: 3px; height: 18px; }
    .upi-app-btn { display: inline-flex !important; }
    .page-checkout main, .page-order main { padding-bottom: 130px; }
}
@media (min-width: 768px) {
    .page-checkout .cart-bar { display: none !important; }
}

/* ==========================================================================
   Graphics: page banners, free-delivery meter, empty states, checkout art
   ========================================================================== */

/* ---- Page banner ---- */
.ph-red    { --ph-a: #d10a12; --ph-b: #f97316; --ph-soft: #fdecee; --ph-soft2: #fff4e8; }
.ph-orange { --ph-a: #ea580c; --ph-b: #f59e0b; --ph-soft: #ffeede; --ph-soft2: #fffbeb; }
.ph-pink   { --ph-a: #db2777; --ph-b: #f43f5e; --ph-soft: #fde6f1; --ph-soft2: #fff1f2; }
.ph-purple { --ph-a: #7c3aed; --ph-b: #db2777; --ph-soft: #efe7ff; --ph-soft2: #fdf2f8; }
.ph-blue   { --ph-a: #2563eb; --ph-b: #06b6d4; --ph-soft: #e3edff; --ph-soft2: #ecfeff; }
.ph-teal   { --ph-a: #0d9488; --ph-b: #22c55e; --ph-soft: #dff6f3; --ph-soft2: #f0fdf4; }
.ph-green  { --ph-a: #16a34a; --ph-b: #0d9488; --ph-soft: #e3f8ea; --ph-soft2: #ecfeff; }

.page-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 22px; min-height: 148px;
    margin: 2px 0 18px; padding: 22px 26px; border-radius: 22px;
    background: radial-gradient(130% 150% at 0% 0%, var(--ph-soft) 0%, var(--ph-soft2) 55%, #fff 100%);
    border: 1px solid color-mix(in srgb, var(--ph-a) 14%, #fff);
}
.ph-dots {
    position: absolute; z-index: -1; top: 16px; right: 32%; width: 130px; height: 78px; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--ph-a, #d10a12) 45%, transparent) 1.7px, transparent 2px);
    background-size: 13px 13px; opacity: .55;
}
.ph-ring {
    position: absolute; z-index: -1; left: -46px; bottom: -84px; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
    border: 28px solid color-mix(in srgb, var(--ph-b) 13%, transparent);
}
.page-hero::after {
    content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--ph-b) 22%, transparent), transparent 68%);
}
.ph-main { flex: 1; min-width: 0; }
.ph-row { display: flex; align-items: center; gap: 16px; }
.ph-icon {
    flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
    color: #fff; font-size: 23px; transform: rotate(-6deg);
    background: linear-gradient(135deg, var(--ph-a), var(--ph-b));
    box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--ph-a) 85%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.ph-text h1 { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ph-text p { margin-top: 5px; max-width: 64ch; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ph-chips li {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(17, 19, 24, .06); font-size: 12px; font-weight: 600; color: var(--ink);
}
.ph-chips i { color: var(--ph-a); }
.ph-art { position: relative; flex: none; display: grid; place-items: center; width: 170px; height: 132px; }
.ph-art-bg {
    position: absolute; inset: 4px 18px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0 40%, color-mix(in srgb, var(--ph-a) 14%, #fff) 100%);
    box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--ph-a) 70%, transparent), inset 0 0 0 8px rgba(255, 255, 255, .7);
}
.ph-art::before, .ph-art::after { content: ""; position: absolute; border-radius: 50%; }
.ph-art::before { top: 8px; left: 12px; width: 12px; height: 12px; background: var(--ph-b); opacity: .8; }
.ph-art::after { bottom: 14px; right: 10px; width: 18px; height: 18px; border: 4px solid var(--ph-a); opacity: .45; }
.ph-art img {
    position: relative; max-width: 118px; max-height: 104px; width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(17, 19, 24, .16)); animation: ph-float 4s ease-in-out infinite alternate;
}
.ph-art-icon i {
    position: relative; font-size: 56px; color: var(--ph-a);
    background: linear-gradient(135deg, var(--ph-a), var(--ph-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--ph-a) 35%, transparent)); animation: ph-float 4s ease-in-out infinite alternate;
}
@keyframes ph-float { to { transform: translate3d(0, -8px, 0) rotate(-3deg); } }

/* Sub-category chips */
.subcats a { display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); }
.subcats a i { color: var(--red); }

/* Filters */
.fl-group h3 { display: flex; align-items: center; gap: 7px; }
.fl-group h3 i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--red-50); color: var(--red); font-size: 10.5px; }
.fl-help { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--red), #f97316); color: rgba(255, 255, 255, .9); }
.fl-help strong { color: #fff; font-size: 14px; }
.fl-help-art { position: absolute; z-index: -1; right: -8px; bottom: -12px; font-size: 76px; color: rgba(255, 255, 255, .16); transform: rotate(-12deg); }

/* ---- Empty states ---- */
.empty-art {
    --e1: #d10a12; --e2: #f97316;
    position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 6px 0 12px; border-radius: 50%;
    color: #fff; font-size: 34px; background: linear-gradient(135deg, var(--e1), var(--e2));
    box-shadow: 0 18px 32px -14px var(--e1);
}
.empty-art::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--e1) 35%, transparent); animation: spin-slow 20s linear infinite; }
.empty-art::after { content: ""; position: absolute; top: -18px; right: -10px; width: 14px; height: 14px; border-radius: 50%; background: var(--e2); opacity: .7; }
.empty-art.tone-blue { --e1: #2563eb; --e2: #06b6d4; }
.empty-art.tone-pink { --e1: #db2777; --e2: #f43f5e; }
.cart-empty > i, .catalog-empty > i { display: none; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---- Free delivery meter ---- */
.ship-meter { margin: 12px 0; padding: 11px 12px; border-radius: 12px; background: linear-gradient(120deg, #fff7e0, #fff 80%); border: 1px solid #fde7a8; }
.ship-meter p { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.ship-meter p i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--c-amber); box-shadow: var(--shadow-sm); }
.ship-meter strong { color: var(--ink); }
.sm-track { height: 8px; margin-top: 9px; border-radius: 999px; background: #fdecc8; overflow: hidden; }
.sm-fill {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #f97316, var(--red), #f97316, #f59e0b); background-size: 200% 100%;
    animation: sm-flow 2.6s linear infinite; transition: width .6s var(--ease-out);
}
.ship-meter.is-done { background: linear-gradient(120deg, #e9f9ef, #fff 80%); border-color: #bbf7d0; }
.ship-meter.is-done p i { color: var(--c-green); }
.ship-meter.is-done .sm-track { background: #dcfce7; }
.ship-meter.is-done .sm-fill { background: linear-gradient(90deg, #22c55e, #16a34a, #22c55e); background-size: 200% 100%; }
@keyframes sm-flow { to { background-position: -200% 0; } }
.free-nudge { display: none; }

/* ---- Summary cards get a colourful header ---- */
.cart-summary, .co-summary { overflow: hidden; }
.cart-summary > h2, .co-summary > h2 {
    position: relative; overflow: hidden; isolation: isolate;
    margin: -20px -20px 14px; padding: 15px 20px; color: #fff;
    background: linear-gradient(120deg, var(--red), #f97316);
}
.co-summary > h2 { margin: -18px -18px 14px; padding: 15px 18px; }
.cart-summary > h2::after, .co-summary > h2::after {
    content: ""; position: absolute; z-index: -1; right: 10px; top: 6px; width: 90px; height: 40px;
    background-image: radial-gradient(rgba(255, 255, 255, .35) 1.5px, transparent 1.8px); background-size: 11px 11px;
}
.co-summary > h2 a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cs-total strong { color: var(--red); }

/* Cart line pictures sit on a warm tint */
.cl-media { background: linear-gradient(135deg, #fdf3f4, #fff7ed); }

/* ---- Checkout ---- */
.secure-banner {
    --ph-a: #fff;
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    margin-bottom: 18px; padding: 18px 22px; border-radius: 20px; color: #fff;
    background: radial-gradient(120% 180% at 100% 0%, #7f1d1d 0%, transparent 55%), linear-gradient(120deg, #111827, #1c2231 60%, #2a0f12);
}
.secure-banner .ph-dots { right: 42%; opacity: .25; }
.secure-banner::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(249, 115, 22, .14); }
.sb-title { display: flex; align-items: center; gap: 14px; }
.sb-title .ph-icon { --ph-a: #22c55e; --ph-b: #0d9488; width: 50px; height: 50px; font-size: 20px; border-radius: 15px; }
.sb-title h1 { font-size: 21px; font-weight: 800; color: #fff; }
.sb-title p { margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.secure-banner .steps { margin: 0; color: rgba(255, 255, 255, .55); }
.secure-banner .steps li + li::before { background: rgba(255, 255, 255, .18); }
.secure-banner .steps .is-done + li::before, .secure-banner .steps .is-current::before { background: #22c55e; }
.secure-banner .steps .is-current { color: #fff; }
.secure-banner .steps span { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }

.steps span { width: 30px; height: 30px; font-size: 11.5px; }
.steps .is-done span { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 6px 12px -6px #16a34a; }
.steps .is-current:not(.is-done) span { background: linear-gradient(135deg, var(--red), #f97316); color: #fff; box-shadow: 0 0 0 4px rgba(209, 10, 18, .22); }

.co-step-1 { --s1: #d10a12; --s2: #f97316; }
.co-step-2 { --s1: #2563eb; --s2: #06b6d4; }
.co-step-3 { --s1: #16a34a; --s2: #0d9488; }
.co-step-1, .co-step-2, .co-step-3 { position: relative; overflow: hidden; }
.co-step-1::before, .co-step-2::before, .co-step-3::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--s1), var(--s2)); }
.co-step-1 .co-num, .co-step-2 .co-num, .co-step-3 .co-num {
    width: 36px; height: 36px; border-radius: 12px; font-size: 14px;
    background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: 0 8px 16px -8px var(--s1);
}
.co-card h2 small { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--line-soft); font-size: 11px; font-weight: 600; color: var(--muted); }
.pay-option:has(input:checked) { background: linear-gradient(120deg, var(--red-50), #fff 80%); }

/* ---- Order confirmation ---- */
.order-hero { position: relative; overflow: hidden; isolation: isolate; }
.order-hero .ph-dots { --ph-a: #16a34a; right: 5%; top: 12px; }
.order-hero.is-waiting .ph-dots { --ph-a: #d97706; }
.order-hero::after { content: ""; position: absolute; z-index: -1; right: -50px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; border: 30px solid rgba(34, 197, 94, .1); }
.order-hero.is-waiting::after { border-color: rgba(245, 158, 11, .12); }
.order-hero .oh-icon { animation: pop-in .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -14px; height: 12px; border-radius: 2px; opacity: 0; animation: confetti-fall 2.8s ease-out forwards; }
.confetti i:nth-child(1) { left: 4%; background: #d10a12; animation-delay: 0.00s; width: 9px; }
.confetti i:nth-child(2) { left: 11%; background: #f97316; animation-delay: 0.12s; width: 7px; }
.confetti i:nth-child(3) { left: 18%; background: #facc15; animation-delay: 0.24s; width: 7px; }
.confetti i:nth-child(4) { left: 25%; background: #16a34a; animation-delay: 0.36s; width: 9px; }
.confetti i:nth-child(5) { left: 32%; background: #2563eb; animation-delay: 0.48s; width: 7px; }
.confetti i:nth-child(6) { left: 39%; background: #7c3aed; animation-delay: 0.20s; width: 7px; }
.confetti i:nth-child(7) { left: 46%; background: #db2777; animation-delay: 0.32s; width: 9px; }
.confetti i:nth-child(8) { left: 53%; background: #d10a12; animation-delay: 0.44s; width: 7px; }
.confetti i:nth-child(9) { left: 60%; background: #f97316; animation-delay: 0.56s; width: 7px; }
.confetti i:nth-child(10) { left: 67%; background: #facc15; animation-delay: 0.68s; width: 9px; }
.confetti i:nth-child(11) { left: 74%; background: #16a34a; animation-delay: 0.40s; width: 7px; }
.confetti i:nth-child(12) { left: 81%; background: #2563eb; animation-delay: 0.52s; width: 7px; }
.confetti i:nth-child(13) { left: 88%; background: #7c3aed; animation-delay: 0.64s; width: 9px; }
.confetti i:nth-child(14) { left: 95%; background: #db2777; animation-delay: 0.76s; width: 7px; }
@keyframes confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px) rotate(560deg); } }
@keyframes pop-in { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.timeline .is-done .tl-dot { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 8px 16px -8px #16a34a; }
.timeline li.is-done::before { background: linear-gradient(90deg, #22c55e, #16a34a); }

/* ---- Tracking ---- */
.track-art {
    --ph-a: #2563eb;
    position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; height: 124px; border-radius: 16px;
    background: radial-gradient(120% 140% at 0% 0%, #dbeafe, #ecfeff 60%, #fff);
}
.track-art .ph-dots { top: 12px; right: 12px; left: auto; width: 90px; height: 50px; }
.track-art > i {
    font-size: 54px; margin-bottom: 14px;
    background: linear-gradient(135deg, #2563eb, #06b6d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: truck-drive 2.6s ease-in-out infinite;
}
.ta-road {
    position: absolute; left: 0; right: 0; bottom: 22px; height: 4px; border-radius: 4px;
    background: repeating-linear-gradient(90deg, #93c5fd 0 18px, transparent 18px 30px); animation: road-move .8s linear infinite;
}
@keyframes truck-drive { 0%, 100% { transform: translateX(-12px); } 50% { transform: translateX(12px) translateY(-2px); } }
@keyframes road-move { to { background-position: -30px 0; } }

@media (max-width: 767px) {
    .page-hero { gap: 12px; min-height: 0; padding: 16px; border-radius: 18px; }
    .ph-icon { width: 46px; height: 46px; font-size: 18px; border-radius: 14px; }
    .ph-text h1 { font-size: 20px; }
    .ph-text p { font-size: 12.5px; }
    .ph-art { position: absolute; right: -14px; top: 4px; width: 110px; height: 90px; opacity: .9; }
    .ph-art img { max-width: 76px; max-height: 70px; }
    .ph-art-icon i { font-size: 40px; }
    .ph-row { padding-right: 70px; }
    .ph-chips { margin-top: 12px; }
    .ph-chips li { padding: 5px 10px; font-size: 11px; }
    .ph-dots { right: 8%; }
    .secure-banner { padding: 16px; }
    .sb-title h1 { font-size: 18px; }
    .co-card h2 small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ph-art img, .ph-art-icon i, .sm-fill, .confetti i, .track-art > i, .ta-road, .empty-art::before, .order-hero .oh-icon { animation: none !important; }
    .confetti { display: none; }
}

/* Tracking: order journey */
.track-steps h2 > i { color: var(--c-blue); }
.journey { display: grid; gap: 4px; margin-bottom: 16px; }
.journey li { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.journey li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -6px; width: 2px; background: repeating-linear-gradient(180deg, var(--line) 0 5px, transparent 5px 9px); }
.j-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; font-size: 16px; background: linear-gradient(135deg, var(--j1), var(--j2)); box-shadow: 0 10px 18px -10px var(--j1); }
.journey strong { display: block; font-size: 14px; color: var(--ink); }
.journey small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.j-red { --j1: #d10a12; --j2: #f97316; }
.j-orange { --j1: #ea580c; --j2: #f59e0b; }
.j-purple { --j1: #7c3aed; --j2: #db2777; }
.j-blue { --j1: #2563eb; --j2: #06b6d4; }
.j-green { --j1: #16a34a; --j2: #0d9488; }
.ph-art img { min-width: 88px; }
@media (max-width: 767px) {
    .page-hero .ph-dots { display: none; }
}

/* ==========================================================================
   Info pages: shared bits
   ========================================================================== */
.btn-glass { --btn-bg: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.btn-glass:hover { --btn-bg: rgba(255, 255, 255, .24); }
.alert-ok { padding: 10px 12px; border-radius: 10px; background: #e9f9ef; color: #0f5132; font-size: 13px; }
.form-success { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.form-success[hidden] { display: none; }
.fs-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #fff; font-size: 28px; background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 16px 30px -14px #16a34a; }
.form-success h3 { font-size: 20px; font-weight: 800; color: var(--ink); }
.form-success p { max-width: 380px; font-size: 13.5px; color: var(--muted); }
.page-upload main, .page-bulk main, .page-contact main, .page-about main, .page-how main, .page-help main, .page-policy main, .page-categories main { padding-bottom: 50px; }

/* Scroll-in animation for sections, and a gentle stagger for the cards inside them */
.js :is(.page-bulk, .page-contact, .page-about, .page-how, .page-help, .page-policy, .page-categories) [data-reveal] {
    opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js :is(.page-bulk, .page-contact, .page-about, .page-how, .page-help, .page-policy, .page-categories) [data-reveal] [style*="--i"] {
    opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), box-shadow .25s, border-color .25s;
    transition-delay: calc(var(--i) * 70ms + 120ms);
}
.js :is(.page-bulk, .page-contact, .page-about, .page-how, .page-help, .page-policy, .page-categories) [data-reveal].is-visible,
.js :is(.page-bulk, .page-contact, .page-about, .page-how, .page-help, .page-policy, .page-categories) [data-reveal].is-visible [style*="--i"] { opacity: 1; transform: none; }

/* Headlines rise in when the page opens */
:is(.studio-hero .sh-copy, .bulk-hero .bh-copy, .contact-hero, .about-hero .ah-copy, .how-hero, .help-hero, .policy-hero .pol-copy) > * { animation: hero-rise .7s var(--ease-out) both; }
:is(.studio-hero .sh-copy, .bulk-hero .bh-copy, .contact-hero, .about-hero .ah-copy, .how-hero, .help-hero, .policy-hero .pol-copy) > :nth-child(2) { animation-delay: .08s; }
:is(.studio-hero .sh-copy, .bulk-hero .bh-copy, .contact-hero, .about-hero .ah-copy, .how-hero, .help-hero, .policy-hero .pol-copy) > :nth-child(3) { animation-delay: .16s; }
:is(.studio-hero .sh-copy, .bulk-hero .bh-copy, .contact-hero, .about-hero .ah-copy, .how-hero, .help-hero, .policy-hero .pol-copy) > :nth-child(4) { animation-delay: .24s; }
:is(.studio-hero .sh-copy, .bulk-hero .bh-copy, .contact-hero, .about-hero .ah-copy, .how-hero, .help-hero, .policy-hero .pol-copy) > :nth-child(n+5) { animation-delay: .32s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ==========================================================================
   Upload Your Design — purple creative studio
   ========================================================================== */
.studio-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px;
    margin-bottom: 20px; padding: 34px 38px; border-radius: 26px; color: #fff;
    background: linear-gradient(125deg, #2e1065 0%, #6d28d9 48%, #c026d3 82%, #db2777 100%);
}
.sh-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(10px); }
.sh-glow-1 { width: 340px; height: 340px; right: -80px; top: -120px; background: radial-gradient(circle, rgba(250, 204, 21, .35), transparent 65%); }
.sh-glow-2 { width: 260px; height: 260px; left: 30%; bottom: -160px; background: radial-gradient(circle, rgba(56, 189, 248, .35), transparent 65%); }
.sh-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 12px; font-weight: 600; }
.studio-hero h1 { margin-top: 14px; font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.studio-hero h1 span { background: linear-gradient(90deg, #fde68a, #fb923c, #f9a8d4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.studio-hero p { margin-top: 12px; max-width: 540px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .85); }
.sh-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sh-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 600; }
.sh-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #6d28d9; font-size: 11.5px; font-weight: 800; }
.sh-art { position: relative; height: 250px; }
.sh-card {
    position: absolute; left: 50%; top: 50%; width: 150px; height: 200px; margin: -100px 0 0 -75px; border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .5); transform: rotate(-8deg); animation: card-float 5s ease-in-out infinite;
    display: grid; justify-items: center; align-content: start; gap: 9px;
}
.sh-card-top { width: 100%; height: 44px; background: linear-gradient(90deg, #7c3aed, #db2777); }
.sh-card-photo { display: grid; place-items: center; width: 62px; height: 62px; margin-top: -28px; border-radius: 50%; background: #ede9fe; border: 4px solid #fff; color: #7c3aed; font-size: 24px; }
.sh-card-line { width: 70%; height: 9px; border-radius: 5px; background: #e9e5f5; }
.sh-card-line.short { width: 46%; }
.sh-card-bar { width: 80%; height: 24px; margin-top: 8px; border-radius: 6px; background: repeating-linear-gradient(90deg, #1f2937 0 2px, transparent 2px 5px); opacity: .7; }
@keyframes card-float { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } }
.sh-file {
    position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px;
    background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .45); animation: bob 4s ease-in-out infinite;
}
.sh-file.f1 { left: 4%; top: 12%; } .sh-file.f1 i { color: #2563eb; }
.sh-file.f2 { right: 2%; top: 6%; animation-delay: -1s; } .sh-file.f2 i { color: #dc2626; }
.sh-file.f3 { left: 0; bottom: 14%; animation-delay: -2s; } .sh-file.f3 i { color: #ea580c; }
.sh-file.f4 { right: 6%; bottom: 8%; animation-delay: -3s; } .sh-file.f4 i { color: #16a34a; }
.sh-cursor { position: absolute; left: 58%; top: 64%; font-size: 26px; color: #fff; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: cursor-move 5s ease-in-out infinite; }
@keyframes cursor-move { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-40px, -50px); } 60% { transform: translate(-40px, -50px) scale(.85); } }

.upload-done {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 20px; padding: 18px 22px; border-radius: 20px;
    background: linear-gradient(120deg, #ecfdf3, #fff 70%); border: 1px solid #bbf7d0; animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ud-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 24px; }
.upload-done > div { flex: 1 1 320px; }
.upload-done h2 { font-size: 18px; font-weight: 800; color: var(--ink); }
.upload-done p { margin-top: 3px; font-size: 13.5px; color: var(--text); }

.upload-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.upload-form { display: grid; gap: 16px; }
.up-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.up-card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.up-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 800; background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 8px 14px -8px #7c3aed; }
.drop-zone {
    position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 20px; border-radius: 18px; cursor: pointer; text-align: center;
    border: 2.5px dashed #c4b5fd; background: radial-gradient(120% 120% at 50% 0%, #f5f3ff, #fff 70%);
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.drop-zone:hover { border-color: #8b5cf6; }
.drop-zone.is-over { border-style: solid; border-color: #7c3aed; transform: scale(1.01); box-shadow: 0 0 0 6px rgba(124, 58, 237, .12); background: #f5f3ff; }
.drop-zone.has-files { padding: 20px; }
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-orbit {
    position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 6px; border-radius: 50%;
    color: #fff; font-size: 26px; background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 16px 28px -14px #7c3aed;
}
.dz-orbit::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(124, 58, 237, .45); animation: spin-slow 12s linear infinite; }
.dz-orbit::after { content: ""; position: absolute; top: -12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #f59e0b; transform-origin: 5px 46px; animation: spin-slow 4s linear infinite; }
.drop-zone.has-files .dz-orbit { width: 48px; height: 48px; font-size: 18px; }
.drop-zone strong { font-size: 15.5px; color: var(--ink); }
.dz-or { font-size: 13px; color: var(--muted); }
.dz-or u { color: #7c3aed; font-weight: 600; text-decoration: none; }
.dz-limits { margin-top: 4px; font-size: 11.5px; color: var(--soft); }
.file-list { display: grid; gap: 8px; margin-top: 12px; }
.file-list:empty { display: none; }
.file-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; background: var(--line-soft);
    animation: hero-rise .35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms);
}
.fr-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; font-size: 15px; }
.k-pdf .fr-icon { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.k-img .fr-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.k-ai .fr-icon { background: linear-gradient(135deg, #f97316, #c2410c); }
.k-psd .fr-icon { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.k-xls .fr-icon { background: linear-gradient(135deg, #22c55e, #15803d); }
.k-doc .fr-icon { background: linear-gradient(135deg, #6366f1, #4338ca); }
.k-zip .fr-icon { background: linear-gradient(135deg, #64748b, #334155); }
.fr-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-size { font-size: 11.5px; color: var(--muted); }
.fr-remove { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--soft); background: #fff; }
.fr-remove:hover { color: var(--red); }
.help-toggle { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer; border: 1.5px solid var(--line); transition: border-color .15s, background .15s; }
.help-toggle input { position: absolute; opacity: 0; }
.help-toggle:has(input:checked) { border-color: #c4b5fd; background: #f5f3ff; }
.help-toggle:has(input:focus-visible) { outline: 2px solid #7c3aed; outline-offset: 2px; }
.ht-switch { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: #e2e5ec; transition: background .2s; }
.ht-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.help-toggle input:checked + .ht-switch { background: linear-gradient(90deg, #7c3aed, #db2777); }
.help-toggle input:checked + .ht-switch::after { transform: translateX(18px); }
.help-toggle strong { display: block; font-size: 13.5px; color: var(--ink); }
.help-toggle small { display: block; font-size: 12px; color: var(--muted); }
.up-progress { margin-top: 14px; }
.upb-track { height: 10px; border-radius: 999px; background: #ede9fe; overflow: hidden; }
.upb-track span {
    display: block; width: 0; height: 100%; border-radius: inherit; transition: width .2s linear;
    background: linear-gradient(90deg, #7c3aed, #db2777) , repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px);
    background-blend-mode: overlay;
}
.up-progress small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #6d28d9; }
.btn-studio { --btn-bg: #7c3aed; margin-top: 14px; width: 100%; min-height: 50px; color: #fff; background: linear-gradient(120deg, #7c3aed, #c026d3, #db2777); box-shadow: 0 14px 26px -14px #7c3aed; }
.btn-studio:hover { filter: brightness(1.06); }
.upload-form .form-note { margin-top: 10px; }
.upload-side { display: grid; gap: 14px; position: sticky; top: 90px; }
.tips-card, .types-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tips-card h2, .types-card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.tips-card h2 i { color: #7c3aed; }
.tips-card ul { display: grid; gap: 12px; }
.tips-card li { display: flex; gap: 12px; }
.tips-card li > i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; }
.tips-card .t1 > i { background: #e8f0fe; color: #2563eb; }
.tips-card .t2 > i { background: #fff1e6; color: #ea580c; }
.tips-card .t3 > i { background: #fde6f1; color: #db2777; }
.tips-card .t4 > i { background: #e9f9ef; color: #16a34a; }
.tips-card strong { display: block; font-size: 13px; color: var(--ink); }
.tips-card small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tc { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--line-soft); color: var(--text); }
.tc-jpg, .tc-png { background: #e8f0fe; color: #1d4ed8; }
.tc-pdf { background: #fdecec; color: #b91c1c; }
.tc-illustrator, .tc-eps, .tc-coreldraw { background: #fff1e6; color: #c2410c; }
.tc-photoshop { background: #e0f2fe; color: #0369a1; }
.tc-excel, .tc-csv { background: #e9f9ef; color: #15803d; }
.tc-word { background: #eef2ff; color: #4338ca; }
.studio-help {
    position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 6px; justify-items: start; padding: 18px; border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, .88); background: linear-gradient(135deg, #6d28d9, #db2777); font-size: 13px;
}
.studio-help strong { font-size: 15px; color: #fff; }
.studio-help .btn { margin-top: 6px; }
.sh-art-icon { position: absolute; z-index: -1; right: -14px; bottom: -16px; font-size: 90px; color: rgba(255, 255, 255, .14); transform: rotate(-14deg); }

/* ==========================================================================
   Bulk orders / schools — blue institutional
   ========================================================================== */
.bulk-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 24px;
    margin-bottom: 20px; padding: 36px 38px; border-radius: 26px; color: #fff;
    background: radial-gradient(90% 120% at 100% 0%, #06b6d4 0%, transparent 55%), linear-gradient(125deg, #172554 0%, #1e40af 45%, #2563eb 100%);
}
.bh-grid {
    position: absolute; inset: 0; z-index: -1; opacity: .18;
    background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: 34px 34px; mask-image: radial-gradient(circle at 80% 30%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 80% 30%, #000, transparent 70%);
}
.bh-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: 12px; font-weight: 600; }
.bulk-hero h1 { margin-top: 14px; font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.bulk-hero h1 span { position: relative; color: #fde68a; white-space: nowrap; }
.bulk-hero h1 span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f59e0b, #fde68a); transform-origin: left; animation: underline-grow .9s var(--ease-out) .5s both; }
@keyframes underline-grow { from { transform: scaleX(0); } }
.bulk-hero p { margin-top: 12px; max-width: 560px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .85); }
.bh-points { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 22px; margin-top: 18px; font-size: 13px; font-weight: 600; }
.bh-points li { display: flex; align-items: center; gap: 9px; }
.bh-points i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fde68a; font-size: 12px; }
.bh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bh-actions .btn-white { color: #1e40af; }
.bh-art { position: relative; height: 250px; }
.bh-idcard {
    position: absolute; left: 50%; top: 50%; width: 130px; height: 180px; margin: -90px 0 0 -65px; border-radius: 14px; overflow: hidden;
    display: grid; justify-items: center; align-content: start; gap: 8px; background: #fff; box-shadow: 0 26px 40px -20px rgba(0, 0, 0, .55);
    animation: fan-in 1s var(--ease-out) both;
}
.bh-idcard.c1 { --r: -16deg; --x: -70px; background: #fff; }
.bh-idcard.c2 { --r: 0deg; --x: 0px; z-index: 2; animation-delay: .15s; }
.bh-idcard.c3 { --r: 16deg; --x: 70px; animation-delay: .3s; }
.bh-idcard { transform: translateX(var(--x)) rotate(var(--r)); }
@keyframes fan-in { from { transform: translateX(0) rotate(0) translateY(30px); opacity: 0; } }
.bi-top { width: 100%; height: 38px; background: linear-gradient(90deg, #1e40af, #06b6d4); }
.bh-idcard.c1 .bi-top { background: linear-gradient(90deg, #d10a12, #f97316); }
.bh-idcard.c3 .bi-top { background: linear-gradient(90deg, #16a34a, #0d9488); }
.bi-photo { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; border: 4px solid #fff; background: #e0e7ff; color: #1e40af; font-size: 20px; }
.bi-line { width: 70%; height: 8px; border-radius: 4px; background: #e5e7eb; }
.bi-line.s { width: 45%; }
.bh-badge { position: absolute; z-index: 3; right: 8%; top: 8%; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #fde68a; color: #92400e; font-size: 12.5px; font-weight: 800; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .4); animation: bob 3s ease-in-out infinite; }

.saver { margin-bottom: 20px; padding: 22px; background: #fff; border: 1px solid #dbeafe; border-radius: 22px; box-shadow: 0 20px 40px -30px rgba(37, 99, 235, .5); }
.sv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sv-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: #fff; font-size: 20px; background: linear-gradient(135deg, #2563eb, #06b6d4); box-shadow: 0 12px 22px -12px #2563eb; }
.sv-head h2 { font-size: 20px; font-weight: 800; color: var(--ink); }
.sv-head p { font-size: 13px; color: var(--muted); }
.sv-head a { color: #2563eb; font-weight: 600; }
/* Product picker: type buttons, then small product tiles */
.sv-pick { display: grid; gap: 12px; margin-bottom: 18px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid #dbeafe; box-shadow: 0 10px 24px -20px rgba(37, 99, 235, .6); }
.sv-pick-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sv-cats { flex: 1; display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sv-cats::-webkit-scrollbar { display: none; }
.sv-cat {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px;
    background: #f1f5ff; color: #1e3a8a; font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s, box-shadow .2s;
}
.sv-cat i { font-size: 12px; opacity: .8; }
.sv-cat:hover { background: #dbeafe; }
.sv-cat.is-active { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 8px 16px -8px #2563eb; }
.sv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; padding: 2px; }
.sv-item {
    display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border-radius: 14px; text-align: left;
    background: #f8fafc; border: 1.5px solid transparent; transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.sv-item[hidden] { display: none; }
.sv-item:hover { background: #fff; border-color: #bfdbfe; transform: translateY(-2px); }
.sv-item.is-active { background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.sv-item img { flex: none; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #eef2f7; }
.sv-item span { display: grid; gap: 1px; min-width: 0; }
.sv-item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.sv-item small { font-size: 11.5px; font-weight: 700; color: #16a34a; }
.sv-item.is-in { animation: hero-rise .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.sv-view { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12.5px; font-weight: 700; transition: background .2s, color .2s; }
.sv-view:hover { background: #2563eb; color: #fff; }
.sv-view i { transition: transform .2s var(--ease); }
.sv-view:hover i { transform: translateX(3px); }
.saver.is-switched .sv-results { animation: hero-rise .45s var(--ease-out); }
/* The chosen product, full name */
.sv-chosen {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
    background: linear-gradient(120deg, #eff6ff, #fff 80%); border: 1px dashed #bfdbfe;
}
.sv-chosen img { flex: none; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: #eef2f7; }
.sv-chosen > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sv-chosen small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #2563eb; }
.sv-chosen strong { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.saver.is-switched .sv-chosen > * { animation: hero-rise .4s var(--ease-out) both; }
@media (max-width: 600px) {
    .sv-chosen { flex-wrap: wrap; }
    .sv-chosen .sv-view { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
    .sv-pick { padding: 10px; }
    .sv-pick-head { flex-wrap: wrap; }
    .sv-cats { flex-basis: 100%; }
    .sv-items { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 4px; }
    .sv-item { scroll-snap-align: start; }
}
.sv-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.sv-control label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--text); }
.sv-control label strong { font-size: 22px; color: #1e40af; }
.sv-control input[type="range"] {
    --fill: 30%;
    width: 100%; height: 10px; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer;
    background: linear-gradient(90deg, #2563eb, #06b6d4) 0 / var(--fill) 100% no-repeat, #e0e7ff;
}
.sv-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 6px solid #2563eb; box-shadow: 0 6px 14px rgba(37, 99, 235, .4); }
.sv-control input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid #2563eb; box-shadow: 0 6px 14px rgba(37, 99, 235, .4); }
.sv-ticks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sv-tick { display: grid; padding: 6px 10px; border-radius: 10px; background: #f1f5ff; font-size: 11px; color: var(--muted); text-align: center; transition: background .15s, color .15s, transform .15s; }
.sv-tick b { font-size: 13px; color: var(--ink); }
.sv-tick:hover { transform: translateY(-2px); }
.sv-tick.is-active { background: linear-gradient(135deg, #2563eb, #06b6d4); color: rgba(255, 255, 255, .85); }
.sv-tick.is-active b { color: #fff; }
.sv-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-box { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 16px; background: #f8faff; border: 1px solid #e0e7ff; }
.sv-box small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.sv-box strong { font-size: 21px; font-weight: 800; color: var(--ink); display: inline-block; }
.sv-box.is-save { background: linear-gradient(135deg, #ecfdf3, #fff); border-color: #bbf7d0; }
.sv-box.is-save strong { color: #15803d; }
.sv-box span { font-size: 11.5px; font-weight: 600; color: #15803d; }
.bump { animation: bump-num .45s var(--ease-out); }
@keyframes bump-num { 40% { transform: scale(1.14); } }
.sv-note { margin-top: 14px; font-size: 12px; color: var(--muted); }

.bulk-h2 { margin-bottom: 14px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }

.bulk-steps { margin-bottom: 26px; }
.bulk-steps ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bulk-steps ol::before { content: ""; position: absolute; left: 12%; right: 12%; top: 34px; height: 3px; background: repeating-linear-gradient(90deg, #93c5fd 0 10px, transparent 10px 18px); }
.bulk-steps li { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 8px; text-align: center; }
.bulk-steps li > i { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; color: #fff; font-size: 24px; background: linear-gradient(135deg, #1e40af, #06b6d4); box-shadow: 0 16px 28px -14px #1e40af; transition: transform .25s var(--ease); }
.bulk-steps li:hover > i { transform: translateY(-4px) rotate(-6deg); }
.bs-num { position: absolute; z-index: 2; top: -6px; left: calc(50% + 20px); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fde68a; color: #92400e; font-size: 12px; font-weight: 800; }
.bulk-steps strong { margin-top: 6px; font-size: 14px; color: var(--ink); }
.bulk-steps small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.bulk-form-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); overflow: hidden; border-radius: 24px; border: 1px solid #dbeafe; background: #fff; scroll-margin-top: 90px; }
.bf-side { position: relative; overflow: hidden; isolation: isolate; padding: 30px; color: #fff; background: linear-gradient(160deg, #1e3a8a, #2563eb 60%, #0891b2); }
.bf-side::after { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .08); }
.bf-side h2 { font-size: 24px; font-weight: 800; }
.bf-side p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.bf-side ul { display: grid; gap: 10px; margin-top: 20px; font-size: 13.5px; font-weight: 600; }
.bf-side li { display: flex; align-items: center; gap: 10px; }
.bf-side li i { color: #86efac; }
.bf-side { display: flex; flex-direction: column; }
.bf-side ul { margin-bottom: 26px; }
.bf-talk { display: flex; gap: 12px; margin-top: auto; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.bf-talk-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fde68a; color: #92400e; font-size: 17px; }
.bf-talk strong { display: block; font-size: 15px; }
.bf-talk small { display: block; margin-bottom: 8px; font-size: 12px; color: rgba(255, 255, 255, .75); }
.bf-talk a { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #fff; word-break: break-all; }
.bf-talk a:hover { color: #fde68a; }
.bf-art { position: absolute; z-index: -1; right: 20px; top: 40%; font-size: 140px; color: rgba(255, 255, 255, .06); transform: rotate(-10deg); }
.bf-form { padding: 26px; }
.interest-field { margin: 0; padding: 0; border: 0; }
.interest-field legend { margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichip, .tchip { position: relative; }
.interest-chips .ichip input, .topic-chips .tchip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; }
.ichip span, .tchip span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--line-soft); border: 1.5px solid transparent; transition: all .15s; }
.ichip span:hover { border-color: #bfdbfe; }
.ichip input:checked + span { color: #1e40af; background: #e8f0fe; border-color: #2563eb; }
.ichip input:focus-visible + span, .tchip input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 2px; }
.btn-bulk { --btn-bg: #1e40af; margin-top: 16px; min-height: 50px; color: #fff; background: linear-gradient(120deg, #1e40af, #2563eb, #0891b2); box-shadow: 0 14px 26px -14px #1e40af; }

/* ==========================================================================
   Contact — teal and friendly
   ========================================================================== */
.contact-hero {
    position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 10px;
    margin-bottom: 18px; padding: 40px 20px 36px; border-radius: 26px; text-align: center;
    background: radial-gradient(80% 120% at 50% 0%, #ccfbf1 0%, #ecfdf5 45%, #fff 100%); border: 1px solid #99f6e4;
}
.ch-bubble { position: absolute; z-index: -1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; color: #fff; font-size: 22px; box-shadow: 0 16px 26px -14px rgba(13, 148, 136, .7); animation: bob 5s ease-in-out infinite; }
.ch-bubble.b1 { left: 8%; top: 22%; background: linear-gradient(135deg, #14b8a6, #0d9488); transform: rotate(-10deg); }
.ch-bubble.b2 { right: 9%; top: 16%; background: linear-gradient(135deg, #3b82f6, #1d4ed8); animation-delay: -1.5s; }
.ch-bubble.b3 { right: 16%; bottom: 12%; width: 46px; height: 46px; font-size: 17px; background: linear-gradient(135deg, #f59e0b, #ea580c); animation-delay: -3s; }
.open-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 700; color: #92400e; }
.open-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; }
.open-pill.is-open { color: #0f766e; }
.open-pill.is-open .dot { background: #10b981; animation: live-pulse 1.8s infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.contact-hero h1 { font-size: 36px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.contact-hero h1 span { background: linear-gradient(90deg, #0d9488, #0284c7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.contact-hero p { max-width: 560px; font-size: 14.5px; color: var(--muted); }

.contact-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.cw {
    --c1: #0d9488; --c2: #14b8a6; --soft: #e3f7f5;
    position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start; padding: 18px; border-radius: 20px;
    background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.cw::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: var(--soft); transition: transform .4s var(--ease); }
.cw:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 22px 40px -24px var(--c1); }
.cw:hover::after { transform: scale(1.6); }
.cw-call { --c1: #2563eb; --c2: #3b82f6; --soft: #e8f0fe; }
.cw-wa { --c1: #16a34a; --c2: #22c55e; --soft: #e9f9ef; }
.cw-mail { --c1: #ea580c; --c2: #f59e0b; --soft: #fff1e6; }
.cw-track { --c1: #7c3aed; --c2: #a855f7; --soft: #f3edff; }
.cw-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 15px; color: #fff; font-size: 20px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.cw:hover .cw-icon { animation: ring-shake .6s ease; }
@keyframes ring-shake { 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.cw strong { position: relative; z-index: 1; font-size: 15px; color: var(--ink); }
.cw small { position: relative; z-index: 1; font-size: 12.5px; color: var(--muted); word-break: break-word; }
.cw-go { position: relative; z-index: 1; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--c1); }
.cw-go i { transition: transform .2s; }
.cw:hover .cw-go i { transform: translateX(4px); }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.contact-form-card { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.contact-form-card h2 { margin-bottom: 14px; font-size: 20px; font-weight: 800; color: var(--ink); }
.contact-form-card form { display: grid; gap: 14px; }
.topic-field { margin: 0; padding: 0; border: 0; }
.topic-field legend { margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip span:hover { border-color: #99f6e4; }
.tchip input:checked + span { color: #0f766e; background: #ccfbf1; border-color: #0d9488; }
.btn-teal { --btn-bg: #0d9488; justify-self: start; min-width: 200px; min-height: 50px; color: #fff; background: linear-gradient(120deg, #0d9488, #0284c7); box-shadow: 0 14px 26px -14px #0d9488; overflow: hidden; }
.plane { display: inline-block; transition: transform .6s cubic-bezier(.5, -0.4, .6, 1.4), opacity .6s; }
.btn-teal.is-sending .plane { transform: translate(160px, -40px) rotate(18deg); opacity: 0; }
.contact-side { display: grid; gap: 14px; position: sticky; top: 90px; }
.hours-card, .visit-card, .quick-links-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.hours-card h2, .visit-card h2, .quick-links-card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.hours-card h2 i, .visit-card h2 i { color: #0d9488; }
.hours-card ul { display: grid; gap: 2px; }
.hours-card li { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 9px; font-size: 13px; color: var(--text); }
.hours-card li.is-today { background: #ccfbf1; color: #0f766e; font-weight: 700; }
.hours-card li.is-closed span:last-child { color: #dc2626; }
.visit-card p { margin-bottom: 12px; font-size: 13px; line-height: 1.6; color: var(--text); }
.map-frame { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); }
.map-frame iframe { display: block; width: 100%; height: 220px; border: 0; }
.quick-links-card a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text); transition: background .15s, color .15s; }
.quick-links-card a:hover { background: #ecfdf5; color: #0f766e; }
.quick-links-card a i { width: 18px; color: #0d9488; }

/* ==========================================================================
   About — warm brand story
   ========================================================================== */
.about-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 20px;
    margin-bottom: 20px; padding: 36px 38px; border-radius: 26px;
    background: radial-gradient(90% 120% at 100% 50%, #fed7aa 0%, transparent 60%), linear-gradient(120deg, #fff7ed, #fff1f2 60%, #fff);
    border: 1px solid #fed7aa;
}
.ah-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 700; color: var(--red); }
.about-hero h1 { margin-top: 14px; font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.about-hero h1 span { position: relative; background: linear-gradient(90deg, var(--red), #f97316); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.about-hero p { margin-top: 12px; max-width: 560px; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.ah-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ah-collage { position: relative; height: 280px; }
.ah-sun { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde68a, #fb923c 60%, #ea580c); box-shadow: 0 30px 60px -20px rgba(234, 88, 12, .6); }
.ah-sun::after { content: ""; position: absolute; inset: -26px; border-radius: 50%; border: 2px dashed rgba(234, 88, 12, .35); animation: spin-slow 30s linear infinite; }
.ah-bubble { position: absolute; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 18px 30px -16px rgba(17, 19, 24, .35); animation: bob 5s ease-in-out infinite; }
.ah-bubble img { max-width: 60px; max-height: 60px; object-fit: contain; }
.ah-bubble i { font-size: 26px; color: var(--red); }
.ah-bubble.b2 i { color: #db2777; } .ah-bubble.b3 i { color: #16a34a; } .ah-bubble.b4 i { color: #2563eb; } .ah-bubble.b5 i { color: #7c3aed; } .ah-bubble.b6 i { color: #d97706; }
.ah-sun-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 54px; color: rgba(255, 255, 255, .92); }
.ah-sun-icon i { display: block; animation: heart-beat 2.4s ease-in-out infinite; }
.ah-bubble.b1 { left: 6%; top: 6%; }
.ah-bubble.b2 { right: 8%; top: 2%; animation-delay: -1s; width: 72px; height: 72px; }
.ah-bubble.b3 { right: 0; top: 44%; animation-delay: -2s; }
.ah-bubble.b4 { right: 22%; bottom: 0; animation-delay: -3s; width: 70px; height: 70px; }
.ah-bubble.b5 { left: 14%; bottom: 4%; animation-delay: -4s; }
.ah-bubble.b6 { left: 0; top: 42%; animation-delay: -2.5s; width: 64px; height: 64px; }

.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.as-item { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 20px; border-radius: 20px; color: #fff; }
.as-item::after { content: ""; position: absolute; right: -24px; bottom: -24px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.as-item i { font-size: 20px; opacity: .9; margin-bottom: 6px; }
.as-item strong { font-size: 30px; font-weight: 800; line-height: 1.1; }
.as-item small { font-size: 12.5px; opacity: .9; }
.as-item.s1 { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.as-item.s2 { background: linear-gradient(135deg, #db2777, #f43f5e); }
.as-item.s3 { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.as-item.s4 { background: linear-gradient(135deg, #16a34a, #0d9488); }

.about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 30px; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.st-text h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.st-text p { font-size: 14px; line-height: 1.75; color: var(--text); }
.st-text p + p { margin-top: 10px; }
.st-badge { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 14px !important; padding: 8px 14px; border-radius: 999px; background: #fff7e0; color: #92400e; font-weight: 700; font-size: 13px !important; }
.st-points { display: grid; gap: 14px; }
.st-points li { display: flex; gap: 14px; padding: 14px; border-radius: 16px; background: var(--line-soft); }
.sp-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; font-size: 18px; }
.sp-icon.p1 { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.sp-icon.p2 { background: linear-gradient(135deg, #7c3aed, #db2777); }
.sp-icon.p3 { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.st-points strong { display: block; font-size: 14.5px; color: var(--ink); }
.st-points small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.about-make, .about-values { margin-bottom: 30px; }
.about-make h2, .about-values h2 { margin-bottom: 14px; font-size: 22px; font-weight: 800; color: var(--ink); }
.am-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.am-tile { display: grid; justify-items: center; gap: 6px; padding: 18px 12px; border-radius: 20px; text-align: center; transition: transform .25s var(--ease), box-shadow .25s; }
.am-tile:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -22px rgba(17, 19, 24, .35); }
.am-tile.t0 { background: linear-gradient(160deg, #e8f0fe, #fff); } .am-tile.t1 { background: linear-gradient(160deg, #fde6f1, #fff); }
.am-tile.t2 { background: linear-gradient(160deg, #e9f9ef, #fff); } .am-tile.t3 { background: linear-gradient(160deg, #fff1e6, #fff); }
.am-tile.t4 { background: linear-gradient(160deg, #f3edff, #fff); } .am-tile.t5 { background: linear-gradient(160deg, #e3f7f5, #fff); }
.am-pic { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #fff; box-shadow: 0 10px 20px -12px rgba(17, 19, 24, .3); transition: transform .35s var(--ease); }
.am-tile:hover .am-pic { transform: rotate(-8deg) scale(1.06); }
.am-pic img { max-width: 58px; max-height: 58px; object-fit: contain; }
.am-pic i { font-size: 26px; color: var(--red); }
.am-tile strong { font-size: 13.5px; color: var(--ink); }
.am-tile small { font-size: 11.5px; color: var(--muted); }
.av-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.av { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); transition: transform .25s var(--ease), box-shadow .25s; }
.av:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -24px var(--c); }
.av i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 14px; color: #fff; font-size: 18px; background: var(--c); }
.av strong { display: block; font-size: 15px; color: var(--ink); }
.av p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.av.v1 { --c: #d10a12; } .av.v2 { --c: #2563eb; } .av.v3 { --c: #16a34a; } .av.v4 { --c: #7c3aed; }
.about-cta {
    --ph-a: #fff;
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    padding: 28px 32px; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #7f1d1d, var(--red) 50%, #f97316);
}
.about-cta .ph-dots { opacity: .25; right: 35%; }
.about-cta h2 { font-size: 24px; font-weight: 800; }
.about-cta p { margin-top: 4px; color: rgba(255, 255, 255, .85); }
.ac-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   How it works — purple to pink journey
   ========================================================================== */
.how-hero {
    position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 12px;
    margin-bottom: 30px; padding: 44px 20px 38px; border-radius: 26px; text-align: center;
    background: radial-gradient(80% 140% at 50% 0%, #f3e8ff, #fdf2f8 55%, #fff); border: 1px solid #f5d0fe;
}
.hh-ring { position: absolute; z-index: -1; border-radius: 50%; border: 3px dashed rgba(168, 85, 247, .25); animation: spin-slow 40s linear infinite; }
.hh-ring.r1 { width: 300px; height: 300px; left: -100px; top: -120px; }
.hh-ring.r2 { width: 220px; height: 220px; right: -60px; bottom: -110px; border-color: rgba(236, 72, 153, .25); animation-direction: reverse; }
.hh-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 700; color: #7c3aed; }
.how-hero h1 { font-size: 38px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.how-hero h1 span { background: linear-gradient(90deg, #7c3aed, #db2777); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.how-hero p { max-width: 560px; font-size: 14.5px; color: var(--muted); }
.hh-mini { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: #c4b5fd; }
.hh-mini span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: #7c3aed; font-size: 17px; box-shadow: var(--shadow-sm); animation: step-glow 4s infinite; }
.hh-mini span:nth-of-type(2) { animation-delay: 1s; } .hh-mini span:nth-of-type(3) { animation-delay: 2s; } .hh-mini span:nth-of-type(4) { animation-delay: 3s; }
@keyframes step-glow { 0%, 20% { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; transform: translateY(-4px); } 30%, 100% { background: #fff; color: #7c3aed; transform: none; } }

.journey-steps { position: relative; display: grid; gap: 22px; max-width: 920px; margin: 0 auto 36px; padding-left: 4px; }
.js-line { position: absolute; left: 46px; top: 40px; bottom: 40px; width: 4px; border-radius: 4px; background: #f3e8ff; }
.js-fill { display: block; width: 100%; height: 0; border-radius: inherit; background: linear-gradient(180deg, #7c3aed, #db2777, #f97316, #16a34a); transition: height .15s linear; }
.jstep { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
.jstep-art {
    position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 28px;
    color: var(--c1); font-size: 32px; background: color-mix(in srgb, var(--c1) 14%, #fff); border: 2px dashed color-mix(in srgb, var(--c1) 35%, #fff);
    transition: background .5s, color .5s, transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.jstep.is-lit .jstep-art { color: #fff; border-color: transparent; }
.jstep.is-lit .jstep-art { background: linear-gradient(135deg, var(--c1), var(--c2)); transform: rotate(-6deg); box-shadow: 0 20px 34px -16px var(--c1); }
.jstep.s1 { --c1: #7c3aed; --c2: #a855f7; } .jstep.s2 { --c1: #db2777; --c2: #f472b6; }
.jstep.s3 { --c1: #ea580c; --c2: #f59e0b; } .jstep.s4 { --c1: #16a34a; --c2: #0d9488; }
.ja-num { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--c1); font-size: 13px; font-weight: 800; box-shadow: var(--shadow-sm); }
.jstep-card { padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 36px -30px rgba(17, 19, 24, .4); }
.jstep-card h2 { font-size: 19px; font-weight: 800; color: var(--ink); }
.jstep-card p { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--text); }
.jtip { display: flex; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: #fffbeb; font-size: 12.5px; color: #92400e; }
.jtip i { margin-top: 2px; color: #f59e0b; }
.jlink { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--c1); }
.jlink i { transition: transform .2s; }
.jlink:hover i { transform: translateX(4px); }
.js .page-how .jstep[data-reveal] .jstep-card { transform: translateX(30px); opacity: 0; transition: transform .7s var(--ease-out) .1s, opacity .7s var(--ease-out) .1s; }
.js .page-how .jstep[data-reveal].is-visible .jstep-card { transform: none; opacity: 1; }

.two-ways { margin-bottom: 26px; }
.two-ways h2 { margin-bottom: 14px; font-size: 22px; font-weight: 800; color: var(--ink); text-align: center; }
.tw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 0 auto; }
.tw { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; justify-items: start; padding: 26px; border-radius: 24px; }
.tw-online { background: #fff; border: 1px solid var(--line); }
.tw-bulk { color: #fff; background: linear-gradient(140deg, #6d28d9, #db2777); box-shadow: 0 24px 40px -26px #6d28d9; }
.tw-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 21px; color: #fff; background: linear-gradient(135deg, var(--red), #f97316); }
.tw-bulk .tw-icon { background: rgba(255, 255, 255, .18); }
.tw h3 { margin-top: 4px; font-size: 20px; font-weight: 800; }
.tw-online h3 { color: var(--ink); }
.tw p { font-size: 13.5px; opacity: .85; }
.tw ul { display: grid; gap: 8px; margin: 8px 0 12px; font-size: 13.5px; }
.tw li { display: flex; align-items: center; gap: 9px; }
.tw-online li i { color: var(--c-green); }
.tw-bulk li i { color: #fde68a; }
.tw-badge { position: absolute; top: 18px; right: -34px; padding: 5px 40px; background: #fde68a; color: #92400e; font-size: 11px; font-weight: 800; transform: rotate(35deg); }
.tw-bulk .btn-white { color: #6d28d9; }
.how-help { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 920px; margin: 0 auto; padding: 16px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.how-help > i { font-size: 26px; color: #7c3aed; }
.how-help > div { flex: 1 1 220px; }
.how-help strong { display: block; font-size: 15px; color: var(--ink); }
.how-help small { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   Help centre — support blue
   ========================================================================== */
.help-hero {
    position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 10px;
    margin-bottom: 20px; padding: 40px 20px 34px; border-radius: 26px; text-align: center;
    background: radial-gradient(80% 140% at 50% 0%, #dbeafe, #eff6ff 55%, #fff); border: 1px solid #bfdbfe;
}
.hlp-q { position: absolute; z-index: -1; font-size: 90px; font-weight: 800; color: rgba(37, 99, 235, .08); animation: bob 6s ease-in-out infinite; }
.hlp-q.q1 { left: 6%; top: 8%; transform: rotate(-14deg); }
.hlp-q.q2 { right: 8%; top: 20%; font-size: 120px; animation-delay: -2s; }
.hlp-q.q3 { left: 18%; bottom: -10px; font-size: 70px; color: rgba(236, 72, 153, .08); animation-delay: -4s; }
.hlp-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; font-size: 26px; background: linear-gradient(135deg, #2563eb, #06b6d4); box-shadow: 0 16px 28px -14px #2563eb; }
.hlp-icon i { animation: spin-slow 10s linear infinite; }
.help-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.help-hero p { font-size: 14.5px; color: var(--muted); }
.help-search { position: relative; width: min(620px, 100%); margin-top: 6px; }
.help-search i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #2563eb; font-size: 17px; }
.help-search input {
    width: 100%; height: 58px; padding: 0 20px 0 52px; border-radius: 18px; border: 2px solid #bfdbfe; outline: 0;
    font-size: 15px; color: var(--ink); background: #fff; box-shadow: 0 20px 40px -26px rgba(37, 99, 235, .6); transition: border-color .2s, box-shadow .2s;
}
.help-search input:focus { border-color: #2563eb; box-shadow: 0 0 0 5px rgba(37, 99, 235, .12), 0 20px 40px -26px rgba(37, 99, 235, .6); }
.help-suggest { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.help-suggest button { padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 600; color: #1e40af; transition: transform .15s; }
.help-suggest button:hover { transform: translateY(-2px); }

.help-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.topic { --c1: #2563eb; --c2: #06b6d4; --soft: #e8f0fe; display: grid; justify-items: start; gap: 4px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.topic:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 34px -22px var(--c1); }
.topic.t1 { --c1: #db2777; --c2: #f472b6; } .topic.t2 { --c1: #16a34a; --c2: #22c55e; } .topic.t3 { --c1: #ea580c; --c2: #f59e0b; }
.topic.t4 { --c1: #7c3aed; --c2: #a855f7; } .topic.t5 { --c1: #0d9488; --c2: #14b8a6; } .topic.t-track { --c1: #d10a12; --c2: #f97316; }
.topic-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; color: #fff; font-size: 17px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.topic strong { font-size: 14px; color: var(--ink); }
.topic small { font-size: 12px; color: var(--muted); }
.help-results { display: grid; gap: 22px; margin-bottom: 26px; }
.help-group { scroll-margin-top: 90px; }
.help-group h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 18px; font-weight: 800; color: var(--ink); }
.help-group h2 i { color: #2563eb; }
.help-item { margin-bottom: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.help-item[open] { border-color: #bfdbfe; box-shadow: 0 16px 30px -24px rgba(37, 99, 235, .6); }
.help-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e8f0fe; color: #2563eb; font-size: 12px; transition: transform .25s var(--ease), background .2s, color .2s; }
.help-item[open] summary i { transform: rotate(45deg); background: #2563eb; color: #fff; }
.help-answer { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.7; color: var(--text); animation: hero-rise .35s var(--ease-out); }
.help-answer a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; color: #2563eb; }
mark { padding: 0 2px; border-radius: 3px; background: #fde68a; color: inherit; }
.help-none { display: grid; justify-items: center; gap: 8px; padding: 30px 16px; text-align: center; }
.help-none[hidden] { display: none; }
.help-none h2 { font-size: 18px; font-weight: 800; color: var(--ink); }
.help-none p { font-size: 13.5px; color: var(--muted); }
.help-contact {
    --ph-a: #fff;
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px 28px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #1e3a8a, #2563eb, #0891b2);
}
.help-contact .ph-dots { opacity: .25; }
.help-contact h2 { font-size: 22px; font-weight: 800; }
.help-contact p { color: rgba(255, 255, 255, .85); }
.hc-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.help-contact .btn-white { color: #1e40af; }

/* ==========================================================================
   Policy pages — calm slate with a contents list
   ========================================================================== */
.policy-hero {
    --ph-a: #4f46e5;
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 20px; align-items: center;
    margin-bottom: 18px; padding: 28px 30px; border-radius: 24px;
    background: radial-gradient(80% 140% at 100% 0%, #e0e7ff, #f8fafc 60%, #fff); border: 1px solid #e0e7ff;
}
.policy-hero .ph-dots { right: 6%; left: auto; opacity: .45; }
.pol-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; color: #fff; font-size: 28px; background: linear-gradient(135deg, #334155, #4f46e5); box-shadow: 0 18px 30px -16px #4f46e5; transform: rotate(-6deg); }
.pol-copy h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pol-copy p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.pol-date { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 600; color: #4338ca; }
.pol-others { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.pol-others a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #e0e7ff; font-size: 12.5px; font-weight: 600; color: var(--text); transition: border-color .15s, color .15s; }
.pol-others a:hover { border-color: #4f46e5; color: #4338ca; }
.in-short { margin-bottom: 20px; }
.in-short h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 16px; font-weight: 800; color: var(--ink); }
.in-short h2 i { color: #f59e0b; }
.is-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.is-card { --c: #2563eb; --soft: #e8f0fe; display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, var(--soft), #fff 70%); border: 1px solid var(--soft); }
.is-card.c1 { --c: #16a34a; --soft: #e9f9ef; } .is-card.c2 { --c: #d97706; --soft: #fff7e0; } .is-card.c3 { --c: #7c3aed; --soft: #f3edff; }
.is-card i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; color: #fff; font-size: 15px; background: var(--c); }
.is-card strong { font-size: 14px; color: var(--ink); }
.is-card small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.policy-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.policy-toc { position: sticky; top: 90px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.toc-title { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.toc-progress { height: 4px; margin: 10px 0 12px; border-radius: 4px; background: #eef2ff; overflow: hidden; }
.toc-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #4f46e5, #06b6d4); transition: width .15s linear; }
.policy-toc ol { display: grid; gap: 2px; counter-reset: toc; }
.policy-toc a { display: block; padding: 7px 10px; border-radius: 9px; border-left: 3px solid transparent; font-size: 13px; color: var(--muted); transition: all .15s; }
.policy-toc a:hover { color: var(--ink); background: var(--line-soft); }
.policy-toc a.is-active { color: #4338ca; font-weight: 700; background: #eef2ff; border-left-color: #4f46e5; }
.policy-body { padding: 8px 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.pol-section { padding: 22px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 90px; }
.pol-section h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 19px; font-weight: 800; color: var(--ink); }
.pol-num { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 11px; background: #eef2ff; color: #4338ca; font-size: 12.5px; font-weight: 800; }
.policy-body .prose { font-size: 14px; line-height: 1.8; color: var(--text); }
.policy-body .prose p { margin: 0 0 10px; }
.policy-body .prose ul { display: grid; gap: 6px; margin: 4px 0 12px; padding: 0; list-style: none; }
.policy-body .prose li { position: relative; padding-left: 22px; }
.policy-body .prose li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #06b6d4); }
.policy-body .prose strong { color: var(--ink); }
.pol-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: #eef2ff; }
.pol-contact > i { font-size: 24px; color: #4f46e5; }
.pol-contact > div { flex: 1 1 220px; }
.pol-contact strong { display: block; font-size: 14.5px; color: var(--ink); }
.pol-contact small { font-size: 12.5px; color: var(--muted); }

/* ==========================================================================
   All categories — multicolour tiles
   ========================================================================== */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
.cat-tile { --c: #2563eb; --soft: #e8f0fe; display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: linear-gradient(150deg, var(--soft), #fff 65%); border: 1px solid var(--soft); transition: transform .25s var(--ease), box-shadow .25s; }
.cat-tile:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -28px var(--c); }
.ct1 { --c: #db2777; --soft: #fde6f1; } .ct2 { --c: #16a34a; --soft: #e9f9ef; } .ct3 { --c: #ea580c; --soft: #fff1e6; }
.ct4 { --c: #7c3aed; --soft: #f3edff; } .ct5 { --c: #0d9488; --soft: #e3f7f5; } .ct6 { --c: #d97706; --soft: #fff7e0; } .ct7 { --c: #d10a12; --soft: #fdecee; }
.ct-main { display: flex; align-items: center; gap: 14px; }
.ct-pic { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: #fff; box-shadow: 0 12px 22px -14px rgba(17, 19, 24, .35); transition: transform .35s var(--ease); }
.cat-tile:hover .ct-pic { transform: rotate(-6deg) scale(1.05); }
.ct-pic img { max-width: 56px; max-height: 56px; object-fit: contain; }
.ct-pic i { font-size: 28px; color: var(--c); }
.ct-text { flex: 1; min-width: 0; }
.ct-text strong { display: block; font-size: 16px; color: var(--ink); }
.ct-text small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.ct-go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--c); box-shadow: var(--shadow-sm); transition: transform .2s, background .2s, color .2s; }
.cat-tile:hover .ct-go { transform: translateX(4px); background: var(--c); color: #fff; }
.ct-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-subs a { padding: 5px 11px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--text); border: 1px solid var(--soft); }
.ct-subs a:hover { color: var(--c); border-color: var(--c); }
.cat-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px dashed #d8b4fe; }
.cat-cta > i { font-size: 26px; color: #7c3aed; }
.cat-cta > div { flex: 1 1 240px; }
.cat-cta strong { display: block; font-size: 15px; color: var(--ink); }
.cat-cta small { font-size: 12.5px; color: var(--muted); }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1100px) {
    .upload-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
    .upload-side, .contact-side { position: static; }
    .contact-ways, .about-stats, .av-grid, .is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-body { grid-template-columns: minmax(0, 1fr); }
    .policy-layout { grid-template-columns: minmax(0, 1fr); }
    .policy-toc { position: static; }
}
@media (max-width: 860px) {
    .studio-hero, .bulk-hero, .about-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
    .sh-art, .bh-art { height: 210px; }
    .ah-collage { height: 220px; }
    .bulk-form-wrap { grid-template-columns: minmax(0, 1fr); }
    .bulk-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
    .bulk-steps ol::before { display: none; }
    .about-story { grid-template-columns: minmax(0, 1fr); }
    .tw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .studio-hero h1, .bulk-hero h1 { font-size: 27px; }
    .contact-hero h1, .about-hero h1, .how-hero h1 { font-size: 27px; }
    .help-hero h1 { font-size: 26px; }
    .pol-copy h1 { font-size: 23px; }
    .bh-points { grid-template-columns: minmax(0, 1fr); }
    .sh-art { height: 180px; }
    .sh-file { font-size: 11px; padding: 6px 9px; }
    .sv-results { grid-template-columns: minmax(0, 1fr); }
    .sv-box { grid-template-columns: 1fr auto; align-items: center; }
    .sv-box span { grid-column: 1 / -1; }
    .contact-ways { grid-template-columns: minmax(0, 1fr); }
    .ch-bubble { opacity: .35; }
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .as-item strong { font-size: 24px; }
    .av-grid, .is-grid { grid-template-columns: minmax(0, 1fr); }
    .journey-steps { gap: 16px; }
    .js-line { left: 30px; }
    .jstep { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; }
    .jstep-art { width: 60px; height: 60px; border-radius: 20px; font-size: 22px; }
    .ja-num { width: 24px; height: 24px; font-size: 11px; }
    .jstep-card { padding: 16px; }
    .policy-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
    .pol-icon { width: 54px; height: 54px; font-size: 22px; }
    .policy-body { padding: 4px 18px 20px; }
    .hlp-q { display: none; }
    .up-card, .contact-form-card, .bf-form, .bf-side { padding: 18px; }
    .btn-teal { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-card, .sh-file, .sh-cursor, .bh-idcard, .bh-badge, .ch-bubble, .ah-bubble, .ah-sun::after, .hh-ring, .hh-mini span,
    .hlp-q, .hlp-icon i, .dz-orbit::before, .dz-orbit::after, .open-pill .dot, .bulk-hero h1 span::after { animation: none !important; }
    .js :is(.page-bulk, .page-contact, .page-about, .page-how, .page-help, .page-policy, .page-categories) [data-reveal],
    .js :is(.page-bulk, .page-contact, .page-about, .page-how, .page-help, .page-policy, .page-categories) [data-reveal] [style*="--i"],
    .js .page-how .jstep[data-reveal] .jstep-card { opacity: 1 !important; transform: none !important; }
}

/* Footer bottom bar: "A Venture by [logo] | Trusted by ..." in the same plain style as the company line */
.footer-venture { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 11.5px; color: #6b7280; }
.fv-logo { display: inline-flex; align-items: center; }
.fv-logo img { display: block; width: auto; height: 22px; transition: transform .15s ease, opacity .15s ease; }
a.fv-logo { cursor: pointer; text-decoration: none; }
a.fv-logo:hover img { opacity: .85; transform: scale(1.05); }
.fv-sep { width: 1px; height: 12px; background: #b3b7bf; }
.fv-trust { white-space: nowrap; }
@media (max-width: 600px) {
    .footer-venture { gap: 6px 8px; }
    .fv-sep { display: none; }
    .fv-trust { flex-basis: 100%; white-space: normal; text-align: center; }
}

/* ==========================================================================
   Blog — "ink & paper": CMYK inks, halftone dots and registration marks
   ========================================================================== */
.page-blog main, .page-post main { padding-bottom: 50px; }

/* Topic colours (set on cards, chips, the article page) */
.tone-blue { --t1: #2563eb; --t2: #06b6d4; --tsoft: #e8f0fe; }
.tone-purple { --t1: #7c3aed; --t2: #db2777; --tsoft: #f3edff; }
.tone-teal { --t1: #0d9488; --t2: #14b8a6; --tsoft: #e3f7f5; }
.tone-red { --t1: #d10a12; --t2: #f97316; --tsoft: #fdecee; }
.tone-amber { --t1: #d97706; --t2: #f59e0b; --tsoft: #fff5de; }
.tone-green { --t1: #16a34a; --t2: #84cc16; --tsoft: #e9f9ef; }
.tone-pink { --t1: #db2777; --t2: #f472b6; --tsoft: #fde6f1; }
.tone-ink { --t1: #1e1b4b; --t2: #4338ca; --tsoft: #eef0f6; }

/* Printer's registration mark */
.reg-mark { position: absolute; z-index: 0; width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 50%; animation: spin-slow 24s linear infinite; pointer-events: none; }
.reg-mark::before, .reg-mark::after { content: ""; position: absolute; background: rgba(255, 255, 255, .45); }
.reg-mark::before { left: 50%; top: -9px; bottom: -9px; width: 2px; transform: translateX(-50%); }
.reg-mark::after { top: 50%; left: -9px; right: -9px; height: 2px; transform: translateY(-50%); }
.rm-tl { left: 20px; top: 20px; }
.rm-br { right: 20px; bottom: 20px; animation-direction: reverse; }
.rm-tr { right: 22px; top: 22px; }

/* ---- Banner ---- */
.blog-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: center;
    margin-bottom: 18px; padding: 46px 52px; border-radius: 28px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, #1e1b4b 0%, #0f172a 55%, #0a0f1d 100%);
}
.bh-ink { position: absolute; z-index: -1; border-radius: 50%; mix-blend-mode: screen; opacity: .6; animation: ink-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.bh-ink.ink-c { width: 380px; height: 380px; right: 26%; top: -150px; background: radial-gradient(circle at 40% 40%, #00aeef, rgba(0, 174, 239, 0) 68%); }
.bh-ink.ink-m { width: 420px; height: 420px; right: -120px; top: 10px; background: radial-gradient(circle at 40% 40%, #ec008c, rgba(236, 0, 140, 0) 68%); animation-delay: -6s; }
.bh-ink.ink-y { width: 360px; height: 360px; right: 18%; bottom: -200px; background: radial-gradient(circle at 40% 40%, #ffde00, rgba(255, 222, 0, 0) 68%); animation-delay: -11s; }
.bh-halftone {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .17) 1.4px, transparent 1.7px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 42%); mask-image: linear-gradient(115deg, #000 0%, transparent 42%);
}
@keyframes ink-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 20px) scale(1.08); } 100% { transform: translate(20px, -16px) scale(.95); } }

.blh-copy { position: relative; }
.blh-kicker {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.blh-kicker i { color: #ffde00; }
.blh-kicker[class*="tone-"] { background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: none; }
.blh-kicker[class*="tone-"] i { color: #fff; }
.blog-hero h1 { margin: 14px 0 10px; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.blog-hero p { max-width: 560px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.ink-text {
    background: linear-gradient(90deg, #00aeef, #ec008c 35%, #ffde00 65%, #00aeef); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: ink-flow 7s linear infinite;
}
@keyframes ink-flow { to { background-position: -200% center; } }

.blog-search {
    position: relative; display: flex; align-items: center; max-width: 520px; margin-top: 20px; padding: 6px;
    border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .8);
}
.blog-search > i { position: absolute; left: 20px; color: #ec008c; font-size: 15px; }
.blog-search input { flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 42px; border: 0; outline: 0; background: transparent; font-size: 14.5px; color: var(--ink); }
.blog-search button { flex: none; height: 46px; padding: 0 22px; border-radius: 12px; background: linear-gradient(135deg, #ec008c, #d10a12); color: #fff; font-size: 14px; font-weight: 700; transition: filter .2s, transform .2s; }
.blog-search button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.blog-search:focus-within { box-shadow: 0 0 0 4px rgba(236, 0, 140, .35), 0 20px 40px -22px rgba(0, 0, 0, .8); }

.blh-stats { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 22px; }
.blh-stats li { display: grid; padding-left: 12px; border-left: 3px solid #00aeef; line-height: 1.2; }
.blh-stats li:nth-child(2) { border-color: #ec008c; }
.blh-stats li:nth-child(3) { border-color: #ffde00; }
.blh-stats strong { font-size: 22px; font-weight: 800; }
.blh-stats span { font-size: 12px; color: rgba(255, 255, 255, .62); }

/* Fanned stack of article covers */
.blh-art { position: relative; height: 300px; }
.blh-sheet {
    position: absolute; width: 74%; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: 16px;
    border: 5px solid #fff; background: #fff; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .75);
    transform: rotate(var(--r)); animation: sheet-in .9s var(--ease-out) both, sheet-float 6s ease-in-out infinite alternate;
}
.blh-sheet img { width: 100%; height: 100%; object-fit: cover; }
.blh-sheet.s0 { --r: -3deg; z-index: 3; left: 14%; top: 104px; animation-delay: .35s, 1.2s; }
.blh-sheet.s1 { --r: -11deg; z-index: 2; left: 0; top: 14px; animation-delay: .2s, .4s; }
.blh-sheet.s2 { --r: 9deg; z-index: 1; right: 0; top: 30px; animation-delay: .05s, 0s; }
.blh-pen {
    position: absolute; z-index: 4; right: 6%; bottom: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    color: #111; font-size: 22px; background: #ffde00; box-shadow: 0 0 0 6px rgba(255, 222, 0, .25), 0 16px 26px -12px #000;
    animation: bob 4s ease-in-out infinite;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(70px) rotate(0deg) scale(.9); } }
@keyframes sheet-float { to { translate: 0 -10px; } }

/* ---- Topics ---- */
.blog-topics { display: flex; gap: 10px; margin-bottom: 20px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.blog-topics::-webkit-scrollbar { display: none; }
.topic-pill {
    flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink);
    transition: transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s, color .2s;
}
.topic-pill i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tsoft); color: var(--t1); font-size: 12.5px; transition: background .2s, color .2s; }
.topic-pill b { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); font-size: 11px; color: var(--muted); text-align: center; }
.topic-pill:hover { transform: translateY(-2px); border-color: var(--t1); box-shadow: 0 12px 22px -16px var(--t1); }
.topic-pill.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 14px 26px -16px var(--t1); }
.topic-pill.is-active i { background: rgba(255, 255, 255, .2); color: #fff; }
.topic-pill.is-active b { background: rgba(255, 255, 255, .25); color: #fff; }

.topic-chip {
    position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    background: var(--tsoft); color: var(--t1); font-size: 11.5px; font-weight: 700; transition: background .2s, color .2s;
}
.topic-chip:hover { background: var(--t1); color: #fff; }

/* Author initials in a CMYK ring */
.author-dot {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
    color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em;
    background: linear-gradient(#1f2233, #1f2233) padding-box, conic-gradient(#00aeef, #ec008c, #ffde00, #00aeef) border-box;
}
.author-dot.is-lg { width: 44px; height: 44px; border-width: 3px; font-size: 14px; }
.author-dot.is-xl { width: 58px; height: 58px; border-width: 3px; font-size: 18px; }

/* ---- Featured article + most read ---- */
.blog-front { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 18px; margin-bottom: 28px; }
.bf-feature {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); overflow: hidden;
    border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s; animation: hero-rise .7s var(--ease-out) .1s both;
}
.bf-feature:hover { transform: translateY(-3px); box-shadow: 0 34px 54px -36px var(--t1); }
.bf-cover { position: relative; min-height: 300px; overflow: hidden; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.bf-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.bf-feature:hover .bf-cover img { transform: scale(1.05); }
.bf-flag {
    position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    background: #ffde00; color: #111; font-size: 12px; font-weight: 800; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6);
}
.bf-flag i { animation: star-pop .8s .6s var(--ease-out) both; }
.bf-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 28px 26px; }
.bf-title { font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.bf-title a { transition: color .2s; }
.bf-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bf-feature:hover .bf-title a { color: var(--t1); }
.bf-body > p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.bf-body .pc-meta { margin-top: 2px; }
.bf-btn { margin-top: auto; }
.bf-btn i { transition: transform .2s; }
.bf-feature:hover .bf-btn i { transform: translateX(4px); }

.bf-popular { padding: 20px 16px 14px; border-radius: 24px; background: #fff; border: 1px solid var(--line); animation: hero-rise .7s var(--ease-out) .2s both; }
.bf-popular h2 { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.bf-popular h2 i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; font-size: 15px; background: linear-gradient(135deg, #ec008c, #f97316); }
.bf-popular ol { display: grid; gap: 2px; }
.bf-popular a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 16px; transition: background .2s; }
.bf-popular a:hover { background: var(--tsoft); }
.pop-num { font-size: 27px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--t1); transition: color .2s; }
.bf-popular a:hover .pop-num { color: var(--t1); }
.pop-text strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.38; color: var(--ink); }
.pop-text small { font-size: 11.5px; color: var(--muted); }
.bf-popular img { width: 84px; height: 56px; object-fit: cover; border-radius: 10px; }

/* ---- Article grid + cards ---- */
.blog-list { margin-bottom: 30px; }
.bl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bl-head h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--ink); }
.bl-head h2 i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; font-size: 15px; background: linear-gradient(135deg, #00aeef, #7c3aed); }
.bl-count { padding: 5px 12px; border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--muted); }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line);
    transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.post-card::before {
    content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--t1), var(--t2));
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.post-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 30px 46px -32px var(--t1); }
.post-card:hover::before { transform: scaleX(1); }
.pc-cover { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.post-card:hover .pc-cover img { transform: scale(1.06); }
.pc-art {
    position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .92); font-size: 54px;
    background: radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.8px) 0 0 / 14px 14px, linear-gradient(135deg, var(--t1), var(--t2));
}
.pc-read {
    position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    background: rgba(17, 19, 24, .72); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 600;
}
.pc-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px 18px; }
.pc-title { font-size: 16.5px; font-weight: 700; line-height: 1.38; color: var(--ink); }
.pc-title a { transition: color .2s; }
.pc-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card:hover .pc-title a { color: var(--t1); }
.pc-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.6; color: var(--muted); }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.pc-author { font-weight: 600; color: var(--text); }
.pc-meta time::before { content: "·"; margin-right: 8px; }
.pc-go { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tsoft); color: var(--t1); font-size: 12px; transition: background .2s, color .2s, transform .2s; }
.post-card:hover .pc-go { background: var(--t1); color: #fff; transform: translateX(3px); }

.blog-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; border-radius: 24px; background: #fff; border: 1px dashed #d5d6db; text-align: center; }
.blog-empty h3 { font-size: 19px; font-weight: 800; color: var(--ink); }
.blog-empty p { font-size: 13.5px; color: var(--muted); }
.be-art { position: relative; display: grid; place-items: center; width: 120px; height: 96px; margin-bottom: 4px; }
.be-art span { position: absolute; width: 62px; height: 62px; border-radius: 50%; mix-blend-mode: multiply; opacity: .85; animation: bob 5s ease-in-out infinite; }
.be-art .ink-c { left: 12px; top: 2px; background: #00aeef; }
.be-art .ink-m { right: 12px; top: 2px; background: #ec008c; animation-delay: -1.6s; }
.be-art .ink-y { left: 29px; bottom: 0; background: #ffde00; animation-delay: -3.2s; }
.be-art i { position: relative; font-size: 30px; color: #111; }

/* ---- "Got a print project?" band ---- */
.blog-cta {
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
    padding: 28px 36px 28px 44px; border-radius: 24px; color: #fff; background: radial-gradient(120% 170% at 100% 0%, #3b1d7a, #0f172a 62%);
}
.blog-cta::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.7px); background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(270deg, #000, transparent 55%); mask-image: linear-gradient(270deg, #000, transparent 55%);
}
.bc-stripes { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; width: 10px; }
.bc-stripes i { flex: 1; }
.bc-stripes i:nth-child(1) { background: #00aeef; }
.bc-stripes i:nth-child(2) { background: #ec008c; }
.bc-stripes i:nth-child(3) { background: #ffde00; }
.bc-stripes i:nth-child(4) { background: #000; }
.bc-copy h2 { font-size: 22px; font-weight: 800; }
.bc-copy p { max-width: 540px; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.bc-buttons { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.blog-cta .btn-white { color: #1e1b4b; }

/* ---- Article page ---- */
.read-progress { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, #00aeef, #ec008c, #ffde00); transform: scaleX(0); transform-origin: left; }
.post-preview { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: #fff5de; border: 1px solid #fde68a; color: #7a4b00; font-size: 13px; font-weight: 600; }

.post-hero {
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center;
    margin-bottom: 24px; padding: 38px 44px 44px; border-radius: 28px; background: linear-gradient(135deg, var(--tsoft), #fff 62%); border: 1px solid var(--tsoft);
}
.post-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--t1) 24%, transparent) 1.5px, transparent 1.8px); background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent); mask-image: radial-gradient(70% 90% at 0% 0%, #000, transparent);
}
.post-hero h1 { margin: 14px 0 12px; font-size: 36px; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: var(--ink); }
.post-lead { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.pm-author { display: grid; line-height: 1.25; }
.pm-author small { font-size: 11px; }
.pm-author strong { font-size: 13.5px; color: var(--ink); }
.pm-sep { width: 1px; height: 28px; background: #d9dae0; }
.pm-item { display: inline-flex; align-items: center; gap: 6px; }
.pm-item i { color: var(--t1); }

/* Cover with cyan, magenta and yellow plates slightly out of register; hover lines them up */
.post-cover { position: relative; margin: 0 12px 0 0; aspect-ratio: 1200 / 630; }
.post-cover > img, .post-cover > .pc-art { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 50px -30px rgba(17, 19, 24, .55); }
.post-cover > .pc-art { position: absolute; inset: 0; }
.misreg { position: absolute; inset: 0; border-radius: 20px; mix-blend-mode: multiply; opacity: .85; transition: translate .8s var(--ease-out); animation: fade-in .8s .3s both; }
.mr-c { background: #00aeef; translate: -14px -12px; }
.mr-m { background: #ec008c; translate: 14px -5px; }
.mr-y { background: #ffde00; translate: 5px 14px; }
.post-hero:hover .misreg { translate: 0 0; }

.post-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 34px; }
.post-layout.has-shop { grid-template-columns: 240px minmax(0, 1fr) 290px; }
.post-side, .post-shop { position: sticky; top: 90px; display: grid; gap: 14px; }
.post-main { min-width: 0; padding: 34px 42px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }

/* Contents list */
.post-toc { padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.post-toc summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary i { color: var(--t1); }
.post-toc summary b { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--tsoft); color: var(--t1); font-size: 11px; }
.toc-track { height: 4px; margin: 12px 0 8px; border-radius: 4px; overflow: hidden; background: var(--line-soft); }
.toc-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #00aeef, #ec008c, #ffde00); transition: width .15s linear; }
.post-toc ol { display: grid; gap: 2px; }
.post-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); transition: background .2s, color .2s; }
.post-toc a span { flex: none; padding-top: 1px; font-size: 11px; font-weight: 800; color: var(--soft); }
.post-toc a:hover { background: var(--line-soft); color: var(--ink); }
.post-toc a.is-active { background: var(--tsoft); color: var(--t1); font-weight: 600; }
.post-toc a.is-active span { color: var(--t1); }

/* Share */
.post-share { padding: 14px 16px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.post-share p { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.post-share ul { display: flex; flex-wrap: wrap; gap: 8px; }
.post-share a, .post-share button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; font-size: 15px; transition: transform .2s var(--ease), filter .2s; }
.post-share a:hover, .post-share button:hover { transform: translateY(-3px) rotate(-6deg); filter: brightness(1.08); }
.share-wa { background: #25d366; }
.share-fb { background: #1877f2; }
.share-x { background: #111318; }
.share-in { background: #0a66c2; }
.share-link { background: #6b7280; }
.share-more { background: linear-gradient(135deg, #ec008c, #7c3aed); }

/* The article text */
.post-prose { max-width: 760px; font-size: 15.5px; line-height: 1.8; color: #33343c; }
.post-prose > * + * { margin-top: 1.05em; }
.post-prose > p:first-child::first-letter {
    float: left; margin: 7px 12px 0 0; font-size: 3.5em; font-weight: 800; line-height: .85; color: #ec008c; text-shadow: 3px 3px 0 rgba(0, 174, 239, .45);
}
.post-prose h2 { position: relative; margin-top: 1.9em; padding-left: 18px; font-size: 23px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); scroll-margin-top: 100px; }
.post-prose h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 4px; background: linear-gradient(180deg, #00aeef, #ec008c 55%, #ffde00); }
.post-prose h3 { margin-top: 1.5em; font-size: 18px; font-weight: 700; color: var(--ink); }
.post-prose strong { color: var(--ink); }
.post-prose a { font-weight: 600; color: var(--t1); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--t1) 35%, transparent); transition: text-decoration-color .2s; }
.post-prose a:hover { text-decoration-color: currentColor; }
.post-prose ul, .post-prose ol { display: grid; gap: 8px; padding: 0; list-style: none; }
.post-prose ul li { position: relative; padding-left: 32px; }
.post-prose ul li::before {
    content: "\f00c"; position: absolute; left: 0; top: .3em; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
    font: 900 10px/1 "Font Awesome 6 Free"; color: #fff; background: linear-gradient(135deg, var(--t1), var(--t2));
}
.post-prose ol { counter-reset: step; }
.post-prose ol li { position: relative; padding-left: 40px; counter-increment: step; }
.post-prose ol li::before {
    content: counter(step); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px;
    font-size: 12.5px; font-weight: 800; line-height: 1; color: var(--t1); background: var(--tsoft);
}
.post-prose blockquote { position: relative; margin: 1.6em 0; padding: 16px 20px 16px 62px; border-radius: 16px; background: linear-gradient(135deg, #fff8d6, #fff); border: 1px solid #fde68a; color: #5b4a0c; }
.post-prose blockquote::before {
    content: "\f0eb"; position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    font: 900 13px/1 "Font Awesome 6 Free"; color: #111; background: #ffde00; box-shadow: 0 0 0 5px rgba(255, 222, 0, .25);
}
.post-prose blockquote p { margin: 0; }
.post-prose blockquote strong { color: #3f3206; }
.post-prose code { padding: 2px 7px; border-radius: 6px; background: var(--line-soft); font-size: .88em; color: var(--ink); }
.post-prose img { border-radius: 16px; }
.post-prose hr { border: 0; height: 1px; background: var(--line); }
.table-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); }
.post-prose table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.post-prose th { padding: 11px 14px; font-weight: 700; text-align: left; color: #fff; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.post-prose td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.post-prose tr:nth-child(even) td { background: #fafafb; }
.post-prose td:first-child { font-weight: 600; color: var(--ink); }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line); }
.post-tags a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--tsoft); color: var(--t1); font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s; }
.post-tags a:hover { background: var(--t1); color: #fff; }
.post-author { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, var(--tsoft), #fff 70%); }
.post-author > div { flex: 1 1 260px; }
.post-author small { font-size: 11.5px; color: var(--muted); }
.post-author strong { display: block; font-size: 15px; color: var(--ink); }
.post-author p { margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.post-nav a { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); transition: border-color .2s, background .2s, transform .2s; }
.post-nav a:hover { border-color: var(--t1); background: var(--tsoft); transform: translateY(-2px); }
.post-nav small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.post-nav strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4; color: var(--ink); }
.pn-next { grid-column: 2; text-align: right; }

/* "Shop this article" */
.ps-card { padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ps-card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.ps-card h2 i { color: var(--red); }
.ps-card ul { display: grid; gap: 4px; }
.ps-card li a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; transition: background .2s; }
.ps-card li a:hover { background: var(--red-50); }
.ps-card img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff6ec; }
.ps-card strong { display: block; font-size: 13px; line-height: 1.3; color: var(--ink); }
.ps-card small { font-size: 12px; color: var(--muted); }
.ps-card small b { font-size: 13px; color: var(--red); }
.ps-card li i { font-size: 11px; color: var(--soft); transition: transform .2s; }
.ps-card li a:hover i { transform: translateX(3px); color: var(--red); }
.ps-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 9px; border-radius: 12px; background: var(--red-50); color: var(--red); font-size: 12.5px; font-weight: 700; }
.ps-all:hover { background: var(--red); color: #fff; }
.ps-help { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: start; gap: 6px; padding: 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); }
.ps-help::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .2) 1.3px, transparent 1.6px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); }
.ps-help-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 2px; border-radius: 12px; background: rgba(255, 255, 255, .18); font-size: 17px; }
.ps-help strong { font-size: 15px; }
.ps-help p { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.ps-help .btn-white { margin-top: 4px; color: #7c3aed; }

.post-related { margin-bottom: 30px; }

/* ---- Homepage "From our blog" ---- */
.home-blog { margin-top: 26px; }
.section-head h2.is-blog i { background-image: linear-gradient(180deg, #00aeef, #ec008c); }
.section-head h2.is-blog b { color: #ec008c; }

/* ---- Motion ---- */
:is(.blog-hero .blh-copy, .post-hero .post-hero-copy) > * { animation: hero-rise .7s var(--ease-out) both; }
:is(.blog-hero .blh-copy, .post-hero .post-hero-copy) > :nth-child(2) { animation-delay: .08s; }
:is(.blog-hero .blh-copy, .post-hero .post-hero-copy) > :nth-child(3) { animation-delay: .16s; }
:is(.blog-hero .blh-copy, .post-hero .post-hero-copy) > :nth-child(4) { animation-delay: .24s; }
:is(.blog-hero .blh-copy, .post-hero .post-hero-copy) > :nth-child(n+5) { animation-delay: .32s; }
.post-cover > img, .post-cover > .pc-art { animation: hero-rise .8s var(--ease-out) .15s both; }
.js :is(.page-blog, .page-post, .page-home) [data-reveal] .post-card { opacity: 0; }
.js :is(.page-blog, .page-post, .page-home) [data-reveal].is-visible .post-card { animation: card-rise .65s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }
.js .blog-cta[data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.js .blog-cta[data-reveal].is-visible { opacity: 1; translate: 0 0; }
@keyframes card-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ---- Blog: laptops, tablets, phones ---- */
@media (max-width: 1280px) {
    .post-layout.has-shop { grid-template-columns: 230px minmax(0, 1fr); }
    .post-shop { grid-column: 1 / -1; position: static; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
    .ps-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .blog-hero { grid-template-columns: minmax(0, 1fr); padding: 36px 34px; }
    .blh-art { display: none; }
    .blog-front { grid-template-columns: minmax(0, 1fr); }
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 30px 30px 38px; }
    .post-cover { max-width: 680px; }
    .post-layout, .post-layout.has-shop { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .post-side { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .post-toc:not([open]) { padding-block: 13px; }
    .post-shop { grid-column: auto; }
}
@media (max-width: 700px) {
    .blog-hero { padding: 28px 20px 26px; border-radius: 22px; }
    .blog-hero h1 { font-size: 30px; }
    .blog-hero p { font-size: 14px; }
    .blog-search button { padding: 0 16px; }
    .blh-stats { gap: 12px 20px; }
    .blh-stats strong { font-size: 19px; }
    .reg-mark { display: none; }
    .bf-feature { grid-template-columns: minmax(0, 1fr); }
    .bf-cover { min-height: 0; aspect-ratio: 1200 / 630; }
    .bf-body { padding: 18px 18px 20px; }
    .bf-title { font-size: 20px; }
    .bf-popular img { width: 70px; height: 48px; }
    .post-grid { grid-template-columns: minmax(0, 1fr); }
    .post-hero { padding: 22px 18px 30px; border-radius: 22px; }
    .post-hero h1 { font-size: 26px; }
    .post-lead { font-size: 14.5px; }
    .pm-sep { display: none; }
    .post-cover { margin-right: 8px; }
    .mr-c { translate: -8px -8px; }
    .mr-m { translate: 8px -3px; }
    .mr-y { translate: 3px 8px; }
    .post-side { grid-template-columns: minmax(0, 1fr); }
    .post-main { padding: 22px 18px; border-radius: 20px; }
    .post-prose { font-size: 15px; }
    .post-prose h2 { font-size: 20px; }
    .post-shop { grid-template-columns: minmax(0, 1fr); }
    .ps-card ul { grid-template-columns: minmax(0, 1fr); }
    .post-nav { grid-template-columns: minmax(0, 1fr); }
    .pn-next { grid-column: auto; text-align: left; }
    .blog-cta { padding: 24px 20px 24px 28px; }
    .bc-copy h2 { font-size: 19px; }
    .bc-buttons { width: 100%; }
    .bc-buttons .btn { flex: 1 1 200px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-ink, .ink-text, .reg-mark, .blh-sheet, .blh-pen, .be-art span, .misreg { animation: none !important; }
    .js :is(.page-blog, .page-post, .page-home) [data-reveal] .post-card, .js .blog-cta[data-reveal] { opacity: 1 !important; translate: none !important; animation: none !important; }
}

/* ==========================================================================
   Homepage product rows (Bestsellers, Trending Now, Newly Added)
   Coloured stages behind each product, category labels, rank numbers and livelier headings.
   Scoped to .home-shelf so product cards elsewhere keep their compact look.
   ========================================================================== */
.product-cat { display: none; }

/* ---- Headings ---- */
.home-shelf .section-head { margin-bottom: 16px; }
.home-shelf .section-head h2 { gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.home-shelf .section-head h2 i {
    --b1: #ffb620; --b2: #ef3b11;
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
    font-size: 18px; color: #fff; -webkit-background-clip: border-box; background-clip: border-box;
    background: linear-gradient(135deg, var(--b1), var(--b2));
    box-shadow: 0 10px 20px -10px var(--b2), inset 0 -3px 0 rgba(0, 0, 0, .1);
}
.home-shelf .section-head h2.is-best i { animation: shelf-flame 1.6s ease-in-out infinite; }
.home-shelf .section-head h2.is-best b { color: var(--c-orange); font-weight: inherit; }
.home-shelf .section-head h2.is-trending i { --b1: #f472b6; --b2: #db2777; animation: shelf-rise 2.4s ease-in-out infinite; }
.home-shelf .section-head h2.is-new i { --b1: #818cf8; --b2: #4f46e5; animation: shelf-twinkle 2.8s ease-in-out infinite; }
.home-shelf .section-head h2.is-blog i { --b1: #00aeef; --b2: #ec008c; }
/* Shop by Need uses the same badge heading */
.home-shelf .needs-head h2 { gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.home-shelf .needs-head h2 i {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 17px; color: #fff;
    background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 10px 20px -10px #ea580c, inset 0 -3px 0 rgba(0, 0, 0, .1);
    animation: shelf-rise 2.4s ease-in-out infinite;
}
.home-shelf .section-sub { margin-left: -24px; }

/* Featured / Top Rated / Most Popular: a pill glides to the chosen tab */
.home-shelf .tabs { position: relative; gap: 2px; padding: 4px; border-radius: 999px; background: #f1f1f4; }
.home-shelf .tabs::before {
    content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--gw, 0); border-radius: 999px;
    transform: translateX(var(--gx, 0)); background: linear-gradient(135deg, #2b2d36, var(--ink));
    box-shadow: 0 6px 14px -6px rgba(17, 19, 24, .55); transition: transform .35s var(--ease-out), width .35s var(--ease-out);
}
.home-shelf .tabs.is-gliding button.is-active { background: transparent; }
.home-shelf .tabs button { position: relative; z-index: 1; height: 30px; padding: 0 18px; background: transparent; font-size: 11.5px; font-weight: 600; transition: color .25s; }
.home-shelf .tabs button:hover { background: transparent; color: var(--red); }
.home-shelf .tabs button.is-active { color: #fff; }
.home-shelf .tabs:not(.is-gliding) button.is-active { background: var(--ink); }

.home-shelf .pill-link { height: 34px; padding: 0 16px; font-weight: 600; background: #fff; transition: background .2s, color .2s, border-color .2s; }
.home-shelf .pill-link i { transition: transform .2s var(--ease); }
.home-shelf .pill-link:hover { border-color: var(--red); background: var(--red); color: #fff; }
.home-shelf .pill-link:hover i { transform: translateX(3px); }

/* ---- Cards ---- */
.home-shelf .rail-track { padding: 8px 4px 28px; margin: -8px -4px -28px; }
.home-shelf .product-card {
    --tone: #2563eb;
    border: 1px solid #ececf0; border-radius: 18px; background: #fff;
    transition: border-color .25s, box-shadow .3s, transform .3s var(--ease);
}
.home-shelf :is(.rail-track, .needs-track) > .product-card:nth-child(6n+2) { --tone: #db2777; }
.home-shelf :is(.rail-track, .needs-track) > .product-card:nth-child(6n+3) { --tone: #d97706; }
.home-shelf :is(.rail-track, .needs-track) > .product-card:nth-child(6n+4) { --tone: #16a34a; }
.home-shelf :is(.rail-track, .needs-track) > .product-card:nth-child(6n+5) { --tone: #7c3aed; }
.home-shelf :is(.rail-track, .needs-track) > .product-card:nth-child(6n+6) { --tone: #0d9488; }
.home-shelf .product-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 38px -26px var(--tone), 0 2px 8px rgba(17, 19, 24, .05); }

/* Photo: a soft colour line under it and a gentle zoom on hover */
.home-shelf .product-media { margin-bottom: 11px; }
.home-shelf .product-media::after {
    content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 40%, #fff));
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.home-shelf .product-card:hover .product-media::after { transform: scaleX(1); }

/* Tags and discount sticker */
.home-shelf .card-badges { top: 13px; left: 13px; gap: 5px; }
.home-shelf .card-tag, .home-shelf .badge-off { padding: 5px 8px; font-size: 10px; box-shadow: 0 4px 10px -4px rgba(17, 19, 24, .35); }
.home-shelf .badge-off {
    position: relative; overflow: hidden; font-weight: 700;
    background: linear-gradient(135deg, #22c55e, #15803d);
}
.home-shelf .badge-off::after, .home-shelf .card-tag.is-new::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%); animation: shelf-shine 3.6s ease-in-out infinite;
}
.home-shelf .card-tag { position: relative; overflow: hidden; }
.home-shelf .card-tag.is-new::after { animation-delay: 1.2s; }
.home-shelf .card-tag.rank-1 { background: linear-gradient(135deg, #fde047, #f59e0b); color: #5b3a00; }
.home-shelf .card-tag.rank-2 { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.home-shelf .card-tag.rank-3 { background: linear-gradient(135deg, #fdba74, #b45309); color: #fff; }
.home-shelf .card-tag.rank-1 i { animation: shelf-crown 2.4s ease-in-out infinite; }
.home-shelf .wish-form { top: 12px; right: 12px; }
.home-shelf .wish-btn { box-shadow: 0 4px 12px -4px rgba(17, 19, 24, .3); }

/* Text, price and cart button */
.home-shelf .product-body { padding: 0 5px; grid-template-areas: "cat cat" "name name" "desc desc" "price cart"; row-gap: 1px; }
.home-shelf .product-cat {
    grid-area: cat; display: inline-flex; align-items: center; gap: 5px; justify-self: start; margin-bottom: 3px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone);
}
.home-shelf .product-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.home-shelf .product-name { font-size: 13px; font-weight: 700; }
.home-shelf .product-card:hover .product-name a { color: var(--tone); }
.home-shelf .product-desc { font-size: 11px; color: var(--muted); }
.home-shelf .product-price { margin-top: 6px; align-self: end; }
.home-shelf .product-price strong { font-size: 16.5px; font-weight: 800; }
.home-shelf .product-body > form { align-self: end; }
.home-shelf .cart-btn {
    position: relative; width: 38px; height: 38px; border-radius: 12px; font-size: 15px;
    background: linear-gradient(135deg, #f0323b, var(--red) 55%, var(--red-dark));
    box-shadow: 0 8px 16px -8px rgba(209, 10, 18, .85);
    transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}
.home-shelf .cart-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--red); opacity: 0; }
.home-shelf .product-card:hover .cart-btn::after { animation: shelf-ping 1.4s ease-out infinite; }
.home-shelf .cart-btn:hover { transform: translateY(-2px) rotate(-6deg); filter: brightness(1.06); }

/* Cards rise in one after another the first time a row scrolls into view */
.js .home-shelf[data-reveal] .rail-track > .product-card { opacity: 0; }
.js .home-shelf[data-reveal].is-visible .rail-track > .product-card { animation: card-rise .6s var(--ease-out) both; }
.js .home-shelf[data-reveal].is-visible .rail-track > .product-card:nth-child(2) { animation-delay: .07s; }
.js .home-shelf[data-reveal].is-visible .rail-track > .product-card:nth-child(3) { animation-delay: .14s; }
.js .home-shelf[data-reveal].is-visible .rail-track > .product-card:nth-child(4) { animation-delay: .21s; }
.js .home-shelf[data-reveal].is-visible .rail-track > .product-card:nth-child(5) { animation-delay: .28s; }
.js .home-shelf[data-reveal].is-visible .rail-track > .product-card:nth-child(n+6) { animation-delay: .35s; }

@keyframes shelf-flame { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }
@keyframes shelf-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes shelf-twinkle { 0%, 100% { transform: rotate(0) scale(1); } 40% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.02); } }
@keyframes shelf-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes shelf-crown { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(-8deg); } }
@keyframes shelf-ping { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }

/* Tablets and phones */
@media (max-width: 767px) {
    .home-shelf .section-head h2 { font-size: 18px; }
    .home-shelf .section-head h2 i, .home-shelf .needs-head h2 i { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; }
    .home-shelf .needs-head h2 { font-size: 18px; }
    .home-shelf .section-sub { margin-left: 0; }
    /* Tabs share the full width evenly, so the pill never floats in an empty bar */
    .home-shelf .tabs { display: flex; width: 100%; }
    .home-shelf .tabs button { flex: 1 1 0; min-width: 0; padding: 0 10px; }
    .home-shelf .product-card { border-radius: 16px; }
    .home-shelf .product-name { font-size: 12.5px; }
    .home-shelf .product-price strong { font-size: 15px; }
    .home-shelf .cart-btn { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-shelf .section-head h2 i, .home-shelf .needs-head h2 i, .home-shelf .badge-off::after, .home-shelf .card-tag::after, .home-shelf .card-tag i, .home-shelf .cart-btn::after { animation: none !important; }
    .js .home-shelf[data-reveal] .rail-track > .product-card { opacity: 1 !important; animation: none !important; }
}

/* ==========================================================================
   Homepage "From our blog": one big article with its title on the picture, three more beside it
   ========================================================================== */
.hb-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.hb-grid.is-single { grid-template-columns: minmax(0, 1fr); }

.hb-lead {
    position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
    min-height: 400px; border-radius: 24px; background: linear-gradient(135deg, var(--t1), var(--t2));
    box-shadow: 0 24px 44px -34px rgba(17, 19, 24, .6);
}
.hb-lead > img, .hb-lead > .pc-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hb-lead::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 12, 20, 0) 25%, rgba(10, 12, 20, .55) 55%, rgba(10, 12, 20, .9) 100%);
}
.hb-lead:hover > img { transform: scale(1.06); }
.hb-lead-copy { position: relative; display: grid; justify-items: start; gap: 10px; width: 100%; padding: 26px 28px 24px; color: #fff; }
.hb-chip {
    position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    font-size: 11.5px; font-weight: 700; color: #fff; transition: background .2s, color .2s;
}
.hb-chip:hover { background: #fff; color: var(--t1); }
.hb-lead h3 { max-width: 620px; font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.hb-lead h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hb-lead-copy > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 560px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.hb-lead-foot { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.hb-lead-foot .author-dot { border-color: transparent; }
.hb-read {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
    background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; transition: background .25s, color .25s;
}
.hb-read i { transition: transform .25s var(--ease); }
.hb-lead:hover .hb-read { background: var(--red); color: #fff; }
.hb-lead:hover .hb-read i { transform: translateX(4px); }

.hb-list { display: grid; grid-auto-rows: 1fr; gap: 12px; counter-reset: hb; }
.hb-item {
    position: relative; display: grid; grid-template-columns: 38% minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 10px 16px 10px 10px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
    transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.hb-item:hover { transform: translateX(-4px); border-color: transparent; box-shadow: 0 20px 34px -26px var(--t1); }
.hb-thumb { position: relative; align-self: stretch; min-height: 96px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.hb-thumb img, .hb-thumb .pc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.hb-thumb .pc-art { font-size: 30px; }
.hb-item:hover .hb-thumb img { transform: scale(1.08); }
.hb-thumb::after {
    counter-increment: hb; content: "0" counter(hb); position: absolute; left: 8px; top: 8px; display: grid; place-items: center;
    min-width: 26px; height: 26px; padding: 0 6px; border-radius: 9px; background: rgba(255, 255, 255, .92); color: var(--t1); font-size: 11px; font-weight: 800;
}
.hb-text { display: grid; gap: 4px; min-width: 0; }
.hb-topic { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t1); }
.hb-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--ink); transition: color .2s; }
.hb-title::after { content: ""; position: absolute; inset: 0; }
.hb-item:hover .hb-title { color: var(--t1); }
.hb-text > small:last-child { font-size: 11.5px; color: var(--muted); }
.hb-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tsoft); color: var(--t1); font-size: 12px; transition: background .25s, color .25s, transform .25s var(--ease); }
.hb-item:hover .hb-go { background: var(--t1); color: #fff; transform: translateX(3px); }

/* Scroll-in: the big article rises, the list slides in one by one */
.js .home-blog[data-reveal] .hb-lead { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); }
.js .home-blog[data-reveal] .hb-item { opacity: 0; translate: 36px 0; transition: opacity .6s var(--ease-out), translate .6s var(--ease-out), transform .3s var(--ease), box-shadow .3s, border-color .3s; transition-delay: calc(var(--i) * 110ms + 200ms), calc(var(--i) * 110ms + 200ms), 0s, 0s, 0s; }
.js .home-blog[data-reveal].is-visible :is(.hb-lead, .hb-item) { opacity: 1; translate: 0 0; }

@media (max-width: 1023px) {
    .hb-grid { grid-template-columns: minmax(0, 1fr); }
    .hb-lead { min-height: 340px; }
}
@media (max-width: 600px) {
    .hb-lead { min-height: 300px; border-radius: 20px; }
    .hb-lead::before { background: linear-gradient(180deg, rgba(10, 12, 20, .1) 0%, rgba(10, 12, 20, .72) 38%, rgba(10, 12, 20, .93) 100%); }
    .hb-lead-copy { padding: 20px 18px 18px; }
    .hb-lead h3 { font-size: 19px; }
    .hb-lead-foot > span:nth-child(2) { font-size: 11px; }
    .hb-item { grid-template-columns: 34% minmax(0, 1fr); gap: 12px; padding-right: 12px; }
    .hb-go { display: none; }
    .hb-thumb { min-height: 84px; }
    .hb-title { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .home-blog[data-reveal] :is(.hb-lead, .hb-item) { opacity: 1 !important; translate: none !important; }
}

/* ==========================================================================
   Header search: live results
   ========================================================================== */
.search.is-suggesting { border-color: var(--red-200); }
.search.is-loading::after {
    content: ""; position: absolute; left: 24px; right: 24px; bottom: -1.5px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--red), transparent); background-size: 200% 100%; animation: ss-load .9s linear infinite;
}
@keyframes ss-load { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.search-suggest {
    position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 10px);
    max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain; padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 26px 50px -18px rgba(17, 19, 24, .35), 0 4px 12px rgba(17, 19, 24, .05);
    animation: sc-open .22s var(--ease-out);
}
.search-suggest[hidden] { display: none; }
.ss-group + .ss-group { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.ss-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
.ss-head i { color: var(--red); }
.ss-head.is-blog i { color: #ec008c; }
.ss-head span { padding: 1px 7px; border-radius: 999px; background: var(--line-soft); font-size: 10.5px; letter-spacing: 0; color: var(--muted); }
.ss-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 12px 7px 7px; border-radius: 14px; transition: background .15s; }
.ss-item:hover, .ss-item.is-active { background: var(--red-50); }
.ss-item img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #f3f3f5; }
.ss-post { grid-template-columns: 64px minmax(0, 1fr) auto; }
.ss-post img, .ss-noimg { width: 64px; height: 40px; border-radius: 9px; object-fit: cover; }
.ss-noimg { display: grid; place-items: center; background: #fde6f1; color: #ec008c; }
.ss-text { display: grid; gap: 1px; min-width: 0; }
.ss-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ss-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.ss-price { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ss-go { font-size: 12px; color: var(--soft); transition: transform .2s var(--ease), color .2s; }
.ss-item:hover .ss-go, .ss-item.is-active .ss-go { transform: translateX(3px); color: #ec008c; }
.ss-empty { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
.ss-empty > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--red-50); color: var(--red); }
.ss-empty strong { display: block; font-size: 14px; color: var(--ink); }
.ss-empty small { font-size: 12.5px; color: var(--muted); }
.ss-all {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 11px; border-radius: 14px;
    background: var(--line-soft); font-size: 13px; font-weight: 700; color: var(--ink); transition: background .2s, color .2s;
}
.ss-all:hover, .ss-all.is-active { background: var(--red); color: #fff; }
@media (max-width: 767px) {
    .search-suggest { top: calc(100% + 8px); max-height: 64vh; border-radius: 18px; }
    .ss-price { font-size: 12.5px; }
}

/* Search results page: blog articles under the products */
.search-blog { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--line); }
.search-blog .bl-head h2 i { background: linear-gradient(135deg, #00aeef, #ec008c); }

/* ==========================================================================
   Customer reviews page: a warm "wall of love" (amber, pink, violet) with twinkling stars
   ========================================================================== */
.page-reviews main { padding-bottom: 50px; }

/* ---- Banner with the score ---- */
.rv-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; align-items: center;
    margin-bottom: 20px; padding: 46px 50px; border-radius: 28px; color: #fff;
    background:
        radial-gradient(circle at 12% 110%, rgba(255, 255, 255, .22) 0 150px, transparent 151px),
        radial-gradient(circle at 105% -10%, rgba(255, 255, 255, .18) 0 190px, transparent 191px),
        linear-gradient(120deg, #f59e0b 0%, #ec4899 52%, #7c3aed 100%);
}
.rv-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1.3px, transparent 1.6px); background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(100deg, #000, transparent 45%); mask-image: linear-gradient(100deg, #000, transparent 45%);
}
.rv-twinkle { position: absolute; z-index: -1; color: rgba(255, 255, 255, .7); animation: rv-twinkle 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes rv-twinkle { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.rv-kicker {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.rv-kicker i { color: #fff; animation: heart-beat 1.6s ease-in-out infinite; }
.rv-copy h1 { margin: 14px 0 10px; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.rv-copy h1 span { display: block; color: #fff4c7; }
.rv-copy p { max-width: 520px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.rv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rv-actions .btn-white { color: #db2777; }
.rv-copy > * { animation: hero-rise .7s var(--ease-out) both; }
.rv-copy > :nth-child(2) { animation-delay: .08s; }
.rv-copy > :nth-child(3) { animation-delay: .16s; }
.rv-copy > :nth-child(4) { animation-delay: .24s; }

.rv-score {
    padding: 22px 24px; border-radius: 24px; color: var(--text); background: rgba(255, 255, 255, .96);
    box-shadow: 0 30px 60px -30px rgba(76, 29, 149, .6);
}
.rv-score-top { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px dashed #f1d5e6; }
.rv-score-top > strong {
    font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
    background: linear-gradient(135deg, #f59e0b, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rv-score-top small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.rv-stars-big { position: relative; display: inline-flex; font-size: 22px; }
.rv-stars-base, .rv-stars-fill { display: inline-flex; gap: 4px; }
.rv-stars-base { color: #f3e8ee; }
.rv-stars-fill { position: absolute; inset: 0 auto 0 0; width: 0; overflow: hidden; white-space: nowrap; color: #f59e0b; transition: width 1.3s var(--ease-out) .2s; }
.rv-score.is-visible .rv-stars-fill, .no-js .rv-stars-fill { width: var(--fill); }
.rv-bars { display: grid; gap: 6px; }
.rv-bars a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 3px 6px; border-radius: 10px; transition: background .2s; }
.rv-bars a:hover, .rv-bars a.is-active { background: #fdf2f8; }
.rv-bar-label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rv-bar-label i { font-size: 10px; color: #f59e0b; }
.rv-bar { height: 9px; border-radius: 999px; background: #f7eef3; overflow: hidden; }
.rv-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #ec4899); transition: width 1s var(--ease-out); }
.rv-score.is-visible .rv-bar span { width: var(--w); }
.rv-bars li:nth-child(2) .rv-bar span { transition-delay: .1s; }
.rv-bars li:nth-child(3) .rv-bar span { transition-delay: .2s; }
.rv-bars li:nth-child(4) .rv-bar span { transition-delay: .3s; }
.rv-bars li:nth-child(5) .rv-bar span { transition-delay: .4s; }
.rv-bar-count { font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }
.rv-first { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; text-align: center; }
.rv-first strong { font-size: 18px; color: var(--ink); }
.rv-first p { font-size: 13px; color: var(--muted); }
.rv-first-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; font-size: 24px; background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 14px 26px -12px #ec4899; animation: bob 4s ease-in-out infinite; }

/* ---- Filters ---- */
.rv-filters { display: grid; gap: 10px; margin-bottom: 20px; }
.rv-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.rv-chips::-webkit-scrollbar { display: none; }
.rv-chip {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink);
    transition: transform .2s var(--ease), border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.rv-chip i { font-size: 11px; color: #f59e0b; }
.rv-chip.is-topic i { color: #7c3aed; }
.rv-chip b { padding: 1px 7px; border-radius: 999px; background: var(--line-soft); font-size: 11px; color: var(--muted); }
.rv-chip:hover { transform: translateY(-2px); border-color: #f9a8d4; }
.rv-chip.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 10px 20px -12px #ec4899; }
.rv-chip.is-topic.is-active { background: linear-gradient(135deg, #8b5cf6, #db2777); }
.rv-chip.is-active i { color: #fff; }
.rv-chip.is-active b { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---- Spotlight ---- */
.rv-spotlight {
    position: relative; overflow: hidden; isolation: isolate; margin: 0 0 22px; padding: 30px 36px 28px; border-radius: 26px; color: #fff;
    background: radial-gradient(circle at 95% 0%, rgba(255, 255, 255, .2) 0 120px, transparent 121px), linear-gradient(125deg, #7c3aed, #c026d3 55%, #ec4899);
    box-shadow: 0 30px 50px -34px #7c3aed;
}
.rv-spot-quote { position: absolute; z-index: -1; right: 28px; bottom: -26px; font-size: 170px; color: rgba(255, 255, 255, .12); }
.rv-spot-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rv-spotlight .rv-stars { display: flex; margin-bottom: 10px; font-size: 16px; }
.rv-spotlight .rv-stars i { color: #fde68a; }
.rv-spotlight:has(.rv-spot-media) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: center; }
.rv-spot-media { display: grid; gap: 10px; }
.rv-spot-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; border: 4px solid rgba(255, 255, 255, .85); background: #fff; box-shadow: 0 24px 40px -20px rgba(49, 10, 90, .8); transform: rotate(2deg); transition: transform .4s var(--ease-out); }
.rv-spot-photo:hover { transform: rotate(0) scale(1.02); }
.rv-spot-photo img { width: 100%; height: 100%; object-fit: cover; }
.rv-spot-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(17, 19, 24, .7); color: #fff; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); }
.rv-spot-product { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--ink); transition: transform .25s var(--ease); }
.rv-spot-product:hover { transform: translateY(-2px); }
.rv-spot-product img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.rv-spot-product span { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.rv-spot-product small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a21caf; }
.rv-spot-product strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rv-spot-product > i { font-size: 12px; color: #a21caf; }
.rv-spotlight blockquote { margin: 0; max-width: 900px; font-size: 20px; font-weight: 600; line-height: 1.6; }
.rv-spotlight figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.rv-spotlight figcaption strong { display: block; font-size: 15px; }
.rv-spotlight figcaption small { font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.js .rv-spotlight[data-reveal] { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.js .rv-spotlight[data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* ---- Wall of review cards (masonry) ---- */
/* Staggered columns: each card is as tall as its words and photos, so no card is left half empty */
.rv-wall { columns: 4 270px; column-gap: 18px; margin-bottom: 18px; }
.rv-card {
    --tone: #d97706; --tint: #fff7e6;
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; break-inside: avoid; margin: 0 0 18px; padding: 20px 20px 16px; border-radius: 20px;
    background: linear-gradient(160deg, var(--tint), #fff 62%); border: 1px solid color-mix(in srgb, var(--tone) 18%, transparent);
    transition: transform .3s var(--ease), box-shadow .3s;
}
.rv-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 40%, #fff)); }
.rv-card::after { content: "\f10e"; position: absolute; z-index: -1; right: 16px; top: 12px; font: 900 44px/1 "Font Awesome 6 Free"; color: color-mix(in srgb, var(--tone) 12%, transparent); }
.rv-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 24px 40px -28px var(--tone); }
.rv-amber { --tone: #d97706; --tint: #fff7e6; }
.rv-pink { --tone: #db2777; --tint: #fdf0f6; }
.rv-violet { --tone: #7c3aed; --tint: #f5f0ff; }
.rv-teal { --tone: #0d9488; --tint: #eaf8f6; }
.rv-blue { --tone: #2563eb; --tint: #eef4ff; }
.rv-coral { --tone: #ea580c; --tint: #fff1ea; }
.rv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rv-stars { display: inline-flex; gap: 3px; font-size: 14px; color: #f59e0b; }
.rv-stars .is-off { color: #e5e7eb; }
.rv-card-top time { font-size: 11.5px; color: var(--muted); }
.rv-title { margin-bottom: 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.rv-card blockquote { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #3b3d44; }
.rv-card figcaption { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--tone) 22%, transparent); }
.rv-avatar {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    color: #fff; font-size: 13px; font-weight: 800; background: var(--avatar, var(--tone)); box-shadow: 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--avatar, var(--tone)) 35%, transparent);
}
.rv-avatar.is-lg { width: 52px; height: 52px; font-size: 16px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.rv-person { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.rv-person strong { font-size: 13.5px; color: var(--ink); }
.rv-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.rv-product { flex: none; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, #fff); color: var(--tone); font-size: 11px; font-weight: 700; transition: background .2s, color .2s; }
.rv-product:hover { background: var(--tone); color: #fff; }
.js .page-reviews .rv-wall[data-reveal] .rv-card { opacity: 0; }
.js .page-reviews .rv-wall[data-reveal].is-visible .rv-card { animation: card-rise .6s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }

.rv-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; padding: 28px 16px; border-radius: 22px; background: #fff; border: 1px dashed #f9a8d4; text-align: left; }
.rv-none strong { display: block; font-size: 16px; color: var(--ink); }
.rv-none small { font-size: 13px; color: var(--muted); }

/* ---- Invite ---- */
.rv-invite {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 14px; padding: 22px 26px; border-radius: 24px;
    background: linear-gradient(120deg, #fff7e6, #fdf0f6 55%, #f5f0ff); border: 1px solid #fbcfe8;
}
.rv-invite-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; font-size: 22px; background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 14px 24px -12px #ec4899; }
.rv-invite > div { flex: 1 1 280px; }
.rv-invite h2 { font-size: 19px; font-weight: 800; color: var(--ink); }
.rv-invite p { font-size: 13.5px; color: var(--muted); }
.js .rv-invite[data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.js .rv-invite[data-reveal].is-visible { opacity: 1; translate: 0 0; }

@media (max-width: 1023px) {
    .rv-hero { grid-template-columns: minmax(0, 1fr); padding: 34px 30px; }
}
@media (max-width: 600px) {
    .rv-hero { padding: 26px 18px 20px; border-radius: 22px; }
    .rv-copy h1 { font-size: 29px; }
    .rv-copy p { font-size: 14px; }
    .rv-actions .btn { flex: 1 1 100%; justify-content: center; }
    .rv-score { padding: 18px; }
    .rv-score-top > strong { font-size: 48px; }
    .rv-spotlight { padding: 24px 20px 22px; }
    .rv-spotlight blockquote { font-size: 16.5px; }
    .rv-invite { padding: 20px 18px; }
    .rv-invite .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .rv-twinkle, .rv-kicker i, .rv-first-icon { animation: none !important; }
    .js .page-reviews .rv-wall[data-reveal] .rv-card, .js .rv-spotlight[data-reveal], .js .rv-invite[data-reveal] { opacity: 1 !important; translate: none !important; animation: none !important; }
    .rv-stars-fill { width: var(--fill) !important; }
    .rv-bar span { width: var(--w) !important; }
}

/* Homepage reviews: "See all reviews" in the bottom-left corner of the purple card, the rest stays centred */
.reviews-intro > .reviews-tag { margin-top: auto; }
.reviews-all {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); backdrop-filter: blur(6px);
    font-size: 13px; font-weight: 700; color: #fff; transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--ease);
}
.reviews-all i { transition: transform .25s var(--ease); }
.reviews-all:hover { background: #fff; color: #5b21b6; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .45); transform: translateY(-2px); }
.reviews-all:hover i { transform: translateX(4px); }
.reviews-intro .btn-white { border-radius: 999px; }
.reviews-intro .btn-white { margin-bottom: 18px; } /* keeps a gap above the corner link on short cards */

/* ---- Customer photo gallery ---- */
.rv-gallery { margin-bottom: 22px; }
.rv-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rv-sec-head h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--ink); }
.rv-sec-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; font-size: 15px; background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 10px 18px -10px #ec4899; }
.rv-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.rv-tile {
    position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 18px; background: #f3f3f5;
    box-shadow: 0 10px 22px -18px rgba(17, 19, 24, .6); transition: transform .3s var(--ease), box-shadow .3s;
}
.rv-tile:first-child { grid-column: span 2; grid-row: span 2; }
.rv-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.rv-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -22px #db2777; }
.rv-tile:hover img { transform: scale(1.08); }
.rv-tile-info {
    position: absolute; inset: auto 0 0; display: grid; gap: 1px; padding: 26px 12px 10px; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(17, 19, 24, .78)); transform: translateY(40%); opacity: 0; transition: transform .35s var(--ease-out), opacity .35s;
}
.rv-tile:first-child .rv-tile-info, .rv-tile:hover .rv-tile-info, .rv-tile:focus-visible .rv-tile-info { transform: none; opacity: 1; }
.rv-tile-info .rv-stars { font-size: 11px; }
.rv-tile-info strong { font-size: 13px; }
.rv-tile-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: rgba(255, 255, 255, .8); }
.rv-tile-zoom { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12px; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s var(--ease); }
.rv-tile:hover .rv-tile-zoom { opacity: 1; transform: none; }
.js .rv-gallery[data-reveal] .rv-tile { opacity: 0; }
.js .rv-gallery[data-reveal].is-visible .rv-tile { animation: rv-pop .55s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes rv-pop { from { opacity: 0; transform: scale(.85) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* ---- Reviewed product at the top of a card ---- */
.rv-prod {
    display: flex; align-items: center; gap: 10px; margin: -6px -6px 14px; padding: 8px 12px 8px 8px; border-radius: 14px;
    background: rgba(255, 255, 255, .85); border: 1px solid color-mix(in srgb, var(--tone) 16%, transparent); transition: background .2s, transform .25s var(--ease);
}
.rv-prod:hover { background: #fff; transform: translateY(-1px); }
.rv-prod img { flex: none; width: 46px; height: 46px; border-radius: 11px; object-fit: cover; background: #f3f3f5; }
.rv-prod span { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.rv-prod small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
.rv-prod strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--ink); }
.rv-prod > i { flex: none; font-size: 11px; color: var(--tone); transition: transform .2s var(--ease); }
.rv-prod:hover > i { transform: translateX(3px); }
.rv-card:has(.rv-prod)::after { top: 76px; }

/* ---- Customer photos inside a card ---- */
.rv-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.rv-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 0 0 14px; }
.rv-videos video { display: block; width: 100%; max-height: 260px; border-radius: 14px; background: #111318; }
.rv-photos.is-one { grid-template-columns: minmax(0, 1fr); }
.rv-photos.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-photos.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-photos a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #f3f3f5; }
.rv-photos.is-one a { aspect-ratio: 16 / 10; }
.rv-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.rv-photos a:hover img { transform: scale(1.1); }
.rv-photos a::after { content: "\f00e"; position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 900 10px/1 "Font Awesome 6 Free"; color: var(--ink); background: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .2s; }
.rv-photos a:hover::after { opacity: 1; }
.rv-chip.is-photo i { color: #db2777; }

/* ---- Photo pop-up ---- */
.plb { width: min(92vw, 860px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 22px; background: #fff; overflow: visible; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6); }
.plb[open] { animation: dialog-in .3s var(--ease-out); }
.plb::backdrop { background: rgba(10, 12, 20, .8); backdrop-filter: blur(4px); }
.plb-frame { position: relative; }
.plb-pic { position: relative; overflow: hidden; border-radius: 22px 22px 0 0; background: #111318; cursor: zoom-in; }
.plb-pic img { user-select: none; -webkit-user-drag: none; }
.plb:not(:has(.plb-caption:not([hidden]))) .plb-pic { border-radius: 22px; }
.plb-frame img { display: block; width: 100%; max-height: 74vh; object-fit: contain; border-radius: 22px 22px 0 0; background: #111318; }
.plb-frame img.from-right { animation: pg-in-right .45s var(--ease-out); }
.plb-frame img.from-left { animation: pg-in-left .45s var(--ease-out); }
.plb .pg-nav.is-prev { left: -21px; }
.plb .pg-nav.is-next { right: -21px; }
.plb .pg-nav[hidden] { display: none; }
.plb-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 18px 16px; }
.plb-caption[hidden] { display: none; }
.plb-caption .rv-stars { font-size: 13px; }
.plb-caption p { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.plb-caption strong { font-size: 13.5px; color: var(--ink); }
.plb-caption a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--red-50); color: var(--red); font-size: 12.5px; font-weight: 700; }
.plb-caption a:hover { background: var(--red); color: #fff; }
.plb:not(:has(.plb-caption:not([hidden]))) .plb-frame img { border-radius: 22px; }

/* ---- Review form: photos ---- */
.rf-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rf-label span { font-weight: 400; color: var(--muted); }
.rf-photos .rf-drop {
    position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(120deg, #fff7e6, #fdf0f6); border: 1.5px dashed #f9a8d4; font-weight: 400; transition: border-color .2s, background .2s;
}
.rf-photos .rf-drop:hover, .rf-photos .rf-drop:focus-within { border-color: #db2777; background: #fdf0f6; }
.rf-drop-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-size: 16px; background: linear-gradient(135deg, #f59e0b, #ec4899); }
.rf-drop strong { display: block; font-size: 13.5px; color: var(--ink); }
.rf-drop small { font-size: 11.5px; color: var(--muted); }
.rf-photos .rf-drop input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.rf-previews { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.rf-previews:empty { display: none; }
.rf-thumb { width: 58px; height: 58px; overflow: hidden; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 6px 14px -8px rgba(17, 19, 24, .5); animation: rv-pop .4s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.rf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rf-count { font-size: 12px; font-weight: 600; color: #16a34a; }

/* ---- Product page reviews: photos ---- */
.pr-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.pr-photos a { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 12px; background: #f3f3f5; }
.pr-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.pr-photos a:hover img { transform: scale(1.1); }

@media (max-width: 1023px) {
    .rv-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rv-spotlight:has(.rv-spot-media) { grid-template-columns: minmax(0, 1fr); }
    .rv-spot-media { max-width: 420px; }
}
@media (max-width: 600px) {
    .rv-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .rv-tile { border-radius: 14px; }
    .rv-tile:not(:first-child) .rv-tile-info { display: none; }
    .rv-sec-head h2 { font-size: 17px; }
    .plb .pg-nav.is-prev { left: 8px; }
    .plb .pg-nav.is-next { right: 8px; }
    .plb .pg-lb-close { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .rv-gallery[data-reveal] .rv-tile { opacity: 1 !important; animation: none !important; }
}

/* Homepage review cards: the reviewed product with its picture */
.review-product.has-img { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px 3px 3px; white-space: nowrap; }
.review-product.has-img img { flex: none; width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }

/* ==========================================================================
   Chat assistant (partials/assistant.blade.php, assets/js/assistant.js)
   The one helper in the corner (it replaces the WhatsApp button while it is
   switched on); the chat window opens from the corner.
   ========================================================================== */
.asst {
    /* Colours from Admin > Chat Assistant > Appearance (set on the element); these are the defaults */
    --asst-c1: #d10a12; --asst-c2: #6d28d9; --asst-head: #151a27; --asst-bg: #f6f6f8;
    /* Browsers without color-mix(): plain versions of the same colours */
    --asst-grad: linear-gradient(135deg, var(--asst-c1) 0%, var(--asst-c1) 40%, var(--asst-c2) 100%);
    --asst-dark: var(--asst-head);
    --asst-user: var(--asst-c1);
    --asst-soft: #fbd0d3; --asst-tint: #fdf3f4; --asst-deep: #a9070d; --asst-mid: #db2777;
    --asst-ring: rgba(209, 10, 18, .4); --asst-shadow: rgba(157, 23, 77, .7);
    font-family: var(--font);
}
@supports (color: color-mix(in srgb, red, blue)) {
    .asst {
        --asst-grad: linear-gradient(135deg, color-mix(in srgb, var(--asst-c1) 72%, #fff) 0%, var(--asst-c1) 38%, color-mix(in srgb, var(--asst-c1) 55%, var(--asst-c2)) 72%, var(--asst-c2) 100%);
        --asst-dark: linear-gradient(125deg, var(--asst-head) 0%, color-mix(in srgb, var(--asst-head) 82%, var(--asst-c2)) 55%, color-mix(in srgb, var(--asst-head) 72%, var(--asst-c1)) 100%);
        --asst-user: linear-gradient(135deg, color-mix(in srgb, var(--asst-c1) 80%, #fff), var(--asst-c1));
        --asst-soft: color-mix(in srgb, var(--asst-c1) 22%, #fff);
        --asst-tint: color-mix(in srgb, var(--asst-c1) 6%, #fff);
        --asst-deep: color-mix(in srgb, var(--asst-c1) 78%, #000);
        --asst-mid: color-mix(in srgb, var(--asst-c1) 50%, var(--asst-c2));
        --asst-ring: color-mix(in srgb, var(--asst-c1) 40%, transparent);
        --asst-shadow: color-mix(in srgb, var(--asst-c1) 55%, transparent);
    }
}
.asst-launcher {
    position: fixed; z-index: 51; right: 24px; bottom: 24px;
    display: flex; align-items: center; height: 60px; max-width: 60px; overflow: hidden; padding: 0;
    border: 0; border-radius: 999px; color: #fff; white-space: nowrap; cursor: pointer;
    background: var(--asst-grad);
    box-shadow: 0 14px 28px -10px var(--asst-shadow), inset 0 -3px 0 rgba(0, 0, 0, .1);
    transition: max-width .55s var(--ease-out), box-shadow .3s, transform .25s var(--ease), opacity .2s;
    animation: asst-pop .7s cubic-bezier(.34, 1.56, .64, 1) 1.1s both;
}
.asst-launcher::after { /* soft ring that breathes now and then */
    content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--asst-ring);
    animation: asst-ring 4.5s ease-out 3s infinite; pointer-events: none;
}
.asst-launcher-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; font-size: 24px; }
.asst-launcher-label { padding: 0 22px 0 0; font-size: 14px; font-weight: 700; opacity: 0; transform: translateX(10px); transition: opacity .25s, transform .4s var(--ease-out); }
.asst-launcher:focus-visible { outline: 3px solid var(--asst-c1); outline-offset: 4px; max-width: 280px; }
.asst-launcher:focus-visible .asst-launcher-label { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
    .asst-launcher:hover { max-width: 280px; box-shadow: 0 18px 34px -12px var(--asst-shadow); }
    .asst-launcher:hover .asst-launcher-label { opacity: 1; transform: none; transition-delay: .12s; }
}
.asst-launcher:active { transform: scale(.97); }
body.asst-is-open .asst-launcher { opacity: 0; pointer-events: none; }

.asst-avatar {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
    font-size: 17px; color: #fff; background: var(--asst-grad); box-shadow: 0 6px 14px -6px var(--asst-shadow);
}
.asst-avatar-sm { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; box-shadow: none; }

/* The owner's picture instead of the icon */
.asst-avatar img, .asst-launcher-icon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.asst.has-photo .asst-launcher-icon { padding: 4px; }
.asst.has-photo .asst-launcher-icon img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.asst.has-photo .asst-avatar { background: #fff; }

/* ---------- The assistant's face (Appearance > Animated face)
   Drawn with CSS only, every size in em where 1em = the whole face, so one design fits the chat
   button, the header and the small picture beside each answer. A glossy ball in the theme colours
   with big white eyes and bold white features, so it reads clearly on any background.
   assistant.js makes the live faces (.is-live) blink, look at the pointer (--lx / --ly, from -1
   to 1) and sets data-mood: idle, happy, excited, love, wave, wink, giggle, surprised, listening,
   thinking, talking, sorry, concerned, confused. Sad feelings stay gentle: sorry still smiles. ---------- */
.asst-face {
    --asst-ink: #1d1330; --asst-lips: #3a0a1f;
    position: relative; display: block; width: 1em; height: 1em; font-size: 42px; line-height: 1; pointer-events: none;
}
.asst-launcher-icon .asst-face { font-size: 60px; }
.asst-avatar-sm .asst-face { font-size: 30px; }
.asst.has-face .asst-avatar { overflow: visible; border-radius: 50%; }
.asst.has-face .asst-msg.is-error .asst-avatar { background: var(--asst-grad); }
.asst.has-face .asst-head .asst-avatar { cursor: pointer; }
.asst-face-head {
    position: absolute; inset: 0; transform-origin: 50% 85%;
    translate: calc(var(--lx, 0) * .025em) calc(var(--ly, 0) * .02em);
    transition: rotate .45s var(--ease-out), translate .3s var(--ease-out);
}
.asst-face-head::before { /* light from the top left and a soft shadow below: it looks round */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .16) 16%, transparent 38%),
        radial-gradient(circle at 72% 88%, rgba(0, 0, 0, .26), transparent 58%);
}
.asst-face-eye {
    position: absolute; top: .255em; width: .22em; height: .28em; overflow: hidden;
    border: 0 solid #fff; border-radius: 50%;
    background-color: #fff; background-image: radial-gradient(circle at 50% 30%, #fff 55%, #e8e3f3 100%);
    box-shadow: 0 .025em .04em rgba(0, 0, 0, .3);
    transition: top .2s var(--ease-out), height .2s var(--ease-out), border-radius .2s, border-width .2s, background-color .2s, box-shadow .2s, scale .07s;
}
.asst-face-eye.is-l { left: .2em; }
.asst-face-eye.is-r { right: .2em; }
.asst-face-pupil {
    position: absolute; left: 50%; top: 50%; width: .135em; height: .16em; margin: -.075em 0 0 -.0675em; border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #3a2a5c 0, var(--asst-ink) 70%);
    translate: calc(var(--lx, 0) * .04em) calc(var(--ly, 0) * .05em);
    transition: translate .14s ease-out, opacity .15s, scale .25s var(--ease-out);
}
.asst-face-pupil::before, .asst-face-pupil::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.asst-face-pupil::before { top: .025em; left: .025em; width: .05em; height: .05em; }
.asst-face-pupil::after { bottom: .03em; right: .028em; width: .024em; height: .024em; opacity: .8; }
.asst-face.is-blink .asst-face-eye { scale: 1 .08; }
.asst-face-brow {
    position: absolute; top: .17em; width: .17em; height: .045em; border-radius: .04em; background: #fff; opacity: 0;
    box-shadow: 0 .015em .02em rgba(0, 0, 0, .25);
    transition: opacity .25s, rotate .3s var(--ease-out), translate .3s var(--ease-out);
}
.asst-face-brow.is-l { left: .225em; }
.asst-face-brow.is-r { right: .225em; }
.asst-face-cheek {
    position: absolute; top: .56em; width: .14em; height: .075em; border-radius: 50%; background: #ffb4c8; opacity: .35;
    filter: blur(.012em); transition: opacity .3s;
}
.asst-face-cheek.is-l { left: .1em; }
.asst-face-cheek.is-r { right: .1em; }
.asst-face-mouth { /* a calm, bold smile */
    position: absolute; left: 50%; top: .55em; width: .3em; height: .16em; margin-left: -.15em;
    border: .05em solid transparent; border-bottom-color: #fff; border-radius: 50%; background-color: transparent;
    filter: drop-shadow(0 .015em .015em rgba(0, 0, 0, .3));
    transition: top .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out),
        border-radius .25s, border-width .2s, border-color .2s, background-color .2s, box-shadow .2s, rotate .25s;
}
.asst-face-fx { position: absolute; left: .7em; top: -.02em; line-height: 1; color: #fff; pointer-events: none; }
.asst-face-fx::before { content: ""; display: block; font-size: .28em; opacity: 0; text-shadow: 0 0 .12em rgba(30, 8, 30, .5); }

/* Open, laughing mouth (dark inside, a white edge so it shows on any colour) */
.asst-face:is([data-mood="happy"], [data-mood="excited"], [data-mood="wave"], [data-mood="giggle"]) .asst-face-mouth {
    top: .56em; width: .32em; height: .17em; margin-left: -.16em; border-width: .028em; border-color: #fff; background-color: var(--asst-lips);
    border-radius: .04em .04em .17em .17em; box-shadow: inset 0 -.05em 0 #ff7d9c;
}
.asst-face[data-mood="excited"] .asst-face-mouth { width: .28em; height: .21em; margin-left: -.14em; border-radius: .07em .07em .16em .16em; }
/* Smiling eyes (^ ^), and the wink */
.asst-face:is([data-mood="excited"], [data-mood="wave"], [data-mood="giggle"]) .asst-face-eye,
.asst-face[data-mood="wink"] .asst-face-eye.is-r {
    top: .31em; height: .12em; border-width: .05em .05em 0; border-radius: .12em .12em 0 0; background-color: transparent; background-image: none; box-shadow: none;
}
.asst-face:is([data-mood="excited"], [data-mood="wave"], [data-mood="giggle"]) .asst-face-pupil,
.asst-face[data-mood="wink"] .asst-face-eye.is-r .asst-face-pupil { opacity: 0; }
.asst-face[data-mood="wink"] .asst-face-mouth { margin-left: -.13em; rotate: -6deg; }
.asst-face:is([data-mood="happy"], [data-mood="excited"], [data-mood="love"], [data-mood="wave"], [data-mood="wink"], [data-mood="giggle"]) .asst-face-cheek { opacity: .85; }
/* Heart eyes */
.asst-face[data-mood="love"] .asst-face-eye { overflow: visible; background-color: transparent; background-image: none; box-shadow: none; }
.asst-face[data-mood="love"] .asst-face-pupil { opacity: 0; }
.asst-face[data-mood="love"] .asst-face-eye::before {
    content: "\2665"; position: absolute; inset: -.2em; display: grid; place-items: center; font-size: .36em; line-height: 1;
    color: #fff; text-shadow: 0 0 .15em #ff2e6d, 0 .03em .04em rgba(0, 0, 0, .3);
}
/* Surprised (poked), listening, thinking */
.asst-face[data-mood="surprised"] .asst-face-eye { top: .22em; height: .31em; }
.asst-face[data-mood="surprised"] .asst-face-pupil { scale: .8; }
.asst-face[data-mood="surprised"] .asst-face-mouth,
.asst-face[data-mood="thinking"] .asst-face-mouth { top: .6em; width: .11em; height: .12em; margin-left: -.055em; border-width: .04em; border-color: #fff; }
.asst-face[data-mood="thinking"] .asst-face-mouth { width: .09em; height: .09em; margin-left: -.01em; }
.asst-face:is([data-mood="surprised"], [data-mood="listening"], [data-mood="thinking"], [data-mood="sorry"], [data-mood="concerned"], [data-mood="confused"]) .asst-face-brow { opacity: 1; }
.asst-face:is([data-mood="surprised"], [data-mood="listening"]) .asst-face-brow { translate: 0 -.025em; }
.asst-face[data-mood="listening"] .asst-face-eye { top: .245em; height: .3em; }
.asst-face[data-mood="listening"] .asst-face-mouth { top: .58em; width: .2em; height: .1em; margin-left: -.1em; }
.asst-face[data-mood="thinking"] .asst-face-brow.is-r { translate: 0 -.035em; rotate: -8deg; }
.asst-face[data-mood="thinking"] .asst-face-pupil { translate: .035em -.05em; }
.asst-face[data-mood="thinking"] .asst-face-head { rotate: 6deg; }
/* Talking: the mouth opens and closes while an answer appears */
.asst-face[data-mood="talking"] .asst-face-mouth {
    top: .58em; width: .22em; height: .11em; margin-left: -.11em; border-width: .028em; border-color: #fff; background-color: var(--asst-lips); border-radius: .06em .06em .11em .11em;
}
/* Sorry (still a small smile) and concerned (a caring look for problems): worried eyebrows */
.asst-face:is([data-mood="sorry"], [data-mood="concerned"]) .asst-face-brow.is-l { rotate: -16deg; }
.asst-face:is([data-mood="sorry"], [data-mood="concerned"]) .asst-face-brow.is-r { rotate: 16deg; }
.asst-face[data-mood="sorry"] .asst-face-pupil { translate: calc(var(--lx, 0) * .04em) .03em; }
.asst-face[data-mood="sorry"] .asst-face-mouth { top: .6em; width: .18em; height: .07em; margin-left: -.09em; border-width: .045em; }
.asst-face[data-mood="sorry"] .asst-face-head { rotate: 5deg; }
.asst-face[data-mood="concerned"] .asst-face-mouth { top: .63em; width: .18em; height: .09em; margin-left: -.09em; border-width: .045em; border-color: transparent; border-top-color: #fff; }
/* Confused: one eyebrow up, head on one side */
.asst-face[data-mood="confused"] .asst-face-brow.is-l { translate: 0 .015em; }
.asst-face[data-mood="confused"] .asst-face-brow.is-r { translate: 0 -.04em; rotate: -10deg; }
.asst-face[data-mood="confused"] .asst-face-mouth { top: .65em; width: .16em; height: 0; margin-left: -.06em; border-width: .045em; border-color: transparent; border-top-color: #fff; border-radius: .03em; rotate: -12deg; }
.asst-face[data-mood="confused"] .asst-face-head { rotate: -9deg; }
.asst-face[data-mood="wave"] .asst-face-head { rotate: -6deg; }
/* Sleepy, then asleep (after a long time with nobody moving): closed eyes, slow breaths, "z z" */
.asst-face[data-mood="sleepy"] .asst-face-eye { top: .34em; height: .14em; }
.asst-face[data-mood="sleepy"] .asst-face-pupil { translate: 0 .035em; }
.asst-face[data-mood="sleepy"] .asst-face-mouth { top: .59em; width: .12em; height: .1em; margin-left: -.06em; border-width: .04em; border-color: #fff; }
.asst-face[data-mood="sleepy"] .asst-face-head { rotate: 6deg; }
.asst-face[data-mood="sleep"] .asst-face-eye {
    top: .37em; height: .1em; border-width: 0 0 .05em; border-radius: 0 0 .12em .12em; background-color: transparent; background-image: none; box-shadow: none;
}
.asst-face[data-mood="sleep"] .asst-face-pupil { opacity: 0; }
.asst-face[data-mood="sleep"] .asst-face-mouth { top: .61em; width: .08em; height: .08em; margin-left: -.04em; border-width: .035em; border-color: #fff; }
.asst-face[data-mood="sleep"] .asst-face-head { rotate: 10deg; }
.asst-face[data-mood="sleep"] .asst-face-cheek { opacity: .6; }
.asst-face[data-mood="sleep"] .asst-face-fx::before { content: "z"; font-weight: 800; }

/* Hands: they wave hello and cheer. Only on live faces that have room (the hello bubble, the chat header) */
.asst-face-hand {
    position: absolute; top: .56em; width: .22em; height: .25em; border-radius: 50% 50% 46% 46%; background: var(--asst-grad);
    box-shadow: inset -.02em -.035em .05em rgba(0, 0, 0, .28), 0 0 0 .025em rgba(255, 255, 255, .95), 0 .03em .06em rgba(0, 0, 0, .3);
    opacity: 0; scale: .3; transform-origin: 50% 100%;
    transition: opacity .25s, scale .35s cubic-bezier(.34, 1.56, .64, 1), top .35s var(--ease-out), left .35s var(--ease-out), right .35s var(--ease-out), rotate .35s var(--ease-out);
}
.asst-face-hand::before { content: ""; position: absolute; top: .085em; width: .08em; height: .1em; border-radius: 50%; background: inherit; box-shadow: inset -.01em -.02em .03em rgba(0, 0, 0, .25); }
.asst-face-hand.is-l { left: .04em; }
.asst-face-hand.is-l::before { right: -.03em; }
.asst-face-hand.is-r { right: .04em; }
.asst-face-hand.is-r::before { left: -.03em; }
.asst-face:is([data-mood="wave"], [data-mood="excited"]) .asst-face-hand { opacity: 1; scale: 1; }
.asst-face[data-mood="wave"] .asst-face-hand.is-r { top: .2em; right: -.15em; }
.asst-face[data-mood="wave"] .asst-face-hand.is-l { top: .56em; left: -.1em; rotate: -24deg; }
.asst-face[data-mood="excited"] .asst-face-hand.is-l { top: .18em; left: -.15em; rotate: -20deg; }
.asst-face[data-mood="excited"] .asst-face-hand.is-r { top: .18em; right: -.15em; rotate: 20deg; }
.asst-face.is-live[data-mood="wave"] .asst-face-hand.is-r { animation: asst-face-hand-wave .42s ease-in-out .2s 7 alternate; }
.asst-face.is-live[data-mood="excited"] .asst-face-hand { animation: asst-face-cheer .26s ease-in-out 6 alternate; }
.asst-face:not(.is-live) .asst-face-hand { display: none; }
.asst-launcher .asst-face[data-mood="wave"] .asst-face-hand.is-r { top: .46em; right: .02em; scale: .85; }
.asst-launcher .asst-face[data-mood="wave"] .asst-face-hand.is-l { opacity: 0; }
.asst-launcher .asst-face[data-mood="excited"] .asst-face-hand.is-l { top: .48em; left: .02em; scale: .8; }
.asst-launcher .asst-face[data-mood="excited"] .asst-face-hand.is-r { top: .48em; right: .02em; scale: .8; }
.asst-launcher .asst-face-fx { left: .6em; top: .1em; }
@keyframes asst-face-hand-wave { from { rotate: -16deg; } to { rotate: 24deg; } }
@keyframes asst-face-cheer { from { translate: 0 0; } to { translate: 0 -.05em; } }

/* Only the faces that are "alive" (chat button, header, first-visit bubble, typing) move */
.asst-face.is-live { animation: asst-face-breathe 4.6s ease-in-out infinite; }
.asst-face.is-live:is([data-mood="excited"], [data-mood="giggle"], [data-mood="wave"], [data-mood="surprised"]) {
    animation: asst-face-hop .5s var(--ease-out) 2, asst-face-breathe 4.6s ease-in-out 1s infinite;
}
.asst-face.is-live[data-mood="giggle"] .asst-face-head { animation: asst-face-wiggle .22s ease-in-out 4 alternate; }
.asst-face.is-live[data-mood="talking"] .asst-face-mouth { animation: asst-face-talk .16s ease-in-out infinite alternate; }
.asst-face.is-live[data-mood="thinking"] .asst-face-pupil { animation: asst-face-ponder 2.6s ease-in-out infinite; }
.asst-face.is-live[data-mood="love"] .asst-face-eye::before { animation: asst-face-beat .9s ease-in-out infinite; }
.asst-face.is-live[data-mood="sleep"] { animation: asst-face-snooze 3.4s ease-in-out infinite; }
.asst-face.is-live[data-mood="sleep"] .asst-face-mouth { animation: asst-face-snore 3.4s ease-in-out infinite; }
.asst-face.is-live[data-mood="sleep"] .asst-face-fx::before { animation: asst-face-float 2.6s ease-out infinite; }
.asst-face.is-live:is([data-mood="excited"], [data-mood="love"], [data-mood="confused"]) .asst-face-fx::before { animation: asst-face-float 1.7s ease-out infinite; }
.asst-face[data-mood="excited"] .asst-face-fx::before { content: "\2726"; color: #ffe066; }
.asst-face[data-mood="love"] .asst-face-fx::before { content: "\2665"; color: #ff8fb1; }
.asst-face[data-mood="confused"] .asst-face-fx::before { content: "?"; font-weight: 800; }
.asst-face:not(.is-live) .asst-face-fx { display: none; }

@keyframes asst-face-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes asst-face-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -.08em; } }
@keyframes asst-face-wiggle { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes asst-face-talk { from { height: .05em; } to { height: .15em; } }
@keyframes asst-face-ponder { 0%, 100% { translate: .035em -.05em; } 50% { translate: -.03em -.05em; } }
@keyframes asst-face-beat { 0%, 100% { scale: 1; } 30% { scale: 1.25; } }
@keyframes asst-face-snooze { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes asst-face-snore { 0%, 100% { height: .06em; width: .07em; } 50% { height: .11em; width: .09em; } }
@keyframes asst-face-float { 0% { opacity: 0; translate: 0 .3em; } 25% { opacity: 1; } 100% { opacity: 0; translate: .2em -.9em; } }

/* "Button with text": the label always shows */
.asst.is-pill .asst-launcher { max-width: 320px; }
.asst.is-pill .asst-launcher-label { opacity: 1; transform: none; }

/* A reply from an answer the team saved */
.asst-team-tag { justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--asst-deep); }

/* The hello a few seconds after a page opens (Appearance > First-visit bubble): a speech bubble from the
   face in the corner, which waves with both hands while the bubble "types" for a moment, then says hello
   and what it can do, with buttons that ask straight away. It sits just above the chat button, its tail
   pointing at the face (assistant.js sets "bottom" from the button). */
.asst-peek {
    position: fixed; z-index: 51; right: 24px; bottom: 96px; width: 340px; max-width: calc(100vw - 28px);
    padding: 18px 18px 16px; border-radius: 22px; background: #fff;
    box-shadow: 0 26px 54px -20px rgba(17, 19, 24, .45), 0 0 0 1px rgba(17, 19, 24, .06);
    transform-origin: calc(100% - 30px) calc(100% + 12px); animation: asst-peek-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.asst-peek::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 16px; border-radius: 22px 22px 0 0;
    padding-top: 4px; background: var(--asst-grad);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* The tail, over the face */
.asst-peek::after {
    content: ""; position: absolute; right: 22px; bottom: -9px; width: 18px; height: 18px; border-radius: 0 0 5px 0;
    background: #fff; box-shadow: 4px 4px 6px -3px rgba(17, 19, 24, .12); transform: rotate(45deg);
}
.asst.is-left .asst-peek { right: auto; left: 24px; transform-origin: 30px calc(100% + 12px); }
.asst.is-left .asst-peek::after { right: auto; left: 22px; }
.asst-peek-main { display: grid; gap: 12px; }
.asst-peek-body { display: grid; gap: 4px; padding: 0 22px 0 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.asst-peek-body strong { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.asst-peek-body small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.asst-peek-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.asst-peek-chip {
    display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 10px; border: 1px solid var(--asst-soft); border-radius: 12px; white-space: nowrap;
    font: 600 12px/1.25 var(--font); color: var(--asst-deep); background: var(--asst-tint); cursor: pointer; text-align: left;
    transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.asst-peek-chip i { font-size: 11px; color: var(--asst-c1); transition: color .15s; }
.asst-peek-chip:hover, .asst-peek-chip:focus-visible { color: #fff; border-color: transparent; background: var(--asst-user); transform: translateY(-1px); }
.asst-peek-chip:hover i, .asst-peek-chip:focus-visible i { color: #fff; }
.asst-peek-x { position: absolute; top: 9px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px; color: var(--soft); background: none; cursor: pointer; }
.asst-peek-x:hover { color: var(--ink); background: var(--line-soft); }
/* First it "types" for a moment, then the hello appears */
.asst-peek-typing { display: none; }
.asst-peek.is-typing .asst-peek-typing { display: inline-flex; justify-self: start; gap: 4px; margin-top: 10px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--asst-tint); }
.asst-peek-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--asst-c1); animation: asst-dot 1.1s ease-in-out infinite; }
.asst-peek-typing i:nth-child(2) { animation-delay: .15s; background: var(--asst-mid); }
.asst-peek-typing i:nth-child(3) { animation-delay: .3s; background: var(--asst-c2); }
.asst-peek.is-typing :is(.asst-peek-body, .asst-peek-chips) { display: none; }
/* While it "types": a small bubble with the dots, which then opens up */
.asst-peek.is-typing { width: auto; padding: 10px 12px; }
.asst-peek.is-typing .asst-peek-typing { margin: 0; }
.asst-peek.is-typing .asst-peek-x { display: none; }
.asst-peek:not(.is-typing) .asst-peek-body { animation: asst-rise .4s var(--ease-out) both; }
.asst-peek:not(.is-typing) .asst-peek-chips { animation: asst-rise .4s var(--ease-out) .15s both; }
@keyframes asst-peek-in { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }

/* The chat window */
.asst-panel {
    position: fixed; z-index: 60; right: 24px; bottom: 24px;
    display: flex; flex-direction: column; width: 400px; height: min(660px, calc(100vh - 48px)); overflow: hidden;
    border-radius: 24px; background: var(--asst-bg);
    box-shadow: 0 30px 70px -20px rgba(17, 19, 24, .45), 0 0 0 1px rgba(17, 19, 24, .06);
    opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right;
    transition: opacity .22s, transform .3s var(--ease-out);
}
.asst-panel.is-open { opacity: 1; transform: none; }
.asst-head {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 16px; color: #fff; background: var(--asst-dark);
}
.asst-head::before { /* colourful glow in the corners */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(160px 90px at 88% -10%, rgba(244, 63, 94, .45), transparent 70%), radial-gradient(140px 80px at 10% 120%, rgba(109, 40, 217, .4), transparent 70%);
}
.asst-head > * { position: relative; }
.asst-head .asst-avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.asst-title { flex: 1; min-width: 0; line-height: 1.25; }
.asst-title strong { display: block; overflow: hidden; font-size: 15.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.asst-title small { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.asst-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.asst-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 11px; font-size: 15px; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s, color .2s; }
.asst-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.asst-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.asst-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 14px 8px; scroll-behavior: smooth; }
.asst-list { display: grid; gap: 14px; }
.asst-msg { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.asst-msg.is-new { animation: asst-rise .35s var(--ease-out) both; }
.asst-msg.is-user { justify-content: flex-end; }
.asst-stack { display: grid; gap: 8px; min-width: 0; max-width: calc(100% - 38px); }
.asst-bubble { max-width: 100%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.asst-msg.is-assistant .asst-bubble { color: var(--text); background: #fff; border: 1px solid #ebebef; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); }
.asst-msg.is-user .asst-bubble { max-width: 84%; color: #fff; background: var(--asst-user); border-bottom-right-radius: 6px; box-shadow: 0 6px 14px -8px var(--asst-shadow); }
.asst-prose > * + * { margin-top: 8px; }
.asst-prose ul, .asst-prose ol { padding-left: 18px; }
.asst-prose ul { list-style: disc; }
.asst-prose ol { list-style: decimal; }
.asst-prose li + li { margin-top: 3px; }
.asst-prose strong { font-weight: 700; color: var(--ink); }
.asst-prose a { font-weight: 600; color: var(--asst-c1); text-decoration: underline; text-underline-offset: 2px; }
.asst-prose code { padding: 1px 5px; border-radius: 5px; font-size: 12.5px; background: var(--line-soft); }

/* Products: compact rows (photo, name, price); the first three show, the rest behind "Show more" */
.asst-products { display: grid; gap: 6px; }
.asst-product {
    display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 14px;
    color: var(--text); background: #fff; border: 1px solid #ebebef; box-shadow: 0 1px 2px rgba(17, 19, 24, .04);
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.asst-product[hidden] { display: none; }
.asst-product:hover { border-color: var(--asst-soft); box-shadow: 0 8px 16px -12px rgba(17, 19, 24, .4); transform: translateX(2px); }
.asst-product:focus-visible { outline: 2px solid var(--asst-c1); outline-offset: 2px; }
.asst-product-img { flex: none; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--line-soft); }
.asst-product-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.asst-product-name { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.asst-product-meta { overflow: hidden; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.asst-product-meta b { font-size: 13px; font-weight: 800; color: var(--asst-c1); }
.asst-product-meta s { color: var(--soft); }
.asst-product-meta .fa-star { font-size: 10px; color: #f59e0b; }
.asst-product-go { flex: none; font-size: 11px; color: var(--soft); transition: color .2s; }
.asst-product:hover .asst-product-go { color: var(--asst-c1); }
.asst-more { justify-self: start; padding: 4px 10px; border: 0; border-radius: 999px; font: 700 12px/1.4 var(--font); color: var(--asst-deep); background: var(--asst-tint); cursor: pointer; }
.asst-more:hover { background: var(--asst-soft); }
.asst-more i { font-size: 10px; }

/* Tap-to-answer buttons */
.asst-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.asst-chip {
    padding: 7px 13px; border-radius: 999px; font: 600 12.5px/1.2 var(--font); color: var(--asst-deep); cursor: pointer;
    background: #fff; border: 1.5px solid var(--asst-soft); transition: background .2s, border-color .2s, transform .15s;
}
.asst-chip:hover { background: var(--asst-tint); border-color: var(--asst-c1); }
.asst-chip:active { transform: scale(.97); }
.asst-chip:focus-visible { outline: 2px solid var(--asst-c1); outline-offset: 2px; }

/* Time under each message */
.asst-time { font-size: 10.5px; line-height: 1; color: var(--soft); }
.asst-stack.is-mine { justify-items: end; max-width: 84%; }
.asst-stack.is-mine .asst-bubble { max-width: 100%; }
.asst-stock { font-style: normal; font-weight: 700; color: #b45309; }

/* "Added to your cart" and "Sent to our team" */
.asst-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; }
.asst-action > span { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.asst-action.is-cart { color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; }
.asst-action.is-request { color: #1e3a8a; background: #eff6ff; border: 1px solid #bfdbfe; }
.asst-action a { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #065f46; background: #fff; border: 1px solid #a7f3d0; }
.asst-action a.is-primary { color: #fff; background: #059669; border-color: #059669; }
.asst-action a:hover { filter: brightness(.96); }
/* "Chat on WhatsApp": offered when the assistant can't help */
.asst-action.is-wa {
    justify-self: start; display: inline-flex; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #2fe07a, #25d366 45%, #128c7e); box-shadow: 0 8px 18px -10px rgba(18, 140, 126, .8);
    transition: transform .15s, box-shadow .2s;
}
.asst-action.is-wa i { font-size: 17px; }
.asst-action.is-wa:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(18, 140, 126, .9); }
.asst-action.is-wa:focus-visible { outline: 2px solid #128c7e; outline-offset: 2px; }

/* Typing and errors */
.asst-msg.is-typing .asst-bubble { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.asst-msg.is-typing small { font-size: 12.5px; }
.asst-dots { display: inline-flex; gap: 4px; }
.asst-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--asst-c1); animation: asst-dot 1.2s ease-in-out infinite; }
.asst-dots i:nth-child(2) { animation-delay: .15s; background: var(--asst-mid); }
.asst-dots i:nth-child(3) { animation-delay: .3s; background: var(--asst-c2); }
.asst-msg.is-error .asst-avatar { background: #fde68a; color: #92400e; }
.asst-msg.is-error .asst-bubble { color: #7c2d12; background: #fff7ed; border-color: #fed7aa; }
.asst-retry { margin-left: 4px; padding: 3px 10px; border: 1px solid #fdba74; border-radius: 999px; font: 700 12px/1.4 var(--font); color: #9a3412; background: #fff; cursor: pointer; }

/* Typing box */
.asst-form { display: flex; align-items: flex-end; gap: 8px; margin: 8px 12px 0; padding: 6px 6px 6px 14px; border-radius: 18px; background: #fff; border: 1.5px solid #e6e6ea; transition: border-color .2s, box-shadow .2s; }
.asst-form:focus-within { border-color: var(--asst-soft); box-shadow: 0 0 0 4px rgba(209, 10, 18, .07); }
.asst-form textarea { flex: 1; min-width: 0; max-height: 120px; padding: 9px 0; border: 0; outline: 0; resize: none; font: 400 14.5px/1.45 var(--font); color: var(--ink); background: none; }
.asst-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 14px; font-size: 15px; color: #fff; background: var(--asst-grad); cursor: pointer; transition: transform .15s, opacity .2s; }
.asst-send:hover { transform: translateY(-1px); }
.asst-send:disabled { opacity: .45; cursor: default; transform: none; }
.asst-send:focus-visible { outline: 2px solid var(--asst-c1); outline-offset: 2px; }
.asst-foot { display: flex; justify-content: center; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 0; padding: 8px 14px 12px; font-size: 11px; color: var(--soft); text-align: center; }
.asst-foot a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #128c7e; }

@keyframes asst-pop { from { opacity: 0; transform: scale(.2) rotate(40deg); } to { opacity: 1; transform: none; } }
@keyframes asst-ring { 0% { box-shadow: 0 0 0 0 var(--asst-ring); } 30%, 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes asst-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes asst-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* The left corner (Appearance > Corner) */
.asst.is-left .asst-launcher, .asst.is-left .asst-panel { right: auto; left: 24px; }
.asst.is-left .asst-panel { transform-origin: bottom left; }

/* Phones: the button sits above the bottom menu (and the add-to-cart bar); the chat fills the screen */
@media (max-width: 767px) {
    .asst-launcher { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); height: 54px; max-width: 54px; }
    .asst-launcher-icon { width: 54px; height: 54px; font-size: 21px; }
    .asst-launcher-icon .asst-face { font-size: 54px; }
    body:has(.buy-bar:not([hidden])) .asst-launcher { bottom: calc(148px + env(safe-area-inset-bottom)); }
    .asst.is-left .asst-launcher { left: 14px; }
    .asst-peek { right: 14px; padding: 16px 14px 14px; }
    .asst-peek::after { right: 18px; }
    .asst.is-left .asst-peek { left: 14px; }
    .asst.is-pill .asst-launcher { max-width: calc(100vw - 28px); }
}
@media (max-width: 600px) {
    .asst-panel { inset: 0; width: auto; height: 100dvh; border-radius: 0; transform: translateY(24px); }
    .asst.is-left .asst-panel { left: 0; right: 0; }
    .asst-head { padding-top: calc(14px + env(safe-area-inset-top)); }
    .asst-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .asst-form textarea { font-size: 16px; } /* stops iPhones zooming in */
    body.asst-is-open { overflow: hidden; }
}
@media print { .asst { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .asst-launcher, .asst-launcher::after, .asst-msg.is-new, .asst-peek, .asst-dots i { animation: none !important; }
    .asst-panel, .asst-launcher, .asst-action.is-wa { transition: none; }
    /* The face still shows each feeling, without moving */
    .asst-face, .asst-face *, .asst-face *::before, .asst-face *::after { animation: none !important; transition: none !important; }
    .asst-face-fx { display: none; }
    .asst-body { scroll-behavior: auto; }
}

/* =========================================================================
   "How did we do?" (reviews/order.blade.php): the page of its own a customer
   gets on WhatsApp once their order is delivered. Soft colour clouds, falling
   confetti, the assistant's face waving, stars that pop. Mobile first.
   ========================================================================= */
.orv-page { min-height: 100vh; margin: 0; overflow-x: hidden; font-family: var(--font); color: var(--ink); background: #fff6f4; }
.orv-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(160deg, #fff1f2 0%, #f5f3ff 48%, #fff7ed 100%); }
.orv-bg span { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; animation: orv-float 14s ease-in-out infinite alternate; }
.orv-bg span:nth-child(1) { width: 320px; height: 320px; left: -90px; top: -70px; background: #fda4af; }
.orv-bg span:nth-child(2) { width: 280px; height: 280px; right: -100px; top: 140px; background: #c4b5fd; animation-delay: -4s; }
.orv-bg span:nth-child(3) { width: 260px; height: 260px; left: 8%; bottom: -90px; background: #fdba74; animation-delay: -8s; }
.orv-bg span:nth-child(4) { width: 210px; height: 210px; right: 6%; bottom: 12%; background: #6ee7b7; animation-delay: -2s; }
.orv-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(109, 40, 217, .07) 1.2px, transparent 1.4px); background-size: 22px 22px; }
.orv-confetti { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.orv-confetti i { position: absolute; top: -24px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); opacity: .7; animation: orv-fall var(--t) linear var(--d) infinite; }
.orv-confetti i:nth-child(3n) { width: 9px; height: 9px; border-radius: 50%; }
.orv-confetti i:nth-child(4n) { width: 5px; height: 15px; }
.orv-confetti.is-burst i { opacity: 1; width: 11px; height: 16px; animation-duration: calc(var(--t) / 2.6); animation-delay: calc(var(--d) / 6); }

.orv { position: relative; z-index: 2; display: grid; gap: 16px; max-width: 520px; margin: 0 auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.orv-logo { justify-self: center; display: block; padding: 6px 4px; }
.orv-logo img { display: block; width: auto; height: 38px; }
.orv-card {
    position: relative; padding: 22px 20px; border-radius: 26px; background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px);
    box-shadow: 0 26px 52px -26px rgba(109, 40, 217, .38), 0 0 0 1px rgba(17, 19, 24, .05);
    animation: orv-rise .7s var(--ease-out) both;
}
.orv-card + .orv-card { animation-delay: .18s; }

/* Hello */
.orv-hero { overflow: hidden; padding-top: 30px; text-align: center; }
.orv-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 96px; background: linear-gradient(135deg, rgba(209, 10, 18, .12), rgba(109, 40, 217, .14)); }
.orv-mascot { position: relative; display: grid; place-items: center; margin: 0 auto 12px; }
.orv-mascot .asst-avatar { width: 108px; height: 108px; border-radius: 50%; box-shadow: 0 18px 30px -12px var(--asst-shadow), 0 0 0 6px #fff; }
.orv-mascot .asst-face { font-size: 108px; }
.orv-mascot .asst-avatar img { border-radius: 50%; }
.orv-hero h1 { position: relative; margin: 4px 0 6px; font-size: clamp(26px, 7.4vw, 33px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.orv-pop { display: inline-block; animation: orv-tada 1.2s ease-in-out .8s 2; }
.orv-hero p { position: relative; max-width: 34ch; margin: 0 auto; font-size: 15px; line-height: 1.55; color: var(--muted); }
.orv-hero p strong { color: var(--ink); }
.orv-items { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.orv-items figure {
    position: relative; width: 66px; height: 66px; margin: 0; border-radius: 18px; background: #fff;
    box-shadow: 0 10px 20px -10px rgba(17, 19, 24, .35), 0 0 0 1px rgba(17, 19, 24, .05);
    animation: orv-rise .6s var(--ease-out) calc(.45s + var(--i) * .1s) both;
}
.orv-items img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.orv-items figcaption { position: absolute; right: -8px; bottom: -7px; padding: 2px 7px; border-radius: 999px; font: 700 11px/1.4 var(--font); color: #fff; background: linear-gradient(135deg, #d10a12, #6d28d9); }

/* The review */
.orv-form h2, .orv-thanks h2, .orv-wait h2 { margin: 0; text-align: center; font-size: 23px; font-weight: 800; }
.orv-sub { margin: 4px 0 12px; text-align: center; font-size: 14px; color: var(--muted); }
.orv-stars { display: flex; justify-content: center; gap: 4px; }
.orv-stars.is-shake { animation: orv-shake .5s; }
.orv-star { position: relative; padding: 4px; cursor: pointer; }
.orv-star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.orv-star i {
    display: block; font-size: 44px; color: #e5e7eb; filter: drop-shadow(0 4px 6px rgba(17, 19, 24, .08));
    transition: color .15s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
    animation: orv-star-in .55s cubic-bezier(.34, 1.56, .64, 1) calc(.55s + var(--i) * .08s) both;
}
.orv-star input:focus-visible + i { outline: 3px solid #a78bfa; outline-offset: 2px; border-radius: 10px; }
.orv-stars[data-hover="1"] .orv-star:nth-child(-n+1) i, .orv-stars[data-hover="2"] .orv-star:nth-child(-n+2) i, .orv-stars[data-hover="3"] .orv-star:nth-child(-n+3) i,
.orv-stars[data-hover="4"] .orv-star:nth-child(-n+4) i, .orv-stars[data-hover="5"] .orv-star:nth-child(-n+5) i { color: #fde68a; transform: scale(1.1); }
.orv-stars[data-rating="1"] .orv-star:nth-child(-n+1) i, .orv-stars[data-rating="2"] .orv-star:nth-child(-n+2) i, .orv-stars[data-rating="3"] .orv-star:nth-child(-n+3) i,
.orv-stars[data-rating="4"] .orv-star:nth-child(-n+4) i, .orv-stars[data-rating="5"] .orv-star:nth-child(-n+5) i { color: #fbbf24; }
.orv-star input:checked + i { animation: orv-star-pop .5s cubic-bezier(.34, 1.56, .64, 1); transform: scale(1.16); }
.orv-mood { min-height: 24px; margin: 8px 0 0; text-align: center; font-size: 16.5px; font-weight: 800; color: #6d28d9; }
.orv-mood.is-pop { animation: orv-pop-in .45s cubic-bezier(.34, 1.56, .64, 1); }
.orv-sorry { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: #9a3412; background: #fff7ed; }
.orv-sorry a { font-weight: 700; color: #128c7e; }
.orv-field { display: grid; gap: 8px; margin-top: 16px; min-width: 0; }
.orv-field label, .orv-label { font-size: 14px; font-weight: 700; }
.orv-field small, .orv-label small { font-weight: 500; color: var(--muted); }
.orv-field textarea, .orv-field input {
    width: 100%; padding: 12px 14px; border: 1.5px solid #e5e7eb; border-radius: 14px; font: 16px/1.5 var(--font); color: var(--ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.orv-field textarea { resize: vertical; }
.orv-field textarea:focus, .orv-field input:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, .25); outline: none; }
.orv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.orv-chip { padding: 6px 11px; border: 1.5px dashed #d8b4fe; border-radius: 999px; font: 600 12.5px/1.3 var(--font); color: #6d28d9; background: #faf5ff; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.orv-chip:hover { transform: translateY(-1px); }
.orv-chip.is-on { border-style: solid; color: #fff; background: #6d28d9; }
.orv-drop {
    position: relative; display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border: 2px dashed #fda4af; border-radius: 18px;
    text-align: center; background: linear-gradient(135deg, #fff1f2, #faf5ff); cursor: pointer; transition: border-color .15s, transform .15s;
}
.orv-drop:hover { border-color: #fb7185; transform: translateY(-1px); }
.orv-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.orv-drop-icon { display: flex; gap: 10px; font-size: 24px; color: #d10a12; }
.orv-drop-icon i:last-child { color: #6d28d9; }
.orv-drop strong { font-size: 14px; }
.orv-drop small { font-size: 12px; }
.orv-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.orv-thumbs:empty { display: none; }
.orv-thumb { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 14px; background: #f3f4f6; animation: orv-rise .35s var(--ease-out) both; }
.orv-thumb img, .orv-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.orv-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; color: #fff; background: rgba(17, 19, 24, .28); pointer-events: none; }
.orv-remove { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; color: #fff; background: rgba(17, 19, 24, .72); cursor: pointer; }
.orv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.orv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.orv-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #b91c1c; background: #fef2f2; }
.orv-send {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; padding: 15px 18px;
    border: 0; border-radius: 16px; font: 800 16.5px/1.2 var(--font); color: #fff; background: linear-gradient(135deg, #d10a12, #e11d48 45%, #6d28d9);
    box-shadow: 0 18px 32px -14px rgba(209, 10, 18, .7); cursor: pointer; transition: transform .15s, filter .2s;
}
.orv-send::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-100%); animation: orv-shine 3.2s ease-in-out 1.5s infinite; }
.orv-send:hover { transform: translateY(-1px); }
.orv-send:disabled { filter: grayscale(.35); cursor: wait; }
.orv-progress { display: grid; gap: 5px; margin-top: 10px; }
.orv-progress span { overflow: hidden; height: 8px; border-radius: 999px; background: #f3e8ff; }
.orv-progress span::after { content: ""; display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d10a12, #6d28d9); transition: width .2s; }
.orv-progress small { text-align: center; font-size: 12.5px; color: var(--muted); }
.orv-note { margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.orv-note i { color: #10b981; }

/* Thank you */
.orv-thanks, .orv-wait { text-align: center; }
.orv-thanks.is-shown { animation: orv-thanks-in .75s cubic-bezier(.34, 1.56, .64, 1) both; }
.orv-thanks-icon { font-size: 54px; line-height: 1.1; animation: orv-heart 1.4s ease-in-out infinite; }
.orv-given { margin: 8px 0 0; font-size: 26px; letter-spacing: 2px; }
.orv-given i { color: #e5e7eb; }
.orv-given i.is-on { color: #fbbf24; }
.orv-thanks p:not(.orv-given), .orv-wait p { max-width: 36ch; margin: 10px auto 0; line-height: 1.55; color: var(--muted); }
.orv-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.orv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #d10a12, #6d28d9); box-shadow: 0 12px 24px -12px rgba(109, 40, 217, .6); }
.orv-btn.is-light { color: #0f766e; background: #e7fbf2; box-shadow: none; }
.orv-foot { text-align: center; font-size: 13px; color: var(--muted); }
.orv-foot a { color: inherit; }

@keyframes orv-float { to { transform: translate(40px, 34px) scale(1.12); } }
@keyframes orv-fall { from { transform: translateY(-30px) rotate(0deg); } to { transform: translateY(110vh) rotate(560deg); } }
@keyframes orv-rise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes orv-tada { 0%, 100% { transform: none; } 20% { transform: scale(1.25) rotate(-12deg); } 40% { transform: scale(1.25) rotate(12deg); } 60% { transform: scale(1.15) rotate(-6deg); } }
@keyframes orv-star-in { from { opacity: 0; transform: scale(.2) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes orv-star-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1.16); } }
@keyframes orv-pop-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes orv-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes orv-shine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
@keyframes orv-thanks-in { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes orv-heart { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 50% { transform: scale(1.05); } }

@media (max-width: 420px) {
    .orv-two { grid-template-columns: minmax(0, 1fr); }
    .orv-star i { font-size: 40px; }
    .orv-card { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .orv-bg span, .orv-confetti, .orv-card, .orv-pop, .orv-items figure, .orv-star i, .orv-send::after, .orv-thanks-icon, .orv-thumb { animation: none !important; }
    .orv-confetti { display: none; }
}

/* =========================================================================
   Single / double sided printing (App\Support\PrintSides): a little card
   that flips 1 → 2, the "Double side" tab on product cards (tooltip on
   hover), and the switch on the product page.
   ========================================================================= */
.ds-flip { display: inline-block; flex: none; width: 15px; height: 19px; perspective: 120px; vertical-align: middle; }
.ds-flip > span { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: ds-flip 3.4s cubic-bezier(.6, 0, .35, 1) infinite; }
.ds-flip i {
    position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; font: 800 10px/1 var(--font); font-style: normal; color: #fff;
    backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.ds-flip i:first-child { background: linear-gradient(135deg, #f43f5e, #d10a12); }
.ds-flip i:last-child { background: linear-gradient(135deg, #8b5cf6, #6d28d9); transform: rotateY(180deg); }
.ds-flip.is-big { width: 30px; height: 38px; }
.ds-flip.is-big i { font-size: 16px; border-radius: 7px; }
@keyframes ds-flip { 0%, 30% { transform: rotateY(0deg); } 45%, 80% { transform: rotateY(180deg); } 95%, 100% { transform: rotateY(360deg); } }

/* The tab on a product card's photo */
.ds-badge {
    position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px;
    border-radius: 999px; font: 700 10.5px/1 var(--font); color: #4c1d95; background: rgba(255, 255, 255, .95);
    box-shadow: 0 6px 16px -6px rgba(76, 29, 149, .5), 0 0 0 1px rgba(109, 40, 217, .12);
}
.ds-badge::after {
    content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 9px); width: max-content; max-width: 170px; padding: 7px 10px;
    border-radius: 10px; font: 600 11px/1.35 var(--font); color: #fff; background: #1f1635; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(5px); transition: opacity .18s, transform .18s; pointer-events: none;
}
.ds-badge::before { content: ""; position: absolute; left: 14px; bottom: calc(100% + 3px); border: 6px solid transparent; border-bottom-width: 0; border-top-color: #1f1635; opacity: 0; transition: opacity .18s; }
.ds-badge:hover::after, .ds-badge:hover::before,
.product-media:focus-visible .ds-badge::after, .product-media:focus-visible .ds-badge::before { opacity: 1; transform: none; }

/* The switch on the product page, framed in the brand colours */
.ds-pick {
    display: grid; gap: 12px; margin: 14px 0 6px; padding: 14px; border: 2px solid transparent; border-radius: 18px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f43f5e, #8b5cf6 55%, #f59e0b) border-box;
    box-shadow: 0 16px 30px -22px rgba(109, 40, 217, .55);
}
.ds-pick-head { display: flex; align-items: center; gap: 12px; }
.ds-pick-head strong { display: block; font-size: 14.5px; color: var(--ink); }
.ds-pick-head small { display: block; font-size: 12px; color: var(--muted); }
.ds-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: #f3f0ff; }
.ds-knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 11px; background: #fff; box-shadow: 0 6px 14px -6px rgba(76, 29, 149, .45); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ds-pick.is-double .ds-knob { transform: translateX(100%); }
.ds-side {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 8px; border: 0; border-radius: 11px;
    font: 700 13px/1.2 var(--font); color: var(--muted); background: none; text-decoration: none; cursor: pointer; transition: color .2s;
}
.ds-side span { text-align: left; }
.ds-side small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.ds-side i { font-size: 16px; }
.ds-side.is-on { color: var(--ink); }
.ds-side[data-ds-side="double"].is-on, .ds-side[data-ds-side="double"].is-on small { color: #6d28d9; }
.ds-side:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.ds-bump { display: inline-block; animation: ds-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ds-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.16); color: #6d28d9; } }
@media (prefers-reduced-motion: reduce) {
    .ds-flip > span, .ds-bump { animation: none; }
    .ds-knob { transition: none; }
}

/* ==========================================================================
   Order page: pay by UPI (QR code for the exact amount) or bank transfer
   ========================================================================= */
.upay { display: grid; gap: 16px; }
.upay-head { display: flex; align-items: center; gap: 14px; }
.upay-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-size: 20px; color: #fff; background: linear-gradient(135deg, #22c55e, #059669); box-shadow: 0 10px 20px -10px rgba(5, 150, 105, .8); }
.upay-title { flex: 1; min-width: 0; }
.upay-title h2 { margin: 0; }
.upay-title p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.upay-amount { flex: none; display: grid; justify-items: end; gap: 1px; padding: 8px 12px; border: 1.5px dashed #86efac; border-radius: 14px; font: inherit; text-align: right; background: #f0fdf4; cursor: pointer; }
.upay-amount small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #15803d; }
.upay-amount strong { font-size: 20px; line-height: 1.1; color: #14532d; }
.upay-amount span { font-size: 11px; font-weight: 600; color: #15803d; }
.upay-amount:hover { background: #dcfce7; }
.upay-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.upay-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.upay-card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.upay-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--ink); }
.upay-card h3 small { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.upay-card.is-upi { justify-items: center; text-align: center; background: linear-gradient(170deg, #f0fdf4, #fff 55%); border-color: #bbf7d0; }
.upay-card.is-upi h3 { color: #166534; }
.upay-card.is-bank h3 i { color: #2563eb; }
.upay-qr { padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 12px 26px -16px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .06); }
.upay-qr svg { display: block; width: 200px; height: 200px; max-width: 100%; }
.upay-apps { font-size: 12px; font-weight: 700; color: var(--ink); }
.upay-tip { font-size: 12px; color: var(--muted); max-width: 30ch; }
.upay-phone { display: none; }
.upay-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 12px; background: #f8fafc; text-align: left; }
.upay-row span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.upay-row strong { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.upay-list { display: grid; margin: 0; }
.upay-list > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; }
.upay-list > div + div { border-top: 1px dashed var(--line); }
.upay-list > div.is-note { grid-template-columns: minmax(0, 1fr); }
.upay-list dt { font-size: 12.5px; color: var(--muted); }
.upay-list dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.upay-list dd span { min-width: 0; overflow-wrap: anywhere; }
.upay-copy { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; color: #2563eb; background: #eff6ff; cursor: pointer; transition: background .2s, transform .2s; }
.upay-copy:hover { background: #dbeafe; }
.upay-copy:active { transform: scale(.92); }
.upay-copy:focus-visible, .upay-amount:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.upay-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.upay-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; color: var(--text, #333); background: #fff; border: 1px solid var(--line); }
.upay-steps li > span { min-width: 0; }
.upay-steps strong { white-space: nowrap; color: var(--ink); }
.upay-steps li > b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: var(--red, #d10a12); }
.upay-steps a { font-weight: 700; color: #15803d; }
@media (max-width: 767px) {
    .upay-head { flex-wrap: wrap; }
    .upay-amount { width: 100%; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; gap: 10px; text-align: left; }
    .upay-grid, .upay-steps { grid-template-columns: minmax(0, 1fr); }
    .upay-phone { display: block; }
    .upay-list > div { grid-template-columns: 104px minmax(0, 1fr); }
}

/* ==========================================================================
   Sign in, create account, confirm email, forgot / reset password
   A colourful side panel (floating product icons) next to the form card.
   Each page has its own colour: .is-red (sign in), .is-purple (create
   account), .is-green (confirm email), .is-violet (password).
   ========================================================================== */
.auth-page { padding-top: 18px; padding-bottom: 46px; }
.auth-wrap {
    --a1: #ff5a3c; --a2: #d10a12; --a3: #7c3aed; --atint: #fff1f2;
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); max-width: 980px; margin: 0 auto;
    border-radius: var(--radius-xl); background: #fff; box-shadow: 0 30px 60px -30px rgba(76, 29, 149, .35), 0 0 0 1px rgba(17, 19, 24, .04); overflow: hidden;
}
.auth-wrap.is-purple { --a1: #a855f7; --a2: #7c3aed; --a3: #db2777; --atint: #f5f3ff; }
.auth-wrap.is-green { --a1: #22c55e; --a2: #059669; --a3: #0ea5e9; --atint: #ecfdf5; }
.auth-wrap.is-violet { --a1: #8b5cf6; --a2: #4f46e5; --a3: #0ea5e9; --atint: #eef2ff; }

.auth-art {
    position: relative; display: flex; align-items: flex-end; min-height: 560px; padding: 34px; overflow: hidden; color: #fff;
    background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .22), transparent 40%), linear-gradient(150deg, var(--a1), var(--a2) 55%, var(--a3));
}
.auth-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.6px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 75%); }
.auth-float {
    position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; font-size: 26px;
    color: var(--a2); background: #fff; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .35); animation: auth-bob 6s ease-in-out infinite;
}
.auth-float.f1 { top: 12%; left: 12%; transform: rotate(-10deg); }
.auth-float.f2 { top: 9%; right: 16%; width: 54px; height: 54px; font-size: 22px; animation-delay: -1.5s; color: #d97706; }
.auth-float.f3 { top: 33%; left: 44%; width: 70px; height: 70px; font-size: 30px; animation-delay: -3s; color: var(--a3); }
.auth-float.f4 { top: 30%; left: 8%; width: 46px; height: 46px; font-size: 19px; animation-delay: -4.2s; color: #0d9488; }
.auth-float.f5 { top: 27%; right: 7%; width: 50px; height: 50px; font-size: 21px; animation-delay: -2.4s; color: #db2777; }
@keyframes auth-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.auth-art-text { position: relative; }
.auth-art-text strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; }
.auth-art-text p { margin: 8px 0 16px; font-size: 14px; opacity: .92; }
.auth-art-text ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.auth-art-text li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.auth-art-text li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-size: 13px; background: rgba(255, 255, 255, .2); }

.auth-card { display: grid; align-content: center; gap: 14px; padding: 40px 42px; }
.auth-icon {
    display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font-size: 24px; color: #fff;
    background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 14px 26px -12px var(--a2);
}
.auth-card h1 { margin: 2px 0 0; font-size: 27px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.auth-lead { margin: -4px 0 4px; font-size: 14px; color: var(--muted); }
.auth-lead strong { color: var(--ink); word-break: break-all; }
.auth-form { display: grid; gap: 14px; }
.auth-form .field input:focus { border-color: var(--a2); box-shadow: 0 0 0 4px var(--atint); }
.auth-form .btn-red { background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 12px 22px -12px var(--a2); }
.auth-optional { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.auth-row a, .auth-switch a, .auth-small a, .auth-resend a { font-weight: 600; color: var(--a2); }
.auth-check { display: flex !important; align-items: flex-start; gap: 8px; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text) !important; cursor: pointer; }
.auth-check input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--a2); }
.auth-switch { margin: 2px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--muted); text-align: center; }
.auth-small { margin: 0; font-size: 12.5px; color: var(--muted); }
.auth-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 13px; }
.auth-note.is-ok { color: #146c2e; background: #ecfdf3; }

/* Password: show / hide, and how strong a new one is */
.auth-pass { position: relative; }
.auth-pass input { padding-right: 48px; }
.auth-eye { position: absolute; top: 50%; right: 6px; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; color: var(--muted); background: none; cursor: pointer; }
.auth-eye:hover { color: var(--ink); background: var(--line-soft); }
.auth-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.auth-meter span { height: 5px; border-radius: 5px; background: var(--line); transition: background .25s; }
.auth-meter[data-level="1"] span:nth-child(-n+1) { background: #ef4444; }
.auth-meter[data-level="2"] span:nth-child(-n+2) { background: #f59e0b; }
.auth-meter[data-level="3"] span:nth-child(-n+3) { background: #22c55e; }
.auth-meter[data-level="4"] span { background: #16a34a; }
.auth-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }

/* The 6-digit code: one box per digit (site.js splits the single input into six boxes) */
.auth-code input { font: 700 26px/1 ui-monospace, Consolas, monospace; letter-spacing: .5em; text-align: center; }
.auth-code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.auth-code-boxes input {
    width: 100%; height: 58px; padding: 0; border: 2px solid var(--line); border-radius: 14px; font: 800 26px/1 ui-monospace, Consolas, monospace;
    letter-spacing: 0; text-align: center; color: var(--ink); background: #fff; caret-color: var(--a2); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.auth-code-boxes input:focus { outline: 0; border-color: var(--a2); box-shadow: 0 0 0 4px var(--atint); transform: translateY(-2px); }
.auth-code-boxes input.is-filled { border-color: color-mix(in srgb, var(--a2) 45%, #fff); background: var(--atint); }
.auth-code.has-error .auth-code-boxes input { border-color: #fca5a5; }
.auth-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.auth-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; font: 600 13px var(--font); color: var(--a2); background: none; cursor: pointer; }
.auth-link-btn:disabled { color: var(--soft); cursor: default; }

/* "Can't find the email? Check Spam" */
.spam-hint { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; color: #713f12; background: #fffbeb; border: 1px dashed #fcd34d; }
.spam-hint > i { flex: none; margin-top: 2px; font-size: 18px; color: #d97706; }
.spam-hint strong { color: #713f12; }
.spam-hint.is-compact { padding: 8px 12px; font-size: 12px; }

@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-lg); }
    .auth-art { min-height: 0; padding: 22px 20px; }
    .auth-float, .auth-art-text ul, .auth-art-text p { display: none; }
    .auth-art-text strong { font-size: 18px; }
    .auth-card { padding: 24px 18px 26px; }
    .auth-card h1 { font-size: 23px; }
    .auth-code-boxes { gap: 6px; }
    .auth-code-boxes input { height: 52px; font-size: 22px; border-radius: 12px; }
}

/* ==========================================================================
   My Account (prefix acc-): a quiet, businesslike panel. The account's sections down the side, white cards with
   hairline borders, plain headings, and one accent (the brand red) kept for the main action on a page.
   ========================================================================== */
.acc-page { --acc-line: #e4e5e9; --acc-soft: #f6f6f7; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 22px; padding-bottom: 56px; }

/* The side: who is signed in, and the sections */
.acc-nav { position: sticky; top: 92px; display: grid; gap: 4px; padding: 14px; border: 1px solid var(--acc-line); border-radius: 14px; background: #fff; }
.acc-id { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 6px 6px 14px; border-bottom: 1px solid var(--acc-line); }
.acc-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #fff; background: var(--ink); }
.acc-id-text { min-width: 0; }
.acc-id-text strong, .acc-id-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-id-text strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.acc-id-text small { font-size: 12px; color: var(--muted); }
.acc-links { display: grid; gap: 2px; }
.acc-links-more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--acc-line); }
.acc-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 8px; font: 500 13.5px var(--font); color: var(--text); text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.acc-link i { flex: none; width: 16px; font-size: 14px; text-align: center; color: var(--soft); transition: color .15s; }
.acc-link span { flex: 1; min-width: 0; }
.acc-link b { flex: none; min-width: 20px; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; color: #fff; background: var(--red); }
.acc-link:hover { color: var(--ink); background: var(--acc-soft); }
.acc-link.is-active { font-weight: 600; color: var(--ink); background: var(--acc-soft); }
.acc-link.is-active i { color: var(--red); }
.acc-link.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--red); }
.acc-logout { display: contents; }

/* The page beside it */
.acc-main { display: grid; gap: 16px; min-width: 0; }
.acc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 2px 2px 4px; }
.acc-head h1 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.acc-head p { max-width: 640px; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.acc-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-page .btn { border-radius: 8px; }
.acc-page .btn-red { box-shadow: none; }
.acc-page .btn-light { box-shadow: inset 0 0 0 1px #d9dade; }
.acc-page .btn-light:hover { filter: none; background: var(--acc-soft); box-shadow: inset 0 0 0 1px #c9cad0; }
.acc-page .btn-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 500; }
.acc-page .btn-sm i { font-size: 11px; }
.acc-page .btn:disabled { opacity: .5; cursor: not-allowed; }

.acc-card { display: grid; gap: 14px; min-width: 0; padding: 20px 22px; border: 1px solid var(--acc-line); border-radius: 14px; background: #fff; }
.acc-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.acc-card h2 > i { font-size: 13px; color: var(--soft); }
.acc-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.acc-card-head > a { font-size: 13px; font-weight: 500; color: var(--red); }
.acc-card-head > a:hover { text-decoration: underline; }
.acc-note, .acc-hint { font-size: 13px; line-height: 1.55; color: var(--muted); }
.acc-note strong { font-weight: 600; color: var(--ink); }
.acc-hint { margin-top: -6px; }
.acc-count { min-width: 22px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-align: center; color: #fff; background: var(--red); }

/* Status: a small plain label. Tones come from acc-t-* (also used by the design pages) */
.acc-pill { --pc: #475569; --pb: #f1f5f9; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--pc); background: var(--pb); white-space: nowrap; }
.acc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.acc-t-blue { --pc: #1d4ed8; --pb: #eff4ff; } .acc-t-purple { --pc: #6d28d9; --pb: #f4f1fe; } .acc-t-amber { --pc: #a35a05; --pb: #fdf6e3; }
.acc-t-teal { --pc: #0f766e; --pb: #e9f8f6; } .acc-t-green { --pc: #15803d; --pb: #ecf9f0; } .acc-t-red { --pc: #b91c1c; --pb: #fdeeee; } .acc-t-slate { --pc: #475569; --pb: #f1f5f9; }

/* Overview: what is waiting, the numbers, the lists */
.acc-todo { gap: 0; padding-bottom: 8px; }
.acc-todo .acc-card-head { justify-content: flex-start; padding-bottom: 12px; }
.acc-todo-row { --pc: #475569; --pb: #f1f5f9; display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--acc-line); }
.acc-todo-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 15px; color: var(--pc); background: var(--pb); }
.acc-todo-text { flex: 1; min-width: 0; }
.acc-todo-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.acc-todo-text small { display: block; font-size: 12.5px; color: var(--muted); }
.acc-todo-row:hover .acc-todo-text strong { color: var(--red); }
.acc-todo-row .btn { flex: none; }
.acc-clear { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0 10px; border-top: 1px solid var(--acc-line); font-size: 13.5px; color: var(--muted); }
.acc-clear i { margin-top: 3px; color: var(--c-green); }

.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.acc-stat { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--acc-line); border-radius: 14px; background: #fff; transition: border-color .15s; }
.acc-stat:hover { border-color: #c9cad0; }
.acc-stat span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.acc-stat strong { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-stat small { font-size: 12px; color: var(--soft); }

.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.acc-grid.is-narrow { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.acc-col { display: grid; gap: 16px; min-width: 0; }
.acc-facts { display: grid; gap: 10px; margin: 0; }
.acc-facts > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; font-size: 13px; }
.acc-facts dt { color: var(--muted); }
.acc-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.acc-facts dd a { font-weight: 500; color: var(--red); }
.acc-meter { height: 6px; overflow: hidden; border-radius: 6px; background: var(--acc-soft); }
.acc-meter span { display: block; height: 100%; border-radius: 6px; background: var(--ink); }
.acc-help { gap: 2px; }
.acc-help .acc-card-head { margin-bottom: 8px; }
.acc-help > a { display: flex; align-items: center; gap: 12px; margin: 0 -10px; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.acc-help > a i { width: 16px; font-size: 14px; text-align: center; color: var(--soft); }
.acc-help > a:hover { color: var(--ink); background: var(--acc-soft); }
.dsp-quiet { display: flex; align-items: center; gap: 12px; margin: 6px -10px 0; padding: 9px 10px; border-top: 1px solid var(--acc-line); border-radius: 0 0 8px 8px; font-size: 13px; text-align: left; color: var(--muted); }
.dsp-quiet i { width: 16px; font-size: 14px; text-align: center; color: var(--soft); }
.dsp-quiet:hover { color: #b91c1c; }
.dsp-quiet:hover i { color: #b91c1c; }

.acc-filter { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--acc-line); }
.acc-filter a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.acc-filter a:hover { color: var(--ink); background: var(--acc-soft); }
.acc-filter a.is-active { color: #fff; background: var(--ink); }

/* An order in a list */
.acc-order { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--acc-line); }
.acc-card-head + .acc-order, .acc-filter + .acc-order { padding-top: 2px; border-top: 0; }
.acc-order:last-of-type { padding-bottom: 2px; }
.acc-order-top { display: flex; align-items: flex-start; gap: 14px; }
.acc-order-img { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--acc-line); border-radius: 10px; color: var(--soft); background: var(--acc-soft); }
.acc-order-img img { width: 100%; height: 100%; object-fit: cover; }
.acc-order-img.is-design img { width: 86%; height: 86%; object-fit: contain; }
.acc-order-main { flex: 1; min-width: 0; }
.acc-order-main strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.acc-order-main small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.acc-order-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.acc-order-side strong { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-paid { font-size: 12px; font-weight: 500; color: var(--c-green); }
.acc-unpaid { font-size: 12px; font-weight: 500; color: #a35a05; }
.acc-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.acc-steps li { display: grid; gap: 6px; font-size: 11px; color: var(--soft); }
.acc-steps li::before { content: ""; height: 4px; border-radius: 4px; background: #e9eaee; }
.acc-steps li.is-done { color: var(--text); }
.acc-steps li.is-done::before { background: var(--ink); }
.acc-order-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.acc-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; }
.acc-empty strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.acc-empty p { max-width: 440px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.acc-empty p a { color: var(--red); }
.acc-empty .btn { margin-top: 6px; }

/* Institute details and password */
.acc-welcome { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid #cfe9d8; border-radius: 14px; background: #f3fbf6; }
.acc-welcome > i { margin-top: 3px; font-size: 18px; color: var(--c-green); }
.acc-welcome strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.acc-welcome p { margin-top: 2px; font-size: 13.5px; color: var(--text); }
.acc-welcome a { color: var(--red); }
.acc-form { gap: 16px; }
.acc-form .acc-card-head { padding-top: 14px; border-top: 1px solid var(--acc-line); }
.acc-form .acc-card-head:first-of-type { padding-top: 0; border-top: 0; }
.acc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.acc-fields .is-wide { grid-column: span 3; }
.acc-fields input:disabled { color: var(--muted); background: var(--acc-soft); }
.acc-page .field input, .acc-page .field select, .acc-page .field textarea { border-color: #d9dade; border-radius: 8px; }
.acc-page .field input:focus, .acc-page .field select:focus, .acc-page .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 19, 24, .08); }
.acc-type { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-type label { cursor: pointer; }
.acc-type input { position: absolute; opacity: 0; }
.acc-type span { display: inline-block; padding: 7px 14px; border: 1px solid #d9dade; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text); background: #fff; transition: all .15s; }
.acc-type input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.acc-type input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.acc-form-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--acc-line); }
.acc-form-bar p { font-size: 13px; color: var(--muted); }
.acc-form-bar i { color: var(--soft); }
.acc-safety ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-safety li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text); }
.acc-safety li i { margin-top: 4px; font-size: 12px; color: var(--c-green); }
.acc-brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.acc-brand-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px dashed #c9cad0; border-radius: 10px; background: var(--acc-soft); cursor: pointer; transition: border-color .2s, background .2s; }
.acc-brand-drop:hover { border-color: var(--ink); background: #fff; }
.acc-brand-drop.has-file { border-style: solid; background: #fff; }
.acc-brand-drop.has-error { border-color: #f1a5a5; }
.acc-brand-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.acc-brand-pic { flex: none; display: grid; place-items: center; width: 68px; height: 68px; overflow: hidden; border: 1px solid var(--acc-line); border-radius: 8px; font-size: 22px; color: var(--soft); background: #fff; }
.acc-brand-pic img { width: 100%; height: 100%; object-fit: contain; }
.acc-brand-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.acc-brand-text small { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   My designs (prefix dsp-), inside the account panel: the list, one design step by step (every version, any two
   compared), the customer's data, the proof, then the order with a price that follows the quantity, and saved designs.
   ========================================================================== */
.dsp-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--acc-line); }
.dsp-row:first-child, .acc-card-head + .dsp-row { padding-top: 2px; border-top: 0; }
.dsp-row:last-child { padding-bottom: 2px; }
.dsp-row-pic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--acc-line); border-radius: 10px; color: var(--soft); background: var(--acc-soft); }
.dsp-row-pic img { width: 84%; height: 84%; object-fit: contain; }
.dsp-row-text { flex: 1; min-width: 0; }
.dsp-row-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.dsp-row-text small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.dsp-row:hover .dsp-row-text strong { color: var(--red); }
.dsp-row-status { display: grid; justify-items: end; gap: 4px; }
.dsp-row-next { font-size: 12px; font-weight: 600; color: var(--red); }
.dsp-row-go { font-size: 12px; color: var(--soft); }
.dsp-how ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.dsp-how li { display: grid; gap: 8px; align-content: start; }
.dsp-how li > b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--acc-soft); border: 1px solid var(--acc-line); }
.dsp-how li span { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dsp-how li strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }

.dsp-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dsp-crumbs a:hover { color: var(--red); }
.dsp-crumbs i { font-size: 9px; color: var(--soft); }
.dsp-crumbs span { font-weight: 500; color: var(--ink); }
.dsp-error { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #f3c0c0; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #991b1b; background: #fdf1f1; }
.dsp-error i { margin-top: 3px; }
.dsp-muted { font-size: 12.5px; color: var(--muted); }
.dsp-tag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--text); background: var(--acc-soft); border: 1px solid var(--acc-line); }
.dsp-tag.is-green { color: #15803d; background: #ecf9f0; border-color: #cfe9d8; }
.dsp-tag i { font-size: 10px; }

/* The top: what it is, and the five steps */
.dsp-head { gap: 20px; }
.dsp-head-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.dsp-head-top h1 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.dsp-head-top p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.dsp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.dsp-steps li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.dsp-steps li + li::before { content: ""; position: absolute; top: 14px; right: 50%; z-index: 0; width: 100%; height: 2px; background: #e4e5e9; }
.dsp-steps li.is-done + li::before { background: var(--ink); }
.dsp-steps span { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #e4e5e9; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--soft); background: #fff; }
.dsp-steps li.is-done span { color: #fff; border-color: var(--ink); background: var(--ink); }
.dsp-steps li.is-now span { color: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px var(--red-50); }
.dsp-steps small { padding: 0 4px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.dsp-steps li.is-done small { color: var(--text); }
.dsp-steps li.is-now small { font-weight: 600; color: var(--ink); }

.dsp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.dsp-main, .dsp-aside { display: grid; gap: 16px; min-width: 0; }
.dsp-aside { position: sticky; top: 92px; }

/* What happens now */
.dsp-next { gap: 8px; }
.dsp-next.is-yours { border-color: #f0b8bb; box-shadow: inset 3px 0 0 var(--red); }
.dsp-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dsp-next.is-yours .dsp-eyebrow { color: var(--red); }
.dsp-next h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.dsp-next > p { max-width: 680px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.dsp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dsp-box { display: grid; gap: 10px; margin-top: 10px; padding: 16px; border: 1px solid var(--acc-line); border-radius: 10px; background: var(--acc-soft); }
.dsp-box > label { font-size: 13px; font-weight: 600; color: var(--ink); }
.dsp-box textarea, .dsp-upload textarea, .dsp-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9dade; border-radius: 8px; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: #fff; resize: vertical; }
.dsp-box textarea:focus, .dsp-upload textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 19, 24, .08); }
.dsp-attach { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed #c9cad0; border-radius: 8px; font-size: 13px; font-weight: 400 !important; color: var(--muted) !important; background: #fff; cursor: pointer; }
.dsp-attach input, .dsp-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dsp-attach i { color: var(--soft); }
.dsp-box-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* The design: one version in 3D, or two side by side */
.dsp-versions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--acc-soft); justify-self: start; width: fit-content; max-width: 100%; }
.dsp-versions button { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; }
.dsp-versions button:hover { color: var(--ink); }
.dsp-versions button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .12); }
[data-dsp-single] { display: grid; gap: 12px; }
.dsp-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px solid var(--acc-line); border-radius: 12px; background: radial-gradient(circle at 50% 38%, #fff, #f1f1f4 78%); perspective: 1300px; }
.dsp-stage.has-back { cursor: pointer; }
.dsp-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dsp-stage .c3d { position: absolute; inset: 22px; width: auto; height: auto; }
.dsp-stage.is-big { width: min(440px, 100%); margin-inline: auto; }
/* A design that is a plain picture (a product shown as mockups, not in 3D) */
.dsp-stage.is-flat { overflow: hidden; background: #f6f6f7; }
.dsp-stage.is-flat > img { width: 100%; height: 100%; object-fit: contain; }
.dsp-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; cursor: zoom-in; }
.dsp-photo img { width: 100%; height: 100%; object-fit: cover; }
.dsp-stage.is-big .c3d { inset: 34px; }
.dsp-icon-btn { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--acc-line); border-radius: 8px; font-size: 13px; color: var(--text); background: #fff; cursor: zoom-in; transition: border-color .15s, color .15s; }
.dsp-icon-btn:hover { color: var(--ink); border-color: #c9cad0; }
.dsp-caption { font-size: 13px; text-align: center; color: var(--muted); }
.dsp-caption strong { font-weight: 600; color: var(--ink); }
.dsp-view-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dsp-quote { padding: 10px 14px; border-left: 3px solid var(--acc-line); font-size: 13px; color: var(--muted); }
.dsp-compare { display: grid; gap: 14px; }
.dsp-compare-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.dsp-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--acc-soft); }
.dsp-seg button { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.dsp-seg button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .12); }
.dsp-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dsp-compare-col { display: grid; gap: 8px; min-width: 0; }
.dsp-compare-col select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d9dade; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); background: #fff; }
.dsp-compare-pic { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; padding: 18px; border: 1px solid var(--acc-line); border-radius: 12px; background: radial-gradient(circle at 50% 38%, #fff, #f1f1f4 78%); cursor: zoom-in; }
.dsp-compare-pic img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(17, 19, 24, .18)); }
.dsp-compare-col small { font-size: 12px; text-align: center; color: var(--muted); }
.dsp-over { display: grid; gap: 10px; }
.dsp-over-stage { position: relative; width: min(440px, 100%); aspect-ratio: 1 / 1; margin-inline: auto; border: 1px solid var(--acc-line); border-radius: 12px; background: radial-gradient(circle at 50% 38%, #fff, #f1f1f4 78%); }
.dsp-over-stage img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; }
.dsp-over-slide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(440px, 100%); margin-inline: auto; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.dsp-over-slide input { width: 100%; accent-color: var(--ink); }
.dsp-over .acc-note { text-align: center; }

/* Files: the proof, the data sent */
.dsp-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dsp-file { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--acc-line); border-radius: 10px; transition: border-color .15s, background .15s; }
.dsp-file:hover { border-color: #c9cad0; background: var(--acc-soft); }
.dsp-file-pic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; font-size: 24px; color: #c0392b; background: var(--acc-soft); }
.dsp-file-pic img { width: 100%; height: 100%; object-fit: cover; }
.dsp-file-text { min-width: 0; }
.dsp-file-text strong { display: block; overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.dsp-file-text small { font-size: 12px; color: var(--muted); }
.dsp-more { font-size: 13px; color: var(--muted); }
.dsp-more summary { font-weight: 500; color: var(--text); cursor: pointer; }
.dsp-more p { margin-top: 8px; }
.dsp-more a { color: var(--red); }
.dsp-sent { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--acc-line); border-radius: 10px; }
.dsp-sent li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-top: 1px solid var(--acc-line); font-size: 13px; }
.dsp-sent li:first-child { border-top: 0; }
.dsp-sent li > i { width: 16px; text-align: center; color: var(--soft); }
.dsp-sent a { min-width: 0; overflow: hidden; font-weight: 500; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.dsp-sent a:hover { color: var(--red); }
.dsp-sent small { flex: 1; color: var(--muted); }
.dsp-sent-ok { font-size: 12px; font-weight: 500; color: var(--c-green); }
.dsp-upload { display: grid; gap: 10px; }
.dsp-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed #c9cad0; border-radius: 10px; text-align: center; background: var(--acc-soft); cursor: pointer; transition: background .15s, border-color .15s; }
.dsp-drop:hover, .dsp-drop.is-over { border-color: var(--ink); background: #fff; }
.dsp-drop > i { font-size: 20px; color: var(--muted); }
.dsp-drop strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.dsp-drop span { max-width: 520px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.dsp-drop.has-files { border-style: solid; border-color: var(--ink); background: #fff; }
.dsp-drop.has-files span { font-weight: 500; color: var(--ink); }

/* Order, pay, print: three numbered parts */
.dsp-finish { scroll-margin-top: 96px; }
#data, #proof, #design { scroll-margin-top: 96px; }
.dsp-flow { display: grid; margin: 0; padding: 0; list-style: none; }
.dsp-flow > li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.dsp-flow > li:last-child { padding-bottom: 0; }
.dsp-flow > li:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: #e4e5e9; }
.dsp-flow > li.is-done:not(:last-child)::before { background: var(--ink); }
.dsp-flow-no { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #e4e5e9; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--soft); background: #fff; }
.is-done > .dsp-flow-no { color: #fff; border-color: var(--ink); background: var(--ink); }
.is-now > .dsp-flow-no { color: var(--red); border-color: var(--red); }
.dsp-flow-body { display: grid; gap: 10px; min-width: 0; padding-top: 4px; }
.dsp-flow-body h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.is-later > .dsp-flow-body h3 { color: var(--muted); }
.dsp-flow-body > p { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.is-later > .dsp-flow-body > p { color: var(--muted); }
.dsp-flow-body > p a { font-weight: 500; color: var(--red); }
.dsp-flow-body > .btn { justify-self: start; }
.dsp-warn { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #f0dfb4; border-radius: 8px; font-size: 13px; color: #7c4a03; background: #fdf8ea; }
.dsp-warn i { margin-top: 3px; }
.dsp-warn a { font-weight: 600; text-decoration: underline; }
.dsp-order { display: grid; gap: 12px; }
.dsp-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dsp-qty label, .dsp-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.dsp-label { margin: 6px 0 0; }
.dsp-label span { font-weight: 400; color: var(--muted); }
.dsp-qty-row { display: inline-flex; border: 1px solid #d9dade; border-radius: 8px; background: #fff; }
.dsp-qty-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 19, 24, .08); }
.dsp-qty-row button { width: 42px; font-size: 18px; color: var(--text); }
.dsp-qty-row button:hover { background: var(--acc-soft); }
.dsp-qty-row input { width: 110px; height: 44px; border: 0; border-inline: 1px solid #e4e5e9; font-size: 18px; font-weight: 700; text-align: center; color: var(--ink); background: none; outline: 0; -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.dsp-qty-row input::-webkit-outer-spin-button, .dsp-qty-row input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.dsp-qty > small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dsp-qty > small.is-warn { font-weight: 500; color: #a35a05; }
.dsp-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dsp-tiers button { display: grid; gap: 1px; padding: 6px 12px; border: 1px solid #d9dade; border-radius: 8px; text-align: left; background: #fff; transition: border-color .15s, background .15s; }
.dsp-tiers button:hover { border-color: var(--ink); }
.dsp-tiers span { font-size: 11.5px; color: var(--muted); }
.dsp-tiers b { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dsp-tiers li.is-on button { border-color: var(--ink); background: var(--ink); }
.dsp-tiers li.is-on span { color: rgba(255, 255, 255, .7); }
.dsp-tiers li.is-on b { color: #fff; }
.dsp-nudge { display: flex; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.dsp-nudge i { margin-top: 3px; color: var(--c-green); }
.dsp-nudge b { font-weight: 600; color: var(--ink); }
.dsp-price { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--acc-line); border-radius: 10px; font-size: 13.5px; background: var(--acc-soft); font-variant-numeric: tabular-nums; transition: opacity .15s; }
.dsp-order.is-pricing .dsp-price { opacity: .6; }
.dsp-price > div { display: flex; justify-content: space-between; gap: 12px; color: var(--text); }
.dsp-price .is-total { margin-top: 2px; padding-top: 10px; border-top: 1px solid #dcdde2; font-size: 17px; font-weight: 700; color: var(--ink); }
.dsp-price .is-saved { align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: #15803d; background: #ecf9f0; }
.dsp-price .is-saved b { font-size: 13.5px; font-weight: 700; }
.dsp-price .is-saved small { font-size: 11.5px; }
.dsp-price .is-saved i { font-style: normal; }
.dsp-price .is-saved > span:first-child i { margin-right: 4px; }
.dsp-price .is-fresh, .dsp-plan .is-fresh { animation: dsp-fresh .5s ease-out; }
@keyframes dsp-fresh { from { background: #fff1c2; } to { background: transparent; } }
.dsp-plans { display: grid; gap: 8px; }
.dsp-plan { position: relative; display: block; cursor: pointer; }
.dsp-plan[hidden] { display: none; }
.dsp-plan input { position: absolute; opacity: 0; }
.dsp-plan > span { display: block; padding: 12px 14px 12px 42px; border: 1px solid #d9dade; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dsp-plan > span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border: 2px solid #c4c5cc; border-radius: 50%; background: #fff; transition: all .15s; }
.dsp-plan strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.dsp-plan strong b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dsp-plan strong i { margin-right: 4px; font-size: 13px; color: var(--muted); }
.dsp-plan small { font-size: 12.5px; color: var(--muted); }
.dsp-plan small i { font-style: normal; }
.dsp-plan input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dsp-plan input:checked + span::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.dsp-plan input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.dsp-ship { font-size: 13px; color: var(--muted); }
.dsp-ship i { margin-right: 4px; color: var(--soft); }
.dsp-ship a, .dsp-sure a { font-weight: 500; color: var(--red); }
.dsp-sure { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.dsp-sure input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--ink); }

/* Activity */
.dsp-log { display: grid; margin: 0; padding: 0; list-style: none; }
.dsp-log li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.dsp-log li:last-child { padding-bottom: 0; }
.dsp-log li:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: -4px; width: 2px; background: #e9eaee; }
.dsp-log-dot { --pc: #475569; width: 12px; height: 12px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1px var(--acc-line); }
.dsp-log-top { font-size: 13.5px; color: var(--ink); }
.dsp-log-top strong { font-weight: 600; }
.dsp-log-top small { margin-left: 4px; font-size: 12px; color: var(--muted); }
.dsp-log-msg { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.dsp-log-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dsp-log-files a, .dsp-log-files .dsp-view { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--acc-line); border-radius: 6px; font-size: 12px; color: var(--text); }
.dsp-log-files a:hover, .dsp-log-files .dsp-view:hover { color: var(--ink); border-color: #c9cad0; }
/* A design or proof picture opened in the page's own viewer (it can't be opened by itself) */
.dsp-view { display: inline; font: inherit; font-weight: 500; color: var(--red); cursor: zoom-in; }
.dsp-view:hover { text-decoration: underline; }
.dsp-log-files .dsp-view:hover { text-decoration: none; }
button.dsp-file { width: 100%; text-align: left; cursor: zoom-in; }
.dsp-log-files i { color: var(--soft); }

/* Pop-ups: lock, send to print */
.dsp-dialog { width: min(460px, calc(100vw - 32px)); padding: 26px; border: 0; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(17, 19, 24, .45); }
.dsp-dialog::backdrop { background: rgba(17, 19, 24, .5); }
.dsp-dialog h2 { margin-bottom: 8px; padding-right: 30px; font-size: 19px; font-weight: 700; color: var(--ink); }
.dsp-dialog p { font-size: 14px; line-height: 1.6; color: var(--text); }
.dsp-dialog p strong { color: var(--ink); }
.dsp-dialog form { display: grid; gap: 16px; margin-top: 16px; }
.dsp-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.dsp-dialog .btn { border-radius: 8px; }
.dsp-dialog .btn-red { box-shadow: none; }
.dsp-dialog .btn-light { box-shadow: inset 0 0 0 1px #d9dade; }
.dsp-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.dsp-x:hover { color: var(--ink); background: #f6f6f7; }

/* Saved designs */
.dsp-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dsp-saved-card { gap: 12px; padding: 14px; }
.dsp-saved-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.dsp-saved-text small { font-size: 12.5px; color: var(--muted); }
.dsp-saved-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Order page: the card design the order is for (shown to its owner) */
.odesign { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; }
.odesign .dsp-stage { --acc-line: #e4e5e9; }
.odesign-text { display: grid; gap: 8px; }
.odesign-text p { font-size: 13.5px; color: var(--text); }
.odesign-text ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.odesign-text ul a { font-weight: 500; color: var(--red); }
.odesign-text .row-actions { justify-content: flex-start; }

@media (max-width: 1180px) {
    .acc-grid, .dsp-grid { grid-template-columns: minmax(0, 1fr); }
    .dsp-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .acc-grid > aside.acc-col { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
}
@media (max-width: 900px) {
    .acc-page { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 14px; }
    .acc-nav { position: static; padding: 10px; }
    .acc-id { margin-bottom: 4px; padding: 4px 4px 10px; }
    .acc-links, .acc-links-more { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .acc-links::-webkit-scrollbar { display: none; }
    .acc-links-more { margin-top: 4px; padding-top: 6px; }
    .acc-link { flex: none; width: auto; gap: 8px; padding: 8px 12px; }
    .acc-link.is-active::before { display: none; }
    .acc-link.is-active { color: #fff; background: var(--ink); }
    .acc-link.is-active i { color: #fff; }
    .acc-grid.is-narrow { grid-template-columns: minmax(0, 1fr); }
    .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acc-fields { grid-template-columns: minmax(0, 1fr); }
    .acc-fields .is-wide { grid-column: auto; }
    .dsp-how ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .dsp-how li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
    .acc-head h1 { font-size: 21px; }
    .acc-head-actions, .acc-head-actions .btn { width: 100%; }
    .acc-card { padding: 16px 14px; }
    .acc-todo-row { flex-wrap: wrap; }
    .acc-todo-row .btn { margin-left: 52px; }
    .acc-order-top { flex-wrap: wrap; }
    .acc-order-side { width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; }
    .acc-steps li span { display: none; }
    .acc-brand { grid-template-columns: minmax(0, 1fr); }
    .dsp-row { flex-wrap: wrap; }
    .dsp-row-status { width: 100%; padding-left: 74px; justify-items: start; }
    .dsp-row-go { display: none; }
    .dsp-head-top h1 { font-size: 19px; }
    .dsp-steps small { font-size: 10.5px; }
    .dsp-actions .btn, .dsp-box-actions .btn { width: 100%; }
    .dsp-order-grid, .dsp-compare-grid { grid-template-columns: minmax(0, 1fr); }
    .dsp-compare-grid { gap: 18px; }
    .dsp-flow > li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
    .dsp-flow-no { width: 26px; height: 26px; }
    .dsp-flow > li:not(:last-child)::before { left: 12px; top: 30px; }
    .dsp-saved { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .odesign { grid-template-columns: minmax(0, 1fr); }
    .odesign .dsp-stage { width: min(240px, 100%); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .dsp-price .is-fresh, .dsp-plan .is-fresh { animation: none; }
}

/* Header: signed in */
.hact-avatar,
.hact-text .hact-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #ff5a3c, var(--red));
    box-shadow: 0 2px 6px rgba(227, 24, 55, 0.28);
    flex-shrink: 0;
    letter-spacing: -0.2px;
    user-select: none;
    text-transform: uppercase;
}
.co-account { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--text); background: #f5f3ff; }
.co-account i { margin-top: 2px; color: var(--c-purple); }
.co-account a { font-weight: 700; color: var(--c-purple); }
.co-account.is-in { background: #ecfdf3; }
.co-account.is-in i { color: var(--c-green); }

@media (prefers-reduced-motion: reduce) {
    .auth-float { animation: none; }
}
.order-spam { margin: -4px 0 16px; }

/* =========================================================================
   Design studio (prefix stu-): Browse designs (every product with its designs), one product's designs, the
   pop-ups, and the "Browse designs" button on a product's page. Calm and businesslike like My Account: white
   cards, hairline borders, the brand red kept for the one main action. A design turns in 3D (c3d-, partials/card3d)
   or is a set of mockup pictures to look through (stu-photos). My designs has its own styles (dsp-).
   ========================================================================= */
.stu-page { padding-bottom: 52px; }
.stu-page .btn, .stu-dialog .btn { border-radius: 8px; }
.stu-page .btn-red, .stu-dialog .btn-red { box-shadow: none; }
.stu-page .btn-light, .stu-dialog .btn-light { box-shadow: inset 0 0 0 1px #d9dade; }
.stu-page .btn-light:hover, .stu-dialog .btn-light:hover { filter: none; background: #f6f6f7; box-shadow: inset 0 0 0 1px #c9cad0; }
.stu-page .btn-sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 500; }
.stu-page .btn-sm i { font-size: 11px; }

.stu-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 44px; align-items: center; padding: 28px 32px; border: 1px solid #e4e5e9; border-radius: 16px; background: #fff; }
.stu-hero-copy { max-width: 700px; }
.stu-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.stu-hero h1 { margin: 6px 0 8px; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.stu-hero p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.stu-hero p strong { font-weight: 600; color: var(--ink); }
.stu-hero .stu-hero-count { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--text); }
.stu-hero-count a { color: var(--red); }
.stu-hero-count a:hover { text-decoration: underline; }
.stu-steps { display: grid; gap: 10px; margin: 0; padding: 4px 0 4px 32px; border-left: 1px solid #e4e5e9; list-style: none; }
.stu-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.stu-steps span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #c9cad0; border-radius: 50%; font-size: 11.5px; font-weight: 600; color: var(--ink); }

/* Straight to a product's designs */
.stu-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.stu-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #e4e5e9; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); background: #fff; transition: border-color .15s, color .15s; }
.stu-nav a b { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.stu-nav a:hover { color: var(--ink); border-color: var(--ink); }
.stu-nav a i { font-size: 11px; }
.stu-nav-saved { margin-left: auto; }
.stu-nav-saved i { color: var(--c-pink); }
.stu-nav.is-foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid #e4e5e9; }
.stu-nav.is-foot span { margin-right: 4px; font-size: 13px; color: var(--muted); }

/* A product and its designs */
.stu-section { margin-top: 34px; scroll-margin-top: 96px; }
.stu-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.stu-section-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.stu-section-head p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.stu-section-head p a, .stu-section-more a { font-weight: 500; color: var(--red); }
.stu-section-head p a:hover, .stu-section-more a:hover { text-decoration: underline; }
.stu-section-more { margin-top: 16px; font-size: 13.5px; text-align: center; }
.stu-section-more i { font-size: 11px; }

/* One product's page: single / double side, and how to look */
.stu-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.stu-sides { display: inline-flex; padding: 4px; border: 1px solid #e4e5e9; border-radius: 12px; background: #f6f6f7; }
.stu-sides a { display: grid; padding: 7px 18px; border-radius: 9px; text-align: center; color: var(--muted); transition: background .15s, color .15s; }
.stu-sides strong { font-size: 13.5px; font-weight: 600; color: inherit; }
.stu-sides small { font-size: 11.5px; }
.stu-sides a:hover { color: var(--ink); }
.stu-sides a.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .14); }
.stu-tip { flex: 1; min-width: 260px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.stu-tip > i { margin-right: 4px; color: var(--soft); }
.stu-tip-save { display: block; }
.stu-tip-save i { margin-right: 4px; color: var(--c-pink); }
.stu-tip-save a { margin-left: 4px; font-weight: 500; color: var(--red); }
.stu-tip-save a:hover { text-decoration: underline; }

/* The designs */
.stu-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 16px; }
.stu-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4e5e9; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.stu-card:hover { border-color: #c9cad0; box-shadow: 0 14px 30px -22px rgba(17, 19, 24, .45); }
.stu-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; perspective: 1300px; background: radial-gradient(circle at 50% 38%, #fff, #f1f1f4 78%); }
.stu-stage.has-back { cursor: pointer; }
.stu-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.stu-stage .c3d { position: absolute; inset: 26px 22px 34px; width: auto; height: auto; }
.stu-floor { position: absolute; left: 24%; right: 24%; bottom: 14px; height: 12px; border-radius: 50%; background: radial-gradient(rgba(17, 19, 24, .18), transparent 70%); transition: transform .9s var(--ease-out); }
.stu-card:hover .stu-floor { transform: scaleX(.86); }
/* A design shown as mockup pictures: its main picture, a click looks through them all */
.stu-stage.is-photo { background: #f6f6f7; }
.stu-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; cursor: zoom-in; }
.stu-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.stu-card:hover .stu-photo img { transform: scale(1.03); }
.stu-photo span { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #fff; background: rgba(17, 19, 24, .72); }
.stu-zoom-btn, .stu-save-btn { position: absolute; top: 10px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e4e5e9; border-radius: 8px; font-size: 14px; background: #fff; transition: color .15s, border-color .15s, opacity .2s; }
.stu-zoom-btn { right: 10px; color: var(--text); cursor: zoom-in; opacity: 0; }
.stu-zoom-btn:hover { color: var(--ink); border-color: #c9cad0; }
.stu-card:hover .stu-zoom-btn, .stu-zoom-btn:focus-visible { opacity: 1; }
@media (hover: none) { .stu-zoom-btn { opacity: 1; } }
/* The heart: save a design to look at again (kept in My Account › Saved designs) */
.stu-save-btn { left: 10px; color: var(--soft); cursor: pointer; }
.stu-save-btn:hover { color: var(--c-pink); border-color: #c9cad0; }
.stu-save-btn.is-saved { color: var(--c-pink); }
.stu-save-btn:disabled { opacity: .6; }
.stu-card-foot { display: grid; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid #e4e5e9; }
.stu-card-foot > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.stu-card-foot strong { overflow: hidden; font-size: 14px; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.stu-card-foot small { flex: none; font-size: 12px; color: var(--muted); }
.stu-card-foot .btn { width: 100%; }

.stu-own { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding: 18px 22px; border: 1px solid #e4e5e9; border-radius: 14px; background: #fff; }
.stu-own strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.stu-own p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.stu-empty { margin-top: 24px; padding: 28px 22px; border: 1px solid #e4e5e9; border-radius: 14px; font-size: 14px; text-align: center; color: var(--muted); background: #fff; }
.stu-empty a { font-weight: 500; color: var(--red); }

/* Cards in 3D (partials/card3d): the PNG's own shape with real thickness, a shine, the back on the other side */
.c3d { --tx: 7deg; --ty: -16deg; --flip: 0deg; --zoom: 1; position: relative; width: 100%; height: 100%; container-type: inline-size; perspective: 1500px; }
.c3d-body {
    --depth: 3.6cqw; position: absolute; inset: 0; transform-style: preserve-3d;
    transform: scale(var(--zoom)) rotateX(var(--tx)) rotateY(calc(var(--ty) + var(--flip))); transition: transform .85s var(--ease-out);
}
.c3d.is-dragging .c3d-body { transition: none; }
.c3d.is-flipped, [data-c3d-area]:hover .c3d.hover-flip { --flip: 180deg; }
.c3d.is-flipped.hover-flip:hover { --flip: 180deg; }
/* The edge: thin layers of clear acrylic cut to the card's shape, stacked through its thickness (about 3 mm) */
.c3d-edge {
    position: absolute; inset: 0; transform: translateZ(calc((var(--k) - .5) * var(--depth)));
    -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
    background: linear-gradient(120deg, #c4d9e6, #f5fbff 38%, #a6c3d6 62%, #e0edf4);
}
.c3d-edge:nth-child(3n) { background: linear-gradient(120deg, #b3cbdb, #e6f2f9 40%, #98b8cc 64%, #d3e4ee); }
.c3d-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.c3d-face[hidden] { display: none; }
.c3d-front { transform: translateZ(calc(var(--depth) / 2 + .6px)); }
.c3d-back { transform: rotateY(180deg) translateZ(calc(var(--depth) / 2 + .6px)); }
.c3d-face img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* Shine, cut to the card's shape: a soft glaze, and a streak of light that sweeps across */
.c3d-shine {
    position: absolute; inset: 0; pointer-events: none;
    -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
    background:
        linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .7) 46%, rgba(255, 255, 255, .18) 52%, transparent 62%) 130% 0 / 260% 100% no-repeat,
        linear-gradient(160deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, 0) 38%);
    mix-blend-mode: screen; transition: background-position 1.1s var(--ease-out);
}
[data-c3d-area]:hover .c3d-shine, .c3d.is-flipped .c3d-shine, .c3d.is-dragging .c3d-shine { background-position: -40% 0, 0 0; }

/* The big view: drag to turn it round, flip, zoom */
.c3d-zoom {
    width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 16px 18px 18px; border: 0; border-radius: 16px; color: #fff;
    background: radial-gradient(circle at 50% 32%, #2c303b, #101216 74%); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .6);
}
.c3d-zoom::backdrop { background: rgba(17, 19, 24, .7); }
.c3d-zoom[open] { animation: stu-pop .35s var(--ease-out); }
.c3d-zoom-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c3d-zoom-top strong { font-size: 16px; }
.c3d-zoom-x { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; font-size: 16px; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.c3d-zoom-x:hover { background: rgba(255, 255, 255, .26); }
.c3d-zoom-stage { position: relative; width: min(560px, 100%, 62vh); aspect-ratio: 1; margin: 8px auto 0; overflow: hidden; border-radius: 14px; touch-action: none; cursor: grab; user-select: none; }
.c3d-zoom-stage:active { cursor: grabbing; }
.c3d-zoom-stage .c3d { position: absolute; inset: 4%; width: auto; height: auto; translate: var(--px, 0) var(--py, 0); transition: translate .85s var(--ease-out); }
.c3d-zoom-stage .c3d.is-dragging { transition: none; }
.c3d-zoom-floor { position: absolute; left: 24%; right: 24%; bottom: 0; height: 5%; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .6), transparent 70%); }
.c3d-zoom-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.c3d-zoom-bar button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 13px var(--font); color: #fff; background: rgba(255, 255, 255, .13); cursor: pointer; }
.c3d-zoom-bar button:hover { background: rgba(255, 255, 255, .24); }
.c3d-zoom-hint { margin: 10px 0 0; font-size: 12.5px; text-align: center; color: rgba(255, 255, 255, .62); }
@keyframes stu-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* The pictures of a mockup design, one at a time (partials/design-photos) */
.stu-photos { width: min(940px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 14px 16px 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 40px 100px -24px rgba(17, 19, 24, .55); }
.stu-photos::backdrop { background: rgba(17, 19, 24, .62); }
.stu-photos-top { display: flex; align-items: center; gap: 12px; }
.stu-photos-top strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.stu-photos-top span { font-size: 12.5px; color: var(--muted); }
.stu-photos-x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border-radius: 8px; color: var(--muted); }
.stu-photos-x:hover { color: var(--ink); background: #f6f6f7; }
.stu-photos-main { position: relative; height: min(64vh, 640px); margin-top: 10px; overflow: hidden; border-radius: 10px; background: #f6f6f7; }
.stu-photos-pane { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; overflow: hidden; }
.stu-photos-pane img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Zoomed in: the picture at its full size, moved by scrolling or dragging (reading the names on a proof) */
.stu-photos-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e4e5e9; border-radius: 50%; font-size: 14px; color: var(--ink); background: #fff; }
.stu-photos-zoom:hover { border-color: var(--ink); }
.stu-photos-zoom[hidden] { display: none; }
.stu-photos-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e4e5e9; border-radius: 50%; font-size: 13px; color: var(--ink); background: #fff; transform: translateY(-50%); }
.stu-photos-nav:hover { border-color: var(--ink); }
.stu-photos-nav.is-prev { left: 10px; }
.stu-photos-nav.is-next { right: 10px; }
.stu-photos-nav[hidden] { display: none; }
.stu-photos-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
.stu-photos-thumbs:empty { display: none; }
.stu-photos-thumbs button { flex: none; width: 64px; height: 64px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; opacity: .65; transition: opacity .15s, border-color .15s; }
.stu-photos-thumbs button:hover { opacity: 1; }
.stu-photos-thumbs button.is-on { border-color: var(--ink); opacity: 1; }
.stu-photos-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Pop-ups: use this design, request sent */
.stu-dialog { width: min(460px, calc(100vw - 32px)); padding: 26px; border: 0; border-radius: 14px; text-align: center; box-shadow: 0 30px 80px -20px rgba(17, 19, 24, .45); }
.stu-dialog::backdrop { background: rgba(17, 19, 24, .5); }
.stu-dialog h2 { margin: 12px 0 8px; font-size: 19px; font-weight: 700; color: var(--ink); }
.stu-dialog p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--text); }
.stu-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.stu-x:hover { color: var(--ink); background: #f6f6f7; }
.stu-dialog-pics { display: flex; justify-content: center; gap: 10px; }
.stu-dialog-pics img { width: 124px; height: 124px; object-fit: contain; border-radius: 8px; }
.stu-dialog-form { display: grid; gap: 8px; margin-top: 8px; text-align: left; }
.stu-dialog-form label { font-size: 13px; font-weight: 600; color: var(--ink); }
.stu-dialog-form label span { font-weight: 400; color: var(--soft); }
.stu-dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid #d9dade; border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.stu-dialog textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 19, 24, .08); }
.stu-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.stu-warn { padding: 10px 12px; border: 1px solid #f0dfb4; border-radius: 8px; font-size: 13px; text-align: left; color: #7c4a03; background: #fdf8ea; }
.stu-warn a { font-weight: 600; text-decoration: underline; }
.stu-done-burst { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; font-size: 24px; color: #fff; background: var(--c-green); }
.stu-ref { font-family: ui-monospace, monospace; font-size: 13px !important; font-weight: 600; color: var(--muted) !important; }

/* Product page: "Browse designs" for this product (it asks to sign in first). The one coloured, moving thing in
   the design studio: a slow gradient that flows across it, with a streak of light now and then */
.stu-pdp {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 14px 16px;
    border-radius: 14px; color: #fff; background: linear-gradient(110deg, #d10a12, #e11d74, #7c3aed, #2563eb, #7c3aed, #e11d74, #d10a12);
    background-size: 300% 100%; animation: stu-flow 10s ease-in-out infinite alternate;
    box-shadow: 0 14px 28px -16px rgba(124, 58, 237, .75); transition: transform .2s var(--ease), box-shadow .2s;
}
@keyframes stu-flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.stu-pdp::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%) -120% 0 / 60% 100% no-repeat;
    animation: stu-glint 5s ease-in-out infinite;
}
@keyframes stu-glint { 0%, 55% { background-position: -120% 0; } 100% { background-position: 320% 0; } }
.stu-pdp:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -16px rgba(124, 58, 237, .85); }
.stu-pdp-fan { position: relative; flex: none; width: 92px; height: 64px; border-radius: 12px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 14px -8px rgba(17, 19, 24, .5); }
.stu-pdp-fan img { position: absolute; left: calc(10px + var(--n) * 17px); top: 6px; width: 38px; height: 52px; object-fit: contain; transform: rotate(calc((var(--n) - 1) * 8deg)); filter: drop-shadow(0 3px 5px rgba(17, 19, 24, .25)); transition: transform .3s var(--ease); }
.stu-pdp.is-photos .stu-pdp-fan img { object-fit: cover; border: 2px solid #fff; border-radius: 6px; }
.stu-pdp:hover .stu-pdp-fan img { transform: rotate(calc((var(--n) - 1) * 14deg)) translateY(-2px); }
.stu-pdp-text { flex: 1; min-width: 0; }
.stu-pdp-text strong { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.stu-pdp-text small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.stu-pdp-text small b { font-weight: 700; color: #fff; }
.stu-pdp > i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; color: #7c3aed; background: #fff; transition: transform .25s var(--ease); }
.stu-pdp:hover > i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .stu-pdp, .stu-pdp::after { animation: none; } }

/* ==========================================================================
   Lanyards in the design studio (lyd-). A lanyard's design is one long ribbon picture, and everything here is drawn
   from that one picture, given as --art on an element around, with --ratio (how long it is for its width) and
   --fold (where along it the fold behind the neck is: the straps are measured from there, so their logos hang level;
   --m is the shorter of the two straps, as a part of the whole length):
   the lanyard as it is worn (.lyd), its print passing by on its side (.lyd-band), the full lanyard as it hangs
   (.lyd-full), the same laid flat to read (.lyd-flat), a small piece of it for lists (.lyd-thumb) and the pop-up
   that shows it large (.lyd-view).
   ========================================================================== */
/* A box that shows a lanyard: worn, with its print passing by along the bottom */
.lyd-stage { position: relative; overflow: hidden; --lyd-band: 34px; }
.lyd-stage > .lyd { position: absolute; inset: 0 0 var(--lyd-band) 0; }
.lyd-stage > .lyd-band { position: absolute; right: 0; bottom: 0; left: 0; --bh: var(--lyd-band); }
.lyd-open { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.lyd-open:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.lyd-full-btn { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid #e4e5e9; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text); background: #fff; cursor: zoom-in; transition: color .15s, border-color .15s; }
.lyd-full-btn:hover { color: var(--ink); border-color: #c9cad0; }

/* As it is worn. Sizes follow the box (cqh): the ribbon's first half is one strap, its second half the other, and
   the two ends meet in the hook, as the printed ribbon is folded behind the neck. */
.lyd { display: block; overflow: hidden; container-type: size; pointer-events: none; }
.lyd-swing { position: absolute; top: 0; left: 50%; display: block; --w: 9.6cqh; --join: 75cqh; --len: 100cqh; --spread: 16deg; --tuck: calc(var(--w) * .25); --m: min(var(--fold, .5), 1 - var(--fold, .5)); transform-origin: 0 -50cqh; filter: drop-shadow(0 3cqh 3.5cqh rgba(17, 19, 24, .22)); }
.lyd-stage:hover .lyd-swing, .stu-card:hover .lyd-swing { animation: lyd-sway 2.8s ease-in-out infinite; }
@keyframes lyd-sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }
.lyd-strap { position: absolute; top: calc(var(--join) - var(--len)); left: calc(var(--w) / -2); display: block; width: var(--w); height: var(--len); transform-origin: 50% 100%; }
.lyd-strap.is-a { transform: rotate(calc(var(--spread) * -1)); }
.lyd-strap.is-b { transform: rotate(var(--spread)); }
.lyd-strap i { position: absolute; inset: 0; background-image: var(--art); background-repeat: no-repeat; background-size: 100% auto; }
/* each strap is placed by how far along the ribbon it is from the fold; the last bit (--tuck) is inside the clip */
.lyd-strap.is-a i { transform: rotate(180deg); background-position: 0 calc((var(--m) - var(--fold, .5)) * var(--w) * var(--ratio) - var(--tuck)); }
.lyd-strap.is-b i { background-position: 0 calc(var(--len) - (var(--fold, .5) + var(--m)) * var(--w) * var(--ratio) + var(--tuck)); }
/* the weave: a soft sheen across the ribbon, darker at its edges */
.lyd-strap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .26)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .05) 1px 2px); }
.lyd-clip, .lyd-ring, .lyd-hook { position: absolute; display: block; }
.lyd-clip { top: calc(var(--join) - var(--w) * .5); left: calc(var(--w) * -.75); width: calc(var(--w) * 1.5); height: calc(var(--w) * .7); border-radius: calc(var(--w) * .14); background: linear-gradient(180deg, #fafbfc, #cfd3d9 42%, #9299a4 58%, #e6e8ec); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 2px rgba(17, 19, 24, .3); }
.lyd-ring { top: calc(var(--join) + var(--w) * .12); left: calc(var(--w) * -.34); width: calc(var(--w) * .68); height: calc(var(--w) * .68); border: calc(var(--w) * .11) solid #b3b9c2; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.lyd-hook { top: calc(var(--join) + var(--w) * .68); left: calc(var(--w) * -.3); width: calc(var(--w) * .6); height: calc(var(--w) * 1.35); border: calc(var(--w) * .12) solid #a8aeb8; border-radius: 40% 40% 50% 50% / 26% 26% 34% 34%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.lyd-hook::after { content: ""; position: absolute; top: 34%; left: -22%; width: 28%; height: 36%; border-radius: 2px; background: #c9cdd4; }

/* The full lanyard, as it hangs: the band behind the neck at the top (cut by the top of the box, like a photo of
   one), both straps whole, each one half of the ribbon, coming down together into the hook. It fills the height
   it has; zoomed, it is big and moved by scrolling or dragging. */
.lyd-full { --lyd-tall: min(calc(100vh - 184px), 780px); display: block; height: var(--lyd-tall); overflow: hidden; border-radius: 12px; background: radial-gradient(120% 85% at 50% 0%, #fbfbfc, #e7e8ed); cursor: zoom-in; }
.lyd-full-in { position: relative; display: block; height: 100%; overflow: hidden; container-type: size; }
.lyd-loop { position: absolute; top: 5cqh; left: 50%; display: block; --spread: 12deg; --tuck: 0px; --m: min(var(--fold, .5), 1 - var(--fold, .5)); --len: calc(89cqh / (.978 + 2.404 / (var(--ratio) * var(--m)))); --w: calc(var(--len) * 1.208 / (var(--ratio) * var(--m))); --join: calc(var(--len) * .978 - var(--w) * .11); filter: drop-shadow(0 1.4cqh 1.6cqh rgba(17, 19, 24, .26)); }
/* Where each strap turns behind the neck it folds over: its top is cut on a slant from the band's corner out to a
   soft shoulder (as on a real lanyard), not square. The points are in the strap's own box (it leans by --spread):
   the inner corner at the top line, then round the shoulder on the outer edge. */
.lyd-loop .lyd-strap.is-a { clip-path: polygon(100% calc(var(--w) * .219), 22.2% calc(var(--w) * .928), 12.5% calc(var(--w) * 1.035), 5.6% calc(var(--w) * 1.155), 1.4% calc(var(--w) * 1.286), 0 calc(var(--w) * 1.43), 0 100%, 100% 100%); }
.lyd-loop .lyd-strap.is-b { clip-path: polygon(0 calc(var(--w) * .219), 77.8% calc(var(--w) * .928), 87.5% calc(var(--w) * 1.035), 94.4% calc(var(--w) * 1.155), 98.6% calc(var(--w) * 1.286), 100% calc(var(--w) * 1.43), 100% 100%, 0 100%); }
/* ...and the fold is a little in shadow */
.lyd-loop .lyd-strap::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) calc(var(--w) * 1.9)), linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .26)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .05) 1px 2px); }
/* The band behind the neck: the same ribbon where it folds, seen from its other side and in the loop's shadow. It
   runs between the straps' inner corners; its lower corners are under the straps. (The ribbon is shared out: each
   strap is 1 long and the band about .416, so a strap's width is 1.208 of its own length over the ribbon's.) */
.lyd-loop-neck { position: absolute; top: 0; left: calc(var(--len) * -.208 + var(--w) * .5345); display: block; width: calc(var(--len) * .416 - var(--w) * 1.069); height: var(--w); overflow: hidden; }
.lyd-loop-neck i { position: absolute; top: 0; left: calc(var(--len) * .208 - var(--w) * .5345 - var(--fold, .5) * var(--w) * var(--ratio)); display: block; width: var(--w); height: calc(var(--w) * var(--ratio)); background: var(--art) 0 0 / 100% auto no-repeat; transform: translateY(var(--w)) rotate(-90deg); transform-origin: 0 0; }
.lyd-loop-neck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .44), rgba(0, 0, 0, .2)); }

/* The ribbon laid on its side. The picture stands up, so it is turned: --bh is how tall the ribbon is drawn. */
.lyd-band-run i, .lyd-flat-row i, .lyd-thumb i { position: absolute; top: 0; left: 0; display: block; width: var(--bh); height: calc(var(--bh) * var(--ratio)); background: var(--art) 0 0 / 100% auto no-repeat; transform: translateY(var(--bh)) rotate(-90deg); transform-origin: 0 0; }

/* Its print passing by, so the whole name can be read (the first half: the second is the same, the other way up) */
.lyd-band { --bh: 34px; --m: min(var(--fold, .5), 1 - var(--fold, .5)); position: relative; display: block; height: var(--bh); overflow: hidden; container-type: inline-size; background: #e6e7ea; }
.lyd-band-run { position: relative; display: block; width: calc(var(--bh) * var(--ratio) * var(--m)); height: 100%; overflow: hidden; animation: lyd-read 18s ease-in-out infinite alternate; }
@keyframes lyd-read { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100cqw)); } }
.lyd-band-run i, .lyd-flat-row.is-a i { left: calc((var(--m) - var(--fold, .5)) * var(--bh) * var(--ratio)); }
.lyd-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .14)); pointer-events: none; }
.lyd-stage:hover .lyd-band-run, .stu-card:hover .lyd-band-run { animation-play-state: paused; }

/* A small piece of it, for lists: from just before the logo */
.lyd-thumb { --bh: 18px; --m: min(var(--fold, .5), 1 - var(--fold, .5)); position: relative; display: block; width: 100%; height: var(--bh); overflow: hidden; border-radius: 2px; box-shadow: 0 2px 4px -1px rgba(17, 19, 24, .35); }
.lyd-thumb i { left: calc((var(--m) - var(--fold, .5) - .055) * var(--bh) * var(--ratio)); }

/* The whole lanyard laid flat: the hook, both straps side by side with their words the right way up, the fold.
   It fits the width it has; zoomed, it is big and moved by scrolling or dragging. */
.lyd-flat { display: block; overflow: hidden; container-type: inline-size; }
.lyd-flat-in { --m: min(var(--fold, .5), 1 - var(--fold, .5)); --bh: calc((100cqw - 8px) / (2.6 + var(--ratio) * var(--m))); display: flex; align-items: center; width: max-content; margin-inline: auto; filter: drop-shadow(0 8px 8px rgba(17, 19, 24, .22)); }
.lyd-flat-rows { position: relative; display: grid; gap: 1px; overflow: hidden; border-radius: 0 var(--bh) var(--bh) 0; }
.lyd-flat-rows::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--bh) * 1.1); background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)); pointer-events: none; }
.lyd-flat-row { position: relative; display: block; width: calc(var(--bh) * var(--ratio) * var(--m)); height: var(--bh); overflow: hidden; }
.lyd-flat-row.is-b i { transform: translateX(calc((var(--fold, .5) + var(--m)) * var(--bh) * var(--ratio))) rotate(90deg); }
.lyd-flat-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .16)); pointer-events: none; }
.lyd-flat-hook { position: relative; flex: none; display: block; width: calc(var(--bh) * 2.6); height: calc(var(--bh) * 2); }
.lyd-flat-hook i { position: absolute; display: block; }
.lyd-flat-hook i:nth-child(1) { top: -5%; right: calc(var(--bh) * -.2); z-index: 1; width: calc(var(--bh) * .62); height: 110%; border-radius: calc(var(--bh) * .1); background: linear-gradient(90deg, #fafbfc, #cfd3d9 42%, #9299a4 58%, #e6e8ec); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 2px rgba(17, 19, 24, .3); }
.lyd-flat-hook i:nth-child(2) { top: calc(50% - var(--bh) * .36); right: calc(var(--bh) * .34); width: calc(var(--bh) * .72); height: calc(var(--bh) * .72); border: calc(var(--bh) * .11) solid #b3b9c2; border-radius: 50%; }
.lyd-flat-hook i:nth-child(3) { top: calc(50% - var(--bh) * .32); right: calc(var(--bh) * .96); width: calc(var(--bh) * 1.5); height: calc(var(--bh) * .64); border: calc(var(--bh) * .12) solid #a8aeb8; border-radius: 34% 26% 26% 34% / 50%; }

/* The pop-up: the full lanyard, or as it is worn */
/* (as it hangs it is tall and narrow, like a photo of one; laid flat it needs the width) */
.lyd-view.is-flat { width: min(1080px, calc(100vw - 24px)); }
.lyd-view { width: min(700px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 14px 16px 16px; overflow-x: hidden; scrollbar-width: thin; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 40px 100px -24px rgba(17, 19, 24, .55); }
.lyd-view::backdrop { background: rgba(17, 19, 24, .62); }
.lyd-view-top { display: flex; align-items: center; gap: 12px; }
.lyd-view-top strong { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.lyd-view-tabs { display: inline-flex; flex: none; margin-left: auto; padding: 3px; border-radius: 9px; background: #f1f1f4; }
.lyd-view-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.lyd-view-tabs button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .12); }
.lyd-view-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); }
.lyd-view-x:hover { color: var(--ink); background: #f6f6f7; }
.lyd-view-pane { margin-top: 12px; }
.lyd-view-pane[hidden] { display: none; }
.lyd-view-flat { padding: 30px 18px 12px; border-radius: 12px; background: radial-gradient(120% 140% at 50% 0%, #fbfbfc, #ebecf0); }
.lyd-view-flat .lyd-flat { display: grid; align-items: center; height: min(44vh, 360px); cursor: zoom-in; }
.lyd-view-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.lyd-view-ends i { font-size: 10px; }
.lyd-view-top .btn { flex: none; }
.lyd-view-note { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.lyd-view-note i { margin-right: 4px; color: var(--text); }

/* Where a lanyard design shows on the studio and account pages */
.dsp-stage.lyd-stage { display: block; }
.dsp-stage.is-big.lyd-stage { --lyd-band: 44px; }
.dsp-compare-grid.is-ribbon { grid-template-columns: minmax(0, 1fr); }
.dsp-compare-pic.is-ribbon { display: block; aspect-ratio: auto; padding: 22px 14px 12px; }
.dsp-row-pic.is-ribbon, .acc-order-img.is-ribbon { padding: 0; overflow: hidden; }
.stu-pdp-fan.is-ribbon { display: grid; align-content: center; gap: 5px; padding: 0 9px; }
.stu-pdp-fan.is-ribbon .lyd-thumb { --bh: 12px; transform: rotate(calc((var(--n) - 1) * -3deg)); }
.stu-dialog-pics .lyd-band { flex: 1; --bh: 46px; border-radius: 10px; }
.stu-dialog-pics .lyd-band[hidden] { display: none; }
@media (max-width: 760px) {
    .lyd-view-top { flex-wrap: wrap; }
    .lyd-view-top strong { flex: 1; }
    .lyd-view-tabs { order: 3; width: 100%; margin-left: 0; }
    .lyd-view-tabs button { flex: 1; justify-content: center; }
    .lyd-view-flat { padding: 18px 8px 10px; }
    .lyd-view-top .btn span { display: none; }
    .lyd-full { --lyd-tall: min(calc(100vh - 300px), 780px); }   /* the tabs take a row of their own here */
    .lyd-full-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lyd-swing, .lyd-band-run { animation: none !important; } }
@media print { .lyd, .lyd-band, .lyd-flat, .lyd-full, .lyd-thumb { visibility: hidden !important; } }

/* A picture that zooms where it is (assets/js/zoom.js puts .mpz on its frame): fingers go to the picture, not to
   the page behind; zoomed in, it is dragged about. The hint shows for a moment each time the view opens. */
.mpz { touch-action: none; overscroll-behavior: contain; }
.mpz.mpz-in { cursor: grab; }
.mpz.mpz-move { cursor: grabbing; }
.mpz-hint { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; color: #fff; background: rgba(17, 19, 24, .72); pointer-events: none; animation: mpz-hint 4s ease forwards; }
@keyframes mpz-hint { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* Design pictures are looked at, not taken: no dragging them out, no long-press "save image", and they are left
   out when the page is printed. (What the server does is in App\Support\DesignPictures.) */
.c3d img, .stu-photo img, .stu-photos img, .stu-pdp-fan img, .stu-dialog-pics img, .dsp-stage img, .dsp-compare-pic img, .dsp-over-stage img,
.dsp-file-pic img, .dsp-row-pic img, .acc-order-img.is-design img {
    -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
}
@media print {
    .c3d, .stu-photo img, .stu-photos img, .stu-pdp-fan img, .stu-dialog-pics img, .dsp-stage img, .dsp-compare-pic img, .dsp-over-stage img,
    .dsp-file-pic img, .dsp-row-pic img, .acc-order-img.is-design img { visibility: hidden !important; }
}

@media (max-width: 900px) {
    .stu-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
    .stu-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 0 0; border-top: 1px solid #e4e5e9; border-left: 0; }
    .stu-steps li { white-space: normal; }
}
@media (max-width: 760px) {
    .stu-hero h1 { font-size: 24px; }
    .stu-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .stu-nav::-webkit-scrollbar { display: none; }
    .stu-nav a { flex: none; }
    .stu-nav.is-foot { flex-wrap: wrap; }
    .stu-sides { display: flex; width: 100%; }
    .stu-sides a { flex: 1; padding: 8px 10px; }
    .stu-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stu-stage .c3d { inset: 16px 12px 24px; }
    .stu-card-foot > div { flex-direction: column; gap: 0; }
    .stu-section-head .btn { width: 100%; }
    .stu-photos-main { height: 52vh; }
}
@media (prefers-reduced-motion: reduce) {
    .stu-card, .stu-photo img, .c3d-body, .c3d-shine, .c3d-zoom[open] { animation: none !important; transition: none !important; }
}