/* ================================================================
   VHG GLOBAL STYLESHEET — Van Haren Group Child Theme
   All custom styles for the VHG storefront (dev.vanharen.pub)
   Color palette: Navy (#0f224c) + Teal (#0d9488) + Slate greys
   ================================================================ */

/* ================================================================
   GLOBAL — Full-width page layout (all pages, desktop)
   Removes 1440px max-width from all layout elements so everything
   fills the browser width edge-to-edge.
   ================================================================ */
@media screen and (min-width: 768px) {
    /* Page content area */
    .page-main,
    .breadcrumbs,
    .top-container,
    .page-wrapper > .widget,
    .page-wrapper > .page-bottom {
        max-width: none !important;
    }
    /* Header — top row (logo/search/icons) and panel only — full width like www2 */
    /* NOTE: .header.bottom and .navigation intentionally NOT overridden
       — they stay at max-width:1440px (narrower menu bar, matching www2) */
    .header.content,
    .page-header .header.panel {
        max-width: none !important;
    }
}

/* ================================================================
   GLOBAL — Prevent horizontal overflow / drag on all breakpoints
   ================================================================ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ================================================================
   GLOBAL — Header (all pages)
   Main header: dark slate gradient background (logo + search area)
   Menu/nav bar: white background
   To change header color: edit the gradient on .page-header below
   ================================================================ */
/* Main header background (logo + search bar area) */
.page-header {
    background: linear-gradient(to right, #0f172a, #1e293b, #0f172a) !important;
}
.page-header .header.wrapper:not(.last) {
    background: transparent !important;
}
/* Menu/nav bar: white */
.page-header .header.wrapper.last {
    background: #ffffff !important;
}
/* Fix: navpro "home-expanded" + "persistent" always-open bug on desktop.
   CSS forces hidden; :hover/:focus-within (higher specificity) restores on interaction. */
.navpro li.home-expanded > .navpro-dropdown,
.navpro-dropdown.persistent {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: rotateX(20deg) !important;
}
.navpro li.home-expanded:hover > .navpro-dropdown,
.navpro li.home-expanded:focus-within > .navpro-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: none !important;
}

/* ================================================================
   GLOBAL — Search Bar (all pages)
   White rounded input, teal border on focus, search icon on left.
   To change focus color: edit border-color on .amsearch-input:focus below
   ================================================================ */

/* Center the search bar inside the Argento configurable header's middle flex column. */
.page-header.configurable .flex-grow-1.flex-col-left {
    justify-content: center !important;
}
/* Search wrapper: fills the column up to 780px (Argento configurable header only).
   Scoped to .configurable to avoid affecting Amasty XSearch full-width sites. */
.page-header.configurable .amsearch-wrapper-block {
    float: none !important;
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 780px !important;
}
/* Prevent KO-injected inline width on form-block from overflowing wrapper */
.page-header.configurable .amsearch-form-block {
    width: 100% !important;
}

/* Position context for absolute children */
.amsearch-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center;
    width: 100%;
}

/* The input field */
.amsearch-input-wrapper .amsearch-input,
.amsearch-input-wrapper.-typed .amsearch-input {
    width: 100% !important;
    background: rgba(255,255,255,0.93) !important;
    border: 2px solid rgba(255,255,255,0.18) !important;
    border-radius: 12px !important;
    padding: 13px 44px 13px 50px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}
.amsearch-input-wrapper .amsearch-input::placeholder {
    color: #94a3b8 !important;
}
.amsearch-input-wrapper .amsearch-input:focus {
    background: #ffffff !important;
    border-color: #0d9488 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 0 0 4px rgba(13,148,136,0.14) !important;
    outline: none !important;
}

/* Search (loupe) submit icon — pinned to left inside input.
   :not(.-loupe-trigger) excludes the separate trigger button (same -loupe class) */
.amsearch-button.-loupe:not(.-loupe-trigger),
.amsearch-input-wrapper.-typed .amsearch-button.-loupe:not(.-loupe-trigger) {
    position: absolute !important;
    left: 15px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-size: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: none !important;
    z-index: 2;
}
/* Icon turns teal on focus */
.amsearch-input-wrapper:focus-within .amsearch-button.-loupe:not(.-loupe-trigger) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
}
/* Loupe trigger button — mobile search icon in dark header */
.amsearch-button.-loupe-trigger {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 44px !important;
    height: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-size: 22px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: none !important;
    float: none !important;
    margin: 0 4px !important;
}

/* ================================================================
   MOBILE — Search bar overrides (max 767px)
   ================================================================ */
@media (max-width: 767px) {
    /* Reset desktop flex-grow/width on the wrapper; let mobile layout decide */
    .page-header .amsearch-wrapper-block {
        flex-grow: 0 !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
    }
    /* Search form: 60% width on mobile */
    .page-header .amsearch-form-block {
        width: 60% !important;
    }
}

/* Clear (X) button — right side */
.amsearch-button.-close {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;
    background-color: rgba(15,23,42,0.07) !important;
    border-radius: 6px !important;
    background-size: 10px !important;
    background-position: center !important;
    transition: background-color 0.15s ease !important;
}
.amsearch-button.-close:hover {
    background-color: rgba(15,23,42,0.14) !important;
    filter: none !important;
}


/* ================================================================
   GLOBAL — Footer (all pages)
   Same dark slate gradient as header; all text/links white
   ================================================================ */
.page-footer {
    background: linear-gradient(to right, #0f172a, #1e293b, #0f172a) !important;
    color: #cbd5e1 !important;
}
/* All footer sections inherit dark bg */
.page-footer .footer-toolbar,
.page-footer .footer.content,
.page-footer .footer-toolbar-bottom {
    background: transparent !important;
}
/* Headings */
.page-footer .h4,
.page-footer strong,
.page-footer .title {
    color: #ffffff !important;
}
/* Links */
.page-footer a,
.page-footer .footer.links a,
.page-footer .links a {
    color: #000 !important;
    text-decoration: none;
}
.page-footer a:hover,
.page-footer .footer.links a:hover,
.page-footer .links a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(245, 184, 0, 0.6), 0 0 20px rgba(245, 184, 0, 0.3) !important;
}
/* Contact bar text */
.page-footer .footer-contacts .text {
    color: #cbd5e1 !important;
}
/* Copyright */
.page-footer .copyright,
.page-footer .copyright span {
    color: #fff !important;
}
/* Footer logo img sizing */
.page-footer .footer-logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* --- Page layout override --- */
.cms-vhg_home .page-main,
.cms-vhg_home .page-wrapper > .page-main {
    max-width: 100%;
    padding: 0;
}
.cms-vhg_home .columns .column.main {
    padding: 0;
}
.cms-vhg_home .page-title-wrapper {
    display: none;
}

/* --- Container --- */
.vhg-container {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
    box-sizing: border-box;
}

/* --- Section base --- */
.vhg-section {
    padding-top: 96px;
    padding-bottom: 96px;
    box-sizing: border-box;
}

/* --- Section headers --- */
.vhg-section-header {
    margin-bottom: 56px;
}
.vhg-section-header--center {
    text-align: center;
}
.vhg-section-header--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.vhg-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    line-height: 1.2;
}
.vhg-section-subtitle {
    font-size: 17px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}
.vhg-section-header--center .vhg-section-subtitle {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Link button (header navy text, appears top-right of sections) --- */
.vhg-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.vhg-link-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
    text-decoration: none;
}

/* --- Primary buttons --- */
.vhg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 40px;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.vhg-btn--teal {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.vhg-btn--teal:hover {
    background: #f1f5f9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
    transform: translateY(-1px);
    color: #0f172a;
    text-decoration: none;
}
.vhg-btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(10px);
}
.vhg-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
    text-decoration: none;
}

/* ================================================================
   GLOBAL — Language & Currency Switcher (header top bar)
   Pill-style trigger buttons, dropdown panels with flag/symbol icons.
   To change dropdown style: edit .switcher-dropdown below
   ================================================================ */
.switcher-language .switcher-label,
.switcher-currency .switcher-label { display: none !important; }

/* Remove Argento's yellow icon-font arrow on the toggle trigger */
.switcher-language .options .action.toggle::after,
.switcher-language .options .action.toggle.active::after,
.switcher-currency .options .action.toggle::after,
.switcher-currency .options .action.toggle.active::after { display: none !important; content: none !important; }

/* Trigger buttons */
.switcher-language .switcher-trigger,
.switcher-currency .switcher-trigger {
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 6px 10px !important;
    color: #475569;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.switcher-language .switcher-trigger:hover,
.switcher-currency .switcher-trigger:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
    text-decoration: none !important;
}
.switcher-language .switcher-trigger strong,
.switcher-currency .switcher-trigger strong {
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    color: inherit;
}
.vhg-sw-icon {
    color: #94a3b8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.switcher-language .switcher-trigger:hover .vhg-sw-icon,
.switcher-currency .switcher-trigger:hover .vhg-sw-icon { color: #64748b; }
.vhg-sw-flag { font-size: 15px; line-height: 1; }
.vhg-sw-chevron {
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.switcher-options._active .vhg-sw-chevron { transform: rotate(180deg); }
.vhg-sw-curr-sym {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    width: 15px;
    text-align: center;
    transition: color 0.2s ease;
}
.switcher-currency .switcher-trigger:hover .vhg-sw-curr-sym { color: #64748b; }

/* Dropdown panels */
.switcher-language .dropdown.switcher-dropdown,
.switcher-currency .dropdown.switcher-dropdown {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(15,23,42,0.15), 0 4px 12px rgba(15,23,42,0.08) !important;
    border: 1px solid rgba(226,232,240,0.9) !important;
    padding: 6px !important;
    min-width: 168px;
    overflow: hidden;
    right: 0;
}
.switcher-currency .dropdown.switcher-dropdown { min-width: 192px; }

/* Dropdown items */
.switcher-language .switcher-option,
.switcher-currency .switcher-option { list-style: none; }
.switcher-language .switcher-option a,
.switcher-currency .switcher-option a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 11px !important;
    border-radius: 8px;
    color: #334155 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.switcher-language .switcher-option a:hover,
.switcher-currency .switcher-option a:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    text-decoration: none !important;
}
/* Currency symbol box (in dropdown) */
.vhg-sw-sym-box {
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
}
.vhg-sw-info { display: flex; flex-direction: column; gap: 1px; }
.vhg-sw-label { font-size: 13px; font-weight: 600; color: #0f172a; }
.vhg-sw-desc { font-size: 11px; color: #64748b; }

/* ================================================================
   SECTION 1 — HERO SLIDER
   Cross-fade slider wrapping all 4 hero versions
   ================================================================ */

/* Slider container — inactive slides are absolute, active drives height */
.vhg-hero-slider {
    position: relative;
    overflow: hidden;
    transition: height 0.5s ease;
    background: #0f172a; /* fills any gap when active slide is shorter than locked height */
}
.vhg-hero-slide {
    position: absolute;
    top: 0; left: 0; right: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.vhg-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    min-height: 100%; /* stretch to fill the JS-locked slider height */
}
/* Ensure the inner background divs also fill the full height */
.vhg-hero-slide--1 .vhg-hero-section,
.vhg-hero-slide--4 .vhg-slide4 { min-height: inherit; }
/* Dot navigation */
.vhg-hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.vhg-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
.vhg-hero-dot.is-active {
    background: rgba(255,255,255,0.9);
    width: 30px;
}
.vhg-hero-dots--dark .vhg-hero-dot { background: rgba(15,23,42,0.22); }
.vhg-hero-dots--dark .vhg-hero-dot.is-active { background: rgba(15,23,42,0.65); width: 30px; }

/* ---- SLIDE 2: Split Layout with Stats (dark) ---- */
.vhg-slide2 {
    background: linear-gradient(to right, #0f172a, #1e293b, #0f172a);
    padding: 80px 0 100px;
}
.vhg-slide2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.vhg-slide2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
}
.vhg-slide2-badge svg { width: 15px; height: 15px; stroke: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vhg-slide2-title {
    font-size: 52px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.vhg-slide2-gradient {
    display: block;
    background: linear-gradient(to right, #e2e8f0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 8px;
}
.vhg-slide2-subtitle {
    font-size: 18px;
    color: #cbd5e1;
    margin: 0 0 32px;
    line-height: 1.7;
}
.vhg-slide2-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.vhg-slide2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #0f172a;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.vhg-slide2-btn-primary:hover { background: #f1f5f9; transform: translateY(-1px); text-decoration: none; color: #0f172a; }
.vhg-slide2-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.vhg-slide2-btn-secondary:hover { background: rgba(255,255,255,0.15); text-decoration: none; color: #fff; }
.vhg-slide2-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.vhg-slide2-stat {
    text-align: center;
    padding: 18px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}
.vhg-slide2-stat__num { font-size: 28px; font-weight: 800; color: #ffffff; margin-bottom: 4px; }
.vhg-slide2-stat__label { font-size: 12px; color: #cbd5e1; font-weight: 500; }
/* Right panel */
.vhg-slide2-panel {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 25px 50px rgba(15,23,42,0.2);
    border: 1px solid rgba(255,255,255,0.06);
}
.vhg-slide2-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 12px;
}
.vhg-slide2-feature:last-child { margin-bottom: 0; }
.vhg-slide2-feature__icon {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.10);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vhg-slide2-feature__icon svg { width: 22px; height: 22px; stroke: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vhg-slide2-feature__title { color: #ffffff; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.vhg-slide2-feature__text { color: #94a3b8; font-size: 13px; }

/* ---- SLIDE 3: Centered + Category Pills (dark) ---- */
.vhg-slide3 {
    background: linear-gradient(to bottom, #0f172a, #1e293b, #0f172a);
    padding: 72px 0 88px;
    position: relative;
    overflow: hidden;
}
.vhg-slide3::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(255,255,255,0.04), transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(255,255,255,0.02), transparent 50%);
    pointer-events: none;
}
.vhg-slide3-inner {
    position: relative;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.vhg-slide3-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 40px;
    backdrop-filter: blur(4px);
}
.vhg-slide3-badge svg { width: 16px; height: 16px; stroke: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vhg-slide3-title {
    font-size: 64px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.vhg-slide3-gradient {
    display: block;
    background: linear-gradient(to right, #e2e8f0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 12px;
}
.vhg-slide3-subtitle {
    font-size: 20px;
    color: #cbd5e1;
    margin: 0 auto 40px;
    line-height: 1.7;
    max-width: 680px;
}
.vhg-slide3-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 48px;
}
.vhg-slide3-pill {
    padding: 10px 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0;
    text-decoration: none;
    transition: all 0.2s ease;
}
.vhg-slide3-pill:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; border-color: rgba(255,255,255,0.25); }
.vhg-slide3-actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.vhg-slide3-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ffffff;
    color: #0f172a; padding: 16px 40px; border-radius: 12px; font-size: 16px; font-weight: 600;
    text-decoration: none; transition: all 0.2s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.vhg-slide3-btn-primary:hover { background: #f1f5f9; transform: translateY(-2px); text-decoration: none; color: #0f172a; }
.vhg-slide3-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); padding: 16px 40px; border-radius: 12px; font-size: 16px; font-weight: 600;
    text-decoration: none; transition: all 0.2s ease; border: 1px solid rgba(255,255,255,0.2);
}
.vhg-slide3-btn-secondary:hover { background: rgba(255,255,255,0.15); text-decoration: none; color: #fff; }

/* ---- SLIDE 4: Asymmetric Dark ---- */
.vhg-slide4 {
    background: linear-gradient(to right, #0f172a, #1e293b, #0f172a);
    padding: 80px 0 100px;
}
.vhg-slide4-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 80px;
    align-items: center;
}
.vhg-slide4-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px; font-size: 13px; font-weight: 700; color: #ffffff; margin-bottom: 24px;
    backdrop-filter: blur(4px);
}
.vhg-slide4-badge svg { width: 15px; height: 15px; stroke: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vhg-slide4-title {
    font-size: 52px; font-weight: 800; color: #ffffff; margin: 0 0 20px; line-height: 1.1; letter-spacing: -0.02em;
}
.vhg-slide4-gradient { background: linear-gradient(to right, #e2e8f0, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.vhg-slide4-subtitle { font-size: 18px; color: #cbd5e1; margin: 0 0 28px; line-height: 1.7; max-width: 560px; }
.vhg-slide4-features { display: flex; gap: 40px; margin-bottom: 36px; flex-wrap: wrap; }
.vhg-slide4-feature { display: flex; flex-direction: column; gap: 4px; }
.vhg-slide4-feature__label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #ffffff; font-size: 14px; }
.vhg-slide4-feature__label svg { width: 18px; height: 18px; stroke: #ffffff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.vhg-slide4-feature__desc { font-size: 12px; color: #cbd5e1; margin-left: 26px; }
.vhg-slide4-actions { display: flex; align-items: center; gap: 16px; }
.vhg-slide4-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ffffff; color: #0f172a; padding: 14px 32px; border-radius: 12px;
    font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.2s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.vhg-slide4-btn-primary:hover { background: #f1f5f9; transform: translateY(-1px); text-decoration: none; color: #0f172a; }
.vhg-slide4-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); padding: 14px 28px; border-radius: 12px;
    font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); transition: all 0.2s ease;
}
.vhg-slide4-btn-secondary:hover { background: rgba(255,255,255,0.15); text-decoration: none; color: #fff; }
/* Right panel card */
.vhg-slide4-panel { position: relative; }
.vhg-slide4-card {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 20px; padding: 56px 48px; text-align: center;
    box-shadow: 0 25px 50px rgba(15,23,42,0.25); border: 1px solid rgba(255,255,255,0.06);
    position: relative; overflow: hidden;
}
.vhg-slide4-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,148,136,0.15), transparent); }
.vhg-slide4-card-icon {
    width: 88px; height: 88px; background: rgba(255,255,255,0.08);
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px; border: 1px solid rgba(255,255,255,0.12); position: relative;
}
.vhg-slide4-card-icon svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vhg-slide4-card-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; position: relative; }
.vhg-slide4-card-text { color: #94a3b8; font-size: 14px; position: relative; }
.vhg-slide4-panel-glow { position: absolute; z-index: -1; width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); }
.vhg-slide4-panel-glow--tl { top: -40px; left: -40px; background: rgba(100,116,139,0.15); }
.vhg-slide4-panel-glow--br { bottom: -40px; right: -40px; background: rgba(100,116,139,0.25); }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .vhg-slide2-grid, .vhg-slide4-grid { grid-template-columns: 1fr; gap: 40px; }
    .vhg-slide2-right, .vhg-slide4-panel { display: none; }
    .vhg-slide3-title { font-size: 48px; }
    .vhg-slide2-title, .vhg-slide4-title { font-size: 42px; }
}
@media (max-width: 768px) {
    .vhg-slide2, .vhg-slide4 { padding: 60px 0 80px; }
    .vhg-slide3 { padding: 80px 0 100px; }
    .vhg-slide2-title, .vhg-slide4-title { font-size: 32px; }
    .vhg-slide3-title { font-size: 36px; }
    .vhg-slide3-subtitle, .vhg-slide2-subtitle, .vhg-slide4-subtitle { font-size: 16px; }
    .vhg-slide4-features { flex-direction: column; gap: 16px; }
    .vhg-slide3-btn-primary, .vhg-slide3-btn-secondary { padding: 14px 28px; font-size: 15px; }
    .vhg-slide3-pills { gap: 8px; }
    .vhg-slide3-pill { font-size: 13px; padding: 8px 16px; }
}

/* ================================================================
   SECTION 1 — HERO
   ================================================================ */
.vhg-hero-section {
    padding: 0;
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    overflow: hidden;
}
.vhg-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.03), transparent);
    pointer-events: none;
    z-index: 0;
}
.vhg-hero-inner {
    position: relative;
    z-index: 1;
    padding: 128px 0;
}
.vhg-hero-content {
    max-width: 800px;
}
.vhg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 32px;
    backdrop-filter: blur(4px);
}
.vhg-hero-badge svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    fill: none;
    flex-shrink: 0;
}
.vhg-hero-title {
    font-size: 60px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 24px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.vhg-hero-title__gradient {
    background: linear-gradient(to right, #e2e8f0, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vhg-hero-subtitle {
    font-size: 20px;
    color: #cbd5e1;
    margin: 0 0 40px;
    line-height: 1.7;
    max-width: 640px;
}
.vhg-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ================================================================
   SECTION 2 — SHOP BY PRODUCT TYPE
   ================================================================ */
.vhg-product-types-section {
    background: #f8fafc;
}
.vhg-product-types-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
.vhg-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 32px 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    color: inherit;
}
.vhg-type-card:hover {
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.30);
    transform: translateY(-4px);
    text-decoration: none;
}
.vhg-type-card:hover .vhg-type-card__icon {
    transform: scale(1.1);
    border-color: rgba(15, 23, 42, 0.30);
}
.vhg-type-card:hover .vhg-type-card__title {
    color: #1e293b;
}
.vhg-type-card__icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.vhg-type-card__icon svg {
    width: 36px;
    height: 36px;
    color: #334155;
    stroke: #334155;
}
.vhg-type-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    transition: color 0.2s;
}
.vhg-type-card__desc {
    font-size: 14px;
    color: #475569;
    margin: 0 0 20px;
    line-height: 1.5;
    flex: 1;
}
.vhg-type-card__link {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-top: auto;
}

/* ================================================================
   SECTION 3 & 5 — FEATURED PRODUCTS (Highlight widgets)
   Product grid left as default Argento theme styling.
   ================================================================ */
.vhg-featured-section--white {
    background: #ffffff;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.vhg-featured-section--grey {
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
}
/* Hide Highlight widget's own block title — we use vhg-section-header */
.vhg-featured-section .block-highlight .block-title { display: none !important; }
.vhg-featured-section .block-highlight { margin: 0; padding: 0; }

/* ================================================================
   SECTION 5 — SHOP BY DOMAIN (Static cards)
   ================================================================ */
.vhg-domains-section {
    background: #ffffff;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
}
.vhg-domains-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.vhg-domain-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.vhg-domain-card:hover {
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.30);
    text-decoration: none;
}
.vhg-domain-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    transition: color 0.2s;
}
.vhg-domain-card:hover .vhg-domain-card__title {
    color: #1e293b;
}
.vhg-domain-card__desc {
    font-size: 14px;
    color: #475569;
    margin: 0 0 20px;
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vhg-domain-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-top: auto;
    transition: color 0.2s;
}
.vhg-domain-card__btn svg {
    transition: transform 0.2s;
}
.vhg-domain-card:hover .vhg-domain-card__btn {
    color: #0f172a;
}
.vhg-domain-card:hover .vhg-domain-card__btn svg {
    transform: translateX(4px);
}

/* ================================================================
   SECTION 6 — CORPORATE / BULK CTA
   ================================================================ */
.vhg-corporate-section {
    background: #ffffff;
    border-top: 1px solid rgba(226, 232, 240, 0.6);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
.vhg-corporate-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #ffffff;
    border-radius: 24px;
    padding: 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
.vhg-corporate-card__badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 24px;
}
.vhg-corporate-card__title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px;
}
.vhg-corporate-card__text {
    font-size: 18px;
    color: #cbd5e1;
    margin: 0 auto 40px;
    max-width: 640px;
    line-height: 1.6;
}

/* ================================================================
   SECTION 7 — WHY VAN HAREN (Trust blocks)
   ================================================================ */
.vhg-trust-section {
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
}
.vhg-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
.vhg-trust-block {
    text-align: center;
}
.vhg-trust-block__icon {
    width: 80px;
    height: 80px;
    border: 2px solid #1e293b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #f1f5f9, #ffffff);
    transition: all 0.3s ease;
}
.vhg-trust-block__icon svg {
    width: 36px;
    height: 36px;
    stroke: #1e293b;
    fill: none;
}
.vhg-trust-block:hover .vhg-trust-block__icon {
    border-color: #0f172a;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);
}
.vhg-trust-block__title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
    transition: color 0.2s;
}
.vhg-trust-block:hover .vhg-trust-block__title {
    color: #1e293b;
}
.vhg-trust-block__text {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* ================================================================
   SECTION 8 — BANNERS
   ================================================================ */
.vhg-banners-section {
    background: #f8fafc;
    padding-top: 48px;
    padding-bottom: 48px;
}

/* ================================================================
   RESPONSIVE — Tablet (max 1200px)
   ================================================================ */
@media (max-width: 1200px) {
    .vhg-container {
        padding-left: 32px;
        padding-right: 32px;
    }
    .vhg-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .vhg-hero-inner {
        padding: 96px 0;
    }
    .vhg-hero-title {
        font-size: 48px;
    }
    .vhg-product-types-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .vhg-domains-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .vhg-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .vhg-corporate-card {
        padding: 48px 40px;
    }
}

/* ================================================================
   RESPONSIVE — Mobile (max 768px)
   ================================================================ */
@media (max-width: 768px) {
    .vhg-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .vhg-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .vhg-hero-inner {
        padding: 64px 0;
    }
    .vhg-hero-title {
        font-size: 32px;
        letter-spacing: -0.01em;
    }
    .vhg-hero-subtitle {
        font-size: 16px;
    }
    .vhg-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .vhg-section-title {
        font-size: 26px;
    }
    .vhg-section-subtitle {
        font-size: 15px;
    }
    .vhg-section-header--split {
        flex-direction: column;
        align-items: flex-start;
    }
    .vhg-product-types-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .vhg-product-types-grid .vhg-type-card:last-child {
        grid-column: 1 / -1;
        max-width: 240px;
        margin: 0 auto;
    }
    .vhg-domains-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .vhg-trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .vhg-corporate-card {
        padding: 40px 24px;
        border-radius: 16px;
    }
    .vhg-corporate-card__title {
        font-size: 26px;
    }
    .vhg-corporate-card__text {
        font-size: 16px;
    }
    .vhg-btn {
        padding: 12px 28px;
        font-size: 15px;
    }
}

/* ================================================================
   GLOBAL — Footer (full enterprise layout, all pages)
   Dark slate background, gold accents, 4-column link grid.
   To change footer background: edit background on .page-footer below
   To change link hover color: edit .page-footer a:hover below
   ================================================================ */

/* -- Outer wrapper ------------------------------------------------ */
.page-footer {
    background: linear-gradient(to right, #0f172a, #1e293b, #0f172a) !important;
    color: #fff !important;
    border-top: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Gradient overlay: bg-gradient-to-br from-[#2a3441] via-transparent opacity-50 */
.page-footer > * {
    position: relative;
    z-index: 1;
}
.page-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #1e293b, transparent 60%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* Decorative accent line: absolute bottom-0 h-1 via-[#f5b800] opacity-50 */
.page-footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, transparent, #f5b800, transparent);
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}

/* -- Top contact bar: HIDDEN per user request -------------------- */
.footer-toolbar-top {
    display: none !important;
}
.footer-toolbar-top .content {
    background: transparent !important;
}

/* 4-equal-column grid. Use display:contents on .contacts wrapper
   so its 3 children fall directly into the parent grid as cols 2-4 */
.footer-contacts {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Label column (grid col 1) */
.footer-contacts > .col-md-4 {
    grid-column: 1 !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* "Questions?" = text-white/70 weight-normal */
.footer-contacts > .col-md-4 .title strong {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 400 !important;
    display: inline !important;
}
/* "Talk to a specialist" = white font-medium text-sm */
.footer-contacts > .col-md-4 .title {
    font-size: 14px !important;
    color: #fff !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* .contacts: display:contents -> 3 children become direct grid items */
.footer-contacts .contacts {
    display: contents !important;
}

/* Contact items (cols 2-4): flex items-center gap-3, hover gold */
.footer-contacts .contacts > [class*="col-md"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    background: transparent !important;
    cursor: pointer;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}
.footer-contacts .contacts > [class*="col-md"]:hover {
    color: #f5b800 !important;
}

/* Icon box: p-2 bg-white/5 rounded-lg */
.footer-contacts .contacts .icon {
    flex-shrink: 0 !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition: background 0.2s ease !important;
    width: auto !important;
    height: auto !important;
    box-sizing: content-box !important;
}
.footer-contacts .contacts > [class*="col-md"]:hover .icon {
    background: rgba(245, 184, 0, 0.2) !important;
}

/* SVGs scaled to 16px (w-4 h-4), recoloured to currentColor */
.footer-contacts .contacts .icon svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex-shrink: 0 !important;
}
.footer-contacts .contacts .icon svg path[fill="#FABB1A"] {
    fill: currentColor !important;
}
.footer-contacts .contacts .icon svg path[stroke="#FABB1A"],
.footer-contacts .contacts .icon svg circle[stroke="#FABB1A"] {
    stroke: currentColor !important;
}

/* Contact text: text-sm font-medium */
.footer-contacts .contacts .text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: inherit !important;
    white-space: nowrap;
}

/* -- Main content: py-16 (64px) ---------------------------------- */
.footer.content {
    background: transparent !important;
    border-top: none !important;
    padding: 40px 0 !important;
}
.footer-links {
    background: transparent !important;
}

/* 4-col grid gap-12 (48px) */
.footer-links ul.footer.links {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.footer-links ul.footer.links > li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
    width: auto !important;
}

/* Column header: text-lg (18px) font-semibold mb-6 relative inline-block */
.footer-links [data-role="title"].h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    display: inline-block !important;
    border-bottom: none !important;
    cursor: default !important;
    background: transparent !important;
    line-height: 1.4 !important;
}

/* Gold underline: absolute -bottom-2 (8px below) w-12 (48px) h-0.5 */
.footer-links [data-role="title"].h4::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 0 !important;
    width: 48px !important;
    height: 2px !important;
    background: linear-gradient(to right, #f5b800, transparent) !important;
    border-radius: 0 !important;
}

/* Link list: space-y-3 = 12px gap */
.footer-links ul[data-role="content"].links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
.footer-links ul[data-role="content"].links li {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Links: text-white/70 hover:gold text-sm, slide right 4px on hover */
.footer-links ul[data-role="content"].links li a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    transform: translateX(0) !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.5 !important;
}
.footer-links ul[data-role="content"].links li a:hover {
    color: #f5b800 !important;
    transform: translateX(4px) !important;
    text-decoration: none !important;
    text-shadow: 0 0 10px rgba(245, 184, 0, 0.6), 0 0 20px rgba(245, 184, 0, 0.3) !important;
}

/* Cookie Settings button — unstyled, matches link appearance */
.footer-links ul[data-role="content"].links li .pr-open-cookie-settings,
.footer-links ul[data-role="content"].links li button.action {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    transform: translateX(0) !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: left !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.5 !important;
    outline: none !important;
}
.footer-links ul[data-role="content"].links li .pr-open-cookie-settings:hover,
.footer-links ul[data-role="content"].links li button.action:hover {
    color: #f5b800 !important;
    transform: translateX(4px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 10px rgba(245, 184, 0, 0.6), 0 0 20px rgba(245, 184, 0, 0.3) !important;
}

/* High-specificity override to ensure gold button color is not clobbered
   by Argento footer link rules (.footer a, .page-footer a, etc.) */
.page-footer a.vhg-footer-cta,
.footer-links a.vhg-footer-cta {
    color: #1e2836 !important;
    background: #f5b800 !important;
}
.page-footer a.vhg-footer-cta:hover,
.footer-links a.vhg-footer-cta:hover {
    background: #ffc920 !important;
    color: #1e2836 !important;
}

/* Contact Sales CTA button (shown in footer Events column)
   Gold background (#f5b800), dark text, rounded.
   To change button color: edit background-color on a.vhg-footer-cta below */
a.vhg-footer-cta,
button.vhg-footer-cta {
    display: block !important;
    width: 100% !important;
    margin-top: 24px !important;
    background: #f5b800 !important;
    color: #1e2836 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
a.vhg-footer-cta:hover,
button.vhg-footer-cta:hover {
    background: #ffc920 !important;
    color: #1e2836 !important;
    box-shadow: 0 8px 24px rgba(245, 184, 0, 0.3) !important;
    text-decoration: none !important;
    transform: none !important;
}

/* -- Bottom bar: border-t border-white/10 py-6 ------------------- */
.footer-toolbar-bottom {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
}
.footer-toolbar-bottom .content {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

/* Logo: invert to white */
.footer-logo {
    flex-shrink: 0 !important;
}
.footer-logo img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
    height: 50px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

/* Social icons: flex gap-4, each p-2 bg-white/5 rounded-lg */
.social-icons.colorize-fa-stack-hover {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.social-icons .icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* FA icon: hide circle, show icon at 20px (w-5 h-5) */
.social-icons .icon .fa-stack {
    /* natural Argento sizing */
}
/* .fa-circle: kept visible — Argento colorize-fa-stack-hover handles it */
.social-icons .icon .fa-stack-1x {
    /* natural Argento positioning */
}

/* Copyright: text-white/50 text-sm */
.copyright {
    color: #fff !important;
    font-size: 14px !important;
}
.copyright span {
    color: inherit !important;
}

/* -- Footer responsive ------------------------------------------- */
@media (max-width: 1023px) {
    .footer-contacts {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .footer-contacts > .col-md-4 {
        grid-column: 1 / -1 !important;
    }
    .footer-links ul.footer.links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 32px !important;
    }
}
@media (max-width: 767px) {
    .footer-contacts {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .footer-contacts > .col-md-4 {
        grid-column: 1 / -1 !important;
        margin-bottom: 8px !important;
    }
    .footer-links ul.footer.links {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 20px !important;
    }
    .footer-toolbar-bottom .content {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}
@media (max-width: 480px) {
    .footer-contacts {
        grid-template-columns: 1fr !important;
    }
    .footer-links ul.footer.links {
        grid-template-columns: 1fr !important;
    }
}

/* Product detail + search + account pages: white column */
.catalog-product-view .column.main,
.catalogsearch-result-index .column.main,
.customer-account .column.main,
.account .column.main {
    background: #fff !important;
}

/* Product cards — white + 25px radius on grey page */
.products-grid .product-item {
    border-radius: 25px !important;
}
.products-grid .product-item-info {
    background: #ffffff !important;
    border-radius: 25px !important;
}
.page-products .column.main .products-grid .product-item:hover .product-item-info {
    border-radius: 25px !important;
}

/* Breadcrumbs — match header color */
.breadcrumbs {
    background-color: #0f224c !important;
}
.breadcrumbs .item.home a {
    border: none !important;
}

/* Desktop: border-radius + abs-block shadow on main column, sidebar, and nav bar */
@media (min-width: 768px) {
    .page-layout-2columns-left .column.main {
        border-radius: 25px !important;
        border: 1px solid #E0E0E0 !important;
        box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.04), 0px 4px 36px rgba(0, 0, 0, 0.06) !important;
    }
    .page-layout-2columns-left .sidebar.sidebar-main {
        border-radius: 25px !important;
        overflow: hidden !important;
    }
    .nav-sections {
        border-radius: 25px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   LAYERED NAVIGATION — VHG Theme
   ═══════════════════════════════════════════════════════ */

/* Sidebar card */
.page-layout-2columns-left .sidebar.sidebar-main {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(15,34,76,.07) !important;
    padding: 0 !important;
}

/* "Shop By" header */
.block.filter .block-title.filter-title {
    background: linear-gradient(120deg, #0f172a 0%, #0f224c 60%, #183878 100%);
    padding: 16px 20px;
    margin: 0;
    cursor: default;
}
.block.filter .block-title.filter-title strong {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Hide redundant "Shopping Options" subtitle */
.block.filter .filter-subtitle { display: none !important; }

/* Active filters — "Now Shopping by" */
.block.filter .filter-current {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
}
.block.filter .filter-current .block-subtitle {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.block.filter .filter-current .items {
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-current .amshopby-item.item {
    background: #0f224c !important;
    border-radius: 20px !important;
    padding: 4px 10px 4px 12px !important;
    gap: 4px;
}
.filter-current .amshopby-filter-name { color: rgba(255,255,255,.65) !important; font-size: 12px !important; }
.filter-current .amshopby-filter-value { color: #14b8a6 !important; font-size: 12px !important; font-weight: 700 !important; }
.filter-current .action.remove::before { color: rgba(255,255,255,.55) !important; font-size: 10px !important; }
.filter-current .action.remove:hover::before { color: #ffffff !important; }

/* Clear All link */
.filter-actions {
    padding: 8px 16px 12px !important;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0 !important;
}
.filter-actions .filter-clear {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0d9488 !important;
}
.filter-actions .filter-clear:hover { color: #0f224c !important; text-decoration: underline !important; }

/* Filter options wrapper */
.block.filter .filter-options {
    padding: 0 !important;
    margin: 0 !important;
}

/* Each collapsible section */
.filter-options-item {
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 0 !important;
}
.filter-options-item:last-child { border-bottom: none !important; }

/* Section title bar */
.filter-options-title {
    padding: 13px 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f224c !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    transition: background 0.15s;
}
.filter-options-title:hover { background: #f1f5f9 !important; }
.filter-options-title::after {
    margin: 0 !important;
    position: static !important;
    color: #94a3b8 !important;
    transform: none !important;
}
.filter-options-item.active .filter-options-title::after { color: #0d9488 !important; }

/* Content area inside each section */
.filter-options-content {
    padding: 2px 12px 12px !important;
    background: #fafbfc !important;
}
.filter-options-item.active .filter-options-content { background: #f8fafc !important; }

/* Filter option links */
.filter-options-content .item {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}
.filter-options-content .item > a,
.filter-options-content .amshopby-option-link {
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px 6px 26px !important; /* 26px = 8 base + 12 checkbox + 6 gap */
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}
/* Reposition the fake checkbox to align with link text */
.filter-options input[type='checkbox'] + .amshopby-choice {
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
}
.filter-options-content .item > a:hover,
.filter-options-content .amshopby-option-link:hover {
    background: #f1f5f9 !important;
    color: #0f224c !important;
    text-decoration: none !important;
}
.filter-options-content .item.active > a,
.filter-options-content .am-item-active .amshopby-option-link {
    background: rgba(13,148,136,.09) !important;
    color: #0d9488 !important;
    font-weight: 600 !important;
}

/* Count badge */
.filter-options-content .count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e2e8f0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
    min-width: 20px;
    border: none !important;
}
.filter-options-content .count::before,
.filter-options-content .count::after { display: none !important; }

/* Custom checkbox — navy color */
.filter-options input[type='checkbox'] + .amshopby-choice::before {
    border-color: #cbd5e1 !important;
    border-radius: 4px !important;
}
.filter-options input[type='checkbox'] + .amshopby-choice:hover::before,
.filter-options input[type='checkbox']:checked + .amshopby-choice::before {
    border-color: #0f224c !important;
}
.filter-options input[type='checkbox']:checked + .amshopby-choice::after {
    background-color: #0f224c !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxNSAxNSI+CiAgPGRlZnMvPgogIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMS42NjkzIDMuNTAwNjFjLS4yMDc4LjAwNjk1LS40MDQ4LjA5ODg1LS41NDkzLjI1NjItMS45NTcwMyAyLjA2NDE1LTMuNDM4ODMgMy43NzY1NS01LjI4MDQxIDUuNzQ3ODNMMy44MTczIDcuNzA0NzRjLS4wNzk5Mi0uMDcxNi0uMTcyNDUtLjEyNTk1LS4yNzIzMy0uMTU5OTItLjA5OTg3LS4wMzM5Ny0uMjA1MTItLjA0NjktLjMwOTc0LS4wMzgwNi0uMTA0NjIuMDA4ODUtLjIwNjU2LjAzOTI5LS4zLjA4OTYtLjA5MzQ1LjA1MDMtLjE3NjU2LjExOTQ4LS4yNDQ1OS4yMDM2LS4wNjgwNC4wODQxMS0uMTE5NjYuMTgxNTEtLjE1MTkzLjI4NjYyLS4wMzIyNy4xMDUxMS0uMDQ0NTUuMjE1ODgtLjAzNjE1LjMyNTk4LjAwODQxLjExMDExLjAzNzM0LjIxNzQuMDg1MTUuMzE1NzQuMDQ3ODEuMDk4MzMuMTEzNTUuMTg1NzkuMTkzNDguMjU3MzlMNS4zNzc3MSAxMS4yOThjLjE1MzE1LjEzNzkuMzUwMTkuMjA5OC41NTE2LjIwMTMuMjAxNDEtLjAwODYuMzkyMzEtLjA5NjkuNTM0NDQtLjI0NzNDOC42MTA3NCA4Ljk4NzU3IDEwLjE0MiA3LjE3NTQ0IDEyLjI1NiA0Ljk0NTc4Yy4xMTY1LS4xMTgzNy4xOTYtLjI3MTIuMjI4MS0uNDM4MjMuMDMyMS0uMTY3MDMuMDE1My0uMzQwMzgtLjA0ODQtLjQ5NzA5LS4wNjM2LS4xNTY3MS0uMTcwOS0uMjg5MzctLjMwNzgtLjM4MDQyLS4xMzY5LS4wOTEwNS0uMjk2OC0uMTM2MTktLjQ1ODYtLjEyOTQzeiIvPgo8L3N2Zz4K") !important;
}

/* All filter sections open by default — override Magento collapsible */
.filter-options-item .filter-options-content {
    display: block !important;
}
/* Hide the collapse arrow since all are always open */
.filter-options-title::after { display: none !important; }

/* Search box inside filter sections — rounded, white */
.filter-options-content .amshopby-search-box input,
.filter-options-content .amShopbyFilterSearch,
.filter-options-content [class*="am-search-box-"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    color: #334155 !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
}
.filter-options-content .amshopby-search-box input:focus,
.filter-options-content .amShopbyFilterSearch:focus,
.filter-options-content [class*="am-search-box-"]:focus {
    border-color: #0f224c !important;
    box-shadow: 0 0 0 3px rgba(15,34,76,.08) !important;
}

/* ═══════════════════════════════════════════════════════
   CATALOG GRID — Product card attribute badges
   Format swatches (Physical/Digital) + meta info pills
   Same feel as product page but compact
   ═══════════════════════════════════════════════════════ */

/* Wrapper: give it some breathing room
   NOTE: actual class is swatch-opt-{id}, not swatch-opt */
.products-grid [class*="swatch-opt-"] {
    margin: 6px 0 4px;
}

/* Hide swatch label ("Format:") and selected value text */
.products-grid .swatch-attribute-label,
.products-grid .swatch-attribute-selected-option {
    display: none !important;
}

/* Options row: flex wrap of pill badges */
.products-grid .swatch-attribute-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Each pill badge */
.products-grid .swatch-option.text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 20px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Hover state */
.products-grid .swatch-option.text:hover {
    background: #e2e8f0 !important;
    color: #0f224c !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

/* Selected state — navy fill */
.products-grid .swatch-option.text.selected {
    background: #0f224c !important;
    color: #ffffff !important;
    border-color: #0f224c !important;
    box-shadow: none !important;
}
.products-grid .swatch-option.text.selected:hover {
    background: #183878 !important;
    border-color: #183878 !important;
}

/* Remove border around product images */
.products-grid .product-image-container {
    border: none !important;
}

/* Price: keep incl. + excl. tax on same line */
.products-grid .price-container {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.products-grid .price-label {
    display: none !important;
}
.products-grid .price-including-tax {
    display: inline-block !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}
.products-grid .price-including-tax + .price-excluding-tax {
    display: inline-block !important;
    font-size: 1.1rem !important;
    color: #64748b !important;
}
.products-grid .price-including-tax + .price-excluding-tax::before {
    content: '(Excl. ' !important;
}
.products-grid .price-including-tax + .price-excluding-tax::after {
    content: ')' !important;
}

/* Add to Cart button — rounded corners */
.products-grid .action.tocart {
    border-radius: 25px !important;
}

/* Hide Add to Compare button */
.products-grid .action.tocompare,
.products-grid .actions-secondary {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════
   PRODUCT GRID HOVER FIX
   Restore standard Argento hover: hide Add-to-Cart until hover.
   Our compiled styles-m.css overrides the hiding with position:static,
   causing a large hover popup. This reverts it to the correct behaviour.
   TO ROLL BACK: remove these 4 lines.
   ═══════════════════════════════════════════════════════ */
.products-grid .product-item-info:not(:hover):not(.active) .product-item-inner {
    border: 0 !important; clip: rect(0,0,0,0) !important; height: 1px !important; margin: -1px !important;
    overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important;
}

/* ═══════════════════════════════════════════════════════
   CATALOG GRID — Book card effect (Option 2: Spine + 3D Tilt)
   Navy spine on the left, warm page-stack shadow on the right,
   3D tilt on hover — like picking a book off a shelf.
   Pierre: adjust spine width (10px) and tilt angle (-8deg) to taste
   ═══════════════════════════════════════════════════════ */

/* Reset from previous option */
.products-grid .product-item {
    padding-top: 0 !important;
    perspective: 900px;
}
.products-grid .product-item::before {
    display: none !important;
}

/* Card shape: sharp left (spine), rounded right (cover edge) */
.products-grid .product-item-info {
    position: relative !important;
    border-radius: 3px 14px 14px 3px !important;
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease !important;
    box-shadow:
        4px 2px 0 1px #e2ddd4,
        8px 5px 0 1px #ede8df,
        0 4px 18px rgba(15,34,76,0.10) !important;
}

/* Navy spine strip */
.products-grid .product-item-info::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: linear-gradient(to right, #091428, #0f224c);
    border-radius: 3px 0 0 3px;
    z-index: 2;
    pointer-events: none;
}

/* Remove dog-ear from previous option */
.products-grid .product-item-info::after {
    display: none !important;
}

/* Hover: 3D tilt + deeper shadows */
.products-grid .product-item-info:hover {
    transform: perspective(900px) rotateY(-8deg) !important;
    box-shadow:
        6px 3px 0 1px #d8d2c7,
        12px 7px 0 1px #e2ddd4,
        16px 20px 35px rgba(15,34,76,0.22) !important;
}

/* Mobile: spine stays, no tilt */
@media (max-width: 767px) {
    .products-grid .product-item-info,
    .products-grid .product-item-info:hover {
        transform: none !important;
        box-shadow:
            3px 2px 0 1px #e2ddd4,
            0 3px 12px rgba(15,34,76,0.10) !important;
    }
}

/* ═══════════════════════════════════════════════════════
   AJAXPRO CART POPUP — Add to Cart confirmation modal
   Shows added item + cart totals in the VHG navy style.
   Pierre: adjust max-width (700px) and colours to taste
   ═══════════════════════════════════════════════════════ */

/* Centre the modal on screen */
.ajaxpro-modal-dialog-popup {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ajaxpro-modal-dialog-popup .modal-inner-wrap {
    max-width: 700px !important;
    width: 96vw !important;
    margin: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 64px rgba(15,34,76,0.30) !important;
    background: #ffffff !important;
}

/* Navy header with "Added to cart" title */
.ajaxpro-modal-dialog-popup .modal-header {
    background: linear-gradient(120deg, #0f172a 0%, #0f224c 60%, #183878 100%) !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.ajaxpro-modal-dialog-popup .modal-header::before {
    content: '✓  Added to your cart';
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ajaxpro-modal-dialog-popup .action-close {
    position: relative !important; /* override absolute so it sits inside flex header */
    background: transparent !important;
    border: none !important;
    padding: 0 4px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.ajaxpro-modal-dialog-popup .action-close::before {
    content: '×' !important;
    color: #ffffff !important;
    font-size: 28px !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    display: block !important;
}
.ajaxpro-modal-dialog-popup .action-close span {
    display: none !important;
}

/* No padding on content wrapper */
.ajaxpro-modal-dialog-popup .modal-content {
    padding: 0 !important;
    background: #ffffff !important;
}

/* Two-column layout */
.ajaxpro-modal-dialog-popup .suggestpage-activity {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #ffffff !important;
}

/* ── Left column: added item ── */
.ajaxpro-modal-dialog-popup .col-suggest-list {
    flex: 1 !important;
    padding: 24px 20px !important;
    border-right: 1px solid #e2e8f0 !important;
    min-width: 0 !important;
    background: #ffffff !important;
}
.ajaxpro-modal-dialog-popup .cart-form-col1-top { display: none !important; }
.ajaxpro-modal-dialog-popup .col-suggest-list {
    overflow-y: auto !important;
    max-height: 420px !important;
}
.ajaxpro-modal-dialog-popup .col-suggest-list ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each cart item: reorder via grid — Name → Image → Options */
.ajaxpro-modal-dialog-popup .col-suggest-list ol > li + li {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #e2e8f0 !important;
}
.ajaxpro-modal-dialog-popup .col-suggest-list .item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    border: none !important;
}
/* Flatten product-item-details and its inner wrapper so children
   become direct grid children for ordering */
.ajaxpro-modal-dialog-popup .col-suggest-list .product-item-details,
.ajaxpro-modal-dialog-popup .col-suggest-list .product-item-details > div {
    display: contents !important;
}
/* 1 — Product name */
.ajaxpro-modal-dialog-popup .col-suggest-list .product-item-name {
    order: 1 !important;
}
.ajaxpro-modal-dialog-popup .col-suggest-list .product-item-name a {
    color: #0f224c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
/* 2 — Product image — centred */
.ajaxpro-modal-dialog-popup .col-suggest-list .product-item-photo {
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
}
.ajaxpro-modal-dialog-popup .col-suggest-list .product-item-photo img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    border: 1px solid #f1f5f9 !important;
}
/* 3 — Qty + price (shown between image and options) */
.ajaxpro-modal-dialog-popup .col-suggest-list .qty-price {
    order: 3 !important;
}
.ajaxpro-modal-dialog-popup .suggestpage-qty {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
}
.ajaxpro-modal-dialog-popup .qty-price .price {
    color: #0f224c !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
/* 4 — Format option — centred pill badge matching catalog grid */
.ajaxpro-modal-dialog-popup .col-suggest-list .item-options {
    order: 4 !important;
    margin: 0 !important;
    text-align: center !important;
}
.ajaxpro-modal-dialog-popup .col-suggest-list .item-options dt {
    display: none !important; /* hide "Format:" label */
}
.ajaxpro-modal-dialog-popup .col-suggest-list .item-options dd {
    display: block !important;
    margin: 0 !important;
}
.ajaxpro-modal-dialog-popup .col-suggest-list .swatch-option.text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    background: #0f224c !important;
    color: #ffffff !important;
    border: 1px solid #0f224c !important;
    white-space: nowrap !important;
}

/* ── Right column: cart totals ── */
.ajaxpro-modal-dialog-popup .col-suggest-totals {
    width: 230px !important;
    flex-shrink: 0 !important;
    padding: 24px 20px !important;
    background: #ffffff !important;
}
.ajaxpro-modal-dialog-popup .cartinfo h3 {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    margin: 0 0 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.ajaxpro-modal-dialog-popup .cartinfo h3 a {
    color: #0f224c !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Totals table — full breakdown, enterprise style */
.ajaxpro-modal-dialog-popup .cartinfo table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 18px !important;
}
.ajaxpro-modal-dialog-popup .cartinfo tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
.ajaxpro-modal-dialog-popup .cartinfo .mark {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 6px 0 !important;
    vertical-align: middle !important;
}
.ajaxpro-modal-dialog-popup .cartinfo .amount {
    color: #1e293b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: right !important;
    padding: 6px 0 !important;
    vertical-align: middle !important;
}
/* Tax rows — slightly muted */
.ajaxpro-modal-dialog-popup .totals-tax-summary .mark,
.ajaxpro-modal-dialog-popup .totals-tax-summary .amount,
.ajaxpro-modal-dialog-popup .totals-tax-details .mark,
.ajaxpro-modal-dialog-popup .totals-tax-details .amount {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}
/* Grand total excl. — medium weight */
.ajaxpro-modal-dialog-popup .grand.totals.excl .mark,
.ajaxpro-modal-dialog-popup .grand.totals.excl .amount {
    font-weight: 600 !important;
    color: #334155 !important;
}
/* Grand total incl. — hero row */
.ajaxpro-modal-dialog-popup .grand.totals.incl {
    border-bottom: none !important;
}
.ajaxpro-modal-dialog-popup .grand.totals.incl .mark,
.ajaxpro-modal-dialog-popup .grand.totals.incl .amount {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f224c !important;
    padding-top: 10px !important;
}

/* Buttons */
.ajaxpro-modal-dialog-popup .cartinfo .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
/* Edit Your Cart — yellow */
.ajaxpro-modal-dialog-popup .btn-suggest-cart {
    background: #f5a623 !important;
    border: 2px solid #f5a623 !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: center !important;
}
.ajaxpro-modal-dialog-popup .btn-suggest-cart:hover {
    background: #e8940e !important;
    border-color: #e8940e !important;
}
/* Proceed to Checkout — navy */
.ajaxpro-modal-dialog-popup .action.primary.checkout {
    background: linear-gradient(120deg, #0f172a 0%, #0f224c 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 25px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
}
.ajaxpro-modal-dialog-popup .action.primary.checkout:hover {
    background: linear-gradient(120deg, #183878 0%, #1e4a9c 100%) !important;
}

/* Hide "Customers also bought" — too much for a popup */
.ajaxpro-modal-dialog-popup .block.soldtogether-swiper {
    display: none !important;
}

/* Footer — Continue Shopping as a proper outlined button */
.ajaxpro-modal-dialog-popup .modal-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: center !important;
}
.ajaxpro-modal-dialog-popup .ajaxpro-continue-button {
    background: linear-gradient(120deg, #0f172a 0%, #0f224c 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 25px !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    width: 190px !important;
}
.ajaxpro-modal-dialog-popup .ajaxpro-continue-button:hover {
    background: linear-gradient(120deg, #183878 0%, #1e4a9c 100%) !important;
}

/* ═══════════════════════════════════════════════════════
   BIAN LANDING PAGE  (cms-bian-foundation-elearning-certification)
   ═══════════════════════════════════════════════════════ */

body.cms-bian-foundation-elearning-certification,
body.cms-bian-foundation-elearning-certification .page-wrapper,
body.cms-bian-foundation-elearning-certification .page-main-full-width,
body.cms-bian-foundation-elearning-certification main#maincontent,
body.cms-bian-foundation-elearning-certification .columns,
body.cms-bian-foundation-elearning-certification .column.main {
    background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   FIRECHECKOUT — Checkout page overrides (Midnight theme)
   All changes scoped to .firecheckout-index-index body class.
   ═══════════════════════════════════════════════════════ */

/* Force navigation bar visible — Midnight CSS only enables nav
   under .firecheckout-layout-full; our 1column layout override
   puts it in the DOM but without that class it stays hidden. */
.firecheckout-index-index .nav-sections,
.firecheckout-index-index .header.wrapper.last {
    display: block !important;
}

/* White background — Midnight theme forces a purple/teal gradient;
   override everything back to white. */
.firecheckout-index-index.firecheckout,
.firecheckout-index-index .page-wrapper {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Hide stray "Shopping Cart" CTA button — CMS block
   "vanharen_group_checkout_header" renders a PageBuilder row
   with a primary button linking back to the cart.
   Target the whole PageBuilder row that contains it. */
.firecheckout-index-index [data-content-type="row"]:has(a.pagebuilder-button-primary[href*="checkout/cart"]) {
    display: none !important;
}

/* ─── Step boxes: solid navy ────────────────────────────
   Midnight default is rgba(0,0,0,0.3) — replace with brand navy */
.firecheckout-index-index #checkout .opc-wrapper .opc > li {
    background: #0f224c !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(15,34,76,0.18) !important;
}

/* Step title: white on navy background; counter badge hidden */
.firecheckout-index-index #checkout .opc-wrapper .step-title {
    color: #ffffff !important;
}
.firecheckout-index-index #checkout .opc-wrapper .step-title::before {
    display: none !important;
}

/* ─── Step content area: white card inside the navy box ─ */
.firecheckout-index-index #checkout .opc-wrapper .step-content {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px 20px 10px !important;
    margin-top: 0 !important;
}

/* ─── Labels & static text inside form areas: navy ──────*/
.firecheckout-index-index #checkout .opc-wrapper .step-content label,
.firecheckout-index-index #checkout .opc-wrapper .step-content .label,
.firecheckout-index-index #checkout .opc-wrapper .step-content legend,
.firecheckout-index-index #checkout .opc-wrapper .step-content .col-method,
.firecheckout-index-index #checkout .opc-wrapper .step-content .col-carrier,
.firecheckout-index-index #checkout .opc-wrapper .step-content .col-price,
.firecheckout-index-index #checkout .opc-wrapper .step-content .col-error,
.firecheckout-index-index #checkout .opc-wrapper .step-content td,
.firecheckout-index-index #checkout .opc-wrapper .step-content span:not(.price) {
    color: #0f224c !important;
}
/* Price spans stay visually readable too */
.firecheckout-index-index #checkout .opc-wrapper .step-content .price {
    color: #0f224c !important;
    font-weight: 700 !important;
}

/* ─── Sidebar wrapper: reset — individual blocks are the navy boxes ─
   The aside.opc-sidebar is a modal wrapper; the actual visual boxes
   are .opc-block-summary and .opc-block-shipping-information inside it. */
.firecheckout-index-index .opc-sidebar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Hide the modal chrome (close button / header) */
.firecheckout-index-index .opc-sidebar .modal-header,
.firecheckout-index-index .opc-sidebar .action-close {
    display: none !important;
}
/* Reset all modal wrapper layers to transparent */
.firecheckout-index-index .opc-sidebar .modal-inner-wrap,
.firecheckout-index-index .opc-sidebar .modal-content,
.firecheckout-index-index .opc-sidebar #opc-sidebar {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─── Order Summary: navy box identical to the step li boxes ─────────
   .opc-block-summary is the container — navy outer (25px, same as steps),
   white interior. span.title sits directly on the navy background.
   overflow:hidden + border-radius clips the white children at corners. */
.firecheckout-index-index .opc-sidebar .opc-block-summary {
    background: #0f224c !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(15,34,76,0.18) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Order Summary title: white text on navy — same font/padding as .step-title */
.firecheckout-index-index .opc-sidebar .opc-block-summary > .title {
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    padding: 25px 25px 15px !important;
    background: transparent !important;
    margin: 0 !important;
}
/* Counter badge: hidden */
.firecheckout-index-index .opc-sidebar .opc-block-summary > .title::before {
    display: none !important;
}

/* White content area — parent padding (0 25px 25px) creates the navy frame on sides/bottom.
   Children fill the parent's content area naturally: width:100% = content width (inside padding).
   No margin tricks needed — padding on the parent handles all three sides. */
.firecheckout-index-index .opc-sidebar .opc-block-summary {
    padding: 0 25px 25px !important;   /* overwrites the earlier padding:0 */
}
.firecheckout-index-index .opc-sidebar .opc-block-summary > .title {
    margin: 0 -25px !important;        /* cancel parent's side padding → stretch edge-to-edge */
    padding: 25px 25px 15px !important;
}
.firecheckout-index-index .opc-sidebar .opc-block-summary > *:not(.title) {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 12px 25px !important;
    color: #0f224c !important;
    width: 100% !important;            /* 100% of content area already constrained by padding */
    box-sizing: border-box !important;
}

/* Text in the white summary area: navy */
.firecheckout-index-index .opc-sidebar .opc-block-summary td,
.firecheckout-index-index .opc-sidebar .opc-block-summary th,
.firecheckout-index-index .opc-sidebar .opc-block-summary .product-item-name,
.firecheckout-index-index .opc-sidebar .opc-block-summary .price {
    color: #0f224c !important;
}
/* Divider lines: light navy-tinted */
.firecheckout-index-index .opc-sidebar .opc-block-summary .table-totals {
    border-color: #d1d9e8 !important;
}
.firecheckout-index-index .opc-sidebar .opc-block-summary .table-totals tr td,
.firecheckout-index-index .opc-sidebar .opc-block-summary .table-totals tr th {
    border-color: #d1d9e8 !important;
}

/* ─── Additional Information — standalone step box (extracted by global-fixes.js) ─── */
/* JS moves wrapper div into a new <li id="opc-additional-information"> before payment.  */
/* col3-set float rules auto-position it in the right column below Shipping Methods.     */
.firecheckout-index-index #opc-additional-information {
    padding: 0 !important;           /* no 25px li padding so navy box fills edge-to-edge */
    margin-bottom: 10px !important;  /* standard step-box spacing */
    box-sizing: border-box !important;
}
.firecheckout-index-index #opc-additional-information > div {
    margin: 0 !important;            /* neutralise wrapper's own bottom margin */
}

/* ─── Additional Information (custom checkout form in payment step) ─── */
/* DOM structure: <div> (no class) > div.step-title.margin-bottom + form#custom-checkout-form */
/* :has() targets the anonymous wrapper div                                                   */
.firecheckout-index-index div:has(> #custom-checkout-form) {
    background: #0f224c !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(15,34,76,0.18) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 0 0 15px !important;
}
/* Step-title "Additional Information" — gets its own padding in the navy header area */
.firecheckout-index-index div:has(> #custom-checkout-form) .step-title {
    color: #ffffff !important;
    background: transparent !important;
    padding: 20px 20px 15px !important;
    margin: 0 !important;
    border-bottom: none !important;
}
/* Remove any border on the wrapper or its children */
.firecheckout-index-index div:has(> #custom-checkout-form),
.firecheckout-index-index div:has(> #custom-checkout-form) > * {
    border-bottom: none !important;
}
/* Inner form: white area inset so navy is visible on left/right/bottom */
.firecheckout-index-index #custom-checkout-form {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    max-width: none !important;
    margin: 0 20px 20px !important;
}
/* Midnight sets fieldset { background: none } — keep it transparent inside white form */
.firecheckout-index-index #custom-checkout-form .fieldset {
    background: transparent !important;
}
.firecheckout-index-index #custom-checkout-form label,
.firecheckout-index-index #custom-checkout-form .label {
    color: #0f224c !important;
}

/* ─── Inputs & textareas: white bg + navy text (checkout + address modals) ── */
.firecheckout-index-index #checkout input:not([type="checkbox"]):not([type="radio"]):not([type="image"]),
.firecheckout-index-index .modal-custom input:not([type="checkbox"]):not([type="radio"]):not([type="image"]),
.firecheckout-index-index .modal-popup input:not([type="checkbox"]):not([type="radio"]):not([type="image"]),
.firecheckout-index-index #checkout textarea,
.firecheckout-index-index .modal-custom textarea,
.firecheckout-index-index .modal-popup textarea {
    background-color: #ffffff !important;
    color: #0f224c !important;
    border-color: #d1d9e8 !important;
    border-radius: 8px !important;
}
/* ─── Selects: white bg + navy text (all contexts) ─── */
.firecheckout-index-index #checkout select,
.firecheckout-index-index .modal-custom select,
.firecheckout-index-index .modal-popup select {
    background-color: #ffffff !important;
    color: #0f224c !important;
    border-color: #d1d9e8 !important;
    border-radius: 8px !important;
}
/* Dark dropdown chevron — overrides Midnight's white SVG arrow */
.firecheckout-index-index #checkout .field select:not([multiple]),
.firecheckout-index-index .modal-custom .field select:not([multiple]),
.firecheckout-index-index .modal-popup .field select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath stroke='%230f224c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 32px !important;
}
/* Select option dropdown list: white bg + navy text */
.firecheckout-index-index #checkout select option,
.firecheckout-index-index .modal-custom select option,
.firecheckout-index-index .modal-popup select option {
    background: #ffffff !important;
    color: #0f224c !important;
}
/* Placeholder text: muted */
.firecheckout-index-index #checkout input::placeholder,
.firecheckout-index-index .modal-custom input::placeholder,
.firecheckout-index-index .modal-popup input::placeholder,
.firecheckout-index-index #checkout textarea::placeholder,
.firecheckout-index-index .modal-custom textarea::placeholder,
.firecheckout-index-index .modal-popup textarea::placeholder {
    color: #94a3b8 !important;
}
/* Focus state */
.firecheckout-index-index #checkout input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):focus,
.firecheckout-index-index .modal-custom input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):focus,
.firecheckout-index-index .modal-popup input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):focus,
.firecheckout-index-index #checkout select:focus,
.firecheckout-index-index .modal-custom select:focus,
.firecheckout-index-index .modal-popup select:focus,
.firecheckout-index-index #checkout textarea:focus,
.firecheckout-index-index .modal-custom textarea:focus,
.firecheckout-index-index .modal-popup textarea:focus {
    background-color: #ffffff !important;
    border-color: #0f224c !important;
    box-shadow: 0 0 0 3px rgba(15, 34, 76, 0.12) !important;
}
/* Autofill: white bg, navy text */
.firecheckout-index-index #checkout input:-webkit-autofill,
.firecheckout-index-index .modal-custom input:-webkit-autofill,
.firecheckout-index-index .modal-popup input:-webkit-autofill,
.firecheckout-index-index #checkout select:-webkit-autofill,
.firecheckout-index-index .modal-custom select:-webkit-autofill,
.firecheckout-index-index .modal-popup select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px #ffffff inset !important;
    -webkit-text-fill-color: #0f224c !important;
}

/* ─── Billing address & payment step selects (belt-and-suspenders override) ─── */
.firecheckout-index-index .checkout-billing-address select,
.firecheckout-index-index .billing-address-form select,
.firecheckout-index-index .payment-method-content select,
.firecheckout-index-index #co-payment-form select {
    background-color: #ffffff !important;
    color: #0f224c !important;
    border-color: #d1d9e8 !important;
    border-radius: 8px !important;
}
.firecheckout-index-index .checkout-billing-address .field select:not([multiple]),
.firecheckout-index-index .billing-address-form .field select:not([multiple]),
.firecheckout-index-index .payment-method-content .field select:not([multiple]),
.firecheckout-index-index #co-payment-form .field select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath stroke='%230f224c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 32px !important;
}

/* ─── Payment Method step box ─── */
/* li#payment gets navy. The div.checkout-payment-method INSIDE it has its own white
   background that covers everything — clear it, then restyle the content area. */
.firecheckout-index-index #payment {
    background: #0f224c !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(15,34,76,0.18) !important;
    overflow: hidden !important;
    padding: 0 !important;
}
/* Inner div: clear its white background so parent navy shows */
.firecheckout-index-index #payment > div,
.firecheckout-index-index #payment .checkout-payment-method {
    background: transparent !important;
    padding: 0 !important;
}
/* Step-title: white text on transparent (navy from li shows) */
.firecheckout-index-index #payment .step-title,
.firecheckout-index-index #payment [data-role="title"] {
    background: transparent !important;
    color: #ffffff !important;
    padding: 20px 20px 15px !important;
}
/* Payment content area: white, inset 20px from navy edges */
.firecheckout-index-index #payment .step-content {
    background: #ffffff !important;
    margin: 0 20px 20px !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    color: #0f224c !important;
}
/* Payment method text: navy */
.firecheckout-index-index #payment .payment-method-title label,
.firecheckout-index-index #payment .payment-method-content,
.firecheckout-index-index #payment .actions-toolbar {
    color: #0f224c !important;
}
/* Hide duplicate "Apply Discount Code" inside payment step */
.firecheckout-index-index #payment .payment-option {
    display: none !important;
}

/* ─── Shipping method table: navy text on white ──────── */
.firecheckout-index-index .table-checkout-shipping-method tbody tr.row td,
.firecheckout-index-index .table-checkout-shipping-method tbody tr td {
    color: #0f224c !important;
}
/* col-carrier cell: carrier name + logo inline via amstartes-logo span */
.firecheckout-index-index .table-checkout-shipping-method .col-carrier {
    white-space: nowrap !important;
}
/* UPS / carrier logo: inline next to carrier title text */
.firecheckout-index-index .table-checkout-shipping-method .amstartes-logo {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
}
.firecheckout-index-index .table-checkout-shipping-method .amstartes-logo img,
.firecheckout-index-index .table-checkout-shipping-method tr.row td img {
    height: 22px !important;
    width: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ─── Place Order button: yellow + fully rounded ──────── */
.firecheckout-index-index .place-order .actions-toolbar .primary .action {
    background: #f5b800 !important;
    border-radius: 25px !important;
    color: #0f172a !important;
    border: none !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 16px rgba(245, 184, 0, 0.35) !important;
    transition: all 0.2s ease !important;
}
.firecheckout-index-index .place-order .actions-toolbar .primary .action:hover,
.firecheckout-index-index .place-order .actions-toolbar .primary .action:focus {
    background: #ffc920 !important;
    border-radius: 25px !important;
    color: #0f172a !important;
    box-shadow: 0 8px 24px rgba(245, 184, 0, 0.45) !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════
   AUTHORS LISTING PAGE  (attributepages-authors)
   ═══════════════════════════════════════════════════════ */

/* Hide default Magento page title on authors listing */
.attributepages-authors .page-title-wrapper { display: none !important; }

/* Page background matches the surface colour of the authors component */
.attributepages-authors .column.main,
.attributepages-authors .columns,
.attributepages-authors .page-main-full-width,
.attributepages-authors main#maincontent,
.attributepages-authors .page-wrapper {
    background: #f1f5f9 !important;
}

/* ===== VHG Authors — two-panel 2026 ===== */

.vhg-root {
    --clr-navy:       #0f224c;
    --clr-dark:       #0f172a;
    --clr-teal:       #0d9488;
    --clr-teal-lt:    #14b8a6;
    --clr-gold:       #f5b800;
    --clr-surface:    #f1f5f9;
    --clr-border:     #e2e8f0;
    --clr-text:       #1e293b;
    --clr-muted:      #64748b;
    --sidebar-w:      288px;
    --trans:          0.2s cubic-bezier(.4,0,.2,1);
    --shadow-card:    0 1px 3px rgba(0,0,0,.07),0 4px 14px rgba(15,34,76,.06);
    --shadow-hover:   0 8px 28px rgba(15,34,76,.17);
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow-x: clip;
    font-family: inherit;
    color: var(--clr-text);
    background: var(--clr-surface);
}

/* ─── Hero ─────────────────────────────────── */
.vhg-hero {
    background: linear-gradient(120deg,var(--clr-dark) 0%,var(--clr-navy) 55%,#183878 100%);
    padding: 48px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.vhg-hero::before {
    content:'';
    position:absolute;inset:0;
    background: radial-gradient(ellipse 70% 80% at 0% 50%,rgba(13,148,136,.15),transparent 60%),
                radial-gradient(ellipse 50% 100% at 100% 50%,rgba(245,184,0,.07),transparent 60%);
    pointer-events:none;
}
.vhg-hero__left { position:relative; z-index:1; }
.vhg-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,184,0,.13);
    border: 1px solid rgba(245,184,0,.3);
    color: var(--clr-gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.vhg-hero__title {
    font-size: clamp(24px,3.5vw,44px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.12;
}
.vhg-hero__title em { font-style:normal; color:var(--clr-teal-lt); }
.vhg-hero__sub {
    font-size: 15px;
    color: rgba(255,255,255,.5);
    margin: 0;
    max-width: 480px;
}
.vhg-hero__stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index:1;
}
.vhg-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 14px 28px;
    backdrop-filter: blur(10px);
    min-width: 110px;
}
.vhg-hero__stat-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--clr-gold);
    line-height: 1;
    letter-spacing: -.02em;
}
.vhg-hero__stat-lbl {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 5px;
}

/* ─── Body: sidebar + main ──────────────────── */
.vhg-body {
    display: flex;
    align-items: flex-start;
    min-height: 80vh;
}

/* ─── Sidebar ───────────────────────────────── */
.vhg-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(120deg,var(--clr-dark) 0%,var(--clr-navy) 55%,#183878 100%);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 32px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.vhg-sidebar::-webkit-scrollbar { width: 4px; }
.vhg-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.vhg-sidebar__heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: 6px;
}
.vhg-sidebar__title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.2;
}
.vhg-sidebar__title span { color: var(--clr-teal-lt); }
.vhg-sb-search { position: relative; margin-bottom: 8px; }
.vhg-sb-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.35);
    width: 15px;
    height: 15px;
    pointer-events: none;
}
.vhg-sb-search__input {
    width: 100%;
    padding: 11px 36px 11px 36px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--trans), background var(--trans);
}
.vhg-sb-search__input::placeholder { color: rgba(255,255,255,.3); }
.vhg-sb-search__input:focus {
    border-color: var(--clr-teal);
    background: rgba(255,255,255,.11);
}
.vhg-sb-search__clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.4);
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color var(--trans);
}
.vhg-sb-search__clear:hover { color: #fff; }
.vhg-sb-search__clear.visible { display: flex; }
.vhg-sb-meta {
    font-size: 12px;
    color: rgba(255,255,255,.35);
    margin-bottom: 20px;
    min-height: 18px;
    padding-left: 2px;
}
.vhg-sb-divider { height: 1px; background: rgba(255,255,255,.08); margin-bottom: 16px; }
.vhg-sb-az-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    margin-bottom: 8px;
}
.vhg-sb-az { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.vhg-sb-az__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--trans);
    width: 100%;
}
.vhg-sb-az__btn:hover { background: rgba(255,255,255,.08); }
.vhg-sb-az__btn.is-active { background: var(--clr-teal); }
.vhg-sb-az__btn.is-empty { opacity: .25; cursor: default; pointer-events: none; }
.vhg-sb-az__letter { font-size: 14px; font-weight: 700; color: #fff; width: 20px; }
.vhg-sb-az__bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    margin: 0 10px;
    overflow: hidden;
}
.vhg-sb-az__bar { height: 100%; background: rgba(255,255,255,.25); border-radius: 2px; transition: background var(--trans); }
.vhg-sb-az__btn.is-active .vhg-sb-az__bar { background: rgba(255,255,255,.5); }
.vhg-sb-az__count { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4); min-width: 22px; text-align: right; }
.vhg-sb-az__btn.is-active .vhg-sb-az__count { color: rgba(255,255,255,.8); }

/* ─── Main content ──────────────────────────── */
.vhg-main { flex: 1; min-width: 0; padding: 40px 36px 80px; }
.vhg-no-results {
    display: none;
    text-align: center;
    padding: 80px 20px;
    color: var(--clr-muted);
    font-size: 15px;
}
.vhg-no-results svg { display:block; margin: 0 auto 14px; opacity:.3; }

/* ─── Letter section ────────────────────────── */
.vhg-section { margin-bottom: 52px; scroll-margin-top: 20px; }
.vhg-section__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.vhg-section__badge {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--clr-navy),#1d4580);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(15,34,76,.2);
}
.vhg-section__line { flex:1; height:1px; background: linear-gradient(90deg,var(--clr-border),transparent); }
.vhg-section__pill {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--clr-muted);
    white-space: nowrap;
}

/* ─── Author grid ───────────────────────────── */
.vhg-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); gap: 14px; }

/* ─── Author card ───────────────────────────── */
.vhg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 14px 18px;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform var(--trans),box-shadow var(--trans),border-color var(--trans);
    overflow: hidden;
}
.vhg-card::after {
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background: linear-gradient(90deg,var(--clr-teal),var(--clr-gold));
    opacity:0;
    transition: opacity var(--trans);
}
.vhg-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(13,148,136,.18);
}
.vhg-card:hover::after { opacity:1; }
.vhg-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    flex-shrink: 0;
    letter-spacing: -.02em;
    box-shadow: 0 4px 10px rgba(0,0,0,.14);
}
.vhg-card__name {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--clr-text);
    line-height: 1.4;
    transition: color var(--trans);
    word-break: break-word;
}
.vhg-card:hover .vhg-card__name { color: var(--clr-navy); }
.vhg-card__cta {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--clr-teal);
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--trans),transform var(--trans);
}
.vhg-card:hover .vhg-card__cta { opacity:1; transform:translateY(0); }

/* ─── Responsive ────────────────────────────── */
@media (max-width: 900px) {
    .vhg-root { left:0; margin-left:0; width:100%; }
    .vhg-body { flex-direction: column; }
    .vhg-sidebar {
        width: 100%;
        height: auto;
        position: static;
        padding: 20px 20px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        align-items: flex-start;
    }
    .vhg-sidebar__title { margin-bottom: 0; }
    .vhg-sb-search { width: 100%; }
    .vhg-sb-az { flex-direction: row; flex-wrap: wrap; }
    .vhg-sb-az__btn { width: auto; padding: 6px 10px; gap: 4px; }
    .vhg-sb-az__bar-wrap { display: none; }
    .vhg-main { padding: 24px 16px 60px; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT PAGE — Sold Together blocks
   ═══════════════════════════════════════════════════════ */

/* ── Jumbotron wrapper ── */
.catalog-product-view .jumbotron.jumbotron-pastel {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 48px 0 !important;
    box-shadow: none !important;
}

/* Override the extension's own soldtogether.css which sets:
   .soldtogether-swiper .product-item { text-align: center }
   .soldtogether-block .totalprice    { text-align: center; display: inline }
   We must target these EXACT selectors to beat them */
.soldtogether-swiper .product-item,
.soldtogether-swiper .swiper-slide,
.soldtogether-swiper .product-item-info,
.soldtogether-swiper .product-item-details,
.soldtogether-swiper .product-item-name,
.soldtogether-block,
.soldtogether-block .block-content,
.soldtogether-block .block-title,
.soldtogether-block .amazonstyle-checkboxes,
.soldtogether-block .amazonstyle-checkboxes *,
.soldtogether-block .totalprice {
    text-align: left !important;
}
.soldtogether-block .totalprice {
    display: block !important;
}
.soldtogether-block .button-cart {
    display: block !important;
    text-align: left !important;
}

/* ── Shared: section title with navy accent underline ── */
.soldtogether-block .block-title,
.soldtogether-swiper .block-title {
    margin-bottom: 28px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    position: relative !important;
}
.soldtogether-block .block-title::after,
.soldtogether-swiper .block-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 48px !important;
    height: 2px !important;
    background: linear-gradient(to right, #0f224c, #1e4a9c) !important;
    border-radius: 2px !important;
}
.soldtogether-block .block-title strong,
.soldtogether-swiper .block-title strong {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #0f224c !important;
    letter-spacing: -0.01em !important;
}

/* ═══════════════════════════════════════════════════════
   FREQUENTLY BOUGHT TOGETHER (amazon-default block)
   Same book-card style as Customers Who Bought swiper
   ═══════════════════════════════════════════════════════ */
.soldtogether-block.amazon-default {
    font-family: "Noto Sans", sans-serif !important;
    background: #f8fafc !important;
}

/* Book cover images row */
.soldtogether-block .amazonstyle-images {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 28px !important;
    padding: 8px 0 !important;
    list-style: none !important;
}
/* Each book image: identical card style to swiper */
.soldtogether-block .amazonstyle-images li:not(.plus) {
    position: relative !important;
    border-radius: 3px 14px 14px 3px !important;
    transform-origin: left center !important;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease !important;
    box-shadow:
        4px 2px 0 1px #e2ddd4,
        8px 5px 0 1px #ede8df,
        0 4px 18px rgba(15,34,76,0.10) !important;
    flex-shrink: 0 !important;
}
.soldtogether-block .amazonstyle-images li:not(.plus):hover {
    transform: perspective(900px) rotateY(-8deg) !important;
    box-shadow:
        6px 3px 0 1px #d8d2c7,
        12px 7px 0 1px #e2ddd4,
        16px 20px 35px rgba(15,34,76,0.22) !important;
}
/* Navy spine — same 8px as swiper */
.soldtogether-block .amazonstyle-images li:not(.plus)::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 8px !important;
    background: linear-gradient(to right, #091428, #0f224c) !important;
    border-radius: 3px 0 0 3px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
.soldtogether-block .amazonstyle-images .product-image-photo {
    border-radius: 2px 14px 14px 2px !important;
    display: block !important;
}
/* + signs between books */
.soldtogether-block .amazonstyle-images li.plus {
    font-size: 2rem !important;
    font-weight: 300 !important;
    color: #cbd5e1 !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
/* Mobile: no tilt */
@media (max-width: 767px) {
    .soldtogether-block .amazonstyle-images li:not(.plus),
    .soldtogether-block .amazonstyle-images li:not(.plus):hover {
        transform: none !important;
        box-shadow:
            3px 2px 0 1px #e2ddd4,
            0 3px 12px rgba(15,34,76,0.10) !important;
    }
}

/* Checklist card: book-card style with navy spine */
.soldtogether-block .amazonstyle-checkboxes {
    position: relative !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 3px 14px 14px 3px !important;
    padding: 8px 20px 16px 24px !important;
    margin-bottom: 20px !important;
    box-shadow:
        4px 2px 0 1px #e2ddd4,
        8px 5px 0 1px #ede8df,
        0 4px 18px rgba(15,34,76,0.10) !important;
}
.soldtogether-block .amazonstyle-checkboxes::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 8px !important;
    background: linear-gradient(to right, #091428, #0f224c) !important;
    border-radius: 3px 0 0 3px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
.soldtogether-block .amazonstyle-checkboxes .product-items-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.soldtogether-block .amazonstyle-checkboxes .product-item-details {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 7px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.soldtogether-block .amazonstyle-checkboxes .product-item-details:last-child {
    border-bottom: none !important;
}
.soldtogether-block .product-item-name,
.soldtogether-block .product-item-name a {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #0f224c !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.soldtogether-block .product-item-name a:hover {
    color: #1e4a9c !important;
}
.soldtogether-block .price-box {
    white-space: nowrap !important;
}
.soldtogether-block .price-box .price {
    font-family: "Noto Sans", sans-serif !important;
    font-weight: 700 !important;
    color: #0f224c !important;
    font-size: 1.4rem !important;
}
.soldtogether-block .price-label {
    font-size: 1.1rem !important;
    color: #94a3b8 !important;
}

/* Add All to Cart button + total */
.soldtogether-block .button-cart {
    margin-bottom: 12px !important;
}
.soldtogether-block .soldtogether-cart-btn {
    background: linear-gradient(120deg, #0f172a 0%, #0f224c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 13px 32px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.soldtogether-block .soldtogether-cart-btn:hover {
    background: linear-gradient(120deg, #183878 0%, #1e4a9c 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(15,34,76,0.3) !important;
}
.soldtogether-block .totalprice .price-box .price {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #0f224c !important;
}

/* ═══════════════════════════════════════════════════════
   CUSTOMERS WHO BOUGHT THIS ITEM ALSO BOUGHT (swiper)
   Book card: same spine + page-stack + hover tilt as catalog
   ═══════════════════════════════════════════════════════ */
.soldtogether-swiper {
    background: #f8fafc !important;
    font-family: "Noto Sans", sans-serif !important;
    padding: 40px 0 !important;
}
/* 3D perspective wrapper per item */
.soldtogether-swiper .product-item {
    perspective: 900px !important;
}
/* Card: spine-left rounded-right, page-stack shadow */
.soldtogether-swiper .product-item-info {
    position: relative !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 3px 14px 14px 3px !important;
    padding: 16px 16px 16px 20px !important;
    transform-origin: left center !important;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease !important;
    box-shadow:
        4px 2px 0 1px #e2ddd4,
        8px 5px 0 1px #ede8df,
        0 4px 18px rgba(15,34,76,0.10) !important;
}
/* Navy spine strip */
.soldtogether-swiper .product-item-info::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 8px !important;
    background: linear-gradient(to right, #091428, #0f224c) !important;
    border-radius: 3px 0 0 3px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
/* Hover: 3D tilt + deeper shadow */
.soldtogether-swiper .product-item-info:hover {
    transform: perspective(900px) rotateY(-8deg) !important;
    box-shadow:
        6px 3px 0 1px #d8d2c7,
        12px 7px 0 1px #e2ddd4,
        16px 20px 35px rgba(15,34,76,0.22) !important;
}
/* Mobile: spine stays, no tilt */
@media (max-width: 767px) {
    .soldtogether-swiper .product-item-info,
    .soldtogether-swiper .product-item-info:hover {
        transform: none !important;
        box-shadow:
            3px 2px 0 1px #e2ddd4,
            0 3px 12px rgba(15,34,76,0.10) !important;
    }
}
.soldtogether-swiper .product-image-photo {
    border-radius: 4px !important;
    display: block !important;
    margin: 0 auto 12px !important;
}
.soldtogether-swiper .product-item-name,
.soldtogether-swiper .product-item-name a {
    font-family: "Noto Sans", sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #0f224c !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.soldtogether-swiper .product-item-name a:hover {
    color: #1e4a9c !important;
}
.soldtogether-swiper .price-box .price {
    font-family: "Noto Sans", sans-serif !important;
    font-weight: 700 !important;
    color: #0f224c !important;
    font-size: 1.3rem !important;
}
.soldtogether-swiper .price-label {
    font-size: 1.1rem !important;
    color: #94a3b8 !important;
}
/* Swiper nav arrows: navy circles */
.soldtogether-swiper .swiper-button-next,
.soldtogether-swiper .swiper-button-prev {
    color: #0f224c !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(15,34,76,0.15) !important;
}
.soldtogether-swiper .swiper-button-next::after,
.soldtogether-swiper .swiper-button-prev::after {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════
   FORMAT SWATCH (Physical / Digital) inside soldtogether
   CSS-only pill toggle — no JS sliding indicator
   ═══════════════════════════════════════════════════════ */
.soldtogether-block .swatch-attribute.filter_format,
.soldtogether-swiper .swatch-attribute.filter_format {
    margin: 6px 0 4px !important;
}
/* Hide the text label and selected-value readout */
.soldtogether-block .swatch-attribute.filter_format .swatch-attribute-label,
.soldtogether-block .swatch-attribute.filter_format .swatch-attribute-selected-option,
.soldtogether-swiper .swatch-attribute.filter_format .swatch-attribute-label,
.soldtogether-swiper .swatch-attribute.filter_format .swatch-attribute-selected-option {
    display: none !important;
}
/* Pill container */
.soldtogether-block .swatch-attribute.filter_format .swatch-attribute-options,
.soldtogether-swiper .swatch-attribute.filter_format .swatch-attribute-options {
    display: inline-flex !important;
    background: #f1f5f9 !important;
    border-radius: 20px !important;
    padding: 4px !important;
    gap: 2px !important;
}
/* Individual option pill */
.soldtogether-block .swatch-attribute.filter_format .swatch-option.text,
.soldtogether-swiper .swatch-attribute.filter_format .swatch-option.text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 14px !important;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    border-radius: 16px !important;
    border: none !important;
    cursor: pointer !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
}
/* Selected: navy gradient */
.soldtogether-block .swatch-attribute.filter_format .swatch-option.text.selected,
.soldtogether-swiper .swatch-attribute.filter_format .swatch-option.text.selected {
    background: linear-gradient(to right bottom, #1d3d7c, #14305e) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(20,48,94,0.35) !important;
    font-weight: 600 !important;
}
/* Hover (unselected) */
.soldtogether-block .swatch-attribute.filter_format .swatch-option.text:hover:not(.selected),
.soldtogether-swiper .swatch-attribute.filter_format .swatch-option.text:hover:not(.selected) {
    color: #374151 !important;
    background: #e2e8f0 !important;
}
/* Hidden input */
.soldtogether-block .swatch-input,
.soldtogether-swiper .swatch-input {
    display: none !important;
}

/* === Amasty Search Popup === */
.amsearch-result-section,
.amsearch-result-block,
.amsearch-result-block.-preload,
.amsearch-items-section { background: #fff !important; }

.amsearch-products-section.-grid .amsearch-product-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.amsearch-products-section.-grid .amsearch-product-list .amsearch-item.product-item {
    flex: 0 0 calc(33.333% - 6px);
    max-width: calc(33.333% - 6px);
    display: flex !important;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
    box-sizing: border-box;
}
.amsearch-products-section .amsearch-item .amsearch-description {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.amsearch-products-section .amsearch-item .amsearch-wrapper-inner { margin-top: auto; }
.amsearch-products-section .amsearch-item .amsearch-link.product-item-link {
    font-size: 1.3rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 5.5rem;
}
.amsearch-products-section .amsearch-item .tocart.primary {
    width: 100%;
    margin-top: 8px;
    padding: 8px 4px;
    font-size: 1.2rem;
}
.amsearch-slider-section .amsearch-item.product-item { background: #fff; padding: 8px; }


/* === Amsearch full white background fix === */
.amsearch-result-section,
.amsearch-result-block,
.amsearch-result-block.-preload,
.amsearch-items-section,
.amsearch-products-section,
.amsearch-products-list,
.amsearch-item-container,
.amsearch-collapsible-section,
.amsearch-collapsible-content,
.amsearch-tab-items,
.amsearch-slider-section,
.amsearch-product-list { background: #fff !important; }


/* Override amsearch CSS variables */
.amsearch-result-section,
.amsearch-wrapper-block {
    --amsearch-color-background: #ffffff;
    --amsearch-color-border: #e0e0e0;
}

/* === Amsearch slider bestsellers - full width fix === */
.amsearch-slider-section {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow: visible !important;
}
.amsearch-slider-section .amsearch-item.product-item {
    flex: 1 1 0 !important;
    min-width: 0;
    max-width: none !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column;
}
.amsearch-slider-section .amsearch-item.product-item .amsearch-description {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.amsearch-slider-section .amsearch-item.product-item .amsearch-wrapper-inner {
    margin-top: auto;
}

/* === Amasty Search Popup � VHG Theme =========================================
   Colors: Navy #0f172a | Teal #0d9488 | Slate bg #f1f5f9 | Border #e2e8f0
   ========================================================================== */

/* -- CSS variable overrides -- */
.amsearch-result-section,
.amsearch-wrapper-block,
.amsearch-result-block,
.amsearch-result-block.-preload {
    --amsearch-color-background: #ffffff;
    --amsearch-color-border: #e2e8f0;
    --amsearch-color-highlight: #0d9488;
    --amsearch-color-hover: #f1f5f9;
    --amsearch-color-text: #0f172a;
    --amsearch-color-text-secondary: #475569;
}

/* -- Popup container: rounded, shadow, border -- */
.amsearch-result-section {
    border-radius: 0 0 16px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    box-shadow: 0 8px 32px rgba(15,23,42,0.12) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* -- All inner backgrounds white -- */
.amsearch-result-block,
.amsearch-result-block.-preload,
.amsearch-items-section,
.amsearch-products-list,
.amsearch-products-section.-grid,
.amsearch-slider-section,
.amsearch-item-container {
    background: #ffffff !important;
}

/* -- Section headings -- */
.amsearch-title {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 2px solid #0d9488 !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
}

/* -- Highlighted match text: teal -- */
.amsearch-highlight {
    color: #0d9488 !important;
    font-weight: 700 !important;
    background: none !important;
}

/* -- Recent/popular search items -- */
.amsearch-item-container .amsearch-item,
.amsearch-item-container.-recent_searches .amsearch-item {
    border-radius: 8px !important;
    color: #0f172a !important;
    transition: background 0.15s !important;
}
.amsearch-item-container .amsearch-item:hover,
.amsearch-item-container.-recent_searches .amsearch-item.-match,
.amsearch-item-container.-recent_searches .amsearch-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* -- Search result list items -- */
.amsearch-item-container.-search_page .amsearch-item {
    border-radius: 8px !important;
    padding: 6px 8px !important;
}
.amsearch-item-container.-search_page .amsearch-item:hover {
    background: #f1f5f9 !important;
}

/* -- Product cards in grid -- */
.amsearch-products-section.-grid .amsearch-product-list .amsearch-item.product-item,
.amsearch-slider-section .amsearch-item.product-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}
.amsearch-products-section.-grid .amsearch-product-list .amsearch-item.product-item:hover,
.amsearch-slider-section .amsearch-item.product-item:hover {
    border-color: #0d9488 !important;
    box-shadow: 0 4px 12px rgba(13,148,136,0.12) !important;
}

/* -- Product title -- */
.amsearch-products-section .amsearch-link.product-item-link {
    color: #0f172a !important;
    font-weight: 600 !important;
}
.amsearch-products-section .amsearch-link.product-item-link:hover {
    color: #0d9488 !important;
    text-decoration: none !important;
}

/* -- Price -- */
.amsearch-products-section .price {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* -- Add to Cart button: teal -- */
.amsearch-products-section .tocart.primary,
.amsearch-slider-section .tocart.primary {
    background: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-top: 8px !important;
    transition: background 0.15s !important;
}
.amsearch-products-section .tocart.primary:hover,
.amsearch-slider-section .tocart.primary:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
}

/* -- Remove Add to Compare -- */
.amsearch-products-section .action.tocompare,
.amsearch-slider-section .action.tocompare,
.amsearch-item .action.tocompare {
    display: none !important;
}

/* -- "View all results" link -- */
.amsearch-link.-all {
    color: #0d9488 !important;
    font-weight: 600 !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 10px !important;
}
.amsearch-link.-all:hover {
    color: #0f766e !important;
}