:root {
	--wd-text-font: Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #2d2a2a;
	--wd-text-font-size: 18px;
	--wd-title-font: Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-color: #2d2a2a;
	--wd-entities-title-font: "Acme", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Acme", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Playfair Display", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Courgette", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 400;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 22px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: #d6d6d6;
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #7f6051;
	--btn-accented-bgcolor-hover: #6b4f41;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 280px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(249,249,249);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(242,242,242);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1350px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1350px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1350px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1350px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.wd-page-title {
background-color: #0a0a0a;
}

bdi {
	color: #333 !important;
}

.woodmart-buttons.wd-pos-r-t {
	display: none;
}

.min-footer {
	font-size: 15px;
}

.color-scheme-light, .woodmart-dark {
	color: rgba(255,255,255,1);
}

@media only screen and (max-width: 1260px) {
  span.nav-link-text {
		font-size: 20px !important;
  }
}

@media only screen and (max-width: 1180px) {
  span.nav-link-text {
		font-size: 17px !important;
  }
}

.whb-column.whb-col-center.whb-visible-lg {
	margin-left: 75px;
}

h4 { 
	font-family: "Courgette", Arial, Helvetica, sans-serif !important;
}

.wd-dropdown-menu.wd-design-sized:not(.wd-scroll) {
	margin-left: -300px !important;
}

.vc_custom_heading a {
	color: #fff;
}

.menu-simple-dropdown .sub-menu-dropdown, .menu-simple-dropdown .sub-sub-menu {
	background-color: #000;
}

.navigation-style-separated .menu-simple-dropdown .color-scheme-dark li a {
	color: #fff;
}

.mysticky-welcomebar-fixed .mysticky-welcomebar-content p a, .mysticky-welcomebar-fixed .mysticky-welcomebar-content p {
	text-align: center !important;
	line-height: 1.5 !important;
}







/* =========================================================
   Category filter sidebar — white, sticky, modern redesign
   Target: WoodMart "Filtrera efter kategori" widget
   (.wd-product-category-filter inside .sidebar-left)

   HOW TO USE
   Paste this whole block into:
     WP Admin → Appearance → Customize → Additional CSS
   (or your child theme's style.css)
   No template/PHP changes needed — this only restyles the
   markup WoodMart already renders.

   QUICK TWEAKS
   Change the two variables below to adjust the accent color
   and how rounded the corners are.
   ========================================================= */

.wd-product-category-filter {
  --sf-accent: #b8863b;   /* accent color used for hover / active state */
  --sf-radius: 14px;      /* corner roundness of the card and rows */
}

/* ---------- sticky positioning ----------
   Important: the sticky offset has to live on .widget-area
   (the widget's direct wrapper), not on the widget itself.
   The widget's own wrapper is only as tall as its content, so if
   the widget were sticky directly it would immediately run out
   of room to move within — it needs its taller ancestor
   (.sidebar-left) as the space it can travel through, and
   .widget-area is the child that actually sits inside that
   ancestor. */
.widget-area {
  position: sticky;
  top: 90px;   /* header height + breathing room — adjust to match your header */
}

/* extra offset for logged-in admins (WP admin bar) */
body.admin-bar .widget-area {
  top: 122px;
}

/* ---------- the card itself ---------- */
.wd-product-category-filter {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--sf-radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 20px 40px -16px rgba(0, 0, 0, 0.12);
  padding: 26px 22px 22px;
}

/* The theme has its own `.widget:last-child { padding-bottom: 0 }`
   rule, and it's more specific than a single-class selector, so it
   wins and flattens the bottom padding. !important forces ours
   back on for this one property. */
.wd-product-category-filter {
  padding-bottom: 22px !important;
}

/* ---------- title ---------- */
.wd-product-category-filter .widget-title {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---------- category list ---------- */
.wd-product-category-filter .wd-scroll {
  max-height: none;
  overflow: visible;
}

.wd-product-category-filter .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wd-product-category-filter .product-categories .cat-item {
  margin: 0;
  padding: 0;
}

.wd-product-category-filter .product-categories .cat-item a.wd-filter-lable {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: calc(var(--sf-radius) - 5px);
  color: #5c5c5c;
  font-size: 15px;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* small dot marker before the label, like the mockup */
.wd-product-category-filter .product-categories .cat-item a.wd-filter-lable::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.wd-product-category-filter .product-categories .cat-item:hover a.wd-filter-lable {
  /* The theme ships a global `a:hover { color: #eee !important }`
     rule, so without !important here the label text turns almost
     invisible the moment you hover it. */
  color: #2d2a2a !important;
  transform: translateX(2px);
}

.wd-product-category-filter .product-categories .cat-item:hover a.wd-filter-lable::before {
  background: var(--sf-accent);
}

/* count badge (pill) */
.wd-product-category-filter .product-categories .cat-item .count {
  margin-left: auto;
  font-size: 12px;
  color: #9a9a9a;
  background: #f2f0ee;
  padding: 2px 9px;
  border-radius: 20px;
  min-width: 26px;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ---------- active category ----------
   No background fill — the selected state shows only as a colored
   dot (and a colored count badge), so the list stays calm even when
   several categories are active at once (multi-select filtering). */
.wd-product-category-filter .product-categories .cat-item.wd-active a.wd-filter-lable {
  color: #2d2a2a !important; /* same !important reason as the :hover rule above */
  font-weight: 600;
  transform: none;
}
.wd-product-category-filter .product-categories .cat-item.wd-active a.wd-filter-lable::before {
  background: var(--sf-accent);
}
.wd-product-category-filter .product-categories .cat-item.wd-active .count {
  background: var(--sf-accent);
  color: #fff;
}

/* ---------- keep it from sticking on tablet / mobile ---------- */
@media (max-width: 991px) {
  .widget-area {
    position: static;
  }
  .wd-product-category-filter {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
}





/* =========================================================
   Hide prices for logged-out visitors
   Shows "Logga in för att se pris" instead of the price,
   wherever WooCommerce prints one (shop grid, single product
   page, related/upsell products) — logged-in customers still
   see prices as normal.

   HOW TO USE
   Paste this into the same place as the other CSS (WPCode CSS
   snippet, or Appearance → Customize → Additional CSS).
   ========================================================= */

body:not(.logged-in) .price > * {
  display: none !important;
}

body:not(.logged-in) .price::after {
  content: "Logga in för att se pris";
  display: inline-block;
  color: #767676;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}




.shop-loop-head {
	display: none !important;
}

.wd-active-filters {
	display: none !important;
}

/* The theme has its own `.widget:last-child { padding-bottom: 0 }`
   rule, and it's more specific than a single-class selector, so it
   wins and flattens the bottom padding. !important forces ours
   back on for this one property. */
.wd-product-category-filter {
  padding-bottom: 22px !important;
}

/* ---------- title ---------- */
.wd-product-category-filter .widget-title {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---------- category list ---------- */
.wd-product-category-filter .wd-scroll {
  max-height: none;
  overflow: visible;
}

.wd-product-category-filter .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wd-product-category-filter .product-categories .cat-item {
  margin: 0;
  padding: 0;
}

.wd-product-category-filter .product-categories .cat-item a.wd-filter-lable {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: calc(var(--sf-radius) - 5px);
  color: #5c5c5c;
  font-size: 15px;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* small dot marker before the label, like the mockup */
.wd-product-category-filter .product-categories .cat-item a.wd-filter-lable::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.wd-product-category-filter .product-categories .cat-item:hover a.wd-filter-lable {
  /* The theme ships a global `a:hover { color: #eee !important }`
     rule, so without !important here the label text turns almost
     invisible the moment you hover it. */
  color: #2d2a2a !important;
  transform: translateX(2px);
}

.wd-product-category-filter .product-categories .cat-item:hover a.wd-filter-lable::before {
  background: var(--sf-accent);
}

/* count badge (pill) */
.wd-product-category-filter .product-categories .cat-item .count {
  margin-left: auto;
  font-size: 12px;
  color: #9a9a9a;
  background: #f2f0ee;
  padding: 2px 9px;
  border-radius: 20px;
  min-width: 26px;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ---------- active category ----------
   No background fill — the selected state shows only as a colored
   dot (and a colored count badge), so the list stays calm even when
   several categories are active at once (multi-select filtering). */
.wd-product-category-filter .product-categories .cat-item.wd-active a.wd-filter-lable {
  color: #2d2a2a !important; /* same !important reason as the :hover rule above */
  font-weight: 600;
  transform: none;
}
.wd-product-category-filter .product-categories .cat-item.wd-active a.wd-filter-lable::before {
  background: var(--sf-accent);
}
.wd-product-category-filter .product-categories .cat-item.wd-active .count {
  background: var(--sf-accent);
  color: #fff;
}

/* ---------- keep it from sticking on tablet / mobile ---------- */
@media (max-width: 991px) {
  .widget-area {
    position: static;
  }
  .wd-product-category-filter {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
}







/* =========================================================
   "Ansök om konto" widget — white card, matching the
   "Filtrera efter kategori" widget's look
   Target: your custom text-block widget with class .handlasomaf

   HOW TO USE
   Replace the previous version of this snippet with this one
   (same spot: WPCode CSS snippet, or Appearance → Customize →
   Additional CSS). No template changes needed.

   WHAT CHANGED FROM THE FIRST VERSION
   - The card is now put on the column's inner wrapper instead of
     the column itself, with a matching width correction — the
     column element bleeds 15px past each edge (part of the grid
     system WPBakery builds this widget with), which is why the
     card came out wider than "Filtrera efter kategori" before.
   - The heading and the paragraph text below it actually live in
     the same line of text, split only by a line break — turning
     the heading into its own block (needed to give it a bottom
     border) left that line break in as an extra gap underneath.
     It's hidden now so the border and paragraph sit close again.
   ========================================================= */

.handlasomaf {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.handlasomaf .vc_column-inner {
  width: calc(100% - 30px);
  margin: 0 15px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 20px 40px -16px rgba(0, 0, 0, 0.12);
  padding: 26px 22px 22px;
}

.handlasomaf .wpb_wrapper {
  padding: 0;
  margin: 0;
}

/* the heading and the paragraph text are split only by a <br> —
   hide it now that the heading is its own block, so it doesn't
   add a second gap underneath the border */
.handlasomaf .wd-text-block p:first-of-type br {
  display: none;
}

/* "Ansök om konto" heading — matched to the filter widget's
   .widget-title (same font, size, weight, uppercase, border). */
.handlasomaf .wd-text-block p:first-of-type span {
  display: block;
  margin: 0 0 10px;
  padding-bottom: 14px;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.08);
  font-family: "Playfair Display", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgb(51, 51, 51);
  text-transform: uppercase;
}

/* body paragraph text */
.handlasomaf .wd-text-block p:first-of-type {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5c5c5c;
}

/* "Ansök om återförsäljarkonto →" line — styled as the
   call-to-action, using the same accent color as the filter widget */
.handlasomaf .wd-text-block p:last-of-type {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #b8863b;
}



:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
    max-height: none !important;
    overflow: visible !important;
}