/* Style B "Aurora Glass" (step 3, 2026-09). A layer on top of site.css (store)
   and the company homepage's own styles. Every selector starts with "body" so
   it outranks the page's <helmet> styles, which the runtime injects later.
   Undo: remove this file's <link> tags. aurora.test.js checks both rules. */

html body{
  --glass-dark:oklch(16% 0.055 272 / .82);
  --glass-line-dark:oklch(100% 0 0 / .12);
  --aurora-cyan:oklch(74% 0.13 199 / .36);
  --aurora-violet:oklch(56% 0.15 300 / .42);
  --aurora-blue:oklch(51% 0.17 252 / .28);
  background:radial-gradient(1100px 520px at 100% 0%,oklch(95% 0.025 255 / .7),transparent 62%),radial-gradient(900px 480px at 0% 30%,oklch(96% 0.02 300 / .55),transparent 60%),var(--canvas,oklch(98.2% 0.006 258));
  background-attachment:fixed;
}

/* ---------- header: dark frosted glass ---------- */
body .site-header{background:var(--glass-dark);border-bottom:1px solid var(--glass-line-dark);color:oklch(96% 0.01 258);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);}
body .brand-link{padding:6px 10px;border-radius:12px;background:#fff;box-shadow:0 6px 18px -10px oklch(0% 0 0 / .6);}
body .brand-link img{height:38px;}
body .nav a{color:oklch(86% 0.02 258);}
body .nav a:hover{color:#fff;background:oklch(100% 0 0 / .08);}
body .nav a[aria-current="page"]{color:#fff;background:oklch(100% 0 0 / .12);}
body .icon-btn{background:oklch(100% 0 0 / .08);border-color:oklch(100% 0 0 / .2);color:#fff;}
body .icon-btn:hover{border-color:oklch(100% 0 0 / .4);}
body .mobile-nav{background:oklch(18% 0.06 270);border-top-color:var(--glass-line-dark);}
body .mobile-nav a{color:oklch(92% 0.015 258);border-bottom-color:oklch(100% 0 0 / .08);}
body .mobile-nav a[aria-current="page"]{color:oklch(86% 0.09 199);}
@media (min-width:881px){
  body .nav{flex:0 1 auto;margin-inline:auto;padding:4px;border-radius:999px;background:oklch(100% 0 0 / .06);border:1px solid var(--glass-line-dark);}
  body .nav a{border-radius:999px;}
}

/* ---------- heroes: aurora ---------- */
body .hero,body .page-hero{background:radial-gradient(900px 520px at 82% 0%,var(--aurora-cyan),transparent 70%),radial-gradient(820px 560px at 8% 100%,var(--aurora-violet),transparent 70%),radial-gradient(600px 400px at 50% 50%,var(--aurora-blue),transparent 70%),linear-gradient(140deg,oklch(15% 0.05 272),oklch(27% 0.1 260));}

/* hero product search (homepage) */
body .hero-search{display:flex;align-items:center;gap:10px;width:min(680px,100%);margin:28px auto 0;padding:8px 8px 8px 18px;border-radius:18px;background:oklch(100% 0 0 / .08);border:1px solid oklch(100% 0 0 / .22);box-shadow:0 0 0 6px oklch(60% 0.12 260 / .08),0 24px 48px -28px oklch(0% 0 0 / .6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left;}
body .hero-search:focus-within{border-color:oklch(88% 0.09 199 / .85);outline:3px solid oklch(74% 0.13 199);outline-offset:3px;}
body .hero-search svg{flex:0 0 auto;color:oklch(88% 0.09 199);}
body .hero-search input{flex:1;min-width:0;min-height:48px;padding:0;border:0;background:transparent;color:#fff;font-size:17px;outline:none;}
body .hero-search input::placeholder{color:oklch(82% 0.03 258);}
body .hero-search .btn{flex:0 0 auto;}
body .live-line{display:inline-block;margin-top:18px;padding:8px 16px;border-radius:999px;background:oklch(100% 0 0 / .07);border:1px solid oklch(100% 0 0 / .14);font-size:14px;color:oklch(92% 0.02 258);}
body .live-line strong{color:#fff;}
body .live-line .pulse{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:oklch(64% 0.17 150);vertical-align:middle;animation:live-pulse 2.2s ease-out infinite;}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 oklch(64% 0.17 150 / .55);}70%{box-shadow:0 0 0 10px oklch(64% 0.17 150 / 0);}100%{box-shadow:0 0 0 0 oklch(64% 0.17 150 / 0);}}
@media (prefers-reduced-motion:reduce){body .live-line .pulse{animation:none;}}
/* The company homepage has no .sr-only of its own. */
body .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:560px){
  body .hero-search{flex-wrap:wrap;padding:10px;}
  body .hero-search input{flex-basis:calc(100% - 40px);}
  body .hero-search .btn{width:100%;}
}

/* ---------- light content: glass cards ---------- */
body .pcard,body .info,body .panel,body .mini,body .brands{background:linear-gradient(180deg,#fff,oklch(99% 0.004 258));border-color:oklch(90% 0.015 258);box-shadow:inset 0 1px 0 #fff,0 10px 30px -18px oklch(30% 0.08 270 / .25);}
body .pcard:hover,body a.info:hover,body .mini:hover{border-color:transparent;box-shadow:0 0 0 1px oklch(60% 0.14 270 / .45),0 22px 40px -22px oklch(45% 0.15 270 / .45);}
body .pcard:focus-within,body a.info:focus-visible{box-shadow:0 0 0 2px oklch(60% 0.14 270 / .6),0 22px 40px -22px oklch(45% 0.15 270 / .45);}

/* ---------- dark bands and footer ---------- */
body .feature,body .cta{background:radial-gradient(700px 360px at 90% 0%,var(--aurora-cyan),transparent 70%),radial-gradient(640px 360px at 0% 100%,var(--aurora-violet),transparent 70%),linear-gradient(135deg,oklch(15% 0.05 272),oklch(27% 0.1 260));}
body .site-footer{background:radial-gradient(760px 320px at 92% 0%,oklch(51% 0.17 252 / .22),transparent 70%),radial-gradient(620px 300px at 0% 100%,oklch(56% 0.15 300 / .2),transparent 70%),linear-gradient(160deg,oklch(15% 0.05 272),oklch(23% 0.08 262));}

/* ---------- no backdrop-filter: solid surfaces ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .site-header{background:oklch(16% 0.055 272);}
  body .hero-search{background:oklch(24% 0.07 266);}
}

/* ---------- AI assistant (step 4) ---------- */
body .ai-fab{position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:61;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:linear-gradient(135deg,oklch(51% 0.17 252),oklch(56% 0.15 300));color:#fff;font-weight:800;font-size:15px;box-shadow:0 14px 30px -10px oklch(45% 0.15 270 / .7);cursor:pointer;}
body .ai-panel{position:fixed;z-index:80;right:20px;bottom:20px;display:flex;flex-direction:column;width:min(420px,calc(100vw - 40px));height:min(640px,calc(100dvh - 40px));border-radius:20px;background:#fff;color:oklch(22% 0.03 265);border:1px solid oklch(90% 0.015 258);box-shadow:0 30px 60px -20px oklch(20% 0.06 270 / .45);overflow:hidden;}
body .ai-panel[hidden]{display:none;}
body .ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;background:linear-gradient(140deg,oklch(15% 0.05 272),oklch(27% 0.1 260));color:#fff;}
body .ai-title{font-size:17px;color:#fff;}
body .ai-sub{margin-top:4px;font-size:13px;color:oklch(84% 0.02 258);}
body .ai-panel .ai-msg .ai-sub{color:oklch(42% 0.02 262);}
body .ai-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid oklch(100% 0 0 / .25);background:oklch(100% 0 0 / .08);color:#fff;cursor:pointer;}
body .ai-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:16px;background:oklch(98.2% 0.006 258);}
body .ai-msg{max-width:92%;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.5;}
body .ai-user{align-self:flex-end;background:linear-gradient(135deg,oklch(51% 0.17 252),oklch(56% 0.15 300));color:#fff;}
body .ai-assistant{align-self:flex-start;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid oklch(90% 0.015 258);}
body .ai-card{display:flex;gap:12px;padding:10px;border-radius:12px;border:1px solid oklch(92% 0.012 258);}
body .ai-card img{width:72px;height:72px;object-fit:contain;flex:0 0 auto;}
body .ai-card-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
body .ai-card-name{font-weight:800;font-size:14.5px;color:oklch(22% 0.03 265);}
body .ai-card-price{font-family:var(--display,inherit);font-weight:700;}
body .ai-card-reason{font-size:13.5px;color:oklch(42% 0.02 262);}
body .ai-card .add{align-self:flex-start;}
body .ai-wa{align-self:stretch;}
body .ai-form{display:flex;gap:8px;padding:12px;border-top:1px solid oklch(92% 0.012 258);background:#fff;}
body .ai-form[hidden]{display:none;}
body .ai-form input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid oklch(84% 0.03 258);font-size:16px;}
@media (max-width:640px){
  body .ai-fab{right:16px;bottom:calc(80px + env(safe-area-inset-bottom));}
  body .ai-panel{inset:0;width:100%;height:100dvh;border-radius:0;}
  html.ai-open body{overflow:hidden;}
}