:root {
    --accent: #2171b5;
    --accent-dark: #08306b;
    --soft: #f7fbff;
    --ink: #10243a;
    --surface: #ffffff;
    --text: var(--ink);
    --muted: #65788b;
    --border: #deebf7;
    --page: #f7fbff;
    --success: #067647;
    --danger: #b42318;
    --warning: #b54708;
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 30px;
    --shadow-sm: 0 8px 24px rgba(8, 48, 107, .07);
    --shadow: 0 20px 60px rgba(8, 48, 107, .13);
    --container: 1240px;
    --header-height: 78px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; color: var(--text); background: var(--surface); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.nav-open, body.gallery-lightbox-open { overflow: hidden; }
a { color: var(--accent-dark); text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease; }
a:hover { color: var(--accent); }
img, picture, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 72%, #ffffff);
    outline-offset: 3px;
}
:where(input, select, textarea):focus-visible { outline-offset: 1px; }
::selection { color: #fff; background: var(--accent); }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 9999; transform: translateY(-180%); padding: 10px 14px; border-radius: 8px; color: #fff; background: var(--ink); }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--muted); }

.site-topbar { position: relative; z-index: 72; color: #d8dee9; background: var(--ink); font-size: .82rem; }
.topbar-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-topbar a { color: #fff; }
.site-header { position: sticky; top: 0; z-index: 70; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent); backdrop-filter: blur(18px); transition: box-shadow .25s ease, transform .25s ease, background .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 35px rgba(16, 24, 40, .09); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: 28px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo picture { display: inline-flex; }
.brand-image { width: auto; max-width: 220px; max-height: 54px; object-fit: contain; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 28%, transparent); }
.brand-mark span { width: 17px; height: 17px; border: 3px solid #fff; border-top-color: transparent; border-radius: 50%; transform: rotate(20deg); }
.brand-copy { min-width: 0; display: grid; line-height: 1.15; }
.brand-copy strong { overflow: hidden; max-width: 220px; font-size: 1.02rem; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { overflow: hidden; max-width: 220px; margin-top: 1px; color: #333; font-size:15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; font-style: italic;}
.primary-nav { min-width: 0; margin-left: auto; }
.primary-nav-inner { display: flex; justify-content: flex-end; }
.menu-list, .sub-menu, .footer-links { margin: 0; padding: 0; list-style: none; }
.primary-nav .menu-list { display: flex; align-items: center; gap: 4px; }
.primary-nav .menu-item { position: relative; }
.primary-nav .menu-item > a { position: relative; display: flex; align-items: center; min-height: 42px; padding: 8px 12px; border-radius: 10px; color: var(--ink); font-size: .94rem; font-weight: 680; white-space: nowrap; }
.primary-nav .menu-item > a::after { position: absolute; right: 12px; bottom: 4px; left: 12px; height: 2px; border-radius: 2px; background: var(--accent); content: ""; opacity: 0; transform: scaleX(.5); transition: .2s ease; }
.primary-nav .menu-item > a:hover::after, .primary-nav .menu-item.is-active > a::after { opacity: 1; transform: scaleX(1); }
.primary-nav .has-children > a { padding-right: 30px; }
.primary-nav .has-children > a::before { position: absolute; top: 50%; right: 12px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-65%) rotate(45deg); }
.primary-nav .sub-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.primary-nav .sub-menu .sub-menu { top: -10px; left: calc(100% + 8px); }
.primary-nav .has-children:hover > .sub-menu, .primary-nav .has-children:focus-within > .sub-menu, .primary-nav .has-children.is-open > .sub-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.primary-nav .sub-menu a { min-height: 0; padding: 10px 12px; font-size: .9rem; white-space: normal; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.header-link { color: var(--ink); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.header-cta { min-height: 42px; padding-inline: 16px; white-space: nowrap; }
.nav-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; }
.nav-toggle-lines { display: grid; gap: 4px; width: 20px; }
.nav-toggle-lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.primary-nav .submenu-toggle { display: none; }
.nav-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(16, 24, 40, .48); backdrop-filter: blur(2px); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent); color: #fff; font-weight: 800; line-height: 1.1; cursor: pointer; box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 24%, transparent); }
.button:hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.button.secondary { border-color: var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: none; }
.button.secondary:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--surface); }
.button.is-active { border-color: var(--accent); color: #fff; background: var(--accent); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 999px; color: var(--accent-dark); background: color-mix(in srgb, var(--soft) 86%, white); font-size: .76rem; font-weight: 850; letter-spacing: .085em; line-height: 1; text-transform: uppercase; }
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); content: ""; }

.site-main { min-height: 60vh; overflow: clip; }
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--soft), var(--surface) 68%); }
.hero::before { position: absolute; top: -240px; right: -180px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%); content: ""; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr); align-items: center; gap: clamp(42px, 7vw, 92px); padding-block: clamp(72px, 9vw, 122px); }
.hero-copy { max-width: 720px; }
.hero h1, .page-hero h1 { margin: 18px 0 22px; font-size: clamp(2.65rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.hero-lead { max-width: 680px; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent); }
.hero-stat { display: grid; gap: 2px; }
.hero-stat strong { color: var(--ink); font-size: 1.03rem; line-height: 1.2; }
.hero-stat span { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.hero-media { position: relative; min-width: 0; }
.hero-media.has-image { overflow: hidden; min-height: 510px; border-radius: 34px; box-shadow: var(--shadow); }
.hero-media.has-image picture, .hero-media.has-image img { width: 100%; height: 100%; }
.hero-image { position: absolute; inset: 0; object-fit: cover; }
.hero-media.has-image::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(5, 15, 28, .25)); content: ""; pointer-events: none; }
.hero-visual { position: relative; min-height: 510px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 34px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 93%, white), var(--accent-dark)); box-shadow: var(--shadow); isolation: isolate; }
.visual-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.visual-orb-one { top: 12%; right: 10%; width: 170px; height: 170px; background: rgba(255,255,255,.18); }
.visual-orb-two { bottom: 8%; left: 7%; width: 110px; height: 110px; background: rgba(255,255,255,.12); }
.visual-card { position: absolute; display: grid; align-content: end; gap: 12px; padding: 24px; border: 1px solid rgba(255,255,255,.3); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: 0 25px 60px rgba(0,0,0,.16); backdrop-filter: blur(12px); }
.visual-card i { display: block; height: 13px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, #e7edf5); }
.visual-card-main { inset: 15% 10% 20% 12%; transform: rotate(-3deg); }
.visual-card-main i:first-child { height: 180px; border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 32%, white), color-mix(in srgb, var(--accent-dark) 54%, white)); }
.visual-card-main i:nth-child(3) { width: 65%; }
.visual-card-small { right: -3%; bottom: 7%; width: 48%; transform: rotate(4deg); }
.visual-card-small i:first-child { height: 62px; border-radius: 12px; }
.page-hero { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 118px) 0; color: var(--ink); background: linear-gradient(135deg, var(--soft), var(--surface)); }
.page-hero.has-image { min-height: 430px; display: grid; align-items: end; color: #fff; background: var(--ink); }
.page-hero-media, .page-hero-media picture, .page-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero-image { object-fit: cover; }
.page-hero.has-image::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,12,20,.82), rgba(5,12,20,.35) 70%, rgba(5,12,20,.15)); content: ""; }
.page-hero-inner { position: relative; z-index: 1; max-width: var(--container); }
.page-hero-inner p { max-width: 680px; margin: 0; font-size: 1.1rem; }
.page-hero.has-image .eyebrow { border-color: rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.12); }

.page-section { padding: clamp(64px, 8vw, 104px) 0; }
.page-content-section:has(.content-stack:empty) { display: none; }
.section-soft, .feature-section { border-block: 1px solid var(--border); background: var(--page); }
.content-stack > * + * { margin-top: 30px; }
.prose { max-width: 900px; color: #344054; font-size: 1.03rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--ink); line-height: 1.15; letter-spacing: -.025em; }
.prose h2 { margin-top: 1.7em; font-size: clamp(1.75rem, 3vw, 2.6rem); }
.prose h3 { margin-top: 1.5em; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.prose img { margin-block: 30px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.section-heading { max-width: 760px; margin-bottom: 38px; }
.section-heading h2 { margin: 14px 0 0; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.section-heading p { color: var(--muted); font-size: 1.08rem; }
.feature-grid, .card-grid, .listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.feature-card, .content-card, .widget, .filter-panel, .summary-box { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.feature-card { overflow: hidden; min-height: 280px; padding: 30px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow); transform: translateY(-5px); }
.feature-number { position: absolute; top: 18px; right: 22px; color: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 3.2rem; font-weight: 900; line-height: 1; }
.feature-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 42px; border-radius: 15px; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 28%, transparent); }
.feature-icon::before, .feature-icon::after { position: absolute; width: 16px; height: 3px; border-radius: 3px; background: #fff; content: ""; }
.feature-icon::after { transform: rotate(90deg); }
.feature-card h2, .feature-card h3, .content-card h2, .content-card h3 { margin: 0 0 10px; color: var(--ink); line-height: 1.2; letter-spacing: -.02em; }
.feature-card p, .content-card p { color: var(--muted); }
.content-card { padding: 26px; }
.cta-section { padding-top: 0; }
.cta-box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(32px, 5vw, 58px); border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--ink) 76%, var(--accent))); box-shadow: var(--shadow); }
.cta-box::after { position: absolute; right: -90px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); content: ""; }
.cta-copy { position: relative; z-index: 1; max-width: 720px; }
.cta-copy h2 { margin: 12px 0 8px; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.04em; }
.cta-copy p { margin-bottom: 0; color: #d0d5dd; }
.cta-box .button { position: relative; z-index: 1; flex: 0 0 auto; border-color: #fff; color: var(--ink); background: #fff; box-shadow: none; }
.testimonial-card { min-height: 260px; display: flex; flex-direction: column; }
.quote-mark { height: 52px; color: var(--accent); font-family: Georgia, serif; font-size: 5rem; line-height: .8; }
.testimonial-card > p { flex: 1; color: var(--ink); font-size: 1.05rem; }
.testimonial-card footer { display: grid; gap: 3px; color: var(--muted); font-size: .9rem; }
.testimonial-card footer strong { color: var(--ink); }

.breadcrumb-wrap { padding-top: 18px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; color: var(--muted); font-size: .84rem; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs a { color: var(--muted); }
.page-title { margin: 0 0 28px; font-size: clamp(2.2rem, 4.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.045em; }
.page-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-heading-row .page-title { margin-bottom: 0; }
.filters-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 30px; align-items: start; }
.filter-panel { position: sticky; top: calc(var(--header-height) + 24px); padding: 24px; }
.filter-panel form { display: grid; gap: 8px; }
.filter-panel label, .checkout-form label, .form-group label { display: block; margin-top: 10px; color: var(--ink); font-size: .86rem; font-weight: 760; }
.input, .filter-panel input:not([type="checkbox"]), .filter-panel select, .checkout-form input, .checkout-form select, .checkout-form textarea, .comment-form input, .comment-form textarea, .content-card input, .content-card select, .content-card textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 10px; color: var(--ink); background: var(--surface); outline: 0; transition: border-color .2s ease, box-shadow .2s ease; }
textarea.input, .checkout-form textarea, .comment-form textarea, .content-card textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.filter-panel input[type="checkbox"] { accent-color: var(--accent); }
.filter-panel .button { width: 100%; margin-top: 12px; }
.filter-panel hr { margin: 24px 0; border: 0; border-top: 1px solid var(--border); }
.filter-panel ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.filter-panel li a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.filter-panel li a:hover { background: var(--soft); }
.product-card, .listing-card { overflow: hidden; padding: 0; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover, .listing-card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow); transform: translateY(-5px); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); }
.product-card img, .listing-card img, .content-card > a:first-child img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--soft); transition: transform .45s ease; }
.product-card:hover img, .listing-card:hover img, .content-card:hover > a:first-child img { transform: scale(1.035); }
.card-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.card-badge { padding: 6px 9px; border-radius: 999px; color: #fff; background: var(--ink); font-size: .7rem; font-weight: 800; line-height: 1; }
.card-badge.sale { background: var(--accent); }
.card-badge.muted { color: var(--ink); background: rgba(255,255,255,.88); }
.card-body { padding: 22px; }
.card-body h2 { margin: 0 0 10px; font-size: 1.12rem; }
.card-body h2 a { color: var(--ink); }
.card-body p:last-child { margin-bottom: 0; }
.card-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0; color: var(--muted); font-size: .84rem; }
.price { color: var(--accent-dark) !important; font-size: 1.22rem; font-weight: 880; letter-spacing: -.02em; }
.price del { margin-right: 6px; color: #98a2b3; font-size: .9rem; font-weight: 500; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: clamp(34px, 6vw, 76px); align-items: start; }
.detail-grid > div:last-child { position: sticky; top: calc(var(--header-height) + 28px); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery-item { overflow: hidden; padding: 0; border: 0; border-radius: 15px; background: var(--soft); cursor: zoom-in; }
.gallery-item.is-primary { grid-column: 1 / -1; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.gallery-item.is-primary img { aspect-ratio: 16 / 10; }
.gallery-item:hover img { transform: scale(1.025); }
.meta-list { display: grid; gap: 0; margin: 24px 0; border-top: 1px solid var(--border); }
.meta-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.meta-row strong { color: var(--ink); text-align: right; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: #475467; background: var(--page); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.cart-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 34px; align-items: start; }
.checkout-grid > aside, .summary-box { position: sticky; top: calc(var(--header-height) + 24px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-full { grid-column: 1 / -1; }
.alert { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; background: var(--soft); }


ul.pagination {
    list-style: none;
}

ul.pagination li.active a {
    background: var(--accent);
    color: white;
}


.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.pagination a, .pagination strong { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: var(--surface); }
.pagination strong, .pagination a:hover { border-color: var(--accent); color: #fff; background: var(--accent); }
.empty-state { padding: clamp(35px, 7vw, 72px); border: 1px dashed #cbd5e1; border-radius: var(--radius); color: var(--muted); background: var(--page); text-align: center; }
.article-gallery, .related-posts, .article-comments { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }
.article-gallery video, .article-gallery iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.comment-form { display: grid; gap: 14px; margin-top: 24px; }

.gallery-lightbox { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 24px; background: rgba(3, 8, 18, .92); }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox img { max-width: min(1200px, 94vw); max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.gallery-lightbox button { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); font-size: 1.6rem; cursor: pointer; }

.site-footer { color: #d0d5dd; background: #0b1220; }
.footer-grid { display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .8fr) minmax(180px, .8fr); gap: 60px; padding-block: 70px 54px; }
.brand-footer { color: #fff; }
.brand-footer:hover { color: #fff; }
.brand-footer .brand-image { filter: brightness(0) invert(1); }
.footer-brand p { max-width: 440px; margin-top: 22px; color: #98a2b3; }
.footer-column h2 { margin: 0 0 18px; color: #fff; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-nav .menu-list, .footer-nav .sub-menu, .footer-links, .footer-contact { display: grid; gap: 10px; }
.footer-nav .sub-menu { margin-top: 8px; padding-left: 16px; }
.footer-nav a, .footer-links a, .footer-contact a { color: #d0d5dd; }
.footer-nav a:hover, .footer-links a:hover, .footer-contact a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #98a2b3; font-size: .8rem; }
.footer-bottom p { margin: 0; }

.link-action { appearance: none; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.link-action-danger { color: var(--danger); }


@media (min-width: 901px) {
    .site-header--nutrition .primary-nav .menu-list > .has-children > a {
        padding-right: 13px;
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children > a::before {
        display: none;
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children > a > span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children > a > span::after {
        width: 7px;
        height: 7px;
        flex: 0 0 auto;
        border-right: 1.7px solid currentColor;
        border-bottom: 1.7px solid currentColor;
        content: "";
        transform: translateY(-2px) rotate(45deg);
        transform-origin: 66% 66%;
        transition: transform .22s ease;
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children:hover > a > span::after,
    .site-header--nutrition .primary-nav .menu-list > .has-children:focus-within > a > span::after,
    .site-header--nutrition .primary-nav .menu-list > .has-children.is-open > a > span::after,
    .site-header--nutrition .primary-nav .menu-list > .has-children.is-hover-open > a > span::after {
        transform: translateY(2px) rotate(225deg);
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children > .sub-menu {
        top: calc(100% + 8px);
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children > .sub-menu::before {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 14px;
        content: "";
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children.is-hover-open > .sub-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 1100px) {
    .header-actions .header-link { display: none; }
    .primary-nav .menu-item > a { padding-inline: 9px; font-size: .88rem; }
    .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: 44px; }
    .feature-grid, .card-grid, .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root { --header-height: 72px; }
    .container { width: min(var(--container), calc(100% - 30px)); }
    .site-topbar { display: none; }
    .header-inner { min-height: var(--header-height); }
    .header-actions { display: none; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
    .primary-nav { position: fixed; top: var(--header-height); right: 0; bottom: 0; z-index: 71; width: min(420px, 92vw); margin: 0; padding: 18px; background: var(--surface); box-shadow: -20px 0 55px rgba(16,24,40,.16); clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .25s ease, visibility .25s ease; overflow-y: auto; }
    .primary-nav.is-open { clip-path: inset(0); visibility: visible; }
    .primary-nav-inner { display: block; }
    .primary-nav .menu-list { display: grid; gap: 5px; }
    .primary-nav .menu-item > a { min-height: 48px; padding: 11px 13px; border-radius: 10px; font-size: .98rem; }
    .primary-nav .menu-item > a::after { display: none; }
    .primary-nav .has-children > a { padding-right: 54px; }
    .primary-nav .sub-menu { position: static; display: none; min-width: 0; margin: 2px 0 8px 16px; padding: 6px 0 6px 12px; border: 0; border-left: 2px solid var(--border); border-radius: 0; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
    .primary-nav .has-children.is-open > .sub-menu { display: grid; }
    .primary-nav .submenu-toggle { position: absolute; top: 6px; right: 5px; z-index: 2; width: 40px; height: 40px; display: block; border: 0; border-radius: 8px; background: var(--page); cursor: pointer; }
    .primary-nav .submenu-toggle::before { display: block; width: 8px; height: 8px; margin: -3px auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg); transition: transform .2s ease; }
    .primary-nav .has-children.is-open > .submenu-toggle::before { margin-top: 3px; transform: rotate(225deg); }
    .hero-grid, .detail-grid, .checkout-grid, .filters-layout { grid-template-columns: 1fr; }
    .hero-grid { min-height: auto; padding-block: 70px; }
    .hero-media.has-image, .hero-visual { min-height: 440px; }
    .detail-grid > div:last-child, .checkout-grid > aside, .summary-box, .filter-panel { position: static; }
    .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 34px; }
}

@media (max-width: 680px) {
    .container { width: min(var(--container), calc(100% - 24px)); }
    .brand-image { max-width: 175px; max-height: 46px; }
    .brand-copy small { display: none; }
    .nav-toggle-label { display: none; }
    .hero h1, .page-hero h1 { font-size: clamp(2.35rem, 13vw, 4rem); }
    .hero-grid { gap: 38px; padding-block: 54px; }
    .hero-actions .button { width: 100%; }
    .hero-stats { grid-template-columns: 1fr; gap: 12px; }
    .hero-stat { grid-template-columns: 110px 1fr; align-items: center; }
    .hero-media.has-image, .hero-visual { min-height: 330px; border-radius: 22px; }
    .visual-card-main i:first-child { height: 110px; }
    .page-section { padding: 58px 0; }
    .feature-grid, .card-grid, .listing-grid, .form-grid { grid-template-columns: 1fr; }
    .form-full { grid-column: auto; }
    .page-heading-row, .cta-box, .footer-bottom { align-items: flex-start; flex-direction: column; }
    .cta-box .button { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 52px 34px; }
    .gallery { grid-template-columns: 1fr; }
    .gallery-item.is-primary { grid-column: auto; }
    .gallery-item img, .gallery-item.is-primary img { aspect-ratio: 4 / 3; }
    .card-body, .content-card, .feature-card, .filter-panel { padding: 20px; }
    .table-wrap { margin-inline: -12px; border-radius: 0; }
}

.archive-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 36px; }
.archive-heading > div:first-child { max-width: 760px; }
.archive-heading .page-title { margin: 14px 0 10px; }
.archive-heading p { max-width: 680px; margin: 0; color: var(--muted); }
.archive-actions { display: flex; align-items: center; gap: 18px; }
.archive-count { min-width: 150px; display: grid; gap: 2px; padding-left: 20px; border-left: 2px solid var(--accent); }
.archive-count strong { color: var(--ink); font-size: 1.65rem; line-height: 1; }
.archive-count span { color: var(--muted); font-size: .76rem; line-height: 1.25; }
.filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.filter-heading a, .reset-link { color: var(--muted); font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.filter-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checkbox-line { display: flex !important; align-items: center; gap: 8px; min-height: 42px; }
.checkbox-line input { width: auto; }
.filter-categories { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.filter-categories ul { margin-top: 12px; }
.filter-categories a { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
.archive-results { min-width: 0; }
.card-media-placeholder { width: 100%; height: 100%; display: block; background: linear-gradient(135deg, var(--soft), color-mix(in srgb, var(--accent) 20%, white)); }
.card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink); font-size: .86rem; font-weight: 800; }
.card-link span { transition: transform .2s ease; }
.card-link:hover span { transform: translateX(4px); }
.property-search-panel { margin-bottom: 38px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.property-search-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; }
.property-search-grid label { display: grid; gap: 6px; color: var(--ink); font-size: .76rem; font-weight: 760; }
.property-search-grid input, .property-search-grid select { width: 100%; min-height: 46px; padding: 10px 11px; border: 1px solid #d0d5dd; border-radius: 9px; background: var(--surface); }
.property-search-grid .button { min-height: 46px; }
.property-search-panel .reset-link { display: inline-block; margin-top: 14px; }
.property-card .card-meta span, .classified-card .card-meta span { position: relative; padding-left: 13px; }
.property-card .card-meta span::before, .classified-card .card-meta span::before { position: absolute; top: .55em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); content: ""; }

@media (max-width: 1100px) {
    .property-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .archive-heading { align-items: flex-start; flex-direction: column; }
    .archive-actions { width: 100%; justify-content: space-between; }
    .property-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .archive-actions { align-items: stretch; flex-direction: column; }
    .archive-count { padding-left: 14px; }
    .filter-columns, .property-search-grid { grid-template-columns: 1fr; }
    .property-search-panel { padding: 18px; }
}

.detail-summary { min-width: 0; }
.detail-excerpt { color: var(--muted); font-size: 1.04rem; }
.detail-content-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 48px; align-items: start; margin-top: 64px; }
.detail-description { max-width: none; }
.detail-side-stack { display: grid; gap: 20px; }
.seller-card, .agent-card { display: flex; align-items: center; gap: 14px; }
.agent-card { flex-wrap: wrap; }
.agent-card > p, .agent-card .contact-actions { flex-basis: 100%; }
.seller-avatar { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-dark)); font-size: 1.1rem; font-weight: 850; }
.seller-card small, .agent-card small { display: block; color: var(--muted); font-size: .74rem; }
.seller-card strong, .agent-card h2 { display: block; margin: 0; color: var(--ink); font-size: 1rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.contact-actions .button { flex: 1 1 150px; }
.property-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.property-facts div { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--page); text-align: center; }
.property-facts strong { color: var(--ink); font-size: 1.12rem; }
.property-facts span { color: var(--muted); font-size: .72rem; }
.property-primary-action { width: 100%; }
.map-frame { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.map-frame iframe { width: 100%; height: 420px; border: 0; }
.contact-form-grid { align-items: start; }
.inquiry-card { display: grid; gap: 12px; }
.inquiry-card h3 { margin-bottom: 6px; }
.inquiry-card label { display: grid; gap: 6px; color: var(--ink); font-size: .84rem; font-weight: 700; }
.honeypot { position: absolute !important; left: -9999px !important; }
.portal-interaction-wrap { margin-top: 40px; }
.portal-actions-card { padding: clamp(24px, 4vw, 42px); }
.portal-actions-heading h2 { margin-top: 12px; }
.portal-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.portal-action-grid > form .button { width: 100%; }
.portal-action-grid details { border: 1px solid var(--border); border-radius: 12px; background: var(--page); }
.portal-action-grid summary { padding: 14px 16px; color: var(--ink); font-weight: 800; cursor: pointer; }
.portal-action-grid details form { display: grid; gap: 12px; padding: 0 16px 16px; }
.portal-action-grid label { display: grid; gap: 6px; color: var(--ink); font-size: .82rem; font-weight: 700; }
.alert-success { border-color: #abefc6; color: #067647; background: #ecfdf3; }
.alert-error { border-color: #fecdca; color: #b42318; background: #fef3f2; }
.hero-panel { min-height: 420px; display: grid; align-content: end; gap: 12px; padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--accent), var(--accent-dark)); box-shadow: var(--shadow); }
.hero-panel span { display: block; height: 56px; border-radius: 12px; background: rgba(255,255,255,.82); }
.hero-panel span:nth-child(2) { width: 75%; }
.hero-panel span:nth-child(3) { width: 52%; }

@media (max-width: 900px) {
    .detail-content-grid { grid-template-columns: 1fr; gap: 32px; }
    .portal-action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .property-facts { grid-template-columns: repeat(3, 1fr); }
    .map-frame iframe { height: 320px; }
}

/* Blog comments and replies */
.comments-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.comments-heading h2 { margin: 8px 0 0; }
.button-small { min-height: 42px; padding: 9px 14px; font-size: .82rem; }
.comment-thread { display: grid; gap: 22px; }
.comment-item { position: relative; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.comment-root { box-shadow: var(--shadow-sm); }
.comment-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.comment-header time { flex: 0 0 auto; color: var(--muted); font-size: .76rem; }
.comment-author-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.comment-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; color: #fff; background: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.comment-content { color: var(--ink); line-height: 1.72; }
.comment-content br + br { display: block; margin-top: 8px; content: ""; }
.comment-reply-button { margin-top: 14px; padding: 0; border: 0; color: var(--accent-dark); background: transparent; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.comment-reply-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.comment-replies { display: grid; gap: 14px; margin-top: 20px; padding-left: clamp(18px, 4vw, 48px); border-left: 2px solid color-mix(in srgb, var(--accent) 26%, var(--border)); }
.comment-reply { padding: 20px; background: color-mix(in srgb, var(--soft) 52%, var(--surface)); box-shadow: none; }
.comment-reply-to { display: block; margin-top: 4px; color: var(--muted); font-size: .74rem; }
.comment-item.is-deleted { border-style: dashed; box-shadow: none; opacity: .72; }
.comment-item.is-deleted .comment-content { color: var(--muted); font-style: italic; }
.comment-reply-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 10px; color: var(--ink); background: var(--soft); }
.comment-reply-context[hidden] { display: none; }
.comment-reply-context button { padding: 0; border: 0; color: var(--accent-dark); background: transparent; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.comments-empty { margin-bottom: 24px; }

@media (max-width: 680px) {
    .comments-heading, .comment-header, .comment-reply-context { align-items: flex-start; flex-direction: column; }
    .comments-heading .button { width: 100%; }
    .comment-item { padding: 18px; }
    .comment-replies { padding-left: 12px; }
    .comment-reply { padding: 16px; }
}

/* Category SEO presentation */
.category-hero + .page-section { padding-top: clamp(48px, 6vw, 76px); }
.category-content-section { padding-top: 0; }
.category-content-shell {
    max-width: 980px;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.category-content-shell > :first-child { margin-top: 0; }
.category-content-shell > :last-child { margin-bottom: 0; }
.blog-category-archive .content-card .card-media { aspect-ratio: 16 / 9; }
.pagination .is-active { pointer-events: none; opacity: .72; }

/* Advanced frontend discovery and engagement */
.frontend-toast{position:fixed;top:22px;left:50%;z-index:99999;max-width:min(420px,calc(100vw - 36px));padding:14px 18px;border-radius:10px;color:#fff;background:#17324d;box-shadow:0 14px 40px rgba(15,35,55,.25);opacity:0;transform:translate(-50%,-12px);transition:.22s ease}.frontend-toast.is-visible{opacity:1;transform:translate(-50%,0)}.frontend-toast-error{background:#b42318}.button-outline{border:1px solid var(--border);color:var(--ink);background:var(--surface)}.button-outline.is-active,.quick-action.is-active{border-color:var(--accent);color:var(--accent-dark);background:var(--soft)}.entity-actions{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}.entity-actions .button{min-height:42px;padding:9px 13px;font-size:.78rem}.card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.quick-action{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:var(--surface);font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}.quick-action:hover{color:var(--accent-dark);border-color:var(--accent)}.listing-tools-links{display:flex;justify-content:flex-end;gap:18px;margin:-12px 0 18px}.listing-tools-links a{font-weight:800}.autocomplete-wrap{position:relative}.autocomplete-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}.autocomplete-results a{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:center;padding:10px;border-bottom:1px solid var(--border);color:var(--ink)}.autocomplete-results a:last-child{border-bottom:0}.autocomplete-results a:focus-visible{position:relative;z-index:1;outline:3px solid color-mix(in srgb,var(--accent) 60%,#fff);outline-offset:-3px;background:var(--soft)}.autocomplete-results img,.autocomplete-placeholder{width:52px;height:44px;object-fit:cover;border-radius:7px;background:var(--soft)}.autocomplete-results span{display:grid;gap:3px}.autocomplete-results small,.autocomplete-results p{color:var(--muted)}.autocomplete-results p{margin:0;padding:14px}.property-map-search{margin:22px 0 30px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 18px;border-bottom:1px solid var(--border)}.map-toolbar div{display:grid;gap:3px}.map-toolbar span{color:var(--muted);font-size:.8rem}.property-map{height:520px;background:var(--soft)}.search-panel-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:15px}.saved-search-card{margin:0 0 28px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.saved-search-card summary{padding:16px 18px;font-weight:800;cursor:pointer}.saved-search-card form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;padding:0 18px 18px}.saved-search-card label{display:grid;gap:6px;font-size:.82rem;font-weight:700}.mortgage-calculator{display:grid;gap:13px}.mortgage-calculator label,.mortgage-fields label{display:grid;gap:5px;font-size:.8rem;font-weight:700}.mortgage-calculator input,.mortgage-fields input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px}.mortgage-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mortgage-result{display:grid;gap:4px;padding:15px;border-radius:10px;background:var(--soft)}.mortgage-result strong{font-size:1.35rem}.mortgage-result small{color:var(--muted)}.price-history-list{display:grid;gap:0}.price-history-list>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--border)}.price-history-list>div:last-child{border-bottom:0}.price-history-list time{color:var(--muted);font-size:.78rem}.compare-scroll{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.compare-table{width:100%;min-width:760px;border-collapse:collapse}.compare-table th,.compare-table td{padding:14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.compare-table thead th{min-width:190px;background:var(--soft)}.compare-table th:first-child{position:sticky;left:0;z-index:2;min-width:170px;background:var(--soft)}.compare-table .link-button{display:block;margin-top:8px;color:#b42318}.link-button{padding:0;border:0;background:transparent;color:var(--accent-dark);font:inherit;font-weight:800;cursor:pointer}
@media(max-width:800px){.property-map{height:420px}.map-toolbar{align-items:flex-start;flex-direction:column}.saved-search-card form,.mortgage-fields{grid-template-columns:1fr}.listing-tools-links{justify-content:flex-start;flex-wrap:wrap}}

/* Portal trust, ratings and classifieds alerts */
.saved-search-box{display:grid;gap:10px;margin-top:20px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--soft)}
.saved-search-box>p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}
.saved-search-box form{display:grid;gap:10px}
.saved-search-box label{display:grid;gap:5px;font-size:.8rem;font-weight:800}
.saved-search-box input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.seller-trust-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.verified-badge,.rating-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.76rem;font-weight:850}
.verified-badge{color:#067647;background:#ecfdf3;border:1px solid #abefc6}
.rating-badge{color:#854a0e;background:#fffaeb;border:1px solid #fedf89}
.seller-reviews{display:grid;gap:10px;margin-top:14px}
.seller-review{padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.seller-review p{margin:6px 0 0;color:var(--muted)}
.portal-rating-form{display:grid;gap:10px;margin-top:14px}
.portal-rating-form textarea,.portal-rating-form select{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}

/* Promotions */
.product-card.has-promotion{position:relative}.promotion-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}.promotion-price del{color:var(--muted);font-size:.82em}.promotion-price strong{color:#b42318}.saving-pill{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#fee4e2;color:#b42318;font-size:.72rem;font-weight:900}.promotion-label{margin:3px 0;color:var(--muted);font-size:.78rem;line-height:1.45}.promotion-countdown{margin:5px 0;color:#854a0e;font-size:.75rem}.promotion-countdown.is-expired{color:var(--muted)}.promotion-callout{display:grid;gap:3px;margin:14px 0;padding:13px 15px;border:1px solid #fedf89;border-radius:12px;background:#fffaeb;color:#854a0e}.promotion-callout strong{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.promotion-callout span{font-weight:800}.promotion-callout small{font-size:.76rem}.card-badge.sale{background:#b42318;color:#fff}


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* Professional Corporate */
.theme-basic-site .site-header { border-bottom-color: rgba(24, 160, 111, .12); }
.theme-basic-site .hero { background: linear-gradient(120deg, #f4f7ff 0%, #ffffff 50%, #edf9f3 100%); }
.theme-basic-site .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); }
.theme-basic-site .hero h1 { color: #10243a; }
.theme-basic-site .hero-media.has-image { border-radius: 16px 64px 16px 64px; }
.theme-basic-site .hero-visual { border-radius: 16px 64px 16px 64px; }
.theme-basic-site .feature-card { border-top: 4px solid transparent; }
.theme-basic-site .feature-card:hover { border-top-color: var(--accent); }
.theme-basic-site .cta-box { background: linear-gradient(120deg, #10243a, #173c72); }
.theme-basic-site .page-hero { background: linear-gradient(135deg, #e9f0ff, #ffffff); }
.theme-basic-site .product-card, .theme-basic-site .listing-card { border-radius: 14px; }

/* Responsive navigation drawer */
.primary-nav-mobile-intro,
.primary-nav-mobile-actions {
    display: none;
}

@media (max-width: 900px) {
    .site-header {
        overflow: visible;
        backdrop-filter: none;
    }

    .header-inner {
        position: relative;
    }

    .primary-nav {
        position: absolute;
        top: 100%;
        right: 0;
        bottom: auto;
        z-index: 73;
        width: min(390px, calc(100vw - 24px));
        height: calc(100dvh - var(--header-height) - env(safe-area-inset-bottom));
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-top: 0;
        border-radius: 0 0 0 24px;
        background: var(--surface);
        box-shadow: -20px 22px 55px rgba(16, 24, 40, .18);
        clip-path: none;
        opacity: 0;
        visibility: hidden;
        transform: translateX(calc(100% + 28px));
        transition: transform .24s ease, opacity .2s ease, visibility .24s ease;
    }

    .primary-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .primary-nav-mobile-intro {
        display: grid;
        gap: 1px;
        padding: 19px 18px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--page);
    }

    .primary-nav-mobile-intro span {
        color: var(--muted);
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .primary-nav-mobile-intro strong {
        color: var(--ink);
        font-size: 1rem;
    }

    .primary-nav-inner {
        display: block;
        padding: 12px;
    }

    .primary-nav .menu-list {
        width: 100%;
        display: grid;
        gap: 5px;
    }

    .primary-nav .menu-item {
        width: 100%;
        display: block;
    }

    .primary-nav .menu-item > a {
        width: 100%;
        min-height: 49px;
        justify-content: flex-start;
        padding: 11px 13px;
        border-radius: 11px;
        color: var(--ink);
        background: transparent;
        font-size: .95rem;
        white-space: normal;
    }

    .primary-nav .menu-item.is-active > a,
    .primary-nav .menu-item > a:hover {
        color: var(--accent-dark);
        background: var(--soft);
    }

    .primary-nav .sub-menu {
        width: auto;
        margin: 3px 0 8px 13px;
        padding: 5px 0 5px 10px;
    }

    .primary-nav .sub-menu .menu-item > a {
        min-height: 42px;
        font-size: .86rem;
    }

    .primary-nav-mobile-actions {
        display: grid;
        gap: 9px;
        margin-top: auto;
        padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--surface);
    }

    .primary-nav-mobile-actions .button {
        width: 100%;
        min-height: 44px;
    }

    .nav-backdrop {
        z-index: 69;
        background: rgba(13, 27, 42, .54);
        backdrop-filter: blur(3px);
    }
}

@media (max-width: 560px) {
    .primary-nav {
        left: 0;
        width: 100%;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        transform: translateY(-12px);
    }

    .primary-nav.is-open {
        transform: translateY(0);
    }
}

/* Nutrition Premium 2026: blue public navigation and footer */
.site-header--nutrition {
    border-bottom-color: rgba(198, 219, 239, .78);
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 1px 0 rgba(8, 48, 107, .025);
}

.site-header--nutrition.is-scrolled {
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 38px rgba(8, 48, 107, .09);
}

.site-header--nutrition .header-inner {
    min-height: var(--header-height);
    gap: 24px;
}

.site-header--nutrition .brand {
    gap: 10px;
}

.site-header--nutrition .brand-logo-symbol {
    overflow: hidden;
    width: 60px;
    height: 60px;
    display: inline-flex;
    border-radius: 13px;
}

.site-header--nutrition .brand-logo-symbol picture,
.site-header--nutrition .brand-logo-symbol img {
    width: 60px;
    height: 60px;
}

.site-header--nutrition .brand-logo-symbol .brand-image {
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.site-header--nutrition .brand-copy strong {
    max-width: 180px;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 880;
    letter-spacing: -.035em;
}

.site-header--nutrition .primary-nav .menu-list {
    gap: 3px;
}

.site-header--nutrition .primary-nav .menu-item > a {
    min-height: 44px;
    padding-inline: 13px;
    border-radius: 12px;
    color: #263a50;
    font-size: .9rem;
    font-weight: 760;
}



.site-header--nutrition .primary-nav .menu-item > a:hover,
.site-header--nutrition .primary-nav .menu-item.is-active > a {
    color: var(--accent-dark);
    background: var(--soft);
}

.site-header--nutrition .primary-nav .menu-item > a::after {
    right: 13px;
    bottom: 3px;
    left: 13px;
    background: var(--accent);
}

.site-header--nutrition .primary-nav .menu-list > .has-children > .sub-menu {
    left: 50%;
    min-width: 540px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 16px;
    border-color: rgba(198, 219, 239, .88);
    border-radius: 22px;
    box-shadow: 0 24px 68px rgba(8, 48, 107, .15);
    transform: translate(-50%, 10px);
}

.site-header--nutrition .primary-nav .menu-list > .has-children:hover > .sub-menu,
.site-header--nutrition .primary-nav .menu-list > .has-children:focus-within > .sub-menu,
.site-header--nutrition .primary-nav .menu-list > .has-children.is-open > .sub-menu {
    transform: translate(-50%, 0);
}

.site-header--nutrition .primary-nav .sub-menu .menu-item > a {
    min-height: 64px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-content: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--ink);
    line-height: 1.2;
}

.site-header--nutrition .primary-nav .sub-menu .menu-item > a::before {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    grid-row: 1;
    border-radius: 12px;
    color: var(--accent-dark);
    background: #eaf4fb;
    content: "›";
    font-size: 1.25rem;
    font-weight: 900;
}

.site-header--nutrition .primary-nav .sub-menu .menu-item > a::after {
    display: none;
}

.site-header--nutrition .primary-nav .sub-menu .menu-item > a:hover {
    border-color: #c6dbef;
    background: var(--soft);
    transform: translateY(-1px);
}

.site-header--nutrition .header-link {
    color: var(--accent-dark);
    font-size: .86rem;
}

.site-header--nutrition .header-cta {
    min-height: 44px;
    padding-inline: 19px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(33, 113, 181, .2);
}

.site-header--nutrition .nav-toggle {
    width: 46px;
    min-height: 46px;
    justify-content: center;
    padding: 0 12px;
    border-color: #9ecae1;
    color: var(--accent-dark);
    background: var(--soft);
}

.site-footer {
    color: #c6d8ea;
    background: linear-gradient(135deg, #082844, #08306b 58%, #0a477d);
}

.site-footer .footer-grid {
    padding-block: 66px 48px;
}

.site-footer .brand-footer .brand-image {
    filter: none;
}

.site-footer .brand-footer .brand-copy strong,
.site-footer .footer-column h2 {
    color: #fff;
}

.site-footer .footer-brand p,
.site-footer .footer-bottom {
    color: #a9c0d5;
}

.site-footer .footer-nav a,
.site-footer .footer-links a,
.site-footer .footer-contact a {
    color: #c6d8ea;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-links a:hover,
.site-footer .footer-contact a:hover {
    color: #fff;
}

.site-footer .footer-bottom {
    border-top-color: rgba(255,255,255,.13);
}

@media (max-width: 1100px) {
    .site-header--nutrition .primary-nav .menu-item > a {
        padding-inline: 10px;
        font-size: .84rem;
    }
}

@media (max-width: 900px) {
    .site-header--nutrition .brand-copy strong {
        font-size: 1.12rem;
    }

    .site-header--nutrition .nav-toggle-label {
        display: none;
    }

    .site-header--nutrition .primary-nav {
        top: calc(100% + 1px);
        right: -15px;
        width: min(410px, calc(100vw - 20px));
        height: calc(100dvh - var(--header-height) - env(safe-area-inset-bottom));
        border: 1px solid var(--border);
        border-top: 0;
        border-radius: 0 0 0 25px;
        background: #fff;
        box-shadow: -24px 30px 70px rgba(8, 48, 107, .2);
    }

    .site-header--nutrition .primary-nav-mobile-intro {
        padding: 19px 18px 15px;
        background: linear-gradient(135deg, #f7fbff, #edf6fc);
    }

    .site-header--nutrition .primary-nav-inner {
        padding: 10px 14px 20px;
    }

    .site-header--nutrition .primary-nav .menu-list {
        gap: 3px;
    }

    .site-header--nutrition .primary-nav .menu-item > a {
        min-height: 50px;
        padding: 12px 13px;
        font-size: .93rem;
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children > .sub-menu {
        position: static;
        width: auto;
        min-width: 0;
        display: none;
        grid-template-columns: 1fr;
        gap: 6px;
        margin: 2px 0 10px;
        padding: 8px;
        border: 1px solid #deebf7;
        border-radius: 17px;
        background: #fbfdff;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .site-header--nutrition .primary-nav .menu-list > .has-children.is-open > .sub-menu {
        display: grid;
        transform: none;
    }

    .site-header--nutrition .primary-nav .sub-menu .menu-item > a {
        min-height: 58px;
        grid-template-columns: 36px 1fr;
        padding: 9px 10px;
        background: #fff;
    }

    .site-header--nutrition .primary-nav .submenu-toggle {
        top: 5px;
        right: 5px;
        width: 40px;
        height: 40px;
        color: var(--accent-dark);
        background: var(--soft);
    }

    .site-header--nutrition .primary-nav-mobile-actions {
        background: #fff;
    }
}

@media (max-width: 560px) {
    .site-header--nutrition .primary-nav {
        right: -12px;
        left: -12px;
        width: auto;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
}