/*
 * 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);
}
/* A flex column, height:100% (grid already stretches the item that tall,
   but setting it explicitly keeps this reliable), so a 1-line vs. 2-line
   title doesn't throw off the row: the price auto-margins to the bottom of
   the link's flexible space, keeping price + "Add to Cart" at the same
   height across every card in a row regardless of how much text sits
   above them. */
.product-card { color: inherit; display: flex; flex-direction: column; height: 100%; }
.product-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.product-card-price { margin-block-start: auto; padding-block-start: var(--space-2); }
.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); }
/* For products whose photo is a tall marketing-poster graphic rather than
   plain centered product photography — cropping to the 4:5 card frame would
   clip the header text/ornament, so show the whole image letterboxed instead. */
.product-card-image--contain img { object-fit: contain; }
.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-info h1 { font-size: clamp(32px, 4vw, 46px); }

/* Product photo gallery: a thumbnail rail (left on desktop) + one large
   photo at a time, stacked via a single set of slides that get shown/hidden
   (see gallery_controller.js) rather than swapped by re-requesting images. */
.product-gallery { display: flex; gap: var(--space-4); align-items: flex-start; }
.product-gallery-thumbs {
  display: flex; flex-direction: column; gap: var(--space-3); flex: 0 0 72px;
}
.product-gallery-thumb {
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  background: none; cursor: pointer; opacity: 0.6; transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}
.product-gallery-thumb img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.product-gallery-thumb:hover { opacity: 0.85; }
.product-gallery-thumb.is-active { opacity: 1; border-color: var(--brass); }
.product-gallery-main { flex: 1; min-width: 0; }
.product-gallery-zoom-trigger {
  display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; line-height: 0;
}
.product-gallery-slide {
  display: none; width: 100%; border-radius: var(--radius); border: 1px solid var(--border);
}
.product-gallery-slide.is-active { display: block; }
/* Poster-style primary photos (see Product#image_crop) only ever render as
   a single full-width slide anyway, so contain vs. cover makes no visual
   difference here — this modifier exists for symmetry with the collection
   card and in case a future gallery layout crops the main photo too. */
.product-gallery--contain .product-gallery-slide { object-fit: contain; }

.product-gallery-lightbox {
  /* Above .site-header's z-index: 100 (sticky), below the mobile-nav
     overlay (200) and toast (150) — those shouldn't be open at the same
     time as this, but staying under them is the safer ordering regardless. */
  position: fixed; inset: 0; z-index: 110; background: rgba(10, 8, 6, 0.92);
  align-items: center; justify-content: center; padding: var(--space-6);
}
/* A class selector and [hidden] have equal specificity, so `display: flex`
   on the bare class would win the cascade and override [hidden]'s
   display:none — gating it behind :not([hidden]) keeps the hidden attribute
   in control of visibility. */
.product-gallery-lightbox:not([hidden]) { display: flex; }
.product-gallery-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius);
}
.product-gallery-lightbox-close {
  position: absolute; top: var(--space-5); right: var(--space-5); width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.4);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.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; }

/* Checkout honeypot — positioned off-screen rather than display:none/hidden,
   which simple bot scripts are more likely to skip filling. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Size picker as pill buttons (one per size/price) rather than a bordered
   list — the radio input stays in the DOM for accessibility/keyboard/no-JS
   support, just visually hidden; selection styling is pure CSS via :has(),
   no JS required. */
.size-pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; }
.size-pill {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: var(--space-2) var(--space-5);
  min-width: 88px; text-align: center; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.size-pill:hover { border-color: var(--walnut); }
.size-pill:has(input:checked) { border-color: var(--walnut); background: var(--walnut); color: #fff; }
.size-pill input[type="radio"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.size-pill-label { font-weight: 700; font-size: 14px; }
.size-pill-price { font-size: 12px; opacity: 0.75; }

.free-delivery-bar { margin-block-end: var(--space-5); }
.free-delivery-bar-message {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--walnut);
  margin: 0 0 var(--space-2);
}
.free-delivery-bar-message.is-unlocked { color: var(--success-text); }
.free-delivery-bar-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.free-delivery-bar-fill {
  height: 100%; border-radius: 999px; background: var(--walnut);
  transition: width 0.4s var(--ease), background 0.4s var(--ease);
}
.free-delivery-bar-fill.is-unlocked { background: var(--success-text); }

.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); }

.coupon-box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); margin-block-end: var(--space-5); }
.coupon-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-block-end: var(--space-2); }
.coupon-form-row { display: flex; gap: var(--space-2); }
.coupon-form-row input[type="text"] { flex: 1; text-transform: uppercase; }
.coupon-error { color: var(--error-text); font-size: 13px; margin-block-start: var(--space-2); }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 14px; margin: 0; }
.coupon-remove { font-size: 13px; }

.cart-items { margin-block-end: var(--space-6); }
.cart-item {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-4);
  padding-block: var(--space-5); 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-total { font-weight: 700; font-family: var(--font-sans); white-space: nowrap; }

/* The quantity stepper and Remove read as one compact action group —
   grouped and right-aligned, not spread across separate grid columns with
   a big gap between them. */
.cart-item-actions { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.qty-stepper-form { display: contents; }
.qty-stepper {
  display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-btn); overflow: hidden;
}
.qty-stepper-btn {
  display: flex; align-items: center; justify-content: center; width: 30px;
  border: none; background: transparent; color: var(--walnut); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background 0.2s var(--ease);
}
.qty-stepper-btn:hover { background: var(--border); }
.qty-stepper-input {
  width: 32px; border: none; border-inline: 1px solid var(--border); text-align: center;
  font-family: inherit; font-size: 13px; padding-block: 7px; padding-inline: 0;
  background: transparent; -moz-appearance: textfield;
}
.qty-stepper-input::-webkit-inner-spin-button, .qty-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* A small button, sized to match the stepper's height rather than .btn's
   full CTA padding — present as a button (clear hit target, not just
   underlined text) without competing in size with the stepper beside it. */
.cart-item-remove {
  border: 1px solid var(--error-text); background: none; border-radius: var(--radius-btn);
  padding-block: 7px; padding-inline: var(--space-3); text-transform: none; letter-spacing: normal;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--error-text); cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cart-item-remove:hover { background: var(--error-text); color: var(--paper); }

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

/* ── Cart drawer ── */
/* Positioned by the dialog element itself (not an inner wrapper) — see
   cart_drawer_controller.js for why the slide/fade only plays once
   .is-open is added a frame after showModal(), not from [open] alone. */
dialog.cart-drawer {
  /* The dialog:modal UA stylesheet defaults inset-inline-start to 0 (part
     of its normal center-the-dialog behavior) — left at that value, it
     and this rule's own width become an over-constrained box with
     inset-inline-end, and per the CSS2.1 resolution rules for that case,
     inset-inline-end is the one that gets silently dropped, pinning the
     drawer to the left instead of the right. Explicitly freeing
     inset-inline-start back to auto is what makes inset-inline-end + width
     actually govern the position. */
  position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0;
  width: min(420px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh;
  border: none; padding: 0; background: var(--paper); color: var(--text);
  box-shadow: var(--shadow-lift);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}
dialog.cart-drawer.is-open { transform: translateX(0); }
dialog.cart-drawer::backdrop { background: rgba(0, 0, 0, 0); transition: background 0.35s var(--ease); }
dialog.cart-drawer.is-open::backdrop { background: rgba(0, 0, 0, 0.45); }

.cart-drawer-inner { display: flex; flex-direction: column; height: 100%; }
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--border); flex-shrink: 0;
}
.cart-drawer-header h2 { margin: 0; font-size: 20px; }
.cart-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: none; color: var(--text);
  cursor: pointer; border-radius: var(--radius-sm);
}
.cart-drawer-close:hover { background: var(--border); }
.cart-drawer-content { flex: 1; overflow-y: auto; padding: var(--space-5); }
.cart-drawer-content .cart-items { margin-block-end: var(--space-4); }
.cart-drawer-content .cart-item {
  grid-template-columns: auto 1fr auto; grid-template-areas: "thumb info total" "thumb actions actions";
  row-gap: var(--space-3);
}
.cart-drawer-content .cart-item-thumb { grid-area: thumb; }
.cart-drawer-content .cart-item-info { grid-area: info; }
.cart-drawer-content .cart-item-total { grid-area: total; }
.cart-drawer-content .cart-item-actions { grid-area: actions; justify-self: start; }

@media (max-width: 480px) {
  dialog.cart-drawer { width: 100vw; }
}

.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); }
.booking-progress-label.is-done:hover { color: var(--brass); border-block-end-color: var(--brass); }


/* 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.
   Setting overflow-x also forces the browser to compute overflow-y as auto
   (per the CSS Overflow spec, you can't pair a non-visible x with a visible
   y), which silently makes this div the sticky-positioning scroll container
   for the header row below — but with no height limit it never actually
   scrolls internally, so a sticky child has nothing to stick against and
   just scrolls away with the page. Bounding the height gives it its own
   scrollbar, which is what makes the sticky header row actually pin. */
.table-scroll {
  overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 280px);
  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); }
/* Not display:flex — that computes the <td> itself as a flex container,
   which drops it out of the table's row-height sizing (it shrinks to its
   own content height instead of stretching to match sibling cells), so its
   bottom border sits higher than the rest of the row. Plain inline layout
   keeps it a normal table-cell, matching every other cell's height and
   vertical-align. */
.admin-table .actions > a:not(:last-child) { margin-inline-end: var(--space-3); }

/* The header row scrolls out of view on a long product list (no way to
   tell which column is which), and the actions column (Edit/Duplicate/
   Archive) scrolls off the right edge on narrower screens since the table
   has 8 columns — pinning both means you never lose either, in either
   scroll direction. A solid background on the pinned cells is needed so
   the rest of the table doesn't show through underneath them. */
.admin-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
}
.admin-table th:last-child, .admin-table td:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--paper);
}
.admin-table thead th:last-child { z-index: 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; }
  .product-gallery { flex-direction: column-reverse; }
  .product-gallery-thumbs { flex-direction: row; flex: 0 0 auto; overflow-x: auto; }
  .product-gallery-thumb { flex: 0 0 64px; }
  .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; }
  /* minmax(260px, 1fr) + a 48px gap needs ~568px to fit 2 columns — more
     than any phone viewport has, so this always collapsed to a single
     column (confirmed via the math, not a guess — see memory). A smaller
     floor + tighter gap gets 2 columns on everything down to a 320px-wide
     phone (iPhone SE): 2*130 + 12 = 272px, comfortably under the ~284px
     available after this breakpoint's own 18px side padding. */
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
  .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; }