/* Caffè Alverto — strona główna
   Wszystkie klasy z prefiksem .alv- , żeby nie kolidowały z motywem.
   Skala typografii i odstępów oparta na clamp() — brak sztywnych wysokości. */

/* Tło i kolor tekstu z !important — motyw nadpisuje body własnymi regułami
   (np. body.page), które mają wyższą specyficzność niż samo .alv-page. */
html:has(body.alv-page){background:#090806}
body.alv-page{background:#090806 !important; color:#F5EAD8 !important}

.alv-page{
  --alv-ink:#090806; --alv-ink-2:#12100C; --alv-ink-3:#1B1610;
  --alv-gold:#D4A15B; --alv-cream:#F5EAD8;
  --alv-line:rgba(212,161,91,.22);
  --alv-display:"Fraunces",Georgia,serif;
  --alv-body:"Manrope",system-ui,-apple-system,sans-serif;
  --alv-pad:clamp(1.25rem,5vw,5rem);
  --alv-gap:clamp(2rem,5vw,4.5rem);

  margin:0; background:var(--alv-ink); color:var(--alv-cream);
  font-family:var(--alv-body); font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem); line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.alv-page *,.alv-page *::before,.alv-page *::after{box-sizing:border-box}
.alv-page img{max-width:100%; height:auto; display:block}
.alv-page a{color:inherit}
.alv-page h1,.alv-page h2,.alv-page h3{
  font-family:var(--alv-display); font-weight:400;
  /* opsz = rozmiar optyczny, WONK = charakterystyczne wygięcia liter */
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1;
  line-height:1.16;              /* wyżej: ogonki „j" i „y" nie wchodzą w tekst niżej */
  margin:0; letter-spacing:-.015em; color:var(--alv-cream);
  padding-bottom:.06em;          /* zapas na dolne wydłużenia */
}
.alv-page h1{font-size:clamp(2.6rem,1.5rem + 5.2vw,5.2rem)}
.alv-page h2{font-size:clamp(2rem,1.3rem + 3vw,3.4rem)}
.alv-page h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem)}
.alv-page p{margin:0 0 1.1em; color:inherit}
.alv-page a{color:inherit}
.alv-page ul,.alv-page ol{color:inherit}
.alv-page :focus-visible{outline:2px solid var(--alv-gold); outline-offset:3px}

.alv-wrap{max-width:1240px; margin-inline:auto; padding-inline:var(--alv-pad)}
.alv-section{padding-block:clamp(4rem,9vw,8rem); background:var(--alv-ink)}
.alv-section--alt{background:var(--alv-ink-2) !important}
.alv-head{max-width:52ch; margin-bottom:clamp(2.5rem,5vw,4rem)}
.alv-lead{color:rgba(245,234,216,.82); max-width:52ch}

.alv-eyebrow{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--alv-gold); font-weight:400; margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.9rem;
}
.alv-eyebrow::after{content:""; flex:1; height:1px; background:var(--alv-line); max-width:120px}

.alv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem; text-decoration:none;
  font-family:var(--alv-body); font-weight:500; font-size:.84rem; letter-spacing:.14em;
  text-transform:uppercase; padding:1.05rem 2.1rem;
  border:1px solid var(--alv-gold); color:var(--alv-gold) !important;
  background:transparent; cursor:pointer; transition:background .35s,color .35s,border-color .35s;
}
.alv-btn:hover,.alv-btn:focus-visible{background:var(--alv-gold); color:#090806 !important}
.alv-btn--solid{background:var(--alv-gold); color:#090806 !important; border-color:var(--alv-gold)}
.alv-btn--solid:hover,.alv-btn--solid:focus-visible{background:transparent; color:var(--alv-gold) !important}

/* ---------- nagłówek ---------- */
.alv-nav{position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,backdrop-filter .4s}
.alv-nav.is-stuck{background:rgba(9,8,6,.88); backdrop-filter:blur(14px); border-bottom-color:var(--alv-line)}
.alv-nav__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:clamp(.9rem,2vw,1.4rem)}
.alv-brand{display:block; text-decoration:none; flex:0 0 auto; line-height:0}
.alv-brand img{width:auto !important; height:clamp(44px,3.4vw + 1.6rem,74px) !important; max-width:260px; transition:height .4s ease}
.alv-nav.is-stuck .alv-brand img{height:clamp(38px,2.6vw + 1.4rem,56px) !important}
.alv-nav__links{display:none; gap:clamp(1.4rem,3vw,2.6rem); list-style:none; margin:0; padding:0}
@media(min-width:980px){ .alv-nav__links{display:flex} }
.alv-nav__links a{text-decoration:none; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(245,234,216,.78); position:relative; padding-block:.4rem; transition:color .3s}
.alv-nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--alv-gold); transition:right .35s}
.alv-nav__links a:hover,.alv-nav__links a:focus-visible{color:var(--alv-cream)}
.alv-nav__links a:hover::after,.alv-nav__links a:focus-visible::after{right:0}
.alv-nav__side{display:flex; align-items:center; gap:1.1rem; flex:0 0 auto}
.alv-cart{display:flex; align-items:center; gap:.55rem; text-decoration:none; font-size:.78rem;
  letter-spacing:.14em; color:rgba(245,234,216,.78); transition:color .3s}
.alv-cart:hover{color:var(--alv-gold)}
.alv-cart__count{display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem;
  padding-inline:.35rem; border-radius:999px; background:var(--alv-gold); color:var(--alv-ink);
  font-size:.7rem; letter-spacing:0}
.alv-burger{display:inline-grid; place-items:center; gap:5px; width:44px; height:44px;
  background:none; border:1px solid var(--alv-line); cursor:pointer; padding:0}
@media(min-width:980px){ .alv-burger{display:none} }
.alv-burger span{display:block; width:19px; height:1px; background:var(--alv-cream);
  transition:transform .3s,opacity .3s}
.alv-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.alv-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.alv-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* panel wysuwany z prawej — spójnie z resztą serwisu */
.alv-overlay{position:fixed; inset:0; z-index:69; background:rgba(9,8,6,.72);
  opacity:0; pointer-events:none; transition:opacity .35s ease}
.alv-overlay.is-open{opacity:1; pointer-events:auto}
.alv-drawer{position:fixed; top:0; right:0; bottom:0; z-index:70;
  width:min(340px,86vw); background:var(--alv-ink-2); border-left:1px solid var(--alv-line);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain}
.alv-drawer[data-open="true"]{transform:none}
.alv-drawer__in{padding:1.4rem clamp(1.25rem,5vw,1.8rem) 2.5rem; flex:1}
.alv-drawer__top{display:flex; justify-content:flex-end; padding-bottom:.6rem}
.alv-drawer__close{width:44px; height:44px; display:grid; place-items:center; padding:0;
  background:none; border:1px solid var(--alv-line); color:var(--alv-cream);
  font-size:1.3rem; line-height:1; cursor:pointer; transition:.3s}
.alv-drawer__close:hover{border-color:var(--alv-gold); color:var(--alv-gold)}
.alv-drawer ul{list-style:none; margin:0; padding:0}
.alv-drawer a{display:block; text-decoration:none; padding:1.05rem 0;
  border-bottom:1px solid var(--alv-line);
  font-family:var(--alv-display); font-size:1.2rem; color:var(--alv-cream)}
.alv-drawer li:last-child a{border-bottom:0}
.alv-drawer__foot{margin-top:2rem}
.alv-drawer__foot .alv-btn{width:100%}
body.alv-locked{overflow:hidden}
@media(min-width:980px){ .alv-drawer,.alv-overlay{display:none} }
@media(prefers-reduced-motion:reduce){ .alv-drawer,.alv-overlay{transition:none} }

/* ---------- hero ---------- */
.alv-hero{background:var(--alv-ink); position:relative; padding-block:clamp(2rem,5vw,4.5rem) clamp(3rem,7vw,7rem); overflow:hidden}
.alv-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 72% 45%, rgba(168,95,45,.30), transparent 70%)}
.alv-hero__grid{position:relative; display:grid; gap:var(--alv-gap); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .alv-hero__grid{grid-template-columns:1fr 1.02fr} }
/* H1 = fraza kluczowa w formie nadtytułu; wygląda jak dotychczasowy nadtytuł */
/* Wygląd 1:1 z dotychczasowym nadtytułem, który był akapitem:
   reguła .alv-page p nadawała mu kolor dziedziczony (krem) i margines 1.1em. */
.alv-page h1.alv-eyebrow{
  font-family:var(--alv-body); font-variation-settings:normal;
  font-size:.72rem; font-weight:400; line-height:1.75; letter-spacing:.32em;
  text-transform:uppercase; color:var(--alv-cream);
  margin:0 0 1.1em; padding:0;
}
/* slogan — największy element wizualny, semantycznie zwykły akapit */
/* .alv-page .alv-hero__slogan — musi przebić .alv-page p, inaczej dostaje margines akapitu */
.alv-page .alv-hero__slogan{
  font-family:var(--alv-display); font-weight:400;
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 1;
  font-size:clamp(2.6rem,1.5rem + 5.2vw,5.2rem);
  line-height:1.16; letter-spacing:-.015em; color:var(--alv-cream);
  margin:0; padding-bottom:.06em;
}
.alv-hero__slogan span{display:block; padding-bottom:.04em}
.alv-hero__slogan .alv-accent{color:var(--alv-gold)}
.alv-hero__lead{max-width:46ch; color:rgba(245,234,216,.82); margin-top:clamp(1.8rem,3vw,2.6rem)}
.alv-hero__cta{display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem}
.alv-marks{list-style:none; margin:2.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.8rem;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(245,234,216,.72)}
.alv-marks li{display:flex; align-items:center; gap:.55rem}
.alv-marks li::before{content:""; width:5px; height:5px; background:var(--alv-gold); transform:rotate(45deg)}
.alv-hero__img{margin-inline:calc(var(--alv-pad) * -.5)}
@media(min-width:900px){ .alv-hero__img{margin:0} }

/* ---------- skala ziaren (element sygnaturowy) ---------- */
.alv-meters{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.85rem}
.alv-meter{display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem}
.alv-meter__label{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,234,216,.68)}
.alv-pips{display:flex; gap:.34rem}
/* ziarno puste — przygaszone, żeby różnica względem wypełnionego była oczywista */
.alv-pip{width:12px; height:12px; position:relative;
  border:1px solid rgba(212,161,91,.32);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%; transform:rotate(-12deg);
  background:transparent; transition:background .3s, border-color .3s}
.alv-pip::after{content:""; position:absolute; inset:2px 4px;
  border-left:1px solid rgba(212,161,91,.32)}
/* ziarno wypełnione — pełne złoto z ciemnym przeszyciem */
.alv-pip--on{background:var(--alv-gold); border-color:var(--alv-gold)}
.alv-pip--on::after{border-left-color:rgba(9,8,6,.65)}

/* ---------- karty kaw ---------- */
.alv-duo{display:grid; gap:var(--alv-gap); grid-template-columns:1fr}
@media(min-width:880px){ .alv-duo{grid-template-columns:1fr 1fr} }
.alv-coffee{position:relative; padding:clamp(1.6rem,3vw,2.6rem); border:1px solid var(--alv-line);
  background:linear-gradient(180deg,var(--alv-ink-2),var(--alv-ink));
  display:flex; flex-direction:column; gap:1.2rem}
.alv-coffee__media{position:relative; text-align:center; margin-block:-1rem .4rem}
.alv-coffee__media img{margin-inline:auto; max-height:clamp(230px,34vw,360px); width:auto}
.alv-coffee__desc{color:rgba(245,234,216,.82); margin:0}
.alv-coffee__notes{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:.2rem 0 0}
.alv-coffee__notes li{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--alv-line); padding:.42rem .85rem; color:rgba(245,234,216,.75)}
.alv-coffee__foot{margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--alv-line)}
.alv-origin{font-size:.78rem; letter-spacing:.1em; color:rgba(245,234,216,.65); margin:0 0 1.1rem}
.alv-sizes{display:flex; gap:.6rem; margin:0 0 1.2rem}
.alv-size{flex:1; border:1px solid var(--alv-line); background:transparent; color:rgba(245,234,216,.78);
  font-family:var(--alv-body); font-weight:400; font-size:.86rem; letter-spacing:.08em;
  padding:.8rem .5rem; cursor:pointer; transition:.3s}
.alv-size[aria-pressed="true"]{border-color:var(--alv-gold); color:var(--alv-gold);
  background:rgba(212,161,91,.10); font-weight:500}
.alv-buyrow{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.alv-price{font-family:var(--alv-display); font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);
  color:var(--alv-cream); margin:0}
.alv-price del{opacity:.45; font-size:.7em; margin-right:.35em}
.alv-price ins{text-decoration:none}
.alv-more{margin:1.1rem 0 0; font-size:.8rem; letter-spacing:.1em}
.alv-more a{color:rgba(245,234,216,.68); text-decoration:none; transition:color .3s}
.alv-more a:hover{color:var(--alv-gold)}

/* ---------- pomoc w wyborze ---------- */
.alv-pick{display:grid; gap:var(--alv-gap); grid-template-columns:1fr}
@media(min-width:820px){ .alv-pick{grid-template-columns:1fr 1fr} }
.alv-pick__col{border-top:1px solid var(--alv-line); padding-top:1.6rem}
.alv-pick__col h3{margin-bottom:1.2rem}
.alv-pick__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.alv-pick__col li{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  color:rgba(245,234,216,.78)}
.alv-pick__col li::before{content:"—"; color:var(--alv-gold)}

/* ---------- B2B ---------- */
.alv-b2b{background:linear-gradient(180deg,var(--alv-ink),var(--alv-ink-3),var(--alv-ink))}
.alv-b2b__grid{display:grid; gap:var(--alv-gap); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .alv-b2b__grid{grid-template-columns:.9fr 1.1fr} }
.alv-b2b__list{list-style:none; margin:1.8rem 0; padding:0; display:grid; gap:.7rem; color:rgba(245,234,216,.75)}
.alv-b2b__list li{display:grid; grid-template-columns:auto 1fr; gap:.9rem}
.alv-b2b__list li::before{content:""; width:5px; height:5px; margin-top:.65em;
  background:var(--alv-gold); transform:rotate(45deg)}

/* ---------- opinie ---------- */
.alv-quotes{display:grid; gap:1.5rem; grid-template-columns:1fr}
@media(min-width:760px){ .alv-quotes{grid-template-columns:1fr 1fr} }
.alv-quote{margin:0; padding:1.8rem; border:1px solid var(--alv-line); background:var(--alv-ink-2)}
.alv-quote blockquote{margin:0 0 1.2rem; color:rgba(245,234,216,.82); font-size:1.02rem}
.alv-quote figcaption{font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--alv-gold)}

/* ---------- FAQ ---------- */
.alv-faq{display:grid; gap:0; border-top:1px solid var(--alv-line)}
.alv-faq details{border-bottom:1px solid var(--alv-line)}
.alv-faq summary{cursor:pointer; list-style:none; padding:1.4rem 0; display:flex; justify-content:space-between;
  gap:1.5rem; align-items:center; font-family:var(--alv-display);
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem)}
.alv-faq summary::-webkit-details-marker{display:none}
.alv-faq summary::after{content:"+"; color:var(--alv-gold); font-family:var(--alv-body); font-size:1.4rem; line-height:1}
.alv-faq details[open] summary::after{content:"-"}
.alv-faq p{color:rgba(245,234,216,.7); margin:0 0 1.4rem; max-width:70ch}

/* ---------- stopka ---------- */
.alv-footer{background:var(--alv-ink); border-top:1px solid var(--alv-line); padding-block:clamp(2.5rem,5vw,4rem);
  font-size:.85rem; color:rgba(245,234,216,.68)}
.alv-foot{display:grid; gap:2.5rem; grid-template-columns:1fr}
@media(min-width:700px){ .alv-foot{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .alv-foot{grid-template-columns:1.3fr 1fr 1fr 1fr} }
.alv-foot__logo{height:clamp(42px,4vw,54px) !important; width:auto !important; max-width:200px; margin-bottom:1.4rem; opacity:.85}
.alv-foot h4{font-family:var(--alv-body); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--alv-gold); margin:0 0 1rem; font-weight:400}
.alv-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.alv-foot a{text-decoration:none; transition:color .3s}
.alv-foot a:hover{color:var(--alv-gold)}
.alv-foot__legal{margin:0; line-height:1.9}
.alv-foot__legal b{font-weight:400; color:rgba(245,234,216,.8)}
.alv-foot__bar{margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid var(--alv-line);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.78rem; color:rgba(245,234,216,.55)}

/* ---------- odsłanianie przy scrollu ---------- */
.alv-rv{opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s ease}
.alv-rv.is-in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .alv-rv{opacity:1; transform:none; transition:none}
  .alv-brand img,.alv-nav{transition:none}
}

/* ukrycie elementów motywu, gdyby próbowały się wstrzyknąć */
.alv-page .site-header,.alv-page .site-footer,.alv-page #masthead,.alv-page #colophon{display:none !important}


/* ---------- potwierdzenie dodania do koszyka ---------- */
.alv-add.is-busy{pointer-events:none; opacity:.85}
.alv-add.is-done{background:var(--alv-gold); color:#090806 !important}
.alv-cart__count.is-bump{animation:alvBump .45s ease}
@keyframes alvBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

.alv-toast{
  position:fixed; z-index:200; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  width:min(360px, calc(100vw - 2rem));
  background:var(--alv-ink-2); border:1px solid var(--alv-line);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; transform:translateY(16px); transition:opacity .35s ease, transform .35s ease;
}
.alv-toast.is-open{opacity:1; transform:none}
.alv-toast__in{padding:1.4rem}
.alv-toast__head{margin:0 0 .35rem; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--alv-gold)}
.alv-toast__name{margin:0 0 1.2rem; font-family:var(--alv-display); font-size:1.15rem; color:var(--alv-cream)}
.alv-toast__cta{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.alv-toast__cta .alv-btn{padding:.8rem 1rem; font-size:.74rem; letter-spacing:.1em; text-align:center}
@media(max-width:420px){ .alv-toast__cta{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  .alv-toast{transition:none}
  .alv-cart__count.is-bump{animation:none}
}


/* ---------- pasek aktywnego rabatu (działa też poza stroną główną) ---------- */
.alv-couponbar{
  background:#D4A15B; color:#090806;
  font-family:"Manrope",system-ui,sans-serif; font-weight:400;
  font-size:clamp(.78rem,.72rem + .2vw,.9rem); letter-spacing:.04em;
  text-align:center; padding:.7rem 1rem; position:relative; z-index:60;
}
.alv-couponbar b{font-weight:500; letter-spacing:.1em}


/* notka o weryfikacji opinii (strona główna) */
.alv-page .alv-quotes__note{
  margin:clamp(1.5rem,3vw,2.2rem) 0 0; max-width:70ch;
  font-size:.82rem; line-height:1.6; color:rgba(245,234,216,.62);
}

/* link do konta w nagłówku: na telefonie sama ikona, na komputerze ikona i napis */
.alv-account-link{display:flex; align-items:center; gap:.45rem; text-decoration:none; font-size:.78rem;
  letter-spacing:.14em; color:rgba(245,234,216,.78); transition:color .3s; min-height:44px}
.alv-account-link:hover,.alv-account-link:focus-visible{color:var(--alv-gold)}
.alv-account-link svg{flex:0 0 auto}
.alv-account-link__txt{display:none}
@media(min-width:980px){ .alv-account-link__txt{display:inline} }

/* =====================================================================
   PRZYPIĘTY PASEK MENU na wszystkich stronach Caffè Alverto.
   "overflow:hidden" na html/body (nasze lub motywu) wyłączało przyklejanie.
   "overflow-x:clip" tak samo chowa poziome wystawanie, ale nie psuje sticky.
   ===================================================================== */
html:has(body.alv-page){overflow:visible !important; overflow-x:clip !important}
body.alv-page{overflow:visible !important; overflow-x:clip !important}
body.alv-page.alv-locked{overflow:hidden !important}
.alv-nav{position:sticky !important; top:0}
body.admin-bar .alv-nav{top:32px}
@media(max-width:782px){ body.admin-bar .alv-nav{top:46px} }
@media(max-width:600px){ body.admin-bar .alv-nav{top:0} }