/*
Theme Name:  CALYX Dark Child
Theme URI:   https://calyx-grow.de
Description: E1-Dark-Premium-Design-Layer fuer den CALYX Shop (Child von The8 Shop Dark). Farben, Typografie und Komponenten analog entwurf-1-dark-premium.
Author:      SNKB
Template:    the8-shop-dark
Version:     1.0.0
Text Domain: calyx-dark-child
*/

/* ============================================================
   1. DESIGN-TOKENS (aus Entwurf 1 „Dark Premium")
   ============================================================ */
:root{
  --cx-bg:#0a0f0a;
  --cx-bg-soft:#0d130d;
  --cx-card:#111a11;
  --cx-ink:#eaf5ea;
  --cx-dim:#9fb59f;
  --cx-faint:#607360;
  --cx-neon:#46f564;
  --cx-neon-soft:rgba(70,245,100,.55);
  --cx-line:rgba(70,245,100,.16);
  --cx-line-strong:rgba(70,245,100,.4);
  --cx-serif:"Cormorant Garamond",Georgia,serif;
  --cx-sans:"Inter",system-ui,-apple-system,sans-serif;
  --cx-radius:16px;
  --cx-radius-sm:10px;
  --cx-shadow:0 22px 55px -25px rgba(0,0,0,.7);
  --cx-shadow-neon:0 26px 60px -30px rgba(70,245,100,.4);
}

/* ============================================================
   2. BASIS
   ============================================================ */
html{scrollbar-color:var(--cx-faint) var(--cx-bg)}
body{
  background:var(--cx-bg) !important;
  color:var(--cx-ink);
  font-family:var(--cx-sans);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cx-neon);color:#06210c}
a{color:var(--cx-ink);transition:color .25s ease}
a:hover{color:var(--cx-neon)}
h1,h2,h3,h4,.woocommerce-loop-product__title,
.product_title,.wp-block-heading,
.elementor-heading-title{
  font-family:var(--cx-serif) !important;
  font-weight:500;
  color:var(--cx-ink);
  letter-spacing:.01em;
}
h5,h6{font-family:var(--cx-sans) !important;font-weight:600}
p,li,td,th,label,input,textarea,select,button{font-family:var(--cx-sans)}
img{border-radius:0}

/* ============================================================
   3. HEADER / NAVIGATION
   ============================================================ */
.site-header,
.site-header.style_1,
.site-header.sticky-mode,
.site-header .header-inner{
  background:rgba(10,15,10,.92) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cx-line);
  box-shadow:none;
}
.site-header a{color:var(--cx-ink)}
.site-header .main-navigation a,
.site-header nav a{
  font-family:var(--cx-sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cx-dim);
}
.site-header nav a:hover,
.site-header .main-navigation a:hover,
.site-header .current-menu-item > a{color:var(--cx-neon) !important}
.site-header nav.underline a::after{background:var(--cx-neon)}
.site-header .custom-logo{max-height:64px;width:auto}
.site-header .cart-contents,.site-header .search-modal{color:var(--cx-ink)}
.site-header .cart-contents:hover{color:var(--cx-neon)}
.site-header .count,.cart-count,.cart-counter{
  background:var(--cx-neon) !important;color:#06210c !important;font-weight:700;
}
.the8-shop-dark-navbar,.mobile-menu-wrap,.offcanvas-menu{
  background:var(--cx-bg-soft) !important;border-color:var(--cx-line);
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.button,button:not(.the8-shop-dark-navbar-close):not(.search-modal),
input[type="submit"],input[type="button"],
.woocommerce a.button,.woocommerce button.button,
.wp-block-button__link,.elementor-button{
  background:transparent;
  color:var(--cx-ink);
  border:1px solid var(--cx-line-strong);
  border-radius:999px;
  font-family:var(--cx-sans);
  font-weight:600;
  letter-spacing:.06em;
  padding:.72em 1.6em;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
input[type="submit"]:hover,.wp-block-button__link:hover,.elementor-button:hover{
  border-color:var(--cx-neon);
  color:var(--cx-neon);
  background:rgba(70,245,100,.06);
  transform:translateY(-2px);
}
/* Primaer-Aktionen: Neon solid */
.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce button[name="add-to-cart"],
.added_to_cart.wc-forward,
.woocommerce-message .button,
.return-to-shop .button{
  background:var(--cx-neon) !important;
  color:#06210c !important;
  border-color:var(--cx-neon) !important;
  font-weight:700;
}
.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover{
  background:#5fff7d !important;
  box-shadow:var(--cx-shadow-neon);
  transform:translateY(-2px);
}
.button:disabled,.button.disabled{opacity:.45}

/* ============================================================
   5. PRODUKT-GRID (Shop / Archiv)
   ============================================================ */
.woocommerce ul.products li.product,
ul.products li.product{
  background:var(--cx-card);
  border:1px solid var(--cx-line);
  border-radius:var(--cx-radius);
  padding:1rem 1rem 1.4rem;
  overflow:hidden;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  border-color:var(--cx-neon-soft);
  box-shadow:var(--cx-shadow-neon);
}
.woocommerce ul.products li.product img{
  border-radius:var(--cx-radius-sm);
  transition:transform .5s ease;
}
.woocommerce ul.products li.product:hover img{transform:scale(1.04)}
.woocommerce-loop-product__title{
  font-size:1.28rem !important;
  color:var(--cx-ink) !important;
  margin-top:.6rem;
}
.woocommerce ul.products li.product .price,
.woocommerce .price{
  color:var(--cx-neon) !important;
  font-family:var(--cx-sans);
  font-weight:600;
}
.woocommerce .price del{color:var(--cx-faint);opacity:1}
.woocommerce .price ins{text-decoration:none}
.woocommerce span.onsale{
  background:var(--cx-neon);
  color:#06210c;
  font-weight:700;
  border-radius:999px;
  padding:.35em .9em;
  line-height:1.6;
  min-height:0;min-width:0;
}
.woocommerce .star-rating span::before,.woocommerce .star-rating::before{color:var(--cx-neon)}
.woocommerce .woocommerce-result-count{color:var(--cx-faint)}
.woocommerce .woocommerce-ordering select{
  background:var(--cx-bg-soft);color:var(--cx-ink);
  border:1px solid var(--cx-line);border-radius:var(--cx-radius-sm);padding:.5em .9em;
}

/* ============================================================
   6. PRODUKT-EINZELSEITE
   ============================================================ */
.product_title{font-size:clamp(1.9rem,4vw,2.8rem) !important}
.woocommerce div.product p.price{font-size:1.5rem}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--cx-line);padding-left:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 1.4em 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color:var(--cx-dim);font-weight:600;letter-spacing:.05em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--cx-neon)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--cx-neon)}
.woocommerce div.product .woocommerce-tabs .panel{
  background:var(--cx-card);border:1px solid var(--cx-line);
  border-radius:var(--cx-radius);padding:1.6rem;
}
.related.products > h2,.upsells > h2{font-size:1.8rem}
.quantity .qty{
  background:var(--cx-bg-soft);color:var(--cx-ink);
  border:1px solid var(--cx-line);border-radius:var(--cx-radius-sm);
}
.woocommerce-product-gallery img{border-radius:var(--cx-radius)}
.woocommerce-breadcrumb{color:var(--cx-faint) !important;font-size:.82rem;letter-spacing:.04em}
.woocommerce-breadcrumb a{color:var(--cx-dim)}

/* ============================================================
   7. FORMULARE / EINGABEN
   ============================================================ */
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="search"],input[type="number"],input[type="url"],
textarea,select,.select2-container--default .select2-selection--single{
  background:var(--cx-bg-soft) !important;
  color:var(--cx-ink) !important;
  border:1px solid var(--cx-line) !important;
  border-radius:var(--cx-radius-sm) !important;
  padding:.65em .95em;
  transition:border-color .25s ease,box-shadow .25s ease;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--cx-neon) !important;
  box-shadow:0 0 0 3px rgba(70,245,100,.15);
  outline:none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--cx-ink)}
.select2-dropdown{background:var(--cx-bg-soft);border:1px solid var(--cx-line);color:var(--cx-ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--cx-neon);color:#06210c}
label{color:var(--cx-dim);font-size:.85rem;letter-spacing:.03em}
::placeholder{color:var(--cx-faint)}

/* ============================================================
   8. WARENKORB / KASSE (nur Farben & Flaechen, kein Layout)
   ============================================================ */
.woocommerce table.shop_table{
  background:var(--cx-card);
  border:1px solid var(--cx-line);
  border-radius:var(--cx-radius);
  overflow:hidden;
}
.woocommerce table.shop_table th{
  background:var(--cx-bg-soft);color:var(--cx-dim);
  font-family:var(--cx-sans);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;
}
.woocommerce table.shop_table td{border-top:1px solid var(--cx-line)}
.woocommerce-cart-form .product-remove a{color:var(--cx-faint)}
.woocommerce-cart-form .product-remove a:hover{color:#ff6b6b;background:transparent}
.cart_totals h2,.woocommerce-billing-fields > h3,#order_review_heading{font-size:1.6rem}
#payment,.woocommerce-checkout #payment{
  background:var(--cx-card) !important;
  border:1px solid var(--cx-line);border-radius:var(--cx-radius);
}
#payment div.payment_box,.woocommerce-checkout #payment div.payment_box{
  background:var(--cx-bg-soft) !important;color:var(--cx-dim);
}
#payment div.payment_box::before{border-bottom-color:var(--cx-bg-soft) !important}
.wc-gzd-legal-checkbox-text,.woocommerce-terms-and-conditions-wrapper{color:var(--cx-dim)}

/* ============================================================
   9. HINWEISE / BADGES
   ============================================================ */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--cx-card) !important;
  color:var(--cx-ink) !important;
  border-top:0 !important;
  border:1px solid var(--cx-line);
  border-left:3px solid var(--cx-neon);
  border-radius:var(--cx-radius-sm);
}
.woocommerce-error{border-left-color:#ff6b6b}
.woocommerce-info{border-left-color:var(--cx-neon-soft)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--cx-neon)}
.woocommerce-error::before{color:#ff6b6b}

/* ============================================================
   10. SIDEBAR / WIDGETS / PAGINATION / SONSTIGES
   ============================================================ */
.widget,.widget-area .widget{
  background:var(--cx-card);
  border:1px solid var(--cx-line);
  border-radius:var(--cx-radius);
  padding:1.3rem;
}
.widget .widget-title,.widget h2{font-size:1.25rem;margin-bottom:.8rem}
.widget a{color:var(--cx-dim)}
.widget a:hover{color:var(--cx-neon)}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 .2em}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--cx-card);color:var(--cx-dim);
  border:1px solid var(--cx-line);border-radius:var(--cx-radius-sm);
  padding:.55em .95em;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--cx-neon);color:#06210c;border-color:var(--cx-neon);
}
.price_slider_wrapper .ui-slider .ui-slider-range{background:var(--cx-neon)}
.price_slider_wrapper .ui-slider .ui-slider-handle{background:var(--cx-ink);border:2px solid var(--cx-neon)}

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer{
  background:#070c07 !important;
  border-top:1px solid var(--cx-line);
  color:var(--cx-dim);
}
.site-footer a{color:var(--cx-dim)}
.site-footer a:hover{color:var(--cx-neon)}
.site-footer .widget{background:transparent;border:0;padding:0}
.site-footer .copyright,.site-info{color:var(--cx-faint);font-size:.8rem}

/* ============================================================
   11b. SHOP-HERO (analog Entwurf 1)
   ============================================================ */
.cx-shop-hero{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:clamp(320px,44vh,480px);
  margin:0 0 2.5rem;
  padding:3rem 1.5rem;
  border-radius:var(--cx-radius);
  border:1px solid var(--cx-line);
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(10,15,10,.82),rgba(10,15,10,.55) 55%,rgba(10,15,10,.92)),
    var(--cx-hero-img) center/cover no-repeat,
    var(--cx-card);
}
.cx-shop-hero__lockup{
  height:clamp(120px,18vw,190px);width:auto;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.65));
  margin-bottom:1.1rem;
}
.cx-shop-hero__claim{
  font-family:var(--cx-serif);
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  font-style:italic;
  color:var(--cx-ink);
  margin:0 0 .4rem;
}
.cx-shop-hero__sub{
  font-family:var(--cx-sans);
  font-size:.92rem;
  letter-spacing:.06em;
  color:var(--cx-dim);
  margin:0;
}

/* Kategorie-Kacheln (Platzhalter-Thumbs) dunkel einfassen */
.woocommerce ul.products li.product-category img{
  border-radius:var(--cx-radius-sm);
  filter:saturate(.85) brightness(.9);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  color:var(--cx-ink) !important;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark{
  background:transparent;color:var(--cx-faint)
}

/* ============================================================
   11c. THEME-DEMO-HEADER ENTSCHAERFEN
   Das Fashion-Demo-Bild (custom-header.jpg) des Parent-Themes
   ersetzt eine E1-Flaeche; auf der Shop-Front (dort steht das
   eigene Hero-Band) verschwindet der Balken komplett.
   ============================================================ */
.header-img{
  background:
    radial-gradient(48rem 20rem at 75% -30%,rgba(70,245,100,.12),transparent 60%),
    linear-gradient(180deg,#0d130d,#0a0f0a) !important;
  border-bottom:1px solid var(--cx-line);
  min-height:200px !important;
  height:auto !important;
}
.header-img h1,.header-img .page-title{font-family:var(--cx-serif) !important;color:var(--cx-ink)}
body.woocommerce-shop .header-img,
body.post-type-archive-product .header-img{display:none}

/* ============================================================
   11d. POPUP-CART-BUTTON (Plugin wcspc) auf E1
   ============================================================ */
#wcspc-count,.wcspc-count{
  background:var(--cx-neon) !important;
  color:#06210c !important;
  box-shadow:0 12px 30px -10px rgba(70,245,100,.55);
  border:0;
}
#wcspc-count svg,#wcspc-count i,#wcspc-count span{color:#06210c !important;fill:#06210c}

/* ============================================================
   12. FEINSCHLIFF
   ============================================================ */
.woocommerce-store-notice,.demo_store{background:var(--cx-neon);color:#06210c}
mark{background:rgba(70,245,100,.25);color:var(--cx-ink)}
hr{border-color:var(--cx-line)}
.elementor-section,.elementor-container{color:inherit}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}