/* ──────────────────────────────────────────────────────────
   Atelier — Minimal Luxe theme
   Cream + camel + sage + black. Fraunces (display) + Inter (body).
   Editorial magazine-leaning. Restrained, no playful bubbles.
   Loaded after globals.css when stores.theme.customCss = true.
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --at-cream:    #f6efe6;
  --at-cream-2:  #faf6ef;
  --at-camel:    #b78f5b;
  --at-camel-dk: #946d3a;
  --at-sage:     #aab59f;
  --at-ink:      #1a1a1a;
  --at-muted:    #7d756b;

  --color-paper: var(--at-cream);
  --color-ink:   var(--at-ink);
  --color-line:  transparent;
  --color-muted: var(--at-muted);
  --color-cloud: var(--at-cream-2);
}

body {
  background: var(--at-cream);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  color: var(--at-ink);
  letter-spacing: 0.005em;
}

/* ── Headlines — Fraunces serif ───────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display), "Fraunces", "Cormorant Garamond", serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

/* ── Nuke brutalist black borders + hard shadows ─────────── */
.border-ink                       { border-color: transparent !important; }
.border-b-\[3px\]                 { border-bottom-width: 0 !important; }
.border-y-\[3px\]                 { border-top-width: 0 !important; border-bottom-width: 0 !important; }
.border-\[2\.5px\]                { border-width: 0 !important; }
.border-b-\[2\.5px\]              { border-bottom-width: 0 !important; }
.border-\[3px\]                   { border-width: 0 !important; }
.shadow-\[3px_3px_0_\#0e0e0e\]    { box-shadow: none !important; }
.shadow-\[14px_14px_0_\#0e0e0e\]  { box-shadow: 0 24px 60px -24px rgba(26,26,26,0.15) !important; }
.shadow-\[6px_6px_0_\#0e0e0e\]    { box-shadow: 0 12px 30px -12px rgba(26,26,26,0.12) !important; }

/* ── Header — clean cream ─────────────────────────────────── */
header.sticky {
  background: var(--at-cream) !important;
  border-bottom: 1px solid rgba(26,26,26,0.06) !important;
  backdrop-filter: none;
}
header a[data-wordmark] {
  white-space: nowrap;
}
header a[data-wordmark] > span {
  background: transparent !important;
  color: var(--at-ink) !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 1.3em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
header a[data-wordmark] > span:last-of-type {
  padding-left: 0.3em !important;
  font-style: italic;
  color: var(--at-camel) !important;
}

/* Cart + lang pills — minimal ghost */
header a.flex.items-center.gap-2,
header button {
  background: transparent !important;
  color: var(--at-ink) !important;
  border: 1px solid var(--at-ink) !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.9rem !important;
  box-shadow: none !important;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 0.7rem !important;
  text-transform: uppercase;
}

/* Nav links — small caps */
header nav a {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--at-ink) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Hide the dedicated nav SHOP — wordmark + hero CTA cover it */
header nav a[href$="/shop"] {
  display: none !important;
}

/* ── Marquee — cream with thin ink rule, italic Fraunces ─── */
.marquee {
  background: var(--at-cream-2) !important;
  color: var(--at-ink) !important;
  border-top: 1px solid rgba(26,26,26,0.08) !important;
  border-bottom: 1px solid rgba(26,26,26,0.08) !important;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.marquee * { color: var(--at-ink) !important; }

/* ── Buttons — sharp rectangles (editorial) ──────────────── */
.btn {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 1rem 2.4rem !important;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: 0.12em;
  font-size: 0.78rem !important;
  box-shadow: none !important;
  transition: background 0.18s ease;
}
.btn-accent {
  background: var(--at-ink) !important;
  color: var(--at-cream) !important;
}
.btn-accent:hover {
  background: var(--at-camel) !important;
}
.btn-dark {
  background: var(--at-ink) !important;
  color: var(--at-cream) !important;
}
.btn-ghost {
  background: transparent !important;
  color: var(--at-ink) !important;
  border: 1px solid var(--at-ink) !important;
}
.btn-ghost:hover { background: var(--at-ink) !important; color: var(--at-cream) !important; }

/* ── Cards — flat, no shadow, thin hairline on hover only ── */
.card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}
.card-hover:hover {
  transform: none;
  box-shadow: none;
}
.card img {
  transition: transform 0.5s ease;
}
.card-hover:hover img {
  transform: scale(1.03);
}

/* ── SAVE badge — small camel pill, no rotation ──────────── */
.card .relative > span.eyebrow.absolute {
  left: 0.75rem !important;
  right: auto !important;
  top: 0.75rem !important;
  background: var(--at-camel) !important;
  color: var(--at-cream) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.14em !important;
  padding: 0.2rem 0.6rem !important;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  box-shadow: none !important;
  transform: none;
}

/* ── Inputs — underline only ──────────────────────────────── */
.field {
  border: 0 !important;
  border-bottom: 1px solid var(--at-ink) !important;
  border-radius: 0 !important;
  background: transparent;
  padding: 0.6rem 0;
  font-family: "Inter", system-ui, sans-serif;
}
.field:focus {
  border-color: var(--at-camel) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Highlight (.mark) — sage underline ───────────────────── */
.mark {
  background: linear-gradient(180deg, transparent 60%, var(--at-sage) 60%);
  padding: 0 0.1em;
  border-radius: 0;
  color: inherit;
  display: inline;
  transform: none;
  font-style: italic;
}

/* ── Eyebrow — small caps Inter ───────────────────────────── */
.eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-camel);
  font-size: 0.7rem;
}

/* ── Hero (HeroMinimal editorial 2-col) ──────────────────── */
main > section:first-of-type {
  background: var(--at-cream) !important;
  padding: 5rem 0 !important;
}
main > section:first-of-type h1 {
  font-size: clamp(2.8rem, 5.5vw, 5rem) !important;
  color: var(--at-ink) !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.0;
}
main > section:first-of-type p {
  color: var(--at-muted) !important;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.2rem !important;
  font-weight: 400;
}

/* Hero image — sharp corners, no big shadow */
main > section:first-of-type img {
  border-radius: 0 !important;
  box-shadow: 0 30px 80px -40px rgba(26,26,26,0.3);
}

/* ── Section headings ─────────────────────────────────────── */
h2 {
  color: var(--at-ink) !important;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── Email capture — cream block, dark CTA ───────────────── */
section.bg-ink, section[class*="bg-ink"] {
  background: var(--at-cream-2) !important;
  color: var(--at-ink) !important;
  padding: 5rem 1.5rem !important;
}
section.bg-ink *, section[class*="bg-ink"] * { color: var(--at-ink) !important; }
section.bg-ink .btn-accent,
section[class*="bg-ink"] .btn-accent,
section.bg-ink button[type="submit"],
section[class*="bg-ink"] button[type="submit"] {
  background: var(--at-ink) !important;
  color: var(--at-cream) !important;
  box-shadow: none !important;
}
section.bg-ink .btn-accent:hover,
section[class*="bg-ink"] .btn-accent:hover {
  background: var(--at-camel) !important;
}