/* ============================================================
   UNATECA — CRM design alignment layer
   Loaded LAST on every public page so it wins the cascade.
   Mirrors the new CRM design system:
     navy gradient · green (#20d21a) accent · flat refined glass.

   The live theming engine (theme.js + theme.json) drives the
   page background and per-component glass through :root CSS
   variables; this file overrides the *structure* of the navbar
   and interface elements (the legacy "raised glass" look) so
   the public site matches the new flat-glass CRM redesign:
   buttons, toggle switches, text fields, dropdowns and cards.
   ============================================================ */

:root {
    --crm-navy-1: #0a1628;
    --crm-navy-2: #1a2a4a;
    --crm-navy-3: #0a1a3a;
    /* Public accent follows the configurator's primary color (theme.js sets
       --primary-color from cfgr); literal green is only the pre-engine fallback. */
    --crm-green:  var(--primary-color, #20d21a);
    --crm-green-hover: color-mix(in srgb, var(--primary-color, #20d21a) 80%, #ffffff);

    /* Flat-glass tokens (new CRM design) */
    --glass-flat-bg:        rgba(255, 255, 255, 0.06);
    --glass-flat-bg-hover:  rgba(255, 255, 255, 0.12);
    --glass-flat-border:    rgba(255, 255, 255, 0.10);
    --glass-flat-border-hi: rgba(255, 255, 255, 0.30);
    --glass-flat-radius:    14px;
}

/* --- Body background is driven by theme.js from the cfgr theme.
       This is only the fallback shown before the engine runs / if it
       fails; NO !important, so the configured theme always wins. --- */
body {
    background: linear-gradient(135deg,
        var(--crm-navy-1) 0%,
        var(--crm-navy-2) 50%,
        var(--crm-navy-3) 100%) fixed;
}

/* ============================================================
   MASTHEAD — company logotype on the very top of the page
   (same lettering as the footer, no icon; scrolls away with the page)
   ============================================================ */
.site-masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 14px 26px 0; /* breathing room between the top edge and the logo */
    box-sizing: border-box;
    /* Same fully transparent glass treatment as the navbar */
    background: transparent;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
.masthead-logo {
    font-family: 'Geologica', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    text-decoration: none;
    background: linear-gradient(135deg, #fec725 0%, #ff8c00 50%, #fec725 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    transition: opacity 0.2s ease;
}
.masthead-logo:hover { opacity: 0.85; }

/* ============================================================
   NAVBAR — flat glass bar pinned to the very top of the page
   (the masthead logotype was removed; the navbar carries a
   circular company mark on the left instead)
   ============================================================ */
.glass-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1100 !important;
    /* Fully transparent bar — only the blur keeps the links legible */
    background: transparent !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
}

/* Offset page content below the fixed navbar (56px) */
body { padding-top: 56px !important; }

/* Center all navbar links horizontally and vertically on desktop, matching logo vertical center */
@media (min-width: 769px) {
    #nav-tabs {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        z-index: 10 !important;
    }
}

/* Tabs / icons fill the taller bar so hover & active span its height */
.glass-nav .nav-tab,
.glass-nav .icon-btn,
.glass-nav .menu-toggle-btn { height: 56px !important; }

/* Company logotype on the left of the bar — same text mark as the footer. */
.nav-logo {
    display: flex !important;
    align-items: center;
    height: 56px;
    padding: 0 18px 0 20px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--body-text-color, #E0E0E0);
    transition: opacity 0.2s ease;
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo-name {
    font-family: 'Geologica', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    /* The glyphs are transparent (the gradient shows through them), so an
       inherited body text-shadow would darken the whole mark from behind. */
    text-shadow: none;
    /* Three sweeps clipped to the glyphs, each on its own tile width and its
       own speed, so they drift in and out of phase instead of marching:
         1. a bright white glint   (16em tile)
         2. a fainter white glint  (26em tile)
         3. the amber base, which shifts hue underneath (12em tile)
       Every tile is periodic — identical at 0% and 100% — so each layer
       repeats seamlessly, and all sizes are in em so they scale per
       breakpoint along with the font. */
    background:
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 248, 224, 0.30) 40%,
            rgba(255, 255, 255, 0.72) 46%,
            rgba(255, 246, 214, 0.28) 52%,
            rgba(255, 255, 255, 0) 62%,
            rgba(255, 255, 255, 0) 100%),
        linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 44%,
            rgba(255, 240, 196, 0.34) 55%,
            rgba(255, 255, 255, 0.42) 60%,
            rgba(255, 236, 180, 0.20) 66%,
            rgba(255, 255, 255, 0) 76%,
            rgba(255, 255, 255, 0) 100%),
        linear-gradient(100deg,
            #fec725 0%,
            #ff9d10 16%,
            #ffd15e 32%,
            #ffb830 48%,
            #ff8c00 66%,
            #fdb730 84%,
            #fec725 100%);
    background-size: 16em 100%, 26em 100%, 12em 100%;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: nav-logo-flow 48s linear infinite;
}

/* Over one 48s cycle the layers advance 7, 4 and 5 whole tiles — coprime
   counts, so a given arrangement of the three doesn't recur inside the
   cycle. The intermediate stops are deliberately uneven: each layer speeds
   up and slows down on its own schedule, which is what keeps the motion
   from reading as a metronome. Ending on exact tile multiples keeps the
   48s wrap invisible. */
@keyframes nav-logo-flow {
    0%   { background-position:     0    0,     0    0,    0    0; }
    17%  { background-position:  24.2em  0,  14.2em  0, 11.4em  0; }
    31%  { background-position:  35.7em  0,  32.4em  0, 18.4em  0; }
    44%  { background-position:  53.5em  0,  44.6em  0, 28.3em  0; }
    58%  { background-position:  65.7em  0,  63.6em  0, 35.7em  0; }
    73%  { background-position:  84.6em  0,  75.3em  0, 42.7em  0; }
    86%  { background-position:  96.7em  0,  91.6em  0, 52.2em  0; }
    100% { background-position: 112em    0, 104em    0, 60em    0; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-logo-name { animation: none; }
}

/* Keep the bar from overflowing on small screens */
@media (max-width: 768px) {
    .nav-logo { padding: 0 12px 0 14px; }
    .nav-logo-name { font-size: 22px; }
}
@media (max-width: 430px) {
    .nav-logo { padding: 0 8px 0 10px; }
    .nav-logo-name { font-size: 19px; }
    .glass-nav .icon-btn { width: 40px !important; }
    .glass-nav .nav-right-icons .icon-btn:last-child { width: 48px !important; padding-right: 12px !important; }
}

/* Spacer: drop the gradient / raised borders → invisible filler */
.nav-spacer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Tabs & icon buttons: flat, text-only; accent appears on hover/active */
.nav-tab,
.icon-btn,
.menu-toggle-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    transition: color 0.25s ease, text-shadow 0.25s ease !important;
}
/* Hover: no box/glass effect at all — only the link text is backlit */
.nav-tab:hover,
.icon-btn:hover,
.menu-toggle-btn:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: #fff !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.85) !important;
}

/* The animated green underline (main.css ::after) is gone entirely */
.nav-tab::after { display: none !important; }

/* Active tab: accent text only — no underline, no glass fill */
.nav-tab.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--primary-color, var(--crm-green)) !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.35) !important;
}

/* Logo already supplies the left gutter — keep tabs at normal padding */
.nav-tab:first-child { padding-left: 14px !important; }

/* Search field expanded inside the bar → flat input */
#nav-search-input.search-input {
    border: 1px solid var(--glass-flat-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* Light theme: frosted-white bar instead of navy */
/* The navbar keeps its dark transparent glass in EVERY theme —
   no light-mode grey strip, no dark link colors, no dark hover */

/* ============================================================
   TEXT FIELDS — see design-system.css. The flat-glass field that
   used to be defined here is now the canonical one, driven by the
   --field-* tokens, and covers the admin/calc inputs this chain
   used to exclude.
   ============================================================ */

/* ============================================================
   BUTTONS — see design-system.css. .btn / .action-btn / .toolbar-btn
   used to get a flat-glass variant here; they now take the canonical
   login-submit pill like every other button.
   ============================================================ */

.action-btn.liked {
    color: var(--primary-color, var(--crm-green)) !important;
    border-color: var(--primary-color, var(--crm-green)) !important;
    background: rgba(32, 210, 26, 0.10) !important;
}

/* ============================================================
   TOGGLE SWITCHES — green accent, flat thumb
   ============================================================ */
.toggle-switch input:checked + .toggle-track {
    background: var(--primary-color, var(--crm-green)) !important;
    border-color: var(--primary-color, var(--crm-green)) !important;
}
.toggle-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30) !important; }

/* ============================================================
   WINDOWS & CARDS — flat CRM glass: subtle border with a
   brighter top edge, no gradient (see CRM dashboard cards).
   The `body` prefix raises specificity so the fill wins over
   theme.js's runtime !important backgrounds.
   ============================================================ */

/* Popovers (dropdowns / drawers) — flat navy, kept readable */
.inquiry-dropdown,
.contact-drawer,
.basket-dropdown,
.dropdown-menu,
.mobile-menu-panel {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40) !important;
    -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
}
body .inquiry-dropdown,
body .contact-drawer,
body .basket-dropdown,
body .dropdown-menu,
body .mobile-menu-panel {
    background: rgba(18, 24, 40, 0.92) !important;
}
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--primary-color, var(--crm-green)) !important;
}

/* Dashboard / news / blog cards — flat fill slightly lighter than
   the page, brighter top border (matches CRM screenshot) */
.custom-news-block,
.custom-blog-block {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22) !important;
}
body .custom-news-block,
body .custom-blog-block {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Carousel controls → flat glass */
.carousel-control {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}
.carousel-control:hover {
    background: var(--crm-green) !important;
    color: #000 !important;
}

/* Light theme: windows use a soft solid white */
:root[data-theme="light"] .inquiry-dropdown,
:root[data-theme="light"] .contact-drawer,
:root[data-theme="light"] .basket-dropdown,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .mobile-menu-panel,
:root[data-theme="light"] body .custom-news-block,
:root[data-theme="light"] body .custom-blog-block {
    background: rgba(255, 255, 255, 0.85) !important;
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

/* ============================================================
   FOOTER — styled entirely by footer.css ("layer below" block)
   ============================================================ */

/* ============================================================
   PRODUCT CARDS / DETAIL LINKS
   ============================================================ */
.product-title-link { transition: color 0.15s ease; cursor: pointer; }
.product-title-link:hover { color: var(--crm-green) !important; }

/* Accent variant of the canonical pill — colour only */
.detail-btn,
.detail-btn:hover { color: var(--crm-green); }

/* --- Accent selection --- */
::selection { background: rgba(32, 210, 26, 0.30); }

/* Light theme overrides for basket dropdown elements */
:root[data-theme="light"] .basket-dropdown h2 {
    color: #1d1d1f !important;
}
:root[data-theme="light"] .basket-table th {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
:root[data-theme="light"] .basket-table td {
    border-bottom-color: rgba(0, 0, 0, 0.05) !important;
}
:root[data-theme="light"] .basket-table td.col-code {
    color: #1d1d1f !important;
}
:root[data-theme="light"] .basket-table td.col-desc {
    color: rgba(0, 0, 0, 0.6) !important;
}
:root[data-theme="light"] .basket-qty-controls button {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1d1d1f !important;
}
:root[data-theme="light"] .basket-qty-controls button:hover {
    background: rgba(0, 0, 0, 0.12) !important;
}
:root[data-theme="light"] .basket-item-quantity {
    color: #1d1d1f !important;
}
:root[data-theme="light"] .basket-total {
    color: #1d1d1f !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}
:root[data-theme="light"] .basket-empty {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   PICTURE CONTROLS — hover backlights ONLY the text, no box effects.
   This used to cover .card-button / .detail-btn / .action-btn /
   .close-btn / .compare-buy-btn as well, which is exactly what made
   those five hover differently from every other button on the site.
   They now take the canonical pill hover from design-system.css, and
   only the carousel arrows keep the frozen box.
   ============================================================ */
.carousel-control:hover {
    /* freeze the box at its glass base — no fill/border/glow/lift deltas */
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transform: none !important;
    color: #fff !important;
    text-shadow: 0 0 12px currentColor !important;
}
/* Borderless / picture controls keep their own (transparent) box.
   The footer's switches used to be listed here; they now take the canonical
   pill hover from design-system.css like every other button. */
.nav-tab:hover, .icon-btn:hover, .menu-toggle-btn:hover,
.pg-nav:hover {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
/* …and no lift on hover. The tile family is NOT listed here: an important
   author declaration outranks a CSS animation, so naming them cancelled
   both the hop and the resting lift the tile system asks for. */
.nav-tab:hover, .icon-btn:hover, .menu-toggle-btn:hover,
.pg-nav:hover {
    transform: none !important;
}

/* Press: subtle neutral border, no coloured glow */
.carousel-control:active {
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
}
/* Nav links: no backlight on press */
.nav-tab:active, .icon-btn:active, .menu-toggle-btn:active {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ============================================================
   LEVEL 1 — the page layer with the tiles and content windows.
   Their surface is driven by the cfgr glass tint + opacity via
   --ux-glass-bg (set by theme.js). The `html body` prefix keeps this
   as the single source of truth for these surfaces; #0e1a30 is the
   fallback shown before the theme engine runs (or if it fails), so
   the look is unchanged until the cfgr changes it.
   ============================================================ */
html body .custom-news-block,
html body .custom-blog-block,
html body .about-block,
html body .glass-container,
html body .product-card,
html body .checkout-table-wrap,
html body .eshop-sidebar-vertical {
    background-color: var(--ux-glass-bg, #0e1a30) !important;
}

/* ============================================================
   SEARCH — opens as a fixed dropdown BELOW the navbar so it no
   longer collapses the spacer or pushes the centered nav links.
   ============================================================ */
.glass-nav.searching .nav-spacer { display: flex !important; }   /* keep the filler; don't collapse */
.glass-nav .search-drawer:not(.open) { width: 0 !important; overflow: hidden; padding: 0; }
.glass-nav.searching .search-drawer.open {
    position: fixed !important;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100% - 32px));
    max-width: 620px !important;
    flex: none !important;
    height: auto !important;
    z-index: 1200;
    background: linear-gradient(160deg, rgba(20,28,46,0.96), rgba(14,20,34,0.97));
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.12);
    border-top-color: rgba(255,255,255,0.24);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 8px;
    display: block;
}
.glass-nav.searching .search-drawer.open .search-input {
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 10px !important;
}
.search-results { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.search-results:empty { display: none; margin: 0; }
.search-result-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px;
    text-decoration: none; color: var(--body-text-color, #E0E0E0); font-size: 13px;
}
.search-result-item:hover { background: rgba(255,255,255,0.08); }
.search-result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-code { color: var(--text-muted, rgba(255,255,255,0.55)); font-size: 11px; margin-left: auto; flex-shrink: 0; }
/* Macro · micro family — tells near-identical product titles apart now that a
   match can come from any catalogue field, not just the title. */
.search-result-meta {
    margin-left: auto;
    max-width: 42%;
    color: var(--text-muted, rgba(255,255,255,0.42));
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-meta + .search-result-code { margin-left: 10px; }
.search-empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.55)); text-align: center; }
.search-result-group-label {
    padding: 8px 10px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.search-result-group-label:first-child { padding-top: 4px; }

/* Dark theme placeholder was rgba(255,255,255,0.4) — 3.8:1 on the
   panel, under the 4.5:1 AA floor. 0.55 brings it to ~5.5:1. */
.glass-nav #nav-search-input.search-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
}

/* ============================================================
   SEARCH — LIGHT THEME
   The drawer above is hardcoded dark navy, but theme.js flips
   --body-text-color to #1D1D1F in light mode, so the query text and
   every result row rendered near-black on near-black. Flip the whole
   surface to match the theme rather than pinning light text onto a
   panel that no longer belongs there.

   The field rules are keyed on #nav-search-input deliberately. The
   flat-input rule further up scores (1,1,0) with !important and pulls
   its border from --glass-flat-border, a hardcoded white alpha that
   never flips with the theme — a class-only override loses to it.
   background is set as both shorthand and background-color longhand
   so a later longhand !important can't strip the fill.
   ============================================================ */
:root[data-theme="light"] .glass-nav.searching .search-drawer.open {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(243, 244, 247, 0.98));
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-top-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* The one field on the site that does not simply take the light-theme
   --field-* tokens: the navbar keeps its DARK glass in every theme, and a
   65%-white field over dark glass reads as muddy grey. So it goes fully
   opaque here. Everything else (radius, focus ring, transition) still
   comes from design-system.css.

   The !important chain this block used to carry is gone: it existed to
   beat redesign.css's own !important field rules, which no longer exist.
   The ID keeps it above the token defaults on its own. */
:root[data-theme="light"] #nav-search-input.search-input,
:root[data-theme="light"] #nav-search-input.search-input:focus {
    background: #ffffff;
    color: #1d1d1f;
    -webkit-text-fill-color: #1d1d1f;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root[data-theme="light"] #nav-search-input.search-input {
    border-color: rgba(0, 0, 0, 0.14);
}
:root[data-theme="light"] #nav-search-input.search-input:focus {
    border-color: var(--primary-color, #007AFF);
    box-shadow: var(--field-focus-ring);
}
/* Placeholder had no light override at all — white-on-white, invisible. */
:root[data-theme="light"] #nav-search-input.search-input::placeholder {
    color: rgba(0, 0, 0, 0.55);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.55);
    opacity: 1;
}

:root[data-theme="light"] .search-result-item { color: #1d1d1f; }
:root[data-theme="light"] .search-result-item:hover { background: rgba(0, 0, 0, 0.06); }
:root[data-theme="light"] .search-result-code,
:root[data-theme="light"] .search-result-meta,
:root[data-theme="light"] .search-empty,
:root[data-theme="light"] .search-result-group-label { color: rgba(0, 0, 0, 0.55); }

/* Below 768px the drawer stops being the centered fixed panel and becomes
   a full-width sheet styled by #search-drawer in main.css — an ID rule with
   its own hardcoded dark fill, so the light panel above never reaches it. */
@media (max-width: 768px) {
    :root[data-theme="light"] #search-drawer {
        background: rgba(255, 255, 255, 0.97);
        border-top-color: rgba(0, 0, 0, 0.06);
        border-bottom-color: rgba(0, 0, 0, 0.10);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    }
}

/* ============================================================
   PERFECTLY ROUND CLOSE BUTTONS — every variant, every page.
   They were drifting into ovals: a stray padding-bottom, a border
   added by a later rule, and flex containers squashing them.
   aspect-ratio + border-box + flex:0 0 auto keeps them circular
   regardless of context.
   ============================================================ */
.close-btn,
.eshop-modal-close,
.acc-close,
.product-modal-actions .btn-icon {
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 18px !important;
    text-align: center !important;
    overflow: hidden;
}

/* ============================================================
   FOOTER CONTROLS — the language and theme switches.

   This block used to hand-roll a 36px circle for them: its own fill,
   border, blur and a neutral `!important` hover, none of which matched
   the buttons they sit beside. Both are now .footer-ctl-btn, the
   icon-only variant of the canonical button in design-system.css, which
   loads after this file — so anything restated here would only fight it.
   Row layout is all that is left.
   ============================================================ */
.site-footer-right { display: flex; align-items: center; gap: 8px; }

/* --- Navbar account button with the signed-in user's name -------------
   .icon-btn is a fixed 44px square, so the button gets an auto width and
   a little padding once navbar.js reveals the name (.has-name). Guests
   keep the plain icon and the original square footprint. */
.account-btn.has-name {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px !important;
}
.account-btn .account-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* On narrow screens the name would crowd out the search/cart icons */
@media (max-width: 720px) {
    .account-btn .account-name { display: none; }
    .account-btn.has-name { width: 44px !important; padding: 0 !important; }
}