/*---------------------
General
---------------------*/

:root {

    --c-brand: #184e8e; /* #004f90 ;*/ /* blå */
    --c-drkblue: #0e1f32;
    --c-lghtblue: #ecf7ff;
    --c-brand-inv: #fff;
    --c-accent: #4FD09E; /* hydraulgul */        
    --c-muted: #6E7B8B; /* stålgrå */
    --c-def-background: #ffffff;
    --c-def-text: #4f4f4f;
    --c-sale: #c21f2b;
    /*--c-other-text-: #4f4f4f;*/
    --radius: 14px;
    --shadow: 0 6px 18px rgba(0,0,0,.08);
    --shadow-hover: 0 10px 24px rgba(0,0,0,.12);
}


.relative { position: relative; }
/*
Customer polymer-element color
*/
.customerElementOne {
    background-color: var(--c-brand);
    color: var(--c-brand-inv);
}

.customerElementTwo{
    background-color: var(--c-brand);
    color:var(--c-brand-inv);
}




.btn-primary {
    font-size: 16px;
    font-weight: bold;
    min-width: 130px;
    display: inline-block;
    border-radius: 4px;
    font-size: 16px;
    line-height: 24px;
    border: none;
    outline: none;
    padding: 13px 32px;
    transition: background .2s,color .2s;
    text-align: center;
    user-select: none;
    background: #184e8e;
    color: #fff;
        cursor: pointer;
    }
        .btn-primary:disabled {
            cursor: not-allowed;
        }

.bottom-tab>a.active {
    background: #0063b4;
}
.btn-primary:hover {
    background: #0063b4;
    color: #fff;
}
.bottom-tab {
    position: fixed;
    bottom: 0;
    right: 39px;
    text-align: right;
    z-index: 10;
}
.bottom-tab #bottom-tab-cookies {
    min-width: 0;
    vertical-align: top;
    padding: 10px 20px;
}

/* bottom-tab slide/collapse (replace existing .bottom-tab .tab-content blocks) */
.bottom-tab .tab-content {
    color: black;
    display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms ease, opacity 220ms ease;
  pointer-events: none;
}

.bottom-tab .tab-content.open {
  opacity: 1;
  max-height: 400px;
  pointer-events: auto;
  display: block;
}

.bottom-tab .tab-content strong { font-weight: 600; font-size: large; }
.bottom-tab .tab-content p a {
    color: #0e1f32 !important;
}
.bottom-tab>a {
    padding: 8px 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0px 4px 15px rgba(13,31,50,.15);
}
.bottom-tab .tab-content {
    text-align: left;
    border-radius: 4px 0px 0px 0px;
    box-shadow: 0px 4px 15px rgba(13,31,50,.15);
    min-width: 246px;
    background: #fff;
    display: none;
}
.bottom-tab .tab-content .tab-content-inner {
    padding: 0 40px;
    padding-top: 32px;
    padding-bottom: 24px;
}
.bottom-tab .tab-content p {
    margin-bottom: 15px;
}

.bottom-tab .tab-content p a {
    color: #0e1f32;
}
.bottom-tab .tab-content p a i {
    color: #184e8e;
    width: 20px;
    margin-right: 10px;
}
.bottom-tab>a img {
    margin-right: 4px;
    width: auto;
    height: auto;
    max-width: 100%;
    display:inline-block;
}

.bottom-tab .tab-content .tab-content-inner {
    padding: 0 40px;
    padding-top: 32px;
    padding-bottom: 24px;
}

b, strong {font-weight: 600;}

a						{font-weight:normal; color:unset;}
a:hover					{text-decoration:none;}

h1, h2, h3, h4, h5				{font:600 14px "Oxygen", sans-serif; }
h1						{font-size:30px; margin:0 0 10px 0; font-weight:600;}
h2						{font-size:2rem; margin:25px 0 5px 0;}
h3						{font-size:18px; margin:25px 0 5px 0;}
h4						{font-size:16px; margin:25px 0 5px 0; font-weight:600; line-height:1.5;}
p						{margin:0 0 10px 0; font-size:14px;}

::selection             {background:#d0e8ff;}
::-moz-selection        {background:#d0e8ff;}

table,
table tr,
table tr td				{font-family: 'Oxygen', sans-serif; /*font:normal 12px/1.5 Arial, Verdana, Sans-serif;*/}

img, table				{border:0;}
html 					{margin:0; padding:0;}
body { margin: 0; padding: 0; COLOR: var(--c-drkblue); font-size: 12px; font-family: 'Oxygen', sans-serif; font-weight:300; line-height: 1.5; background-color: var(--c-def-background, #fff);}
/*
    body { margin: 0; padding: 0; COLOR: var(--c-def-text, #000); font-size: 12px; font-family: "Stack Sans Headline", sans-serif; font-weight:300; line-height: 1.5; background-color: var(--c-def-background, #fff);}
*/
svg {width: 100%;}

/* hide all variants */
#Layer_1 #Sverige,
#Layer_1 #Finland,
#Layer_1 #Nordic,
#Layer_1 #Danmark,
#Layer_1 #Logistics {
  display: none;
}

/* show selected */
.lang-sv #Layer_1 #Sverige { display: inline; }
.lang-fi #Layer_1 #Finland { display: inline; }
.lang-da #Layer_1 #Danmark { display: inline; }
.lang-nordic #Layer_1 #Nordic { display: inline; }
.lang-logistics #Layer_1 #Logistics { display: inline; }

/*---------------------
Body layout
---------------------*/
#wrapper 					{margin:0 auto; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;}
#wrapper:has(.productdetails) {overflow:visible;}
.inner                      {margin-left: 0rem; margin-right: 0rem;}

#wrapper > .header {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index:999999;
    box-shadow: 0px 1px 5px #0000001f;
}
.header .inner {    height: 100%; }
.header .customerSelector {background:#184e8e; padding: 10px 0;}
.header .customerSelector .inner { min-height: 0; display: flex; justify-content: flex-end; align-items:center; }
.header .customerSelector p {color:#fff; margin: 0;}
.header .customerSelector p select {color:#000; background:#fff; padding: 5px;}

.header .logo { order: 1; max-height: 100px; }
.header .logo img { min-width: 100px; }

.h-16 { height: 3rem; }

.header .lang-pnl {
    order: 2;
}

.header .searchbar {
    flex: 1;
    order: 3;
    max-width: 100%;
    position: relative;
}

.search-container {
    position: relative;
    max-width: 100%;
    width: 100%;
}

.header-search-tbx {
    width: 100%;
    padding: 10px 40px 10px 15px; /* extra höger-padding för ikonen */
    border: 1px solid #1F3B73;
    border-radius: 9999px; /* rundad */
    font-size: 16px;
    outline: none;
    border-color:#d5d5d5;
}

    .header-search-tbx:focus {
        border-color: #1F3B73; /* mörkblå vid fokus */
        box-shadow: 0 0 0 1px #1F3B73;
    }

.search-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #888;
    font-size: 16px;
}

    .search-btn:hover {
        color: #1F3B73;
    }
.search-results {
    /*margin-top: 10px;
    padding-top: 10px;*/
    position: absolute;
    top: 100%; /* direkt under sökfältet */
    left: 0;
    width: 100%;
    min-width:400px;
    max-height: 480px;
    overflow-y: auto;
    background: #fff;
    border-top: none; /* så den smälter ihop med input */
    border-radius: 12px;
    z-index: 9999; /* lägg över header och annat */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.overlay-search-alert {
    padding: 10px;
}

.search-viewall {
    text-align: center;
    margin-top: 10px;
}

.viewall-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
    margin-bottom:10px;
}

    .viewall-btn:hover {
        background-color: var(--c-accent);
    }

    .search-container .header-search-preloader { max-width: 30px; margin:5px;}


.header .topmenu {
    order: 4;
}
.header .cart { order: 5; }


@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-scroll {
   /* animation: scroll-left 40s linear infinite; */
    white-space: nowrap;
}


    .header #contact {
        position: absolute;
        right: 20px;
        top: 10px;
    }

.header #responsive-menu-btn  {display:none;}

.topmenu {
    position: relative;
    z-index: 1000;
}

    .topmenu ul.first {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 5px;
    }

        .topmenu ul.first > li {
            display: inline-block;
            position: relative;
            padding: 0 0 20px 0;
            margin-top: 30px;
        }

        .topmenu ul.first li a {
            font-weight: 400;
            font-size: 16px;
            
            text-decoration: none;
            padding: 10px 12px;
            display: block;
        }

        .topmenu ul.first > li.on a {
            background-color: transparent;
            
        }

        .topmenu ul.first li a:hover {
            color: var(--c-brand);
            text-decoration: none;
        }

        .topmenu ul.first li:hover .icon i {
            transform: rotate(180deg);
        }

        .topmenu ul.first li a.haschild {
            display: none;
        }

    .topmenu ul.second {
        display: none;
        position: absolute;
        top: 45px;
        left: 0;
        padding: 0;
        margin: 0;
        z-index: 2000;
        background: var(--c-drkblue);
        border-radius: 10px;
        list-style: none;
        min-width: 160px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

    .topmenu ul.first li:hover > ul.second {
        display: block;
    }

    .topmenu ul.second li {
        border-bottom: 1px solid #ffffff26;
        width: 100%;
        box-sizing: border-box;
    }

        .topmenu ul.second li:hover {
            background: #132b45;
        }

            .topmenu ul.second li:hover a {
                color: #fff;
            }

        .topmenu ul.second li a {
            white-space: nowrap;
            padding: 10px 14px;
            color: white;
            display: block;
        }

        .topmenu ul.second li:last-child {
            border-bottom: none;
        }


.header #nav ul#responsive            {display:none;}
.header .contactPuffs {
    position: absolute;
    right: 0;
}

/*

    -- :Language selector

*/
.lang {
    position: relative;
    max-width: 88px;
    min-width: 88px;
}
.langButton {
    background-color: none;
    padding: 7px 35px 2px 14px;
    border-radius: 500px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.langButton:before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    right: 10px;
    position: absolute;
    font-size: 15px;
    bottom:-2px;
}

.lang img {
    height: 20px;
    aspect-ratio: 1/1;
    padding-right: 4px;
}

    

.langs {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
    top: 33px;
    
    width: 100px;
    background-color: var(--c-brand);
    position: absolute;
    display: none;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
    z-index: 10;
    border-radius: 10px;
}

.langs li {    
    
}
.langs li:hover {    
    background-color: #fff;
}

.langs li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    padding: 8px 16px;
    width:100%;
    box-sizing: border-box;
    display: inline-block;
}
    .langs li:hover a {
        color: #000;
    }



/*

    Simple accordion

*/
    .accordion {}
    .accordion summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: end;
        
    }

    .accordion summary::-webkit-details-marker {
        display: none; /* hide default arrow */
    }

    .accordion summary::after {
        content: "▸";
        transition: transform 0.2s;
        margin-left: 0.5rem;
        font-size: 3rem;
        line-height: 1;
    }

    .accordion[open] summary::after {
        transform: rotate(90deg);
    }

    .accordion .content {
        padding: 10px 0;
    }



/*---------------------
Page layout
---------------------*/
.clearfix:after 			{content:"."; display:block; height:0; clear:both; visibility:visible;}
* html .clearfix 			{height: 1%;}

#wrapper > .content			{ background-color:#fff; flex: 1; margin-top: 100px;}
    #wrapper > .content.selectedCustomers {margin-top: 150px;}
    #wrapper > .designtemplate.content { margin-top: 159px; }
#wrapper #scroll-anchor {
    scroll-margin-top: 100px;
}
.content					{ background-color:#fff; flex: 1; }
.content .inner             {min-height:50px; overflow:visible; padding:40px 0;}
.designtemplate.content .inner {padding:0px 0px 0px 0px;}
.contentright   			{width:100%; margin:0; padding:0; float:right; overflow:visible;}

/*---------------------
Submenu vertical
---------------------*/ 
.leftmenu                           {float:left; width:25%;}
.leftmenu ul					    {width:90%; margin:0; padding:0 0 10px 0; list-style:none; overflow:hidden;}
.leftmenu ul li				        {width:100%; margin:0; padding:0; border-bottom:1px dotted #999;}
.leftmenu ul li:last-child          {background:none; border:0;}
.leftmenu ul li a				    {width:100%; margin:0; padding:0; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.leftmenu ul li a:hover             {color:#333;}
.leftmenu ul li.on a			    {color:#333; font-weight:bold;}
.leftmenu ul li.on-childs           {background:none; border:0;}
.leftmenu ul li.on-childs a	        {color:#555; font-weight:bold; line-height:30px;}

.leftmenu ul li.on-childs ul            {margin:0 0 0 15px !important;}
.leftmenu ul li.on-childs ul li         {background:none; border:0;}
.leftmenu ul li.on-childs ul li a       {font-weight:normal !important; line-height:24px !important; font-size:11px; color:#555;}
.leftmenu ul li.on-childs ul li a:hover {color:#333;}
.leftmenu ul li.on-childs ul li.on a    {color:#333; font-weight:bold !important;}

/*---------------------
Submenu horizontal
---------------------*/ 
.fullmenu                           {background-color:#cccccc;}
.fullmenu ul					    {width:auto; text-align:center; margin:0; padding:0; list-style:none; overflow:hidden;}
.fullmenu ul li				        {display:inline-block; margin:0 10px; padding:0; }
.fullmenu ul li:last-child          {background:none; border:0;}
.fullmenu ul li a				    {margin:0; padding:5px 10px; font:normal 12px/40px Arial; color:#555; text-decoration:none; display:block;}
.fullmenu ul li a:hover             {color:#333;}
.fullmenu ul li.on a, .fullmenu ul li.on-childs a			    {color:#333; font-weight:bold;}

/*---------------------
Footer layout
---------------------*/
#footer					{ width:100%; position:relative; }
#footer a				{font-weight:normal; text-decoration:none;}
#footer,
#footer a				{color: var(--c-brand-inv);}
#footer .bottom-content {color: var(--c-def-text); }
#footer .top-content    {background-color: var(--c-brand); padding: 4rem 1rem; }    
#footer .bottom-content {padding: 0rem 1rem; }
#footer .phone,
#footer .email { font-size: clamp(14px, 3vw, 20px); }

#footer {
    border-top: 1px solid #e9e9e9;
}
#footer .top {
    background: #184e8e;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 70px;
    overflow: hidden;
}

#footer .bottom { color: black; }

#footer .top .container-fluid {
    background-color: #184e8e;
}

#footer .container-fluid {
    max-width: 1070px;    
}

#footer .editor_content p.preamble, 
body#tinymce p.preamble {
    font-size: 18px;
    line-height: 1.333;
}

    
#footer .container, 
#footer .container-fluid, 
#footer .container-lg, 
#footer .container-md, 
#footer .container-sm, 
#footer .container-xl, 
#footer .container-xxl {
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
}
#footer .editor_content h2, #footer .editor_content p.preamble {
    color: #fff;
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
}


#footer .editor_content h2, 
#footer .editor_content p.preamble {
    color: #fff;
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
}

#footer .bottom a,
#footer .bottom .editor_content h2, 
#footer .bottom .editor_content p.preamble {
    color: #000;
}




#footer .editor_content ul.brand-logotypes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -30px;
    margin-top: 65px;
    padding-left: 0;
}
#footer .editor_content ul.brand-logotypes li {
    padding: 0 20px;
    margin-bottom: 30px;
    width: 10%;
}
.footer-copyright {
    background: #0e1f32;
    color: #fff;
    text-align: center;
    padding: 15px 15px;
    font-size: 15px;
}
.footer-site-info {
    display: flex;
    flex-wrap: wrap;
    padding-top: 77px;
    padding-bottom: 65px;
    overflow: hidden;
}
.footer-site-info .col-contact {
    flex: 1 1 50%;
    
    padding-right: 15px;
}
.footer-site-info .col-cats {
    flex: 1 1 40%;    
    border-left: 1px solid #d3d3d3;
    padding-left: 100px;
    padding-right: 15px;
}
.footer-site-info .col-links {
    flex: 1 1 50%;
    text-align:center;
}
.footer-site-info .col-links > div {
    width:min-content;
    text-align:left;
    margin: auto;
}
    .footer-site-info .col-links > div > h4 {
        margin-top: 3px;
    }

.footer-site-info ul.product-cats, .footer-site-info ul.links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-site-info ul.product-cats a, .footer-site-info ul.links a {
    font-size: 15px;
    color: #0e1f32;
}



/*#footer .inner          {min-height:40px; _height:40px; }
#footer a:hover         {text-decoration:underline;}
#footer .left			{float:left; padding:0; margin:0; text-align:left;}
#footer .right			{float:right; padding:0; margin:0; text-align:right; display:none;}
#footer .right .rss img, 
#footer .right .facebook img, 
#footer .right .twitter img	    {margin:0 0 3px 2px; padding:0; border:0;}

#footer .links                  {margin-bottom:10px; }
#footer .links .left		    {float:left; width:16%; display:block; overflow:hidden; margin:0 0.6% 1% 0; text-align:left; clear:right;}
#footer .links .left li         {list-style-type:none; margin-left:0; padding-left:0;}
#footer .links .left.first	    {padding-left:0px;}
#footer .links .left p a		{color:#fff; display:block; line-height:20px; font-size:10px; font-family:Arial, Verdana, sans-serif;}
#footer .links .left p a strong	{color:#fff; font-size:12px;}*/


a.arrow {
    background-image: url("/gfx/icons/arrow-blue.svg");
    background-repeat: no-repeat;
    padding-left: 25px;
    background-position: left 2px;
    color: var(--c-brand);
    font-weight:600;
}


@media screen and (min-width: 960px) {
    .header .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-height: 100px;
        max-width: 1280px;
        margin:0 auto;
        padding-inline: 1rem;
    }

    .category-puffs, #productPuffs .product-puffs, #start-puffs, .animate-scroll, .instagram-feed, .facebook-posts, .product-details .product-info-and-images, .breadcrumbs, .products-layout, .content .inner, .ticker, .puffList, #categoryContent, .category-topmenu-container .category-menu, .category-topmenu-container {
    max-width: 1280px;
    margin: 0 auto;
    }

}





@media screen and (max-width: 960px)
{
    h1  {font-size:32px;}
    h2  {font-size:26px;}
    h3  {font-size:18px;}
    
    .header 						        {width:auto; height:auto; margin:0; padding:0; position:relative; padding: 0 0px 67px 0px;}
    .header .inner {
            display: flex;
            flex-direction: row;   /* liggande rad */
            align-items: center;   /* centrera vertikalt */
            justify-content: space-between;
            gap: 10px;
            padding: 10px;
        }

        .header .logo {
            width:auto;
            order: 1;
            flex: 0 0 auto; /* behåll sin storlek */
        }

        .header .searchbar {
            position: absolute;
            top: 65px;
            right: 20px;
            left: 20px;
            order: 2;
            flex: 1;              /* ta upp allt mellanrum */
            max-width: 100%;      /* låt den expandera */
        }
        .header.big .searchbar {
            top: 155px;
        }

        .search-container {
            max-width: 100%;
        }

        .header .cart {
            order: 3;
            flex: 0 0 auto; /* behåll sin storlek */
        }
    
    .header #nav					        {position:static; top:0; left:0; height:auto; min-height:50px; width:100%; padding:0; margin:0; z-index:9; display:none;}
    .header .topmenu                      {display:none;}

    .header #responsive-menu-btn          {position:absolute; right:0px; top:11px; display:block; height:50px; padding:0 14px; z-index:999; color:#000; font-size:30px; font-weight:bold; text-transform:uppercase; line-height:50px; text-decoration:none; cursor:pointer;}
    .header.big #responsive-menu-btn {top: 93px;}
    
    #shopping-cart                        { right: 40px !important;}

    .content					{width:auto; height:auto; min-height:100px; margin:0; padding:0;}
    .content .inner             {padding-bottom:2%;}
    .submenu				    {display:none;}
    
    .content .inner	            {width: auto;  margin:0; padding:10px; }
    .designtemplate.content .inner	        {padding:0px; }
    .contentright               {float:none; width:100%;}

/*    #footer					    {width:auto; margin:0; padding:2% 0 0 0; clear:left; position:relative; font-size:11px; line-height:16px;}
    #footer .links              {display:none;}*/
        
	table.responsive-table, 
	table.responsive-table thead, 
	table.responsive-table tbody, 
	table.responsive-table th, 
	table.responsive-table td, 
	table.responsive-table tr           {display:block; border:0;}
	table.responsive-table thead tr     {position:absolute; top:-9999px; left:-9999px;}
	table.responsive-table tr           {border:1px solid #ccc;}
	table.responsive-table td           {padding:4px 6px;}
	table.responsive-table td           {border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; white-space:normal; text-align:left !important;}
 	table.responsive-table td:before    {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;}
	table.responsive-table td:before    {content:attr(data-title);}
}


/* Avstånd */
#productPuffs, .instagram-feed, .facebook-feed, #start-puffs, .puffList, .category-info-contaioner {
    padding: 1rem 1rem;
}

.products-layout {
     padding: 0 1rem 3rem 1rem;
}

    #productPuffs .product-puffs, #start-puffs .puffitem {
    padding-top:2rem;
    }




span.link {
    margin-top:0.5rem;
    font-size:1rem;
    font-weight:600;
    padding: 1rem;
    color: var(--c-brand-inv);
    background-color: var(--c-brand);
    display: inline-block;
}


/* Grid: små kort */
/* Grid: små kort */
#productPuffs .product-puffs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
    gap: 25px;
}


/* Kort */
.product-item {
    background: #fff;
    /*border: 1px solid rgba(0,0,0,.06);*/
    /*border-radius: var(--radius);*/
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .product-item:hover {
        transform: translateY(-1px);
       /* box-shadow: 0 8px 18px rgba(0,0,0,.08); */
        border-color: rgba(0,0,0,.12);
    }

/* Klickyta */
.inner-product-item {
    display: grid;
    grid-template-rows: auto auto auto;
    text-decoration: none;
    color: inherit;
}

/* Bild: liten, kvadratisk */
.product-item .image {
    aspect-ratio: 1/1;
    background: #f5f7fa;
}

    .product-item .image img  {
        mix-blend-mode: multiply;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }



    
    

/* Titel: två rader max */
.product-details .product-general-info .product-card .product-title,
.product-card .product-title,
.product-title {
    margin: 0px;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--c-def-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.25em; /* håller höjd jämn */
}

/* Prisrad: kompakt */
.product-price {
    font-size:16px;
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 6px 0px 0px;
    font-weight: 700;
}

    .product-price.current {        
        font-size: .98rem;
    }
    .campaign .product-price.current {
        color: var(--c-sale);
    }

    .product-price.original {
        color: var(--c-muted);
        text-decoration: line-through;
        font-weight: 500;
        font-size: .85rem;
        display:none;
    }
    .product-item.campaign .product-price .original {display:inline;}

/* Badge för kampanj (tar minimal plats) */
.product-item.campaign {
    position: relative;
}

    .product-item.campaign::after {
        content: "";
        position: absolute;
        top: 6px;
        left: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--c-accent);
        box-shadow: 0 0 0 2px #fff;
    }



/* TextFilter Control */
.text-filter-ctrl-width { width: 300px; max-width: 100%; box-sizing: border-box; }
.text-filter-ctrl { width: 100%; }
.text-filter-ctrl .frame {  width: 100%; }
.text-filter-ctrl .frame .text-input { padding: 0px 8px 0 0; border: none; border-right: 1px solid #ddd; border-radius: 0px; font-weight: 100; width:calc(100% - 64px); }
.text-filter-ctrl .frame .text-filter-btn { 
    margin-left: 8px; 
    background-color: transparent;
    color: #000000;
    border-radius: 5px;
    
    font-weight: 100;
    position: absolute;
    right: 15px;
}


/* Cols - flexbox */
.col-3-content { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; }
.col-3-content > * { flex: 1 1 33.33333%; }



.media-frame { width: 100%; height:100%;}
.media-video > div {width: 100%; height:100%;}
.media-video video {width: 100%; height:100%; object-fit:cover;}

.relative { position: relative; }
.brands-over-image { position: absolute; bottom: 0; height: 75px;}
.brands-over-image .carousel-frame  {height: 100%;}

.brands-over-image .carousel-frame, 
.brands-over-image .carousel-frame .splide, 
.brands-over-image .carousel-frame .splide__slide, 
.brands-over-image .carousel-frame .splide__track {
    background: none;
}

.brands-over-image .carousel-frame .splide__slide {padding:1rem 2.5rem;}
.brands-over-image .carousel-frame .slide-img {    
    height: auto;
    width: auto;
    max-height: 100%;
    object-fit: contain;
    max-width: 100%;
}

.brands-over-image .carousel-frame .splide__slide .slide-inner-frame { display: flex; justify-content:center; align-items: center; }
.brands-over-image .carousel-frame .splide__slide .text-area { background: none; background-color: transparent; }
.brands-over-image .carousel-frame .splide__slide .slide-inner-frame img { max-width: 150px; max-height: 55px; object-fit:contain; height:100%; } 






@media screen and (min-width: 1200px) {
    .duplicate{display:none;}
    
    .ticker { display: flex; justify-content: space-between; }
}



@media screen and (max-width: 1200px) {

        .ticker-wrap {
          display: flex;
          width: max-content;
          animation: scroll 20s linear infinite; /* keyframes applied here */
        }

        .ticker {
          display: flex;
          gap: 2rem;
          white-space: nowrap;
          margin-left:2rem;
        }

        @keyframes scroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); } /* move by one set’s width */
        }

}


@media screen and (max-width: 960px) {
    #wrapper > .content {    
        margin-top: 128px;
    }
    #wrapper > .content.selectedCustomers {margin-top: 200px;}
    #wrapper > .designtemplate.content {
        margin-top: 214px;
    }
}

@media screen and (max-width: 800px) {
    .fl-3-cols-to-pyramid-at-800 { display: flex; flex-wrap: wrap;}
    .fl-3-cols-to-pyramid-at-800 > :first-child { flex: 0 0 100%; }    
    .fl-3-cols-to-pyramid-at-800 > :nth-child(n+2) { flex: 1 1 50%; margin-top: 2rem; }

    #footer .bottom .footer-site-info > :nth-child(2) { border-left: none; padding-left: 0px;  }    
    #footer .bottom .footer-site-info .col-contact > * { padding-inline: 10px; text-align: center;}    
    #footer .bottom .footer-site-info .col-contact > :nth-child(2) {  }
    
}

@media screen and (max-width: 680px) {
    #footer .editor_content ul.brand-logotypes li { width: 33%; }
    .footer-site-info { }
    .text-filter-ctrl-width {width: auto; }

    
    .col-3-content > * { flex: 1 1 50%; }

    
}

@media screen and (max-width: 640px) {
    .hide-at-640 {display: none !important; }
    .flex-at-640 {display: flex !important; }
    .remove-aspect-ratio-at-640 { aspect-ratio: unset; }
}

@media screen and (max-width: 600px) {

    #productPuffs .product-puffs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
    }

    .customerElementOne{
         overflow: hidden;
    }


}




@media screen and (max-width: 600px)
{
    h1  {font-size:26px;}
    h2  {font-size:20px;}
    h3  {font-size:16px;}    
}

@media screen and (max-width: 480px)
{
    h1  {font-size:24px;}
    h2  {font-size:18px;}
    h3  {font-size:16px;}
    .col-3-content > * { flex: 1 1 100%; }
}


@media screen and (max-width: 400px) {
    #wrapper > .header {
        padding-bottom: 10px;
    }
    #wrapper > .designtemplate.content			{ margin-top: 270px;}
    #wrapper > .content.selectedCustomers { margin-top: 257px;}
    #wrapper > .content.selectedCustomers.productdetails { margin-top: 257px;}
    .header .inner {
        
        flex-wrap: wrap;
        
        justify-content: space-between;
        gap: 10px;
        padding: 10px;
    }
    .header .logo {        
        flex: 1 0 100%;
    }
    .header .cart {
        order: 2;
        flex: 0 0 auto;
    }
    #shopping-cart {
        right: 0px !important;
    }
    .header .searchbar {
        position: static;    
        order: 5;
        flex: 1 1 100%;   
    }
    #wrapper > .content {    
        margin-top: 186px;
    }
    #footer .editor_content ul.brand-logotypes li { width: 50%; }
    .fl-3-cols-to-pyramid-at-800.fl-make-1-col-at-400,
    .fl-make-1-col-at-400 { display: flex; flex-wrap: wrap; }
    .fl-3-cols-to-pyramid-at-800.fl-make-1-col-at-400 > *,
    .fl-make-1-col-at-400 > * { flex: 1 1 100%; }
 
    
    #footer .bottom .footer-site-info .col-contact > * { text-align: center; margin-top: 0rem; }    
}








/* --------------------------------------------------------  webbedit css   -------------------------------------------------------- */


img.attachment-logo_small.size-logo_small {
    max-height: 40px;
}


.products .cart-summary .summary-row.total {
    background-color: var(--c-brand);
margin-top: 15px;
font-size: 20px;
}



.has-black-background-color {
    background-color: #0000008a !important;
}


.product-list.list-view .product-card:hover {
border-radius:12px;
}


.product-details .product-card .inner-frame:after {
display:none;
}


.product-list, .designtemplate .product-list {
    overflow: visible;
}

.show-card-as-hover .product-card,
.product-card:hover, 
.product-details .product-card:hover{
    scale: 1.02;
    box-shadow: 0px 4px 15px rgba(13, 31, 50, .3);
}



#filterAndSortWrapper .filterOption .custom-checkbox, #filterAndSortWrapper .filterOption ul.filter-control li {
    margin: 0 0 4px 0;
    gap: 5px;
}



/* hide by default */
.category-description { display: none; }

/* show if it has at least one non-empty child element or text */
.category-description:has(> *:not(:empty)), 
.category-description:has(> :where(p, span, div):not(:empty)) {
  display: block;
}


.cat-grid {
    overflow-x: hidden !important;
}


#filterFooter a.showFilterResultsBtn, #filterFooter a.showFilterResultsBtn:hover {
    border: 2px solid #0e1f32;
border-radius: 8px;
}



.text-filter-ctrl .frame .text-input:focus-visible, .category-info .product-list-control .dropdown-control, .header-search-tbx:focus{
outline: none;
  box-shadow: none;
border-color:#d5d5d5;
}


.category-info .product-list-control:focus-within, #filterAndSortBtn:focus-within, .header-search-tbx:focus-within{
outline: 2px solid #3b82f6;   /* Visible focus ring */
  outline-offset: 2px;

}


#filterAndSortBtn:active, #filterAndSortBtn:focus{
outline: 2px solid #3b82f6;   /* Visible focus ring */
  outline-offset: 2px;
}



span.stock-status {
    font-weight: 400;
}



.list-of-brands ul.std-image-list li a img, ul.list-of-brands li a figure img {
    filter: grayscale(1) contrast(1.5);
}



.fa, .fab, .fad, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}



.product-card .image img {
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}



.product-card .image {
    aspect-ratio: 1 / 1;
background: #f5f7fa;
}



.product-title {
    margin: 0px 0px 0;
color: #0e1f32;
}





/* ----------------------------------------------------------- webbedit mobilt  ---------------------------------------------------------- */



@media only screen and (max-width: 700px) {
    .category-info .product-list-controls > div {
        justify-content: left;
    }
}



@media only screen and (min-width: 1200px) {

.category-info .product-list-controls {
    justify-content: space-between;
}


}



@media only screen and (min-width: 700px) {


.root-categories .cat-grid .cat-card {
    max-width: 15%;
    min-width: 180px;
}

.root-categories .cat-grid{
justify-content: flex-start;
}

.category-image img {
    width: 60px;
    height: 60px;
}
    .category-image img.supplier-image {width: 100%;}


    .category-info-contaioner, .content-container { flex-direction: row; justify-content: center; gap: 20px; align-items: anchor-center; display: flex; position: sticky; top: 100px; z-index: 100; }



}