/* ================================================================
   BLACKANT — "ATELIER" DESIGN SYSTEM (storefront only)
   ----------------------------------------------------------------
   This file is loaded ONLY by app/templates/base.html (the public
   storefront shell). The admin console has its own base.html and
   its own stylesheet (app.css) which this file never touches,
   overrides, or depends on — total separation by design.

   Direction: a quiet editorial atelier, not a streetwear flyer.
   Warm paper light mode, deep espresso dark mode. One reserved
   accent — a bottle-green ink, not the expected blue/orange/neon.
   A serif display face set big and loose, a geometric grotesque
   for body copy, a mono for small utility labels and prices.

   Signature: the "stitch rule" — a dashed seam-line divider that
   reads simultaneously as a garment stitch and an ant trail. It
   marks section boundaries instead of a generic hairline.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --sf-bg: #FAF8F3;
  --sf-surface: #FFFFFF;
  --sf-surface-alt: #F2EDE2;
  --sf-ink: #1B1812;
  --sf-line: #E3DDCE;
  --sf-line-strong: #D3CAB4;
  --sf-muted: #837A69;
  --sf-accent: #2B4E40;
  --sf-accent-soft: #E4EBE6;
  --sf-accent-ink: #FBF9F4;
  --sf-accent2: #A56A2A;
  --sf-accent2-soft: #F3E6D4;
  --sf-charcoal: #1B1812;
  --sf-danger: #A8352A;
  --sf-danger-soft: #F5E4E1;
  --sf-success: #2B4E40;
  --sf-shadow: 27, 24, 18;
}

[data-theme="dark"] {
  --sf-bg: #15130E;
  --sf-surface: #1C1911;
  --sf-surface-alt: #221E15;
  --sf-ink: #F1EBDD;
  --sf-line: rgba(241, 235, 221, 0.1);
  --sf-line-strong: rgba(241, 235, 221, 0.18);
  --sf-muted: #A79C86;
  --sf-accent: #5DA085;
  --sf-accent-soft: rgba(93, 160, 133, 0.14);
  --sf-accent-ink: #0E1712;
  --sf-accent2: #E0AA61;
  --sf-accent2-soft: rgba(224, 170, 97, 0.14);
  --sf-charcoal: #0C0B08;
  --sf-danger: #E08277;
  --sf-danger-soft: rgba(224, 130, 119, 0.14);
  --sf-success: #5DA085;
  --sf-shadow: 0, 0, 0;
}

body.storefront {
  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.storefront, body.storefront *,
body.storefront *::before, body.storefront *::after {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Tailwind's Preflight resets border-radius/shadow per-utility; these
   base element rules give the whole page its type rhythm without
   requiring every template to carry font classes. */
body.storefront h1, body.storefront h2, body.storefront h3, body.storefront .font-display {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: none;
}
body.storefront .font-mono, body.storefront .font-tag { font-family: 'Space Mono', monospace; }

body.storefront ::selection { background: var(--sf-accent); color: var(--sf-accent-ink); }

/* Logo mark etc. — invert only if explicitly opted in */
/* Logo now ships as two real assets (logo-mark-dark.png / logo-mark-light.png)
   swapped via Tailwind's dark: variant in header.html, so no CSS invert
   trick is needed here. */

/* ---------------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------------- */
body.storefront::-webkit-scrollbar { width: 10px; height: 10px; }
body.storefront::-webkit-scrollbar-track { background: var(--sf-bg); }
body.storefront::-webkit-scrollbar-thumb { background: var(--sf-line-strong); border-radius: 999px; }

/* ---------------------------------------------------------------
   SIGNATURE — STITCH RULE
   A dashed seam that reads as both a garment stitch and a trail.
   Usage: <div class="stitch-rule"></div>
   --------------------------------------------------------------- */
.storefront .stitch-rule {
  position: relative;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--sf-line-strong) 0 6px, transparent 6px 13px);
}
.storefront .stitch-rule::before,
.storefront .stitch-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--sf-accent2);
  transform: translateY(-50%);
}
.storefront .stitch-rule::before { left: 0; }
.storefront .stitch-rule::after { right: 0; }

/* ---------------------------------------------------------------
   SKELETON LOADERS
   --------------------------------------------------------------- */
.storefront .skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--sf-surface-alt);
  border-radius: inherit;
}
.storefront .skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: sf-shimmer 1.5s infinite;
}
[data-theme="light"] .storefront .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(27,24,18,0.06), transparent);
}
@keyframes sf-shimmer { 100% { transform: translateX(100%); } }
.storefront .skeleton-text { height: 0.85rem; border-radius: 4px; }
.storefront .skeleton-card { aspect-ratio: 3/4; }

/* ---------------------------------------------------------------
   FLASH TOASTS
   --------------------------------------------------------------- */
.storefront .flash-toast {
  animation: sf-toast-in .35s cubic-bezier(.16,1,.3,1) both;
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
@keyframes sf-toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------
   SCROLL REVEAL (see storefront.js)
   --------------------------------------------------------------- */
.storefront [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.storefront [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .storefront [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------
   CARDS / PLATES
   Soft elevated surfaces, hairline border, gentle lift on hover —
   replaces the old hard offset-shadow "sticker" language.
   --------------------------------------------------------------- */
.storefront .plate, .storefront .plate-sm, .storefront .plate-bl,
.storefront .block, .storefront .block-sm {
  border: 1px solid var(--sf-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(var(--sf-shadow), 0.04);
  background-color: var(--sf-surface);
}
.storefront .plate-sm, .storefront .block-sm { border-radius: 14px; }
.storefront .plate-bl { border-radius: 18px; }

a.storefront .plate:hover, button.storefront .plate:hover,
.storefront a.plate:hover, .storefront button.plate:hover,
.storefront a.plate-sm:hover, .storefront button.plate-sm:hover,
.storefront a.block:hover, .storefront button.block:hover,
.storefront a.block-sm:hover, .storefront button.block-sm:hover {
  border-color: var(--sf-line-strong);
  box-shadow: 0 10px 28px -12px rgba(var(--sf-shadow), 0.28);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------
   BADGES / TAGS / CHIPS
   --------------------------------------------------------------- */
.storefront .tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  background: var(--sf-ink);
  color: var(--sf-bg);
  border: none;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
}
.storefront .tag--alt { background: var(--sf-accent2); color: #FBF6EE; }
.storefront .tag--ghost { background: var(--sf-surface); color: var(--sf-ink); border: 1px solid var(--sf-line-strong); }

.storefront .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--sf-line-strong);
  color: var(--sf-muted);
  font-size: 0.8rem;
  font-weight: 600;
  transition: all .2s ease;
}
.storefront .chip:hover { border-color: var(--sf-accent); color: var(--sf-ink); }
.storefront .chip.active { background: var(--sf-ink); border-color: var(--sf-ink); color: var(--sf-bg); }

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.storefront .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  border-radius: 12px;
  padding: 0.9rem 1.6rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
  cursor: pointer;
}
.storefront .btn:active { transform: translateY(1px); }
.storefront .btn-primary { background: var(--sf-accent); color: var(--sf-accent-ink); box-shadow: 0 10px 24px -12px rgba(var(--sf-shadow), 0.45); }
.storefront .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 14px 30px -10px rgba(var(--sf-shadow), 0.5); transform: translateY(-2px); }
.storefront .btn-secondary { background: transparent; color: var(--sf-ink); border: 1.5px solid var(--sf-line-strong); }
.storefront .btn-secondary:hover { border-color: var(--sf-ink); }
.storefront .btn-ghost { background: var(--sf-surface-alt); color: var(--sf-ink); }
.storefront .btn-ghost:hover { background: var(--sf-line); }
.storefront .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* bg-accent utility buttons used inline across older markup keep working */
.storefront button[class*="bg-accent"], .storefront a[class*="bg-accent"] {
  border-radius: 12px;
  font-weight: 700;
}

/* ---------------------------------------------------------------
   FORM FIELDS
   --------------------------------------------------------------- */
.storefront .field-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-family: 'Space Mono', monospace;
  color: var(--sf-muted);
  margin-bottom: 0.5rem;
}

.storefront .field-input,
.storefront .field-select,
.storefront .field-textarea {
  display: block;
  width: 100%;
  background-color: var(--sf-surface);
  border: 1.5px solid var(--sf-line-strong);
  border-radius: 12px;
  padding: 0.85rem 1.05rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sf-ink);
  font-family: 'Manrope', sans-serif;
  box-shadow: none;
}
.storefront .field-textarea { resize: vertical; min-height: 6.5rem; }
.storefront .field-input::placeholder, .storefront .field-textarea::placeholder { color: var(--sf-muted); opacity: .75; }
.storefront .field-input:hover, .storefront .field-select:hover, .storefront .field-textarea:hover { border-color: var(--sf-accent); }
.storefront .field-input:focus, .storefront .field-select:focus, .storefront .field-textarea:focus {
  outline: none;
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 4px var(--sf-accent-soft);
}
.storefront .field-input:disabled, .storefront .field-select:disabled, .storefront .field-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.storefront .field-input.invalid, .storefront .field-select.invalid, .storefront .field-textarea.invalid {
  border-color: var(--sf-danger); background-color: var(--sf-danger-soft);
}
.storefront .field-input.invalid:focus, .storefront .field-select.invalid:focus, .storefront .field-textarea.invalid:focus {
  box-shadow: 0 0 0 4px var(--sf-danger-soft);
}
.storefront .field-input.valid, .storefront .field-select.valid { border-color: var(--sf-accent); }
.storefront .field-error { display: flex; align-items: center; gap: 0.375rem; color: var(--sf-danger); font-size: 0.75rem; margin-top: 0.5rem; }
.storefront .field-hint { color: var(--sf-muted); font-size: 0.75rem; margin-top: 0.5rem; }
.storefront .field-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23837A69' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer;
}
.storefront .field-group { margin-bottom: 1.25rem; }
.storefront .field-group:last-child { margin-bottom: 0; }
.storefront .field-input-icon-left { padding-left: 2.75rem; }

/* file input button (refund upload) */
.storefront input[type="file"]::file-selector-button {
  border-radius: 10px;
}

/* Size / colour selectors */
.storefront .size-option span {
  cursor: pointer;
  transition: all .15s ease;
  border-radius: 10px;
}
.storefront .size-option input:checked + span {
  border-color: var(--sf-accent);
  background: var(--sf-accent-soft);
  color: var(--sf-accent);
}
.storefront .color-swatch { border-radius: 999px !important; }

.storefront .star-input { display: inline-flex; flex-direction: row-reverse; gap: 0.3rem; }
.storefront .star-input input { display: none; }
.storefront .star-input label { color: var(--sf-line-strong); cursor: pointer; font-size: 1.35rem; transition: color .15s; }
.storefront .star-input input:checked ~ label,
.storefront .star-input label:hover,
.storefront .star-input label:hover ~ label { color: var(--sf-accent2); }

.storefront .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.storefront input:focus, .storefront textarea:focus, .storefront select:focus { outline: none; }

/* ---------------------------------------------------------------
   ALERTS / EMPTY STATES
   --------------------------------------------------------------- */
.storefront .alert { border-radius: 16px; border: 1px solid; padding: 1.25rem 1.5rem; font-size: 0.875rem; }
.storefront .alert-success { border-color: var(--sf-accent); background: var(--sf-accent-soft); color: var(--sf-accent); }
.storefront .alert-danger { border-color: var(--sf-danger); background: var(--sf-danger-soft); color: var(--sf-danger); }

.storefront .empty-state {
  text-align: center;
  padding: 4.5rem 1.5rem;
  color: var(--sf-muted);
  border: 1.5px dashed var(--sf-line-strong);
  border-radius: 22px;
  background: var(--sf-surface-alt);
}
.storefront .empty-state i { font-size: 1.6rem; color: var(--sf-accent2); margin-bottom: 1rem; }

/* ---------------------------------------------------------------
   TABLES
   --------------------------------------------------------------- */
.storefront table { border-collapse: separate; border-spacing: 0; }
.storefront table thead th {
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-muted);
  font-weight: 700;
  text-align: left;
  padding-bottom: 0.75rem;
}
.storefront table tbody td { padding: 0.9rem 0.5rem; border-top: 1px solid var(--sf-line); }
.storefront table tbody tr:first-child td { border-top: none; }

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.storefront .header-shell { background: var(--sf-bg); border-bottom: 1px solid transparent; }
.storefront .header-shell.is-scrolled { border-bottom-color: var(--sf-line); box-shadow: 0 6px 24px -18px rgba(var(--sf-shadow), 0.5); }

.storefront .announce-bar {
  background: var(--sf-charcoal);
  color: rgba(241,235,221,0.82);
}

.storefront .icon-btn {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  color: var(--sf-muted);
}
.storefront .icon-btn:hover { color: var(--sf-ink); background: var(--sf-surface-alt); }
.storefront .icon-btn:active { transform: scale(.94); }

.storefront .nav-link { position: relative; padding: 0.4rem 0; color: var(--sf-muted); }
.storefront .nav-link:hover { color: var(--sf-ink); }
.storefront .nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px;
  background: var(--sf-accent2); transition: right .28s cubic-bezier(.16,1,.3,1);
}
.storefront .nav-link:hover::after { right: 0; }

.storefront .cart-badge {
  position: absolute; top: -0.35rem; right: -0.4rem;
  background: var(--sf-accent2); color: #FBF6EE;
  font-family: 'Space Mono', monospace; font-size: 0.625rem; font-weight: 700; line-height: 1;
  min-width: 1.1rem; height: 1.1rem; padding: 0 0.2rem;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

.storefront .search-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.storefront .search-panel.open { max-height: 140px; opacity: 1; }

.storefront .storefront-nav-link {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.05rem 1.75rem;
  border-bottom: 1px solid var(--sf-line);
  color: var(--sf-muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.storefront .storefront-nav-link:hover { background: var(--sf-surface-alt); color: var(--sf-ink); }
.storefront .storefront-nav-link i { color: var(--sf-accent2); width: 1.1rem; text-align: center; }

/* ---------------------------------------------------------------
   ACCOUNT SIDEBAR
   --------------------------------------------------------------- */
.storefront .account-nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  color: var(--sf-muted);
  font-size: 0.875rem;
  font-weight: 600;
}
.storefront .account-nav-link:hover { background: var(--sf-surface-alt); color: var(--sf-ink); }
.storefront .account-nav-link.active { background: var(--sf-accent); color: var(--sf-accent-ink); }

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.storefront .hero-slide { transition: opacity .9s ease; }
.storefront .hero-kicker {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: 'Space Mono', monospace; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: #F1EBDD;
}
.storefront .hero-kicker::before { content: ''; width: 1.75rem; height: 1.5px; background: var(--sf-accent2); }
.storefront .hero-counter { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: rgba(255,255,255,0.8); }
.storefront .hero-tick { width: 1.5rem; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.35); transition: all .3s ease; }
.storefront .hero-tick.active { background: var(--sf-accent2); width: 2.25rem; }
.storefront .hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 3rem; height: 3rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 13, 0.35);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}
.storefront .hero-arrow:hover { background: rgba(20,18,13,0.6); border-color: #fff; }

@keyframes sf-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.storefront .hero-fade-up { animation: sf-fade-up .8s cubic-bezier(.16,1,.3,1) both; }
.storefront .hero-fade-up-2 { animation-delay: .1s; }
.storefront .hero-fade-up-3 { animation-delay: .2s; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.storefront .footer-heading {
  font-family: 'Space Mono', monospace; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-ink); margin-bottom: 1.1rem;
}
.storefront .footer-link { color: var(--sf-muted); }
.storefront .footer-link:hover { color: var(--sf-ink); }
.storefront .footer-icon {
  width: 2.35rem; height: 2.35rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sf-muted); border: 1px solid var(--sf-line-strong);
}
.storefront .footer-icon:hover { color: var(--sf-accent); border-color: var(--sf-accent); }

/* ---------------------------------------------------------------
   SHOP FILTER LINKS
   --------------------------------------------------------------- */
.storefront .shop-filter-link { display: block; position: relative; padding: 0.45rem 0 0.45rem 1rem; color: var(--sf-muted); }
.storefront .shop-filter-link::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(0);
  width: 5px; height: 5px; border-radius: 999px; background: var(--sf-accent2); transition: transform .2s ease;
}
.storefront .shop-filter-link:hover { color: var(--sf-ink); }
.storefront .shop-filter-link:hover::before, .storefront .shop-filter-link.active::before { transform: translateY(-50%) scale(1); }
.storefront .shop-filter-link.active { color: var(--sf-ink); font-weight: 700; }

/* ---------------------------------------------------------------
   CATEGORY / PRODUCT CARDS (home + grids)
   --------------------------------------------------------------- */
.storefront .cat-card, .storefront .product-card-media { border-radius: 20px; }
.storefront .cat-pill {
  border-radius: 999px !important;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------
   FULFILLMENT / RADIO CARD OPTIONS (checkout)
   --------------------------------------------------------------- */
.storefront .fulfillment-option { border-radius: 16px; }

/* ---------------------------------------------------------------
   MODAL
   --------------------------------------------------------------- */
.storefront #fee-info-modal { backdrop-filter: blur(4px); }
.storefront #fee-info-modal > div { border-radius: 20px; animation: sf-toast-in .3s cubic-bezier(.16,1,.3,1) both; }

/* ---------------------------------------------------------------
   PROSE (static pages / product description)
   --------------------------------------------------------------- */
.storefront .prose { color: var(--sf-muted); }
.storefront .prose a { color: var(--sf-accent); text-decoration: underline; }
.storefront .prose h2, .storefront .prose h3 { color: var(--sf-ink); margin-top: 1.5em; }

/* ---------------------------------------------------------------
   RESPONSIVE TYPE SCALE HELPERS
   --------------------------------------------------------------- */
.storefront .eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sf-accent2);
}