/* Frontend labels */
.araneum-title-labels{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; justify-content:flex-start; }
.araneum-title-labels.loop { margin-bottom:8px; }

.araneum-label, .araneum-badge {
  --ar-scale: 1;
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-box-align:center;
  align-items:center;
  -webkit-box-pack:center;
  justify-content:center;
  font-weight:600;
  font-size: calc(12px * 1.15 * var(--ar-scale));
  line-height:1;
  padding: calc(4px * 1.15 * var(--ar-scale)) calc(8px * 1.15 * var(--ar-scale));
  border-radius: calc(6px * var(--ar-scale));
  box-shadow:none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align:center;
}
.araneum-label.style-rounded, .araneum-badge.style-rounded { border-radius: 9999px; }
.araneum-label.style-shadow, .araneum-badge.style-shadow { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.araneum-label.style-rounded_shadow, .araneum-badge.style-rounded_shadow { border-radius: 9999px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }

/* Overlay on image */
.araneum-image-badges { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index: 9999; }
.araneum-badge.pos-top_left { position:absolute; top:10px; left:10px; }
.araneum-badge.pos-top_right { position:absolute; top:10px; right:10px; }
.araneum-badge.pos-bottom_left { position:absolute; bottom:10px; left:10px; }
.araneum-badge.pos-bottom_right { position:absolute; bottom:10px; right:10px; }
/* Stacking gap */
.araneum-badge + .araneum-badge{ margin-top:6px; }

/* Per-label size modifiers */
.s-small { --ar-scale: 0.90 !important; }
.s-medium { --ar-scale: 1.15 !important; }
.s-large { --ar-scale: 1.35 !important; }

/* Responsive scaling */
@media (max-width: 1024px){
  .araneum-label, .araneum-badge { font-size: 0.95rem !important; padding: 4px 8px !important; }
}
@media (max-width: 768px){
  .araneum-label, .araneum-badge { font-size: 0.9rem !important; padding: 3px 7px !important; }
  .araneum-badge + .araneum-badge{ margin-top:6px; }
}
@media (max-width: 480px){
  .araneum-label, .araneum-badge { font-size: 0.84rem !important; padding: 3px 6px !important; }
  .araneum-badge + .araneum-badge{ margin-top:6px; }
}
@media (max-width: 360px){
  .araneum-label, .araneum-badge { font-size: 0.78rem !important; padding: 2px 5px !important; }
  .araneum-badge + .araneum-badge{ margin-top:6px; }
}

/* Cross-browser safety */
.products li.product .box-image { position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); }

/* ── Loop badges: hidden until JS moves them into the image box ──────────── */
/* Using !important here is intentional — we override it via JS style.setProperty */
.products li.product .araneum-image-badges,
.products .product-small .araneum-image-badges,
.products .type-product .araneum-image-badges,
.products .product .araneum-image-badges,
.wc-block-grid__product .araneum-image-badges,
.product-grid-item .araneum-image-badges { display: none; }

/* Common theme image wrappers get position:relative so the overlay works */
.araneum-pl-imagewrap,
.products li.product .box-image,
.products li.product .product-thumbnail,
.products li.product .woocommerce-product-thumbnail,
.products li.product .wc-block-grid__product-image,
.products li.product .product-image,
.products li.product .thumbnail-wrapper,
.products li.product .product-loop-thumbnail { position: relative !important; }



/* Stacking containers for on-image badges */
.araneum-image-badges{ position:absolute; inset:0; pointer-events:none; z-index:1001; }
.araneum-image-badges .araneum-stack{ position:absolute; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.araneum-image-badges .araneum-stack.top_left{ top:10px; left:10px; }
.araneum-image-badges .araneum-stack.top_right{ top:10px; right:10px; align-items:flex-end; }
.araneum-image-badges .araneum-stack.bottom_left{ bottom:10px; left:10px; flex-direction:column-reverse; }
.araneum-image-badges .araneum-stack.bottom_right{ bottom:10px; right:10px; align-items:flex-end; flex-direction:column-reverse; }
/* When inside a stack, badges are static and spaced by the stack gap */
.araneum-image-badges .araneum-stack .araneum-badge{ position:static !important; margin:0 !important; }

.araneum-image-badges .araneum-stack .araneum-badge{ position:static !important; margin:0 !important; }
.araneum-image-badges .araneum-stack .araneum-badge{ position:static !important; margin:0 !important; }

/* Ensure above-title labels scale identical to on-image */
.araneum-title-labels .araneum-label{
  font-size: calc(12px * 1.15 * var(--ar-scale));
  padding: calc(4px * 1.15 * var(--ar-scale)) calc(8px * 1.15 * var(--ar-scale));
  border-radius: calc(6px * var(--ar-scale));
}

.s-small{ --ar-scale:0.90 !important; }
.s-medium{ --ar-scale:1.15 !important; }
.s-large{ --ar-scale:1.35 !important; }


/* === AR STEP 2: Above-title labels identical to on-image (side-by-side with gap) === */

/* Container: οριζόντια, με μικρό κενό, τυλίγονται όταν χρειάζεται */
.araneum-title-labels{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px 0 !important;
}

/* Κουμπί: ίδια βάση με τα badges επάνω στην εικόνα */
.araneum-title-labels .araneum-label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  padding: 6px 10px !important; /* default = medium */
  text-decoration: none !important;
}

/* Μεγέθη S/M/L – ακριβώς ίδια με τα on-image badges */
.araneum-title-labels .araneum-label.s-small{  font-size:13px !important; padding:5px 9px !important;  border-radius:6px !important; }
.araneum-title-labels .araneum-label.s-medium{ font-size:14px !important; padding:6px 10px !important; border-radius:6px !important; }
.araneum-title-labels .araneum-label.s-large{  font-size:16px !important; padding:7px 12px !important; border-radius:7px !important; }

/* Όταν λείπει size-class → medium για συνέπεια */
.araneum-title-labels .araneum-label:not(.s-small):not(.s-medium):not(.s-large){
  font-size:14px !important; padding:6px 10px !important; border-radius:6px !important;
}

/* Εξουδετέρωση parent font-scaling σε λίστα & single */
.products .araneum-title-labels,
.product .araneum-title-labels{ font-size: 0 !important; }
.products .araneum-title-labels > *,
.product .araneum-title-labels > *{ font-size: initial !important; }


/* === AR STEP 3: Cross‑browser consistency (Safari/Firefox fallbacks) === */
:root{ --ar-gap: 6px; }

/* Font rendering consistency */
.araneum-label, .araneum-badge{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: inherit;
  min-width: 0; /* avoid flex overflow differences */
}

/* Use var gap */
#araneum-single-badges,
.araneum-image-badges-single{ gap: var(--ar-gap) !important; }
.araneum-title-labels{ gap: var(--ar-gap) !important; }

/* Fallback when flex gap is not supported (older Safari): use margins */
@supports not (gap: 1rem) {
  /* Overlay (vertical stack) */
  #araneum-single-badges .araneum-badge + .araneum-badge,
  .araneum-image-badges-single .araneum-badge + .araneum-badge{
    margin-top: var(--ar-gap) !important;
  }

  /* Above‑title (row, wraps) */
  .araneum-title-labels .araneum-label{
    margin: 0 var(--ar-gap) var(--ar-gap) 0 !important;
  }
  .araneum-title-labels .araneum-label:last-child{
    margin-right: 0 !important;
  }
}

/* Ensure inline-flex behaves same across browsers */
.araneum-title-labels .araneum-label,
#araneum-single-badges .araneum-badge,
.araneum-image-badges-single .araneum-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Avoid inheritance issues inside headings/links */
.araneum-title-labels { font-size: 0 !important; }
.araneum-title-labels > * { font-size: initial !important; }

/* Prevent odd letter-spacing changes on Safari zoom */
.araneum-title-labels .araneum-label,
.araneum-image-badges .araneum-badge{
  letter-spacing: normal;
  text-transform: none;
}

/*!
 * Fix: Above-title labels mirror on-image sizes (STEP3)
 * Scope: Only affects .araneum-title-labels .araneum-label
 * Rationale: Revert title-label sizing to the same variable-based geometry the badges use.
 * Cross-browser: No vendor-specific features needed; pure sizing.
 */

/* Base geometry for above-title, using the same var formula as badges */
.araneum-title-labels .araneum-label{
  font-size: calc(12px * 1.15 * var(--ar-scale)) !important;
  padding: calc(4px * 1.15 * var(--ar-scale)) calc(8px * 1.15 * var(--ar-scale)) !important;
  border-radius: calc(6px * var(--ar-scale)) !important;
}

/* Ensure s-* variants follow the exact same mapping via --ar-scale */
.araneum-title-labels .araneum-label.s-small,
.araneum-title-labels .araneum-label.s-medium,
.araneum-title-labels .araneum-label.s-large{
  font-size: calc(12px * 1.15 * var(--ar-scale)) !important;
  padding: calc(4px * 1.15 * var(--ar-scale)) calc(8px * 1.15 * var(--ar-scale)) !important;
  border-radius: calc(6px * var(--ar-scale)) !important;
}

/* Do NOT touch .araneum-image-badges rules — on-image stays exactly as the plugin defines. */


/* === Araneum: Robust image overlay positioning (catalog + single) === */
.araneum-pl-imagewrap{ position:relative; display:block; overflow:visible; }

/* Common theme image wrappers – ensure they are positioning contexts */
.products li.product .box-image,
.products li.product .product-thumbnail,
.products li.product .woocommerce-product-thumbnail,
.products li.product .wc-block-grid__product-image,
.products li.product .araneum-pl-imagewrap,
.products .product-small .box-image,
.products .product-small .product-image,
.products .product-small .araneum-pl-imagewrap,
.products .type-product .box-image,
.products .type-product .product-image,
.products .type-product .araneum-pl-imagewrap{
  position: relative !important;
}

/* Make sure the overlay covers ONLY its immediate image wrapper */
.araneum-pl-imagewrap > .araneum-image-badges,
.products li.product .box-image > .araneum-image-badges,
.products .product-small .box-image > .araneum-image-badges,
.products .product-small .product-image > .araneum-image-badges,
.products .type-product .box-image > .araneum-image-badges,
.products .type-product .product-image > .araneum-image-badges,
.woocommerce-product-gallery__wrapper > .araneum-image-badges,
.woocommerce-product-gallery > .araneum-image-badges{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  pointer-events:none;
  z-index:1001;
}

/* Single product: don't force badges to top-left only; respect corner positions */
.single-product #araneum-single-badges{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  pointer-events:none;
  z-index:1001;
}

/* Below-title spacing (single + loop) */
.araneum-title-labels.araneum-below-title{
  margin-top:6px !important;
  margin-bottom:8px !important;
}


/* ── Stacking context isolation: εμποδίζει τα badges να "ξεφύγουν" πάνω από
 * mega menu dropdowns. Με isolation:isolate το z-index του badge ισχύει
 * ΜΟΝΟ μέσα στο image box και δεν ανταγωνίζεται το z-index του mega menu.
 * Ισχύει τόσο για loop/shop cards όσο και για το single product gallery.
 * ──────────────────────────────────────────────────────────────────────────── */

/* Shop / loop product cards */
.araneum-pl-imagewrap,
.products li.product .box-image,
.products .product-small .box-image,
.products .product-small .product-image,
.products .type-product .box-image,
.products .type-product .product-image,
.products li.product .woocommerce-product-thumbnail,
.products li.product .wc-block-grid__product-image,
.products li.product .product-thumbnail {
    isolation: isolate;
}

/* Single product gallery — same fix, prevents badge from floating above mega menu */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .images,
.single-product .product-gallery,
.single-product .product-gallery-slider,
.single-product .product-images {
    isolation: isolate;
}