/* Styles for the components every page carries (announcement bar, header search, quick view,
   stock-limit modal, exit-intent offer, mobile tab bar).

   These lived in <style> blocks inside each partial, so about 30 KB of CSS was re-sent inside
   the HTML of every page view and could never be cached (pages are served no-store). Here they
   are downloaded once. _Layout loads this file last in <head>, after the page's own styles,
   which is where these rules sat in the cascade when they were inline in <body>. */

/* ==== Announcement bar (Views/Shared/Components/AnnouncementBar/Default.cshtml) ==== */
/* Coral-red fill (oklch(0.56 0.18 19.45)) with near-white text/link for contrast. */
.announcement-bar {
    background: #d0473e; /* Umino announcement red */
    color: #fff;
    font-size: 0.9375rem;
}
.announcement-bar-inner { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px var(--gutter); position:relative; }
/* Hidden on phones: 51px of a 812px screen is a lot to spend on a banner when the
   first product already started 474px down, and the promo it carries is also the
   first chip in the quick bar immediately below the header ("Flash Sale"), which
   survives. Desktop keeps it — there's room there. Delete this block to bring it
   back on mobile. */
@media(max-width:768px) { .announcement-bar { display:none; } }
.announcement-bar-icon { font-size:0.75rem; opacity:0.85; }
.announcement-bar-message { text-align:center; font-weight:400; letter-spacing:0; }
.announcement-bar-link {
    display:inline-flex; align-items:center; gap:4px;
    color:oklch(0.98 0.005 65); font-weight:700; text-decoration:none; margin-left:10px;
    border-bottom:1.5px solid oklch(0.98 0.005 65 / 0.55); padding-bottom:1px;
    transition: border-color var(--transition), opacity var(--transition);
}
.announcement-bar-link:hover { border-color:oklch(0.98 0.005 65); opacity:0.85; }
.announcement-bar-close {
    position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
    background:none; border:none; color:oklch(0.98 0.005 65 / 0.6); font-size:1.15rem; line-height:1; cursor:pointer; padding:4px;
}
.announcement-bar-close:hover { color:oklch(0.98 0.005 65); }
@media(max-width:600px) {
    .announcement-bar-inner { padding:8px 36px 8px var(--gutter); gap:6px; }
    .announcement-bar-icon { display:none; }
    .announcement-bar-message { font-size:0.74rem; line-height:1.4; text-align:left; }
    .announcement-bar-link { margin-left:6px; white-space:nowrap; }
}

/* ==== Header search bar (Views/Shared/Components/SearchBar/Default.cshtml) ==== */
.search-wrap { position:relative; width:100%; }
/* Umino reference composition: search lives in a dropdown panel triggered by a
   header icon (#searchToggle in _Header.cshtml), not a permanently-visible bar —
   see .header-search-drop in styles.css. Below 768px the panel is replaced by the
   existing full-screen overlay (_SearchOverlay.cshtml), same as before. */
@media(max-width:768px) {
    /* #searchToggle stays visible and still opens .header-search-drop — but
       _SearchOverlay.cshtml's mobileOpen() redirects the resulting input focus
       straight to the full-screen overlay (ddInput.addEventListener('focus',
       mobileOpen), gated on the same mq.matches check), so the dropdown panel
       itself is never actually seen on mobile; it's just the mechanism that gets
       the real input focused. The dropdown's own suggestion panel is suppressed
       here since the overlay has its own. */
    .search-suggest { display:none !important; }
}
/* Widened past the search input itself — matching the input's own width (the old
   left:0/right:0) left a narrow column of results stranded in the middle of a wide
   viewport with dead space either side. Centered under the input instead, sized off
   the viewport (clamped so it never runs past the screen edge on a narrower one). */
.search-suggest { display:none; position:absolute; top:calc(100% + 8px);
    left:50%; transform:translateX(-50%); width:min(1040px, calc(100vw - 48px)); z-index:var(--z-menu);
    background:var(--white); border:1.5px solid var(--bg-warm); border-radius:var(--radius-md);
    box-shadow:0 18px 48px rgba(0,0,0,0.14);
    /* 16 results (4 rows) is taller than the old 6-8/two-row grid — tall enough on a
       shorter laptop screen to run past the viewport bottom with nothing scrollable,
       so the last row (and "View all results") became unreachable. Capping height and
       scrolling only the results column (not the categories sidebar) keeps the panel
       itself fully on-screen either way. */
    max-height:min(640px, calc(100vh - 120px)); overflow:hidden; }
.search-suggest.open { display:block; }
.ss-panel { display:grid; grid-template-columns:230px 1fr; max-height:inherit; }
.ss-products { overflow-y:auto; max-height:inherit; }
.ss-cats { border-right:1.5px solid var(--bg-warm); padding:18px 16px; background:var(--bg-subtle); }
.ss-products { padding:18px 20px; min-height:120px; }
.ss-sec { margin-bottom:18px; }
.ss-sec:last-child { margin-bottom:0; }
.ss-heading { font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--mid); margin-bottom:10px; }
.ss-sugg { font-weight:500; }
.ss-sugg:hover { color:var(--gold-dark); }
.ss-cat-list { display:flex; flex-direction:column; gap:2px; }
.ss-cat { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px;
    border-radius:var(--radius-sm); font-size:0.88rem; color:var(--dark-mid); text-decoration:none; font-weight:600; }
.ss-cat:hover { background:var(--white); color:var(--dark); }
.ss-cat .ss-count { font-size:0.75rem; font-weight:600; color:var(--mid); background:var(--white); border-radius:40px; padding:1px 8px; }
.ss-cat:hover .ss-count { background:var(--bg-subtle); }
.ss-prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:980px) { .ss-prod-grid { grid-template-columns:repeat(2,1fr); } }
/* The panel is now wide enough on a large screen to fit a 4th card without
   cramping — otherwise that extra width just became bigger gaps around 3 cards. */
@media(min-width:1240px) { .ss-prod-grid { grid-template-columns:repeat(4,1fr); } }
.ss-prod { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:6px; }
.ss-prod-img { aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-subtle); }
.ss-prod-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.3s; }
.ss-prod:hover .ss-prod-img img { transform:scale(1.05); }
.ss-prod-name { font-size:0.82rem; color:var(--dark); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ss-prod-code { font-size:0.72rem; color:var(--mid); letter-spacing:0.02em; margin-top:-4px; }
.ss-prod-price { font-size:0.9rem; font-family:var(--font-serif); }
.ss-prod-now { font-weight:700; color:var(--dark); }
.ss-prod-was { font-size:0.78rem; color:var(--mid); text-decoration:line-through; font-weight:400; margin-left:2px; }
#siteSearch .search-btn svg { width:20px; height:20px; display:block; }
.ss-view-all { display:block; text-align:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--bg-warm);
    font-size:0.85rem; font-weight:600; color:var(--gold-dark); text-decoration:none; }
.ss-view-all:hover { text-decoration:underline; }
.ss-state { padding:38px 20px; text-align:center; color:var(--mid); font-size:0.88rem; }
.ss-spinner { width:32px; height:32px; margin:0 auto; border-radius:50%; border:3px solid var(--bg-warm); border-top-color:var(--gold); animation:ss-spin 0.7s linear infinite; }
@keyframes ss-spin { to { transform:rotate(360deg); } }

/* ---- Full-screen mobile overlay ---- */
.ms-overlay { display:none; }
body.ms-lock { overflow:hidden; }
@media(max-width:768px) {
    .ms-overlay.open { display:flex; flex-direction:column; position:fixed; inset:0; z-index:var(--z-search-overlay); background:var(--white); }
    .ms-bar { display:flex; align-items:center; gap:6px; padding:10px 10px; border-bottom:1.5px solid var(--bg-warm); }
    .ms-icon-btn { background:none; border:none; padding:8px; cursor:pointer; color:var(--dark); display:flex; align-items:center; }
    .ms-icon-btn svg { width:22px; height:22px; }
    .ms-input { flex:1; min-width:0; border:1.5px solid var(--bg-warm); border-radius:var(--radius-sm);
        padding:11px 14px; font-size:1rem; font-family:var(--font-sans); color:var(--dark); outline:none; background:var(--white); }
    .ms-input:focus { border-color:var(--gold); }
    /* Suppress the browser's built-in type=search clear icon so there's only one ✕. */
    .ms-input::-webkit-search-cancel-button, .ms-input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
    .ms-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; }
    .ms-body .ss-prod-grid { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:769px) { .ms-overlay.open { display:none !important; } }

/* ==== Mobile tab bar (Views/Shared/_MobileTabBar.cshtml) ==== */
.mobile-tabbar { display: none; }
@media (max-width: 767px) {
    .mobile-tabbar {
        display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
        z-index: var(--z-tabbar); background: #fff; border-top: 1px solid var(--bg-warm);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(0,0,0,.05);
    }
    .mtb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--dark); padding: 2px 0; }
    .mtb-item svg { width: 22px; height: 22px; }
    .mtb-item.active { color: var(--accent); }
    .mtb-icon-wrap { position: relative; display: inline-flex; }
    .mtb-badge { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 0.625rem; display: grid; place-items: center; line-height: 1; }
    /* Only while the bar is actually in the page (see the note in _Layout.cshtml). */
    body:has(.mobile-tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ==== Quick view (Views/Shared/_QuickView.cshtml) ==== */
/* Above the mobile bottom tab bar (z-index 1300) so the sheet covers it. */
.quick-view-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:var(--z-modal); opacity:0; transition:opacity 0.25s; }
.quick-view-overlay.open { display:block; opacity:1; }
.quick-view-modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:min(820px,94vw); max-height:90vh; overflow-y:auto; background:var(--white); z-index:calc(var(--z-modal) + 1); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); opacity:0; transition:opacity 0.25s, transform 0.25s; }
.quick-view-modal.open { display:grid; grid-template-columns:1fr 1fr; opacity:1; transform:translate(-50%,-50%); }
/* Mobile: present Quick View as a bottom sheet that slides up from the bottom
   edge (with a drag handle + swipe-down to dismiss) rather than a centred modal —
   it's within thumb reach and reads as native on a phone. */
.qv-handle { display:none; }
@media(max-width:700px) {
    .quick-view-modal { top:auto; bottom:0; left:0; width:100%; max-width:100%;
        transform:translateY(100%); border-radius:18px 18px 0 0; max-height:88vh; }
    .quick-view-modal.open { grid-template-columns:1fr; width:100%; transform:translateY(0); }
    .qv-handle { display:block; padding:10px 0 4px; text-align:center; cursor:grab; touch-action:none; }
    .qv-handle::before { content:''; display:inline-block; width:40px; height:4px; border-radius:40px; background:var(--bg-warm); }
    .quick-view-close { top:10px; right:10px; }
}
.quick-view-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--bg-warm); background:var(--white); cursor:pointer; font-size:1rem; z-index:2; }
.quick-view-image-wrap { display:flex; flex-direction:column; background:var(--bg-subtle); }
.quick-view-image { aspect-ratio:1; background:transparent; overflow:hidden; display:flex; align-items:center; justify-content:center; margin:20px 20px 0; border-radius:var(--radius-sm); }
.quick-view-image img { width:100%; height:100%; object-fit:contain; }
.quick-view-thumbs { display:flex; gap:8px; padding:16px 20px; flex-wrap:wrap; }
.quick-view-thumb { width:56px; height:56px; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; border:2px solid transparent; background:var(--white); }
.quick-view-thumb.active, .quick-view-thumb:hover { border-color:var(--gold); }
.quick-view-thumb img { width:100%; height:100%; object-fit:contain; }
.quick-view-body { padding:40px 36px; position:relative; }
#quickViewContent { display:flex; flex-direction:column; gap:22px; }
.quick-view-loading { padding:8px 0; }
.qv-skeleton { display:flex; flex-direction:column; gap:18px; }
.qv-spinner { width:40px; height:40px; border-radius:50%; border:3px solid var(--bg-warm); border-top-color:var(--gold); animation:qv-spin 0.7s linear infinite; margin:12px 0 20px; }
@keyframes qv-spin { to { transform:rotate(360deg); } }
.qv-sk-line { height:16px; border-radius:6px; background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--bg-warm) 37%,var(--bg-subtle) 63%); background-size:400% 100%; animation:qv-shimmer 1.4s ease infinite; }
.qv-sk-title { height:26px; width:70%; }
.qv-sk-price { height:22px; width:40%; }
.qv-sk-short { width:85%; }
.qv-sk-btn { height:46px; width:100%; border-radius:var(--radius-sm); margin-top:8px; background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--bg-warm) 37%,var(--bg-subtle) 63%); background-size:400% 100%; animation:qv-shimmer 1.4s ease infinite; }
@keyframes qv-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.quick-view-title { font-family:var(--font-serif); font-size:1.35rem; font-weight:600; color:var(--dark); line-height:1.35; padding-right:28px; margin-bottom:0; }
.quick-view-price-block { display:flex; flex-direction:column; gap:8px; }
.quick-view-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.quick-view-price #quickViewPrice { font-size:1.6rem; font-weight:700; font-family:var(--font-serif); color:var(--dark); }
.quick-view-stock { font-size:0.85rem; }
.quick-view-stock.in-stock { color:var(--green); font-weight:600; }
.quick-view-stock.low-stock { color:#b45309; font-weight:700; }
.quick-view-stock.out-stock { color:var(--red); font-weight:600; }
.quick-view-section { padding-top:20px; border-top:1px solid var(--bg-warm); }
.quick-view-section h4 { font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--dark); margin-bottom:12px; }
.quick-view-actions { display:flex; gap:10px; margin-top:6px; }
.quick-view-actions .btn { padding:13px 20px; font-size:0.95rem; }
.quick-view-added { display:none; text-align:center; color:var(--green); font-weight:600; font-size:0.88rem; }
.quick-view-added.show { display:block; }
.quick-view-cta { display:block; text-align:center; text-decoration:none; font-weight:600; font-size:0.85rem; color:var(--gold-dark); padding:4px 0; }
.quick-view-cta:hover { text-decoration:underline; }

/* Quantity control — scoped to this modal rather than relying on a host page's
   own .qty-wrap/.qty-btn/.qty-input rules (Product/Detail.cshtml and
   Home/Products.cshtml each define their own, unscoped, for their own on-page
   qty controls). Since Quick View is loaded globally from _Layout, it only
   happened to look styled on pages that coincidentally defined those same class
   names for something else — bare/unstyled everywhere else (e.g. the home page). */
.quick-view-body .qty-wrap { display:flex; align-items:center; border:1.5px solid var(--bg-warm); border-radius:var(--radius-sm); overflow:hidden; width:fit-content; }
.quick-view-body .qty-btn { width:44px; height:44px; background:var(--bg-subtle); border:none; font-size:1.1rem; cursor:pointer; color:var(--dark-mid); }
.quick-view-body .qty-btn:hover { background:var(--bg-warm); color:var(--dark); }
.quick-view-body .qty-input { width:64px; text-align:center; border:none; border-left:1px solid var(--bg-warm); border-right:1px solid var(--bg-warm); font-size:0.95rem; font-weight:600; height:44px; font-family:var(--font-sans); outline:none; background:var(--white); }
/* ── Mobile sheet, part two ──────────────────────────────────────────────────
   Deliberately at the end of this stylesheet, not up in the earlier
   max-width:700px block: the base .quick-view-image / -thumbs / -body rules are
   declared BELOW that block, so an override placed there has equal specificity
   and loses on source order. (It looked applied in devtools and did nothing.)

   The sheet's job is to let someone buy without leaving the grid, and it wasn't
   doing it. Measured at 375x812: the image block took 443px of a 715px sheet and
   pushed Add to Cart 320px BELOW the fold, so every quick view needed a scroll
   before it showed a price, let alone a button. The photo now gets a 4:3 box
   instead of a square and loses its tinted 20px frame (that was the "empty
   space"), the thumbnails scroll sideways in one row instead of wrapping onto a
   second, and the button is pinned to the foot of the sheet. ── */
@media(max-width:700px) {
    .quick-view-image-wrap { background:var(--white); }
    .quick-view-image { aspect-ratio:4/3; margin:0; border-radius:0; }
    .quick-view-thumbs {
        flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:10px 16px;
        scrollbar-width:none; -webkit-overflow-scrolling:touch;
        border-bottom:1px solid var(--bg-warm);
    }
    .quick-view-thumbs::-webkit-scrollbar { display:none; }
    .quick-view-thumb { width:46px; height:46px; flex:0 0 auto; }
    .quick-view-body { padding:14px 16px 8px; }
    #quickViewContent { gap:14px; }
    .quick-view-title { font-size:1.15rem; }
    .quick-view-price #quickViewPrice { font-size:1.4rem; }
    .quick-view-section h4 { margin-bottom:6px; }
    /* Sticky within the sheet's own scroll, so it sits at the foot of the panel
       rather than at the end of the content. */
    .quick-view-actions {
        position:sticky; bottom:0; z-index:2;
        background:var(--white); margin:0 -16px;
        padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow:0 -10px 18px -10px rgba(0,0,0,0.18);
    }
    .quick-view-cta { padding-bottom:6px; }
}

/* ── Umino look ── */
.quick-view-modal.open { border-radius:10px; }
.quick-view-close { border:0; background:none; color:#999; font-size:1.2rem; }
.quick-view-close:hover { color:var(--dark); }
.quick-view-image-wrap { background:#fff; }
.quick-view-image { aspect-ratio:3/4; background:var(--bg-subtle); border-radius:10px; }
.quick-view-image img { object-fit:cover; }
.quick-view-thumb { width:60px; height:auto; aspect-ratio:3/4; border:1px solid transparent; border-radius:6px; }
.quick-view-thumb.active, .quick-view-thumb:hover { border-color:var(--dark); }
.quick-view-thumb img { object-fit:cover; }
.qv-spinner { border-top-color:var(--dark); }
.quick-view-title { font-family:var(--font-sans); font-size:1.6rem; font-weight:400; }
.quick-view-price #quickViewPrice { font-family:var(--font-sans); font-size:1.4rem; font-weight:500; }
.quick-view-stock.in-stock { color:var(--dark); font-weight:500; }
/* Keeps the amber — it's a warning — but drops the bold, exactly as the
   product page's .pdp-meta .meta-val.low-stock does under this theme. */
.quick-view-stock.low-stock { font-weight:500; }
.quick-view-section h4 { font-size:0.95rem; font-weight:500; letter-spacing:0; text-transform:none; }
.quick-view-actions .btn { height:50px; }
.quick-view-cta { color:var(--dark); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.quick-view-body .qty-wrap { border:1px solid var(--bg-warm); border-radius:30px; height:50px; }
.quick-view-body .qty-btn { background:none; height:48px; }
.quick-view-body .qty-btn:hover { background:none; color:var(--accent); }
.quick-view-body .qty-input { border:0; height:48px; width:48px; font-weight:500; background:none; }
@media(max-width:700px) { .quick-view-modal.open { border-radius:18px 18px 0 0; } .quick-view-image { aspect-ratio:4/3; border-radius:0; } }
/* A plain 1fr column can't shrink below its content's min width, and the scrolling
   thumbnail strip counts as wide content: products with 6+ photos pushed the image,
   thumbs and details wider than the phone (image zoomed/cropped, details off-screen).
   minmax(0,1fr) lets the columns fit the modal; the strip then scrolls inside it. */
.quick-view-modal.open { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.quick-view-image-wrap, .quick-view-body { min-width:0; }
.quick-view-thumbs { max-width:100%; }
@media(max-width:700px) { .quick-view-modal.open { grid-template-columns:minmax(0,1fr); } }
/* Show the whole photo, never cropped: portrait frame, image contained inside it
   (the earlier cover/4:3 rules cut heads and hems off the model shots). */
.quick-view-image { aspect-ratio:2/3; }
.quick-view-image img { object-fit:contain; background:var(--bg-subtle); }
@media(max-width:700px) { .quick-view-image { aspect-ratio:2/3; margin:0; width:100%; border-radius:0; } }
.quick-view-thumb img { object-fit:cover; }

/* Close button: a round white button with a soft shadow that floats over the photo's corner (so it is
   always visible, on light or dark photos), with a crisp drawn "x" instead of a text glyph. On hover or
   keyboard focus it turns dark and the x spins a quarter turn. */
.quick-view-close { top:14px; right:14px; z-index:6; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:#fff; color:transparent; font-size:0; line-height:0;
    box-shadow:0 2px 12px rgba(0,0,0,.2); display:grid; place-items:center; cursor:pointer; transition:background .2s, transform .25s, box-shadow .2s; }
.quick-view-close::before, .quick-view-close::after { content:''; position:absolute; left:50%; top:50%; width:16px; height:1.6px; margin:-.8px 0 0 -8px; border-radius:2px; background:var(--dark); transition:transform .25s, background .2s; }
.quick-view-close::before { transform:rotate(45deg); }
.quick-view-close::after { transform:rotate(-45deg); }
.quick-view-close:hover, .quick-view-close:focus-visible { background:var(--dark); box-shadow:0 4px 16px rgba(0,0,0,.28); outline:none; }
.quick-view-close:hover::before, .quick-view-close:focus-visible::before { transform:rotate(135deg); background:#fff; }
.quick-view-close:hover::after, .quick-view-close:focus-visible::after { transform:rotate(45deg); background:#fff; }
.quick-view-close:active { transform:scale(.92); }
@media(max-width:700px) { .quick-view-close { top:12px; right:12px; width:40px; height:40px; } }

/* ==== Stock limit modal (Views/Shared/_StockLimitModal.cshtml) ==== */
.stock-limit-overlay {
    /* +2/+3 rather than the bare --z-modal: Quick View's own sheet sits at
       --z-modal + 1, and this popup can now open on top of it (a sold-out colour,
       or an add that got capped), so anything lower would dim the page but leave
       the sheet sitting over the dialog. */
    position: fixed; inset: 0; background: rgba(20,16,12,0.55); z-index: calc(var(--z-modal, 1000) + 2);
    display: none; align-items: center; justify-content: center;
}
.stock-limit-overlay.open { display: flex; }
.stock-limit-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--white); border-radius: var(--radius-md); max-width: 380px; width: calc(100% - 40px);
    padding: 32px 28px 26px; text-align: center; z-index: calc(var(--z-modal, 1000) + 3);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.25));
    display: none;
}
.stock-limit-modal.open { display: block; }
.stock-limit-close {
    position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--bg-subtle); cursor: pointer; font-size: 0.9rem; color: var(--mid);
}
.stock-limit-icon { font-size: 2rem; margin-bottom: 10px; line-height: 1; }
.stock-limit-title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: var(--dark); }
.stock-limit-message { color: var(--mid); font-size: 0.9rem; line-height: 1.55; margin-bottom: 22px; }
.stock-limit-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--bg-warm);
}
.stock-limit-list[hidden] { display: none; }
.stock-limit-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--bg-warm);
    font-size: 0.82rem;
}
.stock-limit-list .sl-name { font-weight: 600; color: var(--dark); }
.stock-limit-list .sl-what { flex-shrink: 0; color: var(--mid); }
.stock-limit-list .sl-gone { color: var(--red); font-weight: 600; }
.stock-limit-actions { display: flex; flex-direction: column; gap: 10px; }
.stock-limit-actions .btn { width: 100%; justify-content: center; }

/* ==== Exit-intent offer (Views/Shared/_ExitIntentOffer.cshtml) ==== */
.exit-intent-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal, 1000);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.exit-intent-overlay.open { display: flex; }
.exit-intent-modal {
    display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 10px;
    max-width: 760px; width: 100%; overflow: hidden; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: exitIn .35s ease;
}
@keyframes exitIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.exit-intent-media { background: var(--bg-subtle); min-height: 440px; }
.exit-intent-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.exit-intent-body { padding: 54px 40px 40px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.exit-intent-close {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: #fff; color: #999; cursor: pointer; display: grid; place-items: center; z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: color .2s;
}
.exit-intent-close:hover { color: var(--dark); }
.exit-intent-close svg { width: 20px; height: 20px; }
.exit-intent-eyebrow { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }
.exit-intent-modal h3 { font-family: var(--font-sans); font-size: 2rem; font-weight: 500; line-height: 1.2; margin-bottom: 12px; color: var(--dark); }
.exit-intent-modal h3 span { color: var(--accent); }
.exit-intent-modal p.sub { color: var(--mid); font-size: 1rem; line-height: 1.7; margin-bottom: 26px; }
.exit-intent-form { display: flex; flex-direction: column; gap: 12px; }
.exit-intent-form input[type=email] {
    height: 50px; padding: 0 22px; border: 1px solid var(--bg-warm); border-radius: 30px;
    font-size: 0.95rem; font-family: var(--font-sans); text-align: center; outline: none;
}
.exit-intent-form input[type=email]:focus { border-color: var(--dark); }
.exit-intent-form button {
    height: 50px; border-radius: 30px; border: none; background: var(--dark); color: #fff;
    font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer; font-family: var(--font-sans); transition: background .2s;
}
.exit-intent-form button:hover { background: var(--accent); }
.exit-intent-modal .fine { font-size: 0.8125rem; color: #999; margin-top: 16px; }
@media (max-width: 640px) {
    .exit-intent-modal { grid-template-columns: 1fr; max-width: 400px; }
    .exit-intent-media { min-height: 0; height: 200px; }
    .exit-intent-body { padding: 28px 24px 26px; }
    .exit-intent-modal h3 { font-size: 1.6rem; }
}