/* =================================================================
 * Phase B + C — product card upgrades, hero microstats, tabs, rail,
 * reviews aggregate, wishlist/compare, recently-viewed.
 * Loaded after atlas-tokens.css; do not duplicate base tokens here.
 * ================================================================= */

/* ---------- Product card extensions (B1) ---------- */
.product { position: relative; }
.product .img { position: relative; }

.badge-save {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--orange, #E76A1E);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 4px 9px;
    border-radius: 999px;
    z-index: 2;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 6px rgba(59, 130, 246,0.25);
}

.wishlist-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    border: 1px solid var(--line, #E6EBF2);
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink-3, #5B6678);
    transition: all 0.15s ease;
    z-index: 3;
    padding: 0;
}
.wishlist-btn:hover {
    color: var(--orange, #E76A1E);
    border-color: var(--orange, #E76A1E);
    transform: scale(1.05);
}
.wishlist-btn.is-active {
    color: #fff;
    background: var(--orange, #E76A1E);
    border-color: var(--orange, #E76A1E);
}
.wishlist-btn.is-active svg { fill: currentColor; }

/* When badge-save also present, push wishlist to top-LEFT to avoid stacking. */
.product.is-sale .wishlist-btn { right: auto; left: 10px; }

.rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
}
.rating .stars { color: #F5A623; font-size: 13px; letter-spacing: 1px; }
.rating .rating-count { font-size: 11.5px; color: var(--ink-3, #5B6678); }

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
    font-size: 11.5px;
}
.eta {
    display: inline-flex; align-items: center; gap: 4px;
    background: #ECF8F0; color: #1F8A52;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.stock-low {
    background: #FFF4E6; color: #B45309;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.stock-low--last {
    background: #FEE2E2;
    color: #B91C1C;
    animation: aw-pulse 1.6s ease-in-out infinite;
}
@keyframes aw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.free-ship {
    display: inline-flex; align-items: center; gap: 4px;
    background: #E8F0FE; color: #1A4480;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.card-actions .add { flex: 1 1 auto; }
.compare-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--ink-3, #5B6678);
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}
.compare-toggle input {
    width: 14px; height: 14px;
    accent-color: var(--navy-500, #2E80FF);
}
.compare-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ---------- Hero microstats (B2) ---------- */
.hero-microstats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0 14px;
    padding: 14px 0;
    border-top: 1px solid var(--line, #E6EBF2);
    border-bottom: 1px solid var(--line, #E6EBF2);
}
.hero-microstats .ms { display: flex; flex-direction: column; gap: 1px; }
.hero-microstats .ms-n {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--navy-900, #0E2A47);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hero-microstats .ms-n svg { color: #F5A623; }
.hero-microstats .ms-n small {
    font-size: 12px;
    color: var(--ink-3);
    margin-left: 1px;
    font-weight: 600;
}
.hero-microstats .ms-l {
    font-size: 11.5px;
    color: var(--ink-3, #5B6678);
    line-height: 1.3;
}
@media (max-width: 720px) {
    .hero-microstats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---------- Featured products tab strip (B3) ---------- */
.aw-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 18px;
    padding: 4px;
    background: var(--pill-bg, #F2F5FA);
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.aw-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--ink-2, #2A3648);
    font-weight: 600;
    font-size: 13.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.aw-tab:hover { background: rgba(255,255,255,0.6); }
.aw-tab.is-active {
    background: #fff;
    color: var(--navy-900, #0E2A47);
    box-shadow: 0 1px 4px rgba(14,42,71,0.08);
}
.aw-tab__count {
    background: var(--line, #E6EBF2);
    color: var(--ink-3, #5B6678);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 2px;
}
.aw-tab.is-active .aw-tab__count {
    background: var(--navy-50, #E8F0FE);
    color: var(--navy-700, #1A4480);
}

/* ---------- Deals rail / Recently-viewed rail (B4 / C2) ---------- */
.aw-rail-section .sec-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}
.aw-rail-controls { display: flex; gap: 6px; }
.aw-rail-btn {
    width: 38px; height: 38px;
    border: 1px solid var(--line, #E6EBF2);
    background: #fff;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-2, #2A3648);
    cursor: pointer;
    transition: all 0.15s ease;
}
.aw-rail-btn:hover {
    background: var(--cream, #FAFBFD);
    border-color: var(--navy-500, #2E80FF);
    color: var(--navy-700, #1A4480);
}
.aw-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 16px;
    scrollbar-width: thin;
}
.aw-rail::-webkit-scrollbar { height: 8px; }
.aw-rail::-webkit-scrollbar-thumb {
    background: var(--line-2, #D4DDEA);
    border-radius: 999px;
}
.aw-rail__cell { scroll-snap-align: start; min-width: 0; }
@media (min-width: 900px) {
    .aw-rail { grid-auto-columns: minmax(280px, 1fr); }
}

/* ---------- Reviews aggregate (B5) ---------- */
.aw-reviews-agg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
}
.aw-reviews-agg__score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aw-reviews-agg__score .num {
    font-family: "Space Grotesk", sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--navy-900, #0E2A47);
    line-height: 1;
}
.aw-reviews-agg__score .stars {
    color: #F5A623;
    font-size: 18px;
    letter-spacing: 1px;
}
.aw-reviews-agg__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-3, #5B6678);
}
.aw-srcchip {
    display: inline-grid; place-items: center;
    width: 18px; height: 18px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 11px;
    color: #fff;
}
.aw-srcchip--google {
    background: linear-gradient(135deg, #4285F4 0%, #EA4335 50%, #FBBC04 100%);
}

/* ---------- Brand cells as filter links (C1) ---------- */
a.brand-cell {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
a.brand-cell:hover {
    border-color: var(--navy-500, #2E80FF);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14,42,71,0.06);
}

/* ---------- Wishlist + compare counters in header (C3) ---------- */
.aw-wish-btn .aw-cart-count,
.aw-cmp-btn .aw-cart-count {
    background: var(--orange, #E76A1E);
}

/* ---------- Toast (C3) ---------- */
.aw-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--navy-900, #0E2A47);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(14,42,71,0.25);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
    pointer-events: none;
}
.aw-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- B2C/B2B audience swap (B2 + E1) ---------- */
[data-aw-aud][hidden] { display: none !important; }
.aw-customer-switch button.is-active {
    background: var(--navy-900, #0E2A47);
    color: #fff;
}

/* Section-level audience hide. Body class set server-side from cookie + flipped instantly via header JS. */
body.aw-customer-b2c .aw-aud-b2b,
body.aw-customer-b2b .aw-aud-b2c { display: none !important; }

/* Customer switch — make sure both buttons visible, active state styled */
.aw-customer-switch {
    display: inline-flex;
    background: var(--pill-bg, #F2F5FA);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.aw-customer-switch button {
    border: none;
    background: transparent;
    color: var(--ink-3, #5B6678);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.aw-customer-switch button:hover { color: var(--ink-1, #0E1726); }
.aw-customer-switch button.is-active {
    background: var(--navy-900, #0E2A47);
    color: #fff;
    box-shadow: 0 1px 4px rgba(14,42,71,0.15);
}

/* ---------- Safety net: hide any default Woo related/upsells markup ---------- */
/* If a plugin re-registers default output, suppress raw <ul.products columns-*>. */
.aw--product .woocommerce > .related.products,
.aw--product .woocommerce > .upsells.products,
.aw--product section.related.products,
.aw--product section.upsells.products,
.aw--product .woocommerce ul.products.columns-4 { display: none !important; }

/* But our own Atlas rails inside .aw-rail-section must still render. */
.aw--product .aw-rail-section { display: block !important; }

/* ---------- Footer rebuild (E.6) ---------- */
.aw-foot-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 28px;
    padding: 44px 0 28px;
}
.aw-foot-brand .foot-brand { color: #fff; font-weight: 700; font-size: 16px; }
.aw-foot-brand .foot-brand-sub {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    line-height: 1.55;
    margin: 14px 0 12px;
    max-width: 280px;
}
.aw-foot-brand .foot-brand-contact {
    color: rgba(255,255,255,0.55);
    font-size: 12.5px;
    line-height: 1.7;
}
.aw-foot-brand .foot-brand-contact a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.3); }
.aw-foot-brand .foot-brand-contact a:hover { border-bottom-color: #fff; }

.aw-footer .foot-col { display: flex; flex-direction: column; gap: 8px; }
.aw-footer .foot-col h5 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    margin: 0 0 6px;
    font-weight: 700;
}
.aw-footer .foot-col a {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s ease;
    line-height: 1.6;
}
.aw-footer .foot-col a:hover { color: #fff; }

.aw-foot-trust {
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.aw-trust-badges { display: flex; flex-wrap: wrap; gap: 14px; }
.aw-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 12.5px;
    font-weight: 600;
}
.aw-trust-badge svg { color: var(--orange, #E76A1E); }

.aw-payments { display: flex; align-items: center; gap: 10px; }
.aw-payments__label {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}
.aw-payments__row {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.aw-payments__cell {
    background: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    height: 24px;
    display: grid;
    place-items: center;
}
.aw-payments__cell img { max-height: 16px; width: auto; max-width: 38px; }

.foot-bot {
    padding: 18px 0;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 900px) {
    .aw-foot-top {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .aw-foot-brand { grid-column: 1 / -1; }
    .aw-foot-trust { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
 *  Phase L — full triage: mobile compaction, Atlas blue accents,
 *           image centering, button polish, audience-aware nav
 * =================================================================== */

/* L.1 — audience-aware nav: same hide rules as section markers */
.nav.nav--desktop a.aw-aud-b2b,
.nav.nav--desktop a.aw-aud-b2c,
.aw-drawer__nav a.aw-aud-b2b,
.aw-drawer__nav a.aw-aud-b2c { display: inline-flex; }
body.aw-customer-b2c .nav.nav--desktop a.aw-aud-b2b,
body.aw-customer-b2c .aw-drawer__nav a.aw-aud-b2b { display: none !important; }
body.aw-customer-b2b .nav.nav--desktop a.aw-aud-b2c,
body.aw-customer-b2b .aw-drawer__nav a.aw-aud-b2c { display: none !important; }

/* L.2 — Advisor section: compact on mobile (drop chat mockup, keep copy+button) */
@media (max-width: 880px) {
    .aw-advisor { gap: 14px; padding: 0; }
    .aw-advisor__visual { display: none; }   /* chat mockup hidden on mobile to save vertical space */
    .aw-advisor-section .sec-title { font-size: 22px !important; line-height: 1.2; }
    .aw-advisor__bullets { gap: 4px; margin: 8px 0 12px; }
    .aw-advisor__bullets li { font-size: 12.5px; }
    .btn-wa { padding: 12px 18px; font-size: 14px; width: 100%; justify-content: center; }
}

/* L.3 — Atlas blue accent: borrow logo navy (--navy-900) and the bright accent navy.
 *       Body inherits the cream theme; we add a thicker blue thread through buttons +
 *       primary CTAs + hamburger so the brand reads. */
:root {
    --aw-blue: #0E2A47;       /* logo navy — primary brand */
    --aw-blue-hi: #143560;    /* lighter step for hovers/gradients */
    --aw-blue-bright: #2E80FF; /* link accent */
}

/* Hamburger toggle — Atlas-blue ink, larger tap target, NOT pushed to far-right */
@media (max-width: 880px) {
    .top .top-row {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
    }
    .top .brand { grid-column: 1; grid-row: 1; }
    .top .top-actions { grid-column: 3; grid-row: 1; gap: 4px; align-items: center; }
    .top .top-actions .icon-btn { width: 38px; height: 38px; }
    .top .aw-menu-toggle { grid-column: 4; grid-row: 1; order: 99; }
    .top .search { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}
.aw-menu-toggle {
    border-color: var(--aw-blue);
    color: var(--aw-blue);
}
.aw-menu-toggle span { background: var(--aw-blue); }
.aw-menu-toggle:hover {
    background: var(--aw-blue);
    border-color: var(--aw-blue);
}
.aw-menu-toggle:hover span { background: #fff; }

/* Drawer header: Atlas-blue strip behind logo for brand consistency */
.aw-drawer__header {
    background: linear-gradient(180deg, var(--aw-blue) 0%, var(--aw-blue-hi) 100%);
    color: #fff;
    border-bottom: none;
}
.aw-drawer__header .brand { color: #fff; }
.aw-drawer__header .brand img { filter: brightness(0) invert(1); }
.aw-drawer__close {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.aw-drawer__close:hover { background: rgba(255,255,255,0.22); }

/* Drawer nav links — accent active item with Atlas blue */
.aw-drawer__nav a.is-active {
    background: var(--navy-50, #E8F0FE);
    color: var(--aw-blue);
    padding-left: 12px !important;
}
.aw-drawer__nav a {
    border-left: 3px solid transparent;
    padding-left: 8px;
}
.aw-drawer__nav a.is-active { border-left-color: var(--aw-blue); }

/* L.3 cont — primary buttons get an Atlas-blue option (.btn-navy) for variety */
.btn-navy {
    background: var(--aw-blue);
    color: #fff !important;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.btn-navy:hover { background: var(--aw-blue-hi); transform: translateY(-1px); }

/* USP icons — switch to Atlas blue (was orange) so brand thread is consistent */
.aw-usp__icon { color: var(--aw-blue); }

/* Section eyebrows — promote Atlas-blue rather than pure ink */
.sec-eyebrow { color: var(--aw-blue); }

/* L.4 — Product card image: real centering & containment fix.
 *       Cards on landing/grid had inconsistent vertical centering due to .img wrapper height
 *       not being explicit. Force a 1:1 aspect with grid-place. */
.product .img {
    aspect-ratio: 1 / 1;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #fafbfd 0%, #eef2f8 100%);
    overflow: hidden;
    padding: 0 !important;
}
.product .img > img {
    max-width: 80% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    filter: drop-shadow(0 3px 8px rgba(14,42,71,0.08));
}

/* Mobile USP strip — vertically tighter, horizontal scroll-snap so 4 pills don't stack 4-deep */
@media (max-width: 720px) {
    .aw-usp__list {
        display: flex !important;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .aw-usp__list::-webkit-scrollbar { display: none; }
    .aw-usp__item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 10px;
    }
    .aw-usp__copy strong { font-size: 11.5px; }
    .aw-usp__copy em { display: none; }
}

/* Header search bar — Atlas blue focus ring */
.top .search input:focus {
    outline: 2px solid var(--aw-blue);
    outline-offset: 1px;
}

/* L.7 — Cart page Atlas styling pass — keep Woo functional, just polish edges */
.aw--cart .woocommerce-cart-form,
.aw--cart .cart_totals {
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 18px;
}
.aw--cart table.shop_table {
    border: none;
    margin: 0;
}
.aw--cart table.shop_table th {
    background: var(--cream);
    color: var(--ink-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 10px;
    border-bottom: 2px solid var(--line);
}
.aw--cart table.shop_table td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.aw--cart .product-thumbnail img { max-width: 64px; height: auto; border-radius: 6px; }
.aw--cart .product-name a { color: var(--aw-blue); font-weight: 600; text-decoration: none; }
.aw--cart .product-name a:hover { text-decoration: underline; }
.aw--cart .quantity .qty {
    width: 64px;
    text-align: center;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 8px;
}
.aw--cart .checkout-button,
.aw--cart .button[name="proceed"] {
    background: var(--orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 26px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246,0.25) !important;
    width: 100%;
    text-align: center;
    display: block;
}
.aw--cart .button {
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 10px 16px;
    color: var(--ink-1);
    cursor: pointer;
    transition: all 0.15s ease;
}
.aw--cart .button:hover { border-color: var(--aw-blue); }
.aw--cart .cart_totals h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin: 0 0 12px;
    color: var(--aw-blue);
}
.aw--cart .cart-collaterals { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 880px) {
    .aw--cart .woocommerce { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
    .aw--cart .woocommerce-cart-form { grid-column: 1; }
    .aw--cart .cart-collaterals { grid-column: 2; }
}
.aw--cart .coupon { display: flex; gap: 6px; align-items: center; }
.aw--cart .coupon input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; }

/* L.7 cont — Checkout page Atlas styling */
.aw--checkout .woocommerce-checkout {
    display: grid;
    gap: 22px;
}
@media (min-width: 880px) {
    .aw--checkout .woocommerce-checkout { grid-template-columns: 1.4fr 1fr; }
    .aw--checkout #customer_details { grid-column: 1; }
    .aw--checkout #order_review_heading,
    .aw--checkout #order_review { grid-column: 2; }
}
.aw--checkout #customer_details > div,
.aw--checkout #order_review {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
}
.aw--checkout h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
    color: var(--aw-blue);
    margin: 0 0 12px;
}
.aw--checkout .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.aw--checkout .form-row label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}
.aw--checkout .form-row input,
.aw--checkout .form-row select,
.aw--checkout .form-row textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aw--checkout .form-row input:focus,
.aw--checkout .form-row select:focus,
.aw--checkout .form-row textarea:focus {
    outline: none;
    border-color: var(--aw-blue);
    box-shadow: 0 0 0 3px rgba(14,42,71,0.08);
}
.aw--checkout #place_order {
    background: var(--orange) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 26px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    width: 100%;
    box-shadow: 0 4px 14px rgba(59, 130, 246,0.25) !important;
}

/* ===================================================================
 *  Phase K — Best-in-class Product Detail Page (PDP)
 * =================================================================== */

/* Slim breadcrumb bar above the PDP */
.aw-pdp-crumbs {
    background: var(--cream, #FAFBFD);
    border-bottom: 1px solid var(--line, #E6EBF2);
    padding: 10px 0;
    font-size: 12.5px;
    color: var(--ink-3, #5B6678);
}
.aw-pdp-crumbs .wrap {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.aw-pdp-crumbs a {
    color: var(--ink-2, #2A3648);
    text-decoration: none;
}
.aw-pdp-crumbs a:hover { color: var(--navy-700, #1A4480); text-decoration: underline; }
.aw-pdp-crumbs .sep { color: var(--ink-4, #8A95A6); }
.aw-pdp-crumbs__current {
    color: var(--ink-1, #0E1726);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50ch;
}

/* Hero section padding tighter on PDP */
.aw-pdp-hero { padding: 24px 0 36px; }

/* 2-column grid */
.aw-pdp {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}
@media (max-width: 980px) {
    .aw-pdp { grid-template-columns: 1fr; gap: 24px; }
}

/* GALLERY (left) */
.aw-pdp__gallery {
    position: relative;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--line, #E6EBF2);
    padding: 18px;
    overflow: hidden;
}
.aw-pdp__gallery .woocommerce-product-gallery {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}
.aw-pdp__gallery .woocommerce-product-gallery__image img {
    border-radius: 8px;
    background: var(--cream, #FAFBFD);
}
.aw-pdp__gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}
.aw-pdp__gallery .flex-control-thumbs li {
    width: calc(20% - 5px) !important;
    margin: 0 !important;
    list-style: none;
}
.aw-pdp__gallery .flex-control-thumbs img {
    border: 1.5px solid var(--line, #E6EBF2);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.aw-pdp__gallery .flex-control-thumbs img.flex-active,
.aw-pdp__gallery .flex-control-thumbs img:hover {
    opacity: 1;
    border-color: var(--navy-500, #2E80FF);
}

/* Save badge overlay on gallery */
.aw-pdp-save-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--orange, #E76A1E);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(59, 130, 246,0.28);
    z-index: 5;
}
.aw-pdp-save-badge small { font-weight: 600; opacity: 0.85; font-size: 11px; }

/* INFO COLUMN (right, sticky on desktop) */
.aw-pdp__info { position: relative; }
@media (min-width: 980px) {
    .aw-pdp__info-inner {
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        scrollbar-width: thin;
        padding-right: 6px;
    }
    .aw-pdp__info-inner::-webkit-scrollbar { width: 4px; }
    .aw-pdp__info-inner::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
}

/* Brand + condition + SKU chips */
.aw-pdp__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.aw-pdp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--pill-bg, #F2F5FA);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2, #2A3648);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aw-pdp-chip--brand { background: var(--navy-50, #E8F0FE); color: var(--navy-700, #1A4480); }
.aw-pdp-chip--cond { background: #ECF8F0; color: #1F8A52; }
.aw-pdp-chip--sku { background: transparent; color: var(--ink-3); }

/* Title */
.aw-pdp__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(22px, 3.2vw, 28px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--ink-1, #0E1726);
}

/* Rating row */
.aw-pdp__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink-2, #2A3648);
    font-size: 13px;
    margin-bottom: 12px;
}
.aw-pdp__rating .stars { color: #F5A623; font-size: 16px; letter-spacing: 1px; }
.aw-pdp__rating .num { font-weight: 700; }
.aw-pdp__rating .cnt { color: var(--ink-3); }
.aw-pdp__rating:hover .cnt { color: var(--navy-700); text-decoration: underline; }

/* Excerpt */
.aw-pdp__excerpt {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2, #2A3648);
    margin: 0 0 14px;
}
.aw-pdp__excerpt p { margin: 0 0 6px; }
.aw-pdp__excerpt ul { margin: 6px 0; padding-left: 20px; }

/* Spec strip */
.aw-pdp__specstrip {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 14px;
}
.aw-pdp__specstrip li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink-2, #2A3648);
}
.aw-pdp__specstrip svg { color: var(--green, #1F8A52); flex: 0 0 auto; }

/* PRICE BOX */
.aw-pdp__pricebox {
    background: linear-gradient(135deg, #FAFBFD 0%, #F2F5FA 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--line, #E6EBF2);
}
.aw-pdp__price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.aw-pdp__price-was {
    color: var(--ink-3, #5B6678);
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 500;
}
.aw-pdp__price-now {
    font-family: "Space Grotesk", sans-serif;
    color: var(--navy-900, #0E2A47);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
}
.aw-pdp__price-now .woocommerce-Price-amount { font-size: 30px; font-weight: 800; color: inherit; }
.aw-pdp__price-now del,
.aw-pdp__price-now ins { display: none; } /* Woo's "was/now" handled visually above */
.aw-pdp__price-save {
    background: var(--orange, #E76A1E);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aw-pdp__price-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--ink-3, #5B6678);
}
.aw-pdp__in3 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--ink-2, #2A3648);
}
.aw-pdp__in3 strong { color: var(--orange, #E76A1E); font-weight: 700; }

/* Promise cards (delivery + pickup) */
.aw-pdp__promise {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.aw-pdp-promise-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    font-size: 13.5px;
}
.aw-pdp-promise-card strong { display: block; font-weight: 700; color: var(--ink-1, #0E1726); line-height: 1.3; }
.aw-pdp-promise-card em { font-style: normal; color: var(--ink-3, #5B6678); font-size: 12px; display: block; margin-top: 1px; }
.aw-pdp-promise-card .ic { flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; }
.aw-pdp-promise-card--ok { border-color: #C9EBD5; background: #F2FCF6; }
.aw-pdp-promise-card--ok .ic { color: #1F8A52; }
.aw-pdp-promise-card--warn { border-color: #FBD9A8; background: #FFF8EE; }
.aw-pdp-promise-card--warn .ic { color: #B45309; }
.aw-pdp-promise-card--pickup { border-color: #BBD2EC; background: #EEF4FB; }
.aw-pdp-promise-card--pickup .ic { color: var(--navy-700, #1A4480); }
.aw-pdp-countdown { color: var(--orange, #E76A1E); font-weight: 700; }

/* Stock state */
.aw-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}
.aw-pdp__stock .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.aw-pdp__stock--in { background: #ECF8F0; color: #1F8A52; }
.aw-pdp__stock--in .dot { background: #1F8A52; box-shadow: 0 0 0 4px rgba(31,138,82,0.15); animation: aw-pulse-dot 1.8s infinite; }
.aw-pdp__stock--out { background: #FEF2F2; color: #B91C1C; }
.aw-pdp__stock--out .dot { background: #B91C1C; }
.aw-pdp__stock--out a { color: #128C40; font-weight: 700; }
.aw-pdp__stock small { font-weight: 500; opacity: 0.8; }
@keyframes aw-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(31,138,82,0.15); }
    50%      { box-shadow: 0 0 0 8px rgba(31,138,82,0.05); }
}

/* ADD TO CART (Woo's <form class="cart">) */
.aw-pdp__cart {
    margin-bottom: 14px;
}
.aw-pdp__cart .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.aw-pdp__cart .quantity {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--line, #E6EBF2);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.aw-pdp__cart .quantity input.qty {
    width: 56px;
    height: 48px;
    text-align: center;
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-1);
    background: transparent;
    -moz-appearance: textfield;
}
.aw-pdp__cart .quantity input.qty::-webkit-outer-spin-button,
.aw-pdp__cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.aw-pdp__cart .single_add_to_cart_button,
.aw-pdp__cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    background: var(--orange, #E76A1E);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 4px 14px rgba(59, 130, 246,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.aw-pdp__cart .single_add_to_cart_button:hover {
    background: #D8591A;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(59, 130, 246,0.34);
}
.aw-pdp__cart .single_add_to_cart_button:disabled {
    background: var(--ink-4, #8A95A6);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Variation table styling */
.aw-pdp__cart .variations { width: 100%; margin: 0 0 8px; border-collapse: collapse; }
.aw-pdp__cart .variations td { padding: 4px 0; }
.aw-pdp__cart .variations label { font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.aw-pdp__cart .variations select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--line, #E6EBF2);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

/* WhatsApp advisor CTA */
.aw-pdp__wa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F2FCF6;
    border: 1.5px solid #C9EBD5;
    border-radius: 12px;
    margin: 14px 0;
    text-decoration: none;
    color: var(--ink-1);
    transition: all 0.15s ease;
}
.aw-pdp__wa:hover {
    background: #E7F7EC;
    border-color: #25D366;
    transform: translateY(-1px);
}
.aw-pdp__wa-ic {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    background: #25D366;
    color: #fff;
    border-radius: 999px;
    display: grid;
    place-items: center;
}
.aw-pdp__wa-copy { flex: 1 1 auto; }
.aw-pdp__wa-copy strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-1, #0E1726); }
.aw-pdp__wa-copy em { font-style: normal; font-size: 12px; color: var(--ink-3, #5B6678); display: block; margin-top: 2px; }
.aw-pdp__wa-arrow { color: #128C40; flex: 0 0 auto; }
.aw-pdp__wa:hover .aw-pdp__wa-arrow { transform: translateX(3px); transition: transform 0.15s ease; }

/* Trust pills strip */
.aw-pdp__trustpills {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}
.aw-pdp__trustpills li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink-2, #2A3648);
    font-weight: 500;
}
.aw-pdp__trustpills svg { color: var(--navy-700, #1A4480); flex: 0 0 auto; }

/* Compact payment row */
.aw-pdp__pay {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--cream, #FAFBFD);
    border-radius: 10px;
    border: 1px solid var(--line, #E6EBF2);
}
.aw-pdp__pay-lbl { font-size: 11.5px; color: var(--ink-3, #5B6678); }
.aw-pdp__pay-row {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.aw-pdp__pay-row li {
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    border-radius: 4px;
    padding: 3px 6px;
    height: 22px;
    display: grid;
    place-items: center;
}
.aw-pdp__pay-row img { max-height: 14px; max-width: 36px; width: auto; }

/* PDP TABS */
.aw-pdp-tabs-section { padding-top: 20px; }
.aw-pdp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--line, #E6EBF2);
    margin-bottom: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
.aw-pdp-tab {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-3, #5B6678);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    scroll-snap-align: start;
}
.aw-pdp-tab:hover { color: var(--ink-1, #0E1726); }
.aw-pdp-tab.is-active {
    color: var(--navy-900, #0E2A47);
    border-bottom-color: var(--orange, #E76A1E);
}

.aw-pdp-tabpanel { display: none; }
.aw-pdp-tabpanel.is-active { display: block; }

.aw-pdp-prose { max-width: 70ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-2, #2A3648); }
.aw-pdp-prose h3 { font-family: "Space Grotesk", sans-serif; font-size: 18px; margin: 18px 0 8px; color: var(--ink-1, #0E1726); }
.aw-pdp-prose p { margin: 0 0 12px; }
.aw-pdp-prose ul { margin: 0 0 12px; padding-left: 20px; }
.aw-pdp-prose li { margin-bottom: 4px; }
.aw-pdp-prose a { color: var(--navy-700, #1A4480); }

/* Spec table */
.aw-pdp-spec-table {
    width: 100%;
    max-width: 720px;
    border-collapse: collapse;
    font-size: 14px;
}
.aw-pdp-spec-table th,
.aw-pdp-spec-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line, #E6EBF2);
    text-align: left;
    vertical-align: top;
}
.aw-pdp-spec-table th {
    width: 40%;
    color: var(--ink-3, #5B6678);
    font-weight: 600;
    background: var(--cream, #FAFBFD);
}
.aw-pdp-spec-table td { color: var(--ink-1, #0E1726); font-weight: 500; }
.aw-pdp-spec-table tr:last-child th,
.aw-pdp-spec-table tr:last-child td { border-bottom: none; }

/* Refined sticky mobile buy bar */
.aw--product .aw-sticky-buy {
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}
.aw-sticky-buy__wa {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    background: #25D366;
    color: #fff;
    border-radius: 10px;
    display: grid;
    place-items: center;
    text-decoration: none;
}
.aw-sticky-buy__wa svg { color: #fff; }
.aw--product .aw-sticky-buy .info .name { font-size: 12.5px; }
.aw--product .aw-sticky-buy .info .price { font-size: 14px; }
.aw--product .aw-sticky-buy .btn { padding: 12px 16px; font-size: 13.5px; }

/* ===================================================================
 *  Phase J — open-now indicator, a11y skip link, focus rings
 * =================================================================== */

/* Skip-to-content link — only visible on keyboard focus */
.aw-skip {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--navy-900, #0E2A47);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 1000;
    transition: top 0.2s ease;
    text-decoration: none;
}
.aw-skip:focus { top: 8px; }

/* Stronger visible focus everywhere — WCAG 2.2 minimum */
:focus-visible {
    outline: 2px solid var(--orange, #E76A1E);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Open-now indicator on contact opening hours */
.aw-open-now {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 12px;
    color: var(--ink-3, #5B6678);
}
.aw-open-now .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.aw-open-now .dot--open { background: #1F8A52; box-shadow: 0 0 0 3px rgba(31, 138, 82, 0.18); }
.aw-open-now .dot--closed { background: #B45309; }

/* ===================================================================
 *  Phase I — Hero declutter, WhatsApp USP, prominent laptop deals
 * =================================================================== */

/* ---------- Hero: ONE big card per audience (I.2) ---------- */
.hero-card.hv-bigcard {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(14, 42, 71, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-card.hv-bigcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(14, 42, 71, 0.14);
}
.hero-card.hv-bigcard:focus-visible {
    outline: 2px solid var(--navy-500, #2E80FF);
    outline-offset: 4px;
}

.hv-bigcard__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--orange, #E76A1E);
    color: #fff;
    border-radius: 12px;
    padding: 8px 14px;
    text-align: right;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28);
    z-index: 2;
}
.hv-bigcard__badge--navy {
    background: var(--navy-900, #0E2A47);
    box-shadow: 0 4px 12px rgba(14, 42, 71, 0.28);
}
.hv-bigcard__badge-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    font-weight: 700;
}
.hv-bigcard__badge-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 2px;
}

.hv-photo--big {
    aspect-ratio: 5 / 3;
    background: linear-gradient(135deg, #fafbfd 0%, #eef2f8 100%);
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line, #E6EBF2);
    padding: 18px;
}
.hv-photo--big img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(14, 42, 71, 0.14));
}

.hv-bigcard__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 18px 0;
}
.hv-bigcard__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-1, #0E1726);
}
.hv-bigcard__specs {
    font-size: 12.5px;
    color: var(--ink-3, #5B6678);
    margin-top: 2px;
}
.hv-bigcard__price { text-align: right; line-height: 1.1; }
.hv-bigcard__price .was {
    color: var(--ink-3, #5B6678);
    font-size: 13px;
    text-decoration: line-through;
    display: block;
}
.hv-bigcard__price .now {
    color: var(--navy-900, #0E2A47);
    font-weight: 800;
    font-size: 22px;
    font-family: "Space Grotesk", sans-serif;
}

.hv-bigcard__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 16px;
    color: var(--orange, #E76A1E);
    font-weight: 700;
    font-size: 14px;
    border-top: 1px dashed var(--line, #E6EBF2);
    margin-top: 14px;
}
.hv-bigcard__cta svg { transition: transform 0.15s ease; }
.hero-card.hv-bigcard:hover .hv-bigcard__cta svg { transform: translateX(4px); }
.hero-card.hv-bigcard.aw-aud-b2b .hv-bigcard__cta { color: var(--navy-700, #1A4480); }

/* ---------- WhatsApp sticky FAB (I.3) ---------- */
.aw-wa-fab {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 99;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #25D366;
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.42);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aw-wa-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
}
.aw-wa-fab__ic { display: grid; place-items: center; }
.aw-wa-fab__ic svg { color: #fff; }
@media (max-width: 720px) {
    .aw-wa-fab {
        bottom: 80px; /* clear the mobile bottom nav */
        right: 14px;
        padding: 10px 14px;
        font-size: 13px;
    }
    .aw-wa-fab__lbl { display: none; }
    .aw-wa-fab { width: 48px; height: 48px; padding: 0; justify-content: center; }
}

/* ---------- Drawer CTA WhatsApp variant ---------- */
.aw-drawer__cta--wa {
    background: #25D366 !important;
}
.aw-drawer__cta--wa:hover { background: #1FBA57 !important; }
.aw-drawer__cta--ghost {
    background: var(--pill-bg, #F2F5FA) !important;
    color: var(--ink-1, #0E1726) !important;
}
.aw-drawer__cta--ghost:hover { background: var(--line, #E6EBF2) !important; }

/* ---------- Advisor section (I.3) ---------- */
.aw-advisor-section { background: linear-gradient(135deg, #F0FBF4 0%, #E7F7EC 100%); }
.aw-advisor {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
}
.aw-advisor__copy .sec-eyebrow {
    color: #128C40;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aw-advisor__copy .sec-eyebrow svg { color: #25D366; }
.aw-advisor__copy h2 { color: var(--navy-900, #0E2A47); }
.aw-advisor__bullets {
    list-style: none;
    padding: 0;
    margin: 14px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.aw-advisor__bullets li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--ink-2, #2A3648);
}
.aw-advisor__bullets svg { color: #25D366; flex: 0 0 auto; }

.btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: #25D366;
    color: #fff !important;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32);
    transition: transform 0.15s ease;
}
.btn-wa:hover { background: #1FBA57; transform: translateY(-1px); }

.aw-advisor__visual { display: flex; justify-content: center; }
.aw-advisor__chat {
    background: #ECE5DD;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.4) 1px, transparent 2px),
      radial-gradient(circle at 80% 60%, rgba(255,255,255,0.3) 1px, transparent 2px);
    border-radius: 16px;
    padding: 18px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 32px rgba(14, 42, 71, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aw-chat-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.4;
    max-width: 84%;
    word-wrap: break-word;
}
.aw-chat-bubble--in {
    background: #fff;
    color: var(--ink-1, #0E1726);
    align-self: flex-start;
    border-top-left-radius: 4px;
}
.aw-chat-bubble--out {
    background: #DCF8C6;
    color: var(--ink-1, #0E1726);
    align-self: flex-end;
    border-top-right-radius: 4px;
}
.aw-chat-typing {
    align-self: flex-start;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    display: inline-flex;
    gap: 4px;
}
.aw-chat-typing span {
    width: 6px; height: 6px;
    background: #999;
    border-radius: 50%;
    animation: aw-chat-typing 1.4s infinite ease-in-out;
}
.aw-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.aw-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aw-chat-typing {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); }
    30% { opacity: 1; transform: scale(1); }
}

@media (max-width: 880px) {
    .aw-advisor { grid-template-columns: 1fr; gap: 24px; }
    .aw-advisor__visual { order: 2; }
}

/* ---------- Laptop deals teaser (I.4) ---------- */
.aw-laptop-deals-teaser { background: var(--cream, #FAFBFD); }
.aw-ldt {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 28px;
    align-items: center;
}
.aw-ldt__copy .aw-ldt__eyebrow {
    color: var(--orange, #E76A1E);
    display: inline-flex; align-items: center; gap: 6px;
}
.aw-ldt__cta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aw-ldt__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.aw-ldt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    border-radius: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s ease;
}
.aw-ldt-card:hover {
    transform: translateY(-2px);
    border-color: var(--orange, #E76A1E);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
}
.aw-ldt-card__save {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--orange, #E76A1E);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 2;
}
.aw-ldt-card__img {
    aspect-ratio: 1/1;
    display: grid; place-items: center;
    margin-bottom: 8px;
    overflow: hidden;
}
.aw-ldt-card__img img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    width: auto; height: auto;
}
.aw-ldt-card__name {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--ink-1, #0E1726);
    font-weight: 600;
    flex: 1 1 auto;
    margin-bottom: 6px;
}
.aw-ldt-card__price {
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-900, #0E2A47);
}

@media (max-width: 880px) {
    .aw-ldt { grid-template-columns: 1fr; }
    .aw-ldt__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .aw-ldt-card { padding: 8px; }
    .aw-ldt-card__name { font-size: 11.5px; }
}
@media (max-width: 540px) {
    .aw-ldt__grid { grid-template-columns: repeat(2, 1fr); }
    .aw-ldt__grid > .aw-ldt-card:nth-child(3) { display: none; }
}

/* ---------- Phase H.1 — fix .aw-container clipping bug on kassasystemen page ----------
 * The akb-hero / kassasystemen template uses `.aw-container` which never had a CSS rule.
 * Mirror the .wrap rule so any page using this class is centered + has 20px gutters. */
.aw-container {
    width: min(1240px, 100% - 40px);
    margin-inline: auto;
}

/* ---------- Phase G: vertical compression ---------- */
/* Tighten section padding sitewide — was ~64px each side, now ~36px on mobile / 48px desktop */
.sec { padding-top: 36px; padding-bottom: 36px; }
@media (min-width: 720px) {
    .sec { padding-top: 48px; padding-bottom: 48px; }
}

/* Section headers: tighter gap before content */
.sec .sec-header { margin-bottom: 16px; }
.sec .sec-title { margin: 4px 0 6px; }
.sec .sec-sub { margin: 0; }

/* Brands strip: single horizontal row at all sizes (was 6 grid cells stacking) */
.brands.brands--with-logos {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scrollbar-width: thin;
    grid-template-columns: none;
}
.brands.brands--with-logos::-webkit-scrollbar { height: 6px; }
.brands.brands--with-logos::-webkit-scrollbar-thumb { background: var(--line-2, #D4DDEA); border-radius: 999px; }
.brands.brands--with-logos .brand-cell {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 14px 12px;
    text-align: center;
}
.brand-cell__logo { height: 36px; margin-bottom: 4px; }
.brand-cell__logo img { max-height: 30px; }
.brand-cell .count { font-size: 11px; }

/* Assurance pillars: 4 across on tablet+, 2 on phone, compact padding */
.aw-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.aw-pillars__item {
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    border-radius: 10px;
    padding: 16px 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aw-pillars__ic {
    color: var(--orange, #E76A1E);
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: #FFF4E6;
    border-radius: 8px;
    margin-bottom: 4px;
}
.aw-pillars__title { font-size: 14px; margin: 0; font-weight: 700; }
.aw-pillars__sub { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin: 0; }
@media (max-width: 720px) {
    .aw-pillars { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .aw-pillars__item { padding: 12px 12px; }
}

/* Reviews + Assurance side-by-side on desktop (was stacked) */
@media (min-width: 1100px) {
    .aw-pillars-section + #faq { margin-top: -24px; }
}

/* Hero tighter on mobile — visual cards stack closer */
@media (max-width: 720px) {
    .hero { padding-top: 24px; padding-bottom: 24px; }
    .hero-grid { gap: 18px; }
    .hero-microstats { gap: 8px; padding: 10px 0; margin: 12px 0 8px; }
    .hero-microstats .ms-n { font-size: 16px; }
    .hero-microstats .ms-l { font-size: 11px; }
    .hero-visual { gap: 10px; }
    .hero-card { padding: 14px; }
    .hv-photo { aspect-ratio: 16/10; }
}

/* Categories tiles: 4 across desktop, 2 across mobile, compact */
.aw-catgrid { gap: 10px; }
.aw-catgrid__cell { /* no override here, tiles compact via tighter padding */ }
.aw-catgrid__tile { padding: 14px 12px; }
@media (max-width: 720px) {
    .aw-catgrid__tile { padding: 10px 10px; }
    .aw-catgrid__name { font-size: 13px; }
    .aw-catgrid__sub { display: none; } /* drop subtitle on mobile to compress */
}
.aw-catgrid__tile--illus .aw-catgrid__illus { height: 56px; }
.aw-catgrid__tile--illus .aw-catgrid__illus img { max-height: 56px; }

/* USP strip: tighter on mobile */
@media (max-width: 720px) {
    .aw-usp { padding: 8px 0; }
    .aw-usp__list { gap: 12px; padding: 4px; }
    .aw-usp__item { padding: 4px 8px; }
    .aw-usp__copy strong { font-size: 12px; }
    .aw-usp__copy em { font-size: 10.5px; }
}

/* FAQ items: less line-height, tighter */
.faq-item { padding: 10px 0; }
.faq-q { padding: 8px 0; }

/* Reduce the "alt" gray switch heaviness — softer */
.sec.alt { background: var(--cream, #FAFBFD); }

/* ---------- Favorieten + Vergelijken hub pages (G.2/G.3) ---------- */
.aw-hub {
    min-height: 200px;
}
.aw-hub__empty {
    text-align: center;
    color: var(--ink-3, #5B6678);
    font-size: 14px;
    padding: 40px 20px;
    background: var(--cream, #FAFBFD);
    border: 1px dashed var(--line, #E6EBF2);
    border-radius: 12px;
}

/* ---------- Assortiment category pills (F.5) — replaces vertical tile grid ---------- */
.aw-catfilter-section { padding: 14px 0 4px; }
.aw-catfilter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 6px 4px 14px;
    margin: 0 -4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.aw-catfilter::-webkit-scrollbar { height: 6px; }
.aw-catfilter::-webkit-scrollbar-thumb { background: var(--line-2, #D4DDEA); border-radius: 999px; }

.aw-catpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1.5px solid var(--line, #E6EBF2);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-2, #2A3648);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: all 0.15s ease;
}
.aw-catpill:hover {
    border-color: var(--navy-500, #2E80FF);
    color: var(--navy-700, #1A4480);
    transform: translateY(-1px);
}
.aw-catpill.is-active {
    background: var(--navy-900, #0E2A47);
    border-color: var(--navy-900, #0E2A47);
    color: #fff;
}
.aw-catpill__ic { color: currentColor; display: grid; place-items: center; }
.aw-catpill.is-active .aw-catpill__ic { opacity: 0.95; }
.aw-catpill__lbl { line-height: 1.2; }
.aw-catpill__n {
    background: var(--pill-bg, #F2F5FA);
    color: var(--ink-3, #5B6678);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.aw-catpill.is-active .aw-catpill__n {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

/* Hide the old vertical .cat-tiles grid in case it appears anywhere */
.cat-tiles { display: none !important; }

/* ---------- Hamburger drawer (F.4) ---------- */
.aw-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(14, 23, 38, 0.5);
    backdrop-filter: blur(2px);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.aw-drawer-backdrop.is-open { opacity: 1; }

.aw-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 92vw);
    background: #fff;
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(14, 42, 71, 0.18);
}
.aw-drawer.is-open { transform: translateX(0); }

.aw-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line, #E6EBF2);
}
.aw-drawer__header .brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink-1, #0E1726);
    font-weight: 700;
}
.aw-drawer__header .brand-mark {
    color: var(--navy-700, #1A4480);
}
.aw-drawer__close {
    background: var(--pill-bg, #F2F5FA);
    border: none;
    width: 36px; height: 36px;
    border-radius: 999px;
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--ink-2, #2A3648);
}
.aw-drawer__close:hover { background: var(--line, #E6EBF2); }

.aw-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.aw-drawer__section { display: flex; flex-direction: column; gap: 8px; }
.aw-drawer__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3, #5B6678);
}
.aw-customer-switch--drawer { width: 100%; }
.aw-customer-switch--drawer button { flex: 1; padding: 10px 12px; font-size: 13px; }

.aw-drawer__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pill-bg, #F2F5FA);
    border-radius: 10px;
    padding: 4px 12px;
}
.aw-drawer__search .icon { color: var(--ink-3); flex: 0 0 auto; display: grid; place-items: center; }
.aw-drawer__search input {
    border: none;
    background: transparent;
    flex: 1;
    padding: 10px 0;
    font-size: 14px;
    outline: none;
    color: var(--ink-1, #0E1726);
}

.aw-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--line, #E6EBF2);
    border-bottom: 1px solid var(--line, #E6EBF2);
    padding: 8px 0;
}
.aw-drawer__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    text-decoration: none;
    color: var(--ink-1, #0E1726);
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.aw-drawer__nav a:hover { background: var(--cream, #FAFBFD); padding-left: 8px; padding-right: 8px; }
.aw-drawer__nav a.is-active { color: var(--navy-700, #1A4480); }
.aw-drawer__nav a svg { color: var(--ink-3, #5B6678); transition: transform 0.15s ease; }
.aw-drawer__nav a:hover svg { transform: translateX(3px); color: var(--orange, #E76A1E); }

.aw-drawer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--navy-900, #0E2A47);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease;
}
.aw-drawer__cta:hover { background: var(--navy-700, #1A4480); }

.aw-drawer__account {
    border-top: 1px solid var(--line, #E6EBF2);
    padding-top: 12px;
}
.aw-drawer__account a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--ink-2, #2A3648);
    font-size: 13.5px;
    border-radius: 4px;
}
.aw-drawer__account a:hover { color: var(--navy-700, #1A4480); }

.aw-drawer__trust {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line, #E6EBF2);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink-3, #5B6678);
    font-size: 12px;
}
.aw-drawer__trust div { display: inline-flex; align-items: center; gap: 6px; }
.aw-drawer__trust svg { color: var(--green, #1F8A52); flex: 0 0 auto; }

/* Hide drawer audience-mismatched buttons */
body.aw-customer-b2c .aw-drawer .aw-aud-b2b,
body.aw-customer-b2b .aw-drawer .aw-aud-b2c { display: none !important; }

/* Hamburger toggle visibility */
.aw-menu-toggle { display: none; }
@media (max-width: 880px) {
    .aw-menu-toggle { display: inline-flex; }
    .nav.nav--desktop { display: none !important; }
    .top-actions .aw-customer-switch,
    .top-actions .aw-wish-btn,
    .top-actions .aw-cmp-btn { display: none !important; }
    /* Mobile header simplified: brand + search + cart + menu */
    .top .top-row { gap: 8px; }
    .top .search { order: 4; flex: 1 1 100%; margin-top: 8px; }
    .top .top-actions .icon-btn { display: inline-grid; }
    .promo .promo-pay { display: none; }
    .promo .promo-strip span:nth-child(n+3) { display: none; }
}

/* Hamburger button refresh */
.aw-menu-toggle {
    width: 40px; height: 40px;
    border: 1px solid var(--line, #E6EBF2);
    background: #fff;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
}
.aw-menu-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: var(--ink-1, #0E1726);
    border-radius: 2px;
    transition: all 0.2s ease;
}
.aw-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.aw-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aw-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile bottom nav (F.3) ---------- */
.aw-mobnav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line, #E6EBF2);
    padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(14,42,71,0.06);
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}
@media (max-width: 720px) {
    .aw-mobnav { display: grid; }
    body { padding-bottom: 70px; }
    /* Hamburger fully drives nav on mobile — drop the inline nav links from main header to declutter */
    .top-row .nav { display: none !important; }
}
.aw-mobnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--ink-3, #5B6678);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 8px;
    transition: color 0.15s ease;
    position: relative;
}
.aw-mobnav__item:hover, .aw-mobnav__item:active { color: var(--navy-700, #1A4480); }
.aw-mobnav__item.is-active { color: var(--navy-900, #0E2A47); }
.aw-mobnav__ic { display: grid; place-items: center; height: 24px; position: relative; }
.aw-mobnav__lbl { line-height: 1; }
.aw-mobnav__badge {
    position: absolute;
    top: -3px; right: -7px;
    background: var(--orange, #E76A1E);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    line-height: 1;
}
.aw-mobnav__badge.is-hidden { display: none; }

/* Hide the audience-mismatched mobnav slot so we always render 5 items */
body.aw-customer-b2c .aw-mobnav .aw-aud-b2b,
body.aw-customer-b2b .aw-mobnav .aw-aud-b2c { display: none !important; }

/* ---------- B2C trust ribbon under header ---------- */
.aw-trust-ribbon {
    background: var(--cream, #FAFBFD);
    border-bottom: 1px solid var(--line, #E6EBF2);
    font-size: 12.5px;
    color: var(--ink-2, #2A3648);
    padding: 8px 0;
    display: none;
}
body.aw-customer-b2c .aw-trust-ribbon { display: block; }
.aw-trust-ribbon .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: center;
}
.aw-trust-ribbon .item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.aw-trust-ribbon .item svg { color: var(--green, #1F8A52); flex: 0 0 auto; }
@media (max-width: 720px) {
    .aw-trust-ribbon { font-size: 11.5px; }
    .aw-trust-ribbon .wrap { gap: 12px; }
}

/* ---------- Help-me-kiezen wizard (E.5) ---------- */
.aw-helper-section { background: linear-gradient(135deg, #FAFBFD 0%, #EEF4FB 100%); }
.aw-helper {
    background: #fff;
    border: 1px solid var(--line, #E6EBF2);
    border-radius: 14px;
    padding: 26px 22px 22px;
    box-shadow: 0 4px 18px rgba(14, 42, 71, 0.04);
    max-width: 760px;
    margin: 0 auto;
}
.aw-helper__step {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
    display: none;
}
.aw-helper__step.is-active { display: block; }
.aw-helper__step legend {
    font-family: "Space Grotesk", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink-1, #0E1726);
    margin: 0 0 14px;
    padding: 0;
}
.aw-helper__opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.aw-helper__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border: 1.5px solid var(--line, #E6EBF2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
}
.aw-helper__opt:hover { border-color: var(--navy-500, #2E80FF); transform: translateY(-1px); }
.aw-helper__opt input { position: absolute; opacity: 0; pointer-events: none; }
.aw-helper__opt input:checked ~ .aw-helper__lbl,
.aw-helper__opt input:checked ~ .aw-helper__ic { color: var(--navy-700, #1A4480); }
.aw-helper__opt:has(input:checked) {
    border-color: var(--navy-500, #2E80FF);
    background: var(--navy-50, #E8F0FE);
}
.aw-helper__ic {
    flex: 0 0 auto;
    color: var(--navy-700, #1A4480);
    display: grid; place-items: center;
    width: 36px; height: 36px;
    background: var(--pill-bg, #F2F5FA);
    border-radius: 8px;
}
.aw-helper__lbl {
    font-size: 13.5px;
    color: var(--ink-2, #2A3648);
    line-height: 1.35;
}
.aw-helper__lbl strong { display: inline; font-weight: 700; color: var(--ink-1, #0E1726); }
.aw-helper__lbl em { font-style: normal; color: var(--ink-3, #5B6678); font-size: 12px; display: block; margin-top: 1px; }
.aw-helper__progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 14px;
}
.aw-helper__dot {
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--line, #E6EBF2);
    cursor: pointer;
    transition: all 0.15s ease;
}
.aw-helper__dot.is-active { background: var(--navy-700, #1A4480); transform: scale(1.3); }
.aw-helper__dot.is-done   { background: var(--orange, #E76A1E); }
.aw-helper__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- Brand cells with logo PNGs (E.4) ---------- */
.brands.brands--with-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 900px) { .brands.brands--with-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .brands.brands--with-logos { grid-template-columns: repeat(2, 1fr); } }

.brand-cell__logo {
    display: grid;
    place-items: center;
    height: 44px;
    margin-bottom: 6px;
}
.brand-cell__logo img {
    max-width: 80%;
    max-height: 38px;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: opacity 0.15s ease, filter 0.15s ease;
}
a.brand-cell:hover .brand-cell__logo img { opacity: 1; filter: grayscale(0); }

/* ---------- Category illustrations (E.4) ---------- */
.aw-catgrid__tile--illus .aw-catgrid__illus {
    display: grid; place-items: center;
    height: 80px;
    margin-bottom: 4px;
}
.aw-catgrid__tile--illus .aw-catgrid__illus img {
    max-width: 80%;
    max-height: 80px;
    width: auto; height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(14,42,71,0.06));
}

/* ---------- Hero rebuild (E.2) — real photo + clickable cards ---------- */
.hero-card.hv-clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
}
.hero-card.hv-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(14, 42, 71, 0.12);
}
.hero-card.hv-clickable:focus-visible {
    outline: 2px solid var(--navy-500, #2E80FF);
    outline-offset: 4px;
}

.hv-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #fafbfd 0%, #eef2f8 100%);
    border-radius: 10px;
    margin: 8px 0 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8px;
}
.hv-photo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(14, 42, 71, 0.12));
}

.hero-card.hv-laptop .name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-1, #0E1726);
    margin: 4px 0 2px;
}
.hero-card.hv-laptop .specs {
    font-size: 12px;
    color: var(--ink-3, #5B6678);
    margin-bottom: 8px;
}
.hero-card.hv-laptop .price .now {
    font-weight: 800;
    font-size: 16px;
    color: var(--navy-900, #0E2A47);
}
.hero-card.hv-laptop .price .was {
    font-size: 12px;
    color: var(--ink-3, #5B6678);
    text-decoration: line-through;
    margin-left: 6px;
}
.hero-card.hv-pos h4 {
    font-size: 14px;
    margin: 4px 0 6px;
    color: var(--ink-1, #0E1726);
}
.hero-card.hv-pos .price .now {
    font-weight: 700;
    color: var(--navy-900, #0E2A47);
    font-size: 14px;
}

/* ---------- Hero deal card (B2C-only, F.2) ---------- */
.hero-card.hv-deal {
    background: linear-gradient(135deg, var(--orange, #E76A1E) 0%, #60A5FA 100%);
    color: #fff;
    text-align: center;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.hero-card.hv-deal .label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    font-weight: 700;
}
.hv-deal-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    margin: 4px 0;
}
.hv-deal-sub {
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.9;
}
.hv-deal-cta {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0,0,0,0.18);
    padding: 6px 10px;
    border-radius: 999px;
    align-self: center;
}
.hero-card.hv-deal:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(59, 130, 246,0.25); }

/* Rating stamp variant (B2C) */
.hero-card.hv-stamp--rating .big {
    color: var(--navy-900, #0E2A47);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-card.hv-stamp--rating .big svg { color: #F5A623; }

/* ---------- Sticky mobile add-to-cart bar (D1) ---------- */
.aw-sticky-buy {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line, #E6EBF2);
    box-shadow: 0 -4px 16px rgba(14,42,71,0.08);
    padding: 10px 14px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 90;
}
.aw-sticky-buy .info {
    flex: 1 1 auto;
    min-width: 0;
}
.aw-sticky-buy .name {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-1, #0E1726);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.aw-sticky-buy .price {
    font-weight: 700;
    color: var(--navy-900, #0E2A47);
    font-size: 14px;
}
.aw-sticky-buy .btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    background: var(--orange, #E76A1E);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 13.5px;
}
@media (max-width: 720px) {
    .aw--product .aw-sticky-buy { display: flex; }
    .aw--product main { padding-bottom: 80px; }
}

/* ============ Atlas fix 2026-06-01 (pagination + translate position) ============ */
.woocommerce-pagination ul.page-numbers, ul.page-numbers, .aw-pagination,
nav.woocommerce-pagination ul, .page-numbers-wrap ul {
  list-style: none !important; display: flex !important; flex-wrap: wrap !important;
  gap: 8px !important; justify-content: center !important; align-items: center !important;
  padding: 0 !important; margin: 32px auto !important;
}
.woocommerce-pagination ul.page-numbers li, ul.page-numbers li { list-style: none !important; margin: 0 !important; }
.page-numbers {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid #e2e8f0;
  border-radius: 8px; background: #fff; color: #0b1f4d; font-weight: 600;
  text-decoration: none; line-height: 1;
}
.page-numbers.current { background: #3B82F6 !important; color: #fff !important; border-color: #3B82F6 !important; }
.page-numbers:hover { background: #0b1f4d !important; color: #fff !important; border-color: #0b1f4d !important; }
.page-numbers.dots { border: none !important; background: transparent !important; }

/* GTranslate switcher -> bottom-LEFT, clear of WhatsApp FAB + mobile nav */
.gt_float_switcher { left: 16px !important; right: auto !important; bottom: 24px !important; z-index: 9998 !important; }
@media (max-width: 720px) { .gt_float_switcher { left: 12px !important; bottom: 92px !important; } }
.aw-wa-fab { z-index: 9999 !important; }

/* ===== PHASE 1: WA FAB — hidden only when cta-stack is visible ===== */
/* atlas-cta-stack handles WhatsApp + phone. aw-wa-fab is a fallback. */
body:not(.has-atlas-cta-stack) .aw-wa-fab { display: flex !important; }
body.has-atlas-cta-stack .aw-wa-fab { display: none !important; }
/* CTA stack clears the mobile bottom nav bar */
@media (max-width: 720px) { .atlas-cta-stack { bottom: 92px !important; right: 12px !important; } }

/* ===================================================================
   ATLAS BRAND + MOBILE SWEEP 2026-06-01 (single merged block)
   Blue identity replaces orange; punchy navy hero; mobile bottom-zone fixes.
   Loads after atlas-tokens.css -> wins cascade. Keeps green WhatsApp/success.
   =================================================================== */
:root{
  --atlas-blue:#3B82F6; --atlas-blue-600:#2f6fe0; --atlas-blue-200:#93c5fd;
  --atlas-navy:#0b1f4d; --atlas-ink:#0a1530;
}

/* ---- 1. Save/discount badges -> Atlas blue ---- */
.badge-save,.aw-ldt-card__save,.aw-pdp-save-badge,.aw-pdp__price-save,.hv-bigcard__badge{
  background:var(--atlas-blue)!important;
  box-shadow:0 2px 6px rgba(59,130,246,.30)!important;
}
.hv-bigcard__badge--navy{background:var(--atlas-navy)!important;}

/* ---- 2. Primary purchase CTAs: orange -> Atlas blue (keep size/shadow) ---- */
.aw-pdp__cart .single_add_to_cart_button,
.aw-pdp__cart button.single_add_to_cart_button,
.aw--cart .checkout-button,.aw--cart .button[name="proceed"],
.aw--checkout #place_order,
.aw-sticky-buy .btn,.aw--product .aw-sticky-buy .btn{
  background:var(--atlas-blue)!important;
  box-shadow:0 4px 14px rgba(59,130,246,.30)!important;
}
.aw-pdp__cart .single_add_to_cart_button:hover,
.aw-sticky-buy .btn:hover{background:var(--atlas-blue-600)!important;box-shadow:0 6px 18px rgba(59,130,246,.40)!important;}

/* ---- 3. Misc orange accents -> blue ---- */
.aw-pillars__ic{color:var(--atlas-blue)!important;background:#e8f0fe!important;}
.aw-foot-trust svg,.aw-trust-badge svg{color:var(--atlas-blue-200)!important;}
.aw-mobnav__badge,.aw-wish-btn .aw-cart-count,.aw-cmp-btn .aw-cart-count,.icon-btn .aw-cart-count{background:var(--atlas-blue)!important;}
.aw-pdp__in3 strong{color:var(--atlas-blue)!important;}
.aw-pdp-countdown{color:var(--atlas-blue)!important;}
.aw-pdp-tab.is-active{border-bottom-color:var(--atlas-blue)!important;}
.aw-drawer__nav a:hover svg{color:var(--atlas-blue)!important;}
.aw-helper__dot.is-done{background:var(--atlas-blue)!important;}
:focus-visible{outline-color:var(--atlas-blue)!important;}

/* ---- 4. Hero h1 emphasis + eyebrow (overridden again by dark-band rules below) ---- */
.hero h1 em{color:var(--atlas-blue,#3B82F6)!important;}

/* ---- 5. Punchy Atlas dark-navy hero band ---- */
.hero{
  background:radial-gradient(120% 90% at 18% 0%,#13346b 0%,var(--atlas-navy,#0b1f4d) 42%,var(--atlas-ink,#0a1530) 100%)!important;
}
.hero h1,.hero .ms-n{color:#ffffff!important;}
.hero p.lead,.hero-microstats .ms-l{color:rgba(226,236,255,.82)!important;}
.hero-microstats{border-top-color:rgba(255,255,255,.14)!important;border-bottom-color:rgba(255,255,255,.14)!important;}
.hero h1 em{color:var(--atlas-blue-200,#93c5fd)!important;}
.hero-eyebrow{background:rgba(255,255,255,.10)!important;color:#dbe7ff!important;border-color:rgba(255,255,255,.20)!important;}
.hero .atlas-mountains-bg::before{opacity:.18!important;filter:saturate(.6) brightness(.9) contrast(1.05)!important;}
.hero .atlas-mountains-bg::after{background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(59,130,246,.22),transparent 70%)!important;}
.hero .btn-primary{background:var(--atlas-blue,#3B82F6)!important;color:#fff!important;}
.hero .btn-primary:hover{background:var(--atlas-blue-600,#2f6fe0)!important;}
@media (max-width:720px){.hero{background:radial-gradient(140% 100% at 50% 0%,#13346b 0%,var(--atlas-navy,#0b1f4d) 55%,var(--atlas-ink,#0a1530) 100%)!important;}}

/* ---- 6. Featured hero card: blue ring + lift ---- */
.hero-visual .hero-card.hv-bigcard{
  border:1px solid rgba(59,130,246,.35)!important;
  box-shadow:0 10px 30px rgba(10,21,48,.28),0 0 0 1px rgba(59,130,246,.10)!important;
}
.hero-visual .hero-card.hv-bigcard:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 18px 44px rgba(10,21,48,.40),0 0 0 1px rgba(59,130,246,.30)!important;
}
.hv-bigcard__cta{color:var(--atlas-blue,#3B82F6)!important;border-top-color:#e6ebf2!important;}
.hero-card.hv-bigcard.aw-aud-b2b .hv-bigcard__cta{color:var(--atlas-navy,#0b1f4d)!important;}
.hv-bigcard__price .now,.hero-card.hv-laptop .price .now{color:var(--atlas-navy,#0b1f4d)!important;}
.product:hover .img{outline:2px solid rgba(59,130,246,.18);outline-offset:-2px;}

/* ---- 7. One primary button language: Atlas blue; navy = secondary ---- */
.btn-primary{background:var(--atlas-blue,#3B82F6)!important;color:#fff!important;}
.btn-primary:hover{background:var(--atlas-blue-600,#2f6fe0)!important;}
.btn-orange{background:var(--atlas-navy,#0b1f4d)!important;color:#fff!important;}
.btn-orange:hover{background:#13346b!important;}
.btn-navy{background:var(--atlas-navy,#0b1f4d)!important;}
.btn-navy:hover{background:#13346b!important;}
.sec-link{color:var(--atlas-navy,#0b1f4d)!important;}
.sec-link:hover{color:var(--atlas-blue,#3B82F6)!important;}
.aw-drawer__cta{background:var(--atlas-navy,#0b1f4d)!important;}
.aw-drawer__cta:hover{background:#13346b!important;}

/* ---- 8. Normalize near-blues/near-navies to the two Atlas values ---- */
.sec-eyebrow,.aw-ldt__eyebrow,.aw-sec-eyebrow{color:var(--atlas-blue,#3B82F6)!important;}
.aw-catpill.is-active,.aw-customer-switch button.is-active{background:var(--atlas-navy,#0b1f4d)!important;border-color:var(--atlas-navy,#0b1f4d)!important;}
.aw-catpill:hover{border-color:var(--atlas-blue,#3B82F6)!important;color:var(--atlas-blue,#3B82F6)!important;}
a.brand-cell:hover{border-color:var(--atlas-blue,#3B82F6)!important;}
.aw-helper__opt:hover,.aw-helper__opt:has(input:checked){border-color:var(--atlas-blue,#3B82F6)!important;}
.aw-helper__opt:has(input:checked){background:#e8f0fe!important;}
.aw-toast{background:var(--atlas-navy,#0b1f4d)!important;}
.top .search input:focus{outline-color:var(--atlas-blue,#3B82F6)!important;}

/* ---- 9. Secondary advice/membership CTA under buy box (funnel) ---- */
.aw-pdp__advice-cta{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--atlas-navy,#0b1f4d);}
.aw-pdp__advice-cta a{color:var(--atlas-blue,#3B82F6);font-weight:600;text-decoration:none;}
.aw-pdp__advice-cta a:hover{text-decoration:underline;}

/* ===================================================================
   MOBILE BOTTOM-ZONE FIXES (supersede earlier 92px / gtranslate lines)
   =================================================================== */
@media (max-width: 720px){
  /* 10. Sticky add-to-cart bar sits ABOVE the mobile nav (was hidden behind it) */
  .aw--product .aw-sticky-buy{
    bottom:calc(56px + env(safe-area-inset-bottom, 0px))!important;
    z-index:101!important;
  }
  .aw--product main{padding-bottom:132px!important;}
  /* 11. Body bottom padding tracks real safe-area nav height (was fixed 70px) */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))!important;}
  /* 12. Normalize cta-stack + gtranslate to 720px breakpoint, above the nav */
  .atlas-cta-stack{right:12px!important;bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important;}
  .gt_float_switcher{left:12px!important;right:auto!important;bottom:calc(76px + env(safe-area-inset-bottom, 0px))!important;}
}


/* =================================================================
 * P1 Audit Fixes - 2026-06-01
 * ================================================================= */

/* CLS fix: product listing images - reserve 1:1 space before load */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product img,
.product-thumb img,
.wc-block-grid__product-image img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #f5f7fa;
}

/* Mobile bottom-zone: consolidated rule (replaces fragmented overrides above) */
/* CTA stack (bottom-right) + GTranslate float (bottom-left) co-exist without overlap */
@media (max-width: 720px) {
    .atlas-cta-stack {
        right: 12px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        z-index: 2147483640;
    }
    .gt_float_switcher {
        left: 8px !important;
        right: auto !important;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9998;
    }
}

/* Hero image: add explicit dimensions to prevent CLS (hero.php renders the img) */
.hv-photo--big img,
.hero-visual img {
    width: 100%;
    height: auto;
}

/* Product image container: prevent reflow on shop grid */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    overflow: hidden;
}

/* Sitemap/robots.txt no-index page (atlas-status) - hide from nav */
body.page-id-atlas-status .atlas-cta-stack { display: none; }


/* =================================================================
 * P2 Brand Finish Audit -- 2026-06-01
 * Appended after P1 block. All rules use !important to win cascade
 * over earlier token definitions. SAFE: additive only, no removals.
 * ================================================================= */

/* P2-1: Alias --aw-blue to canonical atlas-navy (resolves 3-name conflict).
   Previously --aw-blue was hardcoded to #0E2A47 (a separate navy var).
   Now converged to the canonical --atlas-navy token. */
:root {
    --aw-blue: var(--atlas-navy, #0b1f4d);
    --aw-blue-hi: #13346b;
}

/* P2-2: Wishlist button hover/active -> atlas-blue (removes orange from product cards) */
.wishlist-btn:hover {
    color: var(--atlas-blue, #3B82F6) !important;
    border-color: var(--atlas-blue, #3B82F6) !important;
}
.wishlist-btn.is-active {
    background: var(--atlas-blue, #3B82F6) !important;
    border-color: var(--atlas-blue, #3B82F6) !important;
    color: #fff !important;
}

/* P2-3: USP icon colour -> atlas-blue (normalises orange fallback on .aw-usp__icon) */
.aw-usp__icon {
    color: var(--atlas-blue, #3B82F6) !important;
}
/* P2-3b: Native WC cart badge dot -> atlas-blue (was orange in tokens) */
.icon-btn .badge {
    background: var(--atlas-blue, #3B82F6) !important;
}

/* P2-4: ROI big number -> atlas-navy (orange on white is off-brand) */
.roi-card .roi-out .big {
    color: var(--atlas-navy, #0b1f4d) !important;
}

/* P2-5: VP card tag -> atlas-blue (was orange on werkplek-pakketten cards) */
.vp-card .vp-tag {
    color: var(--atlas-blue, #3B82F6) !important;
    border-color: var(--atlas-blue, #3B82F6) !important;
}

/* P2-6: Consolidate em emphasis across all hero variants.
   split-hero/pos pages were not covered by the earlier P1 override. */
.split-hero h1 em,
.pos-hero-v h1 em,
.pos-title em {
    color: var(--atlas-blue-200, #93c5fd) !important;
    font-style: normal;
}
/* On non-dark backgrounds use solid atlas-blue for split-hero */
body:not(.has-dark-hero) .split-hero h1 em {
    color: var(--atlas-blue, #3B82F6) !important;
}

/* P2-7: Focus rings -> canonical atlas-blue #3B82F6 (tokens used #2E80FF) */
.search input:focus,
.field input:focus,
.field textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.coupon input:focus,
.check-card input:focus {
    border-color: var(--atlas-blue, #3B82F6) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

/* P2-8: Promo strip SVG icons -> atlas-blue-200 on the dark navy bar (was #6FA3F0) */
.promo-strip svg {
    color: var(--atlas-blue-200, #93c5fd) !important;
}

/* P2-9: Hero mobile spacing -- breathing room eyebrow to h1 at <=720px */
@media (max-width: 720px) {
    .hero-eyebrow { margin-bottom: 14px !important; }
    .hero h1 { margin-top: 0 !important; margin-bottom: 18px !important; }
}
/* ================================================================= */

/* ===================================================================
   P6_HERO_CTA — secondary WhatsApp advies CTA in the B2C hero.
   Surfaces the brand promise ("WhatsApp met de eigenaar") above the
   fold next to the primary "Bekijk laptops" button. Content/CSS only.
   =================================================================== */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions__wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #25D366 !important;
    color: #0a1530 !important;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(37,211,102,0.32);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-actions__wa:hover {
    background: #1FBA57 !important;
    color: #0a1530 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37,211,102,0.42);
}
.hero-actions__wa svg { fill: #0a1530; flex: 0 0 auto; }
.hero-actions__hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--atlas-blue-200, #93c5fd);
    opacity: 0.92;
}
@media (max-width: 720px) {
    .hero-actions { gap: 10px; }
    .hero-actions .btn,
    .hero-actions__wa { width: 100%; justify-content: center; }
    .hero-actions__hint { text-align: center; font-size: 12.5px; }
}
/* ================================================================= */

/* ================================================================= */
/* ===== Atlas P7 — Pages (zakelijk / laptopdeals SEO / blog) ====== */
/* Appended 2026-06-01. Atlas brand: blue #3B82F6, navy #0b1f4d.     */
/* ================================================================= */

/* --- shared buttons used on these pages --- */
.aw-zak .aw-btn,
.aw-zak__cta-end .aw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px 22px; border-radius: 10px;
    font-weight: 700; font-size: 15px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    line-height: 1.2;
}
.aw-btn--primary { background: #3B82F6; color: #fff; box-shadow: 0 6px 18px rgba(59,130,246,.28); }
.aw-btn--primary:hover { background: #2f6fe0; transform: translateY(-1px); }
.aw-btn--ghost { background: transparent; color: #0b1f4d; border: 1.5px solid #cdd9ee; }
.aw-btn--ghost:hover { border-color: #3B82F6; color: #2f6fe0; }

/* --- /zakelijk/ page --- */
.aw-zak { max-width: 1040px; margin: 0 auto; padding: 8px 0 8px; }
.aw-zak__intro { font-size: 18px; line-height: 1.6; color: #334155; margin: 0 0 22px; }
.aw-zak h2 { font-size: 26px; color: #0b1f4d; margin: 38px 0 16px; line-height: 1.25; }
.aw-zak h3 { font-size: 18px; color: #0b1f4d; margin: 20px 0 6px; }
.aw-zak p { color: #334155; line-height: 1.65; }
.aw-zak a { color: #2f6fe0; }
.aw-zak__cta-top { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 8px; }
.aw-zak__cta-mid { margin: 22px 0 8px; }

.aw-zak__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 8px;
}
.aw-zak__card {
    background: #f7f9fd; border: 1px solid #e6edf8; border-radius: 14px; padding: 18px 18px 16px;
}
.aw-zak__card h3 { margin: 0 0 6px; font-size: 16px; color: #0b1f4d; }
.aw-zak__card p { margin: 0; font-size: 14px; color: #475569; line-height: 1.55; }

.aw-zak__table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 15px; }
.aw-zak__table th, .aw-zak__table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #e6edf8; }
.aw-zak__table thead th { background: #0b1f4d; color: #fff; font-weight: 700; }
.aw-zak__table thead th:first-child { border-top-left-radius: 10px; }
.aw-zak__table thead th:last-child { border-top-right-radius: 10px; }
.aw-zak__table tbody tr:nth-child(even) { background: #f7f9fd; }

.aw-zak__steps { counter-reset: aws; list-style: none; padding: 0; margin: 12px 0 8px; }
.aw-zak__steps li {
    position: relative; padding: 12px 14px 12px 56px; margin: 0 0 10px;
    background: #f7f9fd; border: 1px solid #e6edf8; border-radius: 12px; color: #334155; line-height: 1.55;
}
.aw-zak__steps li::before {
    counter-increment: aws; content: counter(aws);
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 50%; background: #3B82F6; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}

.aw-zak__faq { margin: 12px 0 8px; }
.aw-zak__faq details {
    background: #f7f9fd; border: 1px solid #e6edf8; border-radius: 12px;
    padding: 0 16px; margin: 0 0 10px;
}
.aw-zak__faq summary {
    cursor: pointer; padding: 14px 0; font-weight: 700; color: #0b1f4d; font-size: 15.5px;
    list-style: none; position: relative; padding-right: 28px;
}
.aw-zak__faq summary::-webkit-details-marker { display: none; }
.aw-zak__faq summary::after {
    content: "+"; position: absolute; right: 2px; top: 12px; font-size: 22px; color: #3B82F6; font-weight: 400;
}
.aw-zak__faq details[open] summary::after { content: "\2212"; }
.aw-zak__faq details p { margin: 0 0 14px; color: #475569; line-height: 1.6; font-size: 14.5px; }

.aw-zak__cta-end {
    margin: 40px 0 8px; padding: 28px 26px; border-radius: 16px;
    background: linear-gradient(135deg, #0b1f4d 0%, #0a1530 100%); color: #fff; text-align: center;
}
.aw-zak__cta-end h2 { color: #fff; margin: 0 0 8px; }
.aw-zak__cta-end p { color: #cdd9ee; margin: 0 0 16px; }
.aw-zak__cta-end .aw-btn { margin: 4px 6px 0; }
.aw-zak__cta-end .aw-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }

/* --- /laptopdeals/ SEO bands --- */
.aw-ld-seo { padding-top: 28px; padding-bottom: 28px; }
.aw-ld-seo--alt { background: #f7f9fd; }
.aw-ld-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.aw-ld-tier { background: #fff; border: 1px solid #e6edf8; border-radius: 14px; padding: 20px 20px 18px; }
.aw-ld-seo--alt .aw-ld-tier { background: #fff; }
.aw-ld-tier h3 { margin: 0 0 4px; font-size: 17px; color: #0b1f4d; }
.aw-ld-tier > p { margin: 0 0 12px; font-size: 13.5px; color: #64748b; }
.aw-ld-tier ul { margin: 0; padding-left: 0; list-style: none; }
.aw-ld-tier li { padding: 7px 0 7px 22px; position: relative; font-size: 14px; color: #334155; border-top: 1px solid #f0f4fa; }
.aw-ld-tier li:first-child { border-top: 0; }
.aw-ld-tier li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #3B82F6; }
.aw-ld-note { margin-top: 16px; font-size: 13.5px; color: #64748b; }
.aw-ld-note a, .aw-ld-prose a { color: #2f6fe0; }

.aw-ld-prose { max-width: 900px; margin: 0 auto; }
.aw-ld-prose h2 { font-size: 24px; color: #0b1f4d; margin: 28px 0 12px; }
.aw-ld-prose h2:first-child { margin-top: 0; }
.aw-ld-prose p { color: #334155; line-height: 1.65; }
.aw-ld-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* --- blog post content (refurbished-mkb / werkplek-inrichten) --- */
.aw-lede { font-size: 18px; line-height: 1.6; color: #1e293b; font-weight: 500; }
.aw-post__table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.aw-post__table th, .aw-post__table td { text-align: left; padding: 10px 13px; border-bottom: 1px solid #e6edf8; }
.aw-post__table thead th { background: #eef3fb; color: #0b1f4d; font-weight: 700; }
.aw-post__note { font-size: 13.5px; color: #64748b; font-style: italic; }
.aw-post__check { list-style: none; padding-left: 0; }
.aw-post__check li { padding: 6px 0 6px 28px; position: relative; line-height: 1.5; }
.aw-post__check li::before {
    content: "\2713"; position: absolute; left: 0; top: 6px; color: #16a34a; font-weight: 700;
}

/* --- responsive --- */
@media (max-width: 860px) {
    .aw-zak__grid { grid-template-columns: 1fr 1fr; }
    .aw-ld-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .aw-zak__grid { grid-template-columns: 1fr; }
    .aw-zak h2 { font-size: 22px; }
    .aw-zak__intro { font-size: 16.5px; }
}
/* ===== /Atlas P7 Pages ===== */

/* ===== COHERENCE HARMONIZATION 2026-06-01 — curate funnel + unify on Atlas brand blue ===== */
/*
 * Two coherence problems fixed here, ADDITIVELY (this block loads last -> wins the
 * cascade; zero in-place edits to the rules above, so it is trivially reversible):
 *
 * 1) ORANGE LEAK. --orange was never declared in any :root block, so ~25
 *    var(--orange,#E76A1E) fallbacks rendered ORANGE and 2 bare var(--orange) refs
 *    (cart .checkout-button L693, checkout #place_order L784) rendered no background,
 *    on a navy/blue-brand page. An orange->blue migration was started (notes L597,
 *    L2577-2606) but left ~27 refs behind.
 *
 * 2) TWO NEAR-IDENTICAL BLUES. The page carried the canonical "ATLAS BRAND" blue
 *    --atlas-blue #3B82F6 (39 uses: badges, CTAs, hero, eyebrows, sec-links, focus
 *    rings, pagination, + hardcoded in advisor.php / reviews.php) AND a vestigial
 *    #2E80FF system (--aw-blue-bright L526; --navy-500, which was never declared and so
 *    fell back to #2E80FF). #3B82F6 is the dominant, documented Atlas accent (see the
 *    L2801 note "tokens used #2E80FF"), so we unify EVERYTHING onto it rather than add
 *    to the minority — one accent blue across the whole site.
 *
 * The clashing RED band dies separately, by dropping 'flash-deals' from the $sections
 * array (its reds are hardcoded literals a token cannot reach). The only red left
 * (#B91C1C x3: .stock-low--last, .aw-pdp__stock--out) is genuine low/out-of-stock
 * scarcity semantics and is intentionally KEPT.
 */
:root {
  --orange:         var(--aw-blue-bright, #3B82F6);  /* ex-orange refs -> bright Atlas accent (#3B82F6). NB --atlas-blue renders NAVY via the later atlas-legacy-brand-stack sheet, so point at --aw-blue-bright for a real accent, matching the focus rings (--navy-500) */
  --aw-blue-bright: #3B82F6;                      /* retire the #2E80FF vestige (was declared #2E80FF at L526) */
  --navy-500:       #3B82F6;                      /* was undefined -> used to fall back to #2E80FF; unify */
}
.aw-helper__dot.is-done { background: var(--orange, #3B82F6); }  /* source hygiene: no orange implication */
/* ===== /COHERENCE HARMONIZATION 2026-06-01 ===== */

/* ===== MOBILE PERFORMANCE 2026-06-02 ===== */
/*
 * TAP TARGETS — lift interactive elements to minimum 44×44 px touch area
 * (WCAG 2.5.5 / Google mobile-usability signal). tinyTap=59 at audit.
 * css_has_tap_fix was false — these rules are NEW.
 */
.aw-mobnav__link,
.aw-mobnav a,
.aw-mobnav__item,
.aw-drawer__nav a,
.aw-drawer__link,
a.aw-catpill,
.aw-catpill,
.aw-tab,
.aw-menu-toggle,
button.aw-mobnav__item {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
}

/* Buttons and add-to-cart: ensure tap height without breaking flex layout */
a,
button,
[role="button"],
input[type="submit"],
.button,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button {
    min-height: 44px;
}

/*
 * FONT-SIZE FLOOR — prevent sub-13px text on mobile.
 * tinyFont=265 at audit. Applied only at ≤767 px to avoid touching desktop.
 */
@media (max-width: 767px) {
    .aw-pillars__sub,
    .card-meta,
    .aw-pcard__meta,
    .aw-ldt-card__meta,
    .rating .rating-count,
    .aw-catpill__n,
    .aw-usp__copy em,
    .aw-usp__copy span,
    .aw-product-card__sku,
    .aw-pcard__sku,
    .woocommerce-loop-product__title,
    .product_title,
    .price,
    .woocommerce-Price-amount,
    .stock,
    .aw-badge,
    p,
    li,
    span {
        font-size: max(13px, 0.8125rem);
    }
}
/* ===== /MOBILE PERFORMANCE 2026-06-02 ===== */

/* === SPRINT-SOFIA === */

/* ------------------------------------------------------------------ */
/* TASK 1 — WhatsApp inline nudge below add-to-cart                   */
/* .aw-pdp__wa already covers the full CTA block (phase-bc.css        */
/* lines 1183-1214). The nudge is a lighter one-liner injected        */
/* by the mu-plugin hook woocommerce_after_add_to_cart_button.        */
/* ------------------------------------------------------------------ */
.aw-pdp__wa-nudge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-3, #5B6678);
}
.aw-pdp__wa-nudge a {
    color: #25D366;
    font-weight: 600;
    text-decoration: none;
}
.aw-pdp__wa-nudge a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* TASK 2 — Sticky buy bar bottom clearance (never covers mobile nav) */
/* .aw-mobnav is 56px tall; offset the bar above it.                  */
/* !important needed: the position value is overridden by an          */
/* LiteSpeed-combined external file that sets bottom:0 directly.      */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .aw-sticky-buy {
        bottom: 56px !important;
    }
}

/* ------------------------------------------------------------------ */
/* TASK 3 — Breadcrumb visibility on PDPs                             */
/* phase-bc.css has .aw-pdp-crumbs (custom bar) but WooCommerce also  */
/* outputs a native .woocommerce-breadcrumb — which has NO rules in   */
/* any of our CSS files. This block makes it visible and spaced.      */
/* ------------------------------------------------------------------ */
.woocommerce-breadcrumb {
    font-size: 13px;
    color: var(--ink-3, #5B6678);
    margin-bottom: 12px;
    line-height: 1.5;
}
.woocommerce-breadcrumb a {
    color: var(--aw-blue, #3B82F6);
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
    color: var(--aw-blue-hi, #143560);
}

/* === SPRINT-SOFIA === */

/* === SPRINT-REIN === */

/*
 * Design system improvements — atlasworks.nl WooCommerce shop
 * Sprint author : Rein (Design Lead)
 * Date          : 2026-06-02
 *
 * Scope:
 *   T1 – Product card image normalisation   (4/3 ratio, contain, cream bg)
 *   T2 – Product card title clamping        (2-line clamp, uniform card height)
 *   T3 – Consistent hover state             (lift + shadow across card surfaces)
 *   T4 – Price display consistency          (ins bold navy / del muted grey)
 *   T5 – Badge save label visibility        (uppercase, tighter padding, prominence)
 */


/* ---- T1: Product card image normalisation ---- */
.woocommerce ul.products li.product a img,
.aw-pcard img,
.aw-ldt-card__img img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    width: 100%;
    height: auto;
    background: #F7F6F2;
    padding: 8px;
    border-radius: 6px;
}


/* ---- T2: Product card title clamping ---- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.aw-pcard__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
    min-height: 2.8em;
}


/* ---- T3: Consistent hover state ---- */
.woocommerce ul.products li.product:hover,
.aw-catgrid__tile:hover,
.aw-brand-cell:hover,
a.brand-cell:hover {
    box-shadow: 0 4px 18px rgba(14, 42, 71, .10);
    transform: translateY(-2px);
    transition: box-shadow .15s ease, transform .15s ease;
}


/* ---- T4: Price display consistency ---- */
.woocommerce ul.products li.product .price ins {
    color: var(--navy-900, #0E2A47);
    font-weight: 700;
    text-decoration: none;
}
.woocommerce ul.products li.product .price del {
    color: #9CA3AF;
    font-size: 12px;
}


/* ---- T5: Badge save label visibility ---- */
.badge-save,
.aw-ldt-card__save {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 3px 7px !important;
}

/* === END SPRINT-REIN === */

/*
 * Atlas Works — SEO Sprint (Nadia)
 * Category H1 + description styling for WooCommerce category pages.
 */

/* ── Category page header wrapper ───────────────────────────────────────── */
.woocommerce-products-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #e5e7eb;
}

/* ── H1: category title ──────────────────────────────────────────────────── */
.woocommerce-products-header__title.page-title {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #0E2A47;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    display: block;
    visibility: visible;
}

.woocommerce-products-header h1,
.woocommerce-products-header h2.woocommerce-loop-product__title {
    color: #0E2A47;
    font-weight: 700;
}

/* ── Term description block ─────────────────────────────────────────────── */
.term-description,
.woocommerce-products-header .term-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    max-width: 72ch;
    margin: 0.5rem 0 0 0;
    display: block;
    visibility: visible;
}

/* ── Mobile tweak ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .woocommerce-products-header__title.page-title {
        font-size: 1.5rem;
    }
    .term-description {
        font-size: 0.95rem;
    }
}

/* === SPRINT-LENA === */

/* ---------------------------------------------------------------
 * Task 1 — PDP Trust strip (.aw-pdp__trust-strip)
 * --------------------------------------------------------------- */
.aw-pdp__trust-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line, #E5E9F0);
}

.aw-pdp__trust-strip span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ink-3, #5B6678);
    white-space: nowrap;
}

.aw-pdp__trust-strip svg {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
 * Task 2 — Payment method icon row (.aw-payment-icons)
 * --------------------------------------------------------------- */
.aw-payment-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 4px;
}

.aw-payment-icons img {
    height: 24px;
    width: auto;
    border-radius: 3px;
}

.aw-payment-icons span {
    font-size: 11px;
    color: var(--ink-3, #5B6678);
}

.aw-pay-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border: 1px solid var(--line, #E5E9F0);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2, #2A3648);
    background: #fff;
    white-space: nowrap;
    line-height: 1.4;
}

.aw-pay-pill--ideal {
    border-color: #CC0066;
    color: #CC0066;
}

.aw-pay-pill--in3 {
    border-color: #FF6A00;
    color: #FF6A00;
}

/* ---------------------------------------------------------------
 * Task 3 — FAQ WhatsApp CTA (.aw-faq-wa-cta)
 * --------------------------------------------------------------- */
.aw-faq-wa-cta {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line, #E5E9F0);
}

.aw-faq-wa-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease, transform 0.1s ease;
}

.aw-faq-wa-cta a:hover {
    background: #1ebe5d;
    transform: translateY(-1px);
}

.aw-faq-wa-cta a svg {
    flex-shrink: 0;
}

/* === /SPRINT-LENA === */

/* === SPRINT-MAX === */

/* ---------------------------------------------------------------
   TASK 1 — font-display: swap overrides
--------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-display: swap;
  src: local("Inter");
}

@font-face {
  font-family: "Space Grotesk";
  font-display: swap;
  src: local("Space Grotesk");
}

/* ---------------------------------------------------------------
   TASK 4 — will-change on animated elements
--------------------------------------------------------------- */
.hero {
  will-change: auto;
}

.aw-ldt-card,
.woocommerce ul.products li.product,
.aw-catgrid__tile {
  will-change: transform;
}

/* === SPRINT-MAX === */

/* === SPRINT-YUSUF === */

/* ---------- B2B Trust Bar (aw-b2b-trust-bar) ---------- */
.aw-b2b-trust-bar {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--line, #E6EBF2);
    margin-top: 16px;
}

.aw-b2b-trust-bar span {
    font-size: 12.5px;
    color: var(--ink-2, #2A3648);
    display: flex;
    align-items: center;
    gap: 5px;
}

.aw-b2b-trust-bar span svg,
.aw-b2b-trust-bar span .aw-icon {
    flex-shrink: 0;
    color: var(--navy-500, #2E80FF);
    width: 14px;
    height: 14px;
}

@media (max-width: 480px) {
    .aw-b2b-trust-bar {
        gap: 10px;
    }
    .aw-b2b-trust-bar span {
        font-size: 12px;
    }
}

/* ---------- Diensten pricing table (aw-pricing-table) ---------- */
.aw-pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 24px 0 8px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(14, 42, 71, 0.07);
}

.aw-pricing-table thead tr {
    background: var(--navy-900, #0E2A47);
    color: #fff;
}

.aw-pricing-table thead th {
    padding: 12px 18px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.aw-pricing-table tbody tr:nth-child(even) {
    background: var(--cream, #FAFBFD);
}

.aw-pricing-table tbody td {
    padding: 11px 18px;
    border-bottom: 1px solid var(--line, #E6EBF2);
    color: var(--ink-1, #1A2332);
    vertical-align: middle;
}

.aw-pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.aw-pricing-table .aw-price {
    font-weight: 800;
    color: var(--navy-900, #0E2A47);
    white-space: nowrap;
}

.aw-pricing-table .aw-price-free {
    font-weight: 800;
    color: #1F8A52;
}

.aw-pricing-table .aw-price-plus {
    font-weight: 700;
    color: var(--ink-2, #2A3648);
}

@media (max-width: 600px) {
    .aw-pricing-table thead th,
    .aw-pricing-table tbody td {
        padding: 9px 12px;
        font-size: 13px;
    }
}

/* === /SPRINT-YUSUF === */

/* =============================================================
   sprint-rein2.css — Design System Patch (Rein, 2026-06-03)
   Deploy via: append/import into atlas-phase-bc.css or child theme
   ============================================================= */

/* ---------------------------------------------------------------
   TASK 1 — Fix .aw-ldt-card:hover orange border + box-shadow
   Line ~1708–1709 in atlas-phase-bc.css uses var(--orange) for
   border-color; box-shadow literal was already blue but we pin it
   here to ensure both stay consistent with --atlas-blue.
   --------------------------------------------------------------- */
.aw-ldt-card:hover {
    border-color: var(--atlas-blue, #3B82F6) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12) !important;
    transform: translateY(-4px) !important;
}

/* ---------------------------------------------------------------
   TASK 2 — --card-radius token + apply to all card surfaces
   --------------------------------------------------------------- */
:root { --card-radius: 12px; }

.woocommerce ul.products li.product,
.aw-ldt-card, .aw-catgrid__tile,
.hv-photo, .aw-pcard {
    border-radius: var(--card-radius) !important;
}

/* Hero bigcard is deliberately larger — keep at 16px */
.hv-bigcard { border-radius: 16px !important; }

/* ---------------------------------------------------------------
   TASK 3 — Consistent card inner padding token
   --------------------------------------------------------------- */
:root { --card-pad: 14px; }

.woocommerce ul.products li.product a img {
    padding: var(--card-pad);
}

/* =========================================================
   Sprint — PDP Breadcrumb visibility (.aw-breadcrumb)
   Wraps the native WooCommerce breadcrumb output injected
   by the atlas-pdp-breadcrumb mu-plugin.
   ========================================================= */

.aw-breadcrumb {
    padding: 10px 0 4px;
}

.woocommerce-breadcrumb {
    font-size: 13px;
    color: var(--ink-3, #5B6678);
}

.woocommerce-breadcrumb a {
    color: var(--atlas-blue, #3B82F6);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

.woocommerce-breadcrumb .breadcrumb-separator {
    margin: 0 4px;
}

.aw-sticky-buy__form { margin:0; padding:0; display:contents; }
.aw-sticky-buy__btn { cursor:pointer; border:none; font-family:inherit; }
/* === AW PDP ULTIMATE REDESIGN === */
/* Scope: .single-product body class + .woocommerce-* standard classes        */
/* Target: atlasworks.nl — royal-elementor-kit-atlas child theme               */
/* Author: Atlas Jarvis build 2026-06-03                                       */
/* Load after: atlas-brand-stack CSS, front-page-atlasworks CSS                */
/* Load before: </body>                                                         */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
.single-product {
  --pdp-navy:       #0E2A47;
  --pdp-blue:       #3B82F6;
  --pdp-blue-dark:  #1D4ED8;
  --pdp-blue-mist:  #EFF6FF;
  --pdp-green:      #1F8A52;
  --pdp-green-bg:   #F0FDF4;
  --pdp-orange:     #F59E0B;
  --pdp-red:        #EF4444;
  --pdp-white:      #FFFFFF;
  --pdp-ink:        #0B1730;
  --pdp-ink-soft:   #42526F;
  --pdp-ink-muted:  #6B7280;
  --pdp-surface:    #F8FAFC;
  --pdp-line:       #E2E8F0;
  --pdp-line-dark:  #CBD5E1;
  --pdp-radius:     12px;
  --pdp-radius-lg:  18px;
  --pdp-shadow:     0 4px 24px rgba(14, 42, 71, 0.10);
  --pdp-shadow-lg:  0 8px 40px rgba(14, 42, 71, 0.14);
  --pdp-font-head:  "Space Grotesk", Inter, -apple-system, sans-serif;
  --pdp-font-body:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pdp-max-w:      1280px;
  --pdp-thumb-w:    72px;
  --pdp-thumb-h:    68px;
  --pdp-img-max:    540px;
}

/* ── Base page reset inside single-product ──────────────────────────────────── */
.single-product *,
.single-product *::before,
.single-product *::after {
  box-sizing: border-box;
}

.single-product body,
body.single-product {
  background: var(--pdp-surface);
  color: var(--pdp-ink);
  font-family: var(--pdp-font-body);
}

/* ── Container ──────────────────────────────────────────────────────────────── */
.single-product .aw-container,
.single-product .woocommerce-pdp-container {
  width: min(var(--pdp-max-w), calc(100% - 48px));
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. GALLERY FIXES — ROOT CAUSE: flexslider inline width override
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1a. Outer gallery wrapper — NEVER let flexslider inline style cap us */
.single-product .woocommerce-product-gallery,
.single-product .aw-pdp__gallery {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  position: relative;
}

/* 1b. The grid that controls left-thumbstrip + right main image */
.single-product .aw-pdp__gallery__inner,
.single-product .woocommerce-product-gallery__wrapper-outer {
  display: grid !important;
  grid-template-columns: var(--pdp-thumb-w) 1fr !important;
  grid-template-rows: auto;
  gap: 12px !important;
  align-items: start;
}

/* 1c. Thumbnail strip — vertical column on the LEFT */
.single-product .flex-control-nav.flex-control-thumbs,
.single-product .aw-pdp__thumbstrip {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: var(--pdp-img-max) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--pdp-line-dark) transparent !important;
  width: var(--pdp-thumb-w) !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  order: -1;
}

.single-product .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
  width: 4px;
}
.single-product .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
  background: var(--pdp-line-dark);
  border-radius: 4px;
}

/* 1d. Individual thumbnails */
.single-product .flex-control-thumbs li,
.single-product .aw-pdp__thumb {
  width: var(--pdp-thumb-w) !important;
  height: var(--pdp-thumb-h) !important;
  min-height: var(--pdp-thumb-h) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--pdp-line);
  cursor: pointer;
  transition: border-color 0.18s ease, opacity 0.18s ease;
  opacity: 0.65;
  background: var(--pdp-white);
}

.single-product .flex-control-thumbs li img,
.single-product .aw-pdp__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

/* 1e. Thumbnail active + hover state */
.single-product .flex-control-thumbs li.flex-active,
.single-product .flex-control-thumbs li:hover,
.single-product .aw-pdp__thumb.active,
.single-product .aw-pdp__thumb:hover {
  border-color: var(--pdp-blue) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.20);
}

/* 1f. Main viewport — RIGHT column */
.single-product .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .aw-pdp__main-img-wrap {
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  border-radius: var(--pdp-radius-lg);
  overflow: hidden;
  background: var(--pdp-white);
  border: 1px solid var(--pdp-line);
  aspect-ratio: 1 / 1 !important;
  max-height: var(--pdp-img-max);
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 1g. Flexslider list reset */
.single-product .woocommerce-product-gallery .slides,
.single-product .woocommerce-product-gallery ul.slides {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  list-style: none !important;
}

.single-product .woocommerce-product-gallery .slides li,
.single-product .woocommerce-product-gallery ul.slides li {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 1h. Main product image */
.single-product .woocommerce-product-gallery__image,
.single-product .wp-post-image,
.single-product .woocommerce-product-gallery .flex-viewport img,
.single-product .aw-pdp__main-img {
  width: 100% !important;
  height: 100% !important;
  max-height: var(--pdp-img-max) !important;
  object-fit: contain !important;
  display: block !important;
  background: var(--pdp-white);
  cursor: zoom-in;
  transition: transform 0.28s ease;
}

/* 1i. Hover zoom on main image */
.single-product .woocommerce-product-gallery:hover .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery:hover .wp-post-image,
.single-product .aw-pdp__gallery:hover .aw-pdp__main-img {
  transform: scale(1.03);
}

/* 1j. Lightbox-ready class — JS adds this */
.single-product .aw-pdp__main-img-wrap.lightbox-active {
  cursor: zoom-in;
}
.single-product .aw-pdp__main-img-wrap.lightbox-active::after {
  content: "⤢";
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(14, 42, 71, 0.72);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  pointer-events: none;
}

/* 1k. Badge / label chips overlaid on main image */
.single-product .aw-pdp__badge-wrap {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 4;
  pointer-events: none;
}

.single-product .aw-pdp__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.single-product .aw-pdp__badge--new     { background: var(--pdp-navy);  color: #fff; }
.single-product .aw-pdp__badge--sale    { background: var(--pdp-red);   color: #fff; }
.single-product .aw-pdp__badge--best    { background: var(--pdp-orange); color: #fff; }
.single-product .aw-pdp__badge--refurb  { background: var(--pdp-green); color: #fff; }

/* 1l. Gallery nav arrows */
.single-product .flex-direction-nav .flex-prev,
.single-product .flex-direction-nav .flex-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--pdp-line);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(14, 42, 71, 0.12);
  z-index: 5;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-indent: -9999px;
}

.single-product .flex-direction-nav .flex-prev { left: 8px; }
.single-product .flex-direction-nav .flex-next { right: 8px; }

.single-product .woocommerce-product-gallery:hover .flex-direction-nav .flex-prev,
.single-product .woocommerce-product-gallery:hover .flex-direction-nav .flex-next {
  opacity: 1;
}

.single-product .flex-direction-nav .flex-prev::after,
.single-product .flex-direction-nav .flex-next::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--pdp-ink);
  border-bottom: 2px solid var(--pdp-ink);
  text-indent: 0;
}
.single-product .flex-direction-nav .flex-prev::after { transform: rotate(135deg) translate(-1px, 1px); }
.single-product .flex-direction-nav .flex-next::after { transform: rotate(-45deg) translate(1px, 1px); }

/* 1m. Image count indicator */
.single-product .aw-pdp__img-count {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 42, 71, 0.68);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. GALLERY OUTER LAYOUT — two-column PDP wrapper
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .product,
.single-product .aw-pdp__wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start;
  padding: 32px 0 64px;
}

.single-product .woocommerce-product-gallery,
.single-product .aw-pdp__gallery {
  position: sticky;
  top: 88px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PRICE BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .pdp-price-card,
.single-product .aw-pdp-price-card {
  background: var(--pdp-white);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius-lg);
  padding: 24px;
  box-shadow: var(--pdp-shadow);
}

/* 3a. Price row */
.single-product .pdp-price-card .price,
.single-product .aw-pdp-price,
.single-product .woocommerce-Price-amount {
  font-family: var(--pdp-font-head);
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--pdp-navy) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em;
  display: block;
}

/* 3b. Original / strikethrough price */
.single-product del .woocommerce-Price-amount,
.single-product .pdp-price-card del,
.single-product .aw-pdp-price-original {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--pdp-ink-muted) !important;
  text-decoration: line-through !important;
  opacity: 0.8;
}

/* 3c. Savings badge */
.single-product .aw-pdp-savings,
.single-product .pdp-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  margin-left: 10px;
  vertical-align: middle;
}

/* 3d. VAT line */
.single-product .aw-pdp-vat,
.single-product .pdp-vat-note {
  font-size: 13px;
  color: var(--pdp-ink-muted);
  margin-top: 4px;
  display: block;
}

/* 3e. Monthly installment line */
.single-product .aw-pdp-installment {
  font-size: 13px;
  color: var(--pdp-ink-soft);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.single-product .aw-pdp-installment::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2342526F'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* 3f. in3 / SEPA trust chip */
.single-product .aw-pdp-sepa-chip,
.single-product .pdp-in3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pdp-blue-mist);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pdp-blue-dark);
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

/* 3g. Urgency / scarcity indicator */
.single-product .aw-pdp-stock-low {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #9A3412;
  margin-top: 10px;
}

@keyframes pdp-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

.single-product .aw-pdp-stock-low::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pdp-red);
  flex-shrink: 0;
  animation: pdp-pulse-dot 1.4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. ADD-TO-CART BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .single_add_to_cart_button,
.single-product form.cart .button,
.single-product .aw-pdp-atc-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 28px !important;
  background: var(--pdp-blue) !important;
  color: var(--pdp-white) !important;
  border: none !important;
  border-radius: var(--pdp-radius) !important;
  font-family: var(--pdp-font-head) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.38) !important;
  position: relative;
  overflow: hidden;
  margin-top: 16px !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product form.cart .button:hover,
.single-product .aw-pdp-atc-btn:hover {
  background: var(--pdp-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.46) !important;
}

.single-product .single_add_to_cart_button:active,
.single-product form.cart .button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.30) !important;
}

/* ATC directional arrow */
.single-product .single_add_to_cart_button::after,
.single-product form.cart .button::after {
  content: "→";
  font-size: 18px;
  margin-left: 4px;
  transition: transform 0.18s ease;
}

.single-product .single_add_to_cart_button:hover::after,
.single-product form.cart .button:hover::after {
  transform: translateX(3px);
}

/* Loading state */
.single-product .single_add_to_cart_button.loading,
.single-product form.cart .button.loading {
  pointer-events: none;
  opacity: 0.75;
}

.single-product .single_add_to_cart_button.loading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pdp-spin 0.7s linear infinite;
  margin-right: 4px;
}

@keyframes pdp-spin {
  to { transform: rotate(360deg); }
}

/* Direct afrekenen secondary CTA */
.single-product .aw-pdp-atc-secondary,
.single-product .aw-pdp-direct-checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 24px !important;
  background: var(--pdp-white) !important;
  color: var(--pdp-navy) !important;
  border: 2px solid var(--pdp-navy) !important;
  border-radius: var(--pdp-radius) !important;
  font-family: var(--pdp-font-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  margin-top: 10px !important;
}

.single-product .aw-pdp-atc-secondary:hover,
.single-product .aw-pdp-direct-checkout:hover {
  background: var(--pdp-navy) !important;
  color: var(--pdp-white) !important;
}

/* Payment methods icon strip below ATC */
.single-product .aw-pdp-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.single-product .aw-pdp-payment-icons img,
.single-product .aw-pdp-payment-icon {
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. TRUST PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .aw-pdp-trust-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.single-product .aw-pdp-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--pdp-green-bg);
  border: 1px solid rgba(31, 138, 82, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pdp-green);
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}

.single-product .aw-pdp-trust-pill svg,
.single-product .aw-pdp-trust-pill .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. DELIVERY BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .aw-pdp-delivery,
.single-product .pdp-delivery-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--pdp-green-bg);
  border: 1px solid rgba(31, 138, 82, 0.22);
  border-radius: var(--pdp-radius);
  margin-top: 14px;
}

.single-product .aw-pdp-delivery__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pdp-green);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(31, 138, 82, 0.18);
}

.single-product .aw-pdp-delivery__text {
  font-size: 14px;
  font-weight: 700;
  color: var(--pdp-green);
}

.single-product .aw-pdp-delivery__date {
  font-size: 12px;
  color: var(--pdp-ink-soft);
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .pdp-crumb,
.single-product .woocommerce-breadcrumb,
.single-product .aw-pdp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 16px 0 12px;
  font-size: 13px;
  color: var(--pdp-ink-soft);
  list-style: none;
  margin: 0;
}

.single-product .pdp-crumb a,
.single-product .woocommerce-breadcrumb a,
.single-product .aw-pdp-breadcrumb a {
  color: var(--pdp-ink-soft);
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
}

.single-product .pdp-crumb a:hover,
.single-product .woocommerce-breadcrumb a:hover,
.single-product .aw-pdp-breadcrumb a:hover {
  color: var(--pdp-blue);
  text-decoration: underline;
}

.single-product .woocommerce-breadcrumb .breadcrumb-sep,
.single-product .pdp-crumb .sep {
  color: var(--pdp-line-dark);
  font-size: 11px;
  margin: 0 2px;
}

/* Active (current page) crumb */
.single-product .woocommerce-breadcrumb > span:last-child,
.single-product .aw-pdp-breadcrumb > li:last-child,
.single-product .pdp-crumb .current {
  font-weight: 700;
  color: var(--pdp-navy);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PRODUCT TITLE + BRAND ROW
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .pdp-brand,
.single-product .aw-pdp-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.single-product .pdp-brand a,
.single-product .aw-pdp-brand-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--pdp-blue) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.single-product .aw-pdp-sku {
  font-size: 12px;
  color: var(--pdp-ink-muted);
  font-weight: 500;
  font-family: "JetBrains Mono", "Courier New", monospace;
}

.single-product .pdp-title,
.single-product .product_title,
.single-product .aw-pdp-title {
  font-family: var(--pdp-font-head) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--pdp-navy) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px !important;
}

/* USP tagline sub-headline */
.single-product .aw-pdp-tagline {
  font-size: 15px;
  color: var(--pdp-ink-soft);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RATINGS ROW
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .pdp-rating,
.single-product .aw-pdp-rating-row,
.single-product .woocommerce-product-rating {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  flex-wrap: wrap;
}

.single-product .star-rating,
.single-product .aw-pdp-stars {
  color: var(--pdp-orange) !important;
  font-size: 15px !important;
  letter-spacing: 1px;
}

.single-product .aw-pdp-rating-score {
  font-size: 15px;
  font-weight: 700;
  color: var(--pdp-navy);
}

.single-product .aw-pdp-rating-count,
.single-product .woocommerce-review-link {
  font-size: 13px;
  color: var(--pdp-blue) !important;
  text-decoration: none !important;
  font-weight: 600;
  cursor: pointer;
}

.single-product .aw-pdp-rating-count:hover,
.single-product .woocommerce-review-link:hover {
  text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. SPECS TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .aw-pdp-specs-table,
.single-product .woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}

.single-product .aw-pdp-specs-table tr:nth-child(even),
.single-product .woocommerce-product-attributes tr:nth-child(even) {
  background: var(--pdp-surface);
}

.single-product .aw-pdp-specs-table tr:nth-child(odd),
.single-product .woocommerce-product-attributes tr:nth-child(odd) {
  background: var(--pdp-white);
}

.single-product .aw-pdp-specs-table th,
.single-product .woocommerce-product-attributes th {
  width: 35%;
  text-align: left;
  color: var(--pdp-ink-soft);
  font-weight: 500;
  padding: 9px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--pdp-line);
}

.single-product .aw-pdp-specs-table td,
.single-product .woocommerce-product-attributes td {
  font-weight: 600;
  color: var(--pdp-ink);
  padding: 9px 12px;
  border-bottom: 1px solid var(--pdp-line);
}

/* Spec chips */
.single-product .aw-pdp-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pdp-blue-mist);
  color: var(--pdp-navy);
  border: 1px solid rgba(59, 130, 246, 0.20);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  margin: 2px;
}

/* Alle specificaties expand row */
.single-product .aw-pdp-specs-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pdp-blue);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  transition: color 0.18s;
  border-top: 1px solid var(--pdp-line);
  margin-top: 4px;
}

.single-product .aw-pdp-specs-expand:hover {
  color: var(--pdp-blue-dark);
}

.single-product .aw-pdp-specs-expand::after {
  content: "▾";
  font-size: 16px;
  transition: transform 0.2s;
}

.single-product .aw-pdp-specs-expand.expanded::after {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. TRUST STRIP (below price card)
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .aw-pdp-trust-strip,
.single-product .pdp-trust-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--pdp-white);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  margin-top: 16px;
}

.single-product .aw-pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 120px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pdp-ink);
}

.single-product .aw-pdp-trust-item svg,
.single-product .aw-pdp-trust-item .trust-icon {
  width: 20px;
  height: 20px;
  color: var(--pdp-green);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. TABS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .woocommerce-tabs,
.single-product .aw-pdp-tabs {
  margin-top: 48px;
  border-top: 1px solid var(--pdp-line);
  padding-top: 0;
}

.single-product .woocommerce-tabs ul.tabs,
.single-product .aw-pdp-tabs__nav {
  display: flex !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 2px solid var(--pdp-line);
  background: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar,
.single-product .aw-pdp-tabs__nav::-webkit-scrollbar {
  display: none;
}

.single-product .woocommerce-tabs ul.tabs li,
.single-product .aw-pdp-tabs__tab {
  list-style: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
}

.single-product .woocommerce-tabs ul.tabs li a,
.single-product .aw-pdp-tabs__tab a {
  display: block;
  padding: 14px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--pdp-ink-soft) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.18s ease, border-color 0.18s ease;
  background: none !important;
  border-radius: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover,
.single-product .aw-pdp-tabs__tab.active a,
.single-product .aw-pdp-tabs__tab a:hover {
  color: var(--pdp-navy) !important;
  border-bottom-color: var(--pdp-navy) !important;
}

.single-product .woocommerce-tabs .panel,
.single-product .aw-pdp-tabs__panel {
  padding: 28px 0 !important;
  background: none !important;
  border: none !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--pdp-ink);
}

/* Spec table in tab — prevent overflow on mobile */
.single-product .woocommerce-tabs .panel table,
.single-product .shop_attributes {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. RELATED PRODUCTS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .related.products,
.single-product .upsells.products,
.single-product .aw-pdp-related {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--pdp-line);
}

.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product .aw-pdp-related h2 {
  font-family: var(--pdp-font-head) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--pdp-navy) !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 24px !important;
}

.single-product .related.products ul.products,
.single-product .upsells.products ul.products,
.single-product .aw-pdp-related .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product {
  background: var(--pdp-white);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  padding: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.single-product .related.products ul.products li.product:hover,
.single-product .upsells.products ul.products li.product:hover {
  box-shadow: var(--pdp-shadow);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. STICKY ATC BAR
   ═══════════════════════════════════════════════════════════════════════════ */

#aw-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  background: var(--pdp-white);
  border-top: 1px solid var(--pdp-line);
  box-shadow: 0 -4px 20px rgba(14, 42, 71, 0.12);
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#aw-sticky-atc.aw-sticky-atc--visible {
  transform: translateY(0);
}

#aw-sticky-atc .aw-sticky-atc__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: contain;
  border: 1px solid var(--pdp-line);
  background: var(--pdp-white);
  flex-shrink: 0;
}

#aw-sticky-atc .aw-sticky-atc__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pdp-navy);
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#aw-sticky-atc .aw-sticky-atc__price {
  font-family: var(--pdp-font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--pdp-navy);
  flex-shrink: 0;
}

#aw-sticky-atc .aw-sticky-atc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 22px;
  background: var(--pdp-blue);
  color: var(--pdp-white);
  border: none;
  border-radius: var(--pdp-radius);
  font-family: var(--pdp-font-head);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.18s ease;
}

#aw-sticky-atc .aw-sticky-atc__btn:hover {
  background: var(--pdp-blue-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. WISHLIST BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.single-product .aw-pdp-wishlist,
.single-product .pdp-save-later {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 0 20px;
  background: transparent;
  color: var(--pdp-ink-soft);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  margin-top: 8px;
}

.single-product .aw-pdp-wishlist:hover,
.single-product .pdp-save-later:hover {
  border-color: var(--pdp-blue);
  color: var(--pdp-blue);
  background: var(--pdp-blue-mist);
}

.single-product .aw-pdp-wishlist.active {
  border-color: var(--pdp-red);
  color: var(--pdp-red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. MOBILE — max-width: 768px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Single column layout */
  .single-product .product,
  .single-product .aw-pdp__wrapper {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 16px 0 80px !important;
  }

  /* Gallery: single column, thumbs move to bottom as horizontal strip */
  .single-product .aw-pdp__gallery__inner,
  .single-product .woocommerce-product-gallery__wrapper-outer {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
  }

  /* Main image on top (row 1) */
  .single-product .flex-viewport,
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .aw-pdp__main-img-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-height: 320px !important;
  }

  /* Thumbnail strip below as horizontal scroll (row 2) */
  .single-product .flex-control-nav.flex-control-thumbs,
  .single-product .aw-pdp__thumbstrip {
    flex-direction: row !important;
    gap: 8px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 4px 0 8px !important;
    scrollbar-width: thin;
  }

  .single-product .flex-control-thumbs li,
  .single-product .aw-pdp__thumb {
    flex-shrink: 0 !important;
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
  }

  /* Gallery not sticky on mobile */
  .single-product .woocommerce-product-gallery,
  .single-product .aw-pdp__gallery {
    position: static !important;
  }

  /* Price card full width, no top border-radius rounding on bottom */
  .single-product .pdp-price-card,
  .single-product .aw-pdp-price-card {
    border-radius: var(--pdp-radius);
    margin-top: 16px;
  }

  /* Main price larger on mobile too */
  .single-product .pdp-price-card .price,
  .single-product .aw-pdp-price,
  .single-product .woocommerce-Price-amount {
    font-size: 36px !important;
  }

  /* ATC button full width with larger tap area */
  .single-product .single_add_to_cart_button,
  .single-product form.cart .button,
  .single-product .aw-pdp-atc-btn {
    min-height: 56px !important;
    font-size: 18px !important;
  }

  /* Trust pills stacked 2-across */
  .single-product .aw-pdp-trust-pills {
    gap: 6px;
  }

  .single-product .aw-pdp-trust-pill {
    flex: 1 1 40%;
    font-size: 11px;
  }

  /* Title smaller on mobile */
  .single-product .pdp-title,
  .single-product .product_title,
  .single-product .aw-pdp-title {
    font-size: 22px !important;
  }

  /* Tabs scroll horizontal */
  .single-product .woocommerce-tabs ul.tabs,
  .single-product .aw-pdp-tabs__nav {
    white-space: nowrap;
  }

  .single-product .woocommerce-tabs ul.tabs li a,
  .single-product .aw-pdp-tabs__tab a {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* Specs table horizontal scroll */
  .single-product .aw-pdp-specs-table,
  .single-product .woocommerce-product-attributes {
    display: block;
    overflow-x: auto;
  }

  /* Sticky ATC bar smaller on mobile */
  #aw-sticky-atc {
    height: 56px;
    padding: 0 16px;
    gap: 10px;
  }

  #aw-sticky-atc .aw-sticky-atc__thumb {
    width: 36px;
    height: 36px;
  }

  #aw-sticky-atc .aw-sticky-atc__title {
    font-size: 13px;
  }

  #aw-sticky-atc .aw-sticky-atc__price {
    font-size: 17px;
  }

  #aw-sticky-atc .aw-sticky-atc__btn {
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
  }

  /* Related products 2-col on mobile */
  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Trust strip single column */
  .single-product .aw-pdp-trust-strip {
    flex-direction: column;
    gap: 8px;
  }

  .single-product .aw-pdp-trust-item {
    flex: none;
  }

  /* Breadcrumb font size */
  .single-product .pdp-crumb,
  .single-product .woocommerce-breadcrumb {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. TABLET — 769px to 1024px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {

  .single-product .product,
  .single-product .aw-pdp__wrapper {
    gap: 28px !important;
  }

  .single-product .pdp-title,
  .single-product .product_title {
    font-size: 24px !important;
  }

  .single-product .pdp-price-card .price,
  .single-product .woocommerce-Price-amount {
    font-size: 34px !important;
  }

  .single-product .related.products ul.products,
  .single-product .upsells.products ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. FLEXSLIDER inline-style override (nuclear — runs AFTER flexslider fires)
   ═══════════════════════════════════════════════════════════════════════════ */

/* These exist purely to override flexslider JS injected inline width/height */
.single-product .woocommerce-product-gallery .flexslider {
  width: 100% !important;
  max-width: 100% !important;
}

.single-product .woocommerce-product-gallery .flex-viewport {
  width: 100% !important;
  max-width: 100% !important;
}

.single-product .woocommerce-product-gallery .flexslider .slides > li {
  width: 100% !important;
}

/* ── END OF AW PDP ULTIMATE REDESIGN ──────────────────────────────────────── */

/* ===== Mobile-first hero — photo above the fold, tighter copy (2026-06-04) ===== */
@media (max-width: 860px){
  .hero .hero-grid{display:flex;flex-direction:column;gap:16px;}
  .hero .hero-visual{order:-1;}                       /* product photo FIRST */
  .hero .hero-copy h1,.hero .hero-copy h2{font-size:clamp(2rem,8.5vw,2.7rem)!important;margin:4px 0 10px!important;line-height:1.05!important;}
  .hero .hero-copy .lead{font-size:15px;line-height:1.5;margin:0 0 14px;}
  .hero .hero-actions__hint{display:none;}
  .hero .hero-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .hero .hero-actions .btn{width:100%;justify-content:center;}
  .hero .hero-microstats{margin-top:16px;}
  .hero .hv-bigcard{max-width:100%;margin:0 auto;}
  .hero .hv-photo--big{aspect-ratio:16/10;}
}
/* ===== AI chatbot mobile responsive (2026-06-04) ===== */
@media (max-width: 600px){
  #aw-bot-wrap{ bottom: 150px !important; right: 14px !important; }
  #aw-bot-toggle{ width: 52px !important; height: 52px !important; }
  #aw-bot-toggle svg{ width: 34px !important; height: 34px !important; }
  #aw-bot-panel{
    position: fixed !important;
    left: 12px !important; right: 12px !important; bottom: 150px !important;
    width: auto !important; max-width: none !important;
    height: min(66vh, 440px) !important;
  }
}