/* ══════════════════════════════════════════════════════════
   LashesView B2B - Mobile Optimierung
   Datei: /css/mobile-optimierung.css
   Einbinden: <link rel="stylesheet" href="/templates/.../css/mobile-optimierung.css">
   NACH style.css laden!
   ══════════════════════════════════════════════════════════ */

/* ── ALLGEMEIN: Touch-Friendly Mindestgrößen ─────────────── */
@media screen and (max-width: 768px) {

  /* Basis-Optimierungen */
  body {
    -webkit-text-size-adjust: 100%;
    font-size: 15px;
  }

  /* Container volle Breite */
  .container {
    width: 100% !important;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Alle Columns auf volle Breite */
  .columns.three,
  .columns.four,
  .columns.five,
  .columns.six,
  .columns.seven,
  .columns.eight,
  .columns.nine,
  .columns.ten,
  .columns.eleven {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }

  /* Columns die nebeneinander bleiben sollen */
  .columns.one {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .columns.two {
    width: 48% !important;
    margin-left: 2% !important;
  }
}


/* ── HEADER ──────────────────────────────────────────────── */
@media screen and (max-width: 768px) {

  /* Logo kleiner + zentriert */
  .tri_header .tri_header_inner .header .header_logo .logo img {
    max-height: 50px;
  }
  .header .header_logo {
    text-align: center;
    padding: 8px 0;
  }

  /* Warenkorb-Leiste */
  .tri_warenkorb {
    display: flex !important;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    margin: 0;
  }
  .tri_warenkorb li {
    padding: 0 !important;
    float: none !important;
  }
  .tri_warenkorb .text {
    display: none;
  }
  .tri_warenkorb .wk_preis {
    display: none;
  }
  .tri_warenkorb .anzahl_artikel {
    font-size: 11px;
  }

  /* Sticky Header dünner */
  .sticky .tri_header .tri_header_inner {
    padding: 4px 0;
  }

  /* Suchfeld Mobile */
  .tri_searcher {
    padding: 0 12px;
  }
  .tri_searcher input[type="text"] {
    width: 100% !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    padding: 10px 12px;
  }
}


/* ── TOPBAR USP ──────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .tri_topbar {
    display: none; /* Verstecke USP-Leiste auf Mobile */
  }
}


/* ── NAVIGATION / BURGERMENU ─────────────────────────────── */
@media screen and (max-width: 768px) {
  .burgermenu {
    display: block;
  }

  /* Menü-Items größer für Touch */
  #tri_navigation > li > a {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 44px; /* Apple Touch Target */
    display: flex;
    align-items: center;
  }

  /* Menü-Schließen Button */
  .burgerschliessen {
    padding: 16px 20px;
    font-size: 15px;
    min-height: 44px;
  }
}


/* ── BREADCRUMB ──────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .tri_breadcrumb {
    font-size: 12px;
    padding: 8px 12px;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* ── PRODUKT-ÜBERSICHT (Artikelliste) ────────────────────── */
@media screen and (max-width: 600px) {
  /* 1 Produkt pro Zeile */
  .tri_container.columns.nine .artikel_box.columns {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .artikel_box {
    margin-bottom: 16px;
    border-radius: 8px;
  }

  .artikel_box .imagelist {
    height: 200px;
  }

  .artikel_box h2 {
    font-size: 14px;
    margin-top: 12px;
    padding: 0 10px;
  }

  .artikel_box .artikel_pricing {
    padding: 0 10px;
  }

  .artikel_box .button {
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
    padding: 12px;
    min-height: 44px;
    font-size: 14px;
  }

  .artikel_box .lieferstatus {
    font-size: 11px;
    padding: 0 10px;
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  /* 2 Produkte pro Zeile auf Tablet */
  .tri_container.columns.nine .artikel_box.columns {
    width: 48% !important;
    margin-right: 2% !important;
  }
}


/* ── PRODUKT-DETAILSEITE ─────────────────────────────────── */
@media screen and (max-width: 768px) {

  .produkt-detail {
    margin-top: 0;
  }

  /* Bild + Info untereinander */
  .produkt-detail .columns.seven,
  .produkt-detail .columns.five {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }

  /* Produktbild */
  .produkt-detail .imagedetail {
    max-height: 300px;
    overflow: hidden;
  }
  .produkt-detail .gallery-top img {
    max-height: 280px;
    object-fit: contain;
    width: 100%;
  }

  /* Thumbnails */
  .produkt-detail .gallery-thumbs {
    display: none; /* Platzsparend auf Mobile */
  }

  /* Produkttitel */
  .produkt-detail .produkt_title h1 {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 12px;
  }

  /* Preis */
  .produkt-detail .produkt_pricing {
    font-size: 18px;
    margin: 12px 0;
  }

  /* In-den-Warenkorb */
  .produkt-detail .buybox {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* CRITICAL FIX: Template setzt "position:absolute" auf .menge-buybox
     Das verursacht die Überlappung auf Mobile! */
  .menge-buybox {
    position: relative !important;
    margin-left: 0 !important;
    display: block;
    font-size: 15px;
    line-height: normal !important;
    margin-bottom: 4px;
  }

  .produkt-detail .buybox .menge-buybox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .produkt-detail .buybox .menge-buybox-input {
    flex-shrink: 0;
  }

  /* Input für Menge */
  input[name="warenkorb_artikel_anzahl"] {
    width: 80px !important;
    height: 48px !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
    padding-right: 30px !important;
    text-align: center !important;
    border: 2px solid #aaa !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    -moz-appearance: textfield;
  }
  /* Spinner-Pfeile: nicht absolut positionieren */
  input[name="warenkorb_artikel_anzahl"]::-webkit-inner-spin-button,
  input[name="warenkorb_artikel_anzahl"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    width: 24px !important;
    height: 100% !important;
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    opacity: 1;
  }

  .produkt-detail .buybox .product_in_cart {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
    padding: 14px;
    border-radius: 6px;
  }

  /* Diversifikation (Bambus/Refill) */
  .warenkorb_diversifikationen_gesplittet span {
    display: inline-block;
    padding: 10px 16px;
    margin: 4px;
    min-height: 44px;
    line-height: 24px;
  }

  /* Merkliste Button */
  .produkt_merkliste .merkzettel_link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Lageranzeige */
  .lager li {
    font-size: 13px;
  }
}


/* ── CROSSSELLING (ähnliche Produkte) ────────────────────── */
@media screen and (max-width: 768px) {
  .crosselling h2 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .crosselling .swiper-slide {
    min-width: 160px;
  }
}


/* ── WARENKORB (Schritt 1-4 Checkout) ────────────────────── */
@media screen and (max-width: 768px) {

  /* Warenkorb Übersicht */
  .warenkorb h1 {
    font-size: 22px;
  }

  /* KERN-FIX: Produkt-Info (Bild+Name) volle Breite */
  .wk_produkt > .columns.six {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* Menge + Einzelpreis + Gesamtpreis: Zeile nebeneinander */
  .wk_produkt > .columns.one,
  .wk_produkt > .columns.two {
    width: 30% !important;
    float: left !important;
    margin-left: 0 !important;
    padding: 8px 4px;
    box-sizing: border-box;
  }

  /* Löschen-Spalte schmaler */
  .wk_produkt > .columns.one.wk_artikel_loeschen {
    width: 10% !important;
    text-align: right;
  }

  /* Produkt-Zeile als Block */
  .wk_produkt {
    padding: 16px 0;
    position: relative;
    border-bottom: 1px solid #eee;
  }

  /* Bild + Name nebeneinander */
  .wk_produkt_column.produkt-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .wk_produkt_column.produkt-row .columns.three {
    width: 70px !important;
    flex-shrink: 0;
    float: none !important;
    margin-left: 0 !important;
  }
  .wk_produkt_column.produkt-row .columns.nine {
    width: auto !important;
    flex: 1;
    margin-left: 0 !important;
    float: none !important;
  }
  .wk_produkt_bild {
    width: 70px;
    height: auto;
  }
  .wk_produkt_name {
    font-size: 14px;
    padding-right: 30px;
    margin-bottom: 8px;
  }

  /* Preise linksbündig auf Mobile */
  .wk_produkt_einzelpreis,
  .wk_produkt_gesamtpreis {
    text-align: left !important;
    font-size: 13px;
  }

  /* Mobile Labels */
  .wk_header_mobile {
    display: block !important;
    font-weight: 600;
    font-size: 11px;
    color: #888;
    width: auto !important;
    line-height: 1.2;
    margin-bottom: 2px;
  }

  /* Menge Input */
  .wk_produkt_menge input {
    width: 50px !important;
    height: 36px;
    font-size: 16px !important;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;
  }
  .wk_produkt_menge span.text {
    font-size: 14px;
    font-weight: 600;
  }

  /* Löschen-Button */
  .wk_produkt_name .wk_del {
    position: absolute;
    right: 0;
    top: 16px;
  }
  .wk_produkt_name .wk_del a,
  .wk_artikel_loeschen a {
    font-size: 20px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wk_artikel_loeschen {
    display: none; /* Doppelter X-Button - verstecken, .wk_del reicht */
  }

  /* Zusammenfassung */
  .warenkorb_zusammenfassung {
    margin-top: 20px;
  }
  .warenkorb_zusammenfassung .card {
    padding: 16px;
  }
  .warenkorb_zusammenfassung .columns.six {
    width: 50% !important;
    float: left !important;
  }
  .warenkorb_zusammenfassung button[type="submit"],
  .warenkorb_zusammenfassung input[type="submit"] {
    min-height: 48px;
    font-size: 16px;
    width: 100%;
  }

  /* Bestellanmerkung */
  .bestellung_anmerkung textarea {
    font-size: 16px !important;
    min-height: 80px;
  }

  /* Checkout-Schritte Leiste */
  ul.warenkorb_vorgang {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 4px;
    margin: 0;
  }
  ul.warenkorb_vorgang li {
    font-size: 11px;
    flex: 1;
    text-align: center;
    min-width: auto;
    padding: 6px 4px;
  }

  /* Gratis-Geschenke */
  .artikel_box.columns.four {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Warenkorb-Inhalt: 8+4 Layout zu 100% */
  .warenkorb_inhalt .columns.eight,
  .warenkorb_inhalt .columns.four {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }
}


/* ── OFFCANVAS CART (Popup rechts) ───────────────────────── */
@media screen and (max-width: 768px) {
  .offcanvas_cart {
    width: 85% !important;
    max-width: 100% !important;
  }
  .offcanvas_cart .burgerschliessen {
    padding: 16px;
    font-size: 15px;
    min-height: 44px;
  }

  /* Cart Popup: Produkt-Infos untereinander statt nebeneinander */
  .ajax_cart_content .wk_produkt .columns {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  .ajax_cart_content .wk_produkt_column {
    display: block;
    width: 100%;
    clear: both;
    padding: 4px 0;
  }
  .ajax_cart_content .wk_header_mobile {
    display: inline-block;
    width: auto;
    min-width: 100px;
    font-weight: 600;
    font-size: 13px;
  }
  .ajax_cart_content .wk_produkt_menge,
  .ajax_cart_content .wk_produkt_einzelpreis,
  .ajax_cart_content .wk_produkt_gesamtpreis {
    display: inline-block;
    float: none !important;
    text-align: left !important;
    font-size: 14px;
  }
  .ajax_cart_content .wk_produkt_menge input {
    width: 60px;
    height: 40px;
    font-size: 16px !important;
    text-align: center;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .ajax_cart_content .wk_produkt_bild {
    width: 60px;
    height: auto;
    float: left;
    margin-right: 12px;
    margin-bottom: 8px;
  }
  .ajax_cart_content .wk_produkt_name {
    font-size: 14px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .ajax_cart_content .button_del {
    font-size: 22px;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ── FOOTER ──────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .tri_footer .columns.three {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }
  .tri_footer h2 {
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .tri_footer address {
    font-size: 14px;
  }
  ul.footer-links li a {
    padding: 8px 0;
    display: block;
    min-height: 44px;
    line-height: 28px;
    font-size: 14px;
  }
  ul.footer-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  ul.footer-logos li.columns.six {
    width: auto !important;
    margin-left: 0 !important;
  }
  ul.footer-logos li img {
    height: 30px;
    width: auto;
  }
}


/* ── FORMULARE (Login, Kontakt, Registrierung) ───────────── */
@media screen and (max-width: 768px) {
  .form-group label {
    width: 100% !important;
    float: none !important;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100% !important;
    font-size: 16px !important; /* iOS Zoom-Fix */
    padding: 10px 12px;
    box-sizing: border-box;
  }
  input[type="submit"],
  button[type="submit"] {
    min-height: 48px;
    font-size: 16px;
    width: 100%;
  }
}


/* ── BUTTONS: Touch-Friendly ─────────────────────────────── */
@media screen and (max-width: 768px) {
  .button,
  .button-primary,
  .button-secondary {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
  a.button {
    display: block;
    text-align: center;
  }
}


/* ── MODAL (Bild-Zoom etc.) ──────────────────────────────── */
@media screen and (max-width: 768px) {
  .modal .modal-content {
    width: 95% !important;
    margin: 5% auto;
  }
  .modal .close {
    font-size: 28px;
    padding: 8px 12px;
    min-height: 44px;
    min-width: 44px;
  }
}


/* ── iOS SPEZIFISCH ──────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* iOS input zoom fix */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* ── PRINT (optional) ────────────────────────────────────── */
@media print {
  .tri_topbar,
  .tri_menu_navigation,
  .burgermenu,
  #lv-wrapper,
  .tri_footer,
  .tri_bottombar {
    display: none !important;
  }
}