/* ==========================================================================
   Flow the Flower: design system
   A quiet ritual, not a headshop.
   ========================================================================== */

:root {
  /* Color: computed contrast ratios recorded in comments, verified against
     final rendered hex values (see build report, not eyeballed). */
  --bg: #F7F3EC;
  --surface: #FDFBF7;
  --text: #241F1A;
  --text-muted: #6B5F4F;
  --olive: #4A5D3A;
  --olive-hover: #3D4D30;
  --clay: #8C3E24;
  --clay-hover: #7A3620;
  --hairline: rgba(36, 31, 26, 0.08);
  --olive-chip-bg: #E8E8E0;   /* olive @ 12% over surface, recomputed */
  --clay-chip-bg: #EFE4DE;    /* clay @ 12% over surface, recomputed */
  --shadow-rest: 0 1px 2px rgba(36, 31, 26, 0.04);
  --shadow-hover: 0 12px 24px rgba(36, 31, 26, 0.10);

  /* Type */
  --font-serif: Georgia, Charter, "Iowan Old Style", "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-display: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --text-h1: 2.25rem;
  --text-h2: 1.5rem;
  --text-h3: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  /* Spacing scale, 8px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --max-width: 1200px;
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  background: var(--text);
  color: var(--bg);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  z-index: 100;
  transition: top 200ms var(--ease-out-quart);
}
.skip-link:focus {
  top: var(--space-3);
}

/* Focus visibility: never eased, always instant */
:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 2px;
  transition: none;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Layout primitives ---------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
@media (max-width: 768px) {
  section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* ---------- Typography ---------- */
.font-serif { font-family: var(--font-serif); }
h1, h2, .h1, .h2 { font-family: var(--font-serif); font-weight: 400; }

.text-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.text-h1 { font-size: var(--text-h1); line-height: 1.2; }
.text-h2 { font-size: var(--text-h2); line-height: 1.3; }
.text-h3 { font-size: var(--text-h3); line-height: 1.4; font-family: var(--font-sans); font-weight: 600; }
.text-body { font-size: var(--text-body); line-height: 1.6; }
.text-small { font-size: var(--text-small); line-height: 1.5; color: var(--text-muted); }
.text-micro {
  font-size: var(--text-micro);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.muted { color: var(--text-muted); }
.prose { max-width: 60ch; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.brand {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.brand .mark { color: var(--olive); }

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-primary a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
}
.nav-primary a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out-quart);
}
.nav-primary a:hover::after,
.nav-primary a:focus-visible::after {
  transform: scaleX(1);
}
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text);
}
.icon-btn:hover { background: var(--hairline); }

.nav-toggle { display: none; }
@media (max-width: 768px) {
  .nav-primary { display: none; }
  .nav-toggle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: 6px;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 200ms ease, transform 200ms var(--ease-out-quart), box-shadow 200ms ease;
}
.btn-primary {
  background: var(--clay);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--clay-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--olive);
  border: 1.5px solid var(--olive);
}
.btn-secondary:hover { background: var(--olive); color: #FFFFFF; }

.btn-block { width: 100%; }

.link-underline {
  position: relative;
  display: inline-block;
  color: var(--clay);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out-quart);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 769px) {
  .hero { min-height: 70vh; }
}
.hero-watermark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  min-width: 320px;
  opacity: 0.09;
  color: var(--olive);
  pointer-events: none;
}
.hero-content { position: relative; max-width: 640px; }
.hero-content p.lede {
  margin-top: var(--space-4);
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 46ch;
}
.hero-content .btn { margin-top: var(--space-6); }

/* ---------- Section headings ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---------- Chips / tags ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}
.chip-olive { background: var(--olive-chip-bg); color: var(--olive); }
.chip-clay { background: var(--clay-chip-bg); color: var(--clay); }

/* ---------- Product grid ----------
   Flexbox instead of CSS grid on purpose: the catalog size isn't always a
   multiple of the column count, and grid leaves a trailing partial row
   flush left with a wide dead gap beside it. Flex-wrap + justify-content
   centers that last row instead of stranding a single card. */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.product-card {
  flex: 0 1 calc((100% - 2 * var(--space-4)) / 3);
}
@media (max-width: 992px) {
  .product-card { flex-basis: calc((100% - var(--space-4)) / 2); }
}
@media (max-width: 560px) {
  .product-card { flex-basis: 100%; }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--hairline);
  padding: var(--space-4);
  box-shadow: var(--shadow-rest);
  transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
}
.product-card:focus-within {
  box-shadow: var(--shadow-hover);
}
.product-card .figure {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.product-card .figure svg { width: 62%; height: 62%; color: var(--text); }
.product-card .figure img { width: 100%; height: 100%; object-fit: cover; }
.product-card h3 { font-size: var(--text-h2); font-family: var(--font-serif); font-weight: 400; margin-bottom: var(--space-2); }
.product-card .chip { margin-bottom: var(--space-3); align-self: flex-start; }
.product-card .price { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600; color: var(--clay); margin-top: auto; padding-top: var(--space-3); }
.product-card .card-link {
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.product-card .card-link:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 2px;
}
.product-card .view-affordance {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--olive);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-out-quart), transform 400ms var(--ease-out-quart);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; gap: var(--space-5); }
}
.product-visual {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.product-visual svg { width: 70%; height: 70%; color: var(--text); }
.product-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.product-info .chip { margin-bottom: var(--space-3); }
.product-info h1 { margin-bottom: var(--space-3); }
.product-info .price { font-size: var(--text-h2); color: var(--clay); font-family: var(--font-sans); font-weight: 600; margin-bottom: var(--space-5); }
.product-info .description { margin-bottom: var(--space-4); }
.product-info .material-line { margin-bottom: var(--space-6); font-size: var(--text-small); color: var(--text-muted); }
.product-info .btn { margin-bottom: var(--space-3); }

/* ---------- Section divider motif ---------- */
.divider {
  display: flex;
  justify-content: center;
  color: var(--olive);
  opacity: 0.35;
  margin: var(--space-7) 0;
}
.divider svg { width: 120px; height: 24px; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
.footer-grid h3 { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: var(--space-3); }
.footer-grid ul li { margin-bottom: var(--space-2); }
.footer-grid a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ---------- Cart / mobile drawer ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-drawer), visibility 0s linear 320ms;
  z-index: 50;
}
.scrim.is-open {
  opacity: 0.4;
  visibility: visible;
  transition: opacity 320ms var(--ease-drawer), visibility 0s linear 0s;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--surface);
  z-index: 51;
  padding: var(--space-5);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-drawer);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 32px rgba(36,31,26,0.12);
}
.drawer.is-open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.drawer-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.drawer-close:hover { background: var(--hairline); }
.drawer-empty { color: var(--text-muted); font-size: var(--text-small); }

.drawer-nav {
  display: flex;
  flex-direction: column;
}
.drawer-nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  border-bottom: 1px solid var(--hairline);
}
.drawer-nav-link:hover,
.drawer-nav-link:focus-visible {
  color: var(--clay);
}

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Reduced motion: bespoke opacity-only alternatives per interaction,
   with a global safety net below for anything unlisted.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Global safety net first: anything not given a bespoke alternative below
     collapses to an instant, effectively motionless state. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  /* Bespoke opacity-only alternatives: declared after the safety net and
     marked !important on duration so they win the cascade instead of being
     collapsed to 0.001ms by the block above. */
  .product-card { transition: box-shadow 150ms linear !important; }
  @media (hover: hover) and (pointer: fine) {
    .product-card:hover { transform: none; box-shadow: var(--shadow-hover); }
  }

  .nav-primary a::after,
  .link-underline::after {
    transition: opacity 100ms linear !important;
    transform: scaleX(1) !important;
    opacity: 0.4;
  }
  .nav-primary a:hover::after, .nav-primary a:focus-visible::after,
  .link-underline:hover::after, .link-underline:focus-visible::after {
    opacity: 1;
  }

  /* Note: deliberately no "transition: none" here. Some elements (product
     cards) carry both .reveal and another component class with its own
     bespoke reduced-motion transition (e.g. .product-card's hover shadow
     fade); a blanket transition reset on .reveal would win the cascade
     ties against those and silently cancel them. The global safety net
     above already collapses the reveal fade to 0.001ms, which is
     imperceptible, so resting state alone is enough here. */
  .reveal {
    opacity: 1;
    transform: none;
  }

  .btn { transition: background-color 200ms ease !important; }

  .drawer {
    transition: opacity 150ms linear !important;
    transform: none;
    opacity: 0;
    pointer-events: none;
  }
  .drawer.is-open { opacity: 1; pointer-events: auto; }
  .scrim { transition: opacity 100ms linear !important; }

  .skip-link { transition: none !important; }
}