/* ══════════════════════════════════════════════════════════════════════════
   Brūvers Auto — showcase demo, working-shop direction.

   Scoped under .ba. Light ground, ink navy, one signal orange, one stock
   green. Deliberately the opposite register to the other two demos in the
   gallery: those are mood pieces, this one has to read as a store that
   works. Density, alignment and honest numbers are the design here.

   No photographs anywhere — every "image" is a CSS placeholder, so the page
   stays request-free and the speed claim on /par-davisweb stays honest.
   ══════════════════════════════════════════════════════════════════════ */

.ba{
  --ink:#101A2B;
  --ink-2:#1C2A3F;
  --paper:#FFF;
  --sand:#F4F6F9;
  --sand-2:#EAEEF4;
  --dim:#5C6B80;
  --line:rgba(16,26,43,.12);
  --line-2:rgba(16,26,43,.07);
  --acc:#E35205;
  --acc-lit:#FF6A1F;
  --acc-soft:rgba(227,82,5,.09);
  --ok:#12734A;
  --low:#A75407;

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --gut:clamp(1rem,4vw,3rem);
  --bay:clamp(3.2rem,7vw,6.5rem);
  --r:10px;

  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--sans);font-size:clamp(14.5px,.4vw + 13px,16px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.ba *{box-sizing:border-box}
.ba img{max-width:100%}
.ba-wrap{width:min(88rem,100% - var(--gut) * 2);margin-inline:auto}

.ba h1,.ba h2,.ba h3,.ba h4{margin:0;letter-spacing:-.02em;line-height:1.1}
.ba p{margin:0}

.ba-eyebrow{
  margin:0 0 .9rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--acc);
}
.ba-h2{font-size:clamp(1.6rem,3.4vw,2.7rem);font-weight:750;max-width:22ch}
.ba-h2-light{color:#fff}
.ba-h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;margin:2.6rem 0 1rem}
.ba-lede{color:var(--dim);max-width:62ch;margin:0 0 1rem}

/* ── buttons ─────────────────────────────────────────────────────────── */
.ba-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;border-radius:var(--r);
  background:var(--acc);color:#fff;text-decoration:none;border:1px solid var(--acc);
  font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s;
}
.ba-btn:hover{background:var(--acc-lit);transform:translateY(-1px);
  box-shadow:0 12px 26px -14px rgba(227,82,5,.9)}
.ba-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.ba-btn-ghost:hover{background:var(--paper);border-color:var(--ink);box-shadow:none;color:var(--ink)}
.ba-btn-wide{width:100%}

.ba-back{
  display:inline-block;margin:0 0 1.6rem;padding:.5rem .9rem .5rem 0;
  background:none;border:0;font-family:inherit;font-size:.9rem;font-weight:600;
  color:var(--dim);cursor:pointer;
}
.ba-back:hover{color:var(--acc)}

/* ── demo notice ─────────────────────────────────────────────────────── */
.ba-note{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .7rem .55rem 1.1rem;border-radius:2rem;
  background:rgba(16,26,43,.94);color:#fff;font-size:.78rem;font-weight:600;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.7);
  transition:opacity .3s,transform .3s;
}
.ba-note button{
  width:1.6rem;height:1.6rem;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1rem;line-height:1;
}
.ba-note button:hover{background:rgba(255,255,255,.3)}
.ba-note.is-gone{opacity:0;transform:translateX(-50%) translateY(1rem);pointer-events:none}

/* ══════════ TOP BAR ══════════ */
.ba-bar{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s;
}
.ba-bar.is-stuck{box-shadow:0 8px 26px -18px rgba(16,26,43,.7)}
.ba-bar-in{
  display:flex;align-items:center;gap:1.2rem;
  padding:.9rem 0;transition:padding .25s;
}
.ba-bar.is-stuck .ba-bar-in{padding:.6rem 0}

.ba-logo{
  font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;white-space:nowrap;background:none;border:0;
  font-family:inherit;cursor:pointer;padding:0;
}
.ba-logo em{font-style:normal;color:var(--acc)}
.ba-logo-foot{font-size:1.15rem;color:#fff;margin-bottom:.7rem;display:block}

.ba-search{position:relative;flex:1;display:flex;min-width:0}
.ba-search input{
  flex:1;min-width:0;padding:.7rem .9rem;border:1px solid var(--line);
  border-right:0;border-radius:var(--r) 0 0 var(--r);
  font-family:inherit;font-size:.88rem;color:var(--ink);background:var(--sand);
}
.ba-search input:focus{outline:2px solid var(--acc);outline-offset:-2px;background:var(--paper)}
.ba-sbtn{
  padding:.7rem 1.2rem;border:1px solid var(--ink);border-radius:0 var(--r) var(--r) 0;
  background:var(--ink);color:#fff;font-family:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.ba-sbtn:hover{background:var(--acc);border-color:var(--acc)}

/* live suggestions — the thing that makes a parts search feel like a shop */
.ba-suggest{
  position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:20;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 46px -22px rgba(16,26,43,.6);overflow:hidden;
  max-height:20rem;overflow-y:auto;
}
.ba-suggest div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.6rem .9rem;cursor:pointer;border-bottom:1px solid var(--line-2);font-size:.86rem;
}
.ba-suggest div:last-child{border-bottom:0}
.ba-suggest div:hover{background:var(--acc-soft)}
.ba-suggest b{font-weight:600}
.ba-suggest span{color:var(--dim);font-size:.8rem;white-space:nowrap}
.ba-suggest .ba-sug-none{color:var(--dim);cursor:default;display:block}
.ba-suggest .ba-sug-none:hover{background:none}

.ba-bar-right{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.ba-phone{
  display:flex;flex-direction:column;line-height:1.25;text-decoration:none;color:var(--ink);
  white-space:nowrap;
}
.ba-phone b{font-size:.9rem;font-weight:700}
.ba-phone span{font-size:.72rem;color:var(--dim)}

.ba-cart{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);font-family:inherit;font-size:.86rem;font-weight:700;
  color:var(--ink);cursor:pointer;white-space:nowrap;
}
.ba-cart:hover{border-color:var(--ink)}
.ba-badge{
  min-width:1.4rem;height:1.4rem;padding:0 .35rem;border-radius:1rem;
  background:var(--acc);color:#fff;font-size:.74rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}

.ba-burger{display:none;width:2.5rem;height:2.4rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper);cursor:pointer;position:relative}
.ba-burger span,.ba-burger span::before,.ba-burger span::after{
  position:absolute;left:50%;width:1.05rem;height:2px;background:var(--ink);
  transform:translateX(-50%);transition:transform .25s,opacity .25s;
}
.ba-burger span{top:50%;margin-top:-1px}
.ba-burger span::before,.ba-burger span::after{content:"";left:0;transform:none}
.ba-burger span::before{top:-6px}
.ba-burger span::after{top:6px}

.ba-nav{border-top:1px solid var(--line-2);background:var(--paper)}
.ba-nav-in{display:flex;align-items:center;gap:.4rem;padding:.15rem 0}
.ba-nav button{
  padding:.7rem .9rem;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;
}
.ba-nav button:hover{color:var(--acc)}
.ba-nav button.is-on{border-bottom-color:var(--acc);color:var(--acc)}
.ba-nav-note{margin-left:auto;font-size:.76rem;color:var(--dim);white-space:nowrap}

/* ══════════ PAGES ══════════ */
.ba-page{display:none}
.ba-page.on{display:block}
.ba-inner{padding:var(--bay) 0}

/* ══════════ HERO ══════════ */
.ba-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:var(--bay) 0}
.ba-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Three slabs on a shallow diagonal — a hint of a parts shelf, built from
   gradients so it costs nothing and scales to any width. */
.ba-hero-bg span{
  position:absolute;border-radius:2px;opacity:.5;
  background:linear-gradient(115deg,rgba(255,255,255,.08),rgba(255,255,255,0) 60%);
  border:1px solid rgba(255,255,255,.07);
}
.ba-hero-bg span:nth-child(1){right:-6%;top:-14%;width:46%;height:58%;transform:rotate(-8deg)}
.ba-hero-bg span:nth-child(2){right:4%;top:38%;width:38%;height:46%;transform:rotate(-8deg)}
.ba-hero-bg span:nth-child(3){right:-12%;top:66%;width:30%;height:44%;transform:rotate(-8deg)}
.ba-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 24%,rgba(227,82,5,.28),transparent 62%);
}
.ba-hero-in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.ba-hero h1{font-size:clamp(2rem,5.2vw,3.9rem);font-weight:800;letter-spacing:-.035em}
.ba-hero h1 em{font-style:normal;color:var(--acc-lit)}
.ba-hero .ba-eyebrow{color:var(--acc-lit)}
.ba-hero .ba-lede{color:rgba(255,255,255,.74);margin:1.3rem 0 0;max-width:46ch}
.ba-hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.ba-hero .ba-btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.ba-hero .ba-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ── car picker ── */
.ba-picker{
  background:var(--paper);color:var(--ink);border-radius:14px;
  padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.ba-picker>b{display:block;font-size:.95rem;margin-bottom:.9rem}
.ba-picker-rows{display:grid;gap:.55rem;margin-bottom:.8rem}
.ba-picker select,.ba-fsel,.ba-sortwrap select{
  width:100%;padding:.68rem .8rem;border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:.88rem;color:var(--ink);background:var(--sand);
}
.ba-picker select:focus{outline:2px solid var(--acc);outline-offset:-2px}
.ba-picker-note{margin-top:.8rem;font-size:.78rem;color:var(--dim)}
.ba-picker-note.is-hit{color:var(--ok);font-weight:600}

/* ══════════ TRUST STRIP ══════════ */
.ba-strip{background:var(--paper);border-bottom:1px solid var(--line)}
.ba-strip-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  padding:clamp(1.6rem,3.4vw,2.6rem) 0;
}
.ba-strip-in>div{display:flex;flex-direction:column;gap:.15rem}
.ba-strip b{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.ba-strip span{font-size:.82rem;color:var(--dim)}

/* ══════════ MARQUEE ══════════ */
.ba-marquee{overflow:hidden;background:var(--ink-2);padding:.75rem 0}
.ba-marquee-in{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:ba-slide 46s linear infinite;
}
.ba-marquee span{font-size:.82rem;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.5)}
.ba-marquee i{color:var(--acc);font-style:normal}
@keyframes ba-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════ BANDS ══════════ */
.ba-band{padding:var(--bay) 0}
.ba-band.ba-tight{padding:clamp(2.4rem,5vw,4rem) 0}
.ba-dark{background:var(--ink);color:#fff}
.ba-dark .ba-eyebrow{color:var(--acc-lit)}

.ba-band-head{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end;
  margin-bottom:2.2rem;
}
.ba-band-note{color:var(--dim);font-size:.9rem;max-width:46ch}

.ba-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
.ba-cards article{
  padding:1.4rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  background:rgba(255,255,255,.03);
}
.ba-cards b{display:block;margin-bottom:.5rem;font-size:.98rem}
.ba-cards p{color:rgba(255,255,255,.66);font-size:.88rem}

/* ══════════ SHOP ══════════ */
.ba-shop{display:grid;grid-template-columns:16.5rem 1fr;gap:1.6rem;align-items:start}

.ba-side{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:1.1rem;position:sticky;top:8.5rem;
}
.ba-side-head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:.8rem;border-bottom:1px solid var(--line);margin-bottom:.9rem}
.ba-side-head b{font-size:.95rem}
.ba-side-head button{background:none;border:0;font-family:inherit;font-size:.8rem;
  color:var(--acc);cursor:pointer;font-weight:600}
.ba-fgroup{margin-bottom:1.2rem}
.ba-fgroup>b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.5rem}

.ba-frow{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.4rem .55rem;border-radius:7px;cursor:pointer;font-size:.87rem;
  transition:background .15s;
}
.ba-frow:hover{background:var(--sand)}
.ba-frow.on{background:var(--acc-soft);color:var(--acc);font-weight:700}
.ba-frow .n{font-size:.76rem;color:var(--dim);font-variant-numeric:tabular-nums}
.ba-frow.on .n{color:var(--acc)}
/* nothing behind it under the current filters — shown, but not offered */
.ba-frow.is-off{opacity:.38;cursor:default}
.ba-frow.is-off:hover{background:none}

.ba-range{display:flex;flex-direction:column;gap:.4rem}
.ba-range input{width:100%;accent-color:var(--acc)}
.ba-range span{font-size:.82rem;color:var(--dim)}

.ba-check{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-size:.87rem;cursor:pointer}
.ba-check input{accent-color:var(--acc);width:1rem;height:1rem}

.ba-fgroup-car p{font-size:.85rem;color:var(--dim)}
.ba-fgroup-car p.is-set{color:var(--ink);font-weight:600}
.ba-fgroup-car button{margin-top:.5rem;background:none;border:0;padding:0;
  font-family:inherit;font-size:.8rem;color:var(--acc);cursor:pointer;font-weight:600}

.ba-tools{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:.8rem;flex-wrap:wrap}
.ba-tools>span{font-size:.87rem;color:var(--dim);font-variant-numeric:tabular-nums}
.ba-sortwrap{display:flex;align-items:center;gap:.5rem}
.ba-sortwrap label{font-size:.82rem;color:var(--dim)}
.ba-sortwrap select{width:auto;padding:.45rem .7rem;font-size:.84rem;background:var(--paper)}

.ba-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.ba-chips:empty{margin:0}
.ba-chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border-radius:2rem;background:var(--acc-soft);color:var(--acc);
  font-size:.78rem;font-weight:600;cursor:pointer;
}
.ba-chip::after{content:"×";font-size:.95rem;line-height:1}
.ba-chip:hover{background:var(--acc);color:#fff}

.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.9rem}
.ba-card{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:.9rem;cursor:pointer;display:flex;flex-direction:column;gap:.3rem;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.ba-card:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 16px 34px -22px rgba(16,26,43,.8)}
.ba-thumb{
  aspect-ratio:4/3;border-radius:8px;margin-bottom:.5rem;
  background:
    repeating-linear-gradient(135deg,var(--sand-2) 0 10px,var(--sand) 10px 20px);
  border:1px solid var(--line-2);
}
.ba-brand{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}
.ba-name{font-size:.9rem;font-weight:600;line-height:1.35}
.ba-price{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;margin-top:.2rem}
.ba-stock{font-size:.78rem;color:var(--ok);font-weight:600}
.ba-stock.low{color:var(--low)}
.ba-none{
  grid-column:1/-1;padding:2.5rem 1.5rem;text-align:center;color:var(--dim);
  background:var(--paper);border:1px dashed var(--line);border-radius:12px;
}

/* ══════════ QUOTES ══════════ */
.ba-quotes{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:clamp(1.4rem,3vw,2.4rem);max-width:56rem}
.ba-quote{display:none}
.ba-quote.is-on{display:block}
.ba-quote p{font-size:clamp(1rem,1.8vw,1.25rem);line-height:1.55}
.ba-who{display:flex;align-items:baseline;gap:.6rem;margin-top:1rem}
.ba-who b{font-size:.9rem}
.ba-who span{font-size:.82rem;color:var(--dim)}
.ba-qnav{position:absolute;right:1.2rem;bottom:1.2rem;display:flex;gap:.4rem}
.ba-qnav button{
  width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:50%;
  background:var(--paper);cursor:pointer;font-size:.9rem;color:var(--ink);
}
.ba-qnav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ══════════ DETAIL ══════════ */
.ba-detail{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.ba-shot{
  aspect-ratio:4/3;border-radius:12px;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,var(--sand-2) 0 14px,var(--sand) 14px 28px);
  border:1px solid var(--line);
}
.ba-shot i{font-style:normal;font-size:.85rem;color:var(--dim);padding:0 1rem;text-align:center}
.ba-branch{margin-top:1rem;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ba-branch div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line-2);font-size:.87rem}
.ba-branch div:last-child{border-bottom:0}
.ba-branch span{color:var(--dim)}
.ba-branch b{font-weight:700}

.ba-dbrand{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:700;margin-bottom:.5rem}
.ba-dinfo h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:750;margin-bottom:.7rem}
.ba-dprice{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.9rem}
.ba-fits{font-size:.88rem;color:var(--dim);margin-bottom:.8rem}
.ba-fits b{color:var(--ink)}
.ba-fits div{padding:.2rem 0}
.ba-oem{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}
.ba-oem span{
  padding:.25rem .6rem;border:1px solid var(--line);border-radius:5px;
  background:var(--paper);font-size:.78rem;color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.ba-spec{width:100%;border-collapse:collapse;margin-bottom:1.2rem;font-size:.87rem}
.ba-spec td{padding:.55rem .2rem;border-bottom:1px solid var(--line-2)}
.ba-spec td:first-child{color:var(--dim)}
.ba-spec td:last-child{text-align:right;font-weight:600}
.ba-add{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:.95rem 1.6rem;border-radius:var(--r);border:1px solid var(--acc);
  background:var(--acc);color:#fff;font-family:inherit;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:background .2s;
}
.ba-add:hover{background:var(--acc-lit)}
.ba-rel{margin-top:var(--bay)}
.ba-rel h4{font-size:1.05rem;font-weight:700;margin-bottom:1rem}

/* ══════════ CART ══════════ */
.ba-cartpage{max-width:44rem}
.ba-cartpage h3{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:750;margin-bottom:1.2rem}
.ba-crow{
  display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.9rem;
}
.ba-crow .q{color:var(--dim);font-size:.84rem;white-space:nowrap}
.ba-crow .s{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ba-empty{padding:2.5rem 1.5rem;text-align:center;color:var(--dim);
  background:var(--paper);border:1px dashed var(--line);border-radius:12px}
.ba-opts{display:grid;gap:.5rem;margin-bottom:1.4rem}
.ba-opt{
  display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  cursor:pointer;font-size:.88rem;
}
.ba-opt:hover{border-color:var(--ink)}
.ba-opt.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);font-weight:600}
.ba-sum{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;margin-bottom:1.2rem}
.ba-sum div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.9rem}
.ba-sum div span:first-child{color:var(--dim)}
.ba-sum div span:last-child{font-variant-numeric:tabular-nums}
.ba-sum .big{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem;
  font-size:1.15rem;font-weight:800}
.ba-sum .big span:first-child{color:var(--ink)}
.ba-pay{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.ba-pay span{padding:.3rem .7rem;border:1px solid var(--line);border-radius:5px;
  font-size:.72rem;letter-spacing:.08em;color:var(--dim);background:var(--paper)}
.ba-done{
  margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--r);
  background:rgba(18,115,74,.1);border:1px solid rgba(18,115,74,.3);
  color:var(--ok);font-size:.9rem;font-weight:600;
}

/* ══════════ BOXES / ABOUT / FORM ══════════ */
.ba-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.ba-box{
  display:flex;flex-direction:column;gap:.25rem;padding:1.1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
}
.ba-box b{font-size:.92rem}
.ba-box span{font-size:.88rem}
.ba-box .m{font-size:.82rem;color:var(--dim)}

.ba-about{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start;margin-bottom:2rem}

.ba-form{margin-top:var(--bay);background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:clamp(1.2rem,2.6vw,2rem);max-width:46rem}
.ba-form .ba-h3{margin-top:0}
.ba-form-rows{display:grid;gap:.6rem;margin-bottom:1rem}
.ba-form input{
  padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:.9rem;color:var(--ink);background:var(--sand);
}
.ba-form input:focus{outline:2px solid var(--acc);outline-offset:-2px;background:var(--paper)}
.ba-sent{margin-top:.9rem;color:var(--ok);font-size:.88rem;font-weight:600}

/* ══════════ FOOTER ══════════ */
.ba-foot{background:var(--ink);color:#fff;padding:var(--bay) 0 0}
.ba-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;
  padding-bottom:2.4rem}
.ba-fcol{display:flex;flex-direction:column;gap:.35rem}
.ba-fcol p{color:rgba(255,255,255,.6);font-size:.87rem;max-width:34ch}
.ba-fcol b{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:.3rem}
.ba-fcol span{font-size:.88rem;color:rgba(255,255,255,.78)}
.ba-foot-bar{
  border-top:1px solid rgba(255,255,255,.14);padding:1.2rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  width:min(88rem,100% - var(--gut) * 2);margin-inline:auto;
  font-size:.78rem;color:rgba(255,255,255,.5);
}

/* ══════════ REVEALS ══════════ */
.ba [data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.ba [data-rv].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ba [data-rv]{opacity:1;transform:none;transition:none}
  .ba-marquee-in{animation:none}
  .ba *{scroll-behavior:auto !important}
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:80rem){
  .ba-hero-in{grid-template-columns:1fr;gap:2.2rem}
  .ba-picker{max-width:34rem}
  .ba-cards{grid-template-columns:repeat(2,1fr)}
  .ba-boxes{grid-template-columns:repeat(2,1fr)}
  .ba-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:64rem){
  .ba-shop{grid-template-columns:1fr}
  .ba-side{position:static}
  .ba-detail{grid-template-columns:1fr}
  .ba-about{grid-template-columns:1fr}
  .ba-band-head{grid-template-columns:1fr;align-items:start}
  .ba-nav-note{display:none}
  .ba-phone{display:none}
  .ba-burger{display:block}
  .ba-nav{
    position:absolute;left:0;right:0;top:100%;display:none;
    border-top:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(16,26,43,.7);
  }
  .ba-nav.is-open{display:block}
  .ba-nav-in{flex-direction:column;align-items:stretch;padding:.5rem 0 1rem}
  .ba-nav button{text-align:left;border-bottom:0;border-left:2px solid transparent;padding:.75rem .6rem}
  .ba-nav button.is-on{border-left-color:var(--acc);border-bottom-color:transparent}
}
@media (max-width:48rem){
  .ba-strip-in{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .ba-cards{grid-template-columns:1fr}
  .ba-boxes{grid-template-columns:1fr}
  .ba-foot-grid{grid-template-columns:1fr;gap:1.6rem}
  .ba-bar-in{flex-wrap:wrap;gap:.7rem}
  .ba-search{order:3;flex-basis:100%}
  .ba-grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
  .ba-crow{grid-template-columns:1fr auto}
  .ba-crow .q{grid-column:1/-1;order:3}
}