:root{--brand:#e65a7a;--brand-2:#9c5bf5;--ink:#191b1f;--muted:#5e6a77;--paper:#ffffff;--bg:#fff7fa;--accent:#ffd166;--choco:#4e2f24;--choco-2:#7a4b33}
*{box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1140px,92%);margin-inline:auto}
.theme-chocolate .btn{background:linear-gradient(90deg,var(--choco),var(--choco-2));color:#fff;box-shadow:0 10px 26px rgba(78,47,36,.25)}
.theme-chocolate .btn-contrast{background:linear-gradient(90deg,#1a1f29,#343e4a);color:#fff}
.choco-shadow{box-shadow:0 10px 30px rgba(78,47,36,.08)}
.ring-choco{box-shadow:0 0 0 3px rgba(78,47,36,.08),0 14px 30px rgba(0,0,0,.06)}
.topbar{background:#0f1420;color:#fff;font-size:.9375rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 0}
.topbar .topbar-note{margin:0;opacity:.9}
.topbar a{color:#fff}
.topbar .topbar-contacts{display:flex;gap:1rem}
.tb-link{display:inline-flex;align-items:center;gap:.5rem}
.site-header{position:sticky;top:0;z-index:50;background:var(--paper)}
.header-wrap{padding:.75rem 0}
.header-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--ink)}
.logo-mark{width:40px;height:auto}
.logo-text{font-size:1.15rem}
.logo-text span{color:var(--brand)}
.site-nav{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:nowrap;white-space:nowrap}
.site-nav a{padding:.46rem .6rem;border-radius:.6rem;font-weight:600;font-size:.95rem}
.site-nav a:hover{background:#f2f4f7}
.site-nav a.accent{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.header-cta-desktop{display:inline-flex}
.nav-cta-mobile{display:none}
.nav-toggle{display:none;background:#f2f4f7;border:none;padding:.6rem .75rem;border-radius:.6rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.15rem;border:none;border-radius:1rem;cursor:pointer;font-weight:700}
.btn-small{padding:.6rem .85rem;font-size:.94rem}
.btn-ghost{background:transparent;border:2px solid #e6e9ee;color:var(--ink)}
section{padding:3.2rem 0}
.section-lead{color:var(--muted)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
.framed img{border-radius:1rem;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:center}
.hero h1{font-size:2.4rem;line-height:1.1;margin:0 0 .8rem}
.hero p{font-size:1.08rem;color:var(--muted)}
.hero-actions{display:flex;gap:.8rem;margin:1.25rem 0}
.hero-points{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.hero-points li{display:flex;gap:.5rem;align-items:center;font-size:1rem}
.hero-media img{border-radius:1.25rem;box-shadow:0 24px 46px rgba(139,90,60,.18)}
.hero-drip{position:absolute;right:-40px;bottom:-30px;width:380px;opacity:.2;pointer-events:none;z-index:0}
.about .about-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.about-card{background:#fff;padding:1rem;border-radius:1rem;box-shadow:0 10px 26px rgba(0,0,0,.06);font-weight:700}
.menu .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.cards-grid.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.card{background:#fff;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column}
.card-body{padding:1rem}
.card h3{margin:.2rem 0 .4rem}
.flavours .flavour-tags{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.5rem}
.tag{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:999px;font-weight:700;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.tag.choco i{color:#4e2f24}
.tag.vanilla i{color:#d9b16e}
.tag.redvelvet i{color:#b71c3b}
.tag.lemon i{color:#f0c21e}
.tag.coffee i{color:#7b4b32}
.tag.pistachio i{color:#80a757}
.custom .checks{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem}
.offer{position:relative;overflow:hidden}
.offer-wrap{text-align:center;position:relative;z-index:1}
.offer-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;padding:.4rem .8rem;border-radius:999px;font-weight:800}
.offer h2{font-size:1.9rem;margin:.8rem 0}
.offer-note{font-size:.96rem;color:var(--muted)}
.offer-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.benefit{background:#fff;padding:1rem;border-radius:1rem;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.benefit h3{margin:.25rem 0 .25rem}
.how .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;list-style:none;padding:0}
.steps li{background:#fff;padding:1rem;border-radius:1rem;box-shadow:0 8px 20px rgba(0,0,0,.06);display:flex;align-items:center;gap:.8rem}
.steps li span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--accent);font-weight:800}
.gallery .masonry{columns:3 260px;column-gap:1rem}
.gallery .masonry img{width:100%;break-inside:avoid;margin:0 0 1rem;border-radius:.9rem;box-shadow:0 10px 24px rgba(0,0,0,.06)}
.quote{background:#fff;padding:1rem;border-radius:1rem;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.quote footer{color:var(--muted);margin-top:.5rem}
.corporate .checks{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem}
.newsletter .nl-form{display:flex;gap:.6rem;margin-top:.8rem}
.nl-input{flex:1;min-width:220px;padding:.85rem .95rem;border:1px solid #e3e7ee;border-radius:.8rem;font-size:1rem}
.contact .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:#fff;padding:1.25rem;border-radius:1rem;box-shadow:0 12px 28px rgba(0,0,0,.06)}
.contact-form .form-row{display:flex;flex-direction:column}
.contact-form label{font-weight:800}
.contact-form input,.contact-form textarea{padding:.85rem .95rem;border:1px solid #e3e7ee;border-radius:.8rem;font-size:1rem}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:1rem}
.form-note{color:var(--muted);margin:0}
.faq details{border:1px solid #e6e9ee;background:#fff;border-radius:1rem;margin:.8rem 0;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.faq summary{cursor:pointer;padding:1rem 1.1rem;list-style:none;display:flex;align-items:center;justify-content:space-between;font-weight:800}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{border-bottom:1px solid #eef1f5;background:#fcfcfd}
.faq details p{padding:1rem 1.1rem;margin:0;color:var(--muted)}
.faq summary::after{content:"▾";transform:rotate(-90deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(0)}
.site-footer{background:#0f1420;color:#cbd4de}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.5rem;padding:2rem 0}
.footer-logo .logo-text{color:#fff}
.footer-logo .logo-text span{color:var(--accent)}
.footer-grid h3{margin:.2rem 0 .6rem}
.footer-grid a{color:#cbd4de}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-top:1px solid #2a3240}

@media (min-width:981px){.nav-toggle{display:none}}
@media (max-width:980px){
  .hero-grid,.two-col{grid-template-columns:1fr}
  .site-nav{position:fixed;right:0;top:0;bottom:0;width:82%;max-width:360px;background:#fff;padding:1rem;display:block;transform:translateX(100%);transition:transform .25s ease;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.12);white-space:normal;z-index:45}
  .site-nav.is-open{transform:translateX(0)}
  .site-nav a{display:block;margin:.15rem 0;font-size:1.02rem}
  .header-cta-desktop{display:none}
  .nav-cta-mobile{display:inline-flex;margin-top:.6rem}
  .nav-toggle{display:inline-flex}
  body.menu-open{overflow:hidden}
  body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
}
@media (max-width:620px){
  .gallery .masonry{columns:1 260px}
  .menu .cards-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  .newsletter .nl-form{flex-direction:column}
  .nl-input{width:100%}
  .contact .contact-form{grid-template-columns:1fr}
}
.site-nav{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:nowrap;white-space:nowrap}
.site-nav a{padding:.46rem .6rem;border-radius:.6rem;font-weight:600;font-size:.95rem;line-height:1.1}
.site-nav a:hover{background:#f2f4f7}
.site-nav a.accent{color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.header-cta-desktop{display:inline-flex}
.nav-cta-mobile{display:none}
.nav-toggle{display:none;background:#f2f4f7;border:none;padding:.6rem .75rem;border-radius:.6rem}

@media (min-width:981px){
  .nav-toggle{display:none}
  .header-cta-desktop{display:inline-flex}
  .nav-cta-mobile{display:none}
}

@media (max-width:980px){
  .site-nav{position:fixed;right:0;top:0;bottom:0;width:82%;max-width:360px;background:#fff;padding:1rem;transform:translateX(100%);transition:transform .25s ease;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.12);white-space:normal;z-index:45}
  .site-nav.is-open{transform:translateX(0)}
  .site-nav a{display:block;margin:.15rem 0;font-size:1.02rem}
  .nav-toggle{display:inline-flex}
  .header-cta-desktop{display:none}
  .nav-cta-mobile{display:inline-flex;margin-top:.6rem}
  body.menu-open{overflow:hidden}
  body.menu-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}
}

/* --- FIX: mobile off-canvas overrides --- */
@media (max-width:980px){
  header.site-header .site-nav{
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 360px !important;
    background: #fff !important;
    padding: 1rem !important;
    display: block !important;      /* перекрываем display:flex */
    transform: translateX(100%) !important;
    transition: transform .25s ease;
    overflow: auto !important;
    box-shadow: -8px 0 24px rgba(0,0,0,.12);
    white-space: normal !important;
    z-index: 45 !important;
  }
  header.site-header .site-nav.is-open{ transform: translateX(0) !important; }
  header.site-header .site-nav a{
    display: block !important;
    margin: .15rem 0 !important;
    font-size: 1.02rem;
  }

  .nav-toggle{ display: inline-flex !important;
        width: max-content; }
  .header-cta-desktop{ display:none !important; }
  .nav-cta-mobile{ display:inline-flex !important; margin-top:.6rem; }

  body.menu-open{ overflow:hidden !important; }
  body.menu-open::after{
    content:"";
    position: fixed; inset:0;
    background: rgba(0,0,0,.35);
    z-index: 40;
  }
}

/* Burger: always on the right */
@media (max-width:980px){
  .header-grid{grid-template-columns:auto 1fr auto;align-items:center}
  .logo{grid-column:1}
  .nav-toggle{
    grid-column:3;
    justify-self:end;
    margin-left:auto;
  }
  .header-cta{display:none}
}
.how{position:relative}
.how h2{text-align:center;margin:0 0 1rem}
.how .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0 auto;max-width:980px}
.how .steps li{position:relative;background:#fff;border-radius:1rem;padding:1rem 1rem 1.1rem 1rem;box-shadow:0 10px 26px rgba(0,0,0,.06);display:flex;align-items:flex-start;gap:.8rem;min-height:82px;transition:transform .15s ease,box-shadow .15s ease}
.how .steps li:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
.how .steps li span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;background:var(--accent);font-weight:800;flex:0 0 38px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.how .steps li b{display:block;font-weight:800}
.how .steps li p{margin:.15rem 0 0;color:var(--muted)}
.how .steps li::after{content:"";position:absolute;inset:auto 1rem -6px 1rem;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(78,47,36,.12),rgba(78,47,36,.04))}
@media (max-width:980px){
  .how .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .how .steps{grid-template-columns:1fr}
}
.bg-paper{
  background-image:
    url("img/bg-paper-fiber.jpg"),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.testimonials h2{text-align:center;margin:0 0 1rem}
.testimonials .cards-grid.three{align-items:stretch}
.testimonials .quote{display:flex;flex-direction:column;gap:.5rem}
.testimonials .quote p{margin:0}
.testimonials .quote .stars{display:inline-flex;align-items:center;gap:.25rem;font-size:1rem;line-height:1;color:var(--accent)}
.testimonials .quote .stars .fa-star-half-stroke{transform:translateY(-.5px)}
.testimonials .quote .author{display:block;margin-top:.35rem;color:var(--muted);font-style:normal;font-weight:700}
@media (max-width:620px){
  .testimonials .quote{padding:1rem}
  .testimonials .quote .stars{font-size:1.05rem}
}
.corporate .text{max-width:560px}
.corporate .text h2{margin:0 0 .6rem;font-size:2rem;line-height:1.15;color:var(--choco)}
.corporate .text p{margin:.5rem 0 1rem;color:var(--ink)}
.corporate .text .checks{margin:1rem 0 1.25rem;gap:.5rem}
.corporate .text .checks li{display:flex;align-items:flex-start;gap:.55rem}
.corporate .text .checks i{color:var(--choco);margin-top:.15rem}
.corporate .text .btn{margin-top:.25rem}
@media (max-width:980px){
  .corporate .text{max-width:none}
  .corporate .text h2{font-size:1.7rem}
}
.bg-newsletter{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.9)),
    url("img/bg-newsletter.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.newsletter .newsletter-wrap{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1rem;
}

.newsletter .nl-form{
  justify-content: center;
}

.newsletter .nl-input{
  flex: 1;
  max-width: 420px;
}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;background:#ffffff;color:var(--ink);box-shadow:0 -12px 28px rgba(0,0,0,.12);z-index:1000;transform:translateY(100%);transition:transform .25s ease}
.cookie-banner.show{transform:translateY(0)}
.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem}
.cookie-text{display:flex;align-items:flex-start;gap:.75rem;max-width:760px}
.cookie-text i{font-size:1.2rem;color:var(--choco)}
.cookie-text p{margin:0}
.cookie-text a{text-decoration:underline}
.cookie-actions{display:flex;gap:.6rem}
@media (max-width:820px){
  .cookie-inner{flex-direction:column;align-items:stretch}
  .cookie-actions{justify-content:flex-end}
}