/* ==========================================================================
   DRIP VAULT — COMPONENTS
   Reusable UI: header, nav, buttons, product cards, forms, footer, drawers.
   Each block maps to a Shopify snippet — noted in the comment above it.
   ========================================================================== */

/* ==========================================================================
   ANNOUNCEMENT BAR                      → sections/announcement-bar.liquid
   ========================================================================== */
.announce {
  background: var(--bg);
  color: var(--muted);
  text-align: center;
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.announce strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   HEADER — floating glass pill                   → sections/header.liquid
   The bar itself is transparent; the pill inside it is the visible chrome.
   That lets content scroll underneath the rounded edges, which is what makes
   it read as floating rather than as a docked bar.
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--sp-3) 0;
  background: transparent;
  transition: padding var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease-out);
}
/* motion.js adds this when the visitor scrolls DOWN past the hero, and
   removes it the moment they scroll up — the page gets the whole screen
   while reading, and navigation is one flick away. */
.header.is-hidden { transform: translate3d(0, calc(-100% - 8px), 0); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 58px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              backdrop-filter var(--dur-mid) var(--ease);
}

/* The glass only switches on once the page scrolls — over the hero the nav
   floats free, which keeps the opening frame clean. motion.js toggles this. */
.header.is-stuck .header__inner {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-brd);
  box-shadow: var(--shadow-md), var(--edge-top);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
/* Small vault-dial glyph in front of the wordmark. */
.wordmark::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.wordmark:hover::before { transform: rotate(315deg); }
/* .wordmark span takes the chrome fill — defined in base.css § .chrome-text */

/* Desktop nav. It needs about 1200px to sit on one line in Romanian, the
   longer of the two languages; below that the burger and drawer take over.
   The "coming soon" tags only fit beside it from 1360px — narrower than
   that they are left to the drawer, footer and category pages. */
.nav { display: none; }
@media (min-width: 1200px) {
  .nav { display: flex; align-items: center; gap: var(--sp-2); }
}
.nav .soon-tag { display: none; }
@media (min-width: 1360px) { .nav .soon-tag { display: inline-block; } }
.nav__link {
  position: relative;
  white-space: nowrap;
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-pill);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--tint-2); }
.nav__link[aria-current='page'] {
  color: var(--ink);
  background: var(--tint-3);
}

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* Below the desktop breakpoint the header pill can't hold wordmark +
   currency + bag + burger without overflowing a 375px viewport, so the
   currency selector moves into the mobile drawer instead. */
@media (max-width: 999px) {
  .header__actions .currency { display: none; }
}

/* Currency selector — native <select>, accessible for free, and it maps
   directly onto Shopify's {% form 'localization' %} at migration. */
.currency { position: relative; display: flex; align-items: center; }
.currency__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--tint-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text);
  padding: 0.55rem 2rem 0.55rem 0.9rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.currency__select:hover { border-color: var(--line-bright); background: var(--tint-3); }
.currency::after {
  content: '';
  position: absolute;
  right: 0.85rem;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

/* Cart button — solid white pill, the single brightest thing in the header. */

/* Hamburger */
.burger {
  display: grid;
  gap: 5px;
  padding: 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--tint-1);
}
@media (min-width: 1200px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   DRAWERS
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 88vw);
  background: var(--panel-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-brd);
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  overflow-y: auto;
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-mid) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.drawer.is-open .drawer__panel { transform: translate3d(0, 0, 0); }
.drawer--left .drawer__panel {
  right: auto; left: 0;
  border-left: 0;
  border-right: 1px solid var(--glass-brd);
  transform: translate3d(-100%, 0, 0);
}
.drawer--left.is-open .drawer__panel { transform: translate3d(0, 0, 0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.drawer__close {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.drawer__close:hover { background: var(--tint-3); border-color: var(--line-bright); }

/* Currency block inside the mobile drawer. */
.drawer__currency {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.drawer__currency .currency__select { width: 100%; padding-block: 0.7rem; }
@media (min-width: 1000px) { .drawer__currency { display: none; } }

.drawer__nav { display: grid; gap: var(--sp-1); }
.drawer__nav a {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}
.drawer.is-open .drawer__nav a {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--dur-mid) var(--ease) calc(80ms + var(--i, 0) * 45ms),
              transform var(--dur-slow) var(--ease-expo) calc(80ms + var(--i, 0) * 45ms),
              background var(--dur-fast) var(--ease),
              padding-left var(--dur-mid) var(--ease);
}
.drawer__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), padding-left var(--dur-mid) var(--ease);
}
.drawer__nav a:hover { background: var(--tint-2); padding-left: var(--sp-6); }

/* "Coming soon" tag: next to a menu link, a footer link or a filter row whose
   category has no products yet. Tokens only, so it reads in the black footer
   as well as on white. */
.soon-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.45em;
  padding: 0.18em 0.6em 0.12em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.drawer__nav .soon-tag { font-size: 0.6rem; transform: translateY(-0.25em); }

/* ==========================================================================
   BUTTONS                                        → snippets/button.liquid
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 1rem 1.9rem;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--bg);
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease),
              translate var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-mid) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* motion.js nudges buttons toward the pointer ("magnetic"). It writes the
   offset as --mx/--my, and translate composes with the hover lift above. */
.btn, .wa-float { translate: var(--mx, 0px) var(--my, 0px); }
.btn:active { transform: translateY(0); }

/* Ghost — an outline whose fill sweeps in from the left on hover. The fill is
   a pseudo-element scaled on X (compositor-only), parked behind the label by
   the button's own stacking context (`isolation` on .btn). */
.btn--outline {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--line-bright);
  color: var(--ink);
  overflow: hidden;
}
.btn--outline::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-mid) var(--ease-expo);
}
.btn--outline:hover { color: var(--bg); border-color: var(--ink); box-shadow: var(--shadow-md); }
.btn--outline:hover::after { transform: scaleX(1); transform-origin: left center; }

.btn__icon { width: 1.05em; height: 1.05em; flex: none; }

.btn--full  { width: 100%; }
.btn--small { padding: 0.7rem 1.25rem; }
.btn--large { padding: 1.15rem 2.4rem; font-size: var(--t-small); }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.55rem 0;
  transition: color var(--dur-fast) var(--ease);
}
.btn-text:hover { color: var(--accent); }
.btn-text__arrow {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn-text:hover .btn-text__arrow {
  transform: translateX(5px);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ==========================================================================
   PRODUCT CARD
   The gallery look: no panel, no border — the photo tile IS the card, and the
   text sits clean beneath it. On white, boxing every product in its own frame
   reads as a catalogue; letting the tiles float reads as a store.
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--photo-bg);
  aspect-ratio: 4 / 5;
  margin-bottom: var(--sp-4);
  transition: box-shadow var(--dur-mid) var(--ease);
}
.card:hover .card__media { box-shadow: var(--shadow-md); }
.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-expo), opacity var(--dur-mid) var(--ease);
}
.card:hover .card__img { transform: scale(1.05); }

.card__img--alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__img--alt { opacity: 1; }

.card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  color: var(--bg);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
}
.card__badge--sold { background: var(--bg); border-color: var(--line-strong); color: var(--muted); }
.card__badge--sale { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Quick-view bar rising from the base of the image. */
.card__quick {
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  z-index: 2;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  text-align: center;
  padding: 0.6rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease-out);
}
.card:hover .card__quick,
.card:focus-within .card__quick { opacity: 1; transform: translateY(0); }
@media (hover: none) { .card__quick { display: none; } }

.card__type {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-2);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: var(--sp-2);
  color: var(--ink);
}
/* Underline draws in under the title on hover. */
.card__link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-mid) var(--ease-expo);
}
.card:hover .card__link { background-size: 100% 1px; }
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: var(--r-md); }
.card__price {
  font-size: var(--t-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.card__price del { color: var(--faint); margin-right: var(--sp-2); }
.card__price ins { text-decoration: none; color: var(--accent); }

.card__swatches { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Two-up on a phone leaves each card about 165px wide: tighten the type and
   spacing so the name and price still sit on one or two clean lines. */
@media (max-width: 559px) {
  .card__media { margin-bottom: var(--sp-3); border-radius: 12px; }
  .card__badge { top: var(--sp-2); left: var(--sp-2); }
  .card__type { margin-bottom: var(--sp-1); }
  .card__title { font-size: 0.9375rem; margin-bottom: var(--sp-1); }
  .card__price del { margin-right: var(--sp-1); }
  .card__swatches { gap: 6px; margin-top: var(--sp-2); }
}
.swatch-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line-bright);
}

/* ==========================================================================
   FORMS                                          → snippets/form-*.liquid
   ========================================================================== */
.field { display: grid; gap: var(--sp-2); }
.field__label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text);
  padding: 0.85rem 1rem;
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--faint); }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--glow-soft);
}
.field__textarea { resize: vertical; min-height: 140px; }
.field__select { appearance: none; -webkit-appearance: none; cursor: pointer; }

.field__error { font-size: var(--t-small); color: var(--danger); min-height: 1.2em; }
.field.has-error .field__input,
.field.has-error .field__textarea { border-color: var(--danger); }

.newsletter { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.newsletter .field { flex: 1 1 220px; }

.form-note { font-size: var(--t-small); color: var(--fg-muted); }
.form-status { font-size: var(--t-small); margin-top: var(--sp-4); min-height: 1.4em; }
.form-status.is-success { color: var(--accent); }
.form-status.is-error   { color: var(--danger); }

/* ==========================================================================
   ACCORDION                                    → snippets/accordion.liquid
   <details>/<summary> so it works without JS and is screen-reader friendly
   by default. JS only adds the smooth height animation.
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-small);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { color: var(--accent); }

.accordion__icon { position: relative; flex: 0 0 12px; width: 12px; height: 12px; }
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 12px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease);
}
.accordion__icon::after { transform: rotate(90deg); }
[open] > .accordion__summary .accordion__icon::after { transform: rotate(0deg); }

.accordion__body {
  padding-bottom: var(--sp-5);
  color: var(--fg-muted);
  font-size: var(--t-small);
  line-height: 1.75;
}
.accordion__body p + p { margin-top: var(--sp-4); }

/* ==========================================================================
   FOOTER                                          → sections/footer.liquid
   ========================================================================== */
.footer {
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.footer__top { display: grid; gap: var(--sp-8); padding-block: var(--section-y); position: relative; z-index: 1; }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.35fr 1fr; align-items: start; } }

.footer__cols { display: grid; gap: var(--sp-7) var(--sp-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }

.footer__heading {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.footer__list { display: grid; gap: var(--sp-3); }
.footer__list a {
  font-size: var(--t-small);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--ink); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--faint);
  position: relative;
  z-index: 1;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__legal a:hover { color: var(--muted); }

/* Oversized wordmark sign-off across the base of the footer. */
.footer__mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.5rem, 16vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--tint-1);
  padding-bottom: var(--sp-4);
  overflow: hidden;
  user-select: none;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   MISC
   ========================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-6);
}
.breadcrumb a { transition: color var(--dur-fast) var(--ease); }
.breadcrumb a:hover { color: var(--ink); }

.empty-state {
  text-align: center;
  padding-block: var(--sp-9);
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
}
.empty-state__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h2);
  color: var(--ink);
}

/* Toast confirmation after adding to cart. */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translate(-50%, 160%);
  z-index: var(--z-overlay);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-mid) var(--ease-out);
  max-width: calc(100vw - var(--sp-6) * 2);
  text-align: center;
}
.toast.is-visible { transform: translate(-50%, 0); }

/* ==========================================================================
   ORDERING — WhatsApp button, header action, floating button
   --------------------------------------------------------------------------
   The green appears only on controls that open WhatsApp. Everything else keeps
   the blue accent, so green reliably means "this starts an order".
   ========================================================================== */

.btn--whatsapp {
  background: var(--wa);
  color: var(--wa-ink);
  border-color: transparent;
  font-weight: 650;
}
.btn--whatsapp:hover {
  background: var(--wa-deep);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(37, 211, 102, 0.55);
}
.btn--whatsapp:disabled,
.btn--whatsapp[disabled] {
  background: var(--surface-3);
  color: var(--faint);
  box-shadow: none;
}

/* The product page stacks its two order buttons. Side by side they compete;
   the WhatsApp one should clearly lead. */
.pdp__buy { display: grid; gap: var(--sp-3); }

@media (min-width: 560px) {
  .pdp__buy { grid-template-columns: 1fr; }
}

/* ---- Header action (replaces the old bag) ------------------------------ */
.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: var(--r-pill);
  background: rgba(37, 211, 102, 0.1);
  color: var(--wa-text);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
/* Solid green with dark ink on hover — readable in both themes, where white
   text on a pale green wash was not. */
.wa-btn:hover {
  background: var(--wa);
  border-color: var(--wa);
  color: var(--wa-ink);
}
.wa-btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Below 1000px the header pill can't hold the wordmark, this button and the
   burger without overflowing at 375px. The drawer carries it instead. */
@media (max-width: 999px) {
  .header__actions .wa-btn { display: none; }
}

/* ---- Drawer order block ------------------------------------------------ */
.drawer__order {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
}
.drawer__note {
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: var(--track-tight);
  text-align: center;
}

/* ---- Floating button --------------------------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wa);
  color: var(--wa-ink);
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.6),
              0 2px 8px rgba(10, 10, 10, 0.18);
  transition: transform var(--dur-fast) var(--ease),
              translate var(--dur-mid) var(--ease-out),
              background var(--dur-fast) var(--ease);
}
.wa-float:hover {
  transform: scale(1.07);
  background: var(--wa-deep);
  color: #fff;
}
.wa-float svg { width: 1.65rem; height: 1.65rem; }
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .wa-float::after { animation: wa-sonar 4.8s var(--ease-out) 2.5s infinite; }
}
@keyframes wa-sonar {
  0%   { transform: scale(1);   opacity: 0.55; }
  45%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Lift clear of the sticky order bar on phones so it never covers a button. */
@media (max-width: 559px) {
  .wa-float { width: 3.1rem; height: 3.1rem; }
  .wa-float svg { width: 1.45rem; height: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float:hover { transform: none; }
}

/* ==========================================================================
   CASH-ON-DELIVERY MODAL
   ========================================================================== */

.cod {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: end center;
}
.cod[hidden] { display: none; }

.cod__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cod-fade var(--dur-mid) var(--ease);
}

.cod__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  animation: cod-in var(--dur-slow) var(--ease-expo);
}

/* Bottom sheet on phones, centred dialog from tablet up — a tall form is far
   easier to reach with a thumb when it rises from the bottom edge. */
@media (min-width: 700px) {
  .cod { place-items: center; }
  .cod__panel { border-radius: var(--r-xl); }
}

@keyframes cod-in {
  from { transform: translateY(48px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes cod-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cod__panel, .cod__scrim { animation: none; }
}

.cod__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.cod__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  color: var(--ink);
  margin: 0;
}
.cod__close {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color var(--dur-fast) var(--ease);
}
.cod__close:hover { color: var(--ink); }

.cod__intro {
  font-size: var(--t-small);
  color: var(--text);
  margin-bottom: var(--sp-5);
}

/* Restates what is being ordered, so the address fields are never a
   context-free set of boxes. */
.cod__summary {
  display: grid;
  gap: 0.15rem;
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.cod__product { font-weight: 600; color: var(--ink); }
.cod__meta {
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}
.cod__price {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  color: var(--ink);
  margin-top: var(--sp-2);
}

.cod__form { display: grid; gap: var(--sp-4); }

/* City / county / postcode sit on one row from tablet up — they are short and
   a full-width box for a 6-digit postcode looks wrong. */
@media (min-width: 560px) {
  .cod__form {
    grid-template-columns: 1fr 1fr;
  }
  .field--name,
  .field--address,
  .field--notes,
  .cod__form > .btn { grid-column: 1 / -1; }
}

.cod .field__textarea { min-height: 0; }

.field__hint {
  font-size: var(--t-micro);
  color: var(--faint);
  line-height: 1.4;
}
.field__optional { color: var(--faint); }
.field__error:not([hidden]) { display: block; }
.field__input[aria-invalid='true'],
.field__textarea[aria-invalid='true'] { border-color: var(--danger); }

/* `.currency` sets display:flex, which outranks the UA stylesheet's
   [hidden] { display: none }. Without this the single-currency build leaves an
   empty 48px pill in the header. */
.currency[hidden],
.drawer__currency[hidden] { display: none !important; }

/* ==========================================================================
   LANGUAGE GATE
   --------------------------------------------------------------------------
   Shown once, on a first visit, before any content has painted. lang.js runs
   at the top of <body> specifically so this can cover the page before a
   Romanian visitor is shown a screen of English.
   ========================================================================== */

/* Hide the page underneath while the choice is pending. visibility rather
   than display so layout is already computed when the gate lifts — the page
   is then simply revealed, not reflowed. */
.lang-pending body > *:not(.lang-gate) { visibility: hidden; }

.lang-gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  /* The gate carries .theme-dark for its tokens, but the black itself is
     painted by the two doors below — so it must not paint a ground of its
     own, or there would be nothing behind the doors to reveal. */
  background: transparent !important;
}

/* Two halves of one door. Each is twice the gate's width with its background
   pinned to its own outer edge, so the radial washes line up across the seam
   and read as ONE continuous surface until it parts. */
.lang-gate__door {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;          /* a hair over half, so no sliver of page at the seam */
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 50% at 50% 0%, rgba(110, 155, 255, 0.13), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(37, 211, 102, 0.07), transparent 70%);
  background-size: 200% 100%;
  transition: transform 1100ms var(--ease-expo);
  will-change: transform;
}
.lang-gate__door--left  { left: 0;  background-position: left center; }
.lang-gate__door--right { right: 0; background-position: right center; }

/* The seam — a thin line of accent light that brightens as the doors part. */
.lang-gate__door--left::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent) 50%, transparent);
  opacity: 0.25;
  transition: opacity 300ms var(--ease);
}

.lang-gate__inner { position: relative; z-index: 1; }

/* Leaving: the content drops away, the seam flares, then the doors slide
   apart from the centre and the site is revealed between them. */
.lang-gate.is-leaving,
.lang-gate.is-choosing { pointer-events: none; }
.lang-gate.is-choosing .lang-gate__inner,
.lang-gate.is-leaving .lang-gate__inner {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.lang-gate.is-leaving .lang-gate__door--left::after { opacity: 1; }
.lang-gate.is-leaving .lang-gate__door--left  { transform: translate3d(-101%, 0, 0); transition-delay: 180ms; }
.lang-gate.is-leaving .lang-gate__door--right { transform: translate3d(101%, 0, 0);  transition-delay: 180ms; }

/* Arriving: the mark and buttons rise in. */
.lang-gate__inner > * {
  animation: gate-rise 900ms var(--ease-expo) both;
}
.lang-gate__inner > :nth-child(2) { animation-delay: 80ms; }
.lang-gate__inner > :nth-child(3) { animation-delay: 160ms; }
.lang-gate__inner > :nth-child(4) { animation-delay: 240ms; }
@keyframes gate-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.lang-gate__inner {
  width: min(30rem, 100%);
  text-align: center;
  display: grid;
  gap: var(--sp-5);
}

.lang-gate__mark {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.lang-gate__eyebrow {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--faint);
}

.lang-gate__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.lang-gate__btn {
  display: grid;
  gap: 0.35rem;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.lang-gate__btn:hover,
.lang-gate__btn:focus-visible {
  border-color: var(--accent);
  background: var(--surface-3);
  transform: translateY(-2px);
}

.lang-gate__code {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  color: var(--ink);
  letter-spacing: var(--track-mid);
}
.lang-gate__name {
  font-size: var(--t-small);
  color: var(--muted);
}

.lang-gate__note {
  font-size: var(--t-micro);
  color: var(--faint);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .lang-gate__inner > * { animation: none; }
  .lang-gate__door, .lang-gate.is-leaving .lang-gate__inner { transition: none; }
  .lang-gate__btn:hover { transform: none; }
}

/* ---- Switcher (header + drawer) ---------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.lang-switch__btn {
  padding: 0.45rem 0.7rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang-switch__btn:hover { color: var(--ink); }
.lang-switch__btn[aria-current='true'] {
  background: var(--surface-3);
  color: var(--ink);
}

@media (max-width: 999px) {
  .header__actions .lang-switch { display: none; }
}

.drawer__lang {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ==========================================================================
   SOCIAL LINKS + FOLLOW
   Only rendered for networks configured in config.js — see site.js.
   ========================================================================== */
.footer__follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.social { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.social__link svg { width: 1.2em; height: 1.2em; flex: none; }
.social__link:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  transform: translateY(-2px);
}

.social--drawer { justify-content: center; }

/* The homepage band — larger targets, centred. */
.social-band__links { display: flex; justify-content: center; margin-top: var(--sp-6); }
.social--large { justify-content: center; gap: var(--sp-3); }
.social--large .social__link { padding: 1.1rem 1.8rem; font-size: var(--t-small); }