/* ========================================================================== KugooEesti — design tokens & base ========================================================================== */ :root { --ink: #14171a; --muted: #5b6470; --line: #e7e9ec; --bg: #ffffff; --bg-muted: #fafaf8; --accent: #ff6a1a; --accent-dark: #e35c14; --accent-ink: #1a1300; --radius: 14px; --focus: #0b5fff; --success: #1f8a3b; --accent-soft: rgba(255, 106, 26, 0.12); } *{ box-sizing: border-box; } /* overflow-x: clip, not hidden — hidden pairs with an unset overflow-y by computing it to auto (CSS Overflow spec), which silently turns html/body into a scrolling container. That breaks position:sticky for every descendant that expects to stick to the real viewport (e.g. the checkout header, which then measured its sticky offset against body's box — already pushed down by the admin bar's own margin — instead of the viewport, double-counting that offset and overlapping the step-progress row below it). clip has the same horizontal-clipping effect without that side effect. */ html { overflow-x: clip; scroll-behavior: smooth; } body { margin: 0; overflow-x: clip; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* !important: a leftover Elementor "Kit" stylesheet still targets .elementor-kit-1173 (a class WordPress/Elementor keeps stamping on ) with its own text color at higher specificity than a bare `body` selector — without this, any element that relies on normal color inheritance (product names, prices) silently turns Elementor's orange instead of ours. */ color: var(--ink) !important; background: var(--bg); line-height: 1.5; } img { max-width: 100%; display: block; } a { color: inherit; } button { font: inherit; } ul { margin: 0; padding: 0; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Core's own screen-reader-text class covers .skip-link's hidden-until-focus behavior; this adds the visual treatment for when it IS focused. */ .skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 100; background: #fff; color: var(--ink); padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; } :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .nav-links a:focus-visible, .nav-cta:focus-visible, .nav-toggle:focus-visible { outline-color: #fff; } /* ---- Header ---- Default, every page except the homepage: solid and sticky while scrolling — persistent access to nav/cart is exactly what you want while browsing a catalogue or partway through checkout. This was missing before the catalogue existed: header.site was unconditionally position:absolute (built only for overlaying the homepage hero), which meant it was already silently overlapping content on every other page WooCommerce renders (cart, checkout, single product) — just not noticeable until a page with real content at the very top, like this catalogue, made it obvious. Homepage only (body.home, WordPress's own class for the front page): the original transparent overlay-on-hero treatment, not sticky. */ header.site { position: sticky; top: 0; z-index: 20; background: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.08); } /* Homepage: starts transparent over the hero, same as before — but now position:fixed (not absolute) plus a JS-toggled .is-scrolled class (see main.js) so it turns into the same solid, sticky header every other page already has once the visitor scrolls past the hero, instead of just scrolling out of view. The hero's own content padding already assumes an overlaid header (see .hero-content below), so this changes no layout. The Hooldus page deliberately does NOT get this treatment — it uses the same compact, no-photo .page-hero every other content page uses, not the homepage's photo hero, specifically so the two pages don't look identical at a glance. */ body.home header.site { position: fixed; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; transition: background .25s ease, box-shadow .25s ease; } body.home header.site.is-scrolled { background: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.08); } /* WordPress's own admin bar is position:fixed at the real viewport top, so a fixed/stuck header at top:0 sits underneath it for logged-in staff (customers never see the admin bar, so this only matters for editors previewing the site). Matches wp-admin's own admin-bar height. */ body.admin-bar header.site { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar header.site { top: 46px; } } .site-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(24px, 5vw, 64px); } .brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: center; margin: 0; padding: 0; } .brand img { height: 44px; width: auto; display: block; margin: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); transition: opacity .15s ease; } .brand:hover img { opacity: 0.8; } footer .brand img { height: 36px; filter: none; } .main-nav { display: flex; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; } .nav-links a { text-decoration: none; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35); font-weight: 500; transition: color .15s ease; } .nav-links a:hover { color: var(--accent); } .nav-links .current-menu-item > a { color: var(--accent); } .nav-cta { position: relative; z-index: 31; background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 999px; font-size: 0.9rem; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; transition: background .15s ease; } .nav-cta:hover { background: var(--bg-muted); } .nav-cta-icon { display: none; position: relative; width: 22px; height: 22px; } .nav-cta-icon svg { width: 100%; height: 100%; } .nav-cta-count { display: none; } .nav-toggle { display: none; position: relative; z-index: 31; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); border-radius: 12px; width: 44px; height: 44px; padding: 0; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: background .2s ease, border-color .2s ease; } .nav-toggle:hover { background: rgba(255,255,255,0.24); } header.site.nav-open .nav-toggle:hover { background: var(--accent-dark); } .nav-toggle .bar { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease, width .2s ease; } .nav-toggle .bar1 { width: 18px; } .nav-toggle .bar2 { width: 22px; } .nav-toggle .bar3 { width: 12px; align-self: flex-start; margin-left: 11px; } header.site.nav-open .nav-toggle { background: var(--accent); border-color: var(--accent); } header.site.nav-open .nav-toggle .bar { background: var(--accent-ink); width: 20px; } header.site.nav-open .nav-toggle .bar1 { transform: translateY(7px) rotate(45deg); } header.site.nav-open .nav-toggle .bar2 { opacity: 0; transform: scaleX(0); } header.site.nav-open .nav-toggle .bar3 { margin-left: 0; align-self: center; transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { .nav-toggle { display: flex; } .main-nav { display: none; } /* Only the homepage needs this override — its hero is a capped-height box at this width, so the header must sit in normal flow above it rather than overlaying it (position: sticky still lets it pin to the top once scrolled, same as every other page's default, it just isn't removed from flow the way the desktop's fixed overlay is). */ body.home header.site { position: sticky; top: 0; background: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,0.08); } .main-nav[data-open="true"] { display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column; background: var(--ink); padding: 96px 28px 28px; overflow-y: auto; } .main-nav[data-open="true"] .nav-links { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; } .nav-links li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.12); } .nav-links a { display: block; padding: 16px 4px; font-size: 1.05rem; } .nav-cta { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; } .nav-cta-text { display: none; } .nav-cta-icon { display: block; } .nav-cta-count { display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.62rem; font-weight: 800; line-height: 1; } .site-nav { gap: 10px; padding-top: 16px; padding-bottom: 16px; } } /* ---- Compact "scrolled" header — JS toggles .is-scrolled on #site-header past a small scroll threshold (see main.js). Same header, just tighter vertical padding and a slightly smaller logo, so nav/search/cart stay reachable without the header eating scroll real estate. ---- */ .site-nav { transition: padding .2s ease; } .brand img { transition: opacity .15s ease, height .2s ease; } header.site.is-scrolled .site-nav { padding-top: 14px; padding-bottom: 14px; } header.site.is-scrolled .brand img { height: 36px; } .site-nav-utility { display: flex; align-items: center; gap: 12px; } /* ---- Search: a real GET request to home_url('/') with a hidden post_type=product field, restyled — the exact same request the catalogue toolbar's own search box sends (see catalogue/toolbar.php and kugooeesti_render_search_form()), never a second/different search implementation. Icon toggles a panel beneath the header — same behavior at every width, mobile included (see main.js's #search-toggle IIFE). ---- */ .search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: none; border-radius: 999px; color: #fff; cursor: pointer; transition: background .15s ease; } .search-toggle svg { width: 20px; height: 20px; } .search-toggle:hover, .search-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.14); } /* No panel background by design — this floats the search field directly over whatever's beneath it (hero image or page content) rather than dropping an opaque bar across the header; .site-search-form carries its own background + shadow so it still stands out on its own. */ .site-search-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 19; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .site-search-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); } .site-search-panel-inner { max-width: 760px; margin: 0 auto; padding: 32px clamp(24px, 5vw, 64px) 36px; display: flex; align-items: center; gap: 16px; } .site-search-wrap { position: relative; flex: 1; min-width: 0; } .site-search-form { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; padding: 15px 22px; transition: border-color .15s ease, box-shadow .15s ease; } .site-search-panel .site-search-form { box-shadow: 0 16px 32px rgba(20,23,26,0.16); } .site-search-panel .search-close { box-shadow: 0 16px 32px rgba(20,23,26,0.16); } .site-search-panel .site-search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .site-search-icon { display: flex; flex: none; color: var(--muted); } .site-search-icon svg { width: 20px; height: 20px; } .site-search-form input[type="search"] { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 1.05rem; color: var(--ink); } .site-search-form input[type="search"]:focus { outline: none; } .site-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .search-close { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; transition: background .15s ease; } .search-close svg { width: 16px; height: 16px; } .search-close:hover { background: var(--bg-muted); } /* ---- Search suggestions — real products from kugooeesti_ajax_search_ suggest() (see inc/woocommerce.php), the same wc_get_products(['s'=>…]) search the full results page itself uses. Shared by the desktop overlay and the mobile bar since both render kugooeesti_render_search_form(). */ .site-search-suggestions { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 6; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 32px rgba(20,23,26,0.12); overflow: hidden; padding: 6px; } .site-search-suggestion { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); } .site-search-suggestion:hover, .site-search-suggestion.is-active { background: var(--bg-muted); } .site-search-suggestion-media { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--bg-muted); border: 1px solid var(--line); } .site-search-suggestion-media img { width: 100%; height: 100%; object-fit: contain; } .site-search-suggestion-name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-search-suggestion-price { flex: none; font-size: 0.84rem; color: var(--muted); font-weight: 700; } /* ---- Elektritõukerattad mega menu — the main redesign. Real category links (kugooeesti_category_url(), the same helper every other "browse this category" link in the theme uses) plus a handful of real bestselling products (kugooeesti_get_bestseller_products(), the same query the homepage's own "Enimmüüdud" section uses). Opens on hover (with a small tolerance via :focus-within/JS delay so moving the mouse diagonally into the panel doesn't close it) and on click/keyboard focus via the chevron toggle button. Light card on the site's normal (--bg) background, not the header's own dark chrome — same border-radius, border, and hover shadow as every other card in the theme (.prod-card). */ .nav-item-trigger { display: flex; align-items: center; gap: 2px; } /* Base state: hidden everywhere except inside the mobile drill-down panel (see the 860px block below, which is the only place this is ever shown). */ .mobile-submenu { display: none; } .megamenu-toggle { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; background: transparent; border: none; border-radius: 999px; color: #fff; cursor: pointer; transition: background .15s ease, transform .18s ease; } .megamenu-toggle svg { width: 15px; height: 15px; } .megamenu-toggle:hover { background: rgba(255,255,255,0.14); } .has-megamenu.is-open .megamenu-toggle, .megamenu-toggle[aria-expanded="true"] { transform: rotate(180deg); } /* .megamenu is a full-width, invisible positioning shell anchored to .site-nav (not to the trigger

) specifically so the visible card inside it can never overflow the viewport regardless of where "Elektritõukerattad" happens to sit in the nav — .megamenu-card is the part that actually looks like something, centered and width-capped. */ .site-nav { position: relative; } .megamenu { position: absolute; top: 100%; left: 0; right: 0; z-index: 25; display: flex; justify-content: center; padding-top: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; transform: translateY(-8px); } .has-megamenu:hover .megamenu, .has-megamenu:focus-within .megamenu, .has-megamenu.is-open .megamenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .megamenu-card { width: min(820px, calc(100vw - 48px)); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 32px rgba(20,23,26,0.12); padding: 36px; } .megamenu-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; } .megamenu-col { min-width: 0; } .megamenu-products { padding-left: 40px; border-left: 1px solid var(--line); } .megamenu-heading { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .megamenu-cat-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .megamenu-cat-link { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; font-weight: 600; transition: background .15s ease, color .15s ease; } .megamenu-cat-link:hover, .megamenu-cat-link:focus-visible { background: var(--bg-muted); } .megamenu-cat-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); } .megamenu-cat-icon svg { width: 18px; height: 18px; } .megamenu-product-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .megamenu-product-link { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 10px; transition: background .15s ease, color .15s ease; } .megamenu-product-link:hover, .megamenu-product-link:focus-visible { background: var(--bg-muted); } .megamenu-product-media { flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--bg-muted); border: 1px solid var(--line); } .megamenu-product-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .megamenu-product-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .megamenu-product-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .megamenu-product-price { font-size: 0.84rem; color: var(--muted); font-weight: 700; } .megamenu-product-price ins { text-decoration: none; color: var(--accent-dark); } .megamenu-product-price del { color: var(--muted); font-weight: 500; margin-right: 4px; font-size: 0.9em; } /* The header's own nav links are white-on-dark with a drop-shadow, meant for sitting on the dark header bar / hero image (see .nav-links a near the top of this file). The mega menu is technically a descendant of .nav-links in the DOM, but visually it's a light card sitting on the page's normal (--bg) background — it needs the site's normal dark-ink link treatment, not the header's. .nav-links a's selector (one class + one element) out-specifies a plain .megamenu-cat-link/.btn rule, so these overrides are deliberately double-qualified (.megamenu + the component class) to win regardless of source order, both at rest and on :hover/:focus-visible. */ .megamenu .megamenu-cat-link, .megamenu .megamenu-product-link, .megamenu .btn.btn-primary { color: var(--ink); text-shadow: none; text-decoration: none; } .megamenu .megamenu-cat-link:hover, .megamenu .megamenu-cat-link:focus-visible, .megamenu .megamenu-product-link:hover, .megamenu .megamenu-product-link:focus-visible { color: var(--accent-dark); } .megamenu .btn.btn-primary, .megamenu .btn.btn-primary:hover, .megamenu .btn.btn-primary:focus-visible { color: var(--accent-ink); } @media (max-width: 860px) { /* Mega menu → mobile drill-down instead (see .mobile-submenu below). The desktop panel is fully removed, not just visually hidden, so its content/links can never sit underneath the mobile nav overlay. */ .megamenu { display: none !important; } .megamenu-toggle { display: none; } .nav-item-trigger { width: 100%; } .nav-link-megamenu { flex: 1; display: flex; align-items: center; justify-content: space-between; } .nav-link-megamenu::after { content: ""; display: inline-block; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: 8px; opacity: 0.85; } #main-nav[data-mobile-panel="scooters"] .nav-links > li:not(.has-megamenu) { display: none; } #main-nav[data-mobile-panel="scooters"] .has-megamenu > .nav-item-trigger { display: none; } #main-nav[data-mobile-panel="scooters"] .mobile-submenu { display: block; width: 100%; } .mobile-submenu-back { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 4px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 1.05rem; font-weight: 600; cursor: pointer; margin-bottom: 4px; } .mobile-submenu-back svg { width: 18px; height: 18px; flex: none; } .mobile-submenu-list { list-style: none; margin: 0; padding: 0; } .mobile-submenu-list li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.12); } .mobile-submenu-list a { display: block; padding: 16px 4px; color: #fff; text-decoration: none; font-size: 1.02rem; } .mobile-submenu-all { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--accent); text-decoration: none; font-weight: 700; padding: 4px; } } /* ---- Hero: full-viewport photo with a scrim and overlaid copy ---- */ .hero { position: relative; height: 100svh; min-height: 560px; width: 100%; overflow: hidden; color: #fff; padding: 0; } @media (max-width: 820px), (max-aspect-ratio: 4/5) { .hero { height: auto; aspect-ratio: 0.72; min-height: 280px; max-height: 100svh; } } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 42%; } @media (max-width: 820px), (max-aspect-ratio: 4/5) { .hero-media img { object-position: 50% 42%; } } .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,12,14,0.82) 0%, rgba(10,12,14,0.55) 42%, rgba(10,12,14,0.15) 68%, rgba(10,12,14,0.05) 100%); } .hero-content { position: relative; z-index: 2; height: 100%; width: 100%; padding: 96px clamp(24px, 5vw, 64px) 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; } .hero-content .inner { max-width: 560px; } .eyebrow { display: inline-block; white-space: nowrap; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } /* color: !important — a leftover Elementor Kit stylesheet carries its own global color specifically for h1/h3 (not h2/h4, which is why only some headings are affected), at a specificity/load-order that otherwise beats a plain heading rule. Same root cause as body's color fix above; see that comment. Every h1/h3 below that needs a specific color repeats this same !important for the same reason. */ .hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; margin: 0 0 16px; font-weight: 800; letter-spacing: -0.02em; color: #fff !important; } .hero p.lede { font-size: 1.15rem; color: rgba(255,255,255,0.88); margin: 0 0 30px; max-width: 480px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; } .hero-trust { display: flex; flex-direction: column; gap: 12px; font-size: 0.88rem; color: rgba(255,255,255,0.8); margin: 0; padding: 0; list-style: none; } .hero-trust li { display: flex; align-items: center; gap: 8px; } .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } @media (max-width: 820px), (max-aspect-ratio: 4/5) { .hero-content { padding-top: 84px; padding-bottom: 24px; justify-content: center; } .eyebrow { font-size: 0.68rem; letter-spacing: 0.03em; padding: 5px 10px; margin-bottom: 8px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); } .hero h1 { font-size: clamp(1.7rem, 6.5vw, 3.4rem); margin-bottom: 8px; } .hero p.lede { margin-bottom: 14px; } .hero-ctas { gap: 8px; margin-bottom: 14px; } .hero-trust { gap: 6px; } } @media (max-width: 860px) { .hero-content { padding-top: 28px; } } @media (max-width: 400px) { .eyebrow { padding: 4px 9px; margin-bottom: 4px; font-size: 0.6rem; letter-spacing: 0.02em; } .hero h1 { font-size: clamp(1.5rem, 7.5vw, 3.4rem); margin-bottom: 6px; } .hero p.lede { font-size: 1rem; margin-bottom: 10px; } .hero-ctas { gap: 6px; margin-bottom: 10px; } .hero-trust { gap: 4px; font-size: 0.82rem; } } /* ========================================================================== Buttons — ONE component, three fill variants + one shape modifier. This replaced four separate hand-styled patterns (.btn-primary, .prod-cta, .service-feature-link, and the category-card arrow-link) in the static version. The arrow-link stays separate on purpose — see category-card.php — it's a plain text link, not a filled button, so forcing it through this component would be the wrong kind of consistency. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.98rem; border: none; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; white-space: nowrap; } .btn:active { transform: translateY(0); } .btn .arrow { display: inline-block; transition: transform .15s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); } .btn-light { background: #fff; color: var(--ink); } .btn-light:hover { background: var(--accent); color: var(--accent-ink); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: var(--accent); color: var(--accent-ink); } .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 12.5px 24.5px; } .btn-outline:hover { background: var(--ink); color: #fff; } /* Full-width block shape (product cards) instead of an auto-width pill. Must stay below the variant rules above so display:block wins the cascade. */ .btn-block { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 999px; font-size: 0.9rem; } /* ---- Sections ---- */ section { padding: 76px 0; } .section-head { max-width: 640px; margin: 0 0 40px; } .section-head .kicker { color: var(--accent); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 8px 0 10px; letter-spacing: -0.01em; } .section-head p { color: var(--muted); margin: 0; font-size: 1.02rem; } .section--muted { background: var(--bg-muted); } /* ---- Categories ---- */ .cat-grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; } .cat-card { flex: 1 1 240px; max-width: calc(25% - 13.5px); position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .cat-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,23,26,0.08); } .cat-card .cat-icon { width: 38px; height: 38px; margin-bottom: 20px; color: var(--accent); } .cat-card .cat-icon svg { width: 100%; height: 100%; } .cat-card h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--ink) !important; } .cat-card p { margin: 0 0 20px; color: var(--muted); font-size: 0.9rem; flex-grow: 1; } .cat-card .cat-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.84rem; font-weight: 600; padding-top: 16px; border-top: 1px solid var(--line); } .cat-card .cat-meta .arrow { transition: transform .15s ease; } .cat-card:hover .cat-meta .arrow { transform: translateX(3px); } .cat-card--featured { background: var(--ink); color: #fff; border-color: var(--ink); } .cat-card--featured h3 { color: #fff !important; } .cat-card--featured p { color: rgba(255,255,255,0.72); } .cat-card--featured .cat-icon { color: var(--accent); } .cat-card--featured .cat-meta { border-top-color: rgba(255,255,255,0.18); } .cat-card--featured:hover { border-color: var(--ink); box-shadow: 0 10px 28px rgba(20,23,26,0.28); } .cat-badge { position: absolute; top: 22px; right: 22px; background: var(--ink); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; padding: 5px 10px; border-radius: 999px; } @media (max-width: 900px) { .cat-card { max-width: calc(50% - 9px); } } @media (max-width: 560px) { .cat-card { max-width: 100%; } } /* ---- Products ---- */ .prod-grid { display: flex; flex-wrap: wrap; gap: 24px; } .prod-card { position: relative; flex: 1 1 260px; max-width: calc(25% - 18px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(20,23,26,0.04); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; /* flex column + .prod-body flex:1 + .prod-actions margin-top:auto below: a one- vs two-line product name would otherwise leave the "add to cart" button sitting at a different height on every card in the row, which is what actually made one card read as "a different size" — the cards themselves were always equal height (flex-wrap stretches them), only the button position inside drifted. */ display: flex; flex-direction: column; } .prod-card:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,23,26,0.12); } .prod-media { position: relative; aspect-ratio: 1/1; background: var(--bg-muted); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .prod-media a { display: block; width: 100%; height: 100%; } .prod-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform .3s ease; } .prod-card:hover .prod-media img { transform: scale(1.06); } .prod-body { position: relative; padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; } .prod-body h3 { margin: 0 0 4px; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; } /* color: explicit + !important for the same reason as body's — this text sits inside WooCommerce's own markup, and relying on plain inheritance is exactly what let Elementor's stray global color win before. */ .prod-body h3 a { text-decoration: none; color: var(--ink) !important; } .prod-body h3 a:hover { color: var(--accent) !important; } /* Stretched-link: the title link's ::after covers the whole card, giving a single large "click anywhere to view the product" area without nesting an around the button — the button itself sits above it (z-index) so it keeps its own, independent click target. Standard, accessible pattern (one real link, one visually-expanded hit area), not a second hidden link. */ .prod-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .prod-actions { position: relative; z-index: 2; margin-top: auto; padding-top: 12px; } .prod-body .price { font-weight: 800; font-size: 1.1rem; margin: 6px 0 12px; color: var(--ink) !important; } /* WooCommerce's own get_price_html() markup (.woocommerce-Price-amount, plus / around a sale price) inherits this block's bold/size by default; these two rules only correct the parts that would otherwise look wrong: gets an underline by browser default we don't want, and the struck-through original price should read as secondary, not equal weight. */ .prod-body .price ins { text-decoration: none; } .prod-body .price del { font-weight: 500; font-size: 0.85em; color: var(--muted); margin-right: 4px; } .prod-body .price-note { display: block; font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-top: 2px; } /* Real ESTO instalment note — kugooeesti_esto_calculator_html() (inc/ woocommerce.php) isolates the real WC_Esto_Calculator plugin's own callback before firing its hook, so .prod-esto's content is always exactly the plugin's own real markup, nothing else to hide — this just restyles it (whatever depth .esto_calculator sits at) to match .price-note above rather than the plugin's own default look. */ .prod-esto .esto_calculator { display: block; font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-top: 2px; } .prod-esto .esto_calculator .monthly_payment { font-weight: 500; } @media (max-width: 980px) { .prod-card { max-width: calc(50% - 12px); } } @media (max-width: 600px) { .prod-card { max-width: 100%; } } /* Badges — top-left of the image, stacked. Real, computed states only (see kugooeesti_get_product_badges()): a sale percentage, "new" from the actual publish date, or "out of stock" — never decorative. */ .prod-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .prod-badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; } .prod-badge--sale { background: var(--accent); color: var(--accent-ink); } .prod-badge--new { background: var(--ink); color: #fff; } .prod-badge--stock { background: var(--line); color: var(--muted); } .prod-badge--bestseller { background: #fff; color: var(--accent-dark); } /* Availability — only rendered when WooCommerce's own get_availability() has something worth saying (low stock, backorder, out of stock); a plain "in stock" is intentionally never shown, see the PHP comment. */ .prod-availability { margin: 0 0 10px; font-size: 0.82rem; font-weight: 600; } .prod-availability--out-of-stock { color: #b42318; } .prod-availability--available-on-backorder, .prod-availability--low-in-stock, .prod-availability--low-stock { color: var(--accent-dark); } /* WooCommerce's native add-to-cart loop button (woocommerce_template_loop_ add_to_cart()) — restyled to match .btn-dark.btn-block rather than reimplementing the button by hand, so it keeps WooCommerce's own markup, AJAX behavior, and plugin compatibility (YITH's product add-ons hook into this exact function). Every declaration here is !important: WooCommerce's own core stylesheet ships a generic `.woocommerce a.button` rule (grey fill, 3px radius) whose specificity (0,2,1) beats this rule's (0,2,0) outright, so without !important the button silently reverts to WooCommerce's default look instead of the site's own pill-shaped, black/orange one. */ .prod-actions .button { display: block; width: 100%; text-align: center; padding: 12px; border-radius: 999px !important; font-size: 0.9rem; font-weight: 700; text-decoration: none; border: none !important; cursor: pointer; background: var(--ink) !important; color: #fff !important; transition: background .15s ease, color .15s ease, transform .15s ease; } .prod-actions .button:hover { background: var(--accent) !important; color: var(--accent-ink) !important; transform: translateY(-1px); } .prod-actions .button.loading { opacity: 0.6; pointer-events: none; } .prod-actions .added_to_cart { display: block; margin-top: 8px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; } /* ---- Why us: dark service banner + stat strip ---- */ .service-feature { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 32px 36px; margin-top: 48px; } .service-feature-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .service-feature h3 { margin: 0; font-size: 1.2rem; font-weight: 700; max-width: 38ch; color: #fff !important; } /* Real gap, not incidental inline-whitespace between .btn elements — that whitespace is a valid line-break point, so without an explicit gap it silently collapses to 0 wherever the buttons wrap onto separate lines. */ .service-feature-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .service-feature .btn { flex: none; white-space: nowrap; } .stat-strip { display: flex; flex-wrap: wrap; gap: 32px; } .stat-item { flex: 1 1 0; min-width: 200px; padding-left: 28px; border-left: 1px solid var(--line); } .stat-item:first-child { padding-left: 0; border-left: none; } .stat-item h4 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; } .stat-label { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } @media (max-width: 760px) { .stat-strip { flex-direction: column; gap: 24px; } .stat-item { border-left: none; padding-left: 0; } } /* ---- FAQ — a plain, always-open two-column list (hooldus/product/catalogue pages) — not an accordion there; the homepage preview is the one exception, overridden to a collapsed accordion just below. ---- */ .faq-grid { display: flex; flex-wrap: wrap; column-gap: 48px; } .faq-item { flex: 1 1 calc(50% - 24px); padding: 22px 0; border-bottom: 1px solid var(--line); } .faq-item h3 { font-size: 1.02rem; margin: 0 0 10px; font-weight: 700; color: var(--ink) !important; } .faq-item p, .faq-item-answer { color: var(--muted); font-size: 0.94rem; } .faq-item p { margin: 0; } .faq-item-answer p { margin: 0 0 10px; } .faq-item-answer p:last-child { margin-bottom: 0; } @media (max-width: 760px) { .faq-item { flex: 1 1 100%; } } /* ---- Homepage KKK preview: collapsed accordion, same visual language as the real KKK hub's .faqhub-item (see "FAQ content" block further down) — reuses its .faq-q/.faq-icon/.faq-panel-inner styling as-is, just laid out in the two-column .faq-grid instead of the hub's single-column list. Scoped to #kkk only: the catalogue/hooldus/product FAQ blocks intentionally stay the always-open .faq-item list (see their own doc comments), so this doesn't touch the shared .faq-item rules above. ---- */ /* .faq-grid is a flex row with the default align-items: stretch, which is fine when every item is the same fixed height (the always-open pages) — here items grow when opened, and stretch would otherwise stretch the still-closed item next to it to match, showing as an empty-looking box. */ #kkk .faq-grid { align-items: flex-start; } #kkk .faq-item { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: border-color .15s ease; } #kkk .faq-item:hover { border-color: #c7cbd1; } #kkk .faq-item[open] { border-color: var(--ink); } /* ---- Footer ---- */ footer.site { position: relative; overflow: hidden; padding: 64px 0 28px; font-size: 0.9rem; color: rgba(255,255,255,0.68); background: var(--ink); } footer.site::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: 50% 87%; opacity: 0.5; } /* Below 700px the footer is a single tall stacked column (see .footer-cols below), so cover-fit flips which axis actually crops: width no longer overflows (nothing to crop left/right at 50%) but height overflows a lot, so it's background-position-x, not -y, that controls what's visible. The default 50% x lands on empty background here; shift right so the scooter itself (not just backdrop) shows in the tall mobile footer. */ @media (max-width: 700px) { footer.site::before { background-position: 25% 87%; } } footer.site::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,26,0.55) 0%, rgba(20,23,26,0.93) 55%, rgba(20,23,26,0.98) 100%); } footer.site .container { position: relative; z-index: 1; } .footer-cols { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; } .footer-cols > div { flex: 1 1 160px; } .footer-cols > div.footer-brand-col { flex: 2 1 260px; } .footer-cols > div, .footer-nav li, .footer-nav a { min-width: 0; overflow-wrap: anywhere; } /* Between the single-column stack (below) and the full 5-across row (above), the five columns' combined flex-basis (260px brand + 4 × 160px = 900px) no longer fits the available width, so flex-wrap packs them onto ragged, uneven lines instead of a real grid — the brand block alone on one line, then two nav columns, then the other two, none of it lining up. A real grid forces a clean, predictable 2-column layout in that range instead: the brand block spans both columns on its own row, and the four nav columns line up 2-by-2 underneath. */ @media (min-width: 701px) and (max-width: 1024px) { .footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px; } .footer-cols > div.footer-brand-col { grid-column: 1 / -1; } } @media (max-width: 700px) { .footer-cols { flex-direction: column; gap: 28px; } .footer-cols > div, .footer-cols > div.footer-brand-col { flex: none; width: 100%; } } .footer-tagline { margin-top: 10px; max-width: 280px; color: rgba(255,255,255,0.68); } footer.site h4 { color: #fff; font-size: 0.85rem; margin: 0 0 12px; } .footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .footer-nav a { text-decoration: none; color: rgba(255,255,255,0.68); transition: color .15s ease; } .footer-nav a:hover { color: var(--accent); text-decoration: underline; } .fine { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 20px; font-size: 0.82rem; overflow-wrap: anywhere; } /* ========================================================================== Catalogue — shop / category / subcategory / product-tag archives. Reuses every existing token, and the .btn / .prod-card / .section-head / .cat-card components as-is; nothing here reinvents what already exists above. Genuinely new pieces: breadcrumbs, the filter sidebar/drawer, and the toolbar — none of which have a homepage equivalent to reuse. ========================================================================== */ /* Accessibility utility — referenced by the price filter's min/max labels (visible to screen readers, not sighted users; the number inputs' own placeholders carry the visual hint). */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .catalogue-page { padding-block: 32px 96px; } /* .breadcrumbs/.breadcrumbs-inner: the dark default palette used wherever breadcrumbs.php renders on a dark surface; .page-hero .breadcrumbs below overrides this to a readable light variant on plain white pages. */ .breadcrumbs { margin-bottom: 22px; font-size: 0.85rem; color: rgba(255,255,255,0.55); } .breadcrumbs-inner a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color .15s ease; } .breadcrumbs-inner a:hover { color: var(--accent); } .breadcrumbs-inner .crumb-sep { margin: 0 8px; color: rgba(255,255,255,0.25); } /* ---- Subcategory pills — nested inside .page-hero (see catalogue/ header.php), right below the H1/lede, so only a top gap is needed; the section's own bottom padding already closes the block. ---- */ .subcat-nav { margin: 22px 0 0; } .subcat-nav ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } .subcat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: border-color .15s ease, background .15s ease; } .subcat-pill:hover { border-color: var(--ink); background: var(--bg-muted); } .subcat-pill.is-current { background: var(--ink); border-color: var(--ink); color: #fff; } .subcat-pill.is-current .subcat-count { color: rgba(255,255,255,0.7); } .subcat-count { color: var(--muted); font-weight: 500; font-size: 0.82rem; } /* Same horizontal-scroll-not-wrap treatment as the FAQ page's .cat-nav — keeps the pill row to one line on narrow viewports instead of wrapping into a tall block, with no horizontal page overflow. */ @media (max-width: 760px) { .subcat-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 2px 24px 4px; } .subcat-nav ul::-webkit-scrollbar { display: none; } .subcat-pill { flex: none; } } /* ---- Two-column layout: filters + main ---- */ .catalogue-layout { display: flex; align-items: flex-start; gap: 40px; } .catalogue-main { flex: 1; min-width: 0; } /* ---- Filters ---- */ .catalogue-filters { flex: 0 0 260px; } .catalogue-filters-head { display: none; } /* shown only in the mobile drawer, see below */ .filters-clear { display: inline-block; margin-bottom: 20px; font-size: 0.85rem; font-weight: 700; color: var(--accent-dark); text-decoration: underline; } .filter-group { padding-block: 20px; border-top: 1px solid var(--line); } .filter-group:first-of-type { border-top: none; padding-top: 0; } .filter-group h3 { margin: 0 0 14px; font-size: 0.92rem; font-weight: 700; } .filter-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .filter-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 4px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.9rem; transition: color .15s ease, background .15s ease; } .filter-option:hover { background: var(--bg-muted); } .filter-option.is-active { color: var(--accent-dark); font-weight: 700; } .filter-count { color: var(--muted); font-size: 0.8rem; font-weight: 500; } .filter-option--checkbox { gap: 8px; justify-content: flex-start; } .filter-option--checkbox .filter-count { margin-left: auto; } .filter-checkbox { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line); background: #fff; position: relative; transition: background .15s ease, border-color .15s ease; } .filter-option--checkbox.is-active .filter-checkbox { background: var(--ink); border-color: var(--ink); } .filter-option--checkbox.is-active .filter-checkbox::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .price-filter-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .price-filter-inputs input { width: 0; flex: 1 1 0; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.88rem; font-family: inherit; color: var(--ink); } .price-filter-inputs input:focus-visible { border-color: var(--ink); } .price-filter-sep { color: var(--muted); } .price-filter-currency { color: var(--muted); font-size: 0.85rem; } .price-filter-submit { padding: 9px; font-size: 0.85rem; } /* ---- Toolbar: mobile filter trigger, result count, sort ---- */ .catalogue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .filters-toggle { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 0.88rem; cursor: pointer; } .filters-toggle .icon { width: 18px; height: 18px; } .filters-toggle-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 800; } .catalogue-result-count { color: var(--muted); font-size: 0.88rem; margin: 0; flex: 1; } .catalogue-ordering { margin: 0; } .woocommerce-ordering select { padding: 9px 32px 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink); background: #fff url('data:image/svg+xml;utf8,') no-repeat right 10px center / 14px; appearance: none; cursor: pointer; } .woocommerce-ordering select:focus-visible { border-color: var(--ink); } /* ---- Grid — deliberately no new layout rules: reuses .prod-grid's existing flex/breakpoint behavior from the products section above as-is, so the catalogue's card grid behaves identically to the homepage bestsellers grid rather than a second, subtly-different system. .catalogue-grid exists only as a scoping hook. ---- */ /* ---- Empty state ---- */ .catalogue-empty { max-width: 480px; margin: 40px auto; text-align: center; padding: 48px 24px; } .catalogue-empty h2 { font-size: 1.3rem; margin: 0 0 10px; } .catalogue-empty p { color: var(--muted); margin: 0 0 24px; } /* ---- Pagination (WooCommerce's own woocommerce_pagination() markup) ---- */ .woocommerce-pagination { margin-top: 48px; display: flex; justify-content: center; } .woocommerce-pagination ul.page-numbers { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .woocommerce-pagination .page-numbers li { display: flex; } .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 0.9rem; font-weight: 600; transition: background .15s ease, color .15s ease; } .woocommerce-pagination .page-numbers a:hover { background: var(--bg-muted); } .woocommerce-pagination .page-numbers .current { background: var(--ink); color: #fff; } .woocommerce-pagination .page-numbers .dots { color: var(--muted); } /* ---- Responsive: sidebar becomes an off-canvas drawer below 980px, matching the breakpoint the product grid itself already steps down at (2 columns), so both shifts read as one coordinated layout change. ---- */ @media (max-width: 980px) { .catalogue-layout { display: block; } .filters-toggle { display: inline-flex; } .catalogue-filters { position: fixed; top: 0; right: 0; bottom: 0; z-index: 33; width: min(340px, 86vw); background: #fff; padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; box-shadow: -12px 0 32px rgba(20,23,26,0.18); } .catalogue-filters[data-open="true"] { transform: translateX(0); } .catalogue-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .catalogue-filters-head h2 { margin: 0; font-size: 1.1rem; } .filters-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); } .filters-close .icon { width: 18px; height: 18px; } .filters-backdrop { position: fixed; inset: 0; z-index: 32; background: rgba(20,23,26,0.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .filters-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } } @media (max-width: 600px) { .catalogue-toolbar { flex-wrap: wrap; } .catalogue-result-count { order: 3; flex-basis: 100%; } } /* ---- Category tiles (shop root "Sirvi kategooriate kaupa") — reuses .cat-grid/.cat-card as-is; --tiles only tightens the top margin since this section always follows the catalogue header directly. ---- */ .catalogue-tiles { margin-bottom: 40px; } .catalogue-tiles h2 { font-size: 1.3rem; margin: 0 0 16px; } /* ---- Nested subcategories inside the filter sidebar's category list ---- */ .filter-sub { margin: 2px 0 6px 4px; padding-left: 14px; border-left: 1px solid var(--line); } .filter-sub .filter-option { font-size: 0.86rem; } /* ---- Product card additions: category label + always-visible stock line (a real "Laos saadaval" affirmation, not just the exception states .prod-availability already covered) ---- */ .prod-cat { display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } /* At the catalogue grid's 2-up mobile width (≤480px, see .catalogue-grid below) a card is only ~150px wide — a long real category name like "KuKirin elektritõukerattad", uppercased and letter-spaced, wrapped onto 2-3 cramped lines instead of reading as a short label above the title. */ @media (max-width: 480px) { .prod-cat { font-size: 0.6rem; letter-spacing: 0.02em; } } .prod-availability--in-stock { display: flex; align-items: center; gap: 6px; color: #1f8a3b; } .prod-availability--in-stock .dot { width: 7px; height: 7px; border-radius: 50%; background: #1f8a3b; flex: none; } /* ---- Catalogue grid: an explicit 3-column desktop grid (the sidebar's 260px eats into .prod-grid's flex-based %-width math enough that its homepage-tuned breakpoints don't land cleanly here) ---- */ .catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .catalogue-grid .prod-card { max-width: none; } @media (max-width: 980px) { .catalogue-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .catalogue-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* ---- Toolbar search field (shop root only) ---- */ .catalogue-search { position: relative; flex: 1 1 260px; max-width: 380px; order: 1; } .catalogue-search input[type="search"] { width: 100%; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px 10px 40px; font-family: inherit; font-size: 0.88rem; color: var(--ink); background: #fff; } .catalogue-search input[type="search"]:focus-visible { border-color: var(--ink); } .catalogue-search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .catalogue-toolbar { flex-wrap: wrap; } .catalogue-result-count { order: 2; } .catalogue-ordering { order: 3; margin-left: auto; } @media (max-width: 600px) { .catalogue-search { order: 2; flex-basis: 100%; max-width: none; } .catalogue-result-count { order: 3; } .catalogue-ordering { order: 4; margin-left: 0; } } /* ---- SEO copy + real stat card ---- */ .catalogue-seo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; margin-top: 56px; align-items: start; } .catalogue-seo--full { grid-template-columns: 1fr; } .catalogue-seo--full .catalogue-seo-copy { max-width: 760px; } .catalogue-seo-copy h2 { font-size: 1.5rem; margin: 0 0 14px; } .catalogue-seo-text { color: var(--muted); font-size: 0.95rem; line-height: 1.7; } .catalogue-seo-text p { margin: 0 0 14px; } .catalogue-seo-text p:last-child { margin-bottom: 0; } .catalogue-seo-text a { color: var(--accent-dark); text-decoration: underline; } .stat-card { background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .stat-list .stat b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; } .stat-list .stat span { font-size: 0.8rem; color: var(--muted); } /* Category value props at tablet width: the shared .stat-strip wraps by available space (3-then-1 for 4 items around 768–980px), which reads awkwardly for exactly 4 cards. Scoped to sections with 4 items, since other .stat-strip users (homepage why-us, single product) have 3 items and wrap fine as-is. */ @media (min-width: 761px) and (max-width: 980px) { .catalogue-value-props .stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; } .catalogue-value-props .stat-item { border-left: none; padding-left: 0; } } @media (max-width: 980px) { .catalogue-seo { grid-template-columns: 1fr; } } /* ---- Catalogue FAQ — reuses .faq-grid/.faq-item from the homepage as-is ---- */ .catalogue-faq { margin-top: 48px; } .catalogue-faq h2 { font-size: 1.5rem; margin: 0 0 18px; } @media (max-width: 600px) { .catalogue-tiles h2, .catalogue-seo-copy h2, .catalogue-faq h2 { font-size: 1.2rem; } } /* ========================================================================== Single product page. Reuses every existing token, .btn, .pill (defined below, new variants only), .section-head, .prod-grid/.prod-card/.prod-badges (related products + gallery badges), .stat-strip/.service-feature (the reused why-us.php section), and breadcrumbs as-is. Genuinely new: the gallery + lightbox, the buy box, spec highlight tiles, the feature story rows, the spec table, the model comparison table, and the sticky buy bar. ========================================================================== */ .breadcrumbs-bar { padding: 14px 0; border-bottom: 1px solid var(--line); } .breadcrumbs-bar .breadcrumbs { margin: 0; } .product-page-hero { padding: 44px 0 68px; } .product-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; position: relative; } @media (max-width: 900px) { .product-hero { grid-template-columns: 1fr; gap: 32px; } } /* A zero-size scroll marker the sticky-bar's IntersectionObserver watches (see main.js) — absolutely positioned so it never takes part in the grid's own column/row placement. */ #buybox-sentinel { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; } .product-section { padding-block: 72px; } .product-section .section-head { max-width: 640px; margin: 0 0 40px; } /* Every direct section on the product page in sequence (hero, highlights, story, specs, description, compare, why-us, faq, related) gets a hairline between it and whatever real section precedes it — a product's own mix of optional sections (no story items, no FAQ, etc.) changes which sections render, so a sibling-combinator rule here reaches every actual boundary without hardcoding which two sections happen to be adjacent. */ .woocommerce > section + section { border-top: 1px solid var(--line); } /* The five sections whose big H2 was dropped in favour of just the kicker label (see highlights/description/specs/compare/related.php) need that label to carry real section-title weight on its own — bigger than the sitewide .kicker eyebrow-over-a-big-heading pattern, which stays small everywhere else since a big heading still does the heavy lifting there. */ .product-section .section-head h2.kicker { font-size: 1.15rem; margin: 0; } /* ---- Gallery ---- */ .product-gallery { position: sticky; top: 96px; } @media (max-width: 900px) { .product-gallery { position: static; } } .product-gallery-main { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: var(--bg-muted); border: 1px solid var(--line); } .gallery-main-trigger { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .gallery-main-img { width: 100%; height: 100%; object-fit: contain; padding: 32px; } .gallery-zoom-hint { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.92); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); pointer-events: none; } .gallery-zoom-hint .icon { width: 18px; height: 18px; } .product-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; } .gallery-thumb { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: var(--bg-muted); cursor: pointer; padding: 0; } .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .gallery-thumb.is-active { border-color: var(--ink); } @media (max-width: 560px) { .product-gallery-thumbs { grid-template-columns: repeat(4, 1fr); } } /* ---- Lightbox — plain fixed overlay, no image library ---- */ .lightbox { position: fixed; inset: 0; z-index: 60; display: none; } .lightbox[data-open="true"] { display: block; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(10,12,14,0.94); } .lightbox-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; } .lightbox-img { max-width: min(1100px, 100%); max-height: 100%; object-fit: contain; } .lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 999px; border: none; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .lightbox-close:hover { background: rgba(255,255,255,0.22); } .lightbox-close .icon { width: 20px; height: 20px; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: none; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .lightbox-nav:hover { background: rgba(255,255,255,0.22); } .lightbox-nav .icon { width: 22px; height: 22px; } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; } @media (max-width: 600px) { .lightbox-nav { width: 42px; height: 42px; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } } /* ---- Buy box: pills ---- */ .product-badges-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .pill { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .pill--bestseller { background: rgba(255,106,26,0.12); color: var(--accent-dark); border: 1px solid rgba(255,106,26,0.28); } .pill--sale { background: var(--accent); color: var(--accent-ink); } .pill--new { background: var(--ink); color: #fff; } .pill--stock { background: var(--line); color: var(--muted); } /* ---- Buy box: title / price / stock ---- */ .product-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 10px; letter-spacing: -0.01em; color: var(--ink) !important; } .product-lede { color: var(--muted); font-size: 1.04rem; margin: 0 0 22px; max-width: 46ch; } .product-lede p { margin: 0; } .price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .price-row .product-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink) !important; } .price-row .price-note { color: var(--muted); font-size: 0.9rem; } .stock-line { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; margin: 10px 0 24px; color: #1a7f37; } .stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .stock-line--out-of-stock { color: #b42318; } .stock-line--available-on-backorder, .stock-line--low-in-stock, .stock-line--low-stock { color: var(--accent-dark); } /* ---- Buy box: real add-to-cart form (WooCommerce's own markup) ---- */ .product-add-to-cart { margin-bottom: 22px; } .product-add-to-cart form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .product-add-to-cart .quantity { margin: 0; display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; } .product-add-to-cart .quantity .qty { width: 44px; height: 52px; padding: 0; border: none; text-align: center; font-weight: 700; font-size: 1rem; font-family: inherit; color: var(--ink); -moz-appearance: textfield; } .product-add-to-cart .quantity .qty::-webkit-inner-spin-button, .product-add-to-cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .product-add-to-cart .quantity-step { width: 42px; height: 52px; border: none; background: #fff; font-size: 1.15rem; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; } .product-add-to-cart .quantity-step:hover { background: var(--bg-muted); } .product-add-to-cart .single_add_to_cart_button { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 32px; border-radius: 999px !important; border: none !important; background: var(--ink) !important; color: #fff !important; font-weight: 700; font-size: 1.02rem; cursor: pointer; transition: background .15s ease, transform .15s ease; } .product-add-to-cart .single_add_to_cart_button:hover { background: var(--accent) !important; color: var(--accent-ink) !important; transform: translateY(-1px); } .product-add-to-cart .single_add_to_cart_button.disabled { opacity: 0.5; pointer-events: none; } .product-add-to-cart p.stock { display: none; } /* real availability already shown above via .stock-line */ /* Native speed-limit add-on checkbox — see kugooeesti_render_speed_limit_ addon_field() in inc/woocommerce.php; hooked into the exact same woocommerce_before_add_to_cart_button action a plugin-based add-on would use, so it renders inside the real
above. */ .product-addon { flex-basis: 100%; order: -1; margin: 0 0 6px; } .product-addon-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-muted); cursor: pointer; font-size: 0.94rem; } .product-addon-input { position: absolute; opacity: 0; width: 1px; height: 1px; } .product-addon-check { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s ease, border-color .15s ease; } .product-addon-check svg { width: 13px; height: 13px; opacity: 0; transition: opacity .1s ease; } .product-addon-input:checked ~ .product-addon-check { background: var(--ink); border-color: var(--ink); } .product-addon-input:checked ~ .product-addon-check svg { opacity: 1; } .product-addon-input:focus-visible ~ .product-addon-check { outline: 2.5px solid var(--focus); outline-offset: 2px; } .product-addon-text { flex: 1; font-weight: 600; } .product-addon-price { color: var(--accent-dark); font-weight: 700; } .finance-note { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 0.86rem; color: var(--muted); margin-bottom: 26px; } .finance-note svg { width: 20px; height: 20px; color: var(--accent-dark); flex: none; margin-top: 1px; } .finance-note strong { color: var(--ink); } /* Real ESTO instalment note — same kugooeesti_esto_calculator_html() call and isolated-callback guarantee as .prod-esto (see its comment). */ .finance-note-esto .esto_calculator { display: block; } .finance-note-esto .esto_calculator .monthly_payment { font-weight: 500; color: var(--ink); } .trust-list { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; font-size: 0.92rem; color: var(--ink); list-style: none; } .trust-list li { display: flex; align-items: flex-start; gap: 10px; } .trust-list .dot2 { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dark); margin-top: 7px; flex: none; } /* ---- Spec highlight tiles ---- */ .spec-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 760px) { .spec-highlights { grid-template-columns: repeat(2, 1fr); } } .spec-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; background: #fff; } .spec-tile .spec-icon { display: block; width: 30px; height: 30px; color: var(--accent-dark); margin-bottom: 14px; } .spec-tile .spec-icon svg { display: block; width: 100%; height: 100%; } .spec-tile .spec-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; } .spec-tile .spec-label { color: var(--muted); font-size: 0.85rem; margin-top: 4px; } /* ---- Feature story: alternating numbered rows ---- */ .feature-row { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 32px 0; border-top: 1px solid var(--line); max-width: 1180px; margin: 0 auto; padding-inline: 24px; } .feature-row:last-child { border-bottom: 1px solid var(--line); } .feature-row .idx { font-size: 2.6rem; font-weight: 800; color: var(--line); line-height: 1; } .feature-row h3 { margin: 0 0 8px; font-size: 1.15rem; } .feature-row p { margin: 0; color: var(--muted); max-width: 62ch; } @media (max-width: 640px) { .feature-row { grid-template-columns: 1fr; gap: 8px; } .feature-row .idx { font-size: 1.6rem; } } /* ---- Spec table ---- */ .spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; table-layout: fixed; } .spec-table tr { border-bottom: 1px solid var(--line); } .spec-table th, .spec-table td { text-align: left; padding: 14px 12px; overflow-wrap: break-word; } .spec-table th { color: var(--muted); font-weight: 600; width: 40%; } .spec-table td { font-weight: 600; } .spec-table tr:nth-child(odd) { background: var(--bg-muted); } @media (max-width: 480px) { .spec-table th, .spec-table td { padding: 12px 10px; font-size: 0.85rem; } .spec-table th { width: 46%; } } .product-description { max-width: 74ch; color: var(--ink); line-height: 1.7; } .product-description p { margin: 0 0 1.1em; } .product-description p:last-child { margin-bottom: 0; } .product-description strong { font-weight: 700; } /* ---- Compare table ---- */ .compare-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; } .compare-table { width: 100%; border-collapse: collapse; min-width: 600px; } .compare-table th, .compare-table td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; } .compare-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; } .compare-table .col-current { background: var(--ink); color: #fff; } .compare-table thead .col-current { color: #fff; } .compare-table .col-current .pill { background: var(--accent); color: var(--accent-ink); } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table .btn { padding: 8px 18px; font-size: 0.85rem; } .compare-table .btn.is-current { background: #fff; color: var(--ink); cursor: default; } .compare-hint { display: none; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 0.78rem; color: var(--muted); } .compare-hint svg { width: 14px; height: 14px; flex-shrink: 0; } /* Row-label column stays put while the model columns scroll underneath it * — on a narrow screen the label + one model column already fill the * width, so without this the label itself would scroll away first and * every value would be unreadable out of context. */ @media (max-width: 760px) { .compare-table { min-width: 0; } .compare-table th, .compare-table td { padding: 12px 10px; font-size: 0.85rem; white-space: nowrap; } .compare-table thead th { font-size: 0.68rem; letter-spacing: 0.02em; } .compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 1px 0 0 var(--line); width: 112px; min-width: 112px; max-width: 112px; white-space: normal; overflow-wrap: break-word; word-break: break-word; font-size: 0.8rem; } .compare-table th:not(:first-child), .compare-table td:not(:first-child) { min-width: 130px; } .compare-hint { display: flex; } } /* ---- Sticky buy bar ---- */ .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(20,23,26,0.1); padding: 12px clamp(16px,4vw,32px); transform: translateY(120%); transition: transform .25s ease; } .sticky-bar.is-visible { transform: translateY(0); } .sticky-bar .row { display: flex; align-items: center; gap: 16px; padding: 0; } .sticky-bar .thumb-sm { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; flex: none; background: var(--bg-muted); } .sticky-bar .thumb-sm img { width: 100%; height: 100%; object-fit: contain; } .sticky-bar .info { flex: 1; min-width: 0; } .sticky-bar .info .name { font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-bar .info .price { color: var(--accent-dark); font-weight: 800; font-size: 0.92rem; } .sticky-bar .btn { padding: 12px 22px; font-size: 0.9rem; flex: none; } @media (max-width: 560px) { .sticky-bar .info .name { display: none; } } /* ========================================================================== Hooldus (repair & maintenance) page ========================================================================== */ /* ---- Hero: the same compact, light .page-hero pattern the catalogue/ Cart/Contact/FAQ pages already use (see catalogue/header.php) — same .kicker/h1/.lede, just with two CTAs instead of one. Deliberately not the homepage's full-photo .hero: reusing that exact component made this page indistinguishable from the homepage at a glance. */ .hooldus-hero-ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; } .hooldus-hero-secondary { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; color: var(--ink); text-decoration: none; } .hooldus-hero-secondary:hover { color: var(--accent-dark); } .hooldus-hero-secondary span { transition: transform .15s ease; } .hooldus-hero-secondary:hover span { transform: translateX(3px); } /* ---- Hooldus vs remont path cards ---- */ .path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .path-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; } .path-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-dark); margin-bottom: 18px; } .path-icon svg { width: 22px; height: 22px; } .path-card h3 { font-size: 1.3rem; margin: 0 0 10px; color: var(--ink) !important; } .path-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; margin: 0 0 20px; flex: 1; } .path-highlight { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: var(--bg-muted); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; } .path-highlight span { font-size: 0.88rem; color: var(--muted); font-weight: 600; } .path-highlight b { font-size: 1.25rem; font-weight: 800; color: var(--ink); } .path-highlight--muted b { color: var(--accent-dark); } @media (max-width: 760px) { .path-grid { grid-template-columns: 1fr; } } /* ---- Benefit cards ---- */ .benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .benefit-card { background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .benefit-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; } .benefit-card-icon svg { width: 20px; height: 20px; } .benefit-card h3 { font-size: 1.03rem; margin: 0 0 8px; } .benefit-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; margin: 0; } @media (max-width: 980px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .benefit-grid { grid-template-columns: 1fr; } } /* ---- Process timeline ---- Structural fix for the old version's fragile alignment: each step's number circle + connecting line live in .process-step-head, a container with its own fixed height (44px) completely separate from the heading/ description below it. Because .process-step-head's height never depends on how much text follows, the circles and the line between them always sit on the exact same axis no matter how long any one step's copy runs — this doesn't rely on grid stretch or matched text heights to look right. */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; } .process-step { position: relative; padding: 0 24px 0 0; } .process-step-head { position: relative; height: 44px; margin-bottom: 18px; } .process-step:not(:last-child) .process-step-head::after { content: ''; position: absolute; top: 22px; left: 44px; right: -24px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); } .process-num { position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; } .process-step h3 { font-size: 1rem; margin: 0 0 8px; } .process-step p { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin: 0; } @media (max-width: 980px) and (min-width: 761px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } .process-step { padding-right: 24px; } .process-step:nth-child(odd):not(:last-child) .process-step-head::after { display: block; } .process-step:nth-child(even) .process-step-head::after { display: none; } } /* Mobile: a vertical timeline instead of a horizontal one — the circle moves into its own fixed-width left column (via a step-level grid, not the head container growing), with a dashed line running down through that column's height, sized to the tallest of its own two grid rows (number spacer + text) rather than any manually-guessed pixel value. */ @media (max-width: 760px) { .process-grid { display: block; } .process-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; padding: 0 0 28px; } .process-step:last-child { padding-bottom: 0; } .process-step-head { grid-column: 1; grid-row: 1 / span 2; height: auto; margin-bottom: 0; } .process-step-head::after { display: none; } .process-step:not(:last-child) .process-step-head::before { content: ''; position: absolute; top: 44px; bottom: -8px; left: 21px; width: 2px; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); } .process-step h3 { grid-column: 2; grid-row: 1; margin-top: 10px; } .process-step p { grid-column: 2; grid-row: 2; } } /* ---- Baashooldus package card ---- */ .package-card { margin: 64px 0 0; } .package-inner { display: grid; grid-template-columns: 1.5fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(20,23,26,0.05), 0 10px 24px rgba(20,23,26,0.06); } .package-main { padding: 36px 40px; background: var(--bg); } .package-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .package-main h2 { font-size: 1.55rem; margin: 0 0 10px; } .package-main > p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; margin: 0 0 22px; max-width: 56ch; } .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; padding: 0; list-style: none; } .checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; line-height: 1.45; color: var(--ink); } .checklist li svg { flex-shrink: 0; margin-top: 2px; color: var(--success); } .checklist-note { font-size: 0.78rem; color: var(--muted); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); } /* "Vaata kõiki töid" — plain
, same no-JS accordion pattern as the price list/terms sections. Its own .checklist (the remaining items) only exists inside the open panel, so it needs its own top margin since it isn't adjacent to .package-main > p any more. */ .checklist-more { margin-top: 14px; } .checklist-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; color: var(--accent-dark); } .checklist-more summary::-webkit-details-marker { display: none; } .checklist-more summary::marker { content: ''; } .checklist-more summary .chev { transition: transform 0.18s ease; } .checklist-more[open] summary .chev { transform: rotate(180deg); } .checklist-more .checklist { margin-top: 16px; } .package-side { background: var(--ink); color: #fff; padding: 36px 34px; display: flex; flex-direction: column; justify-content: center; } .package-side .ps-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); font-weight: 700; margin-bottom: 10px; } .package-side .ps-price { font-size: 2.75rem; font-weight: 800; margin-bottom: 6px; } .package-side .ps-note { font-size: 0.84rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0 0 24px; } .package-side .btn { margin-bottom: 10px; } .package-side .ps-sub { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.55); text-align: center; } @media (max-width: 980px) { .package-inner { grid-template-columns: 1fr; } } @media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } .package-main, .package-side { padding: 26px 22px; } } /* ---- Price list accordion ---- */ .price-cat { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; } /* ---- "Ei mingeid üllatusi" trust callout, above the price list ---- */ .trust-callout { display: flex; align-items: flex-start; gap: 16px; background: var(--accent-soft); border: 1px solid rgba(255,106,26,0.2); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 28px; } .trust-callout-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--bg); color: var(--accent-dark); } .trust-callout-icon svg { width: 18px; height: 18px; } .trust-callout strong { display: block; font-size: 0.98rem; margin-bottom: 4px; } .trust-callout p { margin: 0; font-size: 0.88rem; color: var(--ink); line-height: 1.55; } .price-cat summary { padding: 20px 24px; font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-muted); } .price-cat summary::-webkit-details-marker { display: none; } .price-cat summary::marker { content: ''; } .price-cat summary .cnt { font-weight: 500; font-size: 0.82rem; color: var(--muted); margin-right: auto; margin-left: 12px; } .price-cat summary .chev { transition: transform 0.18s ease; color: var(--muted); flex-shrink: 0; } .price-cat[open] summary .chev { transform: rotate(180deg); } .price-rows { padding: 6px 24px 18px; } /* flex-wrap: nowrap is explicit here, not just the flex default — a different, unrelated .price-row rule earlier in this file (the single- product price display) sets flex-wrap: wrap, and without overriding it here that leaks in via the cascade (same selector, no properties collide otherwise) and drops .pr-price onto its own centered line under .pr-name instead of aligning it to the row's right edge. */ .price-row { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); } .price-row:last-child { border-bottom: none; } .price-row .pr-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); } .price-row .pr-note { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-top: 2px; } .price-row .pr-price { font-size: 0.92rem; font-weight: 700; white-space: nowrap; text-align: right; color: var(--ink); } .price-row .pr-price .alt { display: block; font-size: 0.76rem; font-weight: 500; color: var(--muted); } /* ---- Delivery / storage tables ---- */ .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .info-card { background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .info-card h3 { font-size: 1.05rem; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } .info-card h3 svg { color: var(--accent); } /* Courier is the lead card in this pair (the section exists because of it — storage is the secondary, "what happens after" info) — same card shape as .info-card, just a light accent border instead of the plain .line one, and its own icon tinted to match. */ .info-card--primary { border-color: rgba(255,106,26,0.35); } .info-card--primary h3 svg { color: var(--accent-dark); } .mini-table { width: 100%; border-collapse: collapse; } .mini-table tr { border-bottom: 1px solid var(--line); } .mini-table tr:last-child { border-bottom: none; } .mini-table td { padding: 10px 0; font-size: 0.88rem; color: var(--ink); } .mini-table td:last-child { text-align: right; font-weight: 700; } .mini-table--kaal thead th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; padding: 0 0 10px; border-bottom: 1px solid var(--line); } .mini-table--kaal thead th:last-child { text-align: right; } .mini-table--kaal tbody tr:first-child td { padding-top: 14px; } .info-card ul { margin: 4px 0 0; padding: 0; list-style: none; } .info-card ul li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); } .info-card ul li:last-child { border-bottom: none; } .info-card ul li b { font-weight: 700; white-space: nowrap; } @media (max-width: 980px) { .info-grid { grid-template-columns: 1fr; } } /* ---- Request form + location ---- */ .form-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; } /* Grid items default to min-width:auto (their content's min-content), not 0 — normally invisible, but the native below refuses to shrink below its own browser-rendered width ("Choose file No file chosen"), and that floor was propagating all the way up through .field > .form-card > .form-layout, overflowing the whole page on narrow viewports even though the grid itself had already collapsed to a single column. */ .form-layout > * { min-width: 0; } /* The location card used to be this grid's second column; now that it's its own section (see .location-section below), the form is the only thing left in this layout — width-capped so a single card doesn't stretch edge-to-edge on a wide viewport, and left-aligned (no auto margin) so it lines up under the left-aligned .section-head above it. */ .form-layout--solo { display: block; max-width: 640px; } .form-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: 0 1px 2px rgba(20,23,26,0.05), 0 10px 24px rgba(20,23,26,0.06); } .form-card h2 { font-size: 1.35rem; margin: 0 0 8px; } .form-card > p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0 0 24px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 0.84rem; font-weight: 600; color: var(--ink); } .field label .req, .req { color: var(--accent); } .field input, .field textarea { border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; font-size: 0.9rem; background: var(--bg); font-family: inherit; color: var(--ink); } .field input:focus, .field textarea:focus { outline: 2.5px solid var(--focus); outline-offset: 2px; } .field textarea { resize: vertical; min-height: 110px; } .field-file { border: 1.5px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; font-size: 0.85rem; color: var(--muted); } .field-file svg { margin-bottom: 6px; color: var(--muted); } .field-file input[type="file"] { display: block; margin: 8px auto 0; font-size: 0.82rem; max-width: 100%; min-width: 0; } .field-hint { font-size: 0.78rem; color: var(--muted); font-weight: 400; } .form-submit { width: 100%; justify-content: center; padding: 14px; font-size: 0.98rem; margin-top: 6px; } .form-consent { font-size: 0.76rem; color: var(--muted); margin: 12px 0 0; line-height: 1.5; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-notice { border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; } .form-notice--success { background: rgba(31,138,59,0.08); border: 1px solid rgba(31,138,59,0.25); } .form-notice--success h2 { font-size: 1.15rem; margin: 0 0 6px; color: var(--success); } .form-notice--success p { margin: 0; color: var(--ink); font-size: 0.9rem; } .form-notice--error { background: rgba(227,92,20,0.08); border: 1px solid rgba(227,92,20,0.3); } .form-notice--error ul { margin: 0; padding: 0 0 0 18px; } .form-notice--error li { color: var(--accent-dark); font-size: 0.88rem; margin-bottom: 4px; } .form-notice--error li:last-child { margin-bottom: 0; } /* Its own full-width section now (see template-parts/hooldus/location- section.php), not a sidebar next to the form — a wide two-column card (real map | real address/hours/phone) rather than the old stacked sidebar shape, so the workshop reads as a strong, standalone trust signal instead of another block of text. */ .location-card { background: var(--bg-muted); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; } .location-card .map-embed { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; filter: grayscale(0.15); } .location-body { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; } .location-body h3 { font-size: 1.15rem; margin: 0 0 18px; } @media (max-width: 760px) { .location-card { grid-template-columns: 1fr; } .location-card .map-embed { min-height: 220px; } .location-body { padding: 24px; } } .loc-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 0.88rem; color: var(--ink); } .loc-row:last-child { margin-bottom: 0; } .loc-row svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; } .loc-row .lab { color: var(--muted); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .contact-quick { display: flex; gap: 10px; margin-top: 18px; } .contact-quick a { flex: 1; text-align: center; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px; font-weight: 700; font-size: 0.85rem; text-decoration: none; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 7px; transition: border-color .15s ease; } .contact-quick a:hover { border-color: var(--ink); } @media (max-width: 980px) { .form-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } .form-card { padding: 22px; } } /* ---- Terms accordion ---- */ .terms details { border-top: 1px solid var(--line); padding: 18px 0; } .terms details:last-child { border-bottom: 1px solid var(--line); } .terms summary { font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); } .terms summary::-webkit-details-marker { display: none; } .terms summary::marker { content: ''; } .terms summary .chev { transition: transform 0.18s ease; color: var(--accent); flex-shrink: 0; } .terms details[open] summary .chev { transform: rotate(180deg); } .terms .terms-body { margin-top: 14px; font-size: 0.88rem; color: var(--muted); line-height: 1.7; } .terms .terms-body p { margin: 0 0 10px; } .terms .terms-body p:last-child { margin-bottom: 0; } .faq-more-link { margin: 24px 0 0; text-align: center; } .faq-more-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.92rem; color: var(--accent-dark); text-decoration: none; } .faq-more-link a:hover { text-decoration: underline; } /* ---- Fixed mobile "Telli hooldus" bar (mobile only, always visible while scrolling — unlike .sticky-bar on the product page, no scroll-triggered show/hide needed since this page has no buy box to wait for). Must be position:fixed, not sticky: this element sits right at the end of the page's content (just before the footer), so position:sticky only ever engages for the brief moment its own static position nears the bottom of the document — it never actually stays visible while scrolling through the rest of the page, which defeats the point of it. The real .sticky-bar on the product page uses fixed for the same reason. Body padding compensates so the bar never covers real content, since (unlike .sticky-bar) this one has no show/hide state to keep it out of the way the rest of the time. ---- */ .mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: var(--bg); border-top: 1px solid var(--line); padding: 12px 16px; box-shadow: 0 -6px 18px rgba(20,23,26,0.08); } .mobile-cta .btn { width: 100%; justify-content: center; } @media (max-width: 640px) { .mobile-cta { display: block; } body.page-template-page-hooldus-php { padding-bottom: 76px; } } /* Hooldus's bar carries two real actions (order vs. describe a fault), not one — same fixed bottom bar, just laid out as a row of two equal buttons instead of the single full-width one .mobile-cta otherwise renders. Flex items default to min-width:auto, so without min-width:0 here a button won't shrink below its own text's width — at .btn's normal padding/font-size, "Saada veakirjeldus" plus "Telli hooldus" together are wider than a real phone screen, so the row overflowed and pushed the second button half off the right edge instead of both fitting. Smaller padding/font-size plus allowing the label to wrap keeps both fully on-screen and tappable at real mobile widths. */ .hooldus-mobile-cta { gap: 8px; } .hooldus-mobile-cta .btn { width: auto; flex: 1; min-width: 0; padding: 12px 10px; font-size: 0.86rem; white-space: normal; text-align: center; line-height: 1.25; } @media (max-width: 640px) { .hooldus-mobile-cta { display: flex; } } /* ========================================================================== KKK (FAQ hub) page ========================================================================== */ .faq-see-all { margin: 28px 0 0; } /* ---- Compact intro: plain light section, not the dark .catalogue-header band — this is a utility/search page, not a category/service landing. ---- */ .faq-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); } .faq-hero .kicker { color: var(--accent-dark); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .faq-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; margin: 10px 0 14px; font-weight: 800; letter-spacing: -0.02em; max-width: 760px; } .faq-hero .lede { font-size: 1.02rem; color: var(--muted); margin: 0 0 30px; max-width: 620px; } .faq-search { position: relative; max-width: 560px; } .faq-search input { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 16px 50px; transition: border-color .15s ease, box-shadow .15s ease; } .faq-search input::placeholder { color: #94989e; } .faq-search input:hover { border-color: #c7cbd1; } .faq-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,23,26,0.08); } .faq-search .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; } .faq-search .icon svg { width: 100%; height: 100%; } /* ---- Sticky category filter pills ---- */ .cat-nav-wrap { position: sticky; top: 73px; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); } .cat-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; } .cat-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; } .cat-pill:hover { border-color: var(--ink); } .cat-pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } @media (max-width: 760px) { .cat-nav-wrap { top: 65px; } .cat-nav { flex-wrap: nowrap; overflow-x: auto; padding: 14px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding-left: 24px; padding-right: 24px; } .cat-nav::-webkit-scrollbar { display: none; } } /* ---- FAQ content: grouped native
accordion. .faqhub-item (not .faq-item) — that class is already the always-visible two-column FAQ pattern used on the homepage/catalogue/product pages; a bare accordion row needs different box behavior, so it gets its own name rather than overloading the existing one. ---- */ .faq-groups { display: flex; flex-direction: column; gap: 56px; } .faq-category { scroll-margin-top: 150px; } .faq-category-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; } .faq-category-head h2 { font-size: 1.3rem; margin: 0; letter-spacing: -0.01em; } .faq-category-head .faq-category-count { color: var(--muted); font-size: 0.88rem; font-weight: 600; flex: none; } .faq-list { display: flex; flex-direction: column; gap: 10px; } .faqhub-item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s ease; } .faqhub-item:hover { border-color: #c7cbd1; } .faqhub-item[open] { border-color: var(--ink); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; list-style: none; color: var(--ink); cursor: pointer; padding: 20px 22px; font-size: 1rem; font-weight: 600; line-height: 1.4; border-radius: var(--radius); } .faq-q::-webkit-details-marker { display: none; } .faq-q::marker { content: ''; } .faq-q:hover { color: var(--accent-dark); } .faq-icon { flex: none; position: relative; width: 22px; height: 22px; color: var(--ink); } .faq-icon .bar { position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); } .faq-icon .bar-h { width: 14px; height: 2px; } .faq-icon .bar-v { width: 2px; height: 14px; transition: transform .2s ease, opacity .2s ease; } .faqhub-item[open] .faq-icon { color: var(--accent-dark); } .faqhub-item[open] .faq-icon .bar-v { transform: translate(-50%, -50%) rotate(90deg) scale(0.001, 1); opacity: 0; } .faq-panel-inner p { margin: 0; padding: 0 22px 22px; max-width: 68ch; color: var(--muted); font-size: 0.96rem; line-height: 1.7; } .faq-empty { display: none; text-align: center; padding: 60px 20px; color: var(--muted); } .faq-empty.is-visible { display: block; } .faq-empty h3 { color: var(--ink); margin: 0 0 8px; font-size: 1.1rem; } .faq-empty p { margin: 0 0 20px; } @media (max-width: 760px) { .faq-hero { padding: 40px 0 28px; } .faq-groups { gap: 44px; } .faq-q { padding: 18px; font-size: 0.98rem; } .faq-panel-inner p { padding: 0 18px 20px; } } /* ========================================================================== Kontakt (contact) page ========================================================================== */ /* ---- Compact intro, same plain-light pattern as .faq-hero ---- */ .page-hero { padding: 56px 0 44px; border-bottom: 1px solid var(--line); } .page-hero .kicker { color: var(--accent-dark); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } /* color: !important — same leftover Elementor Kit bleed-through as body's own rule above (.elementor-kit-1173 h1 sets its own orange, which beats plain inheritance since it targets h1 directly). */ .page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; margin: 10px 0 14px; font-weight: 800; letter-spacing: -0.02em; max-width: 760px; color: var(--ink) !important; } .page-hero .lede { font-size: 1.02rem; color: var(--muted); margin: 0 0 28px; max-width: 620px; } /* Same reduction as .faq-hero's own mobile override — less top/bottom air on a short viewport, where the H1's clamp() already shrinks to ~30px. */ @media (max-width: 760px) { .page-hero { padding: 40px 0 28px; } } /* ---- Category hero notice — real, opt-in per-category caveat (see _kugooeesti_cat_notice in catalogue/header.php), e.g. flagging that not every "Edasijõudnutele" model is street-legal. Amber/caution styling, distinct from the brand's orange accent so it doesn't read as a CTA. ---- */ .cat-notice { display: inline-flex; align-items: flex-start; gap: 10px; margin: 0 0 28px; padding: 12px 16px; background: #fff4e5; border: 1px solid #f3c98b; border-radius: var(--radius); color: #7a4a00; font-size: 0.92rem; line-height: 1.5; max-width: 620px; } .cat-notice-icon { flex: none; line-height: 1.5; } .quick-links { display: flex; flex-wrap: wrap; gap: 12px; } .quick-link { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 600; transition: border-color .15s ease; } .quick-link:hover { border-color: var(--ink); } .quick-link .ico { flex: none; width: 18px; height: 18px; color: var(--accent-dark); } .quick-link .ico svg { width: 100%; height: 100%; } /* ---- Form + sidebar ---- */ .contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .field .optional { color: var(--muted); font-weight: 500; } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; } .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 8px; } .form-privacy { margin: 0; color: var(--muted); font-size: 0.82rem; max-width: 38ch; } .form-success { text-align: center; padding: 36px 12px; } .form-success .check { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .form-success .check svg { width: 26px; height: 26px; } .form-success h3 { margin: 0 0 8px; font-size: 1.15rem; } .form-success p { margin: 0 auto; max-width: 36ch; color: var(--muted); font-size: 0.96rem; } /* ---- Sidebar cards ---- */ .sidebar { display: flex; flex-direction: column; gap: 20px; } .info-row { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); } .info-row:first-of-type { border-top: none; padding-top: 0; } .info-row .ico { flex: none; width: 20px; height: 20px; color: var(--accent-dark); margin-top: 2px; } .info-row .ico svg { width: 100%; height: 100%; } .info-row div { min-width: 0; } .info-row .label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 3px; } .info-row .value { font-size: 0.96rem; font-weight: 600; word-break: break-word; color: var(--ink); } .info-row a.value { text-decoration: none; } .info-row a.value:hover { color: var(--accent-dark); } .hours-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .hours-table tr { border-top: 1px solid var(--line); } .hours-table tr:first-child { border-top: none; } .hours-table td { padding: 10px 0; color: var(--ink); } .hours-table td:first-child { color: var(--muted); } .hours-table td:last-child { text-align: right; font-weight: 600; } .hours-table tr.is-today td { color: var(--ink); } .hours-table tr.is-today td:first-child { font-weight: 700; color: var(--accent-dark); } .map-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); } .map-card-embed { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; filter: grayscale(0.15); } .map-card-body { padding: 18px 20px; } .map-card-body .value { font-weight: 700; font-size: 0.98rem; margin-bottom: 4px; color: var(--ink); } .map-card-body a.btn { margin-top: 14px; width: 100%; text-align: center; padding: 11px 20px; font-size: 0.88rem; } .btn-secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--ink); } /* ========================================================================== Cart page. Reuses .page-hero (Contact/FAQ pattern), .breadcrumbs, .btn, .section-head/ .section--muted/.prod-grid.catalogue-grid/.prod-card (cross-sell — the exact same product-card component the shop catalogue uses), and .visually-hidden. Genuinely new: the item rows, the cart-scoped qty stepper (same pattern as the product page's buy box, restyled smaller), the summary card, the coupon row, and the empty state. ========================================================================== */ /* .breadcrumbs/.breadcrumbs-inner default to the dark .catalogue-header palette — this page's .page-hero sits on a plain white background, so it needs its own readable variant. */ .page-hero .breadcrumbs { color: var(--muted); } .page-hero .breadcrumbs-inner a { color: var(--muted); } .page-hero .breadcrumbs-inner a:hover { color: var(--ink); } .page-hero .breadcrumbs-inner .crumb-sep { color: #c7cbd1; } .page-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; } .page-hero-top h1 { margin: 0; } .page-hero .item-count { color: var(--muted); font-size: 0.96rem; font-weight: 600; } /* Real WooCommerce notices (coupon errors, "item removed", stock warnings) — no styling existed yet since the cart page is the first place wc_print_notices() actually gets called (see woocommerce/cart/cart.php). */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-error, .woocommerce-info { list-style: none; border-radius: 10px; padding: 16px 20px; margin: 0 0 24px; font-size: 0.92rem; } /* WooCommerce's own stylesheet gives each notice type an absolutely positioned icon (its bundled "WooCommerce" icon font) sized and placed for WC's default padding — our simpler padding above doesn't reserve room for it, so the icon lands on top of the first word instead of beside it. This theme has its own inline-SVG icon system elsewhere (kugooeesti_icon()) rather than that font, so the plain-text notice reads cleaner than trying to re-pad around a mismatched icon. */ .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { content: none; } .woocommerce-message { background: rgba(31,138,59,0.08); border: 1px solid rgba(31,138,59,0.25); color: var(--ink); } .woocommerce-error { background: rgba(227,92,20,0.08); border: 1px solid rgba(227,92,20,0.3); } .woocommerce-error li { color: var(--accent-dark); } .woocommerce-info { background: var(--bg-muted); border: 1px solid var(--line); color: var(--ink); } .woocommerce-message a, .woocommerce-error a, .woocommerce-info a { color: inherit; font-weight: 700; text-decoration: underline; } .cart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 56px; } .cart-grid.is-empty { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1024px) { .cart-grid { grid-template-columns: minmax(0, 1fr); } } .cart-items-wrap { min-width: 0; } .cart-items { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cart-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto auto; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 0; } .cart-item-media { width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--bg-muted); flex: none; } .cart-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-item-info { min-width: 0; } .cart-item-info h3 { margin: 0 0 4px; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-item-info h3 a { text-decoration: none; color: var(--ink); } .cart-item-info h3 a:hover { color: var(--accent-dark); } .cart-item-info .spec { margin: 0; color: var(--muted); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-item-info .unit-price-mobile { display: none; margin: 6px 0 0; font-size: 0.88rem; font-weight: 700; } .cart-item .quantity { margin: 0; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; } .cart-item .quantity .qty { width: 32px; height: 34px; padding: 0; border: none; text-align: center; font-weight: 700; font-size: 0.94rem; font-family: inherit; color: var(--ink); -moz-appearance: textfield; } .cart-item .quantity .qty::-webkit-inner-spin-button, .cart-item .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .cart-item .quantity-step { width: 34px; height: 34px; border: none; background: var(--bg); color: var(--ink); font-size: 1.05rem; cursor: pointer; font-family: inherit; line-height: 1; transition: background .15s ease; } .cart-item .quantity-step:hover { background: var(--bg-muted); } .cart-item-price { font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; flex: none; text-align: right; min-width: 76px; } .remove-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .remove-btn:hover { background: rgba(227,92,20,0.08); color: var(--accent-dark); } .remove-btn svg { width: 16px; height: 16px; } @media (max-width: 640px) { .cart-item { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 10px; padding: 16px; } .cart-item-media { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; align-self: start; } .cart-item-info { grid-column: 2; grid-row: 1; } .cart-item-info .unit-price-mobile { display: block; } .cart-item-price { display: none; } .cart-item .qty-stepper { grid-column: 2; grid-row: 2; justify-self: start; } .remove-btn { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; margin: 0; } } .cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; } .continue-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.94rem; } .continue-link svg { width: 16px; height: 16px; transition: transform .15s ease; } .continue-link:hover svg { transform: translateX(-3px); } /* ---- Summary sidebar ---- */ .summary-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: sticky; top: 96px; } .summary-card h2 { margin: 0 0 20px; font-size: 1.15rem; } .summary-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 0.94rem; border-top: 1px solid var(--line); gap: 12px; } .summary-row:first-of-type { border-top: none; padding-top: 0; } .summary-row .label { color: var(--muted); } .summary-row .value { font-weight: 600; text-align: right; } .summary-row .value.free { color: var(--accent-dark); font-weight: 700; } .summary-row--shipping ul { margin: 0; padding: 0; list-style: none; } .coupon-row { display: flex; gap: 8px; margin: 16px 0; } .coupon-row input { flex: 1; min-width: 0; font-family: inherit; font-size: 0.92rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; transition: border-color .15s ease, box-shadow .15s ease; } .coupon-row input::placeholder { color: #94989e; } .coupon-row input:hover { border-color: #c7cbd1; } .coupon-row input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,23,26,0.08); } .coupon-row button { flex: none; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: background .15s ease; } .coupon-row button:hover { background: #2a2f35; } .summary-total { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; } .summary-total .label { font-weight: 700; font-size: 1.02rem; } .summary-total .value { font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; } .summary-esto { margin: 0 0 22px; color: var(--muted); font-size: 0.84rem; } .summary-trust { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .summary-trust li { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); } .summary-trust .ico { flex: none; width: 17px; height: 17px; color: var(--accent-dark); } .summary-trust .ico svg { width: 100%; height: 100%; } /* ---- Empty cart state ---- */ .cart-empty { text-align: center; padding: 70px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); } .cart-empty .ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: #c7cbd1; margin: 0 auto 22px; } .cart-empty .ico svg { width: 100%; height: 100%; } .cart-empty h2 { margin: 0 0 10px; font-size: 1.2rem; } .cart-empty p { margin: 0 0 26px; color: var(--muted); font-size: 0.98rem; max-width: 44ch; margin-inline: auto; } @media (max-width: 760px) { .cart-grid { padding-block: 40px; } } /* ========================================================================== Checkout page. Reuses .btn, .field, .summary-row/.summary-total/.summary-esto/.summary-trust (cart page — same "order summary" visual system), .woocommerce-error/ .woocommerce-message/.woocommerce-info (also cart page). Genuinely new: the minimized checkout header/footer, the step-progress bar, the step-cards, the option-card radio style (reused for both the real delivery-method field and WooCommerce's own real payment-gateway list), the summary sidebar's item cards, and the confirmation page. ========================================================================== */ /* ---- Minimized header/footer ---- */ .checkout-header .site-nav { justify-content: flex-start; gap: 24px; } .checkout-header .header-link { margin-left: auto; } .header-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; opacity: 0.86; font-size: 0.9rem; font-weight: 600; transition: opacity .15s ease; } .header-link:hover { opacity: 1; } .header-link svg { width: 16px; height: 16px; flex: none; } .header-secure { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.68); font-size: 0.86rem; font-weight: 600; } .header-secure svg { width: 16px; height: 16px; flex: none; color: var(--accent); } @media (max-width: 560px) { .header-secure .full { display: none; } } .checkout-footer { padding: 32px 0; } .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.86rem; color: rgba(255,255,255,0.68); } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .footer-links a { text-decoration: none; color: rgba(255,255,255,0.68); } .footer-links a:hover { color: #fff; text-decoration: underline; } .footer-badges { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-size: 0.82rem; } .footer-badges svg { width: 15px; height: 15px; color: var(--accent); } /* ---- Step progress ---- */ .progress { padding: 28px 0; border-bottom: 1px solid var(--line); } .progress-track { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 460px; margin: 0 auto; } .progress-step { display: flex; align-items: center; gap: 10px; color: var(--muted); } .progress-step .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; flex: none; background: var(--bg); color: var(--muted); } .progress-step .dot svg { width: 13px; height: 13px; } .progress-step .label { font-size: 0.86rem; font-weight: 700; white-space: nowrap; } .progress-step.is-done .dot { background: var(--ink); border-color: var(--ink); color: #fff; } .progress-step.is-done .label { color: var(--ink); } .progress-step.is-current .dot { border-color: var(--ink); color: var(--ink); } .progress-step.is-current .label { color: var(--ink); } .progress-line { width: 36px; height: 1px; background: var(--line); flex: none; } @media (max-width: 560px) { .progress-step .label { display: none; } .progress-step.is-current .label { display: inline; } .progress-line { width: 22px; } } /* ---- Layout ---- */ .checkout-main { padding: 44px 0 80px; } .checkout-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; } @media (max-width: 940px) { .checkout-grid { grid-template-columns: minmax(0, 1fr); } } .form-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .step-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } @media (max-width: 600px) { .step-card { padding: 20px; } } .step-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; } .step-card h2 { margin: 0; font-size: 1.1rem; } .step-card h2 .optional { color: var(--muted); font-weight: 500; font-size: 0.85rem; } /* WC's own real billing-fields wrapper prints its own "Billing details" heading — the step-card already has one, so hide WC's to avoid a visible duplicate (same fix as the earlier sitewide double-title bug). */ .woocommerce-billing-fields > h3 { display: none; } .woocommerce-billing-fields__field-wrapper .form-row { float: none; width: 100%; } .field-notes textarea { min-height: 90px; } /* ---- Option cards (delivery method + WooCommerce's real payment list) ---- */ .option-list { display: flex; flex-direction: column; gap: 10px; } .option-card { position: relative; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .option-card:hover { border-color: #c7cbd1; } .option-card:has(input:checked) { border-color: var(--ink); background: var(--bg-muted); } .option-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .option-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 1px; position: relative; transition: border-color .15s ease; background: var(--bg); } .option-card:has(input:checked) .option-radio { border-color: var(--ink); } .option-card:has(input:checked) .option-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); } .option-card:has(input:focus-visible) .option-radio { outline: 2.5px solid var(--focus); outline-offset: 2px; } .option-body { flex: 1; min-width: 0; } .option-title { font-weight: 700; font-size: 0.96rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .option-title .price { font-weight: 700; font-size: 0.88rem; color: var(--accent-dark); flex: none; } .option-desc { color: var(--muted); font-size: 0.86rem; margin-top: 3px; } /* Replaces .option-list entirely for a service-only cart (see kugooeesti_cart_is_service_only()) — same card footprint as the option it stands in for, so step 2 doesn't visually jump when there's nothing to choose. */ .service-note { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-muted); font-size: 0.9rem; color: var(--ink); line-height: 1.55; } .service-note .ico { flex: none; width: 20px; height: 20px; color: var(--accent-dark); margin-top: 1px; } .service-note .ico svg { width: 100%; height: 100%; } .service-note strong { display: inline-block; margin-top: 4px; } /* ---- Real WooCommerce payment-gateway list, restyled to the same option-card look. WooCommerce's own checkout.js shows/hides each .payment_box (bank/ESTO/card-specific fields and copy) — that's real, native behavior, not reimplemented here. ---- */ .wc_payment_methods { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .wc_payment_method { position: relative; border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s ease, background .15s ease; } .wc_payment_method:has(input:checked) { border-color: var(--ink); background: var(--bg-muted); } .wc_payment_method input.input-radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .wc_payment_method > label { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 48px; cursor: pointer; font-weight: 700; font-size: 0.96rem; } .wc_payment_method > label::before { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); transition: border-color .15s ease; } .wc_payment_method:has(input:checked) > label::before { border-color: var(--ink); } .wc_payment_method > label::after { content: ""; position: absolute; left: 21px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: 0; } .wc_payment_method:has(input:checked) > label::after { opacity: 1; } .wc_payment_method:has(input:focus-visible) > label::before { outline: 2.5px solid var(--focus); outline-offset: 2px; } .wc_payment_method > label img { height: 20px; width: auto; margin-left: auto; } .payment_box { padding: 0 18px 16px 48px; font-size: 0.86rem; color: var(--muted); } .payment_box p:first-child { margin-top: 0; } .payment_box p:last-child { margin-bottom: 0; } .payment_box ul, .payment_box ol { padding-left: 20px; margin: 0.8em 0; } /* Real WC checkbox/notice markup */ p.woocommerce-notice, p#terms_field.form-row { margin: 0 0 16px; } .woocommerce-terms-and-conditions-wrapper { margin: 4px 0 20px; } .woocommerce-terms-and-conditions-wrapper label.checkbox { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 0.88rem; color: var(--muted); padding-left: 32px; } .woocommerce-terms-and-conditions-wrapper label.checkbox a { color: var(--ink); text-decoration: underline; } .woocommerce-terms-and-conditions-wrapper input.input-checkbox { position: absolute; opacity: 0; width: 1px; height: 1px; } .woocommerce-terms-and-conditions-wrapper label.checkbox::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); background: var(--bg); transition: border-color .15s ease, background .15s ease; } .woocommerce-terms-and-conditions-wrapper label.checkbox:has(input:checked)::before { background: var(--ink); border-color: var(--ink); } .woocommerce-terms-and-conditions-wrapper label.checkbox::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; } .woocommerce-terms-and-conditions-wrapper label.checkbox:has(input:checked)::after { opacity: 1; } .woocommerce-terms-and-conditions-wrapper label.checkbox:has(input:focus-visible)::before { outline: 2.5px solid var(--focus); outline-offset: 2px; } .woocommerce-invalid .woocommerce-terms-and-conditions-wrapper label.checkbox::before { border-color: var(--accent-dark); } .place-order { margin-top: 4px; } .place-order .btn { font-size: 1.02rem; padding: 16px 26px; } .submit-note { text-align: center; margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); } /* ---- Summary sidebar ---- */ .summary-col { min-width: 0; } .summary-card { position: sticky; top: 88px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .summary-card h2 { margin: 0 0 18px; font-size: 1.1rem; } .summary-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .summary-item { display: flex; align-items: center; gap: 12px; } .summary-item-media { position: relative; width: 52px; height: 52px; border-radius: 8px; background: var(--bg-muted); overflow: hidden; flex: none; } .summary-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .summary-item-media .qty-badge { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.66rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .summary-item-info { flex: 1; min-width: 0; } .summary-item-info .name { font-size: 0.88rem; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .summary-item-info .spec { font-size: 0.78rem; color: var(--muted); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .summary-item-price { font-size: 0.9rem; font-weight: 700; flex: none; } .summary-edit-link { display: inline-block; font-size: 0.82rem; font-weight: 600; text-decoration: underline; margin: -6px 0 18px; } .summary-vat { margin: 0 0 18px; color: var(--muted); font-size: 0.78rem; } .summary-toggle { display: none; } @media (max-width: 940px) { .summary-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; cursor: pointer; font-family: inherit; text-align: left; margin-bottom: 16px; } .summary-toggle .left { display: flex; align-items: center; gap: 10px; } .summary-toggle .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; flex: none; } .summary-toggle.is-open .chev { transform: rotate(180deg); } .summary-toggle .toggle-label { font-size: 0.9rem; font-weight: 700; text-decoration: underline; } .summary-toggle .toggle-total { font-size: 1.05rem; font-weight: 800; } .summary-col { order: -1; } .summary-card { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; position: static; border: none; padding: 0; } .summary-card.is-open { grid-template-rows: 1fr; } .summary-card-inner { overflow: hidden; min-height: 0; } .summary-card-body { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg); } } /* ---- Confirmation page ---- */ .confirm { padding: 64px 0 90px; } .confirm-card { max-width: 640px; margin: 0 auto; text-align: center; } .confirm-check { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .confirm-check svg { width: 30px; height: 30px; } .confirm-card h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 10px; letter-spacing: -0.01em; } .confirm-card > p { margin: 0 0 8px; color: var(--muted); font-size: 1.02rem; } .confirm-order-no { display: inline-block; margin: 10px 0 32px; padding: 8px 18px; border-radius: 999px; background: var(--bg-muted); border: 1px solid var(--line); font-weight: 700; font-size: 0.92rem; } .confirm-summary { text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 28px; } .confirm-summary h3 { margin: 0 0 16px; font-size: 1rem; } .confirm-contact { color: var(--muted); font-size: 0.94rem; } .confirm-contact a { color: var(--ink); text-decoration: underline; } .confirm-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } @media (max-width: 760px) { .checkout-main { padding: 32px 0 60px; } } /* ========================================================================== Kasutustingimused (Terms) page ========================================================================== */ /* ---- Hero extras: "last updated" badge, print button, company note ---- */ .page-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .updated-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); background: var(--bg-muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; } .updated-badge .ico { width: 15px; height: 15px; color: var(--accent-dark); flex: none; } .updated-badge .ico svg { width: 100%; height: 100%; } .callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-muted); } .callout .ico { flex: none; width: 19px; height: 19px; color: var(--accent-dark); margin-top: 2px; } .callout .ico svg { width: 100%; height: 100%; } .callout p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.65; } .callout strong { color: var(--ink); } .callout a { text-decoration: underline; } .company-note { margin-top: 28px; } /* ---- Legal layout: sticky/scrollspy TOC + long-form content ---- */ .legal-main { padding: 48px 0 90px; } .legal-grid { display: grid; grid-template-columns: 250px 1fr; gap: 52px; align-items: start; } .legal-grid > * { min-width: 0; } @media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } } .toc-wrap { position: sticky; top: 96px; } @media (max-width: 900px) { .toc-wrap { position: static; } } .toc-wrap h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .toc-link { display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; font-size: 0.88rem; line-height: 1.4; transition: border-color .15s ease, color .15s ease; } .toc-link:hover { color: var(--ink); } .toc-link.is-active { border-left-color: var(--accent); color: var(--ink); font-weight: 700; } /* Mobile: collapsible TOC toggle — same disclosure pattern as the checkout order summary's .summary-toggle, new class because the markup (a nav list, not a price total) is different enough to need its own rules. */ .toc-toggle { display: none; } @media (max-width: 900px) { .toc-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; cursor: pointer; font-family: inherit; text-align: left; margin-bottom: 8px; } .toc-toggle .left { display: flex; align-items: center; gap: 10px; } .toc-toggle .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease; flex: none; } .toc-toggle.is-open .chev { transform: rotate(180deg); } .toc-toggle .toc-toggle-label { font-size: 0.92rem; font-weight: 700; } .toc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .toc-panel.is-open { grid-template-rows: 1fr; } .toc-panel-inner { overflow: hidden; min-height: 0; } .toc-panel-body { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--bg); } .toc-wrap h2 { display: none; } .toc-list { gap: 2px; } } /* ---- Legal body typography — applies to the page's real content (block editor output), not a hand-built markup pattern, so it targets tag/block selectors rather than page-specific classes. ---- */ .legal-content { max-width: 74ch; } .legal-content > *:first-child { margin-top: 0; } .legal-content h2 { font-size: 1.35rem; margin: 0 0 18px; letter-spacing: -0.01em; padding-top: 32px; border-top: 1px solid var(--line); scroll-margin-top: 116px; } .legal-content h2:first-of-type { padding-top: 0; border-top: none; } .legal-content h3 { font-size: 1.02rem; margin: 26px 0 10px; scroll-margin-top: 116px; color: var(--ink) !important; } .legal-content p { margin: 0 0 14px; font-size: 0.96rem; line-height: 1.75; color: var(--ink); } .legal-content ul, .legal-content ol { margin: 0 0 14px; padding: 0 0 0 20px; } .legal-content ul { list-style: none; padding-left: 0; } .legal-content ul li { position: relative; padding: 0 0 10px 20px; font-size: 0.96rem; line-height: 1.7; } .legal-content ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .legal-content ol li { padding-bottom: 10px; font-size: 0.96rem; line-height: 1.7; } .legal-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .legal-content a:hover { color: var(--accent-dark); } .legal-content strong { font-weight: 700; } /* Warranty/price tables — same visual language as .mini-table (Hooldus page) applied generically to the block editor's own Table block markup, so any 2-column table an admin adds here (component → warranty period) picks it up automatically without a custom block or extra class. */ .legal-content .wp-block-table { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 24px; background: var(--bg); margin: 0 0 18px; overflow-x: auto; } .legal-content table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .legal-content table tr { border-top: 1px solid var(--line); } .legal-content table tr:first-child { border-top: none; } .legal-content table td, .legal-content table th { padding: 12px 0; text-align: left; } .legal-content table td:first-child, .legal-content table th:first-child { color: var(--ink); font-weight: 600; } .legal-content table td:last-child, .legal-content table th:last-child { text-align: right; color: var(--muted); } /* Callout box — the block editor's Quote block, restyled as a highlighted info box (used for the "how to request a return" note) instead of the traditional left-border blockquote look. */ .legal-content blockquote { margin: 0 0 18px; padding: 18px 20px 18px 48px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-muted); position: relative; } .legal-content blockquote::before { content: "i"; position: absolute; left: 20px; top: 18px; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; font-weight: 800; font-style: normal; line-height: 19px; text-align: center; } .legal-content blockquote p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.65; } .legal-content blockquote p + p { margin-top: 8px; } .legal-content blockquote cite { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--muted); font-style: normal; } .legal-closing { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); } .legal-closing p { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; } .legal-closing-links { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 760px) { .legal-main { padding: 32px 0 60px; } .legal-content .wp-block-table { padding: 4px 18px; } } @media print { header.site, .toc-wrap, .toc-toggle, .page-hero-meta, footer.site { display: none !important; } .legal-grid { grid-template-columns: 1fr; } } /* ---- ESTO payment-method explainer pages — reuses .legal-content's real prose/list/blockquote typography (a "Tsitaat" block is the real risk-disclosure box on the ESTO järelmaks page) in a single centered column, since these are short pages with no sisukord/sidebar needed. ---- */ .esto-page-body { padding: 8px 0 90px; } .esto-page-body .legal-content { max-width: 74ch; margin: 0 auto; } .esto-page-banner { margin: 0 0 32px; } .esto-page-banner img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: auto; display: block; } @media (max-width: 760px) { .esto-page-body { padding: 8px 0 60px; } } /* ========================================================================== XOO WooCommerce Side Cart plugin — the real "added to cart" slide-out drawer sitewide (any add-to-cart, not just Hooldus). Ships with its own generic default look (plain white/black, its own icon font, no rounded pills) that has never matched this site's real design system. Every selector below targets the plugin's own xoo-wsc-* markup directly and reuses the same tokens/shapes as the real .btn/.cart-item/.woocommerce- message components elsewhere — no new visual pattern, just this site's existing one applied to a plugin that never got it. !important is needed throughout since the plugin's own stylesheet is fairly specific/loads after the theme's. ---- */ .xoo-wsc-opac { background: rgba(10,12,14,0.6) !important; } .xoo-wsc-container { font-family: inherit !important; background: var(--bg) !important; box-shadow: -16px 0 48px rgba(20,23,26,0.18) !important; } /* Floating basket bubble, bottom-right, visible whenever the drawer itself is closed */ .xoo-wsc-basket { background: var(--ink) !important; box-shadow: 0 8px 20px rgba(20,23,26,0.28) !important; } .xoo-wsc-basket .xoo-wsc-bki { color: #fff !important; } .xoo-wsc-items-count { background: var(--accent) !important; color: var(--accent-ink) !important; font-weight: 800 !important; font-family: inherit !important; } /* The plugin fixes this bubble to the same bottom-right corner as the Hooldus page's own sticky action bar (.hooldus-mobile-cta) — with a real item in the cart its count badge grows the bubble enough to sit right on top of that bar's "Telli hooldus" button. Customers still need real access to the cart here, so this raises the bubble above the bar instead of hiding it — same real basket, just clear of the bar's real height (.mobile-cta's own reserved padding-bottom, a few lines up, is 76px). */ @media (max-width: 640px) { body.page-template-page-hooldus-php .xoo-wsc-basket { bottom: 92px !important; } } .xoo-wsc-header { border-bottom: 1px solid var(--line) !important; padding: 22px 24px !important; } .xoo-wsch-text { font-weight: 700 !important; font-size: 1.05rem !important; color: var(--ink) !important; font-family: inherit !important; } .xoo-wsch-close { color: var(--ink) !important; transition: color .15s ease; } .xoo-wsch-close:hover { color: var(--accent-dark) !important; } .xoo-wscb-icon { color: var(--ink) !important; } .xoo-wscb-count { background: var(--accent) !important; color: var(--accent-ink) !important; font-family: inherit !important; } .xoo-wsc-notices li { border-radius: 10px !important; font-family: inherit !important; font-size: 0.88rem !important; padding: 12px 16px !important; } .xoo-wsc-notices li.xoo-wsc-notice-success { background: rgba(31,138,59,0.08) !important; border: 1px solid rgba(31,138,59,0.25) !important; color: var(--ink) !important; } .xoo-wsc-notices li.xoo-wsc-notice-error { background: rgba(227,92,20,0.08) !important; border: 1px solid rgba(227,92,20,0.3) !important; color: var(--accent-dark) !important; } .xoo-wsc-product { border-bottom: 1px solid var(--line) !important; padding: 18px 24px !important; } .xoo-wsc-img-col img { border-radius: 10px !important; object-fit: cover !important; } .xoo-wsc-pname { font-family: inherit !important; font-weight: 700 !important; color: var(--ink) !important; font-size: 0.92rem !important; } .xoo-wsc-qty-price { font-family: inherit !important; color: var(--muted) !important; font-size: 0.85rem !important; } .xoo-wsc-smr-del { color: var(--muted) !important; font-family: inherit !important; font-size: 0.8rem !important; transition: color .15s ease; } .xoo-wsc-smr-del:hover { color: var(--accent-dark) !important; } .xoo-wsc-footer { border-top: 1px solid var(--line) !important; padding: 22px 24px !important; } .xoo-wsc-ft-amt-label, .xoo-wsc-ft-amt-value { font-family: inherit !important; color: var(--ink) !important; } .xoo-wsc-ft-amt-value { font-weight: 700 !important; } /* Same visual hierarchy as the real .btn component: outline for "continue", dark for "view cart", accent-orange primary for checkout. */ .xoo-wsc-ft-btn { font-family: inherit !important; font-weight: 700 !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; transition: background .15s ease, color .15s ease, border-color .15s ease !important; } .xoo-wsc-ft-btn-continue { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--line) !important; } .xoo-wsc-ft-btn-continue:hover { border-color: var(--ink) !important; } .xoo-wsc-ft-btn-cart { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; } .xoo-wsc-ft-btn-cart:hover { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; } .xoo-wsc-ft-btn-checkout { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; } /* ========================================================================== Scooter finder — homepage "Leia endale sobiv tõukeratas" quiz ========================================================================== */ .finder-form { max-width: 640px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 20px; } .finder-question { display: flex; flex-direction: column; gap: 10px; } .finder-label { font-size: 0.84rem; font-weight: 600; color: var(--ink); } .option-list--row { flex-direction: row; } .option-list--row .option-card { flex: 1; } @media (max-width: 600px) { .option-list--row { flex-direction: column; } } /* .option-title's 0.96rem/700 default is sized for checkout's delivery-method cards, next to a price tag — here it's the only text in the quiz sized above the other field/question labels (0.84rem/600), which is what read as "larger than everything else in the box". Match it to those instead. */ .finder-form .option-title { font-size: 0.84rem; font-weight: 600; } .finder-results { margin-top: 40px; } .finder-error { text-align: center; color: var(--muted); } .finder-matches { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; } .finder-match { flex: 1 1 280px; max-width: 320px; display: flex; flex-direction: column; gap: 14px; } /* .prod-card's own max-width (calc(25% - 18px)) assumes it's a direct child of the 4-up .prod-grid it was designed for — nested one level deeper here, that percentage resolves against .finder-match's ~300px instead, crushing the card to a sliver. It only needs to fill the wrapper it's already sized by, so drop the inherited constraint rather than the wrapper. */ .finder-match .prod-card { max-width: none; flex: none; } .finder-reasons { display: flex; flex-direction: column; gap: 8px; list-style: none; } .finder-reasons li { position: relative; padding-left: 22px; font-size: 0.86rem; color: var(--muted); line-height: 1.45; } .finder-reasons li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } @media (max-width: 600px) { .finder-match { max-width: 100%; } } .xoo-wsc-ft-btn-checkout:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }