/*
Theme Name: DinStue.dk
Description: Child theme til Flatsome. Designsystem bygget op om logoets brune
             streg (#755B53) med varme sandfarver og hvid som baerende flader.
Author: Sommer Systems
Template: flatsome
Version: 3.1
*/

/* ==========================================================================
   1. Designtokens
   Paletten er ankret i logoets ene farve. Sandtonerne er varme og lave i
   maetning, saa produktbillederne — som er shoppens egentlige indhold —
   altid er det farvestaerkeste paa siden.
   ========================================================================== */

:root {
	--ds-brown:       #755b53;
	--ds-brown-dark:  #5a453e;
	--ds-brown-soft:  #9b8279;

	--ds-sand-50:     #faf7f3;
	--ds-sand-100:    #f3ede5;
	--ds-sand-200:    #e8ded1;
	--ds-sand-300:    #d9c9b6;

	--ds-ink:         #2a2422;
	--ds-muted:       #7a6f68;
	--ds-line:        #e5ddd4;

	--ds-track:       0.14em;   /* logoets brede bogstavmellemrum */
	--ds-track-wide:  0.22em;
}

/* ==========================================================================
   2. Grundtypografi
   Logoet er en let, geometrisk sans med luft mellem bogstaverne. Jost er
   naermeste frit tilgaengelige slaegtning, og overskrifterne laaner logoets
   sperring, saa side og maerke taler samme sprog.
   ========================================================================== */

body {
	color: var(--ds-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.ux-menu-link__text,
.nav > li > a {
	font-weight: 300;
	letter-spacing: var(--ds-track);
	color: var(--ds-ink);
}

h1, h2 {
	letter-spacing: var(--ds-track-wide);
	text-transform: uppercase;
}

h1 { font-size: 2.2em; line-height: 1.25; }
h2 { font-size: 1.7em; line-height: 1.3; }
h3 { font-size: 1.25em; }

p { color: var(--ds-ink); }
.lead, .is-large { color: var(--ds-muted); }

a { color: var(--ds-brown); }
a:hover { color: var(--ds-brown-dark); }

/* Lille sperret overlinje over en overskrift. */
.ds-kicker {
	font-size: .72rem;
	letter-spacing: var(--ds-track-wide);
	text-transform: uppercase;
	color: var(--ds-brown);
	margin-bottom: .8rem;
}
.ds-on-image .ds-kicker { color: #f1e9e1; }
.ds-on-image h1,
.ds-on-image p { color: #fff; }
.ds-on-image h1 {
	font-size: 2.9rem;
	line-height: 1.12;
	letter-spacing: 0.12em;
	margin-bottom: 1.2rem;
}
.ds-on-image p { font-size: 1.05rem; max-width: 30rem; margin-bottom: 1.6rem; }

/* Sektionsoverskrift med en kort streg under — samme gestus som logoets bjaelke. */
.ds-heading {
	text-align: center;
	margin-bottom: 2.5rem;
}
.ds-heading h2 { margin-bottom: 0.6rem; }
.ds-heading p {
	color: var(--ds-muted);
	max-width: 34rem;
	margin: 0 auto;
}
.ds-heading h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	background: var(--ds-brown);
	margin: 1rem auto 0;
}

/* ==========================================================================
   3. Header
   Hvid, hoej og rolig. Navigationen er sperret som logoteksten.
   ========================================================================== */

.header:not(.transparent) .header-main,
.header:not(.transparent) .header-bottom { background: #fff; }
.header-wrapper:not(.stuck) .header-bottom { border-bottom: 1px solid var(--ds-line); }
.header-bottom .nav > li > a { padding-top: 0; padding-bottom: 0; }
.header-bottom-nav > li > a { line-height: 50px; }
.header-bottom .nav-line-bottom > li > a:before { bottom: 0; }

.header-top {
	background: var(--ds-sand-100) !important;
	border: 0;
}
.header-top a,
.header-top .nav > li > a,
.header-top span {
	color: var(--ds-ink) !important;
	font-size: 0.78em;
	letter-spacing: var(--ds-track);
	text-transform: uppercase;
}

.header-nav .nav > li > a {
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	font-weight: 400;
}
.nav-line-bottom > li > a:before,
.nav-line-grow > li > a:before {
	background-color: var(--ds-brown);
	height: 1px;
}

.header .nav-dropdown {
	border: 1px solid var(--ds-line);
	border-radius: 0;
	box-shadow: 0 12px 34px rgba(42, 36, 34, 0.08);
}

.logo img { max-height: 30px; width: auto; }
.logo a { padding: 0; }

/* ==========================================================================
   4. Knapper
   Firkantede, sperrede, uden skygge. Primaer = logoets brune.
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	font-weight: 400;
	font-size: 0.82em;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.button.primary:not(.is-outline),
.woocommerce button.button.alt,
.woocommerce a.button.alt,
button.single_add_to_cart_button {
	background-color: var(--ds-brown);
	border-color: var(--ds-brown);
	color: #fff;
}
.button.primary:not(.is-outline):hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
button.single_add_to_cart_button:hover {
	background-color: var(--ds-brown-dark);
	border-color: var(--ds-brown-dark);
}

.button.is-outline {
	border-color: var(--ds-brown);
	color: var(--ds-brown);
}
.button.is-outline:hover {
	background-color: var(--ds-brown);
	color: #fff;
}

/* Hvid outline-knap til brug oven paa billeder. */
.ds-btn-light.button.is-outline {
	border-color: #fff;
	color: #fff;
}
.ds-btn-light.button.is-outline:hover {
	background: #fff;
	color: var(--ds-ink);
}

/* ==========================================================================
   5. Produktkort
   Roligt kort uden ramme: billedet baerer, teksten er lille og sperret,
   prisen er det eneste med vaegt.
   ========================================================================== */

.product-small .box-image {
	background: var(--ds-sand-50);
	border-radius: 0;
	overflow: hidden;
}
.product-small .box-image img {
	transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.product-small:hover .box-image img { transform: scale(1.045); }

.product-small .box-text {
	padding-top: 1rem;
	text-align: center;
}

.product-small .product-title,
.product-small .name.product-title a {
	font-size: 0.86rem;
	line-height: 1.45;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--ds-ink);
	text-transform: none;
}
.product-small .product-title a:hover { color: var(--ds-brown); }

.product-small .category,
.product-small .box-text .category {
	font-size: 0.68rem;
	letter-spacing: var(--ds-track-wide);
	text-transform: uppercase;
	color: var(--ds-muted);
	margin-bottom: 0.3rem;
}

.price,
.product-small .price,
.woocommerce-Price-amount {
	color: var(--ds-ink);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.price del { color: var(--ds-muted); font-weight: 300; opacity: .7; }
.price ins { text-decoration: none; color: var(--ds-brown); }

/* Flatsomes "Tilfoej til kurv" under kortet daemper vi, saa gitteret er roligt. */
.product-small .add-to-cart-button a {
	font-size: 0.72rem;
	letter-spacing: var(--ds-track);
}

.badge-container .badge-inner {
	background: var(--ds-brown);
	color: #fff;
	border-radius: 0;
	font-size: 0.68rem;
	letter-spacing: var(--ds-track);
	font-weight: 400;
}
.badge.out-of-stock .badge-inner {
	background: var(--ds-sand-300);
	color: var(--ds-ink);
}

/* ==========================================================================
   6. Forside: hero og kategorifelter
   ========================================================================== */

/* Gradient fra venstre, saa teksten staar paa den moerke side og billedet
   faar lov at vaere lyst og varmt til hoejre. */
.ds-hero .overlay {
	background: linear-gradient(90deg, rgba(42, 36, 34, .58) 0%, rgba(42, 36, 34, .34) 45%, rgba(42, 36, 34, .06) 100%) !important;
}
@media only screen and (max-width: 48em) {
	.ds-hero .overlay { background: rgba(42, 36, 34, .42) !important; }
}

.ds-cat-tile .box-image { background: var(--ds-sand-100); }
.ds-cat-tile .count { display: none; }
.ds-cat-tile .box-text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.1rem;
	background: linear-gradient(to top, rgba(42, 36, 34, .62), rgba(42, 36, 34, 0));
}
.ds-cat-tile .box-text .header-title,
.ds-cat-tile .box-text a {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: var(--ds-track-wide);
	font-size: 0.84rem;
	font-weight: 400;
}

/* ==========================================================================
   7. Sektioner og flader
   ========================================================================== */

.ds-section-sand { background-color: var(--ds-sand-100); }
.ds-section-sand-light { background-color: var(--ds-sand-50); }

.ds-usp .icon-box-img svg,
.ds-usp .icon-box-img i { color: var(--ds-brown); }
.ds-usp h4 {
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	margin-bottom: .35rem;
}
.ds-usp p {
	font-size: 0.84rem;
	color: var(--ds-muted);
	margin: 0;
}

/* ==========================================================================
   8. Shop-arkiv
   ========================================================================== */

.shop-container .woocommerce-result-count,
.shop-container .woocommerce-ordering select {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--ds-muted);
}

.shop-page-title .page-title-inner { padding-top: 2.4rem; padding-bottom: 1.2rem; }

.widget .is-divider { display: none; }
.widget > .widget-title,
.widget > span.widget-title {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	font-weight: 400;
	border-bottom: 1px solid var(--ds-line);
	padding-bottom: .6rem;
	display: block;
	margin-bottom: .9rem;
}
.widget_product_categories ul li a { color: var(--ds-ink); font-size: .88rem; }
.widget_product_categories ul li a:hover { color: var(--ds-brown); }

/* ==========================================================================
   9. Produktside
   ========================================================================== */

.product-title.product_title {
	font-size: 1.6rem;
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 300;
	line-height: 1.3;
}

.product-info .price-wrapper .price {
	font-size: 1.5rem;
	font-weight: 400;
}

.product-info .product_meta {
	border-top: 1px solid var(--ds-line);
	padding-top: 1rem;
	font-size: 0.8rem;
	color: var(--ds-muted);
	letter-spacing: 0.03em;
}
.product-info .product_meta a { color: var(--ds-brown); }

.product-main { padding-top: 2.2rem; }

.product-gallery .woocommerce-product-gallery__image { background: var(--ds-sand-50); }

.product-page-sections .tabbed-content .nav-tabs > li > a,
.woocommerce-tabs .nav > li > a {
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	font-size: 0.8rem;
	font-weight: 400;
}

/* Lille tillidsblok under koeb-knappen. */
.ds-trust {
	border-top: 1px solid var(--ds-line);
	margin-top: 1.2rem;
	padding-top: 1rem;
	font-size: 0.82rem;
	color: var(--ds-muted);
	line-height: 1.9;
}
.ds-trust strong { color: var(--ds-ink); font-weight: 500; }

/* Specifikationstabel (WooCommerces egen) — maal, vaegt, materiale og farve
   fra House Nordic-dataene. */
.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: .86rem;
	border: 0;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	text-align: left;
	padding: .65rem .2rem;
	border: 0;
	border-bottom: 1px solid var(--ds-line);
	vertical-align: top;
	background: transparent !important;
}
.woocommerce-product-attributes th {
	font-weight: 400;
	color: var(--ds-muted);
	letter-spacing: .03em;
	width: 38%;
}
.woocommerce-product-attributes td p { margin: 0; }

.product-short-description {
	color: var(--ds-muted);
	font-size: .95rem;
	line-height: 1.7;
}

/* ==========================================================================
   10. Kurv og kasse
   ========================================================================== */

.cart-container table.shop_table th {
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	font-size: .78rem;
	font-weight: 400;
	color: var(--ds-muted);
}
.checkout .col-inner,
.cart_totals {
	background: var(--ds-sand-50);
	padding: 1.4rem;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.footer-1 { background-color: var(--ds-sand-100); padding: 3rem 0 1.5rem; }
.footer-1,
.footer-1 p,
.footer-1 li,
.footer-1 a { color: var(--ds-ink); }
.footer-1 a:hover { color: var(--ds-brown); }
.footer-1 .widget { font-size: .88rem; line-height: 1.8; }
.footer-1 .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-1 .widget li { margin: 0; padding: 0; border: 0; }

.footer-2 { background-color: var(--ds-brown); }
.footer-2,
.footer-2 a,
.absolute-footer,
.absolute-footer a { color: #f1e9e1; }
.absolute-footer { background: var(--ds-brown-dark); padding: 1rem 0; font-size: .78rem; letter-spacing: .03em; }
.absolute-footer .footer-secondary .nav > li > a { color: #f1e9e1; font-size: .72rem; letter-spacing: var(--ds-track); }

/* Betalingsikoner skjules, indtil betaling faktisk er sat op. */
.payment-icons { display: none; }

.footer .widget > .widget-title,
.footer .widget h3.widget-title {
	border-bottom: 0;
	color: var(--ds-ink);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: var(--ds-track);
	margin-bottom: .8rem;
}

/* ==========================================================================
   12. Mobil
   ========================================================================== */

@media only screen and (max-width: 48em) {
	h1 { font-size: 1.6em; }
	h2 { font-size: 1.3em; }

	.ds-on-image h1 { font-size: 2rem; letter-spacing: .1em; line-height: 1.15; }
	.ds-on-image p { font-size: .95rem; }
	.ds-kicker { font-size: .66rem; letter-spacing: .16em; }
	.ds-usp h4 { font-size: .78rem; }
	.ds-usp p { font-size: .8rem; }

	.header-main { min-height: 70px; }
	.logo img { max-height: 36px; }

	.ds-heading { margin-bottom: 1.6rem; }

	.product-small .box-text { padding-top: .7rem; }
	.product-small .product-title { font-size: .8rem; }

	.ds-cat-tile .box-text { padding: .7rem; }
	.ds-cat-tile .box-text .header-title { font-size: .74rem; }
}