/* Theme Name: Folia Flowers Theme URI: https://folia.flowers Author: Folia Flowers Author URI: https://folia.flowers Description: Stylish design with delicate colors and responsive layout for mobile devices. Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.0 Version: 1.0 Text Domain: folia.flowers Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news */ :where(.wp-site-blocks *:focus) { outline-width: 0 !important; outline-style: none !important; } /* The compact header's action icons (below 1024px) as one set (owner, 2026-11-05: * «these icons have different sizes and spacing»). They come from three sources: * the search plugin's magnifier (a heavy filled glyph that fills its whole box), * our heart (a 1.6 stroke in a 24-unit box) and WooCommerce's cart (2-unit lines * in a 32-unit box, the glyph only 21 units of it). Sized so each glyph is drawn * about 21px tall with lines about 2px thick: search 21px, heart 28px, cart 32px. * Each sits centred in a 28px-wide slot, like the menu button, and the row's gap * (with the favourites heart, below) makes the drawn spaces between search, heart, * cart and the menu button equal. The AJAX-search plugin caps its icon via plain * class rules, hence !important. The desktop header keeps its own sizing. */ @media (max-width: 1023px) { .folia-phone-call svg { width: 28px !important; height: 28px !important; } .folia-header-right .dgwt-wcas-search-wrapp { width: 28px !important; min-width: 28px !important; max-width: 28px !important; } /* Only in the header: when the search opens, the plugin moves this wrapper into its panel and hides the icon there (a forced display showed it above the field). */ .folia-header-right .dgwt-wcas-search-icon { display: flex !important; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; max-width: none !important; } /* margin 0: the plugin's -0.2em bottom margin dropped the glyph 2px below the others */ .folia-header-right .dgwt-wcas-search-icon svg { width: 21px !important; height: 21px !important; max-width: none !important; margin: 0 !important; } .folia-header-right .dgwt-wcas-search-icon svg path { fill: #1e1e1e !important; } /* the ink of the heart and cart, not #000 */ /* The 32px box keeps a 28x30 footprint, so the slot is 28px and the button stays 48px tall. */ .wc-block-mini-cart__button svg { width: 32px !important; height: 32px !important; margin: -1px -2px !important; } .wp-block-navigation__responsive-container-open svg { width: 28px !important; height: 28px !important; } } /* The phone search panel (the search plugin's mobile overlay; owner, 2026-11-05: * «Search panel looks ugly», then «It is not in the style of the whole site»), in * the site's modern look ("Buttons and fields everywhere" below): a 72px bar with * the site's hairline; a round back button; the field like every other field (50px, * radius 10, a grey edge, a dark edge and a ring while typing) with a light * magnifier in it and a light «×»; section labels in normal case; categories as * rounded chips; products as rows like the favourites drawer (rounded photo, name, * price in 600); «Zobacz wszystkie produkty» as the site's dark rounded button. * The plugin marks some of its own rules !important, so these do too. The * computer dropdown is not touched. */ .dgwt-wcas-overlay-mobile { font-family: inherit; color: var(--folia-ink); } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar { height: 72px !important; align-items: center; gap: 6px; padding: 0 16px 0 6px; border-bottom: 1px solid var(--folia-line); background: #fff; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return { flex: 0 0 44px; width: 44px !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 999px !important; background: transparent !important; transition: background-color .15s ease; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return:active { background: var(--folia-soft) !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return svg { position: static !important; width: 20px !important; height: 20px !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar button.dgwt-wcas-om-return path { fill: var(--folia-ink) !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp-mobile { flex: 1 1 auto; width: auto !important; min-width: 0; } .dgwt-wcas-overlay-mobile .dgwt-wcas-sf-wrapp { position: relative; padding: 0 !important; background: transparent !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp-mobile input[type=search].dgwt-wcas-search-input { height: 50px !important; padding: 0 44px 0 42px !important; border: 1px solid var(--folia-field) !important; border-radius: var(--folia-r-field) !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px !important; box-shadow: none !important; font-family: inherit !important; font-size: 16px !important; color: var(--folia-text); transition: border-color .15s ease, box-shadow .15s ease; } .dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp-mobile input[type=search].dgwt-wcas-search-input:focus, .dgwt-wcas-overlay-mobile .dgwt-wcas-search-wrapp-mobile.dgwt-wcas-search-focused input[type=search].dgwt-wcas-search-input { border-color: var(--folia-ink) !important; box-shadow: var(--folia-ring) !important; outline: none; } .dgwt-wcas-overlay-mobile input[type=search].dgwt-wcas-search-input::placeholder { color: var(--folia-muted); opacity: 1; } /* The clear «×» (and the loading spinner in its place) inside the field, at its right, light. */ .dgwt-wcas-overlay-mobile .dgwt-wcas-sf-wrapp .dgwt-wcas-preloader { right: 4px !important; top: 0 !important; height: 50px !important; width: 40px !important; margin: 0 !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-sf-wrapp .dgwt-wcas-close svg { width: 14px !important; height: 14px !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-sf-wrapp .dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) path { fill: var(--folia-muted) !important; } html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestions-wrapp { top: 72px !important; height: calc(100% - 72px) !important; max-height: none !important; padding: 8px 16px 32px !important; border: 0 !important; box-shadow: none !important; background: #fff; } html.dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestions-wrapp { height: auto !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion, .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion * { text-decoration: none !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion { padding: 12px 0 !important; border: 0 !important; background: transparent; color: var(--folia-ink); font-size: 16px; line-height: 1.3; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-selected { background: var(--folia-soft) !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-headline { padding: 18px 0 10px !important; pointer-events: none; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-headline .dgwt-wcas-st { padding: 0 !important; border: 0 !important; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none !important; color: var(--folia-muted); } /* Categories: rounded chips side by side, the parent category light after the name. A long name wraps inside its chip rather than being cut: two cut names could read the same («…«Pink O'Hara»» and «…«White O'Hara»»). */ .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-tax { display: inline-flex !important; align-items: center; width: auto !important; max-width: 100%; min-height: 38px; margin: 0 8px 8px 0; padding: 8px 14px !important; border: 1px solid var(--folia-field) !important; border-radius: 19px; background: #fff; font-size: 15px; line-height: 20px; vertical-align: top; transition: background-color .15s ease, border-color .15s ease; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-tax .dgwt-wcas-st { padding: 0 !important; white-space: normal; overflow-wrap: anywhere; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-tax.dgwt-wcas-suggestion-selected { border-color: var(--folia-hover) !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-st-breadcrumbs { display: inline; margin-left: 6px; font-size: 13px; color: var(--folia-muted); } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-product { display: flex !important; align-items: center; gap: 14px; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-product + .dgwt-wcas-suggestion-product { border-top: 1px solid var(--folia-line) !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-si { flex: 0 0 64px; width: 64px !important; height: 64px; margin: 0 !important; padding: 0 !important; border-radius: var(--folia-r-field); overflow: hidden; background: var(--folia-soft); } .dgwt-wcas-overlay-mobile .dgwt-wcas-si img { display: block; width: 64px !important; height: 64px !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--folia-r-field); object-fit: cover; } .dgwt-wcas-overlay-mobile .dgwt-wcas-content-wrapp { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: center; gap: 4px; height: auto !important; padding: 0 !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-st-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; line-height: 1.3; color: var(--folia-ink); } .dgwt-wcas-overlay-mobile .dgwt-wcas-st-title strong { font-weight: 600; } .dgwt-wcas-overlay-mobile .dgwt-wcas-meta { width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* The plugin right-aligns the price and, with photos, puts each part of a range («155,00 zł», «–», «1535,00 zł») on its own line. */ .dgwt-wcas-overlay-mobile .dgwt-wcas-sp { display: block; padding-left: 0 !important; text-align: left !important; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--folia-ink); white-space: nowrap; } .dgwt-wcas-overlay-mobile .dgwt-wcas-sp > * { display: inline !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-sp del { margin-right: 6px; font-weight: 400; color: var(--folia-muted); } .dgwt-wcas-overlay-mobile .dgwt-wcas-sp ins { text-decoration: none; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-more { display: flex !important; align-items: center; justify-content: center; height: 50px; margin: 16px 0 0; padding: 0 16px !important; border: 0 !important; border-radius: 12px; background: var(--folia-ink) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); text-align: center; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected { background: #3f3f46 !important; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-more .dgwt-wcas-st-more { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none !important; color: #fff; } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-more .dgwt-wcas-st-more-total { margin-left: 4px; font-weight: 400; color: rgba(255, 255, 255, .7); } .dgwt-wcas-overlay-mobile .dgwt-wcas-suggestion-nores { padding: 20px 0 !important; color: var(--folia-muted); font-size: 15px; white-space: normal; } .delivery_date_wrapper, .delivery_time_wrapper { position: relative; display: inline-grid; height: 50px; } /* Date and time on the checkout field rhythm (2026-09-26). Both controls computed * to 52px inside 50px wrappers, and the select added a 4px top margin, so the time * select hung 6px out of its step: the gap to "Dane kontaktowe odbiorcy" below read * as 12px against 18/26px between every other pair of steps. They also sat 20px * apart where every other row is 12px, and were 2px taller than the fields around * them. Measured on staging at 390px and 1280px. The 20px gap and 52px height come * from src/input.css (compiled into tailwind.css), whose selector carries the * #delivery_datetime_fields id, so the id is repeated here to outrank it. */ body .folia-checkout #delivery_datetime_fields .delivery_datetime_grid { gap: 12px; } body .folia-checkout #delivery_date, body .folia-checkout #delivery_time { height: 50px; margin-top: 0; box-sizing: border-box; } .delivery_date_wrapper label, .delivery_time_wrapper label { font-size: 14px; color: hsla(0,0%,7%,.7); margin: 0; } .delivery_time_wrapper select { margin-top: 4px; font-size: 17px; } .category-list a { font-weight: 300; text-decoration: none; } /* Legal pages (Shop rules / Privacy policy). Their dedicated templates drop the * content directly under the header, and the header logo — a 180px circle that * overflows the short (~114px) header box — was overlapping the page title. Give * the header a min-height that contains the logo so content always flows below it * (viewport-independent, unlike a fixed margin). Also trim the shop-rules * template's oversized 218px pre-footer spacer to 64px. Scoped by the per-page * body classes, which are consistent across all languages. Computers only: below * 1024px the logo is a small one inside the slim sticky bar, which keeps its height. */ @media (min-width: 1024px) { body.page-template-shop-rules .folia-site-header, body.privacy-policy .folia-site-header { min-height: 210px !important; } } body.page-template-shop-rules .wp-block-spacer { height: 64px !important; } /* Cart page summary card (folia/cart block): groups the estimated total + the * "Proceed to checkout" button into a grey card, matching the item cards and the * checkout summary. Defined here (not Tailwind) because the theme's Tailwind build * is JIT-purged and the arbitrary padding/width utilities aren't compiled. */ .folia-cart-summary { width: 100%; background: #f3f3f3; padding: 24px; display: flex; flex-direction: column; gap: 20px; } @media (min-width: 1024px) { .folia-cart-summary { width: 360px; flex-shrink: 0; margin-left: auto; /* keep it right-aligned, incl. when coupons are off */ padding: 32px; } } /* (768px - 1199px) */ @media (max-width: 1199px) { .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(50% - .83333em)), 1fr)); } } /* (576px - 767px) */ @media (max-width: 767px) { .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(50% - .83333em)), 1fr)); } } @media (max-width: 525px) { .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(100% - .83333em)), 1fr)); } } /* * Page titles that sit directly under the header: the site-header logo overflows * its container and was sitting flush against (overlapping) these headings, which * made them look garbled. Add top clearance so the title clears the logo. * Affected pages: checkout (.folia-checkout__title) and cart (.folia-block-cart h1). * Other pages (shop, about, contacts, faq) already have ample clearance. */ .folia-checkout__title, .folia-block-cart h1 { margin-top: clamp(2.5rem, 9vw, 4rem) !important; } /* * Checkout delivery-method toggle (WooCommerce "Shipping method" block): two * cards (icon + title, then a price/description line). WooCommerce sizes the * price line with `flex: 0 1 100%`, which on narrow (mobile) widths lets the * longer translated labels — "вычисляется по адресу" / "БЕСПЛАТНО" (ru), * "розраховується за адресою" (uk), even EN "calculated with an address" — * overflow the card and spill into/past the neighbouring card. Constrain the * card contents and let the price wrap and centre inside its own card. */ .wc-block-checkout__shipping-method-container { flex-wrap: wrap; } .wc-block-checkout__shipping-method-option { overflow: hidden; min-width: 0; } .wc-block-checkout__shipping-method-option-title-wrapper, .wc-block-checkout__shipping-method-option-title, .wc-block-checkout__shipping-method-option-price { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center; } .wc-block-checkout__shipping-method-option-price { flex: 0 1 auto !important; } /* * Checkout polish (2026-06-26). Targeted refinements to the WooCommerce block * checkout — see also the heavy base styling compiled into assets/css/tailwind.css. */ /* 1. Desktop: order summary as a sticky card on the RIGHT (the base theme places * it in a cramped narrow column on the left). Mobile keeps the stacked, * summary-on-top order, so the Place Order button still follows the summary. */ /* NB: extra `body` qualifier — main-style (style.css) is enqueued BEFORE the * compiled tailwind.css, which sets `order:1 !important` on the sidebar at equal * specificity, so we need a more specific selector to win the swap. */ @media (min-width: 1024px) { body .folia-checkout .wc-block-checkout__sidebar { order: 2 !important; position: sticky; top: 24px; align-self: flex-start; } body .folia-checkout .wc-block-checkout__main { order: 1 !important; } } /* 2. Tone down the oversized checkout headings so they stop crowding the form. */ .folia-checkout .folia-checkout__title { font-size: clamp(28px, 4vw, 42px) !important; } .folia-checkout .wc-block-components-checkout-step__title { font-size: clamp(20px, 1.7vw, 25px) !important; } .folia-checkout .wc-block-components-checkout-step__description { margin-bottom: 12px !important; } /* The checkout's single address form is the INVOICE (pickup) or the DELIVERY address, and customers always type their real town — any town for the invoice; Warsaw or a covered suburb (Piaseczno, Pruszków, …) for delivery, where the postcode zones gate the area. So always show the City field that input.css would otherwise hide; the leading `body` raises specificity above that hide rule so this wins regardless of prod CSS source-order. */ body .folia-checkout .wc-block-components-address-form__city { display: block !important; } /* Delivery town dropdown (folia-delivery-towns.js): a restricted is in place. WooCommerce parks the resting label dead-centre of the field (top:25px, translateY(-50%)) and only lifts it to top:6px when the wrapper gets `.is-active` — a class React derives from the INPUT's value. folia-delivery-towns.js hides that input and leaves it empty, so the label would never lift, yet the select beneath it always shows text (the placeholder, or the chosen town). The two then overlap on top of each other. Keyed off `:has(.folia-town-select)` rather than adding `.is-active` from JS on purpose: that class is React-owned, so a re-render would strip it straight back off and we would be fighting the re-render loop for a purely visual state. The select's 24px top padding above keeps its text clear of the lifted label; both sit at left:10px so the field aligns with its neighbours. */ body .folia-checkout .wc-block-components-text-input:has(.folia-town-select) label { top: 6px; transform: scale(0.82); } /* Match the "Order summary" heading to the section-step titles above (was 16.8px), * so it reads as a peer section heading — most visible on mobile where the summary * now sits inline between Additional and Payment. `body` prefix beats tailwind. */ body .folia-checkout .wc-block-components-checkout-order-summary__title-text { font-size: clamp(20px, 1.7vw, 25px) !important; } /* Order-summary "Total" row: it is the emphasized grand total, NOT a section * header, so keep it below the section-title size (20px / 24.48px desktop) yet * above the 16px Subtotal/shipping rows. 18px reads as the emphasized total * without competing with the headings. */ body .folia-checkout .wc-block-components-totals-footer-item, body .folia-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body .folia-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, body .folia-checkout .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount { font-size: 18px !important; } /* 3. Drop the per-unit price printed under each order-summary line — it duplicates * the line total whenever quantity is 1 (the usual case), which read as a glitch. */ .folia-checkout .wc-block-components-order-summary-item__individual-prices { display: none !important; } /* 4. Hide PayU's mini-installments widget on the ru/uk storefronts: it is a Polish * financing product rendered by PayU's own script in Polish ("Rata 0% już od …"), * which can't be translated from WordPress and is irrelevant to non-PL customers. */ html[lang^="ru"] #installment-mini-block, html[lang^="uk"] #installment-mini-block { display: none !important; } /* * Payment options redesign (2026-06-26). The WooCommerce block highlight-checked * radio control only boxes the selected method and leaves the rest barely * delineated, scatters the gateway logos, and draws stray ::after dividers. * Restyle every method as a consistent card with aligned logos and a clean * selected/hover state. `body` prefix raises specificity over the compiled * tailwind.css rules (which load after this file). See gotcha: style.css before tailwind. */ body .folia-checkout .wc-block-components-radio-control { display: flex; flex-direction: column; gap: 10px; } /* drop WooCommerce's default divider pseudo-elements that clash with the cards */ body .folia-checkout .wc-block-components-radio-control::after, body .folia-checkout .wc-block-components-radio-control-accordion-option::after { display: none !important; } /* each method = a card (wrapper holds the row + its expanded description) */ body .folia-checkout .wc-block-components-radio-control-accordion-option { border: 1px solid #dcdcdc !important; margin: 0 !important; background: #fff; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } /* Mouse/trackpad only: on a touch screen a tap leaves the row "hovered", so an option the shopper merely touched (or one under a tapped spot) looked chosen. */ @media (hover: hover) { body .folia-checkout .wc-block-components-radio-control-accordion-option:hover { border-color: #1e1e1e !important; } } body .folia-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: #1e1e1e !important; background: #fafafa; box-shadow: inset 0 0 0 1px #1e1e1e; } /* inner clickable row: no own border, keep room for the radio at left */ body .folia-checkout .wc-block-components-radio-control__option { border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 20px 22px 20px 54px !important; background: transparent !important; } /* label row: text left, logo hard-right and aligned across all methods */ body .folia-checkout .wc-block-components-radio-control__label { display: flex !important; align-items: center; gap: 16px; width: 100% !important; } body .folia-checkout .wc-block-components-payment-method-label { flex: 1 1 auto; font-size: 16px; } body .folia-checkout .wc-block-components-radio-control__label > :last-child { flex: 0 0 auto !important; margin-left: auto !important; width: auto !important; display: inline-flex !important; align-items: center; justify-content: flex-end; } /* the Stripe (Credit/Debit) method wraps text+icon in one span — make THAT the * full-width space-between row instead of letting it get shoved right */ body .folia-checkout .wc-block-components-radio-control__label > span:only-child { margin-left: 0 !important; flex: 1 1 auto !important; width: 100% !important; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; } body .folia-checkout .wc-block-components-radio-control__label img { max-height: 24px; width: auto; display: block; } /* the selected method's hint text, tucked under the row */ body .folia-checkout .wc-block-components-radio-control-accordion-content { padding: 0 22px 18px 54px !important; color: #6b6b6b; font-size: 14px; } /* * Payment block, calm and unified (2026-09-26). Reviewed from a phone * screenshot: the block had become the loudest part of an otherwise quiet form. * * - Selected cards: 1px ink border on white, for payment, delivery and pickup * alike. The 2px border plus #fafafa fill put the Stripe list (white, with its * own borders) inside a grey box inside a black box. * - On phones the selected method's content drops WooCommerce's 54px indent, * which squeezed Stripe's Karta / Przelewy24 list to 265px of a 343px card. * - "Ekspresowa kasa" loses the frame with its title cut into the border and * becomes a caption above the buttons, like "Kontakt do odbiorcy". * Stripe renders the wallet buttons and the method list in its own iframes; * only their surroundings are styled here. */ body .folia-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted, body .folia-checkout .wc-block-checkout__shipping-method-option--selected, body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__option--checked-option-highlighted { background: #fff !important; box-shadow: none !important; } @media (max-width: 480px) { body .folia-checkout .wc-block-components-radio-control-accordion-content { padding: 0 16px 16px !important; } } body .folia-checkout .wc-block-components-express-payment__title-container { position: static !important; display: block !important; margin: 0 0 8px !important; } body .folia-checkout .wc-block-components-express-payment__title-container::before, body .folia-checkout .wc-block-components-express-payment__title-container::after { display: none !important; } body .folia-checkout .wc-block-components-express-payment__title { /* WooCommerce lifts the title by translateY(-50%) to sit on the frame's top edge; with no frame that left it 22px under the heading (32 elsewhere) and 18px above the buttons instead of 8. */ transform: none !important; font-size: 14px !important; font-weight: 400 !important; color: #1e1e1e !important; text-align: left !important; padding: 0 !important; background: none !important; } body .folia-checkout .wc-block-components-express-payment__content { border: 0 !important; padding: 0 !important; margin: 0 !important; } /* The express block and the method list below it are two ways to pay under one * heading; 24px apart reads as a pair, not as two sections. */ body .folia-checkout .wc-block-checkout__payment-method .wc-block-components-express-payment { margin: 0 0 24px !important; } /* * Delivery (Ship / Pickup) toggle restyle (2026-06-26). Match the payment-card * aesthetic: the base theme boxed only the selected card heavily and left the * other faint, with a lot of empty vertical space. Give both a consistent light * border, a refined selected state (subtle fill + dark border), tighter padding, * a clearer title, and muted secondary text. See also the earlier overflow fix * for long ru/uk labels. `body` prefix raises specificity over tailwind.css. */ body .folia-checkout .wc-block-checkout__shipping-method-container { gap: 10px !important; } body .folia-checkout .wc-block-checkout__shipping-method-option { border: 1px solid #dcdcdc !important; min-height: 0 !important; padding: 18px 16px !important; gap: 8px !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } body .folia-checkout .wc-block-checkout__shipping-method-option:hover { border-color: #1e1e1e !important; } body .folia-checkout .wc-block-checkout__shipping-method-option--selected { border-color: #1e1e1e !important; background: #fafafa; box-shadow: inset 0 0 0 1px #1e1e1e; } body .folia-checkout .wc-block-checkout__shipping-method-option-title-wrapper { gap: 8px !important; } body .folia-checkout .wc-block-checkout__shipping-method-option-title { font-size: 17px; font-weight: 600; } body .folia-checkout .wc-block-checkout__shipping-method-option-price { font-size: 13px !important; color: #777 !important; line-height: 1.3; } body .folia-checkout .wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-price { color: #1e1e1e !important; } body .folia-checkout .wc-block-checkout__shipping-method-option-price em { font-style: normal; font-weight: 600; } /* * Pickup locations block (2026-06-26). It reuses the same radio-control classes * as the payment options, so the payment restyle above stripped its border and * left it as a bare row — the one section not in a card. Re-card the pickup * option (scoped to .wc-block-checkout__pickup-options so it doesn't disturb the * payment list): name left, price right, address muted below, same selected / * hover treatment as the delivery and payment cards. */ body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__option { border: 1px solid #dcdcdc !important; background: #fff !important; box-shadow: none !important; margin: 0 !important; padding: 18px 22px 18px 54px !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__option:hover { border-color: #1e1e1e !important; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__option--checked-option-highlighted { border-color: #1e1e1e !important; background: #fafafa !important; box-shadow: inset 0 0 0 1px #1e1e1e !important; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__label-group { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__label { display: inline !important; width: auto !important; flex: 1 1 auto; font-size: 16px; font-weight: 600; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__secondary-label { margin-left: auto !important; flex: 0 0 auto; color: #1e1e1e; white-space: nowrap; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__secondary-label em { font-style: normal; font-weight: 600; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__description { color: #777 !important; font-size: 13px !important; } /* * "Additional" section heading above the order-note block (2026-06-26). The * WooCommerce order-note ("Add a note to your order") sat loose at the bottom of * the form with no heading. Give it a section title matching the other checkout * step titles, via a ::before (the block is React-rendered, so a CSS heading is * the reliable route). Per-language content; \uXXXX escapes keep it ASCII-safe. * display:block needs !important — the checkout-step hides its ::before otherwise. */ body .folia-checkout .wc-block-checkout__order-notes { margin-top: 0; } body .folia-checkout .wc-block-checkout__order-notes::before { content: "Additional"; display: block !important; font-family: inherit; font-size: clamp(20px, 1.7vw, 25px); font-weight: 300; /* match the other section titles (was 400, read as darker/bolder) */ color: #1e1e1e; line-height: 1.2; margin-bottom: 16px; } html[lang^="ru"] body .folia-checkout .wc-block-checkout__order-notes::before { content: "\0414\043E\043F\043E\043B\043D\0438\0442\0435\043B\044C\043D\043E"; } /* Дополнительно */ html[lang^="uk"] body .folia-checkout .wc-block-checkout__order-notes::before { content: "\0414\043E\0434\0430\0442\043A\043E\0432\043E"; } /* Додатково */ html[lang^="pl"] body .folia-checkout .wc-block-checkout__order-notes::before { content: "Dodatkowo"; } /* One section, not two, with the invoice box LAST (2026-09-26). WooCommerce * renders the VAT checkbox in its own "Dodatkowe informacje o zamówieniu" step, * which comes BEFORE this one, so the page read as two headings in a row with a * single checkbox between them. The VAT step is now ordered after this one (see * the numbering below) and its own heading is hidden; this block carries the * section title instead, so the list reads: gift message, anonymous, photo, * order note, invoice. The screen-reader legend of the VAT step is untouched. * The title is WooCommerce's own wording, per language, because it now heads the * invoice box as well as the gift options. In the Cyrillic titles the spaces * are escaped too (\000020): CSS swallows one whitespace after any escape as * its terminator, which ran the words together. Without :has() the original two * headings and order stay: worse, not broken. */ body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-fields) > .wc-block-checkout__order-notes::before { content: "Additional order information"; } html[lang^="ru"] body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-fields) > .wc-block-checkout__order-notes::before { content: "\000414\00043E\00043F\00043E\00043B\00043D\000438\000442\000435\00043B\00044C\00043D\000430\00044F\000020\000438\00043D\000444\00043E\000440\00043C\000430\000446\000438\00044F\000020\00043E\000020\000437\000430\00043A\000430\000437\000435"; } /* Дополнительная информация о заказе */ html[lang^="uk"] body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-fields) > .wc-block-checkout__order-notes::before { content: "\000414\00043E\000434\000430\000442\00043A\00043E\000432\000430\000020\000456\00043D\000444\00043E\000440\00043C\000430\000446\000456\00044F\000020\00043F\000440\00043E\000020\000437\000430\00043C\00043E\000432\00043B\000435\00043D\00043D\00044F"; } /* Додаткова інформація про замовлення */ html[lang^="pl"] body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-fields) > .wc-block-checkout__order-notes::before { content: "Dodatkowe informacje o zam\00F3wieniu"; } html[lang^="es"] body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-fields) > .wc-block-checkout__order-notes::before { content: "Informaci\00F3n adicional del pedido"; } body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-fields) > .wc-block-checkout__order-notes { margin-bottom: 0 !important; } /* The note row above already carries 16px below it; WooCommerce also gives the * invoice checkbox 16px above on desktop (0 on mobile), which doubled the gap * there. Top margin off, so it is 16px at both widths, like the rows above. */ body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-notes) > .wc-block-checkout__order-fields .wc-block-components-address-form > :first-child { margin-top: 0 !important; } body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-notes) > .wc-block-checkout__order-fields .wc-block-components-checkout-step__heading-container, body .folia-checkout .wc-block-checkout__form:has(> .wc-block-checkout__order-notes) > .wc-block-checkout__order-fields .wc-block-components-checkout-step__heading { display: none !important; } /* * Move the "Additional" (order note) section to render BEFORE Payment options. * The checkout form is normal block flow, so switch it to a flex column and give * only the trailing blocks an explicit order: everything up to billing stays at * the default order:0 (source order), then note -> invoice (order fields) -> * mobile summary -> payment -> terms -> actions. * Result: …billing, Additional, VAT invoice, [summary on mobile], Payment * options, terms, Place order. Renumbered 2026-09-26 to make room for the * invoice step between the note and the summary: order takes integers only, and * a tie falls back to DOM order, where the order fields come first. */ body .folia-checkout .wc-block-checkout__form { display: flex !important; flex-direction: column !important; } /* As flex items the steps took their widest content as their minimum width * (min-width: auto): Stripe's card form, the payment logos and the test-mode * badge made the payment step wider than a phone, and its right side was cut off * (staging, 2026-10-25, 360-390px screens). They fit the form instead. */ body .folia-checkout .wc-block-checkout__form > * { min-width: 0 !important; } body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__order-notes { order: 1 !important; } body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__order-fields { order: 2 !important; } body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__payment-method { order: 4 !important; } body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__terms { order: 5 !important; } body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__actions { order: 6 !important; } /* Express checkout (Ekspresowa kasa — Apple Pay / Google Pay / Link) belongs with the payment options, not stranded above the contact fields where WooCommerce puts it. Its wrapper is the form's FIRST child and carries no class at all, so there is nothing to select but its contents — hence `:has()`. Left alone it keeps the default `order: 0` and therefore sorts ahead of every numbered sibling, which is exactly the bug. `order: 4` deliberately TIES with the payment section: a tie falls back to DOM order, and the express wrapper is child 0 while payment is child 6, so it lands immediately above the payment methods — "pay instantly, or continue below". */ body .folia-checkout .wc-block-checkout__form > div:has(> .wc-block-components-express-payment) { order: 4 !important; } /* * Breathing room under each section heading (2026-06-26). The checkout-step * heading sat only 8px above its description/fields, which read as cramped under * the large thin titles. Bump to 16px (matches the "Additional" heading gap). */ body .folia-checkout .wc-block-components-checkout-step__heading { margin-bottom: 16px !important; } /* * Hide the "Shipping options" rate-selector block (2026-06-26). The shop uses a * single flat shipping rate, already shown in the Delivery (Ship/Pickup) toggle * and the order summary, so the separate rate list is redundant. Hidden, not * removed — the block stays in the DOM so the single rate remains auto-selected * and the order still carries the shipping cost. (If multiple shipping rates are * ever added, revisit this so customers can choose between them.) */ body .folia-checkout .wc-block-checkout__shipping-option { display: none !important; } /* * Tighten the gap between checkout sections (2026-06-26). The base theme spaces * steps clamp(32px,4vw,56px) apart (56px on desktop), which felt too loose now * that the headings and internal spacing are dialled in. Halve it to * clamp(18px,2vw,28px). `body` prefix beats the compiled tailwind rule. */ body .folia-checkout .wc-block-components-checkout-step { margin-bottom: clamp(18px, 2vw, 28px) !important; } /* * Tighten the gap under the "Checkout" page heading (2026-06-26). Below the H1 * underline there was ~43px of dead space — the post-content default top margin * (~19px) stacked with the WooCommerce checkout block's 24px top padding. Most * visible on mobile, where the order summary sits right under the heading. * Collapse to ~14px. */ body .folia-checkout > .wp-block-post-content { margin-top: 0 !important; } body .folia-checkout .wp-block-woocommerce-checkout { padding-top: 14px !important; } /* * Make the mobile order-summary toggle work (2026-06-26). The theme forces * .wc-block-components-checkout-order-summary__content { display:block !important } * (so the summary stays open in the desktop sidebar), which also defeated the * collapse on mobile: tapping the "Order summary" header flipped aria-expanded * but the items never hid. The title and content are siblings, so on mobile hide * the content while the title is collapsed. Desktop (>=1024px) stays always-open. */ @media (max-width: 1023px) { body .folia-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title[aria-expanded="false"] ~ .wc-block-components-checkout-order-summary__content { display: none !important; } } /* * Restore the "Add coupons" panel in the order summary (2026-06-26). The base * theme set the sidebar panel button to pointer-events:none and hid its toggle * icon, so the coupon panel couldn't be opened (most broken on mobile) — you * couldn't enter a code. Re-enable the button and show its chevron. (The order- * summary collapse toggle is a separate __title element, so this only affects * the coupon panel.) */ body .folia-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button { pointer-events: auto !important; cursor: pointer !important; } body .folia-checkout .wc-block-checkout__sidebar .wc-block-components-panel__button-icon { display: inline-flex !important; } /* * Match the coupon field height to the APPLY button (2026-06-26). Form inputs * are 52px and buttons are 56px project-wide; in the coupon row they sit side by * side, so the 4px difference left their bottoms misaligned. Bump the coupon * field to 56px so it lines up flush with the button. */ body .folia-checkout .wc-block-components-totals-coupon .wc-block-components-text-input, body .folia-checkout .wc-block-components-totals-coupon .wc-block-components-text-input input, body .folia-checkout .wc-block-components-totals-coupon input[type="text"] { height: 56px !important; } /* * Move the order summary (prices block) below the "Additional" section on mobile * (2026-06-26). On mobile the order summary normally renders in its own column at * the top of the page, above the form. A wp_footer script * (folia_move_order_summary_after_additional) relocates the * .wc-block-checkout__sidebar node into the form, right after the Additional * (order-note) section, so the flow reads: …Additional, Order summary, Payment * options. These rules style it for that new context: full width (it was a narrow * sidebar column) and order:3 so flexbox keeps it after Additional (1) and the * VAT invoice step (2), and before Payment (4). Moving the node out of the * sidebar layout makes WooCommerce hide the summary block (display:none) — force * it back. Mobile only; the desktop sticky-right sidebar (>=1024px) is untouched. */ @media (max-width: 1023px) { body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__sidebar { order: 3 !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; /* 18px below: the gap WooCommerce leaves under each checkout step at * these widths (measured 18px at 390-768px, 20px near 1000px). At 0 the * "Opcje płatności" heading sat directly on the summary's hairline. */ margin: 0 0 18px !important; padding: 0 !important; } body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { display: block !important; } } /* In the form the summary is part of the flow. WooCommerce keeps it sticky (class is-sticky, top 24px) whenever the checkout is 700px wide or more, so between 700 and 1023px it floated over the payment options while scrolling (owner, 2026-10-24). */ body .folia-checkout .wc-block-checkout__form > .wc-block-checkout__sidebar { position: static !important; top: auto !important; } /* * Pickup location card layout (2026-06-26). WooCommerce stacks the pin icon and * the address on separate lines (the SVG renders display:block), so the address * sat below the icon. Lay the description out as a flex row instead — pin icon to * the left, address to its right — and nudge it 10px so the pin centres directly * under the radio dot above it (and the address lines up under the "Folia * Flowers" label). The address is turned into a Google-Maps link by * folia_link_pickup_address_to_maps() (functions.php); style it as an underlined * link inheriting the muted description colour. */ body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__description { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; padding-left: 10px !important; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__description > svg { display: block !important; flex: 0 0 auto !important; margin: 0 !important; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__description a.folia-pickup-maplink { color: inherit !important; text-decoration: underline !important; text-underline-offset: 2px !important; } body .folia-checkout .wc-block-checkout__pickup-options .wc-block-components-radio-control__description a.folia-pickup-maplink:hover { color: #1e1e1e !important; } /* Footer breathing room (mobile) — the footer logo overlaps upward into the space above the black band, so the last carousel's arrows can get crowded. A small shared gap above the footer, plus extra padding under the related-products carousel (product pages), whose section has none of its own. */ @media (max-width: 1023px) { body .folia-site-footer { margin-top: 24px; } body .folia-block-related-products { padding-bottom: 48px; } } /* Subcategory tiles — description shown as a hover overlay (desktop) or via the info dot on tap (touch devices). The image dims and the centred description fades in; the open-pill stays clickable on top. */ .folia-subcat-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 18px 22px; background: rgba(20, 20, 20, 0.62); color: #fff; text-align: center; font-size: 15px; line-height: 1.5; opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } @media (min-width: 1280px) { .folia-subcat-overlay { font-size: 16px; } } .folia-subcat-overlay.is-open { opacity: 1; } .folia-subcat-info { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.92); color: #1e1e1e; font: italic 700 16px/1 Georgia, "Times New Roman", serif; cursor: pointer; } /* Hover-capable (desktop): reveal the overlay on hover; the info dot is only for touch, so hide it here. Must come AFTER the base rules to win. */ @media (hover: hover) { .folia-products-card:hover .folia-subcat-overlay { opacity: 1; } .folia-subcat-info { display: none; } } /* Product-tile image. Renders identically to the old `bg-cover bg-center`, but as a real so the preload scanner can discover the LCP image in the raw HTML. Not Tailwind: `object-center` is absent from the precompiled build. !important on the box: woocommerce-layout.css ships `.woocommerce img{height:auto}` (0,1,1) which outranks a lone class and would let the tile grow to its natural aspect, overflowing the frame. */ .folia-card-img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; } /* Mobile: keep the header (logo, search, cart, menu) pinned while scrolling so the actions stay reachable. The header block sits inside the FSE template-part wrapper (
); sticky must be applied to that wrapper because its parent (.wp-site-blocks) spans the whole page, giving sticky room to travel. Desktop header is left as-is. */ @media (max-width: 1023px) { body header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } } /* Phones and tablets (below 1024px; owner, 2026-11-05, variant A): a small round logo at the left of the slim bar; search, favourites, cart and the menu stay on the right. NOTHING MOVES WHILE SCROLLING: the bar, the logo and the icons are the same at the top of the page and scrolled, and nothing depends on a scroll class. (The big 180px logo that hung below the bar and collapsed on scroll jerked and, when it animated its size, looped on phones.) The bar keeps its height (72px, 80px from 768px: the 48px cart button plus the inner padding) and the page starts right under it: no room is kept for a hanging logo. Computers keep the big centred logo. */ @media (max-width: 1023px) { body .folia-site-header { margin-bottom: 0; } /* The shop's pages (catalog, search, product, cart, checkout) opened with more room under the hanging logo: a 25px spacer, the main column's 32px top padding (40px from 768px) and the catalog's own. Without it their first line (the breadcrumbs, the cart's heading row) starts one block gap under the bar, like the rest of the page body. */ body .wp-block-spacer:first-child:has(+ .folia-main-column) { display: none; } body .folia-main-column.pt-8 { padding-top: 0; } body section.folia-block-catalog { padding-top: 0; } /* Pages with their own top padding, which also cleared the hanging logo (owner, 2026-11-05: «Fix that»): their title starts 32px into the page body (40px from 768px), about as far under the bar as the cart's heading. FAQ and «Dla firm» (templates page-faq.html / page-b2b.html, inline clamp(7rem,13vw,12rem)), the shop landing pages (inline clamp(3rem,7vw,7rem)), «Dostawa», «Ulubione», and the order-received and search pages (their clamp(5rem,9vw,6.5rem) rules below). «O nas» (the about-new___{lang} parts: the column's inline clamp(4.5rem,8vw, 6.5rem) plus the first section's spacing-50 top margin) gets the same 32px as that section's margin; «Dla firm» uses the same intro block without that column padding, so the rule keys on it. !important beats the inline styles. */ body main.wp-block-group[style*="padding-top:clamp(7rem"], body main.folia-landing, body .folia-delivery, body .folia-favorites-page, body.woocommerce-order-received main.wp-block-group, body.search main.wp-block-group { padding-top: 32px !important; } body .folia-main-column[style*="4.5rem"] { padding-top: 0 !important; } body .folia-main-column[style*="4.5rem"] > .folia-block-about-intro:first-child { margin-top: 32px !important; } /* A 44px circle in the flow of the bar, centred in it (14px from the top of the 72px bar, 18px in the 80px one) and at the left in the header's own side padding (16px, 24px from 768px), the gutter the menu button keeps on the right. Its box beats input.css's var(--folia-header-logo) (180px); the image fills it instead of the 120px the site-logo block's width attribute gives. */ body .folia-site-header .folia-header-center { width: 44px !important; height: 44px !important; margin: 0 !important; align-self: center; } body .folia-site-header .folia-header-center .wp-block-site-logo, body .folia-site-header .folia-header-center .custom-logo-link, body .folia-site-header .folia-header-center img { display: block; width: 100% !important; height: 100% !important; max-width: none; } body .folia-site-header .folia-header-center img { object-fit: contain; } /* The bar spreads its three groups apart (justify-between): with the small logo the icons would drift to the middle, so they keep to the right, next to the menu button. */ body .folia-site-header .folia-header-right { margin-left: auto; } /* Put the menu close (X, 24px) on the hamburger's exact spot, so the button stays in place when toggling the menu: centred on the hamburger's centre, half the bar down and the side padding plus 2px in (the hamburger is 28px). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: 24px; right: 18px; left: auto; } } @media (min-width: 768px) and (max-width: 1023px) { .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 28px; right: 26px; } body main.wp-block-group[style*="padding-top:clamp(7rem"], body main.folia-landing, body .folia-delivery, body .folia-favorites-page, body.woocommerce-order-received main.wp-block-group, body.search main.wp-block-group { padding-top: 40px !important; } body .folia-main-column[style*="4.5rem"] > .folia-block-about-intro:first-child { margin-top: 40px !important; } } /* Hero: two side-by-side images get cramped on small screens — below 768px show only ONE image, full width. Left by default; an inline script flips to the right at random per load by adding .folia-hero-show-right. */ @media (max-width: 767px) { body .folia-hero-images { grid-template-columns: 1fr; } body .folia-hero-images > div:nth-child(2) { display: none; } body .folia-hero-images.folia-hero-show-right > div:nth-child(1) { display: none; } body .folia-hero-images.folia-hero-show-right > div:nth-child(2) { display: block; } } /* Add-to-cart "fly to cart": a circular product thumbnail arcs up to the header cart icon (folia-add-to-cart-anim.js), then the cart icon bumps. */ .folia-fly2cart { position: fixed; z-index: 99999; border-radius: 9999px; background-size: cover; background-position: center; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); will-change: transform, opacity; } @keyframes folia-cart-bump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 55% { transform: scale(0.9); } 75% { transform: scale(1.06); } } .folia-cart-bump { animation: folia-cart-bump 0.55s ease; transform-origin: center; } /* Likes / favourites (folia-likes.js) — guest wishlist stored in localStorage. Heart on each product card (top-right, clear of the "New" badge + bag), on the product page next to the title, and a header heart that opens a drawer. */ .folia-like-btn { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.9); color: #1e1e1e; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; } .folia-like-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; } .folia-like-btn:hover { background: #fff; } .folia-like-btn.is-liked { color: #e23744; } .folia-like-btn.is-liked svg { fill: #e23744; stroke: #e23744; } @keyframes folia-like-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.32); } 70% { transform: scale(0.9); } } .folia-like-pop { animation: folia-like-pop 0.4s ease; } .folia-like-title { display: inline-flex; vertical-align: middle; margin-left: 12px; } .folia-like-btn--inline { position: static; width: 44px; height: 44px; background: #f3f3f3; } .folia-like-btn--inline svg { width: 24px; height: 24px; } .folia-likes-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #1e1e1e; cursor: pointer; line-height: 0; } .folia-likes-trigger svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; } .folia-likes-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; background: #e23744; color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; } .folia-likes-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .folia-likes-overlay.is-open { opacity: 1; visibility: visible; } .folia-likes-drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: 100001; width: min(380px, 88vw); height: 100vh; height: 100dvh; /* track the dynamic viewport so the mobile toolbar can't leave a gap */ background: #fff; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; } .folia-likes-drawer.is-open { transform: translateX(0); } .folia-likes-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 14px 18px 22px; border-bottom: 1px solid var(--folia-line); font-size: 20px; } .folia-likes-drawer__title { display: inline-flex; align-items: center; gap: 10px; } .folia-likes-drawer__count:not(:empty) { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--folia-soft); color: var(--folia-text); font-size: 13px; line-height: 24px; text-align: center; } .folia-likes-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--folia-ink); } .folia-likes-list { flex: 1; overflow-y: auto; padding: 6px 22px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .folia-likes-empty { color: var(--folia-muted); padding: 24px 4px; text-align: center; } .folia-likes-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--folia-line); } .folia-likes-item:last-child { border-bottom: 0; } .folia-likes-item__img { flex: 0 0 84px; width: 84px; height: 84px; border-radius: var(--folia-r-field); background-size: cover; background-position: center; background-color: var(--folia-soft); } .folia-likes-item__body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; } .folia-likes-item__title { color: var(--folia-ink); text-decoration: none; font-size: 16px; line-height: 1.3; } .folia-likes-item__price { font-size: 15px; font-weight: 600; color: var(--folia-ink); } .folia-likes-item__price del { margin-right: 6px; font-weight: 400; color: var(--folia-muted); } .folia-likes-item__price ins { text-decoration: none; } .folia-likes-item__actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; } .folia-likes-item__cart { height: 38px; padding: 0 16px; border: 1px solid var(--folia-ink); border-radius: var(--folia-r-field); background: var(--folia-ink); color: #fff; font-size: 14px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .folia-likes-item__cart.is-options { background: #fff; color: var(--folia-ink); } .folia-likes-item__remove { min-height: 38px; padding: 0; border: 0; background: transparent; color: var(--folia-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } @media (hover: hover) { .folia-likes-close:hover { background: var(--folia-soft); } .folia-likes-item__title:hover { text-decoration: underline; } .folia-likes-item__cart:hover { background: #000; } .folia-likes-item__cart.is-options:hover { background: var(--folia-soft); } .folia-likes-item__remove:hover { color: var(--folia-error); } } .folia-likes-drawer__foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--folia-line); } .folia-likes-drawer__foot[hidden] { display: none; } .folia-likes-all { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--folia-ink); border-radius: var(--folia-r-card); color: var(--folia-ink); font-size: 15px; text-decoration: none; } @media (hover: hover) { .folia-likes-all:hover { background: var(--folia-soft); } } /* favourites count on the nav menu link */ .folia-fav-menu-count { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9999px; background: #e23744; color: #fff; font-size: 11px; line-height: 18px; text-align: center; vertical-align: middle; } /* dedicated favourites page (.folia-favorites-page rendered by folia-likes.js) */ /* Generous top padding so the title clears the header logo (which overflows the header box), and bottom padding so the grid doesn't run into the footer. */ .folia-favorites-page { width: 100%; max-width: 1920px; margin: 0 auto; padding: 72px 16px 84px; } @media (min-width: 768px) { .folia-favorites-page { padding: 96px 50px 100px; } } /* Empty mini-cart: space between the "cart is empty" message and Start shopping. */ .wc-block-mini-cart__empty-cart-wrapper .wp-block-button { margin-top: 20px; } /* Empty mini-cart → suggested bouquets (folia-empty-cart.js). */ .folia-empty-suggest { width: 100%; margin-top: 28px; padding-top: 22px; border-top: 1px solid #ececec; text-align: left; } .folia-empty-suggest__head { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: #6b6b6b; text-align: center; margin-bottom: 16px; } .folia-empty-suggest__item { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f4f4f4; } .folia-empty-suggest__item:last-child { border-bottom: 0; } .folia-empty-suggest__img { flex: 0 0 60px; width: 60px; height: 60px; background-size: cover; background-position: center; background-color: #f3f3f3; } .folia-empty-suggest__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .folia-empty-suggest__title { color: #1e1e1e; text-decoration: none; font-size: 14px; line-height: 1.3; } .folia-empty-suggest__title:hover { text-decoration: underline; } .folia-empty-suggest__price { font-size: 13px; color: #1e1e1e; } .folia-empty-suggest__price del { color: #71717a; margin-right: 4px; } .folia-empty-suggest__price ins { text-decoration: none; } .folia-empty-suggest__btn { align-self: flex-start; margin-top: 6px; border: 1px solid #1e1e1e; background: #fff; color: #1e1e1e; font-size: 12px; padding: 5px 12px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .folia-empty-suggest__btn:hover { background: #1e1e1e; color: #fff; } .folia-empty-suggest__btn:disabled { opacity: 0.5; cursor: default; } /* On the (wide) favourites page, keep the empty-state suggestions in a tidy centred column, with extra space below so the footer logo (which overflows upward) doesn't crowd the last suggestion. */ .folia-favorites-page .folia-empty-suggest { max-width: 460px; margin: 0 auto 36px; } /* Product page: linked categories below the add-to-cart. */ .folia-product-cats { font-size: 14px; color: #6b6b6b; } .folia-product-cats__label { color: #1e1e1e; margin-right: 4px; } .folia-product-cats a { color: #1e1e1e; text-decoration: underline; } .folia-product-cats a:hover { opacity: 0.7; } /* Delivery page (folia-delivery.js) — rules + postcode → price checker. */ body.folia-delivery-body .folia-canvas { visibility: hidden; } body.folia-delivery-body .folia-canvas .folia-delivery { visibility: visible; } .folia-delivery { width: 100%; max-width: 760px; margin: 0 auto; padding: 72px 16px 84px; } @media (min-width: 768px) { .folia-delivery { padding: 96px 24px 100px; } } .folia-delivery__title { font-size: clamp(28px, 4vw, 48px); font-weight: 400; color: #1e1e1e; margin: 0 0 16px; } .folia-delivery__intro { color: #4a4a4a; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; margin: 0 0 36px; } .folia-delivery__h2 { font-size: clamp(18px, 2vw, 22px); font-weight: 600; color: #1e1e1e; margin: 0 0 16px; } .folia-delivery__zones { margin-bottom: 44px; } .folia-delivery__zone { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #ececec; } .folia-delivery__zone span { color: #1e1e1e; font-size: clamp(15px, 1.6vw, 17px); } .folia-delivery__zone b { color: #1e1e1e; font-weight: 700; white-space: nowrap; } .folia-delivery__zone i { color: #9a6a3a; font-style: normal; font-size: 14px; text-align: right; } .folia-delivery__form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .folia-delivery__input { flex: 1; min-width: 160px; height: 52px; border: 1px solid #cfcfcf; padding: 0 16px; font-size: 16px; color: #1e1e1e; background: #fff; } .folia-delivery__input:focus { outline: none; border-color: #1e1e1e; } .folia-delivery__btn { height: 52px; padding: 0 28px; border: 0; background: #1e1e1e; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .folia-delivery__btn:hover { background: #000; } .folia-delivery__result { font-size: 16px; line-height: 1.5; padding: 14px 16px; } .folia-delivery__result.is-ok { background: #eef6ee; color: #1f6b2e; } .folia-delivery__result.is-none { background: #fdf0ed; color: #a23b22; } .folia-delivery__result.is-invalid { background: #f3f3f3; color: #6b6b6b; } .folia-delivery__tel { color: inherit; text-decoration: underline; white-space: nowrap; font-weight: 600; } .folia-delivery__tel:hover { opacity: 0.75; } .folia-delivery__block { margin-bottom: 40px; } .folia-delivery__text { color: #4a4a4a; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.7; margin: 0; } .folia-delivery__text .folia-delivery__tel { color: #1e1e1e; } /* Address → Google Maps links (footer, regulamin, FAQ, delivery, etc.). Inherit the surrounding colour so it reads correctly on the dark footer and on pages. */ .folia-addr-link { color: inherit; text-decoration: underline; } .folia-addr-link:hover { opacity: 0.75; } /* Order-received ("thank you") page: it's a WooCommerce block page, so it doesn't get the top padding the FSE pages have — the centered round logo overhangs into the page top and covers the heading. Give the content room to clear the logo. */ body.woocommerce-order-received main.wp-block-group { padding-top: clamp(5rem, 9vw, 6.5rem); } /* Search results page: same problem — the search template's
has no top padding, so the centered header logo (a 180px circle that overflows the short header box) overhangs and covers the "Search results" heading (core query-title block). Give the content room to clear the logo. Scoped to body.search so the shop/catalog archive — which shares the woocommerce-shop / post-type-archive-product classes but already has its own clearance — is left untouched. */ body.search main.wp-block-group { padding-top: clamp(5rem, 9vw, 6.5rem); } /* Cookie Notice (GDPR plugin) — folia black/white, as a compact floating card in the bottom-left corner (not a full-width bar pinned to the edge). */ body #cookie-notice { left: 50% !important; right: auto !important; bottom: 20px !important; top: auto !important; transform: translateX(-50%) !important; width: calc(100% - 40px) !important; max-width: 420px !important; min-width: 0 !important; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 3px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4); } /* `!important` is required here, and specificity alone will not do it: the plugin prints an INLINE