/* ═══════════════════════════════════════════════════════
   PHOTOTRONICS STYLE — Navy & White Professional Theme
   Inspired by phototronics.org.uk's clean, corporate
   school-photography aesthetic.
   Drop AFTER base CSS.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── PALETTE ── */
:root {
    --primary: #1A5276 !important;
    --primary-light: #EBF2F8 !important;
    --primary-dark: #0E3A56 !important;
    --accent: #2471A3 !important;
    --accent-light: #EDF4FA !important;
    --gold: #C9920E !important;
    --green: #1A5276 !important;
    --dark-green: #0E3A56 !important;
    --dark: #1B2631 !important;
    --mid: #5D6D7E !important;
    --light: #F8F9FA !important;
    --border: #D5DBDF !important;
    --white: #FFFFFF !important;
    /* Extended Phototronics palette */
    --navy: #1A5276;
    --navy-deep: #0E3A56;
    --navy-darkest: #0A2A3E;
    --navy-mid: #154360;
    --steel: #2471A3;
    --steel-light: #2E86C1;
    --ice: #D6EAF8;
    --ice-light: #EBF5FB;
    --ice-wash: #F2F8FC;
    --charcoal: #1B2631;
    --slate: #5D6D7E;
    --silver: #ABB2B9;
    --navy-grad: linear-gradient(180deg, #0E3A56 0%, #1A5276 100%);
    --navy-grad-r: linear-gradient(135deg, #1A5276 0%, #0E3A56 100%);
    --navy-solid: #1A5276;
}


/* ═══════════════════════════════════════════════════════
   FONT OVERRIDE
   Playfair Display for headings (matches the serif
   style on the Phototronics site), Inter for body.
   ═══════════════════════════════════════════════════════ */

body,
.menu-item,
.btn-primary,
.btn-ghost,
.access-bar input,
.field input,
.addr-field input,
.addr-field select,
.discount-bar input,
.discount-bar button,
.cart-bottom-btn,
.btn-select,
.btn-change,
.btn-buy,
.btn-add-cart,
.gallery-banner-logout,
.gallery-banner-add-code,
.event-switcher,
.show-btn,
.delivery-opt {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.hero h2,
.form-header h3,
.gallery-banner-top h3,
.cart-header-block h2,
.empty-cart h3,
.pkg-sheet-head h3,
.cat-hero-info h3,
.section-hd h4 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}


/* ═══════════════════════════════════════════════════════
   BACKDROP — clean white with subtle ice-blue wash
   Phototronics uses mostly white with pale blue sections.
   ═══════════════════════════════════════════════════════ */

.layout-container {
    background: #F8F9FA !important;
    min-height: 100vh !important;
}

    .layout-container.brandedBackground {
        background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(214, 234, 248, 0.3) 0%, transparent 60%), #F8F9FA !important;
        background-attachment: fixed !important;
    }


/* ═══════════════════════════════════════════════════════
   HEADER — white bar, navy hamburger & accents
   Phototronics uses a clean white header with navy text
   and a circular outlined hamburger icon.
   ═══════════════════════════════════════════════════════ */

.app-header {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    border-bottom: 2px solid var(--navy) !important;
    box-shadow: none !important;
    padding: 14px 20px !important;
}

.hamburger {
    border: 2px solid var(--navy) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 !important;
}

    .hamburger span {
        background: var(--navy) !important;
    }

        .hamburger span:nth-child(1),
        .hamburger span:nth-child(2),
        .hamburger span:nth-child(3) {
            background: var(--navy) !important;
            width: 16px !important;
        }

.cart-btn svg {
    stroke: var(--navy) !important;
}

.cart-badge {
    background: var(--navy) !important;
    box-shadow: none !important;
    border: none !important;
}


/* ═══════════════════════════════════════════════════════
   HERO — ice-blue wash with navy heading
   Phototronics has a light blue-grey section below
   the hero photo with serif headings in blue.
   ═══════════════════════════════════════════════════════ */

.hero {
    background: var(--ice-wash) !important;
    padding: 48px 24px 44px !important;
    clip-path: none !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

    /* Faint watermark-style background effect like Phototronics' logo watermark */
    .hero::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle at 30% 50%, rgba(214, 234, 248, 0.5) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(214, 234, 248, 0.3) 0%, transparent 45%) !important;
        pointer-events: none !important;
        opacity: 0.6 !important;
    }

.hero-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
}

    .hero-badge span {
        color: var(--slate) !important;
        letter-spacing: 2px !important;
        font-size: 10px !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
    }

.hero h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

.hero p {
    color: var(--slate) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    font-style: italic !important;
}


/* ═══════════════════════════════════════════════════════
   ACCESS BAR — clean, minimal
   ═══════════════════════════════════════════════════════ */

.access-bar {
    border: 2px solid var(--navy) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    transition: all 0.2s ease !important;
    background: #FFFFFF !important;
}

    .access-bar:focus-within {
        border-color: var(--steel) !important;
        box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.08) !important;
    }

    .access-bar input {
        font-weight: 500 !important;
        font-size: 14px !important;
    }

        .access-bar input::placeholder {
            color: var(--silver) !important;
        }

    .access-bar button {
        background: var(--navy) !important;
        border-radius: 0 !important;
        padding: 0 20px !important;
        transition: background 0.2s ease !important;
    }

        .access-bar button:hover {
            background: var(--navy-deep) !important;
            filter: none !important;
        }


/* ═══════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════ */

.divider {
    margin: 24px 0 !important;
}

    .divider hr {
        background: var(--border) !important;
    }

    .divider span {
        color: var(--silver) !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }


/* ═══════════════════════════════════════════════════════
   BUTTONS — outlined navy style (Phototronics uses
   outlined rectangular buttons with navy borders)
   ═══════════════════════════════════════════════════════ */

.btn-primary {
    background: var(--navy) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    padding: 16px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

    .btn-primary:hover {
        background: var(--navy-deep) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .btn-primary:active {
        background: var(--navy-darkest) !important;
        transform: none !important;
    }

.btn-ghost {
    border: 2px solid var(--navy) !important;
    color: var(--navy) !important;
    font-weight: 600 !important;
    border-radius: 0px !important;
    letter-spacing: 0.8px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

    .btn-ghost:hover {
        background: var(--navy) !important;
        color: #fff !important;
        border-color: var(--navy) !important;
        box-shadow: none !important;
    }


/* ═══════════════════════════════════════════════════════
   DESKTOP CARD
   ═══════════════════════════════════════════════════════ */

@media (min-width: 700px) {
    .screen-home {
        box-shadow: 0 2px 20px rgba(27, 38, 49, 0.08) !important;
        border: 1px solid #D5DBDF !important;
        border-radius: 0px !important;
        overflow: hidden !important;
    }

    .home-page-container {
        padding: 40px !important;
    }
}


/* ═══════════════════════════════════════════════════════
   DRAWER — dark navy, clean lines
   ═══════════════════════════════════════════════════════ */

.drawer {
    background: #FFFFFF !important;
    box-shadow: 6px 0 40px rgba(27, 38, 49, 0.15) !important;
    border-right: 2px solid var(--navy) !important;
}

.drawer-head {
    background: var(--navy) !important;
    padding: 48px 24px 28px !important;
    border-bottom: none !important;
}

    .drawer-head p {
        color: rgba(255, 255, 255, 0.5) !important;
    }

.drawer-body {
    background: #FFFFFF !important;
}

.menu-item {
    color: var(--charcoal) !important;
    border-bottom: 1px solid #EAECEE !important;
    transition: all 0.15s ease !important;
    padding: 16px 24px !important;
    font-weight: 500 !important;
}

    .menu-item:hover {
        background: var(--ice-wash) !important;
        color: var(--navy) !important;
        padding-left: 28px !important;
    }

    .menu-item svg {
        stroke: var(--silver) !important;
    }

.drawer-foot {
    background: #F4F6F7 !important;
    border-top: 1px solid #D5DBDF !important;
}

    .drawer-foot p {
        color: var(--slate) !important;
    }

    .drawer-foot a {
        color: var(--slate) !important;
    }

.drawer-foot-links a {
    color: var(--slate) !important;
    transition: color 0.15s ease !important;
}

    .drawer-foot-links a:hover {
        color: var(--navy) !important;
    }

.drawer-logout-btn {
    background: transparent !important;
    border: 2px solid var(--navy) !important;
    color: var(--navy) !important;
    border-radius: 0px !important;
}

    .drawer-logout-btn:hover {
        background: var(--navy) !important;
        color: #fff !important;
    }

.overlay.open {
    background: rgba(27, 38, 49, 0.5) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}


/* ═══════════════════════════════════════════════════════
   GALLERY BANNER — navy with clean white type
   ═══════════════════════════════════════════════════════ */

.gallery-banner {
    background: var(--navy) !important;
    padding: 20px 20px 18px !important;
}

.gallery-banner-eyebrow {
    color: var(--ice) !important;
    letter-spacing: 1.5px !important;
}

.gallery-banner-top h3 {
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}

.gallery-banner-add-code {
    background: #FFFFFF !important;
    color: var(--navy) !important;
    font-weight: 700 !important;
    border-radius: 0px !important;
}

.gallery-banner-logout {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 0px !important;
}

.event-switcher {
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0px !important;
}

    .event-switcher:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }


/* ═══════════════════════════════════════════════════════
   INFO BLOCK
   ═══════════════════════════════════════════════════════ */

.info-block {
    border: 1px solid #D5DBDF !important;
    box-shadow: 0 1px 8px rgba(27, 38, 49, 0.04) !important;
    border-radius: 0px !important;
}

@media (min-width: 1300px) {
    .info-block {
        background: #FFFFFF !important;
    }
}

.countdown-row {
    background: var(--ice-wash) !important;
    border-bottom: 1px solid #D5DBDF !important;
}

.countdown-date {
    color: var(--navy) !important;
    font-weight: 800 !important;
}

.countdown-pill {
    box-shadow: none !important;
    border: 1px solid #D5DBDF !important;
    border-radius: 4px !important;
}


/* ═══════════════════════════════════════════════════════
   PHOTO CARDS — clean, square-cornered,
   professional photography feel
   ═══════════════════════════════════════════════════════ */

.photo-card {
    border: 1px solid #D5DBDF !important;
    box-shadow: 0 1px 6px rgba(27, 38, 49, 0.04) !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
}

    .photo-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(27, 38, 49, 0.08) !important;
    }

.photo-card-footer .photo-label {
    font-weight: 700 !important;
    color: var(--charcoal) !important;
}

.btn-buy {
    background: var(--navy) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

    .btn-buy:hover {
        background: var(--navy-deep) !important;
        filter: none !important;
    }

.featured-actions .btn-wishlist {
    background: var(--ice-wash) !important;
    color: var(--navy) !important;
    border-radius: 0px !important;
}

.section-hd h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
}

.section-hd span {
    color: var(--steel) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 10px !important;
}


/* ═══════════════════════════════════════════════════════
   CATEGORY CARDS
   ═══════════════════════════════════════════════════════ */

.cat-hero {
    background: var(--navy) !important;
}

.cat-hero-info h3 {
    font-weight: 700 !important;
}

.cat-hero-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 0px !important;
}

.cat-card {
    border: 1px solid #D5DBDF !important;
    box-shadow: 0 1px 6px rgba(27, 38, 49, 0.04) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

    .cat-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 18px rgba(27, 38, 49, 0.08) !important;
    }

.cat-card-img .cat-badge {
    color: var(--navy) !important;
    font-weight: 700 !important;
    border-radius: 0px !important;
}

.cat-card-body h4 {
    font-weight: 700 !important;
    color: var(--charcoal) !important;
}

.cat-card-body .from {
    color: var(--navy) !important;
    font-weight: 700 !important;
}

.cat-card-full {
    border-radius: 4px !important;
}


/* ═══════════════════════════════════════════════════════
   PRODUCT CARDS
   ═══════════════════════════════════════════════════════ */

.prod-hero {
    background: var(--navy) !important;
}

    .prod-hero h3 {
        font-weight: 700 !important;
    }

.prod-card {
    border-radius: 4px !important;
}

    .prod-card.selected {
        border: 2px solid var(--navy) !important;
        box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.08) !important;
    }

.prod-mockup {
    background: var(--ice-wash) !important;
}

.prod-mockup-phone {
    background: var(--charcoal) !important;
}

.prod-mockup-img-badge {
    background: var(--navy) !important;
    border-radius: 2px !important;
}

.prod-info h4 {
    color: var(--charcoal) !important;
    font-weight: 700 !important;
}

.prod-info .prod-price {
    color: var(--navy) !important;
    font-weight: 800 !important;
}

.btn-select {
    background: var(--navy) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 11px !important;
}

    .btn-select.selected {
        background: var(--navy-deep) !important;
    }

.btn-change {
    background: var(--ice-wash) !important;
    color: var(--navy) !important;
    border-radius: 0px !important;
}

.btn-add-cart {
    background: var(--navy) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 14px !important;
}

    .btn-add-cart:hover {
        background: var(--navy-deep) !important;
    }


/* ═══════════════════════════════════════════════════════
   CART / CHECKOUT
   ═══════════════════════════════════════════════════════ */

.cart-header-block h2 {
    font-size: 24px !important;
    letter-spacing: -0.3px !important;
    color: var(--navy) !important;
}

.step-dot.active {
    border-color: var(--navy) !important;
    background: var(--navy) !important;
    box-shadow: none !important;
}

.step-dot.done {
    border-color: var(--navy) !important;
    background: var(--navy) !important;
}

.step-line.done {
    background: var(--navy) !important;
}

.step-dot.active .step-label {
    color: var(--navy) !important;
    font-weight: 700 !important;
}

.step-dot.done .step-label {
    color: var(--navy) !important;
}

.qty-btn {
    border-radius: 0px !important;
}

    .qty-btn:hover {
        border-color: var(--navy) !important;
        color: var(--navy) !important;
        background: var(--ice-wash) !important;
    }

.cart-row-remove:hover {
    color: #C0392B !important;
}

.cart-upsell {
    background: var(--navy) !important;
    border-radius: 4px !important;
}

.cart-upsell-purchased {
    background: var(--navy-deep) !important;
}

.cart-upsell-price {
    color: var(--navy) !important;
    border-radius: 0px !important;
}

.cart-upsell-quantity {
    color: var(--navy) !important;
    border-radius: 0px !important;
}

.discount-bar input {
    border-radius: 0px !important;
}

    .discount-bar input:focus {
        border-color: var(--navy) !important;
        box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.08) !important;
    }

.discount-bar button {
    border: 2px solid var(--navy) !important;
    color: var(--navy) !important;
    border-radius: 0px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 11px !important;
}

    .discount-bar button:hover {
        background: var(--navy) !important;
        border-color: var(--navy) !important;
        color: #fff !important;
    }

.discount-pill {
    background: var(--ice-wash) !important;
    border-color: var(--navy) !important;
    color: var(--navy) !important;
    border-radius: 0px !important;
}

.order-summary {
    border-radius: 4px !important;
    border: 1px solid #D5DBDF !important;
}

.summary-total .val {
    color: var(--navy) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

.cart-bottom-bar {
    background: #FFFFFF !important;
    box-shadow: 0 -2px 12px rgba(27, 38, 49, 0.06) !important;
    border-top: 2px solid var(--navy) !important;
}

.cart-bottom-btn {
    box-shadow: none !important;
    border-radius: 0px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}

    .cart-bottom-btn:hover {
        background: var(--navy-deep) !important;
    }

    .cart-bottom-btn.back {
        border: 2px solid var(--navy) !important;
        color: var(--navy) !important;
        border-radius: 0px !important;
    }

    .cart-bottom-btn.confirm {
        background: var(--navy) !important;
    }

.cbt-price {
    color: var(--navy) !important;
    font-weight: 800 !important;
}


/* ═══════════════════════════════════════════════════════
   ADDRESS FORM
   ═══════════════════════════════════════════════════════ */

.addr-section-card {
    border: 1px solid #D5DBDF !important;
    border-radius: 4px !important;
}

.delivery-opt {
    border-radius: 0px !important;
}

    .delivery-opt.active {
        border-color: var(--navy) !important;
        background: var(--ice-wash) !important;
        box-shadow: none !important;
    }

.addr-field input,
.addr-field select {
    border-radius: 0px !important;
}

    .addr-field input:focus,
    .addr-field select:focus {
        border-color: var(--navy) !important;
        box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.08) !important;
    }


/* ═══════════════════════════════════════════════════════
   REVIEW & CONFIRMATION
   ═══════════════════════════════════════════════════════ */

.review-card {
    border-radius: 4px !important;
    border: 1px solid #D5DBDF !important;
}

.review-edit-btn {
    color: var(--navy) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 10px !important;
}

.confirm-note {
    background: var(--ice-wash) !important;
    border: 1px solid var(--ice) !important;
    border-radius: 4px !important;
}

    .confirm-note span {
        color: var(--navy) !important;
    }


/* ═══════════════════════════════════════════════════════
   VOUCHER FEEDBACK
   ═══════════════════════════════════════════════════════ */

.voucher-applied {
    background: var(--ice-wash) !important;
    border: 1.5px solid var(--ice) !important;
    border-radius: 4px !important;
}

.voucher-applied-icon {
    background: var(--navy) !important;
    border-radius: 4px !important;
}

.voucher-applied-amount {
    color: var(--navy) !important;
    font-weight: 800 !important;
}

.voucher-error {
    border-radius: 4px !important;
}


/* ═══════════════════════════════════════════════════════
   MODALS & SHEETS
   ═══════════════════════════════════════════════════════ */

.pkg-modal.open {
    background: rgba(27, 38, 49, 0.55) !important;
    backdrop-filter: blur(4px) !important;
}

.pkg-sheet {
    border-radius: 0px !important;
}

.pkg-sheet-head h3 {
    font-weight: 700 !important;
    color: var(--navy) !important;
}

.pkg-item {
    border-radius: 4px !important;
}

    .pkg-item.active {
        border-color: var(--navy) !important;
        background: var(--ice-wash) !important;
        box-shadow: none !important;
    }

        .pkg-item.active .pkg-item-check {
            background: var(--navy) !important;
            border-color: var(--navy) !important;
        }

.pkg-item-price {
    color: var(--navy) !important;
}

.event-item.active {
    background: var(--ice-wash) !important;
}

.event-item-check {
    background: var(--navy) !important;
}

.event-add-btn {
    background: var(--ice-wash) !important;
    color: var(--navy) !important;
    border-radius: 0px !important;
}


/* ═══════════════════════════════════════════════════════
   FORM FIELDS (login/register)
   ═══════════════════════════════════════════════════════ */

.form-panel {
    border-radius: 0px !important;
}

.form-header h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
}

.field label {
    color: var(--slate) !important;
    text-transform: uppercase !important;
}

.field input {
    border-radius: 0px !important;
}

    .field input:focus {
        border-color: var(--navy) !important;
        box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.08) !important;
    }

    .field input.error {
        border-color: #C0392B !important;
        background: #FDEDEC !important;
    }

.error-msg {
    color: #C0392B !important;
}

.forgot a {
    color: var(--navy) !important;
    font-weight: 600 !important;
}

.bc-item:hover,
.bc-item.active {
    color: var(--navy) !important;
}


/* ═══════════════════════════════════════════════════════
   SAVINGS TAGS
   ═══════════════════════════════════════════════════════ */

.savings-tag.green-tag {
    color: var(--navy-deep) !important;
    background: var(--ice-wash) !important;
    border-color: var(--ice) !important;
    border-radius: 0px !important;
}

.green-pct,
.green-pct span {
    color: var(--navy) !important;
}

.savings-tag.gold-tag {
    border-radius: 0px !important;
}


/* ═══════════════════════════════════════════════════════
   EMPTY CART
   ═══════════════════════════════════════════════════════ */

.empty-cart h3 {
    font-size: 24px !important;
    color: var(--navy) !important;
}

.empty-cart p {
    color: var(--slate) !important;
}


/* ═══════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════ */

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(26, 82, 118, 0.15) transparent !important;
}

    *::-webkit-scrollbar {
        width: 6px !important;
    }

    *::-webkit-scrollbar-track {
        background: transparent !important;
    }

    *::-webkit-scrollbar-thumb {
        background: rgba(26, 82, 118, 0.15) !important;
        border-radius: 3px !important;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: rgba(26, 82, 118, 0.3) !important;
        }


/* ═══════════════════════════════════════════════════════
   SELECTION & FOCUS
   ═══════════════════════════════════════════════════════ */

::selection {
    background: rgba(26, 82, 118, 0.15) !important;
    color: var(--charcoal) !important;
}

*:focus-visible {
    outline: 2px solid rgba(26, 82, 118, 0.4) !important;
    outline-offset: 2px !important;
}