/* ==========================================================================
   GBV România — catalog.css (chunk 4; PORT_MAPPING §9)
   The catalog, category, author, Aspect and search pages: the page head
   (catalog.dc.html and the five category pages) and, from the next commit,
   the toolbar, the mobile bar, the grid steps, pagination and the empty
   state. Markup from inc/catalog.php over WooCommerce's stock archive inside
   Astra's wrappers; loaded on catalog pages only (inc/enqueue.php). Token
   variables only; the mockups' literals carry their source. Breakpoints at
   the theme's switch — max-width 921.99px / min-width 922px (review R4).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Archive container: Astra caps the shop archive's .ast-container at the
      content width + 40 px (Shop Archive Width "default"); the 1280 + gutters
      of every other page is restored here so the content edge equals the
      header's (review R2, measured at 1600). The container is the sidebar +
      grid row since chunk 4b (§11).
   -------------------------------------------------------------------------- */
body.gbv-archive #content > .ast-container {
  max-width: calc(var(--container-wide) + 2 * var(--gutter));
}

/* --------------------------------------------------------------------------
   1. Head: the full-bleed band before #content (astra_content_before), one
      inner 1280 box with the text column and — Pentru fiecare zi — the
      calendar leaf. Colours per variant through the head's own variables;
      a category's surface is the shared palette's --gbv-cat-bg (base.css
      §14), so an unknown slug keeps the paper look. Rest values are the
      catalog mockup (paper, blue-deep caption, blue-steel glyph at 55 %).
   -------------------------------------------------------------------------- */
.gbv-archive-head {
  --head-surface: var(--gbv-paper);
  --head-caption: var(--text-strong);
  --head-title: var(--text-strong);
  --head-lede: var(--text-body);
  --head-crumb: var(--text-body);
  --head-crumb-hover: var(--color-accent-strong);
  --head-current: var(--text-strong);
  --head-decor: var(--gbv-blue-steel);
  --head-decor-opacity: 0.55;
  position: relative;
  overflow: hidden;
  padding: 28px var(--gutter) 32px;                     /* catalog.dc.html .ct-head */
  background: var(--head-surface);
  color: var(--head-lede);
}
.gbv-archive-head:focus-visible {
  outline-offset: -4px;                                 /* skip-link target: the ring stays inside the clipped band */
}
.gbv-archive-head--cat {
  --head-surface: var(--gbv-cat-bg, var(--gbv-paper));
}
.gbv-archive-head__inner {
  display: flex;
  align-items: center;
  gap: 48px;                                            /* pentru-fiecare-zi.dc.html (the only variant with a second column) */
}
.gbv-archive-head__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Breadcrumb: base.css §3 recipe, the mockup's row (13.5 px → the caption token, gap 8, 13 px chevron) */
.gbv-archive-head .gbv-crumb {
  margin-bottom: 14px;                                  /* catalog.dc.html */
  color: var(--head-crumb);
  font-family: var(--font-body);
  font-size: var(--text-caption);
}
/* WooCommerce's clearfix on .woocommerce-breadcrumb (::before / ::after,
   content " ", display table) would be two empty flex items and push the
   first crumb one gap (8 px) off the content edge */
body.gbv-archive .gbv-archive-head .gbv-crumb::before,
body.gbv-archive .gbv-archive-head .gbv-crumb::after {
  content: none;
}
.gbv-archive-head .gbv-crumb a,
.gbv-archive-head .gbv-crumb a:visited {
  color: var(--head-crumb);
  text-decoration: none;
}
.gbv-archive-head .gbv-crumb a:hover,
.gbv-archive-head .gbv-crumb a:focus-visible {
  color: var(--head-crumb-hover);
  text-decoration: none;
}
.gbv-archive-head .gbv-crumb__item:last-child {
  color: var(--head-current);
  font-weight: var(--fw-medium);
}
.gbv-archive-head .gbv-crumb__sep {
  width: 13px;                                          /* catalog.dc.html chevron */
  height: 13px;
  color: var(--head-crumb);
}

/* Caption, title, lede over the base.css §9 recipe */
.gbv-archive-head .gbv-archive-head__caption {
  margin-bottom: 10px;                                  /* catalog.dc.html */
  color: var(--head-caption);
  font-size: var(--text-xs);
}
.gbv-archive-head .gbv-archive-head__title {
  color: var(--head-title);
  overflow-wrap: anywhere;                              /* catalog.dc.html: a long search term never overflows */
}
.gbv-archive-head .gbv-archive-head__lede {
  margin-top: 10px;                                     /* catalog.dc.html */
  max-width: 62ch;
  color: var(--head-lede);
}

/* Related rows: „Căutați și:” chips on the search head, the Copii pills */
.gbv-archive-head__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 18px;                                     /* catalog.dc.html */
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.gbv-chip,
.gbv-chip:visited {
  display: inline-flex;
  align-items: center;
  min-height: 32px;                                     /* catalog.dc.html related chip */
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--stroke-hairline) solid var(--border-default);
  background: var(--gbv-white);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
.gbv-chip:hover {
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  text-decoration: none;
}
.gbv-chip:focus {
  color: var(--text-strong);                            /* Astra's a:focus colour undone; the base.css ring marks focus, catalog.dc.html tints on hover only */
  text-decoration: none;
}
.gbv-chip:active {
  background: var(--gbv-blue-steel);
  color: var(--text-on-brand);
}

.gbv-archive-head__pills {
  position: relative;
  z-index: 2;                                           /* copii.dc.html: above the shapes */
  pointer-events: none;                                 /* copii.dc.html: the row lets the smile take the pointer, the pills take it back */
  gap: 10px;
  margin-top: 20px;
  padding-right: 110px;                                 /* copii.dc.html: clear of the orange square */
}
.gbv-pill,
.gbv-pill:visited {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 16px;                                    /* copii.dc.html pill */
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--motion-base) ease,
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
/* Four colour pairs by position (copii.dc.html), each with its own hover */
.gbv-pill--1, .gbv-pill--1:visited { background: var(--gbv-orange);       color: var(--text-on-accent); }
.gbv-pill--2, .gbv-pill--2:visited { background: var(--gbv-white);        color: var(--gbv-blue); }
.gbv-pill--3, .gbv-pill--3:visited { background: var(--gbv-orange-peach); color: var(--text-on-accent); }
.gbv-pill--4, .gbv-pill--4:visited { background: var(--gbv-blue-mist);    color: var(--text-strong); }
.gbv-pill:hover,
.gbv-pill:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}
.gbv-pill--1:hover, .gbv-pill--1:focus-visible { background: var(--gbv-orange-clay);  color: var(--text-on-accent); }
.gbv-pill--2:hover, .gbv-pill--2:focus-visible { background: var(--gbv-orange-blush); color: var(--gbv-blue); }
.gbv-pill--3:hover, .gbv-pill--3:focus-visible { background: var(--gbv-orange);       color: var(--text-on-accent); }
.gbv-pill--4:hover, .gbv-pill--4:focus-visible { background: var(--gbv-white);        color: var(--text-strong); }
.gbv-pill:active {
  transform: translateY(0) scale(0.98);
}
/* The current child on a child archive (theme addition: the mockup's pills link to the same page) */
.gbv-pill[aria-current="page"] {
  outline: var(--stroke-bold) solid var(--gbv-cream);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Decorations: one empty span styled per variant — the mockups' glyphs as
      masks (decor-*.svg, Lucide), the Copii shapes on the pseudo-elements and
      the smile disc on the span, the Pentru fiecare zi leaf as a flex column.
   -------------------------------------------------------------------------- */
.gbv-archive-head__decor {
  position: absolute;
  right: 72px;                                          /* catalog.dc.html .ct-hero-side */
  bottom: 0;
  width: 230px;
  height: 230px;
  transform: translateY(14%);
  background-color: var(--head-decor);
  opacity: var(--head-decor-opacity);
  -webkit-mask: url("../img/icons/decor-search.svg") center / contain no-repeat;
  mask: url("../img/icons/decor-search.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Biblia: blue, cream text, peach caption, the book glyph (biblia.dc.html) */
.gbv-archive-head.gbv-cat-biblia {
  --head-caption: var(--gbv-orange-peach);
  --head-title: var(--gbv-cream);
  --head-lede: var(--gbv-blue-mist);
  --head-crumb: var(--gbv-cream);
  --head-crumb-hover: var(--gbv-orange-peach);
  --head-current: var(--gbv-cream);
  --head-decor: var(--gbv-cream);
  --head-decor-opacity: 1;
  padding-top: 30px;                                    /* biblia.dc.html */
  padding-bottom: 38px;
}
.gbv-cat-biblia .gbv-archive-head__decor {
  right: 64px;
  bottom: -25px;
  width: 220px;
  height: 220px;
  transform: rotate(-8deg);
  -webkit-mask-image: url("../img/icons/decor-biblia.svg");
  mask-image: url("../img/icons/decor-biblia.svg");
}

/* Vestea bună: orange, brown text, blue-deep crumb (B5) and glyph (vestea-buna.dc.html) */
.gbv-archive-head.gbv-cat-vestea-buna {
  --head-caption: var(--text-on-accent);
  --head-title: var(--text-on-accent);
  --head-lede: var(--text-on-accent);
  --head-crumb: var(--text-strong);
  --head-crumb-hover: var(--gbv-cream);
  --head-current: var(--text-on-accent);
  --head-decor: var(--text-strong);
  --head-decor-opacity: 1;
}
.gbv-cat-vestea-buna .gbv-archive-head__decor {
  right: 64px;
  bottom: -44px;
  width: 260px;
  height: 260px;
  transform: rotate(-8deg);
  -webkit-mask-image: url("../img/icons/decor-vestea-buna.svg");
  mask-image: url("../img/icons/decor-vestea-buna.svg");
}

/* Edificare: blush, body text, clay books glyph (edificare.dc.html) */
.gbv-archive-head.gbv-cat-edificare {
  --head-decor: var(--color-accent-strong);
  --head-decor-opacity: 1;
}
.gbv-cat-edificare .gbv-archive-head__decor {
  transform: translateY(9.8%);
  -webkit-mask-image: url("../img/icons/decor-edificare.svg");
  mask-image: url("../img/icons/decor-edificare.svg");
}

/* Pentru fiecare zi: blue-mist, no glyph, the calendar leaf beside the text (pentru-fiecare-zi.dc.html) */
.gbv-archive-head.gbv-cat-pentru-fiecare-zi {
  overflow: visible;                                    /* the leaf's shadow is not clipped */
}
.gbv-cat-pentru-fiecare-zi .gbv-archive-head__decor {
  display: none;
}
.gbv-archive-head__leaf {
  flex: none;
  width: 150px;                                         /* pentru-fiecare-zi.dc.html .ct-hero-side */
  margin-right: 45px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border-top-left-radius: var(--corner-lg);
  background: var(--gbv-white);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.gbv-archive-head__leaf-month {
  display: block;
  padding: 30px 0 10px;
  background: var(--gbv-orange);
  color: var(--text-on-accent);
  font-size: var(--text-2xs);                           /* 11 px tracked caption (B7) */
}
.gbv-archive-head__leaf-day {
  display: block;
  padding: 14px 0 4px;
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: 52px;                                      /* pentru-fiecare-zi.dc.html */
  line-height: 1;
  color: var(--text-strong);
}
.gbv-archive-head__leaf-weekday {
  display: block;
  padding-bottom: 16px;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Copii și tineri: blue-deep, cream text, three shapes and the smile disc (copii.dc.html) */
.gbv-archive-head.gbv-cat-copii-si-tineri {
  --head-caption: var(--gbv-orange-peach);
  --head-title: var(--gbv-cream);
  --head-lede: var(--gbv-blue-mist);
  --head-crumb: var(--gbv-cream);
  --head-crumb-hover: var(--gbv-orange-peach);
  --head-current: var(--gbv-cream);
  padding-bottom: 34px;                                 /* copii.dc.html */
}
.gbv-archive-head.gbv-cat-copii-si-tineri .gbv-archive-head__lede {
  max-width: 56ch;
}
.gbv-archive-head.gbv-cat-copii-si-tineri::before {    /* peach disc */
  content: "";
  position: absolute;
  top: -40px;
  right: 9%;
  width: 130px;
  height: 130px;
  border-radius: var(--radius-pill);
  background: var(--gbv-orange-peach);
  opacity: 0.9;
  pointer-events: none;
}
.gbv-archive-head.gbv-cat-copii-si-tineri::after {     /* orange square, signature corner */
  content: "";
  position: absolute;
  right: 0;
  bottom: -52px;
  width: 160px;
  height: 160px;
  border-top-left-radius: var(--corner-lg);
  background: var(--gbv-orange);
  pointer-events: none;
}
.gbv-cat-copii-si-tineri .gbv-archive-head__inner::before { /* small white square */
  content: "";
  position: absolute;
  top: 34px;
  right: 25%;
  width: 54px;
  height: 54px;
  border-top-left-radius: 54px;
  background: var(--gbv-white);
  opacity: 0.85;
  pointer-events: none;
}
.gbv-cat-copii-si-tineri .gbv-archive-head__decor {   /* the smile disc */
  z-index: 1;
  right: 19%;
  bottom: -11px;
  width: 92px;
  height: 92px;
  transform: none;
  opacity: 1;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gbv-blue-steel) 45%, var(--gbv-blue-deep));
  -webkit-mask: none;
  mask: none;
  pointer-events: auto;
  cursor: pointer;
}
.gbv-cat-copii-si-tineri .gbv-archive-head__decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--gbv-orange-peach);
  -webkit-mask: url("../img/icons/smile.svg") center / contain no-repeat;
  mask: url("../img/icons/smile.svg") center / contain no-repeat;
  transform-origin: 50% 60%;                            /* copii.dc.html */
  transition: transform var(--motion-lift) ease;
}
.gbv-cat-copii-si-tineri .gbv-archive-head__decor:hover::before {
  animation: gbv-wiggle 0.6s ease;
}
.gbv-cat-copii-si-tineri .gbv-archive-head__decor:active::before {
  transform: scale(0.88);
}
@keyframes gbv-wiggle {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-8deg) scale(1.08); }
  60%  { transform: rotate(6deg) scale(1.08); }
  100% { transform: rotate(0); }
}

/* --------------------------------------------------------------------------
   3. Below the tablet switch: tighter head, the glyph shrinks to the mockups'
      clamps and the head reserves its width on the right (the shapes stay,
      the leaf keeps its column), gone under 460 px.
   -------------------------------------------------------------------------- */
@media (max-width: 921.99px) {
  .gbv-archive-head,
  .gbv-archive-head.gbv-cat-biblia,
  .gbv-archive-head.gbv-cat-copii-si-tineri {
    --decor-w: clamp(184px, 25vw, 230px);              /* catalog / edificare */
    padding: 20px var(--gutter) 24px;                   /* every mockup's .ct-head */
  }
  .gbv-archive-head.gbv-cat-biblia      { --decor-w: clamp(176px, 24vw, 220px); }
  .gbv-archive-head.gbv-cat-vestea-buna { --decor-w: clamp(208px, 28vw, 260px); }
  .gbv-archive-head:not(.gbv-cat-pentru-fiecare-zi, .gbv-cat-copii-si-tineri) {
    padding-right: calc(var(--decor-w) + clamp(20px, 5vw - 4px, 60px));
  }
  .gbv-archive-head:not(.gbv-cat-pentru-fiecare-zi, .gbv-cat-copii-si-tineri) .gbv-archive-head__decor {
    right: clamp(8px, 5vw - 16px, 48px);
    width: var(--decor-w);
    height: var(--decor-w);
  }
  .gbv-cat-copii-si-tineri .gbv-archive-head__decor {
    right: clamp(8px, 100vw - 688px, 19%);              /* copii.dc.html .cs-smile */
  }
  .gbv-archive-head__inner {
    gap: 24px;                                          /* pentru-fiecare-zi.dc.html */
  }
  .gbv-archive-head__leaf {
    margin-right: clamp(0px, 8vw - 37px, 45px);
  }
}
@media (max-width: 459.98px) {
  .gbv-archive-head:not(.gbv-cat-pentru-fiecare-zi, .gbv-cat-copii-si-tineri) {
    padding-right: var(--gutter);                       /* the glyph is gone (catalog.dc.html 459 px) */
  }
  .gbv-archive-head:not(.gbv-cat-pentru-fiecare-zi, .gbv-cat-copii-si-tineri) .gbv-archive-head__decor {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   5. Body and grid (catalog.dc.html .ct-body / .ct-grid): the archive
      container's vertical rhythm and the product grid steps — 4 columns from
      1280, 3 at 922–1279, 3 at 768–921, 2 below 768 — at a specificity above
      Astra's column rules (.woocommerce[class*="columns-"].columns-4 >
      ul.products …, 0,4,1 / 0,5,2). The row view (commit 6) is one column.
   -------------------------------------------------------------------------- */
body.gbv-archive #primary {
  margin-top: 0;                                        /* Astra's 64 px archive margins give way to the mockup's rhythm */
  margin-bottom: 0;
}
body.gbv-archive .ast-woocommerce-container {
  padding: 0;                                           /* the .ct-body rhythm (36 / 56) sits on the sidebar + grid row, §11 */
}
body.gbv-archive.woocommerce[class*="columns-"] ul.products,
body.gbv-archive .ast-woocommerce-container ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;                                            /* catalog.dc.html .ct-grid */
  margin: 0;
  padding: 0;
}
body.gbv-archive ul.products::before,
body.gbv-archive ul.products::after {
  content: none;
}
body.gbv-archive.woocommerce[class*="columns-"] ul.products li.product.gbv-card,
body.gbv-archive .ast-woocommerce-container ul.products li.product.gbv-card {
  width: auto;
  min-width: 0;
  margin: 0;
  float: none;
}
@media (max-width: 1279.98px) and (min-width: 922px) {
  body.gbv-archive.woocommerce[class*="columns-"] ul.products,
  body.gbv-archive .ast-woocommerce-container ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 921.99px) {
  body.gbv-archive.woocommerce[class*="columns-"] ul.products,
  body.gbv-archive .ast-woocommerce-container ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 767.98px) {
  body.gbv-archive.woocommerce[class*="columns-"] ul.products,
  body.gbv-archive .ast-woocommerce-container ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
/* Row view (html.gbv-rows, catalog.js): one column of rows (card.css §6);
   under 360 px the rows give way to two columns of cards and the toggle
   hides (catalog.dc.html 359 px) */
@media (min-width: 360px) {
  html.gbv-rows body.gbv-archive.woocommerce[class*="columns-"] ul.products,
  html.gbv-rows body.gbv-archive .ast-woocommerce-container ul.products {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;                                        /* catalog.dc.html .ct-rows */
  }
}

/* --------------------------------------------------------------------------
   6. Toolbar: count · sort · view toggle (catalog.dc.html, desktop). Every
      control declares rest, hover, focus-visible and active against Astra's
      global button and select rules (§16).
   -------------------------------------------------------------------------- */
body.gbv-archive .gbv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;                                            /* catalog.dc.html toolbar */
  margin-bottom: 20px;
}
body.gbv-archive .woocommerce-result-count {
  float: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);                            /* 14.5 px in the mockup; the token */
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.gbv-toolbar__tools {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Sort: WooCommerce's form; the glyph at left 12, the select padded past it */
body.gbv-archive form.woocommerce-ordering {
  position: relative;
  display: flex;
  float: none;
  margin: 0;
}
body.gbv-archive form.woocommerce-ordering::before {
  content: "";
  position: absolute;
  left: 12px;                                           /* catalog.dc.html sort glyph */
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: var(--text-strong);
  -webkit-mask: url("../img/icons/sort.svg") center / contain no-repeat;
  mask: url("../img/icons/sort.svg") center / contain no-repeat;
  pointer-events: none;
}
body.gbv-archive form.woocommerce-ordering select.orderby {
  appearance: auto;
  width: auto;
  min-height: 40px;                                     /* catalog.dc.html .ct-sort */
  height: 100%;                                         /* the tools row stretches to the toggle group (40 + its borders); a native select ignores align-self: stretch */
  padding: 0 12px 0 40px;
  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-sm);
  color: var(--text-strong);
  cursor: pointer;
  transition:
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}
body.gbv-archive form.woocommerce-ordering select.orderby:hover {
  border-color: var(--border-strong);
}
body.gbv-archive form.woocommerce-ordering select.orderby:focus,
body.gbv-archive form.woocommerce-ordering select.orderby:focus-visible,
body.gbv-archive form.woocommerce-ordering select.orderby:active {
  outline: none;                                        /* catalog.dc.html .ct-sort: the orange border is the focus mark, no ring */
  border-color: var(--color-accent-strong);
  box-shadow: none;
}

/* View toggle: a bordered pair of 40 px segments (frozen mockup) */
body.gbv-archive .gbv-view {
  display: flex;
  border: var(--stroke-default) solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--motion-base) ease;
}
body.gbv-archive .gbv-view[hidden] {
  display: none;
}
body.gbv-archive .gbv-view:hover {
  border-color: var(--border-strong);
}
body.gbv-archive .gbv-view:focus-within,
body.gbv-archive .gbv-view:active {
  border-color: var(--color-accent-strong);
}
body.gbv-archive .gbv-view__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;                                          /* catalog.dc.html .ct-viewbtn */
  min-height: 40px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gbv-gray-300);
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
body.gbv-archive .gbv-view__btn + .gbv-view__btn {
  border-left: var(--stroke-default) solid var(--border-default);
}
body.gbv-archive .gbv-view__btn:hover,
body.gbv-archive .gbv-view__btn:focus-visible {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-strong);
}
body.gbv-archive .gbv-view__btn:focus-visible {
  outline-offset: -3px;                                 /* inside the clipped group */
}
body.gbv-archive .gbv-view__btn:active {
  background: transparent;                              /* catalog.dc.html: a press colours the group's border, not the segment */
  border-color: var(--border-default);
  color: var(--text-strong);
}
body.gbv-archive .gbv-view__btn[aria-pressed="true"] {
  background: var(--surface-brand-soft);
  border-color: var(--border-default);
  color: var(--text-strong);
}
body.gbv-archive .gbv-view__btn .gbv-icon {
  width: 20px;                                          /* catalog.dc.html */
  height: 20px;
}

/* --------------------------------------------------------------------------
   7. Mobile bar (review R3, catalog.dc.html .ct-mobilebar): below the switch
      „Filtre” (chunk 4b), the sort and the single toggle sit under the head;
      the desktop tools hide, the count stays in the toolbar. „Filtre” needs
      catalog.js (the drawer), so it stays hidden until the head script has
      set html.gbv-js (R11). „Filtre” and the sort box are equal at every
      width below the switch (the mockup's two halves; Teo's T6, 2026-10-10)
      — every rule of the bar lives in the one 921.99 block; below 465 the
      sort box is the bare value (Teo's T7, the block after it).
   -------------------------------------------------------------------------- */
.gbv-mobilebar {
  display: none;
}
@media (max-width: 921.99px) {
  .gbv-toolbar__tools {
    display: none;
  }
  .gbv-mobilebar {
    display: flex;
    gap: 10px;                                          /* catalog.dc.html .ct-mobilebar */
    padding: 14px var(--gutter);
    border-bottom: var(--stroke-hairline) solid var(--border-subtle);
  }
  body.gbv-archive .gbv-filterbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);                                /* catalog.dc.html .ct-filterbtn */
    flex: 1 1 0;                                        /* equal to the sort box (T6) */
    min-width: 0;
    min-height: var(--btn-md);                          /* 44 px (B6; the mockup's 11 px padding gives 42) */
    margin: 0;
    padding: 0 12px;
    background: var(--gbv-white);
    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-sm);                          /* 14.5 px in the mockup */
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--text-strong);
    cursor: pointer;
    transition:
      border-color var(--motion-base) ease,
      background-color var(--motion-base) ease;
  }
  html:not(.gbv-js) body.gbv-archive .gbv-filterbtn {
    display: none;
  }
  body.gbv-archive .gbv-filterbtn:hover {
    background: var(--gbv-white);
    border-color: var(--border-strong);
    color: var(--text-strong);
  }
  body.gbv-archive .gbv-filterbtn:focus-visible {
    outline: none;                                      /* catalog.dc.html: the orange border marks focus */
    background: var(--gbv-white);
    border-color: var(--color-accent-strong);
    color: var(--text-strong);
  }
  body.gbv-archive .gbv-filterbtn:active,
  body.gbv-archive .gbv-filterbtn[aria-expanded="true"] {
    background: var(--surface-sunken);
    border-color: var(--color-accent-strong);
    color: var(--text-strong);
  }
  body.gbv-archive .gbv-filterbtn .gbv-icon {
    width: 20px;                                        /* catalog.dc.html */
    height: 20px;
  }
  /* Glyph · 8 · value centred as a group (catalog.dc.html .ct-sortwrap), the
     select shrink-wrapped; the whole box is the tap target through
     catalog.js — a click on the box focuses the select and opens its list
     where HTMLSelectElement.showPicker() exists (Teo, 2026-10-09). */
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering {
    flex: 1 1 0;                                        /* equal to „Filtre” (T6) */
    min-width: 0;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 12px;
    background: var(--gbv-white);
    border: var(--stroke-default) solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--motion-base) ease;
  }
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering::before {
    position: static;
    flex: none;
    transform: none;
  }
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering:hover {
    border-color: var(--border-strong);
  }
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering:focus-within {
    border-color: var(--color-accent-strong);
  }
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering select.orderby,
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering select.orderby:hover,
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering select.orderby:focus,
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering select.orderby:active {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: var(--btn-md);                          /* 44 px (B6; the mockup's 11 px padding gives 42) */
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: var(--fw-medium);
    text-align: center;
    text-align-last: center;
  }
  /* The list's texts centred like the value, where the browser's own
     popup honours text-align on an option (Chrome does; iOS shows its
     native picker) */
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering select.orderby option {
    text-align: center;
  }
  body.gbv-archive .gbv-view-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 47px;                                        /* catalog.dc.html .ct-viewtoggle (mobile) */
    min-height: var(--btn-md);
    margin: 0;
    padding: 0;
    background: var(--gbv-white);
    border: var(--stroke-default) solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-strong);
    cursor: pointer;
    transition: border-color var(--motion-base) ease;
  }
  body.gbv-archive .gbv-view-mobile[hidden] {
    display: none;
  }
  body.gbv-archive .gbv-view-mobile:hover {
    background: var(--gbv-white);
    border-color: var(--border-strong);
    color: var(--text-strong);
  }
  body.gbv-archive .gbv-view-mobile:active,
  body.gbv-archive .gbv-view-mobile:focus-visible {
    background: var(--gbv-white);
    border-color: var(--color-accent-strong);          /* catalog.dc.html .ct-viewtoggle:active / :focus-within */
    color: var(--text-strong);
  }
  body.gbv-archive .gbv-view-mobile .gbv-icon {
    width: 20px;
    height: 20px;
  }
  /* The button shows the view it switches TO: grid while rows are on */
  body.gbv-archive .gbv-view-mobile__grid,
  html.gbv-rows body.gbv-archive .gbv-view-mobile__list {
    display: none;
  }
  html.gbv-rows body.gbv-archive .gbv-view-mobile__grid {
    display: inline-block;
  }
}
/* Below 465 px the sort glyph and the select's native arrow go — the box
   is the whole control already (catalog.js, 0.5.4) and the value needs
   the room: with them „Cele mai vândute” and the two „Preț” options
   clipped between 360 and 464 (Teo's T7, 2026-10-10; PORT_MAPPING §9).
   From 465 the mockup's glyph · value · arrow. */
@media (max-width: 464.98px) {
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering::before {
    display: none;
  }
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering select.orderby {
    appearance: none;
    -webkit-appearance: none;
  }
}
/* Up to 376 px the boxes' side padding 12 → 8: „Cele mai vândute” (110.6 px
   at 14 px 500) has under 2 px to spare in the sort box at 12 there — 1.4
   at 375, 1.9 at 376, 2.4 from 377 (T7). „Filtre” follows, as a flex item
   with a different padding would not stay equal to the sort box (T6). */
@media (max-width: 376.98px) {
  body.gbv-archive .gbv-filterbtn,
  body.gbv-archive .gbv-mobilebar form.woocommerce-ordering {
    padding: 0 8px;
  }
}
/* Under 360 px the rows give way to cards (card.css §6 starts at 360) and
   the toggle hides (catalog.dc.html 359 px) */
@media (max-width: 359.98px) {
  body.gbv-archive .gbv-mobilebar .gbv-view-mobile {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Pagination: 42 px circles, the current page in orange, chevron ends
      (catalog.dc.html); disabled ends are spans. Overrides Astra's bordered
      boxes (.woocommerce-js nav.woocommerce-pagination ul li …, 0,3,4).
   -------------------------------------------------------------------------- */
body.gbv-archive nav.woocommerce-pagination {
  margin-top: 40px;                                     /* catalog.dc.html pagination */
  text-align: center;
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > a,
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;                                          /* catalog.dc.html */
  height: 42px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: var(--stroke-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--gbv-white);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
body.gbv-archive .ast-woocommerce-container nav.woocommerce-pagination ul.page-numbers li > a:focus {
  border: var(--stroke-hairline) solid var(--border-default); /* Astra's …pagination ul.page-numbers li a:focus (dotted thin, inherit; 0,5,3) and WooCommerce's a:focus tint undone: focus is the base.css ring alone (catalog.dc.html) */
  background: var(--gbv-white);
  color: var(--text-body);
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > a:hover {
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  text-decoration: none;
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > a:active {
  background: var(--gbv-blue-steel);
  color: var(--text-on-brand);
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > span.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--text-on-accent);
  font-weight: var(--fw-bold);
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > span.dots {
  width: auto;
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  color: var(--text-muted);
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > span.is-disabled {
  color: var(--gbv-gray-300);
}
/* The chevron and the hidden label inside an end link: Astra's descendant
   rule (ul li span: block, 2.5em min-width, .75em padding) is undone */
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > a > .gbv-icon,
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > span > .gbv-icon {
  display: inline-block;
  width: 18px;                                          /* catalog.dc.html arrows */
  height: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: currentColor;
}
body.gbv-archive nav.woocommerce-pagination ul.page-numbers li > a > .gbv-sr-only {
  min-width: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   9. Empty state (audit D5, catalog.dc.html): paper card with the signature
      corner, the search glyph in a disc, title, advice, category chips and
      the DS button.
   -------------------------------------------------------------------------- */
body.gbv-archive .gbv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                                            /* catalog.dc.html empty state */
  padding: 48px 32px;
  border-radius: var(--radius-md);
  border-top-left-radius: var(--corner-md);
  background: var(--gbv-paper);
  text-align: center;
}
.gbv-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--gbv-white);
}
.gbv-empty__icon::before {
  content: "";
  width: 26px;                                          /* catalog.dc.html */
  height: 26px;
  background-color: var(--color-brand);
  -webkit-mask: url("../img/icons/decor-search.svg") center / contain no-repeat;
  mask: url("../img/icons/decor-search.svg") center / contain no-repeat;
}
body.gbv-archive .gbv-empty__title {
  margin: 4px 0 0;
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: 1.375rem;                                  /* 22 px, catalog.dc.html */
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
body.gbv-archive .gbv-empty__body {
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-body);
}
.gbv-empty__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: 4px;
}
.gbv-chip--md,
.gbv-chip--md:visited {
  min-height: 36px;                                     /* catalog.dc.html empty-state chip */
  padding: 0 14px;
}
body.gbv-archive .gbv-empty .gbv-empty__clear,
body.gbv-archive .gbv-empty .gbv-empty__clear:visited {
  margin-top: var(--space-2);
  padding-left: 20px;                                   /* catalog.dc.html „Șterge filtrele” */
  padding-right: 20px;
}
@media (max-width: 921.99px) {
  body.gbv-archive .gbv-empty {
    padding: 32px var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   11. Sidebar + grid row (chunk 4b, catalog.dc.html .ct-body): Astra's left
       sidebar — #secondary printed after #primary inside .ast-container — as
       the mockup's grid, 256 px + 40 px gap from 1280, 216 + 32 at 922–1279
       (Audit batch 5), the 36 / 56 rhythm on the row. Astra's own sidebar
       rules (percent widths from the Sidebar Width option, the 1 px
       separator and its −1 px margin, the paddings, the column-reverse
       stack below the switch) are neutralised here (§16). Astra prints the
       left sidebar before #primary; below 922 the row becomes a column with
       the sidebar after the grid, separated by a hairline, until the drawer
       takes it. The grid exists only under Astra's ast-left-sidebar body
       class: an empty result with nothing to filter gets no sidebar
       (inc/catalog.php, Teo's check 2026-10-10) and keeps 4a's plain
       container — the rhythm stays, the empty-state card takes the
       content width.
   -------------------------------------------------------------------------- */
body.gbv-archive #content > .ast-container {
  padding-top: 36px;                                    /* catalog.dc.html .ct-body rhythm, sidebar or not */
  padding-bottom: 56px;
}
body.gbv-archive.ast-left-sidebar #content > .ast-container {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);         /* catalog.dc.html .ct-body */
  align-items: start;
  gap: 40px;
  width: 100%;
}
body.gbv-archive.ast-left-sidebar #content > .ast-container > #primary {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.gbv-archive.ast-left-sidebar #content > .ast-container > #secondary {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.gbv-archive #secondary .sidebar-main,
body.gbv-archive #secondary .widget {
  margin: 0;
  padding: 0;
  background: transparent;                              /* Astra's #secondary .widget card (white, 2em) */
}
@media (max-width: 1279.98px) and (min-width: 922px) {
  body.gbv-archive.ast-left-sidebar #content > .ast-container {
    grid-template-columns: 216px minmax(0, 1fr);       /* catalog.dc.html 921–1279 */
    gap: 32px;
  }
}
@media (max-width: 921.99px) {
  body.gbv-archive #content > .ast-container {
    padding-top: 20px;                                  /* catalog.dc.html .ct-body below the switch */
    padding-bottom: 40px;
  }
  body.gbv-archive.ast-left-sidebar #content > .ast-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body.gbv-archive.ast-left-sidebar #content > .ast-container > #primary {
    order: 1;
    width: 100%;
  }
  body.gbv-archive.ast-left-sidebar #content > .ast-container > #secondary {
    order: 2;
    width: 100%;
    margin-top: 40px;
    padding-top: 24px;
    border-top: var(--stroke-hairline) solid var(--border-subtle);
  }
  html.gbv-js body.gbv-archive.ast-left-sidebar #content > .ast-container > #secondary {
    display: none;                                      /* catalog.js moves it into the drawer; the stack is the no-JS fallback */
  }
}

/* --------------------------------------------------------------------------
   12. Facets (catalog.dc.html aside): each facet is a .gbv-facet group —
       caption, then WooCommerce's filter block or the theme's own list —
       28 px apart with a hairline and 24 px above every facet that follows
       a visible one; a facet whose filter printed itself hidden (no
       options, one price) hides whole. The block's checkbox list, show-more
       button and price slider are restyled to the DS recipes by class; the
       block's own colour variables stay unset.
   -------------------------------------------------------------------------- */
body.gbv-archive .wc-block-product-filters {
  display: block;
  width: 100%;
  font-family: var(--font-body);
}
body.gbv-archive .wc-block-product-filters__content {
  display: block;
  gap: 0;
}
body.gbv-archive .gbv-facet {
  margin: 0;
  padding: 0;
}
body.gbv-archive .gbv-facet > * {
  margin: 0;                                            /* WordPress's flow-layout gap undone */
}
body.gbv-archive .gbv-facet:not(:has(> .wc-block-product-filter--hidden)) ~ .gbv-facet {
  margin-top: 28px;                                     /* catalog.dc.html aside gap */
  padding-top: 24px;
  border-top: var(--stroke-hairline) solid var(--border-subtle);
}
body.gbv-archive .gbv-facet:has(> .wc-block-product-filter--hidden) {
  display: none;
}
html:not(.gbv-js) body.gbv-archive .gbv-facet--new,
html:not(.gbv-js) body.gbv-archive .gbv-facet--pages {
  display: none;                                        /* catalog.js navigates for them; nothing dead without it */
}
body.gbv-archive .gbv-facet__fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.gbv-archive .gbv-facet .wc-block-product-filter--hidden {
  display: none;
}
body.gbv-archive .gbv-facet__caption {
  display: block;
  margin-bottom: 14px;                                  /* catalog.dc.html Categorii */
  font-size: var(--text-xs);
  color: var(--text-muted);
}
body.gbv-archive .gbv-facet--price .gbv-facet__caption {
  margin-bottom: 18px;                                  /* catalog.dc.html Preț */
}

/* Checkbox rows: the DS Checkbox (base.css §7) in the mockup's row —
   box · 10 · label, the count at the right edge, 12 px between rows */
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__items {
  display: flex;
  flex-direction: column;
  gap: 12px;                                            /* catalog.dc.html facet rows */
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__item[hidden] {
  display: none;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);                            /* 14.5 px in the mockup */
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
  color: var(--text-body);
  cursor: pointer;
  transition: color var(--motion-base) ease;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__label:hover {
  color: var(--text-strong);
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__input-wrapper {
  position: relative;
  display: block;
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__input-wrapper::before {
  content: none;                                        /* WooCommerce's tinted square behind the box */
}
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
  display: inline-grid;
  place-content: center;
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  background: var(--surface-card);
  border: var(--stroke-default) solid var(--border-default); /* catalog.dc.html row box */
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: inherit;
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    border-color var(--motion-base) ease,
    transform var(--motion-base) ease;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__label:hover input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
  border-color: var(--gbv-blue-steel);
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__label:active input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
  border-color: var(--color-accent-strong);
  transform: scale(0.92);
}
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus,
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
  outline: 2px solid var(--gbv-blue-steel);             /* catalog.dc.html focus-visible */
  outline-offset: 2px;
}
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus:not(:focus-visible) {
  outline: none;
}
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
  background: var(--color-brand);
  border-color: var(--color-brand);
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__label:hover input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
  background: var(--gbv-blue-deep);
  border-color: var(--gbv-blue-deep);
}
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked::before {
  content: "";                                          /* the DS tick (base.css §7 mask) stays; WooCommerce's own mark is dropped */
  opacity: 1;
}
body.gbv-archive .gbv-facet svg.wc-block-product-filter-checkbox-list__mark,
body.gbv-archive .gbv-facet input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked + svg.wc-block-product-filter-checkbox-list__mark {
  display: none;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__text-wrapper {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: inherit;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__text {
  display: inline;
  min-width: 0;
  overflow-wrap: anywhere;
  color: inherit;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__count {
  flex: none;
  font-size: 0;                                         /* the parentheses WooCommerce prints around the number are bare text nodes */
  color: var(--text-muted);
  white-space: nowrap;
}
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__count > span {
  font-size: var(--text-caption);                       /* 13 px, catalog.dc.html count */
}

/* „Arată toți autorii” / „Arată încă N”: the mockup's link look over
   Astra's global button rules and its sidebar rule #secondary button
   { font-size: 1rem } (1,0,1 — hence the id, §16) */
body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__show-more {
  margin-top: 14px;                                     /* 12 px row gap + the mockup's 2 px */
}
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button,
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button:hover,
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button:focus,
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button:active {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-caption);                       /* 13.5 px in the mockup */
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
  color: var(--gbv-blue);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-base) ease;
}
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button:hover,
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button:focus-visible {
  color: var(--gbv-blue-deep);
  text-decoration: underline;
}
body.gbv-archive #secondary .gbv-facet .wc-block-product-filter-checkbox-list__show-more-button[hidden] {
  display: none;
}

/* Price slider (catalog.dc.html Preț) and the theme's page-count range
   (review R1), one rule set, pixel-alike (Teo's check 2026-10-10): a 4 px
   gray-100 pill track the full width, the chosen range solid orange from
   handle centre to handle centre, 16 px white handles with the orange
   hairline and shadow-sm drawn above both, the values 10 px under. The
   two native inputs are 16 px tall boxes over the track — 8 px wider on
   each side, so a handle's centre sits on the track's end at a bound and
   the bar's --low / --high meet the handle centres —, taking the pointer
   only on their handles; their own track is transparent (Astra paints a
   range track that washed the bar, §16) and their box never clips the
   handle (0 px inputs with a −8 px handle margin cut the handles in half).
   WooCommerce draws its range with --low / --high on its bar; the theme's
   .gbv-range repeats the markup, so one rule set serves both. */
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 0;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range,
body.gbv-archive .gbv-facet .gbv-range__track {
  --range-color: var(--color-accent);
  flex: 1 1 100%;                                       /* shrinks to fit beside its 8 px margins */
  min-width: 0;
  position: relative;
  height: 16px;                                         /* catalog.dc.html */
  margin: 0 8px;
  border-radius: 0;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range::before,
body.gbv-archive .gbv-facet .gbv-range__track::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 6px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--gbv-gray-100);
  opacity: 1;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range .range-bar,
body.gbv-archive .gbv-facet .gbv-range__bar {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-pill);
}
body.gbv-archive .gbv-facet .gbv-range__bar {
  background: linear-gradient(to right, transparent var(--low, 0%), var(--color-accent) var(--low, 0%), var(--color-accent) var(--high, 100%), transparent var(--high, 100%));
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"],
body.gbv-archive .gbv-facet .gbv-range__input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 1;                                           /* above the bar whatever the markup order */
  top: 0;
  left: -8px;                                           /* a handle's centre on the track's end at a bound */
  width: calc(100% + 16px);
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  pointer-events: none;                                 /* the handles take the pointer (below) */
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-runnable-track,
body.gbv-archive .gbv-facet .gbv-range__input::-webkit-slider-runnable-track {
  appearance: none;
  -webkit-appearance: none;
  height: 16px;
  background: transparent;                              /* Astra's range track (§16) washed the bar */
  border: 0;
  box-shadow: none;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-track,
body.gbv-archive .gbv-facet .gbv-range__input::-moz-range-track {
  height: 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb,
body.gbv-archive .gbv-facet .gbv-range__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 16px;                                          /* catalog.dc.html handle */
  height: 16px;
  margin: 0;                                            /* the 16 px track centres it */
  border: var(--stroke-default) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--gbv-white);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  pointer-events: auto;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb,
body.gbv-archive .gbv-facet .gbv-range__input::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  border: var(--stroke-default) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--gbv-white);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transform: none;
  pointer-events: auto;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"].min::-webkit-slider-thumb,
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"].max::-webkit-slider-thumb {
  margin-left: 0;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb:hover,
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]:focus::-webkit-slider-thumb,
body.gbv-archive .gbv-facet .gbv-range__input::-webkit-slider-thumb:hover,
body.gbv-archive .gbv-facet .gbv-range__input:focus::-webkit-slider-thumb {
  background: var(--gbv-white);
  border-color: var(--color-accent-strong);
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb:hover,
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]:focus::-moz-range-thumb,
body.gbv-archive .gbv-facet .gbv-range__input::-moz-range-thumb:hover,
body.gbv-archive .gbv-facet .gbv-range__input:focus::-moz-range-thumb {
  background: var(--gbv-white);
  border-color: var(--color-accent-strong);
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]:active::-webkit-slider-thumb,
body.gbv-archive .gbv-facet .gbv-range__input:active::-webkit-slider-thumb {
  cursor: grabbing;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-webkit-slider-thumb,
body.gbv-archive .gbv-facet .gbv-range__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--gbv-blue-steel);
  outline-offset: 2px;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-moz-range-thumb,
body.gbv-archive .gbv-facet .gbv-range__input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--gbv-blue-steel);
  outline-offset: 2px;
}
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__left,
body.gbv-archive .gbv-facet--price .wc-block-product-filter-price-slider__right,
body.gbv-archive .gbv-facet .gbv-range__label {
  margin-top: 10px;                                     /* catalog.dc.html labels row */
  font-family: var(--font-body);
  font-size: var(--text-caption);                       /* 13.5 px */
  line-height: var(--leading-snug);
  color: var(--text-body);
}
body.gbv-archive .gbv-facet .gbv-range__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Category links on category pages (biblia.dc.html aside): 8 / 12 rows,
   the current category blue-mist and bold, the counts 13 px muted; over
   Astra's sidebar list and link rules (#secondary li, 1,0,1) */
body.gbv-archive #secondary .gbv-catlinks__list {
  display: flex;
  flex-direction: column;
  gap: 2px;                                             /* biblia.dc.html */
  margin: 0;
  padding: 0;
  list-style: none;
}
body.gbv-archive #secondary .gbv-catlinks__item {
  margin: 0;
  padding: 0;
  line-height: var(--leading-snug);
}
body.gbv-archive #secondary .gbv-catlinks__link,
body.gbv-archive #secondary .gbv-catlinks__link:visited {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;                                    /* biblia.dc.html */
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);                            /* 14.5 px in the mockup */
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
  color: var(--text-body);
  text-decoration: none;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
body.gbv-archive #secondary .gbv-catlinks__link:hover,
body.gbv-archive #secondary .gbv-catlinks__link:focus-visible {
  background: var(--surface-sunken);                    /* biblia.dc.html hv16-1-hover */
  color: var(--text-strong);
  text-decoration: none;
}
body.gbv-archive #secondary .gbv-catlinks__link:focus {
  color: var(--text-strong);                            /* Astra's a:focus colour undone */
  text-decoration: none;
}
body.gbv-archive #secondary .gbv-catlinks__link[aria-current],   /* "page": this category; "true": the section */
body.gbv-archive #secondary .gbv-catlinks__link[aria-current]:hover,
body.gbv-archive #secondary .gbv-catlinks__link[aria-current]:focus {
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
}
body.gbv-archive #secondary .gbv-catlinks__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.gbv-archive #secondary .gbv-catlinks__count {
  flex: none;
  font-size: var(--text-caption);                       /* 13 px */
  color: var(--text-muted);
}
body.gbv-archive #secondary .gbv-catlinks__link[aria-current] .gbv-catlinks__count {
  color: inherit;
}

/* --------------------------------------------------------------------------
   13. Applied filters (Audit A8, catalog.dc.html): under the toolbar, 32 px
       blue-mist chips with a 28 px round remove link, „Șterge tot” outlined
       last; wraps at 360 (G1). On an empty result the row opens the content
       column (no toolbar: WooCommerce skips it), so the −6 px pull-up goes.
   -------------------------------------------------------------------------- */
body.gbv-archive .gbv-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);                                  /* catalog.dc.html chips row */
  margin: -6px 0 18px;
  padding: 0;
  list-style: none;
}
body.gbv-archive .gbv-applied:first-child {
  margin-top: 0;
}
body.gbv-archive .gbv-applied__item {
  margin: 0;
  padding: 0;
}
body.gbv-archive .gbv-applied__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;                                         /* catalog.dc.html chip */
  padding: 0 4px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-caption);                       /* 13 px */
  line-height: 1;
}
body.gbv-archive .gbv-applied__label {
  overflow-wrap: anywhere;
}
body.gbv-archive .gbv-applied__remove,
body.gbv-archive .gbv-applied__remove:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;                                          /* catalog.dc.html remove button */
  height: 28px;
  border-radius: var(--radius-pill);
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
body.gbv-archive .gbv-applied__remove::before {
  content: "";
  position: absolute;
  inset: -8px;                                          /* the 44 px hit zone (B6) around the 28 px disc */
}
body.gbv-archive .gbv-applied__remove:hover,
body.gbv-archive .gbv-applied__remove:focus-visible {
  background: var(--gbv-blue-deep);
  color: var(--text-on-brand);
  text-decoration: none;
}
body.gbv-archive .gbv-applied__remove:focus {
  color: inherit;                                       /* Astra's a:focus colour undone */
  text-decoration: none;
}
body.gbv-archive .gbv-applied__remove:focus-visible {
  color: var(--text-on-brand);
}
body.gbv-archive .gbv-applied__remove .gbv-icon {
  width: 14px;                                          /* catalog.dc.html × */
  height: 14px;
}
body.gbv-archive .gbv-applied__clear,
body.gbv-archive .gbv-applied__clear:visited {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;                                      /* catalog.dc.html „Șterge tot” */
  border: var(--stroke-default) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gbv-blue);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-caption);
  line-height: 1;
  text-decoration: none;
  transition:
    border-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
body.gbv-archive .gbv-applied__clear:hover,
body.gbv-archive .gbv-applied__clear:focus-visible {
  border-color: var(--gbv-blue-steel);
  color: var(--gbv-blue-deep);
  text-decoration: none;
}
body.gbv-archive .gbv-applied__clear:focus {
  color: var(--gbv-blue);
  text-decoration: none;
}
body.gbv-archive .gbv-applied__clear:active {
  background: var(--surface-sunken);
}

/* --------------------------------------------------------------------------
   14. Filter drawer (chunk 4b, catalog.dc.html's drawer): a fixed layer over
       the page — blue-deep backdrop at 50 % and a right-hand sheet
       min(330px, 88vw) with the signature corner — holding the sidebar
       (#secondary, moved in by catalog.js) between a „Filtre” head with the
       44 px close and a footer with „Șterge tot” and „Arată N produse”. The
       facets inside use the drawer's 11 px captions and 20 / 24 px rhythm.
       Never shown above the switch.
   -------------------------------------------------------------------------- */
body.gbv-archive .gbv-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}
body.gbv-archive .gbv-drawer[hidden] {
  display: none;
}
@media (min-width: 922px) {
  body.gbv-archive .gbv-drawer {
    display: none;
  }
}
body.gbv-archive .gbv-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--gbv-blue-deep) 50%, transparent); /* catalog.dc.html */
}
body.gbv-archive .gbv-drawer__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(330px, 88vw);                              /* catalog.dc.html .ct-drawer */
  background: var(--gbv-white);
  border-top-left-radius: var(--corner-sm);             /* 28 px */
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--motion-lift) ease;
}
body.gbv-archive .gbv-drawer.is-open .gbv-drawer__sheet {
  transform: none;
}
body.gbv-archive .gbv-drawer.is-instant .gbv-drawer__sheet {
  transition: none;                                     /* reopened after a filter navigation (T1): no slide */
}
body.gbv-archive .gbv-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 20px 20px 16px 28px;                         /* catalog.dc.html */
  border-bottom: var(--stroke-hairline) solid var(--border-subtle);
}
body.gbv-archive .gbv-drawer__title {
  font-family: var(--font-headline);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;                                   /* 20 px, catalog.dc.html drawer title */
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
body.gbv-archive .gbv-drawer__close,
body.gbv-archive .gbv-drawer__close:hover,
body.gbv-archive .gbv-drawer__close:focus,
body.gbv-archive .gbv-drawer__close:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--btn-md);                                 /* 44 px, catalog.dc.html .ct-drawerclose */
  height: var(--btn-md);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: none;
  color: var(--gbv-blue-deep);
  cursor: pointer;
  transition: background-color var(--motion-base) ease;
}
body.gbv-archive .gbv-drawer__close:hover,
body.gbv-archive .gbv-drawer__close:focus-visible {
  background: var(--surface-brand-soft);                /* catalog.dc.html hover */
}
body.gbv-archive .gbv-drawer__close:active {
  background: var(--surface-sunken);
}
body.gbv-archive .gbv-drawer__close:focus-visible {
  outline: 2px solid var(--gbv-blue-steel);
  outline-offset: 2px;
}
body.gbv-archive .gbv-drawer__close .gbv-icon {
  width: 18px;                                          /* catalog.dc.html */
  height: 18px;
}
body.gbv-archive .gbv-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 20px 28px;                         /* catalog.dc.html */
}
body.gbv-archive .gbv-drawer__body #secondary {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
body.gbv-archive .gbv-drawer .gbv-facet__caption {
  margin-bottom: 12px;                                  /* catalog.dc.html drawer captions */
  font-size: var(--text-2xs);
}
body.gbv-archive .gbv-drawer .gbv-facet--price .gbv-facet__caption {
  margin-bottom: 16px;
}
body.gbv-archive .gbv-drawer .gbv-facet:not(:has(> .wc-block-product-filter--hidden)) ~ .gbv-facet {
  margin-top: 24px;                                     /* catalog.dc.html drawer rhythm */
  padding-top: 20px;
}
body.gbv-archive .gbv-drawer__foot {
  display: flex;
  gap: 10px;                                            /* catalog.dc.html */
  padding: 16px 20px 20px 28px;
  border-top: var(--stroke-hairline) solid var(--border-subtle);
}
body.gbv-archive .gbv-drawer__clear,
body.gbv-archive .gbv-drawer__clear:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: var(--btn-md);
  padding: 0 10px;
  border: var(--stroke-default) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);                            /* 14.5 px in the mockup */
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--gbv-blue);
  text-decoration: none;
  transition:
    border-color var(--motion-base) ease,
    background-color var(--motion-base) ease;
}
body.gbv-archive .gbv-drawer__clear:hover,
body.gbv-archive .gbv-drawer__clear:focus-visible {
  border-color: var(--gbv-blue-steel);                  /* catalog.dc.html .ct-ghostbtn */
  color: var(--gbv-blue);
  text-decoration: none;
}
body.gbv-archive .gbv-drawer__clear:focus {
  color: var(--gbv-blue);
  text-decoration: none;
}
body.gbv-archive .gbv-drawer__clear:active {
  background: var(--surface-sunken);
}
body.gbv-archive .gbv-drawer__apply,
body.gbv-archive .gbv-drawer__apply:hover,
body.gbv-archive .gbv-drawer__apply:focus,
body.gbv-archive .gbv-drawer__apply:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1.6 1 0;                                        /* catalog.dc.html .ct-applybtn */
  min-height: var(--btn-md);
  margin: 0;
  padding: 0 10px;
  border: var(--stroke-default) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--text-on-accent);
  cursor: pointer;
  transition:
    background-color var(--motion-base) ease,
    transform var(--motion-press) ease;
}
body.gbv-archive .gbv-drawer__apply:hover,
body.gbv-archive .gbv-drawer__apply:focus-visible {
  background: var(--color-accent-strong);               /* catalog.dc.html hv20-4-hover */
  border-color: var(--color-accent-strong);
}
body.gbv-archive .gbv-drawer__apply:focus-visible {
  outline: 2px solid var(--gbv-blue-steel);
  outline-offset: 2px;
}
body.gbv-archive .gbv-drawer__apply:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.gbv-archive .gbv-drawer__sheet {
    transition: none;
  }
  body.gbv-archive .gbv-drawer__apply:active {
    transform: none;
  }
  .gbv-pill:hover,
  .gbv-pill:focus-visible,
  .gbv-pill:active,
  .gbv-cat-copii-si-tineri .gbv-archive-head__decor:active::before,
  body.gbv-archive .gbv-facet .wc-block-product-filter-checkbox-list__label:active input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
    transform: none;
  }
  .gbv-cat-copii-si-tineri .gbv-archive-head__decor:hover::before {
    animation: none;
  }
}