:root {
  --bh-ink: #211b17;
  --bh-ink-soft: #4a423a;
  --bh-canvas: #f2ece1;
  --bh-canvas-raised: #ffffff;
  --bh-falu: #8c3223;
  --bh-falu-stsrong: #6f2419;
  --bh-steel: #6e6a5e;
  --bh-steel-line: #d9d0c0;
  --bh-signal: #e8791e;
  --bh-pine: #3f5a42;
  --wp--preset--color--primary: #8c3223;
  --wp--preset--color--secondary: #211b17;
  --wp--preset--color--background: #f2ece1;
}

body {
  background-color: var(--bh-canvas);
  color: var(--bh-ink);
}

.wp-block-site-title,
.wp-block-site-title a,
h1, h2, h3, h4,
.wp-block-post-title,
.wc-block-grid__product-title,
.product_title,
.wp-block-heading {
  font-family: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue Condensed', 'Liberation Sans Narrow', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bh-ink);
}

a { color: var(--bh-ink); }
a:hover { color: var(--bh-falu); }

.wp-block-navigation a:hover,
.wp-block-navigation-item a:hover {
  color: var(--bh-falu) !important;
}

.wp-block-button__link,
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.wc-block-components-product-button__button,
button.button,
input.button,
#place_order {
  background-color: var(--bh-falu) !important;
  border-color: var(--bh-falu) !important;
  color: #fbf3e8 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 2px !important;
}
.wp-block-button__link:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.wc-block-components-product-button__button:hover,
button.button:hover,
input.button:hover,
#place_order:hover {
  background-color: var(--bh-falu-strong) !important;
  border-color: var(--bh-falu-strong) !important;
}

.woocommerce-Price-amount.amount {
  font-weight: 800;
  color: var(--bh-ink);
  font-variant-numeric: tabular-nums;
}

.onsale,
.wc-block-components-product-sale-badge {
  background-color: var(--bh-signal) !important;
  color: #211b17 !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 2px;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--bh-falu) !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--bh-falu) !important;
}

.stock.in-stock {
  color: var(--bh-pine) !important;
  font-weight: 600;
}

/* ===== Forside-komponenter ===== */
.bh-utility-bar { background: var(--bh-ink); color: var(--bh-canvas); }
.bh-utility-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: center; gap: 28px; padding: 8px 20px; font-size: 0.8rem; flex-wrap: wrap; }

.entry-content > .bh-hero,
.bh-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; max-width: 1180px; margin: 0 auto; border-bottom: 1px solid var(--bh-steel-line); text-align: left; }
.bh-hero-copy { padding: 56px 44px 56px 20px; display: flex; flex-direction: column; justify-content: center; }
.bh-eyebrow { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bh-falu); margin-bottom: 14px; display: block; }
.bh-hero-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 0.98; margin: 0 0 18px; text-align: left; }
.bh-hero-copy .bh-accent { color: var(--bh-falu); }
.bh-hero-copy p { color: var(--bh-ink-soft); max-width: 40ch; margin: 0 0 26px; text-transform: none; font-weight: 400; text-align: left; }
.bh-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--bh-falu); color: #fbf3e8 !important; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; padding: 13px 22px; border-radius: 2px; text-decoration: none; }
.bh-btn:hover { background: var(--bh-falu-strong); color: #fbf3e8 !important; }

.bh-hero-art { position: relative; background: repeating-linear-gradient(-45deg, var(--bh-signal) 0 22px, var(--bh-ink) 22px 44px); display: flex; align-items: flex-end; padding: 24px; min-height: 260px; }
.bh-hero-tag { background: #fbf3e8; color: var(--bh-ink) !important; padding: 16px 20px; max-width: 230px; box-shadow: 0 10px 26px rgba(0,0,0,0.28); text-decoration: none; display: block; }
.bh-tag-title { font-family: 'Arial Narrow','Roboto Condensed',sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.05rem; line-height: 1.05; display: block; margin-bottom: 6px; }
.bh-tag-price { font-weight: 800; color: var(--bh-falu); display: block; }

.bh-trustbar { border-bottom: 1px solid var(--bh-steel-line); }
.bh-trustbar-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; padding: 16px 20px; gap: 16px; flex-wrap: wrap; }
.bh-trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 600; }
.bh-ic { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--bh-falu); color: var(--bh-falu); display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; }

.bh-cats { max-width: 1180px; margin: 0 auto; padding: 40px 20px 8px; text-align: left; }
.bh-cats h3 { font-family: 'Arial Narrow','Roboto Condensed',sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.3rem; margin: 0 0 20px; text-align: left; }
.bh-cat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.bh-cat-tile { background: var(--bh-ink); color: var(--bh-canvas) !important; padding: 20px 16px; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; text-decoration: none; }
.bh-cat-tile::after { content: ''; position: absolute; right: -14px; top: -14px; width: 46px; height: 46px; background: var(--bh-signal); transform: rotate(45deg); }
.bh-cat-name { font-family: 'Arial Narrow','Roboto Condensed',sans-serif; font-weight: 800; text-transform: uppercase; font-size: 0.95rem; line-height: 1.1; max-width: 80%; }
.bh-cat-count { font-size: 0.74rem; color: #cabfae; }

.bh-grid-head { max-width: 1180px; margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; padding: 44px 20px 20px; text-align: left; }
.bh-grid-head h3 { font-family: 'Arial Narrow','Roboto Condensed',sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.3rem; margin: 0; }
.bh-grid-head a { font-size: 0.82rem; font-weight: 700; color: var(--bh-falu); text-decoration: none; border-bottom: 1.5px solid var(--bh-falu); }

.page-id-4784 .entry-header,
.page-id-4784 .wp-block-post-title { display: none; }

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

/* Produktbilder: konsekvent kvadratisk beskjæring i rutenett */
ul.products img, .wc-block-grid__product-image img, .wc-block-components-product-image img,
ul.wc-block-product-template img { aspect-ratio: 1; object-fit: contain; background: #fff; width: 100%; }

/* Produktrutenett: lik korthøyde, knapp alltid i bunn */
ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
ul.products li.product { display: flex !important; flex-direction: column; float: none !important; width: auto !important; margin: 0 !important; }
ul.products li.product > a:first-child { display: block; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 { margin-top: 10px; }
ul.products li.product .price { margin: 6px 0 14px; }
ul.products li.product > a.button,
ul.products li.product .add_to_cart_button,
ul.products li.product > .button {
  margin-top: auto;
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}
@media (max-width: 900px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  ul.products { grid-template-columns: 1fr !important; }
}

/* ===== Produktside & badges ===== */
.stock.in-stock, .stock.out-of-stock { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; }
.stock.in-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bh-pine); display: inline-block; flex-shrink: 0; }
.stock.out-of-stock { color: var(--bh-steel) !important; }
.stock.out-of-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bh-steel); display: inline-block; flex-shrink: 0; }

.onsale {
  position: absolute; top: 10px; left: 0;
  min-width: 0; width: auto; height: auto; border-radius: 0;
  background: var(--bh-signal) !important;
  color: #211b17 !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 5px 14px 5px 10px;
  line-height: 1.4;
  clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%);
  z-index: 2;
}

table.variations { margin-bottom: 14px; }
table.variations tr { display: block; margin-bottom: 10px; }
table.variations th, table.variations td { padding: 4px 0; }
.wc-pao-addons-container { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }

/* Tillitsstripe under kjøpsknappen */
.bh-pdp-trust { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bh-steel-line); }
.bh-pdp-trust .bh-pdp-trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--bh-ink-soft); }
.bh-pdp-trust .bh-pdp-trust-item .bh-ic-sm { color: var(--bh-falu); font-weight: 800; }

/* Kort utdrag pa produktside - full tekst ligger i Beskrivelse-fanen under */
.single-product .wp-block-post-excerpt p,
.single-product .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.single-product .wp-block-post-excerpt::after {
  content: 'Les hele beskrivelsen lenger ned';
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bh-falu);
  margin-bottom: 4px;
}

/* Norske etiketter i produktmeta (prefiks er hardkodet i blokkmalen) */
.wp-block-woocommerce-product-meta .wp-block-post-terms__prefix {
  font-size: 0;
}
.wp-block-woocommerce-product-meta .taxonomy-product_cat .wp-block-post-terms__prefix::before {
  content: 'Kategori: ';
  font-size: 1rem;
}
.wp-block-woocommerce-product-meta .wc-block-components-product-sku .wp-block-post-terms__prefix::before {
  content: 'Varenr.: ';
  font-size: 1rem;
}

/* ===== Filter-sidepanel pa butikk/kategori ===== */
.bh-shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.bh-shop-main { min-width: 0; }

.bh-filters { border-top: 3px solid var(--bh-ink); padding-top: 16px; }
.bh-filters-title { font-family: 'Arial Narrow','Roboto Condensed',sans-serif; font-weight: 900; text-transform: uppercase; font-size: 1.05rem; margin: 0 0 14px; letter-spacing: 0.02em; }
.bh-filter-clear { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--bh-falu); border-bottom: 1.5px solid var(--bh-falu); text-decoration: none; margin-bottom: 18px; }
.bh-filter-group { margin-bottom: 22px; }
.bh-filter-group h3 { font-family: 'Arial Narrow','Roboto Condensed',sans-serif; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--bh-steel); margin: 0 0 8px; }
.bh-filter-group ul { list-style: none; margin: 0; padding: 0; }
.bh-filter-group li { margin: 0; border-bottom: 1px solid var(--bh-steel-line); }
.bh-filter-group li:last-child { border-bottom: none; }
.bh-filter-group li a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.88rem; text-decoration: none; color: var(--bh-ink); }
.bh-filter-group li a:hover { color: var(--bh-falu); }
.bh-filter-count { font-size: 0.76rem; color: var(--bh-steel); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bh-filter-group li.bh-active > a { color: var(--bh-falu); font-weight: 800; }
.bh-filter-group li.bh-active > a::after { content: ' x'; font-weight: 800; }

/* Produktrutenett i kategorisider (blokk-varianten) */
ul.wc-block-product-template { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
ul.wc-block-product-template li.wc-block-product { display: flex !important; flex-direction: column; width: auto !important; margin: 0 !important; float: none !important; }
ul.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button,
ul.wc-block-product-template li.wc-block-product .wc-block-components-product-button { margin-top: auto; }

@media (max-width: 900px) {
  .bh-shop-layout { grid-template-columns: 1fr; gap: 20px; }
  ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  ul.wc-block-product-template { grid-template-columns: 1fr !important; }
}

/* Filter-layout: full bredde + varslingsboks skal ikke stjele kolonne */
.bh-shop-layout { max-width: var(--wp--style--global--wide-size); width: 100%; margin-left: auto; margin-right: auto; }
.bh-shop-layout > .wc-block-components-notices { grid-column: 1 / -1; }
.bh-shop-layout > .bh-filters { grid-column: 1; }
.bh-shop-layout > .bh-shop-main { grid-column: 2; }

/* Mobil: filter stables over produktene */
@media (max-width: 900px) {
  .bh-shop-layout > .bh-filters,
  .bh-shop-layout > .bh-shop-main,
  .bh-shop-layout > .wc-block-components-notices { grid-column: 1 !important; }
  .bh-shop-layout { grid-template-columns: 1fr !important; }
}

/* Produktnavn i handlekurv/kasse: vanlig font, ingen orddeling midt i ordet */
.wc-block-components-product-name,
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: inherit !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
  line-height: 1.35;
}

/* Mobil: hero maa stables - trenger samme spesifisitet som regelen over */
@media (max-width: 900px) {
  .entry-content > .bh-hero,
  .bh-hero { grid-template-columns: 1fr !important; }
  .bh-hero-copy { padding: 34px 20px 28px !important; }
  .bh-hero-art { min-height: 190px; }
  .bh-utility-inner { gap: 10px; font-size: 0.74rem; }
}

/* bh-fix-clearfix-grid: temaets clearfix ::before/::after blir egne grid-celler
   i ul.products og dytter forste produkt ut av forste kolonne. */
ul.products::before,
ul.products::after,
.entry-content ul.products::before,
.entry-content ul.products::after {
  content: none !important;
  display: none !important;
}


/* bh-fix-bildebeskjaering: vis hele motivet i produktkortene i stedet
   for aa zoome inn paa midten. Den kvadratiske boksen beholdes, saa
   rutenettet forblir like jevnt som for. */
.wc-block-grid__product-image img,
li.wc-block-product img,
li.wc-block-product .wp-block-woocommerce-product-image img,
ul.products li.product img,
ul.products li.product .wp-post-image {
  object-fit: contain !important;
}


/* bh-fix-variasjonsvelger: nedtrekksmenyen for storrelse og farge var
   noyaktig like hoy som teksten trengte (48px mot 48px), og med
   overflow:clip ble underlengdene i "Velg et alternativ" kuttet. */
.variations select,
select[name^="attribute_"] {
  min-height: 3.5rem;
  line-height: 1.5;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}


/* bh-fix-handlekurv-mobil
   Handlekurvraden var 367 px bred i en 322 px spalte, saa hele siden kunne
   dras sidelengs paa mobil. Laaser spaltebreddene slik at raden faar plass. */
@media (max-width: 660px) {
  .wc-block-cart-items__row {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }
  .wc-block-cart-items__row > * { min-width: 0; }
  .wc-block-cart-item__image { width: 64px !important; padding-right: 0 !important; }
  .wc-block-cart-item__image img { width: 64px !important; max-width: 100% !important; height: auto; }
  .wc-block-cart-item__total-price-and-sale-badge-wrapper { flex-wrap: wrap; justify-content: flex-end; }
  .wc-block-cart-item__product { overflow-wrap: anywhere; }
}

/* bh-fix-trykkflater-mobil
   Menyknappen og fjern-knappen var 24x24 px. Padding pluss negativ margin gir
   44x44 px treffomraade uten aa endre hvordan de ser ut eller flytte noe. */
@media (max-width: 660px) {
  .wp-block-navigation__responsive-container-open {
    padding: 10px !important;
    margin: -10px !important;
    box-sizing: content-box;
  }
  .wc-block-cart-items__row .wc-block-cart-item__remove-link { padding: 10px !important; margin: -10px !important; box-sizing: content-box; }
}

/* bh-fix-toppbar
   Toppbaren har moerk bakgrunn, men avsnittene arver temaets roede
   tekstfarge og blir nesten uleselige. Tvinger lys tekst paa hele baren. */
.bh-toppbar,
.bh-toppbar p,
.bh-toppbar a {
  color: #f2ece1 !important;
}
.bh-toppbar a:hover {
  color: #ffffff !important;
}
/* Paa smaa skjermer tar toppbaren 115 px fordi teksten brytes.
   Om oss og Kontakt oss staar uansett i bunnteksten, saa de skjules her.
   Fraktloeftet beholdes - det er selgende. */
@media (max-width: 660px) {
  .bh-toppbar p:last-child {
    display: none;
  }
  .bh-toppbar {
    font-size: 0.78rem;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* bh-storhero: fullbredde fotobanner oeverst paa forsiden,
   etter moenster fra gamle bygghobby.no. Bildet byttes ved aa
   endre background-image under. */
.bh-storhero {
  position: relative;
  display: block;
  min-height: 460px;
  margin: 0 0 44px;
  overflow: hidden;
  text-decoration: none;
  background-image: url("https://bygghobby.no/wp-content/uploads/2026/08/woods-adirondack-gyngestol-hero.jpg");
  background-size: cover;
  background-position: 28% 62%;
}
.bh-storhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(280deg, rgba(24,18,13,.92) 0%, rgba(24,18,13,.80) 32%, rgba(24,18,13,.28) 60%, rgba(24,18,13,0) 86%);
}
.bh-storhero-innhold {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin-left: auto;
  padding: 64px 48px 64px 20px;
  color: #f6f1e7;
}
.bh-storhero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e8a06a;
  margin-bottom: 14px;
}
.bh-storhero h2 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  color: #ffffff;
  text-wrap: balance;
}
.bh-storhero p {
  margin: 0 0 20px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #e7dfd2;
  max-width: 30em;
}
.bh-storhero-pris {
  display: block;
  margin-bottom: 24px;
  font-size: 1.5rem;
}
.bh-storhero-pris s {
  color: #b9ac9b;
  font-size: 1.05rem;
  margin-right: 10px;
}
.bh-storhero-pris strong {
  color: #ffffff;
}
.bh-storhero .bh-btn {
  display: inline-block;
}
@media (max-width: 780px) {
  /* Paa mobil ligger bildet oeverst i sin egen hoeyde, og teksten under paa
     moerk bunn. Da dekker teksten aldri gyngestolen. Hoeyden 100/78 klipper
     bort husveggen oeverst og lar stolen fylle feltet. */
  .bh-storhero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-image: none;
    background-color: #18120d;
  }
  .bh-storhero::before {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 100 / 78;
    background: url("https://bygghobby.no/wp-content/uploads/2026/08/woods-adirondack-gyngestol-hero.jpg") center bottom / 100% auto no-repeat;
  }
  .bh-storhero-innhold {
    max-width: none;
    margin-left: 0;
    padding: 26px 22px 32px;
  }
}

/* bh-fix-forsidebredde
   Temaet klemmer alt sideinnhold til 670 px. .bh-cats setter 1180 px selv
   og slapp unna, mens hero, toppstripe og tillitsstripe ble staaende smale.
   Her settes de alle til samme bredde. */
.bh-utility-bar,
.bh-storhero,
.bh-trustbar,
.bh-grid-head {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* bh-fix-minikurv-tittel
   Tittelen i minihandlekurven staar i smal, versalisert overskriftsfont.
   Paa mobil ble ordet "(ELEMENT" for langt for boksen og ble klippet i
   hoyre kant. Her far den bryte hvor som helst, og litt mindre skrift paa
   smale skjermer. */
.wc-block-mini-cart__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 780px) {
  .wc-block-mini-cart__title {
    font-size: 1.35rem;
    line-height: 1.15;
    padding-right: 44px;
  }
}


/* ===== bh-fix-kasse-klassisk (11. august 2026) =====
   Kassesiden bruker kortkoden [woocommerce_checkout] fordi Webshipper sin
   hentested-velger bare tegnes i den klassiske kassen. Reglene under gjelder
   kun ordreoppsummeringen der, og roerer ingenting ellers paa nettstedet.

   Retter tre ting:
   1. Hentested-nedtrekket laa i en smal tabellcelle og viste bare
      "Spar Dampsaga, B" av "Spar Dampsaga, Bogavegen 6 7725 Steinkjer".
   2. Oppsummeringen var WooCommerce sin standardtabell med rammer rundt
      hver celle - den er gjort om til en ren liste.
   3. Fraktvalgene hadde 13x13 px radioknapper paa mobil. Naa er hele
      raden trykkflate, over 44 px hoy. */

#kco-order-review { width: 46% !important; }
#kco-iframe { width: 52% !important; }

.woocommerce-checkout-review-order-table { display: block; border: 0 !important; width: 100%; }
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; }

.woocommerce-checkout-review-order-table tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
  background: none;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  display: block;
  border: 0 !important;
  padding: 0 !important;
  background: none;
  text-align: left;
}
.woocommerce-checkout-review-order-table th { min-width: 0; }
.woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout-review-order-table tr.order-total {
  border-bottom: 0 !important;
  font-size: 1.1rem;
}

.woocommerce-checkout-review-order-table tr:has(#ws_drop_point_blob) { display: block; }
.woocommerce-checkout-review-order-table tr:has(#ws_drop_point_blob) th {
  display: block; width: 100%; margin-bottom: 6px;
}
.woocommerce-checkout-review-order-table tr:has(#ws_drop_point_blob) td {
  display: block; width: 100%; text-align: left;
}
#ws_drop_point_blob_field { width: 100%; margin: 0; }
#ws_drop_point_blob_field .woocommerce-input-wrapper { display: block; width: 100%; }
#ws_drop_point_blob { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 0.95rem; }

#shipping_method { margin: 0; padding: 0; list-style: none; }

@media (max-width: 660px) {
  #kco-order-review, #kco-iframe { width: 100% !important; float: none !important; }

  .woocommerce-checkout-review-order-table tr.shipping { display: block; }
  .woocommerce-checkout-review-order-table tr.shipping th,
  .woocommerce-checkout-review-order-table tr.shipping td {
    display: block; width: 100%; text-align: left;
  }
  .woocommerce-checkout-review-order-table tr.shipping th { margin-bottom: 6px; }

  #shipping_method li { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; }
  #shipping_method li label { flex: 1; padding: 11px 0; margin: 0; cursor: pointer; }
  #shipping_method input.shipping_method { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; }
  #ws_drop_point_blob { min-height: 44px; }
}


/* ===== bh-fix-mobiltopp (11. august 2026) =====
   Toppen brakk opp i fire etasjer paa telefon: logo, undertittel, soekefelt
   med hamburgeren langt ute til hoyre, og konto/kurv paa en egen rad under.
   Det tok 460 px foer kunden saa noe som helst av butikken.

   Loesningen er ett rutenett: meny til venstre, logo i midten, konto og kurv
   til hoyre - og soekefeltet i full bredde under. Trikset som gjor det mulig
   uten aa royre mal-filene er `display: contents` paa .bh-header-rad: da blir
   soek, meny og ikoner egne celler i rutenettet i stedet for aa ligge laast
   inne i sin egen rad. */

@media (max-width: 780px) {

  .bh-toppbar { padding: 7px 12px !important; }
  .bh-toppbar p { font-size: 0.7rem !important; line-height: 1.35; margin: 0; }

  .site-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "meny logo ikoner"
      "sok  sok  sok";
    align-items: center;
    column-gap: 6px;
    row-gap: 10px;
    padding: 12px 14px 14px !important;
  }

  .site-header > .wp-block-spacer { display: none !important; }
  .site-header .wp-block-site-tagline { display: none !important; }

  .bh-header-rad { display: contents !important; }

  .site-header .wp-block-site-logo {
    grid-area: logo; justify-self: center; margin: 0 !important; max-width: none;
  }
  .site-header .wp-block-site-logo img { width: 186px !important; }

  .site-header .wp-block-navigation {
    grid-area: meny; justify-self: start; margin: 0 !important; max-width: none;
  }

  .site-header .bh-ikoner {
    grid-area: ikoner; justify-self: end; margin: 0 !important; max-width: none; gap: 4px;
  }

  .site-header .wp-block-search {
    grid-area: sok; width: 100% !important; margin: 0 !important; max-width: none;
  }
  .site-header .wp-block-search .wp-block-search__inside-wrapper {
    width: 100% !important; max-width: none;
  }

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    width: 44px !important; height: 44px !important;
    padding: 10px !important; box-sizing: border-box;
  }
  .site-header .bh-ikoner a,
  .site-header .bh-ikoner button {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
}


/* ===== bh-fix-variantvelger-i-flukt (12. august 2026) =====
   Fargevalget paa et variabelt produkt kommer fra WooCommerce sin egen
   variant-tabell, mens de andre valgene kommer fra Product Add-Ons. To ulike
   maler som moetes paa samme side: etiketten sto paa linje med en 188 px smal
   nedtrekk, mens tilleggsfeltene hadde fet etikett over en nedtrekk i full
   bredde. Resultatet var at fargevalget saa ut til aa hoere til noe annet, og
   var lett aa overse.

   Her gjoeres variant-tabellen om til samme form som tilleggsfeltene.
   Gjelder alle variable produkter, ikke bare peltorskallene. */

.single-product table.variations {
  display: block; width: 100%; margin: 0 0 24px; padding: 0 2px; border: 0;
}
.single-product table.variations tbody,
.single-product table.variations tr { display: block; width: 100%; }

.single-product table.variations th.label,
.single-product table.variations td.value {
  display: block; width: 100%; padding: 0; border: 0; text-align: left;
}
.single-product table.variations th.label label {
  display: inline-block; font-size: 18px; font-weight: 700; margin: 0 0 8px;
}
.single-product table.variations td.value select {
  display: block; width: 100%; max-width: none; margin: 0;
  padding: 8px 62px 8px 8px;
}

/* Nullstill-lenken skal ikke bryte rytmen mellom feltene */
.single-product .reset_variations {
  display: inline-block; margin-top: 6px; font-size: .8rem; opacity: .65;
}


/* ===== bh-fix-variantvelger-i-flukt, del 2: samme utseende paa selve feltene =====
   Fargefeltet hadde gjennomsiktig bakgrunn, lys ramme og 56 px hoyde, mens
   tilleggsfeltene var hvite med moerk ramme og 39 px. Her stilles begge likt.
   min-height 48 px gjoer dem samtidig store nok til en finger - de gamle
   39 px laa under kravet vi har brukt ellers i butikken.
   !important er noedvendig: temaets egen regel paa variantvelgeren vinner
   ellers over bakgrunnsfargen. */

.single-product table.variations td.value select,
.single-product .wc-pao-addon select,
.single-product .wc-pao-addon input[type="text"] {
  background-color: #fff !important;
  border: 1px solid rgba(32, 7, 7, .8) !important;
  border-radius: 4px !important;
  color: #211b17 !important;
  min-height: 48px;
  line-height: normal;
  box-sizing: border-box;
}

.single-product table.variations td.value select,
.single-product .wc-pao-addon select {
  padding: 8px 44px 8px 12px !important;
  background-size: 16px !important;
  background-position: calc(100% - 14px) 50% !important;
  background-repeat: no-repeat !important;
}

.single-product .wc-pao-addon input[type="text"] { padding: 8px 12px !important; }


/* ===== bh-fix-produkttittel-i-rutenett (12. august 2026) =====
   Lange produktnavn brakk midt inne i ordene i kategorilistene -
   «KUN KLISTREMERKE R» over tre linjer. Aarsaken var
   word-break: break-word paa tittelen, som bryter grådig uansett om
   ordet kunne ha flyttet seg ned i sin helhet.

   word-break: normal + overflow-wrap: break-word gjor at ord flytter seg
   hele, og bare deles hvis ETT ord alene er for langt for linja.
   hyphens: auto setter da inn bindestrek etter norske orddelingsregler -
   sida har lang="nb-NO", saa Chrome deler riktig (be-skyt-tel-ses-skall).

   Skriften er samtidig satt ned fra 24 px. Titlene gikk fra 2-7 linjer
   til 1-3, saa kortene i rutenettet blir jevnere hoye.
   Gjelder kun titler inne i produktrutenett, ikke overskriften paa
   selve produktsiden. */

li.product .wp-block-post-title,
.wc-block-product .wp-block-post-title,
li.product .woocommerce-loop-product__title {
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto;
}


/* ===== bh-fix-produktkort-knapp-i-bunn (12. august 2026) =====
   Kortene i rutenettet er like hoye, men kjopsknappen fulgte teksten.
   Et produkt med langt navn dyttet knappen 44 px lenger ned enn naboene,
   og raden saa ujevn ut. Kortet gjores til en flex-kolonne slik at
   knappen kan skyves til bunnen.

   !important trengs: temaet setter margin-top: 18px paa knappen. */

ul.products li.product {
  display: flex;
  flex-direction: column;
}
ul.products li.product > .button { margin-top: auto !important; }


/* === bh-fix-tittel-uten-orddeling (12. august 2026) ==================
   Erstatter orddelingen som ble satt i bh-fix-produkttittel-i-rutenett.

   hyphens: auto delte ordene for aa pakke linjene tettere, ikke fordi
   ordet var for bredt - «BESKYTTEL-SESSKALL», «KLISTRE-MERKE». Bruddene
   er korrekt norsk, men et rutenett fullt av bindestreker ser rotete ut.

   Maalt over 781 unike ord i katalogen mot kolonnebredden i hele
   responsiv-spennet: ingen ord er bredere enn kolonnen noe sted.
   Smalest er 214px ved tre kolonner (viewport fra 1021px); bredeste ord
   er «omgivelsesmikrofon» paa 184px.

   Mobil er IKKE det trange tilfellet - under 600px gaar rutenettet til
   én kolonne paa 306-413px. Et tidligere mobilunntak med hyphens: auto
   ble derfor fjernet igjen; det slo paa orddeling nettopp der det var
   best plass. hyphens: manual gjelder overalt. overflow-wrap:
   break-word fra bh-fix-produkttittel-i-rutenett staar igjen som
   sikkerhetsnett hvis et fremtidig produktnavn faar et ekstremt langt ord.

   text-transform: none gir normal skrivemaate. Store bokstaver er
   bredere: samme tittel gikk fra fire til to linjer.

   Prisen fikk margin-top: auto slik at pris og knapp ligger paa samme
   hoeyde i hele raden uansett hvor mange linjer tittelen tar. Knappen
   maa da ha fast marg - to auto-marger deler ledig plass mellom seg og
   lar prisen flyte.
   ==================================================================== */
.wc-block-product .wp-block-post-title,
ul.products li.product .woocommerce-loop-product__title {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.wc-block-product .wp-block-woocommerce-product-price {
  margin-top: auto !important;
  min-height: 1.3em;
}
.wc-block-product .wc-block-components-product-button {
  margin-top: .6em !important;
}


/* === bh-fix-forsidekort-prislinje (12. august 2026) ==================
   Fortsettelsen av bh-fix-tittel-uten-orddeling, for de klassiske
   produktkortene. De finnes bare i «Bestselgere» paa forsiden -
   kategorilister, soek og relaterte produkter bruker blokkmarkup.

   Klassiske kort er bygget annerledes: bilde, tittel OG pris ligger
   inne i <a class="woocommerce-loop-product__link">, og bare knappen er
   soesken av den. margin-top: auto paa prisen gjoer derfor ingenting -
   lenka er en block-boks. Lenka maa selv bli en flex-kolonne som
   strekker seg, saa kan prisen skyves ned i den.

   display: flex trenger !important: WooCommerce sin egen regel
   (.woocommerce ul.products li.product a) har samme spesifisitet, og
   stilarket lastes etter Ekstra CSS - da vinner den paa rekkefoelge.

   Knappens margin-top: auto fra bh-fix-produktkort-knapp-i-bunn staar
   uroert. Naar lenka fyller kortet er det ingen ledig plass igjen for
   den aa spise, og knappene ligger fortsatt i bunn.
   ==================================================================== */
ul.products li.product > a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}
ul.products li.product > a.woocommerce-loop-product__link .price {
  margin-top: auto !important;
  padding-top: .4em;
}


/* === bh-fix-filtre-under-produkter-mobil (12. august 2026) ===========
   Under 900px stables .bh-shop-layout til én kolonne, og fordi
   aside.bh-filters staar foerst i kilden havnet hele filterpanelet over
   produktene. Maalt paa 390px skjerm: panelet er 559px hoeyt, og
   foerste produkt begynte 1181px nede - 1,4 skjermhoeyder foer kunden
   saa en eneste vare.

   order flytter panelet ned under rutenettet; foerste produkt begynner
   naa 602px nede. Notisene har order 0 som standard og blir liggende
   oeverst der de skal.

   Gjelder bare der layouten allerede er stablet. Fra 901px staar
   filtrene i sidekolonnen som foer, uroert.

   Merk: filtrene blir vanskelige aa naa paa mobil naar de ligger under
   16 produkter. Riktig loesning er et sammenslaatt «Filtrer»-panel
   oeverst, men det krever markup/JS - ikke natta foer lansering.
   ==================================================================== */
@media (max-width: 900px) {
  .bh-shop-layout > .bh-shop-main { order: 1; }
  .bh-shop-layout > .bh-filters { order: 2; }
}


/* === bh-fix-produkttittel-produktside (12. august 2026) ==============
   H1 paa produktsiden brakk midt i ordet: «VINDBESKYTTE LSE PELTOR»,
   uten bindestrek. To aarsaker.

   1) word-break: break-word bryter graadig - samme feil som ble ryddet
      ut av rutenettet, men den levde videre paa H1.
   2) Skriften stod laast paa 48px ved ALLE bredder, mens kolonnen
      varierer fra 276px (trang totrinns-visning rundt 900px viewport)
      via 333px paa mobil til 522px. «VINDBESKYTTELSE» i versaler er
      523px ved 48px - bredere enn kolonnen, saa ordet MAA brekke.

   Loesningen er container-relativ skrift: kolonnen faar
   container-type: inline-size, og H1 maales i cqi. Da foelger
   stoerrelsen kolonnen i stedet for aa staa laast. Maalt: 46,9px ved
   426px kolonne, 36,6px paa mobil, 30,3px i det trange spennet -
   tittelen staar rent paa to linjer overalt.

   text-transform: none er ikke kosmetikk her, det er en foerutsetning:
   versaler er saa mye bredere at ordet brekker selv med
   container-skrift. Samsvarer dessuten med produktkortene.

   Kontrollert at containment ikke flytter noe: kolonnene maaler 512 og
   426px foer og etter, galleriet 512px.

   Gjenstaar: «omgivelsesmikrofon» (505px) er for langt for en 426px
   kolonne ved enhver rimelig overskriftsstoerrelse, og brekkes fortsatt
   i ett produkt. Rett loesning der er et kortere produktnavn.
   ==================================================================== */
body.single-product .wp-block-columns > .wp-block-column {
  container-type: inline-size;
}
body.single-product h1.wp-block-post-title {
  font-size: clamp(1.7rem, 11cqi, 3rem) !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-transform: none !important;
  line-height: 1.12 !important;
}

/* ---- Produktside: skjul faneraden (lagt til 13. august 2026) ----
   Tilleggsinformasjon og Omtaler er ikke i bruk. Med bare Beskrivelse
   igjen ble faneraden en tom stripe som spiste skjermhoyde paa mobil.
   Panelet har sin egen Beskrivelse-overskrift, saa fanene trengs ikke.
   Slett hele denne blokken for aa faa fanene tilbake. */
.woocommerce-tabs ul.tabs.wc-tabs {
  display: none !important;
}
.woocommerce-Tabs-panel--additional_information,
.woocommerce-Tabs-panel--reviews {
  display: none !important;
}
.woocommerce-Tabs-panel--description {
  display: block !important;
}

/* ---- Mobilfiks 13. august 2026 -------------------------------------
   1) Kategorisidens «Viser 1-16 av 17 resultater» ble klemt til 79 px
      og brakk over TRE linjer, fordi den deler flex-rad med
      sorteringsvelgeren (229 px). Med wrap faar den full bredde og
      staar paa én linje. Maalt: 79x86 px -> 338x29 px.

   2) Produkttittelen brytes MIDT I ORDET paa mobil: «beskyttelsesska/ll».
      Skrifta er 37,1 px, og ordet «beskyttelsesskall» maaler da 357 px
      mot 338 px tilgjengelig. Ved 28 px maaler det lengste ordet i hele
      katalogen - «omgivelsesmikrofon», 18 tegn - 307 px og passer.

   Slett hele blokken for aa gaa tilbake. Grensa 480 px er valgt fordi
   problemet forsvinner av seg selv naar det er mer plass. */
@media (max-width: 480px) {
	body.archive .wp-block-group.is-content-justification-space-between {
		flex-wrap: wrap;
	}
	body.archive .wc-block-product-results-count {
		flex: 1 0 100%;
		margin-bottom: .4rem;
	}
	body.single-product h1.wp-block-post-title {
		/* !important trengs: temaets egen regel er mer spesifikk. */
		font-size: 28px !important;
	}
}

/* Samme problem paa DESKTOP - oppdaget 13. august etter foerste retting.
   Over 782 px blir produktsiden TOKOLONNE, og tittelkolonnen er da bare
   283-426 px selv paa en 1600 px skjerm, mens skrifta vokser til 47 px.
   Maalt: kolonnen er alltid 9,1 x skriftstoerrelsen, mens det lengste
   ordet trenger 11 x - derfor deles det ved ALLE desktop-bredder, ikke
   bare paa mobil. Skrifta maa ned til ca. 82 %.
   Verifisert med clamp under ved 900, 1200 og 1600 px: passer overalt.
   Mellom 480 og 782 px er oppsettet enkolonne og trenger ingenting
   (kontrollert ved 600 og 768 px). */
@media (min-width: 783px) {
	body.single-product h1.wp-block-post-title {
		font-size: clamp(24px, 2.8vw, 38px) !important;
	}
}