/* vampyyshop: eigene Gestaltung nur fuer /shop/ (Ivory · Champagner · Kupfer · Espresso, Cormorant Garamond + Jost).
   Der Basar behaelt den Flyer-Stil aus style.css. Alles hier haengt an body.shop. */
body.shop{
  --bg:#FAF7F4; --bg2:#F1EAE5; --text:#141012; --muted:#6B6063; --border:#E4DAD5;
  --accent:#7B1E32; --accent-h:#5A1426; --ink:#0E0A0B; --on-ink:#F4ECE6;
  --bordeaux:#5A1426; --gold:#C9A66B; --champagne:#C9A66B; --display:'Cormorant Garamond',Georgia,serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.shop{--bg:#0F0B0C;--bg2:#1A1214;--text:#F4ECE6;--muted:#B9AAA7;--border:#33262A;--accent:#C9A66B;--accent-h:#DDBB82;--ink:#080506}}
:root[data-theme="dark"] body.shop{--bg:#0F0B0C;--bg2:#1A1214;--text:#F4ECE6;--muted:#B9AAA7;--border:#33262A;--accent:#C9A66B;--accent-h:#DDBB82;--ink:#080506}

/* Typografie: Editorial-Serif, Gross-/Kleinschreibung, kursive Akzente */
body.shop h1,body.shop h2,body.shop h3{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.01em}
body.shop h1,body.shop h2{line-height:1.04}
body.shop h2{font-size:clamp(2.3rem,5vw,3.8rem)}
body.shop h3{font-size:1.65rem;line-height:1.15}
body.shop .phero h1{font-size:clamp(3.4rem,9vw,6.6rem);margin:.3rem 0 1.5rem;line-height:.98}
body.shop em{font-style:italic;color:var(--accent)}
body.shop .eyebrow{display:block;font-size:.72rem;letter-spacing:.32em;margin-bottom:1.1rem}
body.shop .eyebrow::after{display:none}
body.shop .eyebrow{hyphens:none;overflow-wrap:normal}
@media(max-width:560px){body.shop .eyebrow{letter-spacing:.2em;font-size:.68rem}}
body.shop .lead{font-size:1.15rem}

/* Logo und Navigation */
body.shop .logo{font-family:var(--serif);font-size:1.8rem;letter-spacing:.2em;text-transform:lowercase;font-weight:500}
body.shop .logo{line-height:1}
body.shop .logo small{font-size:.56rem;letter-spacing:.3em;margin-top:.5rem;text-transform:uppercase}
body.shop .logo small::after{content:none}
body.shop .nav__links a.shopl{border-radius:999px;border-color:var(--accent)}
body.shop .nav__links a.shopl:hover,body.shop .nav__links a.on.shopl{background:var(--accent);color:#fff}
body.shop .announce{background:var(--bordeaux)}

/* Buttons: runde Pillen */
body.shop .btn{border-radius:999px;letter-spacing:.2em}
body.shop .btn--fill{background:var(--accent);color:#fff}
body.shop .btn--fill:hover{background:var(--accent-h)}
:root[data-theme="dark"] body.shop .btn--fill{color:#0E0A0B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.shop .btn--fill{color:#0E0A0B}}

/* Hero: warmer Verlauf, Bogen-Bildmaske */
body.shop .phero{background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);border-bottom:3px solid var(--accent);padding:5rem 0 5.5rem}
body.shop .arch{border-radius:999px 999px 18px 18px;overflow:hidden;aspect-ratio:4/5.2;background:var(--bg2);box-shadow:0 30px 60px -28px rgba(74,19,34,.55)}
body.shop .arch::before{display:none}
body.shop .arch img{position:static}
@media(max-width:860px){body.shop .phero{padding:2.5rem 0 3.5rem}body.shop .phero .arch{max-width:340px;border-radius:999px 999px 18px 18px;justify-self:start}}

/* Karten, Galerie, Bildflaechen */
body.shop .card{border-radius:18px;background:var(--bg2);border:1px solid transparent}
body.shop .section--tint .card{background:var(--bg);border-color:var(--border)}
body.shop .cards--2:not(.tools) .card:nth-child(2){background:var(--bordeaux);border-color:var(--bordeaux);color:#F6EDE6;--accent:#E3B48A;--accent-h:#F0C7A0}
body.shop .cards--2:not(.tools) .card:nth-child(2) p{color:rgba(246,237,230,.78)}
body.shop .cards--2:not(.tools) .card:nth-child(2) .btn--line{color:#F6EDE6;border-color:rgba(246,237,230,.7)}
body.shop .cards--2:not(.tools) .card:nth-child(2) .btn--line:hover{background:#F6EDE6;color:var(--bordeaux)}
body.shop .cards--2:not(.tools) .card:nth-child(2) .btn--fill{background:#E3B48A;color:#2A0B14}
body.shop .gallery img{border-radius:14px}
body.shop .split__m img{border-radius:999px 999px 18px 18px;aspect-ratio:4/5}

/* Schritte */
body.shop .step{border-top:2px solid var(--accent)}
body.shop .step::before{font-family:var(--serif);font-style:italic;font-size:2.2rem}

/* FAQ */
body.shop .faq summary{font-family:var(--serif);font-size:1.45rem;letter-spacing:0}

/* Hinweise und Listen */
body.shop .note{border-left:3px solid var(--accent);border-radius:0 14px 14px 0}
body.shop .olist li::before{border-radius:50%;font-family:var(--serif);font-size:1.1rem}

/* Dunkles Band und Footer: Espresso mit Champagner statt Olivgruen */
body.shop .band{--accent:#E3B48A;--accent-h:#F0C7A0;background:var(--bordeaux)}
body.shop .band em,body.shop .band .eyebrow{color:#E3B48A}
body.shop .band .btn--fill{background:#E3B48A;color:#2A0B14}
body.shop .band .btn--fill:hover{background:#F0C7A0}
body.shop .footer{background:var(--ink);border-top:3px solid #E3B48A}
body.shop .footer h4{color:#E3B48A}
body.shop .footer .logo{font-size:1.6rem}

/* Mobile Menue im Shop-Stil */
@media(max-width:860px){
  body.shop .mnav a{font-family:var(--serif);font-size:2rem;text-transform:none;letter-spacing:-.005em}
  body.shop .mnav a::after{content:none}
  body.shop .mnav a.shopl::before{display:none}
  body.shop .mnav a.subl{font-size:1.2rem}
}

/* ── Feinschliff: ruhigerer Rhythmus, Zierlinien, Bogenbilder ── */
body.shop .section{padding:5.5rem 0}
body.shop .eyebrow::before{content:"";display:inline-block;width:1.8rem;height:1px;background:currentColor;vertical-align:middle;margin-right:.9rem;opacity:.8}
body.shop .head--center .eyebrow::before{display:none}
body.shop .head--center h2::after{content:"";display:block;width:3.4rem;height:1px;background:var(--champagne);margin:1.6rem auto 0}
body.shop .phero .arch{margin-inline:auto}
@media(min-width:861px){
  body.shop .phero__grid{grid-template-columns:1.1fr .9fr;gap:5rem}
  body.shop .phero .arch{justify-self:end;margin-inline:0;max-width:460px;width:100%}
}
body.shop .phero .lead{font-size:1.2rem;max-width:33rem}
body.shop .card{padding:2.4rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
body.shop .card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(74,19,34,.5)}
body.shop .card h3{margin:.4rem 0 .8rem}
body.shop .gallery{gap:1.2rem;align-items:end}
body.shop .gallery img{aspect-ratio:3/4}
body.shop .gallery img:nth-child(2){border-radius:999px 999px 14px 14px;aspect-ratio:3/4.5}
body.shop .step::before{font-size:2.8rem;line-height:1.1}
body.shop .step h3{font-size:1.7rem}
body.shop .faq details{transition:background .2s}
body.shop .faq summary{transition:color .2s}
body.shop .faq summary:hover{color:var(--accent)}
body.shop #bewertungen{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
body.shop .band{padding:6.5rem 0;background:radial-gradient(120% 140% at 50% 0%,#5E1A2D 0%,var(--bordeaux) 60%)}
body.shop .band h2{color:#F6EDE6}
body.shop .band .head{margin-bottom:0}
body.shop .footer .logo{letter-spacing:.24em}


/* ── Schwarz · Bordeaux · Gold (passend zur Chogan-Welt) ── */
body.shop .nav,body.shop .phero{
  --text:#F4ECE6;--muted:#C2B3AF;--border:rgba(244,236,230,.16);--accent:#C9A66B;--accent-h:#DDBB82}
body.shop .nav{background:rgba(14,10,11,.94);border-bottom:1px solid rgba(201,166,107,.28);color:var(--text)}
body.shop .nav .logo{color:#F4ECE6}
body.shop .nav .logo small{color:#C9A66B}
body.shop .nav__links a:hover,body.shop .nav__links a.on{color:#fff}
body.shop .nav .btn--fill,body.shop .phero .btn--fill{background:#C9A66B;color:#0E0A0B}
body.shop .nav .btn--fill:hover,body.shop .phero .btn--fill:hover{background:#DDBB82}
body.shop .nav__links a.shopl{color:#C9A66B;border-color:#C9A66B}
body.shop .nav__links a.shopl:hover,body.shop .nav__links a.on.shopl{background:#C9A66B;color:#0E0A0B}
body.shop .phero{
  background:radial-gradient(70% 110% at 88% 25%,rgba(122,30,50,.85) 0%,rgba(90,20,38,.35) 45%,rgba(14,10,11,0) 75%),#0E0A0B;
  color:var(--text);border-bottom:1px solid rgba(201,166,107,.4)}
body.shop .phero h1{color:#F4ECE6}
body.shop .phero h1 em{color:#C9A66B}
body.shop .phero .btn--line:hover{background:#F4ECE6;color:#0E0A0B}
body.shop .phero .arch{box-shadow:0 40px 80px -30px rgba(0,0,0,.8);outline:1px solid rgba(201,166,107,.45);outline-offset:10px}
body.shop .phero a[href*="login_page"],body.shop .phero .oldshop a{color:#F4ECE6}
body.shop .announce{background:#5A1426;color:#F4ECE6}
body.shop .announce a{color:#C9A66B;border-color:#C9A66B}
body.shop .band{background:radial-gradient(110% 150% at 50% 0%,#6B1A2E 0%,#0E0A0B 75%)}
body.shop .band em,body.shop .band .eyebrow{color:#C9A66B}
body.shop .band{--accent:#C9A66B;--accent-h:#DDBB82}
body.shop .band .btn--fill,body.shop .cards--2:not(.tools) .card:nth-child(2) .btn--fill{background:#C9A66B;color:#0E0A0B}
body.shop .band .btn--fill:hover{background:#DDBB82}
body.shop .cards--2:not(.tools) .card:nth-child(2){background:linear-gradient(160deg,#6B1A2E,#3A0D1A);border-color:#6B1A2E;--accent:#C9A66B}
body.shop .footer{background:#080506;border-top:1px solid rgba(201,166,107,.45)}
body.shop .footer h4{color:#C9A66B}
body.shop .head--center h2::after{background:#C9A66B}
body.shop .step{border-top-color:var(--accent)}
@media(max-width:860px){body.shop .phero .arch{outline-offset:8px}}

/* Tools: Fragrance Finder und Skin Advisor */
body.shop .tools .card{display:flex;flex-direction:column}
body.shop .tools .card p{flex:1}
body.shop .tools .card .row{margin-top:1.6rem}
body.shop .tools .card h3{display:flex;align-items:center;gap:.8rem}
body.shop .tools .ico{flex:none;width:2.6rem;height:2.6rem;border:1px solid var(--accent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}

body.shop .tool__t{font-size:clamp(2.2rem,4.5vw,3.4rem);margin-bottom:1.1rem}
body.shop .tools.card{max-width:640px;margin-inline:auto;text-align:center}
body.shop .tools.card .row{justify-content:center}
body.shop .tools.card .eyebrow::before{display:none}

body.shop #bewertungen{background:none}

/* ── Handy-Optimierung ── */
@media(max-width:860px){
  body.shop .announce{display:none}
  body.shop .section{padding:3.2rem 0}
  body.shop .head{margin-bottom:2rem}
  body.shop h2{font-size:clamp(2rem,9vw,2.6rem)}
  body.shop .phero{padding:1.8rem 0 2.6rem}
  body.shop .phero h1{font-size:clamp(3rem,15vw,4rem);margin-bottom:1rem}
  body.shop .phero .lead{font-size:1.05rem;line-height:1.65}
  body.shop .phero .row{margin-top:1.4rem!important}
  body.shop .phero .arch{max-width:260px;margin:2rem auto 0;justify-self:center}
  body.shop .phero__grid{gap:0}
  body.shop .card{padding:1.6rem}
  body.shop .card h3{font-size:1.45rem}
  body.shop .split{gap:1.6rem}
  body.shop .split[style]{margin-top:2.6rem!important}
  body.shop .split__m{max-width:290px;margin-inline:auto;width:100%}
  body.shop .split__m img{aspect-ratio:1/1.1}
  body.shop .tool__t{font-size:2.2rem;margin-bottom:.7rem}
  body.shop .step h3{font-size:1.45rem}
  body.shop .step::before{font-size:2.2rem}
  body.shop .faq summary{font-size:1.2rem;padding:1.15rem 0}
  body.shop .gallery{gap:.7rem}
  body.shop .btn{min-height:48px}
  body.shop .row .btn{flex:1 1 100%}
  body.shop .band{padding:3.6rem 0}
  body.shop .footer{padding-bottom:1.5rem}
  body.shop .dock{background:rgba(14,10,11,.96);border-top:1px solid rgba(201,166,107,.4)}
  body.shop .dock .btn--fill{background:#C9A66B;color:#0E0A0B}
  body.shop .dock .btn--line{color:#F4ECE6;border-color:rgba(244,236,230,.55)}
}
body.shop .split__m img,body.shop .gallery img{height:auto}

/* Formulare im Shop-Stil (Kundenkreis) */
body.shop .form input:not([type=checkbox]):not([type=radio]),body.shop .form textarea{border:1px solid var(--muted);border-radius:14px;background:var(--bg2);padding:1rem 1.15rem}
body.shop .form input:focus,body.shop .form textarea:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
body.shop .form legend{font-family:var(--serif);font-size:1.5rem}
body.shop .form input[type=checkbox],body.shop .form input[type=radio]{accent-color:var(--accent);width:1.15rem;height:1.15rem}
body.shop .field label,body.shop .field .lab{font-size:.9rem}