/*
 Theme Name: Storefront Child - HirschnLugg High-End
 Theme URI: https://shop.hirschnlugg.de
 Description: Exact Brand Alignment & Ultra-Modern Dark Mode Matching Main Site
 Author: Lukas Jelinek
 Template: storefront
 Version: 5.0.0
*/

/* --------------------------------------------------------------------------
   1. HIGH-END DESIGN SYSTEM & VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Typography & Layout */
  --hl-font-sans: "Montserrat", "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hl-radius-sm: 0.25rem;
  --hl-radius-md: 0.75rem;
  --hl-radius-lg: 1rem;
  --hl-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Corporate Colors */
  --hl-primary: #345944;
  --hl-accent: #49734c;
  --hl-accent-hover: #619164;
  --hl-gold: #d4af37;

  /* Light Mode Palette */
  --hl-bg-light: #ffffff;
  --hl-surface-light: #f8f9fa;
  --hl-surface-glass-light: rgba(255, 255, 255, 0.9);
  --hl-text-light: #212529;
  --hl-text-muted-light: #6c757d;
  --hl-border-light: #dee2e6;
  --hl-shadow-light: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
  --hl-shadow-hover-light: 0 1rem 2rem rgba(0, 0, 0, 0.12);

  /* Dark Mode Palette */
  --hl-bg-dark: #141c26;
  --hl-surface-dark: #243340;
  --hl-surface-glass-dark: rgba(20, 28, 38, 0.85);
  --hl-surface-dark-focus: #2c3e4d;
  --hl-text-dark: #e8ece9;
  --hl-text-muted-dark: #a0b0a5;
  --hl-border-dark: #a0b0a5;
  --hl-shadow-dark: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --hl-shadow-hover-dark: 0 1rem 2rem rgba(0, 0, 0, 0.7);
}

/* Global Typography & Behavior */
html {
  scroll-behavior: smooth;
  font-family: var(--hl-font-sans);
}

body {
  font-family: var(--hl-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  overflow-y: scroll !important;
}

body::-webkit-scrollbar {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.site-title, .woocommerce-loop-product__title {
  font-family: var(--hl-font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.Hirschnlugg {
  font-family: recherche, cursive, sans-serif !important;
  color: var(--hl-primary) !important;
  font-size: 180%;
  text-decoration: none !important;
}

/* Custom Divider Accent Line */
hr.divider {
  height: 0.2rem;
  max-width: 3.25rem;
  margin: 1.5rem auto;
  background-color: var(--hl-primary);
  opacity: 1;
  border: 0;
}

.woocommerce-info, .woocommerce-noreviews, p.no-comments {
  background-color: var(--hl-primary) !important;;
}

/* --------------------------------------------------------------------------
   2. LIGHT MODE
   -------------------------------------------------------------------------- */
html:not(.dark-mode) body,
html:not(.dark-mode) #page,
html:not(.dark-mode) .site,
html:not(.dark-mode) .site-main,
html:not(.dark-mode) #content,
html:not(.dark-mode) .storefront-breadcrumb {
  background-color: var(--hl-bg-light);
  color: var(--hl-text-light);
}

/* Header Light */
html:not(.dark-mode) .site-header {
  background-color: var(--hl-surface-glass-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hl-border-light);
  position: sticky;
  top: 0;
  z-index: 999;
}

html:not(.dark-mode) .main-navigation ul.menu > li > a,
html:not(.dark-mode) .site-header-cart .cart-contents,
html:not(.dark-mode) h1, 
html:not(.dark-mode) h2, 
html:not(.dark-mode) h3 {
  color: var(--hl-text-light);
}

html:not(.dark-mode) a:hover,
html:not(.dark-mode) .main-navigation ul.menu > li > a:hover {
  color: var(--hl-primary);
}

/* Shop Produktkarten Light Mode */
html:not(.dark-mode) ul.products li.product {
  background-color: var(--hl-surface-light);
  border: 1px solid var(--hl-border-light);
  border-radius: var(--hl-radius-md);
  box-shadow: var(--hl-shadow-light);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  padding-bottom: 1.25rem;
}

html:not(.dark-mode) ul.products li.product:hover {
  transform: scale(1.03);
  box-shadow: var(--hl-shadow-hover-light);
  border-color: var(--hl-accent);
}

ul.products li.product img {
  transition: transform 0.5s ease;
}

ul.products li.product:hover img {
  transform: scale(1.05);
}

html:not(.dark-mode) ul.products li.product .woocommerce-loop-product__title {
  color: var(--hl-text-light);
  font-size: 1.1rem;
  margin-top: 0.75rem;
}

html:not(.dark-mode) ul.products li.product .price {
  color: var(--hl-primary);
  font-weight: 700;
}

/* Formulare Light */
html:not(.dark-mode) input[type="text"],
html:not(.dark-mode) input[type="email"],
html:not(.dark-mode) input[type="password"],
html:not(.dark-mode) textarea,
html:not(.dark-mode) select {
  background-color: #ffffff;
  color: var(--hl-text-light);
  border: 1px solid var(--hl-border-light);
  border-radius: var(--hl-radius-sm);
  padding: 0.5rem 0.75rem;
}

html:not(.dark-mode) input:focus,
html:not(.dark-mode) textarea:focus,
html:not(.dark-mode) select:focus {
  outline: none;
  border-color: var(--hl-accent);
  box-shadow: 0 0 0 0.25rem rgba(73, 115, 76, 0.25);
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  width: 100%;
}

#order_review_heading {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. BRAND DARK MODE
   -------------------------------------------------------------------------- */
html.dark-mode body,
html.dark-mode #page,
html.dark-mode .site,
html.dark-mode .site-main,
html.dark-mode #content,
html.dark-mode .storefront-breadcrumb {
  background-color: var(--hl-bg-dark) !important;
  color: var(--hl-text-dark) !important;
}

/* Navigation Links Dark Mode */
html.dark-mode .secondary-navigation ul.menu a,
html.dark-mode .brand-text,
html.dark-mode .main-navigation ul.menu > li > a,
html.dark-mode .main-navigation ul.sub-menu > li > a,
html.dark-mode .site-header-cart .cart-contents {
  color: #ffffff !important;
}

html.dark-mode .sub-menu {
color: #ffffff !important;
background-color: var(--hl-surface-dark) !important;
  border: 1px solid var(--hl-border-dark) !important;
}

html.dark-mode .main-navigation ul.menu > li > a:hover,
html.dark-mode .secondary-navigation ul.menu a:hover {
  color: var(--hl-accent) !important;
}

/* Dark Header with Glassmorphism */
html.dark-mode .site-header {
  background-color: var(--hl-surface-glass-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hl-border-dark);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 999;
}

html.dark-mode h1, 
html.dark-mode h2, 
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: #ffffff !important;
}

html.dark-mode p {
  color: #d1d8d3;
}
html.dark-mode .fpd-modal-content p {
  color: rgba(0,0,0,.7);
}

html.dark-mode a {
  color: var(--hl-accent);
}

html.dark-mode a:hover {
  color: var(--hl-accent-hover);
}

/* Dark Mode Shop Produktkarten */
html.dark-mode ul.products li.product {
  background-color: var(--hl-surface-dark) !important;
  border: 1px solid var(--hl-border-dark) !important;
  border-radius: var(--hl-radius-md) !important;
  box-shadow: var(--hl-shadow-dark);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  padding-bottom: 1.25rem;
}

html.dark-mode .woocommerce-checkout-payment li {
  background-color: var(--hl-surface-dark) !important;
  border: 1px solid var(--hl-border-dark) !important;
  box-shadow: var(--hl-shadow-dark);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  padding-bottom: 1.25rem;
}

html.dark-mode .payment_box, html.dark-mode fieldset {
  background-color: var(--hl-surface-dark) !important;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  padding-bottom: 1.25rem;
}

html.dark-mode .widget_shopping_cart_content{
  background-color: var(--hl-surface-dark) !important;
  color: var(--hl-text-dark) !important;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

html.dark-mode .widget_shopping_cart ul, html.dark-mode .widget_shopping_cart p {
  background-color: var(--hl-surface-dark) !important;
  color: var(--hl-text-dark) !important; 
  border: 1px solid var(--hl-border-dark) !important;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  padding-bottom: 1.25rem;
}

html.dark-mode .site-header-cart .widget_shopping_cart a, html.dark-mode .site-header-cart .widget_shopping_cart span {
  color: var(--hl-text-dark) !important;
}

html.dark-mode .woocommerce-product-attributes, html.dark-mode .shop_attributes, html.dark-mode th.woocommerce-product-attributes-item__label, html.dark-mode tr.woocommerce-product-attributes-item, html.dark-mode td.woocommerce-product-attributes-item__value {
background-color: var(--hl-surface-dark) !important;
  color: var(--hl-text-dark) !important;
  border: 1px solid var(--hl-border-dark) !important;
}

html.dark-mode .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents thead, html.dark-mode .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents tr, html.dark-mode .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents th, html.dark-mode .shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents tbody, html.dark-mode .woocommerce-cart-form__cart-item.cart_item td {
background-color: var(--hl-surface-dark) !important;
  color: var(--hl-text-dark) !important;
}

html.dark-mode td.actions {
  border-top: 1em solid var(--hl-bg-dark) !important;
  background-color: var(--hl-bg-dark) !important;
}

html.dark-mode .cart_totals th, html.dark-mode .cart_totals tr, html.dark-mode .cart_totals td, html.dark-mode .shop_table.woocommerce-checkout-review-order-table th, html.dark-mode .shop_table.woocommerce-checkout-review-order-table tr, html.dark-mode .shop_table.woocommerce-checkout-review-order-table td {
background-color: var(--hl-surface-dark) !important;
  color: var(--hl-text-dark) !important;
  border: 1px solid var(--hl-border-dark) !important;
}

html.dark-mode ul.products li.product:hover {
  transform: scale(1.03);
  border-color: #ffffff !important;
  box-shadow: var(--hl-shadow-hover-dark);
}

html.dark-mode ul.products li.product .woocommerce-loop-product__title {
  color: #ffffff !important;
}

html.dark-mode ul.products li.product .price,
html.dark-mode ul.products li.product span.amount {
  color: #e8ece9 !important;
}

/* Formulare Dark Mode */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="password"],
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .select2-container--default.select2-selection--single {
  background-color: var(--hl-surface-dark) !important;
  color: var(--hl-text-dark) !important;
  border: 1px solid var(--hl-border-dark) !important;
  border-radius: var(--hl-radius-sm);
  padding: 0.5rem 0.75rem;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus,
html.dark-mode .select2-container--default.select2-selection--single:focus {
  outline: none;
  background-color: var(--hl-surface-dark-focus) !important;
  border-color: var(--hl-accent) !important;
  box-shadow: 0 0 0 0.25rem rgba(73, 115, 76, 0.25) !important;
}

html.dark-mode .woocommerce-checkout-review-order {
  background-color: var(--hl-bg-dark) !important;
}

/* SVG Logo Swap in Dark Mode */
html.dark-mode img[src*="hirschvektorregistered.svg"] {
  content: url("../assets/hirschvektorregistered_white.svg");
}

/* --------------------------------------------------------------------------
   4. BUTTONS & INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
.btn-primary {
  display: inline-block;
  background-color: var(--hl-primary) !important;
  color: #ffffff !important;
  font-family: var(--hl-font-sans);
  font-weight: 500;
  border: 1px solid var(--hl-primary) !important;
  border-radius: var(--hl-radius-sm) !important;
  padding: 0.5rem 1.25rem !important;
  cursor: pointer;
  transition: var(--hl-transition);
  text-decoration: none;
}

#fpd-start-customizing-button {
  display: inline-block;
  background-color: var(--hl-primary) !important;
  color: #ffffff !important;
  font-family: var(--hl-font-sans);
  font-weight: 500;
  border: 1px solid var(--hl-primary) !important;
  border-radius: var(--hl-radius-sm) !important;
  padding: 0.5rem 1.25rem !important;
  cursor: pointer;
  transition: var(--hl-transition);
  text-decoration: none;
  margin-left: .875em;
}

.button:hover,
button:hover,
#fpd-start-customizing-button:hover,
input[type="submit"]:hover,
.btn-primary:hover {
  background-color: var(--hl-accent) !important;
  border-color: var(--hl-accent) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

  .paypal-button-container{
    min-width: 500px;
    max-width: 100% !important;
  }

/* Onsale Badge */
.onsale {
  background-color: var(--hl-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  border-radius: var(--hl-radius-sm) !important;
  padding: 0.25rem 0.6rem !important;
  border: none !important;
}

/* Theme Toggle Button Style */
#themeToggleBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hl-border-light);
  background: var(--hl-surface-glass-light);
  color: var(--hl-text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--hl-transition);
}

html.dark-mode #themeToggleBtn {
  border-color: var(--hl-border-dark);
  background: var(--hl-surface-dark);
  color: #ffffff;
}

#themeToggleBtn:hover {
  transform: rotate(15deg);
  border-color: var(--hl-accent);
  color: var(--hl-accent);
}

/* --------------------------------------------------------------------------
   5. ORIGINAL MAIN SITE FOOTER (LIGHT & DARK MODE TOGGLE FIX)
   -------------------------------------------------------------------------- */

/* Standard Storefront Handheld & Info Bar ausblenden */
.site-footer .site-info,
.site-footer .storefront-handheld-footer-bar {
  display: none !important;
}

/* Base Footer Reset */
footer,
.site-footer,
#colophon {
  width: 100% !important;
  max-width: 100% !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------------
   LIGHT MODE FOOTER
   -------------------------------------------------------------------------- */
html:not(.dark-mode) footer,
html:not(.dark-mode) .site-footer,
html:not(.dark-mode) #colophon {
  background-color: var(--hl-surface-light) !important; /* #f8f9fa */
  color: var(--hl-text-light) !important;
  border-top: 1px solid var(--hl-border-light) !important;
}

html:not(.dark-mode) footer a,
html:not(.dark-mode) .site-footer a {
  color: var(--hl-primary) !important;
  text-decoration: none !important;
}

html:not(.dark-mode) footer a:hover,
html:not(.dark-mode) .site-footer a:hover {
  color: var(--hl-accent) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   DARK MODE FOOTER (STRICT OVERRIDE)
   -------------------------------------------------------------------------- */
html.dark-mode footer,
html.dark-mode .site-footer,
html.dark-mode #colophon,
html.dark-mode footer .bg-light,
html.dark-mode footer .bg-light-footer,
html.dark-mode footer .bg-white,
html.dark-mode .site-footer .bg-light,
html.dark-mode .site-footer .bg-white {
  background-color: var(--hl-bg-dark) !important; /* #141c26 */
  color: #a0b0a5 !important;
  border-top-color: var(--hl-border-dark) !important;
  box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.3);
}

/* Spezifische Textfarben der Hauptseite im Dark Mode erzwingen */
html.dark-mode footer .text-dark,
html.dark-mode footer .text-secondary,
html.dark-mode footer .text-muted,
html.dark-mode .site-footer .text-dark,
html.dark-mode .site-footer .text-secondary,
html.dark-mode .site-footer .text-muted {
  color: #a0b0a5 !important;
}

/* Link-Farben & Unterstrich-Removal im Dark Mode */
html.dark-mode footer a,
html.dark-mode .site-footer a {
  color: var(--hl-accent) !important; /* #49734c */
  text-decoration: none !important;
}

html.dark-mode footer a:hover,
html.dark-mode .site-footer a:hover {
  color: #619164 !important;
  text-decoration: none !important;
}

/* Sterne-Bewertung & Brand-Logo */
.star, 
.rating-star, 
.footer-google-rating .stars,
.hl-google-rating-box .star {
  color: #ffc107 !important;
}

.Hirschnlugg {
  font-family: recherche, cursive, sans-serif !important;
  text-decoration: none !important;
}