/* AURORA THEME v1 - shared header, buttons, footer, accessibility.
   Arial throughout, squarer corners, one button system. */
:root{
  --aur-ink:#0f172a; --aur-ink-2:#334155; --aur-muted:#5b6b7f;
  --aur-line:#dbe3ec; --aur-bg:#ffffff; --aur-bg-2:#f5f8fb;
  --aur-brand:#0b5f8a; --aur-brand-dk:#08425f; --aur-brand-lt:#e6f1f8;
  --aur-accent:#1d7fb8; --aur-accent-dk:#155f8a;
  --aur-warn:#b45309;
  --aur-r:4px;                 /* squarer edges */
  --aur-focus:#f59e0b;
}
html,body,button,input,select,textarea,
h1,h2,h3,h4,h5,h6,p,a,li,td,th,label,span,div{
  font-family:Arial,Helvetica,sans-serif !important;
}
body{color:var(--aur-ink);}

/* ---------- one button system ---------- */
.aur-b,
.site-header .hdr-btn,
.aur-navbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; padding:9px 15px;
  border:1px solid var(--aur-line); border-radius:var(--aur-r);
  background:var(--aur-bg); color:var(--aur-ink);
  font-size:.83rem; font-weight:700; line-height:1.1;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.aur-b:hover,.site-header .hdr-btn:hover,.aur-navbtn:hover{
  background:var(--aur-brand-lt); border-color:var(--aur-brand); color:var(--aur-brand-dk);
}
.aur-b--primary{background:var(--aur-brand); border-color:var(--aur-brand); color:#fff;}
.aur-b--primary:hover{background:var(--aur-brand-dk); border-color:var(--aur-brand-dk); color:#fff;}
.aur-b--accent{background:var(--aur-accent); border-color:var(--aur-accent); color:#fff;}
.aur-b--accent:hover{background:var(--aur-accent-dk); border-color:var(--aur-accent-dk); color:#fff;}
.aur-b--ghost{background:transparent;}
.aur-b[disabled],.aur-b:disabled{opacity:.5; cursor:not-allowed;}

/* visible focus everywhere - keyboard users must be able to see where they are */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--aur-focus); outline-offset:2px; border-radius:2px;
}

/* ---------- header ---------- */
.site-header{
  background:var(--aur-bg);
  border-bottom:3px solid var(--aur-brand);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.site-header .header-inner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px; max-width:1500px; margin:0 auto;
}
.site-header .header-logo img{
  height:46px; width:auto; display:block;
}
.site-header .header-tagline{
  font-weight:700; font-size:.8rem; color:var(--aur-brand);
  letter-spacing:.02em; padding:5px 10px;
  background:var(--aur-brand-lt); border-radius:var(--aur-r);
}
.site-header .header-search, header.hd .header-search{
  display:flex; flex:1 1 300px; min-width:240px; max-width:560px;
  border:2px solid var(--aur-line); border-radius:var(--aur-r); overflow:hidden;
  background:var(--aur-bg);
}
.site-header .header-search:focus-within, header.hd .header-search:focus-within{border-color:var(--aur-brand);}
.site-header .header-search input, header.hd .header-search input{
  flex:1; min-width:0; border:0; outline:0; padding:10px 13px;
  font-size:.88rem; color:var(--aur-ink); background:transparent;
}
.site-header .header-search input::placeholder, header.hd .header-search input::placeholder{color:var(--aur-muted); opacity:1;}
.site-header .header-search button, header.hd .header-search button{
  border:0; background:var(--aur-brand); color:#fff;
  padding:0 17px; font-size:.9rem; cursor:pointer; font-weight:700;
}
.site-header .header-search button:hover, header.hd .header-search button:hover{background:var(--aur-brand-dk);}
.site-header .header-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.site-header .count-badge{
  background:var(--aur-accent); color:#fff; border-radius:999px;
  font-size:.66rem; font-weight:800; padding:1px 6px; margin-left:5px;
}

/* nav as buttons, never bare text links */
.aur-navrow{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:8px 18px; max-width:1500px; margin:0 auto;
  border-top:1px solid var(--aur-line); background:var(--aur-bg-2);
}
.aur-navbtn{min-height:36px; padding:7px 13px; font-size:.8rem;}
.aur-navbtn[aria-current="page"]{
  background:var(--aur-brand); border-color:var(--aur-brand); color:#fff;
}

/* skip link for keyboard and screen-reader users */
.aur-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--aur-brand); color:#fff; padding:11px 16px;
  border-radius:0 0 var(--aur-r) 0; font-weight:700;
}
.aur-skip:focus{left:0;}

/* ---------- accessibility panel ---------- */
.aur-a11y{position:relative;}
.aur-a11y-btn{
  width:40px; height:40px; padding:0; border-radius:var(--aur-r);
  border:1px solid var(--aur-line); background:var(--aur-bg);
  font-size:1.1rem; line-height:1; cursor:pointer; color:var(--aur-brand);
}
.aur-a11y-btn:hover,.aur-a11y[data-open="1"] .aur-a11y-btn{
  background:var(--aur-brand); color:#fff; border-color:var(--aur-brand);
}
.aur-a11y-pop{
  position:absolute; right:0; top:calc(100% + 8px); width:264px; z-index:600;
  background:var(--aur-bg); border:1px solid var(--aur-line);
  border-top:3px solid var(--aur-brand); border-radius:var(--aur-r);
  box-shadow:0 16px 40px rgba(15,23,42,.18); padding:12px;
  display:none;
}
.aur-a11y[data-open="1"] .aur-a11y-pop{display:block;}
.aur-a11y-pop h3{margin:0 0 8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--aur-muted);}
.aur-a11y-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 0; border-bottom:1px dashed var(--aur-line); font-size:.83rem;
}
.aur-a11y-row:last-of-type{border-bottom:0;}
.aur-a11y-toggle{
  min-width:58px; min-height:30px; padding:4px 10px; font-size:.74rem; font-weight:700;
  border:1px solid var(--aur-line); border-radius:var(--aur-r);
  background:var(--aur-bg-2); cursor:pointer; color:var(--aur-ink-2);
}
.aur-a11y-toggle[aria-pressed="true"]{background:var(--aur-accent); border-color:var(--aur-accent); color:#fff;}

/* accessibility preference states */
html.aur-bigtext{font-size:118%;}
html.aur-contrast body{background:#fff;}
html.aur-contrast .site-header,html.aur-contrast .aur-footer{background:#fff;}
html.aur-contrast *{color:#000 !important; border-color:#000 !important;}
html.aur-contrast .aur-b--primary,html.aur-contrast .aur-b--accent,
html.aur-contrast .site-header .header-search button, html.aur-contrast header.hd .header-search button{background:#000 !important; color:#fff !important;}
html.aur-contrast .aur-b--primary *,html.aur-contrast .aur-b--accent *{color:#fff !important;}
html.aur-underline a{text-decoration:underline !important;}
html.aur-spacing p,html.aur-spacing li{line-height:1.9 !important; letter-spacing:.02em;}
html.aur-nomotion *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}

/* ---------- footer ---------- */
.aur-footer{
  background:var(--aur-bg-2); border-top:3px solid var(--aur-brand);
  margin-top:44px; color:var(--aur-ink-2);
}
.aur-footer-in{
  max-width:1500px; margin:0 auto; padding:30px 18px 18px;
  display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.aur-footer h4{
  margin:0 0 10px; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--aur-ink);
}
.aur-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.aur-footer a{color:var(--aur-ink-2); text-decoration:none; font-size:.83rem;}
.aur-footer a:hover{color:var(--aur-brand); text-decoration:underline;}
.aur-footer-logo img{height:42px; width:auto; margin-bottom:10px;}
.aur-footer-blurb{font-size:.81rem; line-height:1.6; max-width:34ch;}
.aur-badges{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px;}
.aur-badge{
  font-size:.66rem; font-weight:800; letter-spacing:.03em;
  border:1px solid var(--aur-line); border-radius:var(--aur-r);
  padding:4px 8px; background:var(--aur-bg); color:var(--aur-ink-2);
}
.aur-footer-bar{
  border-top:1px solid var(--aur-line); padding:13px 18px;
  max-width:1500px; margin:0 auto;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.76rem; color:var(--aur-muted);
}
@media (max-width:700px){
  .site-header .header-tagline{display:none;}
  .site-header .header-inner{gap:10px; padding:9px 12px;}
  .site-header .header-logo img{height:38px;}
}

/* home page uses header.hd / nav.hd-nav */
header.hd{background:var(--aur-bg); border-bottom:3px solid var(--aur-brand);}
header.hd .hd-nav a,header.hd nav a{
  display:inline-flex; align-items:center; min-height:38px; padding:8px 13px;
  border:1px solid var(--aur-line); border-radius:var(--aur-r);
  background:var(--aur-bg); color:var(--aur-ink);
  font-size:.8rem; font-weight:700; text-decoration:none; margin:3px;
}
header.hd .hd-nav a:hover,header.hd nav a:hover{
  background:var(--aur-brand-lt); border-color:var(--aur-brand); color:var(--aur-brand-dk);
}
header.hd .aur-a11y{display:inline-block; margin-left:6px; vertical-align:middle;}


/* ---------- AURORA THEME v4: blue header, no green ---------- */
:root{ --aur-accent:#1d7fb8; --aur-accent-dk:#155f8a; }

.site-header .header-tagline{display:none !important;}

/* blue gradient, lighter to the left */
.site-header, header.hd{
  /* Top 3/4 white, soft blue only in the bottom quarter */
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 55%,#eef6fc 78%,#d6ecfb 100%);
  border-top:0;
  border-bottom:2px solid #0284c7;
}
.site-header .header-inner, header.hd > *{position:relative;}

/* logo: identical on every page, never clipped */
.site-header .header-logo, header.hd .header-logo{
  display:inline-flex; align-items:center; padding:2px 6px; overflow:visible; background:transparent;
}
.site-header .header-logo img, header.hd .header-logo img, header .header-logo img{
  height:auto !important; max-height:44px !important; width:auto !important;
  max-width:190px; object-fit:contain; display:block;
}

/* shorter search, white so it reads against the blue */
.site-header .header-search, header.hd .header-search{
  flex:0 1 320px; min-width:190px; max-width:340px;
  border:2px solid #ffffff; background:#fff; border-radius:var(--aur-r);
}
.site-header .header-search input, header.hd .header-search input{padding:8px 11px; font-size:.85rem;}
.site-header .header-search button, header.hd .header-search button{
  background:var(--aur-brand); color:#fff; padding:0 12px; min-width:42px;
  display:inline-flex; align-items:center; justify-content:center;
}
.site-header .header-search button:hover, header.hd .header-search button:hover{background:var(--aur-brand-dk);}
.site-header .header-search button svg, header.hd .header-search button svg{width:17px; height:17px; display:block;}

/* action buttons stay white cards so they hold contrast over the gradient */
.site-header .hdr-btn{background:#fff; border-color:#fff; color:var(--aur-brand-dk);}
.site-header .hdr-btn:hover{background:var(--aur-brand-lt); border-color:var(--aur-brand-lt);}
header.hd .hd-nav a, header.hd nav a{background:#fff; border-color:#fff; color:var(--aur-brand-dk);}
header.hd .hd-nav a:hover, header.hd nav a:hover{background:var(--aur-brand-lt);}

.site-header .header-actions{margin-left:auto;}
.aur-a11y{margin-left:10px; order:99;}
.aur-a11y-btn{
  width:32px; height:32px; min-height:32px; font-size:.95rem;
  background:#fff; border-color:#fff; color:var(--aur-brand-dk);
}
.aur-a11y-btn:hover, .aur-a11y[data-open="1"] .aur-a11y-btn{background:var(--aur-brand-dk); color:#fff;}
.site-header .count-badge{background:var(--aur-brand); color:#fff;}

/* ---------- home page message banner ---------- */
.aur-promo{
  background:#ffffff;
  color:var(--aur-ink); padding:22px 18px; border-bottom:1px solid var(--aur-line);
}
.aur-promo-in{
  max-width:1100px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; gap:11px; align-items:center;
}
.aur-promo h2{
  margin:0; font-size:clamp(1.02rem,2.3vw,1.5rem); line-height:1.32; font-weight:800;
  letter-spacing:.01em; max-width:44ch;
}
.aur-promo p{margin:0; font-size:.92rem; opacity:.95; max-width:56ch;}
.aur-promo-50{
  display:inline-block; border:2px solid rgba(255,255,255,.85); border-radius:var(--aur-r);
  padding:6px 14px; font-weight:800; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
}
.aur-promo .aur-b{background:#fff; border-color:#fff; color:var(--aur-brand-dk); min-height:44px; padding:11px 22px;}
.aur-promo .aur-b:hover{background:var(--aur-brand-lt); border-color:var(--aur-brand-lt);}

/* never show a broken image */
img[data-aur-broken="1"]{display:none !important;}

/* WCAG 2.2 target size */
button,a[role="button"],input[type="checkbox"],input[type="radio"],.chip,.pill,[onclick]{min-height:24px;}
button:not(.aur-a11y-toggle):not(.aur-thumb){min-width:24px;}
.site-header .header-search button, header.hd .header-search button{min-width:42px;}

@media (max-width:700px){
  .site-header .header-logo img, header .header-logo img{max-height:36px !important;}
  .site-header .header-search, header.hd .header-search{flex:1 1 100%; max-width:none;}
  .aur-a11y-btn{width:30px;height:30px;min-height:30px;}
}
/* AURORA THEME v4 end */

/* home page logo uses .hd-logo, storefront uses .header-logo - one size for both */
.hd-logo{display:inline-flex; align-items:center; padding:2px 6px; overflow:visible;}
.hd-logo img, header .hd-logo img{
  height:auto !important; max-height:44px !important; width:auto !important;
  max-width:190px; object-fit:contain; display:block;
}
@media (max-width:700px){ .hd-logo img, header .hd-logo img{max-height:36px !important;} }

/* ---------- AURORA THEME v5: header layout, bigger logo, one button look ---------- */
/* search sits hard right, one button-gap from Saved */
.site-header .header-inner{gap:8px;}
.site-header .header-search, header.hd .header-search{margin-left:auto; flex:0 1 300px; max-width:320px;}
.site-header .header-actions{margin-left:0; gap:8px;}

/* bigger logo, both page types */
.site-header .header-logo img, header .header-logo img,
.hd-logo img, header .hd-logo img{max-height:56px !important; max-width:230px;}

/* home page: nav and accessibility icon on one line, same gap */
header.hd .hd-in{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
header.hd .hd-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto;}
header.hd .hd-nav .aur-a11y{margin-left:0; order:0;}

/* ---------- one button look everywhere ---------- */
.q-submit,.pl-submit,.mc-add,.mini-btn,.planner-btn,.allcats-btn,.eco-toggle,
.chat-chip,.ap-send,.ap-mic,.cat-link,.mc-x,
button.aur-b,.aur-btn{
  border-radius:var(--aur-r) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:700;
  min-height:38px;
  padding:9px 15px;
  border:1px solid var(--aur-line);
  background:#fff;
  color:var(--aur-ink);
  cursor:pointer;
  font-size:.82rem;
  line-height:1.1;
  transition:background .15s,border-color .15s,color .15s;
}
.q-submit:hover,.pl-submit:hover,.mc-add:hover,.mini-btn:hover,.planner-btn:hover,
.allcats-btn:hover,.eco-toggle:hover,.chat-chip:hover,.cat-link:hover,.aur-btn:hover{
  background:var(--aur-brand-lt); border-color:var(--aur-brand); color:var(--aur-brand-dk);
}
/* the primary actions carry the brand colour */
.q-submit,.pl-submit,.mc-add{
  background:var(--aur-brand); border-color:var(--aur-brand); color:#fff;
}
.q-submit:hover,.pl-submit:hover,.mc-add:hover{
  background:var(--aur-brand-dk); border-color:var(--aur-brand-dk); color:#fff;
}
.ap-send,.ap-mic{min-height:36px; padding:8px 12px;}
.mc-x{min-height:26px; padding:2px 8px; font-size:.72rem;}
.modal-close,.ap-close,.aur-ph-x{border-radius:var(--aur-r) !important;}

/* ---------- merch box: empty boxes notice ---------- */
.aur-mbnote{
  border:1px solid var(--aur-line); border-left:4px solid var(--aur-brand);
  background:var(--aur-bg-2); border-radius:var(--aur-r);
  padding:11px 13px; margin:12px 0; font-size:.82rem; line-height:1.55; color:var(--aur-ink-2);
}
.aur-mbnote strong{color:var(--aur-ink); display:block; margin-bottom:4px; font-size:.85rem;}

@media (max-width:820px){
  .site-header .header-search, header.hd .header-search{margin-left:0; flex:1 1 100%; max-width:none;}
}
@media (max-width:700px){
  .site-header .header-logo img, header .header-logo img,
  .hd-logo img, header .hd-logo img{max-height:42px !important;}
}
/* AURORA THEME v5 end */

/* ---------- AURORA THEME v6: the product detail modal was missed ---------- */
/* its controls use act-btn / var-chip / dg-thumb, not the classes styled above */
.act-btn,.var-chip{
  border-radius:var(--aur-r) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:700; font-size:.82rem; line-height:1.1;
  min-height:38px; padding:9px 15px;
  border:1px solid var(--aur-line); background:#fff; color:var(--aur-ink);
  cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.act-btn:hover,.var-chip:hover{
  background:var(--aur-brand-lt); border-color:var(--aur-brand); color:var(--aur-brand-dk);
}
.act-btn.primary{background:var(--aur-brand); border-color:var(--aur-brand); color:#fff;}
.act-btn.primary:hover{background:var(--aur-brand-dk); border-color:var(--aur-brand-dk); color:#fff;}
.var-chip{min-height:32px; padding:6px 12px; font-size:.76rem;}
.var-chip.active,.var-chip[aria-pressed="true"]{
  background:var(--aur-brand); border-color:var(--aur-brand); color:#fff;
}
.dg-thumb{
  border-radius:var(--aur-r) !important; border:1px solid var(--aur-line);
  background:#f8fafc; padding:2px; cursor:pointer; min-height:44px; min-width:44px;
}
.dg-thumb.active{border-color:var(--aur-brand); box-shadow:0 0 0 2px rgba(2,132,199,.15);}
.modal-close,.ap-close,.aur-ph-x,.aur-a11y-btn{
  border-radius:var(--aur-r) !important; font-family:Arial,Helvetica,sans-serif !important;
}
.di-price{font-family:Arial,Helvetica,sans-serif !important;}
/* AURORA THEME v6 end */

/* ---------- AURORA THEME v7: home header CTA buttons ---------- */
header.hd .hd-cta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
header.hd .hd-cta .btn,.btn,.btn-ghost,.btn-shop{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--aur-r) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:700; font-size:.82rem; line-height:1.1;
  min-height:38px; padding:9px 15px; text-decoration:none;
  border:1px solid #fff; background:#fff; color:var(--aur-brand-dk);
  transition:background .15s,border-color .15s,color .15s;
}
header.hd .hd-cta .btn:hover,.btn:hover{background:var(--aur-brand-lt); border-color:var(--aur-brand-lt);}
.btn-shop{background:var(--aur-brand); border-color:var(--aur-brand); color:#fff;}
.btn-shop:hover{background:var(--aur-brand-dk); border-color:var(--aur-brand-dk); color:#fff;}
header.hd .hd-cta .aur-a11y{margin-left:0; order:0;}
/* AURORA THEME v7 end */

/* ---------- AURORA THEME v8: logo, search, coloured buttons ---------- */
/* the storefront rounds the logo corners, which clipped the wordmark */
.site-header .header-logo img, header .header-logo img,
.hd-logo img, header .hd-logo img{
  border-radius:0 !important;
  max-height:64px !important; max-width:260px;
  height:auto !important; width:auto !important; object-fit:contain; display:block;
}
.site-header .header-logo, .hd-logo{border-radius:0 !important; padding:2px 6px;}

/* search bar matches button height exactly */
.site-header .header-search, header.hd .header-search{
  height:40px; min-height:40px; align-items:stretch; overflow:hidden;
}
.site-header .header-search input, header.hd .header-search input{height:100%; padding:0 12px; line-height:1;}
/* square search button, filling the right end */
.site-header .header-search button, header.hd .header-search button{
  border-radius:0 !important; width:44px; min-width:44px; height:100%;
  padding:0; display:inline-flex; align-items:center; justify-content:center;
  background:var(--aur-cat); border:0;
}
.site-header .header-search button:hover, header.hd .header-search button:hover{background:var(--aur-cat-dk);}
.site-header .header-search button svg, header.hd .header-search button svg{width:18px; height:18px;}

/* one colour family, taken from the category accent already in use */
:root{ --aur-cat:#0284c7; --aur-cat-dk:#0369a1; --aur-cat-lt:#e0f2fe; }

.site-header .hdr-btn,
header.hd .hd-cta .btn, .btn, .btn-ghost,
header.hd .hd-nav a, header.hd nav a{
  background:var(--aur-cat) !important;
  border:1px solid var(--aur-cat) !important;
  color:#fff !important;
  min-height:40px; height:40px;
}
.site-header .hdr-btn:hover,
header.hd .hd-cta .btn:hover, .btn:hover, .btn-ghost:hover,
header.hd .hd-nav a:hover, header.hd nav a:hover{
  background:var(--aur-cat-dk) !important; border-color:var(--aur-cat-dk) !important; color:#fff !important;
}
.btn-shop{background:var(--aur-brand-dk) !important; border-color:var(--aur-brand-dk) !important;}
.btn-shop:hover{background:#062f45 !important; border-color:#062f45 !important;}
.site-header .count-badge{background:#fff; color:var(--aur-cat-dk);}

/* accessibility icon matches the button height and colour family */
.aur-a11y-btn{
  width:40px; height:40px; min-height:40px;
  background:var(--aur-cat); border:1px solid var(--aur-cat); color:#fff;
}
.aur-a11y-btn:hover, .aur-a11y[data-open="1"] .aur-a11y-btn{
  background:var(--aur-cat-dk); border-color:var(--aur-cat-dk); color:#fff;
}

/* the category row under the header uses the same colour */
.aur-navrow .aur-navbtn{background:var(--aur-cat); border-color:var(--aur-cat); color:#fff;}
.aur-navrow .aur-navbtn:hover{background:var(--aur-cat-dk); border-color:var(--aur-cat-dk);}

@media (max-width:700px){
  .site-header .header-logo img, header .header-logo img,
  .hd-logo img, header .hd-logo img{max-height:48px !important;}
}
/* AURORA THEME v8 end */


/* ---------- AURORA THEME v9: ocean header, STOREFRONT ONLY ----------
   Scoped to .site-header, which only the storefront uses. header.hd pages
   (home, landing pages, blogs) keep the plain gradient until asked. */
:root{
  --aur-navy:#004080; --aur-cyan:#00b0f0; --aur-aqua:#7fd9f5; --aur-foam:#e6f7fd;
  --aur-teal:#0f9b8e; --aur-sea:#1d7fb8;
}
.site-header{
  position:relative;
  /* Top 3/4 white → soft blue only near the bottom edge */
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 55%,#eef6fc 78%,#d6ecfb 100%);
  border-bottom:0;
}
.aur-wavewrap{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 7%,#000 22%,#000 55%,rgba(0,0,0,.6) 76%,rgba(0,0,0,.22) 89%,transparent 99%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 7%,#000 22%,#000 55%,rgba(0,0,0,.6) 76%,rgba(0,0,0,.22) 89%,transparent 99%);
}
.aur-wavewrap svg{
  position:absolute; bottom:0; left:0; width:200%; height:100%; min-width:1800px;
}
.aur-w1{animation:aurDrift 30s linear infinite;}
.aur-w2{animation:aurDrift 44s linear infinite reverse;}
.aur-w3{animation:aurDrift 60s linear infinite;}
.aur-w4{animation:aurDrift 74s linear infinite reverse;}
@keyframes aurDrift{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .aur-w1,.aur-w2,.aur-w3,.aur-w4{animation:none !important;} }
html.aur-nomotion .aur-w1,html.aur-nomotion .aur-w2,html.aur-nomotion .aur-w3,html.aur-nomotion .aur-w4{animation:none !important;}
.site-header .header-inner{position:relative; z-index:2;}
.aur-wavewrap{opacity:.9;}                    /* whole animation sits back */
/* dropdowns and popups must clear the water */
.site-header .aur-a11y-pop{z-index:640;}
.site-header .aur-a11y{position:relative; z-index:640;}

/* storefront buttons, each its own colour */
.site-header .hdr-btn{
  background:rgba(255,255,255,.95) !important; border:1px solid rgba(255,255,255,.95) !important;
  color:var(--aur-navy) !important; box-shadow:0 1px 3px rgba(0,64,128,.12);
}
.site-header #savedBtn{background:var(--aur-teal) !important; border-color:var(--aur-teal) !important; color:#fff !important;}
.site-header #savedBtn:hover{background:#0c8378 !important; border-color:#0c8378 !important;}
.site-header #compareBtn{background:var(--aur-sea) !important; border-color:var(--aur-sea) !important; color:#fff !important;}
.site-header #compareBtn:hover{background:#166694 !important; border-color:#166694 !important;}
.site-header #quoteBasketBtn,.site-header .planner-btn{background:var(--aur-navy) !important; border-color:var(--aur-navy) !important; color:#fff !important;}
.site-header #quoteBasketBtn:hover,.site-header .planner-btn:hover{background:#00305f !important; border-color:#00305f !important;}
.site-header .header-search button, header.hd .header-search button{background:var(--aur-cyan) !important;}
.site-header .header-search button:hover, header.hd .header-search button:hover{background:#0092c8 !important;}
.site-header .header-search, header.hd .header-search{border-color:#fff !important; box-shadow:0 1px 3px rgba(0,64,128,.12);}
.site-header .aur-a11y-btn{background:var(--aur-navy) !important; border-color:var(--aur-navy) !important; color:#fff !important;}
.site-header .aur-a11y-btn:hover,.site-header .aur-a11y[data-open="1"] .aur-a11y-btn{background:#00305f !important; border-color:#00305f !important;}
.site-header .count-badge{background:#fff; color:var(--aur-navy);}
.site-header .header-logo img{filter:drop-shadow(0 1px 2px rgba(255,255,255,.95));}
/* AURORA THEME v9 end */


/* ---------- AURORA THEME v10: category card polish ----------
   The expand itself is animated in JS (inline max-height from scrollHeight),
   because competing CSS rules here were overriding it. Only cosmetics left. */
.mcat{transition:box-shadow .3s ease, border-color .3s ease;}
.mcat:hover{box-shadow:0 8px 22px rgba(0,64,128,.12);}
.mcat-toggle{cursor:pointer; user-select:none;}
@media (prefers-reduced-motion:reduce){ .mcat{transition:none !important;} }
/* AURORA THEME v10 end */


/* ==== Aurora shared header: category strip + coloured home pills ==== */


  /* ============ CATEGORY NAV ============ */
  .cat-nav { background: rgba(255,255,255,0.85); border-bottom: 1px solid var(--aurora-border); position: sticky; top: 97px; z-index: 190; }

  .cat-nav-inner { max-width: 1500px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; }

  .allcats-btn { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; background: none; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--text-primary); cursor: pointer; border-bottom: 2px solid transparent; }

  .allcats-btn:hover, .allcats-btn.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }

  .cat-link { flex-shrink: 0; padding: 12px 14px; border: none; background: none; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition); white-space: nowrap; }

  .cat-link:hover { color: var(--cc, var(--accent-cyan)); }

  .cat-link.active { color: var(--cc, var(--accent-cyan)); font-weight: 700; border-bottom-color: var(--cc, var(--accent-cyan)); }

  .planner-btn { flex-shrink: 0; margin: 6px 0 6px 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(2,132,199,0.3); background: linear-gradient(135deg, rgba(2,132,199,0.07), rgba(15,118,110,0.07)); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--accent-cyan); cursor: pointer; transition: var(--transition); white-space: nowrap; }

  .planner-btn:hover { background: var(--accent-cyan); color: #fff; }
.cat-pill{display:inline-flex;align-items:center;gap:.4em;padding:7px 15px;border-radius:999px;font-size:.86rem;font-weight:700;white-space:nowrap;text-decoration:none;border:1.5px solid var(--pill,#0057d9);color:var(--pill,#0057d9);background:#fff;transition:background .16s,color .16s,transform .16s;flex:0 0 auto}
.cat-pill:hover{background:var(--pill,#0057d9);color:#fff;transform:translateY(-1px)}
.cat-nav a.cat-link,.cat-nav a.allcats-btn{display:inline-flex;align-items:center;text-decoration:none}

/* ==== home header: section buttons, same button system as the action buttons ==== */
.site-header .aur-navpill{background:var(--np,#004080) !important;border-color:var(--np,#004080) !important;color:#fff !important;}
.site-header .aur-navpill:hover{filter:brightness(.88);}

/* ==== home: banner continues the wave down into deeper water ==== */
html.aur-home .aur-promo{background:#ffffff !important;border-bottom:0 !important;color:inherit;}


/* home: button row sits right; water meets the banner with no seam */
html.aur-home .site-header .header-actions{margin-left:auto !important;}

/* home: the rotating banner sits centred inside the top banner */
html.aur-home .aur-promo.aur-promo-banner{padding:26px 18px;}
html.aur-home .aur-promo.aur-promo-banner .aur-promo-in{max-width:1360px;width:100%;gap:0;}
html.aur-home .aur-promo.aur-promo-banner .banner{margin:0 auto;width:100%;}

/* category strip stays pinned to the very top on every page */
html body nav.cat-nav{top:0 !important;} /* cat-nav pinned */

/* --- Accessibility menu stacking -----------------------------------------
   The dropdown is injected INSIDE the page header (.header-actions on the
   storefront, .hd-nav / .hd-cta on the SEO pages). Both headers are
   position:sticky AND use backdrop-filter, and either one of those alone
   creates a stacking context. The dropdown can never escape it, so raising
   .aur-a11y-pop's own z-index cannot work no matter how large the number.
   The header ELEMENT has to outrank whatever covers it: the category strip
   (190) on the storefront, the cookie bar (60) on the SEO pages.

   300 is deliberate, not arbitrary. It clears cat-nav (190) and the cookie
   bar (60) while staying below the assistant panel (400), modals (500),
   the lightbox (900) and toasts (999) — a larger value would park the
   header on top of every dialogue on the site.

   position is restated as sticky on purpose: the previous rule set it to
   relative at a higher specificity than .site-header, which silently stopped
   the storefront header sticking on scroll. */
html body header.site-header{position:sticky;top:0;z-index:300;}
html body header.hd{position:sticky;z-index:300;}
/* .header-inner set z-index:2, nesting a second trap inside the header */
html body .site-header .header-inner{position:relative;z-index:auto;}
html body .aur-a11y{position:relative;z-index:900;}
html body .aur-a11y-pop{z-index:910;}


/* --- Wave / promo band seam (home) ---------------------------------------
   The header gradient ran LEFT-TO-RIGHT (#f4fcff -> #9bdbf4) while the promo
   band directly beneath it runs TOP-TO-BOTTOM starting at #a9dcf3. Two
   gradients on different axes can only agree at one point, so every other
   point along the join showed a colour step. Alpha was a symptom, not the
   cause: dropping the wave's opacity just let more of the mismatched header
   show through.

   Both sides now resolve to #a9dcf3 exactly at the join:
     - the header gradient is vertical and ends on #a9dcf3
     - the front wave layer fades to the same value at its foot
     - the wave wrapper runs at full opacity here, so the foot is that colour
       rather than 90% of it over whatever sits behind
   The three rear wave layers keep their original left-to-right blues, so the
   variation across the water is unchanged. */
html.aur-home header.site-header{
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 55%,#eef6fc 78%,#d6ecfb 100%) !important;
}
html.aur-home{
  --aur-wave-crest:#8ed3f2;   /* top of the front wave  */
  --aur-wave-mid:#9ad8f3;     /* midway                 */
  --aur-wave-foot:#a9dcf3;    /* == first stop of .aur-promo */
}
html.aur-home .aur-wavewrap{opacity:1;}
html.aur-home header.site-header{border-bottom:0 !important;}
html.aur-home .aur-promo{margin-top:0 !important;}


/* ---------- AURORA THEME v12: restore multi-colour header buttons, blue headings, header blue strip ---------- */
:root{ --aur-cat:#0284c7; --aur-cat-dk:#0369a1; --aur-cat-lt:#e0f2fe; --aur-wave-strip:#7fd9f5; }

/* H1 / H2 / H3 → featured button blue (site-wide) */
h1, h2, h3,
.seo-strip h1,
.sec-head h3,
.contact-card h3,
.quote-card h3,
.home-page-title,
.home-hero h2,
.home-hero-text h2,
.dept-name,
.mcat-n,
.mega-col h4,
.blog-body h4{
  color:#0284c7 !important;
}
/* Banner slide titles stay white on gradient slides */
.slide h2,
.banner .slide h2{
  color:#fff !important;
}

/* Header ~5% longer: solid blue strip at the bottom so the wave sits on top of it */
.site-header,
header.hd{
  /* white→soft blue body, then explicit blue strip at the foot */
  background:
    linear-gradient(#7fd9f5, #7fd9f5) bottom / 100% 10px no-repeat,
    linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #eef6fc 72%, #d6ecfb 100%) !important;
  border-bottom: 0 !important;
  padding-bottom: 10px !important; /* space for the strip under content */
  box-sizing: border-box;
}
html.aur-home header.site-header{
  background:
    linear-gradient(#7fd9f5, #7fd9f5) bottom / 100% 10px no-repeat,
    linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #eef6fc 72%, #d6ecfb 100%) !important;
  border-bottom: 0 !important;
  padding-bottom: 10px !important;
}

/* Restore multi-colour storefront header buttons (override any earlier flat blue) */
.site-header .hdr-btn{
  background:rgba(255,255,255,.95) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  color:var(--aur-navy, #004080) !important;
  box-shadow:0 1px 3px rgba(0,64,128,.12) !important;
}
.site-header #savedBtn{background:var(--aur-teal,#0f9b8e) !important; border-color:var(--aur-teal,#0f9b8e) !important; color:#fff !important;}
.site-header #savedBtn:hover{background:#0c8378 !important; border-color:#0c8378 !important;}
.site-header #compareBtn{background:var(--aur-sea,#1d7fb8) !important; border-color:var(--aur-sea,#1d7fb8) !important; color:#fff !important;}
.site-header #compareBtn:hover{background:#166694 !important; border-color:#166694 !important;}
.site-header #quoteBasketBtn,
.site-header .planner-btn{background:var(--aur-navy,#004080) !important; border-color:var(--aur-navy,#004080) !important; color:#fff !important;}
.site-header #quoteBasketBtn:hover,
.site-header .planner-btn:hover{background:#00305f !important; border-color:#00305f !important;}
.site-header .header-search button, header.hd .header-search button{background:var(--aur-cyan,#00b0f0) !important;}
.site-header .header-search button:hover, header.hd .header-search button:hover{background:#0092c8 !important;}
.site-header .aur-a11y-btn{background:var(--aur-navy,#004080) !important; border-color:var(--aur-navy,#004080) !important; color:#fff !important;}
.site-header .aur-a11y-btn:hover,
.site-header .aur-a11y[data-open="1"] .aur-a11y-btn{background:#00305f !important; border-color:#00305f !important;}
.site-header .count-badge{background:#fff !important; color:var(--aur-navy,#004080) !important;}

/* Home header CTAs keep cyan featured blue (not the multi-colour storefront set) */
header.hd .hd-cta .btn-shop,
header.hd .btn-shop{
  background:linear-gradient(135deg,#0284c7,#7c3aed) !important;
  border-color:transparent !important;
  color:#fff !important;
}
header.hd .hd-cta .btn-ghost,
header.hd .btn-ghost{
  background:#fff !important;
  border:1.5px solid rgba(2,132,199,.45) !important;
  color:#0284c7 !important;
}
header.hd .hd-nav a{
  background:#fff !important;
  border:1px solid #dbe3ec !important;
  color:#0f2a43 !important;
}
header.hd .hd-nav a:hover{
  background:#e0f2fe !important;
  border-color:#0284c7 !important;
  color:#0284c7 !important;
}

/* Keep ~25% smaller control sizes (colour restored above) */
.site-header .hdr-btn,
header.hd .hd-cta .btn, header.hd .btn, header.hd .btn-ghost, header.hd .btn-shop,
header.hd .hd-nav a,
.aur-navrow .aur-navbtn,
.q-submit,.pl-submit,.mc-add,.mini-btn,.planner-btn,.allcats-btn,.eco-toggle,
.chat-chip,.ap-send,.ap-mic,.act-btn{
  min-height:30px !important;
  height:auto !important;
  padding:6px 11px !important;
  font-size:.72rem !important;
  line-height:1.15 !important;
}
.aur-a11y-btn{
  width:30px !important; height:30px !important; min-height:30px !important;
  font-size:.85rem !important;
}
.site-header .header-search, header.hd .header-search{
  height:30px !important; min-height:30px !important;
}
.site-header .header-search button, header.hd .header-search button{
  width:34px !important; min-width:34px !important; height:100% !important;
}
.site-header .count-badge{
  font-size:.6rem !important; padding:1px 5px !important;
}


/* a11y panel: click-toggle only (see aurora-a11y-click.js) — keep open while using */
.aur-a11y-pop{
  pointer-events:auto;
}
.aur-a11y[data-open="1"] .aur-a11y-pop{
  display:block !important;
}


/* ---------- AURORA THEME v13: Ask Aurora orange, coloured home header buttons ---------- */

/* Storefront Ask Aurora AI → dark orange, white text */
.site-header .hdr-btn.ai-btn,
.site-header button.ai-btn,
button.hdr-btn.ai-btn,
.ai-btn{
  background:#c2410c !important;
  border:1px solid #c2410c !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(194,65,12,.28) !important;
}
.site-header .hdr-btn.ai-btn:hover,
.site-header button.ai-btn:hover,
button.hdr-btn.ai-btn:hover,
.ai-btn:hover{
  background:#9a3412 !important;
  border-color:#9a3412 !important;
  color:#fff !important;
}

/* Home header: solid coloured buttons (match storefront energy) */
header.hd .hd-cta .btn-ghost,
header.hd .btn-ghost{
  background:#0f9b8e !important;          /* teal — Browse */
  border:1px solid #0f9b8e !important;
  color:#fff !important;
}
header.hd .hd-cta .btn-ghost:hover,
header.hd .btn-ghost:hover{
  background:#0c8378 !important;
  border-color:#0c8378 !important;
  color:#fff !important;
}
header.hd .hd-cta .btn-shop,
header.hd .btn-shop{
  background:#004080 !important;          /* navy — Shop */
  border:1px solid #004080 !important;
  color:#fff !important;
  box-shadow:none !important;
}
header.hd .hd-cta .btn-shop:hover,
header.hd .btn-shop:hover{
  background:#00305f !important;
  border-color:#00305f !important;
  color:#fff !important;
}


/* ---------- AURORA THEME v14: force home header multi-colour buttons ---------- */
html body header.hd .hd-cta a.btn-ghost,
html body header.hd a.btn-ghost {
  background: #0f9b8e !important;
  border: 1px solid #0f9b8e !important;
  color: #fff !important;
}
html body header.hd .hd-cta a.btn-shop,
html body header.hd a.btn-shop {
  background: #004080 !important;
  border: 1px solid #004080 !important;
  color: #fff !important;
}
html body header.hd .hd-nav a {
  background: #0284c7 !important;
  border: 1px solid #0284c7 !important;
  color: #fff !important;
}
html body header.hd .hd-nav a:hover {
  background: #0369a1 !important;
  color: #fff !important;
}


/* ---------- AURORA THEME v15: space All Categories row below header ---------- */
.cat-nav{
  margin-top: 18px !important;
  padding-top: 4px !important;
  top: 112px !important; /* sticky offset under taller header + blue strip */
}

/* ---------- AURORA THEME v16: flat white header + bold orange search ----------
   Removes every gradient from the header chrome (the diagonal Shop button
   gradient, the layered white/blue header background, and the separate
   10px "blue strip" pretending to be part of the wave). The wave SVG's own
   gradient fills are removed in aurora-theme.js (drawWaves uses flat colours
   now, no <linearGradient> defs) — this file only handles the layout side:
   shrinking the wave strip down to just its own height and making sure
   nothing else in the header carries colour but that one strip. */
:root{ --aur-search-accent:#f97316; --aur-search-accent-dk:#c2410c; }

html body .site-header,
html body header.hd,
html.aur-home html body .site-header,
html.aur-home header.site-header{
  background:#ffffff !important;
  border-bottom:1px solid var(--aur-line) !important;
  padding-bottom:0 !important;
}

/* wave: just tall enough to read the motion, pinned to the header's foot
   instead of stretching the full header height */
.aur-wavewrap{
  inset:auto 0 0 0 !important;
  height:22px !important;
  opacity:1 !important;
}
.aur-wavewrap svg{ height:22px !important; }

/* the category strip sat 112px down to clear the old 10px blue strip +
   taller gradient header; the header is shorter now with both gone */
.cat-nav{ top:100px !important; }

/* header search: thick, unmistakable orange border, sized to match the
   30px header buttons exactly (border included via border-box, not added
   on top) — text/icon shrunk slightly so it all still fits cleanly */
.site-header .header-search, header.hd .header-search{
  box-sizing:border-box;
  height:30px !important; min-height:30px !important;
  border:3px solid var(--aur-search-accent) !important;
  border-radius:var(--aur-r) !important;
  background:#fff !important;
}
.site-header .header-search:focus-within, header.hd .header-search:focus-within{
  border-color:var(--aur-search-accent-dk) !important;
}
.site-header .header-search input, header.hd .header-search input{
  padding:0 8px !important; font-size:.78rem !important;
}
.site-header .header-search button, header.hd .header-search button{
  width:28px !important; min-width:28px !important;
}
.site-header .header-search button svg, header.hd .header-search button svg{
  width:14px !important; height:14px !important;
}

/* the only remaining gradient in the header chrome — flatten it too */
header.hd .hd-cta .btn-shop,
header.hd .btn-shop{
  background:#004080 !important;
}
header.hd .hd-cta .btn-shop:hover,
header.hd .btn-shop:hover{
  background:#00305f !important;
}
/* AURORA THEME v16 end */

/* ---------- AURORA THEME v17: search bar border → baby blue ---------- */
:root{ --aur-search-accent:#89cff0; --aur-search-accent-dk:#4fa8de; }
/* AURORA THEME v17 end */

/* AUR_FOOTER_LEFT */
.aur-footer,.aur-footer-in,.aur-footer-in > *,.aur-footer-bar{text-align:left}