/*
Theme Name: Hunddelux
Theme URI: https://ovanap.dev
Description: Nettbutikktema for Hunddelux — bygget av Ovanap på GeneratePress. Egen header med kategorimeny og mobildrawer, fasetterte produktfiltre (pris, lagerstatus og fire produktegenskaper), produktside med galleri og trekkspill, samt B2B-flyt for forhandlere. Hele designet er drevet av CSS-variabler: én 8-punkts avstandsskala, en typografiskala med låst linjeavstand, og felles komponentmål — ingen håndjusterte verdier per komponent. Ikoner er Lucide (ISC), tegnet inline med 1,5 px strek og currentColor. Ingen arv fra det gamle Frizty Advanced-temaet: ingen Elementor, ingen frizty-CSS, ingen mu-plugin-rester.
Author: Ovanap Team
Author URI: https://ovanap.dev
Tags: woocommerce, e-commerce, product-filters, b2b, accessibility-ready, custom-menu, translation-ready
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Template: generatepress
Version: 2.0.0
License: Proprietary — Ovanap client work
Text Domain: hund
*/

/* =======================================================================
   1. TOKENS
   Every scale below is lifted from the GP builds that already hold up —
   byra24-child (8px spacing ladder), karma-child (container + fluid gutter
   + product frame), botanica (type steps with PAIRED line-heights, shared
   component metrics). Those three stopped the same layout drift we keep
   reintroducing, so the values live here as variables and NOTHING below
   hand-tunes a component with a raw px value.
   ======================================================================= */
:root {
  /* ---- Palette (design source) ---- */
  --navy-950:#0D1826;
  --navy-800:#16273E;
  --navy-600:#1E3A5F;
  --navy-400:#3D6396;
  --navy-tint:#E9F0F8;
  --orange:#F2610D;
  --orange-deep:#C2410C;
  --orange-tint:#FDEBDD;
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --ink:#13181F;
  /* Body-secondary. #5A6472 on --bg #F6F7F9 = 5.61:1, on --surface = 6.03:1.
     Both clear 4.5:1, so meta text is never below AA. Do not lighten. */
  --ink-soft:#5A6472;
  --line:#E3E6EA;
  --success:#1E7F4F;
  /* Product photos are shot on white; a white frame lets a contained image
     blend instead of sitting in a grey box (karma-child). */
  --prod-bg:#FFFFFF;

  /* ---- Type ---- */
  --font-display:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,Segoe UI,sans-serif;

  /* Steps carry their OWN leading so line-height can never drift per component
     (botanica: the fix for body copy that was a mix of 1.5/1.6/1.65/1.75). */
  --text-xs:12px;    --lh-xs:1.5;
  --text-sm:13px;    --lh-sm:1.5;
  --text-meta:14px;  --lh-meta:1.55;
  --text-ui:15px;    --lh-ui:1.5;
  --text-body:16px;  --lh-body:1.6;
  --text-lead:17px;  --lh-lead:1.6;

  /* Headings — fluid, one ramp, never redeclared ad hoc. */
  --h1:clamp(28px,4vw,44px);
  --h2:clamp(22px,3vw,30px);
  --h3:clamp(18px,2.2vw,21px);
  --h4:16px;

  /* ---- Spacing ladder (8px base, byra24-child) ---- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px;  --space-10:128px;

  /* ---- Rhythm derived from the ladder ---- */
  --section-y:clamp(40px,5vw,56px);   /* vertical padding of a page section  */
  --section-y-lg:clamp(44px,6vw,64px);/* page hero                            */
  --gap-grid:clamp(10px,1.4vw,18px);  /* product grid gutter                  */
  --gap-col:clamp(24px,3vw,48px);     /* two-column splits                    */
  /* Paragraph separation must EXCEED the line box (16px x 1.6 = 25.6px),
     otherwise prose reads as one slab. 32px is the first ladder step above it. */
  --stack-p:var(--space-6);

  /* ---- Container ---- */
  --maxw:1180px;
  --gutter:clamp(16px,4vw,24px);

  /* ---- Shape ---- */
  --radius:10px;
  --radius-btn:8px;
  --radius-pill:99px;
  --radius-sheet:16px;

  /* ---- Shared component metrics (botanica pattern: declare once) ---- */
  --btn-pad-y:12px; --btn-pad-x:24px; --btn-fs:var(--text-ui);
  --field-pad-y:11px; --field-pad-x:14px;
  --tap:44px;                          /* minimum touch target                */
  --header-h:132px;                    /* topbar + header + catnav (desktop)  */
  --sticky-top:calc(var(--header-h) + var(--space-4));
  --z-header:60; --z-drawer-bg:90; --z-drawer:95; --z-sticky-buy:70;

  --shadow-card:0 6px 22px rgba(13,24,38,.09);
  --shadow-pop:0 10px 30px rgba(13,24,38,.10);
  --shadow-sheet:0 -6px 20px rgba(13,24,38,.08);
}

@media (max-width:760px){
  :root{ --header-h:112px; }
}

/* =======================================================================
   2. BASE
   ======================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--sticky-top)}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);
  font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--navy-600);text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;color:var(--ink)}
h1{font-size:var(--h1);font-weight:800;letter-spacing:-.015em}
h2{font-size:var(--h2);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--h3);font-weight:700}
h4{font-size:var(--h4);font-weight:700}

/* Prose rhythm — one rule, applied wherever body copy flows. */
.prose > p + p,
.tab-body > p + p,
.about-grid p + p,
.entry-content > p + p{margin-top:var(--stack-p)}
.prose ul,.tab-body ul,.entry-content ul{margin:var(--space-4) 0 var(--stack-p);padding-left:var(--space-5)}
.prose li,.tab-body li{margin-bottom:var(--space-2)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding-block:var(--section-y)}
.section-head h2{font-size:var(--h2)}
.section-head .lead{color:var(--ink-soft);max-width:60ch;margin-top:var(--space-2);
  font-size:var(--text-ui);line-height:var(--lh-ui)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-5)}
.eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-deep);display:block;margin-bottom:var(--space-2)}
.text-link{color:var(--orange-deep);font-weight:600;font-size:var(--text-ui);
  display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.text-link:hover{text-decoration:underline}
.hi{flex-shrink:0}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* =======================================================================
   3. BUTTONS
   Orange is the single primary CTA on a screen. Product cards use the quiet
   variant — a grid of 24 orange blocks destroys the hierarchy.
   ======================================================================= */
.btn{font-family:var(--font-body);font-weight:600;font-size:var(--btn-fs);line-height:1.2;
  border-radius:var(--radius-btn);padding:var(--btn-pad-y) var(--btn-pad-x);border:1px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-2);
  justify-content:center;transition:background .15s,color .15s,border-color .15s,transform .1s;
  min-height:var(--tap)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:var(--navy-950);border-color:var(--orange)}
.btn-primary:hover{background:#E05609;border-color:#E05609;color:var(--navy-950)}
.btn-secondary{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.btn-secondary:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
/* Quiet CTA: outline at rest, fills navy on hover. Never orange. */
.btn-quiet{background:var(--surface);color:var(--navy-600);border-color:var(--line)}
.btn-quiet:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff}

/* =======================================================================
   4. HEADER / TOPBAR / NAV
   ======================================================================= */
.topbar{background:var(--navy-950);color:#D7E2EF;font-size:var(--text-sm)}
.topbar .wrap{display:flex;justify-content:center;align-items:center;gap:var(--space-3);
  padding-top:var(--space-2);padding-bottom:var(--space-2);text-align:center}
.topbar .sep{color:var(--navy-400)}
.topbar span{display:inline-flex;align-items:center;gap:var(--space-2)}

.header{position:sticky;top:0;z-index:var(--z-header);background:var(--surface);
  border-bottom:1px solid var(--line)}
.header-main{display:flex;align-items:center;gap:var(--space-5);padding-block:var(--space-3)}
.logo{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:-.01em;
  color:var(--ink);flex-shrink:0}
form.search{flex:0 1 560px;display:flex;align-items:center;gap:var(--space-3);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:10px var(--space-5);min-width:160px}
form.search input{border:none;background:transparent;outline:none;font-family:var(--font-body);
  font-size:var(--text-ui);width:100%;color:var(--ink)}
form.search input::placeholder{color:var(--ink-soft)}
form.search button{background:none;border:none;padding:0;cursor:pointer;color:var(--ink-soft);
  display:inline-flex}
.header-actions{display:flex;align-items:center;gap:var(--space-5);flex-shrink:0;
  margin-left:auto;padding-right:var(--space-3)}
.haction{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-meta);
  font-weight:500;color:var(--ink);position:relative;min-height:var(--tap)}
.haction:hover{color:var(--navy-600)}
/* Shown only where the phone header collapses the search field — see §phone. */
.header .search-toggle{display:none}
.cart-badge{position:absolute;top:2px;right:-10px;background:var(--orange);color:var(--navy-950);
  font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;padding:0 5px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:var(--space-2);
  color:var(--ink);min-width:var(--tap);min-height:var(--tap);align-items:center;justify-content:center}

/* ---- Desktop category nav with dropdowns ---- */
.catnav{border-top:1px solid var(--line);position:relative}
.catnav .wrap{display:flex;gap:var(--space-1)}
.navitem{position:relative}
.navitem > a{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-ui);
  font-weight:500;color:var(--ink);padding:var(--space-3) var(--space-4);white-space:nowrap;
  border-bottom:2px solid transparent}
.navitem > a:hover,.navitem:focus-within > a{color:var(--navy-600);border-bottom-color:var(--navy-400)}
.navitem.is-accent > a{color:var(--orange-deep);font-weight:600}
.navitem.is-accent > a:hover{border-bottom-color:var(--orange)}
.navitem .caret{transition:transform .15s}
.navitem:hover .caret,.navitem:focus-within .caret{transform:rotate(180deg)}

.dropdown{position:absolute;top:100%;left:0;min-width:260px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);
  padding:var(--space-2);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:2}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:10px var(--space-3);border-radius:6px;font-size:var(--text-meta);color:var(--ink)}
.dropdown a:hover{background:var(--navy-tint);color:var(--navy-600)}
.dropdown a .n{color:var(--ink-soft);font-size:var(--text-xs)}
.dropdown .dd-all{border-top:1px solid var(--line);margin-top:var(--space-2);
  padding-top:var(--space-3);color:var(--navy-600);font-weight:600}

/* ---- Mobile drawer: full height, two-level accordion ---- */
.mdrawer-bg{position:fixed;inset:0;background:rgba(13,24,38,.45);z-index:var(--z-drawer-bg);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.mdrawer{position:fixed;inset:0;background:var(--surface);z-index:var(--z-drawer);
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .25s ease;visibility:hidden}
body.mopen{overflow:hidden}
body.mopen .mdrawer{transform:translateX(0);visibility:visible}
body.mopen .mdrawer-bg{opacity:1;visibility:visible}
.mdrawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--gutter);border-bottom:1px solid var(--line);flex-shrink:0}
.mdrawer-head b{font-family:var(--font-display);font-size:19px}
.mdrawer-body{flex:1;overflow-y:auto;padding:var(--space-2) var(--gutter) var(--space-8);
  -webkit-overflow-scrolling:touch}
.macc{border-bottom:1px solid var(--line)}
.macc > summary{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) 0;font-size:var(--text-body);font-weight:600;cursor:pointer;
  list-style:none;min-height:var(--tap)}
.macc > summary::-webkit-details-marker{display:none}
.macc > summary .caret{transition:transform .2s}
.macc[open] > summary .caret{transform:rotate(180deg)}
.macc-sub{padding:0 0 var(--space-3) var(--space-3);display:flex;flex-direction:column}
.macc-sub a{padding:var(--space-3) 0;font-size:var(--text-ui);color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;min-height:var(--tap)}
.macc-sub a .n{color:var(--ink-soft);font-size:var(--text-xs)}
.mdrawer-flat a{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) 0;font-size:var(--text-body);font-weight:600;
  border-bottom:1px solid var(--line);color:var(--ink);min-height:var(--tap)}
/* Close sits at the BOTTOM on mobile so it is reachable with a thumb. */
.mdrawer-foot{flex-shrink:0;border-top:1px solid var(--line);padding:var(--space-3) var(--gutter)
  calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface)}
.mdrawer-foot .btn{width:100%}

/* =======================================================================
   5. HERO / HOME
   ======================================================================= */
.hero{background:var(--surface);border-bottom:1px solid var(--line);
  padding:var(--section-y) 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-col);align-items:center}
.hero h1{margin:var(--space-1) 0 var(--space-3)}
.hero .sub{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--ink-soft);
  max-width:50ch;margin-bottom:var(--space-5)}
.hero-ctas{display:flex;gap:var(--space-3);flex-wrap:wrap}

.chooser{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5);box-shadow:var(--shadow-pop)}
.chooser .step-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-deep)}
.chooser h2{font-size:var(--h3);margin:var(--space-1) 0 var(--space-3)}
.chooser .micro{font-size:var(--text-sm);color:var(--ink-soft);text-align:center;margin-top:var(--space-3)}
.chooser .btn{width:100%}

.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust-track{position:relative;height:48px;overflow:hidden}
.trust-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:var(--space-2);font-size:var(--text-meta);font-weight:500;color:var(--ink-soft);
  white-space:nowrap;opacity:0;transform:translateY(10px);
  transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.trust-item.active{opacity:1;transform:translateY(0);pointer-events:auto}
.trust-item .hi{color:var(--navy-600)}

.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap-grid)}
.cat-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5) var(--space-4);color:var(--ink);text-align:center;
  transition:border-color .15s,box-shadow .15s;display:block}
.cat-tile:hover{border-color:var(--navy-400);box-shadow:var(--shadow-card)}
.cat-tile .ico{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--navy-tint);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3);color:var(--navy-600)}
.cat-tile b{font-family:var(--font-display);font-size:var(--text-ui);font-weight:700;display:block}
.cat-tile small{font-size:var(--text-xs);color:var(--ink-soft);display:block;margin-top:var(--space-1)}

.tilbud{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.sub-band{background:var(--navy-950);color:#fff}
.sub-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;padding-top:var(--space-6);padding-bottom:var(--space-6)}
.sub-band h2{color:#fff}
.sub-band p{color:#B9C4D2;font-size:var(--text-meta);margin-top:var(--space-1);max-width:62ch}
.sub-band p b{color:#F2A574;font-weight:600}

.faq{max-width:760px;margin:var(--space-5) auto 0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 var(--space-5);margin-bottom:var(--space-3)}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--text-ui);padding:var(--space-4) 0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:var(--space-4);min-height:var(--tap)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .caret{color:var(--navy-600);transition:transform .2s}
.faq details[open] summary .caret{transform:rotate(180deg)}
.faq details p{padding:0 0 var(--space-4);font-size:var(--text-meta);color:var(--ink-soft);max-width:60ch}

.b2b-line{background:var(--navy-tint)}
.b2b-line .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;padding-top:var(--space-5);padding-bottom:var(--space-5)}
.b2b-line p{font-size:var(--text-meta)}

/* =======================================================================
   6. PRODUCT CARD
   ======================================================================= */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .15s,border-color .15s}
.pcard:hover{box-shadow:var(--shadow-card);border-color:var(--navy-400)}
.pcard .imgwrap{position:relative;background:var(--prod-bg);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center}
.pcard .imgwrap a{display:block;width:100%;height:100%}
.pcard .imgwrap img{width:100%;height:100%;object-fit:contain;padding:var(--space-2);
  transition:transform .25s ease}
.pcard:hover .imgwrap img{transform:scale(1.04)}
.badge{position:absolute;top:var(--space-3);left:var(--space-3);background:var(--orange-tint);
  color:var(--orange-deep);font-size:var(--text-xs);font-weight:600;padding:3px 9px;
  border-radius:var(--radius-pill);z-index:2}
.badge.navy{background:var(--navy-tint);color:var(--navy-600)}
.pcard .pad{padding:var(--space-3) var(--space-4) var(--space-4);display:flex;
  flex-direction:column;flex:1;gap:var(--space-1)}
.cat-tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);min-height:14px}
.pcard .name-link{color:inherit;display:block}
/* Fixed two-line clamp keeps every price row on the same baseline across a row. */
.pcard .name{font-size:var(--text-meta);font-weight:500;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(var(--text-meta) * 1.4 * 2)}
.price-row{margin-top:auto;padding-top:var(--space-2);display:flex;align-items:baseline;
  gap:var(--space-2);flex-wrap:wrap}
.price{font-family:var(--font-display);font-weight:700;font-size:var(--h3)}
.price del{font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);
  color:var(--ink-soft);text-decoration:line-through}
.price ins{text-decoration:none;color:var(--orange-deep)}
.unit{font-size:var(--text-xs);color:var(--ink-soft)}
.stock{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);
  color:var(--ink-soft);margin-top:var(--space-2)}
.stock .dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--success);flex-shrink:0}
.stock .dot.out{background:var(--ink-soft)}
.pcard .btn{width:100%;margin-top:var(--space-3)}
/* Inside its own category archive the eyebrow just repeats the H1 — hide it. */
.tax-archive .pcard .cat-tag{display:none}

/* =======================================================================
   7. CATEGORY / SHOP ARCHIVE
   ======================================================================= */
.crumbs{font-size:var(--text-sm);color:var(--ink-soft);padding:var(--space-4) 0 0;
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--navy-600)}
.crumbs .hi{opacity:.6}

.page-hero{background:var(--surface);border-bottom:1px solid var(--line);
  padding:var(--section-y-lg) 0}
/* `.wrap` and `.inner` sit on the SAME element, so a max-width here beats the
   container width and `margin:0 auto` then centres that narrow box — the hero
   drifted right while the grid below stayed at the container edge. Keep the
   container width and constrain the MEASURE on the text instead. */
.page-hero .inner{max-width:var(--maxw)}
.page-hero h1,.page-hero .lead,.page-hero .crumbs{max-width:680px}
.page-hero h1{margin:var(--space-2) 0 var(--space-3)}
.page-hero .lead{font-size:var(--text-lead);line-height:var(--lh-lead);
  color:var(--ink-soft);max-width:56ch}
.page-hero .count{display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-4);font-size:var(--text-meta);color:var(--ink-soft)}
/* Archive hero carries the category image alongside the copy. */
.cat-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap-col);align-items:center}
.cat-hero .inner{max-width:none}
.cat-hero .hero-media{border-radius:var(--radius);overflow:hidden;background:var(--prod-bg);
  border:1px solid var(--line);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.cat-hero .hero-media img{width:100%;height:100%;object-fit:cover}

.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:var(--gap-col);
  align-items:start;padding:var(--space-5) 0 var(--section-y)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-2) var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}
.toolbar .res{font-size:var(--text-meta);color:var(--ink-soft)}
.sortwrap{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-meta);
  color:var(--ink-soft)}
select,.sortwrap select{border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:10px var(--space-4);font-family:var(--font-body);font-size:var(--text-meta);
  background:var(--surface);color:var(--ink);outline:none;min-height:var(--tap)}
select:focus{border-color:var(--navy-400)}
.fbtn{display:none;align-items:center;gap:var(--space-2);border:1px solid var(--line);
  border-radius:var(--radius-btn);background:var(--surface);padding:10px var(--space-4);
  font-family:var(--font-body);font-size:var(--text-meta);font-weight:600;color:var(--ink);
  cursor:pointer;min-height:var(--tap);position:relative}
.fbtn .fcount{background:var(--orange);color:var(--navy-950);font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:var(--radius-pill);display:inline-flex;
  align-items:center;justify-content:center;padding:0 5px}

/* ---- Filters ---- */
.filters{position:sticky;top:var(--sticky-top)}
.fgroup{border-top:1px solid var(--line);padding:var(--space-4) 0}
.fgroup:first-child{border-top:none;padding-top:0}
.fgroup > summary{cursor:pointer;font-weight:600;font-size:var(--text-ui);list-style:none;
  display:flex;justify-content:space-between;align-items:center;padding:var(--space-1) 0;
  min-height:var(--tap)}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup > summary .caret{color:var(--ink-soft);transition:transform .2s}
.fgroup[open] > summary .caret{transform:rotate(180deg)}
.fopts{margin-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}
.fopt{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-meta);
  padding:var(--space-2) 0;cursor:pointer;color:var(--ink);min-height:var(--tap)}
.fopt input{accent-color:var(--navy-600);width:17px;height:17px;cursor:pointer;flex-shrink:0}
.fopt .n{margin-left:auto;font-size:var(--text-xs);color:var(--ink-soft)}
.price-vals{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.price-vals input{width:100%;border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:10px var(--space-3);font-family:var(--font-body);font-size:var(--text-meta);
  outline:none;background:var(--surface);color:var(--ink);min-height:var(--tap)}
.price-vals span{color:var(--ink-soft)}
.filters .apply{width:100%;margin-top:var(--space-4)}
.clear-f{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);
  font-size:var(--text-sm);color:var(--orange-deep);font-weight:600}
.clear-f:hover{text-decoration:underline}

.active-chips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-4)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--navy-tint);
  color:var(--navy-600);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-pill);
  padding:6px var(--space-3);border:none;cursor:pointer;min-height:32px}

.pagination,.woocommerce-pagination ul{display:flex;justify-content:center;gap:var(--space-2);
  margin-top:var(--space-6);list-style:none;padding:0;flex-wrap:wrap}
.pagination a,.woocommerce-pagination li a,.woocommerce-pagination li span{
  display:flex;align-items:center;justify-content:center;min-width:var(--tap);height:var(--tap);
  border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--surface);
  font-size:var(--text-meta);font-weight:500;color:var(--ink);padding:0 var(--space-3)}
.pagination a.cur,.woocommerce-pagination li span.current{background:var(--navy-600);
  border-color:var(--navy-600);color:#fff}
.pagination a:hover:not(.cur),.woocommerce-pagination li a:hover{border-color:var(--navy-400);
  color:var(--navy-600)}

/* ---- Mobile filter bottom sheet ---- */
.fdrawer-bg{position:fixed;inset:0;background:rgba(13,24,38,.45);z-index:var(--z-drawer-bg);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.fdrawer{position:fixed;left:0;right:0;bottom:0;top:15vh;background:var(--surface);
  z-index:var(--z-drawer);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  display:flex;flex-direction:column;transform:translateY(100%);
  transition:transform .25s ease;visibility:hidden}
body.fopen{overflow:hidden}
body.fopen .fdrawer{transform:translateY(0);visibility:visible}
body.fopen .fdrawer-bg{opacity:1;visibility:visible}
.fdrawer .fhead{display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-4) var(--gutter);border-bottom:1px solid var(--line);flex-shrink:0}
.fdrawer .fhead b{font-family:var(--font-display);font-size:19px}
.fdrawer .fbody{flex:1;overflow-y:auto;padding:var(--space-3) var(--gutter) var(--space-6)}
.fdrawer .filters{position:static}
.fdrawer .fapplybar{flex-shrink:0;background:var(--surface);border-top:1px solid var(--line);
  padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  display:flex;gap:var(--space-3)}
.fdrawer .fapplybar .btn{flex:1}
.iconbtn{background:none;border:none;cursor:pointer;color:var(--ink);padding:var(--space-2);
  min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}

/* =======================================================================
   8. PRODUCT PAGE
   ======================================================================= */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-col);
  padding:var(--space-5) 0 var(--section-y);align-items:start}
.pd-gallery{position:sticky;top:var(--sticky-top)}
.pd-main{position:relative;background:var(--prod-bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center}
.pd-main img{width:100%;height:100%;object-fit:contain;padding:var(--space-3)}
.pd-thumbs{display:flex;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap}
.pd-thumbs button{width:88px;height:88px;border:1.5px solid var(--line);border-radius:var(--radius-btn);
  background:var(--prod-bg);cursor:pointer;padding:var(--space-1);transition:border-color .15s}
.pd-thumbs button.cur{border-color:var(--navy-600)}
.pd-thumbs img{width:100%;height:100%;object-fit:contain}

.pd-info .cat-tag{margin-bottom:var(--space-2)}
.pd-info h1{font-size:clamp(24px,2.8vw,32px);line-height:1.2;margin-bottom:var(--space-3)}
.pd-price{display:flex;align-items:baseline;gap:var(--space-3);margin:var(--space-2) 0}
.pd-price .price{font-size:30px;font-weight:800}
.pd-unit{font-size:var(--text-sm);color:var(--ink-soft);margin-bottom:var(--space-3)}
.pd-stock{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-meta);
  font-weight:500;margin-bottom:var(--space-5)}
.pd-stock .dot{width:9px;height:9px;border-radius:var(--radius-pill);background:var(--success)}
.pd-stock .dot.out{background:var(--ink-soft)}
.pd-short{color:var(--ink-soft);font-size:var(--text-ui);line-height:var(--lh-ui);
  margin-bottom:var(--space-5);max-width:60ch}
.pd-buy{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.pd-buy .btn{flex:1;min-width:200px;padding:15px;font-size:var(--text-body)}
.pd-usps{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-4);
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.pd-usps span{display:flex;gap:var(--space-2);align-items:center;font-size:var(--text-sm);
  color:var(--ink-soft);white-space:nowrap}
.pd-usps .hi{color:var(--navy-600)}
.pd-meta{font-size:var(--text-sm);color:var(--ink-soft);margin-top:var(--space-4);
  border-top:1px solid var(--line);padding-top:var(--space-4)}
.pd-meta a{color:var(--navy-600)}

.pd-tabs{max-width:820px;margin:0 auto;padding-bottom:var(--section-y)}
.pd-tabs details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:0 var(--space-5);margin-bottom:var(--space-3)}
.pd-tabs summary{cursor:pointer;font-weight:600;font-size:var(--text-body);padding:var(--space-4) 0;
  list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:var(--tap)}
.pd-tabs summary::-webkit-details-marker{display:none}
.pd-tabs summary .caret{color:var(--navy-600);transition:transform .2s}
.pd-tabs details[open] summary .caret{transform:rotate(180deg)}
.pd-tabs .tab-body{padding:0 0 var(--space-5);font-size:var(--text-meta);color:var(--ink-soft);
  max-width:64ch}
.pd-tabs .tab-body ul{list-style:disc;padding-left:var(--space-5);margin:var(--space-3) 0}
.pd-tabs .tab-body li{margin-bottom:var(--space-2)}
.pd-tabs table{width:100%;border-collapse:collapse;font-size:var(--text-meta);margin-top:var(--space-2)}
.pd-tabs td,.pd-tabs th{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);
  text-align:left}
.pd-tabs td:first-child,.pd-tabs th{color:var(--ink);font-weight:500;width:40%}

.sticky-buy{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--surface);
  border-top:1px solid var(--line);padding:var(--space-2) var(--gutter)
  calc(var(--space-2) + env(safe-area-inset-bottom));z-index:var(--z-sticky-buy);
  gap:var(--space-3);align-items:center;box-shadow:var(--shadow-sheet)}
.sticky-buy .sp{min-width:0;flex:1}
.sticky-buy .sp b{display:block;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sticky-buy .sp span{font-family:var(--font-display);font-weight:700;font-size:var(--text-body)}
.sticky-buy .btn{flex-shrink:0}

/* =======================================================================
   9. CONTENT PAGES (om-oss, kontakt, blogg, konto)
   ======================================================================= */
.about-grid,.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);
  padding:var(--section-y) 0}
.about-grid p{color:var(--ink-soft)}
.why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid,.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5)}
.icard .ico{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--navy-tint);
  color:var(--navy-600);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-3)}
.icard h3{margin-bottom:var(--space-2)}
.icard p{font-size:var(--text-meta);color:var(--ink-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);padding:var(--section-y) 0}
.stat{text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(26px,3vw,34px);font-weight:800}
.stat span{font-size:var(--text-meta);color:var(--ink-soft)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);padding:var(--section-y) 0}
.cinfo li{list-style:none;display:flex;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.cinfo .hi{color:var(--navy-600);margin-top:3px}
.cinfo b{display:block;font-size:var(--text-meta)}
.cinfo span{font-size:var(--text-meta);color:var(--ink-soft)}
.cform{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5)}
.cform label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);
  margin-bottom:var(--space-1)}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:var(--field-pad-y) var(--field-pad-x);font-family:var(--font-body);
  font-size:var(--text-ui);background:var(--surface);color:var(--ink);outline:none;
  margin-bottom:var(--space-4);min-height:var(--tap)}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--navy-400)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);padding:var(--section-y) 0}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.bcard .bimg{aspect-ratio:16/10;background:var(--navy-tint);overflow:hidden}
.bcard .bimg img{width:100%;height:100%;object-fit:cover}
.bcard .bpad{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.bcard h3{font-size:var(--h4)}
.bcard p{font-size:var(--text-meta);color:var(--ink-soft)}
.bcard .bmeta{font-size:var(--text-xs);color:var(--ink-soft);margin-top:auto}
.article{max-width:760px;margin:0 auto;padding:var(--section-y) var(--gutter)}
.article h2{margin:var(--space-6) 0 var(--space-3)}
.article p{color:var(--ink-soft)}

/* =======================================================================
   10. FOOTER
   ======================================================================= */
.footer{background:var(--navy-950);color:#B9C4D2;padding:var(--section-y-lg) 0 var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-6)}
.footer .flogo{font-family:var(--font-display);font-weight:800;font-size:23px;color:#fff;
  letter-spacing:-.01em}
.footer .blurb{font-size:var(--text-meta);margin-top:var(--space-3);max-width:34ch}
.paybadges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.klarna{display:inline-block;background:#FFB3C7;color:#0D1826;font-family:var(--font-display);
  font-weight:700;font-size:var(--text-sm);padding:4px var(--space-3);border-radius:var(--radius-pill)}
.footer h4{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#7C8DA3;margin-bottom:var(--space-3)}
.footer ul{list-style:none}
.footer li{padding:var(--space-1) 0}
.footer a{color:#B9C4D2;font-size:var(--text-meta);display:inline-flex;align-items:center;
  gap:var(--space-2)}
.footer a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--space-6);padding-top:var(--space-5);
  font-size:var(--text-sm);color:#7C8DA3;display:flex;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap}
.legal .ovanap{color:#F2A574}

/* =======================================================================
   11. GENERATEPRESS SHELL CORRECTIONS
   GP lays .site-content out as a flex ROW; full-width sections rendered by a
   custom template become flex items and blow past the viewport at >=1280.
   ======================================================================= */
.hund .site-content{display:block!important}
.hund .site-content .content-area,
.hund .site-content #primary{width:100%!important;max-width:none!important;
  padding:0!important;float:none!important}
.hund #page{padding:0;margin:0;max-width:none}
.site-header,.main-navigation,.site-info,.site-footer .footer-widgets{display:none!important}
.site-content,.content-area{background:var(--bg)}

/* =======================================================================
   12. WOOCOMMERCE BRIDGE
   NOTE: .hund and .woocommerce both land on <body>, so a DESCENDANT
   combinator (.hund .woocommerce) matches nothing. Must be compound.
   ======================================================================= */
.hund-page{padding:var(--section-y) 0}
.hund-page .lead{color:var(--ink-soft);max-width:60ch;margin-bottom:var(--space-4);
  font-size:var(--text-ui)}

.hund.woocommerce a.button,.hund.woocommerce button.button,.hund.woocommerce input.button,
.hund.woocommerce a.button.alt,.hund.woocommerce button.button.alt,
.hund.woocommerce #respond input#submit{
  font-family:var(--font-body);font-weight:600;font-size:var(--btn-fs);line-height:1.2;
  border-radius:var(--radius-btn);padding:var(--btn-pad-y) var(--btn-pad-x);
  border:1px solid var(--orange);cursor:pointer;background:var(--orange);color:var(--navy-950);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--tap);text-shadow:none;transition:background .15s,border-color .15s}
.hund.woocommerce a.button:hover,.hund.woocommerce button.button:hover,
.hund.woocommerce input.button:hover,.hund.woocommerce a.button.alt:hover,
.hund.woocommerce button.button.alt:hover{background:#E05609;border-color:#E05609;color:var(--navy-950)}
/* Card add-to-cart stays quiet even though Woo prints .button on it. */
.hund.woocommerce .pcard a.button,.hund.woocommerce .pcard button.button{
  background:var(--surface);color:var(--navy-600);border-color:var(--line);width:100%;
  margin-top:var(--space-3)}
.hund.woocommerce .pcard a.button:hover,.hund.woocommerce .pcard button.button:hover{
  background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.hund.woocommerce a.button.wc-backward{background:var(--navy-600);border-color:var(--navy-600);color:#fff}

.woocommerce table.shop_table{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line);font-size:var(--text-meta);text-align:left;vertical-align:middle}
.woocommerce table.shop_table th{font-family:var(--font-display);font-weight:700;
  font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.woocommerce table.cart img{width:64px;border-radius:6px}
.cart_totals,.woocommerce-checkout-review-order,.woocommerce-order,
.woocommerce-MyAccount-content,.woocommerce-form-login,.woocommerce-form-register{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5)}
.cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{
  font-family:var(--font-display);font-size:var(--h3);margin-bottom:var(--space-3)}
.woocommerce form .form-row{display:flex;flex-direction:column;margin-bottom:var(--space-3)}
.woocommerce form .form-row label{font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);
  margin-bottom:var(--space-1)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection--single{
  border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:var(--field-pad-y) var(--field-pad-x);font-family:var(--font-body);
  font-size:var(--text-ui);background:var(--surface);color:var(--ink);outline:none;
  height:auto;min-height:var(--tap)}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{
  border-color:var(--navy-400)}
.woocommerce .woocommerce-info,.woocommerce .woocommerce-message,.woocommerce .woocommerce-error,
.woocommerce .cart-empty{background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--navy-600);border-radius:var(--radius);
  padding:var(--space-4);font-size:var(--text-meta);list-style:none;margin-bottom:var(--space-5)}
.woocommerce .woocommerce-error{border-top-color:var(--orange-deep)}
.woocommerce-checkout #payment{background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--space-4)}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 var(--space-3)}
.woocommerce .quantity input.qty{border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:var(--space-2);width:76px;text-align:center;background:var(--surface);color:var(--ink);
  min-height:var(--tap)}
.related.products > h2,.up-sells > h2{font-size:var(--h2);margin:var(--section-y) 0 var(--space-5)}
.related ul.products,.up-sells ul.products,.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);
  list-style:none;margin:0;padding:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}

/* =======================================================================
   13. RESPONSIVE
   ======================================================================= */
@media (max-width:1020px){
  .prod-grid,.related ul.products,.up-sells ul.products,.woocommerce ul.products{
    grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .hero-grid,.cat-hero .wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .pd{grid-template-columns:1fr}
  .pd-gallery{position:static}
  .about-grid,.promise-grid,.contact-grid{grid-template-columns:1fr}
  .why-grid,.card-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  aside.fcol{display:none}
  .fbtn{display:inline-flex}
}

@media (max-width:760px){
  .topbar .t-hide,.topbar .sep{display:none}
  .header-main{flex-wrap:wrap;gap:var(--space-2);padding-block:var(--space-3)}
  .logo{font-size:22px}
  .catnav{display:none}
  .haction .label{display:none}
  .haction.desk-only{display:none}
  .header.header--search-collapsed .search-toggle{display:inline-flex}
  .burger{display:inline-flex}
  form.search{order:3;flex-basis:auto;width:100%;min-width:0;margin:var(--space-2) auto 0}
  form.search input{font-size:16px}   /* 16px stops iOS Safari zooming on focus */
  .hero .sub{font-size:var(--text-ui)}
  .cat-grid{grid-template-columns:1fr 1fr}
  .why-grid,.card-grid,.blog-grid{grid-template-columns:1fr}
  .toolbar .res{display:none}
  .sub-band .btn,.b2b-line .btn{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .legal{flex-direction:column;gap:var(--space-2)}
  .sticky-buy{display:flex}
  body.single-product{padding-bottom:calc(72px + var(--buy-pad-bottom))}   /* superseded below, kept in sync */
  .pd-thumbs button{width:64px;height:64px}
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block;border-bottom:1px solid var(--line)}
  .woocommerce table.shop_table td{display:flex;justify-content:space-between;
    gap:var(--space-3);border:none;padding:var(--space-2) var(--space-3)}
  .woocommerce table.shop_table td::before{content:attr(data-title);font-weight:600;
    color:var(--ink-soft)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* Card CTA: inside the 4-up grid with a filter sidebar a card is ~197px, leaving
   ~117px of label width at the default button metrics — "Legg i handlekurv"
   needs ~128px and wrapped to two lines, breaking the row rhythm. Tighten the
   padding and step the type down one notch instead of letting it wrap. */
.pcard .btn,
.hund.woocommerce .pcard a.button,
.hund.woocommerce .pcard button.button{
  padding-left:var(--space-3);padding-right:var(--space-3);
  font-size:var(--text-meta);white-space:nowrap}

/* =======================================================================
   14. ROUND 2 — review fixes
   ======================================================================= */

/* ---- Real logo (migrated from hunddelux.no) ---- */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo .logo-img{height:38px;width:auto;max-width:210px;object-fit:contain;display:block}
.logo .logo-text{font-family:var(--font-display);font-weight:800;font-size:25px;
  letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.footer .flogo{line-height:0}
/* The wordmark is dark navy on transparent — invert it on the dark footer. */
.footer .flogo .logo-img{height:34px;width:auto;max-width:200px;object-fit:contain;
  filter:brightness(0) invert(1)}
@media (max-width:760px){ .logo .logo-img{height:30px;max-width:150px} }

/* ---- Payment badges: Vipps owns orange, Klarna owns pink ---- */
.vipps{display:inline-block;background:#FF5B24;color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:var(--text-sm);padding:4px var(--space-3);
  border-radius:var(--radius-pill)}

/* ---- Category tiles now carry a real photo, one per tile ---- */
.cat-tile{padding:0;overflow:hidden;text-align:left}
.ct-media{display:block;aspect-ratio:4/3;background:var(--prod-bg);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ct-media img{width:100%;height:100%;object-fit:contain;padding:var(--space-3)}
.cat-tile b{padding:var(--space-3) var(--space-4) 0;font-size:var(--text-meta)}
.cat-tile small{padding:0 var(--space-4) var(--space-4)}

/* ---- Card: stop the CTA sticking to the stock line ---- */
.pcard .stock{margin-bottom:var(--space-1)}
.pcard .btn,
.hund.woocommerce .pcard a.button,
.hund.woocommerce .pcard button.button{margin-top:var(--space-4)}

/* ---- Quantity stepper (design source .qty) ---- */
.pd-buy .quantity.qty{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);
  border-radius:var(--radius-btn);background:var(--surface);overflow:hidden;flex:0 0 auto}
.pd-buy .quantity.qty .qty-btn{width:var(--tap);min-height:var(--tap);background:none;border:none;
  font-size:20px;line-height:1;cursor:pointer;color:var(--ink);font-family:var(--font-body)}
.pd-buy .quantity.qty .qty-btn:hover{background:var(--navy-tint);color:var(--navy-600)}
.pd-buy .quantity.qty input.qty{width:52px;border:none;border-left:1px solid var(--line);
  border-right:1px solid var(--line);border-radius:0;text-align:center;font-weight:600;
  font-size:var(--text-ui);-moz-appearance:textfield;appearance:textfield}
.pd-buy .quantity.qty input.qty::-webkit-outer-spin-button,
.pd-buy .quantity.qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-buy .single_add_to_cart_button{flex:1;min-width:200px}

/* ---- Related products: give it air, never let it butt into the footer ---- */
.related.products,.up-sells{margin-top:var(--space-8);padding-bottom:var(--section-y)}
.related.products > h2,.up-sells > h2{margin:0 0 var(--space-5)}

/* ---- Reviews (design source: Google anmeldelser) ---- */
.reviews-head{text-align:center;margin-bottom:var(--space-6)}
.reviews-head .g{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-meta);color:var(--ink-soft);margin-top:var(--space-2);flex-wrap:wrap;
  justify-content:center}
.reviews-head .g b{font-size:var(--text-lead);color:var(--ink)}
.stars{color:var(--orange);letter-spacing:2px;font-size:var(--text-ui)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);margin:0}
.review .r-head{display:flex;align-items:center;gap:var(--space-3)}
.review .avatar{width:38px;height:38px;border-radius:var(--radius-pill);background:var(--navy-tint);
  color:var(--navy-600);font-weight:700;font-size:var(--text-ui);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.review .r-name{font-weight:700;font-size:var(--text-meta)}
.review .r-date{font-size:var(--text-sm);color:var(--ink-soft)}
.review blockquote{margin:0}
.review blockquote p{font-size:var(--text-meta);line-height:1.6;color:var(--ink)}
.review .r-dog{font-size:var(--text-sm);color:var(--ink-soft);margin-top:auto}

/* ---- Footer: align the four columns on one baseline ---- */
.footer-grid{align-items:start}
.footer-col-head{font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#7C8DA3;margin-bottom:var(--space-3);
  min-height:calc(var(--text-xs) * 1.5);display:block}
.footer h4{min-height:calc(var(--text-xs) * 1.5)}
.footer ul{display:flex;flex-direction:column;gap:var(--space-1)}
.footer li{padding:0}
.footer a{padding:var(--space-1) 0;line-height:1.4}

/* ---- Pagination: one consistent control row ---- */
.woocommerce-pagination{margin-top:var(--space-7)}
.woocommerce-pagination ul{border:none;margin:0;gap:var(--space-2)}
.woocommerce-pagination ul li{border:none;margin:0;overflow:visible}
.woocommerce-pagination ul li a,.woocommerce-pagination ul li span{
  float:none;padding:0 var(--space-3);margin:0;line-height:1}
.woocommerce-pagination .next,.woocommerce-pagination .prev{font-size:var(--text-meta)}

@media (max-width:1020px){ .reviews-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .reviews-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .pd-buy .single_add_to_cart_button{min-width:0;flex:1 1 100%}
}

/* Grid/flex children default to min-width:auto, so a long unbreakable string
   (an e-mail address, "Informasjonskapsler") forces the column wider than its
   track and pushes the document sideways at 360. Let them shrink and wrap. */
.footer-grid > *{min-width:0}
.footer ul,.footer li{min-width:0}
.footer a{overflow-wrap:anywhere;word-break:break-word}
.legal span{overflow-wrap:anywhere}

/* Product shots are on white; a white tile frame makes a white bag invisible.
   Tint the category tile media so the product reads as an object. */
.ct-media{background:var(--navy-tint)}

/* Rating stars are Lucide glyphs, not the ★ character. */
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--orange);letter-spacing:0}
.pd-buy .quantity.qty .qty-btn{display:inline-flex;align-items:center;justify-content:center}

/* Chooser is a real form now — labels/selects stack like the reference. */
.chooser label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);
  margin:var(--space-3) 0 var(--space-1)}
.chooser select{width:100%;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-3) center;
  padding-right:var(--space-8)}
.chooser .btn{margin-top:var(--space-4)}

/* =======================================================================
   15. ROUND 3 — Woo pages, document pages, centring
   ======================================================================= */

/* Legal / policy / info pages: one readable measure, centred, with real rhythm.
   Without this a migrated policy page renders full-container-width and reads
   as a wall (the "centring looks odd" report). */
/* Left-aligned, NOT centred: the page hero above it starts at the container
   edge, so a centred body column made the H1 and its own text disagree. */
.hund-page.is-doc{max-width:820px;margin-inline:0}
.hund-page.is-doc h2{font-size:var(--h2);margin:var(--space-7) 0 var(--space-3)}
.hund-page.is-doc h3{font-size:var(--h3);margin:var(--space-6) 0 var(--space-2)}
.hund-page.is-doc p{color:var(--ink-soft)}
.hund-page.is-doc p + p{margin-top:var(--stack-p)}
.hund-page.is-doc ul,.hund-page.is-doc ol{margin:var(--space-4) 0 var(--stack-p);
  padding-left:var(--space-5);color:var(--ink-soft)}
.hund-page.is-doc li{margin-bottom:var(--space-2)}
.hund-page.is-doc a{color:var(--navy-600);text-decoration:underline}
.hund-page.is-doc table{width:100%;border-collapse:collapse;margin:var(--space-4) 0}
.hund-page.is-doc td,.hund-page.is-doc th{border-bottom:1px solid var(--line);
  padding:var(--space-3);text-align:left;font-size:var(--text-meta)}
.hund-page.is-doc img{border-radius:var(--radius)}

/* Blog article measure matches the document measure so the two never disagree. */
.article{max-width:820px}

/* ---- Classic cart ---- */
.woocommerce-cart .hund-page{display:grid;grid-template-columns:1fr 380px;
  gap:var(--gap-col);align-items:start}
.woocommerce-cart .woocommerce{display:contents}
.woocommerce-cart form.woocommerce-cart-form{min-width:0}
.woocommerce-cart .cart-collaterals{width:100%;float:none;position:sticky;top:var(--sticky-top)}
.woocommerce-cart .cart-collaterals h2{font-family:var(--font-display);font-size:var(--h3);
  margin-bottom:var(--space-3)}
.woocommerce table.cart td.product-thumbnail img{width:72px;border:1px solid var(--line);
  border-radius:var(--radius-btn);background:var(--prod-bg)}
.woocommerce table.cart td.product-name a{color:var(--ink);font-weight:500;
  font-size:var(--text-meta)}
.woocommerce table.cart td.product-name a:hover{color:var(--navy-600)}
.woocommerce table.cart .product-remove a.remove{display:inline-flex;align-items:center;
  justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill);
  background:var(--bg);color:var(--ink-soft);font-size:18px;line-height:1;text-decoration:none}
.woocommerce table.cart .product-remove a.remove:hover{background:var(--orange-tint);
  color:var(--orange-deep)}
.woocommerce table.cart .actions{padding:var(--space-4)}
.woocommerce table.cart .actions .coupon{display:flex;gap:var(--space-2);flex-wrap:wrap}
.woocommerce table.cart .actions .coupon input#coupon_code{flex:1;min-width:160px}
.woocommerce .cart_totals table.shop_table{border:none}
.woocommerce .cart_totals table.shop_table th{text-transform:none;font-size:var(--text-meta);
  letter-spacing:0;color:var(--ink)}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{
  font-family:var(--font-display);font-size:var(--text-lead);color:var(--ink)}
.woocommerce .wc-proceed-to-checkout{padding-top:var(--space-4)}
.woocommerce .wc-proceed-to-checkout a.checkout-button{width:100%}

/* ---- Classic checkout ----
   The FORM is the grid (not .hund-page via display:contents) so rows can be
   placed explicitly; otherwise auto-placement drops the order summary below the
   billing fields and the right column starts halfway down the page. */
.woocommerce-checkout form.checkout{display:grid;grid-template-columns:1fr 400px;
  gap:0 var(--gap-col);align-items:start}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 2;min-width:0}
.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 var(--space-3)}
.woocommerce-checkout #order_review{grid-column:2;grid-row:2;position:sticky;
  top:var(--sticky-top);min-width:0}
.woocommerce-checkout .woocommerce-notices-wrapper{grid-column:1 / -1}
.woocommerce-checkout h3{font-family:var(--font-display);font-size:var(--h3);
  margin-bottom:var(--space-4)}
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{display:grid;
  grid-template-columns:1fr 1fr;gap:0 var(--space-3)}
.woocommerce-checkout .form-row-wide{grid-column:1 / -1}
.woocommerce-checkout #place_order{width:100%}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:var(--space-4) 0}
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin-bottom:var(--space-5)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--success)}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--orange-deep)}

/* ---- My account ---- */
/* The 250px nav column belongs to the LOGGED-IN account only. Applying it while
   logged out squeezed the login/register cards into ~190px columns. */
.woocommerce-account.logged-in .woocommerce{display:grid;grid-template-columns:250px 1fr;
  gap:var(--gap-col);align-items:start}
.woocommerce-account .woocommerce-MyAccount-navigation{min-width:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line)}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;
  padding:var(--space-3) var(--space-4);font-size:var(--text-meta);color:var(--ink)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--navy-tint);
  color:var(--navy-600);font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content{min-width:0}
/* Logged out: the login/register pair is a two-up card row, not a full-width stack. */
.woocommerce-account:not(.logged-in) .woocommerce{display:block}
.woocommerce-account .u-columns{display:contents}
.woocommerce-account .u-column1,.woocommerce-account .u-column2{width:100%;float:none}

@media (max-width:1020px){
  .woocommerce-cart .hund-page,
  .woocommerce-checkout form.checkout,
  .woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr}
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{grid-column:1;grid-row:auto}
  .woocommerce-cart .cart-collaterals,
  .woocommerce-checkout #order_review{position:static}
}
@media (max-width:760px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
}

/* Checkout: place BOTH halves explicitly. Without an explicit column the
   customer-details block falls into the same track as the order review and the
   left half of the page renders empty. */
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 3}
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-notices-wrapper{grid-column:1 / -1}

/* Woo prints its notice/toggle icons from an icon FONT (WooCommerce glyphs).
   The font is not loaded here, so they render as tofu boxes. Kill the glyph and
   use a Lucide-styled marker instead. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-noreviews::before,
.woocommerce ul.woocommerce-error li::before{content:none!important;display:none!important}
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error{padding-left:var(--space-4)}
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a{color:var(--navy-600);font-weight:600}
/* Woo's remove-from-cart "x" is also a glyph — replace with a real character. */
.woocommerce table.cart .product-remove a.remove{font-family:var(--font-body)}

/* Card CTA must look identical everywhere the card appears. Scoping it to
   body.woocommerce meant the front page (not a Woo page) fell back to
   GeneratePress's dark default button while the shop looked correct. Scope on
   the CARD, not the body. */
.pcard a.button,.pcard button.button,.pcard .btn{
  background:var(--surface);color:var(--navy-600);border:1px solid var(--line);
  font-family:var(--font-body);font-weight:600;font-size:var(--text-meta);line-height:1.2;
  border-radius:var(--radius-btn);padding:var(--btn-pad-y) var(--space-3);
  width:100%;margin-top:var(--space-4);min-height:var(--tap);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.pcard a.button:hover,.pcard button.button:hover,.pcard .btn:hover{
  background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.pcard a.added_to_cart{background:var(--navy-600);border-color:var(--navy-600);color:#fff;
  margin-top:var(--space-2)}

/* =======================================================================
   16. REFERENCE RECONCILIATION
   The round-2 pass put every value on an 8px ladder. The design reference does
   NOT use an 8px ladder — it uses its own numbers (10/14/18/26/36px) and switches
   at a 760px breakpoint rather than interpolating with clamp(). The reference is
   the contract, so the TOKEN VALUES below are re-derived from styles.css; the
   token architecture (one source per value) is unchanged.
   Values verified against /home/ovanap/demos/hund/design/styles.css.
   ======================================================================= */
:root{
  /* Lucide chevron-down as a mask, for the handful of vendor components that draw
     their own icon with an icon font we do not ship. Same path, stroke and cap as
     inc/icons.php, so a masked chevron and an inline one are indistinguishable. */
  --ic-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* The checkout is a single decision column: wide enough for the Klarna
     block to breathe, narrow enough to stay one comfortable measure. */
  --checkout-maxw:720px;
  --gutter:24px;
  --section-y:56px;
  --section-y-lg:52px;      /* .footer padding-top */
  --gap-grid:18px;          /* .prod-grid            */
  --gap-cat:14px;           /* .cat-grid             */
  --gap-col:48px;           /* .hero-grid / splits   */
  --head-row-mb:26px;
  --header-gap:26px;
  --header-actions-gap:18px;
  --search-gap:10px;
  --search-pad-y:10px; --search-pad-x:18px;
  --topbar-gap:10px;
  --nav-pad-y:11px; --nav-pad-x:14px;
  --card-pad-top:13px; --card-pad-x:15px; --card-pad-bottom:15px;
  --footer-pad-top:52px; --footer-pad-bottom:30px; --footer-gap:36px;
  --footer-h4:11.5px;

  --h1:clamp(30px,4.2vw,46px);
  --h2:clamp(24px,3vw,30px);
  --text-lead:16.5px;
  --text-sect-lead:15.5px;
  --price-size:18px;
  --eyebrow-size:11px;
}
@media (max-width:1020px){
  :root{ --gap-col:32px; }
}
@media (max-width:760px){
  :root{
    --gutter:16px; --section-y:40px; --gap-grid:10px; --gap-cat:10px;
    --gap-col:26px; --head-row-mb:20px; --header-gap:8px;
    --search-pad-y:11px; --search-pad-x:16px;
    --card-pad-top:12px; --card-pad-x:14px; --card-pad-bottom:14px;
    --footer-pad-top:42px; --footer-pad-bottom:26px; --footer-gap:26px;
    --h1:28px; --h2:23px; --text-lead:15px; --text-sect-lead:15px;
    --price-size:17px; --eyebrow-size:10px;
  }
}

/* ---- components realigned to the reference ---- */
.section{padding-block:var(--section-y)}
.head-row{margin-bottom:var(--head-row-mb)}
.section-head .lead{font-size:var(--text-sect-lead)}
.hero{padding:44px 0 48px}
.hero .sub{font-size:var(--text-lead)}
.hero-grid{gap:var(--gap-col)}
.header-main{gap:var(--header-gap)}
.header-actions{gap:var(--header-actions-gap);padding-right:10px}
form.search{gap:var(--search-gap);padding:var(--search-pad-y) var(--search-pad-x)}
form.search input{line-height:normal}
.topbar .wrap{gap:var(--topbar-gap)}
.catnav .navitem > a{padding:var(--nav-pad-y) var(--nav-pad-x)}
.cat-grid{gap:var(--gap-cat)}
.prod-grid,.related ul.products,.up-sells ul.products,.woocommerce ul.products{gap:var(--gap-grid)}
.pcard .pad{padding:var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom)}
/* Reference frames the card image on the page background, not white. */
.pcard .imgwrap{background:var(--bg)}
.cat-tag{font-size:var(--eyebrow-size)}
.price{font-size:var(--price-size)}
.cart-badge{font-weight:600}
.klarna,.vipps{letter-spacing:.01em}
.faq summary{font-size:var(--text-sect-lead)}
.chooser{padding:24px}
.chooser label{margin:10px 0 5px}
.review{padding:20px}
.review .avatar{border-radius:50%}
.footer{padding:var(--footer-pad-top) 0 var(--footer-pad-bottom)}
.footer-grid{gap:var(--footer-gap)}
/* Footer column headings use the BODY face in the reference, not the display face. */
.footer h4{font-family:var(--font-body);font-size:var(--footer-h4);letter-spacing:.12em}

/* Heading letter-spacing follows the reference per component, not one global rule. */
.hero h1{letter-spacing:-.015em}
.section-head h2{letter-spacing:normal}
.page-hero h1,.shop-head h1{letter-spacing:-.01em}
.pd-info h1{letter-spacing:-.01em}

@media (max-width:760px){
  .chooser{padding:20px 18px}
  .hero{padding:30px 0 38px}
}

/* ---- Reference reconciliation, pass 2 ---- */
.logo{display:block;line-height:1.4;flex-shrink:0}
.logo .logo-img{display:block}
form.search{flex:0 1 560px}
form.search input{font-size:15px;line-height:normal;padding:0;max-width:none}
form.search button{padding:0}
.header-actions{padding-right:0}
.haction{gap:7px;font-size:14.5px;line-height:1.6}
.catnav .navitem > a{font-size:14.5px;line-height:1.6;column-gap:normal;row-gap:normal}
.hero h1{margin:4px 0 14px}
.hero .sub{margin-bottom:22px}
.eyebrow{font-size:12px;margin-bottom:10px}
.chooser select{padding:11px 14px;font-size:15px;line-height:normal;max-width:none;
  padding-right:38px}
.trust-item{gap:9px;font-size:13.5px;line-height:1.6}
.section-head h2{margin-bottom:0}
.text-link{gap:6px;font-size:15px}
.cat-tile{padding:0}
.cat-tile b{padding:16px 16px 0}
.cat-tile small{padding:0 16px 16px}
.stock .dot{line-height:normal}
.price-row{margin-top:9px;gap:8px}
.unit{font-size:12px}
.crumbs{font-size:13px;padding:18px 0 0}
.pcard .name{min-height:40px}
.pcard .btn,.pcard a.button,.pcard button.button{padding:11px;font-size:14px;margin-top:13px}
.review .r-head{gap:11px}
.pd-info h1{margin-bottom:10px}
.pd-stock{gap:8px;font-size:14px;margin-bottom:20px}
.pd-buy{gap:12px;margin-top:20px}
.pd-usps{margin-top:20px;padding-top:16px;gap:8px 16px}
.pd-tabs{padding-bottom:64px}
.pd-thumbs{gap:10px;margin-top:12px}
.reviews{padding:56px 0 8px}
.footer a{font-size:14px}
.footer li{padding:4px 0}
.legal{margin-top:38px;padding-top:20px;font-size:12.5px}
/* Reference gives the categories section a shorter bottom (inline style in index.html). */
#kategorier{padding-bottom:44px}

/* The reference .btn has border:none. Keep a border for the quiet variant only,
   and make the filled variants' border match their own text colour so the
   computed border-color agrees with the reference's fallback. */
.btn{padding:12px 24px;border:none}
.btn-primary,.btn-secondary{border:none}
.btn-quiet{border:1px solid var(--line)}

/* ---- Reference reconciliation, pass 3 ---- */
.pcard .imgwrap{display:block}
.pcard .imgwrap a{display:block;width:100%;height:100%}
.pcard .pad{column-gap:normal;row-gap:normal}
.pcard .cat-tag{margin-bottom:5px}
.pcard .stock{line-height:1.6;margin-bottom:0;margin-top:7px}
.pcard .stock .dot{line-height:normal}
.pd-main{display:block}
.pd-main img{display:block}
.faq details{padding:0 20px;margin-bottom:10px}
.footer h4{line-height:1.6;margin-bottom:14px;min-height:0}
.footer a{display:inline;line-height:1.6;padding:0;column-gap:normal;row-gap:normal}
.footer a .hi{vertical-align:-2px;margin-right:4px}
.footer ul{gap:0}
.legal{margin-top:38px}
aside.fcol .fgroup > summary{padding:2px 0}

/* Reviews are a scroll-snap carousel in the reference, not a static grid. */
.reviews-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:6px;
  grid-template-columns:none}
.reviews-grid::-webkit-scrollbar{display:none}
.review{flex:0 0 calc(33.333% - 11px);scroll-snap-align:start;gap:10px}
.reviews-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.reviews-dots button{width:8px;height:8px;border-radius:var(--radius-pill);border:none;
  background:#C9D6E4;cursor:pointer;padding:0;transition:width .3s ease,background .3s ease}
.reviews-dots button.cur{width:22px;background:var(--orange)}
@media (max-width:980px){ .review{flex-basis:calc(50% - 8px)} }
@media (max-width:560px){ .review{flex-basis:82%} }

@media (max-width:760px){
  form.search{order:3;flex-basis:auto;width:calc(100% - 28px);max-width:440px;min-width:0;
    padding:11px 16px;margin:8px auto 2px}
  form.search input{font-size:16px}

  /* --- Phone search: full field on the front page, an icon everywhere else ---
     The field is a third header row, ~60px of sticky chrome on every scroll. The
     front page keeps it — searching is why people land there. Internal pages
     collapse it behind the header icon, which reveals this same form, so there is
     only ever one search UI. */
  .header--search-collapsed .search{display:none}
  .header--search-collapsed.is-search-open .search{display:flex}
  /* No `display` here: whether the button shows at all is decided once, by
     .header .search-toggle / .header--search-collapsed .search-toggle above.
     Setting it again here put the icon back on the front page too.
     44px is the tap target, pulled back with negative margin so the icon still
     sits on the same optical rhythm as the cart and burger beside it. */
  .search-toggle{align-items:center;justify-content:center;background:none;border:none;
    padding:0;color:inherit;cursor:pointer;
    width:44px;height:44px;min-height:44px;margin-inline:-10px}
  .header--search-collapsed.is-search-open .search-toggle{color:var(--navy-600)}
  .hero h1{margin:2px 0 10px}
  .hero .sub{margin-bottom:18px}
  .hero-ctas .btn{flex:1;padding:13px}
  .trust-item{font-size:13px;gap:8px}
  .chooser select{padding:14px;font-size:16px;padding-right:38px}
  .faq details{padding:0 16px}
  .legal{margin-top:30px}
}

/* ---- Reference reconciliation, pass 4 (shop + PDP) ---- */
.shop-layout{padding:0 0 72px;gap:36px}
aside.fcol .fopt{padding:5px 0;gap:10px;line-height:1.6;min-height:0}
aside.fcol .price-vals input{padding:9px 10px;line-height:normal;max-width:none;min-height:0}
.toolbar{padding:10px 14px;margin-bottom:20px;gap:14px}
.sortwrap select{padding:9px 34px 9px 12px;font-size:14px;max-width:none;min-height:0}
.fbtn{padding:9px 14px;line-height:normal;min-height:0}
.chip{line-height:normal}
.pcard .stock{font-size:12.5px;line-height:1.6}
.chooser select{padding:11px 14px;padding-right:38px}

.pd{gap:48px;padding:22px 0 64px}
@media (max-width:900px){ .pd{gap:30px} }
.pd-price{margin:6px 0 4px;gap:10px}
.pd-buy .quantity.qty .qty-btn{padding:0;width:44px;height:48px;min-height:0;font-size:20px;
  line-height:normal}
.pd-tabs details{padding:0 22px;margin-bottom:10px}
.pd-tabs .tab-body{padding:0 0 18px;font-size:14.5px;line-height:1.6;max-width:64ch}
.sticky-buy{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}

/* Pagination: match the reference control metrics (the current page is the
   navy-filled state in both). */
.woocommerce-pagination li a,.woocommerce-pagination li span{
  font-size:14.5px;line-height:1.6;padding:0 12px;display:flex}
.woocommerce-pagination li span.current{font-weight:500}

/* ---- Reference reconciliation, pass 5 ---- */
aside.fcol .fopt{font-size:14.5px}
.pcard .stock .dot{line-height:inherit}
.chooser select{padding:11px 14px}
/* WooCommerce ships nav.woocommerce-pagination ul li span.current at 0,4,2 —
   the theme rule has to exceed that or the default purple state wins. */
.hund nav.woocommerce-pagination ul li a,
.hund nav.woocommerce-pagination ul li span{
  font-size:14.5px;line-height:1.6;padding:0 12px;display:flex;font-weight:500;
  min-width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-btn);
  background:var(--surface);color:var(--ink)}
.hund nav.woocommerce-pagination ul li span.current{
  background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.hund nav.woocommerce-pagination ul li a:hover{border-color:var(--navy-400);color:var(--navy-600)}

@media (max-width:760px){
  .toolbar{padding:8px 10px}
  .pd{padding-bottom:44px}
}

/* ---- Reference reconciliation, pass 6 (mobile overrides must come last) ---- */
@media (max-width:760px){
  /* Reference metrics exactly (padding 14px, arrow at right 14px). Verified at
     360 with the longest Norwegian option label — the text ends before the arrow. */
  .chooser select{padding:14px}
}

/* ---- Reference reconciliation, pass 7 (overlay findings) ---- */
/* Reference .btn has no min-height; it measures 42px on desktop and 44px on
   mobile (where padding grows to 13px), so the touch floor is still met. */
.btn{min-height:0}
@media (max-width:760px){ .btn{min-height:44px} }
.sub-band .wrap{padding-top:34px;padding-bottom:34px}
.b2b-line .wrap{padding-top:22px;padding-bottom:22px}

/* Reference FAQ marker is a 21px "+" glyph, which gives the summary a 36px line
   box. The build uses a Lucide caret instead (icon brief), so match the height
   explicitly rather than inheriting a shorter line box. */
.faq summary{min-height:36px;line-height:1.6}
.faq summary .caret{width:21px;height:21px}

/* Reference burger is padding:8px around a 24px icon = 40px, and it sets the
   header-actions row height. Matching it costs 4px of touch target; 40px still
   clears WCAG 2.5.8 AA (24px minimum), so the reference wins here. */
.burger{min-width:0;min-height:0;padding:8px}
.haction{min-height:0}

/* Reference .header-main padding is 13px, not a ladder step.
   MUST be longhand: .header-main is also .wrap, and a `padding:13px 0` shorthand
   wipes the container's horizontal padding — the logo then started 24px left of
   the H1 below it and the cart overhung the container's right edge. */
.header-main{padding-block:13px}
@media (max-width:760px){ .header-main{padding-block:12px} }

/* Active nav item — the page you are on must be visible in the nav. */
.navitem.is-active > a{color:var(--navy-600);font-weight:600;border-bottom-color:var(--navy-600)}
.navitem.is-accent.is-active > a{color:var(--orange-deep);border-bottom-color:var(--orange)}

/* Focus-visible ring on EVERY interactive control, including the ones whose
   default outline was removed for styling (search input, selects). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--navy-600);outline-offset:2px;border-radius:4px}
form.search input:focus-visible,.chooser select:focus-visible,
.sortwrap select:focus-visible,.price-vals input:focus-visible{
  outline:2px solid var(--navy-600);outline-offset:2px}
.btn:focus-visible,.pcard a.button:focus-visible{outline-offset:3px}

/* The cart count was absolutely positioned against the whole link, so it landed
   on the last letter of "Kurv" and it read "Kur". Anchor it to the icon. */
.haction .ic-wrap{position:relative;display:inline-flex;align-items:center;line-height:0}
/* The badge has to clear BOTH the label and the icon: at right:-9px it covered
   the "v" of "Kurv", at right:-4px it sat on top of the cart glyph. Park it on
   the icon's top-right CORNER (smaller, pushed up and out) and give the icon its
   own right margin so the badge still clears the label. */
.haction .ic-wrap{margin-right:8px}
.haction .cart-badge{position:absolute;top:-8px;right:-8px;
  min-width:16px;height:16px;font-size:10px;padding:0 4px}

/* The shop toolbar sat directly under the page hero. Give the archive body the
   same breathing room the reference leaves under .shop-head. */
.shop-layout{padding-top:22px}
@media (max-width:760px){ .shop-layout{padding-top:16px} }

/* =======================================================================
   17. ACCOUNT (design/konto.html)
   ======================================================================= */
.konto-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:52px 0 72px;
  align-items:start}
.konto-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px}
.konto-box h2{font-size:22px;font-weight:700;margin-bottom:6px}
.konto-box .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px}
.f-field{margin-bottom:14px}
.f-field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
  margin-bottom:5px}
.f-field input,.f-field select{width:100%;border:1px solid var(--line);
  border-radius:var(--radius-btn);padding:12px 14px;font-family:var(--font-body);
  font-size:15px;background:var(--surface);color:var(--ink);outline:none}
.f-field input:focus,.f-field select:focus{border-color:var(--navy-400)}
.konto-box .btn{width:100%;padding:14px;font-size:15px;margin-top:6px}
.konto-box .forgot{display:block;text-align:center;font-size:13.5px;color:var(--ink-soft);
  margin-top:12px;text-decoration:underline}
.konto-box .forgot:hover{color:var(--navy-600)}
.konto-remember{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--ink-soft);margin:4px 0 10px}
.konto-remember input{accent-color:var(--navy-600);width:16px;height:16px}

.konto-switch{text-align:center;margin-bottom:20px;display:flex;justify-content:center}
.konto-switch button{background:none;border:none;font-family:var(--font-body);font-size:14px;
  font-weight:600;color:var(--ink-soft);cursor:pointer;padding:8px 16px;
  border-bottom:2px solid transparent}
.konto-switch button.cur{color:var(--navy-600);border-bottom-color:var(--orange)}
.konto-switch button:hover{color:var(--navy-600)}
.konto-pane[hidden]{display:none}
.b2b-pane .note{font-size:13px;color:var(--ink-soft);margin-bottom:14px;padding:12px;
  background:var(--navy-tint);border-radius:8px}

/* B2BKing prints its own field markup — pull it onto the theme's form tokens. */
.b2b-pane label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);
  margin-bottom:5px}
.b2b-pane input[type=text],.b2b-pane input[type=email],.b2b-pane input[type=tel],
.b2b-pane input[type=password],.b2b-pane input[type=number],.b2b-pane select,
.b2b-pane textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:12px 14px;font-family:var(--font-body);font-size:15px;background:var(--surface);
  color:var(--ink);outline:none;margin-bottom:14px}
.b2b-pane input:focus,.b2b-pane select:focus,.b2b-pane textarea:focus{border-color:var(--navy-400)}
.b2b-pane button[type=submit],.b2b-pane input[type=submit],.b2b-pane .button{
  width:100%;padding:14px;font-size:15px;font-weight:600;font-family:var(--font-body);
  background:var(--orange);color:var(--navy-950);border:none;border-radius:var(--radius-btn);
  cursor:pointer;min-height:44px}
.b2b-pane button[type=submit]:hover,.b2b-pane .button:hover{background:#E05609}

/* Logged-in account area */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{font-family:var(--font-display);
  font-size:var(--h3);margin-bottom:var(--space-3)}
.woocommerce-account .woocommerce-MyAccount-content p{color:var(--ink-soft);
  font-size:var(--text-meta)}
.woocommerce-account .woocommerce-MyAccount-content p + p{margin-top:var(--space-4)}
.woocommerce-account .woocommerce-MyAccount-content a{color:var(--navy-600)}

@media (max-width:900px){ .konto-grid{grid-template-columns:1fr} }
@media (max-width:760px){ .konto-grid{padding:40px 0 56px} .konto-box{padding:22px} }

/* B2BKing wraps its registration in its own bordered card; inside our card that
   reads as a box in a box. Flatten it. */
.b2b-pane .b2bking_registration_form_container,
.b2b-pane form,
.b2b-pane .woocommerce-form-register{border:none!important;background:transparent!important;
  padding:0!important;margin:0!important;box-shadow:none!important;max-width:none!important}
.b2b-pane h2,.b2b-pane h3{font-family:var(--font-display);font-size:var(--h4);
  margin:0 0 var(--space-3)}
.b2b-pane .woocommerce-privacy-policy-text p{font-size:var(--text-sm);color:var(--ink-soft)}

/* B2BKing wraps the registration form in its own bordered panel; inside the
   .konto-box that reads as a card in a card. Flatten every nesting level. */
.konto-box form,
.konto-box .woocommerce-form-register,
.konto-box .b2bking_registration_form_container,
.konto-box .b2bking_registration_wrapper{border:none!important;background:transparent!important;
  padding:0!important;margin:0!important;box-shadow:none!important;max-width:none!important}
.konto-box .note{font-size:13px;color:var(--ink-soft);margin:0 0 18px;padding:12px;
  background:var(--navy-tint);border-radius:8px;line-height:1.55}
/* B2BKing's own fields onto the theme's form tokens */
.konto-box .woocommerce-form-register label,
.konto-box p.form-row > label{display:block;font-size:13px;font-weight:600;
  color:var(--ink-soft);margin-bottom:5px}
.konto-box input[type=text],.konto-box input[type=email],.konto-box input[type=tel],
.konto-box input[type=password],.konto-box input[type=number],.konto-box select,
.konto-box textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:12px 14px;font-family:var(--font-body);font-size:15px;background:var(--surface);
  color:var(--ink);outline:none;margin-bottom:14px}
.konto-box input:focus,.konto-box select:focus,.konto-box textarea:focus{border-color:var(--navy-400)}
.konto-box .woocommerce-privacy-policy-text p{font-size:var(--text-sm);color:var(--ink-soft);
  margin-bottom:var(--space-3)}

/* =======================================================================
   18. DESIGNER-REVIEW FIXES
   ======================================================================= */

/* F12/F2 class of bug: a padding SHORTHAND on an element that is also .wrap
   wipes the container gutter. Keep every such rule on padding-block. */
.section{padding-block:var(--section-y)}
.hund-page{padding-block:var(--section-y)}

/* F4 — cards in a row sheared by 8px because the image box took its height from
   the image. Lock the media box so every card's title, price and CTA share a
   baseline. */
.pcard .imgwrap{aspect-ratio:1/1;height:auto;overflow:hidden}
.pcard .imgwrap img{width:100%;height:100%;object-fit:contain}
.prod-grid,.related ul.products,.up-sells ul.products,.woocommerce ul.products{
  grid-auto-rows:1fr}
.pcard{height:100%}
.pcard .pad{flex:1}
.pcard .btn,.pcard a.button,.pcard button.button{margin-top:auto}

/* F25/F13 — one orange primary per screen. The hero's food-finder is a tool
   inside a supporting card, so it takes the navy action style. */
.chooser .btn-primary{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.chooser .btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
/* F14 — the filter-apply button must not be the loudest control on the shop. */
.filters .apply{background:var(--surface);color:var(--navy-600);border:1px solid var(--line)}
.filters .apply:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff}

/* F16 — the eyebrow belongs to the H1, so it must sit closer to it than to the
   breadcrumb above. */
.page-hero .crumbs{margin-bottom:var(--space-6);padding-top:0}
.page-hero .eyebrow{margin-bottom:var(--space-3)}

/* F20 — body copy measure. */
.pd-tabs .tab-body p,.sub-band p,.hund-page.is-doc p,.article p{max-width:68ch}

/* F26 — section header link belongs on the H2 baseline, not an orphan row. */
.head-row{align-items:baseline}
.head-row .section-head{flex:1 1 auto}
.head-row .text-link{flex:0 0 auto}

/* F27 — button optically centred against the text block, not the band. */
.sub-band .wrap{align-items:center}

/* F29 — footer columns 2-4 equal so the last column reaches the container edge. */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}

/* F21 — account cards start on one line and do not both shout. */
.konto-grid{align-items:start}
.konto-box .btn-primary{background:var(--orange)}
.konto-box + .konto-box .btn-primary{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.konto-box + .konto-box .btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800)}

/* F7 — an empty cart is one centred block, not two columns of nothing. */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message{max-width:460px;margin-inline:auto;text-align:center}
.woocommerce-cart .return-to-shop{text-align:center;margin-top:var(--space-5)}
.woocommerce-cart .hund-page:has(.cart-empty),
.woocommerce-cart .hund-page:has(.wc-empty-cart-message){display:block}

/* F8 — the sticky buy bar must not sit on top of the inline add-to-cart. */
@media (max-width:760px){
  /* Tracks the bar: its own height plus whatever bottom allowance the browser
     gets (§25.2). A flat number here outranked the generic body rule and left the
     reserve short as soon as the bar grew. */
  body.single-product{padding-bottom:calc(72px + var(--buy-pad-bottom))}
  .sticky-buy{transform:translateY(100%);transition:transform .25s ease}
  body.sticky-buy-on .sticky-buy{transform:translateY(0)}
}

/* F5/F22 — on the reseller page the registration submit is the primary action;
   the plugin's own form heading is suppressed so it does not stack under ours. */
.cform-title{margin-bottom:var(--space-4)}
.cform form h2,.cform form h3,.cform .b2bking_registration_form_container > h2{display:none}
.cform button[type=submit],.cform input[type=submit],.cform .button{
  background:var(--orange);color:var(--navy-950);border:none;width:100%;
  padding:14px;font-size:15px;font-weight:600;border-radius:var(--radius-btn);
  font-family:var(--font-body);cursor:pointer;min-height:44px}
.cform button[type=submit]:hover,.cform .button:hover{background:#E05609}
.cform form,.cform .b2bking_registration_form_container{border:none!important;
  background:transparent!important;padding:0!important;margin:0!important;box-shadow:none!important}

/* Corrections to the review fixes themselves */
/* .ic-wrap{line-height:0} was inherited by the badge and flattened its glyph. */
.haction .cart-badge{line-height:1.1}
/* F29's column ratio must not outrank the responsive collapse below 1020. */
@media (min-width:1021px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
@media (max-width:1020px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr} }

/* =======================================================================
   19. CLIENT-REVIEW ROUND
   ======================================================================= */

/* Qty control and add-to-cart on one baseline with real separation between them. */
.pd-buy{align-items:stretch;gap:var(--space-4)}
.pd-buy .quantity.qty{height:52px;align-self:center}
.pd-buy .quantity.qty .qty-btn{height:50px}
.pd-buy .quantity.qty input.qty{height:50px}
.pd-buy .single_add_to_cart_button{height:52px;align-self:center;min-height:52px}
@media (max-width:760px){
  .pd-buy{gap:var(--space-3)}
  .pd-buy .single_add_to_cart_button{flex:1 1 100%}
}

/* Gallery prev / next */
.pd-main{position:relative}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s,background .15s}
.pd-main:hover .pd-nav,.pd-nav:focus-visible{opacity:1}
.pd-nav:hover{background:#fff;color:var(--navy-600)}
.pd-prev{left:var(--space-3)}
.pd-next{right:var(--space-3)}
@media (hover:none){ .pd-nav{opacity:1} }

/* Pagination: WooCommerce draws a grey box around the whole ul and a divider on
   every li. Both have to go or the control sits inside a stray grey frame. */
.hund nav.woocommerce-pagination ul,
.hund nav.woocommerce-pagination ul li{border:none!important;background:none!important}
.hund nav.woocommerce-pagination{border:none}

/* "Vis alle" toggle on long facet lists */
.fmore{background:none;border:none;padding:var(--space-2) 0;margin-top:var(--space-1);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;
  color:var(--navy-600);cursor:pointer;text-align:left}
.fmore:hover{text-decoration:underline}

/* Footer: the UA list indent pushed every menu item 48px right of its own
   column heading. Heading and items must share one left edge. */
.footer ul{padding-left:0;margin-left:0;list-style:none}
.footer li{margin-left:0}
.footer-grid > div > *{margin-left:0}

/* Instant search dropdown */
form.search{position:relative}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);
  padding:var(--space-2);z-index:80;max-height:min(70vh,460px);overflow-y:auto}
.suggest-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);
  border-radius:8px;color:var(--ink)}
.suggest-item:hover,.suggest-item.cur{background:var(--navy-tint)}
.suggest-item img{width:44px;height:44px;object-fit:contain;background:var(--prod-bg);
  border:1px solid var(--line);border-radius:6px;flex-shrink:0}
.suggest .s-body{display:flex;flex-direction:column;min-width:0}
.suggest .s-title{font-size:var(--text-meta);font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest .s-meta{font-size:var(--text-xs);color:var(--ink-soft);margin-top:2px}
.suggest-all{display:block;text-align:center;padding:var(--space-3);margin-top:var(--space-1);
  border-top:1px solid var(--line);font-size:var(--text-sm);font-weight:600;color:var(--navy-600)}
.suggest-all:hover,.suggest-all.cur{background:var(--navy-tint)}
.suggest-empty{padding:var(--space-4);text-align:center;font-size:var(--text-meta);
  color:var(--ink-soft)}

/* USP promises: one row on desktop, rotating only on mobile where they cannot fit */
@media (min-width:761px){
  .trust-track{height:auto;display:flex;align-items:center;justify-content:center;
    gap:var(--space-6);flex-wrap:nowrap;padding:14px 0}
  .trust-item{position:static;inset:auto;opacity:1;transform:none;pointer-events:auto;
    white-space:nowrap}
}

/* The login form's children could overlap (the "Glemt passord?" link sat on top
   of the submit button). Make the form an explicit flow container with a gap so
   nothing can stack on anything else. */
.konto-box form{display:flex;flex-direction:column;gap:0}
.konto-box form > *{flex:0 0 auto}
.konto-box .btn{margin-top:6px;margin-bottom:0}
.konto-box .forgot{margin-top:12px;position:static}
.konto-remember{order:0}

/* =======================================================================
   20. DESIGNER PASS 2
   ======================================================================= */

/* G1/G9 — product photography is portrait packaging; a cover-crop slices the
   pack and leaves a seam from the next bag. Contain it on its own plate. */
.cat-hero .hero-media{aspect-ratio:16/9;background:var(--prod-bg)}
.cat-hero .hero-media img{object-fit:contain;padding:24px}
.about-grid .hero-media img{object-fit:contain;padding:24px}

/* G2 — the accordion was centred at 820px while every other block on the PDP
   starts at the container edge, so it read as a dropped-in element. */
.pd-tabs{margin-inline:0;max-width:820px}

/* G12 — trust items span the container instead of floating in the middle. */
@media (min-width:761px){
  .trust-track{justify-content:space-between;gap:var(--space-4)}
}

/* G14 — the stepper and the CTA stepped by 3px and sat 3px apart. */
.pd-buy{align-items:center;gap:var(--space-3)}
.pd-buy .quantity.qty,.pd-buy .single_add_to_cart_button{align-self:center;margin:0}

/* G16 — accordion body measure. */
.pd-tabs .tab-body{max-width:62ch}

/* G17 — a 2-line clamp cut the differentiator off long Norwegian product names. */
.pcard .name{-webkit-line-clamp:3;line-clamp:3;
  min-height:calc(var(--text-meta) * 1.4 * 3)}

/* G18 — cards sat optically high because the last child kept its bottom margin. */
.icard > *:last-child,.konto-box > *:last-child,.cat-tile > *:last-child{margin-bottom:0}
.sub-band .wrap > div > *:last-child{margin-bottom:0}

/* G19 — the empty cart is one card, not a notice plus an orphan button. */
.woocommerce-cart .cart-empty{border-top:1px solid var(--line);background:var(--surface);
  padding:var(--space-7) var(--space-5) var(--space-4);margin-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0}
.woocommerce-cart .return-to-shop{background:var(--surface);border:1px solid var(--line);
  border-top:none;border-radius:0 0 var(--radius) var(--radius);
  padding:0 var(--space-5) var(--space-7);max-width:460px;margin:0 auto}

/* G21/G22 — grid gutter and a real gap between the filter column and the grid. */
.prod-grid,.related ul.products,.up-sells ul.products,.woocommerce ul.products{
  gap:var(--space-5)}
.shop-layout{gap:var(--space-7)}
@media (max-width:760px){
  .prod-grid,.woocommerce ul.products{gap:var(--space-3)}
}

/* G8 — required marker and placeholder off-palette. */
.konto-box .required,.konto-box abbr[title],.cform .required{color:var(--ink-soft);
  text-decoration:none;border:none}
/* one filled orange per screen: login is the returning-customer path */
.konto-box + .konto-box .btn-primary{background:var(--orange);color:var(--navy-950);
  border-color:var(--orange)}
.konto-box:first-child .btn-primary{background:var(--navy-600);color:#fff;border-color:var(--navy-600)}
.konto-box:first-child .btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800)}

/* G11 — stars are decoration, not a call to action. */
.stars{color:#E8A33D}
.reviews-dots button.cur{background:var(--navy-600)}

/* G4 — WooCommerce's own register legend under our card title. */
.konto-box .woocommerce-form-register > h2,
.cform .woocommerce-form-register > h2,
.cform form > h2:first-child{display:none}

/* Category hero: a clickable "most relevant" product instead of a decorative
   crop that could be an unrelated grooming tool. */
.cat-hero .hero-pick{display:flex;flex-direction:column;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;color:var(--ink);transition:border-color .15s,box-shadow .15s;
  aspect-ratio:auto}
.cat-hero .hero-pick:hover{border-color:var(--navy-400);box-shadow:var(--shadow-card)}
.cat-hero .hero-pick img{width:100%;height:240px;object-fit:contain;padding:16px;
  background:var(--prod-bg)}
.hero-pick-label{position:absolute;top:12px;left:12px;z-index:2;background:var(--navy-tint);
  color:var(--navy-600);font-size:var(--text-xs);font-weight:600;padding:3px 9px;
  border-radius:var(--radius-pill)}
.hero-pick-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;
  border-top:1px solid var(--line)}
.hero-pick-name{font-size:var(--text-meta);font-weight:500;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-pick-price{font-family:var(--font-display);font-weight:700;font-size:var(--price-size)}

/* The designer flagged the grid as "loose vertically, tight horizontally" — that
   was gap ASYMMETRY (16px column vs 23px row) from an earlier clamp, not the
   size itself. One symmetric token satisfies both the finding and the reference,
   so the reference's 18px (10px mobile) stands. */
.prod-grid,.related ul.products,.up-sells ul.products,.woocommerce ul.products{
  gap:var(--gap-grid)}
/* Reference measure is 64ch, comfortably inside the 45-75 character band. */
.pd-tabs .tab-body{max-width:64ch}

/* =======================================================================
   21. COOKIE CONSENT
   ======================================================================= */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:var(--shadow-sheet)}
.cc[hidden]{display:none}
.cc-body{max-width:var(--maxw);margin:0 auto;padding:var(--space-4) var(--gutter)
  calc(var(--space-4) + env(safe-area-inset-bottom));display:flex;align-items:center;
  gap:var(--space-5);flex-wrap:wrap}
.cc-text{font-size:var(--text-meta);color:var(--ink-soft);flex:1 1 320px;margin:0;
  max-width:70ch}
.cc-text a{color:var(--navy-600);text-decoration:underline}
.cc-choices{display:flex;gap:var(--space-4);flex-wrap:wrap;flex:1 1 100%;
  padding-top:var(--space-2)}
.cc-opt{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-meta)}
.cc-opt input{accent-color:var(--navy-600);width:16px;height:16px}
.cc-opt span{color:var(--ink-soft);font-size:var(--text-sm)}
.cc-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;flex-shrink:0}
.cc-actions .btn{padding:10px var(--space-4);font-size:var(--text-meta);min-height:44px}
@media (max-width:760px){
  .cc-body{gap:var(--space-3)}
  .cc-actions{width:100%}
  .cc-actions .btn{flex:1}
}

/* Omnibus 30-day lowest price (prisopplysningsforskriften § 9a) */
.omnibus{font-size:var(--text-sm);color:var(--ink-soft);margin:calc(var(--space-2)*-1) 0 var(--space-3)}
.omnibus strong{color:var(--ink)}
.omnibus--unknown{font-style:italic}

/* Filters auto-apply; show that something is happening while the page swaps. */
form.filters.is-applying{opacity:.55;pointer-events:none;transition:opacity .15s}
form.filters .apply[hidden]{display:none}

/* =======================================================================
   22. CART — corrected
   The wrapper is .hund-page > .woocommerce(display:contents) > [notices, form,
   collaterals]. The notices block was taking the first grid cell, pushing the
   form into the 380px column and the totals onto a second row. The totals class
   is .cart-collaterals with a HYPHEN — the earlier rule used an underscore and
   never matched.
   ======================================================================= */
.woocommerce-cart .hund-page{display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:var(--gap-col);align-items:start}
.woocommerce-cart .hund-page > .woocommerce{display:contents}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1 / -1}
.woocommerce-cart form.woocommerce-cart-form{grid-column:1;min-width:0}
.woocommerce-cart .cart-collaterals{grid-column:2;min-width:0;width:100%;float:none;
  position:sticky;top:var(--sticky-top)}
.woocommerce-cart .cart-collaterals .cart_totals{width:100%;float:none}

/* line items */
.woocommerce-cart table.shop_table{border-collapse:separate;border-spacing:0}
.woocommerce-cart table.cart th{white-space:nowrap}
.woocommerce-cart table.cart td.product-thumbnail{width:88px}
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart table.cart img{width:72px!important;height:72px!important;
  max-width:none;object-fit:contain;background:var(--prod-bg);
  border:1px solid var(--line);border-radius:var(--radius-btn);padding:4px;display:block}
.woocommerce-cart td.product-name{min-width:0}
.woocommerce-cart td.product-name a{font-weight:500;font-size:var(--text-meta);
  color:var(--ink);display:block;line-height:1.4}
.woocommerce-cart td.product-name a:hover{color:var(--navy-600)}
.woocommerce-cart td.product-price,.woocommerce-cart td.product-subtotal{white-space:nowrap}
.woocommerce-cart td.product-subtotal{font-weight:600}
.woocommerce-cart td.product-quantity .quantity{display:inline-flex;align-items:center}
.woocommerce-cart td.product-quantity input.qty{width:64px}
.woocommerce-cart td.actions{padding:var(--space-4)}
.woocommerce-cart td.actions .coupon{display:flex;gap:var(--space-2);flex-wrap:wrap;
  align-items:center}
.woocommerce-cart td.actions .coupon label{display:none}
.woocommerce-cart td.actions .coupon input#coupon_code{flex:1 1 180px;min-height:44px}
.woocommerce-cart td.actions > button[name="update_cart"]{float:right}

/* totals panel */
.woocommerce-cart .cart_totals h2{font-family:var(--font-display);font-size:var(--h3);
  margin-bottom:var(--space-4)}
.woocommerce-cart .cart_totals table{border:none;background:none}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{padding:var(--space-3) 0;border-bottom:1px solid var(--line);
  text-transform:none;letter-spacing:0;font-size:var(--text-meta);color:var(--ink)}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td{font-family:var(--font-display);
  font-size:var(--text-lead);border-bottom:none;padding-top:var(--space-4)}
.woocommerce-cart .wc-proceed-to-checkout{padding:var(--space-4) 0 0}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{width:100%;margin:0}
.woocommerce-cart .shipping-calculator-button{font-size:var(--text-sm);color:var(--navy-600)}

@media (max-width:1020px){
  .woocommerce-cart .hund-page{grid-template-columns:1fr}
  .woocommerce-cart form.woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{grid-column:1}
  .woocommerce-cart .cart-collaterals{position:static}
}
@media (max-width:760px){
  .woocommerce-cart table.cart img{width:56px!important;height:56px!important}
  .woocommerce-cart td.actions > button[name="update_cart"]{float:none;width:100%;
    margin-top:var(--space-2)}
}

/* Header search submit — the icon was the whole hit area (16x16). The icon still
   sits where the design puts it; the button grows around it to a real tap target. */
.header .search button[type=submit]{width:44px;height:44px;min-width:44px;padding:0;
  display:grid;place-items:center;margin-left:-6px}

/* =======================================================================
   23. TAP TARGETS — phone
   A control a thumb has to hit is 44px. These three were 36-40px, which is
   inside the range where a mis-tap is common rather than rare.
   ======================================================================= */
@media (max-width:1020px){
  .fbtn{min-height:44px;padding-block:0;display:inline-flex;align-items:center;
    gap:var(--space-2)}
  .fmore{min-height:44px;display:flex;align-items:center;justify-content:center}
  .burger{width:44px;height:44px}
}

/* Chromium paints a grey block over a tapped button for ~300ms. On the burger and
   the icon buttons that reads as a rendering fault, not as feedback. */
.burger,.iconbtn,.haction,.qty-btn,.fbtn{-webkit-tap-highlight-color:transparent}

/* =======================================================================
   24. CART — phone
   WooCommerce's responsive fallback stacks the row into "Produkt: … Pris: …
   Antall: …" and hides the thumbnail entirely, which reads as an unfinished
   page. Rebuild the row as a card: picture, name, price, then quantity and
   line total on their own row.
   ======================================================================= */
@media (max-width:760px){
  .woocommerce-cart table.shop_table_responsive thead{display:none}
  .woocommerce-cart table.shop_table_responsive,
  .woocommerce-cart table.shop_table_responsive tbody{display:block;border:none}

  .woocommerce-cart table.cart tr.cart_item{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 32px;
    grid-template-areas:
      "thumb name   remove"
      "thumb price  price"
      "qty   sub    sub";
    gap:var(--space-2) var(--space-3);
    align-items:center;
    padding:var(--space-4);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    background:#fff;
    margin-bottom:var(--space-3)}

  /* the data-title prefixes belong to the stacked fallback we just replaced */
  .woocommerce-cart table.shop_table_responsive tr.cart_item td::before{content:none}

  .woocommerce-cart table.cart tr.cart_item td{
    display:block;border:none;padding:0;text-align:left;width:auto}

  .woocommerce-cart td.product-thumbnail{grid-area:thumb;display:block!important}
  .woocommerce-cart td.product-name{grid-area:name}
  .woocommerce-cart td.product-price{grid-area:price;color:var(--ink-soft);
    font-size:var(--text-sm)}
  .woocommerce-cart td.product-quantity{grid-area:qty}
  .woocommerce-cart td.product-subtotal{grid-area:sub;text-align:right;
    font-family:var(--font-display);font-size:var(--text-lead)}
  .woocommerce-cart td.product-remove{grid-area:remove;text-align:right}

  .woocommerce-cart td.product-quantity input.qty{width:100%;min-height:44px}
  .woocommerce-cart td.product-name a{font-size:var(--text-meta);line-height:1.35}

  /* the actions row is not a product card */
  .woocommerce-cart table.cart tr:not(.cart_item) td.actions{
    display:block;padding:var(--space-4) 0 0;border:none}
}

/* Chromium decorates input[type=search] with its own clear "x". It is a UA glyph,
   it sits outside the icon system, and it appears only in one browser — so the
   search field looks different on Chrome than everywhere else. */
.header .search input[type=search]::-webkit-search-cancel-button,
.header .search input[type=search]::-webkit-search-decoration{-webkit-appearance:none;
  appearance:none;display:none}

/* woocommerce-smallscreen.css ships
     .woocommerce table.shop_table_responsive tr td{text-align:right!important}
   because in ITS layout the data-title label floats left and the value sits
   opposite it. We replaced that layout with a card, so the right alignment only
   makes the product name read from the wrong edge. An `!important` in vendor CSS
   cannot be outranked by specificity — `!important` is the only answer, and this
   is the one place in the stylesheet that needs it. */
@media (max-width:760px){
  .woocommerce-cart table.shop_table_responsive tr.cart_item td,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-name,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price{
    text-align:left!important}
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal,
  .woocommerce-cart table.shop_table_responsive tr.cart_item td.product-remove{
    text-align:right!important}
}

/* The cart, account and checkout heroes carry a heading and nothing else, so the
   section's full editorial padding leaves a large empty band before the content
   the visitor actually came for. */
.woocommerce-cart .page-hero,
.woocommerce-checkout .page-hero,
.woocommerce-account .page-hero{padding-block:var(--space-6)}
/* …and the section below it does not need a full editorial gap either, because
   the hero above carries a heading and nothing else. */
.woocommerce-cart .hund-page,
.woocommerce-checkout .hund-page{padding-top:var(--space-6)}
.woocommerce-cart .page-hero .lead,
.woocommerce-checkout .page-hero .lead{margin-bottom:0}

/* WooCommerce paints a chevron on the shipping-calculator link with a private-use
   codepoint in its own icon font. It is not Lucide, and when that font is slow or
   blocked the browser draws the tofu box instead of an arrow. Replace it with the
   same inline Lucide chevron the accordions use. */
.woocommerce-cart .cart-collaterals .shipping-calculator-button::after{content:none}
.woocommerce-cart .cart-collaterals .shipping-calculator-button{display:inline-flex;
  align-items:center;gap:var(--space-1)}
.woocommerce-cart .cart-collaterals .shipping-calculator-button::before{
  content:"";width:16px;height:16px;flex:0 0 16px;background-color:currentColor;
  -webkit-mask:var(--ic-chevron-down) center/16px no-repeat;
  mask:var(--ic-chevron-down) center/16px no-repeat;
  transition:transform .18s ease}
.woocommerce-cart .cart-collaterals .shipping-calculator-button[aria-expanded="true"]::before{
  transform:rotate(180deg)}

/* woocommerce-layout.css zebra-stripes alternate cart rows with a 2.4% black wash.
   In its own table that reads as a row; inside our phone card it paints only the
   cells that carry content, so a card comes out with grey bands across part of it
   and white elsewhere. The card border already separates the rows. */
@media (max-width:760px){
  .woocommerce-cart table.cart tr.cart_item td{background:transparent!important}
  .woocommerce-cart table.cart tr.cart_item{background:#fff!important}
}

/* Same zebra wash on the totals table. Nothing else in that panel is striped, so
   one shaded row reads as a highlight the design never intended. */
.woocommerce-cart .cart_totals table tr,
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{background:transparent!important}

/* =======================================================================
   25. MOBILE UX PASS
   ======================================================================= */

/* --- 25.1 Header search: icon inside the field ---------------------------
   The submit button was a flex sibling, so on a 390px screen it took 44px plus
   a 24px gap out of a 330px field — 68px of the row spent on an icon, leaving
   the placeholder 248px. Float the icon inside the field instead and give the
   input the whole width back. */
@media (max-width:1020px){
  .header .search{position:relative;gap:0;padding-left:var(--space-3)}
  .header .search button[type=submit]{position:absolute;left:2px;top:50%;
    transform:translateY(-50%);width:40px;height:40px;min-width:40px;margin:0;
    display:grid;place-items:center;color:var(--ink-soft)}
  .header .search input[type=search]{padding-left:38px;width:100%}
}

/* --- 25.2 Sticky buy bar ------------------------------------------------
   iOS reserves the bottom edge for the home-indicator swipe. A bar that puts a
   tappable control in that strip fights the gesture, so the safe-area inset is
   real padding under the button, not decoration.

   The inset alone is not enough, though: Chrome on iPhone draws its own toolbar
   over the layout viewport and reports `safe-area-inset-bottom: 0` while it does,
   so a bar padded only by the inset gets clipped along its bottom edge. `max()`
   gives a floor that does not depend on the browser admitting the strip exists —
   24px on Chrome, and the real inset plus 10px on Safari, whichever is larger. */
:root{ --buy-pad-bottom:max(24px, calc(10px + env(safe-area-inset-bottom,0px))) }
.sticky-buy{padding:10px var(--space-4) var(--buy-pad-bottom);
  box-shadow:0 -1px 0 var(--line), 0 -8px 24px rgba(19,24,31,.06);
  gap:var(--space-3)}
.sticky-buy .btn{min-height:44px;padding-inline:var(--space-4)}
/* The reserve belongs ONLY where the bar exists — `.sticky-buy` is display:flex
   under 760px on product pages and nowhere else. As a blanket `body` rule under
   1020px it put 120px of dead space under the footer of every phone page: cart,
   checkout, account, blog, the lot. See body.single-product in §F8, which is the
   one place that needs it. */

/* --- 25.1b The chooser answers to itself ---------------------------------
   A disabled answer is one the catalogue cannot deliver alongside what is already
   chosen. It stays in the list, greyed, so the customer learns the range rather
   than watching options disappear. */
.chooser select option:disabled{color:var(--ink-soft)}
.chooser-status{margin:var(--space-2) 0 0;font-size:var(--text-meta);color:var(--ink-soft);
  min-height:1.2em}
/* A column, not a row: `.chooser .btn` is width:100% by design, so a row would
   either overflow or shrink the primary action. The reset sits under it and only
   exists once something is chosen. */
.chooser-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.chooser-reset{display:inline-flex;align-items:center;gap:var(--space-1);background:none;
  border:none;padding:0 var(--space-2);cursor:pointer;color:var(--ink-soft);
  font-size:var(--text-meta);font-family:inherit;
  min-height:44px}   /* a text button is still a tap target */
.chooser-reset:hover{color:var(--navy-600)}
.chooser button[type=submit]:disabled{opacity:.5;cursor:not-allowed}

/* --- 25.2a Dead-end filter options and the empty state -------------------
   A greyed option still tells the customer the value exists in this category and
   that their other choices exclude it. Removing it would just look like a shorter
   list. The strike keeps it legible at a glance without shouting. */
.fopt.is-off{opacity:.42;cursor:not-allowed}
.fopt.is-off input{cursor:not-allowed}
.fopt.is-off span:first-of-type{text-decoration:line-through;text-decoration-thickness:1px}

.no-hits{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.no-hits p{margin:0}
.no-hits-routes{list-style:none;margin:0;padding:0;width:100%;
  display:flex;flex-direction:column;gap:var(--space-2)}
.no-hits-routes li{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-btn)}
.no-hits-routes .n{color:var(--ink-soft);font-size:var(--text-meta);white-space:nowrap}

/* --- 25.2b One allowed country: no country control anywhere --------------
   The selects stay in the DOM so their value still posts and WooCommerce's own
   validation and country_to_state logic are untouched — only the row is gone.
   `body.single-country` is set from WC()->countries->get_allowed_countries(), so
   adding a second country brings every one of these back with no CSS change. */
body.single-country #billing_country_field,
body.single-country #shipping_country_field,
body.single-country #calc_shipping_country_field,
body.single-country .woocommerce-shipping-calculator #calc_shipping_country_field{
  display:none}

/* --- 25.3 Product gallery arrows ---------------------------------------
   Swipe now moves the gallery on touch, so the arrows are a secondary path and
   do not need to be the biggest thing on the image. */
@media (max-width:760px){
  /* The base .pd-nav pads 10px 20px; with border-box the box can never be
     narrower than that padding, which is why setting width alone left it at 42px. */
  .pd-nav{width:32px;height:32px;padding:0;display:grid;place-items:center;
    background:rgba(255,255,255,.86);box-shadow:0 1px 3px rgba(19,24,31,.12)}
  .pd-nav svg{width:16px;height:16px}
  .pd-prev{left:var(--space-2)}
  .pd-next{right:var(--space-2)}
}

/* =======================================================================
   26. CART — brought into the theme's own language
   The page was still reading as a WooCommerce table with our colours painted
   on: hard grid lines, three competing orange buttons, and a dead grey one.
   Everything below is the same card / token vocabulary the rest of the site
   uses, and a single primary action.
   ======================================================================= */

/* --- 26.1 One primary action ------------------------------------------
   "Fortsett til kassen" is the only orange button on this page. Applying a
   coupon and updating quantities are housekeeping, not the checkout, and
   dressing them in the checkout colour is what made people click the wrong
   one. */
.woocommerce-cart td.actions button[name="apply_coupon"],
.woocommerce-cart td.actions .button:not([name="update_cart"]){
  background:var(--surface);color:var(--navy-600);
  border:1px solid var(--line);box-shadow:none;font-weight:600}
.woocommerce-cart td.actions button[name="apply_coupon"]:hover,
.woocommerce-cart td.actions .button:not([name="update_cart"]):hover{
  border-color:var(--navy-600);background:var(--bg)}

/* --- 26.2 The update button appears only when there is something to update.
   hund.js adds .has-changes to the form the moment a quantity differs from the
   one the page loaded with. */
/* woocommerce-smallscreen.css hides this behind an ID:
     .woocommerce #content table.cart td.actions .button{display:block;width:100%}
   GeneratePress happens to name its wrapper `#content`, so that arm of the selector
   matches and carries an ID. No number of classes can outrank an ID, and copying
   `#content` into the child theme would tie this rule to GeneratePress's markup.
   `!important` is the correct tool here, not laziness — verified with
   CSS.getMatchedStylesForNode rather than guessed. */
.woocommerce-cart table.cart td.actions .button[name="update_cart"]{display:none!important}
.woocommerce-cart form.has-changes table.cart td.actions .button[name="update_cart"]{
  display:inline-flex!important;align-items:center;justify-content:center;
  background:var(--navy-600);color:#fff;border-color:var(--navy-600);
  width:auto;opacity:1;cursor:pointer}

/* --- 26.3 The coupon is its own quiet card, clearly separate from the
   totals panel it used to crowd. */
.woocommerce-cart td.actions{
  padding:var(--space-5);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-card);
  margin-top:var(--space-5)}
.woocommerce-cart td.actions .coupon{gap:var(--space-3)}

/* Above the phone breakpoint "Bruk rabattkode" and "Oppdater handlekurv" share
   one line. They did not before: `.coupon::before` renders the "Har du en
   rabattkode?" heading as a full-width flex item, so the coupon's own controls
   start ~33px below the top-floated update button and the two buttons read as
   two rows.

   Two approaches were measured and rejected. Making td.actions a flex row drops
   the cell out of table layout — it collapsed from 724px to 255px and everything
   stacked. Un-floating .coupon does not take either: WooCommerce's rule arrives
   through GeneratePress's `#content` wrapper and an ID outranks any class
   selector here. So the button is pinned to the cell's bottom-right padding
   edge, which is exactly where the coupon's own button ends, regardless of how
   tall the heading renders. Verified with getBoundingClientRect at 1440/1280/800,
   not by eye. */
@media (min-width:761px){
  .woocommerce-cart td.actions{position:relative}
  /* right/bottom mirror the cell's own padding — `.woocommerce table.cart
     .actions` sets it to --space-4 and outranks the --space-5 rule below, so the
     button lands exactly on the coupon button's bottom edge, not 8px above it. */
  .woocommerce-cart form.has-changes table.cart td.actions .button[name="update_cart"]{
    position:absolute;right:var(--space-4);bottom:var(--space-4);float:none;margin:0}
}

.woocommerce-cart td.actions .coupon::before{
  content:"Har du en rabattkode?";display:block;width:100%;
  font-size:var(--text-sm);font-weight:600;color:var(--ink-soft);
  margin-bottom:var(--space-1)}
.woocommerce-cart td.actions input#coupon_code{
  border:1px solid var(--line);border-radius:var(--radius-btn);
  background:var(--surface);padding:0 var(--space-4)}

/* --- 26.4 Line items: cards, not a ruled table -------------------------- */
.woocommerce-cart table.cart{border:none;background:none}
.woocommerce-cart table.cart thead th{
  background:none;border:none;border-bottom:1px solid var(--line);
  padding:0 var(--space-3) var(--space-3);
  font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.woocommerce-cart table.cart tr.cart_item td{
  border:none;border-bottom:1px solid var(--line);
  padding:var(--space-4) var(--space-3);vertical-align:middle;background:transparent}
.woocommerce-cart table.cart tr.cart_item:last-of-type td{border-bottom:none}
.woocommerce-cart td.product-remove a.remove{
  width:28px;height:28px;line-height:28px;font-size:18px;
  color:var(--ink-soft)!important;background:transparent!important;border-radius:50%}
.woocommerce-cart td.product-remove a.remove:hover{
  color:var(--ink)!important;background:var(--bg)!important}
.woocommerce-cart td.product-quantity input.qty{
  border:1px solid var(--line);border-radius:var(--radius-btn);min-height:44px;
  text-align:center}

/* --- 26.5 Totals panel: same card as everything else -------------------- */
.woocommerce-cart .cart_totals{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--space-5)}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td{border-top:1px solid var(--line)}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{min-height:52px;
  display:flex;align-items:center;justify-content:center}

/* --- 26.6 Phone: keep the same hierarchy in one column ------------------ */
@media (max-width:1020px){
  .woocommerce-cart .cart-collaterals{margin-top:var(--space-6)}
}
@media (max-width:760px){
  .woocommerce-cart td.actions{margin-top:var(--space-4);padding:var(--space-4)}
  .woocommerce-cart td.actions .coupon{display:grid;grid-template-columns:1fr;
    gap:var(--space-2)}
  .woocommerce-cart td.actions .coupon input#coupon_code{width:100%;min-height:44px}
  .woocommerce-cart td.actions .coupon .button{width:100%;min-height:44px}
  .woocommerce-cart form.has-changes table.cart td.actions .button[name="update_cart"]{
    width:100%!important;justify-content:center;margin-top:var(--space-3)}
}

/* =======================================================================
   27. CART — phone layer, written to outrank what came before it
   Section 26 styles the desktop table; on a phone that same table is a stack of
   cards, and the ruled cell borders it needs at 1440 become stray lines running
   through the middle of each card. These selectors deliberately mirror the
   shapes used in §24 and §26 so they win on specificity rather than by luck.
   ======================================================================= */
@media (max-width:760px){

  /* A card is bounded by its own border. Every cell line inside it is noise. */
  .woocommerce-cart table.shop_table_responsive tr.cart_item td,
  .woocommerce-cart table.cart tr.cart_item td{
    border:none;border-bottom:none;padding:0}

  /* The coupon block is a card of its own, not the last row of the table. */
  .woocommerce-cart table.cart tr:not(.cart_item) td.actions{
    display:block;
    padding:var(--space-4);
    margin-top:var(--space-5);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:var(--radius-card)}

  /* WooCommerce's clearfix lives on `.woocommerce #content table.cart td.actions
     .coupon::before{content:" ";display:table}` — an ID again, from GeneratePress's
     wrapper. Confirmed via CSS.getMatchedStylesForNode; both content and display
     have to be forced or the label renders as an empty table cell. */
  .woocommerce-cart table.cart td.actions .coupon::before{
    content:"Har du en rabattkode?"!important;display:block!important;width:100%;
    font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;
    color:var(--ink-soft);margin-bottom:var(--space-3);height:auto}

  /* Every override in this block fights the same thing: woocommerce-smallscreen
     scopes its cart rules through `.woocommerce #content …`, and GeneratePress
     names its wrapper `#content`, so those arms carry an ID. `width:48%` and
     `text-align:right!important` come from there. Confirmed with
     CSS.getMatchedStylesForNode, not assumed. */
  .woocommerce-cart table.cart td.actions,
  .woocommerce-cart table.cart td.actions .coupon{text-align:left!important}
  .woocommerce-cart table.cart td.actions .coupon{
    display:grid;grid-template-columns:1fr;gap:var(--space-2);float:none;width:100%}
  .woocommerce-cart table.cart td.actions .coupon input#coupon_code,
  .woocommerce-cart table.cart td.actions .coupon .input-text{
    width:100%!important;min-height:44px;margin:0;float:none}
  .woocommerce-cart table.cart td.actions .coupon .button{
    width:100%!important;min-height:44px;margin:0;float:none!important}

  /* Breathing room before the summary, so the two blocks read as two steps. */
  .woocommerce-cart .cart-collaterals{margin-top:var(--space-6)}
}

/* =======================================================================
   28. PDP BUY ROW + VERTICAL RHYTHM
   ======================================================================= */

/* --- 28.1 The quantity stepper and the CTA on one line -------------------
   .pd-buy was already a flex row, but WooCommerce renders `form.cart` between
   it and the controls, and that form is a block. So the flex rules never
   reached the stepper or the button: they were laid out as inline-blocks and
   aligned on their text baseline, which is where the 3px step came from.
   The form itself has to be the row. */
.pd-buy form.cart{display:flex;align-items:center;gap:var(--space-3);
  flex-wrap:wrap;margin:0;width:100%}
.pd-buy form.cart .quantity,
.pd-buy form.cart .quantity.qty{align-self:center;margin:0;height:52px;flex:0 0 auto}
.pd-buy form.cart .single_add_to_cart_button{align-self:center;margin:0;
  height:52px;min-height:52px;flex:1 1 200px}
/* Woo's own clearfix on the form would otherwise add a phantom flex item. */
.pd-buy form.cart::before,.pd-buy form.cart::after{content:none}

/* On a 390px screen the stepper is 142px and the gutters leave 358px, so the
   stepper, a 12px gap and the button still share one row rather than the button
   dropping to a line of its own. */
@media (max-width:760px){
  .pd-buy form.cart{gap:var(--space-3);flex-wrap:nowrap}
  .pd-buy form.cart .quantity.qty{flex:0 0 auto}
  .pd-buy form.cart .single_add_to_cart_button{flex:1 1 auto;min-width:0;
    padding-inline:var(--space-3)}
}

/* --- 28.2 Room between the buy decision and the reassurance row ----------
   20px put the shipping/returns/payment line right under the button, so it
   read as part of the control rather than as supporting information. */
.pd-usps{margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--line)}
.pd-meta{margin-top:var(--space-5)}
@media (max-width:760px){
  .pd-usps{margin-top:var(--space-5);padding-top:var(--space-4)}
}

/* =======================================================================
   29. PRICE RANGE SLIDER
   Two range inputs stacked on one track. Each input is transparent apart from
   its thumb, and pointer-events are switched off on the input body so a click
   anywhere on the track still reaches the thumb underneath rather than being
   swallowed by the upper input.
   ======================================================================= */
.price-range{padding:var(--space-2) var(--space-1) 0}
.price-out{display:block;font-size:var(--text-sm);font-weight:600;color:var(--ink);
  margin-bottom:var(--space-3)}
.price-out .pr-lo,.price-out .pr-hi{font-variant-numeric:tabular-nums}

.pr-track{position:relative;height:32px}
.pr-track::before{content:"";position:absolute;left:0;right:0;top:14px;height:4px;
  background:var(--line);border-radius:2px}
.pr-fill{position:absolute;top:14px;height:4px;background:var(--navy-600);
  border-radius:2px;left:0;right:0}

.pr-track input[type=range]{position:absolute;left:0;top:0;width:100%;height:32px;
  margin:0;background:none;-webkit-appearance:none;appearance:none;
  pointer-events:none}
.pr-track input[type=range]:focus{outline:none}
.pr-track input[type=range]::-webkit-slider-runnable-track{background:none;
  height:32px;border:none}
.pr-track input[type=range]::-moz-range-track{background:none;height:32px;border:none}

/* 24px thumb — a thumb is dragged, so it needs a real target on a phone. */
.pr-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  pointer-events:auto;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:2px solid var(--navy-600);cursor:grab;
  margin-top:4px;box-shadow:0 1px 3px rgba(19,24,31,.18)}
.pr-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:24px;height:24px;
  border-radius:50%;background:var(--surface);border:2px solid var(--navy-600);
  cursor:grab;box-shadow:0 1px 3px rgba(19,24,31,.18)}
.pr-track input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--navy-tint)}
.pr-track input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px var(--navy-tint)}
.pr-track input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}

@media (max-width:760px){
  .pr-track{height:40px}
  .pr-track input[type=range]{height:40px}
  .pr-track::before,.pr-fill{top:18px}
  .pr-track input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:6px}
  .pr-track input[type=range]::-moz-range-thumb{width:28px;height:28px}
}

/* =======================================================================
   30. FAQ PAGE
   Two columns on desktop: a sticky table of contents beside the answers, so a
   27-question page stays navigable without endless scrolling.
   ======================================================================= */
.faq-page{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--gap-col);
  align-items:start;padding-block:var(--space-7)}

.faq-toc{position:sticky;top:var(--sticky-top)}
.faq-toc h2{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:var(--space-3)}
.faq-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:var(--space-1)}
.faq-toc a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-btn);
  font-size:var(--text-meta);color:var(--ink);text-decoration:none}
.faq-toc a:hover{background:var(--bg);color:var(--navy-600)}
.faq-toc .n{font-size:var(--text-xs);color:var(--ink-soft);font-variant-numeric:tabular-nums}

.faq-body{min-width:0;display:flex;flex-direction:column;gap:var(--space-7)}
.faq-block{scroll-margin-top:calc(var(--sticky-top) + var(--space-4))}
.faq-block > h2{font-family:var(--font-display);font-size:var(--h2);
  margin-bottom:var(--space-4)}

.faq-acc details{border:1px solid var(--line);border-radius:var(--radius-card);
  background:var(--surface);margin-bottom:var(--space-2)}
.faq-acc summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);padding:var(--space-4) var(--space-5);cursor:pointer;
  font-weight:600;font-size:var(--text-meta);color:var(--ink);list-style:none}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary:hover{color:var(--navy-600)}
.faq-acc summary .caret{flex:0 0 auto;transition:transform .18s ease;color:var(--ink-soft)}
.faq-acc details[open] > summary .caret{transform:rotate(180deg)}
.faq-acc details[open] > summary{border-bottom:1px solid var(--line)}
.faq-acc .acc-body{padding:var(--space-4) var(--space-5) var(--space-5)}
.faq-acc .acc-body > *:first-child{margin-top:0}
.faq-acc .acc-body > *:last-child{margin-bottom:0}
.faq-acc .acc-body ul{margin:var(--space-3) 0;padding-left:var(--space-5)}
.faq-acc .acc-body li{margin-bottom:var(--space-1)}

.faq-cta{background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--space-6)}
.faq-cta h2{font-family:var(--font-display);font-size:var(--h3);
  margin-bottom:var(--space-2)}
.faq-cta p{color:var(--ink-soft);margin-bottom:var(--space-4);max-width:52ch}

@media (max-width:1020px){
  .faq-page{grid-template-columns:1fr;gap:var(--space-6);padding-block:var(--space-6)}
  .faq-toc{position:static}
  .faq-toc ul{flex-direction:row;flex-wrap:wrap}
  .faq-toc a{background:var(--bg);border:1px solid var(--line)}
}
@media (max-width:760px){
  .faq-acc summary{padding:var(--space-4)}
  .faq-acc .acc-body{padding:var(--space-3) var(--space-4) var(--space-4)}
  .faq-cta{padding:var(--space-5)}
}

/* =======================================================================
   31. SECTION HEADINGS + NUMBERED STEPS
   Shared by the forhandler page and anywhere else that needs a titled section
   or an ordered process, so the two never drift into different rhythms.
   ======================================================================= */
.sec-title{font-family:var(--font-display);font-size:var(--h2);margin-bottom:var(--space-2)}
.sec-lead{color:var(--ink-soft);max-width:62ch;margin-bottom:var(--space-6)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);
  counter-reset:step}
.steps > li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--space-4);
  align-items:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:var(--space-5)}
.steps .stepno{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-tint);color:var(--navy-600);font-family:var(--font-display);
  font-weight:700;font-size:var(--text-lead)}
.steps h3{font-size:var(--text-lead);margin:0 0 var(--space-1)}
.steps p{color:var(--ink-soft);margin:0;max-width:70ch}

.fine{margin-top:var(--space-5);color:var(--ink-soft);font-size:var(--text-sm);
  max-width:70ch}

@media (min-width:761px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .steps > li{padding:var(--space-4);gap:var(--space-3);grid-template-columns:40px minmax(0,1fr)}
  .steps .stepno{width:40px;height:40px}
}

/* =======================================================================
   32. PRODUCT PAGE — one vertical ladder
   The gaps had drifted to 22 / 24 / 30 / 32 / 44 / 64 as rules were added in
   different passes, which is what makes a page feel cramped in places and loose
   in others even when nothing is obviously wrong. Everything below is pinned to
   the token scale so the steps are deliberate and repeatable:

     inside a block .......... --space-5  24
     between blocks .......... --space-6  32
     block -> section ........ --space-7  48
     section -> section ...... --space-8  64
   ======================================================================= */
.pd{padding-block:var(--space-6) var(--space-8)}
.pd-info > * + *{margin-top:var(--space-5)}
.pd-buy{margin-top:var(--space-6)}
.pd-usps{margin-top:var(--space-6);padding-top:var(--space-5)}
.pd-meta{margin-top:var(--space-5)}
.pd-tabs{margin-top:var(--space-7);padding-bottom:var(--space-8)}
.related,.up-sells{margin-top:var(--space-8)}

@media (max-width:1020px){
  /* Stacked, the gallery and the info column are two blocks, not two columns. */
  .pd{gap:var(--space-6);padding-block:var(--space-5) var(--space-7)}
  .pd-tabs{margin-top:var(--space-6);padding-bottom:var(--space-7)}
  .related,.up-sells{margin-top:var(--space-7)}
}

/* B2BKing prints its own "Registrer" heading inside the form, directly under our
   "Registrer bedrift". Two headings for one form reads as a rendering fault. */
.cform .b2bking_registration_form_container > h2:first-child,
.cform form.register > h2:first-child,
.cform .woocommerce-form-register > h2:first-child{display:none}

/* =======================================================================
   33. CHECKOUT — Klarna owns the page, so it gets one centred column
   The KCO form carries `kco-checkout`; the fallback WooCommerce checkout does
   not. Scoping to that class is what lets the single column exist without
   touching the fallback's two-column billing/order-review grid, which still has
   to work if Klarna is ever unreachable.

   §26's grid was constraining #kco-wrapper to the 1fr of `1fr 400px` and leaving
   a dead 400px track beside it — the Klarna block was 684px wide and off-centre
   for that reason alone, not because of anything the plugin did.

   The plugin already handles the structure: checkout_layout=one_column_checkout
   stacks the blocks, show_subtotal_detail=iframe stops the Woo review table
   being rendered at all. Everything here is presentation.
   ======================================================================= */
.woocommerce-checkout form.checkout.kco-checkout{
  display:block;
  max-width:var(--checkout-maxw);
  margin-inline:auto;
  grid-template-columns:none}

/* The prompts above the order block share the column, so the page reads as one
   measure rather than a narrow block under two full-width bars. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout .woocommerce-notices-wrapper{
  max-width:var(--checkout-maxw);
  margin-inline:auto}

.woocommerce-checkout form.checkout.kco-checkout #kco-wrapper{
  display:block;width:100%;padding:0}
.woocommerce-checkout form.checkout.kco-checkout #kco-iframe,
.woocommerce-checkout form.checkout.kco-checkout #kco-order-review{
  width:100%;float:none;padding:0}

/* #kco-order-review still exists — it carries the order notes and the
   "Opprett en konto?" fields that KCO's JS moves into it. It is only the totals
   TABLE that is gone, and that is gone at render time, not hidden. Give the
   block spacing only when it actually has content in it. */
.woocommerce-checkout form.checkout.kco-checkout #kco-order-review:not(:empty){
  margin-bottom:var(--space-5)}
.woocommerce-checkout #kco-extra-checkout-fields:empty{display:none}

@media (max-width:760px){
  .woocommerce-checkout form.checkout.kco-checkout{max-width:none}
  .woocommerce-checkout .woocommerce-form-login-toggle,
  .woocommerce-checkout .woocommerce-form-coupon-toggle,
  .woocommerce-checkout form.checkout_coupon,
  .woocommerce-checkout form.woocommerce-form-login,
  .woocommerce-checkout .woocommerce-notices-wrapper{max-width:none}
}

/* =======================================================================
   34. SIZE SELECTOR
   The sizes are separate products, so these are links, not radio inputs —
   styled as a control because that is what the customer is doing.
   ======================================================================= */
.pd-sizes{margin-top:var(--space-5)}
.pd-sizes-label{display:block;font-size:var(--text-sm);font-weight:600;
  color:var(--ink-soft);margin-bottom:var(--space-2)}
.pd-size-opts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.size-opt{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--space-4);border:1.5px solid var(--line);
  border-radius:var(--radius-btn);background:var(--surface);
  font-size:var(--text-meta);font-weight:600;color:var(--ink);
  text-decoration:none;white-space:nowrap;transition:border-color .15s ease}
a.size-opt:hover{border-color:var(--navy-600);color:var(--navy-600)}
.size-opt.is-current{border-color:var(--navy-600);background:var(--navy-tint);
  color:var(--navy-600);cursor:default}
a.size-opt.is-oos{color:var(--ink-soft)}
a.size-opt.is-oos::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ink-soft);margin-left:var(--space-2)}

/* =======================================================================
   35. VARIATION SIZES AS BLOCKS
   The native <select> still drives WooCommerce; it is hidden and mirrored by
   buttons. On a phone a select opens an OS picker over the price, which is
   exactly the thing the shop owner is trying to show a customer.
   ======================================================================= */
.var-blocks{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
.var-block{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--space-4);border:1.5px solid var(--line);
  border-radius:var(--radius-btn);background:var(--surface);
  font-family:var(--font-body);font-size:var(--text-meta);font-weight:600;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:border-color .15s ease,background .15s ease}
.var-block:hover{border-color:var(--navy-600);color:var(--navy-600)}
.var-block.is-on{border-color:var(--navy-600);background:var(--navy-tint);
  color:var(--navy-600)}
select.is-block-driven{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* WooCommerce puts the size table and the add-to-cart row inside one form. That
   form inherits `.pd-buy form.cart{display:flex}`, which was written for simple
   products (qty + button on one line) and here laid the size table BESIDE the
   buy row — 88px + 283px against a 358px column, which is the mobile breakage
   the shop owner saw. A variable product's form is a stack. */
.pd-buy form.variations_form.cart{display:block;width:100%;flex:1 1 100%}

/* Woo's own variation table becomes a plain stack once the select is hidden —
   the label column would otherwise leave a wide empty gutter on a phone. */
.woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;gap:var(--space-3);
  align-items:center}
form.variations_form table.variations{width:100%;border:none;margin:0 0 var(--space-2)}
form.variations_form table.variations th,
form.variations_form table.variations td{display:block;width:100%;padding:0;border:none;
  text-align:left}
form.variations_form table.variations th.label label{font-size:var(--text-sm);
  font-weight:600;color:var(--ink-soft);margin-bottom:var(--space-2);display:block}
form.variations_form .reset_variations{font-size:var(--text-sm);color:var(--navy-600);
  display:inline-block;margin-top:var(--space-1)}
.woocommerce-variation-price{margin:var(--space-2) 0 var(--space-3);
  font-family:var(--font-display);font-size:var(--text-lead);color:var(--ink)}

@media (max-width:760px){
  .var-blocks{gap:var(--space-2)}
  .var-block{flex:1 1 auto;min-width:88px}
  .woocommerce-variation-add-to-cart{flex-wrap:nowrap}
  .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1 1 auto;min-width:0}
}

/* Pack sizes on the archive card — the answer to "hvilke størrelser finnes?"
   without a click. Quiet by design: it informs, it must not compete with the
   price or the button. */
.card-sizes{display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-2) 0 0}
.card-sizes span{display:inline-flex;align-items:center;padding:2px 8px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:var(--text-xs,12px);line-height:1.6;color:var(--ink-soft);
  background:var(--surface);white-space:nowrap}

/* The consent bar and the sticky buy bar both live at bottom:0, and consent sits
   on top at z-index 9999 — so a first-time visitor on a phone had the "Kjøp"
   bar covered by the very banner they had not dismissed yet. Lift the buy bar
   above the banner for as long as the banner is open. */
body.cc-open .sticky-buy{bottom:var(--cc-h,0px);transition:bottom .2s ease}