/* =========================================================
   EQV – Quick View Modal + Slider (Café-Baum Styles)
   ========================================================= */

:root{
  --eqv-overlay: rgba(0,0,0,.6);
  --eqv-radius: 20px;
  --eqv-shadow: 0 20px 60px rgba(0,0,0,.25);
  --eqv-ink: #111;
  --eqv-ink-soft:#555;
  --eqv-creme:#FFF8E4;
  --eqv-blau:#145873;

  /* Slider Farben (weiß auf Foto) */
  --eqv-ui: #ffffff;
  --eqv-ui-dim: rgba(255,255,255,.55);
}

/* Body lock */
.eqv-lock{ overflow:hidden }

/* ---------- Modal Root ---------- */
.eqv-modal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--eqv-overlay);
  opacity:0; visibility:hidden;
  z-index: 99990;
  transition: opacity .3s ease, visibility .3s ease;
  align-items: center !important;
  justify-content: center;
}
.eqv-modal.is-open{ opacity:1; visibility:visible }
.eqv-modal.is-closing{ opacity:0; visibility:hidden }

/* Overlay Klickfläche */
.eqv-modal__overlay{
  position:absolute;
  inset:0;
  background:transparent;
  z-index: 99998;
  cursor:pointer;
}

/* ---------- Dialog ---------- */
.eqv-modal__dialog{
  position: relative;
  z-index: 99999;

  background: var(--eqv-bg, #f8f2d7);
  border-radius: 30px;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
  max-width: 1200px;       /* <- WICHTIG: Breite bleibt begrenzt */
  width: 90%;              /* <- NICHT 100%! */
  max-height: calc(100vh - 40px);
  overflow-y: auto;        /* nur DIERSE Box scrollt */
  -webkit-overflow-scrolling: touch;
  padding: 0;

  /* Fade/Scale */
  transform: translateY(24px) scale(.975);
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.eqv-modal.is-open .eqv-modal__dialog{ transform: translateY(0) scale(1); opacity:1 }
.eqv-modal.is-closing .eqv-modal__dialog{ transform: translateY(24px) scale(.975); opacity:0 }

/* Moderne Browser mit 100dvh (keine URL-Bar-Probleme) */
@supports (height: 100dvh){
  .eqv-modal__dialog{
    max-height: calc(100dvh - 40px);
  }
}

@media (max-width: 768px){
  .eqv-modal{
    align-items: center;   /* kannst auch flex-start probieren */
  }
}

/* ===== Mobile / Tablet: gesamtes Overlay scrollt ===== */
@media (max-width: 1024px){
  .eqv-modal{
    align-items: flex-start !important;  /* Popup sitzt oben, nicht zentriert */
    justify-content: center;
    padding: 20px 0;                     /* etwas Luft oben/unten */
    overflow-y: auto;                    /* HIER wird gescrollt */
    -webkit-overflow-scrolling: touch;
  }

  .eqv-modal__dialog{
    max-height: none;                    /* keine harte Begrenzung mehr */
    /* overflow-y:auto darf bleiben, stört nicht,
       aber Scroll findet primär auf .eqv-modal statt */
  }
}

/* Busy State */
.eqv-modal.is-busy .eqv-modal__dialog{ filter: saturate(.9) brightness(.98) }

/* Close Button (X) – minimal, oben links wie in deinem Layout */
.eqv-modal__close{
  position:absolute; top:16px; left:16px;
  width:36px; height:36px; border-radius:50%;
  border:none !important; background: transparent !important; cursor:pointer; z-index:100002;
  color: #FFF8E4;
}
.eqv-modal__close::before,
.eqv-modal__close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:26px; height:2px; background: var(--eqv-ui);
  transform-origin:center;
}
.eqv-modal__close::before{ transform: translate(-50%,-50%) rotate(45deg) }
.eqv-modal__close::after{  transform: translate(-50%,-50%) rotate(-45deg) }

/* ---------- Grid 1/3 : 2/3 ---------- */
.eqv-modal__grid{
  display:grid; grid-template-columns: 1fr 2fr;
}
.eqv-modal__img{ position:relative; overflow:hidden; background:#000 }
.eqv-modal__img img{ width:100%; height:100%; object-fit:cover; display:block }

.eqv-modal__content{
	background-color: var(--eqv-creme);
	padding: 3rem 3rem 2.4rem;
	display:flex; flex-direction:column; justify-content:center;
	color: var(--eqv-ink);
	font-family: "Playfair", Times, serif;
}
.eqv-modal__content .product_title{ margin:0 0 1rem; font-size:42px; line-height:1.15; font-weight: normal; color: var(--eqv-blau); }
.eqv-price{ font-size:36px; font-weight: normal; font-style: italic; margin:.25rem 0 1.2rem; color: var(--eqv-blau); }
.eqv-modal__content .woocommerce-product-details__short-description { color:var(--eqv-blau); margin: 0 0 1.2rem; font-size: 24px; line-height: 1.55; color: var(--eqv-blau); }
.eqv-modal__content .woocommerce-product-details__description { font-size: 16px; color:var(--eqv-blau); }

.eqv_modal__content .eqv-meta { font-size: 14px; color:var(--ink-soft); }

/* ---------- Variations / Cart ---------- */
.eqv-modal__content table.variations{ width:100%; margin-bottom:1rem }
.eqv-modal__content table.variations tbody>tr:nth-child(odd)>td,
.eqv-modal__content table.variations tbody>tr:nth-child(odd)>th { background-color: transparent !important; }
	
.eqv-modal__content table.variations td,
.eqv-modal__content table.variations th{ border:none; padding:.25rem 0 }
.eqv-modal__content table.variations select{
  width:100%; border:1px solid #dcdcdc; border-radius:8px; padding:.5rem .65rem;
}
.eqv-modal__content .quantity{ display:inline-flex; align-items:center; gap:.5rem }
.eqv-modal__content .quantity input.qty{ width: 100px; text-align:center; border:1px solid var(--eqv-blau); border-radius:8px; padding:.45rem; }
.eqv-modal__content .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--eqv-creme); color:var(--eqv-blau); border:1px solid var(--eqv-blau); border-radius:25px;
  padding:.8rem 1.8rem; font-size:1rem; cursor:pointer;
  transition: background .2s ease, opacity .2s ease;
}
.eqv-modal__content .single_add_to_cart_button:hover{ background:var(--eqv-blau);color:var(--eqv-creme); }
.eqv-modal__content .single_add_to_cart_button.loading{ position:relative; opacity:.85; pointer-events:none }
.eqv-modal__content .single_add_to_cart_button.loading::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation: eqvSpin .7s linear infinite;
}

/* ---------- Zentraler Modal-Spinner ---------- */
.eqv-spinner{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.15);
  opacity:0; visibility:hidden; transition: opacity .2s ease, visibility .2s ease;
  z-index:100001;
}
.eqv-modal.is-busy .eqv-spinner{ opacity:1; visibility:visible }
.eqv-spinner::after{
  content:""; width:42px; height:42px; border-radius:50%;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation: eqvSpin .8s linear infinite;
}

/* ---------- Overlay-Trigger (ganze Karte klickbar) ---------- */
.eqv--overlay-enabled { position:relative }
.eqv-overlay-scope    { position:relative }
.eqv-trigger--overlay{
  position:absolute; inset:0; display:block; z-index:9;
  background:transparent; text-indent:-9999px; cursor:pointer;
}
body.eqv-open .eqv-trigger--overlay{ pointer-events:none }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .eqv-modal__grid{ grid-template-columns: 1fr }
  .eqv-modal__content{ padding: 2rem 1.6rem 2.2rem }
}

/* ---------- Animations ---------- */
@keyframes eqvSpin{ to { transform: rotate(360deg) } }

/* =========================================================
   SLIDER – dezentes UI (weiß, keine Button-Flächen)
   ========================================================= */
.eqv-slider{
  position: relative;
  height: 100%;
  overflow: hidden;
}
.eqv-slider__track{
  display: flex;
  height: 100%;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.eqv-slide{
  min-width: 100%;
  height: 100%;
}
.eqv-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Pfeile: nur schmale, weiße Pfeile direkt auf dem Bild links/rechts */
.eqv-slider__nav{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;            /* Abstand vom Rand */
  pointer-events: none;
}
.eqv-slider__btn{
  pointer-events: auto;
  appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 40px !important;                /* nur so breit wie nötig */
  height: 40px;
  padding: 0;
  cursor: pointer;
  position: relative;
}

/* Grundform: kleines Pfeil-Dreieck */
.eqv-slider__btn::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--eqv-ui);
  border-left: 2px solid var(--eqv-ui);
  border-radius: 2px;
  transform-origin: center;
}

/* Linker Pfeil – nach links zeigend */
.eqv-slider__btn[data-prev]::before{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Rechter Pfeil – nach rechts zeigend */
.eqv-slider__btn[data-next]::before{
  transform: translate(-50%, -50%) rotate(135deg);
}

/* leichte Hover-Reaktion */
.eqv-slider__btn:hover::before{
  transform: translate(-50%, -50%) scale(1.05) rotate(-45deg);
}
.eqv-slider__btn[data-next]:hover::before{
  transform: translate(-50%, -50%) scale(1.05) rotate(135deg);
}

/* Dots: kleine halbtransparente Kreise unten mittig */
.eqv-dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 0;                 /* keine Fläche dahinter */
}
.eqv-dot{
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(255,255,255,.75) !important;   /* halbtransparent weiß */
  opacity: .9 !important;
  cursor: pointer !important;
  transition: transform .15s ease, opacity .2s ease, background .2s ease !important;
  padding: 0px !important;
}
.eqv-dot[aria-current="true"]{
  background: #ffffff;                /* aktiver Dot voll weiß */
}
.eqv-dot:hover{
  transform: scale(1.2);
}

/* Nur anzeigen, wenn tatsächlich mehrere Bilder existieren */
.eqv-slider:not(.has-multi) .eqv-slider__nav,
.eqv-slider:not(.has-multi) .eqv-dots{
  display: none;
}

/* Mobile: Dots etwas näher ans Bild */
@media (max-width: 992px){
  .eqv-dots{ bottom: 10px; }
}