/*
 STIERS — Startseite (kompletter Neubau)
 Quelle: Figma "STIERS - WebAlpha", Frame 2270:9983 "HOME > Präsenz" (402px mobil)
 Namespace .sx- — eigenständig, überschreibt keine Alt-Styles.
*/

/* ============ Basis ============ */
.sx{position:relative;width:100%;max-width:402px;margin:0 auto;background:#010101;color:#fff;font-family:Poppins,-apple-system,system-ui,sans-serif;overflow:hidden}
main.wp-block-group > .alignfull{margin-top:0 !important;margin-bottom:0 !important}
.sx p,.sx h1,.sx h2,.sx h3,.sx ul{margin:0;padding:0}
.sx a{color:inherit;text-decoration:none}
.sx img{display:block;max-width:none}
.sx,.sx *{box-sizing:border-box}

/* Typo-Stile (Figma) */
.sx-kicker{font-weight:500;font-size:14px;line-height:21px;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.sx-h2{font-weight:400;font-size:18px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.sx-h3{font-weight:400;font-size:14px;line-height:1.4;letter-spacing:.05em;text-transform:uppercase}
.sx-body{font-weight:300;font-size:14px;line-height:16px;text-align:center}
.sx-note{font-weight:300;font-size:12px;line-height:14px}
.sx-info{font-weight:400;font-size:10px;line-height:13px;text-transform:uppercase;text-align:center}
.sx-dim{color:rgba(255,255,255,.55)}
.sx-dim50{color:rgba(255,255,255,.5)}

/* Buttons */
.sx-btn{display:flex;justify-content:center;align-items:center;padding:15px 30px;border:1px solid #F2F3F6;border-radius:50px;box-shadow:0 0 10px rgba(0,0,0,.1);font-family:inherit;font-weight:500;font-size:14px;line-height:1.2;letter-spacing:.15em;text-transform:uppercase;color:#fff;text-align:center;background:transparent;cursor:pointer;white-space:nowrap}
.sx .sx-btn--primary,.sx a.sx-btn--primary{background:#fff;color:#010101}

/* Sektions-Hintergrund */
.sx-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

/* ============ Header ============ */
.site-header.sx-header{position:absolute;top:0;left:0;right:0;height:69px;z-index:60;margin:0 auto;max-width:402px;padding:0;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
.site-header.sx-header.is-scrolled{position:fixed;background:rgba(1,1,1,.82)}
.sx-header-logo{position:absolute;left:19px;top:23px;display:block}
.sx-header-logo img{width:120px;height:21px}
.sx-header .stiers-hamburger{position:absolute;right:10px;top:14px;width:41px;height:41px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;background:none;border:0;padding:0;margin:0;cursor:pointer}
.sx-header .stiers-hamburger span{display:block;width:28px;height:3px;background:#fff;border-radius:2px}

/* ============ 1 · Hero (874) ============ */
.sx-hero{height:874px}
.sx-hero-inner{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.sx-hero-head{display:flex;flex-direction:column;gap:5px;padding:100px 20px 0}
.sx-hero-kicker{font-weight:400;font-size:14px;line-height:21px;letter-spacing:.1em;text-transform:uppercase}
.sx-hero-h1{font-weight:300;font-size:34px;line-height:1.22;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sx-hero-foot{display:flex;flex-direction:column;gap:30px}
.sx-hero-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 40px}
.sx-hero-action{display:flex;justify-content:center;padding-bottom:50px}
.sx-hero-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:15px 30px;font-weight:500;font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:#fff}
.sx-hero-cta img{height:10px;width:auto;margin:10px}
.sx-hero-pills{position:absolute;right:30px;top:389px;display:flex;flex-direction:column;gap:33px}
.sx-hero-pills span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:0 0 10px rgba(0,0,0,.1)}
body.home{padding-bottom:36px}

/* ============ 2 · Collection (874) ============ */
.sx-collection{height:874px}
.sx-collection .sx-bg{object-position:top}
.sx-feat{position:absolute;top:0;left:0;right:0;height:78px;display:flex;justify-content:center;align-items:center;gap:2px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
.sx-feat-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:88px}
.sx-feat-item img{width:30px;height:30px}
.sx-col-head{position:absolute;top:173px;left:50%;transform:translateX(-50%);width:min(375px,100%);display:flex;flex-direction:column;align-items:center;gap:30px}
.sx-col-head .sx-kicker{width:298px}
.sx-col-head .sx-h2{width:263px}
.sx-cards{position:absolute;top:447px;left:0;right:0;display:flex;justify-content:center}
.sx-pcard{position:relative;display:block;width:201px;height:427px;overflow:hidden}
.sx-pcard + .sx-pcard{border-left:1px solid rgba(255,255,255,.1)}
.sx-pcard-img{position:absolute;top:0;left:0;width:100%;height:437px;object-fit:cover}
.sx-pcard-info{position:relative;margin:19px 0 0 20px;width:175px;display:flex;flex-direction:column;gap:7px}
.sx-pcard-ml{font-weight:300;font-size:12px;line-height:14px;opacity:.5}
.sx-pcard-rule{width:17px;height:0;border-top:1px solid rgba(255,255,255,.25)}
.sx-pcard-claim,.sx-pcard-sub{width:164px}
.sx-pcard-price{font-weight:400;font-size:18px;letter-spacing:.08em;margin-top:0}
.sx-pcard-scents{position:absolute;top:331px;left:13px;width:176px;text-align:center;color:rgba(255,255,255,.55)}
.sx-pcard-buy{position:absolute;top:375px;left:50%;transform:translateX(-50%);display:inline-block;padding:5px 30px;border:1px solid #F2F3F6;border-radius:50px;box-shadow:0 0 10px rgba(0,0,0,.1);font-weight:500;font-size:14px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}

/* ============ 3 · Loved by Men (586) ============ */
.sx-loved{height:586px}
.sx-loved-head{position:absolute;top:130px;left:20px;right:20px;width:auto;display:flex;flex-direction:column;gap:15px}
.sx-testis{position:absolute;top:234px;left:0;width:100%}
.sx-testi-track{display:flex;gap:37px;padding:4px 50px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sx-testi-track::-webkit-scrollbar{display:none}
.sx-testi{flex:0 0 270px;height:140px;display:flex;align-items:center;gap:20px;padding:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);border-radius:39px;scroll-snap-align:center}
.sx-testi > img{width:80px;height:80px;border-radius:50%;object-fit:cover;flex:0 0 80px}
.sx-testi-q{display:flex;flex-direction:column;gap:10px;min-width:0}
.sx-testi-q p{font-weight:300;font-size:12px;line-height:14px}
.sx-stars{display:flex;gap:2px}
.sx-stars svg{width:13px;height:13px;fill:#fff}
.sx-testi-nav{position:absolute;top:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer}
.sx-testi-nav--l{left:0}
.sx-testi-nav--r{right:0}
.sx-testi-nav img{width:10px;height:auto}
.sx-loved-text{position:absolute;top:433px;left:20px;right:20px;width:auto}

/* ============ 4 · Philosophie (692) ============ */
.sx-philo{height:692px}
.sx-philo-cta{position:absolute;top:520px;left:33px;right:33px;width:auto;display:flex;flex-direction:column;align-items:center;gap:45px}
.sx-philo-cta .sx-btn{width:230px}

/* ============ 5 · Unser Standard (759) ============ */
.sx-standard{height:759px}
.sx-std-list{position:absolute;top:239px;left:42px;width:min(321px,100%);display:flex;flex-direction:column;gap:30px}
.sx-std-item{display:flex;gap:30px}
.sx-std-item > img{width:45px;height:36px;flex:0 0 45px}
.sx-std-txt{display:flex;flex-direction:column;gap:5px;min-width:0}

/* ============ 6 · Öle / Ingredients (874) ============ */
.sx-oele{height:874px}
.sx-oele-head{position:absolute;top:71px;left:41px;right:41px;width:auto;display:flex;flex-direction:column;align-items:center;gap:30px}
.sx-oele-label{position:absolute;width:123px;display:flex;flex-direction:column;gap:5px;text-align:center;color:rgba(255,255,255,.55)}
.sx-oele-label .sx-h3{text-align:center}
.sx-oele-label--1{top:250px;left:28px}
.sx-oele-label--2{top:264px;left:184px}
.sx-oele-label--3{top:381px;left:105px}
.sx-oele-label--4{top:381px;left:261px}
.sx-oele-line{position:absolute;width:6px}
.sx-oele-line--1{top:332px;left:86px;height:181px}
.sx-oele-line--2{top:452px;left:163px;height:61px}
.sx-oele-line--3{top:348px;left:242px;height:165px}
.sx-oele-line--4{top:463px;left:319px;height:50px}
.sx-oele-btn{position:absolute;top:676px;left:86px;width:230px}

/* ============ 7 · Pflege / Kontrolle (874) ============ */
.sx-pflege{height:874px}
.sx-pflege-head{position:absolute;top:36px;left:41px;right:41px;width:auto;display:flex;flex-direction:column;align-items:center;gap:30px}
.sx-pflege-head .sx-body{width:min(303px,100%)}
.sx-tag{position:absolute;width:123px;display:flex;flex-direction:column;gap:5px;text-align:center;color:rgba(255,255,255,.55)}
.sx-tag .sx-h3{text-align:center}
.sx-tag--mandel{top:340px;left:25px}
.sx-tag--jojoba{top:376px;left:255px}
.sx-tag--argan{top:567px;left:22px}
.sx-tag--trauben{top:603px;left:266px}
.sx-tag-line{position:absolute}
.sx-tag-line--1{top:403px;left:41px;width:156px;height:76px}
.sx-tag-line--2{top:441px;left:197px;width:140px;height:91px}
.sx-tag-line--3{top:497px;left:45px;width:138px;height:60px}
.sx-tag-line--4{top:497px;left:220px;width:137px;height:99px}
.sx-pflege-btn{position:absolute;top:753px;left:50%;transform:translateX(-50%);width:219px}

/* ============ 8 · FAQ (1109) ============ */
.sx-faq{height:1109px}
.sx-faq-head{position:absolute;top:42px;left:39px;right:39px;width:auto;display:flex;flex-direction:column;gap:15px}
.sx-faq-list{position:absolute;top:183px;left:0;width:100%;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:30px}
.sx-faq-item{display:flex;flex-direction:column;gap:5px;width:100%}
.sx-faq-q{display:flex;align-items:center;gap:12px;color:#fff}
.sx-faq-q::before{content:"";width:40px;height:1px;background:rgba(255,255,255,.55);flex:0 0 40px}
.sx-faq-a{padding-left:52px}
.sx-faq-a p{width:290px;max-width:100%;color:rgba(255,255,255,.55)}
.sx-faq-list .sx-btn{width:266px}

/* ============ 9 · Bundle (781) ============ */
.sx-bundle{height:781px}
.sx-bundle-head{position:absolute;top:150px;left:0;width:100%;padding:0 20px;display:flex;flex-direction:column;gap:30px}
.sx-bundle-price{position:absolute;top:358px;left:253px;width:149px;display:flex;flex-direction:column;gap:19px}
.sx-bundle-price-grp{display:flex;flex-direction:column;gap:3px}
.sx-bundle-amount{font-weight:400;font-size:18px;letter-spacing:.08em}
.sx-bundle-text{position:absolute;top:520px;left:19px;right:19px;width:auto;display:flex;justify-content:center}
.sx-bundle-text p{width:273px;text-align:center}
.sx-bundle-cart{position:absolute;top:584px;left:50%;transform:translateX(-50%);width:248px}
.sx-bundle-ritual{position:absolute;top:652px;left:50%;transform:translateX(-50%);width:247px}

/* ============ Footer (174) ============ */
.sx-footer{position:relative;width:100%;max-width:402px;margin:0 auto;height:236px;background:#000;color:#fff;font-family:Poppins,-apple-system,system-ui,sans-serif;border-top:1px solid rgba(255,255,255,.3)}
.sx-footer *{box-sizing:border-box}
.sx-footer p{margin:0}
.sx-footer a{color:inherit;text-decoration:none}
.sx-footer-left{position:absolute;top:26px;left:16px;display:flex;flex-direction:column;gap:10px}
.sx-footer-left > a img{width:88px;height:auto;display:block}
.sx-footer-tag{font-weight:300;font-size:10px;line-height:1.5}
.sx-footer-social{display:flex;align-items:center;gap:14px;margin-top:4px}
.sx-footer-social a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.sx-footer-social .s-mail img{width:20px;height:auto}
.sx-footer-social .s-insta img{width:18px;height:18px}
.sx-footer-links{position:absolute;top:24px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:0;font-weight:300;font-size:10px;line-height:1.2;color:rgba(255,255,255,.55)}
.sx-footer-links a{display:flex;align-items:center;justify-content:flex-end;min-width:88px;min-height:48px;padding-left:16px}
