/* ============================================================
   niche — flower boutique, Tbilisi. Design tokens.

   Palette is strictly monochrome by brief: warm off-black ink on warm
   off-white paper, one alternating warm-grey block between them. No hue
   accent anywhere in UI chrome -- the only color on the page is the
   flower photography itself, which is exactly what makes it read as
   rich rather than flat. Sections alternate ink / paper / cream like a
   fashion editorial spread, never soft pastel blocks.

   Type: Fraunces (organic, high-contrast display serif) echoes the
   flicked accent on the logo's "i" wherever content is guaranteed Latin
   (headings in en, bouquet names, prices). Lora and Noto Serif Georgian
   sit behind it in the same font-family stack purely for glyph coverage
   -- the browser picks per-character, so ru/uk headings render in Lora
   and ka headings in Noto Serif Georgian automatically, no :lang()
   overrides needed. Inter/Noto Sans Georgian do the same job for body
   text. See app/static/css/fonts.css for why (neither Fraunces nor Lora
   nor Inter ship Georgian glyphs -- confirmed against the Google Fonts
   API directly).
   ============================================================ */

:root {
  --ink: #0d0c09;
  --ink-soft: #4a483f;
  --paper: #ffffff;
  --cream: #f4f1ea;
  --line: rgba(13, 12, 9, 0.14);
  --line-soft: rgba(13, 12, 9, 0.08);
  --line-on-dark: rgba(255, 255, 255, 0.18);
  --line-on-dark-soft: rgba(255, 255, 255, 0.1);

  --shadow-sm: 0 1px 2px rgba(13, 12, 9, 0.1), 0 1px 1px rgba(13, 12, 9, 0.05);
  --shadow-md: 0 10px 28px -10px rgba(13, 12, 9, 0.28);
  --shadow-lg: 0 28px 56px -20px rgba(13, 12, 9, 0.38);

  --radius-btn: 2px;
  --radius-panel: 2px;
  --radius-input: 3px;
  --radius-pill: 999px;
  --radius-tag: 999px;

  --font-display: "Fraunces", "Noto Serif Georgian", "Lora", Georgia, serif;
  --font-body: "Inter", "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(3.5rem, 8vw, 7rem);

  /* Entrances arrive decisively (500ms, strong ease-out); repeated UI
     (hover/press/nav/modal) stays under 220ms with plain ease so it never
     feels "animated". transform+opacity only, gated behind (hover:hover)
     and (pointer:fine), reduced-motion drops movement but keeps fades. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: ease;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-entrance: 560ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

h3 {
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

a,
button {
  touch-action: manipulation;
}

/* ---- Focus & accessibility ---- */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-input);
  z-index: 1000;
  transition: top var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Layout ---- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  display: block;
}

.section {
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--cream {
  background: var(--paper);
  color: var(--ink);
}

.section--paper {
  background: var(--cream);
  color: var(--ink);
}

.section--ink {
  background: var(--ink);
  color: var(--paper);
  --btn-primary-bg: var(--paper);
  --btn-primary-text: var(--ink);
  --line-current: var(--line-on-dark);
  --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 56px -20px rgba(0, 0, 0, 0.6);
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section-head p {
  margin-top: 0.85rem;
  opacity: 0.72;
  font-size: 1.05rem;
  max-width: 60ch;
}

.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.section-head--invert {
  color: var(--paper);
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.8rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn-primary {
  background: var(--btn-primary-bg, var(--ink));
  color: var(--btn-primary-text, var(--paper));
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.btn-outline,
.btn-secondary {
  background: transparent;
  color: currentColor;
  border-color: var(--line-current, var(--ink));
}

@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover,
  .btn-secondary:hover {
    background: currentColor;
    color: var(--paper);
  }
}

.btn-outline-invert {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-on-dark);
}

@media (hover: hover) and (pointer: fine) {
  .btn-outline-invert:hover {
    background: var(--paper);
    color: var(--ink);
  }
}

.btn-small {
  padding: 0.55rem 1.1rem;
  font-size: 0.72rem;
  min-height: 40px;
}

.btn-block {
  width: 100%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 0.15rem;
  transition: gap var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.link-arrow:hover {
  gap: 0.7rem;
  opacity: 0.7;
}

/* ---- Header / nav ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line-soft);
}

/* backdrop-filter lives on this pseudo-element, not .site-header itself --
   filter/backdrop-filter on an element creates a new containing block for
   any position:fixed descendant, which would trap the full-screen mobile
   nav panel (also position:fixed) inside the 84px header bar instead of
   the viewport. Kept off the real element for exactly that reason. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  height: 26px;
  width: auto;
}

.brand-logo--invert {
  filter: invert(1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.nav-links-cta {
  display: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switch {
  display: flex;
  gap: 0.15rem;
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: 0.2rem;
}

.lang-switch a {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.lang-switch a[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
}

.lang-select {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input);
  padding: 0.5rem 1.7rem 0.5rem 0.85rem;
  min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0c09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 16px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle img {
  width: 26px;
  height: 26px;
}

@media (max-width: 780px) {
  .nav-links {
    position: fixed;
    top: 84px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2.5rem var(--gutter);
    gap: 1.75rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    overflow-y: auto;
  }

  .nav-links a {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.75);
  }

  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    color: var(--paper);
  }

  .nav-links-cta {
    display: block;
    margin-top: 0.5rem;
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .lang-switch {
    display: none;
  }

  .lang-select {
    display: block;
  }
}

/* ---- Hero ---- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 3.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  opacity: 0.65;
  margin: 0 0 1.1rem;
}

.hero-copy h1 {
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  line-height: 0.98;
}

.hero-line--em {
  font-style: italic;
  font-weight: 400;
}

.hero-subtitle {
  margin-top: 1.75rem;
  font-size: 1.15rem;
  opacity: 0.7;
  max-width: 40ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.5rem;
}

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-visual img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-mark {
  position: absolute;
  bottom: -1.4rem;
  right: -1.2rem;
  width: 84px;
  height: auto;
  filter: invert(1);
  background: var(--ink);
  border-radius: 50%;
  padding: 1.1rem;
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    max-width: 21rem;
    margin-inline: auto;
  }
}

/* ---- Scroll reveal ---- */

.reveal.reveal-init {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-entrance) var(--ease-out), transform var(--dur-entrance) var(--ease-out);
}

.reveal.reveal-init.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal-init {
    transform: none;
    transition: opacity var(--dur-base) var(--ease);
  }
}

/* ---- Value props ---- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.value-item {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.value-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.5;
}

.value-item h3 {
  margin-top: 0.6rem;
  font-size: 1.2rem;
}

.value-item p {
  margin-top: 0.6rem;
  opacity: 0.7;
  font-size: 0.98rem;
  max-width: 32ch;
}

@media (max-width: 780px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Category strip ---- */

.category-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.category-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--cream);
  padding: 1.75rem;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.category-tile-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.category-tile-arrow {
  font-size: 1.2rem;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .category-tile:hover {
    background: var(--ink);
    color: var(--paper);
  }

  .category-tile:hover .category-tile-arrow {
    transform: translateX(6px);
  }
}

/* ---- Bouquet preview / grid ---- */

.bouquet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.bouquet-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.bouquet-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--cream);
}

.bouquet-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-entrance) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bouquet-card:hover .bouquet-card-media img {
    transform: scale(1.05);
  }
}

.bouquet-card-price {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-tag);
}

.bouquet-card-body {
  padding-top: 1.15rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.bouquet-card-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

.bouquet-card-cat {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  white-space: nowrap;
}

.preview-footer {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ---- Process ---- */

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.process-step {
  border-top: 1px solid var(--line-on-dark);
  padding-top: 1.5rem;
}

.process-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  opacity: 0.5;
}

.process-step h3 {
  margin-top: 0.75rem;
  font-size: 1.25rem;
}

.process-step p {
  margin-top: 0.6rem;
  opacity: 0.68;
  font-size: 0.98rem;
  max-width: 32ch;
}

@media (max-width: 780px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}

/* ---- About ---- */

.about .container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-text h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

.about-text p {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  max-width: 48ch;
  opacity: 0.72;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-tag);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .about .container {
    grid-template-columns: 1fr;
  }

  .about-visual {
    order: -1;
    max-width: 20rem;
    margin-inline: auto;
  }
}

/* ---- Instagram strip ---- */

.instagram-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.instagram-row h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}

.instagram-row p {
  margin-top: 0.6rem;
  opacity: 0.68;
  max-width: 42ch;
}

/* ---- Location / map ---- */

.location-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: stretch;
}

.location-info h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
}

.location-info > p {
  margin-top: 1rem;
  opacity: 0.7;
  font-size: 1.02rem;
  max-width: 40ch;
}

.location-list {
  margin: 2rem 0 0;
  display: grid;
  gap: 1.1rem;
}

.location-row dt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.location-row dd {
  margin: 0.25rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
}

.location-list + .link-arrow {
  margin-top: 1.75rem;
  display: inline-flex;
}

.location-map {
  min-height: 320px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}

.location-map iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
}

@media (max-width: 860px) {
  .location-grid {
    grid-template-columns: 1fr;
  }

  .location-map {
    height: 320px;
  }
}

/* ---- Contact ---- */

.contact .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact-title h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 12ch;
}

.contact-title p {
  margin-top: 1.25rem;
  opacity: 0.68;
  font-size: 1.05rem;
  max-width: 34ch;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.contact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-current, var(--line-soft));
}

.contact-row:last-child {
  border-bottom: 1px solid var(--line-current, var(--line-soft));
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.contact-value {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: right;
}

.contact-value:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .contact .container {
    grid-template-columns: 1fr;
  }
}

/* ---- Footer ---- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line-on-dark);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--paper);
}

.footer-address {
  font-size: 0.85rem;
  opacity: 0.65;
  text-align: right;
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .footer-address {
    text-align: left;
  }
}

/* ---- Disclaimer modal ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 12, 9, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  z-index: 100;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay.is-open {
  opacity: 1;
}

.modal-card {
  background: var(--paper);
  border-radius: var(--radius-panel);
  max-width: 28rem;
  width: 100%;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96) translateY(8px);
  transition: transform var(--dur-base) var(--ease-out);
}

.modal-mark {
  opacity: 0.85;
  margin-bottom: 1rem;
}

.modal-overlay.is-open .modal-card {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .modal-card,
  .modal-overlay {
    transition: opacity var(--dur-base) var(--ease);
    transform: none;
  }
}

.modal-card h2 {
  font-size: 1.4rem;
}

.modal-card p {
  margin-top: 0.9rem;
  opacity: 0.72;
  font-size: 0.95rem;
}

.modal-card .btn {
  margin-top: 1.5rem;
}

/* ---- Catalog page ---- */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}

.page-head h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
}

.page-head p {
  margin-top: 0.9rem;
  opacity: 0.7;
  max-width: 55ch;
  font-size: 1.05rem;
}

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-pill {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1.5px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.filter-pill:hover {
  border-color: var(--ink);
}

.filter-pill[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.sort-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sort-field label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  white-space: nowrap;
}

.sort-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-input);
  padding: 0.6rem 2rem 0.6rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0c09' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 15px;
}

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  opacity: 0.65;
}

/* ---- Bouquet detail ---- */

.bouquet-detail .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.detail-gallery {
  position: sticky;
  top: 100px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cream);
}

.detail-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  opacity: 0.55;
  margin-bottom: 1.25rem;
}

.detail-back:hover {
  opacity: 1;
}

.detail-cat {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.5;
  margin-bottom: 0.6rem;
}

.detail-info h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.detail-desc {
  margin-top: 1.1rem;
  opacity: 0.7;
  font-size: 1.05rem;
  max-width: 48ch;
}

.size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.size-option {
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.size-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.detail-price {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 600;
}

.detail-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

@media (max-width: 860px) {
  .bouquet-detail .container {
    grid-template-columns: 1fr;
  }

  .detail-gallery {
    position: static;
    max-width: 24rem;
    margin-inline: auto;
  }
}

/* ---- Forms (admin) ---- */

.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field input[type="file"],
.field select,
.field textarea {
  font: inherit;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-input);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.field-error {
  font-size: 0.82rem;
  color: #a3324a;
  font-weight: 600;
}

/* ---- Utility ---- */

.stack {
  display: grid;
  gap: 1rem;
}

.text-center {
  text-align: center;
}

.section-head.text-center,
.section-head.text-center p {
  margin-inline: auto;
}

.u-mt-sm { margin-top: 0.75rem; }
.u-mt-md { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 2rem; }
.u-mb-sm { margin-bottom: 0.75rem; }
.u-mb-md { margin-bottom: 1rem; }
.u-mb-lg { margin-bottom: 1.5rem; }
.u-mr-sm { margin-right: 0.5rem; }
.u-scroll-x { overflow-x: auto; }
.u-muted { opacity: 0.7; }