/*
 * ShotShield WooCommerce styles (direction B). Loaded on shop, product, cart, checkout and account pages.
 * Tokens come from shotshield-theme.css.
 */

/* ---------- Single product ---------- */

.single-product div.product {
	--heading-margin-bottom: 12px;
}

.single-product .woocommerce-product-gallery {
	background: var(--ssg-white);
	border: 1px solid var(--ssg-line);
}

.single-product div.product .product_title.entry-title {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 0.95;
	letter-spacing: -0.01em;
}

.single-product .summary .price {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 34px;
	line-height: 1;
	color: var(--ssg-ink);
	margin-bottom: 18px;
}

.single-product .summary .woocommerce-variation-price .price {
	font-size: 28px;
}

/* Variation table becomes stacked rows: label line, then the buttons. */
.single-product div.product form.cart table.variations,
.single-product div.product form.cart table.variations tbody,
.single-product div.product form.cart table.variations tr,
.single-product div.product form.cart table.variations th,
.single-product div.product form.cart table.variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: none;
}

.single-product div.product form.cart table.variations tr {
	margin-bottom: 20px;
}

.single-product div.product form.cart table.variations th {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}

.single-product div.product form.cart table.variations label {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssg-muted);
}

.single-product div.product form.cart table.variations .ssg-chosen {
	color: var(--ssg-ink);
}

.ssg-sizing-link {
	font-size: 15px;
	font-weight: 600;
}

.single-product .reset_variations {
	font-size: 14px;
	margin-top: 8px;
	display: inline-block;
}

.ssg-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ---------- Color and size buttons ---------- */

.ssg-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ssg-swatches-size {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.ssg-swatch {
	appearance: none;
	margin: 0;
	border: 1px solid var(--ssg-steel);
	border-radius: 4px;
	background: var(--ssg-white);
	color: var(--ssg-ink);
	font-family: var(--ssg-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.1;
	padding: 10px 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.ssg-swatch:hover:not(:disabled) {
	border-color: var(--ssg-ink);
}

.ssg-swatch.is-selected {
	background: var(--ssg-blue);
	border-color: var(--ssg-blue);
	color: var(--ssg-white);
}

.ssg-swatch:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ssg-swatch:focus-visible {
	outline: 3px solid var(--ssg-blue-bright);
	outline-offset: 2px;
}

.ssg-swatches-size .ssg-swatch {
	min-height: 64px;
	padding: 6px 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.ssg-swatch-code {
	display: block;
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 22px;
	line-height: 1;
}

.ssg-swatch-sub {
	display: block;
	font-size: 12px;
	font-weight: 500;
	opacity: 0.85;
	font-variant-numeric: tabular-nums;
}

.ssg-swatch-color {
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--ssg-steel);
	background: var(--ssg-swatch, var(--ssg-white));
}

.ssg-swatch-color.is-selected {
	background: var(--ssg-swatch, var(--ssg-white));
	border-color: var(--ssg-white);
	box-shadow: 0 0 0 3px var(--ssg-blue);
}

.ssg-size-hint {
	margin: 10px 0 0;
	font-size: 15px;
	color: var(--ssg-muted);
	min-height: 1.6em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Quantity and add to cart ---------- */

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.single-product form.variations_form {
	display: block;
}

.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.single-product .quantity .qty {
	height: 100%;
	min-height: 52px;
	width: 72px;
	border: 1px solid var(--ssg-steel);
	border-radius: 4px;
	font-family: var(--ssg-font-display);
	font-weight: 800;
	font-size: 20px;
	text-align: center;
	background: var(--ssg-white);
}

.single-product .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
	font-size: 18px;
}

.single-product .single_add_to_cart_button.disabled {
	opacity: 0.5;
}

/* ---------- Tabs and meta ---------- */

.woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--ssg-ink);
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ssg-blue);
}

.product_meta {
	font-size: 14px;
	color: var(--ssg-muted);
}

/* ---------- Notices, cart, checkout ---------- */

/* Mai draws the notice's colour bar as ::before; colour it from the palette instead of adding a border. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--ssg-white);
}

.woocommerce-message::before,
.woocommerce-info::before {
	background-color: var(--ssg-blue);
}

.woocommerce-error::before {
	background-color: var(--ssg-red);
}

.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
	background: var(--ssg-white);
	border: 1px solid var(--ssg-line);
	padding: 22px;
}

.cart_totals h2,
#order_review_heading,
.woocommerce-billing-fields h3 {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 26px;
}

@media (max-width: 600px) {
	.single-product div.product .product_title.entry-title {
		font-size: 26px;
		line-height: 1.1;
	}

	.ssg-swatches-size {
		grid-template-columns: repeat(5, minmax(56px, 1fr));
		overflow-x: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssg-swatch {
		transition: none;
	}
}