/* 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 var(--eso-line, #d8cdbb);
            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: var(--eso-oxblood, var(--accent)); }
        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: var(--eso-oxblood, var(--accent)) !important; }
        body.esoterica .portal-topbar-right .tb-currency {
            color: #44372C;
            background: #fff;
            border: 1px solid var(--eso-line, #d8cdbb);
            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: var(--eso-oxblood, var(--accent)) !important;
            color: var(--eso-oxblood, var(--accent)) !important;
            background: #fff !important;
        }
        /* badge — visual only; let JS control display (none vs flex) */
        body.esoterica #headerWishBadge {
            position: static !important;
            background: var(--eso-oxblood, var(--accent)) !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: var(--eso-oxblood, var(--accent)) !important;
            color: var(--eso-oxblood, var(--accent)) !important;
            background: #fff !important;
        }
        body.esoterica .portal-cart-btn.has-items {
            background: var(--eso-oxblood, var(--accent)) !important;
            color: #fff !important;
            border-color: var(--eso-oxblood, var(--accent)) !important;
            padding: 9px 16px !important;
        }
        body.esoterica .portal-cart-btn.has-items:hover {
            background: var(--eso-oxblood-dark, var(--accent)) !important;
            border-color: var(--eso-oxblood-dark, var(--accent)) !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: var(--eso-oxblood, var(--accent)) !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: var(--eso-oxblood, var(--accent));
                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: var(--eso-oxblood, var(--accent)) !important; }
        body.esoterica .tb-phone svg { color: var(--eso-oxblood, var(--accent)); }
        body.esoterica .tb-callback {
            color: var(--eso-oxblood, var(--accent)) !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: var(--eso-oxblood-dark, var(--accent)) !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: var(--eso-oxblood, var(--accent)) !important;
            color: var(--eso-oxblood, var(--accent)) !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)}
        }

/* ═══════════════════════════════════════════════════════════════════════════
   COOKBOOK SHELF — GLOBAL SHELL
   A compact kitchen-reference index rather than a generic beige bookshop.
   All rules are storefront-scoped: the same base template serves other shops. */
body.cooking {
    --cs-shell-ink: #2b2118;
    --cs-shell-paper: #faf7f2;
    --cs-shell-white: #fff;
    --cs-shell-line: #e7ddd2;
    --cs-shell-muted: #6e6258;
    --cs-shell-blue: #c86422;
    --cs-shell-tomato: #c86422;
    --cs-shell-lime: #c86422;
}

body.cooking .portal-headwrap {
    background: var(--cs-shell-white);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(23, 33, 29, .12), 0 8px 26px rgba(23, 33, 29, .055);
}
body.cooking .portal-topbar {
    padding: 0;
    border-bottom: 1px solid #2c3932;
    background: var(--cs-shell-ink);
    color: rgba(255, 255, 255, .76);
}
body.cooking .portal-topbar .container { min-height: 34px; }
body.cooking .portal-topbar-left { gap: 25px; }
body.cooking .portal-topbar-left span {
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .015em;
}
body.cooking .portal-topbar-left svg { color: var(--cs-shell-lime); }
body.cooking .portal-topbar-right { gap: 10px; }
body.cooking .portal-topbar-right button {
    min-height: 28px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    font: 750 11px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
}
body.cooking .portal-topbar-right button:hover { color: var(--cs-shell-lime); }
body.cooking .portal-topbar-right .tb-callback {
    margin-left: 2px;
    padding: 0 0 0 12px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}
body.cooking .tb-contact { display: inline-flex; align-items: center; gap: 5px; }
body.cooking .tb-contact-chevron { transition: transform .18s ease; }
body.cooking .tb-contact[aria-expanded="true"] .tb-contact-chevron { transform: rotate(180deg); }

body.cooking .portal-nav {
    border-bottom: 0;
    background: var(--cs-shell-white);
    box-shadow: none;
}
body.cooking .portal-nav .container {
    height: 72px;
    gap: clamp(12px, 1.55vw, 24px);
}
body.cooking .portal-logo { min-width: max-content; }
body.cooking .portal-logo .site-logo-wrap {
    gap: 10px !important;
    padding-right: 17px;
    border-right: 1px solid var(--cs-shell-line);
}
body.cooking .portal-logo .logo-img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 4px;
}
body.cooking .portal-logo .site-logo-text {
    color: var(--cs-shell-ink) !important;
    font-family: Georgia, serif;
    font-size: 24px !important;
    letter-spacing: -.7px !important;
}
body.cooking .portal-links { gap: 1px; }
body.cooking .portal-links > a {
    min-height: 44px;
    padding: 10px 11px;
    border-radius: 2px;
    color: #344039;
    font: 760 13px/1 Inter, system-ui, sans-serif;
}
body.cooking .portal-links > a:hover {
    background: #fff7ef;
    color: var(--cs-shell-blue);
}
body.cooking .portal-links .ic { color: var(--cs-shell-blue); }

body.cooking .portal-search {
    max-width: 560px;
    height: 46px;
    margin: 0 auto;
    border: 1px solid #aeb8b1;
    border-radius: 2px;
    background: #fbfcfa;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.cooking .portal-search:focus-within {
    border-color: var(--cs-shell-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(200, 100, 34, .14);
}
body.cooking .portal-search input {
    min-width: 0;
    padding: 0 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cs-shell-ink);
    font: 500 14px/1 Inter, system-ui, sans-serif;
}
body.cooking .portal-search input::placeholder { color: #737e77; }
body.cooking .portal-search input:focus { border: 0; }
body.cooking .portal-search button {
    width: 50px;
    padding: 0;
    border-left: 1px solid var(--cs-shell-blue);
    border-radius: 0;
    background: var(--cs-shell-blue);
}
body.cooking .portal-search button:hover { background: #92400e; filter: none; }
body.cooking #hdrSearchDropdown {
    margin-top: 1px;
    border-color: var(--cs-shell-line) !important;
    border-radius: 2px !important;
    box-shadow: 0 18px 45px rgba(23, 33, 29, .18) !important;
}
body.cooking .hdr-sug-row { font-family: Inter, system-ui, sans-serif; }
body.cooking .hdr-sug-row:hover { background: #fff7ef !important; }

body.cooking .portal-acct-btn,
body.cooking .portal-wish-btn,
body.cooking .portal-cart-btn {
    min-height: 44px;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: #344039 !important;
    font: 750 12px/1 Inter, system-ui, sans-serif;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
body.cooking .portal-acct-btn,
body.cooking .portal-wish-btn { padding: 9px !important; }
body.cooking .portal-acct-btn:hover,
body.cooking .portal-wish-btn:hover {
    border-color: var(--cs-shell-line) !important;
    background: var(--cs-shell-paper) !important;
    color: var(--cs-shell-blue) !important;
}
body.cooking .portal-cart-btn {
    gap: 8px;
    padding: 11px 15px;
    border-color: var(--cs-shell-tomato) !important;
    background: var(--cs-shell-tomato) !important;
    color: #fff !important;
}
body.cooking .portal-cart-btn:hover {
    border-color: #a8381d !important;
    background: #a8381d !important;
    color: #fff !important;
}
body.cooking .acc-dd-menu {
    border-color: var(--cs-shell-line);
    border-radius: 2px;
    box-shadow: 0 18px 42px rgba(23, 33, 29, .16);
}
body.cooking .acc-dd-menu a { border-radius: 1px; font-family: Inter, system-ui, sans-serif; }
body.cooking .acc-dd-menu a:hover { background: #fff7ef; color: var(--cs-shell-blue); }

body.cooking .portal-catbar {
    border-bottom: 1px solid var(--cs-shell-line);
    background: var(--cs-shell-paper);
}
body.cooking .portal-catbar::after {
    width: 52px;
    background: linear-gradient(to right, transparent, var(--cs-shell-paper));
}
body.cooking .portal-catbar-inner { padding: 0; }
body.cooking .catbar-link {
    min-height: 42px;
    gap: 7px;
    padding: 0 13px;
    border-right: 1px solid rgba(217, 222, 217, .68);
    border-bottom: 3px solid transparent;
    color: #445149;
    font: 720 11px/1 Inter, system-ui, sans-serif;
}
body.cooking .catbar-link:first-child { border-left: 1px solid rgba(217, 222, 217, .68); }
body.cooking .catbar-link:hover,
body.cooking .catbar-link.catbar-active {
    border-bottom-color: var(--cs-shell-blue);
    background: #fff7ef;
    color: var(--cs-shell-blue);
}
body.cooking .catbar-count {
    min-width: 21px;
    padding: 2px 5px;
    border: 1px solid #cbd2cc;
    border-radius: 2px;
    background: #fff;
    color: #69746d;
    font: 800 9px/1 Inter, system-ui, sans-serif;
    text-align: center;
}
body.cooking .catbar-link.catbar-active .catbar-count {
    border-color: var(--cs-shell-blue);
    color: var(--cs-shell-blue);
}
body.cooking .catbar-all-genres {
    min-height: 30px;
    margin-left: 8px;
    padding: 7px 10px;
    border-color: var(--cs-shell-ink);
    border-radius: 2px;
    color: var(--cs-shell-ink);
    font: 800 10px/1 Inter, system-ui, sans-serif;
}
body.cooking .catbar-all-genres:hover {
    border-color: var(--cs-shell-blue);
    background: var(--cs-shell-blue);
    color: #fff;
}

@media (max-width: 1120px) {
    body.cooking .portal-nav .container { gap: 10px; }
    body.cooking .portal-logo .site-logo-wrap { padding-right: 10px; }
    body.cooking .portal-logo .site-logo-text { font-size: 20px !important; }
    body.cooking .portal-links > a { padding-inline: 8px; }
    body.cooking .portal-acct-btn span { display: none; }
    body.cooking .portal-wish-btn .hide-on-mobile { display: none; }
}

@media (max-width: 768px) {
    body.cooking .portal-headwrap { box-shadow: 0 1px 0 rgba(23, 33, 29, .14); }
    body.cooking .portal-nav { padding-bottom: 0 !important; }
    body.cooking .portal-nav .container {
        height: 60px;
        padding: 7px 12px;
        gap: 8px;
    }
    body.cooking .portal-burger {
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--cs-shell-line);
        border-radius: 2px;
        color: var(--cs-shell-ink);
    }
    body.cooking .portal-logo .site-logo-wrap {
        padding-right: 0;
        border-right: 0;
    }
    body.cooking .portal-logo .logo-fox {
        width: 38px !important;
        height: 38px !important;
    }
    body.cooking .portal-search {
        height: 42px;
        border-radius: 2px;
    }
    body.cooking .portal-search input {
        padding: 0 11px !important;
        border-radius: 0 !important;
        font-size: 16px !important;
    }
    body.cooking .portal-search button {
        width: 42px;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    body.cooking .portal-acct-btn {
        display: inline-flex;
        width: 42px;
        height: 42px;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border-color: var(--cs-shell-line) !important;
    }
    body.cooking .portal-acct-btn span { display: none; }
    body.cooking .portal-cart-btn,
    body.cooking .portal-cart-btn.has-items {
        width: 42px;
        height: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 0 !important;
        border-color: var(--cs-shell-line) !important;
        background: #fff !important;
        color: var(--cs-shell-ink) !important;
    }
    body.cooking .portal-cart-btn svg { width: 21px; height: 21px; }
    body.cooking .portal-catbar .container { padding-inline: 0 !important; }
    body.cooking .portal-catbar-inner { padding-left: 12px; padding-right: 82px; }
    body.cooking .catbar-link { min-height: 40px; padding-inline: 12px; }
    body.cooking .catbar-all-genres {
        right: 8px;
        min-height: 30px;
        border-color: var(--cs-shell-ink);
        border-radius: 2px;
        background: var(--cs-shell-ink);
        box-shadow: -18px 0 18px 9px var(--cs-shell-paper);
        color: #fff;
    }
}

@media (max-width: 430px) {
    body.cooking .portal-nav .container { gap: 6px; padding-inline: 8px; }
    body.cooking .portal-burger,
    body.cooking .portal-acct-btn,
    body.cooking .portal-cart-btn,
    body.cooking .portal-cart-btn.has-items { width: 40px; height: 40px; min-height: 40px; }
    body.cooking .portal-logo .logo-fox { width: 36px !important; height: 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
    body.cooking,
    body.cooking * { scroll-behavior: auto !important; }
    body.cooking *,
    body.cooking *::before,
    body.cooking *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    body.cooking :where(a,button):hover { transform: none !important; }
}


/* ═══ 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; }
}