@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&display=swap");
:root{--gold:#ddbb74;--white:#f8f7f3;--muted:rgba(248,247,243,.68);--bg:#11100e;--sans:"Segoe UI","Helvetica Neue",Arial,sans-serif;--serif:"Cormorant Garamond",Garamond,"Times New Roman",serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--sans);background:#11100e;color:#fff}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.guide{position:relative;min-height:100svh;overflow:hidden}.background{position:fixed;inset:0;background:url("assets/dom-tlo.jpg") center 48%/cover no-repeat}.overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.10),rgba(5,5,5,.13) 25%,rgba(7,6,5,.28) 51%,rgba(7,6,5,.70))}
.home{position:relative;z-index:1;min-height:100svh;width:min(100%,520px);margin:auto;padding:max(22px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.brand{text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.72)}.brand-logo{display:block;width:82px;height:auto;margin:0 auto 25px}.welcome-word{color:var(--gold);font-size:20px;font-weight:300;letter-spacing:.42em;padding-left:.42em}.guide-title{margin:14px 0 0;font-family:var(--serif);font-size:45px;line-height:.96;font-weight:400;letter-spacing:.015em}.welcome-copy{margin:18px auto 0;color:rgba(248,247,243,.90);font-size:16px;line-height:1.38;font-weight:300}.welcome-copy span{color:var(--gold)}
.status{margin:10px auto 0;padding:7px 10px;border:1px solid rgba(221,187,116,.35);border-radius:10px;background:rgba(10,9,8,.62);font-size:10px;text-align:center}.status.ready{display:none}.status.error{background:rgba(87,35,35,.82)}
.tiles{margin:112px 0 0;padding:0 7px;display:grid;grid-template-columns:1fr 1fr;gap:11px}.tile{aspect-ratio:1;border:1px solid rgba(221,187,116,.72);border-radius:21px;background:rgba(13,12,10,.22);color:#fff;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 10px;text-shadow:0 1px 8px rgba(0,0,0,.70)}.tile:active{transform:scale(.97)}.tile-icon{width:88px;height:88px;display:grid;place-items:center;margin-bottom:8px}.tile-icon svg,.help-icon svg{fill:none;stroke:var(--gold);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.tile-icon svg{width:72px;height:72px}.tile-title{font-size:16px;font-weight:300;letter-spacing:.08em;text-align:center}.tile-sub{max-width:130px;margin-top:5px;color:rgba(248,247,243,.82);font-size:10.5px;line-height:1.28;font-weight:300;text-align:center}
.bottom-actions{margin-top:auto;padding:12px 7px 0}.rules-btn,.help-btn{width:100%;color:#fff}.rules-btn{min-height:58px;border:1px solid rgba(221,187,116,.72);border-radius:18px;background:rgba(13,12,10,.25);display:grid;grid-template-columns:42px 1fr 24px;align-items:center;gap:8px;padding:8px 12px;font-size:11px;letter-spacing:.09em}.rules-icon{width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-size:20px}.arrow,.chev{color:var(--gold);font-family:Georgia,serif;font-size:28px;font-weight:300}.help-btn{min-height:69px;margin-top:10px;padding:7px 12px;border:0;background:transparent;display:grid;grid-template-columns:48px 1fr 24px;align-items:center;gap:10px;text-align:left}.help-icon{width:43px;height:43px;display:grid;place-items:center}.help-icon svg{width:39px;height:39px;stroke:#fff}.help-copy strong{display:block;font-size:16px;font-weight:300}.help-copy small{display:block;margin-top:4px;color:rgba(248,247,243,.75);font-size:10px}
.sheet{position:fixed;z-index:100;inset:0;background:#11100e;overflow:hidden}.sheet-card{position:absolute;inset:0;overflow:auto;background:#11100e}.close{position:absolute;z-index:50;top:max(12px,env(safe-area-inset-top));right:14px;width:36px;height:36px;border:0;background:transparent;color:transparent;font-size:0}.close:before,.close:after{content:"";position:absolute;left:50%;top:50%;width:19px;height:1px;background:var(--gold);opacity:.9}.close:before{transform:translate(-50%,-50%) rotate(45deg)}.close:after{transform:translate(-50%,-50%) rotate(-45deg)}
.page-view{min-height:100%;display:flex;flex-direction:column}.page-hero{height:245px;position:relative;flex:0 0 245px;background-position:center;background-size:cover}.hero-house{background-image:url("assets/dom-tlo.jpg")}.hero-sauna{background-image:url("assets/spa-tlo.jpg")}.hero-forest{background-image:url("assets/okolica-tlo.png")}.hero-info,.hero-help{background-image:url("assets/dom-tlo.jpg")}.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,9,8,.04) 10%,rgba(17,16,14,.18) 48%,#11100e 100%)}.page-heading{position:absolute;z-index:2;left:20px;right:54px;bottom:20px;display:flex;align-items:center;gap:13px}.page-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px}.page-icon svg,.menu-icon svg,.subpage-title svg{fill:none;stroke:var(--gold);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}.page-icon svg{width:43px;height:43px}.page-heading h2{margin:0;font-size:22px;line-height:1.05;font-weight:500;letter-spacing:.07em}.page-heading p{margin:5px 0 0;color:var(--muted);font-size:10px;font-weight:300}
.menu-card{margin:-2px 14px 0;border:1px solid rgba(221,187,116,.34);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.045)}.menu-row{width:100%;min-height:68px;padding:11px 12px;border:0;border-bottom:1px solid rgba(221,187,116,.20);background:transparent;color:#fff;display:flex;align-items:center;gap:12px;text-align:left}.menu-row:last-child{border-bottom:0}.menu-row:active{background:rgba(221,187,116,.07)}.menu-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px}.menu-icon svg{width:30px;height:30px}.menu-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.menu-copy strong{font-size:13.5px;font-weight:500}.menu-copy small{color:rgba(248,247,243,.56);font-size:8.8px;font-weight:300}.chev{flex:0 0 18px}
.stack{padding:0 14px}.content-card{margin:0 0 11px;padding:17px;border:1px solid rgba(221,187,116,.28);border-radius:17px;background:rgba(255,255,255,.05)}.content-card h3{margin:0 0 8px;font-size:16px;font-weight:500}.content-card p{margin:0;color:rgba(248,247,243,.75);font-size:11px;line-height:1.55;font-weight:300}.content-card ul{margin:12px 0 0;padding:0;list-style:none}.content-card li{position:relative;padding:8px 0 8px 17px;border-top:1px solid rgba(221,187,116,.13);color:rgba(248,247,243,.76);font-size:10.5px;line-height:1.48;font-weight:300}.content-card li:before{content:"";position:absolute;left:1px;top:14px;width:4px;height:4px;border-radius:50%;background:var(--gold)}.soft-note{margin-top:12px;padding:10px 11px;border-left:1px solid var(--gold);background:rgba(221,187,116,.06);color:rgba(248,247,243,.62);font-size:9.5px;line-height:1.45}
.signoff{flex:1 0 105px;min-height:105px;padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.signoff img{width:52px;height:auto;opacity:.23}.signoff p{max-width:250px;margin:10px 0 0;color:rgba(221,187,116,.46);font-size:9px;line-height:1.5;font-weight:300}
.subpage{min-height:100%;padding:max(14px,env(safe-area-inset-top)) 14px 18px;display:flex;flex-direction:column}.back-btn{align-self:flex-start;margin:0 0 16px;padding:7px 2px;border:0;background:transparent;color:var(--gold);font-size:22px}.back-btn span{margin-left:4px;font-size:10px;letter-spacing:.14em;vertical-align:2px}.subpage-title{display:flex;align-items:center;gap:12px;margin:0 4px 18px}.subpage-title>span{width:43px;height:43px;display:grid;place-items:center}.subpage-title svg{width:34px;height:34px}.subpage-title h2{margin:0;font-size:18px;font-weight:500}.subpage-title p{margin:4px 0 0;color:var(--muted);font-size:9px}.subpage .content-card{margin-bottom:11px}
.field{width:100%;margin-top:9px;padding:12px;border:1px solid rgba(221,187,116,.30);border-radius:11px;background:rgba(255,255,255,.07);color:#fff;outline:none}.field::placeholder{color:rgba(255,255,255,.48)}textarea.field{min-height:90px;resize:vertical}.gold-btn{width:100%;margin-top:11px;padding:11px 12px;border:1px solid rgba(221,187,116,.50);border-radius:11px;background:rgba(221,187,116,.13);color:#fff;font-size:10px;font-weight:500;letter-spacing:.07em}.gold-btn:disabled{opacity:.45}.issue-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 2px}.issue-type{padding:10px 7px;border:1px solid rgba(221,187,116,.30);border-radius:10px;background:rgba(255,255,255,.05);color:#eee9df;font-size:9px}.issue-type.active{background:rgba(221,187,116,.17);border-color:var(--gold)}.phone-link{display:block;margin-top:12px;padding:11px;border-top:1px solid rgba(221,187,116,.22);color:var(--gold);font-size:10px;font-weight:500;text-align:center;text-decoration:none}
.wifi-view{font-family:var(--sans);padding:16px 14px 18px}.wifi-hero{text-align:center;padding:2px 8px 12px}.wifi-hero>span{width:58px;height:58px;margin:auto;display:grid;place-items:center}.wifi-hero svg{width:52px;height:52px;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round}.wifi-hero h2{margin:3px 0 0;font-size:17px;font-weight:500}.wifi-hero p{margin:4px 0 0;color:var(--muted);font-size:9.5px}.wifi-box,.qr-box{padding:13px 14px;border:1px solid rgba(221,187,116,.30);border-radius:15px;background:rgba(255,255,255,.05)}.wifi-box label,.qr-box label{display:block;color:var(--gold);font-size:7.5px;font-weight:500;letter-spacing:.18em}.wifi-box strong{display:block;margin-top:4px;font-size:14px;font-weight:400;word-break:break-word}.wifi-box hr{height:1px;margin:9px 0;border:0;background:rgba(221,187,116,.18)}.qr-box{margin-top:8px;display:flex;align-items:center;gap:12px}.qr-box>div{flex:1}.qr-box h3{margin:4px 0;font-size:13px;font-weight:500}.qr-box p{margin:0;color:var(--muted);font-size:8.5px;line-height:1.35}.qr-box img{width:108px;height:108px;padding:7px;border-radius:11px;background:#f7f1e5}.micro{margin:9px 4px 0;color:rgba(248,247,243,.55);font-size:8.5px;line-height:1.4}
.toast{position:fixed;z-index:200;left:50%;bottom:24px;transform:translateX(-50%);max-width:90%;padding:11px 15px;border:1px solid rgba(221,187,116,.35);border-radius:12px;background:#171511;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.45);text-align:center;font-size:12px}
@media(min-width:700px){body{background:#11100e}.guide{width:410px;height:860px;min-height:860px;margin:28px auto;border-radius:30px;box-shadow:0 25px 70px rgba(0,0,0,.48)}.background,.overlay{position:absolute}.home{width:100%;height:100%;min-height:0;padding:18px 18px 14px}.brand-logo{width:67px;margin-bottom:17px}.welcome-word{font-size:16px}.guide-title{margin-top:11px;font-size:36px}.welcome-copy{margin-top:13px;font-size:13px}.tiles{margin-top:86px;padding:0 13px;gap:9px}.tile{border-radius:18px}.tile-icon{width:70px;height:70px;margin-bottom:6px}.tile-icon svg{width:59px;height:59px}.tile-title{font-size:14px}.tile-sub{font-size:9.5px}.bottom-actions{padding:9px 13px 0}.rules-btn{min-height:50px;border-radius:15px}.help-btn{min-height:58px;margin-top:5px}.sheet{inset:auto;top:28px;left:50%;width:410px;height:860px;max-height:calc(100vh - 56px);transform:translateX(-50%);border-radius:30px;box-shadow:0 25px 70px rgba(0,0,0,.48)}.sheet[data-mode="wifi"]{background:rgba(8,8,7,.80);display:flex;align-items:center;padding:12px}.sheet[data-mode="wifi"] .sheet-card{position:relative;inset:auto;width:100%;height:auto;max-height:calc(100% - 24px);border:1px solid rgba(221,187,116,.30);border-radius:24px;background:rgba(17,16,14,.97)}}
@media(max-width:699px){.sheet[data-mode="wifi"]{display:flex;align-items:center;padding:12px;background:rgba(8,8,7,.80)}.sheet[data-mode="wifi"] .sheet-card{position:relative;inset:auto;width:min(100%,410px);height:auto;max-height:calc(100dvh - 24px);border:1px solid rgba(221,187,116,.30);border-radius:24px;background:rgba(17,16,14,.97)}}
@media(max-height:760px){.brand-logo{width:65px;margin-bottom:15px}.welcome-word{font-size:14px}.guide-title{font-size:29px}.welcome-copy{margin-top:8px;font-size:10px}.tiles{margin-top:58px;gap:8px}.tile-icon{width:64px;height:64px}.tile-icon svg{width:54px;height:54px}.tile-title{font-size:13px}.tile-sub{font-size:9px}.page-hero{height:215px;flex-basis:215px}.menu-row{min-height:62px}.signoff{flex-basis:78px;min-height:78px;padding:13px}.signoff img{width:42px}.signoff p{font-size:8px}}


/* =========================================================
   SPÓJNY SYSTEM NAWIGACJI — wersja bez przewijanych menu
   ========================================================= */
.page-view{height:100%;min-height:100%;overflow:hidden}
.page-view .page-hero{height:220px;flex:0 0 220px}
.page-view .menu-card{flex:0 0 auto}
.page-view .signoff{min-height:0;flex:1 1 auto;padding:12px 16px 10px}
.page-view .signoff img{width:38px}
.page-view .signoff p{margin-top:6px;font-size:7.8px}

.compact-menu .menu-row,.spa-menu .menu-row{min-height:62px;padding:9px 12px}
.compact-menu .menu-icon,.spa-menu .menu-icon{width:34px;height:34px;flex-basis:34px}
.compact-menu .menu-icon svg,.spa-menu .menu-icon svg{width:27px;height:27px}
.compact-menu .menu-copy strong,.spa-menu .menu-copy strong{font-size:12.5px}
.compact-menu .menu-copy small,.spa-menu .menu-copy small{font-size:8.2px}

.spa-first{
  margin:0 14px 10px;padding:13px 12px;width:calc(100% - 28px);
  border:1px solid rgba(221,187,116,.58);border-radius:17px;
  background:rgba(221,187,116,.10);color:#fff;
  display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:10px;text-align:left
}
.spa-first-icon{width:40px;height:40px;display:grid;place-items:center}
.spa-first-icon svg{width:31px;height:31px;fill:none;stroke:var(--gold);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.spa-first small,.gold-action small{display:block;color:var(--gold);font-size:7.5px;letter-spacing:.15em}
.spa-first strong{display:block;margin-top:3px;font-size:12.5px;font-weight:500}
.spa-first em{display:block;margin-top:3px;color:rgba(248,247,243,.62);font-size:8.2px;line-height:1.3;font-style:normal;font-weight:300}
.spa-menu{margin-top:0}

.compact-subpage{height:100%;min-height:100%;overflow:hidden;padding-bottom:10px}
.compact-subpage .signoff{flex:1 1 auto;min-height:58px;padding:9px}
.compact-subpage .signoff img{width:34px}
.compact-subpage .signoff p{margin-top:5px;font-size:7.5px}
.compact-subpage .subpage-title{margin-bottom:13px}

.rule-grid,.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-rule,.info-tile{
  min-height:112px;padding:12px 10px;border:1px solid rgba(221,187,116,.26);
  border-radius:15px;background:rgba(255,255,255,.045)
}
.mini-rule>span,.info-tile>span{width:29px;height:29px;display:grid;place-items:center;margin-bottom:8px}
.mini-rule svg,.info-tile svg,.temperature-note svg,.gold-action svg,.step svg,.host-note svg{
  width:25px;height:25px;fill:none;stroke:var(--gold);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round
}
.mini-rule p{margin:0;color:rgba(248,247,243,.76);font-size:9.2px;line-height:1.42;font-weight:300}
.info-tile small{display:block;color:var(--gold);font-size:7px;letter-spacing:.12em}
.info-tile strong{display:block;margin-top:4px;font-size:11px;font-weight:500}
.info-tile p{margin:4px 0 0;color:rgba(248,247,243,.60);font-size:8.2px;line-height:1.35;font-weight:300}

.gold-action{
  width:100%;margin-top:10px;padding:11px 12px;border:1px solid rgba(221,187,116,.48);
  border-radius:15px;background:rgba(221,187,116,.10);color:#fff;
  display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:10px;text-align:left
}
.gold-action>span:first-child{width:32px;height:32px;display:grid;place-items:center}
.gold-action strong{display:block;margin-top:3px;font-size:11.5px;font-weight:500}
.gold-action b{color:var(--gold);font-family:Georgia,serif;font-size:25px;font-weight:300}

.step-list{display:flex;flex-direction:column;gap:7px}
.step{
  min-height:67px;padding:9px 11px;border:1px solid rgba(221,187,116,.25);border-radius:14px;
  background:rgba(255,255,255,.045);display:grid;grid-template-columns:24px 32px 1fr;align-items:center;gap:8px
}
.step>b{width:22px;height:22px;border:1px solid rgba(221,187,116,.50);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:8px;font-weight:500}
.step>span{width:30px;height:30px;display:grid;place-items:center}
.step p{margin:0}.step strong{display:block;font-size:10.5px;font-weight:500}.step small{display:block;margin-top:3px;color:rgba(248,247,243,.58);font-size:8.2px;line-height:1.3}
.temperature-note,.host-note{
  margin-top:9px;padding:10px 12px;border:1px solid rgba(221,187,116,.28);border-radius:14px;
  background:rgba(221,187,116,.06);display:grid;grid-template-columns:34px 1fr;align-items:center;gap:9px
}
.temperature-note>span,.host-note>span{width:32px;height:32px;display:grid;place-items:center}
.temperature-note p,.host-note p{margin:0;color:rgba(248,247,243,.72);font-size:9px;line-height:1.4}
.temperature-note small,.host-note small{display:block;margin-bottom:3px;color:var(--gold);font-size:7px;letter-spacing:.13em}
.temperature-note strong{display:block;font-size:10px;font-weight:400}

.rules-main{padding:0 14px}.rules-main .mini-rule{min-height:101px}
.rules-view .host-note{margin:9px 14px 0}
.request-card{margin-top:0}
.request-card textarea.field{min-height:72px}

@media(min-width:700px){
  .page-view .page-hero{height:215px;flex-basis:215px}
}
@media(max-height:760px){
  .page-view .page-hero{height:180px;flex-basis:180px}
  .spa-first{padding:9px 10px;margin-bottom:7px}
  .compact-menu .menu-row,.spa-menu .menu-row{min-height:54px;padding:7px 10px}
  .mini-rule,.info-tile{min-height:92px;padding:9px}
  .mini-rule>span,.info-tile>span{margin-bottom:5px}
  .step{min-height:57px;padding:7px 9px}
}

/* =========================================================
   PEŁNOEKRANOWE TŁA — wspólny system WI-FI / DOM / SPA / OKOLICA
   Jedno zdjęcie na cały ekran + szkło nad fotografią.
   ========================================================= */
.page-view{
  position:relative;
  isolation:isolate;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.page-view::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,rgba(7,6,5,.12) 0%,rgba(7,6,5,.24) 30%,rgba(7,6,5,.50) 67%,rgba(7,6,5,.82) 100%);
  pointer-events:none;
}
.page-view:has(.hero-house){background-image:url("assets/dom-tlo.jpg")}
.page-view:has(.hero-sauna){background-image:url("assets/spa-tlo.jpg")}
.page-view:has(.hero-forest){background-image:url("assets/okolica-tlo.jpg")}
.wifi-page-view{background-image:url("assets/wifi-tlo.jpg")}

/* Nagłówek nie ma już własnego zdjęcia — fotografia należy do całego ekranu. */
.page-view .page-hero,
.page-view .hero-house,
.page-view .hero-sauna,
.page-view .hero-forest,
.wifi-page-view .hero-wifi{
  background-image:none!important;
  background-color:transparent;
}
.page-view .hero-shade{
  background:linear-gradient(180deg,rgba(7,6,5,.08),rgba(7,6,5,.12) 50%,rgba(7,6,5,.28) 100%);
}

/* Wspólne szkło dla menu głównych sekcji. */
.page-view .menu-card,
.wifi-glass-card{
  border:1px solid rgba(221,187,116,.34);
  background:linear-gradient(145deg,rgba(22,20,17,.48),rgba(10,9,8,.34));
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  backdrop-filter:blur(12px) saturate(115%);
  box-shadow:0 16px 38px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
.page-view .menu-row{background:transparent}
.page-view .menu-row:active{background:rgba(221,187,116,.08)}

/* WI-FI jest teraz takim samym pełnym ekranem jak pozostałe trzy sekcje. */
.wifi-page-view{font-family:var(--sans)}
.wifi-page-view .page-hero{height:220px;flex:0 0 220px}
.wifi-glass-card{
  margin:-2px 14px 0;
  padding:13px;
  border-radius:18px;
}
.wifi-glass-card .wifi-box,
.wifi-glass-card .qr-box{
  background:rgba(8,8,7,.25);
  border-color:rgba(221,187,116,.24);
}
.wifi-glass-card .micro{margin-bottom:0}

/* Wyłącza dawny modalowy wyjątek WI-FI. */
.sheet[data-mode="wifi"]{
  display:block;
  padding:0;
  background:#11100e;
}
.sheet[data-mode="wifi"] .sheet-card{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  max-height:none;
  border:0;
  border-radius:0;
  background:#11100e;
}

/* Logo/podpis pozostaje subtelny na fotografii. */
.page-view .signoff{
  background:linear-gradient(180deg,rgba(8,8,7,0),rgba(8,8,7,.20));
}

@media(min-width:700px){
  .wifi-page-view .page-hero{height:215px;flex-basis:215px}
}
@media(max-height:760px){
  .wifi-page-view .page-hero{height:180px;flex-basis:180px}
  .wifi-glass-card{padding:10px 11px}
  .wifi-glass-card .qr-box img{width:94px;height:94px}
}

/* =========================================================
   FINALNY SYSTEM VIEWPORTU
   HOME + WI-FI + DOM + SPA + OKOLICA = ten sam ekran.
   Bez przewijania głównych ekranów i bez odsłaniania HOME.
   ========================================================= */

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
}

.guide{
  overflow:hidden;
}

/* ---------- TELEFON ---------- */
@media(max-width:699px){
  html,body{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
  }

  .guide{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    margin:0;
  }

  /* HOME dopasowuje zawartość do realnej wysokości telefonu. */
  .home{
    width:100%;
    height:100dvh;
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
    padding:
      max(10px,env(safe-area-inset-top))
      18px
      max(7px,env(safe-area-inset-bottom));
  }

  .brand-logo{
    width:clamp(50px,8.2dvh,76px);
    margin-bottom:clamp(8px,1.8dvh,18px);
  }

  .welcome-word{
    font-size:clamp(13px,1.9dvh,18px);
  }

  .guide-title{
    margin-top:clamp(7px,1.25dvh,12px);
    font-size:clamp(29px,4.7dvh,42px);
  }

  .welcome-copy{
    margin-top:clamp(7px,1.5dvh,14px);
    font-size:clamp(10px,1.65dvh,15px);
    line-height:1.3;
  }

  .status{
    margin-top:5px;
    padding:4px 8px;
  }

  /* Zamiast stałych 112 px odstęp i kafelki skalują się z wysokością telefonu. */
  .tiles{
    margin-top:clamp(16px,6.2dvh,54px);
    padding:0 7px;
    gap:clamp(7px,1.15dvh,10px);
  }

  .tile{
    aspect-ratio:auto;
    height:clamp(112px,17.2dvh,150px);
    border-radius:clamp(16px,2.4dvh,21px);
    padding:8px 9px;
  }

  .tile-icon{
    width:clamp(52px,8.2dvh,72px);
    height:clamp(52px,8.2dvh,72px);
    margin-bottom:clamp(3px,.7dvh,7px);
  }

  .tile-icon svg{
    width:clamp(45px,7.1dvh,62px);
    height:clamp(45px,7.1dvh,62px);
  }

  .tile-title{
    font-size:clamp(12px,1.75dvh,15px);
  }

  .tile-sub{
    margin-top:3px;
    font-size:clamp(8px,1.15dvh,10px);
    line-height:1.2;
  }

  /* Najważniejsze: oba dolne przyciski zawsze mieszczą się w viewportcie. */
  .bottom-actions{
    margin-top:auto;
    padding:clamp(5px,.8dvh,9px) 7px 0;
    flex:0 0 auto;
  }

  .rules-btn{
    min-height:clamp(43px,6.3dvh,54px);
    border-radius:15px;
  }

  .help-btn{
    min-height:clamp(49px,7dvh,62px);
    margin-top:clamp(2px,.45dvh,5px);
    padding-top:3px;
    padding-bottom:3px;
  }

  .help-icon{
    width:clamp(34px,5.3dvh,42px);
    height:clamp(34px,5.3dvh,42px);
  }

  .help-icon svg{
    width:clamp(31px,4.8dvh,39px);
    height:clamp(31px,4.8dvh,39px);
  }

  .help-copy strong{
    font-size:clamp(13px,1.8dvh,16px);
  }

  .help-copy small{
    margin-top:2px;
    font-size:clamp(8px,1.1dvh,10px);
  }

  /* Otwarty ekran jest osobną pełnoekranową warstwą 1:1 nad HOME. */
  .sheet,
  .sheet[data-mode="wifi"]{
    position:fixed;
    z-index:100;
    inset:0;
    width:100%;
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
    margin:0;
    padding:0;
    transform:none;
    border:0;
    border-radius:0;
    overflow:hidden;
    overscroll-behavior:none;
    background:#11100e;
  }

  .sheet-card,
  .sheet[data-mode="wifi"] .sheet-card{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    border:0;
    border-radius:0;
    overflow:hidden;
    overscroll-behavior:none;
    background:#11100e;
  }

  .page-view,
  .wifi-page-view{
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    overflow:hidden;
    overscroll-behavior:none;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }

  /* Zdjęcie zaczyna się od pierwszego piksela ekranu. */
  .page-view .page-hero,
  .wifi-page-view .page-hero{
    height:clamp(155px,23dvh,205px);
    flex:0 0 clamp(155px,23dvh,205px);
    margin:0;
    padding:0;
    background:transparent!important;
  }

  .page-view .hero-shade{
    background:linear-gradient(
      180deg,
      rgba(7,6,5,.05) 0%,
      rgba(7,6,5,.10) 55%,
      rgba(7,6,5,.24) 100%
    )!important;
  }

  .page-view .menu-row{
    min-height:clamp(50px,7.2dvh,62px);
    padding:7px 10px;
  }

  .page-view .signoff{
    min-height:0;
    flex:1 1 auto;
    padding:7px 12px max(5px,env(safe-area-inset-bottom));
    background:transparent;
  }

  .page-view .signoff img{
    width:32px;
  }

  .page-view .signoff p{
    margin-top:4px;
    font-size:7px;
  }

  .wifi-glass-card{
    margin:-2px 14px 0;
    padding:clamp(8px,1.3dvh,12px);
  }

  .wifi-glass-card .qr-box img{
    width:clamp(82px,12dvh,104px);
    height:clamp(82px,12dvh,104px);
  }
}

/* Bardzo niskie telefony: dodatkowe, kontrolowane zmniejszenie HOME. */
@media(max-width:699px) and (max-height:700px){
  .brand-logo{width:48px;margin-bottom:6px}
  .welcome-word{font-size:12px}
  .guide-title{margin-top:5px;font-size:27px}
  .welcome-copy{margin-top:5px;font-size:9.5px}
  .tiles{margin-top:12px;gap:6px}
  .tile{height:105px}
  .tile-icon{width:47px;height:47px;margin-bottom:2px}
  .tile-icon svg{width:41px;height:41px}
  .tile-title{font-size:11.5px}
  .tile-sub{font-size:7.5px}
  .rules-btn{min-height:40px}
  .help-btn{min-height:45px;margin-top:1px}
}

/* ---------- DESKTOP: stały podgląd telefonu 410 × 860 ---------- */
@media(min-width:700px){
  .guide{
    width:410px;
    height:860px;
    min-height:860px;
    max-height:860px;
    overflow:hidden;
  }

  .sheet{
    top:28px;
    left:50%;
    width:410px;
    height:860px;
    min-height:860px;
    max-height:860px;
    transform:translateX(-50%);
    overflow:hidden;
  }

  .sheet-card,
  .page-view,
  .wifi-page-view{
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    overflow:hidden;
  }

  .page-view{
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA: pełne zdjęcie w 4 głównych kafelkach
   WI-FI / DOM / SPA / OKOLICA — od góry do dołu ekranu.
   HOME bez zmian.
   ========================================================= */
.page-view:has(.hero-house){
  background-image:url("assets/dom-tlo.jpg")!important;
}
.page-view:has(.hero-sauna){
  background-image:url("assets/spa-tlo.jpg")!important;
}
.page-view:has(.hero-forest){
  background-image:url("assets/okolica-tlo.jpg")!important;
}
.wifi-page-view{
  background-image:url("assets/wifi-tlo.jpg")!important;
}

.page-view:has(.hero-house),
.page-view:has(.hero-sauna),
.page-view:has(.hero-forest),
.wifi-page-view{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:local;
}

/* =========================================================
   KOREKTA TECHNICZNA: 4 główne ekrany menu = pełny viewport.
   HOME pozostaje całkowicie bez zmian.
   Przyczyna: #sheetBody nie miał własnej wysokości, więc 100%
   w .page-view liczyło się od wysokości treści, nie od telefonu.
   ========================================================= */

.sheet-card > #sheetBody{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
}

/* Tylko cztery główne widoki otwierane z HOME. */
#sheetBody > .page-view{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  max-height:100%;
  overflow:hidden;
}

/* Fotografia należy do całego widoku, a nie tylko do nagłówka. */
#sheetBody > .page-view:has(.hero-house){
  background:url("assets/dom-tlo.jpg") center center / cover no-repeat!important;
}
#sheetBody > .page-view:has(.hero-sauna){
  background:url("assets/spa-tlo.jpg") center center / cover no-repeat!important;
}
#sheetBody > .page-view:has(.hero-forest){
  background:url("assets/okolica-tlo.jpg") center center / cover no-repeat!important;
}
#sheetBody > .wifi-page-view{
  background:url("assets/wifi-tlo.jpg") center center / cover no-repeat!important;
}

/* Nagłówek jest przezroczystą częścią tego samego zdjęcia. */
#sheetBody > .page-view > .page-hero{
  background-image:none!important;
  background-color:transparent!important;
}

/* Ciemnienie jest nakładką na całe zdjęcie, bez czarnego bloku. */
#sheetBody > .page-view::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(7,6,5,.10) 0%,
    rgba(7,6,5,.18) 34%,
    rgba(7,6,5,.38) 68%,
    rgba(7,6,5,.58) 100%
  );
}

/* Telefon: wysokość dokładnie równa widocznemu ekranowi urządzenia. */
@media(max-width:699px){
  .sheet-card > #sheetBody,
  #sheetBody > .page-view{
    height:100dvh;
    min-height:100dvh;
    max-height:100dvh;
  }
}

/* Desktop: dokładnie ten sam viewport 410 × 860 co podgląd HOME. */
@media(min-width:700px){
  .sheet-card > #sheetBody,
  #sheetBody > .page-view{
    height:860px;
    min-height:860px;
    max-height:860px;
  }
}

/* =========================================================
   JEDYNA ZMIANA: większy odstęp między tytułem a wnętrzem
   głównych ekranów WI-FI / DOM / SPA / OKOLICA.
   TŁA, ICH SKALA, POZYCJA I ROZMIAR POZOSTAJĄ BEZ ZMIAN.
   ========================================================= */

/* DOM i OKOLICA */
#sheetBody > .page-view:has(.hero-house) > .menu-card,
#sheetBody > .page-view:has(.hero-forest) > .menu-card{
  margin-top:20dvh;
}

/* SPA — pierwszy element treści pod tytułem */
#sheetBody > .page-view:has(.hero-sauna) > .spa-first{
  margin-top:20dvh;
}

/* WI-FI */
#sheetBody > .wifi-page-view > .wifi-glass-card{
  margin-top:20dvh;
}

/* Desktopowy podgląd telefonu 410 × 860: ta sama proporcja 1/5 ekranu. */
@media(min-width:700px){
  #sheetBody > .page-view:has(.hero-house) > .menu-card,
  #sheetBody > .page-view:has(.hero-forest) > .menu-card,
  #sheetBody > .page-view:has(.hero-sauna) > .spa-first,
  #sheetBody > .wifi-page-view > .wifi-glass-card{
    margin-top:172px;
  }
}

/* =========================================================
   JEDYNA ZMIANA: stopka we wszystkich 4 głównych ekranach.
   TŁO / TYTUŁ / POZYCJA MENU POZOSTAJĄ BEZ ZMIAN.
   ========================================================= */

/* Logo: ten sam rozmiar, tylko wyraźniejsze. */
#sheetBody > .page-view > .signoff img{
  opacity:.68!important;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,.42));
}

/* Hasło: większe, bardziej eleganckie i pisane. */
#sheetBody > .page-view > .signoff p{
  max-width:330px;
  margin-top:7px;
  color:rgba(221,187,116,.92)!important;
  font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif!important;
  font-size:clamp(17px,2.35dvh,22px)!important;
  line-height:1.05!important;
  font-weight:400!important;
  font-style:italic;
  letter-spacing:.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

/* Desktopowy podgląd telefonu — czytelna ta sama stopka. */
@media(min-width:700px){
  #sheetBody > .page-view > .signoff p{
    font-size:20px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA: usunięcie przyciemnienia pod nagłówkiem
   WI-FI / DOM / PRYWATNA STREFA SPA / OKOLICA.
   TŁO / TYTUŁ / MENU / STOPKA POZOSTAJĄ BEZ ZMIAN.
   ========================================================= */

/* Usuwa ciemną nakładkę z obszaru ikony i tytułu. */
#sheetBody > .page-view > .page-hero > .hero-shade{
  display:none!important;
  background:none!important;
}

/* Sam nagłówek pozostaje całkowicie przezroczysty. */
#sheetBody > .page-view > .page-hero{
  background-color:transparent!important;
  box-shadow:none!important;
}

/* =========================================================
   JEDYNA ZMIANA: większe i czytelniejsze nagłówki 4 ekranów.
   WI-FI / DOM / PRYWATNA STREFA SPA / OKOLICA.
   UKŁAD, TŁA, MENU I STOPKA POZOSTAJĄ BEZ ZMIAN.
   ========================================================= */

/* Większa ikona — bez zmiany położenia całego nagłówka. */
#sheetBody > .page-view > .page-hero .page-icon,
#sheetBody > .page-view > .page-hero .hero-icon{
  font-size:clamp(42px,6.2dvh,58px)!important;
  width:auto!important;
  height:auto!important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.82));
}

/* Główny tytuł. */
#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2{
  font-size:clamp(31px,4.6dvh,42px)!important;
  line-height:.96!important;
  font-weight:500!important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 4px 16px rgba(0,0,0,.72)!important;
}

/* Podtytuł, np. „Jezioro, spacery i inne miejsca warte uwagi”. */
#sheetBody > .page-view > .page-hero .page-heading p{
  font-size:clamp(16px,2.25dvh,20px)!important;
  line-height:1.16!important;
  font-weight:500!important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.98),
    0 3px 12px rgba(0,0,0,.82)!important;
}

/* Desktopowy podgląd 410 × 860. */
@media(min-width:700px){
  #sheetBody > .page-view > .page-hero .page-icon,
  #sheetBody > .page-view > .page-hero .hero-icon{
    font-size:53px!important;
  }

  #sheetBody > .page-view > .page-hero .page-heading h1,
  #sheetBody > .page-view > .page-hero .page-heading h2{
    font-size:39px!important;
  }

  #sheetBody > .page-view > .page-hero .page-heading p{
    font-size:19px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA: korekta nagłówków 4 ekranów.
   Teksty trochę mniejsze, ikony większe, bez cienia.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

#sheetBody > .page-view > .page-hero .page-icon,
#sheetBody > .page-view > .page-hero .hero-icon{
  font-size:clamp(50px,7.2dvh,66px)!important;
  filter:none!important;
}

#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2{
  font-size:clamp(27px,3.9dvh,36px)!important;
  text-shadow:none!important;
}

#sheetBody > .page-view > .page-hero .page-heading p{
  font-size:clamp(14px,1.9dvh,17px)!important;
  text-shadow:none!important;
}

@media(min-width:700px){
  #sheetBody > .page-view > .page-hero .page-icon,
  #sheetBody > .page-view > .page-hero .hero-icon{
    font-size:62px!important;
  }

  #sheetBody > .page-view > .page-hero .page-heading h1,
  #sheetBody > .page-view > .page-hero .page-heading h2{
    font-size:34px!important;
  }

  #sheetBody > .page-view > .page-hero .page-heading p{
    font-size:16px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA: główny ekran PRYWATNA STREFA SPA.
   1) zdjęcie SPA jest tłem całego ekranu od góry do dołu,
   2) usunięty zostaje dodatkowy nagłówek/kicker "DOŁGIE".
   Pozostałe ekrany i cały ich układ pozostają bez zmian.
   ========================================================= */

.sheet[data-mode="spa"] .spa-menu-view{
  background-image:url("assets/spa-tlo.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
}

/* SPA nie dostaje żadnego osobnego czarnego tła nad zdjęciem. */
.sheet[data-mode="spa"],
.sheet[data-mode="spa"] .sheet-card,
.sheet[data-mode="spa"] #sheetBody{
  background:transparent!important;
}

/* Usuwamy wyłącznie stary, dodatkowy nagłówek nad ekranem SPA.
   Zostaje właściwy nagłówek: PRYWATNA STREFA SPA. */
.sheet[data-mode="spa"] .sheet-handle,
.sheet[data-mode="spa"] .sheet-head .sheet-kicker,
.sheet[data-mode="spa"] .sheet-head h2{
  display:none!important;
}

/* Przycisk zamknięcia pozostaje dokładnie na swoim miejscu. */
.sheet[data-mode="spa"] .sheet-head{
  position:absolute;
  inset:0;
  z-index:60;
  pointer-events:none;
  background:transparent!important;
}
.sheet[data-mode="spa"] .sheet-head .close{
  pointer-events:auto;
}

/* =========================================================
   POPRAWKA SPA: zdjęcie na warstwie ekranu, nie przezroczysty sheet.
   Wyłącznie naprawa tła PRYWATNEJ STREFY SPA.
   ========================================================= */

/* Poprzednia przezroczystość powodowała pokazanie HOME, gdy obraz
   nie był malowany na warstwie .spa-menu-view. Teraz samo SPA
   ma własne nieprzezroczyste tło fotograficzne na każdej warstwie. */
.sheet[data-mode="spa"]{
  background:#11100e url("assets/spa-tlo.jpg") center center / cover no-repeat!important;
}
.sheet[data-mode="spa"] .sheet-card{
  background:#11100e url("assets/spa-tlo.jpg") center center / cover no-repeat!important;
}
.sheet[data-mode="spa"] #sheetBody{
  background:transparent!important;
}
.sheet[data-mode="spa"] .spa-menu-view{
  background:#11100e url("assets/spa-tlo.jpg") center center / cover no-repeat!important;
}

/* Stary dodatkowy nagłówek nadal pozostaje ukryty tylko w SPA. */
.sheet[data-mode="spa"] .sheet-handle,
.sheet[data-mode="spa"] .sheet-head .sheet-kicker,
.sheet[data-mode="spa"] .sheet-head h2{
  display:none!important;
}

/* =========================================================
   JEDYNA ZMIANA: większa przezroczystość menu
   WI-FI / DOM / PRYWATNA STREFA SPA / OKOLICA.
   TŁA, UKŁAD, POZYCJE, TYPOGRAFIA I STOPKI BEZ ZMIAN.
   ========================================================= */

/* Główne szklane panele menu — znacznie lżejsze i bardziej transparentne. */
#sheetBody > .page-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  background:linear-gradient(
    145deg,
    rgba(18,17,15,.22),
    rgba(8,8,7,.12)
  )!important;
  -webkit-backdrop-filter:blur(8px) saturate(108%)!important;
  backdrop-filter:blur(8px) saturate(108%)!important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* SPA ma dodatkowy pierwszy kafel „Najważniejsze zasady SPA”. */
#sheetBody > .spa-menu-view > .spa-first{
  background:rgba(18,17,15,.18)!important;
  -webkit-backdrop-filter:blur(8px) saturate(108%);
  backdrop-filter:blur(8px) saturate(108%);
  box-shadow:0 10px 28px rgba(0,0,0,.08)!important;
}

/* Wewnętrzne pola Wi-Fi również lżejsze, żeby cały panel był spójny. */
#sheetBody > .wifi-page-view .wifi-box,
#sheetBody > .wifi-page-view .qr-box{
  background:rgba(8,8,7,.12)!important;
}

/* =========================================================
   JEDYNA ZMIANA: BARDZO wysoka przezroczystość menu
   WI-FI / DOM / PRYWATNA STREFA SPA / OKOLICA.
   ========================================================= */

#sheetBody > .page-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  background:linear-gradient(
    145deg,
    rgba(18,17,15,.07),
    rgba(8,8,7,.025)
  )!important;
  -webkit-backdrop-filter:blur(3px) saturate(103%)!important;
  backdrop-filter:blur(3px) saturate(103%)!important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.035),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#sheetBody > .spa-menu-view > .spa-first{
  background:rgba(18,17,15,.055)!important;
  -webkit-backdrop-filter:blur(3px) saturate(103%)!important;
  backdrop-filter:blur(3px) saturate(103%)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.03)!important;
}

#sheetBody > .wifi-page-view .wifi-box,
#sheetBody > .wifi-page-view .qr-box{
  background:rgba(8,8,7,.045)!important;
}

/* =========================================================
   JEDYNA ZMIANA: usunięcie zaokrąglonych ramek
   ze wszystkich menu i podmenu.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

/* Główne panele menu */
#sheetBody > .page-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  border:none!important;
  border-radius:0!important;
}

/* Wszystkie pozycje menu / podmenu */
#sheetBody .menu-row,
#sheetBody .spa-first,
#sheetBody .content-card,
#sheetBody .mini-rule,
#sheetBody .info-tile,
#sheetBody .gold-action,
#sheetBody .step,
#sheetBody .temperature-note,
#sheetBody .host-note,
#sheetBody .wifi-box,
#sheetBody .qr-box,
#sheetBody .soft-note,
#sheetBody .request-card,
#sheetBody .field{
  border:none!important;
  border-radius:0!important;
}

/* =========================================================
   JEDYNA ZMIANA: typografia, ikony i złote separatory
   we wszystkich menu oraz podmenu.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

/* Każda pozycja menu/podmenu: delikatna złota linia oddzielająca. */
#sheetBody .menu-row,
#sheetBody .spa-first{
  border:none!important;
  border-bottom:1px solid rgba(221,187,116,.48)!important;
  border-radius:0!important;
}

/* Ostatnia pozycja nie potrzebuje dolnego separatora. */
#sheetBody .menu-card > .menu-row:last-child{
  border-bottom:none!important;
}

/* Znacznie większe nazwy pozycji menu i podmenu. */
#sheetBody .menu-row strong,
#sheetBody .spa-first strong{
  font-size:clamp(22px,3.05dvh,28px)!important;
  line-height:1.02!important;
}

/* Delikatnie większy opis pod nazwą i zawsze biały. */
#sheetBody .menu-row em,
#sheetBody .menu-row small,
#sheetBody .spa-first em{
  color:#fff!important;
  font-size:clamp(12.5px,1.72dvh,15px)!important;
  line-height:1.28!important;
}

/* Znacznie większe ikony pozycji menu/podmenu. */
#sheetBody .menu-row > svg,
#sheetBody .menu-row .menu-icon,
#sheetBody .spa-first .spa-first-icon,
#sheetBody .spa-first .spa-first-icon svg{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
}

/* Strzałki pozostają strzałkami, ale są proporcjonalne do większych tytułów. */
#sheetBody .menu-row .chev,
#sheetBody .spa-first .chev{
  font-size:28px!important;
}

/* Te same proporcje w desktopowym podglądzie telefonu 410×860. */
@media(min-width:700px){
  #sheetBody .menu-row strong,
  #sheetBody .spa-first strong{
    font-size:26px!important;
  }

  #sheetBody .menu-row em,
  #sheetBody .menu-row small,
  #sheetBody .spa-first em{
    font-size:14px!important;
  }

  #sheetBody .menu-row > svg,
  #sheetBody .menu-row .menu-icon,
  #sheetBody .spa-first .spa-first-icon,
  #sheetBody .spa-first .spa-first-icon svg{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA: font przesłany przez użytkownika
   dla nazw kafelków, tytułów menu i podmenu.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

@font-face{
  font-family:"GuestGuideTitles";
  src:url("assets/InstrumentSerif-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* Nazwy 4 kafelków na ekranie głównym. */
.home .tile h2,
.home .tile h3,
.home .tile strong,
.home .tile-title,
.home .zone-title{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}

/* Główne tytuły ekranów WI-FI / DOM / SPA / OKOLICA. */
#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}

/* Wszystkie nazwy pozycji menu i podmenu. */
#sheetBody .menu-row strong,
#sheetBody .spa-first strong,
#sheetBody .subpage h1,
#sheetBody .subpage h2,
#sheetBody .subpage h3,
#sheetBody .compact-subpage h1,
#sheetBody .compact-subpage h2,
#sheetBody .compact-subpage h3,
#sheetBody .content-card h2,
#sheetBody .content-card h3{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}

/* =========================================================
   JEDYNA ZMIANA:
   - cały POZOSTAŁY tekst: Gowun Dodum,
   - cały tekst: biały,
   - wcześniejsze tytuły/nazwy pozostają Instrument Serif.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

@font-face{
  font-family:"GuestGuideBody";
  src:url("assets/GowunDodum-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* Domyślnie każdy tekst przewodnika korzysta z nowego fontu i jest biały. */
html,
body,
button,
input,
textarea,
select,
.guide,
.sheet,
#sheetBody,
#sheetBody *,
.home *{
  font-family:"GuestGuideBody",Arial,sans-serif;
  color:#fff!important;
}

/* Zachowujemy przesłany wcześniej Instrument Serif wyłącznie
   dla nazw kafelków oraz wszystkich tytułów menu/podmenu. */
.home .tile h2,
.home .tile h3,
.home .tile strong,
.home .tile-title,
.home .zone-title,
#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2,
#sheetBody .menu-row strong,
#sheetBody .spa-first strong,
#sheetBody .subpage h1,
#sheetBody .subpage h2,
#sheetBody .subpage h3,
#sheetBody .compact-subpage h1,
#sheetBody .compact-subpage h2,
#sheetBody .compact-subpage h3,
#sheetBody .content-card h2,
#sheetBody .content-card h3{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  color:#fff!important;
}

/* =========================================================
   JEDYNA ZMIANA:
   Qwigley dla czterech tekstów końcowych/signoff:
   - Dziękujemy, że dbasz o ten dom jak o swój.
   - Miłego odkrywania okolicy.
   - Życzymy spokojnego relaksu.
   - Miłego pobytu.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

@font-face{
  font-family:"GuestGuideSignoff";
  src:url("assets/Qwigley-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

#sheetBody > .page-view > .signoff p{
  font-family:"GuestGuideSignoff","Brush Script MT",cursive!important;
  font-weight:400!important;
  font-style:normal!important;
  color:#fff!important;
}

/* =========================================================
   JEDYNA ZMIANA: przyciski powrotu.
   X -> intuicyjna strzałka w lewo w transparentnym kółku.
   Ten sam wygląd na każdym ekranie wymagającym powrotu.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

.close,
.back-btn{
  position:absolute!important;
  z-index:80!important;
  top:max(14px,env(safe-area-inset-top))!important;
  left:14px!important;
  right:auto!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(221,187,116,.42)!important;
  border-radius:50%!important;
  background:rgba(18,17,15,.055)!important;
  -webkit-backdrop-filter:blur(3px) saturate(103%)!important;
  backdrop-filter:blur(3px) saturate(103%)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.03)!important;
  color:transparent!important;
  font-size:0!important;
  overflow:hidden!important;
}

.close::before,
.back-btn::before{
  content:""!important;
  position:absolute!important;
  left:15px!important;
  top:50%!important;
  width:12px!important;
  height:12px!important;
  border-left:1.7px solid var(--gold)!important;
  border-bottom:1.7px solid var(--gold)!important;
  background:transparent!important;
  opacity:1!important;
  transform:translateY(-50%) rotate(45deg)!important;
}

.close::after,
.back-btn::after{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  top:50%!important;
  width:17px!important;
  height:1.7px!important;
  background:var(--gold)!important;
  opacity:1!important;
  transform:translateY(-50%)!important;
}

.back-btn span{
  display:none!important;
}

/* =========================================================
   SPÓJNY SYSTEM WIZUALNY WSZYSTKICH PODMENU
   DOM / PRYWATNA STREFA SPA / OKOLICA.
   Treść i działanie bez zmian.
   ========================================================= */

/* Każde podmenu korzysta z fotografii swojej głównej sekcji. */
.sheet[data-mode="house-detail"],
.sheet[data-mode="house-detail"] .sheet-card{
  background:#11100e url("assets/dom-tlo.jpg") center center / cover no-repeat!important;
}
.sheet[data-mode="spa-detail"],
.sheet[data-mode="spa-detail"] .sheet-card{
  background:#11100e url("assets/spa-tlo.jpg") center center / cover no-repeat!important;
}
.sheet[data-mode="area-detail"],
.sheet[data-mode="area-detail"] .sheet-card{
  background:#11100e url("assets/okolica-tlo.jpg") center center / cover no-repeat!important;
}

.sheet[data-mode="house-detail"] #sheetBody,
.sheet[data-mode="spa-detail"] #sheetBody,
.sheet[data-mode="area-detail"] #sheetBody{
  background:transparent!important;
}

/* Ekran szczegółowy: jedna fotografia + lekka warstwa dla czytelności. */
.sheet[data-mode$="-detail"] .subpage{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  min-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:linear-gradient(
    180deg,
    rgba(7,6,5,.10) 0%,
    rgba(7,6,5,.16) 35%,
    rgba(7,6,5,.34) 100%
  )!important;
  scrollbar-width:none;
}
.sheet[data-mode$="-detail"] .subpage::-webkit-scrollbar{
  display:none;
}

/* Nagłówek podmenu: większa ikona i czytelny tytuł, bez osobnej karty. */
.sheet[data-mode$="-detail"] .subpage-title{
  padding-top:52px;
  margin-left:4px;
  margin-right:4px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(221,187,116,.48);
}
.sheet[data-mode$="-detail"] .subpage-title>span{
  width:52px;
  height:52px;
}
.sheet[data-mode$="-detail"] .subpage-title svg{
  width:42px;
  height:42px;
  stroke:var(--gold);
}
.sheet[data-mode$="-detail"] .subpage-title h2{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:clamp(27px,3.8dvh,34px)!important;
  line-height:1!important;
  font-weight:400!important;
  color:#fff!important;
}
.sheet[data-mode$="-detail"] .subpage-title p{
  margin-top:6px;
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:clamp(12px,1.65dvh,14px)!important;
  line-height:1.25!important;
  color:#fff!important;
}

/* Karty treści stają się lekkim, prawie niewidocznym szkłem. */
.sheet[data-mode$="-detail"] .content-card,
.sheet[data-mode$="-detail"] .mini-rule,
.sheet[data-mode$="-detail"] .info-tile,
.sheet[data-mode$="-detail"] .step,
.sheet[data-mode$="-detail"] .temperature-note,
.sheet[data-mode$="-detail"] .host-note,
.sheet[data-mode$="-detail"] .request-card{
  border:0!important;
  border-radius:0!important;
  background:rgba(18,17,15,.055)!important;
  -webkit-backdrop-filter:blur(3px) saturate(103%)!important;
  backdrop-filter:blur(3px) saturate(103%)!important;
  box-shadow:none!important;
}

/* Tytuły wewnątrz kart w tym samym języku typograficznym. */
.sheet[data-mode$="-detail"] .content-card h2,
.sheet[data-mode$="-detail"] .content-card h3,
.sheet[data-mode$="-detail"] .info-tile strong,
.sheet[data-mode$="-detail"] .step strong{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  color:#fff!important;
}
.sheet[data-mode$="-detail"] .content-card h3{
  font-size:clamp(23px,3dvh,28px)!important;
  line-height:1.05!important;
  padding-bottom:10px;
  margin-bottom:0!important;
  border-bottom:1px solid rgba(221,187,116,.48);
}

/* Cała treść opisowa pozostaje biała. */
.sheet[data-mode$="-detail"] .content-card p,
.sheet[data-mode$="-detail"] .content-card li,
.sheet[data-mode$="-detail"] .mini-rule p,
.sheet[data-mode$="-detail"] .info-tile p,
.sheet[data-mode$="-detail"] .step small,
.sheet[data-mode$="-detail"] .temperature-note p,
.sheet[data-mode$="-detail"] .host-note p,
.sheet[data-mode$="-detail"] .soft-note{
  color:#fff!important;
}

/* Listy: zamiast ramek delikatne złote separatory jak w menu głównym. */
.sheet[data-mode$="-detail"] .content-card li{
  padding-top:13px;
  padding-bottom:13px;
  border-top:1px solid rgba(221,187,116,.38)!important;
  font-size:clamp(12.5px,1.7dvh,14.5px)!important;
  line-height:1.5!important;
}
.sheet[data-mode$="-detail"] .content-card li:first-child{
  border-top:0!important;
}
.sheet[data-mode$="-detail"] .content-card li::before{
  background:var(--gold)!important;
}

/* Kafelki informacyjne SPA: złote linie zamiast ramek. */
.sheet[data-mode$="-detail"] .mini-rule,
.sheet[data-mode$="-detail"] .info-tile,
.sheet[data-mode$="-detail"] .step{
  border-bottom:1px solid rgba(221,187,116,.42)!important;
}
.sheet[data-mode$="-detail"] .mini-rule p,
.sheet[data-mode$="-detail"] .info-tile p,
.sheet[data-mode$="-detail"] .step small{
  font-size:clamp(11px,1.45dvh,13px)!important;
}
.sheet[data-mode$="-detail"] .info-tile strong,
.sheet[data-mode$="-detail"] .step strong{
  font-size:clamp(17px,2.2dvh,21px)!important;
}

/* Pola i przyciski zachowują funkcję, ale wizualnie należą do tego samego systemu. */
.sheet[data-mode$="-detail"] .field{
  border:0!important;
  border-bottom:1px solid rgba(221,187,116,.48)!important;
  border-radius:0!important;
  background:rgba(18,17,15,.08)!important;
  color:#fff!important;
}
.sheet[data-mode$="-detail"] .gold-action,
.sheet[data-mode$="-detail"] .gold-btn{
  border:1px solid rgba(221,187,116,.48)!important;
  background:rgba(18,17,15,.07)!important;
  -webkit-backdrop-filter:blur(3px) saturate(103%)!important;
  backdrop-filter:blur(3px) saturate(103%)!important;
  color:#fff!important;
}

/* Stopka pozostaje na tej samej fotografii, bez osobnego ciemnego bloku. */
.sheet[data-mode$="-detail"] .signoff{
  background:transparent!important;
}

/* =========================================================
   JEDYNA ZMIANA:
   1) opisy i teksty informacyjne + ok. 2–3 px,
   2) stopka wszystkich kart szczegółowych = Qwigley,
      większa i czytelna jak w głównych kartach.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

/* Opisy w czterech głównych ekranach menu. */
#sheetBody .menu-row em,
#sheetBody .menu-row small,
#sheetBody .spa-first em{
  font-size:clamp(14.5px,1.95dvh,17px)!important;
}

/* Podtytuły nagłówków głównych ekranów. */
#sheetBody > .page-view > .page-hero .page-heading p{
  font-size:clamp(16px,2.15dvh,19px)!important;
}

/* Opisy i treść wszystkich kart szczegółowych. */
.sheet[data-mode$="-detail"] .subpage-title p{
  font-size:clamp(14px,1.9dvh,16px)!important;
}
.sheet[data-mode$="-detail"] .content-card p,
.sheet[data-mode$="-detail"] .content-card li,
.sheet[data-mode$="-detail"] .soft-note,
.sheet[data-mode$="-detail"] .host-note p{
  font-size:clamp(14.5px,1.95dvh,17px)!important;
}
.sheet[data-mode$="-detail"] .mini-rule p,
.sheet[data-mode$="-detail"] .info-tile p,
.sheet[data-mode$="-detail"] .step small{
  font-size:clamp(13px,1.75dvh,15px)!important;
}
.sheet[data-mode$="-detail"] .info-tile small,
.sheet[data-mode$="-detail"] .temperature-note small,
.sheet[data-mode$="-detail"] .gold-action small{
  font-size:clamp(11.5px,1.55dvh,13.5px)!important;
}

/* Tekst końcowy każdej karty szczegółowej:
   dokładnie ten sam font Qwigley co w głównych kartach. */
.sheet[data-mode$="-detail"] .signoff p{
  max-width:340px!important;
  margin-top:7px!important;
  font-family:"GuestGuideSignoff","Brush Script MT",cursive!important;
  font-size:clamp(24px,3.35dvh,30px)!important;
  line-height:1.05!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:.01em!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72)!important;
}

@media(min-width:700px){
  #sheetBody .menu-row em,
  #sheetBody .menu-row small,
  #sheetBody .spa-first em{
    font-size:16px!important;
  }

  #sheetBody > .page-view > .page-hero .page-heading p{
    font-size:18px!important;
  }

  .sheet[data-mode$="-detail"] .subpage-title p{
    font-size:15px!important;
  }

  .sheet[data-mode$="-detail"] .content-card p,
  .sheet[data-mode$="-detail"] .content-card li,
  .sheet[data-mode$="-detail"] .soft-note,
  .sheet[data-mode$="-detail"] .host-note p{
    font-size:16px!important;
  }

  .sheet[data-mode$="-detail"] .mini-rule p,
  .sheet[data-mode$="-detail"] .info-tile p,
  .sheet[data-mode$="-detail"] .step small{
    font-size:14px!important;
  }

  .sheet[data-mode$="-detail"] .signoff p{
    font-size:28px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA:
   stały tekst końcowy dla każdej sekcji.
   - zawsze przy dolnej krawędzi ekranu,
   - nieruchomy podczas przechodzenia do podmenu,
   - jeden duży rozmiar czcionki Qwigley.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

/* Stopka głównych ekranów oraz wszystkich ekranów szczegółowych
   zajmuje zawsze dokładnie to samo miejsce w obrębie telefonu. */
#sheetBody > .page-view > .signoff,
.sheet[data-mode$="-detail"] .subpage > .signoff{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  z-index:70!important;
  width:100%!important;
  min-height:72px!important;
  margin:0!important;
  padding:0 20px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  pointer-events:none!important;
  background:transparent!important;
}

/* Logo pozostaje dyskretne i również nie przesuwa tekstu. */
#sheetBody > .page-view > .signoff img,
.sheet[data-mode$="-detail"] .subpage > .signoff img{
  width:32px!important;
  height:auto!important;
  margin:0 0 4px!important;
  opacity:.68!important;
}

/* Jeden wspólny, wyraźnie większy rozmiar dla:
   Miłego pobytu / Dziękujemy... / Życzymy... / Miłego odkrywania... */
#sheetBody > .page-view > .signoff p,
.sheet[data-mode$="-detail"] .subpage > .signoff p{
  width:100%!important;
  max-width:370px!important;
  margin:0!important;
  padding:0!important;
  font-family:"GuestGuideSignoff","Brush Script MT",cursive!important;
  font-size:32px!important;
  line-height:1!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:0!important;
  text-align:center!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72)!important;
}

/* Treść podmenu ma miejsce nad nieruchomą stopką,
   dzięki czemu przy przewijaniu nie wchodzi pod tekst końcowy. */
.sheet[data-mode$="-detail"] .subpage{
  padding-bottom:105px!important;
}

@media(max-width:699px){
  #sheetBody > .page-view > .signoff p,
  .sheet[data-mode$="-detail"] .subpage > .signoff p{
    font-size:32px!important;
  }
}

@media(min-width:700px){
  #sheetBody > .page-view > .signoff,
  .sheet[data-mode$="-detail"] .subpage > .signoff{
    position:absolute!important;
    bottom:10px!important;
  }

  #sheetBody > .page-view > .signoff p,
  .sheet[data-mode$="-detail"] .subpage > .signoff p{
    font-size:32px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA:
   1) w KAŻDYM ekranie szczegółowym ukrywamy stary nagłówek
      arkusza („DOŁGIE”) przy strzałce powrotu,
   2) właściwy tytuł szczegółu pozostaje u góry,
   3) szkło / treść informacyjna zaczyna się o 1/8 wysokości
      ekranu niżej, wyraźnie oddzielona od tytułu.
   Dotyczy wszystkich podmenu DOM / SPA / OKOLICA.
   ========================================================= */

/* Stary techniczny nagłówek arkusza nie jest potrzebny
   na ekranach szczegółowych. Strzałka powrotu pozostaje. */
.sheet[data-mode$="-detail"] .sheet-handle,
.sheet[data-mode$="-detail"] .sheet-head .sheet-kicker,
.sheet[data-mode$="-detail"] .sheet-head h2{
  display:none!important;
}

.sheet[data-mode$="-detail"] .sheet-head{
  position:absolute!important;
  inset:0!important;
  z-index:75!important;
  pointer-events:none!important;
  background:transparent!important;
}

.sheet[data-mode$="-detail"] .sheet-head .close{
  pointer-events:auto!important;
}

/* Tytuł szczegółowego ekranu pozostaje osobno u góry. */
.sheet[data-mode$="-detail"] .subpage-title{
  margin-bottom:0!important;
}

/* Wszystkie właściwe bloki informacyjne zaczynają się
   dokładnie 1/8 wysokości ekranu niżej od dotychczasowej pozycji. */
.sheet[data-mode$="-detail"] .subpage-title + .content-card,
.sheet[data-mode$="-detail"] .subpage-title + .rule-grid,
.sheet[data-mode$="-detail"] .subpage-title + .info-grid,
.sheet[data-mode$="-detail"] .subpage-title + .step-list{
  margin-top:12.5dvh!important;
}

/* Jeżeli po pierwszym bloku występuje kolejna karta,
   zachowuje normalny odstęp — przesuwamy tylko początek treści. */
@media(min-width:700px){
  .sheet[data-mode$="-detail"] .subpage-title + .content-card,
  .sheet[data-mode$="-detail"] .subpage-title + .rule-grid,
  .sheet[data-mode$="-detail"] .subpage-title + .info-grid,
  .sheet[data-mode$="-detail"] .subpage-title + .step-list{
    margin-top:107.5px!important;
  }
}

/* =========================================================
   JEDYNA ZMIANA:
   główne menu WI-FI / DOM / SPA / OKOLICA przesuwamy lekko
   wyżej, aby początek ich właściwej treści był na tej samej
   wysokości co treść w zaakceptowanych ekranach szczegółowych.
   NIC INNEGO NIE ZMIENIAMY.
   ========================================================= */

/* DOM i OKOLICA */
#sheetBody > .page-view:has(.hero-house) > .menu-card,
#sheetBody > .page-view:has(.hero-forest) > .menu-card{
  margin-top:15dvh!important;
}

/* SPA */
#sheetBody > .page-view:has(.hero-sauna) > .spa-first{
  margin-top:15dvh!important;
}

/* WI-FI */
#sheetBody > .wifi-page-view > .wifi-glass-card{
  margin-top:15dvh!important;
}

/* Desktopowy podgląd 410 × 860 — ta sama proporcja. */
@media(min-width:700px){
  #sheetBody > .page-view:has(.hero-house) > .menu-card,
  #sheetBody > .page-view:has(.hero-forest) > .menu-card,
  #sheetBody > .page-view:has(.hero-sauna) > .spa-first,
  #sheetBody > .wifi-page-view > .wifi-glass-card{
    margin-top:129px!important;
  }
}

/* =========================================================
   NAWIGACJA: jedna strzałka = jeden poziom wstecz.
   Główne menu -> HOME.
   Szczegół -> jego menu nadrzędne.
   Ikona: wyłącznie łamany znak „<”, bez poziomej kreski.
   ========================================================= */

/* Usuwamy trzon strzałki. */
.close::after,
.back-btn::after{
  display:none!important;
  content:none!important;
}

/* Zostaje wyłącznie łamany nawias skierowany w lewo. */
.close::before,
.back-btn::before{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  top:50%!important;
  width:12px!important;
  height:12px!important;
  border-left:1.9px solid var(--gold)!important;
  border-bottom:1.9px solid var(--gold)!important;
  border-top:0!important;
  border-right:0!important;
  background:transparent!important;
  opacity:1!important;
  transform:translateY(-50%) rotate(45deg)!important;
}

/* =========================================================
   HOME — jedyna zmiana:
   krótszy opis pod „PRZEWODNIK GOŚCIA” + delikatnie większy tekst.
   Układ i pozostała typografia bez zmian.
   ========================================================= */
.home .welcome-copy{
  font-size:clamp(12px,1.9dvh,17px)!important;
}

@media(min-width:700px){
  .home .welcome-copy{
    font-size:15px!important;
  }
}

@media(max-width:699px) and (max-height:700px){
  .home .welcome-copy{
    font-size:11.5px!important;
  }
}

/* =========================================================
   HOME — jedyna zmiana:
   „PRZEWODNIK GOŚCIA” używa tej samej czcionki tytułowej
   co nazwy głównych kafelków: Instrument Serif.
   Rozmiar, pozycja i cały układ bez zmian.
   ========================================================= */
.home .hero-title,
.home .guide-title,
.home h1{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
}

/* =========================================================
   HOME — jedyna zmiana:
   większe i czytelniejsze teksty wewnątrz 4 głównych kafelków.
   Typografia, ikony, pozycje i układ bez zmian.
   ========================================================= */

/* Nazwy kafelków: WI-FI / DOM / PRYWATNA STREFA SPA / OKOLICA */
.home .tile h2,
.home .tile h3,
.home .tile strong,
.home .tile-title{
  font-size:clamp(20px,2.75dvh,25px)!important;
  line-height:1.02!important;
}

/* Opisy pod nazwami kafelków, np. „Relaks tylko dla was”. */
.home .tile p,
.home .tile small,
.home .tile em,
.home .tile-subtitle,
.home .tile-description{
  font-size:clamp(13.5px,1.8dvh,16px)!important;
  line-height:1.28!important;
}

@media(min-width:700px){
  .home .tile h2,
  .home .tile h3,
  .home .tile strong,
  .home .tile-title{
    font-size:23px!important;
  }

  .home .tile p,
  .home .tile small,
  .home .tile em,
  .home .tile-subtitle,
  .home .tile-description{
    font-size:15px!important;
  }
}

/* =========================================================
   HOME — jedyna zmiana:
   „WAŻNE PODCZAS POBYTU” bliżej czterech głównych kafelków.
   Odstęp = około 2 × odstęp pomiędzy kafelkami.
   Pozostałe pozycje i układ bez zmian.
   ========================================================= */
.home .bottom-actions{
  margin-top:clamp(14px,2.3dvh,20px)!important;
}

@media(min-width:700px){
  .home .bottom-actions{
    margin-top:18px!important;
  }
}

/* =========================================================
   HOME — jedyna zmiana:
   - opis spod „PRZEWODNIK GOŚCIA” przeniesiony na sam dół,
   - Qwigley jak stałe teksty końcowe pozostałych ekranów,
   - tekst nieruchomy,
   - kafelki + WAŻNE + POMOC przesunięte wyżej pod nagłówek.
   ========================================================= */

/* Zwalniamy miejsce po dawnym opisie pod nagłówkiem. */
.home .brand{
  margin-bottom:0!important;
}

/* Główna część HOME idzie wyżej, bez zmiany układu wewnętrznego. */
.home .tiles{
  margin-top:clamp(8px,1.25dvh,12px)!important;
}

/* Cały blok dolnych akcji pozostaje blisko kafelków zgodnie
   z poprzednio zaakceptowanym odstępem. */
.home .bottom-actions{
  margin-top:clamp(14px,2.3dvh,20px)!important;
}

/* Nowy stały tekst końcowy HOME. */
.home .welcome-copy.home-signoff{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  z-index:70!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 20px!important;
  font-family:"GuestGuideSignoff","Brush Script MT",cursive!important;
  font-size:32px!important;
  line-height:1!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:0!important;
  text-align:center!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.72)!important;
  pointer-events:none!important;
}

.home .welcome-copy.home-signoff span{
  font-family:inherit!important;
  font-size:inherit!important;
}

@media(min-width:700px){
  .home .welcome-copy.home-signoff{
    position:absolute!important;
    bottom:10px!important;
    font-size:32px!important;
  }

  .home .tiles{
    margin-top:10px!important;
  }
}

/* =========================================================
   NAPRAWA HOME:
   podpis końcowy jest niezależnym elementem sekcji HOME,
   a nie dzieckiem nagłówka BRAND.
   ========================================================= */
.home{
  position:relative!important;
}

.home > .home-signoff{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  z-index:70!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 20px!important;
  font-family:"GuestGuideSignoff","Brush Script MT",cursive!important;
  font-size:32px!important;
  line-height:1!important;
  font-weight:400!important;
  font-style:normal!important;
  text-align:center!important;
  color:#fff!important;
  pointer-events:none!important;
}

.home > .brand{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.home > .tiles{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
}

.home > .bottom-actions{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

@media(min-width:700px){
  .home > .home-signoff{
    position:absolute!important;
    bottom:10px!important;
  }
}

/* =========================================================
   HOME — jedyna zmiana:
   1) ozdobny podpis na dole jest mniejszy i spokojniejszy,
   2) cały blok: 4 kafelki + WAŻNE + POMOC odsunięty od
      „PRZEWODNIK GOŚCIA” o ok. 3 odstępy między kafelkami.
   ========================================================= */

/* Większy oddech pomiędzy nagłówkiem a całym menu HOME. */
.home .tiles{
  margin-top:clamp(24px,3.8dvh,34px)!important;
}

/* Mniejszy stały podpis końcowy. */
.home > .home-signoff{
  font-size:24px!important;
  line-height:1.05!important;
}

@media(min-width:700px){
  .home .tiles{
    margin-top:30px!important;
  }

  .home > .home-signoff{
    font-size:24px!important;
  }
}

/* HOME — korekta wielkości ozdobnego tekstu końcowego: 18 px. */
.home > .home-signoff{
  font-size:18px!important;
}

@media(min-width:700px){
  .home > .home-signoff{
    font-size:18px!important;
  }
}

/* =========================================================
   MENU I PODMENU — jedyna zmiana:
   usuwamy dodatkowy techniczny nagłówek „DOŁGIE”
   ze wszystkich ekranów otwieranych wewnątrz przewodnika.
   Strzałka powrotu, właściwe tytuły i cały układ bez zmian.
   ========================================================= */
.sheet .sheet-head .sheet-kicker{
  display:none!important;
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — jedyna zmiana:
   - dodatkowy nagłówek „DOŁGIE” pozostaje ukryty,
   - cały blok ikon i opisów przesunięty niżej,
   - tytuł ekranu, strzałka, treść i pozostałe ekrany bez zmian.
   ========================================================= */

/* Wyraźnie oddzielamy właściwe zasady od nagłówka ekranu. */
#sheetBody > .rules-view > .rules-main{
  margin-top:12.5dvh!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view > .rules-main{
    margin-top:107.5px!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — lista 6 pozycji:
   - jeden element pod drugim,
   - ikony pozostają,
   - bez ramek i osobnych kafelków,
   - subtelne złote separatory,
   - większa, czytelniejsza typografia.
   ========================================================= */

/* Kontener sześciu zasad zamieniamy w pionową listę. */
#sheetBody > .rules-view .rules-main,
#sheetBody > .rules-view .rules-grid{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}

/* Każda zasada wygląda jak pozycja menu. */
#sheetBody > .rules-view .rule-item,
#sheetBody > .rules-view .rule-card,
#sheetBody > .rules-view .mini-rule{
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:15px 4px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:14px!important;
  border:0!important;
  border-bottom:1px solid rgba(221,187,116,.42)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Ostatnia pozycja bez dolnego separatora. */
#sheetBody > .rules-view .rule-item:last-child,
#sheetBody > .rules-view .rule-card:last-child,
#sheetBody > .rules-view .mini-rule:last-child{
  border-bottom:0!important;
}

/* Ikony pozostają i są czytelniejsze. */
#sheetBody > .rules-view .rule-item > svg,
#sheetBody > .rules-view .rule-card > svg,
#sheetBody > .rules-view .mini-rule > svg,
#sheetBody > .rules-view .rule-icon,
#sheetBody > .rules-view .rule-icon svg{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
}

/* Tytuły sześciu pozycji. */
#sheetBody > .rules-view .rule-item strong,
#sheetBody > .rules-view .rule-card strong,
#sheetBody > .rules-view .mini-rule strong,
#sheetBody > .rules-view .rule-item h3,
#sheetBody > .rules-view .rule-card h3,
#sheetBody > .rules-view .mini-rule h3{
  font-size:clamp(20px,2.65dvh,24px)!important;
  line-height:1.05!important;
}

/* Opisy pod tytułami — wyraźnie większe niż dotychczas. */
#sheetBody > .rules-view .rule-item p,
#sheetBody > .rules-view .rule-card p,
#sheetBody > .rules-view .mini-rule p,
#sheetBody > .rules-view .rule-item small,
#sheetBody > .rules-view .rule-card small,
#sheetBody > .rules-view .mini-rule small{
  margin-top:5px!important;
  font-size:clamp(14px,1.9dvh,16px)!important;
  line-height:1.32!important;
  color:#fff!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view .rule-item strong,
  #sheetBody > .rules-view .rule-card strong,
  #sheetBody > .rules-view .mini-rule strong,
  #sheetBody > .rules-view .rule-item h3,
  #sheetBody > .rules-view .rule-card h3,
  #sheetBody > .rules-view .mini-rule h3{
    font-size:22px!important;
  }

  #sheetBody > .rules-view .rule-item p,
  #sheetBody > .rules-view .rule-card p,
  #sheetBody > .rules-view .mini-rule p,
  #sheetBody > .rules-view .rule-item small,
  #sheetBody > .rules-view .rule-card small,
  #sheetBody > .rules-view .mini-rule small{
    font-size:15px!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — finalna lista 10 zasad na 1 ekranie.
   Krótki tytuł + jedno zdanie + dopasowana ikona.
   ========================================================= */
#sheetBody > .rules-view .rules-main{
  margin-top:8.5dvh!important;
  padding-bottom:74px!important;
}

#sheetBody > .rules-view .mini-rule{
  grid-template-columns:34px minmax(0,1fr)!important;
  column-gap:11px!important;
  padding:7px 4px!important;
}

#sheetBody > .rules-view .mini-rule > span{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
}

#sheetBody > .rules-view .mini-rule > span svg{
  width:27px!important;
  height:27px!important;
  stroke:var(--gold)!important;
}

#sheetBody > .rules-view .mini-rule p{
  margin:0!important;
  display:block!important;
  line-height:1.12!important;
}

#sheetBody > .rules-view .mini-rule p strong{
  display:block!important;
  margin:0 0 2px!important;
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:clamp(16px,2.05dvh,19px)!important;
  line-height:1!important;
  font-weight:400!important;
  color:#fff!important;
}

#sheetBody > .rules-view .mini-rule p small{
  display:block!important;
  margin:0!important;
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:clamp(10.5px,1.35dvh,12px)!important;
  line-height:1.22!important;
  color:#fff!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view .rules-main{
    margin-top:73px!important;
  }

  #sheetBody > .rules-view .mini-rule{
    padding:7px 4px!important;
  }

  #sheetBody > .rules-view .mini-rule p strong{
    font-size:18px!important;
  }

  #sheetBody > .rules-view .mini-rule p small{
    font-size:11.5px!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — wykorzystanie pełnej wysokości ekranu:
   - strzałka jest pływająca i nie rezerwuje osobnego pasa,
   - nagłówek ekranu przesunięty wyżej,
   - lista 10 zasad zaczyna się zaraz pod nagłówkiem,
   - bez zmniejszania czytelności treści.
   Zmiana WYŁĄCZNIE dla ekranu zasad.
   ========================================================= */

/* Techniczny nagłówek arkusza nie zajmuje miejsca. */
.sheet:has(#sheetBody > .rules-view) .sheet-head{
  position:absolute!important;
  inset:0!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  z-index:90!important;
  background:transparent!important;
  pointer-events:none!important;
}

.sheet:has(#sheetBody > .rules-view) .sheet-head .sheet-handle,
.sheet:has(#sheetBody > .rules-view) .sheet-head .sheet-kicker,
.sheet:has(#sheetBody > .rules-view) .sheet-head h2{
  display:none!important;
}

/* Strzałka zostaje na zdjęciu, ale nie wpływa na układ. */
.sheet:has(#sheetBody > .rules-view) .sheet-head .close{
  position:absolute!important;
  top:max(12px,env(safe-area-inset-top))!important;
  left:14px!important;
  pointer-events:auto!important;
}

/* Nagłówek WAŻNE PODCZAS POBYTU wykorzystuje górną część ekranu. */
#sheetBody > .rules-view > .page-hero{
  position:absolute!important;
  top:max(10px,env(safe-area-inset-top))!important;
  left:64px!important;
  right:12px!important;
  height:auto!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  z-index:20!important;
  display:flex!important;
  align-items:center!important;
}

/* Lista startuje znacznie wyżej — tuż pod nagłówkiem. */
#sheetBody > .rules-view .rules-main{
  margin-top:clamp(68px,8.2dvh,76px)!important;
  padding-bottom:58px!important;
}

/* Delikatnie oszczędzamy pion bez zmniejszania tekstu. */
#sheetBody > .rules-view .mini-rule{
  padding-top:6px!important;
  padding-bottom:6px!important;
}

@media(min-width:700px){
  .sheet:has(#sheetBody > .rules-view) .sheet-head .close{
    top:12px!important;
  }

  #sheetBody > .rules-view > .page-hero{
    top:10px!important;
  }

  #sheetBody > .rules-view .rules-main{
    margin-top:70px!important;
    padding-bottom:58px!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — korekta dla telefonu:
   - nagłówek wraca bezpiecznie poniżej paska przeglądarki,
   - strzałka jest wyraźnie mniejsza,
   - lista nadal wykorzystuje możliwie dużo wysokości.
   ========================================================= */

/* Mniejsza strzałka TYLKO na ekranie zasad. */
.sheet:has(#sheetBody > .rules-view) .sheet-head .close{
  top:max(20px,env(safe-area-inset-top))!important;
  left:12px!important;
  width:32px!important;
  height:32px!important;
}

.sheet:has(#sheetBody > .rules-view) .sheet-head .close::before{
  left:12px!important;
  width:9px!important;
  height:9px!important;
  border-left-width:1.6px!important;
  border-bottom-width:1.6px!important;
}

/* Nagłówek nie wchodzi już pod pasek adresu / safe area telefonu. */
#sheetBody > .rules-view > .page-hero{
  top:max(58px,calc(env(safe-area-inset-top) + 46px))!important;
  left:18px!important;
  right:18px!important;
  min-height:42px!important;
}

/* Lista zaczyna się zaraz pod widocznym nagłówkiem. */
#sheetBody > .rules-view .rules-main{
  margin-top:max(112px,calc(env(safe-area-inset-top) + 100px))!important;
  padding-bottom:52px!important;
}

/* Odzyskujemy miejsce wyłącznie odstępami, nie czcionką. */
#sheetBody > .rules-view .mini-rule{
  padding-top:5px!important;
  padding-bottom:5px!important;
}

@media(min-width:700px){
  .sheet:has(#sheetBody > .rules-view) .sheet-head .close{
    top:18px!important;
    width:32px!important;
    height:32px!important;
  }

  #sheetBody > .rules-view > .page-hero{
    top:54px!important;
  }

  #sheetBody > .rules-view .rules-main{
    margin-top:108px!important;
  }
}

/* =========================================================
   OZDOBNE PODPISY — subtelniejsza wersja globalna.
   Dotyczy HOME, WAŻNE PODCZAS POBYTU, POMOCY oraz pozostałych
   ekranów przewodnika. Bez zmian w treści i nawigacji.
   ========================================================= */
#sheetBody > .page-view > .signoff{
  min-height:42px!important;
  padding:0 16px!important;
}

#sheetBody > .page-view > .signoff img{
  width:22px!important;
  margin-bottom:2px!important;
  opacity:.48!important;
}

#sheetBody > .page-view > .signoff p,
.sheet[data-mode$="-detail"] .subpage > .signoff p{
  font-size:18px!important;
  line-height:1!important;
  opacity:.82!important;
  text-shadow:0 1px 8px rgba(0,0,0,.62)!important;
}

.home > .home-signoff,
.home .welcome-copy.home-signoff{
  font-size:14px!important;
  line-height:1!important;
  opacity:.78!important;
  text-shadow:0 1px 8px rgba(0,0,0,.62)!important;
}

@media(min-width:700px){
  #sheetBody > .page-view > .signoff p,
  .sheet[data-mode$="-detail"] .subpage > .signoff p{
    font-size:18px!important;
  }

  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:14px!important;
  }
}

/* =========================================================
   OZDOBNY PODPIS — jedna wielkość w całym przewodniku.
   HOME, menu główne, podmenu, detale, zasady i pomoc.
   ========================================================= */
.home > .home-signoff,
.home .welcome-copy.home-signoff,
#sheetBody > .page-view > .signoff p,
.sheet[data-mode$="-detail"] .subpage > .signoff p,
#sheetBody .signoff p{
  font-size:16px!important;
  line-height:1!important;
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — finalna korekta nagłówka na telefonie.
   Strzałka i tytuł są w jednym, bezpiecznym rzędzie.
   Ikona „i” i podtytuł są ukryte tylko na tym ekranie.
   ========================================================= */

/* Strzałka: mała, po lewej, w bezpiecznej strefie. */
.sheet:has(#sheetBody > .rules-view) .sheet-head .close{
  top:max(22px,calc(env(safe-area-inset-top) + 8px))!important;
  left:10px!important;
  width:30px!important;
  height:30px!important;
}

.sheet:has(#sheetBody > .rules-view) .sheet-head .close::before{
  left:11px!important;
  width:8px!important;
  height:8px!important;
  border-left-width:1.5px!important;
  border-bottom-width:1.5px!important;
}

/* Nagłówek ma własny bezpieczny rząd i nie wychodzi ponad viewport. */
#sheetBody > .rules-view > .page-hero{
  position:absolute!important;
  top:max(22px,calc(env(safe-area-inset-top) + 8px))!important;
  left:50px!important;
  right:12px!important;
  width:auto!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
}

/* Usuwamy ikonę „i” — nie konkuruje już ze strzałką. */
#sheetBody > .rules-view > .page-hero .page-icon{
  display:none!important;
}

/* Właściwy tytuł: jedna linia, bez podtytułu. */
#sheetBody > .rules-view > .page-hero .page-heading{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  height:32px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
}

#sheetBody > .rules-view > .page-hero .page-heading h2{
  margin:0!important;
  font-size:clamp(19px,2.55dvh,23px)!important;
  line-height:1!important;
  letter-spacing:.035em!important;
  white-space:nowrap!important;
}

#sheetBody > .rules-view > .page-hero .page-heading p{
  display:none!important;
}

/* Lista zaczyna się tuż pod jednym rzędem nagłówka. */
#sheetBody > .rules-view .rules-main{
  margin-top:max(66px,calc(env(safe-area-inset-top) + 52px))!important;
  padding-bottom:52px!important;
}

/* Użytkownik wybrał 20 px — identycznie w całym przewodniku. */
.home > .home-signoff,
.home .welcome-copy.home-signoff,
#sheetBody > .page-view > .signoff p,
.sheet[data-mode$="-detail"] .subpage > .signoff p,
#sheetBody .signoff p{
  font-size:20px!important;
  line-height:1!important;
}

@media(min-width:700px){
  .sheet:has(#sheetBody > .rules-view) .sheet-head .close{
    top:22px!important;
  }

  #sheetBody > .rules-view > .page-hero{
    top:22px!important;
  }

  #sheetBody > .rules-view .rules-main{
    margin-top:66px!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading h2{
    font-size:22px!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — przywrócenie wcześniejszej wielkości
   tytułu. Położenie strzałki, brak ikony „i” i brak podtytułu
   pozostają bez zmian.
   ========================================================= */
#sheetBody > .rules-view > .page-hero .page-heading h2{
  font-size:clamp(27px,3.9dvh,36px)!important;
  line-height:.96!important;
  letter-spacing:normal!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view > .page-hero .page-heading h2{
    font-size:34px!important;
  }
}

/* =========================================================
   RESPONSYWNY SYSTEM PRODUKCYJNY — telefon / tablet / komputer
   Nadpisuje dawny podgląd telefonu 410 × 860 px.
   Zachowuje istniejący styl, zdjęcia, typografię i nawigację.
   ========================================================= */

/* Cała aplikacja zawsze wykorzystuje rzeczywisty viewport urządzenia. */
html,
body{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  overflow:hidden!important;
}

.guide{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

.background,
.overlay{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
}

/* HOME — ten sam projekt, ale płynna szerokość i wysokość. */
.home{
  width:min(100%,720px)!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0 auto!important;
  padding:
    max(14px,env(safe-area-inset-top))
    clamp(16px,4vw,34px)
    max(10px,env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
}

.home .brand-logo{
  width:clamp(54px,7.5dvh,82px)!important;
}

.home .welcome-word{
  font-size:clamp(14px,1.9dvh,20px)!important;
}

.home .guide-title{
  font-size:clamp(31px,4.7dvh,45px)!important;
}

.home .tiles{
  width:100%!important;
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  gap:clamp(8px,1.5vw,14px)!important;
}

.home .tile{
  min-width:0!important;
  height:clamp(112px,17.2dvh,158px)!important;
}

.home .bottom-actions{
  width:100%!important;
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Wszystkie otwierane ekrany zajmują pełny viewport, także na tablecie. */
.sheet,
.sheet[data-mode="wifi"],
.sheet[data-mode="spa"]{
  position:fixed!important;
  z-index:100!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

.sheet-card,
.sheet[data-mode="wifi"] .sheet-card{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}

.sheet-card > #sheetBody,
#sheetBody > .page-view,
#sheetBody > .wifi-page-view{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
}

/* Na większym ekranie treść nie rozciąga się bez końca.
   Zdjęcie nadal pokrywa cały ekran. */
#sheetBody > .page-view > .page-hero,
#sheetBody > .wifi-page-view > .page-hero{
  width:min(100%,900px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

#sheetBody > .page-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card,
#sheetBody > .spa-menu-view > .spa-first{
  width:min(calc(100% - 28px),760px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Pozycja menu liczona od realnej wysokości urządzenia zamiast 129/172 px. */
#sheetBody > .page-view:has(.hero-house) > .menu-card,
#sheetBody > .page-view:has(.hero-forest) > .menu-card,
#sheetBody > .page-view:has(.hero-sauna) > .spa-first,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  margin-top:15dvh!important;
}

/* Nagłówki sekcji — płynne rozmiary na telefonie i tablecie. */
#sheetBody > .page-view > .page-hero .page-heading{
  left:clamp(18px,4vw,42px)!important;
  right:clamp(18px,4vw,42px)!important;
}

#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2{
  font-size:clamp(28px,4.2vw,38px)!important;
}

#sheetBody > .page-view > .page-hero .page-heading p{
  font-size:clamp(14px,2vw,17px)!important;
}

#sheetBody > .page-view > .page-hero .page-icon,
#sheetBody > .page-view > .page-hero .hero-icon{
  font-size:clamp(52px,7vw,66px)!important;
}

/* Menu: czytelne na tablecie, ale bez gigantycznego skalowania. */
#sheetBody .menu-row strong,
#sheetBody .spa-first strong{
  font-size:clamp(22px,3vw,28px)!important;
}

#sheetBody .menu-row em,
#sheetBody .menu-row small,
#sheetBody .spa-first em{
  font-size:clamp(12.5px,1.7vw,15px)!important;
}

/* Szczegółowe podstrony: pełny ekran + kontrolowana szerokość treści. */
.sheet[data-mode$="-detail"] .subpage{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0 auto!important;
  padding-left:max(14px,calc((100vw - 760px)/2))!important;
  padding-right:max(14px,calc((100vw - 760px)/2))!important;
}

.sheet[data-mode$="-detail"] .subpage-title,
.sheet[data-mode$="-detail"] .content-card,
.sheet[data-mode$="-detail"] .rule-grid,
.sheet[data-mode$="-detail"] .info-grid,
.sheet[data-mode$="-detail"] .step-list,
.sheet[data-mode$="-detail"] .temperature-note,
.sheet[data-mode$="-detail"] .host-note,
.sheet[data-mode$="-detail"] .gold-action,
.sheet[data-mode$="-detail"] .request-card{
  width:100%!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Odstęp w detalach także zależny od wysokości ekranu. */
.sheet[data-mode$="-detail"] .subpage-title + .content-card,
.sheet[data-mode$="-detail"] .subpage-title + .rule-grid,
.sheet[data-mode$="-detail"] .subpage-title + .info-grid,
.sheet[data-mode$="-detail"] .subpage-title + .step-list{
  margin-top:12.5dvh!important;
}

/* Zasady: pozostają zwarte i wykorzystują szerokość tabletu rozsądnie. */
#sheetBody > .rules-view .rules-main{
  width:min(calc(100% - 28px),760px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

#sheetBody > .rules-view > .page-hero{
  right:max(12px,calc((100vw - 760px)/2))!important;
}

/* Pomoc i formularze nie robią się przesadnie szerokie. */
#sheetBody > .page-view .request-card,
#sheetBody > .page-view .host-note,
#sheetBody > .page-view .content-card{
  max-width:760px!important;
}

/* Ozdobny podpis: zgodnie z ostatnią decyzją użytkownika — 20 px wszędzie. */
.home > .home-signoff,
.home .welcome-copy.home-signoff,
#sheetBody > .page-view > .signoff p,
.sheet[data-mode$="-detail"] .subpage > .signoff p,
#sheetBody .signoff p{
  font-size:20px!important;
  line-height:1!important;
}

/* TABLET — wykorzystujemy większą powierzchnię, bez efektu „telefonu na środku”. */
@media(min-width:700px) and (max-width:1199px){
  .home{
    width:min(100%,820px)!important;
    padding-left:clamp(28px,6vw,64px)!important;
    padding-right:clamp(28px,6vw,64px)!important;
  }

  .home .tiles,
  .home .bottom-actions{
    max-width:720px!important;
  }

  .home .tile{
    height:clamp(132px,18dvh,180px)!important;
  }

  #sheetBody > .page-view > .menu-card,
  #sheetBody > .wifi-page-view > .wifi-glass-card,
  #sheetBody > .spa-menu-view > .spa-first{
    width:min(calc(100% - 64px),760px)!important;
  }
}

/* SZEROKI KOMPUTER — pełne tło, centralna kolumna treści.
   Nie wracamy do ramki 410 × 860. */
@media(min-width:1200px){
  .home{
    width:min(100%,900px)!important;
    padding-left:70px!important;
    padding-right:70px!important;
  }

  .home .tiles,
  .home .bottom-actions{
    max-width:760px!important;
  }

  #sheetBody > .page-view > .menu-card,
  #sheetBody > .wifi-page-view > .wifi-glass-card,
  #sheetBody > .spa-menu-view > .spa-first{
    width:min(calc(100% - 80px),800px)!important;
  }

  .sheet[data-mode$="-detail"] .subpage{
    padding-left:max(28px,calc((100vw - 820px)/2))!important;
    padding-right:max(28px,calc((100vw - 820px)/2))!important;
  }
}

/* Urządzenia w poziomie / mała wysokość:
   ważniejsza jest wysokość niż sama szerokość ekranu. */
@media(orientation:landscape) and (max-height:700px){
  .home{
    width:min(100%,760px)!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
  }

  .home .brand-logo{
    width:clamp(42px,8dvh,58px)!important;
    margin-bottom:4px!important;
  }

  .home .guide-title{
    font-size:clamp(25px,6dvh,34px)!important;
  }

  .home .tiles{
    margin-top:clamp(8px,3dvh,18px)!important;
  }

  .home .tile{
    height:clamp(82px,22dvh,118px)!important;
  }

  #sheetBody > .page-view:has(.hero-house) > .menu-card,
  #sheetBody > .page-view:has(.hero-forest) > .menu-card,
  #sheetBody > .page-view:has(.hero-sauna) > .spa-first,
  #sheetBody > .wifi-page-view > .wifi-glass-card{
    margin-top:10dvh!important;
  }
}

/* =========================================================
   TABLET — korekta siatki HOME.
   Cztery kafelki tworzą równą, wycentrowaną siatkę 2 × 2.
   ========================================================= */
@media(min-width:700px) and (max-width:1199px){
  .home .tiles{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    width:100%!important;
    max-width:720px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    column-gap:clamp(12px,2.4vw,22px)!important;
    row-gap:clamp(10px,1.8vw,18px)!important;
  }

  .home .tile{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    justify-self:stretch!important;
  }
}

/* =========================================================
   WSPÓLNA GEOMETRIA TREŚCI — menu, podmenu i ekrany użytkowe.
   Zasada:
   1) treść jest wyraźnie odsunięta od tytułu,
   2) jej dolna granica kończy się 1/8 ekranu nad podpisem,
   3) działa proporcjonalnie na telefonie, tablecie i komputerze.
   ========================================================= */

:root{
  --guide-content-top-gap:12.5dvh;
  --guide-content-bottom-gap:12.5dvh;
}

/* GŁÓWNE MENU: DOM / OKOLICA / SPA / WI-FI */
#sheetBody > .page-view:has(.hero-house) > .menu-card,
#sheetBody > .page-view:has(.hero-forest) > .menu-card,
#sheetBody > .page-view:has(.hero-sauna) > .spa-first,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  margin-top:var(--guide-content-top-gap)!important;
}

/* Kontener menu DOM / OKOLICA */
#sheetBody > .page-view:has(.hero-house) > .menu-card,
#sheetBody > .page-view:has(.hero-forest) > .menu-card{
  margin-bottom:var(--guide-content-bottom-gap)!important;
}

/* SPA: cały blok od pierwszej pozycji do końca menu ma tę samą strefę. */
#sheetBody > .spa-menu-view > .spa-first{
  margin-bottom:0!important;
}

#sheetBody > .spa-menu-view > .menu-card{
  margin-bottom:var(--guide-content-bottom-gap)!important;
}

/* WI-FI: panel kończy się przed dolną strefą podpisu. */
#sheetBody > .wifi-page-view > .wifi-glass-card{
  margin-bottom:var(--guide-content-bottom-gap)!important;
}

/* PODMENU / DETALE:
   pierwsza właściwa treść zawsze 1/8 ekranu pod tytułem. */
.sheet[data-mode$="-detail"] .subpage-title + .content-card,
.sheet[data-mode$="-detail"] .subpage-title + .rule-grid,
.sheet[data-mode$="-detail"] .subpage-title + .info-grid,
.sheet[data-mode$="-detail"] .subpage-title + .step-list,
.sheet[data-mode$="-detail"] .subpage-title + .request-card,
.sheet[data-mode$="-detail"] .subpage-title + .host-note,
.sheet[data-mode$="-detail"] .subpage-title + .temperature-note,
.sheet[data-mode$="-detail"] .subpage-title + .gold-action{
  margin-top:var(--guide-content-top-gap)!important;
}

/* Ostatni blok szczegółów zachowuje 1/8 ekranu przed podpisem. */
.sheet[data-mode$="-detail"] .subpage > :not(.signoff):last-of-type{
  margin-bottom:var(--guide-content-bottom-gap)!important;
}

/* WAŻNE PODCZAS POBYTU:
   lista ma tę samą zasadę co pozostałe ekrany. */
#sheetBody > .rules-view .rules-main{
  margin-top:var(--guide-content-top-gap)!important;
  margin-bottom:var(--guide-content-bottom-gap)!important;
  padding-bottom:0!important;
}

/* POMOC / FORMULARZE:
   nawet przy małej ilości treści formularz nie przykleja się do tytułu. */
#sheetBody > .page-view:has(.hero-help) > .content-card,
#sheetBody > .page-view:has(.hero-help) > .request-card,
#sheetBody > .page-view:has(.hero-help) > .stack,
#sheetBody > .page-view:has(.hero-info) > .content-card,
#sheetBody > .page-view:has(.hero-info) > .request-card,
#sheetBody > .page-view:has(.hero-info) > .stack{
  margin-top:var(--guide-content-top-gap)!important;
  margin-bottom:var(--guide-content-bottom-gap)!important;
}

/* Na bardzo niskich ekranach zachowujemy tę samą proporcję,
   ale nie pozwalamy, aby odstęp spadł do przypadkowej wartości px. */
@media(max-height:700px){
  :root{
    --guide-content-top-gap:12.5dvh;
    --guide-content-bottom-gap:12.5dvh;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — finalny nagłówek informacyjny.
   Większy blok nagłówka wykorzystuje wolną przestrzeń u góry:
   ikona „i” w kółku + tytuł + krótki podtytuł.
   Lista zachowuje zaakceptowany odstęp od nagłówka.
   ========================================================= */

/* Nagłówek przesuwamy niżej i dajemy mu miejsce na trzy elementy. */
#sheetBody > .rules-view > .page-hero{
  top:max(48px,calc(env(safe-area-inset-top) + 34px))!important;
  left:clamp(18px,4vw,42px)!important;
  right:clamp(18px,4vw,42px)!important;
  width:auto!important;
  height:auto!important;
  min-height:74px!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Ikona informacyjna wraca — subtelne złote kółko z „i”. */
#sheetBody > .rules-view > .page-hero .page-icon{
  display:grid!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex:0 0 34px!important;
  place-items:center!important;
  border:1.4px solid var(--gold)!important;
  border-radius:50%!important;
  color:var(--gold)!important;
}

/* W showRules() hero("info") korzysta z istniejącej ikony SVG.
   Chowamy SVG i pokazujemy czyste „i”, żeby znak był lekki i czytelny. */
#sheetBody > .rules-view > .page-hero .page-icon svg{
  display:none!important;
}

#sheetBody > .rules-view > .page-hero .page-icon::before{
  content:"i"!important;
  display:block!important;
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:23px!important;
  line-height:1!important;
  font-weight:400!important;
  color:var(--gold)!important;
  transform:translateY(-1px);
}

/* Tytuł i podtytuł tworzą jeden elegancki blok obok ikony. */
#sheetBody > .rules-view > .page-hero .page-heading{
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:74px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
}

#sheetBody > .rules-view > .page-hero .page-heading > div{
  min-width:0!important;
  padding-top:1px!important;
}

#sheetBody > .rules-view > .page-hero .page-heading h2{
  margin:0!important;
  font-size:clamp(27px,3.9dvh,36px)!important;
  line-height:.96!important;
  letter-spacing:normal!important;
  white-space:normal!important;
}

#sheetBody > .rules-view > .page-hero .page-heading p{
  display:block!important;
  margin:7px 0 0!important;
  color:#fff!important;
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:clamp(12px,1.55dvh,14px)!important;
  line-height:1.25!important;
  font-weight:400!important;
  opacity:.86!important;
}

/* Zachowujemy zaakceptowaną zasadę:
   właściwa lista zaczyna się 1/8 ekranu poniżej bloku nagłówka. */
#sheetBody > .rules-view .rules-main{
  margin-top:calc(
    max(48px,calc(env(safe-area-inset-top) + 34px))
    + 74px
    + var(--guide-content-top-gap)
  )!important;
}

/* Na tablecie i komputerze ten sam układ, tylko z większą przestrzenią ekranu. */
@media(min-width:700px){
  #sheetBody > .rules-view > .page-hero{
    top:clamp(52px,6.5dvh,72px)!important;
    left:max(32px,calc((100vw - 760px)/2))!important;
    right:max(32px,calc((100vw - 760px)/2))!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading h2{
    font-size:34px!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading p{
    font-size:14px!important;
  }

  #sheetBody > .rules-view .rules-main{
    margin-top:calc(
      clamp(52px,6.5dvh,72px)
      + 74px
      + var(--guide-content-top-gap)
    )!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — nagłówek 1:1 jak „Potrzebujesz pomocy?”.
   Rozmiar tytułu, podtytułu i ikony dziedziczy dokładnie
   wspólny system .page-hero / .page-heading / .page-icon.
   ========================================================= */

/* Cofamy wszystkie indywidualne rozmiary trzech elementów nagłówka zasad. */
#sheetBody > .rules-view > .page-hero .page-icon{
  display:grid!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  flex:0 0 48px!important;
  border:0!important;
  border-radius:0!important;
}

#sheetBody > .rules-view > .page-hero .page-icon::before{
  content:none!important;
  display:none!important;
}

#sheetBody > .rules-view > .page-hero .page-icon svg{
  display:block!important;
  width:43px!important;
  height:43px!important;
  fill:none!important;
  stroke:var(--gold)!important;
  stroke-width:1.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#sheetBody > .rules-view > .page-hero .page-heading h2{
  font-size:22px!important;
  line-height:1.05!important;
  font-weight:500!important;
  letter-spacing:.07em!important;
}

#sheetBody > .rules-view > .page-hero .page-heading p{
  display:block!important;
  margin:5px 0 0!important;
  color:var(--muted)!important;
  font-family:inherit!important;
  font-size:10px!important;
  line-height:normal!important;
  font-weight:300!important;
  opacity:1!important;
}

/* Na responsywnych ekranach stosujemy dokładnie te same wartości,
   które wspólny system przewodnika nadaje nagłówkowi Pomocy. */
@media(max-width:699px){
  #sheetBody > .rules-view > .page-hero .page-icon{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
    font-size:clamp(52px,7vw,66px)!important;
  }

  #sheetBody > .rules-view > .page-hero .page-icon svg{
    width:1em!important;
    height:1em!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading h2{
    font-size:clamp(28px,4.2vw,38px)!important;
    line-height:.96!important;
    font-weight:500!important;
    letter-spacing:normal!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading p{
    font-size:clamp(14px,2vw,17px)!important;
    line-height:1.16!important;
    font-weight:500!important;
  }
}

@media(min-width:700px){
  #sheetBody > .rules-view > .page-hero .page-icon{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
    font-size:clamp(52px,7vw,66px)!important;
  }

  #sheetBody > .rules-view > .page-hero .page-icon svg{
    width:1em!important;
    height:1em!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading h2{
    font-size:clamp(28px,4.2vw,38px)!important;
    line-height:.96!important;
    font-weight:500!important;
    letter-spacing:normal!important;
  }

  #sheetBody > .rules-view > .page-hero .page-heading p{
    font-size:clamp(14px,2vw,17px)!important;
    line-height:1.16!important;
    font-weight:500!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — mniejszy odstęp nagłówek → lista.
   Rozmiary ikony, tytułu i podtytułu pozostają bez zmian.
   Odzyskane miejsce trafia na dół listy, aby ostatnia zasada
   nie nachodziła na ozdobny podpis.
   ========================================================= */
#sheetBody > .rules-view .rules-main{
  margin-top:calc(
    max(48px,calc(env(safe-area-inset-top) + 34px))
    + 74px
    + 5dvh
  )!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view .rules-main{
    margin-top:calc(
      clamp(52px,6.5dvh,72px)
      + 74px
      + 5dvh
    )!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — drobna korekta:
   lista o 20 px bliżej nagłówka.
   ========================================================= */
#sheetBody > .rules-view .rules-main{
  margin-top:calc(
    max(48px,calc(env(safe-area-inset-top) + 34px))
    + 74px
    + 5dvh
    - 20px
  )!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view .rules-main{
    margin-top:calc(
      clamp(52px,6.5dvh,72px)
      + 74px
      + 5dvh
      - 20px
    )!important;
  }
}

/* =========================================================
   GLOBALNY SYSTEM WIZUALNY PRZEWODNIKA
   Wzorzec: zaakceptowany układ „Ważne podczas pobytu” /
   „Potrzebujesz pomocy?”.
   Obowiązuje we wszystkich menu i podmenu:
   - ten sam font tytułów i tekstów,
   - ten sam rozmiar ikon nagłówka,
   - ten sam rozmiar tytułów i podtytułów,
   - ten sam rytm odstępów,
   - spójne rozmiary opisów.
   ========================================================= */

:root{
  --gg-header-icon-size:clamp(52px,7vw,66px);
  --gg-title-size:clamp(28px,4.2vw,38px);
  --gg-subtitle-size:clamp(14px,2vw,17px);
  --gg-body-size:clamp(13.5px,1.75vw,16px);
  --gg-small-size:clamp(12.5px,1.6vw,15px);
  --gg-title-line:.96;
  --gg-subtitle-line:1.16;
  --gg-body-line:1.34;
  --gg-header-gap:12px;
  --gg-title-subtitle-gap:5px;
  --gg-content-gap:calc(5dvh - 20px);
}

/* ---------- NAGŁÓWKI GŁÓWNYCH MENU ---------- */

#sheetBody > .page-view > .page-hero .page-heading{
  display:flex!important;
  align-items:flex-start!important;
  gap:var(--gg-header-gap)!important;
}

#sheetBody > .page-view > .page-hero .page-icon,
#sheetBody > .page-view > .page-hero .hero-icon{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  flex:0 0 auto!important;
  font-size:var(--gg-header-icon-size)!important;
}

#sheetBody > .page-view > .page-hero .page-icon svg,
#sheetBody > .page-view > .page-hero .hero-icon svg{
  display:block!important;
  width:1em!important;
  height:1em!important;
}

#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2{
  margin:0!important;
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:var(--gg-title-size)!important;
  line-height:var(--gg-title-line)!important;
  font-weight:500!important;
  letter-spacing:normal!important;
}

#sheetBody > .page-view > .page-hero .page-heading p{
  display:block!important;
  margin:var(--gg-title-subtitle-gap) 0 0!important;
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:var(--gg-subtitle-size)!important;
  line-height:var(--gg-subtitle-line)!important;
  font-weight:500!important;
  opacity:1!important;
}

/* ---------- NAGŁÓWKI WSZYSTKICH PODMENU / DETALI ---------- */

.sheet[data-mode$="-detail"] .subpage-title{
  display:flex!important;
  align-items:flex-start!important;
  gap:var(--gg-header-gap)!important;
}

.sheet[data-mode$="-detail"] .subpage-title > span{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  flex:0 0 auto!important;
  font-size:var(--gg-header-icon-size)!important;
}

.sheet[data-mode$="-detail"] .subpage-title > span svg{
  display:block!important;
  width:1em!important;
  height:1em!important;
}

.sheet[data-mode$="-detail"] .subpage-title h1,
.sheet[data-mode$="-detail"] .subpage-title h2{
  margin:0!important;
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:var(--gg-title-size)!important;
  line-height:var(--gg-title-line)!important;
  font-weight:500!important;
  letter-spacing:normal!important;
}

.sheet[data-mode$="-detail"] .subpage-title p{
  margin:var(--gg-title-subtitle-gap) 0 0!important;
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:var(--gg-subtitle-size)!important;
  line-height:var(--gg-subtitle-line)!important;
  font-weight:500!important;
  opacity:1!important;
}

/* ---------- TEKSTY I OPISY WEWNĄTRZ SEKCJI ---------- */

#sheetBody .content-card p,
#sheetBody .content-card li,
#sheetBody .mini-rule p,
#sheetBody .mini-rule small,
#sheetBody .info-tile p,
#sheetBody .step p small,
#sheetBody .temperature-note p,
#sheetBody .host-note p,
#sheetBody .wifi-glass-card p,
#sheetBody .stack p{
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:var(--gg-body-size)!important;
  line-height:var(--gg-body-line)!important;
}

#sheetBody .menu-row small,
#sheetBody .menu-row em,
#sheetBody .spa-first small,
#sheetBody .spa-first em,
#sheetBody .content-card .soft-note,
#sheetBody .micro{
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:var(--gg-small-size)!important;
  line-height:1.28!important;
}

/* Nazwy pozycji/menu pozostają w tym samym kroju tytułowym. */
#sheetBody .menu-row strong,
#sheetBody .spa-first strong,
#sheetBody .content-card h3,
#sheetBody .info-tile strong,
#sheetBody .step p strong{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
}

/* ---------- WSPÓLNY RYTM: NAGŁÓWEK → ZAWARTOŚĆ ---------- */

/* Podmenu/detale: dokładnie ten sam zaakceptowany krótki odstęp. */
.sheet[data-mode$="-detail"] .subpage-title + .content-card,
.sheet[data-mode$="-detail"] .subpage-title + .rule-grid,
.sheet[data-mode$="-detail"] .subpage-title + .info-grid,
.sheet[data-mode$="-detail"] .subpage-title + .step-list,
.sheet[data-mode$="-detail"] .subpage-title + .request-card,
.sheet[data-mode$="-detail"] .subpage-title + .host-note,
.sheet[data-mode$="-detail"] .subpage-title + .temperature-note,
.sheet[data-mode$="-detail"] .subpage-title + .gold-action{
  margin-top:var(--gg-content-gap)!important;
}

/* Główne menu i formularze: ten sam rytm wizualny pod nagłówkiem. */
#sheetBody > .page-view > .page-hero + .menu-card,
#sheetBody > .page-view > .page-hero + .spa-first,
#sheetBody > .wifi-page-view > .page-hero + .wifi-glass-card,
#sheetBody > .page-view > .page-hero + .stack{
  margin-top:var(--gg-content-gap)!important;
}

/* SPA ma dwa bloki; drugi zachowuje standardowy odstęp sekcyjny. */
#sheetBody > .spa-menu-view > .spa-first + .menu-card{
  margin-top:clamp(12px,2dvh,20px)!important;
}

/* WAŻNE PODCZAS POBYTU pozostaje wzorcem i zachowuje
   dokładnie zaakceptowaną pozycję listy. */
#sheetBody > .rules-view .rules-main{
  margin-top:calc(
    max(48px,calc(env(safe-area-inset-top) + 34px))
    + 74px
    + 5dvh
    - 20px
  )!important;
}

/* ---------- ODSTĘPY POMIĘDZY ELEMENTAMI LIST / KART ---------- */

#sheetBody .menu-card,
#sheetBody .rule-grid,
#sheetBody .info-grid,
#sheetBody .step-list{
  row-gap:clamp(8px,1.25dvh,14px)!important;
}

#sheetBody .content-card > * + *,
#sheetBody .request-card > * + *{
  margin-top:clamp(10px,1.4dvh,16px)!important;
}

/* Podpis ozdobny pozostaje niezmiennie 20 px. */
#sheetBody .signoff p,
.sheet[data-mode$="-detail"] .signoff p{
  font-size:20px!important;
}

/* Tablet / desktop: te same proporcje, bez osobnego systemu typografii. */
@media(min-width:700px){
  #sheetBody > .page-view > .page-hero .page-heading h1,
  #sheetBody > .page-view > .page-hero .page-heading h2,
  .sheet[data-mode$="-detail"] .subpage-title h1,
  .sheet[data-mode$="-detail"] .subpage-title h2{
    font-size:var(--gg-title-size)!important;
  }

  #sheetBody > .page-view > .page-hero .page-heading p,
  .sheet[data-mode$="-detail"] .subpage-title p{
    font-size:var(--gg-subtitle-size)!important;
  }

  #sheetBody > .page-view > .page-hero .page-icon,
  #sheetBody > .page-view > .page-hero .hero-icon,
  .sheet[data-mode$="-detail"] .subpage-title > span{
    font-size:var(--gg-header-icon-size)!important;
  }
}

/* =========================================================
   WAŻNE PODCZAS POBYTU — odsunięcie nagłówka od strzałki.
   Tylko ten ekran: ikona „i” + tytuł + podtytuł przesunięte
   delikatnie w prawo. Lista i pozostałe ekrany bez zmian.
   ========================================================= */
#sheetBody > .rules-view > .page-hero{
  left:calc(clamp(18px,4vw,42px) + 24px)!important;
}

@media(min-width:700px){
  #sheetBody > .rules-view > .page-hero{
    left:calc(max(32px,calc((100vw - 760px)/2)) + 24px)!important;
  }
}

/* =========================================================
   GLOBALNA STRZAŁKA POWROTU
   Wzorzec 1:1: strzałka z ekranu „Ważne podczas pobytu”.
   Ten sam rozmiar i dokładne położenie na wszystkich ekranach,
   które korzystają z przycisku powrotu #closeSheet.
   ========================================================= */
.sheet .sheet-head .close,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close{
  position:absolute!important;
  top:max(22px,calc(env(safe-area-inset-top) + 8px))!important;
  left:10px!important;
  width:30px!important;
  height:30px!important;
  margin:0!important;
  padding:0!important;
  z-index:100!important;
}

.sheet .sheet-head .close::after,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close::after{
  display:none!important;
  content:none!important;
}

.sheet .sheet-head .close::before,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close::before{
  content:""!important;
  position:absolute!important;
  left:11px!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-left:1.5px solid var(--gold)!important;
  border-bottom:1.5px solid var(--gold)!important;
  border-top:0!important;
  border-right:0!important;
  background:transparent!important;
  opacity:1!important;
  transform:translateY(-50%) rotate(45deg)!important;
}

/* =========================================================
   HOME — czytelniejsze opisy czterech głównych kafelków.
   Dotyczy wyłącznie tekstów pod ikoną/tytułem:
   Wi-Fi, Dom, Prywatna Strefa SPA, Okolica.
   ========================================================= */
.home .tile p,
.home .tile small,
.home .tile em,
.home .tile-subtitle,
.home .tile-description{
  font-size:clamp(15px,2dvh,17.5px)!important;
  line-height:1.3!important;
}

@media(min-width:700px){
  .home .tile p,
  .home .tile small,
  .home .tile em,
  .home .tile-subtitle,
  .home .tile-description{
    font-size:clamp(15.5px,1.7vw,18px)!important;
    line-height:1.3!important;
  }
}

/* =========================================================
   HOME — wyraźnie większe opisy czterech kafelków.
   Poprzednia korekta była zbyt subtelna.
   ========================================================= */
.home .tile p,
.home .tile small,
.home .tile em,
.home .tile-subtitle,
.home .tile-description{
  font-size:clamp(17px,2.35dvh,20px)!important;
  line-height:1.28!important;
}

@media(min-width:700px){
  .home .tile p,
  .home .tile small,
  .home .tile em,
  .home .tile-subtitle,
  .home .tile-description{
    font-size:clamp(18px,1.8vw,21px)!important;
    line-height:1.28!important;
  }
}

/* =========================================================
   HOME — „Potrzebujesz pomocy?” jako mocne CTA kontaktowe.
   Większy odstęp od „Ważne podczas pobytu”, większa ikona,
   tytuł i opis. Tylko ekran HOME.
   ========================================================= */

/* Wyraźne oddzielenie drugiej akcji od „Ważne podczas pobytu”. */
.home .bottom-actions > * + *{
  margin-top:clamp(26px,4.2dvh,42px)!important;
}

/* Kafelek / przycisk pomocy dostaje więcej wysokości i przestrzeni. */
.home .bottom-actions .help-btn,
.home .bottom-actions [data-action="help"],
.home .bottom-actions [data-open="help"],
.home .bottom-actions button:last-child{
  min-height:clamp(78px,10.5dvh,104px)!important;
  padding:clamp(12px,1.8dvh,18px) clamp(14px,3.5vw,24px)!important;
}

/* Ikona wiadomości — zdecydowanie bardziej widoczna. */
.home .bottom-actions .help-btn svg,
.home .bottom-actions [data-action="help"] svg,
.home .bottom-actions [data-open="help"] svg,
.home .bottom-actions button:last-child svg{
  width:clamp(42px,6.2dvh,58px)!important;
  height:clamp(42px,6.2dvh,58px)!important;
  min-width:clamp(42px,6.2dvh,58px)!important;
}

/* „Potrzebujesz pomocy?” */
.home .bottom-actions .help-btn strong,
.home .bottom-actions [data-action="help"] strong,
.home .bottom-actions [data-open="help"] strong,
.home .bottom-actions button:last-child strong{
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:clamp(23px,3.15dvh,29px)!important;
  line-height:1!important;
  font-weight:500!important;
}

/* „Jesteśmy do Twojej dyspozycji” */
.home .bottom-actions .help-btn small,
.home .bottom-actions .help-btn p,
.home .bottom-actions [data-action="help"] small,
.home .bottom-actions [data-action="help"] p,
.home .bottom-actions [data-open="help"] small,
.home .bottom-actions [data-open="help"] p,
.home .bottom-actions button:last-child small,
.home .bottom-actions button:last-child p{
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:clamp(15.5px,2.05dvh,18px)!important;
  line-height:1.22!important;
  font-weight:500!important;
}

/* Tablet / większy ekran — zachowujemy mocne CTA bez przesady. */
@media(min-width:700px){
  .home .bottom-actions > * + *{
    margin-top:clamp(30px,4dvh,46px)!important;
  }

  .home .bottom-actions .help-btn,
  .home .bottom-actions [data-action="help"],
  .home .bottom-actions [data-open="help"],
  .home .bottom-actions button:last-child{
    min-height:100px!important;
  }

  .home .bottom-actions .help-btn strong,
  .home .bottom-actions [data-action="help"] strong,
  .home .bottom-actions [data-open="help"] strong,
  .home .bottom-actions button:last-child strong{
    font-size:clamp(25px,2.4vw,31px)!important;
  }

  .home .bottom-actions .help-btn small,
  .home .bottom-actions .help-btn p,
  .home .bottom-actions [data-action="help"] small,
  .home .bottom-actions [data-action="help"] p,
  .home .bottom-actions [data-open="help"] small,
  .home .bottom-actions [data-open="help"] p,
  .home .bottom-actions button:last-child small,
  .home .bottom-actions button:last-child p{
    font-size:clamp(16px,1.55vw,19px)!important;
  }
}

/* =========================================================
   HOME — dynamiczny odstęp: ikona wiadomości ↔ tekst pomocy.
   Jedna proporcjonalna reguła dla telefonu, tabletu i desktopu.
   ========================================================= */
.home .bottom-actions .help-btn,
.home .bottom-actions [data-action="help"],
.home .bottom-actions [data-open="help"],
.home .bottom-actions button:last-child{
  column-gap:clamp(16px,3.2vw,32px)!important;
  gap:clamp(16px,3.2vw,32px)!important;
}

/* Jeżeli struktura przycisku korzysta z marginesu ikony zamiast gap,
   zerujemy go, aby odstęp był sterowany wyłącznie powyższą regułą. */
.home .bottom-actions .help-btn svg,
.home .bottom-actions [data-action="help"] svg,
.home .bottom-actions [data-open="help"] svg,
.home .bottom-actions button:last-child svg{
  margin-left:0!important;
  margin-right:0!important;
  flex-shrink:0!important;
}

/* =========================================================
   OZDOBNE PODPISY — system globalny.
   1) Usuwamy małe logo nad podpisem we wszystkich menu/podmenu.
   2) Tekst podpisu skaluje się dynamicznie z urządzeniem.
   ========================================================= */

/* Logo / obrazek nad ozdobnym podpisem nie jest już wyświetlany. */
#sheetBody .signoff img,
.sheet[data-mode$="-detail"] .signoff img,
.home .home-signoff img{
  display:none!important;
}

/* Sam kontener podpisu nie rezerwuje już miejsca na usunięte logo. */
#sheetBody .signoff,
.sheet[data-mode$="-detail"] .signoff{
  min-height:auto!important;
  padding-top:0!important;
}

/* Telefon: czytelny, ale nadal subtelny podpis. */
#sheetBody .signoff p,
.sheet[data-mode$="-detail"] .signoff p,
.home > .home-signoff,
.home .welcome-copy.home-signoff{
  font-family:"GuestGuideSignoff",cursive!important;
  font-size:clamp(20px,2.8dvh,25px)!important;
  line-height:1.05!important;
}

/* Tablet: podpis rośnie razem z przestrzenią ekranu. */
@media(min-width:700px) and (max-width:1199px){
  #sheetBody .signoff p,
  .sheet[data-mode$="-detail"] .signoff p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(23px,2.7vw,30px)!important;
  }
}

/* Desktop: dalsze skalowanie z bezpiecznym maksimum. */
@media(min-width:1200px){
  #sheetBody .signoff p,
  .sheet[data-mode$="-detail"] .signoff p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(25px,1.75vw,32px)!important;
  }
}

/* =========================================================
   OZDOBNE PODPISY — +4 px i jeden responsywny system globalny.
   Obowiązuje we wszystkich menu, podmenu, detalach oraz HOME.
   ========================================================= */

/* Telefon / baza: poprzednio 20–25 px, teraz 24–29 px. */
#sheetBody .signoff p,
.sheet[data-mode$="-detail"] .signoff p,
.home > .home-signoff,
.home .welcome-copy.home-signoff{
  font-family:"GuestGuideSignoff",cursive!important;
  font-size:clamp(24px,3.25dvh,29px)!important;
  line-height:1.05!important;
}

/* Tablet: poprzednio 23–30 px, teraz 27–34 px. */
@media(min-width:700px) and (max-width:1199px){
  #sheetBody .signoff p,
  .sheet[data-mode$="-detail"] .signoff p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(27px,3.05vw,34px)!important;
  }
}

/* Desktop: poprzednio 25–32 px, teraz 29–36 px. */
@media(min-width:1200px){
  #sheetBody .signoff p,
  .sheet[data-mode$="-detail"] .signoff p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(29px,2vw,36px)!important;
  }
}

/* =========================================================
   OZDOBNE PODPISY — POPRAWIONE PRAWDZIWE SKALOWANIE GLOBALNE
   Poprzedni system opierał się zbyt mocno na wysokości ekranu,
   dlatego telefon i tablet mogły otrzymywać niemal ten sam rozmiar.
   Teraz rozmiar wynika przede wszystkim z SZEROKOŚCI urządzenia.
   Obejmuje każdy footer.signoff oraz podpis HOME.
   ========================================================= */

footer.signoff p,
#sheetBody footer.signoff p,
#sheetBody .signoff p,
.sheet .signoff p,
.sheet[data-mode$="-detail"] .signoff p,
.home > .home-signoff,
.home .welcome-copy.home-signoff{
  font-family:"GuestGuideSignoff",cursive!important;
  font-size:clamp(24px,calc(20px + 1.25vw),30px)!important;
  line-height:1.05!important;
}

/* Tablet — wyraźnie większy podpis niż na telefonie. */
@media(min-width:700px) and (max-width:1199px){
  footer.signoff p,
  #sheetBody footer.signoff p,
  #sheetBody .signoff p,
  .sheet .signoff p,
  .sheet[data-mode$="-detail"] .signoff p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(31px,4.2vw,38px)!important;
  }
}

/* Komputer — kolejny proporcjonalny stopień. */
@media(min-width:1200px){
  footer.signoff p,
  #sheetBody footer.signoff p,
  #sheetBody .signoff p,
  .sheet .signoff p,
  .sheet[data-mode$="-detail"] .signoff p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(36px,2.7vw,44px)!important;
  }
}

/* Logo nad podpisem pozostaje wyłączone absolutnie wszędzie. */
footer.signoff img,
#sheetBody .signoff img,
.sheet .signoff img,
.home .home-signoff img{
  display:none!important;
}

/* =========================================================
   OZDOBNE PODPISY — FINALNA KOREKTA SPECYFICZNOŚCI CSS
   Starsze reguły dla .page-view i .subpage miały większą
   specyficzność i mimo późniejszych zmian nadal wymuszały 20 px.
   Poniższe selektory celują dokładnie we wszystkie typy ekranów.
   ========================================================= */

/* TELEFON — menu główne, zasady, pomoc, Wi-Fi, SPA, DOM, OKOLICA */
#sheetBody > .page-view > footer.signoff > p,
#sheetBody > .page-view > .signoff > p,
#sheetBody > .rules-view > footer.signoff > p,
#sheetBody > .wifi-page-view > footer.signoff > p,
/* PODMENU / DETALE */
.sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
.sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
.sheet[data-mode$="-detail"] .subpage > .signoff > p,
/* HOME */
.home > .home-signoff,
.home .welcome-copy.home-signoff{
  font-family:"GuestGuideSignoff",cursive!important;
  font-size:clamp(24px,calc(20px + 1.25vw),30px)!important;
  line-height:1.05!important;
}

/* TABLET — wymuszamy ten sam większy, responsywny podpis
   we wszystkich menu i podmenu. */
@media(min-width:700px) and (max-width:1199px){
  #sheetBody > .page-view > footer.signoff > p,
  #sheetBody > .page-view > .signoff > p,
  #sheetBody > .rules-view > footer.signoff > p,
  #sheetBody > .wifi-page-view > footer.signoff > p,
  .sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > .signoff > p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(31px,4.2vw,38px)!important;
    line-height:1.05!important;
  }
}

/* DESKTOP */
@media(min-width:1200px){
  #sheetBody > .page-view > footer.signoff > p,
  #sheetBody > .page-view > .signoff > p,
  #sheetBody > .rules-view > footer.signoff > p,
  #sheetBody > .wifi-page-view > footer.signoff > p,
  .sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > .signoff > p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(36px,2.7vw,44px)!important;
    line-height:1.05!important;
  }
}

/* Logo pozostaje usunięte również dla selektorów o wysokiej specyficzności. */
#sheetBody > .page-view > footer.signoff > img,
#sheetBody > .page-view > .signoff > img,
.sheet[data-mode$="-detail"] .subpage > footer.signoff > img,
.sheet[data-mode$="-detail"] .subpage > .signoff > img{
  display:none!important;
}

/* =========================================================
   HOME — delikatnie mniejszy odstęp:
   „Ważne podczas pobytu” ↔ „Potrzebujesz pomocy?”
   ========================================================= */
.home .bottom-actions > * + *{
  margin-top:clamp(18px,3dvh,32px)!important;
}

@media(min-width:700px){
  .home .bottom-actions > * + *{
    margin-top:clamp(22px,3dvh,36px)!important;
  }
}

/* =========================================================
   OZDOBNE PODPISY — globalnie 20 px wyżej.
   Wielkość i responsywne skalowanie pozostają bez zmian.
   ========================================================= */
#sheetBody .signoff,
#sheetBody footer.signoff,
.sheet .signoff,
.sheet[data-mode$="-detail"] .subpage > .signoff,
.home > .home-signoff,
.home .welcome-copy.home-signoff{
  transform:translateY(-20px)!important;
}

/* =========================================================
   HOME — dodatkowe 10 px mniej między:
   „Ważne podczas pobytu” ↔ „Potrzebujesz pomocy?”
   ========================================================= */
.home .bottom-actions > * + *{
  margin-top:calc(clamp(18px,3dvh,32px) - 10px)!important;
}

@media(min-width:700px){
  .home .bottom-actions > * + *{
    margin-top:calc(clamp(22px,3dvh,36px) - 10px)!important;
  }
}

/* =========================================================
   POTRZEBUJESZ POMOCY — złoty system formularza zgłoszenia.
   Kategorie + główny przycisk korzystają z tego samego
   złotego akcentu co cały przewodnik.
   ========================================================= */

/* Kategorie: Usterka / Czegoś brakuje / Pytanie / Inne */
#sheetBody .issue-type,
#sheetBody .issue-option,
#sheetBody .request-type,
#sheetBody .request-option,
#sheetBody .choice-chip,
#sheetBody .chip,
#sheetBody .segmented button,
#sheetBody .issue-types button,
#sheetBody .request-types button{
  border-color:rgba(221,187,116,.58)!important;
  color:var(--gold)!important;
  background:rgba(221,187,116,.07)!important;
}

/* Wybrana kategoria — mocniejszy złoty akcent. */
#sheetBody .issue-type.active,
#sheetBody .issue-type.selected,
#sheetBody .issue-option.active,
#sheetBody .issue-option.selected,
#sheetBody .request-type.active,
#sheetBody .request-type.selected,
#sheetBody .request-option.active,
#sheetBody .request-option.selected,
#sheetBody .choice-chip.active,
#sheetBody .choice-chip.selected,
#sheetBody .chip.active,
#sheetBody .chip.selected,
#sheetBody .segmented button.active,
#sheetBody .segmented button.selected,
#sheetBody .issue-types button.active,
#sheetBody .issue-types button.selected,
#sheetBody .request-types button.active,
#sheetBody .request-types button.selected,
#sheetBody input[type="radio"]:checked + label{
  color:#1d1a14!important;
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.18)!important;
}

/* Radio/checkbox korzysta z tego samego złota. */
#sheetBody input[type="radio"],
#sheetBody input[type="checkbox"]{
  accent-color:var(--gold)!important;
}

/* „Wyślij zgłoszenie” — pełne złote CTA. */
#sheetBody .request-card button[type="submit"],
#sheetBody .issue-form button[type="submit"],
#sheetBody form button[type="submit"],
#sheetBody .submit-btn,
#sheetBody .gold-action{
  background:var(--gold)!important;
  border:1px solid var(--gold)!important;
  color:#1b1812!important;
  font-weight:600!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
}

/* Ikony wewnątrz złotego przycisku również pozostają czytelne. */
#sheetBody .request-card button[type="submit"] svg,
#sheetBody .issue-form button[type="submit"] svg,
#sheetBody form button[type="submit"] svg,
#sheetBody .submit-btn svg,
#sheetBody .gold-action svg{
  stroke:#1b1812!important;
  color:#1b1812!important;
}

/* Stany dotykowe bez wprowadzania nowego koloru. */
#sheetBody .request-card button[type="submit"]:active,
#sheetBody .issue-form button[type="submit"]:active,
#sheetBody form button[type="submit"]:active,
#sheetBody .submit-btn:active,
#sheetBody .gold-action:active{
  opacity:.88!important;
  transform:translateY(1px);
}

/* =========================================================
   POTRZEBUJESZ POMOCY — czysta paleta złoto + szkło.
   Usuwamy brązowe wypełnienia. Złoto jest dokładnie tym samym
   kolorem co ikony przewodnika: var(--gold).
   ========================================================= */

/* NIEWYBRANE KATEGORIE:
   przezroczyste / szklane tło, biała treść, subtelny złoty kontur. */
#sheetBody .issue-type,
#sheetBody .issue-option,
#sheetBody .request-type,
#sheetBody .request-option,
#sheetBody .choice-chip,
#sheetBody .chip,
#sheetBody .segmented button,
#sheetBody .issue-types button,
#sheetBody .request-types button{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(221,187,116,.72)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* WYBRANA KATEGORIA:
   bez brązu — złoty kontur + delikatna złota poświata,
   a wnętrze pozostaje ciemne/szklane. */
#sheetBody .issue-type.active,
#sheetBody .issue-type.selected,
#sheetBody .issue-option.active,
#sheetBody .issue-option.selected,
#sheetBody .request-type.active,
#sheetBody .request-type.selected,
#sheetBody .request-option.active,
#sheetBody .request-option.selected,
#sheetBody .choice-chip.active,
#sheetBody .choice-chip.selected,
#sheetBody .chip.active,
#sheetBody .chip.selected,
#sheetBody .segmented button.active,
#sheetBody .segmented button.selected,
#sheetBody .issue-types button.active,
#sheetBody .issue-types button.selected,
#sheetBody .request-types button.active,
#sheetBody .request-types button.selected,
#sheetBody input[type="radio"]:checked + label{
  background:rgba(255,255,255,.11)!important;
  border-color:var(--gold)!important;
  color:var(--gold)!important;
  box-shadow:
    0 0 0 1px rgba(221,187,116,.16),
    0 0 18px rgba(221,187,116,.14)!important;
}

/* Wszystkie znaczniki/ikony kategorii używają dokładnie złota ikon. */
#sheetBody .issue-type svg,
#sheetBody .issue-option svg,
#sheetBody .request-type svg,
#sheetBody .request-option svg,
#sheetBody .choice-chip svg,
#sheetBody .chip svg,
#sheetBody .segmented button svg,
#sheetBody .issue-types button svg,
#sheetBody .request-types button svg{
  color:var(--gold)!important;
  stroke:var(--gold)!important;
}

/* Główne CTA pozostaje pełnym złotem.
   Zamiast brązowego tekstu — neutralny, prawie czarny grafit. */
#sheetBody .request-card button[type="submit"],
#sheetBody .issue-form button[type="submit"],
#sheetBody form button[type="submit"],
#sheetBody .submit-btn,
#sheetBody .gold-action{
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  color:#10100f!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
}

#sheetBody .request-card button[type="submit"] svg,
#sheetBody .issue-form button[type="submit"] svg,
#sheetBody form button[type="submit"] svg,
#sheetBody .submit-btn svg,
#sheetBody .gold-action svg{
  color:#10100f!important;
  stroke:#10100f!important;
}

/* =========================================================
   POTRZEBUJESZ POMOCY — FINALNY STYL KATEGORII
   Stan normalny: czarne wnętrze + złota ramka + złoty tekst.
   Stan aktywny: pełne złoto + czarny tekst + złota ramka.
   Złoto = dokładnie var(--gold), czyli kolor ikon przewodnika.
   ========================================================= */

/* STAN NORMALNY */
#sheetBody .issue-type,
#sheetBody .issue-option,
#sheetBody .request-type,
#sheetBody .request-option,
#sheetBody .choice-chip,
#sheetBody .chip,
#sheetBody .segmented button,
#sheetBody .issue-types button,
#sheetBody .request-types button{
  background:rgba(8,8,8,.78)!important;
  border:1.5px solid var(--gold)!important;
  color:var(--gold)!important;
  box-shadow:none!important;
}

/* Tekst i ewentualne ikony w stanie normalnym. */
#sheetBody .issue-type *,
#sheetBody .issue-option *,
#sheetBody .request-type *,
#sheetBody .request-option *,
#sheetBody .choice-chip *,
#sheetBody .chip *,
#sheetBody .segmented button *,
#sheetBody .issue-types button *,
#sheetBody .request-types button *{
  color:var(--gold)!important;
}

#sheetBody .issue-type svg,
#sheetBody .issue-option svg,
#sheetBody .request-type svg,
#sheetBody .request-option svg,
#sheetBody .choice-chip svg,
#sheetBody .chip svg,
#sheetBody .segmented button svg,
#sheetBody .issue-types button svg,
#sheetBody .request-types button svg{
  stroke:var(--gold)!important;
}

/* STAN AKTYWNY / WYBRANY */
#sheetBody .issue-type.active,
#sheetBody .issue-type.selected,
#sheetBody .issue-option.active,
#sheetBody .issue-option.selected,
#sheetBody .request-type.active,
#sheetBody .request-type.selected,
#sheetBody .request-option.active,
#sheetBody .request-option.selected,
#sheetBody .choice-chip.active,
#sheetBody .choice-chip.selected,
#sheetBody .chip.active,
#sheetBody .chip.selected,
#sheetBody .segmented button.active,
#sheetBody .segmented button.selected,
#sheetBody .issue-types button.active,
#sheetBody .issue-types button.selected,
#sheetBody .request-types button.active,
#sheetBody .request-types button.selected,
#sheetBody input[type="radio"]:checked + label{
  background:var(--gold)!important;
  border:1.5px solid var(--gold)!important;
  color:#0b0b0a!important;
  box-shadow:0 6px 18px rgba(0,0,0,.24)!important;
}

/* Wszystko wewnątrz aktywnego przycisku przechodzi na czerń. */
#sheetBody .issue-type.active *,
#sheetBody .issue-type.selected *,
#sheetBody .issue-option.active *,
#sheetBody .issue-option.selected *,
#sheetBody .request-type.active *,
#sheetBody .request-type.selected *,
#sheetBody .request-option.active *,
#sheetBody .request-option.selected *,
#sheetBody .choice-chip.active *,
#sheetBody .choice-chip.selected *,
#sheetBody .chip.active *,
#sheetBody .chip.selected *,
#sheetBody .segmented button.active *,
#sheetBody .segmented button.selected *,
#sheetBody .issue-types button.active *,
#sheetBody .issue-types button.selected *,
#sheetBody .request-types button.active *,
#sheetBody .request-types button.selected *,
#sheetBody input[type="radio"]:checked + label *{
  color:#0b0b0a!important;
}

#sheetBody .issue-type.active svg,
#sheetBody .issue-type.selected svg,
#sheetBody .issue-option.active svg,
#sheetBody .issue-option.selected svg,
#sheetBody .request-type.active svg,
#sheetBody .request-type.selected svg,
#sheetBody .request-option.active svg,
#sheetBody .request-option.selected svg,
#sheetBody .choice-chip.active svg,
#sheetBody .choice-chip.selected svg,
#sheetBody .chip.active svg,
#sheetBody .chip.selected svg,
#sheetBody .segmented button.active svg,
#sheetBody .segmented button.selected svg,
#sheetBody .issue-types button.active svg,
#sheetBody .issue-types button.selected svg,
#sheetBody .request-types button.active svg,
#sheetBody .request-types button.selected svg{
  stroke:#0b0b0a!important;
}

/* GŁÓWNE CTA — cały czas pełne złoto. */
#sheetBody .request-card button[type="submit"],
#sheetBody .issue-form button[type="submit"],
#sheetBody form button[type="submit"],
#sheetBody .submit-btn,
#sheetBody .gold-action{
  background:var(--gold)!important;
  border:1.5px solid var(--gold)!important;
  color:#0b0b0a!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
}

/* =========================================================
   POTRZEBUJESZ POMOCY — korekta tła przycisków kategorii.
   Wracamy do wcześniejszego, lekkiego tła przycisków zamiast czerni.
   Złota ramka i złoty tekst zostają.
   Stan aktywny nadal: pełne złoto + czarny tekst.
   ========================================================= */

/* STAN NORMALNY — wcześniejsze subtelne tło zamiast czerni. */
#sheetBody .issue-type,
#sheetBody .issue-option,
#sheetBody .request-type,
#sheetBody .request-option,
#sheetBody .choice-chip,
#sheetBody .chip,
#sheetBody .segmented button,
#sheetBody .issue-types button,
#sheetBody .request-types button{
  background:rgba(255,255,255,.055)!important;
  border:1.5px solid var(--gold)!important;
  color:var(--gold)!important;
}

/* STAN AKTYWNY pozostaje bez zmian:
   pełne złoto jak ikony przewodnika + czarny tekst. */
#sheetBody .issue-type.active,
#sheetBody .issue-type.selected,
#sheetBody .issue-option.active,
#sheetBody .issue-option.selected,
#sheetBody .request-type.active,
#sheetBody .request-type.selected,
#sheetBody .request-option.active,
#sheetBody .request-option.selected,
#sheetBody .choice-chip.active,
#sheetBody .choice-chip.selected,
#sheetBody .chip.active,
#sheetBody .chip.selected,
#sheetBody .segmented button.active,
#sheetBody .segmented button.selected,
#sheetBody .issue-types button.active,
#sheetBody .issue-types button.selected,
#sheetBody .request-types button.active,
#sheetBody .request-types button.selected,
#sheetBody input[type="radio"]:checked + label{
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  color:#0b0b0a!important;
}

/* =========================================================
   HOME — dolny blok bliżej czterech głównych kafelków.
   Przesuwamy „Ważne podczas pobytu” i „Potrzebujesz pomocy?”
   razem o 10 px w górę. Odstęp między nimi pozostaje bez zmian.
   ========================================================= */
.home .bottom-actions{
  transform:translateY(-10px)!important;
}

/* =========================================================
   OZDOBNY NAPIS — globalnie 2 px mniejszy.
   Dotyczy HOME oraz wszystkich menu i podmenu z signoff.
   ========================================================= */
#sheetBody > .page-view > footer.signoff > p,
#sheetBody > .page-view > .signoff > p,
#sheetBody > .rules-view > footer.signoff > p,
#sheetBody > .wifi-page-view > footer.signoff > p,
.sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
.sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
.sheet[data-mode$="-detail"] .subpage > .signoff > p,
.home > .home-signoff,
.home .welcome-copy.home-signoff{
  font-size:clamp(22px,calc(18px + 1.25vw),28px)!important;
}

@media(min-width:700px) and (max-width:1199px){
  #sheetBody > .page-view > footer.signoff > p,
  #sheetBody > .page-view > .signoff > p,
  #sheetBody > .rules-view > footer.signoff > p,
  #sheetBody > .wifi-page-view > footer.signoff > p,
  .sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > .signoff > p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(29px,calc(4.2vw - 2px),36px)!important;
  }
}

@media(min-width:1200px){
  #sheetBody > .page-view > footer.signoff > p,
  #sheetBody > .page-view > .signoff > p,
  #sheetBody > .rules-view > footer.signoff > p,
  #sheetBody > .wifi-page-view > footer.signoff > p,
  .sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
  .sheet[data-mode$="-detail"] .subpage > .signoff > p,
  .home > .home-signoff,
  .home .welcome-copy.home-signoff{
    font-size:clamp(34px,calc(2.7vw - 2px),42px)!important;
  }
}

/* =========================================================
   SZKLANE TŁA — globalnie ciemniejsze, bez zmiany przezroczystości.
   Dotyczy wnętrza WI-FI / DOM / STREFA SPA / OKOLICA oraz
   wszystkich pozycji, kart i pól korzystających ze szkła.
   HOME pozostaje bez zmian.
   ========================================================= */

/* Główne szklane panele czterech sekcji. */
#sheetBody > .page-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  background:linear-gradient(
    145deg,
    rgba(7,7,6,.16),
    rgba(3,3,3,.10)
  )!important;
}

/* Dodatkowy główny kafel SPA. */
#sheetBody > .spa-menu-view > .spa-first{
  background:rgba(5,5,4,.14)!important;
}

/* Wewnętrzne pola i karty ze szklanym tłem. */
#sheetBody .menu-row,
#sheetBody .content-card,
#sheetBody .mini-rule,
#sheetBody .info-tile,
#sheetBody .step,
#sheetBody .temperature-note,
#sheetBody .host-note,
#sheetBody .wifi-box,
#sheetBody .qr-box,
#sheetBody .soft-note,
#sheetBody .request-card,
#sheetBody .field{
  background-color:rgba(5,5,4,.14)!important;
}

/* Formularze / pola tekstowe na szkle. */
#sheetBody input:not([type="radio"]):not([type="checkbox"]),
#sheetBody textarea,
#sheetBody select{
  background-color:rgba(5,5,4,.18)!important;
}

/* =========================================================
   WI-FI — większa czytelność danych i przycisku kopiowania.
   Tylko ekran Wi-Fi. Układ i pozostałe sekcje bez zmian.
   ========================================================= */

/* Etykiety „Nazwa sieci” / „Hasło”. */
#sheetBody > .wifi-page-view .wifi-box small,
#sheetBody > .wifi-page-view .wifi-box label,
#sheetBody > .wifi-page-view .wifi-label{
  font-size:clamp(15px,2.15dvh,18px)!important;
  line-height:1.2!important;
  color:rgba(255,255,255,.94)!important;
  font-weight:500!important;
}

/* Właściwa nazwa sieci i hasło — wyraźnie większe. */
#sheetBody > .wifi-page-view .wifi-box strong,
#sheetBody > .wifi-page-view .wifi-box b,
#sheetBody > .wifi-page-view .wifi-value,
#sheetBody > .wifi-page-view .wifi-password{
  font-size:clamp(21px,3.15dvh,28px)!important;
  line-height:1.18!important;
  color:#fff!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
}

/* „Skopiuj hasło” — mocniejsza złota ramka i duży, czytelny tekst. */
#sheetBody > .wifi-page-view .copy-btn,
#sheetBody > .wifi-page-view [data-copy],
#sheetBody > .wifi-page-view button[id*="copy" i],
#sheetBody > .wifi-page-view button[class*="copy" i]{
  min-height:54px!important;
  padding:12px 20px!important;
  border:1.8px solid var(--gold)!important;
  background:rgba(5,5,4,.24)!important;
  color:var(--gold)!important;
  font-size:clamp(17px,2.45dvh,21px)!important;
  line-height:1.1!important;
  font-weight:600!important;
  opacity:1!important;
  box-shadow:
    0 0 0 1px rgba(221,187,116,.10),
    0 5px 18px rgba(0,0,0,.18)!important;
}

/* Tekst i ikona wewnątrz przycisku kopiowania. */
#sheetBody > .wifi-page-view .copy-btn *,
#sheetBody > .wifi-page-view [data-copy] *,
#sheetBody > .wifi-page-view button[id*="copy" i] *,
#sheetBody > .wifi-page-view button[class*="copy" i] *{
  color:var(--gold)!important;
  opacity:1!important;
}

#sheetBody > .wifi-page-view .copy-btn svg,
#sheetBody > .wifi-page-view [data-copy] svg,
#sheetBody > .wifi-page-view button[id*="copy" i] svg,
#sheetBody > .wifi-page-view button[class*="copy" i] svg{
  width:22px!important;
  height:22px!important;
  stroke:var(--gold)!important;
  opacity:1!important;
}

@media(min-width:700px){
  #sheetBody > .wifi-page-view .wifi-box strong,
  #sheetBody > .wifi-page-view .wifi-box b,
  #sheetBody > .wifi-page-view .wifi-value,
  #sheetBody > .wifi-page-view .wifi-password{
    font-size:clamp(24px,2.4vw,30px)!important;
  }

  #sheetBody > .wifi-page-view .copy-btn,
  #sheetBody > .wifi-page-view [data-copy],
  #sheetBody > .wifi-page-view button[id*="copy" i],
  #sheetBody > .wifi-page-view button[class*="copy" i]{
    min-height:58px!important;
    font-size:clamp(18px,1.8vw,22px)!important;
  }
}

/* =========================================================
   WI-FI — porządek warstw szkła + czytelniejszy separator.
   Usuwamy efekt „podwójnego szkła” wewnątrz głównego panelu:
   szkło pozostaje tylko na .wifi-glass-card.
   ========================================================= */

/* Wewnętrzne pola nie tworzą już drugiej szklanej tafli / jasnej ramki. */
#sheetBody > .wifi-page-view .wifi-box,
#sheetBody > .wifi-page-view .qr-box{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  border:none!important;
}

/* Usunięcie ewentualnej obwódki/pseudo-warstwy wokół wewnętrznych pól. */
#sheetBody > .wifi-page-view .wifi-box::before,
#sheetBody > .wifi-page-view .wifi-box::after,
#sheetBody > .wifi-page-view .qr-box::before,
#sheetBody > .wifi-page-view .qr-box::after{
  box-shadow:none!important;
  border:none!important;
}

/* Separator pomiędzy nazwą sieci i hasłem — wyraźne złoto przewodnika. */
#sheetBody > .wifi-page-view .wifi-box > * + *{
  border-top-color:rgba(221,187,116,.72)!important;
}

/* Jeżeli separator jest osobnym elementem lub pseudo-elementem. */
#sheetBody > .wifi-page-view .wifi-divider,
#sheetBody > .wifi-page-view .divider,
#sheetBody > .wifi-page-view hr{
  height:1px!important;
  border:0!important;
  background:rgba(221,187,116,.72)!important;
  opacity:1!important;
}

/* DOM — Ogrzewanie i klimatyzacja: sześć równych punktów bez powtórzonego tytułu. */
.sheet[data-mode="house-detail"] #sheetBody .thermo-points{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
.sheet[data-mode="house-detail"] #sheetBody .thermo-points ul{
  margin:0!important;
  padding:0!important;
}
.sheet[data-mode="house-detail"] #sheetBody .thermo-points li{
  padding-top:14px!important;
  padding-bottom:14px!important;
  border-top:1px solid rgba(221,187,116,.58)!important;
}
.sheet[data-mode="house-detail"] #sheetBody .thermo-points li:first-child{
  border-top:0!important;
}
.sheet[data-mode="house-detail"] #sheetBody .thermo-points li::before{
  background:var(--gold)!important;
  opacity:1!important;
}

/* DOM — Ogrzewanie i klimatyzacja: mniejszy odstęp między nagłówkiem a informacjami.
   Przesunięcie listy w górę o 1/8 wysokości ekranu. */
.sheet[data-mode="house-detail"] #sheetBody .subpage:has(.thermo-points) .thermo-points{
  transform:translateY(-12.5dvh)!important;
  margin-bottom:-12.5dvh!important;
}

/* DOM — jedno wspólne zdjęcie tła dla menu DOM i wszystkich jego podsekcji. */
#sheetBody > .page-view:has(.hero-house){
  background:url("assets/ogrzewanie-tlo.jpg") center center / cover no-repeat!important;
}
.sheet[data-mode="house-detail"],
.sheet[data-mode="house-detail"] .sheet-card,
.sheet[data-mode="house-detail"] #sheetBody,
.sheet[data-mode="house-detail"] #sheetBody > .subpage{
  background:#11100e url("assets/ogrzewanie-tlo.jpg") center center / cover no-repeat!important;
}

/* =========================================================
   SPÓJNA KOMPOZYCJA CAŁEGO PRZEWODNIKA
   Wzorzec: zaakceptowana sekcja „Ogrzewanie i klimatyzacja”.
   Obejmuje główne ekrany Wi‑Fi / DOM / SPA / OKOLICA oraz
   wszystkie podmenu i ekrany szczegółowe.
   ========================================================= */

/* Jeden wzorzec nagłówka: ikona, tytuł i podtytuł. */
#sheetBody > .page-view > .page-hero .page-heading,
#sheetBody > .wifi-page-view > .page-hero .page-heading,
.sheet[data-mode$="-detail"] .subpage-title{
  display:flex!important;
  align-items:flex-start!important;
  gap:var(--gg-header-gap)!important;
}

#sheetBody > .page-view > .page-hero .page-icon,
#sheetBody > .wifi-page-view > .page-hero .page-icon,
.sheet[data-mode$="-detail"] .subpage-title > span{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  flex:0 0 auto!important;
  font-size:var(--gg-header-icon-size)!important;
  color:var(--gold)!important;
}

#sheetBody > .page-view > .page-hero .page-icon svg,
#sheetBody > .wifi-page-view > .page-hero .page-icon svg,
.sheet[data-mode$="-detail"] .subpage-title > span svg{
  display:block!important;
  width:1em!important;
  height:1em!important;
}

#sheetBody > .page-view > .page-hero .page-heading h1,
#sheetBody > .page-view > .page-hero .page-heading h2,
#sheetBody > .wifi-page-view > .page-hero .page-heading h1,
#sheetBody > .wifi-page-view > .page-hero .page-heading h2,
.sheet[data-mode$="-detail"] .subpage-title h1,
.sheet[data-mode$="-detail"] .subpage-title h2{
  margin:0!important;
  font-family:"GuestGuideTitles",Georgia,"Times New Roman",serif!important;
  font-size:var(--gg-title-size)!important;
  line-height:var(--gg-title-line)!important;
  font-weight:500!important;
  letter-spacing:normal!important;
  color:#fff!important;
}

#sheetBody > .page-view > .page-hero .page-heading p,
#sheetBody > .wifi-page-view > .page-hero .page-heading p,
.sheet[data-mode$="-detail"] .subpage-title p{
  display:block!important;
  margin:var(--gg-title-subtitle-gap) 0 0!important;
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:var(--gg-subtitle-size)!important;
  line-height:var(--gg-subtitle-line)!important;
  font-weight:500!important;
  color:#fff!important;
  opacity:1!important;
}

/* Taki sam krótki odstęp jak w zaakceptowanym „Ogrzewanie i klimatyzacja”. */
.sheet[data-mode="house-detail"] #sheetBody .subpage-title + .content-card,
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .content-card,
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .rule-grid,
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .info-grid,
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .step-list,
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .request-card,
.sheet[data-mode="area-detail"] #sheetBody .subpage-title + .content-card{
  transform:translateY(-12.5dvh)!important;
  margin-bottom:-12.5dvh!important;
}

/* Ogrzewanie korzysta z tego samego globalnego ustawienia, bez podwójnego przesunięcia. */
.sheet[data-mode="house-detail"] #sheetBody .subpage:has(.thermo-points) .thermo-points{
  transform:translateY(-12.5dvh)!important;
  margin-bottom:-12.5dvh!important;
}

/* Spójne szkło i przezroczystość kart we wszystkich czterech kafelkach. */
#sheetBody > .house-menu-view > .menu-card,
#sheetBody > .spa-menu-view > .spa-first,
#sheetBody > .spa-menu-view > .menu-card,
#sheetBody > .area-menu-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card,
.sheet[data-mode="house-detail"] #sheetBody .content-card,
.sheet[data-mode="spa-detail"] #sheetBody .content-card,
.sheet[data-mode="spa-detail"] #sheetBody .mini-rule,
.sheet[data-mode="spa-detail"] #sheetBody .info-tile,
.sheet[data-mode="spa-detail"] #sheetBody .step,
.sheet[data-mode="spa-detail"] #sheetBody .temperature-note,
.sheet[data-mode="area-detail"] #sheetBody .content-card{
  background-color:rgba(5,5,4,.14)!important;
  color:#fff!important;
}

/* Ten sam złoty rytm oddzieleń co w sekcji ogrzewania. */
.sheet[data-mode="house-detail"] #sheetBody .content-card li,
.sheet[data-mode="spa-detail"] #sheetBody .content-card li,
.sheet[data-mode="area-detail"] #sheetBody .content-card li{
  border-top-color:rgba(221,187,116,.58)!important;
}

.sheet[data-mode="house-detail"] #sheetBody .content-card li::before,
.sheet[data-mode="spa-detail"] #sheetBody .content-card li::before,
.sheet[data-mode="area-detail"] #sheetBody .content-card li::before{
  background:var(--gold)!important;
  opacity:1!important;
}

/* OKOLICA — Jezioro i plaża: mapa dojścia jako główny element sekcji. */
.sheet[data-mode="area-detail"] #sheetBody .lake-map-wrap{
  width:100%!important;
  margin:0 0 14px!important;
  padding:0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:rgba(5,5,4,.14)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
.sheet[data-mode="area-detail"] #sheetBody .lake-map{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
}
.sheet[data-mode="area-detail"] #sheetBody .subpage-title + .lake-map-wrap{
  transform:translateY(-12.5dvh)!important;
  margin-bottom:calc(14px - 12.5dvh)!important;
}
.sheet[data-mode="area-detail"] #sheetBody .lake-points{
  margin-top:0!important;
}

/* OKOLICA — wszystkie podsekcje zgodne z sześciopunktowym systemem DOM. */
.sheet[data-mode="area-detail"] #sheetBody .area-points{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
.sheet[data-mode="area-detail"] #sheetBody .area-points ul{
  margin:0!important;
  padding:0!important;
}
.sheet[data-mode="area-detail"] #sheetBody .area-points li{
  padding-top:14px!important;
  padding-bottom:14px!important;
  border-top:1px solid rgba(221,187,116,.58)!important;
}
.sheet[data-mode="area-detail"] #sheetBody .area-points li:first-child{
  border-top:0!important;
}
.sheet[data-mode="area-detail"] #sheetBody .area-points li::before{
  background:var(--gold)!important;
  opacity:1!important;
}

/* Jezioro i plaża — przycisk mapy dopiero pod opisem. */
.sheet[data-mode="area-detail"] #sheetBody .lake-map-button{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:70px!important;
  margin:14px 0 0!important;
  padding:12px 16px!important;
  gap:14px!important;
  border:1.5px solid rgba(221,187,116,.82)!important;
  border-radius:16px!important;
  background:rgba(5,5,4,.18)!important;
  color:#fff!important;
  text-align:left!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}
.sheet[data-mode="area-detail"] #sheetBody .lake-map-button > svg{
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  color:var(--gold)!important;
}
.sheet[data-mode="area-detail"] #sheetBody .lake-map-button span{
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}
.sheet[data-mode="area-detail"] #sheetBody .lake-map-button strong{
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:clamp(17px,2.2vw,20px)!important;
  line-height:1.15!important;
  font-weight:600!important;
  color:var(--gold)!important;
}
.sheet[data-mode="area-detail"] #sheetBody .lake-map-button small{
  font-family:"GuestGuideBody",Arial,sans-serif!important;
  font-size:var(--gg-small-size)!important;
  line-height:1.2!important;
  color:#fff!important;
}

/* Osobny ekran mapy — można przewinąć całą mapę od góry do dołu. */
.sheet[data-mode="area-map"] #sheetBody > .lake-map-page{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:max(58px,calc(env(safe-area-inset-top) + 44px)) clamp(10px,2.5vw,24px) 24px!important;
  -webkit-overflow-scrolling:touch!important;
}
.sheet[data-mode="area-map"] #sheetBody .lake-map-full{
  width:min(100%,760px)!important;
  margin:0 auto!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
.sheet[data-mode="area-map"] #sheetBody .lake-map-full img{
  display:block!important;
  width:100%!important;
  height:auto!important;
}

/* DOM + OKOLICA — wyraźne wyróżnienie najważniejszych informacji w opisach. */
.sheet[data-mode="house-detail"] #sheetBody .content-card li strong,
.sheet[data-mode="area-detail"] #sheetBody .content-card li strong{
  font-weight:700!important;
  color:rgba(255,255,255,.98)!important;
  -webkit-text-stroke:.22px currentColor;
  text-shadow:0 0 .01px currentColor!important;
}

/* OKOLICA — jedno przeszklenie.
   Wiersze menu są przezroczyste, a szkło tworzy wyłącznie wspólna karta menu. */
#sheetBody > .area-menu-view > .menu-card > .menu-row{
  background:transparent!important;
}
#sheetBody > .area-menu-view > .menu-card > .menu-row:active{
  background:rgba(221,187,116,.07)!important;
}

/* =========================================================
   GLOBALNE SZKŁO — WERSJA POPRAWIONA
   Tafla jest nakładana WEWNĄTRZ każdego widoku, czyli NAD
   fotografią, ale POD całą treścią. Nie jest już chowana
   pod nieprzezroczystym .sheet-card.
   HOME pozostaje bez zmian.
   ========================================================= */

/* Główne menu: DOM / SPA / OKOLICA oraz pozostałe page-view.
   Istniejący ::before był nakładką zdjęcia — teraz staje się
   pełnowysokościową taflą szkła z bocznymi marginesami. */
#sheetBody > .page-view::before,
#sheetBody > .wifi-page-view::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:clamp(14px,3.4vw,34px)!important;
  right:clamp(14px,3.4vw,34px)!important;
  width:auto!important;
  height:auto!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(
    145deg,
    rgba(7,7,6,.22),
    rgba(3,3,3,.15)
  )!important;
  border-left:1px solid rgba(255,255,255,.055)!important;
  border-right:1px solid rgba(255,255,255,.035)!important;
  -webkit-backdrop-filter:blur(12px) saturate(108%)!important;
  backdrop-filter:blur(12px) saturate(108%)!important;
}

/* Podmenu / ekrany szczegółowe: ta sama tafla od góry do dołu. */
#sheetBody > .subpage::before{
  content:""!important;
  position:fixed!important;
  top:0!important;
  bottom:0!important;
  left:clamp(14px,3.4vw,34px)!important;
  right:clamp(14px,3.4vw,34px)!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(
    145deg,
    rgba(7,7,6,.22),
    rgba(3,3,3,.15)
  )!important;
  border-left:1px solid rgba(255,255,255,.055)!important;
  border-right:1px solid rgba(255,255,255,.035)!important;
  -webkit-backdrop-filter:blur(12px) saturate(108%)!important;
  backdrop-filter:blur(12px) saturate(108%)!important;
}

/* Cała właściwa zawartość zawsze nad taflą. */
#sheetBody > .page-view > *,
#sheetBody > .wifi-page-view > *,
#sheetBody > .subpage > *{
  position:relative;
  z-index:2;
}

/* Strzałka powrotu musi być najwyżej i zawsze widoczna. */
.sheet .sheet-head{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:0!important;
  z-index:500!important;
  pointer-events:none!important;
}
.sheet .sheet-head .close{
  z-index:501!important;
  pointer-events:auto!important;
}

/* Jedna tafla szkła — bez drugiej warstwy pod głównymi menu. */
#sheetBody > .house-menu-view > .menu-card,
#sheetBody > .spa-menu-view > .spa-first,
#sheetBody > .spa-menu-view > .menu-card,
#sheetBody > .area-menu-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Wiersze menu pozostają na wspólnej tafli. */
#sheetBody > .page-view > .menu-card > .menu-row,
#sheetBody > .area-menu-view > .menu-card > .menu-row{
  background:transparent!important;
}

/* Karty szczegółowe również nie tworzą drugiego przeszklenia. */
#sheetBody > .subpage .content-card,
#sheetBody > .subpage .mini-rule,
#sheetBody > .subpage .info-tile,
#sheetBody > .subpage .step,
#sheetBody > .subpage .temperature-note,
#sheetBody > .subpage .host-note,
#sheetBody > .subpage .wifi-box,
#sheetBody > .subpage .qr-box,
#sheetBody > .subpage .soft-note,
#sheetBody > .subpage .request-card,
#sheetBody > .subpage .field{
  background-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* =========================================================
   GLOBALNE SZKŁO — korekta przezroczystości i pojedynczej warstwy
   Zdjęcie ma pozostać wyraźne. Wszystkie standardowe karty,
   menu i opisy są całkowicie przezroczyste i korzystają wyłącznie
   z jednej pełnoekranowej tafli.
   ========================================================= */

/* Lżejsza tafla: mniej przyciemnienia i znacznie mniej rozmycia. */
#sheetBody > .page-view::before,
#sheetBody > .wifi-page-view::before,
#sheetBody > .subpage::before{
  background:linear-gradient(
    145deg,
    rgba(7,7,6,.105),
    rgba(3,3,3,.065)
  )!important;
  -webkit-backdrop-filter:blur(3px) saturate(104%)!important;
  backdrop-filter:blur(3px) saturate(104%)!important;
}

/* Główne menu — żadnej drugiej tafli pod kartą ani pod wierszami. */
#sheetBody > .page-view > .menu-card,
#sheetBody > .wifi-page-view > .wifi-glass-card,
#sheetBody > .spa-menu-view > .spa-first,
#sheetBody > .spa-menu-view > .menu-card,
#sheetBody .menu-row{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Podmenu i opisy — również wyłącznie jedna wspólna tafla. */
#sheetBody .content-card,
#sheetBody .mini-rule,
#sheetBody .info-tile,
#sheetBody .step,
#sheetBody .temperature-note,
#sheetBody .host-note,
#sheetBody .wifi-box,
#sheetBody .qr-box,
#sheetBody .soft-note,
#sheetBody .request-card,
#sheetBody .field{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Zachowujemy subtelny feedback po dotknięciu pozycji menu,
   bez stałego dodatkowego przeszklenia. */
#sheetBody .menu-row:active{
  background:rgba(221,187,116,.055)!important;
}

/* =========================================================
   PODMENU / OPISY — definitywnie jedna tafla szkła
   W starszych regułach tło było również przypisane do samych
   list punktów i ich elementów. Zerujemy wszystkie warstwy
   wewnętrzne ekranów szczegółowych, pozostawiając separatory,
   obramowania, tekst i globalną taflę.
   ========================================================= */

#sheetBody > .subpage .content-card,
#sheetBody > .subpage .content-card > ul,
#sheetBody > .subpage .content-card > ul > li,
#sheetBody > .subpage .thermo-points,
#sheetBody > .subpage .thermo-points > ul,
#sheetBody > .subpage .thermo-points > ul > li,
#sheetBody > .subpage .kitchen-points,
#sheetBody > .subpage .kitchen-points > ul,
#sheetBody > .subpage .kitchen-points > ul > li,
#sheetBody > .subpage .tv-points,
#sheetBody > .subpage .tv-points > ul,
#sheetBody > .subpage .tv-points > ul > li,
#sheetBody > .subpage .garden-points,
#sheetBody > .subpage .garden-points > ul,
#sheetBody > .subpage .garden-points > ul > li,
#sheetBody > .subpage .recycle-points,
#sheetBody > .subpage .recycle-points > ul,
#sheetBody > .subpage .recycle-points > ul > li,
#sheetBody > .subpage .departure-points,
#sheetBody > .subpage .departure-points > ul,
#sheetBody > .subpage .departure-points > ul > li,
#sheetBody > .subpage .area-points,
#sheetBody > .subpage .area-points > ul,
#sheetBody > .subpage .area-points > ul > li{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* =========================================================
   PODWÓJNA PEŁNOEKRANOWA TAFLA — wszystkie ekrany poza HOME
   Użytkownik wybrał czytelniejszy efekt dwóch lekkich warstw.
   Druga tafla ma dokładnie ten sam pełny wymiar i boczne
   marginesy co pierwsza — bez lokalnego szkła pod kartami.
   ========================================================= */

/* Druga pełnoekranowa tafla dla głównych ekranów/menu. */
#sheetBody > .page-view::after,
#sheetBody > .wifi-page-view::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:clamp(14px,3.4vw,34px)!important;
  right:clamp(14px,3.4vw,34px)!important;
  width:auto!important;
  height:auto!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(
    145deg,
    rgba(7,7,6,.105),
    rgba(3,3,3,.065)
  )!important;
  border-left:1px solid rgba(255,255,255,.035)!important;
  border-right:1px solid rgba(255,255,255,.025)!important;
  -webkit-backdrop-filter:blur(3px) saturate(104%)!important;
  backdrop-filter:blur(3px) saturate(104%)!important;
}

/* Druga pełnoekranowa tafla dla wszystkich ekranów szczegółowych. */
#sheetBody > .subpage::after{
  content:""!important;
  position:fixed!important;
  top:0!important;
  bottom:0!important;
  left:clamp(14px,3.4vw,34px)!important;
  right:clamp(14px,3.4vw,34px)!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(
    145deg,
    rgba(7,7,6,.105),
    rgba(3,3,3,.065)
  )!important;
  border-left:1px solid rgba(255,255,255,.035)!important;
  border-right:1px solid rgba(255,255,255,.025)!important;
  -webkit-backdrop-filter:blur(3px) saturate(104%)!important;
  backdrop-filter:blur(3px) saturate(104%)!important;
}

/* Treść zawsze nad obiema taflami. */
#sheetBody > .page-view > *,
#sheetBody > .wifi-page-view > *,
#sheetBody > .subpage > *{
  position:relative!important;
  z-index:3!important;
}

/* Lokalne karty pozostają bez własnego szkła.
   Dzięki temu wszędzie są dokładnie dwie warstwy na cały ekran,
   a nie trzecia warstwa tylko pod opisem/menu. */
#sheetBody .menu-card,
#sheetBody .wifi-glass-card,
#sheetBody .spa-first,
#sheetBody .menu-row,
#sheetBody .content-card,
#sheetBody .content-card > ul,
#sheetBody .content-card > ul > li,
#sheetBody .mini-rule,
#sheetBody .info-tile,
#sheetBody .step,
#sheetBody .temperature-note,
#sheetBody .host-note,
#sheetBody .wifi-box,
#sheetBody .qr-box,
#sheetBody .soft-note,
#sheetBody .request-card,
#sheetBody .field{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* =========================================================
   EKRANY SZCZEGÓŁOWE — bez trzeciego szkła pod opisami
   Pozostają wyłącznie dwie pełnoekranowe tafle (::before
   i ::after). Wszystkie lokalne kontenery treści są całkowicie
   przezroczyste, także ich pseudoelementy.
   ========================================================= */

#sheetBody > .subpage .content-card,
#sheetBody > .subpage .content-card::before,
#sheetBody > .subpage .content-card::after,
#sheetBody > .subpage .content-card > ul,
#sheetBody > .subpage .content-card > ul::before,
#sheetBody > .subpage .content-card > ul::after,
#sheetBody > .subpage .content-card > ul > li,
#sheetBody > .subpage .mini-rule,
#sheetBody > .subpage .mini-rule::before,
#sheetBody > .subpage .mini-rule::after,
#sheetBody > .subpage .info-tile,
#sheetBody > .subpage .info-tile::before,
#sheetBody > .subpage .info-tile::after,
#sheetBody > .subpage .step,
#sheetBody > .subpage .step::before,
#sheetBody > .subpage .step::after,
#sheetBody > .subpage .temperature-note,
#sheetBody > .subpage .temperature-note::before,
#sheetBody > .subpage .temperature-note::after,
#sheetBody > .subpage .host-note,
#sheetBody > .subpage .host-note::before,
#sheetBody > .subpage .host-note::after,
#sheetBody > .subpage .wifi-box,
#sheetBody > .subpage .wifi-box::before,
#sheetBody > .subpage .wifi-box::after,
#sheetBody > .subpage .qr-box,
#sheetBody > .subpage .qr-box::before,
#sheetBody > .subpage .qr-box::after,
#sheetBody > .subpage .soft-note,
#sheetBody > .subpage .soft-note::before,
#sheetBody > .subpage .soft-note::after,
#sheetBody > .subpage .request-card,
#sheetBody > .subpage .request-card::before,
#sheetBody > .subpage .request-card::after,
#sheetBody > .subpage .field,
#sheetBody > .subpage .field::before,
#sheetBody > .subpage .field::after{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Specjalne listy DOM i OKOLICA — również bez lokalnej tafli. */
#sheetBody > .subpage .thermo-points,
#sheetBody > .subpage .kitchen-points,
#sheetBody > .subpage .tv-points,
#sheetBody > .subpage .garden-points,
#sheetBody > .subpage .recycle-points,
#sheetBody > .subpage .departure-points,
#sheetBody > .subpage .area-points{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* =========================================================
   FINALNA KOREKTA: opisy bez trzeciej tafli + podpis jak HOME
   ========================================================= */

/* Starsze reguły trybów detail miały większą specyficzność i mimo
   wcześniejszych resetów nadal nadawały .14 tła kartom opisów.
   Zerujemy je dokładnie tymi samymi / mocniejszymi selektorami. */
.sheet[data-mode="house-detail"] #sheetBody .content-card,
.sheet[data-mode="house-detail"] #sheetBody .thermo-points,
.sheet[data-mode="house-detail"] #sheetBody .kitchen-points,
.sheet[data-mode="house-detail"] #sheetBody .tv-points,
.sheet[data-mode="house-detail"] #sheetBody .garden-points,
.sheet[data-mode="house-detail"] #sheetBody .recycle-points,
.sheet[data-mode="house-detail"] #sheetBody .departure-points,
.sheet[data-mode="area-detail"] #sheetBody .content-card,
.sheet[data-mode="area-detail"] #sheetBody .area-points,
.sheet[data-mode="spa-detail"] #sheetBody .content-card,
.sheet[data-mode="spa-detail"] #sheetBody .mini-rule,
.sheet[data-mode="spa-detail"] #sheetBody .info-tile,
.sheet[data-mode="spa-detail"] #sheetBody .step,
.sheet[data-mode="spa-detail"] #sheetBody .temperature-note,
.sheet[data-mode="spa-detail"] #sheetBody .host-note,
.sheet[data-mode="spa-detail"] #sheetBody .request-card{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Także wnętrza sześciopunktowych opisów nie tworzą własnego tła. */
.sheet[data-mode="house-detail"] #sheetBody .content-card > ul,
.sheet[data-mode="house-detail"] #sheetBody .content-card > ul > li,
.sheet[data-mode="area-detail"] #sheetBody .content-card > ul,
.sheet[data-mode="area-detail"] #sheetBody .content-card > ul > li{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Ozdobne podpisy wszystkich ekranów: dokładnie ta sama pozycja
   przy dolnej krawędzi co podpis HOME. */
#sheetBody > .page-view > .signoff,
#sheetBody > .wifi-page-view > .signoff,
#sheetBody > .rules-view > .signoff,
.sheet[data-mode$="-detail"] #sheetBody > .subpage > .signoff,
.sheet[data-mode$="-detail"] .subpage > .signoff{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  width:100%!important;
  margin:0!important;
  padding-left:20px!important;
  padding-right:20px!important;
  z-index:70!important;
  transform:none!important;
}

@media(min-width:700px){
  #sheetBody > .page-view > .signoff,
  #sheetBody > .wifi-page-view > .signoff,
  #sheetBody > .rules-view > .signoff,
  .sheet[data-mode$="-detail"] #sheetBody > .subpage > .signoff,
  .sheet[data-mode$="-detail"] .subpage > .signoff{
    position:absolute!important;
    bottom:10px!important;
  }
}

/* =========================================================
   STREFA SPA — większy odstęp przed SAUNĄ i BALIĄ
   "Zanim skorzystasz" pozostaje dokładnie w obecnej pozycji.
   Dolny blok z dwiema pozycjami przesuwamy o wysokość
   co najmniej jednego wiersza menu.
   ========================================================= */

#sheetBody > .spa-menu-view > .spa-first + .menu-card.spa-menu{
  margin-top:clamp(78px,10dvh,104px)!important;
}

/* Na niskich ekranach zachowujemy czytelny odstęp, ale nie
   wypychamy drugiej pozycji poza bezpieczny obszar ekranu. */
@media(max-height:700px){
  #sheetBody > .spa-menu-view > .spa-first + .menu-card.spa-menu{
    margin-top:clamp(58px,8dvh,72px)!important;
  }
}

/* =========================================================
   SPA — Najważniejsze zasady jako spokojna lista
   Ikony pozostają, ale układ jest taki jak w pozostałych
   opisach przewodnika: jeden punkt pod drugim.
   ========================================================= */
.sheet[data-mode="spa-detail"] #sheetBody .spa-rules-list{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  gap:0!important;
  margin:var(--gg-content-gap) 0 0!important;
  padding:8px!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  padding:14px 8px!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-bottom:1px solid rgba(221,187,116,.42)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row:last-child{
  border-bottom:0!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row > span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:30px!important;
  height:30px!important;
  color:var(--gold)!important;
  opacity:1!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row > span svg{
  width:24px!important;
  height:24px!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row p{
  margin:0!important;
  color:#fff!important;
  font-size:var(--gg-body-size)!important;
  line-height:var(--gg-body-line)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row p strong{
  font-weight:700!important;
  color:rgba(255,255,255,.98)!important;
  -webkit-text-stroke:.22px currentColor;
  text-shadow:0 0 .01px currentColor!important;
}

/* SPA — złote ikony zasad, również dla SVG z własnym fill/stroke. */
.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row > span,
.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row > span svg,
.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row > span svg *{
  color:var(--gold)!important;
  stroke:var(--gold)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .spa-rule-row > span svg [fill]:not([fill="none"]){
  fill:var(--gold)!important;
}

/* =========================================================
   SPA — SAUNA w identycznym układzie listy jak zasady SPA.
   Zachowujemy te same ikony, odstępy i separatory.
   ========================================================= */
.sheet[data-mode="spa-detail"] #sheetBody .sauna-info-list .spa-rule-row p small{
  display:block!important;
  margin:0 0 3px!important;
  color:var(--gold)!important;
  font-size:var(--gg-small-size)!important;
  line-height:1.1!important;
  letter-spacing:.08em!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-info-list .spa-rule-row p strong{
  display:inline!important;
  margin-right:4px!important;
}

/* SAUNA — wyraźne oddzielenie prośby o uruchomienie od listy informacji. */
.sheet[data-mode="spa-detail"] #sheetBody .sauna-info-list + .request-card{
  margin-top:clamp(28px,4dvh,42px)!important;
}

/* SAUNA — przycisk prośby na górze, przed pierwszym punktem listy. */
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .gold-action{
  margin-top:var(--gg-content-gap)!important;
  margin-bottom:clamp(24px,3.5dvh,36px)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .gold-action + .sauna-info-list{
  margin-top:0!important;
}

/* =========================================================
   SAUNA — przycisk uruchomienia:
   czarny tekst jak ikona + szerokość wewnątrz tafli szkła.
   ========================================================= */
.sheet[data-mode="spa-detail"] #sheetBody .subpage-title + .gold-action{
  width:calc(100% - (2 * clamp(14px,3.4vw,34px)))!important;
  max-width:none!important;
  margin-left:clamp(14px,3.4vw,34px)!important;
  margin-right:clamp(14px,3.4vw,34px)!important;
  box-sizing:border-box!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .gold-action small,
.sheet[data-mode="spa-detail"] #sheetBody .gold-action strong,
.sheet[data-mode="spa-detail"] #sheetBody .gold-action b{
  color:#11100e!important;
  -webkit-text-fill-color:#11100e!important;
}

/* =========================================================
   SAUNA — formularz prośby o uruchomienie.
   Własny selektor terminu: bez natywnego datetime-local,
   bez szarego systemowego bloku.
   ========================================================= */
.sheet[data-mode="spa-detail"] #sheetBody .sauna-request-card{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-request-card > p strong{
  color:#fff!important;
  font-weight:700!important;
  -webkit-text-stroke:.18px currentColor;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-field-label{
  display:block!important;
  margin-top:clamp(18px,2.4dvh,24px)!important;
  margin-bottom:7px!important;
  color:var(--gold)!important;
  font-size:var(--gg-small-size)!important;
  line-height:1.1!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-field-label span{
  color:rgba(255,255,255,.72)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Główne pole widoczne w formularzu. */
.sheet[data-mode="spa-detail"] #sheetBody .sauna-datetime-control{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 10px!important;
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr) 14px!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid var(--gold)!important;
  border-radius:10px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  text-align:left!important;
  color:#fff!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-datetime-control:active{
  background:rgba(221,187,116,.055)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-datetime-icon{
  width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-datetime-icon svg{
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:var(--gold)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-datetime-value{
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  color:#fff!important;
  font-size:clamp(13px,1.7vw,15px)!important;
  line-height:1!important;
  font-weight:400!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-datetime-chevron{
  color:var(--gold)!important;
  font-family:Georgia,serif!important;
  font-size:20px!important;
  line-height:1!important;
}

/* Ukryta wartość wysyłana do Supabase nie ma żadnego interfejsu. */
.sheet[data-mode="spa-detail"] #sheetBody #saunaTime[type="hidden"]{
  display:none!important;
}

/* Dodatkowa wiadomość. */
.sheet[data-mode="spa-detail"] #sheetBody .sauna-message-shell{
  width:100%!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  align-items:start!important;
  gap:9px!important;
  padding:9px 11px!important;
  border:1px solid var(--gold)!important;
  border-radius:10px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-message-shell > svg{
  width:23px!important;
  height:23px!important;
  margin-top:5px!important;
  color:var(--gold)!important;
  stroke:var(--gold)!important;
  fill:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-message-shell .field{
  width:100%!important;
  min-width:0!important;
  min-height:76px!important;
  margin:0!important;
  padding:6px 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  outline:none!important;
  font:inherit!important;
  font-size:var(--gg-body-size)!important;
  line-height:1.25!important;
  resize:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-message-shell .field::placeholder{
  color:rgba(255,255,255,.62)!important;
  -webkit-text-fill-color:rgba(255,255,255,.62)!important;
  opacity:1!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-request-card #sendSauna{
  margin-top:clamp(20px,2.8dvh,28px)!important;
}

/* =========================================================
   SAUNA — prosty picker terminu.
   Data: maks. 7 dni do przodu.
   Godzina: +/- co 15 minut.
   Dzisiaj: automatyczna blokada minionych i zbyt bliskich godzin.
   ========================================================= */
.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-overlay{
  position:fixed!important;
  z-index:900!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(0,0,0,.34)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker{
  width:min(100%,330px)!important;
  padding:15px!important;
  border:1px solid rgba(221,187,116,.82)!important;
  border-radius:15px!important;
  background:rgba(12,11,10,.72)!important;
  background-image:none!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-head{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) 26px!important;
  align-items:center!important;
  gap:8px!important;
  padding-bottom:11px!important;
  border-bottom:1px solid rgba(221,187,116,.34)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-head > span{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-head svg{
  width:23px!important;
  height:23px!important;
  fill:none!important;
  stroke:var(--gold)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-head small{
  display:block!important;
  margin-bottom:2px!important;
  color:var(--gold)!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-head strong{
  display:block!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:500!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-close{
  width:26px!important;
  height:26px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--gold)!important;
  font-size:23px!important;
  line-height:1!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-picker{
  padding:14px 0!important;
  border-bottom:1px solid rgba(221,187,116,.24)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-picker > small{
  display:block!important;
  margin-bottom:7px!important;
  color:var(--gold)!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-control{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:8px!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-control > strong{
  min-width:0!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:500!important;
  text-align:center!important;
  text-transform:capitalize!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-time-control > strong{
  font-size:25px!important;
  font-weight:400!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-btn{
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid rgba(221,187,116,.62)!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--gold)!important;
  font-family:Arial,sans-serif!important;
  font-size:24px!important;
  font-weight:300!important;
  line-height:1!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-btn:active:not(:disabled){
  background:rgba(221,187,116,.10)!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-step-btn:disabled{
  opacity:.22!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-time-note{
  min-height:15px!important;
  margin:7px 0 0!important;
  color:rgba(255,255,255,.62)!important;
  font-size:10px!important;
  line-height:1.35!important;
  text-align:center!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .sauna-picker-confirm{
  width:100%!important;
  height:39px!important;
  margin-top:13px!important;
  border:1px solid var(--gold)!important;
  border-radius:9px!important;
  background:var(--gold)!important;
  color:#11100e!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.07em!important;
}



/* =========================================================
   STREFA SPA — prośba o uruchomienie sauny w menu głównym.
   Przycisk zachowuje zaakceptowany wygląd modułu z ekranu sauny.
   ========================================================= */
.sheet[data-mode="spa"] #sheetBody > .spa-menu-view > .spa-first + .gold-action{
  width:calc(100% - (2 * clamp(14px,3.4vw,34px)))!important;
  max-width:none!important;
  margin-top:clamp(68px,8.5dvh,88px)!important;
  margin-left:clamp(14px,3.4vw,34px)!important;
  margin-right:clamp(14px,3.4vw,34px)!important;
  margin-bottom:0!important;
  box-sizing:border-box!important;
}

.sheet[data-mode="spa"] #sheetBody > .spa-menu-view > .gold-action + .menu-card.spa-menu{
  margin-top:clamp(18px,2.6dvh,28px)!important;
}

.sheet[data-mode="spa"] #sheetBody .gold-action small,
.sheet[data-mode="spa"] #sheetBody .gold-action strong,
.sheet[data-mode="spa"] #sheetBody .gold-action b{
  color:#11100e!important;
  -webkit-text-fill-color:#11100e!important;
}

@media(max-height:700px){
  .sheet[data-mode="spa"] #sheetBody > .spa-menu-view > .spa-first + .gold-action{
    margin-top:clamp(48px,7dvh,60px)!important;
  }

  .sheet[data-mode="spa"] #sheetBody > .spa-menu-view > .gold-action + .menu-card.spa-menu{
    margin-top:14px!important;
  }
}


/* =========================================================
   BALIA Z HYDROMASAŻEM — ten sam układ listy co w saunie.
   ========================================================= */
.sheet[data-mode="spa-detail"] #sheetBody .tub-info-list .spa-rule-row p small{
  display:block!important;
  margin:0 0 3px!important;
  color:var(--gold)!important;
  font-size:var(--gg-small-size)!important;
  line-height:1.1!important;
  letter-spacing:.08em!important;
}

.sheet[data-mode="spa-detail"] #sheetBody .tub-info-list .spa-rule-row p strong{
  display:inline!important;
  margin-right:4px!important;
}


/* =========================================================
   OZDOBNY NAPIS — FINALNA, WSPÓLNA POZYCJA DLA CAŁEGO PRZEWODNIKA.
   Każdy podpis poza HOME otrzymuje dokładnie tę samą odległość
   od dolnej krawędzi co podpis na stronie głównej.
   Reguła jest celowo globalna dla .signoff, aby objąć wszystkie
   obecne menu, podmenu, formularze i ekrany szczegółowe.
   ========================================================= */
.sheet #sheetBody .signoff,
.sheet #sheetBody footer.signoff{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:20px!important;
  padding-right:20px!important;
  transform:none!important;
  z-index:70!important;
}


/* =========================================================
   POTRZEBUJESZ POMOCY? — pole opisu.
   Delikatna złota ramka zwiększa czytelność miejsca do wpisania
   wiadomości, bez zmiany zaakceptowanego układu formularza.
   ========================================================= */
#sheetBody textarea{
  border:1px solid rgba(221,187,116,.72)!important;
  border-radius:10px!important;
  background-color:rgba(5,5,4,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(221,187,116,.06)!important;
}

#sheetBody textarea:focus{
  border-color:var(--gold)!important;
  outline:none!important;
  box-shadow:0 0 0 2px rgba(221,187,116,.12)!important;
}


/* =========================================================
   HOME - korekta centrowania ikon i treści 4 głównych kafelków.
   WI-FI / DOM / PRYWATNA STREFA SPA / OKOLICA.
   Wyłącznie geometria wewnątrz kafelków - bez zmiany ich
   rozmiaru, pozycji, tła, typografii ani układu strony.
   ========================================================= */
.home .tile{
  text-align:center!important;
}

.home .tile > .tile-icon{
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.home .tile > .tile-icon svg{
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.home .tile > .tile-title,
.home .tile > .tile-sub{
  align-self:center!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}


/* =========================================================
   HOME - FINALNA KOREKTA SZEROKIEGO EKRANU.
   Na komputerze centrujemy CAŁY blok 2 x 2 jako jedną zwartą
   grupę. Nie zmieniamy telefonu, tabletu ani wnętrza kafelków.
   ========================================================= */
@media(min-width:1200px){
  .home .tiles{
    display:grid!important;
    grid-template-columns:repeat(2,144px)!important;
    grid-auto-flow:row!important;
    width:300px!important;
    max-width:300px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    column-gap:12px!important;
    row-gap:12px!important;
    justify-content:center!important;
    justify-items:stretch!important;
  }

  .home .tile{
    width:144px!important;
    min-width:144px!important;
    max-width:144px!important;
    margin:0!important;
    justify-self:stretch!important;
  }
}


/* =========================================================
   POTRZEBUJESZ POMOCY - korekta szerokiego ekranu.
   Centrujemy cały formularz zgłoszenia jako jedną sekcję.
   Telefon i tablet pozostają bez zmian.
   ========================================================= */
@media(min-width:1200px){
  #sheetBody > .page-view:has(.hero-help) > .stack{
    width:min(100%,720px)!important;
    max-width:720px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box!important;
  }

  #sheetBody > .page-view:has(.hero-help) > .stack > .content-card{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}


/* =========================================================
   OZDOBNE NAPISY - złoty kolor.
   Dotyczy dekoracyjnych podpisów/tekstów końcowych przewodnika.
   ========================================================= */
.home .welcome-copy,
.home .welcome-copy *,
#sheetBody .signoff p,
#sheetBody footer.signoff p{
  color:var(--gold)!important;
}

/* =========================================================
   NAWIGACJA - złote kółko z czarną strzałką.
   Wyłącznie wygląd istniejącego przycisku powrotu.
   ========================================================= */
.close,
.back-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:50%!important;
  background:var(--gold)!important;
  box-shadow:0 3px 12px rgba(0,0,0,.32)!important;
}

/* Usuwamy ewentualny stary trzon/element strzałki. */
.close::after,
.back-btn::after{
  display:none!important;
  content:none!important;
}

/* Czarny łamany znak „<” pośrodku złotego kółka. */
.close::before,
.back-btn::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:10px!important;
  height:10px!important;
  border-left:2px solid #11100e!important;
  border-bottom:2px solid #11100e!important;
  border-top:0!important;
  border-right:0!important;
  background:transparent!important;
  opacity:1!important;
  transform:translate(-38%,-50%) rotate(45deg)!important;
}


/* =========================================================
   FINALNA KOREKTA - OZDOBNE NAPISY + PRZYCISK POWROTU
   1) wszystkie ozdobne podpisy są złote,
   2) złote kółko bez obramowania,
   3) wyraźna czarna strzałka w środku.
   ========================================================= */

/* Ozdobny napis HOME oraz wszystkie ozdobne podpisy ekranów. */
.home > .home-signoff,
.home .welcome-copy.home-signoff,
#sheetBody > .page-view > footer.signoff > p,
#sheetBody > .page-view > .signoff > p,
#sheetBody > .rules-view > footer.signoff > p,
#sheetBody > .wifi-page-view > footer.signoff > p,
.sheet[data-mode$="-detail"] #sheetBody > .subpage > footer.signoff > p,
.sheet[data-mode$="-detail"] .subpage > footer.signoff > p,
.sheet[data-mode$="-detail"] .subpage > .signoff > p,
#sheetBody .signoff p,
#sheetBody footer.signoff p{
  color:var(--gold)!important;
  -webkit-text-fill-color:var(--gold)!important;
}

/* Złote kółko nawigacyjne - bez obramowania. */
.close,
.back-btn{
  position:relative!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:50%!important;
  background:var(--gold)!important;
  background-color:var(--gold)!important;
  box-shadow:0 3px 12px rgba(0,0,0,.32)!important;
  overflow:visible!important;
}

/* Kasujemy wszystkie wcześniejsze elementy rysowanej strzałki. */
.close::after,
.back-btn::after{
  content:none!important;
  display:none!important;
}

/* Jednoznaczna czarna strzałka jako znak, idealnie w środku kółka. */
.close::before,
.back-btn::before{
  content:"‹"!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  inset:0!important;
  width:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 2px 2px 0!important;
  border:0!important;
  background:transparent!important;
  color:#11100e!important;
  -webkit-text-fill-color:#11100e!important;
  opacity:1!important;
  font-family:Arial,sans-serif!important;
  font-size:34px!important;
  font-weight:400!important;
  line-height:40px!important;
  text-align:center!important;
  transform:none!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}


/* =========================================================
   FINALNA NAPRAWA STRZAŁKI NAWIGACYJNEJ
   Usuwamy jasny znak tekstowy z samego buttona i rysujemy
   czarną strzałkę wyłącznie z dwóch czarnych krawędzi.
   ========================================================= */
.close,
.back-btn{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  border:0!important;
  outline:0!important;
  background:var(--gold)!important;
  background-color:var(--gold)!important;
}

.close *,
.back-btn *{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}

/* Nie używamy już znaku ‹, żeby globalne reguły koloru nie mogły go rozjaśnić. */
.close::before,
.back-btn::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  inset:auto!important;
  width:11px!important;
  height:11px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-left:3px solid #11100e!important;
  border-bottom:3px solid #11100e!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:translate(-35%,-50%) rotate(45deg)!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}

.close::after,
.back-btn::after{
  content:none!important;
  display:none!important;
}


/* =========================================================
   JEDYNA ZMIANA - DEFINITWNA CZARNA STRZAŁKA NAWIGACYJNA
   Naprawa konfliktu specyficzności z wcześniejszą regułą:
   .sheet .sheet-head .close::before
   Niczego poza wyglądem strzałki nie zmieniamy.
   ========================================================= */

/* Przycisk zamknięcia/powrotu w nagłówku sheet:
   złote koło bez obramowania. */
.sheet .sheet-head .close,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close{
  border:0!important;
  outline:0!important;
  border-radius:50%!important;
  background:var(--gold)!important;
  background-color:var(--gold)!important;
}

/* Czarna strzałka ma dokładnie taką samą lub większą
   specyficzność niż stara złota reguła, więc nie może zostać
   przez nią nadpisana. */
.sheet .sheet-head .close::before,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  inset:auto!important;
  width:10px!important;
  height:10px!important;
  margin:0!important;
  padding:0!important;
  border-top:0!important;
  border-right:0!important;
  border-left:3px solid #11100e!important;
  border-bottom:3px solid #11100e!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:translate(-35%,-50%) rotate(45deg)!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}

.sheet .sheet-head .close::after,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close::after{
  content:none!important;
  display:none!important;
}

/* Wewnętrzny przycisk .back-btn - ten sam wygląd. */
#sheetBody .back-btn{
  border:0!important;
  outline:0!important;
  border-radius:50%!important;
  background:var(--gold)!important;
  background-color:var(--gold)!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

#sheetBody .back-btn::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  inset:auto!important;
  width:10px!important;
  height:10px!important;
  margin:0!important;
  padding:0!important;
  border-top:0!important;
  border-right:0!important;
  border-left:3px solid #11100e!important;
  border-bottom:3px solid #11100e!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:translate(-35%,-50%) rotate(45deg)!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}

#sheetBody .back-btn::after{
  content:none!important;
  display:none!important;
}


/* =========================================================
   JEDYNA ZMIANA - IDEALNE WYŚRODKOWANIE CZARNEJ STRZAŁKI
   Kółko, kolor, rozmiar i cały pozostały projekt bez zmian.
   ========================================================= */
.sheet .sheet-head .close::before,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close::before,
#sheetBody .back-btn::before{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) rotate(45deg)!important;
}


/* =========================================================
   JEDYNA ZMIANA - cieplejszy, jaśniejszy brąz strzałki.
   Położenie, kółko i cały pozostały projekt bez zmian.
   ========================================================= */
.sheet .sheet-head .close::before,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close::before,
#sheetBody .back-btn::before{
  border-left-color:#5a4028!important;
  border-bottom-color:#5a4028!important;
}


/* =========================================================
   JEDYNA ZMIANA - delikatnie mniejsze kółko nawigacyjne.
   40 px -> 36 px. Strzałka pozostaje bez zmian.
   ========================================================= */
.sheet .sheet-head .close,
.sheet:has(#sheetBody > .rules-view) .sheet-head .close,
#sheetBody .back-btn{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
}


/* =========================================================
   JEDYNA ZMIANA - MAPA DOJŚCIA NAD JEZIORO NA KOMPUTERZE
   Na szerokim ekranie mapa dopasowuje się do dostępnej
   wysokości okna zamiast wychodzić poza dolną krawędź.
   Telefon/tablet oraz cały pozostały projekt bez zmian.
   ========================================================= */
@media (min-width:1200px){
  #sheetBody img[src*="mapa-jezioro"]{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:calc(100vh - 220px)!important;
    object-fit:contain!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* =========================================================
   JEDYNA ZMIANA - MAPA DOJŚCIA NAD JEZIORO NA TABLECIE
   Telefon pozostaje bez zmian.
   Desktop pozostaje bez zmian.
   Na tablecie mapa dopasowuje się także do wysokości ekranu,
   dzięki czemu jej dolna część nie jest ucinana.
   ========================================================= */
@media (min-width:768px) and (max-width:1199px){
  #sheetBody img[src*="mapa-jezioro"]{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - 210px)!important;
    object-fit:contain!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* =========================================================
   JEDYNA ZMIANA - IKONA W PRZYCISKU „ZOBACZ MAPKĘ”
   Stara czarna ikona zostaje ukryta.
   W jej miejscu pojawia się czytelny złoty znacznik lokalizacji.
   Cały pozostały projekt bez zmian.
   ========================================================= */
.sheet[data-mode="area-detail"] #sheetBody .lake-map-button > svg{
  display:none!important;
}

.sheet[data-mode="area-detail"] #sheetBody .lake-map-button::before{
  content:""!important;
  display:block!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  margin:0 4px!important;
  border:3px solid var(--gold)!important;
  border-radius:50% 50% 50% 0!important;
  background:transparent!important;
  box-sizing:border-box!important;
  transform:rotate(-45deg)!important;
  position:relative!important;
  box-shadow:none!important;
}

.sheet[data-mode="area-detail"] #sheetBody .lake-map-button::after{
  content:""!important;
  position:absolute!important;
  left:27px!important;
  top:50%!important;
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:var(--gold)!important;
  transform:translate(-50%,-70%)!important;
  pointer-events:none!important;
}


/* =========================================================
   TELEFON W POZIOMIE - RESPONSYWNOŚĆ WEDŁUG WYSOKOŚCI
   Dotyczy wyłącznie niskiego ekranu w orientacji poziomej.
   Widok pionowy telefonu, tablet i desktop pozostają bez zmian.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  /* Cały przewodnik może przewijać się pionowo przy małej wysokości. */
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .app,
  .home,
  .sheet,
  .sheet-inner,
  #sheetBody{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* HOME nie próbuje już zmieścić wszystkiego na siłę
     w bardzo niskim poziomym ekranie. */
  .home{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding-bottom:28px!important;
  }

  .home .tiles{
    flex:none!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }

  .home .tile{
    height:auto!important;
    min-height:112px!important;
    overflow:visible!important;
  }

  .home .tile-title,
  .home .tile-sub{
    position:relative!important;
    overflow:visible!important;
    max-height:none!important;
    opacity:1!important;
  }

  /* Ozdobny podpis HOME uczestniczy w normalnym układzie,
     zamiast wisieć stale przy dolnej krawędzi ekranu. */
  .home .home-signoff,
  .home .welcome-copy.home-signoff{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin-top:22px!important;
    margin-bottom:8px!important;
    transform:none!important;
  }

  /* To samo dla ozdobnych podpisów wewnątrz przewodnika:
     przy małej wysokości są pod treścią i można do nich przewinąć. */
  .sheet #sheetBody .signoff,
  .sheet #sheetBody footer.signoff{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin-top:24px!important;
    margin-bottom:8px!important;
    transform:none!important;
  }

  /* Treść otwartych ekranów może być normalnie przewijana. */
  .sheet{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #sheetBody{
    padding-bottom:24px!important;
  }
}


/* =========================================================
   JEDYNA ZMIANA - PRZEWIJANIE NA TELEFONIE W POZIOMIE
   Proporcje z poprzedniej poprawki pozostają bez zmian.
   Scroll otrzymuje właściwy aktywny kontener .app.
   Tablet, desktop i telefon pionowo bez zmian.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  .app{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }

  .home{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .sheet{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .sheet-inner,
  #sheetBody{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
}


/* =========================================================
   TELEFON POZIOMO - DEFINITWNA NAPRAWA PRZEWIJANIA
   Przyczyna: faktycznym kontenerem aplikacji jest .guide,
   a wcześniejsza poprawka przypisywała scroll do .app.
   Dodatkowo starsze reguły blokowały .guide oraz #sheetBody
   na dokładnie 100dvh z overflow:hidden.
   TYLKO telefon w poziomie. Proporcje bez zmian.
   ========================================================= */
@media (orientation:landscape) and (max-width:699px) and (max-height:600px){

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  /* To jest rzeczywisty główny kontener strony. */
  .guide{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }

  /* HOME może być wyższy od ekranu - wtedy przewija się .guide. */
  .home{
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Otwarty przewodnik nadal zajmuje ekran, ale jego karta
     otrzymuje własne przewijanie dotykowe. */
  .sheet{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  .sheet-card{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }

  /* Usuwamy blokadę wysokości 100dvh/overflow:hidden,
     która uniemożliwiała powstanie obszaru do przewinięcia. */
  .sheet-card > #sheetBody{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #sheetBody > .page-view{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Szczegóły DOM / SPA / OKOLICA mają już własny scroll.
     Przy małej wysokości telefonu zapewniamy mu pełny viewport. */
  .sheet[data-mode$="-detail"] .sheet-card{
    overflow:hidden!important;
  }

  .sheet[data-mode$="-detail"] #sheetBody{
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  .sheet[data-mode$="-detail"] .subpage{
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
}


/* =========================================================
   TELEFON TRZYMANY POZIOMO - PRZEWIJANIE TREŚCI W PIONIE
   TYLKO telefon: szerokość do 699 px i mała wysokość ekranu.
   Tablet i komputer pozostają nietknięte.
   ========================================================= */
@media screen and (orientation:landscape) and (max-width:699px) and (max-height:600px){

  html,
  body{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  /* Główny viewport telefonu przewija się wyłącznie góra/dół. */
  .guide{
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }

  /* HOME może być wyższy niż poziomy ekran telefonu. */
  .home{
    position:relative!important;
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:32px!important;
  }

  /* Po otwarciu działu przewijanym viewportem jest karta przewodnika. */
  .sheet{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  .sheet-card{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }

  .sheet-card > #sheetBody{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:32px!important;
  }

  #sheetBody > .page-view{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Ekrany szczegółów również przewijają się tylko góra/dół. */
  .sheet[data-mode$="-detail"] .sheet-card{
    overflow:hidden!important;
  }

  .sheet[data-mode$="-detail"] #sheetBody{
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }

  .sheet[data-mode$="-detail"] .subpage{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding-bottom:32px!important;
  }
}


/* =========================================================
   TELEFON W POZIOMIE - SCROLL PIONOWY NA WSZYSTKICH EKRANACH
   FINALNA KOREKTA.
   Ważne: NIE ograniczamy szerokością 699 px, ponieważ telefon
   po obróceniu może mieć CSS viewport szerszy niż 699 px.
   Warunek pointer:coarse + mała wysokość obejmuje telefon,
   ale nie desktop. Tablet pozostaje poza zmianą dzięki wysokości.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  /* HOME - rzeczywisty przewijany viewport. */
  .guide{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }

  .home{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:32px!important;
  }

  /* GŁÓWNE EKRANY po kliknięciu kafelka z HOME.
     Starszy CSS ustawiał #sheetBody i .page-view jako absolute,
     100dvh i overflow:hidden - to właśnie blokowało scroll. */
  .sheet{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  .sheet-card{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }

  .sheet-card > #sheetBody{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #sheetBody > .page-view,
  #sheetBody > .wifi-page-view,
  #sheetBody > .spa-menu-view{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:32px!important;
  }

  /* SPA miało dodatkowo wymuszone height/max-height:100%. */
  .sheet[data-mode="spa"] #sheetBody,
  .sheet[data-mode="spa"] .spa-menu-view{
    height:auto!important;
    min-height:calc(100dvh + 1px)!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Ozdobne podpisy na HOME i głównych ekranach są częścią treści,
     więc nie nachodzą na nią i przewijają się razem ze stroną. */
  .home .home-signoff,
  .home .welcome-copy.home-signoff,
  .sheet #sheetBody .signoff,
  .sheet #sheetBody footer.signoff{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    transform:none!important;
  }

  /* Szczegółowe opisy już przewijały się prawidłowo.
     Zachowujemy ich dotychczasowy mechanizm scrollowania. */
  .sheet[data-mode$="-detail"] .sheet-card{
    overflow:hidden!important;
  }

  .sheet[data-mode$="-detail"] #sheetBody{
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }

  .sheet[data-mode$="-detail"] .subpage{
    height:100%!important;
    min-height:100%!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
}


/* =========================================================
   JEDYNA ZMIANA - OZDOBNY NAPIS W SZCZEGÓŁOWYM MENU
   Telefon w poziomie: napis pozostaje stale przy dolnej
   krawędzi ekranu i NIE przewija się razem z treścią.
   Pozostałe ekrany i urządzenia bez zmian.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  .sheet[data-mode$="-detail"] .subpage > .signoff,
  .sheet[data-mode$="-detail"] .subpage > footer.signoff{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:20px!important;
    padding-right:20px!important;
    transform:none!important;
    z-index:70!important;
    pointer-events:none!important;
  }

  /* Rezerwa pod stałym podpisem, aby ostatnia linia treści
     nie mogła schować się bezpośrednio pod napisem. */
  .sheet[data-mode$="-detail"] .subpage{
    padding-bottom:76px!important;
  }
}


/* =========================================================
   FINALNA NAPRAWA - OZDOBNY NAPIS W SZCZEGÓŁOWYM MENU
   Przyczyna poprzedniego błędu:
   reguła ".sheet #sheetBody .signoff" ma selektor z ID i przez
   większą specyficzność wymuszała position:relative.
   Poniższy selektor zawiera to samo ID + dokładny tryb detail,
   więc skutecznie utrzymuje podpis przy dolnej krawędzi.
   TYLKO telefon dotykowy w poziomie.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  .sheet[data-mode$="-detail"] #sheetBody .subpage > footer.signoff,
  .sheet[data-mode$="-detail"] #sheetBody .subpage > .signoff{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding-left:20px!important;
    padding-right:20px!important;
    transform:none!important;
    z-index:999!important;
    pointer-events:none!important;
  }

  .sheet[data-mode$="-detail"] #sheetBody .subpage{
    padding-bottom:82px!important;
  }
}


/* =========================================================
   JEDYNA ZMIANA - OZDOBNY NAPIS W SZCZEGÓŁOWYM MENU
   Telefon w poziomie:
   - podpis jest POD CAŁYM OPISEM,
   - nie jest przyklejony do ekranu,
   - przewija się pionowo razem z całą treścią,
   - pojawia się dopiero po dojściu do końca opisu.
   Pozostałe urządzenia i ekrany bez zmian.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  .sheet[data-mode$="-detail"] #sheetBody .subpage > footer.signoff,
  .sheet[data-mode$="-detail"] #sheetBody .subpage > .signoff{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin-top:28px!important;
    margin-bottom:10px!important;
    padding-left:20px!important;
    padding-right:20px!important;
    transform:none!important;
    z-index:auto!important;
    pointer-events:auto!important;
  }

  /* Usuwamy dużą rezerwę potrzebną wcześniej dla podpisu fixed.
     Zostaje tylko naturalne miejsce na końcu przewijanej treści. */
  .sheet[data-mode$="-detail"] #sheetBody .subpage{
    padding-bottom:18px!important;
  }
}


/* =========================================================
   JEDYNA ZMIANA - OZDOBNY NAPIS NAD SZKLANYM TŁEM
   Szczegółowe opisy (jezioro, plaża, zakupy itd.) na telefonie
   w poziomie: podpis nadal przewija się razem z treścią i jest
   jej zakończeniem, ale wizualnie znajduje się nad warstwą glass.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){

  .sheet[data-mode$="-detail"] #sheetBody .subpage > footer.signoff,
  .sheet[data-mode$="-detail"] #sheetBody .subpage > .signoff{
    position:relative!important;
    z-index:80!important;
    isolation:isolate!important;
  }

  .sheet[data-mode$="-detail"] #sheetBody .subpage > footer.signoff p,
  .sheet[data-mode$="-detail"] #sheetBody .subpage > .signoff p{
    position:relative!important;
    z-index:81!important;
  }
}