@charset "UTF-8";.wp-admin #poststuff .component h2, .wp-admin #poststuff .component h3, .wp-admin #poststuff .component h4{padding:0}.wp-admin #poststuff .component p{margin:0}.theme-browser .theme .theme-name{height:unset}body > #page > #header[role=banner]{display:none}.acfe-flexible-layout-thumbnail{background-size:contain}.wp-menu-name .update-plugins{display:none !important}:root{--width:80rem;--margin:6.25rem;--padding:1rem}@media (max-width:1000px){:root{--margin:1rem}}@media (max-width:600px){:root{--margin:1rem}}*{box-sizing:border-box;margin:0}html{font-size:16px;scroll-behavior:smooth}body{overflow-x:hidden}body.prevent-scroll{overflow:hidden}.component a{text-decoration:none}.underline{text-decoration:underline}.mw{max-width:var(--width);width:100%;margin-left:auto;margin-right:auto}.mw-200{max-width:12.5rem}@media (min-width:calc(1000px + 1px)){.mw-200-d{max-width:12.5rem}}.mw-210{max-width:13.125rem}@media (min-width:calc(1000px + 1px)){.mw-210-d{max-width:13.125rem}}.mw-220{max-width:13.75rem}@media (min-width:calc(1000px + 1px)){.mw-220-d{max-width:13.75rem}}.mw-230{max-width:14.375rem}@media (min-width:calc(1000px + 1px)){.mw-230-d{max-width:14.375rem}}.mw-240{max-width:15rem}@media (min-width:calc(1000px + 1px)){.mw-240-d{max-width:15rem}}.mw-250{max-width:15.625rem}@media (min-width:calc(1000px + 1px)){.mw-250-d{max-width:15.625rem}}.mw-260{max-width:16.25rem}@media (min-width:calc(1000px + 1px)){.mw-260-d{max-width:16.25rem}}.mw-270{max-width:16.875rem}@media (min-width:calc(1000px + 1px)){.mw-270-d{max-width:16.875rem}}.mw-280{max-width:17.5rem}@media (min-width:calc(1000px + 1px)){.mw-280-d{max-width:17.5rem}}.mw-290{max-width:18.125rem}@media (min-width:calc(1000px + 1px)){.mw-290-d{max-width:18.125rem}}.mw-300{max-width:18.75rem}@media (min-width:calc(1000px + 1px)){.mw-300-d{max-width:18.75rem}}.mw-310{max-width:19.375rem}@media (min-width:calc(1000px + 1px)){.mw-310-d{max-width:19.375rem}}.mw-320{max-width:20rem}@media (min-width:calc(1000px + 1px)){.mw-320-d{max-width:20rem}}.mw-330{max-width:20.625rem}@media (min-width:calc(1000px + 1px)){.mw-330-d{max-width:20.625rem}}.mw-340{max-width:21.25rem}@media (min-width:calc(1000px + 1px)){.mw-340-d{max-width:21.25rem}}.mw-350{max-width:21.875rem}@media (min-width:calc(1000px + 1px)){.mw-350-d{max-width:21.875rem}}.mw-360{max-width:22.5rem}@media (min-width:calc(1000px + 1px)){.mw-360-d{max-width:22.5rem}}.mw-370{max-width:23.125rem}@media (min-width:calc(1000px + 1px)){.mw-370-d{max-width:23.125rem}}.mw-380{max-width:23.75rem}@media (min-width:calc(1000px + 1px)){.mw-380-d{max-width:23.75rem}}.mw-390{max-width:24.375rem}@media (min-width:calc(1000px + 1px)){.mw-390-d{max-width:24.375rem}}.mw-400{max-width:25rem}@media (min-width:calc(1000px + 1px)){.mw-400-d{max-width:25rem}}.mw-410{max-width:25.625rem}@media (min-width:calc(1000px + 1px)){.mw-410-d{max-width:25.625rem}}.mw-420{max-width:26.25rem}@media (min-width:calc(1000px + 1px)){.mw-420-d{max-width:26.25rem}}.mw-430{max-width:26.875rem}@media (min-width:calc(1000px + 1px)){.mw-430-d{max-width:26.875rem}}.mw-440{max-width:27.5rem}@media (min-width:calc(1000px + 1px)){.mw-440-d{max-width:27.5rem}}.mw-450{max-width:28.125rem}@media (min-width:calc(1000px + 1px)){.mw-450-d{max-width:28.125rem}}.mw-460{max-width:28.75rem}@media (min-width:calc(1000px + 1px)){.mw-460-d{max-width:28.75rem}}.mw-470{max-width:29.375rem}@media (min-width:calc(1000px + 1px)){.mw-470-d{max-width:29.375rem}}.mw-480{max-width:30rem}@media (min-width:calc(1000px + 1px)){.mw-480-d{max-width:30rem}}.mw-490{max-width:30.625rem}@media (min-width:calc(1000px + 1px)){.mw-490-d{max-width:30.625rem}}.mw-500{max-width:31.25rem}@media (min-width:calc(1000px + 1px)){.mw-500-d{max-width:31.25rem}}.mw-510{max-width:31.875rem}@media (min-width:calc(1000px + 1px)){.mw-510-d{max-width:31.875rem}}.mw-520{max-width:32.5rem}@media (min-width:calc(1000px + 1px)){.mw-520-d{max-width:32.5rem}}.mw-530{max-width:33.125rem}@media (min-width:calc(1000px + 1px)){.mw-530-d{max-width:33.125rem}}.mw-540{max-width:33.75rem}@media (min-width:calc(1000px + 1px)){.mw-540-d{max-width:33.75rem}}.mw-550{max-width:34.375rem}@media (min-width:calc(1000px + 1px)){.mw-550-d{max-width:34.375rem}}.mw-560{max-width:35rem}@media (min-width:calc(1000px + 1px)){.mw-560-d{max-width:35rem}}.mw-570{max-width:35.625rem}@media (min-width:calc(1000px + 1px)){.mw-570-d{max-width:35.625rem}}.mw-580{max-width:36.25rem}@media (min-width:calc(1000px + 1px)){.mw-580-d{max-width:36.25rem}}.mw-590{max-width:36.875rem}@media (min-width:calc(1000px + 1px)){.mw-590-d{max-width:36.875rem}}.mw-600{max-width:37.5rem}@media (min-width:calc(1000px + 1px)){.mw-600-d{max-width:37.5rem}}.mw-610{max-width:38.125rem}@media (min-width:calc(1000px + 1px)){.mw-610-d{max-width:38.125rem}}.mw-620{max-width:38.75rem}@media (min-width:calc(1000px + 1px)){.mw-620-d{max-width:38.75rem}}.mw-630{max-width:39.375rem}@media (min-width:calc(1000px + 1px)){.mw-630-d{max-width:39.375rem}}.mw-640{max-width:40rem}@media (min-width:calc(1000px + 1px)){.mw-640-d{max-width:40rem}}.mw-650{max-width:40.625rem}@media (min-width:calc(1000px + 1px)){.mw-650-d{max-width:40.625rem}}.mw-660{max-width:41.25rem}@media (min-width:calc(1000px + 1px)){.mw-660-d{max-width:41.25rem}}.mw-670{max-width:41.875rem}@media (min-width:calc(1000px + 1px)){.mw-670-d{max-width:41.875rem}}.mw-680{max-width:42.5rem}@media (min-width:calc(1000px + 1px)){.mw-680-d{max-width:42.5rem}}.mw-690{max-width:43.125rem}@media (min-width:calc(1000px + 1px)){.mw-690-d{max-width:43.125rem}}.mw-700{max-width:43.75rem}@media (min-width:calc(1000px + 1px)){.mw-700-d{max-width:43.75rem}}.mw-710{max-width:44.375rem}@media (min-width:calc(1000px + 1px)){.mw-710-d{max-width:44.375rem}}.mw-720{max-width:45rem}@media (min-width:calc(1000px + 1px)){.mw-720-d{max-width:45rem}}.mw-730{max-width:45.625rem}@media (min-width:calc(1000px + 1px)){.mw-730-d{max-width:45.625rem}}.mw-740{max-width:46.25rem}@media (min-width:calc(1000px + 1px)){.mw-740-d{max-width:46.25rem}}.mw-750{max-width:46.875rem}@media (min-width:calc(1000px + 1px)){.mw-750-d{max-width:46.875rem}}.mw-760{max-width:47.5rem}@media (min-width:calc(1000px + 1px)){.mw-760-d{max-width:47.5rem}}.mw-770{max-width:48.125rem}@media (min-width:calc(1000px + 1px)){.mw-770-d{max-width:48.125rem}}.mw-780{max-width:48.75rem}@media (min-width:calc(1000px + 1px)){.mw-780-d{max-width:48.75rem}}.mw-790{max-width:49.375rem}@media (min-width:calc(1000px + 1px)){.mw-790-d{max-width:49.375rem}}.mw-800{max-width:50rem}@media (min-width:calc(1000px + 1px)){.mw-800-d{max-width:50rem}}.mw-810{max-width:50.625rem}@media (min-width:calc(1000px + 1px)){.mw-810-d{max-width:50.625rem}}.mw-820{max-width:51.25rem}@media (min-width:calc(1000px + 1px)){.mw-820-d{max-width:51.25rem}}.mw-830{max-width:51.875rem}@media (min-width:calc(1000px + 1px)){.mw-830-d{max-width:51.875rem}}.mw-840{max-width:52.5rem}@media (min-width:calc(1000px + 1px)){.mw-840-d{max-width:52.5rem}}.mw-850{max-width:53.125rem}@media (min-width:calc(1000px + 1px)){.mw-850-d{max-width:53.125rem}}.mw-860{max-width:53.75rem}@media (min-width:calc(1000px + 1px)){.mw-860-d{max-width:53.75rem}}.mw-870{max-width:54.375rem}@media (min-width:calc(1000px + 1px)){.mw-870-d{max-width:54.375rem}}.mw-880{max-width:55rem}@media (min-width:calc(1000px + 1px)){.mw-880-d{max-width:55rem}}.mw-890{max-width:55.625rem}@media (min-width:calc(1000px + 1px)){.mw-890-d{max-width:55.625rem}}.mw-900{max-width:56.25rem}@media (min-width:calc(1000px + 1px)){.mw-900-d{max-width:56.25rem}}.mw-910{max-width:56.875rem}@media (min-width:calc(1000px + 1px)){.mw-910-d{max-width:56.875rem}}.mw-920{max-width:57.5rem}@media (min-width:calc(1000px + 1px)){.mw-920-d{max-width:57.5rem}}.mw-930{max-width:58.125rem}@media (min-width:calc(1000px + 1px)){.mw-930-d{max-width:58.125rem}}.mw-940{max-width:58.75rem}@media (min-width:calc(1000px + 1px)){.mw-940-d{max-width:58.75rem}}.mw-950{max-width:59.375rem}@media (min-width:calc(1000px + 1px)){.mw-950-d{max-width:59.375rem}}.mw-960{max-width:60rem}@media (min-width:calc(1000px + 1px)){.mw-960-d{max-width:60rem}}.mw-970{max-width:60.625rem}@media (min-width:calc(1000px + 1px)){.mw-970-d{max-width:60.625rem}}.mw-980{max-width:61.25rem}@media (min-width:calc(1000px + 1px)){.mw-980-d{max-width:61.25rem}}.mw-990{max-width:61.875rem}@media (min-width:calc(1000px + 1px)){.mw-990-d{max-width:61.875rem}}.mw-1000{max-width:62.5rem}@media (min-width:calc(1000px + 1px)){.mw-1000-d{max-width:62.5rem}}.mw-1010{max-width:63.125rem}@media (min-width:calc(1000px + 1px)){.mw-1010-d{max-width:63.125rem}}.mw-1020{max-width:63.75rem}@media (min-width:calc(1000px + 1px)){.mw-1020-d{max-width:63.75rem}}.mw-1030{max-width:64.375rem}@media (min-width:calc(1000px + 1px)){.mw-1030-d{max-width:64.375rem}}.mw-1040{max-width:65rem}@media (min-width:calc(1000px + 1px)){.mw-1040-d{max-width:65rem}}.mw-1050{max-width:65.625rem}@media (min-width:calc(1000px + 1px)){.mw-1050-d{max-width:65.625rem}}.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}@media (max-width:1000px){.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}}@media (max-width:600px){.pad{padding-left:var(--padding) !important;padding-right:var(--padding) !important}}.fw{width:100%}.center{text-align:center}button{cursor:pointer}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.noscroll{-ms-overflow-style:none;scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}@media (max-width:1000px){.desktop{display:none !important}}@media (min-width:calc(1000px + 1px)){.mobile{display:none !important}}.fw{width:100%}.flex{display:flex;justify-content:center;align-items:center}.flex-c{display:flex;justify-content:center;align-items:center;flex-direction:column}.auto{margin-left:auto;margin-right:auto}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.upper{text-transform:uppercase}.component{position:relative}.component:empty{display:none}.component-error code{padding:0.1875rem 0.3125rem 0.125rem;background:rgba(0, 0, 0, 0.07);margin-top:0.5rem;font-weight:400 !important}/* ============================================================================ Wine Collectors — theme globals (ported from design-prototype styles.css) Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for @extend) → components → theme style.scss. ========================================================================== */ /* ---- LEGACY COMPAT (katrinas5 starter components still compile until the Phase-B prune;these vars keep their style.scss from breaking the build. REMOVE together with the pruned components.) ------------------------------ */ /* ---- Self-hosted fonts (latin + latin-ext:LV diacritics) ----------------- Cyrillic subsets for the RU (WPML) phase — when enabling RU, download lora v37 + inter v20 cyrillic woff2 via gwfh and add @font-face blocks with unicode-range U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116 here. */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/lora-v37-latin_latin-ext-regular.woff2") format("woff2")}@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/lora-v37-latin_latin-ext-italic.woff2") format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/themes/dev/fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2")}:root{--width:90rem;--padding:2rem;--green:#262d00;--gold:#e29a0a;--red:#63042b;--verde:#eceae2;--mint:#d6f3cf;--font-h:"Lora", Georgia, serif;--font-b:"Inter", system-ui, sans-serif;--cols:12;--gutter:1rem;--margin:2rem;--header-h:4.5rem;--t-display:clamp(3.25rem, 9.5vw, 8.75rem);--t-h2:clamp(2.25rem, 4.8vw, 4.5rem);--t-h3:clamp(1.5rem, 2.4vw, 2.25rem);--t-lead:clamp(1.125rem, 1.4vw, 1.375rem);--t-body:1.0625rem;--t-small:0.8125rem;--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1)}@media (max-width:699px){:root{--cols:4;--margin:1.25rem;--padding:1.25rem}}html{font-size:16px;scroll-behavior:auto;/* clip (not hidden):hidden creates a clip/scroll container and breaks the position:sticky footer un-curtain (spec v1.4 lesson). Also clips the 100vw fixed header's scrollbar-width overflow. */ overflow-x:hidden;overflow-x:clip;/* Scrollbar v2:native bar fully hidden — the fixed gold pill (.scroll-indicator, JS-driven) replaces it */ scrollbar-width:none}::-webkit-scrollbar{display:none;width:0}body{font-family:var(--font-b);font-weight:500;font-size:var(--t-body);line-height:1.65;color:var(--green);background:var(--verde);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}/* Sticky-footer un-curtain:the barba container carries opaque sections ABOVE the footer */
main[data-barba=container]{position:relative;z-index:1}h1, h2, h3, h4{font-family:var(--font-h);font-weight:400;font-style:normal}em, i, .italic{font-style:italic}::selection{background:#e29a0a;color:#262d00}.scroll-indicator{position:fixed;top:0;right:5px;width:6px;height:44px;border-radius:999px;background:var(--gold);z-index:1500;pointer-events:none;opacity:0;transition:opacity 0.2s ease;will-change:transform, opacity}.scroll-indicator.is-visible{opacity:1}/* ---- Custom cursor (Osmo Supply resource, client-approved;colors brand-adapted to gold — resource ships #ff4c24 orange, off-brand). z-index 10010:raised above every other fixed overlay in this file, incl. .wc-loader (10001, the previous highest) so the cursor is never hidden behind the load-screen curtain or the header (1000/999) / scroll-indicator (1500) / grid-overlay (9998). Replaces the native cursor (client feedback:it must not sit behind/lag the OS cursor) — opacity starts at 0 so the div doesn't flash at 0,0 before the first mousemove reports a real position;JS adds .is-active on/after that first move (and toggles it off on mouseleave/blur) — see index.js. ------------ */
.cursor{z-index:10010;background-color:#E29A0A;border:1px solid #E29A0A;border-radius:100em;width:1em;height:1em;opacity:0;transition:background-color 0.375s cubic-bezier(0.625, 0.05, 0, 1), height 0.375s cubic-bezier(0.625, 0.05, 0, 1), width 0.375s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s cubic-bezier(0.625, 0.05, 0, 1);position:fixed;inset:0% auto auto 0%;pointer-events:none}.cursor.is-active{opacity:1}body:has(a:hover) .cursor,
body:has(button:hover) .cursor,
body:has([data-cursor]:hover) .cursor{width:3em;height:3em;background-color:rgba(226, 154, 10, 0.3)}/* Native cursor replacement — fine-pointer/hover-capable devices only (desktop mice/trackpads);touch/coarse pointers keep native behavior untouched below. Scoped broadly (not just .cursor-adjacent elements) so no native arrow/pointer ever peeks through on links, buttons, or plain text. Site has no form inputs, so the I-beam loss on text is accepted. */
@media (hover:hover) and (pointer:fine){html, body, a, button, [data-cursor], *{cursor:none !important}}@media (hover:none) and (pointer:coarse){.cursor{display:none}}.grid{display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin);position:relative}.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin)}.grid-overlay span{background:rgba(226, 154, 10, 0.16);outline:1px solid rgba(226, 154, 10, 0.35);height:100%}body.show-grid .grid-overlay{display:grid}.t-display{font-family:var(--font-h);font-weight:400;font-size:var(--t-display);line-height:1.02;letter-spacing:-0.01em}.t-h2{font-family:var(--font-h);font-weight:400;font-size:var(--t-h2);line-height:1.08}.t-h3{font-family:var(--font-h);font-weight:400;font-size:var(--t-h3);line-height:1.2}.t-lead{font-family:var(--font-b);font-weight:500;font-size:var(--t-lead);line-height:1.55}.t-body{font-family:var(--font-b);font-weight:500;font-size:var(--t-body);line-height:1.65}.t-small{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);line-height:1.4;letter-spacing:0.12em;text-transform:uppercase}/* ---- Body-text tier system (v1.9.1 — documented, not a redesign) ----------- Eduards's review-round observation:hero lead reads larger, koncepts paragraphs smaller, vini lead larger but its own footnote smaller, komanda intro smaller than the slider description — "what is the logic? doesn't feel consistent". AUDIT (computed sizes at 1440px, before any fix):hero lead / vini lead = 20.16px (already .t-lead, consistent with each other);koncepts p1/p2, komanda intro, komanda slider description + favourite, kontakti block values + closing line = 17px (already var(--t-body)/.t-body, ALSO already consistent with each other) — so the perceived "inconsistency" was real as a *visual rhythm* complaint (two tiers coexisting without being named/documented as a system) but the individual pixel values checked out consistent WITHIN each tier already, with exactly ONE confirmed numeric outlier:.vini__cta-note (the "Karte mainās…" footnote) was hardcoded to 0.9rem/14.4px — smaller than koncepts/komanda/kontakti's shared 17px body tier, and not tied to any token at all. That is the concrete instance of "vini lead larger but its footnote smaller". THE THREE TIERS (documented rule, apply these classes/tokens everywhere instead of per-component ad-hoc sizes):- t-lead — the intro paragraph directly under a section H2 (hero lead, vini lead, komanda intro). Token:var(--t-lead), class .t-lead. - body — running copy (koncepts paragraphs, komanda person description, kontakti block values/closing line). Token:var(--t-body), class .t-body. - meta/small — footnotes & labels (vini footnote, stickers, trust-style lines, footer meta, the small uppercase tag/position labels already using .t-small). This tier has TWO visual treatments sharing the SAME size token (var(--t-small), anchored to the value that already dominates the site for this role — stickers/vini-tag/komanda-position were already 13px @1440 via var(--t-small)):.t-small itself (uppercase + letter-spaced, for eyebrows/labels/tags — unchanged) and the new .t-meta below (plain sentence case, for footnote SENTENCES like "Karte mainās…" — uppercase would misread as a label there, not a footnote, so it keeps t-small's SIZE without t-small's caps/tracking treatment). Both anchor to the identical --t-small token, so they're the same tier by size — just two presentations of it, matching how the tier already existed informally (stickers/tags uppercase, nothing previously existed for a plain footnote SENTENCE at this size — that gap is exactly why .vini__cta-note drifted to an untethered 0.9rem instead of reaching for an existing token). */
.t-meta{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);line-height:1.5}.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5em;background:var(--mint);color:var(--green);border-radius:999px;font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.12em;text-transform:uppercase;padding:0.9em 1.9em;white-space:nowrap;min-height:44px;transition:background-color 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo)}.wc-btn:active{transform:scale(0.98)}@media (hover:hover) and (pointer:fine){.wc-btn:hover{background:var(--gold);transform:scale(1.03)}}.wc-btn--ghost{background:transparent;border:1px solid rgba(236, 234, 226, 0.55);color:var(--verde);padding:calc(0.9em - 1px) calc(1.9em - 1px)}@media (hover:hover) and (pointer:fine){.wc-btn--ghost:hover{background:var(--verde);color:var(--green);border-color:var(--verde);transform:scale(1.03)}}.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.12em;text-transform:uppercase}.eyebrow svg{width:1rem;height:1rem;flex-shrink:0}.component .eyebrow{margin-bottom:1.5rem}.sticker{position:absolute;display:inline-flex;align-items:center;background:var(--gold);color:var(--green);font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;padding:0.55em 1.1em;border-radius:999px;white-space:nowrap;z-index:6;box-shadow:0 6px 18px rgba(38, 45, 0, 0.18)}.sticker--rot-neg4{transform:rotate(-4deg)}.sticker--rot-3{transform:rotate(3deg)}.img-mask{position:absolute;inset:0;overflow:hidden;border-radius:2px}.img-mask img{width:100%;height:100%;object-fit:cover}.wedge{position:absolute;pointer-events:none;will-change:transform}.rotating-badge{position:absolute;width:110px;height:110px;z-index:5}.rotating-badge__ring{width:100%;height:100%;will-change:transform}.rotating-badge__glyph{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:28px;height:28px}@media (max-width:699px){.rotating-badge{display:none}}/* ---- Loader (v1.9.0:plays on every full page load, incl. refreshes — the once-per-session gate was removed in index.js;still skipped for automation/reduced motion) --------- */
.wc-loader{position:fixed;inset:0;z-index:10001;background:var(--verde);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.25rem;will-change:transform}.wc-loader__glyph{width:44px;height:44px;will-change:transform}.wc-loader__word{font-family:var(--font-h);font-style:italic;font-weight:400;font-size:clamp(1.25rem, 3vw, 1.75rem);color:var(--green);opacity:0}body.wc-loaded .wc-loader{pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}a:focus-visible,
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.wc-anchor{position:absolute;top:0;left:0;width:1px;height:1px}/* ============================================================================ Wine Collectors — theme globals (ported from design-prototype styles.css) Compiled by bettrlite:reset → plugin style → THIS (twice:compiled + raw for @extend) → components → theme style.scss. ========================================================================== */ /* ---- LEGACY COMPAT (katrinas5 starter components still compile until the Phase-B prune;these vars keep their style.scss from breaking the build. REMOVE together with the pruned components.) ------------------------------ */ /* ---- Self-hosted fonts (latin + latin-ext:LV diacritics) ----------------- Cyrillic subsets for the RU (WPML) phase — when enabling RU, download lora v37 + inter v20 cyrillic woff2 via gwfh and add @font-face blocks with unicode-range U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116 here. */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/lora-v37-latin_latin-ext-regular.woff2") format("woff2")}@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("/wp-content/themes/dev/fonts/lora-v37-latin_latin-ext-italic.woff2") format("woff2")}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/themes/dev/fonts/inter-v20-latin_latin-ext-500.woff2") format("woff2")}:root{--width:90rem;--padding:2rem;--green:#262d00;--gold:#e29a0a;--red:#63042b;--verde:#eceae2;--mint:#d6f3cf;--font-h:"Lora", Georgia, serif;--font-b:"Inter", system-ui, sans-serif;--cols:12;--gutter:1rem;--margin:2rem;--header-h:4.5rem;--t-display:clamp(3.25rem, 9.5vw, 8.75rem);--t-h2:clamp(2.25rem, 4.8vw, 4.5rem);--t-h3:clamp(1.5rem, 2.4vw, 2.25rem);--t-lead:clamp(1.125rem, 1.4vw, 1.375rem);--t-body:1.0625rem;--t-small:0.8125rem;--ease-osmo:cubic-bezier(0.625, 0.05, 0, 1)}@media (max-width:699px){:root{--cols:4;--margin:1.25rem;--padding:1.25rem}}html{font-size:16px;scroll-behavior:auto;/* clip (not hidden):hidden creates a clip/scroll container and breaks the position:sticky footer un-curtain (spec v1.4 lesson). Also clips the 100vw fixed header's scrollbar-width overflow. */ overflow-x:hidden;overflow-x:clip;/* Scrollbar v2:native bar fully hidden — the fixed gold pill (.scroll-indicator, JS-driven) replaces it */ scrollbar-width:none}::-webkit-scrollbar{display:none;width:0}body{font-family:var(--font-b);font-weight:500;font-size:var(--t-body);line-height:1.65;color:var(--green);background:var(--verde);overflow-x:hidden;overflow-x:clip;position:relative;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}/* Sticky-footer un-curtain:the barba container carries opaque sections ABOVE the footer */
main[data-barba=container]{position:relative;z-index:1}h1, h2, h3, h4{font-family:var(--font-h);font-weight:400;font-style:normal}em, i, .italic{font-style:italic}::selection{background:#e29a0a;color:#262d00}.scroll-indicator{position:fixed;top:0;right:5px;width:6px;height:44px;border-radius:999px;background:var(--gold);z-index:1500;pointer-events:none;opacity:0;transition:opacity 0.2s ease;will-change:transform, opacity}.scroll-indicator.is-visible{opacity:1}/* ---- Custom cursor (Osmo Supply resource, client-approved;colors brand-adapted to gold — resource ships #ff4c24 orange, off-brand). z-index 10010:raised above every other fixed overlay in this file, incl. .wc-loader (10001, the previous highest) so the cursor is never hidden behind the load-screen curtain or the header (1000/999) / scroll-indicator (1500) / grid-overlay (9998). Replaces the native cursor (client feedback:it must not sit behind/lag the OS cursor) — opacity starts at 0 so the div doesn't flash at 0,0 before the first mousemove reports a real position;JS adds .is-active on/after that first move (and toggles it off on mouseleave/blur) — see index.js. ------------ */
.cursor{z-index:10010;background-color:#E29A0A;border:1px solid #E29A0A;border-radius:100em;width:1em;height:1em;opacity:0;transition:background-color 0.375s cubic-bezier(0.625, 0.05, 0, 1), height 0.375s cubic-bezier(0.625, 0.05, 0, 1), width 0.375s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s cubic-bezier(0.625, 0.05, 0, 1);position:fixed;inset:0% auto auto 0%;pointer-events:none}.cursor.is-active{opacity:1}body:has(a:hover) .cursor,
body:has(button:hover) .cursor,
body:has([data-cursor]:hover) .cursor{width:3em;height:3em;background-color:rgba(226, 154, 10, 0.3)}/* Native cursor replacement — fine-pointer/hover-capable devices only (desktop mice/trackpads);touch/coarse pointers keep native behavior untouched below. Scoped broadly (not just .cursor-adjacent elements) so no native arrow/pointer ever peeks through on links, buttons, or plain text. Site has no form inputs, so the I-beam loss on text is accepted. */
@media (hover:hover) and (pointer:fine){html, body, a, button, [data-cursor], *{cursor:none !important}}@media (hover:none) and (pointer:coarse){.cursor{display:none}}.grid{display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin);position:relative}.grid-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin)}.grid-overlay span{background:rgba(226, 154, 10, 0.16);outline:1px solid rgba(226, 154, 10, 0.35);height:100%}body.show-grid .grid-overlay{display:grid}.t-display{font-family:var(--font-h);font-weight:400;font-size:var(--t-display);line-height:1.02;letter-spacing:-0.01em}.t-h2{font-family:var(--font-h);font-weight:400;font-size:var(--t-h2);line-height:1.08}.t-h3{font-family:var(--font-h);font-weight:400;font-size:var(--t-h3);line-height:1.2}.t-lead{font-family:var(--font-b);font-weight:500;font-size:var(--t-lead);line-height:1.55}.t-body{font-family:var(--font-b);font-weight:500;font-size:var(--t-body);line-height:1.65}.t-small{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);line-height:1.4;letter-spacing:0.12em;text-transform:uppercase}/* ---- Body-text tier system (v1.9.1 — documented, not a redesign) ----------- Eduards's review-round observation:hero lead reads larger, koncepts paragraphs smaller, vini lead larger but its own footnote smaller, komanda intro smaller than the slider description — "what is the logic? doesn't feel consistent". AUDIT (computed sizes at 1440px, before any fix):hero lead / vini lead = 20.16px (already .t-lead, consistent with each other);koncepts p1/p2, komanda intro, komanda slider description + favourite, kontakti block values + closing line = 17px (already var(--t-body)/.t-body, ALSO already consistent with each other) — so the perceived "inconsistency" was real as a *visual rhythm* complaint (two tiers coexisting without being named/documented as a system) but the individual pixel values checked out consistent WITHIN each tier already, with exactly ONE confirmed numeric outlier:.vini__cta-note (the "Karte mainās…" footnote) was hardcoded to 0.9rem/14.4px — smaller than koncepts/komanda/kontakti's shared 17px body tier, and not tied to any token at all. That is the concrete instance of "vini lead larger but its footnote smaller". THE THREE TIERS (documented rule, apply these classes/tokens everywhere instead of per-component ad-hoc sizes):- t-lead — the intro paragraph directly under a section H2 (hero lead, vini lead, komanda intro). Token:var(--t-lead), class .t-lead. - body — running copy (koncepts paragraphs, komanda person description, kontakti block values/closing line). Token:var(--t-body), class .t-body. - meta/small — footnotes & labels (vini footnote, stickers, trust-style lines, footer meta, the small uppercase tag/position labels already using .t-small). This tier has TWO visual treatments sharing the SAME size token (var(--t-small), anchored to the value that already dominates the site for this role — stickers/vini-tag/komanda-position were already 13px @1440 via var(--t-small)):.t-small itself (uppercase + letter-spaced, for eyebrows/labels/tags — unchanged) and the new .t-meta below (plain sentence case, for footnote SENTENCES like "Karte mainās…" — uppercase would misread as a label there, not a footnote, so it keeps t-small's SIZE without t-small's caps/tracking treatment). Both anchor to the identical --t-small token, so they're the same tier by size — just two presentations of it, matching how the tier already existed informally (stickers/tags uppercase, nothing previously existed for a plain footnote SENTENCE at this size — that gap is exactly why .vini__cta-note drifted to an untethered 0.9rem instead of reaching for an existing token). */
.t-meta{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);line-height:1.5}.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5em;background:var(--mint);color:var(--green);border-radius:999px;font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.12em;text-transform:uppercase;padding:0.9em 1.9em;white-space:nowrap;min-height:44px;transition:background-color 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo)}.wc-btn:active{transform:scale(0.98)}@media (hover:hover) and (pointer:fine){.wc-btn:hover{background:var(--gold);transform:scale(1.03)}}.wc-btn--ghost{background:transparent;border:1px solid rgba(236, 234, 226, 0.55);color:var(--verde);padding:calc(0.9em - 1px) calc(1.9em - 1px)}@media (hover:hover) and (pointer:fine){.wc-btn--ghost:hover{background:var(--verde);color:var(--green);border-color:var(--verde);transform:scale(1.03)}}.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.12em;text-transform:uppercase}.eyebrow svg{width:1rem;height:1rem;flex-shrink:0}.component .eyebrow{margin-bottom:1.5rem}.sticker{position:absolute;display:inline-flex;align-items:center;background:var(--gold);color:var(--green);font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;padding:0.55em 1.1em;border-radius:999px;white-space:nowrap;z-index:6;box-shadow:0 6px 18px rgba(38, 45, 0, 0.18)}.sticker--rot-neg4{transform:rotate(-4deg)}.sticker--rot-3{transform:rotate(3deg)}.img-mask{position:absolute;inset:0;overflow:hidden;border-radius:2px}.img-mask img{width:100%;height:100%;object-fit:cover}.wedge{position:absolute;pointer-events:none;will-change:transform}.rotating-badge{position:absolute;width:110px;height:110px;z-index:5}.rotating-badge__ring{width:100%;height:100%;will-change:transform}.rotating-badge__glyph{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:28px;height:28px}@media (max-width:699px){.rotating-badge{display:none}}/* ---- Loader (v1.9.0:plays on every full page load, incl. refreshes — the once-per-session gate was removed in index.js;still skipped for automation/reduced motion) --------- */
.wc-loader{position:fixed;inset:0;z-index:10001;background:var(--verde);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.25rem;will-change:transform}.wc-loader__glyph{width:44px;height:44px;will-change:transform}.wc-loader__word{font-family:var(--font-h);font-style:italic;font-weight:400;font-size:clamp(1.25rem, 3vw, 1.75rem);color:var(--green);opacity:0}body.wc-loaded .wc-loader{pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}a:focus-visible,
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.wc-anchor{position:absolute;top:0;left:0;width:1px;height:1px}/* ============================================================================ Wine Collectors footer (v1.5.x):statement top, void, text logo + sipping glyph cluster, hairline, all-caps meta band. EXACTLY 100svh;un-curtain via position:sticky on the OUTER <footer> (z 0, beneath main at z 1;requires html/body overflow-x:clip — set in globals). ========================================================================== */
footer{position:sticky;bottom:0;z-index:0}/* "Draw with your cursor" (Osmo Supply resource, client-supplied, brand- adapted) — appended by initWCFooter() (index.js) as the LAST child of <footer>, sibling to .component-footer. STACKING (client round 2):strokes must paint ABOVE the footer's green background but BELOW every piece of content (statement/logo/glyph/meta) — the opposite of round 1's "scribble over everything" brief. footer itself is the positioned (sticky) ancestor, so the svg (z-index:0) and .component-footer > .grid (the content wrapper — already `position:relative` globally per globals.scss .grid, z-index:1 added here) both establish their own stacking context as direct participants in <footer>'s stacking order;.grid's higher z-index wins, so every real element inside it paints over the svg despite the svg being the later sibling in DOM order. .component-footer itself stays position:static/no z-index (see `selector` block below) so it doesn't interpose a competing context between them. Verified:elementFromPoint over a stroke crossing the statement text resolves to the text, not the svg. pointer-events:none throughout regardless — the svg and its lines never intercept hover/click, so meta links stay reachable. Desktop-only via JS (supportsTouch() early-return in initWCFooter) — this file has no touch media-query gate because the element is simply never appended on touch devices. */
.footer-draw-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;/* Round 3 rework (client feedback:joints between segments were visible as dots during the fade — "you can see each corner of the line"). ROOT CAUSE:round 2 drew the trail as many independent <line> segments, each with its OWN staggered opacity tween;neighboring segments share an endpoint, so during the 5s decay window their overlapping semi-transparent round caps held DIFFERENT opacities at the same instant and stacked into a bright dot at every corner. FIX (index.js initWCDraw, was initWCFooterDraw pre-v1.9.0):the trail is now ONE <polyline> whose `points` attribute is rebuilt every tick — a single element can only have ONE uniform opacity, so there is no joint where two different opacities can stack. `fill:none` is REQUIRED here — unlike <line>, a <polyline> auto-closes and fills its enclosed area if not explicitly suppressed. */}.footer-draw-svg polyline{/* Brand red (client round 3;was mint in round 2, gold in round 1) — deliberately moody/subtle against the dark green background;swap the token below if the client wants it louder. */ stroke:var(--red);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;fill:none}.component-footer{background:var(--green);color:var(--verde);height:100svh;display:flex;padding-block:clamp(1.75rem, 5svh, 4rem) clamp(1.25rem, 3svh, 2rem)}/* NOTE:can't write "selector > .grid" here — this build's selector-token substitution only fires when `selector` is the WHOLE selector list for a rule (bare ".component-footer{");it does not fire mid-combinator, so "selector > .grid" was compiling LITERALLY (a dead type-selector named "selector"), silently dropping row-gap + grid-template-rows and causing the v1.6.4 spacing regression. .component-footer is the same stable class the compiler emits for the bare "selector" block above, so it's used directly here instead. */
.component-footer > .grid{flex:1;width:100%;grid-template-rows:auto 1fr auto auto auto;row-gap:clamp(1.25rem, 3svh, 2.5rem);/* Stacking (client round 2, see .footer-draw-svg comment above):this is the content wrapper the draw-svg must sit BEHIND. .grid already gets position:relative from the global rule in globals.scss — z-index:1 here is what actually wins the stacking-order comparison against the svg's sibling z-index:0. */ z-index:1}.wc-footer__statement{grid-column:1/12;grid-row:1;font-family:var(--font-h);font-weight:400;font-size:clamp(2rem, 4.5vw, 4.25rem);line-height:1.08;color:var(--verde);margin:0}.wc-footer__statement .em{color:var(--gold);font-style:italic}.wc-footer__brand{grid-column:1/8;grid-row:3;align-self:end}.wc-footer__brand svg{display:block;width:100%;height:auto;aspect-ratio:800/113;max-height:20svh;fill:var(--verde)}/* …animated glyph right, height == the text-logo's rendered height at any viewport (logoH = brandW × 113/800, brandW = 7/12 cols + 6 gutters = 58.3333vw − 2.75rem → 8.2396vw − 0.3884rem). */
.footer-glyph{grid-column:8/13;grid-row:3;justify-self:end;align-self:end;display:block;height:calc(8.2396vw - 0.3884rem);width:auto;aspect-ratio:300/277;fill:var(--verde);overflow:visible}.footer-glyph__tilt{will-change:transform}.wc-footer__rule{grid-column:1/-1;grid-row:4;height:1px;background:rgba(236, 234, 226, 0.13)}.wc-footer__meta{grid-column:1/13;grid-row:5;display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);align-items:baseline;font-size:calc(var(--t-small) * 0.9);text-transform:uppercase;letter-spacing:0.09em;color:rgba(236, 234, 226, 0.6)}.wc-footer__meta p{margin:0}.wc-footer__meta a{color:rgba(236, 234, 226, 0.6);transition:color 0.25s ease;white-space:nowrap;text-decoration:none}.wc-footer__meta a:hover{color:var(--gold)}.wc-footer__meta-item--adrese{grid-column:1/4}.wc-footer__meta-item--laiks{grid-column:4/6}.wc-footer__meta-item--seko{grid-column:6/8}.wc-footer__meta-item--c{grid-column:8/10}.wc-footer__meta-item--legal{grid-column:10/13;display:flex;justify-content:flex-end}@media (max-width:1199px) and (min-width:700px){.wc-footer__meta{row-gap:0.75rem}.wc-footer__meta-item--adrese{grid-column:1/5;grid-row:1}.wc-footer__meta-item--laiks{grid-column:5/9;grid-row:1}.wc-footer__meta-item--seko{grid-column:9/13;grid-row:1}.wc-footer__meta-item--c{grid-column:1/5;grid-row:2}.wc-footer__meta-item--legal{grid-column:5/13;grid-row:2;justify-content:flex-start}}@media (max-width:699px){.component-footer{padding-block:clamp(1.75rem, 5svh, 3.5rem) 1.25rem}.component-footer > .grid{/* statement · VOID · glyph · rule · meta — text logo hidden below (v1.9.0:symbol-only mobile brand cluster, client request), so the logo row is dropped entirely rather than left as a collapsed empty track — glyph moves into its place so glyph → rule → meta keeps the same intentional rhythm the desktop/tablet cluster has. */ grid-template-rows:auto 1fr auto auto auto;row-gap:clamp(1rem, 3svh, 1.75rem)}.wc-footer__statement{grid-column:1/-1;font-size:clamp(1.6rem, 7vw, 2rem)}/* Text logo hidden on mobile (v1.9.0) — .footer-glyph alone carries the brand mark at this size;kept in the DOM (not removed by PHP) so desktop/tablet are untouched, just display:none below $wc-mobile. */ .wc-footer__brand{display:none}.footer-glyph{grid-column:1/-1;grid-row:3;height:clamp(4rem, 18vw, 5rem)}.wc-footer__rule{grid-row:4}.wc-footer__meta{grid-column:1/-1;grid-row:5;row-gap:0.6rem}.wc-footer__meta-item--adrese, .wc-footer__meta-item--laiks, .wc-footer__meta-item--seko, .wc-footer__meta-item--c, .wc-footer__meta-item--legal{grid-column:1/-1;grid-row:auto}.wc-footer__meta-item--legal{justify-content:flex-start}}@media (max-height:560px){.component-footer{overflow-y:auto}}.component-galerija{background:var(--verde);color:var(--green);overflow:hidden;/* v1.7.2 seam:koncepts carries the gap (its shadow needs the room) — galerija contributes almost nothing */ padding-block:0.5rem 9rem}@media (max-width:699px){.component-galerija{padding-block:0.5rem 5rem}}.galerija__head{margin-bottom:4rem}.galerija__eyebrow{grid-column:1/4;color:var(--green)}.galerija__eyebrow svg{fill:var(--green)}.galerija__title{grid-column:1/9;margin:0}.galerija__rows{display:flex;flex-direction:column;gap:1rem;width:100%}.galerija__row{width:100%;overflow:hidden;cursor:grab;position:relative}.galerija__row:active{cursor:grabbing}.galerija__track{display:flex;gap:1rem;width:max-content;will-change:transform}.galerija__item{position:relative;height:38vh;flex-shrink:0;overflow:hidden;border-radius:2px}.galerija__item img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease-osmo);pointer-events:none;user-select:none;-webkit-user-drag:none}.galerija__item--portrait{aspect-ratio:2/3}.galerija__item--wide{aspect-ratio:4/3}.galerija__item--unclipped{overflow:visible}.galerija__item--unclipped .sticker--rot-3{top:12px;left:12px}.galerija__item--unclipped .sticker--rot-neg4{bottom:12px;right:12px}@media (hover:hover) and (pointer:fine){.galerija__item:hover img{transform:scale(1.04)}}@media (max-width:699px){.galerija__eyebrow{grid-column:1/5}.galerija__title{grid-column:1/5}.galerija__item{height:26vh}}/* ============================================================================ Wine Collectors header (v1.6):fixed bar, transparent→solid, glyph logo scales by state, CTA with gold sweep, mobile overlay. ========================================================================== */
.component-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;border-bottom:1px solid transparent;transition:background-color 0.3s var(--ease-osmo), border-color 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo);will-change:transform}.component-header.is-solid{background:var(--green);border-bottom-color:rgba(236, 234, 226, 0.1)}.component-header.is-hidden{transform:translateY(-100%)}.wc-header__bar{display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-inline:var(--margin);align-items:center;padding-block:1.3rem;transition:padding 0.35s var(--ease-osmo)}.component-header.is-solid .wc-header__bar{padding-block:1rem}.wc-header__logo{grid-column:1/3;display:flex;align-items:center}.wc-header__logo svg{height:3.2rem;width:auto;fill:var(--verde);will-change:transform;transition:height 0.35s var(--ease-osmo)}.component-header.is-solid .wc-header__logo svg{height:2.2rem}.wc-header__nav{grid-column:4/9;display:flex;align-items:center;justify-content:center;gap:clamp(1.25rem, 2vw, 2.25rem)}.wc-header__nav a{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;color:var(--verde);position:relative;padding:0.25em 0;text-decoration:none}.wc-header__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right 0.3s var(--ease-osmo)}.wc-header__nav a:hover::after{right:0}.wc-header__actions{grid-column:10/13;display:flex;align-items:center;justify-content:flex-end;gap:1.25rem}/* v1.9.0:language switcher — was a plain <span>, now a dropdown trigger + panel (WPML stub;see index.php/index.js notes). The trigger keeps the old span's exact look (Inter 500 small-caps, verde @75%) in BOTH header states (transparent-over-hero and sticky green) since it's just verde text either way. The PANEL, however, floats over whatever is behind the header (hero photo OR green bar) — so it gets its OWN fixed verde background + green text (client note:"verde panel, green text") rather than trying to track the two header states, which keeps it legible regardless of scroll position. */
.wc-header__lang{position:relative}.wc-header__lang-trigger{display:flex;align-items:center;gap:0.35em;background:none;border:0;padding:0.25em 0;font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;color:var(--verde);opacity:0.75;cursor:pointer;transition:opacity 0.25s var(--ease-osmo);/* small caret, rotates open — one shared triangle glyph via border trick keeps this dependency-free (no extra svg to inline/maintain) */}.wc-header__lang-trigger::after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;transition:transform 0.3s var(--ease-osmo)}@media (hover:hover) and (pointer:fine){.wc-header__lang-trigger:hover{opacity:1}}.wc-header__lang.open .wc-header__lang-trigger{opacity:1}.wc-header__lang.open .wc-header__lang-trigger::after{transform:rotate(180deg)}/* v1.9.1 FIX (client:desktop panel too wide):was min-width:7rem (112px) against a trigger only ~29px wide (the "LV" label + caret) — nearly 4x wider than the trigger it hangs from, and right-anchored (not centered). Narrowed to fit-content (~3-4ch of "LV"/"EN"/"RU" + comfortable padding, width auto lets it shrink to its actual content — LV/EN/RU are all 2 characters, so nothing forces it wider than that) and CENTERED under the trigger. CENTERING WITHOUT RISKING VIEWPORT OVERFLOW:a naive `left:50%;transform:translateX(-50%)` centers against `.wc-header__lang`'s own box (=the trigger's width, ~29px) with no relationship to the viewport, so in principle it COULD push the panel's left edge past the viewport edge on a narrow enough trigger position — but this component only renders at >~1200px (the whole desktop actions cluster is `display:none` below $wc-tablet, see the media query below), and the trigger sits inside `.wc-header__actions` at grid-column 10/13 — comfortably inboard of the right viewport edge even at the narrowest supported width (1200px:measured trigger right edge sits ~254px in from the viewport's right edge at 1280px, the tightest realistic case). A plain centered transform is therefore safe in practice;kept simple (no JS-measured fallback) since the geometry is bounded by the breakpoint itself, not user content. right:auto (was 0) + left:50% + translateX(-50%) replaces the old right:0 anchor. */
.wc-header__lang-panel{position:absolute;top:calc(100% + 0.75rem);left:50%;right:auto;transform:translateX(-50%) translateY(-6px);min-width:4.5rem;width:max-content;background:var(--verde);border-radius:10px;box-shadow:0 12px 28px rgba(38, 45, 0, 0.28);padding:0.5rem;display:flex;flex-direction:column;gap:0.15rem;opacity:0;visibility:hidden;transition:opacity 0.25s var(--ease-osmo), transform 0.25s var(--ease-osmo), visibility 0s linear 0.25s}.wc-header__lang-panel a{display:block;text-align:center;padding:0.5em 0.75em;border-radius:6px;font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;color:var(--green);text-decoration:none;transition:background-color 0.2s var(--ease-osmo)}.wc-header__lang-panel a[aria-current=true]{font-weight:700;text-decoration:underline;text-underline-offset:3px}.wc-header__lang-panel a[aria-disabled=true]{opacity:0.45;cursor:default}@media (hover:hover) and (pointer:fine){.wc-header__lang-panel a:not([aria-disabled=true]):hover{background:rgba(38, 45, 0, 0.08)}}.wc-header__lang.open .wc-header__lang-panel{opacity:1;visibility:visible;/* v1.9.1:must keep translateX(-50%) here too (not just translateY) — the panel is horizontally centered via that same transform property at rest (see .wc-header__lang-panel above);dropping it on open would snap the panel from centered to left-edge-anchored the instant it opens (transform is a single property, this rule fully replaces the closed-state value, it doesn't merge). */ transform:translateX(-50%) translateY(0);transition:opacity 0.25s var(--ease-osmo), transform 0.25s var(--ease-osmo), visibility 0s}.wc-header__cta{flex-shrink:0;position:relative;overflow:hidden;isolation:isolate;text-decoration:none}.wc-header__cta::before{content:"";position:absolute;inset:0;background:var(--gold);border-radius:inherit;transform:translateX(-101%);transition:transform 0.45s var(--ease-osmo);z-index:-1}@media (hover:hover) and (pointer:fine){.wc-btn.wc-header__cta:hover{background:var(--mint);transform:scale(1.02) rotate(-1deg)}.wc-header__cta:hover::before{transform:translateX(0)}}.wc-header__burger{display:none;grid-column:12/13;justify-self:end;align-items:center;justify-content:center;width:44px;height:44px;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}.wc-header__burger span{display:block;width:22px;height:1.5px;background:var(--verde);transition:transform 0.3s var(--ease-osmo), opacity 0.3s var(--ease-osmo)}body.wc-nav-open .wc-header__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}body.wc-nav-open .wc-header__burger span:nth-child(2){opacity:0}body.wc-nav-open .wc-header__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}.wc-mobile-nav{position:fixed;inset:0;z-index:999;background:var(--green);display:flex;flex-direction:column;justify-content:center;padding:var(--margin);padding-top:calc(var(--header-h) + 1rem);transform:translateY(-100%);visibility:hidden;transition:transform 0.5s var(--ease-osmo), visibility 0s linear 0.5s}.wc-mobile-nav__list{display:flex;flex-direction:column;gap:0.5rem;margin:0 0 3rem;padding:0;list-style:none}.wc-mobile-nav__list a{font-family:var(--font-h);font-weight:400;font-size:var(--t-h2);color:var(--verde);display:inline-block;overflow:hidden;text-decoration:none}.wc-mobile-nav__foot{display:flex;flex-direction:column;gap:1rem;border-top:1px solid rgba(236, 234, 226, 0.15);padding-top:1.5rem}.wc-mobile-nav__foot a,
.wc-mobile-nav__foot span{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;color:var(--verde);opacity:0.85;text-decoration:none}/* v1.9.0:reservation pill moved into the popup panel on mobile (see header/index.php) — sits after the nav list, before the hairline/foot block. Reuses .wc-btn's mint pill (same look as the kontakti mega-CTA);full-width here reads as a comfortable, deliberate tap target rather than a small inline pill lost among the big Lora nav links. v1.9.1 FIX (client:pill text shows an underline):ROOT CAUSE is that `.wc-mobile-nav` is re-parented to `document.body` by JS the moment the header first initializes (`initHeader()`, header/index.js — it needs to escape the header's `will-change` containing-block trap so its `position:fixed;inset:0` resolves against the real viewport, same pattern as the loader/cursor/scroll-indicator). That move takes it OUT of `.component-header`'s subtree entirely — so the bettrlite PLUGIN's global `.component a{text-decoration:none}` rule (bettrlite-ref/css/ style.scss) no longer matches it (wrong ancestor), and the plain `<a>` UA-default underline wins instead. Every OTHER link inside this overlay (.wc-mobile-nav__list a, .wc-mobile-nav__foot a) already gets an explicit `text-decoration:none` from THIS file's own rules (see above/below), so they were never affected — only this pill, which relies on `.wc-btn`'s base rule (globals.scss) for its look and never had its own explicit text-decoration override. Scoped fix:only this pill, not a broad `.wc-mobile-nav a` rule, since the other links' underline behavior (or lack of it) is already correct/intentional as-is. */
.wc-mobile-nav__cta{align-self:stretch;justify-content:center;margin:-1rem 0 2rem;padding-block:1.1em;text-decoration:none}/* v1.9.0:mobile language row (LV·EN·RU) — replaces the old plain <span> stub in .wc-mobile-nav__foot. Inherits the foot's base a/span styling (Inter 500 small-caps verde @85%, see .wc-mobile-nav__foot rule above);this block only adds the row layout + the current/disabled distinctions. */
.wc-mobile-nav__lang{display:flex;align-items:center;gap:1rem}.wc-mobile-nav__lang a{padding:0.4em 0}.wc-mobile-nav__lang a.is-current{opacity:1;text-decoration:underline;text-underline-offset:3px}.wc-mobile-nav__lang a[aria-disabled=true]{opacity:0.45}body.wc-nav-open .wc-mobile-nav{transform:translateY(0);visibility:visible;transition:transform 0.5s var(--ease-osmo), visibility 0s}@media (max-width:1199px){.wc-header__nav{display:none}.wc-header__lang{display:none}.wc-header__actions{grid-column:8/12}.wc-header__burger{display:flex}}@media (max-width:699px){.wc-header__logo{grid-column:1/2}.wc-header__logo svg{height:2.6rem}.component-header.is-solid .wc-header__logo svg{height:2rem}.wc-header__actions{grid-column:2/4}/* v1.9.0:reservation pill removed from the header bar entirely on mobile (both closed AND menu-open — .wc-header__bar itself never hides when the popup opens, so one rule covers both states) — it now lives inside the popup panel instead (.wc-mobile-nav__cta above). */ .wc-header__cta{display:none}.wc-header__burger{grid-column:4/5}}.component-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--green)}.wc-hero__media{position:absolute;inset:0;z-index:0;/* single <picture><source media><img></picture> (see hero/index.php) — only one <img> ever exists, so no .desktop/.mobile display toggle needed;the browser itself picks desktop vs mobile source. */}.wc-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;transform:scale(1.06)}.wc-hero__gradient{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(38, 45, 0, 0.35), rgba(38, 45, 0, 0.05) 40%, rgba(38, 45, 0, 0.55) 100%);pointer-events:none}.wc-hero__grid{position:relative;z-index:2;height:100%;grid-template-rows:1fr auto;padding-top:calc(var(--header-h) + 1.5rem);padding-bottom:3rem}.wc-hero__content{grid-column:1/12;grid-row:2;align-self:end}.wc-hero__title{color:var(--verde);margin:0 0 1.25rem}.wc-hero__title em{color:var(--gold);font-style:italic}.wc-hero__lead{grid-column:1/7;color:rgba(236, 234, 226, 0.9);max-width:34rem;margin:0}.wc-hero__actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}@media (min-width:700px){.wc-hero__actions{display:none}}.wc-hero__badge{grid-column:11/13;grid-row:1/3;justify-self:end;align-self:end;/* clears the angled marquee ribbon below:its top edge at the badge's x sits ~(1.745vw margin pull + ~1.4vw local lift) above the flow band (prototype v1.6.2 fix) */ margin-bottom:calc(-20px + 3.4vw);margin-right:-10px}@media (max-width:699px){.wc-hero__grid{padding-top:calc(var(--header-h) + 1rem)}.wc-hero__content{grid-column:1/5}.wc-hero__lead{grid-column:1/5;max-width:none}}/* Wine Collectors komanda — mint section, asymmetric duo, person slider (v1.8.1:chef candid polaroid + 3-card team row REPLACED by one person slider under the pull-quote — photo (keeps the polaroid tilt/shadow language) + info block beside it, red circle-outline prev/next arrows overlaying the photo's left/right edges, whole person crossfades on switch. Row height is still governed by the founders image alone.) v1.8.2 (client round 4 — 4 bugs from screenshot evidence):1. CROSSFADE REWORK. Root cause of "slides in from the bottom" + "section jumps in height":the old rule toggled `position:relative` on `.is-active` and `position:absolute` on everything else. The instant classList swapped, the newly-active slide left absolute positioning and re-entered flow, snapping the parent's height to its own natural size — and because the OTHER (still-absolute) slides are `inset:0` relative to that same now-resizing parent, their effective anchor shifted mid-tween too. Two layout recalcs racing a translateX tween is exactly what reads as "glitchy, slides up from the bottom". FIX:position is now permanently absolute for every slide (never toggled) and the wrapper carries its OWN fixed size — `aspect-ratio` for photos;for info, a CSS grid with every slide stacked in cell 1/1 (grid track sizing auto-fits the TALLEST slide, no JS measurement needed) — so removing/adding `.is-active` can never change either wrapper's box. Switch = opacity only, no x/y motion at all. 2. Arrows:red → cellar green ring (rgb(38,45,0)) at rest, better contrast on mint + photo edges;hover = filled green, verde chevron. Position bug (arrows read near the bottom in the client shot) was the SAME root cause as #1 — `top:50%` was measuring against a photo wrapper whose height kept changing, so "50%" landed in the wrong place mid-transition/after first switch. Fixing the wrapper's fixed aspect-ratio height in #1 fixes this for free;no separate position rule needed. 3. Info block spacing opened up (name/position/description/favourite margins, photo→info gap) — see rules below. 4. Bracket placeholders removed from seed content (page 36) + copy-lv.md — no code change, content-only. */
.component-komanda{background:var(--mint);color:var(--green);overflow:hidden;padding-block:9rem}@media (max-width:699px){.component-komanda{padding-block:5rem}}.komanda__eyebrow{grid-column:1/4;color:var(--green)}.komanda__eyebrow svg{fill:var(--green)}.komanda__title{grid-column:1/10;margin:0 0 4rem}.komanda__img-main{grid-column:1/8;position:relative;transform:rotate(-2deg);aspect-ratio:3/2;/* v1.9.1:explicit z-index (was implicit/auto, relying on DOM-order stacking) so the slider photo stack overlapping it from the right (.komanda__slider-photos, z-index:3) reliably paints ABOVE this image — a real design requirement now, not an accident of source order. */ z-index:1}.komanda__text{grid-column:8/13;display:flex;flex-direction:column;gap:2rem;/* v1.8.2:scoped to DIRECT children only (was a bare `p` descendant selector) — this reset exists for the intro body/quote paragraphs, which rely on the flex `gap` above for spacing instead of margins. As a descendant selector it also matched every <p> nested inside the slider (position/description/favourite), silently zeroing out their margin rules below (`.komanda__text p` at specificity 0,1,1 beats a single-class rule like `.komanda__slider-position` at 0,1,0 regardless of source order) — that's what caused the "no spacing" bug the client reported. */}.komanda__text > p{margin:0;align-self:stretch}.komanda__quote{font-family:var(--font-h);font-style:italic;font-weight:400;font-size:var(--t-h3);color:var(--green)}/* ---- Person slider --------------------------------------------------------- Side-by-side (photo left ~55%, info beside it) down to $wc-tablet;below that the text column itself is already narrow (7/13 of a 12-col grid at ~1024px, per the existing tablet override) so photo+info stacks there too — screenshotted both at 1280 or so, side-by-side left the info block at ~150px usable width and wrapped every word, not a print worth shipping. */
.komanda__slider{width:100%;display:flex;gap:2rem;align-items:flex-start}.komanda__slider-photos{position:relative;flex:0 0 55%;width:55%;aspect-ratio:4/5;transform:rotate(2deg);overflow:visible;/* v1.9.0:touch swipe region (index.js pointer handlers) — pan-y tells the browser vertical drags on this element are native-scroll-owned from the very first frame (no waiting on JS to decide the axis), so a mostly-vertical drag scrolls the page exactly as smoothly as anywhere else;a horizontal drag is claimed by JS instead (preventDefault once the axis-lock in index.js commits to "this is a swipe"). */ touch-action:pan-y;/* v1.9.1 (client:the photo stack's left edge meets the mural image's right edge exactly — reads awkward/accidental, not deliberate). Shift the photo stack LEFT to overlap the mural by roughly half a grid column, layered ABOVE it — a negative margin-left pulls the stack across the .komanda__img-main/.komanda__text grid-column boundary (1/8 vs 8/13) WITHOUT touching either column's own grid-column span or the flex/grid geometry that governs section height — .komanda__slider's `gap:2rem` to the info block is unaffected (the negative margin is scoped to the photos flex-item alone, not the row), so slide-change geometry (the numeric no-layout-shift invariant from the slider round) is unchanged:this margin is a static, one-time layout value, never touched by initWCKomandaSlider's opacity-only crossfade. z-index above the mural (which has no explicit z-index of its own, defaulting to auto/DOM-order — made explicit here rather than relying on that implicit ordering, since "the photo stack must be above" is a real design requirement, not an accident of source order) plus the existing per-photo box-shadow (.komanda__slider-photo, unchanged) is what sells the layered/deliberate depth the client asked for. */ margin-left:-3.5rem;z-index:3}/* Every photo is permanently absolute + inset:0, stacked on top of each other inside the fixed-aspect wrapper above. Position is NEVER toggled — only opacity changes on switch — so the wrapper's box (and therefore the whole section's height) cannot move, and the arrows' `top:50%` always measures against the same stable box. (v1.8.2 root-cause fix — see file header note.) */
.komanda__slider-photo{position:absolute;inset:0;width:100%;height:100%;border-radius:2px;box-shadow:0 12px 28px rgba(38, 45, 0, 0.18);overflow:hidden;opacity:0;visibility:hidden;pointer-events:none}.komanda__slider-photo.is-active{opacity:1;visibility:visible;pointer-events:auto}.komanda__slider-photo .img-mask, .komanda__slider-photo img{width:100%;height:100%}.komanda__slider-photo img{object-fit:cover}/* Info column:CSS grid with every slide stacked in the SAME cell (1/1). Grid track sizing takes the max content height across all items sharing a track, so the wrapper is automatically as tall as the TALLEST slide — no JS measurement, no resize listener, and the box can't change size when `.is-active` moves between slides. */
.komanda__slider-info{display:grid;grid-template-columns:100%;flex:1 1 auto;min-width:0}.komanda__slider-slide{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none}.komanda__slider-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}.komanda__slider-name{font-family:var(--font-b);font-weight:500;font-size:1.375rem;line-height:1.2;margin:0}.komanda__slider-position{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin:0.35rem 0 0}.komanda__slider-description{margin:1rem 0 0}.komanda__slider-favourite{margin:0.75rem 0 0;font-family:var(--font-b);font-weight:500;font-size:var(--t-body);/* "Mans favorīts:" label styled distinctly (italic, muted) from the wine name that follows it. */}.komanda__slider-favourite .komanda__slider-favourite-label{font-style:italic;opacity:0.7;margin-right:0.35em}.komanda__slider-favourite .komanda__slider-favourite-wine{font-family:var(--font-h);font-style:italic;color:var(--gold)}/* ---- Prev/next arrows:cellar-green ring buttons overlaying the photo wrapper's left/right edges, half on / half off (translateX ±50%), always vertically centered on that wrapper because its aspect-ratio box never resizes. Real <button>s so the global custom cursor auto-grows on hover (body:has(button:hover)) and focus-visible gets the site-wide gold ring — nothing extra to wire. v1.8.2:red → green (client:red was hard to see on mint);the old "arrows near the bottom" position bug was the SAME root cause as the photo-height jump (#1 above) — top:50% tracked a wrapper whose height kept changing. Fixing that wrapper fixes this positioning for free. */
.komanda__slider-arrow{position:absolute;top:50%;z-index:4;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;min-width:44px;min-height:44px;border-radius:999px;background:var(--mint);border:1.5px solid var(--green);color:var(--green);transition:background-color 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo), border-color 0.3s var(--ease-osmo), transform 0.3s var(--ease-osmo)}.komanda__slider-arrow svg{width:1.1rem;height:1.1rem}.komanda__slider-arrow--prev{left:0;transform:translate(-50%, -50%)}.komanda__slider-arrow--next{right:0;transform:translate(50%, -50%)}@media (hover:hover) and (pointer:fine){.komanda__slider-arrow:hover{background:var(--green);border-color:var(--green);color:var(--verde)}.komanda__slider-arrow--prev:hover{transform:translate(-50%, -50%) scale(1.06)}.komanda__slider-arrow--next:hover{transform:translate(50%, -50%) scale(1.06)}}.komanda__slider-arrow:active{background:var(--green);color:var(--verde)}@media (max-width:1199px) and (min-width:700px){.komanda__img-main{grid-column:1/7}.komanda__text{grid-column:7/13}.komanda__slider{flex-direction:column}.komanda__slider-photos{flex:0 0 auto;width:60%;max-width:300px;align-self:flex-start;/* v1.9.1:the desktop-only left-overlap margin/z-index is reset here — mural and text column both stack full-width at this breakpoint (no horizontal neighbor left to overlap), so the negative margin would just misalign the photo stack against its own row instead of layering over anything. */ margin-left:0;z-index:auto}.komanda__slider-info{width:100%}}@media (max-width:699px){.komanda__eyebrow{grid-column:1/5}.komanda__title{grid-column:1/5;margin-bottom:2.5rem}.komanda__img-main{grid-column:1/5;margin-bottom:2.5rem}.komanda__text{grid-column:1/5;align-items:flex-end}.komanda__slider{flex-direction:column;width:100%;align-items:stretch}.komanda__slider-photos{width:100%;max-width:none;align-self:stretch;/* v1.9.1:same reset as the tablet breakpoint above — mobile stacks fully vertically, so the desktop-only overlap margin/z-index must not carry over here either (brief:"mobile layout untouched"). */ margin-left:0;z-index:auto;/* aspect-ratio:4/5 inherited from the base rule — the wrapper's fixed size lives there, not on the individual photo (v1.8.2). */}.komanda__slider-info{width:100%}.komanda__slider-arrow{width:44px;height:44px}}.component-koncepts{background:var(--verde);color:var(--green);overflow:hidden;/* v1.7.2 seam:nearly ALL of the koncepts→galerija gap lives HERE — this section is overflow:hidden and the pop image's 20px/45px-blur shadow needs ~65px INSIDE the section or it clips at the border-box */ padding-block:9rem 4.5rem}@media (max-width:699px){.component-koncepts{padding-block:5rem 3.5rem}}.wc-koncepts__eyebrow{grid-column:1/4;color:var(--green)}.wc-koncepts__eyebrow svg{fill:var(--green)}.wc-koncepts__statement{grid-column:1/11;margin:0 0 5rem}.wc-koncepts__statement .em{color:var(--red);font-style:italic}.wc-koncepts__row{grid-column:1/13;display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);align-items:start}.wc-koncepts__img{position:relative;aspect-ratio:3/4}.wc-koncepts__img .img-mask img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;will-change:transform}.wc-koncepts__img--left{grid-column:1/4;/* v1.9.0 (client F2):counter-tilt to the right image's rotate(2deg) — balances the row now that the right image (below) carries all the tilt/shadow weight alone. No box-shadow here (client:left image stays flat/shadowless, tilt only) — .wc-koncepts__sticker-left tilts WITH this wrapper, which reads fine at this small an angle. Section is overflow:hidden;verified no corner clipping at 1440/mobile. */ transform:rotate(-1.75deg)}.wc-koncepts__img--right{grid-column:10/13;margin-top:6rem;transform:rotate(2deg);z-index:2;box-shadow:0 20px 45px rgba(38, 45, 0, 0.22)}.wc-koncepts__sticker-left{bottom:-12px;left:-12px}.wc-koncepts__sticker-right{top:-14px;right:-14px}.wc-koncepts__copy{grid-column:5/9;padding-top:2rem}.wc-koncepts__copy p{margin:0 0 1.25rem}.wc-koncepts__copy p:last-of-type{margin-bottom:1.75rem}/* v1.9.2:auto-styled brand name inside the copy paragraphs (rendered via str_replace in index.php, see wc_koncepts_brand()) — same accent language as .wc-koncepts__statement's red-italic .em (Lora italic / var(--red)), applied here to the literal "Wine Collectors" wherever it appears in running body copy. Scoped with an explicit class (.wc-koncepts__copy .wc-brand), NOT the bare `selector` token — this file's own root rule already uses `.component-koncepts{...}` for the section wrapper above, and per the project's own SCSS gotcha, `selector` only substitutes to `.component-koncepts` when it IS the entire selector;any combinator after it would compile completely differently (silently dead CSS) — an explicit class is unambiguous either way. font-size 1.05em:Lora reads slightly smaller than Inter at the same font-size next to it (per the koncepts screenshot), so a small optical bump keeps the brand name from looking undersized against the surrounding sans-serif body text. */
.wc-koncepts__copy .wc-brand{font-family:var(--font-h);font-style:italic;color:var(--red);font-size:1.05em}@media (max-width:699px){.wc-koncepts__eyebrow{grid-column:1/5}.wc-koncepts__statement{grid-column:1/5;margin-bottom:3rem;font-size:clamp(1.9rem, 8.5vw, 2.25rem)}.wc-koncepts__row{grid-template-columns:repeat(4, 1fr);row-gap:2.5rem}.wc-koncepts__img--left{grid-column:1/5}.wc-koncepts__copy{grid-column:1/5;padding-top:0}.wc-koncepts__img--right{grid-column:1/5;margin-top:0}}.component-kontakti{background:var(--red);color:var(--verde);position:relative;overflow:hidden;padding-block:9rem}@media (max-width:699px){.component-kontakti{padding-block:5rem}}.kontakti__title{grid-column:1/11;margin:0 0 4rem}.kontakti__title .em{color:var(--gold);font-style:italic}.kontakti__info{grid-column:1/13;display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);margin-bottom:4.5rem}.kontakti__block:nth-child(1){grid-column:1/5}.kontakti__block:nth-child(2){grid-column:5/9}.kontakti__block:nth-child(3){grid-column:9/13}.kontakti__block h3{font-family:var(--font-b);font-weight:500;font-size:var(--t-small);letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin:0 0 0.9rem}.kontakti__block p{margin:0 0 0.4rem;color:var(--verde)}.kontakti__block a{color:var(--verde);text-decoration:none;border-bottom:1px solid rgba(236, 234, 226, 0.4);transition:border-color 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo)}.kontakti__block a:hover{border-color:var(--gold);color:var(--gold)}.kontakti__cta-wrap{grid-column:1/13}.kontakti__cta{display:flex;align-items:center;justify-content:center;width:100%;height:7rem;background:var(--mint);color:var(--green);border-radius:999px;font-family:var(--font-h);font-weight:400;font-size:var(--t-h2);position:relative;overflow:hidden;isolation:isolate;text-decoration:none;transition:transform 0.35s var(--ease-osmo);will-change:transform}.kontakti__cta span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:0.75rem}.kontakti__cta::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform 0.45s var(--ease-osmo);z-index:1}@media (hover:hover) and (pointer:fine){.kontakti__cta:hover::before{transform:translateX(0)}.kontakti__cta:hover{transform:scale(1.02) rotate(-1deg)}}.kontakti__note{grid-column:1/13;margin:1.5rem 0 0;text-align:center;color:rgba(236, 234, 226, 0.75)}@media (max-width:1199px) and (min-width:700px){.kontakti__title{grid-column:1/12}}@media (max-width:699px){.kontakti__title{grid-column:1/5;margin-bottom:3rem}.kontakti__info{grid-template-columns:repeat(4, 1fr);row-gap:2rem;margin-bottom:3rem}.kontakti__block:nth-child(1), .kontakti__block:nth-child(2), .kontakti__block:nth-child(3){grid-column:1/5}.kontakti__cta{height:4.5rem;font-size:clamp(1.5rem, 6vw, 2.1rem)}.kontakti__cta span{gap:0.5rem;text-align:center}.kontakti__note{margin-top:1.25rem}}/* -------------------------------------------------------------------------- Wine Collectors marquee — angled ribbon (v1.6.2) -------------------------------------------------------------------------- */
.marquee{background:var(--green);padding-block:1.6rem;display:flex;align-items:center;overflow:hidden;position:relative;z-index:2;/* angled ribbon:oversized + rotated so the strip's ends bleed past the viewport;the wedges it exposes show the full-bleed neighbors (hero image above, verde below), never a gap. overflow-x:clip on body swallows the horizontal overhang. */ width:104vw;margin-left:-2vw;transform:rotate(-2deg);/* the rotation swings the painted strip ±w/2·sin(2°) ≈ ±1.745vw away from its straight flow band;tighten the band by the same amount so the exposed areas behind the angled edges are always the neighbors (hero image above, koncepts verde below), never the backdrop green */ margin-block:-1.745vw}.marquee__track{display:flex;align-items:center;white-space:nowrap;will-change:transform;font-size:var(--t-h3)}.marquee__item{display:inline-flex;align-items:center;font-family:var(--font-h);font-weight:400;font-size:var(--t-h3);color:var(--gold);padding-inline:1.25rem;white-space:nowrap}.marquee__sep{width:0.9em;height:0.9em;flex-shrink:0}@media (max-width:699px){.marquee{padding-block:1.2rem}}/* Wine Collectors 404 (v1.9.0) — on-brand replacement for the generic .inner/.flex-c/font-h2 boilerplate. Green section, verde type, grid- aligned, generous ~100svh composition;Lora display headline with a gold-italic emphasis word (unbracket() [kvadrātiekavas] convention, same as hero/koncepts/footer);wc-btn CTA home;brand glyph as a large, quiet background accent (echoes the footer's standalone glyph). Also the SECOND section (after the footer) to carry the cursor-draw effect — see index.js initWCDraw, generalized (pre-v1.9.0:initWCFooterDraw, footer-only) via the [data-wc-draw] attribute. v1.9.1 FIX (client:"line disappears almost immediately" on 404, footer's was fine):ROOT CAUSE was that [data-wc-draw] (and therefore bindWCDraw's mouseenter/mousemove/mouseleave listeners + getBoundingClientRect() calls) was bound to .wc-404__inner — the grid CONTENT box, which only spans its own text height (~528px measured at 1440x900) — while the section around it is ~100svh (~900px), vertically centered via flex `align-items:center`. That left a ~186px dead-zone above AND below the content box where the pointer is still visually "inside the green section" but has technically left the bound element — any natural hand-drawn squiggle that dipped past the text block's own top/bottom edge fired a REAL mouseleave (confirmed via elementFromPoint hit-testing during a live drawn path:the cursor repeatedly resolved to the parent <section>, not .wc-404__inner, well before leaving the visible green area), which immediately fades + clears the trail per bindWCDraw's `leave()` — that is exactly "disappears almost immediately". FIX:[data-wc-draw] now lives on .wc-404__section, a NEW wrapper that fills the full ~100svh box — the same pattern the footer already uses (bindWCDraw(footer) binds the ENTIRE 100svh <footer>, so it has no such dead zone). `selector` (the component root) now only owns background/color;.wc-404__section owns the sizing + flex-centering + position:relative that the draw effect and the glyph both anchor to. */
.component-not_found{background:var(--green);color:var(--verde);overflow:hidden}.wc-404__section{position:relative;min-height:100svh;display:flex;align-items:center;width:100%;padding-block:8rem}/* Cursor-draw svg (index.js initWCDraw, generalized pre-v1.9.0 from the footer-only initWCFooterDraw) — appended as the LAST child of whichever [data-wc-draw] root it binds to (here:.wc-404__section, the FULL-HEIGHT wrapper as of v1.9.1 — the theme-owned equivalent of the footer's <footer> binding target, since footer.php's <footer> tag itself isn't ours to attribute). Reuses the EXACT SAME .footer-draw-svg class from footer/style.scss (position:absolute/inset:0/pointer-events:none/ z-index:0/polyline styling all already defined there, class-scoped not footer-scoped) — no new rule needed here. SAME stacking pattern as the footer (see that file's .footer-draw-svg comment for the full stacking- context writeup):.wc-404__section (position:relative) is the positioned ancestor, the svg sits at its class-level z-index:0, and .wc-404__inner gets z-index:1 so it wins the stacking-order comparison despite the svg being appended after it in DOM order (remember the `selector`-token gotcha — .component-not_found is used explicitly for any component-scoped rule here rather than the bare `selector` keyword, which only substitutes when it's the WHOLE selector of a rule). */
.wc-404__inner{position:relative;z-index:1;width:100%;row-gap:1.5rem}.wc-404__heading{grid-column:1/11;grid-row:1;color:var(--verde);margin:0}.wc-404__heading .em{color:var(--gold);font-style:italic}.wc-404__description{grid-column:1/7;grid-row:2;color:rgba(236, 234, 226, 0.85);margin:0}.wc-404__cta{grid-column:1/4;grid-row:3;margin-top:1.5rem;width:fit-content}/* Brand glyph — a sibling of .wc-404__inner (NOT nested inside it, see the markup comment in index.php):positioned absolute against .wc-404__section (the full ~100svh wrapper, position:relative) rather than the content wrapper, so it can bleed off the bottom-right corner regardless of how tall the text content happens to be. Large, quiet background accent (echoes the footer's standalone glyph) — low opacity so it never competes with the headline or the draw-effect strokes. Purely decorative (aria-hidden in markup) — z-index:0 keeps it visually behind .wc-404__inner's z-index:1, and pointer-events:none means it never intercepts clicks/hover or the draw effect either. */
.wc-404__glyph{position:absolute;right:-4vw;bottom:-6vw;z-index:0;width:clamp(14rem, 26vw, 24rem);height:auto;aspect-ratio:300/277;fill:var(--verde);opacity:0.08;pointer-events:none}@media (max-width:699px){.wc-404__section{padding-block:6rem}.wc-404__heading{grid-column:1/5;font-size:clamp(2.5rem, 11vw, 3.5rem)}.wc-404__description{grid-column:1/5}.wc-404__cta{grid-column:1/5;width:100%}.wc-404__glyph{width:clamp(9rem, 40vw, 12rem);right:-8vw;bottom:-4vw}}.component-post_content{padding:4rem 0 6.25rem}@media (max-width:1000px){.component-post_content{padding:1.5rem 0 4rem}}.component-post_content > .inner{max-width:50rem}.component-vini{background:var(--green);color:var(--verde);overflow:hidden;padding-block:9rem}@media (max-width:699px){.component-vini{padding-block:5rem}}.vini__eyebrow{grid-column:1/4;color:var(--gold)}.vini__eyebrow svg{fill:var(--gold)}.vini__title{grid-column:1/10;color:var(--gold);margin:0 0 2rem}.vini__lead{grid-column:1/7;margin:0 0 4rem;color:var(--verde)}.vini__list{grid-column:1/13;border-top:1px solid rgba(236, 234, 226, 0.15);position:relative}.vini__row{display:grid;grid-template-columns:repeat(var(--cols), 1fr);column-gap:var(--gutter);align-items:center;padding-block:1.75rem;border-bottom:1px solid rgba(236, 234, 226, 0.15);position:relative;/* Rows 1–4 are decorative (cursor-follow thumb on hover) but are NOT clickable — default cursor everywhere. Only .vini__row--link (the Ēdienkarte row, an actual <a>) opts back into a pointer below. */ cursor:default}.vini__row-label{grid-column:1/9;color:var(--verde);margin:0;transition:transform 0.4s var(--ease-osmo), color 0.4s var(--ease-osmo);will-change:transform}.vini__row-tag{grid-column:11/13;text-align:right;color:rgba(236, 234, 226, 0.6)}.vini__row--link{cursor:pointer;text-decoration:none;min-height:44px;box-sizing:border-box}.vini__row--link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}@media (hover:hover) and (pointer:fine){.vini__row:hover .vini__row-label{transform:translateX(12px);color:var(--gold)}}.vini__row-thumb{display:none}.vini__floater{position:fixed;top:0;left:0;width:280px;height:360px;border-radius:2px;overflow:hidden;pointer-events:none;z-index:50;opacity:0;will-change:transform, opacity}.vini__floater img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity 0.25s ease}.vini__floater img.is-active{opacity:1}.vini__cta{grid-column:1/13;margin-top:4rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}/* v1.9.1:font-size moved to the shared .t-meta tier class (globals.scss, applied in index.php) — was hardcoded 0.9rem/14.4px here, untethered from any token and smaller than every other body-ish tier on the site (koncepts/komanda/kontakti's shared 17px body tier), which is the concrete instance of Eduards's "vini lead larger but its footnote smaller" observation. Now anchors to var(--t-small) like every other meta/small-tier element (stickers, tags, komanda position label). */
.vini__cta-note{flex-basis:100%;color:rgba(236, 234, 226, 0.6);margin:0.5rem 0 0}@media (max-width:1199px){.vini__floater{display:none}}@media (max-width:699px){.vini__eyebrow{grid-column:1/5}.vini__title{grid-column:1/5}.vini__lead{grid-column:1/5}.vini__row{grid-template-columns:repeat(4, 1fr);row-gap:1rem;padding-block:1.25rem}.vini__row-label{grid-column:1/5}.vini__row-tag{grid-column:1/5;text-align:left}.vini__row-thumb{display:block;grid-column:1/5;width:100%;height:46vw;max-height:220px;overflow:hidden;border-radius:2px;order:-1;margin-bottom:0.5rem}.vini__row-thumb img{width:100%;height:100%;object-fit:cover}}/* ============================================================================ Wine Collectors — theme style.scss (compiled LAST, after all components). Page-transition chrome + SplitText reveal plumbing + component base. ========================================================================== */
/* ---- Component base --------------------------------------------------------- Every builder section renders as <section class="component component-X">. Sections own their backgrounds;the barba container itself is opaque so the sticky footer un-curtain NEVER shows through gaps (spec v1.4 law). */
.component:not(.component-header){/* header is position:fixed (its own scss compiles BEFORE this file — equal specificity would let this rule win, hence the:not) */ position:relative}main[data-barba=container]{background:var(--verde)}.component:empty{display:none}/* When Lenis is active, disable native CSS smooth-scroll so the browser's smooth behaviour doesn't fight Lenis's per-frame scroll (jitter). */
html.lenis,
html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:auto !important}/* ---- Barba page transition chrome (theme part:parts/transition.php) --------- v1.9.1 REPLACES the old 5-tile .transition__panel row (each column-panel `top:-100%`, tweened in a `stagger:{each:0.06}` cascade) + the separate, entirely unrelated `.transition__lines` flourish (5 `border-right` divider divs, opacity 0 -> 0.1 toggled via a plain CSS class for a hardcoded 1000ms on every barba `enter` hook — leftover Osmo boilerplate, never actually integrated into a real designed transition). ROOT CAUSE of the client-reported "404 -> home shows a janky flash, some vertical lines appear, no real transition":confirmed via live probing — during the old sync leave/enter, the 5 staggered panel columns covered the viewport UNEVENLY (each offset by 0.06s from its neighbor, so at any instant some columns had reached the curtain position and others hadn't — visible seams), and simultaneously `.transition__lines` was active (opacity 0.1, 5 vertical border-right dividers) for the ENTIRE 1s window, completely unsynced with the panel stagger's own timing. That combination — uneven tiled curtain coverage + an unrelated set of low-opacity vertical dividers flashing on top of it — is exactly what read as "a janky flash, some vertical lines appear". FIX:one full-viewport element, ONE tween, no tiling/stagger, no second decorative layer. `.transition__lines`/`.transition__line` rules and their markup are removed outright (dead code, not just visually retired) since nothing referenced them for any other purpose. */
.transition{z-index:10000;pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100vh}.transition__curtain{background-color:#262d00;width:100%;height:100%;position:relative;/* Resting position:fully off-screen above the viewport (barba.js's runPageLeaveAnimation/runPageEnterAnimation tween `yPercent` between 0 here and 100 to cover/reveal — see that file for the full timeline). */ top:-100%}/* ---------------------------------------------------------------------------- Split-text (by line) reveal Text in the page body is split into lines and staggered up behind a mask on scroll-in (GSAP SplitText, see theme index.js initSplitText()). To avoid a flash of un-split text, each target is hidden while JS is present (html.has-split) UNTIL the splitter has processed it and set [data-split] (which happens only after the line mask is in place). Done per element so every page — including barba navigations — is covered, not just first load. Fallbacks:JS adds html.split-off (reduced-motion / no-GSAP / AUTOMATION MODE — navigator.webdriver renders everything in final state) and an inline failsafe in functions.php adds it after 2.5s, so text always shows if JS is off or fails. Footer/header are excluded in JS (closest()), not here.
---------------------------------------------------------------------------- */
/* NOTE:written as explicit nested selectors (no `:is()`). scssphp collapsed `main:is(...)` into `main:is(...)` (dropping the descendant combinator), so the rule matched nothing and the pre-hide silently never applied. */
html.has-split:not(.split-off) main h1:not([data-split]),
html.has-split:not(.split-off) main h2:not([data-split]),
html.has-split:not(.split-off) main h3:not([data-split]),
html.has-split:not(.split-off) main h4:not([data-split]),
html.has-split:not(.split-off) main h5:not([data-split]),
html.has-split:not(.split-off) main h6:not([data-split]),
html.has-split:not(.split-off) main .t-display:not([data-split]),
html.has-split:not(.split-off) main .t-h2:not([data-split]),
html.has-split:not(.split-off) main .t-h3:not([data-split]),
html.has-split:not(.split-off) main .t-lead:not([data-split]),
html.has-split:not(.split-off) main p.t-body:not([data-split]),
html.has-split:not(.split-off) main .content p:not([data-split]),
html.has-split:not(.split-off) main .content li:not([data-split]){opacity:0}@media (prefers-reduced-motion:reduce){html.has-split main h1, html.has-split main h2, html.has-split main h3, html.has-split main h4, html.has-split main h5, html.has-split main h6, html.has-split main .t-display, html.has-split main .t-h2, html.has-split main .t-h3, html.has-split main .t-lead, html.has-split main p.t-body, html.has-split main .content p, html.has-split main .content li{opacity:1 !important}}/* SplitText line wrappers:keep block flow + prevent the mask sliver from adding scroll width. The mask wrapper itself gets overflow from GSAP. The padding extends the mask beyond the line box on BOTH sides — 0.1em below for descenders, 0.12em above for ascending diacritics (Š/Ā/Č carons clip at tight line-heights — prototype v1.7.1 lesson) — and the matching negative margins compensate, so stacked line rhythm is unchanged (net height delta = 0 per line). margin values are explicit (with !important) because rich-text `* + *` sibling-spacing rules would otherwise add ~1em between the masks. */
.split-line{display:block;margin:0 !important}.split-line-mask{display:block;overflow:hidden;padding:0.12em 0 0.1em !important;margin:-0.12em 0 -0.1em !important}.component .split-line,
.component .split-line-mask,
.split-line,
.split-line-mask{color:inherit}.content ul:has(.split-line),
.content ol:has(.split-line){padding-left:0;margin-left:0;list-style-position:inside}.content li:has(.split-line){list-style:none}.content li:has(.split-line) .split-line-mask:first-child .split-line::before{content:"";display:inline-block;width:0.32em;height:0.32em;margin-right:0.6em;margin-bottom:0.18em;border-radius:50%;background:currentColor;vertical-align:middle}