/* ========================================================================= Islamspullen redesign layer — 2026-09-23 Child-theme CSS only. Extends the existing Ecomall/WooCommerce markup; does not replace it. Organized by section, uses design tokens below. ========================================================================= */ /* ------------------------------------------------------------------------- 1. DESIGN TOKENS ------------------------------------------------------------------------- */ :root { /* Brand (kept from existing theme option, refined usage) */ --isp-brand: #0068c8; --isp-brand-dark: #00539e; --isp-brand-tint: #eaf3fc; /* Neutrals */ --isp-ink: #1a2027; --isp-ink-soft: #565f6b; --isp-line: #e4e7eb; --isp-line-soft: #eef0f2; --isp-surface: #ffffff; --isp-surface-muted: #f7f8fa; /* Semantic */ --isp-sale: #c8393f; --isp-sale-tint: #fdecec; --isp-new: #12805c; --isp-new-tint: #e7f5ef; --isp-star: #f2a91b; /* Typography (reuses already-loaded Mulish, no new font request) */ --isp-font: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --isp-h1: clamp(1.5rem, 1.2rem + 1vw, 2rem); --isp-h2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); --isp-h3: 1.0625rem; --isp-body: 0.9375rem; --isp-small: 0.8125rem; /* Spacing scale */ --isp-space-1: 4px; --isp-space-2: 8px; --isp-space-3: 12px; --isp-space-4: 16px; --isp-space-5: 24px; --isp-space-6: 32px; --isp-space-7: 48px; /* Layout */ --isp-container: 1320px; --isp-radius-sm: 6px; --isp-radius-md: 10px; --isp-radius-lg: 14px; --isp-border: 1px solid var(--isp-line); --isp-shadow-card: 0 1px 2px rgba(20, 24, 30, 0.04), 0 2px 8px rgba(20, 24, 30, 0.05); --isp-shadow-card-hover: 0 4px 10px rgba(20, 24, 30, 0.07), 0 8px 20px rgba(20, 24, 30, 0.08); /* Controls */ --isp-control-h: 44px; --isp-control-h-sm: 36px; --isp-transition: 160ms ease; } /* ------------------------------------------------------------------------- 2. BASE / TYPOGRAPHY ------------------------------------------------------------------------- */ /* The side-cart plugin's drawer (.xoo-wsc-container) parks itself off-screen via position:fixed + a negative "right" offset when closed - by design, not a bug in that panel itself. But browsers still count a fixed box that extends past the viewport edge toward the document's scrollable area, so on narrow viewports the whole page gains phantom horizontal scroll room (confirmed via live DOM measurement: ~39px of real scrollWidth overflow at 320px, entirely from this drawer - the product grid itself stays in bounds). This is the standard fix for that category of bug and has no effect on any content we actually want visible. */ html, body { overflow-x: hidden; } body.woocommerce-page, body.single-product, body.archive.woocommerce { color: var(--isp-ink); } #main-content .page-title, .woocommerce-page h1.entry-title, h1.product_title.entry-title { font-family: var(--isp-font); font-weight: 700; font-size: var(--isp-h1); color: var(--isp-ink); letter-spacing: -0.01em; } /* ------------------------------------------------------------------------- 3. HEADER ------------------------------------------------------------------------- */ #masthead { background: var(--isp-surface); border-bottom: var(--isp-border); } #masthead .elementor-48417 .e-con-inner { max-width: var(--isp-container); margin-inline: auto; align-items: center; gap: var(--isp-space-5); padding-block: var(--isp-space-4); } /* Logo column: keep compact, vertically centered */ #masthead .elementor-widget-image img { max-height: 46px; width: auto; height: auto; } /* Search column: make it the visual anchor of the header */ #masthead .is-search-form { position: relative; width: 100%; max-width: 560px; margin-inline: auto; } #masthead .is-search-input { width: 100%; height: var(--isp-control-h); padding: 0 52px 0 var(--isp-space-4); border: 1.5px solid var(--isp-line); border-radius: var(--isp-radius-md); background: var(--isp-surface-muted); font-family: var(--isp-font); font-size: var(--isp-body); color: var(--isp-ink); transition: border-color var(--isp-transition), background var(--isp-transition), box-shadow var(--isp-transition); } #masthead .is-search-input::placeholder { color: var(--isp-ink-soft); } #masthead .is-search-input:focus { outline: none; border-color: var(--isp-brand); background: var(--isp-surface); box-shadow: 0 0 0 3px var(--isp-brand-tint); } #masthead .is-search-submit { position: absolute; top: 0; right: 0; height: var(--isp-control-h); width: 52px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--isp-ink-soft); transition: color var(--isp-transition); } #masthead .is-search-submit:hover { color: var(--isp-brand); } #masthead .is-search-icon svg { width: 19px; height: 19px; } /* Right column: klantenservice / account / cart icon-boxes */ #masthead .elementor-widget-icon-box .elementor-icon-box-wrapper, #masthead .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button { display: flex; align-items: center; gap: var(--isp-space-2); } #masthead .elementor-icon-box-icon a.elementor-icon { width: 22px; height: 22px; color: var(--isp-ink-soft); transition: color var(--isp-transition); } #masthead .elementor-icon-box-icon a.elementor-icon:hover, #masthead .elementor-icon-box-icon a.elementor-icon:focus-visible { color: var(--isp-brand); } #masthead .elementor-icon-box-icon svg { width: 100%; height: 100%; } #masthead .elementor-icon-box-title, #masthead .elementor-icon-box-title a { font-family: var(--isp-font); font-size: var(--isp-small); font-weight: 600; color: var(--isp-ink); line-height: 1.2; margin: 0; white-space: nowrap; } #masthead .elementor-icon-box-description { font-size: 12px; color: var(--isp-ink-soft); } /* Cart widget (Elementor Menu Cart) */ #masthead .elementor-menu-cart__toggle_button { color: var(--isp-ink-soft); transition: color var(--isp-transition); } #masthead .elementor-menu-cart__toggle_button:hover { color: var(--isp-brand); } #masthead .elementor-button-icon[data-counter]::after, #masthead span.hfe-cart-count, #masthead .elementor-button-icon-qty { background: var(--isp-brand); color: #fff; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; text-align: center; } /* Main navigation row */ #masthead nav.hfe-nav-menu, #masthead .hfe-nav-menu-wrapper { border-top: var(--isp-border); } #masthead .hfe-menu-item { font-family: var(--isp-font); font-size: var(--isp-body); font-weight: 600; color: var(--isp-ink); padding-block: var(--isp-space-3); transition: color var(--isp-transition); } #masthead .hfe-menu-item:hover { color: var(--isp-brand); } /* Active category state - scoped to #masthead's own .hfe-nav-menu only, so the footer menu (#colophon .elementor-48702, different hfe-menu-item instance) and any account/cart controls (not part of this menu's
  • structure at all) are never touched. inset box-shadow instead of a real border/underline so nothing changes box size or shifts layout; hover alone (above) only changes text color, so an active item still reads as visibly different from a merely-hovered inactive one. */ #masthead .menu-item.current-menu-item > a.hfe-menu-item, #masthead .menu-item.current-menu-ancestor > a.hfe-menu-item { color: var(--isp-brand); box-shadow: inset 0 -2px 0 0 var(--isp-brand); } /* Sticky header, only if theme/Elementor already applies a sticky class */ #masthead.elementor-sticky--effects, .elementor-sticky--active #masthead { box-shadow: 0 2px 10px rgba(20, 24, 30, 0.06); } /* ------------------------------------------------------------------------- 4. SHOP / CATEGORY PAGE LAYOUT ------------------------------------------------------------------------- */ .page-container { max-width: var(--isp-container); margin-inline: auto; padding-inline: var(--isp-space-4); } /* Top breathing room between the nav and the archive content. Checked for negative margins/zero padding on this wrapper and any ancestor, and for a sticky-header offset requirement - none apply: #masthead is only ever position:sticky while the .elementor-sticky--active scroll state is active (not on initial load), and nothing here overlaps it. Applied once on the shared flex wrapper (not separately on the sidebar heading and the toolbar) so both columns start at the same height automatically. */ body.archive.tax-product_cat .page-container.has-1-sidebar { padding-top: 28px; } /* Shop/category two-column layout (sidebar + products). Root cause of the sidebar spanning full page width: the parent theme's ENTIRE flex two-column system - .page-container's own display:flex, --ts-sidebar-width/--ts-sidebar-gap, and the has-1-sidebar #main-content width calc() - is scoped to the selector "#main > .page-container" (wp-content/themes/ecomall/css/reset.css). This site's header/footer is built with Elementor (body classes ehf-header/ehf-footer), which replaces the theme's own header.php - and header.php is the ONLY place that prints
    . With Elementor's header in use, that #main wrapper is never output, so none of the parent theme's column CSS (nor the --ts-sidebar-width/-gap custom properties it sets) ever applies on WooCommerce archive pages - #left-sidebar and #main-content just stack as plain full-width blocks. This is a pre-existing gap between the theme and this site's Elementor header, not something introduced by the redesign work; it only became visible once the sidebar actually had content to show. Fix: rebuild the same two-column behavior directly, scoped to the real DOM (body.archive.woocommerce - shared by the Shop page and every category archive, same scope already used for the title-hero fix), not dependent on the missing #main ancestor or the undefined --ts-sidebar-* variables. */ @media (min-width: 901px) { body.archive.woocommerce .page-container.has-1-sidebar { display: flex; align-items: flex-start; gap: var(--isp-space-6); } body.archive.woocommerce .page-container.has-1-sidebar > #left-sidebar.ts-sidebar { flex: 0 0 280px; width: 280px; } body.archive.woocommerce .page-container.has-1-sidebar > #main-content { flex: 1 1 0%; min-width: 0; } } /* Shop/category archive title ("breadcrumb-v3" hero block). Root cause of the large blank area + invisible title: this theme's breadcrumb-v3 layout is a hero-banner design meant to show a full-width background PHOTO behind the title (ts_enable_breadcrumb_background_image theme option is off here, no photo ever configured) - so .breadcrumb-title keeps its 230px min-height + 35px padding reserved for that photo even though nothing fills it, and .page-title keeps --ts-breadcrumb-v3-color (#fff), meant to read over a dark photo overlay, which is invisible against the plain white block that's left. Scoped to body.archive.woocommerce (shared by the Shop page and every category archive) so single-product/page templates that might use this same v3 layout elsewhere are untouched. */ body.archive.woocommerce .breadcrumb-title-wrapper.breadcrumb-v3 .breadcrumb-title { min-height: auto; padding: var(--isp-space-4) 0; } body.archive.woocommerce .breadcrumb-title-wrapper.breadcrumb-v3 .page-title { color: var(--isp-ink); } /* Category archives only (body.tax-product_cat - the Shop page itself does NOT get this class, so its own title is unaffected): the sidebar's own "BOEKEN"/"DAMES"/etc. heading (the search widget's title, which happens to echo the category name) plus the active nav tab already make clear which category this is, so the large standalone H1 above the toolbar is redundant. display:none removes its box entirely, so the toolbar/sidebar move up into the freed space with no extra margin cleanup needed. */ body.archive.tax-product_cat .breadcrumb-title-wrapper.breadcrumb-v3 { display: none; } /* Kill the large empty gap above the grid */ .before-loop-wrapper { margin-bottom: var(--isp-space-4); } #main-content .page-title, .woocommerce-products-header { margin-bottom: var(--isp-space-3); } /* Toolbar: result count + sorting on one clean row */ .woocommerce-result-count, .woocommerce-ordering { font-family: var(--isp-font); margin: 0; } .before-loop-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--isp-space-3); padding: var(--isp-space-3) var(--isp-space-4); background: var(--isp-surface-muted); border: var(--isp-border); border-radius: var(--isp-radius-md); } .woocommerce-result-count { color: var(--isp-ink-soft); font-size: var(--isp-small); } .woocommerce-ordering select { height: var(--isp-control-h-sm); border-radius: var(--isp-radius-sm); border: 1.5px solid var(--isp-line); font-family: var(--isp-font); font-size: var(--isp-small); padding: 0 var(--isp-space-3); background-color: var(--isp-surface); } /* Toolbar right-hand controls: this theme replaces the native , so we don't touch its existing JS. */ .before-loop-wrapper { position: relative; } .before-loop-wrapper form.product-per-page-form, .before-loop-wrapper form.woocommerce-ordering { display: flex; align-items: center; gap: var(--isp-space-2); } .before-loop-wrapper .orderby-label, .before-loop-wrapper form.product-per-page-form > span:first-child { font-size: var(--isp-small); color: var(--isp-ink-soft); white-space: nowrap; } .before-loop-wrapper ul.orderby, .before-loop-wrapper ul.perpage { list-style: none; margin: 0; padding: 0; position: relative; } .before-loop-wrapper .orderby-current, .before-loop-wrapper .perpage-current { display: inline-flex; align-items: center; gap: 6px; height: var(--isp-control-h-sm); padding: 0 var(--isp-space-3); border: 1.5px solid var(--isp-line); border-radius: var(--isp-radius-sm); background: var(--isp-surface); font-family: var(--isp-font); font-size: var(--isp-small); font-weight: 600; color: var(--isp-ink); cursor: pointer; } .before-loop-wrapper .orderby-current::after, .before-loop-wrapper .perpage-current::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--isp-ink-soft); border-bottom: 1.5px solid var(--isp-ink-soft); transform: rotate(45deg); margin-top: -3px; } .before-loop-wrapper ul.dropdown { list-style: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 160px; margin: 0; padding: var(--isp-space-2); background: var(--isp-surface); border: var(--isp-border); border-radius: var(--isp-radius-md); box-shadow: var(--isp-shadow-card-hover); z-index: 20; } .before-loop-wrapper ul.dropdown a { display: block; padding: 7px var(--isp-space-2); border-radius: var(--isp-radius-sm); font-size: var(--isp-small); color: var(--isp-ink); } .before-loop-wrapper ul.dropdown a:hover, .before-loop-wrapper ul.dropdown a.current { background: var(--isp-brand-tint); color: var(--isp-brand-dark); } /* Product grid. IMPORTANT: this theme's loop wrapper is a
    (not a
      ), nested one level INSIDE
      . The grid must be applied to that inner .products div only - applying it to the outer wrapper as well turns the outer wrapper into a 4-column grid whose single child (.products, holding every card) then collapses into ONE of those 4 columns, squeezing the whole listing to ~25% width. That exact bug happened here before; fixed by scoping to the real container. */ .woocommerce.main-products { display: block; width: 100%; } .woocommerce.main-products .products { display: grid !important; grid-template-columns: repeat(var(--ts-columns, 4), minmax(0, 1fr)); gap: var(--isp-space-5) var(--isp-space-4); } .woocommerce.main-products .products > section.product { width: auto !important; margin: 0 !important; float: none !important; } /* ------------------------------------------------------------------------- 5. FILTER SIDEBAR Column width (280px) is set in section 4 above, directly on #left-sidebar, since the theme's own --ts-sidebar-width mechanism never applies on this site (see section 4's note on the missing #main wrapper). ------------------------------------------------------------------------- */ /* One cohesive white sidebar panel with section dividers, not a stack of separately-boxed cards - matches the clean reference layout better than a bordered box per widget. */ #left-sidebar, #right-sidebar { background: var(--isp-surface); } #left-sidebar .widget, #right-sidebar .widget { padding: 0 0 var(--isp-space-5); margin-bottom: var(--isp-space-5); border-bottom: var(--isp-border); } #left-sidebar .widget:last-child, #right-sidebar .widget:last-child { border-bottom: 0; margin-bottom: 0; } #left-sidebar .widget-title, #right-sidebar .widget-title { display: flex; align-items: center; justify-content: space-between; font-family: var(--isp-font); font-size: var(--isp-small); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--isp-ink); margin: 0 0 var(--isp-space-4); cursor: pointer; user-select: none; } #left-sidebar .widget-title::after, #right-sidebar .widget-title::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--isp-ink-soft); border-bottom: 2px solid var(--isp-ink-soft); transform: rotate(45deg); transition: transform var(--isp-transition); flex-shrink: 0; } #left-sidebar .widget.isp-collapsed .widget-title::after, #right-sidebar .widget.isp-collapsed .widget-title::after { transform: rotate(-45deg); } #left-sidebar .widget.isp-collapsed > *:not(.widget-title), #right-sidebar .widget.isp-collapsed > *:not(.widget-title) { display: none; } /* Layered nav (attribute) checkboxes */ .woocommerce ul.wc-layered-nav-list, .widget ul.wc-layered-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--isp-space-3); max-height: 280px; overflow-y: auto; } .wc-layered-nav-list li a { display: flex; align-items: center; gap: 10px; font-size: var(--isp-body); line-height: 1.3; color: var(--isp-ink); padding: 2px 0; } .wc-layered-nav-list li a::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--isp-line); border-radius: 4px; background: var(--isp-surface); transition: border-color var(--isp-transition), background var(--isp-transition); } .wc-layered-nav-list li a:hover::before { border-color: var(--isp-brand); } .wc-layered-nav-list li.chosen a::before { background: var(--isp-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--isp-brand); } /* Kleur (color attribute) filter: circular swatches instead of checkbox rows, wrapped in a grid. Swatch color comes from a small JS lookup (real Dutch color-term names -> CSS colors, see redesign.js) applied as an inline background-color on each link via a data attribute - if JS doesn't run, this widget still falls back to the normal checkbox list above, nothing is lost. */ .wc-layered-nav-list.isp-color-swatches { flex-direction: row; flex-wrap: wrap; gap: 10px; max-height: none; overflow: visible; } .wc-layered-nav-list.isp-color-swatches li { position: relative; } .wc-layered-nav-list.isp-color-swatches li a { display: block; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1.5px solid var(--isp-line); box-shadow: inset 0 0 0 2px var(--isp-surface); background-color: var(--isp-swatch-color, var(--isp-surface-muted)); } .wc-layered-nav-list.isp-color-swatches li a::before { content: none; } .wc-layered-nav-list.isp-color-swatches li.chosen a { border-color: var(--isp-brand); box-shadow: inset 0 0 0 2px var(--isp-surface), 0 0 0 2px var(--isp-brand); } .wc-layered-nav-list.isp-color-swatches li .count { display: none; } .wc-layered-nav-list .count { margin-left: auto; color: var(--isp-ink-soft); font-size: 12px; } /* Long term lists (e.g. Merk with hundreds of terms): show first 8, toggle the rest via JS-added .isp-term-hidden / .isp-terms-expanded. Falls back to showing everything if JS doesn't run (no isp-term-hidden gets added). */ .wc-layered-nav-list li.isp-term-hidden { display: none; } .wc-layered-nav-list.isp-terms-expanded li.isp-term-hidden { display: flex; } .isp-term-toggle { display: block; margin-top: var(--isp-space-2); padding: 0; background: none; border: 0; color: var(--isp-brand); font-family: var(--isp-font); font-size: 12px; font-weight: 700; cursor: pointer; } .isp-term-toggle:hover { color: var(--isp-brand-dark); text-decoration: underline; } /* Active filter count on the mobile Filter button */ .isp-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--isp-brand); color: #fff; font-size: 11px; font-weight: 700; } /* Price filter slider */ .widget_price_filter .price_slider { margin-bottom: var(--isp-space-4); } .widget_price_filter .ui-slider { height: 4px; background: var(--isp-line); border: 0; border-radius: 3px; } .widget_price_filter .ui-slider .ui-slider-range { background: var(--isp-brand); border-radius: 3px; } .widget_price_filter .ui-slider .ui-slider-handle { width: 16px; height: 16px; top: -6px; background: var(--isp-surface); border: 2px solid var(--isp-brand); border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .widget_price_filter .price_slider_amount { display: flex; align-items: center; justify-content: space-between; font-size: var(--isp-small); } .widget_price_filter .price_slider_amount .button { height: var(--isp-control-h-sm); padding: 0 var(--isp-space-3); background: var(--isp-brand); color: #fff; border-radius: var(--isp-radius-sm); font-weight: 600; } /* Active filters */ .ts-active-filters .wc-layered-nav-list, .woocommerce .widget_layered_nav_filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--isp-space-2); margin: 0 0 var(--isp-space-4); padding: 0; } .woocommerce .widget_layered_nav_filters ul li a { display: inline-flex; align-items: center; gap: 6px; background: var(--isp-brand-tint); color: var(--isp-brand-dark); border-radius: 999px; padding: 5px 10px 5px 12px; font-size: 12px; font-weight: 600; } /* Rating filter */ .widget_rating_filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--isp-space-2); } .widget_rating_filter .star-rating { color: var(--isp-star); } /* Mobile filter trigger button (theme already outputs .filter-widget-area-button) */ .filter-widget-area-button { display: none; } .filter-widget-area-button a { display: inline-flex; align-items: center; gap: var(--isp-space-2); height: var(--isp-control-h); padding: 0 var(--isp-space-4); background: var(--isp-surface); border: 1.5px solid var(--isp-line); border-radius: var(--isp-radius-md); font-family: var(--isp-font); font-weight: 700; font-size: var(--isp-small); color: var(--isp-ink); } .filter-widget-area-button a::before { content: ""; width: 16px; height: 16px; background: var(--isp-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") center/contain no-repeat; } /* ------------------------------------------------------------------------- 6. PRODUCT CARDS Confirmed real DOM (this theme's actual attached hooks, verified against live output - NOT WooCommerce's stock defaults): section.product > .product-wrapper > .thumbnail-wrapper > a > figure > img (+ img.product-image-back for hover swap) .product-label.on-thumbnail > span.onsale / span.featured (theme's own sale + "featured-as-new" badges) .product-group-button (quickshop + add-to-cart, HOVER overlay - hidden below, redundant with the persistent button in .meta-wrapper) .meta-wrapper > .product-categories (theme's own multi-category text - hidden below, replaced by our single-category .isp-card-cat, output one hook priority earlier so it renders in the same spot) h3.heading-title.product-name (THE title - not .woocommerce-loop- product__title, this theme does not use that WC default class) .star-rating .price .product-group-button-meta (persistent add-to-cart - kept, styled) ------------------------------------------------------------------------- */ .woocommerce.main-products section.product { background: var(--isp-surface); border: var(--isp-border); border-radius: var(--isp-radius-md); overflow: hidden; transition: box-shadow var(--isp-transition), transform var(--isp-transition), border-color var(--isp-transition); } .woocommerce.main-products section.product:hover { box-shadow: var(--isp-shadow-card-hover); border-color: var(--isp-line); transform: translateY(-2px); } .woocommerce.main-products .product-wrapper { display: flex; flex-direction: column; height: 100%; } /* Image box: consistent square container regardless of source proportions */ .woocommerce.main-products .thumbnail-wrapper { position: relative; } .woocommerce.main-products .thumbnail-wrapper > a { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--isp-surface-muted); overflow: hidden; } .woocommerce.main-products .thumbnail-wrapper figure { position: relative; width: 100%; height: 100%; margin: 0; } .woocommerce.main-products .thumbnail-wrapper figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: var(--isp-space-4); transition: transform 220ms ease, opacity 220ms ease; } .woocommerce.main-products .thumbnail-wrapper figure img.product-image-back { opacity: 0; } .woocommerce.main-products section.product:hover .thumbnail-wrapper figure img:not(.product-image-back) { transform: scale(1.03); } .woocommerce.main-products section.product:hover .thumbnail-wrapper figure img.product-image-back { opacity: 1; transform: scale(1.03); } /* Badge container (theme-native: sale % + featured-as-"Nieuw") */ .woocommerce.main-products .product-label.on-thumbnail { position: absolute; top: var(--isp-space-2); left: var(--isp-space-2); right: var(--isp-space-2); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; } .woocommerce.main-products .product-label.on-thumbnail span.onsale, .woocommerce.main-products .product-label.on-thumbnail span.featured, .woocommerce.main-products .product-label.on-thumbnail span.new { display: inline-flex; padding: 5px 8px; border-radius: var(--isp-radius-sm); font-family: var(--isp-font); font-size: 11px; font-weight: 700; line-height: 1; } .woocommerce.main-products .product-label.on-thumbnail span.onsale { background: var(--isp-sale); color: #fff; } .woocommerce.main-products .product-label.on-thumbnail span.featured, .woocommerce.main-products .product-label.on-thumbnail span.new { background: var(--isp-new-tint); color: var(--isp-new); } /* Hover quick-action overlay on the image: hidden - redundant with the persistent add-to-cart button below, and hover-only is not mobile-usable anyway. This directly reduces card clutter. */ .woocommerce.main-products .thumbnail-wrapper .product-group-button { display: none; } /* Meta area */ .woocommerce.main-products .meta-wrapper { display: flex; flex-direction: column; flex: 1; padding: var(--isp-space-3) var(--isp-space-4) var(--isp-space-4); } .woocommerce.main-products .meta-wrapper .product-categories { display: none; /* replaced by the single-category .isp-card-cat below */ } .woocommerce.main-products .isp-card-cat { order: -2; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--isp-ink-soft); margin-bottom: 4px; } .woocommerce.main-products h3.heading-title.product-name { order: -1; font-family: var(--isp-font); font-size: var(--isp-body); font-weight: 600; line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); } .woocommerce.main-products h3.heading-title.product-name a { color: var(--isp-ink); } .woocommerce.main-products .star-rating { font-size: 13px; color: var(--isp-star); margin: 0 0 4px; } .woocommerce.main-products .price { margin: auto 0 0; padding-top: var(--isp-space-2); font-family: var(--isp-font); display: block; } .woocommerce.main-products .price .amount { font-size: 1.05rem; font-weight: 800; color: var(--isp-ink); } .woocommerce.main-products .price del .amount { font-size: 0.85rem; font-weight: 500; color: var(--isp-ink-soft); opacity: 1; } .woocommerce.main-products .price ins { text-decoration: none; } .woocommerce.main-products .price del { margin-right: 6px; } .woocommerce.main-products .stock { font-size: 12px; font-weight: 600; margin: 4px 0 0; } .woocommerce.main-products .stock.out-of-stock { color: var(--isp-sale); } .woocommerce.main-products .stock.in-stock { display: none; /* only surface low-stock / out-of-stock, per "stock info only where useful" */ } .woocommerce.main-products .product-group-button-meta { margin-top: var(--isp-space-3); } .woocommerce.main-products .product-group-button-meta a.add_to_cart_button, .woocommerce.main-products .product-group-button-meta a.button.product_type_simple, .woocommerce.main-products .product-group-button-meta a.added_to_cart { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--isp-control-h-sm); text-align: center; border-radius: var(--isp-radius-sm); background: var(--isp-brand); color: #fff !important; font-family: var(--isp-font); font-size: var(--isp-small); font-weight: 700; border: 0; transition: background var(--isp-transition); } .woocommerce.main-products .product-group-button-meta a.add_to_cart_button:hover { background: var(--isp-brand-dark); } /* This button's ONLY text content is the .ts-tooltip span (normally a hover-reveal tooltip on an icon-only button in the theme's own design) - force it to render as the permanent, always-visible button label instead. */ .woocommerce.main-products .product-group-button-meta .ts-tooltip { position: static !important; display: inline !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: none !important; color: inherit !important; padding: 0 !important; white-space: normal; } /* ------------------------------------------------------------------------- 7. SINGLE PRODUCT PAGE ------------------------------------------------------------------------- */ .single-product #main-content { padding-block: var(--isp-space-5); } /* Slightly more generous horizontal container padding on the product page specifically (24px vs the site-wide 16px), scoped to single-product only so shop/category pages are unaffected. */ .single-product .page-container { padding-inline: var(--isp-space-5); } /* This theme reserves a left-sidebar slot on single-product pages (theme option ts_prod_layout=1-1-0) pointing at "Product Detail Zijbalk" (product-detail-sidebar), which is confirmed EMPTY (no widgets) on this site - yet the theme still renders the empty