/* ===========================================================================
   Voltivo — storefront stylesheet
   One file, no framework, no web fonts. Everything below is used by the
   templates; there is no dead utility layer to download.
   =========================================================================== */

/* --------------------------------------------------------------- tokens --- */
:root {
    /* Taken from the logo: its blue, not a brighter one. Everything that was
       indigo before is this now, so the site reads as one brand. */
    --brand:        #0b63e5;
    --brand-600:    #0a54c4;
    --brand-500:    #2e86f5;
    --brand-50:     #eff5ff;
    --brand-100:    #d5e5fd;
    /* The bright edge of the bolt in the logo. Used sparingly: the main call
       to action, and nothing else. */
    --volt:         #00a2ff;
    --volt-50:      #e8f5ff;
    --sale:         #e11d48;
    --sale-50:      #fff1f2;
    --success:      #059669;
    --success-50:   #ecfdf5;
    --warning:      #d97706;
    --warning-50:   #fffbeb;

    --ink:          #0f0f0f;
    --ink-2:        #262626;
    --body:         #3d3d3d;
    --muted:        #707070;
    --faint:        #8a8a8a;
    --line:         #e5e5e5;
    --line-soft:    #efefef;
    --surface:      #ffffff;
    --surface-2:    #f7f7f7;
    --surface-3:    #f1f2f4;

    /* Small corners throughout: a large radius reads as "app", a small one as
       "catalogue", and this is a catalogue. */
    --radius-sm:    4px;
    --radius:       6px;
    --radius-lg:    10px;
    --radius-full:  999px;

    /* Depth comes from the hairline border, not from shadows. These stay so
       the few genuinely floating things — the drawer, dropdowns, the sticky
       bar — still read as above the page. */
    --shadow-xs:    0 1px 1px rgba(15, 15, 15, .04);
    --shadow-sm:    0 1px 2px rgba(15, 15, 15, .06);
    --shadow:       0 2px 8px rgba(15, 15, 15, .08);
    --shadow-lg:    0 12px 28px -10px rgba(15, 15, 15, .18);
    --shadow-brand: 0 6px 18px -8px rgba(11, 99, 229, .38);

    --container:    1320px;
    /* The page gutter, shared by .container and by the full-width banner, so
       the two can never drift apart by a few pixels. */
    --gutter:       clamp(16px, 4vw, 32px);
    --header-h:     72px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
            "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* The sticky header must not cover an anchored heading. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    /* Nothing may push the page sideways. */
    overflow-x: hidden;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
/* Icons sit inside sentences and buttons, so they stay inline and never
   collapse when a flex parent tries to stretch them. */
svg { display: inline-block; vertical-align: middle; flex: none; }
/* The hidden attribute must win over any display rule a component sets. */
[hidden] { display: none !important; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand); }
button { font: inherit; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--ink);
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -.02em;
}
h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
small { font-size: .8125rem; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- layout ----- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.section--tight { padding-block: clamp(1.25rem, 2vw, 1.75rem); }
.section--surface { background: var(--surface-2); }

.section-head {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.section-head__text { max-width: 62ch; }
/* 26px/700 at the top end, the size cashify.in uses: big enough to divide
   the page, small enough that several fit on a screen without shouting. */
.section-head h2 { margin-bottom: .1rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 700; letter-spacing: -.02em; }
.section-head p { margin: 0; color: var(--muted); font-size: .875rem; }

.grid { display: grid; gap: clamp(10px, 1.2vw, 16px); }
/* 5 across in a 1280px container, which is what cashify.in shows. auto-fill
   rather than a fixed count so the listing page, which gives up width to a
   filter column, drops to 4 and then 3 on its own. */
/* Four to a row at the top end. auto-fill used to add a fifth once the
   container grew, which made the cards too small to read. */
.grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--categories { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

@media (max-width: 560px) {
    .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .grid--categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ buttons ----- */
.btn {
    --btn-bg: var(--brand-600);
    --btn-fg: #fff;
    --btn-border: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.35rem;
    min-height: 46px;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 650;
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line); }
.btn--ghost:hover { --btn-bg: var(--surface-3); box-shadow: var(--shadow-sm); }
.btn--dark    { --btn-bg: var(--ink); }
.btn--volt    { --btn-bg: var(--volt); --btn-fg: #ffffff; }
.btn--sale    { --btn-bg: var(--sale); }
.btn--soft    { --btn-bg: var(--brand-50); --btn-fg: var(--brand); }
.btn--soft:hover { --btn-bg: var(--brand-100); box-shadow: var(--shadow-sm); }
.btn--sm      { padding: .5rem .95rem; min-height: 38px; font-size: .85rem; }
.btn--lg      { padding: .95rem 1.9rem; min-height: 54px; font-size: 1.02rem; }
.btn--block   { width: 100%; }
.btn--icon    { padding: 0; width: 44px; min-height: 44px; border-radius: var(--radius-full); }

.btn-row { display: flex; flex-wrap: wrap; gap: .625rem; }

/* -------------------------------------------------------------- badges ---- */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .6rem;
    border-radius: var(--radius-full);
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    background: var(--surface-3); color: var(--ink-2);
    white-space: nowrap;
}
.badge--sale     { background: var(--sale); color: #fff; }
.badge--new      { background: var(--volt); color: #04252c; }
.badge--best     { background: var(--ink); color: #fff; }
.badge--stock    { background: var(--success-50); color: var(--success); }
.badge--out      { background: var(--sale-50); color: var(--sale); }
.badge--warranty { background: var(--brand-50); color: var(--brand); }
.badge--low      { background: var(--warning-50); color: var(--warning); }

/* --------------------------------------------------------------- header --- */
.topbar {
    background: var(--ink);
    color: #cbd5e1;
    font-size: .8125rem;
}
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 38px;
}
.topbar__msg { display: flex; align-items: center; gap: .45rem; }
.topbar__links { display: flex; gap: 1.1rem; align-items: center; }
.topbar a { color: #cbd5e1; }
.topbar a:hover { color: #fff; }
@media (max-width: 800px) { .topbar__links { display: none; } }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.header__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search actions";
    align-items: center;
    gap: clamp(12px, 3vw, 32px);
    min-height: var(--header-h);
}
.header__main > .logo { grid-area: logo; }
.header__main > .search { grid-area: search; }
.header__main > .header__actions { grid-area: actions; }

/* Below this width the search cannot share a row with the logo and the action
   icons without collapsing, so it moves to a full-width row of its own. */
@media (max-width: 880px) {
    .header__main {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "logo actions" "search search";
        gap: 10px 12px;
        padding-block: .7rem;
        min-height: 0;
    }
    .header__main > .header__actions { justify-self: end; }
}

.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__mark {
    width: 40px; height: 40px; flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-600), var(--volt));
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 1.1rem;
    box-shadow: var(--shadow-brand);
}
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; white-space: nowrap; }
.logo__tag { font-size: .68rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 620px) {
    .logo__tag { display: none; }
    .logo__name { font-size: 1rem; }
    .logo__mark { width: 36px; height: 36px; border-radius: 10px; }
    /* Wishlist lives in the drawer on small screens; three icons is enough. */
    .header__actions .icon-btn[href="/wishlist"] { display: none; }
}

.header__actions { display: flex; align-items: center; gap: .35rem; }

.icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 0; border-radius: var(--radius-full);
    background: transparent; color: var(--ink-2);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--brand); }
.icon-btn__count {
    position: absolute; top: 4px; right: 3px;
    min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: var(--radius-full);
    background: var(--sale); color: #fff;
    font-size: .68rem; font-weight: 800; line-height: 1;
    border: 2px solid var(--surface);
}
.icon-btn__label { display: none; }
@media (min-width: 1024px) {
    .icon-btn { width: auto; padding: 0 .7rem; gap: .45rem; }
    .icon-btn__label { display: inline; font-size: .85rem; font-weight: 600; }
    /* With the label visible there is no corner to badge, so the count sits
       inline after the text instead of covering it. */
    .icon-btn__count { position: static; border: 0; }
}

/* ---------------------------------------------------------------- search -- */
.search { position: relative; }
.search__form {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    padding: .3rem .3rem .3rem 1rem;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search__form:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
.search__input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; outline: 0;
    font-size: .95rem; color: var(--ink); padding: .45rem 0;
}
.search__input::placeholder { color: var(--faint); }
.search__submit {
    flex: none; width: 38px; height: 38px;
    border: 0; border-radius: var(--radius-full);
    background: var(--brand-600); color: #fff;
    display: grid; place-items: center; cursor: pointer;
}
.search__submit:hover { background: var(--brand); }

.suggest {
    position: absolute; inset-inline: 0; top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 70;
}
.suggest[hidden] { display: none; }
.suggest__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .85rem;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item:hover, .suggest__item.is-active { background: var(--brand-50); color: var(--brand); }
.suggest__item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-3); }
.suggest__name { font-weight: 600; font-size: .9rem; }
.suggest__meta { font-size: .78rem; color: var(--muted); }
.suggest__empty { padding: .9rem; color: var(--muted); font-size: .9rem; text-align: center; }

/* ------------------------------------------------------------------ nav --- */
.primary-nav { border-top: 1px solid var(--line-soft); }
/* cashify.in spreads its menu across the whole column rather than clustering
   it on the left; it is what makes the bar read as a navigation strip. The
   spread is dropped once the row has to scroll on narrow screens. */
/* The row WRAPS rather than scrolling. It cannot be a scroll container —
   overflow-x:auto forces overflow-y to auto too, which clips the dropdowns —
   and it must not push the page sideways either, which is what a single
   no-wrap row of twelve items did at 1024px. Wrapping handles any number of
   categories the shop cares to add. */
.primary-nav__list {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .1rem .35rem;
    list-style: none; margin: 0; padding: 0;
}
.primary-nav__link {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .8rem .8rem;
    color: var(--ink-2);
    font-weight: 600; font-size: .92rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.primary-nav__link:hover,
.primary-nav__item.is-open > .primary-nav__link { color: var(--brand); border-bottom-color: var(--brand); }
.primary-nav__link[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.primary-nav__item { position: relative; }

.dropdown {
    position: absolute; top: 100%; left: 0; min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    list-style: none; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    /* Hidden only once the fade-out has finished, but visible at once when
       opening: a menu still "hidden" for its first 160ms cannot take keyboard
       focus, which is what ArrowDown needs. */
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
    z-index: 65;
}
.primary-nav__item:hover > .dropdown,
.primary-nav__item:focus-within > .dropdown,
.primary-nav__item.is-open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.primary-nav__item:focus-within > .primary-nav__link { color: var(--brand); border-bottom-color: var(--brand); }
/* Escape closes the menu even though focus stays on "Shop". */
.primary-nav__item.is-dismissed > .dropdown { opacity: 0; visibility: hidden; transform: translateY(6px); }
.dropdown a {
    display: block; padding: .55rem .75rem; border-radius: var(--radius-sm);
    color: var(--ink-2); font-size: .9rem; font-weight: 550;
}
.dropdown a:hover { background: var(--brand-50); color: var(--brand); }

@media (max-width: 1023px) { .primary-nav { display: none; } }
.nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* --------------------------------------------------------------- drawer --- */
.drawer {
    position: fixed; inset: 0; z-index: 100;
    visibility: hidden;
}
.drawer.is-open { visibility: visible; }
.drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(2, 6, 23, .55);
    opacity: 0; transition: opacity .25s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
    position: absolute; inset-block: 0; left: 0;
    width: min(88vw, 360px);
    background: var(--surface);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    box-shadow: var(--shadow-lg);
}
.drawer--right .drawer__panel { left: auto; right: 0; transform: translateX(100%); }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.drawer__body { flex: 1; overflow-y: auto; padding: .5rem .75rem 2rem; -webkit-overflow-scrolling: touch; }

.mnav { list-style: none; margin: 0; padding: 0; }
.mnav > li { border-bottom: 1px solid var(--line-soft); }
.mnav a, .mnav__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .85rem .75rem;
    color: var(--ink); font-weight: 600; font-size: .95rem;
    background: none; border: 0; text-align: left; cursor: pointer;
}
.mnav__sub { list-style: none; margin: 0; padding: 0 0 .5rem .75rem; display: none; }
.mnav__sub a { font-weight: 500; color: var(--body); font-size: .9rem; padding: .5rem .75rem; }
.mnav li.is-open > .mnav__sub { display: block; }
.mnav li.is-open > .mnav__toggle .chev { transform: rotate(180deg); }
.chev { transition: transform .2s var(--ease); flex: none; }

body.no-scroll { overflow: hidden; }

/* --------------------------------------------------------- product card --- */
/* Flat and bordered rather than raised: a page of shop cards with a shadow
   each turns into visual noise, and the hairline is what cashify.in uses to
   separate them. */
.card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px rgba(16, 24, 40, .05);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-100);
    box-shadow: 0 14px 28px -14px rgba(16, 24, 40, .28), 0 0 0 1px var(--brand-100);
}
/* The lift is decoration; anyone who has asked for less motion keeps the card
   still and gets the border and shadow instead. */
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* The photograph fills the card. Standing it on a padded white well left a
   broad margin on every side, because these are lifestyle shots with their own
   background rather than cut-outs. */
.card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
}
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }
/* Two scrims, top and bottom, so a white badge stays readable over a pale
   photograph and a dark one does not sink into a dark photograph. */
.card__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 28%),
        linear-gradient(to top, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0) 26%);
    opacity: .85;
}

/* The card used to reveal an Add-to-cart button over the photograph on hover.
   A touch screen never hovers, so half the shoppers never saw it — both
   actions now sit in the footer, always visible. */

.card__flags {
    position: absolute; z-index: 2; top: .6rem; left: .6rem;
    display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
}
.card__wish {
    position: absolute; z-index: 2; top: .55rem; right: .55rem;
    width: 34px; height: 34px; border: 0; border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .92); color: var(--ink-2);
    display: grid; place-items: center; cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
    transition: color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease);
}
.card__wish:hover { color: var(--sale); background: #fff; transform: scale(1.1); }
.card__wish.is-active { color: var(--sale); }
.card__wish.is-active svg { fill: currentColor; }

/* The money saved, over the foot of the photograph. It was a pale green pill
   in the body, where it read as one more grey line; here it is the flash of
   colour that makes the card worth stopping on. */
.card__off {
    position: absolute; z-index: 2; left: .6rem; bottom: .6rem;
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 700; letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(100deg, var(--success), #12a150);
    border-radius: var(--radius-full);
    padding: .26rem .58rem;
    box-shadow: 0 2px 8px rgba(2, 44, 34, .3);
}

.card__body { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .8rem .3rem; flex: 1; }
/* 14px/700 — small and dense, so three lines of fact fit under a photo
   instead of one line of headline. */
.card__title { margin: 0; font-size: .875rem; font-weight: 700; line-height: 1.35; }
/* Clamped to two lines and reserving both, so the chips, price and buttons of
   every card in a row sit on the same line whatever the product is called. */
.card__title a {
    color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.7em;
    transition: color .15s var(--ease);
}
.card__title a:hover { color: var(--brand); }
.card__chips { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; min-height: 22px; }
/* Named for the card: .chip already belongs to the listing filter pills. */
.card__chip {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .69rem; font-weight: 650; line-height: 1;
    padding: .26rem .5rem;
    border-radius: var(--radius-full);
}
/* Was solid brand blue, which pulled the eye away from the price. */
.card__chip--warranty { background: var(--brand-50); color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-100); }
.card__chip--rating   { border: 1px solid var(--line); color: var(--ink-2); }
.card__chip--rating svg { color: #f5a623; }
.card__chip--low      { background: var(--warning-50); color: var(--warning); }

.card__price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
    margin-top: auto; padding-top: .45rem;
}
.price-now { font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.price-was { font-size: .78rem; color: var(--muted); text-decoration: line-through; }
.price-off { font-size: .75rem; font-weight: 700; color: var(--success); }
/* Discount first, then the price, then the struck MRP — the reading order on
   a cashify card. */
.price-cut {
    font-size: .72rem; font-weight: 800; color: var(--sale);
    background: var(--sale-50); border-radius: var(--radius-sm);
    padding: .16rem .36rem; align-self: center;
}

.card__foot { display: flex; gap: .4rem; padding: .55rem .8rem .8rem; }
.card__foot form { flex: 1; display: flex; }
/* Add to cart and Buy now, side by side, wrapping to two rows when the card is
   too narrow to hold both without the labels breaking. */
.card__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.card__actions .btn { flex: 1 1 6.5rem; padding-inline: .5rem; border-radius: var(--radius-full); }
/* nowrap: at two cards to a 360px screen "Add to cart" otherwise breaks across
   two lines and the buttons in a row end up different heights. */
.card__foot .btn { flex: 1; min-height: 36px; font-size: .8rem; font-weight: 650; white-space: nowrap; }
/* Buy now was solid black, which made every card look like a button with a
   photograph attached. Brand blue, and the outline button beside it, put the
   weight back on the product. */
.card__foot .btn--dark {
    --btn-bg: var(--brand); --btn-fg: #fff;
    background: linear-gradient(100deg, var(--brand), var(--brand-500));
    border-color: transparent; color: #fff;
    box-shadow: var(--shadow-brand);
}
.card__foot .btn--dark:hover { background: linear-gradient(100deg, var(--brand-600), var(--brand)); color: #fff; }
.card__foot .btn--ghost {
    border-color: var(--brand-100); color: var(--brand-600); background: var(--surface);
}
.card__foot .btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-600); }
/* stars */
.stars { display: inline-flex; gap: 1px; color: #f59e0b; }
.stars svg { width: 14px; height: 14px; }
.stars--lg svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- category tile - */
/* Category cards: the photograph carries the card, with the name on a scrim so
   it stays readable over any image. The old round-icon tiles wasted the photo
   at 84px and read as clip art. */
/* Category tiles, in the shape cashify.in uses for its device grid: a small
   square holding the product on a pale tint, with the name UNDER the tile
   rather than printed over the photo. Text on a photo needs a scrim, the scrim
   darkens the product, and at this size the product is the only thing worth
   looking at. */
.cats {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}
.cat {
    display: flex; flex-direction: column; gap: .5rem;
    text-align: center;
    color: var(--ink);
}
.cat__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--brand-50);
    overflow: hidden;
    padding: 10px;
    transition: background-color .16s var(--ease);
}
.cat__media picture, .cat__media img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform .35s var(--ease);
}
.cat:hover .cat__media { background: var(--brand-100); }
.cat:hover .cat__media img { transform: scale(1.06); }

.cat__label { display: flex; flex-direction: column; gap: .05rem; }
.cat__name { font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cat:hover .cat__name { color: var(--brand); }
.cat__count { font-size: .7rem; color: var(--muted); }

/* The chevron belonged to the old overlaid tile; there is nothing for it to
   sit on now. Kept out of the markup, hidden here for any cached page. */
.cat__go { display: none; }

@media (max-width: 1100px) { .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 460px)  { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* Sub-category chips on a listing page: a compact row, not full photo cards —
   the products below are what the visitor came for. */
.subcats { display: flex; flex-wrap: wrap; gap: 10px; }
.subcat {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.subcat:hover { border-color: var(--brand-100); box-shadow: var(--shadow-xs); }
.subcat__name { font-weight: 650; font-size: .88rem; color: var(--ink); }
@media (max-width: 560px) {
    .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cat { aspect-ratio: 1 / 1; border-radius: var(--radius); }
    .cat__name { font-size: .9rem; }
    /* Touch has no hover, so the arrow would never appear — hide it there. */
    .cat__go { display: none; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
    position: relative;
    background: linear-gradient(135deg, #131a3a 0%, #26216b 45%, #0e3f52 100%);
    color: #e2e8f0;
    overflow: hidden;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 78% 30%, rgba(34, 211, 238, .22), transparent 60%);
    pointer-events: none;
}
/* The homepage hero is a banner inside the page, not a full-bleed band —
   cashify.in keeps it within the same 1280px column as everything else, which
   is what stops the top of the page reading as a separate landing page.
   Scoped to [data-hero] so the promo banner, which reuses .hero inside an
   already-padded container, is not indented twice. */
/* The banner is deliberately wider than the 1320px sections — it is the one
   element that should reach towards the edges of the screen, with only the
   page gutter beside it. Capped so it does not sprawl on a very wide monitor. */
.hero[data-hero] {
    width: min(100% - var(--gutter) * 2, 1800px);
    margin: var(--gutter) auto 0;
    border-radius: var(--radius-lg);
}
/* The banner height now comes from the artwork itself — see .hero--cover. */
.hero[data-hero] .hero__title { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem); }
.hero[data-hero] .hero__text { font-size: clamp(.92rem, .9rem + .2vw, 1.02rem); margin-bottom: 1.1rem; }

.hero__slides { position: relative; }
.hero__slide {
    display: none;
    align-items: center;
    gap: clamp(20px, 4vw, 56px);
    padding-block: clamp(2.5rem, 6vw, 5rem);
}
.hero__slide.is-active { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); animation: heroIn .5s var(--ease); }
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
    .hero__slide.is-active { grid-template-columns: 1fr; text-align: center; }
    .hero__art { order: -1; max-width: 320px; margin-inline: auto; }
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .8rem; margin-bottom: 1rem;
    border-radius: var(--radius-full);
    background: rgba(34, 211, 238, .16);
    color: #9ad4ff;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hero__title { color: #fff; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); margin-bottom: .6rem; }
.hero__text { color: #cbd5e1; font-size: clamp(1rem, .95rem + .3vw, 1.14rem); max-width: 48ch; margin-bottom: 1.6rem; }
@media (max-width: 860px) { .hero__text { margin-inline: auto; } .hero .btn-row { justify-content: center; } }
.hero__art { position: relative; }
.hero__art img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.hero__dots { display: flex; gap: .5rem; justify-content: center; padding-bottom: 1.4rem; }
.hero__dot {
    width: 30px; height: 4px; border: 0; padding: 0; border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, .28); background-clip: content-box;
    cursor: pointer; transition: background-color .2s var(--ease);
}
.hero__dot.is-active { background-color: var(--volt); }

/* ------------------------------------------------------------------ usps -- */
.usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.usp { display: flex; align-items: center; gap: .85rem; padding: 1.15rem clamp(12px, 2vw, 24px); background: var(--surface); }
.usp__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; }
.usp__title { font-weight: 700; color: var(--ink); font-size: .92rem; }
.usp__text { font-size: .8rem; color: var(--muted); }

/* ------------------------------------------------------------- carousel --- */
.carousel { position: relative; }
/* The rail shows whole cards at a readable size and scrolls to the rest.
   NOTE: this is deliberately flex and not grid. A percentage in
   grid-auto-columns resolves against an indefinite inline size inside a
   scroll container, so it degrades to min-content and the cards collapse;
   a flex container has a definite width, so the percentage basis holds. */
.carousel__track {
    --rail-gap: clamp(14px, 1.6vw, 22px);
    --rail-cols: 1.35;
    display: flex;
    gap: var(--rail-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}
.carousel__track > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols));
}
@media (min-width: 520px)  { .carousel__track { --rail-cols: 2; } }
@media (min-width: 760px)  { .carousel__track { --rail-cols: 3; } }
/* Stops at four, so a scrolling row and a fixed grid show the same card size.
   A fifth column here would disagree with .grid--products. */
@media (min-width: 1000px) { .carousel__track { --rail-cols: 4; } }
.carousel__nav { display: flex; gap: .4rem; }
.carousel__btn {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    display: grid; place-items: center; cursor: pointer;
}
.carousel__btn:hover { background: var(--surface-3); color: var(--brand); }
.carousel__btn[disabled] { opacity: .4; cursor: default; }

/* ------------------------------------------------------------ breadcrumb -- */
.breadcrumb { padding-block: .9rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--muted); }
.breadcrumb li::after { content: "/"; margin-left: .4rem; color: var(--faint); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- shop ---- */
.shop-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1023px) { .shop-layout { grid-template-columns: 1fr; } }

.filters {
    position: sticky; top: calc(var(--header-h) + 12px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1.25rem;
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
}
@media (max-width: 1023px) {
    .filters { position: static; max-height: none; display: none; }
    .filters.is-open { display: block; margin-bottom: 1.25rem; }
}
.filters__group { padding-block: .9rem; border-bottom: 1px solid var(--line-soft); }
.filters__group:last-child { border-bottom: 0; }
.filters__legend { font-size: .82rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: .6rem; }
.filters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; max-height: 240px; overflow-y: auto; }
.check {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .25rem; border-radius: var(--radius-sm);
    font-size: .88rem; color: var(--body); cursor: pointer;
}
.check:hover { background: var(--surface-2); }
.check input { width: 17px; height: 17px; accent-color: var(--brand-600); flex: none; }
.check__count { margin-left: auto; font-size: .75rem; color: var(--faint); }
.price-inputs { display: flex; align-items: center; gap: .5rem; }
.price-inputs input { width: 100%; }

.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: 1.25rem;
}
.toolbar__count { font-size: .9rem; color: var(--muted); }
.toolbar__count strong { color: var(--ink); }
.toolbar__controls { display: flex; align-items: center; gap: .5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .5rem .3rem .75rem;
    border-radius: var(--radius-full);
    background: var(--brand-50); color: var(--brand);
    font-size: .8rem; font-weight: 600;
}
.chip a { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(11, 99, 229, .12); color: var(--brand); font-size: .7rem; }
.chip a:hover { background: var(--brand); color: #fff; }

/* --------------------------------------------------------- product page --- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.gallery { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 900px) { .gallery { position: static; } }
.gallery__main {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2);
    cursor: zoom-in;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; margin-top: .75rem; }
.gallery__thumb {
    aspect-ratio: 1 / 1; padding: 0; overflow: hidden;
    border: 2px solid var(--line); border-radius: 10px;
    background: var(--surface-2); cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--brand-600); }

.pdp__title { margin-bottom: .5rem; }
.pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .65rem; margin-bottom: .35rem; }
.pdp__price .price-now { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.pdp__tax { font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem; }

.qty {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-full);
    overflow: hidden; background: var(--surface);
}
.qty button {
    width: 44px; height: 46px; border: 0; background: transparent;
    color: var(--ink-2); font-size: 1.15rem; cursor: pointer;
}
.qty button:hover { background: var(--surface-3); color: var(--brand); }
.qty input {
    width: 52px; height: 46px; border: 0; text-align: center;
    font-weight: 700; color: var(--ink); background: transparent;
    -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__buy { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.1rem 1.4rem; }
.pdp__buy .btn { flex: 1 1 160px; }

.pdp__assurance { display: grid; gap: .65rem; padding: 1rem 1.1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.5rem; }
.pdp__assurance div { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.pdp__assurance svg { color: var(--brand); flex: none; }

/* sticky mobile buy bar */
.buybar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    display: none; align-items: center; gap: .75rem;
    padding: .6rem clamp(12px, 4vw, 20px);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .1);
}
@media (max-width: 900px) { .buybar { display: flex; } body.has-buybar { padding-bottom: 82px; } }
.buybar__price { flex: none; }
.buybar__price .price-now { font-size: 1.15rem; }
.buybar .btn { flex: 1; }

/* tabs */
.tabs { border-bottom: 1px solid var(--line); display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: .85rem 1.1rem; border: 0; background: none; cursor: pointer;
    font-weight: 650; font-size: .95rem; color: var(--muted);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { padding-top: 1.5rem; }
.tab-panel[hidden] { display: none; }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.spec-table th, .spec-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec-table th { width: 38%; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.spec-table td { color: var(--ink-2); font-weight: 550; }
@media (max-width: 520px) { .spec-table th { width: 45%; } }

/* rich text from the editor */
.rte { color: var(--body); }
.rte > :last-child { margin-bottom: 0; }
.rte h2, .rte h3, .rte h4 { margin-top: 1.6em; }
.rte ul, .rte ol { padding-left: 1.35em; }
.rte li { margin-bottom: .4em; }
.rte a { text-decoration: underline; }
.rte img { border-radius: var(--radius); margin-block: 1rem; }
.rte blockquote {
    margin: 1.25rem 0; padding: .85rem 1.15rem;
    border-left: 3px solid var(--brand-500); background: var(--brand-50);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2);
}
.rte table { width: 100%; border-collapse: collapse; margin-block: 1rem; font-size: .93rem; }
.rte th, .rte td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.rte th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* reviews */
.review-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
@media (max-width: 640px) { .review-summary { grid-template-columns: 1fr; } }
.review-score { text-align: center; }
.review-score__num { font-size: 3rem; font-weight: 800; color: var(--ink); line-height: 1; }
.review-bar { display: grid; grid-template-columns: 46px minmax(0, 1fr) 40px; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); }
.review-bar__track { height: 8px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.review-bar__fill { height: 100%; background: #f59e0b; border-radius: inherit; }
.review { padding-block: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.review__name { font-weight: 700; color: var(--ink); }
.review__date { font-size: .8rem; color: var(--faint); }

/* ---------------------------------------------------------------- cart ---- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 1rem; align-items: center;
    padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
}
.cart-line__img { width: 96px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-weight: 650; color: var(--ink); font-size: .95rem; }
.cart-line__meta { font-size: .8rem; color: var(--muted); }
.cart-line__end { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.cart-line__total { font-weight: 800; color: var(--ink); }
.cart-line.is-unavailable { opacity: .62; }
@media (max-width: 620px) {
    .cart-line { grid-template-columns: 76px minmax(0, 1fr); }
    .cart-line__img { width: 76px; }
    .cart-line__end { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

.summary {
    position: sticky; top: calc(var(--header-h) + 16px);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.25rem;
}
@media (max-width: 900px) { .summary { position: static; } }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; font-size: .92rem; }
.summary__row--total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .85rem; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.summary__row--discount { color: var(--success); font-weight: 650; }

.coupon-form { display: flex; gap: .5rem; margin-block: .85rem; }
.coupon-form input { flex: 1; min-width: 0; }

.progress { height: 6px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; margin-block: .5rem .75rem; }
.progress__fill { height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--volt)); border-radius: inherit; transition: width .3s var(--ease); }

/* --------------------------------------------------------------- forms ---- */
.field { margin-bottom: 1rem; }
.field--inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.label { display: block; font-size: .85rem; font-weight: 650; color: var(--ink-2); margin-bottom: .35rem; }
.label .req { color: var(--sale); }
.input, .select, .textarea {
    width: 100%;
    padding: .7rem .9rem;
    min-height: 46px;
    font: inherit; font-size: .95rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
    outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--sale); box-shadow: 0 0 0 4px var(--sale-50);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2.4rem;
}
.help { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.error-text { font-size: .8rem; color: var(--sale); margin-top: .3rem; font-weight: 600; }

.radio-card {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.radio-card:hover { border-color: var(--brand-100); background: var(--surface-2); }
.radio-card:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
.radio-card input { margin-top: .2rem; accent-color: var(--brand-600); width: 18px; height: 18px; flex: none; }
.radio-card__title { font-weight: 650; color: var(--ink); }
.radio-card__text { font-size: .84rem; color: var(--muted); }

/* honeypot: must stay reachable to bots but invisible to people */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------- alerts --- */
.alert {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-2);
    font-size: .92rem;
    margin-bottom: 1rem;
}
.alert svg { flex: none; margin-top: 2px; }
.alert--success { background: var(--success-50); border-color: #a7f3d0; color: #065f46; }
.alert--error   { background: var(--sale-50); border-color: #fecdd3; color: #9f1239; }
.alert--warning { background: var(--warning-50); border-color: #fde68a; color: #92400e; }
.alert--info    { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }

/* toasts */
.toasts {
    position: fixed; z-index: 120;
    right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
    display: flex; flex-direction: column; gap: .5rem;
    width: min(92vw, 360px);
}
.toast {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    background: var(--ink); color: #f1f5f9;
    box-shadow: var(--shadow-lg);
    font-size: .9rem;
    animation: toastIn .25s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.toast--success { background: #064e3b; }
.toast--error { background: #881337; }

/* ------------------------------------------------------------ pagination -- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2.5rem; }
.pagination a, .pagination span {
    min-width: 42px; height: 42px; padding: 0 .7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ink-2); font-weight: 600; font-size: .9rem;
    background: var(--surface);
}
.pagination a:hover { border-color: var(--brand-500); color: var(--brand); }
.pagination [aria-current] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination .is-gap { border: 0; background: none; color: var(--faint); }

/* ------------------------------------------------------------ empty state - */
.empty { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 1rem; }
.empty__icon {
    width: 72px; height: 72px; margin: 0 auto 1.1rem;
    border-radius: 50%; background: var(--surface-3); color: var(--faint);
    display: grid; place-items: center;
}
.empty h2 { margin-bottom: .4rem; }
.empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------- account -- */
.account-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 860px) { .account-layout { grid-template-columns: 1fr; } }
.account-nav { display: flex; flex-direction: column; gap: .15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; }
/* On a phone the account menu lies flat across the top. It used to scroll
   sideways, which pushed Sign out off the screen with nothing to show it was
   there; wrapping keeps every entry visible. */
@media (max-width: 860px) { .account-nav { flex-direction: row; flex-wrap: wrap; } }
.account-nav a {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .8rem; border-radius: var(--radius-sm);
    color: var(--ink-2); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.account-nav a:hover { background: var(--surface-2); }
.account-nav a.is-active { background: var(--brand-50); color: var(--brand); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.6rem); margin-bottom: 1.25rem; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.panel__head h2, .panel__head h3 { margin: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; }
.stat__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.stat__value { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.2; }

/* data table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.data-table th, .data-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.data-table th { background: var(--surface-2); font-weight: 700; color: var(--ink-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: var(--radius-full); font-size: .75rem; font-weight: 700; }
.pill--success { background: var(--success-50); color: var(--success); }
.pill--info    { background: var(--volt-50); color: #0e7490; }
.pill--primary { background: var(--brand-50); color: var(--brand); }
.pill--warning { background: var(--warning-50); color: var(--warning); }
.pill--danger  { background: var(--sale-50); color: var(--sale); }
.pill--muted   { background: var(--surface-3); color: var(--muted); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding-bottom: 1.2rem; }
.timeline li::before {
    content: ""; position: absolute; left: calc(-1.4rem - 6px); top: 5px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--brand-500);
}
.timeline li:first-child::before { background: var(--brand-600); }
.timeline__title { font-weight: 650; color: var(--ink); font-size: .92rem; }
.timeline__meta { font-size: .8rem; color: var(--muted); }

/* --------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink); color: #94a3b8; margin-top: clamp(3rem, 6vw, 5rem); }

/* Newsletter band. General Setting -> Newsletter Heading writes the copy, and
   an empty heading removes the whole band, so this never shows a bare form. */
.footer-cta { background: linear-gradient(115deg, var(--brand-600) 0%, var(--brand) 46%, var(--volt) 100%); color: #fff; }
.footer-cta__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: clamp(14px, 3vw, 40px); padding-block: clamp(1.5rem, 3.4vw, 2.3rem);
}
.footer-cta__copy { flex: 1 1 21rem; min-width: 0; }
.footer-cta__title { color: #fff; margin: 0; font-size: clamp(1.1rem, 2.1vw, 1.55rem); line-height: 1.22; letter-spacing: -.01em; }
.footer-cta__text { margin: .35rem 0 0; font-size: .92rem; color: rgba(255, 255, 255, .86); max-width: 52ch; }
.subscribe { flex: 1 1 21rem; min-width: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.subscribe__input {
    flex: 1 1 11rem; min-width: 0; font: inherit; color: #fff;
    padding: .78rem 1.05rem; border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .15);
}
.subscribe__input::placeholder { color: rgba(255, 255, 255, .75); }
.subscribe__input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(255, 255, 255, .24); }
.subscribe .subscribe__btn {
    flex: 0 0 auto; border-radius: var(--radius-full);
    --btn-bg: #ffffff; --btn-fg: var(--brand-600); --btn-bg-hover: #eaf2ff;
    background: #fff; color: var(--brand-600); border-color: #fff; font-weight: 650;
}
.subscribe .subscribe__btn:hover { background: #eaf2ff; color: var(--brand-600); }

.footer__top {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .95fr) minmax(0, 1.55fr) minmax(0, .95fr);
    gap: clamp(24px, 3.4vw, 48px); padding-block: clamp(2.4rem, 5vw, 3.5rem);
}
@media (max-width: 1080px) { .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .footer__top { grid-template-columns: 1fr; gap: 26px; } }

.footer h2 {
    color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em;
    margin: 0 0 1.05rem; padding-bottom: .6rem; position: relative;
}
.footer h2::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 30px; height: 2px; border-radius: 2px; background: var(--volt);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer a { color: #94a3b8; font-size: .9rem; transition: color .15s var(--ease); }
.footer a:hover { color: #fff; }
.footer__col ul a { display: inline-block; transition: color .15s var(--ease), transform .15s var(--ease); }
.footer__col ul a:hover { transform: translateX(3px); }
/* The column heading doubles as the accordion control on a phone. It is a
   button at every width so the keyboard reaches it; above the breakpoint it
   simply looks and behaves like the heading it is. */
.footer__toggle {
    all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; width: 100%; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
    cursor: default;
}
.footer__toggle:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 4px; }
.footer__chev { display: none; flex: none; transition: transform .18s var(--ease); }

/* A long Show In Footer list runs down the page on its own; give it two
   columns on a wide screen so the four columns end at roughly the same line. */
@media (min-width: 1081px) {
    .footer__quick ul { display: block; columns: 2; column-gap: 1.6rem; }
    .footer__quick ul li { break-inside: avoid; margin-bottom: .55rem; }
}

/* Collapsed state, added by the script only below the breakpoint, so with
   JavaScript off every link stays visible and reachable. */
.footer__col.is-collapsible .footer__toggle { cursor: pointer; }
.footer__col.is-collapsible .footer__chev { display: inline-flex; }
.footer__col.is-collapsible h2 { margin-bottom: 0; padding-bottom: .9rem; }
.footer__col.is-collapsible h2::after { display: none; }
.footer__col.is-collapsible { border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: .2rem; }
/* The list is a sibling of the <h2>, not of the button inside it, so the open
   state is carried on the column rather than read off the button. */
.footer__col.is-collapsible:not(.is-open) ul { display: none; }
.footer__col.is-open .footer__chev { transform: rotate(180deg); }
.footer__col.is-collapsible ul { padding-bottom: 1rem; }
.footer__brand .logo__name, .footer__brand .logo { color: #fff; }
.footer__about { margin: 1rem 0 0; font-size: .9rem; line-height: 1.6; max-width: 38ch; }
.footer__contact { display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; margin-top: 1.1rem; }
.footer__contact div { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact svg { flex: none; margin-top: 3px; color: var(--volt); }

.footer__callout {
    display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.2rem;
    padding: .68rem .9rem; border-radius: var(--radius);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.footer__callout:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.footer__callout svg { color: var(--volt); flex: none; }
.footer__callout span { display: flex; flex-direction: column; line-height: 1.25; }
.footer__callout small { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.footer__callout strong { color: #fff; font-size: .97rem; }

.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.socials a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .07); color: #cbd5e1;
    display: grid; place-items: center;
    transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.socials a:hover { background: var(--brand-600); color: #fff; transform: translateY(-2px); }

.footer__certs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
    padding-block: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer__certs img {
    height: 44px; width: auto; max-width: 100%; opacity: .8; filter: grayscale(1);
    transition: opacity .15s var(--ease), filter .15s var(--ease);
}
.footer__certs img:hover { opacity: 1; filter: none; }

.footer__bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; padding-block: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .84rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.payments { display: flex; gap: .4rem; align-items: center; }
.payments span {
    padding: .28rem .55rem; border-radius: 6px;
    background: rgba(255, 255, 255, .08); color: #cbd5e1;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}

/* Back to top. Hidden until the page has been scrolled, and lifted clear of
   the sticky buy bar that appears on a product page below 900px. */
.to-top {
    position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; display: grid; place-items: center;
    box-shadow: var(--shadow-brand); z-index: 40;
    transition: background .15s var(--ease), transform .15s var(--ease);
}
.to-top svg { transform: rotate(180deg); }
.to-top:hover { background: var(--brand-600); transform: translateY(-2px); }
body.has-buybar .to-top { bottom: calc(82px + clamp(12px, 2vw, 24px)); }
@media print { .to-top { display: none !important; } }
/* ---------------------------------------------------------- misc helpers -- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.strong { font-weight: 700; color: var(--ink); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: initial; } }
@media (max-width: 639px) { .only-sm-hide { display: none !important; } }

/* lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 130;
    background: rgba(2, 6, 23, .92);
    display: grid; place-items: center;
    padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius); object-fit: contain; }
.lightbox__close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .12); color: #fff;
    display: grid; place-items: center; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }

/* print — order confirmations and invoices */
@media print {
    .site-header, .site-footer, .topbar, .buybar, .toasts, .no-print { display: none !important; }
    body { background: #fff; }
    .panel, .table-wrap { border: 1px solid #cbd5e1; box-shadow: none; }
}

/* Banner colour themes. The hero carousel copies the active slide's theme
   onto the section, so each slide can carry its own backdrop. */
.hero[data-theme="violet"] { background: linear-gradient(135deg, #2a1250 0%, #4c1d95 50%, #6d28d9 100%); }
.hero[data-theme="violet"]::after { background: radial-gradient(60% 80% at 78% 30%, rgba(244, 114, 182, .24), transparent 60%); }
.hero[data-theme="teal"] { background: linear-gradient(135deg, #06283d 0%, #0f5f6b 50%, #0d9488 100%); }
.hero[data-theme="teal"]::after { background: radial-gradient(60% 80% at 78% 30%, rgba(163, 230, 53, .2), transparent 60%); }
.hero[data-theme="ember"] { background: linear-gradient(135deg, #3b0d18 0%, #7c2d12 52%, #b45309 100%); }
.hero[data-theme="ember"]::after { background: radial-gradient(60% 80% at 78% 30%, rgba(253, 224, 71, .22), transparent 60%); }
.hero[data-theme="slate"] { background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%); }
.hero[data-theme="slate"]::after { background: radial-gradient(60% 80% at 78% 30%, rgba(148, 163, 184, .22), transparent 60%); }

/* Pale banner themes. cashify.in runs its hero as a tinted card with dark
   type, not a dark gradient, and that single change is most of why its page
   reads light. The dark themes above are kept for anyone who wants one. */
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) { color: var(--body); }
.hero[data-theme="mint"] { background: #e2f2ee; }
.hero[data-theme="sand"] { background: #fdf0e2; }
.hero[data-theme="sky"]  { background: #e8edfb; }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"])::after { background: none; }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .hero__title { color: var(--ink); }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .hero__text { color: var(--ink-2); }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .hero__eyebrow { background: rgba(255, 255, 255, .75); color: var(--ink-2); }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .hero__art img { box-shadow: none; }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .btn--ghost { --btn-fg: var(--ink); --btn-border: rgba(15, 15, 15, .18); }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .hero__dot { background-color: rgba(15, 15, 15, .18); }
.hero:is([data-theme="mint"], [data-theme="sand"], [data-theme="sky"]) .hero__dot.is-active { background-color: var(--ink); }

/* The ghost button was carrying these as an inline style, which made it
   unreadable the moment a banner went pale. */
.hero .btn--ghost { --btn-fg: #fff; --btn-border: rgba(255, 255, 255, .28); }


/* ------------------------------------------------------------- proof band -- */
/* cashify.in sets its customer quotes on a black band with the running totals
   beside them. It is the one dark stretch on the page, which is exactly why it
   reads as a claim rather than as more catalogue. */
.proof { background: var(--ink); color: #d4d4d4; }
.proof__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
}
.proof__head h2 { color: #fff; margin: 0; }
.proof__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.proof__stat { display: flex; flex-direction: column; font-size: .78rem; color: #a3a3a3; }
.proof__stat strong {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -.02em;
}
.proof__stat svg { color: #f5a623; }
.quote {
    margin: 0; padding: 1.1rem 1.2rem;
    background: #1c1c1c;
    border: 1px solid #2e2e2e;
    border-radius: var(--radius);
}
.quote .stars { color: #f5a623; }
.quote__title { margin: .5rem 0 .35rem; font-weight: 700; color: #fff; font-size: .9rem; }
.quote__body { margin: 0 0 .75rem; font-size: .84rem; line-height: 1.6; color: #bdbdbd; }
.quote__by { font-size: .76rem; color: #8a8a8a; }
.quote__by strong { color: #e5e5e5; }
.quote__by a { color: #bdbdbd; }
.quote__by a:hover { color: #fff; }

/* ------------------------------------------------------------ brand band -- */
/* A tinted strip carrying the stockists, the way cashify.in runs its brand row
   as a coloured band rather than another white section. */
.brand-band { background: var(--brand-50); border-block: 1px solid var(--brand-100); }
.brand-band__label {
    margin: 0 0 .6rem; text-align: center;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand);
}
.brand-band__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.brand-band__item {
    padding: .35rem .85rem;
    background: var(--surface);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-full);
    font-size: .82rem; font-weight: 600; color: var(--ink-2);
    transition: border-color .16s var(--ease), color .16s var(--ease);
}
.brand-band__item:hover { border-color: var(--brand); color: var(--brand); }

/* -------------------------------------------------------------------- faq -- */
/* Plain <details> elements: they open without JavaScript, they are already
   announced correctly to a screen reader, and they survive the page being
   printed. cashify.in closes its homepage with the same block. */
.faq { max-width: 900px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 0; cursor: pointer;
    font-size: .95rem; font-weight: 600; color: var(--ink);
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.faq__item[open] .faq__q svg { transform: rotate(180deg); }
.faq__a { padding-bottom: 1.1rem; font-size: .88rem; color: var(--body); }
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------- full-bleed hero -- */
/* cashify.in's banner is one picture filling the card. Ours is the same shape,
   with the wording laid over the picture instead of baked into it — so a banner
   can be replaced with a supplier's own artwork and nothing has to be redrawn.
   Scoped to .hero--cover: the dark side-by-side .hero is still used elsewhere. */
/* The card is the picture; the dots sit under it on the page, as they do on
   cashify.in. So the rounding and the clipping belong to the slide track and
   the banner background must not show through beneath it. */
.hero--cover { background: none; overflow: visible; }
.hero--cover::after { content: none; }
.hero--cover .hero__slides {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.hero--cover .hero__slide.is-active {
    display: block;
    position: relative;
    padding-block: 0;
    /* Matches the 1744x608 artwork, so the picture is never cropped on a
       desktop. Below that the crop is deliberate — see the query further down. */
    aspect-ratio: 1744 / 608;
}
.hero--cover .hero__art { position: absolute; inset: 0; margin: 0; max-width: none; }
.hero--cover .hero__art picture,
.hero--cover .hero__art img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}
/* A scrim only where the words are, so the photograph stays the subject. */
.hero--cover .hero__slide.is-active::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
}
.hero--cover .hero__copy {
    position: relative; z-index: 1;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
    /* Measured off the reference banner: the wording starts about a twentieth
       of the way across the picture, not a third. */
    padding-inline: clamp(20px, 4vw, 76px);
    max-width: 100%;
}
.hero--cover .hero__copy > * { max-width: 34rem; }
.hero--cover .hero__title { color: #fff; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); margin-bottom: .5rem; }
.hero--cover .hero__text { color: rgba(255, 255, 255, .88); margin-bottom: 1.1rem; }
.hero--cover .hero__eyebrow { background: rgba(255, 255, 255, .16); color: #fff; }
.hero--cover .btn--ghost { --btn-fg: #fff; --btn-border: rgba(255, 255, 255, .4); }

/* The promo banner sits inside a container that already has padding, so it
   carries the corner radius itself and needs no outer margin. */
.hero--promo { border-radius: 0; }
.hero--promo .hero__copy { padding-inline: clamp(1.25rem, 4vw, 3rem); }
.hero--promo .hero__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); }

/* The dots belong under the picture, not over it. */
.hero--cover .hero__dots { padding-block: .9rem 0; }
.hero--cover .hero__dot { background-color: rgba(15, 15, 15, .18); }
.hero--cover .hero__dot.is-active { background-color: var(--ink); }

/* A 2.9:1 picture is only 125px tall on a phone, which leaves no room for the
   words. Below 860px the banner is given a height and the photograph is
   cropped to it. */
@media (max-width: 860px) {
    .hero--cover .hero__slide.is-active { aspect-ratio: auto; min-height: 380px; }
    .hero--cover .hero__slide.is-active::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .72) 45%, rgba(0, 0, 0, .82) 100%);
    }
    .hero--cover .hero__copy { justify-content: flex-end; }
}

/* A slide with no wording is the picture alone, so it needs neither the
   scrim nor the phone-height crop: the whole slide is one link. */
.hero__cover-link { position: absolute; inset: 0; z-index: 1; }
.hero--cover .hero__slide.is-active:has(.hero__cover-link)::after { content: none; }
@media (max-width: 860px) {
    .hero--cover .hero__slide.is-active:has(.hero__cover-link) { aspect-ratio: 1744 / 608; min-height: 0; }
}

/* ---------------------------------------------------------- phone slider -- */
/* On a phone the slide is a portrait card: the wording at the top left over a
   dark fade, the product filling the lower half of the picture. It is built
   for the Mobile Image (1080x1350, 4:5) from Manage Slider; a slide without
   one crops the desktop picture to the same card, nudged towards the product. */
@media (max-width: 767px) {
    .hero[data-hero] { margin-top: 12px; }
    .hero--cover .hero__slides {
        border-radius: 22px;
        box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .55);
        background: #111;
    }
    .hero--cover .hero__slide.is-active,
    .hero--cover .hero__slide.is-active:has(.hero__cover-link) {
        aspect-ratio: 4 / 5;
        min-height: 0;
        max-height: 78vh;
        width: 100%;
        text-align: left;
    }
    /* Live banners keep the product on the right, so a phone crop leans right. */
    .hero--cover .hero__art img { object-position: 80% 50%; }
    .hero--cover .hero__art picture:has(source[media]) img { object-position: 50% 50%; }
    .hero--cover .hero__slide.is-active::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .46) 26%, rgba(0, 0, 0, .1) 46%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .18) 100%);
    }
    .hero--cover .hero__copy {
        justify-content: flex-start;
        align-items: flex-start;
        /* Compact on purpose: the wording keeps to the top ~42% of the card so the
           product in the lower half is never covered. */
        padding: clamp(1rem, .6rem + 2vw, 1.4rem) clamp(1rem, .7rem + 1.6vw, 1.3rem) 1rem;
    }
    .hero--cover .hero__copy > * { max-width: 100%; }
    .hero--cover[data-hero] .hero__title {
        font-size: clamp(1.3rem, .95rem + 2.2vw, 1.75rem);
        line-height: 1.1;
        letter-spacing: -.015em;
        margin-bottom: .35rem;
        text-wrap: balance;
        text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
    }
    .hero--cover[data-hero] .hero__text {
        max-width: 34ch;
        margin: 0 0 .8rem;
        font-size: clamp(.8rem, .74rem + .3vw, .9rem);
        line-height: 1.4;
        color: rgba(255, 255, 255, .9);
        text-wrap: pretty;
        /* Two lines on a small phone, three on a large one; longer wording ends in "...". */
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    .hero--cover .btn-row { justify-content: flex-start; }
    .hero--cover .hero__copy .btn--lg {
        min-height: 40px;
        padding: .45rem .8rem .45rem 1.1rem;
        gap: .3rem;
        font-size: .88rem;
        font-weight: 700;
        box-shadow: 0 6px 16px -8px rgba(11, 99, 229, .7);
    }
    .hero--cover .hero__copy .btn--lg svg { width: 15px; height: 15px; }
    /* The wording rises in after the picture, one line after another. */
    .hero--cover .hero__slide.is-active .hero__copy > * { animation: heroCopyIn .55s var(--ease) both; }
    .hero--cover .hero__slide.is-active .hero__copy > :nth-child(2) { animation-delay: .08s; }
    .hero--cover .hero__slide.is-active .hero__copy > :nth-child(3) { animation-delay: .16s; }
    .hero--cover .hero__dots { padding-top: .35rem; }
}
@media (min-width: 400px) and (max-width: 767px) {
    .hero--cover[data-hero] .hero__text { -webkit-line-clamp: 3; }
}
@keyframes heroCopyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hero--cover .hero__slide.is-active .hero__copy > * { animation: none; }
}

/* The dots show which slide is on: the current one stretches into a bar. */
.hero--cover .hero__dot { width: 14px; transition: width .3s var(--ease), background-color .2s var(--ease); }
.hero--cover .hero__dot.is-active { width: 32px; }

/* --------------------------------------------------------- Power choices -- */
/* The product's +Prices rows. Real radio buttons under the tiles, so the
   choice works with a keyboard and without JavaScript. */
.pdp-variants { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.pdp-variants__label { padding: 0; margin-bottom: .5rem; font-size: .82rem; font-weight: 700; color: var(--ink); }
.pdp-variants__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pdp-variant {
    position: relative;
    display: inline-flex; flex-direction: column; gap: .1rem;
    min-width: 96px; padding: .55rem .85rem;
    background: var(--surface);
    border: 1.5px solid var(--line); border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.pdp-variant input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pdp-variant__name { font-weight: 650; font-size: .88rem; color: var(--ink); }
.pdp-variant__price { font-size: .78rem; color: var(--muted); }
.pdp-variant:hover { border-color: var(--brand-100); }
.pdp-variant:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.pdp-variant:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.pdp__form .pdp__buy { margin-bottom: .6rem; }
.pdp__buynow { margin-bottom: 1.25rem; }

/* ------------------------------------------------------- videos and maps -- */
.video-embed {
    position: relative; aspect-ratio: 16 / 9; max-width: 100%;
    background: #000; border-radius: var(--radius); overflow: hidden;
}
.video-embed iframe,
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.section--tight > .video-embed { max-width: 880px; margin-inline: auto; }
.video-card { display: flex; flex-direction: column; gap: .6rem; padding: .75rem; margin: 0; }
.video-card__title { margin: 0; font-size: 1rem; }
.map-embed {
    position: relative; aspect-ratio: 4 / 3; max-width: 100%;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}

/* ------------------------------------------------------------ static pages -- */
.page-banner { aspect-ratio: 1920 / 420; max-width: 100%; overflow: hidden; background: var(--surface-2); }
.page-banner picture,
.page-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .page-banner { aspect-ratio: 16 / 7; } }
.page-body--with-image {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.page-figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.page-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .page-body--with-image { grid-template-columns: minmax(0, 1fr); } }

/* Clients on the homepage, certificates on About Us. */
.logo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.logo-strip--tall { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.logo-strip__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    min-height: 88px; margin: 0; padding: .75rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    text-align: center; font-size: .85rem; font-weight: 600; color: var(--ink-2);
}
.logo-strip__item img { width: auto; max-width: 100%; max-height: 56px; object-fit: contain; }
.logo-strip--tall .logo-strip__item img { max-height: 160px; }

.subcat.is-active { border-color: var(--brand); background: var(--brand-50); }
.locations { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.footer__member a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------------------------------- narrowest phones -- */
/* At 320-380px the uploaded logo, three icon buttons and their gaps do not
   fit on one row, and the logo ran 14px into the menu button. The logo
   shrinks (height:auto overrides the img's height attribute, so it keeps its
   shape) and the buttons close up. */
@media (max-width: 380px) {
    .header__main { gap: 10px 6px; }
    .header__main > .logo img { max-width: 112px; height: auto; }
    .header__actions { gap: 0; }
    .header__actions .icon-btn { width: 40px; }
}
/* The one-line notice wraps on a phone; centred it reads as one message
   rather than as text that ran out of room. */
@media (max-width: 480px) {
    .topbar__inner { justify-content: center; text-align: center; }
    .topbar__msg { font-size: .75rem; line-height: 1.35; padding-block: .3rem; }
}

/* --------------------------------------------------------- touch targets -- */
/* From the responsive audit: controls under 32px on touch screens. Each keeps
   its look; only the area that answers a tap grows. */
.search__input { min-height: 38px; }
.hero__dot { height: 4px; padding: 14px 2px; box-sizing: content-box; background-clip: content-box; }
.hero__dots { padding-bottom: .5rem; }
.hero--cover .hero__dots { padding-block: 0; }
.chip { padding-block: .1rem; }
.chip a { width: 32px; height: 32px; margin-right: -.3rem; font-size: .8rem; }
.payments { flex-wrap: wrap; }
.payments span { font-size: .72rem; }
@media (max-width: 1023px) {
    .footer ul { gap: 0; }
    .footer ul a,
    .footer__contact a { display: inline-block; padding-block: .45rem; min-width: 44px; }
    .panel a[href^="mailto:"],
    .panel a[href^="tel:"] { display: inline-block; padding-block: .4rem; }
    .header__main > .logo { min-height: 40px; }
    .footer__contact { gap: 0; }
    .footer__contact div { align-items: center; }
    .footer__contact svg { margin-top: 0; }
    .topbar a { display: inline-flex; align-items: center; min-height: 32px; }
    a[href="/forgot-password"],
    .quote__by a,
    a.card__eyebrow,
    .card__body > a.small { display: inline-block; padding-block: .45rem; }
}