/* IllumiWeb Floating Cart — refined UI
   Design intent: quiet by default, confident on interaction. Soft elevation,
   spring-like easing, a single accent driving color. Respects reduced motion. */
:root {
    --iwc-fc-color: #2271b1;
    --iwc-fc-radius: 14px;
    --iwc-fc-ease: cubic-bezier(.22,.61,.36,1);
    --iwc-fc-ink: #1d2327;
    --iwc-fc-muted: #6b7280;
    --iwc-fc-line: #ececf0;
}
.iwc-fc-locked { overflow: hidden; }

/* ── Floating button ─────────────────────────────────────────────────────────
   Styled to match the IllumiWeb cookie "manage" pill so the two floating
   controls read as siblings: same 20px radius, 8x14 padding scale, 12px text,
   soft 0 2 12 shadow, 20px bottom offset. The cart keeps its accent as the icon
   + count color while sitting on the same light pill body. */
.iwc-fc-btn {
    position: fixed; bottom: 20px; z-index: 99990;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 20px; cursor: pointer;
    background: #fff; color: #1f2937;
    box-shadow: 0 2px 12px rgba(0,0,0,.14);
    font-size: 12px; font-weight: 500; line-height: 1;
    transition: transform .18s var(--iwc-fc-ease), box-shadow .18s var(--iwc-fc-ease);
    -webkit-tap-highlight-color: transparent;
}
.iwc-fc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,.18); background: var(--iwc-fc-color); border-color: var(--iwc-fc-color); color: #fff; }
.iwc-fc-btn:hover .iwc-fc-btn__icon { color: #fff; }
.iwc-fc-btn:hover .iwc-fc-btn__count { background: #fff; color: var(--iwc-fc-color); }
.iwc-fc-btn:active { transform: translateY(0) scale(.98); }
.iwc-fc-btn:focus-visible { outline: 2px solid var(--iwc-fc-color); outline-offset: 2px; }
.iwc-fc-btn--bottom-left { left: 20px; }
.iwc-fc-btn--bottom-right { right: 20px; }
.iwc-fc-btn--hidden { opacity: 0; pointer-events: none; transform: scale(.6); }
.iwc-fc-btn__icon { display: inline-flex !important; color: var(--iwc-fc-color); }
.iwc-fc-btn__icon svg { width: 18px; height: 18px; display: block; stroke: currentColor; fill: none; }
.iwc-fc-btn__text { white-space: nowrap; }
.iwc-fc-btn__count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--iwc-fc-color); color: #fff;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
    transition: transform .2s var(--iwc-fc-ease);
}
.iwc-fc-btn__count.is-zero { display: none; }

/* Add-to-cart pulse */
@keyframes iwc-fc-pulse {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-3px) scale(1.08); }
    60% { transform: translateY(0) scale(.97); }
    100% { transform: translateY(0) scale(1); }
}
.iwc-fc-pulse { animation: iwc-fc-pulse .5s var(--iwc-fc-ease); }

/* ── Overlay + panel ─────────────────────────────────────────────────────── */
.iwc-fc-overlay {
    position: fixed; inset: 0; z-index: 99991;
    background: rgba(17,24,39,.12); backdrop-filter: saturate(110%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--iwc-fc-ease), visibility .25s;
}
.iwc-fc-root.is-open .iwc-fc-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
@media (max-width: 768px) {
    .iwc-fc-overlay {
        background: var(--iwc-fc-color); /* fallback: solid accent */
        background: color-mix(in srgb, var(--iwc-fc-color) 90%, transparent);
        backdrop-filter: none;
    }
}
/* Panel — desktop/wide-tablet: a compact card anchored to the bottom that hugs
   its content (no full-height white space), rising from the corner near the
   button. Mobile/small-tablet: full screen (handled in the media query below).
   Show/hide is driven ENTIRELY by the .is-open class on the root — no reliance
   on the hidden attribute — so a closed panel can never intercept clicks. */
.iwc-fc-panel {
    position: fixed; z-index: 99992;
    bottom: 20px;
    width: 380px; max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);   /* cap; long carts scroll inside */
    background: #fff;
    display: flex; flex-direction: column;
    border-radius: var(--iwc-fc-radius);
    box-shadow: 0 12px 48px rgba(17,24,39,.22);
    transition: transform .3s var(--iwc-fc-ease), opacity .3s var(--iwc-fc-ease), visibility .3s;
    will-change: transform, opacity;
    opacity: 0; visibility: hidden; pointer-events: none;
}
/* Neutralize the hidden attribute so it doesn't fight the class-based control. */
.iwc-fc-panel[hidden], .iwc-fc-overlay[hidden] { display: flex; }
.iwc-fc-root.is-open .iwc-fc-panel { opacity: 1; visibility: visible; pointer-events: auto; }
.iwc-fc-panel--left  { left: 20px;  transform: translateY(16px) scale(.98); transform-origin: bottom left; }
.iwc-fc-panel--right { right: 20px; transform: translateY(16px) scale(.98); transform-origin: bottom right; }
.iwc-fc-root.is-open .iwc-fc-panel--left,
.iwc-fc-root.is-open .iwc-fc-panel--right { transform: translateY(0) scale(1); }
.iwc-fc-panel__inner { display: flex; flex-direction: column; min-height: 0; max-height: inherit; position: relative; }

.iwc-fc-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--iwc-fc-line);
}
.iwc-fc-panel__title { display: flex; align-items: baseline; gap: 8px; }
.iwc-fc-panel__title strong { font-size: 17px; color: var(--iwc-fc-ink); }
.iwc-fc-panel__count { font-size: 12px; color: var(--iwc-fc-muted); font-weight: 600; }
.iwc-fc-close {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50% !important; border: 0 !important;
    background: #f4f4f6 !important; color: #555 !important; cursor: pointer;
    box-shadow: none !important; padding: 0 !important;
    transition: background .15s, color .15s;
}
.iwc-fc-close svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; }
.iwc-fc-close:hover { background: #e9e9ee !important; color: #111 !important; }
.iwc-fc-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--iwc-fc-color) 50%, #fff); outline-offset: 2px; }

.iwc-fc-notice { padding: 12px 20px; background: #fbfbfc; font-size: 13px; color: #444; border-bottom: 1px solid var(--iwc-fc-line); }

/* ── Free-ship bar ───────────────────────────────────────────────────────── */
.iwc-fc-freeship { padding: 14px 20px; border-bottom: 1px solid var(--iwc-fc-line); font-size: 13px; color: #444; }
.iwc-fc-freeship p { margin: 0 0 8px; }
.iwc-fc-freeship__track { height: 7px; background: #eceef1; border-radius: 999px; overflow: hidden; }
.iwc-fc-freeship__track span { display: block; height: 100%; background: var(--iwc-fc-color); border-radius: 999px; transition: width .45s var(--iwc-fc-ease); }
.iwc-fc-freeship.is-achieved .iwc-fc-freeship__track span { background: #1a9f4b; }
.iwc-fc-freeship__win { display: flex; align-items: center; gap: 6px; color: #1a9f4b; font-weight: 700; }

/* ── Items (scroll region) ───────────────────────────────────────────────── */
.iwc-fc-items { flex: 0 1 auto; overflow-y: auto; padding: 4px 20px; overscroll-behavior: contain; max-height: 46vh; }
.iwc-fc-item {
    display: flex; gap: 13px; align-items: flex-start; padding: 15px 0;
    border-bottom: 1px solid #f3f3f5; position: relative;
    animation: iwc-fc-in .28s var(--iwc-fc-ease);
}
@keyframes iwc-fc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.iwc-fc-item.is-removing { opacity: .35; transform: translateX(8px); transition: opacity .2s, transform .2s; }
.iwc-fc-item__thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; background: #f4f4f6; }
.iwc-fc-item__body { flex: 1; min-width: 0; }
.iwc-fc-item__name { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--iwc-fc-ink); }
.iwc-fc-item__name a { color: inherit; text-decoration: none; }
.iwc-fc-item__name a:hover { color: var(--iwc-fc-color); }
.iwc-fc-item__meta { font-size: 12.5px; color: var(--iwc-fc-muted); margin: 3px 0 8px; }
.iwc-fc-item__remove {
    position: absolute; top: 12px; right: 0; width: 24px; height: 24px; border-radius: 50%;
    background: 0; border: 0; font-size: 17px; line-height: 1; color: #c2c2cc; cursor: pointer;
    transition: background .15s, color .15s;
}
.iwc-fc-item__remove:hover { background: #fdecec; color: #d63638; }

.iwc-fc-qty { display: inline-flex; align-items: stretch; border: 1px solid #e3e3e8; border-radius: 8px; overflow: hidden; background: #fff; }
.iwc-fc-qty.is-loading { opacity: .5; pointer-events: none; }
.iwc-fc-qty__btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: #fafafb; cursor: pointer; font-size: 16px; line-height: 1; color: #333; transition: background .12s; padding: 0; }
.iwc-fc-qty__btn:hover { background: #eeeef1; }
.iwc-fc-qty__num { min-width: 34px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 600; line-height: 1; }

/* ── Foot: coupon, totals, actions ───────────────────────────────────────── */
.iwc-fc-foot { border-top: 1px solid var(--iwc-fc-line); background: #fff; }
.iwc-fc-coupon { padding: 14px 20px 4px; }
.iwc-fc-coupon.is-loading { opacity: .6; pointer-events: none; }
.iwc-fc-coupon__applied { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.iwc-fc-coupon__applied li { display: inline-flex; align-items: center; gap: 6px; background: #eef6ee; color: #1a7f37; border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; font-weight: 600; }
.iwc-fc-coupon__remove { background: 0; border: 0; color: #1a7f37; cursor: pointer; font-size: 15px; line-height: 1; opacity: .7; }
.iwc-fc-coupon__remove:hover { opacity: 1; }
.iwc-fc-coupon__row { display: flex; gap: 8px; }
.iwc-fc-coupon__code { flex: 1; padding: 10px 12px; border: 1px solid #e3e3e8; border-radius: 9px; font-size: 13px; }
.iwc-fc-coupon__code:focus { outline: 0; border-color: var(--iwc-fc-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iwc-fc-color) 18%, transparent); }
.iwc-fc-coupon__apply { padding: 10px 16px; border: 0; border-radius: 9px; background: #23232a; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s; }
.iwc-fc-coupon__apply:hover { background: #000; }

.iwc-fc-totals { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 20px 8px; }
.iwc-fc-totals > span:first-child { font-size: 13px; color: var(--iwc-fc-muted); font-weight: 600; }
.iwc-fc-subtotal { font-size: 19px; font-weight: 800; color: var(--iwc-fc-ink); }
.iwc-fc-actions { display: flex; gap: 10px; padding: 4px 20px 20px; }
.iwc-fc-actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border-radius: 11px; text-decoration: none; font-weight: 700; font-size: 14px; transition: transform .12s, filter .15s, background .15s; }
.iwc-fc-actions a:active { transform: scale(.98); }
.iwc-fc-view-cart { background: #f3f3f5; color: #2b2b31; flex: 0 0 42%; }
.iwc-fc-view-cart:hover { background: #e9e9ee; }
.iwc-fc-checkout { background: var(--iwc-fc-color) !important; color: #fff !important; }
.iwc-fc-checkout:hover, .iwc-fc-checkout:focus { background: var(--iwc-fc-color) !important; color: #fff !important; filter: brightness(1.06); }
.iwc-fc-checkout span, .iwc-fc-checkout svg { color: #fff !important; stroke: #fff; }
.iwc-fc-checkout--full { flex: 1 1 100%; }
.iwc-fc-checkout:hover { filter: brightness(1.06); }
.iwc-fc-checkout.is-going { opacity: .7; pointer-events: none; }
.iwc-fc-checkout svg { transition: transform .18s var(--iwc-fc-ease); }
.iwc-fc-checkout:hover svg { transform: translateX(3px); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.iwc-fc-empty { text-align: center; padding: 54px 24px; }
.iwc-fc-empty__icon { color: #d3d3da; margin-bottom: 14px; }
.iwc-fc-empty__title { font-size: 15px; font-weight: 600; color: #555; margin: 0 0 18px; }
.iwc-fc-empty__cta { display: inline-block; padding: 11px 22px; border-radius: 10px; background: var(--iwc-fc-color); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; transition: filter .15s; }
.iwc-fc-empty__cta:hover { filter: brightness(1.06); }

/* ── Toast (inline feedback) ─────────────────────────────────────────────── */
.iwc-fc-toast {
    position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5;
    padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
    color: #fff; background: #23232a; box-shadow: 0 8px 24px rgba(0,0,0,.2);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s var(--iwc-fc-ease), transform .2s var(--iwc-fc-ease);
}
.iwc-fc-toast.is-show { opacity: 1; transform: none; }
.iwc-fc-toast.is-ok  { background: #1a7f37; }
.iwc-fc-toast.is-err { background: #b32d2e; }

/* Mobile + small tablet: a BOTTOM SHEET that hugs its content — same
   content-sized behavior as the desktop card. The sheet rises from the bottom;
   the space left above it is the accent-tinted overlay (90% opacity, rule
   above). Long carts cap at most of the viewport and scroll inside, so a strip
   of accent always stays visible on top. */
@media (max-width: 768px) {
    .iwc-fc-panel {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-width: 100%;
        max-height: calc(100vh - 64px);            /* fallback */
        max-height: calc(100dvh - 64px);           /* mobile URL-bar safe */
        border-radius: var(--iwc-fc-radius) var(--iwc-fc-radius) 0 0;
        padding-bottom: env(safe-area-inset-bottom); /* iOS home indicator */
        transform: translateY(100%);
    }
    .iwc-fc-panel--left, .iwc-fc-panel--right { left: 0; right: 0; transform: translateY(100%); }
    .iwc-fc-root.is-open .iwc-fc-panel { opacity: 1; }
    .iwc-fc-root.is-open .iwc-fc-panel--left,
    .iwc-fc-root.is-open .iwc-fc-panel--right { transform: translateY(0); }
    .iwc-fc-panel__inner { max-height: inherit; }
    .iwc-fc-items { max-height: none; flex: 0 1 auto; } /* hug content; scroll only when capped */
    .iwc-fc-btn { bottom: 20px; }
    .iwc-fc-btn--bottom-left { left: 16px; }
    .iwc-fc-btn--bottom-right { right: 16px; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .iwc-fc-btn, .iwc-fc-panel, .iwc-fc-overlay, .iwc-fc-item,
    .iwc-fc-freeship__track span, .iwc-fc-toast, .iwc-fc-checkout svg,
    .iwc-fc-btn__count { transition: none !important; animation: none !important; }
}