/* ==========================================================================
   VOLUBIA — media.css
   Additive layer, loaded AFTER style.css. It only teaches the existing
   components how to hold photography; no token or component is redefined.
   ========================================================================== */

/* Language flash guard — removed by i18n.js as soon as strings are painted */
html.i18n-wait body { visibility: hidden; }

/* ==========================================================================
   FOREST — #41503A
   The green of the Volubia packaging, promoted to a second brand tone
   alongside the gold. It grounds every dark surface (footer, heroes,
   newsletter) and replaces the paler --olive on green-coded components.
   Cream on #41503A measures 8.1:1, so it is safe as a full background.
   ========================================================================== */
:root {
  --forest:      #41503A;
  --forest-deep: #2C3728;   /* gradients, shadows */
  --forest-dark: #1E251B;   /* near-black green */
  --forest-soft: #5C6E53;   /* borders, hover */
}

/* Full-bleed green section — a lighter alternative to .dark */
.dark--forest { background: var(--forest); }
.dark--forest .tile {
  background: rgba(250, 246, 238, .06);
  border-color: rgba(250, 246, 238, .16);
}
.dark--forest .certs li { border-color: rgba(250, 246, 238, .24); }

/* Footer carries the brand green rather than flat ink. The hairline keeps it
   readable as a separate surface when a .dark--forest section sits above it. */
.footer {
  background: linear-gradient(168deg, var(--forest) 0%, var(--forest-deep) 52%, var(--forest-dark) 100%);
  border-top: 1px solid rgba(250, 246, 238, .12);
}

/* Hero washes: the green glow was the paler --olive-2, now the packaging green */
.hero__bg {
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(174, 139, 69, .42), transparent 62%),
    radial-gradient(52% 52% at 16% 76%, rgba(65, 80, 58, .66), transparent 66%),
    linear-gradient(160deg, #17150F 0%, #232C20 46%, #14120E 100%);
}
.page-hero__bg {
  background:
    radial-gradient(55% 60% at 78% 26%, rgba(174, 139, 69, .36), transparent 62%),
    radial-gradient(50% 55% at 10% 84%, rgba(65, 80, 58, .6), transparent 68%),
    linear-gradient(150deg, #171510, #232C20 55%, #14120E);
}

/* Newsletter band picks up the same green ground */
.news { background: linear-gradient(140deg, var(--forest-deep) 0%, var(--forest-dark) 46%, #14120E 100%); }
.news::before { background: radial-gradient(circle, rgba(174, 139, 69, .32), transparent 68%); }

/* Green-coded components follow the new tone */
.badge--olive { background: var(--forest); }
.frame--olive { background: linear-gradient(165deg, var(--forest-soft), var(--forest-deep)); }
.form-ok {
  background: rgba(65, 80, 58, .12);
  border-color: var(--forest-soft);
  color: var(--forest);
}
.card__add.added { background: var(--forest); border-color: var(--forest); }

/* Product-detail spec ticks and cart accents read green against the cream */
.pd__specs svg { color: var(--forest-soft); }

/* ---------- Generic image fitting inside existing components ---------- */
.frame > img,
.card__media > img,
.post__media > img,
.pd__main > img,
.pd__thumb > img,
.ci__img > img,
.map-frame > img,
.hero__art > img,
.tile__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Product cards — photo replaces the SVG bottle, same hover language */
.card__media > img {
  transition: transform .9s var(--ease);
}
.card:hover .card__media > img { transform: scale(1.06); }
.card__media.has-photo::after { display: none; }

/* Frames keep their inner gold rule above the picture */
.frame > img { position: absolute; inset: 0; }
.frame::before { z-index: 2; }
.frame__caption { z-index: 2; }

/* Product gallery */
.pd__main > img { position: absolute; inset: 0; }
.pd__thumb { overflow: hidden; padding: 0; }

/* Cart line thumbnails */
.ci__img { overflow: hidden; }

/* ---------- Hero photography ---------- */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(20,18,14,.94) 6%, rgba(20,18,14,.66) 46%, rgba(20,18,14,.34) 100%);
  pointer-events: none;
}
html[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(260deg, rgba(20,18,14,.94) 6%, rgba(20,18,14,.66) 46%, rgba(20,18,14,.34) 100%);
}
.hero__art > img {
  border-radius: var(--radius);
  box-shadow: 0 50px 80px -40px rgba(0,0,0,.75);
  animation: floaty 8s ease-in-out infinite;
  aspect-ratio: 4 / 5;
}
.hero__art { z-index: 2; }

/* Page-hero photography (inner pages) */
.page-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.page-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,18,14,.92), rgba(20,18,14,.5));
  pointer-events: none;
}
html[dir="rtl"] .page-hero__scrim {
  background: linear-gradient(270deg, rgba(20,18,14,.92), rgba(20,18,14,.5));
}

/* ---------- Editorial helpers ---------- */
.media-band {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--line);
  background: var(--cream-2);
}
.media-band > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .media-band { aspect-ratio: 4 / 3; } }

.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 4 / 3; }
.frame--square { aspect-ratio: 1; }

/* Certification / logo row */
.certs { display: flex; flex-wrap: wrap; gap: .8rem; }
.certs li {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7em 1.2em;
  border: 1px solid var(--line);
  border-radius: 40px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dark .certs li { border-color: rgba(250,246,238,.18); color: rgba(250,246,238,.75); }
.certs svg { color: var(--gold); }
html[lang="ar"] .certs li { letter-spacing: 0; text-transform: none; }

/* Stat row reused outside the hero */
.stat-row {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.5rem, .5rem + 3vw, 3.4rem);
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.dark .stat-row { border-top-color: rgba(250,246,238,.16); }
.stat-row .stat__lbl { color: var(--muted); max-width: 22ch; }
.dark .stat-row .stat__lbl { color: rgba(250,246,238,.6); }

/* Filtering applies to journal posts too (style.css only covers .card) */
.post.hide { display: none; }
.post.filtering { animation: popIn .5s var(--ease) both; }

/* Journal: featured post lays out as a split */
.post--feature { display: grid; grid-template-columns: 1.1fr .9fr; }
.post--feature .post__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.post--feature .post__body { padding: clamp(1.6rem, 1rem + 2vw, 3rem); justify-content: center; }
.post--feature .post__title { font-size: var(--fs-xl); }
@media (max-width: 820px) {
  .post--feature { grid-template-columns: 1fr; }
  /* min-height + aspect-ratio fight each other once the column is narrow:
     240px of height at 16/10 demands 384px of width, which overflowed a
     331px card on a 360px phone. Let the width lead and the height follow. */
  .post--feature .post__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Contact map illustration */
.map-frame__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(174,139,69,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,139,69,.16) 1px, transparent 1px);
  background-size: 42px 42px;
}
.map-frame__road {
  position: absolute;
  background: rgba(250,246,238,.6);
}
.map-frame__label {
  position: absolute;
  inset-inline-start: 50%; top: 44%;
  transform: translate(-50%, -170%);
  background: var(--ink);
  color: var(--cream);
  padding: .4em 1em;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  white-space: nowrap;
}
html[dir="rtl"] .map-frame__label { transform: translate(50%, -170%); }

/* ---------- Word-split headings: stop the mask eating descenders ----------
   .split-line hides its overflow so words can slide up from below, but the
   display headings run at line-height 1.08 — tighter than the font's own
   descender. Result: the tails of g, y, p and the tops of É, Â get sliced.
   Grow the mask past the line box and pull it straight back with a negative
   margin, so the clipping area changes but the layout does not. The hidden
   state then has to travel further, otherwise the top of an unrevealed word
   peeks through the now-taller mask. */
.split-line {
  padding-block: .12em .3em;
  margin-block: -.12em -.3em;
}
.split-word { transform: translateY(150%); }

/* Arabic display faces (Amiri) hang much lower — give them more room */
html[lang="ar"] .split-line {
  padding-block: .16em .42em;
  margin-block: -.16em -.42em;
}

/* ---------- Toast ----------
   The resting state is translate(-50%, 120%) — 120% of the element's OWN
   height. Empty, the toast is only ~29px tall, so it slid down just 35px and
   left an 18px black sliver pinned to the bottom of every page. Take it out
   of play entirely until it has something to say. */
.toast { visibility: hidden; opacity: 0; transition: transform .5s var(--ease), opacity .3s, visibility .5s; }
.toast.on { visibility: visible; opacity: 1; }

/* ---------- Placeholders ----------
   Sample values were reading as though the field was already filled in.
   Keep them clearly lighter than real input text. */
.field input::placeholder,
.field textarea::placeholder,
.combo input::placeholder,
.chat__form textarea::placeholder {
  color: var(--muted);
  opacity: .6;
}
.news__form input::placeholder { color: rgba(250, 246, 238, .45); opacity: 1; }

/* Breadcrumbs on a light page (the base .crumbs is tuned for dark heroes) */
.crumbs--light { color: var(--muted); margin-top: 0; }
.crumbs--light a:hover { color: var(--gold); }
.crumbs--light span[aria-current] { color: var(--ink); }

/* Product page starts below the fixed header, no dark hero above it */
.pd-top { padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 2vw, 3rem)); }

/* ---------- Newsletter band ----------
   .news is a dark surface but carries no .dark class, so the light-theme
   .lead / p / .form-note colours from style.css land dark-on-dark. Restore
   the same treatment .dark sections get. */
.news .lead,
.news p { color: rgba(250, 246, 238, .8); }
.news .form-note { color: rgba(250, 246, 238, .55); }
.news .eyebrow { color: var(--gold-2); }

.news__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .16;
  mix-blend-mode: luminosity;
  filter: blur(3px) brightness(.6);
}

/* ==========================================================================
   CHECKOUT — cash on delivery (checkout.html / js/checkout.js)
   ========================================================================== */
.co {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .co { grid-template-columns: 1fr; }
  .co__aside { order: -1; }        /* see what you are paying for first */
}

.co__aside { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 900px) { .co__aside { position: static; } }

.co__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}
.co__card .ci { grid-template-columns: 56px 1fr auto; }
.co__card .ci:last-of-type { border-bottom: 0; }
.ci__line { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; align-self: center; white-space: nowrap; }

.cod-badge {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .5em 1.1em;
  background: rgba(65, 80, 58, .1);
  border: 1px solid var(--forest-soft);
  border-radius: 40px;
  color: var(--forest);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[lang="ar"] .cod-badge { letter-spacing: 0; text-transform: none; }
.cod-badge svg { width: 16px; height: 16px; }

.sum { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.sum__row--total {
  margin-top: .4rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--ink);
}
.sum__row--total strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--forest); }

/* Confirmation panel */
.done { text-align: center; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0; }
.done__mark {
  width: 62px; height: 62px; margin: 0 auto 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  animation: popIn .6s var(--ease) both;
}
.done__mark svg { width: 28px; height: 28px; }
.done__ref {
  margin-top: 1.4rem;
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.done__ref strong { color: var(--ink); letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   COMBOBOX — the city picker. Typing filters; only a chosen entry counts.
   -------------------------------------------------------------------------- */
.combo { position: relative; }
.combo input[type="text"] {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  transition: border-color .3s, box-shadow .3s;
}
.combo input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(174, 139, 69, .14);
}
.field.invalid .combo input[type="text"] { border-color: var(--clay); }

.combo__list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 26px 54px -22px rgba(20, 18, 14, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.combo.open .combo__list { opacity: 1; visibility: visible; transform: none; }

.combo__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .65rem .9rem;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background .18s;
}
.combo__opt small { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.combo__opt:hover,
.combo__opt.is-active { background: var(--cream-2); }
.combo__empty { padding: .9rem; font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ==========================================================================
   CERTIFICATIONS — logo strip (js/certs.js)
   ========================================================================== */
.certs-logos ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, .5rem + 1.4vw, 1.6rem);
}
.cert {
  display: grid;
  place-items: center;
  background: var(--white);
  border-radius: 4px;
  padding: .7rem 1rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cert img { width: auto; max-height: var(--cert-h, 46px); object-fit: contain; }
.cert:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(20, 18, 14, .4); }

/* A logo file padded with empty margin: render the plate at the mark's own
   aspect ratio and let object-fit:cover trim the surrounding whitespace, so
   the mark fills its plate instead of floating tiny inside it. */
.cert--crop img {
  /* Held slightly shorter than the round marks: a wide logo at full height
     would eat enough width to wrap the strip onto a second row. */
  height: calc(var(--cert-h, 46px) * .72);
  width: calc(var(--cert-h, 46px) * .72 * var(--cert-ratio, 3));
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Text plate shown when a logo file is not in place yet — same footprint as a
   logo plate so a half-filled strip still lines up */
.cert { min-width: 104px; min-height: 62px; }
.cert__txt {
  display: none;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.35;
}
.cert--text { padding: .9rem 1.2rem; }
.cert--text .cert__txt { display: block; }
.certs-logos--compact .cert { min-width: 88px; min-height: 50px; }
.certs-logos--full .cert { min-width: 130px; min-height: 84px; }

/* In the footer: quieter, smaller, separated by a rule */
.certs-strip {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  border-top: 1px solid rgba(250, 246, 238, .14);
}
.certs-logos--compact .cert { padding: .55rem .8rem; opacity: .92; --cert-h: 34px; }

/* On the story page: full size, with a lead line */
.certs-logos--full { margin-top: 1rem; }
.certs-logos--full .cert { padding: 1rem 1.4rem; --cert-h: 62px; }
.certs-logos__lead { margin-bottom: 1.2rem; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 520px) {
  .cert { --cert-h: 32px; }
  .certs-logos--full .cert { --cert-h: 44px; }
}

/* ==========================================================================
   PRE-ORDER PAGE (preorder.html)
   Deliberately not a site page: one card — picture, form — and the
   certification marks beneath it. No nav, no hero, no sections.
   ========================================================================== */
body.pre {
  background: var(--cream-2);
  min-height: 100svh;
}
.pre-shell {
  width: min(94vw, 1060px);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.pre-lang { display: flex; justify-content: flex-end; margin-bottom: 1rem; color: var(--ink); }
.pre-lang .lang__btn { border-color: var(--line); background: var(--white); }

/* ---- the card ---- */
.pre-card {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -46px rgba(20, 18, 14, .4);
}
@media (max-width: 820px) { .pre-card { grid-template-columns: 1fr; } }

.pre-card__media { position: relative; background: var(--sand); min-height: 260px; }
.pre-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  /* The source photograph is portrait. A 16/9 letterbox cropped it to a thin
     middle band and cut the bottle in half — a square keeps almost all of the
     image height, and the bias upward centres the bottle rather than the
     bench it stands on. */
  .pre-card__media {
    position: relative;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .pre-card__media img { object-position: center 42%; }
}
@media (max-width: 420px) {
  .pre-card__media { aspect-ratio: 5 / 4; }
}

.pre-card__body { padding: clamp(1.5rem, 1.1rem + 2vw, 3rem); }
.pre-card__body .logo { color: var(--ink); }
.pre-card__body h1 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.15; }
.pre-card__body .muted { font-size: var(--fs-sm); max-width: 46ch; }

.pre-form { margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
.pre-form .field { margin-bottom: 1rem; }
.pre-form select {
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.pre-form select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(174, 139, 69, .14);
}
.field.invalid select { border-color: var(--clay); }

.pre-row { display: grid; grid-template-columns: 1fr 120px; gap: 1rem; }
@media (max-width: 460px) { .pre-row { grid-template-columns: 1fr; } }

/* ---- certifications, beneath the card ---- */
.pre-certs {
  margin-top: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  text-align: center;
}
.pre-certs .cert { border: 1px solid var(--line); }
.pre-foot {
  margin-top: 1.4rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  justify-content: center;
}

/* The confirmation replaces the intro + form inside the same card */
.pre-card__body .done { padding-block: 1rem; }

/* ==========================================================================
   ADMIN (admin.html) — a door, not a lock. See the note in that file.
   ========================================================================== */
body.admin { background: var(--cream-2); }
.admin__wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 4rem) 1.2rem;
}
.admin__card {
  width: min(400px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  box-shadow: 0 30px 60px -34px rgba(20, 18, 14, .34);
}
.admin__panel {
  width: min(920px, 100%);
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.6rem);
}
.admin__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.admin__link {
  display: grid; gap: .15rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.admin__link:hover { border-color: var(--gold); transform: translateY(-2px); }
.admin__link span { font-size: var(--fs-sm); font-weight: 500; }
.admin__link small { font-size: var(--fs-xs); color: var(--muted); }

.admin__table { display: grid; gap: .5rem; }
.admin__row {
  display: grid;
  grid-template-columns: auto 1.4fr 1fr 1.4fr auto auto;
  gap: .8rem;
  align-items: baseline;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.admin__row small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
@media (max-width: 760px) { .admin__row { grid-template-columns: 1fr; gap: .2rem; } }


/* ==========================================================================
   CHAT — floating "talk to us" launcher (js/chat.js)
   Sits in the bottom corner; .totop is pushed above it so they never overlap.
   ========================================================================== */
.chat {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  z-index: 936;
}
.totop { bottom: 90px; }

.chat__btn {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  box-shadow: 0 18px 34px -14px rgba(20, 18, 14, .6);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.chat__btn:hover { background: var(--gold); transform: translateY(-3px); }
.chat.open .chat__btn { background: var(--ink); }
.chat__btn > span { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .3s, transform .35s var(--ease); }
.chat__shut { opacity: 0; transform: rotate(-90deg); }
.chat.open .chat__open { opacity: 0; transform: rotate(90deg); }
.chat.open .chat__shut { opacity: 1; transform: none; }

/* Availability pip */
.chat__dot {
  position: absolute; top: 3px; inset-inline-end: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #5FBF7E;
  border: 2px solid var(--cream);
  animation: chatPulse 2.4s ease-out infinite;
}
@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95, 191, 126, .6); }
  70%  { box-shadow: 0 0 0 12px rgba(95, 191, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 191, 126, 0); }
}

/* Panel */
.chat__panel {
  position: absolute;
  bottom: calc(100% + 14px);
  inset-inline-end: 0;
  width: min(340px, calc(100vw - 44px));
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 34px 70px -30px rgba(20, 18, 14, .55);
  padding: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
html[dir="rtl"] .chat__panel { transform-origin: bottom left; }
.chat.open .chat__panel { opacity: 1; visibility: visible; transform: none; }

.chat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chat__id { display: flex; align-items: center; gap: .7rem; }
.chat__mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--ink);
  border-radius: 50%;
}
.chat__mark svg { width: 20px; height: 20px; }
.chat__id strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; line-height: 1.2; }
.chat__sub { font-size: var(--fs-xs); color: var(--muted); }
.chat__x { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); transition: color .3s; }
.chat__x:hover { color: var(--ink); }
.chat__x svg { width: 16px; height: 16px; }

.chat__status {
  display: flex; align-items: center; gap: .5rem;
  margin-block: .9rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.chat__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.chat__status.is-open { color: var(--forest); }
.chat__status.is-open i { background: #5FBF7E; }

.chat__rows { display: grid; gap: .45rem; }
.chat__row {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .8rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.chat__row:hover { border-color: var(--gold-2); transform: translateY(-2px); }
.chat__row--wa:hover { border-color: var(--forest-soft); }
.chat__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--forest);
}
.chat__row--wa .chat__ico { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.chat__ico svg { width: 17px; height: 17px; }
.chat__row strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
.chat__row small { font-size: var(--fs-xs); color: var(--muted); }

.chat__form { margin-top: .9rem; display: grid; gap: .55rem; }
.chat__form textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  resize: none;
  transition: border-color .3s, box-shadow .3s;
}
.chat__form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(174, 139, 69, .14);
}
.chat__note { margin-top: .8rem; font-size: .68rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 420px) {
  .chat { bottom: 16px; inset-inline-end: 16px; }
  .totop { bottom: 82px; }
  .chat__btn { width: 50px; height: 50px; }
}

@media print { .chat { display: none !important; } }

/* A quiet, centred paragraph block */
.prose p + p { margin-top: 1.1rem; }
.prose { max-width: 68ch; }

/* Newsletter band: validation + confirmation inside the flex row */
.news__form .form-ok { flex: 1 1 100%; text-align: start; }
.news__form.invalid input { border-color: var(--clay); }

/* Footer language line */
.foot-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--gold-2);
}

@media (prefers-reduced-motion: reduce) {
  .hero__art > img { animation: none; }
  .card:hover .card__media > img { transform: none; }
}