/* Portable EShop mini-cart override -- see html/mod_eshop_cart/default.php.
 *
 * Colour is inherited from the active YooTheme style, via UIkit component
 * classes on the markup (uk-section-default for the panel surface,
 * uk-button-primary for the checkout button, uk-alert-warning for the
 * notice) and currentColor for everything else.
 *
 * The panel surface was `uk-card uk-card-default` until a site-owner-facing
 * defect, live-tested on a real dark YooTheme style (2026-08-31):
 * `.uk-card-default` sets background AND text colour from the SAME
 * configured pair, and on that style both landed light -- background
 * #f2ebdd, text rgba(242,235,221,.82), contrast 1.00, i.e. invisible.
 * The `uk-background-default` utility replaced it and failed the same way:
 * a background utility sets background-color and publishes no
 * `--uk-inverse`, so text never follows the fill -- the moment that style's
 * Default background was set to white (2026-08-31) the panel measured
 * 1.19:1. cart-content.php's `#eshop-minicart-panel` now DELEGATEs to
 * `uk-section-default`, a full UIkit style component: it sets the fill AND
 * publishes `--uk-inverse`, so polarity travels with it (17.70:1 on the
 * dark style, 7.95:1 on the light one). It carries no radius of its own (unlike
 * `.uk-card`), so `--eshop-minicart-radius` below DERIVEs it from the
 * panel's own DOM ancestor via the CSS `inherit` keyword instead of a
 * literal -- see `.eshop-minicart__panel`'s own rule.
 *
 * NOT via UIkit's "global colour" custom properties: those are Less
 * variables, compiled away at build time. Only mechanical custom
 * properties (breakpoints, transforms, positioning) survive into the
 * compiled CSS, so a var() on a palette global would resolve to nothing
 * on every site.
 *
 * --eshop-minicart-soft/-border derive from currentColor rather than a fixed
 * grey: this panel is dropped into #eshop-cart wherever the host page places
 * the module -- inside uk-navbar-container, a uk-dropdown, or a
 * uk-offcanvas-bar on narrow viewports -- and each of those sets its OWN
 * polarity (light navbar, dark offcanvas, etc). A fixed tint would be wrong
 * in whichever of those the site doesn't preview; currentColor always
 * matches the polarity of whichever one it actually renders in.
 *
 * color-mix() is the only way in CSS to produce an alpha variant of
 * currentColor -- rgba() takes numeric channels only. Old browsers (below
 * Safari 16.2 / Chrome 111 / Firefox 113) need a fallback, and that fallback
 * MUST be gated behind @supports, not a plain "declare the old value, then
 * the new one" redeclaration. Custom-property values are parsed with the
 * grammar-agnostic <declaration-value> production: any well-formed token
 * stream is accepted at declaration time, including a function name the
 * browser has never heard of, so an unrecognised second declaration is NOT
 * dropped by the parser the way it would be for a standard property -- it
 * simply wins the cascade, becoming the property's value. On a browser
 * without color-mix() that value only turns out to be invalid once a var()
 * substitutes it into a real property, and by then the whole consuming
 * declaration goes invalid at computed-value time -- collapsing the border,
 * background, etc. entirely rather than degrading to the rgba() fallback.
 * (Verified empirically: swapping the second declaration for a bogus
 * function name and reading the computed style back showed the border
 * collapse to width 0 / style none, in every case, including with a var()
 * fallback argument present -- the fallback never fires because the custom
 * property IS defined, just invalidly.) The @supports feature query below
 * sidesteps this because it gates a whole rule -- either the block is
 * parsed and applied, or it is skipped outright; there is no cascade step
 * where a not-yet-validated value can win by declaration order.
 *
 * The three properties below remain as a per-site escape hatch. A site whose
 * style produces a poor result can pin any of them from its own
 * css/custom.css:
 *
 *     #eshop-cart { --eshop-minicart-border: #d8c8b4; }
 */
/* YooTheme positions both header variants relatively. Its blurred navbar
 * creates a stacking context, trapping #eshop-cart below the sticky checkout
 * summary when the header has no uk-sticky wrapper (production, 2026-10-21).
 * Raise only the header hosting this module, at UIkit's own sticky level:
 * below dropdowns/offcanvas/modals. :has() is intentional here: raising the
 * descendant cart cannot escape its ancestor's context, and moving the panel
 * outside #eshop-cart would break EShop's AJAX hooks and inherited styling.
 * Keep this template integration in the module's child-template stylesheet,
 * rather than adding global header rules to the EShop theme. */
.tm-header:has(#eshop-cart),
.tm-header-mobile:has(#eshop-cart) {
    z-index: 980;
}

#eshop-cart {
    --eshop-minicart-muted: currentColor;
    --eshop-minicart-soft: color-mix(in srgb, currentColor 6%, transparent);
    --eshop-minicart-border: color-mix(in srgb, currentColor 18%, transparent);
    /* Not a colour: the literal keyword `inherit`, substituted verbatim by
     * var() into `border-radius: inherit` on the panel below, so it takes
     * the actual computed corner radius of its own DOM parent (whatever
     * that happens to be on the host page) instead of a fixed number this
     * portable module has no business inventing. Previously this radius
     * came from `.uk-card`'s own compiled rule. Same per-site escape hatch
     * as the three colour tokens above -- e.g.
     * `#eshop-cart { --eshop-minicart-radius: 12px; }`. */
    --eshop-minicart-radius: inherit;
    position: relative;
    z-index: 30;
    color: inherit;
}

/* Old-browser fallback -- see the header comment above for why this must be
 * an @supports feature query rather than a redeclared custom property.
 * Neutral greys, polarity-agnostic against any of the three containers this
 * panel can render inside. */
@supports not (color: color-mix(in srgb, red, red)) {
    #eshop-cart {
        --eshop-minicart-soft: rgba(127, 127, 127, .06);
        --eshop-minicart-border: rgba(127, 127, 127, .28);
    }
}

#eshop-cart .eshop-minicart__trigger {
    align-items: center;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 8px;
    text-decoration: none;
}

#eshop-cart .eshop-minicart__trigger:focus-visible,
#eshop-cart .eshop-minicart__close:focus-visible,
#eshop-cart .eshop-minicart__quantity-button:focus-visible,
#eshop-cart .eshop-minicart__remove:focus-visible,
#eshop-cart .eshop-minicart__view-cart:focus-visible {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

#eshop-cart .eshop-minicart__trigger-icon {
    display: inline-flex;
    height: 22px;
    width: 22px;
}

#eshop-cart .eshop-minicart__trigger-icon svg {
    display: block;
    fill: currentColor;
    height: 100%;
    width: 100%;
}

#eshop-cart .eshop-minicart__count {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 600;
    height: 25px;
    justify-content: center;
    line-height: 1;
    min-width: 25px;
    padding: 0 6px;
}

#eshop-cart .eshop-minicart__panel {
    border: 1px solid var(--eshop-minicart-border);
    border-radius: var(--eshop-minicart-radius);
    box-sizing: border-box;
    max-height: min(740px, calc(100vh - 100px));
    overflow: auto;
    left: 0;
    position: absolute;
    right: auto;
    top: calc(100% + 16px);
    transform: translateX(var(--eshop-minicart-shift, 0px));
    width: min(540px, calc(100vw - 24px));
}

#eshop-cart .eshop-minicart__panel::before {
    background: inherit;
    border-left: 1px solid var(--eshop-minicart-border);
    border-top: 1px solid var(--eshop-minicart-border);
    content: "";
    height: 14px;
    position: absolute;
    left: 28px;
    top: -8px;
    transform: rotate(45deg);
    width: 14px;
}

#eshop-cart .eshop-minicart__header {
    align-items: center;
    border-bottom: 1px solid var(--eshop-minicart-border);
    display: flex;
    justify-content: space-between;
    padding: 23px 28px;
}

#eshop-cart .eshop-minicart__title {
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .16em;
    margin: 0;
    text-transform: uppercase;
}

#eshop-cart .eshop-minicart__title span:last-child { color: var(--eshop-minicart-muted); opacity: .7; }

#eshop-cart .eshop-minicart__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--eshop-minicart-muted);
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1;
    margin: -8px;
    min-height: 44px;
    min-width: 44px;
    opacity: .7;
    padding: 0;
}

#eshop-cart .eshop-minicart__notice {
    font-size: .84rem;
    line-height: 1.45;
    padding: 12px 28px;
}

#eshop-cart .eshop-minicart__items { padding: 0 28px; }

#eshop-cart .eshop-minicart__item {
    display: grid;
    gap: 16px;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 18px 0;
}

#eshop-cart .eshop-minicart__item + .eshop-minicart__item { border-top: 1px solid var(--eshop-minicart-border); }

#eshop-cart .eshop-minicart__image {
    align-self: center;
    background: var(--eshop-minicart-soft);
    display: block;
    height: 82px;
    overflow: hidden;
    width: 82px;
}

#eshop-cart .eshop-minicart__image img { height: 100%; object-fit: cover; width: 100%; }

#eshop-cart .eshop-minicart__item-main { min-width: 0; }

#eshop-cart .eshop-minicart__item-heading {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-width: 0;
    white-space: normal !important; /* Host nav CSS sets nowrap on the cart module. */
}

#eshop-cart .eshop-minicart__product-name {
    color: inherit;
    flex: 1 1 auto;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
    white-space: normal !important;
    word-break: normal;
}

#eshop-cart .eshop-minicart__product-name:hover,
#eshop-cart .eshop-minicart__view-cart:hover { text-decoration: underline; }

#eshop-cart .eshop-minicart__line-price { font-size: .98rem; font-weight: 500; white-space: nowrap; }

#eshop-cart .eshop-minicart__options {
    color: var(--eshop-minicart-muted);
    font-size: .8rem;
    line-height: 1.4;
    margin: 5px 0 0;
    opacity: .7;
}

#eshop-cart .eshop-minicart__options span:not(:last-child)::after { content: ", "; }

#eshop-cart .eshop-minicart__item-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

#eshop-cart .eshop-quantity.eshop-minicart__quantity {
    border: 1px solid var(--eshop-minicart-border) !important;
    border-bottom: 1px solid var(--eshop-minicart-border) !important;
    border-radius: 999px;
    box-sizing: border-box;
    display: grid;
    gap: 0 !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    height: 44px;
    margin: 0;
    overflow: hidden;
    width: 120px;
}

/* color: inherit on both rules below (site owner report, 2026-08-31,
   live-tested on a real dark YooTheme style): neither <button> nor <input>
   inherits `color` by default -- the UA stylesheet sets it to the
   `buttontext`/`fieldtext` system keyword, which resolves to black
   regardless of the page's own colour scheme. No rule anywhere in this
   stylesheet (or the theme's) ever overrode it for these two elements, so
   they rendered black-on-black on the dark style: black stepper glyphs and
   a black-on-transparent quantity number, both over the panel's own dark
   uk-section-default surface. `color: inherit` makes both follow the
   panel's real ambient ink colour instead, the same way every other text
   element in this panel already does. */
#eshop-cart .eshop-minicart__quantity-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: 1.2rem;
    justify-content: center;
    min-width: 0;
    padding: 0;
}

#eshop-cart .eshop-minicart__quantity-value {
    appearance: textfield;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    height: 100%;
    min-width: 0;
    padding: 0;
    text-align: center;
    width: 100% !important;
}

#eshop-cart .eshop-minicart__quantity-value::-webkit-inner-spin-button,
#eshop-cart .eshop-minicart__quantity-value::-webkit-outer-spin-button { appearance: none; margin: 0; }

#eshop-cart .eshop-minicart__remove,
#eshop-cart .eshop-minicart__view-cart {
    color: var(--eshop-minicart-muted);
    font-size: .82rem;
    opacity: .7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#eshop-cart .eshop-minicart__totals {
    background: var(--eshop-minicart-soft);
    border-top: 1px solid var(--eshop-minicart-border);
    margin: 0;
    padding: 17px 28px;
}

#eshop-cart .eshop-minicart__totals > div {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

#eshop-cart .eshop-minicart__totals > div + div { margin-top: 7px; }
#eshop-cart .eshop-minicart__totals dt { color: var(--eshop-minicart-muted); font-weight: 400; opacity: .7; }
#eshop-cart .eshop-minicart__totals dd { font-weight: 600; margin: 0; text-align: right; }
#eshop-cart .eshop-minicart__totals > div:last-child dd { font-size: 1.35rem; font-weight: 500; }

#eshop-cart .eshop-minicart__footer { padding: 20px 28px 22px; text-align: center; }

#eshop-cart .eshop-minicart__checkout {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    letter-spacing: .14em;
    min-height: 52px;
    width: 100%;
}

#eshop-cart .eshop-minicart__checkout:hover { filter: brightness(.92); }
#eshop-cart .eshop-minicart__view-cart {
    display: block;
    margin: 16px auto 0;
    width: fit-content;
}

#eshop-cart .eshop-minicart__empty { padding: 36px 28px; text-align: center; }
#eshop-cart .eshop-minicart__empty p { margin: 0 0 20px; }

@media (max-width: 639px) {
    #eshop-cart .eshop-minicart__panel {
        left: auto;
        max-height: calc(100vh - 72px);
        position: fixed;
        right: 12px;
        top: 60px;
    }

    #eshop-cart .eshop-minicart__header,
    #eshop-cart .eshop-minicart__footer { padding-left: 20px; padding-right: 20px; }
    #eshop-cart .eshop-minicart__items { padding: 0 20px; }
    #eshop-cart .eshop-minicart__totals { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    #eshop-cart .eshop-minicart__panel { scroll-behavior: auto; }
}