/* =========================================================
   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;
}
.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;
  background:#fff; border-radius: var(--eqv-radius);
  max-width: 1100px; width: min(92vw,1100px);
  box-shadow: var(--eqv-shadow);
  overflow:hidden;
  z-index: 99999;

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

/* 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-ink-soft); margin: 0 0 1.2rem; font-size: 1em; line-height: 1.55; color: var(--eqv-blau); }

/* ---------- 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 – minimal, weißes UI wie im Screenshot
   ========================================================= */
.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 → reine Linien (keine runden Buttons) */
.eqv-slider__nav{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding: 0 22px; pointer-events:none;
}
.eqv-slider__btn{
  pointer-events:auto; appearance:none; border:none; background:transparent;
  width:46px; height:46px; position:relative; cursor:pointer;
}
.eqv-slider__btn::before,
.eqv-slider__btn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:30px; height:2px; background: var(--eqv-ui);
  transform-origin: left center; border-radius:2px;
}
/* Linker Pfeil: zwei schräge Linien */
.eqv-slider__btn[data-prev]::before{ transform: translate(-50%,-50%) rotate(135deg) }
.eqv-slider__btn[data-prev]::after { transform: translate(-50%,-50%) rotate(225deg) }
/* Rechter Pfeil */
.eqv-slider__btn[data-next]::before{ transform: translate(-50%,-50%) rotate(45deg) }
.eqv-slider__btn[data-next]::after { transform: translate(-50%,-50%) rotate(-45deg) }

/* Dots – kleine Kreise unten mittig; aktiv: voll, sonst Ring */
.eqv-dots{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:10px; padding:6px 10px;
  background: rgba(0,0,0,0); /* durchsichtig (dein Screenshot) */
}
.eqv-dot{
  width:10px; height:10px; border-radius:50%;
  background: transparent; border:2px solid var(--eqv-ui); opacity:.9;
  cursor:pointer; transition: transform .15s ease, opacity .2s ease, background .2s ease;
}
.eqv-dot[aria-current="true"]{ background: var(--eqv-ui) }
.eqv-dot:hover{ transform: scale(1.15) }

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

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