/* ============================================================
   2020 HOCKEY — design system
   ============================================================ */
:root{
  /* color */
  --color-primary:#ef5d11;          /* oransje */
  --color-primary-600:#d44f08;
  --color-secondary:#0b1a2e;        /* navy */
  --color-secondary-700:#102339;
  --color-cta:#122139;              /* "Legg i handlekurv" knapp */
  --color-cta-hover:#1c3354;
  --color-text:#0f1d33;
  --color-text-soft:#46566b;
  --color-text-muted:#6b7280;
  --color-background:#f2f3f5;
  --color-surface:#ffffff;
  --color-border:#e6e8ec;
  --color-media-1:#f7f8fa;
  --color-media-2:#e7eaef;
  --color-chip:#eef1f5;
  --color-hover:#f4f6f9;
  /* A chosen filter, carried as a tint of the accent rather than as
     another grey pill, so the row reads as state and not as navigation. */
  --color-chip-on:rgba(239,93,17,.09);
  --color-chip-on-hover:rgba(239,93,17,.17);
  --color-chip-on-border:rgba(239,93,17,.42);

  /* radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:26px;
  --radius-pill:999px;

  /* shadow */
  --shadow-sm:0 1px 2px rgba(13,29,51,.06);
  --shadow-md:0 10px 28px -12px rgba(13,29,51,.20);
  --shadow-lg:0 26px 60px -26px rgba(13,29,51,.40);

  /* layout */
  --container-width:1440px;
  --pad:clamp(16px,4vw,40px);
  --section-spacing:clamp(28px,5vw,56px);

  /* type + motion */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);

  color-scheme:light;
}

[data-theme="dark"]{
  color-scheme:dark;
  --color-background:#0b1220;
  --color-surface:#131f33;
  --color-text:#e8edf3;
  --color-text-soft:#b3c0d0;
  --color-text-muted:#8a99af;
  --color-border:#243450;
  --color-media-1:#1a2740;
  --color-media-2:#101a2e;
  --color-chip:#1d2a42;
  --color-hover:#1b2942;
  --color-chip-on:rgba(239,93,17,.17);
  --color-chip-on-hover:rgba(239,93,17,.26);
  --color-chip-on-border:rgba(239,93,17,.52);
  --color-cta:#ef5d11;              /* oransje på mørk tema for kontrast */
  --color-cta-hover:#d44f08;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--color-text);
  background:var(--color-background);
  transition:background-color .3s var(--ease),color .3s var(--ease);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* height:auto is what keeps an <img height> attribute from overriding the
   layout; WooCommerce's dequeued stylesheet used to supply it. */
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
input,select{font:inherit}
svg{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}

.container{width:100%;max-width:var(--container-width);margin-inline:auto;padding-inline:var(--pad)}

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:3px solid var(--color-primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:relative;z-index:50;
  background:var(--color-secondary);
  color:#fff;
}
/* 2 rader: logo strekker seg over begge */
.header__grid{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"logo top" "logo nav";
  column-gap:clamp(20px,3vw,48px);
  align-items:center;
}

/* logo — full høyde over begge rader */
.logo{grid-area:logo;display:inline-flex;align-items:center;align-self:stretch}
.logo__img{height:clamp(68px,7vw,96px);width:auto}

/* øvre rad */
.header__top{grid-area:top;display:flex;align-items:center;gap:clamp(16px,2.5vw,32px);padding-block:14px}

/* search — kompakt, halvgjennomsiktig, knapp utenfor feltet */
/* Qualified with the element on purpose: WordPress puts `search` on <body>
   on the results page, and a bare .search turned the whole page into a
   flex row, shrinking it to 1440px and exposing the fixed footer. */
form.search{display:flex;align-items:center;gap:8px;flex:0 1 360px}
.search__field{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:0;height:38px;padding:0 14px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.search__field:focus-within{border-color:var(--color-primary);background:rgba(255,255,255,.14)}
.search__icon{width:18px;height:18px;color:rgba(255,255,255,.6);flex-shrink:0}
.search__input{flex:1;min-width:0;border:0;background:none;outline:none;color:#fff;font-size:14px}
.search__input::placeholder{color:rgba(255,255,255,.55)}
.search__btn{
  flex-shrink:0;height:38px;padding:0 18px;
  background:var(--color-primary);color:#fff;
  font-weight:700;font-size:14px;border-radius:var(--radius-pill);
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.search__btn:hover{background:var(--color-primary-600);box-shadow:0 0 14px -1px rgba(239,93,17,.65)}

/* account */
.account{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px)}
.account__item{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#cfd9e6;transition:color .2s var(--ease)}
.account__item:hover{color:#fff}
.account__icon{width:24px;height:24px;color:#fff;transition:color .2s var(--ease),transform .2s var(--ease)}
.account__item:hover .account__icon{color:var(--color-primary)}
.account__cart-wrap{position:relative;display:inline-flex}
.account__badge{
  position:absolute;top:-7px;right:-8px;
  min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;
  background:var(--color-primary);color:#fff;
  font-size:11px;font-weight:800;border-radius:var(--radius-pill);
}
.account__badge:empty{display:none}

/* Sign-up for clubs and companies. WooCommerce registration is switched off in
   this shop, so this page is the only way into an account; it needs its label,
   not just an icon, which is why it disappears below 900px and moves into the
   drawer instead. */
.mainnav__item--register{display:none}

/* hamburger */
.nav-toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;border-radius:var(--radius-md)}
.nav-toggle__bar{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* søk-knapp (kun mobil) + fullskjerm søk-overlay */
.search-toggle{display:none;background:none;border:0;cursor:pointer;padding:0}
/* The close button sits beside the field, not under it: the
   autocomplete panel opens directly below the field and is as wide
   as it, so a button on the next line is covered the moment anyone
   types — which is the only moment they might want to leave. */
.search-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,15,28,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:16px;display:flex;align-items:flex-start;gap:6px}
.search-overlay[hidden]{display:none}
.search-overlay__form{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill);padding:13px 16px}
/* The overlay reuses the header's own field — sporter_search_field() changes
   the class on the form and nothing inside it — so the only thing left to say
   here is the size: 16px, not the header's 14. iOS Safari zooms the page when
   a focused input is smaller than 16px, and on a phone this is the only search
   field there is. */
.search-overlay__form .search__input{font-size:16px}
.search-overlay__close{display:grid;place-items:center;width:40px;height:50px;flex-shrink:0;background:none;border:0;color:#fff;cursor:pointer}
.search-overlay__close svg{width:22px;height:22px;stroke-width:2}

/* main nav (nedre rad) */
.mainnav{grid-area:nav;border-top:1px solid rgba(255,255,255,.09)}
/* Eleven items, and Gavekort was dropping to a second row. Measured rather
   than guessed: the labels themselves come to 984px, and the row has 1182px
   at 1440, 1110 at 1366, 1034 at 1280 and 964 at 1200. So the gap decides
   the outcome at 1440 and nowhere below it — at 1200 the labels alone are
   already 20px wider than the row, and no spacing value can help.

   These values buy the one line from 1400 up, with 15px to spare at 1440.
   Between 901 and roughly 1230 the menu still takes two rows; closing that
   is a naming decision, not a spacing one — three labels carry 222px of the
   984 ("Helse og ernæring" 150, "Materialforvalter" 139, "Klær og bagger"
   127), and shortening those three fits every width down to the 900px
   breakpoint where the burger takes over.

   Read together with .mainnav__item--divide below: the divider adds its own
   padding on top of the gap, so changing one without the other moves half
   the width. */
.mainnav__list{display:flex;flex-wrap:wrap;align-items:center;column-gap:clamp(12px,1.3vw,18px);row-gap:6px;padding-block:13px;min-height:52px}
.mainnav__link{font-size:15px;font-weight:600;color:#e8edf3;position:relative;padding-block:4px;white-space:nowrap;transition:color .2s var(--ease)}
.mainnav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--color-primary);transition:right .25s var(--ease)}
.mainnav__link:hover{color:#fff}
.mainnav__link:hover::after{right:0}
.mainnav__link--sale{color:var(--color-primary)}
.mainnav__link--sale:hover{color:#ff7a33}
.mainnav__link--gift{color:#f2ffae}
.mainnav__link--gift:hover{color:#fff}
/* The hover rule underlines in the accent orange, which under a pale yellow
   label reads as a third colour. These two take their own. */
.mainnav__link--sale::after,
.mainnav__link--gift::after{background:currentColor}
.mainnav__item--divide{padding-left:clamp(9px,1vw,14px);border-left:1px solid rgba(255,255,255,.12)}

/* ---- undermeny (dropdown) ---- */
.mainnav__item{position:relative}
.mainnav__trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.mainnav__trigger .caret{width:14px;height:14px;flex-shrink:0;stroke-width:2.2;transition:transform .25s var(--ease)}
.mainnav__item--has-sub:hover .caret,
.mainnav__item.is-open .caret{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:60;
  min-width:250px;padding:8px;
  background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease);
}
.submenu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} /* hover-bro */
.mainnav__item--has-sub:hover .submenu,
.mainnav__item--has-sub:focus-within .submenu,
.mainnav__item.is-open .submenu{opacity:1;visibility:visible;transform:none}

.submenu__list{display:flex;flex-direction:column;gap:1px}

/* A branch three levels deep opens as a panel of columns instead of a list.
   The column count follows the content: four categories with children need
   more room than one, and a fixed three would leave a hole under Tilbehør. */
.submenu--mega{padding:14px 16px 10px}
/* The panel is as wide as the columns it holds, not a fixed slab with a hole
   in it. The walker picks the count from the branch's line count. */
.submenu--mega-2{min-width:min(500px,86vw)}
.submenu--mega-3{min-width:min(700px,86vw)}
.submenu__all{
  display:block;margin:0 0 10px;padding:0 6px 10px;
  border-bottom:1px solid var(--color-border);
  font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--color-primary);
}
.submenu__grid{column-gap:26px}
.submenu__grid--2{columns:2}
.submenu__grid--3{columns:3}
.submenu__group{break-inside:avoid;display:block;margin:0 0 14px}
.submenu__head{
  display:block;padding:4px 6px 6px;
  font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:var(--color-text);
}
.submenu__head:hover{color:var(--color-primary)}
.submenu__sub{display:flex;flex-direction:column;gap:1px}
/* A category with nothing under it is a heading with an empty list, not a
   smaller kind of thing: Køller has to sit on the same line and in the same
   type as Skøyter beside it, or the column reads as two unrelated levels. */
.submenu__grid > .submenu__item{break-inside:avoid;display:block;margin:0 0 14px}
.submenu__grid > .submenu__item > .submenu__link{
  padding:4px 6px 6px;border-radius:0;
  font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
}
.submenu__grid > .submenu__item > .submenu__link:hover{background:transparent;color:var(--color-primary)}
.submenu__sub .submenu__link{padding:6px 6px;font-size:14px;font-weight:600;color:var(--color-text-soft)}
.submenu__sub .submenu__link:hover{background:var(--color-hover);color:var(--color-primary)}
/* The panel is a fixed width split into columns, so a long name has to wrap
   inside its column instead of pushing the column wider. */
.submenu__grid .submenu__link{white-space:normal}
/* The walker marks the last group of every column but the last; see
   sporter_nav_pack_columns(). */
.submenu__grid .is-column-end{break-after:column}
/* Fewer columns than the breaks were counted for would push the surplus out
   of the panel, so at these widths the browser balances the panel again. */
@media (max-width:1180px){
  .submenu__grid--3{columns:2}
  .submenu__grid--3 .is-column-end{break-after:auto}
}

.submenu__link{display:block;padding:10px 14px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;color:var(--color-text);white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)}
.submenu__link:hover{background:var(--color-hover);color:var(--color-primary)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--color-secondary);padding:clamp(14px,2vw,26px) 0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* viewport = bredden på nettstedet; bildet vises helt (ingen beskjæring) */
.hero__carousel{position:relative;width:100%;max-width:var(--container-width);margin-inline:auto;padding-inline:var(--pad)}
.hero__viewport{overflow:hidden;border-radius:var(--radius-lg)}
.hero__track{display:flex;list-style:none;transition:transform .6s var(--ease);will-change:transform}
.hero__slide{flex:0 0 100%;min-width:0}
.hero__slide a{display:block}
.hero__slide img{
  display:block;width:100%;height:auto;
  /* fade venstre/høyre → smelter inn i bakgrunnen */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}

/* piler */
.hero__arrow{
  position:absolute;top:50%;z-index:2;
  width:40px;height:40px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--color-secondary);
  border:1px solid rgba(255,255,255,.65);border-radius:50%;
  box-shadow:0 8px 22px -6px rgba(13,29,51,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform:translateY(-50%);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.hero__arrow:hover{background:var(--color-primary);color:#fff;transform:translateY(-50%) scale(1.07);box-shadow:0 10px 26px -6px rgba(239,93,17,.6)}
.hero__arrow:active{transform:translateY(-50%) scale(.95)}
.hero__arrow svg{width:18px;height:18px;stroke-width:2.4}
.hero__arrow--prev{left:calc(var(--pad) + 16px)}
.hero__arrow--next{right:calc(var(--pad) + 16px)}

/* prikker */
.hero__dots{position:absolute;left:50%;bottom:clamp(10px,2vw,22px);transform:translateX(-50%);z-index:2;display:flex;gap:9px}
.hero__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .3s var(--ease)}
.hero__dot.is-active{background:var(--color-primary);width:26px;border-radius:var(--radius-pill)}

/* ---- variant: banner på hvit bakgrunn, uten blå/gradient/fade (index-kopi) ---- */
.hero--plain{background:var(--color-surface);padding-block:clamp(20px,3vw,40px)}
.hero--plain .hero__slide img{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-lg)}

/* ============================================================
   USP-BAR
   ============================================================ */
.usp-bar{background:var(--color-background);padding-block:clamp(36px,5vw,60px)}
.usp-bar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.5vw,16px)}
.usp-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(24px,2.8vw,34px) clamp(14px,1.6vw,22px)}
.usp-card__icon-wrap{width:84px;height:84px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(239,93,17,.09);border-radius:18px}
.usp-card__icon{width:46px;height:46px;color:var(--color-primary);flex-shrink:0;stroke-width:1.6}
.usp-card__body{min-width:0}
.usp-card__title{display:flex;flex-direction:column;gap:3px}
.usp-card__title-top{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text);line-height:1.25}
.usp-card__title-bot{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--color-primary);line-height:1.2}
.usp-card__sub{font-size:12.5px;color:var(--color-text-muted);line-height:1.45;margin-top:7px}

@media (max-width:900px){.usp-bar__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .usp-bar{padding-block:clamp(22px,5vw,32px)}
  .usp-bar__grid{gap:10px}
  .usp-card{gap:9px;padding:16px 12px;border-radius:var(--radius-md)}
  .usp-card__icon-wrap{width:50px;height:50px;border-radius:12px}
  .usp-card__icon{width:27px;height:27px}
  .usp-card__title{gap:1px}
  .usp-card__title-top{font-size:10px;letter-spacing:.4px}
  .usp-card__title-bot{font-size:12px}
  .usp-card__sub{font-size:10.5px;margin-top:4px}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;border-radius:var(--radius-md);transition:background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
/* glance / blikk */
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.btn:hover::after{left:150%}
.btn--primary{background:var(--color-primary);color:#fff;padding:15px 30px;font-size:16px;border-radius:var(--radius-md);box-shadow:0 12px 28px -10px rgba(239,93,17,.6)}
.btn--primary:hover{background:var(--color-primary-600);box-shadow:0 0 0 1px rgba(239,93,17,.45),0 16px 38px -8px rgba(239,93,17,.8)}

/* ============================================================
   TOOLBAR
   ============================================================ */
.catalog{padding-block:clamp(16px,2.2vw,28px) clamp(48px,7vw,90px)}
.toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3vw,32px);
}
.toolbar__count{font-size:18px;font-weight:700;color:var(--color-text);white-space:nowrap}
.toolbar__count span{color:var(--color-primary)}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-inline:auto}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;font-size:15px;font-weight:600;
  color:var(--color-text);background:var(--color-surface);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.pill svg{width:18px;height:18px}
.pill:hover{background:var(--color-hover);box-shadow:var(--shadow-md)}
.pill.is-active{background:var(--color-primary);color:#fff;box-shadow:0 10px 22px -10px rgba(239,93,17,.6)}

.sort{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:0 18px;box-shadow:var(--shadow-sm);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.sort__icon{width:18px;height:18px;color:var(--color-text-soft);flex-shrink:0}
.sort__label{font-size:15px;font-weight:600;color:var(--color-text);pointer-events:none;white-space:nowrap}
.sort__select{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
/* sporter_icon() prints class="caret", so the .sort__chev this rule used to
   name matched nothing: the chevron was a flex item with no size of its own.
   At desktop widths it shrank to nothing and the pill lost its arrow; in the
   stacked toolbar below 900px, where the items stretch, it grew to 670px and
   lay across the whole page. */
.sort .caret{width:18px;height:18px;flex-shrink:0;color:var(--color-text-soft)}
.sort:hover{border-color:#cfd5dd;box-shadow:var(--shadow-md)}
/* The count states what is on the shelf; the pills next to it control how the
   shelf is shown. With two of them the pair goes to the far edge, so the
   statement and the controls stop reading as one run of text. */
.sort{margin-left:auto}
.sort + .sort{margin-left:0}

/* ------------------------------------------------------------
   ACTIVE FILTERS
   The row that answers "why am I seeing these products" next to the
   products, instead of only in a column that is behind a button on
   anything narrower than a laptop. Each chip is a link that drops its
   own value; the row is printed only when something is filtered, so an
   untouched shelf pays nothing for it.
   ------------------------------------------------------------ */
/* The toolbar and the chips are one thought - what is shown, and why -
   so they sit close, and the gap between blocks goes under the pair. */
.toolbar:has(+ .activefilters){margin-bottom:14px}
.activefilters{
  display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;
  margin:0 0 clamp(20px,3vw,32px);
}
.activefilters__list{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.activefilters__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 8px 6px 14px;font-size:14px;font-weight:700;line-height:1.25;
  color:var(--color-text);background:var(--color-chip-on);
  border:1px solid var(--color-chip-on-border);border-radius:var(--radius-pill);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.activefilters__group{color:var(--color-text-soft);font-weight:600}
.activefilters__x{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex-shrink:0;
  font-size:15px;line-height:1;
  color:var(--color-text-muted);background:var(--color-surface);
  border-radius:50%;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.activefilters__chip:hover{background:var(--color-chip-on-hover);border-color:var(--color-primary)}
/* The cross is what the click does, so it is the part that lights up.
   Colouring the whole chip orange would read as switching the filter on. */
.activefilters__chip:hover .activefilters__x{background:var(--color-primary);color:#fff}
.activefilters__reset{
  font-size:14px;font-weight:700;color:var(--color-text-muted);
  text-decoration:underline;text-underline-offset:3px;
  transition:color .2s var(--ease);
}
.activefilters__reset:hover{color:var(--color-primary)}

/* ============================================================
   PRODUCT GRID + CARD
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px)}

.card{
  /*
   * position:relative so that Woo's absolutely positioned screen-reader labels
   * resolve against the card. Without it they resolve against .reveal-shell,
   * escape the slider's clipping and stretch the page into horizontal scroll.
   */
  position:relative;
  display:flex;flex-direction:column;
  background:var(--color-surface);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* reveal-animasjon */
html.js .card{opacity:0;transform:translateY(22px)}
html.js .card.in{opacity:1;transform:none;transition:opacity .6s var(--ease),box-shadow .3s var(--ease),transform .6s var(--ease)}
.card.in:nth-child(1){transition-delay:.02s}
.card.in:nth-child(2){transition-delay:.06s}
.card.in:nth-child(3){transition-delay:.10s}
.card.in:nth-child(4){transition-delay:.14s}
.card.in:nth-child(5){transition-delay:.18s}
.card.in:nth-child(6){transition-delay:.22s}
.card.in:nth-child(7){transition-delay:.26s}
.card.in:nth-child(8){transition-delay:.30s}

.card__media{
  position:relative;aspect-ratio:4/5;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  display:grid;place-items:center;overflow:hidden;
}
/*
 * Real photo, in place of the mockup's watermark placeholder.
 *
 * The mockup was drawn with 4:5 lifestyle shots, which "cover" suits. The
 * shop's own photos are product-on-white in every proportion — square grips,
 * portrait sticks — so cropping them to the frame hides the product. They are
 * shown whole, with room to breathe around them.
 */
.card__img{position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:clamp(10px,2vw,20px);object-fit:contain;transition:transform .5s var(--ease)}
/* Imagify serves part of the library through <picture>, and WordPress puts the
   class on that wrapper. object-fit means nothing on a <picture>, so the photo
   kept its own size and sat against the top edge; the inner <img> takes the
   whole frame instead and centres itself in it. display:block on the wrapper is
   what lets that height:100% resolve — as an inline box it has no height to
   measure against. */
.card__img img{width:100%;height:100%;object-fit:contain}
.card:hover .card__img{transform:scale(1.05)}
.card__brand-watermark{
  font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:1px;
  color:rgba(15,29,51,.14);text-transform:uppercase;user-select:none;
}

.badge{position:absolute;top:14px;font-size:13px;font-weight:800;padding:5px 11px;border-radius:var(--radius-sm);letter-spacing:.3px}
.badge--discount{left:14px;background:var(--color-primary);color:#fff}

.card__body{display:flex;flex-direction:column;gap:9px;padding:16px}
/* 900 is the asked-for weight; Manrope stops at 800, so the browser draws
   the heaviest cut it has. The value stands for the intent — the caps, the
   tracking and the full-strength ink are what actually carry the weight the
   face cannot. Kept at 13px here: on a shelf the name sits above the title,
   not in place of it. The product page runs the same treatment at 16. */
.card__brand{font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--color-text)}
.card__title{font-size:17px;font-weight:600;color:var(--color-text);line-height:1.2}
.card__tier{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-soft)}
.card__tag{align-self:flex-start;font-size:11px;font-weight:600;color:var(--color-text-soft);background:var(--color-chip);padding:4px 10px;border-radius:var(--radius-sm)}
.card__price{display:flex;align-items:baseline;gap:10px;margin-top:2px}
/* Price and colours share the last line of the card: what it costs on the left,
   what it comes in on the right. */
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.card__colors{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.card__color{
  display:block;width:15px;height:15px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
/* The dot itself stays small; the target around it does not. */
.card__color::after{content:"";position:absolute;inset:-6px}
.card__colors li{position:relative;display:flex}
.card__color:hover,.card__color:focus-visible{transform:scale(1.18);box-shadow:inset 0 0 0 1px rgba(15,23,42,.35)}
.card__color:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* Camo, splat, "Canada" — a finish the shop has no single colour for. Saying so
   with a texture is honest; picking a colour for it would not be. */
.card__color--finish{
  background:
    repeating-linear-gradient(135deg,#c8ccd2 0 3px,#eef0f3 3px 6px);
}
.card__colors-more{font-size:12px;font-weight:600;color:var(--color-text-muted);white-space:nowrap}
.card__price-old{font-size:14px;color:#9aa3af;text-decoration:line-through}
.card__price-now{font-size:21px;font-weight:800;color:var(--color-primary)}
.card__price-now--regular{color:var(--color-text)}

.card__actions{display:flex;gap:10px;margin-top:6px}
.icon-btn{
  display:grid;place-items:center;width:48px;flex-shrink:0;border:1px solid var(--color-border);
  border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface);
  transition:all .2s var(--ease);
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.icon-btn.is-fav{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.icon-btn.is-fav svg{fill:#fff}
/* The heart on a product card sits on the photograph, top right; the discount
   figure has the left corner to itself. Declared after .icon-btn so its own
   size and radius win — same specificity, later rule. */
.card__fav{
  position:absolute;right:14px;top:14px;z-index:2;
  width:40px;height:40px;border-radius:999px;
  box-shadow:0 2px 10px rgba(15,29,51,.14);
}
.card__fav svg{width:18px;height:18px}
.btn--cart{flex:1;background:var(--color-cta);color:#fff;padding:13px 16px;font-size:14.5px;font-weight:700}
.btn--cart svg{width:18px;height:18px}
.btn--cart:hover{background:var(--color-cta-hover);box-shadow:0 12px 30px -8px rgba(18,33,57,.7),0 0 0 1px rgba(126,165,214,.3)}
[data-theme="dark"] .btn--cart:hover{box-shadow:0 12px 30px -8px rgba(239,93,17,.55),0 0 0 1px rgba(239,93,17,.4)}

/* The card's own buy button, pinned to the bottom so the buttons of one row
   line up whatever the length of the names above them. The drawer opens on
   add, so WooCommerce's "Vis handlekurv" link after the button is not needed. */
.card__body{flex:1}
.card__buy{display:flex;margin-top:auto;padding-top:4px}
.card__buy .btn--cart{padding:11px 12px;font-size:14px;text-align:center;line-height:1.2}
.card__buy .btn--cart.loading{opacity:.6;pointer-events:none}
.card__buy .added_to_cart{display:none}

.noscript-note{padding:40px;text-align:center;color:var(--color-text-muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .header__grid{
    grid-template-columns:auto 1fr;
    grid-template-areas:"logo top" "nav nav";
    column-gap:16px;
  }
  .logo{align-self:center}
  .logo__img{height:clamp(52px,11vw,68px)}
  .header__top{justify-content:flex-end;gap:12px;padding-block:12px}
  .header__top > .search{display:none}     /* erstattet av søk-overlay */
  .search-toggle{display:inline-flex}
  .mainnav__item--register{display:block;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.12)}
  .nav-toggle{display:flex;position:relative;z-index:130}
  .mainnav{position:fixed;inset:0;z-index:120;border-top:0;visibility:hidden;transition:visibility .3s var(--ease)}
  .mainnav.is-open{visibility:visible}
  .mainnav::before{content:"";position:absolute;inset:0;background:rgba(8,16,30,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease)}
  .mainnav.is-open::before{opacity:1}
  .mainnav__list{display:flex;position:absolute;top:0;right:0;height:100%;width:min(330px,85%);flex-direction:column;align-items:stretch;gap:2px;padding:84px 26px 28px;overflow-y:auto;background:var(--color-secondary);box-shadow:-26px 0 60px -24px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .3s var(--ease)}
  .mainnav.is-open .mainnav__list{transform:none}
  /* The desktop row wraps; in a column of fixed height the same wrap sends
     whatever does not fit into a second column, off the right edge of the
     drawer, as soon as a section is expanded. The drawer scrolls instead. */
  .mainnav__list{flex-wrap:nowrap}
  .mainnav__link{display:block;padding:11px 0;width:100%}
  .mainnav__item--divide{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.12);margin-top:6px;padding-top:6px;width:100%}
  /* The count takes its own line; the controls keep their own width and
     share the next one, instead of each stretching across the screen. */
  .toolbar{gap:10px 8px}
  .toolbar__count{flex-basis:100%}
  .sort{margin-left:0;min-height:42px;padding:0 14px;gap:6px}
  .sort__label{font-size:14px}
  .filter-toggle{min-height:42px}
  .filters{margin-inline:0;justify-content:flex-start}

  /* submeny → accordion */
  .mainnav__item{width:100%;flex-shrink:0}
  .submenu{position:static;display:none;min-width:0;padding:0 0 6px 14px;background:transparent;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .submenu::before{display:none}
  .mainnav__item.is-open .submenu{display:block}
  .submenu__link{color:#cdd8e6;padding:8px 0}
  .submenu__link:hover{background:transparent;color:#fff}
  .submenu--mega{min-width:0;padding:0 0 6px 14px}
  .submenu__grid--2,
  .submenu__grid--3{columns:1}
  .submenu__grid .is-column-end{break-after:auto}
  .submenu__group,
  .submenu__grid > .submenu__item{margin-bottom:6px}
  .submenu__grid > .submenu__item > .submenu__link{padding:8px 0 2px;color:#fff;font-size:12.5px}
  .submenu__all{margin:0;padding:8px 0;border-bottom:0;font-size:12.5px}
  .submenu__head{padding:8px 0 2px;color:#fff;font-size:12.5px}
  .submenu__sub{padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
  .submenu__sub .submenu__link{color:#a9bacd;padding:7px 0}
  .submenu__sub .submenu__link:hover{background:transparent;color:#fff}
  .mainnav__trigger{display:flex;width:100%;justify-content:space-between;align-items:center;padding:10px 0}
}

@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }

@media (max-width:560px){
  .hero__title{font-size:clamp(28px,8vw,40px)}
  .hero__title br,.hero__text br{display:none}
  .pill{padding:10px 15px;font-size:14px}
}

/* Two cards across on a phone as well: one per row showed a single product
   per screen. The card is scaled down to half the width. Scoped to .grid so
   the sliders, which size their cards themselves, keep the full card. */
@media (max-width:560px){
  /* Filter, sorting and page size fit one row at 375px only without the
     leading icons; the chevron still marks the two as menus. */
  .sort__icon{display:none}
  .grid{gap:12px}
  .grid .card__img{padding:8px}
  .grid .badge{top:8px;left:8px;font-size:11px;padding:3px 7px}
  .grid .card__fav{top:8px;right:8px;width:32px;height:32px}
  .grid .card__fav svg{width:15px;height:15px}
  .grid .card__body{gap:5px;padding:10px 10px 12px}
  .grid .card__brand{font-size:11px;letter-spacing:.4px}
  .grid .card__title{font-size:14px;line-height:1.25}
  .grid .card__tier{font-size:10.5px}
  .grid .card__tag{font-size:10px;padding:3px 7px}
  .grid .card__stock{font-size:11.5px;gap:5px}
  .grid .card__price{gap:6px}
  .grid .card__price .amount{font-size:16px}
  .grid .card__price del,
  .grid .card__price del .amount,
  .grid .card__price .from{font-size:12px}
  .grid .card__colors{gap:5px}
  .grid .card__color{width:12px;height:12px}
  .grid .card__buy .btn--cart{padding:9px 6px;font-size:12.5px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .card{opacity:1;transform:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{position:relative;overflow:hidden;color:#cdd8e6;background:#0a1422;min-height:clamp(390px,34vw,520px)}

/* Footer reveal: the main layer slides over the footer pinned beneath it.
   JS adds reveal-on only when the footer fits the screen and motion is allowed. */
.reveal-shell{position:relative;z-index:1;background:var(--color-background)}
html.reveal-on .reveal-shell{margin-bottom:var(--footer-h,520px);box-shadow:0 26px 50px -20px rgba(0,0,0,.5)}
html.reveal-on .site-footer{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:0}
.footer-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Footer ambience: drifting scene, stars and aurora. CSS only, GPU composited. */
.site-footer::before{content:"";position:absolute;inset:-4% 0;z-index:1;background:url("../images/footer.webp?v=3") no-repeat center 78%/cover;animation:footerDrift 24s ease-in-out infinite;will-change:transform}
.site-footer::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(8,15,28,.82),rgba(8,15,28,.5) 34%,rgba(8,15,28,.16) 58%,transparent 80%),linear-gradient(0deg,rgba(8,15,28,.7),rgba(8,15,28,.08) 38%,transparent 56%)}
.fx-stars{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0 26%,transparent 52%);mask-image:linear-gradient(180deg,#000 0 26%,transparent 52%)}
.fx-star{position:absolute;border-radius:50%;background:#eaf4ff;box-shadow:0 0 4px 0 rgba(205,232,255,.6);opacity:var(--min,.18);animation:starTwinkle var(--dur,5s) ease-in-out infinite;animation-delay:var(--delay,0s);will-change:opacity,transform}
.footer-fx::after{content:"";position:absolute;left:-5%;right:-5%;top:-6%;height:74%;z-index:1;pointer-events:none;background-size:200% 200%;background-image:radial-gradient(at 62% 12%,rgba(95,255,150,.72) 0,transparent 50%),radial-gradient(at 70% 58%,rgba(175,95,255,.6) 0,transparent 50%),radial-gradient(at 24% 78%,rgba(45,230,255,.68) 0,transparent 50%),radial-gradient(at 82% 86%,rgba(90,255,185,.55) 0,transparent 50%),radial-gradient(at 42% 26%,rgba(255,90,200,.45) 0,transparent 50%),radial-gradient(at 12% 18%,rgba(70,150,255,.5) 0,transparent 50%);mix-blend-mode:screen;filter:blur(7px) saturate(1.45);-webkit-mask-image:linear-gradient(180deg,#000 0 54%,transparent 90%);mask-image:linear-gradient(180deg,#000 0 54%,transparent 90%);animation:aura 16s linear infinite;will-change:background-position;opacity:1}
@keyframes footerDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}
@keyframes starTwinkle{0%,100%{opacity:var(--min,.18);transform:scale(.92)}50%{opacity:var(--max,.55);transform:scale(1.06)}}
@keyframes aura{0%{background-position:50% 50%,30% 100%,100% 10%,23% 23%,0% 80%,80% 40%}33.333%{background-position:10% 75%,40% 80%,60% 20%,43% 23%,16% 30%,60% 70%}66.666%{background-position:25% 35%,80% 50%,10% 10%,66% 5%,30% 0%,35% 60%}100%{background-position:50% 50%,30% 100%,100% 10%,23% 23%,0% 80%,80% 40%}}
@media (prefers-reduced-motion:reduce){.site-footer::before,.footer-fx::after,.fx-star{animation:none}}
.site-footer__grid{position:relative;z-index:3;display:grid;grid-template-columns:0.7fr 1.15fr 1.15fr 1fr;gap:clamp(32px,4vw,64px);padding-block:clamp(72px,8vw,130px) clamp(26px,3vw,42px)}
@media (min-width:920px){ .site-footer__grid{padding-right:clamp(180px,26%,380px)} }
.footer-col--brand{padding-top:2px}
.footer-brand{display:inline-block}
.footer-brand__logo{display:block;width:clamp(130px,13vw,180px);height:auto}
.footer-col__title{font-size:14px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:20px}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{color:#cdd8e6;font-size:15px;align-self:start;transition:color .2s var(--ease),transform .2s var(--ease)}
.footer-links a:hover{color:var(--color-primary);transform:translateX(5px)}
/* Opens the cookie settings dialog; drawn as one more link in the column. */
/* Scoped by .site-footer: on cart and checkout Elementor paints every bare
   button navy, see CHROME HARDENING. */
.site-footer .footer-links__button{padding:0;border:0;background:none;font:inherit;color:#cdd8e6;text-align:left;cursor:pointer;transition:color .2s var(--ease),transform .2s var(--ease)}
.site-footer .footer-links__button:hover{color:var(--color-primary);transform:translateX(5px)}
.footer-links__cookies{display:flex;font-size:15px}
.footer-links__cookies[hidden]{display:none}
.footer-contact{display:flex;flex-direction:column;gap:14px}
.footer-contact li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.4}
.footer-contact svg{width:18px;height:18px;color:var(--color-primary);flex-shrink:0;margin-top:2px}
.footer-contact a{color:#cdd8e6;transition:color .2s var(--ease)}
.footer-contact a:hover{color:#fff}

.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-col .footer-social{margin-top:16px}
.footer-col__about{margin-top:18px}
.footer-social__link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background .2s var(--ease),transform .2s var(--ease)}
.footer-social__link:hover{background:var(--color-primary);transform:translateY(-2px)}
.footer-social__link svg{width:18px;height:18px}
/* Facebook, Messenger and WhatsApp are drawn as solid marks; Instagram is
   the only one of the four that is a line drawing. */
.footer-social__link.is-fb svg,
.footer-social__link.is-solid svg{fill:currentColor;stroke:none}

/* betalingsmåter */
.site-footer__pay{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.1)}
.footer-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:clamp(60px,9vw,120px);padding-top:28px;padding-bottom:18px}
.footer-copy{margin:0;font-size:13px;color:#9fb0c2}
.footer-pays{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pay{display:inline-flex;align-items:center}
.pay__logo{height:26px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.7;transition:opacity .2s var(--ease)}
.pay:hover .pay__logo{opacity:1}
/* studio credit: its own row under the copyright and the payment marks */
.footer-credit{padding-bottom:22px;text-align:center}
.footer-credit__link{font-size:12px;color:#9fb0c2;text-decoration:none;transition:color .2s var(--ease)}
.footer-credit__link:hover,.footer-credit__link:focus-visible{color:#fff;text-decoration:underline}

@media (max-width:1180px){ .site-footer__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .site-footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  .site-footer{min-height:0}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:30px 22px;padding-block:46px 22px}
  .footer-col--brand{grid-column:1 / -1;padding-top:0}
  .footer-brand__logo{width:84px}
  .footer-col__title{font-size:13px;margin-bottom:14px}
  .footer-col--brand{display:none}
  .footer-links{gap:9px}
  .footer-links a,.footer-links__cookies,.footer-contact li{font-size:14px}
  .footer-contact{gap:11px}
  .footer-pay{justify-content:space-between;gap:10px;flex-wrap:nowrap}
  .footer-pays{gap:10px;flex-wrap:nowrap}
  .pay__logo{height:20px}
  /* Background: the goalie on the right. */
  .site-footer::before{background-position:right 78%}
}

/* ============================================================
   HANDLEKURV (drawer)
   ============================================================ */
/*
 * Scoped to the dialog: WooCommerce's add-to-cart form is also class "cart",
 * and unscoped these rules took it out of flow and hid it, so no product page
 * had a working buy area.
 */
.cart[role="dialog"]{position:fixed;inset:0;z-index:100;visibility:hidden;transition:visibility .35s var(--ease)}
.cart[role="dialog"].is-open{visibility:visible}
.cart__backdrop{position:absolute;inset:0;background:rgba(8,16,30,.5);opacity:0;transition:opacity .35s var(--ease);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cart[role="dialog"].is-open .cart__backdrop{opacity:1}
.cart__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);display:flex;flex-direction:column;background:var(--color-surface);box-shadow:-24px 0 60px -24px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .35s var(--ease)}
.cart[role="dialog"].is-open .cart__panel{transform:none}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--color-border)}
.cart__title{font-size:19px;font-weight:800;color:var(--color-text)}
.cart__count{color:var(--color-text-muted);font-weight:700}
.cart__close{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--color-text);transition:background .2s var(--ease)}
.cart__close:hover{background:var(--color-hover)}
.cart__close svg{width:20px;height:20px;stroke-width:2}
.cart__items{flex:1;overflow-y:auto;padding:6px 16px;display:flex;flex-direction:column}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--color-border)}
.cart-item__img{width:64px;height:80px;object-fit:cover;border-radius:var(--radius-sm);background:var(--color-media-1);flex-shrink:0}
.cart-item__info{flex:1;min-width:0}
.cart-item__brand{font-size:12px;color:var(--color-text-muted);font-weight:600}
.cart-item__name{font-size:15px;font-weight:700;color:var(--color-text);margin-top:2px}
.cart-item__meta{
  font-size:12.5px;color:var(--color-text-soft);margin-top:6px;
  /* A set note runs to a dozen names; the drawer row shows the start of it. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.cart-item__end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.cart-item__price{font-size:15px;font-weight:800;color:var(--color-text)}
.cart-item__remove{font-size:12.5px;color:var(--color-text-muted);transition:color .2s var(--ease)}
.cart-item__remove:hover{color:var(--color-primary)}
.cart-empty{padding:48px 8px;text-align:center;color:var(--color-text-muted)}
.cart__foot{padding:18px 22px;border-top:1px solid var(--color-border)}
.cart__row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--color-text)}
.cart__row strong{font-size:22px;font-weight:800}
.cart__note{font-size:12.5px;color:var(--color-text-muted);margin-top:4px}
.cart__cta{width:100%;margin-top:14px;justify-content:center;padding:15px}

/* ============================================================
   DEMO-DOCK (hero-variant + tema)
   ============================================================ */
.demo-dock{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:8px;padding:7px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-lg)}
.demo-dock__btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;color:var(--color-text);background:var(--color-hover);transition:background .2s var(--ease),color .2s var(--ease)}
.demo-dock__btn svg{width:17px;height:17px}
.demo-dock__btn:hover,.demo-dock__btn[aria-pressed="true"]{background:var(--color-primary);color:#fff}

/* ============================================================
   TRUST BADGES (header)
   ============================================================ */
.trust{display:flex;align-items:center;gap:18px;margin-left:auto}
.trust__item{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#aebccd;white-space:nowrap}
.trust__item svg{width:22px;height:22px;color:var(--color-primary);flex-shrink:0}
a.trust__item{text-decoration:none;transition:color .2s var(--ease)}
a.trust__item:hover{color:#fff}

/* ============================================================
   CARD title link
   ============================================================ */
.card__title-link{color:inherit;transition:color .2s var(--ease)}
.card__title-link:hover{color:var(--color-primary)}
.grid-empty{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--color-text-muted);font-size:17px}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{display:flex;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.pagination__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);
  font-size:14.5px;font-weight:700;color:var(--color-text);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.pagination a.page-numbers:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pagination .page-numbers.current{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}
.pagination .page-numbers.dots{min-width:26px;padding:0;border-color:transparent;background:none;color:var(--color-text-muted)}
.pagination .page-numbers.prev,
.pagination .page-numbers.next{font-size:22px;line-height:1}

/* ============================================================
   QTY STEPPER
   ============================================================ */
/* Element-qualified on purpose: WooCommerce's quantity field is
   <input class="qty">, so a bare .qty rule dressed it as a stepper shell —
   which is what pushed the number 8px below the − and + buttons. */
div.qty{display:inline-flex;align-items:center;gap:2px;margin-top:8px;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:2px}
.qty__btn{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:17px;font-weight:700;color:var(--color-text);line-height:1;transition:background .15s var(--ease),color .15s var(--ease)}
.qty__btn:hover{background:var(--color-primary);color:#fff}
.qty__val{min-width:26px;text-align:center;font-weight:700;font-size:14px;color:var(--color-text)}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:120;
  padding:13px 22px;border-radius:var(--radius-pill);background:var(--color-secondary);color:#fff;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* The script sets is-on; this rule used to read is-visible, so no toast in
   the theme had ever appeared. */
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* The sign-up link needs its label, and the row cannot hold the label, three
   badges and a usable search field at once: below 1300px the badges go first.
   They are reassurance the footer repeats; the search field is the shop. */
@media (max-width:1300px){ .trust{display:none} }

/* ============================================================
   KATEGORI-TOPP (brødsmuler + tittel)
   ============================================================ */
.cat-head{padding-block:clamp(22px,3vw,38px) 0}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--color-text-muted)}
.crumbs a{color:var(--color-text-muted);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--color-primary)}
.crumbs__sep{opacity:.5}
.crumbs [aria-current]{color:var(--color-text);font-weight:600}
.cat-head__title{font-size:clamp(24px,3.4vw,38px);font-weight:800;color:var(--color-text);margin-top:10px}
.cat-head + .catalog{padding-top:clamp(20px,3vw,32px)}

/* ============================================================
   PRODUKT-SLIDER (forside: Nyheter / Populært)
   ============================================================ */
.pslider-section{padding-block:clamp(34px,5vw,60px) 0}
.pslider-section--first{padding-top:var(--section-spacing)}
.pslider-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.pslider-head__title{font-size:clamp(20px,2.6vw,28px);font-weight:800;color:var(--color-text)}
.pslider-head__right{display:flex;align-items:center;gap:16px}
.pslider-all{font-size:14px;font-weight:700;color:var(--color-primary);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:gap .2s var(--ease)}
.pslider-all svg{width:16px;height:16px;stroke-width:2.2}
.pslider-all:hover{gap:9px}
.pslider-nav{display:flex;gap:8px}
.pslider-arrow{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pslider-arrow:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.pslider-arrow svg{width:20px;height:20px;stroke-width:2.2}
.pslider__track{display:flex;gap:clamp(16px,1.6vw,24px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-top:14px;padding-bottom:72px;margin-bottom:-58px;-ms-overflow-style:none;scrollbar-width:none}
.pslider__track::-webkit-scrollbar{display:none}
.pslider__track .card{flex:0 0 calc((100% - 3*clamp(16px,1.6vw,24px))/4);scroll-snap-align:start}

/* ============================================================
   SEO-TEKST (forside)
   ============================================================ */
.home-descr{padding-block:clamp(40px,6vw,80px)}
.home-descr__title{font-size:clamp(21px,2.7vw,30px);font-weight:800;color:var(--color-text);margin-bottom:16px}
@keyframes logo-jelly{0%{transform:scale(1)}25%{transform:scale(1.09) rotate(-2.2deg)}50%{transform:scale(1.04) rotate(1.6deg)}72%{transform:scale(1.06) rotate(-.7deg)}100%{transform:scale(1.04) rotate(0deg)}}
.home-descr__body{color:var(--color-text-muted);font-size:15.5px;line-height:1.75;max-width:82ch}
.home-descr__body p{margin-bottom:14px}
.home-descr__sub{font-size:16px;font-weight:700;letter-spacing:.2px;color:var(--color-text);margin:22px 0 8px}
.home-descr__layout{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.home-descr__media{display:flex;justify-content:center;align-items:center}
.home-descr__logo{width:100%;max-width:400px;height:auto;transition:filter .4s var(--ease);transform-origin:center center}
.home-descr__media:hover .home-descr__logo{filter:drop-shadow(0 0 18px rgba(239,93,17,.65)) drop-shadow(0 0 48px rgba(239,93,17,.22));animation:logo-jelly .55s ease-out both}
@media (prefers-reduced-motion:reduce){.home-descr__media:hover .home-descr__logo{animation:none;transform:scale(1.03)}}
@media (max-width:860px){ .home-descr__layout{grid-template-columns:1fr} .home-descr__media{display:none} }

@media (max-width:1180px){ .pslider__track .card{flex-basis:calc((100% - 2*clamp(16px,1.6vw,24px))/3)} }
@media (max-width:680px){ .pslider__track .card{flex-basis:calc((100% - clamp(16px,1.6vw,24px))/2)} }
@media (max-width:560px){
  .pslider__track .card{flex-basis:80%}
  .pslider-head{flex-wrap:wrap}
}

/* ============================================================
   PROMO-BLOKKER (forside)
   ============================================================ */
.promos{padding-block:clamp(34px,5vw,62px)}
.promos__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.promo{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  background-color:#0b1626;background-size:cover;background-position:center right;background-repeat:no-repeat;
  min-height:clamp(212px,25vw,290px);padding:clamp(26px,3.4vw,44px);border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow-md)}
.promo--gift{background-image:url("../images/gavekort.webp")}
.promo--service{background-image:url("../images/skoyteslip.webp")}
.promo__link{position:absolute;inset:0;z-index:1;display:block}
.promo__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .promo__video{display:none} }
.promo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg, rgba(8,15,28,.92), rgba(8,15,28,.55) 40%, rgba(8,15,28,.05) 72%, transparent 84%),linear-gradient(to top, rgba(8,15,28,.6), transparent 52%)}
.promo__inner{position:relative;z-index:2}
.promo__eyebrow{font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--color-primary)}
.promo--service .promo__eyebrow{color:#9cc2ec}
.promo__title{font-size:clamp(23px,2.7vw,34px);font-weight:800;line-height:1.1;letter-spacing:-.5px;color:#fff;margin-top:14px}
.promo__text{margin-top:13px;max-width:44ch;color:rgba(223,231,241,.78);font-size:14.5px;line-height:1.6}
.promo__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:13px 26px;
  border:1.5px solid rgba(255,255,255,.5);border-radius:var(--radius-pill);color:#fff;font-weight:700;
  font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),gap .25s var(--ease)}
.promo__cta svg{width:15px;height:15px;stroke-width:2.6}
.promo__cta:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;gap:13px}
@media (max-width:760px){ .promos__grid{grid-template-columns:1fr} .promo{min-height:196px} }

/* ============================================================
   FOOTER — åpningstider
   ============================================================
   The week itself is not printed any more: the shop keeps its hours in
   Google and changes them there, so the column carries one link rather
   than a copy that goes quietly out of date. */
.footer-hours__note{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#9fb0c2}
.footer-hours__link{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);
  font-size:14px;font-weight:700;color:#e8edf3;text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.footer-hours__link svg{width:17px;height:17px;flex-shrink:0;color:var(--color-primary)}
.footer-hours__link:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}

/* On a phone the footer is two columns, so each is 161px wide. Four social
   marks at 38px need 182px and the fourth dropped to a line of its own;
   the hours pill broke in two for the same reason. Both are measured to
   the column rather than guessed. */
@media (max-width:560px){
  .footer-social{gap:7px}
  .footer-social__link{width:34px;height:34px}
  .footer-social__link svg{width:16px;height:16px}
  .footer-hours__link{padding:10px 12px;font-size:13.5px;white-space:nowrap}
  .footer-hours__link svg{width:16px;height:16px}
}

/* ============================================================
   ANMELDELSER (social proof)
   ============================================================ */
.reviews{padding-block:clamp(48px,7vw,88px);background:var(--color-surface)}
.reviews__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:clamp(28px,4vw,44px)}
.reviews__title{font-size:clamp(22px,2.8vw,32px);font-weight:800;color:var(--color-text)}
.reviews__rating{display:flex;align-items:center;gap:10px}
.reviews__stars{color:#f59e0b;font-size:20px;letter-spacing:2px;line-height:1}
.reviews__score{font-size:20px;font-weight:800;color:var(--color-text)}
.reviews__score span{font-size:13px;font-weight:500;color:var(--color-text-muted);margin-left:2px}
.reviews__badge{font-size:12px;font-weight:600;color:var(--color-text-muted);border:1px solid var(--color-border);padding:4px 12px;border-radius:var(--radius-pill)}

.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.review-card{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.5vw,26px);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.review-card__stars{color:#f59e0b;font-size:14px;letter-spacing:2px;line-height:1}
.review-card__text{font-size:14.5px;line-height:1.72;color:var(--color-text-soft);flex:1}
.review-card__author{font-size:13px;font-weight:700;color:var(--color-text);padding-top:12px;border-top:1px solid var(--color-border);margin-top:auto}

@media (max-width:900px){.reviews__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reviews__grid{grid-template-columns:1fr}}

/* ---- semi-trekkspill (lang tekst + anmeldelser) ---- */
.collapse-toggle{display:none}
.collapse-toggle[hidden]{display:none}
@media (max-width:680px){
  .collapsible{position:relative;overflow:hidden;max-height:var(--collapse-h,230px);transition:max-height .4s var(--ease)}
  .collapsible::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fade-h,96px);background:linear-gradient(to top,var(--fade-to,var(--color-background)),transparent);pointer-events:none;transition:opacity .3s var(--ease)}
  .collapsible.is-open{max-height:2400px}
  .collapsible.is-open::after{opacity:0}
  .collapse-toggle{display:flex;align-items:center;gap:7px;width:max-content;margin-top:16px;padding:10px 20px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary);font-weight:700;font-size:14px;box-shadow:var(--shadow-sm)}
  .collapse-toggle svg{width:16px;height:16px;stroke-width:2.4;transition:transform .25s var(--ease)}
  .collapse-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .reviews .collapse-toggle{margin-inline:auto}
  .reviews__grid.collapsible{--fade-to:var(--color-surface);--collapse-h:440px}
  /* Two lines of the category text, then fog. The line-height here is 1.7. */
  .catalog__descr .term-description.collapsible{--collapse-h:3.4em;--fade-h:34px}
  .catalog__descr .collapse-toggle{margin-top:10px;padding:8px 16px;font-size:13px}
}

/* ============================================================
   PRODUKTSIDE (PDP)
   ============================================================ */
main.product{padding-block:clamp(8px,.8vw,10px) clamp(44px,6vw,80px)}
.product__layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);margin-top:clamp(16px,2.4vw,28px);align-items:start}
.product__media{position:sticky;top:clamp(16px,2vw,24px)}
.product__media-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-media-1);aspect-ratio:4/5;box-shadow:var(--shadow-md)}
.product__img{width:100%;height:100%;object-fit:cover;display:block}
.product__badges .badge{top:16px}
.product__brand{font-size:16px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--color-text)}
/* The maker leads to its brand page; it reads as the label it was until the
   pointer finds it. */
.product__brand-link{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.product__brand-link:hover,.product__brand-link:focus-visible{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
.product__name{font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.5px;margin-top:6px;color:var(--color-text)}
.product__variant{margin-top:10px;font-size:14px;color:var(--color-text-soft)}
.product__price{display:flex;align-items:baseline;gap:12px;margin-top:18px}
.product__price .card__price-now{font-size:clamp(26px,3vw,32px)}
.product__price .card__price-old{font-size:17px}
.product__save{margin-top:7px;font-size:14px;font-weight:700;color:var(--color-primary)}
/* Printed always, shown only while WooCommerce says the combination is
   unfinished; see sporter_choose_options_hint(). */
.product__choose{display:none;margin:0 0 12px;font-size:14px;color:var(--color-text-soft)}
.woocommerce-variation-add-to-cart-disabled .product__choose{display:block}
.product__buy{margin-top:24px;padding-top:24px;border-top:1px solid var(--color-border)}
.product__label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted)}
.product__sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.product__cta-row{display:flex;align-items:stretch;gap:12px;margin-top:22px}
.product__cta-row div.qty{margin-top:0}
.product__add{min-height:52px;font-size:15px}
.product__fav{width:52px;height:52px;flex:0 0 auto}
.product__assurances{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:13.5px;color:var(--color-text-soft)}
.product__assurances li{display:flex;align-items:center;gap:8px}
.product__assurances svg{width:18px;height:18px;stroke:var(--color-primary);fill:none;stroke-width:2}
/* What the buyer types in: the name and number to be printed. Laid out as one
   row with the number narrow, because a number is two characters and a field
   sized for twelve invites twelve. */
.product__personalisation{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:12px;margin:0 0 16px;
}
.product__field{display:flex;flex-direction:column;gap:5px;margin:0}
.product__field-label{
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);
}
.product__field-input{
  width:100%;min-height:46px;padding:10px 14px;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text);
  /* Longhand, because "inherit" is not a family name: as a shorthand value
     it took the whole declaration down with it and left these at 400. */
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;
  letter-spacing:.5px;text-transform:uppercase;
}
.product__field-input::placeholder{color:var(--color-text-muted);font-weight:600;letter-spacing:.5px}
.product__field-input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.product__field-hint{font-size:12px;color:var(--color-text-muted);line-height:1.35}
.product__field--nummer .product__field-input{text-align:center}
@media (max-width:520px){
  .product__personalisation{grid-template-columns:minmax(0,1fr) 84px}
  .product__field-hint{display:none}
  .product__field--navn .product__field-hint{display:block}
}

/* Sold in sets: the quantity box opens at the floor, this says why. */
.product__minimum{
  width:100%;margin:0 0 6px;font-size:13.5px;font-weight:700;color:var(--color-primary);
}
/* And this says what it comes to. It carries the weight the variation price
   carries on a product with options, because it answers the same question:
   what will actually be paid. */
.product__set-total{
  width:100%;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px;
}
.product__set-total-sum{
  font-size:clamp(22px,2.6vw,28px);font-weight:800;line-height:1.1;color:var(--color-primary);
}
.product__set-total-note{font-size:14px;font-weight:600;color:var(--color-text-muted)}
/* The one thing a club has to tell us about its set: which sizes, and whose
   names go on the backs. One box rather than a row of counters plus a box —
   the answer is prose, and asking for it twice gets it once. */
.product__setnote{width:100%;display:flex;flex-direction:column;gap:5px;margin:0}
.product__setnote-label{
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);
}
.product__setnote-input{
  /* Four lines of the example, so none of it is cut off at rest. */
  width:100%;min-height:118px;padding:11px 14px;resize:vertical;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-text);
  /* Longhand: "inherit" is not a family name, so the font shorthand that
     carries it is dropped whole and a textarea falls back to monospace. */
  font-family:inherit;font-size:15px;font-weight:600;line-height:1.5;
}
.product__setnote-input::placeholder{color:var(--color-text-muted);font-weight:500}
.product__setnote-input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:transparent}
.product__setnote-hint{font-size:12px;color:var(--color-text-muted);line-height:1.35}
.product__desc{margin-top:30px;color:var(--color-text-soft);line-height:1.7;font-size:15px}

/* ---- TRUE runs small: the one thing a skate buyer has to read ----
   Tinted with the accent rather than boxed in grey: this sits between the buy
   form and the description, and a grey card there reads as one more collapsed
   section to scroll past. The tint is the same one a chosen filter carries,
   so the page keeps two meanings for orange and not three. */
.product__sizing{
  margin-top:26px;padding:18px clamp(16px,2vw,22px);
  background:var(--color-chip-on);border:1px solid var(--color-chip-on-border);
  border-radius:var(--radius-lg);
  color:var(--color-text-soft);font-size:14.5px;line-height:1.65;
}
.product__sizing__title{
  display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-size:16px;font-weight:800;line-height:1.3;color:var(--color-text);
}
.product__sizing__title svg{width:20px;height:20px;flex-shrink:0;color:var(--color-primary)}
.product__sizing p{margin:0}
.product__sizing p+p{margin-top:10px}
.product__sizing__app{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  font-weight:700;font-size:14px;color:var(--color-text);text-decoration:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.product__sizing__app:hover{border-color:var(--color-chip-on-border);box-shadow:var(--shadow-sm)}
.product__sizing__app>svg{width:38px;height:38px;flex-shrink:0;color:var(--color-primary)}
.product__sizing__apple{fill:currentColor;stroke:none}
.product__sizing__app span{flex:1;min-width:0}
.product__sizing__go{color:var(--color-text-muted);transition:transform .2s var(--ease)}
.product__sizing__app:hover .product__sizing__go{transform:translateX(3px)}
.product__desc p+p{margin-top:12px}
.product__specs{margin-top:26px;border-top:1px solid var(--color-border)}
.product__specs li{
  display:grid;grid-template-columns:minmax(110px,32%) minmax(0,1fr);gap:16px;
  padding:13px 2px;border-bottom:1px solid var(--color-border);font-size:14.5px;line-height:1.5;
}
.product__specs .spec__k{color:var(--color-text-muted)}
.product__specs .spec__v{font-weight:700;color:var(--color-text)}
.product__related{margin-top:clamp(40px,6vw,72px)}
/* Kjøpes ofte sammen.
   A list rather than a carousel of cards: four full product cards asked the
   customer to start shopping again under a product they had already chosen,
   and what most of them actually want down here is a pair of laces and a
   guard. One line each, one button, the theme's own surface and chip. */
.fbt{margin-top:clamp(24px,4vw,48px)}
.fbt__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.fbt__title{font-size:clamp(20px,2.6vw,28px);font-weight:800;color:var(--color-text)}
.fbt__all{font-size:14px;font-weight:700;color:var(--color-primary);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:gap .2s var(--ease)}
.fbt__all svg{width:16px;height:16px;stroke-width:2.2}
.fbt__all:hover{gap:9px}
.fbt__form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:6px 20px 20px;box-shadow:var(--shadow-sm)}
.fbt__list{list-style:none;margin:0;padding:0}
.fbt__row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--color-border)}
.fbt__row:last-child{border-bottom:0}
/* checkboxes keep the browser control, only the row changes */
.fbt__tick{flex:0 0 auto;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--color-primary);cursor:pointer}
.fbt__thumb{flex:0 0 auto;width:58px;height:58px;display:block;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
/* Same trick as the cards: WordPress puts the class on the <picture> wrapper
   when Imagify has a WebP twin, and object-fit means nothing on a <picture>. */
.fbt__img{display:block;width:100%;height:100%;padding:5px;object-fit:contain}
.fbt__img img{width:100%;height:100%;object-fit:contain}
.fbt__body{flex:1 1 auto;min-width:0}
.fbt__tag{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);margin-bottom:2px}
.fbt__name{display:block;font-size:15px;line-height:1.35;font-weight:600;color:var(--color-text);cursor:pointer}
.fbt__qty{color:var(--color-text-muted);font-weight:700}
.fbt__chosen{display:block;margin-top:3px;font-size:13.5px;color:var(--color-text-soft)}
.fbt__chosen[hidden]{display:none}
.fbt__variant{appearance:none;display:block;width:100%;max-width:250px;margin-top:8px;padding:8px 34px 8px 12px;font:inherit;font-size:14px;color:var(--color-text);
  background:var(--color-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7789' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center/16px;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer}
.fbt__variant:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.fbt__price{flex:0 0 auto;font-size:15.5px;font-weight:800;color:var(--color-text);white-space:nowrap}
.fbt__price del{font-weight:600;color:var(--color-text-muted)}
.fbt__price ins{text-decoration:none;color:var(--color-primary)}
.fbt__foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.fbt__submit{flex:0 0 auto;padding:14px 26px;font-size:15px}
.fbt__submit:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.fbt__submit:disabled:hover{background:var(--color-cta)}
.fbt__price [hidden]{display:none}
.fbt__note{margin:0;flex:1 1 200px;font-size:13.5px;color:var(--color-text-soft)}
@media (max-width:680px){
  .fbt__form{padding:2px 14px 16px}
  .fbt__row{gap:10px;padding:12px 0}
  .fbt__thumb{width:50px;height:50px}
  .fbt__name{font-size:14.5px}
  .fbt__price{font-size:14.5px}
  .fbt__variant{max-width:none}
  .fbt__submit{width:100%}
}
.product-missing{padding:clamp(50px,9vw,100px) 0;text-align:center;color:var(--color-text-soft);font-size:16px}
.product-missing a{color:var(--color-primary);font-weight:700}
@media (max-width:860px){
  .product__layout{grid-template-columns:1fr;gap:24px}
  .product__media{position:static}
  .product__media-frame{aspect-ratio:1/1;max-width:520px;margin-inline:auto}
}
@media (max-width:440px){
  .product__cta-row{flex-wrap:wrap}
  .product__add{flex:1 1 auto}
}

/* ==========================================================================
   WooCommerce price markup
   --------------------------------------------------------------------------
   Prices are printed by WooCommerce (get_price_html) rather than assembled in
   the template, so that B2BKing's per-customer-group pricing is respected.
   Woo emits <del>/<ins>; these rules give that the same appearance as the
   mockup's .card__price-old / .card__price-now.
   ========================================================================== */

.card__price .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/*
 * Woo prints a bare .amount for a fixed price and wraps it in <del>/<ins> only
 * on sale, so the neutral size is set on .amount and the sale pair overrides it.
 */
.card__price .amount{font-size:21px;font-weight:800;color:var(--color-text);line-height:1.15}
.card__price del{font-size:14px;color:#9aa3af;text-decoration:line-through}
.card__price del .amount{font-size:14px;font-weight:600;color:#9aa3af;text-decoration:line-through}
.card__price ins{text-decoration:none}
.card__price ins .amount{color:var(--color-primary)}
.card__price .from{font-size:14px;font-weight:600;color:var(--color-text-muted);margin-right:2px}

.product__price .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.product__price .amount{font-size:clamp(26px,3vw,32px);font-weight:800;color:var(--color-text);line-height:1.1}
.product__price del{font-size:17px}
.product__price del .amount{font-size:17px;font-weight:600;color:#9aa3af}
.product__price ins{text-decoration:none}
.product__price ins .amount{color:var(--color-primary)}
.product__price .from{font-size:15px;font-weight:600;color:var(--color-text-muted)}

/* Woo's loop button carries our .btn--cart plus its own utility classes. */
.card__actions .added_to_cart{display:none}
.card__actions .btn--cart.loading{opacity:.65;pointer-events:none}

/* ==========================================================================
   WooCommerce forms inside the theme's own chrome
   --------------------------------------------------------------------------
   The buy area and the drawers render WooCommerce's own markup (variation
   form, quantity input, notices). These rules dress that
   markup in the design system rather than replacing it, so plugin fields added
   to the same hooks inherit the styling instead of looking foreign.
   ========================================================================== */

/* --- variation form -------------------------------------------------- */
.product__buy form.cart{display:flex;flex-direction:column;gap:16px;margin:0}

/*
 * Woo prints the attribute chooser as a table. Every part of it is taken out
 * of table layout together — making only the rows flex leaves the table box
 * degenerate, which dropped the whole buy area into the top-left corner and
 * pushed the page into horizontal scroll.
 */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td{display:block;width:100%;max-width:100%;padding:0;border:0;text-align:left}
.variations{border-collapse:collapse;margin:0}
.variations tr{margin-bottom:14px}
.variations th{margin-bottom:6px}
.variations .label label{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted)}
.variations select{
  appearance:none;width:100%;padding:12px 40px 12px 14px;font:inherit;font-size:15px;color:var(--color-text);
  background:var(--color-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7789' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer
}
.variations select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.woocommerce-variation-price .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:clamp(22px,2.6vw,28px);font-weight:800;color:var(--color-primary)}
.woocommerce-variation-availability{font-size:14px;color:var(--color-text-soft)}
.woocommerce-variation-description{font-size:14.5px;color:var(--color-text-soft);line-height:1.6}

/* --- sharpening, sold with the skates --------------------------------- */
/* Set apart from the size selects above it with a tinted panel: this is an
   extra purchase, not another thing to choose about the skates, and a buyer
   skimming for the buy button should be able to tell the two apart. */
/* The add-to-cart row is a flex line holding quantity and the button; this
   takes a full line of its own above them rather than a column beside them. */
.sliping{
  flex:1 0 100%;order:-1;
  margin:4px 0 6px;padding:14px 16px 16px;
  background:var(--color-chip-on);border:1px solid var(--color-chip-on-border);
  border-radius:var(--radius-md);
}
.sliping__q{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 9px}
.sliping__q label{font-size:15px;font-weight:800;color:var(--color-text)}
.sliping__price{font-size:14px;font-weight:700;color:var(--color-primary)}
.sliping__select{
  appearance:none;width:100%;padding:12px 40px 12px 14px;font:inherit;font-size:15px;color:var(--color-text);
  background:var(--color-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7789' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer
}
.sliping__select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.sliping__radius{margin-top:12px}
.sliping__radius[hidden]{display:none}
.sliping__label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted)}
.sliping__note{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--color-text-soft)}

/* --- add-ons, ticked beside the product ------------------------------- */
/* The same tinted panel as the sharpening, for the same reason: these are
   extra purchases, not another answer about the product itself. */
.tillegg{
  flex:1 0 100%;order:-1;
  margin:4px 0 6px;padding:14px 16px 8px;
  background:var(--color-chip-on);border:1px solid var(--color-chip-on-border);
  border-radius:var(--radius-md);
}
.tillegg__title{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--color-text)}
.tillegg__row{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer}
.tillegg__row + .tillegg__row{border-top:1px solid var(--color-chip-on-border)}
.tillegg__tick{flex:0 0 auto;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--color-primary);cursor:pointer}
.tillegg__tick:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.tillegg__name{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.35;color:var(--color-text)}
.tillegg__price{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--color-primary);white-space:nowrap}

/* --- quantity + add to cart ------------------------------------------- */
.product__buy .quantity{display:inline-flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);overflow:hidden}
.product__buy .quantity input.qty{
  width:64px;padding:11px 6px;font:inherit;font-size:15px;font-weight:700;text-align:center;
  color:var(--color-text);background:transparent;border:0;-moz-appearance:textfield
}
.product__buy .quantity input.qty::-webkit-outer-spin-button,
.product__buy .quantity input.qty::-webkit-inner-spin-button{opacity:1;height:28px}

.product__buy .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;
  font:inherit;font-size:15px;font-weight:800;letter-spacing:.01em;color:#fff;cursor:pointer;
  background:var(--color-cta);border:0;border-radius:var(--radius-pill);transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease)
}
.product__buy .single_add_to_cart_button:hover{background:var(--color-cta-hover)}
.product__buy .single_add_to_cart_button:active{transform:translateY(1px)}
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed}

.product__buy form.cart:not(.variations_form){flex-direction:row;flex-wrap:wrap;align-items:center}
.product__buy .stock{font-size:14px;color:var(--color-text-soft)}
.product__buy .stock.out-of-stock{color:#c0392b;font-weight:700}

/* --- WooCommerce notices ---------------------------------------------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  margin:0 0 18px;padding:14px 18px;list-style:none;font-size:14.5px;line-height:1.55;
  border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)
}
.woocommerce-message{border-left:3px solid var(--color-primary)}
.woocommerce-error{border-left:3px solid #c0392b;color:#7c2418}

/* --- submenu "everything in <category>" -------------------------------- */
.submenu__link--all{font-weight:800;color:var(--color-primary)}
.submenu__item--all{margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--color-border)}

/* --- cart drawer ------------------------------------------------------ */
.cart-item.is-busy{opacity:.5;pointer-events:none}
.cart-item__name a{color:inherit}
.cart-item__name a:hover{color:var(--color-primary)}
.cart-item__end .btn--cart{min-height:38px;padding:0 14px;font-size:13px}
.cart-item__end .added_to_cart{display:none}

/* Breadcrumb separator. */
.crumbs__sep{margin:0 8px;opacity:.45}

/* ==========================================================================
   WooCommerce markup on the views the theme owns
   --------------------------------------------------------------------------
   WooCommerce's own stylesheets are dequeued there (see functions.php), so
   whatever it still prints is dressed here rather than half-inheriting a
   generic theme's look.
   ========================================================================== */

/* --- product gallery ---------------------------------------------------
   Woo appends a thumbnail strip after the main image, so the fixed aspect
   belongs to the image viewport, not to the whole frame — otherwise the
   thumbnails are clipped by the frame's overflow. */
.product__media-frame{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;border-radius:0}
.product__media-frame .woocommerce-product-gallery{position:relative}
/*
 * Direct children only. With slider support the wrapper sits inside
 * .flex-viewport, and framing both would double the shadow — and putting a
 * ratio on a container whose height flexslider also sets sends the two into a
 * loop. The ratio therefore lives on the image, which is a replaced element
 * and cannot feed back into its own box.
 */
.product__media-frame .woocommerce-product-gallery > .flex-viewport,
.product__media-frame .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-media-1);box-shadow:var(--shadow-md)
}
.woocommerce-product-gallery__wrapper{margin:0;padding:0;list-style:none}
.woocommerce-product-gallery__image a{display:block}
.woocommerce-product-gallery__image img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;
  padding:clamp(14px,3vw,34px)
}

.woocommerce-product-gallery__trigger{
  position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;font-size:0;text-indent:0;color:transparent;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;
  box-shadow:var(--shadow-sm);cursor:pointer
}
.woocommerce-product-gallery__trigger::after{
  content:"";width:18px;height:18px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122139' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") no-repeat center/contain
}

/* The strip decides its own tile size instead of being given one. A fixed
   width leaves the row ragged at whatever count happens not to divide into it:
   the six-colour training jersey put five across and the sixth alone underneath,
   with 99px of unused space still on the first row. Asking the grid to fill the
   track instead, the tiles give up the few pixels that buys a sixth column and
   the strip ends flush with the picture above it. Galleries here run from one
   thumbnail to twenty-three, so the count has to come out of the measurement,
   not out of a number written here. */
.flex-control-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
  gap:10px;margin:14px 0 0;padding:0;list-style:none
}
.flex-control-thumbs li{min-width:0}
/* Full strength, all of them. A dimmed thumbnail reads as a colour the shop
   does not have — which on this catalogue is exactly what the strip is for:
   three greys of the same jersey, told apart by their colour. Which one is
   open is said by the border, not by draining the photograph. */
.flex-control-thumbs img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;padding:6px;cursor:pointer;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  transition:border-color .2s var(--ease)
}
.flex-control-thumbs img:hover{border-color:var(--color-text-soft)}
.flex-control-thumbs img.flex-active{border-color:var(--color-primary)}

@media (max-width:860px){
  .product__media-frame{max-width:520px;margin-inline:auto}
  /* The strip follows the main image: whatever shape it takes, they match. */
  .woocommerce-product-gallery__image img,
  .flex-control-thumbs img{aspect-ratio:1/1}
}

/* --- product description ----------------------------------------------
   Descriptions are client-entered and some carry markup pasted from other
   sites. Nothing in there may break the page: wide content scrolls inside
   its own box and preformatted text wraps in the site's own font. */
.product__desc{overflow-x:auto}
.product__desc img,
.product__desc video,
.product__desc iframe,
.product__desc table{max-width:100%;height:auto}
.product__desc pre{white-space:pre-wrap;word-break:break-word;font:inherit;color:inherit;background:none;padding:0;margin:0}
.product__desc ul,
.product__desc ol{margin:12px 0 12px 20px;list-style:revert}
.product__desc li{margin-bottom:4px}
.product__desc a{color:var(--color-primary);text-decoration:underline}
.product__desc h1,
.product__desc h2,
.product__desc h3,
.product__desc h4{margin:18px 0 8px;font-weight:800;color:var(--color-text);line-height:1.25}
.product__desc h1,
.product__desc h2{font-size:19px}
.product__desc h3,
.product__desc h4{font-size:16px}

/* --- the button Woo prints in the grid --------------------------------- */
.card__actions .btn--cart{border:0;cursor:pointer;text-align:center}
.card__actions .btn--cart::before{display:none}

/* --- grid cards against real catalogue photos -------------------------
   The body is stretched so that the price and the buttons line up across a
   row whatever the title does. */
.card__body{flex:1}
.card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{margin-top:auto;padding-top:2px}
.card__actions{margin-top:8px}

/* Visually hidden, still read aloud. Woo and WordPress both emit this class;
   the theme carries its own copy rather than relying on core's stylesheet. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}

/* ============================================================
   HEADER
   ------------------------------------------------------------
   The header scrolls away with the page: no sticky, no hide on
   scroll. Both were there and both read as a fault — the bar
   froze at the top for a few wheel turns and then vanished.
   ============================================================ */
/* The mobile menu is a fixed overlay inside the header, so the off-canvas
   list counts towards the page width and puts a horizontal scrollbar on
   every phone. Clipping the nav while it is closed keeps that from
   happening; open, the list is on screen and nothing is clipped. */
@media (max-width:900px){
  .mainnav:not(.is-open){overflow:hidden}
}

/* ============================================================
   CHROME HARDENING
   ------------------------------------------------------------
   Cart, checkout and account keep WooCommerce's and Elementor's
   stylesheets — the theme cannot drop them there, the stock
   WooCommerce screens need them. Both style bare elements:
   `.woocommerce-page img` forces height:auto and
   `.elementor-kit-5 button` paints every button navy with 18px
   30px of padding. Those selectors outrank this theme's single
   class rules and load after them, so the theme's own chrome is
   restated below behind a scope — `.reveal-shell` for the page,
   the drawer and footer elements for what sits outside it — that
   lifts the specificity just enough to win.
   ============================================================ */
.reveal-shell .logo__img{height:clamp(68px,7vw,96px);width:auto}

.reveal-shell .mainnav__trigger{
  padding:0;background-color:transparent;
  font-size:15px;color:#e8edf3;
}
.reveal-shell .mainnav__trigger:hover{color:#fff}
.reveal-shell .mainnav__link--sale.mainnav__trigger{color:var(--color-primary)}
.reveal-shell .mainnav__link--sale.mainnav__trigger:hover{color:#ff7a33}

.reveal-shell .nav-toggle,
.reveal-shell .search-toggle,
.reveal-shell .search-overlay__close{padding:0;background-color:transparent;color:#fff}

/* The drawers and the footer sit outside .reveal-shell — the design slides
   the page over the footer — so they carry their own scope. */
.cart[role="dialog"] button{padding:0;font-size:inherit;color:inherit;background-color:transparent}

.cart[role="dialog"] .cart__close{color:var(--color-text)}
.cart[role="dialog"] .cart__close:hover{background-color:var(--color-hover)}

.cart[role="dialog"] .cart-item__remove{font-size:12.5px;color:var(--color-text-muted)}
.cart[role="dialog"] .cart-item__remove:hover{color:var(--color-primary)}

.cart[role="dialog"] .qty__btn{font-size:17px;color:var(--color-text)}
.cart[role="dialog"] .qty__btn:hover{background-color:var(--color-primary);color:#fff}

.cart[role="dialog"] .btn--cart{padding:13px 16px;font-size:14.5px;color:#fff;background-color:var(--color-cta)}
.cart[role="dialog"] .btn--cart:hover{background-color:var(--color-cta-hover)}
.cart[role="dialog"] .cart-item__end .btn--cart{padding:0 14px;font-size:13px}

.site-footer .pay__logo{height:26px;width:auto}
/* On cart and checkout Elementor's kit colours every h3 dark, which drew the
   column titles in grey on the navy footer. */
.site-footer .footer-col__title{color:#fff}
.site-footer .pay__logo--tight{height:12px}

.reveal-shell .search__btn{
  padding:0 18px;font-size:14px;color:#fff;
  background-color:var(--color-primary);
}
.reveal-shell .search__btn:hover{background-color:var(--color-primary-600)}

@media (max-width:900px){
  .reveal-shell .logo__img{height:clamp(52px,11vw,68px)}
  .reveal-shell .mainnav__trigger{padding:10px 0}
}
@media (max-width:560px){
  .site-footer .pay__logo{height:20px}
  .site-footer .pay__logo--tight{height:9px}
}

/* ============================================================
   CONTENT PAGE
   The layout the theme uses for pages Elementor does not render
   — the account screens, and anything the builder never touched.
   ============================================================ */
/* Scoped to the element: WordPress also puts "page" on <body> for every
   page, the static front page included, and an unscoped rule padded the
   whole document — the unexplained gap above the header. */
main.page{padding-block:clamp(24px,3.5vw,40px) clamp(48px,7vw,90px)}
.page__title{margin:10px 0 24px;font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.15;color:var(--color-text)}
.page__content{color:var(--color-text-soft);line-height:1.7;font-size:15.5px}
.page__content p+p{margin-top:12px}
.page__content img,
.page__content video,
.page__content iframe{max-width:100%;height:auto}
.page__content ul,
.page__content ol{margin:12px 0 12px 20px;list-style:revert}
.page__content li{margin-bottom:4px}
/* A button in the content is a button, not a link: without the exclusion the
   link colour paints its label the same orange as its own background. */
.page__content a:not(.btn){color:var(--color-primary);text-decoration:underline}
.page__content h2,
.page__content h3,
.page__content h4{margin:22px 0 8px;font-weight:800;color:var(--color-text);line-height:1.25}
.page__content h2{font-size:22px}
.page__content h3{font-size:18px}
.page__content h4{font-size:16px}

/* ---- long-form text pages: terms, privacy, about ----
   The shop's own screens share .page__content — cart, checkout and the
   account tabs are WooCommerce markup this theme only frames — so the
   reading treatment is a modifier the template adds when it renders the
   page itself, and is kept off .wc-screen on top of that.

   Width is capped on the running text rather than on the container: a
   page can hold a component of its own (the contact cards, the gift-card
   facts) that wants the full column, and those are nested deeper than
   the child selectors below reach. */
body:not(.wc-screen) .page__content--prose{font-size:17px;line-height:1.75}
body:not(.wc-screen) .page__content--prose > p,
body:not(.wc-screen) .page__content--prose > ul,
body:not(.wc-screen) .page__content--prose > ol,
body:not(.wc-screen) .page__content--prose > blockquote,
body:not(.wc-screen) .page__content--prose > h2,
body:not(.wc-screen) .page__content--prose > h3,
body:not(.wc-screen) .page__content--prose > h4{max-width:72ch}
body:not(.wc-screen) .page__content--prose p+p{margin-top:16px}
body:not(.wc-screen) .page__content--prose p.lead{font-size:19.5px;line-height:1.6;color:var(--color-text)}

/* A section heading has to win against the paragraph above it by size and
   by the space over it, not by weight alone — the terms page is fourteen
   sections of near-identical prose, and at 16px they read as bold
   sentences rather than as headings. */
body:not(.wc-screen) .page__content--prose > h2{font-size:clamp(20px,2.2vw,25px);margin:40px 0 12px}
body:not(.wc-screen) .page__content--prose > h3{font-size:clamp(17.5px,1.9vw,20px);margin:30px 0 10px}
body:not(.wc-screen) .page__content--prose > h4{font-size:17.5px;margin:26px 0 8px}
body:not(.wc-screen) .page__content--prose > :first-child{margin-top:0}

body:not(.wc-screen) .page__content--prose ul,
body:not(.wc-screen) .page__content--prose ol{margin:16px 0 16px 24px}
body:not(.wc-screen) .page__content--prose li{margin-bottom:8px}
body:not(.wc-screen) .page__content--prose li::marker{color:var(--color-primary)}
body:not(.wc-screen) .page__content--prose a{text-underline-offset:3px;text-decoration-thickness:1px}
body:not(.wc-screen) .page__content--prose strong{color:var(--color-text);font-weight:700}
body:not(.wc-screen) .page__content--prose blockquote{
  margin:24px 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--color-primary);
  font-size:18px;color:var(--color-text);
}
body:not(.wc-screen) .page__content--prose blockquote p+p{margin-top:10px}
body:not(.wc-screen) .page__content--prose hr{margin:36px 0;border:0;border-top:1px solid var(--color-border)}

/* A table is data, not prose: it takes the column it needs and scrolls on a
   phone rather than being squeezed into the reading measure. */
body:not(.wc-screen) .page__content--prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
body:not(.wc-screen) .page__content--prose th,
body:not(.wc-screen) .page__content--prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top}
body:not(.wc-screen) .page__content--prose th{font-weight:700;color:var(--color-text)}

/* The title of a text page carries more of the page than a shop heading
   does, so it gets the room to say so. */
body:not(.wc-screen) .page--prose .page__title{margin-bottom:30px}

/* 17px over a 72ch column reads well; over a phone's 343px it is a very
   short line, so the body steps back down where the measure is set by the
   screen rather than by the cap. */
@media (max-width:560px){
  body:not(.wc-screen) .page__content--prose{font-size:16px;line-height:1.7}
  body:not(.wc-screen) .page__content--prose p.lead{font-size:17.5px}
  body:not(.wc-screen) .page__content--prose > h2{margin-top:32px}
}

/* WooCommerce prints the account screens and dresses them with its own
   stylesheet; the theme only frames them. A login form stretched across a
   1440px container is the one thing that needs reining in. */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.woocommerce-ResetPassword{max-width:520px}

/* ============================================================
   CART, CHECKOUT AND ACCOUNT
   ------------------------------------------------------------
   WooCommerce renders these three screens and its own stylesheet
   dresses them for a generic theme. The markup is deliberately
   left alone — payment, shipping, gift cards and B2BKing all hook
   into it — so the design is laid over the top instead. The
   .wc-screen body class keeps every rule below off the views the
   theme renders itself.
   ============================================================ */

/* ---- notices ---- */
.wc-screen .woocommerce-message,
.wc-screen .woocommerce-info,
.wc-screen .woocommerce-error{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin:0 0 18px;padding:14px 18px;
  background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);border-left:4px solid var(--color-primary);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  font-size:14.5px;line-height:1.5;list-style:none;
}
.wc-screen .woocommerce-message::before,
.wc-screen .woocommerce-info::before,
.wc-screen .woocommerce-error::before{display:none}
.wc-screen .woocommerce-error{border-left-color:#d92d20}
.wc-screen .woocommerce-message .button,
.wc-screen .woocommerce-info .button{margin-left:auto}

/* The content-page prose rule underlines every link; these screens are UI, not
   prose, so only the links that read as links keep the underline. */
.wc-screen .page__content a{text-decoration:none}
.wc-screen .page__content .woocommerce-privacy-policy-link,
.wc-screen .page__content .woocommerce-terms-and-conditions-link,
.wc-screen .page__content .shipping-calculator-button,
.wc-screen .page__content .lost_password a,
.wc-screen .page__content .showlogin,
.wc-screen .page__content .showcoupon{text-decoration:underline}

/* ---- buttons ----
   WooCommerce qualifies its own button rules with .woocommerce and an element
   or a second class, so these have to reach the same specificity to land. */
.wc-screen .woocommerce a.button,
.wc-screen .woocommerce button.button,
.wc-screen .woocommerce input.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;
  background:var(--color-cta);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;line-height:1;
  border:0;border-radius:var(--radius-md);cursor:pointer;
  transition:background .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease);
}
.wc-screen .woocommerce a.button:hover,
.wc-screen .woocommerce button.button:hover,
.wc-screen .woocommerce input.button:hover{background:var(--color-cta-hover);color:#fff}
.wc-screen .woocommerce a.button.alt,
.wc-screen .woocommerce button.button.alt,
.wc-screen .woocommerce input.button.alt,
.wc-screen #place_order{background:var(--color-primary);color:#fff}
.wc-screen .woocommerce a.button.alt:hover,
.wc-screen .woocommerce button.button.alt:hover,
.wc-screen .woocommerce input.button.alt:hover,
.wc-screen #place_order:hover{background:var(--color-primary-600);box-shadow:0 12px 30px -10px rgba(239,93,17,.7)}
.wc-screen .woocommerce button.button:disabled,
.wc-screen .woocommerce button.button:disabled[disabled],
.wc-screen .woocommerce a.button.disabled{opacity:.5;color:#fff;pointer-events:none}

/* ---- form fields ---- */
.wc-screen .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0}
.wc-screen .form-row label{font-size:13.5px;font-weight:600;color:var(--color-text)}
.wc-screen .form-row .required{color:var(--color-primary);text-decoration:none}
.wc-screen .input-text,
.wc-screen input[type="text"],
.wc-screen input[type="email"],
.wc-screen input[type="tel"],
.wc-screen input[type="password"],
.wc-screen input[type="number"],
.wc-screen textarea,
.wc-screen select{
  width:100%;min-height:46px;padding:11px 14px;
  background:var(--color-surface);color:var(--color-text);
  font:inherit;font-size:15px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.wc-screen textarea{min-height:110px;resize:vertical}
.wc-screen .input-text:focus,
.wc-screen input:focus,
.wc-screen textarea:focus,
.wc-screen select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(239,93,17,.15)}
.wc-screen .form-row.woocommerce-invalid .input-text{border-color:#d92d20}
.wc-screen .form-row-first,
.wc-screen .form-row-last{width:100%;float:none}
.wc-screen .select2-container .select2-selection--single{height:46px;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.wc-screen .select2-container .select2-selection--single .select2-selection__rendered{line-height:44px;padding-left:13px;color:var(--color-text)}
.wc-screen .select2-container .select2-selection--single .select2-selection__arrow{height:44px}

/* WooCommerce qualifies its own field rule with `.woocommerce form .form-row`,
   which outranks the block above; the same values are repeated to match it. */
.wc-screen .woocommerce form .form-row .input-text,
.wc-screen .woocommerce form .form-row select,
.wc-screen .woocommerce form .form-row textarea{
  min-height:46px;padding:11px 14px;
  background:var(--color-surface);color:var(--color-text);
  font:inherit;font-size:15px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.wc-screen .woocommerce form .form-row textarea{min-height:110px}
.wc-screen .woocommerce form .form-row .input-text:focus,
.wc-screen .woocommerce form .form-row select:focus,
.wc-screen .woocommerce form .form-row textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(239,93,17,.15)}
.wc-screen .woocommerce form .form-row.woocommerce-invalid .input-text{border-color:#d92d20}

/* checkboxes keep the browser control, only the row changes */
.wc-screen .form-row label.checkbox,
.wc-screen label.woocommerce-form__label-for-checkbox{
  flex-direction:row;align-items:flex-start;gap:9px;
  display:flex;font-weight:500;color:var(--color-text-soft);line-height:1.5;
}
.wc-screen .form-row input[type="checkbox"]{width:18px;height:18px;min-height:0;margin-top:1px;flex-shrink:0;accent-color:var(--color-primary)}

/* ---- panels: the white card everything on these screens sits in ---- */
.wc-screen .woocommerce-cart-form,
.wc-screen .cart_totals,
.wc-screen #order_review,
.wc-screen .woocommerce-billing-fields,
.wc-screen .woocommerce-shipping-fields,
.wc-screen .woocommerce-additional-fields,
.wc-screen .woocommerce-form-login,
.wc-screen .checkout_coupon{
  padding:clamp(16px,2vw,24px);
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.wc-screen .woocommerce-billing-fields,
.wc-screen .woocommerce-shipping-fields,
.wc-screen .woocommerce-additional-fields{margin-bottom:18px}
/* Shipping always goes to the billing address in this shop, so WooCommerce
   prints the shipping block with nothing in it — an empty white panel. It is
   not :empty (it holds whitespace), hence the no-element-children test. */
.wc-screen .woocommerce-shipping-fields:not(:has(*)){display:none}
.wc-screen h2,
.wc-screen h3{margin:0 0 14px;font-size:18px;font-weight:800;color:var(--color-text);line-height:1.25}
.wc-screen .woocommerce-billing-fields h3,
.wc-screen .woocommerce-shipping-fields h3{margin-top:0}

/* ============================================================
   CART
   ============================================================ */
/* Floats, not a grid. The basket and the price request under it are one
   column of flowing content; the totals are a sidebar beside them. A grid
   cannot say that: the totals have to span both rows, and a spanning item
   hands part of its height to every row it covers, which pushed the price
   request a hundred-odd pixels below the products it is about.

   Both columns float. The left ones clear only their own side, so they stack
   under each other and pass the right-hand sidebar by. */
.woocommerce-cart .page__content > .woocommerce{
  --aside:min(380px,36%);
  --aside-gap:clamp(18px,2.2vw,28px);
  display:flow-root;
}
.woocommerce-cart .woocommerce-notices-wrapper{clear:both;width:100%}
.woocommerce-cart .woocommerce-notices-wrapper:not(:empty){margin-bottom:18px}
.woocommerce-cart .woocommerce .cart-collaterals{float:right;width:var(--aside);margin:0}
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .tilbud{float:left;clear:left;width:calc(100% - var(--aside) - var(--aside-gap))}
.woocommerce-cart .tilbud{margin-top:clamp(14px,1.6vw,20px)}
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals{width:100%;float:none}

.woocommerce-cart table.cart{width:100%;margin:0;border:0;border-collapse:collapse}
.woocommerce-cart table.cart thead th{
  padding:0 0 12px;border:0;border-bottom:1px solid var(--color-border);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-text-muted);text-align:left;
}
.woocommerce-cart table.cart td{padding:16px 0;border:0;border-bottom:1px solid var(--color-border);vertical-align:middle;background:none}
.woocommerce-cart table.cart tr:last-child td{border-bottom:0}
.woocommerce-cart td.product-remove{width:36px}
.woocommerce-cart td.product-remove .remove{
  display:grid;place-items:center;width:28px;height:28px;
  color:var(--color-text-muted);font-size:19px;line-height:1;
  border-radius:50%;background:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.woocommerce-cart td.product-remove .remove:hover{background:var(--color-hover)}
/* WooCommerce paints the remove cross red with !important. */
.woocommerce-cart td.product-remove .remove{color:var(--color-text-muted)!important}
.woocommerce-cart td.product-remove .remove:hover{color:var(--color-primary)!important}
.woocommerce-cart td.product-thumbnail{width:88px;padding-right:14px}
.woocommerce-cart td.product-thumbnail img{width:72px;height:72px;object-fit:contain;padding:4px;background:var(--color-media-1);border-radius:var(--radius-md)}
.woocommerce-cart td.product-name a{font-size:15px;font-weight:700;color:var(--color-text)}
.woocommerce-cart td.product-name a:hover{color:var(--color-primary)}
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal{white-space:nowrap}
.woocommerce-cart td.product-subtotal .amount{font-weight:800;color:var(--color-text)}
.woocommerce-cart td.product-quantity{width:110px}
.woocommerce-cart td.product-quantity .quantity{margin:0}
.woocommerce-cart td.product-quantity input.qty{width:84px;min-height:42px;text-align:center;padding:9px 6px}

/* WooCommerce floats the coupon box left and the update button right. The cell
   stays a table cell — making it a flex container drops it out of the column
   model and resizes the whole table — so the floats are kept and only given a
   width and something to be contained by. */
.woocommerce-cart td.actions{padding-top:20px;border-bottom:0;overflow:hidden}
.woocommerce-cart td.actions .coupon{display:flex;gap:10px;float:left;width:min(440px,100%);margin:0;padding:0}
.woocommerce-cart td.actions .coupon{flex-wrap:wrap}
.woocommerce-cart td.actions .coupon .input-text{width:auto;flex:1 1 200px;min-width:0}
.woocommerce-cart td.actions .coupon .button{flex:0 0 auto;white-space:nowrap}
/* WooCommerce's cart.js checks the code in the browser and appends its message
   inside .coupon. Without a row of its own it became a third item on the line
   and squeezed the field down to a few characters. */
.woocommerce-cart td.actions .coupon .coupon-error-notice{
  flex:1 1 100%;order:9;margin:0;font-size:13px;line-height:1.4;color:#c0392b}
.woocommerce-cart td.actions .coupon .input-text.has-error{border-color:#c0392b}
.woocommerce-cart td.actions button[name="update_cart"]{float:right}
.woocommerce-cart td.actions .b2bking_loader_hidden,
.woocommerce-cart td.actions div:empty{display:none}

.woocommerce-cart .cart_totals table{width:100%;margin:0;border:0;border-collapse:collapse;table-layout:fixed}
.woocommerce-cart .cart_totals td{overflow-wrap:anywhere}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{padding:11px 0;border:0;border-bottom:1px solid var(--color-border);font-size:14.5px;text-align:left;background:none}
.woocommerce-cart .cart_totals th{font-weight:600;color:var(--color-text-soft);width:40%}
.woocommerce-cart .cart_totals td{text-align:right}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td{border-bottom:0;padding-top:15px;font-size:17px;font-weight:800;color:var(--color-text)}
.woocommerce-cart .cart_totals .includes_tax{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--color-text-muted)}

/* Delivery is the one row that is a question rather than a number. Four
   options squeezed into the 40% left over from a price wrapped onto three
   lines each; given the whole panel they read as a list. The same row shows
   up in the basket and again at the checkout, so both are named here. */
/* The cell spans both columns — see woocommerce/cart/cart-shipping.php. The
   left-aligning pair is doubled because the checkout's own rule for tfoot
   cells is right-aligned at the same specificity and sits later in this file. */
.wc-screen td.sporter-shipping-cell,
.wc-screen tfoot tr.woocommerce-shipping-totals td.sporter-shipping-cell{text-align:left}
.wc-screen .sporter-shipping-name{
  display:block;margin-bottom:7px;
  font-size:14.5px;font-weight:600;color:var(--color-text-soft);
}
.wc-screen .woocommerce-shipping-methods{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.wc-screen .woocommerce-shipping-methods li{display:flex;align-items:flex-start;gap:9px;margin:0;padding:0}
.wc-screen .woocommerce-shipping-methods li::marker{content:none}
.wc-screen .woocommerce-shipping-methods input{width:auto;min-height:0;margin:1px 0 0;flex-shrink:0;accent-color:var(--color-primary)}
.wc-screen .woocommerce-shipping-methods label{margin:0;line-height:1.35;font-weight:500}
.wc-screen .woocommerce-shipping-destination{margin:8px 0 0;font-size:12.5px;color:var(--color-text-muted)}
.woocommerce-cart .woocommerce-shipping-methods{margin:0;padding:0;list-style:none;text-align:left}
.woocommerce-cart .woocommerce-shipping-methods li{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px;font-size:14px}
.woocommerce-cart .woocommerce-shipping-methods input[type="radio"]{width:17px;height:17px;min-height:0;margin-top:2px;flex-shrink:0;accent-color:var(--color-primary)}
.woocommerce-cart .woocommerce-shipping-destination{margin-top:8px;font-size:12.5px;color:var(--color-text-muted);text-align:left}
.woocommerce-cart .shipping-calculator-button{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600;color:var(--color-primary);text-decoration:underline}
.woocommerce-cart .wc-proceed-to-checkout{margin-top:18px;padding:0}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{display:flex;width:100%;min-height:52px;font-size:16px;background:var(--color-primary)}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover{background:var(--color-primary-600)}
/* Vipps Login's button, drawn by the theme: see sporter_vipps_login_cart_button(). */
.woocommerce-cart .wc-proceed-to-checkout .continue-with-vipps-wrapper{display:block;width:100%;margin:0 0 10px}
.woocommerce-cart .wc-proceed-to-checkout a.sporter-vipps-login{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--color-primary);color:#fff}
.woocommerce-cart .wc-proceed-to-checkout a.sporter-vipps-login:hover{background:var(--color-primary-600);color:#fff}
.sporter-vipps-login__logo{width:auto;height:17px;flex-shrink:0;transform:translateY(2.5px)}

/* ============================================================
   CHECKOUT
   ============================================================ */
.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  grid-template-rows:auto 1fr;
  align-items:start;
  gap:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,32px);
}
.woocommerce-checkout #customer_details{grid-column:1;grid-row:1/span 2;width:100%}
.woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin:0}
.woocommerce-checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:24px}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%;float:none;margin:0}

/* Kustom Checkout fills the form with a single #kco-wrapper holding the order
   summary and the payment frame, so the two-column grid above would park it
   in the first column and leave the second empty. The summary takes the wide
   column, the payment frame keeps about the width it is designed for. Below
   1025px the two stack, as the plain checkout does. */
.woocommerce-checkout form.checkout.kco-checkout{display:block}
.woocommerce-checkout #kco-wrapper{padding-top:0;overflow:visible}
.woocommerce-checkout #kco-order-review,
.woocommerce-checkout #kco-iframe{float:none;width:auto;padding:0;font-size:inherit}
@media (min-width:1025px){
  .woocommerce-checkout #kco-wrapper{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,600px);
    align-items:start;
    gap:clamp(18px,2.2vw,32px);
  }
  .woocommerce-checkout #kco-order-review{margin-bottom:0}
}
/* The summary is a white card beside Kustom's own white card. Cells lose
   WooCommerce's side padding so photo, names, totals and the note field all
   line up on the card's inner edge. */
.woocommerce-checkout #kco-order-review{background:var(--color-surface);border-radius:var(--radius-md);padding:20px 24px 24px}
.woocommerce-checkout #kco-order-review table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout #kco-order-review table.woocommerce-checkout-review-order-table td{padding:14px 0}
.woocommerce-checkout #kco-order-review table.woocommerce-checkout-review-order-table thead th{padding:0 0 12px}
.woocommerce-checkout #kco-order-review table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout #kco-order-review table.woocommerce-checkout-review-order-table tr.order-total td{padding:16px 0 0}
.woocommerce-checkout #kco-order-review tr.cart_item td{vertical-align:top}
/* Product photo beside the name, quantity field on its own line under it. */
.woocommerce-checkout #kco-order-review table.woocommerce-checkout-review-order-table td.product-name{position:relative;padding-left:80px}
.woocommerce-checkout .checkout-item__thumb{position:absolute;top:14px;left:0;width:64px;height:64px;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.woocommerce-checkout .checkout-item__thumb img{display:block;width:100%;height:100%;object-fit:contain}
.woocommerce-checkout .checkout-item__name{display:block;min-height:22px}
.woocommerce-checkout #kco-order-review td.product-name .quantity{display:block;margin-top:10px}
.woocommerce-checkout #kco-order-review td.product-name .quantity input.qty{width:64px;height:40px;min-height:0;padding:0 8px;text-align:center}
/* Order note and "Opprett en konto?" under the totals, on the same edge. */
.woocommerce-checkout #kco-extra-checkout-fields{margin-top:22px;padding-top:20px;border-top:1px solid var(--color-border)}
.woocommerce-checkout #kco-extra-checkout-fields .form-row{margin:0 0 14px;padding:0}
.woocommerce-checkout #kco-extra-checkout-fields .form-row:last-child{margin-bottom:0}
/* A row holding only Kustom's hidden shipping input; the input still submits. */
.woocommerce-checkout #kco-extra-checkout-fields #kco_shipping_data_field{display:none}
.woocommerce-checkout #kco-extra-checkout-fields #order_comments{min-height:88px}
@media (max-width:768px){
  .woocommerce-checkout #kco-order-review{padding:16px 16px 20px;margin-bottom:18px}
}
/* Kustom moves the order note out of "Tilleggsinformasjon" and leaves the
   heading on an empty card; hide the card once nothing is left in it. */
.woocommerce-checkout #kco-extra-checkout-fields .woocommerce-additional-fields:not(:has(.woocommerce-additional-fields__field-wrapper > *)){display:none}

.woocommerce-checkout table.woocommerce-checkout-review-order-table{width:100%;margin:0;border:0;border-radius:0;border-collapse:collapse}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td{padding:11px 0;border:0;border-bottom:1px solid var(--color-border);font-size:14.5px;text-align:left;background:none}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table th.product-total{text-align:right;white-space:nowrap}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{font-weight:600;color:var(--color-text)}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity{color:var(--color-text-muted);font-weight:500}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{font-weight:600;color:var(--color-text-soft)}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{text-align:right}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td{border-bottom:0;padding-top:15px;font-size:17px;font-weight:800;color:var(--color-text)}
/* The VAT note under the total rather than beside it, as in the cart. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .includes_tax{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--color-text-muted);white-space:nowrap}
/* WooCommerce's own form, which the page shows when a customer pays with the
   Vipps plugin directly, carries the same photo beside the name. The cell is
   at least as tall as the photo, so a one-line name does not let the photo
   run into the next row. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td{vertical-align:top;padding-top:14px}
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name{position:relative;padding-left:80px;height:92px}

.woocommerce-checkout #payment{margin-top:18px;background:none;border-radius:0}
.woocommerce-checkout #payment ul.payment_methods{margin:0;padding:0;border:0;list-style:none}
.woocommerce-checkout #payment ul.payment_methods li{
  display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;
  margin-bottom:8px;padding:13px 15px;
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  font-size:14.5px;
}
/* Radio, name and logos on one line; Kustom's strip of card logos is one wide
   image that otherwise pushed its own name into a column of single words. */
.woocommerce-checkout #payment ul.payment_methods li label{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-weight:600;color:var(--color-text)}
.woocommerce-checkout #payment ul.payment_methods li label img{width:auto;max-width:100%;height:auto;max-height:28px}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{width:17px;height:17px;min-height:0;accent-color:var(--color-primary)}
.woocommerce-checkout #payment div.payment_box{
  flex-basis:100%;margin:11px 0 0;padding:12px 14px;
  background:var(--color-hover);color:var(--color-text-soft);
  border-radius:var(--radius-sm);font-size:13.5px;line-height:1.6;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment .place-order{margin-top:16px;padding:0}
.woocommerce-checkout #payment #place_order{display:flex;width:100%;min-height:54px;font-size:16.5px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:14px;font-size:13.5px;color:var(--color-text-soft);line-height:1.6}
.woocommerce-checkout .woocommerce-privacy-policy-text p{margin-bottom:10px}
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin-bottom:14px}
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login{max-width:560px;margin-bottom:18px}

/* ============================================================
   ACCOUNT
   ============================================================ */
/* WooCommerce's own layout sheet floats the navigation into a 30% column and
   the content into 68% beside it. The design puts the endpoints in a row of
   pills above a full-width panel, which needs both floats undone — otherwise
   eight pills stack four rows deep in a narrow column. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}
.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:22px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  background:var(--color-surface);color:var(--color-text-soft);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--color-primary);border-color:var(--color-primary)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}
.woocommerce-account .woocommerce-MyAccount-content{
  padding:clamp(16px,2vw,24px);
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

/* ============================================================
   STORE CREDIT — the gift card plugin's account tab
   ------------------------------------------------------------
   The plugin ships its layout as an inline <style> in the body:
   floats, percentage columns and hardcoded light greys. Nothing
   clears those floats, so the account panel collapses to the
   height of its padding and everything below the balance row
   falls out of the card entirely. Two ancestors are named on
   every rule below so they outweigh the plugin's, which arrives
   after this sheet and would otherwise win on order.
   ============================================================ */
.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_store_credit{display:flow-root}

.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_available_balance{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  float:none;width:100%;margin:0 0 28px;padding:14px 18px;line-height:1.3;
  background:var(--color-background);color:var(--color-text);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  font-size:14px;
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_available_balance_left,
.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_available_balance_right{
  float:none;width:auto;height:auto;padding:0;background:none;
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_available_balance_left{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_available_balance_amount{
  font-size:22px;font-weight:800;color:var(--color-text);
}

.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block{float:none;color:inherit;font-size:inherit}
.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_hd{
  margin-bottom:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_desc{
  font-size:14px;line-height:1.6;color:var(--color-text-soft);
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_input_box{
  display:flex;flex-wrap:wrap;gap:10px;float:none;margin-top:12px;
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_input_box input[type="text"]{
  flex:1 1 220px;float:none;width:auto;height:auto;min-height:46px;
  background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
/* The plugin's own button carries no class at all, so every themed button rule
   — each of which asks for .button — misses it and leaves it browser grey. */
.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_input_box button{
  display:inline-flex;align-items:center;justify-content:center;
  float:none;width:auto;min-width:150px;height:auto;min-height:46px;padding:0 20px;
  background:var(--color-cta);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;line-height:1;
  border:0;border-radius:var(--radius-md);cursor:pointer;
  transition:background .2s var(--ease);
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_input_box button:hover{background:var(--color-cta-hover)}

.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_credit_history_block{
  float:none;margin-top:34px;color:inherit;font-size:inherit;
}
.wc-screen .woocommerce-MyAccount-content table.wt_gc_myaccount_credit_history_table{
  width:100%;margin:0;border:0;border-collapse:collapse;
}
.wc-screen .woocommerce-MyAccount-content table.wt_gc_myaccount_credit_history_table thead tr th{
  padding:13px 10px 13px 0;background:none;border:0;border-bottom:1px solid var(--color-border);text-align:left;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wc-screen .woocommerce-MyAccount-content table.wt_gc_myaccount_credit_history_table tr td,
.wc-screen .woocommerce-MyAccount-content table.wt_gc_myaccount_credit_history_table > tbody > tr:nth-child(2n) td{
  padding:13px 10px 13px 0;background:none;border:0;border-bottom:1px solid var(--color-border);
  font-size:14.5px;color:var(--color-text);
}
.wc-screen .woocommerce-MyAccount-content table.wt_gc_myaccount_credit_history_table tbody tr:last-child td{border-bottom:0}
.wc-screen .woocommerce-MyAccount-content table.wt_gc_myaccount_credit_history_table td[colspan]{
  padding:28px 0;text-align:center;color:var(--color-text-muted);
}
.wc-screen .woocommerce-MyAccount-content .wt_gc_wallet_history_pagination{margin-top:18px}
.wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_credit_history_msg_dv{
  min-height:0;padding:28px 0;line-height:1.5;color:var(--color-text-muted);
}

@media (max-width:560px){
  .wc-screen .woocommerce-MyAccount-content .wt_gc_myaccount_available_balance{
    flex-direction:column;align-items:flex-start;gap:4px;
  }
  .wc-screen .woocommerce-MyAccount-content .wt_gc_redeem_block_input_box button{width:100%}
}

/* ============================================================
   REGISTRATION — club, company and retailer
   ------------------------------------------------------------
   The page holds three B2BKing shortcodes inside the accordion
   the product page uses for its specifications. That accordion
   is built for two lines of prose, so a nine-field form in it
   needs its own spacing; everything else the form needs comes
   from .wc-screen above, which this page now carries.
   ============================================================ */
.wc-register .page__content > .acc{
  margin-bottom:12px;
  background:var(--color-surface);
  border:1px solid var(--color-border);border-bottom:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.wc-register .page__content > .acc summary{padding:16px clamp(14px,2vw,22px);font-size:16px}
.wc-register .acc__body{padding:0 clamp(14px,2vw,22px) clamp(16px,2vw,22px);font-size:inherit}

/* Every shortcode prints its own "Registrer deg som kunde" heading, which each
   accordion has already said in its summary — three times over on one page,
   and three more <h2> in the outline than the page has sections. */
.wc-register .b2bking_b2bregistration_only_register_header{display:none}

/* A single column of short fields reads badly across a wide page. */
.wc-register .woocommerce-form-register{max-width:520px}
.wc-register .woocommerce-form-register > p:not(.form-row){margin:0 0 14px;color:var(--color-text-muted);font-size:13.5px}
.wc-register .woocommerce-privacy-policy-text{margin:4px 0 16px;color:var(--color-text-muted);font-size:13px;line-height:1.55}
.wc-register .woocommerce-privacy-policy-text p{margin:0}
.wc-register .b2bking_custom_registration_container{margin:0}
.wc-register .woocommerce-form-register__submit{width:100%;margin-top:4px}

/* ============================================================
   CART AND CHECKOUT — narrow screens
   Below 768px WooCommerce's smallscreen sheet turns the tables
   into stacked rows; these rules dress that state.
   ============================================================ */
@media (max-width:1024px){
  .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr)}
  .woocommerce-cart .woocommerce .cart-collaterals,
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .tilbud{float:none;clear:both;width:100%}
  .woocommerce-cart .woocommerce .cart-collaterals{margin:18px 0 0}
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{grid-column:1;grid-row:auto}
  .woocommerce-cart .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-checkout #order_review{position:static}
}
@media (max-width:768px){
  /* WooCommerce's smallscreen sheet turns the table into stacked rows and
     prefixes every cell with its data-title. Its selectors are qualified with
     .shop_table_responsive, so these have to be too. */
  .woocommerce-cart table.cart.shop_table_responsive thead{display:none}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item{
    display:grid;grid-template-columns:72px minmax(0,1fr) 30px;
    gap:2px 14px;align-items:center;
    padding:14px 0;border-bottom:1px solid var(--color-border);
  }
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td{
    display:block;width:auto;padding:0;border:0;clear:none;
    text-align:left!important;   /* Woo's smallscreen sheet right-aligns with !important */
  }
  .woocommerce-cart table.cart.shop_table_responsive tbody tr:nth-child(2n) td{background:none}
  .woocommerce-cart table.cart.shop_table_responsive tr td::before{content:none;display:none}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-thumbnail{grid-column:1;grid-row:1/span 3}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-name{grid-column:2;grid-row:1}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-remove{grid-column:3;grid-row:1;justify-self:end}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-quantity{grid-column:2;grid-row:2}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-price{display:none}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-subtotal{grid-column:2;grid-row:3}
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-quantity input.qty{width:96px}

  .woocommerce-cart table.cart.shop_table_responsive tr td.actions{display:block;padding-top:18px;text-align:left!important}
  .woocommerce-cart td.actions .coupon{float:none;width:100%;flex-wrap:wrap}
  .woocommerce-cart td.actions .coupon .input-text{flex:1 1 100%}
  .woocommerce-cart td.actions .coupon .button{flex:1 1 100%;width:100%;float:none;margin-top:10px}
  .woocommerce-cart td.actions button[name="update_cart"]{float:none;width:100%;margin-top:10px}

  .woocommerce-cart .cart_totals table.shop_table_responsive tr td::before,
  .woocommerce-checkout table.shop_table_responsive tr td::before{content:none;display:none}
  .woocommerce-cart .cart_totals table.shop_table_responsive tr th,
  .woocommerce-cart .cart_totals table.shop_table_responsive tr td,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tr th,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tr td{display:table-cell}
  .woocommerce-cart .cart_totals table.shop_table_responsive tr td,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tr td{text-align:right!important}
  .woocommerce-cart .cart_totals table.shop_table_responsive tr th,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tr th{text-align:left!important}

  /* The delivery row is a list of choices, not a figure, and the rules above
     put every cell back into a column. It has to be excused by name, at their
     specificity or higher, or the label sinks to the bottom of four wrapped
     options in a column of its own. */
  .woocommerce-cart .cart_totals table.shop_table_responsive td.sporter-shipping-cell,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table td.sporter-shipping-cell,
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tr td.product-name{
    text-align:left!important;
  }
}

/* ---- order received, order details, account tables ---- */
.wc-screen .woocommerce-order{max-width:920px}
.wc-screen .woocommerce-notice--success{margin:0 0 22px;font-size:16px;color:var(--color-text)}
.wc-screen ul.woocommerce-order-overview{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 26px;padding:0;border:0;list-style:none;
}
.wc-screen ul.woocommerce-order-overview li{
  flex:1 1 170px;margin:0;padding:13px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);box-shadow:var(--shadow-sm);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wc-screen ul.woocommerce-order-overview li strong{
  display:block;margin-top:5px;
  font-size:17px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--color-text);
}

/* Log-out button under the overview: the event stand's next buyer starts here. */
.wc-screen .sporter-thankyou-logout{margin:0 0 26px}

.wc-screen .woocommerce-order-details,
.wc-screen .woocommerce-customer-details{
  margin-bottom:20px;padding:clamp(16px,2vw,24px);
  background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
/* inside the account the surrounding panel already provides the card */
.wc-screen .woocommerce-MyAccount-content .woocommerce-order-details,
.wc-screen .woocommerce-MyAccount-content .woocommerce-customer-details{padding:0;background:none;border:0;box-shadow:none}

.wc-screen table.woocommerce-table--order-details,
.wc-screen table.woocommerce-orders-table,
.wc-screen table.woocommerce-table--order-downloads{
  width:100%;margin:0;border:0;border-radius:0;border-collapse:collapse;
}
.wc-screen table.woocommerce-table--order-details th,
.wc-screen table.woocommerce-table--order-details td,
.wc-screen table.woocommerce-orders-table th,
.wc-screen table.woocommerce-orders-table td{
  padding:13px 10px 13px 0;border:0;border-bottom:1px solid var(--color-border);
  font-size:14.5px;text-align:left;background:none;vertical-align:middle;
}
.wc-screen table.woocommerce-table--order-details thead th,
.wc-screen table.woocommerce-orders-table thead th{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wc-screen table.woocommerce-table--order-details tfoot th{font-weight:600;color:var(--color-text-soft)}
.wc-screen table.woocommerce-table--order-details tfoot tr:last-child th,
.wc-screen table.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0;font-size:17px;font-weight:800;color:var(--color-text)}
.wc-screen table.woocommerce-table--order-details td.product-total,
.wc-screen table.woocommerce-table--order-details tfoot td,
.wc-screen table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total{text-align:right;white-space:nowrap}
.wc-screen table.woocommerce-table--order-details td.product-name a{font-weight:600;color:var(--color-text)}
.wc-screen table.woocommerce-table--order-details td.product-name a:hover{color:var(--color-primary)}
.wc-screen table.woocommerce-table--order-details .product-quantity{color:var(--color-text-muted);font-weight:500}
.wc-screen table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{text-align:right}

/* An order carries more buttons than WooCommerce plans for: B2BKing adds "order
   again" to the actions list and the invoice plugin adds printing and download.
   Four call-to-action buttons at full size take two rows per order and shout
   louder than the order they belong to, so in the account they shrink and only
   the one that opens the order keeps the filled treatment. */
.wc-screen table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button,
.wc-screen .order-actions--heading + td .button,
.wc-screen .woocommerce-order-details > a.button,
.wc-screen .woocommerce-MyAccount-content p.order-again .button{
  min-height:34px;padding:0 13px;margin:3px 0 3px 6px;font-size:13px;
}
.wc-screen .woocommerce a.button.wt_pklist_invoice_print,
.wc-screen .woocommerce a.button.wt_pklist_invoice_download,
.wc-screen .woocommerce a.button.order-again{
  background:var(--color-surface);color:var(--color-text-soft);
  border:1px solid var(--color-border);
}
.wc-screen .woocommerce a.button.wt_pklist_invoice_print:hover,
.wc-screen .woocommerce a.button.wt_pklist_invoice_download:hover,
.wc-screen .woocommerce a.button.order-again:hover{
  background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary);
}

/* The invoice plugin prints its two links straight into the page with <br><br>
   between them, which stacks them down the left edge. */
.wc-screen .woocommerce-order-details > br{display:none}
.wc-screen .woocommerce-order-details > a.button{margin-left:0;margin-right:6px}

.wc-screen .woocommerce-columns--addresses,
.wc-screen .woocommerce-Addresses{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:0;
}
.wc-screen .woocommerce-column,
.wc-screen .woocommerce-Address{width:100%;float:none;margin:0;padding:0}
.wc-screen .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wc-screen .woocommerce-Address-title h2,
.wc-screen .woocommerce-Address-title h3{margin-bottom:8px}
/* WooCommerce boxes an address in a 1px/2px asymmetric border with a 5px
   radius — a shape that appears nowhere else in this design. */
.wc-screen .woocommerce-column address,
.wc-screen .woocommerce-Address address{
  font-style:normal;line-height:1.75;color:var(--color-text-soft);
  padding:14px 16px;background:var(--color-surface-alt);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}

@media (max-width:560px){
  /* Woo puts the action link before the text inside a notice; stack it after. */
  .wc-screen .woocommerce-info,
  .wc-screen .woocommerce-message{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px}
  .wc-screen .woocommerce-info .button,
  .wc-screen .woocommerce-message .button{float:none;margin:0}
}

/* The password block is the one <fieldset> in the account, and unstyled it is
   the one hairline box with a notch in it. */
.wc-screen .woocommerce form fieldset{
  margin:6px 0 18px;padding:16px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.wc-screen .woocommerce form legend{padding:0 6px;font-size:13.5px;font-weight:700;color:var(--color-text)}

/* ============================================================
   GIFT CARDS — the plugin's product page in the theme's clothes
   ============================================================ */

/* The gift card is also a WooCommerce product, and the main menu links to that
   URL rather than to the page. There the plugin hangs its whole form on
   `woocommerce_before_single_product_summary` — the hook that normally prints
   the gallery — so the form lands in the narrow media column and its two field
   columns come out under 200px each, with the e-mail inputs cut off.
   One column, and the product's own heading and text read first. */
.product__layout:has(.product__media-frame>.wt_gc_gift_card_product_page_wrapper){
  grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,32px);
}
.product__layout:has(.product__media-frame>.wt_gc_gift_card_product_page_wrapper) .product__info{order:-1}
.product__layout:has(.product__media-frame>.wt_gc_gift_card_product_page_wrapper) .product__media{position:static}

/* The plugin's own heading loses its <h1> to the page title above it, so it is
   dressed as the lead paragraph heading it actually is. */
.wt_gc_gift_card_product_page_title{margin:0 0 4px}
.wt_gc_gift_card_product_page_title h2{
  margin:0;font-size:clamp(19px,2.1vw,25px);font-weight:800;line-height:1.25;color:var(--color-text);
}
.wt_gc_gift_card_product_page_wrapper{color:var(--color-text)}
.wt_gc_gift_card_product_page_wrapper h3{color:var(--color-text)}

/* --- what a buyer wants settled before the form (added in inc/shop.php) --- */
.page__content .gavekort-fakta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  margin:22px 0 0;padding:0;list-style:none;
}
.page__content .gavekort-fakta li{
  margin:0;padding:15px 18px;font-size:14px;line-height:1.5;color:var(--color-text-soft);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
}
.page__content .gavekort-fakta strong{
  display:block;margin-bottom:3px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary);
}

/* --- the two columns --- */
.wt_gc_gift_card_product_page_bottom{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,44px);
  padding-top:clamp(22px,2.8vw,34px);
}
@media (min-width:900px){
  .wt_gc_gift_card_product_page_bottom{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);align-items:start}
  /* The form is the taller column by far; the preview follows the reader down
     it, which is the whole point of a preview. */
  .wt_gc_gift_card_product_page_preview_wrapper{position:sticky;top:24px}
}
.wt_gc_gift_card_product_page_preview_wrapper{min-width:0}

.gavekort-forhandsvisning{
  margin:0 0 12px;font-size:16px;font-weight:800;color:var(--color-text);
}

/* --- the preview of the recipient's e-mail ---
   The plugin's JS throws away the e-mail's outer chrome and leaves one
   .wt_gc_email_wrapper behind, so the panel is drawn on the preview itself.
   Its colours stay fixed rather than tokenised: this is a picture of an e-mail,
   and the e-mail is light in both themes. */
.wt_gc_email_preview{
  float:none;width:100%;margin:0;padding:clamp(10px,1.4vw,16px);
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.wt_gc_email_wrapper{box-shadow:none;border-radius:0;padding-top:0;color:#0f1d33}
.wt_gc_email_wrapper_inner{padding:0}
.wt_gc_email_img{margin-top:0}
/* Beating the template's own inline margin-right, which pushes a width:100%
   image past the right edge of its box. */
.wt_gc_email_img img{margin-right:0 !important;border-radius:var(--radius-md)}
.wt_gc_email_caption{margin-top:14px;font-size:13.5px;color:#5b6b80}
.wt_gc_email_bottom{margin-top:16px;padding-bottom:0}
.wt_gc_email_preview .wt_gc_email_bottom table td{
  padding:14px 0 0 !important;background:transparent;vertical-align:bottom;
}
.wt_gc_email_preview .wt_gc_email_bottom b{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7b889a;
}
.wt_gc_email_coupon_code{
  margin-top:6px;font-size:16px;font-weight:700;letter-spacing:.08em;color:#0f1d33;
}
.wt_gc_email_coupon_price{margin-top:4px;font-size:26px;font-weight:800;color:var(--color-primary)}
.wt_gc_email_coupon_expiry{margin-top:4px;font-size:12.5px;color:#7b889a}

/* --- the form column --- */
.wt_gc_gift_card_product_page_form{
  min-width:0;width:100%;padding:clamp(20px,2.4vw,30px);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.wt_gc_gift_card_product_page_wrapper .wt_gc_gift_card_product_page_form h2{
  margin:0;font-size:16px;font-weight:800;color:var(--color-text);line-height:1.3;
}
.wt_gc_gift_card_product_page_wrapper .wt_gc_gift_card_product_page_form h2.wt_gc_gift_card_product_page_form_hd{
  margin:clamp(24px,3vw,32px) 0 16px;padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--color-border);
}
.wt_gc_gift_card_product_page_form label{color:var(--color-text);font-size:14px;font-weight:600}

/* --- template picker --- */
.wt_gc_gift_card_product_page_templates_container{margin:0;padding-top:14px}
.wt_gc_gift_card_product_page_categories{margin-bottom:14px}
/* Four short chips do not need a scroller; wrapping them also takes the
   arrows away, because the plugin hides those when nothing overflows. */
.wt_gc_gift_card_product_page_categories .wt_gc_carousal_inner{gap:8px;flex-wrap:wrap;overflow:visible}
.wt_gc_gift_card_product_page_categories .wt_gc_gift_card_product_page_category{
  display:inline-flex;align-items:center;height:36px;margin:0;padding:0 16px;
  font-size:14px;font-weight:700;color:var(--color-text-soft);
  background:var(--color-chip);border:1px solid transparent;border-radius:var(--radius-pill);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.wt_gc_gift_card_product_page_categories .wt_gc_gift_card_product_page_category:hover{
  background:var(--color-hover);color:var(--color-text);
}
.wt_gc_gift_card_product_page_categories .wt_gc_gift_card_product_page_category.active{
  background:var(--color-secondary);border-color:var(--color-secondary);color:#fff;text-shadow:none;
}
/* The chip is three spans, two of them empty spacers floated to 15px. */
.wt_gc_gift_card_product_page_category span{float:none;min-width:0;height:auto;line-height:1;white-space:nowrap}

.wt_gc_gift_card_product_page_templates_inner{gap:12px;padding:3px}
.wt_gc_gift_card_product_page_templates_inner div{
  flex:0 0 clamp(150px,33%,200px);padding:0;overflow:hidden;
  border:2px solid var(--color-border);border-radius:var(--radius-md);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.wt_gc_gift_card_product_page_templates_inner div img{
  width:100%;border-radius:calc(var(--radius-md) - 3px);
}
.wt_gc_gift_card_product_page_templates_inner div:hover{border-color:var(--color-text-muted)}
.wt_gc_gift_card_product_page_templates_inner div.active{
  border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(239,93,17,.15);
}

/* --- carousel arrows ---
   The plugin's JS writes `padding: 0px 25px` onto the track inline every time
   it decides arrows are needed, so the arrows are lifted out of that reserved
   strip and set over the edge of the row instead. */
.wt_gc_carousal{padding:0 !important}
.wt_gc_carousal_nav_arrows{
  top:50%;bottom:auto;width:38px;height:38px;margin:0;transform:translateY(-50%);z-index:2;
  font-size:13px;color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:50%;box-shadow:var(--shadow-md);
  transition:background .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.wt_gc_gift_card_product_page_categories .wt_gc_carousal_nav_arrows{height:38px;margin-top:0}
.wt_gc_carousal_nav_arrows span{position:static;width:100%;height:auto;margin:0;line-height:36px;color:inherit}
.wt_gc_carousal_nav_arrows_left{left:4px;border-radius:50%}
.wt_gc_carousal_nav_arrows_right{right:4px;border-radius:50%}
.wt_gc_carousal_nav_arrows.disabled{opacity:0;pointer-events:none}
.wt_gc_carousal_nav_arrows:not(.disabled):hover{
  background:var(--color-secondary);border-color:var(--color-secondary);color:#fff;
}

/* --- upload your own picture --- */
.wt_gc_gift_card_product_page_custom_templates_container{margin:0;padding-top:14px}
.wt_gc_upload_button_container{width:auto}
.wt_gc_upload_button{
  display:inline-flex;flex-direction:column;align-items:flex-start;padding:12px 18px;
  background:var(--color-media-1);border:1px dashed var(--color-border);border-radius:var(--radius-md);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.wt_gc_upload_button:hover{background:var(--color-hover);border-color:var(--color-primary)}
.wt_gc_upload_label{width:auto;font-size:14px;font-weight:700;color:var(--color-text)}
.wt_gc_upload_label_plus_button{
  width:16px;height:16px;margin-right:4px;font-size:12px;line-height:14px;
  color:var(--color-primary);border-color:var(--color-primary);border-radius:50%;
}
.wt_gc_upload_description{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--color-text-muted)}
.wt_gc_gift_card_product_page_custom_template_box{
  margin-top:12px;padding:0;border:2px solid var(--color-border);border-radius:var(--radius-md);
}
.wt_gc_gift_card_product_page_custom_template_box.active{
  border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(239,93,17,.15);
}
.wt_gc_gift_card_product_page_custom_template_box img{border-radius:calc(var(--radius-md) - 3px)}

/* --- the form itself --- */
.wt_gc_gift_card_product_page_form_wrapper{
  padding-bottom:clamp(18px,2.2vw,24px);border-bottom:1px solid var(--color-border);
}
.wt_gc_gift_card_product_page_form_item{float:none;width:100%;margin:0 0 16px;padding:0;clear:none}
.wt_gc_gift_card_product_page_form_item>label{
  display:block;margin:0 0 6px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wt_gc_gift_card_product_page_form_item .wt_gc_gift_card_field,
.wt_gc_gift_card_product_page_form_item input.wt_gc_gift_card_field{
  float:none;width:100%;height:auto;min-height:48px;padding:12px 15px;margin:0;
  font:inherit;font-size:15px;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.wt_gc_gift_card_product_page_form_item textarea.wt_gc_gift_card_field{min-height:120px;line-height:1.6;resize:vertical}
.wt_gc_gift_card_product_page_form_item .wt_gc_gift_card_field:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(239,93,17,.15);
}
.wt_gc_gift_card_product_page_form_item .wt_gc_gift_card_field::placeholder{font-size:15px;color:var(--color-text-muted)}

/* Recipient and sender are two pairs of the same shape, so they read as pairs.
   Hidden inputs collapse on their own; the plugin's clearfix div contributes an
   empty row, which is why the rows are spaced by the items' own margin. */
@media (min-width:560px){
  .wt_gc_gift_card_product_page_form_wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .wt_gc_gift_card_product_page_form_wrapper>*{grid-column:1/-1}
  .wt_gc_gift_card_reciever_email_wt_gc_form_item,
  .wt_gc_gift_card_sender_email_wt_gc_form_item{grid-column:1}
  .wt_gc_gift_card_reciever_name_wt_gc_form_item,
  .wt_gc_gift_card_sender_name_wt_gc_form_item{grid-column:2}
}

/* --- how to send it: two radios that deserve to look like a choice --- */
.wt_gc_gift_card_product_page_form_item:has(input[name="wt_gc_gift_card_action"]){
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;
}
/* !important beats the plugin's inline display/margin on these two spans. */
.wt_gc_gift_card_product_page_form_item span:has(>input[name="wt_gc_gift_card_action"]){
  display:inline-flex !important;align-items:center;gap:9px;margin:0 !important;padding:11px 18px;
  background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.wt_gc_gift_card_product_page_form_item span:has(input[name="wt_gc_gift_card_action"]:checked){
  border-color:var(--color-primary);background:rgba(239,93,17,.07);
}
.wt_gc_gift_card_product_page_form_wrapper .wt_gc_gift_card_product_page_form_item input[type="radio"]{
  width:18px;height:18px;min-height:0;margin:0;accent-color:var(--color-primary);cursor:pointer;
}
.wt_gc_gift_card_product_page_form_item input[type="radio"]+label{
  display:inline;margin:0;font-size:15px;font-weight:600;color:var(--color-text);cursor:pointer;
}

/* --- the amount --- */
.wt_gc_credit_denominations{float:none;display:flex;flex-wrap:wrap;gap:10px;margin:0}
.wt_gc_credit_amount_label{
  float:none;width:100%;margin:0 0 2px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wt_gc_credit_denomination{float:none;height:auto;margin:0}
.wt_gc_credit_denominations .denominaton_label{
  display:flex;align-items:center;justify-content:center;float:none;
  height:48px;min-width:96px;margin:0;padding:0 18px;
  font-size:15px;font-weight:700;color:var(--color-text);
  background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.wt_gc_credit_denominations .denominaton_label:hover{border-color:var(--color-text-muted)}
.wt_gc_credit_denominations .denominaton_label.wt_gc_selected_amount{
  border-color:var(--color-primary);background:rgba(239,93,17,.08);color:var(--color-primary-600);
}
.wt_gc_credit_denominations input[type="radio"]:focus-visible+.denominaton_label{
  outline:2px solid var(--color-primary);outline-offset:2px;
}
.wt_gc_gift_card_custom_price .wt_gc_gift_card_field{
  min-width:140px;height:48px;margin:0;border:1.5px solid var(--color-border);border-radius:var(--radius-md);
}

/* --- send now, or on a date --- */
.wt_gc_gift_card_schedule_field_rows{margin-bottom:12px}
.wt_gc_gift_card_product_page_form label.checkbox{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--color-text);cursor:pointer;
}
.wt_gc_gift_card_product_page_form label.checkbox input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--color-primary);
}
.wt_gc_gift_card_product_page_form_item:has(#wt_gc_gift_card_send_today:checked)+.wt_gc_schedule_wrapper{display:none}
.wt_gc_schedule_wrapper{margin:0 0 16px}
.wt_gc_schedule_container{
  margin:0;padding:16px;
  background:var(--color-media-1);border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.wt_gc_schedule_label{
  display:block;margin:0 0 6px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.wt_gc_schedule_fields_wrapper{display:flex;flex-wrap:wrap;gap:10px}
.wt_gc_date_field_wrapper{float:none;width:auto;flex:1 1 190px;margin:0}
.wt_gc_time_wrapper{float:none;width:auto;flex:0 0 auto}
.wt_gc_time_fields{
  height:48px;padding:0 8px;gap:2px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
}
.wt_gc_time_input{width:38px;height:44px;font-size:15px;color:var(--color-text)}
.wt_gc_time_meridien{width:52px;height:44px;font-size:15px;color:var(--color-text)}
/* The plugin sets these with !important on an id of its own. */
#wt_gc_gift_card_schedule{
  width:100% !important;height:48px;padding:12px 15px !important;font-size:15px;color:var(--color-text);
  background:var(--color-surface) !important;border:1px solid var(--color-border) !important;
  border-radius:var(--radius-md);
}
#wt_gc_gift_card_schedule:focus{border-color:var(--color-primary) !important;box-shadow:0 0 0 3px rgba(239,93,17,.15)}
.wt_gc_timezone_info{float:none;height:auto;margin:10px 0 0;font-size:13px;color:var(--color-text-muted)}

/* --- the calendar ---
   jQuery UI ships its own smoothness theme with the widget; these rules are
   scoped to .ui-datepicker, which nothing else on the site uses. */
.ui-datepicker{
  width:290px;padding:10px;font:inherit;font-size:14px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);z-index:40;
}
.ui-datepicker .ui-datepicker-header{
  padding:2px 0 8px;background:none;border:0;color:var(--color-text);font-weight:800;
}
.ui-datepicker .ui-datepicker-title{margin:0 32px;line-height:30px;text-align:center;font-size:14.5px}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
  top:2px;width:30px;height:30px;cursor:pointer;border:0;background:var(--color-chip);border-radius:50%;
}
.ui-datepicker .ui-datepicker-prev{left:2px}
.ui-datepicker .ui-datepicker-next{right:2px}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover{top:2px;background:var(--color-hover);border:0}
.ui-datepicker .ui-datepicker-prev-hover{left:2px}
.ui-datepicker .ui-datepicker-next-hover{right:2px}
.ui-datepicker .ui-icon{
  /* The sprite is an image on a CDN; a glyph drawn in CSS does not need it. */
  width:30px;height:30px;margin:0;top:0;left:0;
  font-size:0;text-indent:0;background:none;overflow:visible;
}
.ui-datepicker .ui-icon::before{
  display:block;line-height:30px;text-align:center;font-size:12px;color:var(--color-text);
}
.ui-datepicker .ui-datepicker-prev .ui-icon::before{content:"\276E"}
.ui-datepicker .ui-datepicker-next .ui-icon::before{content:"\276F"}
.ui-datepicker table{margin:0;border-collapse:collapse}
.ui-datepicker th{
  padding:6px 0;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-text-muted);border:0;
}
.ui-datepicker td{padding:1px;border:0}
.ui-datepicker td span,
.ui-datepicker td a,
.ui-datepicker td .ui-state-default{
  display:block;padding:8px 0;text-align:center;font-weight:600;
  color:var(--color-text);background:transparent;border:0;border-radius:var(--radius-sm);
}
.ui-datepicker td a.ui-state-default:hover{background:var(--color-hover);color:var(--color-text)}
.ui-datepicker td.ui-datepicker-today .ui-state-default{color:var(--color-primary);background:rgba(239,93,17,.08)}
.ui-datepicker td.ui-datepicker-current-day .ui-state-default,
.ui-datepicker td .ui-state-active{color:#fff;background:var(--color-primary)}
.ui-datepicker td.ui-state-disabled span{color:var(--color-text-muted);opacity:.45}

/* --- buy it --- */
.wt_gc_gift_card_product_page_form form.cart{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,22px);margin:0;
}
.wt_gc_gift_card_product_page_form form.cart .wt_gc_gift_card_product_page_form_wrapper{flex:1 1 100%}
.wt_gc_gift_card_product_page_form .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 34px;
  font:inherit;font-size:15.5px;font-weight:800;color:#fff;cursor:pointer;
  background:var(--color-cta);border:0;border-radius:var(--radius-pill);
  transition:background .25s var(--ease),transform .15s var(--ease);
}
.wt_gc_gift_card_product_page_form .single_add_to_cart_button:hover{background:var(--color-cta-hover)}
.wt_gc_gift_card_product_page_form .single_add_to_cart_button:active{transform:translateY(1px)}
@media (max-width:559px){
  .wt_gc_gift_card_product_page_form .single_add_to_cart_button{width:100%}
}

/* ---- contact form ---- */
.kontaktskjema{max-width:640px;margin:0 0 8px}
.kontaktskjema__melding{
  margin:0 0 20px;padding:14px 18px;border-radius:var(--radius-md);
  border-left:3px solid var(--color-primary);background:var(--color-surface-alt);font-size:15px;
}
.kontaktskjema__melding--ok{border-left-color:#1f9d55}
.kontaktskjema__melding--feil{border-left-color:#c8102e}
.kontaktskjema__rad{display:block;margin:0 0 16px}
.kontaktskjema__rad label{
  display:block;margin-bottom:6px;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);
}
.kontaktskjema__rad label span{color:var(--color-primary)}
.kontaktskjema__rad input,
.kontaktskjema__rad textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);
  font:inherit;font-size:15px;color:var(--color-text);
}
.kontaktskjema__rad textarea{resize:vertical;min-height:150px}
.kontaktskjema__rad input:focus,
.kontaktskjema__rad textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(232,93,26,.16);
}
.kontaktskjema__samtykke{margin:0 0 20px}
.kontaktskjema__samtykke label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--color-text-soft)}
.kontaktskjema__samtykke input{margin-top:3px;flex:0 0 auto}
.kontaktskjema__felle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontaktskjema__send{margin:0}
.kontaktskjema__send .btn{padding:14px 34px}

/* ---- asking for a price on a whole basket ---- */
/* Folded away under the basket. The ordinary customer is here to pay the
   price on the label and should be able to ignore this in one glance; the
   club buying twenty pairs should not have to hunt for it. */
/* Asking for a price, offered right below the checkout button. Dressed as the
   shop's other filled button — the navy of "Bruk rabattkode" — rather than as
   an outline: the two roads out of the basket are both real, and the second
   one was too quiet to be noticed. Orange stays the single call to action.

   The gap is ours, not WooCommerce's: woocommerce.css puts a 1em margin under
   the checkout button, which left the pair looking unrelated. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button{margin-bottom:0}
.btn--quote{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:100%;margin-top:8px;min-height:52px;padding:8px 18px;
  color:#fff;background:var(--color-cta);
}
.btn--quote:hover{background:var(--color-cta-hover);color:#fff}
.btn--quote__label{font-size:15px;font-weight:700;line-height:1.25}
.btn--quote__who{font-size:12.5px;font-weight:600;line-height:1.25;opacity:.72}

.tilbud{margin:clamp(28px,4vw,44px) 0 0;scroll-margin-top:90px}
.tilbud__acc{
  max-width:640px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
}
.tilbud__summary{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:16px clamp(16px,2vw,22px);cursor:pointer;list-style:none;
}
.tilbud__summary::-webkit-details-marker{display:none}
.tilbud__summary::after{
  content:"";margin-left:auto;width:10px;height:10px;flex:0 0 auto;
  border-right:2px solid var(--color-text-muted);border-bottom:2px solid var(--color-text-muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease);
}
.tilbud__acc[open] .tilbud__summary::after{transform:rotate(-135deg) translateY(-2px)}
.tilbud__summary:hover{background:var(--color-hover)}
.tilbud__title{font-size:16.5px;font-weight:800;color:var(--color-text)}
.tilbud__hint{font-size:13.5px;font-weight:600;color:var(--color-text-muted)}
.tilbud__intro{
  margin:0;padding:0 clamp(16px,2vw,22px) 14px;
  font-size:14.5px;line-height:1.6;color:var(--color-text-soft);
}
.tilbud__acc .kontaktskjema__form{padding:0 clamp(16px,2vw,22px) clamp(18px,2vw,22px)}
.tilbud__acc .kontaktskjema__rad textarea{min-height:110px}
.tilbud .kontaktskjema__melding{max-width:640px}

.page__content iframe{width:100%;min-height:380px;border:0;border-radius:var(--radius-lg)}

/* ---- contact cards ---- */
.kontaktkort{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  margin:0 0 32px;padding:0;list-style:none;
}
.kontaktkort__item{
  margin:0;padding:20px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.kontaktkort__item h3{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.kontaktkort__item h3 a{color:inherit}
.kontaktkort__item p{margin:0 0 6px;font-size:14.5px;color:var(--color-text-soft)}
.kontaktkort__item p:last-child{margin-bottom:0;font-size:16px;font-weight:600;color:var(--color-text)}
.page__content p.lead{font-size:18px;color:var(--color-text-soft)}

/* ============================================================
   CATALOGUE — header rhythm and stock state
   ============================================================ */
/*
 * Where the page starts. The three gaps used to read 20 / 38 / 12 at desktop
 * width: the breadcrumbs sat closer to the site header than to the title they
 * introduce, and the title had almost nothing under it, so it hung in the air
 * above a block it seemed to be pressing down on.
 *
 * They now read 28 / 10 / 28, which is the theme's own scale (see the rhythm
 * note further down: 10-16 inside a block, 24-28 between blocks). The
 * breadcrumbs and the title become one group - together they say where you
 * are - and the real break moves under them, where the page changes subject
 * and the filters and the grid begin. Total height barely moves, 70px to
 * 66px: the air is redistributed, not added.
 *
 * The gap under the title belongs to .catalog__layout rather than to the
 * title, so a category with a description and one without end up with the
 * same gap before the grid instead of one of them getting both margins.
 */
.crumbs-bar{padding-top:clamp(16px,2.2vw,28px)}
/* Search and 404 print their breadcrumbs (or nothing) inside .catalog itself,
   so .catalog's own top padding is the gap under the site header there. Where
   a .crumbs-bar has already taken that gap, what is left is the small step
   from the breadcrumbs to the title. */
.crumbs-bar + .catalog{padding-top:clamp(8px,.8vw,10px)}
.crumbs + .catalog__title{margin-top:clamp(8px,.8vw,10px)}
.catalog__title{
  margin:0 0 clamp(8px,1vw,12px);
  font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.015em;
}
.catalog .term-description{
  margin-bottom:0;
  font-size:16px;line-height:1.7;color:var(--color-text-soft);
}
.catalog .term-description p+p{margin-top:12px}
/* Search has no .catalog__layout to carry the break under the title. */
.catalog__title + .toolbar{margin-top:clamp(20px,2.2vw,28px)}

/* The sale splits into four shelves, and the row leading to them is the page's
   own navigation rather than another filter — so it is drawn as a row of doors
   and not as one more line of chips. It stays on the type shelves too: from
   Skøyter, Køller is one click away and "Alt på salg" is always the way back. */
.salgnav{margin-top:clamp(14px,1.6vw,20px)}
.salgnav__list{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,12px);list-style:none;margin:0;padding:0}
.salgnav__link{
  display:flex;align-items:baseline;gap:9px;
  padding:13px clamp(15px,1.6vw,22px);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.salgnav__label{font-size:clamp(15px,1.5vw,17px);font-weight:800;letter-spacing:-.01em;color:var(--color-text)}
.salgnav__count{font-size:13.5px;font-weight:700;color:var(--color-text-muted)}
.salgnav__link:hover{background:var(--color-hover);border-color:var(--color-primary);box-shadow:var(--shadow-md)}
.salgnav__link.is-here{background:var(--color-chip-on);border-color:var(--color-chip-on-border);box-shadow:none}
.salgnav__link.is-here .salgnav__count{color:var(--color-primary)}
.salgnav + .catalog__layout{margin-top:clamp(18px,2vw,26px)}

@media (max-width:560px){
  .salgnav__link{padding:11px 14px;gap:7px}
  .salgnav__label{font-size:14.5px}
  .salgnav__count{font-size:13px}
}

.card__stock{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.card__stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.card__stock--in{color:#1f9d55}
.card__stock--backorder{color:#b06f00}
.card__stock--out{color:#c8102e}

/* ============================================================
   PRODUCT PAGE — offer tags, swatches, stepper, gallery
   ============================================================ */

/* --- the offer, stated next to the title instead of over the photo --- */
.product__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tag{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.4;
}
.tag--discount{background:var(--color-primary);color:#fff}
.tag--offer{background:var(--color-chip);color:var(--color-secondary)}

/* --- attribute swatches; the select stays for WooCommerce and for no-JS --- */
.vswatch{display:flex;flex-wrap:wrap;gap:8px}
/* Caption over a run of sizes — the age bracket they belong to. Full width
   so the row breaks before it, which is what makes the bracket readable. */
.vswatch__group{
  flex:0 0 100%;margin-top:4px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-soft);
}
.vswatch__group:first-child{margin-top:0}
/* Hidden until WooCommerce has worked out which values pair with what is
   already chosen. Drawn immediately, the row would offer every value of the
   attribute and then visibly withdraw half of them. The height is held so the
   page does not jump when it appears. */
.vswatch:not(.is-ready){visibility:hidden;min-height:38px}
.vswatch + .vswatch__select{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%);
}
.vswatch__opt{
  min-width:54px;padding:11px 16px;
  font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.vswatch__opt:hover:not(:disabled){border-color:var(--color-text-soft)}
/* The chosen size is marked with a heavy outline, not a fill: filled, it read
   as a pressed button rather than as the current selection. The ring is drawn
   with an inset shadow so the box never changes size between states. */
.vswatch__opt.is-active{
  border-color:var(--color-secondary);color:var(--color-secondary);
  box-shadow:inset 0 0 0 2px var(--color-secondary);
}
.vswatch__opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
/* A value that can be bought, but not together with what is already chosen —
   whether WooCommerce deleted it or struck it through. It stays on the page,
   drawn quieter and outlined rather than filled, and a click on one keeps it
   and clears the answers that disagree with it. Struck through above is left
   for the real dead end: a value with no buyable variation anywhere. */
.vswatch__opt.is-unavailable{
  color:var(--color-text-soft);border-style:dashed;background:transparent;
}
.vswatch__opt.is-unavailable:hover{color:var(--color-text);border-style:solid}
.variations tr{margin-bottom:18px}
.variations .label label{font-size:12px;letter-spacing:.06em}

/* --- quantity as a stepper rather than a browser spinner --- */
.product__buy .quantity{border-radius:var(--radius-md);overflow:hidden}
.quantity__step{
  width:44px;align-self:stretch;display:grid;place-items:center;
  font-size:19px;font-weight:500;line-height:1;color:var(--color-text-soft);
  background:transparent;border:0;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.quantity__step:hover{background:var(--color-chip);color:var(--color-text)}
.product__buy .quantity--stepper{height:52px}
.product__buy .quantity--stepper input.qty{width:46px;padding:0;align-self:stretch}
.quantity--stepper input.qty::-webkit-outer-spin-button,
.quantity--stepper input.qty::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;height:auto}

/* --- availability, in the same visual language as the card --- */
.product__buy .stock{
  display:flex;align-items:center;gap:7px;margin-bottom:14px;
  font-size:14px;font-weight:600;color:#1f9d55;
}
.product__buy .stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.product__buy .stock.out-of-stock{color:#c8102e}

/* --- gallery: white behind white product shots, readable thumbnails --- */
.product__media-frame .woocommerce-product-gallery > .flex-viewport,
.product__media-frame .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
  background:var(--color-surface);border:1px solid var(--color-border);box-shadow:none;
}
.flex-control-thumbs{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px;margin-top:16px}
@media (max-width:860px){
  /* The frame is capped at 520px from here down, and the wider minimum would
     fit only five across it - the same orphaned sixth, one breakpoint lower. */
  .flex-control-thumbs{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
}

/* --- rhythm -------------------------------------------------------------
   One scale down the column: 6 between a line and its own caption, 10-16
   inside a block, 24 between blocks and across the hairline, 28 between the
   buy area and the reading matter under it. WooCommerce prints most of this
   markup, so the spacing sits on its elements rather than on ours. */
.product__name{margin-top:6px;line-height:1.08}
.product__price{margin-top:12px}
.product__save{margin-top:6px}
.product__buy{margin-top:24px;padding-top:24px}
.product__cta-row{margin-top:20px}

.product__buy form.cart{gap:20px}
.variations{margin:0}
.variations tr{margin-bottom:20px}
.variations tr:last-child{margin-bottom:0}
.variations th{margin-bottom:10px}
.single_variation_wrap{display:flex;flex-direction:column;gap:16px}
.woocommerce-variation-description:not(:empty),
.woocommerce-variation-price:not(:empty){margin-bottom:8px}
.woocommerce-variation-availability .stock{margin-bottom:0}
.woocommerce-variation-add-to-cart{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0}
/* The line naming the axis still unanswered is a sentence, not a control. Left
   to flow it sat beside the quantity and pushed the buy button onto a row of
   its own; given the whole row it reads as the instruction it is and the two
   controls stay together under it. The margin goes because the row has a gap. */
.woocommerce-variation-add-to-cart .product__choose{flex:0 0 100%;margin:0}

.product__assurances{margin-top:24px;padding-top:20px;border-top:1px solid var(--color-border)}
.product__desc{margin-top:28px}
.product__specs{margin-top:28px}
.submenu--right{left:auto;right:0}

/* ============================================================
   CATALOGUE FILTERS
   ============================================================ */
.catalog__layout{
  display:grid;grid-template-columns:minmax(0,262px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);align-items:start;
  /* The break between the page head and the catalogue itself. */
  margin-top:clamp(20px,2.2vw,28px);
}
.catalog__main{min-width:0}

/* Not sticky: the column is taller than any viewport, so it pinned at once,
   travelled as far as the grid allowed and then came unstuck — which looks
   like a bug rather than a feature. */
.shopfilter{
  padding:20px;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
}
.shopfilter__head{display:none}
.shopfilter__reset{
  display:inline-block;margin-bottom:16px;
  font-size:13px;font-weight:600;color:var(--color-primary);text-decoration:underline;
}
.shopfilter__group + .shopfilter__group{margin-top:22px;padding-top:22px;border-top:1px solid var(--color-border)}
.shopfilter__label{
  margin-bottom:12px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);
}
.shopfilter__list{display:flex;flex-direction:column;gap:2px}
.shopfilter__list a{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;margin-inline:-8px;border-radius:var(--radius-sm);
  font-size:14.5px;color:var(--color-text-soft);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.shopfilter__list a:hover{background:var(--color-chip);color:var(--color-text)}
.shopfilter__list a > span:not(.shopfilter__count):not(.shopfilter__box){flex:1;min-width:0}
.shopfilter__count{font-size:12px;font-weight:600;color:var(--color-text-muted)}
.shopfilter__up{font-weight:600}

/* Brand page: departments that open onto the shelves holding the brand. The
   department row reads like a link row, with a chevron where the count's
   neighbour would be. */
.shopfilter__branch > summary{
  display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  padding:7px 8px;margin-inline:-8px;border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:600;color:var(--color-text);
  transition:background .15s var(--ease);
}
.shopfilter__branch > summary::-webkit-details-marker{display:none}
.shopfilter__branch > summary:hover{background:var(--color-chip)}
.shopfilter__branch > summary > span:first-child{flex:1;min-width:0}
.shopfilter__branch > summary::after{
  content:"";width:7px;height:7px;flex:0 0 auto;margin-left:2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease);
}
.shopfilter__branch[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.shopfilter__branch > .shopfilter__list{margin:2px 0 6px;padding-left:12px;border-left:1px solid var(--color-border)}
.shopfilter__branch > .shopfilter__list a{font-size:14px}

.shopfilter__box{
  width:18px;height:18px;flex:0 0 auto;
  border:1.5px solid var(--color-border);border-radius:5px;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.shopfilter__check.is-on{color:var(--color-text);font-weight:600}
.shopfilter__check.is-on .shopfilter__box{
  border-color:var(--color-primary);
  background:var(--color-primary) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") no-repeat center/12px;
}

.shopfilter__price{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
}
.shopfilter__price label{min-width:0}
.shopfilter__price input{
  width:100%;padding:9px 8px;font:inherit;font-size:14px;text-align:center;
  color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
}
.shopfilter__dash{color:var(--color-text-muted)}

.filter-toggle{display:none}
.shopfilter__scrim{display:none}
.shopfilter:focus{outline:none}

@media (max-width:1024px){
  .catalog__layout{grid-template-columns:1fr}
  .filter-toggle{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px;font-size:14px;font-weight:700;color:var(--color-text);
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  }
  .filter-toggle svg{width:18px;height:18px}
  .shopfilter{
    position:fixed;top:0;bottom:0;left:0;z-index:70;
    width:min(320px,86vw);padding:20px;border:0;border-radius:0;
    overflow-y:auto;visibility:hidden;transform:translateX(-100%);
    transition:transform .28s var(--ease),visibility .28s var(--ease);
  }
  .shopfilter.is-open{visibility:visible;transform:none;box-shadow:var(--shadow-lg)}
  .shopfilter__scrim{
    display:block;position:fixed;inset:0;z-index:69;
    background:rgba(15,23,42,.45);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease);
  }
  body.has-filter-open{overflow:hidden}
  body.has-filter-open .shopfilter__scrim{opacity:1;pointer-events:auto}
  .shopfilter__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
  .shopfilter__title{font-size:18px;font-weight:800}
  .shopfilter__close{font-size:28px;line-height:1;color:var(--color-text-muted)}
}
.shopfilter__list a.is-here{background:var(--color-chip);color:var(--color-text);font-weight:700}
/* A row is deliberately 16px wider than the list — margin-inline:-8px, so the
   hover highlight reaches the column edge. Inside a scrolling box that overhang
   is horizontal overflow, and the browser drew a scrollbar under every checkbox
   group, three-item ones included. The padding gives the rows room to overhang
   into, and the matching negative margin keeps the box where it was drawn. */
.shopfilter__list--check{
  max-height:420px;overflow-y:auto;overflow-x:hidden;
  padding-inline:8px;margin-inline:-8px;
}
/* The system scrollbar — a grey gutter with a framed thumb — drew a second
   border inside the card. A thin rounded thumb on no track says "there is
   more" without competing with the checkboxes, and darkens under the pointer.
   Chrome and Safari take the pseudo-elements; they ignore them once the
   standard properties are set, so those are left to Firefox alone. */
.shopfilter__list--check::-webkit-scrollbar{width:6px}
.shopfilter__list--check::-webkit-scrollbar-track{background:transparent}
.shopfilter__list--check::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--color-text-muted) 30%,transparent);border-radius:99px
}
.shopfilter__list--check:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-text-muted) 55%,transparent)}
@supports not selector(::-webkit-scrollbar){
  .shopfilter__list--check{
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--color-text-muted) 40%,transparent) transparent;
  }
}

/* ------------------------------------------------------------
   SEARCH SUGGESTIONS

   The panel hangs under whichever field asked for it. In the
   header that is a card floating over the page; inside the
   mobile overlay the field already owns the screen, so there the
   panel simply continues down it.
   ------------------------------------------------------------ */
form.search,
.search-overlay__form{position:relative}

.search__panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  overflow-x:hidden;overflow-y:auto;max-height:min(72vh,620px);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-family:var(--font);color:var(--color-text);
}

/* carries text for a screen reader and nothing for the eye — the
   same technique as .screen-reader-text above */
.search__live{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* the group labels are rows in the same list, but they are not
   answers: they neither highlight nor take a separator */
.search__group-title{
  padding:14px 14px 4px;
  color:var(--color-text-muted);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}

.search__item{
  display:flex;align-items:center;gap:12px;
  padding:9px 14px;
  border-bottom:1px solid var(--color-border);
  color:var(--color-text);font-size:14px;line-height:1.35;
  text-decoration:none;
  transition:background-color .15s var(--ease);
}
/* the last row of the last group only, so the catalogue link below
   is not preceded by two lines */
.search__group:last-child .search__item:last-child{border-bottom:0}
.search__item:hover,
.search__item.is-active{background:var(--color-hover)}

/* the arrow keys have to show on a row the mouse is already over,
   so the highlight is a bar of its own, not just a darker ground */
.search__item.is-active,
.search__all.is-active{box-shadow:inset 3px 0 0 var(--color-primary)}

/* the picture sits in the same tile the shelves use, so a photo
   shot on white and one shot on grey line up the same way */
.search__media{
  flex:0 0 44px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-media-1);border-radius:var(--radius-sm);overflow:hidden;
}
.search__thumb{
  width:auto;height:auto;max-width:100%;max-height:100%;padding:3px;
  object-fit:contain;
}

.search__text{flex:1 1 auto;min-width:0;color:inherit}
.search__name{display:block;font-weight:500}
.search__name mark{background:none;color:var(--color-primary);font-weight:800}
.search__crumb{
  display:block;width:100%;padding:2px 0 0;
  color:var(--color-text-muted);font-size:12px;
}

/* a price range is two amounts and a dash; the line may break at
   the dash, never inside "kr 1 749" */
.search__price{
  flex:0 0 auto;max-width:45%;padding-left:12px;
  color:var(--color-text);
  font-size:14px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;
}
.search__price bdi{white-space:nowrap}
.search__price del{opacity:.45;font-weight:500}
.search__price ins{text-decoration:none}

.search__none{padding:18px 14px;color:var(--color-text-soft);font-size:15px}

/* the way out of the panel and into the catalogue: it stays on
   screen while the list scrolls under it */
.search__all{
  position:sticky;bottom:0;z-index:1;
  display:block;padding:12px 14px;
  border-top:1px solid var(--color-border);
  background:var(--color-media-1);color:var(--color-primary);
  font-size:14px;font-weight:700;text-align:center;text-decoration:none;
}
.search__all:hover,
.search__all.is-active{background:var(--color-chip)}

/* Inside the overlay the field already owns the screen, so the panel
   drops the shadow and takes the height of the screen instead of the
   viewport fraction the header card uses. It stays absolute: the form
   is display:flex (see :185), and a static child of a flex row becomes
   a flex item — the panel would stand beside the field and the button
   rather than under them, and top/left/right would be ignored. The
   8px gap comes from .search__panel's own top:calc(100% + 8px). */
.search-overlay__form .search__panel{
  max-height:calc(100vh - 180px);
  box-shadow:none;
}