/* ==========================================================================
   stadcard.eu — clickable design prototype
   Brand Guidelines v1.0 · Montserrat / Inter · #E30613 · 60-30-10
   Editorial layout: hairlines + whitespace. No decorative frames or cards.
   ========================================================================== */

:root{
  --red:#E30613;
  --red-600:#C60510;
  --red-400:#F5333F;
  --maroon:#A0282E;
  --onyx:#1A1A1A;
  --ink:#111214;
  --ink-2:#4A4E55;
  --ink-3:#787D86;
  --concrete:#F2F2F2;
  --night:#12141C;
  --rule:#E2E3E6;
  --rule-2:#C9CBD0;
  --green:#1E8F4E;
  --amber:#F0A500;
  --disp:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px;
  --hdr:66px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

:root[data-lang="de"] .en,:root[data-lang="de"] .sk,:root[data-lang="de"] .cs{display:none !important}
:root[data-lang="en"] .de,:root[data-lang="en"] .sk,:root[data-lang="en"] .cs{display:none !important}
:root[data-lang="sk"] .de,:root[data-lang="sk"] .en,:root[data-lang="sk"] .cs{display:none !important}
:root[data-lang="cs"] .de,:root[data-lang="cs"] .en,:root[data-lang="cs"] .sk{display:none !important}
:root[data-cur="eur"] .czk{display:none !important}
:root[data-cur="czk"] .eur{display:none !important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(max-width:720px){.wrap{padding:0 20px}}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr);
  background:#fff;border-bottom:1px solid var(--rule);
  transition:background .2s ease,border-color .2s ease;
}
.hdr.over{background:transparent;border-bottom-color:transparent}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:30px;background:transparent}
.logo{display:flex;align-items:center;text-decoration:none;flex:none;color:var(--red)}
/* the bar is opaque and sits above the hero rather than over it, so the red
   logo and the dark labels are legible from the first pixel — the same
   arrangement the reference site uses. Inversion still applies wherever the bar
   does sit on a dark surface. */
.hdr{box-shadow:0 1px 0 var(--rule)}
.sc-logo{height:22px;width:auto;display:block}
.hdr.over .logo{color:#fff}
/* clear space = x-height of the "a", per Brand Guidelines 2.2 */
.logo{padding:6px 0}
.logo-t{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:.11em;color:var(--red);text-transform:uppercase;white-space:nowrap}
.hdr.over .logo-t{color:#fff}
.nav{display:flex;gap:26px;align-items:center;flex:1;height:100%;background:transparent}
.nav a{
  font-size:14.5px;font-weight:650;color:var(--onyx);text-decoration:none;
  display:flex;align-items:center;height:100%;padding:0;
  border-bottom:2px solid transparent;white-space:nowrap;background:transparent;
}
.nav a:hover{color:var(--onyx)}
.nav a.on{color:var(--onyx);border-bottom-color:var(--red)}
.hdr.over .nav a{color:rgba(255,255,255,.85)}
.hdr.over .nav a:hover,.hdr.over .nav a.on{color:#fff;border-bottom-color:var(--red-400)}
.hdr-r{display:flex;align-items:center;gap:12px;flex:none}
.sw{display:flex;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden}
.hdr.over .sw{border-color:rgba(255,255,255,.4)}
.sw button{
  font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.05em;
  padding:5px 9px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
}
.hdr.over .sw button{color:rgba(255,255,255,.8)}
.sw button+button{border-left:1px solid var(--rule-2)}
.hdr.over .sw button+button{border-left-color:rgba(255,255,255,.4)}
.sw button.on{background:var(--red);color:#fff}
.sw button.on:hover{background:var(--red-600)}
/* Odoo renders the language menu itself; colour the selected entry */
.js_language_selector .dropdown-item.active,
.js_language_selector .dropdown-item:active,
.js_language_selector .dropdown-item.selected,
.js_language_selector .dropdown-item[aria-current]{
  background:var(--red) !important;color:#fff !important}
.js_language_selector .dropdown-item:hover{background:var(--concrete)}
.js_language_selector .dropdown-item.active:hover{background:var(--red-600) !important}
.hdr-login{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.hdr.over .hdr-login{color:rgba(255,255,255,.85)}
/* ---------- small screens ----------
   Below 1080px the inline navigation does not fit, so it moves into a panel
   behind a toggle. Previously it was just set to display:none, which left
   phones with no navigation at all. The right-hand group is the other half of
   the problem: logo + language selector + call to action measured 405px on a
   393px screen, pushing the button off the edge. On phones the call to action
   and the language selector live in the panel instead of the bar. */
.hdr-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-left:auto;flex:none;
  background:transparent;border:0;cursor:pointer;
}
.hdr-burger span{display:block;height:2px;width:100%;background:var(--onyx);border-radius:2px;
  transition:transform .18s ease,opacity .18s ease}
.hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hdr-panel,.hdr-scrim{display:none}

@media(max-width:1080px){
  .nav{display:none}
  .hdr-burger{display:flex}
  .hdr-in{gap:12px;padding:0 16px}
  .hdr-r{gap:8px}
  .hdr-r .btn{display:none}
  .hdr-r .js_language_selector{display:none}
  .sc-logo{height:20px}

  /* The panel used to grow a max-height and let the page show through under
     it, so the hero's own red call to action sat directly beneath the panel's
     one and the whole thing read as broken. It is now a real drawer: it owns
     the viewport below the bar, darkens what is behind it, and never lets the
     page beneath compete for attention. */
  .hdr-scrim{
    display:block;position:fixed;top:var(--hdr);left:0;right:0;bottom:0;
    background:rgba(15,15,15,.5);z-index:98;
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease;
  }
  .hdr-scrim.open{opacity:1;visibility:visible}

  .hdr-panel{
    display:flex;flex-direction:column;position:fixed;top:var(--hdr);right:0;
    width:100%;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));
    background:#fff;z-index:99;overscroll-behavior:contain;
    transform:translateX(101%);transition:transform .24s ease;
  }
  .hdr-panel.open{transform:none;box-shadow:-16px 0 34px rgba(0,0,0,.16)}
  /* on a tablet a full-width white sheet looks like a broken page, not a menu */
  @media(min-width:700px){
    .hdr-panel{width:380px;border-left:1px solid var(--rule)}
  }

  .hdr-panel .in{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
    padding:6px 20px 0}
  .hdr-panel a.pl-link{
    display:block;padding:15px 0;border-bottom:1px solid var(--rule);
    font-size:17px;font-weight:650;color:var(--onyx);text-decoration:none;
  }
  /* the sticky foot draws its own top rule */
  .hdr-panel a.pl-link:last-of-type{border-bottom:0}

  /* The quote button is the one thing that must never need a scroll to find,
     so the foot sticks to the bottom of the drawer whatever the list does. */
  .hdr-panel .pl-foot{
    position:sticky;bottom:0;margin-top:auto;background:#fff;
    display:flex;flex-direction:column;align-items:stretch;gap:12px;
    padding:16px 0 20px;border-top:1px solid var(--rule);
  }
  .hdr-panel .btn{display:block;text-align:center;padding:13px 18px;font-size:15px}

  /* Odoo's language menu is a Bootstrap dropdown. Inside a scrolling drawer it
     would be clipped, and it arrives with Bootstrap's own link colour, which
     is not one of ours. Flatten it into a row of chips instead: no dropdown to
     clip, the current language obvious, and the same shape as the switcher the
     prototype uses. */
  .hdr-panel .js_language_selector{display:block;width:100%}
  .hdr-panel .js_language_selector .dropdown-toggle{display:none}
  .hdr-panel .js_language_selector .dropdown-menu{
    display:flex !important;position:static !important;transform:none !important;
    inset:auto !important;float:none;min-width:0;width:100%;gap:8px;
    margin:0;padding:0;border:0;background:transparent;box-shadow:none;
  }
  .hdr-panel .js_language_selector .dropdown-item{
    flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;
    padding:10px 6px;border:1px solid var(--rule-2);border-radius:4px;
    font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.06em;
    color:var(--ink-2);text-transform:uppercase;
  }
  /* the visible label is the URL code — the full language names do not fit
     four across on a phone, and the codes are what the site uses elsewhere */
  .hdr-panel .js_language_selector .dropdown-item span{display:none}
  .hdr-panel .js_language_selector .dropdown-item::after{content:attr(data-url_code)}
  /* Odoo emits the languages in its own order; the site states them as
     DE · EN · SK · CS everywhere else, so say the same thing here */
  .hdr-panel .js_language_selector .dropdown-item[data-url_code="de"]{order:1}
  .hdr-panel .js_language_selector .dropdown-item[data-url_code="en"]{order:2}
  .hdr-panel .js_language_selector .dropdown-item[data-url_code="sk"]{order:3}
  .hdr-panel .js_language_selector .dropdown-item[data-url_code="cs"]{order:4}
  .hdr-panel .js_language_selector .dropdown-item.active,
  .hdr-panel .js_language_selector .dropdown-item[aria-current]{
    background:var(--red) !important;border-color:var(--red);color:#fff !important}
  .hdr-panel .js_language_selector .dropdown-item:hover{background:var(--concrete)}
  .hdr-panel .js_language_selector .dropdown-item.active:hover{background:var(--red-600) !important}

  /* the page must not scroll behind an open drawer */
  body.sc-nav-open{overflow:hidden}
}
@media(max-width:400px){
  .hdr-in{padding:0 14px}
  .sc-logo{height:18px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:16px;
  padding:12px 24px;border-radius:4px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease;
  line-height:1.3;
}
.btn-pri{background:var(--red);color:#fff}
.btn-pri:hover{background:var(--red-600)}
.btn-sec{background:transparent;color:var(--onyx);border-color:var(--rule-2)}
.btn-sec:hover{border-color:var(--onyx)}
.btn-dark{background:var(--onyx);color:#fff}
.btn-dark:hover{background:#000}
.btn-onhero{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-onhero:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-sm{font-size:14px;padding:9px 17px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(460px,62vh,620px);display:flex;align-items:flex-end;
  background-size:cover;background-position:center 60%;color:#fff;overflow:hidden;
}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(102deg,rgba(12,14,20,.93) 0%,rgba(12,14,20,.86) 34%,rgba(12,14,20,.66) 58%,rgba(12,14,20,.34) 82%,rgba(12,14,20,.14) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:66%;z-index:0;
  background:linear-gradient(to top,rgba(12,14,20,.88) 0%,rgba(12,14,20,.55) 45%,transparent 100%)}
.hero .wrap{position:relative;z-index:1;padding:64px 24px 52px}
.hero h1{
  font-family:var(--disp);font-weight:900;font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.03;letter-spacing:-.028em;margin:14px 0 16px;max-width:16ch;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--red-400)}
.hero p{font-size:clamp(1.04rem,1.5vw,1.24rem);color:rgba(255,255,255,.88);max-width:56ch;margin:0;line-height:1.58}
.eyebrow{
  font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);display:block;
}
.hero .eyebrow{color:#FF8A91}

/* page hero (shallow) */
.phero{
  position:relative;isolation:isolate;background-size:cover;background-position:center;color:#fff;
}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,14,20,.90),rgba(12,14,20,.58))}
.phero .wrap{position:relative;padding:62px 24px 54px}
.phero h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.06;letter-spacing:-.025em;margin:14px 0 14px;max-width:20ch}
.phero p{color:rgba(255,255,255,.86);max-width:60ch;margin:0;font-size:1.06rem}

/* flat page head (no image) */
.fhead{border-bottom:1px solid var(--rule);padding:52px 0 34px}
.fhead h1{font-family:var(--disp);font-weight:900;font-size:clamp(2rem,3.8vw,2.9rem);letter-spacing:-.025em;line-height:1.08;margin:12px 0 12px;color:var(--onyx)}
.fhead p{color:var(--ink-2);max-width:64ch;margin:0}

/* ---------- sections ---------- */
section.s{padding:82px 0}
section.s.tight{padding:56px 0}
section.s.alt{background:var(--concrete)}
section.s.dark{background:var(--night);color:rgba(255,255,255,.84)}
section.s.shot{position:relative;isolation:isolate;background-size:cover;background-position:center 62%;overflow:hidden}
section.s.shot::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(96deg,rgba(12,14,20,.95) 0%,rgba(12,14,20,.86) 46%,rgba(12,14,20,.62) 100%)}
section.s.shot .wrap{position:relative;z-index:1}
section.s.dark h2,section.s.dark h3{color:#fff}
section.s.dark .eyebrow{color:var(--red-400)}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.022em;margin:12px 0 14px;color:var(--onyx);text-wrap:balance}
h3{font-family:var(--disp);font-weight:700;font-size:1.3rem;line-height:1.26;margin:0 0 10px;color:var(--onyx)}
h4{font-family:var(--disp);font-weight:600;font-size:1.05rem;margin:0 0 7px;color:var(--onyx)}
p{margin:0 0 15px;max-width:72ch}
.sub{color:var(--ink-2);font-size:1.08rem;max-width:64ch;margin:0 0 8px}
a{color:var(--red)}
.hr{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- assistant prompt ---------- */
.ask{border-bottom:1px solid var(--rule);background:#fff;padding:66px 0 58px}
.ask-in{max-width:770px;margin:0 auto;text-align:center}
.ask-id{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px}
.ask-id img{width:26px;height:26px;display:block}
.ask-id span{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}
.ask-id i{width:7px;height:7px;border-radius:50%;background:var(--green);display:block}
.ask h2{font-size:clamp(1.65rem,2.9vw,2.25rem);margin:0 0 12px;line-height:1.12}
.ask-lede{color:var(--ink-2);margin:0 auto 26px;max-width:54ch;font-size:1.03rem}
.ask-f{
  display:flex;align-items:center;gap:10px;text-align:left;
  border:1.5px solid var(--rule-2);border-radius:8px;background:#fff;
  padding:7px 7px 7px 20px;transition:border-color .16s ease,box-shadow .16s ease;
}
.ask-f:focus-within{border-color:var(--onyx);box-shadow:0 0 0 4px rgba(227,6,19,.11)}
.ask-f input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;
  font-family:var(--body);font-size:16.5px;color:var(--ink);padding:14px 0}
.ask-f input::placeholder{color:var(--ink-3)}
.ask-go{width:48px;height:48px;flex:none;border:0;border-radius:5px;background:var(--red);
  color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:background .16s ease}
.ask-go:hover{background:var(--red-600)}
.ask-go:focus-visible{outline:2px solid var(--onyx);outline-offset:2px}
.ask-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:18px}
.ask-chip{font-family:var(--body);font-weight:500;font-size:14px;color:var(--ink-2);
  background:transparent;border:1px solid var(--rule);border-radius:999px;
  padding:9px 17px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease}
.ask-chip:hover{border-color:var(--onyx);color:var(--onyx);background:var(--concrete)}
.ask-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ask-foot{font-size:13px;color:var(--ink-3);margin:22px 0 0}
@media(max-width:600px){
  .ask{padding:48px 0 42px}
  .ask-f{padding-left:16px}
  .ask-f input{font-size:16px}
  .ask-chips{gap:7px}
  .ask-chip{font-size:13px;padding:8px 14px}
}

/* ---------- proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;border-top:1px solid var(--rule);padding-top:24px}
.proof div{font-size:14.5px;color:var(--ink-2)}
.proof b{display:block;font-family:var(--disp);font-weight:900;font-size:1.9rem;letter-spacing:-.03em;color:var(--onyx);line-height:1}
.proof b em{font-style:normal;color:var(--red)}
.proof span{display:block;margin-top:7px}

/* ---------- pillar rows ---------- */
.pillars{border-top:1px solid var(--rule);margin-top:34px}
.pillar{display:grid;grid-template-columns:52px 300px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
.pillar .n{font-family:var(--disp);font-weight:900;font-size:13px;color:var(--red);letter-spacing:.06em;padding-top:4px}
.pillar h3{margin:0}
.pillar p{margin:0;color:var(--ink-2);font-size:16px}
@media(max-width:820px){.pillar{grid-template-columns:34px 1fr;gap:14px}.pillar p{grid-column:2}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:36px;border-top:1px solid var(--rule);padding-top:30px}
.step .n{font-family:var(--disp);font-weight:900;font-size:12px;letter-spacing:.16em;color:var(--red);display:block;margin-bottom:12px}
.step h4{font-size:1.12rem;margin-bottom:8px}
.step p{font-size:15.5px;color:var(--ink-2);margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- venue tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:32px}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;text-decoration:none;isolation:isolate;transition:transform .25s ease}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,12,.88),rgba(10,10,12,.16) 62%,transparent)}
.tile span{position:relative;z-index:1;color:#fff;font-family:var(--disp);font-weight:700;font-size:1.06rem;padding:16px 18px;letter-spacing:-.01em}
.tile:hover{transform:translateY(-3px)}
.tile.wide{aspect-ratio:16/9;grid-column:span 2}
@media(max-width:720px){.tile.wide{grid-column:span 1;aspect-ratio:4/3}}

/* ---------- alternating feature ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:52px 0;border-bottom:1px solid var(--rule)}
.feat:last-child{border-bottom:0}
.feat img{border-radius:4px;aspect-ratio:4/3;object-fit:cover;width:100%}
.feat.rev .fx{order:2}
@media(max-width:820px){.feat{grid-template-columns:1fr;gap:24px}.feat.rev .fx{order:0}}

/* ---------- tables ---------- */
.tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.d{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
@media(max-width:620px){table.d{min-width:460px;font-size:14px}}
table.d thead th{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:0 16px 9px 0;border-bottom:1.5px solid var(--onyx)}
table.d tbody td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
table.d tbody td:first-child{color:var(--onyx);font-weight:600}
table.d td.n,table.d th.n{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
table.d tbody tr:hover td{background:rgba(242,242,242,.6)}

/* ---------- shop ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;padding:20px 0;border-bottom:1px solid var(--rule)}
.chip{font-size:13.5px;font-weight:500;padding:7px 15px;border:1px solid var(--rule-2);border-radius:4px;color:var(--ink-2);background:#fff;cursor:pointer}
.chip.on{background:var(--onyx);color:#fff;border-color:var(--onyx)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px;padding:40px 0}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr;gap:32px 22px}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{text-decoration:none;color:inherit;display:block}
.card .im{background:var(--concrete);border-radius:4px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}
.card .im img{max-height:100%;width:auto;object-fit:contain;transition:transform .3s ease}
.card:hover .im img{transform:scale(1.04)}
.card h4{margin:16px 0 5px;font-size:1.08rem}
.card .bl{font-size:14.5px;color:var(--ink-2);margin:0 0 10px;min-height:2.9em}
.card .pr{font-family:var(--disp);font-weight:700;font-size:15.5px;color:var(--onyx);font-variant-numeric:tabular-nums}
.card .pr small{display:block;font-family:var(--body);font-weight:500;font-size:13px;color:var(--ink-3);margin-top:3px}
.stk{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-top:8px;display:block}
.stk.low{color:var(--amber)}

/* ---------- product ---------- */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding:44px 0}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:30px}}
.gal .main{background:var(--concrete);border-radius:4px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:40px}
.gal .main img{max-height:100%;width:auto;object-fit:contain}
.gal .thumbs{display:flex;gap:10px;margin-top:12px}
.gal .thumbs div{background:var(--concrete);border-radius:4px;width:78px;height:66px;display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;border:1px solid transparent}
.gal .thumbs div.on{border-color:var(--onyx)}
.gal .thumbs img{max-height:100%;width:auto}
.buy h1{font-family:var(--disp);font-weight:800;font-size:2rem;letter-spacing:-.025em;line-height:1.1;margin:0 0 10px;color:var(--onyx)}
.buy .lede{color:var(--ink-2);font-size:1.02rem;margin:0 0 24px}
.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden;margin-bottom:20px}
.seg button{font-family:var(--body);font-weight:600;font-size:14.5px;padding:10px 22px;border:0;background:#fff;color:var(--ink-2);cursor:pointer}
.seg button+button{border-left:1px solid var(--rule-2)}
.seg button.on{background:var(--onyx);color:#fff}
.price{font-family:var(--disp);font-weight:900;font-size:2.5rem;letter-spacing:-.03em;color:var(--onyx);line-height:1;font-variant-numeric:tabular-nums}
.price sup{font-size:1rem;font-weight:700;vertical-align:super;letter-spacing:0}
.price-note{font-size:13.5px;color:var(--ink-3);margin:8px 0 22px}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--rule-2);border-radius:4px;width:fit-content;margin-bottom:16px}
.qty button{width:42px;height:44px;border:0;background:#fff;font-size:18px;color:var(--ink-2);cursor:pointer}
.qty input{width:56px;height:44px;border:0;border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2);text-align:center;font-family:var(--body);font-size:16px;outline:0}
.inc{border-top:1px solid var(--rule);margin-top:26px;padding-top:20px}
.inc li{font-size:15px;color:var(--ink-2);margin-bottom:6px}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:44px 0}
@media(max-width:900px){.calc{grid-template-columns:1fr;gap:34px}}
.fld{margin-bottom:24px}
.fld label{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;font-weight:600;color:var(--onyx);margin-bottom:9px}
.fld label b{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--red);font-variant-numeric:tabular-nums}
.fld input[type=range]{width:100%;accent-color:var(--red);height:22px}
.fld .h{font-size:13px;color:var(--ink-3);margin-top:4px}
.res{border-top:1px solid var(--rule)}
.res .r{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);gap:20px}
.res .r .k{font-size:15px;color:var(--ink-2);max-width:26ch}
.res .r .v{font-family:var(--disp);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--onyx);font-variant-numeric:tabular-nums;white-space:nowrap}
.res .r.big .v{font-size:2.1rem;color:var(--red)}
.res .r.big .k{font-weight:600;color:var(--onyx)}

/* ---------- checkout ---------- */
.co{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;padding:40px 0}
@media(max-width:900px){.co{grid-template-columns:1fr}}
.stepbar{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:34px;overflow-x:auto}
.stepbar div{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:0 20px 14px 0;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.stepbar div.on{color:var(--onyx);border-bottom-color:var(--red)}
.stepbar div.done{color:var(--green)}
.f{margin-bottom:22px}
.f label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px;letter-spacing:.01em}
.f input,.f select{width:100%;font-family:var(--body);font-size:16px;padding:11px 0;border:0;border-bottom:1px solid var(--rule-2);
  background:transparent;outline:0;color:var(--ink);border-radius:0}
.f input:focus,.f select:focus{border-bottom:2px solid var(--red);padding-bottom:10px}
.f .ok{font-size:13px;color:var(--green);margin-top:6px;font-weight:600}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:560px){.f2{grid-template-columns:1fr}}
.sum{border-top:1.5px solid var(--onyx);padding-top:18px}
.sum .l{display:flex;justify-content:space-between;padding:9px 0;font-size:15px;color:var(--ink-2);gap:16px}
.sum .l b{color:var(--onyx);font-variant-numeric:tabular-nums;white-space:nowrap}
.sum .t{display:flex;justify-content:space-between;border-top:1px solid var(--red);margin-top:12px;padding-top:14px;
  font-family:var(--disp);font-weight:800;font-size:1.25rem;color:var(--onyx)}
.sign{border:1px dashed var(--rule-2);border-radius:4px;padding:26px;text-align:center;margin:8px 0 20px;background:var(--concrete)}
.sign .sg{font-family:'Segoe Script','Bradley Hand',cursive;font-size:2rem;color:var(--onyx);margin-bottom:6px}
.sign .m{font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}

/* ---------- portal ---------- */
.pt{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:40px 0}
@media(max-width:820px){.pt{grid-template-columns:1fr;gap:24px}}
.pnav{border-top:1px solid var(--rule)}
.pnav a{display:block;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2);text-decoration:none}
.pnav a.on{color:var(--onyx);font-weight:600;border-left:2px solid var(--red);padding-left:12px;margin-left:-14px}

/* ---------- status pill ---------- */
.pl{display:inline-block;font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;white-space:nowrap}
.pl.g{background:var(--green);color:#fff}
.pl.a{background:var(--amber);color:#3A2600}
.pl.k{background:var(--onyx);color:#fff}
.pl.r{background:var(--red);color:#fff}
.pl.q{background:var(--concrete);color:var(--ink-2)}

/* ---------- compliance ---------- */
.ctabs{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:8px;overflow-x:auto}
.ctabs button{font-family:var(--disp);font-weight:700;font-size:14px;padding:14px 24px 12px;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ctabs button.on{color:var(--onyx);border-bottom-color:var(--red)}
/* On a phone the three tab labels are wider than the screen, and a
   horizontally scrolling strip hides two of them behind a gesture nobody
   makes. Stack them instead — three tappable rows, active one underlined. */
@media(max-width:620px){
  .ctabs{flex-wrap:wrap;overflow-x:visible;border-bottom:0;gap:0}
  .ctabs button{flex:1 1 100%;text-align:left;padding:13px 0;white-space:normal;
    border-bottom:1px solid var(--rule);margin-bottom:0}
  .ctabs button.on{border-bottom-color:var(--red)}
}
.cpane{display:none;padding:34px 0}
.cpane.on{display:block}

/* ---------- CTA band ---------- */
.cta{background:var(--night);color:#fff;padding:64px 0}
.cta h2{color:#fff;margin-top:0}
.cta p{color:rgba(255,255,255,.8);max-width:58ch}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}

/* ---------- footer ---------- */
.ftr{background:var(--night);color:rgba(255,255,255,.62);padding:56px 0 30px;font-size:14.5px;border-top:1px solid rgba(255,255,255,.1)}
.ftr-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:820px){.ftr-g{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:620px){.ftr-g{grid-template-columns:1fr;gap:22px}
  .ftr{padding:40px 0 26px}.ftr-b{flex-direction:column;gap:8px}}
.ftr h5{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.44);margin:0 0 14px}
.ftr a{display:block;color:rgba(255,255,255,.72);text-decoration:none;padding:4px 0;font-size:14.5px}
.ftr a:hover{color:#fff}
.ftr .logo-f{color:#fff;margin-bottom:14px}
.ftr .logo-f .sc-logo{height:26px}
.ftr .tag{color:rgba(255,255,255,.55);max-width:34ch;font-size:14.5px}
.ftr-b{padding-top:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.44)}
.ftr-b b{color:rgba(255,255,255,.66);font-weight:600}

/* ---------- assistant launcher ---------- */
.acp{display:none;position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:10px;
  background:var(--onyx);color:#fff;border:0;border-radius:26px;padding:12px 20px 12px 16px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:14.5px;box-shadow:0 10px 30px rgba(0,0,0,.24)}
.acp .d{width:8px;height:8px;border-radius:50%;background:var(--red-400)}
.acp:hover{background:#000}
@media(max-width:560px){.acp{right:14px;bottom:14px;padding:11px 16px}}

.note{border-left:3px solid var(--red);padding:2px 0 2px 18px;margin:24px 0;color:var(--ink-2);font-size:15px;max-width:72ch}
.note b:first-child{display:block;font-family:var(--disp);font-weight:700;color:var(--onyx);margin-bottom:4px;font-size:14px}
.note.q{border-left-color:var(--ink-3)}
.note.a{border-left-color:var(--amber)}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:820px){.cols2,.cols3{grid-template-columns:1fr;gap:26px}}
ul.tick{list-style:none;padding:0;margin:0}
ul.tick li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--ink-2);font-size:15.5px}
ul.tick li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:6px;border-left:2px solid var(--red);
  border-bottom:2px solid var(--red);transform:rotate(-45deg)}

@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}


/* ---------- Odoo chrome ---------- */
/* Odoo's footer is a direct child of #wrapwrap — but so is ours, injected right
   after it. `#wrapwrap > footer` therefore hid our own footer as well, which is
   why the site had no footer at all. Exclude ours by class. */
#wrapwrap > header#top,
#wrapwrap > footer:not(.ftr),
#wrapwrap > main > .oe_structure_solo,
.o_footer_copyright{display:none !important}
/* the bar is position:fixed, so the page needs room for it */
#wrapwrap{padding-top:var(--hdr) !important;background:#fff}
#wrapwrap > main{padding:0 !important}
.sc-page{margin:0}
/* Odoo's language selector, restyled to match the header switcher */
.hdr-r .js_language_selector .dropdown-toggle{
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.05em;
  padding:6px 12px;border:1px solid var(--rule-2);border-radius:4px;
  background:transparent;color:var(--ink-2);line-height:1.2}
.hdr.over .hdr-r .js_language_selector .dropdown-toggle{
  border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.85)}
.hdr-r .js_language_selector .dropdown-menu{font-size:14px;border-radius:4px}

/* ---------- reasserting what Bootstrap resets ----------
   The standalone prototype let the hero heading inherit its colour from the
   section. Bootstrap gives every heading an explicit colour, which wins over
   inheritance, so the headline came out dark on the photograph. State it. */
.hero h1,.phero h1,.fhead h1{color:#fff}
.fhead h1{color:var(--onyx)}
.hero h1 em,.phero h1 em{color:var(--red-400)}
.hero .eyebrow{color:#FF8A91}
.hero p,.phero p{color:rgba(255,255,255,.88)}
.hero .btn-onhero,.hero .btn-sec{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.sc-page h2,.sc-page h3,.sc-page h4{color:var(--onyx)}
.sc-page section.s.dark h2,.sc-page section.s.dark h3,.sc-page .cta h2{color:#fff}
.sc-page a{text-decoration:none}
/* Odoo's skip link is meant to appear only on keyboard focus, but it paints
   over our sticky header. Restore the standard visually-hidden behaviour so it
   stays available to keyboard users and invisible to everyone else. */
#wrapwrap > .o_skip_to_content:not(:focus){
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- class-name collisions with Bootstrap ----------
   The prototype was written without a CSS framework, so a few of its class
   names — .nav, .card, .tile, .chip — are also Bootstrap components. Inside
   Odoo those bring their own backgrounds, padding and shadows along. Reset the
   ones we reuse; our own rules then apply on top. */
.hdr .nav{background:transparent;box-shadow:none;border:0;padding:0;margin:0;
  list-style:none;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0}
.hdr .nav > a{background:transparent;border-radius:0}
.sc-page .card{background:transparent;border:0;border-radius:0;box-shadow:none;
  --bs-card-spacer-x:0;--bs-card-spacer-y:0}
.sc-page .tile,.sc-page .chip{box-shadow:none}
.sc-page .chip{--bs-badge-padding-x:0;--bs-badge-padding-y:0}
.ftr .wrap,.hdr .wrap,.sc-page .wrap{max-width:var(--wrap);width:100%}
.sc-page .eyebrow,.sc-page .sub,.sc-page .tag{background:transparent;box-shadow:none}
.hdr .logo{color:var(--red)}
.hdr.over .logo{color:#fff}
.ftr .logo-f{color:#fff}

/* ---------- suppress the sibling site's assistant ----------
   That widget ships in a global frontend asset bundle, so its launcher and
   panel mount on every website in this database — including this one, where a
   differently branded widget must never appear (doc 01 ch. 01). Stadcard gets
   its own assistant with its own knowledge base in phase 3; until then the
   foreign widget is suppressed here and only here. The selectors below are the
   other module's own class names, which is why they read as they do. */
.hp-acp,.hp-acp--float,.hp-acp--inline,.hp-acp-launch{display:none !important}