/* ==========================================================================
   Header Redesign v1 — Matthuset
   Variation B (Hybrid): dark utility strip → red content band → red-dark nav band.
   Inspired by jem & fix structure with custom mega menu.
   ========================================================================== */

:root {
  --mh-red: #e3141b;
  --mh-red-dark: #b8000a;
  --mh-ink: #1a1815;
  --mh-ink-2: #3c3834;
  --mh-paper: #faf7f2;
  --mh-line: #e5e0d5;
}

/* Helper: bleed a row's background to full viewport width while keeping
   inner content aligned to .col-full. Uses negative inline margin + matching
   inline padding so flow stays sane and there is no horizontal scroll. */
.mh-bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* ===== GLOBAL CLEANUP — kill legacy shadows & rounded corners =====
   Negation list is an opt-out registry. Add a selector here whenever a
   component legitimately wants a rounded corner, otherwise this universal
   `border-radius: 0 !important` strips it. The `[class*="radius"]` matcher
   is the generic escape hatch for ad-hoc cases. */
*:not(input):not(select):not(textarea):not(button):not(.product-accordion__trigger):not([class*="radius"]):not(.product-category):not(.product-category *):not(.mh-mobile-drawer__close):not(.mh-mobile-header__search-input) {
  border-radius: 0 !important;
}

img,
.wooslider,
.woocommerce-product-gallery,
.woocommerce-product-gallery img,
ul.products li.product img,
.widget,
.widget img,
.flex-viewport,
.flexslider {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ===== HEADER ROOT ===== */
#masthead.site-header {
  background-color: #fff !important;
  padding: 0 !important;
  border-bottom: none !important;
}

#masthead > .col-full,
#masthead > .col-full > .col-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Neutralise Storefront's `.col-full { margin-left:2.617924em; margin-right:2.617924em }`
   em-margins on every header/breadcrumb/archive container so the gutter is
   driven entirely by our own padding-inline clamps.
   IMPORTANT: use `margin: 0 auto`, not `margin: 0`. At viewports < 100em the
   container fills 100% so auto evaluates to 0 (no centering needed). At
   viewports > 100em the max-width caps the container at 1600px and auto
   centers it; the full-bleed bands rely on this centering for their
   `margin-inline: calc(50% - 50vw)` trick to extend cleanly to both edges. */
#masthead > .col-full,
#masthead .header-widget-region__inner.col-full,
.storefront-primary-navigation > .col-full,
#site-navigation.main-navigation,
#site-navigation > .col-full,
.storefront-breadcrumb .col-full,
body:not(.page-template-template-homepage) .col-full.test {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   1. UTILITY STRIP — dark
   ========================================================================== */
#masthead .header-widget-region {
  background: var(--mh-ink) !important;
  color: #fff !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
  float: none !important;
  display: block !important;
  letter-spacing: 0.01em;
  /* Full-bleed dark band: force the band itself to viewport width and pull
     it back so it spans regardless of parent col-full's centering. */
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  position: relative; /* anchor for absolutely-positioned popover descendants */
  /* IMPORTANT: do not set font-size here. .col-full uses max-width:100em
     in em units, which resolves against the element's own font-size. The
     inner __inner.col-full needs to inherit the same body font-size as the
     primary-nav inner col-full below, otherwise the two bands compute to
     different pixel widths and content stops aligning. */
}

/* Inner uses .col-full so it inherits the same sizing/centering as the
   primary-navigation row below (max-width, margins, and the wp-custom-css
   nested-col-full padding override). We only add the flex layout here. */
#masthead .header-widget-region__inner.col-full {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding-left: clamp(16px, 3vw, 40px) !important;
  padding-right: clamp(16px, 3vw, 40px) !important;
}

/* Inner pseudos must not become flex items either. */
#masthead .header-widget-region__inner::before,
#masthead .header-widget-region__inner::after {
  content: none !important;
  display: none !important;
}

/* Storefront ships ::before/::after clearfix pseudos on .header-widget-region.
   Inside our flex layout they become phantom flex items and break
   justify-content: space-between. Disable them. */
#masthead .header-widget-region::before,
#masthead .header-widget-region::after {
  content: none !important;
  display: none !important;
}

#masthead .header-widget-region__left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}

#masthead .header-widget-region__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto !important; /* belt-and-braces alongside space-between */
}

#masthead .header-widget-region__right a {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 0.9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1 !important; /* match __left items so baselines align */
  display: inline-flex;
  align-items: center;
}
#masthead .header-widget-region__right a:hover { opacity: 1; }

#masthead .header-widget-region__divide {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
  vertical-align: middle;
  flex-shrink: 0;
}

/* Widget content (öppettider / frakt). Width auto + flex 0 0 auto so each
   widget hugs its content. Overrides a wp-custom-css mobile rule that sets
   .header-widget-region .widget to width:100% (which would force each widget
   to a full-width row and break the flex layout). The widget container is
   itself a flex+center box: storefront's body line-height (1.618 ≈ 25.9px)
   would otherwise create a tall linebox inside the widget div and the
   inline-flex .textwidget would baseline-align to the top of that linebox
   rather than vertically centering. */
#masthead .header-widget-region .widget,
#masthead .header-widget-region__left .widget,
#masthead .header-widget-region__inner .widget {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  float: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

#masthead .header-widget-region .widget .textwidget,
#masthead .header-widget-region .widget .textwidget a,
#masthead .header-widget-region .widget .textwidget span,
#masthead .header-widget-region .widget .textwidget .tooltips {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  white-space: nowrap !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: none !important;
}

#masthead .header-widget-region .widget .textwidget a:hover,
#masthead .header-widget-region .widget .textwidget .tooltips:hover {
  color: #fff !important;
}

/* Hide legacy image icons */
#masthead .header-widget-region .frakt-icon,
#masthead .header-widget-region .widget .textwidget img {
  display: none !important;
}

/* Store-locations popover trigger (Öppettider & butiker button) */
#masthead .header-widget-region .mh-stores-trigger-wrap {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

#masthead .header-widget-region .mh-stores-trigger {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
}

#masthead .header-widget-region .mh-stores-trigger:hover,
#masthead .header-widget-region .mh-stores-trigger:focus,
#masthead .header-widget-region .mh-stores-trigger[aria-expanded="true"] {
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
}

#masthead .header-widget-region .mh-stores-trigger__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Suppress the SVG-pseudo icon for widgets that already have their own
   inline SVG (the stores trigger). Only text widgets get the prepended icon. */
#masthead .header-widget-region__left .mh-stores-trigger-wrap .textwidget::before {
  display: none !important;
}

/* SVG icons before each widget label (white stroke for dark bg) */
#masthead .header-widget-region .widget .textwidget::before {
  content: "";
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  opacity: 0.85;
}

#masthead .header-widget-region__left .widget:first-child .textwidget::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

#masthead .header-widget-region__left .widget:last-child .textwidget::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='13' height='10'/%3E%3Cpath d='M14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
}

/* Hide legacy secondary navigation slot — utility links now render via
   the widget region override. */
#masthead .secondary-navigation {
  display: none !important;
}

/* ==========================================================================
   2. CONTENT BAND — red (logo / search / cart)
   ========================================================================== */
/* Full-bleed red band. Matches the same pattern the utility strip
   uses above (`width: 100vw` + symmetric negative margin). Previously
   used `margin-inline + padding-inline` calc trick, but that produced
   visible inset in some real-browser viewport/scrollbar combinations.
   width: 100vw is bulletproof — the element is the full viewport, and
   the inner .col-full handles content centering with its own gutter. */
.storefront-primary-navigation {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--mh-red) !important;
  color: #fff !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

.storefront-primary-navigation > .col-full {
  display: flex !important;
  align-items: center !important;
  gap: 24px;
  padding: 16px clamp(16px, 3vw, 40px) !important;
  position: relative !important;
  border-bottom: none !important;
}

/* Suppress storefront's .col-full clearfix pseudos — they become phantom
   flex items and the 24px gap pushes the logo away from the left edge. */
.storefront-primary-navigation > .col-full::before,
.storefront-primary-navigation > .col-full::after {
  content: none !important;
  display: none !important;
}

/* --- Logo --- */
.storefront-primary-navigation > .col-full > .site-branding {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 5;
  order: 1;
  flex: 0 0 auto;
}

.site-branding a {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.storefront-primary-navigation .custom-logo,
.storefront-primary-navigation .site-branding img {
  max-height: 53px !important;
  width: auto !important;
  margin: 0 !important;
}

/* --- Search --- */
.storefront-primary-navigation > .col-full .site-search,
.woocommerce-active .site-header .site-search {
  /* Sized to roughly 30% narrower than the previous fill-available behaviour
     (~50% of the col-full track) and left-aligned. The cart's margin-left:auto
     pushes itself to the right edge, leaving empty space between search and
     cart. */
  width: auto !important;
  max-width: 50% !important;
  flex: 0 0 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  float: none !important;
  order: 2;
}

.site-search form {
  position: relative;
  margin: 0;
  display: flex;
  background: #fff;
  border: 2px solid #fff;
  width: 100%;
}

.site-search .search-field {
  flex: 1 1 auto !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background: #fff !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  color: var(--mh-ink) !important;
  box-shadow: none !important;
  outline: none !important;
}

.site-search .search-field::placeholder {
  color: #888;
  font-size: 14px;
}

.site-search .search-field:focus {
  background: #fff !important;
  outline: none !important;
}

/* Search submit — solid red button on the right */
.site-search button[type="submit"] {
  position: static !important;
  flex: 0 0 auto !important;
  transform: none !important;
  background: var(--mh-red) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 18px !important;
  margin: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  width: 52px !important;
  height: auto !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: block !important;
}

.site-search button[type="submit"]:hover {
  background-color: var(--mh-red-dark) !important;
}

/* --- Cart pill --- */
ul#site-header-cart.site-header-cart {
  float: none !important;
  width: auto !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  list-style: none;
  flex-shrink: 0;
  order: 3;
}

ul#site-header-cart.site-header-cart > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

#masthead a.cart-contents,
#masthead .site-header-cart .cart-contents {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  background: #fff !important;
  color: var(--mh-red) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

#masthead a.cart-contents:hover {
  background: #fff !important;
  color: var(--mh-red-dark) !important;
}

/* Bag icon */
#masthead a.cart-contents .cart-contents__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3141b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 auto;
}

/* Visible price */
#masthead a.cart-contents .cart-contents__amount {
  display: inline-flex !important;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--mh-red);
  letter-spacing: 0.01em;
  line-height: 1;
}
#masthead a.cart-contents .cart-contents__amount .woocommerce-Price-amount,
#masthead a.cart-contents .cart-contents__amount .amount {
  display: inline-flex !important;
  color: inherit !important;
  font: inherit !important;
}

/* Item count badge — small dark circle, top-right of pill */
#masthead a.cart-contents .cart-contents__count,
#masthead a.cart-contents .count {
  position: absolute !important;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50% !important;
  background: var(--mh-ink) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border: none !important;
  pointer-events: none;
}

/* Hide the legacy ::before/::after shapes from earlier iteration */
#masthead a.cart-contents::before,
#masthead a.cart-contents::after {
  content: none !important;
  display: none !important;
}

/* Cart dropdown */
#masthead .site-header-cart .widget_shopping_cart {
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
}

#masthead .site-header-cart:hover .widget_shopping_cart,
#masthead .site-header-cart.focus .widget_shopping_cart {
  opacity: 1;
  visibility: visible;
}

#masthead .site-header-cart .widget_shopping_cart *,
ul#site-header-cart .widget_shopping_cart a,
ul#site-header-cart .widget_shopping_cart span,
ul#site-header-cart .widget_shopping_cart p,
ul#site-header-cart .widget_shopping_cart dd,
ul#site-header-cart .widget_shopping_cart dt,
ul#site-header-cart .widget_shopping_cart li,
ul#site-header-cart .widget_shopping_cart .quantity,
ul#site-header-cart .widget_shopping_cart .woocommerce-Price-amount {
  color: #333 !important;
}

/* Action buttons inside the mini-cart need to win over the universal #333 above. */
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:first-child,
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:first-child * {
  color: #1a1a1a !important;
}
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:first-child:hover,
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:first-child:hover * {
  color: #fff !important;
}
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:last-child,
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:last-child *,
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:last-child:hover,
#masthead .site-header-cart .widget_shopping_cart .buttons a.button:last-child:hover * {
  color: #fff !important;
}

/* ── Mini-cart line items: thumbnail | content | × grid layout ───────────── */
#masthead .site-header-cart .widget_shopping_cart {
  width: 360px !important;
  padding: 8px 0 !important;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: auto !important; /* Storefront's desktop media query sets height: 0; override */
  max-height: 60vh;
  overflow-y: auto;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li {
  display: grid !important;
  grid-template-columns: 56px 1fr 22px;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  column-gap: 12px;
  row-gap: 6px;
  padding: 14px 18px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0eeea !important;
  position: relative !important;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li:last-child {
  border-bottom: none !important;
}
/* Row 1: thumbnail + title link spans cols 1-2; remove × in col 3 */
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li > a:not(.remove) {
  grid-row: 1;
  grid-column: 1 / 3;
  display: grid !important;
  grid-template-columns: 56px 1fr;
  column-gap: 12px;
  align-items: center;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li > a:not(.remove) img {
  grid-column: 1;
  width: 56px !important;
  height: 56px !important;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  max-width: 56px !important;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li a.remove {
  position: absolute !important;
  float: none !important;
  top: 12px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  font-size: 16px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #999 !important;
  opacity: 1 !important;
  text-align: center !important;
  font-weight: 400 !important;
  z-index: 2;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:hover {
  background: #f5f5f5 !important;
  color: #1a1a1a !important;
}
/* Row 2: variation list spans full width below row 1 */
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li dl.variation {
  grid-row: 2;
  grid-column: 1 / 4;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.45;
  color: #777 !important;
  display: block !important;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li dl.variation dt {
  display: inline !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
  color: #999 !important;
}
/* GF labels already include trailing ":" — do NOT add another via ::after */
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li dl.variation dt::after {
  content: "" !important;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li dl.variation dd {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}
/* Each dt/dd pair on its own line — break after dd */
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li dl.variation dd::after {
  content: "" !important;
  display: block !important;
  height: 0;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li dl.variation dd p {
  display: inline !important;
  margin: 0 !important;
}
/* Row 3: quantity × price — force inline so they stay on one line */
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li .quantity {
  grid-row: 3;
  grid-column: 1 / 4;
  margin: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  display: block !important;
  white-space: nowrap;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li .quantity * {
  display: inline !important;
  white-space: nowrap;
}
#masthead .site-header-cart .widget_shopping_cart .product_list_widget li .quantity .woocommerce-Price-amount {
  font-weight: 600 !important;
  margin-left: 4px;
}

/* Subtotal row + buttons section spacing */
#masthead .site-header-cart .widget_shopping_cart p.total {
  margin: 0 !important;
  padding: 12px 18px !important;
  border-top: 1px solid #e8e6e2 !important;
  border-bottom: none !important;
  text-align: left !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
}
#masthead .site-header-cart .widget_shopping_cart p.total strong {
  font-weight: 500 !important;
}
#masthead .site-header-cart .widget_shopping_cart p.total .woocommerce-Price-amount {
  font-weight: 700 !important;
  font-size: 1rem;
}
#masthead .site-header-cart .widget_shopping_cart p.buttons {
  padding: 0 18px 14px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
#masthead .site-header-cart .widget_shopping_cart p.buttons a.button {
  margin: 0 !important;
}

/* ==========================================================================
   3. NAV BAND — red-dark
   ========================================================================== */
/* Full-bleed dark-red nav band. Same pattern as the utility strip and the
   primary-navigation band above — width: 100vw + symmetric negative margin.
   The inner `ul.menu` handles content centering via max-width + auto margin,
   so we never depend on the scrollbar-sensitive `padding-inline: calc(50vw - 50%)`
   trick that produced visible inset / left-flush items in real browsers. */
#site-navigation {
  background: var(--mh-red-dark) !important;
  border: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* The menu IS the content rail for this band: max-width + auto margins
   center the UL, justify-content centers items within it, padding-inline
   gives the same gutter the col-full above uses (clamp 16px–40px).
   Selector is menu-name-agnostic — survives admin renames of the primary
   menu (which change the wp_nav_menu-emitted `id="menu-{slug}"`). */
.main-navigation ul.menu,
.main-navigation ul.nav-menu {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  max-width: 100em;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  background: transparent !important;
}

.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li {
  background: transparent !important;
  margin: 0;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  background: transparent !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease;
}

/* Hide legacy icons in nav links */
.main-navigation ul.menu > li > a img,
.main-navigation ul.nav-menu > li > a img {
  display: none !important;
}

.primary-navigation #menu-main li > a:before,
.main-navigation ul.menu > li > a:before {
  display: none !important;
}

/* Active / hover — white underline (Variation B style).
   IMPORTANT: scoped to top-level items only via `ul.menu > li` (not the
   descendant combinator). The descendant form `ul.menu li.current-menu-item`
   matches nested sub-menu items too, which then inherit the white-on-white
   `color: #fff !important` treatment meant for the red top band.
   Includes the "ancestor" classes WP adds to a top-level nav item when
   viewing one of its children (e.g. on /tjanster/bandkantning/, the
   "Tjänster" top item gets `current-menu-ancestor`/`current-menu-parent`). */
.storefront-primary-navigation ul.menu > li.current-menu-item > a,
.storefront-primary-navigation ul.menu > li.current-menu-ancestor > a,
.storefront-primary-navigation ul.menu > li.current-menu-parent > a,
.storefront-primary-navigation ul.menu > li.current-page-ancestor > a,
.storefront-primary-navigation ul.menu > li.current-page-parent > a,
.storefront-primary-navigation ul.menu > li.current-post-ancestor > a,
.storefront-primary-navigation ul.menu > li.current-product_cat-ancestor > a,
.main-navigation ul.menu > li.is-open > a,
.main-navigation ul.menu > li:hover > a,
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:focus {
  background: transparent !important;
  color: #fff !important;
  border-bottom-color: #fff !important;
  box-shadow: none !important;
}

/* ==========================================================================
   4. MEGA MENU & SUB-MENU INTEGRATION
   The mega/sub panels are positioned relative to the nav band. Keep their
   own CSS file in charge of internals; here we only adjust positioning so
   they drop below the dark-red band cleanly.
   ========================================================================== */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
  background: #fff !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--mh-line) !important;
}

.main-navigation ul ul li a,
.secondary-navigation ul ul li a,
.main-navigation ul li.smm-active li a,
#site-navigation .smm-mega-menu a {
  color: var(--mh-ink) !important;
}

.main-navigation ul ul li a:hover,
#site-navigation .smm-mega-menu a:hover {
  color: var(--mh-red) !important;
  background: var(--mh-paper) !important;
}

#site-navigation .smm-mega-menu {
  background: #fff !important;
}

/* ==========================================================================
   5. MOBILE
   Boundary widened from 767→768 so we cover the 768/769 desktop-mobile gap
   in wp_custom_css. (Storefront ships rules at 100-767 + 767-1024; the upper
   bound of our mobile rules used to leave 768/769px stranded between them.)
   ========================================================================== */
@media (max-width: 768px) {
  /* Override wp-custom-css mobile rule that forces .header-widget-region
     to display:flex (which conflicts with our wrapper-based layout). */
  #masthead .header-widget-region {
    display: block !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  #masthead .header-widget-region__inner {
    flex-wrap: wrap !important;
    gap: 10px;
  }
  #masthead .header-widget-region__left {
    gap: 12px;
    flex-wrap: wrap;
  }
  #masthead .header-widget-region__right {
    gap: 8px;
  }
  #masthead .header-widget-region .widget .textwidget,
  #masthead .header-widget-region__right a {
    font-size: 11px !important;
  }

  /* Force the inner col-full of every header band to fill the full-bleed
     viewport on mobile (band itself uses `margin-inline: calc(50%-50vw)` to
     extend edge-to-edge; the inner must drop its centering max-width and em
     margins so logo / cart / hamburger sit close to the viewport edges with
     only the 16px gutter, not stranded inside a narrower centered column). */
  #masthead > .col-full,
  #masthead .header-widget-region__inner.col-full,
  .storefront-primary-navigation > .col-full,
  #site-navigation.main-navigation,
  #site-navigation > .col-full {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .storefront-primary-navigation > .col-full {
    flex-wrap: nowrap !important;
    padding: 10px 16px !important;
    gap: 8px;
    justify-content: space-between;
    align-items: center !important;
  }

  /* Higher specificity (#masthead prefix) to beat wp_custom_css's
     `.storefront-primary-navigation>.col-full .site-branding { margin:0 0 20px !important }`
     which was forcing a 20px bottom margin → wrapping the hamburger to row 2. */
  #masthead .storefront-primary-navigation > .col-full > .site-branding {
    order: 1;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: calc(100% - 64px) !important;
  }

  #masthead .storefront-primary-navigation .custom-logo,
  #masthead .storefront-primary-navigation .site-branding img {
    max-height: 32px !important;
    width: auto !important;
    max-width: 160px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Hide the top cart pill on mobile — the cart link lives in the
     bottom handheld footer bar, so showing it twice is redundant. */
  ul#site-header-cart.site-header-cart {
    display: none !important;
  }

  /* ── Mobile menu toggle (hamburger / X) ──
     `#site-navigation` is full-width by default (Storefront `.main-navigation`
     has width:73.91% + `.primary-navigation div.menu` sizes the container).
     Fighting that in the flex row is a losing battle; instead, pin the
     toggle button absolutely to the right of the band so it doesn't
     participate in the flex layout at all. The nav wrapper still holds the
     menu UL which expands below when toggled. */
  .storefront-primary-navigation {
    position: relative !important;
  }
  #site-navigation {
    /* Don't reserve flex space — the toggle is absolute, the menu UL drops
       full-width via its own toggled state. */
    position: static !important;
    width: 100% !important;
    order: 11 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    flex: 0 0 0% !important;
    height: 0 !important;
    overflow: visible !important;
  }
  /* Reveal the menu list area when toggled. */
  #site-navigation.toggled {
    height: auto !important;
    flex: 1 0 100% !important;
    padding: 8px 0 0 !important;
  }
  #site-navigation button.menu-toggle {
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    padding: 0 !important;
    /* Take the button OUT of flex flow — pin it to the right edge of the
       red band, vertically centered with the logo row. Beats every
     `wp_custom_css` margin/width hack without specificity gymnastics. */
    position: absolute !important;
    top: 10px !important;
    right: 16px !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    max-width: none !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5;
    cursor: pointer;
  }
  #site-navigation button.menu-toggle > span {
    /* visually-hidden — preserve a11y label, drop the visible "Menu" word */
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
  }
  #site-navigation button.menu-toggle::before,
  #site-navigation button.menu-toggle::after,
  #site-navigation button.menu-toggle > span::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 20px !important;
    height: 2px !important;
    background: #fff !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: block !important;
    border-radius: 1px;
  }
  #site-navigation button.menu-toggle::before {
    transform: translate(-50%, calc(-50% - 6px)) !important;
  }
  #site-navigation button.menu-toggle::after {
    transform: translate(-50%, calc(-50% + 6px)) !important;
  }
  #site-navigation.toggled button.menu-toggle::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }
  #site-navigation.toggled button.menu-toggle::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
  #site-navigation.toggled button.menu-toggle > span::before {
    opacity: 0 !important;
  }

  .storefront-primary-navigation > .col-full .site-search {
    flex: 1 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 10;
  }

  .site-search form {
    max-width: 100%;
    margin: 0;
  }

  .main-navigation ul.menu,
  .main-navigation ul.nav-menu {
    flex-wrap: wrap;
    gap: 0;
  }
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a {
    padding: 12px 12px !important;
    font-size: 13px !important;
  }
}