/*
Theme Name:  CelerSearch Demo
Theme URI:   https://celersearch.com
Description: CelerSearch-branded Storefront child theme for the WooCommerce demo shop. Glass header, brand cyan/blue accents, Instrument Sans, and styling for the CelerSearch search surfaces (autocomplete + shop filters).
Author:      CelerSearch
Author URI:  https://celersearch.com
Template:    storefront
Version:     1.3.2
License:     GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: celersearch-demo
*/

/* Storefront auto-enqueues this stylesheet (handle: storefront-child-style) AFTER the
   parent style, WooCommerce styles, and the customizer inline CSS — so plain selectors
   here generally win. The `Version:` header above is the cache-buster: bump it on change. */

/* --------------------------------------------------------------------------
   1. Design tokens (hex equivalents of the marketing site's oklch tokens)
   -------------------------------------------------------------------------- */
:root {
	--csd-primary: #06b6d4;        /* brand cyan — oklch(70% .15 230) */
	--csd-primary-deep: #0891b2;   /* AA-safe cyan for text/links on white */
	--csd-secondary: #3b82f6;      /* brand blue — oklch(62% .20 255) */
	--csd-gradient: linear-gradient(135deg, #06b6d4, #3b82f6);
	--csd-ink: #0f172a;            /* headings — oklch(21% .02 265) */
	--csd-text: #334155;
	--csd-muted: #64748b;
	--csd-base: #fafbfc;           /* page bg — oklch(98.5% .002 247) */
	--csd-border: #e2e8f0;
	--csd-neutral: #3d4152;        /* dark footer — oklch(35% .02 265) */
	--csd-radius: 0.75rem;         /* rounded-xl */
	--csd-radius-lg: 1rem;         /* rounded-2xl */
	--csd-shadow-hover: 0 8px 24px rgba(6, 182, 212, 0.12);
	--csd-font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Typography + base
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--csd-font);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--csd-font);
	font-weight: 700;
	letter-spacing: -0.01em;
}

body {
	background-color: var(--csd-base);
}

/* --------------------------------------------------------------------------
   3. Signature surfaces: fractal-noise grain + radial cyan glow
   -------------------------------------------------------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

#content {
	position: relative;
}

#content::before {
	content: "";
	position: absolute;
	top: -80px;
	left: 0;
	right: 0;
	height: 420px;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6, 182, 212, 0.08), transparent 70%);
}

/* --------------------------------------------------------------------------
   4. Glass sticky header
   `!important` is deliberate: the customizer inline CSS sets .site-header
   background-color and #masthead can carry an inline style attribute.
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 9990;
	background: rgba(255, 255, 255, 0.8) !important;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-branding .csd-logo img {
	height: 44px;
	width: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   5. Pill nav links
   -------------------------------------------------------------------------- */
.main-navigation ul li a {
	border-radius: 9999px;
	padding: 0.5em 1em;
	transition: background 0.15s ease, color 0.15s ease;
}

.main-navigation ul li a:hover {
	background: rgba(6, 182, 212, 0.08);
	color: var(--csd-primary-deep);
}

.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
	background: rgba(6, 182, 212, 0.1);
	color: var(--csd-primary-deep);
}

/* --------------------------------------------------------------------------
   6. Prominent header search (search IS the product being demoed)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.woocommerce-active .site-header .site-branding {
		width: 26%;
	}

	.woocommerce-active .site-header .site-search {
		width: 43.4782608696%;
	}
}

.site-search .widget_product_search input[type="search"],
.site-search .widget_product_search input[type="text"],
.widget_product_search input[type="search"],
.widget_search input[type="search"] {
	border-radius: 9999px;
	border: 1px solid var(--csd-border);
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	font-size: 1rem;
}

.site-search .widget_product_search input[type="search"]:focus,
.widget_product_search input[type="search"]:focus,
.widget_search input[type="search"]:focus {
	border-color: var(--csd-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

/* The plugin wraps the input in an inline-block relative div — force full width. */
.site-search .celersearch-autocomplete-wrapper {
	display: block !important;
	width: 100%;
}

/* Popup spans the input instead of shrink-wrapping. */
.site-search .celersearch-autocomplete {
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   7. Buttons — pill radius, gradient primaries, hover lift
   -------------------------------------------------------------------------- */
.button,
button,
input[type="button"],
input[type="submit"],
.added_to_cart,
.wc-block-components-button {
	border-radius: 9999px;
	font-weight: 600;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.button.alt,
.button.checkout,
.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	background-image: var(--csd-gradient);
	color: #fff;
	border: 0;
}

.button:hover,
.single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: var(--csd-shadow-hover);
}

/* --------------------------------------------------------------------------
   8. Product cards
   -------------------------------------------------------------------------- */
ul.products li.product {
	background: #fff;
	border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius-lg);
	padding: 1rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--csd-shadow-hover);
	border-color: #a5f3fc;
}

ul.products li.product img {
	border-radius: var(--csd-radius);
}

/* --------------------------------------------------------------------------
   9. Sale badge, stars, prices, gradient page title
   -------------------------------------------------------------------------- */
.onsale {
	background-image: var(--csd-gradient);
	color: #fff;
	border-radius: 9999px;
	border: 0;
	font-weight: 600;
}

/* Amber stars — matches the plugin filter bar's .cs-stars color. */
.star-rating span::before,
p.stars a:hover::after,
p.stars.selected a::after {
	color: #f59e0b;
}

.price ins,
.price .amount {
	color: var(--csd-ink);
}

.woocommerce-products-header__title.page-title,
.csd-gradient-text {
	background: var(--csd-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--csd-primary-deep); /* fallback for no-clip browsers */
	width: fit-content;
}

/* --------------------------------------------------------------------------
   10. Demo announcement bar
   -------------------------------------------------------------------------- */
.csd-banner {
	background: var(--csd-gradient);
	color: #fff;
	font-size: 0.875rem;
	position: relative;
	z-index: 9991;
}

.csd-banner__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 2.5rem 0.5rem 1rem;
	flex-wrap: wrap;
	justify-content: center;
}

.csd-banner__badge {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	padding: 0.1em 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

.csd-banner__text {
	margin: 0;
}

.csd-banner__cta {
	background: #fff;
	color: var(--csd-primary-deep);
	border-radius: 9999px;
	padding: 0.3em 1em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.csd-banner__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
	color: var(--csd-secondary);
}

.csd-banner__dismiss {
	background: transparent;
	border: 0;
	color: #fff;
	opacity: 0.7;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 0.25rem;
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
}

.csd-banner__dismiss:hover {
	opacity: 1;
	background: transparent;
}

/* --------------------------------------------------------------------------
   11. "Try:" search chips
   -------------------------------------------------------------------------- */
.csd-try {
	margin: 0.75rem 0 1.25rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(59, 130, 246, 0.05));
	border: 1px solid #a5f3fc;
	border-radius: var(--csd-radius);
	font-size: 0.875rem;
	text-align: left;
}

.csd-try__head {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;
}

.csd-try__title {
	font-weight: 700;
	color: var(--csd-ink);
}

.csd-try__desc {
	color: var(--csd-muted);
}

.csd-try__chips {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.csd-try__chip {
	border: 1px solid #a5f3fc;
	background: #ecfeff;
	color: var(--csd-primary-deep);
	border-radius: 9999px;
	padding: 0.25em 0.9em;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.csd-try__chip:hover {
	transform: translateY(-1px);
	box-shadow: var(--csd-shadow-hover);
	background: #fff;
	color: var(--csd-primary-deep);
}

.csd-try__hint {
	color: var(--csd-muted);
	font-size: 0.75rem;
	font-weight: 400;
}

/* "More examples" dropdown — extra validated Try-the-AI-search queries,
   grouped by capability. Reuses the chip palette (#a5f3fc / #ecfeff). */
.csd-try__more {
	position: relative;
	display: inline-flex;
}

.csd-try__more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	border: 1px dashed #a5f3fc;
	background: #fff;
	color: var(--csd-primary-deep);
	border-radius: 9999px;
	padding: 0.25em 0.9em;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	font-family: inherit;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.csd-try__more-toggle:hover,
.csd-try__more-toggle[aria-expanded="true"] {
	background: #ecfeff;
	border-style: solid;
}

.csd-try__more-caret {
	font-size: 0.7em;
	transition: transform 0.15s ease;
}

.csd-try__more-toggle[aria-expanded="true"] .csd-try__more-caret {
	transform: rotate(180deg);
}

.csd-try__menu {
	position: absolute;
	z-index: 30;
	top: calc(100% + 0.5rem);
	/* The toggle is the last chip in the row (far right), so open leftward to
	   stay on-screen. */
	right: 0;
	left: auto;
	min-width: 20rem;
	max-width: min(24rem, 90vw);
	max-height: 20rem;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(6, 182, 212, 0.08);
	padding: 0.5rem;
}

.csd-try__menu[hidden] {
	display: none;
}

.csd-try__menu-group + .csd-try__menu-group {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--csd-border);
}

.csd-try__menu-label {
	display: block;
	padding: 0.15rem 0.6rem 0.35rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--csd-muted);
}

.csd-try__menu-item {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: var(--csd-primary-deep);
	border-radius: 0.5rem;
	padding: 0.4rem 0.6rem;
	font-size: 0.8125rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.csd-try__menu-item:hover,
.csd-try__menu-item:focus-visible {
	background: #ecfeff;
	color: var(--csd-ink);
	outline: none;
}

/* Narrow screens: let the menu span the panel width instead of a fixed popover. */
@media (max-width: 480px) {
	.csd-try__more {
		display: flex;
	}

	.csd-try__menu {
		left: 0;
		right: 0;
		min-width: 0;
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   12. CelerSearch shop filter bar — brand the plugin's --cs-* custom props.
   Set on body (not :root) so they win over the plugin's :root regardless of
   stylesheet load order.
   -------------------------------------------------------------------------- */
body {
	--cs-primary: #0891b2;
	--cs-primary-hover: #0e7490;
	--cs-border: #e2e8f0;
	--cs-border-focus: #67e8f9;
	--cs-count-color: #64748b;
	--cs-bg: #f8fafc;
	--cs-pill-bg: #ecfeff;
	--cs-pill-border: #a5f3fc;
	--cs-text: #0f172a;
	--cs-text-muted: #64748b;
}

.cs-search-input,
.cs-sort-select,
.cs-filters-toggle {
	border-radius: 9999px;
}

.cs-search-input:focus,
.cs-sort-select:focus {
	box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

.cs-drawer {
	border-radius: 0 var(--csd-radius-lg) var(--csd-radius-lg) 0;
}

/* --------------------------------------------------------------------------
   13. Autocomplete popup restyle (plugin CSS is plain classes — the `body`
   prefix guarantees the specificity win independent of enqueue order).
   -------------------------------------------------------------------------- */
body .celersearch-autocomplete {
	border-radius: var(--csd-radius);
	border: 1px solid var(--csd-border);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(6, 182, 212, 0.08);
	margin-top: 8px;
}

body .celersearch-autocomplete__item:hover,
body .celersearch-autocomplete__item--selected {
	background: #ecfeff;
}

body .celersearch-autocomplete__post-type {
	color: var(--csd-primary-deep);
	background: #ecfeff;
	border-radius: 9999px;
}

body .celersearch-autocomplete__title:hover {
	color: var(--csd-primary-deep);
}

body .celersearch-autocomplete__view-all {
	color: var(--csd-primary-deep);
	font-weight: 600;
}

body .celersearch-autocomplete__page--current {
	background: var(--csd-primary-deep);
}

body .celersearch-autocomplete__page:focus-visible {
	border-color: var(--csd-primary);
	box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

body .celersearch-autocomplete__thumbnail,
body .celersearch-autocomplete__thumbnail-placeholder {
	border-radius: 8px;
}

/* Brand highlight instead of yellow — applies in the popup AND on the
   search results page (the plugin's shared .celersearch-highlight token). */
.celersearch-highlight {
	background-color: #cffafe;
	color: inherit;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   14. CelerSearch View facet builder (shop-page View → SearchWidget).
   The plugin ships this surface with neutral --cs-search-* defaults on :root;
   we retint them on `body` (wins for everything inside <body> regardless of
   stylesheet load order — same trick as section 12) and add a few branded
   touches on the BEM nodes so the facet column matches the "Try:" chips,
   header search and autocomplete instead of reading as vanilla grey.
   -------------------------------------------------------------------------- */
body {
	--cs-search-primary: #0891b2;
	--cs-search-primary-hover: #0e7490;
	--cs-search-border: #e2e8f0;
	--cs-search-border-focus: #67e8f9;
	--cs-search-bg: #f8fafc;
	--cs-search-text: #0f172a;
	--cs-search-text-muted: #64748b;
	--cs-search-pill-bg: #ecfeff;
	--cs-search-pill-border: #a5f3fc;
	--cs-search-radius: var(--csd-radius);
}

/* Sectioned facet headings: brand ink + a hairline rule turns the floating
   labels into a structured panel. */
body .cs-search__facet-heading {
	color: var(--csd-ink);
	padding-bottom: 0.4em;
	margin-bottom: 0.65em;
	border-bottom: 1px solid var(--csd-border);
}

/* Checkbox / rating / toggle rows get an edge-to-edge rounded hover (label
   text stays aligned with the heading via the bleed margin). */
body .cs-search__facet-item {
	margin: 0 -0.5em;
	padding: 0.3em 0.5em;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

body .cs-search__facet-item:hover {
	background: var(--cs-search-bg);
}

/* Size pills and colour swatches lift like the "Try:" chips on hover. */
body .cs-search__facet-pill,
body .cs-search__facet-swatch {
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body .cs-search__facet-pill:hover,
body .cs-search__facet-swatch:hover {
	transform: translateY(-1px);
	box-shadow: var(--csd-shadow-hover);
}

/* Crisper default ring on the colour dots; branded outline when selected. */
body .cs-search__swatch {
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

body .cs-search__facet-swatch[aria-pressed="true"] {
	border-color: var(--csd-primary);
}

/* Cyan focus glow on every facet control — mirrors the header search and the
   section-12 filter bar. */
body .cs-search__input:focus,
body .cs-search__facet-select:focus,
body .cs-search__combobox-toggle:focus,
body .cs-search__combobox-input:focus {
	box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

/* Searchable-dropdown popover: same soft brand shadow as the autocomplete. */
body .cs-search__combobox-panel {
	border-radius: var(--csd-radius);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(6, 182, 212, 0.08);
}

/* "+N more" reads as a brand link. */
body .cs-search__facet-more {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. Dark branded footer
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--csd-neutral);
	color: #cbd5e1;
}

.site-footer a:not(.button) {
	color: #e2e8f0;
}

.site-footer a:not(.button):hover {
	color: #67e8f9;
}

.csd-footer-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem 0 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.csd-footer-brand img {
	height: 32px;
	width: auto;
}

.csd-footer-brand__tag {
	font-size: 0.875rem;
	color: #94a3b8;
}

.site-info {
	font-size: 0.8125rem;
	color: #94a3b8;
}

/* -------------------------------------------------------------------------
 * 15. "How this was built" guide (before the footer on the shop / front page).
 * ---------------------------------------------------------------------- */
.csd-build-wrap { padding: 0 1.5rem; }
.csd-build {
	max-width: 1120px;
	margin: 2.5rem auto;
	padding: 2rem;
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(59, 130, 246, 0.05));
	border: 1px solid #a5f3fc;
	border-radius: var(--csd-radius-lg);
	font-family: var(--csd-font);
}
.csd-build__eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--csd-primary-deep); }
.csd-build__title { margin: 0.4rem 0 0; font-size: 1.5rem; color: var(--csd-ink); }
.csd-build__lede { margin: 0.5rem 0 0; max-width: 62ch; color: var(--csd-text); }
.csd-build__steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.csd-build__step { margin: 0; }
.csd-build__step-link { display: flex; gap: 0.75rem; align-items: flex-start; height: 100%; padding: 0.9rem 1rem; background: #fff; border: 1px solid var(--csd-border); border-radius: var(--csd-radius); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.csd-build__step-link:hover { border-color: var(--csd-primary); box-shadow: var(--csd-shadow-hover); transform: translateY(-1px); }
.csd-build__step-num { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 9999px; background: var(--csd-gradient); color: #fff; font-weight: 700; font-size: 0.8rem; }
.csd-build__step-body { display: flex; flex-direction: column; gap: 0.15rem; }
.csd-build__step-title { font-weight: 600; color: var(--csd-ink); }
.csd-build__step-desc { font-size: 0.85rem; color: var(--csd-muted); }
.csd-build__cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.csd-build__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 1.1rem; border-radius: 9999px; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: 1px solid var(--csd-border); color: var(--csd-ink); background: #fff; transition: transform 0.15s, box-shadow 0.15s; }
.csd-build__btn--primary { background: var(--csd-gradient); color: #fff; border-color: transparent; }
.csd-build__btn:hover { transform: translateY(-1px); box-shadow: var(--csd-shadow-hover); }
@media (max-width: 640px) {
	.csd-build__steps { grid-template-columns: 1fr; }
	.csd-build { padding: 1.5rem; }
}