/*
 * Treppan Fragrance — private atelier, not a storefront.
 * Design system: an editorial serif (Cormorant Garamond) for display type,
 * paired with a clean geometric sans (DM Sans) for everything else — two
 * families total, no more. Palette stays deliberately restrained: near-black
 * ink, warm ivory paper, walnut and brass as quiet accents. Brass/gold is
 * used as a highlight, never a background or a gradient.
 *
 * Logical properties (margin-inline, padding-inline, inset-inline, etc.) are
 * used throughout instead of left/right so the layout flips cleanly once
 * Arabic content and dir="rtl" are introduced — see the lang switcher in the
 * header for where that plugs in.
 */

:root {
  /* ── Color ── */
  --ink:        #15120d;
  --ink-soft:   #201b14;
  --ink-line:   #35291b;
  --paper:      #faf6ee;
  --parchment:  #f0e6d3;
  --walnut:     #4a3626;
  --brass:      #a9895b;
  --brass-soft: #c9ac7c;
  --brass-line: rgba(169, 137, 91, 0.35);
  --text:       #1d1811;
  --text-dim:   #6d6252;
  --text-inverse: #f4ede0;
  --text-inverse-dim: #c9bda6;
  --border:     #e5dac0;
  --border-dark: rgba(244, 237, 224, 0.16);
  --success-bg: #eef3e6; --success-text: #3d5c2a;
  --error-bg:   #f7e9e3; --error-text: #8a3a20;

  /* ── Type ── */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Space (4px base) ── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 140px;

  /* ── Structure ── */
  --container: 1240px;
  --container-narrow: 760px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-btn: 8px;
  --shadow-soft: 0 12px 32px rgba(21, 18, 13, 0.16);
  --shadow-lift: 0 4px 18px rgba(21, 18, 13, 0.22);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0.001s; }
  html { scroll-behavior: auto; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  background: var(--paper);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.002em;
  margin: 0 0 0.4em;
  color: var(--text);
}
h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 500; }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 500; }
h4 { font-size: 18px; font-weight: 600; font-family: var(--font-sans); }
em { font-style: italic; color: inherit; }

p { margin: 0 0 1em; }
p:last-child { margin-block-end: 0; }

a { color: var(--walnut); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--brass); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

::selection { background: var(--brass-soft); color: var(--ink); }

/* padding-block-end guarantees breathing room before the footer on every
   page — without it, spacing depended entirely on each page's own last
   element supplying a bottom margin, and several (buy/details,
   .related-products, ...) didn't, so their content ran flush into the
   footer. */
main { max-width: var(--container); margin-inline: auto; padding-inline: 24px; padding-block-end: var(--space-8); }

/* Breaks a section out of main's max-width/padding to true edge-to-edge,
   regardless of nesting depth — used for hero/section bands. */
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

.eyebrow {
  display: block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
  font-weight: 700; color: var(--brass); margin-block-end: var(--space-4);
  font-family: var(--font-sans);
}

.section { padding-block: var(--space-9); }
.section-header { text-align: center; max-width: var(--container-narrow); margin-inline: auto; margin-block-end: var(--space-7); }
.section-header p:last-child { color: var(--text-dim); font-size: 17px; }
.section-header.align-start { text-align: start; margin-inline: 0; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding-block: 15px; padding-inline: 30px; border-radius: var(--radius-btn);
  border: 1px solid var(--walnut); cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; text-align: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  min-height: 48px;
}
.btn-primary { background: var(--walnut); color: var(--paper); border-color: var(--walnut); }
.btn-primary:hover { background: var(--ink); border-color: var(--brass); color: var(--brass-soft); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-inverse); border-color: var(--border-dark); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-soft); text-decoration: none; }
.btn-outline { background: transparent; color: var(--walnut); border-color: var(--walnut); }
.btn-outline:hover { background: var(--walnut); color: var(--paper); text-decoration: none; }
.btn-danger { border: none; text-decoration: underline; color: var(--error-text); background: transparent; text-transform: none; letter-spacing: normal; padding: 0; min-height: auto; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-link {
  display: inline-flex; align-items: center; border: none; border-radius: 0; background: none; padding: 0;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: inherit; border-block-end: 1px solid currentColor; padding-block-end: 3px;
  min-height: auto;
}
.btn-link:hover { color: var(--brass); text-decoration: none; }

/* ── Header ── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 18px; padding-inline: 28px; background: rgba(21, 18, 13, 0.92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border-dark);
  position: sticky; inset-block-start: 0; z-index: 100;
}
.site-logo { display: flex; align-items: center; gap: 14px; }
.site-logo img { height: 38px; width: 38px; border-radius: 50%; display: block; }
.site-logo-text {
  font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text-inverse);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.site-header nav.primary-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-header nav.primary-nav a:not(.btn) {
  color: var(--text-inverse-dim); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.site-header nav.primary-nav a:not(.btn):hover { color: var(--brass-soft); }
.site-header .header-actions { display: flex; align-items: center; gap: var(--space-5); }

.lang-switch { display: flex; gap: 6px; font-size: 11px; color: var(--text-inverse-dim); letter-spacing: 0.06em; }
.lang-switch a { color: var(--text-inverse-dim); }
.lang-switch a[aria-current="true"] { color: var(--brass-soft); font-weight: 700; }

.cart-link { position: relative; display: inline-flex; color: var(--text-inverse-dim); }
.cart-link:hover { color: var(--brass-soft); }
.cart-badge {
  position: absolute; inset-block-start: -8px; inset-inline-end: -10px;
  background: var(--brass); color: var(--ink); font-family: var(--font-sans);
  font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-inline: 2px;
}

.menu-toggle {
  display: none; background: none; border: none; color: var(--text-inverse); cursor: pointer;
  padding: 8px; min-width: 44px; min-height: 44px;
}
.mobile-nav {
  /* Above .site-header's z-index: 100 (it's `position: sticky`, so it was
     winning the stacking order over this fixed panel) — otherwise the
     translucent, blurred header stays visible on top and nav links
     scrolling underneath it look blurred and hard to read. */
  display: none; position: fixed; inset: 0; z-index: 200; background: var(--ink);
  padding: 100px 28px 40px; flex-direction: column; gap: var(--space-6);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { color: var(--text-inverse); font-family: var(--font-display); font-size: 26px; }
.mobile-nav .btn {
  align-self: flex-start; margin-block-start: var(--space-5);
  font-family: var(--font-sans); font-size: 12px;
}
.mobile-nav-close {
  position: absolute; inset-block-start: 18px; inset-inline-end: 18px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-inverse); cursor: pointer;
  padding: 8px; min-width: 44px; min-height: 44px;
}

/* ── Hero ── */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--text-inverse); background-color: var(--ink);
  background-size: cover; background-position: center; overflow: hidden;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(21,18,13,0.82) 0%, rgba(21,18,13,0.55) 45%, rgba(21,18,13,0.2) 78%);
}
.hero-copy { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; padding: 120px 28px; width: 100%; }
/* Text sits directly on the photo (no panel behind it) — brighter colors
   plus a soft drop shadow keep it readable against whatever part of the
   image lands underneath, without boxing off or dimming the photo itself. */
.hero-copy .eyebrow { color: var(--text-inverse); text-shadow: 0 2px 10px rgba(0,0,0,0.7); }
.hero-copy h1 { color: var(--text-inverse); margin-block-end: var(--space-5); max-width: 680px; text-shadow: 0 2px 20px rgba(0,0,0,0.55); }
.hero-sub { max-width: 460px; color: var(--text-inverse); font-size: 18px; margin-block-end: var(--space-6); text-shadow: 0 2px 14px rgba(0,0,0,0.65); }
.hero-actions { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.hero .hero-actions { flex-direction: column; align-items: flex-start; }

/* ── Statement band: a single quiet typographic moment, no box, no photo ── */
.statement-band { padding-block: var(--space-9); text-align: center; }
.statement-band.quiet { background: var(--parchment); }
.statement {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.25; max-width: 780px; margin-inline: auto; color: var(--ink);
}
.statement em { font-style: italic; color: var(--walnut); }

/* ── Editorial split (copy + visual) ── */
.editorial {
  max-width: var(--container); margin-inline: auto; padding-block: var(--space-9); padding-inline: 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
}
.editorial.reverse .editorial-visual { order: -1; }
.editorial-copy p { color: var(--text-dim); font-size: 17px; }
.editorial-copy .btn-link { margin-block-start: var(--space-3); }
.editorial-visual {
  aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; position: relative;
  background-color: var(--ink); background-image: var(--pattern); background-size: 90px 90px;
}
.editorial-visual img, .editorial-visual video { width: 100%; height: 100%; object-fit: cover; }
.editorial-visual.has-photo { background-image: none; }
/* The default 4/3 frame suits the landscape product/bottle shots this
   component was built for — a portrait photo (e.g. a person) needs a
   taller frame or cover-cropping cuts off the top/bottom. */
.editorial-visual.portrait { aspect-ratio: 3/4; }

/* ── Atelier three-step ── */
.steps { padding-block: var(--space-9); }
/* Centering/max-width live here, not on .steps itself: .steps also carries
   .full-bleed (width:100vw + negative margin-inline to bleed its background
   edge-to-edge), and margin-inline:auto on the same element would win the
   cascade over .full-bleed's calc() (same specificity, declared later),
   breaking the bleed into a one-sided overflow instead of a centered one. */
.steps-inner { max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); margin-block-start: var(--space-7); }
.step-card { border-inline-start: 1px solid var(--border); padding-inline-start: var(--space-5); }
.step-number { font-family: var(--font-display); font-size: 15px; color: var(--brass); letter-spacing: 0.12em; margin-block-end: var(--space-3); }
.step-card h3 { margin-block-end: var(--space-2); }
.step-card p { color: var(--text-dim); font-size: 15px; }
.steps-cta { text-align: center; margin-block-start: var(--space-8); }

/* ── Collection preview / grid ── */
.collection-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-7); margin-block-start: var(--space-6);
}
.product-card { color: inherit; }
.product-card-link { display: block; color: inherit; }
.product-card-buy { margin-block-start: var(--space-3); }
.product-card-image {
  aspect-ratio: 4/5; background: var(--ink-soft); border-radius: var(--radius); overflow: hidden;
  margin-block-end: var(--space-4); position: relative; border: 1px solid var(--border);
}
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-card-placeholder, .product-detail-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background-color: var(--ink);
  background-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%), var(--pattern);
  background-size: cover, 90px 90px;
}
.product-card-placeholder span, .product-detail-placeholder span {
  font-family: var(--font-display); font-style: italic; letter-spacing: 0.04em;
  font-size: 17px; color: var(--brass-soft);
}
.product-detail-placeholder { aspect-ratio: 1; border-radius: var(--radius); }
.product-card-category { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brass); margin-block-end: var(--space-1); font-weight: 700; }
.product-card h3 { font-size: 24px; margin-block-end: var(--space-1); }
.product-card-descriptor { color: var(--text-dim); font-size: 14px; margin-block-end: var(--space-2); }
.product-card-price { font-weight: 700; font-family: var(--font-sans); font-size: 14px; }
.product-card-price-enquire { color: var(--text-dim); font-weight: 400; font-style: italic; }

.stock-badge {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  background: rgba(21, 18, 13, 0.82); color: var(--text-inverse);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: var(--radius-sm);
}
.stock-badge-inline { position: static; display: inline-block; margin-block-end: var(--space-5); }

.page-header { text-align: center; padding-block-end: var(--space-5); }
.page-header-sub { max-width: 520px; margin-inline: auto; color: var(--text-dim); }

.category-filter { display: flex; gap: var(--space-6); justify-content: center; margin: var(--space-5) 0 var(--space-2); flex-wrap: wrap; }
.category-filter a {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--text-dim); padding-block-end: 5px;
  border-block-end: 1px solid transparent;
}
.category-filter a.active, .category-filter a:hover { color: var(--text); border-color: var(--brass); }

.breadcrumb { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-block-end: var(--space-6); }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.product-detail-images img { width: 100%; border-radius: var(--radius); margin-block-end: var(--space-3); border: 1px solid var(--border); }
.product-detail-info h1 { font-size: clamp(32px, 4vw, 46px); }
.product-detail-size { color: var(--text-dim); font-size: 14px; margin-block-end: var(--space-2); }
.product-detail-price { font-size: 21px; font-weight: 700; margin-block-end: var(--space-3); font-family: var(--font-sans); }
.product-detail-sizes { list-style: none; margin: 0 0 var(--space-5); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.product-detail-sizes li { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); font-family: var(--font-sans); }
.product-detail-sizes li:not(:last-child) { border-block-end: 1px solid var(--border); }
.product-detail-sizes li span:first-child { color: var(--text-dim); }
.product-detail-sizes li span:last-child { font-weight: 700; }
.product-detail-description { color: var(--text-dim); margin-block-end: var(--space-6); font-size: 16px; }
.product-detail-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-7); }

.composition { border-block-start: 1px solid var(--border); padding-block-start: var(--space-5); margin-block-end: var(--space-7); }
.composition .eyebrow { margin-block-end: var(--space-4); }
.notes-pyramid { display: flex; flex-direction: column; gap: var(--space-4); }
.notes-row { display: flex; gap: var(--space-4); align-items: baseline; }
.notes-row dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--brass); min-width: 70px; margin: 0; }
.notes-row dd { margin: 0; color: var(--text-dim); font-size: 15px; }

.related-products { margin-block-start: var(--space-10); }

/* ── CTA band ── */
.cta-band {
  background-color: var(--ink);
  color: var(--text-inverse); text-align: center;
  padding-block: var(--space-10); border-block-start: 1px solid var(--ink-line);
}
.cta-band h2 { color: var(--text-inverse); font-size: clamp(30px, 4.5vw, 44px); margin-block-end: var(--space-3); max-width: 620px; margin-inline: auto; }
.cta-band .lede { color: var(--text-inverse-dim); max-width: 480px; margin-inline: auto; margin-block-end: var(--space-6); }
.cta-band .hero-actions { justify-content: center; }

/* ── Oud / Bukhoor editorial bands ── */
.atmosphere-band {
  position: relative; min-height: 62vh; display: flex; align-items: center; overflow: hidden;
  color: var(--text-inverse); background-color: var(--ink);
  background-size: cover; background-position: center;
}
.atmosphere-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(21,18,13,0.86) 0%, rgba(21,18,13,0.5) 55%, rgba(21,18,13,0.15) 100%);
}
.atmosphere-band .editorial-copy { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding: var(--space-9) 28px; width: 100%; }
.atmosphere-band .editorial-copy h2, .atmosphere-band .eyebrow { color: var(--text-inverse); }
.atmosphere-band .editorial-copy p { color: var(--text-inverse-dim); max-width: 460px; }
.atmosphere-band.no-photo { background-color: var(--ink); background-image: var(--pattern); background-size: 130px 130px; }

/* ── Forms ── */
.appointment-form, .form-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.appointment-form { margin-block-end: var(--space-9); }
.auth-form { max-width: 400px; margin-inline: auto; }
.field { margin-block-end: var(--space-5); }
.field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-dim); margin-block-end: var(--space-2); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; padding-block: 14px; padding-inline: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 16px; background: #fff; min-height: 48px;
}
.field textarea { min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-line); }
.field-inline { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.field-inline label { margin: 0; text-transform: none; font-weight: 400; }
.field-inline input[type="checkbox"], .field-inline input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--walnut); }

.address-fields {
  border-inline-start: 2px solid var(--border); padding-inline-start: var(--space-4);
  margin-block-end: var(--space-5);
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-4); }
.field-row .field { margin-block-end: var(--space-5); }

.buy-now-form { margin-block-end: var(--space-5); }
.buy-now-form .field { margin-block-end: var(--space-4); }
.field-quantity input { max-width: 120px; }
.product-detail-sizes-selectable label.size-option { display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%; }
.product-detail-sizes-selectable input[type="radio"] { accent-color: var(--walnut); margin-inline-end: var(--space-2); }

.order-total-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-block-end: var(--space-5); }
.order-total-preview .total-row { display: flex; justify-content: space-between; padding-block: 4px; font-family: var(--font-sans); font-size: 14px; }
.order-total-preview .total-row.total { font-weight: 700; font-size: 17px; border-block-start: 1px solid var(--border); margin-block-start: var(--space-2); padding-block-start: var(--space-3); }

.cart-items { margin-block-end: var(--space-6); }
.cart-item {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: var(--space-4);
  padding-block: var(--space-4); border-block-end: 1px solid var(--border);
}
.cart-item-thumb { width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-thumb-placeholder {
  width: 100%; height: 100%;
  background-color: var(--ink);
  background-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%), var(--pattern);
  background-size: cover, 45px 45px;
}
.cart-item-info h3 { font-size: 18px; margin: 0 0 4px; }
.cart-item-size { font-size: 13px; color: var(--text-dim); margin: 0 0 4px; }
.cart-item-price { font-size: 13px; color: var(--text-dim); margin: 0; }
.cart-item-qty { display: flex; gap: var(--space-2); align-items: center; }
.cart-item-qty input[type="number"] { width: 64px; padding-block: 8px; padding-inline: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; }
.cart-item-total { font-weight: 700; font-family: var(--font-sans); white-space: nowrap; }
.cart-item-remove { color: var(--error-text); border-color: var(--error-text); }
.cart-item-remove:hover { background: var(--error-bg); border-color: var(--error-text); color: var(--error-text); }

.cart-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.form-errors { background: var(--error-bg); border: 1px solid var(--error-text); color: var(--error-text); padding: 14px 18px; border-radius: var(--radius-sm); margin-block-end: var(--space-5); font-size: 14px; }
/* A small positive top margin, not a negative one — a negative margin here
   used to rely on the font's own internal line-height padding to avoid
   visibly overlapping the input's border, which isn't safe across every
   browser/font/zoom combination. */
.field-hint { font-size: 12px; color: var(--text-dim); margin: 4px 0 var(--space-2); }
legend + .field-hint { margin-block-start: 0; margin-block-end: var(--space-4); }

.devise-links { max-width: 400px; margin: var(--space-5) auto 0; font-size: 13px; }
.devise-links a { display: block; margin-block-end: 6px; }

.flash { padding: 14px 24px; margin: 0; text-align: center; font-size: 14px; }
.flash.notice { background: var(--success-bg); color: var(--success-text); }
.flash.alert { background: var(--error-bg); color: var(--error-text); }

.cart-toast-container {
  position: fixed; inset-block-start: 90px; inset-inline-end: 28px; z-index: 150;
  display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;
}
.cart-toast {
  background: var(--paper); color: var(--text); border: 1px solid var(--brass-line);
  border-inline-start: 3px solid var(--brass); box-shadow: var(--shadow-lift);
  padding: 14px 20px; font-size: 14px; border-radius: var(--radius);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cart-toast.is-leaving { opacity: 0; transform: translateY(-8px); }

.empty-state { color: var(--text-dim); font-style: italic; text-align: center; }

/* ── Booking wizard ── */
.booking-progress { text-align: center; margin-block-end: var(--space-8); }
.booking-progress-count {
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--text-dim);
  margin-block-end: var(--space-3);
}
.booking-progress-labels { display: flex; justify-content: center; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.booking-progress-label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-dim); padding-block-end: 6px; border-block-end: 1px solid transparent;
}
.booking-progress-label.is-active { color: var(--walnut); border-block-end-color: var(--walnut); }
.booking-progress-label.is-done { color: var(--ink); }


/* A real calendar — one grid per month, Sunday-first weeks, padded with
   blank cells outside the month so weekdays line up like an actual
   calendar rather than a wrapped row of date buttons. */
.calendar { max-width: 480px; margin-inline: auto; margin-block-end: var(--space-9); }
.calendar-month { margin-block-end: var(--space-8); }
.calendar-month:last-child { margin-block-end: 0; }
.calendar-month-title {
  font-family: var(--font-display); font-size: 21px; font-weight: 600; text-align: center;
  margin-block-end: var(--space-4);
}
/* Both rows must share the exact same gap, not just the same column count —
   otherwise their 1fr tracks resolve to different pixel widths (gap eats
   into the available space unevenly) and the weekday labels drift out from
   over their date columns, worse toward the right edge of the row. */
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays { margin-block-end: var(--space-2); }
.calendar-weekdays span {
  text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dim);
}
/* button_to wraps each open day in a <form>, which would otherwise be the
   actual grid item (and fill its 1fr track just fine) while the <button>
   inside it — the thing actually shown — sizes to its own text content
   instead, landing as a small ~30px box adrift inside a 65px cell next to
   full-size closed-day <span>s. display:contents removes the form from
   layout entirely so its button becomes the real grid item and stretches
   like every other cell. */
.calendar-grid form { display: contents; }
.calendar-day {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; color: var(--text-dim);
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none; margin: 0; padding: 0;
}
.calendar-day.is-blank { border: none; }
button.calendar-day.is-open {
  color: var(--text); border-color: var(--border); background: #fff; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
button.calendar-day.is-open:hover, button.calendar-day.is-open:focus-visible {
  border-color: var(--brass); background: var(--parchment);
}
.calendar-day.is-today { font-weight: 700; color: var(--walnut); }
button.calendar-day.is-today { border-color: var(--brass); }

/* Same reasoning as .booking-calendar above — a partial last row (e.g. one
   trailing time slot) centers instead of sitting flush-left. */
.booking-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: var(--container-narrow); margin-inline: auto; margin-block-end: var(--space-9); }
.booking-slot {
  padding-block: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  min-height: 48px; flex: 0 0 110px;
}
.booking-slot:hover, .booking-slot:focus-visible { border-color: var(--brass); background: var(--parchment); }

.booking-summary {
  max-width: var(--container-narrow); margin: 0 auto var(--space-7); padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--parchment);
}
.booking-summary dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 700; }
.booking-summary dd { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 19px; }
.booking-summary dd:last-child { margin-block-end: 0; }

.confirmation { max-width: var(--container-narrow); margin-inline: auto; text-align: center; padding-block: var(--space-6); }
.confirmation-mark { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--brass); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); color: var(--brass); font-size: 24px; }
.confirmation p { color: var(--text-dim); font-size: 17px; }
.confirmation-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-block-start: var(--space-6); }

/* ── Contact ── */
.contact-page { text-align: center; padding-block: var(--space-7); }
.contact-sub { max-width: 480px; margin: 0 auto var(--space-5); color: var(--text-dim); }
.contact-cards { display: flex; gap: var(--space-5); justify-content: center; margin: var(--space-7) 0; flex-wrap: wrap; }
.contact-card {
  display: block; padding: var(--space-6) var(--space-7); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); min-width: 200px; transition: border-color 0.2s var(--ease);
}
.contact-card:hover { border-color: var(--brass); text-decoration: none; }
.contact-card h3 { margin: 0 0 var(--space-2); color: var(--brass); }
.contact-location { color: var(--text-dim); margin-block-end: var(--space-7); }

/* ── Story / Atelier long-form pages ── */
.prose { max-width: var(--container-narrow); margin-inline: auto; padding-block: var(--space-8); }
.prose h2 { margin-block-start: var(--space-8); }
.prose p { color: var(--text-dim); font-size: 17px; }

/* ── Footer ── */
.site-footer { background: var(--ink); color: var(--text-inverse-dim); padding-block: var(--space-7); border-block-start: 1px solid var(--ink-line); }
.footer-inner { max-width: var(--container); margin-inline: auto; padding-inline: 28px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-brand { display: flex; align-items: flex-start; gap: var(--space-4); }
.footer-logo { height: 40px; width: 40px; border-radius: 50%; }
.footer-brand-name { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-inverse); margin-block-end: var(--space-1); }
.footer-nav h4, .footer-contact h4 { color: var(--text-inverse); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-block-end: var(--space-3); }
.footer-nav-columns { display: flex; gap: var(--space-5); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-nav a { color: var(--text-inverse-dim); font-size: 14px; white-space: nowrap; }
.footer-nav a:hover { color: var(--brass-soft); }
.footer-contact p { margin: 0 0 var(--space-2); font-size: 14px; }
.footer-contact a { color: var(--brass-soft); }
.footer-socials { display: flex; gap: var(--space-3); margin-block-end: var(--space-3); }
.footer-social-link { color: var(--text-inverse-dim); display: inline-flex; }
.footer-social-link:hover { color: var(--brass-soft); }
.footer-social-link svg { width: 22px; height: 22px; }

/* Map: a static location marker for laptops/desktops/tablets. On phones the
   iframe is replaced by a plain directions link — a static Google Maps
   embed is mostly dead weight (fonts, tiles, a non-interactive pinch-zoom
   surface) on a small screen where "open this in the Maps app" is what
   someone actually wants. */
.footer-map { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-map-frame { width: 100%; height: 150px; border: 0; border-radius: var(--radius); display: block; }
.footer-directions-mobile { display: none; color: var(--brass-soft); font-size: 14px; }
.footer-bottom {
  max-width: var(--container); margin-inline: auto; padding-inline: 28px;
  margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-dark);
  font-size: 12px; color: var(--text-inverse-dim);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.footer-credit a { color: var(--text-inverse-dim); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--brass-soft); }

/* ── Admin (kept simple/functional) ── */
.admin { background: var(--paper); font-family: var(--font-sans); }
.admin h1, .admin h2 { font-family: var(--font-sans); font-weight: 700; }
.admin-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding-block: 16px; padding-inline: 24px; gap: var(--space-3) var(--space-5);
  background: var(--ink); border-block-end: 1px solid var(--ink-line);
}
.admin-header .site-logo { font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-soft); }
.admin-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.admin-header nav a, .admin-header nav button { color: var(--text-inverse-dim); font-size: 13px; background: none; border: none; cursor: pointer; font-family: inherit; }
.admin-header nav a:hover, .admin-header nav button:hover { color: var(--brass-soft); }

/* Keeps a wide table's overflow contained to a horizontal scroll of just the
   table, instead of the whole page overflowing sideways on a narrow phone. */
.table-scroll { overflow-x: auto; margin-block-start: var(--space-5); }
.table-scroll .admin-table { margin-block-start: 0; }

.admin-table { width: 100%; border-collapse: collapse; margin-block-start: var(--space-5); font-size: 14px; }
.admin-table th, .admin-table td { text-align: start; padding-block: 12px; padding-inline: 10px; border-block-end: 1px solid var(--border); white-space: nowrap; }
.admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.admin-table .actions { display: flex; gap: var(--space-3); }

.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.status-pending   { background: #f3e9d2; color: #7a5a12; }
.status-confirmed { background: var(--success-bg); color: var(--success-text); }
.status-cancelled { background: var(--error-bg); color: var(--error-text); }
.status-completed { background: #e4e9f2; color: #2d3d63; }
.status-no_show   { background: #ece4e4; color: #6b3a3a; }
.status-pending_payment  { background: #f3e9d2; color: #7a5a12; }
.status-payment_link_sent { background: #e4e9f2; color: #2d3d63; }
.status-paid      { background: var(--success-bg); color: var(--success-text); }
.status-fulfilled { background: var(--success-bg); color: var(--success-text); }
.status-published { background: var(--success-bg); color: var(--success-text); }
.status-archived  { background: #ece7de; color: var(--text-dim); }
.status-in_stock     { background: var(--success-bg); color: var(--success-text); }
.status-out_of_stock { background: var(--error-bg); color: var(--error-text); }

/* ── Admin: catalogue filter bar ── */
.admin-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-5); padding: var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.admin-search { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; min-width: 220px; }
.admin-filter-group { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.admin-filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; margin-inline-end: var(--space-1); }
.admin-filter-group a { padding: 4px 9px; border-radius: 20px; color: var(--text-dim); }
.admin-filter-group a.active { background: var(--ink); color: var(--paper); }

.admin-product-cell { display: flex; align-items: center; gap: var(--space-3); }
.admin-product-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.admin-product-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--parchment); color: var(--text-dim); }

.admin-empty-state {
  text-align: center; padding: var(--space-9) var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius);
  margin-block-start: var(--space-5); background: #fff;
}
.admin-empty-state p:first-child { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin-block-end: var(--space-2); }
.admin-empty-state p { color: var(--text-dim); }
.admin-empty-state .btn { margin-block-start: var(--space-4); }

.admin-notice { background: #fbf3df; border: 1px solid #e0c890; color: #6b4f10; padding: 12px 16px; border-radius: var(--radius-sm); margin-block-end: var(--space-5); font-size: 14px; }

/* ── Admin: product form ── */
.admin-form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-7); align-items: start; }
.admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.admin-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-block-end: var(--space-5); background: #fff; }
.admin-fieldset legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-dim); padding-inline: var(--space-2); }
.field-label-static { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-dim); margin-block-end: var(--space-2); }

.admin-size-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--space-4); align-items: end; padding-block: var(--space-3); border-block-end: 1px solid var(--border); }
.admin-size-row:last-child { border-block-end: 0; padding-block-end: 0; }
.admin-size-row .field { margin: 0; }
.admin-size-remove { white-space: nowrap; }

.admin-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-4); margin-block-end: var(--space-5); }
.admin-image-item { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--parchment); }
.admin-image-preview { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.admin-image-primary-tag {
  position: absolute; inset-block-start: 6px; inset-inline-start: 6px;
  background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 20px;
}
.admin-image-actions { display: flex; justify-content: center; gap: var(--space-2); padding: 6px; background: #fff; font-size: 12px; }
.btn-link-danger { color: var(--error-text); }

.admin-form-footer { display: flex; align-items: center; gap: var(--space-4); margin-block-start: var(--space-6); }
.admin-danger-zone { margin-block-start: var(--space-7); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); }
.admin-danger-zone .field-hint { max-width: 480px; }

.admin-page-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.admin-stats { display: flex; gap: var(--space-4); margin: var(--space-5) 0; flex-wrap: wrap; }
.stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 26px; background: #fff; min-width: 140px; }
.stat-value { display: block; font-family: var(--font-sans); font-size: 28px; font-weight: 700; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }

.admin-section { margin-block-start: var(--space-8); }
.back-link { margin-block-end: var(--space-5); font-size: 13px; }
.inline-form { display: inline; }

/* ── Responsive (mobile-first overrides below apply as viewport grows;
     base styles above already target the smallest screens) ── */
@media (max-width: 900px) {
  .hero { min-height: 92svh; text-align: center; }
  .hero-copy { padding-block: 100px; padding-inline: 24px; text-align: center; }
  .hero-copy h1 { margin-inline: auto; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero .hero-actions { align-items: center; }
  .editorial, .editorial.reverse { grid-template-columns: 1fr; padding-block: var(--space-8); }
  .editorial .editorial-visual { order: -1; }
  .editorial-copy { text-align: center; }
  .steps-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .step-card { border-inline-start: none; border-inline-start-width: 0; padding-inline-start: 0; border-block-start: 1px solid var(--border); padding-block-start: var(--space-5); }
  .product-detail { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-map { grid-column: 1 / -1; }
  .footer-nav-columns { flex-direction: column; gap: var(--space-2); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .site-header nav.primary-nav { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-row { grid-template-columns: 1fr; }
  .admin-size-row { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 1fr; gap: var(--space-2); text-align: center; }
  .cart-item-thumb { margin-inline: auto; }
}
@media (max-width: 760px) {
  main { padding-inline: 18px; }
  .section { padding-block: var(--space-8); }
  .site-header { padding-inline: 18px; }
  .site-logo-text { display: none; }
  .cta-band { padding-block: var(--space-8); padding-inline: 18px; }
  .notes-row { flex-direction: column; gap: var(--space-1); }
  .footer-map-frame { display: none; }
  .footer-directions-mobile { display: inline-flex; }

  .admin-header { padding-inline: 16px; }
  .admin-header nav a, .admin-header nav button {
    padding-block: 6px; min-height: 32px; display: inline-flex; align-items: center;
  }
  .admin-page-header h1 { font-size: 22px; }
  .admin-stats { gap: var(--space-3); }
  .stat { min-width: calc(50% - var(--space-3) / 2); padding: 14px 18px; }
  .admin-filter-bar { padding: var(--space-3); }
  .admin-search { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 430px) {
  .booking-slot { flex-basis: calc((100% - var(--space-3)) / 2); }
  .contact-cards { flex-direction: column; align-items: center; }
}

/* ── RTL readiness ──
   Logical properties above already flip automatically under dir="rtl".
   This covers the handful of places a directional icon/arrow needs mirroring. */
[dir="rtl"] .btn-link::after,
[dir="rtl"] .featured-cta a::after { transform: scaleX(-1); display: inline-block; }