.elementor-kit-4{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#000000;--e-global-color-accent:#61CE70;--e-global-color-158a9a3:#FFDB63;--e-global-color-adb3340:#7E7B75;--e-global-typography-primary-font-family:"Source Sans Pro";--e-global-typography-primary-font-size:1rem;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.4em;--e-global-typography-secondary-font-family:"Source Sans Pro";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Source Sans Pro";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.4em;--e-global-typography-accent-font-family:"Source Sans Pro";--e-global-typography-accent-font-weight:500;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:#000000;}.elementor-kit-4 a:hover{color:var( --e-global-color-158a9a3 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1330px;}.e-con{--container-max-width:1330px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
modern produktarkiv + filterpanel (elementor + woocommerce)
inkl. tidigare arkiv-css och ny filter-css
========================================================= */
/* --------------------------
variabler / tema
--------------------------- */
:root {
--shop-max-width: 1200px;
--gap: 1.25rem;
--radius: 16px;
--radius-sm: 12px;
--shadow: 0 8px 24px rgba(0,0,0,.08);
--shadow-hover: 0 16px 40px rgba(0,0,0,.12);
--bg-card: #ffffff;
--bg-page: #fafafa;
--text: #111;
--text-dim: #555;
--muted: #888;
--border: #eaeaea;
--brand: #2563eb;
--brand-700: #1d4ed8;
--accent: #10b981; /* prisfärg */
--danger: #ef4444; /* rea */
--star: #f5b301;
--transition: .28s cubic-bezier(.2,.65,.25,1);
--sticky-top: 84px; /* offset för sticky panel under header – justera efter din header-höjd */
--cols-desktop: 4; /* 4 per rad ≥ 1025px */
--cols-laptop: 3; /* 3 per rad 768–1024px */
--cols-tablet: 2; /* 2 per rad 521–767px */
--cols-mobile: 1; /* 1 per rad ≤ 520px */
--prod-gap: 1.25rem; /* avstånd mellan kort */
}
/* --------------------------
produktgrid (tidigare css)
--------------------------- */
.woocommerce.archive,
.elementor-widget-woocommerce-archive-products { background: var(--bg-page); }
.woocommerce .products,
.woocommerce-page .products {
max-width: var(--shop-max-width);
margin: 0 auto;
padding: clamp(10px, 2vw, 20px);
display: grid !important;
grid-template-columns: repeat(12, 1fr);
gap: var(--gap);
align-items: stretch;
}
/* grid-brytpunkt: 4/3/2/1 kolumner */
.woocommerce ul.products li.product { grid-column: span 3; }
@media (max-width: 1024px) { .woocommerce ul.products li.product { grid-column: span 4; } }
@media (max-width: 768px) { .woocommerce ul.products li.product { grid-column: span 6; } }
@media (max-width: 520px) { .woocommerce ul.products li.product { grid-column: span 12; } }
/* kort-stil */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
position: relative;
list-style: none;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: clip;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-3px);
border-color: rgba(0,0,0,.06);
box-shadow: var(--shadow-hover);
}
/* bild */
.woocommerce ul.products li.product a img {
width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
transition: transform var(--transition), filter var(--transition);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; display: block; overflow: hidden; isolation: isolate; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); filter: saturate(1.05); }
/* badges */
.woocommerce ul.products li.product .onsale {
position: absolute; top: .75rem; left: .75rem; z-index: 2;
background: var(--danger); color:#fff; font-weight: 600; font-size: .75rem; line-height: 1;
padding: .5rem .6rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(239,68,68,.25);
}
.woocommerce ul.products li.product .wc-new-badge {
position: absolute; top: .75rem; right: .75rem; z-index: 2;
background: var(--brand); color:#fff; font-weight: 600; font-size: .72rem; line-height: 1;
padding: .5rem .6rem; border-radius: 10px; opacity: .95;
}
/* innehåll */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
margin: .9rem .9rem 0; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
font-weight: 700; color: var(--text); line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce ul.products li.product .woocommerce-product-details__short-description,
.woocommerce ul.products li.product .product-excerpt {
margin: .4rem .9rem 0; color: var(--text-dim); font-size: .9rem; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* pris */
.woocommerce ul.products li.product .price { margin: .6rem .9rem 0; color: var(--accent); font-weight: 700; font-size: 1rem; }
.woocommerce ul.products li.product .price del { color: var(--muted); margin-right: .35rem; opacity: .7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--accent); }
/* rating */
.woocommerce ul.products li.product .star-rating { margin: .65rem .9rem 0; letter-spacing: .05em; transform: translateZ(0); }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--star); }
/* knappar */
.woocommerce ul.products li.product .button {
margin: .9rem; border-radius: var(--radius-sm); background: var(--brand); color: #fff;
font-weight: 600; padding: .75rem 1rem; line-height: 1; text-align: center;
display: inline-flex; align-items:center; justify-content:center; gap:.5rem;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
box-shadow: 0 10px 20px rgba(37,99,235,.15);
}
.woocommerce ul.products li.product .button:hover {
background: var(--brand-700); transform: translateY(-1px);
box-shadow: 0 16px 28px rgba(29,78,216,.2);
}
.woocommerce ul.products li.product .added_to_cart { margin: 0 .9rem 1rem; display:inline-block; font-size:.9rem; color: var(--brand); }
/* action-rad */
.woocommerce ul.products li.product .price + .button,
.woocommerce ul.products li.product .star-rating + .price + .button,
.woocommerce ul.products li.product .woocommerce-loop-product__title + .price + .button { margin-top: auto; }
/* wishlist (valfritt) */
.woocommerce ul.products li.product .add_to_wishlist,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist a {
position: absolute; right:.75rem; bottom:.75rem; z-index:3;
background: rgba(255,255,255,.9); border:1px solid var(--border); border-radius:999px;
padding:.5rem .7rem; font-size:.9rem; color:var(--text); box-shadow: var(--shadow);
transition: transform var(--transition), background var(--transition);
}
.woocommerce ul.products li.product .add_to_wishlist:hover,
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist a:hover { transform: translateY(-2px); background:#fff; }
/* list reset */
.woocommerce ul.products { margin: 0 !important; }
/* toppsektion */
.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count { font-size:.95rem; color: var(--text-dim); }
.woocommerce .woocommerce-ordering select {
border-radius: 10px; border:1px solid var(--border); padding:.55rem .8rem; background:#fff;
}
/* pagination */
.woocommerce nav.woocommerce-pagination {
max-width: var(--shop-max-width); margin: 1rem auto 2rem; padding:0 clamp(10px,2vw,20px);
}
.woocommerce nav.woocommerce-pagination ul {
display:flex; gap:.5rem; align-items:center; justify-content:center; border:0; padding:0; margin:0;
}
.woocommerce nav.woocommerce-pagination ul li { border:0; margin:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
min-width:40px; height:40px; display:grid; place-items:center; padding:0 .75rem;
border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--text); font-weight:600;
transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { transform: translateY(-1px); border-color: rgba(0,0,0,.1); }
.woocommerce nav.woocommerce-pagination ul li .current { background: var(--brand); color:#fff; border-color: var(--brand); }
/* notices */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message { border-radius: 12px; }
/* mörkt läge */
body.dark .woocommerce.archive,
body.dark .elementor-widget-woocommerce-archive-products {
--bg-page:#0b0b0b; --bg-card:#121212; --text:#f3f3f3; --text-dim:#c9c9c9; --border:#1f1f1f;
--shadow: 0 8px 24px rgba(0,0,0,.4); --shadow-hover: 0 16px 40px rgba(0,0,0,.5);
}
body.dark .woocommerce nav.woocommerce-pagination ul li a,
body.dark .woocommerce nav.woocommerce-pagination ul li span { background:#121212; color:var(--text); border-color:var(--border); }
body.dark .woocommerce ul.products li.product .added_to_cart { color: var(--brand); }
/* container-baserad loop */
.elementor-widget-woocommerce-archive-products :where(ul.products li.product) { border-radius: var(--radius); overflow: clip; }
/* fokus */
.woocommerce ul.products li.product :is(a, button, .button):focus-visible {
outline: 2px solid color-mix(in oklab, var(--brand) 70%, white);
outline-offset: 2px; border-radius: 10px;
}
/* kompakt variant (valfritt) */
.shop--compact .woocommerce ul.products { gap: .9rem; }
.shop--compact .woocommerce ul.products li.product { border-radius: 12px; }
.shop--compact .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: .7rem .7rem 0; }
.shop--compact .woocommerce ul.products li.product .price,
.shop--compact .woocommerce ul.products li.product .button { margin-left: .7rem; margin-right: .7rem; }
/* kategorikort */
.woocommerce ul.products li.product.product-category a img { aspect-ratio: 16/9; border-bottom:1px solid var(--border); }
.woocommerce ul.products li.product.product-category h2.woocommerce-loop-category__title {
margin: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--text);
}
/* =========================================================
filterpanel (ny css)
gäller woocommerce-widgetar, elementor nav-menu, jet smart filters m.fl.
struktur: wrapper .filters-panel kring dina filter-widgets
========================================================= */
/* panel-wrapper */
.filters-panel {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 14px;
display: flex; flex-direction: column; gap: 12px;
}
/* sticky-läge (lägg också .is-sticky på wrapper om du vill slå av/på) */
.filters-panel.is-sticky,
.filters-panel.sticky {
position: sticky;
top: var(--sticky-top);
}
/* panel-header (frivillig rubrik + clear-all) */
.filters-header {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 6px 2px 6px;
}
.filters-title {
font-size: 1rem; font-weight: 800; color: var(--text);
letter-spacing: .01em;
}
.filters-clear-all {
display: inline-flex; align-items:center; gap:.4rem; padding:.45rem .65rem;
font-size:.85rem; font-weight:700; color: var(--brand);
background: color-mix(in oklab, var(--brand) 10%, white);
border: 1px solid color-mix(in oklab, var(--brand) 25%, white);
border-radius: 999px;
transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.filters-clear-all:hover { transform: translateY(-1px); }
/* grupp/accordion */
.filter-group {
border: 1px solid var(--border);
border-radius: 12px;
overflow: clip;
background: #fff;
}
body.dark .filter-group { background:#121212; }
.filter-group + .filter-group { margin-top: 6px; }
.filter-group__header {
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding: .9rem 1rem; cursor:pointer; user-select:none;
}
.filter-group__title { font-weight: 800; color: var(--text); font-size: .98rem; }
.filter-group__chevron {
width: 18px; height: 18px; flex: 0 0 auto; transition: transform var(--transition);
}
/* accordion – “öppen” via .is-open eller via checkbox-hack (se längre ned) */
.filter-group.is-open .filter-group__chevron { transform: rotate(180deg); }
.filter-group__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--transition); }
.filter-group.is-open .filter-group__content { grid-template-rows: 1fr; }
.filter-group__inner { overflow: hidden; padding: 0 1rem 1rem; display: grid; gap: .65rem; }
/* typiska widgetar: listor, checkboxar, radio */
.filters-panel :is(.widget, .jet-smart-filter, .wpf, .woocommerce-widget-layered-nav) ul { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.filters-panel li { margin:0; }
.filters-panel label {
display:flex; align-items:center; gap:.55rem; cursor:pointer; color: var(--text);
font-size: .95rem; line-height: 1.3; padding:.35rem .4rem; border-radius: 10px;
transition: background var(--transition), color var(--transition);
}
.filters-panel input[type="checkbox"],
.filters-panel input[type="radio"] {
width: 18px; height: 18px; border-radius: 4px; border:1px solid var(--border);
appearance: none; display:grid; place-items:center; background:#fff; position:relative; flex:0 0 auto;
transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.filters-panel input[type="radio"] { border-radius: 999px; }
.filters-panel input[type="checkbox"]:checked,
.filters-panel input[type="radio"]:checked {
background: var(--brand);
border-color: var(--brand);
}
.filters-panel input[type="checkbox"]:checked::after {
content:""; width:10px; height:10px; background:#fff; border-radius:2px; display:block;
}
.filters-panel input[type="radio"]:checked::after {
content:""; width:8px; height:8px; background:#fff; border-radius:999px; display:block;
}
.filters-panel label:hover { background: color-mix(in oklab, var(--brand) 7%, white); }
/* sök i filter (t.ex. produktkategori-sök) */
.filter-search {
position: relative; margin: .6rem 1rem 0; display:flex; align-items:center;
}
.filter-search input[type="search"],
.filter-search input[type="text"] {
width: 100%; border:1px solid var(--border); border-radius: 10px; padding: .6rem .8rem .6rem 2.2rem; background:#fff;
}
.filter-search .icon {
position:absolute; left:.75rem; width:16px; height:16px; opacity:.6;
}
/* prisslider (woocommerce price filter widget + jetsmartfilters range) */
.price-slider, .jsf-range, .wpf-range {
padding: .4rem 1rem 1rem;
}
.price_slider_wrapper .ui-slider,
.jsf-range .irs,
.wpf-range .irs {
height: 4px; background: color-mix(in oklab, var(--brand) 20%, white); border-radius: 999px; border: 0;
box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
.price_slider_wrapper .ui-slider-range,
.jsf-range .irs-bar,
.wpf-range .irs-bar { height: 100%; background: var(--brand); border-radius: 999px; }
.price_slider_wrapper .ui-slider-handle,
.jsf-range .irs-handle,
.wpf-range .irs-handle {
top: -7px; width: 18px; height: 18px; border-radius: 999px; background: #fff;
border: 2px solid var(--brand); box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.price_label, .irs-from, .irs-to, .irs-single, .wpf-range .irs-from, .wpf-range .irs-to {
display:inline-block; font-size:.9rem; font-weight:700; color: var(--text);
background: color-mix(in oklab, var(--brand) 8%, white);
border:1px solid color-mix(in oklab, var(--brand) 22%, white);
padding:.25rem .5rem; border-radius:8px; margin-left: 1rem;
}
/* ratingfilter (stjärnor på rad) */
.filter-rating {
display:flex; gap:.35rem; align-items:center; padding: .2rem 1rem 1rem;
}
.filter-rating .star {
width: 18px; height: 18px; display:inline-block; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23000' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568L24 9.75l-6 5.85 1.416 8.4L12 19.771 4.584 24l1.416-8.4L0 9.75l8.332-1.595L12 .587z'/%3E%3C/svg%3E") center/contain no-repeat;
background: var(--star);
opacity:.35; transition: opacity var(--transition);
}
.filter-rating input:checked ~ .star,
.filter-rating .star.is-active { opacity: 1; }
/* färgfilter – små färgprickar (lägg klass .swatch på label + data-color) */
.filters-panel .swatch {
position: relative; padding-left: 2rem;
}
.filters-panel .swatch::before {
content:""; position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
width: 16px; height:16px; border-radius:999px; border:1px solid var(--border);
background: var(--muted);
}
.filters-panel .swatch[data-color]::before { background: attr(data-color color, var(--muted)); }
/* aktiva filter-taggar (woocommerce_layered_nav_filters / jetsmartfilters active tags) */
.active-filters {
display:flex; flex-wrap: wrap; gap: .5rem; padding: .25rem 1rem 1rem; margin-top: -.25rem;
}
.active-filter-tag {
display:inline-flex; align-items:center; gap:.5rem;
padding:.4rem .6rem; font-size:.85rem; font-weight:700; color: var(--text);
background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow: var(--shadow);
}
.active-filter-tag .remove { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px; background: var(--brand); color:#fff; font-size:.75rem; }
/* submit/apply-knapp i filter (för plugins som kräver det) */
.filters-apply {
display:flex; gap:.5rem; align-items:center; justify-content:flex-end; padding: 0 1rem 1rem;
}
.filters-apply .button, .filters-apply button, .filters-apply .apply-filters {
border-radius: 10px; background: var(--brand); color:#fff; font-weight:700;
padding:.65rem .9rem; border:1px solid var(--brand); box-shadow: 0 6px 14px rgba(37,99,235,.18);
transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.filters-apply .button:hover, .filters-apply button:hover, .filters-apply .apply-filters:hover {
background: var(--brand-700); transform: translateY(-1px);
}
/* divider/sektionstext i grupp */
.filter-group .section-hint {
margin: .25rem 1rem 0; font-size:.85rem; color: var(--muted);
}
/* --------------------------
off-canvas på mobil (css-only)
markup:
--------------------------- */
.filters-toggle {
display:none;
}
@media (max-width: 992px) {
.filters-toggle {
display:inline-flex; align-items:center; gap:.5rem;
border:1px solid var(--border); background:#fff; border-radius: 999px;
padding:.6rem .9rem; font-weight:800; color:var(--text); cursor:pointer;
box-shadow: var(--shadow);
}
.filters-drawer {
position: fixed; inset: 0 0 0 auto; width: min(92vw, 420px); z-index: 1000;
transform: translateX(100%); transition: transform var(--transition);
background: var(--bg-page); border-left:1px solid var(--border);
display:flex; flex-direction:column; padding: 14px;
}
#filters-open:checked ~ .filters-drawer { transform: translateX(0); }
/* backdrop */
.filters-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none;
transition: opacity var(--transition); z-index: 999;
}
#filters-open:checked ~ .filters-backdrop { opacity: 1; pointer-events: auto; }
/* gör panel mindre “tung” på mobil */
.filters-drawer .filters-panel { box-shadow: none; border-radius: 12px; border: 1px solid var(--border); }
}
/* --------------------------
tillgänglighet & fokus
--------------------------- */
.filters-panel :is(a, button, input, select, [role="button"], label):focus-visible {
outline: 2px solid color-mix(in oklab, var(--brand) 70%, white);
outline-offset: 2px;
border-radius: 8px;
}
/* --------------------------
mörkt läge för filter
--------------------------- */
body.dark .filters-panel { background:#121212; border-color:#1f1f1f; }
body.dark .filters-clear-all { background: color-mix(in oklab, var(--brand) 5%, #121212); border-color:#1f1f1f; }
body.dark .filter-group { background:#151515; border-color:#1f1f1f; }
body.dark .filters-panel input[type="checkbox"],
body.dark .filters-panel input[type="radio"] { background:#151515; border-color:#2a2a2a; }
body.dark .filter-search input[type="search"],
body.dark .filter-search input[type="text"] { background:#0f0f0f; border-color:#222; color:#f0f0f0; }
body.dark .active-filter-tag { background:#151515; border-color:#1f1f1f; color:#eaeaea; }
/* --------------------------
kompat – vanliga wc-widgetar
--------------------------- */
.filters-panel :is(.widget_product_categories, .widget_layered_nav, .woocommerce-widget-layered-nav,
.woocommerce-widget-price-filter, .woocommerce-widget-rating-filter) {
margin: 0; border: 0; background: transparent; padding: 0;
}
.widget_product_categories .count,
.woocommerce-widget-layered-nav-list__item .count { color: var(--muted); font-weight:700; margin-left:auto; }
/* woo rating stars i widget */
.woocommerce-widget-rating-filter .star-rating span::before,
.woocommerce-widget-rating-filter .star-rating::before { color: var(--star); }
/* jetsmartfilters – standardklasser */
.filters-panel .jet-smart-filters-checkboxes__row label,
.filters-panel .jet-smart-filters-radio__row label {
padding:.35rem .5rem; border-radius: 10px;
}
.filters-panel .jet-active-filters__item { composes: active-filter-tag; } /* om composes ej stöds, duplicera klassen */
.filters-panel .jet-active-filters__remove { composes: remove; }
/* --------------------------
layout med grid: sidebar + grid (om du kör filters vänster)
wrapper med .shop-layout
--------------------------- */
.shop-layout {
max-width: var(--shop-max-width);
margin: 0 auto;
padding: clamp(10px, 2vw, 20px);
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--gap);
align-items: start;
}
@media (max-width: 992px) {
.shop-layout {
grid-template-columns: 1fr;
}
}
/* extra: liten “chips”-rad ovan grid med valda filter */
.selected-filters-bar {
display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom: .5rem;
}
.selected-filters-bar .chip {
display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .6rem;
border:1px solid var(--border); border-radius:999px; background:#fff; font-weight:700; font-size:.85rem;
}
.selected-filters-bar .chip .x { width:18px; height:18px; display:grid; place-items:center; background: var(--brand); color:#fff; border-radius: 999px; }
/* --------------------------
små util-klasser
--------------------------- */
.hide { display:none !important; }
.m-0 { margin:0 !important; }
.mt-0 { margin-top:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.p-0 { padding:0 !important; }
/* ===============================
kompaktare kort (elementor wc)
lägg sist
=============================== */
/* 1) tajta till bildytan och ta bort grå bakgrund/padding som vissa teman lägger på länken */
.elementor-widget-woocommerce-archive-products ul.products li.product a.woocommerce-LoopProduct-link {
display: block;
padding: 0 !important;
background: transparent !important;
}
/* kvadratisk bild funkar oftast bäst på kataloger */
.woocommerce ul.products li.product a img {
aspect-ratio: 1 / 1; /* ändra till 3/4 eller 4/5 om du vill */
object-fit: cover;
background: #fff; /* så placeholdern inte ser grön/grå ut */
}
/* 2) förhindra onödig höjd från tema/min-height */
.woocommerce ul.products li.product {
min-height: auto !important;
padding: 0 !important; /* vissa teman lägger padding i li */
}
/* 3) kompaktare typografi och spacing i innehållet */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
margin: .75rem .9rem 0 !important;
font-size: 1rem;
line-height: 1.25;
}
.woocommerce ul.products li.product .price {
margin: .4rem .9rem 0 !important;
}
.woocommerce ul.products li.product .star-rating {
margin: .45rem .9rem 0 !important;
}
/* 4) knapp: mindre, utan extra luft i botten */
.woocommerce ul.products li.product .button {
margin: .6rem .9rem .9rem !important;
padding: .6rem .9rem !important;
}
/* 5) säkerställ kolumnlayouten (behåller dina variabler) */
.elementor-widget-woocommerce-archive-products ul.products,
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(var(--cols-desktop, 3), minmax(0, 1fr));
gap: var(--prod-gap, 1.25rem);
}
.woocommerce ul.products li.product { grid-column: auto !important; }
@media (max-width: 1024px) {
.elementor-widget-woocommerce-archive-products ul.products,
.woocommerce ul.products { grid-template-columns: repeat(var(--cols-laptop, 3), minmax(0,1fr)); }
}
@media (max-width: 768px) {
.elementor-widget-woocommerce-archive-products ul.products,
.woocommerce ul.products { grid-template-columns: repeat(var(--cols-tablet, 2), minmax(0,1fr)); }
}
@media (max-width: 520px) {
.elementor-widget-woocommerce-archive-products ul.products,
.woocommerce ul.products { grid-template-columns: repeat(var(--cols-mobile, 1), minmax(0,1fr)); }
}
/* 6) elementor-pro “products” extra wrappers – nollställ ev. spacing */
.elementor-widget-woocommerce-archive-products .elementor-products-grid .product {
margin: 0 !important;
}
.elementor-widget-woocommerce-archive-products .elementor-products-grid {
gap: 0 !important; /* vi styr gap på ul.products */
}/* End custom CSS */