/* ========================================================================== Doina Vin · kit/components.css Static component layer (end states only; every transition and animation lives in motion.css). Requires tokens.css + base.css. Our classes are prefixed dvh-; real WooCommerce / WordPress class names are styled alongside where an element maps to one (full table: WOO-MAP.md). Contents 0 Shared marks: dot, rule, pending, example tag, stand-in tag, focal crop 1 Top bar (not on pages until the free-delivery threshold is confirmed) 2 Header (desktop + phone) 12 Spec band, spec table, accordion 3 Phone menu sheet (+ search) 13 Medal chips, critic line 4 Footer 14 Cart drawer, line items, progress, cross-sell, visit rows + strip 5 Buttons, icon buttons 15 Form fields, choice controls, option cards 6 Chips, facets, filter bar 15b Form helpers: affix, range, tags, switch, radio segments, repeater 6b Filter partial (sidebar+sheet) 16 Checkout skin; 16a Checkout block; 16b order received 7 Product card + grids 17 Visits: facts, experience card, hero frame, itinerary, 7b Rail, house tile, bleed, thumb booking card (compact, next dates), slot picker, steps 8 House band, page head 18 Notices, toast 8b House story: label strip, fact 19 Age gate list, honours, awards 20 Cookie bar 9 Section head, crumbs, pager 21 Admin (wp-admin skin); 21b full-page shell, list tables, 10 Gallery, buy panel, stepper, save bar; 21c login screen trust, critic line, label art, distinctions card, image view 11 Buy bar (phone + desktop), booking bar ========================================================================== */ /* ---- 0. Shared marks ------------------------------------------------------------------------- */ .dvh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--house-deep); flex: none; } .dvh-rule { display: inline-block; width: 24px; height: 3px; background: var(--house-deep); flex: none; } .dvh-pending { color: var(--muted); font-weight: var(--fw-text); font-style: normal; white-space: nowrap; } /* "se confirmă" never splits */ .dvh-example { display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: middle; padding: 2px 6px; border: 1px dashed var(--control); border-radius: var(--radius-control); font-family: var(--font-text); font-style: normal; font-size: var(--fs-eyebrow); line-height: 16px; font-weight: var(--fw-strong); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); background: var(--surface); } /* stand-in tag on a photo that does not yet show what it illustrates (until the photo shoot) */ .dvh-standin { position: absolute; left: var(--sp-2); top: var(--sp-2); z-index: 2; } /* focal crop: zoom a photo toward a focus point so a noisy edge (the cellar's cable tray, parked cars) stays out of the frame; --zoom and --focus are set per image (WordPress: the attachment's focal point) */ .dvh-crop { overflow: clip; } .dvh-crop > img { object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 50%); } .dvh-house-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); } .dvh-house-row .dvh-eyebrow { color: var(--ink); } /* ---- 1. Top bar (optional promise bar, 32 px; costs 32 px of every first screen) ----------------- */ .dvh-topbar { background: var(--band); color: var(--ink); font-size: var(--fs-meta); line-height: 20px; } .dvh-topbar__inner { min-height: var(--topbar-h); display: flex; align-items: center; justify-content: center; gap: var(--sp-5); padding-block: 6px; } .dvh-topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); } .dvh-topbar__item + .dvh-topbar__item { display: none; } @media (min-width: 900px) { .dvh-topbar__item + .dvh-topbar__item { display: inline-flex; } } /* ---- 2. Header ------------------------------------------------------------------------------- */ .dvh-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--ground); border-bottom: 1px solid var(--line); } .dvh-header__inner { height: calc(var(--header-h) - 1px); /* + the 1 px hairline = exactly --header-h */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); } .dvh-header__logo { justify-self: center; display: block; padding-block: var(--sp-2); } .dvh-header__logo img { height: 28px; width: auto; } .dvh-header .dvh-header__menu { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-2); width: auto; padding-inline: var(--sp-2) var(--sp-3); margin-left: calc(-1 * var(--sp-2)); font-size: var(--fs-ui); font-weight: var(--fw-ui); } .dvh-header__tools { justify-self: end; display: flex; align-items: center; gap: var(--sp-1); } /* phone: menu button, centred logo, cart; everything else from 900 px */ .dvh-header .dvh-nav, .dvh-header .dvh-header__search, .dvh-header .dvh-header__account, .dvh-header .dvh-header__lang, .dvh-header .dvh-header__cta { display: none; } .dvh-nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; padding: 0; } .dvh-nav__link { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--sp-3); color: var(--ink); text-decoration: none; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-ui); text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 10px; } .dvh-nav__link:hover { text-decoration-color: var(--line); } .dvh-nav__link[aria-current="page"] { text-decoration-color: var(--ink); } .dvh-lang { display: flex; align-items: center; } .dvh-lang a { display: inline-grid; place-items: center; min-width: 32px; min-height: var(--tap); padding-inline: 4px; color: var(--muted); text-decoration: none; font-size: var(--fs-meta); font-weight: var(--fw-ui); letter-spacing: .02em; } .dvh-lang a:hover { color: var(--ink); } .dvh-lang a[aria-current="true"] { color: var(--ink); font-weight: var(--fw-strong); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .dvh-cartbtn { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); color: var(--ink); text-decoration: none; border-radius: var(--radius-control); } .dvh-cartbtn:hover { background: var(--band); } .dvh-cartbtn__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding-inline: 4px; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--ink); color: var(--surface); font-size: var(--fs-eyebrow); line-height: 1; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; } .dvh-cartbtn__count:empty { display: none; } @media (min-width: 900px) { .dvh-header__inner { grid-template-columns: auto 1fr auto; gap: var(--sp-5); } .dvh-header .dvh-header__menu { display: none; } .dvh-header__logo { justify-self: start; grid-column: 1; grid-row: 1; } .dvh-header__logo img { height: 32px; } .dvh-header .dvh-nav { display: block; justify-self: center; } .dvh-header .dvh-header__search, .dvh-header .dvh-header__account { display: inline-grid; } .dvh-header .dvh-header__lang { display: flex; margin-inline: var(--sp-1); } } @media (min-width: 1200px) { .dvh-header .dvh-header__cta { display: inline-flex; margin-left: var(--sp-3); } } /* "Vizite de grup" beside "Rezervă o vizită" (owner 2026-10-20) once both fit next to the menu in every language; narrower screens keep one button and get the group link in the menu sheet */ .dvh-header .dvh-header__cta--group { display: none; } @media (min-width: 1360px) { .dvh-header .dvh-header__cta--group { display: inline-flex; } .dvh-header .dvh-header__cta--group + .dvh-header__cta { margin-left: var(--sp-2); } } /* ---- 3. Phone menu sheet (dialog, full screen, light) ------------------------------------------ */ .dvh-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0 var(--page-gutter) var(--sp-6); border: 0; background: var(--ground); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; } .dvh-menu::backdrop { background: var(--scrim); } .dvh-menu.is-static { position: relative; inset: auto; height: auto; max-width: 420px; border: 1px solid var(--line); border-radius: var(--radius-media); overflow: visible; } .dvh-menu.is-static .dvh-menu__head { position: relative; border-radius: var(--radius-media) var(--radius-media) 0 0; } .dvh-menu__head { position: sticky; top: 0; z-index: 1; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; background: var(--ground); border-bottom: 1px solid var(--line); margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); } .dvh-menu__head img { height: 28px; width: auto; } .dvh-menu__search { padding-top: var(--sp-4); } /* the phone search lives in the menu (every page) */ .dvh-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding-block: var(--sp-5) var(--sp-4); } .dvh-menu__groupbtn { grid-column: 1 / -1; gap: var(--sp-2); } .dvh-menu__nav > ul { list-style: none; padding: 0; border-top: 1px solid var(--line); } .dvh-menu__nav > ul > li { border-bottom: 1px solid var(--line); } .dvh-menu__link, .dvh-menu__nav summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 56px; color: var(--ink); text-decoration: none; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-display); list-style: none; } .dvh-menu__nav summary::-webkit-details-marker { display: none; } .dvh-menu__nav details[open] > summary .dvh-icon { rotate: 180deg; } .dvh-menu__count { margin-left: auto; font-family: var(--font-text); font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; } .dvh-menu__houses { list-style: none; padding: 0 0 var(--sp-3); display: grid; grid-template-columns: 1fr; } .dvh-menu__house { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); color: var(--ink); text-decoration: none; font-size: var(--fs-ui); font-weight: var(--fw-ui); } .dvh-menu__house img { width: 14px; height: 44px; object-fit: contain; } .dvh-menu__foot { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); } .dvh-menu__foot .dvh-seg { justify-self: start; } .dvh-menu__note { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); } .dvh-menu { container-type: inline-size; } @container (min-width: 560px) { .dvh-menu__houses { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); } } /* segmented control (RO / RU / EN, view toggles) */ .dvh-seg { display: inline-flex; border: 1px solid var(--control); border-radius: var(--radius-control); overflow: hidden; background: var(--surface); } .dvh-seg > * { display: inline-grid; place-items: center; min-width: 56px; min-height: var(--tap); padding-inline: var(--sp-4); color: var(--ink); text-decoration: none; font-size: var(--fs-ui); font-weight: var(--fw-ui); } .dvh-seg > * + * { border-left: 1px solid var(--control); } .dvh-seg > [aria-current="true"], .dvh-seg > [aria-pressed="true"] { background: var(--ink); color: var(--surface); } /* ---- 4. Footer (the one deep surface: forest + bone) ------------------------------------------- */ .dvh-footer { --ring: var(--focus-on-deep); position: relative; isolation: isolate; overflow: clip; background: var(--deep); color: var(--on-deep); padding-block: var(--sp-8) var(--sp-6); font-size: var(--fs-ui); line-height: 1.55; } .dvh-footer::before { /* the monogram rings (the one graphic device of A+) at 6 %: one brand mark on every page */ content: ""; position: absolute; z-index: -1; right: -140px; top: -140px; width: 520px; aspect-ratio: 1; opacity: .06; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ECE8E1'%3E%3Ccircle cx='200' cy='200' r='186' stroke-width='16'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='2'/%3E%3Cpath d='M200 70a130 130 0 0 1 0 260' stroke-width='14'/%3E%3Cpath d='M200 40v320' stroke-width='14'/%3E%3C/svg%3E") center / contain no-repeat; } .dvh-footer a { color: var(--on-deep); text-decoration-color: var(--line-on-deep); } .dvh-footer a:hover { text-decoration-color: currentColor; } .dvh-footer__top { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line-on-deep); } .dvh-footer__logo { height: 36px; width: auto; } .dvh-footer__line { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); max-width: 34ch; text-wrap: balance; } .dvh-footer__line .dvh-kicker { color: var(--on-deep-muted); display: block; margin-bottom: var(--sp-2); } .dvh-footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-6) var(--sp-5); padding-block: var(--sp-7); } .dvh-footer__title { 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(--on-deep-muted); margin-bottom: var(--sp-3); } .dvh-footer__list { list-style: none; padding: 0; display: grid; gap: 2px; } .dvh-footer__list a { display: inline-flex; align-items: center; min-height: 36px; } .dvh-footer address { font-style: normal; } .dvh-footer__more { margin-top: var(--sp-2); } .dvh-footer__cta { margin-top: var(--sp-4); } .dvh-footer .dvh-pending { color: var(--on-deep-muted); } .dvh-footer__legal { display: grid; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--line-on-deep); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--on-deep-muted); } .dvh-footer__legal .dvh-lang a { color: var(--on-deep-muted); } .dvh-footer__legal .dvh-lang a[aria-current="true"] { color: var(--on-deep); } @media (min-width: 600px) { .dvh-footer__cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { .dvh-footer__cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; } } /* ---- 5. Buttons ---------------------------------------------------------------------------------- One filled action per view (--action). Secondary = 1 px ink outline. Tertiary = underlined link. Woo: .single_add_to_cart_button, .checkout-button, #place_order, .button.alt -> primary; .add_to_cart_button (loops) -> card add; other .button -> secondary. */ .dvh-btn, .button, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--radius-control); font-family: var(--font-text); font-size: var(--fs-btn); line-height: 1.2; font-weight: var(--fw-strong); text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .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 { background: var(--action); color: var(--on-action); border-color: var(--action); } .dvh-btn--primary:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, .button.alt:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-cart__submit-button:hover { background: var(--action-hover); border-color: var(--action-hover); } .dvh-btn--secondary, .button:not(.alt):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button) { background: transparent; color: var(--ink); border-color: var(--ink); } .dvh-btn--secondary:hover, .button:not(.alt):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.checkout-button):hover { background: var(--band); } .dvh-btn--tertiary, .added_to_cart { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--link); font-size: var(--fs-ui); font-weight: var(--fw-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .dvh-btn--tertiary:hover, .added_to_cart:hover { text-decoration-thickness: 2px; } .dvh-btn--on-deep { background: transparent; color: var(--on-deep); border-color: var(--on-deep); } .dvh-btn--on-deep:hover { background: rgb(236 232 225 / .10); } .dvh-btn--sm { min-height: 40px; padding-inline: var(--sp-4); font-size: var(--fs-ui); } .dvh-btn--block { display: flex; width: 100%; } .dvh-btn[disabled], .dvh-btn[aria-disabled="true"], .button.disabled, .button:disabled { background: var(--band); color: var(--muted); border-color: var(--band); } /* price inside the button (Away pattern): "Adaugă în coș · 349,00 MDL" */ .dvh-btn__price { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; font-weight: var(--fw-strong); } .dvh-btn__price::before { content: ""; width: 1px; height: 18px; background: currentColor; opacity: .35; } /* icon button: 44 px hit area */ .dvh-iconbtn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-control); color: var(--ink); text-decoration: none; background: transparent; } .dvh-iconbtn:hover { background: var(--band); } /* card add: 40 px outline "Adaugă", fills on hover/press, "În coș" success state */ .dvh-add, .add_to_cart_button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--ink); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: var(--fs-ui); line-height: 1; font-weight: var(--fw-strong); text-decoration: none; white-space: nowrap; cursor: pointer; } .dvh-add::before, .add_to_cart_button::before { content: ""; position: absolute; inset: -3px; } /* 46 px hit area */ .dvh-add:hover, .dvh-add:active, .add_to_cart_button:hover { background: var(--action); border-color: var(--action); color: var(--on-action); } .dvh-add__idle, .dvh-add__done { display: inline-flex; align-items: center; gap: 6px; } .dvh-add .dvh-add__done { display: none; } .dvh-add[aria-pressed="true"], .dvh-add.is-added, .add_to_cart_button.added { background: var(--surface); border-color: var(--success); color: var(--success); } .dvh-add[aria-pressed="true"] .dvh-add__idle, .dvh-add.is-added .dvh-add__idle { display: none; } .dvh-add[aria-pressed="true"] .dvh-add__done, .dvh-add.is-added .dvh-add__done { display: inline-flex; align-items: center; gap: 6px; } /* ---- 6. Chips, facets, filter bar ---------------------------------------------------------------- */ .dvh-chip { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: var(--fs-meta); line-height: 1; font-weight: var(--fw-ui); white-space: nowrap; text-decoration: none; cursor: pointer; } .dvh-chip::before { content: ""; position: absolute; inset: -6px -2px; } /* 44 px hit area */ .dvh-chip:hover { border-color: var(--control); } .dvh-chip[aria-pressed="true"], .dvh-chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); } .dvh-chip[aria-pressed="true"] .dvh-dot, .dvh-chip[aria-current="true"] .dvh-dot { box-shadow: 0 0 0 1.5px var(--surface); } .dvh-chip__count { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: var(--fw-text); } .dvh-chip[aria-pressed="true"] .dvh-chip__count, .dvh-chip[aria-current="true"] .dvh-chip__count { color: var(--line); } .dvh-chip--remove { padding-right: var(--sp-2); } .dvh-chip--remove .dvh-icon { width: 14px; height: 14px; } /* horizontally scrollable chip row with edge fade and arrows (desktop) */ .dvh-chiprow { position: relative; display: flex; align-items: center; min-width: 0; } .dvh-chiprow__track { display: flex; gap: var(--sp-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: 6px; padding-inline: 2px; mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%); /* fade only where more chips wait */ } .dvh-chiprow__track::-webkit-scrollbar { display: none; } .dvh-chiprow__track > * { scroll-snap-align: start; flex: none; } .dvh-chiprow__arrow { display: none; } @media (min-width: 900px) and (hover: hover) { .dvh-chiprow__arrow { display: inline-grid; flex: none; } } /* facet button + panel */ .dvh-facet { position: relative; } .dvh-facet__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); font-size: var(--fs-meta); font-weight: var(--fw-ui); color: var(--ink); white-space: nowrap; } .dvh-facet__btn .dvh-icon { width: 16px; height: 16px; } .dvh-facet__btn[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .dvh-facet__btn[aria-expanded="true"] .dvh-icon { rotate: 180deg; } .dvh-facet__btn .dvh-facet__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--radius-control); background: var(--ink); color: var(--surface); font-size: 12px; font-variant-numeric: tabular-nums; } .dvh-facet__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-pop); width: max-content; min-width: 260px; max-width: min(360px, 90vw); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-media); box-shadow: var(--shadow-pop); } .dvh-facet__list { list-style: none; padding: 0; display: grid; gap: 2px; } .dvh-facet__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); } .dvh-facet__panel.is-static { position: static; box-shadow: none; } a.dvh-facet__btn { text-decoration: none; } /* one-option facet as a toggle in the filter bar ("Medaliate"): aria-pressed, same box as the facets */ .dvh-facet__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); } .dvh-facet__btn[aria-pressed="true"] .dvh-chip__count { color: var(--line); } /* compact select (filter bar sort, admin rows, language switchers) */ .dvh-select--sm { min-height: 40px; padding-block: 8px; font-size: var(--fs-meta); } /* sticky filter bar under the header */ .dvh-filterbar { position: sticky; top: var(--header-h); z-index: var(--z-sticky); background: var(--ground); border-bottom: 1px solid var(--line); } .dvh-filterbar.is-static { position: relative; top: auto; z-index: auto; } .dvh-filterbar__inner { min-height: var(--filterbar-h); display: flex; align-items: center; gap: var(--sp-3); } .dvh-filterbar__chips { flex: 1 1 auto; min-width: 0; } .dvh-filterbar__facets, .dvh-filterbar__sort { display: none; } .dvh-filterbar__phone { flex: none; } @media (min-width: 900px) { .dvh-filterbar__facets { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .dvh-filterbar__sort { display: block; flex: none; } .dvh-filterbar__phone { display: none; } .dvh-filterbar__chips { flex-basis: 0; } } .dvh-activefilters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-block: var(--sp-3); } .dvh-activefilters__label { font-size: var(--fs-meta); color: var(--muted); margin-right: var(--sp-1); } .dvh-activefilters__count { margin-right: var(--sp-2); font-size: var(--fs-ui); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; } .dvh-activefilters .dvh-btn--tertiary { margin-left: var(--sp-2); } /* search field */ .dvh-search { position: relative; display: flex; align-items: center; } .dvh-search .dvh-icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; } .dvh-search input { padding-left: 44px; } /* ---- 6b. Filter partial: one markup for the desktop sidebar and the phone sheet --------------- Vocabulary (blueprint 3.5): Sortare, Culoare, Zahăr, Categorie, Soi, Preț, Medaliate, IGP Codru. Native layered-nav GET parameters (?filter_culoare=rosu&filter_zahar=sec), so it works without JS. */ .dvh-filters { min-width: 0; } .dvh-filters__title { margin-bottom: var(--sp-3); } .dvh-filters__group { margin: 0; padding: var(--sp-4) 0; border: 0; border-top: 1px solid var(--line); min-inline-size: 0; } .dvh-filters__group:first-child { border-top: 0; padding-top: var(--sp-2); } /* floated, the legend sits in the flow and leaves the hairline whole (a rendered legend would cut it) */ .dvh-filters__legend { float: left; width: 100%; margin-bottom: var(--sp-1); padding: 0; color: var(--ink); } .dvh-filters__legend + * { clear: both; } .dvh-filters__group > .dvh-select { margin-top: var(--sp-1); } .dvh-filters__more > summary { list-style: none; } .dvh-filters__more > summary::-webkit-details-marker { display: none; } .dvh-filters__more[open] > summary .dvh-icon { rotate: 180deg; } /* desktop sidebar: sticky under the filter bar, scrolling inside itself when taller than the screen */ .dvh-filters--side { position: sticky; top: calc(var(--header-h) + var(--filterbar-h) + var(--sp-4)); max-height: calc(100vh - var(--header-h) - var(--filterbar-h) - 2 * var(--sp-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: var(--sp-3); } /* phone sheet = the drawer dialog holding the same groups, with a pinned foot ("Resetează" + "Arată N vinuri"). Its #id anchor state shows it open without JS (and on review links). */ dialog.dvh-drawer:target { display: flex; flex-direction: column; z-index: var(--z-drawer); } dialog.dvh-drawer:target:not([open]) { translate: none; } /* ---- 7. Product card + grid (WooCommerce li.product) --------------------------------------------- Neutral --well in mixed-house grids; --house-tint only on single-house surfaces (.dvh-house-surface / tax-product_cat term pages). House identity in a mixed grid = eyebrow + dot. */ .dvh-cards, ul.products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--col-gap); } @media (min-width: 600px) { .dvh-cards, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--col-gap); } } @media (min-width: 1200px) { .dvh-cards, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .dvh-house-surface { --card-well: var(--house-tint); } /* fluid grid: columns follow the results column, not the viewport (4 x 234 px beside the 1440 sidebar, 3 x 248 px at 1200); the parent carries .dvh-results */ .dvh-results { min-width: 0; container: dvh-results / inline-size; } @container dvh-results (max-width: 559.98px) { .dvh-cards--fluid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container dvh-results (min-width: 560px) { .dvh-cards--fluid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container dvh-results (min-width: 960px) { .dvh-cards--fluid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* single-house strip ("Din aceeași casă"): the kit grid from 600 px; on phones a swipe row of 66 % cards (wide enough for a medal chip) running to the screen edge */ @media (max-width: 599.98px) { .dvh-cards--strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter); } .dvh-cards--strip::-webkit-scrollbar { display: none; } .dvh-cards--strip > .dvh-card { scroll-snap-align: start; } } .dvh-card, ul.products li.product { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 6px 6px var(--sp-3); background: var(--surface); border-radius: var(--radius-media); container: dvh-card / inline-size; } .dvh-card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: var(--radius-media); } .dvh-card__link:hover .dvh-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } .dvh-card__well { position: relative; aspect-ratio: 4 / 5; overflow: clip; isolation: isolate; background: var(--card-well, var(--well)); border-radius: 6px; } /* bottle: renders carry ~5 % transparent padding; 87 % image height = bottle at ~78 % of the well */ .dvh-card__img { position: absolute; left: 50%; bottom: 4%; z-index: 1; height: 87%; width: auto; max-width: none; translate: -50% 0; } .dvh-card__well::before { /* the one contact shadow */ content: ""; position: absolute; left: 50%; bottom: 8.4%; z-index: 0; width: 34%; height: 4.5%; translate: -50% 50%; background: var(--contact-shadow); } .dvh-card__badges, .dvh-gallery__badges { list-style: none; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; } .dvh-card__badges { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2; } .dvh-card__badges .dvh-medal, .dvh-gallery__badges .dvh-medal { min-width: 0; flex: 0 1 auto; } .dvh-card__badges .dvh-medal:last-child:not(:first-child), .dvh-gallery__badges .dvh-medal:last-child:not(:first-child) { flex: none; } /* the "+N" chip */ .dvh-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--sp-3) 6px 0; } .dvh-card__eyebrow { display: flex; align-items: flex-start; gap: 6px; 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); } .dvh-card__eyebrow .dvh-dot { margin-top: 4px; } /* centred on the first line */ /* a long house name wraps to a second line instead of being cut */ .dvh-card__eyebrow > span:last-child { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .dvh-card__title, .woocommerce-loop-product__title { margin-top: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); color: var(--ink); text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .dvh-card__meta { margin-top: var(--sp-1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); } .dvh-card__meta > span + span::before { content: " · "; } /* meta line and price row sit outside the card link (one action per card): they take the body's inset */ .dvh-card > .dvh-card__meta, .dvh-card > .dvh-card__foot { padding-inline: 6px; } .dvh-card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); } .dvh-card__price, ul.products li.product .price { font-size: var(--fs-price); line-height: var(--lh-price); font-weight: var(--fw-strong); color: var(--ink); } /* the price row stacks by card width, not by viewport: under 264 px ("1.250,00 MDL" + "Adaugă") the price sits above a full-width add, so every card in a row has the same anatomy in every state */ @container dvh-card (max-width: 263.98px) { .dvh-card__foot { flex-direction: column; align-items: stretch; } .dvh-card__foot .dvh-add { width: 100%; } } /* phone-width cards (under 200 px): the standard 750 ml is implied (other volumes still show), and a medal chip keeps medal + year (the competition stays for screen readers; full names on the wine page) */ @container dvh-card (max-width: 199.98px) { .dvh-card__meta > .is-std { display: none; } .dvh-card__meta > .is-std:first-child + span::before { content: none; } .dvh-card__badges .dvh-medal__comp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .dvh-card--compact .dvh-card__well { aspect-ratio: 4 / 5; } .dvh-card--compact .dvh-card__title { -webkit-line-clamp: 1; line-clamp: 1; } /* ---- 7b. Rail (a row of cards with arrows; reuses .dvh-chiprow so kit.js scrolls it), house tile ---- */ .dvh-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-5) var(--sp-4); } .dvh-rail__head > * + * { margin-top: var(--sp-2); } .dvh-rail__nav { display: flex; gap: var(--sp-2); } .dvh-rail > .dvh-chiprow__track { grid-column: 1 / -1; gap: var(--col-gap); padding-block: 0 var(--sp-2); } /* house tile: the house's bottles as one group (three, or two for two-wine houses), one contact shadow; mixed houses, so neutral wells and the house dot */ .dvh-housetile { width: min(40vw, 216px); } .dvh-housetile .dvh-card__well::before { width: 70%; } .dvh-housetile .dvh-card__img { height: 74%; } .dvh-housetile .dvh-card__img:nth-of-type(1) { left: 27%; } /* -of-type: cards.js inserts a turntable