/*
Theme Name: Quickfire
Template: storefront
Description: Premium Tactical Occult Archive skin for Storefront (blueprint palette).
Version: 1.0
*/

/* ---- palette: 80% dark / 15% neutral / 5% accent (blueprint) ---------- */
:root {
	--qf-black: #111111;
	--qf-coal: #1c1a17;
	--qf-panel: #221f1b;
	--qf-border: #35302a;
	--qf-brass: #9a7b4f;
	--qf-brass-dark: #6b5a3a;
	--qf-parchment: #d9c9a3;
	--qf-text: #cfc8bb;
	--qf-ember: #c13b2a;
}

/* ---- base -------------------------------------------------------------- */
body,
.site,
.site-content {
	background-color: var(--qf-black);
	color: var(--qf-text);
	font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-branding .site-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: "Cormorant Garamond", Garamond, "EB Garamond", Georgia, serif;
	color: var(--qf-parchment);
	letter-spacing: 0.02em;
}

a { color: var(--qf-brass); }
a:hover { color: var(--qf-parchment); }

/* ---- header / nav ------------------------------------------------------ */
.site-header,
.storefront-primary-navigation,
.secondary-navigation {
	background-color: var(--qf-black);
	color: var(--qf-text);
	border-bottom: 1px solid var(--qf-border);
}
.site-branding .site-title a,
.site-header a,
.main-navigation ul li a,
.site-header-cart .cart-contents {
	color: var(--qf-parchment) !important;
}
.storefront-handheld-footer-bar { background-color: var(--qf-coal); }
.site-branding .site-description { color: var(--qf-brass); }

/* ---- content panels ---------------------------------------------------- */
.hentry,
.woocommerce-tabs,
.woocommerce-info,
.woocommerce-message {
	background-color: transparent;
	color: var(--qf-text);
}
.woocommerce-info,
.woocommerce-message {
	background-color: var(--qf-panel);
	border-top-color: var(--qf-brass);
	color: var(--qf-text);
}

/* ---- product grid: dossier cards --------------------------------------- */
ul.products li.product {
	background-color: var(--qf-coal);
	border: 1px solid var(--qf-border);
	border-radius: 4px;
	padding: 0.9em 0.9em 1.2em;
}
ul.products li.product .woocommerce-loop-product__title { font-size: 1.15em; }
ul.products li.product .price,
.summary .price,
.price {
	color: var(--qf-parchment) !important;
	font-weight: 600;
}
.onsale {
	background-color: var(--qf-ember);
	color: #fff;
	border: 0;
}

/* Denser grid on phones/tablets so at least 4 products are visible per
   screen instead of 1 full-width card at a time (owner request). */
@media (max-width: 480px) {
	ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
	ul.products li.product { width: auto !important; margin: 0 !important; padding: 0.5em 0.5em 0.7em; float: none !important; }
	ul.products li.product img { aspect-ratio: 1 / 1; object-fit: cover; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 0.82em; margin: 0.35em 0 0.1em; line-height: 1.25; }
	ul.products li.product .price { font-size: 0.85em; }
	ul.products li.product .button { font-size: 0.72em; padding: 0.55em 0.5em; }
}
@media (min-width: 481px) and (max-width: 1024px) {
	ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
	ul.products li.product { width: auto !important; margin: 0 !important; padding: 0.6em 0.6em 0.8em; float: none !important; }
	ul.products li.product img { aspect-ratio: 1 / 1; object-fit: cover; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 0.9em; }
}

/* ---- buttons ------------------------------------------------------------ */
.button, button, input[type="submit"], input[type="button"],
.added_to_cart, .widget a.button, .site-header-cart .cart-contents,
.wp-block-button__link {
	background-color: var(--qf-brass-dark) !important;
	color: #f4ecd8 !important;
	border: 1px solid var(--qf-brass) !important;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.92em;
}
.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--qf-brass) !important;
	color: var(--qf-black) !important;
}
.button.alt, .single_add_to_cart_button, .checkout-button {
	background-color: var(--qf-ember) !important;
	border-color: var(--qf-ember) !important;
}
.button.alt:hover, .single_add_to_cart_button:hover,
.checkout-button:hover {
	background-color: #d8523f !important;
	color: #fff !important;
}

/* ---- forms / inputs ----------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
textarea, select, .input-text {
	background-color: var(--qf-panel);
	color: var(--qf-text);
	border: 1px solid var(--qf-border);
}

/* ---- tables / cart / checkout ------------------------------------------ */
table, td, th, .shop_table, .shop_table td, .shop_table th {
	background-color: transparent !important;
	border-color: var(--qf-border) !important;
	color: var(--qf-text);
}
.woocommerce-checkout #payment,
#order_review {
	background-color: var(--qf-coal);
	border: 1px solid var(--qf-border);
}
.woocommerce-checkout #payment .payment_box {
	background-color: var(--qf-panel);
	color: var(--qf-text);
}

/* ---- footer -------------------------------------------------------------- */
.site-footer {
	background-color: var(--qf-coal);
	color: var(--qf-text);
	border-top: 1px solid var(--qf-border);
}
.site-footer a { color: var(--qf-brass); }

/* ---- widgets / sidebar / footer columns --------------------------------- */
.widget-area .widget,
.footer-widgets .widget {
	color: var(--qf-text);
}
.widget-area .widget h2,
.widget .widget-title,
.footer-widgets .widget-title,
.footer-widgets .widget h2 {
	color: var(--qf-parchment) !important;
}
.footer-widgets a { color: var(--qf-brass); }
.footer-widgets a:hover { color: var(--qf-parchment); }
.site-info, .site-info a { color: var(--qf-brass); }

/* ---- breadcrumbs / meta --------------------------------------------------- */
.woocommerce-breadcrumb, .posted_in, .sku_wrapper {
	color: var(--qf-brass);
}
.woocommerce-breadcrumb a { color: var(--qf-brass); }

/* storefront sticky add-to-cart bar */
.storefront-sticky-add-to-cart {
	background-color: var(--qf-coal);
	border-bottom: 1px solid var(--qf-border);
}

/* ---- vault clock (header) ---------------------------------------------- */
/* #masthead's outer .col-full floats .site-branding left / .site-search
   right (Storefront default). Turn that row into a real flex container so
   the clock sits between them in normal flow instead of being absolutely
   positioned against an unrelated ancestor (that was the overlap bug). */
#masthead > .col-full {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
}
#masthead > .col-full > .site-branding {
	float: none;
	margin-right: 0;
}
#masthead > .col-full > .site-search {
	float: none;
	margin-left: auto;
	flex: 0 1 320px;
}
.qf-vault-clock {
	position: static;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.7em;
	text-decoration: none;
	margin: 0.3em 0;
}
.qf-vault-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border: 2px solid var(--qf-brass);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--qf-black), 0 0 0 5px var(--qf-brass-dark),
		0 0 18px rgba(154, 123, 79, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.8);
	background: radial-gradient(circle at 35% 30%, #262117, var(--qf-black) 70%);
}
.qf-vault-count {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 2em;
	font-weight: 700;
	color: var(--qf-parchment);
	text-shadow: 0 0 10px rgba(217, 201, 163, 0.4);
}
.qf-vault-caption {
	color: var(--qf-brass);
	font-size: 0.68em;
	letter-spacing: 0.18em;
	line-height: 1.5;
}
/* Shrink rather than hide on small screens — Storefront already moves
   .site-search out of this row below ~549px, so there's room. */
@media (max-width: 600px) {
	.qf-vault-ring {
		width: 44px;
		height: 44px;
	}
	.qf-vault-count { font-size: 1.3em; }
	.qf-vault-caption { font-size: 0.55em; }
	#masthead > .col-full { justify-content: space-between; }
}

/* ---- decision-first hero ------------------------------------------------ */
/* Storefront leaves a chunk of top padding before main content — collapse
   it so the hero sits right under the nav instead of floating in dead
   space (owner: "move Fast Prep up"). */
.storefront-primary-navigation { margin-bottom: 0; }
#content, .content-area { padding-top: 0 !important; }
.qf-hero {
	text-align: center;
	padding: 0.4em 0 1.2em;
	margin-bottom: 1.5em;
	/* separator line removed per owner request */
}
.qf-hero-headline {
	/* owner spec: double the base size */
	font-size: 3.4em;
	line-height: 1.1;
	margin-bottom: 0.35em;
	color: var(--qf-parchment);
}
.qf-hero-sub {
	color: var(--qf-brass);
	/* owner: at least 2x the previous 1.25em */
	font-size: 2.6em;
	letter-spacing: 0.04em;
	margin-bottom: 1em;
	line-height: 1.2;
}
@media (max-width: 800px) {
	.qf-hero-sub { font-size: 1.8em; }
}
.qf-hero-buttons {
	display: grid;
	grid-template-columns: repeat(4, minmax(140px, 200px));
	justify-content: center;
	gap: 14px;
}
@media (max-width: 800px) {
	.qf-hero-buttons { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
	.qf-hero-headline { font-size: 2.2em; }
}
.qf-hero-btn {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 1.1em 0.8em;
	background-color: var(--qf-coal);
	border: 1px solid var(--qf-brass-dark);
	border-radius: 4px;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.qf-hero-btn:hover {
	border-color: var(--qf-brass);
	box-shadow: 0 0 14px rgba(154, 123, 79, 0.25);
}
.qf-hero-btn-need {
	color: var(--qf-brass);
	font-size: 0.7em;
	letter-spacing: 0.2em;
}
.qf-hero-btn-genre {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	color: var(--qf-parchment);
	font-size: 1.25em;
	font-weight: 700;
}
.qf-hero-btn-what {
	color: var(--qf-text);
	font-size: 0.8em;
}
.qf-hero-surprise {
	margin-top: 1.6em;
	color: var(--qf-text);
}
.qf-hero-surprise a { color: var(--qf-ember); }
.qf-hero-soon {
	color: #6f675c;
	font-size: 0.85em;
	letter-spacing: 0.06em;
	margin-top: 0.4em;
}

/* ---- Discovery Assistant ------------------------------------------------ */
.qf-discovery {
	max-width: 760px;
	margin: 0 auto 3em;
	padding: 0 1em;
}
.qf-disco-loading {
	text-align: center;
	color: var(--qf-brass);
}
.qf-disco-box {
	background-color: var(--qf-coal);
	border: 1px solid var(--qf-border);
	border-radius: 6px;
	padding: 2em 1.5em;
	text-align: center;
}
.qf-disco-title {
	font-size: 1.5em;
	margin-bottom: 0.3em;
}
.qf-disco-sub {
	color: var(--qf-brass);
	margin-bottom: 1.4em;
}
.qf-disco-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}
.qf-disco-opt {
	font-family: inherit;
	background-color: var(--qf-panel) !important;
	color: var(--qf-text) !important;
	border: 1px solid var(--qf-brass-dark) !important;
	border-radius: 4px;
	padding: 0.9em 1em;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 0.95em;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.qf-disco-opt:hover {
	border-color: var(--qf-brass) !important;
	background-color: var(--qf-panel) !important;
	color: var(--qf-parchment) !important;
	box-shadow: 0 0 12px rgba(154, 123, 79, 0.25);
}
.qf-disco-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 1.6em;
	text-align: left;
}
.qf-disco-card {
	display: block;
	background-color: var(--qf-panel);
	border: 1px solid var(--qf-border);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s;
}
.qf-disco-card:hover { border-color: var(--qf-brass); }
.qf-disco-card img { display: block; width: 100%; height: auto; }
.qf-disco-card-body { padding: 0.8em 0.9em 1em; }
.qf-disco-card-name {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	color: var(--qf-parchment);
	font-size: 1.05em;
	line-height: 1.25;
	margin-bottom: 0.2em;
}
.qf-disco-card-price {
	color: var(--qf-brass);
	font-weight: 600;
	margin-bottom: 0.5em;
}
.qf-disco-card-why {
	color: var(--qf-text);
	font-size: 0.85em;
	line-height: 1.4;
	margin: 0;
}
.qf-disco-cta {
	display: inline-block;
	background-color: var(--qf-ember) !important;
	color: #fff !important;
	padding: 0.8em 1.6em;
	border-radius: 3px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 0.8em;
}
.qf-disco-again {
	background: none !important;
	border: none !important;
	color: var(--qf-brass) !important;
	text-decoration: underline;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: normal !important;
}