/* =========================================================
   Espresso Tonic – espressotonic.de
   Aperitivo Kollektiv GmbH (Marke Sankt Sprizz)
   Eigenständiges, dependency-freies Stylesheet.
   Keine externen Fonts/Tracker (DSGVO-sauber).
   ========================================================= */

:root{
  --cream:      #F6F1E8;
  --cream-2:    #EFE6D6;
  --paper:      #FFFFFF;
  --ink:        #1E1712;
  --espresso:   #2A1D14;
  --muted:      #6B5D4F;
  --line:       #E0D6C5;
  --red:        #C4392B;
  --red-dark:   #A02D21;
  --gold:       #B4884E;
  --maxw:       1120px;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--red-dark);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-inline:auto}

/* ---- Type ---- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--espresso);margin:0 0 .4em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.5px}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1em}
.lead{font-size:1.22rem;color:var(--espresso)}
.eyebrow{
  font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin:0 0 1rem
}
.muted{color:var(--muted)}

/* ---- Buttons ---- */
.btn{
  display:inline-block;background:var(--espresso);color:#fff;
  padding:15px 30px;border-radius:2px;font-weight:600;font-size:1rem;
  letter-spacing:.02em;transition:background .2s;border:0;cursor:pointer
}
.btn:hover{background:var(--red-dark);text-decoration:none}
.btn--ghost{background:transparent;color:var(--espresso);border:1.5px solid var(--espresso)}
.btn--ghost:hover{background:var(--espresso);color:#fff}

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(246,241,232,.9);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--espresso);letter-spacing:.02em}
.brand small{display:block;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:28px}
.nav a{color:var(--espresso);font-size:.92rem;font-weight:600}
.nav a:hover{color:var(--red);text-decoration:none}
.nav a.lang-switch{border:1px solid var(--line);border-radius:100px;padding:4px 11px;font-size:.78rem;letter-spacing:.08em}
.nav a.lang-switch:hover{border-color:var(--red);color:var(--red)}
@media(max-width:720px){.nav a:not(.lang-switch):not(.nav-cta){display:none}.nav{gap:8px}.nav a.nav-cta{display:inline-block;border:1px solid var(--red);color:var(--red);border-radius:100px;padding:4px 11px;font-size:.75rem;letter-spacing:.03em;white-space:nowrap}}

/* ---- Hero ---- */
.hero{border-bottom:1px solid var(--line);padding-top:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:78vh}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:64px 6vw 64px 0}
.hero-copy .container-left{max-width:560px;margin-left:auto;padding-right:40px}
.hero-media{position:relative;overflow:hidden;background:var(--cream-2)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-media .hero-vid{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.hero-media .hero-fallback{display:none}
@media(prefers-reduced-motion:reduce){.hero-media .hero-vid{display:none}.hero-media .hero-fallback{display:block}}
.hero h1 span{color:var(--red)}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);border:1px solid var(--line);color:var(--espresso);
  padding:8px 14px;border-radius:100px
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:48px 0 40px;order:2}
  .hero-copy .container-left{max-width:none;margin:0;padding:0 24px}
  .hero-media{order:1;height:56vh;min-height:340px}
}

/* ---- Sections ---- */
section{padding:82px 0}
.section-tint{background:var(--cream-2)}
.section-dark{background:var(--espresso);color:#F3E8DA}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .eyebrow{color:#E6A79B}
.center{text-align:center}

/* ---- What-is / prose ---- */
.prose p{font-size:1.12rem}
.prose p:first-of-type::first-letter{
  font-family:var(--serif);float:left;font-size:3.4rem;line-height:.8;
  padding:6px 10px 0 0;color:var(--red)
}
.prose .crumbs::first-letter,.prose .eyebrow::first-letter,.prose .order-card p::first-letter,.prose .tiny::first-letter,.prose .photo-credit::first-letter{
  font-family:inherit;float:none;font-size:inherit;line-height:inherit;padding:0;color:inherit
}

/* ---- Sorten / product cards ---- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column
}
.card__img{background:#fff;padding:26px 26px 6px;text-align:center}
.card__img img{margin:0 auto;max-width:100%;max-height:340px;width:auto;height:auto}
.card__body{padding:8px 28px 30px}
.card h3{margin-bottom:.15em}
.card .kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.spec{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.spec li{display:flex;justify-content:space-between;gap:16px;font-size:.95rem;padding:6px 0;border-bottom:1px dotted var(--line);align-items:baseline}
.spec li span:first-child{color:var(--muted);flex:0 0 auto}
.spec li span:last-child{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.cards>*,.founder>*,.hero-grid>*,.b2b-intro>*,.form-grid>*{min-width:0}
@media(max-width:720px){.cards{grid-template-columns:1fr}}

/* ---- Feature list ---- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.feature{background:transparent}
.feature .num{font-family:var(--serif);font-size:1.5rem;color:var(--red);border-bottom:2px solid var(--red);display:inline-block;padding-bottom:2px;margin-bottom:12px}
.feature h3{font-size:1.15rem}
.feature p{font-size:1rem;color:var(--muted);margin:0}
@media(max-width:720px){.features{grid-template-columns:1fr}}

/* ---- Quote ---- */
.quote{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{
  font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.32;
  color:#fff;margin:0 0 22px;font-style:italic
}
.quote cite{font-style:normal;font-weight:700;letter-spacing:.04em;color:#E6A79B;font-size:.95rem}

/* ---- Gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.gallery figure{margin:0;border-radius:4px;overflow:hidden;background:var(--cream-2);aspect-ratio:4/5}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.04)}
@media(max-width:720px){.gallery{grid-template-columns:1fr 1fr}}

/* ---- Contact / B2B ---- */
.contact-box{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:46px;text-align:center;max-width:720px;margin:0 auto
}

/* ---- FAQ ---- */
.faq{max-width:800px;margin:38px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.2rem;color:var(--espresso);
  padding:16px 40px 16px 0;position:relative;font-weight:600
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.5rem;color:var(--red);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 18px;margin:0;color:var(--muted)}

/* ---- Footer ---- */
.site-footer{background:var(--espresso);color:#C9BBA9;padding:60px 0 34px;font-size:.95rem}
.site-footer a{color:#E8D9C6}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:34px}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.site-footer .brandline{font-family:var(--serif);font-size:1.3rem;color:#fff;margin-bottom:8px}
.footer-bio{height:56px;width:auto;display:block;margin-top:22px;border-radius:3px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#9C8E7C}
.footer-bottom a{color:#9C8E7C}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr}}

/* ---- Legal pages ---- */
.legal{padding:60px 0 90px}
.legal h1{font-size:2.2rem}
.legal h2{font-size:1.35rem;margin-top:1.8em}
.legal p,.legal li{font-size:1rem;color:var(--espresso)}
.legal .todo{background:#FBF3D6;border:1px solid #E6D08A;padding:2px 8px;border-radius:3px;font-weight:600}

.tiny{font-size:.82rem;color:var(--muted)}
.photo-credit{display:block;margin-top:11px;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.photo-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.photo-credit a:hover{color:var(--red)}
.founder-col{text-align:center}

/* ===== Upgrades: Trust-Leiste, Partner, B2B, Formular ===== */

/* Trust-Leiste */
.trust{background:#000;border-top:1px solid #000;border-bottom:1px solid #000}
.trust .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 26px;padding-top:30px;padding-bottom:30px}
.trust-item{display:flex;align-items:center;gap:13px;color:#ECE2D3}
.trust-item img{height:42px;width:auto;display:block}
.t-icon{width:40px;height:40px;flex:0 0 auto;display:block}
.trust-item .t-txt{font-size:.82rem;line-height:1.25}
.trust-item .t-txt strong{display:block;font-size:.92rem;letter-spacing:.02em;color:#fff}
.trust-item .t-txt span{color:#9C8E7C}
.trust-sep{width:1px;height:44px;background:rgba(255,255,255,.16)}
@media(max-width:720px){.trust .container{gap:22px 28px}.trust-sep{display:none}.trust-item img{height:38px}.t-icon{width:38px;height:38px}}
@media(max-width:560px){.trust{padding:0}.trust .container{display:block;padding-top:6px;padding-bottom:6px;padding-left:26px;padding-right:22px}.trust-item{width:100%;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}.trust-item:last-child{border-bottom:0}.trust-item img,.trust-item .t-icon{height:34px}.t-icon{width:34px}.trust-item .t-txt{min-width:0}}

/* Partner-/Herkunft-Logos als Badge-Karten (weißer Grund, damit Logos sauber sitzen) */
.badge-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 24px;display:flex;align-items:center;gap:18px}
.badge-card img{display:block;flex:0 0 auto}
.badge-card .eu-logo{height:74px;width:auto}
.badge-card .mh-logo{height:54px;width:auto}
.badge-card h3{margin:0 0 3px;font-size:1.05rem}
.badge-card p{margin:0;font-size:.9rem;color:var(--muted)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media(max-width:720px){.badge-grid{grid-template-columns:1fr}}

/* Sankt-Sprizz-Verweis */
.family{background:var(--cream-2);border-radius:8px;padding:34px;text-align:center;max-width:820px;margin:36px auto 0}
.family .eyebrow{margin-bottom:.6rem}
.family a.link-strong{font-weight:700;color:var(--red-dark);border-bottom:1px solid var(--red-dark)}

/* B2B-Sektion */
.b2b-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:40px}
.b2b-why{list-style:none;margin:18px 0 0;padding:0}
.b2b-why li{position:relative;padding:9px 0 9px 30px;border-bottom:1px dotted var(--line);font-size:1rem}
.b2b-why li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.kond{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 26px 22px}
.kond h3{margin:20px 0 4px}
@media(max-width:820px){.b2b-intro{grid-template-columns:1fr;gap:28px}}

/* Formular */
.b2b-form{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:38px;margin-top:44px;max-width:900px;margin-inline:auto}
.b2b-form h3{margin:0 0 4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:22px}
.form-grid .full{grid-column:1 / -1}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--espresso);margin-bottom:6px}
.field label .req{color:var(--red)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.98rem;
  background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(196,57,43,.12)}
.field textarea{min-height:110px;resize:vertical}
.choice-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.choice{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  font-size:.9rem;color:var(--espresso);background:#fff;
  border:1.5px solid var(--line);border-radius:100px;padding:9px 16px;
  transition:border-color .15s,background .15s,color .15s}
.choice:hover{border-color:var(--red)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice::before{content:"";display:inline-block;flex:0 0 15px;width:15px;height:15px;border-radius:50%;border:1.5px solid #C9BCA8;background:#fff;transition:all .15s}
.choice:has(input:checked){background:var(--red);border-color:var(--red);color:#fff}
.choice:has(input:checked)::before{background:#fff;border-color:#fff;box-shadow:inset 0 0 0 4px var(--red)}
.choice:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--muted);margin-top:6px}
.consent input{margin-top:3px;accent-color:var(--red)}
.form-actions{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-note{font-size:.8rem;color:var(--muted)}
.form-status{margin-top:16px;padding:14px 16px;border-radius:6px;font-size:.95rem;display:none}
.form-status.ok{display:block;background:#EAF4E8;border:1px solid #BFDDB6;color:#2E6B2A}
.form-status.err{display:block;background:#FBECEA;border:1px solid #E6B3AB;color:#9A2E22}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.b2b-form{padding:24px}}

/* Kooperation: München trifft Hamburg */
.coop{max-width:800px;margin:0 auto;text-align:center}
.coop .cities{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 4px;font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:var(--espresso)}
.coop .cities span{color:var(--red);font-size:1.4em;line-height:0}
.coop-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 46px;margin:28px 0 12px;transition:box-shadow .2s}
.coop-logo:hover{box-shadow:0 6px 22px rgba(42,29,20,.10)}
.coop-logo img{height:66px;width:auto;display:block}
.coop-credit{font-size:.82rem;color:var(--muted);letter-spacing:.04em}

/* Bildnachweis im Footer */
.credits{border-top:1px solid rgba(255,255,255,.14);margin-top:22px;padding-top:18px;font-size:.8rem;color:#9C8E7C;line-height:1.6}
.credits a{color:#C9BBA9}

/* Schwarze Kooperations-Section (Mount Hagen prominent, Styleguide: Mount Hagen Black #000000) */
.section-black{background:#000000;color:#E9DDCC;padding:100px 0}
.section-black h2,.section-black .coop .cities{color:#fff}
.section-black .eyebrow{color:#E6A79B}
.section-black .coop p{color:#CBBBA6;font-size:1.12rem}
.section-black .coop-logo{background:transparent;border:0;padding:0;margin:48px 0 26px}
.section-black .coop-logo img{height:140px;width:auto}
.section-black .coop-credit{color:#8C7F6E;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
@media(max-width:720px){.section-black{padding:66px 0}.section-black .coop-logo img{height:96px}}
.coop-building{max-width:390px;margin:48px auto 0}
.coop-building img{width:100%;height:auto;border-radius:8px;display:block}
.coop-building figcaption{margin-top:14px;font-size:.86rem;color:#B0A491;text-align:center;line-height:1.55}
.coop-building figcaption .src{display:block;color:#7C7162;font-size:.74rem;margin-top:4px}
.coop-building figcaption a{color:#C9B79E;text-decoration:underline}

/* Mount-Hagen-Logo braucht dunklen Grund (weißer Schriftzug) */
.trust-item--dark img{background:#000;border-radius:6px;padding:8px 12px}
.badge-card--dark{background:#000;border-color:#000}
.badge-card--dark h3{color:#fff}
.badge-card--dark p{color:#C9BBA9}
.badge-card--dark .mh-logo{height:58px}

/* Gründer-Block (prominentes Foto + Zitat) */
.founder{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center;max-width:1000px;margin:0 auto}
.founder-photo{margin:0;aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:0 14px 40px rgba(42,29,20,.14)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.founder-copy blockquote{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2rem);line-height:1.32;font-style:italic;color:var(--espresso);margin:.35em 0 .55em}
.founder-copy cite{font-style:normal;font-weight:700;color:var(--red-dark);font-size:.95rem;letter-spacing:.02em}
.founder-text{margin-top:22px;color:var(--muted);font-size:1.02rem}
@media(max-width:760px){.founder{grid-template-columns:1fr;gap:26px}.founder-photo{max-width:380px;margin:0 auto}}

/* Gründer-Stimme hoch im Hero (Foto + Zitat, unter den Badges) */
.hero-founder{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px}
.hero-founder .hf-photo{flex:0 0 auto;width:74px;height:74px;border-radius:50%;object-fit:cover;object-position:50% 35%;box-shadow:0 5px 16px rgba(42,29,20,.16)}
.hero-founder .hf-text{min-width:0}
.hero-founder blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.32rem;line-height:1.34;color:var(--espresso)}
.hero-founder cite{display:block;margin-top:9px;font-style:normal;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){.hero-founder{gap:14px}.hero-founder .hf-photo{width:62px;height:62px}.hero-founder blockquote{font-size:1.16rem}}

/* „So schmeckt's" – Geschmacks-/Erster-Schluck-Sektion */
.taste-intro{max-width:640px;margin:0 auto}
.taste-layers{max-width:560px;margin:44px auto 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(42,29,20,.10)}
.taste-layer{display:flex;align-items:center;gap:22px;padding:26px 30px}
.taste-layer .lyr-tag{flex:0 0 96px;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.taste-layer p{margin:0;font-size:1.06rem;line-height:1.5}
.taste-layer--top{background:linear-gradient(180deg,#FBF4E4,#F3E7CE);color:var(--espresso)}
.taste-layer--top .lyr-tag{color:var(--gold)}
.taste-layer--bottom{background:var(--espresso);color:#EFE2D0}
.taste-layer--bottom .lyr-tag{color:#E6A79B}
.taste-close{max-width:600px;margin:34px auto 0;text-align:center;font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.4;color:var(--espresso)}
@media(max-width:560px){.taste-layer{flex-direction:column;align-items:flex-start;gap:8px;padding:22px 22px}.taste-layer .lyr-tag{flex-basis:auto}}

.hero-cta{margin-top:26px}
.hero-cta .btn-hero{display:inline-block;background:var(--red);color:#fff;font-weight:600;text-decoration:none;padding:13px 24px;border-radius:100px;font-size:.95rem;box-shadow:0 8px 24px rgba(196,57,43,.22);transition:transform .15s ease, box-shadow .15s ease}
.hero-cta .btn-hero:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(196,57,43,.3)}
.hp-wrap{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Unterseiten (Rezept/Koffein/Wo-kaufen) ---- */
.crumbs{font-size:.83rem;color:var(--muted);margin:0 0 6px}
.crumbs a{color:inherit}
.page-hero-img{margin:26px 0;border-radius:8px;overflow:hidden}
.page-hero-img img{width:100%;height:auto;display:block}
.page-hero-img figcaption{padding-top:8px}
.prose ol{padding-left:1.2em}
.prose ol li{margin:.5em 0}
.chart{margin:20px 0 8px;display:flex;flex-direction:column;gap:9px}
.chart-row{display:flex;align-items:center;gap:12px;font-size:.9rem}
.chart-label{flex:0 0 205px;color:var(--muted)}
.chart-track{flex:1;background:rgba(42,29,20,.07);border-radius:4px;overflow:hidden;height:20px}
.chart-bar{display:block;height:100%;background:var(--espresso);border-radius:4px 0 0 4px}
.chart-row--us .chart-bar{background:var(--red)}
.chart-row--us .chart-label{color:var(--espresso);font-weight:600}
.chart-val{flex:0 0 62px;text-align:right;font-weight:600;font-size:.85rem}
@media(max-width:560px){.chart-label{flex-basis:120px;font-size:.78rem}.chart-val{flex-basis:52px;font-size:.78rem}}

.order-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 24px;margin:18px 0 8px;box-shadow:0 6px 22px rgba(42,29,20,.06)}

.ean-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px dotted var(--line)}
.ean-block{flex:1 1 220px;margin:0;text-align:center;background:#fff}
.ean-block img{width:100%;max-width:280px;height:auto;display:inline-block}
.ean-block figcaption{font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}