@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//havrand-maritim.no/wp-content/themes/woodmart/fonts/woodmart-font-2-400.woff2?v=8.3.6") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//havrand-maritim.no/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Sofia Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 500;
	--wd-text-color: rgb(118,118,118);
	--wd-text-font-size: 16px;
	--wd-title-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Lexend Deca", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Open Sans", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 14px;
	--wd-brd-radius: 10px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(13,59,102);
	--wd-alternative-color: rgba(28,97,231,0.2);
	--btn-default-bgcolor: rgb(225,235,255);
	--btn-default-bgcolor-hover: rgb(219,227,249);
	--btn-default-color: rgb(13,59,102);
	--btn-default-color-hover: rgb(13,59,102);
	--btn-accented-bgcolor: rgb(13,59,102);
	--btn-accented-bgcolor-hover: rgb(13,59,102);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(28,97,231);
	--wd-link-color-hover: rgb(28,97,231);
	--wd-sticky-btn-height: 95px;
}
.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);
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(255,255,255);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	text-transform: capitalize;
}
html .post.wd-post:not(.blog-design-small) .wd-entities-title {
	font-size: 18px;
}
html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
	font-size: 16px;
	text-transform: none;
}
.woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout textarea {
	font-size: 16px;
}
.page .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-blog .wd-page-content {
	background-color: rgb(246,246,246);
	background-image: none;
}
html .wd-buy-now-btn {
	color: rgb(0,0,0);
	background: rgb(225,235,255);
}
html .wd-buy-now-btn:hover {
	color: rgb(109,109,109);
	background: rgb(225,235,255);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 1px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}

}
:root{
--wd-container-w: 1400px;
--wd-form-brd-radius: 5px;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}



.wd-page-title {
background-color: rgb(28,97,231);
}

/* Trinn 1: Målrett bilde-lenken og sett opp for fixed aspect ratio - Produkt - grid*/

.product-grid-item .product-image-link {

    display: block;

    position: relative; /* Nødvendig for at bildet inne i skal posisjoneres riktig */

    width: 100%; /* Tar hele bredden av kolonnen */

    

    /* Padding Hack: Setter høyden til å være lik bredden (100% kvadrat) */

    padding-top: 100%; 

    height: 0; /* Nullstiller den naturlige høyden */

    overflow: hidden; /* Skjuler eventuell overløp */

}



/* Trinn 2: Målrett bildet inne i containeren */

.product-grid-item .product-image-link img {

    position: absolute; /* Posisjoneres i forhold til forelderen (.product-image-link) */

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

padding: 20px;

 

    /* Sikrer at hele bildet er synlig (contain) og sentrert */

    object-fit: contain; 

}


/* SINGEL PRODUKT SIDE */
/* Setter en maks høyde for hovedbildet på produktsiden */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: 600px; /* Juster denne høyden etter hva som passer ditt design */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff; /* Valgfritt: farge bak bildet hvis det ikke fyller hele flaten */
}

/* Sørger for at bildet skalerer korrekt inni boksen */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    height: 100% !important;
    width: 100% !important;
    max-height: 600px; /* Må matche høyden satt over */
    object-fit: contain; /* Magien: viser hele bildet uten å kutte eller strekke */
}

/* --- KORRIGERT FIKS FOR THUMBNAILS (Miniatyrbilder) --- */

/* 1. Vi treffer containeren for miniatyrbildene (.wd-gallery-thumb) */
.single-product .wd-gallery-thumb .wd-carousel-item {
    height: 110px !important; /* Bestemmer høyden på stripen. Juster etter ønske */
    display: flex !important;
    align-items: center;      /* Sentrerer bildet vertikalt */
    justify-content: center;  /* Sentrerer bildet horisontalt */
    background-color: transparent; 
    border: 1px solid #f1f1f1; /* En tynn ramme gjør det ryddigere når bildene er ulike */
    margin-right: 10px;       /* Sikrer litt avstand mellom bildene */
    box-sizing: border-box;
}

/* 2. Vi tvinger bildet til å holde seg inni boksen */
.single-product .wd-gallery-thumb .wd-carousel-item img {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important; /* Viser hele bildet uten å kutte */
    max-height: 100px !important;   /* Må være litt mindre enn containeren over */
    padding: 5px; /* Luft rundt bildet */
}


/* --- TRINN 1: Grunninnstillinger (Standard utseende) Sticky NAV-bar DESKTOP --- */

/* Selve lenke-knappen */
.wd-sticky-nav .wd-nav-vertical .menu-item > .woodmart-nav-link {
    position: relative;
    overflow: hidden; 
    z-index: 1;
    transition: color 0.3s ease; 
    
    /* HER er endringen: Tvinger hjørnene til å være skarpe (0px) */
    border-radius: 0 !important; 
}

/* Den blå baren (ligger skjult til venstre) */
.wd-sticky-nav .wd-nav-vertical .menu-item > .woodmart-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%; 
    background-color: #0D3B66; /* Din blåfarge */
    z-index: -1; 
    
    /* Hastigheten på animasjonen (0.4s) */
    transition: width 0.3s ease; 
    
    /* Sikrer at også selve fyllet er firkantet */
    border-radius: 0 !important;
}

/* Ikonet (bilde) */
.wd-sticky-nav .wd-nav-vertical .menu-item > .woodmart-nav-link .wd-nav-img {
    transition: filter 0.3s ease;
}

/* --- TRINN 2: Hover-effekter (Skjer med en gang) --- */

/* 1. Den blå baren fyller hele bredden */
.wd-sticky-nav .wd-nav-vertical .menu-item:hover > .woodmart-nav-link::before {
    width: 100%;
}

/* 2. Teksten blir hvit */
.wd-sticky-nav .wd-nav-vertical .menu-item:hover > .woodmart-nav-link,
.wd-sticky-nav .wd-nav-vertical .menu-item:hover > .woodmart-nav-link .nav-link-text {
    color: white !important;
}

/* 3. Ikonet blir hvitt */
.wd-sticky-nav .wd-nav-vertical .menu-item:hover > .woodmart-nav-link .wd-nav-img {
    filter: brightness(0) invert(1);
}

/*********************************************HANDLEKURV***********************************************/

/* PC/DESKTOP (eller større enn 600px) */
/* Målretter kun bilder inne i handlekurv-radene */
.woocommerce-cart-form__cart-item .product-thumbnail img {
    height: 100px;
    object-fit: contain;
}

/* --- MOBIL STIL (Media Query for skjermer mindre enn 600px) --- */
@media screen and (max-width: 600px) {
    
    /* Målretter kun bilder inne i handlekurv-radene */
    .woocommerce-cart-form__cart-item .product-thumbnail img {
        height: 70px; /* Eksempel: Redusert høyde for mobil */
        object-fit: contain;
    }
}

/**OFFCANVAS CART**/

/* PC/DESKTOP (eller større enn 600px) */
/* Målretter IMG-elementet inni lenken med klassen .cart-item-image (i off-canvas kurv) */
.cart-item-image img {
    height: 100px; /* Ønsket standard høyde */
    width: 100px;  /* Setter samme bredde for et kvadratisk bilde */
    object-fit: contain; /* Beholder proporsjonene */
}

/* --- MOBIL STIL (Media Query for skjermer mindre enn 600px) --- */
@media screen and (max-width: 600px) {
    
    .cart-item-image img {
        height: 60px; /* Redusert høyde for mobil */
        width: 60px;  /* Redusert bredde for mobil */
    }
}

/***********************************************KASSE*************************************************/
/* --- 1. PC/DESKTOP STIL (standard) --- */

/* Gjør HELE label-området klikkbart */
#payment .wc_payment_methods label {
    display: block; 
    width: 100%;
    cursor: pointer;
}

/* Skjuler standard radio-inputs */
#payment .wc_payment_methods input[type="radio"] {
    display: none;
}

/* Målretter KUN listeelementene inne i betalingsboksen (#payment) */
#payment .wc_payment_methods li {
    background-color: #fdfdfd;
    border-radius: 10px;
    margin-bottom: var(--li-mb);

    /* Responsive verdier for PC-skjermer */
    padding-top: 1vw; 
    padding-bottom: 1vw;
    padding-left: 1.7vw; 
	   padding-right: 1.7vw; 
}

/* Linje mellom betalingselementene, unntatt det siste */
#payment .wc_payment_methods li:not(:last-child) {
    border: 2px solid #c5c5c555;
}

/* --- 2. MOBIL STIL (Media Query) --- */
@media screen and (max-width: 600px) {
    
    #payment .wc_payment_methods li {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1.0rem;
				padding-right: 5vw; 
    }
    
    /* Valgfritt: Gjør linjen litt tynnere på mobil hvis ønskelig */
    #payment .wc_payment_methods li:not(:last-child) {
        border-bottom-width: 0.5px;
    }
}

/* --- 3. AKTIV / VALGT TILSTAND --- */

/* Bruker :has() for å style li-elementet når radio-knappen inni er sjekket */
#payment .wc_payment_methods li:has(input:checked) {
    border: 2px solid #28a745 !important; /* Grønn border (endre farge her) */
    background-color: #f9fff9; /* Valgfritt: En veldig lys grønn bakgrunn */
}





/********************************SØKEBAR***********************************/


/* PC/DESKTOP (eller større enn 600px) */
/* Målretter IMG-elementet inni .wd-suggestion-thumb i produktforslag */
.wd-suggestion-thumb img {
    height: 80px; /* Standard høyde (juster etter ønske) */
    width: 80px;  /* Setter samme bredde for kvadratisk bilde (valgfritt) */
    object-fit: contain; /* Sikrer at bildet skaleres riktig */
}

/* --- MOBIL STIL (Media Query for skjermer mindre enn 600px) --- */
@media screen and (max-width: 600px) {
    
    .wd-suggestion-thumb img {
        height: 60px; /* Redusert høyde for mobil */
        width: 60px;  /* Redusert bredde for mobil */
    }
}





/*************** QUICKVIEW ***************/

.woocommerce-product-gallery img {align-content
	width: 100%;
	height: 400px;
	object-fit: contain;
	padding-top: 15px;
	padding-bottom: 15px;
	
}