/*
Theme Name: Sunboxdev Storefront
Theme URI: https://sunboxdev.com/
Author: Sunboxdev
Author URI: https://sunboxdev.com/
Description: A modern block-first WooCommerce starter theme.
Version: 0.3.4
Requires at least: 6.9
Requires PHP: 8.3
Text Domain: sunboxdev-storefront
License: GNU General Public License v2 or later
*/

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

html { scroll-behavior: smooth; }
body { text-wrap: pretty; }
img { height: auto; }

.wp-site-blocks { min-height: 100vh; }
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--40); }

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

/* Starter commerce presentation */
:root {
	--sbx-ink: #18211f;
	--sbx-paper: #f7f3ed;
	--sbx-white: #fffdf9;
	--sbx-terra: #ba5337;
	--sbx-line: #d9d2c8;
}

body { background: var(--sbx-white); color: var(--sbx-ink); }
a { text-decoration: none; }
.sbx-site-header { height: 78px; background: var(--sbx-white); border-bottom: 1px solid rgba(0,0,0,.05); position: relative; z-index: 30; }
.sbx-header-inner { height: 78px; display: grid !important; grid-template-columns: 1fr auto 42px 42px; gap: 6px; align-items: center; padding: 0 !important; }
.sbx-brand { display: flex; align-items: center; gap: 10px; width: max-content; color: var(--sbx-ink); font-size: 14px; font-weight: 800; letter-spacing: .18em; text-decoration: none; }
.sbx-brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid currentColor; border-radius: 50%; font: 400 17px Georgia,serif; letter-spacing: 0; }
.sbx-primary-nav { font-size: 13px; }
.sbx-primary-nav .wp-block-navigation-item__content { color: var(--sbx-ink); padding-bottom: 4px; border-bottom: 1px solid transparent; text-decoration: none; }
.sbx-primary-nav .wp-block-navigation-item__content:hover { border-color: currentColor; }
.sbx-header-inner .wp-block-woocommerce-customer-account { width: 42px; height: 42px; display: grid; place-items: center; }
.sbx-header-inner .wp-block-woocommerce-customer-account .wc-block-customer-account__link {
	display: grid;
	place-items: center;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	color: var(--sbx-ink);
}
.sbx-header-inner .wc-block-customer-account__account-icon { width: 23px; height: 23px; }
.sbx-header-inner .wc-block-mini-cart { margin: 0 !important; }
.sbx-header-inner .wc-block-mini-cart__button { padding: 0 !important; width: 42px; height: 42px; }
.sbx-header-inner .wc-block-mini-cart__icon { width: 23px; height: 23px; }

.sbx-announcement {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sbx-hero {
	min-height: min(720px, calc(100vh - 110px));
}

.sbx-hero .wp-block-cover__background {
	background: linear-gradient(90deg, rgba(21, 23, 20, 0.78), rgba(21, 23, 20, 0.2) 60%, transparent) !important;
}

.sbx-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sbx-display {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(3rem, 6vw, 5.6rem);
	font-weight: 400;
	letter-spacing: -0.05em;
	line-height: 0.98;
}

.sbx-hero .wp-block-cover__inner-container { padding-left: clamp(24px, 8vw, 120px); }
.sbx-hero .wp-block-button__link { border-radius: 0; padding: 16px 20px; font-size: 12px; }
.wp-block-woocommerce-product-collection { margin-top: 45px; }
.wc-block-product-template { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: clamp(12px,2vw,26px) !important; }
.wc-block-product-template .wc-block-product { position: relative; }
.wc-block-components-product-image { aspect-ratio: .78; overflow: hidden; background: var(--sbx-paper); }
.wc-block-components-product-image img { width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.55); transition: transform .5s; }
.wc-block-product:nth-child(1) .wc-block-components-product-image img { object-position: 88% 75%; }
.wc-block-product:nth-child(2) .wc-block-components-product-image img { object-position: 53% 66%; }
.wc-block-product:nth-child(3) .wc-block-components-product-image img { object-position: 78% 48%; }
.wc-block-product:nth-child(4) .wc-block-components-product-image img { object-position: 62% 50%; }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.62); }
.wc-block-product .wp-block-post-terms { margin-top: 15px; font-size: 9px !important; letter-spacing: .12em; text-transform: uppercase; }
.wc-block-product .wp-block-post-title { margin: 5px 0; font: 400 18px Georgia,serif; }
.wc-block-product .wp-block-post-title a { color: var(--sbx-ink); text-decoration: none; }
.wc-block-product .wp-block-woocommerce-product-price { font-size: 13px !important; }
.wc-block-product .wp-block-woocommerce-product-button { margin-top: 10px; }
.wc-block-product .wp-block-button__link { width: 100%; border-radius: 0; background: var(--sbx-ink); font-size: 11px; }

.sbx-benefit {
	border-right: 1px solid var(--sbx-line);
}

.sbx-card-image {
	min-height: clamp(260px, 34vw, 500px);
	overflow: hidden;
}

.sbx-card-image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.sbx-product-card:hover .sbx-card-image img {
	transform: scale(1.04);
}

.sbx-story-image img {
	min-height: 620px;
	object-fit: cover;
	object-position: 70% center;
}

.sbx-footer { margin-top: 0; padding: 30px 0; background: var(--sbx-white); color: #6f736f; font-size: 10px; }
.sbx-footer .alignwide { gap: 20px; }
.sbx-footer a { color: inherit; text-decoration: none; }
.sbx-footer strong { color: var(--sbx-ink); }

@media (max-width: 781px) {
	.sbx-header-inner { grid-template-columns: 1fr 42px 42px; }
	.sbx-primary-nav { order: 3; }
	.sbx-header-inner .wp-block-woocommerce-customer-account { display: none; }
	.sbx-benefit { border-right: 0; border-bottom: 1px solid var(--sbx-line); }
	.sbx-story-image img { min-height: 420px; }
	.sbx-footer .alignwide { flex-direction: column; text-align: center; }
	.wc-block-product-template { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 480px) {
	.wc-block-product-template { gap: 10px !important; }
	.wc-block-product .wp-block-post-title { font-size: 15px; }
}