/*
 * Utseendet: bygget på prinsippene i Designsystemet (designsystemet.no), med produktkort og priser som hos
 * Komplett og finn.no. Én skrift (Figtree), vanlig setningsbruk av store bokstaver (ingen sperrede versaler),
 * avstander i trinn på 4 px, 4 px hjørner på kontroller og 8 px på kort og bilder, tydelige farger etter rolle.
 * Gjelder bare når body har klassen butikken-design (innstillingen «Utseende»).
 */

/*
 * Figtree ligger i utvidelsen (assets/fonts, SIL Open Font License) i stedet for hos Google Fonts: ingen
 * forespørsel til Google med kundens IP-adresse, og latin-filen forhåndslastes (Butikken_Utseende::preload_font),
 * så teksten ikke bytter skrift og flytter seg etter at siden er tegnet.
 */
@font-face {
  font-display: swap;
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.butikken-design {
  /*
   * Farger etter rolle, som i Designsystemet: bakgrunn, flate, ramme, tekst og base. Varm kremhvit side og
   * beige bak produktbildene (butikkens farger fra før), hvite flater for felt, knapper og merker.
   */
  --bk-bg: #fcf6f0;
  --bk-bg-tinted: #f7f4ee;
  --bk-surface: #fff;
  --bk-surface-hover: #f1ece4;
  --bk-border-subtle: #e4e1da; /* bare til pynt og skillelinjer */
  --bk-border: #858c88; /* skjemafelt: 3:1 mot hvitt */
  --bk-border-strong: #4f5652;
  --bk-text: #1b1d1a;
  --bk-text-subtle: #5e625c; /* 5,8:1 mot kremhvit og 5,4:1 mot beige (#f4eee6) */
  --bk-accent: #0a5f43;
  --bk-accent-hover: #084d36;
  --bk-accent-active: #063b2a;
  --bk-accent-tinted: #e7f1ec;
  --bk-focus: #00662a; /* fokusmarkering: ringen ved tabbing */
  --bk-orange: #fe5001; /* Non-stop-oransje: streken på tilbudsmerket og kampanjeknappen */
  --bk-sale: #fe5101; /* tilbudspris (butikkens valg; 3,1:1 mot kremhvit, holder for stor, fet tekst) */
  --bk-header: #fcf6f0;
  --bk-footer: #073f2d;
  --bk-danger: #b42318; /* bare feil og advarsler, ikke priser */
  --bk-danger-tinted: #fdeceb;
  --bk-success: #1a7f37;
  --bk-warning: #d97706;

  /*
   * Skrift: Figtree. Varm og geometrisk som Circular hos Musti, med åpne bokstavformer og tabelltall
   * (Designsystemet sine krav til skrift). Inter var for nøytral og teknisk for en dyrebutikk.
   */
  --bk-font:
    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bk-text-xs: 12px;
  --bk-text-sm: 14px;
  --bk-text-md: 16px;
  --bk-text-lg: 18px;
  --bk-text-xl: 21px;
  --bk-text-2xl: 24px;
  --bk-text-3xl: 30px;
  --bk-text-4xl: 36px;

  /* Avstander i trinn på 4 px. */
  --bk-1: 4px;
  --bk-2: 8px;
  --bk-3: 12px;
  --bk-4: 16px;
  --bk-5: 20px;
  --bk-6: 24px;
  --bk-8: 32px;
  --bk-10: 40px;
  --bk-12: 48px;
  --bk-16: 64px;

  --bk-radius-sm: 4px;
  --bk-radius-md: 8px;
  /* Høyden på knapper, felt og størrelsesvalg. */
  --bk-control: 48px;

  /* Butikken sine egne variabler (assets/butikk.css, katalog.css, product-design.css) følger dette. */
  --butikken-brand: var(--bk-accent);
  --butikken-price: var(--bk-text);
  --butikken-muted: var(--bk-text-subtle);
  --butikken-line: var(--bk-border-subtle);
  --butikken-radius: var(--bk-radius-sm);
  --butikken-sale: var(--bk-accent);
  /* Bak produktbildene: varm beige (innstillingen «Fargen bak produktbildene» overstyrer). */
  --butikken-image-bg: #f4eee6;
}

/* Skrift: én familie overalt. */
html body.butikken-design,
.butikken-design button,
.butikken-design input,
.butikken-design select,
.butikken-design textarea {
  color: var(--bk-text);
  font-family: var(--bk-font);
}

html body.butikken-design {
  font-size: var(--bk-text-md);
  line-height: 1.5;
}

/* Elementor-tekst oppå et bakgrunnsbilde (kampanjekort) beholder sin egen skrift og farge. */
.butikken-design
  h1:where(:not(.e-con[data-settings*="background_background"] *)),
.butikken-design
  h2:where(:not(.e-con[data-settings*="background_background"] *)),
.butikken-design
  h3:where(:not(.e-con[data-settings*="background_background"] *)),
.butikken-design
  h4:where(:not(.e-con[data-settings*="background_background"] *)),
.butikken-design .product_title,
.butikken-design .page-title,
.butikken-design
  .elementor-heading-title:where(
    :not(.e-con[data-settings*="background_background"] *)
  ) {
  color: var(--bk-text);
  font-family: var(--bk-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

/* Priser og antall med tall av lik bredde, så de står rolig i lister. */
.butikken-design .price,
.butikken-design .amount,
.butikken-design .qty {
  font-variant-numeric: tabular-nums;
}

/*
 * Stripen over headeren: fordelene på lys grå, som hos Fjellsport. På mobil vises én om gangen
 * (listen flyttes ett trinn hvert fjerde sekund).
 */
.butikken-topbar {
  background: var(--bk-surface-hover);
  color: var(--bk-text);
  font-size: var(--bk-text-sm);
  height: 36px;
  overflow: hidden;
}

.butikken-topbar ul {
  display: flex;
  gap: var(--bk-8, 32px);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 var(--bk-4);
}

.butikken-topbar li {
  align-items: center;
  display: flex;
  gap: var(--bk-2);
  height: 36px;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
}

.butikken-topbar svg {
  fill: none;
  flex: 0 0 auto;
  height: 16px;
  stroke: var(--bk-accent);
  stroke-width: 2.5;
  width: 16px;
}

@media (max-width: 767px) {
  .butikken-topbar ul {
    animation: butikken-topbar calc(var(--butikken-topbar-n) * 4s)
      steps(var(--butikken-topbar-n)) infinite;
    flex-direction: column;
    gap: 0;
  }
}

@keyframes butikken-topbar {
  to {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .butikken-topbar ul {
    animation: none;
  }
}

/*
 * Header: lys (#fcf6f0) og klistret til toppen, som hos Fjellsport. Desktop: logo, søkefelt og handlekurv på én
 * rad, menyen under. Mobil: menyknapp, logo og ikoner øverst, søkefeltet i full bredde under; hele headeren blir stående.
 */
.butikken-design .site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}

html body.butikken-design .site-header-inner {
  background: var(--bk-header);
  border-bottom: 0; /* temaet har en grå strek her */
}

html body.butikken-design .site-header-inner > .woostify-container {
  align-items: center;
  column-gap: var(--bk-8, 32px);
  display: grid;
  grid-template-areas:
    "logo search tools"
    "nav nav nav";
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 0;
  padding-bottom: 0;
  padding-top: var(--bk-3);
  row-gap: var(--bk-2);
}

.butikken-design .site-header .site-branding {
  grid-area: logo;
}

.butikken-design .site-header .site-navigation {
  grid-area: nav;
}

.butikken-design .site-header .site-tools {
  grid-area: tools;
}

.butikken-design .site-header .wrap-toggle-sidebar-menu {
  display: none;
}

html body.butikken-design .site-header .custom-logo {
  display: block;
  height: 48px;
  max-height: none;
  width: auto;
}

.butikken-header-search {
  grid-area: search;
  justify-self: center;
  max-width: 640px;
  width: 100%;
}

/* Søkefeltet som hos Fjellsport: en hvit flate med en svak kant, med forstørrelsesglasset til venstre. */
.butikken-header-search .aws-container .aws-search-form {
  background: #fcfcfc; /* samme som forslagslisten */
  border: 1px solid #d8d8d8;
  box-sizing: border-box;
  border-radius: var(--bk-radius-md);
  display: flex;
  height: 48px;
}

/* Fokus i søkefeltet: ingen grønn ring, bare den nøytrale feltkanten (3:1), så feltet fortsatt viser at det er aktivt. */
.butikken-header-search .aws-container .aws-search-form:focus-within {
  border-color: var(--bk-border);
}

.butikken-header-search .aws-container .aws-search-field:focus {
  outline: none;
}

/* Når forslagene er åpne, går feltet rett over i listen under: ingen runding nederst. */
.butikken-header-search .aws-container .aws-search-form.aws-form-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.butikken-header-search .aws-container .aws-search-form .aws-form-btn {
  background: transparent;
  border: 0;
  order: -1;
  padding-left: var(--bk-2);
}

.butikken-header-search .aws-container .aws-search-field {
  background: transparent;
  border: 0;
  color: var(--bk-text);
  font-family: var(--bk-font);
  font-size: var(--bk-text-md);
  height: 48px;
  padding: 0 var(--bk-4) 0 var(--bk-2);
}

.butikken-header-search .aws-container .aws-search-form .aws-search-btn_icon {
  color: var(--bk-text);
}

/*
 * Menyen som en flat rad under logoen, som hos Fjellsport: dyrene til venstre, resten til høyre. Menypunktet med
 * CSS-klassen «butikken-meny-hoyre» (Utseende → Menyer) og de etter det står til høyre.
 */
@media (min-width: 992px) {
  html body.butikken-design .site-header :is(.site-navigation, .main-navigation) {
    width: 100%;
  }

  html body.butikken-design .site-header .primary-navigation {
    display: flex;
    margin: 0 calc(-1 * var(--bk-4));
  }

  html body.butikken-design .site-header .primary-navigation > li.butikken-meny-hoyre {
    margin-left: auto;
  }

  /* Temaet gir lenkene 20 px marg; da står «Hund» ikke på linje med logoen og innholdet under. */
  html body.butikken-design .site-header .primary-navigation > li > a {
    margin: 0;
  }

  html body.butikken-design .site-header .primary-navigation > li > a {
    line-height: 48px;
    padding: 0 var(--bk-4);
  }
}

@media (max-width: 991px) {
  html body.butikken-design .site-header-inner > .woostify-container {
    column-gap: var(--bk-2);
    grid-template-areas:
      "logo tools menu"
      "search search search";
    grid-template-columns: minmax(0, 1fr) auto auto;
    /* 8 px inn: søkefeltet og forslagene dekker bannerkantene (16 px inn) bak. */
    padding: var(--bk-2);
    row-gap: var(--bk-2);
  }

  .butikken-design .site-header .site-navigation {
    display: none;
  }

  /* Menyknappen (Woostify sitt sidepanel med samme meny) helt til høyre, etter handlekurven. */
  .butikken-design .site-header .wrap-toggle-sidebar-menu {
    display: flex;
    grid-area: menu;
  }

  /* 20 px over raden: logoen løftes 12 px (under), og hunden får 8 px luft over seg. */
  html body.butikken-design .site-header-inner > .woostify-container {
    padding-top: var(--bk-5);
  }

  /* Menyknappen helt ut mot kanten (ikke forbi, da kan siden rulles sidelengs), og ikonet innerst i knappen
     flukter med høyre kant av søkefeltet under. */
  html body.butikken-design .site-header .toggle-sidebar-menu-btn {
    height: 44px;
    justify-content: flex-end;
    margin-right: calc(-1 * var(--bk-2));
    padding-right: var(--bk-2);
    width: 44px;
  }

  /* Strekene i samme farge som hjertet og handlekurven, ikke temaets grå, med runde ender og ulik lengde. De står
     mot høyre, siden knappen står helt til høyre. */
  html body.butikken-design .site-header .toggle-sidebar-menu-btn span,
  html body.butikken-design .site-header .toggle-sidebar-menu-btn span::before,
  html body.butikken-design .site-header .toggle-sidebar-menu-btn span::after {
    background-color: var(--bk-text);
    border-radius: 1px;
    left: auto;
    right: 0;
  }

  html body.butikken-design .site-header .toggle-sidebar-menu-btn span { width: 19px; }
  html body.butikken-design .site-header .toggle-sidebar-menu-btn span::before { width: 22px; }
  html body.butikken-design .site-header .toggle-sidebar-menu-btn span::after { width: 20px; }

  /* Logoen flukter med venstre kant av søkefeltet. */
  html body.butikken-design .site-header .site-branding {
    height: 48px;
    justify-self: start;
    margin: 0;
  }

  /* Navnet ligger i nedre del av logoen (hunden over): løft den så navnet står midt på raden med knappene. */
  html body.butikken-design .site-header .custom-logo-link {
    transform: translateY(-12px);
  }

  html body.butikken-design .site-header .custom-logo {
    height: 48px;
  }

  /* Favoritter og handlekurv som rene ikoner, som menyknappen: 24 px ikon i 44 px trykkflate. */
  html body.butikken-design .site-header .site-header-inner .site-tools :is(.shopping-bag-button, .butikken-fav-header) {
    background: transparent;
    border: 0;
    height: 44px;
    margin: 0;
    width: 44px;
  }

  /* Inntil menyknappen (opphever rutenettets 8 px), og 3 px til fordi menyikonet står innerst i knappen, så de tre
     ikonene får lik avstand (21 px). */
  html body.butikken-design .site-header .site-tools {
    justify-self: end;
    margin-right: calc(-1 * var(--bk-2) - 3px);
  }

  html body.butikken-design .site-header .site-header-inner .site-tools :is(.shopping-bag-button, .butikken-fav-header) svg {
    height: 24px;
    width: 24px;
  }

  /* Hjertet er bredere enn handlekurven og ser større ut ved samme mål. */
  html body.butikken-design .site-header .site-header-inner .site-tools .butikken-fav-header svg {
    height: 22px;
    width: 22px;
  }

  html body.butikken-design .site-header .site-header-inner .site-tools .butikken-fav-header :is(svg, path) {
    stroke-width: 1.75;
  }

  /* Samme merke på begge, i hjørnet av ikonet. Kanten i headerfargen skiller det fra ikonet. */
  html body.butikken-design .site-header .site-header-inner .site-tools :is(.shop-cart-count, .butikken-fav-count) {
    font-size: 11px;
    height: 20px;
    min-width: 20px;
    right: 0;
    top: 2px;
  }

  .butikken-header-search {
    max-width: none;
  }
}

/* Under 600 px ruller WordPress sin adminlinje med siden, så den skal ikke trekkes fra. */
@media (max-width: 600px) {
  .butikken-design .site-header {
    top: 0;
  }
}

.butikken-design .site-header .primary-navigation > li > a,
.butikken-design .site-header .site-tools a,
.butikken-design .site-header .site-tools button,
.butikken-design .site-header .toggle-sidebar-menu-btn,
.butikken-design .site-header .shopping-bag-button {
  color: var(--bk-text);
}

/* Handlekurven: hvit rund flate, og antall varer som et grønt merke med hvit tekst. */
html body.butikken-design .site-header .site-tools .shopping-bag-button {
  align-items: center;
  background-color: var(--bk-surface);
  border: 1px solid var(--bk-border-subtle);
  border-radius: 50%;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  margin-left: 0;
  position: relative;
  transition: background-color 0.15s ease;
  width: 48px;
}

html body.butikken-design .site-header .site-tools .shopping-bag-button::before {
  display: none;
}

/* Bare med mus: på mobil blir :hover hengende igjen etter et trykk. */
@media (hover: hover) {
  .butikken-design .site-header .site-tools .shopping-bag-button:hover {
    background-color: var(--bk-surface-hover);
    color: var(--bk-text);
  }
}

.butikken-design .site-header .shopping-bag-button .shop-cart-count {
  align-items: center;
  background: var(--bk-accent);
  border: 2px solid var(--bk-header);
  border-radius: 999px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  line-height: 1;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -4px;
}

/* Tom handlekurv: ingen «0», heller ikke et øyeblikk ved lasting (se Butikken_Utseende::cart_count_fragment). */
.butikken-design .site-header .shopping-bag-button .shop-cart-count.hide,
.butikken-cart-empty
  .site-header
  .shopping-bag-button
  .shop-cart-count:not(.butikken-count-live) {
  display: none;
}

/* Woostify setter menyskriften fra Tilpasseren; menyen og nedtrekket bruker samme skrift som resten. */
.butikken-design .site-header .primary-navigation a {
  font-family: var(--bk-font);
}

.butikken-design .site-header .primary-navigation > li > a {
  font-size: var(--bk-text-md);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.butikken-design .site-header .primary-navigation > li > a:hover {
  color: var(--bk-text);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.butikken-design .site-header svg {
  color: var(--bk-text);
  fill: currentColor;
}
/* Undermenyer står på hvit bunn. */
.butikken-design .site-header .sub-menu a {
  color: var(--bk-text);
}

/* Elementor-knapper oppå et bakgrunnsbilde: temaets skrift, som før. */
.butikken-design
  .e-con[data-settings*="background_background"]
  .elementor-button {
  font-family: var(--butikken-theme-font, inherit);
}

/* Lenker: grønne med understrek ved hover. Header, bunntekst og knapper har egne farger. */
.butikken-design a:hover {
  color: var(--bk-accent);
}

.butikken-design .site-footer a:hover {
  color: #fff;
}

/* Tydelig fokus for tastatur, på alt som kan velges. */
.butikken-design
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bk-focus);
  outline-offset: 2px;
}

/* Den grønne ringen syns ikke mot den mørke bunnteksten: der er den lys, som teksten. */
.butikken-design .site-footer :focus-visible {
  outline-color: currentColor;
}

/*
 * Elementor-knapper beholder fargen de har i Elementor. Noen er lenker med bare en strek under; Elementor sine
 * 3 px hjørner bøyer streken i endene, så hjørnene er rette.
 */
.butikken-design
  .elementor-button:where(
    :not(.e-con[data-settings*="background_background"] *)
  ) {
  border-radius: 0;
  font-family: var(--bk-font);
  letter-spacing: 0;
  text-transform: none;
}

/* Knapper: setningsbruk, 48 px høye, 4 px hjørner. */
.butikken-design .button,
.butikken-design button.button,
.butikken-design .single_add_to_cart_button,
.butikken-design .checkout-button {
  align-items: center;
  background-color: var(--bk-accent);
  border-radius: var(--bk-radius-sm);
  color: #fff;
  display: inline-flex;
  font-family: var(--bk-font);
  font-size: var(--bk-text-md);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.3;
  min-height: var(--bk-control);
  padding: 0 var(--bk-5);
  text-transform: none;
}

.butikken-design .button:hover,
.butikken-design .single_add_to_cart_button:hover {
  background-color: var(--bk-accent-hover);
  color: #fff;
}

.butikken-design .button:active,
.butikken-design .single_add_to_cart_button:active {
  background-color: var(--bk-accent-active);
}

/* Merket over produktnavnet, på produktsiden og i listene. */
.butikken-brand {
  color: var(--bk-text-subtle, #575e5a);
  font-family: var(--bk-font);
  font-size: var(--bk-text-sm, 14px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: var(--bk-1, 4px);
}

/* Produktsiden: tittel, pris og valg. */
.butikken-design.single-product .product_title {
  font-size: var(--bk-text-3xl);
  margin-bottom: var(--bk-3);
}

.butikken-design.single-product .summary > .price {
  align-items: baseline;
  column-gap: var(--bk-3);
  font-size: var(--bk-text-4xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--bk-6);
}

.butikken-design.single-product .summary > .price del {
  font-size: var(--bk-text-lg);
}

.butikken-design .variations_form table.variations th.label label,
.butikken-design .variations_form table.variations td.label label {
  font-size: var(--bk-text-md);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.butikken-design .butikken-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-2);
}

.butikken-design .butikken-chip {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-sm);
  color: var(--bk-text);
  font-family: var(--bk-font);
  font-size: var(--bk-text-md);
  font-weight: 500;
  height: 44px;
  min-width: 64px;
  padding: 0 var(--bk-4);
}

.butikken-design .butikken-chip:hover {
  background: var(--bk-surface-hover);
  border-color: var(--bk-border-strong);
}

.butikken-design .butikken-chip.is-selected {
  background: var(--bk-accent);
  border-color: var(--bk-accent);
  color: #fff;
}

.butikken-design .butikken-chip.is-out-of-stock:not(.is-selected),
.butikken-design .butikken-chip.is-unavailable:not(.is-selected) {
  background: var(--bk-bg-tinted);
  border-color: var(--bk-border-subtle);
  color: var(--bk-text-subtle);
}

.butikken-design.single-product form.cart .single_add_to_cart_button {
  max-width: none;
  min-height: var(--bk-control);
}

.butikken-design.single-product .quantity {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-sm);
  min-height: var(--bk-control);
}

.butikken-design.single-product .quantity .qty {
  border-radius: 0;
}

/* Antall og knapp så brede som innholdet, ikke hele linjen. På mobil fyller de linjen (lettere å treffe). */
@media (min-width: 600px) {
  .butikken-design.single-product form.cart .quantity {
    flex: 0 0 136px; /* − og + ligger oppå feltet, så tallet trenger plass mellom dem */
    width: 136px;
  }

  .butikken-design.single-product form.cart .single_add_to_cart_button {
    flex: 0 0 auto;
    padding-inline: var(--bk-8, 2rem);
    width: auto;
  }
}

/*
 * Merker på bildet, øverst til venstre: hvit lapp med oransje strek til venstre («Tilbud», aldri prosent), som butikken
 * hadde før, og «Utsolgt» med grå strek. Rødt brukes ikke på priser og tilbud; det leses som feil.
 * Woostify lager ellers en rund, oransje boble.
 */
.butikken-design.single-product .product-images .woostify-tag-on-sale.onsale,
.butikken-design .products .product .woostify-tag-on-sale.onsale,
.butikken-design.single-product .product-images .woostify-out-of-stock-label,
.butikken-design .products .product .woostify-out-of-stock-label,
.butikken-design.single-product .product-images .butikken-tre-for-to-merke,
.butikken-design .products .product .butikken-tre-for-to-merke {
  background: var(--bk-surface);
  border: 0;
  border-left: 2px solid var(--bk-orange);
  border-radius: 0;
  box-shadow: none;
  color: var(--bk-text);
  font-family: var(--bk-font);
  font-size: var(--bk-text-sm);
  font-weight: 500;
  height: auto;
  left: var(--bk-3);
  letter-spacing: 0;
  line-height: 1.3;
  min-height: 0;
  min-width: 0;
  padding: var(--bk-1) var(--bk-2) var(--bk-1) 10px;
  right: auto;
  text-transform: none;
  top: var(--bk-3);
  width: auto;
}

.butikken-design.single-product .product-images .woostify-out-of-stock-label,
.butikken-design .products .product .woostify-out-of-stock-label {
  border-left-color: var(--bk-border);
}

.butikken-design.single-product .product-images .woostify-tag-on-sale.onsale,
.butikken-design.single-product .product-images .woostify-out-of-stock-label,
.butikken-design.single-product .product-images .butikken-tre-for-to-merke {
  font-size: var(--bk-text-md);
  left: var(--bk-4);
  padding: var(--bk-1) var(--bk-3);
  top: var(--bk-4);
}

/* «3 for 2»: samme lapp med grønn strek, så den skilles fra «Tilbud». Har varen begge, står den under, med 4 px luft
   (lappens høyde er linjehøyden pluss luften over og under). */
.butikken-design.single-product .product-images .butikken-tre-for-to-merke,
.butikken-design .products .product .butikken-tre-for-to-merke {
  border-left-color: var(--bk-accent);
  position: absolute;
  z-index: 5;
}

.butikken-design .products .product .onsale ~ .butikken-tre-for-to-merke {
  top: calc(var(--bk-3) + 1.3em + 3 * var(--bk-1));
}

.butikken-design.single-product .product-images .onsale ~ .butikken-tre-for-to-merke {
  top: calc(var(--bk-4) + 1.3em + 3 * var(--bk-1));
}

/* Rabatten i handlekurven og kassen: grønn og halvfet, så den synes blant summene. */
.butikken-design :is(.cart_totals, .woocommerce-checkout-review-order-table) .coupon-3-for-2 :is(th, td),
.butikken-design :is(.cart_totals, .woocommerce-checkout-review-order-table) .coupon-3-for-2 .amount {
  color: var(--bk-accent);
  font-weight: 600;
}

/* Priser er svarte; tilbudsprisen er oransje, og førprisen gjennomstreket og dempet. */
.butikken-design .price del {
  color: var(--bk-text-subtle);
  font-size: 0.75em;
  font-weight: 400;
  opacity: 1;
}

.butikken-design .price ins,
.butikken-design .price ins .amount,
.butikken-design .products .product .product-loop-meta .price ins .amount {
  color: var(--bk-sale);
  font-weight: inherit;
  text-decoration: none;
}

.butikken-design .price .butikken-price-from {
  color: var(--bk-text-subtle);
  font-size: 0.75em;
  font-weight: 400;
}

/* Bildekarusell: ett bilde i full bredde, streker under (assets/karusell.js). */
.butikken-gallery-bars .product-gallery .product-thumbnail-images {
  display: none !important;
}

.butikken-gallery-bars .product-gallery.vertical-style .product-images {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.butikken-gallery-bars .product-gallery .flickity-prev-next-button {
  display: none !important;
}

/* Fast bildefelt: ulike bildeproporsjoner skal ikke flytte innholdet ved størrelsesbytte. */
.butikken-gallery-bars .product-gallery .flickity-viewport {
  aspect-ratio: 1;
  height: auto !important;
}

.butikken-gallery-bars .product-gallery .image-item {
  height: 100%;
  width: 100%;
}

.butikken-gallery-bars .product-gallery .image-item a {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

/* Luft rundt bildet: frilagte produkter som går helt ut i bildekanten (et bredt skålsett, et kjede) ser ellers
   avkuttet ut mot rammen. */
.butikken-gallery-bars .product-gallery .image-item img {
  box-sizing: border-box;
  padding: 4%;
  height: 100%;
  max-height: 100%;
  max-width: 100% !important;
  object-fit: contain;
  width: 100%;
}

/*
 * Ingen hopp når karusellen starter: før Flickity har tatt over er bildeboksen allerede kvadratisk og viser bare det
 * første bildet, og plassen til strekene er satt av under. Ellers vokser galleriet med ca. 100 px på mobil når
 * skriptet kjører, og alt under (tittel, pris, kjøpsknapp) flytter seg.
 */
.butikken-gallery-bars .product-images-container:not(.flickity-enabled) {
  aspect-ratio: 1;
  overflow: hidden;
}

.butikken-gallery-bars
  .product-images-container:not(.flickity-enabled)
  .image-item {
  height: 100%;
}

.butikken-gallery-bars
  .product-images-container:not(.flickity-enabled)
  .image-item
  ~ .image-item {
  display: none;
}

/* Galleriet er en rad (bilde + miniatyrer); forhåndsvisningene får en egen linje under bildet. */
.butikken-gallery-bars .product-gallery {
  flex-wrap: wrap;
}

.butikken-gallery-bars .product-gallery > .butikken-bars {
  flex-basis: 100%;
  /* Woostify gir bildeboksen order: 2 */
  order: 3;
}

.butikken-design.single-product .product-gallery .product-images {
  border-radius: var(--bk-radius-md);
  overflow: hidden;
}

/* Piler på bildet: vises når musen er over (på berøringsskjerm blas det ved å dra). */
.butikken-arrow {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--bk-border-subtle, #e2e5e3);
  border-radius: 50%;
  color: var(--bk-text, #1d2420);
  cursor: pointer;
  display: flex;
  font-family: var(--bk-font, sans-serif);
  font-size: 24px;
  height: var(--bk-control, 48px);
  justify-content: center;
  line-height: 1;
  opacity: 0;
  padding: 0 0 3px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s;
  width: var(--bk-control, 48px);
  z-index: 6;
}

.butikken-arrow--prev {
  left: var(--bk-4, 16px);
}

.butikken-arrow--next {
  right: var(--bk-4, 16px);
}

.product-images:hover .butikken-arrow,
.butikken-arrow:focus-visible {
  opacity: 1;
}

.butikken-arrow:hover {
  background: #fff;
  border-color: var(--bk-border-strong, #4f5652);
}

@media (hover: none) {
  .butikken-arrow {
    display: none;
  }
}

.butikken-bars {
  display: flex;
  gap: var(--bk-2, 8px);
  justify-content: center;
  padding: var(--bk-4, 16px) 0 var(--bk-1, 4px);
}

/* Samme plass reserveres før og etter at bildeforhåndsvisningen er klar. */
.butikken-gallery-previews .product-gallery:has(.image-item ~ .image-item):not(:has(> .butikken-bars))::after {
  content: "";
  display: block; /* galleriet er en blokk på mobil og en flex-rad på PC */
  flex-basis: 100%;
  height: 100px;
  order: 3;
}

.butikken-gallery-previews .product-gallery > .butikken-previews {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100px;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 16px 4px 4px;
  scrollbar-width: thin;
}

.butikken-previews .butikken-preview {
  flex: 0 0 72px;
  height: 72px;
  padding: 4px;
  border: 1px solid var(--bk-border-subtle, #e2e5e3);
  border-radius: var(--bk-radius-sm, 4px);
  background: var(--butikken-image-bg, #f4eee6);
  cursor: pointer;
  overflow: hidden;
}

.butikken-previews .butikken-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.butikken-previews .butikken-preview:hover {
  border-color: var(--bk-border-strong, #4f5652);
}

.butikken-previews .butikken-preview.is-selected {
  border: 2px solid var(--bk-text, #1d2420);
  padding: 3px;
}

.butikken-previews .butikken-preview:focus-visible {
  outline: 2px solid var(--bk-focus);
  outline-offset: 2px;
}


/*
 * Produktkort i lister, som hos finn.no: bilde i en rute med 8 px hjørner, så merke, navn, pris og lager under,
 * på samme venstrekant. Prisen er det tydeligste på kortet. Navnet er høyst to linjer og tar alltid plass til to,
 * så prisene i en rad står på linje.
 */
.butikken-design .product-loop-wrapper {
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.butikken-design .product-loop-wrapper:hover {
  transform: none;
}

.butikken-design .products .product .product-loop-image-wrapper {
  background: var(--butikken-image-bg);
  border-radius: var(--bk-radius-md);
  overflow: hidden;
}

/*
 * Bildefeltet er alltid kvadratisk, og bildet står midt i det uten å beskjæres. Transparente produktbilder viser
 * bakgrunnsfargen fra innstillingen «Fargen bak produktbildene».
 */
.butikken-design
  .products
  .product
  .product-loop-image-wrapper
  .woocommerce-loop-product__link {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--butikken-image-bg);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.butikken-design
  .products
  .product
  .product-loop-image-wrapper
  img.product-loop-image {
  box-sizing: border-box;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
  width: 100%;
}

/*
 * Utsnittet fra includes/class-butikken-bilder.php: frilagte bilder vises med produktet stort og luft rundt (målene står
 * på bildet), fotografier fyller ruta.
 */
.butikken-design
  .products
  .product
  .product-loop-image-wrapper
  img.product-loop-image.butikken-utsnitt {
  height: var(--u-h);
  left: var(--u-x);
  max-width: none;
  object-fit: fill;
  position: absolute;
  top: var(--u-y);
  width: var(--u-w);
}

.butikken-design
  .products
  .product
  .product-loop-image-wrapper
  img.product-loop-image.butikken-foto {
  object-fit: cover;
}

/* Frilagt på hvit bakgrunn: den hvite bakgrunnen går opp i ruta, så luften rundt produktet ikke viser bildekanten. */
.butikken-design
  .products
  .product
  .product-loop-image-wrapper
  img.product-loop-image.butikken-blend {
  mix-blend-mode: multiply;
}

.butikken-design .products .product .product-loop-hover-image.butikken-utsnitt {
  background-position: var(--u-bp);
  background-size: var(--u-bs);
}

/* Woostify sitt bilde nr. 2 ved hover fyller hele ruta. */
.butikken-design .products .product .product-loop-hover-image {
  background-color: var(--butikken-image-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  inset: 0;
  width: auto;
}

/* Når bilde nr. 2 vises, skjules hovedbildet. */
.butikken-design
  .products
  .product:hover
  .product-loop-image-wrapper:has(.product-loop-hover-image.butikken-hover-ok)
  img.product-loop-image {
  opacity: 0;
}

/* Temaet viser bilde nr. 2 bare når musen er over bildet; over tittelen ble ruta da tom. */
.butikken-design .products .product:hover .product-loop-hover-image.butikken-hover-ok {
  opacity: 1;
  visibility: visible;
}

.butikken-design
  .products
  .product
  .product-loop-hover-image.butikken-hover-ok {
  z-index: 1;
}

/* Skjult til assets/bilder.js har sjekket at det er stort nok. */
.butikken-design
  .products
  .product
  .product-loop-hover-image:not(.butikken-hover-ok) {
  opacity: 0 !important;
}

.butikken-design .products .product .product-loop-content {
  /* Woostify setter en fast minstehøyde (plass til en skjult kjøpsknapp). */
  min-height: 0;
  padding: var(--bk-3) 0 0;
  text-align: left;
}

.butikken-design .products .product .butikken-brand--loop {
  line-height: 1.3;
  margin: 0 0 var(--bk-1);
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.butikken-design .products .product .woocommerce-loop-product__title,
.butikken-design .products .product .woostify-loop-product__title {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: var(--bk-text-md);
  font-weight: 400;
  -webkit-line-clamp: 2;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 var(--bk-2);
  min-height: 2.6em;
  overflow: hidden;
}

.butikken-design .products .product .woocommerce-loop-product__title,
.butikken-design .products .product .woocommerce-loop-product__title a,
.butikken-design .products .product .woostify-loop-product__title,
.butikken-design .products .product .woostify-loop-product__title a {
  color: var(--bk-text);
}

/* Hele navnet understrekes ved hover, som en lenke. */
.butikken-design .products .product:hover .woocommerce-loop-product__title a,
.butikken-design .products .product:hover .woostify-loop-product__title a {
  color: var(--bk-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.butikken-design .products .product .product-loop-meta .animated-meta {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.butikken-design .products .product .product-loop-meta .price {
  align-items: baseline;
  column-gap: var(--bk-2);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--bk-text-xl);
  font-weight: 700;
  line-height: 1.3;
  row-gap: var(--bk-1);
}

/* Woostify setter 14 px på beløpene fra Tilpasseren; de følger størrelsen på prisen og førprisen. */
.butikken-design .products .product .product-loop-meta .price .amount {
  font-size: inherit;
}

.butikken-design .products .product .price del,
.butikken-design .products .product .price .butikken-price-from {
  font-size: var(--bk-text-sm);
}

.butikken-design .products .product .butikken-loop-stock {
  font-size: var(--bk-text-sm);
  margin-top: var(--bk-2);
}

/* Mobil: to kolonner med 16 px mellom, så bildene blir store. */
@media (max-width: 767px) {
  .butikken-design .products.mobile-columns-2 .product {
    margin-bottom: var(--bk-8);
    margin-right: var(--bk-4);
    width: calc(50% - var(--bk-2));
  }

  .butikken-design .products.mobile-columns-2 .product:nth-of-type(2n) {
    margin-right: 0;
  }

  .butikken-design .products .product .woocommerce-loop-product__title,
  .butikken-design .products .product .woostify-loop-product__title {
    font-size: var(--bk-text-sm);
  }

  .butikken-design .products .product .product-loop-meta .price {
    font-size: var(--bk-text-lg);
  }
}

/* Kjøpsknappene i handlekurven og kassen (WooCommerce-blokker): samme grønne knapp som «Legg i handlekurv». */
.butikken-design .wc-block-cart__submit-button,
.butikken-design .wc-block-components-checkout-place-order-button {
  background-color: var(--bk-accent);
  border-radius: var(--bk-radius-sm);
  color: #fff;
  font-size: var(--bk-text-md);
  font-weight: 600;
  min-height: var(--bk-control);
}

.butikken-design .wc-block-cart__submit-button:hover,
.butikken-design .wc-block-components-checkout-place-order-button:hover {
  background-color: var(--bk-accent-hover);
  color: #fff;
}

/*
 * Handlekurven som glir inn fra siden (Woostify): vanlige store og små bokstaver, svart sum, og knappene som resten
 * av butikken. «Vis handlekurv» er sekundær (omriss), «Kasse» er hovedhandlingen.
 */
.butikken-design #shop-cart-sidebar .cart-sidebar-title {
  font-size: var(--bk-text-lg);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Tett oppstilling: butikk.css setter 24 px mellomrom (gap) mellom etikett og beløp, som også gjaldt radene. */
html body.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total {
  row-gap: var(--bk-1);
}

/* Oppstillingen over totalen: dempede rader, rabatter grønne og halvfete som i kassen. */
.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total .butikken-kurv-rad {
  color: var(--bk-text-subtle);
  display: flex;
  flex: 0 0 100%;
  font-size: var(--bk-text-md);
  font-weight: 400;
  gap: var(--bk-4);
  justify-content: space-between;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total .butikken-kurv-rad > :first-child {
  white-space: normal;
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total .butikken-kurv-rad .amount {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total .butikken-kurv-rabatt {
  color: var(--bk-accent);
  font-weight: 600;
}

/* Feltet temaet skriver sin sum i (se butikken_side_cart_summary()). */
#shop-cart-sidebar .butikken-tema-sum { display: none !important; }

/* Dempet mens summen hentes på nytt etter + og −. */
#shop-cart-sidebar .woocommerce-mini-cart__total { transition: opacity 0.15s; }
#shop-cart-sidebar.butikken-sum-oppdateres .woocommerce-mini-cart__total { opacity: 0.4; }

/* Totalen står under radene med litt luft. */
.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total strong {
  margin-top: var(--bk-2);
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total strong {
  font-size: var(--bk-text-md);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__total .amount {
  color: var(--bk-text);
  font-size: var(--bk-text-lg);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--bk-2);
}

.butikken-design #shop-cart-sidebar .woocommerce-mini-cart__buttons .button {
  border-radius: var(--bk-radius-sm);
  font-size: var(--bk-text-md);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  min-height: var(--bk-control);
  text-transform: none;
  width: 100%;
}

.butikken-design
  #shop-cart-sidebar
  .woocommerce-mini-cart__buttons
  .button:not(.checkout) {
  background: var(--bk-surface);
  border: 1px solid var(--bk-accent);
  color: var(--bk-accent);
}

.butikken-design
  #shop-cart-sidebar
  .woocommerce-mini-cart__buttons
  .button:not(.checkout):hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--bk-accent);
}

/* Bunntekst: dyp grønn. */
.butikken-design .site-footer {
  background: var(--bk-footer);
  color: #e3eae5;
}

.butikken-design .site-footer a {
  color: #e3eae5;
}

.butikken-design .site-footer h2,
.butikken-design .site-footer h3,
.butikken-design .site-footer .widget-title {
  color: #fff;
  font-family: var(--bk-font);
  font-weight: 600;
}

/* Også under en kort side (kassen, handlekurven): html har ikke tokenene, så fargen står her som i --bk-bg. */
html:has(> body.butikken-design) {
  background-color: #fcf6f0;
}

/* Kremhvit side (Woostify har lys grå på produktsidene). */
.butikken-design,
.butikken-design #view,
.butikken-design .site-content,
.butikken-design.single-product .site-content,
.butikken-design.single-product .product-page-container,
.butikken-design .content-top,
.butikken-design .woostify-container .product {
  background-color: var(--bk-bg);
}

/*
 * Bakgrunnsfargen vises gjennom transparente produktbilder i karusellen. Den ligger bare på bildefeltet, ikke på
 * hvert bilde: Safari regner da bildelaget (Flickity flytter det med transform) som ugjennomsiktig, og det som ikke
 * tegnes, blir svart. Det ga svarte hjørner, og helt svart bakgrunn bak frilagte bilder.
 */
.butikken-design.single-product .product-gallery .product-images {
  background-color: var(--butikken-image-bg);
}

/* Under produktet: «Se også», «Relaterte produkter», «Nylig sett på». Venstrestilt, som en seksjon. */
.butikken-design.single-product .up-sells > h2,
.butikken-design.single-product .related > h2,
.butikken-design.single-product .woostify-product-recently-viewed-title {
  font-size: var(--bk-text-2xl);
  margin: 0 0 var(--bk-6);
  padding: 0;
  text-align: left;
}

/* Jevn luft mellom produktet og listene under: ikke temaets 50 px under fanene pluss 50 px under siden. */
.butikken-design.single-product .woocommerce-tabs {
  padding-bottom: 0;
}

.butikken-design.single-product .up-sells,
.butikken-design.single-product .related {
  border-top: 0;
  padding-top: var(--bk-12);
}

/* «Nylig sett på» er Woostify sin egen seksjon, med tynnere overskrift og en strek over; den ser ut som de andre. */
.butikken-design.single-product
  .woostify-product-recently-viewed-section
  .woostify-product-recently-viewed-title {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.butikken-design.single-product .woostify-product-recently-viewed-inner {
  border-top: 0;
  padding-top: var(--bk-12);
}

/* Uten lysboks og zoom er bildet ikke noe å klikke på: vanlig musepeker (pilene og strekene har sin egen). */
.butikken-design.single-product .product-gallery .image-item,
.butikken-design.single-product .product-gallery .image-item a,
.butikken-design.single-product .product-gallery .image-item img {
  cursor: default;
}

.butikken-design.single-product
  .product-gallery
  .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* Zoom ved hover på produktbildet: samme farge bak som bildet. */
.butikken-design.single-product .product-gallery .easyzoom-flyout {
  background-color: var(--butikken-image-bg);
}

/*
 * Toppfeltet (Woostify «page header»): ingen mørk blokk, bare brødsmulestien over innholdet.
 * På kategori- og butikksider vises ikke tittelen «Kategori: …»; katalogen har sin egen overskrift.
 */
.butikken-design .page-header {
  background: transparent;
  padding: var(--bk-6) 0 0;
}

.butikken-design .page-header .entry-title {
  color: var(--bk-text);
  font-size: var(--bk-text-3xl);
  font-weight: 600;
}

.butikken-design.tax-product_cat .page-header .entry-title,
.butikken-design.tax-product_tag .page-header .entry-title,
.butikken-design.post-type-archive-product .page-header .entry-title {
  display: none;
}

/* Brødsmuler med chevrons, dempede lenker og tydelig gjeldende side. */
.butikken-design .woostify-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  text-align: left;
  line-height: 1.5;
}
.butikken-design .woostify-breadcrumb .item-bread {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: var(--bk-text-subtle);
  font-size: var(--bk-text-sm, 14px);
  overflow-wrap: anywhere;
}
.butikken-design .woostify-breadcrumb .item-bread:last-child { color: var(--bk-text); }
.butikken-design .woostify-breadcrumb .item-bread.delimiter {
  flex: 0 0 16px;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--bk-text-subtle);
}
.butikken-design .woostify-breadcrumb .delimiter svg { width: 16px; height: 16px; }
.butikken-design .woostify-breadcrumb a {
  color: var(--bk-text-subtle);
  text-decoration: none;
}
.butikken-design .woostify-breadcrumb a:hover { color: var(--bk-text); text-decoration: underline; }
.butikken-design .woostify-breadcrumb a:focus-visible { outline: 2px solid var(--bk-focus); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 991px) {
  .butikken-design .woostify-breadcrumb { padding: 0; }
  .butikken-design .woostify-breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
  /* Produkter på mobil: én tilbake-lenke til nærmeste kategori. */
  .butikken-design.butikken-mobile-product-breadcrumbs.single-product .woostify-breadcrumb > .item-bread { display: none; }
  .butikken-design.butikken-mobile-product-breadcrumbs.single-product .woostify-breadcrumb > .item-bread:nth-last-child(3):has(a) { display: inline-flex; }
  .butikken-design.butikken-mobile-product-breadcrumbs.single-product .woostify-breadcrumb a { gap: 12px; min-height: 44px; }
  .butikken-design.butikken-mobile-product-breadcrumbs.single-product .woostify-breadcrumb a::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: 3px;
    border: solid currentColor;
    border-width: 0 0 1.75px 1.75px;
    transform: rotate(45deg);
  }
}

/* Filtrer og sortering står til venstre på mobil (Woostify midtstiller dem). Temaet har 50 px under brødsmulene. */
@media (max-width: 991px) {
  .butikken-design .woostify-sorting {
    align-items: flex-start;
  }

  html body.butikken-design .page-header {
    margin-bottom: var(--bk-4);
  }

  /* Fem størrelser (XS-XL) på én rad på en vanlig mobil. */
  html body.butikken-design .summary .butikken-chip {
    min-width: 56px;
    padding: 0 var(--bk-3);
  }
}

/* Stikkord vises ikke på produktsiden. */
.butikken-design.single-product .product_meta .tagged_as {
  display: none;
}

/*
 * Søkeforslag (Advanced Woo Search): en hvit boks med bilde, navn og pris.
 * «Sale!»-båndet blir samme lapp som på produktkortene (hvit med oransje strek), med teksten «Tilbud».
 */
.butikken-design .aws-search-result {
  background: #fcfcfc;
  border: 1px solid var(--bk-border-subtle) !important;
  border-radius: var(--bk-radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.butikken-design .aws-search-result .aws_result_excerpt,
.butikken-design .aws-search-result .aws_result_term,
.butikken-design .aws-search-result .aws_result_sku {
  display: none !important;
}

.butikken-design .aws-search-result .aws_result_sale {
  bottom: auto;
  height: auto;
  left: 4px;
  overflow: visible;
  right: auto;
  top: 4px;
  width: auto;
  z-index: 2;
}

.butikken-design .aws-search-result .aws_result_sale .aws_onsale {
  background: var(--bk-surface);
  border-left: 2px solid var(--bk-orange);
  border-radius: 0;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  height: auto;
  left: auto;
  line-height: 1;
  padding: 2px 4px;
  position: static;
  right: auto;
  top: auto;
  transform: none;
  width: auto;
}

.butikken-design .aws-search-result .aws_result_sale .aws_onsale::before {
  color: var(--bk-text);
  content: "Tilbud";
  font-family: var(--bk-font);
  font-size: 10px;
  font-weight: 600;
}

/* Tilbudsrader: Advanced Woo Search gir prisen luft til høyre for sitt eget bånd. Lappen står på bildet. */
.butikken-design .aws-search-result .aws_result_item.on-sale .aws_result_price {
  padding-right: 0;
}

/* Forslagene under feltet i toppen: fire treff uten rulling og en tydelig «Se alle treff». */
.butikken-design .aws-search-result {
  border-radius: 0 0 var(--bk-radius-md) var(--bk-radius-md) !important;
  margin-top: 0;
}

/* Med fokus i feltet er feltet og forslagene én boks med samme kant. Toppen har ingen kant; feltets nederste kant
   skiller dem. */
body:has(.butikken-header-search .aws-search-form:focus-within) .aws-search-result {
  border-color: var(--bk-border) !important;
  border-top-width: 0 !important;
}

.butikken-design
  .aws-search-result
  .aws_result_scroll {
  max-height: none !important;
  overflow: visible !important;
}

/* «Se alle treff» er en egen lenke nederst, i full bredde på mobil. */
.butikken-design .aws-search-result a.aws_search_more {
  align-items: center;
  background: var(--bk-accent) !important;
  border: 0;
  border-radius: var(--bk-radius-sm);
  color: #fff !important;
  display: flex;
  font-family: var(--bk-font);
  font-size: var(--bk-text-md);
  font-weight: 600;
  gap: var(--bk-2);
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.3;
  margin: var(--bk-3) var(--bk-4) var(--bk-4) !important; /* AWS nullstiller margen på resultatradene. */
  min-height: var(--bk-control);
  padding: var(--bk-3) var(--bk-5);
  text-decoration: none;
  text-transform: none;
  transition: background-color 0.15s;
}

@media (min-width: 992px) {
  .butikken-design .aws-search-result a.aws_search_more {
    width: fit-content;
  }
}

.butikken-design .aws-search-result a.aws_search_more::after {
  background: currentColor;
  content: "";
  height: 20px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 20px;
}

.butikken-design .aws-search-result a.aws_search_more:hover,
.butikken-design .aws-search-result a.aws_search_more:focus {
  background: var(--bk-accent-hover) !important;
}

/* Skuff fra høyre (favoritter og størrelsesguide), som hos Fjellsport. */
dialog.butikken-skuff {
  background: var(--bk-surface);
  border: 0;
  color: var(--bk-text);
  font-family: var(--bk-font);
  height: 100dvh;
  inset: 0 0 0 auto;
  margin: 0;
  max-height: none;
  max-width: 100vw;
  padding: 0;
  width: min(560px, 100vw);
}
dialog.butikken-skuff[open] { animation: butikken-skuff-inn 0.25s ease-out; }
dialog.butikken-skuff::backdrop { background: rgb(27 29 26 / 0.5); }
@keyframes butikken-skuff-inn { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { dialog.butikken-skuff[open] { animation: none; } }
.butikken-skuff-innhold { padding: var(--bk-4) var(--bk-6) var(--bk-8); }
.butikken-skuff-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--bk-4);
}
/* Antallet på samme grunnlinje som tittelen, ikonet midt på linjen. */
.butikken-skuff-head h2 {
  align-items: baseline;
  display: flex;
  font-size: var(--bk-text-lg);
  font-weight: 600;
  gap: var(--bk-2);
  margin: 0;
}
.butikken-skuff-head h2 svg { align-self: center; fill: none; height: 20px; stroke: currentColor; stroke-width: 1.8; width: 20px; }
/* Samme lukkeknapp som handlekurven. */
html body .butikken-skuff-lukk {
  background: none;
  border: 0;
  border-radius: var(--bk-radius-sm);
  color: var(--bk-text);
  display: grid;
  height: var(--bk-control);
  margin-right: calc(-1 * var(--bk-3));
  padding: 0;
  place-items: center;
  width: var(--bk-control);
}
html body .butikken-skuff-lukk:hover { background: var(--bk-surface-hover); color: var(--bk-text); }
.butikken-skuff-lukk:focus:not(:focus-visible) { outline: none; }
/* Arket selv får fokus ved åpning (assets/skuff.js). iOS regner det som :focus-visible, og da vant den grønne
   fokusringen for [tabindex] over regelen uten ramme. */
.butikken-design dialog.butikken-skuff:focus { outline: none; }
.butikken-fav-antall { color: var(--bk-text-subtle); font-size: var(--bk-text-sm); font-weight: 400; }

/* Hjertet: omriss, fylt når produktet er favoritt. */
html body .butikken-fav {
  align-items: center;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-subtle);
  border-radius: 50%;
  color: var(--bk-text);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  justify-content: center;
  padding: 0;
}
/* Temaet fyller ikonene i headeren; hjertet er et omriss. */
html body :is(.butikken-fav, .butikken-fav-header) svg { height: 22px; width: 22px; }
html body :is(.butikken-fav, .butikken-fav-header) :is(svg, path) { fill: none; stroke: currentColor; stroke-width: 1.8; }
html body .butikken-fav[aria-pressed="true"] :is(svg, path) { fill: var(--bk-accent); stroke: var(--bk-accent); }
/* Kort spinner i stedet for hjertet mens favoritten lagres. */
html body .butikken-fav.is-loading svg { display: none; }
.butikken-fav.is-loading::before {
  animation: butikken-fav-spin 0.7s linear infinite;
  border: 2px solid var(--bk-border-subtle);
  border-radius: 50%;
  border-top-color: var(--bk-accent);
  content: "";
  height: 18px;
  width: 18px;
}
@keyframes butikken-fav-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .butikken-fav.is-loading::before { animation-duration: 2s; } }
html body .butikken-fav:hover { background: var(--bk-surface-hover); }
html body .butikken-fav--loop {
  height: 40px;
  min-width: 40px; /* temaets handlingsboks er 0 px bred */
  position: absolute;
  right: var(--bk-2);
  top: var(--bk-2);
  width: 40px;
  z-index: 3;
}
.butikken-design ul.products .product-loop-action { opacity: 1; visibility: visible; }
html body .butikken-fav--single { height: 52px; width: 52px; }
.butikken-product-design .summary .woocommerce-variation-add-to-cart,
.butikken-product-design .summary form.cart:not(.variations_form) {
  align-items: center;
  display: flex;
  gap: var(--bk-3);
}

/* Hjertet i headeren, samme runde flate som handlekurven. */
html body.butikken-design .site-header .site-tools .butikken-fav-header {
  align-items: center;
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-subtle);
  border-radius: 50%;
  color: var(--bk-text);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  margin-right: var(--bk-2);
  padding: 0;
  position: relative;
  width: 48px;
}
@media (hover: hover) {
  html body.butikken-design .site-header .site-tools .butikken-fav-header:hover { background: var(--bk-surface-hover); }
}
.butikken-fav-count {
  align-items: center;
  background: var(--bk-accent);
  border: 2px solid var(--bk-header);
  border-radius: 999px;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 4px;
  position: absolute;
  right: -4px;
  top: -4px;
}
.butikken-fav-count[hidden] { display: none; }

/* Favorittene i skuffen: to kolonner, plassholdere mens de lastes. */
.butikken-fav-info { color: var(--bk-text-subtle); font-size: var(--bk-text-sm); margin: 0 0 var(--bk-4); }
.butikken-fav-liste {
  display: grid;
  gap: var(--bk-6) var(--bk-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.butikken-fav-kort { font-size: var(--bk-text-sm); position: relative; }
.butikken-fav-kort a { color: var(--bk-text); display: grid; gap: var(--bk-1); text-decoration: none; }
.butikken-fav-bilde {
  aspect-ratio: 1;
  background: var(--butikken-image-bg, var(--bk-bg-tinted));
  border-radius: var(--bk-radius-md);
  display: block;
  margin-bottom: var(--bk-1);
  overflow: hidden;
}
/* Samme luft rundt bildet som på produktkortene (8 %). */
.butikken-fav-bilde img { box-sizing: border-box; height: 100%; mix-blend-mode: multiply; object-fit: contain; padding: 8%; width: 100%; }
.butikken-fav-pris { font-weight: 600; font-variant-numeric: tabular-nums; }
.butikken-fav-linje { background: var(--bk-bg-tinted); border-radius: var(--bk-radius-sm); display: block; height: 14px; margin-top: var(--bk-2); }
.butikken-fav-linje + .butikken-fav-linje { width: 50%; }
.butikken-fav-kort.is-loading > span { animation: butikken-puls 1.2s ease-in-out infinite alternate; }
@keyframes butikken-puls { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .butikken-fav-kort.is-loading > span { animation: none; } }
.butikken-fav-feil { grid-column: 1 / -1; }
.butikken-fav-tom { margin: var(--bk-6) 0 0; }

/* Lenken til størrelsesguiden rett under størrelsene, og «Endre butikk» i samme størrelse. */
html body .butikken-storrelsesguide-lenke,
html body .butikken-lager-choose {
  align-items: center;
  background: none;
  border: 0;
  color: var(--bk-text);
  display: inline-flex;
  font-size: var(--bk-text-sm);
  gap: var(--bk-2);
  min-height: 32px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.butikken-design .butikken-chips:has(+ .butikken-storrelsesguide-lenke) { margin-bottom: var(--bk-2); }
.butikken-storrelsesguide-lenke svg { fill: none; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; width: 18px; }

/*
 * Størrelsestabellen: mørk overrad, første kolonne står fast mens resten ruller sideveis. Uten thead er første rad
 * overraden, men ikke i tabeller med navn og verdi (th scope="row"), der hver rad har sin egen overskrift.
 */
.butikken-tabell {
  margin: var(--bk-4) 0;
  max-width: 100%;
  overflow-x: auto;
}
.butikken-tabell table {
  border-collapse: collapse;
  font-size: var(--bk-text-sm);
  font-variant-numeric: tabular-nums;
  margin: 0;
  min-width: 100%;
  width: max-content;
}
.butikken-tabell :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--bk-border-subtle);
  padding: var(--bk-3);
  text-align: center;
  white-space: nowrap;
}
.butikken-tabell :is(thead tr, table > tbody:first-child > tr:first-child:not(:has(> th[scope="row"]))) > * {
  background: var(--bk-text-subtle);
  color: #fff;
  font-weight: 600;
}
.butikken-tabell tr > :first-child {
  background: var(--bk-bg-tinted);
  font-weight: 600;
  left: 0;
  position: sticky;
  text-align: left;
}
.butikken-tabell :is(thead tr, table > tbody:first-child > tr:first-child:not(:has(> th[scope="row"]))) > :first-child { background: var(--bk-text-subtle); }

/*
 * Den store menyen for Hund og Katt (Butikken_Utseende::category_menu, assets/meny.js): i full bredde under
 * headeren på desktop, rett under lenken i sidepanelet på mobil.
 */
.butikken-megameny:not([hidden]) {
  display: block;
}

.butikken-megameny-alle {
  color: var(--bk-accent);
  display: inline-block;
  font-weight: 600;
  margin-bottom: var(--bk-4);
}

.butikken-megameny-kolonner {
  display: grid;
  gap: var(--bk-1) var(--bk-8, 32px);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.butikken-megameny ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.butikken-megameny li {
  margin: 0;
}

html body.butikken-design .site-header .butikken-megameny a {
  color: var(--bk-text);
  display: inline-block;
  font-family: var(--bk-font);
  font-size: var(--bk-text-md);
  line-height: 1.4;
  padding: 6px 0;
}

html body.butikken-design .site-header .butikken-megameny a.butikken-megameny-alle {
  color: var(--bk-accent);
  font-size: var(--bk-text-md);
  font-weight: 600;
}

.butikken-design .site-header .butikken-megameny a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 992px) {
  .butikken-design .site-header-inner {
    position: relative;
  }

  /* Menyen henger under menypunktet, samlet i en smal boks. */
  html body.butikken-design .site-header .primary-navigation > li:has(> .butikken-megameny) {
    position: relative;
  }

  html body.butikken-design .site-header .primary-navigation > li > a[aria-expanded="true"] {
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  .butikken-design .site-header .butikken-megameny {
    background: var(--bk-surface);
    border: 1px solid var(--bk-border-subtle);
    border-radius: var(--bk-radius-md);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    left: calc(-1 * var(--bk-6));
    margin-top: var(--bk-2);
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: var(--bk-5) var(--bk-6);
    position: absolute;
    text-align: left;
    top: 100%;
    width: max-content;
    z-index: 100;
  }

  .butikken-design .site-header .butikken-megameny-kolonner {
    gap: 0 var(--bk-8);
    grid-template-columns: repeat(3, max-content);
  }

  html body.butikken-design .site-header .butikken-megameny a {
    font-size: var(--bk-text-sm);
    padding: var(--bk-1) 0;
  }
}

/* I sidepanelet på mobil: én kolonne rett under lenken. */
@media (max-width: 991px) {
  .butikken-megameny {
    padding: 0 0 var(--bk-2) var(--bk-4);
  }

  .butikken-megameny-kolonner {
    display: block;
  }
}

/* Merketreff i søkeforslagene (Butikken_Merker::add_brand_results) er bygget som en produktrad: logoen i bildets
   rute (60 px og 15 px luft, som Advanced Woo Search gir produktbildet), navnet der produktnavnet står og «Merke» under. */
.aws-search-result .aws_result_tax_butikken_merke .aws_result_heading:empty { display: none; }
.aws-search-result .butikken-sok-merke {
  align-items: center;
  display: flex;
  gap: 15px;
}
.aws-search-result .butikken-sok-merkebilde {
  align-items: center;
  border-radius: var(--bk-radius-md);
  color: var(--bk-text-subtle);
  display: flex;
  flex: none;
  font-size: 24px;
  font-weight: 600;
  height: 60px;
  justify-content: center;
  width: 60px;
}
.aws-search-result .butikken-sok-merkebilde:not(:has(img)) { background: var(--bk-border-subtle); }
.aws-search-result .butikken-sok-merkelogo {
  display: block;
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100%;
}
.aws-search-result .butikken-sok-merkelogo.butikken-brand-darken { filter: grayscale(1) brightness(0); }
.aws-search-result .butikken-sok-merketekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aws-search-result .butikken-sok-merkenavn { color: #000; font-weight: 700; }
.aws-search-result .butikken-sok-merketype { color: var(--bk-text-subtle); font-weight: 400; }

/* Hjertet i headeren fylles når kunden har favoritter, som hjertene på kortene. */
html body .butikken-fav-header:has(.butikken-fav-count:not([hidden])) :is(svg, path) {
  fill: var(--bk-accent);
  stroke: var(--bk-accent);
}

/* Samme lyse kant som favorittknappen ved «Legg i handlekurv». */
html body.butikken-design .summary .butikken-chip:not(.is-selected) {
  border-color: var(--bk-border-subtle);
}

/* Størrelsesguiden i skuffen: samme luft som favorittskuffen, uten fanens og tabellens ekstra marg. */
html body .butikken-skuff .butikken-storrelsesguide { padding-top: 0; }
.butikken-skuff .butikken-storrelsesguide > :first-child { margin-top: 0; }
.butikken-skuff .butikken-storrelsesguide > :last-child { margin-bottom: 0; }

/* Mobil: mindre hjerte på produktkortene, så det ikke dekker bildet. Trykkflaten er fortsatt 44 px (::after). */
@media (max-width: 767px) {
  html body .butikken-fav--loop {
    height: 32px;
    min-width: 32px;
    width: 32px;
  }
  html body .butikken-fav--loop svg { height: 18px; width: 18px; }
  html body .butikken-fav--loop.is-loading::before { height: 14px; width: 14px; }
  .butikken-fav--loop::after { content: ""; inset: -6px; position: absolute; }
}

/* Desktop: produktbildene blir stående ved siden av kjøpsboksen mens man ruller, som hos Wir lieben Hunter.
   Toppen er under den klistrede headeren (116 px) med 24 px luft. */
@media (min-width: 992px) {
  /* Temaets overflow-x: hidden på #view gjør den til en rullecontainer, og da virker ikke sticky. clip skjuler det
     samme uten å lage en rullecontainer. */
  html body.butikken-design:is(.single-product, .butikken-kategori-intro) #view {
    overflow-x: clip;
  }

  html body.butikken-design.single-product .product-gallery {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 140px); /* ponytail: fast headerhøyde; mål den i JS om headeren endres */
  }
}