/* ============================================================
   CrumpIT — Components (shared shell chrome)
   Navbar · footer · buttons · cards · forms · modal · toast ·
   badges · blade motif. Defined ONCE, reused on every page.
   ============================================================ */

@layer components {

  /* =========================================================
     BUTTONS
     ========================================================= */
  .btn {
    --btn-py: 0.72rem;
    --btn-px: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--btn-py) var(--btn-px);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-16);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease),
                background-color var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
  }
  .btn:hover  { transform: scale(1.02); }
  .btn:active { transform: scale(0.98); }

  .btn-sm { --btn-py: 0.5rem; --btn-px: 1rem; font-size: var(--fs-14); }

  .btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--glow-sm);
  }
  .btn-primary:hover { background: var(--accent-dim); box-shadow: var(--glow-md); }

  .btn-secondary {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
  }
  .btn-secondary:hover { background: var(--accent); color: #fff; box-shadow: var(--glow-sm); }

  .btn-danger {
    background: var(--danger);
    color: #fff;
  }
  .btn-danger:hover { background: #c93030; box-shadow: 0 0 18px var(--danger-16); }

  /* Ghost: text + arrow that slides right on hover (no scale) */
  .btn-ghost {
    background: transparent;
    color: var(--text);
    padding-inline: var(--sp-2);
  }
  .btn-ghost .btn-arrow { transition: transform var(--dur-base) var(--ease); }
  .btn-ghost:hover { color: var(--accent); transform: none; }
  .btn-ghost:hover .btn-arrow { transform: translateX(5px); }

  /* =========================================================
     BLADE MOTIF  (signature 30deg cut + charged glowing edge)
     ========================================================= */
  .blade-tr { clip-path: var(--blade-md); }   /* plain corner slice */
  .blade-tr--sm { clip-path: var(--blade-sm); }
  .blade-tr--lg { clip-path: var(--blade-lg); }

  /* Charged blade panel: accent underlay shows through as a
     luminous 1.5px edge on every side incl. the diagonal.
     Markup: <div class="blade-panel"><div class="blade-panel__inner">…</div></div> */
  .blade-panel {
    position: relative;
    clip-path: var(--blade-md);
    background: var(--accent);
    padding: 1.5px;
    filter: drop-shadow(0 0 16px var(--accent-glow));
  }
  .blade-panel__inner {
    clip-path: var(--blade-md);
    background: var(--surface);
    height: 100%;
    padding: var(--sp-8);
  }

  /* Full-width 30deg divider with a glowing accent hairline */
  .blade-divider {
    position: relative;
    height: 64px;
    background: var(--surface);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
  }
  .blade-divider--flip { clip-path: polygon(0 0, 100% 100%, 0 100%); }

  /* =========================================================
     HEADER / NAV
     ========================================================= */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease);
  }
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom-color: var(--border);
  }

  .nav {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-6);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-4);
  }

  /* Logo */
  .logo-wrap {
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-sm);
  }
  .logo-wrap img { height: 38px; width: auto; }

  .nav-links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
  .nav-link {
    position: relative;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-16);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--sp-2) 0;
    transition: color var(--dur-base) var(--ease);
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--accent);
    box-shadow: var(--glow-sm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease);
  }
  .nav-link:hover { color: var(--text); }
  .nav-link:hover::after,
  .nav-link.is-active::after { transform: scaleX(1); }
  .nav-link.is-active { color: var(--text); }

  .nav-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .nav-auth { display: flex; align-items: center; gap: var(--sp-2); }

  .icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: color var(--dur-base) var(--ease),
                background-color var(--dur-base) var(--ease);
  }
  .icon-btn:hover { color: var(--text); background: var(--surface-alt); }
  .icon-btn svg { width: 20px; height: 20px; }

  /* Theme toggle icon swap */
  .theme-toggle .icon-moon { display: none; }
  .theme-toggle .icon-sun  { display: block; }
  [data-theme="light"] .theme-toggle .icon-sun  { display: none; }
  [data-theme="light"] .theme-toggle .icon-moon { display: block; }

  /* Cart count badge */
  .cart-count {
    position: absolute;
    top: 1px; right: 1px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    border-radius: var(--r-pill);
    transform: scale(0);
    transition: transform var(--dur-base) var(--spring);
  }
  .cart-count.has-items { transform: scale(1); }

  /* Hamburger (mobile only) */
  .hamburger {
    display: none;
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
  }
  .hamburger span {
    position: absolute;
    left: 9px; right: 9px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease),
                opacity var(--dur-fast) var(--ease),
                top var(--dur-base) var(--ease);
  }
  .hamburger span:nth-child(1) { top: 13px; }
  .hamburger span:nth-child(2) { top: 19px; }
  .hamburger span:nth-child(3) { top: 25px; }
  .hamburger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .hamburger.is-open span:nth-child(2) { opacity: 0; }
  .hamburger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

  /* Full-screen mobile overlay */
  .mobile-nav {
    position: fixed;
    inset: 0;
    /* Below the header so the morphed hamburger (X) stays clickable to close */
    z-index: calc(var(--z-header) - 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    padding: calc(var(--header-h) + var(--sp-8)) var(--sp-8) var(--sp-10);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease),
                opacity var(--dur-base) var(--ease),
                visibility 0s linear var(--dur-slow);
  }
  .mobile-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease),
                opacity var(--dur-base) var(--ease),
                visibility 0s;
  }
  .mobile-nav__link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-24);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: var(--text);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(16px);
  }
  .mobile-nav.is-open .mobile-nav__link {
    animation: mnav-in var(--dur-slow) var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  }
  .mobile-nav__link.is-active { color: var(--accent); }
  @keyframes mnav-in { to { opacity: 1; transform: translateY(0); } }

  .mobile-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
  }

  /* =========================================================
     FOOTER
     ========================================================= */
  .site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: var(--sp-24);
  }
  .footer-grid {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-16) var(--sp-6) var(--sp-10);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: var(--sp-12);
  }
  .footer-brand img { height: 40px; width: auto; }
  .footer-slogan {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-18);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    margin-top: var(--sp-5);
  }
  .footer-slogan .u-accent { color: var(--accent); }
  .footer-note { color: var(--text-muted); margin-top: var(--sp-3); font-size: var(--fs-14); }

  .footer-col h4 {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--fs-14);
    letter-spacing: var(--ls-ui);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
  }
  .footer-list li { margin-bottom: var(--sp-3); }
  .footer-list a,
  .footer-contact a {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 500;
    transition: color var(--dur-base) var(--ease);
  }
  .footer-list a:hover,
  .footer-contact a:hover { color: var(--accent); }
  .footer-contact li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 500;
  }
  .footer-contact svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

  .footer-bottom {
    border-top: 1px solid var(--border);
  }
  .footer-bottom__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-family: var(--font-ui);
    font-size: var(--fs-14);
    color: var(--text-muted);
  }
  .footer-bottom__inner a:hover { color: var(--accent); }
  .footer-built { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .footer-built__mark { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
  .footer-built a { color: var(--text); font-weight: 600; }
  .footer-built a:hover { color: var(--accent); }

  /* =========================================================
     CARDS
     ========================================================= */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-8);
    transition: transform var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
  }
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-24);
    box-shadow: var(--shadow-1);
  }
  .card.blade-tr { border-radius: 0; }   /* corner cut replaces radius */
  .card__title {
    font-family: var(--font-display);
    font-size: var(--fs-20);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
  }
  .card__body { color: var(--text-muted); }

  /* =========================================================
     FORMS
     ========================================================= */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
  }
  .field > label {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-14);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .input, .textarea, .select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-16);
    transition: border-color var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease),
                background-color var(--dur-base) var(--ease);
  }
  .input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; }
  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-14);
  }
  .textarea { min-height: 120px; resize: vertical; }

  .field.has-error .input,
  .field.has-error .textarea,
  .field.has-error .select {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-16);
  }
  .field-error {
    display: none;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--fs-14);
    color: var(--danger);
  }
  .field.has-error .field-error { display: block; }

  /* =========================================================
     MODAL / DIALOG  (built by ui.js — replaces native dialogs)
     ========================================================= */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    background: rgba(4, 5, 8, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease),
                visibility 0s linear var(--dur-base);
  }
  .modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease), visibility 0s;
  }
  .modal {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100dvh - 2 * var(--sp-6));
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    transform: translateY(16px) scale(0.98);
    transition: transform var(--dur-base) var(--spring);
  }
  .modal:focus { outline: none; }
  .modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
  .modal.modal--wide { width: min(720px, 100%); }
  /* accent blade strip along the top edge */
  .modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 68%);
  }
  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-6) var(--sp-2);
  }
  .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-20);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
  }
  .modal-close {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    transition: color var(--dur-base) var(--ease),
                background-color var(--dur-base) var(--ease);
  }
  .modal-close:hover { color: var(--text); background: var(--surface-alt); }
  .modal-close svg { width: 20px; height: 20px; }
  .modal-body {
    padding: var(--sp-2) var(--sp-6) var(--sp-4);
    color: var(--text-muted);
  }
  .modal-message { color: var(--text-muted); }
  .modal-body .input { margin-top: var(--sp-3); }
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
    flex-wrap: wrap;
  }

  /* =========================================================
     TOASTS  (built by ui.js)
     ========================================================= */
  .toast-region {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: min(360px, calc(100vw - 2 * var(--sp-6)));
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-1);
    transform: translateX(120%);
    opacity: 0;
    transition: transform var(--dur-base) var(--spring),
                opacity var(--dur-base) var(--ease);
  }
  .toast.is-visible { transform: translateX(0); opacity: 1; }
  .toast.is-leaving { transform: translateX(120%); opacity: 0; }
  .toast--success { border-left-color: var(--success); }
  .toast--warning { border-left-color: var(--warning); }
  .toast--danger  { border-left-color: var(--danger); }
  .toast__icon { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
  .toast__icon svg { width: 20px; height: 20px; }
  .toast--success .toast__icon { color: var(--success); }
  .toast--warning .toast__icon { color: var(--warning); }
  .toast--danger  .toast__icon { color: var(--danger); }
  .toast__body { flex: 1; min-width: 0; }
  .toast__title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--fs-16);
    letter-spacing: 0.02em;
    color: var(--text);
  }
  .toast__msg { font-size: var(--fs-14); color: var(--text-muted); }
  .toast__close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--r-xs);
    color: var(--text-muted);
    display: grid;
    place-items: center;
  }
  .toast__close:hover { color: var(--text); background: var(--surface-alt); }
  .toast__close svg { width: 16px; height: 16px; }

  /* =========================================================
     BADGES / CHIPS
     ========================================================= */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.32rem 0.7rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-12);
    letter-spacing: var(--ls-ui);
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-14);
    border-radius: var(--r-pill);
  }
  .badge--success { color: var(--success); background: rgba(0, 196, 140, 0.14); }
  .badge--warning { color: var(--warning); background: rgba(255, 180, 0, 0.14); }
  .badge--danger  { color: var(--danger);  background: var(--danger-16); }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.4rem 0.85rem;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--fs-14);
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
  }

  /* =========================================================
     SLIDE-IN CART DRAWER
     Opened by a hidden checkbox (#cart-drawer-cb) that the header
     cart <label> toggles — pure CSS, so it works even when a caching
     plugin delays or strips JavaScript. `.is-open` stays as a
     JS-driven fallback / add-to-cart auto-open.
     ========================================================= */
  .cart-drawer-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    visibility: hidden;
    pointer-events: none;
  }
  .drawer.is-open,
  .cart-drawer-cb:checked ~ .drawer { visibility: visible; pointer-events: auto; }
  .drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 8, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease);
  }
  .drawer.is-open .drawer__backdrop,
  .cart-drawer-cb:checked ~ .drawer .drawer__backdrop { opacity: 1; }
  .drawer__panel {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease);
  }
  .drawer.is-open .drawer__panel,
  .cart-drawer-cb:checked ~ .drawer .drawer__panel { transform: translateX(0); }
  .drawer__panel:focus { outline: none; }
  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-6);
    border-bottom: 1px solid var(--border);
  }
  .drawer__title {
    font-family: var(--font-display);
    font-size: var(--fs-20);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
  }
  .drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6); }
  .drawer__items { display: flex; flex-direction: column; gap: var(--sp-4); }
  .cart-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
  }
  .cart-item__thumb {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--surface-alt);
    color: var(--accent);
    border: 1px solid var(--border);
  }
  .cart-item__thumb svg { width: 24px; height: 24px; }
  .cart-item__name { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-14); }
  .cart-item__meta { color: var(--text-muted); font-size: var(--fs-14); margin-top: 2px; }
  .cart-item__qty { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
  .qty-btn {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border-radius: var(--r-xs);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 16px; line-height: 1;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  }
  .qty-btn:hover { border-color: var(--accent); color: var(--accent); }
  .cart-item__qty output { min-width: 20px; text-align: center; font-family: var(--font-ui); font-weight: 600; }
  .cart-item__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
  .cart-item__price { font-family: var(--font-display); font-weight: 700; }
  .cart-item__remove {
    font-family: var(--font-ui);
    font-size: var(--fs-12);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur-base) var(--ease);
  }
  .cart-item__remove:hover { color: var(--danger); }
  .cart-item__edit {
    font-family: var(--font-ui);
    font-size: var(--fs-12);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    transition: color var(--dur-base) var(--ease);
  }
  .cart-item__edit:hover { text-decoration: underline; }
  .drawer__empty { text-align: center; color: var(--text-muted); padding: var(--sp-16) var(--sp-4); }
  .drawer__empty-sub { font-size: var(--fs-14); margin-top: var(--sp-2); }
  .drawer__foot { padding: var(--sp-6); border-top: 1px solid var(--border); }
  .drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sp-4);
    font-family: var(--font-ui);
  }
  .drawer__subtotal span:first-child { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-14); }
  #cart-subtotal { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); color: var(--accent); }
  .drawer__weight {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-family: var(--font-ui); font-size: var(--fs-14); color: var(--text-muted);
  }
  .drawer__weight[hidden] { display: none; }
  .drawer__weight .val { color: var(--text); font-weight: 600; }
  .drawer__checkout { width: 100%; }
  .drawer__note { margin-top: var(--sp-3); font-size: var(--fs-12); color: var(--text-muted); text-align: center; }

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width: 1200px) {
    .nav-auth { display: none; }   /* login/signup move into the mobile overlay */
  }
  @media (max-width: 1024px) {
    .nav-links { display: none; }
    .hamburger { display: block; }
  }
  @media (max-width: 980px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  }
  @media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .toast-region {
      left: var(--sp-4);
      right: var(--sp-4);
      bottom: var(--sp-4);
      width: auto;
    }
    .footer-bottom__inner { justify-content: flex-start; }
  }
}