/* Theme Name: Tampereen Vaahtomuovi Text Domain: minicart Template: tampereen-vaahtomuovi-parent Version: 1.0.0 Tested up to: 7.0 Requires at least: 4.7 Requires PHP: 5.6 Author: Buspay / Tampereen Vaahtomuovi Author URI: https://vaahtomuovi.net/ Theme URI: https://vaahtomuovi.net/ Description: Custom child theme for Tampereen Vaahtomuovi (vaahtomuovi.net), built on the Shopire parent. Forked from the MiniCart child theme and renamed so it is never matched or overwritten by a wordpress.org theme update. All site-specific front-end customizations live here. Text domain kept as "minicart" for translation continuity. Tags: one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, translation-ready, full-width-template, custom-logo, blog, e-commerce, portfolio License: GPLv3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ :root { --wf-main-rgb: 19, 115, 245; --wf-secondary-color: #0A214F; } body { background-color: #f6f7fb; } body #content { background-color: transparent; } /* Header--three */ .wf_navbar-list-right .wf_navbar-search-form { width: 100%; } .header--three { background-color: #fff; } .header--three .wf_header-topbar { background-color: #f6f7fb; } .header--three .wf_mobilenav, .header--three .wf_header-topbar { border-bottom: 1px solid rgba(189, 189, 189, 0.4); } .header--three .wf_navbar-wrapper { border-top: 1px solid rgba(189, 189, 189, 0.4); } .header--three .wf_navbar-menu { min-height: 6rem; padding-left: 1.6rem; justify-content: space-between; } .header--three button.wf_navbar-sidebar-toggle, .header--three .wf_navbar-info-contact .contact__list i { width: 4.8rem; height: 4.8rem; line-height: 4.8rem; padding: 1.3rem; background-color: rgba(189, 189, 189, 0.2); outline: none; } .header--three button.wf_navbar-sidebar-toggle .lines { transform: translateY(-1px); } .header--three .wf_navbar-list-right>li:not(:last-child) { margin-right: 1.8rem; } .header--three .wf_navbar-compare-item .wf_compare_btn, .header--three .wf_navbar-favourite-item .wf_favourite_btn, .header--three .wf_navbar-user-item .wf_user_btn, .header--three .wf_navbar-cart-item .wf_navbar-cart-icon { width: 2rem; height: 2rem; outline: none; line-height: 1.3; font-size: 1.8rem; } .header--three .wf_navbar-compare-item .wf_compare_btn:after, .header--three .wf_navbar-favourite-item .wf_favourite_btn:after, .header--three .wf_navbar-user-item .wf_user_btn:after, .header--three .wf_navbar-cart-item .wf_navbar-cart-icon:after, .header--three .wf_navbar-search-item button.wf_navbar-search-toggle:after { display: none; } .header--three .header-search-form .header-search-button:focus { outline: 1px solid #fff; outline-offset: -3px; } .header--three .wf_navbar-compare-item .wf_compare_btn:focus, .header--three .wf_navbar-favourite-item .wf_favourite_btn:focus, .header--three .wf_navbar-user-item .wf_user_btn:focus, .header--three .wf_navbar-cart-item .wf_navbar-cart-icon:focus { outline: 1px solid currentColor; outline-offset: 3px; } .header--three .wf_navbar-wrapper .wf_navbar-menu .wf_navbar-right .shopire-wcwl-items-count , .header--three .wf_navbar-wrapper .wf_navbar-menu .wf_navbar-right .shopire-wcwl-items-count , .header--three .wf_navbar-wrapper .wf_navbar-menu .wf_navbar-right .cart_count { top: -12px; right: -10px; width: 2.1rem; height: 2.1rem; line-height: 2rem; border: 1px solid rgba(255, 255, 255, 0.5); } .header--three .wf_navbar-menu .wf_navbar-nav .wf_navbar-mainmenu>li>a { color: var(--wf-secondary-color); } .header--three .wf_navbar-menu .wf_navbar-nav .wf_navbar-mainmenu li.active>a, .header--three .wf_navbar-menu .wf_navbar-nav .wf_navbar-mainmenu>li.focus>a, .header--three .wf_navbar-menu .wf_navbar-nav .wf_navbar-mainmenu>li:hover>a { color: var(--wf-main-color); } .header--three .wf_navbar-wrapper .wf_navbar-menu .wf_navbar-right .wf_navbar-cart-item:after, .header--three .wf_navbar-nav .wf_navbar-mainmenu>li:after { content: ""; display: block; width: 100%; height: 1.7rem; position: absolute; } .header--three .wf_mobilenav .wf_navbar-cart-item a .cart_count { top: -11px; right: -9px; } .header--three .header-search-form { background-color: transparent; padding-right: 0; } .header--three .header-search-form .header-search-select-wrapper { float: left; border-radius: 5rem 0rem 0rem 5rem; overflow: hidden; border-right:none; } /* "Tuotehaku" label replacing the removed category dropdown (header-search.php). Mirrors the old .header-search-select-wrapper box position/shape. */ .header-search-form .header-search-label-wrapper { width: 30%; float: right; min-height: 4rem; height: 4rem; box-sizing: border-box; border: 0.1rem solid rgba(189, 189, 189, 0.4); background: #f8f8f8; display: flex; align-items: center; justify-content: center; } .header-search-form .header-search-label { color: var(--wf-secondary-color); font-weight: 600; font-size: 1.4rem; line-height: 1.2; white-space: nowrap; padding: 0 1rem; } .header--three .header-search-form .header-search-label-wrapper { float: left; border-radius: 5rem 0rem 0rem 5rem; overflow: hidden; border-right: none; } .header--three .header-search-form input.header-search-input { float: right; border-radius: 0rem 5rem 5rem 0rem; background:#fff; padding-right:38px; } .header--three .header-search-form input.header-search-input:focus { border: none; outline-offset: -2px; outline: 1px solid; } .header--three .header-search-form .header-search-button { width: 3.8rem; height: 3.8rem; top: 2px; right: 3px; border-radius: 5rem; } .header--three .header-search-form .wf_search-field { border-radius: 5rem; } .header--three .header-search-form .search-wrapper svg { left: 88%; } @media (min-width: 62em) { .header--three .wf_header-widget .widget:not(:last-child):after { height: 2.5rem; margin-top: 0.4rem; background: rgba(189, 189, 189, 0.4); } } /* Slider Nine / Banner */ .wf-flex-row-reverse { flex-direction: row-reverse; } .wf_slider_banner { margin-top: 2.4rem; } .wf_slider_banner .last { display: none; } .wf_slider_banner .wf_owl_carousel, .wf_slider_banner .wf_slider-item, .wf_slider_banner .wf_slider-innercell, .wf_slider_banner .wf_slider-item>img { max-height: 51rem; min-height: 51rem; } .wf_slider_banner .wf_slider-content { padding: 1.2rem; margin-bottom: 3rem; } .wf_slider_banner .wf_slider-content .title { font-size: 3.8rem; } .wf_slider_banner .wf_slider-content .subtitle { color: #fff; font-size: 1.8rem; } .banner-wrapper { display: grid; grid-template-columns: auto auto; grid-gap: 2.4rem; } .wf_slider--nine { overflow: visible; } .wf_slider--nine .owl-theme.owl-carousel .owl-dots { --wf-main-color: #fff; } .wf_slider--nine .banner-wrapper .banner-wrapper-item, .wf_slider--nine .wf_owl_carousel { border-radius: 8px; overflow: hidden; } .wf_slider--nine .banner-wrapper { grid-template-columns: auto; height: 100%; } .wf_slider--nine .product-categories .product-categories-btn { padding: 0; color: var(--wf-secondary-color); background: transparent; margin-bottom: 16px; font-size: 1.6rem; } /* The heading is a static label, not a control — no click target / pointer. */ .wf_slider--nine .product-categories .product-categories-heading { cursor: default; } /* No caret: the slider browse heading isn't a toggle (clicking it does nothing on the front-page carousel), so the parent's dropdown arrow is hidden. */ .wf_slider--nine .product-categories .product-categories-btn::after { display: none; } .wf_slider--nine .product-categories { z-index: 2; } /* The white "card" behind the front-page browse box. Applied unconditionally (not only via the JS-added .active class): handleResize() in the parent's custom.js adds .active on the window `load` event, but that handler can miss an already-fired load (cached/fast loads), leaving the card unpainted until a manual window resize re-runs it. The slider browse column is desktop-only (wf-d-none wf-d-lg-block), so styling it directly is safe and removes the JS race entirely. */ .wf_slider--nine .product-categories, .wf_slider--nine .product-categories.active { background-color: #fff; border: 1px solid rgba(189, 189, 189, 0.2); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, .05); padding: 30px; } .wf_slider--nine .product-categories .wf_navbar-nav { position: relative; top: 0; } .wf_slider--nine .product-categories .wf_navbar-nav .wf_navbar-mainmenu .dropdown-menu:before { display: none; } .wf_slider--nine .product-categories .wf_navbar-nav .wf_navbar-mainmenu>li a { color: var(--wf-secondary-color); padding: 12px 0; line-height: 1.4; border-bottom-color: rgba(189, 189, 189, 0.3); } .wf_slider--nine .product-categories .wf_navbar-nav .wf_navbar-mainmenu>li:first-child a { padding-top: 0; } .wf_slider--nine .product-categories .product-categories-more-btn { padding: 0; margin-top: 12px; background: transparent; color: var(--wf-secondary-color); } .wf_slider--nine .product-categories .product-categories-more-btn i { font-size: 1.6rem; min-width: 1.6rem; min-height: 1.6rem; vertical-align: -1px; } .banner-wrapper .banner-wrapper-item .wf-image, .banner-wrapper .banner-wrapper-item .wf-image a, .banner-wrapper .banner-wrapper-item .wf-image img { height: 100%; } .banner-wrapper .banner-wrapper-item .wf-image img { object-fit: cover; } .banner-wrapper .banner-wrapper-item, .wf-image { position: relative; overflow: hidden; } .banner-wrapper .banner-wrapper-item .wf-image a, .banner-wrapper .banner-wrapper-item .wf-image img { width: 100%; display: inline-block; } .effect_1 .wf-image img { backface-visibility: hidden; filter: alpha(opacity = 100); transition: opacity 1s ease 0s, transform 1s ease 0s; } .effect_1:focus-within .wf-image img, .effect_1:hover .wf-image img { filter: alpha(opacity = 80); transform: scale3d(1.1, 1.1, 1); } .banner-wrapper .banner-wrapper-item .banner-wrapper-inner { position: absolute; top: 0; left: 0; bottom: auto; transform: translateY(0); width: 100%; display: flex; text-align: left; justify-content: flex-start; } .banner-wrapper .banner-wrapper-item:nth-child(3) .banner-wrapper-inner { text-align: center; justify-content: center; } .banner-wrapper .banner-wrapper-item .banner-wrapper-inner .info { padding: 2.6rem 2.4rem 0; } .banner-wrapper .banner-wrapper-item .banner-wrapper-inner .info .subtitle { font-size: 1.4rem; color: #fff; font-weight: 700; text-transform: uppercase; margin: 0 0 1.2rem; } .banner-wrapper .banner-wrapper-item .banner-wrapper-inner .info .title { font-size: 2.2rem; text-transform: uppercase; line-height: 1.2; margin: 0 0 2.4rem; } .banner-wrapper .banner-wrapper-item .banner-wrapper-inner .info .title a { color: #fff; text-decoration: none; } /* Front-page overlay text (carousel + the two info boxes): drop the lightning-bolt icon before the slide heading, give the text a 1px outline in the theme main colour (var --wf-main-color, currently #877A51 — the same brown as the header "Lähetä tiedustelu" button) plus a soft drop shadow, so it stays legible against the background image. paint-order keeps the fill on top of the stroke so the letterforms aren't eaten by the outline. */ .wf_slider .wf_slider-content .subtitle i { display: none; } .wf_slider .wf_slider-content .subtitle, .wf_slider .wf_slider-content .title, .wf_slider .wf_slider-content .text, .banner-wrapper .banner-wrapper-item .banner-wrapper-inner .info .subtitle, .banner-wrapper .banner-wrapper-item .banner-wrapper-inner .info .title { -webkit-text-stroke: 1px var(--wf-main-color); paint-order: stroke fill; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.45); } /* The carousel description renders light-weight by default — too thin to carry the outline cleanly, so bold it. */ .wf_slider .wf_slider-content .text { font-weight: 700; } /* Product Category Two */ .wf_product_category_two .product-category .category-inner { margin-bottom: 20px; background: #0A214F0A; border-radius: 20px; padding: 45px 40px; } .wf_product_category_two .product-category .category-inner .category-link:after { content: "\f061"; font-family: fontawesome; position: absolute; top: calc(100% - 2.4rem); left: 50%; width: 40px; height: 40px; border-radius: 50%; background: var(--wf-main-color); color: #fff; transform: translateX(-50%) scale(0); font-weight: 400; font-size: calc(14px + 1px); line-height: 40px; transition: all .3s ease; } .wf_product_category_two .product-category .category-inner .category-link:focus:after, .wf_product_category_two .product-category .category-inner .category-link:hover:after { transform: translateX(-50%) scale(1); } .wp-block-archives-list a { text-decoration: none; } .has-background.wp-block-read-more, .has-background.post-navigation-link-next, .has-background.post-navigation-link-previous { padding: 0.25em 1.375em; } .wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon { height: 2rem !important; width: 2rem !important; } .wp-block-avatar img { border-radius: 50%; } .wp-block-avatar:hover img { -webkit-transform: scale(1.07); transform: scale(1.07); } .post-navigation-link-next a, .post-navigation-link-previous a { text-decoration: none; } .wp-block-woocommerce-single-product .wp-block-post-title a { text-decoration: none; } .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:focus { color: #fff; } .wp-block-page-list { list-style: none; padding: 0; } .wc-block-grid__products .wc-block-components-product-button__button { border-radius: 0; text-decoration: none; } .wp-block-page-list a { color: var(--wf-secondary-color); text-decoration: none; font-weight: 600; } .wc-block-components-product-title a.wc-block-components-product-name:hover, .wc-block-components-product-title a.wc-block-components-product-name:focus { color: var(--wf-main-color); } .wp-block-page-list a:hover, .wp-block-page-list a:focus { color: var(--wf-main-color); } .wp-block-list { padding: 0; } /* Content (post/page body) lists: the global `.wp-block-list { padding: 0 }` above strips list indentation, so disc/circle bullets had no room and sat flush against the text. Restore an indent here, and force black text — the content area inherits the dark-blue (#334770) body colour while only

and headings are overridden, which left bulleted lists looking blue. */ .wf_posts .post .wp-block-list { padding-left: 1.5em; color: #000; } .wc-block-components-product-name { color: var(--wf-secondary-color); text-decoration: none; font-weight: 600; } .wp-block-list.has-background { padding: 1.25em 2.375em; } .wp-block-details.has-background { padding: 1.25em 2.375em; } .wp-block-verse.has-background { padding: 1.25em 2.375em; } .wp-block-preformatted.has-background { padding: 1em; } .wp-block-archives { list-style: none; padding: 0; } .wp-block-archives-list a { font-weight: 600; color: var(--wf-secondary-color); } .wp-block-archives-list a:hover, .wp-block-archives-list a:focus { color: var(--wf-main-color); } .wp-block-page-list.has-background { padding: 1rem; } a.wp-block-button__link:hover, a.wp-block-button__link:focus { color: #fff; text-decoration: none; } .wp-block-button.is-style-outline a.wp-block-button__link { color: var(--wf-main-color); } .wp-block-latest-comments { padding-left: 0; } .wp-block-latest-comments li a:not(:hover, :focus) { color: var(--wf-secondary-color); } .wp-block-latest-comments li a { text-decoration:none; } .wf_footer ul.product_list_widget li .woocommerce-Price-amount { color: var(--wf-main-color); } .wf_footer ul.product_list_widget li { border-bottom: none; } .wf_footer .widget_shopping_cart .button:not(.checkout):not(.add_to_cart_button) { background-color: var(--wf-secondary-color); } .wf_footer .widget_shopping_cart .button:not(.checkout):not(.add_to_cart_button):hover, .wf_footer .widget_shopping_cart .button:not(.checkout):not(.add_to_cart_button):focus { background-color: var(--wf-secondary-color) !important; } .wf_footer .widget_shopping_cart a.checkout:hover, .wf_footer .widget_shopping_cart a.checkout:focus { background-color: var(--wf-main-color) !important; } .wf_footer .widget_shopping_cart span.amount { color: var(--wf-main-color); } .wf_footer .widget_shopping_cart li img { object-fit: contain !important; padding-right: 10px; } .wc-block-mini-cart__footer .wc-block-components-button { text-decoration: none; } .wf_footer .widget .wc-block-cart-link { color:#fff; background: var(--wf-main-color); } .wf_footer .widget .wc-block-cart-link:hover, .wf_footer .widget .wc-block-cart-link:focus { text-decoration: none; } .woocommerce-account .woocommerce-Address-title h2 { font-size: 4rem; } .wp-block-button.is-style-outline a.wp-block-button__link { border-color: inherit; background: transparent } .wp-block-categories-list.has-background { padding: 1rem; } .wp-block-latest-comments.has-background { padding: 1rem; } .wp-block-file a { text-decoration: none; } .wp-block-file.has-background { padding: 1rem; } .woocommerce .summary .product_meta>span a { text-decoration: none; } table.wc-block-cart-items .wc-block-cart-items__header th { color: var(--wf-secondary-color); font-size: 1.6rem; font-weight: 700; } .wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title { font-weight: 700; } .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 600; } .wp-block-woocommerce-customer-account.has-background { padding: 1rem; } /* Header logo: scale up to fill the available space before the category selector. Logo art is very wide (~3.7:1), so cap by height and let the width follow. Raised the height cap (6rem -> 9rem) so the logo grows to fill its column; the logo-row padding below is trimmed ~60% so the row itself doesn't get taller. */ .wf_navbar .site--logo img { width: auto; max-width: 100%; max-height: 9rem; } /* Logo row (the .wf_navbar logo/search/contact row, originally .wf-py-5 = 3.2rem): cut the vertical padding ~60% (3.2rem -> 1.3rem) so the white space above and below the now-larger logo shrinks, keeping the overall header row height about the same. */ .header--three .wf_navbar > .wf-container > .wf-row.wf-py-5 { padding-top: 1.3rem; padding-bottom: 1.3rem; } /* ===== Ompelimo (workshop) cards: front-page section + /ompelimo/ archive ===== */ /* Hide the date badge (and its white box) on the front-page section and on the ompelimo post-type / workshop_category archives. The .date div is still output by template-parts/content-page.php; this just removes it visually. */ .front-posts .wf_post_item .image .date, .post-type-archive-ompelimo .wf_post_item .image .date, .tax-workshop_category .wf_post_item .image .date { display: none; } /* Ompelimo archive grid: tighter, equal-height cards. The grid itself (flex/wrap, 16:9 images) is set by the vaahtomuovi-workshop plugin's style.css; the child loads after it, so these refine it. */ .post-type-archive-ompelimo #wf-main, .tax-workshop_category #wf-main { gap: 16px; /* uniform row+column gap */ align-items: stretch; /* cards in a row match the tallest */ } .post-type-archive-ompelimo #wf-main .wf_post_block, .tax-workshop_category #wf-main .wf_post_block { display: flex; /* let the card stretch to the row height */ /* Fixed 3-column width (no grow): a short last row (e.g. 8 items -> 3/3/2) leaves an empty slot instead of stretching the cards full width. gap is 16px, so 3 cols + 2 gaps = 100%. */ flex: 0 0 calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); } .post-type-archive-ompelimo #wf-main .wf_post_item, .tax-workshop_category #wf-main .wf_post_item { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; /* drop the template's wf-mb-4 -> vertical gap = flex gap only */ } .post-type-archive-ompelimo #wf-main .wf_post_item .inner, .tax-workshop_category #wf-main .wf_post_item .inner { flex: 1 1 auto; /* content area fills, equalizing card heights */ } /* Cap title + excerpt to a fixed number of lines so rows stay even. Clamp the excerpt PARAGRAPH only (not the whole .content) so the "Lue lisää" .more-link that follows it is never clipped. */ .post-type-archive-ompelimo #wf-main .wf_post_item .title, .tax-workshop_category #wf-main .wf_post_item .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-type-archive-ompelimo #wf-main .wf_post_item .content p, .tax-workshop_category #wf-main .wf_post_item .content p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.8rem; } /* Responsive: 2 columns on tablet, 1 on phone (still no stretching). */ @media (max-width: 991px) { .post-type-archive-ompelimo #wf-main .wf_post_block, .tax-workshop_category #wf-main .wf_post_block { flex: 0 0 calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); } } @media (max-width: 575px) { .post-type-archive-ompelimo #wf-main .wf_post_block, .tax-workshop_category #wf-main .wf_post_block { flex: 0 0 100%; max-width: 100%; } } /* CTA / "Toimintakehote-osio": remove the decorative colorful stars (and corner shapes) background. It's the bg-shape01.png rendered as behind the text; hide it rather than editing the fork template. */ .front-cta .hurry-img-bg { display: none; } .wp-block-woocommerce-customer-account a:focus { text-decoration: underline !important; } /* ===== "Selaa tuotteita" browse list: flat, left-aligned, no submenu/arrows/more ===== */ /* Always show every selected category (override the JS show-8/hide logic). */ .product-categories .wf_navbar-mainmenu > li { display: list-item !important; } /* Drop the auto-added "+ More Category" button. */ .product-categories .wf_navbar-mainmenu > li.menu-item.more { display: none !important; } /* Uniform left alignment for every row. */ .product-categories .wf_navbar-mainmenu .nav-link { text-align: left; justify-content: flex-start; } /* Belt-and-suspenders: no hover submenu, no caret arrows (markup is already flat). */ .product-categories .wf_navbar-mainmenu .dropdown-menu { display: none !important; } .product-categories .wf_navbar-mainmenu .menu-item-has-children > .nav-link::after { display: none !important; } /* ===== Front "Suosituimmat tuoteryhmät" grid: square cropped images, equal box heights ===== */ .front-product-cat .product-category .category-inner .category-image { border-radius: 0; aspect-ratio: 1 / 1; max-width: none; min-height: 0; } .front-product-cat .product-category .category-inner .category-image a { display: block; width: 100%; height: 100%; margin: 0; } .front-product-cat .product-category .category-inner .category-image img { width: 100%; height: 100%; object-fit: cover; } /* Category title: clamp to 2 lines and reserve 2 lines so all cards match. */ .front-product-cat .product-category .category-inner .category-mask .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; height: 2.8em; margin-bottom: 0; } /* ===== Front blog section: square cropped images, equal box heights ===== */ .front-posts .wf_post_item .image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .front-posts .wf_post_item .image img { width: 100%; height: 100%; object-fit: cover; } /* Title: clamp + reserve 2 lines. */ .front-posts .wf_post_item .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; height: 2.8em; } /* Excerpt: cut off after 2 lines. */ .front-posts .wf_post_item .content p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; } /* ===== White content-area cards (pages + single product) + product tab borders — 2026-06-01 ===== */ /* Regular content pages get a white, rounded card like the widgets. Excludes blog single posts (body.single) and WooCommerce functional pages (shop/cart/checkout/account, which carry .woocommerce-page). */ body.page:not(.woocommerce-page) .site-content .wf_posts .post.single-post { background: #fff; border-radius: 10px; padding: 40px 45px; } /* Single product: gallery + summary + tabs wrapped in one white card. */ .single-product div.product { background: #fff; border-radius: 10px; padding: 35px 40px; } /* Product description / additional-information tabs: clearer borders. */ .single-product .woocommerce-tabs ul.tabs { border-bottom: 1px solid #e0e0dc; } .single-product .woocommerce-tabs ul.tabs li { border: 1px solid #e0e0dc; border-bottom: none; margin-bottom: -1px; } .single-product .woocommerce-tabs .woocommerce-Tabs-panel { border: 1px solid #e0e0dc; border-top: none; border-radius: 0 0 8px 8px; background: #fff; } /* Smaller card padding on phones so content isn't cramped. */ @media (max-width: 767px) { body.page:not(.woocommerce-page) .site-content .wf_posts .post.single-post { padding: 24px 20px; } .single-product div.product { padding: 22px 18px; } } /* ===== Separator (Erotin) spacing — 2026-06-01 ===== */ /* The Media & Text block ships with 0 vertical margin, so a Separator next to it sits flush. The separator gets a 10px margin; the Media & Text block gets 24px to match the spacing of text blocks (so the Erotin gap looks consistent next to either). Adjacent margins collapse → ~24px gap beside a Media & Text block. */ .wp-block-separator { margin-top: 10px; margin-bottom: 10px; } .wp-block-media-text { margin-top: 24px; margin-bottom: 24px; } /* ===== Breadcrumb bar + footer fine-tuning — 2026-06-01 ===== */ /* Trim the large empty space below the breadcrumb bar (the content section's 60px top padding) so it roughly matches the space above the breadcrumb. Covers both blog/page (.wf_posts) and WooCommerce (.woo-products) content sections. */ #wf_pagetitle + .site-content > .wf-py-default { padding-top: 0; } /* Footer: remove the decorative corner shape image + its animation, and make the whole footer a single solid white (override the Customizer's tinted background, hence the ID+class selector, and flatten the inner copyright band). */ .wf_footer--one .footer-shape { display: none !important; } #wf_footer.wf_footer--one, #wf_footer.wf_footer--one .wf_footer_copyright, #wf_footer.wf_footer--one .wf_footer_top, #wf_footer.wf_footer--one .wf_footer_middle { background-color: #fff; } /* No scroll-in (wow.js) animations in the footer. */ .wf_footer .wow { animation: none !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================================= Shop filter bar — WooCommerce Product Filters block above the loop (see theme-functions/shop-filter-bar.php + shop-filter-bar.js). Each filter is a click-to-open dropdown "pill" (Zalando-style) sized to match the result-count / ordering boxes. shop-filter-bar.js toggles .tv-open per filter — safe because a filter change is a full page reload (no client-side Interactivity re-render to revert the classes). ========================================================================= */ .tv-shop-filter-bar { margin: 0 0 18px; } .tv-shop-filter-bar .widget { margin: 0; } /* No card — the pills carry their own borders. */ .tv-shop-filter-bar .wp-block-woocommerce-product-filters { background: transparent; padding: 0; } /* Let the block's overlay chain fill the width (header/footer are display:none on desktop). */ .tv-shop-filter-bar .wc-block-product-filters__overlay, .tv-shop-filter-bar .wc-block-product-filters__overlay-wrapper, .tv-shop-filter-bar .wc-block-product-filters__overlay-dialog, .tv-shop-filter-bar .wc-block-product-filters__overlay-content { width: 100%; max-width: none; } /* Filters laid out as a row of pills. */ .tv-shop-filter-bar .wc-block-product-filters__overlay-content { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px; } /* ---- each filter = a dropdown pill ---- */ .tv-shop-filter-bar .tv-filter { position: relative; flex: 0 0 auto; } /* the pill button (the filter's heading) — matches the result/order boxes */ .tv-shop-filter-bar .tv-filter__toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; user-select: none; background: #fff; color: #334770; border: 1px solid rgba(189, 189, 189, 0.4); border-radius: 6px; padding: 8px 14px; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .tv-shop-filter-bar .tv-filter__toggle::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; } .tv-shop-filter-bar .tv-filter.tv-open .tv-filter__toggle { border-color: #334770; } .tv-shop-filter-bar .tv-filter.tv-open .tv-filter__toggle::after { transform: rotate(-135deg) translateY(1px); } /* the dropdown panel = everything in the filter except the toggle */ .tv-shop-filter-bar .tv-filter > :not(.tv-filter__toggle) { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px; max-width: 320px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid rgba(189, 189, 189, 0.55); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 12px 14px; } .tv-shop-filter-bar .tv-filter.tv-open > :not(.tv-filter__toggle) { display: block; } /* Active filters + "Tyhjennä suodatukset" on ONE full-width row below the pills: the chips first, then the clear button after them. The block is `display:block` by default with each child full-width (so chips and clear stack on separate lines) — make it a flex row and size the chips wrapper + clear button to their content. */ .tv-shop-filter-bar .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden) { order: 10; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; margin-top: 6px; } .tv-shop-filter-bar .wp-block-woocommerce-product-filter-active > * { flex: 0 0 auto; width: auto; margin: 0; } .tv-shop-filter-bar .wp-block-woocommerce-product-filter-active .wp-block-buttons, .tv-shop-filter-bar .wp-block-woocommerce-product-filter-active .wp-block-button { width: auto; margin: 0; } /* Toolbar: filter bar + result count + ordering on ONE flex row — filters | results | ordering. (Wrapped in .tv-shop-toolbar by shop-filter-bar.php.) Float is ignored on flex items, so the shopire float rules drop away automatically; ordering is pushed to the right end. Wraps to a second line when the column is too narrow to fit all three. */ .tv-shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; } .tv-shop-toolbar .tv-shop-filter-bar { margin: 0; } /* Result count: drop shopire's white box (bg + border + padding) and match the pill/ordering text size — plain inline text frees horizontal room so all three fit on one row. */ .tv-shop-toolbar p.woocommerce-result-count { margin: 0; padding: 0; background: none; border: 0; font-size: 13px; white-space: nowrap; } /* `form.woocommerce-ordering` (0,2,1) to beat woo-styles.css's `margin:0 0 2em` — that bottom margin knocked ordering out of vertical alignment. Pack it left-to-right after the result count (no `margin-left:auto` — auto margins force an early wrap in a flex-wrap row). */ .tv-shop-toolbar form.woocommerce-ordering { margin: 0; } /* When a filter is active, the filter bar gains a (variable-width) second row of chips. To keep the result count + ordering from floating beside it (centred, right) on short chip rows, force the filter bar onto its own full-width line so they always wrap to a clean row below — result count left, ordering right. (`:has()` is widely supported; old browsers just keep the prior behaviour.) */ .tv-shop-toolbar:has( .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden) ) .tv-shop-filter-bar { flex-basis: 100%; } .tv-shop-toolbar:has( .wp-block-woocommerce-product-filter-active:not(.wc-block-product-filter--hidden) ) form.woocommerce-ordering { margin-left: auto; } /* Any WooCommerce notices that land in the toolbar span the full width above the row. */ .tv-shop-toolbar > .woocommerce-notices-wrapper { flex-basis: 100%; order: -1; margin: 0; } .tv-shop-toolbar > .woocommerce-notices-wrapper:empty { display: none; } .woo-products ul.products { clear: both; } /* "Tutustu myös" (single-product related products). It renders inside the product column, which is narrowed by the page sidebar on desktop — WooCommerce's default float layout then leaves 4 cramped cards. Two parts: (A) card-internal fixes at ALL widths, (B) an even 4-column grid on desktop. */ /* (A) Card internals — apply at every width so the card is never cramped. */ /* Each related card has an inner `div.product` that the §1h main-product white-card rule (`.single-product div.product { padding:35px 40px; background:#fff }`) ALSO matches — its ~40px/side padding shrank the card to ~139px and read as huge gaps. Neutralize it on related cards only (the inner .product-single already provides the white card). */ .woocommerce .related.products ul.products li.product div.product { padding: 0; background: none; border-radius: 0; } .woocommerce .related.products ul.products li.product .product-single { width: 100%; } /* The horizontal [compare | add-to-cart | wishlist] row is too tight for narrow cards (the label collapsed / clipped / ran vertical). Give the add-to-cart button its own full-width line (on top) and let the compare/wishlist icons sit on a row beneath. */ .woocommerce .related.products ul.products li.product .product-action { width: 100%; flex-wrap: wrap; row-gap: 6px; } .woocommerce .related.products ul.products li.product .product-action > * { flex: 0 0 auto; } .woocommerce .related.products ul.products li.product .product-action .add_to_cart_button { flex: 1 0 100%; order: -1; /* Break only at the space (parent forces break-word → mid-word 1-char lines). */ word-break: normal; overflow-wrap: normal; } /* (B) Even 4-column grid (≥768px). Replaces WooCommerce's float layout (which fixes cards to ~22% with big margins and wraps the 4th). minmax(0,1fr) lets tracks shrink so the 4 columns always fill the width. Below 768px the parent's 2-/1-column float layout takes over. */ @media (min-width: 768px) { .woocommerce .related.products ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* The float-layout clearfix ::before/::after become stray grid items (they took the first cell, pushing the cards into columns 2-5 and wrapping the 4th). */ .woocommerce .related.products ul.products::before, .woocommerce .related.products ul.products::after { display: none; } .woocommerce .related.products ul.products li.product { width: auto; margin: 0; padding: 0; float: none; clear: none; } } /* At <=600px WooCommerce switches the block to its native overlay/modal ("Suodata" button). Neutralize the pill/dropdown styling so the modal shows every filter expanded vertically. */ @media (max-width: 600px) { .tv-shop-filter-bar .wc-block-product-filters__overlay-content { flex-direction: column !important; gap: 0; } .tv-shop-filter-bar .tv-filter__toggle { border: 0; padding: 0; background: none; font-size: 16px; margin: 0 0 8px !important; } .tv-shop-filter-bar .tv-filter__toggle::after { display: none; } .tv-shop-filter-bar .tv-filter > :not(.tv-filter__toggle) { display: block !important; position: static; max-height: none; min-width: 0; max-width: none; border: 0; box-shadow: none; padding: 0; overflow: visible; } } /* ========================================================================= Shop category tree — collapsible sidebar "Tuotteet" list + pinned section (see theme-functions/shop-category-tree.php + shop-category-tree.js). The WooCommerce Product Categories block renders the full tree; the JS collapses each branch to its main categories (arrow toggles, name still navigates), accordions the top level, highlights the current category, and pins the active main category + its subs above the menu. Brand navy #0A214F, accent #334770. ========================================================================= */ /* ---- collapse: hide a branch's children until opened ---- */ .tv-cat--collapsed > ul { display: none; } /* ---- parent label row: name (grows) + count + arrow ---- */ .wc-block-product-categories .tv-cat__row { display: flex; align-items: center; gap: 6px; } .wc-block-product-categories .tv-cat__row > a { flex: 1 1 auto; min-width: 0; } /* the expand/collapse arrow button */ .wc-block-product-categories .tv-cat__toggle { flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: #334770; display: inline-flex; align-items: center; justify-content: center; } .wc-block-product-categories .tv-cat__toggle:hover { background: rgba(51, 71, 112, 0.1); } .wc-block-product-categories .tv-cat__toggle::before { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; } .wc-block-product-categories .tv-cat--has-children:not(.tv-cat--collapsed) > .tv-cat__row > .tv-cat__toggle::before { margin-top: 3px; transform: rotate(-135deg); } /* ---- menu text colour: black (overrides themes.css's --wf-secondary-color navy on `.wf_widget-area .widget … li a`; !important because that rule outspecifies us — left as non-hover so the theme's hover colour still gives an affordance) ---- */ .wf_widget-area .wc-block-product-categories a:not(:hover):not(:focus), .wf_widget-area .wc-block-product-categories .wc-block-product-categories-list-item__name, .tv-cat-pinned a:not(:hover):not(:focus) { color: #000 !important; } /* ---- current category highlight ("you are here") ---- The active item's whole row is filled with the theme background colour (the WP `background_color` setting, read live into --tv-cat-active-bg by shop-category-tree.js), so changing the background in theme settings changes the highlight too. The fill spans the full width of the menu item. */ .wc-block-product-categories .tv-cat--current > .tv-cat__row, .wc-block-product-categories .tv-cat--current > a, .tv-cat-pinned .tv-cat--current > .tv-cat__row, .tv-cat-pinned .tv-cat--current > a { background: var( --tv-cat-active-bg, #c1c1b2 ); border-radius: 4px; padding: 4px 8px; } /* leaf links are inline-block by default (themes.css) → force block so the fill spans the full row width. Scoped under .wf_widget-area to outspecify that rule. */ .wf_widget-area .wc-block-product-categories .tv-cat--current > a, .wf_widget-area .tv-cat-pinned .tv-cat--current > a { display: block; } .wc-block-product-categories .tv-cat--current > .tv-cat__row > a, .wc-block-product-categories .tv-cat--current > a, .tv-cat-pinned .tv-cat--current > .tv-cat__row > a, .tv-cat-pinned .tv-cat--current > a { color: #000; font-weight: 700; } /* ---- "Tässä osastossa" — the active-category section, rendered as its OWN widget card ---- It reuses the .widget.widget_block + .wp-block-heading markup, so the card chrome and the centered header match the "Tuotteet" box exactly. A bottom margin puts a clear gap between the two boxes so they read as separate modules. */ .tv-cat-pinned-widget { margin-bottom: 20px; /* Self-contained card chrome (mirrors `.wf_widget-area .widget` + the widget card colour) so the box keeps its look when the JS moves it out of the sidebar to above the products on mobile — otherwise it showed the beige page background. In the sidebar the more-specific parent rules win with the same values, so it's unchanged. */ overflow: hidden; padding: 2.5rem 3rem; border: 0.1rem solid rgba(189, 189, 189, 0.4); border-radius: 1rem; background-color: #f4f4f4; } .tv-cat-pinned__head a { display: block; font-weight: 700; font-size: 16px; color: #000; } .tv-cat-pinned__list, .tv-cat-pinned__list ul { list-style: none; margin: 0; } .tv-cat-pinned__list .tv-cat__row { display: flex; gap: 6px; } .tv-cat-pinned__list .wc-block-product-categories-list-item-count { margin-left: auto; } /* ---- shared list rules: same vertical spacing + indentation in BOTH the menu and the pinned list (both use the wc list-item class). ---- */ /* ~30% tighter rows: themes.css sets `.wf_widget-area .widget ul:not(...) li { padding:10px 0 }`; beat it (4 classes vs its 3) and apply to the menu list and the pinned clone alike (10px→7px). */ .wf_widget-area .widget ul.wc-block-product-categories-list .wc-block-product-categories-list-item { padding-top: 0; padding-bottom: 7px; } /* indentation reduced 50% — nested