/*
Theme Name: Studio Balans
Description: Shop on sklep.studiobalans-niepolomice.pl (WooCommerce block templates) in the look of the site: the site's own header and footer (studio-balans-shop/site-chrome.php), a black shop bar, near-white page, Clash Display + Jost, black buttons, gold accent. The site's tokens (--sem-*) come with the chrome CSS. Content pages of the CMS are not rendered here (studio-balans-headless redirects them to the site). Source: repo `wordpress/themes/studio-balans`.
Version: 0.2.0
Requires at least: 6.9
Requires PHP: 8.3
Text Domain: studio-balans
*/

/* Type scale of the site (docs/DESIGN_SYSTEM.md): LG >= 1200, MD 768-1199, SM < 768; no clamp(). */
:root { --sb-h1: 58px; --sb-h2: 50px; --sb-gutter: 24px; }
@media (max-width: 1199px) { :root { --sb-h1: 48px; --sb-h2: 42px; } }
@media (max-width: 767px) {
	:root { --sb-h1: 42px; --sb-h2: 36px; --sb-gutter: 20px; }
	body { --wp--style--root--padding-left: 20px; --wp--style--root--padding-right: 20px; }
	/* iOS Safari zooms into form fields with text below 16px. */
	input, select, textarea { font-size: 16px !important; }
}
h1, h1.wp-block-post-title { font-size: var(--sb-h1) !important; letter-spacing: -0.01em; }
.sb-section-title { margin: 0 0 32px; font-size: var(--sb-h2) !important; letter-spacing: -0.01em; }

::selection { background: color-mix(in srgb, var(--sem-color-accent-primary-500, #c8a96a) 35%, transparent); }

/* ---- Site header (shared with the site) + the black shop bar: one sticky block, one shadow. ---- */
.sb-site-chrome {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	box-shadow: var(--sem-elevation-header);
}

.sb-shop-bar {
	border-top: 1px solid var(--sem-color-dark-zone-border, rgba(245, 245, 245, 0.14));
	background: var(--sem-color-dark-zone-bg, #0a0a0a);
	color: var(--sem-color-dark-zone-text, #f5f5f5);
	font-family: var(--font-body);
}
.sb-shop-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1200px;
	min-height: 52px;
	margin: 0 auto;
	padding: 0 var(--sb-gutter);
}
.sb-shop-bar__links {
	display: flex;
	gap: 4px;
	margin: 0 0 0 -12px;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}
.sb-shop-bar__links::-webkit-scrollbar { display: none; }
.sb-shop-bar__links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	color: var(--sem-color-dark-zone-text-default, #dcdcdc);
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 160ms ease-out;
}
.sb-shop-bar__links a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	background: var(--sem-color-link-underline, #c8a96a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sb-shop-bar__links a:hover,
.sb-shop-bar__links a[aria-current="page"] { color: var(--sem-color-dark-zone-text, #f5f5f5); }
.sb-shop-bar__links a:hover::after,
.sb-shop-bar__links a:focus-visible::after,
.sb-shop-bar__links a[aria-current="page"]::after { transform: scaleX(1); }

.sb-shop-bar__actions { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }

/* Search: a real field, Enter searches the products. */
.sb-shop-search { position: relative; display: flex; align-items: center; margin-right: 8px; }
.sb-shop-search input[type="search"] {
	box-sizing: border-box;
	width: 240px;
	height: 36px;
	padding: 0 40px 0 14px;
	border: 1px solid var(--sem-color-dark-zone-border, rgba(245, 245, 245, 0.14));
	border-radius: var(--radius-pill, 999px);
	background: var(--sem-color-dark-zone-surface, #171717);
	color: var(--sem-color-dark-zone-text, #f5f5f5);
	font-family: var(--font-body);
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 160ms ease-out;
}
.sb-shop-search input[type="search"]::placeholder { color: var(--sem-color-dark-zone-text-muted, #9e9e9e); }
.sb-shop-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.sb-shop-search input[type="search"]:hover { border-color: color-mix(in srgb, #f5f5f5 32%, transparent); }
.sb-shop-search input[type="search"]:focus { outline: none; border-color: var(--sem-color-dark-zone-gold, #c8a96a); }
.sb-shop-search button {
	position: absolute;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sem-color-dark-zone-text-default, #dcdcdc);
	cursor: pointer;
}
.sb-shop-search button:hover { color: var(--sem-color-dark-zone-gold, #c8a96a); }


/* Account and cart: light icons on the black bar, gold on hover. */
.sb-shop-bar .wc-block-customer-account a,
.sb-shop-bar .wc-block-mini-cart__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md, 4px);
	background: transparent;
	color: var(--sem-color-dark-zone-text, #f5f5f5);
	transition: color 160ms ease-out;
}
.sb-shop-bar .wc-block-customer-account a:hover,
.sb-shop-bar .wc-block-mini-cart__button:hover { background: transparent; color: var(--sem-color-dark-zone-gold, #c8a96a); }
.sb-shop-bar .wc-block-customer-account svg,
.sb-shop-bar .wc-block-mini-cart__icon { width: 22px; height: 22px; }
.sb-shop-bar .wc-block-mini-cart__quantity-badge { position: relative; display: inline-flex; }
/* Cart count: a gold disc on the icon's corner (the block sets inline colours, hence !important). */
.sb-shop-bar .wc-block-mini-cart__badge {
	top: -4px !important;
	right: -7px !important;
	left: auto !important;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border: 2px solid var(--sem-color-dark-zone-bg, #0a0a0a) !important;
	border-radius: 999px !important;
	background: var(--sem-color-dark-zone-gold, #c8a96a) !important;
	color: var(--sem-color-dark-zone-bg, #0a0a0a) !important;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	transform: none !important;
	box-sizing: content-box;
}
/*
 * Paused orders (mu-plugin studio-balans-shop/sales-pause.php): a full-width warning band under the shop bar
 * (sticks with the header) and under the checkout's own header (sticks alone). Text aligned with the shop bar.
 */
.sb-sales-paused {
	border-bottom: 1px solid var(--sem-color-feedback-warning, #b45f06);
	background: var(--sem-color-feedback-warning-bg, #fff1df);
	color: var(--sem-color-feedback-warning, #b45f06);
}
.sb-sales-paused--sticky { position: sticky; top: 0; z-index: 20; }
/* Flush under the checkout header (no block gap between the template blocks). */
.wp-site-blocks > .sb-sales-paused,
.wp-site-blocks > .sb-sales-paused + * { margin-block-start: 0; }
.sb-sales-paused__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px var(--sb-gutter);
}
.sb-sales-paused--sticky .sb-sales-paused__inner { max-width: 1360px; }
.sb-sales-paused__icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.sb-sales-paused__text {
	margin: 0;
	color: var(--sem-color-text-strong, #171717);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--sem-type-weight-medium, 500);
	line-height: 1.45;
	text-wrap: pretty;
}
.sb-sales-paused__text strong { font-weight: 700; }
@media (max-width: 767px) {
	.sb-sales-paused__inner { gap: 10px; padding: 10px var(--sb-gutter); }
	.sb-sales-paused__icon { width: 20px; height: 20px; }
	.sb-sales-paused__text { font-size: 14px; line-height: 1.4; }
	/* The band sticks: on a phone it stays at the title and the date. */
	.sb-sales-paused__more { display: none; }
}
/* Cart drawer: the slide uses these; WooCommerce sets them in the mini-cart stylesheet, which a cart
   rendered outside the block templates does not load. */
:root { --drawer-width: 420px; --neg-drawer-width: calc(var(--drawer-width) * -1); }
@media (max-width: 480px) { :root { --drawer-width: 100vw; } }
.wc-block-mini-cart__drawer { font-family: var(--font-body); }
.wc-block-mini-cart__drawer .wc-block-components-product-metadata { display: none; }
.wc-block-mini-cart__drawer .wc-block-components-product-name { color: var(--sem-color-text-strong); font-size: 14px; text-decoration: none; }
/* Packshot thumbnails (drawer, cart, checkout summary) on the soft grey, like the product cards. */
.wc-block-cart-item__image a,
.wc-block-components-order-summary-item__image { display: block; overflow: hidden; border-radius: 6px; background: var(--sem-color-surface-soft); }
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img { display: block; mix-blend-mode: multiply; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-family: var(--font-heading); font-size: 24px; }

@media (max-width: 1023px) { .sb-shop-search input[type="search"] { width: 180px; } }
@media (max-width: 767px) {
	.sb-shop-bar__inner { flex-wrap: wrap; gap: 0 8px; padding: 0 8px 8px 20px; }
	.sb-shop-bar__links { order: 1; flex: 1 1 auto; min-width: 0; }
	.sb-shop-bar__actions { display: contents; }
	.sb-shop-bar__actions > * { order: 2; }
	.sb-shop-search { order: 3; flex: 1 0 100%; margin: 0 12px 0 0; }
	.sb-shop-search input[type="search"] { width: 100%; height: 40px; }
	.sb-shop-bar__links a { padding: 0 10px; font-size: 14px; }
}

/* ---- Checkout: a short black header with the logo and the way back to the cart. ---- */
.sb-header__bar { gap: 24px; }
.sb-header__logo { display: inline-flex; flex-shrink: 0; }
.sb-header__logo img { display: block; width: 168px; height: auto; }
.sb-header a { text-decoration: none; }
.sb-header__back { font-size: 14px; }
.sb-header__back:hover { color: var(--wp--preset--color--gold-500) !important; }
@media (max-width: 767px) { .sb-header__logo img { width: 128px; } }

/* ---- Breadcrumbs, listing head ---- */
.woocommerce-breadcrumb { color: var(--sem-color-text-muted); font-size: 14px !important; }
.woocommerce-breadcrumb a { color: var(--sem-color-text-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--sem-color-text-strong); }
/* The shop is the first breadcrumb: on the shop page itself it would only repeat the title. */
.woocommerce-shop .woocommerce-breadcrumb,
.post-type-archive-product .woocommerce-breadcrumb { display: none !important; }
.wc-block-product-results-count,
.woocommerce-result-count { color: var(--sem-color-text-muted); font-size: 14px !important; }

@media (prefers-reduced-motion: reduce) {
	.sb-shop-bar__links a::after { transition: none; }
}

/* Empty cart (pattern studio-balans/cart-empty): one sentence, one button, then new arrivals. */
.sb-cart-empty { display: grid; justify-items: center; gap: 0; padding: 40px 0 0; text-align: center; }
.sb-cart-empty__title { margin: 0 0 12px; font-size: var(--sb-h2) !important; letter-spacing: -0.01em; }
.sb-cart-empty__lead { max-width: 44ch; margin: 0 0 28px; color: var(--sem-color-text-muted); font-size: 17px; line-height: 1.6; }
.sb-cart-empty__new { margin-top: 96px; }
@media (max-width: 767px) { .sb-cart-empty__new { margin-top: 64px; } }