/* ═══════════════════════════════════════════════════════
   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{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}
}