/**
 * Mockup Theme — storefront chrome (header / mega-menu / search / cart).
 *
 * Ported in Phase 4 from the mockup-core plugin, which previously injected this
 * UI at wp_body_open. Source files, each kept as a banner-marked section below:
 *   header-desktop.css · header-mobile.css · mega-menu.css
 *   search.css · cart-drawer.css · cart-toast.css
 *
 * Reconciliations applied during the port:
 *   • Font: the plugin declared `'Inter', sans-serif` but never loaded Inter
 *     (it shipped Fira Go). Inter also lacks Georgian glyphs. Repointed to the
 *     theme's self-hosted family via var(--sans) (FiraGo) so Georgian renders.
 *   • Colour: the plugin UI yellow (#F2EC19) is intentionally kept — it is one
 *     byte off the editorial token --yellow (#F2EC1A). Per WORKFLOW.md §4 we do
 *     NOT force convergence; the plugin palette lives in its own --mk-* layer
 *     declared once below (kept verbatim from the plugin's :root).
 *   • Show/hide: the mobile/desktop `display: … !important` toggles are
 *     load-bearing (they beat WooCommerce/component CSS) and are kept as-is.
 *
 * The two catalog modals (callback / proforma) styled by the .mk-modal / .mk-
 * upsell rules in the cart section are still rendered from core's partials
 * (see cart-drawer.php); their markup restyle is Phase 5, but the CSS rides
 * here so the drawer + pre-order flow stay visually intact meanwhile.
 *
 * @package Mockup_Theme
 */

/* Plugin palette layer — kept distinct from the theme design tokens. */
:root {
    --mk-yellow: #F2EC19;
    --mk-dark: #1a1a1a;
    --mk-darker: #121212;
    --mk-text-grey: #cccccc;
    --mk-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --mk-stock-green: #27ae60;
    --mk-stock-orange: #f39c12;
}

/* ════════════════════════════════════════════════════════════════════
 * header-desktop.css
 * ════════════════════════════════════════════════════════════════════ */

/* Pointer cursor on all interactive elements */
.mkd-top-bar a,
.mkd-nav-link,
.mkd-lang-switch a,
.mkd-call-btn,
.mkd-contact-item,
.mkd-logo,
.mkd-cat-btn,
.mkd-search-btn,
.mkd-search-clear,
.mkd-action-icon,
.mkd-trending-tag,
.mkd-search-item,
.mkd-view-all,
.mkd-parent-item,
.mkd-cat-card { cursor: pointer; }

/* ─── Responsive: hide desktop elements on mobile ─────────────── */
@media (max-width: 768px) {
    .mkd-top-bar,
    .mkd-header { display: none !important; }
}

/* ─── Top Bar — normal flow, scrolls away naturally ───────────── */
.mkd-top-bar {
    background: var(--mk-darker); color: var(--mk-text-grey);
    padding: 0 5%; display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; font-family: var(--sans); border-bottom: 1px solid #2a2a2a;
}
.mkd-top-left, .mkd-top-right { display: flex; align-items: center; gap: 24px; }
.mkd-contact-item { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.mkd-contact-item svg { color: var(--mk-yellow); opacity: 0.8; }
.mkd-nav-link { text-decoration: none; color: var(--mk-text-grey); font-weight: 500; transition: color 0.2s; }
.mkd-nav-link:hover { color: #fff; }
.mkd-lang-switch a { color: #fff; text-decoration: none; font-weight: 700; opacity: 0.8; }
.mkd-lang-switch a:hover { opacity: 1; }
.mkd-call-btn {
    background: var(--mk-yellow); color: #000; padding: 7px 16px;
    font-weight: 700; text-transform: uppercase; text-decoration: none;
    display: flex; align-items: center; gap: 8px; border-radius: 0;
    font-size: 11px; letter-spacing: 0.5px; transition: all 0.2s var(--mk-ease);
}
.mkd-call-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(242,236,25,0.25); }

/* ─── Sticky Header — sticks when top bar scrolls away ────────── */
.mkd-header {
    background: var(--mk-dark); padding: 0 5%; min-height: 70px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); font-family: var(--sans);
}
.mkd-logo img { width: 170px; height: auto; display: block; }
.mkd-logo-text { color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; }

.mkd-cat-btn {
    background: rgba(255,255,255,0.05); color: #fff; border: 1px solid #333;
    padding: 0 20px; height: 45px; border-radius: 50px;
    margin-left: 28px; margin-right: 16px; cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 15px; transition: all 0.3s var(--mk-ease);
    min-width: 160px; font-family: inherit;
}
.mkd-cat-btn:hover, .mkd-cat-btn.active {
    border-color: var(--mk-yellow); color: var(--mk-yellow); background: rgba(242,236,25,0.05);
}
.mkd-cat-icon { color: var(--mk-yellow); transition: transform 0.3s ease; width: 18px; height: 18px; }
.mkd-cat-btn.active .mkd-cat-icon { transform: rotate(90deg); }

/* Search */
.mkd-search-container { flex-grow: 1; margin-right: 28px; position: relative; }
.mkd-search-input {
    width: 100%; height: 45px; padding: 0 85px 0 22px;
    border-radius: 50px; border: 2px solid transparent; outline: none;
    font-size: 14px; color: #111; font-weight: 500;
    background: #fff; transition: all 0.2s; font-family: inherit;
}
.mkd-search-input::placeholder { color: #999; font-weight: 400; font-size: 13px; }
.mkd-search-input:focus { border-color: rgba(242,236,25,0.5); box-shadow: 0 0 0 4px rgba(242,236,25,0.1); }
.mkd-search-btn {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 35px; height: 35px; background: var(--mk-yellow);
    border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1); z-index: 2;
}
.mkd-search-btn svg { stroke: #000; stroke-width: 2.5px; width: 17px; height: 17px; }
.mkd-search-btn:hover { transform: translateY(-50%) scale(1.1); }
.mkd-search-clear {
    position: absolute; right: 48px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; background: #e0e0e0; border-radius: 50%;
    color: #fff; display: none; align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; border: none;
}
.mkd-search-clear.visible { display: flex; }
.mkd-search-clear:hover { background: #999; }

/* User Actions */
.mkd-user-actions { display: flex; align-items: center; gap: 22px; }
.mkd-action-icon {
    position: relative; color: #fff; cursor: pointer;
    transition: all 0.2s; opacity: 0.9; background: none; border: none;
    text-decoration: none; font-family: inherit; line-height: 1;
}
.mkd-action-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.mkd-action-icon:hover { color: var(--mk-yellow); opacity: 1; transform: translateY(-2px); }
.mkd-badge {
    position: absolute; top: -6px; right: -8px;
    background: var(--mk-yellow); color: #000;
    font-size: 10px; font-weight: 800; height: 17px; width: 17px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.mkd-badge[data-count="0"] { display: none; }

/* ════════════════════════════════════════════════════════════════════
 * header-mobile.css — no top bar. Fixed header. In-header search crossfade.
 * ════════════════════════════════════════════════════════════════════ */

/* Hide ALL mobile elements on desktop — !important needed to override component CSS */
.mkm-header,
.mkm-search-panel,
.mkm-bottom-nav { display: none !important; }

/* Drawer: hidden on desktop */
.mkm-drawer { display: none !important; }

@media (max-width: 768px) {
    .mkm-header { display: flex !important; }
    .mkm-bottom-nav { display: flex !important; }
    .mkm-drawer { display: flex !important; } /* visible but off-screen via transform */
    .mkm-search-panel { display: block !important; } /* visible but opacity:0 until .searching */
}

/* Pointer cursor on all interactive elements */
.mkm-logo,
.mkm-lang-btn,
.mkm-icon-btn,
.mkm-search-cancel,
.mkm-trending-tag,
.mkm-nav-btn,
.mkm-cat-link,
.mkm-prod-item { cursor: pointer; }

/* ─── Fixed Header Bar ────────────────────────────────────────── */
.mkm-header {
    height: 65px; background: var(--mk-dark, #1a1a1a);
    position: fixed; top: 0; left: 0; width: 100%; z-index: 400;
    display: flex; align-items: center;
    padding: 0 20px; font-family: var(--sans);
    overflow: hidden; /* contain the crossfade */
}

.mkm-logo img { width: 150px; height: auto; display: block; }
.mkm-logo-text { color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; }

/* ─── State A: Default (logo + icons) ─────────────────────────── */
.mkm-state-default {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mkm-header-icons { display: flex; gap: 16px; align-items: center; }

/* Language button */
.mkm-lang-btn {
    color: var(--mk-yellow, #F2EC19); text-decoration: none;
    font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
    padding: 4px 8px; border: 1px solid rgba(242,236,25,0.3);
    border-radius: 4px; transition: all 0.2s;
}
.mkm-lang-btn:hover { border-color: var(--mk-yellow, #F2EC19); color: var(--mk-yellow, #F2EC19); }

.mkm-icon-btn {
    color: #fff; background: none; border: none; cursor: pointer;
    padding: 0; transition: color 0.2s; line-height: 1;
}
.mkm-icon-btn:active { color: var(--mk-yellow, #F2EC19); transform: scale(0.95); }

/* Burger → X animation */
.mkm-menu-toggle { position: relative; width: 24px; height: 24px; }
.mkm-menu-toggle svg { transition: opacity 0.25s ease; }
.mkm-menu-toggle .mkm-close-icon {
    position: absolute; top: 0; left: 0;
    opacity: 0; transition: opacity 0.25s ease;
}
.mkm-menu-toggle.active svg:first-child { opacity: 0; }
.mkm-menu-toggle.active .mkm-close-icon { opacity: 1; }

/* ─── State B: Search mode (overlays State A inside same bar) ── */
.mkm-state-search {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--mk-dark, #1a1a1a);
    display: flex; align-items: center; padding: 0 20px; gap: 12px;
    opacity: 0; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* When header has .searching class → crossfade */
.mkm-header.searching .mkm-state-default {
    opacity: 0; transform: translateY(8px); pointer-events: none;
}
.mkm-header.searching .mkm-state-search {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}

.mkm-search-input {
    flex-grow: 1; background: transparent; border: none;
    color: #fff; font-size: 16px; font-weight: 500;
    outline: none; caret-color: var(--mk-yellow, #F2EC19); font-family: inherit;
}
.mkm-search-input::placeholder { color: #666; }
.mkm-search-cancel {
    color: #ff4d4d; font-weight: 600; font-size: 13px; cursor: pointer;
    background: none; border: none; font-family: inherit; white-space: nowrap;
}

/* ─── Search Results Panel (below fixed header) ───────────────── */
.mkm-search-panel {
    position: fixed; top: 65px; left: 0; width: 100%;
    height: calc(100vh - 65px);
    background: rgba(255,255,255,0.98);
    z-index: 390; /* below header (400) */
    padding: 20px;
    overflow-y: auto;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.mkm-header.searching ~ .mkm-search-panel {
    opacity: 1; pointer-events: auto;
}

.mkm-popular-label { font-size: 11px; color: #888; font-weight: 700; margin-bottom: 10px; }
.mkm-trending-tag {
    display: inline-block; padding: 6px 12px; background: #f0f0f0;
    border-radius: 20px; font-size: 12px; margin: 0 5px 8px 0;
    color: #555; text-decoration: none; transition: background 0.2s;
}
.mkm-trending-tag:hover { background: var(--mk-yellow, #F2EC19); color: #000; }

/* ─── Glass Bottom Nav ────────────────────────────────────────── */
.mkm-bottom-nav {
    position: fixed; bottom: 20px; left: 20px; right: 20px;
    height: 65px; background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 20px; border: 1px solid rgba(255,255,255,0.5);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 1100; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    font-family: var(--sans);
}
.mkm-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: #999; font-size: 10px; font-weight: 600;
    transition: 0.3s; background: none; border: none; cursor: pointer;
    font-family: inherit;
}
.mkm-nav-btn svg { width: 22px; height: 22px; stroke-width: 2px; }
.mkm-nav-btn.mkm-nav-active { color: #000; transform: translateY(-2px); }
.mkm-nav-cart-wrap { position: relative; }
.mkm-nav-badge {
    position: absolute; top: -3px; right: -6px;
    width: 14px; height: 14px; background: var(--mk-yellow, #F2EC19);
    border-radius: 50%; font-size: 9px; color: #000;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.mkm-nav-badge[data-count="0"] { display: none; }

/* ════════════════════════════════════════════════════════════════════
 * mega-menu.css — desktop mega menu + mobile split-pane drawer
 * ════════════════════════════════════════════════════════════════════ */

/* Desktop Mega Menu */
.mkd-mega-menu {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: #fff; border-top: 1px solid #222;
    display: flex; height: 0; overflow: hidden; opacity: 0;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1); z-index: 200;
}
.mkd-mega-menu.open { min-height: 520px; max-height: 85vh; height: auto; opacity: 1; overflow: auto; }

.mkd-parent-cats {
    width: 18%; min-width: 200px; background: #fafafa;
    border-right: 1px solid #eee; padding: 40px 0;
    overflow-y: auto; list-style: none; margin: 0;
}
.mkd-parent-item {
    padding: 14px 24px; cursor: pointer; font-weight: 500; color: #444;
    display: flex; flex-direction: column; transition: all 0.2s;
    border-left: 4px solid transparent; font-size: 14px;
}
.mkd-parent-item:hover { background: #fff; color: #000; }
.mkd-parent-item.active {
    background: #fff; color: #000; font-weight: 700;
    border-left-color: var(--mk-yellow, #F2EC19);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}
.mkd-parent-item small { font-weight: 400; margin-top: 4px; font-size: 11px; color: #888; }
.mkd-parent-item:hover small { color: #555; }

.mkd-child-cats { width: 82%; padding: 40px 48px; background: #fff; overflow-y: auto; }
.mkd-tab-panel { display: none; }
.mkd-tab-panel.active { display: block; }

.mkd-grid-title {
    font-size: 28px; font-weight: 800; margin-bottom: 35px; color: #111;
    letter-spacing: -0.5px; position: relative; display: inline-block;
}
.mkd-grid-title::after {
    content: ''; position: absolute; bottom: -8px; left: 0;
    width: 60px; height: 4px; background: var(--mk-yellow, #F2EC19);
}

.mkd-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.mkd-cat-card {
    background: #fbfbfb; height: 200px; border-radius: 8px;
    position: relative; overflow: hidden; cursor: pointer;
    text-decoration: none; display: block; border: 1px solid #eee;
    transition: all 0.3s var(--mk-ease, ease);
}
.mkd-cat-card:hover {
    transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: transparent; border-bottom: 4px solid var(--mk-yellow, #F2EC19);
}
.mkd-card-content {
    padding: 24px; height: 100%; display: flex; flex-direction: column;
    justify-content: space-between; position: relative; z-index: 2;
}
.mkd-card-title { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 6px; letter-spacing: -0.3px; }
.mkd-card-desc { font-size: 12px; color: #777; line-height: 1.4; max-width: 90%; }
.mkd-card-img-wrap {
    position: absolute; bottom: 10px; right: 10px;
    width: 140px; height: 130px;
    display: flex; align-items: flex-end; justify-content: flex-end;
    transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.mkd-card-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.05)); }
.mkd-cat-card:hover .mkd-card-img-wrap { transform: scale(1.1) translateX(-5px) translateY(-5px); }

/* Mobile Drawer — sits BELOW header (z-index 300 < header 400) */
.mkm-drawer {
    position: fixed; top: 0; left: 0; width: 100%;
    height: 100vh;
    background: #fff; z-index: 300;
    display: flex; transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25,1,0.5,1);
    padding-top: 65px; /* fixed header height only (no top bar on mobile) */
    padding-bottom: 105px; /* bottom nav height + spacing */
}
.mkm-drawer.active { transform: translateX(0); }

.mkm-drawer-cats {
    width: 35%; background: #f4f4f4; border-right: 1px solid #ddd;
    overflow-y: auto; flex-shrink: 0;
}
.mkm-cat-link {
    padding: 20px 10px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; color: #777; text-align: center;
    border-bottom: 1px solid #e5e5e5; cursor: pointer; transition: 0.2s;
}
.mkm-cat-link.active {
    background: #fff; color: #000;
    border-left: 4px solid var(--mk-yellow, #F2EC19);
}

.mkm-drawer-content { width: 65%; padding: 20px; overflow-y: auto; background: #fff; flex: 1; min-height: 0; }
.mkm-tab-panel { display: none; }
.mkm-tab-panel.active { display: block; }

.mkm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.mkm-prod-item {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; text-decoration: none; color: inherit;
}
.mkm-prod-img-box {
    width: 100%; aspect-ratio: 1/1; background: #f9f9f9;
    border-radius: 12px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 8px; overflow: hidden;
}
.mkm-prod-img-box img { width: 60%; height: 60%; object-fit: contain; }
.mkm-prod-title { font-size: 10px; font-weight: 600; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════
 * search.css — AJAX search results (desktop dropdown + mobile list)
 * ════════════════════════════════════════════════════════════════════ */

.mkd-ajax-results {
    position: absolute; top: calc(100% + 12px); left: 10px; width: calc(100% - 20px);
    background: #fff; border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); z-index: 400;
    overflow: hidden; display: none; flex-direction: column;
    border: 1px solid #f0f0f0; padding: 8px 0;
}
.mkd-ajax-results.active { display: flex; animation: mkdSlideDown 0.2s ease-out; }

.mkd-popular-tags { padding: 15px 20px; }
.mkd-popular-label { font-size: 11px; color: #888; font-weight: 700; margin-bottom: 10px; }
.mkd-trending-tag {
    display: inline-block; padding: 6px 12px; background: #f0f0f0;
    border-radius: 20px; font-size: 12px; margin: 0 5px 5px 0;
    color: #555; text-decoration: none; transition: background 0.2s;
}
.mkd-trending-tag:hover { background: #e0e0e0; }

.mkd-search-item {
    padding: 10px 20px; display: flex; align-items: center; gap: 16px;
    cursor: pointer; transition: background 0.2s; text-decoration: none;
    position: relative; color: inherit;
}
.mkd-search-item::after {
    content: ''; position: absolute; bottom: 0; left: 20px; right: 20px;
    height: 1px; background: #f5f5f5;
}
.mkd-search-item:last-child::after { display: none; }
.mkd-search-item:hover { background: #fafafa; }
.mkd-search-item.mkd-active { background: #f5f5f5; }

.mkd-s-thumb {
    width: 48px; height: 48px; object-fit: contain; background: #fff;
    border-radius: 8px; padding: 4px; border: 1px solid #eee;
}
.mkd-s-info { display: flex; flex-direction: column; flex-grow: 1; }
.mkd-s-header { display: flex; justify-content: space-between; align-items: baseline; }
.mkd-s-title { font-size: 14px; font-weight: 600; color: #111; }
.mkd-s-price { font-size: 14px; font-weight: 700; color: #111; }
.mkd-s-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mkd-s-cat { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.mkd-s-stock { font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 5px; }
.mkd-stock-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mkd-stock-in { color: #27ae60; }
.mkd-stock-in .mkd-stock-dot { background: #27ae60; }
.mkd-stock-pre { color: #f39c12; }
.mkd-stock-pre .mkd-stock-dot { background: #f39c12; }
.mkd-s-match { color: #000; background: rgba(242,236,25,0.4); padding: 0 2px; border-radius: 2px; }

.mkd-view-all {
    display: block; text-align: center; padding: 12px 20px;
    font-size: 13px; font-weight: 600; color: #111;
    text-decoration: none; border-top: 1px solid #eee; transition: background 0.2s;
    cursor: pointer;
}
.mkd-view-all:hover { background: #fafafa; }

.mkd-no-results { padding: 20px; text-align: center; color: #888; font-size: 13px; }
.mkd-search-spinner {
    position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border: 2px solid #ddd;
    border-top-color: var(--mk-yellow, #F2EC19); border-radius: 50%;
    animation: mkdSpin 0.6s linear infinite; display: none;
}
.mkd-search-spinner.active { display: block; }

/* Mobile search results */
.mkm-results-list .mkd-search-item { padding: 10px 0; }

@keyframes mkdSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mkdSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── Catalog product in search results ──────────── */
.mkd-s-badge {
    display: inline-block; font-size: 9px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px; margin-right: 6px;
    vertical-align: middle;
}
.mkd-badge-catalog {
    background: var(--mk-yellow, #F2EC19); color: #1a1a1a;
}
.mkd-stock-catalog .mkd-stock-dot {
    background: #ff9800;
}
.mkd-stock-catalog {
    color: #e65100;
}

/* ════════════════════════════════════════════════════════════════════
 * cart-drawer.css — sliding cart drawer, tabs, catalog items, modals
 *   NOTE: the .mk-upsell-* and .mk-modal-* rules below style the catalog
 *   callback / proforma modals, whose markup is still sourced from core's
 *   partials (Phase 5 restyle). Kept here so the pre-order flow stays styled.
 * ════════════════════════════════════════════════════════════════════ */

.mkc-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 1200; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.mkc-overlay.active { opacity: 1; pointer-events: auto; }

.mkc-drawer {
    position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw;
    height: 100vh; background: #fff; z-index: 1250;
    transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.25,1,0.5,1);
    display: flex; flex-direction: column; font-family: var(--sans);
}
.mkc-drawer.open { transform: translateX(0); }

.mkc-inner { display: flex; flex-direction: column; height: 100%; }

.mkc-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px; background: var(--mk-dark, #1a1a1a);
    color: #fff; flex-shrink: 0;
}
.mkc-header-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.mkc-header-count { font-weight: 400; color: #999; }
.mkc-close {
    color: #fff; background: none; border: none; cursor: pointer;
    opacity: 0.7; transition: opacity 0.2s; line-height: 1;
}
.mkc-close:hover { opacity: 1; }

.mkc-shipping {
    padding: 16px 24px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.mkc-shipping-text { font-size: 12px; color: #555; margin-bottom: 8px; font-weight: 500; }
.mkc-shipping-bar { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.mkc-shipping-fill { height: 100%; background: var(--mk-yellow, #F2EC19); border-radius: 2px; transition: width 0.5s ease; }

.mkc-items { flex: 1; overflow-y: auto; padding: 0; }
.mkc-loading { padding: 40px; text-align: center; color: #999; }

.mkc-item {
    display: flex; gap: 16px; padding: 16px 24px;
    border-bottom: 1px solid #f5f5f5; align-items: flex-start;
}
.mkc-item-img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; flex-shrink: 0; }
.mkc-item-info { flex: 1; min-width: 0; }
.mkc-item-name { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 2px; display: block; text-decoration: none; }
.mkc-item-name:hover { color: #000; }
.mkc-item-variation { font-size: 11px; color: #888; margin-bottom: 6px; }
.mkc-item-price { font-size: 13px; color: #555; }
.mkc-item-line-total { font-size: 14px; font-weight: 700; color: #111; }

.mkc-item-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.mkc-qty {
    display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden;
}
.mkc-qty-btn {
    width: 30px; height: 30px; border: none; background: #fafafa; cursor: pointer;
    font-size: 16px; color: #333; transition: background 0.2s; line-height: 1;
}
.mkc-qty-btn:hover { background: #eee; }
.mkc-qty-val { width: 35px; text-align: center; font-size: 13px; font-weight: 600; border: none; outline: none; }
.mkc-item-remove {
    font-size: 11px; color: #ccc; background: none; border: none; cursor: pointer;
    font-weight: 500; transition: color 0.2s; font-family: inherit;
}
.mkc-item-remove:hover { color: #d63638; }

.mkc-footer {
    padding: 20px 24px; border-top: 1px solid #eee; background: #fafafa; flex-shrink: 0;
}
.mkc-subtotal {
    display: flex; justify-content: space-between; font-size: 16px;
    font-weight: 700; margin-bottom: 4px;
}
.mkc-shipping-note { font-size: 11px; color: #888; margin-bottom: 16px; }
.mkc-actions { display: flex; gap: 10px; }

.mkc-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 14px 20px; border-radius: 10px; font-size: 14px; font-weight: 700;
    text-decoration: none; text-align: center; transition: all 0.2s; cursor: pointer;
    border: none; font-family: inherit; gap: 6px;
}
.mkc-btn svg { flex-shrink: 0; }
.mkc-btn--primary { background: var(--mk-dark, #1a1a1a); color: #fff; }
.mkc-btn--primary:hover { background: #000; }
.mkc-btn--secondary { background: #fff; color: #111; border: 1px solid #ddd; }
.mkc-btn--secondary:hover { border-color: #999; }

.mkc-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px 24px; text-align: center; color: #999;
}
.mkc-empty svg { margin-bottom: 20px; opacity: 0.3; }
.mkc-empty-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
.mkc-empty-text { font-size: 13px; margin-bottom: 24px; }
.mkc-empty .mkc-btn { width: auto; padding: 12px 32px; }

@media (max-width: 768px) {
    .mkc-drawer { width: 100%; max-width: 100%; }
}

/* ══ Cart Tabs ═══════════════════════════════════════ */

.mkc-tabs {
    display: flex; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.mkc-tab {
    flex: 1; padding: 12px 16px; background: #fafafa; border: none;
    cursor: pointer; text-align: left; position: relative;
    transition: background 0.2s; font-family: inherit;
    border-bottom: 3px solid transparent;
}
.mkc-tab:first-child { border-right: 1px solid #eee; }
.mkc-tab:hover { background: #f0f0f0; }
.mkc-tab.active {
    background: #fff;
    border-bottom-color: var(--mk-yellow, #F2EC19);
}
.mkc-tab-title {
    display: block; font-size: 12px; font-weight: 700;
    color: #333; margin-bottom: 2px;
}
.mkc-tab-sub {
    display: block; font-size: 10px; color: #999;
    line-height: 1.3;
}
.mkc-tab-badge {
    position: absolute; top: 8px; right: 10px;
    background: var(--mk-dark, #1a1a1a); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 9px; display: flex; align-items: center;
    justify-content: center; padding: 0 5px;
}

.mkc-tab-panel {
    display: none; flex-direction: column; flex: 1;
    overflow: hidden; min-height: 0;
}
.mkc-tab-panel.active {
    display: flex;
}
.mkc-tab-panel .mkc-items {
    flex: 1; overflow-y: auto; min-height: 0;
}
.mkc-tab-panel .mkc-footer {
    flex-shrink: 0;
}
.mkc-tab-panel .mkc-empty {
    flex: 1;
}

/* ══ Tab 2 — Catalog Cart Items ═════════════════════ */

.mkc-item--catalog .mkc-item-color {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #666; margin-bottom: 4px;
}
.mkc-item-color-dot {
    width: 18px; height: 18px; border-radius: 4px;
    background: #f5f5f5 center / cover no-repeat;
    border: 1px solid rgba(0,0,0,.1); flex-shrink: 0;
    display: inline-block;
}
.mkc-item-sections {
    display: flex; align-items: center; gap: 6px; margin-right: 8px;
}
.mkc-item-sec-label {
    font-size: 10px; color: #888; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.mkc-item--unavailable {
    opacity: 0.5;
}
.mkc-item--unavailable .mkc-item-name {
    text-decoration: line-through;
}
.mkc-item-unavailable-msg {
    font-size: 11px; color: #d63638; font-weight: 600;
    margin: 4px 0;
}

/* Notices */
.mkc-notice {
    padding: 10px 24px; font-size: 12px; font-weight: 500;
    border-bottom: 1px solid #eee;
}
.mkc-notice--info { background: #e8f5e9; color: #2e7d32; }
.mkc-notice--warn { background: #fff3e0; color: #e65100; }

/* Tab 2 footer — inherits base button styles, no overrides needed */

/* ══ Upsell Mini-Configurator Modal ═════════════════ */

.mk-upsell-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 1300; opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.mk-upsell-modal-overlay.open { opacity: 1; pointer-events: auto; }

.mk-upsell-modal {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
    z-index: 1350; background: #fff; border-radius: 20px 20px 0 0;
    width: 100%; max-width: 420px; box-shadow: 0 -10px 40px rgba(0,0,0,.15);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
    padding: 24px;
}
.mk-upsell-modal.open { transform: translateX(-50%) translateY(0); }

.mk-upsell-modal-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.mk-upsell-modal-thumb {
    width: 60px; height: 60px; border-radius: 8px; background: #f5f3ef;
    overflow: hidden; flex-shrink: 0;
}
.mk-upsell-modal-thumb img {
    width: 100%; height: 100%; object-fit: contain;
}
.mk-upsell-modal-header h4 { font-size: 16px; font-weight: 700; margin: 0; flex: 1; }
.mk-upsell-modal-close {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: #f0f0f0; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

.mk-upsell-modal-body { margin-bottom: 16px; }

.mk-upsell-modal-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mk-upsell-modal-price { font-size: 20px; font-weight: 900; }
.mk-upsell-modal-add {
    height: 44px; padding: 0 24px; font-size: 13px;
}

/* ══ Shared Modal System ════════════════════════════ */

.mk-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1400;
    opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(4px);
}
.mk-modal-overlay.open { opacity: 1; pointer-events: auto; }

.mk-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.92);
    z-index: 1450; background: #fff; border-radius: 16px;
    width: 92%; max-width: 440px; max-height: 90vh;
    box-shadow: 0 30px 80px rgba(0,0,0,.2);
    opacity: 0; pointer-events: none; transition: all .35s cubic-bezier(.16,1,.3,1);
    overflow-y: auto;
}
.mk-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.mk-modal--wide { max-width: 520px; }

.mk-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid #eee;
}
.mk-modal-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
.mk-modal-close {
    width: 32px; height: 32px; border-radius: 50%; border: none; background: #f0f0f0;
    cursor: pointer; font-size: 18px; color: #666; display: flex; align-items: center;
    justify-content: center; transition: background .2s;
}
.mk-modal-close:hover { background: #e0e0e0; }

.mk-modal-body { padding: 20px 24px; }
.mk-modal-footer { padding: 16px 24px 20px; border-top: 1px solid #eee; }
.mk-modal-footer .mkc-btn { width: 100%; justify-content: center; }

.mk-modal-field { margin-bottom: 12px; }
.mk-modal-field label {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #999; margin-bottom: 4px;
}
.mk-modal-field input,
.mk-modal-field textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 13px; font-family: inherit; outline: none; transition: border-color .2s;
}
.mk-modal-field input:focus,
.mk-modal-field textarea:focus { border-color: var(--mk-dark, #1a1a1a); }

.mk-modal-row { display: flex; gap: 12px; }
.mk-modal-row .mk-modal-field { flex: 1; }

.mk-modal-error {
    background: #fff3e0; color: #e65100; padding: 10px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600; margin-top: 8px;
}

.mk-modal-success { padding: 0; }

/* Invoice type toggle */
.mk-inv-type-toggle {
    display: flex; gap: 4px; margin-bottom: 16px; background: #f5f5f5;
    padding: 4px; border-radius: 10px;
}
.mk-inv-type-btn {
    flex: 1; padding: 8px 12px; border: none; background: none; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
    color: #666; transition: all .2s;
}
.mk-inv-type-btn.active {
    background: #fff; color: #1a1a1a; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ════════════════════════════════════════════════════════════════════
 * cart-toast.css — "added to cart" toast notifications
 * ════════════════════════════════════════════════════════════════════ */

.mkc-toast-container {
    position: fixed; bottom: 20px; left: 20px; z-index: 1150;
    display: flex; flex-direction: column-reverse; gap: 10px;
    pointer-events: none;
}
.mkc-toast {
    background: #fff; border-radius: 12px; padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px;
    min-width: 280px; max-width: 380px; pointer-events: auto;
    animation: mkToastIn 0.3s ease-out; font-family: var(--sans);
    border-left: 4px solid var(--mk-yellow, #F2EC19);
}
.mkc-toast.removing { animation: mkToastOut 0.3s ease-in forwards; }

.mkc-toast-check {
    width: 24px; height: 24px; background: var(--mk-yellow, #F2EC19);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 12px; font-weight: 700;
}
.mkc-toast-body { flex: 1; }
.mkc-toast-name { font-size: 13px; font-weight: 600; color: #111; }
.mkc-toast-label { font-size: 11px; color: #888; }
.mkc-toast-link {
    font-size: 12px; font-weight: 700; color: var(--mk-dark, #1a1a1a);
    text-decoration: underline; cursor: pointer; white-space: nowrap;
    background: none; border: none; font-family: inherit;
}

@media (max-width: 768px) {
    .mkc-toast-container { left: 50%; transform: translateX(-50%); bottom: 100px; }
    .mkc-toast { min-width: 260px; }
}

@keyframes mkToastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mkToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }