= --text on --bg. --------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 990px) { html:has(.page-wrapper), html:has(.page-wrapper) body { height: auto; overflow: visible; } .page-wrapper { height: auto; overflow-y: visible; } } html.v7 body { font-family: Outfit, Lato, sans-serif; font-size: var(--fs-body); font-weight: 500; line-height: 1.5; -webkit-text-size-adjust: 100%; } /* html / body details of the Tailwind preflight that Horizon's base.css changes: no "slnt" variation axis, tab size, tap highlight, classic scrollbars (Horizon: thin) */ html.v7 { font-feature-settings: normal; font-variation-settings: normal; tab-size: 4; -webkit-tap-highlight-color: transparent; scrollbar-width: auto; scrollbar-color: auto; } html.v7 body { font-variation-settings: normal; } html.v7 #MainContent { color: var(--text); background-color: var(--bg); } /* --------------------------------------------------------------------------------------------------------------------- 4. Reset shim = Pipeline's reset, Tailwind CSS v3.4.3 "preflight" (live theme.css, the block that starts with "! tailwindcss v3.4.3"), 1:1 except for the scope: it applies inside the Batida regions of the page only (#MainContent, the header group, the footer, P4: the slide-in cart #batida-cart-drawer) and with :where() so its specificity stays exactly that of the original element selectors (0,0,0 / 0,0,1) - the live class rules keep winning over it. Horizon's own widgets (cart drawer, search modal, dialogs) outside those regions keep Horizon's reset. Not copied: the html/:host and body rules (section 3 does the equivalent), the :root --space-* scale (no Batida file uses it). --------------------------------------------------------------------------------------------------------------------- */ /* 9.10 (P7): scope also covers the elements the loyalty / account scripts append to (#loy-panel, #loy-launch = assets/batida-loyalty.js, .v7k-toast = batida-konto.js, .v7k-qm = batida-konto-quiz.js modal): on Pipeline the reset + element defaults applied to the whole page (loyalty panel list rows 3.5 px lower, svg baseline, button font) */ :where(#MainContent, #header-group, #footer-group, #shopify-section-batida-free-delivery-bar, .search--popdown, #batida-cart-drawer, #loy-panel, #loy-launch, .v7k-toast, .v7k-qm) { & *, & *::before, & *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; } & *::before, & *::after { --tw-content: ''; } & hr { height: 0; color: inherit; border-top-width: 1px; } & abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } & h1, & h2, & h3, & h4, & h5, & h6 { font-size: inherit; font-weight: inherit; } & a { color: inherit; text-decoration: inherit; } & b, & strong { font-weight: bolder; } & code, & kbd, & samp, & pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } & small { font-size: 80%; } & sub, & sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } & sub { bottom: -0.25em; } & sup { top: -0.5em; } & table { text-indent: 0; border-color: inherit; border-collapse: collapse; } & button, & input, & optgroup, & select, & textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } & button, & select { text-transform: none; } & button, & input:where([type='button']), & input:where([type='reset']), & input:where([type='submit']) { -webkit-appearance: button; background-color: transparent; background-image: none; } & :-moz-focusring { outline: auto; } & :-moz-ui-invalid { box-shadow: none; } & progress { vertical-align: baseline; } & *::-webkit-inner-spin-button, & *::-webkit-outer-spin-button { height: auto; } & [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } & *::-webkit-search-decoration { -webkit-appearance: none; } & *::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } & summary { display: list-item; } /* 9.10 (P7): Pipeline theme.css 5033 `blockquote, dl, main, nav, section, summary { display: block }` comes AFTER the preflight line above (3045), so a live

is a plain block (no disclosure marker) - measured live vs dev on Moje konto ("Pokaż całe menu"): live block, dev list-item */ & summary { display: block; } & blockquote, & dl, & dd, & h1, & h2, & h3, & h4, & h5, & h6, & hr, & figure, & p, & pre { margin: 0; } & fieldset { margin: 0; padding: 0; } & legend { padding: 0; } & ol, & ul, & menu { list-style: none; margin: 0; padding: 0; } & dialog { padding: 0; } & textarea { resize: vertical; } & input::-moz-placeholder, & textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } & input::placeholder, & textarea::placeholder { opacity: 1; color: #9ca3af; } & button, & [role="button"] { cursor: pointer; } & :disabled { cursor: default; } & img, & svg, & video, & canvas, & audio, & iframe, & embed, & object { display: block; vertical-align: middle; } & img, & video { max-width: 100%; height: auto; } & [hidden] { display: none; } } /* --------------------------------------------------------------------------------------------------------------------- 4b. Pipeline's element defaults (live theme.css "#HTML Standard Elements", "Lists", forms) - what a bare

,
,
, looks like inside the Batida regions, measured 1:1 on batida.pl (probe script in docs/horizon/README.md). Same scope and specificity as the reset. Plus three neutralisers for Horizon's own element rules (img {width:100%}, svg {max-width}, picture {display:block}), which the Pipeline pages never had. --------------------------------------------------------------------------------------------------------------------- / :where(#MainContent, #header-group, #footer-group, #shopify-section-batida-free-delivery-bar, .search--popdown, #batida-cart-drawer, #loy-panel, #loy-launch, .v7k-toast, .v7k-qm) { & h1, & h2, & h3, & h4, & h5, & h6 { font-family: Archivo, Outfit, sans-serif; font-style: normal; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 .75em; } & h1 { font-size: var(--pl-h1); line-height: 1.25; } & h2 { font-size: var(--pl-h2); line-height: 1.25; } & h3 { font-size: var(--pl-h3); line-height: 1.25; } & h4 { font-size: var(--pl-h4); line-height: 1.375; } & h5 { font-size: var(--pl-h5); line-height: 1.375; } & h6 { font-size: var(--pl-h6); line-height: 1.375; } & h1 a, & h2 a, & h3 a, & h4 a, & h5 a, & h6 a { text-decoration: none; font-weight: inherit; } & p { margin: 0; } & em { font-style: italic; } & b, & strong { font-weight: var(--FONT-WEIGHT-BODY-BOLD); } & small { font-size: var(--fs-small); line-height: 1.5; } & sup, & sub { position: relative; font-size: 10px; line-height: 1.625; vertical-align: baseline; } & sup { top: -.5em; } & sub { bottom: -.5em; } & s { text-decoration: line-through; opacity: .5; } & blockquote { font-size: var(--fs-quote); line-height: 1.375; font-style: italic; margin: 0 0 var(--gutter); padding: 0 var(--gutter); border-inline-start: 1px solid var(--border); } & hr { margin: var(--gutter) 0; border-top: 1px solid var(--border); } & ul, & ol { margin: 0 0 var(--gutter); padding: 0; } & ul { list-style: none outside; } & ol { list-style: decimal; margin-left: var(--gutter); } & li { margin-bottom: .25em; } & label { display: block; } / 8.10 (P2/P5): exactly the input types Pipeline styled (theme.css "Input width and border": text, search, password, email, file, number, tel, url, date) - a range slider (paczka), colour, hidden ... stay as the browser draws them / & input:is([type=text], [type=search], [type=password], [type=email], [type=file], [type=number], [type=tel], [type=url], [type=date]), & textarea, & select { display: block; width: 100%; max-width: 100%; margin: 0 0 1em; padding: 8px 10px; font-size: var(--fs-body); line-height: 1.42; color: #1F4054; background: transparent; border: 1px solid var(--border); border-radius: 3px; -webkit-appearance: none; appearance: none; } & textarea { min-height: 100px; } & select { padding-right: 28px; cursor: pointer; } / 9.10 (P7): width / height `revert` instead of 13px: Pipeline set none, the native box is 13px by itself, and a rule with inset (Moje konto toggle `.v7k-switch input` { position: absolute; inset: 0 } = 46 x 26 click area) must still stretch; 13px stopped it (live 46x26, dev 13x13) / & input[type=checkbox], & input[type=radio] { width: revert; height: revert; -webkit-appearance: auto; appearance: auto; border-style: none; / 8.10 (P2/P5): Horizon's own checkbox / radio rules (base.css, :where()) - positioned, centred, square, background - undone: Pipeline drew the native control / position: static; vertical-align: baseline; aspect-ratio: auto; background-color: transparent; } & button, & input[type=submit] { white-space: nowrap; text-overflow: ellipsis; color: inherit; -webkit-appearance: none; appearance: none; } & table { width: 100%; } & th { padding: 20px 20px 20px 0; text-align: start; } & td { padding: 20px 0 20px 20px; } / 8.10 (P2/P5): Pipeline had NO width rule on img, so the HTML width="362" of a picture in a text (collection description) counted; Horizon's base.css img { width: 100% } beats that attribute, and "width: auto" would ignore it too. attr() hands the attribute back (Chrome 133+); older browsers get auto (natural size, clamped by max-width) / & img { border-style: none; width: auto; } @supports (width: attr(width px, auto)) { & img[width] { width: attr(width px, auto); } } & svg { max-width: none; } & picture { display: inline; } / 8.10 (P2/P5): Horizon's base.css styles every
(flex, centred, padding-block, colour on hover); on Pipeline a
was a plain block with the section's own rules (FAQ rows, "Wszystkie kategorie") / & summary { align-items: normal; padding-block: 0; } & summary:hover { color: inherit; } / 9.10 (P4, the cart): more Pipeline element defaults the cart (and any v7 form) was built against, measured live vs dev on /cart with compare-cart.js --styles: forms keep Pipeline's bottom margin (theme.css `form { margin-bottom: var(--gutter) } form:last-child { margin-bottom: 0 }`, as P1 did for the chrome), inputs / textareas / selects never overflow their box (max-width 100%, also the ones without a type attribute), an empty
still takes its box (Horizon: display none), the checkbox / radio line height + colour + cursor (Horizon: pointer),