/* ====================================================================
   NigerArts — site theme

   Colours come from the brand guide and nothing outside it is used:

       Fond principal  #100F16
       Indigo          #2A3560
       Terracotta      #C1592E
       Or / accent     #E5A05C
       Sable           #EAD9BA

   TWO THEMES
   ----------
   The guide names the dark background as the primary treatment, so dark
   is the default. A visitor can switch to light from the header, and the
   choice is remembered in their browser.

   The mechanism is one attribute on <html>: `data-theme="light"`. Every
   colour below is a custom property, so switching themes redefines a
   dozen values and the whole site follows — no duplicated rules, no
   second stylesheet.

   Three areas stay dark in BOTH themes, deliberately:
     * the hero  — it is the brand banner, and the petal pattern and
                   gradient only read on dark
     * the footer — same reason, and it anchors the page
     * the lightbox — a photo viewer should not glow around the photo
   Their colours are therefore written literally rather than as tokens,
   so a theme switch cannot reach in and flip them.
   ==================================================================== */

:root {
  /* --- brand literals: identical in both themes --- */
  --terracotta:    #c1592e;
  --terracotta-hi: #d2673a;
  --indigo:        #2a3560;
  --gold:          #e5a05c;
  --sand-brand:    #ead9ba;
  --cream-brand:   #f5efe2;

  /* --- type --- */
  --display: 'Poppins', 'Century Gothic', Futura, 'Trebuchet MS',
             system-ui, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
          sans-serif;

  --radius:    16px;
  --radius-sm: 10px;

  /* ---------------- dark theme (default) ---------------- */

  --bg:        #100f16;
  --panel:     #1b1a26;   /* cards, dropdowns */
  --panel-2:   #211f2e;   /* inputs, hovers */
  --line:      #322f42;   /* borders and rules */

  --text:      #f5efe2;   /* body copy */
  --text-soft: #ead9ba;   /* lead paragraphs, captions */
  --heading:   #f5efe2;
  --muted:     #9c97ac;   /* secondary text */

  /* Links and prices. Gold on dark: against #100F16 it carries far more
     contrast than terracotta, and the price is what a shopper scans
     for. On light the roles swap — see the light block below. */
  --accent:        #e5a05c;
  --accent-strong: #e5a05c;
  --accent-hover:  #ead9ba;

  --accent-soft: rgba(193, 89, 46, .16);
  --stock-bg:    rgba(120, 170, 120, .16);
  --stock-text:  #93c893;

  --header-bg:  rgba(16, 15, 22, .88);
  --sticky-bg:  rgba(16, 15, 22, .96);
  --shadow:     0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);

  /* Bootstrap's burger icon is a background SVG, so its colour has to be
     baked into a data-URI rather than set with `color`. */
  --burger: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f5efe2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  /* Chrome's clear-search "x" is black; invert it on dark only. */
  --search-clear-filter: invert(1);
}

/* ---------------- light theme ---------------- */

[data-theme="light"] {
  --bg:        #faf6ee;   /* warm, not white: the brand is warm */
  --panel:     #ffffff;
  --panel-2:   #f2ebdd;
  --line:      #e3d9c6;

  --text:      #241f1c;
  --text-soft: #4a423b;
  --heading:   #2a3560;   /* indigo, as the light logo lockup uses */
  --muted:     #6b6255;   /* the guide's own muted tone */

  /* Gold fails on a light background — roughly 1.8:1 against #FAF6EE.
     Terracotta reaches about 4.6:1, so it takes over links and prices
     here while gold stays for tinted fills only. */
  --accent:        #a8481f;
  --accent-strong: #c1592e;
  --accent-hover:  #8c3a17;

  --accent-soft: rgba(193, 89, 46, .12);
  --stock-bg:    rgba(58, 122, 58, .12);
  --stock-text:  #2f6b34;

  --header-bg:  rgba(250, 246, 238, .90);
  --sticky-bg:  rgba(250, 246, 238, .96);
  --shadow:     0 1px 3px rgba(36, 31, 28, .07), 0 14px 34px rgba(36, 31, 28, .12);

  --burger: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23241f1c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --search-clear-filter: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.section-title, .brand-mark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--heading);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: none; }

hr { border-color: var(--line); opacity: 1; }

/* Bootstrap's muted grey is tuned for white pages and disappears here. */
.text-muted { color: var(--muted) !important; }

::selection { background: var(--terracotta); color: #fff; }

/* Visible keyboard focus, since the theme removes most default outlines. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- header ---------- */

.announcement {
  background: var(--terracotta);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Environment banner — staging and local only, never production.

   Hazard stripes rather than a flat bar: the announcement strip directly
   below it is already solid terracotta, and two coloured bars stacked on
   top of each other read as one piece of decoration. This has to survive
   being glanced at. */
.env-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .45rem 1rem;
  font-size: .78rem;
  color: #1b1200;
  background-color: var(--gold);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, .13) 0 10px,
    transparent 10px 20px
  );
  border-bottom: 1px solid rgba(0, 0, 0, .22);
}

.env-banner strong {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: .72rem;
  padding: .1rem .45rem;
  border-radius: 3px;
  background: #1b1200;
  color: var(--gold);
}

.env-banner span { font-weight: 500; }

@media (max-width: 480px) {
  .env-banner { font-size: .72rem; gap: .4rem; }
}

/* Staff bar: inside the pinned header on product pages, for logged-in
   staff only. Carries the way back to the admin and, on a draft, says
   that it is one. Kept to one slim line so it costs little screen. */
.staff-bar {
  background: var(--indigo);
  color: var(--cream-brand);
  font-size: .85rem;
}
.staff-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  padding-block: .4rem;
}
.staff-bar-state { font-weight: 600; color: var(--gold); }

/* "← Retour", floating at the bottom of the screen for staff. Indigo
   with a gold ring so it reads as the shop's own control, not part of
   the page being previewed. --action-bar-h is set by staff_bar.js to
   the height of the phone's price/WhatsApp bar, so the button floats
   just above it instead of covering it; 0 where there is no such bar. */
.staff-back {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: calc(var(--action-bar-h, 0px) + max(1rem, env(safe-area-inset-bottom)));
  z-index: 1025; /* above the action bar (1020), below the lightbox (2000) */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--indigo);
  color: var(--cream-brand);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.staff-back:hover,
.staff-back:focus-visible { background: #34417a; color: #fff; }
.staff-back:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* "Page not found". */
.not-found { max-width: 44rem; }
.not-found-code {
  font-family: var(--display);
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--accent);
}
.not-found-search { display: flex; gap: .5rem; margin: 1.5rem 0 1rem; max-width: 30rem; }
.not-found-search .form-control { min-width: 0; }
.not-found-links a { font-weight: 600; }

.site-header {
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line) !important;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-header .navbar { padding: .6rem .85rem; }

/* The logo is an image, so no type styling applies to it — this only
   sets how large it renders. The SVG's own viewBox is cropped tight to
   the artwork, so this height is (almost) all visible ink rather than
   partly whitespace. The brand guide's clear space (one petal width)
   comes from the navbar padding. */
.brand-logo {
  height: 72px;
  width: auto;
  display: block;
}

.navbar-toggler {
  border-color: var(--line);
  border-radius: 12px;
  padding: .5rem .65rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(229, 160, 92, .25); }
.navbar-toggler-icon { background-image: var(--burger); }

.navbar-nav .nav-link {
  color: var(--text);
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 500;
  padding: .5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.navbar-nav .nav-link:hover { background: var(--panel-2); color: var(--accent); }
.navbar-nav .show > .nav-link { background: var(--accent-soft); color: var(--accent); }

.dropdown-menu {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .5rem;
  margin-top: .55rem !important;
}
.dropdown-item {
  color: var(--text);
  font-size: .93rem;
  font-weight: 500;
  padding: .6rem .9rem;
  border-radius: 8px;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--accent-soft); color: var(--accent); }
.dropdown-divider { border-color: var(--line); }

.form-control, .form-select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  padding-left: .95rem;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus {
  background: var(--panel-2);
  border-color: var(--terracotta);
  color: var(--text);
  box-shadow: 0 0 0 .2rem rgba(193, 89, 46, .25);
}
input[type="search"]::-webkit-search-cancel-button {
  filter: var(--search-clear-filter);
  opacity: .5;
}

/* <picture> only chooses between WebP and JPEG; laid out as if the <img>
   inside were there on its own, so the grid, tile and swipe rules that
   size photos keep applying unchanged. */
picture { display: contents; }

/* Said when search had to look harder than the words as typed. */
.search-notice { color: var(--muted); margin: 0 0 1rem; }

/* ---------- legal pages ---------- */

.legal-text { max-width: 46rem; padding-bottom: 1rem; }
.legal-text h2 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2rem 0 .6rem;
}
.legal-text p, .legal-text li { line-height: 1.65; }
.legal-text ul { padding-left: 1.2rem; }
.legal-text li + li { margin-top: .45rem; }
.legal-updated { color: var(--muted); font-size: .9rem; }

.nav-prefs {
  display: flex;
  align-items: center;
  gap: .6rem;
}
@media (max-width: 991.98px) {
  .nav-prefs { padding-top: .6rem; }
}

.lang-switch {
  gap: .1rem;
  background: var(--panel-2);
  border-radius: 999px;
  padding: .15rem;
}
.lang-opt {
  display: inline-block;
  padding: .25rem .6rem;
  font-family: var(--display);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  color: var(--muted);
}
.lang-opt:hover { color: var(--accent); text-decoration: none; }
.lang-opt.active { color: #fff; background: var(--terracotta); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  /* The last stop is literal #100F16, not var(--bg): the hero stays dark
     in the light theme, and using the page background here made it fade
     to cream at the bottom right. */
  background:
    radial-gradient(120% 140% at 82% 18%, rgba(193, 89, 46, .38) 0%, transparent 58%),
    linear-gradient(155deg, var(--indigo) 0%, #1d2440 42%, #100f16 100%);
  /* Literal, not tokens: the hero stays dark in the light theme too. */
  color: #f5efe2;
  padding: 5.5rem 0;
  border-bottom: 1px solid #322f42;
}

/* The brand's tiling petal band, as a faint texture rather than a
   pattern you actively notice. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: url("../brand/hero-pattern.83d5f44ae130.svg") repeat-x bottom center / auto 90px;
  opacity: .22;
  pointer-events: none;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 {
  color: #fff;
  font-size: clamp(2.15rem, 5.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 1.15rem;
}
.hero p {
  color: rgba(245, 239, 226, .82);
  font-size: 1.08rem;
  max-width: 34rem;
  margin-bottom: 2rem;
}

/* ---------- buttons ---------- */

.btn-clay, .btn-primary {
  background: var(--terracotta);
  border: 0;
  color: #fff;
  font-family: var(--display);
  border-radius: 999px;
  padding: .75rem 1.9rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(193, 89, 46, .35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-clay:hover, .btn-primary:hover {
  background: var(--terracotta-hi);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(193, 89, 46, .45);
}

/* WhatsApp's own brand green, not a theme token - like the footer and
   the hero, this button should read the same regardless of light/dark. */
.btn-whatsapp {
  background: #25d366;
  border: 0;
  color: #fff;
  font-family: var(--display);
  border-radius: 999px;
  padding: .75rem 1.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-whatsapp:hover {
  background: #1ebe5b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
}
.btn-whatsapp.btn-sm { padding: .5rem 1.2rem; font-size: .9rem; }

.btn-outline-secondary, .btn-outline-dark {
  border-radius: 999px;
  border-color: var(--line);
  color: var(--text);
  font-weight: 500;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
  background: var(--accent-soft);
  border-color: var(--terracotta);
  color: var(--accent);
}

/* ---------- product cards ---------- */

.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--terracotta);
}

.product-thumb, .product-thumb-empty {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--panel-2);
}
.product-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}

.product-card .card-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: .2rem;
}
.product-card a:hover .card-title { color: var(--accent); }

.product-card .card-summary {
  font-size: .84rem;
  color: var(--muted);
  margin-bottom: .7rem;
}

.price-eur {
  font-family: var(--display);
  font-weight: 700;
  color: var(--accent-strong);
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.price-xof { font-size: .76rem; color: var(--muted); }

.badge-soldout, .badge-featured, .badge-stock {
  border-radius: 999px;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  padding: .4em .8em;
}
.badge-soldout { background: var(--panel-2); color: var(--muted); }
.badge-featured { background: var(--accent-soft); color: var(--accent-strong); }
.badge-stock {
  background: var(--stock-bg);
  color: var(--stock-text);
  display: inline-flex;
  align-items: center;
  gap: .35em;
}

/* ---------- category tiles ---------- */

.category-tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.category-tile:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--terracotta);
}
.category-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.category-tile:hover img { transform: scale(1.06); }
.category-tile .tile-label {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(16, 15, 22, .92));
  color: #fff;
  padding: 2.2rem 1rem .9rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.category-tile .tile-count {
  display: block;
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 400;
  color: rgba(245, 239, 226, .7);
  margin-top: .1rem;
}

/* ---------- product detail ---------- */

.gallery-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: var(--shadow);
}
.gallery-thumbs { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .8rem; }
.gallery-thumb {
  width: 72px; height: 72px;
  object-fit: cover;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  opacity: .7;
  transition: border-color .15s ease, opacity .15s ease;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--terracotta); opacity: 1; }

.product-lead {
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--text-soft);
}

.enquiry-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* ---------- structure ---------- */

.section-title { font-size: 1.55rem; }
.section-title.h4, .section-title.h5 { font-size: 1.35rem; }

.breadcrumb-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.breadcrumb-bar .breadcrumb { margin: 0; padding: .75rem 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
.breadcrumb-item.active { color: var(--muted); }

.empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.empty-state code {
  background: var(--panel-2);
  color: var(--accent-strong);
  padding: .15em .45em;
  border-radius: 5px;
}

.page-link {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px !important;
  margin: 0 .15rem;
  font-weight: 500;
}
.page-link:hover { background: var(--panel-2); color: var(--accent); }
.page-item.active .page-link {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.page-item.disabled .page-link { color: var(--muted); background: transparent; }

.alert { border-radius: var(--radius-sm); }

/* ---------- footer ---------- */

/* Dark in both themes, so these colours are literal. */
.site-footer {
  background: #0c0b11;
  color: rgba(245, 239, 226, .62);
  border-top: 1px solid #322f42;
  padding-top: 3.2rem !important;
  padding-bottom: 2rem !important;
}
.site-footer a { color: rgba(245, 239, 226, .62); }
.site-footer a:hover { color: #e5a05c; }
.footer-logo { height: 54px; width: auto; }
.footer-heading {
  color: #f5efe2;
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .9rem;
}
.footer-muted { color: rgba(245, 239, 226, .48); }
.footer-rule { border-color: rgba(255, 255, 255, .12); margin: 2.2rem 0 1.2rem; }

/* ====================================================================
   Mobile
   --------------------------------------------------------------------
   The phone is the primary screen, so these rules are about touch
   rather than just narrower columns: targets large enough to hit
   reliably, no accidental zoom on focus, and a photo gallery you swipe
   instead of tapping small thumbnails.
   ==================================================================== */

.container, .site-header .navbar {
  padding-left: max(.85rem, env(safe-area-inset-left));
  padding-right: max(.85rem, env(safe-area-inset-right));
}

a, button, .nav-link, .lang-opt, .dropdown-item {
  -webkit-tap-highlight-color: transparent;
}

/* Stop iOS Safari zooming the page when a field gains focus, which it
   does whenever the font is under 16px. */
@media (max-width: 991.98px) {
  .form-control, .form-select, input[type="search"] { font-size: 16px; }
}

@media (max-width: 991.98px) {

  /* --- touch targets: 44px is the accepted minimum --- */

  .navbar-nav .nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: .75rem .9rem;
  }
  .dropdown-item { min-height: 46px; display: flex; align-items: center; }
  .lang-opt { min-width: 46px; min-height: 38px; display: inline-flex;
              align-items: center; justify-content: center; }
  .page-link { min-width: 44px; min-height: 44px; display: flex;
               align-items: center; justify-content: center; }

  .product-card:active { transform: scale(.985); }
  .btn-clay:active, .btn-primary:active { transform: translateY(1px); }

  /* --- layout --- */

  .site-header .navbar { padding-top: .5rem; padding-bottom: .5rem; }
  .brand-logo { height: 52px; }

  .mobile-search { margin-top: .6rem; }

  .navbar-collapse {
    padding: .5rem 0 1rem;
    margin-top: .5rem;
    border-top: 1px solid var(--line);
  }
  .navbar-collapse .dropdown-menu {
    box-shadow: none;
    border: 0;
    background: var(--panel-2);
    margin-left: .5rem;
  }

  .hero { padding: 3.2rem 0; }
  .hero::after { height: 60px; background-size: auto 60px; }

  .section-title { font-size: 1.3rem; }
  .section-title.h4, .section-title.h5 { font-size: 1.2rem; }

  .product-card { border-radius: 12px; }
  .product-card .card-title { font-size: .92rem; }
  .product-card .card-summary { display: none; }
  .price-eur { font-size: 1rem; }

  .category-tile { border-radius: 12px; }
  .category-tile .tile-label { font-size: .95rem; padding: 1.8rem .8rem .75rem; }

  .breadcrumb-bar { font-size: .78rem; }
  .breadcrumb-bar .breadcrumb { flex-wrap: nowrap; overflow-x: auto; }
  .breadcrumb-bar .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb-item { white-space: nowrap; }

  .footer-logo { height: 46px; }
}

/* --------------------------------------------------------------------
   Swipeable product gallery

   On a phone the photos become a horizontal, snap-scrolling strip: the
   natural gesture, and it needs no JavaScript. On larger screens the
   main-image-plus-thumbnails layout returns.
   -------------------------------------------------------------------- */

.gallery-swipe { display: none; }

@media (max-width: 767.98px) {
  .gallery-desktop { display: none; }

  .gallery-swipe {
    display: flex;
    /* Without this, flex's default `stretch` pulls each photo to the
       container height and the 1:1 aspect-ratio below is ignored. */
    align-items: flex-start;
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edges so the next photo peeks in, which is
       what tells the user it can be swiped. */
    margin-left: calc(-1 * max(.85rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(.85rem, env(safe-area-inset-right)));
    padding: 0 max(.85rem, env(safe-area-inset-right));
  }
  .gallery-swipe::-webkit-scrollbar { display: none; }

  .gallery-swipe img {
    flex: 0 0 88%;
    /* A flex item's automatic minimum size is its content size, and for
       an image that means its full pixel width — which overrides the
       88% basis and blows the photo up to its natural size. Resetting
       min-width lets the basis (and the aspect ratio) apply. */
    min-width: 0;
    max-width: 88%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    scroll-snap-align: center;
    background: var(--panel-2);
  }

  .gallery-counter {
    text-align: center;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    margin-top: .55rem;
  }
}

/* --------------------------------------------------------------------
   Sticky action bar on the product page

   Keeps the price and the enquiry button reachable however far down the
   description the customer has scrolled. Becomes the add-to-cart bar in
   phase 2.
   -------------------------------------------------------------------- */

.action-bar { display: none; }

@media (max-width: 767.98px) {
  .action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: var(--sticky-bg);
    backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--line);
    padding: .7rem max(.85rem, env(safe-area-inset-right))
             calc(.7rem + env(safe-area-inset-bottom))
             max(.85rem, env(safe-area-inset-left));
    margin: 1.5rem calc(-1 * max(.85rem, env(safe-area-inset-left))) 0;
  }
  .action-bar .btn-clay,
  .action-bar .btn-whatsapp { padding: .7rem 1.4rem; white-space: nowrap; }
  .action-bar .price-eur { font-size: 1.15rem; line-height: 1.1; }

  /* The in-page enquiry panel would duplicate the sticky bar. */
  .enquiry-panel { display: none; }
}

/* Users who prefer reduced motion get no transforms or smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover, .category-tile:hover { transform: none; }
}

/* ====================================================================
   Photo lightbox
   ==================================================================== */

/* Anything that opens the lightbox says so on hover. */
.is-zoomable { cursor: zoom-in; }

/* Stops the page scrolling behind the overlay. */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(12, 11, 17, .96);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  max-width: min(1200px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.lightbox-image {
  max-width: 100%;
  /* Leaves room for the caption and the counter below. */
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #1b1a26;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

/* The lightbox is dark in both themes — a photo viewer should not glow
   around the photo — so its colours are literal. */
.lightbox-caption {
  color: #ead9ba;
  font-size: .88rem;
  text-align: center;
  max-width: 60ch;
  margin: 0;
}
.lightbox-caption[hidden] { display: none; }

.lightbox-counter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  color: #9c97ac;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.lightbox-close,
.lightbox-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #322f42;
  background: rgba(27, 26, 38, .82);
  color: #f5efe2;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.lightbox-close[hidden],
.lightbox-nav[hidden] { display: none; }

.lightbox-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
}

.lightbox-nav {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .lightbox { padding-left: .5rem; padding-right: .5rem; }
  /* On a phone the photo fills the screen and you swipe instead —
     side buttons would only cover the image. */
  .lightbox-nav { display: none; }
  .lightbox-image { max-height: calc(100vh - 8rem); }
  .lightbox-figure { max-width: 100%; }
}

/* ====================================================================
   Theme toggle
   ==================================================================== */

/* The two logo lockups are both in the HTML and CSS shows the right
   one. Swapping the src in JavaScript would flash the wrong logo on
   every page load, and the file is tiny either way. */
.brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-dark { display: none; }
[data-theme="light"] .brand-logo-light { display: block; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover {
  color: var(--accent-strong);
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}

/* One icon per theme: the moon means "switch to dark", the sun means
   "switch to light", so the button shows what it will do. */
.theme-toggle .icon-to-light { display: none; }
.theme-toggle .icon-to-dark { display: block; }
[data-theme="light"] .theme-toggle .icon-to-light { display: block; }
[data-theme="light"] .theme-toggle .icon-to-dark { display: none; }

/* Colour changes are instant by default; this softens the switch
   without slowing anything else down. Cards and buttons keep their own
   transitions. */
.theme-transition,
.theme-transition .site-header,
.theme-transition .product-card,
.theme-transition .category-tile,
.theme-transition .dropdown-menu,
.theme-transition .form-control,
.theme-transition .breadcrumb-bar,
.theme-transition .empty-state,
.theme-transition .enquiry-panel {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

@media (max-width: 991.98px) {
  /* Big enough to hit, and sitting beside the language pills. */
  .theme-toggle { width: 44px; height: 44px; }
}

/* On light backgrounds the petal band needs less knocking back. */
[data-theme="light"] .lightbox { background: rgba(12, 11, 17, .96); }