:root {
  --rust-red: #cd412b;
  --charcoal: #1e2020;
  --grey: #a4a6a7;
  --cream: #e4dad1;
  --green: #738d45;
  --orange: #c26d33;
  --blue: #1f6ba0;
  --border-soft: rgba(228, 218, 209, 0.2);
  --border-strong: rgba(228, 218, 209, 0.38);
  --surface: rgba(30, 32, 32, 0.8);
  --surface-hover: rgba(30, 32, 32, 0.8);
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  background: var(--charcoal);
  color: var(--cream);
  line-height: 1.45;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 240ms ease;
}
.site-background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(30, 32, 32, 0.78), rgba(30, 32, 32, 0.78)), var(--store-bg-image);
  background-position: center;
  background-size: cover;
  opacity: var(--store-bg-opacity, 0.28);
  filter: blur(var(--store-bg-blur, 2px));
  transform: scale(1.03);
}

body,
body * {
  cursor: none !important;
}

input,
textarea,
select,
[contenteditable="true"] {
  cursor: text !important;
}

.cursor-overlay {
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --cursor-left: 50vw;
  --cursor-right: 50vw;
  --cursor-top: 50vh;
  --cursor-bottom: 50vh;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}
.cursor-overlay.is-visible { opacity: 1; }
.cursor-overlay.is-scrolling { opacity: 0 !important; }
.cursor-line {
  position: absolute;
  background: rgba(228, 218, 209, 0.26);
}
.cursor-line--left {
  left: 0;
  top: var(--cursor-y);
  width: var(--cursor-left);
  height: 1px;
  transform: translateY(-0.5px);
}
.cursor-line--right {
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: var(--cursor-right);
  height: 1px;
  transform: translateY(-0.5px);
}
.cursor-line--top {
  left: var(--cursor-x);
  top: 0;
  width: 1px;
  height: var(--cursor-top);
  transform: translateX(-0.5px);
}
.cursor-line--bottom {
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 1px;
  height: var(--cursor-bottom);
  transform: translateX(-0.5px);
}

.custom-cursor {
  position: absolute;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 120ms ease;
}
.custom-cursor__ring {
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(228, 218, 209, 0.56);
  border-radius: 50%;
}
.custom-cursor__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rust-red);
  transform: translate(-50%, -50%);
}
.custom-cursor.is-hover {
  transform: translate(-50%, -50%) scale(1.18);
}
.custom-cursor.is-hover .custom-cursor__ring {
  border-color: rgba(205, 65, 43, 0.78);
}
.custom-cursor.is-pressed {
  transform: translate(-50%, -50%) scale(0.9);
}

body.page-ready { opacity: 1; }
a { color: var(--cream); transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base), opacity var(--transition-base); }
a:hover, a:focus-visible { color: var(--cream); }

.container { width: min(1200px, calc(100% - 2.5rem)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 3200;
  isolation: isolate;
  background: rgba(30, 32, 32, 0.94);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--border-soft);
  overflow: visible;
}

.site-header nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 66px; overflow: visible; }

.nav-brand { text-decoration: none; display: inline-flex; align-items: center; gap: 0.52rem; min-height: 40px; }
.brand-text { text-transform: uppercase; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.035em; }
.brand-name { text-transform: uppercase; font-size: 1.1rem; font-weight: 500; color: var(--cream); line-height: 1; }
.brand-logo { display: block; max-height: 44px; width: auto; object-fit: contain; }

.nav-actions { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; align-items: center; position: relative; z-index: 1; }
.icon-btn { text-decoration: none; color: var(--cream); border: 1px solid var(--border-soft); border-radius: 999px; min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; position: relative; background: rgba(30, 32, 32, 0.9); font-size: 1rem; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.icon-btn:hover, .icon-btn:focus-visible, .nav-dropdown.open .icon-btn { border-color: var(--rust-red); background: rgba(205, 65, 43, 0.08); color: var(--cream); transform: translateY(-1px); }
.nav-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-badge { position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--rust-red); color: var(--cream); font-size: 0.68rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.nav-dropdown { position: relative; z-index: 20; }
.nav-dropdown.open { z-index: 50; }
.nav-dropdown::after { content: ""; position: absolute; inset: 100% 0 auto auto; width: 100%; height: 12px; pointer-events: none; }
.dropdown-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: rgba(30, 32, 32, 0.99); padding: 0.55rem; z-index: 3300; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(8px) scale(0.985); visibility: hidden; pointer-events: none; transform-origin: top right; transition: opacity 190ms ease, transform 220ms ease, visibility 220ms step-end; }
.nav-dropdown.open .dropdown-panel { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition: opacity 220ms ease, transform 260ms ease, visibility 0ms step-start; }
.dropdown-link { display: block; text-decoration: none; padding: 0.45rem; color: var(--grey); border-radius: var(--radius-sm); }
.dropdown-link:hover { background: var(--surface); color: var(--cream); }
.compact-dropdown-link { font-size: 0.76rem; padding: 0.2rem 0.3rem; }
.dropdown-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; max-height: 300px; overflow: auto; }
.dropdown-list li { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.45rem; }
.dropdown-list li.is-unread { border-color: var(--rust-red); }
.dropdown-list p { margin: 0; font-size: 0.85rem; }
.dropdown-header-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }

.top-promo-banner { background: rgba(205, 65, 43, 0.13); border-bottom: 1px solid rgba(205, 65, 43, 0.45); }
.top-promo-inner { min-height: 40px; display: flex; justify-content: space-between; gap: 1rem; align-items: center; overflow: visible; }
.promo-message-wrap { display: flex; gap: 2rem; align-items: center; white-space: nowrap; overflow: hidden; flex: 1; min-width: 0; }
.promo-marquee { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.promo-marquee-track { width: max-content; display: flex; align-items: center; gap: 0; animation: promoMarquee 16s linear infinite; will-change: transform; }
.promo-message-group { display: inline-flex; align-items: center; gap: 1rem; white-space: nowrap; padding-right: 2rem; flex-shrink: 0; }
.promo-message { text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.05em; }
.promo-message-separator { color: var(--grey); opacity: 0.75; }
.promo-actions { display: flex; gap: 0.5rem; align-items: center; }
.promo-countdown { font-size: 0.78rem; color: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 0.22rem 0.4rem; }
.promo-cta { font-size: 0.65rem; padding: 0.24rem 0.42rem; min-height: 27px; line-height: 1.05; border-width: 1px; }

.promo-popup { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 260; width: min(285px, calc(100% - 28px)); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: rgba(30, 32, 32, 0.97); padding: 0.72rem; display: grid; gap: 0.28rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); animation: fadeUp 260ms ease; }
.promo-popup-title { margin: 0; font-weight: 500; text-transform: uppercase; font-size: 0.86rem; }
.promo-popup-close { position: absolute; top: 5px; right: 7px; background: transparent; border: 0; color: var(--grey); font-size: 1rem; }
.promo-code-row { display: flex; gap: 0.42rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.06rem; }
.promo-code-chip { margin: 0; border: 1px dashed var(--rust-red); border-radius: var(--radius-sm); padding: 0.3rem 0.45rem; width: fit-content; font-weight: 600; letter-spacing: 0.03em; }
.promo-copy-btn { min-width: 32px; height: 32px; }
.promo-copy-btn.is-copied { border-color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent); }
.promo-copy-feedback { margin: 0; min-height: 0.74em; color: var(--grey); font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; }
.promo-copy-feedback.is-success { color: var(--green); }
.product-mini-summary { line-height: 1.32; min-height: 2.6em; margin: 0.2rem 0 0.24rem; }
.notifications-panel { width: min(340px, 88vw); }
.mini-cart-panel { width: min(320px, 90vw); }
.mini-cart-list { max-height: 210px; }
.mini-cart-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.mini-cart-remove-form { margin: 0; }
.mini-cart-remove-btn { min-width: 30px; width: 30px; height: 30px; border-radius: var(--radius-sm); overflow: hidden; }
.mini-cart-remove-btn .nav-icon { width: 15px; height: 15px; transition: opacity 170ms ease, transform 190ms ease, color 170ms ease; }
.mini-cart-remove-btn .mini-cart-remove-loader { position: absolute; opacity: 0; transform: scale(0.8); }
.mini-cart-remove-btn:hover .mini-cart-remove-icon,
.mini-cart-remove-btn:focus-visible .mini-cart-remove-icon { transform: translateY(-1px); color: var(--rust-red); }
.mini-cart-remove-btn.is-removing { border-color: var(--rust-red); background: rgba(205, 65, 43, 0.14); }
.mini-cart-remove-btn.is-removing .mini-cart-remove-icon { opacity: 0; transform: scale(0.78); }
.mini-cart-remove-btn.is-removing .mini-cart-remove-loader { opacity: 1; transform: scale(1); animation: iconSpin 760ms linear infinite; }
.mini-cart-total { margin: 0.5rem 0 0.35rem; font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mini-cart-cta { width: 100%; }

.admin-layout { padding-top: 0.75rem; }
.admin-sidebar { display: flex; gap: 0.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.75rem; }
.admin-side-link { text-decoration: none; color: var(--grey); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: 0.8rem; padding: 0.4rem 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-side-link.active, .admin-side-link:hover, .admin-side-link:focus-visible { color: var(--cream); border-color: var(--rust-red); background: var(--surface); }

main { padding: 2.2rem 0 2.8rem; }

h1, h2, h3, h4, h5, h6, .btn, label, summary, th, .status-badge, legend, .footer-brand { text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500; }
h1 { margin: 0 0 0.85rem; font-size: clamp(1.45rem, 1.8vw, 1.95rem); }
h2 { margin: 0 0 0.65rem; font-size: clamp(1.1rem, 1.4vw, 1.35rem); }
p { margin: 0.4rem 0; }

.section-header-row, .admin-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.btn:disabled { opacity: 0.65; transform: none; box-shadow: none; }

.btn-primary { background: var(--rust-red); color: var(--cream); border-color: var(--rust-red); }
.btn-primary:hover, .btn-primary:focus-visible { background: color-mix(in srgb, var(--rust-red) 85%, var(--charcoal)); }
.btn-secondary { background: transparent; color: var(--grey); border-color: var(--grey); width: 120px}
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--cream); border-color: var(--cream); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: rgba(30, 32, 32, 0.72); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--border-soft); text-align: left; padding: 0.8rem; vertical-align: middle; }
.admin-table th { color: var(--grey); font-weight: 500; font-size: 0.77rem; }
.admin-table tbody tr:hover td { background: rgba(164, 166, 167, 0.06); }
.actions-cell { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.actions-cell form { margin: 0; }

.status-badge { display: inline-block; width: fit-content; padding: 0.24rem 0.55rem; border: 1px solid; border-radius: var(--radius-sm); font-size: 0.7rem; }
.status-enabled { color: var(--green); border-color: var(--green); }
.status-disabled { color: var(--orange); border-color: var(--orange); }

.admin-shell h1 { margin: 0; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
.admin-stat-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 0.95rem; background: var(--surface); min-height: 124px; display: grid; align-content: space-between; }
.admin-stat-card p { margin: 0; color: var(--grey); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; }
.admin-stat-card h2 { margin: 0.5rem 0 0; color: var(--rust-red); }

.admin-panels-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0.95rem; align-items: start; }
.admin-panel { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 0.9rem; background: var(--surface); }
.compact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.compact-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 0.35rem; }
.compact-list strong { color: var(--rust-red); }

.admin-form-shell { max-width: 760px; }
.admin-form { display: grid; gap: 0.66rem; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1rem; background: var(--surface); }
.admin-form label { color: var(--grey); font-size: 0.77rem; margin-top: 0.28rem; }
.variant-admin-section { margin-top: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); padding: 0.9rem; }

.input-control {
  width: 100%;
  background: rgba(30, 32, 32, 0.8);
  color: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input-control:focus-visible { outline: none; border-color: var(--rust-red); background: rgba(30, 32, 32, 0.95); box-shadow: 0 0 0 2px rgba(205, 65, 43, 0.22); }
.form-error { margin: 0; color: var(--orange); font-size: 0.84rem; }
.muted-text { color: var(--grey); }
.flash-stack { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.storefront-shell { margin-bottom: 2rem; }
.auth-shell { max-width: 620px; display: grid; gap: 0.9rem; }
.auth-tabs { display: flex; gap: 0.5rem; }
.catalog-filters { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.active-chip { border-color: var(--rust-red); color: var(--cream); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; align-items: stretch; }
.product-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 0.8rem; background: var(--surface); display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; min-height: 100%; transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base); }
.product-card:hover, .product-card:focus-within {border: 2px solid var(--rust-red); background: var(--surface-hover); transform: translateY(-2px); }
.product-card a { text-decoration: none; }
.product-card h2, .product-card h3 { margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.25; }
.product-media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: rgba(30, 32, 32, 0.45); }
.product-media img, .product-main-image, .thumb-row img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid rgba(228, 218, 209, 0.14); border-radius: var(--radius-sm); }
.product-main-image { transition: opacity 180ms ease; }
.product-main-image.is-swapping { opacity: 0.72; }
.price-row { display: flex; align-items: baseline; gap: 0.55rem; margin: 0; }
.old-price { color: var(--grey); text-decoration: line-through; font-size: 0.9rem; opacity: 0.8; }

.product-layout, .checkout-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; }
.product-gallery { display: grid; gap: 0.65rem; }
.thumb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.thumb-btn { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; padding: 0; background: transparent; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.thumb-btn.active, .thumb-btn:hover, .thumb-btn:focus-visible { border-color: var(--rust-red); transform: translateY(-1px); }

.stack-row { display: grid; gap: 0.55rem; margin: 1rem 0; }
.accordion { border-top: 1px solid var(--border-soft); }
.accordion-item { border-bottom: 1px solid var(--border-soft); }
.accordion-heading { margin: 0; }
.accordion-trigger { width: 100%; border: 0; background: transparent; color: var(--cream); padding: 0.62rem 0; font: inherit; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; display: flex; justify-content: space-between; align-items: center; }
.accordion-trigger::after { content: "+"; color: var(--grey); transition: transform var(--transition-base), color var(--transition-base); font-size: 1rem; line-height: 1; }
.accordion-item.is-open .accordion-trigger { color: var(--rust-red); }
.accordion-item.is-open .accordion-trigger::after { content: "−"; color: var(--rust-red); transform: rotate(180deg); }
.accordion-panel { overflow: hidden; height: 0; opacity: 0; margin-top: 0; transition: height 300ms ease, opacity 260ms ease, margin-top 300ms ease; will-change: height, opacity, margin-top; }
.accordion-item.is-open .accordion-panel { opacity: 1; margin-top: 0.15rem; }
.accordion-content { color: var(--grey); padding-bottom: 0.62rem; }
.legal-accordion { margin-top: 1rem; }
.notifications-page-list { max-width: 820px; max-height: none; }

.inline-form { display: flex; gap: 0.45rem; align-items: center; }
.checkout-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.qty-input { width: 84px; }
.promo-row { display: grid; gap: 0.5rem; max-width: 420px; }
.cart-bottom-grid { margin-top: 1rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; align-items: start; }
.totals-box { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 0.9rem; background: var(--surface); }
.empty-state { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); padding: 1.3rem; max-width: 560px; display: grid; gap: 0.3rem; }
.checkout-state-box { max-width: 720px; margin: 0 auto; }
.checkout-pickup-panel,
.checkout-selected-pickup { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: rgba(30, 32, 32, 0.88); padding: 0.9rem; display: grid; gap: 0.75rem; }
.checkout-pickup-header h2,
.checkout-selected-pickup h2 { margin: 0; font-size: 1rem; }
.checkout-pickup-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.checkout-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; }
.pickup-results-grid { display: grid; gap: 0.6rem; }
.pickup-result-card,
.checkout-picked-card { display: grid; gap: 0.28rem; width: 100%; text-align: left; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: rgba(228, 218, 209, 0.03); color: var(--cream); padding: 0.8rem; }
.pickup-result-card { cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); }
.pickup-result-card:hover,
.pickup-result-card:focus-visible { border-color: var(--rust-red); background: rgba(205, 65, 43, 0.08); transform: translateY(-1px); }
.pickup-result-card span,
.pickup-result-card small { color: var(--grey); }
.checkout-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.checkout-modal[hidden] { display: none !important; }
.checkout-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 32, 32, 0.76); }
.checkout-modal__dialog { position: relative; width: min(1180px, calc(100% - 1rem)); max-height: min(92vh, 960px); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--charcoal); padding: 1rem; display: grid; gap: 0.75rem; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38); }
.checkout-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checkout-modal__header h2 { margin: 0; }
.checkout-modal__close { width: 40px; height: 40px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(228, 218, 209, 0.04); color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.checkout-modal__close:hover,
.checkout-modal__close:focus-visible { border-color: var(--rust-red); color: var(--rust-red); }
.checkout-modal__body { min-height: 0; }
.checkout-map-root { width: 100%; height: min(74vh, 760px); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; background: rgba(228, 218, 209, 0.04); }
.checkout-map-root > * { width: 100% !important; height: 100% !important; }

.admin-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; margin-bottom: 1rem; }
.admin-panels-grid--detail { grid-template-columns: 1.6fr 1fr; }
.admin-detail-list { display: grid; gap: 0.58rem; margin: 0; }
.admin-detail-list div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-soft); }
.admin-detail-list dt { color: var(--grey); font-size: 0.78rem; text-transform: uppercase; }
.admin-detail-list dd { margin: 0; word-break: break-word; }
.admin-detail-list--compact div { grid-template-columns: 180px minmax(0, 1fr); }
.admin-note-block + .admin-note-block { margin-top: 1rem; }
.admin-note-block h3 { margin-bottom: 0.35rem; }
.admin-raw-json { white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; line-height: 1.5; }

.footer { border-top: 1px solid var(--border-soft); padding: 0.4rem 0; }
.footer-compact { display: flex; align-items: center; justify-content: center; gap:  10.6rem; flex-wrap: wrap; min-height: 36px; }
.footer-brand-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cream); text-decoration: none; }
.footer-logo { display: block; max-height: 22px; width: auto; object-fit: contain; }
.footer-brand { font-size: 0.74rem; color: var(--grey); }
.footer-contacts { display: inline-flex; align-items: center; justify-content: center; gap: 1.45rem; flex-wrap: wrap; }
.footer-contact-link { color: var(--grey); text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.74rem; border-bottom: 1px solid transparent; }
.footer-contact-link:hover { color: var(--cream); border-bottom-color: var(--rust-red); }
.footer-support-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--cream); }
.footer-social-icons { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.1rem; }
.footer-social-link { width: 26px; height: 26px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--grey); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); }
.footer-social-link:hover, .footer-social-link:focus-visible { border-color: var(--rust-red); color: var(--cream); background: rgba(205, 65, 43, 0.08); }
.footer-social-icon { width: 14px; height: 14px; fill: currentColor; }
.support-status, .footer-legal-link { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.76rem; margin: 0; }
.footer-legal-link { color: var(--grey); text-decoration: none; }
.footer-legal-link:hover { color: var(--cream); }
.no-text-transform { text-transform: none !important; letter-spacing: 0.01em; }
.support-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(228, 218, 209, 0.25), 0 0 8px rgba(30, 32, 32, 0.45); }
.support-dot.online { background: var(--green); animation: pulse 1.6s infinite; }
.support-dot.offline { background: var(--rust-red); }

.settings-preview-logo { display: block; max-height: 60px; width: auto; margin-top: 0.3rem; }
.settings-preview-favicon { display: block; width: 24px; height: 24px; margin-top: 0.3rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.settings-preview-background { display: block; width: min(100%, 360px); aspect-ratio: 16 / 9; object-fit: cover; margin-top: 0.35rem; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.is-submitting { opacity: 0.86; }
.EasyMDEContainer { background: rgba(30, 32, 32, 0.85); border: 1px solid var(--border-soft); }
.editor-toolbar, .CodeMirror, .editor-preview, .editor-preview-side { background: rgba(30, 32, 32, 0.85) !important; color: var(--cream); border-color: var(--border-soft) !important; }
.editor-toolbar button { color: var(--grey) !important; }
.CodeMirror-cursor { border-left-color: var(--cream) !important; }

@media (max-width: 950px) {
  .admin-panels-grid { grid-template-columns: 1fr; }
  .admin-detail-grid { grid-template-columns: 1fr; }
  .product-layout, .checkout-layout, .cart-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { width: min(1200px, calc(100% - 1.25rem)); }
  .site-header nav { align-items: flex-start; padding: 0.75rem 0; flex-direction: column; }
  .nav-brand { gap: 0.45rem; }
  .brand-name { font-size: 0.8rem; }
  .nav-actions { width: 100%; justify-content: flex-end; }
  .admin-table th, .admin-table td { padding: 0.62rem; font-size: 0.9rem; }
  .checkout-inline-grid { grid-template-columns: 1fr; }
  .checkout-search-row { grid-template-columns: 1fr; }
  .admin-detail-list div { grid-template-columns: 1fr; gap: 0.3rem; }
  .thumb-row { grid-template-columns: repeat(3, 1fr); }
  .footer-compact { gap: 0.4rem 0.8rem; }
  .footer-brand-link { width: 100%; justify-content: center; }
  .footer-contacts { width: 100%; justify-content: center; }
  .promo-popup { right: 10px; bottom: 10px; width: min(285px, calc(100% - 20px)); }
  .checkout-modal { padding: 0.5rem; align-items: center; }
  .checkout-modal__dialog { width: calc(100% - 0.5rem); max-height: 94vh; padding: 0.75rem; }
  .checkout-map-root { height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-overlay,
  .custom-cursor {
    transition: none;
  }
}

@keyframes pulse {
  0% { opacity: 0.45; }
  50% { opacity: 1; }
  100% { opacity: 0.45; }
}

@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes promoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}