/*
Theme Name: SmartGo til Blocksy
Theme URI: https://smartgo.dk/
Description: Stabilt og mobilvenligt WooCommerce-childtheme til SmartGo. Kræver gratis-temaet Blocksy.
Author: SmartGo
Version: 1.15.2
Template: blocksy
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: smartgo-blocksy
License: GNU General Public License v2 or later
*/

:root {
	--sgb-blue: #165dff;
	--sgb-blue-dark: #0d42c7;
	--sgb-coral: #ff6b5e;
	--sgb-ink: #171a1f;
	--sgb-muted: #626b78;
	--sgb-navy: #101720;
	--sgb-soft: #edf3ff;
	--sgb-off: #f7f6f2;
	--sgb-border: #e2e6ec;
	--sgb-white: #fff;
	--sgb-button-text: #fff;
	--sgb-radius: 16px;
	--sgb-button-radius: 9px;
	--sgb-shadow: 0 14px 36px rgba(26, 43, 73, 0.09);
	--sgb-width: 1240px;
	--sgb-product-columns-desktop: 4;
	--sgb-product-columns-tablet: 2;
	--sgb-product-columns-mobile: 2;
	--sgb-product-media-height: 210px;
	--sgb-product-media-height-mobile: 150px;
	--sgb-category-media-height: 210px;
	--sgb-category-media-height-mobile: 150px;
	--sgb-product-card-max-height: 800px;
	--sgb-product-gap: 18px;
	--sgb-product-image-padding: 14px;
	--sgb-product-card-radius: 14px;
	--sgb-product-title-size: 16px;
	--sgb-product-title-size-mobile: 14px;
	--sgb-product-card-bg: #fff;
	--sgb-product-image-bg: #fff;
	--sgb-product-card-edge: #e7e4df;
	--sgb-nav-background: #fff;
	--sgb-nav-text: #172033;
	--sgb-nav-accent: #165dff;
	--sgb-category-intro-background: #fff;
	--sgb-category-intro-padding: 10px;
	--sgb-single-product-media-height: 400px;
	--sgb-single-product-media-height-mobile: 330px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.smartgo-blocksy {
	/*
	 * Blocksy bruger denne variabel flere steder end på selve .ct-container.
	 * Den må derfor aldrig være en fast 1240px-bredde, da indholdet ellers
	 * fortsætter uden for vinduet på mindre skærme og ved browserzoom.
	 */
	--theme-container-width: min(100%, var(--sgb-width));
	overflow-x: hidden;
	background: var(--sgb-white);
	color: var(--sgb-ink);
	-webkit-font-smoothing: antialiased;
}

.smartgo-blocksy img {
	max-width: 100%;
	height: auto;
}

.smartgo-blocksy .ct-container,
.smartgo-blocksy .ct-container-fluid {
	width: min(var(--sgb-width), calc(100% - 48px));
	max-width: var(--sgb-width);
	margin-inline: auto;
}

/*
 * Shopindholdet er et grid-element i Blocksy. min-width:auto kan få et langt
 * produktnavn eller selve produktgitteret til at gøre kolonnen bredere end
 * containeren. Disse regler holder altid shoppen inden for den synlige ramme.
 */
.smartgo-blocksy .ct-container > section,
.smartgo-blocksy .ct-container > article,
.smartgo-blocksy [data-sidebar] > section,
.smartgo-blocksy [data-sidebar] > article,
.smartgo-blocksy .woocommerce {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.sgb-shell {
	width: min(var(--sgb-width), calc(100% - 48px)) !important;
	max-width: var(--sgb-width) !important;
	margin-inline: auto !important;
}

.smartgo-blocksy .wp-block-button__link,
.smartgo-blocksy .button,
.smartgo-blocksy button.button,
.smartgo-blocksy input.button,
.smartgo-blocksy .added_to_cart {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 20px !important;
	border: 0 !important;
	border-radius: var(--sgb-button-radius) !important;
	background: var(--sgb-blue) !important;
	color: var(--sgb-button-text) !important;
	font-weight: 750 !important;
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: 0 8px 18px rgba(22, 93, 255, 0.18);
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.smartgo-blocksy .wp-block-button__link:hover,
.smartgo-blocksy .button:hover,
.smartgo-blocksy button.button:hover,
.smartgo-blocksy input.button:hover,
.smartgo-blocksy .added_to_cart:hover {
	transform: translateY(-2px);
	background: var(--sgb-blue-dark) !important;
	box-shadow: 0 10px 22px rgba(22, 93, 255, 0.24);
}

/* Tryghedsbjælke over Blocksys redigerbare header. */
.sgb-topbar {
	position: relative;
	z-index: 60;
	min-height: 38px;
	background: var(--sgb-navy);
	color: #fff;
}

.sgb-topbar__inner {
	width: min(var(--sgb-width), calc(100% - 48px));
	min-height: 38px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: 24px;
}

.sgb-topbar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.sgb-topbar__item:first-child {
	justify-content: flex-start;
}

.sgb-topbar__item:last-child {
	justify-content: flex-end;
}

.sgb-topbar__item svg {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Blocksy-header: forbliver fuldt redigerbar i Udseende > Tilpas. */
.smartgo-blocksy .ct-header {
	background: rgba(255, 255, 255, 0.98);
	border-bottom: 1px solid var(--sgb-border);
}

.smartgo-blocksy .ct-header [data-row] > div {
	max-width: var(--sgb-width);
}

.smartgo-blocksy .site-logo-container img {
	display: block;
	width: auto;
	max-width: 240px;
	max-height: 68px;
	object-fit: contain;
}

.smartgo-blocksy .site-title {
	font-weight: 850;
	letter-spacing: -0.04em;
}

/*
 * Det kombinerede SmartGo-billedlogo indeholder allerede navnet. Blocksys
 * separate sidetitel under logoet skjules derfor i både desktop- og
 * off-canvas-headeren.
 */
body.smartgo-blocksy .ct-header [data-id="logo"] .site-title-container,
body.smartgo-blocksy [data-id="offcanvas-logo"] .site-title-container {
	display: none !important;
}

.smartgo-blocksy .header-menu-1 > ul > li > a {
	font-weight: 700;
}

/*
 * Selvstændig kategorilinje under Blocksys header.
 *
 * På computer flyttes navigationen visuelt væk fra logo-rækken. Blocksys
 * almindelige mobilmenu forbliver urørt og bruges fortsat under 1000px.
 */
.sgb-category-nav {
	position: relative;
	z-index: 70;
	width: 100%;
	overflow: visible;
	border-bottom: 1px solid var(--sgb-border);
	background: var(--sgb-nav-background);
	color: var(--sgb-nav-text);
}

.sgb-category-nav__inner {
	width: min(var(--sgb-width), calc(100% - 48px));
	max-width: var(--sgb-width);
	min-height: 50px;
	margin-inline: auto;
}

.sgb-category-nav__list,
.sgb-category-nav__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sgb-category-nav__list {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 2px 28px;
	min-height: 50px;
}

.sgb-category-nav__list > .menu-item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 50px;
}

.sgb-category-nav__list a {
	color: var(--sgb-nav-text);
	text-decoration: none;
}

.sgb-category-nav__list > .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 0;
	font-size: 14px;
	font-weight: 760;
	letter-spacing: 0.015em;
}

.sgb-category-nav__list > .menu-item > a::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	content: "";
	opacity: 0;
	background: var(--sgb-nav-accent);
	transform: scaleX(0.5);
	transition: opacity 150ms ease, transform 150ms ease;
}

.sgb-category-nav__list > .menu-item:hover > a,
.sgb-category-nav__list > .menu-item:focus-within > a,
.sgb-category-nav__list > .current-menu-item > a {
	color: var(--sgb-nav-accent);
}

.sgb-category-nav__list > .menu-item:hover > a::after,
.sgb-category-nav__list > .menu-item:focus-within > a::after,
.sgb-category-nav__list > .current-menu-item > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.sgb-category-nav__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 36px;
	margin: 0 -8px 0 3px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	color: var(--sgb-nav-text);
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.sgb-category-nav__toggle::before {
	width: 8px;
	height: 8px;
	content: "";
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 150ms ease;
}

.sgb-category-nav__toggle:hover,
.sgb-category-nav__toggle:focus-visible {
	color: var(--sgb-nav-accent);
	background: color-mix(in srgb, var(--sgb-nav-accent) 8%, transparent);
}

.sgb-category-nav__item.is-open > .sgb-category-nav__toggle::before,
.sgb-category-nav__toggle[aria-expanded="true"]::before {
	transform: translateY(2px) rotate(225deg);
}

.sgb-category-nav__list > .menu-item > .sub-menu {
	position: absolute;
	z-index: 100;
	top: calc(100% + 1px);
	left: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(190px, 1fr));
	gap: 3px 24px;
	width: min(540px, calc(100vw - 48px));
	max-height: min(540px, calc(100vh - 170px));
	padding: 18px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	border: 1px solid var(--sgb-border);
	border-radius: 0 0 14px 14px;
	background: #fff;
	box-shadow: 0 18px 38px rgba(16, 23, 32, 0.14);
	transform: translateY(7px);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.sgb-category-nav__list > .menu-item:last-child > .sub-menu {
	right: 0;
	left: auto;
}

.sgb-category-nav__list > .menu-item:hover > .sub-menu,
.sgb-category-nav__list > .menu-item:focus-within > .sub-menu,
.sgb-category-nav__list > .menu-item.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.sgb-category-nav__list .sub-menu > .menu-item {
	position: relative;
	min-width: 0;
}

.sgb-category-nav__list .sub-menu a {
	display: block;
	padding: 9px 11px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.25;
}

.sgb-category-nav__list .sub-menu a:hover,
.sgb-category-nav__list .sub-menu a:focus-visible,
.sgb-category-nav__list .sub-menu .current-menu-item > a {
	color: var(--sgb-nav-accent);
	background: color-mix(in srgb, var(--sgb-nav-accent) 8%, #fff);
}

.sgb-category-nav__list .sub-menu .sub-menu {
	position: static;
	display: block;
	width: auto;
	max-height: none;
	margin: 1px 0 5px 11px;
	padding: 0 0 0 9px;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	border: 0;
	border-left: 1px solid var(--sgb-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
	pointer-events: auto;
}

.sgb-category-nav__list .sub-menu .sub-menu a {
	padding-block: 6px;
	font-size: 13px;
	font-weight: 600;
}

.sgb-category-nav__list .sub-menu .sgb-category-nav__toggle {
	display: none;
}

.smartgo-blocksy .ct-header-trigger {
	min-width: 44px;
	min-height: 44px;
	border-radius: 9px;
}

.smartgo-blocksy #offcanvas {
	z-index: 99999;
}

.smartgo-blocksy #offcanvas .ct-panel-inner {
	background: #fff;
	color: var(--sgb-ink);
}

.smartgo-blocksy #offcanvas {
	--theme-link-initial-color: var(--sgb-ink);
	--theme-link-hover-color: var(--sgb-blue);
	--theme-link-active-color: var(--sgb-blue);
	--theme-text-color: var(--sgb-ink);
}

/*
 * Blocksys off-canvas-menu kan give hovedpunkter og underpunkter forskellige
 * farver. Derfor sættes tekstfarven eksplicit på alle menuniveauer.
 */
.smartgo-blocksy #offcanvas .mobile-menu,
.smartgo-blocksy #offcanvas .mobile-menu ul,
.smartgo-blocksy #offcanvas .mobile-menu li {
	color: var(--sgb-ink) !important;
}

.smartgo-blocksy #offcanvas .mobile-menu a,
.smartgo-blocksy #offcanvas .mobile-menu .ct-menu-link,
.smartgo-blocksy #offcanvas .mobile-menu .menu-item > a,
.smartgo-blocksy #offcanvas .mobile-menu .sub-menu a {
	min-height: 48px;
	font-size: 17px;
	font-weight: 700;
	color: var(--sgb-ink) !important;
	-webkit-text-fill-color: var(--sgb-ink) !important;
	opacity: 1 !important;
}

.smartgo-blocksy #offcanvas .mobile-menu .sub-menu {
	background: #fff !important;
}

.smartgo-blocksy #offcanvas .mobile-menu .sub-menu a {
	min-height: 44px;
	font-size: 15px;
	font-weight: 650;
}

.smartgo-blocksy #offcanvas .mobile-menu a:hover,
.smartgo-blocksy #offcanvas .mobile-menu a:focus-visible,
.smartgo-blocksy #offcanvas .mobile-menu .current-menu-item > a,
.smartgo-blocksy #offcanvas .mobile-menu .current-menu-ancestor > a,
.smartgo-blocksy #offcanvas .mobile-menu .current-product_cat-ancestor > a,
.smartgo-blocksy #offcanvas .mobile-menu .current-product_cat-parent > a,
.smartgo-blocksy #offcanvas .mobile-menu .ct-menu-link:hover,
.smartgo-blocksy #offcanvas .mobile-menu .ct-menu-link:focus-visible {
	color: var(--sgb-blue) !important;
	-webkit-text-fill-color: var(--sgb-blue) !important;
}

.smartgo-blocksy #offcanvas .mobile-menu button,
.smartgo-blocksy #offcanvas .mobile-menu .sub-menu-toggle,
.smartgo-blocksy #offcanvas .mobile-menu .ct-toggle-dropdown-desktop,
.smartgo-blocksy #offcanvas .mobile-menu [class*="toggle"] {
	color: var(--sgb-ink) !important;
	-webkit-text-fill-color: var(--sgb-ink) !important;
	opacity: 1 !important;
}

.smartgo-blocksy #offcanvas .mobile-menu button svg,
.smartgo-blocksy #offcanvas .mobile-menu .sub-menu-toggle svg,
.smartgo-blocksy #offcanvas .mobile-menu .ct-toggle-dropdown-desktop svg {
	color: var(--sgb-ink) !important;
	fill: currentColor;
	stroke: currentColor;
	opacity: 1 !important;
}

/* Blocksy kan ellers vise en automatisk sideliste, når ingen menu er valgt. */
.smartgo-blocksy .menu > .page_item {
	list-style: none;
}

/* Redigerbar hjælpelinje lige før Blocksys footer. */
.sgb-support {
	padding: 54px 0;
	background: var(--sgb-navy);
	color: #fff;
}

.sgb-support__inner {
	width: min(var(--sgb-width), calc(100% - 48px));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 36px;
	align-items: center;
}

.sgb-support h2 {
	margin: 0 0 7px;
	color: #fff;
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: -0.03em;
}

.sgb-support p {
	margin: 0;
	color: #bec6d2;
}

/*
 * Stable SmartGo footer. Blocksy supplies the outer #footer element while the
 * complete editable footer content comes from the child theme.
 */
body.smartgo-blocksy #footer,
.smartgo-blocksy .ct-footer {
	margin: 0;
	background: #0b1017;
	color: #fff;
}

.sgb-site-footer {
	width: 100%;
	background: #0b1017;
	color: #fff;
}

.sgb-site-footer__main,
.sgb-site-footer__bottom {
	width: min(var(--sgb-width), calc(100% - 48px));
	margin-inline: auto;
}

.sgb-site-footer__main {
	display: grid;
	grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(150px, 1fr));
	gap: 48px;
	padding: 58px 0 44px;
}

.sgb-site-footer__brand {
	max-width: 330px;
}

.sgb-site-footer__logo {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: 250px;
	margin-bottom: 18px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.sgb-site-footer__logo img {
	display: block;
	width: auto;
	max-width: 224px;
	max-height: 70px;
	object-fit: contain;
	object-position: left center;
}

.sgb-site-footer__brand p {
	margin: 0;
	color: #bec6d2;
	font-size: 15px;
	line-height: 1.7;
}

.sgb-site-footer__column h2 {
	margin: 4px 0 18px;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.sgb-footer-menu {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgb-footer-menu li {
	margin: 0;
	padding: 0;
}

.sgb-footer-menu a {
	color: #bec6d2;
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
}

.sgb-footer-menu a:hover,
.sgb-footer-menu a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sgb-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: #aeb7c4;
	font-size: 13px;
}

@media (max-width: 1024px) {
	.sgb-site-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 48px;
	}
}

@media (min-width: 1000px) {
	/*
	 * Den tidligere header-menu skjules kun på computer. Den samme menu kan
	 * stadig bruges af Blocksys fungerende burger-menu på mobil og tablet.
	 */
	body.smartgo-blocksy.smartgo-category-nav-active .ct-header .header-menu-1 {
		display: none !important;
	}
}

@media (max-width: 999px) {
	.sgb-category-nav {
		display: none;
	}
}

@media (max-width: 767px) {
	.smartgo-blocksy .ct-container,
	.smartgo-blocksy .ct-container-fluid,
	.sgb-topbar__inner,
	.sgb-support__inner {
		width: min(100% - 28px, var(--sgb-width)) !important;
	}

	.sgb-topbar__inner {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.sgb-topbar__item {
		justify-content: flex-start !important;
		font-size: 11px;
	}

	.sgb-topbar__item:nth-child(2) {
		display: none;
	}

	.sgb-topbar__item:last-child {
		justify-content: flex-end !important;
	}

	.smartgo-blocksy .site-logo-container img {
		max-width: 180px;
		max-height: 54px;
	}

	.smartgo-blocksy .ct-header-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}


	.sgb-support__inner {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.sgb-support .wp-block-button__link,
	.sgb-support .button {
		width: 100%;
	}

	.sgb-site-footer__main,
	.sgb-site-footer__bottom {
		width: min(100% - 28px, var(--sgb-width));
	}

	.sgb-site-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: 34px 22px;
		padding: 42px 0 34px;
	}

	.sgb-site-footer__brand {
		grid-column: 1 / -1;
		max-width: 100%;
	}

	.sgb-site-footer__logo {
		display: flex;
		width: min(220px, 100%) !important;
		max-width: 100% !important;
		margin: 0 auto 18px;
		padding: 8px 10px;
	}

	.sgb-site-footer__logo img {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 60px !important;
		object-fit: contain;
		object-position: center;
	}

	.sgb-site-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		padding: 18px 0 24px;
	}
}

@media (max-width: 420px) {
	.sgb-topbar__item {
		gap: 5px;
		font-size: 10px;
	}

	.sgb-topbar__item svg {
		width: 16px;
		height: 16px;
		flex-basis: 16px;
	}

	.sgb-site-footer__main {
		grid-template-columns: 1fr;
	}

	.sgb-site-footer__brand {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}