/* =========================================================================
   chu.lk storefront — design system v2
   Replaces the old template stylesheet (main.css). Loaded after Bootstrap 5.3.
   Brand colour comes from the logo (or Admin → Ecommerce settings → Theme color).
   ========================================================================= */

:root {
    --cx-brand: #1D75BC;
    --cx-sky: #28A9E2;
    --cx-brand-ink: color-mix(in srgb, var(--cx-brand) 80%, #000);
    --cx-brand-soft: color-mix(in srgb, var(--cx-brand) 10%, #fff);
    --cx-brand-softer: color-mix(in srgb, var(--cx-brand) 5%, #fff);
    --cx-ink: #12304D;
    --cx-text: #3D4B59;
    --cx-muted: #58697A;
    --cx-line: #E3E9EF;
    --cx-bg: #FFFFFF;
    --cx-sale: #D1343A;
    --cx-save: #FFD34E;
    --cx-ok: #179B6B;
    --cx-danger: #D64545;
    --cx-t-sky: #E4F3FC;
    --cx-t-pink: #FDE8EE;
    --cx-t-mint: #E2F6EE;
    --cx-t-peach: #FFEBDD;
    --cx-t-lilac: #EEE9FB;
    --cx-t-butter: #FFF5D6;
    --cx-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cx-font-head: "Nunito", var(--cx-font);
    --cx-r-sm: 10px;
    --cx-r: 16px;
    --cx-r-lg: 24px;
    --cx-pill: 999px;
    --cx-shadow: 0 12px 32px -14px rgba(18, 48, 77, .28);
    --cx-shadow-sm: 0 2px 10px rgba(18, 48, 77, .08);
    --cx-header-h: 76px;
    --bs-body-font-family: var(--cx-font);
    --bs-body-color: var(--cx-text);
    --bs-link-color-rgb: 29, 117, 188;
}

/* ---------- Base ------------------------------------------------------------ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--cx-font); color: var(--cx-text); background: var(--cx-bg); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .cx-h { font-family: var(--cx-font-head); color: var(--cx-ink); letter-spacing: -.01em; font-weight: 800; line-height: 1.2; }
p { margin: 0 0 1rem; }
a { color: var(--cx-brand); text-decoration: none; }
a:hover { color: var(--cx-brand-ink); }
img, svg { max-width: 100%; }
img { height: auto; }
button { font-family: inherit; }
:focus-visible { outline: 2.5px solid var(--cx-brand); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--cx-brand-soft); }
.container { max-width: 1280px; padding-left: 16px; padding-right: 16px; }
.everyday-container { max-width: 1280px; padding-left: 30px; padding-right: 30px; }

@media (min-width: 768px) { .container { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .everyday-container { padding-left: 50px; padding-right: 50px; } }

.cx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-skip:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 3000; background: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--cx-shadow); }
.cx-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.cx-art { display: block; width: 100%; height: 100%; }
.text-brand { color: var(--cx-brand) !important; }
.cx-muted { color: var(--cx-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Buttons --------------------------------------------------------- */
.cx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: 0 1.25rem; border-radius: var(--cx-pill); border: 1.5px solid transparent;
    font: 700 15px/1 var(--cx-font); cursor: pointer; white-space: nowrap; text-decoration: none;
    background: var(--cx-brand); color: #fff; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.cx-btn:hover { background: var(--cx-brand-ink); color: #fff; }
.cx-btn:active { transform: scale(.98); }
.cx-btn[disabled], .cx-btn.is-disabled { background: #C5CFD8; border-color: #C5CFD8; color: #fff; cursor: not-allowed; transform: none; }
.cx-btn--ghost { background: #fff; color: var(--cx-ink); border-color: var(--cx-line); }
.cx-btn--ghost:hover { background: #fff; color: var(--cx-ink); border-color: var(--cx-ink); }
.cx-btn--ghost[disabled] { background: #F2F5F7; border-color: #F2F5F7; color: var(--cx-muted); }
.cx-btn--soft { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
.cx-btn--soft:hover { background: var(--cx-brand); color: #fff; }
.cx-btn--ink { background: var(--cx-ink); }
.cx-btn--ink:hover { background: #000; }
.cx-btn--white { background: #fff; color: var(--cx-ink); }
.cx-btn--white:hover { background: var(--cx-ink); color: #fff; }
.cx-btn--wa { background: #1FA855; }
.cx-btn--wa:hover { background: #178a45; }
.cx-btn--lg { min-height: 54px; font-size: 16px; padding: 0 1.75rem; }
.cx-btn--sm { min-height: 36px; font-size: 13.5px; padding: 0 .9rem; }
.cx-btn--block { width: 100%; }
.cx-iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--cx-ink); cursor: pointer; }
.cx-iconbtn:hover { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
.cx-link { font-weight: 700; color: var(--cx-brand); display: inline-flex; align-items: center; gap: 4px; }
.cx-link:hover { color: var(--cx-brand-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Forms ------------------------------------------------------------ */
.cx-field { display: block; margin-bottom: 1rem; }
.cx-field > .cx-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--cx-ink); margin-bottom: .4rem; }
.cx-label em { color: var(--cx-sale); font-style: normal; }
.cx-label small { font-weight: 500; color: var(--cx-muted); }
.cx-input, .cx-field input:not([type=checkbox]):not([type=radio]), .cx-field select, .cx-field textarea {
    display: block; width: 100%; height: 50px; padding: 0 15px; border: 1.5px solid var(--cx-line); border-radius: 12px; background: #fff;
    font: 15.5px var(--cx-font); color: var(--cx-ink); box-shadow: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.cx-field textarea { height: auto; min-height: 100px; padding: 12px 15px; resize: vertical; }
.cx-field select, select.cx-input {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23687886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 42px; cursor: pointer;
}
.cx-input:focus, .cx-field input:focus, .cx-field select:focus, .cx-field textarea:focus { outline: none; border-color: var(--cx-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-brand) 16%, transparent); }
.cx-field input::placeholder, .cx-field textarea::placeholder, .cx-input::placeholder { color: #9AA6B2; }
.cx-field.is-invalid input, .cx-field.is-invalid select { border-color: var(--cx-danger); }
.cx-field__err { display: block; color: var(--cx-danger); font-size: 13px; margin-top: 6px; }
.cx-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.cx-check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--cx-brand); flex: none; }
.cx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 575.98px) { .cx-row2 { grid-template-columns: 1fr; } }
.cx-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; margin-bottom: 18px; }
.cx-alert .cx-ico { margin-top: 2px; }
.cx-alert--ok { background: #E3F6EE; color: #0E6B49; }
.cx-alert--warn { background: #FFF4D6; color: #7A5300; }
.cx-alert--err { background: #FDE8E8; color: #9B1C1C; }
.cx-alert--info { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }

/* ---------- Badges ----------------------------------------------------------- */
.cx-badge-row { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 56px); }
.cx-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--cx-pill); font: 800 11.5px/1.2 var(--cx-font); letter-spacing: .01em; background: #fff; color: var(--cx-ink); box-shadow: var(--cx-shadow-sm); }
.cx-tag--new { background: var(--cx-brand); color: #fff; }
.cx-tag--sale { background: var(--cx-save); color: var(--cx-ink); }
.cx-tag--hot { background: var(--cx-sale); color: #fff; }
.cx-tag--out { background: #fff; color: var(--cx-muted); }

/* ---------- Announcement bar ---------------------------------------------------- */
.cx-topbar { background: var(--cx-ink); color: #DCE8F3; font-size: 13px; }
.cx-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.cx-topbar__msg { display: flex; gap: 22px; align-items: center; }
.cx-topbar__msg span { display: inline-flex; align-items: center; gap: 7px; }
.cx-topbar__msg .cx-ico { color: var(--cx-sky); width: 16px; height: 16px; }
.cx-topbar__links { display: flex; gap: 20px; }
.cx-topbar a { color: #fff; }
.cx-topbar a:hover { color: var(--cx-sky); }
@media (max-width: 991.98px) { .cx-topbar__msg span:not(:first-child), .cx-topbar__links { display: none; } .cx-topbar .container { justify-content: center; } }

/* ---------- Header ----------------------------------------------------------- */
.cx-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.97); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--cx-line); }
.cx-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--cx-header-h); }
.cx-logo { display: flex; align-items: center; gap: 10px; flex: none; color: var(--cx-ink); }
.cx-logo img { height: 52px; width: 52px; object-fit: contain; }
.cx-logo__name { font: 800 22px/1 var(--cx-font-head); color: var(--cx-brand); letter-spacing: -.02em; }
.cx-logo__name small { display: block; font: 600 11.5px/1.3 var(--cx-font); color: var(--cx-muted); letter-spacing: 0; }
.cx-header__menu-btn { display: none; }

.cx-search { position: relative; flex: 1; max-width: 640px; }
.cx-search form { display: flex; align-items: center; height: 50px; border-radius: var(--cx-pill); background: #F1F5F9; border: 1.5px solid transparent; transition: border-color .15s, background .15s; }
.cx-search form:focus-within { background: #fff; border-color: var(--cx-brand); }
.cx-search select { height: 100%; border: 0; border-right: 1px solid #DCE3EA; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23687886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; padding: 0 30px 0 18px; max-width: 180px; font: 700 13px var(--cx-font); color: var(--cx-ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.cx-search select:focus { outline: none; }
.cx-search input[type=search], .cx-search input[type=text] { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 14px; font: 15px var(--cx-font); color: var(--cx-ink); }
.cx-search input:focus { outline: none; }
.cx-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cx-search button[type=submit] { display: grid; place-items: center; width: 42px; height: 42px; margin-right: 4px; border: 0; border-radius: 50%; background: var(--cx-brand); color: #fff; cursor: pointer; flex: none; }
.cx-search button[type=submit]:hover { background: var(--cx-brand-ink); }
.cx-search .search_result { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-r); box-shadow: var(--cx-shadow); max-height: 440px; overflow: auto; padding: 6px; }
.cx-search .search-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--cx-ink); font-size: 14px; }
.cx-search .search-item:hover, .cx-search .search-item:focus { background: var(--cx-brand-softer); color: var(--cx-ink); }
.cx-search .search-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--cx-brand-softer); }
.cx-search .search-all { display: block; text-align: center; padding: 10px; font-weight: 700; border-top: 1px solid var(--cx-line); margin-top: 4px; }

.cx-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cx-action { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 14px; color: var(--cx-ink); background: none; border: 0; }
.cx-action:hover { background: var(--cx-brand-softer); color: var(--cx-ink); }
.cx-action__icon { position: relative; display: grid; place-items: center; }
.cx-action__icon .cx-ico { width: 25px; height: 25px; }
.cx-badge { position: absolute; top: -7px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--cx-pill); background: var(--cx-sale); color: #fff; border: 2px solid #fff; font: 800 10px/14px var(--cx-font); text-align: center; box-sizing: content-box; }
.cx-badge:empty, .cx-badge[data-count="0"] { display: none; }
.cx-action__text { display: flex; flex-direction: column; line-height: 1.2; font-size: 12px; color: var(--cx-muted); text-align: left; }
.cx-action__text strong { color: var(--cx-ink); font-size: 14px; font-weight: 800; }

.cx-menu { position: relative; }
.cx-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 60; padding: 8px; background: #fff; border: 1px solid var(--cx-line); border-radius: var(--cx-r); box-shadow: var(--cx-shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.cx-menu.is-open > .cx-menu__panel, .cx-menu:focus-within > .cx-menu__panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .cx-menu:hover > .cx-menu__panel { opacity: 1; visibility: visible; transform: none; } }
.cx-menu__panel > a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: var(--cx-ink); }
.cx-menu__panel > a:hover { background: var(--cx-brand-softer); }
.cx-menu__panel hr { margin: 6px 4px; border-color: var(--cx-line); opacity: 1; }
.cx-menu__head { padding: 8px 12px 10px; border-bottom: 1px solid var(--cx-line); margin-bottom: 6px; font-size: 13px; color: var(--cx-muted); }
.cx-menu__head strong { display: block; color: var(--cx-ink); font-size: 15px; }

.cx-nav { border-top: 1px solid var(--cx-line); }
.cx-nav .container { display: flex; align-items: center; gap: 26px; min-height: 52px; }
.cx-nav__links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.cx-nav__links a { position: relative; display: flex; align-items: center; gap: 6px; padding: 14px 0; font-weight: 700; font-size: 14.5px; color: var(--cx-text); }
.cx-nav__links a:hover, .cx-nav__links a.active { color: var(--cx-ink); }
.cx-nav__links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cx-brand); }
.cx-nav__links a.is-deal { color: var(--cx-sale); }
.cx-nav__help { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cx-muted); }
.cx-nav__help strong { color: var(--cx-ink); }
.cx-cats-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; background: var(--cx-brand); color: #fff; border: 0; border-radius: var(--cx-pill); font: 700 14px var(--cx-font); cursor: pointer; }
.cx-cats-btn:hover { background: var(--cx-brand-ink); }
.cx-mega { left: 0 !important; right: auto !important; width: min(900px, 92vw); padding: 16px !important; }
.cx-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cx-mega__grid a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--cx-ink); font-weight: 700; font-size: 14px; line-height: 1.3; }
.cx-mega__grid a:hover { background: var(--cx-brand-softer); color: var(--cx-brand-ink); }
.cx-mega__art { width: 46px; height: 46px; border-radius: 12px; padding: 6px; flex: none; }
.cx-mega__foot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--cx-line); margin-top: 12px; padding-top: 12px; }

@media (max-width: 991.98px) {
    :root { --cx-header-h: 62px; }
    .cx-header__bar { gap: 8px; flex-wrap: wrap; }
    .cx-header__menu-btn { display: inline-grid; margin-left: -8px; }
    .cx-logo img { height: 40px; width: 40px; }
    .cx-logo__name { font-size: 19px; }
    .cx-logo__name small { display: none; }
    .cx-search { order: 10; flex-basis: 100%; max-width: none; margin-bottom: 10px; }
    .cx-search form { height: 46px; }
    .cx-search select { display: none; }
    .cx-search button[type=submit] { width: 38px; height: 38px; }
    .cx-action__text, .cx-action--account, .cx-action--wish { display: none; }
    .cx-nav { display: none; }
}

/* ---------- Drawer & tab bar ------------------------------------------------------ */
.cx-drawer { position: fixed; inset: 0; z-index: 1060; visibility: hidden; }
.cx-drawer__scrim { position: absolute; inset: 0; background: rgba(18,48,77,.5); opacity: 0; transition: opacity .2s; }
.cx-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(350px, 88vw); background: #fff; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.cx-drawer.is-open { visibility: visible; }
.cx-drawer.is-open .cx-drawer__scrim { opacity: 1; }
.cx-drawer.is-open .cx-drawer__panel { transform: none; }
.cx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--cx-line); }
.cx-drawer__body { overflow-y: auto; padding: 8px 10px 28px; }
.cx-drawer__title { font: 800 12.5px var(--cx-font); color: var(--cx-muted); padding: 18px 10px 6px; margin: 0; }
.cx-drawer__body > a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; font-weight: 700; color: var(--cx-ink); }
.cx-drawer__body > a:hover, .cx-drawer__body > a.active { background: var(--cx-brand-softer); color: var(--cx-brand-ink); }
.cx-drawer__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-drawer__cats a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px; border-radius: 14px; font-size: 12.5px; font-weight: 700; color: var(--cx-ink); line-height: 1.25; }
.cx-drawer__cats .cx-mega__art { width: 52px; height: 52px; }
body.cx-locked { overflow: hidden; }

.cx-tabbar { display: none; }
@media (max-width: 991.98px) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .cx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--cx-line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(18,48,77,.06); }
    .cx-tabbar a, .cx-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 62px; font: 700 11px var(--cx-font); color: var(--cx-muted); background: none; border: 0; }
    .cx-tabbar .cx-ico { width: 23px; height: 23px; }
    .cx-tabbar .active { color: var(--cx-brand); }
    .cx-tabbar .cx-badge { top: -6px; left: 13px; }
}

/* ---------- Toast & back-to-top ---------------------------------------------------- */
.cx-toast { position: fixed; z-index: 2000; left: 50%; bottom: 24px; transform: translate(-50%, 16px); display: flex; align-items: center; gap: 10px; margin: 0; max-width: calc(100vw - 32px); padding: 12px 18px 12px 12px; border-radius: var(--cx-pill); background: var(--cx-ink); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--cx-shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s; }
.cx-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cx-toast a { color: #fff; text-decoration: underline; pointer-events: auto; }
.cx-toast__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cx-ok); flex: none; }
.cx-toast.alert-danger .cx-toast__icon { background: var(--cx-danger); }
.cx-toast__icon .cx-ico { width: 16px; height: 16px; }
.cx-totop { position: fixed; right: 18px; bottom: 22px; z-index: 1020; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--cx-ink); color: #fff; display: grid; place-items: center; box-shadow: var(--cx-shadow); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; cursor: pointer; }
.cx-totop.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 991.98px) { .cx-toast { bottom: calc(78px + env(safe-area-inset-bottom)); } .cx-totop { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; width: 42px; height: 42px; } }

/* ---------- Section rhythm ----------------------------------------------------------- */
.cx-section { padding: 28px 0; }
.cx-section--tight { padding: 28px 0; }
.cx-section--tint { background: var(--cx-brand-softer); }
.cx-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; flex-wrap: wrap; }
.cx-section-head > div { min-width: 0; max-width: 100%; }
.cx-section-head h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 0; }
.cx-section-head p { margin: 4px 0 0; color: var(--cx-muted); }
.cx-page-head { padding: 26px 0 10px; }
.cx-page-head h1 { font-size: clamp(26px, 3.2vw, 38px); margin: 8px 0 0; }
.cx-page-head p { color: var(--cx-muted); margin: 8px 0 0; max-width: 64ch; }
.cx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--cx-muted); list-style: none; margin: 0; padding: 0; }
.cx-crumbs a { color: var(--cx-muted); }
.cx-crumbs a:hover { color: var(--cx-brand); }
.cx-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }

.cx-tabs { display: flex; flex-wrap: nowrap !important; gap: 8px; list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; border: 0; max-width: 100%; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs .nav-link, .cx-tabs > a { display: block; white-space: nowrap; border: 1.5px solid var(--cx-line) !important; border-radius: var(--cx-pill) !important; padding: 8px 16px; font: 700 14px var(--cx-font); color: var(--cx-text); background: #fff; margin: 0; }
.cx-tabs .nav-link:hover, .cx-tabs > a:hover { border-color: var(--cx-brand) !important; color: var(--cx-brand); }
.cx-tabs .nav-link.active, .cx-tabs > a.active { background: var(--cx-ink) !important; border-color: var(--cx-ink) !important; color: #fff !important; }

/* ---------- Hero ----------------------------------------------------------------------- */
.cx-hero { padding: 22px 0 8px; }
.cx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; }
.cx-hero__main { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 440px; border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, #E4F3FC 0%, #D3ECFB 100%); padding: 44px 0 44px 48px; }
.cx-hero__main::before { content: ""; position: absolute; right: -80px; top: -60px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.55); }
.cx-hero__copy { position: relative; z-index: 2; }
.cx-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--cx-pill); background: #fff; font-size: 13px; font-weight: 700; color: var(--cx-ink); box-shadow: var(--cx-shadow-sm); margin-bottom: 18px; }
.cx-hero__eyebrow b { background: var(--cx-sale); color: #fff; padding: 3px 9px; border-radius: var(--cx-pill); font-size: 12px; }
.cx-hero h1 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; margin: 0 0 16px; letter-spacing: -.025em; }
.cx-hero h1 span { color: var(--cx-brand); }
.cx-hero__copy p { font-size: 17px; color: var(--cx-text); max-width: 40ch; margin-bottom: 26px; }
.cx-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.cx-hero__facts { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.cx-hero__facts div { font-size: 13px; color: var(--cx-muted); line-height: 1.3; }
.cx-hero__facts strong { display: block; font: 800 22px var(--cx-font-head); color: var(--cx-ink); }
.cx-hero__scene { position: relative; z-index: 1; height: 100%; min-height: 360px; }
.cx-hero__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.cx-promo { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: 24px; padding: 24px 26px; min-height: 160px; color: var(--cx-ink); isolation: isolate; }
.cx-promo:hover { color: var(--cx-ink); }
.cx-promo h2, .cx-promo h3 { font-size: clamp(19px, 1.8vw, 24px); margin: 0 0 4px; }
.cx-promo p { margin: 0 0 14px; font-size: 14px; color: var(--cx-text); max-width: 22ch; }
.cx-promo__art { position: absolute; right: -6px; bottom: -10px; width: 46%; max-width: 170px; aspect-ratio: 1; z-index: -1; transition: transform .3s; }
.cx-promo:hover .cx-promo__art { transform: rotate(-4deg) scale(1.05); }
.cx-promo .cx-btn { min-height: 38px; font-size: 13.5px; padding: 0 16px; }
.cx-promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 1199.98px) { .cx-hero__main { padding-left: 36px; } }
@media (max-width: 991.98px) {
    .cx-hero__grid { grid-template-columns: 1fr; }
    .cx-hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .cx-promo-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .cx-hero { padding-top: 12px; }
    .cx-hero__main { grid-template-columns: 1fr; padding: 26px 22px 0; min-height: 0; border-radius: 22px; }
    .cx-hero__copy p { font-size: 15px; margin-bottom: 18px; }
    .cx-hero__facts { gap: 16px; margin-top: 18px; }
    .cx-hero__facts strong { font-size: 18px; }
    .cx-hero__scene { min-height: 230px; margin: 4px -10px 0; }
    .cx-hero__side, .cx-promo-row { grid-template-columns: 1fr; gap: 12px; }
    .cx-promo { min-height: 128px; padding: 18px 20px; border-radius: 20px; }
    .cx-promo__art { width: 40%; }
}

/* Admin slider (Admin → Ecommerce → Sliders) */
.cx-slides { position: relative; border-radius: 24px; overflow: hidden; background: var(--cx-brand-softer); }
.cx-slides__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cx-slides__track::-webkit-scrollbar { display: none; }
.cx-slides__track > a, .cx-slides__track > div { flex: 0 0 100%; scroll-snap-align: start; }
.cx-slides img { display: block; width: 100%; aspect-ratio: 1900 / 600; object-fit: cover; }
.cx-slides__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.cx-slides__dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.7); transition: width .2s; }
.cx-slides__dots button.is-active { width: 22px; background: #fff; }
@media (max-width: 767.98px) { .cx-slides img { aspect-ratio: 16 / 9; } }

/* ---------- Category bubbles ----------------------------------------------------------- */
.cx-bubbles { display: grid; grid-auto-flow: column; grid-auto-columns: 124px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.cx-bubble { scroll-snap-align: start; text-align: center; color: var(--cx-ink); }
.cx-bubble:hover { color: var(--cx-brand); }
.cx-bubble__img { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; transition: box-shadow .2s, transform .2s; }
.cx-bubble__img > * { width: 66%; height: 66%; object-fit: contain; transition: transform .25s; }
.cx-bubble:hover .cx-bubble__img { box-shadow: inset 0 0 0 3px var(--cx-brand); }
.cx-bubble:hover .cx-bubble__img > * { transform: scale(1.08) rotate(-3deg); }
.cx-bubble strong { display: block; font: 800 14.5px/1.3 var(--cx-font-head); }
@media (max-width: 575.98px) {
    .cx-bubbles { grid-auto-columns: 88px; gap: 10px; }
    .cx-bubble__img { width: 88px; height: 88px; }
    .cx-bubble strong { font-size: 12.5px; }
}

/* ---------- Product grid, rails, card ---------------------------------------------------- */
.cx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px; }
.cx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .cx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .cx-grid, .cx-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .cx-grid, .cx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }

.cx-rail-wrap { position: relative; }
.cx-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.cx-rail::-webkit-scrollbar { display: none; }
.cx-rail > * { scroll-snap-align: start; }
@media (max-width: 1199.98px) { .cx-rail { grid-auto-columns: calc((100% - 3 * 18px) / 4); } }
@media (max-width: 991.98px) { .cx-rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; } }
@media (max-width: 575.98px) { .cx-rail { grid-auto-columns: 44%; gap: 12px; } }
.cx-rail-nav { display: flex; gap: 8px; }
.cx-rail-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--cx-line); background: #fff; color: var(--cx-ink); display: grid; place-items: center; cursor: pointer; }
.cx-rail-nav button:hover { border-color: var(--cx-ink); }
@media (max-width: 767.98px) { .cx-rail-nav { display: none; } }

.cx-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cx-card__media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #F4F7FA; }
.cx-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: opacity .3s, transform .35s; mix-blend-mode: multiply; }
.cx-card__media img.is-alt { opacity: 0; }
@media (hover: hover) {
    .cx-card:hover .cx-card__media img.is-main:not(:only-of-type) { opacity: 0; }
    .cx-card:hover .cx-card__media img.is-alt { opacity: 1; }
    .cx-card:hover .cx-card__media img:only-of-type { transform: scale(1.05); }
}
.cx-card__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12%; }
.cx-card__ph .cx-art { width: 64%; height: auto; aspect-ratio: 1; transition: transform .35s; }
.cx-card:hover .cx-card__ph .cx-art { transform: scale(1.06) rotate(-3deg); }
.cx-card__ph span { font-size: 11.5px; font-weight: 700; color: var(--cx-muted); opacity: .9; }
.cx-card__tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.cx-card__tools a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; background: #fff; color: var(--cx-ink); box-shadow: var(--cx-shadow-sm); transition: color .15s, transform .15s; }
.cx-card__tools a:hover { transform: scale(1.08); }
.cx-card__tools .add-to-wishlist:hover { color: var(--cx-sale); }
.cx-card__tools .quick-view:hover { color: var(--cx-brand); }
.cx-card__tools a .cx-ico { width: 18px; height: 18px; }
@media (hover: hover) and (min-width: 992px) {
    .cx-card__tools .quick-view { opacity: 0; transform: translateY(-4px); }
    .cx-card:hover .cx-card__tools .quick-view, .cx-card:focus-within .cx-card__tools .quick-view { opacity: 1; transform: none; }
}
.cx-card__body { padding: 12px 2px 0; display: flex; flex-direction: column; flex: 1; }
.cx-card__cat { font-size: 12.5px; color: var(--cx-muted); margin-bottom: 3px; }
.cx-card__cat:hover { color: var(--cx-brand); }
.cx-card__title { font: 600 15px/1.4 var(--cx-font); color: var(--cx-ink); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; letter-spacing: 0; }
.cx-card__title a { color: inherit; }
.cx-card__title a:hover { color: var(--cx-brand); }
.cx-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-card__foot form { margin: 0; }
.cx-addbtn { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--cx-brand); color: #fff; cursor: pointer; transition: background .15s, transform .15s; }
.cx-addbtn:hover { background: var(--cx-brand-ink); color: #fff; transform: scale(1.06); }
.cx-addbtn .cx-ico { width: 20px; height: 20px; }
.cx-addbtn--opt { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
.cx-addbtn--opt:hover { background: var(--cx-brand); color: #fff; }
.cx-addbtn[disabled] { background: #E6EBF0; color: #A2AEBA; cursor: not-allowed; transform: none; }
.cx-price { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cx-price__now { font: 800 17px var(--cx-font-head); color: var(--cx-ink); white-space: nowrap; }
.cx-price__now.is-sale { color: var(--cx-sale); }
.cx-price__was { font-size: 12.5px; color: var(--cx-muted); text-decoration: line-through; white-space: nowrap; }
@media (max-width: 575.98px) {
    .cx-card__title { font-size: 14px; }
    .cx-price__now { font-size: 15.5px; }
    .cx-card__tools a { width: 32px; height: 32px; }
    .cx-addbtn { width: 38px; height: 38px; }
    .cx-card__media { border-radius: 14px; }
}

/* ---------- Home: deals banner, brands, steps, stores --------------------------------------- */
.cx-deal { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 30px 40px; border-radius: 26px; overflow: hidden; background: var(--cx-t-butter); isolation: isolate; }
.cx-deal__pct { font: 800 clamp(44px, 5vw, 72px)/0.9 var(--cx-font-head); color: var(--cx-sale); letter-spacing: -.03em; }
.cx-deal__pct small { display: block; font-size: 15px; color: var(--cx-ink); letter-spacing: 0; margin-top: 6px; }
.cx-deal__pct .cx-deal__upto { margin: 0 0 6px; }
.cx-deal h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 6px; }
.cx-deal p { margin: 0; color: var(--cx-text); max-width: 52ch; }
.cx-deal__art { position: absolute; z-index: -1; opacity: .9; width: 140px; height: 140px; }
@media (max-width: 767.98px) { .cx-deal { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; } .cx-deal__art { width: 90px; height: 90px; } }

.cx-brands { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cx-brands::-webkit-scrollbar { display: none; }
.cx-brand { flex: none; display: grid; place-items: center; min-width: 150px; height: 74px; padding: 0 22px; border: 1.5px solid var(--cx-line); border-radius: 18px; background: #fff; font: 800 18px var(--cx-font-head); color: #8794A1; transition: color .15s, border-color .15s; }
.cx-brand:hover { color: var(--cx-brand); border-color: var(--cx-brand); }
.cx-brand img { max-height: 42px; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.cx-brand:hover img { filter: none; opacity: 1; }

.cx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.cx-steps li { position: relative; padding: 22px 20px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--cx-line); }
.cx-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cx-brand); color: #fff; font: 800 15px var(--cx-font-head); margin-bottom: 14px; }
.cx-steps strong { display: block; color: var(--cx-ink); font-size: 16px; margin-bottom: 4px; }
.cx-steps span { font-size: 14px; color: var(--cx-muted); }
.cx-steps__art { position: absolute; right: 14px; top: 14px; width: 56px; height: 56px; }
@media (max-width: 991.98px) { .cx-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .cx-steps { grid-template-columns: 1fr; } }

.cx-stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cx-store { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--cx-line); }
.cx-store h3 { font-size: 18px; margin: 0; }
.cx-store p { margin: 0; font-size: 14.5px; color: var(--cx-text); display: flex; gap: 10px; }
.cx-store p .cx-ico { color: var(--cx-brand); margin-top: 3px; }
.cx-store .cx-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 991.98px) { .cx-stores { grid-template-columns: 1fr; } }

.cx-cta-band { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 30px 36px; border-radius: 26px; background: var(--cx-ink); color: #DCE8F3; }
.cx-cta-band h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; }
.cx-cta-band p { margin: 0; }
.cx-cta-band form { display: flex; gap: 8px; }
.cx-cta-band input { width: 280px; max-width: 100%; height: 50px; border: 0; border-radius: var(--cx-pill); padding: 0 20px; font: 15px var(--cx-font); }
.cx-cta-band input:focus { outline: 3px solid var(--cx-sky); }
@media (max-width: 767.98px) { .cx-cta-band { grid-template-columns: 1fr; padding: 26px 22px; } .cx-cta-band form { flex-direction: column; } .cx-cta-band input { width: 100%; } }

/* ---------- Trust strip & footer ---------------------------------------------------------- */
.cx-trust { border-top: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); margin-top: 48px; }
.cx-trust ul { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.cx-trust li { display: flex; align-items: center; gap: 14px; padding: 24px 16px; }
.cx-trust li + li { border-left: 1px solid var(--cx-line); }
.cx-trust__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cx-brand-soft); color: var(--cx-brand); flex: none; }
.cx-trust strong { display: block; color: var(--cx-ink); font-size: 14.5px; }
.cx-trust span { font-size: 13px; color: var(--cx-muted); }
@media (max-width: 991.98px) { .cx-trust ul { grid-template-columns: 1fr 1fr; } .cx-trust li:nth-child(3) { border-left: 0; } .cx-trust li:nth-child(n+3) { border-top: 1px solid var(--cx-line); } }
@media (max-width: 575.98px) { .cx-trust li { padding: 16px 8px; gap: 10px; flex-direction: column; align-items: flex-start; } }

.cx-footer { padding: 52px 0 0; background: #F6F9FC; }
.cx-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr; gap: 32px; }
@media (max-width: 1199.98px) { .cx-footer__grid { grid-template-columns: repeat(3, 1fr); } .cx-footer__about { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .cx-footer__grid { grid-template-columns: 1fr 1fr; } .cx-footer__contact { grid-column: 1 / -1; } }
.cx-footer__about p { color: var(--cx-muted); max-width: 38ch; font-size: 14px; margin-top: 14px; }
.cx-footer h2 { font: 800 15px var(--cx-font-head); margin: 4px 0 14px; }
.cx-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.cx-footer ul a { color: var(--cx-text); font-size: 14px; }
.cx-footer ul a:hover { color: var(--cx-brand); }
.cx-footer__contact li { display: flex; gap: 10px; font-size: 14px; color: var(--cx-text); line-height: 1.5; }
.cx-footer__contact li .cx-ico { color: var(--cx-brand); margin-top: 2px; }
.cx-social { display: flex; gap: 8px; margin-top: 16px; }
.cx-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--cx-brand); border: 1px solid var(--cx-line); }
.cx-social a:hover { background: var(--cx-brand); color: #fff; border-color: var(--cx-brand); }
.cx-social .cx-ico { width: 19px; height: 19px; }
.cx-pay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-pay-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid var(--cx-line); font: 800 11.5px var(--cx-font); color: var(--cx-ink); }
.cx-pay-chip .cx-ico { width: 15px; height: 15px; color: var(--cx-brand); }
.cx-footer__bottom { margin-top: 40px; padding: 18px 0; border-top: 1px solid var(--cx-line); font-size: 13px; color: var(--cx-muted); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.cx-footer__bottom a { color: var(--cx-ink); font-weight: 700; }

/* ---------- Listing page --------------------------------------------------------------------- */
.cx-shop { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 36px; align-items: start; padding: 18px 0 40px; }
.cx-sidebar { position: sticky; top: calc(var(--cx-header-h) + 70px); max-height: calc(100vh - var(--cx-header-h) - 90px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.cx-sidebar__block { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--cx-line); }
.cx-sidebar__block:last-child { border-bottom: 0; }
.cx-sidebar h2 { font: 800 16px var(--cx-font-head); margin: 0 0 12px; }
.cx-catlist { list-style: none; margin: 0; padding: 0; }
.cx-catlist details > summary { list-style: none; }
.cx-catlist details > summary::-webkit-details-marker { display: none; }
.cx-catlist__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 10px; }
.cx-catlist__row a { flex: 1; padding: 8px 10px; font-size: 14.5px; color: var(--cx-text); border-radius: 10px; }
.cx-catlist__row a:hover { background: var(--cx-brand-softer); color: var(--cx-ink); }
.cx-catlist__row a.is-active { background: var(--cx-brand-soft); color: var(--cx-brand-ink); font-weight: 800; }
.cx-catlist__count { font-size: 12px; color: var(--cx-muted); padding-right: 10px; }
.cx-catlist__toggle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--cx-muted); cursor: pointer; transition: transform .2s; }
.cx-catlist details[open] .cx-catlist__toggle { transform: rotate(180deg); }
.cx-catlist ul { list-style: none; padding: 0 0 6px 14px; margin: 0 0 0 12px; border-left: 2px solid var(--cx-line); }
.cx-catlist ul a { font-size: 14px; }
.cx-price-filter .noUi-target { border: 0; box-shadow: none; background: var(--cx-line); height: 4px; margin: 14px 10px 20px; }
.cx-price-filter .noUi-connect { background: var(--cx-brand); }
.cx-price-filter .noUi-handle { width: 22px !important; height: 22px !important; right: -11px !important; top: -9px !important; border-radius: 50%; border: 3px solid var(--cx-brand); background: #fff; box-shadow: none; cursor: grab; }
.cx-price-filter .noUi-handle::before, .cx-price-filter .noUi-handle::after { display: none; }
.cx-price-filter__vals { display: flex; justify-content: space-between; font-size: 13px; color: var(--cx-muted); margin-bottom: 12px; }
.cx-price-filter__vals strong { color: var(--cx-ink); }
.cx-subcats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 18px; }
.cx-subcats::-webkit-scrollbar { display: none; }
.cx-subcats a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--cx-pill); background: var(--cx-brand-softer); color: var(--cx-ink); font-weight: 700; font-size: 13.5px; border: 1.5px solid transparent; }
.cx-subcats a:hover, .cx-subcats a.is-active { border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-subcats a span { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 3px; }
.cx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cx-toolbar__count { color: var(--cx-muted); margin: 0; }
.cx-toolbar__count strong { color: var(--cx-ink); }
.cx-toolbar__right { display: flex; gap: 10px; align-items: center; }
.cx-toolbar select { height: 42px; min-width: 210px; border-radius: var(--cx-pill); }
.cx-chips-active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cx-chip-x { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 14px; border-radius: var(--cx-pill); background: var(--cx-ink); color: #fff; font-size: 13px; font-weight: 700; }
.cx-chip-x:hover { background: var(--cx-sale); color: #fff; }
.cx-filter-btn { display: none !important; }
.cx-sidebar-scrim { display: none; }
@media (max-width: 991.98px) {
    .cx-shop { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cx-filter-btn { display: inline-flex !important; }
    .cx-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1070; width: min(340px, 88vw); max-height: none; background: #fff; padding: 18px; transform: translateX(-100%); transition: transform .25s; }
    .cx-sidebar.is-open { transform: none; box-shadow: var(--cx-shadow); }
    .cx-sidebar-scrim { position: fixed; inset: 0; z-index: 1065; background: rgba(18,48,77,.5); }
    .cx-sidebar-scrim.is-open { display: block; }
    .cx-toolbar select { min-width: 0; }
}
@media (min-width: 992px) { .cx-sidebar__close { display: none !important; } }
.cx-pagination { margin-top: 44px; display: flex; justify-content: center; }
.cx-pagination .pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
.cx-pagination .page-link { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--cx-pill) !important; border: 1.5px solid var(--cx-line); color: var(--cx-ink); font-weight: 700; background: #fff; margin: 0 !important; }
.cx-pagination .page-link:hover { border-color: var(--cx-ink); color: var(--cx-ink); background: #fff; }
.cx-pagination .page-item.active .page-link { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-pagination .page-item.disabled .page-link { color: #B5C0CB; background: #fff; }

/* Category tiles (shop page) */
.cx-catsection { margin-bottom: 44px; }
.cx-catsection__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cx-catsection__head h2 { font-size: 22px; margin: 0; }
.cx-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991.98px) { .cx-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .cx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.cx-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 10px 14px; border-radius: 20px; color: var(--cx-ink); transition: box-shadow .15s; }
.cx-tile:hover { box-shadow: inset 0 0 0 2px var(--cx-brand); color: var(--cx-brand); }
.cx-tile > :first-child { width: 64%; aspect-ratio: 1; object-fit: contain; }
.cx-tile span { font-weight: 800; font-size: 14px; line-height: 1.3; }
.cx-bigcats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.cx-bigcat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 22px; border-radius: 24px; overflow: hidden; color: var(--cx-ink); isolation: isolate; }
.cx-bigcat:hover { color: var(--cx-ink); box-shadow: inset 0 0 0 2px var(--cx-brand); }
.cx-bigcat .cx-art { position: absolute; right: 10px; top: 10px; width: 52%; height: auto; aspect-ratio: 1; z-index: -1; transition: transform .3s; }
.cx-bigcat:hover .cx-art { transform: rotate(-4deg) scale(1.05); }
.cx-bigcat h2 { font-size: 21px; margin: 0 0 2px; }
.cx-bigcat span { font-size: 13.5px; font-weight: 700; color: var(--cx-brand); }
@media (max-width: 991.98px) { .cx-bigcats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .cx-bigcats { gap: 10px; } .cx-bigcat { min-height: 150px; padding: 14px; } .cx-bigcat h2 { font-size: 16px; } }

/* ---------- Product page ---------------------------------------------------------------------- */
.cx-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px; padding: 18px 0 32px; align-items: start; }
@media (max-width: 991.98px) { .cx-pdp { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.cx-gallery { position: sticky; top: calc(var(--cx-header-h) + 70px); }
@media (max-width: 991.98px) { .cx-gallery { position: static; } }
.cx-gallery__main { position: relative; border-radius: 26px; overflow: hidden; background: #F4F7FA; aspect-ratio: 1 / 1; }
.cx-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; cursor: zoom-in; transition: transform .2s; }
.cx-gallery__main.is-zoom img { transform: scale(1.9); cursor: zoom-out; }
.cx-gallery__main .cx-card__ph .cx-art { width: 55%; }
.cx-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.cx-gallery__thumbs button { flex: none; width: 80px; height: 80px; padding: 4px; border-radius: 14px; border: 2px solid transparent; background: #F4F7FA; cursor: pointer; }
.cx-gallery__thumbs button img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cx-gallery__thumbs button.is-active { border-color: var(--cx-brand); background: #fff; }
.cx-pdp__info h1 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; margin: 10px 0 12px; }
.cx-pdp__meta-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13.5px; color: var(--cx-muted); }
.cx-pdp__cat { display: inline-block; font-size: 13px; font-weight: 800; color: var(--cx-brand); background: var(--cx-brand-soft); padding: 5px 12px; border-radius: var(--cx-pill); }
.cx-pdp__price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 16px; }
.cx-pdp__price .cx-price__now { font-size: 32px; }
.cx-pdp__price .cx-price__was { font-size: 17px; }
.cx-save { font: 800 12.5px var(--cx-font); color: var(--cx-ink); background: var(--cx-save); padding: 5px 11px; border-radius: var(--cx-pill); }
.cx-pdp__short { font-size: 16px; color: var(--cx-text); margin-bottom: 18px; max-width: 62ch; }
.cx-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; list-style: none; padding: 0; margin: 0 0 18px; font-size: 14.5px; color: var(--cx-ink); }
.cx-points li { display: flex; align-items: center; gap: 10px; }
.cx-points .cx-ico { color: var(--cx-brand); width: 20px; height: 20px; }
.cx-stockline { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; margin-bottom: 20px; color: var(--cx-ink); }
.cx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cx-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-ok) 18%, transparent); flex: none; }
.cx-dot--out { background: var(--cx-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-danger) 16%, transparent); }
.cx-opt { margin-bottom: 18px; }
.cx-opt__label { font-weight: 800; color: var(--cx-ink); margin-bottom: 10px; font-size: 14px; }
.cx-opt__label span { font-weight: 500; color: var(--cx-muted); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-chip { min-width: 50px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--cx-line); background: #fff; color: var(--cx-ink); font: 700 14px var(--cx-font); cursor: pointer; transition: border-color .15s, background .15s; }
.cx-chip:hover { border-color: var(--cx-ink); }
.cx-chip.selected { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-buy { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 10px; }
.cx-buy .cx-btn { flex: 1; min-width: 0; }
.cx-qty { display: inline-flex; align-items: center; height: 54px; border: 1.5px solid var(--cx-line); border-radius: var(--cx-pill); padding: 0 4px; flex: none; background: #fff; }
.cx-qty button, .cx-qty > a { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; color: var(--cx-ink); cursor: pointer; }
.cx-qty button:hover, .cx-qty > a:hover { background: var(--cx-brand-softer); }
.cx-qty input { width: 38px; border: 0; background: none; text-align: center; font: 800 16px var(--cx-font); color: var(--cx-ink); padding: 0; height: auto; }
.cx-qty input:focus { outline: none; }
.cx-qty--sm { height: 40px; }
.cx-qty--sm button { width: 32px; height: 32px; }
.cx-qty--sm input { width: 32px; font-size: 15px; }
.cx-buy2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 14px; }
.cx-wishbtn { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--cx-line); color: var(--cx-ink); cursor: pointer; flex: none; background: #fff; }
.cx-wishbtn:hover { color: var(--cx-sale); border-color: var(--cx-sale); }
.cx-hint { font-size: 13.5px; color: var(--cx-muted); margin: 0 0 16px; }
.cx-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.cx-assure li { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--cx-brand-softer); font-size: 13px; color: var(--cx-text); line-height: 1.35; }
.cx-assure li .cx-ico { color: var(--cx-brand); width: 22px; height: 22px; }
.cx-assure li strong { color: var(--cx-ink); font-size: 13.5px; }
@media (max-width: 575.98px) {
    .cx-assure { grid-template-columns: 1fr; } .cx-assure li { flex-direction: row; align-items: center; }
    .cx-points { grid-template-columns: 1fr; }
    .cx-buy { gap: 8px; } .cx-qty input { width: 30px; } .cx-qty button { width: 34px; }
}
.cx-meta { list-style: none; padding: 0; margin: 0; font-size: 14px; display: grid; gap: 7px; }
.cx-meta li { display: flex; gap: 8px; }
.cx-meta li > span:first-child { color: var(--cx-muted); min-width: 86px; }
.cx-meta a { color: var(--cx-brand); }
.cx-detail-tabs { border-top: 1px solid var(--cx-line); padding-top: 28px; margin-top: 12px; }
.cx-detail-tabs .tab-content { padding-top: 22px; max-width: 880px; }
.cx-prose { color: var(--cx-text); font-size: 15.5px; line-height: 1.75; }
.cx-prose h2, .cx-prose h3 { margin: 1.6em 0 .5em; font-size: 20px; }
.cx-prose h2:first-child, .cx-prose h3:first-child { margin-top: 0; }
.cx-prose ul, .cx-prose ol { padding-left: 1.2em; }
.cx-prose li { margin-bottom: .35em; }
.cx-prose img { border-radius: 14px; }
.cx-prose table { width: 100%; border-collapse: collapse; }
.cx-prose th, .cx-prose td { border-bottom: 1px solid var(--cx-line); padding: 10px 6px; text-align: left; }
.cx-stickybuy { display: none; }
@media (max-width: 991.98px) {
    .cx-stickybuy { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 1035; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--cx-line); transform: translateY(130%); transition: transform .2s; }
    .cx-stickybuy.is-visible { transform: none; }
    .cx-stickybuy .cx-price__now { font-size: 18px; }
    .cx-stickybuy .cx-btn { margin-left: auto; min-height: 46px; }
}

/* ---------- Steps bar (cart → checkout → done) -------------------------------------------------- */
.cx-stepsbar { display: flex; align-items: center; list-style: none; padding: 0; margin: 18px 0 6px; max-width: 560px; }
.cx-stepsbar li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--cx-muted); flex: 1; }
.cx-stepsbar li:last-child { flex: none; }
.cx-stepsbar li::after { content: ""; flex: 1; height: 2px; background: var(--cx-line); margin: 0 12px; border-radius: 2px; }
.cx-stepsbar li:last-child::after { display: none; }
.cx-stepsbar b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EEF2F6; color: var(--cx-muted); font: 800 14px var(--cx-font-head); flex: none; }
.cx-stepsbar a { color: inherit; }
.cx-stepsbar .is-done b { background: var(--cx-ok); color: #fff; }
.cx-stepsbar .is-done::after { background: var(--cx-ok); }
.cx-stepsbar .is-now { color: var(--cx-ink); }
.cx-stepsbar .is-now b { background: var(--cx-brand); color: #fff; box-shadow: 0 0 0 5px var(--cx-brand-soft); }
@media (max-width: 575.98px) { .cx-stepsbar li { font-size: 12.5px; gap: 6px; } .cx-stepsbar li::after { margin: 0 6px; } .cx-stepsbar b { width: 26px; height: 26px; font-size: 12.5px; } }

/* ---------- Cart ----------------------------------------------------------------------------------- */
.cx-cart { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 32px; align-items: start; padding: 16px 0 48px; }
@media (max-width: 991.98px) { .cx-cart { grid-template-columns: minmax(0, 1fr); } }
.cx-cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cx-line); }
.cx-cart-item { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--cx-line); }
.cx-cart-item__img { position: relative; width: 100px; height: 100px; border-radius: 16px; background: #F4F7FA; overflow: hidden; display: block; }
.cx-cart-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.cx-cart-item__img .cx-card__ph { padding: 14%; }
.cx-cart-item__img .cx-card__ph .cx-art { width: 80%; }
.cx-cart-item__img .cx-card__ph span { display: none; }
.cx-cart-item__name { font-weight: 700; color: var(--cx-ink); line-height: 1.35; display: block; margin-bottom: 2px; }
.cx-cart-item__name:hover { color: var(--cx-brand); }
.cx-cart-item__variant, .cx-cart-item__unit { font-size: 13px; color: var(--cx-muted); }
.cx-cart-item__ctrl { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cx-cart-item__total { text-align: right; font: 800 16px var(--cx-font-head); color: var(--cx-ink); white-space: nowrap; }
.cx-remove { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--cx-muted); cursor: pointer; background: none; border: 0; padding: 6px; border-radius: 8px; }
.cx-remove:hover { color: var(--cx-danger); background: #FDEDED; }
@media (max-width: 575.98px) { .cx-cart-item { grid-template-columns: 80px minmax(0, 1fr); } .cx-cart-item__img { width: 80px; height: 80px; } .cx-cart-item__total { grid-column: 2; text-align: left; } }
.cx-summary { position: sticky; top: calc(var(--cx-header-h) + 70px); border-radius: 24px; background: #F6F9FC; border: 1px solid var(--cx-line); padding: 24px; }
.cx-summary h2 { font-size: 20px; margin: 0 0 16px; }
.cx-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; }
.cx-summary__row > span:first-child { color: var(--cx-muted); }
.cx-summary__row strong, .cx-summary__row strong span { color: var(--cx-ink); font-weight: 800; }
.cx-summary__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--cx-line); margin-top: 10px; padding-top: 14px; }
.cx-summary__total > span { font-weight: 800; color: var(--cx-ink); }
.cx-summary__total strong { font: 800 25px var(--cx-font-head); color: var(--cx-ink); }
.cx-summary .cx-btn { margin-top: 18px; }
.cx-summary__note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--cx-muted); margin: 14px 0 0; text-align: center; }
@media (max-width: 991.98px) { .cx-summary { position: static; } }

/* ---------- Checkout ------------------------------------------------------------------------------- */
.cx-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; padding: 16px 0 48px; }
@media (max-width: 991.98px) { .cx-checkout { grid-template-columns: minmax(0, 1fr); } }
.cx-panel { border: 1px solid var(--cx-line); border-radius: 24px; padding: 26px; margin-bottom: 20px; background: #fff; }
.cx-panel__title { display: flex; align-items: center; gap: 12px; font-size: 19px; margin: 0 0 18px; }
.cx-panel__step { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cx-brand-soft); color: var(--cx-brand); font: 800 14px var(--cx-font-head); }
@media (max-width: 575.98px) { .cx-panel { padding: 20px 16px; border-radius: 20px; } }
.cx-pay { display: grid; gap: 10px; }
.cx-pay label { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--cx-line); border-radius: 16px; cursor: pointer; margin: 0; transition: border-color .15s, background .15s; }
.cx-pay label:hover { border-color: #C5CFD8; }
.cx-pay input[type=radio] { width: 20px; height: 20px; accent-color: var(--cx-brand); margin: 0; flex: none; }
.cx-pay label:has(input:checked) { border-color: var(--cx-brand); background: var(--cx-brand-softer); }
.cx-pay__text strong { display: block; color: var(--cx-ink); font-size: 15px; }
.cx-pay__text small { color: var(--cx-muted); font-size: 13px; }
.cx-pay label > .cx-ico { margin-left: auto; width: 26px; height: 26px; color: var(--cx-brand); }
.cx-order-lines { list-style: none; margin: 0 0 8px; padding: 0; max-height: 360px; overflow-y: auto; }
.cx-order-line { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; }
.cx-order-line__img { position: relative; width: 58px; height: 58px; border-radius: 14px; background: #fff; border: 1px solid var(--cx-line); }
.cx-order-line__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; border-radius: 14px; }
.cx-order-line__img .cx-art { padding: 8px; }
.cx-order-line__img b { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px; background: var(--cx-ink); color: #fff; font: 800 11px/21px var(--cx-font); text-align: center; }
.cx-order-line__name { font-size: 14px; font-weight: 600; color: var(--cx-ink); line-height: 1.35; }
.cx-order-line__name small { display: block; color: var(--cx-muted); font-weight: 500; }
.cx-order-line__price { font-weight: 800; color: var(--cx-ink); font-size: 14px; white-space: nowrap; }
.cx-coupon { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.cx-coupon input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: var(--cx-pill); border: 1.5px solid var(--cx-line); background: #fff; font: 15px var(--cx-font); }
.cx-coupon input:focus { outline: none; border-color: var(--cx-brand); }
.cx-coupon .cx-btn { min-height: 46px; height: 46px; margin: 0; }

/* ---------- Quick view modal ----------------------------------------------------------------------- */
#quickViewModal .modal-dialog { max-width: 940px; }
#quickViewModal .modal-content { border: 0; border-radius: 28px; padding: 26px; }
#quickViewModal .btn-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; background-color: #F1F5F9; opacity: 1; }
.cx-qv__img { position: relative; aspect-ratio: 1; border-radius: 20px; background: #F4F7FA; overflow: hidden; }
.cx-qv__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.cx-qv__thumbs { display: flex; gap: 8px; margin-top: 10px; }
.cx-qv__thumbs button { width: 60px; height: 60px; padding: 3px; border-radius: 12px; border: 2px solid transparent; background: #F4F7FA; cursor: pointer; }
.cx-qv__thumbs button.is-active { border-color: var(--cx-brand); }
.cx-qv__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
#quickViewModal h2 { font-size: 24px; margin: 4px 0 10px; padding-right: 40px; }
@media (max-width: 767.98px) { #quickViewModal .modal-content { padding: 18px; border-radius: 22px; } #quickViewModal h2 { font-size: 20px; } }

/* ---------- Account ----------------------------------------------------------------------------------- */
.cx-account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; padding: 16px 0 48px; }
@media (max-width: 991.98px) { .cx-account { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.cx-acc-menu { border: 1px solid var(--cx-line); border-radius: 22px; padding: 10px; position: sticky; top: calc(var(--cx-header-h) + 70px); }
.cx-acc-menu__user { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid var(--cx-line); margin-bottom: 6px; }
.cx-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cx-brand); color: #fff; font: 800 18px var(--cx-font-head); flex: none; }
.cx-acc-menu__user strong { display: block; color: var(--cx-ink); line-height: 1.2; }
.cx-acc-menu__user span { font-size: 12.5px; color: var(--cx-muted); word-break: break-all; }
.cx-acc-menu nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 700; color: var(--cx-text); }
.cx-acc-menu nav a:hover { background: var(--cx-brand-softer); color: var(--cx-ink); }
.cx-acc-menu nav a.active { background: var(--cx-brand-soft); color: var(--cx-brand); }
@media (max-width: 991.98px) {
    .cx-acc-menu { position: static; padding: 8px; border-radius: 18px; }
    .cx-acc-menu__user { display: none; }
    .cx-acc-menu nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .cx-acc-menu nav a { flex: none; white-space: nowrap; padding: 9px 12px; font-size: 14px; }
}
.cx-card-box { border: 1px solid var(--cx-line); border-radius: 22px; padding: 24px; background: #fff; margin-bottom: 18px; }
.cx-card-box > h2 { font-size: 20px; margin: 0 0 14px; }
@media (max-width: 575.98px) { .cx-card-box { padding: 18px 16px; border-radius: 18px; } }
.cx-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.cx-stat { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; color: var(--cx-ink); }
.cx-stat:hover { color: var(--cx-ink); box-shadow: inset 0 0 0 2px var(--cx-brand); }
.cx-stat__art { width: 54px; height: 54px; flex: none; }
.cx-stat strong { display: block; font: 800 17px var(--cx-font-head); }
.cx-stat span { font-size: 13px; color: var(--cx-muted); }
@media (max-width: 767.98px) { .cx-stat-grid { grid-template-columns: 1fr; } }
.cx-orders { list-style: none; padding: 0; margin: 0; }
.cx-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cx-line); }
.cx-order:last-child { border-bottom: 0; }
.cx-order__ref { font-weight: 800; color: var(--cx-ink); }
.cx-order__meta { font-size: 13.5px; color: var(--cx-muted); }
.cx-order__actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 575.98px) { .cx-order { grid-template-columns: 1fr; } .cx-order__actions { justify-content: flex-start; } }
.cx-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--cx-pill); font: 800 12px var(--cx-font); }
.cx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cx-status--done { background: #E3F6EE; color: #0E6B49; }
.cx-status--pending { background: #FFF4D6; color: #7A5300; }
.cx-status--cancel { background: #FDE8E8; color: #9B1C1C; }
.cx-status--ship { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
.cx-progress { display: flex; list-style: none; padding: 0; margin: 6px 0 4px; }
.cx-progress li { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--cx-muted); position: relative; padding-top: 34px; }
.cx-progress li::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #EEF2F6; border: 3px solid #fff; box-shadow: 0 0 0 2px #EEF2F6; z-index: 1; }
.cx-progress li::after { content: ""; position: absolute; top: 16px; left: -50%; right: 50%; height: 3px; background: #EEF2F6; }
.cx-progress li:first-child::after { display: none; }
.cx-progress li.is-done { color: var(--cx-ink); }
.cx-progress li.is-done::before { background: var(--cx-ok); box-shadow: 0 0 0 2px var(--cx-ok); }
.cx-progress li.is-done::after { background: var(--cx-ok); }
.cx-progress--cancel li.is-done::before { background: var(--cx-danger); box-shadow: 0 0 0 2px var(--cx-danger); }
.cx-addr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 767.98px) { .cx-addr-grid { grid-template-columns: 1fr; } }
.cx-addr { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px; border-radius: 18px; border: 1.5px solid var(--cx-line); font-size: 14.5px; }
.cx-addr.is-default { border-color: var(--cx-brand); background: var(--cx-brand-softer); }
.cx-addr strong { color: var(--cx-ink); }
.cx-addr__actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.cx-addr__flag { position: absolute; top: 14px; right: 14px; }

/* ---------- Auth ------------------------------------------------------------------------------------- */
.cx-auth { display: grid; grid-template-columns: 1fr 1fr; max-width: 1040px; margin: 32px auto 56px; border-radius: 30px; overflow: hidden; border: 1px solid var(--cx-line); background: #fff; }
.cx-auth__art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; background: linear-gradient(160deg, #E4F3FC, #CFE9FA); min-height: 540px; overflow: hidden; }
.cx-auth__art h2 { font-size: 28px; margin: 0 0 8px; position: relative; z-index: 1; }
.cx-auth__art p { margin: 0; color: var(--cx-text); position: relative; z-index: 1; max-width: 34ch; }
.cx-auth__scene { position: absolute; inset: 10px 10px 130px 10px; }
.cx-auth__scene svg { width: 100%; height: 100%; }
.cx-auth__form { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.cx-auth__form h1 { font-size: 30px; margin: 0 0 6px; }
.cx-auth__form > p { color: var(--cx-muted); margin-bottom: 24px; }
.cx-auth__alt { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--cx-muted); }
.cx-pass { position: relative; }
.cx-pass button { position: absolute; right: 6px; top: 5px; width: 40px; height: 40px; border: 0; background: none; color: var(--cx-muted); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.cx-pass button:hover { color: var(--cx-ink); background: var(--cx-brand-softer); }
.cx-field .cx-pass input { padding-right: 50px; }
.cx-field input.cx-code-input { letter-spacing: .5em; text-align: center; font-size: 26px; font-weight: 800; height: 62px; }
@media (max-width: 767.98px) { .cx-auth { grid-template-columns: 1fr; margin: 16px auto 32px; border-radius: 24px; } .cx-auth__art { display: none; } .cx-auth__form { padding: 30px 22px; } }

/* ---------- Content pages ------------------------------------------------------------------------------ */
.cx-content { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; padding: 16px 0 48px; }
.cx-content__main { max-width: 780px; }
.cx-toc { position: sticky; top: calc(var(--cx-header-h) + 70px); border-left: 2px solid var(--cx-line); padding-left: 16px; display: grid; gap: 8px; font-size: 14px; }
.cx-toc strong { color: var(--cx-ink); font-size: 13px; margin-bottom: 4px; }
.cx-toc a { color: var(--cx-muted); }
.cx-toc a:hover { color: var(--cx-brand); }
@media (max-width: 991.98px) { .cx-content { grid-template-columns: minmax(0, 1fr); } .cx-toc { display: none; } }
.cx-prose section { scroll-margin-top: calc(var(--cx-header-h) + 70px); }
.cx-help-box { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 22px; background: var(--cx-brand-soft); margin-top: 32px; flex-wrap: wrap; }
.cx-help-box h2 { font-size: 18px; margin: 0 0 2px; }
.cx-help-box p { margin: 0; color: var(--cx-text); }
.cx-help-box > div:nth-child(2) { flex: 1; min-width: 200px; }
.cx-help-box__art { width: 70px; height: 70px; flex: none; }
.cx-faq { display: grid; gap: 10px; }
.cx-faq details { border: 1.5px solid var(--cx-line); border-radius: 18px; background: #fff; transition: border-color .15s; }
.cx-faq details[open] { border-color: var(--cx-brand); }
.cx-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; font-weight: 800; color: var(--cx-ink); list-style: none; font-size: 16px; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary .cx-ico { transition: transform .2s; color: var(--cx-brand); }
.cx-faq details[open] summary .cx-ico { transform: rotate(180deg); }
.cx-faq details > div { padding: 0 20px 18px; color: var(--cx-text); }
.cx-about-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; padding: 30px 0 10px; }
.cx-about-hero h1 { font-size: clamp(30px, 3.6vw, 46px); margin: 8px 0 16px; }
.cx-about-hero p { font-size: 16.5px; max-width: 58ch; }
.cx-about-hero__art { aspect-ratio: 1.15; border-radius: 30px; background: linear-gradient(160deg, #E4F3FC, #CFE9FA); position: relative; overflow: hidden; }
.cx-about-hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 991.98px) { .cx-about-hero { grid-template-columns: 1fr; } }
.cx-figures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cx-figures div { padding: 20px 16px; border-radius: 20px; background: var(--cx-brand-softer); text-align: center; }
.cx-figures strong { display: block; font: 800 28px var(--cx-font-head); color: var(--cx-brand); }
.cx-figures span { font-size: 13.5px; color: var(--cx-text); }
@media (max-width: 767.98px) { .cx-figures { grid-template-columns: 1fr 1fr; } }
.cx-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cx-values > div { padding: 20px; border-radius: 20px; border: 1px solid var(--cx-line); }
.cx-values .cx-art { width: 56px; height: 56px; margin-bottom: 10px; }
.cx-values strong { display: block; color: var(--cx-ink); font-size: 16px; margin-bottom: 4px; }
.cx-values span { font-size: 14px; color: var(--cx-muted); }
@media (max-width: 991.98px) { .cx-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .cx-values { grid-template-columns: 1fr; } }
.cx-map { border: 0; width: 100%; height: 360px; border-radius: 22px; background: var(--cx-brand-softer); display: block; }
.cx-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 991.98px) { .cx-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .cx-blog-grid { grid-template-columns: 1fr; } }
.cx-post { display: flex; flex-direction: column; gap: 12px; color: var(--cx-ink); }
.cx-post:hover { color: var(--cx-ink); }
.cx-post__img { aspect-ratio: 16/10; border-radius: 20px; overflow: hidden; background: var(--cx-t-sky); }
.cx-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.cx-post:hover img { transform: scale(1.04); }
.cx-post h2 { font-size: 19px; margin: 0; }
.cx-post:hover h2 { color: var(--cx-brand); }
.cx-article { max-width: 780px; margin: 0 auto; padding: 10px 0 48px; }
.cx-article__img { border-radius: 24px; overflow: hidden; margin: 18px 0 28px; }

/* ---------- Empty / result states --------------------------------------------------------------------- */
.cx-empty { text-align: center; padding: 40px 20px 46px; border-radius: 28px; background: var(--cx-brand-softer); }
.cx-empty__art { width: 150px; height: 150px; margin: 0 auto 8px; }
.cx-empty h2, .cx-empty h3 { font-size: 24px; margin: 6px 0 6px; }
.cx-empty p { color: var(--cx-muted); margin: 0 auto 20px; max-width: 46ch; }
.cx-empty__ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cx-result { max-width: 660px; margin: 36px auto 56px; text-align: center; }
.cx-result__art { width: 170px; height: 170px; margin: 0 auto 10px; }
.cx-result h1 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 10px; }
.cx-result__ref { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: var(--cx-brand-soft); font-size: 15px; color: var(--cx-ink); margin: 8px 0 22px; flex-wrap: wrap; justify-content: center; }
.cx-result__ref strong { font: 800 18px var(--cx-font-head); letter-spacing: .02em; }
.cx-next { text-align: left; border: 1px solid var(--cx-line); border-radius: 22px; padding: 22px; margin-bottom: 22px; }
.cx-next h2 { font-size: 17px; margin: 0 0 12px; }
.cx-next ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--cx-text); }
.cx-result .cx-stepsbar { width: 100%; max-width: 480px; margin: 0 auto; }

/* ---------- v2.1 phone fixes ---------- */
/* Grid/flex children may shrink below their content; scrolling rows (sub-categories, account tabs) stay inside the screen */
.cx-shop > *, .cx-pdp > *, .cx-cart > *, .cx-checkout > *, .cx-account > *, .cx-content > *, .cx-hero__grid > *, .cx-footer__grid > * { min-width: 0; }
html, body { max-width: 100%; }
body { overflow-x: clip; }
.cx-footer, .cx-trust { overflow-wrap: anywhere; }

/* Footer on phones: Shop | Help side by side, Account below in two columns, then contact */
@media (max-width: 575.98px) {
    .cx-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 16px; }
    .cx-footer__about, .cx-footer__contact, .cx-footer__grid > nav[aria-labelledby="ft-acc"] { grid-column: 1 / -1; }
    .cx-footer__grid > nav[aria-labelledby="ft-acc"] ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
    .cx-footer__contact { border-top: 1px solid var(--cx-line); padding-top: 20px; }
    .cx-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
    .cx-trust li { padding: 16px 12px; }
}

/* Brands: even tiles in a tidy grid instead of a ragged scroll row */
.cx-brands { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 0; }
.cx-brand { min-width: 0; height: 84px; padding: 10px 12px; text-align: center; font-size: 15px; line-height: 1.2; }
.cx-brand > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-brand img { max-width: 100%; }
@media (max-width: 1199.98px) { .cx-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .cx-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cx-brand { height: 70px; font-size: 13.5px; border-radius: 14px; } }
.cx-trust__icon svg { width: 22px; height: 22px; }
.cx-trust__icon { color: var(--cx-brand-ink); }

/* ---------- v2.1: suggestions, repeat option, auto orders ---------- */
label.cx-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
label.cx-chip input { position: absolute; opacity: 0; pointer-events: none; }
label.cx-chip:has(input:checked) { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
label.cx-chip:has(input:focus-visible) { outline: 2px solid var(--cx-brand); outline-offset: 2px; }
.cx-repeat .cx-check strong { color: var(--cx-ink); }

.cx-suggest { margin: 4px 0 24px; padding: 22px; border-radius: 24px; background: linear-gradient(180deg, var(--cx-t-butter, #FFF6DC) 0%, #fff 75%); border: 1px solid var(--cx-line); }
.cx-cart__main .cx-suggest { margin-top: 26px; }
.cx-suggest__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.cx-suggest__head h2 { font-size: 19px; margin: 0 0 2px; }
.cx-suggest__head p { margin: 0; font-size: 14px; color: var(--cx-muted); }
.cx-suggest__nav { display: flex; gap: 6px; flex: none; }
.cx-suggest__nav .cx-iconbtn { width: 38px; height: 38px; background: #fff; border: 1px solid var(--cx-line); }
.cx-suggest__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 172px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; padding: 2px; margin: 0; }
.cx-suggest__rail::-webkit-scrollbar { display: none; }
.cx-mini { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--cx-line); }
.cx-mini__img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #F4F7FA; overflow: hidden; }
.cx-mini__img img { width: 100%; height: 100%; object-fit: contain; }
.cx-mini__img .cx-tag { position: absolute; top: 6px; left: 6px; }
.cx-mini__ph { display: grid; place-items: center; width: 60%; height: 60%; }
.cx-mini__ph svg { width: 100%; height: 100%; }
.cx-mini__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--cx-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.cx-mini__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cx-mini__price strong { font-size: 14.5px; color: var(--cx-ink); }
.cx-mini__price strong.is-sale { color: var(--cx-sale); }
.cx-mini__price s { display: block; font-size: 12px; color: var(--cx-muted); }
.cx-mini__add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 12px; border: 0; background: var(--cx-brand-soft); color: var(--cx-brand-ink); font: 800 13.5px var(--cx-font); cursor: pointer; transition: background .15s, color .15s; }
.cx-mini__add svg { width: 16px; height: 16px; }
.cx-mini__add:hover { background: var(--cx-brand); color: #fff; }
.cx-mini__add:disabled { background: #E3F6EE; color: #0E6B49; }
@media (max-width: 575.98px) { .cx-suggest { padding: 18px 14px; border-radius: 20px; } .cx-suggest__nav { display: none; } .cx-suggest__rail { grid-auto-columns: 46%; } }

.cx-autolink { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px; border-radius: 16px; background: #fff; border: 1px dashed #BFD3E6; font-size: 13.5px; color: var(--cx-text); }
.cx-autolink svg { width: 22px; height: 22px; color: var(--cx-brand); flex: none; margin-top: 1px; }
.cx-autolink strong { color: var(--cx-ink); }
.cx-autolink:hover { border-color: var(--cx-brand); color: var(--cx-text); }

.cx-auto { border: 1px solid var(--cx-line); border-radius: 22px; padding: 22px; margin-bottom: 16px; background: #fff; }
.cx-auto.is-off { background: #FAFBFC; }
.cx-auto__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cx-auto__title { font-size: 19px; margin: 0; }
.cx-auto__next { display: flex; align-items: center; gap: 14px; margin: 16px 0; padding: 14px 16px; border-radius: 16px; background: var(--cx-brand-softer); }
.cx-auto__next svg { width: 26px; height: 26px; color: var(--cx-brand); flex: none; }
.cx-auto__next strong { display: block; font-size: 17px; color: var(--cx-ink); }
.cx-auto__next span { font-size: 13.5px; color: var(--cx-muted); }
.cx-auto__items { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.cx-auto__items li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--cx-pill); background: #F4F7FA; font-size: 13.5px; font-weight: 600; color: var(--cx-ink); max-width: 100%; }
.cx-auto__items img, .cx-auto__items .cx-auto__ph { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #fff; flex: none; }
.cx-auto__items span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-auto__msg { font-size: 13px; color: var(--cx-muted); margin: 0 0 14px; }
.cx-auto__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-auto__actions form { margin: 0; }
.cx-status--paused { background: #EEF2F6; color: #44505C; }
.cx-howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; list-style: none; padding: 0; }
.cx-howto li { padding: 16px; border-radius: 18px; background: #F6F9FC; font-size: 14px; color: var(--cx-text); }
.cx-howto strong { display: block; color: var(--cx-ink); margin-bottom: 2px; }
@media (max-width: 767.98px) { .cx-howto { grid-template-columns: minmax(0, 1fr); } .cx-auto { padding: 18px 16px; } }

.cx-freq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cx-freq label { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--cx-line); border-radius: 16px; cursor: pointer; margin: 0; font-size: 13px; color: var(--cx-muted); }
.cx-freq label strong { font-size: 15px; color: var(--cx-ink); }
.cx-freq input { position: absolute; opacity: 0; pointer-events: none; }
.cx-freq label:has(input:checked) { border-color: var(--cx-brand); background: var(--cx-brand-softer); box-shadow: 0 0 0 1px var(--cx-brand); }
.cx-freq label:has(input:focus-visible) { outline: 2px solid var(--cx-brand); outline-offset: 2px; }
@media (max-width: 767.98px) { .cx-freq { grid-template-columns: 1fr 1fr; } }
.cx-aoline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--cx-line); }
.cx-aoline.is-removed { display: none; }
.cx-aoline__img { width: 56px; height: 56px; border-radius: 12px; background: #F4F7FA; display: grid; place-items: center; overflow: hidden; }
.cx-aoline__img img { width: 100%; height: 100%; object-fit: contain; }
.cx-aoline__img svg { width: 70%; height: 70%; }
.cx-aoline__name { font-weight: 700; color: var(--cx-ink); font-size: 14.5px; line-height: 1.3; }
.cx-aoline__name small { display: block; font-weight: 600; color: var(--cx-muted); font-size: 12.5px; }
.cx-aoline__ctl { display: flex; align-items: center; gap: 8px; }
@media (max-width: 575.98px) { .cx-aoline { grid-template-columns: 48px minmax(0, 1fr); } .cx-aoline__img { width: 48px; height: 48px; } .cx-aoline__ctl { grid-column: 2; } }
/* brands: centred rows so a short last row stays balanced */
.cx-brands { display: flex; flex-wrap: wrap; justify-content: center; }
.cx-brand { flex: 0 0 calc((100% - 6 * 12px) / 7); display: flex; align-items: center; justify-content: center; color: #4A5A6A; }
.cx-brand:hover { color: var(--cx-brand); }
@media (max-width: 1199.98px) { .cx-brand { flex-basis: calc((100% - 4 * 12px) / 5); } }
@media (max-width: 767.98px) { .cx-brand { flex-basis: calc((100% - 2 * 10px) / 3); } }

/* ---------- v4: loader, image shimmer, accessibility ---------- */
/* thin progress bar at the top while the next page loads (never blocks the page) */
.cx-loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
    background: linear-gradient(90deg, var(--cx-sky), var(--cx-brand)); box-shadow: 0 0 10px color-mix(in srgb, var(--cx-brand) 60%, transparent); }
.cx-loadbar.is-on { opacity: 1; transform: scaleX(.92); transition: transform 6s cubic-bezier(.08, .8, .2, 1), opacity .15s; }
@media (prefers-reduced-motion: reduce) { .cx-loadbar.is-on { transition: opacity .15s; transform: scaleX(.6); } }

/* soft shimmer behind product photos until they arrive */
@keyframes cx-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.cx-card__media:not(.is-loaded):has(img.is-main) { background: linear-gradient(100deg, #F1F4F7 30%, #F9FBFC 50%, #F1F4F7 70%) #F1F4F7; background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .cx-card__media:not(.is-loaded):has(img.is-main) { animation: cx-shimmer 1.3s linear infinite; } }
.cx-card__media img.is-main { opacity: 0; }
.cx-card__media.is-loaded img.is-main { opacity: 1; }
@media (scripting: none) { .cx-card__media img.is-main { opacity: 1; } }

/* readable newsletter button and comfortable tap targets */
.cx-cta-band .cx-btn { background: var(--cx-sky); color: var(--cx-ink); }
.cx-cta-band .cx-btn:hover { background: #fff; color: var(--cx-ink); }
.cx-card__cat { display: inline-block; min-height: 24px; line-height: 24px; margin-bottom: 0; }
.cx-card__title a { display: inline; padding: 3px 0; }
.cx-tag--hot { background: var(--cx-sale); }
@media (hover: hover) {
    .cx-card:hover .cx-card__media img.is-main:not(:only-of-type) { opacity: 1; }
    .cx-card:hover .cx-card__media:has(img.is-alt.is-ready) img.is-main { opacity: 0; }
    .cx-card:hover .cx-card__media img.is-alt:not(.is-ready) { opacity: 0; }
}
.cx-card__title { line-height: 24px; min-height: 48px; }
.cx-card__cat { margin-bottom: 2px; }
.cx-pdp__cat { color: var(--cx-brand-ink); }
.cx-card__media img.is-main[fetchpriority="high"] { opacity: 1; transition: none; }

/* ======================================================================================
   v5 theme: one family store, three groups
   Baby Care = logo blue · Home & Kitchen = marigold · Lifestyle = leaf green
   ====================================================================================== */
:root {
    --g-baby: #1D75BC; --g-baby-ink: #1A64A3; --g-baby-t: #E4F3FC; --g-baby-dot: #28A9E2;
    --g-home: #F4B740; --g-home-ink: #8F5400; --g-home-t: #FFF1D6; --g-home-dot: #F4B740;
    --g-life: #3DBE8B; --g-life-ink: #0B6B53; --g-life-t: #DFF5EF; --g-life-dot: #3DBE8B;
}
/* Sinhala text (slogan) – downloaded only when Sinhala letters are on the page */
@font-face { font-family: "Noto Sans Sinhala"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0D80-0DFF, U+200C-200D;
    src: url("../fonts/noto-sans-sinhala-sinhala-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Sinhala"; font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0D80-0DFF, U+200C-200D;
    src: url("../fonts/noto-sans-sinhala-sinhala-700-normal.woff2") format("woff2"); }
[lang="si"] { font-family: "Noto Sans Sinhala", var(--cx-font); }

/* group chips (also used as the slogan line "Baby Care | Home & Kitchen | Lifestyle") */
.cx-gchip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--cx-pill); background: #fff;
    font: 800 13.5px var(--cx-font); color: var(--cx-ink); border: 1.5px solid transparent; white-space: nowrap; }
.cx-gchip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--g-baby-dot)); }
.cx-gchip:hover { color: var(--cx-ink); border-color: var(--dot); }
.cx-gchip--baby { --dot: var(--g-baby-dot); } .cx-gchip--home { --dot: var(--g-home-dot); } .cx-gchip--life { --dot: var(--g-life-dot); }

/* hero */
.cx-hero--family .cx-hero__main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); min-height: 470px;
    background: radial-gradient(120% 90% at 0% 0%, #EAF5FD 0%, #F6FAFD 55%, #FFF8EA 100%);
    border: 1px solid #E3EEF6;
}
.cx-hero--family .cx-hero__main::before { display: none; }
.cx-hero__groups { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
.cx-hero__groups .cx-gchip { box-shadow: 0 2px 8px rgba(18, 48, 77, .07); }
.cx-hero--family h1 { font-size: clamp(30px, 3.7vw, 52px); max-width: 17ch; }
.cx-hero__si { font: 600 clamp(15px, 1.35vw, 17.5px)/1.7 "Noto Sans Sinhala", var(--cx-font) !important; color: var(--cx-ink) !important;
    max-width: 46ch !important; margin: 0 0 12px !important; padding-left: 14px; border-left: 4px solid var(--g-home-dot); }
.cx-hero--family .cx-hero__copy p:not(.cx-hero__si) { font-size: 15.5px; }
.cx-hero--family .cx-hero__scene { min-height: 400px; }
.cx-count { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; margin-left: 4px; border-radius: var(--cx-pill); background: var(--cx-sale); color: #fff; font-size: 12px; }

/* the three group cards under the hero */
.cx-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.cx-pillar { --t: var(--g-baby-t); --ink: var(--g-baby-ink); --dot: var(--g-baby-dot);
    display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; background: var(--t); }
.cx-pillar--home { --t: var(--g-home-t); --ink: var(--g-home-ink); --dot: var(--g-home-dot); }
.cx-pillar--life { --t: var(--g-life-t); --ink: var(--g-life-ink); --dot: var(--g-life-dot); }
.cx-pillar__top { display: flex; gap: 14px; align-items: center; }
.cx-pillar__art { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: #fff; padding: 8px; box-shadow: 0 4px 14px rgba(18, 48, 77, .07); }
.cx-pillar__art svg { width: 100%; height: 100%; }
.cx-pillar h2 { font-size: 21px; margin: 0 0 2px; }
.cx-pillar h2 a { color: var(--cx-ink); }
.cx-pillar h2 a:hover { color: var(--ink); }
.cx-pillar p { margin: 0; font-size: 14px; color: var(--cx-text); }
.cx-pillar__cats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.cx-pillar__cats a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--cx-pill); background: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 700; color: var(--cx-ink); }
.cx-pillar__cats a:hover { background: #fff; color: var(--ink); }
.cx-pillar__all { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--ink); }
.cx-pillar__all:hover { color: var(--cx-ink); }
.cx-pillar__all svg { width: 16px; height: 16px; }
@media (max-width: 991.98px) {
    .cx-hero--family .cx-hero__main { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
    .cx-pillars { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 767.98px) {
    .cx-hero--family .cx-hero__main { grid-template-columns: minmax(0, 1fr); }
    .cx-hero--family .cx-hero__scene { min-height: 250px; }
    .cx-hero__groups { gap: 6px; margin-bottom: 14px; }
    .cx-hero__groups .cx-gchip { height: 30px; font-size: 12.5px; padding: 0 11px 0 8px; }
    .cx-pillar { padding: 18px; border-radius: 20px; }
    .cx-pillar__art { width: 60px; height: 60px; border-radius: 18px; }
}

/* main menu: the three groups first, each with its colour dot */
.cx-nav__links a.cx-navg { display: inline-flex; align-items: center; gap: 7px; }
.cx-nav__links a.cx-navg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.cx-navg--baby { --dot: var(--g-baby-dot); } .cx-navg--home { --dot: var(--g-home-dot); } .cx-navg--life { --dot: var(--g-life-dot); }
.cx-nav__links li:nth-child(3) { margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--cx-line); }
@media (max-width: 1199.98px) { .cx-nav__links a[href*="#stores"] { display: none; } }

/* category menu grouped */
.cx-mega { width: min(980px, calc(100vw - 32px)); }
.cx-mega__groups { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; max-height: min(70vh, 560px); overflow: auto; }
.cx-mega__group .cx-mega__grid { grid-template-columns: 1fr; }
.cx-mega__group--baby .cx-mega__grid { grid-template-columns: 1fr 1fr; }
.cx-mega__gtitle { display: flex; align-items: center; gap: 8px; font: 800 15px var(--cx-font-head); color: var(--cx-ink); padding: 4px 8px 8px; border-bottom: 2px solid var(--dot); margin-bottom: 6px; }
.cx-mega__gtitle::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.cx-mega__group--baby { --dot: var(--g-baby-dot); } .cx-mega__group--home { --dot: var(--g-home-dot); } .cx-mega__group--life { --dot: var(--g-life-dot); }

/* phone menu group titles */
.cx-drawer__title--baby, .cx-drawer__title--home, .cx-drawer__title--life { display: flex; align-items: center; gap: 8px; }
.cx-drawer__title--baby::before, .cx-drawer__title--home::before, .cx-drawer__title--life::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.cx-drawer__title--baby::before { background: var(--g-baby-dot); } .cx-drawer__title--home::before { background: var(--g-home-dot); } .cx-drawer__title--life::before { background: var(--g-life-dot); }

/* "Shop by category" group filter */
.cx-gfilter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 16px; padding: 2px; }
.cx-gfilter::-webkit-scrollbar { display: none; }
.cx-gfilter button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--cx-pill); border: 1.5px solid var(--cx-line); background: #fff; font: 700 14px var(--cx-font); color: var(--cx-text); cursor: pointer; }
.cx-gfilter button[class*="cx-gfilter--"]::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.cx-gfilter--baby { --dot: var(--g-baby-dot); } .cx-gfilter--home { --dot: var(--g-home-dot); } .cx-gfilter--life { --dot: var(--g-life-dot); }
.cx-gfilter button.is-active { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-bubble[hidden] { display: none !important; }

/* shop page grouped */
.cx-gjump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; }
.cx-gjump .cx-gchip { background: #F4F7FA; }
.cx-groupsec { scroll-margin-top: 140px; margin-bottom: 30px; padding-top: 6px; }
.cx-groupsec + .cx-groupsec { border-top: 1px solid var(--cx-line); padding-top: 34px; }
.cx-groupsec__head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.cx-groupsec__head h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0; }
.cx-groupsec__head p { margin: 2px 0 0; color: var(--cx-muted); }
.cx-groupsec--baby .cx-pillar__art { background: var(--g-baby-t); } .cx-groupsec--home .cx-pillar__art { background: var(--g-home-t); } .cx-groupsec--life .cx-pillar__art { background: var(--g-life-t); }
.cx-groupsec .cx-catsection { margin-top: 28px; margin-bottom: 0; }
.cx-catsection__head h3 { font-size: 19px; margin: 0; }
.cx-bigcat h3 { font-size: 21px; margin: 0 0 2px; }
@media (max-width: 575.98px) { .cx-bigcat h3 { font-size: 16px; } .cx-groupsec__head .cx-pillar__art { width: 56px; height: 56px; } }
@media (max-width: 575.98px) {
    .cx-hero--family .cx-hero__main { padding: 22px 18px 0; }
    .cx-hero--family h1 { font-size: 28px; margin-bottom: 12px; }
    .cx-hero__si { font-size: 14.5px !important; line-height: 1.65 !important; }
    .cx-hero--family .cx-hero__copy p:not(.cx-hero__si) { display: none; }
    .cx-hero--family .cx-hero__ctas { flex-wrap: nowrap; margin-top: 16px; }
    .cx-hero--family .cx-hero__ctas .cx-btn { flex: 1 1 0; padding: 0 12px; min-height: 48px; font-size: 15px; }
    .cx-hero--family .cx-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
    .cx-hero--family .cx-hero__facts div { font-size: 12px; }
    .cx-hero--family .cx-hero__scene { min-height: 190px; margin-top: 0; }
}
.cx-nav__links a, .cx-cats-btn, .cx-action__text, .cx-action__text strong { white-space: nowrap; }
@media (max-width: 1199.98px) {
    .cx-nav__links { gap: 16px; }
    .cx-nav__help { display: none !important; }
    .cx-nav__links li:nth-child(3) { margin-right: 4px; padding-right: 12px; }
}
@media (min-width: 992px) and (max-width: 1099.98px) { .cx-nav__links a[href*="sort=popular"] { display: none; } }
.cx-action__icon { flex: none; }
@media (min-width: 992px) and (max-width: 1099.98px) { .cx-action--account .cx-action__text { display: none; } }

/* ======================================================================================
   v6 home: store directory (four doors) + "What are you shopping for today?"
   ====================================================================================== */
.cx-dir { padding: 26px 0 10px; }
.cx-dir__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 22px; }
.cx-dir__intro h1 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.02em; max-width: 19ch; margin: 0 0 12px; }
.cx-dir__intro .cx-hero__si { margin: 0 !important; max-width: 52ch !important; }
.cx-dir__quick { flex: 0 1 440px; }
.cx-dir__quick > span { display: block; font-size: 13px; font-weight: 700; color: var(--cx-muted); margin-bottom: 8px; }
.cx-dir__quick ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.cx-qchip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border-radius: var(--cx-pill); background: #fff; border: 1.5px solid var(--cx-line); font-size: 13.5px; font-weight: 700; color: var(--cx-ink); }
.cx-qchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--g-baby-dot)); }
.cx-qchip:hover { border-color: var(--dot); color: var(--cx-ink); }
.cx-qchip--baby { --dot: var(--g-baby-dot); } .cx-qchip--home { --dot: var(--g-home-dot); } .cx-qchip--life { --dot: var(--g-life-dot); }

.cx-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cx-door { --t: var(--g-baby-t); --ink: var(--g-baby-ink); --dot: var(--g-baby-dot);
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; border-radius: 26px; background: var(--t); min-height: 340px;
    transition: transform .2s ease, box-shadow .2s ease; }
.cx-door--home { --t: var(--g-home-t); --ink: var(--g-home-ink); --dot: var(--g-home-dot); }
.cx-door--life { --t: var(--g-life-t); --ink: var(--g-life-ink); --dot: var(--g-life-dot); }
.cx-door--top { --t: #12304D; --ink: #FFD34E; --dot: #FFD34E; color: #DCE8F3; }
.cx-door:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 48, 77, .12); }
.cx-door:has(.cx-door__link:focus-visible) { outline: 3px solid var(--cx-brand); outline-offset: 3px; }
.cx-door__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cx-door h2 { font-size: clamp(19px, 1.7vw, 23px); margin: 0; display: flex; align-items: center; gap: 8px; }
.cx-door h2::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--dot); flex: none; }
.cx-door__link { color: var(--cx-ink); }
.cx-door--top .cx-door__link { color: #fff; }
.cx-door__link:focus-visible { outline: none; }
.cx-door__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.cx-door__count { font-size: 12.5px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .75); padding: 3px 10px; border-radius: var(--cx-pill); }
.cx-door__text { margin: 0; font-size: 14px; color: var(--cx-text); min-height: 2.8em; }
.cx-door--top .cx-door__text { color: #BFD3E6; }
.cx-door__pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
.cx-door__pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 4px 12px rgba(18, 48, 77, .08);
    transition: transform .25s ease; }
.cx-door__pic img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.cx-door__pic:nth-child(1) { transform: rotate(-3deg); }
.cx-door__pic:nth-child(3) { transform: rotate(3deg); }
.cx-door:hover .cx-door__pic:nth-child(1) { transform: rotate(-5deg) translateY(-4px); }
.cx-door:hover .cx-door__pic:nth-child(2) { transform: translateY(-6px); }
.cx-door:hover .cx-door__pic:nth-child(3) { transform: rotate(5deg) translateY(-4px); }
.cx-door__pic--art { grid-column: 1 / -1; aspect-ratio: auto; height: 110px; background: rgba(255, 255, 255, .6); box-shadow: none; transform: none !important; }
.cx-door__pic--art svg { height: 90px; width: auto; }
.cx-door__cats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.cx-door__cats a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: var(--cx-pill); background: rgba(255, 255, 255, .8); font-size: 12.5px; font-weight: 700; color: var(--cx-ink); }
.cx-door__cats a:hover { background: #fff; color: var(--ink); }
.cx-door__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14.5px; color: var(--ink); }
.cx-door__cta svg { width: 16px; height: 16px; transition: transform .2s; }
.cx-door:hover .cx-door__cta svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cx-door, .cx-door__pic, .cx-door__cta svg { transition: none; } .cx-door:hover { transform: none; } }
@media (max-width: 1199.98px) { .cx-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-door { min-height: 0; } }
@media (max-width: 991.98px) { .cx-dir__intro { flex-direction: column; align-items: stretch; gap: 16px; } .cx-dir__quick { flex: none; } }
@media (max-width: 575.98px) {
    .cx-dir { padding-top: 16px; }
    .cx-dir__intro h1 { font-size: 26px; }
    .cx-dir__quick ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
    .cx-dir__quick ul::-webkit-scrollbar { display: none; }
    .cx-dir__quick li { flex: none; }
    .cx-doors { gap: 10px; }
    .cx-door { padding: 14px 12px 12px; border-radius: 20px; gap: 8px; }
    .cx-door h2 { font-size: 16px; gap: 6px; }
    .cx-door h2::before { width: 8px; height: 8px; }
    .cx-door__head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cx-door__count { font-size: 11.5px; padding: 2px 8px; }
    .cx-door__text, .cx-door__cats { display: none; }
    .cx-door__pics { gap: 5px; margin: 2px 0; }
    .cx-door__pic { border-radius: 12px; }
    .cx-door__cta { font-size: 13px; }
}

/* tabs: what are you shopping for */
.cx-needtabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-bottom: 14px; }
.cx-needtabs::-webkit-scrollbar { display: none; }
.cx-needtab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--cx-pill); border: 1.5px solid var(--cx-line); background: #fff;
    font: 800 15px var(--cx-font); color: var(--cx-text); cursor: pointer; }
.cx-needtab::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.cx-needtab--top { --dot: #FFD34E; } .cx-needtab--baby { --dot: var(--g-baby-dot); } .cx-needtab--home { --dot: var(--g-home-dot); } .cx-needtab--life { --dot: var(--g-life-dot); }
.cx-needtab:hover { border-color: var(--dot); color: var(--cx-ink); }
.cx-needtab.is-active { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-needtab:focus-visible { outline: 3px solid var(--cx-brand); outline-offset: 2px; }
.cx-needpanel__bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.cx-needpanel__cats { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.cx-needpanel__cats a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--cx-pill); background: #F2F6FA; font-size: 13px; font-weight: 700; color: var(--cx-ink); }
.cx-needpanel__cats a:hover { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
@media (max-width: 575.98px) { .cx-needpanel__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .cx-needpanel__cats li { flex: none; } }
.cx-door__head { flex-direction: column; align-items: flex-start; gap: 6px; }
.cx-narrow { display: none; }
@media (max-width: 575.98px) { .cx-wide { display: none; } .cx-narrow { display: inline; } }

/* ======================================================================================
   v7 home: chu.lk as a house, room by room
   ====================================================================================== */
.cx-home { position: relative; padding: 30px 0 34px; overflow: hidden;
    background: linear-gradient(180deg, #F3F9FE 0%, #FFFFFF 78%); }
.cx-home::before { /* soft sun behind the house */
    content: ""; position: absolute; width: 560px; height: 560px; right: -120px; top: -180px; border-radius: 50%;
    background: radial-gradient(circle, #FFF1C9 0%, rgba(255, 241, 201, 0) 68%); pointer-events: none; }
.cx-home__grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 44px; align-items: end; }
.cx-home__copy { padding-bottom: 34px; }
.cx-home__kicker { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: var(--cx-pill); background: #fff; box-shadow: 0 2px 10px rgba(18, 48, 77, .07);
    font-size: 13px; font-weight: 700; color: var(--cx-text); }
.cx-home h1 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 18px; }
.cx-home .cx-hero__si { margin: 0 0 22px !important; }
.cx-home .cx-hero__ctas { margin-bottom: 24px; }

.cx-house { position: relative; }
.cx-house__roof { display: block; width: calc(100% + 36px); height: clamp(84px, 9vw, 140px); margin: 0 -18px -1px; overflow: visible; }
.cx-house__sign { position: absolute; left: 50%; top: clamp(30px, 3.4vw, 54px); transform: translateX(-50%); display: grid; justify-items: center; gap: 0;
    padding: 6px 18px 7px; border-radius: 12px; background: #FFD34E; box-shadow: 0 6px 0 #E0B32E; color: #12304D; text-align: center; }
.cx-house__sign b { font: 800 clamp(16px, 1.6vw, 22px)/1.05 var(--cx-font-head); letter-spacing: -.01em; }
.cx-house__sign span { font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.cx-smoke { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
    .cx-smoke { animation: cx-smoke 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .cx-smoke--2 { animation-delay: 1.2s; }
    @keyframes cx-smoke { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px) scale(1.2); } }
}

.cx-house__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; background: #12304D; border-radius: 0 0 6px 6px; }
.cx-room { --wall: #E4F3FC; --ink: var(--g-baby-ink); --dot: var(--g-baby-dot);
    position: relative; display: flex; flex-direction: column; min-height: 238px; padding: 18px 18px 0; border-radius: 4px; overflow: hidden;
    background-color: var(--wall); isolation: isolate; transition: filter .25s ease; }
/* wallpapers */
.cx-room--baby { background-image: radial-gradient(#C8E2F6 2.2px, transparent 2.7px), radial-gradient(#C8E2F6 2.2px, transparent 2.7px);
    background-size: 26px 26px; background-position: 0 0, 13px 13px; }
.cx-room--life { --wall: #DFF5EF; --ink: var(--g-life-ink); --dot: var(--g-life-dot);
    background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(61, 190, 139, .13) 22px 30px); }
.cx-room--home { --wall: #FFF1D6; --ink: var(--g-home-ink); --dot: var(--g-home-dot); }
.cx-room--home::before { /* kitchen tiles */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1;
    background: conic-gradient(#FFE3A3 25%, #FFF4DD 0 50%, #FFE3A3 0 75%, #FFF4DD 0) 0 0 / 30px 30px; opacity: .85; }
.cx-room--top { --wall: #1C4268; --ink: #FFD34E; --dot: #FFD34E; color: #DCE8F3;
    background-image: repeating-linear-gradient(180deg, transparent 0 62px, rgba(255, 255, 255, .07) 62px 66px); }
/* hanging lamp; it lights up when you point at the room */
.cx-room__lamp { position: absolute; top: 0; right: 30%; width: 2px; height: 30px; background: rgba(18, 48, 77, .45); z-index: 0; }
.cx-room__lamp::after { content: ""; position: absolute; left: -13px; top: 28px; width: 28px; height: 15px; border-radius: 15px 15px 4px 4px; background: #12304D;
    box-shadow: 0 10px 0 -5px #FFE7A0; transition: box-shadow .3s ease; }
.cx-room--top .cx-room__lamp { background: rgba(255, 255, 255, .4); }
.cx-room--top .cx-room__lamp::after { background: #FFD34E; }
.cx-room:hover .cx-room__lamp::after { box-shadow: 0 10px 0 -5px #FFE7A0, 0 30px 70px 30px rgba(255, 220, 120, .55); }
.cx-room:hover { filter: saturate(1.08); }
.cx-room__sign { position: relative; z-index: 1; max-width: 62%; }
.cx-room__name { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.cx-room h2 { font-size: clamp(19px, 1.75vw, 25px); line-height: 1.1; margin: 0 0 6px; }
.cx-room__link { color: var(--cx-ink); }
.cx-room--top .cx-room__link { color: #fff; }
.cx-room__link:focus-visible { outline: none; }
.cx-room__link::after { content: ""; position: absolute; inset: -400px; z-index: 5; } /* whole room is the link */
.cx-room:has(.cx-room__link:focus-visible) { outline: 3px solid #FFD34E; outline-offset: -3px; }
.cx-room__count { font-size: 12.5px; font-weight: 700; color: var(--cx-text); }
.cx-room--top .cx-room__count { color: #BFD3E6; }
.cx-room__art { position: absolute; right: 12px; top: 40px; width: 74px; height: 74px; opacity: .95; z-index: 0; transition: transform .3s ease; }
.cx-room__art svg { width: 100%; height: 100%; }
.cx-room:hover .cx-room__art { transform: rotate(-6deg) scale(1.06); }
/* shelf with real best sellers */
.cx-room__shelf { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding: 0 6px; min-height: 104px; }
.cx-room__shelf::after { content: ""; position: absolute; left: -18px; right: -18px; bottom: -10px; height: 12px; background: #C98A57; border-top: 3px solid #E3A672;
    box-shadow: 0 6px 0 rgba(18, 48, 77, .12); }
.cx-room--top .cx-room__shelf::after { background: #0E2740; border-top-color: #2A5683; }
.cx-room__item { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 14px; background: #fff; box-shadow: 0 6px 14px rgba(18, 48, 77, .12);
    overflow: hidden; transition: transform .25s ease; }
.cx-room__item:nth-child(2) { width: 100px; height: 100px; }
.cx-room__item img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.cx-room:hover .cx-room__item { transform: translateY(-6px); }
.cx-room:hover .cx-room__item:nth-child(2) { transform: translateY(-10px); }
.cx-room__go { position: absolute; right: 16px; bottom: 20px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--cx-pill);
    background: #fff; font-weight: 800; font-size: 13.5px; color: var(--ink); box-shadow: 0 4px 12px rgba(18, 48, 77, .1); }
.cx-room--top .cx-room__go { background: #FFD34E; color: #12304D; }
.cx-room__go svg { width: 15px; height: 15px; transition: transform .2s; }
.cx-room:hover .cx-room__go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cx-room *, .cx-room { transition: none !important; } .cx-room:hover .cx-room__item, .cx-room:hover .cx-room__art { transform: none; } }

/* porch: front door to all categories */
.cx-house__porch { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding-top: 0; }
.cx-house__porch::before { content: ""; position: absolute; left: -24px; right: -24px; bottom: 0; height: 12px; border-radius: 12px; background: #CDEFE2; }
.cx-house__door { position: relative; display: block; width: 70px; height: 92px; margin-top: -92px; border-radius: 36px 36px 0 0; background: #F4B740;
    border: 6px solid #12304D; border-bottom: 0; z-index: 2; transition: transform .2s; }
.cx-house__door::before { content: ""; position: absolute; inset: 12px 12px 30px; border-radius: 24px 24px 4px 4px; border: 3px solid rgba(18, 48, 77, .3); }
.cx-house__knob { position: absolute; right: 9px; top: 52px; width: 8px; height: 8px; border-radius: 50%; background: #12304D; }
.cx-house__door:hover { transform: perspective(300px) rotateY(-14deg); transform-origin: left; }
.cx-house__mat { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 18px; font-weight: 800; font-size: 14px; color: var(--cx-ink); }
.cx-house__mat svg { width: 15px; height: 15px; }
.cx-house__porch { flex-direction: column; align-items: center; gap: 0; }

@media (max-width: 1199.98px) {
    .cx-home__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .cx-home__copy { padding-bottom: 0; }
    .cx-house { max-width: 820px; width: 100%; margin: 0 auto; }
}
@media (max-width: 575.98px) {
    .cx-home { padding: 18px 0 20px; }
    .cx-home__kicker { font-size: 12px; margin-bottom: 10px; }
    .cx-home h1 { font-size: 28px; }
    .cx-home .cx-hero__ctas { flex-wrap: nowrap; margin-bottom: 16px; }
    .cx-home .cx-hero__ctas .cx-btn { flex: 1 1 0; padding: 0 12px; min-height: 48px; font-size: 15px; }
    .cx-house__roof { width: calc(100% + 16px); margin: 0 -8px -1px; height: 74px; }
    .cx-house__sign { top: 30px; padding: 4px 12px 5px; }
    .cx-house__sign b { font-size: 15px; } .cx-house__sign span { display: none; }
    .cx-house__body { gap: 5px; padding: 5px; }
    .cx-room { min-height: 196px; padding: 12px 10px 0; }
    .cx-room__sign { max-width: 100%; }
    .cx-room__name { font-size: 11px; }
    .cx-room h2 { font-size: 16px; }
    .cx-room__count { font-size: 11.5px; }
    .cx-room__art { width: 40px; height: 40px; top: 10px; right: 8px; opacity: .55; }
    .cx-room__lamp { display: none; }
    .cx-room__shelf { gap: 5px; min-height: 70px; padding: 0 0 34px; }
    .cx-room__shelf::after { bottom: 26px; left: -10px; right: -10px; height: 8px; }
    .cx-room__item, .cx-room__item:nth-child(2) { width: 33%; height: auto; aspect-ratio: 1; border-radius: 10px; }
    .cx-room__go { left: 10px; right: auto; bottom: 8px; padding: 0; background: none !important; box-shadow: none; font-size: 12.5px; color: var(--ink); }
    .cx-room--top .cx-room__go { color: #FFD34E; }
    .cx-house__door { width: 54px; height: 72px; margin-top: -72px; border-width: 5px; }
    .cx-house__knob { top: 38px; }
}

/* the everyday list (a notebook page) + the deal price tag */
.cx-everyday__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.cx-note { position: relative; padding: 28px 28px 20px 64px; border-radius: 10px 22px 22px 10px; background:
    linear-gradient(90deg, transparent 46px, #F7A8BC 46px 48px, transparent 48px),
    repeating-linear-gradient(180deg, #fff 0 55px, #E6EEF6 55px 56px) 0 92px / 100% calc(100% - 92px) no-repeat, #fff;
    box-shadow: 0 1px 0 #E6EEF6, 0 18px 40px rgba(18, 48, 77, .1); border: 1px solid #E6EEF6; }
.cx-note::before { /* binder holes */ content: ""; position: absolute; left: 16px; top: 34px; bottom: 34px; width: 14px;
    background: radial-gradient(circle, #F3F9FE 5px, #DCE6EF 6px, transparent 7px) 0 0 / 14px 56px repeat-y; }
.cx-note__head { min-height: 64px; }
.cx-note__head h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 2px; }
.cx-note__head p { margin: 0; color: var(--cx-muted); font-size: 14.5px; }
.cx-note__list { list-style: none; padding: 0; margin: 0; }
.cx-note__row { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; height: 56px; }
.cx-note__tick { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #9DB3C7; }
.cx-note__row:has(.cx-note__add:disabled) .cx-note__tick { background: #3DBE8B; border-color: #3DBE8B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.cx-note__img { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #F4F7FA; overflow: hidden; }
.cx-note__img img { width: 100%; height: 100%; object-fit: contain; }
.cx-note__name { font-weight: 700; color: var(--cx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-note__price { font-weight: 800; color: var(--cx-ink); font-size: 14.5px; }
.cx-note__add { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: var(--cx-pill); border: 1.5px solid var(--cx-line); background: #fff;
    font: 800 13px var(--cx-font); color: var(--cx-brand-ink); cursor: pointer; }
.cx-note__add svg { width: 14px; height: 14px; }
.cx-note__add:hover { background: var(--cx-brand); border-color: var(--cx-brand); color: #fff; }
.cx-note__foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 800; font-size: 14px; color: var(--g-life-ink); }
.cx-note__foot svg { width: 18px; height: 18px; }

.cx-tag-deal { position: relative; display: block; padding-top: 30px; color: var(--cx-ink); }
.cx-tag-deal:hover { color: var(--cx-ink); }
.cx-tag-deal__string { position: absolute; left: 50%; top: 0; width: 120px; height: 70px; border: 2px solid #9DB3C7; border-bottom: 0; border-radius: 60px 60px 0 0; transform: translateX(-12%) rotate(-8deg); }
.cx-tag-deal__card { position: relative; display: grid; justify-items: start; gap: 2px; padding: 46px 30px 28px; border-radius: 22px;
    background: #FFD34E; transform: rotate(-3deg); box-shadow: 0 18px 36px rgba(196, 140, 0, .25); transition: transform .3s ease;
    clip-path: polygon(0 34px, 34px 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.cx-tag-deal:hover .cx-tag-deal__card { transform: rotate(0deg) translateY(-4px); }
.cx-tag-deal__hole { position: absolute; left: 50%; top: 14px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .15); }
.cx-tag-deal__up { font-weight: 800; font-size: 15px; }
.cx-tag-deal__pct { font: 800 clamp(64px, 7vw, 104px)/.9 var(--cx-font-head); letter-spacing: -.04em; color: #12304D; }
.cx-tag-deal__off { font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.cx-tag-deal__txt { font-size: 14px; color: #3C3315; max-width: 28ch; margin-bottom: 14px; }
.cx-tag-deal__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--cx-pill); background: #12304D; color: #fff; font-weight: 800; font-size: 14px; }
.cx-tag-deal__cta svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .cx-tag-deal__card { transform: none !important; transition: none; } }
@media (max-width: 991.98px) { .cx-everyday__grid { grid-template-columns: minmax(0, 1fr); } .cx-tag-deal { max-width: 420px; margin: 0 auto; width: 100%; } }
@media (max-width: 575.98px) {
    .cx-note { padding: 22px 14px 16px 44px; background:
        linear-gradient(90deg, transparent 32px, #F7A8BC 32px 34px, transparent 34px),
        repeating-linear-gradient(180deg, #fff 0 59px, #E6EEF6 59px 60px) 0 108px / 100% calc(100% - 108px) no-repeat, #fff; }
    .cx-note::before { left: 9px; width: 12px; }
    .cx-note__head { min-height: 86px; }
    .cx-note__row { grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; height: 60px; }
    .cx-note__tick { display: none; }
    .cx-note__img { grid-row: 1 / 3; width: 38px; height: 38px; }
    .cx-note__name { font-size: 14px; align-self: end; }
    .cx-note__price { grid-column: 2; grid-row: 2; font-size: 13px; align-self: start; color: var(--cx-text); }
    .cx-note__add { grid-column: 3; grid-row: 1 / 3; }
}
/* v7 fixes: CTA under the room name; keep the door clear of the ground-floor shelves */
.cx-room__go { position: static; margin-top: 10px; align-self: flex-start; padding: 6px 12px; font-size: 13px; }
.cx-room__sign { display: flex; flex-direction: column; align-items: flex-start; }
.cx-room:nth-child(3) .cx-room__shelf { padding-right: 46px; }
.cx-room:nth-child(4) .cx-room__shelf { padding-left: 46px; }
@media (max-width: 575.98px) {
    .cx-room__go { position: static; margin-top: 4px; padding: 0; }
    .cx-room__shelf { padding-bottom: 18px; }
    .cx-room__shelf::after { bottom: 10px; }
    .cx-room:nth-child(3) .cx-room__shelf { padding-right: 26px; }
    .cx-room:nth-child(4) .cx-room__shelf { padding-left: 26px; }
    .cx-room__item:nth-child(3) { display: none; }
    .cx-room__item, .cx-room__item:nth-child(2) { width: 46%; }
}
/* the room link covers the whole room, shelf included */
.cx-room__sign { position: static; z-index: auto; }
.cx-room__link::after { inset: 0; z-index: 6; }

/* ---------- Category scroller (Shop by category) ---------- */
.cx-scroller { position: relative; }
.cx-scroller .cx-bubbles { scrollbar-width: none; padding-bottom: 6px; scroll-behavior: smooth; }
.cx-scroller .cx-bubbles::-webkit-scrollbar { display: none; }
.cx-scroller::before, .cx-scroller::after { content: ""; position: absolute; top: 0; bottom: 22px; width: 64px; z-index: 2; pointer-events: none; transition: opacity .25s; }
.cx-scroller::before { left: 0; background: linear-gradient(90deg, #fff 15%, rgba(255, 255, 255, 0)); }
.cx-scroller::after { right: 0; background: linear-gradient(270deg, #fff 15%, rgba(255, 255, 255, 0)); }
.cx-scroller.is-start::before, .cx-scroller.is-end::after, .cx-scroller.no-scroll::before, .cx-scroller.no-scroll::after { opacity: 0; }
.cx-scroller__btn { position: absolute; top: 40px; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 0; background: #fff; color: var(--cx-ink); cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 48, 77, .16), 0 0 0 1px rgba(18, 48, 77, .06); transition: opacity .2s, transform .2s, background .2s, color .2s; }
.cx-scroller__btn svg { width: 20px; height: 20px; }
.cx-scroller__btn--prev { left: -8px; }
.cx-scroller__btn--next { right: -8px; }
.cx-scroller__btn:hover { background: var(--cx-brand); color: #fff; transform: scale(1.06); }
.cx-scroller__btn:focus-visible { outline: 3px solid var(--cx-brand); outline-offset: 2px; }
.cx-scroller.is-start .cx-scroller__btn--prev, .cx-scroller.is-end .cx-scroller__btn--next, .cx-scroller.no-scroll .cx-scroller__btn { opacity: 0; pointer-events: none; }
.cx-scroller__track { position: relative; height: 4px; margin: 8px auto 0; max-width: 220px; border-radius: 4px; background: #E8EEF4; overflow: hidden; }
.cx-scroller__thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 4px; background: linear-gradient(90deg, var(--cx-sky), var(--cx-brand)); transition: transform .15s linear; }
.cx-scroller.no-scroll .cx-scroller__track { display: none; }
@media (max-width: 767.98px) {
    .cx-scroller__btn { display: none; }
    .cx-scroller::before, .cx-scroller::after { width: 36px; }
    .cx-scroller__track { max-width: 120px; }
}
@media (prefers-reduced-motion: reduce) { .cx-scroller .cx-bubbles { scroll-behavior: auto; } .cx-scroller__btn { transition: none; } }

/* "See all categories" button under the category scroller */
.cx-cats-more { display: flex; justify-content: center; margin-top: 18px; }
.cx-cats-more__btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--cx-pill);
    background: var(--cx-brand-softer); border: 1.5px solid var(--cx-brand-soft); color: var(--cx-brand-ink); font: 800 15px var(--cx-font);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.cx-cats-more__btn svg { width: 18px; height: 18px; }
.cx-cats-more__btn svg:last-child { transition: transform .2s; }
.cx-cats-more__btn:hover { background: var(--cx-brand); border-color: var(--cx-brand); color: #fff; box-shadow: 0 8px 20px rgba(29, 117, 188, .25); }
.cx-cats-more__btn:hover svg:last-child { transform: translateX(4px); }
.cx-cats-more__btn:focus-visible { outline: 3px solid var(--cx-brand); outline-offset: 3px; }
@media (max-width: 575.98px) { .cx-cats-more__btn { width: 100%; justify-content: center; } }
/* ---------- Shop page: choose groups (Baby Care / Home & Kitchen / Lifestyle, any 1–3) ---------- */
.cx-groupbar { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cx-groupbar__all { display: grid; place-items: center; padding: 0 20px; border-radius: 18px; border: 1.5px solid var(--cx-line); background: #fff;
    font-weight: 800; font-size: 14.5px; color: var(--cx-text); }
.cx-groupbar__all.is-on { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-groupbar__opt { --t: var(--g-baby-t); --dot: var(--g-baby-dot); --ink: var(--g-baby-ink);
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px 40px 8px 10px; border-radius: 18px;
    border: 2px solid transparent; background: var(--t); color: var(--cx-ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cx-groupbar__opt--home { --t: var(--g-home-t); --dot: var(--g-home-dot); --ink: var(--g-home-ink); }
.cx-groupbar__opt--life { --t: var(--g-life-t); --dot: var(--g-life-dot); --ink: var(--g-life-ink); }
.cx-groupbar__opt:hover { color: var(--cx-ink); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(18, 48, 77, .08); }
.cx-groupbar__art { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #fff; padding: 6px; }
.cx-groupbar__art svg { width: 100%; height: 100%; }
.cx-groupbar__txt { display: grid; line-height: 1.2; min-width: 0; }
.cx-groupbar__txt strong { font: 800 15.5px var(--cx-font-head); }
.cx-groupbar__txt small { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cx-groupbar__tick { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
    border: 2px solid rgba(18, 48, 77, .25); background: #fff; color: #fff; }
.cx-groupbar__tick svg { width: 13px; height: 13px; opacity: 0; }
.cx-groupbar__opt.is-on { border-color: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 25%, transparent); }
.cx-groupbar__opt.is-on .cx-groupbar__tick { background: var(--ink); border-color: var(--ink); }
.cx-groupbar__opt.is-on .cx-groupbar__tick svg { opacity: 1; }
@media (max-width: 991.98px) { .cx-groupbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-groupbar__all { grid-column: 1 / -1; min-height: 40px; } }
@media (max-width: 575.98px) {
    .cx-groupbar { gap: 8px; }
    .cx-groupbar__opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; min-height: 0; }
    .cx-groupbar__art { width: 38px; height: 38px; border-radius: 11px; }
    .cx-groupbar__txt strong { font-size: 13.5px; } .cx-groupbar__txt small { font-size: 11px; }
    .cx-groupbar__tick { top: 10px; right: 10px; transform: none; width: 20px; height: 20px; }
}

/* ---------- Shop page: brand chips ---------- */
.cx-brandbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; min-width: 0; }
.cx-brandbar__label { flex: none; font-size: 13px; font-weight: 800; color: var(--cx-muted); }
.cx-brandbar__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; }
.cx-brandbar__list::-webkit-scrollbar { display: none; }
.cx-brandchip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--cx-pill);
    border: 1.5px solid var(--cx-line); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--cx-ink); white-space: nowrap; }
.cx-brandchip img, .cx-brandchip__mono { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: #F2F6FA; }
.cx-brandchip__mono { display: grid; place-items: center; font: 800 13px var(--cx-font-head); color: var(--cx-brand-ink); background: var(--cx-brand-soft); }
.cx-brandchip small { font-size: 11.5px; font-weight: 700; color: var(--cx-muted); }
.cx-brandchip svg { width: 14px; height: 14px; }
.cx-brandchip:hover { border-color: var(--cx-brand); color: var(--cx-ink); }
.cx-brandchip.is-on { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-brandchip.is-on small { color: #BFD3E6; }
@media (max-width: 575.98px) { .cx-brandbar { flex-direction: column; align-items: stretch; gap: 6px; } .cx-brandbar__list { margin: 0 -16px; padding: 2px 16px; } }
/* everyday list: why each product is on the list */
.cx-note__name small { display: block; font-size: 12px; font-weight: 600; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-note__name small.is-mine { color: var(--g-life-ink); font-weight: 800; }
.cx-note__row { height: 60px; }
@media (max-width: 575.98px) { .cx-note__name small { display: none; } }
@media (min-width: 576px) {
    .cx-note { background:
        linear-gradient(90deg, transparent 46px, #F7A8BC 46px 48px, transparent 48px),
        repeating-linear-gradient(180deg, #fff 0 59px, #E6EEF6 59px 60px) 0 92px / 100% calc(100% - 92px) no-repeat, #fff; }
}

/* ---------- Brands on our shelves (home) ---------- */
.cx-mono { display: grid; place-items: center; width: 100%; height: 100%; font: 800 clamp(26px, 3vw, 34px)/1 var(--cx-font-head); letter-spacing: -.02em; color: var(--mono, var(--cx-brand-ink)); }
.cx-brandwall { grid-auto-columns: 196px; gap: 16px; padding: 18px 4px 10px; }
.cx-brands2 .cx-scroller__btn { top: 104px; }
.cx-blabel { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 14px 16px;
    border-radius: 22px; background: #fff; border: 1.5px solid var(--cx-line); text-align: center; color: var(--cx-ink);
    box-shadow: 0 2px 0 rgba(18, 48, 77, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.cx-blabel:nth-child(odd) { transform: rotate(-1.4deg); }
.cx-blabel:nth-child(even) { transform: rotate(1.2deg); }
.cx-blabel:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 16px 30px rgba(18, 48, 77, .12); border-color: var(--tone-ink); color: var(--cx-ink); }
.cx-blabel__pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--tone-ink);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 6px rgba(18, 48, 77, .2); }
.cx-blabel__mark { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--tone); margin-bottom: 8px; overflow: hidden; }
.cx-blabel__mark img { width: 78%; height: 78%; object-fit: contain; }
.cx-blabel__name { font: 800 16px/1.2 var(--cx-font-head); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.cx-blabel__count { font-size: 12.5px; font-weight: 700; color: var(--tone-ink); }
.cx-blabel__pics { display: flex; justify-content: center; margin-top: 10px; }
.cx-blabel__pics img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(18, 48, 77, .15); }
.cx-blabel__pics img + img { margin-left: -10px; }
@media (prefers-reduced-motion: reduce) { .cx-blabel, .cx-blabel:nth-child(n) { transform: none; transition: none; } }
@media (max-width: 575.98px) {
    .cx-brandwall { grid-auto-columns: 150px; gap: 12px; }
    .cx-blabel { padding: 22px 10px 14px; }
    .cx-blabel__mark { width: 84px; height: 84px; }
    .cx-blabel__name { font-size: 14px; }
}

/* ---------- Brand page ---------- */
.cx-bhero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin: 14px 0 18px; padding: 24px 26px;
    border-radius: 26px; background: var(--tone); position: relative; overflow: hidden; }
.cx-bhero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none; }
.cx-bhero__mark { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 28px; background: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(18, 48, 77, .1); }
.cx-bhero__mark img { width: 80%; height: 80%; object-fit: contain; }
.cx-bhero__kicker { font-size: 12.5px; font-weight: 800; color: var(--tone-ink); }
.cx-bhero h1 { font-size: clamp(28px, 3.2vw, 44px); margin: 0 0 6px; }
.cx-bhero p { margin: 0; color: var(--cx-text); max-width: 52ch; }
.cx-bhero__nav { position: relative; z-index: 1; display: grid; gap: 8px; }
.cx-bhero__step { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .85); color: var(--cx-ink); font-weight: 800; font-size: 14px; }
.cx-bhero__step small { display: block; font-size: 11.5px; font-weight: 700; color: var(--cx-muted); }
.cx-bhero__step svg { width: 18px; height: 18px; flex: none; }
.cx-bhero__step--next { justify-content: flex-end; text-align: right; }
.cx-bhero__step:hover { background: #fff; color: var(--tone-ink); }
.cx-bswitch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 26px; }
.cx-bswitch__label { font-size: 13px; font-weight: 800; color: var(--cx-muted); }
.cx-bswitch .cx-scroller__btn { top: 50%; transform: translateY(-50%); width: 38px; height: 38px; }
.cx-bswitch .cx-scroller__btn:hover { transform: translateY(-50%) scale(1.06); }
.cx-bswitch .cx-scroller::before, .cx-bswitch .cx-scroller::after { bottom: 0; }
.cx-bswitch__list { grid-auto-columns: max-content; gap: 8px; padding: 4px 2px; }
.cx-bswitch__item { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 6px; border-radius: var(--cx-pill); border: 1.5px solid var(--cx-line);
    background: #fff; color: var(--cx-ink); font-weight: 700; font-size: 14px; white-space: nowrap; scroll-snap-align: start; }
.cx-bswitch__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tone); overflow: hidden; }
.cx-bswitch__mark img { width: 80%; height: 80%; object-fit: contain; }
.cx-bswitch__mark .cx-mono { font-size: 13px; }
.cx-bswitch__item small { font-size: 11.5px; color: var(--cx-muted); font-weight: 700; }
.cx-bswitch__item:hover { border-color: var(--cx-brand); color: var(--cx-ink); }
.cx-bswitch__item.is-on { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff; }
.cx-bswitch__item.is-on small { color: #BFD3E6; }
@media (max-width: 767.98px) {
    .cx-bhero { grid-template-columns: auto minmax(0, 1fr); padding: 18px; gap: 14px; }
    .cx-bhero__mark { width: 78px; height: 78px; border-radius: 20px; }
    .cx-bhero__nav { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
    .cx-bhero__step { font-size: 13px; padding: 8px 10px; }
    .cx-bswitch { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- Slim, soft scrollbars for scrolling panels (filters sidebar, category menu, order lines) ---------- */
.cx-sidebar { scrollbar-gutter: stable; padding-right: 10px; }
/* Chrome, Edge, Safari */
@supports selector(::-webkit-scrollbar) {
    .cx-sidebar, .cx-mega__groups, .cx-order-lines { scrollbar-width: auto; scrollbar-color: auto; }
    .cx-sidebar::-webkit-scrollbar, .cx-mega__groups::-webkit-scrollbar, .cx-order-lines::-webkit-scrollbar { width: 10px; }
    .cx-sidebar::-webkit-scrollbar-track, .cx-mega__groups::-webkit-scrollbar-track, .cx-order-lines::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
    .cx-sidebar::-webkit-scrollbar-thumb, .cx-mega__groups::-webkit-scrollbar-thumb, .cx-order-lines::-webkit-scrollbar-thumb {
        border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; background-color: color-mix(in srgb, var(--cx-brand) 28%, #fff); }
    .cx-sidebar:hover::-webkit-scrollbar-thumb, .cx-mega__groups:hover::-webkit-scrollbar-thumb, .cx-order-lines:hover::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, var(--cx-brand) 45%, #fff); }
    .cx-sidebar::-webkit-scrollbar-thumb:hover, .cx-mega__groups::-webkit-scrollbar-thumb:hover, .cx-order-lines::-webkit-scrollbar-thumb:hover {
        background-color: var(--cx-brand); border-width: 2px; }
    .cx-sidebar::-webkit-scrollbar-thumb:active, .cx-mega__groups::-webkit-scrollbar-thumb:active, .cx-order-lines::-webkit-scrollbar-thumb:active { background-color: var(--cx-brand-ink); }
}
/* Firefox */
@supports not selector(::-webkit-scrollbar) {
    .cx-sidebar, .cx-mega__groups, .cx-order-lines { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cx-brand) 35%, #fff) transparent; }
    .cx-sidebar:hover, .cx-mega__groups:hover, .cx-order-lines:hover { scrollbar-color: color-mix(in srgb, var(--cx-brand) 55%, #fff) transparent; }
}


/* ---------- Phone bottom bar: centre "Shop" button + pop-up menu ---------- */
.cx-tabshop, .cx-shopmenu { display: none; }
@media (max-width: 991.98px) {
    .cx-tabshop { display: flex; justify-content: center; position: relative; z-index: 2; }
    .cx-tabbar .cx-tabshop__btn { position: relative; justify-content: flex-end; padding-bottom: 9px; color: var(--cx-ink); font-weight: 800; width: 100%; cursor: pointer; }
    .cx-tabshop__fab { position: absolute; top: -24px; left: 50%; margin-left: -28px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
        background: linear-gradient(140deg, var(--cx-sky), var(--cx-brand)); color: #fff;
        box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(29, 117, 188, .45); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), background .3s; }
    .cx-tabbar .cx-tabshop__fab .cx-ico { width: 26px; height: 26px; }
    .cx-tabshop__btn.is-open .cx-tabshop__fab { transform: rotate(135deg); background: linear-gradient(140deg, #2A5683, var(--cx-ink)); }
    .cx-tabshop__btn:focus-visible .cx-tabshop__fab { box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--cx-brand); }

    .cx-shopmenu { display: block; position: fixed; inset: 0; z-index: 1035; }
    .cx-shopmenu[hidden] { display: none; }
    .cx-shopmenu__scrim { position: absolute; inset: 0; background: rgba(18, 48, 77, .38); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s; }
    .cx-shopmenu__panel { position: absolute; left: 12px; right: 12px; bottom: calc(62px + env(safe-area-inset-bottom) + 18px); padding: 16px 14px 14px; border-radius: 26px; background: #fff;
        box-shadow: 0 20px 50px rgba(18, 48, 77, .28); transform-origin: 50% 100%; transform: translateY(40px) scale(.4); opacity: 0;
        transition: transform .38s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; }
    .cx-shopmenu__panel::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 18px; height: 18px; margin-left: -9px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
    .cx-shopmenu__title { margin: 0 4px 12px; font: 800 15px var(--cx-font-head); color: var(--cx-ink); }
    .cx-shopmenu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .cx-shopmenu__item { --t: var(--g-baby-t); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 11px; border-radius: 18px; background: var(--t);
        font: 800 12.5px/1.2 var(--cx-font); color: var(--cx-ink); text-align: center;
        opacity: 0; transform: translateY(18px) scale(.85); transition: transform .42s cubic-bezier(.2, .9, .3, 1.45), opacity .25s;
        transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
    .cx-shopmenu__item--home { --t: var(--g-home-t); } .cx-shopmenu__item--life { --t: var(--g-life-t); }
    .cx-shopmenu__item--new, .cx-shopmenu__item--best { --t: #F2F6FA; }
    .cx-shopmenu__item--deal { --t: #FDE8E9; color: #A3242A; }
    .cx-shopmenu__item:active { transform: scale(.95); }
    .cx-shopmenu__art { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #fff; padding: 6px; }
    .cx-shopmenu__art svg { width: 100%; height: 100%; }
    .cx-shopmenu__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #fff; color: var(--cx-brand); }
    .cx-shopmenu__item--best .cx-shopmenu__ico { color: #C27803; }
    .cx-shopmenu__item--deal .cx-shopmenu__ico { color: var(--cx-sale); }
    .cx-shopmenu__ico .cx-ico { width: 24px; height: 24px; }

    .cx-shopmenu.is-open .cx-shopmenu__scrim { opacity: 1; }
    .cx-shopmenu.is-open .cx-shopmenu__panel { transform: none; opacity: 1; }
    .cx-shopmenu.is-open .cx-shopmenu__item { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cx-tabshop__fab, .cx-shopmenu__panel, .cx-shopmenu__item, .cx-shopmenu__scrim { transition: opacity .15s !important; transform: none !important; }
}
/* ======================================================================================
   v9: quick shopping (megadeals-style) — category menu, offer banner, quick links,
   dense deal grid, product cards with Add + Buy now. Logo blue + bright orange for deals.
   Contrast: orange #FF6A13 carries dark text (#2A1300, 6.2:1); orange text on white uses #C2410C (5.2:1).
   ====================================================================================== */
:root {
    --cx-deal: #FF6A13;
    --cx-deal-hover: #FF8A3D;
    --cx-deal-on: #2A1300;
    --cx-deal-ink: #C2410C;
    --cx-deal-soft: #FFF1E7;
}
.cx-btn--deal { background: var(--cx-deal); color: var(--cx-deal-on); }
.cx-btn--deal:hover { background: var(--cx-deal-hover); color: var(--cx-deal-on); }
.cx-nav__links a.is-deal { color: var(--cx-deal-ink); }

/* ---- home top grid ---- */
.cx-hq { padding: 18px 0 8px; }
.cx-hq__grid { display: grid; grid-template-columns: 252px minmax(0, 1fr) 232px; gap: 16px; align-items: stretch; }

.cx-hq__menu { position: relative; z-index: 6; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; }
.cx-hq__menu-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 16px; height: 46px; border-radius: 15px 15px 0 0; background: var(--cx-brand); color: #fff; font: 800 15px var(--cx-font-head); }
.cx-hq__menu-head .cx-ico { width: 18px; height: 18px; }
.cx-hq__cats { list-style: none; margin: 0; padding: 6px 0; flex: 1; }
.cx-hq__cat > a { position: relative; display: flex; align-items: center; gap: 10px; height: 37px; padding: 0 12px 0 14px; color: var(--cx-ink); font-size: 14px; font-weight: 600; }
.cx-hq__cat > a::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.cx-hq__cat--baby > a::before { --gc: var(--g-baby-dot, #28A9E2); }
.cx-hq__cat--home > a::before { --gc: var(--g-home-dot, #F4B740); }
.cx-hq__cat--life > a::before { --gc: var(--g-life-dot, #3DBE8B); }
.cx-hq__cat > a:hover, .cx-hq__cat:focus-within > a, .cx-hq__cat.has-kids:hover > a { background: var(--cx-brand-softer); color: var(--cx-brand-ink); }
.cx-hq__cat > a:hover::before, .cx-hq__cat:focus-within > a::before { background: var(--gc); }
.cx-hq__ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.cx-hq__ico .cx-art { width: 20px; height: 20px; }
.cx-hq__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-hq__n { font-size: 12px; font-weight: 600; color: var(--cx-muted); }
.cx-hq__chev { width: 14px; height: 14px; color: var(--cx-muted); }
.cx-hq__fly { display: none; position: absolute; top: -1px; left: calc(100% - 4px); width: min(560px, 52vw); min-height: calc(100% + 2px); padding: 20px 24px; background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; box-shadow: var(--cx-shadow); }
.cx-hq__cat:hover > .cx-hq__fly, .cx-hq__cat:focus-within > .cx-hq__fly { display: block; }
.cx-hq__fly-all { display: inline-flex; align-items: center; gap: 6px; font: 800 16px var(--cx-font-head); color: var(--cx-brand-ink); margin-bottom: 12px; }
.cx-hq__fly ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.cx-hq__fly li a { display: block; padding: 7px 0; color: var(--cx-text); font-size: 14px; break-inside: avoid; }
.cx-hq__fly li a:hover { color: var(--cx-brand); }
.cx-hq__all { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 42px; padding: 0 16px; border-top: 1px solid var(--cx-line); color: var(--cx-brand-ink); font-size: 14px; font-weight: 700; }
.cx-hq__all:hover { color: var(--cx-brand); background: var(--cx-brand-softer); border-radius: 0 0 15px 15px; }

/* ---- offer banner ---- */
.cx-hb { position: relative; min-width: 0; border-radius: 20px; overflow: hidden; background: var(--cx-brand); }
.cx-hb__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; }
.cx-hb__track::-webkit-scrollbar { display: none; }
.cx-hb__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 12px; padding: 34px 40px 52px; min-height: 100%; overflow: hidden; }
.cx-hb__copy { position: relative; z-index: 1; min-width: 0; }
.cx-hb__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cx-hb__ctas form { display: contents; }

.cx-hb__slide--store { background: var(--cx-brand); color: #fff; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.cx-hb__slide--store::after { content: ""; position: absolute; right: -90px; top: 50%; width: 440px; height: 440px; transform: translateY(-50%); border-radius: 50%; background: var(--cx-sky); opacity: .55; }
.cx-hb__kicker { display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: var(--cx-pill); background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 700; color: #fff; }
.cx-hb h1 { font: 800 clamp(24px, 2.2vw, 32px)/1.15 var(--cx-font-head); color: #fff; margin: 0 0 12px; letter-spacing: -.01em; max-width: 17ch; text-wrap: balance; }
.cx-hb__si { font-family: "Noto Sans Sinhala", var(--cx-font); font-size: 14px; line-height: 1.7; color: #E3F1FB; margin: 0; max-width: 46ch; }
.cx-hb__pics { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-items: center; align-self: center; }
.cx-hb__pics span { display: grid; place-items: center; width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); overflow: hidden; }
.cx-hb__pics span:first-child { grid-column: 1 / -1; max-width: 170px; }
.cx-hb__pics img { width: 78%; height: 78%; object-fit: contain; }

.cx-hb__slide--deal { background: var(--hb-tint, #FFF1E7); color: var(--cx-ink); }
.cx-hb__pct { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 700; color: var(--cx-ink); }
.cx-hb__pct b { padding: 6px 14px; border-radius: 12px; background: var(--cx-deal); color: var(--cx-deal-on); font: 800 30px/1 var(--cx-font-head); letter-spacing: -.02em; }
.cx-hb__title { font: 800 clamp(22px, 2.1vw, 30px)/1.2 var(--cx-font-head); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-hb__title a { color: inherit; }
.cx-hb__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.cx-hb__price strong { font: 800 28px var(--cx-font-head); color: var(--cx-deal-ink); }
.cx-hb__price s { color: var(--cx-muted); font-size: 16px; }
.cx-hb__price span { flex-basis: 100%; font-size: 14px; font-weight: 700; color: #0B6B53; }
.cx-hb__img { display: grid; place-items: center; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; border-radius: 50%; background: #fff; box-shadow: 0 20px 40px -22px rgba(18, 48, 77, .5); }
.cx-hb__img img { width: 76%; height: 76%; object-fit: contain; }
.cx-hb__img .cx-art { width: 60%; height: auto; }

.cx-hb__dots { position: absolute; left: 40px; bottom: 20px; z-index: 2; display: flex; gap: 6px; }
.cx-hb__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(18, 48, 77, .28); cursor: pointer; transition: width .25s, background .25s; }
.cx-hb__dots button.is-active { width: 28px; background: var(--cx-deal); }
.cx-hb__dots button:focus-visible { outline: 3px solid var(--cx-ink); outline-offset: 2px; }

/* ---- quick links ---- */
.cx-hq__quick { display: grid; grid-template-rows: repeat(4, 1fr); gap: 12px; }
.cx-ql { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; color: var(--cx-ink); transition: transform .15s, box-shadow .15s; }
.cx-ql:hover { color: var(--cx-ink); transform: translateY(-2px); box-shadow: var(--cx-shadow-sm); }
.cx-ql__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.cx-ql__ico .cx-ico { width: 22px; height: 22px; }
.cx-ql__txt { display: flex; flex-direction: column; min-width: 0; }
.cx-ql__txt strong { font: 800 15.5px/1.25 var(--cx-font-head); }
.cx-ql__txt small { font-size: 12.5px; line-height: 1.35; color: var(--cx-text); }
.cx-ql--deal { background: var(--cx-deal); color: var(--cx-deal-on); }
.cx-ql--deal:hover { color: var(--cx-deal-on); }
.cx-ql--deal .cx-ql__txt small { color: var(--cx-deal-on); }
.cx-ql--deal .cx-ql__ico { color: var(--cx-deal-ink); }
.cx-ql--new { background: var(--g-baby-t, #E4F3FC); }
.cx-ql--new .cx-ql__ico { color: var(--cx-brand); }
.cx-ql--best { background: var(--g-home-t, #FFF1D6); }
.cx-ql--best .cx-ql__ico { color: #B86E00; }
.cx-ql--wa { background: var(--g-life-t, #DFF5EF); }
.cx-ql--wa .cx-ql__ico { color: #1FA855; }

/* ---- phone category chips ---- */
.cx-hq__chips-wrap { display: none; }
.cx-hq__chips { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 8px; margin: 0; padding: 4px 0 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.cx-hq__chips::-webkit-scrollbar { display: none; }
.cx-hq__chips a { display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; color: var(--cx-ink); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; }
.cx-hq__chips a > span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--cx-brand-soft); }
.cx-hq__chips a > span .cx-art { width: 40px; height: 40px; }
.cx-hq__chips a.is-all > span { background: var(--cx-ink); color: #fff; }

@media (max-width: 1199.98px) {
    .cx-hq__grid { grid-template-columns: 236px minmax(0, 1fr); }
    .cx-hq__quick { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cx-hb__slide { padding: 28px 30px 48px; }
    .cx-hb__dots { left: 30px; }
}
@media (max-width: 991.98px) {
    .cx-hq { padding-top: 12px; }
    .cx-hq__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cx-hq__menu { display: none; }
    .cx-hq__chips-wrap { display: block; margin-top: 14px; }
    .cx-hq__quick { order: 2; }
}
@media (max-width: 767.98px) {
    .cx-hb { border-radius: 16px; }
    .cx-hb__slide { grid-template-columns: minmax(0, 1fr) 38%; padding: 20px 18px 40px; gap: 10px; align-items: center; }
    .cx-hb h1 { font-size: 22px; max-width: none; }
    .cx-hb__si { display: none; }
    .cx-hb__kicker { font-size: 11.5px; margin-bottom: 8px; padding: 4px 10px; }
    .cx-hb__ctas { margin-top: 14px; gap: 8px; }
    .cx-hb__ctas .cx-btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
    .cx-hb__ctas .cx-btn--white { display: none; }
    .cx-hb__slide--store::after { width: 240px; height: 240px; right: -70px; }
    .cx-hb__pics { grid-template-columns: 1fr; }
    .cx-hb__pics span:not(:first-child) { display: none; }
    .cx-hb__pct b { font-size: 22px; padding: 5px 10px; }
    .cx-hb__pct { font-size: 13px; margin-bottom: 8px; }
    .cx-hb__title { font-size: 18px; }
    .cx-hb__price strong { font-size: 21px; }
    .cx-hb__price s { font-size: 13.5px; }
    .cx-hb__price span { font-size: 12.5px; }
    .cx-hb__dots { left: 18px; bottom: 14px; }
    .cx-hq__quick { gap: 8px; }
    .cx-ql { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; text-align: center; border-radius: 14px; }
    .cx-ql__ico { width: 38px; height: 38px; }
    .cx-ql__ico .cx-ico { width: 20px; height: 20px; }
    .cx-ql__txt strong { font-size: 12.5px; }
    .cx-ql__txt small { display: none; }
}

/* ---- Today's deals: dense grid ---- */
.cx-dealzone__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 16px; }
.cx-dealzone__head h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: clamp(22px, 2.2vw, 28px); color: var(--cx-ink); }
.cx-dealzone__head h2 .cx-ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--cx-deal); color: var(--cx-deal-on); }
.cx-dealzone__head p { margin: 0; color: var(--cx-muted); }
.cx-dealzone__box { background: var(--cx-deal-soft); border-radius: 22px; padding: 22px; }
.cx-dense { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199.98px) { .cx-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .cx-dealzone .container { padding: 0; }
    .cx-dealzone__box { border-radius: 0; padding: 20px 16px; }
    .cx-dense { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
    .cx-dense::-webkit-scrollbar { display: none; }
    .cx-dense > * { scroll-snap-align: start; }
}

/* ---- product card: boxed, price on its own line, Add + Buy now ---- */
.cx-card { container-type: inline-size; background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; padding: 8px; transition: border-color .15s, box-shadow .15s; }
.cx-card:hover { border-color: color-mix(in srgb, var(--cx-brand) 35%, var(--cx-line)); box-shadow: var(--cx-shadow); }
.cx-card__media { border-radius: 12px; }
.cx-card__body { padding: 8px 4px 2px; }
.cx-card__title { margin-bottom: 6px; }
.cx-card .cx-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-bottom: 10px; }
.cx-price__now.is-sale { color: var(--cx-deal-ink); }
.cx-tag--pct { background: var(--cx-deal); color: var(--cx-deal-on); font-weight: 800; }
.cx-tag--left { background: #fff; color: var(--cx-deal-ink); box-shadow: var(--cx-shadow-sm); }
.cx-card__foot { display: block; margin-top: auto; }
.cx-card__buy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.cx-cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; font: 700 13.5px/1 var(--cx-font); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.cx-cbtn .cx-ico { width: 17px; height: 17px; flex: none; }
.cx-cbtn--add { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
.cx-cbtn--add:hover { background: var(--cx-brand); color: #fff; }
.cx-cbtn--buy { background: var(--cx-deal); color: var(--cx-deal-on); }
.cx-cbtn--buy:hover { background: var(--cx-deal-hover); color: var(--cx-deal-on); }
.cx-cbtn--opt { background: var(--cx-brand-soft); color: var(--cx-brand-ink); }
.cx-cbtn--opt:hover { background: var(--cx-brand); color: #fff; }
.cx-cbtn--off, .cx-cbtn[disabled] { background: #EEF1F4; color: var(--cx-muted); cursor: not-allowed; }
.cx-cbtn:focus-visible { outline: 3px solid var(--cx-ink); outline-offset: 2px; }
@container (max-width: 184px) {
    .cx-card .cx-price { flex-direction: column; align-items: flex-start; min-height: 37px; }
    .cx-cbtn--add span { display: none; }
    .cx-cbtn--add { padding: 0 11px; }
    .cx-cbtn { font-size: 13px; padding: 0 8px; }
}
@media (max-width: 575.98px) {
    .cx-card { padding: 6px; border-radius: 14px; }
    .cx-cbtn { height: 38px; }
}

/* category scroller: product count under each name */
.cx-bubble small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--cx-muted); }

/* ---- v9.1 polish: richer hero with Shop now, floating best sellers, illustrated quick links, deal band ---- */
.cx-btn--glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .55); }
.cx-btn--glass:hover { background: #fff; color: var(--cx-ink); border-color: #fff; }
.cx-hb__shop { box-shadow: 0 10px 24px -10px rgba(255, 106, 19, .9); }
.cx-hb__shop:hover { transform: translateY(-2px); }

.cx-hb__slide--store {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    background:
        radial-gradient(rgba(255, 255, 255, .13) 1.3px, transparent 1.7px) 0 0 / 20px 20px,
        var(--cx-brand);
}
.cx-hb__slide--store::after { display: none; }
.cx-hb__kicker { display: inline-flex; align-items: center; gap: 6px; }
.cx-hb__kicker .cx-ico { width: 14px; height: 14px; color: #FFB4C2; fill: currentColor; }
.cx-hb__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; padding: 0; color: #DCEEFA; font-size: 13px; font-weight: 600; }
.cx-hb__trust li { display: inline-flex; align-items: center; gap: 6px; }
.cx-hb__trust .cx-ico { width: 16px; height: 16px; color: #fff; }

.cx-hb__stage { position: relative; align-self: stretch; min-height: 300px; }
.cx-hb__ring { position: absolute; left: 50%; top: 50%; width: min(300px, 92%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--cx-sky); box-shadow: 0 0 0 26px rgba(40, 169, 226, .28), 0 0 0 54px rgba(40, 169, 226, .12); }
.cx-hb__float { position: absolute; display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 22px; box-shadow: 0 18px 36px -16px rgba(6, 30, 56, .55); }
.cx-hb__float img { width: 80%; height: 80%; object-fit: contain; }
.cx-hb__float b { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); padding: 5px 11px; border-radius: var(--cx-pill); background: var(--cx-deal); color: var(--cx-deal-on); font: 800 13px var(--cx-font-head); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }
.cx-hb__float--0 { width: 58%; max-width: 210px; left: 50%; top: 50%; transform: translate(-50%, -54%) rotate(-4deg); z-index: 2; }
.cx-hb__float--1 { width: 36%; max-width: 140px; right: 0; top: 4%; transform: rotate(7deg); }
.cx-hb__float--2 { width: 36%; max-width: 140px; left: 0; bottom: 8%; transform: rotate(-8deg); }
@media (prefers-reduced-motion: no-preference) {
    .cx-hb__float--1 { animation: cx-bob 5s ease-in-out infinite; }
    .cx-hb__float--2 { animation: cx-bob 5s ease-in-out -2.5s infinite; }
}
@keyframes cx-bob { 50% { translate: 0 -8px; } }

.cx-hb__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--cx-ink); text-decoration: underline; text-underline-offset: 3px; }
.cx-hb__more:hover { color: var(--cx-deal-ink); }
.cx-hb__slide--deal { background: radial-gradient(rgba(18, 48, 77, .07) 1.2px, transparent 1.6px) 0 0 / 20px 20px, var(--hb-tint, #FFF1E7); }

/* quick links with drawings */
.cx-ql { position: relative; overflow: hidden; }
.cx-ql__ico { width: 52px; height: 52px; box-shadow: 0 6px 14px -8px rgba(18, 48, 77, .35); }
.cx-ql__ico .cx-art { width: 36px; height: 36px; transition: transform .25s; }
.cx-ql:hover .cx-ql__ico .cx-art { transform: scale(1.12) rotate(-6deg); }
.cx-ql__txt { flex: 1; }
.cx-ql__go { display: none; width: 16px; height: 16px; flex: none; opacity: .55; transition: transform .2s, opacity .2s; }
.cx-ql:hover .cx-ql__go { opacity: 1; transform: translateX(3px); }
.cx-ql--deal { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 10px, transparent 10px 20px), var(--cx-deal); }

/* category menu */
.cx-hq__menu { box-shadow: var(--cx-shadow-sm); }
.cx-hq__menu-head { background: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--cx-brand); }
.cx-hq__ico .cx-art { transition: transform .2s; }
.cx-hq__cat > a:hover .cx-hq__ico .cx-art { transform: scale(1.18); }

/* deal zone: orange band header */
.cx-dealzone__head { padding: 14px 16px 14px 18px; border-radius: 16px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1) 0 12px, transparent 12px 24px), var(--cx-deal); }
.cx-dealzone__head h2 { color: var(--cx-deal-on); }
.cx-dealzone__head h2 .cx-ico { background: #fff; color: var(--cx-deal-ink); }
.cx-dealzone__head p { color: var(--cx-deal-on); }
.cx-dealzone__head .cx-btn--deal { background: var(--cx-ink); color: #fff; }
.cx-dealzone__head .cx-btn--deal:hover { background: #000; color: #fff; }

/* cards: gentle lift */
.cx-card { transition: border-color .15s, box-shadow .2s, transform .2s; }
@media (hover: hover) { .cx-card:hover { transform: translateY(-3px); } }
.cx-card .cx-price__now { font-size: 17.5px; }

@media (max-width: 767.98px) {
    .cx-hb__slide--store { grid-template-columns: minmax(0, 1fr) 36%; }
    .cx-hb__ctas .cx-btn--lg { min-height: 42px; font-size: 14px; padding: 0 14px; }
    .cx-hb__ctas .cx-btn--glass { display: inline-flex; }
    .cx-hb__trust { display: none; }
    .cx-hb__stage { min-height: 150px; }
    .cx-hb__ring { width: 150px; box-shadow: 0 0 0 12px rgba(40, 169, 226, .28); }
    .cx-hb__float--0 { width: 82%; }
    .cx-hb__float--1, .cx-hb__float--2 { display: none; }
    .cx-hb__float b { font-size: 11.5px; padding: 4px 8px; bottom: -10px; }
    .cx-hb__more { margin-top: 10px; font-size: 13px; }
    .cx-ql__ico { width: 42px; height: 42px; }
    .cx-ql__ico .cx-art { width: 30px; height: 30px; }
    .cx-ql__go { display: none; }
    .cx-dealzone__head { padding: 12px 14px; }
    .cx-dealzone__head p { font-size: 13px; }
}
@media (max-width: 399.98px) { .cx-hb__ctas .cx-btn--glass { display: none; } }
@media (min-width: 1200px) { .cx-ql { padding: 12px 14px; } .cx-ql__txt small { font-size: 12px; } }
.cx-hb__slide--store .cx-hb__ctas { gap: 8px; }
.cx-hb__slide--store .cx-btn--lg { min-height: 50px; padding: 0 1.2rem; font-size: 15.5px; }
.cx-hb__trust { gap: 6px 14px; font-size: 12.5px; }
.cx-hb__trust li:nth-child(3) { display: none; }
.cx-hb__float--0 { width: 50%; max-width: 186px; transform: translate(-46%, -50%) rotate(-4deg); }
.cx-hb__float--1 { width: 30%; max-width: 118px; top: 2%; right: 0; z-index: 3; }
.cx-hb__float--2 { width: 30%; max-width: 118px; bottom: 6%; left: 0; z-index: 3; }
@media (max-width: 767.98px) { .cx-hb__float--0 { width: 82%; transform: translate(-50%, -54%) rotate(-4deg); } }

/* ======================================================================================
   v9.2 colour pass: a family palette used with intent.
   blue #1D75BC (logo) · sky #4CC3F5 · sun #FFD34E · orange #FF6A13 (deals) · mint #5FD3A8 · pink #FF8FB1 · lilac #B4A7FF
   Every coloured fill carries ink text (#12304D or #2A1300), all 4.7:1 or better.
   ====================================================================================== */
:root { --c-sky: #4CC3F5; --c-sun: #FFD34E; --c-mint: #5FD3A8; --c-pink: #FF8FB1; --c-lilac: #B4A7FF; }

/* banner: confetti + colourful product cards */
.cx-hb__confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cx-hb__slide--store .cx-hb__ring { background: var(--c-sky); box-shadow: 0 0 0 26px rgba(76, 195, 245, .3), 0 0 0 54px rgba(76, 195, 245, .13); }
.cx-hb__slide--store .cx-hb__ring::before { content: ""; position: absolute; right: 2%; bottom: 4%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--c-sun); }
.cx-hb__float { border: 4px solid #fff; }
.cx-hb__float img { mix-blend-mode: multiply; }
.cx-hb__float--0 { background: #FFF5D6; }
.cx-hb__float--1 { background: #FDE8EE; }
.cx-hb__float--2 { background: #E2F6EE; }
.cx-hb h1 { text-shadow: 0 2px 0 rgba(10, 50, 90, .25); }
.cx-hb__slide--deal .cx-hb__img { border: 6px solid #fff; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .5), 0 22px 40px -22px rgba(18, 48, 77, .5); }

/* quick links: full colour */
.cx-ql--new { background: var(--c-sky); }
.cx-ql--best { background: var(--c-sun); }
.cx-ql--wa { background: var(--c-mint); }
.cx-ql--new .cx-ql__txt small, .cx-ql--best .cx-ql__txt small, .cx-ql--wa .cx-ql__txt small { color: var(--cx-ink); }
.cx-ql::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .22); pointer-events: none; }
.cx-ql--deal::after { background: rgba(255, 255, 255, .18); }

/* category menu: each row lights up in its own colour */
.cx-hq__cat > a:hover, .cx-hq__cat:focus-within > a, .cx-hq__cat.has-kids:hover > a { background: var(--tint, var(--cx-brand-softer)); color: var(--cx-ink); }
.cx-hq__cat > a:hover .cx-hq__ico, .cx-hq__cat:focus-within .cx-hq__ico { background: #fff !important; }

/* product cards: photo sits on its category colour */
.cx-card__media { background: var(--tint, #F4F7FA); }
.cx-card__media.is-loaded { background: var(--tint, #F4F7FA); }
.cx-card:hover { border-color: var(--c-sky); }

/* section titles: a hand-drawn squiggle in a different colour each time */
.cx-section-head h2 { position: relative; padding-bottom: 14px; }
.cx-section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 9px; background: var(--sq, var(--cx-deal));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 9'%3E%3Cpath d='M2 6q6-6 12 0t12 0t12 0t12 0t12 0t8-2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 9'%3E%3Cpath d='M2 6q6-6 12 0t12 0t12 0t12 0t12 0t8-2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.cx-section:nth-of-type(3n+1) .cx-section-head h2::after { --sq: var(--c-sky); }
.cx-section:nth-of-type(3n+2) .cx-section-head h2::after { --sq: var(--c-mint); }
.cx-section:nth-of-type(3n) .cx-section-head h2::after { --sq: var(--c-pink); }

/* best-seller tabs: the active tab takes its department colour */
.cx-needtab.is-active.cx-needtab--top { background: var(--c-sun); border-color: var(--c-sun); color: var(--cx-ink); }
.cx-needtab.is-active.cx-needtab--baby { background: var(--c-sky); border-color: var(--c-sky); color: var(--cx-ink); }
.cx-needtab.is-active.cx-needtab--home { background: #FFC85C; border-color: #FFC85C; color: var(--cx-ink); }
.cx-needtab.is-active.cx-needtab--life { background: var(--c-mint); border-color: var(--c-mint); color: var(--cx-ink); }
.cx-needtab.is-active::before { background: #fff; }

/* deal zone: confetti dots on the soft panel */
.cx-dealzone__box { background: radial-gradient(rgba(255, 106, 19, .16) 1.4px, transparent 1.8px) 0 0 / 22px 22px, var(--cx-deal-soft); }

/* category bubbles: coloured ring on hover */
.cx-bubble:hover .cx-bubble__img { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--cx-deal); }

@media (max-width: 767.98px) {
    .cx-ql::after { width: 44px; height: 44px; right: -14px; bottom: -14px; }
    .cx-section-head h2 { padding-bottom: 12px; }
}

/* ======================================================================================
   v9.3 colour across the whole website: page headers, buying buttons, product page,
   cart and checkout, account, trust strip, newsletter band and a deep-blue footer.
   ====================================================================================== */
input[type="checkbox"], input[type="radio"] { accent-color: var(--cx-deal); }

/* page headers (shop, cart, checkout, account, info pages): a soft coloured band with confetti */
.cx-page-head { position: relative; overflow: hidden; margin-top: 18px; margin-bottom: 18px; padding: 24px 30px 26px; border-radius: 24px; isolation: isolate;
    background: radial-gradient(rgba(29, 117, 188, .12) 1.3px, transparent 1.7px) 0 0 / 20px 20px, #EAF6FD; }
.cx-page-head::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: var(--c-sun); opacity: .85; }
.cx-page-head::after { content: ""; position: absolute; z-index: -1; right: 120px; bottom: -34px; width: 74px; height: 74px; border-radius: 50%; border: 10px solid var(--c-pink); opacity: .7; }
.cx-page-head h1 { position: relative; display: inline-block; padding-bottom: 14px; }
.cx-page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 10px; background: var(--cx-deal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 9'%3E%3Cpath d='M2 6q6-6 12 0t12 0t12 0t12 0t12 0t8-2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 9'%3E%3Cpath d='M2 6q6-6 12 0t12 0t12 0t12 0t12 0t8-2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.cx-page-head.text-center h1::after { left: 50%; transform: translateX(-50%); }
.cx-page-head p { color: var(--cx-text); }
.cx-page-head .cx-crumbs a { color: var(--cx-brand-ink); }
@media (max-width: 767.98px) {
    .cx-page-head { margin-top: 12px; padding: 18px 18px 20px; border-radius: 18px; }
    .cx-page-head::before { width: 110px; height: 110px; right: -36px; top: -40px; }
    .cx-page-head::after { right: 40px; width: 52px; height: 52px; border-width: 8px; bottom: -26px; }
}

/* buying actions are orange everywhere: Buy now, Continue to checkout, Place order */
.cx-pdp-add[data-buy-now="1"], .cx-cart .cx-summary a.cx-btn--lg[href$="checkout"], a.cx-btn[href$="/checkout"].cx-btn--lg, .place-order {
    background: var(--cx-deal); color: var(--cx-deal-on); border-color: var(--cx-deal); box-shadow: 0 10px 22px -12px rgba(255, 106, 19, .9); }
.cx-pdp-add[data-buy-now="1"]:hover, a.cx-btn[href$="/checkout"].cx-btn--lg:hover, .place-order:hover { background: var(--cx-deal-hover); color: var(--cx-deal-on); }
.cx-pdp-add[data-buy-now="1"][disabled] { background: #F3D9C8; border-color: #F3D9C8; color: #8A6A55; box-shadow: none; }

/* product page */
.cx-gallery__main { background: radial-gradient(rgba(29, 117, 188, .09) 1.3px, transparent 1.7px) 0 0 / 20px 20px, #F1F8FD; }
.cx-pdp__price .cx-price__now.is-sale { color: var(--cx-deal-ink); }
.cx-assure li { border: 0 !important; }
.cx-assure li:nth-child(1) { background: #E4F3FC !important; }
.cx-assure li:nth-child(2) { background: #FFF5D6 !important; }
.cx-assure li:nth-child(3) { background: #E2F6EE !important; }
.cx-assure li:nth-child(1) .cx-ico { color: var(--cx-brand); }
.cx-assure li:nth-child(2) .cx-ico { color: #B86E00; }
.cx-assure li:nth-child(3) .cx-ico { color: #0B6B53; }

/* cart and checkout */
.cx-summary { background: radial-gradient(rgba(255, 106, 19, .12) 1.3px, transparent 1.7px) 0 0 / 20px 20px, #FFF8F2; border-color: #FBDCC6; }
.cx-stepsbar .is-now b { background: var(--cx-deal); color: var(--cx-deal-on); box-shadow: 0 0 0 5px #FFE1CC; }

/* account menu */
.cx-acc-menu nav a.active { background: var(--c-sun); color: var(--cx-ink); }
.cx-acc-menu nav a:hover { background: #EAF6FD; }
.cx-avatar { background: var(--cx-deal) !important; color: var(--cx-deal-on) !important; }

/* trust strip: four colours */
.cx-trust { border: 0; background: #fff; }
.cx-trust li:nth-child(1) .cx-trust__icon { background: #E4F3FC; color: var(--cx-brand); }
.cx-trust li:nth-child(2) .cx-trust__icon { background: #FFF5D6; color: #B86E00; }
.cx-trust li:nth-child(3) .cx-trust__icon { background: #E2F6EE; color: #0B6B53; }
.cx-trust li:nth-child(4) .cx-trust__icon { background: #FDE8EE; color: #B4235A; }

/* newsletter band: sky with confetti */
.cx-cta-band { position: relative; overflow: hidden; isolation: isolate; color: var(--cx-ink);
    background: radial-gradient(rgba(255, 255, 255, .35) 1.4px, transparent 1.8px) 0 0 / 20px 20px, var(--c-sky); }
.cx-cta-band::before { content: ""; position: absolute; z-index: -1; left: -30px; bottom: -60px; width: 150px; height: 150px; border-radius: 50%; background: var(--c-sun); }
.cx-cta-band::after { content: ""; position: absolute; z-index: -1; right: 34%; top: -26px; width: 60px; height: 60px; border-radius: 50%; border: 9px solid var(--c-pink); }
.cx-cta-band h2 { color: var(--cx-ink); }
.cx-cta-band p { color: var(--cx-ink); }
.cx-cta-band .cx-btn { background: var(--cx-deal); color: var(--cx-deal-on); }
.cx-cta-band .cx-btn:hover { background: var(--cx-ink); color: #fff; }

/* footer: deep blue with the colour stripe on top */
.cx-footer { position: relative; background: #0F2E4C; color: #C6D8EA; }
.cx-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: linear-gradient(90deg, var(--cx-brand) 0 20%, var(--c-sky) 20% 36%, var(--c-sun) 36% 52%, var(--cx-deal) 52% 68%, var(--c-mint) 68% 84%, var(--c-pink) 84%); }
.cx-footer h2 { color: #fff; position: relative; padding-bottom: 10px; }
.cx-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 4px; border-radius: 4px; background: var(--c-sun); }
.cx-footer__grid > :nth-child(3) h2::after { background: var(--c-sky); }
.cx-footer__grid > :nth-child(4) h2::after { background: var(--c-mint); }
.cx-footer__grid > :nth-child(5) h2::after { background: var(--c-pink); }
.cx-footer ul a, .cx-footer__contact li, .cx-footer__contact li a { color: #C6D8EA; }
.cx-footer ul a:hover, .cx-footer__contact li a:hover { color: var(--c-sun); }
.cx-footer__about p, .cx-footer .cx-muted { color: #9DB7CF !important; }
.cx-footer .cx-logo__name { color: #fff; }
.cx-footer .cx-logo__name small { color: #9DB7CF; }
.cx-footer .cx-logo img { background: #fff; border-radius: 50%; }
.cx-footer__contact li .cx-ico { color: var(--c-sky); }
.cx-social a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
.cx-social a:nth-child(1):hover { background: #1877F2; border-color: #1877F2; }
.cx-social a:nth-child(2):hover { background: #E1306C; border-color: #E1306C; }
.cx-social a:nth-child(3):hover { background: #000; border-color: #000; }
.cx-social a:nth-child(4):hover { background: #1FA855; border-color: #1FA855; }
.cx-pay-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.cx-footer__bottom { border-top-color: rgba(255, 255, 255, .14); color: #9DB7CF; }
.cx-footer__bottom a { color: #fff; }
@media (max-width: 575.98px) { .cx-footer__contact { border-top-color: rgba(255, 255, 255, .14) !important; } }
/* newsletter shapes kept away from the text */
.cx-cta-band::before { left: auto; right: -50px; bottom: -80px; width: 170px; height: 170px; }
.cx-cta-band::after { right: auto; left: 46%; top: auto; bottom: -32px; }
/* about page: coloured figures and values */
.cx-figures div:nth-child(5n+1) { background: #E4F3FC; }
.cx-figures div:nth-child(5n+2) { background: #FFF5D6; }
.cx-figures div:nth-child(5n+3) { background: #E2F6EE; }
.cx-figures div:nth-child(5n+4) { background: #FDE8EE; }
.cx-figures div:nth-child(5n) { background: #EEE9FB; }
.cx-figures strong { color: var(--cx-ink); }
.cx-values > *:nth-child(4n+1) { background: #E4F3FC; border-color: transparent; }
.cx-values > *:nth-child(4n+2) { background: #FFF5D6; border-color: transparent; }
.cx-values > *:nth-child(4n+3) { background: #E2F6EE; border-color: transparent; }
.cx-values > *:nth-child(4n) { background: #FDE8EE; border-color: transparent; }

/* ======================================================================================
   v9.4 fuller home page: shop by budget, idea boards, top-picks rows
   ====================================================================================== */
.cx-section--tight { padding: 12px 0; }
.cx-mini-title { font-size: 18px; margin: 0 0 12px; }

/* shop by budget */
.cx-budget { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-budget__card { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--cx-line); background: #fff; color: var(--cx-ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cx-budget__card:hover { color: var(--cx-ink); border-color: var(--cx-deal); box-shadow: var(--cx-shadow-sm); transform: translateY(-2px); }
.cx-budget__txt { display: flex; flex-direction: column; min-width: 0; }
.cx-budget__txt strong { font: 800 16.5px/1.2 var(--cx-font-head); white-space: nowrap; }
.cx-budget__txt small { font-size: 12.5px; color: var(--cx-muted); margin-top: 3px; }
.cx-budget__pics { display: flex; flex: none; }
.cx-budget__pics span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--b-tint, #F1F8FD); border: 3px solid #fff; overflow: hidden; box-shadow: 0 4px 10px -6px rgba(18, 48, 77, .4); }
.cx-budget__pics span + span { margin-left: -16px; }
.cx-budget__pics img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.cx-budget__card--0 { --b-tint: #E4F3FC; } .cx-budget__card--1 { --b-tint: #FFF5D6; } .cx-budget__card--2 { --b-tint: #E2F6EE; } .cx-budget__card--3 { --b-tint: #FDE8EE; }
@media (max-width: 1199.98px) { .cx-budget__pics span:nth-child(3) { display: none; } }
@media (max-width: 767.98px) {
    .cx-budget { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cx-budget__card { flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 16px; }
    .cx-budget__txt strong { font-size: 14.5px; white-space: normal; }
    .cx-budget__pics span { width: 44px; height: 44px; }
    .cx-budget__pics span:nth-child(3) { display: grid; }
}

/* idea boards */
.cx-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx-idea { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--tint, #E4F3FC); }
.cx-idea__pics { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 8px; padding: 12px 12px 0; aspect-ratio: 5 / 3; }
.cx-idea__pic { display: grid; place-items: center; border-radius: 14px; background: #fff; overflow: hidden; min-height: 0; }
.cx-idea__pic:first-child { grid-row: 1 / -1; border-radius: 16px; }
.cx-idea__pic img { width: 84%; height: 84%; object-fit: contain; transition: transform .25s; }
.cx-idea__pic:hover img { transform: scale(1.07); }
.cx-idea__art { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; }
.cx-idea__art .cx-art { width: 40%; height: auto; }
.cx-idea__body { display: flex; flex-direction: column; flex: 1; padding: 14px 18px 18px; }
.cx-idea__line { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--cx-text); }
.cx-idea h3 { font-size: 20px; margin: 0 0 10px; }
.cx-idea h3 a { color: var(--cx-ink); }
.cx-idea h3 a:hover { color: var(--cx-brand); }
.cx-idea__kids { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.cx-idea__kids a { display: inline-block; padding: 5px 11px; border-radius: var(--cx-pill); background: rgba(255, 255, 255, .75); color: var(--cx-ink); font-size: 12.5px; font-weight: 600; }
.cx-idea__kids a:hover { background: #fff; color: var(--cx-brand); }
.cx-idea__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--cx-pill); background: var(--cx-ink); color: #fff; font-size: 13.5px; font-weight: 700; }
.cx-idea__go:hover { background: var(--cx-brand); color: #fff; }
@media (max-width: 991.98px) { .cx-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .cx-ideas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; padding-bottom: 4px; }
    .cx-ideas::-webkit-scrollbar { display: none; }
    .cx-idea { scroll-snap-align: start; }
    .cx-idea h3 { font-size: 18px; }
}

/* top-picks rows: 6 across on wide screens */
@media (min-width: 1200px) { .cx-rail--6 { grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; } }
.cx-catrow { padding-top: 18px; padding-bottom: 18px; }
.cx-idea__pics { aspect-ratio: auto; height: 250px; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.cx-idea__pic img { max-width: 84%; max-height: 84%; width: auto; height: auto; }
@media (max-width: 575.98px) { .cx-idea__pics { height: 210px; } }
.cx-idea__pic { position: relative; }
.cx-idea__pic img { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; max-height: none; object-fit: contain; mix-blend-mode: multiply; }

/* ---- our 3 main sections, right under the banner ---- */
.cx-msecs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.cx-msec { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; overflow: hidden; color: var(--cx-ink); border: 2px solid transparent; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cx-msec:hover { color: var(--cx-ink); transform: translateY(-2px); box-shadow: var(--cx-shadow); }
.cx-msec--baby { background: #E4F3FC; } .cx-msec--baby:hover { border-color: var(--g-baby-dot, #28A9E2); }
.cx-msec--home { background: #FFF1D6; } .cx-msec--home:hover { border-color: var(--g-home-dot, #F4B740); }
.cx-msec--life { background: #DFF5EF; } .cx-msec--life:hover { border-color: var(--g-life-dot, #3DBE8B); }
.cx-msec__art { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px -10px rgba(18, 48, 77, .4); }
.cx-msec__art .cx-art { width: 50px; height: 50px; transition: transform .25s; }
.cx-msec:hover .cx-msec__art .cx-art { transform: scale(1.1) rotate(-5deg); }
.cx-msec__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-msec__txt strong { font: 800 20px/1.2 var(--cx-font-head); }
.cx-msec__txt small { font-size: 13px; font-weight: 600; color: var(--cx-text); margin-top: 2px; }
.cx-msec__cats { margin-top: 4px; font-size: 12.5px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-msec__go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cx-ink); color: #fff; transition: transform .15s; }
.cx-msec__go .cx-ico { width: 18px; height: 18px; }
.cx-msec:hover .cx-msec__go { transform: translateX(3px); }
@media (max-width: 1199.98px) { .cx-msec__cats { display: none; } }
@media (max-width: 991.98px) { .cx-msecs { margin-top: 12px; } }
@media (max-width: 767.98px) {
    .cx-msecs { gap: 8px; }
    .cx-msec { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 6px; text-align: center; border-radius: 16px; }
    .cx-msec__art { width: 52px; height: 52px; }
    .cx-msec__art .cx-art { width: 36px; height: 36px; }
    .cx-msec__txt strong { font-size: 14px; }
    .cx-msec__txt small { font-size: 11.5px; }
    .cx-msec__go { display: none; }
}