/* ============================================================
   PEPWERK — MOBILE CSS v3.0 CLEAN
   Max-width: 768px · einheitliche Typografie · einheitliche Inter-Typografie
   ============================================================ */

@media (max-width: 768px) {

  body,
  p,
  li,
  a,
  span,
  div,
  input,
  textarea,
  select,
  button,
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--pw-font) !important;
  }

  html, body { overflow-x: hidden !important; }

  /* ── HERO IMAGE ────────────────────────────────────────── */
  .pw-hero-image-col {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }
  .pw-hero-image-blend {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }
  .pw-hero-image-blend .img,
  .pw-hero-image-blend .img-inner,
  .pw-hero-image-blend picture,
  .pw-hero-image-blend img {
    width: 100% !important;
    height: 390px !important;
    max-height: 390px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pw-hero-image-blend img {
    object-fit: cover !important;
    object-position: center center !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ── HERO TEXT ─────────────────────────────────────────── */
  .pw-hero-content {
    padding: 48px 22px 42px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .pw-eyebrow {
    font-family: var(--pw-font) !important;
    font-weight: 600 !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 18px !important;
  }
  .pw-hero-h1 {
    font-family: var(--pw-font) !important;
    font-weight: 800 !important;
    font-size: 2.28rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    margin: 0 0 20px 0 !important;
  }
  .pw-hero-sub {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 0 26px 0 !important;
  }
  .pw-hero-content .button,
  .pw-hero-content a.button {
    width: 100% !important;
    display: block !important;
    margin: 0 0 12px 0 !important;
    padding: 15px 18px !important;
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
  }

  /* ── STATS ─────────────────────────────────────────────── */
  .pw-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 24px !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
  }
  .pw-stat {
    padding: 18px 4px !important;
    text-align: center !important;
    overflow: hidden !important;
    background: #f4f7f8 !important;
  }
  .pw-stat-val {
    font-family: var(--pw-font) !important;
    font-weight: 800 !important;
    font-size: 1.32rem !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }
  .pw-stat-label {
    font-family: var(--pw-font) !important;
    font-weight: 600 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.12em !important;
    margin-top: 8px !important;
  }

  /* ── TRUST BAR ─────────────────────────────────────────── */
  .pw-trust-bar,
  section[label="trust-bar"] { padding: 26px 0 !important; }
  .pw-trust-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    padding: 0 22px !important;
    margin: 0 auto !important;
    width: 100% !important;
    align-items: start !important;
  }
  .pw-trust-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-family: var(--pw-font) !important;
    font-weight: 600 !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.14em !important;
    white-space: normal !important;
    margin: 0 !important;
  }
  .pw-trust-item::before {
    flex: 0 0 auto !important;
    font-size: 7px !important;
    line-height: 1.3 !important;
    position: relative !important;
    top: 1px !important;
  }

  /* ── HEADLINES ─────────────────────────────────────────── */
  h2 {
    font-family: var(--pw-font) !important;
    font-weight: 800 !important;
    font-size: 1.95rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
  }

  /* ── TRUST ICON CARDS ──────────────────────────────────── */
  .pw-trust-icons-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 18px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }
  .pw-trust-icons-row > .col,
  .pw-trust-icons-row > .pw-trust-icon-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
  }
  .pw-trust-icons-row > .col > .col-inner,
  .pw-trust-icons-row > .pw-trust-icon-col > .col-inner,
  .pw-icon-card {
    width: 100% !important;
    min-height: 340px !important;
    height: 340px !important;
    padding: 26px 14px 22px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8ec !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .pw-trust-icons-row .img,
  .pw-icon-img {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 auto 20px !important;
    flex: 0 0 72px !important;
  }
  .pw-trust-icons-row .img img,
  .pw-icon-img img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: contain !important;
  }
  .pw-trust-icons-row .gap { display: none !important; }
  .pw-icon-title {
    font-family: var(--pw-font) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    line-height: 1.28 !important;
    letter-spacing: -0.025em !important;
    color: #0B2F4A !important;
    margin: 0 0 12px 0 !important;
  }
  .pw-icon-text {
    font-family: var(--pw-font) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  /* ── ABOUT / PURITY ────────────────────────────────────── */
  .pw-about-wrap,
  .pw-purity-wrap {
    gap: 36px !important;
    padding: 0 24px !important;
  }
  section[label="purity"] { padding: 72px 28px !important; }
  .pw-coa { margin-top: 40px !important; }

  /* ── NEWSLETTER ────────────────────────────────────────── */
  .pw-newsletter-form {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 24px !important;
  }
  .pw-newsletter-input,
  .pw-newsletter-btn { width: 100% !important; }

  /* ── WOOCOMMERCE ───────────────────────────────────────── */
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* ── PRODUCT DESCRIPTIONS ──────────────────────────────── */
  .pw-prod {
    max-width: 100% !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }
  .pw-prod h1 {
    font-size: 21px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    hyphens: auto !important;
  }
  .pw-prod .pw-subtitle {
    display: block !important;
    text-align: center !important;
    font-size: 9px !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 22px !important;
  }
  .pw-prod .pw-subtitle::before,
  .pw-prod .pw-subtitle::after { display: none !important; }
  .pw-prod h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 24px 0 12px 0 !important;
    hyphens: auto !important;
  }
  .pw-prod .pw-box {
    padding: 20px 18px !important;
    margin-bottom: 20px !important;
  }
  .pw-prod p { font-size: 13px !important; line-height: 1.7 !important; }
  .pw-prod ul li { font-size: 13px !important; padding-left: 18px !important; }
  .pw-prod table,
  .pw-prod table tbody,
  .pw-prod table tr,
  .pw-prod table td { display: block !important; width: 100% !important; }
  .pw-prod table td { padding: 9px 12px !important; }
  .pw-prod table td:first-child {
    width: 100% !important;
    font-size: 9px !important;
    padding-bottom: 2px !important;
  }
  .pw-prod table td:last-child { padding-top: 2px !important; }
  .pw-short .pw-short-label { font-size: 9px !important; letter-spacing: 0.07em !important; }
  .pw-short p { font-size: 13px !important; line-height: 1.65 !important; }

  /* ── QUALITY POINTS ────────────────────────────────────── */
  .pw-quality-points {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 32px !important;
    padding: 0 6px !important;
  }
  .pw-quality-points > div {
    min-height: auto !important;
    padding: 24px 22px 22px !important;
    border-radius: 10px !important;
  }
  .pw-quality-points span { margin-bottom: 18px !important; }
  .pw-quality-points strong { font-size: 15px !important; line-height: 1.35 !important; }
  .pw-quality-points p { font-size: 13px !important; line-height: 1.65 !important; }

  /* ── LEGAL PAGES ───────────────────────────────────────── */
  .pw-page-title {
    font-size: 2.05rem !important;
    line-height: 1.08 !important;
    margin-bottom: 28px !important;
  }
  .pw-legal-content { font-size: 14px !important; line-height: 1.75 !important; }
  .pw-legal-content h2 { font-size: 1.18rem !important; margin-top: 34px !important; }
  .pw-legal-content h3 { font-size: 1rem !important; }
  .pw-legal-content ul { padding-left: 18px !important; }

  /* ── COA LIBRARY ───────────────────────────────────────── */
  .pw-coa-empty {
    padding: 26px 22px !important;
    border-radius: 10px !important;
  }
  .pw-coa-empty h3 { font-size: 1.08rem !important; line-height: 1.25 !important; }
  .pw-coa-empty p { font-size: 13px !important; line-height: 1.65 !important; }

  /* ── FOOTER ────────────────────────────────────────────── */
  .pw-footer-brand { font-size: 1.15rem !important; }
  .pw-footer-title { margin-top: 28px !important; }
  .pw-footer-text,
  .pw-footer-note { max-width: 100% !important; font-size: 13px !important; }
  .pw-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 36px !important;
  }

}

/* ── SEHR KLEINE GERÄTE (< 390px) ───────────────────────────── */
@media (max-width: 390px) {
  .pw-trust-icons-row > .col > .col-inner,
  .pw-trust-icons-row > .pw-trust-icon-col > .col-inner,
  .pw-icon-card {
    height: 360px !important;
    min-height: 360px !important;
  }
  .pw-trust-icons-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── TABLET (769px – 1023px) ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {

  .pw-about-wrap,
  .pw-purity-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
    padding: 0 32px !important;
  }
  .pw-icons-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .pw-testi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  h2 { font-size: 1.9rem !important; }

}

/* ── FOOTER LINKS MOBILE FIX ─────────────────────────────────── */
@media (max-width: 768px) {

  #footer .col,
  .footer-widget,
  .footer-center {
    text-align: left !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #footer .widget_nav_menu ul,
  #footer .widget_pages ul,
  #footer .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
  }

  #footer .widget_nav_menu ul li,
  #footer .widget_pages ul li,
  #footer .widget ul li {
    margin-bottom: 8px !important;
    display: block !important;
  }

  #footer .widget_nav_menu ul li a,
  #footer .widget_pages ul li a,
  #footer .widget ul li a {
    font-family: var(--pw-font) !important;
    font-size: 13px !important;
    color: var(--pw-muted) !important;
    text-decoration: none !important;
    display: block !important;
  }

  /* Impressum / Hinweis direkt unter Shop */
  .footer-bottom,
  .footer-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 16px 22px !important;
    text-align: left !important;
  }

}

/* ── WISHLIST HERZ FARBE ─────────────────────────────────────── */
/* Herz auf Produktkarten — Navy statt Türkis */
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button,
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:before,
ul.products li.product .button.yith-wcwl-add-button,
ul.products li.product .yith-wcwl-add-to-wishlist a,
.add_to_wishlist,
.yith-wcwl-add-button a,
.tinv-wishlist a,
.product-loop-wishlist a {
  color: rgba(11,47,74,0.35) !important;
  background: transparent !important;
  border: none !important;
}
.tinvwl-loop-button-wrapper .tinvwl_add_to_wishlist_button:hover,
.yith-wcwl-add-button a:hover,
.tinv-wishlist a:hover,
.add_to_wishlist:hover {
  color: var(--pw-navy) !important;
}
/* Aktiv / bereits in Wunschliste */
.tinvwl-loop-button-wrapper .tinvwl_remove_from_wishlist_button,
.yith-wcwl-add-button.exists a {
  color: var(--pw-navy) !important;
}

/* =========================================
   PEPWERK WOO MOBILE + CHECKOUT DISCLAIMER
========================================= */

@media (max-width: 768px) {
  .cart_totals,
  .woocommerce-checkout-review-order,
  .woocommerce-billing-fields,
  .woocommerce-shipping-fields,
  .woocommerce-additional-fields,
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-account .woocommerce-MyAccount-navigation {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    font-size: 13px !important;
    padding: 12px 10px !important;
  }

  .cart_totals h2,
  .woocommerce-billing-fields h3,
  .woocommerce-additional-fields h3,
  #order_review_heading {
    font-size: 1.1rem !important;
  }

  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .select2-container--default .select2-selection--single {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  .pw-checkout-disclaimer {
    padding: 22px 20px !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
  }

  .pw-checkout-disclaimer__label {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }

  .pw-checkout-disclaimer h3 {
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
  }

  .pw-checkout-disclaimer p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .woocommerce-checkout .form-row .woocommerce-form__label-for-checkbox,
  .woocommerce-checkout .form-row label.checkbox {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
}

/* =========================================
   PEPWERK FOOTER MOBILE ALIGNMENT FIX
========================================= */

@media (max-width: 768px) {

  section[label="footer"] {
    padding-top: 54px !important;
    padding-bottom: 28px !important;
  }

  section[label="footer"] .row {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  section[label="footer"] .col {
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-bottom: 30px !important;
  }

  section[label="footer"] .col-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .pw-footer-brand,
  .pw-footer-title,
  .pw-footer-text,
  .pw-footer-note,
  .pw-footer-links,
  .pw-footer-bottom {
    text-align: left !important;
  }

  .pw-footer-brand {
    font-size: 1.2rem !important;
    margin-bottom: 16px !important;
  }

  .pw-footer-title {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .pw-footer-text,
  .pw-footer-note {
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  .pw-footer-links {
    margin-bottom: 0 !important;
  }

  .pw-footer-links li {
    margin-bottom: 10px !important;
  }

  .pw-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: 10px !important;
    padding: 22px 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* =========================================
   PEPWERK FOOTER MOBILE FINAL FIX
========================================= */

@media (max-width: 768px) {

  .pw-footer-section {
    padding-top: 54px !important;
    padding-bottom: 28px !important;
  }

  .pw-footer-section .pw-footer-main-row,
  .pw-footer-section .pw-footer-bottom-row {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .pw-footer-section .pw-footer-main-row > .col {
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-bottom: 30px !important;
  }

  .pw-footer-brand,
  .pw-footer-title,
  .pw-footer-text,
  .pw-footer-note,
  .pw-footer-links,
  .pw-footer-bottom {
    text-align: left !important;
  }

  .pw-footer-title {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  .pw-footer-text,
  .pw-footer-note {
    max-width: 100% !important;
  }

  .pw-footer-bottom {
    margin-top: 10px !important;
    padding: 22px 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}