/*
Theme Name: Аптека 149
Theme URI: https://apteka149.ru
Author: apteka149.ru
Description: Фирменная тема для сети социальных аптек «Аптека 149». Минимализм, адаптивная вёрстка, интеграция с WooCommerce.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apteka149
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	/* Brand colors — brandbook АПТЕКА 149 */
	--color-primary: #c80000;
	--color-primary-dark: #870f00;
	--color-black: #0d0d0d;
	--color-white: #ffffff;

	/* Neutral scale — not specified in brandbook, defined for the web build */
	--color-bg: #ffffff;
	--color-bg-muted: #f7f5f4;
	--color-border: #e7e2e0;
	--color-text: #1a1a1a;
	--color-text-muted: #6b6b6b;

	/* Typography */
	--font-display: 'Panton', 'Arial Narrow', sans-serif;
	--font-body: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	/* Spacing scale (4px base) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Layout */
	--container-width: 1280px;
	--radius: 10px;
	--radius-sm: 6px;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
	font-family: 'Panton';
	src: url('assets/fonts/panton-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Panton';
	src: url('assets/fonts/panton-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Proxima Nova regular/bold cuts are missing from the licensed pack —
   nearest available weights (Light/SemiBold) stand in. See AGENTS.md. */
@font-face {
	font-family: 'Proxima Nova';
	src: url('assets/fonts/proxima-nova-light.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova';
	src: url('assets/fonts/proxima-nova-semibold.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-text);
	background: var(--color-bg);
}

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

a {
	color: inherit;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

ul[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

mark {
	background: none;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--space-4);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }

p { margin: 0 0 var(--space-4); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ==========================================================================
   Layout
   ========================================================================== */

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

@media (max-width: 600px) {
	.container { padding-inline: var(--space-4); }
}

.section {
	padding-block: var(--space-7);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
button:not(.mobile-nav-toggle),
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.9rem;
	color: var(--color-white) !important;
	background: var(--color-primary) !important;
	border: none;
	border-radius: var(--radius-sm);
	padding: 0.9em 1.6em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:hover,
button:not(.mobile-nav-toggle):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
	background: var(--color-primary-dark) !important;
}

.btn:active,
button:active {
	transform: scale(0.98);
}

.btn-outline {
	background: transparent !important;
	color: var(--color-primary) !important;
	border: 2px solid var(--color-primary);
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-block: var(--space-3);
}

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

.site-logo img,
.site-logo svg {
	height: 44px;
	width: auto;
}

.primary-nav {
	display: flex;
}

.primary-nav ul {
	display: flex;
	gap: var(--space-5);
}

.primary-nav a {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: var(--space-2) 0;
	border-bottom: 2px solid transparent;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	border-bottom-color: var(--color-primary);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.header-actions a {
	text-decoration: none;
	flex-shrink: 0;
}

.header-actions .woocommerce-product-search {
	display: flex;
	flex: 1 1 160px;
	min-width: 0;
	max-width: 260px;
}

.header-actions .search-field {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 0.55em 0.9em;
	border: 1px solid var(--color-border);
	border-right: none;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	background: var(--color-bg-muted);
}

.header-actions .woocommerce-product-search button {
	flex-shrink: 0;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	padding: 0.55em 1em;
	font-size: 0.8rem;
}

@media (max-width: 480px) {
	.header-actions .woocommerce-product-search {
		flex-basis: 90px;
	}
}

/* Ajax Search for WooCommerce ([fibosearch]) — same slot/sizing as the
   plain WooCommerce search form above, styled by the plugin itself. */
.header-actions .dgwt-wcas-search-wrapp {
	flex: 1 1 160px;
	min-width: 0;
	max-width: 260px;
}

@media (max-width: 480px) {
	.header-actions .dgwt-wcas-search-wrapp {
		flex-basis: 90px;
	}
}

.mobile-nav-toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--space-2);
	cursor: pointer;
}

.mobile-nav-toggle__bar,
.mobile-nav-toggle::before,
.mobile-nav-toggle::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-black);
	margin: 5px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ::before/::after need explicit content or they never generate a box at
   all — the bars were invisible even though display/width/height were set. */
.mobile-nav-toggle::before,
.mobile-nav-toggle::after {
	content: '';
}

@media (max-width: 900px) {
	.primary-nav {
		position: fixed;
		inset: 0;
		top: 0;
		background: var(--color-white);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		padding: var(--space-8) var(--space-5);
		z-index: 90;
	}

	.primary-nav.is-open {
		transform: translateX(0);
	}

	.primary-nav ul {
		flex-direction: column;
		gap: var(--space-5);
	}

	.primary-nav a {
		font-size: 1.4rem;
	}

	.mobile-nav-toggle {
		display: block;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--color-black);
	color: var(--color-white);
	padding-block: var(--space-7);
	margin-top: var(--space-8);
}

.site-footer a {
	color: var(--color-white);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-primary);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-6);
}

.footer-grid h3 {
	color: var(--color-white);
	font-size: 1rem;
	margin-bottom: var(--space-3);
}

.footer-grid ul li {
	margin-bottom: var(--space-2);
	opacity: 0.85;
}

.footer-col--brand img {
	margin-bottom: var(--space-3);
}

.footer-col--brand p {
	opacity: 0.75;
	font-size: 0.9rem;
}

.footer-social {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
}

.footer-social a:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.footer-tagline {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
	opacity: 1 !important;
	font-size: 0.95rem;
}

.footer-bottom {
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.85rem;
	opacity: 0.7;
}

/* ==========================================================================
   Cards / feature blocks
   ========================================================================== */

.card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-5);
	background: var(--color-white);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-5);
}

.feature-grid .card {
	text-align: center;
}

.feature-grid .card svg,
.feature-grid .card img {
	width: 48px;
	height: 48px;
	margin: 0 auto var(--space-3);
	color: var(--color-primary);
}

/* ==========================================================================
   WooCommerce — product grid & cards
   ========================================================================== */

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	margin: 0 0 var(--space-6);
}

/* WooCommerce's own CSS puts a clearfix (content:" "; display:table) on
   ::before/::after — harmless for the old float layout, but inside a Grid
   container a display:table pseudo-element becomes a real grid item and
   silently eats the first cell, pushing every product/category one slot to
   the right and breaking the row count (e.g. 3 then 4 instead of 4 then 4). */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
	content: none;
}

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

@media (max-width: 700px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products { gap: var(--space-3); }
	.woocommerce ul.products li.product { padding: var(--space-3); }
}

@media (max-width: 480px) {
	.woocommerce ul.products { gap: var(--space-2); }
	.woocommerce ul.products li.product { padding: var(--space-2); }
}

.woocommerce ul.products li.product {
	list-style: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-4);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	position: relative;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3);
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: none;
	font-size: 0.95rem;
	margin-bottom: var(--space-2);
}

.woocommerce ul.products li.product .price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-primary);
	font-size: 1.1rem;
}

.woocommerce ul.products li.product .price del {
	color: var(--color-text-muted);
	font-weight: 400;
	opacity: 0.7;
	margin-right: var(--space-2);
}

.woocommerce span.onsale {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	padding: 0.3em 0.7em;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

.woocommerce ul.products li.product a.button {
	width: 100%;
	margin-top: var(--space-2);
}

/* Single product */
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--radius);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-display);
	color: var(--color-primary);
	font-size: 1.6rem;
}

.woocommerce div.product .product_title {
	margin-bottom: var(--space-3);
}

/* Quantity input + Add to cart — sit side by side where there's room,
   stack to full width on narrow phones so both are easy to tap. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-3);
	margin: var(--space-5) 0;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 90px;
	height: 100%;
	min-height: 48px;
	padding: 0.6em 0.8em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-muted);
	text-align: center;
	font-size: 1rem;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	margin: 0;
}

@media (max-width: 480px) {
	.woocommerce div.product form.cart .quantity,
	.woocommerce div.product form.cart .quantity .qty,
	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex-basis: 100%;
		width: 100%;
	}
}

/* Product meta (SKU / category / tags) — one labelled row each,
   see woocommerce/single-product/meta.php. */
.product_meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-5) 0;
	font-size: 0.9rem;
}

.product_meta__label {
	display: inline-block;
	margin-right: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	color: var(--color-primary);
}

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

.product_meta a:hover {
	color: var(--color-primary);
}

/* Product tabs (Остатки в филиалах / Детали / Отзывы) — horizontally
   scrollable so they never wrap awkwardly on narrow screens, active tab
   gets a red-tinted background. */
.woocommerce-tabs.wc-tabs-wrapper {
	margin: var(--space-6) 0;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--color-border);
	margin: 0 0 var(--space-5);
	padding: 0 0 1px;
}

.woocommerce-tabs ul.tabs li {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	white-space: nowrap;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	color: var(--color-text-muted);
	text-decoration: none;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-tabs ul.tabs li:hover a {
	color: var(--color-text);
	background: var(--color-bg-muted);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary);
	background: rgba(200, 0, 0, 0.08);
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	font-size: 0.95rem;
}

.woocommerce-tabs .woocommerce-Tabs-panel table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-tabs .woocommerce-Tabs-panel table td,
.woocommerce-tabs .woocommerce-Tabs-panel table th {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* Cart / checkout tables — keep native structure, restyle surface only */
.woocommerce table.shop_table {
	border-radius: var(--radius);
	border-collapse: separate;
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--color-bg-muted);
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 0.8rem;
}

.woocommerce-checkout #payment,
.woocommerce-cart-form,
.cart-collaterals .cart_totals {
	border-radius: var(--radius);
}

.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.woocommerce-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--color-primary) !important;
}

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

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-muted);
	padding-block: var(--space-8);
}

/* Dot-map graphic from the brandbook ("фирменный элемент 2") — used here as
   a subtle textured backing behind the hero copy. */
.hero__pattern {
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -8%;
	width: 640px;
	max-width: 65%;
	transform: translateY(-50%);
	opacity: 0.08;
	pointer-events: none;
}

.hero__pattern img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.hero__pattern {
		display: none;
	}
}

.hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-7);
}

.hero__text {
	max-width: 640px;
}

.hero__eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	font-size: 0.9rem;
	margin-bottom: var(--space-3);
}

.hero__lede {
	font-size: 1.1rem;
	color: var(--color-text-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.hero__search .search-field,
.hero__search input[type="search"] {
	width: 100%;
	max-width: 420px;
	padding: 0.8em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.hero__mark {
	flex-shrink: 0;
	opacity: 0.9;
}

.hero__mark img {
	width: 200px;
	height: 200px;
}

@media (max-width: 900px) {
	.hero__inner {
		flex-direction: column;
		text-align: center;
	}

	.hero__actions {
		justify-content: center;
	}

	.hero__mark img {
		width: 120px;
		height: 120px;
	}
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-5);
}

@media (max-width: 1024px) {
	.category-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
	.category-grid { grid-template-columns: repeat(3, 1fr); }
	.category-grid { gap: var(--space-3); }
}

@media (max-width: 480px) {
	.category-grid { grid-template-columns: repeat(2, 1fr); }
}

.category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-align: center;
	text-decoration: none;
	padding: var(--space-4) var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.category-tile:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.category-tile img {
	width: 56px;
	height: 56px;
}

.category-tile span {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
}

.branches-teaser {
	background: var(--color-black);
	color: var(--color-white);
}

.branches-teaser__inner h2 {
	color: var(--color-white);
}

.branches-teaser__inner p {
	color: rgba(255, 255, 255, 0.75);
	max-width: 520px;
}

.cta-band h2 {
	margin-bottom: var(--space-3);
}

.cta-band p {
	color: var(--color-text-muted);
	max-width: 480px;
	margin-inline: auto;
}

/* ==========================================================================
   Branches / Адреса аптек
   ========================================================================== */

.branches-intro {
	max-width: 760px;
	margin-bottom: var(--space-6);
}

.branches-intro .lede {
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

.branches-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

@media (max-width: 1024px) {
	.branches-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.branches-grid { grid-template-columns: 1fr; }
}

.branch-card {
	cursor: pointer;
}

.branch-card__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3);
}

.branch-card__title {
	margin-bottom: var(--space-3);
}

.branch-card__meta {
	color: var(--color-text-muted);
	font-size: 0.95rem;
}

.branch-card__meta a {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.branch-card__map-link {
	width: 100%;
	margin-top: var(--space-2);
}

/* ==========================================================================
   Checkout — Доставка / Самовывоз
   ========================================================================== */

.checkout-fulfillment {
	margin-bottom: var(--space-6);
}

.checkout-fulfillment h3 {
	margin-bottom: var(--space-3);
}

.checkout-fulfillment ul#shipping_method {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.checkout-fulfillment ul#shipping_method li {
	flex: 1 1 240px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-4);
}

.checkout-fulfillment ul#shipping_method li:has(input:checked) {
	border-color: var(--color-primary);
	background: var(--color-bg-muted);
}

.checkout-fulfillment ul#shipping_method input {
	margin-right: var(--space-2);
}

.checkout-fulfillment ul#shipping_method label {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.9rem;
	cursor: pointer;
}