/*
Theme Name: Lightning Armory (Blocksy Child)
Template: blocksy
Description: Lightning Armory customizations on top of Blocksy. Put all theme code changes here, never in the parent theme.
Author: Lightning Armory
Version: 0.7.6
Text Domain: blocksy-child-la
*/

/*
 * Palette. Light values live in Customize > Colors (Blocksy colorPalette).
 * Dark values apply when the visitor picks dark with the header toggle
 * (data-la-theme="dark" on <html>), or when they haven't picked and their OS is dark.
 * :root:root outranks Blocksy's inline :root rules.
 * The dark block is written twice (OS and toggle); keep the two copies the same.
 */
:root:root {
	color-scheme: light;
	--la-footer-bg: #232A21;
	--la-footer-text: #D4D6C9;
	--la-required: #8A3B2E;
}

@media (prefers-color-scheme: dark) {
	:root:root:not([data-la-theme="light"]) {
		color-scheme: dark;
		--theme-palette-color-1: #AFC297; /* Pale Ranger: buttons, links */
		--theme-palette-color-2: #D2DDBF; /* Light Sage: hover */
		--theme-palette-color-3: #D3D8C6; /* Stone Text: body */
		--theme-palette-color-4: #EEEFE4; /* Bone: headings */
		--theme-palette-color-5: #3C4635; /* Moss Line: borders */
		--theme-palette-color-6: #252D22; /* Canopy: section bands */
		--theme-palette-color-7: #191F18; /* Night Forest: page background */
		--theme-palette-color-8: #222A1F; /* Cards, inputs */
		--theme-button-text-initial-color: #14200F;
		--theme-button-text-hover-color: #14200F;
		--la-footer-bg: #11160F;
		--la-footer-text: #D3D8C6;
		--la-required: #E8A08F;
	}
}

:root:root[data-la-theme="dark"] {
	color-scheme: dark;
	--theme-palette-color-1: #AFC297;
	--theme-palette-color-2: #D2DDBF;
	--theme-palette-color-3: #D3D8C6;
	--theme-palette-color-4: #EEEFE4;
	--theme-palette-color-5: #3C4635;
	--theme-palette-color-6: #252D22;
	--theme-palette-color-7: #191F18;
	--theme-palette-color-8: #222A1F;
	--theme-button-text-initial-color: #14200F;
	--theme-button-text-hover-color: #14200F;
	--la-footer-bg: #11160F;
	--la-footer-text: #D3D8C6;
	--la-required: #E8A08F;
}

/*
 * Fonts (approved mockup, Oct 31): Barlow for text, Barlow Condensed for headings.
 * h1, h2 and the site name are uppercase; smaller headings stay in normal case.
 */
:root:root {
	--theme-font-family: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
	--la-heading-font: "Barlow Condensed", Barlow, system-ui, sans-serif;
	--theme-button-border-radius: 4px;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .site-title,
body .product_title,
body [data-products] .woocommerce-loop-product__title,
body .wc-block-components-title,
body .wc-block-cart__totals-title {
	--theme-font-family: var(--la-heading-font);
	font-family: var(--la-heading-font);
}

body h1, body h2,
body .site-title,
body .product_title,
body .wc-block-cart__totals-title {
	--theme-text-transform: uppercase;
	text-transform: uppercase;
	--theme-letter-spacing: 0.01em;
}

body .wp-element-button,
body .button,
body button[type="submit"],
body .wc-block-components-button {
	--theme-button-font-weight: 600;
	font-weight: 600;
	border-radius: 4px;
}

/*
 * Larger type (approved Oct 30, 2026).
 * Base text, headings and buttons live in Customize > General > Typography.
 * The rules below cover what Blocksy keeps in header/WooCommerce settings.
 * "body" in each selector outranks Blocksy's generated global.css.
 * Blocksy puts data-header, data-footer and data-prefix on <body> itself,
 * so those selectors are written body[data-…] with no space.
 */

/* Header menu: 17px, normal case */
body[data-header] .ct-header [data-id*="menu"] > ul > li > a {
	--theme-font-size: 17px;
	--theme-text-transform: none;
	--theme-letter-spacing: 0.01em;
}

body[data-header] .ct-header [data-id*="menu"] .sub-menu .ct-menu-link {
	--theme-font-size: 17px;
}

/*
 * Dropdowns use the card colors so they match the page in light and dark mode. Blocksy's
 * default is the reverse (heading color behind card-colored text), and its hover and
 * current-page green was unreadable on that background.
 */
body[data-header] .ct-header [data-id*="menu"] .sub-menu {
	--dropdown-background-color: var(--theme-palette-color-8);
	--dropdown-divider: 1px solid var(--theme-palette-color-5);
	border: 1px solid var(--theme-palette-color-5);
}

body[data-header] .ct-header [data-id*="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--theme-palette-color-3);
	--theme-link-hover-color: var(--theme-palette-color-1);
	--theme-link-active-color: var(--theme-palette-color-1);
}

/* Breadcrumbs, post meta, captions, footer */
body .ct-breadcrumbs,
body[data-prefix] .entry-header .entry-meta,
body[data-prefix] .entry-card .entry-meta,
body [data-products] .entry-meta {
	--theme-font-size: 15px;
}

body figcaption,
body .wp-caption-text {
	--theme-font-size: 16px;
}

body[data-footer] [data-id="copyright"],
body .ct-footer {
	--theme-font-size: 17px;
}

/* Shop grid and product page */
body [data-products] .woocommerce-loop-product__title,
body [data-products] .woocommerce-loop-category__title {
	--theme-font-size: 20px;
}

body [data-products] .price {
	--theme-font-size: 20px;
}

body .entry-summary .product_title {
	--theme-font-size: 38px;
}

body .entry-summary .price {
	--theme-font-size: 24px;
}

body .woo-listing-top .woocommerce-result-count,
body .woo-listing-top .woocommerce-ordering select {
	--theme-font-size: 15px;
	font-size: 15px;
}

body .onsale,
body .out-of-stock-badge,
body [class*="ct-woo-badge-"] {
	--theme-font-size: 14px;
}

/* Product options, forms, cart and checkout */
:root:root {
	--theme-form-font-size: 18px;
}

body .variations label,
body .variations th,
body form label,
body .woocommerce form .form-row label {
	font-size: 17px;
}

body .variations select,
body form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body form select,
body form textarea {
	font-size: 18px;
}

body .shop_table,
body .woocommerce-checkout-review-order-table,
body .wc-block-cart,
body .wc-block-checkout {
	font-size: 18px;
}

@media (max-width: 999.98px) {
	body .entry-summary .product_title {
		--theme-font-size: 34px;
	}
}

@media (max-width: 689.98px) {
	body[data-header] .ct-header [data-id*="menu"] > ul > li > a,
	body[data-header] .ct-header [data-id*="menu"] .sub-menu .ct-menu-link {
		--theme-font-size: 18px;
	}

	body [data-products] .woocommerce-loop-product__title {
		--theme-font-size: 19px;
	}

	body .entry-summary .product_title {
		--theme-font-size: 30px;
	}

	body .entry-summary .price {
		--theme-font-size: 20px;
	}

	body .shop_table,
	body .woocommerce-checkout-review-order-table {
		font-size: 17px;
	}
}

/* Logo: larger in the header */
body[data-header] [data-id="logo"] .site-logo-container {
	--logo-max-height: 72px;
}

/*
 * Home page sections (core blocks, classes set in the block editor).
 */
.la-hero,
.la-section,
.la-cta {
	padding-block: clamp(48px, 7vw, 96px);
}

.la-hero {
	padding-inline: max(16px, 4vw);
}

.la-hero h1 {
	margin-block: 0.25em 0.5em;
}

.la-eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}

.la-hero .wp-block-image img,
.la-cards .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.la-cards h3 a {
	text-decoration: none;
	color: inherit;
}

.la-cards h3 a:hover {
	color: var(--theme-palette-color-1);
}

.la-step-number {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--theme-palette-color-1);
	margin-bottom: 0.3em;
}

.la-price-table td:last-child {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--theme-palette-color-1);
}

.la-cta,
.la-cta p {
	color: var(--theme-palette-color-8);
}

.la-work-strip.wp-block-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.la-steps h3 {
	margin-top: 0;
}

.la-cards + .la-cards {
	margin-top: clamp(24px, 4vw, 48px);
}

.la-custom-callout {
	margin-top: clamp(32px, 5vw, 64px);
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--theme-palette-color-5);
	background: var(--theme-palette-color-8);
}

.la-custom-callout h3 {
	margin-top: 0;
}

/* Laser Engraving page cards. Theme colors, so they follow light and dark mode. */
.la-info-cards {
	margin-block: clamp(24px, 4vw, 40px);
}

.la-info-card {
	height: 100%;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--theme-palette-color-5);
	border-top: 4px solid var(--theme-palette-color-1);
	background: var(--theme-palette-color-8);
}

.la-info-card h3 {
	margin-top: 0;
}

.la-info-card p:last-child {
	margin-bottom: 0;
}

/*
 * Desktop header: logo pulled toward the left edge, larger badge and site name
 * side by side with it. Blocksy's desktop layout starts at 1000px.
 */
@media (min-width: 1000px) {
	body[data-header] .ct-header [data-row*="middle"] {
		--height: 180px;
	}

	body[data-header] .ct-header .site-branding[data-id="logo"] {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	body[data-header] .ct-header [data-id="logo"] .site-title-container {
		margin: 0;
	}

	body[data-header] .ct-header [data-row*="middle"] > .ct-container {
		width: calc(100% - 64px);
		max-width: none;
	}

	body[data-header] [data-id="logo"] .site-logo-container {
		/* Full size from about 1170px wide; scales down on small laptops so the name stays on one line */
		--logo-max-height: clamp(112px, 12vw, 140px);
	}

	body[data-header] .ct-header [data-id="logo"] .site-title {
		white-space: nowrap;
		--theme-font-size: clamp(32px, 3.6vw, 42px);
		--theme-font-weight: 700;
		--theme-letter-spacing: 0.01em;
	}
}

/*
 * Header bar: card background with a thin line under it (approved mockup).
 * The theme toggle is added by functions.php just before the cart icon (desktop)
 * or the menu button (mobile).
 */
body[data-header] .ct-header [data-row*="middle"] {
	border-bottom: 1px solid var(--theme-palette-color-5);
}

.la-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-inline: 4px 12px;
	padding: 0;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 999px;
	background: transparent;
	color: var(--theme-palette-color-4);
	cursor: pointer;
}

.la-theme-toggle:hover {
	border-color: var(--theme-palette-color-1);
	color: var(--theme-palette-color-1);
}

.la-theme-toggle .la-sun {
	display: none;
}

:root[data-la-theme="dark"] .la-theme-toggle .la-sun {
	display: block;
}

:root[data-la-theme="dark"] .la-theme-toggle .la-moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-la-theme="light"]) .la-theme-toggle .la-sun {
		display: block;
	}

	:root:not([data-la-theme="light"]) .la-theme-toggle .la-moon {
		display: none;
	}
}

/* Footer: dark band in both themes */
body[data-footer] footer.ct-footer,
body[data-footer] footer.ct-footer [data-row] {
	background-color: var(--la-footer-bg);
	color: var(--la-footer-text);
	--theme-text-color: var(--la-footer-text);
	--theme-link-initial-color: var(--la-footer-text);
}

/* Required-field marks on service options and checkout */
body .wapf-field-label .wapf-required,
body abbr.required,
body .required {
	color: var(--la-required);
}

/* Service tiles in the shop grid: white cards with a thin border */
body [data-products] .product {
	background: var(--theme-palette-color-8);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 6px;
	overflow: hidden;
}

body[data-footer] footer.ct-footer .ct-footer-copyright,
body[data-footer] footer.ct-footer .ct-footer-copyright a {
	color: var(--la-footer-text);
}

/* Service options (Advanced Product Fields): clear labels, larger tick boxes */
body .wapf-field-label label,
body .wapf-field-label {
	font-size: 18px;
	font-weight: 600;
	color: var(--theme-palette-color-4);
}

body .wapf-field-description {
	font-size: 15px;
	color: var(--theme-palette-color-3);
}

body .wapf-checkable {
	font-size: 17px;
	line-height: 1.5;
}

body .wapf-field-container input[type="checkbox"],
body .wapf-field-container input[type="radio"] {
	width: 20px;
	height: 20px;
	margin-inline-end: 8px;
	accent-color: var(--theme-palette-color-1);
	vertical-align: -4px;
}

body .wapf-field-row {
	margin-bottom: 8px;
}

/* Header cart: icon and item count only; the running total is on the cart page */
body[data-header] .ct-header-cart .ct-label[data-price] {
	display: none;
}

body[data-header] .ct-header-cart .ct-icon-container svg {
	width: 20px;
	height: 20px;
}

/*
 * Tablet and phone header (Blocksy's mobile layout is below 1000px):
 * badge and name side by side, name on one line.
 */
@media (max-width: 999.98px) {
	body[data-header] .ct-header .site-branding[data-id="logo"] {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	body[data-header] .ct-header [data-id="logo"] .site-title-container {
		margin: 0;
	}

	body[data-header] .ct-header [data-id="logo"] .site-title {
		white-space: nowrap;
		--theme-font-size: clamp(20px, 5.4vw, 30px);
		--theme-font-weight: 700;
	}

	body[data-header] [data-id="logo"] .site-logo-container {
		--logo-max-height: clamp(48px, 12vw, 72px);
	}

	.la-theme-toggle {
		width: 40px;
		height: 40px;
		margin-inline: 0 8px;
	}
}

/* Page title band (Shop, category and other archive pages): shorter, especially on phones */
body[data-prefix] .hero-section[data-type="type-2"] {
	--min-height: clamp(120px, 18vw, 200px);
	--container-padding: clamp(24px, 4vw, 40px) 0;
}

/*
 * Services page tiles (page 14, built by content/make-services-page.py).
 * Each tile is a card: photo on top, text, price line, button pinned to the bottom.
 */
/* Same width as the tiles so it lines up with them on the left */
.entry-content > .la-lead {
	font-size: 20px;
}

.la-tiles {
	gap: 24px;
	margin-block: clamp(24px, 4vw, 40px);
}

.la-tiles > .la-tile {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 22px;
	background: var(--theme-palette-color-8);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 6px;
	overflow: hidden;
}

.la-tile > * {
	margin-inline: 22px;
}

.la-tile > .wp-block-image {
	margin: 0 0 4px;
}

.la-tile .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.la-tile h3 {
	margin-block: 14px 6px;
	font-size: 26px;
	line-height: 1.15;
}

.la-tile h3 a {
	color: inherit;
	text-decoration: none;
}

.la-tile h3 a:hover {
	color: var(--theme-palette-color-1);
}

.la-tile p {
	margin-block: 0 10px;
	font-size: 17px;
}

.la-tile .la-tile-price {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 600;
	color: var(--theme-palette-color-4);
}

.la-tile .wp-block-buttons {
	margin-top: 4px;
}

.la-tile .wp-block-button,
.la-tile .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Page titles (Services, Shop, About...): large, as in the mockup */
body[data-prefix] .entry-header .page-title {
	--theme-font-size: clamp(36px, 5vw, 52px);
	--theme-line-height: 1.05;
}

/* Gallery page (62, built by content/make-gallery-page.php) */
.la-gallery-nav {
	gap: 10px;
	margin-block: 8px clamp(32px, 5vw, 56px);
}

.la-gallery-nav .wp-block-button__link {
	padding: 8px 14px;
	font-size: 16px;
}

.la-gallery-heading {
	margin-top: clamp(40px, 6vw, 72px);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--theme-palette-color-5);
	scroll-margin-top: 120px;
}

/* A strict grid, so a short last row keeps the same tile size */
.wp-block-gallery.la-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.wp-block-gallery.la-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	margin: 0;
}

.wp-block-gallery.la-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

.la-video-grid {
	gap: 12px;
}

/* Same frame for every clip; upright and sideways videos both show whole on black */
.la-video-grid .wp-block-video {
	position: relative;
	margin: 0;
	aspect-ratio: 9 / 16;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}

.la-video-grid video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 689.98px) {
	.wp-block-gallery.la-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

/* Small add-on line after a "From $X" price, e.g. "+ $39.99 pistol service" */
.la-price-note {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 500;
	color: var(--theme-palette-color-3);
}

/* FFL transfer ID uploads (inc/ffl-id-upload.php) */
.la-ffl-ids {
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var(--theme-border-color);
	border-radius: 4px;
}

.la-ffl-ids-intro {
	margin-bottom: 14px;
}

.la-ffl-id-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 18px;
}

.la-ffl-id-field .required {
	color: var(--la-required);
}

.la-ffl-id-field .la-optional {
	font-weight: 400;
	font-size: 15px;
}

.la-ffl-id-field input[type="file"] {
	max-width: 100%;
}

/* Age and jurisdiction popup (inc/age-gate.php). Shown only while <html data-la-age="ask">. */
.la-age-gate {
	display: none;
}

html[data-la-age="ask"] .la-age-gate {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 14, 9, 0.88);
	overflow-y: auto;
}

html[data-la-age="ask"] body {
	overflow: hidden;
}

.la-age-box {
	width: 100%;
	max-width: 520px;
	margin: auto;
	padding: clamp(24px, 5vw, 40px);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-8);
	color: var(--theme-text-color);
	text-align: left;
}

.la-age-logo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 12px;
	border-radius: 50%;
}

.la-age-box h2 {
	margin: 0 0 16px;
	text-align: center;
	font-size: clamp(26px, 5vw, 34px);
}

.la-age-box ul {
	margin: 0 0 16px;
	padding-left: 1.2em;
}

.la-age-box li {
	margin-bottom: 6px;
}

.la-age-small {
	font-size: 14px;
	opacity: 0.85;
}

.la-age-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 20px;
}

.la-age-enter {
	flex: 1 1 auto;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--theme-button-border-radius, 4px);
	background: var(--theme-button-background-initial-color, var(--theme-palette-color-1));
	color: var(--theme-button-text-initial-color);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.la-age-enter:hover,
.la-age-enter:focus-visible {
	background: var(--theme-button-background-hover-color, var(--theme-palette-color-2));
	color: var(--theme-button-text-hover-color);
}

.la-age-leave {
	color: inherit;
}

/* First-order offer popup (inc/welcome-offer.php) */
.la-offer[hidden] {
	display: none;
}

.la-offer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	padding: 16px;
	background: rgba(10, 14, 9, 0.88);
	overflow-y: auto;
}

html[data-la-offer="open"] body {
	overflow: hidden;
}

.la-offer-box {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: auto;
	padding: clamp(24px, 5vw, 40px);
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 4px;
	background: var(--theme-palette-color-8);
	color: var(--theme-text-color);
}

.la-offer-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.la-offer-kicker {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}

.la-offer-box h2 {
	margin: 0 0 12px;
	font-size: clamp(24px, 5vw, 32px);
}

.la-offer-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.la-offer-form p {
	margin: 0 0 12px;
}

.la-offer-form input[type="text"],
.la-offer-form input[type="email"],
.la-offer-form input[type="tel"] {
	width: 100%;
}

.la-offer-check label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.la-offer-check input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.la-offer-error {
	color: var(--la-required);
	font-weight: 600;
}

.la-offer-submit,
.la-offer-finish {
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--theme-button-border-radius, 4px);
	background: var(--theme-button-background-initial-color, var(--theme-palette-color-1));
	color: var(--theme-button-text-initial-color);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.la-offer-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.la-offer-fine {
	margin-top: 10px;
	font-size: 13px;
	opacity: 0.85;
}

.la-offer-skip {
	display: block;
	margin: 8px auto 0;
	padding: 8px;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.la-offer-code {
	margin: 8px 0 16px;
	padding: 14px;
	border: 2px dashed var(--theme-palette-color-1);
	border-radius: 4px;
	text-align: center;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.06em;
	user-select: all;
}

.la-offer-account {
	margin-bottom: 24px;
	padding: 16px 20px;
	border: 2px dashed var(--theme-palette-color-1);
	border-radius: 4px;
}

/* FAQ questions (details blocks) and draft notes. Theme colors, light and dark. */
.la-faq-item {
	border-bottom: 1px solid var(--theme-palette-color-5);
	padding-block: 14px;
}

.la-faq-item summary {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	color: var(--theme-palette-color-4);
}

.la-faq-item summary::-webkit-details-marker {
	display: none;
}

.la-faq-item summary::after {
	content: "+";
	flex: none;
	color: var(--theme-palette-color-1);
	font-size: 1.3em;
	line-height: 1;
}

.la-faq-item[open] summary::after {
	content: "\2212";
}

.la-faq-item > :not(summary):first-of-type {
	margin-top: 12px;
}

.la-faq-item > :last-child {
	margin-bottom: 0;
}

h2 + .la-faq-item {
	border-top: 1px solid var(--theme-palette-color-5);
}

.la-draft-note {
	padding: 12px 16px;
	border-left: 4px solid var(--la-required);
	background: var(--theme-palette-color-8);
}

/* Product pages: the description takes the photo's place (inc/product-layout.php). */
.single-product .product-entry-wrapper > .la-product-info {
	align-self: start;
	font-size: 1em;
}

.single-product .la-product-info > :first-child {
	margin-top: 0;
}

.single-product .product-entry-wrapper > .la-product-info {
	margin-bottom: 40px;
}

/* Blocksy only builds its two columns when there is a gallery, so build them here. */
@media (min-width: 1000px) {
	.single-product .product-entry-wrapper:has(> .la-product-info) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(40px, 5vw, 70px);
		align-items: start;
	}

	.single-product .product-entry-wrapper > .la-product-info {
		position: sticky;
		top: 40px;
		margin-bottom: 0;
	}

	.single-product .product-entry-wrapper > .entry-summary {
		width: auto;
		margin: 0;
	}
}

/*
 * 0.7.2/0.7.3 Checkout: g-FFL Checkout dealer picker and the Ship / In-store pickup choice.
 * The plugin and WooCommerce hard-code white boxes, which hid light text in dark mode.
 * Theme colors, so both follow light and dark mode.
 */
#ffl_container {
	padding: clamp(16px, 2.5vw, 24px) !important;
	border: 1px solid var(--theme-palette-color-5);
	border-top: 4px solid var(--theme-palette-color-1);
	background: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-3) !important;
}

#ffl_container .ffl-dealer-heading {
	margin-top: 0;
	color: var(--theme-palette-color-4) !important;
}

#ffl_container .ffl_checkout_notice {
	padding: 14px 16px !important;
	border-left: 4px solid var(--theme-palette-color-1) !important;
	background: var(--theme-palette-color-6) !important;
	color: var(--theme-palette-color-3) !important;
}

#ffl_container .ffl_checkout_notice b,
#ffl_container .ffl_checkout_notice strong {
	color: var(--theme-palette-color-4) !important;
}

#ffl_container input[type="text"],
#ffl_container input[type="number"],
#ffl_container input:not([type]),
#ffl_container select {
	border-color: var(--theme-palette-color-5) !important;
	background: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-3) !important;
}

#ffl_container select option {
	background: var(--theme-palette-color-8);
	color: var(--theme-palette-color-3);
}

#ffl_container #ffl-search,
#ffl_container #ffl-local-pickup-search,
#ffl_container #ffl-favorite-search,
#ffl_container .button {
	border: 0 !important;
	background: var(--theme-button-background-initial-color) !important;
	color: var(--theme-button-text-initial-color) !important;
	cursor: pointer;
}

#ffl_container #ffl-search:hover,
#ffl_container #ffl-local-pickup-search:hover,
#ffl_container #ffl-favorite-search:hover,
#ffl_container .button:hover {
	background: var(--theme-button-background-hover-color) !important;
	color: var(--theme-button-text-hover-color) !important;
}

#ffl_container #ffl-list,
#ffl_container .ffl-list-div,
#ffl_container .ffl-list-container {
	border-color: var(--theme-palette-color-5) !important;
	background: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-3) !important;
}

#ffl_container #ffl-list li {
	border-color: var(--theme-palette-color-5) !important;
	background: var(--theme-palette-color-8) !important;
	color: var(--theme-palette-color-3) !important;
}

#ffl_container #ffl-list li:hover,
#ffl_container #ffl-list li.selected,
#ffl_container #ffl-list li.active {
	background: var(--theme-palette-color-6) !important;
}

.wc-block-checkout__shipping-method-option {
	color: var(--theme-palette-color-3);
}

.wc-block-checkout__shipping-method-option--selected {
	border-color: var(--theme-palette-color-1) !important;
	background: var(--theme-palette-color-6) !important;
	color: var(--theme-palette-color-4) !important;
}

.wc-block-checkout__shipping-method-option--selected svg,
.wc-block-checkout__shipping-method-option--selected path {
	fill: currentColor;
}

/* 0.7.4 In-store pickup needs no dealer search: hide the g-FFL dealer box (inc/firearm-shipping.php). */
body.la-pickup #ffl-block-checkout-wrapper {
	display: none !important;
}

/*
 * 0.7.5 WooCommerce message boxes ("Thank you. Your order has been received.", "added to your
 * cart", coupon messages, errors). Blocksy gives them a fixed light gray background, which hid
 * the light text in dark mode. Theme colors, so they follow light and dark mode.
 */
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-thankyou-order-received) {
	--background-color: var(--theme-palette-color-6);
	--theme-text-color: var(--theme-palette-color-4);
	border-left: 4px solid var(--theme-palette-color-1);
	color: var(--theme-palette-color-4);
}

.woocommerce-error {
	border-left-color: var(--la-required);
}

.woocommerce-thankyou-order-received {
	font-weight: 600;
}

/* 0.7.6 Large photo at the top of a service page (make-service-pages.php $hero). Wide and short, so the text still shows above the fold. */
.wp-block-image.la-page-hero {
	margin-bottom: 1.5rem;
}

.wp-block-image.la-page-hero img {
	width: 100%;
	max-height: min(460px, 55vh);
	object-fit: cover;
	border-radius: 6px;
}