/* =====================================================================
   SEO Landing template  (Figma "BLACK FRIDAY SEO PAGES")
   High-fidelity, token-driven. All colors/fonts reuse the theme vars.
   Everything scoped under .seo_landing so existing pages are untouched.
   ===================================================================== */

.seo_landing{
	/* 1360 - 2*40 side gutter = 1280px content column, centered on the 1440
	   Figma frame (80px gutter) — matches the landing frame's 1280 container
	   with cards at 256px each / 20px gap. */
	--seo-max: 1360px;
	--seo-gut: 40px;
	--seo-body: rgba(15,14,13,.70);           /* onyx @70% */
	--seo-hair: var(--pearl-dark);
	background: var(--pearl);
	color: var(--onyx);
	font-family: 'FoundersGrotesk', Helvetica, Arial, sans-serif;
	overflow-x: clip;
}
.seo_landing *{ box-sizing: border-box; }

/* shared primitives ------------------------------------------------- */
.seo_landing .seo-eyebrow{
	font-family: 'FoundersGrotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: .20em;
	font-size: 12.5px;
	line-height: 1.4;
	margin: 0;
}
.seo_landing .seo-body{
	font-family: 'FoundersGrotesk', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--seo-body);
	margin: 0;
}
.seo_landing .seo-section-heading{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.15;
	color: var(--onyx);
	margin: 0 0 14px;
}

/* ===================== HERO ===================== */
.seo_landing .seo-hero{
	position: relative;
	min-height: clamp(560px, 78vh, 820px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: #fff;
	padding: 60px 24px;
}
.seo_landing .seo-hero-media{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	z-index: 0;
}
.seo_landing .seo-hero-overlay{
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(15,14,13,.34) 0%, rgba(15,14,13,.18) 40%, rgba(15,14,13,.42) 100%);
}
.seo_landing .seo-hero-inner{
	position: relative;
	z-index: 2;
	max-width: 1120px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.seo_landing .seo-hero-eyebrow{
	color: #fff;
	opacity: .9;
	margin-bottom: 20px;
}
.seo_landing .seo-hero-headline{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(40px, 5vw, 66px);
	line-height: 1.08;
	margin: 0;
	color: #fff;
	text-wrap: balance;
}
.seo_landing .seo-hero-offers{
	display: grid;
	grid-template-columns: 1fr 1fr;   /* two offer boxes on top... */
	width: 100%;
	max-width: 760px;
	margin: 40px auto 0;
	border: 1px solid rgba(255,255,255,.55);
}
.seo_landing .seo-hero-offer{
	min-width: 0;
	padding: 30px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.seo_landing .seo-hero-offer:nth-child(2){ border-left: 1px solid rgba(255,255,255,.4); }
/* ...the gift-card box spans the full width underneath them */
.seo_landing .seo-hero-offer:nth-child(3){ grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.4); }
.seo_landing .seo-hero-offer-title{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: clamp(21px, 1.7vw, 27px);
	line-height: 1.18;
	letter-spacing: -.005em;
	margin: 0 0 12px;
	color: #fff;
	text-wrap: balance;
}
.seo_landing .seo-hero-offer-sub{
	font-family: 'FoundersGrotesk', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: .02em;
	margin: 0;
	color: #fff;
	opacity: .82;
}
.seo_landing .seo-hero-subline{
	font-size: 15px;
	margin-top: 26px;
	color: #fff;
	opacity: .92;
}
@media(max-width:700px){
	.seo_landing .seo-hero{ min-height: auto; padding: 44px 18px 52px; }
	.seo_landing .seo-hero-headline{ font-size: clamp(30px, 8.5vw, 42px); line-height: 1.1; }
	.seo_landing .seo-hero-offers{ grid-template-columns: 1fr; width: 100%; margin-top: 28px; }
	.seo_landing .seo-hero-offer{ width: 100%; min-width: 0; padding: 20px 18px; }
	.seo_landing .seo-hero-offer:nth-child(2){ border-left: 0; border-top: 1px solid rgba(255,255,255,.4); }
	.seo_landing .seo-hero-offer-title{ font-size: 22px; margin-bottom: 8px; }
	.seo_landing .seo-hero-subline{ margin-top: 20px; }
}

/* ===================== JADE OFFER BAND ===================== */
.seo_landing .seo-offerband{
	background: var(--jade);
	color: var(--pearl);
}
.seo_landing .seo-offerband-inner{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.seo_landing .seo-offer-col{
	text-align: center;
	padding: 46px 28px;
	border-left: 1px solid rgba(250,243,237,.14);
}
.seo_landing .seo-offer-col:first-child{ border-left: 0; }
.seo_landing .seo-offer-eyebrow{
	color: var(--pearl);
	opacity: .70;
	margin-bottom: 14px;
}
.seo_landing .seo-offer-line{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: clamp(22px, 2.1vw, 31px);
	line-height: 1.2;
	margin: 0;
	color: var(--pearl);
}

/* ===================== PROMISES MARQUEE ===================== */
.seo_landing .seo-promises{
	background: #c7d1e1; /* periwinkle, per Figma */
	overflow: hidden;
	padding: 17px 0;
}
.seo_landing .seo-promises-track{
	display: flex;
	width: max-content;
	animation: seoMarquee 168s linear infinite; /* 4x content per half -> 4x duration keeps the same px/sec */
}
.seo_landing .seo-promises-group{ display: flex; align-items: center; }
.seo_landing .seo-promise,
.seo_landing .seo-promise-dot{
	color: var(--sapphire);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0 38px;
}
.seo_landing .seo-promise-dot{ padding: 0; opacity: .5; }
@keyframes seoMarquee{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
	.seo_landing .seo-promises-track{ animation: none; }
}

/* ===================== INTRO ===================== */
.seo_landing .seo-intro{
	text-align: center;
	padding: clamp(48px, 6vw, 80px) 24px clamp(30px, 3vw, 42px);
}
.seo_landing .seo-intro-inner{ max-width: 760px; margin: 0 auto; }
.seo_landing .seo-intro-eyebrow{ color: var(--onyx-light); opacity: .8; margin-bottom: 20px; }
.seo_landing .seo-intro-headline{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	text-transform: uppercase;
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1.1;
	margin: 0 0 18px;
}
.seo_landing .seo-intro-body{ max-width: 58ch; margin: 0 auto; }

/* pills — sit outside the 760px intro-inner, so all categories fit on one line */
.seo_landing .seo-pills{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 30px auto 0;
	max-width: var(--seo-max);
	padding: 0 var(--seo-gut);
}
.seo_landing .seo-pill{
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid var(--seo-hair);
	background: transparent;
	color: var(--onyx);
	font-size: 12px;
	letter-spacing: .10em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.seo_landing .seo-pill:hover{ border-color: var(--jade); }
.seo_landing .seo-pill.active{
	background: var(--jade);
	border-color: var(--jade);
	color: var(--pearl);
}

/* ===================== STICKY CATEGORY NAV (real position:sticky) =====================
   The pills live in the flow; as you scroll they catch under the theme's sticky header
   and ride along within .seo-catnav-scope (the category area), then release. Not a
   separate fixed bar. */
.seo_landing .seo-catnav{
	position: -webkit-sticky;
	position: sticky;
	top: 58px;              /* just under the collapsed theme header (~60px) */
	z-index: 50;
	background: var(--pearl);
	padding: 16px 0;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}
/* once it's actually pinned, JS adds .is-stuck for the hairline + lift */
.seo_landing .seo-catnav.is-stuck{
	border-bottom-color: var(--seo-hair);
	box-shadow: 0 6px 18px rgba(15,14,13,.05);
}
.seo_landing .seo-catnav .seo-pills{ margin: 0 auto; }

/* ===================== CATEGORY SECTIONS ===================== */
.seo_landing .seo-cat{
	max-width: var(--seo-max);
	margin: 0 auto;
	padding: clamp(40px, 4.5vw, 62px) var(--seo-gut) 10px;
	scroll-margin-top: 140px;  /* clears the sticky header + anchor bar */
}
.seo_landing .seo-cat-head-top{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
}
.seo_landing .seo-cat-title{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: clamp(24px, 2.8vw, 36px);  /* 24 on mobile -> 36 on desktop */
	line-height: 1.15;
	margin: 0;
	text-transform: none;
	letter-spacing: .01em;
}
.seo_landing .seo-seeall{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--onyx-light);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
.seo_landing .seo-seeall:hover{ border-bottom-color: var(--onyx); }
/* Figma category 'Body' text frame is 644px wide (node under Page title). */
.seo_landing .seo-cat-copy{ margin-top: 14px; max-width: 644px; }

/* ---- horizontal card row ---- */
.seo_landing .seo-cards-row{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 28px;
	padding-bottom: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
.seo_landing .seo-cards-row::-webkit-scrollbar{ height: 6px; }
.seo_landing .seo-cards-row::-webkit-scrollbar-thumb{ background: var(--seo-hair); border-radius: 10px; }

/* reuse the theme product card; override the grid layout -> flex row */
.seo_landing .seo-cards{ flex: 0 0 auto; }
.seo_landing .seo-cards ul.products{
	display: flex !important;
	align-items: flex-start !important;
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	width: auto !important;
}
.seo_landing .seo-cards ul.products::before,
.seo_landing .seo-cards ul.products::after{ display: none !important; content: none !important; }
.seo_landing .seo-cards ul.products li.product{
	width: 256px !important;
	flex: 0 0 256px !important;
	align-self: flex-start !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	scroll-snap-align: start;
	text-align: center;
}
.seo_landing .seo-cards ul.products li.product::before{ content: none !important; }

/* Sale tag — Figma spec: terracotta "XX% Off" pill, top-left (same slot as the
   theme's highlight/"Best Selling" badge). The theme only emits WooCommerce's
   default .onsale flash on an on-sale card; this wires the brand token + pill
   shape into it so a sale product matches the design instead of the bare default.
   Not exercised on /gemstones/ (no sale products); verify on a page with a sale. */
.seo_landing .seo-cards ul.products li.product .onsale{
	position: absolute;
	top: 15px;
	left: 20px;
	right: auto;
	margin: 0;
	z-index: 3;
	min-height: 0;
	min-width: 0;
	line-height: 1.1;
	padding: 3px 11px;
	font-family: 'FoundersGrotesk', sans-serif;
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: none;
	background: var(--terracotta);
	color: var(--pearl);
	border-radius: 999px;
}

/* See-All jade card (last tile in the row) */
.seo_landing .seo-seeall-card{
	flex: 0 0 256px;
	width: 256px;
	align-self: stretch;
	min-height: 300px;
	border-radius: 8px;
	background: var(--jade);
	color: var(--pearl);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	padding: 40px 32px;
	scroll-snap-align: start;
	transition: transform .18s ease;
}
.seo_landing .seo-seeall-card:hover{ transform: translateY(-3px); }
.seo_landing .seo-seeall-card .seo-eyebrow{ color: var(--pearl); opacity: .72; letter-spacing: .12em; white-space: normal; max-width: 100%; }
.seo_landing .seo-seeall-card-title{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: 28px;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: .01em;
}
.seo_landing .seo-seeall-card-sub{ font-size: 14px; opacity: .8; }
.seo_landing .seo-seeall-card-arrow{ margin-top: 6px; color: var(--pearl); }

/* ===================== USA BANNER ===================== */
.seo_landing .seo-usa{
	position: relative;
	margin-top: clamp(40px, 5vw, 70px);
	min-height: clamp(360px, 44vh, 540px);
	background-size: cover;
	background-position: center 40%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
}
.seo_landing .seo-usa::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,14,13,0) 45%, rgba(15,14,13,.55) 100%);
}
.seo_landing .seo-usa-inner{ position: relative; z-index: 1; padding: 0 24px 56px; max-width: 900px; }
.seo_landing .seo-usa-heading{
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.18;
	color: var(--pearl);
	margin: 0;
}

/* ===================== FAQ ===================== */
.seo_landing .seo-faqs{ padding: clamp(50px, 6vw, 84px) 24px; }
.seo_landing .seo-faqs-inner{ max-width: 860px; margin: 0 auto; }
.seo_landing .seo-faqs .seo-section-heading{ text-align: center; margin-bottom: 30px; }

/* ===================== REVIEWS =====================
   Card look + the seamless CSS marquee (review_scroll, pause on hover >=992px)
   come from the theme's reviews.css, which is already enqueued on SEO pages, so
   this matches the homepage "Hear from our customers" exactly. We only own the
   section wrapper + the gap between cards (the native build relies on Swiper's
   spaceBetween for that; we add it in CSS since no Swiper runs here). */
.seo_landing .seo-reviews{ padding: clamp(40px, 5vw, 72px) 0 clamp(50px, 5vw, 80px); text-align: center; }
.seo_landing .seo-reviews-head{ max-width: 620px; margin: 0 auto 10px; padding: 0 24px; }
.seo_landing .seo-reviews-marquee{ margin-top: 30px; }
.seo_landing .seo-reviews-marquee .review-item{ margin-right: 20px; }   /* uniform gap on both halves -> -50% loop stays seamless */

/* ===================== SHOP BY CATEGORY ===================== */
.seo_landing .seo-shopcat{ padding: clamp(30px, 4vw, 56px) var(--seo-gut) clamp(60px, 6vw, 90px); }
.seo_landing .seo-shopcat-inner{ max-width: var(--seo-max); margin: 0 auto; }
.seo_landing .seo-shopcat .seo-section-heading{ text-align: center; margin-bottom: 28px; }
.seo_landing .seo-shopcat-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}
.seo_landing .seo-shopcat-tile{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 26px 26px;
	border: 1px solid var(--seo-hair);
	border-radius: 8px;
	background: #fff;
	color: var(--onyx);
	text-decoration: none;
	font-family: 'Canela', Georgia, serif;
	font-weight: 300;
	font-size: 20px;
	transition: border-color .18s ease, transform .18s ease;
}
.seo_landing .seo-shopcat-tile:hover{ border-color: var(--onyx); transform: translateY(-2px); }
.seo_landing .seo-shopcat-arrow{ color: var(--onyx-light); display: inline-flex; align-items: center; flex: 0 0 auto; }

/* ===================== RESPONSIVE (mobile 390) ===================== */
@media (max-width: 900px){
	.seo_landing{ --seo-gut: 20px; }
	/* tighten the stacked mobile rhythm: the intro bottom + first category top were
	   compounding to ~70px between the pills and the first heading */
	.seo_landing .seo-intro{ padding-top: clamp(32px,8vw,48px); padding-bottom: 14px; }
	.seo_landing .seo-pills{ margin-top: 20px; }
	.seo_landing .seo-cat{ padding-top: 24px; }
	.seo_landing .seo-cat .seo-cat-copy{ margin-top: 8px; }
	.seo_landing .seo-cards-row{ margin-top: 18px; }
	.seo_landing .seo-offerband-inner{ grid-template-columns: 1fr; }
	.seo_landing .seo-offer-col{ border-left: 0; border-top: 1px solid rgba(250,243,237,.14); padding: 30px 24px; }
	.seo_landing .seo-offer-col:first-child{ border-top: 0; }
	.seo_landing .seo-pills{
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: none;
		padding-bottom: 6px;
		margin-left: -2px;
	}
	.seo_landing .seo-pills::-webkit-scrollbar{ display: none; }
	.seo_landing .seo-cat-head-top{ flex-direction: row; align-items: center; }
	.seo_landing .seo-cards-row:not(.is-grid) .seo-cards ul.products li.product,
	.seo_landing .seo-cards-row:not(.is-grid) .seo-seeall-card{ width: 220px !important; flex-basis: 220px !important; }
	.seo_landing .seo-cards-row:not(.is-grid) .seo-seeall-card{ min-height: 360px; }
	/* single-category grid collapses to 2 columns on mobile (matches the Figma mock) */
	.seo_landing .seo-cards-row.is-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}

/* ===================== SEE THE DIFFERENCE (comparison) ===================== */
.seo_landing .seo-compare{padding:clamp(56px,8vw,104px) 0;background:var(--pearl);}
.seo_landing .seo-compare-inner{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px);}
.seo_landing .seo-compare-title{text-align:center;}
.seo_landing .seo-compare-sub{text-align:center;margin:10px 0 clamp(32px,4vw,56px);}
.seo_landing .seo-compare-table{position:relative;}
.seo_landing .seo-compare-row{display:grid;grid-template-columns:1fr 180px 180px;align-items:center;
	padding:22px 0;border-bottom:1px solid var(--pearl-dark);}
.seo_landing .seo-compare-row:last-child{border-bottom:0;}
.seo_landing .seo-compare-colhead{border-bottom:0;padding-bottom:10px;}
.seo_landing .seo-compare-label{display:flex;flex-direction:column;gap:6px;padding-right:24px;}
.seo_landing .seo-compare-rowtitle{font-family:"Canela",Georgia,serif;font-weight:300;font-size:clamp(22px,2.3vw,28px);line-height:1.1;color:var(--onyx);}
.seo_landing .seo-compare-rowsub{font-family:"FoundersGrotesk",Arial,sans-serif;font-size:16px;line-height:1.3;color:var(--onyx);}
.seo_landing .seo-compare-us,.seo_landing .seo-compare-them{text-align:center;font-family:"FoundersGrotesk",Arial,sans-serif;font-size:15px;color:var(--onyx);}
/* the sage DO AMORE column runs the full height behind the Us cells */
.seo_landing .seo-compare-table::before{content:"";position:absolute;top:0;bottom:0;
	right:180px;width:180px;background:var(--tourmaline);border-radius:10px;z-index:0;}
.seo_landing .seo-compare-row{position:relative;z-index:1;}
.seo_landing .seo-compare-brand,.seo_landing .seo-compare-othlabel{font-family:"FoundersGrotesk",Arial,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--onyx);}
.seo_landing .seo-compare-othlabel{color:rgba(15,14,13,.65);}
.seo_landing .seo-cmp-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--jade);}
.seo_landing .seo-cmp-x{font-size:17px;color:rgba(15,14,13,.45);}
.seo_landing .seo-cmp-text{font-size:14px;color:var(--onyx);}
@media(max-width:640px){
	.seo_landing .seo-compare-row{grid-template-columns:1fr 84px 84px;}
	.seo_landing .seo-compare-table::before{right:84px;width:84px;}
}

/* ===================== VIDEO band (Figma node 14736:43795) =====================
   Full-bleed cinematic film of the USA craftsmanship, with ONE italic serif caption
   at the bottom centre. No headline, no buttons. English 1766 in Figma -> Canela italic
   (the theme's serif) here. */
.seo_landing .seo-video{position:relative;background-size:cover;background-position:center;
	aspect-ratio:16/9;width:100%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;}
.seo_landing .seo-video::after{content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg, rgba(15,14,13,0) 50%, rgba(15,14,13,.55) 100%);}
.seo_landing .seo-video-inner{position:relative;z-index:2;text-align:center;padding:0 24px clamp(30px,5vw,60px);}
.seo_landing .seo-video-caption{font-family:"Canela",Georgia,serif;font-style:italic;font-weight:300;
	font-size:clamp(22px,2.6vw,36px);line-height:1.25;color:#fff;text-transform:lowercase;margin:0;}
@media(max-width:700px){
	.seo_landing .seo-video{aspect-ratio:1080/1754;}  /* matches the portrait mobile cut */
	.seo_landing .seo-video::after{background:linear-gradient(180deg, rgba(15,14,13,.12) 45%, rgba(15,14,13,.60) 100%);}
	.seo_landing .seo-video-caption{font-size:clamp(20px,5.6vw,26px);}
	.seo_landing .seo-video-sound{display:none;}   /* mobile cut has no audio */
	.seo_landing .seo-video{cursor:default;}
}

/* ===================== USA banner — italic serif overlay (matches render) ===================== */
.seo_landing .seo-usa-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ===== FAQ accordion (fully isolated — no theme .accordion/.faqs rules) ===== */
.seo_landing .seo-fq-list{ border-top: 1px solid var(--pearl-dark); }
.seo_landing .seo-fq{ border-bottom: 1px solid var(--pearl-dark); }
.seo_landing .seo-fq-q{
	width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	padding: 26px 2px; font-family: "FoundersGrotesk", Arial, sans-serif;
	font-size: 17px; color: var(--onyx); line-height: 1.3;
}
.seo_landing .seo-fq-q::after{ content: "+"; font-size: 22px; font-weight: 300; color: var(--onyx); opacity: .6; line-height: 1; }
.seo_landing .seo-fq-q[aria-expanded="true"]::after{ content: "\2013"; }
.seo_landing .seo-fq-a{ max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease; }
.seo_landing .seo-fq-q[aria-expanded="true"] + .seo-fq-a{ opacity: 1; }
.seo_landing .seo-fq-a > *{ margin: 0 0 16px; }
.seo_landing .seo-fq-a p{ font-size: 15.5px; line-height: 1.65; color: rgba(15,14,13,.72); padding: 0 40px 8px 2px; margin: 0 0 8px; }
.seo_landing .seo-fq-a p:first-child{ padding-top: 2px; }

/* Metal swatches / badge / heart are absolutely positioned from the card BOTTOM, so a
   swatch card needs its tall fixed height. Diamonds & loose gemstones have NO metal
   swatch (.item_grid_swatch), leaving a big empty gap — collapse ONLY those cards to
   their content height. Swatch cards are untouched. */
.seo_landing .seo-cards ul.products li.product:not(:has(.item_grid_swatch)),
.seo_landing .seo-cards ul.products li.product:not(:has(.item_grid_swatch)) .woocommerce-LoopProduct-link{
	height: auto !important;
	min-height: 0 !important;
}
.seo_landing .seo-cards ul.products li.product:not(:has(.item_grid_swatch)) .price{ padding-bottom: 20px; }
.seo_landing .seo-seeall-arrow{ display:inline-block; }

/* Swatch cards keep the theme's fixed-height layout (title/price static, swatch row
   absolutely anchored to the card bottom). On the narrow SEO cards a long title or
   subtitle wraps to extra lines and pushes the static price DOWN onto the swatch row —
   the phone misalignment. Clamp the title + its subtitle to a fixed number of lines so
   the price always clears the swatches. */
.seo_landing .seo-cards ul.products li.product .woocommerce-loop-product__title{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.seo_landing .seo-cards ul.products li.product .woocommerce-loop-product__title + p{
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 2px;
}

/* short-film video element (muted autoplay on scroll; play button unmutes) */
.seo_landing .seo-video .seo-video-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* reviews rating line (matches site "5.0 · 22,000+ happy customers") */
.seo_landing .seo-reviews-rating{ display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 0; font-family:"FoundersGrotesk",Arial,sans-serif; font-size:16px; color:var(--onyx); }
.seo_landing .seo-reviews-stars{ color:var(--citrine); font-size:21px; letter-spacing:3px; line-height:1; }

/* ===================== SINGLE-CATEGORY GRID ("ONLY ONE CATEGORY" variant) =====================
   On a one-category page the intro headline is the title, so the section drops its
   own head and lays the products out as a 2-row grid whose LAST cell is the jade
   "Shop all" card. display:contents lets the nested <ul>/<li> become grid items. */
.seo_landing .seo-cat.is-single{ padding-top: clamp(8px, 2vw, 18px); }
.seo_landing .seo-cards-row.is-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 18px;
	overflow: visible;
	margin-top: 8px;
	padding-bottom: 0;
}
.seo_landing .seo-cards-row.is-grid .seo-cards{ display: contents; }
.seo_landing .seo-cards-row.is-grid ul.products{ display: contents !important; }
.seo_landing .seo-cards-row.is-grid ul.products li.product{
	width: auto !important;
	flex: none !important;
	scroll-snap-align: none;
}
.seo_landing .seo-cards-row.is-grid .seo-seeall-card{
	width: auto;
	flex: none;
	min-height: 0;
	align-self: stretch;
}

/* film sound — muted autoplay is mandatory in browsers; one tap unmutes.
   A clearly LABELLED "Tap for sound" pill (bottom-right); it collapses to a small
   speaker once sound is on. Tapping the film anywhere also toggles it. */
.seo_landing .seo-video{ cursor: pointer; }
.seo_landing .seo-video-sound{ position:absolute; z-index:3; right:clamp(16px,3vw,28px); bottom:clamp(20px,3.5vw,32px);
	display:inline-flex; align-items:center; gap:9px; padding:10px 18px 10px 14px; border-radius:999px;
	border:1px solid rgba(255,255,255,.72); background:rgba(15,14,13,.44); color:#fff; cursor:pointer;
	font-family:'FoundersGrotesk',Arial,sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
	-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .18s ease; }
.seo_landing .seo-video-sound:hover{ background:rgba(15,14,13,.64); }
.seo_landing .seo-vs-ic{ flex:0 0 auto; }
.seo_landing .seo-vs-unmuted{ display:none; }
.seo_landing .seo-video.is-unmuted .seo-vs-muted{ display:none; }
.seo_landing .seo-video.is-unmuted .seo-vs-unmuted{ display:block; }
.seo_landing .seo-video.is-unmuted .seo-vs-label{ display:none; }
.seo_landing .seo-video.is-unmuted .seo-video-sound{ padding:10px; gap:0; }
/* mobile cut is silent — no sound control there (declared last so it wins the cascade) */
@media(max-width:700px){ .seo_landing .seo-video-sound{ display:none; } .seo_landing .seo-video{ cursor:default; } }

/* ----- reviews cards: tidy the odd empty height + photo (scoped to SEO pages). The
   shared reviews.css forces min-height:360 which leaves a big gap under short
   testimonials; drop it so cards size to their content (kept uniform by the wrapper's
   align-items:stretch). Native block layout is preserved so the source logo keeps its
   float and the text stays left-aligned. The review photo becomes a clean thumbnail. */
.seo_landing .reviews-swiper-container .review-item{ min-height: 0; padding: 24px 26px 26px; text-align: left; }
.seo_landing .reviews-swiper-container .review-item img{
	width: 76px; height: 76px; object-fit: cover; border-radius: 6px; margin-top: 14px;
}