/*
Theme Name: Vauchery Theme
Version: 0.1.0
*/

/* =========================================================
   ROOT & RESET
========================================================= */
:root{
  --radius:25px;
  --text:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --card:#f3f6ef;
  --accent:#ff4d4d;
  --border:rgba(15,23,42,.08);
  --shadow:0 10px 30px rgba(15,23,42,.08);

  /* Fonts */
  --font-head:'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-copy:'Karla', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}

body{
 body{
  margin:0;
  font-family:var(--font-copy);
  background:var(--bg);
  color:var(--text);
}
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 18px;
}

/* Headlines & UI */
h1, h2, h3, h4, h5, h6,
.v-title,
.section-title,
.title,
.btn,
.single_add_to_cart_button,
.v-opt-price,
.v-opt-discount,
.v-provider-title{
  font-family:var(--font-head);
}

/* Copy / Lesetext */
.v-content,
.v-provider-text,
.woocommerce-product-details__short-description,
.woocommerce-product-details__description,
p, li{
  font-family:var(--font-copy);
  line-height:1.6;
  font-weight:400;
}

/* =========================================================
   HEADER / NAV
========================================================= */
.topbar{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:50;
}

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
}

.brand img{
  height:34px;
  width:auto;
  display:block;
}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.iconbtn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  text-decoration:none;
}

.iconbtn:hover{
  box-shadow:var(--shadow);
}

.navtabs{
  display:flex;
  gap:16px;
  align-items:center;
  padding:10px 0 14px;
  overflow:auto;
}

.navtabs a{
  white-space:nowrap;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  padding:8px 10px;
  border-radius:999px;
}

.navtabs a.active{
  color:var(--text);
  background:rgba(255,77,77,.1);
}

.navtabs a:hover{
  color:var(--text);
}

/* =========================================================
   GRID & CARD (STARTSEITE)
========================================================= */
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:620px){
  .grid{grid-template-columns:1fr}
}

.card{
  width:100%;
  min-width:0;
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.card-media{
  display:block;
  width:100%;
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#e8eee0;
}

.card-media img.card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Partnerlogo nie croppen */
.card-media img.partner-logo{
  position:absolute;
  right:14px;
  bottom:14px;
  width:auto;
  height:auto;
  max-width:180px;
  max-height:70px;
  object-fit:contain;
  display:block;
  background:transparent;
  padding:0;
  margin:0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
  opacity:0.95;
  z-index:10;
}

@media (max-width:620px){
  .card-media img.partner-logo{
    max-width:130px;
    max-height:52px;
  }
}

/* =========================================================
   PRODUCT PAGE LAYOUT
========================================================= */
.v-product{
  padding:10px 0 60px;
}

.v-product-grid{
  display:grid;
  grid-template-columns:1.25fr 0.95fr;
  gap:34px;
  align-items:start;
}

@media (max-width:980px){
  .v-product-grid{grid-template-columns:1fr}
}

.v-product-left,
.v-product-right{
  min-width:0;
}

/* Sticky rechter Block */
.v-sticky{
  position:sticky;
  top:92px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-self:flex-start;
  z-index:20;
}

/* Sticky erst unter 821px deaktivieren */
@media (max-width:820px){
  .v-sticky{
    position:static;
    top:auto;
  }
}

/* Sticky kann brechen wenn Parent overflow oder transform hat */
body.single-product,
body.single-product #page,
body.single-product #content,
body.single-product main,
body.single-product .site,
body.single-product .site-content,
body.single-product .woocommerce,
body.single-product .wrap,
body.single-product .v-product,
body.single-product .v-product-grid,
body.single-product .v-product-right{
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  contain:none !important;
}

/* =========================================================
   PRODUCT META (TITLE, BADGES, COUNTDOWN)
========================================================= */
.v-title{
  margin:0;
  font-size:28px;
  line-height:1.1;
  font-weight:900;
  max-width:100%;
  word-break:break-word;
}

.v-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.v-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:13px;
  color:var(--muted);
}

.v-countdown{
  width:100%;
  background:#d94b4b;
  color:#fff;
  border-radius:999px;
  padding:12px 14px;
  font-weight:900;
  text-align:center;
}

/* =========================================================
   BUY BOX
========================================================= */
.v-buy--single{
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}

.v-buy form.cart,
.v-buy .variations_form{
  margin:0;
}

/* CTA Button */
.woocommerce div.product form.cart .single_add_to_cart_button{
  margin-top:16px;
  min-width:220px;
  padding:14px 18px;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-weight:900;
  border:0;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover{
  opacity:.92;
}

/* =========================================================
   OPTION CARDS (VARIATIONS + SIMPLE)
========================================================= */
.v-variation-groups{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.v-variation-label{
  font-weight:900;
  margin:6px 0 8px;
}

.v-variation-options{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.v-opt{
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto auto;
  gap:8px 14px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:2px solid rgba(15,23,42,.22);
  cursor:pointer;
}

.v-opt input{display:none}

/* Radio Dot */
.v-opt-dot{
  grid-row:1 / span 2;
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(15,23,42,.35);
  background:transparent;
  margin-top:4px;
}

/* Option Titel */
.v-opt-text{
  font-size:12px;
  font-weight:500;
  line-height:1.25;
  color:rgba(15,23,42,.9);
}

/* Preiszeile */
.v-opt-right{
  display:flex;
  gap:14px;
  align-items:baseline;
  justify-content:flex-start;
  white-space:nowrap;
  flex-wrap:nowrap;
}

.v-opt-price{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
}

.v-opt-strike{
  font-size:16px;
  font-weight:800;
  color:rgba(15,23,42,.55);
  text-decoration:line-through;
}

.v-opt-discount{
  margin-left:auto;
  font-size:15px;
  font-weight:900;
  color:#d94b4b;
}

/* Selected State blau */
.v-opt.v-opt--active,
.v-opt:has(input:checked){
  border-color:#1e3a8a;
  background:rgba(30,58,138,.06);
  box-shadow:var(--shadow);
}

.v-opt.v-opt--active .v-opt-dot,
.v-opt:has(input:checked) .v-opt-dot{
  background:#1e3a8a;
  border-color:#1e3a8a;
}

/* =========================================================
   PROVIDER BOX
========================================================= */
.v-provider{
  margin-top:10px;
  border-top:1px solid var(--border);
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.v-provider-title{
  font-weight:900;
  margin-bottom:6px;
}

.v-provider-text{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  line-height:1.4;
}

.v-provider-right{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

.v-provider-logo{
  max-width:140px !important;
  width:140px !important;
  height:auto !important;
  object-fit:contain !important;
  opacity:1 !important;
  filter: brightness(0) saturate(100%) !important;
}

/* Inline SVG Logos erzwingen */
.v-provider-right svg,
.v-provider-right svg *{
  fill:#0f172a !important;
  stroke:#0f172a !important;
}

/* =========================================================
   WOOCOMMERCE GALLERY FIXES (RUNDUNGEN + LAYOUT)
========================================================= */
/* Gallery darf nicht floaten */
.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery{
  float:none !important;
  width:100% !important;
  margin:0 !important;
}

.v-product-left .woocommerce-product-gallery{
  width:100% !important;
  max-width:100% !important;
}

/* Content unter der Gallery starten */
.v-content{ clear:both; }

/* Rundungen sauber clippen */
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{
  border-radius:var(--radius) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

/* Woo rendert Bilder selbst, Rundung kommt vom Container */
.woocommerce div.product div.images img{
  border-radius:0 !important;
}

/* =========================================================
   CARD MEDIA: Hauptbild immer cover, Logos nie cover
========================================================= */
.card-media > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-media img.partner-logo{
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* =========================================================
   Redeem
========================================================= */

.v-redeem-wrap{max-width:520px}
.v-redeem-box{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.v-redeem-title{margin:0 0 12px;font-size:20px;font-weight:900}
.v-redeem-label{display:block;font-weight:800;margin:10px 0 6px}
.v-redeem-input{
  width:100%;
  border-radius:14px;
  border:2px solid rgba(15,23,42,.18);
  padding:12px 12px;
  font-weight:800;
  font-size:16px;
  outline:none;
}
.v-redeem-input:focus{border-color:rgba(15,23,42,.45)}
.v-redeem-btn{
  margin-top:12px;
  width:100%;
  border:0;
  border-radius:999px;
  padding:12px 14px;
  background:#0f172a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.v-redeem-btn:hover{opacity:.92}

.v-redeem-msg{
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:12px;
  font-weight:800;
}
.v-redeem-msg--success{background:rgba(16,185,129,.12)}
.v-redeem-msg--warning{background:rgba(245,158,11,.14)}
.v-redeem-msg--error{background:rgba(239,68,68,.14)}
.v-redeem-hint{margin-top:10px;color:rgba(15,23,42,.6);font-weight:700;font-size:13px}