/* ===========================
   HEADER – Handy & Tablet Fixes (JODAR)
   Anforderungen:
   1) Cart: nur Tasche, kein Text
   2) Account/Kopf raus (weil im Menü)
   3) Floating Initialen Logo: rechts, nicht mittig, auf Handy ~10% kleiner
   =========================== */

/* 1) Cart-Button: Text ausblenden, nur Icon + Badge */
@media (max-width: 1024px){
  .jodar-cart-button{
    padding: 0.35rem 0.45rem;   /* etwas kompakter */
    gap: 0;                     /* kein Abstand für Text */
  }

  /* Der Text im Cart-Button ist meistens einfach normaler Textnode/Span.
     Wir blenden ALLE Spans aus, außer die Badge. */
  .jodar-cart-button span{
    display: none !important;
  }
  .jodar-cart-button .cart-button-badge{
    display: inline-flex !important;
  }

  /* Icon bleibt sichtbar */
  .jodar-cart-button .jodar-cart-button-icon{
    display: inline-flex !important;
  }
}

/* 2) Kopf/Icon (Account) auf Handy + Tablet entfernen */
@media (max-width: 1024px){
  /* In deinem Setup sitzt Account + Herz in .jodar-header-icons */
  .jodar-header-icons > *:first-child{
    display: none !important; /* erstes Icon = Account */
  }
}

/* 3) Floating Initialen Logo: rechts bleiben + kleiner */
@media (max-width: 1024px){
  .jodar-floating-logo{
    left: auto !important;     /* dein Mobile-CSS setzt left:1rem -> das killt rechts */
    right: 1rem !important;
    justify-content: flex-end !important;
  }
}

/* Handy: ca. 10% kleiner */
@media (max-width: 600px){
  .jodar-floating-logo img{
    transform: scale(0.9);
    transform-origin: right center;
  }
}

/* Tablet: leicht kleiner, aber nicht so stark wie Handy */
@media (min-width: 601px) and (max-width: 1024px){
  .jodar-floating-logo img{
    transform: scale(0.95);
    transform-origin: right center;
  }
}
/* Tablet (auch iPad Pro quer): Cart-Text ausblenden */
@media (max-width: 1300px){
  .jodar-cart-button{
    padding: 0.35rem 0.45rem;
    gap: 0;
  }

  .jodar-cart-button span{
    display: none !important;
  }

  .jodar-cart-button .cart-button-badge{
    display: inline-flex !important;
  }

  .jodar-cart-button .jodar-cart-button-icon{
    display: inline-flex !important;
  }
}

/* ===========================
   SHOP – Handy: 2 Spalten immer
   =========================== */
@media (max-width: 600px){
  ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important; /* optional etwas enger auf Handy */
  }
}

/* Sehr kleine Phones: noch etwas kompakter */
@media (max-width: 380px){
  ul.products{
    gap: 10px !important;
  }
}

/* ===========================
   SHOP – Filter Drawer: Nichts unten abgeschnitten (Handy + Tablet)
   =========================== */

/* Overlay soll die echte Viewport-Höhe nutzen */
.filter-overlay{
  inset: 0;
  height: 100vh;     /* fallback */
  height: 100dvh;    /* modern: berücksichtigt Browserleisten */
}

/* Admin-Bar korrekt berücksichtigen */
body.admin-bar .filter-overlay{
  top: 32px;
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

/* Drawer übernimmt 100% der Overlay-Höhe (nicht stumpf 100vh) */
.filter-drawer{
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

/* WICHTIG: Damit Flex-Child wirklich scrollen kann (sonst “schneidet” es ab) */
.filter-drawer-body{
  flex: 1 1 auto;
  min-height: 0;          /* <- der entscheidende Fix */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer bleibt unten sichtbar und bekommt Safe-Area */
.filter-drawer-footer{
  flex: 0 0 auto;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  background: #fff;
}

/* Handy: Drawer Fullwidth */
@media (max-width: 600px){
  .filter-drawer{ width: 100%; }
}


/* ===========================
   MY ACCOUNT – Mobile Nav (nur Responsive Overrides)
   Ziel:
   - Boxen kleiner/kompakter
   - zentrierter Look
   - sichtbar, dass man nach rechts/links scrollen kann (Fade + Peek)
   =========================== */

@media (max-width: 640px){

  /* Nav-Leiste als sauberer Slider */
  .account-nav{
    position: relative;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    padding: 0.7rem 0.7rem !important;
    gap: 0.6rem !important;

    /* “zentrierter” Eindruck */
    justify-content: flex-start;
  }

  /* Header/Labels bleiben auf Mobile weg (hast du schon, hier nur zur Sicherheit) */
  .nav-header,
  .nav-group-label{
    display: none !important;
  }

  /* Liste horizontal */
  .account-nav-list{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
    padding: 0 14px !important; /* links/rechts Luft */
  }

  /* Buttons kompakter + ruhiger (Row statt Column) */
  .account-nav-btn{
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;

    min-width: 210px !important;
    max-width: 240px !important;

    padding: 0.55rem 0.7rem !important;
    border-radius: 18px !important;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Icon etwas kleiner */
  .nav-icon{
    width: 24px !important;
    height: 24px !important;
    font-size: 0.85rem !important;
  }

  /* Subline auf Mobile raus (macht’s sofort cleaner) */
  .nav-sub{
    display: none !important;
  }

  /* Hint: “hier geht’s weiter” (Fade links/rechts) */
  .account-nav::before,
  .account-nav::after{
    content: "";
    position: sticky;
    top: 0;
    width: 26px;
    height: 100%;
    pointer-events: none;
    z-index: 5;
  }
  .account-nav::before{
    left: 0;
    background: linear-gradient(90deg, var(--bg-soft), rgba(251,249,246,0));
  }
  .account-nav::after{
    right: 0;
    background: linear-gradient(270deg, var(--bg-soft), rgba(251,249,246,0));
  }

  /* Optional: Scrollbar ausblenden */
  .account-nav{ scrollbar-width: none; }
  .account-nav::-webkit-scrollbar{ display: none; }

  /* Logout bleibt versteckt (wie bei dir) */
  .account-nav-btn.logout{
    display: none !important;
  }
}

/* ===========================
   MY ACCOUNT – Mobile: Kachel-Menü statt Wischen
   =========================== */
@media (max-width: 640px){

  /* Nav wird Grid statt Horizontal-Scroller */
  .account-nav{
    overflow: visible !important;
    flex-direction: column !important;
    padding: 0.9rem !important;
    gap: 0.7rem !important;
  }

  .account-nav-list{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
  }

  /* Kacheln */
  .account-nav-btn{
    min-width: 0 !important;
    width: 100% !important;

    border-radius: 18px !important;
    padding: 0.85rem 0.9rem !important;

    flex-direction: row !important;
    align-items: center !important;
    gap: 0.7rem !important;

    border: 1px solid rgba(10,10,10,0.10) !important;
    background: rgba(255,255,255,0.80) !important;
    box-shadow: 0 10px 22px rgba(15,11,7,0.06) !important;
  }

  /* Text clean */
  .nav-main{ font-size: 0.82rem !important; }
  .nav-sub{ display: none !important; }

  /* Active gut sichtbar */
  .account-nav-btn.active{
    background: linear-gradient(135deg, #1f1813, #302018) !important;
    color: #fdf8f2 !important;
    border-color: #1f1813 !important;
    box-shadow: 0 16px 32px rgba(14,9,5,0.35) !important;
  }
  .account-nav-btn.active .nav-icon{
    background: #f7eee3 !important;
    color: #1f1813 !important;
  }

  /* Logout bleibt weg (oder du machst ihn als volle Breite unten) */
  .account-nav-btn.logout{ display:none !important; }

  /* Sehr kleine Handys: 1 Spalte */
  @media (max-width: 380px){
    .account-nav-list{ grid-template-columns: 1fr !important; }
  }
}

/* ===========================
   WISHLIST – Mobile Optimierung (nur Layout/Größen)
   =========================== */
@media (max-width: 640px){

  /* Seite etwas kompakter */
  .mj-wishlist-page{
    padding: 96px 12px 56px;
  }

  /* Panel Padding etwas kleiner */
  .mj-wishlist-page .cart-panel{
    padding: 16px 14px 14px;
  }

  /* Item: kompakteres Grid */
  .mj-wishlist-page .cart-item{
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
    align-items: start !important;
  }

  /* Thumbnail kleiner */
  .mj-wishlist-page .cart-item-thumb{
    width: 64px !important;
    border-radius: 14px !important;
  }

  /* Preis in eine Zeile unter Titel, nicht rechts “abgesetzt” */
  .mj-wishlist-page .cart-item-price{
    grid-column: 2 / 3 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 2px !important;
    align-items: flex-start !important;
  }

  .mj-wishlist-page .cart-item-price-main{
    flex-direction: row !important;
    gap: 10px !important;
    align-items: baseline !important;
  }

  /* Actions: nebeneinander statt riesige Spalte */
  .mj-wishlist-page .cart-item-actions{
    grid-column: 1 / -1 !important;       /* ganze Breite */
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    margin-top: 6px !important;
  }

  /* Add-to-cart soll flexibel sein (nicht min-width 190) */
  .mj-wishlist-page .wishlist-add-to-cart{
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Remove kleiner und rechts */
  .mj-wishlist-page .cart-item-remove{
    justify-self: end !important;
    padding: 0 !important;
  }

  /* Availability als volle Breite unter Actions (falls vorhanden) */
  .mj-wishlist-page .item-availability{
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-top: 6px !important;
  }

  /* Size Panel: Pills kompakter, besserer Wrap */
  .mj-wishlist-page .mj-size-pill-group{
    gap: 8px !important;
  }
  .mj-wishlist-page .mj-size-pill{
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  /* Header oben: weniger “Side-by-side” Zwang */
  .mj-wishlist-page .cart-title-row{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Share Bereich: Buttons sollen nicht zu klein wirken */
  .mj-wishlist-page .share-actions{
    gap: 10px !important;
  }
  .mj-wishlist-page .share-btn{
    padding: 10px 14px 9px !important;
  }
}
/* ===========================
   CHECKOUT – Mobile Fixes (nur Handy)
   =========================== */
@media (max-width: 600px){

  /* Shell etwas kompakter */
  .jodar-checkout-root{
    padding: 18px 12px !important;
    align-items: flex-start !important;
  }
  .jodar-checkout-shell{
    padding: 26px 14px 20px !important;
    border-radius: 18px !important;
  }

  /* 1) Stepper: nicht quetschen */
  .jodar-checkout-stepper{
    gap: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap !important;          /* darf umbrechen */
    justify-content: center !important;
  }

  .jodar-step-item{
    gap: 6px !important;
    flex: 0 1 auto !important;
  }

  .jodar-step-circle{
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  .jodar-step-label{
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    white-space: normal !important;      /* darf umbrechen */
    line-height: 1.15 !important;
  }

  /* Linien zwischen Steps auf Mobile entfernen (macht’s viel ruhiger) */
  .jodar-step-line{
    display: none !important;
  }

  /* 2) Navigation: Zurück links, Weiter rechts (nebeneinander) */
  .jodar-nav{
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .jodar-nav-left,
  .jodar-nav-right{
    flex: 1 1 0 !important;
    display: flex !important;
  }
  .jodar-nav-left{ justify-content: flex-start !important; }
  .jodar-nav-right{ justify-content: flex-end !important; }

  /* Buttons nehmen auf Mobile gleichmäßig Platz ein */
  .jodar-nav .jodar-btn{
    width: 100% !important;
    demonstrate: none;
    padding: 11px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
  }

  /* falls du noch Hint/Step-Text dazwischen hast: nicht in die Mitte drücken */
  .jodar-nav-hint{
    display: none !important;
  }

  /* 3) Versand & Zahlung Karten kompakter */
  .jodar-option{
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 20px !important;     /* tellerrand weniger extrem */
  }

  .jodar-option-title{
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.2 !important;
  }

  .jodar-option-subtitle{
    font-size: 10px !important;
    margin-top: 3px !important;
    line-height: 1.35 !important;
  }

  .jodar-option-right{
    font-size: 11px !important;
  }

  /* Preis darf nicht “wegdrücken”, wenn Titel lang ist */
  .jodar-option-right{
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Dot etwas kleiner */
  .jodar-option-dot{
    width: 13px !important;
    height: 13px !important;
  }

  /* Checkout Überschriften etwas kleiner, damit alles luftiger wird */
  .jodar-heading{ font-size: 20px !important; }
  .jodar-subline{ font-size: 12px !important; margin-bottom: 16px !important; }
}


  }/* ===========================
   CHECKOUT – Abstand Back-Link / Logo (Mobile)
   =========================== */
@media (max-width: 600px){

  /* Back-Link etwas höher lassen */
  .jodar-checkout-back{
    top: 10px !important;
	  bottom: 15px !important;
  }

  /* Logo bekommt mehr Luft nach oben */
  .jodar-checkout-logo{
    margin-top: 26px !important;
    margin-bottom: 20px !important;
  }
}

/* =====================================================
   CHECKOUT – Farben NUR Mobile & Tablet (<= 900px)
   Versand & Zahlung immer schwarz
   ===================================================== */
@media (max-width: 900px) {

  .woocommerce-checkout .jodar-option-title,
  .woocommerce-checkout .jodar-option-subtitle,
  .woocommerce-checkout .jodar-option-price,
  .woocommerce-checkout .jodar-option-right {
    color: var(--text) !important;
  }

  /* Falls Woo daraus Links macht */
  .woocommerce-checkout .jodar-option a,
  .woocommerce-checkout .jodar-option a:visited,
  .woocommerce-checkout .jodar-option a:hover {
    color: var(--text) !important;
    text-decoration: none !important;
  }

  /* Radio-Label-Fallback */
  .woocommerce-checkout .jodar-option label {
    color: var(--text) !important;
  }
}

/* =====================================================
   RESPONSIVE – Header Icons
   NUR Umrandung schwarz (kein Fill)
   Handy + Tablet
   ===================================================== */
@media (max-width: 1024px) {

  /* Links im Header (kein Blau) */
  .jodar-header a,
  .jodar-header a:visited,
  .jodar-header a:hover,
  .jodar-header a:active {
    color: #000 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #000 !important;
  }

  /* SVG Icons: NUR Stroke, kein Fill */
  .jodar-header svg {
    fill: none !important;
    stroke: #000 !important;
  }

  /* Falls einzelne SVGs Paths nutzen */
  .jodar-header svg path,
  .jodar-header svg circle,
  .jodar-header svg rect,
  .jodar-header svg line {
    fill: none !important;
    stroke: #000 !important;
  }

  /* Icon-Fonts (Fallback, falls kein SVG) */
  .jodar-header i,
  .jodar-header .icon,
  .jodar-header [class*="icon"] {
    color: #000 !important;
  }
}

/* =========================
   HERO – Mobile Header Offset
   ========================== */
@media (max-width: 600px) {
  .hero-full {
    padding-top: var(--mobile-header-height, 100px);
    height: calc(100vh - var(--mobile-header-height, 72px));
  }
}