/* ==========================================================================
   Mobile Heaven public site: every page in the homepage design system,
   and the six website themes (owner, 2026-09-22).
   --------------------------------------------------------------------------
   Loaded after app.css and site-v3.css, on public pages only (<body class=
   "v3">). The staff app never carries .v3, so nothing here reaches it.

   1. The older page parts (x-site.hero / section / heading / cards / forms)
      are redrawn with the v3 tokens, so About, Services, Contact, Sell, FAQ,
      Catalogue, Accessories, Valuation and the legal pages all share the
      homepage's type, colour, radius and buttons.
   2. A theme is only a token set: .v3-theme-<slug> redefines the --v3-*
      tokens, and every rule reads them. Dark-chrome themes (Midnight,
      Signature) also darken the header, heroes and footer; content stays on
      a light ground so prices, specs and forms remain easy to read.

   Plain CSS, no build step.
   ========================================================================== */

.v3 {
    --v3-body: #464B6E;
    --v3-navy-2: #1B1F5C;
    --v3-accent-on-dark: #A5B4FC;
    --v3-glow2: rgba(47, 107, 255, .16);
    --v3-text-grad-dark: linear-gradient(90deg, #A5B4FC 0%, #C4B5FD 100%);
    --v3-hero-a: #FAFAFF;
    --v3-hero-b: #EEEAFE;
    --v3-hero-c: #E6ECFF;
    --v3-radius: 20px;

    /* The older public styles read --mh-*; point them at the theme. */
    --mh-accent: var(--v3-indigo);
    --mh-accent-hover: var(--v3-indigo);
    --mh-accent-soft: var(--v3-lav);
    --mh-accent-on-dark: var(--v3-accent-on-dark);
    --mh-page: var(--v3-ground);
    --mh-white: var(--v3-surface);
    --mh-border: var(--v3-line);
    --mh-ink: var(--v3-ink);
    --mh-muted: var(--v3-muted);
    --mh-graphite: var(--v3-navy);
    --mh-surface-frame: var(--v3-ground);
    --mh-surface-icon: var(--v3-lav);
    --mh-font-display: var(--v3-font);
    --mh-radius: 14px;
    --mh-radius-lg: 16px;

    /* Bootstrap reads these for body text, muted text and links. */
    --bs-body-font-family: var(--v3-font);
    --bs-body-color: var(--v3-ink);
    --bs-secondary-color: var(--v3-muted);
    --bs-link-color-rgb: var(--v3-accent-rgb);
    --bs-link-hover-color-rgb: var(--v3-accent-rgb);

    background: var(--v3-ground);
    color: var(--v3-ink);
    font-family: var(--v3-font);
    -webkit-font-smoothing: antialiased;
}

/* ---------- type ---------- */
.v3 main h1, .v3 main h2, .v3 main h3, .v3 main h4, .v3 main h5, .v3 main h6 {
    font-family: var(--v3-font);
    color: var(--v3-ink);
    letter-spacing: -.02em;
    text-wrap: balance;
}
.v3 main h2 { font-weight: 800; }
.v3 main h3, .v3 main h4 { font-weight: 750; }
.v3 main .lead { font-size: 1.08rem; font-weight: 400; line-height: 1.65; color: var(--v3-body); }
.v3 main .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--v3-indigo); }
.v3 main .rule-gold { display: none; }
.v3 main .container { max-width: 1224px; }
.v3 main .numeric { font-variant-numeric: tabular-nums; }

/* ---------- page hero ---------- */
.v3 .v3-phero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(40px, 6vw, 76px) 0 clamp(36px, 5vw, 58px);
    background:
        radial-gradient(50% 80% at 84% 26%, rgba(var(--v3-accent-rgb), .20) 0%, transparent 65%),
        radial-gradient(40% 70% at 100% 100%, var(--v3-glow2) 0%, transparent 70%),
        radial-gradient(40% 70% at 4% 4%, var(--v3-surface) 0%, transparent 70%),
        linear-gradient(115deg, var(--v3-hero-a) 0%, var(--v3-hero-b) 55%, var(--v3-hero-c) 100%);
    border-bottom: 1px solid var(--v3-line);
}
.v3 .v3-phero__in { display: grid; gap: 32px; align-items: center; }
.v3 .v3-phero__in--split { grid-template-columns: 1.05fr .95fr; }
.v3 .v3-phero__copy { max-width: 740px; }
.v3 .v3-phero .v3-phero__title {
    margin: 0; font-family: var(--v3-font); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05;
    font-weight: 800; letter-spacing: -.035em; color: var(--v3-ink); text-wrap: balance;
}
.v3 .v3-phero__lead { margin: 16px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--v3-body); }
.v3 .v3-phero__actions { margin-top: 26px; }
.v3 .v3-phero.is-center .v3-phero__copy { margin-inline: auto; text-align: center; }
.v3 .v3-phero.is-center .v3-phero__lead { margin-inline: auto; }
.v3 .v3-phero.is-center .v3-phero__actions,
.v3 .v3-phero.is-center .v3-phero__actions .d-flex { display: flex; flex-wrap: wrap; justify-content: center; }
.v3 .v3-phero__media img {
    display: block; width: 100%; max-height: 420px; object-fit: contain;
    border-radius: 24px; background: var(--v3-surface); box-shadow: var(--v3-shadow-md);
}
.v3 .v3-phero--cover {
    background:
        linear-gradient(100deg, rgba(11, 16, 48, var(--phero-ov)), rgba(11, 16, 48, calc(var(--phero-ov) * .5))),
        var(--phero-img) center / cover no-repeat;
    border-bottom: 0;
}
.v3 .v3-phero--cover .v3-phero__title { color: #FFFFFF; }
.v3 .v3-phero--cover .v3-phero__lead { color: rgba(255, 255, 255, .88); }
.v3 .v3-phero--cover .v3-eyebrow { color: #FFFFFF; opacity: .9; }

/* ---------- sections ---------- */
.v3 .section-white { background: var(--v3-surface); }
.v3 .section-cream { background: var(--v3-ground); }
.v3 .section-dark {
    background: radial-gradient(70% 120% at 100% 0%, rgba(var(--v3-accent-rgb), .35) 0%, transparent 60%), var(--v3-navy);
    color: rgba(255, 255, 255, .78);
}
.v3 main .section-dark h1, .v3 main .section-dark h2, .v3 main .section-dark h3, .v3 main .section-dark h4 { color: #FFFFFF; }
.v3 main .section-dark .v3-sec-title { color: #FFFFFF; }
.v3 main .section-dark .v3-sec-eyebrow { color: var(--v3-accent-on-dark); }
.v3 main .section-dark .v3-sec-sub, .v3 main .section-dark .lead, .v3 main .section-dark .text-muted { color: rgba(255, 255, 255, .78) !important; }
.v3 main .section-dark a:not(.btn):not(.v3-btn) { color: var(--v3-accent-on-dark); }

.v3 .crumb-bar { padding-block: 14px 0; font-size: 13px; }
.v3 .crumb-bar .breadcrumb { margin: 0; }
.v3 .crumb-bar a { color: var(--v3-muted); text-decoration: none; }
.v3 .crumb-bar a:hover { color: var(--v3-indigo); }

/* ---------- cards ---------- */
.v3 main .card,
.v3 main .card-block {
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow-sm);
    color: var(--v3-ink);
}
.v3 main a:hover > .card,
.v3 main a:focus-visible > .card { box-shadow: var(--v3-shadow-md); }
.v3 main .card .h5, .v3 main .card .h6, .v3 main .card h3 { color: var(--v3-ink); }
.v3 .proc-step { border-bottom-color: var(--v3-line); }
.v3 .proc-step__num { color: var(--v3-indigo); font-weight: 800; }
.v3 .site-figure, .v3 .hero-frame { border-radius: var(--v3-radius); }

/* ---------- guarantees band ---------- */
.v3 .trust-band, .v3 .trust-band--light, .v3 .trust-band--white { background: transparent; border: 0; padding-block: 22px 0; }
.v3 .trust-band .container { max-width: 1224px; }
.v3 .trust-band__item {
    padding: 16px 18px; border-radius: 18px;
    background: var(--v3-surface); border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow-sm);
}
.v3 .trust-band__tick {
    width: 30px; height: 30px; padding: 6px; border-radius: 10px;
    color: var(--v3-indigo); background: var(--v3-lav);
}
.v3 .trust-band__title { font-weight: 800; color: var(--v3-ink); }
.v3 .trust-band__text { color: var(--v3-muted); }

/* ---------- buttons ---------- */
.v3 main .btn, .v3 .modal .btn { font-family: var(--v3-font); font-weight: 700; border-radius: 14px; }
.v3 main .btn-lg { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }
.v3 .btn-accent,
.v3 main .btn-primary {
    --bs-btn-color: var(--v3-on-accent);
    --bs-btn-bg: var(--v3-indigo);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--v3-on-accent);
    --bs-btn-hover-bg: var(--v3-indigo);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--v3-on-accent);
    --bs-btn-active-bg: var(--v3-indigo);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--v3-on-accent);
    --bs-btn-disabled-bg: var(--v3-indigo);
    --bs-btn-focus-shadow-rgb: var(--v3-accent-rgb);
    background-image: var(--v3-grad);
    box-shadow: 0 12px 24px -14px rgba(var(--v3-accent-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.v3 .btn-accent:hover,
.v3 main .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 30px -16px rgba(var(--v3-accent-rgb), .9); }
.v3 main .btn-outline-light,
.v3 main .btn-outline-dark,
.v3 main .btn-outline-secondary,
.v3 main .btn-outline-primary,
.v3 main .btn-light {
    --bs-btn-color: var(--v3-ink);
    --bs-btn-bg: var(--v3-surface);
    --bs-btn-border-color: var(--v3-line);
    --bs-btn-hover-color: var(--v3-indigo);
    --bs-btn-hover-bg: var(--v3-surface);
    --bs-btn-hover-border-color: var(--v3-indigo);
    --bs-btn-active-color: var(--v3-indigo);
    --bs-btn-active-bg: var(--v3-lav);
    --bs-btn-active-border-color: var(--v3-indigo);
    box-shadow: var(--v3-shadow-sm);
}

/* ---------- forms ---------- */
.v3 main .form-control,
.v3 main .form-select,
.v3 .modal .form-control {
    border-radius: 12px; border-color: var(--v3-line);
    background-color: var(--v3-surface); color: var(--v3-ink);
}
.v3 main .form-control:not(textarea):not(.form-control-sm),
.v3 main .form-select:not(.form-select-sm) { min-height: 46px; }
.v3 main .form-control:focus,
.v3 main .form-select:focus,
.v3 .modal .form-control:focus { border-color: var(--v3-indigo); box-shadow: 0 0 0 4px rgba(var(--v3-accent-rgb), .16); }
.v3 main .form-label { font-weight: 650; font-size: 14px; color: var(--v3-ink-2); }
.v3 main .form-check-input:checked,
.v3 .modal .form-check-input:checked { background-color: var(--v3-indigo); border-color: var(--v3-indigo); }
.v3 .modal-content { border: 0; border-radius: 24px; box-shadow: var(--v3-shadow-md); font-family: var(--v3-font); }

/* ---------- FAQ accordion ---------- */
.v3 main .accordion { --bs-accordion-border-color: var(--v3-line); --bs-accordion-active-bg: var(--v3-lav); --bs-accordion-active-color: var(--v3-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px rgba(var(--v3-accent-rgb), .16); }
.v3 main .accordion-item { margin-bottom: 10px; border: 1px solid var(--v3-line) !important; border-radius: 16px !important; overflow: hidden; background: var(--v3-surface); }
.v3 main .accordion-button { font-weight: 700; color: var(--v3-ink); background: var(--v3-surface); }
.v3 main .accordion-button:not(.collapsed) { background: var(--v3-lav); box-shadow: none; }

/* ---------- closing call to action ---------- */
.v3 .v3-cta-band { padding: 56px 0 8px; }
.v3 .v3-cta-band__in {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
    padding: 34px clamp(22px, 4vw, 48px); border-radius: 28px;
    background: radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .18) 0%, transparent 55%), var(--v3-grad);
    box-shadow: var(--v3-shadow-md);
}
.v3 .v3-cta-band .v3-cta-band__title {
    margin: 0; font-family: var(--v3-font); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15;
    font-weight: 800; letter-spacing: -.025em; color: var(--v3-on-accent);
}
.v3 .v3-cta-band__body { margin: 8px 0 0; max-width: 60ch; color: var(--v3-on-accent); opacity: .9; }
.v3 .v3-cta-band__body a { color: inherit; text-decoration: underline; }

/* ---------- contact: opening hours up front ---------- */
.v3 .v3-hours {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center;
    padding: 22px 24px; border-radius: 24px;
    background: linear-gradient(135deg, var(--v3-surface) 0%, var(--v3-lav) 100%);
    border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow-md);
}
.v3 .v3-hours__ico {
    grid-row: span 3; display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 18px; background: var(--v3-grad); color: var(--v3-on-accent);
}
.v3 .v3-hours__ico .v3-ico { width: 28px; height: 28px; }
.v3 .v3-hours__label { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-indigo); }
.v3 .v3-hours__days { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--v3-ink); }
.v3 .v3-hours__time { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--v3-ink-2); font-variant-numeric: tabular-nums; }
.v3 .v3-hours__note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13.5px; color: var(--v3-muted); }
.v3 .v3-contact-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.v3 .v3-contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.v3 .v3-contact-list .v3-ico-wrap { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--v3-lav); color: var(--v3-indigo); }
.v3 .v3-contact-list small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--v3-muted); }
.v3 .v3-contact-list a, .v3 .v3-contact-list span { color: var(--v3-ink); font-weight: 600; text-decoration: none; }

/* ---------- staff theme preview bar ---------- */
.v3 .v3-preview-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 8px 16px;
    background: #111827; color: #F9FAFB; font: 600 13px/1.4 var(--v3-font); position: relative; z-index: 1040;
}
.v3 .v3-preview-bar a { color: #FDE68A; }

@media (max-width: 992px) {
    .v3 .v3-phero__in--split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Themes (Settings → Website → Themes). Aurora Glass is the default above.
   ========================================================================== */

.v3.v3-theme-midnight {
    --v3-ink: #0B1224; --v3-ink-2: #1E293B; --v3-muted: #52607A; --v3-body: #3A4660;
    --v3-line: #E2E8F0; --v3-ground: #F1F4F9; --v3-lav: #E8F0FE;
    --v3-indigo: #2563EB; --v3-accent-rgb: 37, 99, 235; --v3-accent-on-dark: #7DD3FC;
    --v3-navy: #070C1A; --v3-navy-2: #0F1B3D; --v3-hdr-bg: rgba(7, 12, 26, .92);
    --v3-grad: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #0E7490 100%);
    --v3-text-grad: linear-gradient(90deg, #1D4ED8 0%, #0E7490 100%);
    --v3-text-grad-dark: linear-gradient(90deg, #60A5FA 0%, #22D3EE 100%);
    --v3-glow2: rgba(6, 182, 212, .25);
}

.v3.v3-theme-neo {
    --v3-ink: #0A0A0A; --v3-ink-2: #262626; --v3-muted: #5E5E5E; --v3-body: #404040;
    --v3-line: #E7E7E7; --v3-ground: #FAFAFA; --v3-lav: #F1F1F1;
    --v3-indigo: #111111; --v3-accent-rgb: 17, 17, 17; --v3-accent-on-dark: #E5E5E5;
    --v3-navy: #0A0A0A; --v3-navy-2: #1C1C1C;
    --v3-grad: linear-gradient(135deg, #111111 0%, #2E2E2E 100%);
    --v3-text-grad: linear-gradient(90deg, #111111 0%, #555555 100%);
    --v3-glow2: rgba(0, 0, 0, .05);
    --v3-hero-a: #FFFFFF; --v3-hero-b: #F5F5F5; --v3-hero-c: #ECECEC;
    --v3-radius: 16px;
}
.v3.v3-theme-neo .v3-slide { --base: #F7F7F7; --base2: #EDEDED; --glow1: rgba(0, 0, 0, .08); --glow2: rgba(0, 0, 0, .05); --ring1: rgba(0, 0, 0, .35); --ring2: rgba(0, 0, 0, .2); }

.v3.v3-theme-ocean {
    --v3-ink: #082F3A; --v3-ink-2: #164E5C; --v3-muted: #4E6B75; --v3-body: #3E5A64;
    --v3-line: #DCEBF0; --v3-ground: #F2F9FB; --v3-lav: #E0F4F8;
    --v3-indigo: #0E7490; --v3-accent-rgb: 14, 116, 144; --v3-accent-on-dark: #67E8F9;
    --v3-navy: #062A36; --v3-navy-2: #0B4254;
    --v3-grad: linear-gradient(135deg, #0369A1 0%, #0E7490 55%, #0F766E 100%);
    --v3-text-grad: linear-gradient(90deg, #0369A1 0%, #0F766E 100%);
    --v3-glow2: rgba(3, 105, 161, .18);
    --v3-hero-a: #F7FDFF; --v3-hero-b: #E3F4F8; --v3-hero-c: #DDF0F7;
}
.v3.v3-theme-ocean .v3-slide { --base: #E6F5F9; --base2: #DFF1EE; --glow1: rgba(14, 116, 144, .32); --glow2: rgba(3, 105, 161, .26); --ring1: rgba(14, 116, 144, .6); --ring2: rgba(15, 118, 110, .5); }

.v3.v3-theme-warm {
    --v3-ink: #2A1A12; --v3-ink-2: #4A3226; --v3-muted: #7A6254; --v3-body: #5A463B;
    --v3-line: #EFE3D8; --v3-ground: #FBF8F4; --v3-lav: #FBEDE3;
    --v3-indigo: #9A3412; --v3-accent-rgb: 154, 52, 18; --v3-accent-on-dark: #FDBA74;
    --v3-navy: #2A1A12; --v3-navy-2: #4A2A1A;
    --v3-grad: linear-gradient(135deg, #B45309 0%, #9A3412 55%, #7C2D12 100%);
    --v3-text-grad: linear-gradient(90deg, #B45309 0%, #9A3412 100%);
    --v3-glow2: rgba(180, 83, 9, .16);
    --v3-hero-a: #FFFCF8; --v3-hero-b: #FBEFE4; --v3-hero-c: #F7E6D6;
}
.v3.v3-theme-warm .v3-slide { --base: #FBF1E7; --base2: #F6E7DA; --glow1: rgba(180, 83, 9, .30); --glow2: rgba(154, 52, 18, .22); --ring1: rgba(180, 83, 9, .6); --ring2: rgba(124, 45, 18, .45); }

/* Mobile Heaven Signature: gold on black, or gold on maroon. Gold is a
   surface with dark text on it (--v3-on-accent); as text on white it uses
   the deeper #8A6414, which keeps body-size contrast above 4.5:1. */
.v3.v3-theme-signature {
    --v3-ink: #17130C; --v3-ink-2: #3A3222; --v3-muted: #6E6453; --v3-body: #4E4535;
    --v3-line: #ECE5D6; --v3-ground: #FAF7F0; --v3-lav: #F6EEDB;
    --v3-indigo: #8A6414; --v3-accent-rgb: 184, 137, 43; --v3-accent-on-dark: #E3C46A;
    --v3-on-accent: #1A1406;
    --v3-navy: #0E0D0B; --v3-navy-2: #231C11; --v3-hdr-bg: rgba(14, 13, 11, .94);
    --v3-grad: linear-gradient(135deg, #EACB72 0%, #C9A23A 50%, #A67C22 100%);
    --v3-text-grad: linear-gradient(90deg, #8A6414 0%, #B8892B 100%);
    --v3-text-grad-dark: linear-gradient(90deg, #F3D98B 0%, #C9A23A 100%);
    --v3-glow2: rgba(201, 162, 58, .22);
}
.v3.v3-theme-signature.v3-sig-maroon_gold {
    --v3-ink: #2A0E14; --v3-ink-2: #4A2229; --v3-muted: #735A5E; --v3-body: #57393F;
    --v3-line: #EEDFD9; --v3-ground: #FBF6F2; --v3-lav: #F8EBE4;
    --v3-navy: #4A0E1C; --v3-navy-2: #6B1426; --v3-hdr-bg: rgba(74, 14, 28, .95);
}

/* ---------- dark chrome (Midnight, Signature) ---------- */
.v3.v3-chrome-dark .v3-hdr {
    --v3-ink: #FFFFFF; --v3-ink-2: rgba(255, 255, 255, .84); --v3-muted: rgba(255, 255, 255, .62);
    --v3-lav: rgba(255, 255, 255, .08); --v3-indigo: var(--v3-accent-on-dark);
    border-bottom-color: rgba(255, 255, 255, .08);
}
.v3.v3-chrome-dark .v3-search { --v3-ink: #0E1238; --v3-line: #E5E7F2; }
.v3.v3-chrome-dark .v3-phero:not(.v3-phero--cover) {
    --v3-ink: #FFFFFF; --v3-body: rgba(255, 255, 255, .8);
    background:
        radial-gradient(50% 80% at 84% 26%, rgba(var(--v3-accent-rgb), .38) 0%, transparent 65%),
        radial-gradient(40% 70% at 100% 100%, var(--v3-glow2) 0%, transparent 70%),
        linear-gradient(120deg, var(--v3-navy) 0%, var(--v3-navy-2) 100%);
    border-bottom: 0;
}
.v3.v3-chrome-dark .v3-phero .v3-eyebrow { color: var(--v3-accent-on-dark); }
.v3.v3-chrome-dark .v3-phero .btn-outline-light,
.v3.v3-chrome-dark .v3-phero .btn-outline-dark { --bs-btn-color: #0E1238; }
.v3.v3-chrome-dark .v3-slide__bg {
    background:
        radial-gradient(55% 75% at 76% 40%, rgba(var(--v3-accent-rgb), .42) 0%, transparent 62%),
        radial-gradient(40% 60% at 98% 96%, var(--v3-glow2) 0%, transparent 66%),
        linear-gradient(115deg, var(--v3-navy) 0%, var(--v3-navy-2) 100%);
}
.v3.v3-chrome-dark .v3-slide:not(.v3-slide--image) {
    --v3-ink: #FFFFFF; --v3-ink-2: rgba(255, 255, 255, .86); --v3-text-grad: var(--v3-text-grad-dark);
    --ring1: rgba(var(--v3-accent-rgb), .7); --ring2: rgba(255, 255, 255, .25);
}
.v3.v3-chrome-dark .v3-slide:not(.v3-slide--image) .v3-lead { color: rgba(255, 255, 255, .8); }
.v3.v3-chrome-dark .v3-slide:not(.v3-slide--image) .v3-eyebrow { color: var(--v3-accent-on-dark); }
.v3.v3-chrome-dark .v3-slide .v3-panel { --v3-ink: #0E1238; --v3-ink-2: #2A2F55; }

@media (prefers-reduced-motion: reduce) {
    .v3 .btn-accent, .v3 main .btn-primary { transition: none; }
    .v3 .btn-accent:hover, .v3 main .btn-primary:hover { transform: none; }
}

/* ==========================================================================
   Liquid Glass pages (owner, 2026-09-22): Catalogue, Accessories, About and
   Contact. <body class="v3-glass-page">. Every colour comes from the active
   theme's tokens, so each theme restyles these pages too.
   ========================================================================== */

.v3 {
    --v3-glass: rgba(255, 255, 255, .72);
    --v3-glass-strong: rgba(255, 255, 255, .92);
    --v3-glass-border: rgba(255, 255, 255, .88);
    --v3-blur: 16px;
    --v3-page-bg:
        radial-gradient(55% 45% at 0% 0%, rgba(var(--v3-accent-rgb), .12) 0%, transparent 60%),
        radial-gradient(45% 40% at 100% 18%, var(--v3-glow2) 0%, transparent 62%),
        radial-gradient(50% 40% at 50% 100%, rgba(var(--v3-accent-rgb), .08) 0%, transparent 60%),
        var(--v3-ground);
}

.v3.v3-glass-page { background: var(--v3-page-bg); }
.v3.v3-glass-page main .section-white,
.v3.v3-glass-page main .section-cream,
.v3.v3-glass-page main .trust-band { background: transparent; }

.site-public.v3.v3-glass-page main .card,
.v3 .v3-glass {
    background: var(--v3-glass);
    border: 1px solid var(--v3-glass-border);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 40px -28px rgba(var(--v3-accent-rgb), .45);
    -webkit-backdrop-filter: saturate(160%) blur(var(--v3-blur));
    backdrop-filter: saturate(160%) blur(var(--v3-blur));
}
.v3.v3-glass-page main .trust-band__item {
    background: var(--v3-glass); border-color: var(--v3-glass-border);
    -webkit-backdrop-filter: blur(var(--v3-blur)); backdrop-filter: blur(var(--v3-blur));
}

/* Product cards: lift, stronger glass, a soft accent edge, image float. */
.site-public.v3.v3-glass-page main .card { transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease; }
.site-public.v3.v3-glass-page main .card:hover,
.site-public.v3.v3-glass-page main a:hover > .card,
.site-public.v3.v3-glass-page main .card:focus-within {
    transform: translateY(-4px);
    background: var(--v3-glass-strong);
    border-color: rgba(var(--v3-accent-rgb), .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 26px 50px -30px rgba(var(--v3-accent-rgb), .6);
}
.site-public.v3.v3-glass-page main .card .device-photo {
    margin: 10px 10px 0; border-radius: 18px; overflow: hidden;
    background: linear-gradient(160deg, var(--v3-glass-strong), var(--v3-lav));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 24px -18px rgba(14, 18, 56, .4);
}
.site-public.v3.v3-glass-page main .card .device-photo img { transition: transform .3s ease; }
.site-public.v3.v3-glass-page main .card:hover .device-photo img,
.site-public.v3.v3-glass-page main a:hover > .card .device-photo img { transform: scale(1.045); }
.site-public.v3.v3-glass-page main .card:hover .btn-outline-primary { border-color: var(--v3-indigo); color: var(--v3-indigo); }

/* Search and filter surface. */
.v3 .catalogue-search {
    margin-inline: 0; padding: 12px 6px; border-radius: 20px;
    background: var(--v3-glass); border: 1px solid var(--v3-glass-border);
    box-shadow: 0 14px 34px -26px rgba(var(--v3-accent-rgb), .5);
    -webkit-backdrop-filter: blur(var(--v3-blur)); backdrop-filter: blur(var(--v3-blur));
}
.v3 .brand-chip {
    border-radius: 999px; background: var(--v3-glass); border: 1px solid var(--v3-glass-border);
    color: var(--v3-ink-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.v3 .brand-chip:hover { border-color: rgba(var(--v3-accent-rgb), .45); color: var(--v3-indigo); }
.v3 .brand-chip--on,
.v3 .brand-chip--on:hover { background: var(--v3-grad); border-color: transparent; color: var(--v3-on-accent); }

/* ---------- opening hours and holidays (Contact, About) ---------- */
.v3 .v3-hours-card { padding: 20px 22px; }
.v3 .v3-hours-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 10px; }
.v3 .v3-hours-card__title { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-indigo); }
.v3 .v3-open-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 700; background: var(--v3-lav); color: var(--v3-ink-2);
}
.v3 .v3-open-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; }
.v3 .v3-open-pill.is-open { background: #E6F6EE; color: #0F5132; }
.v3 .v3-open-pill.is-open::before { background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.v3 .v3-week { width: 100%; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v3 .v3-week th,
.v3 .v3-week td { padding: 7px 0; border-bottom: 1px solid var(--v3-line); font-size: 15px; }
.v3 .v3-week th { font-weight: 600; color: var(--v3-ink-2); }
.v3 .v3-week td { text-align: right; font-weight: 700; color: var(--v3-ink); }
.v3 .v3-week tr:last-child th,
.v3 .v3-week tr:last-child td { border-bottom: 0; }
.v3 .v3-week tr.is-today th,
.v3 .v3-week tr.is-today td { color: var(--v3-indigo); }
.v3 .v3-week td.is-closed { color: var(--v3-muted); font-weight: 600; }
.v3 .v3-today-tag { margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.v3 .v3-hours-note { margin: 10px 0 0; font-size: 13.5px; color: var(--v3-muted); }
.v3 .v3-closures__title { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--v3-line); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--v3-muted); }
.v3 .v3-closures { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.v3 .v3-closures li { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 10px; align-items: baseline; font-size: 14px; }
.v3 .v3-closures time { font-weight: 800; color: var(--v3-ink); }
.v3 .v3-closures span { color: var(--v3-ink-2); }
.v3 .v3-closures b { font-weight: 700; color: var(--v3-ink); white-space: nowrap; }
.v3 .v3-closures small { grid-column: 2 / -1; color: var(--v3-muted); }

/* ---------- cookie consent ---------- */
.v3 .v3-cookie {
    position: fixed; z-index: 1050; left: 20px; bottom: 20px; width: min(440px, calc(100% - 40px));
    padding: 18px 18px 16px; border-radius: 22px;
    background: var(--v3-glass-strong); border: 1px solid var(--v3-glass-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 30px 60px -30px rgba(14, 18, 56, .55);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
    font-family: var(--v3-font); color: var(--v3-ink);
}
.v3 .v3-cookie[hidden] { display: none; }
.v3 .v3-cookie__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--v3-ink); }
.v3 .v3-cookie__msg { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--v3-body); }
.v3 .v3-cookie__msg a { color: var(--v3-indigo); }
.v3 .v3-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.v3 .v3-cookie__actions .v3-btn { flex: 1 1 140px; min-height: 44px; }
.v3 .v3-cookie :focus-visible { outline: 3px solid rgba(var(--v3-accent-rgb), .45); outline-offset: 2px; }
.v3 .v3-ftr .v3-brand__sub { color: #A7AAD0; }

@media (max-width: 560px) {
    /* Clear of the call and WhatsApp buttons at the bottom right. */
    .v3 .v3-cookie { left: 12px; bottom: 12px; width: calc(100% - 96px); padding: 14px; }
}

/* ---------- Crystal Glass and Frosted Ice (2026-09-22) ---------- */
.v3.v3-theme-crystal {
    --v3-ink: #121638; --v3-ink-2: #2B3163; --v3-muted: #5A6189; --v3-body: #444B78;
    --v3-line: #E3E7FA; --v3-ground: #F4F6FF; --v3-lav: #ECEFFF;
    --v3-indigo: #4052D6; --v3-accent-rgb: 91, 108, 246; --v3-accent-on-dark: #B9C3FF;
    --v3-grad: linear-gradient(135deg, #4F7BFF 0%, #6D6AF6 55%, #8B5CF6 100%);
    --v3-text-grad: linear-gradient(90deg, #3E6BFF 0%, #7C5CF6 100%);
    --v3-glow2: rgba(139, 92, 246, .20);
    --v3-hero-a: #FBFCFF; --v3-hero-b: #EEF0FF; --v3-hero-c: #E7EEFF;
    --v3-glass: rgba(255, 255, 255, .55); --v3-glass-strong: rgba(255, 255, 255, .82); --v3-blur: 20px;
}
.v3.v3-theme-crystal .v3-slide { --base: #F1F3FF; --base2: #ECEBFF; --glow1: rgba(91, 140, 255, .36); --glow2: rgba(139, 92, 246, .30); --ring1: rgba(91, 140, 255, .65); --ring2: rgba(139, 92, 246, .5); }

.v3.v3-theme-frost {
    --v3-ink: #0B2536; --v3-ink-2: #1B3F55; --v3-muted: #52707F; --v3-body: #3A5A6A;
    --v3-line: #DDEEF6; --v3-ground: #F4FAFE; --v3-lav: #E3F3FB;
    --v3-indigo: #0B6FA4; --v3-accent-rgb: 11, 143, 208; --v3-accent-on-dark: #7DD3FC;
    --v3-grad: linear-gradient(135deg, #0B8FD0 0%, #0B6FA4 55%, #075985 100%);
    --v3-text-grad: linear-gradient(90deg, #0B8FD0 0%, #075985 100%);
    --v3-glow2: rgba(56, 189, 248, .22);
    --v3-hero-a: #FFFFFF; --v3-hero-b: #EAF6FC; --v3-hero-c: #E0F2FE;
    --v3-glass: rgba(255, 255, 255, .6); --v3-glass-strong: rgba(255, 255, 255, .86); --v3-blur: 18px;
}
.v3.v3-theme-frost .v3-slide { --base: #EEF8FD; --base2: #E6F4FB; --glow1: rgba(56, 189, 248, .32); --glow2: rgba(11, 143, 208, .24); --ring1: rgba(56, 189, 248, .6); --ring2: rgba(11, 111, 164, .45); }

@media (prefers-reduced-motion: reduce) {
    .site-public.v3.v3-glass-page main .card,
    .site-public.v3.v3-glass-page main .card .device-photo img { transition: none; }
    .site-public.v3.v3-glass-page main .card:hover,
    .site-public.v3.v3-glass-page main a:hover > .card,
    .site-public.v3.v3-glass-page main .card:focus-within { transform: none; }
    .site-public.v3.v3-glass-page main .card:hover .device-photo img { transform: none; }
}

/* About and Contact details on glass pages. */
.v3.v3-glass-page .value-tile {
    height: 100%; padding: 14px 16px; border-radius: 18px;
    background: var(--v3-glass); border: 1px solid var(--v3-glass-border);
    -webkit-backdrop-filter: blur(var(--v3-blur)); backdrop-filter: blur(var(--v3-blur));
}
.v3 .value-icon { color: var(--v3-indigo); background: var(--v3-lav); border-radius: 12px; }
.v3.v3-glass-page .site-figure,
.v3.v3-glass-page .inspect-media img,
.v3.v3-glass-page .contact-faces__item img { border-radius: 22px; box-shadow: 0 22px 44px -30px rgba(14, 18, 56, .45); }
.v3.v3-glass-page .v3-contact-list .v3-ico-wrap { background: var(--v3-glass-strong); border: 1px solid var(--v3-glass-border); }

/* ---------- header on one line (owner, 2026-09-22) ----------
   The longer tag line pushed "Buy Phones" and "Call or WhatsApp" onto a
   second line. Nothing in the header wraps now: a slightly wider header,
   a smaller tag line and tighter nav links, stepping down as the screen
   narrows until the menu button takes over at 992px. */
.v3 .v3-hdr .v3-wrap { width: min(1320px, 100% - 40px); }
.v3 .v3-hdr__in { gap: 18px; }
.v3 .v3-brand__sub { font-size: 10px; letter-spacing: .03em; white-space: nowrap; }
.v3 .v3-nav__link { padding: 10px 10px; font-size: 14px; white-space: nowrap; }
.v3 .v3-hdr__tools { gap: 10px; }
.v3 .v3-hdr__calltxt b,
.v3 .v3-hdr__calltxt small { white-space: nowrap; }
.v3 .v3-hdr .v3-hdr__sell { white-space: nowrap; }

@media (max-width: 1280px) {
    .v3 .v3-hdr__calltxt small { display: none; }
    .v3 .v3-nav__link { padding: 10px 8px; }
}
@media (max-width: 1200px) {
    .v3 .v3-hdr__calltxt { display: none; }
    .v3 .v3-hdr__in { gap: 14px; }
}
@media (max-width: 1120px) {
    .v3 .v3-nav__link { padding: 10px 7px; font-size: 13.5px; }
    .v3 .v3-brand__sub { font-size: 9.5px; letter-spacing: .02em; }
    .v3 .v3-hdr .v3-hdr__sell { padding: 0 16px; font-size: 14px; }
}
@media (max-width: 1040px) {
    /* Too narrow for the full nav on one line: the menu button takes over. */
    .v3 .v3-nav,
    .v3 .v3-hdr__call { display: none; }
    .v3 .v3-hdr__tools { margin-left: auto; }
    .v3 .v3-hdr__menu { display: inline-grid; }
}

/* Footer credit (owner, 2026-09-22): "© 2026 [logo] Prabhabi", a round
   favicon-size logo and the Prabhabi brand orange. The link stays inline so
   "Prabhabi" sits on the same baseline as the rest of the line; the logo is
   centred on the text. */
.v3 .v3-ftr .v3-ftr__maker {
    color: #f18c06; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.v3 .v3-ftr .v3-ftr__maker:hover,
.v3 .v3-ftr .v3-ftr__maker:focus-visible { color: #f18c06; text-decoration: underline; }
.v3 .v3-ftr .v3-ftr__maker img {
    display: inline-block; width: 20px; height: 20px; margin: 0 5px 0 1px;
    vertical-align: middle; position: relative; top: -1px; border-radius: 50%;
}

/* Valuation page H1 (SEO, 2026-09-22): a slim label under the wizard's top
   bar says what the page is. The first step's heading became an h2 and keeps
   exactly the size it had as the h1. */
.site-public .qv__shell .qv__h1 {
    margin: 0; padding: .55rem 1.1rem;
    font-family: var(--v3-font, inherit); font-size: .74rem; line-height: 1.3; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--qv-blue-dark); background: var(--qv-blue-wash); border-bottom: 1px solid var(--qv-line);
}
@media (min-width: 768px) { .site-public .qv__shell .qv__h1 { padding: .55rem 1.5rem; } }
@media (min-width: 1200px) { .site-public .qv__shell .qv__h1 { padding: .55rem 2rem; } }
@media (max-width: 575.98px) { .site-public .qv__shell .qv__h1 { padding: .5rem .9rem; } }
.site-public .qv__panel--intro h2.qv__title { font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.06; font-weight: 700; }

/* ================= ABOUT PAGE (owner, 2026-09-25) =================
   The carousel is the homepage's, not a second one: site-v3.js drives it
   through data-v3-carousel / data-v3-slide / data-v3-dot, so it advances
   itself, pauses on hover and answers the arrow keys exactly as the front
   page does. The thumbnails are the dots. Every colour is a theme token,
   so the page follows whichever website theme is active. */
.v3 .ab-eyebrow { color: var(--v3-indigo, #2563EB); letter-spacing: .08em; }
.v3 .ab-point { display: flex; align-items: flex-start; gap: 10px; }
.v3 .ab-point__ico {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px;
    background: var(--v3-glass, rgba(255,255,255,.6)); border: 1px solid var(--v3-line, #E2E8F0);
    color: var(--v3-indigo, #2563EB);
}

.v3 .ab-carousel__stage {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--v3-radius, 20px); overflow: hidden;
    border: 1px solid var(--v3-line, #E2E8F0); background: var(--v3-glass, rgba(255,255,255,.6));
    box-shadow: var(--v3-shadow-md, 0 18px 40px rgba(11,18,36,.10));
}
.v3 .ab-shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease; }
.v3 .ab-shot.is-active { opacity: 1; visibility: visible; }
.v3 .ab-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 .ab-shot__cap {
    position: absolute; left: 14px; bottom: 14px; right: 14px; width: fit-content; max-width: calc(100% - 28px);
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px;
    font-size: .82rem; font-weight: 600; color: var(--v3-ink, #0B1224);
    background: var(--v3-glass-strong, rgba(255,255,255,.9)); border: 1px solid var(--v3-glass-border, rgba(255,255,255,.7));
    backdrop-filter: blur(var(--v3-blur, 10px));
}
.v3 .ab-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; padding: 0;
    color: var(--v3-ink, #0B1224); background: var(--v3-glass-strong, rgba(255,255,255,.92));
    border: 1px solid var(--v3-glass-border, rgba(255,255,255,.7)); box-shadow: var(--v3-shadow-sm, 0 6px 16px rgba(11,18,36,.10));
    cursor: pointer; transition: transform .15s ease;
}
.v3 .ab-arrow svg { width: 20px; height: 20px; }
.v3 .ab-arrow--prev { left: 12px; }
.v3 .ab-arrow--next { right: 12px; }
.v3 .ab-arrow:hover { transform: translateY(-50%) scale(1.06); }
.v3 .ab-arrow:focus-visible { outline: 2px solid var(--v3-indigo, #2563EB); outline-offset: 2px; }

.v3 .ab-carousel__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.v3 .ab-thumb {
    position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer;
    border-radius: 12px; border: 2px solid transparent; opacity: .7; background: none;
    transition: opacity .15s ease, border-color .15s ease;
}
.v3 .ab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 .ab-thumb__n {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px;
    border-radius: 999px; font-size: .7rem; font-weight: 700;
    background: var(--v3-glass-strong, rgba(255,255,255,.92)); color: var(--v3-ink, #0B1224);
}
.v3 .ab-thumb:hover { opacity: 1; }
.v3 .ab-thumb.is-active { opacity: 1; border-color: var(--v3-indigo, #2563EB); }

.v3 .ab-tile {
    padding: 16px; border-radius: var(--v3-radius, 20px);
    background: var(--v3-glass, rgba(255,255,255,.6)); border: 1px solid var(--v3-line, #E2E8F0);
}
.v3 .ab-tile__ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-bottom: 10px;
    background: var(--v3-lav, #E8F0FE); color: var(--v3-indigo, #2563EB);
}

.v3 .ab-visit { position: relative; border-radius: var(--v3-radius, 20px); overflow: hidden; border: 1px solid var(--v3-line, #E2E8F0); }
.v3 .ab-visit img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.v3 .ab-visit__card {
    position: absolute; left: 14px; bottom: 14px; padding: 10px 14px; border-radius: 14px; max-width: calc(100% - 28px);
    background: var(--v3-glass-strong, rgba(255,255,255,.9)); border: 1px solid var(--v3-glass-border, rgba(255,255,255,.7));
    color: var(--v3-ink, #0B1224); backdrop-filter: blur(var(--v3-blur, 10px));
}

@media (max-width: 575.98px) {
    /* A phone gets a taller frame, so a portrait photograph is not cropped
       to a letterbox, and smaller arrows out of the thumb's way. */
    .v3 .ab-carousel__stage { aspect-ratio: 3 / 4; }
    .v3 .ab-arrow { width: 34px; height: 34px; }
    .v3 .ab-carousel__rail { gap: 6px; }
}

/* The About hero: the homepage's shell, with photographs in place of the
   stage (owner, 2026-09-25). Copy left, carousel right, arrows at the
   edges, thumbnails doubling as the dots. */
.v3 .ab-hero { padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 36px); }
.v3 .ab-hero__grid { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; grid-template-columns: 1fr; }
.v3 .ab-hero__copy .v3-lead { max-width: 56ch; }
.v3 .ab-hero .v3-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.v3 .ab-strip { margin-top: 4px; }
@media (min-width: 992px) {
    .v3 .ab-hero__grid { grid-template-columns: 1.02fr .98fr; }
}