/* ORACLASTRA — ANIMAL TOTEM — final visual alignment */
body:has(#totemForm){background:#071427!important;color:#f7f1e4!important;overflow-x:hidden}
body:has(#totemForm) .announcement{min-height:38px!important;padding:9px 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:24px!important;flex-wrap:wrap!important;background:#05091d!important;border-bottom:1px solid rgba(216,173,99,.28)!important;color:#d8ad63!important;font:600 11px Inter,Arial,sans-serif!important;letter-spacing:.08em!important}
body:has(#totemForm) .site-header{min-height:96px!important;height:auto!important;padding:18px 4vw!important;background:#05091d!important;border-bottom:1px solid rgba(216,173,99,.35)!important;display:flex!important;align-items:center!important;gap:22px!important;position:relative!important}
body:has(#totemForm) .site-header .brand{display:flex!important;align-items:center!important;gap:12px!important;color:#f0cf8a!important;text-decoration:none!important}
body:has(#totemForm) .site-header .brand-mark{font-size:38px!important;color:#f0cf8a!important;line-height:1!important}
body:has(#totemForm) .site-header .brand b{font:600 24px Cinzel,Georgia,serif!important;color:#f0cf8a!important;letter-spacing:2px!important}
body:has(#totemForm) .site-header .brand small{display:block!important;color:#aeb8c8!important;font:400 9px Inter,Arial,sans-serif!important;letter-spacing:2px!important;margin-top:2px!important}
body:has(#totemForm) .site-header nav{display:flex!important;gap:20px!important;margin-left:auto!important;align-items:center!important}
body:has(#totemForm) .site-header nav a{color:#e9edf3!important;text-decoration:none!important;font-size:13px!important}
body:has(#totemForm) .site-header nav a:hover{color:#f0cf8a!important}
body:has(#totemForm) .header-actions{display:flex!important;align-items:center!important;gap:10px!important;margin-left:4px!important}
body:has(#totemForm) .home-link,body:has(#totemForm) .cart{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:42px!important;padding:9px 14px!important;border:1px solid rgba(216,173,99,.65)!important;border-radius:12px!important;background:rgba(7,20,39,.35)!important;color:#f0cf8a!important;text-decoration:none!important;font-weight:600!important;white-space:nowrap!important}
body:has(#totemForm) .cart-count{display:inline-grid!important;place-items:center!important;min-width:24px!important;height:24px!important;border-radius:50%!important;background:#d8ad63!important;color:#15243a!important;font-size:12px!important;font-weight:800!important}
body:has(#totemForm) .mobile-menu{display:none!important}
body:has(#totemForm) .hero{min-height:650px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;background:#071427!important}
body:has(#totemForm) .hero-copy{padding:100px clamp(28px,6vw,90px) 70px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:linear-gradient(90deg,#071427 0%,#071427f5 72%,#071427c9 100%)!important}
body:has(#totemForm) .hero-copy h1{margin:14px 0 24px!important;font:600 clamp(46px,5.2vw,76px)/1.05 Cinzel,Georgia,serif!important;color:#fbf8f1!important}
body:has(#totemForm) .hero-copy h1 em{color:#e7bd62!important;font-style:normal}
body:has(#totemForm) .hero-copy>p:not(.kicker){max-width:690px;color:#e0dce0!important;font:400 19px/1.7 Inter,Arial,sans-serif!important}
body:has(#totemForm) .hero-actions{display:flex!important;gap:14px!important;flex-wrap:wrap!important;margin-top:12px!important}
body:has(#totemForm) .hero-actions .gold-btn,body:has(#totemForm) .hero-actions .ghost-btn{min-height:52px!important;padding:14px 24px!important;border-radius:12px!important;font-size:16px!important}
body:has(#totemForm) .hero-art{min-height:650px!important;height:auto!important;background-image:url('/images/animal-totem-hero.webp?v=animal-totem-reference-20260905?v=wolf-reference')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
body:has(#totemForm) .collection,body:has(#totemForm) .stones,body:has(#totemForm) .home-horoscope-mini{background:#071427!important;color:#f7f1e4!important}
body:has(#totemForm) .collection{padding:88px clamp(20px,6vw,90px)!important}
body:has(#totemForm) .section-title{max-width:900px;margin:0 auto 34px}
body:has(#totemForm) .section-title h2,body:has(#totemForm) .stones h2,body:has(#totemForm) .home-horoscope-mini h2{color:#f0cf8a!important;font:600 clamp(32px,4vw,50px)/1.12 Cinzel,Georgia,serif!important}
body:has(#totemForm) .section-title>p:not(.kicker){color:#d9d4dc!important;font:400 18px/1.7 Inter,Arial,sans-serif!important}
body:has(#totemForm) .oracle-form{max-width:980px!important;margin:0 auto!important;padding:34px!important;background:linear-gradient(145deg,#0c1d35,#08152a)!important;border:1px solid rgba(216,173,99,.5)!important;border-radius:20px!important;box-shadow:0 20px 55px rgba(0,0,0,.28)!important}
body:has(#totemForm) .form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
body:has(#totemForm) .form-grid label{display:flex!important;flex-direction:column!important;gap:8px!important;min-width:0!important;color:#f0cf8a!important;font:600 14px/1.3 Inter,Arial,sans-serif!important}
body:has(#totemForm) .form-grid input,body:has(#totemForm) .form-grid select{width:100%!important;min-height:48px!important;padding:11px 13px!important;border:1px solid rgba(216,173,99,.45)!important;border-radius:9px!important;background:#f8f6f1!important;color:#17243a!important;font:400 16px Inter,Arial,sans-serif!important;appearance:auto!important}
body:has(#totemForm) .oracle-form>.gold-btn{margin-top:24px!important;min-height:52px!important;border:0!important;border-radius:11px!important;font-size:16px!important}
body:has(#totemForm) .stones{padding:75px clamp(20px,6vw,90px)!important}
body:has(#totemForm) .stone-grid{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body:has(#totemForm) .stone-card{display:block!important;padding:25px!important;border:1px solid rgba(216,173,99,.42)!important;border-radius:16px!important;background:#0b1a30!important;color:#f7f1e4!important;text-decoration:none!important}
body:has(#totemForm) .stone-card b{display:block;color:#f0cf8a!important;font:600 20px Cinzel,Georgia,serif!important;margin-top:15px}
body:has(#totemForm) .stone-card span{display:block;color:#c9c5ce!important;margin-top:7px}
body:has(#totemForm) .home-horoscope-mini{padding:70px clamp(20px,6vw,90px)!important;border-top:1px solid rgba(216,173,99,.25)!important}
body:has(#totemForm) footer{background:#05091d!important;border-top:1px solid rgba(216,173,99,.28)!important}
@media(max-width:900px){body:has(#totemForm) .announcement{justify-content:flex-start!important;gap:8px 18px!important;font-size:10px!important}body:has(#totemForm) .site-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:'brand menu' 'actions actions'!important;gap:14px!important;padding:16px 18px!important}body:has(#totemForm) .site-header .brand{grid-area:brand!important;min-width:0!important}body:has(#totemForm) .site-header .brand-mark{font-size:32px!important}body:has(#totemForm) .site-header .brand b{font-size:21px!important}body:has(#totemForm) .site-header .brand small{font-size:7px!important;letter-spacing:1.5px!important}body:has(#totemForm) .site-header nav{grid-area:nav!important;display:none!important;position:absolute!important;left:18px!important;right:18px!important;top:100%!important;padding:14px!important;background:#05091d!important;border:1px solid rgba(216,173,99,.35)!important;border-radius:0 0 14px 14px!important;z-index:30!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important}body:has(#totemForm) .site-header .header-actions{grid-area:actions!important;width:100%!important;display:flex!important;gap:12px!important;margin:0!important}body:has(#totemForm) .site-header .home-link,body:has(#totemForm) .site-header .cart{flex:1!important;min-width:0!important}body:has(#totemForm) .mobile-menu{display:block!important;grid-area:menu!important;width:48px!important;height:48px!important;border:1px solid rgba(216,173,99,.65)!important;border-radius:12px!important;background:transparent!important;color:#f0cf8a!important;font-size:25px!important;line-height:1!important}body:has(#totemForm) .hero{grid-template-columns:1fr!important;min-height:0!important}body:has(#totemForm) .hero-copy{padding:62px 22px 42px!important}body:has(#totemForm) .hero-copy h1{font-size:46px!important}body:has(#totemForm) .hero-art{min-height:340px!important;height:340px!important}body:has(#totemForm) .collection{padding:62px 18px!important}body:has(#totemForm) .oracle-form{padding:20px!important}body:has(#totemForm) .form-grid{grid-template-columns:1fr!important;gap:15px!important}body:has(#totemForm) .stones{padding:55px 18px!important}body:has(#totemForm) .stone-grid{grid-template-columns:1fr!important}}
@media(max-width:520px){body:has(#totemForm) .site-header{padding:14px 16px 12px!important}body:has(#totemForm) .site-header .brand b{font-size:19px!important}body:has(#totemForm) .hero-copy h1{font-size:40px!important}body:has(#totemForm) .hero-copy>p:not(.kicker){font-size:17px!important}body:has(#totemForm) .hero-actions{flex-direction:column!important}body:has(#totemForm) .hero-actions a{width:100%!important;text-align:center!important}}

/* ===== FORM LABEL REPAIR =====
   The page i18n routine replaces label.textContent, which can temporarily
   concatenate the select option labels into the visible label. Hide that
   generated text and render the correct translated label from html[lang]. */
body:has(#totemForm) .form-grid label[data-i18n]{font-size:0!important;line-height:1.3!important}
body:has(#totemForm) .form-grid label[data-i18n]::before{display:block!important;font:600 14px/1.3 Inter,Arial,sans-serif!important;color:#f0cf8a!important}
body:has(#totemForm) .form-grid label[data-i18n="firstName"]::before{content:"Prénom"}
body:has(#totemForm) .form-grid label[data-i18n="birthDate"]::before{content:"Date de naissance"}
body:has(#totemForm) .form-grid label[data-i18n="birthTime"]::before{content:"Heure de naissance"}
body:has(#totemForm) .form-grid label[data-i18n="birthPlace"]::before{content:"Lieu de naissance"}
body:has(#totemForm) .form-grid label[data-i18n="email"]::before{content:"E-mail"}
body:has(#totemForm) .form-grid label[data-i18n="language"]::before{content:"Langue"}
html[lang="en"] body:has(#totemForm) .form-grid label[data-i18n="firstName"]::before{content:"First name"}
html[lang="en"] body:has(#totemForm) .form-grid label[data-i18n="birthDate"]::before{content:"Date of birth"}
html[lang="en"] body:has(#totemForm) .form-grid label[data-i18n="birthTime"]::before{content:"Time of birth"}
html[lang="en"] body:has(#totemForm) .form-grid label[data-i18n="birthPlace"]::before{content:"Place of birth"}
html[lang="en"] body:has(#totemForm) .form-grid label[data-i18n="email"]::before{content:"Email"}
html[lang="en"] body:has(#totemForm) .form-grid label[data-i18n="language"]::before{content:"Language"}
html[lang="es"] body:has(#totemForm) .form-grid label[data-i18n="firstName"]::before{content:"Nombre"}
html[lang="es"] body:has(#totemForm) .form-grid label[data-i18n="birthDate"]::before{content:"Fecha de nacimiento"}
html[lang="es"] body:has(#totemForm) .form-grid label[data-i18n="birthTime"]::before{content:"Hora de nacimiento"}
html[lang="es"] body:has(#totemForm) .form-grid label[data-i18n="birthPlace"]::before{content:"Lugar de nacimiento"}
html[lang="es"] body:has(#totemForm) .form-grid label[data-i18n="email"]::before{content:"Correo electrónico"}
html[lang="es"] body:has(#totemForm) .form-grid label[data-i18n="language"]::before{content:"Idioma"}
html[lang="pt"] body:has(#totemForm) .form-grid label[data-i18n="firstName"]::before{content:"Nome"}
html[lang="pt"] body:has(#totemForm) .form-grid label[data-i18n="birthDate"]::before{content:"Data de nascimento"}
html[lang="pt"] body:has(#totemForm) .form-grid label[data-i18n="birthTime"]::before{content:"Hora de nascimento"}
html[lang="pt"] body:has(#totemForm) .form-grid label[data-i18n="birthPlace"]::before{content:"Local de nascimento"}
html[lang="pt"] body:has(#totemForm) .form-grid label[data-i18n="email"]::before{content:"E-mail"}
html[lang="pt"] body:has(#totemForm) .form-grid label[data-i18n="language"]::before{content:"Idioma"}
html[lang="it"] body:has(#totemForm) .form-grid label[data-i18n="firstName"]::before{content:"Nome"}
html[lang="it"] body:has(#totemForm) .form-grid label[data-i18n="birthDate"]::before{content:"Data di nascita"}
html[lang="it"] body:has(#totemForm) .form-grid label[data-i18n="birthTime"]::before{content:"Ora di nascita"}
html[lang="it"] body:has(#totemForm) .form-grid label[data-i18n="birthPlace"]::before{content:"Luogo di nascita"}
html[lang="it"] body:has(#totemForm) .form-grid label[data-i18n="email"]::before{content:"E-mail"}
html[lang="it"] body:has(#totemForm) .form-grid label[data-i18n="language"]::before{content:"Lingua"}
body:has(#totemForm) .form-grid label[data-i18n] input,body:has(#totemForm) .form-grid label[data-i18n] select{font-size:16px!important;line-height:1.2!important}
