/*!
Theme Name: Blocksy Child
Theme URI: https://vinduspesialisten.no/
Description: Vinduspesialisten styling and compatibility layer for Blocksy.
Author: Vinduspesialisten
Template: blocksy
Version: 1.0.18
Text Domain: blocksy-child
*/

:root {
	--theme-font-family: "Merriweather Sans", Arial, Helvetica, sans-serif;
	--theme-palette-color-1: #000000;
	--theme-palette-color-2: #333333;
	--theme-palette-color-3: #666666;
	--theme-palette-color-4: #111111;
	--theme-text-color: #333333;
	--theme-link-initial-color: #000000;
	--theme-link-hover-color: #777777;
	--theme-button-background-initial-color: #C8E6D7;
	--theme-button-background-hover-color: #C8E6D7;
	--theme-button-text-initial-color: #1a1a1a;
	--theme-button-text-hover-color: #1a1a1a;
	--vs-navbar-mint: #336666;
	--theme-container-max-width: 1280px;
	--theme-normal-container-max-width: 1280px;
}

body {
	font-size: 12px;
	letter-spacing: 0;
}

.vs-topbar {
	background: #336666;
	color: #ffffff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.vs-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	width: min(1280px, calc(100% - 32px));
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
}

.vs-topbar a {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Hide the secondary header menu (#header-menu-2) entirely — it
   duplicates the customer-service phone number that now lives in
   the topbar and ends with a "More" overflow that only links to
   additional phone numbers. */
#header-menu-2,
.header-menu-2 {
	display: none !important;
}

/*
 * Footer sitemap menu — columns of category links derived from the
 * primary navigation. Rendered before the existing footer credit.
 */
.vs-footer-menu {
	background: #f7f6f4;
	padding: 56px 0 44px;
	border-top: 1px solid #e5e7eb;
}

.vs-footer-menu__inner {
	width: min(1280px, calc(100% - 32px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 32px;
}

.vs-footer-menu__col {
	min-width: 0;
}

.vs-footer-menu__heading {
	margin: 0 0 18px;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.vs-footer-menu__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-footer-menu__col li {
	margin: 0;
	padding: 0;
}

.vs-footer-menu__col li + li {
	margin-top: 10px;
}

.vs-footer-menu__col a {
	display: inline-block;
	padding: 0;
	color: #6b6b6b;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	transition: color 200ms ease;
}

.vs-footer-menu__col a:hover {
	color: #C8E6D7;
}

@media (max-width: 689.98px) {
	.vs-footer-menu {
		padding: 36px 0 28px;
	}

	.vs-footer-menu__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.vs-footer-menu__heading {
		margin-bottom: 12px;
		font-size: 12px;
	}

	.vs-footer-menu__col a {
		font-size: 13px;
	}
}

.vs-topbar a:hover {
	color: #ffffff;
	text-decoration-thickness: 2px;
}

#header [data-row] {
	background: #ffffff;
}

#header [data-row*="middle"] {
	border-bottom: 1px solid #eeeeee;
}

#header .site-logo-container img {
	max-height: 78px;
	width: auto;
}

#header .site-title,
#header .site-description {
	display: none;
}

[data-header*="type-1"] #offcanvas .ct-panel-inner {
	background-color: #336666 !important;
}

#header [data-id="menu"] > ul > li > a,
#header [data-id="menu-secondary"] > ul > li > a {
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	letter-spacing: 0;
	color: var(--vs-navbar-mint);
}

#header [data-id="menu"] > ul > li > a:hover,
#header [data-id="menu-secondary"] > ul > li > a:hover,
#header [data-id="menu"] > ul > li.current-menu-item > a,
#header [data-id="menu"] > ul > li.current-menu-parent > a {
	color: #1a1a1a;
}

.ct-header-cart,
.ct-header-search {
	color: #000000;
}

/* Gutenberg category CTA buttons (e.g. "Se alle vinduer") keep
   legacy inline terracotta backgrounds in page content. Force those
   button surfaces into the shared mint accent while keeping readable
   dark text, without touching decorative brand/illustration colors. */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-background,
.wp-block-button .wp-block-button__link.has-text-color,
.wp-block-button .wp-block-button__link.has-white-color {
	background: #C8E6D7 !important;
	background-color: #C8E6D7 !important;
	color: #1a1a1a !important;
	border-color: #C8E6D7 !important;
	box-shadow: 0 1px 2px rgba(200, 230, 215, 0.42), 0 8px 18px rgba(200, 230, 215, 0.34);
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	transition: background-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
	background: #C8E6D7 !important;
	background-color: #C8E6D7 !important;
	color: #1a1a1a !important;
	border-color: #C8E6D7 !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(200, 230, 215, 0.52), 0 14px 28px rgba(200, 230, 215, 0.44);
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid #C8E6D7;
	outline-offset: 3px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
	font-size: 12px;
}

.woocommerce ul.products li.product .onsale {
	background: #000000;
	color: #ffffff;
	text-transform: uppercase;
}

body.home .hero-section {
	display: none;
}

.woocommerce .ct-sidebar .widget-title,
.ct-sidebar .widget-title,
footer .widget-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
}

footer.ct-footer {
	background: #f4f4f4;
	color: #333333;
}

footer.ct-footer a {
	color: #000000;
}

footer.ct-footer a:hover {
	color: #777777;
}

.vs-footer-credit {
	background: #000000;
	color: #ffffff;
	font-size: 11px;
	padding: 12px 16px;
	text-align: center;
}

.vs-footer-credit a {
	color: #ffffff;
	text-decoration: none;
}

/*
 * Front-page product carousels are placed inside a Gutenberg columns
 * block with 25/50/25 flex-basis, leaving the GetBowtied swiper at
 * half the container width. Collapse the empty spacer columns and
 * stretch the carousel column to the full row so the cards get the
 * full container width.
 */
.wp-block-columns:has(> .wp-block-column .wp-block-getbowtied-carousel) > .wp-block-column:empty {
	display: none !important;
}

.wp-block-columns > .wp-block-column:has(.wp-block-getbowtied-carousel) {
	flex-basis: 100% !important;
	max-width: 100% !important;
	flex-grow: 1 !important;
}

/* The Skyvedører section wraps its carousel in an `alignfull` group
   that breaks out of the content container, so the inner column ends
   up viewport-wide and the cards stretch with it. Cap the carousel
   block itself at the site container width so it visually matches
   the other front-page sections. */
.wp-block-getbowtied-carousel {
	width: 100%;
	max-width: var(--theme-container-max-width, 1280px);
	margin-left: auto;
	margin-right: auto;
}

/* Category / shop archives: hide the filter sidebar so the product
   grid uses the full container width. The `data-sidebar` attribute
   on .ct-container drives Blocksy's grid layout; setting the
   container to `display: block` lets the products section span the
   full row. */
body.tax-product_cat #sidebar,
body.post-type-archive-product #sidebar,
body.woocommerce-page.archive #sidebar {
	display: none !important;
}

body.tax-product_cat .ct-container[data-sidebar],
body.post-type-archive-product .ct-container[data-sidebar],
body.woocommerce-page.archive .ct-container[data-sidebar] {
	display: block !important;
}

/* Category archive heading — drop the term's featured image banner
   that Blocksy's type-2 hero renders as a `<figure>` above the title. */
body.tax-product_cat .hero-section > figure,
body.post-type-archive-product .hero-section > figure {
	display: none !important;
}

/*
 * Takvindu archive: anchor nav at the top + per-subcategory sections.
 * The sections themselves reuse the front-page header paragraph
 * styling that already lives in this file; only the nav strip and the
 * scroll-margin for the anchors are new.
 */
.vs-subcat-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 32px;
}

.vs-subcat-anchor {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	background: #f4f4f5;
	color: #1a1a1a;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.vs-subcat-anchor:hover,
.vs-subcat-anchor:focus-visible {
	background: #C8E6D7;
	color: #1a1a1a;
	border-color: #C8E6D7;
	outline: none;
}

.vs-subcat-section {
	scroll-margin-top: 96px;
	margin-bottom: 48px;
}

.vs-subcat-section > .woocommerce {
	margin-top: 0;
}

html {
	scroll-behavior: smooth;
}

/*
 * Section headers (VINDUER, TERRASSEDØRER, SKYVEDØRER, …) — flatten
 * the brown pill background into a clean Title-Case heading with a
 * dividing rule below. Source HTML keeps "VINDUER" all-caps, so
 * `text-transform: lowercase` + `::first-letter { uppercase }` gives
 * the rendered "Vinduer" without touching the block content.
 */
p.has-text-align-center.has-white-color.has-text-color.has-background {
	color: #1a1a1a !important;
	background: transparent !important;
	background-color: transparent !important;
	font-size: 40px !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: left !important;
	text-transform: lowercase;
	padding: 20px 0 !important;
	margin: 32px 0 28px;
	border-bottom: 1px solid #e5e7eb;
}

p.has-text-align-center.has-white-color.has-text-color.has-background::first-letter {
	text-transform: uppercase;
}

p.has-text-align-center.has-white-color.has-text-color.has-background strong {
	font-weight: inherit;
}

@media (max-width: 689.98px) {
	p.has-text-align-center.has-white-color.has-text-color.has-background {
		font-size: 26px !important;
		padding: 14px 0 !important;
		margin: 24px 0 20px;
	}
}

/*
 * Single product page — reuse the card visual language: 16px rounded
 * corners on the gallery, mint CTA with the same shadow as the
 * loop card's "Vis produkt" button, near-black title + price, muted
 * description / meta. Base font lifted from 12px → 16px so the
 * details panel feels editorial rather than dense.
 */
body.single-product {
	font-size: 16px;
}

body.single-product .summary,
body.single-product .woocommerce-product-details__short-description,
body.single-product .product_meta,
body.single-product .woocommerce-tabs .panel {
	font-size: 16px;
	line-height: 1.6;
	color: #333333;
}

body.single-product .product_title {
	color: #1a1a1a;
	font-size: clamp(26px, 2.4vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

body.single-product .summary .price,
body.single-product .single_variation_wrap .price {
	position: relative;
	color: #1a1a1a;
	font-size: clamp(22px, 1.8vw, 28px);
	font-weight: 700;
	letter-spacing: -0.005em;
	margin: 12px 0 22px;
	padding-top: 18px;
}

body.single-product .summary .price::before,
body.single-product .single_variation_wrap .price::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 2px;
	background: #C8E6D7;
}

body.single-product .summary .price del {
	color: #a8a8a8;
	font-weight: 400;
	margin-right: 8px;
}

body.single-product .summary .price ins {
	background: transparent;
	text-decoration: none;
}

body.single-product .product_meta {
	color: #6b6b6b;
	font-size: 14px;
}

body.single-product .product_meta a {
	color: #6b6b6b;
}

body.single-product .product_meta a:hover {
	color: #1a1a1a;
}

/* Gallery — rounded corners on the main image and thumbnails. */
body.single-product .woocommerce-product-gallery {
	border-radius: 16px;
	overflow: hidden;
}

body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image img,
body.single-product .flex-viewport,
body.single-product .flex-viewport img {
	border-radius: 16px;
}

/* Show the whole product photo by default — Blocksy / WC's default
   gallery crops or zooms with object-fit: cover. Override to contain
   on a neutral background so tall window cutouts read full-frame. */
body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a,
body.single-product .flex-viewport {
	background: #f7f6f4;
}

body.single-product .woocommerce-product-gallery__image img,
body.single-product .flex-viewport img,
body.single-product .woocommerce-product-gallery__wrapper img {
	width: 100% !important;
	height: auto !important;
	max-height: 640px;
	object-fit: contain !important;
	object-position: center;
	transform: none !important;
}

/* Kill any hover-zoom that the Blocksy gallery applies via transform. */
body.single-product .woocommerce-product-gallery__image:hover img,
body.single-product .woocommerce-product-gallery__image a:hover img {
	transform: none !important;
}

body.single-product .flex-control-thumbs li,
body.single-product .flex-control-thumbs img {
	border-radius: 8px;
}

/* Quantity input + variation dropdowns — match the 10px CTA radius. */
body.single-product .quantity .qty,
body.single-product .variations select,
body.single-product table.variations select {
	padding: 10px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #ffffff;
	font-size: 15px;
	color: #1a1a1a;
}

body.single-product .quantity .qty:focus,
body.single-product .variations select:focus {
	outline: 2px solid #C8E6D7;
	outline-offset: 1px;
	border-color: #C8E6D7;
}

/* Primary "Add to cart" CTA — same mint accent as the card "Vis
   produkt" button so the catalog → product transition feels
   continuous. */
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: #C8E6D7;
	color: #1a1a1a;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(200, 230, 215, 0.42), 0 8px 18px rgba(200, 230, 215, 0.34);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

body.single-product .single_add_to_cart_button:hover,
body.single-product button.single_add_to_cart_button:hover {
	background: #C8E6D7;
	color: #1a1a1a;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(200, 230, 215, 0.52), 0 14px 28px rgba(200, 230, 215, 0.44);
}

body.single-product .single_add_to_cart_button:focus-visible {
	outline: 2px solid #C8E6D7;
	outline-offset: 3px;
}

/* Tabs — pill-style with mint accent on active. */
body.single-product .woocommerce-tabs ul.tabs {
	gap: 8px;
	padding: 0;
	margin: 32px 0 24px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #e5e7eb;
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
	display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 18px;
	color: #6b6b6b;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: none;
	border-bottom: 2px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: #1a1a1a;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
	color: #1a1a1a;
	border-bottom-color: #C8E6D7;
}

body.single-product .woocommerce-tabs .panel {
	padding: 12px 0 24px;
}

@media (max-width: 689.98px) {
	.vs-topbar {
		font-size: 14px;
	}

	.vs-topbar__inner {
		padding: 8px 12px;
		min-height: 0;
	}

	#header .site-logo-container img {
		max-height: 56px;
	}

	body.single-product .product_title {
		font-size: 24px;
	}

	body.single-product .summary .price,
	body.single-product .single_variation_wrap .price {
		font-size: 22px;
	}
}