/* Godobrt theme — tokens taken from the Figma "Design System" page */

:root {
	--max-width: 1440px;
	--page-px: 96px;

	--c-bg-screen: #f5f7f5;
	--c-bg-card: #ffffff;
	--c-bg-subtle: #f5f7f5;
	--c-border: #e0e5e0;
	--c-text-primary: #212621;
	--c-text-secondary: #596159;
	--c-text-placeholder: #a6ada6;
	--c-text-inverse: #f5f7f5;
	--c-brand-dark: #1a4d1c;
	--c-action-primary: #212621;
	--c-feedback-error: #cc2929;
	--c-radio-selected: #2e7d33;

	--r-sm: 6px;
	--r-md: 12px;

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--c-bg-screen);
	color: var(--c-text-primary);
	font-family: var(--font-sans);
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: inherit;
}

.godobrt-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Icons: single-colour SVGs applied as CSS masks so the same asset can be
   recoloured per context (e.g. the cart icon is dark in the header but
   light on the black "Add to cart" button) without needing two exports. */

.godobrt-icon {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.godobrt-icon--search { width: 15px; height: 15px; -webkit-mask-image: url('../icons/search.svg'); mask-image: url('../icons/search.svg'); }
.godobrt-icon--filter { width: 22px; height: 20px; -webkit-mask-image: url('../icons/filter.svg'); mask-image: url('../icons/filter.svg'); }
.godobrt-icon--cart   { width: 22px; height: 22px; -webkit-mask-image: url('../icons/cart.svg'); mask-image: url('../icons/cart.svg'); }
.godobrt-icon--trash  { width: 15px; height: 16px; -webkit-mask-image: url('../icons/trash.svg'); mask-image: url('../icons/trash.svg'); }
.godobrt-icon--minus  { width: 12px; height: 2px; -webkit-mask-image: url('../icons/minus.svg'); mask-image: url('../icons/minus.svg'); }
.godobrt-icon--plus   { width: 12px; height: 12px; -webkit-mask-image: url('../icons/plus.svg'); mask-image: url('../icons/plus.svg'); }

.godobrt-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--c-text-primary);
	padding: 4px;
	border-radius: 8px;
	width: 32px;
	height: 32px;
}

.godobrt-icon-btn:hover {
	background: var(--c-bg-subtle);
}

/* Buttons */

.godobrt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 12px 16px;
	border-radius: var(--r-md);
	border: none;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	cursor: pointer;
}

.godobrt-btn--filled {
	background: var(--c-action-primary);
	color: var(--c-text-inverse);
}

.godobrt-btn--filled:hover {
	opacity: 0.92;
}

/* Header */

.site-header {
	background: var(--c-bg-card);
}

.site-header__bar {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 16px 48px;
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-header__logo {
	font-size: 22px;
	line-height: 21px;
	white-space: nowrap;
	color: var(--c-text-primary);
}

.site-header__search-row {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.site-header__search {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--c-bg-subtle);
	border-radius: var(--r-md);
	padding: 12px 14px;
}

.site-header__search-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	background-color: var(--c-text-placeholder);
	-webkit-mask: url('../icons/search.svg') no-repeat center / contain;
	mask: url('../icons/search.svg') no-repeat center / contain;
}

.site-header__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	line-height: 21px;
	color: var(--c-text-primary);
}

.site-header__search-input::placeholder {
	color: var(--c-text-placeholder);
}

.site-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 8px;
	border-radius: var(--r-md);
	border: none;
	background: none;
	cursor: pointer;
	color: var(--c-text-primary);
	flex-shrink: 0;
}

.site-header__icon-btn:hover {
	background: var(--c-bg-subtle);
}

.site-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__cart {
	position: relative;
	display: inline-flex;
	width: 56px;
	height: 48px;
}

.godobrt-cart-count {
	position: absolute;
	top: 2px;
	left: 32px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 100px;
	background: var(--c-feedback-error);
	color: var(--c-text-inverse);
	font-size: 11px;
	line-height: 15px;
	text-align: center;
}

.site-header__divider {
	height: 1px;
	background: var(--c-border);
}

.site-header__filter-panel {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 16px 48px;
	border-bottom: 1px solid var(--c-border);
}

.site-header__filter-panel[hidden] {
	display: none;
}

/* Page title row (shop / cart / checkout) */

.godobrt-title-row,
.woocommerce-cart .godobrt-title-row,
.godobrt-page-title-row {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 32px var(--page-px) 0;
}

.godobrt-title-row__heading,
.godobrt-page-title-row__heading {
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--c-text-primary);
}

.godobrt-title-row__count {
	font-size: 15px;
	line-height: 21px;
	color: var(--c-text-secondary);
	margin: 0;
}

/* Shop / product grid */

ul.products {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 48px var(--page-px);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
}

li.product.godobrt-product-card {
	/* WooCommerce's own woocommerce-layout.css ships a higher-specificity
	   float-grid rule (.woocommerce ul.products li.product { width:22.05%;
	   float:left; margin:... }) for the classic shortcode grid — override
	   it so this theme's CSS Grid on ul.products actually sizes the cards. */
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: var(--c-bg-card);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.godobrt-product-card__image {
	display: block;
	background: var(--c-bg-subtle);
	width: 100%;
	aspect-ratio: 240 / 200;
}

.godobrt-product-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.godobrt-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
}

.godobrt-product-card__title {
	font-size: 15px;
	line-height: 21px;
	font-weight: 500;
	color: var(--c-text-primary);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.godobrt-product-card__price {
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	color: var(--c-text-primary);
}

/* !important throughout: WooCommerce's own woocommerce.css ships
   ".woocommerce ul.products li.product .button { display: inline-block; }"
   at higher specificity (0,4,2) than a plain "__body .button" selector
   can reach, so plain overrides silently lose here. */
.godobrt-product-card__body .add_to_cart_button,
.godobrt-product-card__body a.button,
.godobrt-product-card__body .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	height: 48px !important;
	padding: 12px 16px !important;
	border-radius: var(--r-md) !important;
	background: var(--c-action-primary) !important;
	color: var(--c-text-inverse) !important;
	font-size: 16px !important;
	line-height: 22px !important;
	font-weight: 600 !important;
	border: none !important;
}

.godobrt-product-card__body .button::before {
	content: '';
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url('../icons/cart.svg') no-repeat center / contain;
	mask: url('../icons/cart.svg') no-repeat center / contain;
}

.godobrt-product-card__body .added_to_cart {
	display: block;
	text-align: center;
	font-size: 13px;
	color: var(--c-text-secondary);
}

@media (max-width: 1100px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 32px 24px;
	}

	.godobrt-title-row {
		padding: 24px 24px 0;
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr;
	}
}

/* Cart & Checkout — these pages use WooCommerce's Cart/Checkout *blocks*
   (Store API + client-side React), not the classic template files, so the
   theme can't control their markup — only restyle the class names the
   blocks themselves render. Both blocks already use a similar two-column
   layout (main content + sidebar) to the Figma design, so this mostly
   adjusts spacing, color, radius and typography onto the existing
   structure rather than rebuilding it. */

.wc-block-cart,
.wc-block-checkout {
	max-width: var(--max-width);
	margin: 0 auto !important;
	padding: 32px var(--page-px) 48px !important;
	font-family: var(--font-sans);
}

.wc-block-cart__main,
.wc-block-checkout__main {
	gap: 40px !important;
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	width: 360px !important;
}

/* Cart item rows.
   !important throughout this section: WooCommerce's own cart.css/
   checkout.css ship resets targeting the same classes with a type selector
   added (e.g. "table.wc-block-cart-items"), which edges out a plain class
   selector on specificity alone even though it comes later in the
   cascade — confirmed by inspecting the actual computed styles/matching
   rules in the browser rather than assuming load order would settle it. */

.wc-block-cart-items {
	background: var(--c-bg-card) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	padding: 0 24px !important;
	border-collapse: separate !important;
}

.wc-block-cart-items__header {
	display: none;
}

.wc-block-cart-items__row {
	padding: 20px 0 !important;
	border-color: var(--c-border) !important;
	align-items: center !important;
}

.wc-block-cart-item__image img {
	width: 88px !important;
	height: 88px !important;
	object-fit: cover;
	border-radius: var(--r-sm) !important;
	background: var(--c-bg-subtle);
}

.wc-block-components-product-name {
	color: var(--c-text-primary) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}

.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--c-text-primary) !important;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-sm) !important;
	box-shadow: none !important;
}

.wc-block-components-quantity-selector__input {
	color: var(--c-text-primary) !important;
	font-weight: 500 !important;
}

.wc-block-components-quantity-selector__button {
	color: var(--c-text-primary) !important;
}

.wc-block-cart-item__remove-link {
	color: var(--c-text-secondary) !important;
}

/* Order summary sidebar (cart + checkout).
   The card is the outer "order summary block" wrapper — NOT
   .wc-block-components-totals-wrapper, which (confirmed via the live DOM)
   wraps *each individual row* (coupon, subtotal, shipping, total…), so
   giving it a card look boxed every row separately instead of the sidebar
   as a whole. That class gets a divider treatment instead. */

.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--c-bg-card) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	padding: 24px !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wc-block-components-totals-wrapper {
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.wc-block-components-order-summary {
	border: none !important;
	background: none !important;
}

/* Figma's design doesn't show a coupon field on cart/checkout. */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	display: none !important;
}

.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--c-text-primary) !important;
	margin: 0 0 4px !important;
}

.wc-block-components-totals-item__label {
	color: var(--c-text-secondary) !important;
	font-size: 15px !important;
}

.wc-block-components-totals-item__value {
	color: var(--c-text-primary) !important;
	font-weight: 500 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
	font-size: 20px !important;
	font-weight: 600 !important;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--c-action-primary) !important;
	border-color: var(--c-action-primary) !important;
	border-radius: var(--r-md) !important;
	height: 48px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

/* Checkout form steps (contact / address / payment) */

.wc-block-components-checkout-step__container {
	background: var(--c-bg-card) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	padding: 24px !important;
}

.wc-block-components-checkout-step__title {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--c-text-primary) !important;
}

.wc-block-components-checkout-step__heading-content .wc-block-components-checkout-step__description {
	display: none;
}

.wc-block-components-text-input input,
.wc-block-components-select-input,
.wc-block-components-address-form .wc-block-components-text-input input {
	border: 1.5px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	height: 48px !important;
}

.wc-block-components-text-input label {
	color: var(--c-text-secondary) !important;
}

/* Payment method radios */

.wc-block-components-radio-control__option {
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	padding: 14px 16px !important;
}

.wc-block-components-radio-control__input {
	accent-color: var(--c-radio-selected);
	width: 24px;
	height: 24px;
}

.wc-block-components-radio-control__label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--c-text-primary) !important;
}

@media (max-width: 960px) {
	.wc-block-cart__main,
	.wc-block-cart__sidebar,
	.wc-block-checkout__main,
	.wc-block-checkout__sidebar {
		width: 100% !important;
	}
}

/* Footer */

.site-footer {
	background: var(--c-brand-dark);
	padding: 48px;
}

.site-footer__columns {
	max-width: calc(var(--max-width) - 96px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 80px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__col--contact {
	gap: 8px;
}

.site-footer__heading {
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	color: var(--c-text-inverse);
	margin: 0;
	text-transform: none;
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__col a,
.site-footer__contact-line {
	font-size: 14px;
	line-height: 20px;
	color: var(--c-text-inverse);
	margin: 0;
}

.site-footer__copy {
	max-width: calc(var(--max-width) - 96px);
	margin: 32px auto 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--c-text-inverse);
}

@media (max-width: 780px) {
	.site-footer {
		padding: 32px 24px;
	}

	.site-footer__columns {
		gap: 32px;
	}
}

/* Generic page container fallback (non-WooCommerce pages) */

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--page-px);
}

.site-main {
	display: block;
}

.post-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 48px 0;
}