/* dv-styles: wine style pages + the "Stiluri de vin" rows on the catalogue, house pages and /kavi/.
   Kit tokens only (tokens.css); cards, chips, facts, accordion and buttons are the kit's own. 390–1440 px, no
   horizontal scroll: chip rows wrap on wide screens and scroll inside their own track on phones. */

/* ---- "Stiluri de vin" rows ------------------------------------------------------------------------------ */
.dvs-nav { display: grid; gap: var(--sp-3); min-width: 0; }
.dvs-nav__group { display: grid; gap: var(--sp-2); min-width: 0; }
.dvs-nav__label {
  font-family: var(--font-text); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-strong);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted);
}
.dvs-nav__list {
  list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 6px 2px; min-width: 0;
}
.dvs-nav__list > li { flex: none; }
.dvs-nav .dvh-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* phones: each row is one line that scrolls sideways inside itself (never the page) */
@media (max-width: 599.98px) {
  .dvs-nav__list {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .dvs-nav__list::-webkit-scrollbar { display: none; }
  .dvs-nav__list > li { scroll-snap-align: start; }
}

/* from 900 px: label column + chips, one row per group */
@media (min-width: 900px) {
  .dvs-nav__group { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; column-gap: var(--sp-5); }
  .dvs-nav--house .dvs-nav__group, .dvs-nav--kids .dvs-nav__group { grid-template-columns: auto minmax(0, 1fr); }
}

/* catalogue (archive-product.php): under the page head, above the filter bar; compact rows */
.dvs-nav--shop { gap: var(--sp-2); padding-bottom: var(--sp-4); }
@media (min-width: 900px) { .dvs-nav--shop { gap: 0; } }
.dvs-nav--shop .dvs-nav__list { padding-block: 4px; }
/* house pages and /kavi/: a quiet row after the wines */
.dvs-nav--house { padding-block: var(--sp-5) var(--sp-2); }
.pg-kavi .dvs-nav--house { padding-block: var(--sp-6); }

/* ---- Style page ------------------------------------------------------------------------------------------------ */
.dvs-top { padding-top: var(--sp-5); }
.dvs-head .dvh-crumbs + * { margin-top: var(--sp-5); }
.dvs-head__kicker + .dvs-head__title { margin-top: var(--sp-2); }
.dvs-head__title { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 24ch; text-wrap: balance; }
.dvs-intro__text { max-width: var(--text-measure); margin-top: var(--sp-5); }
.dvs-intro__text p:first-child { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* the shelf: up to five bottles of the page beside the head, from 1200 px (phones keep the text first) */
.dvs-shelf { display: none; }
@media (min-width: 1200px) {
  .dvs-top--shelf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: var(--sp-8); align-items: end; }
  .dvs-shelf {
    display: flex; justify-content: center; align-items: flex-end; align-self: stretch; overflow: hidden;
    min-height: 340px; margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-5) 0;
    background: var(--band); border-radius: var(--radius-media) var(--radius-media) 0 0;
  }
  .dvs-shelf[data-house] { background: var(--house-tint, var(--band)); }
  .dvs-shelf__img { height: 280px; width: auto; max-width: none; margin-inline: -14px; }
}

.dvs-intro { padding-block: var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-6); }
.dvs-facts { margin: 0; }
@media (min-width: 600px) { .dvs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dvs-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.dvs-nav--kids { padding-top: 0; }

.dvs-list { padding-block: var(--sp-5) var(--sp-7); }
.dvs-list + .dvs-list { padding-top: var(--sp-3); }
.dvs-list__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.dvs-list__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.dvs-list__note { max-width: var(--text-measure); }

.dvs-section__title { font-size: var(--fs-h2); line-height: var(--lh-h2); margin-bottom: var(--sp-5); }

.dvs-trade { margin-block: var(--sp-5); }
.dvs-trade__inner { display: grid; gap: var(--sp-5); padding-block: var(--sp-7); align-items: center; }
.dvs-trade__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.dvs-trade__lead { margin-top: var(--sp-3); max-width: var(--text-measure); font-size: var(--fs-body); line-height: var(--lh-body); }
.dvs-trade__btn { justify-self: start; }
@media (min-width: 900px) {
  .dvs-trade__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-7); }
}

.dvs-faq { padding-block: var(--sp-7); }
.dvs-faq .dvh-acc > summary { padding-block: var(--sp-3); }
.dvs-faq__q { font: inherit; margin: 0; }
.dvs-faq .dvh-acc > summary .dvh-icon { flex: none; }

.dvs-also { padding-block: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-5); }
.dvs-faq + .dvs-also { padding-top: var(--sp-3); }
.dvs-also .dvs-section__title { margin-bottom: 0; }
.dvs-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 600px) { .dvs-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .dvs-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dvs-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; height: 100%;
  padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.dvs-link:hover { border-color: var(--control); }
.dvs-link__text { display: grid; gap: 2px; min-width: 0; }
.dvs-link__title { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); }
.dvs-link__note { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.dvs-link .dvh-icon { flex: none; }

.dvs-more { padding-block: var(--sp-6) var(--section); }
.dvs-more .dvs-nav { gap: var(--sp-4); }