/* ═══════════════════════════════════════════════════════
   Krauthaus Vechta – WooCommerce-Anpassungen
   (baut auf css/style.css auf)
   ═══════════════════════════════════════════════════════ */

/* ---------- Shop-Header-Bereich ---------- */
.pagehead{background:linear-gradient(120deg,var(--green-50),#f4faf0);padding:54px 0 46px;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:8px}
.pagehead p{color:#6b7561;font-size:.95rem}
.kh-shop-wrap .woocommerce{max-width:none}

/* ---------- Produkt-Archiv: Krauthaus-Karten-Look ---------- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0!important;padding:0!important}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product{position:relative;width:100%!important;float:none!important;margin:0!important;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--green-200)}
.woocommerce ul.products li.product a img{aspect-ratio:1/1;object-fit:cover;margin:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1rem;font-weight:600;color:var(--green-950);padding:0 18px;margin:8px 0 4px;line-height:1.35}
.woocommerce ul.products li.product .price{color:var(--green-700);font-weight:700;padding:0 18px;margin:0 0 12px;font-size:1.05rem}
.woocommerce ul.products li.product .price del{color:#a2ab98;opacity:1}
.woocommerce ul.products li.product .button{display:inline-block;margin:auto 18px 18px;padding:10px 20px;border-radius:99px;background:var(--green-600);color:#fff;font-weight:600;font-size:.9rem;text-align:center;transition:background .2s,transform .2s}
.woocommerce ul.products li.product .button:hover{background:var(--green-500);transform:translateY(-1px);color:#fff}
.woocommerce ul.products li.product .added_to_cart{display:inline-block;margin:0 18px 18px;color:var(--green-700);font-weight:600;font-size:.85rem}

/* ---------- Buttons global ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce .cart .button,.woocommerce .checkout-button{
  background:var(--green-600)!important;color:#fff!important;border-radius:99px!important;
  font-weight:600!important;padding:13px 26px!important;transition:background .2s,transform .2s!important}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--green-500)!important;color:#fff!important;transform:translateY(-1px)}

/* ---------- Einzelprodukt ---------- */
.woocommerce div.product div.images img{border-radius:var(--r-md)}
.woocommerce div.product .product_title{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--green-950)}
.woocommerce div.product p.price{color:var(--green-700);font-size:1.5rem;font-weight:700}
.woocommerce div.product p.price del{color:#a2ab98}
.woocommerce div.product form.cart .qty{width:70px}
.woocommerce div.product form.cart .button{background:var(--green-600);color:#fff;border-radius:99px;padding:13px 28px;font-weight:600}
.woocommerce div.product form.cart .button:hover{background:var(--green-500)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--green-700)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--green-950)}

/* ---------- Warenkorb / Kasse ---------- */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-md);border-collapse:separate;overflow:hidden}
.woocommerce table.shop_table th{background:var(--green-50);color:var(--green-900)}
.woocommerce .cart_totals h2,.woocommerce .woocommerce-NoticeGroup + form > h2,.woocommerce-checkout h3{color:var(--green-950)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-family:inherit;background:var(--paper)}
.woocommerce form .form-row input.input-text:focus{border-color:var(--green-500);outline:none}

/* ---------- Meldungen ---------- */
.woocommerce-message,.woocommerce-info{border-top-color:var(--green-600);background:var(--green-50);color:var(--green-900);border-radius:0 var(--r-sm) var(--r-sm) 0}
.woocommerce-message::before,.woocommerce-info::before{color:var(--green-600)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.woocommerce ul.products{grid-template-columns:1fr}}

/* ═══════════════ Feinschliff Mobil & Optik ═══════════════ */

/* ---------- Seitentitel-Bereich mobil ---------- */
@media (max-width:560px){
  .pagehead{padding:40px 0 34px}
  .kh-shop-wrap{padding:34px 16px 70px!important}
  .kh-shop-wrap .container{padding:0}
}

/* ---------- Formulare / Buttons mobil ---------- */
@media (max-width:560px){
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{width:100%;text-align:center}
  .woocommerce div.product form.cart .button{width:100%}
  .woocommerce div.product form.cart{display:flex;flex-direction:column;gap:10px}
  .woocommerce div.product form.cart div.quantity{margin:0}
}

/* ---------- Warenkorb mobil ---------- */
@media (max-width:640px){
  .woocommerce table.shop_table_responsive tr td{display:block;text-align:right;padding:9px 12px!important}
  .woocommerce table.shop_table_responsive tr td::before{content:attr(data-title) ": ";float:left;font-weight:600;color:var(--green-800)}
  .woocommerce table.shop_table_responsive tr td.product-remove{text-align:left}
  .woocommerce table.shop_table_responsive tr td.product-remove::before{display:none}
  .woocommerce .cart_totals{float:none!important;width:100%!important}
}

/* ---------- Kasse mobil ---------- */
@media (max-width:640px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%!important}
}

/* ---------- Newsletter & Kontakt mobil ---------- */
@media (max-width:640px){
  .news__form{flex-direction:column;border-radius:24px}
  .news__form .btn{justify-content:center;width:100%}
  .contact__grid{grid-template-columns:1fr}
}

/* ---------- Footer mobil ---------- */
@media (max-width:640px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer__bottom{flex-direction:column;gap:8px}
}
@media (max-width:420px){
  .footer__grid{grid-template-columns:1fr}
}

/* ---------- Kleine Browser-Abstände ---------- */
.woocommerce .woocommerce-ordering{margin-bottom:18px}
.woocommerce .woocommerce-result-count{margin-bottom:18px}
.woocommerce nav.woocommerce-pagination{margin-top:36px}
.woocommerce nav.woocommerce-pagination ul{border:none}
.woocommerce nav.woocommerce-pagination ul li{border:none;margin:0 4px}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line);border-radius:50%;min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--green-700);background:var(--white);padding:0!important}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--green-600);border-color:var(--green-600);color:#fff}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--green-100);color:var(--green-900)}

/* ---------- Rechtstexte hübsch ---------- */
.kh-legal{max-width:760px}
.kh-legal h2{margin:34px 0 14px;font-size:1.45rem}
.kh-legal h3{margin:26px 0 10px;font-size:1.1rem;color:var(--green-900)}
.kh-legal p,.kh-legal li{color:var(--ink-soft);font-size:.96rem}
.kh-legal ul{margin:0 0 18px 22px;list-style:disc}
.kh-legal a{color:var(--green-700);text-decoration:underline}
.kh-legal em{color:#8a9380;font-size:.85rem}

/* ═══════════════ Mobile-Fixes (Overflow) ═══════════════ */
html,body{overflow-x:clip}
/* Grid-Kinder dürfen schrumpfen (verhindert min-content-Blowout) */
.hero__grid>*,.feature__grid>*,.legal__grid>*,.legal__cards>*,.contact__grid>*,.cats>*,.products>*{min-width:0}
.hero__copy,.hero__media{min-width:0}
/* Off-Canvas-Nav darf keinen horizontalen Scroll erzeugen */
.nav{overflow-x:hidden}
body{max-width:100%}
img,video,iframe{max-width:100%}

/* ═══════════════ Mobile-Nav-Fix (Drawer voller Höhe) ═══════════════ */
@media (max-width:1020px){
  /* backdrop-filter am Header erzeugt einen containing block für position:fixed
     → Drawer wird auf Header-Höhe gestaucht. Im Mobile-Menü entfernen. */
  .header{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{
    position:fixed !important;
    top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
    height:100vh !important;
    height:100dvh !important;
    width:min(340px,84vw) !important;
    max-width:100vw;
    overflow-y:auto;
    z-index:999 !important;
  }
  .nav.open{transform:none !important;visibility:visible}
  .burger{z-index:1000 !important}
}

/* Preis-Hinweis: inkl. MwSt. */
.kh-price-tax-hint{display:block;font-size:.72rem;font-weight:400;color:#8a9382;margin-top:2px}
.woocommerce ul.products li.product .price .kh-price-tax-hint{color:#8a9382}
.summary .price .kh-price-tax-hint,.entry-summary .price .kh-price-tax-hint{font-size:.8rem;color:#8a9382}


/* ---------- Ähnliche Produkte / Upsells (Fix 10.09.2026) ---------- */
/* Der Wrapper ist eine <section>, kein Produkt-Grid - darf kein Grid sein. */
section.related.products,
section.upsells.products{
  display:block !important;
  grid-template-columns:none !important;
  margin:56px 0 0;
  padding-top:40px;
  border-top:1px solid var(--line);
}
section.related.products > h2,
section.upsells.products > h2{
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--green-950);
  margin:0 0 22px;
}
section.related.products > ul.products,
section.upsells.products > ul.products{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important;
  margin:0 !important;
  padding:0 !important;
}
@media (max-width:1000px){
  section.related.products > ul.products,
  section.upsells.products > ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:560px){
  section.related.products > ul.products,
  section.upsells.products > ul.products{grid-template-columns:1fr !important}
  section.related.products,section.upsells.products{margin-top:38px;padding-top:28px}
}


/* ---------- Buttons im Produkt-Grid (Fix 10.09.2026): Text darf nicht umbrechen ---------- */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  display:block !important;
  width:calc(100% - 24px) !important;
  margin:auto 12px 14px !important;
  padding:11px 10px !important;
  font-size:.85rem !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
@media (max-width:560px){
  .woocommerce ul.products li.product .button{
    font-size:.78rem !important;
    padding:10px 8px !important;
  }
}

/* ---------- SALE-Badge (Kategorie „Angebot") ---------- */
.kh-badge{display:inline-block;background:#d64541;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px;line-height:1;box-shadow:0 8px 18px -10px rgba(214,69,65,.95)}
.woocommerce ul.products li.product .kh-badge{position:absolute;top:12px;left:12px;z-index:3}
.kh-badge--inline{position:static!important;margin:0 0 12px}

/* ---------- Breadcrumb / Pfadleiste (15.10.2026) ---------- */
.kh-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.92rem;line-height:1.4;color:var(--muted,#6b7280);margin:0 0 14px}
.kh-breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.kh-breadcrumb a:hover{color:var(--accent,#2f5d3a);border-bottom-color:currentColor}
.kh-bc__sep{opacity:.45;font-weight:400}
.pagehead .kh-breadcrumb{margin:0 0 10px}
@media (max-width:640px){.kh-breadcrumb{font-size:.84rem;gap:4px}}