/*
	Theme Name:   Savoy Child
	Theme URI:    http://themeforest.net/item/savoy-minimalist-ajax-woocommerce-theme/12537825
	Description:  Savoy child theme
	Author:       NordicMade
	Author URI:   http://www.nordicmade.com
	Template:     savoy
	Version:      1.0
*/


/* Child theme CSS
--------------------------------------------------------------- */

/*
 * START – Visar endast den svenska knapptexten.
 *
 * Originaltexten görs osynlig utan att knappen påverkas.
 * Den svenska texten visas ovanpå samma knapp.
 */
.nm-infload-btn {
	color: transparent !important;
	position: relative;
}

.nm-infload-btn::after {
	content: "Visa fler";
	color: #000;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* SLUT – Visar endast den svenska knapptexten. */



/*
 * START – Döljer rubriken och hela området för ytterligare information.
 *
 * Koden döljer både rubriken ”Ytterligare information”
 * och fältet för beställningsanteckningar i Kustom Checkout.
 */
#kco-extra-checkout-fields {
	display: none !important;
}
/* SLUT – Döljer området för ytterligare information. */



/* === START: TEBUTIKEN – MINIMALISTISK FORMATERING AV INFORMATIONSSIDOR ===== */
/* Vad:
   Formaterar vanliga WordPress-informationssidor i Savoy-temat med ren,
   modern och lättläst layout.

   Var:
   Gäller vanliga sidor som använder Savoys standardlayout .nm-page-default,
   exempelvis köpvillkor, om oss, leveransinformation och andra infosidor.

   Varför:
   Den gamla importerade sidtexten har hårdkodade inline-stilar från tidigare
   butik, därför används !important här för att WordPress/Savoy ska kunna visa
   innehållet konsekvent och modernt utan att själva sidinnehållet behöver byggas om.
*/

body.page-template-default:not(.home):not(.front-page) .nm-page-default {
    max-width: 1080px;
    margin: 0 auto;
    padding: 58px 24px 78px;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content {
    max-width: 820px;
    margin: 0 auto;
    color: #4b4138 !important;
    font-size: 16px !important;
    line-height: 1.78 !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h1,
body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h2,
body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    color: #2f2924 !important;
    letter-spacing: -0.015em;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h1 *,
body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h2 *,
body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h3 * {
    color: inherit !important;
    font-family: inherit !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h1 {
    font-size: clamp(34px, 4vw, 46px) !important;
    margin-bottom: 34px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid #e8e1d7 !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h2 {
    font-size: clamp(23px, 2.4vw, 30px) !important;
    margin-top: 48px !important;
    margin-bottom: 16px !important;
    padding-top: 30px !important;
    border-top: 1px solid #eee8df !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h2:first-of-type {
    margin-top: 0 !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h3 {
    font-size: 20px !important;
    margin-top: 32px !important;
    margin-bottom: 12px !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content p {
    margin: 0 0 17px !important;
    padding: 0 !important;
    border: 0 !important;
    max-width: 72ch;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 1.78 !important;
    color: #4b4138 !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content a {
    color: #2f2924 !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content a:hover {
    color: #8b6f4e !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content strong,
body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content b {
    font-weight: 600 !important;
    color: #2f2924 !important;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content img {
    max-width: 100%;
    height: auto;
}

body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h2 img {
    display: inline-block !important;
    width: auto !important;
    max-width: 110px !important;
    max-height: 34px !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
}

@media (max-width: 768px) {
    body.page-template-default:not(.home):not(.front-page) .nm-page-default {
        padding: 38px 18px 58px;
    }

    body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content {
        font-size: 15.5px !important;
        line-height: 1.72 !important;
    }

    body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content p {
        font-size: 15.5px !important;
        line-height: 1.72 !important;
    }

    body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h1 {
        margin-bottom: 28px !important;
    }

    body.page-template-default:not(.home):not(.front-page) .nm-page-default .entry-content h2 {
        margin-top: 38px !important;
        padding-top: 24px !important;
    }
}

/* === SLUT: TEBUTIKEN – MINIMALISTISK FORMATERING AV INFORMATIONSSIDOR ===== */



/* === START: TEBUTIKEN – OM-SIDAN MED TRE KOLUMNKORT ======================= */
/* Vad:
   Formaterar den importerade Om Tebutiken-sidan med tre tydliga,
   minimalistiska informationskort.

   Var:
   Gäller endast sidan Om Tebutiken, eftersom sidan har body-klassen page-id-6948.

   Varför:
   Sidan använder gamla importerade PrestaShop-klasser som .row, .col-sm-4,
   .cms-block och .cms-box. Bilden ligger lös i en vanlig paragraf och behöver
   därför presenteras som en naturlig del av kortet, inte som en fristående bild.
*/

body.page-id-6948 .nm-page-default .entry-content {
    max-width: 980px;
}

body.page-id-6948 .entry-content > .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    margin: 34px 0 0 !important;
}

body.page-id-6948 .entry-content > .row::before,
body.page-id-6948 .entry-content > .row::after {
    display: none !important;
}

body.page-id-6948 .entry-content .col-xs-12,
body.page-id-6948 .entry-content .col-sm-4 {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.page-id-6948 .entry-content .cms-block,
body.page-id-6948 .entry-content .cms-box {
    height: 100%;
    padding: 32px 32px 36px;
    background: #faf8f4;
    border: 1px solid #ece5da;
    box-shadow: 0 18px 46px rgba(47, 41, 36, 0.05);
}

body.page-id-6948 .entry-content .page-subheading {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: #2f2924 !important;
}

body.page-id-6948 .entry-content .page-subheading strong {
    font-weight: 600 !important;
}

body.page-id-6948 .entry-content .cms-block p,
body.page-id-6948 .entry-content .cms-box p,
body.page-id-6948 .entry-content .testimonials .inner {
    max-width: none;
    margin: 0 0 15px !important;
    padding: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
    color: #4b4138 !important;
}

body.page-id-6948 .entry-content .testimonials .inner:empty {
    display: none;
}

body.page-id-6948 .entry-content .cms-box p:has(img) {
    margin: 24px 0 0 !important;
    padding: 16px !important;
    background: #fff;
    border: 1px solid #eee8df;
}

body.page-id-6948 .entry-content .cms-box img {
    display: block !important;
    width: 100% !important;
    max-width: 190px !important;
    height: auto !important;
    margin: 0 auto !important;
    box-shadow: 0 16px 34px rgba(47, 41, 36, 0.13);
}

@media (max-width: 900px) {
    body.page-id-6948 .entry-content > .row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    body.page-id-6948 .entry-content .cms-block,
    body.page-id-6948 .entry-content .cms-box {
        padding: 26px 24px 30px;
    }
}

/* === SLUT: TEBUTIKEN – OM-SIDAN MED TRE KOLUMNKORT ======================== */



/* === START: KUSTOM CHECKOUT – FLYTTA UPP SJÄLVA KASSAN ===================== */
/* Vad:
   Tar bort tomt/överflödigt WooCommerce-utrymme ovanför Kustom Checkout.

   Var:
   Gäller endast kassasidan med Kustom Checkout.

   Varför:
   HTML:en visar att WooCommerce/Kustom skriver ut order review, extra fält,
   orderkommentarer och dolda WooCommerce-fält före själva Kustom-iframe.
   Dessa delar kan skapa tomt utrymme eller trycka ner checkouten i Savoy.
*/

body.woocommerce-checkout .nm-page-default {
    padding-top: 24px !important;
}

body.woocommerce-checkout form.kco-checkout #kco-wrapper {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 760px !important;
}

body.woocommerce-checkout form.kco-checkout #kco-order-review {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.woocommerce-checkout form.kco-checkout #kco-extra-checkout-fields,
body.woocommerce-checkout form.kco-checkout #order_comments_field,
body.woocommerce-checkout form.kco-checkout #kco_shipping_data_field {
    display: none !important;
}

body.woocommerce-checkout form.kco-checkout #kco-iframe {
    float: none !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.woocommerce-checkout form.kco-checkout #kco-wc-form {
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

body.woocommerce-checkout form.kco-checkout #klarna-checkout-container {
    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce-checkout form.kco-checkout .woocommerce-privacy-policy-text {
    margin-top: 18px !important;
}

/* === SLUT: KUSTOM CHECKOUT – FLYTTA UPP SJÄLVA KASSAN ====================== */



/* === START: TEBUTIKEN SLIMMAD PREMIUMRAD FÖR NYHETSBREV ==================================
 * Vad: Formaterar startsidans nyhetsbrev som en kompakt rad med rubrik, e-postfält och knapp.
 * Var: Påverkar endast sektionen #tebu-newsletter-home och WPForms-formuläret som ligger där.
 * Varför: Säkerställer att sektionen aldrig blir bredare än webbläsarfönstret och förhindrar
 *         horisontell rullning eller felaktig sidposition när startsidan laddas om.
 * ========================================================================================== */

#tebu-newsletter-home,
#tebu-newsletter-home *,
#tebu-newsletter-home *::before,
#tebu-newsletter-home *::after {
	box-sizing: border-box;
}

#tebu-newsletter-home {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 18px 20px 20px !important;
	overflow-x: clip;
	background: #f8f6f1;
	border-top: 1px solid #e7ded2;
}

#tebu-newsletter-home .tebu-newsletter-home__inner {
	width: 100%;
	max-width: 760px;
	min-width: 0;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	text-align: left !important;
}

#tebu-newsletter-home h2 {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 18px !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	color: #2f2924 !important;
}

#tebu-newsletter-home .wpforms-container {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#tebu-newsletter-home .wpforms-form {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

#tebu-newsletter-home .wpforms-field-container,
#tebu-newsletter-home .wpforms-field {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#tebu-newsletter-home .wpforms-field-label {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
	color: #2f2924 !important;
	text-align: left !important;
}

#tebu-newsletter-home input[type="email"],
#tebu-newsletter-home input[type="text"],
#tebu-newsletter-home .wpforms-field-medium {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 15px !important;
	border: 1px solid #d8d0c5 !important;
	border-right: 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #2f2924 !important;
	font-size: 14px !important;
}

#tebu-newsletter-home .wpforms-submit-container {
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#tebu-newsletter-home button[type="submit"],
#tebu-newsletter-home .wpforms-submit {
	display: block !important;
	width: auto !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 30px !important;
	border: 1px solid #2f2924 !important;
	background: #2f2924 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 40px !important;
	white-space: nowrap !important;
}

#tebu-newsletter-home button[type="submit"]:hover,
#tebu-newsletter-home button[type="submit"]:focus,
#tebu-newsletter-home .wpforms-submit:hover,
#tebu-newsletter-home .wpforms-submit:focus {
	background: #7d664c !important;
	border-color: #7d664c !important;
}

@media (max-width: 640px) {
	#tebu-newsletter-home {
		padding: 20px 18px 22px !important;
	}

	#tebu-newsletter-home .wpforms-form {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	#tebu-newsletter-home input[type="email"],
	#tebu-newsletter-home input[type="text"],
	#tebu-newsletter-home .wpforms-field-medium {
		border-right: 1px solid #d8d0c5 !important;
	}

	#tebu-newsletter-home .wpforms-submit-container {
		margin-top: 9px !important;
	}

	#tebu-newsletter-home button[type="submit"],
	#tebu-newsletter-home .wpforms-submit {
		width: 100% !important;
	}
}

/* === SLUT: TEBUTIKEN SLIMMAD PREMIUMRAD FÖR NYHETSBREV =================================== */



/* === START: TYDLIG KÖPKNAPP PÅ ÖNSKELISTAN ===================================================
 * Vad: Ger knappen Lägg till i varukorg vit bakgrund, svart text och tydlig kant.
 * Var: Påverkar endast köpknappar inne på Savoy-temats önskelistesida.
 * Varför: Säkerställer att knapptexten syns mot sidans mörka bakgrund.
 * ============================================================================================== */

#nm-wishlist .add_to_cart_button {
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #000000 !important;
}

#nm-wishlist .add_to_cart_button:hover,
#nm-wishlist .add_to_cart_button:focus {
	background: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
}


/* === SLUT: TYDLIG KÖPKNAPP PÅ ÖNSKELISTAN ==================================================== */



/* === START: DÖLJ RESTNOTERINGSSTATUS PÅ PRODUKTSIDOR ==========================================
 * Vad: Döljer lagertexten "Kan restnoteras".
 * Var: Påverkar endast lagerstatus med klasserna .stock.available-on-backorder på produktsidor.
 * Varför: Restnoteringsinformationen ska inte visas för kunden på den enskilda produktsidan.
 * ============================================================================================== */

body.single-product p.stock.available-on-backorder {
	display: none !important;
}

/* === SLUT: DÖLJ RESTNOTERINGSSTATUS PÅ PRODUKTSIDOR =========================================== */



/* === START: DÖLJ ARTIKELNUMMER OCH VARUMÄRKE I PRODUKTMETA ========= */
/* Vad: Döljer raden med artikelnummer (SKU) samt raden med varumärke, inklusive
   deras respektive etikettext (Artikelnr: och Varumärke:) och länken till varumärket.
   Kategoriraden lämnas orörd och fortsätter visas som vanligt.
   Var: Enskilda produktsidor i WooCommerce, i metablocket #nm-product-meta
   (element span.sku_wrapper samt den span.posted_in som innehåller en
   varumärkeslänk, dvs länk vars href pekar mot varumärkes-arkivet).
   Varför: Artikelnummer och varumärke ska inte exponeras för besökaren, medan
   kategorier behövs kvar för navigering och intern länkning. Selektorn matchar
   varumärkesraden via dess länk istället för via ordning bland syskonelement,
   så den träffar rätt även på produkter som saknar artikelnummer. */
/* ================================================================================================ */

#nm-product-meta .sku_wrapper {
    display: none !important;
}

#nm-product-meta span.posted_in:has(a[href*="/varumärke/"]),
#nm-product-meta span.posted_in:has(a[href*="/varum%C3%A4rke/"]) {
    display: none !important;
}

/* === SLUT: DÖLJ ARTIKELNUMMER OCH VARUMÄRKE I PRODUKTMETA ========= */




/* === START: SAMMA HÖJD PÅ KÖPKNAPPEN OAVSETT PRODUKTNAMNETS RADANTAL ========= */
/* Vad: Reserverar fast utrymme för produktnamnet på två rader oavsett om
   namnet tar en eller två rader.
   Var: h3.woocommerce-loop-product__title i produktloopen.
   Varför: Kort namn på en rad gjorde att köpknappen hamnade högre än vid
   namn på två rader, detta låser namnets höjd så pris och knapp alltid
   hamnar på samma nivå inom raden. */
/* ================================================================================================ */

.nm-shop-loop-title-price .woocommerce-loop-product__title {
    min-height: 2.6em;
    line-height: 1.3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === SLUT: SAMMA HÖJD PÅ KÖPKNAPPEN OAVSETT PRODUKTNAMNETS RADANTAL ========= */



/* === START: DÖLJ KATEGORIBESKRIVNING PÅ ALLA KATEGORISIDOR UTOM JULKALENDER ========= */
/* Vad: Döljer div.term-description, rubriken ovanför påverkas inte.
   Var: Alla kategorisidor, förutom body.term-julkalender.
   Varför: Beskrivningstexten ska bara synas på julkalendersidan. */
/* ================================================================================================ */

body.tax-product_cat:not(.term-julkalender) .term-description {
    display: none !important;
}

/* Lägg till fler undantag genom att upprepa :not(.term-DITT-KATEGORI-ID) i selektorn ovan */

/* === SLUT: DÖLJ KATEGORIBESKRIVNING PÅ ALLA KATEGORISIDOR UTOM JULKALENDER ========= */



/* === START: DÖLJ FILTER MED ATTRIBUT ÖVERALLT ========= */
/* Vad: Döljer hela filtret med attribut (woocommerce_product_tag_cloud).
   Var: Alla sidor där filtret kan visas (butik, kategorier, sidofält).
   Varför: Filtret med attribut ska inte visas någonstans. */
/* ================================================================================================ */

.widget_product_tag_cloud {
    display: none !important;
}

/* === SLUT: DÖLJ FILTER MED ATTRIBUT ÖVERALLT ========= */



/* === START: DÖLJ SORTERA EFTER GENOMSNITTLIGT BETYG ========= */
/* Vad: Döljer alternativet "Average rating" i sorteringsmenyn (dropdown orderby).
   Var: Sorteringsmenyn på butik- och kategorisidor.
   Varför: Betygssortering ska inte gå att välja. */
/* ================================================================================================ */

a[href*="orderby=rating"] {
    display: none !important;
}

/* === SLUT: DÖLJ SORTERA EFTER GENOMSNITTLIGT BETYG ========= */




/* === START: GEMENSAM MINIMALISTISK DESIGN FÖR ALLA WPFORMS-FORMULÄR ============================
 * Vad: Formaterar formulär, fält, etiketter, kryssrutor, felmeddelanden och knappar från WPForms.
 * Var: Påverkar samtliga WPForms-formulär på hela webbplatsen.
 * Varför: Formulären ska följa Savoy-temats rena, avskalade och konsekventa design.
 * ============================================================================================== */

.wpforms-container,
.wpforms-container *,
.wpforms-container *::before,
.wpforms-container *::after {
	box-sizing: border-box;
}

.wpforms-container {
	width: 100%;
	max-width: 760px;
	margin: 0 auto 32px !important;
	color: #2f2924;
	font-size: 14px;
	line-height: 1.5;
}

.wpforms-container .wpforms-form {
	width: 100%;
	margin: 0;
	padding: 0;
}

.wpforms-container .wpforms-field {
	width: 100%;
	margin: 0 0 18px !important;
	padding: 0 !important;
}

.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label {
	display: block;
	margin: 0 0 7px !important;
	padding: 0;
	color: #2f2924 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4;
}

.wpforms-container .wpforms-required-label {
	color: #7d664c !important;
}

.wpforms-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([aria-hidden="true"]),
.wpforms-container select,
.wpforms-container textarea {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	border: 1px solid #d8d0c5 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	color: #2f2924 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([aria-hidden="true"]),
.wpforms-container select {
	height: 46px !important;
	min-height: 46px !important;
}

.wpforms-container textarea {
	min-height: 150px !important;
	resize: vertical;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: #7d664c !important;
	box-shadow: 0 0 0 1px #7d664c !important;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: #928b84 !important;
	opacity: 1;
}

.wpforms-container fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li {
	display: flex !important;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

.wpforms-container input[type="checkbox"],
.wpforms-container input[type="radio"] {
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	margin: 2px 0 0 !important;
	accent-color: #2f2924;
	cursor: pointer;
}

.wpforms-container .wpforms-field-label-inline {
	margin: 0 !important;
	color: #2f2924 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	cursor: pointer;
}

.wpforms-container .wpforms-field-description {
	margin: 7px 0 0 !important;
	color: #77706a !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error,
.wpforms-container .wpforms-error {
	margin: 6px 0 0 !important;
	color: #a13f32 !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error {
	border-color: #a13f32 !important;
}

.wpforms-container .wpforms-submit-container {
	margin: 6px 0 0 !important;
	padding: 0 !important;
}

.wpforms-container button,
.wpforms-container input[type="submit"],
.wpforms-container input[type="button"],
.wpforms-container .wpforms-submit,
.wpforms-container .wpforms-page-button {
	display: inline-block !important;
	width: auto !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 30px !important;
	border: 1px solid #2f2924 !important;
	border-radius: 0 !important;
	background: #2f2924 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 40px !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wpforms-container button:hover,
.wpforms-container button:focus,
.wpforms-container input[type="submit"]:hover,
.wpforms-container input[type="submit"]:focus,
.wpforms-container input[type="button"]:hover,
.wpforms-container input[type="button"]:focus,
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus,
.wpforms-container .wpforms-page-button:hover,
.wpforms-container .wpforms-page-button:focus {
	border-color: #7d664c !important;
	background: #7d664c !important;
	color: #ffffff !important;
}

.wpforms-confirmation-container-full {
	margin: 20px 0 !important;
	padding: 18px 20px !important;
	border: 1px solid #e7ded2 !important;
	background: #f8f6f1 !important;
	color: #2f2924 !important;
}

@media (max-width: 640px) {
	.wpforms-container {
		max-width: 100%;
	}

	.wpforms-container button,
	.wpforms-container input[type="submit"],
	.wpforms-container input[type="button"],
	.wpforms-container .wpforms-submit,
	.wpforms-container .wpforms-page-button {
		width: 100% !important;
	}
}

/* === SLUT: GEMENSAM MINIMALISTISK DESIGN FÖR ALLA WPFORMS-FORMULÄR ============================= */




/* START: Formaterar länken till Ångra köp som en mörk knapp med vit text. */
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 10px !important;
	padding: 11px 28px !important;
	border: 1px solid #2f2924 !important;
	background: #2f2924 !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Tvingar all text inuti länken till vit eftersom temat annars kan skriva över färgen. */
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a) *,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a)::before,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a)::after {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Behåller vit text och ändrar bakgrunden vid hovring och tangentbordsfokus. */
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):link,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):visited,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):hover,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):focus,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):active {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Ger knappen en ljusare bakgrund vid hovring och fokus. */
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):hover,
html body a[href*="/angra-kop"]:not(.menu-item > a):not(nav a):focus {
	border-color: #7d664c !important;
	background: #7d664c !important;
}

/* SLUT: Formaterar länken till Ångra köp som en mörk knapp med vit text. */




/* Gör momsraden radbrytbar så att den alltid stannar inom varukorgens ram. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
	min-width: 0 !important;
}

/* Tillåter själva momstexten att brytas på flera rader utan att sticka ut åt höger. */
.wc-block-components-totals-footer-item-tax {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 4px 0 0 !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
	line-height: 1.4 !important;
}



/* START: Ger WooCommerce mängdval, pris, antal och köpknapp en kantig minimalistisk Savoy-anpassad design. */

/* Döljer endast Savoys dropdown när de nya mängdknapparna har byggts korrekt. */
.single-product form.variations_form.tebutiken-amount-buttons-ready table.variations {
	display: none !important;
}

/* Ger det valda priset tydlig men avskalad typografi ovanför mängdvalet. */
.single-product .summary p.price {
	color: #2f2924 !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

/* Tonar ned förklaringen efter priset så själva priset förblir visuellt primärt. */
.single-product .tebutiken-price-context {
	color: #77716b !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

/* Skapar lagom luft mellan beskrivningen och mängdvalet. */
.single-product .tebutiken-amount-selector {
	width: 100%;
	margin: 22px 0 18px;
}

/* Formaterar rubriken Mängd i samma återhållsamma stil som övriga produktfält. */
.single-product .tebutiken-amount-label {
	margin: 0 0 8px;
	color: #2f2924;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* Lägger mängdknapparna på en flexibel rad som automatiskt bryts på mindre skärmar. */
.single-product .tebutiken-amount-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

/* Ger alla mängdknappar samma kantiga minimalistiska grundutseende. */
.single-product .tebutiken-amount-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 42px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #cfc8c0;
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	color: #2f2924;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Ger Återställ en diskret avvikande bakgrund utan att konkurrera med mängdvalen. */
.single-product .tebutiken-amount-reset {
	background: #f5f2ee;
}

/* Markerar hovring tydligt utan att ändra layouten. */
.single-product .tebutiken-amount-button:hover,
.single-product .tebutiken-amount-button:focus {
	border-color: #7d664c;
	background: #f5f2ee;
	color: #2f2924;
}

/* Markerar vald mängd med butikens mörka färg och tydlig vit text. */
.single-product .tebutiken-amount-button.is-active {
	border-color: #2f2924;
	background: #2f2924;
	color: #ffffff;
}

/* Ger tangentbordsfokus en tydlig och tillgänglig markering. */
.single-product .tebutiken-amount-button:focus-visible {
	outline: 2px solid #2f2924;
	outline-offset: 2px;
}

/* Döljer WooCommerce extra variationspris eftersom huvudpriset redan uppdateras ovanför. */
.single-product .tebutiken-amount-buttons-ready .woocommerce-variation-price {
	display: none !important;
}

/* Lägger antal och Köp på samma rad för ett kompakt upplägg nära referensen. */
.single-product .tebutiken-amount-buttons-ready .woocommerce-variation-add-to-cart {
	display: grid !important;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
	width: 100%;
	margin-top: 18px;
}

/* Gör antalväljaren till en ren kantig kontroll i samma höjd som köpknappen. */
.single-product .tebutiken-amount-buttons-ready .nm-quantity-wrap {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid #cfc8c0 !important;
	background: #ffffff !important;
}

/* Döljer Antal-etiketten eftersom kontrollen ligger direkt bredvid Köp och annars tar onödig plats. */
.single-product .tebutiken-amount-buttons-ready .nm-quantity-wrap > label {
	display: none !important;
}

/* Låter minus, antal och plus dela antalväljaren jämnt och stabilt. */
.single-product .tebutiken-amount-buttons-ready .quantity {
	display: grid !important;
	grid-template-columns: 42px minmax(0, 1fr) 42px !important;
	align-items: center !important;
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
}

/* Centrerar minus och plus och låter Savoys befintliga ikoner fortsätta fungera. */
.single-product .tebutiken-amount-buttons-ready .nm-qty-minus,
.single-product .tebutiken-amount-buttons-ready .nm-qty-plus {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 44px !important;
	margin: 0 !important;
}

/* Rensar antalets inmatningsfält så det passar mellan minus och plus. */
.single-product .tebutiken-amount-buttons-ready .quantity .qty {
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
}

/* Gör köpknappen kantig, mörk och lika hög som antalväljaren. */
.single-product .tebutiken-amount-buttons-ready .single_add_to_cart_button {
	width: 100% !important;
	min-height: 46px !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 1px solid #2f2924 !important;
	border-radius: 0 !important;
	background: #2f2924 !important;
	color: #ffffff !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

/* Visar tydligt att köpknappen inte är aktiv om WooCommerce av någon anledning saknar en giltig variation. */
.single-product .tebutiken-amount-buttons-ready .single_add_to_cart_button.disabled {
	border-color: #aaa6a2 !important;
	background: #aaa6a2 !important;
	cursor: not-allowed !important;
}

/* Behåller antal och Köp på samma rad även på mobil men ger antalväljaren en rimlig mindre bredd. */
@media (max-width: 480px) {
	.single-product .tebutiken-amount-buttons-ready .woocommerce-variation-add-to-cart {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 8px;
	}

	.single-product .tebutiken-amount-button {
		min-width: 58px;
		padding: 0 12px;
	}
}

/* SLUT: Mängdvalet ligger nära Tekungens funktion men följer Tebutiken.se:s egna färger och Savoys formspråk. */


/* Tar bort Savoys tomma variationsyta och dess kantlinjer utan att påverka variationsfunktionen. */
.single-product .tebutiken-amount-buttons-ready .woocommerce-variation.single_variation {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}


/* Tvingar rubrik och varje momssats till egna rader även om temat har regler som gör span-element inline. */
.wc-block-components-totals-footer-item-tax .tebutiken-momsrubrik,
.wc-block-components-totals-footer-item-tax .tebutiken-momsrad {
	display: block !important;
	width: 100% !important;
	white-space: normal !important;
}

/* Ger momsraderna normal läsbar radavstånd utan att ändra totalsummans övriga layout. */
.wc-block-components-totals-footer-item-tax .tebutiken-momsrad {
	margin-top: 2px !important;
}



/* Döljer lagerstatusen "I lager" på alla produktsidor. */
.single-product p.stock.in-stock {
	display: none !important;
}



/* Döljer Savoys egen procentbadge helt eftersom den inte renderas konsekvent på alla reaprodukter. */
.woocommerce .onsale {
	display: none !important;
}

/* Skapar en stabil positioneringsyta för vår egen Rea-label på produktkort. */
.woocommerce ul.products li.product.sale .nm-shop-loop-thumbnail {
	position: relative !important;
}

/* Visar Rea-labeln direkt från WooCommerce sale-klass och är inte beroende av Savoys onsale-element. */
.woocommerce ul.products li.product.sale .nm-shop-loop-thumbnail::before {
	content: "Rea";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 100;
	display: block;
	padding: 5px 9px;
	background: #111;
	color: #fff;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Skapar motsvarande positioneringsyta på själva produktsidan. */
.single-product .nm-single-product.sale .woocommerce-product-gallery {
	position: relative !important;
}

/* Visar samma Rea-label på produktsidan när WooCommerce markerar produkten som rea. */
.single-product .nm-single-product.sale .woocommerce-product-gallery::before {
	content: "Rea";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 100;
	display: block;
	padding: 5px 9px;
	background: #111;
	color: #fff;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	pointer-events: none;
}



/* Gör endast Välj alternativ-knappen något mindre på tablet och mobil så den ryms i produktkortet. */
@media (max-width: 1024px) {
	.nm-shop-loop-actions a.product_type_variable.add_to_cart_button {
		max-width: 100% !important;
		padding: 10px 16px !important;
		font-size: 13px !important;
		box-sizing: border-box !important;
		white-space: nowrap !important;
	}
}



/* Formaterar köpknappar i varukorgens produktförslag med samma tydliga utseende och centrerad placering. */
body.woocommerce-cart a[data-block-name="woocommerce/product-button"].add_to_cart_button {
	display: block !important;
	width: fit-content !important;
	max-width: 80% !important;
	margin: 0 auto !important;
	padding: 12.2px 28px !important;
	box-sizing: border-box !important;
	background: #000 !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	text-align: center !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	white-space: nowrap !important;
}