:root{
      --bg:#ffffff;
      --text:#121214;
      --muted: rgba(18,18,20,.68);

      --brand:#ff4fa3;
      --brandSoft:#ff9cce;
      --brand2:#22c55e;

      --radius:22px;
      --shadow: 0 14px 45px rgba(12, 12, 18, .08);
      --stroke: rgba(18,18,20,.10);
      --max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{ background: var(--bg); }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color:var(--text);
      background: var(--bg);
      line-height:1.5;
      overflow-x:hidden;
      position: relative;
    }

    
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(1200px 850px at 18% -10%, rgba(255,79,163,.16), transparent 62%),
        radial-gradient(1050px 780px at 86% 2%, rgba(34,197,94,.14), transparent 60%),
        radial-gradient(980px 760px at 45% 105%, rgba(255,79,163,.10), transparent 58%);
      filter: saturate(1.02);
    }
    body::after{
      content:"";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .04;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    }
    body > *{ position: relative; z-index: 1; }

    a{color:inherit; text-decoration:none}
    .container{max-width:var(--max); margin:0 auto; padding:0 20px}

    
    .topbar{
      position:sticky; top:0; z-index:40;
      backdrop-filter: blur(14px);
      background: rgba(255,255,255,.70);
      border-bottom: 1px solid var(--stroke);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:12px 0;
    }

    

    
    
    .topbar-inner{
      flex-wrap: nowrap;
      gap: clamp(8px, 1.2vw, 14px);
    }
    nav[aria-label="Hauptnavigation"]{
      display:flex;
      align-items:center;
      gap: clamp(8px, 1.2vw, 16px);
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .top-actions{
      display:flex;
      gap: clamp(6px, 1vw, 10px);
      align-items:center;
      flex-wrap: nowrap;
      justify-content: flex-end;
      white-space: nowrap;
    }
    .brand{min-width:0}
    .brand-text{min-width:0}
    .brand-name{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    
    .menu-btn{display:none}

    
    @media (max-width: 720px){
      nav[aria-label="Hauptnavigation"]{display:none;}
      .menu-btn{display:inline-flex;}
      .pill{display:none;}
      .topbar-inner{gap:10px;}
      .top-actions{flex: 1 1 auto; width:100%; justify-content:flex-end;}
    }

    @media (max-width: 420px){
      .logo{width:40px;height:40px;border-radius:14px;}
      .cta, .ghost{padding:9px 12px;}
      .lang-btn{width:38px;height:38px;}
    }
.cta, .ghost{padding:9px 12px;}
      .lang-btn{width:38px;height:38px;}
    }

.brand{
      display:flex; align-items:center; gap:12px;
      min-width: 240px;
    }
    .logo{
      width:46px;height:46px;border-radius:16px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.80), transparent 55%),
        linear-gradient(135deg, rgba(255,79,163,1), rgba(34,197,94,.85));
      box-shadow: 0 16px 40px rgba(255,79,163,.18);
      border:1px solid rgba(18,18,20,.08);
      flex: 0 0 auto;
    }
    .brand-text{line-height:1.05}
    .brand strong{display:block; letter-spacing:.2px; font-weight:950;}
    .brand span{display:block; font-size:12px; color:var(--muted)}
    .brand-name{font-size:16px; letter-spacing:-.2px; position:relative;}
    .brand-name::after{
      content:"";
      display:block;
      height:2px;
      width:34px;
      margin-top:6px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(255,79,163,1), rgba(34,197,94,.9));
      opacity:.85;
    }

    nav{display:flex; gap:16px; align-items:center}
    nav a{
      font-size:13px; color:var(--muted);
      padding:8px 10px; border-radius:999px;
      font-weight:700;
    }
    nav a:hover{background:rgba(255,79,163,.08); color:var(--text)}

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border:1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      border-radius:999px; font-size:13px; color:var(--muted);
      white-space:nowrap;
      backdrop-filter: blur(10px);
    }
    .dot{
      width:8px;height:8px;border-radius:999px;
      background: var(--brand2);
      box-shadow:0 0 0 4px rgba(34,197,94,.14)
    }

    .cta{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(18,18,20,.10);
      background: linear-gradient(135deg, rgba(255,79,163,1), rgba(255,156,206,1));
      color:#ffffff;
      font-weight:800;
      box-shadow: 0 18px 55px rgba(255,79,163,.22);
      transition: transform .15s ease;
    }
    .cta:hover{transform: translateY(-1px)}
    .ghost{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      color:var(--text);
      font-weight:700;
      transition: transform .15s ease, background .15s ease;
    }
    .ghost:hover{background:rgba(255,255,255,.75); transform: translateY(-1px)}
    .menu-btn{display:none}

    
    .lang{display:inline-flex; gap:8px; align-items:center; margin-left:2px;}
    .lang-btn{
      width:40px;height:40px;border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.65);
      cursor:pointer;
      font-size:18px; line-height:1;
      display:inline-flex; align-items:center; justify-content:center;
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .lang-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.85);}
    .lang-btn.active{
      border-color: rgba(255,79,163,.28);
      box-shadow: 0 0 0 4px rgba(255,79,163,.12);
    }

    
    .hero{padding: 44px 0 10px;}
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items:stretch;
    }
    .card{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.60);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 20px 60px rgba(12, 12, 18, .10);
      border-color: rgba(255,79,163,.18);
    }
    .hero-main{
      padding: 28px;
      position:relative;
      overflow:hidden;
      min-height: 360px;
      background: rgba(255,255,255,.55);
    }
    .glow{
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.10));
      pointer-events:none;
    }

    h1, h2{ letter-spacing: -0.7px; }
    h1{
      margin:0 0 10px;
      font-size: clamp(28px, 3.8vw, 44px);
      line-height:1.08;
      font-weight:900;
      position:relative;
    }
    h2{ font-weight:900; margin:0; font-size: clamp(20px, 2.4vw, 28px); }
    h3{ margin:0; }

    .tag{
      display:inline-flex; align-items:center; gap:8px;
      font-size:12px; color:var(--muted);
      padding:6px 10px; border-radius:999px;
      background: rgba(255,255,255,.65);
      border:1px solid var(--stroke);
      backdrop-filter: blur(10px);
      position:relative;
      z-index:1;
    }
    .lead{
      margin:0 0 18px;
      max-width: 62ch;
      color: var(--muted);
      position:relative;
      font-size: 16px;
      line-height: 1.6;
    }
    .hero-actions{display:flex; gap:10px; flex-wrap:wrap; position:relative; margin-top:10px;}
    .kpis{display:flex; gap:10px; flex-wrap:wrap; position:relative; margin-top:18px;}
    .kpi{
      padding:12px 14px;
      border-radius: 16px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.60);
      min-width: 160px;
      box-shadow: 0 10px 30px rgba(12, 12, 18, .05);
    }
    .kpi b{display:block; font-size:15px; font-weight:900;}
    .kpi span{display:block; font-size:12px; color:var(--muted)}

    .hero-side{padding:18px; display:flex; flex-direction:column; gap:12px; min-height:360px;}
    .about{
      padding:16px;
      border-radius: 18px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.62);
      backdrop-filter: blur(10px);
    }
    .about-head{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:10px;
    }
    .badge{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      color:var(--muted);
      background: rgba(255,255,255,.60);
      backdrop-filter: blur(10px);
      white-space:nowrap;
    }
    .about-grid{
      display:grid;
      grid-template-columns: 72px 1fr;
      gap:12px;
      align-items:start;
    }
    .avatar{
      width:72px; height:72px;
      border-radius: 20px;
      border:1px solid var(--stroke);
      background:
        radial-gradient(120px 90px at 30% 30%, rgba(255,255,255,.85), transparent 60%),
        linear-gradient(135deg, rgba(255,79,163,.18), rgba(34,197,94,.14));
      overflow:hidden;
    }
    .avatar img{width:100%; height:100%; object-fit:cover; display:block; transform: scale(1); transition: transform .22s ease;}
    .about:hover .avatar img{transform: scale(1.04);}
    .note{margin:0; color:var(--muted); font-size:13px}
    .about-points{
      margin:10px 0 0;
      padding-left:18px;
      color:var(--muted);
      font-size:13px;
    }
    .about-points li{margin:6px 0}

    
    section{padding: 34px 0}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px;}
    .sub{margin:0; color:var(--muted); max-width:68ch; font-size:14px;}

    
    .grid-4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .service{
      padding:18px;
      position:relative;
      overflow:hidden;
      min-height: 190px;
    }
    .service:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(380px 260px at 20% 25%, rgba(255,79,163,.14), transparent 60%),
        radial-gradient(360px 240px at 85% 35%, rgba(34,197,94,.12), transparent 62%);
      opacity:.9;
      pointer-events:none;
      filter: blur(12px);
    }
    .service > *{position:relative}
    .service h3{margin:10px 0 6px; font-size:18px}
    .service p{margin:0 0 12px; color:var(--muted); font-size:14px}
    .service ul{margin:0; padding-left:18px; color:var(--muted); font-size:13px}
    .service li{margin:6px 0}

    
    .gallery{display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
    .ph{
      border:1px solid var(--stroke);
      border-radius: 18px;
      background:
        radial-gradient(220px 160px at 30% 30%, rgba(255,255,255,.90), transparent 65%),
        linear-gradient(135deg, rgba(255,79,163,.12), rgba(34,197,94,.10));
      aspect-ratio: 4 / 3;
      position:relative;
      overflow:hidden;
    }
    .ph:after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(280px 220px at 65% 70%, rgba(255,79,163,.08), transparent 60%);
      opacity:.9;
    }
    .ph img{
      width:100%; height:100%; object-fit:cover; display:block;
      transform: scale(1);
      transition: transform .22s ease;
      position: relative; z-index: 1;
    }
    .ph:hover img{ transform: scale(1.04); }
    .span2{grid-column: span 2}
    .span3{grid-column: span 3}

    
    .testi{padding:18px}
    .quote{margin:0; color:var(--text); font-size:14px;}
    .who{
      margin-top:10px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      color:var(--muted);
      font-size:12px;
    }
    .stars{letter-spacing:1px; opacity:.9}

    
    .price-grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 12px;
      align-items:start;
    }
    .price-card{padding:18px}
    .table{width:100%; border-collapse:separate; border-spacing:0 10px; font-size:14px;}
    .row{background: rgba(255,255,255,.65); border:1px solid var(--stroke); border-radius: 16px; overflow:hidden;}
    .table td{padding:12px 12px; color:var(--muted);}
    .table td:first-child{color:var(--text); font-weight:800}
    .table td:last-child{text-align:right; font-weight:900; color:var(--text)}
    .small{font-size:12px; color:var(--muted); margin-top:10px}
    .sub:empty{display:none}
    .small:empty{display:none}

    
    .faq{padding:18px}
    details{border:1px solid var(--stroke); background: rgba(255,255,255,.65); border-radius: 16px; padding: 12px 14px;}
    details + details{margin-top:10px}
    summary{cursor:pointer; font-weight:900; list-style:none;}
    summary::-webkit-details-marker{display:none}
    details p{margin:10px 0 0; color:var(--muted); font-size:13px}

    
    .contact{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:stretch;}
    .contact-card{padding:18px}
    .contact-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
    .contact-name{display:block; font-weight: 900; font-size: 18px;}
    .map-shell{
      border:1px solid var(--stroke);
      border-radius: 18px;
      overflow:hidden;
      background: rgba(255,255,255,.65);
      aspect-ratio: 16 / 10;
      position: relative;
    }
    .map-shell iframe{width:100%; height:100%; border:0; display:block;}
    .map-placeholder{
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      padding:18px;
      gap:10px;
    }
    .map-badge{
      display:inline-flex;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.70);
      font-size:12px;
      color: var(--muted);
      font-weight:800;
      backdrop-filter: blur(10px);
    }
    .map-text{ margin:0; color: var(--muted); font-size:13px; max-width: 52ch; }


    
    .cosmetics-card{padding:0; overflow:hidden}
    .cosmetics-grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:0;}
    .cosmetics-img{border-right:1px solid var(--stroke); background: rgba(255,255,255,.40); min-height: 280px;}
    .cosmetics-img img{width:100%; height:100%; object-fit:cover; display:block; transform: scale(1); transition: transform .22s ease;}
    .cosmetics-card:hover .cosmetics-img img{transform: scale(1.03);}
    .cosmetics-body{padding:18px}
    .cosmetics-list{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:13px;}
    .cosmetics-list li{margin:6px 0}
    @media (max-width: 920px){
      .cosmetics-grid{grid-template-columns:1fr}
      .cosmetics-img{border-right:none; border-bottom:1px solid var(--stroke); min-height:220px}
    }


    
    
    .reviews-carousel{position: relative;}
    #revViewport{
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: var(--radius);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
    }
    #revViewport::-webkit-scrollbar{display:none}
    #revViewport.is-dragging{cursor: grabbing;}

    #revTrack{
      display:flex;
      gap: 12px;
      align-items:stretch;
      padding: 2px;
    }

    .review-card{flex: 0 0 min(420px, 86vw); min-height: 210px;}
    .review-card .quote{
      margin:0;
      color:var(--text);
      font-size:14px;
      max-height: 170px;
      overflow:auto;
      padding-right:6px;
      user-select: text;
    }
    .review-card .quote::-webkit-scrollbar{width:8px}
    .review-card .quote::-webkit-scrollbar-thumb{background: rgba(18,18,20,.18); border-radius:999px}



    .one-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

    
    #revViewport{cursor: grab;}
    #revViewport.is-dragging{cursor: grabbing;}
    #revViewport{user-select:none;}
    #revViewport .quote{user-select:text;} 


    
    footer{
      padding: 24px 0 40px;
      color: var(--muted);
      border-top: 1px solid var(--stroke);
      background: rgba(255,255,255,.55);
      margin-top: 26px;
    }
    .footer-grid{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
    .links{display:flex; gap:10px; flex-wrap:wrap}
    .links a{font-size:13px; padding:8px 10px; border:1px solid var(--stroke); border-radius:999px; background: rgba(255,255,255,.65);}
    .links a:hover{background:rgba(255,255,255,.85)}

    
    .sticky-cta{
      position:fixed;
      left: 12px; right: 12px; bottom: 12px;
      display:none;
      gap:10px;
      z-index:60;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .sticky-cta .cta, .sticky-cta .ghost{flex:1}

    
    @media (max-width: 1024px){
      .grid-4{grid-template-columns: repeat(2, 1fr);}
    }
    @media (max-width: 920px){
      .hero-grid{grid-template-columns:1fr}
      .hero-main{min-height:auto}
      .hero-side{min-height:auto}
      .price-grid{grid-template-columns:1fr}
      .grid-4{grid-template-columns:1fr}
      .gallery{grid-template-columns: repeat(2, 1fr)}
      .span2, .span3{grid-column: span 1}
      .contact{grid-template-columns:1fr}
      nav{display:none}
      .menu-btn{display:inline-flex}
      .sticky-cta{display:flex}
      .pill{display:none}
    }

    
    .drawer{position:fixed; inset:0; z-index:80; display:none; background: rgba(18,18,20,.18); backdrop-filter: blur(8px);}
    .drawer.open{display:block}
    .panel{
      position:absolute; right:12px; top:12px; left:12px;
      border-radius: 22px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.82);
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .panel a{
      display:block;
      padding:12px 12px;
      border-radius: 14px;
      color:var(--text);
      border:1px solid rgba(18,18,20,.10);
      background: rgba(255,255,255,.70);
      margin-top:10px;
      font-weight:800;
    }
    .panel a:hover{background:rgba(255,255,255,.90)}
    .panel .x{
      width:100%;
      margin-top:12px;
      padding:12px 12px;
      border-radius: 14px;
      border:1px solid rgba(18,18,20,.12);
      background: rgba(255,255,255,.60);
      color:var(--muted);
      cursor:pointer;
      font-weight:800;
    }
    .panel .x:hover{background:rgba(255,255,255,.85); color:var(--text)}
  
    
    header .topbar-inner{gap: clamp(8px, 1.4vw, 18px);}
    header nav[aria-label="Hauptnavigation"]{display:flex; align-items:center; gap: clamp(8px, 1.2vw, 16px);}
    header nav[aria-label="Hauptnavigation"] a{padding: 8px clamp(6px, 1vw, 12px);}
    
    .menu-btn{display:none;}
header .top-actions{gap: clamp(8px, 1.2vw, 14px);}

    
    #revViewport{
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
      border-radius: var(--radius);
    }
    #revViewport::-webkit-scrollbar{display:none}
    #revViewport.is-dragging{cursor: grabbing;}
    #revTrack{
      display:flex;
      gap: 12px;
      align-items: stretch;
      padding: 2px;
      width: max-content;
    }
    .review-card{
      flex: 0 0 min(420px, 86vw);
      min-height: 210px;
    }
    
    #revViewport .quote{user-select:text; max-height:170px; overflow:auto; padding-right:6px;}
    #revViewport .quote::-webkit-scrollbar{width:8px}
    #revViewport .quote::-webkit-scrollbar-thumb{background: rgba(18,18,20,.18); border-radius:999px}


    

    
    #revViewport{
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
    }
    #revViewport::-webkit-scrollbar{display:none !important}
    #revTrack{
      display:flex !important;
      flex-direction: row !important;
      gap:12px !important;
      align-items:stretch !important;
      padding:2px !important;
      width:max-content !important;
    }
    .review-card{flex:0 0 min(420px, 86vw) !important;}

    
    header nav[aria-label="Hauptnavigation"]{
      gap: 8px !important;
    }
    header nav[aria-label="Hauptnavigation"] a{
      padding: 8px 8px !important;
    }

    
    .brand-name{
      display:block;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .brand-text{min-width:0}
    .brand-sub{
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    
    @media (max-width: 900px){
      .brand-sub{display:none !important;}
    }

    
    @media (max-width: 720px){
      header nav[aria-label="Hauptnavigation"]{display:none !important;}
      .menu-btn{display:inline-flex !important;}
    }
.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:stretch}
@media (max-width: 920px){.grid-2{grid-template-columns:1fr}}
.img-card{padding:0; overflow:hidden}
.img-card img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}
.list{margin:12px 0 0; padding-left: 18px}
.list li{margin:8px 0}

#revViewport{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none}
#revViewport::-webkit-scrollbar{display:none}
#revTrack{display:flex; gap:12px; width:max-content}
.review-card{flex:0 0 min(420px,86vw)}

/* Cosmetics section: badge + merged card with gradient */
#kosmetyki .badge{display:inline-flex;width:fit-content;align-self:flex-start}
#kosmetyki .grid-2{gap:0;border:1px solid var(--stroke);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,rgba(255,192,203,.16),rgba(144,238,144,.12),rgba(255,255,255,.62))}
#kosmetyki .grid-2>.card{border:0;background:transparent;box-shadow:none;backdrop-filter:blur(14px)}
#kosmetyki .grid-2>.card:first-child{padding:20px}
#kosmetyki .img-card{padding:0}
#kosmetyki .img-card img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;border-radius:inherit}
#kosmetyki .list{margin-top:12px}
#kosmetyki .list li{margin:8px 0}

/* Header: logo always visible, name not truncated on wide screens */
.brand{min-width:0;flex:0 0 auto;display:flex;align-items:center;gap:12px}
.logo{flex:0 0 auto}
.brand-text{min-width:0}
@media (min-width:721px){
  .brand-name{overflow:visible;text-overflow:clip;max-width:none}
}
@media (max-width:520px){
  .brand-name{overflow:hidden;text-overflow:ellipsis;max-width:58vw}
}
@media (max-width:900px){
  .brand-sub{display:none !important}
}
.brand,.logo{display:flex !important;visibility:visible !important;opacity:1 !important}


/* Lightbox (image zoom) */
.lightbox{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(12,12,18,.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9999;
}
.lightbox.open{
  opacity: 1;
  pointer-events: auto;
}
.lightbox-img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  background: rgba(255,255,255,.06);
}
.lightbox-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-close:hover{
  background: rgba(255,255,255,.18);
}
.gallery img,
.img-card img,
.avatar img{
  cursor: zoom-in;
}


/* Fix: topbar overflow on small screens (PL text is longer) */
@media (max-width: 520px){
  .brand{
    min-width: 0;
    flex: 1 1 auto;
  }
  .top-actions{
    flex: 0 0 auto;
  }
  /* Na bardzo wąskich ekranach chowamy CTA w topbarze,
     bo i tak jest sticky-cta na dole */
  .top-actions > a.cta{
    display: none;
  }
  .brand-name{
    max-width: 55vw;
  }
}
@media (max-width: 380px){
  .brand-name{ max-width: 48vw; }
}


/* Mobile header: zawsze pokazuj nazwę "Ruta Beauty Concept" */
@media (max-width: 720px){
  .topbar-inner{justify-content: space-between;}
  .brand{min-width:0 !important; flex:1 1 auto;}
  .brand-name{
    max-width: 62vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-actions{flex:0 0 auto !important; width:auto !important; justify-content:flex-end;}
}
@media (max-width: 380px){
  .brand span{display:none;}
  .brand-name{max-width:54vw;}
}

/* Fix: sticky CTA na mobile nie może poszerzać strony */
.sticky-cta{
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
}
.sticky-cta .cta,
.sticky-cta .ghost{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px){
  .sticky-cta{gap: 8px;}
  .sticky-cta .cta,
  .sticky-cta .ghost{
    padding: 10px 10px;
    font-size: 14px;
  }
}

/* Footer: copyright + privacy w jednej linii */
footer .footnote{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size:12px;
  margin-top:6px;
}
footer .footnote .legal{white-space: nowrap;}
@media (max-width: 420px){
  footer .footnote{justify-content:flex-start;}
}

/* Desktop: wszystkie kafelki galerii mają identyczny rozmiar */
@media (min-width: 921px){
  .gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .gallery .ph{
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
  }

  .gallery .ph > img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile: zostaw miejsce na sticky CTA, żeby nie zasłaniała stopki */
@media (max-width: 920px){
  body{
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 420px){
  body{
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}


/* === Custom adjustments (2026-02) === */

/* Header logo: lotus mark */
.brand-logo{
  display:block;
  line-height:0;
  flex:0 0 auto;
}
.brand-logo img{
  height:44px;
  width:auto;
  display:block;
}
@media (max-width: 720px){
  .brand-logo img{ height:36px; }
}

/* Desktop gallery: all images same size (ignore span classes) */
@media (min-width: 921px){
  .gallery .ph{
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .gallery .ph > img{
    width:100%;
    height:100%;
    display:block;
    object-fit: cover;
    object-position: center;
  }
}

/* Mobile: ensure no leftover bottom padding from old sticky CTA */
@media (max-width: 920px){
  body{ padding-bottom: 0 !important; }
  .sticky-cta{ display:none !important; }
}


/* Pricing */
.pricing-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 kolumny = 2 rzędy */
}

.price-card h3{
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .2px;
}

.price-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.price-list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(20,20,30,.12);
}

.price-list li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.price-list span{
  min-width: 0;
}

.price-list b{
  white-space: nowrap;
  font-weight: 700;
}

.pricing-cta{
  margin-top: 16px;
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: start;
}

.pricing-cta .tiny{
  margin: 0;
  opacity: .7;
  font-size: 12px;
}

@media (max-width: 920px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

/* Pricing: kompaktowa karta PMU na desktop (żeby dół kafelków się wyrównał) */
@media (min-width: 921px){
  .price-card--compact{
    padding: 12px;
  }
  .price-card--compact .price-list{
    gap: 6px;
  }
  .price-card--compact .price-list li{
    padding-bottom: 6px;
  }
  .price-card--compact h3{
    margin-bottom: 8px;
  }
}

/* Mobile: pełna nazwa bez ucinania – "Concept" w drugiej linii */
@media (max-width: 720px){
  .brand-text{ min-width: 0; }
  .brand-name{
    font-size: 15px;
    line-height: 1.05;
    white-space: normal;
  }
  .brand-concept{
    display: block;
    line-height: 1.05;
    margin-top: -1px;
  }
  .brand-sub{ display: none; }
  .topbar-inner{ padding: 8px 0; }
}

/* Desktop: Kosmetik zajmuje 2 rzędy, żeby dół Fußpflege = dół Kosmetik */
@media (min-width: 921px){
  .price-card--span2{ grid-row: span 2; }
}