/* Kozmetika Dada — shared styles */

/* Self-hosted fonts (no external Google Fonts request) */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/marcellus-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/marcellus-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/outfit-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/outfit-latin-ext.woff2) format('woff2');unicode-range:U+0100-010E,U+0110-0164,U+0166-013D,U+013F-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* Patch: Outfit's ľ/ď/ť glyphs have an oversized advance width that reads as a stray space (e.g. "podľa"). Swap in Work Sans just for these 3 codepoints. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/worksans-caron-patch.woff2) format('woff2');unicode-range:U+010F,U+0165,U+013E;}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/sacramento-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Sacramento';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/sacramento-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

*{box-sizing:border-box;}
html{background:#f1f0e8;}
body{margin:0;background:transparent;font-family:'Outfit',sans-serif;color:#4a4d42;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
a,button{-webkit-tap-highlight-color:transparent;}
img{display:block;max-width:100%;}

/* Shared typography (unified across pages) */
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7d8a6c;}
.h1-page{font-family:'Marcellus',serif;font-weight:400;color:#2a2e26;font-size:clamp(40px,5vw,60px);}
.h2-section{font-family:'Marcellus',serif;font-weight:400;color:#2a2e26;font-size:clamp(28px,3.4vw,40px);}
.h2-section-dark{font-family:'Marcellus',serif;font-weight:400;color:#fff;font-size:clamp(30px,3.6vw,44px);}

/* Header responsive */
#desktopNav{display:flex;}
#burgerBtn{display:none;}

/* Logo v hlavičke: marka + „Kozmetika Dada" + podtitul PEZINOK.
   Rozmery zámerne tu a nie v inline štýloch v _header.html — inline štýl
   prebije pravidlo zo štýlopisu, takže mediálne dotazy nižšie by boli mŕtve.

   Pomery lockupu: medzera 0,39× marka, názov 0,59× marka, podtitul 0,23× marka.
   Podtitul spravil z textu dvojriadkový blok vysoký ako marka, takže názov
   stratil dominanciu a pôvodná medzera 10 px pôsobila natlačene. Výšku
   hlavičky určuje pilulka navigácie (50,5 px), nie logo — priestor tu je.

   Marka aj medzera sú v em, teda odvodené od veľkosti názvu — pomery tak
   platia pri každej veľkosti a mediálne dotazy nižšie menia jediné číslo. */
#siteLogo{display:flex;align-items:center;gap:.654em;flex-shrink:0;font-family:'Marcellus',serif;font-size:26px;letter-spacing:.04em;color:#2a2e26;}
#siteLogo .logo-mark{width:1.692em;height:1.692em;flex-shrink:0;}
#siteLogoText{display:flex;flex-direction:column;gap:2px;}
#siteLogoText .logo-name{line-height:1.1;}
.logo-sub{font-family:'Outfit',sans-serif;font-weight:500;line-height:1;}
/* Spodná hranica, aby verzálky s prestrkaním neboli pri zmenšenom logu drobné. */
#siteLogo .logo-sub{font-size:clamp(8.5px,.385em,10px);letter-spacing:.22em;color:#9a9c8f;}

@media(max-width:1040px){
  /* Plná navigácia sa sem ešte zmestí, ale len keď sa zmenší logo aj odsadenie
     odkazov. Pôvodne sa marka skladala nad text a odkazy sa lámali do dvoch
     riadkov — hlavička narástla na 111 px oproti rozpierke 87 px a prekrývala
     obsah pod sebou. Preto logo ostáva v riadku a nav sa zúži. */
  #siteLogo{font-size:19px;}
  #siteLogo .logo-sub{letter-spacing:.16em;}
  /* Cez #desktopNav, nie cez samotné .nav-link — základné pravidlo .nav-link je
     v súbore nižšie a pri rovnakej špecifickosti by vyhralo ono. */
  #desktopNav .nav-link{padding-left:11px;padding-right:11px;}
}
/* Poistka proti zalomeniu odkazu do dvoch riadkov: to je jediné, čo vie výšku
   hlavičky nafúknuť nad rozpierku bez toho, aby si to bolo vidno na šírke. */
#desktopNav a{white-space:nowrap;}
@media(max-width:880px){
  #desktopNav{display:none!important;}
  #burgerBtn{display:flex!important;}
  #hdrRow{padding-left:22px!important;padding-right:22px!important;}
  /* Navigáciu prebral burger, takže logo môže rásť späť do plnej veľkosti —
     ale na úzkych telefónoch sa vedľa tlačidla Menu nezmestí. Namiesto ďalšieho
     breakpointu rastie plynulo so šírkou okna a zastaví sa na 26 px.
     Vzorec: logo zaberá ~10,3× veľkosť písma, tlačidlo Menu s medzerou
     a odsadením ~160 px, takže sa zmestí (šírka − 160) / 10,3, so zvyškom
     na istotu. Bez toho bola hlavička na iPhone SE orezaná o 31 px. */
  #siteLogo{font-size:clamp(17px,calc(9.71vw - 17px),26px);letter-spacing:.04em;}
  #siteLogo .logo-sub{letter-spacing:.22em;}
}
@media(max-width:400px){
  /* Na najužších telefónoch je slovo „Menu" vedľa ikony to jediné, čo bráni
     logu zmestiť sa. Tlačidlo si ponecháva aria-label, takže čítačka obrazovky
     oň nepríde. */
  #burgerBtn > span:last-child{display:none;}
  #burgerBtn{padding:0 15px!important;}
}

/* Footer responsive — on wide screens each .footer-col is display:contents so its two
   sections act as plain grid items (keeps the 4-column row); on narrower screens each
   becomes its own independent top-to-bottom flex column, so a short section doesn't
   force the section below it to wait for the tallest item in the same grid row. */
.footer-col{display:contents;}
@media(max-width:760px){
  #footerGrid{display:flex!important;gap:32px!important;padding-left:24px!important;padding-right:24px!important;align-items:flex-start;}
  .footer-col{display:flex!important;flex-direction:column;gap:28px;flex:1 1 0;min-width:0;}
  #footerBottom{padding-left:24px!important;padding-right:24px!important;}
}
@media(max-width:460px){
  #footerGrid{flex-direction:column!important;gap:28px!important;}
}

/* Skip to content */
#skipLink:focus{top:12px;}

/* Hover utilities */
.card-hover{transition:transform .3s ease,box-shadow .3s ease;}
.card-hover:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(79,93,69,.12)!important;}
.chip-hover{transition:transform .25s ease,box-shadow .25s ease;}
.chip-hover:hover{transform:translateY(-1.5px);box-shadow:0 7px 16px rgba(79,93,69,.09);}
.btn-hover{transition:transform .25s ease,box-shadow .25s ease;}
.btn-hover:hover{transform:translateY(-1.5px);box-shadow:0 10px 22px rgba(79,93,69,.14);}

/* Sticky reserve button — reveal uses translateY too, so hover lift only applies once visible (hidden state has pointer-events:none anyway) */
.sticky-reserve{opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease,box-shadow .25s ease;}
.sticky-reserve:not(.visible){transform:translateY(14px);}
.sticky-reserve.visible{opacity:1;pointer-events:auto;}
.sticky-reserve.visible:hover{transform:translateY(-1.5px);box-shadow:0 22px 50px rgba(79,93,69,.42);}

/* Reusable component classes (shared inline-style patterns) */
.price-card{scroll-margin-top:160px;background:#fbfaf5;border-radius:28px;padding:clamp(32px,4vw,48px);box-shadow:0 14px 40px rgba(79,93,69,.08);}
.price-name{font-family:'Marcellus',serif;font-size:16.5px;color:#2a2e26;}
.price-value{font-size:17px;color:#4f5d45;font-weight:600;}
.price-meta{font-size:12px;color:#9a9c8f;}
.price-sub{font-size:13.5px;color:#85887b;margin-top:3px;}
.price-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 4px;border-bottom:1px solid #eee9df;}
.price-row-start{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 4px;border-bottom:1px solid #eee9df;}
.row-end{display:flex;justify-content:flex-end;margin-bottom:10px;}
.text-right{text-align:right;}
.text-right-nowrap{text-align:right;white-space:nowrap;}
.img-cover{width:100%;height:100%;object-fit:cover;}
.brand-badge{flex-shrink:0;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#4f5d45;background:#eaeadd;padding:6px 13px;border-radius:999px;}
.tab-pill{flex:none;padding:11px 18px;border-radius:999px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;background:#fbfaf5;color:#4f5d45;border:1px solid #e0e1d4;cursor:pointer;white-space:nowrap;}
.tab-pill-sm{flex:none;padding:10px 18px;border-radius:999px;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:500;background:#fbfaf5;color:#4f5d45;border:1px solid #e0e1d4;cursor:pointer;white-space:nowrap;}
.pill-link{display:inline-flex;align-items:center;gap:9px;background:#fbfaf5;border:1px solid #e0e1d4;border-radius:999px;padding:12px 22px;font-size:13.5px;font-weight:600;color:#4f5d45;}
.tag-card{background:#fbfaf5;border:1px solid #e0e1d4;border-radius:18px;padding:22px 24px;box-shadow:0 8px 22px rgba(79,93,69,.06);}
.card-title-sm{font-size:15px;font-weight:600;color:#2a2e26;margin-bottom:6px;}
.body-text-sm{font-size:13.5px;line-height:1.6;color:#85887b;}
.nav-link{font-size:13.5px;color:#76796c;padding:9px 15px;border-radius:999px;transition:color .2s ease,background .2s ease;}
.nav-link:hover{color:#2a2e26!important;background:#eaeadd;}
.footer-link{display:block;font-size:13.5px;margin-bottom:9px;color:#cdd4c2;}
.lifting-thumb{position:relative;width:286px;height:381px;flex-shrink:0;aspect-ratio:3/4;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(79,93,69,.14);}
.review-site-link-text-short{display:none;}
@media(max-width:760px){
  .lifting-thumb{width:126px;height:168px;}
  .scroll-fade-wrap{margin-left:-20px!important;margin-right:-20px!important;}
  .doplnkove-card{flex:1 1 100%!important;max-width:100%!important;}
  .review-site-links{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .review-site-links .pill-link{justify-content:center;padding-left:12px!important;padding-right:12px!important;}
  .review-site-link-text{display:none;}
  .review-site-link-text-short{display:inline;}
  .cta-row-2{flex-wrap:nowrap!important;}
  .cta-row-2-btn{flex:1 1 0;max-width:230px;text-align:center;padding-left:8px!important;padding-right:8px!important;font-size:13px!important;white-space:nowrap;}
}
@media(min-width:601px) and (max-width:760px){
  .lifting-thumb{width:186px;height:248px;}
}
.feature-item{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:#dde2d2;}
.feature-dot{position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#b3bda3;}
.lifting-spotlight-img{object-position:center 55%;}
@media(max-width:880px){
  .lifting-spotlight-img{object-position:center 20%;}
}
.doplnkove-card{flex:1 1 calc(33.333% - 11px);min-width:220px;max-width:320px;display:flex;flex-direction:column;}
.doplnkove-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.doplnkove-icon{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#eaeadd;color:#4f5d45;display:flex;align-items:center;justify-content:center;}
.doplnkove-head .card-title-sm{margin-bottom:0;flex:1;padding-top:4px;}
.doplnkove-price{font-size:13px;font-weight:600;color:#4f5d45;white-space:nowrap;margin-top:8px;text-align:right;}
.doplnkove-price-inline{display:none;}

/* Round icon badge — size/background/color set per use, this just fixes the shape */
.icon-circle{border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
/* Stat/feature card (icon + two-line text), e.g. Domov trust strip */
.stat-card{background:#fbfaf5;border-radius:18px;padding:22px 24px;display:flex;align-items:center;gap:15px;box-shadow:0 8px 24px rgba(79,93,69,.06);}
/* Service preview link card, e.g. Domov services grid — desktop: name+desc left column, price right column (original layout) */
.service-card{background:#fbfaf5;border-radius:22px;padding:30px 34px;box-shadow:0 12px 34px rgba(79,93,69,.08);display:grid;grid-template-columns:1fr auto;column-gap:18px;row-gap:6px;align-items:start;}
.service-card-head{display:contents;}
.service-card-title{grid-column:1;grid-row:1;}
.service-card-desc{grid-column:1;grid-row:2;font-size:14px;color:#85887b;line-height:1.5;}
.service-price{grid-column:2;grid-row:1 / span 2;}
/* Contact info card, e.g. Kontakt page */
.contact-info-card{background:#fbfaf5;border-radius:24px;padding:38px 30px;text-align:center;box-shadow:0 12px 34px rgba(79,93,69,.08);}

/* Multi-column price comparison grids (Cennik) — table layout on desktop, collapse to name-left / prices-right on mobile */
@media(max-width:640px){
  .price-grid3{grid-template-columns:1fr!important;grid-template-areas:"pname" "pval1" "pval2"!important;gap:0!important;align-items:start!important;}
  .price-grid3-head{display:none!important;}
  .price-grid3 > *:nth-child(1){grid-area:pname;margin-bottom:8px;}
  .price-grid3 > *:nth-child(2){grid-area:pval1;}
  .price-grid3 > *:nth-child(3){grid-area:pval2;}
  .price-grid3 [data-label]{display:flex!important;align-items:baseline;gap:4px;text-align:left!important;padding:5px 0;white-space:nowrap;}
  .price-grid3 [data-label]:before{content:attr(data-label);margin-right:auto;padding-right:14px;font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:500;color:#85887b;}
  .price-grid3 [data-label].no-price-mobile{display:none!important;}

  /* Treatments with a single price (no do-18 split): keep name and price on one row, same as other simple treatments */
  .price-grid3:has(> :nth-child(3).no-price-mobile){grid-template-columns:1fr auto!important;grid-template-areas:"pname pval1"!important;column-gap:14px!important;}
  .price-grid3:has(> :nth-child(3).no-price-mobile) > *:nth-child(1){margin-bottom:0;}
  .price-grid3:has(> :nth-child(3).no-price-mobile) [data-label]{padding:0;justify-content:flex-end;}
  .price-grid3:has(> :nth-child(3).no-price-mobile) [data-label]:before{content:none;}
  .sera-list .sera-item{display:block;margin-bottom:4px;}
  .sera-list .sera-item:last-child{margin-bottom:0;}
  .sera-list .sera-sep{display:none;}
}

@media(max-width:760px){
  .doplnkove-head .card-title-sm{white-space:normal;}
  .doplnkove-price-inline{display:block;flex-shrink:0;padding-top:4px;margin-top:0;}
  .doplnkove-price-block{display:none;}
  .contact-pills-row{display:grid!important;grid-template-columns:1fr 1fr!important;}
  .contact-pills-row a{justify-content:center;}
}

/* FAQ accordion */
.faq-item{border-bottom:1px solid #e6e6da;}
.faq-item:last-child{border-bottom:none;}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;background:none;border:none;cursor:pointer;text-align:left;font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:500;color:#2a2e26;}
.faq-chevron{flex-shrink:0;color:#4f5d45;transition:transform .25s ease;}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
.faq-item.open .faq-answer{grid-template-rows:1fr;cursor:pointer;}
.faq-answer>div{overflow:hidden;}
.faq-answer p{margin:0;padding:0 28px 22px 4px;font-size:14.5px;line-height:1.75;color:#6f7268;}

/* Section accordion (Cennik 2) */
.acc-item{border-bottom:1px solid #e6e6da;scroll-margin-top:100px;}
.acc-item:last-child{border-bottom:none;}
.acc-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 4px;background:none;border:none;cursor:pointer;text-align:left;font-family:'Marcellus',serif;font-weight:400;font-size:clamp(20px,2.4vw,24px);color:#2a2e26;}
.acc-chevron{flex-shrink:0;color:#4f5d45;transition:transform .25s ease;}
.acc-item.open .acc-chevron{transform:rotate(180deg);}
.acc-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.acc-answer-inner{padding:0 4px 36px;}
.acc-close-bar{margin-top:24px;display:flex;justify-content:center;}
.acc-close-btn{display:inline-flex;align-items:center;gap:8px;background:#eaeadd;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:#4f5d45;padding:13px 42px;border-radius:999px;transition:background .2s ease;}
.acc-close-btn:hover{background:#dde2d2;}
.acc-close-btn svg{transform:rotate(180deg);}

/* Reviews "show more" — desktop: featured + 2 visible, last 2 behind button */
.reviews-toggle-wrap{display:block;}
.review-extra{display:none!important;}
#reviewsMore.expanded .review-extra{display:flex!important;}
/* Mobile-only compaction: trust strip + reviews "show more" */
@media(max-width:760px){
  .trust-strip{grid-template-columns:1fr 1fr!important;}
  .trust-strip>div{min-width:0;padding:16px 14px!important;gap:10px!important;}
  .trust-strip>div>span{flex-shrink:0;width:38px!important;height:38px!important;}
  .trust-strip>div>div{min-width:0;}
  .trust-strip>div>div>div:first-child{font-size:15.5px!important;}
  #reviewsMore{display:none!important;}
  #reviewsMore.expanded{display:grid!important;}
  .reviews-toggle-wrap{display:block;}
  .service-card{padding:14px 16px!important;}
}
/* Service card: keep the original side-by-side layout (name+desc left, price right spanning both
   rows) on tablet/large phones — the desc sits beside the price instead of stacking below it, so
   the card stays compact. Only the narrowest phones (≤560px) fall back to the stacked column
   layout, where name+price wouldn't fit on one row. */
@media(max-width:560px){
  .service-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;}
  .service-card-head{display:flex!important;justify-content:space-between!important;align-items:baseline!important;gap:14px!important;}
}

/* Tablet / half-screen desktop (761–960px): cards already stack to single column here but
   were still keeping full desktop padding, making them needlessly tall. Trim it down a step
   without going as far as the ≤760px mobile values. */
@media(min-width:761px) and (max-width:960px){
  .service-card{padding:22px 20px!important;}
  .tag-card,.doplnkove-card{padding:18px 20px!important;}
  #darcekovaPoukazkaCta,#darceky{padding:26px 24px!important;}
  #darceky .darceky-voucher{padding:26px 22px!important;}
}

/* Čistenie pleti: once the text/photos stack (≤996px, matching the Lifting section's tablet
   breakpoint) — tighten the gap and reserve room below the grid so the staggered "Pred" photo
   doesn't overlap the CTA link */
@media(max-width:996px){
  #cistenie [data-stack]{gap:16px!important;}
  #cistenie .cistenie-img-grid{padding-bottom:18px;}
  #cistenie [data-stack]>div:last-child{margin-top:0!important;}
  #cistenie .cistenie-thumb-pred{transform:translateY(10px)!important;}
}
@media(max-width:760px){
  #cistenie [data-stack]{gap:10px!important;}
}

/* Horizontal scroll strip for photo groups on mobile (kept as normal grid on desktop) */
.scroll-strip-mobile{}
@media(max-width:760px){
  .scroll-strip-mobile{display:flex!important;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:14px!important;}
  .scroll-strip-mobile>*{flex:0 0 42%;scroll-snap-align:start;}
  .scroll-strip-mobile{scroll-snap-type:x mandatory;padding-bottom:6px;}
}

/* "Kde ma nájdete" gallery on Domov: bigger photos, always a partial peek of the next
   one so it reads as scrollable — 1 full + peek on mobile, 2 full + peek on desktop */
.location-gallery{}
@media(max-width:760px){
  .location-gallery{display:flex!important;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:14px!important;scroll-snap-type:x mandatory;padding-bottom:6px;}
  .location-gallery>*{flex:0 0 90%;scroll-snap-align:start;}
}
@media(min-width:761px){
  .location-gallery{display:flex!important;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:18px!important;scroll-snap-type:x mandatory;padding-bottom:6px;}
  .location-gallery>*{flex:0 0 44%;scroll-snap-align:start;}
}

/* Horizontally scrollable photo strips ([data-hscroll]): hide the native scrollbar —
   navigation is handled by the .hs-controls row (dots + arrows) built in _common.js */
[data-hscroll]{scrollbar-width:none;-ms-overflow-style:none;}
[data-hscroll]::-webkit-scrollbar{display:none;}

.hs-wrap{position:relative;}
/* Control row sits BELOW the strip so arrows never overlap the photos */
.hs-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;}
.hs-controls.hs-hidden{display:none;}
.hs-dots{display:flex;align-items:center;gap:9px;}
.hs-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:#c3c9b6;opacity:.6;cursor:pointer;transition:width .25s ease,opacity .25s ease,background .25s ease;}
.hs-dot:hover{opacity:.9;}
.hs-dot.active{width:24px;opacity:1;background:#4f5d45;}
.hs-btn{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:rgba(251,250,245,.95);box-shadow:0 6px 18px rgba(79,93,69,.16);border:1px solid rgba(79,93,69,.14);color:#4f5d45;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .2s ease,background .2s ease,box-shadow .2s ease;}
.hs-btn:hover{background:#fff;box-shadow:0 8px 22px rgba(79,93,69,.22);}
.hs-btn.hs-off{opacity:.35;pointer-events:none;}
/* Dark scheme (strips over a dark background, e.g. lifting results) */
.hs-controls.is-dark .hs-dot{background:rgba(255,255,255,.45);}
.hs-controls.is-dark .hs-dot.active{background:#fff;}
.hs-controls.is-dark .hs-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none;}
.hs-controls.is-dark .hs-btn:hover{background:rgba(255,255,255,.22);box-shadow:none;}
/* Mobile: arrows hidden — navigate by swipe; dots stay as position indicator */
@media(max-width:760px){
  .hs-btn{display:none;}
}

/* Tabbar scrollbar hide */
.tabbar::-webkit-scrollbar{display:none;}
/* Tabbar centering is applied via JS (initTabbarFit) only when the chips fit without
   overflow — centering an overflowing row would clip the first/last chip unreachably. */

/* Lightbox */
#lb-overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;padding:20px;cursor:zoom-out;}
#lb-overlay img{max-width:min(90vw,1200px);max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);cursor:default;}
#lb-close{position:fixed;top:16px;right:22px;background:none;border:none;color:#fff;font-size:42px;line-height:1;cursor:pointer;padding:8px;z-index:1000;opacity:.75;transition:opacity .2s ease,transform .25s ease;}
#lb-close:hover{opacity:1;transform:scale(1.1);}
#lb-prev,#lb-next{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:48px;line-height:1;cursor:pointer;padding:8px 16px;z-index:1000;border-radius:8px;display:none;align-items:center;justify-content:center;opacity:.75;transition:opacity .2s ease,transform .25s ease,box-shadow .25s ease;}
#lb-prev{left:16px;}
#lb-next{right:16px;}
#lb-prev:hover,#lb-next:hover{opacity:1;transform:translateY(-50%) scale(1.08);box-shadow:0 10px 22px rgba(0,0,0,.25);}

/* Scroll to top */