/* Hirsute Child — main stylesheet */

/* Page background texture. Bump the ?v= query string below every time you
   swap this image file (even if the filename stays the same) — otherwise
   browsers, the CDN, and mobile carrier image proxies can keep serving an
   old cached copy indefinitely, since a bare filename with no query string
   gives them no signal that anything changed. */
/* !important + `html body` (rather than plain `body`): WooCommerce loads a
   second, legacy Storefront stylesheet on some pages (product pages, not
   cart) with its own `body { background-color: #fff !important; }` rule.
   Matching specificity meant our plain `body` selector lost the tie to
   whichever stylesheet loads last, even with !important on both sides --
   bumping specificity above theirs settles it regardless of load order. */
html body {
	background-color: #987764 !important;
	background-image: url('../img/bg/Dean_ring_tie.jpg?v=1') !important;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding: 1rem;
	border-bottom: none;
	background: transparent !important;
}

.site-branding a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.site-branding__logo {
	display: block;
	height: 30pt;
	width: auto;
}

.site-branding__name {
	text-decoration: none;
	color: #f3d8c3;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.site-nav {
	flex: 1;
	min-width: 0;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.header-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 1.25rem;
	margin-left: auto;
}

.header-actions__link {
	text-decoration: none;
	color: #f3d8c3;
	font-weight: 500;
	white-space: nowrap;
}

/* Below this width, keep each header row's own contents laid out
   horizontally, but stack the three sections instead of squeezing them
   into one line (which was causing "Account"/"Cart" text to wrap mid-word). */
@media (max-width: 600px) {
	.site-header {
		justify-content: center;
		text-align: center;
	}

	.site-branding,
	.site-nav,
	.header-actions {
		flex: 1 1 100%;
		justify-content: center;
		margin-left: 0;
	}

	.site-nav ul,
	.header-actions {
		justify-content: center;
	}
}

.header-actions__cart {
	position: relative;
}

.header-actions__count {
	display: inline-block;
	min-width: 1.25rem;
	padding: 0 0.35rem;
	margin-left: 0.25rem;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: center;
}

.wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

.hero {
	position: relative;
	overflow: hidden;
	padding: 6rem 1rem;
	text-align: center;
	color: #fff;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero__bg-track {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	animation: hero-pan 40s linear infinite;
}

.hero__bg-image {
	flex-shrink: 0;
	height: 100%;
	width: auto;
	display: block;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

/* Track is rendered twice back-to-back (see hero.php), so panning
   from -50% to 0% moves exactly one full sequence and loops seamlessly. */
@keyframes hero-pan {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0%);
	}
}

.hero__inner {
	position: relative;
	z-index: 1;
}

.hero__eyebrow {
	color: #f3d8c3;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	opacity: 0.85;
}

.hero__title {
	color: #f3d8c3;
	font-size: 2.5rem;
	margin: 0.5rem 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero__text {
	color: #f3d8c3;
}

.hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
}

.button--primary {
	background: #f3d8c3 !important;
	color: #1a1a1a !important;
	border: none !important;
}

.button--secondary {
	background: #f3d8c3 !important;
	border: 1px solid #f3d8c3 !important;
	color: #1a1a1a !important;
}

/* WooCommerce's own "Select options" / "Add to cart" buttons on product cards. */
.featured-products .button,
.featured-products a.add_to_cart_button,
.product-list .button,
.product-list a.add_to_cart_button {
	background: #f3d8c3 !important;
	color: #1a1a1a !important;
	border: none !important;
}

.featured-products,
.product-list,
.value-props,
.cta {
	padding: 3rem 1rem;
}

.featured-products h2,
.product-list h2,
.value-props h2,
.cta h2 {
	color: #f3d8c3;
}

/* Product category tiles' "(N)" count is wrapped in a <mark>, which carries
   its own browser-default background/text color that otherwise overrides
   the light color inherited from the h2 rule above. */
.product-list h2 mark.count {
	background: transparent;
	color: inherit;
}

.featured-products .price,
.featured-products .price .amount,
.featured-products .price bdi,
.product-list .price,
.product-list .price .amount,
.product-list .price bdi {
	color: #f7f5f2 !important;
}

.value-props__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	margin-top: 1.5rem;
}

.cta {
	text-align: center;
}

.value-props__grid h3 {
	color: #f3d8c3;
}

.value-props__grid p,
.value-props__grid a {
	color: #f7f5f2;
}

/* Cart, single product, and checkout pages: WooCommerce renders its
   default dark text here (no template override in this theme), which is
   unreadable directly on the site's dark background photo. Give the
   content area a plain, light card instead of overriding every individual
   WooCommerce text/table color. Cart is a plain Page (rendered through
   this child theme's own page.php); product and checkout pages go through
   WooCommerce's own templates instead, which trigger Storefront's own
   wrapper output -- all three happen to share the `.site-main` class, so
   one rule covers them. */
body.woocommerce-cart .site-main,
body.single-product .site-main,
body.woocommerce-checkout .site-main {
	background: #faf7f2;
	border-radius: 8px;
	max-width: 1100px;
	margin: 2rem auto;
	padding: 2rem 1.5rem;
}

/* Product and checkout pages route through Storefront's own
   #primary/.content-area wrapper (see comment above), which ships with
   its own solid background -- unlike the cart's plain page.php wrapper,
   that opaque color was showing in the margin around the inset card
   instead of the site's background photo. Making it transparent didn't
   work: WooCommerce loads a second, legacy Storefront stylesheet on these
   pages with its own plain `body { background-color: #fff !important; }`
   rule that kept winning the cascade regardless of specificity/load-order
   tricks on `body` itself. Simpler fix: paint the same photo directly on
   #primary (an ID selector, so it reliably beats that plain `body` rule)
   instead of relying on `body`'s background showing through. */
body.single-product #primary,
body.single-product .content-area,
body.woocommerce-checkout #primary,
body.woocommerce-checkout .content-area {
	background-color: #987764 !important;
	background-image: url('../img/bg/Dean_ring_tie.jpg?v=1') !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	background-attachment: fixed !important;
}

/* Hide WooCommerce Payments' Express Checkout buttons (WooPay/Apple Pay/
   Google Pay) on single product pages. WooPayments has no per-page toggle
   for this (it's all-or-nothing in settings), so this is a CSS-only hide
   scoped to product pages -- it doesn't disable the functionality, and
   cart/checkout (where these buttons make sense) are untouched. */
body.single-product .wcpay-payment-request-wrapper,
body.single-product .wcpay-express-checkout-wrapper,
body.single-product [id*="express-checkout"],
body.single-product [class*="express-checkout"] {
	display: none !important;
}

/* Hide Storefront's "product pagination" prev/next hover panels, pinned to
   the left/right screen edges. They only show a sliver of the next/prev
   product's thumbnail until hovered, and their hover-expanded area sits on
   top of page content (e.g. the Reviews tab), making them behave more like
   a bug than a feature. */
.storefront-product-pagination {
	display: none !important;
}

.site-footer {
	background: transparent !important;
	padding: 1.5rem 1rem;
	text-align: center;
}

.site-footer p {
	color: #f3d8c3;
	margin: 0;
}

/* Category archive banner: the category's own thumbnail image (set via
   Products -> Categories -> edit category -> Thumbnail) as a cover photo,
   same dark-overlay treatment as the hero so the title stays readable
   regardless of what the thumbnail looks like. */
.category-banner {
	position: relative;
	background-color: #333;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 4rem 1rem;
	text-align: center;
	color: #fff;
}

.category-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.category-banner__inner {
	position: relative;
	z-index: 1;
}

.category-banner__title {
	color: #f3d8c3;
	font-size: 2.5rem;
	margin: 0 0 0.5rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.category-banner__description {
	color: #f3d8c3;
}

/* FAQ and Contact pages: substantial prose reads better as a plain light
   card (like cart/product pages) than as light text over the busy
   background photo. */
.site-main.page-faq,
.site-main.page-contact {
	background: #faf7f2;
	border-radius: 8px;
	max-width: 900px;
	margin: 2rem auto;
	padding: 2rem 1.5rem;
	color: #2a2a2a;
}

.page-faq h1,
.page-contact h1 {
	margin-top: 0;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-item {
	border: 1px solid #e2d9cf;
	border-radius: 6px;
	padding: 0.75rem 1rem;
}

.faq-item summary {
	cursor: pointer;
	font-weight: 600;
}

.faq-item p {
	margin: 0.75rem 0 0;
}