/* Global public-site shell: unify navigation and presentation across static + dynamic pages. */
:root{
  --shell-bg:#f6f8fb;
  --shell-surface:#fff;
  --shell-text:#111827;
  --shell-muted:#64748b;
  --shell-line:#e2e8f0;
  --shell-blue:#2563eb;
  --shell-blue-dark:#1d4ed8;
  --shell-navy:#0f172a;
  --shell-orange:#f97316;
}

html{scroll-behavior:smooth}
body.site-modernized{background:var(--shell-bg);color:var(--shell-text)}
body.site-modernized .vehicle-switch,
body.site-modernized .topbar,
body.site-modernized .favorites-bar,
body.site-modernized .sg-header{display:none!important}

/* Unified public header */
.site-global-header{
  position:sticky;top:0;z-index:999;
  min-height:68px;padding:0 28px;
  display:flex;align-items:center;gap:24px;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--shell-line);
  box-shadow:0 2px 12px rgba(15,23,42,.035);backdrop-filter:blur(12px);
}
.site-global-header *{box-sizing:border-box}
.site-global-header a{text-decoration:none}
.site-global-brand{display:flex;align-items:center;gap:10px;color:var(--shell-navy);white-space:nowrap;min-width:0}
.site-global-brand .site-brand-icon{font-size:25px;line-height:1}
.site-global-brand .site-brand-copy{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.site-global-brand .site-brand-copy b{font-size:16px;white-space:nowrap}
.site-global-brand .site-brand-copy small{font-size:11px;color:var(--shell-muted);margin-top:4px;white-space:nowrap}
.site-global-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.site-global-nav a,.site-global-more summary{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;color:#334155;font-size:14px;font-weight:750;white-space:nowrap;cursor:pointer}
.site-global-nav a:hover,.site-global-more summary:hover{background:#f1f5f9;color:var(--shell-navy)}
.site-global-nav a.is-active{background:#eff6ff;color:var(--shell-blue)}
.site-global-mode{display:flex;gap:4px;padding:4px;background:#f1f5f9;border-radius:12px}
.site-global-mode a{padding:8px 12px;border-radius:9px;color:#475569;font-size:13px;font-weight:800;white-space:nowrap}
.site-global-mode a.active{background:#fff;color:var(--shell-blue);box-shadow:0 1px 4px rgba(15,23,42,.08)}
.site-global-more{position:relative;margin:0}
.site-global-more summary{list-style:none}
.site-global-more summary::-webkit-details-marker{display:none}
.site-global-more-panel{position:absolute;right:0;top:48px;width:230px;padding:8px;background:#fff;border:1px solid var(--shell-line);border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.14)}
.site-global-more-panel a{display:block;padding:11px 12px;border-radius:9px;color:#334155;font-size:14px;font-weight:700}
.site-global-more-panel a:hover{background:#f8fafc;color:var(--shell-blue)}
.site-global-more-panel .menu-cta{margin-top:5px;background:#fff7ed;color:#c2410c}

/* Existing clean homepage header follows the same rules. */
body.site-modernized>.clean-header{z-index:999}

/* Common page rhythm */
body.site-modernized main:not(.sg-shell):not(.guide-shell):not(.shell){max-width:1180px;margin-left:auto;margin-right:auto}
body.site-modernized footer{background:var(--shell-navy)!important;color:#cbd5e1!important;border-top:0!important}
body.site-modernized footer b{color:#fff!important}
body.site-modernized footer a{color:#bfdbfe!important}

/* Old subpage heroes -> one visual language */
body.site-modernized .recommend-hero,
body.site-modernized .compare-hero,
body.site-modernized .goods-hero,
body.site-modernized .feedback-hero{
  margin:0!important;border-radius:0!important;
  background:linear-gradient(135deg,#0f172a 0%,#172554 55%,#1e3a8a 100%)!important;
  color:#fff!important;box-shadow:none!important;
}
body.site-modernized .recommend-hero-inner,
body.site-modernized .compare-hero-inner,
body.site-modernized .goods-hero-inner,
body.site-modernized .feedback-hero-inner{
  max-width:980px!important;margin:0 auto!important;padding:64px 22px 56px!important;text-align:center!important;
}
body.site-modernized .recommend-hero h1,
body.site-modernized .compare-hero h1,
body.site-modernized .goods-hero h1,
body.site-modernized .feedback-hero h1{
  color:#fff!important;font-size:clamp(34px,5vw,56px)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:10px auto 16px!important;
}
body.site-modernized .recommend-hero p,
body.site-modernized .compare-hero p,
body.site-modernized .goods-hero p,
body.site-modernized .feedback-hero p{color:#dbeafe!important;max-width:760px!important;margin:0 auto!important;line-height:1.8!important}
body.site-modernized .recommend-hero-points,
body.site-modernized .feedback-hero-points{justify-content:center!important;margin-top:22px!important}
body.site-modernized .recommend-hero-points span,
body.site-modernized .feedback-hero-points span{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.16)!important;color:#e2e8f0!important}
body.site-modernized .rec-eyebrow,
body.site-modernized .eyebrow{color:#93c5fd!important}

/* Standalone hub pages that previously looked like separate sites. */
body.site-modernized .shell,
body.site-modernized .guide-shell{max-width:1120px!important;margin:0 auto!important;padding:32px 18px 72px!important}
body.site-modernized .shell>.hero,
body.site-modernized .guide-hero{
  background:linear-gradient(135deg,#0f172a 0%,#172554 58%,#1e3a8a 100%)!important;
  color:#fff!important;border-radius:22px!important;padding:42px 36px!important;box-shadow:none!important;
}
body.site-modernized .shell>.hero h1,
body.site-modernized .guide-hero h1{color:#fff!important;letter-spacing:-.03em!important}
body.site-modernized .shell>.hero p,
body.site-modernized .guide-hero p{color:#dbeafe!important}
body.site-modernized .shell>.hero small,
body.site-modernized .guide-hero>small{color:#93c5fd!important}
body.site-modernized .shell>.hero a{background:var(--shell-blue)!important;color:#fff!important;border-radius:11px!important}
body.site-modernized .top{color:var(--shell-muted)!important}
body.site-modernized .top a{color:var(--shell-blue)!important}

/* Cards, tools and section surfaces */
body.site-modernized .compare-controls,
body.site-modernized .compare-results-section,
body.site-modernized .goods-section,
body.site-modernized .goods-upgrade-panel,
body.site-modernized .feedback-form-card,
body.site-modernized .feedback-board-card,
body.site-modernized .guide-card,
body.site-modernized .shell .card{
  border-color:var(--shell-line)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.045)!important;
}
body.site-modernized .guide-card,
body.site-modernized .shell .card{border-radius:16px!important;background:#fff!important}
body.site-modernized .guide-card:hover,
body.site-modernized .shell .card:hover{border-color:#bfdbfe!important;box-shadow:0 12px 30px rgba(15,23,42,.08)!important}
body.site-modernized .compare-run-btn,
body.site-modernized .recommend-submit,
body.site-modernized button[type="submit"]{border-radius:11px!important}

/* Goods summary becomes a calmer navigation strip. */
body.site-modernized .goods-summary-strip{max-width:1120px!important;margin:22px auto 0!important;padding:0 18px!important;gap:10px!important}
body.site-modernized .goods-summary-card{background:#fff!important;border:1px solid var(--shell-line)!important;border-radius:14px!important;box-shadow:none!important}

/* Sell / appraisal editorial pages keep their content, but match the site's canvas. */
body.site-modernized.sell-guide-page{background:var(--shell-bg)!important}
body.site-modernized .sg-shell{max-width:1120px!important;margin:0 auto!important}
body.site-modernized .sg-breadcrumb{padding-top:22px!important}
body.site-modernized .sg-hero{border-radius:22px!important;box-shadow:none!important}
body.site-modernized .sg-section,
body.site-modernized .sg-card,
body.site-modernized .sg-tool{border-color:var(--shell-line)!important}

/* Policy */
body.site-modernized .policy-page{max-width:900px!important;margin:0 auto!important;padding:42px 20px 72px!important}
body.site-modernized .policy-back{display:inline-flex!important;margin-bottom:18px!important;color:var(--shell-blue)!important;font-weight:800!important;text-decoration:none!important}
body.site-modernized .policy-page>h1{font-size:clamp(32px,5vw,48px)!important;letter-spacing:-.035em!important;color:var(--shell-navy)!important;margin:0 0 12px!important}
body.site-modernized .policy-lead{color:var(--shell-muted)!important;font-size:16px!important;line-height:1.8!important}
body.site-modernized .policy-page>section{background:#fff!important;border:1px solid var(--shell-line)!important;border-radius:16px!important;padding:22px 24px!important;margin:14px 0!important;box-shadow:0 7px 22px rgba(15,23,42,.035)!important}
body.site-modernized .policy-page>section h2{margin-top:0!important;color:var(--shell-navy)!important}
body.site-modernized .policy-page>section p{color:#475569!important;line-height:1.9!important}

/* Give standalone 404s a clean home-like canvas if present. */
body.site-modernized .not-found,body.site-modernized .error-page{max-width:760px;margin:60px auto;padding:32px;background:#fff;border:1px solid var(--shell-line);border-radius:18px}

@media(max-width:1050px){
  .site-global-header{padding:8px 16px;gap:12px;flex-wrap:wrap;min-height:64px}
  .site-global-nav{order:3;width:100%;overflow-x:auto;margin:0;padding:0 0 4px;justify-content:flex-start;scrollbar-width:none}
  .site-global-nav::-webkit-scrollbar{display:none}
  .site-global-nav a{flex:0 0 auto}
  .site-global-mode{margin-left:auto}
}
@media(max-width:680px){
  .site-global-header{padding:8px 12px}
  .site-global-brand .site-brand-copy b{font-size:14px}
  .site-global-brand .site-brand-copy small{display:none}
  .site-global-mode a{padding:7px 9px;font-size:12px}
  .site-global-more summary{padding:0 8px;font-size:13px}
  .site-global-nav{gap:3px}
  .site-global-nav a{font-size:12px;padding:0 9px;min-height:36px}
  .site-global-more-panel{position:fixed;right:10px;top:58px;width:min(270px,calc(100vw - 20px))}
  body.site-modernized .recommend-hero-inner,
  body.site-modernized .compare-hero-inner,
  body.site-modernized .goods-hero-inner,
  body.site-modernized .feedback-hero-inner{padding:44px 18px 40px!important}
  body.site-modernized .shell,
  body.site-modernized .guide-shell{padding:22px 12px 56px!important}
  body.site-modernized .shell>.hero,
  body.site-modernized .guide-hero{padding:30px 22px!important;border-radius:18px!important}
  body.site-modernized .policy-page{padding:30px 12px 56px!important}
  body.site-modernized .policy-page>section{padding:18px!important}
}