/* Oljedroppen – katalogtema. Färger från nuvarande oljedroppen.se (blå #255dff, svart). Typsnitt Barlow (lokalt). */

/* ---------- Typsnitt ---------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); }

:root {
	--olj-blue: #255dff;
	--olj-blue-dark: #1a44c2;
	--olj-ink: #0a0a0a;
	--olj-ink-2: #2b2b2b;
	--olj-amber: #f2a900; /* oljedroppe, används sparsamt */
	--olj-red: #c62828;
	--olj-green: #15803d;
	--olj-grey: #f2f3f5;
	--olj-line: #dfe1e5;
	--olj-control: #767b84; /* kanter på kryssrutor/fält, 4.5:1 mot vitt */
	--olj-muted: #5f646b;
	--olj-radius: 6px;
	--olj-wrap: 1320px;
	--olj-focus: 0 0 0 3px #fff, 0 0 0 5px var(--olj-blue);
	--olj-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--olj-body: 'Barlow', Arial, sans-serif;
}

/* Ankarlänkar (skip-link, #reviews) ska inte hamna under den sticky headern */
html { scroll-padding-top: 170px; }
body { font-family: var(--olj-body); color: var(--olj-ink); background: #fff; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--olj-head); font-weight: 800; line-height: 1.15; }
a { color: var(--olj-blue); }
a:hover { color: var(--olj-blue-dark); }
.olj-wrap { max-width: var(--olj-wrap); margin: 0 auto; padding: 0 16px; }
.olj-icon { width: 22px; height: 22px; flex: none; }

/* Tydlig fokusmarkering för tangentbord överallt */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 0; box-shadow: var(--olj-focus); border-radius: 4px; }

/* Visuellt dold men uppläst (skärmläsare) */
.olj-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Knappar ---------- */
.olj-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	background: var(--olj-blue); color: #fff; border: 0; border-radius: var(--olj-radius);
	font-family: var(--olj-head); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .02em;
	padding: 10px 18px; text-decoration: none; transition: background .15s;
}
.olj-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--olj-blue-dark); color: #fff; }
/* Woo sätter egna färger på .alt med hög specificitet */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button { background: var(--olj-blue) !important; color: #fff !important; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button:hover { background: var(--olj-blue-dark) !important; }

/* Hello Elementor stylar alla <button> rosa; nollställ våra */
.olj-header button, .olj-filter__toggle, .olj-hero__search button { -webkit-appearance: none; appearance: none; }

/* ---------- Header ---------- */
.olj-header { position: sticky; top: 0; z-index: 50; background: var(--olj-ink); }
.admin-bar .olj-header { top: 32px; }
.olj-topbar { background: #000; color: #cfd2d8; font-size: 13px; }
.olj-topbar__inner { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.olj-usp { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.olj-usp li { display: flex; align-items: center; gap: 6px; }
.olj-usp .olj-icon { width: 16px; height: 16px; color: var(--olj-amber); }
.olj-topbar__menu { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.olj-topbar__menu a { color: #fff; text-decoration: none; }
.olj-topbar__menu a:hover { text-decoration: underline; color: #fff; }

.olj-mainbar__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.olj-logo { flex: none; display: block; }
.olj-logo img { height: 64px; width: auto; display: block; }

.olj-header .olj-allbtn { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 1.5px solid #6a6a6a; border-radius: var(--olj-radius); background: transparent; color: #fff; font-family: var(--olj-head); font-weight: 700; font-size: 17px; text-transform: uppercase; cursor: pointer; }
.olj-header .olj-allbtn:hover, .olj-header .olj-allbtn:focus, .olj-header .olj-allbtn[aria-expanded="true"] { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.olj-search { flex: 1; display: flex; max-width: 720px; margin: 0 auto; border-radius: var(--olj-radius); }
.olj-search:focus-within { box-shadow: 0 0 0 3px var(--olj-amber); }
.olj-search input[type=search] { flex: 1; min-width: 0; height: 48px; border: 0; border-radius: var(--olj-radius) 0 0 var(--olj-radius); padding: 0 16px; font-size: 16px; background: #fff; color: var(--olj-ink); }
.olj-search input[type=search]:focus { outline: 0; box-shadow: none; }
.olj-search button[type=submit] { -webkit-appearance: none; appearance: none; }
.olj-header .olj-search button, .olj-404 .olj-search button { width: 60px; height: 48px; border: 0; border-radius: 0 var(--olj-radius) var(--olj-radius) 0; background: var(--olj-blue); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.olj-header .olj-search button:hover, .olj-header .olj-search button:focus, .olj-404 .olj-search button:hover, .olj-404 .olj-search button:focus { background: var(--olj-blue-dark); color: #fff; }

.olj-tools { display: flex; gap: 8px; }
.olj-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; color: #fff; text-decoration: none; font-size: 12px; padding: 6px 10px; border-radius: var(--olj-radius); }
.olj-tool:hover, .olj-tool:focus { color: #fff; background: rgba(255,255,255,.1); }
.olj-cart-count { position: absolute; top: 0; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--olj-amber); color: var(--olj-ink); font-size: 12px; line-height: 20px; text-align: center; }
.olj-header .olj-burger { display: none; border: 0; background: transparent; color: #fff; padding: 8px; cursor: pointer; border-radius: var(--olj-radius); }
.olj-header .olj-burger:hover, .olj-header .olj-burger:focus { background: rgba(255,255,255,.12); color: #fff; }

/* Kategorirad med färgkod per huvudkategori + megameny */
.olj-catnav { background: var(--olj-ink-2); border-top: 1px solid #333; }
.olj-catnav .olj-wrap { position: relative; }
.olj-catnav .olj-catnav__list { display: flex; list-style: none; margin: 0; padding: 0; }
.olj-catnav .olj-catnav__list > li { flex: 1; text-align: center; position: static; }
.olj-catnav .olj-catnav__list > li > a { display: block; padding: 12px 16px; color: #fff; font-family: var(--olj-head); font-weight: 700; font-size: 15px; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -4px 0 var(--cat, var(--olj-blue)); border-radius: 0; }
.olj-catnav .olj-catnav__list > li:hover > a, .olj-catnav .olj-catnav__list > li:focus-within > a, .olj-catnav .olj-catnav__list > li.current-menu-item > a { background: #3a3a3a; box-shadow: inset 0 -6px 0 var(--cat, var(--olj-blue)); }
.olj-catnav .olj-catnav__list > li > a:focus-visible { box-shadow: inset 0 -6px 0 var(--cat, var(--olj-blue)), inset 0 0 0 2px #fff; }
.olj-catnav .sub-menu { display: none; position: absolute; left: 16px; right: 16px; top: 100%; z-index: 5; text-align: left; background: #fff; list-style: none; margin: 0; padding: 20px 24px; border-top: 4px solid var(--cat, var(--olj-blue)); box-shadow: 0 12px 32px rgba(0,0,0,.2); border-radius: 0 0 var(--olj-radius) var(--olj-radius); grid-template-columns: repeat(4, 1fr); gap: 2px 24px; }
.olj-catnav li:hover > .sub-menu, .olj-catnav li:focus-within > .sub-menu { display: grid; }
.olj-catnav .sub-menu a { display: block; padding: 8px 10px; color: var(--olj-ink); text-decoration: none; border-radius: 4px; }
.olj-catnav .sub-menu a:hover { background: var(--olj-grey); color: var(--olj-blue); }
.olj-catnav .olj-mega__all { grid-column: 1 / -1; border-bottom: 1px solid var(--olj-line); margin-bottom: 8px; padding-bottom: 6px; }
.olj-catnav .olj-mega__all a { font-family: var(--olj-head); font-weight: 700; font-size: 17px; color: var(--olj-blue); }

/* Sortimentspanel (hela trädet) */
.olj-drawer { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.5); }
.olj-drawer__panel { width: min(420px, 90vw); height: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff; display: flex; flex-direction: column; }
/* Luft i botten så sista raden går att scrolla fram ovanför webbläsarens statusrad / mobilens verktygsfält */
.olj-drawer__extra { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.olj-drawer__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 16px; background: var(--olj-ink); color: #fff; }
.olj-drawer__title { margin: 0; font-size: 20px; color: #fff; }
.olj-header .olj-drawer__close { border: 0; background: transparent; color: #fff; cursor: pointer; padding: 10px; border-radius: var(--olj-radius); }
.olj-header .olj-drawer__close:hover, .olj-header .olj-drawer__close:focus { background: rgba(255,255,255,.12); color: #fff; }
.olj-drawer ul { list-style: none; margin: 0; padding: 0; }
.olj-drawer a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--olj-line); color: var(--olj-ink); text-decoration: none; font-weight: 500; border-radius: 0; }
.olj-drawer a:hover { background: var(--olj-grey); color: var(--olj-blue); }
.olj-drawer .sub-menu a { padding-left: 32px; font-weight: 400; background: var(--olj-grey); }
.olj-tree--0 > li { border-left: 5px solid var(--cat, var(--olj-blue)); }
.olj-tree--0 > li > a { font-family: var(--olj-head); font-weight: 700; font-size: 19px; text-transform: uppercase; }
.olj-drawer .olj-tree--1 a { padding-left: 28px; font-weight: 500; }
.olj-drawer .olj-tree--2 a { padding-left: 44px; font-size: 14px; color: var(--olj-muted); background: var(--olj-grey); }
.olj-drawer__extra { display: grid; margin-top: auto; border-top: 4px solid var(--olj-ink); }
.olj-drawer__extra a { font-weight: 600; }

/* Välkomstrad från gamla domäner (?fran=) */
.olj-welcome { background: #fff7e0; border-bottom: 1px solid #f0dca0; font-size: 15px; }
.olj-welcome .olj-wrap { padding-top: 12px; padding-bottom: 12px; }

/* ---------- Startsida ---------- */
.olj-hero { background: linear-gradient(100deg, var(--olj-ink) 0%, var(--olj-ink-2) 45%, var(--olj-blue) 100%); color: #fff; }
.olj-hero__inner { padding-top: 64px; padding-bottom: 64px; }
.olj-hero__text { max-width: 720px; }
.olj-hero h1 { font-size: clamp(30px, 4vw, 48px); margin: 0 0 12px; color: #fff; }
.olj-hero p { font-size: 17px; color: #e6e8ee; margin: 0 0 24px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.olj-hero .olj-hero__kicker { display: inline-block; background: var(--olj-amber); color: var(--olj-ink); font-family: var(--olj-head); font-weight: 700; text-transform: uppercase; font-size: 13px; padding: 4px 10px; border-radius: 3px; margin: 0 0 16px; text-shadow: none; }
.olj-hero__search { display: flex; max-width: 560px; background: #fff; border-radius: 999px; padding: 6px; }
.olj-hero__search:focus-within { box-shadow: 0 0 0 3px var(--olj-amber); }
.olj-hero__search input { flex: 1; border: 0; background: none; padding: 0 18px; font-size: 17px; min-width: 0; color: var(--olj-ink); }
.olj-hero__search input:focus { outline: 0; box-shadow: none; }
.olj-hero .olj-hero__search button { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--olj-blue); color: #fff; padding: 12px 22px; font-family: var(--olj-head); font-weight: 700; font-size: 17px; text-transform: uppercase; cursor: pointer; }
.olj-hero .olj-hero__search button:hover, .olj-hero .olj-hero__search button:focus { background: var(--olj-blue-dark); color: #fff; }

.olj-uses { background: var(--olj-grey); border-bottom: 1px solid var(--olj-line); }
.olj-uses__inner { display: flex; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: thin; }
.olj-uses__label { font-family: var(--olj-head); font-weight: 700; text-transform: uppercase; margin-right: 6px; white-space: nowrap; }
.olj-uses__item { padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--olj-line); color: var(--olj-ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.olj-uses__item:hover { border-color: var(--olj-blue); color: var(--olj-blue); }

.olj-section { padding-top: 40px; padding-bottom: 8px; }
.olj-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.olj-section__title { font-size: 30px; letter-spacing: .01em; margin: 0 0 16px; text-transform: uppercase; }
.olj-section__head .olj-section__title { margin: 0; }
.olj-section__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.olj-section__more .olj-icon { width: 18px; height: 18px; }

/* Kategorirutor med underkategorier */
.olj-cattiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.olj-cattiles > li { display: flex; flex-direction: column; border: 1px solid var(--olj-line); border-top: 5px solid var(--cat, var(--olj-blue)); border-radius: var(--olj-radius); background: #fff; overflow: hidden; transition: box-shadow .15s; }
.olj-cattiles > li:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.olj-cattiles__main { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: 12px; color: var(--olj-ink); text-decoration: none; }
.olj-cattiles__main:hover { color: var(--olj-blue); }
.olj-cattiles__img { aspect-ratio: 1; border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.olj-cattiles__img:empty { background: color-mix(in srgb, var(--cat) 15%, #fff); }
.olj-cattiles__img img { width: 100%; height: 100%; object-fit: contain; }
.olj-cattiles__name { font-family: var(--olj-head); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.1; }
.olj-cattiles__subs { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.olj-cattiles__subs a { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--olj-grey); color: var(--olj-ink); font-size: 14px; text-decoration: none; }
.olj-cattiles__subs a:hover { background: var(--olj-blue); color: #fff; }

/* Butikerna som slagits ihop */
.olj-shops { background: var(--olj-grey); padding: 48px 0; margin-top: 40px; }
.olj-shops__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.olj-shops__list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; background: #fff; border-radius: var(--olj-radius); border: 1px solid var(--olj-line); color: var(--olj-ink); text-decoration: none; }
.olj-shops__list a:hover { border-color: var(--olj-blue); }
.olj-shops__list strong { font-family: var(--olj-head); font-size: 22px; text-transform: uppercase; }

.olj-brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.olj-brands a { display: grid; place-items: center; height: 72px; border: 1px solid var(--olj-line); border-radius: var(--olj-radius); font-family: var(--olj-head); font-weight: 800; font-size: 18px; color: var(--olj-ink); text-decoration: none; text-transform: uppercase; }
.olj-brands a:hover { border-color: var(--olj-blue); color: var(--olj-blue); }

/* ---------- Butik / kategori ---------- */
.olj-shop { padding-top: 16px; padding-bottom: 48px; }
.olj-bc { font-size: 13px; color: var(--olj-muted); margin-bottom: 12px; }
.olj-bc a { color: var(--olj-muted); text-decoration: none; }
.olj-bc a:hover { color: var(--olj-blue); text-decoration: underline; }
.olj-bc__sep { margin: 0 6px; }
.olj-shop__head { margin-bottom: 20px; border-left: 6px solid var(--cat); padding-left: 14px; }
.olj-shop__head:not([style]) { border-left: 0; padding-left: 0; }
.olj-shop__title { font-size: 32px; margin: 0 0 8px; }
.olj-shop__head .term-description { color: var(--olj-ink-2); max-width: 800px; }

/* Underkategorier som bildpiller */
.olj-subcats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0 24px; padding: 0; }
.olj-subcats a { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 18px 6px 6px; border: 1px solid transparent; border-radius: 999px; background: var(--olj-grey); color: var(--olj-ink); font-weight: 600; text-decoration: none; }
.olj-subcats a:hover { background: #fff; border-color: var(--olj-blue); color: var(--olj-blue); }
.olj-subcats a:not(:has(img)) { padding-left: 18px; }
.olj-subcats__img { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.olj-subcats__img:empty { display: none; }
.olj-subcats__img img { width: 100%; height: 100%; object-fit: contain; }

/* Filterkolumn */
.olj-shop__body { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.olj-filter__toggle { display: none; }
.olj-filter__box { border-bottom: 1px solid var(--olj-line); padding: 0 0 16px; margin-bottom: 16px; }
.olj-filter__title { font-size: 17px; text-transform: uppercase; margin: 0 0 10px; }
.olj-filter__cats, .olj-filter__cats ul { list-style: none; margin: 0; padding: 0; }
.olj-filter__cats ul { padding-left: 14px; }
.olj-filter__cats li { color: var(--olj-muted); font-size: 14px; }
.olj-filter__cats a { display: inline-block; padding: 4px 0; color: var(--olj-ink); text-decoration: none; font-size: 15px; }
.olj-filter__cats a:hover, .olj-filter__cats .current-cat > a { color: var(--olj-blue); font-weight: 700; }
.olj-filter__back a { font-size: 13px; color: var(--olj-muted); }
.olj-filter__box--attr ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.olj-filter__box--attr li { display: flex; align-items: center; gap: 8px; padding: 3px 0; text-align: left; }
.olj-filter__box--attr li .count { color: var(--olj-muted); font-size: 13px; }
/* Woo ritar egna ikoner i ::before; ersätt med en kryssruta */
.olj-filter .olj-filter__box--attr li a { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; color: var(--olj-ink); text-decoration: none; text-align: left; }
.olj-filter .olj-filter__box--attr li a::before { content: '' !important; font-family: inherit !important; position: static; flex: none; width: 18px; height: 18px; margin: 0 !important; border: 1.5px solid var(--olj-control); border-radius: 3px; background: #fff; color: transparent !important; }
.olj-filter .olj-filter__box--attr li.chosen a::before { background: var(--olj-blue); border-color: var(--olj-blue); box-shadow: inset 0 0 0 3px #fff; }
.olj-filter .olj-filter__box--attr li a:hover::before { border-color: var(--olj-blue); }
.olj-filter .widget_price_filter .price_slider { margin: 8px 6px 16px; }
.olj-filter .price_slider_amount { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; font-size: 14px; }
.olj-filter .price_slider_amount .button { font-size: 13px; padding: 6px 12px; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--olj-blue); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { width: 22px; height: 22px; top: -8px; margin-left: -11px; }

/* Resultatrad: aktiva filter, antal, sortering */
.olj-shop__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; background: var(--olj-grey); border-radius: var(--olj-radius); text-align: left; }
.olj-shop__bar .woocommerce-result-count, .olj-shop__bar .woocommerce-ordering { float: none; margin: 0; }
.olj-shop__bar .woocommerce-result-count { margin-right: auto; }
.olj-shop__bar select { height: 40px; border: 1px solid var(--olj-control); border-radius: var(--olj-radius); padding: 0 10px; background: #fff; }
.olj-shop__bar .olj-active-filters { flex-basis: 100%; order: -1; }
.olj-active-filters ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.olj-active-filters li a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--olj-blue); color: #fff; font-size: 14px; text-decoration: none; }
.olj-active-filters li a::before { color: #fff !important; }

/* ---------- Produktkort ---------- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
/* Woo sätter float/width/margin med !important-nivå specificitet */
.woocommerce ul.products li.product { position: relative; width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--olj-line); border-radius: var(--olj-radius); background: #fff; transition: box-shadow .15s, border-color .15s; }
.woocommerce ul.products li.product:hover { border-color: #b9bec7; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.woocommerce ul.products li.product a img { aspect-ratio: 1; object-fit: contain; background: #fff; margin: 0 0 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--olj-body); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--olj-ink); padding: 0; margin: 2px 0 8px; min-height: 2.7em; }
.olj-card__brand { display: block; font-family: var(--olj-head); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--olj-ink); }
.olj-card__sku { display: block; font-size: 12px; color: var(--olj-muted); }
.woocommerce ul.products li.product .price { display: block; color: var(--olj-ink); font-family: var(--olj-head); font-weight: 800; font-size: 24px; margin: auto 0 4px; }
.woocommerce ul.products li.product .price del, .single-product div.product p.price del { font-size: 15px; color: var(--olj-muted); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { color: var(--olj-red); text-decoration: none; }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale { background: var(--olj-red); border-radius: 3px; min-height: 0; min-width: 0; line-height: 1; padding: 6px 8px; top: 8px; left: 8px; right: auto; margin: 0; font-family: var(--olj-head); text-transform: uppercase; }
.olj-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 10px; }
.olj-stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.olj-stock--in { color: var(--olj-green); }
.olj-stock--out { color: var(--olj-red); }
.woocommerce ul.products li.product .button { display: flex; justify-content: center; width: 100%; margin-top: 0; min-height: 44px; text-align: center; }
.woocommerce ul.products li.product .added_to_cart { display: block; text-align: center; font-size: 13px; padding-top: 6px; }

.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: 6px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 44px; padding: 12px; border: 1px solid var(--olj-line); border-radius: var(--olj-radius); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--olj-blue); border-color: var(--olj-blue); color: #fff; }

/* ---------- Produktsida ---------- */
/* Hello begränsar .site-main till 500–1140 px per brytpunkt; samma bredd som header/footer i stället */
body:not([class*="elementor-page-"]) .site-main { max-width: var(--olj-wrap); width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.single-product .site-main { padding-top: 16px; padding-bottom: 48px; }
.single-product div.product .product_title { font-size: 32px; margin-bottom: 6px; }
.olj-pbrand { display: inline-block; font-family: var(--olj-head); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--olj-blue); text-decoration: none; margin-bottom: 4px; }
.olj-pmeta { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.olj-pmeta .olj-stock { margin: 0; }
.single-product div.product p.price { font-family: var(--olj-head); font-weight: 800; font-size: 36px; color: var(--olj-ink); }
.single-product div.product form.cart { display: flex; gap: 10px; align-items: stretch; padding: 16px; background: var(--olj-grey); border-radius: var(--olj-radius); }
.single-product div.product form.cart .quantity input { height: 100%; min-height: 48px; width: 70px; border: 1px solid var(--olj-control); border-radius: var(--olj-radius); }
.single-product div.product form.cart .single_add_to_cart_button { flex: 1; font-size: 18px; min-height: 48px; }
.olj-pusp { list-style: none; padding: 0; margin: 16px 0; }
.olj-pusp li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--olj-ink-2); }
.olj-pusp .olj-icon { color: var(--olj-green); width: 18px; height: 18px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 2px solid var(--olj-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border: 0; background: none; border-radius: 0; margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--olj-head); text-transform: uppercase; padding: 10px 18px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--olj-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 16px; }
.woocommerce table.shop_attributes { border: 0; max-width: 720px; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border: 0; border-bottom: 1px solid var(--olj-line); padding: 10px 12px; font-style: normal; text-align: left; background: none; }
.woocommerce table.shop_attributes th { width: 200px; color: var(--olj-muted); font-weight: 500; }
.woocommerce table.shop_attributes td p { padding: 0; margin: 0; }
.woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td { background: var(--olj-grey); }
.related.products > h2, .upsells.products > h2 { font-size: 26px; text-transform: uppercase; }

/* ---------- Sidor: varukorg, kassa, konto (Woo-block + klassiskt) ---------- */
.page .site-main, .woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { max-width: var(--olj-wrap); margin: 0 auto; padding: 24px 16px 48px; }
.page .page-header .entry-title { font-family: var(--olj-head); font-size: 36px; margin: 0 0 16px; padding: 0; max-width: none; }
.page .page-header { padding: 0; max-width: none; }
/* Woo-blocken använder alignwide med negativa marginaler som går utanför Hellos container */
.page-content > .alignwide, .page-content > .alignfull, .wp-block-woocommerce-cart.alignwide, .wp-block-woocommerce-checkout.alignwide { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: auto !important; }
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
	background: var(--olj-blue) !important; color: #fff !important; border: 0 !important; border-radius: var(--olj-radius) !important;
	font-family: var(--olj-head) !important; font-weight: 700 !important; font-size: 18px !important; text-transform: uppercase; text-decoration: none !important; min-height: 52px;
}
.wc-block-components-button:not(.is-link):hover { background: var(--olj-blue-dark) !important; }
.wc-block-components-totals-item__label, .wc-block-components-title { font-family: var(--olj-body); }
.wc-block-components-text-input input, .wc-block-components-combobox input, .wc-blocks-components-select select { border-radius: var(--olj-radius) !important; }
.wc-block-components-text-input input:focus, .wc-block-components-combobox input:focus { box-shadow: 0 0 0 2px var(--olj-blue) !important; border-color: var(--olj-blue) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--olj-blue) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--olj-blue) !important; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea { min-height: 48px; padding: 10px 12px; border: 1px solid var(--olj-control); border-radius: var(--olj-radius); font-size: 16px; }
.woocommerce form .form-row input.input-text:focus { outline: 2px solid var(--olj-blue); outline-offset: -1px; border-color: var(--olj-blue); box-shadow: none; }
.woocommerce form.login, .woocommerce form.register { border: 1px solid var(--olj-line); border-radius: var(--olj-radius); padding: 24px; max-width: 520px; }
.woocommerce form.login .button, .woocommerce form.register .button { min-height: 48px; padding: 0 28px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--olj-line); border-radius: var(--olj-radius); overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--olj-line); color: var(--olj-ink); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--olj-ink); color: #fff; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--olj-blue); border-radius: var(--olj-radius); }
.woocommerce-message, .woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--olj-blue); }
.woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; float: none !important; }

/* 404 och notiser */
.olj-404 { padding-top: 48px; padding-bottom: 48px; }
.olj-404 h1 { font-size: 40px; margin: 0 0 8px; }
.olj-404 p { color: var(--olj-ink-2); max-width: 560px; }
.olj-404 .olj-search { margin: 24px 0 32px; max-width: 560px; border: 1px solid var(--olj-control); }
.olj-notices .woocommerce-notices-wrapper:not(:empty) { padding-top: 16px; }

/* ---------- Footer ---------- */
.olj-footer { background: var(--olj-ink); color: #c4c8cf; margin-top: 48px; font-size: 14px; }
/* Logga + 1–2 länkkolumner beroende på vilka menyer som finns */
.olj-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr); grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.olj-footer__title { color: #fff; font-size: 16px; text-transform: uppercase; margin: 0 0 12px; }
.olj-footer ul { list-style: none; margin: 0; padding: 0; }
.olj-footer li { padding: 3px 0; }
.olj-footer a { color: #c4c8cf; text-decoration: none; }
.olj-footer a:hover { color: #fff; text-decoration: underline; }
.olj-footer__brand img { height: 80px; width: auto; margin-bottom: 8px; }
.olj-footer__bottom { border-top: 1px solid #222; padding: 14px 0; font-size: 13px; color: #9a9fa8; }
.olj-footer__bottomin { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsivt ---------- */
@media (max-width: 1100px) {
	.olj-header .olj-allbtn { padding: 0 12px; }
	.olj-allbtn .olj-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.olj-usp li:nth-child(2) { display: none; }
	.olj-catnav .sub-menu { grid-template-columns: repeat(3, 1fr); }
	.olj-cattiles { grid-template-columns: repeat(2, 1fr); }
	.olj-shops__list { grid-template-columns: repeat(2, 1fr); }
	.olj-brands { grid-template-columns: repeat(4, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
	.olj-topbar, .olj-catnav, .olj-header .olj-allbtn, .olj-hero__search { display: none; }
	.olj-header .olj-burger { display: block; }
	.olj-mainbar__inner { flex-wrap: wrap; gap: 8px 12px; min-height: 0; padding-top: 8px; padding-bottom: 10px; }
	.olj-logo img { height: 44px; }
	.olj-tools { margin-left: auto; }
	.olj-tool .olj-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.olj-tool { justify-content: center; min-height: 44px; }
	.olj-search { order: 10; flex-basis: 100%; max-width: none; }
	.olj-search input[type=search], .olj-header .olj-search button { height: 44px; }
	.olj-hero__inner { padding-top: 32px; padding-bottom: 32px; }
	.olj-hero h1 { font-size: 30px; }
	.olj-shop__body { grid-template-columns: 1fr; gap: 12px; }
	.olj-filter__toggle { display: block; width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--olj-ink); border-radius: var(--olj-radius); background: #fff; font-family: var(--olj-head); font-weight: 700; text-transform: uppercase; color: var(--olj-ink); }
	.olj-filter__toggle:hover, .olj-filter__toggle:focus { background: var(--olj-grey); color: var(--olj-ink); }
	.olj-filter__inner { display: none; padding-top: 16px; }
	.olj-filter.is-open .olj-filter__inner { display: block; }
	.olj-filter__cats a { padding: 8px 0; }
	.olj-filter__box--attr li { padding: 7px 0; }
	.olj-bc a { display: inline-block; padding: 6px 0; }
	.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
	.woocommerce-MyAccount-navigation { margin-bottom: 24px; }
	.olj-footer__grid { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
}
/* Liggande mobil: headern ska inte ta en tredjedel av skärmen */
@media (max-height: 500px) and (orientation: landscape) {
	.olj-header { position: static; }
	html { scroll-padding-top: 0; }
}
@media (max-width: 860px) {
	html { scroll-padding-top: 124px; }
}
@media (max-width: 782px) {
	.admin-bar .olj-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .olj-header { top: 0; }
	.olj-section__title { font-size: 24px; }
	.olj-cattiles { grid-template-columns: 1fr; }
	.olj-cattiles__main { grid-template-columns: 64px 1fr; }
	.olj-shops__list { grid-template-columns: 1fr 1fr; }
	.olj-brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
	.woocommerce ul.products li.product { padding: 8px; }
	.woocommerce ul.products li.product .price { font-size: 20px; }
	.olj-shop__bar { flex-direction: column; align-items: stretch; }
	.olj-shop__title { font-size: 26px; }
	.single-product div.product form.cart { flex-wrap: wrap; }
	.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; overflow-x: auto; }
	.woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; padding: 10px 14px; }
	.woocommerce table.shop_attributes th { width: 40%; }
	.page .page-header .entry-title { font-size: 28px; }
	.woocommerce form.login, .woocommerce form.register { padding: 16px; }
	.olj-footer__grid { gap: 24px 16px; }
	.olj-footer__brand { grid-column: 1 / -1; }
	.olj-footer li { padding: 6px 0; }
	.olj-footer__bottomin { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}