/* NUSSTRA Tiles – Basis */
.nusstra-wrap { margin: .75rem 0; }
.nusstra-wrap.is-ready > select { display: none; } /* Select erst ausblenden, wenn Tiles stehen */

.nusstra-tiles{
  --accent: #386f45;
  --border: #ccd1c5;
  --bg: #fff;
  display:grid; grid-template-columns:1fr; gap:.75rem;
}
@media (min-width:600px){ .nusstra-tiles{ grid-template-columns:1fr 1fr; } }

.nusstra-tile{
  border:1px solid var(--border); border-radius:.5rem;
  padding:.75rem .85rem; background:var(--bg);
  cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.nusstra-tile.is-selected{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(138,154,99,.25); background-color: #4e895c0a;}
.nusstra-tile.is-disabled{ opacity:.55; cursor:not-allowed; }

.nusstra-tile .row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-weight:600; font-size: 18px; }
.nusstra-tile .sub{ display:flex; align-items:center; justify-content:space-between; margin-top:.25rem; font-size:.92em; opacity:.9; gap:.75rem; }
.nusstra-badge{ background:var(--accent); color:#fff; border-radius:.35rem; padding:.15rem .45rem; font-size:.82em; white-space:nowrap; }
.nusstra-badge.is-zero{ display:none; }

/* Visuell verstecken, aber zugänglich lassen (SEO/A11y ok) */
.nusstra-sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}

/* Optional: etwas enger in FunnelKit-Modals */
.fkcart-quick-view-drawer .nusstra-tiles,
#fkcart-modal .nusstra-tiles,
.fk-offcanvas .nusstra-tiles{ grid-template-columns:1fr; gap:.5rem; }

#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-wrap table tr {
    flex-direction: column !important;
}

.elementor-add-to-cart .nusstra-tile .current{
  font-size: 20px;
  font-weight: 500;
}

.elementor-add-to-cart .nusstra-tile .old{
  font-size: 20px;
  font-weight: 500;
}
.nusstra-tile .old{
  color: #386f45 !important;
  opacity: .7 !important;
}

/* === Gemeinsame Variablen für Tiles & Skeleton === */
.nusstra-tiles,
.nusstra-skeleton,
#nusstra-add-to-cart .nusstra-skeleton-widget{
  --n-gap: .75rem;            /* Abstand zwischen Kacheln */
  --n-radius: .5rem;          /* Eckenradius */
  --n-pad-y: .75rem;          /* vertikales Padding */
  --n-pad-x: .85rem;          /* horizontales Padding */
  --n-border: #e2e4e1;        /* Randfarbe Skeleton */
  --n-bg: #f3f4f2;            /* Grundfläche Skeleton */
  --n-minh: 86px;             /* >>> Höhe der Kacheln (Skeleton & echt) */
}

/* === Echte Tiles: min-height angleichen === */
.nusstra-tile{
  min-height: var(--n-minh);
  border-radius: var(--n-radius);
  padding: var(--n-pad-y) var(--n-pad-x);
}

/* === Grid: identisch für Tiles & Skeleton === */
.nusstra-tiles,
.nusstra-skeleton,
#nusstra-add-to-cart .nusstra-skeleton-widget{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--n-gap);
  margin:.75rem 0;
}
@media (min-width:600px){
  .nusstra-tiles,
  .nusstra-skeleton,
  #nusstra-add-to-cart .nusstra-skeleton-widget{
    grid-template-columns: 1fr 1fr;
  }
}

/* === Skeleton-Kachel: gleiche Außenmaße wie echte Tiles === */
.nusstra-skel-tile{
  position:relative;
  overflow:hidden;
  min-height: var(--n-minh);
  border:1px solid var(--n-border);
  border-radius: var(--n-radius);
  background: var(--n-bg);
  /* Innenabstand für realistische Höhe */
  padding: var(--n-pad-y) var(--n-pad-x);
}

/* Dezente Layout-Balken im Skeleton (oben: Gewichts-/Preiszeile, unten: €/kg/Bage) */
.nusstra-skel-tile{
  background:
    /* linke Überschrift (z. B. "500 g") */
    linear-gradient(#e9ebe8 16px, transparent 0)  var(--n-pad-y) var(--n-pad-x)/40% 16px no-repeat,
    /* rechter Preisblock */
    linear-gradient(#e9ebe8 16px, transparent 0)  var(--n-pad-y) calc(100% - var(--n-pad-x))/30% 16px no-repeat,
    /* untere €/kg-Text */
    linear-gradient(#eceeeb 12px, transparent 0)  calc(100% - var(--n-pad-y) - 12px) var(--n-pad-x)/45% 12px no-repeat,
    /* Badge-Fläche */
    linear-gradient(#e0e3df 14px, transparent 0)  calc(100% - var(--n-pad-y) - 14px) calc(100% - var(--n-pad-x))/22% 14px no-repeat,
    var(--n-bg);
}

/* Shimmer-Overlay */
.nusstra-skel-tile::after{
  content:"";
  position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                    rgba(255,255,255,.65) 50%,
                                    rgba(255,255,255,0) 100%);
  animation:nusstra-shimmer 1.1s infinite;
}
@keyframes nusstra-shimmer{ 100%{ transform:translateX(100%); } }

.fkcart-product-form-field .nusstra-tile{
  min-height: unset;
}

#fkcart-modal del .woocommerce-Price-amount.amount bdi{
  color: #386f45;
  opacity: .7;
}

/* #nusshide nur auf Single-Variable-Produkten ausblenden */
.nusstra-is-variable #nusshide{
  display:none !important;
}

/* === Gemeinsame Variablen für Tiles & Skeleton === */
.nusstra-tiles,
.nusstra-skeleton,
#nusstra-add-to-cart .nusstra-skeleton-widget{
  --n-gap: .75rem;            /* Abstand zwischen Kacheln */
  --n-radius: .5rem;          /* Eckenradius */
  --n-pad-y: .75rem;          /* vertikales Padding */
  --n-pad-x: .85rem;          /* horizontales Padding */
  --n-border: #e2e4e1;        /* Randfarbe Skeleton */
  --n-bg: #f3f4f2;            /* Grundfläche Skeleton */
  --n-minh: 86px;             /* >>> Höhe der Kacheln (Skeleton & echt) */
  --n-btn-h: 48px;            /* Höhe des Buttons/Qty */
}


/* === Grid: identisch für Tiles & Skeleton === */
.nusstra-tiles,
.nusstra-skeleton,
#nusstra-add-to-cart .nusstra-skeleton-widget{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--n-gap);
  margin:.75rem 0;
}
@media (min-width:600px){
  .nusstra-tiles,
  .nusstra-skeleton,
  #nusstra-add-to-cart .nusstra-skeleton-widget{
    grid-template-columns: 1fr 1fr;
  }
}

.nusstra-skeleton-widget{
    width: 100%;
    margin-bottom: 0 !important;
    max-height: 670px !important;

  }

/* === Skeleton-Kachel === */
.nusstra-skel-tile{
  position:relative;
  overflow:hidden;
  min-height: var(--n-minh);
  border:1px solid var(--n-border);
  border-radius: var(--n-radius);
  background: var(--n-bg);
  padding: var(--n-pad-y) var(--n-pad-x);
  width: 100%;
  /* Layout-Balken */
  background:
    linear-gradient(#e9ebe8 16px, transparent 0)  var(--n-pad-y) var(--n-pad-x)/40% 16px no-repeat,
    linear-gradient(#e9ebe8 16px, transparent 0)  var(--n-pad-y) calc(100% - var(--n-pad-x))/30% 16px no-repeat,
    linear-gradient(#eceeeb 12px, transparent 0)  calc(100% - var(--n-pad-y) - 12px) var(--n-pad-x)/45% 12px no-repeat,
    linear-gradient(#e0e3df 14px, transparent 0)  calc(100% - var(--n-pad-y) - 14px) calc(100% - var(--n-pad-x))/22% 14px no-repeat,
    var(--n-bg);
}

/* === CTA-Zeile (Qty + Button) === */
.nusstra-skeleton-cta{
  grid-column: 1 / -1;
  display:flex; gap: var(--n-gap); align-items:center;
  border-top-style: solid;
  border-top-width: 1px;
  padding-top: 15px;
  margin-top: 20px;
}
.nusstra-skel-qty,
.nusstra-skel-btn{
  position:relative; overflow:hidden;
  border:1px solid var(--n-border);
  border-radius: var(--n-radius);
  background: var(--n-bg);
  height: var(--n-btn-h);
}
.nusstra-skel-qty{ width:56px; }
.nusstra-skel-btn{ flex:1; }

/* === Shimmer-Overlay (Tiles + CTA) === */
.nusstra-skel-tile::after,
.nusstra-skel-qty::after,
.nusstra-skel-btn::after{
  content:"";
  position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%,
                                    rgba(255,255,255,.65) 50%,
                                    rgba(255,255,255,0) 100%);
  animation:nusstra-shimmer 1.1s infinite;
}
@keyframes nusstra-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
  .nusstra-skel-tile::after,
  .nusstra-skel-qty::after,
  .nusstra-skel-btn::after{ animation:none }
}

/* === Gate: echte Form verstecken, Skeleton zeigen === */
.elementor-add-to-cart.elementor-product-variable:not([data-wc-vars-ready="1"]) .variations_form{ visibility:hidden }
.elementor-add-to-cart.elementor-product-variable[data-wc-vars-ready="1"] #nusstra-add-to-cart .nusstra-skeleton-widget{ display:none }
.elementor-add-to-cart.elementor-product-variable:not([data-wc-vars-ready="1"]) #nusstra-add-to-cart .nusstra-skeleton-widget{ display:grid }

.woocommerce-js div.product form.cart .variations th {
    display: none;
}

#fkcart-modal .fkcart-quick-view-drawer .fkcart-product-form-wrap table th {
    display: none;
}

.fkcart-quick-view-drawer .fkcart-product-form-reset-form .reset_variations, .fkcart-quick-view-drawer .fkcart-product-form-reset-form a
 {
    margin-top: 20px;
}