/*
 Theme Name:   Avant Guard
 Description:  Avant Guard child theme for WoodMart. Brand tokens, fonts and homepage section styles.
 Author:       Avant Guard Smart Solutions Sdn Bhd
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   1. Brand tokens (from the Avant Guard design system)
   ========================================================================== */
:root {
	--ag-dark: #121212;          /* charcoal / near-black: header, hero, footer, dark panels */
	--ag-dark-2: #2a2a2a;        /* photo placeholders and raised panels on dark */
	--ag-gold: #c7a86e;          /* fills, buttons, accents on dark */
	--ag-gold-deep: #926410;     /* gold for text on light grounds */
	--ag-cream: #f5ecb5;         /* relief blocks, pills */
	--ag-cream-tint: #faf6e8;    /* alternate section background */
	--ag-white: #ffffff;
	--ag-ink: #262626;           /* body text on light */
	--ag-muted: #6b6b6b;         /* secondary text on light */
	--ag-on-dark: #f5f2ea;       /* text on dark */
	--ag-on-dark-muted: #c9c4b8; /* secondary text on dark */
	--ag-hairline: #e6e1d6;      /* borders on light */
	--ag-line-dark: rgba(245, 242, 234, 0.14);

	--ag-sans: "Montserrat", Arial, system-ui, sans-serif;
	--ag-serif: "Cormorant Garamond", Georgia, serif;

	--ag-radius-sm: 4px;
	--ag-radius-md: 8px;
	--ag-radius-lg: 16px;
	--ag-wrap: 1240px;
	--ag-gutter: 32px;
	--ag-section-y: 96px;
}

@media (max-width: 768px) {
	:root {
		--ag-gutter: 16px;
		--ag-section-y: 56px;
	}
}

/* ==========================================================================
   2. Section system (all homepage blocks use .ag-*)
   ========================================================================== */
.ag {
	font-family: var(--ag-sans);
	color: var(--ag-ink);
	-webkit-font-smoothing: antialiased;
}
.ag *, .ag *::before, .ag *::after { box-sizing: border-box; }
.ag h1, .ag h2, .ag h3, .ag p { margin: 0; font-family: var(--ag-sans); }
.ag a { text-decoration: none; }

.ag-section { padding: var(--ag-section-y) 0; background: var(--ag-white); }
.ag-section--dark { background: var(--ag-dark); color: var(--ag-on-dark); }
.ag-section--tint { background: var(--ag-cream-tint); }
.ag-section--flush { padding-top: 0; padding-bottom: 0; }

.ag-wrap {
	max-width: var(--ag-wrap);
	margin: 0 auto;
	padding: 0 var(--ag-gutter);
}

.ag-split {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: center;
}
.ag-split > * { flex: 1 1 440px; min-width: 0; }
@media (max-width: 768px) { .ag-split { gap: 32px; } }

.ag-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 48px;
}
.ag-head__text { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }

.ag-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(var(--ag-min, 240px), 1fr));
}

/* Type */
.ag-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ag-gold-deep);
}
.ag-section--dark .ag-eyebrow { color: var(--ag-gold); }

.ag-h1 {
	font-size: clamp(36px, 4.6vw, 64px);
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: inherit;
}
.ag-h2 {
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
	font-weight: 700;
	color: inherit;
}
.ag-h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: inherit; }
.ag-lead { font-size: 18px; line-height: 1.6; max-width: 540px; }
.ag-body { font-size: 16px; line-height: 1.7; }
.ag-small { font-size: 14px; line-height: 1.6; color: var(--ag-muted); }
.ag-section--dark .ag-lead,
.ag-section--dark .ag-small,
.ag-section--dark .ag-body { color: var(--ag-on-dark-muted); }
.ag-accent {
	font-family: var(--ag-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	color: var(--ag-gold-deep);
}
.ag-section--dark .ag-accent { color: var(--ag-gold); }
.ag-link { font-size: 14px; font-weight: 600; color: var(--ag-gold-deep); }
.ag-link:hover { color: var(--ag-ink); }

.ag-stack { display: flex; flex-direction: column; gap: 20px; }

/* Buttons */
.ag-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border-radius: var(--ag-radius-md);
	font-family: var(--ag-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	transition: background-color .2s, color .2s, border-color .2s;
}
.ag-btn--gold { background: var(--ag-gold); color: var(--ag-ink); }
.ag-btn--gold:hover { background: #d6bb86; color: var(--ag-ink); }
.ag-btn--dark { background: var(--ag-dark); color: var(--ag-on-dark); }
.ag-btn--dark:hover { background: #2e2e2e; color: var(--ag-on-dark); }
.ag-btn--line { border-color: var(--ag-dark); color: var(--ag-ink); }
.ag-btn--line:hover { background: var(--ag-dark); color: var(--ag-on-dark); }
.ag-btn--line-light { border-color: rgba(245, 242, 234, 0.4); color: var(--ag-on-dark); }
.ag-btn--line-light:hover { border-color: var(--ag-on-dark); color: var(--ag-on-dark); }
@media (max-width: 560px) {
	.ag-btns { flex-direction: column; align-items: stretch; }
}

/* Image slots: replace the placeholder <div> with an <img class="ag-img"> */
.ag-img, .ag-ph {
	display: block;
	width: 100%;
	border-radius: var(--ag-radius-lg);
	object-fit: cover;
}
.ag-ph {
	display: flex;
	align-items: flex-end;
	padding: 16px;
	background: var(--ag-cream-tint);
	border: 1px solid var(--ag-hairline);
	color: var(--ag-muted);
	font-size: 12px;
}
.ag-section--dark .ag-ph { background: var(--ag-dark-2); border-color: transparent; color: var(--ag-on-dark-muted); }

/* Check list */
.ag-checks { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.ag-checks span { display: inline-flex; align-items: center; gap: 8px; }
.ag-checks svg { flex: none; }

/* ==========================================================================
   3. Hero
   ========================================================================== */
.ag-hero { padding: 72px 0 96px; }
.ag-hero .ag-checks {
	padding-top: 24px;
	margin-top: 8px;
	border-top: 1px solid var(--ag-line-dark);
	color: var(--ag-on-dark);
}
.ag-hero__media { position: relative; }
.ag-hero__media .ag-img, .ag-hero__media .ag-ph { height: 540px; }
.ag-status {
	position: absolute;
	top: 32px;
	left: -24px;
	width: 260px;
	padding: 20px;
	background: var(--ag-white);
	color: var(--ag-ink);
	border-radius: var(--ag-radius-lg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
}
.ag-status__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--ag-hairline); }
.ag-status__top b { letter-spacing: .08em; text-transform: uppercase; color: var(--ag-gold-deep); }
.ag-status__top span { color: var(--ag-muted); font-weight: 500; }
.ag-status__row { display: flex; justify-content: space-between; }
.ag-status__row b { font-weight: 600; }
.ag-status__note { background: var(--ag-cream); border-radius: var(--ag-radius-md); padding: 10px 12px; font-size: 13px; font-weight: 600; }
@media (max-width: 768px) {
	.ag-hero { padding: 40px 0 56px; }
	.ag-hero__media .ag-img, .ag-hero__media .ag-ph { height: 320px; }
	.ag-status { left: 12px; right: 12px; top: 16px; width: auto; }
}

/* ==========================================================================
   4. Trust strip
   ========================================================================== */
.ag-trust { border-bottom: 1px solid var(--ag-hairline); }
.ag-trust .ag-grid { --ag-min: 220px; padding: 28px 0; font-size: 14px; font-weight: 500; }
.ag-trust span { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   5. Cards (solutions, categories, steps, quotes)
   ========================================================================== */
.ag-card { display: flex; flex-direction: column; gap: 16px; color: var(--ag-ink); }
.ag-card:hover { color: var(--ag-ink); }
.ag-card .ag-ph, .ag-card .ag-img { aspect-ratio: 4 / 5; }
.ag-card__text { display: flex; flex-direction: column; gap: 6px; }

.ag-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ag-hairline);
	border-radius: var(--ag-radius-lg);
	overflow: hidden;
	color: var(--ag-ink);
	transition: border-color .2s;
}
.ag-tile:hover { border-color: var(--ag-gold); color: var(--ag-ink); }
.ag-tile .ag-ph, .ag-tile .ag-img { height: 240px; border-radius: 0; border: 0; }
.ag-tile__foot { padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ag-tile__arrow { font-size: 20px; color: var(--ag-gold-deep); }

/* Phone layouts: solutions swipe sideways, categories go two-up */
@media (max-width: 768px) {
	.ag-grid.ag-scroll {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--ag-gutter);
		margin: 0 calc(-1 * var(--ag-gutter));
		padding: 0 var(--ag-gutter) 4px;
	}
	.ag-scroll > * { flex: 0 0 72%; scroll-snap-align: start; }
	.ag-scroll .ag-ph, .ag-scroll .ag-img { aspect-ratio: auto; height: 260px; }

	.ag-grid.ag-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ag-grid--tiles .ag-ph, .ag-grid--tiles .ag-img { height: 130px; font-size: 10px; padding: 8px; }
	.ag-grid--tiles .ag-tile__foot { padding: 12px; }
	.ag-grid--tiles .ag-small, .ag-grid--tiles .ag-tile__arrow { display: none; }
	.ag-grid--tiles .ag-h3 { font-size: 14px; }
}

.ag-step { border-top: 2px solid var(--ag-gold); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.ag-step__num { font-family: var(--ag-serif); font-style: italic; font-weight: 500; font-size: 36px; line-height: 1; color: var(--ag-gold-deep); }

.ag-quote {
	margin: 0;
	background: var(--ag-white);
	border: 1px solid var(--ag-hairline);
	border-radius: var(--ag-radius-lg);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.ag-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.7; font-style: normal; }
.ag-quote figcaption { padding-top: 16px; border-top: 1px solid var(--ag-hairline); display: flex; flex-direction: column; gap: 4px; }

.ag-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding-top: 40px; }
.ag-partners img { height: 40px; width: auto; filter: grayscale(1); opacity: .7; }

.ag-box {
	border: 1px solid var(--ag-line-dark);
	border-radius: var(--ag-radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ==========================================================================
   6. LOCAMESH comparison table
   ========================================================================== */
.ag-compare {
	background: var(--ag-white);
	border: 1px solid var(--ag-hairline);
	border-radius: var(--ag-radius-lg);
	overflow: hidden;
	font-size: 14px;
}
.ag-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	border-bottom: 1px solid var(--ag-hairline);
}
.ag-compare__row:last-child { border-bottom: 0; }
.ag-compare__row > * { padding: 18px 16px; }
.ag-compare__row > *:first-child { padding-left: 20px; font-weight: 600; }
.ag-compare__row--head { background: var(--ag-dark); color: var(--ag-on-dark); font-size: 13px; font-weight: 600; border-bottom: 0; }
.ag-compare__them { color: var(--ag-muted); }
.ag-compare__row--head .ag-compare__them { color: var(--ag-on-dark-muted); }
.ag-compare__us { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.ag-compare__row--head .ag-compare__us { color: var(--ag-gold); }
@media (max-width: 560px) {
	.ag-compare { font-size: 13px; }
	.ag-compare__row > * { padding: 12px 8px; }
	.ag-compare__row > *:first-child { padding-left: 12px; }
}

/* ==========================================================================
   7. Lock finder band
   ========================================================================== */
.ag-band {
	background: var(--ag-cream);
	border-radius: var(--ag-radius-lg);
	padding: 48px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	align-items: center;
}
.ag-band__text { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.ag-band__title { font-size: 28px; line-height: 1.2; font-weight: 700; }
@media (max-width: 768px) { .ag-band { padding: 24px; } .ag-band__title { font-size: 22px; } }

/* ==========================================================================
   8. Showroom details
   ========================================================================== */
.ag-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 0;
	border-top: 1px solid var(--ag-hairline);
	border-bottom: 1px solid var(--ag-hairline);
	font-size: 15px;
}
.ag-showroom .ag-ph, .ag-showroom .ag-img { height: 420px; }
@media (max-width: 768px) { .ag-showroom .ag-ph, .ag-showroom .ag-img { height: 240px; } }


/* ==========================================================================
   9. Page integration with WoodMart
   ========================================================================== */
/* Sections run edge to edge even inside WoodMart's content container */
.entry-content > .ag,
.wd-entry-content > .ag,
.ag.ag-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body.home { overflow-x: hidden; }
body.home .page-title,
body.home .wd-page-title { display: none; }
body.home .main-page-wrapper { padding-top: 0; }
body.home .site-content,
body.home .entry-content { margin-bottom: 0; }
body.home .wd-content-layout { padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   10. WoodMart brand overrides (colours, fonts, buttons, radii)
   ========================================================================== */
html:root {
	--wd-primary-color: #c7a86e;
	--wd-alternative-color: #926410;

	--wd-text-font: "Montserrat", Arial, system-ui, sans-serif;
	--wd-text-color: #555555;
	--wd-title-font: "Montserrat", Arial, system-ui, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #262626;
	--wd-entities-title-font: "Montserrat", Arial, system-ui, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #262626;
	--wd-entities-title-color-hover: #926410;
	--wd-alternative-font: "Cormorant Garamond", Georgia, serif;
	--wd-widget-title-font: "Montserrat", Arial, system-ui, sans-serif;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #262626;
	--wd-header-el-font: "Montserrat", Arial, system-ui, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 14px;

	--wd-link-color: #262626;
	--wd-link-color-hover: #926410;

	--wd-brd-radius: 8px;
	--wd-form-brd-radius: 4px;
	--wd-form-brd-width: 1px;

	--btn-default-bgcolor: #121212;
	--btn-default-bgcolor-hover: #2e2e2e;
	--btn-default-color: #f5f2ea;
	--btn-default-color-hover: #f5f2ea;
	--btn-default-brd-radius: 8px;
	--btn-accented-bgcolor: #c7a86e;
	--btn-accented-bgcolor-hover: #d6bb86;
	--btn-accented-color: #262626;
	--btn-accented-color-hover: #262626;
	--btn-accented-brd-radius: 8px;
}

/* ==========================================================================
   11. Header extras
   ========================================================================== */
.ag-header-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	margin-left: 12px;
	border-radius: 8px;
	background: #c7a86e;
	color: #262626 !important;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .2s;
}
.ag-header-cta:hover { background: #d6bb86; }
.whb-general-header .wd-nav-main > li > a { font-size: 14px; font-weight: 500; }
.whb-top-bar a:hover { color: #f5f2ea !important; }
@media (max-width: 1200px) { .ag-header-cta { display: none; } }

/* ==========================================================================
   12. Footer (WoodMart footer set to the "Avant Guard footer" HTML block)
   ========================================================================== */
.wd-footer { background: #121212; }
.wd-footer .main-footer,
.wd-footer .container { padding-top: 0; padding-bottom: 0; }
.wd-footer .wd-copyrights,
.wd-footer .copyrights-wrapper { display: none; }
.ag-footer { background: var(--ag-dark); color: var(--ag-on-dark); padding: 72px 0 32px; }
.ag-footer__top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.ag-footer__brand { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.ag-footer__logo { height: 28px; width: auto; align-self: flex-start; }
.ag-footer__cols { flex: 2 1 560px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; }
.ag-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.ag-footer__col b { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ag-gold); }
.ag-footer a { color: var(--ag-on-dark); }
.ag-footer a:hover { color: var(--ag-gold); }
.ag-footer .ag-small { color: var(--ag-on-dark-muted); }
.ag-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ag-line-dark); font-size: 13px; color: var(--ag-on-dark-muted); }
.ag-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ag-footer__bottom a { color: var(--ag-on-dark-muted); }

/* ==========================================================================
   13. Shop and product pages
   ========================================================================== */
/* Old product descriptions carry inline fonts from the previous theme */
.woocommerce-product-details__short-description :is(p, span, li, td, div, strong, b, em, a, h1, h2, h3, h4, h5, h6),
.woocommerce-Tabs-panel :is(p, span, li, td, th, div, strong, b, em, a, h1, h2, h3, h4, h5, h6),
.wd-single-content :is(p, span, li, td, th, div, strong, b, em, a) {
	font-family: "Montserrat", Arial, system-ui, sans-serif !important;
}
.woocommerce-product-details__short-description { font-size: 15px; line-height: 1.7; color: #555555; }
/* Prices in ink: gold text on white is below contrast */
.price, .price .amount, .woocommerce-Price-amount { color: #262626; }
.product-grid-item .price { font-weight: 600; }
.single-product .summary .price { font-size: 28px; font-weight: 700; }
/* Category hero banner on brand dark */
.wd-page-title { background-color: #121212; }

/* ==========================================================================
   14. Inner pages (solutions, support, LOCAMESH, about, contact)
   ========================================================================== */
/* Pages built with .ag-page carry their own hero, so WoodMart's title bar goes */
body:has(.ag-page) .wd-page-title,
body:has(.ag-page) .page-title { display: none; }
body:has(.ag-page) .main-page-wrapper { padding-top: 0; }
body:has(.ag-page) .site-content,
body:has(.ag-page) .entry-content,
body:has(.ag-page) .wd-entry-content { margin-bottom: 0; }
body:has(.ag-page) { overflow-x: hidden; }

.ag-crumbs { font-size: 13px; color: var(--ag-muted); padding-bottom: 32px; }
.ag-crumbs a { color: var(--ag-muted); }
.ag-crumbs a:hover { color: var(--ag-ink); }
.ag-crumbs span { color: var(--ag-ink); }
.ag-section--dark .ag-crumbs, .ag-section--dark .ag-crumbs a { color: var(--ag-on-dark-muted); }
.ag-section--dark .ag-crumbs span { color: var(--ag-on-dark); }

.ag-hero--page { padding: 32px 0 88px; }
.ag-hero--page .ag-ph, .ag-hero--page .ag-img { height: 440px; }
.ag-hero--center .ag-stack { align-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.ag-hero--center .ag-lead { max-width: 620px; }
@media (max-width: 768px) {
	.ag-hero--page { padding: 24px 0 56px; }
	.ag-hero--page .ag-ph, .ag-hero--page .ag-img { height: 260px; }
}

/* Stats */
.ag-stats { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ag-stat { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1px solid var(--ag-hairline); }
.ag-stat b { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; color: var(--ag-gold-deep); }
.ag-stat span { font-size: 14px; line-height: 1.5; color: var(--ag-muted); }

/* Pain points */
.ag-pains { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ag-pain { background: var(--ag-white); border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ag-pain h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-gold-deep); }
.ag-pain ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ag-pain li { font-size: 14px; line-height: 1.55; padding-left: 18px; position: relative; }
.ag-pain li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--ag-ink); }

/* Feature cards */
.ag-feature { border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; background: var(--ag-white); }
.ag-feature .ag-step__num { font-size: 30px; }
.ag-section--dark .ag-feature { background: transparent; border-color: var(--ag-line-dark); }

/* Story block */
.ag-story { font-family: var(--ag-serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.45; color: var(--ag-on-dark); }

/* Pills */
.ag-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-pills span { background: var(--ag-cream); color: var(--ag-ink); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.ag-section--dark .ag-pills span { background: rgba(245, 242, 234, 0.08); color: var(--ag-on-dark); }

/* FAQ */
.ag-faq { display: flex; flex-direction: column; }
.ag-faq details { border-bottom: 1px solid var(--ag-hairline); padding: 20px 0; }
.ag-faq summary { font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::after { content: "+"; color: var(--ag-gold-deep); font-weight: 400; font-size: 22px; line-height: 1; }
.ag-faq details[open] summary::after { content: "–"; }
.ag-faq details p { padding-top: 12px; font-size: 15px; line-height: 1.7; }

/* Link lists and nav cards */
.ag-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ag-links a { background: var(--ag-white); border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-md); padding: 16px 20px; color: var(--ag-ink); font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; transition: border-color .2s; }
.ag-links a::after { content: "→"; color: var(--ag-gold-deep); }
.ag-links a:hover { border-color: var(--ag-gold); color: var(--ag-ink); }
.ag-navcard { border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; color: var(--ag-ink); background: var(--ag-white); transition: border-color .2s; }
.ag-navcard:hover { border-color: var(--ag-gold); color: var(--ag-ink); }
.ag-navcard svg { margin-bottom: 4px; }

/* Solutions hub groups */
.ag-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--ag-hairline); }
.ag-group:first-of-type { border-top: 0; padding-top: 0; }
.ag-group__text { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) { .ag-group { grid-template-columns: 1fr; gap: 20px; } }

/* Comparison flow (LOCAMESH) */
.ag-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ag-flow span { background: var(--ag-cream-tint); border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-md); padding: 10px 14px; }
.ag-flow i { font-style: normal; color: var(--ag-muted); }
.ag-flow--us span { background: var(--ag-cream); border-color: var(--ag-gold); }

/* Timeline */
.ag-timeline { display: flex; flex-direction: column; }
.ag-timeline > div { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--ag-hairline); }
.ag-timeline b { font-family: var(--ag-serif); font-style: italic; font-weight: 500; font-size: 26px; color: var(--ag-gold-deep); line-height: 1; }

/* Reseller cards */
.ag-store { border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; background: var(--ag-white); }
.ag-store .ag-eyebrow { font-size: 11px; }

/* Forms (Contact Form 7 inside .ag-form) */
.ag-form { border: 1px solid var(--ag-hairline); border-radius: var(--ag-radius-lg); padding: 32px; background: var(--ag-white); color: var(--ag-ink); }
.ag-form p { margin: 0 0 16px; font-size: 13px; font-weight: 600; }
.ag-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ag-form select, .ag-form textarea {
	width: 100%; font-family: var(--ag-sans); font-size: 15px; font-weight: 400;
	padding: 12px 14px; border: 1px solid #c9c4b8; border-radius: 4px; background: var(--ag-white); color: var(--ag-ink); margin-top: 6px;
}
.ag-form textarea { min-height: 120px; }
.ag-form input[type=submit], .ag-form button {
	width: 100%; min-height: 52px; background: var(--ag-dark); color: var(--ag-on-dark); border: 0;
	border-radius: var(--ag-radius-md); font-family: var(--ag-sans); font-size: 15px; font-weight: 600; cursor: pointer;
}
.ag-form input[type=submit]:hover { background: #2e2e2e; }
@media (max-width: 560px) { .ag-form { padding: 20px; } }

.ag-cert { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; font-weight: 600; color: var(--ag-muted); }
.ag-section--dark .ag-cert { color: var(--ag-on-dark-muted); }
.ag-note { font-size: 12px; color: var(--ag-muted); }

/* WoodMart 8 content wrapper adds 40px top/bottom padding; full-bleed pages don't want it */
body.home .wd-content-layout,
body:has(.ag-page) .wd-content-layout { padding-top: 0; padding-bottom: 0; }

/* Header: keep the 6-item main menu on one line on laptop widths */
@media (min-width: 1025px) {
	.whb-header .wd-header-main-nav .wd-nav { flex-wrap: nowrap; }
	.whb-header .wd-nav-main > li > a { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
	.whb-header .wd-header-my-account .wd-tools-text { display: none; }
}

/* Google rating and reviews */
.ag-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 4px; }
.ag-rating b { font-size: 32px; line-height: 1; font-weight: 700; color: var(--ag-ink); }
.ag-stars { color: var(--ag-gold); letter-spacing: 2px; font-size: 18px; line-height: 1; }
.ag-reviews .ag-quote { gap: 14px; }
.ag-reviews .ag-quote blockquote { font-size: 15px; line-height: 1.65; }
@media (max-width: 768px) { .ag-reviews.ag-scroll > * { flex-basis: 85%; } }

/* 15. Video setting guides (Support) */
.ag-vids__bar { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin-bottom:28px; }
.ag-vids__q { flex:1 1 260px; max-width:340px; height:44px; padding:0 16px; border:1px solid var(--ag-hairline); border-radius:8px; background:#fff; font:inherit; font-size:14px; }
.ag-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ag-chips button { height:36px; padding:0 14px; border:1px solid var(--ag-hairline); border-radius:999px; background:#fff; color:var(--ag-ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.ag-chips button:hover { border-color:var(--ag-ink); }
.ag-chips button.is-on { background:var(--ag-ink); border-color:var(--ag-ink); color:#fff; }
.ag-vids { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:24px; }
.ag-vid[hidden] { display:none; }
.ag-vid__play, .ag-vid__frame { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; border-radius:var(--ag-radius-lg); overflow:hidden; background:#111; cursor:pointer; }
.ag-vid__play img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ag-vid__play:hover img { transform:scale(1.04); }
.ag-vid__icon { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(0,0,0,.6); }
.ag-vid__icon::after { content:""; position:absolute; left:21px; top:16px; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff; }
.ag-vid__play:hover .ag-vid__icon { background:var(--ag-gold); }
.ag-vid__text { display:flex; flex-direction:column; gap:4px; padding-top:12px; }
.ag-vids__empty { padding-top:16px; }
@media (max-width:560px){ .ag-vids { grid-template-columns:1fr 1fr; gap:16px; } .ag-vid__text .ag-h3 { font-size:16px; } .ag-vids__q { max-width:none; } }

/* 16. Room scenes, taglines, awards, process photo */
.ag-room__open { align-self:flex-start; margin-top:4px; padding:0; border:0; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--ag-gold-deep); cursor:pointer; }
.ag-room__open:hover { color:var(--ag-ink); }
.ag-dlg { width:min(920px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:var(--ag-radius-lg); background:var(--ag-white, #fff); color:var(--ag-ink); overflow:auto; }
.ag-dlg::backdrop { background:rgba(15,15,15,.72); }
.ag-dlg[open] { display:flex; flex-wrap:wrap; }
.ag-dlg__media { position:relative; flex:1 1 360px; min-height:260px; }
.ag-dlg__media .ag-img { position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
.ag-dlg__body { flex:1 1 380px; display:flex; flex-direction:column; gap:14px; padding:36px; }
.ag-dlg__x { position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.ag-dlg__x:hover { background:var(--ag-dark); }
.ag-scenes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ag-scenes li { display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:2px solid var(--ag-gold); font-size:14px; line-height:1.55; }
.ag-scenes b { font-size:15px; }
.ag-dlg__note { display:flex; gap:8px; align-items:center; color:var(--ag-gold-deep); font-weight:600; }
@media (max-width:640px){ .ag-dlg__media { min-height:200px; } .ag-dlg__body { padding:24px 20px; } .ag-dlg .ag-btns { flex-direction:column; align-items:stretch; } }
.ag-tag { font-family:var(--ag-serif); font-style:italic; font-size:19px; line-height:1.3; color:var(--ag-gold-deep); }
.ag-award { display:flex; flex-direction:column; gap:8px; padding:28px 24px; border:1px solid var(--ag-hairline); border-radius:var(--ag-radius-lg); background:var(--ag-white, #fff); color:var(--ag-gold-deep); }
.ag-award .ag-h3, .ag-award .ag-small { color:var(--ag-ink); }
.ag-award .ag-small { color:var(--ag-muted); }
.ag-award__lvl { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ag-award--top { background:var(--ag-dark); border-color:var(--ag-dark); color:var(--ag-gold); }
.ag-award--top .ag-h3 { color:var(--ag-on-dark); } .ag-award--top .ag-small { color:var(--ag-on-dark-muted); }
.ag-badges { display:flex; flex-wrap:wrap; gap:12px 28px; padding-top:32px; margin-top:32px; border-top:1px solid var(--ag-hairline); font-size:14px; font-weight:600; }
.ag-badges span { display:inline-flex; align-items:center; gap:8px; } .ag-badges svg { color:var(--ag-gold-deep); }
.ag-process { align-items:stretch; }
.ag-process > .ag-ph, .ag-process > .ag-img { min-height:380px; }
@media (max-width:768px){ .ag-process > .ag-ph, .ag-process > .ag-img { min-height:240px; } }