:root {
	--color-primary: #1a1a1a;
	--color-accent: #b08d57;
	--color-background: #ffffff;
	--color-surface: #f5f5f3;
	--color-text: #1a1a1a;
	--container-width: 1200px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--color-text);
	background: var(--color-background);
	font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	line-height: 1.6;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 1rem;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

.quick-search {
	position: relative;
	display: flex;
	flex: 1;
	max-width: 360px;
}

.quick-search input[type="search"] {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px 0 0 4px;
}

.quick-search button {
	border: 1px solid var(--color-primary);
	background: var(--color-primary);
	color: #fff;
	border-radius: 0 4px 4px 0;
	padding: 0.5rem 1rem;
	cursor: pointer;
}

.quick-search__results {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	background: var(--color-background);
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-top: 0.25rem;
	max-height: 60vh;
	overflow-y: auto;
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-search__results ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.quick-search__results li a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	color: inherit;
}

.quick-search__results li a:hover {
	background: var(--color-surface);
}

.quick-search__results img {
	border-radius: 4px;
	flex-shrink: 0;
}

.quick-search__title {
	flex: 1;
}

.quick-search__price {
	color: var(--color-accent);
	font-size: 0.9em;
	white-space: nowrap;
}

.quick-search__empty {
	padding: 0.75rem;
	margin: 0;
	color: #888;
}

.search-results .page-title span {
	color: var(--color-accent);
}

.search-results__other {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.main-navigation ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Header has no hamburger/toggle JS, so on narrow screens it stacks into
   three rows instead: [logo ... cart] / [search, full width] / [nav, wrapped]
   — otherwise the fixed-width search box alone would overflow a phone
   screen, since the row has no wrap by default. */
@media (max-width: 782px) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	.site-branding {
		order: 1;
	}

	.site-header__actions {
		order: 2;
	}

	.quick-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
	}

	.main-navigation {
		order: 4;
		flex: 1 1 100%;
	}

	.main-navigation ul {
		flex-wrap: wrap;
		gap: 0.75rem 1.25rem;
	}
}

.site-content {
	padding-block: 2rem;
	min-height: 50vh;
}

.site-footer {
	background: var(--color-surface);
	margin-top: 3rem;
}

.site-footer__inner {
	padding-block: 2rem;
}

.footer-widgets {
	margin-bottom: 1.5rem;
}

.footer-widgets:empty {
	display: none;
}

.footer-widget-about h3 {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.footer-widget-about p {
	color: #666;
	margin: 0;
	max-width: 32rem;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid #e5e3df;
}

.footer-navigation a {
	color: inherit;
	text-decoration: none;
}

.footer-navigation a:hover {
	color: var(--color-accent);
}

.site-footer__copy {
	color: #888;
	font-size: 0.9rem;
	margin: 0;
}

.site-footer__domain-switch {
	margin: 0.5rem 0 0;
}

.site-footer__domain-switch a {
	color: var(--color-accent);
	font-size: 0.9rem;
}

/* Shop archive */
.shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2rem;
	align-items: start;
}

@media (max-width: 782px) {
	.shop-layout {
		grid-template-columns: 1fr;
	}
}

.shop-filters {
	background: var(--color-surface);
	border-radius: 8px;
	padding: 1.25rem;
}

.filter-group {
	margin-bottom: 1.5rem;
}

.filter-group h3 {
	font-size: 0.95rem;
	margin: 0 0 0.75rem;
}

.filter-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.filter-group a[aria-current="true"] {
	font-weight: bold;
	color: var(--color-accent);
}

.filter-group .count {
	color: #888;
	font-size: 0.85em;
}

.filter-group--price .filter-group__price-inputs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.filter-group--price input[type="number"] {
	width: 100%;
	padding: 0.4rem;
}

#saat-clear-filters,
.filter-group--price button {
	background: none;
	border: 1px solid var(--color-primary);
	border-radius: 4px;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
}

#saat-product-grid[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

.shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	gap: 1rem;
}

.products-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
}

.products-grid__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.products-grid__image img {
	width: 100%;
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-surface);
}

.products-grid__title {
	font-size: 1rem;
	margin: 0;
}

.products-grid__title a {
	color: inherit;
	text-decoration: none;
}

.products-grid__price {
	font-weight: bold;
	color: var(--color-accent);
}

.products-grid .button.add_to_cart_button {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	text-align: center;
}

.woocommerce-pagination ul {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

/* WooCommerce pages that aren't the shop archive (which builds its own
   .container via .shop-layout) get the same page-width treatment here. */
body.single-product main.site-main,
body.woocommerce-cart main.site-main,
body.woocommerce-checkout main.site-main,
body.woocommerce-account main.site-main {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 1rem;
}

/* Single product. Scoped to body.single-product: WordPress's get_post_class()
   puts a bare "product" class on every product post everywhere (including
   shop-grid cards), so an unscoped .product selector here would also hijack
   the shop archive's own (unrelated) flex card layout. */
body.single-product .product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

/* Same class of bug as the related-products grid below: WooCommerce's own
   stylesheet floats these two at width:48% for its classic layout (via a
   more specific selector than this, e.g. ".single-product div.product
   div.images"), and once this is a CSS grid that percentage resolves
   against the grid track and shrinks it — !important is the pragmatic way
   to reliably beat a third-party selector we don't control. */
body.single-product .product .images,
body.single-product .product .summary.entry-summary {
	width: auto !important;
	float: none !important;
}

@media (max-width: 782px) {
	body.single-product .product {
		grid-template-columns: 1fr;
	}
}

.onsale {
	position: absolute;
	top: 1rem;
	inset-inline-start: 1rem;
	z-index: 2;
	background: var(--color-accent);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1;
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
}

/* Covers both a real product image (.woocommerce-product-gallery__image)
   and WooCommerce's own placeholder markup for products with none yet
   (.woocommerce-product-gallery__image--placeholder) — same treatment either way. */
.woocommerce-product-gallery img {
	width: 100%;
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-surface);
}

.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.flex-control-thumbs li {
	width: 72px;
}

.flex-control-thumbs img {
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	border: 2px solid transparent;
}

.flex-control-thumbs img.flex-active {
	border-color: var(--color-accent);
}

.summary.entry-summary .product_title {
	font-size: 1.75rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.summary.entry-summary .price {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.summary .price del {
	font-size: 0.8em;
	font-weight: normal;
	opacity: 0.55;
	margin-inline-end: 0.5rem;
}

.summary .price ins {
	text-decoration: none;
}

.woocommerce-product-details__short-description {
	color: #444;
	margin-bottom: 1.5rem;
}

.summary form.cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.summary .quantity .qty,
.product-quantity .qty,
.quantity .qty {
	width: 4rem;
	padding: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: center;
}

/* !important: WooCommerce's own woocommerce-rtl.css styles every .button
   (via ".woocommerce a.button" etc., wrapped in a zero-specificity :where()
   but still ~2 classes effective) in its own purple brand color, which beats
   any single-class selector here on specificity alone. */
.single_add_to_cart_button {
	background: var(--color-primary) !important;
	color: #fff !important;
	border: none;
	border-radius: 4px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	cursor: pointer;
}

.single_add_to_cart_button:hover {
	background: var(--color-accent) !important;
}

.product_meta {
	font-size: 0.875rem;
	color: #777;
	border-top: 1px solid #eee;
	padding-top: 1rem;
}

.product_meta > span {
	display: block;
	margin-bottom: 0.25rem;
}

.product_meta a {
	color: var(--color-accent);
	text-decoration: none;
}

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 3rem;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid #eee;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	color: var(--color-primary);
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--color-accent);
	font-weight: bold;
	border-bottom-color: var(--color-accent);
}

.woocommerce-tabs .panel {
	max-width: 800px;
}

/* Related / upsell products reuse the shop grid's card look. */
.related.products,
.upsells.products {
	grid-column: 1 / -1;
	margin-top: 3rem;
}

.related.products > h2,
.upsells.products > h2 {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.related.products ul.products,
.upsells.products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
}

.related.products ul.products li.product,
.upsells.products ul.products li.product {
	/* Same !important reasoning as the .product .images/.summary reset above:
	   WooCommerce's own stylesheet sets a percentage width for its classic
	   float-based grid via a more specific selector than this one, so a plain
	   reset loses the cascade even though it's declared after. */
	width: auto !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.related.products .woocommerce-loop-product__link,
.upsells.products .woocommerce-loop-product__link {
	color: inherit;
	text-decoration: none;
}

.related.products img,
.upsells.products img {
	border-radius: 8px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-surface);
}

.related.products .woocommerce-loop-product__title,
.upsells.products .woocommerce-loop-product__title {
	font-size: 1rem;
	margin: 0;
}

.related.products .price,
.upsells.products .price {
	color: var(--color-accent);
	font-weight: bold;
}

.related.products .button,
.upsells.products .button {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	text-align: center;
}

/* Cart (classic [woocommerce_cart] template) */
.woocommerce-cart-form {
	margin-bottom: 2rem;
}

.woocommerce-cart-form table.shop_table,
.cart_totals table.shop_table,
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart-form th,
.woocommerce-cart-form td,
.cart_totals th,
.cart_totals td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 1rem 0.5rem;
	border-bottom: 1px solid #eee;
	text-align: start;
}

.woocommerce-cart-form thead th {
	font-size: 0.8rem;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
}

/* !important: WooCommerce's own woocommerce-rtl.css sets img width via
   ".woocommerce-cart table.cart img", which out-specifies this selector
   (two type selectors vs. our one). */
.product-thumbnail img {
	width: 72px !important;
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-surface);
}

.product-name a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	color: #c33 !important;
	text-decoration: none;
	font-size: 1.1rem;
}

.product-remove a.remove:hover {
	background: var(--color-surface);
}

.product-price,
.product-subtotal {
	color: var(--color-accent);
	font-weight: bold;
}

.coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.coupon input#coupon_code {
	padding: 0.5rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.coupon button,
.woocommerce-cart-form button[name="update_cart"] {
	background: none !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-primary);
	border-radius: 4px;
	padding: 0.5rem 1.25rem;
	cursor: pointer;
}

.woocommerce-cart-form button[name="update_cart"] {
	margin-top: 1rem;
}

.cart-collaterals {
	max-width: 420px;
	margin-inline-start: auto;
}

.cart_totals h2 {
	font-size: 1.1rem;
	margin: 0 0 1rem;
}

.cart_totals .order-total td,
.cart_totals .order-total th,
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
	border-bottom: none;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--color-accent);
}

.wc-proceed-to-checkout {
	margin-top: 1.5rem;
}

.checkout-button {
	display: block;
	text-align: center;
	background: var(--color-primary) !important;
	color: #fff !important;
	text-decoration: none;
	padding: 0.9rem;
	border-radius: 4px;
	font-weight: bold;
}

.checkout-button:hover {
	background: var(--color-accent) !important;
}

/* WooCommerce's generic notice wrapper (info/success/error) — covers the
   empty-cart message here plus coupon/order notices anywhere else on the
   site, so this is intentionally not scoped to the cart page. Verified
   markup is <div class="cart-empty woocommerce-info">, not the <p> the
   default WC stylesheet targets. WooCommerce also loads its own
   woocommerce-rtl.css, which sets a *physical* `border-top` (blue) plus an
   absolutely-positioned icon font glyph via ::before (also blue) — neither
   is touched by a border-inline-start override, since they're unrelated
   properties, so both had to be reset/recolored explicitly here. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 1.5rem;
	padding-block: 1rem;
	padding-inline-start: 3rem;
	padding-inline-end: 1.25rem;
	border-radius: 8px;
	background: var(--color-surface);
	border: none;
	border-inline-start: 3px solid var(--color-accent);
	font-size: 1rem;
	color: var(--color-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-accent) !important;
}

.woocommerce-error {
	border-inline-start-color: #c33;
}

.woocommerce-error::before {
	color: #c33 !important;
}

.woocommerce-cart a.button.wc-backward {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	padding: 0.6rem 1.25rem;
	border-radius: 4px;
}

.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-shipping-methods li {
	margin-bottom: 0.5rem;
}

/* Checkout (classic [woocommerce_checkout] shortcode — switched from the
   WooCommerce Blocks checkout to match the cart page's classic-template
   approach used throughout the theme, and to avoid the Blocks checkout's
   React/Store-API dependency on a project where the .ir domain has to keep
   working through international outages). */
.checkout.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	margin-bottom: 2rem;
}

@media (max-width: 782px) {
	.checkout.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
	}
}

.checkout.woocommerce-checkout h3 {
	font-size: 1.1rem;
	margin: 0 0 1rem;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

/* Shared with the My Account forms (login, register, edit-account,
   edit-address) below — they use the exact same .form-row/.input-text
   classes as checkout. */
.checkout.woocommerce-checkout .form-row,
body.woocommerce-account .form-row {
	width: 100%;
	margin-bottom: 1rem;
}

.checkout.woocommerce-checkout .form-row-first,
.checkout.woocommerce-checkout .form-row-last,
body.woocommerce-account .form-row-first,
body.woocommerce-account .form-row-last {
	width: calc(50% - 0.5rem);
}

@media (max-width: 782px) {
	.checkout.woocommerce-checkout .form-row-first,
	.checkout.woocommerce-checkout .form-row-last,
	body.woocommerce-account .form-row-first,
	body.woocommerce-account .form-row-last {
		width: 100%;
	}
}

.checkout.woocommerce-checkout .form-row label,
body.woocommerce-account .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	color: #555;
}

.checkout.woocommerce-checkout .form-row .input-text,
.checkout.woocommerce-checkout .form-row select,
.checkout.woocommerce-checkout .form-row textarea,
body.woocommerce-account .form-row .input-text,
body.woocommerce-account .form-row select,
body.woocommerce-account .form-row textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
}

.checkout.woocommerce-checkout .form-row .required,
body.woocommerce-account .form-row .required {
	color: #c33;
}

.woocommerce-account-fields,
.create-account {
	margin-top: 0.5rem;
}

/* Coupon toggle above the checkout form — same look as the cart page's
   always-visible coupon row. */
.checkout_coupon.woocommerce-form-coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.checkout_coupon.woocommerce-form-coupon .form-row {
	width: auto;
	margin-bottom: 0;
}

.checkout_coupon input#coupon_code {
	padding: 0.5rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.checkout_coupon button {
	background: none;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 4px;
	padding: 0.5rem 1.25rem;
	cursor: pointer;
}

.woocommerce-form-login.login {
	max-width: 460px;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: var(--color-surface);
	border-radius: 8px;
}

.woocommerce-form-login.login .form-row {
	margin-bottom: 1rem;
}

.woocommerce-form-login.login .input-text {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* My Account: logged-out login/register (customer_login) and logged-in
   dashboard (nav + content), both reusing the .form-row treatment above. */
.u-columns.col2-set#customer_login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
}

@media (max-width: 782px) {
	.u-columns.col2-set#customer_login {
		grid-template-columns: 1fr;
	}
}

#customer_login h2 {
	font-size: 1.1rem;
	margin: 0 0 1rem;
}

#customer_login form {
	background: var(--color-surface);
	border-radius: 8px;
	padding: 1.25rem;
}

.woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 2rem;
	align-items: start;
}

@media (max-width: 782px) {
	.woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
}

.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--color-surface);
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid #e5e3df;
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.85rem 1.1rem;
	color: inherit;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
	background: #eee9e2;
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-accent);
	font-weight: bold;
	background: #eee9e2;
}

.woocommerce-MyAccount-content fieldset {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border: 1px solid #e5e3df;
	border-radius: 8px;
}

.woocommerce-MyAccount-content legend {
	padding-inline: 0.5rem;
	font-weight: bold;
}

/* Same !important reasoning as .single_add_to_cart_button: WooCommerce's
   own stylesheet out-specifies a plain .button rule. */
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button {
	background: var(--color-primary) !important;
	color: #fff !important;
	border: none;
	border-radius: 4px;
	padding: 0.6rem 1.5rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce a.button:hover {
	background: var(--color-accent) !important;
}

#order_review_heading {
	font-size: 1.25rem;
	margin: 0 0 1rem;
}

#payment.woocommerce-checkout-payment {
	background: var(--color-surface);
	border-radius: 8px;
	padding: 1.25rem;
	margin-top: 1.5rem;
}

.wc_payment_methods.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc_payment_method {
	border-bottom: 1px solid #e5e3df;
	padding-block: 0.75rem;
}

.wc_payment_method:last-of-type {
	border-bottom: none;
}

.wc_payment_method label {
	font-weight: 500;
	cursor: pointer;
}

.wc_payment_method img {
	display: inline-block;
	height: 1.25em;
	margin-inline-start: 0.4rem;
	vertical-align: middle;
}

.wc_payment_method .payment_box {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--color-background);
	border-radius: 4px;
	font-size: 0.9rem;
	color: #666;
}

.place-order {
	margin-top: 1.5rem;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
	font-size: 0.85rem;
	color: #777;
}

/* Same !important reasoning as .single_add_to_cart_button: WooCommerce's
   own stylesheet out-specifies a plain .button rule. */
#place_order.button.alt {
	display: block;
	width: 100%;
	background: var(--color-primary) !important;
	color: #fff !important;
	border: none;
	border-radius: 4px;
	padding: 0.9rem;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
}

#place_order.button.alt:hover {
	background: var(--color-accent) !important;
}

/* Content pages: About, Contact, blog index, single post/article. */
.entry-header {
	margin-bottom: 1.5rem;
}

.entry-title {
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
}

.entry-thumbnail {
	margin-bottom: 1.5rem;
}

.entry-thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

article .entry-content {
	max-width: 760px;
	line-height: 1.8;
	color: #333;
}

article .entry-content > * + * {
	margin-top: 1.25rem;
}

article .entry-content a {
	color: var(--color-accent);
}

/* Blog index: index.php loops one <article> per post. */
.site-main > article {
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid #eee;
}

.site-main > article:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.entry-summary {
	max-width: 760px;
	color: #555;
}

.no-results.not-found {
	color: #888;
}

.no-results.not-found h2 {
	font-size: 1.1rem;
	font-weight: normal;
}

/* WordPress core's the_posts_pagination() (blog index, search results) --
   different markup from WooCommerce's own .woocommerce-pagination above. */
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border-radius: 4px;
	text-decoration: none;
	color: var(--color-text);
	background: var(--color-surface);
}

.navigation.pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
}

.navigation.pagination .page-numbers:hover {
	background: #eee9e2;
}

/* Contact form (Contact Form 7) */
.wpcf7-form p {
	margin: 0 0 1.25rem;
}

.wpcf7-form label {
	display: block;
	font-size: 0.9rem;
	color: #555;
	margin-bottom: 0.35rem;
}

.wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	max-width: 460px;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	margin-top: 0.35rem;
}

.wpcf7-form-control.wpcf7-textarea {
	max-width: 100%;
}

.wpcf7-form-control.wpcf7-submit {
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	cursor: pointer;
}

.wpcf7-form-control.wpcf7-submit:hover {
	background: var(--color-accent);
}

.wpcf7-not-valid-tip {
	display: block;
	color: #c33;
	font-size: 0.85rem;
	margin-top: 0.35rem;
}

.wpcf7-response-output {
	margin-top: 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	border: 1px solid #ddd;
}

/* Homepage */
.home-hero {
	background: var(--color-primary);
	color: #fff;
	text-align: center;
	padding-block: 4rem;
}

.home-hero__inner h1 {
	margin: 0 0 0.5rem;
	font-size: 2rem;
}

.home-hero__tagline {
	margin: 0 0 1.5rem;
	color: #ddd;
	font-size: 1.1rem;
}

.home-hero__cta {
	display: inline-block;
	background: var(--color-accent);
	color: #fff;
	text-decoration: none;
	padding: 0.75rem 2rem;
	border-radius: 4px;
	font-weight: bold;
}

.home-hero__cta:hover {
	opacity: 0.9;
}

.home-section-title {
	font-size: 1.4rem;
	margin: 0 0 1.5rem;
}

.home-categories {
	padding-block: 3rem;
}

.home-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.home-category-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--color-surface);
	border-radius: 8px;
	padding: 2rem 1.5rem;
	text-decoration: none;
	color: inherit;
	text-align: center;
	transition: background-color 0.15s ease;
}

.home-category-card:hover {
	background: #eee9e2;
}

.home-category-card__name {
	font-size: 1.15rem;
	font-weight: bold;
}

.home-category-card__count {
	color: #888;
	font-size: 0.9rem;
}

.home-latest {
	padding-block: 1rem 3rem;
}