/* aieo-side-cart.css — SHELL (Phase-CSS split 2026-06-13).
   Trigger, panel frame, scrim, MAIN CART (line items, qty, free-shipping bar,
   gift/reward banners), responsive. Everything visible the instant the drawer
   opens. The reco rails / RV+Favorites cards / 'you may also like' carousel /
   quick-view styling lives in aieo-side-cart-contents.css, injected by
   aieo-side-cart.js on first openCart() (those nodes don't exist until the
   drawer hydrates). Keep the two files' selectors disjoint. */
/* =============================================================================
 * AIEO DMM Side Cart — Rey-theme-inspired styling.
 *
 * Two-column panel (left: "You might like" recommendations, right: main cart).
 * Scrim overlay, floating trigger, tabs, progress bar, items, carousel, footer.
 *
 * Namespace .aieo-sc-* so nothing collides with om-free-shipping's .om-sc-*.
 * ========================================================================== */

/* -------- Floating trigger ---------------------------------------------- */
/* `aieo-sc-root` is the JS hook + scrim/panel/trigger parent, but it does NOT
 * need to take any layout space itself. Previously this had `position: fixed;
 * inset: 0` to act as a viewport-sized overlay — but every interactive child
 * (.aieo-sc-trigger, .aieo-sc-scrim, .aieo-sc-panel) is independently
 * `position: fixed` already, so the root being fixed served no purpose.
 *
 * Worse, `position: fixed; inset: 0` on the root was being miscomputed when an
 * ancestor establishes a new containing block (transform, filter, contain,
 * etc., as introduced by some themes / mega-menu plugins) — the root ended up
 * sized to the ancestor's box, which on mobile inflated past the viewport.
 * That extra width then propagated to the floating trigger via `right: 20px`,
 * pushing it off-canvas and forcing the document to grow.
 *
 * `display: contents` removes the wrapper from the layout tree entirely
 * (children render as if their styles applied directly to the body) — no
 * box, no width contribution, no containing-block issues. JS still finds
 * `#aieo-sc-root` as a delegation target. Closed-panel layout removal is
 * handled separately by `[hidden]` on .aieo-sc-panel. */
.aieo-sc-root {
    display: contents;
}

/* -------- Floating shell (desktop = single round button; mobile = bar) -- */

/* Desktop: the shell only exists to host the trigger as a single child.
 * The trigger keeps its own `position: fixed` (below) so existing layouts
 * stay byte-identical. The burger + search children are hidden on desktop
 * — without this, the shell's `display: contents` lets them render in
 * body's natural flow (= bottom of the page, near the footer), which
 * shows up as a stray FiboSearch input below the copyright line. */
.aieo-sc-floating-shell { display: contents; }
.aieo-sc-bar-burger,
.aieo-sc-bar-search,
.aieo-sc-bar-chat       { display: none; }

/* -------- Desktop AI Chat launcher (symmetric to cart trigger) ---------
 * Same 56×56 circle, same shadow, same z-index as .aieo-sc-trigger.
 * Position mode selected by `data-position-mode` attribute on the
 * element (admin setting `side_cart_chat_desktop_position`):
 *   left   → bottom-left, mirror image of the cart on the bottom-right
 *   above  → stacked above the cart on the same right edge, gap = 20px
 *            (so the two circles + the gap occupy 132px of vertical
 *            space: 20 bottom + 56 cart + 20 gap + 56 chat).
 *
 * Hidden on mobile — chat lives in the bar there. */
.aieo-sc-chat-desktop {
    position: fixed;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 0;
    background: #0e0e0e;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease;
    z-index: 999996;
}
.aieo-sc-chat-desktop:hover { transform: translateY(-2px); background: #1a1a1a; }
.aieo-sc-chat-desktop[data-position-mode="left"]  { left: 20px;  bottom: 20px; right: auto; }
.aieo-sc-chat-desktop[data-position-mode="above"] { right: 20px; bottom: 96px; left: auto; }
/* Defensive — if at any point the search modal is left visible on
 * desktop (orphaned state from an open/close mid-deploy), force it
 * hidden so it can't paint the FiboSearch form into the page flow. */
@media (min-width: 721px) {
    .aieo-search-modal { display: none !important; }
}

/* -------- Hide the chat addon's native floating UI ----------------------
 *
 * When our chat slot is enabled we force-enable the addon's
 * `aieo_chat_floating_enabled` option so its enqueue + popup HTML
 * (#aieo-floating-chat-window) lands in the page. We then drive that
 * popup from our own bar / desktop launcher via clicks on
 * #aieo-floating-chat-trigger / #aieo-chat-close. The addon's own
 * trigger button + welcome bubble would visually conflict with our
 * launcher, so we hide them here.
 *
 * NOTE: this rule is a no-op on sites that don't have our chat slot
 * enabled — the addon's elements simply aren't in the DOM. */
#aieo-floating-chat-trigger,
#aieo-floating-welcome-bubble {
    display: none !important;
}

.aieo-sc-trigger {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 0;
    background: #0e0e0e;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease;
    /* Lower z-index than the scrim + panel so when the side cart
     * opens, the panel naturally covers the floating trigger. When
     * closed, scrim is opacity:0 / pointer-events:none and the panel
     * is translated off-screen, so the trigger is fully reachable. */
    z-index: 999996;
}
.aieo-sc-trigger:hover { transform: translateY(-2px); background: #1a1a1a; }
.aieo-sc-trigger-icon { display: flex; }
/* Count badge gets its OWN side-cart token (was a hardcoded #c0a37b gold) so
 * it is intentional + configurable and never confused with the generic button
 * colour. Declared on .aieo-sc-root so it can't be reached by the global
 * :root button vars. Default stays the side-cart accent gold (matches the
 * active-tab underline); change --aieo-sc-badge-bg to recolour. */
/* Side-cart accent tokens. Default to the THEME accent (brand colour) instead
 * of the old hardcoded gold, and overridable per-cart from the admin (the
 * display class emits --aieo-sc-accent / --aieo-sc-reco-title-color inline when
 * the operator sets them). One place drives the tab underlines, the count
 * badge, the free-shipping bar and the gift-qty label; the reco title has its
 * own token (defaults to the accent) so it can be set separately. */
.aieo-sc-root {
    --aieo-sc-accent: var(--wp--preset--color--accent, #c0a37b);
    --aieo-sc-reco-title-color: var(--aieo-sc-accent);
    --aieo-sc-badge-bg: var(--aieo-sc-accent);
    --aieo-sc-badge-fg: #ffffff;
}
.aieo-sc-trigger-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    background: var(--aieo-sc-badge-bg, #c0a37b);
    color: var(--aieo-sc-badge-fg, #ffffff);
    border-radius: 10px;
    /* Centre the digits in the EXACT middle of the circle. `line-height: 20px`
     * looked symmetric in metrics but most fonts render numerals on a baseline
     * below the cap-height, so the digit drifted down. Flex on its own line-box
     * (line-height: 1) aligns the glyph to the optical centre both axes. */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    /* Force tabular + lining figures so the badge width stays
     * constant whether the count is 1, 2, or 11 — no horizontal
     * shift, and digits sit on the cap-line (mathematically centred). */
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.aieo-sc-trigger-count:empty,
.aieo-sc-trigger-count[data-count="0"] { display: none; }

/* When the side cart is OPEN, hide the floating bubble trigger so it can't
 * overlap the open drawer. The bubble keeps the desktop fixed-circle styling
 * on mobile, which would otherwise sit on top of the panel (the screenshot
 * the operator reported). Scoped to bubble mode — in bar mode the panel
 * (z 999998) already covers the bar (z 999996). */
.aieo-sc-root.is-open .aieo-sc-shell--bubble .aieo-sc-trigger {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* -------- Fullscreen search modal (mobile FiboSearch host) -------------- */

.aieo-search-modal[hidden] { display: none; }
.aieo-search-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;             /* above the navigator (100000) + bar (999996) */
    display: flex;
    flex-direction: column;
}
.aieo-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.45);
}
.aieo-search-modal__panel {
    position: relative;
    margin: env(safe-area-inset-top, 0px) auto auto;
    width: min(640px, 100%);
    background: var(--wp--preset--color--bg, #ffffff);
    padding: 56px 20px 24px;       /* top space leaves room for the × button */
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.aieo-search-modal__close {
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--wp--preset--color--fg, #1f2937);
}
.aieo-search-modal__slot {
    /* The FiboSearch wrapper docks here on open. The plugin manages
     * its own input width / dropdown positioning relative to itself,
     * so we just give it a clean column to occupy. */
    width: 100%;
}
/* Make the FiboSearch input look at home in the modal — desktop-tier
 * styling (centered placeholder, normal weight) carries over. */
.aieo-search-modal__slot .dgwt-wcas-search-wrapp,
.aieo-search-modal__slot .dgwt-wcas-search-form,
.aieo-search-modal__slot .dgwt-wcas-sf-wrapp {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* (Chat modal removed — we drive the chat addon's own floating popup
 * #aieo-floating-chat-window now, see the dispatch JS in side-cart.) */

/* -------- Side cart panel containment (overflow safety) ----------------- */

/* The panel is `position: fixed` but during its slide-in/out animation
 * the browser still lays it out at full width and walks `transform`
 * keyframes — on Safari/iOS that can briefly contribute to
 * `document.scrollWidth` during the 280ms transition window, manifesting
 * as a horizontal-scroll flicker just after a close click. `contain: paint`
 * tells the engine the panel's effects don't escape its own box, removing
 * the contribution; `overflow: hidden` on the panel + descending media
 * blocks the broken-image leak path the merchant flagged (a missing
 * product thumbnail in YOU MAY ALSO LIKE renders at intrinsic dimensions
 * and pushes the panel rightward). */
.aieo-sc-panel {
    contain: paint;
    overflow-x: hidden;       /* horizontal-only — vertical scroll inside the
                                 panel still works via inner overflow regions */
}
.aieo-sc-panel img,
.aieo-sc-panel video,
.aieo-sc-panel picture {
    max-width: 100%;
    height: auto;
}

/* -------- Mobile: shell becomes a full-width sticky bar ----------------- */
@media (max-width: 720px) {
    /* The whole shell becomes the bar, fixed to the viewport bottom.
     * Burger on the left, search in the middle, trigger (flattened) on
     * the right. Same DOM, different layout — no JS reparenting, no
     * race with the desktop fixed-circle paint.
     *
     * Presentation is AIEO-controlled + theme-independent via the
     * --aieo-mbar-* custom properties emitted on :root by
     * render_on_footer(). Each var carries an inline fallback to the
     * theme token it used historically (accent bg / --bg icon /
     * --fg badge), so when "custom colours" is off the look is
     * unchanged. Height + bottom-reserve read --aieo-mbar-height.
     *
     * The bar layout is EXCLUDED when the shell carries
     * `aieo-sc-shell--bubble` (cart-only + the operator opted into the
     * floating-bubble presentation): the shell stays display:contents
     * and the trigger keeps its desktop fixed-circle styling on mobile
     * too — i.e. it renders exactly like the desktop bubble. */
    .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) {
        display: flex !important;
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        z-index: 999996;
        align-items: center;
        justify-content: space-between;
        height: var(--aieo-mbar-height, 58px);
        min-height: var(--aieo-mbar-height, 58px);
        max-height: var(--aieo-mbar-height, 58px);
        padding: 8px 16px;
        background: var(--aieo-mbar-bg, var(--wp--preset--color--accent, #F46767));
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10);
        box-sizing: border-box;
        color: var(--aieo-mbar-icon, var(--wp--preset--color--bg, #ffffff));
        /* Glass effect — when enabled, --aieo-mbar-backdrop is blur(Npx) and
         * --aieo-mbar-bg is a semi-transparent color-mix() so the page shows
         * through; default 'none' is a no-op (solid bar). */
        -webkit-backdrop-filter: var(--aieo-mbar-backdrop, none);
        backdrop-filter: var(--aieo-mbar-backdrop, none);
    }
    /* A single enabled item (non-bubble) — centre it. `space-between`
     * collapses a lone flex child to the start (left), which is the
     * "cart pinned to the left" bug; centring reads as intentional. */
    .aieo-sc-floating-shell.aieo-sc-shell--single { justify-content: center !important; }
    /* All slot buttons (burger / search / chat / future) share the same
     * shape — no chrome, 44×44 minimum touch target, themed icon. */
    .aieo-sc-bar-burger,
    .aieo-sc-bar-search,
    .aieo-sc-bar-chat,
    .aieo-sc-bar-cookie {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        background: transparent !important;
        border: 0 !important;
        margin: 0 !important;
        width: auto !important;
        padding: 8px !important;
        min-width: 44px; min-height: 44px;
        max-width: 44px;
        box-sizing: border-box;
        color: var(--aieo-mbar-icon, var(--wp--preset--color--bg, #ffffff));
        cursor: pointer;
    }
    /* The icon inside any bar item can never exceed the 44px touch box —
       guards against a classic theme sizing the SVG/button content larger. */
    .aieo-sc-bar-burger svg,
    .aieo-sc-bar-search svg,
    .aieo-sc-bar-chat svg,
    .aieo-sc-bar-cookie svg { width: 24px; height: 24px; max-width: 100%; flex: 0 0 auto; }
    .aieo-sc-bar-burger:active,
    .aieo-sc-bar-search:active,
    .aieo-sc-bar-chat:active,
    .aieo-sc-bar-cookie:active { transform: scale(0.96); }
    /* The desktop chat-launcher floating circle is hidden on mobile —
     * chat lives in the bar there, so two surfaces would conflict. */
    .aieo-sc-chat-desktop { display: none !important; }
    /* Trigger flattens — drops the desktop "fixed black circle" so it
     * sits as the bar's right slot. Same SVG, same count badge, same
     * click handler — only the box presentation changes. Scoped to
     * NON-bubble shells so the bubble keeps the base fixed-circle rule. */
    .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) .aieo-sc-trigger {
        /* relative (not static) so the absolute count badge anchors to the
         * trigger, not the fixed bar — keeps the badge on a centred lone cart
         * icon instead of floating to the bar's far right. */
        position: relative !important;
        width: auto !important; height: auto !important;
        min-width: 44px; min-height: 44px;
        right: auto !important; bottom: auto !important;
        background: transparent !important;
        color: var(--aieo-mbar-icon, var(--wp--preset--color--bg, #ffffff)) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 8px !important;
        z-index: auto;
    }
    .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) .aieo-sc-trigger:hover { transform: none; background: transparent !important; }
    /* Count badge re-anchored against the smaller flat icon; circle +
     * number colours are AIEO-controlled (can differ from desktop). */
    .aieo-sc-floating-shell:not(.aieo-sc-shell--bubble) .aieo-sc-trigger-count {
        top: 2px; right: 2px;
        background: var(--aieo-mbar-badge-bg, var(--wp--preset--color--fg, #1f2937));
        color: var(--aieo-mbar-badge-fg, var(--wp--preset--color--bg, #ffffff));
    }
    /* Reserve room at the bottom of every page so content scrolling
     * to the end isn't permanently obscured by the bar — matches the
     * bar height (--aieo-mbar-height, default 58px). render_on_footer
     * sets the var to 0px in bubble mode (no bar → no reserve). Kept
     * static (no env(safe-area) in the math) so iOS Safari can't
     * change body height during URL-bar transitions, which made the
     * bar appear to grow on scroll. */
    body { padding-bottom: var(--aieo-mbar-height, 58px); }
}

/* -------- Scrim --------------------------------------------------------- */
.aieo-sc-scrim {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 0.24s ease;
    z-index: 999997;
}
.aieo-sc-root.is-open .aieo-sc-scrim { opacity: 1; pointer-events: auto; }

/* -------- Panel --------------------------------------------------------- */
/* `[hidden]` means the panel is taken out of layout when closed. Some themes
 * override the global [hidden] selector, so we restate it explicitly with high
 * specificity. JS coordinates the transition (sets hidden→present before adding
 * .is-open, then re-applies hidden after the close transitionend). */
.aieo-sc-panel[hidden] { display: none !important; }
.aieo-sc-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 720px; max-width: 96vw;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    /* Transparent panel — each column owns its own background. The
     * left "you might like" column applies an Apple-glass blur, so the
     * panel itself can't be opaque (would block the blur from seeing
     * the page below). The right main column stays solid white. */
    background: transparent;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    z-index: 999998;
    overflow: hidden;
}
/* Defensive box-sizing — themes often set it in unpredictable ways and a
 * single element with extra padding can force a horizontal scrollbar on the
 * whole panel. Border-box everywhere under the root, no exceptions. */
.aieo-sc-root,
.aieo-sc-root *,
.aieo-sc-root *::before,
.aieo-sc-root *::after { box-sizing: border-box; }
.aieo-sc-root.is-open .aieo-sc-panel { transform: translateX(0); }

/* Animate the column-template change when the reco-col is toggled —
 * modern browsers (Chrome 111+, Safari 17.4+, Firefox 116+) interpolate
 * grid-template-columns; older browsers snap immediately, which is
 * still a clean state change. */
.aieo-sc-panel {
    transition:
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rey-style "collapse the recommendations sidebar" toggle. Pinned
 * to the seam between the two columns; slides to the panel's left
 * edge when the sidebar is collapsed. State stored in sessionStorage
 * (per-session) under `aieo_sc_reco_collapsed`. */
.aieo-sc-reco-toggle {
    position: absolute;
    top: 50%;
    left: 178px; /* 190px column - 12px (half of 24px button) */
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    color: #5a5a5a;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s ease,
                border-color 0.15s ease,
                background 0.15s ease;
}
.aieo-sc-reco-toggle:hover { color: #1a1a1a; border-color: #1a1a1a; }
.aieo-sc-reco-toggle-icon {
    width: 7px;
    height: 11px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state: shrink the reco column to 0, slide the toggle to
 * the panel's left edge, mirror the chevron to point right (open). */
.aieo-sc-root.is-reco-collapsed .aieo-sc-panel {
    grid-template-columns: 0 minmax(0, 1fr);
}
.aieo-sc-root.is-reco-collapsed .aieo-sc-reco-col {
    overflow: hidden;
    padding: 0;
    border-right: 0;
    box-shadow: none;
}
.aieo-sc-root.is-reco-collapsed .aieo-sc-reco-toggle {
    /* Sit fully inside the panel's left edge so neither the icon
     * nor the box-shadow gets clipped by the panel boundary. */
    left: 6px;
}
/* Sidebar open  (aria-expanded="true")  → chevron `>` (click to close,
 *                                          pushes the sidebar away).
 * Sidebar closed (aria-expanded="false") → chevron `<` (click to open,
 *                                          pulls the sidebar back). */
.aieo-sc-reco-toggle[aria-expanded="true"] .aieo-sc-reco-toggle-icon {
    transform: scaleX(1);
}
.aieo-sc-reco-toggle[aria-expanded="false"] .aieo-sc-reco-toggle-icon {
    transform: scaleX(-1);
}

/* Hide the toggle on mobile — the reco column is already hidden
 * there (panel goes single-column), so toggling it is a no-op. */
@media (max-width: 720px) {
    .aieo-sc-reco-toggle { display: none; }
}

/* No recommendations to show (set by the JS when the reco DTO list is empty or
 * there's no seed product) — collapse the sidebar column to 0 AND hide the
 * collapse toggle, so the cart fills the panel instead of an empty
 * "You might like.." pane. Mirrors is-reco-collapsed, minus the toggle. */
.aieo-sc-root.is-reco-empty .aieo-sc-panel {
    grid-template-columns: 0 minmax(0, 1fr);
}
.aieo-sc-root.is-reco-empty .aieo-sc-reco-col {
    overflow: hidden;
    padding: 0;
    border-right: 0;
    box-shadow: none;
}
.aieo-sc-root.is-reco-empty .aieo-sc-reco-toggle {
    display: none;
}

/* -------- Left column: recommendations ---------------------------------- */
/* Apple-style "liquid glass" panel — translucent white with a heavy
 * backdrop blur so the page beneath shows through softly. Subtle inner
 * highlight on the right edge replaces the old hard `1px solid #eee`. */
.aieo-sc-reco-col {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
    padding: 22px 14px;
    overflow-y: auto;
}
/* "You might like.." — bumped to a properly legible 18px / 700, brand
 * gold and uppercase. Reads as a peer-level navigation label without
 * being so small the eye misses it. */
.aieo-sc-reco-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--aieo-sc-reco-title-color, #c0a37b);
    margin-bottom: 18px;
    line-height: 1.4;
}
.aieo-sc-reco-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.aieo-sc-reco-item {
    text-align: left;
    font-family: inherit;
}

/* -------- Right column: main cart --------------------------------------- */
.aieo-sc-main-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: #fff;
    height: 100%;
}

/* Tab bodies wrapper — owns the desktop scroll area so the shared
 * footer below stays pinned. `min-height: 0` is critical so the flex
 * child can shrink below its intrinsic content height (otherwise the
 * scroll never engages). */
.aieo-sc-tab-bodies {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header with tabs + close */
.aieo-sc-header {
    display: flex;
    align-items: center;
    padding: 20px 26px 0;
    border-bottom: 1px solid #eee;
}
.aieo-sc-tabs { flex: 1; display: flex; gap: 14px; flex-wrap: nowrap; }
.aieo-sc-tab {
    background: transparent;
    border: 0;
    padding: 0 0 14px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.6px;
    color: #c9c9c9;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 3px;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
    white-space: nowrap;
}
.aieo-sc-tab:hover {
    color: #1a1a1a;
    border-bottom-color: #d8d8d8;
}
.aieo-sc-tab.is-active {
    color: #1a1a1a;
    border-bottom-color: var(--aieo-sc-accent, #c0a37b);
}
.aieo-sc-tab.is-active:hover {
    border-bottom-color: var(--aieo-sc-accent, #c0a37b); /* keep gold on the active tab */
}
.aieo-sc-tab-count {
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.75;
}
.aieo-sc-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: #6a6a6a;
    cursor: pointer;
    padding: 0 0 14px 20px;
}
.aieo-sc-close:hover { color: #1a1a1a; }

/* ─────────────────────────────────────────────────────────────────
 * Favourites sub-tabs (Products / Articles / Brands / Categories /
 * Needs). Rendered client-side in aieo-side-cart.js (renderFavShell)
 * inside the `data-aieo-sc-body="favorites"` panel.
 *
 * Styled to mirror the OUTER tabs (.aieo-sc-tab) so the visual
 * language stays consistent across both tab levels:
 *   default      → muted gray text, transparent underline
 *   hover        → near-black text, light-gray underline
 *   active       → near-black text, gold underline (#c0a37b)
 *
 * Sub-tabs use a slightly larger font + tighter letter-spacing than
 * the outer tabs (the outer ones are ALL-CAPS at 9px / 0.6px, which
 * reads as a primary nav; the inner row is regular case at 11px /
 * 0.3px so it doesn't compete visually).
 * ───────────────────────────────────────────────────────────────── */
.aieo-sc-fav-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 4px 0 18px;
    padding: 0 0 1px;
    border-bottom: 1px solid #eee;
}
.aieo-sc-fav-subtab {
    background: transparent;
    border: 0;
    padding: 0 0 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #c9c9c9;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* overlap the parent's bottom border so the
                            active underline replaces it cleanly */
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
    white-space: nowrap;
}
.aieo-sc-fav-subtab:hover {
    color: #1a1a1a;
    border-bottom-color: #d8d8d8;
}
.aieo-sc-fav-subtab.is-active,
.aieo-sc-fav-subtab[aria-selected="true"] {
    color: #1a1a1a;
    border-bottom-color: var(--aieo-sc-accent, #c0a37b);
}
.aieo-sc-fav-subtab.is-active:hover,
.aieo-sc-fav-subtab[aria-selected="true"]:hover {
    border-bottom-color: var(--aieo-sc-accent, #c0a37b); /* keep gold on the active sub-tab */
}
.aieo-sc-fav-subtab:focus-visible {
    /* Focus indicator = the gold UNDERLINE, not a box. The old
     * `outline:2px solid #c0a37b; outline-offset:2px; border-radius:1px`
     * painted a rounded gold BOX around the button — and because Chrome's
     * :focus-visible heuristic also fires after a MOUSE CLICK on a <button>
     * that swaps content, that box appeared around the just-clicked active
     * sub-tab, fighting the intended underline. Show the underline on focus
     * instead (keyboard nav stays clearly indicated, no box). */
    outline: none;
    border-bottom-color: var(--aieo-sc-accent, #c0a37b);
}
.aieo-sc-fav-subtab__badge {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.75;
    padding: 0 4px;
    line-height: 1.4;
    border-radius: 8px;
}

/* Body — one body is shown at a time inside .aieo-sc-tab-bodies. The
 * visible one fills the wrapper (flex: 1) and scrolls internally on
 * desktop. Mobile collapses the wrapper into the page scroll (see
 * the responsive block at the bottom of this file).
 *
 * Big bottom padding (40px) gives the carousel — which sits at the
 * end of the bag body — enough breathing room above the persistent
 * footer's visual edge. Without it the last slide sits flush against
 * the footer's top border and the ADD TO BAG link can read as cut.
 *
 * Display block (not flex-column) so the scrollbar's max-scroll
 * calculation reliably matches the natural sum of children heights —
 * a flex-column body sometimes under-reports its scroll height when
 * the last child has min-content sizing. */
.aieo-sc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* No bottom padding — body scrolls naturally past the carousel
     * since `display: block` reports the correct scroll height
     * (no flex-column quirks). */
    padding: 20px 26px 0;
    display: block;
}
.aieo-sc-body[hidden] { display: none; }

/* Free-shipping bar */
.aieo-sc-fs { margin: 4px 0 20px; }
.aieo-sc-fs-msg {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
}
.aieo-sc-fs-bar {
    height: 6px;
    background: #e9e9e9;
    border-radius: 3px;
    overflow: hidden;
}
.aieo-sc-fs-bar > span {
    display: block;
    height: 100%;
    background: var(--aieo-sc-accent, #c0a37b);
    transition: width 0.24s ease;
    width: 0;
}

/* -------- Cart items (WC-canonical shell, neutral interactive parts) -------
 * Outer wrapper classes (`.woocommerce-mini-cart`, `.mini_cart_item`) match
 * what WC emits so themes that target those at the CONTAINER level still
 * see them. For the interactive stepper we use OUR OWN classes
 * (`.aieo-qty-wrap`, `.aieo-qty-btn`, `.aieo-qty-input`) because themes
 * style `.quantity` as big pill-borders around static cart text and that
 * fights our compact stepper every time. */

/* Neutralize any theme-level styling that targets our side-cart items
 * descended from `.mini_cart_item` — reset borders/padding/display so our
 * grid layout below is predictable. Scoped to .aieo-sc-root so we only
 * touch our own side-cart DOM, never the theme's own mini-cart widget. */
.aieo-sc-root .aieo-mini-cart,
.aieo-sc-root .aieo-mini-cart .mini_cart_item,
.aieo-sc-root .aieo-mini-cart .mini_cart_item * {
    box-sizing: border-box;
}
.aieo-sc-root .aieo-mini-cart .mini_cart_item .quantity,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-qty-wrap,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-qty-btn,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-qty-input,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-unit-price,
.aieo-sc-root .aieo-mini-cart .mini_cart_item .aieo-line-total {
    /* Prevent theme's Botiga/Rey `.mini_cart_item .quantity { border: 2px
     * solid, border-radius: 24px, padding: 12px 18px }` from styling our
     * layout. */
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.aieo-mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
}
.aieo-mini-cart .mini_cart_item {
    display: grid;
    /* thumb | qty stepper | unit price | line total
     * Unit price column is `auto` so it sits flush against the stepper;
     * the spacer between unit and total comes from the third column being
     * `minmax(0,1fr)` — actually the grid is built right-to-left:
     *   col1 thumb (60px)
     *   col2 qty   (auto)
     *   col3 unit  (auto)
     *   col4 total (auto, anchored to the right via 1fr filler row above) */
    grid-template-columns: 60px auto auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}
.aieo-mini-cart .mini_cart_item.is-gift {
    background: #fafaf3;
    margin: 0 -8px;
    padding: 12px 8px;
    border-radius: 6px;
}

/* Thumb/title link: display:contents flattens the <a> so its children
 * participate directly in the parent grid. */
.aieo-mini-cart-thumb-title {
    display: contents;
    color: inherit;
    text-decoration: none;
}
.aieo-mini-cart-img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 60px;
}
.aieo-mini-cart-img img {
    display: block;
    width: 60px;
    height: auto;
    border-radius: 4px;
}
.aieo-mini-cart-name {
    grid-column: 2 / 6;
    grid-row: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    word-break: break-word;
    padding-right: 28px; /* leave space for the × button in the top-right */
}

/* Rey-style stepper: thin pill border around `[− N +]`, FLAT inside —
 * no button hover backgrounds, no input border, the glyphs in a quiet
 * grey. The pill itself is the only visual containment. */
.aieo-qty-wrap {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 16px !important;
    padding: 0 4px !important;
    background: #ffffff !important;
    width: fit-content;
    align-self: center;
    height: 26px !important;
    box-sizing: border-box !important;
}
.aieo-sc-root .aieo-qty-btn,
.aieo-sc-root button.aieo-qty-btn {
    background: transparent !important;
    border: 0 !important;
    width: 22px;
    height: 24px;
    border-radius: 0 !important;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    color: #9a9a9a;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    /* Theme rules apply backdrop-filter / box-shadow / text-shadow to
     * generic `button:hover` selectors — kill all of them so the qty
     * stepper stays flat. */
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.aieo-sc-root .aieo-qty-btn:hover,
.aieo-sc-root .aieo-qty-btn:focus,
.aieo-sc-root .aieo-qty-btn:active,
.aieo-sc-root button.aieo-qty-btn:hover,
.aieo-sc-root button.aieo-qty-btn:focus,
.aieo-sc-root button.aieo-qty-btn:active {
    background: transparent !important;
    color: #1a1a1a;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    outline: 0 !important;
}
.aieo-sc-root .aieo-qty-input,
.aieo-sc-root input.aieo-qty-input {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    text-align: center;
    color: #1a1a1a !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    -moz-appearance: textfield;
    appearance: textfield;
    box-shadow: none !important;
    padding: 0 !important;
    /* Theme ships a global `input[type="text"] { -webkit-backdrop-filter:
     * blur(...) }` that renders as a soft halo around the qty number.
     * Force it off scoped to the side cart. */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}
/* :hover / :focus / :active / :focus-visible all need the same kill
 * list — themes target each interaction state independently with
 * backdrop-filter, box-shadow, border-color, etc. The dgwt-wcas search
 * stylesheet in particular re-applies the blur on hover. */
.aieo-sc-root .aieo-qty-input:hover,
.aieo-sc-root .aieo-qty-input:focus,
.aieo-sc-root .aieo-qty-input:focus-visible,
.aieo-sc-root .aieo-qty-input:active,
.aieo-sc-root input.aieo-qty-input:hover,
.aieo-sc-root input.aieo-qty-input:focus,
.aieo-sc-root input.aieo-qty-input:focus-visible,
.aieo-sc-root input.aieo-qty-input:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #1a1a1a !important;
    filter: none !important;
}

/* The wrapper itself can also catch a hover glow from theme rules
 * targeting the parent of inputs. Lock down on hover too. */
.aieo-sc-root .aieo-qty-wrap:hover,
.aieo-sc-root .aieo-qty-wrap:focus-within {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.aieo-qty-input::-webkit-outer-spin-button,
.aieo-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Unit price sits flush against the qty stepper. Sale items keep WC's
 * standard `<del>regular</del> <ins>sale</ins>` markup — the regular
 * fades out and strikes through, the sale weights up beside it. */
.aieo-unit-price {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    font-size: 12px;
    color: #1a1a1a;
    line-height: 1.3;
    white-space: nowrap;
}
.aieo-unit-price del {
    color: #b8b8b8;
    text-decoration: line-through;
    margin-right: 6px;
    font-weight: 400;
}
.aieo-unit-price ins {
    text-decoration: none;
    font-weight: 600;
    color: #1a1a1a;
}

.aieo-line-total {
    grid-column: 5;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 13px;
    white-space: nowrap;
}
.aieo-gift-qty {
    grid-column: 2 / 4;
    grid-row: 2;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--aieo-sc-accent, #c0a37b);
    text-transform: uppercase;
}

/* Remove button — top-right corner of the item row. The anchor no longer
 * carries WC's `remove_from_cart_button` class (dropped to suppress WC core's
 * onRemoveFromCart delegate from firing a parallel wc-ajax:remove_from_cart);
 * we style off `.aieo-remove` directly. */
.aieo-sc-root .aieo-mini-cart .aieo-remove {
    position: absolute;
    top: 12px;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    color: #6a6a6a;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    background: #fff;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.aieo-sc-root .aieo-mini-cart .aieo-remove:hover { color: #1a1a1a; }
.aieo-sc-root .aieo-mini-cart .aieo-remove svg,
.aieo-sc-root .aieo-mini-cart .aieo-remove img { display: none; }

.woocommerce-mini-cart__empty-message {
    padding: 48px 0;
    text-align: center;
    color: #6a6a6a;
    font-size: 14px;
    margin: 0;
}

/* Continue shopping */
.aieo-sc-continue {
    display: inline-block;
    margin: 14px 0 24px;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* -------- Responsive ---------------------------------------------------- */
@media (max-width: 720px) {
    .aieo-sc-panel {
        grid-template-columns: 1fr;
        width: 100vw;
        max-width: 100vw;
        /* End the drawer ABOVE the floating shell turned bottom bar so
         * the bar (and its right-slot cart trigger) stay tappable while
         * the drawer is open. Tapping the cart button while open then
         * closes the drawer (the trigger now toggles, in side-cart.js).
         * 58px = bar height (Material 3 Bottom-Nav spec). */
        bottom: 58px !important;
    }
    /* Same offset for the scrim so the bar remains clickable through
     * the dimmed overlay on mobile. */
    .aieo-sc-scrim {
        bottom: 58px !important;
    }
    .aieo-sc-reco-col {
        display: none; /* hide on mobile — scarce width */
    }
    .aieo-sc-header { padding: 16px 18px 0; }
    .aieo-sc-body { padding: 16px 18px 0; }

    /* Mobile layout: KEEP the desktop "products scroll, footer pinned"
     * arrangement so SUBTOTAL + ΑΠΟΘΗΚΕΥΣΗ/ΤΑΜΕΙΟ stay visible at the bottom
     * of the drawer at all times (only the items list scrolls). The panel is
     * fixed (top:0 → bottom:58px above the bar), so its height is bounded and
     * the flex column resolves: the active body scrolls internally while the
     * footer stays put. (Previously this flattened to one big scroll, which
     * pushed CART/CHECKOUT below the fold on mobile — a usability bug.) */
    .aieo-sc-main-col {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .aieo-sc-tab-bodies {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    .aieo-sc-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    .aieo-sc-footer {
        position: static;
        flex: 0 0 auto;
    }
    /* Header stays at the top of the scroll, sticky so the tab buttons
     * remain reachable while scrolling through a long list. */
    .aieo-sc-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 6;
    }
}

/* ==========================================================================
   Free-gift offer banners — port of OM Brand Gifts side-cart CSS
   (om-free-shipping/assets/css/side-cart.css). Same class names so that
   the existing visual stays identical and either plugin's CSS styles
   them when both are loaded during the transition.
   ========================================================================== */
.aieo-sc-brand-gifts:empty { display: none; }

.om-bg-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.om-bg-wrap.om-bg-qualified { background: #d4edda; }

.om-bg-image img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.om-bg-info { flex: 1; min-width: 0; }

.om-bg-msg {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #333;
}

.om-bg-bar-wrap { height: 6px; border-radius: 3px; overflow: hidden; }
.om-bg-bar-bg   { height: 100%; background: #e0e0e0; border-radius: 3px; }
.om-bg-bar-fg   {
    height: 100%;
    background: #e8a317;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.om-bg-qualified .om-bg-bar-fg { background: #28a745; }

/* Picker dropdown rendered inside a gift cart-item when the offer
 * has more than one gift product. Matches om-discount-manager's
 * .om-bg-gift-choice so existing CSS in legacy plugins also styles it. */
.aieo-sc-gift-choice { margin: 6px 0 2px; }
.aieo-sc-gift-select {
    width: 100%;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.aieo-sc-gift-select:disabled,
.aieo-sc-gift-variation-select:disabled { opacity: 0.5; cursor: wait; }
.aieo-sc-gift-variation { margin-top: 6px; }
.aieo-sc-gift-variation-select {
    width: 100%;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.om-bg-gift-choice-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

/* ==========================================================================
   (A1) Reward-card list — sits below the cart items in the side cart.
   ========================================================================== */
.aieo-sc-rewards:empty { display: none; }
/* Same horizontal padding as the cart-items list (.aieo-mini-cart sits
 * inside .aieo-sc-content which has 0 lateral padding; the items use
 * their own internal padding). Mirror that so the rewards block aligns
 * flush with the visible edge of cart rows above it. */
.aieo-bg-rewards {
    margin: 12px 0 16px;
    padding: 12px 16px;
    border-top: 1px dashed #d1d5db;
    border-bottom: 1px dashed #d1d5db;
    background: #fafafa;
}
.aieo-bg-rewards-head {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
}
.aieo-bg-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aieo-bg-reward-card {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.aieo-bg-reward-card:hover  { border-color: #9ca3af; }
.aieo-bg-reward-card[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.7;
}
.aieo-bg-reward-card.is-picked {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.aieo-bg-reward-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aieo-bg-reward-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aieo-bg-reward-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aieo-bg-reward-name {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.aieo-bg-reward-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    width: fit-content;
}
.aieo-bg-reward-card.is-locked    .aieo-bg-reward-pill { background: #f3f4f6; color: #6b7280; }
.aieo-bg-reward-card.is-available .aieo-bg-reward-pill { background: #fef3c7; color: #92400e; }
.aieo-bg-reward-card.is-claimed   .aieo-bg-reward-pill { background: #dcfce7; color: #166534; }
.aieo-bg-reward-variation { margin-top: 4px; }

/* -------- Dropdown-mode card -------------------------------------------
 * Used when an offer's `presentation_mode` is `dropdown`. Same image-left
 * + content-right rhythm as `.aieo-bg-reward-card`, but with a <select>
 * underneath the title so the customer can swap to a different gift.
 * Auto-picks the first eligible gift on initial render so there's
 * always a concrete product (with thumbnail + name) to anchor the UI. */
.aieo-bg-dropdown-card {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}
.aieo-bg-dropdown-thumb {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aieo-bg-dropdown-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aieo-bg-dropdown-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aieo-bg-dropdown-name {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Compact select sized for the card body — slightly smaller than the
 * page default to match the surrounding chrome. */
.aieo-bg-dropdown-body .aieo-sc-gift-select {
    width: 100%;
    height: 28px;
    padding: 2px 6px;
    font-size: 11px;
    color: #4b5563;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
}
.aieo-bg-rewards--dropdown .om-bg-gift-variation { margin-top: 6px; }
