/* ============================================================
   CRST chrome styles — header / mega / footer / cart / mobile
   ============================================================ */

/* ---------------- announcement / promos ---------------- */
.announce{background:#000;border-bottom:1px solid var(--line);font-size:13px;overflow:hidden;transition:height .3s ease,opacity .3s ease;height:40px;}
.announce.hide{height:0;opacity:0;border:0;}
.announce-in{display:flex;align-items:center;justify-content:center;position:relative;height:40px;}
.ann-rot{position:relative;height:40px;display:flex;align-items:center;justify-content:center;width:100%;}
.ann-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s;padding:0 34px;}
.ann-slide.active{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease);}
.ann-msg{color:#d6dade;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ann-msg b{color:var(--yellow);font-weight:700;}
.ann-cta{display:inline-flex;align-items:center;gap:5px;color:var(--yellow);font-weight:700;letter-spacing:.01em;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .15s var(--ease);}
.ann-cta:hover{border-color:var(--yellow);}
.ann-cta-ic{display:flex;transition:transform .15s var(--ease);}
.ann-cta-ic svg{width:14px;height:14px;}
.ann-cta:hover .ann-cta-ic{transform:translateX(3px);}
.ann-code{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--yellow);background:rgba(255,212,0,.1);border:1px dashed var(--yellow);border-radius:var(--radius);padding:4px 9px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease);}
.ann-code:hover{background:var(--yellow);color:#000;}
.ann-code-ic{display:flex;}
.ann-code-ic svg{width:14px;height:14px;}
.ann-code.copied{background:var(--ok);border-color:var(--ok);color:#04210f;}
.ann-code.copied .ann-code-v::after{content:" — copied";font-weight:600;}
.ann-x{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--steel);cursor:pointer;padding:4px;display:flex;z-index:2;}
.ann-x:hover{color:#fff;}
.ann-x svg{width:15px;height:15px}
@media (max-width:600px){.ann-slide{gap:8px;padding:0 30px;}.ann-msg{font-size:12px;}}

/* ---------------- header ---------------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background .2s ease;}
.head-in{display:flex;align-items:center;gap:28px;height:74px;transition:height .22s ease;}
.site-head.shrink .head-in{height:60px;}
.site-head.shrink{background:rgba(10,10,10,.97);box-shadow:0 8px 30px rgba(0,0,0,.4);}
.brand{display:flex;align-items:center;flex:0 0 auto;}
.brand img{height:30px;filter:brightness(0) invert(1);transition:height .22s ease;}
.site-head.shrink .brand img{height:26px;}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:4px;}
.burger svg{width:24px;height:24px}

.main-nav{display:flex;align-items:center;gap:6px;margin-right:auto;}
.nav-link{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;font-weight:600;color:#d2d6db;padding:9px 13px;border-radius:6px;position:relative;letter-spacing:.005em;white-space:nowrap;}
.nav-link .nl-c{display:inline-flex;width:13px;opacity:.6;transition:transform .2s ease;}
.nav-link .nl-c svg{width:13px;height:13px;}
.nav-link:hover{color:#fff;}
.nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;border-radius:2px;}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);}
.nav-link.is-active{color:#fff;}

.head-act{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.ic-btn{position:relative;background:none;border:0;color:#d2d6db;cursor:pointer;padding:9px;border-radius:8px;display:flex;transition:color .15s ease,background .15s ease;}
.ic-btn:hover{color:#fff;background:rgba(255,255,255,.06);}
.ic-btn svg{width:21px;height:21px;}
.cart-btn.bump{animation:cartbump .4s ease;}
@keyframes cartbump{0%,100%{transform:none}30%{transform:scale(1.18)}}
.cart-count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;border-radius:9px;background:var(--yellow);color:#000;font-size:10.5px;font-weight:800;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;padding:0 4px;transform:scale(0);transition:transform .2s ease;}
.cart-count.has{transform:scale(1);}

/* ---------------- mega menu ---------------- */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:55;}
.mega.open{opacity:1;visibility:visible;transform:none;}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:34px 28px 38px;display:grid;grid-template-columns:1.5fr 1fr 280px;gap:42px;}
.mega-sm .mega-inner{grid-template-columns:1fr 280px;}
#mega-power .mega-inner{grid-template-columns:1.7fr 0.85fr 0.85fr 260px;}
.mega-h{font-family:var(--font-body);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--steel);margin-bottom:18px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;transition:background .14s ease;}
.mega-item:hover{background:rgba(255,255,255,.04);}
.mi-dot{width:8px;height:8px;border-radius:2px;background:var(--yellow);margin-top:7px;flex:0 0 auto;transform:rotate(45deg);}
.mega-item b{display:block;font-size:14.5px;color:#fff;font-weight:600;}
.mega-item em{display:block;font-style:normal;font-size:12.5px;color:var(--steel);line-height:1.35;margin-top:1px;}
.mega-list{display:flex;flex-direction:column;gap:2px;}
.mega-link{padding:9px 12px;border-radius:7px;font-size:14.5px;color:#cfd4da;font-weight:500;transition:background .14s,color .14s,padding .16s;}
.mega-link:hover{background:rgba(255,255,255,.04);color:var(--yellow);padding-left:18px;}
.mega-link-ic{display:flex;align-items:center;gap:11px;}
.mega-link-ic:hover{padding-left:12px;}
.ml-ic{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;color:var(--yellow);transition:border-color .14s,background .14s;}
.ml-ic svg{width:17px;height:17px;}
.mega-link-ic:hover .ml-ic{border-color:var(--yellow);background:rgba(255,209,0,.08);}
.mega-promo{background:linear-gradient(160deg,#1f2329,#131519);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;transition:border-color .16s ease,transform .16s ease;}
.mega-promo:hover{border-color:var(--yellow);transform:translateY(-2px);}
.mp-ey{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--yellow);}
.mega-promo img{width:100%;height:110px;object-fit:cover;border-radius:8px;margin:12px 0;}
.mp-name{font-size:14px;font-weight:600;color:#fff;}
.mp-price{margin-top:4px;font-size:14px;}
.mp-price s{color:var(--steel);margin-left:6px;font-size:12.5px;}
.mp-cta{margin-top:10px;font-size:13px;font-weight:700;color:var(--yellow);}

/* ---- support dropdown ---- */
.mega-support .mega-inner{grid-template-columns:1fr 290px;gap:40px;padding:30px 28px 32px;}
.sup-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sup-link{display:flex;gap:13px;align-items:flex-start;padding:14px;border-radius:10px;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,transform .14s ease;}
.sup-link:hover{background:rgba(255,255,255,.04);border-color:var(--line);transform:translateY(-1px);}
.sup-link .ic{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:10px;color:var(--yellow);transition:border-color .14s,background .14s;}
.sup-link:hover .ic{border-color:var(--yellow);background:rgba(255,209,0,.08);}
.sup-link .ic svg{width:21px;height:21px;}
.sup-link b{display:block;font-size:14.5px;color:#fff;font-weight:600;}
.sup-link em{display:block;font-style:normal;font-size:12.5px;color:var(--steel);margin-top:2px;line-height:1.35;}
.sup-all{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13.5px;font-weight:700;color:var(--yellow);}
.sup-all .sa-arw{transition:transform .15s ease;}
.sup-all:hover .sa-arw{transform:translateX(4px);}
.sup-help{background:linear-gradient(160deg,#1f2329,#131519);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;}
.sh-ey{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--steel);}
.sh-line{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;color:#e7eaed;}
.sh-line svg{width:17px;height:17px;color:var(--yellow);flex:0 0 auto;}
.sh-line a:hover{color:var(--yellow);}
.sh-hours{font-size:12.5px;color:var(--steel);margin-top:12px;}
.sh-btn{margin-top:18px;justify-content:center;width:100%;}

/* ---------------- mobile drawer ---------------- */
.m-drawer{position:fixed;inset:0;z-index:200;visibility:hidden;}
.m-drawer.open{visibility:visible;}
.m-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s ease;}
.m-drawer.open .m-scrim{opacity:1;}
.m-panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,360px);background:var(--ink);border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:18px 18px 24px;}
.m-drawer.open .m-panel{transform:none;}
.m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.m-logo{height:26px;filter:brightness(0) invert(1);}
.m-nav{display:flex;flex-direction:column;}
.m-nav a{padding:15px 6px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line);color:#e7eaed;}
.m-nav a:active{color:var(--yellow);}
.m-sub{margin:16px 0 2px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);}

/* ---- breadcrumb (canonical · site-wide top bar) ----
   Usage on every page, directly after #site-header:
   <div class="crumb-bar"><nav class="crumb" aria-label="Breadcrumb">
     <a href="index.html">Home</a><span class="sep">/</span>
     <a href="...">Section</a><span class="sep">/</span>
     <span class="here">Current page</span>
   </nav></div>
   `display:flex` keeps it left-aligned even inside a centered hero. */
.crumb-bar{position:relative;z-index:5;max-width:var(--maxw);margin:0 auto;padding:18px 28px 0;}
/* on pages whose first module is a hero <section> with its own background,
   lift the crumb out of flow so the hero rises up under the header and the
   crumb sits ON the hero background — no flat-black strip above it. */
.crumb-bar:has(+ section){position:absolute;left:0;right:0;margin:0 auto;}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--steel-2);}
.crumb a,.crumb > span{white-space:nowrap;}
.crumb a{color:var(--steel);transition:color .14s var(--ease,ease);}
.crumb a:hover{color:var(--yellow);}
.crumb .sep{color:var(--line-2);}
.crumb .here{color:#cdd2d8;}
/* final segment styled even if .here is omitted */
.crumb > span:last-child:not(.sep){color:#cdd2d8;}
.m-foot{margin-top:auto;display:flex;align-items:center;gap:8px;color:var(--steel);font-size:12.5px;}
.m-foot svg{width:16px;height:16px;color:var(--yellow);}

/* ---------------- footer ---------------- */
.site-foot{background:#000;border-top:1px solid var(--line);}
.site-foot .wrap{padding-top:0;}
.f-capture{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:48px 0 40px;border-bottom:1px solid var(--line);}
.f-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.f-form input{background:var(--ink);border:1.5px solid var(--line);border-radius:6px;padding:14px 16px;color:#fff;font-size:15px;font-family:var(--font-body);min-width:240px;}
.f-form input:focus{outline:none;border-color:var(--yellow);}
.f-note{flex-basis:100%;font-size:12px;color:var(--steel-2);}
.f-thanks{color:var(--ok);font-weight:600;font-size:15px;max-width:340px;}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;padding:48px 0 36px;}
.f-brand img{height:30px;filter:brightness(0) invert(1);margin-bottom:14px;}
.f-brand p{font-size:13.5px;max-width:260px;}
.f-social{display:flex;gap:8px;margin-top:16px;}
.f-social a{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--steel);font-family:var(--font-mono);transition:border-color .15s,color .15s;}
.f-social a:hover{border-color:var(--yellow);color:var(--yellow);}
.f-col{display:flex;flex-direction:column;gap:11px;}
.f-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:5px;}
.f-col a{font-size:13.5px;color:var(--steel);transition:color .14s;}
.f-col a:hover{color:var(--yellow);}
.f-company{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);font-size:13px;color:var(--steel);}
.f-company .mono{font-size:12.5px;color:#b6bcc2;}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0 40px;border-top:1px solid var(--line);font-size:12.5px;color:var(--steel-2);}
.f-pay{display:flex;gap:6px;}
.f-pay i{font-style:normal;font-size:10px;font-weight:800;font-family:var(--font-mono);letter-spacing:.04em;background:var(--ink);border:1px solid var(--line);border-radius:4px;padding:5px 7px;color:#aeb4ba;}

/* ---------------- cart drawer ---------------- */
.cart-wrap{position:fixed;inset:0;z-index:210;visibility:hidden;}
.cart-wrap.open{visibility:visible;}
.cart-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s ease;}
.cart-wrap.open .cart-scrim{opacity:1;}
.cart-panel{position:absolute;right:0;top:0;bottom:0;width:min(92vw,420px);background:var(--ink);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
.cart-wrap.open .cart-panel{transform:none;}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line);}
.cart-title{font-family:var(--font-display);font-weight:700;font-size:19px;}
.cart-ship{padding:14px 20px;border-bottom:1px solid var(--line);background:#101216;}
.cs-msg{font-size:13px;color:#d6dade;margin-bottom:8px;}
.cs-msg b{color:var(--yellow);}
.cs-msg.cs-ok{color:var(--ok);}
.cs-bar{height:6px;background:#000;border-radius:4px;overflow:hidden;}
.cs-bar i{display:block;height:100%;background:var(--yellow);border-radius:4px;transition:width .4s ease;}
.cart-body{flex:1;overflow-y:auto;padding:6px 20px;}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--steel);text-align:center;padding:40px 0;}
.ce-ic{width:54px;height:54px;color:var(--line);}
.ce-ic svg{width:54px;height:54px;}
.cart-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.cart-row img{width:72px;height:64px;object-fit:cover;border-radius:8px;background:#0c0d10;flex:0 0 auto;}
.cr-mid{flex:1;min-width:0;}
.cr-name{font-size:14px;font-weight:600;line-height:1.3;}
.cr-specs{font-size:11px;color:var(--steel);margin:3px 0 8px;}
.qty{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.qty button{width:28px;height:28px;background:none;border:0;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.qty button:hover{background:rgba(255,255,255,.08);}
.qty span{min-width:30px;text-align:center;font-size:13px;}
.cr-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;}
.cr-price{font-size:14px;font-weight:700;}
.cr-rm{background:none;border:0;color:var(--steel-2);font-size:11.5px;cursor:pointer;text-decoration:underline;padding:0;}
.cr-rm:hover{color:var(--danger);}
.cart-foot{border-top:1px solid var(--line);padding:18px 20px 22px;}
.cart-xs{margin-bottom:16px;}
.xs-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);margin-bottom:10px;}
.xs-row{display:flex;align-items:center;gap:12px;padding:8px 0;}
.xs-row img{width:44px;height:40px;object-fit:cover;border-radius:6px;}
.xs-mid{flex:1;min-width:0;}
.xs-name{font-size:13px;font-weight:600;line-height:1.25;}
.xs-price{font-size:12px;color:var(--steel);}
.xs-add{background:none;border:1.5px solid var(--line);color:#fff;border-radius:6px;padding:7px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .14s,color .14s;}
.xs-add:hover{border-color:var(--yellow);color:var(--yellow);}
.cart-sub{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:14px;}
.cart-sub .mono{font-weight:700;}
.cart-checkout{width:100%;justify-content:center;}
.cart-micro{text-align:center;font-size:11.5px;color:var(--steel-2);margin-top:8px;}
.cart-trust{text-align:center;font-size:10px;color:var(--steel);letter-spacing:.06em;margin-top:12px;}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .main-nav{display:none;}
  .burger{display:flex;}
  .head-in{gap:14px;}
  .brand{margin-right:auto;}
  .f-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .f-brand{grid-column:1/-1;}
}
@media (max-width:560px){
  .f-grid{grid-template-columns:1fr 1fr;}
  .f-capture{padding:36px 0 30px;}
  .wrap{padding:0 18px;}
}