/* MAXERA V41 — wspólny system responsywny
   Założenie: wygląd desktopowy 2560 px pozostaje punktem odniesienia.
   Zawartość ma maks. 1280 px i płynne marginesy; bez skalowania całej strony zoomem. */

:root{
  --page-max:1280px;
  --page-gutter:clamp(18px,3.125vw,40px);
  --space-section:clamp(48px,5.6vw,90px);
  --space-section-compact:clamp(34px,4vw,64px);
}

html{overflow-x:clip}
body{min-width:320px}
.container{
  width:min(var(--page-max),calc(100% - (var(--page-gutter) * 2)));
  margin-inline:auto;
}
img,video{max-width:100%;height:auto}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* Nagłówek — ten sam rytm na dużych ekranach, łagodniejsze zagęszczanie poniżej. */
.header-contact-stack{min-width:0}
.header-address,.header-quick-contact a{min-width:0}

/* Główna strona: nie zmieniamy maksymalnego rozmiaru desktopu, tylko płynność między breakpointami. */
.hero{
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,3.3vw,50px);
}
.hero-copy,.hero-visual,.about-team-copy,.section-head>*{min-width:0}
.about.about-team{gap:clamp(30px,4vw,64px)}
.section-head{gap:clamp(22px,3vw,40px)}
.product-grid,#productGrid{min-width:0}
.product-card,.product-body{min-width:0}
.product-body h3,.product-body p{overflow-wrap:anywhere}
.promo{gap:clamp(28px,4vw,60px);padding:clamp(30px,3.2vw,48px)}
.contact{gap:clamp(36px,6vw,90px)}
.footer-main{gap:clamp(30px,5vw,90px)}

/* Produkt: kolumny nie mogą wypychać kontenera poza ekran. */
.product-detail-card{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);
}
.product-gallery,.product-detail-copy,.related-tools-grid{min-width:0}
.detail-price-row{gap:clamp(16px,2vw,30px)}

/* Checkout: wcześniejsze zoom:.85 zastąpione normalnym layoutem o podobnej gęstości. */
.checkout-page.container{
  width:min(1088px,calc(100% - (var(--page-gutter) * 2)));
  padding-block:46px 76px;
}
.checkout-intro{max-width:650px;padding-bottom:41px}
.checkout-intro .back-link{margin-bottom:36px}
.checkout-intro h1{font-size:clamp(2.3rem,4.42vw,4.25rem)}
.checkout-intro>p:last-child{max-width:470px;font-size:1rem}
.checkout-list-panel{padding:26px}
.checkout-total-panel .checkout-summary-card{padding:27px}
.payment-panel{padding:24px 26px}

/* Checkout: odporność na długie nazwy, adresy i kwoty. */
.checkout-layout,.checkout-main-column,.checkout-total-panel,.checkout-list-panel{min-width:0}
.checkout-item-copy,.checkout-item-amount{min-width:0}
.checkout-item-copy h3,.checkout-item-copy p,.checkout-delivery-preview-copy{overflow-wrap:anywhere}

/* FAQ — zastępujemy globalne zoom:.9 właściwymi wymiarami komponentów.
   Zachowany jest wcześniejszy, ok. 10% bardziej kompaktowy charakter strony FAQ. */
.info-body .info-hero{padding-block:56px 43px}
.info-body .info-hero .back-link{margin-bottom:38px}
.info-body .info-hero h1{
  max-width:840px;
  margin:15px 0 22px;
  font-size:clamp(1.94rem,3.74vw,3.78rem);
  line-height:1.03;
}
.info-body .info-hero>p:last-child{max-width:648px;font-size:.956rem}
.info-body .info-jump-wrap{margin-bottom:43px}
.info-body .info-jump{
  width:min(882px,100%);
  margin:0;
}
.info-body .info-jump a{
  min-height:67px;
  padding:15px 16px;
  gap:13px;
  font-size:.731rem;
}
.info-body .info-jump span{font-size:.619rem}
.info-body .info-layout{padding-bottom:81px}
.info-body .info-layout-simple .info-content{width:min(882px,100%);margin-left:0;margin-right:auto}
.info-body .legal-section{padding-bottom:61px;margin-bottom:61px}
.info-body .info-content>.legal-accordion{
  padding-bottom:0;
  margin:0 0 9px;
}
.info-body .legal-kicker{font-size:.619rem}
.info-body .legal-section h2{font-size:clamp(1.8rem,3.15vw,2.93rem)}
.info-body .legal-section h3{font-size:1.1rem}
.info-body .legal-section p,.info-body .legal-section li{font-size:.855rem}
.info-body .faq-list{gap:9px}
.info-body .faq-list summary,
.info-body .legal-accordion>summary{padding:18px 20px;gap:18px}
.info-body .faq-list summary{font-size:.855rem}
.info-body .faq-list details>div{padding:18px 20px 3px}
.info-body .legal-summary-title{font-size:.855rem}
.info-body .document-accordion-content{padding:22px 18px 23px}

/* Średni desktop / laptop. Nagłówek przechodzi w dwa rzędy zanim zacznie się ściskać. */
@media(max-width:980px){
  html{scroll-padding-top:170px}
  .nav{
    flex-wrap:wrap;
    height:auto;
    min-height:96px;
    gap:0 18px;
    padding-block:12px 0;
  }
  .nav .logo{margin-right:auto}
  .site-header .header-contact-stack{
    order:5;
    flex:0 0 100%;
    width:100%;
    max-width:none;
    margin:10px 0 0;
    padding:8px 0 9px;
    border-top:1px solid var(--line);
    gap:2px;
  }
  .site-header .header-contact-stack .header-address{
    order:initial;
    flex:0 1 auto;
    width:auto;
    max-width:100%;
    margin:0;
    padding:1px 0 3px;
    border-top:0;
    justify-content:center;
    font-size:.82rem;
  }
  .header-quick-contact{width:100%;flex-wrap:wrap;justify-content:center;font-size:.82rem}
  .header-quick-contact a{padding:3px 9px}

  .about.about-team{grid-template-columns:1fr;gap:30px;padding-block:60px}
  .about-team-copy{max-width:700px}
  .maxera-brand-panel{margin-inline:auto}
  .checkout-total-panel{position:relative;top:auto}
}

/* Tablet: układy dwukolumnowe przechodzą w jeden czytelny tor. */
@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:32px;padding-block:44px}
  .hero-copy{max-width:700px}
  .hero h1{max-width:650px}
  .hero-text{max-width:590px}
  .hero-visual{width:100%;min-height:clamp(320px,65vw,460px);aspect-ratio:auto}
  .product-detail-card{grid-template-columns:1fr;gap:28px}
  .product-gallery{width:min(100%,650px);margin-inline:auto}
  .product-detail-copy{padding-top:6px}
  .checkout-layout{grid-template-columns:1fr}
}

@media(max-width:700px){
  html{scroll-padding-top:160px}
  .nav{min-height:78px;padding-block:12px 0}
  .hero{padding-block:36px}
  .hero-actions{gap:14px 20px}
  .category-strip .container{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{display:block}
  .section-head>p{max-width:100%;margin-top:18px}
  .promo{padding:28px}
  .footer-bottom{flex-wrap:wrap}

  .info-body .info-hero{padding-block:34px 31px}
  .info-body .info-hero .back-link{margin-bottom:29px}
  .info-body .info-hero h1{font-size:clamp(1.76rem,8.64vw,2.88rem)}
  .info-body .info-jump-wrap{margin-bottom:34px}
  .info-body .info-jump a{min-height:58px;padding:12px;font-size:.7rem}
  .info-body .info-layout{padding-bottom:52px}
  .info-body .legal-section{padding-bottom:43px;margin-bottom:43px}
  .info-body .faq-list summary,
  .info-body .legal-accordion>summary{padding:16px 17px}
}

@media(max-width:600px){
  .hero{padding-block:34px}
  .hero-visual{min-height:clamp(280px,72vw,390px)}
  .checkout-list-panel{padding:22px}
  .checkout-total-panel .checkout-summary-card{padding:22px}
  .payment-panel{padding:22px 17px}
}

@media(max-width:520px){
  :root{--page-gutter:18px}
  .hero-actions{align-items:stretch;flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero-actions .text-link{padding-block:6px}
  .hero-foot{gap:8px 16px}
  .hero-product{left:10px;right:10px;bottom:10px}
  .hero-product>div{min-width:0}
  .hero-product h2{overflow-wrap:anywhere}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkout-panel-head{align-items:flex-start}
  .detail-price-row{align-items:stretch;flex-direction:column}
  .detail-price-row .detail-add{width:100%;justify-content:center}
  .cart-panel{width:100%;padding:20px}
}

@media(max-width:360px){
  html{scroll-padding-top:185px}
}

@media(max-width:390px){
  .footer-links{grid-template-columns:1fr}
  .info-body .info-jump{grid-template-columns:1fr}
}

/* Wysokie DPI / ultrawide: celowo nie powiększamy treści ponad 1280 px.
   Większy monitor daje więcej oddechu po bokach, nie większe komponenty. */
@media(min-width:1600px){
  .container{width:var(--page-max)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important}
}

/* V43 — linia pod hero FAQ skrócona do tej samej szerokości co pasek 01–04 i kafelki. */
.info-body .info-hero{
  position:relative;
  border-bottom:0;
}
.info-body .info-hero::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:min(882px,100%);
  height:1px;
  background:var(--line);
}
