/* Extracted from templates/portal/base.html on 2026-08-05.
 * The shared portal stylesheet. It was inlined into EVERY page — ~23KB the browser
 * re-downloaded on every navigation, because the HTML is deliberately no-cache so a deploy
 * ships fresh markup. Now served immutable for a year and cache-busted by asset_url()
 * (presentation/web/rendering.py), so it is fetched once and reused until it changes.
 *
 * The split point is the end of the `.container` rule, NOT the last Jinja expression: that
 * rule interpolates its max-width, and cutting inside it would leave an unclosed rule here
 * and an orphan declaration there — invalid CSS in both files, silently dropped.
 * The theme variables and is_books_portal overrides stay inline; they depend on the shop
 * row and are rendered per request. Do not move them here.
 */
        .ic { display: inline-flex; align-items: center; vertical-align: middle; }
        *, *::before, *::after { box-sizing: border-box; }
        html { overflow-x: clip; max-width: 100vw; } body { max-width: 100vw; }
        .ic svg { display: block; }

        /* Portal top bar */
        .portal-topbar {
            background: var(--primary);
            padding: 8px 0;
            font-size: 12px;
            color: rgba(255,255,255,.7);
        }
        .portal-topbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .portal-topbar-left {
            display: flex;
            gap: 18px;
            align-items: center;
        }
        .portal-topbar-left span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .portal-topbar-right {
            display: flex;
            gap: 14px;
            align-items: center;
        }
        .portal-topbar-right a {
            color: rgba(255,255,255,.7);
            text-decoration: none;
            transition: color .2s;
        }
        .portal-topbar-right a:hover { color: #fff; }
        /* Office light topbar (Esoterica Books-style, office colors) */
        body:not(.mirava) .portal-topbar{background:#f3f5fb;border-bottom:1px solid #e5e9f2;color:#475569;padding:9px 0}
        body:not(.mirava) .portal-topbar-left span{color:#475569}
        body:not(.mirava) .portal-topbar-left svg{color:var(--accent)}
        body:not(.mirava) .portal-topbar-right a{color:#475569 !important}
        body:not(.mirava) .portal-topbar-right a:hover{color:var(--accent) !important}
        body:not(.mirava) .portal-topbar-right span{color:#475569}
        .tb-phone-o{color:#1a1a2e!important;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
        .tb-phone-o svg{color:var(--accent)}
        .tb-phone-o:hover{color:var(--accent)!important}
        .tb-callback-o{color:var(--accent);text-decoration:underline;font-weight:600;font-size:13px;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
        .tb-callback-o:hover{opacity:.8}
        @media(max-width:768px){.tb-phone-o,.tb-callback-o{display:none!important}}

        /* Portal nav */
        /* Sticky moved to .portal-headwrap so the top bar travels with it — see base.html. */
        .portal-headwrap {
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .portal-nav {
            background: #fff;
            border-bottom: 1px solid #e8edf5;
            padding: 0;
            box-shadow: 0 1px 4px rgba(0,0,0,.04);
        }
        .portal-nav .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            height: 64px;
        }
        .portal-logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            flex-shrink: 0;
        }
        .portal-logo .logo-img { height: 48px; }
        .portal-logo .logo-text {
            font-size: 20px;
            font-weight: 800;
            color: var(--primary);
            letter-spacing: -.3px;
        }
        .portal-links {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .portal-links > a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #444;
            text-decoration: none;
            border-radius: 8px;
            transition: all .2s;
        }
        .portal-links > a:hover {
            background: #f0f4ff;
            color: var(--accent);
        }

        /* Categories dropdown */
        .portal-cat-dropdown {
            position: relative;
        }
        .portal-cat-dropdown > button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #444;
            background: none;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            transition: all .2s;
        }
        .portal-cat-dropdown > button:hover {
            background: #f0f4ff;
            color: var(--accent);
        }
        .portal-cat-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #e8edf5;
            border-radius: 12px;
            box-shadow: 0 12px 32px rgba(0,0,0,.1);
            min-width: 260px;
            padding: 8px;
            z-index: 200;
        }
        .portal-cat-dropdown:hover .portal-cat-menu,
        .portal-cat-dropdown:focus-within .portal-cat-menu {
            display: block;
        }
        .portal-cat-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            font-size: 14px;
            color: #333;
            text-decoration: none;
            border-radius: 8px;
            transition: all .15s;
        }
        .portal-cat-menu a:hover {
            background: #f0f4ff;
            color: var(--accent);
        }
        .portal-cat-menu a .cat-icon { font-size: 20px; }
        .portal-cat-menu a .cat-count {
            margin-left: auto;
            font-size: 12px;
            color: #999;
        }

        /* Search */
        .portal-search {
            flex: 1;
            max-width: 480px;
            display: flex;
            margin: 0 auto;  /* center between left links and right wishlist+cart */
        }
        .portal-search input {
            width: 100%;
            padding: 10px 16px;
            border: 1.5px solid #e0e6f0;
            border-right: none;
            border-radius: 10px 0 0 10px;
            font-size: 14px;
            outline: none;
            transition: border-color .2s;
        }
        .portal-search input:focus { border-color: var(--accent); }
        .portal-search button {
            padding: 10px 16px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 0 10px 10px 0;
            cursor: pointer;
            transition: background .2s;
        }
        .portal-search button:hover { filter: brightness(1.1); }

        /* Header search suggest rows. These were three inline style attributes built in
           static/js/portal-base-data.js, and all three shipped a doubled quote
           (style=""display:flex;…): the parser read style as empty, took the declarations
           as bare attribute names and let the trailing quote swallow markup — so rows lost
           both their flex layout and their separator, and re-flowed as each cover decoded.
           A class cannot be mis-quoted, and a row a loop repeats is not per-row payload. */
        .hdr-sug-row {
            display: flex;
            gap: 10px;
            padding: 7px 12px;
            align-items: center;
            text-decoration: none;
            color: inherit;
        }
        /* Two classes, so the compound selector wins on specificity rather than on source
           order — re-sorting these blocks must not silently change the book row's padding. */
        .hdr-sug-row.hdr-sug-row-book {
            padding: 8px 12px;
            border-bottom: 1px solid #f1f5f9;
        }

        /* Cart button */
        .portal-cart-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 18px;
            background: #f8f9ff;
            border: 1.5px solid #e0e6f0;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            text-decoration: none;
            transition: all .2s;
            white-space: nowrap;
        }
        .portal-cart-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Footer */
        .portal-footer { background: var(--primary); color: #fff; padding: 48px 0 0; }
        .portal-footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }
        .portal-footer h4 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 16px;
            color: #fff;
        }
        .portal-footer p, .portal-footer a {
            font-size: 13px;
            color: rgba(255,255,255,.65);
            line-height: 1.7;
        }
        .portal-footer a {
            text-decoration: none;
            display: block;
            padding: 3px 0;
            transition: color .2s;
        }
        .portal-footer a:hover { color: #fff; }
        /* breathing room on laptop widths — the 1380px container otherwise hugs the viewport edge */
        footer .container { padding: 0 clamp(28px, 4vw, 56px); }
        @media (max-width: 1440px) { .portal-footer-grid { gap: 32px; } }
        .portal-footer-bottom {
            border-top: 1px solid rgba(255,255,255,.1);
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: rgba(255,255,255,.45);
        }
        .portal-newsletter-form {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        .portal-newsletter-form input {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 8px;
            background: rgba(255,255,255,.08);
            color: #fff;
            font-size: 13px;
            outline: none;
        }
        .portal-newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
        .portal-newsletter-form button {
            padding: 10px 20px;
            background: var(--accent);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
        }

        /* Hamburger button */
        .portal-burger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            color: #444;
            border-radius: 8px;
            transition: background .2s;
        }
        .portal-burger:hover { background: #f0f4ff; }

        @media(max-width:768px) {
            .portal-topbar-left { display: none; }
            .portal-topbar { display: none; }
            .portal-nav .container {
                flex-wrap: nowrap;
                height: auto;
                padding: 4px 12px 10px 12px;
                gap: 10px;
                align-items: center;
                display: flex;
            }
            .portal-burger { display: flex; order: 1; flex-shrink: 0; }
            .portal-logo { order: 2; flex-shrink: 0; }
            .portal-search {
                order: 3;
                flex: 1 1 0;
                min-width: 0;
                max-width: none;
            }
            .portal-search input {
                padding: 8px 12px !important;
                font-size: 14px !important;
                border-radius: 8px !important;
            }
            .portal-search button {
                padding: 8px 10px !important;
                border-radius: 0 8px 8px 0 !important;
            }
            .portal-wish-btn { display: none !important; }  /* hidden on mobile — heart available in bottom-nav */
            .portal-cart-btn {
                order: 5;
                padding: 0;
                font-size: 0;
                background: none !important;
                border: none !important;
                color: #444 !important;
                flex-shrink: 0;
            }
            .portal-cart-btn svg { width: 24px; height: 24px; }
            .portal-cart-btn span { display: none; }
            .portal-links {
                display: none;
                width: 100%;
                order: 10;
                flex-direction: column;
                gap: 2px;
                padding: 8px 0;
                border-top: 1px solid #e8edf5;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #fff;
                box-shadow: 0 8px 24px rgba(0,0,0,.1);
                z-index: 99;
            }
            .portal-links.open { display: flex; }
            .portal-links > a {
                padding: 12px 16px;
                border-radius: 0;
                font-size: 15px;
            }
            .portal-logo .logo-img { height: 36px; }
            .portal-logo .logo-full { display: none !important; }
            .portal-logo .logo-mobile { display: block !important; }
            /* Esoterica Books: keep fox icon visible on mobile, shrink text */
            .portal-logo .logo-fox { display: block !important; height: 32px !important; width: 32px !important; }
            .site-logo-wrap { gap: 6px !important; }
            .site-logo-text { display: none !important; }
            .portal-catbar { display: block; }
            .portal-nav { padding-bottom: 8px !important; }
            .catbar-link { padding: 10px 12px; font-size: 12px; }
            .footer-grid-portal { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
        }
        @media(max-width:480px) {
            .footer-grid-portal { grid-template-columns: 1fr !important; }
        }
        @media(max-width:768px) {
            .cat-grid-mobile { grid-template-columns: repeat(2, 1fr) !important; }
        }

        /* More dropdown (same style as cat-dropdown) */
        .portal-more-dropdown {
            position: relative;
        }
        .portal-more-dropdown > button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #444;
            background: none;
            border: none;
            cursor: pointer;
            border-radius: 8px;
            transition: all .2s;
        }
        .portal-more-dropdown > button:hover {
            background: #f0f4ff;
            color: var(--accent);
        }
        .portal-more-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            border: 1px solid #e8edf5;
            border-radius: 12px;
            box-shadow: 0 12px 32px rgba(0,0,0,.1);
            min-width: 180px;
            padding: 6px;
            z-index: 200;
        }
        .portal-more-dropdown:hover .portal-more-menu,
        .portal-more-dropdown:focus-within .portal-more-menu {
            display: block;
        }
        .portal-more-menu a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            font-size: 14px;
            color: #333;
            text-decoration: none;
            border-radius: 8px;
            transition: all .15s;
        }
        .portal-more-menu a:hover {
            background: #f0f4ff;
            color: var(--accent);
        }

        /* Category bar */
        .portal-catbar {
            background: #f8f9fc;
            border-bottom: 1px solid #e8edf5;
            padding: 0;
            overflow: hidden;
        }
        .portal-catbar .container {
            overflow: hidden;
        }
        .portal-catbar-inner {
            display: flex;
            align-items: center;
            gap: 0;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 0 4px;
        }
        .portal-catbar-inner::-webkit-scrollbar { display: none; }
        .portal-catbar {
            position: relative;
        }
        .portal-catbar::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 60px;
            background: linear-gradient(to right, transparent, #f8f9fc);
            pointer-events: none;
            z-index: 1;
        }
        .catbar-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            color: #555;
            text-decoration: none;
            white-space: nowrap;
            border-bottom: 2px solid transparent;
            transition: all .2s;
        }
        .catbar-link:hover,
        .catbar-link.catbar-active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: rgba(233,69,96,.04);
        }
        .catbar-link.catbar-active {
            font-weight: 600;
        }
        .catbar-count {
            font-size: 11px;
            color: #999;
            background: #eef0f5;
            padding: 1px 6px;
            border-radius: 10px;
        }

        @media(max-width:768px) {
            .portal-catbar-inner { gap: 0; }
            .catbar-link { padding: 10px 12px; font-size: 12px; }
        }

        /* ═══ MIRAVA header — cream + pills (zarmilka-inspired) ═══ */
        body.esoterica .portal-topbar {
            background: #FAF7F2;
            border-bottom: 1px solid rgba(234,88,12,.15);
            color: #44372C;
            padding: 10px 0;
            font-size: 13px;
        }
        body.esoterica .portal-topbar-left { gap: 22px; }
        body.esoterica .portal-topbar-left span {
            color: #44372C;
            font-size: 13px;
            letter-spacing: .2px;
        }
        body.esoterica .portal-topbar-left svg { color: #EA580C; }
        body.esoterica .portal-topbar-right { gap: 14px; }
        body.esoterica .portal-topbar-right a {
            color: #44372C !important;
            font-weight: 500;
            text-decoration: none;
        }
        body.esoterica .portal-topbar-right a:hover { color: #EA580C !important; }
        body.esoterica .portal-topbar-right .tb-currency {
            color: #44372C;
            background: #fff;
            border: 1px solid rgba(234,88,12,.2);
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        body.esoterica .portal-nav { border-bottom: 1px solid #F0E6D9; }

        /* Wishlist pill — match cart proportions, badge inline */
        body.esoterica .portal-wish-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            padding: 9px 14px !important;
            background: #fff !important;
            border: 1.5px solid #e8e0d3 !important;
            border-radius: 10px !important;
            color: #475569 !important;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: all .15s;
            white-space: nowrap;
        }
        body.esoterica .portal-wish-btn:hover {
            border-color: #EA580C !important;
            color: #EA580C !important;
            background: #fff !important;
        }
        /* badge — visual only; let JS control display (none vs flex) */
        body.esoterica #headerWishBadge {
            position: static !important;
            background: #EA580C !important;
            color: #fff !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            padding: 2px 8px !important;
            border-radius: 12px !important;
            min-width: 22px !important;
            height: auto !important;
            line-height: 1.3 !important;
            align-items: center !important;
            justify-content: center !important;
            top: auto !important;
            right: auto !important;
        }
        body.esoterica #headerWishBadge[style*="flex"] { display: inline-flex !important; }

        /* Cart pill — Esoterica Books: outline by default (empty cart), filled when has items */
        body.esoterica .portal-cart-btn {
            padding: 9px 14px !important;
            background: #fff !important;
            color: #475569 !important;
            border: 1.5px solid #e8e0d3 !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            border-radius: 10px !important;
            gap: 8px;
            transition: all .15s;
        }
        body.esoterica .portal-cart-btn:hover {
            border-color: #EA580C !important;
            color: #EA580C !important;
            background: #fff !important;
        }
        body.esoterica .portal-cart-btn.has-items {
            background: #EA580C !important;
            color: #fff !important;
            border-color: #EA580C !important;
            padding: 9px 16px !important;
        }
        body.esoterica .portal-cart-btn.has-items:hover {
            background: #C2410C !important;
            border-color: #C2410C !important;
            color: #fff !important;
        }

        /* Group Favorites + Cart together on the right (close, like zarmilka) */
        body.esoterica .portal-nav .portal-wish-btn { margin-left: auto; }
        body.esoterica .portal-nav .portal-wish-btn + .portal-cart-btn { margin-left: -16px; }
        @media(max-width:768px) {
            /* Hide Favorites from header on mobile — heart available in bottom-nav */
            body.esoterica .portal-wish-btn { display: none !important; }
            body.esoterica .portal-nav .portal-wish-btn + .portal-cart-btn { margin-left: 0; }

            /* Cart: only icon + count badge on mobile (compact) */
            body.esoterica .portal-cart-btn,
            body.esoterica .portal-cart-btn.has-items {
                padding: 8px !important;
                background: transparent !important;
                border: 1.5px solid transparent !important;
                color: #44372C !important;
                font-size: 0 !important;  /* hides "Cart (" text */
                position: relative;
                gap: 0 !important;
            }
            body.esoterica .portal-cart-btn.has-items {
                color: #EA580C !important;
            }
            body.esoterica .portal-cart-btn svg {
                width: 26px !important;
                height: 26px !important;
            }
            /* Count badge — only visible when cart has items */
            body.esoterica .portal-cart-btn #cart-count {
                position: absolute;
                top: 0;
                right: 0;
                background: #EA580C;
                color: #fff !important;
                font-size: 10px !important;
                font-weight: 700;
                padding: 2px 5px;
                border-radius: 9px;
                min-width: 16px;
                text-align: center;
                line-height: 1.2;
                display: none;
            }
            body.esoterica .portal-cart-btn.has-items #cart-count {
                display: inline-block;
            }
        }

        /* Phone + callback link in topbar (Esoterica Books) */
        body.esoterica .tb-phone {
            color: #1a1a1a !important;
            font-weight: 600 !important;
            font-size: 13px !important;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
        }
        body.esoterica .tb-phone:hover { color: #EA580C !important; }
        body.esoterica .tb-phone svg { color: #EA580C; }
        body.esoterica .tb-callback {
            color: #EA580C !important;
            text-decoration: underline !important;
            font-weight: 500 !important;
            font-size: 13px !important;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
        }
        body.esoterica .tb-callback:hover { color: #C2410C !important; }
        @media(max-width:768px) {
            body.esoterica .tb-phone, body.esoterica .tb-callback { display: none !important; }
        }

        /* Account button in the sticky nav. Same shape as Favorites — see the note in base.html
           for why it is here and not only in the top bar. */
        body.esoterica .portal-acct-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            padding: 9px 14px !important;
            background: #fff !important;
            border: 1.5px solid #e8e0d3 !important;
            border-radius: 10px !important;
            color: #475569 !important;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: all .15s;
            white-space: nowrap;
            max-width: 190px;
            overflow: hidden;
        }
        body.esoterica .portal-acct-btn:hover {
            border-color: #EA580C !important;
            color: #EA580C !important;
        }
        body.esoterica .portal-acct-btn span {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* It takes over the auto margin that used to push Favorites to the right, so the three
           controls stay one group instead of Favorites re-splitting them.
           The account control is TWO possible elements, not one: the bare <a> when signed out,
           and the `.acc-dd` wrapper `buildAccMenu()` (static/js/tpl-base.js) puts around it once
           /api/me answers "signed in". A layout rule naming only the <a> therefore stops
           applying to exactly the visitors who have a dropdown to place — the auto margin was
           lost to the wrapper, and nothing looked wrong until someone signed in. Name both. */
        body.esoterica .portal-nav .portal-acct-btn,
        body.esoterica .portal-nav .acc-dd { margin-left: auto; }
        body.esoterica .portal-nav .acc-dd .portal-acct-btn { margin-left: 0; }
        body.esoterica .portal-nav .portal-acct-btn + .portal-wish-btn,
        body.esoterica .portal-nav .acc-dd + .portal-wish-btn { margin-left: 12px; }
        @media(max-width:768px) {
            /* Icon only — the label is what costs the width, and reaching the account is the
               point. Favorites hides entirely on mobile; this must not. */
            body.esoterica .portal-acct-btn {
                padding: 9px 11px !important;
            }
            /* ORDER, not an auto margin. The mobile header assigns `order` to burger/logo/
               search/cart and skipped the account control, so it kept the initial `order: 0`
               and became the LEFTMOST item — its dropdown then opened leftwards from x≈45px
               and `html { overflow-x: clip }` hid the ~185px that landed at negative x, leaving
               the white sliver QA reported. It belongs between the search and the cart.
               Deliberately NOT scoped to one storefront: the header is shared `_base` markup,
               so any shop that renders it inherits the defect along with it. */
            .portal-nav .portal-acct-btn,
            .portal-nav .acc-dd {
                order: 4;
                flex-shrink: 0;
            }
            body.esoterica .portal-nav .portal-acct-btn,
            body.esoterica .portal-nav .acc-dd { margin-left: 0; }
            body.esoterica .portal-acct-btn span { display: none; }
            body.esoterica .portal-nav .portal-acct-btn + .portal-wish-btn,
            body.esoterica .portal-nav .acc-dd + .portal-wish-btn { margin-left: 0; }
        }

        /* Account tabs. Links, not JS panels — see the note in account.html. */
        .acct-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1.5px solid #E2E8F0}
        .acct-tab{display:inline-block;padding:10px 16px;font-size:14px;font-weight:600;color:#64748B;text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap;transition:color .15s,border-color .15s}
        .acct-tab:hover{color:var(--accent)}
        .acct-tab-on{color:var(--accent);border-bottom-color:var(--accent)}
        @media(max-width:520px){.acct-tab{padding:9px 11px;font-size:13px}}

        /* Account dropdown. Ported from mirava.com.ua, whose markup and CSS were read from the
           live site — the local checkout predates it. Opens on hover with a pointer, on tap
           without one; the button itself still navigates to /account either way. */
        .acc-dd{position:relative;display:inline-block}
        .acc-dd-caret{font-size:9px;opacity:.6;margin-left:2px}
        .acc-dd-menu{position:absolute;top:100%;right:0;margin-top:6px;min-width:230px;background:#fff;border:1px solid #F1EFEC;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s;z-index:120}
        .acc-dd:hover .acc-dd-menu,.acc-dd.open .acc-dd-menu{opacity:1;visibility:visible;transform:none}
        .acc-dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:600;color:#44403C;text-decoration:none;white-space:nowrap}
        .acc-dd-menu a:hover{background:#F5F4F2;color:#1c1917}
        .acc-dd-menu a span{width:19px;text-align:center;font-size:15px;flex:none}
        .acc-dd-out{color:#DC2626 !important;border-top:1px solid #F1EFEC;border-radius:0 0 9px 9px;margin-top:4px;padding-top:11px !important}
        .acc-dd-out:hover{background:#FEF2F2 !important;color:#B91C1C !important}
        @media(max-width:768px){
            /* The panel is drawn leftwards from the button's right edge, so its width is the
               only thing that can push it off-screen. `min-width` would win over `max-width`,
               so the mobile value has to REPLACE it rather than sit beside it. */
            .acc-dd-menu{min-width:min(230px, calc(100vw - 24px));max-width:calc(100vw - 24px)}
        }


/* ═══ Moved out of product.css, 2026-08-16 ═══════════════════════════════════
   product.css was loaded on EVERY portal page — 5.7 KiB of render-blocking CSS
   for a file the home, category and all-books pages use no class from at all.
   These are the only rules a non-product page needed: breadcrumbs appear on
   about thirteen of them, and .pd-section-title on the author page. Everything
   else in that file is genuinely the product page's, and it now loads there.
   The `pd-` prefix on the section title is history, not scope — it is a plain
   section heading. ═══════════════════════════════════════════════════════════ */
/* ─── Breadcrumbs ─── */
.breadcrumbs { background: #fafafa; border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
.bc-list { display: flex; align-items: center; gap: 8px; list-style: none; font-size: 13px; color: #999; flex-wrap: wrap; }
.bc-list li::after { content: '›'; margin-left: 8px; color: #ccc; }
.bc-list li:last-child::after { display: none; }
.bc-list a { color: #666; }
.bc-list a:hover { color: var(--accent); }
.bc-current { color: #333; font-weight: 500; }

.pd-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 18px 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: 80px;
}
@media (max-width: 768px) {
  .pd-section-title { font-size: 19px; margin-bottom: 14px; }
}