/*
Theme Name: Stadin Opaste
Theme URI: https://stadinopaste.com
Description: Stadin Opasteen Blocksy-lapsiteema.
Author: Stadin Opaste
Template: blocksy
Version: 1.7.0
Text Domain: stadin-opaste
*/

:root {
	--so-navy: #102a43;
	--so-navy-deep: #081d30;
	--so-blue: #1598bd;
	--so-frost: #dce5e8;
	--so-light: #f2f6f7;
	--so-ink: #17232c;
	--so-muted: #60717c;
	--so-line: #d5dfe3;
}

body {
	color: var(--so-ink);
}

h1, h2, h3, h4 {
	color: var(--so-navy);
	letter-spacing: -.035em;
}

.so-eyebrow {
	margin: 0 0 12px;
	color: var(--so-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.so-button,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 3px;
	background: var(--so-navy) !important;
	color: #fff !important;
	font-weight: 800;
	text-decoration: none;
}

.so-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--so-navy-deep) !important;
}

.so-button-outline {
	border: 1px solid var(--so-navy);
	background: transparent !important;
	color: var(--so-navy) !important;
}

.so-brand {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	color: var(--so-navy);
	text-decoration: none;
}

.so-brand svg {
	width: 54px;
	height: 40px;
	color: var(--so-navy);
	fill: var(--so-frost);
	stroke: currentColor;
	stroke-width: 2;
}

.so-brand-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.so-brand-copy strong {
	font-size: 18px;
	letter-spacing: -.04em;
}

.so-brand-copy small {
	margin-top: 4px;
	color: var(--so-muted);
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.so-home {
	margin-top: calc(var(--content-vertical-spacing, 60px) * -1);
}

.so-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 650px;
	background: var(--so-light);
}

.so-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px max(30px, calc((100vw - 1240px) / 2));
	padding-right: 8vw;
}

.so-hero h1 {
	max-width: 650px;
	margin: 0;
	font-size: clamp(48px, 6vw, 82px);
	line-height: 1.05;
}

.so-hero-lead {
	max-width: 600px;
	margin: 25px 0 30px;
	color: #465965;
	font-size: 18px;
}

.so-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.so-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 50px;
	padding-top: 22px;
	border-top: 1px solid var(--so-line);
}

.so-facts strong,
.so-facts span {
	display: block;
}

.so-facts strong {
	color: var(--so-navy);
}

.so-facts span {
	color: var(--so-muted);
	font-size: 10px;
}

.so-hero-visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 540px;
	padding: 70px;
	background: var(--so-navy);
}

.so-hero-photo {
	padding: 0;
	overflow: hidden;
}

.so-hero-photo:after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(180deg, transparent 55%, rgba(8,29,48,.46));
	pointer-events: none;
}

.so-hero-photo img {
	width: 100%;
	height: 100%;
	min-height: 650px;
	object-fit: cover;
	object-position: center;
}

.so-photo-label {
	position: absolute;
	z-index: 1;
	right: 30px;
	bottom: 25px;
	display: flex;
	gap: 10px;
	align-items: center;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.so-photo-label span {
	width: 34px;
	border-top: 2px solid var(--so-blue);
}

.so-glass {
	position: relative;
	width: min(100%, 600px);
	aspect-ratio: 1;
	border: 9px solid rgba(255,255,255,.78);
	background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(220,229,232,.03));
}

.so-glass:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	content: "";
	border-left: 2px solid rgba(255,255,255,.5);
}

.so-glass:after {
	position: absolute;
	top: 48%;
	right: -5%;
	left: -5%;
	height: 44px;
	content: "";
	background:
		radial-gradient(circle, rgba(255,255,255,.88) 0 19px, transparent 20px)
		0 0 / calc(100% / 7) 44px repeat-x;
}

.so-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1240px;
	margin: 0 auto;
	border: 1px solid var(--so-line);
	border-top: 0;
}

.so-trust div {
	display: flex;
	gap: 15px;
	align-items: center;
	min-height: 90px;
	padding: 20px;
	border-right: 1px solid var(--so-line);
	color: var(--so-navy);
	font-size: 12px;
	font-weight: 800;
}

.so-trust div:last-child {
	border: 0;
}

.so-trust span {
	color: var(--so-blue);
	font-size: 10px;
}

.so-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 105px 20px;
}

.so-section-heading {
	display: grid;
	grid-template-columns: 1.4fr .8fr;
	gap: 70px;
	align-items: end;
	margin-bottom: 45px;
}

.so-section-heading h2,
.so-service h2 {
	margin: 0;
	font-size: clamp(35px, 4vw, 54px);
}

.so-section-heading > p {
	margin: 0;
	color: var(--so-muted);
	font-size: 14px;
}

.so-products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.so-products ul.products:before,
.so-products ul.products:after {
	display: none !important;
}

.so-products ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding-bottom: 22px;
	border: 1px solid var(--so-line);
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
}

.so-products ul.products li.product img {
	margin: 0 0 20px !important;
	background: var(--so-light);
}

.so-products ul.products li.product .ct-media-container,
.archive.woocommerce ul.products li.product .ct-media-container,
.related.products ul.products li.product .ct-media-container {
	aspect-ratio: 2 / 1 !important;
	min-height: 0 !important;
	background: var(--so-light);
}

.so-products ul.products li.product .ct-media-container img,
.archive.woocommerce ul.products li.product .ct-media-container img,
.related.products ul.products li.product .ct-media-container img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center !important;
}

.so-products ul.products li.product h2,
.so-products ul.products li.product .price,
.so-products ul.products li.product .button {
	margin-right: 20px !important;
	margin-left: 20px !important;
}

.so-products ul.products li.product h2 {
	font-size: 18px !important;
}

.so-products ul.products li.product .price {
	color: var(--so-navy) !important;
	font-weight: 800 !important;
}

.so-products ul.products li.product .meta-categories,
.archive.woocommerce ul.products li.product .meta-categories,
.single-product .product_meta .posted_in {
	display: none !important;
}

.so-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 90px;
	border-top: 1px solid var(--so-line);
}

.so-specs-copy p:not(.so-eyebrow) {
	color: var(--so-muted);
}

.so-spec-list {
	margin: 0;
	border-top: 2px solid var(--so-navy);
}

.so-spec-list div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--so-line);
}

.so-spec-list dt {
	color: var(--so-muted);
	font-size: 12px;
}

.so-spec-list dd {
	margin: 0;
	color: var(--so-navy);
	font-size: 12px;
	font-weight: 800;
	text-align: right;
}

.so-delivery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 40px;
	border: 1px solid var(--so-line);
}

.so-delivery article {
	padding: 28px;
	border-right: 1px solid var(--so-line);
}

.so-delivery article:last-child {
	border: 0;
}

.so-delivery span,
.so-delivery strong,
.so-delivery small {
	display: block;
}

.so-delivery span {
	color: var(--so-muted);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.so-delivery strong {
	margin: 7px 0;
	color: var(--so-navy);
	font-size: 40px;
}

.so-delivery small {
	color: var(--so-muted);
}

.so-service-wrap {
	background: var(--so-navy);
	color: #fff;
}

.so-service {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 100px 20px;
}

.so-service h2 {
	color: #fff;
}

.so-service p:not(.so-eyebrow) {
	color: #c0ccd3;
}

.so-service-card {
	padding: 35px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2);
}

.so-service-card h3 {
	color: #fff;
}

.so-service .so-button {
	background: var(--so-blue) !important;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout .col2-set {
	border-color: var(--so-line);
}

.woocommerce-checkout-review-order-table .shipping th {
	font-size: 0;
}

.woocommerce-checkout-review-order-table .shipping th:after {
	content: "Toimitus";
	font-size: 14px;
}

.woocommerce div.product .product_title,
.woocommerce-account h1,
.woocommerce-cart h1,
.woocommerce-checkout h1 {
	color: var(--so-navy);
}

.single-product .woocommerce-product-gallery .ct-media-container img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
}

.single-product .woocommerce-product-gallery .ct-media-container,
.single-product .woocommerce-product-gallery figure {
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	overflow: visible !important;
}

.so-product-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 22px 0;
	border: 1px solid var(--so-line);
	background: var(--so-line);
}

.so-product-search-copy {
	color: var(--so-muted);
	font-size: 12px;
}

.so-search-copy {
	padding-top: 35px;
	border-top: 1px solid var(--so-line);
}

.so-search-copy h2 {
	max-width: 800px;
}

.so-search-copy-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-top: 30px;
	color: var(--so-muted);
	font-size: 14px;
}

.so-product-facts div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	background: #fff;
}

.so-product-facts strong {
	color: var(--so-navy);
	font-size: 10px;
	text-transform: uppercase;
}

.so-product-facts span,
.so-price-suffix {
	color: var(--so-muted);
	font-size: 11px;
}

.so-contact-page {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 20px 110px;
}

.so-contact-hero {
	max-width: 760px;
	margin-bottom: 60px;
}

.so-contact-hero h1 {
	margin: 0 0 20px;
	font-size: clamp(52px, 7vw, 86px);
}

.so-contact-hero p:not(.so-eyebrow) {
	color: var(--so-muted);
	font-size: 18px;
}

.so-contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--so-line);
}

.so-contact-grid article {
	min-height: 280px;
	padding: 34px;
	border-right: 1px solid var(--so-line);
}

.so-contact-grid article:last-child {
	border: 0;
}

.so-contact-grid article > span {
	color: var(--so-blue);
	font-size: 11px;
	font-weight: 800;
}

.so-contact-grid h2 {
	margin: 38px 0 20px;
	font-size: 25px;
}

.so-contact-grid p,
.so-contact-grid a {
	color: var(--so-muted);
	font-size: 13px;
	text-decoration: none;
}

.so-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 35px;
}

.so-footer {
	background: var(--so-navy-deep);
	color: #fff;
}

.so-footer-inner {
	display: grid;
	grid-template-columns: 1.35fr repeat(4, 1fr);
	gap: 38px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 70px 20px;
}

.so-footer-inner > div:not(.so-footer-brand) {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.so-footer-inner strong {
	margin-bottom: 8px;
	font-size: 12px;
}

.so-footer-inner span,
.so-footer-inner a {
	color: #b8c6ce;
	font-size: 11px;
	text-decoration: none;
}

.so-footer-brand img {
	width: 260px;
	max-width: 100%;
}

.so-footer-bottom {
	display: flex;
	justify-content: space-between;
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 20px;
	border-top: 1px solid rgba(255,255,255,.14);
	color: #8fa3ae;
	font-size: 10px;
}

@media (max-width: 1000px) {
	.so-hero {
		grid-template-columns: 1fr;
	}
	.so-hero-copy {
		padding: 80px 30px;
	}
	.so-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.so-trust {
		grid-template-columns: repeat(2, 1fr);
		margin: 0 20px;
	}
	.so-footer-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	#header [data-device="mobile"] .site-branding,
	#header [data-device="mobile"] .site-logo-container {
		width: min(260px, calc(100vw - 90px)) !important;
		max-width: calc(100vw - 90px) !important;
	}
	#header [data-device="mobile"] .site-logo-container img {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
	}
	.so-hero-copy {
		padding: 60px 18px;
	}
	.so-hero h1 {
		font-size: 47px;
	}
	.so-hero-visual {
		min-height: 430px;
		padding: 45px 28px;
	}
	.so-facts span {
		display: none;
	}
	.so-trust,
	.so-products ul.products,
	.so-section-heading,
	.so-specs,
	.so-delivery,
	.so-service {
		grid-template-columns: 1fr;
	}
	.so-trust div,
	.so-delivery article {
		border-right: 0;
		border-bottom: 1px solid var(--so-line);
	}
	.so-section,
	.so-service {
		padding: 70px 16px;
	}
	.so-contact-grid,
	.so-footer-inner {
		grid-template-columns: 1fr;
	}
	.so-product-facts {
		grid-template-columns: 1fr;
	}
	.so-search-copy-grid {
		grid-template-columns: 1fr;
		gap: 5px;
	}
	.so-contact-grid article {
		min-height: auto;
		border-right: 0;
		border-bottom: 1px solid var(--so-line);
	}
	.so-footer-bottom {
		flex-direction: column;
		gap: 5px;
	}
}