/* ==========================================================================
   Doina Vin · css/controls.css (2026-11-02, owner "can you improve forms buttons, doesnot look modern")
   One control layer for the whole front end, loaded after the kit, the Woo layer, the page layer and the
   plugin sheets (inc/assets.php, priority 100). It re-skins the classes the markup already prints
   (.dvh-btn, .button, .dvh-input, .dvh-select, .dvh-chip, .dvh-check, .dvh-stepper, .dvh-seg, .dvh-option,
   Woo's .input-text / .quantity / .page-numbers) instead of adding new ones.

   Direction: calm and editorial, not a dashboard. Softer corners (10 px controls, round chips), hairline
   outlines and white fills on the limewash ground, one tinted "selected" state built from the brand green,
   a soft focus halo on fields, a short press on buttons. No new colours: every tint is mixed from the
   existing roles (--action, --focus, --ink, --error).
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------------------------------- */
:root {
  --radius-control: 10px;       /* buttons, inputs, selects, steppers, option cards (was 4 px) */
  --radius-check: 6px;          /* checkboxes, small badges */
  --radius-pill: 999px;         /* chips, filter pills, segmented controls, switches, icon buttons */

  --control-h: 48px;
  --control-h-sm: 40px;
  --chip-h: 36px;               /* + 4 px invisible hit area each side = 44 */

  --field-border: var(--control);                                          /* 3.70:1 on white, AA for a field edge */
  --field-border-hover: color-mix(in srgb, var(--control) 45%, var(--ink));
  --outline-soft: color-mix(in srgb, var(--ink) 20%, var(--surface));      /* secondary buttons, chips at rest */
  --outline-hover: color-mix(in srgb, var(--ink) 42%, var(--surface));
  --fill-hover: color-mix(in srgb, var(--ink) 5%, var(--surface));         /* hover wash on white controls */
  --fill-press: color-mix(in srgb, var(--ink) 9%, var(--surface));
  --tint-select: color-mix(in srgb, var(--focus) 14%, var(--surface));     /* selected chip / option (leaf wash); action text 10:1 */
  --tint-select-line: color-mix(in srgb, var(--focus) 55%, var(--surface));
  --halo: 0 0 0 4px color-mix(in srgb, var(--focus) 26%, transparent);   /* field focus halo (the border carries the contrast) */
  --halo-error: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent);
  --lift: 0 1px 2px rgb(26 23 27 / .06);
  --lift-btn: 0 1px 2px rgb(26 23 27 / .14), inset 0 1px 0 rgb(255 255 255 / .08);

  --t-colors: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
  --t-press: transform var(--dur-press) var(--ease-out);

  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-check-action: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322372B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A171B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357545A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}

/* ---- 2. Buttons: primary, secondary, ghost (tertiary stays a link), icon ------------------------ */
.dvh-btn, .button, .wc-block-components-button {
  min-height: var(--control-h); border-radius: var(--radius-control);
  transition: var(--t-colors), var(--t-press);
  touch-action: manipulation;
}
.dvh-btn--sm { min-height: var(--control-h-sm); }
.dvh-btn--primary, .single_add_to_cart_button, .checkout-button, #place_order, .button.alt,
.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button { box-shadow: var(--lift-btn); }
.dvh-btn--secondary, .button:not(.alt):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button) {
  background: var(--surface); border-color: var(--outline-soft); box-shadow: var(--lift);
}
.dvh-btn--ghost { background: transparent; color: var(--ink); border-color: transparent; }
.dvh-btn--on-deep { background: transparent; border-color: rgb(236 232 225 / .55); }
@media (hover: hover) {
  .dvh-btn--secondary:hover, .button:not(.alt):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):hover {
    background: var(--fill-hover); border-color: var(--outline-hover);
  }
  .dvh-btn--ghost:hover { background: var(--fill-hover); }
  .dvh-btn--on-deep:hover { border-color: var(--on-deep); }
}
.dvh-btn:active, .button:active, .wc-block-components-button:active, .dvh-add:active, .add_to_cart_button:active,
.dvh-chip:active, .dvh-facet__btn:active, .dvh-iconbtn:active, .dvh-cartbtn:active { transform: scale(.97); }
.dvh-btn--secondary:active, .button:not(.alt):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):active { background: var(--fill-press); }
.dvh-btn:is([disabled], [aria-disabled="true"]), .button:is(.disabled, :disabled), .wc-block-components-button:disabled {
  background: var(--band); color: var(--muted); border-color: var(--band); box-shadow: none; cursor: not-allowed; transform: none;
}
/* busy (Woo adds .loading during its requests; plugins may set aria-busy) */
.dvh-btn[aria-busy="true"], .button.loading { position: relative; color: transparent !important; pointer-events: none; }
.dvh-btn[aria-busy="true"]::after, .button.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--on-action) var(--on-action) transparent transparent; animation: dvh-spin .7s linear infinite;
}
.dvh-btn--secondary[aria-busy="true"]::after, .button:not(.alt).loading::after { border-color: var(--ink) var(--ink) transparent transparent; }
@keyframes dvh-spin { to { rotate: 1turn; } }

/* icon buttons: round, a quiet wash on hover */
.dvh-iconbtn, .dvh-cartbtn { border-radius: var(--radius-pill); transition: var(--t-colors), var(--t-press); }
@media (hover: hover) { .dvh-iconbtn:hover, .dvh-cartbtn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } }

/* card add ("Adaugă"): the same corner and press as every button */
.dvh-add, .add_to_cart_button { border-color: var(--outline-hover); transition: var(--t-colors), var(--t-press); }

/* ---- 3. Text fields, select, textarea, search ------------------------------------------------------ */
.dvh-input, .dvh-select, .dvh-textarea,
.form-row .input-text, .form-row select, .woocommerce-input-wrapper .input-text, .form-row textarea,
.wc-block-components-text-input input {
  min-height: var(--control-h); border-radius: var(--radius-control); border-color: var(--field-border); background-color: var(--surface);
  transition: var(--t-colors);
}
@media (hover: hover) {
  .dvh-input:hover, .dvh-select:hover, .dvh-textarea:hover,
  .form-row .input-text:hover, .form-row select:hover, .form-row textarea:hover { border-color: var(--field-border-hover); }
}
.dvh-input:focus, .dvh-select:focus, .dvh-textarea:focus,
.form-row .input-text:focus, .form-row select:focus, .form-row textarea:focus, .wc-block-components-text-input input:focus {
  border-color: var(--action); box-shadow: var(--halo); outline: 2px solid transparent; outline-offset: 0;   /* transparent outline keeps a ring in forced colours */
}
.dvh-input:disabled, .dvh-select:disabled, .dvh-textarea:disabled, .form-row .input-text:disabled, .form-row select:disabled {
  background-color: var(--band); border-color: var(--line); color: var(--muted); cursor: not-allowed;
}
.dvh-input[readonly], .form-row .input-text[readonly] { background-color: var(--ground); }
/* error: the field, the kit's .is-invalid, Woo's .woocommerce-invalid, aria-invalid from any plugin */
.dvh-field.is-invalid :is(.dvh-input, .dvh-select, .dvh-textarea), .woocommerce-invalid :is(.input-text, select), .has-error :is(input, select, textarea),
:is(.dvh-input, .dvh-select, .dvh-textarea, .input-text)[aria-invalid="true"] {
  border-color: var(--error); box-shadow: var(--halo-error); background-color: color-mix(in srgb, var(--error) 3%, var(--surface));
}
.dvh-textarea, .form-row textarea { min-height: 112px; padding-block: 12px; line-height: 1.5; resize: vertical; }
.dvh-select, .form-row select { background-image: var(--icon-chevron); background-position: right 14px center; background-size: 18px; }
.dvh-select--sm { min-height: var(--control-h-sm); }
.dvh-label, .form-row label { letter-spacing: .005em; }

/* search: the magnifier inside, a round clear button once something is typed (WebKit/Blink) */
.dvh-search .dvh-icon { left: 16px; width: 18px; height: 18px; transition: color var(--dur-hover) ease; }
.dvh-search input { padding-left: 44px; text-overflow: ellipsis; }
.pg-listing-tools .dvh-search { width: clamp(300px, 26vw, 380px); }   /* the catalogue head: the whole placeholder fits from 1280 px */
.dvh-search:focus-within .dvh-icon { color: var(--action); }
.dvh-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-inline: 4px -4px; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 8%, transparent) var(--icon-clear) center / 14px no-repeat;
}
.dvh-search input[type="search"]::-webkit-search-cancel-button:hover { background-color: color-mix(in srgb, var(--ink) 14%, transparent); }

/* ---- 4. Checkbox, radio, switch ------------------------------------------------------------------- */
.dvh-check input, .dvh-radio input, .wc-block-components-checkbox__input, .woocommerce-form__input-checkbox {
  border-radius: var(--radius-check); border-color: var(--field-border);
  transition: background-color var(--dur-press) ease, border-color var(--dur-press) ease, box-shadow var(--dur-press) var(--ease-out);
}
.dvh-check input:checked, .wc-block-components-checkbox__input:checked, .woocommerce-form__input-checkbox:checked {
  background: var(--action) var(--icon-check) center / 14px no-repeat; border-color: var(--action);
}
.dvh-radio input, .dvh-option input { border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 10px var(--surface); }
.dvh-radio input:checked, .dvh-option input:checked { border-color: var(--action); background: var(--action); box-shadow: inset 0 0 0 4px var(--surface); }
@media (hover: hover) {
  .dvh-check:hover input:not(:checked), .dvh-radio:hover input:not(:checked) { border-color: var(--field-border-hover); background-color: var(--fill-hover); }
}
:is(.dvh-check, .dvh-radio) input:disabled { opacity: .45; cursor: not-allowed; }
:is(.dvh-check, .dvh-radio):has(input:disabled) { color: var(--muted); cursor: not-allowed; }

.dvh-switch__track { width: 44px; height: 26px; border-radius: var(--radius-pill); border-color: var(--field-border); transition: var(--t-colors); }
.dvh-switch__track::after { top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 1px 2px rgb(26 23 27 / .2); transition: translate var(--dur-ui) var(--ease-out), background-color var(--dur-hover) ease; }
.dvh-switch input:checked + .dvh-switch__track::after { translate: 18px 0; }
.dvh-switch input:disabled + .dvh-switch__track { opacity: .45; }

/* ---- 5. Stepper (quantity) ------------------------------------------------------------------------- */
.dvh-stepper, .quantity { border-color: var(--field-border); border-radius: var(--radius-control); overflow: hidden; transition: var(--t-colors); }
.dvh-stepper:focus-within, .quantity:focus-within { border-color: var(--action); box-shadow: var(--halo); }
.dvh-stepper__btn { transition: background-color var(--dur-press) ease, color var(--dur-press) ease; }
@media (hover: hover) { .dvh-stepper__btn:hover:not(:disabled) { background: var(--fill-hover); } }
.dvh-stepper__btn:active:not(:disabled) { background: var(--fill-press); }
.dvh-stepper__btn:focus-visible { outline-offset: -3px; border-radius: 8px; }
.dvh-stepper__input, .quantity .qty { border-inline-color: color-mix(in srgb, var(--line) 70%, var(--surface)); }
.dvh-stepper__input:focus, .quantity .qty:focus { outline: none; }

/* ---- 6. Chips, filter pills, chip rows --------------------------------------------------------- */
.dvh-chip, .dvh-facet__btn {
  height: var(--chip-h); min-height: var(--chip-h); padding: 0 14px; gap: 6px;
  border: 1px solid var(--outline-soft); border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--lift);
  color: var(--ink); font-size: var(--fs-meta); font-weight: var(--fw-ui);
  transition: var(--t-colors), var(--t-press);
}
.dvh-chip::before { inset: -4px -2px; }
.dvh-chip .dvh-dot { width: 8px; height: 8px; }
.dvh-chip__count { font-size: 13px; color: var(--muted); }
@media (hover: hover) {
  .dvh-chip:hover, .dvh-facet__btn:hover { border-color: var(--outline-hover); background-color: var(--fill-hover); }
}
/* selected: a green tint, green text and a check in front (on the current house, the check takes the dot's place) */
.dvh-chip:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"]),
.dvh-facet__btn[aria-pressed="true"] {
  background: var(--tint-select) var(--icon-check-action) 12px center / 14px no-repeat; border-color: var(--tint-select-line);
  color: var(--action); padding-left: 32px; box-shadow: none;
}
.dvh-chip:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"]) .dvh-dot { display: none; }
.dvh-chip:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"]) .dvh-chip__count,
.dvh-facet__btn[aria-pressed="true"] .dvh-chip__count { color: color-mix(in srgb, var(--action) 75%, var(--surface)); }
.dvh-chip[aria-pressed="true"] .dvh-dot, .dvh-chip[aria-current="true"] .dvh-dot { box-shadow: none; }
.dvh-chip--remove { padding-right: 8px; }
.dvh-chip--remove .dvh-icon { width: 16px; height: 16px; padding: 1px; border-radius: 50%; background: color-mix(in srgb, var(--action) 14%, transparent); }
.dvh-facet__btn[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dvh-facet__btn .dvh-facet__n { min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); }
.dvh-facet__panel { border-radius: 14px; }

/* chip row: snap, both edges fade only while chips wait beyond them, round arrows that fade out at the ends */
.dvh-chiprow__track { scroll-snap-type: x proximity; scroll-padding-inline: 2px; gap: 8px; }
/* the arrows float over the faded ends, so the first chip keeps the page's left edge */
.dvh-chiprow__arrow {
  position: absolute; z-index: 1; top: 50%; translate: 0 -50%;
  width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--outline-soft);
  box-shadow: 0 2px 8px -2px rgb(26 23 27 / .22);
}
.dvh-chiprow__arrow[data-scroll="prev"] { left: 0; }
.dvh-chiprow__arrow[data-scroll="next"] { right: 0; }
.dvh-chiprow__arrow:active { transform: scale(.94); }
.dvh-chiprow__arrow .dvh-icon { width: 18px; height: 18px; }
@property --dvh-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --dvh-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll(x self)) {
  .dvh-chiprow { timeline-scope: --dvh-chips; }
  .dvh-chiprow__track {
    scroll-timeline: --dvh-chips x;
    mask-image: linear-gradient(to right, transparent, #000 var(--dvh-fade-l), #000 calc(100% - var(--dvh-fade-r)), transparent);
    animation: dvh-chips-fade linear both; animation-timeline: scroll(x self);
  }
  @keyframes dvh-chips-fade {
    0% { --dvh-fade-l: 0px; --dvh-fade-r: 56px; }
    6% { --dvh-fade-l: 56px; }
    94% { --dvh-fade-r: 56px; }
    100% { --dvh-fade-l: 56px; --dvh-fade-r: 0px; }
  }
  .dvh-chiprow__arrow[data-scroll="prev"] { animation: dvh-arrow-prev linear both; animation-timeline: --dvh-chips; }
  .dvh-chiprow__arrow[data-scroll="next"] { animation: dvh-arrow-next linear both; animation-timeline: --dvh-chips; }
  @keyframes dvh-arrow-prev { 0% { opacity: 0; visibility: hidden; } 3%, 100% { opacity: 1; visibility: visible; } }
  @keyframes dvh-arrow-next { 0%, 97% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
}

/* ---- 7. Segmented control: a sunken track, the chosen segment lifts ---------------------------- */
.dvh-seg { gap: 2px; padding: 3px; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 7%, var(--ground)); }
.dvh-seg > * { min-height: 38px; min-width: 52px; border-radius: var(--radius-pill); transition: var(--t-colors); }
.dvh-seg > * + *, .dvh-seg--radio > label + input + label { border-left: 0; }
.dvh-seg > :is([aria-current="true"], [aria-pressed="true"]), .dvh-seg--radio > input:checked + label {
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(26 23 27 / .14), 0 0 0 1px rgb(26 23 27 / .04);
}
.dvh-seg--radio > input:checked + label :is(.dvh-pending, .dvh-icon) { color: var(--success); }
@media (hover: hover) { .dvh-seg > :not([aria-current="true"]):not([aria-pressed="true"]):hover, .dvh-seg--radio > input:not(:checked) + label:hover { background: rgb(255 255 255 / .55); } }
.dvh-footer .dvh-seg, .dvh-on-deep .dvh-seg { background: rgb(236 232 225 / .12); }

/* ---- 8. Option cards (delivery, payment): label wraps a radio ---------------------------------- */
.dvh-option, .wc-block-components-radio-control__option {
  border-radius: 12px; border-color: var(--outline-soft); transition: var(--t-colors);
}
@media (hover: hover) { .dvh-option:hover { border-color: var(--outline-hover); } }
.dvh-option:has(input:checked) { border-color: var(--action); background: var(--tint-select); box-shadow: inset 0 0 0 1px var(--action); }
.dvh-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- 9. Pagination --------------------------------------------------------------------------------- */
.woocommerce-pagination ul.page-numbers, .nav-links { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
:is(.woocommerce-pagination, .nav-links, .dvh-pager) .page-numbers:is(a, span) {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 12px;
  border: 1px solid var(--outline-soft); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-ui); font-variant-numeric: tabular-nums; text-decoration: none;
  transition: var(--t-colors);
}
:is(.woocommerce-pagination, .nav-links, .dvh-pager) .page-numbers.current { background: var(--tint-select); border-color: var(--tint-select-line); color: var(--action); font-weight: var(--fw-strong); }
:is(.woocommerce-pagination, .nav-links, .dvh-pager) .page-numbers.dots { border-color: transparent; background: none; }
@media (hover: hover) { :is(.woocommerce-pagination, .nav-links, .dvh-pager) a.page-numbers:hover { background: var(--fill-hover); border-color: var(--outline-hover); } }

/* ---- 10. Browser surfaces ---------------------------------------------------------------------- */
:root { accent-color: var(--action); caret-color: var(--action); }
::selection { background: color-mix(in srgb, var(--focus) 26%, var(--surface)); color: var(--ink); }

/* ---- 12. Long-form text and FAQ (owner 2026-11-02 "bad layout": justified SEO text, text and FAQ of different widths)
   Running text is left-aligned (the justify rule left kit/base.css). One reading measure: 35rem is about 75 characters
   of Onest at 17 px (the old 64ch measured 97). Long words hyphenate; lines wrap "pretty". */
:root { --text-measure: 35rem; }
.dvh-prose p, .dvh-prose li, .dvh-body, .dvh-acc__body p, .dvt-qa__item dd {
  text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
.dvh-prose a, .dvh-acc__body a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--dur-hover) ease; }
.dvh-prose a:hover, .dvh-acc__body a:hover { text-decoration-color: currentColor; }

/* the shop's "about" block (catalogue, house pages; dv-shop-intro): heading, text, FAQ heading and FAQ on one measure and one
   left edge; where the column is wide, headings take a narrow left column and text and FAQ share the reading column */
.dvsi { display: grid; grid-template-columns: minmax(0, var(--text-measure)); row-gap: var(--sp-3); }
.dvsi > * { margin: 0; min-width: 0; }
.dvsi__title--faq { margin-top: var(--sp-6); }
.dvsi .dvh-prose > * + * { margin-top: .9em; }
:where(:has(> .dvsi:not(.dvsi--wine))) { container-type: inline-size; }
@container (min-width: 860px) {
  .dvsi:not(.dvsi--wine) { grid-template-columns: minmax(0, 20rem) minmax(0, var(--text-measure)); column-gap: clamp(32px, 4vw, 64px); row-gap: var(--sp-7); }
  .dvsi:not(.dvsi--wine) > .dvsi__title { grid-column: 1; align-self: start; max-width: 18ch; text-wrap: balance; }
  .dvsi:not(.dvsi--wine) > :not(.dvsi__title) { grid-column: 2; }
  .dvsi:not(.dvsi--wine) > .dvsi__title--faq { margin-top: 0; }
}
/* other prose + FAQ pages (guides, styles, Ziua Vinului, white label, professionals): the FAQ keeps the text's measure */
:is(.pg-guide-prose, .dvs-intro__text, .zv-prose, .wl-prose) ~ .dvh-accordion,
:is(.dvs-faq__list, .zv-faq .dvh-accordion, .pg-prof-faq) { max-width: var(--text-measure); }
.dvt-qa__list { max-width: var(--text-measure); }
.dvt-qa__item { padding-block: var(--sp-4); gap: 6px; }
.dvt-qa__item dd { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }

/* FAQ accordion everywhere: question at card size (not the section heading's), a round chevron that turns, a short open */
.dvh-accordion .dvh-acc > summary, .dvh-acc > summary {
  min-height: 56px; padding-block: 14px; gap: var(--sp-4);
  font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title);
  transition: color var(--dur-hover) ease;
}
.dvh-acc > summary .dvh-icon {
  flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  transition: rotate var(--dur-ui) var(--ease-out), background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
@media (hover: hover) {
  .dvh-acc > summary:hover { color: var(--action); }
  .dvh-acc > summary:hover .dvh-icon { background: var(--tint-select); color: var(--action); }
}
.dvh-acc > summary:focus-visible { outline-offset: 4px; border-radius: 8px; }
.dvh-acc[open] > summary .dvh-icon { background: var(--tint-select); color: var(--action); }
.dvh-acc__body { padding-bottom: var(--sp-5); font-size: var(--fs-body); line-height: var(--lh-body); }
@supports selector(::details-content) {
  .dvh-acc { interpolate-size: allow-keywords; }
  .dvh-acc::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-ui) var(--ease-out), content-visibility var(--dur-ui) allow-discrete; }
  .dvh-acc[open]::details-content { block-size: auto; }
}

/* ---- 13. Shop head (owner 2026-11-02 "still poor design style layout"): the H1 and its count, ONE toolbar under it
   (search, Filtre where there is no side panel, Sortare: one height, one row from 900 px), the quiet style row only
   where there is no side panel, the houses in the Filtre panel's "Case" group. Phones: search full width, then Filtre
   and Sortare as two equal buttons; once stuck, the search row slides under the header and the two buttons stay. */
.pg-listing-head { padding-bottom: var(--sp-4); }
.pg-listing-head .dvh-pagehead__count { color: var(--muted); }
.pg-listing-bar { top: calc(var(--header-h) - 48px - var(--sp-2) - var(--sp-3)); }
.pg-listing-toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "search search" "filter sort";
  gap: var(--sp-2); align-items: center; min-height: 0; padding-block: var(--sp-3);
}
.pg-listing-search { grid-area: search; min-width: 0; }
.pg-listing-toolbar .pg-listing-filterbtn { grid-area: filter; }
.pg-listing-toolbar .pg-listing-sort { grid-area: sort; min-width: 0; }
.pg-listing-toolbar .pg-listing-filterbtn, .pg-listing-toolbar .pg-listing-sort .dvh-select {
  width: 100%; height: 44px; min-height: 44px; padding-block: 0; border: 1px solid var(--outline-soft); border-radius: var(--radius-control);
  background-color: var(--surface); box-shadow: var(--lift); font-size: var(--fs-ui); font-weight: var(--fw-ui);
}
.pg-listing-toolbar .pg-listing-filterbtn { justify-content: center; padding-inline: var(--sp-4); }
.pg-listing-toolbar .pg-listing-sort .dvh-select { text-align: center; text-align-last: center; padding-inline: 10px 32px; background-position: right 10px center; text-overflow: ellipsis; }
.pg-listing-toolbar .pg-listing-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pg-listing-found { grid-area: found; display: none; margin: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .pg-listing-head .dvh-pagehead__count { display: none; }   /* the same line moves into the toolbar, before Sortare */
  .pg-listing-found { display: block; }
  .pg-listing-bar { top: var(--header-h); }
  .pg-listing-toolbar { grid-template-columns: minmax(0, 520px) auto minmax(0, 1fr) auto auto; grid-template-areas: "search filter . found sort"; column-gap: var(--sp-4); }
  .pg-listing-toolbar .pg-listing-filterbtn { margin-left: calc(var(--sp-2) - var(--sp-4)); }
  .pg-listing-toolbar .pg-listing-filterbtn, .pg-listing-toolbar .pg-listing-sort .dvh-select { height: var(--control-h); }
  .pg-listing-toolbar .pg-listing-filterbtn { width: auto; }
  .pg-listing-toolbar .pg-listing-sort .dvh-select { width: auto; text-align: start; text-align-last: auto; padding-inline: 16px 44px; border-color: var(--field-border); box-shadow: none; }
  .pg-listing-toolbar .pg-listing-sort label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
/* the style row: quiet tinted chips (links to the style pages), only where the side panel does not show */
.pg-listing-quickwrap { padding-top: var(--sp-3); }
.pg-listing-quick { margin-bottom: 0; }
.pg-listing-quick .dvh-chip { border-color: transparent; background: color-mix(in srgb, var(--ink) 6%, var(--ground)); box-shadow: none; }
@media (hover: hover) { .pg-listing-quick .dvh-chip:hover { border-color: transparent; background: color-mix(in srgb, var(--ink) 11%, var(--ground)); } }
@media (min-width: 1200px) { .pg-listing-quickwrap { display: none; } }
/* active filters: tinted tokens with a round ×, "Resetează" after them */
.dvh-activefilters .dvh-chip--remove { background: var(--tint-select); border-color: var(--tint-select-line); color: var(--action); box-shadow: none; padding-left: 12px; }
@media (hover: hover) { .dvh-activefilters .dvh-chip--remove:hover { background: color-mix(in srgb, var(--focus) 22%, var(--surface)); border-color: var(--action); } }
/* the "Case" group: rows built like the checkbox rows above them (owner "make the Case rows identical"): the same box,
   then the house colour as a small swatch, the name in ink, the count muted at the end; the current house is ticked */
.dvh-facet__link {
  display: flex; align-items: center; gap: 0; min-height: 36px; padding-block: 6px;
  color: var(--ink); font-size: var(--fs-ui); line-height: 22px; text-decoration: none;
}
.dvh-facet__link::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-right: var(--sp-3); box-sizing: border-box;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-check); background: var(--surface);
  transition: background-color var(--dur-press) ease, border-color var(--dur-press) ease;
}
.dvh-facet__link .dvh-dot { width: 8px; height: 8px; margin-right: var(--sp-2); }
.dvh-facet__link .dvh-count { margin-left: auto; padding-left: var(--sp-3); }
.dvh-facet__link[aria-current]::before { background: var(--action) var(--icon-check) center / 14px no-repeat; border-color: var(--action); }
.dvh-facet__link[aria-current] .dvh-facet__name { color: var(--action); font-weight: var(--fw-ui); }
@media (hover: hover) { .dvh-facet__link:hover:not([aria-current])::before { border-color: var(--field-border-hover); background-color: var(--fill-hover); } }
.dvh-facet__link:focus-visible { outline-offset: 0; border-radius: 6px; }
/* "Încă 8 soiuri", "Încă 11 case": a quiet text button under the rows, aligned with their text */
.dvh-filters__acc .dvh-filters__more > summary.dvh-btn--tertiary {
  min-height: 36px; padding-left: 32px; color: var(--muted); font-weight: var(--fw-ui); text-decoration: none; transition: color var(--dur-hover) ease;
}
@media (hover: hover) { .dvh-filters__acc .dvh-filters__more > summary.dvh-btn--tertiary:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; } }
.dvh-filters__more[open] > summary.dvh-btn--tertiary .dvh-icon { rotate: 180deg; }
/* the side panel stays in view while the wines scroll (below the header and the toolbar) */
@media (min-width: 1200px) {
  .pg-listing-side .dvh-filters--side {
    position: sticky; top: calc(var(--header-h) + 73px + var(--sp-4)); max-height: calc(100dvh - var(--header-h) - 73px - var(--sp-6));
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    margin-left: -4px; padding-left: 4px; padding-bottom: var(--sp-4);
  }
}

/* ---- 14. Booking (visits card and other kit calendars): date tiles and days speak the events form's language. Open
   days carry the green wash, the chosen day is filled, closed and past days stay plain and quiet. */
.dvh-slot { border-color: var(--outline-soft); box-shadow: var(--lift); transition: var(--t-colors), var(--t-press); }
@media (hover: hover) { .dvh-slot:hover:not(:disabled) { border-color: var(--outline-hover); background: var(--fill-hover); } }
.dvh-slot:active:not(:disabled) { transform: scale(.98); }
.dvh-slot[aria-pressed="true"] { border-color: var(--action); background: var(--tint-select); box-shadow: inset 0 0 0 1px var(--action); }
.dvh-slot[aria-pressed="true"] b { color: var(--action); }
.dvh-day { transition: background-color var(--dur-press) ease, color var(--dur-press) ease, box-shadow var(--dur-press) ease; }
.dvh-day:not(:disabled):not(.dvt-off):not(.is-past):not(.is-full) { background: var(--tint-select); color: var(--action); font-weight: var(--fw-ui); }
@media (hover: hover) { .dvh-day:not(:disabled):not(.dvt-off):not(.is-past):not(.is-full):not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--focus) 26%, var(--surface)); } }
.dvh-day[aria-pressed="true"]:not(:disabled) { background: var(--action); color: var(--on-action); box-shadow: none; font-weight: var(--fw-strong); }
.dvh-day[aria-pressed="true"].is-few::after { background: var(--on-action); }
.dvh-cal__legend i:not([class]) { border-color: var(--tint-select-line); background: var(--tint-select); border-radius: 4px; }

/* ---- 15. Popups and widgets: the one-click dialog's delivery pills wrap a long name ("Oficiul poștal") instead of
   running under the next pill at 375 px; the chat's compose box takes the fields' focus halo. */
.dvoc__ship .dvoc__pill { min-width: 0; }
.dvoc__ship .dvoc__pillname { white-space: normal; text-wrap: balance; text-align: center; overflow-wrap: anywhere; }
.dvchat__compose { transition: var(--t-colors); }
.dvchat__compose:focus-within { box-shadow: var(--halo); }

/* ---- 11. Reduced motion: colour changes stay, presses and slides go ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dvh-btn, .button, .dvh-add, .add_to_cart_button, .dvh-chip, .dvh-facet__btn, .dvh-iconbtn, .dvh-cartbtn { transition: var(--t-colors); }
  :is(.dvh-btn, .button, .wc-block-components-button, .dvh-add, .add_to_cart_button, .dvh-chip, .dvh-facet__btn, .dvh-iconbtn, .dvh-cartbtn):active { transform: none; }
  .dvh-switch__track::after { transition: background-color var(--dur-hover) ease; }
  .dvh-btn[aria-busy="true"]::after, .button.loading::after { animation-duration: 1.6s; }
}