/**
 * Desktop minicart side drawer.
 *
 * Every rule is gated on `html.etele-minicart-drawer` (added by the JS only
 * when the module is enabled) and on the desktop media query, so turning the
 * module off restores the theme's original hover dropdown untouched, and
 * mobile never sees any of this.
 *
 * Layering: the backdrop sits at 10000 and the panel at 10001, matching the
 * band already used by Etele_MobileLayeredNavigation's drawer. That clears the
 * sticky category menu (1990), nav-sections (1102) and the Magento modal layer
 * (900), while staying under the promo modal override (10050).
 */

@media (min-width: 768px) {

    /*
     * `.page-header` carries `z-index: 26`, which makes it a stacking context.
     * The drawer lives inside it, so the drawer's own 10001 is confined to
     * that context and can never rise above a backdrop parented to <body>.
     * While the drawer is open the header is promoted above the backdrop, and
     * the backdrop is raised above the rest of the page; both return to their
     * normal layers once the close slide/fade has finished (the `-closing` class
     * bridges that gap so the header is not dimmed mid-fade), so nothing outside
     * the open and closing states is restacked.
     */
    html.etele-minicart-drawer body.etele-minicart-drawer-open .page-header,
    html.etele-minicart-drawer body.etele-minicart-drawer-closing .page-header {
        z-index: 10001 !important;
    }

    html.etele-minicart-drawer .etele-minicart-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.34);
        opacity: 0;
        visibility: hidden;
        transition: opacity 150ms linear, visibility 0s linear 150ms;
    }

    html.etele-minicart-drawer .etele-minicart-drawer-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 150ms linear, visibility 0s linear 0s;
    }

    /*
     * The Zendesk chat launcher sits bottom-right, right where the drawer's
     * checkout button is. While the drawer is open it drops below the backdrop
     * (10000) so it is dimmed with the rest of the page and never overlaps the
     * panel. It returns to its own layer on close. Covers both the deferred
     * click placeholder (999998) and, once loaded, the real widget's iframes,
     * whose z-index is inline and so needs `!important` to override.
     */
    html.etele-minicart-drawer body.etele-minicart-drawer-open .etele-zendesk-chat[data-zendesk-deferred="true"],
    html.etele-minicart-drawer body.etele-minicart-drawer-open iframe#launcher,
    html.etele-minicart-drawer body.etele-minicart-drawer-open iframe#webWidget {
        z-index: 9999 !important;
    }

    /* The jQuery UI dialog wrapper must not constrain or position the panel. */
    html.etele-minicart-drawer body .minicart-wrapper .ui-dialog,
    html.etele-minicart-drawer body .minicart-wrapper .mage-dropdown-dialog {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    /*
     * The widget hides the wrapper with an inline `display: none` on close.
     * That removes the panel's box in the same frame, so the slide-out
     * transition below never gets to run and the drawer just vanishes. The
     * wrapper is static and empty here (the panel is fixed), so keeping it
     * displayed costs no layout; the panel hides itself via transform and
     * visibility instead. `!important` is needed to beat the inline style.
     */
    html.etele-minicart-drawer body .minicart-wrapper .ui-dialog.mage-dropdown-dialog {
        display: block !important;
    }

    /*
     * The panel itself. It is always in the DOM and always laid out as the
     * drawer; the slide is done with transform so the closed state cannot be
     * hit-tested or focused.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart {
        /*
         * `!important` is required here, not preferred: the theme ships
         * `.minicart-wrapper .block-minicart { position: absolute!important }`
         * in web/css/style.css:263, and the same block hard-codes the
         * dropdown's left/top/width geometry. These overrides are scoped to
         * the module's own html class, so the theme rule still governs
         * whenever the drawer is switched off.
         */
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 10001;
        display: flex !important;
        flex-direction: column;
        width: 463px !important;
        /*
         * styles-m.css:10891 sets `min-width: 100%` on this element. Under
         * `position: fixed` that resolves against the viewport, which stretches
         * the drawer to the full page width and defeats `width` entirely.
         */
        min-width: 0 !important;
        max-width: 100vw !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(100%) !important;
        visibility: hidden;
        will-change: transform;
        transition: transform 300ms ease-in-out, visibility 0s linear 300ms;
        overflow: visible;
    }

    /* The theme draws the dropdown's arrow with pseudo-elements. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart::before,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart::after {
        display: none !important;
    }

    html.etele-minicart-drawer body.etele-minicart-drawer-open .minicart-wrapper .block-minicart {
        transform: translateX(0) !important;
        visibility: visible;
        transition: transform 300ms ease-in-out, visibility 0s linear 0s;
    }

    /* Scroll lock. The scrollbar width is fed back as a custom property so the
       page does not jump when the bar is removed. */
    body.etele-minicart-drawer-open {
        overflow: hidden;
        padding-right: var(--etele-minicart-scrollbar, 0px);
    }

    /* The drawer is fixed to the viewport edge, so it needs the same offset. */
    html.etele-minicart-drawer body.etele-minicart-drawer-open .minicart-wrapper .block-minicart {
        right: var(--etele-minicart-scrollbar, 0px) !important;
    }

    /* ---- internal layout: header and footer pinned, items scroll ---- */

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart > #minicart-content-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    /*
     * The title row owns the close control, so the two sit on one baseline
     * instead of the button floating over the text. It is also the drawer's
     * only separator above the list: the theme's own rules draw a box around
     * the item list (see below), and those are removed.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .block-title {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        /*
         * `!important` and the margin reset are both required: the theme ships
         * `.block-minicart .block-title { padding: 10px 0 5px !important;
         * margin-left: 10px; margin-right: 10px }`, which otherwise indents
         * the row by 10px and collapses the padding this layout depends on.
         */
        margin: 0 !important;
        padding: 18px 16px 18px 24px !important;
        border-bottom: 1px solid #e6e6e6;
        text-align: left;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .block-title .etele-minicart-heading {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 23px;
        font-weight: 600;
        line-height: 1.2;
        /* The theme uppercases `.block-title` text; the drawer heading is a
           sentence, not a label. */
        text-transform: none;
        color: #333;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .block-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /*
     * Opened by an add to cart: the drawer is already on screen while the cart
     * section carrying the new item is still loading. The stale contents are
     * dimmed and inert under a spinner until it arrives.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart.etele-minicart-drawer-loading > #minicart-content-wrapper {
        position: relative;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart.etele-minicart-drawer-loading .block-content {
        opacity: 0.45;
        pointer-events: none;
        transition: opacity 150ms linear;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart.etele-minicart-drawer-loading > #minicart-content-wrapper::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border: 3px solid #dcdcdc;
        border-top-color: #282828;
        border-radius: 50%;
        animation: etele-minicart-drawer-spin 700ms linear infinite;
    }

    @keyframes etele-minicart-drawer-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* The item list is the only scroll region. The theme's 300px cap is
       deliberately lifted here: in a full-height drawer the list should take
       whatever space the pinned header and footer leave. */
    html.etele-minicart-drawer body .minicart-wrapper .minicart-items-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: auto;
        margin: 0;
        /*
         * `.block-minicart .minicart-items-wrapper { padding: 0!important }`
         * in the theme wins on specificity order without this, and the item
         * rows (and their separators) then run edge to edge instead of being
         * inset like the subtotal above the footer.
         */
        padding: 0 24px !important;
        border: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /*
     * The theme boxes the item list: `ol#mini-cart` carries a 1px border on
     * all four sides plus `margin: -5px 10px 10px`, and that negative top
     * margin pulls the box up under the heading so its top edge crosses the
     * title text. In the drawer the list is not a card — the title's own
     * bottom border already separates it, and products are told apart by the
     * same hairline the subtotal uses.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #mini-cart.minicart-items {
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* No side or bottom borders on the rows; only separators between them. */
    html.etele-minicart-drawer body .minicart-wrapper .minicart-items .item.product.product-item {
        margin: 0;
        padding: 20px 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    html.etele-minicart-drawer body .minicart-wrapper .minicart-items .item.product.product-item + .item.product.product-item {
        border-top: 1px solid #e6e6e6;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtitle {
        flex: 0 0 auto;
        padding: 16px 24px 0;
    }

    /* Everything after the list stays pinned to the bottom of the drawer:
       the subtotal, the shipping progress (extraInfo) and the actions. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-widgets,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions {
        flex: 0 0 auto;
    }

    /* `margin: 0`: the theme's `margin-top: 15px` would open a seam of drawer
       background between the Total row and this block in the grey band. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions {
        margin: 0;
        padding: 16px 24px 40px;
    }

    /*
     * Footer layout. The shipping progress (extraInfo) sits on the plain
     * drawer background; the Total row and the checkout button share one
     * grey band (`#dcdcdc`, the colour the old 5px section dividers had), so
     * the footer reads as a progress row above a checkout panel instead of
     * three rows split by heavy rules.
     *
     * The band is painted on `.subtotal` and `.actions` separately, not on a
     * wrapper, because either can be absent (the subtotal is not rendered for
     * an empty cart) and the theme template has no element around both. They
     * are adjacent flex items with no margin between them, so the two
     * backgrounds meet without a seam. The band's vertical breathing room is
     * the subtotal's top padding and the actions' bottom padding.
     *
     * The theme ships `.block-minicart .subtotal { margin: 0 10px 20px }`,
     * which would inset the band by 10px and leave a 20px gap of drawer
     * background between it and the button; both blocks are reset to the
     * drawer's own 24px gutter with no margin.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart {
        margin: 0;
        padding: 16px 24px;
        border: 0;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .block-content > .actions {
        background: #EFEFEF;
    }

    /* The Total row is the top of the band: it owns the band's top spacing,
       and the actions block supplies the bottom spacing. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal {
        padding-top: 32px;
        padding-bottom: 0;
    }

    /*
     * The footer's three rows — the progress bar, the Total row and the
     * checkout button — all align to the drawer's own 24px gutter, so their
     * first and last visible pixels sit on one pair of vertical lines.
     *
     * That gutter is stated here directly rather than measured from
     * `.etele-shipping-progress__secondary` (which happens to span the same
     * 1044–1416 box): the hint box is conditional — it renders only for the
     * `standard_below_marker` message — so nothing in the footer may depend
     * on its presence.
     *
     * `.actions` ships `width: 94px` and `text-align: right` from the theme,
     * which shrink-wraps the block; the button then takes a theme width of
     * its own and lands 10px inside the gutter on both sides.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions {
        width: 100%;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions .primary {
        width: 100%;
        margin: 0;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions .primary #top-cart-btn-checkout {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
    }

    /*
     * The Total row is a flex container with a third child, PayU's credit
     * widget, which is empty here but still takes part in the layout and
     * pushes the price in from the right edge. `justify-content` alone cannot
     * fix that, so the label and amount are pinned to the two ends and the
     * widget is taken out of the flow of this row.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal {
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .label {
        flex: 0 0 auto;
        margin: 0;
        text-align: left;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .amount {
        flex: 0 0 auto;
        /* `margin-left: auto` rather than relying on `space-between`: the row
           has a third child (the PayU widget below), so the free space would
           otherwise be split between two gaps and leave the price mid-row. */
        margin: 0 0 0 auto;
        padding: 0;
        text-align: right;
    }

    /* Full-width row of its own below the total, not a flex sibling of it. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .payu-minicart-credit-widget {
        flex: 0 0 100%;
        order: 1;
    }

    /*
     * Item footer row: stepper, remove, then price on the right.
     *
     * The renderer puts these in two sibling blocks — `.product-item-pricing`
     * (the price, then `.details-qty`) and `.product.actions` (the remove
     * link) — stacked as three lines. They are flattened into one row here
     * rather than by editing the template: the markup is Codazon's item
     * renderer, and `display: contents` lets the price and the stepper become
     * items of the same flex row without moving a single node.
     *
     * `.product.actions` also inherits the footer's `padding: 0 24px 24px`
     * and `margin-top: -28px` (it matches `.actions` in the block-level
     * selector), which is what pushed the remove icon out to the right and
     * pulled it up over the row. Both are reset.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-details {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* The name keeps its own full-width line above the row. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-details > .product-item-name {
        flex: 0 0 100%;
    }

    /* Dissolve the two wrappers so their children join one row. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-pricing,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product.actions {
        display: contents;
    }

    /* Order within the row: stepper, remove, then price pushed to the end. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty {
        order: 1;
        flex: 0 0 auto;
        margin: 0;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product.actions .secondary {
        order: 2;
        flex: 0 0 auto;
        /* Sits just off the stepper instead of at the far edge of the row. */
        margin: 0 0 0 14px;
    }

    /*
     * The Edit-item wrapper, gated on `is_visible_in_site_visibility`, so for
     * most items it renders as an empty div. As a flex item that empty block
     * still claimed a full-width line (`flex-basis: auto` resolving against
     * `width: auto`) and pushed the price onto a line of its own, so it is
     * taken out of the row and given back only when it has a link to show.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product.actions .primary {
        order: 3;
        /* `width: 0` rather than `flex-basis: 0`: the block's own `width: auto`
           is what resolved to the full line width. It shrink-wraps around the
           Edit link when the theme shows one, and collapses otherwise. */
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: max-content;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-pricing .price-container {
        order: 4;
        /* `flex: 0 1 auto` so a long price shrinks instead of wrapping onto a
           line of its own; `min-width: 0` lets it actually shrink. */
        flex: 0 1 auto;
        min-width: 0;
        /* Owns the row's free space, so the price ends flush right. */
        margin-left: auto;
        text-align: right;
    }

    /*
     * Black, not the brand orange: in the drawer this figure is a line-item
     * subtotal being read down a column, not a promotional price. The colour
     * is set on the inner `.price` too — that is the element the theme paints.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-pricing .price-container .price,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-pricing .price-container .price-wrapper {
        color: #282828;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-pricing .price-container .price {
        font-size: 18px;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Undo the footer-actions padding/offset inherited by this block. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product.actions {
        padding: 0;
        margin: 0;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product.actions .action.delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * Quantity stepper on each item row.
     *
     * The base look comes from Codazon's generated theme-layout stylesheet
     * (`pub/media/codazon/themelayout/main/<layout>/main-styles.css`), which
     * is build output and must not be edited; everything here overrides it
     * from the drawer's own sheet instead. What that file sets, and why each
     * bit has to be undone:
     *
     *   .cdz-qty-box            position: relative; padding-inline-end: 18px;
     *                           width: max-content; margin-top: -7px
     *   .cdz-qty-box .m-btn     position: absolute; height: 50%; width: 19px
     *                           — the two buttons are stacked in an 18px
     *                             reserved strip on the trailing edge, so the
     *                             control is a spinner, not a stepper row
     *   .m-btn:after            font: normal 9px/1 CodazonFont; content: "\e9b4"
     *                           — the +/- are icon-font glyphs
     *
     * `CodazonFont` ships a single weight, so `font-weight` cannot thicken
     * those glyphs (the browser would only synthesise a fake bold, which is
     * unreliable and blurs at 9px). The glyphs are switched off and the two
     * signs are drawn as plain boxes instead: one bar for the minus, two
     * crossed bars for the plus. That makes length and thickness exact and
     * independent of the icon font.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box {
        position: relative;
        display: inline-flex;
        align-items: center;
        /* The trailing 18px strip held the stacked spinner buttons. */
        padding-inline-end: 0;
        /* Wider than the theme's `max-content`, and shorter. */
        width: 86px;
        height: 28px;
        margin: 0;
        border: 1px solid #dcdcdc;
        border-radius: 3px;
        overflow: hidden;
    }

    /* Out of the absolute spinner stack and into a row: minus, field, plus. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box .m-btn {
        position: static;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 100%;
        inset-block: auto;
        inset-inline: auto;
        border: 0;
        background: transparent;
        color: #4f4f4f;
        cursor: pointer;
        user-select: none;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box .m-btn:hover {
        background: #f3f3f3;
        color: #282828;
    }

    /* Replace the icon-font glyph with drawn bars. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box .m-btn::after {
        content: '';
        display: block;
        /* Shorter than the 9px glyph, and a hair thicker than its stroke. */
        width: 8px;
        height: 2px;
        border: 0;
        border-radius: 1px;
        background: currentColor;
        font: inherit;
    }

    /* The plus adds the vertical bar, so the two signs share one width. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box .m-btn.m-plus {
        position: relative;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box .m-btn.m-plus::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 8px;
        margin: -4px 0 0 -1px;
        border-radius: 1px;
        background: currentColor;
    }

    /* The field takes the space between the two buttons. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box > input[type] {
        flex: 1 1 auto;
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        height: 100%;
        margin: 0 !important;
        padding: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent;
        color: #282828;
        font-size: 16px;
        line-height: 1;
        text-align: center;
        -moz-appearance: textfield;
    }

    /* Native number spinners would reintroduce a second set of controls. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box > input[type]::-webkit-outer-spin-button,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty .cdz-qty-box > input[type]::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
        appearance: none;
    }

    /*
     * The "Cantitate" label is redundant next to a stepper whose meaning is
     * obvious, and it cost the row a third of its width. Hidden rather than
     * removed from the template: the markup is Codazon's item renderer, the
     * `for`/`id` pair is what ties it to the field, and it is what a screen
     * reader announces for the input — so it stays in the accessibility tree.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .details-qty > label.label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /*
     * Type scale: every size in the drawer is 15% larger than the stock one.
     *
     * Applied as explicit sizes rather than a root `font-size` on the panel,
     * because nothing in here is sized in relative units — the drawer, the
     * Codazon theme and Etele_ShippingRules all declare `px` — so an `em`
     * base would scale nothing. The sizes the drawer itself declares are
     * raised where they are written; this block covers the ones that come
     * from the other two sheets.
     *
     * Values are the measured computed size x 1.15, rounded to the nearest
     * half pixel: 13 -> 15, 12 -> 13.8, 8 -> 9.2, 1 -> 1.15 (the decimal
     * separator is deliberately hairline in the theme, so it keeps its
     * proportion rather than being rounded up to something visible).
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-name,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .minicart-items .product-item-name a {
        font-size: 15px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .label,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .label > span {
        font-size: 24px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .price-container .price {
        font-size: 24px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions .primary #top-cart-btn-checkout,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .actions .primary #top-cart-btn-checkout a {
        font-size: 21px;
    }

    /* Price decimals ride on the main price; the theme sets them absolutely. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .price-decimals-value {
        font-size: 9.2px;
    }

    /* The Total price is 24px (18px x 1.33), so its decimals keep that ratio. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtotal .price-decimals-value {
        font-size: 12.3px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .price-decimals-separator {
        font-size: 1.15px;
    }

    /*
     * Free-shipping progress. These belong to Etele_ShippingRules' own sheet,
     * which is shared with the cart page and checkout — scaling them there
     * would change those surfaces too, so the override is scoped to the
     * drawer's minicart instance.
     *
     * While the bar is still filling, the sizes step up by 2px (16 -> 18) or
     * 1px (13.8 -> 14.8, 15 -> 16) depending on where they started; the
     * reached-state message is its own, larger size.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart {
        font-size: 18px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__message,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__amount {
        font-size: 18px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__goal {
        font-size: 14.8px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__secondary {
        font-size: 16px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__done {
        font-size: 23px;
    }

    /* The reached message itself is smaller than the panel it sits in; its
       weight is set explicitly to 600 (the shared weight from Etele_ShippingRules). */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__done-text {
        font-size: 19px;
        font-weight: 600;
    }

    /*
     * Trucks (in-progress and reached) are 20% larger than the shared 30x24
     * size. The track's right margin is the room the truck needs to overhang
     * the end of the fill at 100%, so it grows with it: 36 - 4.8 offset.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__icon--truck {
        width: 36px;
        height: 28.8px;
        margin-left: -4.8px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__icon--done {
        width: 36px;
        height: 28.8px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart .etele-shipping-progress__track {
        margin-right: 31.2px;
    }

    /*
     * Eligible state: the progress component swaps its bar for the green
     * "free shipping reached" panel and drops its own padding. Keep the
     * drawer's gutter so the panel does not touch the drawer's edges or the
     * grey band below it when the cart crosses the threshold.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .etele-shipping-progress--minicart.etele-shipping-progress--eligible {
        padding: 16px 24px;
    }

    /*
     * Close control, pinned to the drawer's own top-right corner. The theme
     * hides this button outright (it relied on hover-out to dismiss the
     * dropdown), so the drawer has to bring it back.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close {
        display: block !important;
        /* In the flex title row now, so no absolute positioning. */
        position: relative;
        flex: 0 0 auto;
        top: auto;
        right: auto;
        z-index: 2;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent !important;
        color: #333;
        line-height: 1;
        cursor: pointer;
    }

    /*
     * The theme paints every focused button inside `.minicart-wrapper` with a
     * filled green tile (`style.css`: `.minicart-wrapper button:focus`), and
     * the drawer focuses this button as soon as it opens. Keep the resting
     * look on focus and show the ring instead.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close:focus {
        background: transparent !important;
        color: #333 !important;
        box-shadow: none;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close:focus-visible {
        outline: 2px solid #cc4a00;
        outline-offset: 2px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close:hover {
        background: rgba(0, 0, 0, 0.06) !important;
    }

    /*
     * The template's button contains a literal "Close" label. Hide the text
     * and draw an X instead, declared here rather than inherited: the theme
     * paints a filled orange tile on some close controls, which reads as a
     * different component stacked on top of the drawer.
     */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close::before,
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        margin: -1px 0 0 -12px;
        background: #333;
        border-radius: 1px;
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close::before {
        transform: rotate(45deg);
    }

    html.etele-minicart-drawer body .minicart-wrapper .block-minicart #btn-minicart-close::after {
        transform: rotate(-45deg);
    }

    /* The empty-cart state has no scrolling list; keep it from stretching. */
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart .subtitle.empty {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        text-align: center;
    }

    /*
     * The old hover behaviour dimmed `.page-main` through a class added by the
     * template's mousemove handler. The backdrop covers the whole viewport
     * now, so that dimming would double up.
     */
    html.etele-minicart-drawer .page-main-with-cart-hover {
        opacity: 1 !important;
        filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.etele-minicart-drawer body .minicart-wrapper .block-minicart,
    html.etele-minicart-drawer .etele-minicart-drawer-backdrop {
        transition-duration: 0s !important;
    }
}

/*
 * Modals opened from inside the drawer (the "remove this item?" confirm that
 * `Magento_Checkout/js/sidebar` raises on the delete action, and any alert it
 * shows on failure).
 *
 * Magento appends these to `body > .modals-wrapper`, so the modal is a
 * sibling of the drawer backdrop, not a descendant of the panel it was opened
 * from. At the stock z-indexes (overlay 899/901, modal 900/902) that sibling
 * loses to the backdrop at 10000 and the panel at 10001: the modal does get
 * `_show` and full opacity, but it paints underneath the backdrop, so the only
 * visible symptom is the backdrop appearing to darken (two overlays stacked)
 * and every click landing on the backdrop instead of the buttons. With the
 * drawer closed the same modal is fine, which is what makes it look like the
 * modal never opened.
 *
 * Raising the whole modal layer above the drawer while the drawer is open
 * keeps the confirm usable and leaves the stock layering untouched everywhere
 * else: the rules are gated on `body.etele-minicart-drawer-open`, so they
 * apply only for the span between opening and closing the drawer.
 *
 * Deliberately not gated on the desktop media query, unlike the rest of this
 * file: `etele-minicart-drawer-open` is only ever set on desktop, and leaving
 * the rules outside the query means a viewport that crosses the breakpoint
 * mid-modal cannot strand the confirm under the backdrop.
 */
body.etele-minicart-drawer-open .modals-overlay {
    z-index: 10010;
}

body.etele-minicart-drawer-open .modal-popup,
body.etele-minicart-drawer-open .modal-slide {
    z-index: 10011;
}