/* Saadi Elementor Shop Grid v1.0.14 */
:root{
  --esg-card-default:#fff;
  --esg-card-bg:#fff;
  --esg-card-bg-hover:#fff;
  --esg-card-radius:20px;
  --esg-muted:#6b7280;
  --esg-border:#e5e7eb;
  --esg-star:#f59e0b;
  --esg-accent:#16a34a;
  --esg-cream:#faf7f2;

  /* compact button sizing and calc */
  --esg-compact-radius:12px;
  --esg-compact-font-size:14px;
  --esg-compact-pad-v:10px;
  --esg-compact-pad-h:16px;
  --esg-compact-border-w:1px;
  --esg-compact-gap:10px;   /* bottom gap */
  --esg-compact-gap-x:24px; /* side gap */
  --esg-compact-max-w:360px;
  --esg-compact-line: calc(var(--esg-compact-font-size) * 1.35);
  --esg-compact-strip-h: calc(var(--esg-compact-line) + (var(--esg-compact-pad-v) * 2) + (var(--esg-compact-border-w) * 2));

  /* primary button */
  --esg-primary-font-size:16px;
  --esg-primary-pad-v:12px;
  --esg-primary-pad-h:14px;

  --esg-overlay-space:84px;

  /* image sizing */
  --esg-img-max-w: 100%;
  --esg-img-max-h: 100%;
}

.saadi-esg-wrapper{ --esg-row-gap:24px; --esg-col-gap:24px; }
.saadi-esg-wrapper .esg-grid{
  display:grid;
  grid-template-columns:repeat(var(--esg-col-desktop,4),minmax(0,1fr));
  gap:var(--esg-row-gap) var(--esg-col-gap);
}
@media (max-width:1024px){
  .saadi-esg-wrapper .esg-grid{ grid-template-columns:repeat(var(--esg-col-tablet,2),minmax(0,1fr)); }
}
@media (max-width:767px){
  .saadi-esg-wrapper .esg-grid{ grid-template-columns:repeat(var(--esg-col-mobile,1),minmax(0,1fr)); }
}

/* Card */
.esg-card{
  background:var(--esg-card-bg, var(--esg-card-default, #fff));
  border-radius:var(--esg-card-radius);
  border:1px solid var(--esg-border);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, background .2s;
  display:flex; flex-direction:column; min-height:100%;
}
.esg-card:hover{ background:var(--esg-card-bg-hover, var(--esg-card-bg)); transform:translateY(-2px); }
.esg-card .esg-media{ position:relative; padding:28px; display:grid; place-items:center; background:linear-gradient(180deg,#f7f9fb,#f0f4f8); }
.preset-minimal .esg-card .esg-media{
  background:var(--esg-cream);
  padding-bottom:max(clamp(72px, var(--esg-overlay-space, 84px), 220px), calc(var(--esg-compact-strip-h) + var(--esg-compact-gap)));
  overflow:visible;
}
.esg-img{ max-width: var(--esg-img-max-w, 100%); max-height: var(--esg-img-max-h, 100%); width:auto; height:auto; display:block; }

/* Labels & badge (bundle) */
.esg-pack{ position:absolute; top:10px; left:14px; background:#f3f4f6; color:#111827; font-size:12px; padding:6px 10px; border-radius:999px; }
.esg-badge{ position:absolute; top:10px; right:14px; background:var(--esg-accent); color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; }
/* Hide via wrapper flags */
.saadi-esg-wrapper.hide-pack .esg-pack{ display:none !important; }
.saadi-esg-wrapper.hide-badge .esg-badge{ display:none !important; }

/* Body */
.esg-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; }
.esg-title{ margin:0; font-size:18px; line-height:1.2; } .esg-title a{ color:inherit; text-decoration:none; }
.esg-rating{ display:flex; align-items:center; gap:6px; color:var(--esg-muted); font-size:13px; }
.esg-rating .star-rating span::before, .esg-rating .star-rating::before{ color:var(--esg-star)!important; }

/* Buttons (shared & primary) */
.esg-btn{
  border:1px solid var(--esg-border);
  background:var(--esg-primary-bg,#111827);
  color:var(--esg-primary-color,#fff);
  padding:var(--esg-primary-pad-v) var(--esg-primary-pad-h);
  font-size:var(--esg-primary-font-size);
  width:100%;
  border-radius:12px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.esg-btn:hover{ filter:brightness(1.03); background:var(--esg-primary-bg-hover,var(--esg-primary-bg,#111827)); color:var(--esg-primary-color-hover,var(--esg-primary-color,#fff)); border-color:var(--esg-primary-border,var(--esg-border)); }
.esg-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Compact overlay strip */
.esg-btn-compact{
  background:var(--esg-compact-bg,#fff);
  color:var(--esg-compact-color,#111827);
  border-radius:var(--esg-compact-radius);
  padding:var(--esg-compact-pad-v) var(--esg-compact-pad-h);
  border:1px solid var(--esg-compact-border,var(--esg-border));
  font-size:var(--esg-compact-font-size);
  display:flex; align-items:center; justify-content:space-between; gap:14px; line-height:1;
}
.esg-btn-compact .esg-btn-label, .esg-btn-compact .esg-price{ white-space:nowrap; }
.esg-on-image{
  position:absolute;
  left:var(--esg-compact-gap-x,24px);
  right:var(--esg-compact-gap-x,24px);
  bottom:var(--esg-compact-gap,16px);
  z-index:3;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
/* Overlay width controls */
.saadi-esg-wrapper.overlay-narrow .esg-on-image{ width:auto; max-width: var(--esg-compact-max-w, 360px); }
.saadi-esg-wrapper.overlay-narrow.overlay-al-left .esg-on-image{ left: var(--esg-compact-gap-x,24px); right:auto; transform:none; }
.saadi-esg-wrapper.overlay-narrow.overlay-al-right .esg-on-image{ right: var(--esg-compact-gap-x,24px); left:auto; transform:none; }
.saadi-esg-wrapper.overlay-narrow.overlay-al-center .esg-on-image{ left:50%; right:auto; transform:translateX(-50%); }

.esg-on-image:hover{ background:var(--esg-compact-bg-hover,var(--esg-compact-bg,#fff)); color:var(--esg-compact-color-hover,var(--esg-compact-color,#111827)); }
.esg-on-image .esg-price{ color:var(--esg-compact-price-color, inherit); }
.esg-price{ font-weight:700; }
.esg-cta{ margin-top:6px; }
.esg-load-more{ margin-top:18px; }

/* Align helpers */
.saadi-esg-wrapper.align-center .esg-body{ text-align:center; align-items:center; }
.saadi-esg-wrapper.align-center .esg-rating{ justify-content:center; }
.saadi-esg-wrapper.align-right .esg-body{ text-align:right; align-items:flex-end; }
.saadi-esg-wrapper.align-right .esg-rating{ justify-content:flex-end; }

/* Toast */
.esg-toast{ position:fixed; bottom:20px; right:20px; background:#111827; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; transform:translateY(10px); pointer-events:none; transition:all .2s; z-index:99; }
.esg-toast.show{ opacity:1; transform:translateY(0); }

/* Preset defaults */
.saadi-esg-wrapper.preset-bundle{ --esg-card-default:#fff; }
.saadi-esg-wrapper.preset-minimal{ --esg-card-default: var(--esg-cream); }
.esg-btn:focus-visible{ outline:2px solid var(--esg-accent); outline-offset:2px; }