/* =========================================================================
Olsen Nettbutikk
Lastes kun på butikkforside, kategorisider og produktsøk.
========================================================================= */
/* Designtokens ligger i header.css (.olsen-shopui), som lastes først. */
/* Tall skal ikke vibrere nedover lista */
.olsen-shop .olsen-card__price,
.olsen-shop .olsen-opt__n,
.olsen-shop .olsen-tree em,
.olsen-shop .olsen-toolbar__count,
.olsen-shop .olsen-subcats i,
.olsen-shop .woocommerce-pagination{font-variant-numeric:tabular-nums}
/* =========================================================================
BRØDSMULER
========================================================================= */
.olsen-crumbs{margin:0 0 14px}
.olsen-crumbs .olsen-crumbs__list,
.olsen-crumbs .woocommerce-breadcrumb{
font-size:12.5px; color:var(--o-muted); margin:0; padding:0;
display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
.olsen-crumbs a{color:var(--o-muted); text-decoration:none}
.olsen-crumbs a:hover{color:var(--o-ink); text-decoration:underline}
.olsen-crumbs span[aria-hidden]{color:var(--o-faint)}
/* =========================================================================
PAGINERING
========================================================================= */
.olsen-layout__main .woocommerce-pagination{margin:22px 0 0; text-align:center}
.olsen-layout__main .woocommerce-pagination ul.page-numbers{
display:flex; gap:6px; justify-content:center; align-items:center;
flex-wrap:wrap; border:0; margin:0; padding:0; list-style:none;
}
.olsen-layout__main .woocommerce-pagination li{border:0; margin:0; overflow:visible}
.olsen-layout__main .woocommerce-pagination .page-numbers{
min-width:38px; height:38px; padding:0 11px;
display:inline-flex; align-items:center; justify-content:center;
background:#fff; border:1px solid var(--o-line); border-radius:6px;
font-size:13.5px; font-weight:600; color:var(--o-ink); text-decoration:none;
}
.olsen-layout__main .woocommerce-pagination a.page-numbers:hover{
border-color:var(--o-navy); color:var(--o-navy); background:#fff;
}
.olsen-layout__main .woocommerce-pagination .page-numbers.current{
background:var(--o-navy); border-color:var(--o-navy); color:#fff;
}
.olsen-layout__main .woocommerce-pagination .page-numbers.dots{
border:0; background:none; color:var(--o-faint); min-width:auto; padding:0 4px;
}
/* =========================================================================
UTFYLLENDE KATEGORITEKST
========================================================================= */
.olsen-longtext{
background:var(--o-card); border:1px solid var(--o-line);
border-radius:var(--o-r); box-shadow:var(--o-shadow);
padding:22px 24px; margin:26px 0 0;
}
.olsen-longtext > :first-child{margin-top:0}
.olsen-longtext > :last-child{margin-bottom:0}
.olsen-longtext h2{font-size:18px; line-height:1.3; margin:0 0 8px}
.olsen-longtext h3{font-size:14.5px; line-height:1.35; margin:18px 0 5px}
.olsen-longtext p,
.olsen-longtext li{font-size:14px; color:#3f5162; max-width:78ch}
.olsen-longtext p{margin:0 0 8px}
.olsen-longtext ul,.olsen-longtext ol{margin:0 0 8px; padding-left:20px}
.olsen-longtext a{color:var(--o-navy); text-decoration:underline}
/* =========================================================================
SIDEHODE – tittel, kategoritekst, underkategori-chips
========================================================================= */
.olsen-pagehead{margin:0 0 18px}
.olsen-pagehead__title{
font-size:clamp(23px,2.2vw,29px); line-height:1.15; letter-spacing:-.02em;
font-weight:800; margin:0 0 5px; padding:0; color:var(--o-ink);
}
.olsen-pagehead__count{font-size:13.5px; color:var(--o-muted); margin:0}
.olsen-pagehead__text{
margin-top:10px; color:#3f5162; font-size:14px; max-width:72ch;
}
.olsen-pagehead__text p{margin:0 0 8px}
.olsen-pagehead__text p:last-child{margin-bottom:0}
.olsen-subcats{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0}
.olsen-subcats a{
background:#fff; border:1px solid var(--o-line); border-radius:20px;
padding:6px 13px; font-size:13px; font-weight:600;
color:var(--o-ink); text-decoration:none; box-shadow:var(--o-shadow);
}
.olsen-subcats a{transition:border-color .16s var(--o-ease), color .16s var(--o-ease), box-shadow .16s var(--o-ease)}
.olsen-subcats a:hover{border-color:var(--o-navy); color:var(--o-navy); box-shadow:var(--o-shadow-lift)}
.olsen-subcats i{color:var(--o-faint); font-style:normal; font-weight:400; margin-left:2px}
/* «Alle i kategorien» øverst i sidemenyens tre */
.olsen-tree__all{font-weight:600}
/* =========================================================================
LAYOUT – filtermeny + produktliste
========================================================================= */
.olsen-layout{display:grid; grid-template-columns:1fr; gap:26px; align-items:start}
@media(min-width:1000px){
.olsen-layout{grid-template-columns:var(--olsen-sidebar) 1fr}
/* Filtrene skal ikke forsvinne etter to skjermer med scrolling. */
.olsen-layout__side{
position:sticky; top:20px;
max-height:calc(100vh - 40px); overflow-y:auto;
scrollbar-width:thin;
}
.olsen-layout__side::-webkit-scrollbar{width:6px}
.olsen-layout__side::-webkit-scrollbar-thumb{background:var(--o-line-dk); border-radius:3px}
}
@media(max-width:999px){
.olsen-layout__side{display:none}
}
.olsen-layout__main{min-width:0}
/* =========================================================================
FILTERMENY
========================================================================= */
.olsen-facets{
background:var(--o-card); border:1px solid var(--o-line);
border-radius:var(--o-r); box-shadow:var(--o-shadow); overflow:hidden;
}
/* Søkefeltet i sidemenyen. Selve feltet styles av search.css – det er
samme komponent som øverst, bare i kompakt variant. */
.olsen-facets > .olsen-searchbar{padding:12px 14px; border-bottom:1px solid var(--o-line)}
.olsen-facet{border-bottom:1px solid var(--o-line)}
.olsen-facet:last-of-type{border-bottom:0}
.olsen-facet > summary{
list-style:none; cursor:pointer; padding:13px 15px;
font-weight:700; font-size:13.5px;
display:flex; justify-content:space-between; align-items:center;
}
.olsen-facet > summary::-webkit-details-marker{display:none}
.olsen-facet > summary::after{
content:""; width:7px; height:7px; margin-top:-4px; flex:none;
border-right:2px solid var(--o-faint); border-bottom:2px solid var(--o-faint);
transform:rotate(45deg); transition:transform .15s, margin .15s;
}
.olsen-facet[open] > summary::after{transform:rotate(-135deg); margin-top:2px}
.olsen-facet__body{padding:2px 15px 14px}
.olsen-opt{
display:flex; align-items:center; gap:9px; padding:5px 0;
font-size:13.5px; color:var(--o-ink); text-decoration:none;
}
.olsen-opt.is-hidden{display:none}
.olsen-facet__body.is-open .olsen-opt.is-hidden{display:flex}
.olsen-opt__box{transition:background .15s var(--o-ease), border-color .15s var(--o-ease);
width:15px; height:15px; flex:none; background:#fff;
border:1.5px solid var(--o-line-dk); border-radius:3px;
}
.olsen-opt.is-checked .olsen-opt__box{transition:background .15s var(--o-ease), border-color .15s var(--o-ease);
background:var(--o-navy); border-color:var(--o-navy);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center;
}
.olsen-opt.is-checked .olsen-opt__label{font-weight:600}
.olsen-opt__label{min-width:0; overflow-wrap:anywhere}
.olsen-opt__n{color:var(--o-faint); font-size:12px; margin-left:auto; flex:none}
.olsen-opt{border-radius:var(--o-r-sm); transition:color .15s var(--o-ease)}
.olsen-opt:hover{color:var(--o-navy)}
.olsen-opt:hover .olsen-opt__box{transition:background .15s var(--o-ease), border-color .15s var(--o-ease);
border-color:var(--o-navy)}
.olsen-facet__more{
font-size:12.5px; font-weight:700; color:var(--o-navy);
cursor:pointer; margin-top:6px; background:none; border:0; padding:0;
}
.olsen-facet__more:hover{text-decoration:underline}
.olsen-tree{list-style:none; font-size:13.5px; margin:0; padding:0}
.olsen-tree li{padding:5px 0}
.olsen-tree a{display:flex; justify-content:space-between; gap:8px; color:var(--o-ink); text-decoration:none}
.olsen-tree a:hover{color:var(--o-navy); font-weight:600}
.olsen-tree a.is-current{font-weight:700; color:var(--o-navy)}
.olsen-tree em{color:var(--o-faint); font-size:12px; font-style:normal; flex:none}
.olsen-tree__sub{
list-style:none; padding-left:12px; margin:4px 0 4px 3px;
border-left:2px solid var(--o-line);
}
.olsen-switch{
display:flex; align-items:center; justify-content:space-between;
padding:12px 15px; font-size:13.5px; font-weight:600;
color:var(--o-ink); text-decoration:none; border-top:1px solid var(--o-line);
}
.olsen-switch__track{
width:38px; height:22px; border-radius:20px; background:var(--o-line-dk);
position:relative; flex:none; transition:background .15s;
}
.olsen-switch__track::after{
content:""; position:absolute; top:3px; left:3px;
width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s;
}
.olsen-switch.is-on .olsen-switch__track{background:var(--o-green)}
.olsen-switch.is-on .olsen-switch__track::after{left:19px}
/* =========================================================================
VERKTØYLINJE
========================================================================= */
.olsen-toolbar{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
background:var(--o-card); border:1px solid var(--o-line);
border-radius:var(--o-r); padding:10px 12px; margin:0 0 12px;
box-shadow:var(--o-shadow);
}
.olsen-toolbar__count{font-size:13.5px; color:var(--o-muted); margin:0}
.olsen-toolbar__count b{color:var(--o-ink)}
.olsen-toolbar__gap{flex:1}
.olsen-toolbar__sort{display:flex; gap:10px; margin:0}
.olsen-select{
height:36px; border:1px solid var(--o-line-dk); border-radius:6px;
padding:0 30px 0 10px; font-size:13.5px; background-color:#fff; color:var(--o-ink);
-webkit-appearance:none; appearance:none; cursor:pointer; max-width:100%;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 10px center;
}
.olsen-viewtoggle{display:flex; border:1px solid var(--o-line-dk); border-radius:6px; overflow:hidden}
/*
* Ikonknapper sentrerer ikonet absolutt, ikke med padding.
*
* Grunnen: en fast bredde pluss padding fra temaet gir et innholdsfelt som
* klemmes til null, og ikonet sklir ut. Absolutt sentrering bryr seg ikke
* om hva temaet fyller inn – den holder selv mot !important.
*/
.olsen-viewtoggle button{
position:relative; width:36px; height:36px; padding:0; border:0;
background:#fff; cursor:pointer; color:var(--o-muted); overflow:hidden;
}
.olsen-viewtoggle button svg{
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
}
.olsen-viewtoggle button{transition:background .15s var(--o-ease), color .15s var(--o-ease)}
.olsen-viewtoggle button.is-on{background:var(--o-navy); color:#fff}
.olsen-filterbtn{
display:none; align-items:center; gap:8px; height:38px; padding:0 14px;
border:1px solid var(--o-navy); background:#fff; color:var(--o-navy);
font-weight:700; font-size:13.5px; border-radius:6px; cursor:pointer;
}
@media(max-width:999px){.olsen-filterbtn{display:flex}}
.olsen-filterbtn__n{
background:var(--o-navy); color:#fff; border-radius:20px;
font-size:11px; padding:1px 6px; line-height:1.5;
}
/* chips */
.olsen-chips{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 14px}
.olsen-chip{
display:inline-flex; align-items:center; gap:7px;
background:#fff; border:1px solid var(--o-navy); color:var(--o-navy);
border-radius:20px; padding:5px 8px 5px 12px;
font-size:12.5px; font-weight:600; text-decoration:none;
}
.olsen-chip span[aria-hidden]{
background:var(--o-navy); color:#fff; width:16px; height:16px;
border-radius:50%; font-size:11px; display:grid; place-items:center; line-height:1;
}
.olsen-chip{transition:background .15s var(--o-ease), box-shadow .15s var(--o-ease)}
.olsen-chip:hover{background:#f2f6fa; color:var(--o-navy); box-shadow:0 2px 8px rgba(38,60,80,.12)}
.olsen-chips__reset{font-size:12.5px; color:var(--o-muted); text-decoration:underline}
/* =========================================================================
PRODUKTLISTE
========================================================================= */
.olsen-shop .olsen-layout__main .olsen-products{
display:flex; flex-direction:column; gap:8px;
margin:0; padding:0; list-style:none;
/* Kadence setter kolonner paa .products via generert CSS. Vi eier denne
beholderen (se Olsen_Archive::loop_start) og nullstiller alt. */
grid-template-columns:none;
}
.olsen-shop .olsen-layout__main .olsen-products::before,
.olsen-shop .olsen-layout__main .olsen-products::after{content:none; display:none}
.olsen-shop .olsen-products > li.product.olsen-card{
margin:0; padding:12px 14px; text-align:left; list-style:none;
border:1px solid var(--o-line); border-radius:var(--o-r);
background:var(--o-card); box-shadow:var(--o-shadow);
/* Kadence setter bredde og float fra dynamisk inline-CSS – der finnes
ingen selektor å overgå, så !important er eneste utvei her. */
width:auto!important; float:none!important; clear:none!important;
display:grid; gap:12px; align-items:center; grid-template-columns:var(--olsen-thumb,96px) 1fr;
}
.olsen-shop .olsen-products > li.product.olsen-card::before,
.olsen-shop .olsen-products > li.product.olsen-card::after{content:none}
/* Kadence legger entry / loop-entry / content-bg på kortet via
wc_product_class og gir dem egen skygge og bakgrunn. Vi nullstiller
dem her framfor å prøve å hindre klassene i å bli lagt på. */
.olsen-shop .olsen-products > li.product.olsen-card.entry,
.olsen-shop .olsen-products > li.product.olsen-card.loop-entry,
.olsen-shop .olsen-products > li.product.olsen-card.content-bg{
box-shadow:var(--o-shadow); background:var(--o-card);
}
.olsen-shop .olsen-products > li.product.olsen-card:hover{
box-shadow:var(--o-shadow-lift);
}
.olsen-card{transition:border-color .18s var(--o-ease), box-shadow .18s var(--o-ease), transform .18s var(--o-ease)}
.olsen-card:hover{
border-color:var(--o-line-dk); box-shadow:var(--o-shadow-lift); transform:translateY(-1px);
}
@media(min-width:760px){
.olsen-view-list .olsen-products > li.product.olsen-card{
grid-template-columns:var(--olsen-thumb,96px) 1fr 150px 210px;
}
}
.olsen-card__media{
width:var(--olsen-thumb,96px); aspect-ratio:1;
border:1px solid var(--o-line); border-radius:var(--o-r-sm);
background:#fff; display:grid; place-items:center; overflow:hidden;
flex:none; text-decoration:none; padding:4px;
}
/* contain, ikke cover: produktbilder skal ikke beskjæres. */
.olsen-card__media img{
width:100%; height:100%; object-fit:contain; display:block; margin:0;
}
.olsen-card__noimg{color:var(--o-faint); font-size:10px; text-align:center; line-height:1.3; padding:4px}
.olsen-card__body{min-width:0}
.olsen-card__sku{
font:800 var(--olsen-sku,12px)/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.07em; color:var(--o-navy-lt); text-transform:uppercase;
}
.olsen-card__title{
font-size:var(--olsen-title,16.5px); font-weight:700;
line-height:1.3; margin:4px 0 0; padding:0;
}
.olsen-card__title a{color:var(--o-ink); text-decoration:none}
.olsen-card__title a:hover{color:var(--o-navy); text-decoration:underline}
.olsen-card__specs{
display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0; padding:0; list-style:none;
}
.olsen-card__specs li{
background:#eef2f6; color:#3d5468; border-radius:4px;
padding:2.5px 7px; font-size:11.5px; font-weight:600; margin:0;
}
.olsen-card__stock{font-size:12.5px; font-weight:700}
.olsen-card__stock-label{display:flex; align-items:center; gap:6px}
.olsen-card__stock-label i{width:8px; height:8px; border-radius:50%; flex:none; background:currentColor}
.olsen-card__stock small{
display:block; font-weight:400; color:var(--o-muted);
font-size:11.5px; margin:2px 0 0 14px;
}
.olsen-card__stock.is-in{color:var(--o-green)}
.olsen-card__stock.is-low{color:var(--o-amber)}
.olsen-card__stock.is-out{color:var(--o-red)}
/* WooCommerce sin get_price_html() returnerer
uten noen .price-wrapper – den kommer fra temaets egne maler. Vi styler
derfor beholderen vår og elementene WooCommerce faktisk sender. */
.olsen-card__price{
text-align:left; font-size:19px; font-weight:800;
letter-spacing:-.3px; line-height:1.25; color:var(--o-ink);
}
.olsen-card__price .woocommerce-Price-amount{white-space:nowrap}
.olsen-card__price .woocommerce-Price-currencySymbol{font-size:.68em; font-weight:700}
.olsen-card__price del{
font-size:13px; font-weight:400; color:var(--o-faint); margin-right:6px;
}
.olsen-card__price ins{text-decoration:none; background:none; color:inherit}
.olsen-card__price .woocommerce-price-suffix,
.olsen-card__price small{
display:block; margin-top:2px;
font-size:11.5px; font-weight:400; color:var(--o-muted); letter-spacing:0;
}
@media(min-width:760px){
.olsen-view-list .olsen-card__price,
.olsen-view-list .olsen-card__buy{text-align:right}
}
.olsen-card__actions{display:flex; gap:7px; align-items:center; margin-top:8px}
@media(min-width:760px){
.olsen-view-list .olsen-card__actions{justify-content:flex-end}
}
.olsen-btn{
display:inline-flex; align-items:center; justify-content:center;
height:38px; padding:0 16px; border:0; border-radius:6px;
background:var(--o-yellow); color:var(--o-navy-dk);
font-weight:800; font-size:13.5px; cursor:pointer; white-space:nowrap;
box-shadow:0 1px 0 var(--o-yellow-dk); text-decoration:none;
border-radius:var(--o-r-sm);
transition:background .16s var(--o-ease), box-shadow .16s var(--o-ease), transform .16s var(--o-ease);
}
.olsen-btn:hover,.olsen-btn:focus{
background:#ffd75f; color:var(--o-navy-dk);
box-shadow:0 1px 0 var(--o-yellow-dk), 0 4px 12px rgba(217,168,0,.28);
}
.olsen-btn:active{transform:translateY(1px); box-shadow:0 0 0 var(--o-yellow-dk)}
.olsen-btn--ghost{background:#fff; border:1.5px solid var(--o-navy); color:var(--o-navy); box-shadow:none}
.olsen-btn--ghost:hover{background:#f2f6fa; color:var(--o-navy)}
.olsen-btn.loading{opacity:.6; pointer-events:none}
.olsen-btn.added::after{content:" ✓"; margin-left:4px}
.olsen-card .added_to_cart{display:none}
.olsen-qty{display:flex; border:1px solid var(--o-line-dk); border-radius:6px; overflow:hidden; flex:none}
.olsen-qty button{
position:relative; width:30px; height:38px; padding:0; border:0;
background:#f7f9fb; cursor:pointer; color:var(--o-muted);
font-size:16px; line-height:1;
}
.olsen-qty button span[aria-hidden]{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.olsen-qty button:hover{background:#eef2f6; color:var(--o-ink)}
.olsen-qty__input{
width:44px; height:38px; border:0; text-align:center; background:#fff;
font-weight:700; font-size:14px; -moz-appearance:textfield; padding:0;
}
.olsen-qty__input::-webkit-outer-spin-button,
.olsen-qty__input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
/* =========================================================================
RUTENETTVISNING
========================================================================= */
.olsen-view-grid .olsen-layout__main .olsen-products{
display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
@media(min-width:620px){.olsen-view-grid .olsen-layout__main .olsen-products{grid-template-columns:repeat(3,1fr); gap:12px}}
@media(min-width:1180px){.olsen-view-grid .olsen-layout__main .olsen-products{grid-template-columns:repeat(4,1fr)}}
.olsen-view-grid .olsen-products > li.product.olsen-card{
display:flex; flex-direction:column; grid-template-columns:none;
}
.olsen-view-grid .olsen-card__media{width:100%; aspect-ratio:1; height:auto; margin-bottom:12px; padding:10px}
.olsen-view-grid .olsen-card__noimg{font-size:12px}
.olsen-view-grid .olsen-card__body{flex:1}
.olsen-view-grid .olsen-card__title{font-size:calc(var(--olsen-title,16.5px) - 1.5px)}
.olsen-view-grid .olsen-card__stock{margin-top:10px}
.olsen-view-grid .olsen-card__buy{margin-top:10px; padding-top:10px; border-top:1px solid var(--o-line)}
.olsen-view-grid .olsen-card__actions .olsen-btn{flex:1; text-align:center}
.olsen-view-grid .olsen-qty{display:none}
/* =========================================================================
MOBIL FILTERSKUFF
========================================================================= */
.olsen-sheet{position:fixed; inset:0; z-index:99999}
.olsen-sheet[hidden]{display:none}
.olsen-sheet__backdrop{position:absolute; inset:0; background:rgba(16,26,36,.5)}
.olsen-sheet__panel{
position:absolute; left:0; right:0; bottom:0; max-height:88vh;
background:#f4f6f8; border-radius:14px 14px 0 0;
display:flex; flex-direction:column;
}
.olsen-sheet__head{
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px; border-bottom:1px solid var(--o-line, #e3e8ee);
background:#fff; border-radius:14px 14px 0 0;
}
.olsen-sheet__head b{font-size:16px}
.olsen-sheet__body{overflow:auto; padding:12px 16px; -webkit-overflow-scrolling:touch}
.olsen-sheet__body .olsen-facets{border:1px solid #e3e8ee}
.olsen-sheet__foot{
padding:12px 16px; border-top:1px solid #e3e8ee;
background:#fff; display:flex; gap:10px;
}
.olsen-sheet__foot .olsen-btn{flex:1; height:44px}
.olsen-sheet__x{
position:relative; border:0; background:#eef2f6;
width:36px; height:36px; padding:0;
border-radius:50%; font-size:18px; cursor:pointer; line-height:1;
}
.olsen-sheet__x span[aria-hidden]{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
body.olsen-sheet-open{overflow:hidden}
/* =========================================================================
TILGJENGELIGHET
========================================================================= */
.olsen-btn:focus-visible,
.olsen-select:focus-visible,
.olsen-opt:focus-visible,
.olsen-chip:focus-visible,
.olsen-switch:focus-visible,
.olsen-viewtoggle button:focus-visible,
.olsen-facet > summary:focus-visible{
outline:2px solid var(--o-navy, #203b4f); outline-offset:2px;
}
@media(max-width:760px){
.olsen-btn,.olsen-qty button,.olsen-viewtoggle button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
.olsen-shop *,
.olsen-shop *::before,
.olsen-shop *::after{transition:none !important; animation:none !important}
.olsen-card:hover{transform:none}
}
/* =========================================================================
MOBIL
Samme informasjon, tettere pakket. Målet er at det skal føles like
ryddig på 375 px som på 1400.
========================================================================= */
@media(max-width:759px){
/* Kortet: bilde og tekst øverst, pris og kjøp på egen rad under.
Lagerstatus flyttes opp ved siden av teksten. */
.olsen-shop .olsen-products > li.product.olsen-card{
grid-template-columns:72px 1fr;
gap:12px 12px; padding:12px;
}
.olsen-card__media{width:72px}
.olsen-card__title{font-size:calc(var(--olsen-title,16.5px) - 1px)}
.olsen-card__stock{grid-column:2; margin-top:-4px}
.olsen-card__buy{
grid-column:1 / -1;
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding-top:10px; border-top:1px solid var(--o-line);
}
.olsen-card__price{text-align:left; flex:none}
.olsen-card__price .price{font-size:17px}
.olsen-card__actions{margin-top:0; flex:1; justify-content:flex-end}
.olsen-card__actions .olsen-btn{flex:1; max-width:170px}
/* Uten pris – utlogget – skal knappen ta hele bredden framfor å
etterlate et tomt felt der prisen ellers ville stått. */
.olsen-card__buy:not(:has(.olsen-card__price)) .olsen-card__actions{
justify-content:stretch;
}
.olsen-card__buy:not(:has(.olsen-card__price)) .olsen-card__actions .olsen-btn{
max-width:none;
}
/* Rutenett: to kolonner med luft nok til å treffe. */
.olsen-view-grid .olsen-layout__main .olsen-products{gap:10px}
.olsen-view-grid .olsen-card__buy{
display:block; border-top:1px solid var(--o-line);
}
.olsen-view-grid .olsen-card__actions .olsen-btn{max-width:none}
/* Verktøylinja i tre rader: handling, sortering, teller.
Nedtrekkene må ha plass til teksten sin – klemt ned til bare en pil
er de ubrukelige. */
.olsen-toolbar{padding:10px; gap:8px; flex-wrap:wrap}
.olsen-toolbar__gap{display:none}
.olsen-filterbtn{order:1; flex:1 1 auto; justify-content:center}
.olsen-viewtoggle{order:2; flex:none}
.olsen-toolbar__sort{order:3; width:100%; gap:8px}
.olsen-toolbar__sort .olsen-select{
flex:1 1 0; min-width:0; height:38px; font-size:13px;
text-overflow:ellipsis;
}
.olsen-toolbar__count{order:4; width:100%; font-size:12.5px; margin:2px 0 0}
.olsen-pagehead__title{font-size:22px}
.olsen-subcats{gap:6px}
.olsen-subcats a{padding:5px 11px; font-size:12.5px}
.olsen-longtext{padding:18px}
}
/* -------------------------------------------------------------------------
Filtermenyen på mobil.
I sidemenyen på desktop peker man med mus, og 25 px høye rader er
greit. I skuffen på mobil treffes de med tommelen, og da er 44 px
minimum – alt under blir bomming og irritasjon.
------------------------------------------------------------------------- */
@media(max-width:999px){
.olsen-sheet__body{padding:12px 14px 18px}
.olsen-sheet .olsen-facet > summary{
min-height:52px; padding:14px 16px; font-size:15px;
}
.olsen-sheet .olsen-facet__body{padding:2px 16px 12px}
.olsen-sheet .olsen-opt{
min-height:46px; padding:9px 0; gap:12px; font-size:15px;
}
.olsen-sheet .olsen-opt__box{width:21px; height:21px; border-radius:5px; border-width:2px}
.olsen-sheet .olsen-opt.is-checked .olsen-opt__box{background-size:14px}
.olsen-sheet .olsen-opt__n{font-size:13.5px}
.olsen-sheet .olsen-tree{font-size:15px}
.olsen-sheet .olsen-tree li{padding:0}
.olsen-sheet .olsen-tree a{min-height:46px; align-items:center; padding:8px 0}
.olsen-sheet .olsen-tree em{font-size:13.5px}
.olsen-sheet .olsen-facet__more{
min-height:44px; display:inline-flex; align-items:center; font-size:14px;
}
.olsen-sheet .olsen-switch{min-height:56px; padding:14px 16px; font-size:15px}
.olsen-sheet .olsen-switch__track{width:46px; height:27px}
.olsen-sheet .olsen-switch__track::after{width:21px; height:21px}
.olsen-sheet .olsen-switch.is-on .olsen-switch__track::after{left:22px}
.olsen-sheet .olsen-searchbar{--os-h:46px}
}
/* -------------------------------------------------------------------------
Flytende filterknapp.
Med 184 treff og filtermenyen gjemt i en skuff må veien tilbake til
filtrene alltid være ett trykk unna – ikke en scroll opp.
------------------------------------------------------------------------- */
.olsen-fab{display:none}
@media(max-width:999px){
.olsen-fab{
position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
z-index:900; display:inline-flex; align-items:center; gap:9px;
height:46px; padding:0 22px; border:0; border-radius:30px;
background:var(--o-navy); color:#fff;
font-size:14px; font-weight:700; cursor:pointer;
box-shadow:0 6px 22px rgba(22,33,46,.28);
transition:transform .2s var(--o-ease), opacity .2s var(--o-ease);
}
.olsen-fab__n{
background:var(--o-yellow); color:var(--o-navy-dk);
border-radius:20px; font-size:11.5px; font-weight:800; padding:1px 7px;
}
/* Skjules mens skuffen er åpen. */
body.olsen-sheet-open .olsen-fab{opacity:0; transform:translate(-50%,20px); pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
.olsen-fab{transition:none}
}