/* JE Variation Table v1.5.0 — shortcode-only, always-table layout with hardened row/image containment. */
.jevt-shell {
  --jevt-accent: var(--e-global-color-accent, var(--e-global-color-primary, #d9b227));
  --jevt-secondary: #9b9500;
  --jevt-ink: #2f3035;
  --jevt-muted: #747780;
  --jevt-line: #e7e7eb;
  --jevt-soft: #f8f8fa;
  --jevt-success: #62a60a;
  --jevt-danger: #d12f2f;
  position: relative;
  width: 100%;
  max-width: none !important;
  min-width: 0;
  margin: 18px 0 28px;
  color: var(--jevt-ink);
  font: inherit;
  background: #fff;
  border: 1px solid var(--jevt-line);
  border-radius: 16px;
  overflow: hidden;
}

.jevt-shell *, .jevt-shell *::before, .jevt-shell *::after { box-sizing: border-box; }
.jevt-row[hidden] { display: none !important; }
.jevt-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;white-space:nowrap!important;border:0!important; }
.jevt-native-variation-form-hidden,
.jevt-native-variation-widget-hidden { display: none !important; }

.jevt-topline {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px 16px;
}
.jevt-title { margin:0 0 4px !important; font-size:clamp(20px,2vw,27px)!important; line-height:1.15!important; letter-spacing:-.025em; color:var(--jevt-ink); }
.jevt-subtitle { margin:0!important; max-width:720px; font-size:14px; line-height:1.5; color:var(--jevt-muted); }
.jevt-count { flex:0 0 auto; display:flex; align-items:baseline; gap:4px; padding:8px 12px; border:1px solid var(--jevt-line); border-radius:999px; background:var(--jevt-soft); color:var(--jevt-muted); font-size:12px; }
.jevt-count strong { color:var(--jevt-ink); font-size:14px; }

.jevt-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:0 24px 20px;
}
.jevt-search { position:relative; flex:1 1 360px; min-width:220px; }
.jevt-search svg { position:absolute; left:13px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:#8d8d98; stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.jevt-search input,
.jevt-filter-select select {
  width:100%;
  min-height:44px;
  margin:0!important;
  border:1px solid #dcdde2!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--jevt-ink)!important;
  font:inherit!important;
  font-size:13px!important;
  outline:0;
  box-shadow:none!important;
}
.jevt-search input { padding:10px 40px!important; }
.jevt-filter-select { flex:0 1 190px; }
.jevt-filter-select select { padding:9px 34px 9px 12px!important; }
.jevt-search input:focus,
.jevt-filter-select select:focus { border-color:var(--jevt-accent)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--jevt-accent) 12%,transparent)!important; }
.jevt-clear-search { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:#777; font-size:20px; cursor:pointer; }
.jevt-stock-only { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid #dcdde2; border-radius:10px; background:#fff; color:#3c3c43; font-size:13px; cursor:pointer; white-space:nowrap; }
.jevt-stock-only input { width:16px; height:16px; margin:0; accent-color:var(--jevt-accent); }

.jevt-feedback { margin:0 24px 16px; padding:11px 14px; border-radius:10px; font-size:13px; line-height:1.4; }
.jevt-feedback.is-success { background:#f3f8e8; color:#466000; border:1px solid #dce9b7; }
.jevt-feedback.is-error { background:#fff2f0; color:#8f1d13; border:1px solid #ffd0ca; }

/* Always a real table. On narrow screens the wrapper scrolls horizontally. */
.jevt-table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--jevt-line);
  scrollbar-width:thin;
}
.jevt-table-wrap:focus { outline:2px solid color-mix(in srgb,var(--jevt-accent) 28%,transparent); outline-offset:-2px; }
.jevt-table {
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:auto!important;
  background:#fff;
}
.jevt-table th,
.jevt-table td {
  border:0!important;
  border-bottom:1px solid var(--jevt-line)!important;
  padding:12px 14px!important;
  vertical-align:middle!important;
  text-align:left;
  white-space:nowrap;
}
.jevt-table thead th {
  z-index:3;
  background:#fafafd;
  color:#666671;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.jevt-has-sticky-header .jevt-table thead th { position:sticky; top:0; }
.admin-bar .jevt-has-sticky-header .jevt-table thead th { top:32px; }
.jevt-table thead th:first-child,
.jevt-table tbody td:first-child { padding-left:20px!important; }
.jevt-table thead th:last-child,
.jevt-table tbody td:last-child { padding-right:20px!important; }
.jevt-table tbody tr { transition:background-color .15s ease; }
.jevt-table tbody tr:hover { background:color-mix(in srgb,var(--jevt-accent) 3%,#fff); }
.jevt-table tbody tr.is-unavailable { background:#fbfbfc; color:#85858d; }
.jevt-table tbody tr.is-unavailable .jevt-image-button img { opacity:.55; filter:saturate(.55); }

.jevt-sortable-head button { display:inline-flex; align-items:center; gap:5px; padding:0!important; border:0!important; background:transparent!important; color:inherit!important; font:inherit!important; font-weight:inherit!important; letter-spacing:inherit; text-transform:inherit; cursor:pointer; box-shadow:none!important; }
.jevt-sortable-head button:hover { color:var(--jevt-ink)!important; }
.jevt-sort-icon { font-size:13px; font-weight:500; opacity:.55; }

/* Images are hard-contained. They cannot escape into the next row. */
.jevt-image-cell { width:calc(var(--jevt-thumb) + 28px); min-width:calc(var(--jevt-thumb) + 28px); }
.jevt-image-button {
  position:relative!important;
  display:block!important;
  width:var(--jevt-thumb)!important;
  height:var(--jevt-thumb)!important;
  min-width:var(--jevt-thumb)!important;
  min-height:var(--jevt-thumb)!important;
  max-width:var(--jevt-thumb)!important;
  max-height:var(--jevt-thumb)!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  cursor:zoom-in;
  line-height:0!important;
}
.jevt-image-button img {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.jevt-zoom { position:absolute; right:3px; bottom:3px; z-index:2; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:rgba(20,20,25,.72); color:#fff; font-size:13px; line-height:1; opacity:0; transition:.15s ease; }
.jevt-image-button:hover .jevt-zoom { opacity:1; }

.jevt-attribute-cell { min-width:150px; }
.jevt-attribute-cell strong { display:block; color:#4f4f58; font-size:13px; font-weight:600; line-height:1.35; }
.jevt-sku-cell { min-width:82px; }
.jevt-meta-cell { min-width:120px; }
.jevt-sku-cell span,
.jevt-meta-cell span { color:#66666f; font-size:12px; }

.jevt-stock-cell { min-width:86px; text-align:center!important; }
.jevt-availability-dot { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; box-shadow:0 0 0 3px rgba(0,0,0,.025); }
.jevt-availability-dot.is-in-stock { background:var(--jevt-success); }
.jevt-availability-dot.is-out-of-stock { background:var(--jevt-danger); }

.jevt-price-cell { min-width:110px; }
.jevt-sale-chip { display:inline-block; margin:0 0 4px; padding:3px 6px; border-radius:999px; background:color-mix(in srgb,var(--jevt-secondary) 13%,#fff); color:var(--jevt-secondary); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.jevt-price { white-space:nowrap; font-size:13px; font-weight:700; color:#2f2f35; }
.jevt-price del { display:block; margin-bottom:1px; color:#9a9aa2; font-size:11px; font-weight:500; opacity:1; }
.jevt-price ins { color:var(--jevt-secondary); text-decoration:none; font-weight:800; }

.jevt-qty-cell { min-width:120px; }
.jevt-qty { display:grid; grid-template-columns:34px 40px 34px; width:max-content; height:38px; border:1px solid #dedee5; border-radius:10px; background:#fff; overflow:hidden; }
.jevt-qty button,
.jevt-qty input { min-width:0!important; height:36px!important; margin:0!important; border:0!important; border-radius:0!important; background:#fff!important; color:#26262c!important; box-shadow:none!important; font:inherit!important; font-size:13px!important; text-align:center!important; }
.jevt-qty button { padding:0!important; cursor:pointer; font-size:18px!important; line-height:1; }
.jevt-qty button:hover { background:#f4f4f7!important; }
.jevt-qty input { width:40px!important; padding:0 2px!important; font-weight:700!important; appearance:textfield; -moz-appearance:textfield; }
.jevt-qty input::-webkit-outer-spin-button,.jevt-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.jevt-qty.is-disabled { opacity:.45; }

.jevt-cart-cell { min-width:145px; text-align:right!important; }
.jevt-add-button {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px;
  min-height:40px;
  margin:0!important;
  padding:9px 15px!important;
  border:1px solid var(--jevt-accent)!important;
  border-radius:10px!important;
  background:var(--jevt-accent)!important;
  color:#fff!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.2!important;
  white-space:nowrap;
  cursor:pointer;
}
.jevt-add-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.jevt-add-button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in srgb,var(--jevt-accent) 25%,transparent)!important; }
.jevt-add-button:disabled { background:#d8d8de!important; border-color:#d8d8de!important; color:#77777f!important; cursor:not-allowed; }
.jevt-add-button.is-added { background:var(--jevt-secondary)!important; border-color:var(--jevt-secondary)!important; }
.jevt-add-button.is-loading { opacity:.72; }

.jevt-empty { padding:50px 24px; text-align:center; color:var(--jevt-muted); }
.jevt-empty-icon { width:46px; height:46px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; background:var(--jevt-soft); color:#9999a2; font-size:26px; }
.jevt-empty strong { display:block; margin-bottom:4px; color:var(--jevt-ink); font-size:15px; }
.jevt-empty span { display:block; margin-bottom:12px; font-size:13px; }
.jevt-empty button { border:0; background:transparent; color:var(--jevt-accent); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }

.jevt-footer { display:flex; align-items:center; justify-content:center; min-height:58px; padding:10px 20px; background:#fbfbfd; }
.jevt-pagination { display:flex; align-items:center; gap:5px; }
.jevt-pagination button { display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px; border:1px solid #dfdfe5; border-radius:9px; background:#fff; color:#4d4d55; font:inherit; font-size:12px; cursor:pointer; }
.jevt-pagination button.is-current { border-color:var(--jevt-accent); background:var(--jevt-accent); color:#fff; }
.jevt-pagination button:disabled { opacity:.35; cursor:not-allowed; }

.jevt-image-modal[hidden] { display:none!important; }
.jevt-image-modal { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:24px; }
.jevt-modal-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(15,15,20,.72); cursor:zoom-out; backdrop-filter:blur(4px); }
.jevt-modal-card { position:relative; z-index:1; display:grid; place-items:center; width:min(680px,92vw); height:min(680px,82vh); padding:28px; border-radius:20px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.28); }
.jevt-modal-card img { display:block; width:100%; height:100%; object-fit:contain; }
.jevt-modal-close { position:absolute; right:12px; top:12px; z-index:2; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:#f1f1f4; color:#333; font-size:24px; line-height:1; cursor:pointer; }
html.jevt-modal-open { overflow:hidden; }

@media (max-width: 782px) {
  .admin-bar .jevt-has-sticky-header .jevt-table thead th { top:46px; }
  .jevt-shell { border-radius:12px; }
  .jevt-topline { padding:18px 16px 14px; }
  .jevt-title { font-size:20px!important; }
  .jevt-subtitle { font-size:12px; }
  .jevt-count { padding:6px 9px; }
  .jevt-toolbar { padding:0 16px 16px; gap:8px; }
  .jevt-search { flex:1 1 100%; }
  .jevt-filter-select { flex:1 1 170px; }
  .jevt-stock-only { flex:0 0 auto; }
  .jevt-table th,
  .jevt-table td { padding:10px 12px!important; }
}

@media (prefers-reduced-motion: reduce) {
  .jevt-shell *, .jevt-shell *::before, .jevt-shell *::after { scroll-behavior:auto!important; transition:none!important; }
}

/* -------------------------------------------------------------------------
 * v1.5.0 row-visibility hardening
 * -------------------------------------------------------------------------
 * Keep the table header in normal document flow. A sticky <thead> inside a
 * horizontal overflow container can overlap the first tbody row in Safari,
 * Chromium and some Elementor/container combinations. The table already has
 * horizontal scrolling, so reliability is more important than sticky heads.
 */
.jevt-table thead,
.jevt-table thead tr,
.jevt-table thead th,
.jevt-has-sticky-header .jevt-table thead th,
.admin-bar .jevt-has-sticky-header .jevt-table thead th {
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* The scroller only handles the table width. No translated or negative
 * vertical positioning is allowed around the first body row. */
.jevt-table-wrap {
  position: relative !important;
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  scroll-padding-top: 0 !important;
}

.jevt-table,
.jevt-table tbody,
.jevt-table tbody tr,
.jevt-table tbody td {
  transform: none !important;
}

/* Every variation row reserves enough vertical room for its thumbnail.
 * This prevents the first item (and any later item) being painted underneath
 * a neighbouring row or clipped by a theme's table line-height rules. */
.jevt-table tbody tr {
  height: calc(var(--jevt-thumb) + 24px) !important;
}
.jevt-table tbody td {
  min-height: calc(var(--jevt-thumb) + 24px) !important;
  overflow: visible !important;
}

/* The image is now kept in normal flow rather than absolutely positioned.
 * That removes the browser/table-paint edge case that could crop row one. */
.jevt-image-cell {
  width: calc(var(--jevt-thumb) + 28px) !important;
  min-width: calc(var(--jevt-thumb) + 28px) !important;
  overflow: visible !important;
}
.jevt-image-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--jevt-thumb) !important;
  height: var(--jevt-thumb) !important;
  min-width: var(--jevt-thumb) !important;
  min-height: var(--jevt-thumb) !important;
  max-width: var(--jevt-thumb) !important;
  max-height: var(--jevt-thumb) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
  vertical-align: middle !important;
  isolation: isolate;
}
.jevt-image-button:hover {
  transform: none !important;
}
.jevt-image-button img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Keep the very first variation fully separated from the header. */
.jevt-table tbody tr:first-child > td {
  border-top: 0 !important;
}

@media (max-width: 782px) {
  .jevt-table tbody tr {
    height: calc(var(--jevt-thumb) + 20px) !important;
  }
  .jevt-table tbody td {
    min-height: calc(var(--jevt-thumb) + 20px) !important;
  }
}
