/* ==========================================================================
   GBV România — base.css (chunk 1; PORT_MAPPING §4)
   Global rules layered over Astra and WooCommerce: the few variables the DS
   token files do not carry, then the recipes every later chunk builds on.
   Token variables only. The handful of literals — hit-area geometry, dot
   sizes, the design's clamp() stops — carry a comment naming their source.
   Breakpoints: 480 / 768 / 921 / 1280 / 1600 (PORT_MAPPING §0).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Variables added by the theme (PORT_MAPPING §3; audit B7; TOKENS.md Motion)
   -------------------------------------------------------------------------- */
:root {
  /* Header geometry (SiteHeader.dc.html; PORT_MAPPING §5). --header-h is
     re-derived from the three rows so the 921 px seam follows Astra's
     inclusive tablet switch (max-width: 921.99px), not the DS file's 920.98. */
  --header-top: 36px;         /* top bar, scrolls away */
  --header-main: 69px;        /* logo / search / account / cart row, hairline included */
  --header-nav: 46px;         /* category tab row, desktop only */
  --header-h: calc(var(--header-top) + var(--header-main) + var(--header-nav));
  --header-stuck: calc(var(--header-h) - var(--header-top));
  --header-glass: color-mix(in srgb, var(--gbv-white) 82%, transparent);
  --header-blur: 10px;        /* backdrop blur of the sticky header */
  --backdrop: color-mix(in srgb, var(--gbv-blue-deep) 45%, transparent);
  --backdrop-blur: 3px;       /* dim layer behind the mobile search sheet */
  --logo-h: 2.375rem;         /* 38 px logo mark; 30 px below 922 */
  --tab-h: 2.4375rem;         /* 39 px category tab */
  --tab-radius: 0.875rem;     /* 14 px tab top-left corner */
  --tab-pad-x: 0.875rem;      /* 14 px tab side padding */
  --tab-bar: 5px;             /* category colour bar under the header */
  --topbar-gap: 1.75rem;      /* 28 px between top-bar links; 20 px below 922 */
  --badge: 1.1875rem;         /* 19 px cart badge; 18 px below 922 */
  --search-btn: 2.125rem;     /* 34 px desktop search submit */
  --footer-col-offset: 1.125rem; /* 18 px: footer link columns start level with the brand text */
  --anpc-w: 15.625rem;        /* Ordin 449/2022 as amended by Ordin 270/2026: 250 × 50 px */
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255, 255, 255, 0.35); /* SiteFooter to-top */

  /* Stacking (audit A5): cookie 60 > toast 50 > to-top 40; header 100 */
  --z-header: 100;
  --z-drawer: 110;            /* catalog filter drawer (chunk 4b), over the sticky header */
  --z-header-dim: 10;         /* inside #masthead: the desktop search-focus dim, above Astra's rows (z 4) */
  --z-cookie: 60;
  --z-toast: 50;
  --z-totop: 40;

  /* Icon sizes: the design's 13–20 px glyphs snapped to four steps */
  --icon-xs: 0.875rem;        /* 14 px: top bar, footer rows, contact card */
  --icon-sm: 1rem;            /* 16 px: tab icons, „Citește online”, chevrons */
  --icon-md: 1.1875rem;       /* 19 px: account, cart, search, popup rows */
  --icon-lg: 1.25rem;         /* 20 px: menu trigger, close, to-top */

  --text-md: 0.9375rem;       /* 15 px — nav tabs and header links (SiteHeader) */
  --text-2xs: 0.6875rem;      /* 11 px — tracked uppercase captions and tags only (B7) */
  --hit-area: var(--btn-md);  /* 44 px minimum touch target (B6) */
  --motion-press: 100ms;      /* press scale(.98)            */
  --motion-base: 150ms;       /* hover / colour transitions  */
  --motion-lift: 200ms;       /* card lift                   */
  --lift-y: -3px;             /* card lift distance          */
  --dot: 6px;                 /* prose bullet (H4)           */
}
@media (max-width: 921.99px) {
  :root {
    --header-h: calc(var(--header-top) + var(--header-main));
    --logo-h: 1.875rem;
    --badge: 1.125rem;
    --topbar-gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   1. Document: type rendering, links, focus, placeholders, selection
   -------------------------------------------------------------------------- */
body {
  font-optical-sizing: auto;                 /* Inter opsz axis */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  transition: color var(--motion-base) ease;
}

a, button, [role="button"], label, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Focus ring (DS): 2 px blue-steel, offset 2 — beats Astra's dotted outline */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--stroke-bold) solid var(--gbv-blue-steel);
  outline-offset: 2px;
}

/* B5: placeholders were gray-300 (2.5:1); gray-500 everywhere */
::placeholder {
  color: var(--gbv-gray-500);
  opacity: 1;
}

::selection {
  background: var(--surface-brand-soft);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   2. Containers: 1280 / 1080 / 720 with the 32 / 24 / 16 gutter (B8/B9)
   Astra's .ast-container keeps its role; only its width and side padding
   follow the tokens. The Customizer content width (1280) and narrow width
   (720) stay in sync with these values (THEME.md).
   -------------------------------------------------------------------------- */
.ast-container {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.ast-desktop .ast-container--narrow,
.ast-container--narrow {
  max-width: calc(var(--container-prose) + 2 * var(--gutter));
}

.gbv-container-wide,
.gbv-container-narrow,
.gbv-container-prose {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.gbv-container-wide   { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.gbv-container-narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.gbv-container-prose  { max-width: calc(var(--container-prose) + 2 * var(--gutter)); }

/* --------------------------------------------------------------------------
   3. Surfaces and the contrast rules per background (B5)
   Dark heads: cream at 100 %, weight 500, current crumb white.
   Orange heads: blue-deep instead of translucent brown.
   Cream / paper / blush / mist: crumbs in body colour, captions blue-deep.
   -------------------------------------------------------------------------- */
.gbv-surface-brand   { background: var(--color-brand);         color: var(--text-on-brand); }
.gbv-surface-inverse { background: var(--surface-inverse);     color: var(--text-on-brand); }
.gbv-surface-accent  { background: var(--color-accent);        color: var(--text-on-accent); }
.gbv-surface-cream   { background: var(--surface-page);        color: var(--text-body); }
.gbv-surface-sunken  { background: var(--surface-sunken);      color: var(--text-body); }
.gbv-surface-blush   { background: var(--surface-accent-soft); color: var(--text-body); }
.gbv-surface-mist    { background: var(--surface-brand-soft);  color: var(--text-body); }
.gbv-surface-card    { background: var(--surface-card);        color: var(--text-body); }

:is(.gbv-surface-brand, .gbv-surface-inverse) :is(h1, h2, h3, h4, h5, h6, a, .gbv-caption, .gbv-crumb) {
  color: var(--text-on-brand);
}
:is(.gbv-surface-brand, .gbv-surface-inverse) :is(.gbv-caption, .gbv-crumb) {
  font-weight: var(--fw-medium);
}
:is(.gbv-surface-brand, .gbv-surface-inverse) .gbv-crumb [aria-current],
:is(.gbv-surface-brand, .gbv-surface-inverse) a:hover {
  color: var(--gbv-white);
}

.gbv-surface-accent :is(h1, h2, h3, h4, h5, h6, a, .gbv-caption, .gbv-crumb) {
  color: var(--text-strong);
}

:is(.gbv-surface-cream, .gbv-surface-sunken, .gbv-surface-blush, .gbv-surface-mist, .gbv-surface-card) .gbv-crumb {
  color: var(--text-body);
}
:is(.gbv-surface-cream, .gbv-surface-sunken, .gbv-surface-blush, .gbv-surface-mist, .gbv-surface-card) .gbv-caption {
  color: var(--text-strong);
}

/* Breadcrumb recipe shared by the page heads (chunks 4–6 fill the markup) */
.gbv-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
}
.gbv-crumb a { color: inherit; }
.gbv-crumb a:hover { color: var(--color-accent-strong); }

/* --------------------------------------------------------------------------
   4. Type floor (B7): 11 px only for tracked uppercase; tags and chips
   -------------------------------------------------------------------------- */
.gbv-caption--xs {
  font-size: var(--text-2xs);
}

.gbv-caption--muted { color: var(--text-muted); }

/* Tag „Nou” / „Recomandat” / „−N %” and the binding chip (ProductCard.dc.html) */
.gbv-tag {
  display: inline-flex;
  align-items: center;
  height: var(--space-5);
  padding: 0 calc(var(--space-2) + 1px);            /* 9 px, ProductCard */
  border-radius: var(--radius-md) var(--radius-xs) var(--radius-xs) var(--radius-xs);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);                        /* 12 px: the frozen ProductCard tag and chip (B7 11 px read as a floor) */
  line-height: 1;
  letter-spacing: 0.08em;                            /* ProductCard tag tracking */
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-inverse);
  color: var(--text-on-brand);
}
.gbv-tag--accent {
  background: var(--color-accent);
  color: var(--text-on-accent);
}
.gbv-tag--neutral {
  background: var(--surface-sunken);
  border: var(--stroke-hairline) solid var(--border-subtle);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   5. Touch targets (B6): visuals stay, hit areas grow to 44 px
   -------------------------------------------------------------------------- */
.gbv-tap {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-area);
}
.gbv-tap--icon {
  justify-content: center;
  min-width: var(--hit-area);
}
@media (max-width: 767.98px) {
  .gbv-tap-links a,
  .gbv-tap-links button {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit-area);
  }
}

/* --------------------------------------------------------------------------
   6. Buttons (B8/B9; DS Button): sm 36 / md 44 / lg 50
   6a. Scale, shape and motion for every Astra, block and WooCommerce
       button. Colours stay with the Customizer (blue on cream, hover
       blue-deep); the accent goes on WooCommerce add-to-cart in later CSS.
   -------------------------------------------------------------------------- */
.ast-button,
.button,
.wp-block-button__link,
.wp-element-button,
button.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-js a.button,
.gbv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  box-sizing: border-box;
  min-height: var(--btn-md);
  border-width: var(--stroke-default);
  border-style: solid;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease,
    color var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    transform var(--motion-press) ease;
}
.ast-button:active,
.button:active,
.wp-block-button__link:active,
.wp-element-button:active,
.gbv-btn:active {
  transform: scale(0.98);
}
.ast-button[disabled],
.button[disabled],
.wp-element-button[disabled],
.gbv-btn[disabled],
.gbv-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 6b. Stand-alone DS Button for theme-authored markup (patterns, hooks) */
.gbv-btn,
.gbv-btn:visited {
  padding: 0 var(--space-4);
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--text-on-brand);
  white-space: nowrap;
}
.gbv-btn:hover,
.gbv-btn:focus {
  background: var(--color-brand-strong);
  border-color: var(--color-brand-strong);
  color: var(--text-on-brand);
}
.gbv-btn.gbv-btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--text-on-accent);
}
.gbv-btn.gbv-btn--accent:hover,
.gbv-btn.gbv-btn--accent:focus {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--text-on-brand);
}
.gbv-btn.gbv-btn--secondary {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.gbv-btn.gbv-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-brand);
}
.gbv-btn.gbv-btn--secondary:hover,
.gbv-btn.gbv-btn--secondary:focus,
.gbv-btn.gbv-btn--ghost:hover,
.gbv-btn.gbv-btn--ghost:focus {
  background: color-mix(in srgb, var(--color-brand) 8%, transparent);
  color: var(--color-brand);
}

/* 6c. Sizes. sm is 36 px only where hover exists; 44 px below the tablet switch (B6) */
.gbv-btn--sm {
  min-height: var(--btn-sm);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  font-size: var(--text-caption);
}
.gbv-btn--lg {
  min-height: var(--btn-lg);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  gap: var(--gap-tight);
  font-size: var(--text-base);
}
.gbv-btn--block {
  display: flex;
  width: 100%;
}
@media (max-width: 920.98px) {
  .gbv-btn--sm { min-height: var(--btn-md); }
}

/* --------------------------------------------------------------------------
   7. Form controls (H1 / A4): the DS Input, Select, Textarea and Checkbox.
   One rule-set for core forms, classic WooCommerce fields (My Account) and
   the form plugin. The block cart and checkout are scoped out: they keep
   WooCommerce's own controls and inherit palette, fonts and radii through
   woocommerce.css only (CLAUDE.md). The :where() prefix adds no specificity.
   -------------------------------------------------------------------------- */
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea
) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--space-12);                        /* 48 px control (contact.dc.html) */
  padding: 0 var(--pad-control);
  background: var(--surface-card);
  border: var(--stroke-default) solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-strong);
  transition:
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) select {
  appearance: auto;
  cursor: pointer;
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) textarea {
  min-height: 10rem;                                  /* 160 px (contact.dc.html) */
  padding: var(--pad-control);
  resize: vertical;
}

:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea
):hover:not(:focus) {
  border-color: var(--border-strong);
}

:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  select,
  textarea
):focus {
  outline: none;
  border-color: var(--color-accent-strong);
  box-shadow: var(--shadow-focus);
  color: var(--text-strong);
}

/* Checkbox and radio: 20 px box, 1.5 px blue-steel border, blue when checked */
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  vertical-align: middle;
  background: var(--surface-card);
  border: var(--stroke-default) solid var(--border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease;
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) input[type="radio"] {
  border-radius: var(--radius-pill);
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(input[type="checkbox"], input[type="radio"])::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  background: var(--text-on-brand);
  opacity: 0;
  transition: opacity var(--motion-base) ease;
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) input[type="checkbox"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5L5 9L9.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5L5 9L9.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) input[type="radio"]::before {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(input[type="checkbox"], input[type="radio"]):checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(input[type="checkbox"], input[type="radio"]):checked::before {
  opacity: 1;
}
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(input[type="checkbox"], input[type="radio"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label wrapping a checkbox or radio reads as body text (DS Checkbox) */
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .gbv-check
) {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  cursor: pointer;
}

/* Field wrapper, hint and error state (A4) — theme-authored markup only */
.gbv-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) + 2px);                    /* 6 px, DS Input */
}
.gbv-field__message {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.gbv-field--error :is(input, select, textarea),
:where(body:not(.woocommerce-cart, .woocommerce-checkout)) :is(input, select, textarea)[aria-invalid="true"],
.gbv-input--error {
  border-color: var(--color-danger);
}
.gbv-field--error .gbv-field__message,
.gbv-field__message--error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   8. Prose list recipe (H4): numbered steps in 24 px blue-mist circles,
   bullets as 6 px orange-clay dots. Scope: .gbv-prose (FAQ, Livrare, legal).
   -------------------------------------------------------------------------- */
.gbv-prose ol,
.gbv-prose ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding-left: 0;
  display: grid;
  gap: var(--space-2);
}
.gbv-prose ol {
  counter-reset: gbv-step;
}
.gbv-prose ol > li,
.gbv-prose ul > li {
  position: relative;
  margin: 0;
  padding-left: calc(var(--space-6) + var(--gap-tight));
}
.gbv-prose ol > li::before {
  counter-increment: gbv-step;
  content: counter(gbv-step);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.gbv-prose ul > li::before {
  content: "";
  position: absolute;
  left: calc((var(--space-6) - var(--dot)) / 2);
  top: calc(0.5em * var(--leading-body) - var(--dot) / 2);
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-pill);
  background: var(--color-accent-strong);
}
.gbv-prose li > :is(ol, ul) {
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   9. Page-head recipe (B8/B9): breadcrumb → caption → h1 → lede on cream,
   padding 32 (24 below 921). Category colour variants come with chunk 4
   through the surface classes above.
   -------------------------------------------------------------------------- */
.gbv-page-head {
  background: var(--surface-page);
  color: var(--text-body);
  padding: var(--space-8) var(--gutter);
}
.gbv-page-head__inner {
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
}
.gbv-page-head--centered {
  text-align: center;
}
.gbv-page-head--centered .gbv-crumb {
  justify-content: center;
}
.gbv-page-head .gbv-crumb {
  margin-bottom: var(--space-3);
  color: var(--text-body);
}
.gbv-page-head .gbv-caption {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-strong);
}
.gbv-page-head h1,
.gbv-page-head__title {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 3vw, 2.375rem);          /* 28–38 px (faq/contact/legal heads) */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.gbv-page-head__lede {
  margin: var(--space-3) 0 0;
  max-width: 58ch;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);     /* 15–17 px */
  line-height: 1.5;
  color: var(--text-body);
}
.gbv-page-head--centered .gbv-page-head__lede {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 920.98px) {
  .gbv-page-head {
    padding: var(--space-6) var(--gutter);
  }
}

/* --------------------------------------------------------------------------
   10. Signature corner utilities (brand rule 04.2): 28 / 44 / 64, top-left
   -------------------------------------------------------------------------- */
.gbv-corner-sm { border-top-left-radius: var(--corner-sm); }
.gbv-corner-md { border-top-left-radius: var(--corner-md); }
.gbv-corner-lg { border-top-left-radius: var(--corner-lg); }

/* --------------------------------------------------------------------------
   11. Motion: hover lift, press; honoured prefers-reduced-motion
   -------------------------------------------------------------------------- */
.gbv-lift {
  transition:
    transform var(--motion-lift) ease,
    box-shadow var(--motion-lift) ease;
}
.gbv-lift:hover {
  transform: translateY(var(--lift-y));
  box-shadow: var(--shadow-md);
}
.gbv-press:active {
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .gbv-lift:hover,
  .gbv-press:active,
  .gbv-btn:active,
  .button:active,
  .wp-element-button:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */
.gbv-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   13. Icons (chunk 2): a span filled with a mask from assets/img/icons/,
   coloured by currentColor. The SVGs are the design's own glyphs
   (SiteHeader / SiteFooter), scanned like the logos. url() resolves against
   this file, so the paths stay relative to the theme.
   -------------------------------------------------------------------------- */
.gbv-icon {
  display: inline-block;
  flex: none;
  width: var(--icon-xs);
  height: var(--icon-xs);
  background-color: currentColor;
  -webkit-mask: var(--gbv-icon) center / contain no-repeat;
  mask: var(--gbv-icon) center / contain no-repeat;
}
.gbv-icon--phone         { --gbv-icon: url("../img/icons/phone.svg"); }
.gbv-icon--mail          { --gbv-icon: url("../img/icons/mail.svg"); }
.gbv-icon--facebook      { --gbv-icon: url("../img/icons/facebook.svg"); }
.gbv-icon--instagram     { --gbv-icon: url("../img/icons/instagram.svg"); }
.gbv-icon--youtube       { --gbv-icon: url("../img/icons/youtube.svg"); }
.gbv-icon--search        { --gbv-icon: url("../img/icons/search.svg"); }
.gbv-icon--cart          { --gbv-icon: url("../img/icons/cart.svg"); }
.gbv-icon--user          { --gbv-icon: url("../img/icons/user.svg"); }
.gbv-icon--menu          { --gbv-icon: url("../img/icons/menu.svg"); }
.gbv-icon--close         { --gbv-icon: url("../img/icons/close.svg"); }
.gbv-icon--chevron-right { --gbv-icon: url("../img/icons/chevron-right.svg"); }
.gbv-icon--chevron-up    { --gbv-icon: url("../img/icons/chevron-up.svg"); }
.gbv-icon--book-open     { --gbv-icon: url("../img/icons/book-open.svg"); }
.gbv-icon--arrow-right   { --gbv-icon: url("../img/icons/arrow-right.svg"); }
.gbv-icon--chevron-left  { --gbv-icon: url("../img/icons/chevron-left.svg"); }
.gbv-icon--sort          { --gbv-icon: url("../img/icons/sort.svg"); }          /* chunk 4: catalog toolbar */
.gbv-icon--grid          { --gbv-icon: url("../img/icons/grid.svg"); }
.gbv-icon--list          { --gbv-icon: url("../img/icons/list.svg"); }
.gbv-icon--page-prev     { --gbv-icon: url("../img/icons/page-prev.svg"); }     /* stroke 2 (mockup pagination) */
.gbv-icon--page-next     { --gbv-icon: url("../img/icons/page-next.svg"); }
.gbv-icon--sliders-horizontal { --gbv-icon: url("../img/icons/sliders-horizontal.svg"); } /* chunk 4b: „Filtre” */

/* --------------------------------------------------------------------------
   14. Category palette (chunk 3): one map per storefront slug, read by the
   header tabs and the colour bar (header.css) and by the homepage tiles
   (home.css). The class gbv-cat-<slug> is set by inc/header.php on body
   (category archives, single products) and on each tab, and by the tiles
   shortcode on each tile. The defaults are declared with zero specificity
   on the tab and the tile themselves, so a tab never inherits the page's
   category. Styling may stay keyed by slug (TD-005): an unknown slug keeps
   the default look and the link is untouched.
   -------------------------------------------------------------------------- */
:where(.gbv-tab, .gbv-tile) {
  --gbv-cat-bg: transparent;
  --gbv-cat-fg: var(--text-strong);
  --gbv-cat-icon-color: currentColor;
  --gbv-cat-icon: none;
}
.gbv-cat-biblia            { --gbv-cat-bg: var(--gbv-blue);         --gbv-cat-fg: var(--gbv-cream);      --gbv-cat-icon-color: var(--gbv-cream);        --gbv-cat-icon: url("../img/icons/cat-biblia.svg"); }
.gbv-cat-pentru-fiecare-zi { --gbv-cat-bg: var(--gbv-blue-mist);    --gbv-cat-fg: var(--gbv-blue-deep);  --gbv-cat-icon-color: var(--gbv-blue-deep);    --gbv-cat-icon: url("../img/icons/cat-pentru-fiecare-zi.svg"); }
.gbv-cat-vestea-buna       { --gbv-cat-bg: var(--gbv-orange);       --gbv-cat-fg: var(--text-on-accent); --gbv-cat-icon-color: var(--gbv-cream);        --gbv-cat-icon: url("../img/icons/cat-vestea-buna.svg"); }
.gbv-cat-edificare         { --gbv-cat-bg: var(--gbv-orange-blush); --gbv-cat-fg: var(--gbv-blue-deep);  --gbv-cat-icon-color: var(--gbv-orange-clay);  --gbv-cat-icon: url("../img/icons/cat-edificare.svg"); }
.gbv-cat-copii-si-tineri   { --gbv-cat-bg: var(--gbv-blue-deep);    --gbv-cat-fg: var(--gbv-cream);      --gbv-cat-icon-color: var(--gbv-orange-peach); --gbv-cat-icon: url("../img/icons/cat-copii-si-tineri.svg"); }

/* --------------------------------------------------------------------------
   15. [gbv_link] without a resolvable target (inc/links.php): editors who can
   edit pages see a dashed marker around the plain text, visitors see the
   text alone (review 2026-10-08, B5).
   -------------------------------------------------------------------------- */
.gbv-link--unresolved {
  outline: var(--stroke-hairline) dashed var(--color-danger);
  outline-offset: 2px;
}