/* =============================================================
   Smart Toilet Seat Review Pro — Core Design System
   Luxury smart-bathroom aesthetic
   ============================================================= */

:root {
	--sts-primary: #2563eb;
	--sts-accent: #38bdf8;
	--sts-navy: #0f172a;
	--sts-teal: #14b8a6;
	--sts-white: #ffffff;
	--sts-mist: #f8fafc;
	--sts-silver: #cbd5e1;
	--sts-ink: #0b1220;
	--sts-text: #1f2937;
	--sts-muted: #64748b;

	--sts-border: #e2e8f0;
	--sts-radius: 18px;
	--sts-radius-sm: 10px;
	--sts-radius-lg: 28px;

	--sts-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
	--sts-shadow-md: 0 12px 30px rgba(15, 23, 42, .10);
	--sts-shadow-lg: 0 30px 80px rgba(15, 23, 42, .18);

	--sts-grad-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #2563eb 100%);
	--sts-grad-aqua: linear-gradient(135deg, #38bdf8, #2563eb);
	--sts-grad-teal: linear-gradient(135deg, #14b8a6, #38bdf8);
	--sts-grad-luxe: linear-gradient(135deg, #1e293b, #312e81 50%, #2563eb);

	--sts-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sts-font-display: 'Sora', 'Inter', sans-serif;
	--sts-font-grotesk: 'Space Grotesk', 'Inter', sans-serif;
}

/* Reset + base — force full viewport width and BREAK OUT of any wrapper constraints */
*, *::before, *::after { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.sts-theme {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	font-family: var(--sts-font-sans);
	color: var(--sts-text);
	background: var(--sts-mist);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	position: relative;
	display: block;
}

/* If a parent wrapper (plugin/theme/builder) constrains the body to a narrow
   max-width, use the negative-margin viewport trick to force theme sections
   to span the full viewport width. */
body.sts-theme #sts-header,
body.sts-theme #sts-main,
body.sts-theme #sts-footer,
body.sts-theme #sts-mobile-nav,
body.sts-theme .sts-section,
body.sts-theme .sts-page-hero {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	left: 0;
	right: 0;
	box-sizing: border-box;
}

body.sts-theme .sts-container {
	width: 100% !important;
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sts-primary); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--sts-navy); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sts-font-display);
	color: var(--sts-navy);
	line-height: 1.2;
	margin: 0 0 .6em;
	font-weight: 700;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sts-skip {
	position: absolute; left: -9999px; top: 0; padding: 12px 16px;
	background: var(--sts-navy); color: var(--sts-white); z-index: 9999;
}
.sts-skip:focus { left: 12px; top: 12px; }

/* Background FX */
.sts-bg-fx {
	position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
	max-width: 100vw;
}
.sts-bg-orb {
	position: absolute; width: 560px; height: 560px; border-radius: 50%;
	filter: blur(120px); opacity: .25;
	animation: stsFloat 18s ease-in-out infinite;
}
.sts-bg-orb--1 { top: -10%; left: -10%; background: radial-gradient(circle, var(--sts-accent), transparent 65%); }
.sts-bg-orb--2 { bottom: -20%; right: -10%; background: radial-gradient(circle, var(--sts-teal), transparent 65%); animation-delay: -8s; }
.sts-bg-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(15, 23, 42, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
@keyframes stsFloat {
	0%, 100% { transform: translate(0,0); }
	50% { transform: translate(40px, -20px); }
}

/* Container */
.sts-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Eyebrow */
.sts-eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--sts-font-grotesk);
	font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sts-primary); font-weight: 600;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(37, 99, 235, .08);
	border: 1px solid rgba(37, 99, 235, .2);
}
.sts-eyebrow--xs { font-size: 10px; padding: 4px 8px; }

/* Sections */
.sts-section { position: relative; padding: 96px 0; }
.sts-section--tight { padding: 48px 0; }
.sts-section__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sts-section__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 16px 0 12px; }
.sts-section__title--sm { font-size: 1.4rem; }
.sts-section__desc { color: var(--sts-muted); font-size: 1.05rem; }

/* Header */
.sts-header {
	position: sticky; top: 0; z-index: 100;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	background: rgba(255,255,255,.78);
	border-bottom: 1px solid rgba(226, 232, 240, .8);
}
.sts-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; padding: 16px 24px; max-width: 1280px; margin: 0 auto;
}
.sts-logo { display: flex; align-items: center; gap: 12px; color: var(--sts-navy); }
.sts-logo__mark {
	display: grid; place-items: center; width: 44px; height: 44px;
	border-radius: 12px; background: var(--sts-grad-aqua); color: white;
	box-shadow: 0 8px 20px rgba(37, 99, 235, .3);
}
.sts-logo__title {
	display: block; font-family: var(--sts-font-display); font-weight: 700;
	font-size: 1.05rem; color: var(--sts-navy);
}
.sts-logo__tag {
	display: block; font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--sts-muted); font-weight: 500;
}
.sts-nav--desktop { display: none; }
.sts-menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; align-items: center; }
.sts-menu a {
	color: var(--sts-navy); font-weight: 500; font-size: 0.95rem;
	padding: 8px 0; position: relative;
}
.sts-menu a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: var(--sts-primary); transform: scaleX(0);
	transform-origin: left; transition: transform .25s ease;
}
.sts-menu a:hover::after { transform: scaleX(1); }

.sts-header__actions { display: flex; align-items: center; gap: 12px; }
.sts-icon-btn {
	width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--sts-border);
	background: white; display: grid; place-items: center; color: var(--sts-navy);
	cursor: pointer; transition: all .2s ease;
}
.sts-icon-btn:hover { background: var(--sts-mist); border-color: var(--sts-silver); }
.sts-header__cta { display: none; }
.sts-nav-toggle .sts-burger {
	width: 18px; height: 14px; position: relative; display: block;
}
.sts-burger span {
	position: absolute; left: 0; right: 0; height: 2px; background: var(--sts-navy);
	border-radius: 2px; transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.sts-burger span:nth-child(1) { top: 0; }
.sts-burger span:nth-child(2) { top: 6px; }
.sts-burger span:nth-child(3) { top: 12px; }
.sts-nav-toggle[aria-expanded="true"] .sts-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.sts-nav-toggle[aria-expanded="true"] .sts-burger span:nth-child(2) { opacity: 0; }
.sts-nav-toggle[aria-expanded="true"] .sts-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.sts-search-bar { padding: 16px 0; border-bottom: 1px solid var(--sts-border); background: white; }
.sts-mobile-nav {
	position: fixed; inset: 64px 0 0; background: rgba(15, 23, 42, .96);
	backdrop-filter: blur(20px); z-index: 99; padding: 28px;
	transform: translateY(-20px); opacity: 0; transition: all .3s ease;
}
.sts-mobile-nav:not([hidden]) { display: block; transform: translateY(0); opacity: 1; }
.sts-mobile-nav__inner { display: flex; flex-direction: column; gap: 18px; }
.sts-menu--mobile { flex-direction: column; align-items: stretch; gap: 0; }
.sts-menu--mobile a {
	color: white; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
	font-size: 1.1rem;
}
.sts-menu--mobile a::after { display: none; }

@media (min-width: 960px) {
	.sts-nav--desktop { display: block; }
	.sts-header__cta { display: inline-flex; }
	.sts-nav-toggle { display: none; }
}

/* Buttons */
.sts-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--sts-font-sans); font-weight: 600; font-size: 0.95rem;
	padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
	cursor: pointer; transition: all .2s ease; text-decoration: none;
	line-height: 1.2; white-space: nowrap;
}
.sts-btn--primary { background: var(--sts-grad-aqua); color: white; box-shadow: 0 8px 22px rgba(37, 99, 235, .35); }
.sts-btn--primary:hover { color: white; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 99, 235, .45); }
.sts-btn--ghost { background: transparent; color: var(--sts-navy); border-color: var(--sts-border); }
.sts-btn--ghost:hover { background: var(--sts-mist); border-color: var(--sts-silver); color: var(--sts-navy); }
.sts-btn--amazon { background: #ff9900; color: #131921; box-shadow: 0 6px 18px rgba(255, 153, 0, .35); }
.sts-btn--amazon:hover { background: #ffaa1d; color: #131921; transform: translateY(-2px); }
.sts-btn--lg { padding: 16px 28px; font-size: 1.05rem; border-radius: 14px; }
.sts-btn--sm { padding: 8px 14px; font-size: 0.85rem; border-radius: 10px; }
.sts-btn--block { width: 100%; }

/* Disclosure */
.sts-disclosure {
	font-size: 12px; color: var(--sts-muted); padding: 10px 14px;
	background: rgba(226, 232, 240, .4); border-radius: var(--sts-radius-sm);
	border-left: 3px solid var(--sts-primary); margin: 16px 0;
}

/* Chips */
.sts-chip {
	display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
	background: rgba(37, 99, 235, .08); color: var(--sts-primary);
	font-size: 12px; font-weight: 600;
}
.sts-chip-toggle {
	display: inline-flex; padding: 8px 16px; border-radius: 999px;
	background: white; border: 1px solid var(--sts-border); color: var(--sts-navy);
	font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all .2s ease;
}
.sts-chip-toggle:hover { border-color: var(--sts-primary); color: var(--sts-primary); }
.sts-chip-toggle.is-active { background: var(--sts-grad-aqua); color: white; border-color: transparent; box-shadow: 0 4px 14px rgba(37, 99, 235, .3); }

/* Cards / Surfaces shared */
.sts-card-surface {
	background: white; border: 1px solid var(--sts-border);
	border-radius: var(--sts-radius); padding: 24px;
}

/* Trust dots */
.sts-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sts-silver); }
.sts-dot--green { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); animation: stsPulse 2s infinite; }
@keyframes stsPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); } 50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, .05); } }

/* Pros / Cons */
.sts-pros, .sts-cons { list-style: none; padding: 0; margin: 0 0 8px; font-size: 0.92rem; }
.sts-pros li, .sts-cons li { padding: 4px 0 4px 24px; position: relative; }
.sts-pros li::before {
	content: "✓"; position: absolute; left: 0; top: 4px;
	color: #16a34a; font-weight: 700;
}
.sts-cons li::before {
	content: "−"; position: absolute; left: 0; top: 4px;
	color: #ef4444; font-weight: 700;
}
.sts-pros-cons { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sts-pros-cons { grid-template-columns: 1fr 1fr; } }
.sts-pros-cons__col { padding: 18px; border-radius: var(--sts-radius); background: var(--sts-mist); }
.sts-pros-cons__col--pros { border-left: 3px solid #16a34a; }
.sts-pros-cons__col--cons { border-left: 3px solid #ef4444; }
.sts-pros-cons__col h4 { margin: 0 0 10px; }

/* Footer */
.sts-footer {
	background: linear-gradient(180deg, #0b1220, #0f172a); color: #cbd5e1;
	padding: 80px 0 30px; margin-top: 60px;
}
.sts-footer__grid {
	display: grid; gap: 40px; grid-template-columns: 1fr;
	padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 720px) { .sts-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.sts-footer__title { color: white; }
.sts-footer__desc { font-size: 0.95rem; color: #94a3b8; }
.sts-footer .widget-title, .sts-footer h4 { color: white; font-size: 0.95rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.sts-footer-menu, .sts-footer ul { list-style: none; padding: 0; margin: 0; }
.sts-footer-menu li, .sts-footer ul li { padding: 5px 0; }
.sts-footer a { color: #cbd5e1; }
.sts-footer a:hover { color: white; }
.sts-footer .sts-disclosure { background: rgba(255,255,255,.04); color: #cbd5e1; border-left-color: var(--sts-accent); }
.sts-footer__base {
	padding-top: 20px; font-size: 13px; color: #64748b;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* Mobile sticky CTA */
.sts-mobile-cta {
	position: fixed; left: 16px; right: 16px; bottom: 16px;
	display: none; align-items: center; justify-content: center;
	gap: 8px; padding: 14px; border-radius: 14px; z-index: 60;
	background: var(--sts-grad-aqua); color: white;
	box-shadow: 0 12px 30px rgba(37, 99, 235, .5); font-weight: 600;
}
@media (max-width: 720px) { .sts-mobile-cta { display: flex; } body { padding-bottom: 72px; } }

/* Section heads, dividers */
.sts-section + .sts-section { border-top: 1px solid rgba(15, 23, 42, .04); }