/**
* Theme Name: IgniTech (Child)
* Template: liquory
* Version: 1.4.1
*/

/* ===== Preisänderungen page ===== */
.geplante-preisaenderungen-wrapper {
  max-width: 44rem;
  margin: 3rem auto;
  padding: 1rem;
}

.geplante-preisaenderungen-list { list-style: none; margin: 0; padding: 0; }
.geplante-preisaenderungen-list .preis-item { margin-bottom: 2rem; }

.preis-date { font-weight: 700; margin-bottom: 0.3rem; color: #c89b3c; }
.preis-product { font-size: 1.05rem; font-weight: 600; display: block; margin-bottom: 0.1rem; }
.preis-old-price { display: block; margin-bottom: 0.3rem; color: #777; }
.preis-amount { color: #c89b3c; font-weight: 700; }

/* Qty input text color (theme may override) */
.woocommerce .quantity input.qty { color: #fff; }

/* Mobile logo */
@media (max-width: 48rem) {
  .site-logo img {
    max-width: 70%;
    height: auto;
  }
}

/* ===== Rückvergütungs Modal ===== */
.yearly-returns-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none; /* shown via JS */
  background-color: rgba(0,0,0,0.5);
  overflow: auto;
}

.yearly-returns-modal-content {
  background: #fff; color: #222;
  margin: 10% auto; padding: 20px; border-radius: 8px;
  width: 90%; max-width: 600px;
  word-wrap: break-word; overflow-wrap: break-word;
}

.yearly-returns-modal-content .modal-subtitle {
  display: block; font-size: 0.8em; font-weight: 400; margin-top: 4px;
}

/* Close icon (span) */
.close-yearly-returns {
  float: right;
  font-size: 1.75rem; line-height: 1;
  color: #aaa; cursor: pointer;
}
.close-yearly-returns:hover { color: #000; }

/* --- Scope table styles to the modal only --- */
.yearly-returns-modal-content table {
  width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: auto;
}
.yearly-returns-modal-content th,
.yearly-returns-modal-content td {
  border: 1px solid #ccc; padding: 8px; text-align: center; color: #111;
  word-wrap: break-word; overflow-wrap: break-word;
}
.yearly-returns-modal-content th {
  background-color: #f2f2f2; white-space: normal;
}
.yearly-returns-modal-content tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Mobile tweaks */
@media (max-width: 47.9375rem) {
  .yearly-returns-modal-content { margin-top: 20%; width: 90%; }
  .yearly-returns-modal-content th,
  .yearly-returns-modal-content td { font-size: 0.875rem; }
  .yearly-returns-modal-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Align add-to-cart rows on product cards (Liquory) — FIXED --- */

/* Card behaves as a flexible column, height grows with content */
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;          /* was 100% → causes overlap */
  box-sizing: border-box;
}

/* Inner caption also grows naturally */
.woocommerce ul.products li.product .product-caption {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;          /* was 100% → causes overlap */
}

/* Footer (qty + button) pushed to bottom only if space allows */
.woocommerce ul.products li.product .product-caption-bottom {
  display: flex !important;
  flex-wrap: wrap !important;   /* ← KEY FIX */
  gap: 0.5rem;
  align-items: center;
}


/* Titles can be up to two lines without shrinking */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1.35;
  min-height: calc(2 * 1em * 1.35);
  max-height: calc(2 * 1em * 1.35);
  margin: 0 0 .5rem;
}

/* Ensure images aren't tiny on some breakpoints */
.woocommerce ul.products li.product .product-transition,
.woocommerce ul.products li.product .product-thumb,
.woocommerce ul.products li.product .product-thumbnail {
  min-height: 14rem !important; /* raise to 16–18rem if you want taller */
  height: auto !important;
}
.woocommerce ul.products li.product .product-transition img,
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* === Force quantity number to be white on dark backgrounds === */

/* Single product page */
.woocommerce div.product form.cart .quantity .qty {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Safari/WebKit */
  caret-color: #fff !important;
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
  border-radius: 4px;
}





/* ============================
   Dropdown-Menü & Hauptnavigation
   ============================ */

/* Hauptmenü nebeneinander anzeigen */
.main-navigation ul.menu {
  display: flex;
  flex-wrap: nowrap;          /* Keine Umbrüche */
  justify-content: flex-start; /* Links ausgerichtet; alternativ: center, space-between */
  align-items: center;
}

.main-navigation ul.menu > li {
  display: inline-block;
  white-space: nowrap;        /* Verhindert Zeilenumbruch bei langen Titeln */
}

.main-navigation ul.menu > li > a {
  padding: 2em 1.5em; /* Abstände anpassen nach Geschmack */
}

/* ============================
   Dropdown-Menüs
   ============================ */

/* Submenüs standardmäßig verstecken */
.main-navigation ul.menu ul.sub-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  z-index: 999;
}

/* Submenü beim Hovern anzeigen */
.main-navigation ul.menu li:hover > ul.sub-menu {
  display: block !important;
}

/* Submenü-Links */
.main-navigation ul.menu ul.sub-menu li a {
  padding: 10px 15px;
  display: block;
  color: var(--e-global-color-secondary);
  text-transform: none;
  font-weight: normal;
  background: #fff;
  transition: background 0.3s ease;
}

/* Hover-Effekt für Submenü-Links */
.main-navigation ul.menu ul.sub-menu li a:hover {
  background: var(--e-global-color-primary);
  color: #fff;
}



/* ===== Yearly Returns Modal Styling ===== */
.yearly-returns-modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 10000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  overflow: auto; /* allow scroll on small screens */
}

.yearly-returns-modal-content {
  background: #fff;
  margin: 5% auto;
  padding: 1.5rem;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  font-size: 1rem; /* desktop base */
}

.yearly-returns-modal h3 {
  font-size: 1.25rem;
  margin-top: 0;
}

.yearly-returns-modal .close-yearly-returns {
  float: right;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

/* Table base style */
.yearly-returns-modal table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.95rem;
}

.yearly-returns-modal th,
.yearly-returns-modal td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

.yearly-returns-modal th {
  font-weight: 600;
  background: #f5f5f5;
}

/* ===== Mobile Improvements ===== */
@media (max-width: 767px) {
  .yearly-returns-modal-content {
    width: 95%;
    font-size: 0.85rem; /* smaller text on mobile */
    padding: 1rem;
  }
  .yearly-returns-modal h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  /* Make table horizontally scrollable if too wide */
  .yearly-returns-modal table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.8rem;
  }

  /* Optional: style scroll bar subtly */
  .yearly-returns-modal table::-webkit-scrollbar {
    height: 6px;
  }
  .yearly-returns-modal table::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }

  /* Stack table header vertically for readability */
  .yearly-returns-modal th,
  .yearly-returns-modal td {
    padding: 0.4rem;
  }
}

/* === Yearly Returns modal — desktop fixes === */
@media (min-width: 768px) {
  /* Keep the modal a bit wider on desktop but within viewport */
  .yearly-returns-modal-content {
    width: min(900px, 92vw);
    max-width: 900px;
    box-sizing: border-box;
    padding: 1.75rem 2rem;
  }

  /* Let long headings wrap instead of forcing overflow */
  .yearly-returns-modal table {
    table-layout: fixed;   /* columns share space evenly */
    width: 100%;
    overflow: hidden;      /* keep the table inside the modal box */
  }
  .yearly-returns-modal th,
  .yearly-returns-modal td {
    white-space: normal;   /* allow wrapping on desktop */
    word-break: break-word;
  }

  /* A touch more spacing + visual polish */
  .yearly-returns-modal th { padding: 0.6rem 0.8rem; }
  .yearly-returns-modal td { padding: 0.55rem 0.8rem; }

  /* Position the close icon so it never crowds the title */
  .yearly-returns-modal-content { position: relative; }
  .yearly-returns-modal .close-yearly-returns {
    position: absolute;
    right: 12px;
    top: 10px;
    float: none;
    line-height: 1;
  }
}


/* --- IgniTech: Custom stock label colors --- */
.inventory_status.backorder {
  color: #B37F33 !important;
  border: 1px dashed #B37F33;
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inventory_status.backorder:before {
  background-color: #B37F33;
}


/* Orange style for backorder notice in shop / archive grid */
/*.woocommerce ul.products li.product .stock.on-backorder {
  color: #B37F33;
  font-weight: 600;
  margin-top: .25rem;
}*/

/* Shop / category / related products:
   Hide the theme's green "in stock" badge ONLY for products on backorder */
/*.woocommerce ul.products li.product.onbackorder .stock.in-stock,
.woocommerce ul.products li.product.onbackorder .availability.in-stock,
.woocommerce ul.products li.product.onbackorder [class*="in-stock"] {
  display: none !important;
}*/


/* Liquory loop: hide the green "Verfügbar" badge for backorder items */
/*.woocommerce ul.products li.product.onbackorder .inventory_status,
.woocommerce ul.products li.product[class*="onbackorder"] .inventory_status,
.woocommerce li.product.onbackorder .inventory_status {
  display: none !important;
}*/

/* Make the replaced line match your orange color scheme */
/*ul.products li.product .inventory_status {
  color: #B37F33;
  font-weight: 600;
}*/