/* Theme Name: BodyShape Cosmetics Theme URI: https://bodyshapecosmetics.eu/ Author: Body Shape Cosmetics Description: Önálló, Elementor-natív téma a Body Shape Cosmetics webáruháznak. A BodyShape stúdió-téma arculati alapjaira épül (Raleway + Mulish, korall paletta), WooCommerce-támogatással kiegészítve. Aktiválás után egyetlen gombbal felépíti a teljes oldalt: termékek, tartalom, fejléc/lábléc, színek, betűk, menü. Version: 1.2.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bsc Tags: custom-colors, custom-menu, custom-logo, featured-images, translation-ready, full-width-template, block-styles */ /* ========================================================================== 1. Tokenek ========================================================================== */ :root{ /* Címsor: nagybetűs, széthúzott betűközű sans (a két spa-referencia közös aláírása). */ --bs-display:'Raleway', system-ui, -apple-system, sans-serif; --bs-body:'Mulish', system-ui, -apple-system, sans-serif; /* Korall paletta — a két referencia mintája (kb. #F2977E / #F9A392) */ --bs-clay:#F0997E; --bs-clay-dark:#D97D60; --bs-clay-soft:#F6C1AE; --bs-ink:#2B2B2B; --bs-text:#333333; --bs-muted:#767676; --bs-sand:#F7F6F4; --bs-sand-2:#F0EDEA; --bs-line:rgba(0,0,0,.1); --bs-btn-r:4px; --bs-card-r:6px; --bs-pad:clamp(18px,4.2vw,60px); /* Dobozolt, középre zárt tartalom-szélesség — a két referencia is ezt használja (~1170–1200px), nem szél-szélig terjedő elrendezést. */ --bs-content:1240px; --bs-ease:cubic-bezier(.22,.61,.36,1); } /* ========================================================================== 2. Alap ========================================================================== */ html{scroll-behavior:smooth} body{ margin:0;background:#fff;color:var(--bs-text); font-family:var(--bs-body);font-size:16.5px;line-height:1.78; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,video,iframe{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* !important: az Elementor kit "Theme Style" panelje a nyers h1-h6 elemekre (nem csak a heading-widgetekre) ad ki saját szín/betűtípus-alapértéket, ami enélkül a betöltési sorrend miatt felülírja ezt — ez okozta korábban a hero-cím és a gomb-feliratok hibás színét/betűjét is. */ h1,h2,h3,h4,h5,h6{font-family:var(--bs-display)!important;font-weight:300;color:var(--bs-text)!important; text-transform:uppercase;line-height:1.3;margin:0 0 .5em} h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:.07em} h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:.065em} h3{font-size:17px;font-weight:500;letter-spacing:.03em} h4{font-size:12.5px;font-weight:700;letter-spacing:.16em} p{margin:0 0 1em} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skip-link:focus{position:fixed;left:0;top:0;z-index:9999;width:auto;height:auto; clip:auto;clip-path:none;background:var(--bs-clay);color:#fff;padding:12px 20px} :where(a,button,input,textarea,select):focus-visible{outline:2px solid var(--bs-clay);outline-offset:3px} /* A téma saját (Elementor nélküli) burkolója — dobozolt, középre zárt */ /* box-sizing:border-box KELL: a témában nincs globális border-box reset, és width:100% + oldalsó padding content-box-szal 2×--bs-pad-dal túlfut a képernyőn — élőben ez adta a kosár/pénztár/fiók oldalak vízszintes csúszását (scrollWidth 927 egy 889-es nézetben). */ .bs-shell{box-sizing:border-box;width:100%;max-width:var(--bs-content);margin:0 auto;padding:64px var(--bs-pad)} .bs-prose{max-width:78ch} /* ========================================================================== 3. Elementor-illesztés — dobozolt, középre zárt tartalom ========================================================================== */ /* A két referencia-oldal (Aveda spa, Themerex spa kit) egyaránt egy fix szélességű, középre zárt konténert használ (~1170–1240px), NEM szél- szélig terjedő elrendezést — a hero-fotó ettől függetlenül bleedelhet teljes szélességig (a
saját háttere), de a benne lévő TARTALOM (.elementor-container) mindig a dobozhoz igazodik. A generátor minden szakaszt "full_width" Elementor-elrendezéssel épít (lásd bs_el_section() alapértéke) — ezért itt NEM a ritkán előforduló ".elementor-section-boxed" osztályt kell célozni, hanem közvetlenül a ".elementor-container"-t, amit minden szakasz-típus használ. */ .elementor-section>.elementor-container{ max-width:var(--bs-content)!important; margin-left:auto!important;margin-right:auto!important; padding:0 var(--bs-pad)} .elementor-widget:not(:last-child){margin-bottom:18px} /* Szakasz-ritmus */ .bs-sec{padding:84px 0} .bs-sec--alt{background:var(--bs-sand)} .bs-sec--head{padding-bottom:36px;text-align:center} .bs-sec--head .elementor-widget-wrap{align-content:center} .bs-sec--prose .elementor-widget-text-editor{max-width:82ch;margin-inline:auto} .bs-cell>.elementor-widget-wrap{align-content:flex-start} /* Kiemelt idézet (pl. Rólunk "A siker titka…") — korábban sima

alcímként jelent meg, megkülönböztethetetlenül a többi címsortól. */ .bs-quote{ max-width:56ch;margin:0 auto;padding:0 0 0 30px;position:relative; font-family:var(--bs-display);font-weight:300;font-style:italic; font-size:clamp(22px,2.6vw,30px);line-height:1.5;color:var(--bs-clay-dark); text-align:left;text-transform:none; } .bs-quote::before{ content:"“";position:absolute;left:-6px;top:-18px; font-family:Georgia,serif;font-style:normal;font-size:64px;color:var(--bs-clay-soft); } /* ========================================================================== 4. Tipográfia-segédek ========================================================================== */ /* Kicker: rövid, nagybetűs bevezető szó/mondat a nagy cím fölött. Korábban kurzív script-betűtípus volt (Parisienne) — olvashatatlannak bizonyult, ezért sima, jól olvasható betűtípusra cserélve. */ .bs-kicker .elementor-heading-title{ font-family:var(--bs-body)!important;font-weight:700!important;text-transform:uppercase!important; letter-spacing:2px!important;color:var(--bs-clay-dark)!important;font-size:13px!important;line-height:1.4!important} /* FONTOS: nem ".bs-lead .elementor-widget-container"-t célzunk — ezen az Elementor-telepítésen be van kapcsolva az "Optimalizált DOM" beállítás, ami TELJESEN kiveszi az .elementor-widget-container burkoló divet minden widgetből (élőben ellenőrizve: 0 db van belőle az egész oldalon). Emiatt ez a szelektor sosem talált semmit, és a szöveg a böngésző/Kit alap színét kapta — ezért közvetlenül magát a widget-elemet (.bs-lead) célozzuk, aminek a

már tényleg közvetlen gyereke. */ .bs-lead{font-size:17px;color:var(--bs-muted)!important;max-width:64ch} .bs-sec--head .bs-lead{margin-inline:auto} .bs-text{color:var(--bs-muted)!important} .bs-text h2,.bs-text h3,.bs-text h4{color:var(--bs-text)} .bs-text h4{font-family:var(--bs-body)!important;font-weight:700;font-size:12.5px; letter-spacing:2px;text-transform:uppercase;color:var(--bs-clay)!important;margin-top:2em} .bs-text ul{list-style:none;padding:0;margin:0 0 1.2em} .bs-text ul li{position:relative;padding:7px 0 7px 26px} .bs-text ul li::before{content:"";position:absolute;left:2px;top:18px;width:7px;height:7px; background:var(--bs-clay);border-radius:50%} .bs-text ol{padding-left:1.3em;margin:0 0 1.2em} .bs-text ol li{padding:6px 0} .bs-text a{color:var(--bs-clay);text-decoration:underline;text-underline-offset:4px} .bs-phone{font-family:var(--bs-display);font-size:clamp(28px,3.6vw,44px); font-weight:300;margin:.2em 0 .4em} /* ========================================================================== 5. Gombok ========================================================================== */ /* !important a betűtípusnál: az Elementor friss kitje a "Gombok" globális tipográfiáját alapból az egyik globális betű-szlothoz köti (nálunk az "accent" szlot = Parisienne script, a kiemelő szavakhoz szánva) — enélkül MINDEN gomb felirata kézírásos, olvashatatlan szöveggel jelent meg. Ugyanaz a jelenség, ami korábban a hero-címsor színét is felülírta. */ /* Az Elementor globális Kit-stílusa (Theme Style → Buttons) minden .elementor-button-re rátesz egy alap háttér/szöveg-színt, elég magas specificitással/kései betöltési sorrenddel ahhoz, hogy a mi CSS-ünket felülírja, HA nincs !important rajta — ez történt itt: a border már korall volt, de a background/color a Kit alapértékére (átlátszó/fehér) esett vissza, ezért tűnt "kiürültnek" a gomb. Lásd még a font-family fölötti hasonló, korábban már !important-tal javított esetet. */ .bs-button .elementor-button, .bs-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--bs-body)!important;font-weight:700!important;font-size:13px;letter-spacing:2px; text-transform:uppercase;padding:16px 40px;min-height:54px; border-radius:var(--bs-btn-r);border:2px solid var(--bs-clay)!important; background:var(--bs-clay)!important;color:#fff!important; transition:background .3s var(--bs-ease),color .3s var(--bs-ease), border-color .3s var(--bs-ease),transform .3s var(--bs-ease)} .bs-btn svg{width:15px;height:15px;flex:0 0 15px} .bs-button .elementor-button:hover,.bs-btn:hover{ background:var(--bs-clay-dark)!important;border-color:var(--bs-clay-dark)!important;color:#fff!important;transform:translateY(-2px)} /* A sima --bs-clay (világos korall) szöveg fehér háttéren nem ad elég kontrasztot (WCAG alatt) — a sötétebb --bs-clay-dark árnyalat marad a keretes gombok alap-állapotában, a világos korall csak a kitöltött (bs-button--light, sötét hátterű) változatnál marad. */ .bs-button--outline .elementor-button,.bs-btn--outline{ background:transparent!important;color:var(--bs-clay-dark)!important;border-color:var(--bs-clay-dark)!important} .bs-button--outline .elementor-button:hover,.bs-btn--outline:hover{ background:var(--bs-clay-dark)!important;border-color:var(--bs-clay-dark)!important;color:#fff!important} .bs-button--light .elementor-button{background:#fff!important;color:var(--bs-ink)!important;border-color:#fff!important} .bs-button--light .elementor-button:hover{background:transparent!important;color:#fff!important;border-color:#fff!important} .bs-button--sm .elementor-button,.bs-btn--sm{padding:11px 24px;min-height:44px; font-size:11.5px;letter-spacing:1.6px} /* ========================================================================== 6. Hero ========================================================================== */ .bs-hero{min-height:clamp(460px,68vh,700px);display:flex;align-items:center; padding:96px 0;position:relative;overflow:hidden} /* Garantált sötétítés a fotó fölött — NEM az Elementor beépített overlay-jére támaszkodik (az free Elementornál egy plusz, alapból 0.5-ös saját opacity-t is rátesz a megadott színre, ami a végén túl halványra sikerül). Ez a réteg mindig ugyanazt az eredményt adja, verziótól függetlenül. */ .bs-hero::before{content:"";position:absolute;inset:0;z-index:0; background:rgba(35,31,32,.6);pointer-events:none} .bs-hero>.elementor-background-overlay{display:none!important} .bs-hero>.elementor-container{position:relative;z-index:1} /* !important szükséges: az Elementor globális kit-színrendszere (Site Settings → Theme Style) ugyanolyan specificitással, de KÉSŐBB betöltött szabályt ad ki a nyers h1-h6 elemekre, ami enélkül felülírja ezt — pont ez okozta, hogy a hero-cím a taupe/korall akcentusszínben jelent meg fehér helyett. */ .bs-hero .elementor-heading-title, .bs-hero .bs-text{color:#fff!important} .bs-hero h1.elementor-heading-title{font-size:clamp(36px,5vw,58px)!important;max-width:20ch} .bs-hero .bs-lead{color:rgba(255,255,255,.9)!important;max-width:56ch} /* Fehér, árnyékolt szöveg — a világos korall túl halvány volt a fotó fölött, szinte beleolvadt a háttérbe. Az árnyék bármilyen fotón biztosítja az olvashatóságot, nem csak a jelenlegin. */ .bs-hero .bs-kicker .elementor-heading-title{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.35)} .bs-hero h1.elementor-heading-title, .bs-hero .bs-lead{text-shadow:0 2px 14px rgba(0,0,0,.3)} .bs-hero .elementor-widget-wrap{max-width:min(760px,100%)} /* Adat-sáv — a homok-háttér illeszkedik a többi szekcióhoz, nem tör el sötét sávval; a korall számok így is elég kontrasztosak a bézsen. */ .bs-stats{background:var(--bs-sand);padding:0} .bs-stats .elementor-column{border-right:1px solid var(--bs-line)} .bs-stats .elementor-column:last-child{border-right:0} .bs-stat{padding:34px 20px;text-align:center;color:var(--bs-text)} .bs-stat b{display:block;font-family:var(--bs-display);font-weight:300;font-size:42px; line-height:1;color:var(--bs-clay-dark)} .bs-stat span{font-family:var(--bs-body);font-size:11.5px;letter-spacing:2px; text-transform:uppercase;color:var(--bs-muted);margin-top:8px;display:block} /* ========================================================================== 7. Kezelés-kártyák ========================================================================== */ .bs-cards{padding:0 0 40px} .bs-cards .elementor-column{padding:0 13px} /* A kártya-tartalom oszlopként rendezve, a gomb "margin-top:auto"-val MINDIG az aljára rögzítve — így egy 2 soros cím (pl. "SHR SZŐRTELENÍTÉS") nem tolja lejjebb a saját gombját a szomszéd kártyák gombjaihoz képest. */ .bs-cards .bs-cell>.elementor-widget-wrap{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r); overflow:hidden;height:100%;padding:0 0 26px; box-shadow:0 10px 26px -20px rgba(46,41,38,.28); transition:box-shadow .4s var(--bs-ease),transform .4s var(--bs-ease)} .bs-cards .bs-cell>.elementor-widget-wrap:hover{ transform:translateY(-4px);box-shadow:0 20px 42px -22px rgba(46,41,38,.4)} .bs-cards .bs-card__img{margin-bottom:22px} .bs-cards .bs-card__img img{width:100%;aspect-ratio:1/1;object-fit:cover; transition:transform .8s var(--bs-ease)} .bs-cards .bs-cell>.elementor-widget-wrap:hover .bs-card__img img{transform:scale(1.05)} .bs-cards .bs-button{margin-top:auto} .bs-cards .bs-card__title, .bs-cards .bs-button{padding-inline:24px} .bs-cards .bs-card__title .elementor-heading-title{font-size:21px;line-height:1.3} /* ========================================================================== 8. Miért mi (icon-box) ========================================================================== */ .bs-why{padding-top:0} /* Elementor alapból nem nyújtja egyenlő magasságúra egy sor oszlopait (align-items nincs stretch-re állítva) — enélkül egy 2 soros cím (pl. "SZAKKÉPZETT SZEMÉLYZET") magasabbra tolta a saját dobozát a szomszédok dobozaihoz képest, holott a bennük lévő .elementor-icon-box-wrapper height:100%-a csak a saját (nem közös) oszlop-magasságra vonatkozott. */ .bs-why .elementor-container{align-items:stretch} /* Az oszlop MAGA már 100%-ra nyúlik (stretch a sor-szinten), de ez önmagában nem elég: a láncban lévő minden köztes elemnek (widget-wrap, majd maga a widget — az "Optimalizált DOM" miatt itt nincs .elementor-widget-container köztes szint) is tovább kell adnia a magasságot, különben a legbelső .elementor-icon-box-wrapper height:100%-a egy "auto" magasságú szülőre vonatkozna, ami gyakorlatilag hatástalan. display:flex minden szinten (1 gyerekkel) ezt megbízhatóan megoldja percentage-height lánc nélkül. */ .bs-why .elementor-column{padding:0 13px;display:flex} .bs-why .elementor-column>.elementor-widget-wrap{width:100%;display:flex} /* Élőben ellenőrizve: a display:flex önmagában NEM volt elég itt — a .elementor-widget-icon-box (a widget gyökér-eleme) a stretch ellenére sem nyúlt ki a szülője (widget-wrap, ténylegesen 336px magas) teljes magasságára. Explicit height:100% a megbízható megoldás, mivel a közvetlen szülőnek MÁR van tényleges (nem "auto") magassága. */ .bs-why .elementor-column .elementor-widget-icon-box{width:100%;height:100%;display:flex} .bs-why .elementor-widget-icon-box .elementor-icon-box-wrapper{ background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r); padding:34px 24px;height:100%;text-align:center; box-shadow:0 10px 26px -20px rgba(46,41,38,.28); transition:border-color .3s var(--bs-ease),box-shadow .4s var(--bs-ease),transform .3s var(--bs-ease)} .bs-why .elementor-widget-icon-box .elementor-icon-box-wrapper:hover{ border-color:var(--bs-clay);transform:translateY(-4px); box-shadow:0 20px 42px -22px rgba(46,41,38,.4)} .bs-why .elementor-icon{color:var(--bs-clay)!important;font-size:32px} .bs-why .elementor-icon-box-title{font-family:var(--bs-body)!important;font-weight:700;font-size:12.5px; letter-spacing:1.6px;text-transform:uppercase;margin:18px 0 10px;color:var(--bs-text)!important} .bs-why .elementor-icon-box-description{color:var(--bs-muted)!important;font-size:14.5px} /* ========================================================================== 9. Időpontfoglalás-sáv ========================================================================== */ .bs-sec--cta{background:var(--bs-ink);text-align:center;padding:80px 0} .bs-sec--cta .elementor-heading-title{color:#fff!important} .bs-sec--cta .bs-kicker .elementor-heading-title{color:var(--bs-clay-soft)!important} .bs-sec--cta .bs-text{color:rgba(255,255,255,.78)!important} .bs-sec--cta .bs-phone a{color:#fff} .bs-sec--cta .bs-phone a:hover{color:var(--bs-clay-soft)} /* ========================================================================== 10. Kép + szöveg ========================================================================== */ .bs-split .elementor-column{padding:0 22px} .bs-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px} /* "Hogyan használd" — a bs-cell (bsc_el_grid_section) alapból stílus nélküli, ez adja neki a kártya-kinézetet, kép/hover nélkül, egyszerűen. */ .bs-usage .bs-cell>.elementor-widget-wrap{background:var(--bs-sand); border-radius:var(--bs-card-r);padding:26px 24px;height:100%} .bs-usage .bs-cell .elementor-heading-title{font-size:16px} .bs-usage .bs-cell .bs-text{color:var(--bs-muted);font-size:14px;line-height:1.6} /* ========================================================================== 11. Árak ========================================================================== */ .bs-prices{padding:0 0 40px} .bs-prices .elementor-column{padding:0 13px} .bs-prices .bs-cell>.elementor-widget-wrap{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r); padding:34px 28px 30px;height:100%;text-align:center; box-shadow:0 10px 26px -20px rgba(46,41,38,.28); transition:border-color .3s var(--bs-ease),box-shadow .4s var(--bs-ease),transform .3s var(--bs-ease)} .bs-prices .bs-button{margin-top:auto} .bs-prices .bs-cell>.elementor-widget-wrap:hover{ border-color:var(--bs-clay);transform:translateY(-4px); box-shadow:0 20px 42px -22px rgba(46,41,38,.4)} .bs-price__title .elementor-heading-title{padding-bottom:18px;border-bottom:1px solid var(--bs-line)} .bs-price__list ul{list-style:none;padding:0} .bs-price__list ul li{padding:7px 0;color:var(--bs-muted);font-size:14.5px} .bs-price__list ul li::before{display:none} .bs-price__amount{font-family:var(--bs-display);font-weight:300;font-size:40px; line-height:1;color:var(--bs-clay);margin:6px 0 18px} .bs-price__amount small{display:block;font-family:var(--bs-body);font-weight:700;font-size:11px; letter-spacing:2px;text-transform:uppercase;color:var(--bs-muted);margin-top:10px} .bs-prices .bs-cell.bs-pricecard--featured>.elementor-widget-wrap{ border-color:var(--bs-clay);background:var(--bs-sand); box-shadow:0 20px 46px -24px rgba(217,125,96,.45)} .bs-prices .bs-cell.bs-pricecard--featured>.elementor-widget-wrap:hover{ border-color:var(--bs-clay-dark)} .bs-price__badge{display:inline-block;background:var(--bs-clay);color:#fff!important; font-family:var(--bs-body);font-weight:700;font-size:11px;letter-spacing:1.6px; text-transform:uppercase;padding:6px 18px;border-radius:20px;margin-bottom:16px} /* ========================================================================== 11b. Részletes árlista / csomagok (kártyás sor-lista) ========================================================================== */ .bs-plist{max-width:900px;margin:0 auto} .bs-plist__cat{background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r); padding:30px 32px;margin-bottom:24px;box-shadow:0 10px 26px -20px rgba(46,41,38,.28)} .bs-plist__cat h3{margin-bottom:4px} .bs-plist__features{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px;padding:0;list-style:none} .bs-plist__features li{background:var(--bs-sand);color:var(--bs-muted);font-size:12px; padding:5px 12px;border-radius:20px} .bs-plist__note{font-size:13.5px;color:var(--bs-muted);margin:14px 0 0;font-style:italic;line-height:1.6} .bs-plist__subhead{font-family:var(--bs-body);font-weight:700;font-size:12px;letter-spacing:1.4px; text-transform:uppercase;color:var(--bs-clay-dark);margin:22px 0 4px} .bs-plist__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:12px 0;border-bottom:1px solid var(--bs-line)} .bs-plist__row:last-child{border-bottom:0} .bs-plist__row-label{font-weight:700;color:var(--bs-text)} .bs-plist__row-meta{display:block;font-size:12.5px;color:var(--bs-muted);font-weight:400;margin-top:3px} .bs-plist__row-price{font-family:var(--bs-display);color:var(--bs-clay-dark); font-weight:600;font-size:17px;white-space:nowrap} .bs-shrtable-wrap{overflow-x:auto;margin-top:6px} .bs-shrtable{width:100%;border-collapse:collapse;font-size:14px;min-width:420px} .bs-shrtable th,.bs-shrtable td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--bs-line)} .bs-shrtable th{font-family:var(--bs-body);font-weight:700;font-size:11px;letter-spacing:1px; text-transform:uppercase;color:var(--bs-muted)} .bs-shrtable td:not(:first-child),.bs-shrtable th:not(:first-child){ text-align:right;font-family:var(--bs-display);color:var(--bs-clay-dark)} /* Csomag-kártyák (Body Shape Fit 1/2). */ .bs-packages{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px} .bs-package{background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r); padding:34px 32px;display:flex;flex-direction:column; box-shadow:0 10px 26px -20px rgba(46,41,38,.28); transition:border-color .3s var(--bs-ease),box-shadow .4s var(--bs-ease),transform .3s var(--bs-ease)} .bs-package:hover{border-color:var(--bs-clay);transform:translateY(-4px); box-shadow:0 20px 42px -22px rgba(46,41,38,.4)} .bs-package h3{margin-bottom:18px} .bs-package ul{list-style:none;padding:0;margin:0 0 22px;flex:1} .bs-package ul li{position:relative;padding:8px 0 8px 24px;color:var(--bs-muted);font-size:14.5px;line-height:1.5} .bs-package ul li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px; border-radius:50%;background:var(--bs-clay)} .bs-package__price{display:flex;align-items:baseline;gap:10px;padding-top:18px;border-top:1px solid var(--bs-line)} .bs-package__price .now{font-family:var(--bs-display);font-weight:300;font-size:32px;color:var(--bs-clay-dark)} .bs-package__price .was{font-size:14px;color:var(--bs-muted);text-decoration:line-through} @media (max-width:700px){ .bs-packages{grid-template-columns:1fr} } /* ========================================================================== 12. Házirend ========================================================================== */ .bs-sec--rules{padding-top:0} .bs-rules{max-width:940px;margin-inline:auto} .bs-rules ol{list-style:none;counter-reset:r;padding:0} .bs-rules ol li{counter-increment:r;position:relative;padding:18px 0 18px 58px; border-bottom:1px solid var(--bs-line);color:var(--bs-muted);font-size:15.5px} .bs-rules ol li:last-child{border-bottom:0} .bs-rules ol li::before{content:counter(r);position:absolute;left:0;top:18px; width:34px;height:34px;background:var(--bs-clay);color:#fff;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--bs-body);font-weight:700;font-size:13px} /* GYIK — natív

/, nincs JS-függőség. */ .bs-faq{max-width:900px;margin:0 auto} .bs-faq__item{background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r); padding:4px 26px;margin-bottom:14px;box-shadow:0 10px 26px -20px rgba(46,41,38,.28)} .bs-faq__item summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;position:relative; font-family:var(--bs-body);font-weight:700;color:var(--bs-text);font-size:15.5px} .bs-faq__item summary::-webkit-details-marker{display:none} .bs-faq__item summary::after{content:"+";position:absolute;right:0;top:16px;font-size:22px; line-height:1;color:var(--bs-clay-dark);transition:transform .25s var(--bs-ease)} .bs-faq__item[open] summary::after{transform:rotate(45deg)} .bs-faq__item p{margin:0 0 22px;color:var(--bs-muted);font-size:14.5px;line-height:1.7} /* ========================================================================== 13. Kapcsolat, térkép ========================================================================== */ .bs-contact .elementor-column{padding:0 22px} .bs-map{border-radius:14px;overflow:hidden;border:1px solid var(--bs-line);margin-top:22px} .bs-map iframe{width:100%;height:300px;border:0} /* Teljes szélességű térkép-sáv közvetlenül a lábléc fölött (minden oldalon). Nem a tartalom-boxban él, ezért nincs rajta se margó, se lekerekítés. */ .bs-map--band{margin-top:0;border:0;border-radius:0;line-height:0} .bs-map--band iframe{height:360px;display:block;filter:grayscale(1) contrast(.95); transition:filter .4s var(--bs-ease)} .bs-map--band:hover iframe{filter:none} /* A pontos cím a térkép alatt — az emelet/ajtó az, amit a térkép-pin nem tud megmutatni, ezért kap külön, kiemelt sort. */ .bs-footer-address{background:var(--bs-ink);color:#fff; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px; padding:20px var(--bs-pad);text-align:center; border-bottom:1px solid rgba(255,255,255,.1)} .bs-footer-address__pin{width:20px;height:20px;flex:none;color:var(--bs-clay)} .bs-footer-address__street{font-weight:600;font-size:15px} .bs-footer-address__detail{font-size:15px;color:var(--bs-clay-soft); padding-left:12px;border-left:1px solid rgba(255,255,255,.22)} .bs-footer__detail{color:var(--bs-clay-soft)} .bs-info__detail{color:var(--bs-clay-dark);font-weight:600} /* Testvér vállalkozás sáv — a Body Shape stúdióra mutat, a sötét lábléc elé ékelve. Világos (homok) háttér, hogy a `.bs-btn`/`.bs-btn--outline` alap (világos hátterre tervezett) színei külön felülírás nélkül is jól olvasható kontrasztot adjanak. */ .bs-studio-promo{background:var(--bs-sand);padding:52px 0} .bs-studio-promo__inner{max-width:640px;margin:0 auto;padding:0 var(--bs-pad);text-align:center} .bs-studio-promo__kicker{font-family:var(--bs-body);font-weight:700;font-size:11.5px; letter-spacing:1.6px;text-transform:uppercase;color:var(--bs-clay-dark);margin:0 0 10px} .bs-studio-promo__text{color:var(--bs-text);line-height:1.6;margin:0 0 22px} .bs-studio-promo__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px} /* Ikonos elérhetőségi sor — a korábbi puszta félkövér szöveg helyett. */ .bs-info{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--bs-line)} .bs-info:first-of-type{padding-top:6px} .bs-info svg{width:22px;height:22px;flex:0 0 22px;stroke:var(--bs-clay);margin-top:3px} .bs-info .k{font-family:var(--bs-display);font-weight:700;font-size:11px;letter-spacing:1.6px; text-transform:uppercase;color:var(--bs-muted);margin-bottom:4px} .bs-info .v{font-size:16px;color:var(--bs-text)} .bs-info .v a{color:var(--bs-clay-dark);text-decoration:underline;text-underline-offset:3px} /* ========================================================================== 14. Cosmetics ========================================================================== */ .bs-cosmetics{background:var(--bs-sand-2);text-align:center} /* ========================================================================== 15. Fejléc / lábléc — a téma saját, mindig futó sablonja ========================================================================== */ .bs-header{position:sticky;top:0;z-index:99;background:rgba(255,255,255,.92); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--bs-line)} /* justify-content:space-between KELL, ne csak a --bs-nav flex:1-re támaszkodjunk: mobil nézetben a nav position:absolute-ra vált (kikerül a normál elrendezésből), és e nélkül a logó + a jobb oldali gomb/burger flex-start miatt egymásra csúszva a bal szélen landolna. */ .bs-header__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px; max-width:var(--bs-content);margin:0 auto;padding:16px var(--bs-pad)} .bs-brand{flex:0 0 auto;display:flex;align-items:center} .bs-brand a{display:flex;align-items:center} .bs-brand img{max-height:48px!important;height:auto;width:auto;display:block} .bs-brand__text{font-family:var(--bs-display);font-size:23px;letter-spacing:.06em} /* A checkbox maga sosem látszik — csak a jelölt/nem-jelölt állapotát használjuk a nav és a burger vezérlésére, CSS-testvér-szelektorral. */ .bs-nav-toggle{position:absolute;opacity:0;pointer-events:none} .bs-nav{flex:1 1 auto;min-width:0} .bs-nav ul{display:flex;flex-wrap:wrap;gap:15px;list-style:none;margin:0;padding:0} .bs-nav a{font-family:var(--bs-body);font-weight:700;font-size:12.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--bs-text);white-space:nowrap; transition:color .25s var(--bs-ease)} .bs-nav a:hover{color:var(--bs-clay)} .bs-nav .current-menu-item>a,.bs-nav .current_page_item>a{color:var(--bs-clay)} /* Asztali nézeten a menüpontok a logó és a jobb oldali ikonok KÖZÖTT középre zárva — nem a logóhoz tapadva balra. Mobilon (≤1300px) a nav oszlopos lenyíló, ott ez nem érvényes. */ @media (min-width:1301px){ .bs-nav ul{justify-content:center} } .bs-header__actions{flex:0 0 auto;display:flex;align-items:center;gap:14px} /* Facebook/Instagram — csak asztali nézeten (≥901px, lásd a reszponzív szakaszt), a lábléc .bs-socials-nál kisebb, világos-hátterű változat. */ .bs-header__social{display:flex;align-items:center;gap:8px} .bs-header__social a{display:flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;color:var(--bs-text); border:1px solid var(--bs-line);transition:background .25s var(--bs-ease),color .25s var(--bs-ease),border-color .25s var(--bs-ease)} .bs-header__social a:hover{background:var(--bs-clay);border-color:var(--bs-clay);color:#fff} .bs-header__social svg{width:14px;height:14px} /* Ugyanezek az ikonok mobilon a nyitott menü ALJÁN — lásd a reszponzív szakaszt a láthatóság-váltásért. */ .bs-nav__social{display:none} /* Kosár-ikon a fejlécben — a stúdiótémában nem volt (nem volt kosár), a webshopnál viszont az egyik legfontosabb fejléc-elem. */ .bs-header__cart{position:relative;display:flex;align-items:center;justify-content:center; width:36px;height:36px;color:var(--bs-text);flex:0 0 auto} .bs-header__cart svg{width:20px;height:20px} .bs-header__cart:hover{color:var(--bs-clay)} .bs-cart-count{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 3px; border-radius:999px;background:var(--bs-clay);color:#fff;font-size:10px;line-height:16px; text-align:center;font-weight:700} .bs-cart-count[data-empty="1"]{display:none} .bs-header__cta{display:flex;align-items:center;gap:8px} /* A fejléc-gombok itt mindig kompaktabbak, mint a .bs-btn--sm más helyeken (pl. kártya-gombok) — a fejlécben a legszűkösebb a hely, ezt a saját kontextusukban szabad tovább zsugorítani anélkül, hogy a megosztott .bs-btn--sm osztályt máshol is érintené. */ .bs-header__cta .bs-btn{padding:9px 16px!important;min-height:0!important;font-size:10.5px!important; letter-spacing:1.2px!important;gap:6px} .bs-burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;cursor:pointer} .bs-burger span{display:block;width:22px;height:2px;background:var(--bs-text); transition:transform .3s var(--bs-ease),opacity .2s var(--bs-ease)} .bs-site-footer{background:var(--bs-ink);color:rgba(230,222,214,.68);padding:0} .bs-site-footer a{color:rgba(230,222,214,.86);text-decoration:none} .bs-site-footer a:hover{color:var(--bs-clay-soft)} .bs-site-footer__top{max-width:var(--bs-content);margin:0 auto;padding:56px var(--bs-pad) 40px; display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;font-size:14px} .bs-footer__col p{margin:0 0 8px} .bs-footer__col--brand p{max-width:34ch;line-height:1.6} .bs-footer__logo{display:inline-block;margin-bottom:18px} .bs-footer__logo img{height:34px;width:auto;display:block} /* SZÁNDÉKOSAN nincs színszűrő a lábléc-logón: a panelen külön "Lábléc logó" mező van (footer_logo_id) — ha fehér változat kell a sötét háttérre, azt ott tölti fel az admin. A korábbi brightness(0) invert(1) kényszer minden feltöltött logót fehérre mosott, a színes verziót is. */ .bs-footer__heading{font-family:var(--bs-body);font-weight:700;font-size:12px;letter-spacing:1.6px; text-transform:uppercase;color:#fff;margin-bottom:14px!important} .bs-footer__follow-label{font-family:var(--bs-body);font-weight:700;font-size:11px;letter-spacing:1.6px; text-transform:uppercase;color:#fff;margin:18px 0 12px!important} .bs-footer__col ul{list-style:none;padding:0;margin:0} .bs-footer__col ul li{margin-bottom:8px} .bs-socials{display:flex;gap:12px} .bs-socials a{display:flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:50%;border:1px solid rgba(255,255,255,.25);transition:background .25s var(--bs-ease),border-color .25s var(--bs-ease)} .bs-socials a:hover{background:var(--bs-clay);border-color:var(--bs-clay);color:#fff} .bs-socials svg{width:16px;height:16px} .bs-site-footer__bottom{border-top:1px solid rgba(255,255,255,.12)} .bs-site-footer__bottom{max-width:var(--bs-content);margin:0 auto;padding:20px var(--bs-pad); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px} /* ========================================================================== 16. Lista-nézetek (téma-oldali) ========================================================================== */ .bs-archive__head{margin-bottom:38px} .bs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px} .bs-tile{background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-card-r);overflow:hidden} .bs-tile__thumb img{width:100%;aspect-ratio:3/2;object-fit:cover} .bs-tile__body{padding:24px} .bs-tile__body h2{font-size:21px;margin-bottom:10px} .bs-tile__body p{color:var(--bs-muted);font-size:14.5px;margin:0} /* Egyetlen bejegyzésnél: lapos, kép-balra/szöveg-jobbra elrendezés, hogy ne egy magas, üresen kongó, teljes szélességű doboz legyen a lista. */ .bs-grid--flat{display:block} .bs-grid--flat .bs-tile{display:flex;align-items:stretch} .bs-grid--flat .bs-tile__thumb{flex:0 0 42%;max-width:420px} .bs-grid--flat .bs-tile__thumb img{height:100%;aspect-ratio:auto} .bs-grid--flat .bs-tile__body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center} @media (max-width:700px){ .bs-grid--flat .bs-tile{flex-direction:column} .bs-grid--flat .bs-tile__thumb{flex:0 0 auto;max-width:none} .bs-grid--flat .bs-tile__thumb img{aspect-ratio:3/2} } .bs-pagination{display:flex;gap:9px;justify-content:center;margin-top:48px;flex-wrap:wrap} .bs-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:46px;min-height:46px;padding:0 14px;border:1px solid var(--bs-clay-soft); border-radius:var(--bs-btn-r);font-weight:700;font-size:12.5px;color:var(--bs-muted)} .bs-pagination .page-numbers.current{background:var(--bs-clay);border-color:var(--bs-clay);color:#fff} .bs-404{text-align:center;max-width:640px;margin-inline:auto} .bs-404__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0} /* Elementor nélkül szerkesztett tartalom */ /* Oldalsó padding NINCS: a belső .bs-shell adja — kettő együtt dupla margót és túlcsordulást adott a kosár/pénztár/fiók fej-sávján. */ .bs-plain__head{background:var(--bs-sand);padding:56px 0} .bs-plain>.bs-prose{padding:56px var(--bs-pad)} .bs-plain>.bs-woo{padding:32px var(--bs-pad) 64px} .bs-built__body{width:100%} /* Aloldal-fejléc (a generált oldalak első szakasza) */ .bs-pagehead{background:var(--bs-sand);padding:56px 0 48px} /* A fej-sáv után jövő első szakasz (jogi szöveg, kapcsolat) ne kapjon újabb 84px-et — a sáv és a tartalom közt kongott a hely. */ .bs-pagehead+.bs-sec{padding-top:44px} .bs-pagehead .elementor-heading-title{max-width:22ch} .bs-pagehead__media{padding:0 0 12px} .bs-pagehead__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px} /* Rácsos szakasz alap-térköze */ .bs-sec--grid>.elementor-container{align-items:stretch} .bs-sec--grid .elementor-column>.elementor-widget-wrap{height:100%} /* ========================================================================== 17. Mozgás ========================================================================== */ /* A rejtett kezdőállapotot CSAK akkor kapcsoljuk be, ha a JS tényleg fut és képes visszakapcsolni (a .bs-anim osztályt a script teszi a body-ra). Enélkül egy JS-hiba láthatatlanná tenné az egész oldalt. */ .bs-anim .bs-sec .elementor-widget{opacity:0;transform:translateY(22px); transition:opacity .7s var(--bs-ease),transform .7s var(--bs-ease)} .bs-anim .bs-sec.bs-in .elementor-widget{opacity:1;transform:none} .bs-anim .bs-sec.bs-in .elementor-widget:nth-child(2){transition-delay:70ms} .bs-anim .bs-sec.bs-in .elementor-widget:nth-child(3){transition-delay:140ms} .bs-anim .bs-sec.bs-in .elementor-widget:nth-child(4){transition-delay:210ms} /* A `.bs-legal` (jogi oldalak, pl. ÁSZF) szakasza több ezer pixel magas lehet — egyetlen görgetési pozícióban sem éri el a fenti IntersectionObserver 10%-os láthatósági küszöbét (lásd effects.js), ezért `.bs-in` nélkül is véglegesen `opacity:0`-n ragadna. Élőben ellenőrizve, valódi hiba volt: a teljes jogi szöveg láthatatlan maradt. A hosszú referenciaszövegnek amúgy sincs szüksége belépő-animációra, ezért egyszerűen kivesszük alóla. */ .bs-anim .bs-sec .bs-legal .elementor-widget{opacity:1!important;transform:none!important} /* Az Elementor szerkesztőjében soha ne tűnjön el semmi. */ body.elementor-editor-active .bs-sec .elementor-widget{opacity:1!important;transform:none!important} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} .bs-anim .bs-sec .elementor-widget{opacity:1!important;transform:none!important} } /* ========================================================================== 18. Reszponzív ========================================================================== */ /* Az Elementor a saját oszlop-szélességét (pl. width:25%) közvetlenül az elemre írja, elég magas specificitással. Az !important itt nem hanyagság, hanem szükséges garancia arra, hogy a mi töréspontjaink MINDIG felülírják — enélkül a rács néhány közbenső szélességnél Elementor-szélesség és a mi CSS-ünk között "vergődhet", ami pont a zsúfolt, kettévágott elrendezést okozza. */ /* A fejléc burger-küszöbét 1300px-re emeltük (lásd lent) kifejezetten azért, hogy asztali nézeten mindkét gombnak (Shop is, nem csak Időpontfoglalás) maradjon hely a felirattal együtt — ezért itt nincs ikon-only kényszerítés; csak a legszűkebb (≤480px) mobil-nézetben vált ikon-only formára mindkét gomb, lásd lejjebb. */ /* Fejléc — burger-menü ≤1300px alatt (checkbox hack, JS nélkül). A küszöb korábban 900px volt, de a fejléc belseje MINDIG max. 1240px (--bs-content) — logó + 7 menüpont + 2 social-ikon + 2 gomb élőben tesztelve ennél szűkebb helyen már tördelt (a "KAPCSOLAT" 2. sorba csúszott), MÉG a gombok összébb húzása után is. Emelve 1300px-re, hogy a teljes vízszintes menü fizikailag ne is jelenhessen meg ott, ahol nem fér el — helyette a burger veszi át. */ @media (max-width:1300px){ .bs-burger{display:flex} .bs-nav{ /* Nem fix pixel-magassághoz igazítva — a .bs-header__inner (relatív szülő) tényleges magassága alatt jelenik meg, függetlenül attól, hogy a logó/szöveg pontosan mekkora fejlécet ad. */ position:absolute;top:100%;left:0;right:0;background:#fff; border-bottom:1px solid var(--bs-line);box-shadow:0 12px 24px -16px rgba(46,41,38,.3); max-height:calc(100dvh - 100%);overflow-y:auto; padding:8px 0 18px; transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none; transition:transform .3s var(--bs-ease),opacity .3s var(--bs-ease); } .bs-nav ul{flex-direction:column;gap:0} /* FONTOS: kifejezetten a
    -ön belüli linkekre szűkítve — a .bs-nav__social (face/insta sáv) a
      -on KÍVÜL, azzal testvérként ül a