/* batida-pdp-overlays.css (8.10.2026, Horizon P3): the body-level elements of the product page that are not visible at load: sticky add-to-cart bars (#batida-sticky-atc, #batida-sticky-atc-d), the v7 fullscreen gallery (.v7g), the info modals (#batida-perso-modal, #batida-autofill-modal), the map modal (.bphm moves to when opened). GENERATED by docs/horizon/build-pdp-css.py, see batida-pdp.css. Load AFTER batida-pdp.css (async is fine). Rules that style these elements AND #MainContent live in batida-pdp.css (their :where() list names the overlay roots too). The reset block at the top is base.css 4 / 4b re-scoped to the overlay roots (they sit outside #MainContent, so the reset of base.css does not reach them): delete it if base.css gets the overlay roots in its :where() list. */ :where(#batida-sticky-atc, #batida-sticky-atc-d, .v7g, #batida-perso-modal, #batida-autofill-modal, .pswp, .bphm) { & *, & *::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; } & 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; } } :where(#batida-sticky-atc, #batida-sticky-atc-d, .v7g, #batida-perso-modal, #batida-autofill-modal, .pswp, .bphm) { & 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; } & input[type=checkbox], & input[type=radio] { width: 13px; height: 13px; -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; } } /* ---- theme.css (live sheet #3, 1 rules) ---- */ :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) [data-sliderule-pane] [data-animates].is-visible{opacity:1;transform:translateY(0px);} /* ---- custom.css (live sheet #4, 10 rules) ---- */ .batida-perso-modal-backdrop{position:fixed;inset:0px;background:rgba(43,32,23,0.55);display:flex;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity 0.18s;} .batida-perso-modal-backdrop.is-open{opacity:1;pointer-events:auto;} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal{background:rgb(255,255,255);border-radius:10px;padding:20px;max-width:320px;width:90%;position:relative;box-shadow:rgba(43,32,23,0.2) 0px 12px 40px;transform:scale(0.95);transition:transform 0.18s;font-family:inherit;} .batida-perso-modal-backdrop.is-open .batida-perso-modal{transform:scale(1);} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal__close{position:absolute;top:10px;right:10px;width:28px;height:28px;background:rgb(250,247,242);border-width:medium;border-style:none;border-color:currentcolor;border-image:none;border-radius:50%;cursor:pointer;font-size:18px;color:rgb(90,74,62);display:flex;align-items:center;justify-content:center;line-height:1;padding:0px;z-index:1;} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal__close:hover{background:rgb(227,213,202);color:rgb(43,32,23);} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal__image{width:100%;aspect-ratio:1 / 1;border-radius:6px;margin-bottom:14px;object-fit:cover;background:rgb(243,237,229);display:block;} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal__title{font-size:15px;font-weight:500;color:rgb(43,32,23);margin:0px 0px 4px;} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal__price{font-size:13px;color:rgb(90,74,62);font-weight:500;margin:0px 0px 10px;} :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-perso-modal__desc{font-size:12px;color:rgb(90,74,62);line-height:1.5;margin:0px;} /* ---- batida-b2c.css (live sheet #7, 8 rules) ---- */ html.is-b2c-host :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-sticky-atc__cta{font-family:Outfit,Lato,sans-serif;font-weight:700;background:var(--v7-ink,#1A1512) !important;border-radius:999px !important;color:rgb(255,255,255) !important;} html.is-b2c-host :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-sticky-atc__cta:hover:not(:disabled){background:rgb(58,50,45) !important;} html.is-b2c-host :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-sticky-atc__price{font-family:Outfit,Lato,sans-serif;font-weight:700;color:var(--v7-ink,#1A1512);} html.is-b2c-host .batida-sticky-atc{background:rgba(250,247,242,0.97) !important;} html.is-b2c-host :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .bsd-cta{border-radius:999px !important;padding-left:26px !important;padding-right:26px !important;} html.is-b2c-host #batida-sticky-atc-d .bsd-cta{font-family:Outfit,Lato,sans-serif;font-weight:700;background:var(--v7-ink,#1A1512) !important;color:rgb(255,255,255) !important;} html.is-b2c-host #batida-sticky-atc-d .bsd-cta:hover:not(:disabled){background:rgb(58,50,45) !important;} html.is-b2c-host #batida-sticky-atc-d .bsd-cta:disabled{background:rgb(201,188,174) !important;} /* ---- batida-v7.css (live sheet #9, 5 rules) ---- */ html.v7 :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-sticky-atc__cta{background:var(--v7-rasp,#B84A52) !important;border-color:var(--v7-rasp,#B84A52) !important;color:rgb(255,255,255) !important;text-transform:none !important;letter-spacing:0px !important;font-weight:600 !important;border-radius:999px !important;} html.v7 :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .batida-sticky-atc__cta__arrow{display:none !important;} html.v7 :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .bsd-cta:not(:disabled){background:var(--v7-rasp,#B84A52) !important;color:rgb(255,255,255) !important;text-transform:none !important;letter-spacing:0px !important;font-weight:600 !important;border-radius:999px !important;} html.v7 :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .bsd-cta:not(:disabled):hover{background:rgb(158,61,69) !important;} html.v7 :where(#batida-sticky-atc,#batida-sticky-atc-d,.v7g,#batida-perso-modal,#batida-autofill-modal,.pswp,.bphm) .bsd-cta{text-transform:none !important;letter-spacing:0px !important;} /* ---- styles.css (live sheet #16, 1 rules) ---- */ @media (max-width:767px){body:has(.batida-sticky-atc.is-visible) shopify-chat::part(activator){transform:translateY(-82px);}}