/* ==========================================================================
   Ecodle Product Configurator
   Tokens from Ecodle-product-step.fig
   bg #0C0A08 · panel #450000 · gold #D2A32F · gold-dim #B4792F
   Playfair Display (display) + Poppins (UI)

   Every rule is scoped to #ecodle-configurator so theme / Elementor button
   styles cannot win on specificity.
   ========================================================================== */

#ecodle-configurator{
  --ecodle-bg:#0c0a08;
  --ecodle-panel:#450000;
  --ecodle-card:#000;
  --ecodle-card-2:#21201e;
  --ecodle-gold:#d2a32f;
  --ecodle-gold-dim:#b4792f;
  --ecodle-line:#333232;
  --ecodle-line-2:#4c4949;
  --ecodle-muted:#807f7c;
  --ecodle-text:#fff;
  --ecodle-text-dim:rgba(255,255,255,.72);
  --ecodle-green:#06bf4d;
  --ecodle-r-card:10px;
  --ecodle-r-btn:8px;

  background:var(--ecodle-bg);
  color:var(--ecodle-text);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  padding:48px 24px 64px;
  max-width:100%;
  overflow-x:hidden;
}
#ecodle-configurator *,
#ecodle-configurator *:before,
#ecodle-configurator *:after{ box-sizing:border-box; }

/* Neutralise theme button/list styling inside the configurator */
#ecodle-configurator button{
  margin:0; font-family:inherit; font-size:inherit; line-height:inherit;
  letter-spacing:normal; text-transform:none; white-space:normal;
  min-width:0; width:auto; box-shadow:none; text-shadow:none;
  background-image:none; border-radius:0;
}
#ecodle-configurator button:hover,
#ecodle-configurator button:focus{ box-shadow:none; text-decoration:none; }
#ecodle-configurator ul{ list-style:none; margin:0; padding:0; }
#ecodle-configurator img{ max-width:100%; height:auto; }
#ecodle-configurator p{ margin:0 0 12px; }
#ecodle-configurator h2,
#ecodle-configurator h3{
  font-family:'Playfair Display',Georgia,serif; font-weight:400;
  margin:0; padding:0; color:var(--ecodle-text); text-transform:none; letter-spacing:normal;
}
#ecodle-configurator :focus-visible{ outline:2px solid var(--ecodle-gold); outline-offset:3px; }

/* ── Product selector ─────────────────────────────────────── */
#ecodle-configurator .ecodle-selector-header{ text-align:center; max-width:640px; margin:0 auto 40px; }
#ecodle-configurator .ecodle-heading{ font-size:40px; line-height:1.2; margin-bottom:10px; }
#ecodle-configurator .ecodle-subheading{ color:var(--ecodle-text-dim); font-size:18px; margin:0; }
#ecodle-configurator .ecodle-product-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px; max-width:1170px; margin:0 auto;
}
#ecodle-configurator .ecodle-product-card{
  min-width:0; background:var(--ecodle-card); border:1px solid var(--ecodle-line);
  border-radius:var(--ecodle-r-card); padding:20px; text-align:center;
  transition:border-color .25s ease, transform .25s ease;
}
#ecodle-configurator .ecodle-product-card:hover{ border-color:var(--ecodle-gold-dim); transform:translateY(-3px); }
#ecodle-configurator .ecodle-product-card__media{
  height:150px; border-radius:8px; margin-bottom:16px;
  background:#151311 center/cover no-repeat;
}
#ecodle-configurator .ecodle-product-card__name{ font-family:'Playfair Display',Georgia,serif; font-size:20px; margin:0 0 6px; }
#ecodle-configurator .ecodle-product-card__desc{ color:var(--ecodle-text-dim); font-size:13px; margin:0 0 12px; min-height:40px; }
#ecodle-configurator .ecodle-product-card__price{ color:var(--ecodle-gold); font-size:14px; font-weight:600; margin-bottom:16px; }

/* ── Progress ─────────────────────────────────────────────── */
#ecodle-configurator .ecodle-progress-bar{
  max-width:1170px; margin:0 auto 26px; padding-bottom:22px;
  border-bottom:1px solid var(--ecodle-gold-dim);
}
#ecodle-configurator .ecodle-progress-bar__inner{
  display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:0;
}
#ecodle-configurator .ecodle-progress-step{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:0; padding:0 4px; cursor:default; flex:0 0 auto; width:100px;
}
#ecodle-configurator .ecodle-progress-step.done{ cursor:pointer; }
#ecodle-configurator .ecodle-progress-step__dot{
  width:47px; height:47px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ecodle-panel); border:1px solid var(--ecodle-muted);
  color:var(--ecodle-text); font-size:20px; font-weight:500; transition:all .25s ease;
}
#ecodle-configurator .ecodle-progress-step.active .ecodle-progress-step__dot{
  background:var(--ecodle-gold); border-color:var(--ecodle-gold); color:#1a1200;
}
#ecodle-configurator .ecodle-progress-step.done .ecodle-progress-step__dot{
  background:var(--ecodle-gold-dim); border-color:var(--ecodle-gold-dim); color:#1a1200;
}
#ecodle-configurator .ecodle-progress-step__label{
  font-size:15px; color:var(--ecodle-text); opacity:.75; text-align:center; line-height:1.3;
}
#ecodle-configurator .ecodle-progress-step.active .ecodle-progress-step__label{ opacity:1; font-weight:500; }
#ecodle-configurator .ecodle-progress-line{
  flex:1 1 20px; max-width:123px; height:1px; background:var(--ecodle-muted); margin-top:23px;
}
#ecodle-configurator .ecodle-progress-line.done{ background:var(--ecodle-gold-dim); }

/* ── Layout ───────────────────────────────────────────────── */
#ecodle-configurator .ecodle-layout{
  display:grid; grid-template-columns:minmax(0,469px) minmax(0,1fr); gap:45px;
  max-width:1170px; margin:0 auto; align-items:start;
}
#ecodle-configurator .ecodle-preview-panel,
#ecodle-configurator .ecodle-steps-panel{ min-width:0; max-width:100%; }

/* ── Live preview ─────────────────────────────────────────── */
#ecodle-configurator .ecodle-preview-panel{ position:sticky; top:24px; }
#ecodle-configurator .ecodle-preview-card{
  background:var(--ecodle-panel); border:1px solid var(--ecodle-gold-dim);
  border-radius:var(--ecodle-r-card); padding:18px;
}
#ecodle-configurator .ecodle-preview-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
#ecodle-configurator .ecodle-preview-badge{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ecodle-gold); font-size:14px; font-weight:500; letter-spacing:.08em;
}
#ecodle-configurator .ecodle-dot{
  width:6px; height:6px; border-radius:50%; background:var(--ecodle-green); flex:0 0 6px;
  box-shadow:0 0 0 0 rgba(6,191,77,.6); animation:ecodlePulse 2s infinite;
}
@keyframes ecodlePulse{ 70%{ box-shadow:0 0 0 7px rgba(6,191,77,0); } 100%{ box-shadow:0 0 0 0 rgba(6,191,77,0); } }
#ecodle-configurator .ecodle-preview-realtime{ color:var(--ecodle-gold); font-size:13px; opacity:.85; }

#ecodle-configurator .ecodle-preview-stage{
  position:relative; aspect-ratio:469/395; width:100%;
  border:1px solid var(--ecodle-gold-dim); border-radius:var(--ecodle-r-card);
  background:#0c0a08; overflow:hidden;
}
#ecodle-configurator .ecodle-layer{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; animation:ecodleFade .45s ease forwards; max-width:none;
}
#ecodle-configurator .ecodle-layer--art{
  inset:auto; left:27%; top:38%; width:46%; height:26%;
  object-fit:cover; border-radius:2px; mix-blend-mode:screen; opacity:.9; animation:none;
}
@keyframes ecodleFade{ to{ opacity:1; } }
#ecodle-configurator .ecodle-preview-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center;
}
#ecodle-configurator .ecodle-preview-empty__mark{
  width:44px; height:44px; border:1px solid var(--ecodle-gold-dim); border-radius:50%; position:relative;
}
#ecodle-configurator .ecodle-preview-empty__mark:after{
  content:""; position:absolute; inset:14px; border:1px solid var(--ecodle-gold-dim); border-radius:50%;
}
#ecodle-configurator .ecodle-preview-empty__text{ color:var(--ecodle-text-dim); font-size:13px; max-width:220px; }

#ecodle-configurator .ecodle-preview-tools{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:16px 0 18px;
}
#ecodle-configurator .ecodle-pill{
  background:#000; border:1px solid var(--ecodle-gold-dim); border-radius:30px;
  color:var(--ecodle-gold); font-size:15px; padding:10px 22px; cursor:pointer;
  transition:background .2s ease;
}
#ecodle-configurator .ecodle-pill:hover{ background:#1a1206; }
#ecodle-configurator .ecodle-preview-label{ color:var(--ecodle-text-dim); font-size:13px; }

/* Current selection */
#ecodle-configurator .ecodle-selection{
  border:1px solid var(--ecodle-gold-dim); border-radius:var(--ecodle-r-card);
  padding:16px 18px; margin-bottom:12px; background:rgba(0,0,0,.18);
}
#ecodle-configurator .ecodle-selection__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
#ecodle-configurator .ecodle-selection__head h3{ font-size:17px; }
#ecodle-configurator .ecodle-selection__item{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:5px 0; font-size:14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06);
}
#ecodle-configurator .ecodle-selection__item:last-child{ border-bottom:0; }
#ecodle-configurator .ecodle-selection__item:hover .ecodle-selection__val{ color:var(--ecodle-gold); }
#ecodle-configurator .ecodle-selection__key{ color:var(--ecodle-text-dim); }
#ecodle-configurator .ecodle-selection__val{ font-weight:500; text-align:right; transition:color .2s ease; }
#ecodle-configurator .ecodle-selection__empty{ color:var(--ecodle-text-dim); font-size:13px; font-style:italic; }
#ecodle-configurator .ecodle-link{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--ecodle-gold); font-size:15px; font-family:inherit;
}
#ecodle-configurator .ecodle-link:hover{ text-decoration:underline; }
#ecodle-configurator .ecodle-link--strong{ font-weight:700; }

/* Total */
#ecodle-configurator .ecodle-total{
  border:1px solid var(--ecodle-gold-dim); border-radius:var(--ecodle-r-card); padding:14px 18px;
}
#ecodle-configurator .ecodle-total__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#ecodle-configurator .ecodle-total__label{ font-size:14px; color:var(--ecodle-text-dim); }
#ecodle-configurator .ecodle-total__amount{ font-family:'Playfair Display',Georgia,serif; font-size:32px; }
#ecodle-configurator .ecodle-total__save{ color:var(--ecodle-gold); font-size:14px; text-align:right; margin-top:2px; }

#ecodle-configurator .ecodle-actions-side{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
#ecodle-configurator .ecodle-secure{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:16px 0 0; font-size:13px; font-weight:500; color:var(--ecodle-text-dim);
}
#ecodle-configurator .ecodle-secure__icon{
  width:16px; height:19px; flex:0 0 16px; background:var(--ecodle-gold);
  clip-path:polygon(50% 0,100% 22%,100% 60%,50% 100%,0 60%,0 22%);
}

/* ── Steps panel ──────────────────────────────────────────── */
#ecodle-configurator .ecodle-step-header__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;
}
#ecodle-configurator .ecodle-step-badge{
  display:inline-flex; align-items:center; background:var(--ecodle-gold); color:#1a1200;
  border-radius:6px; padding:4px 14px; font-size:13px; font-weight:500;
}
#ecodle-configurator .ecodle-step-title{ font-size:40px; line-height:1.15; margin-bottom:8px; }
#ecodle-configurator .ecodle-step-subtitle{ color:var(--ecodle-text-dim); font-size:18px; margin:0 0 20px; }
#ecodle-configurator .ecodle-rule{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
#ecodle-configurator .ecodle-rule:before,
#ecodle-configurator .ecodle-rule:after{ content:""; flex:1; height:2px; background:var(--ecodle-gold-dim); }
#ecodle-configurator .ecodle-rule__mark{
  width:14px; height:14px; flex:0 0 14px; background:var(--ecodle-gold-dim);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}

#ecodle-configurator .ecodle-step-content{ min-width:0; max-width:100%; }
#ecodle-configurator .ecodle-field{ margin-bottom:28px; min-width:0; max-width:100%; }
#ecodle-configurator .ecodle-field--hidden{ display:none; }
#ecodle-configurator .ecodle-field__label{ display:block; font-size:18px; margin-bottom:12px; color:var(--ecodle-text); }
#ecodle-configurator .ecodle-field--error{ animation:ecodleShake .4s ease; }
@keyframes ecodleShake{ 25%{ transform:translateX(-5px);} 75%{ transform:translateX(5px);} }
#ecodle-configurator .ecodle-field--error .ecodle-option{ border-color:#c0392b; }

/* Shared option card */
#ecodle-configurator .ecodle-option{
  position:relative; display:flex; flex-direction:column; align-items:stretch; gap:6px;
  min-width:0; width:100%; background:var(--ecodle-card); border:2px solid var(--ecodle-line);
  border-radius:var(--ecodle-r-card); padding:10px; cursor:pointer; text-align:left;
  color:var(--ecodle-text); overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
#ecodle-configurator .ecodle-option:hover{ border-color:var(--ecodle-gold-dim); transform:translateY(-2px); }
#ecodle-configurator .ecodle-option.is-selected{ border-color:var(--ecodle-gold); }
#ecodle-configurator .ecodle-option.is-selected:before,
#ecodle-configurator .ecodle-multi-item.is-selected:before{
  content:"\2713"; position:absolute; top:6px; right:6px; z-index:3;
  width:22px; height:22px; border-radius:50%;
  background:var(--ecodle-gold); color:#fff;
  font-size:12px; line-height:22px; text-align:center; font-weight:700;
}
#ecodle-configurator .ecodle-option span{ min-width:0; }
#ecodle-configurator .ecodle-tag{
  align-self:flex-start; font-size:11px; line-height:1.5; letter-spacing:.04em;
  color:var(--ecodle-gold); border:1px solid var(--ecodle-gold-dim);
  border-radius:20px; padding:1px 9px; white-space:nowrap;
}
#ecodle-configurator .ecodle-tag--free{
  color:var(--ecodle-text-dim); border-color:transparent; padding-left:0;
}

/* Colour / finish swatches — 89x131 in the design */
#ecodle-configurator .ecodle-swatch-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:10px;
}
#ecodle-configurator .ecodle-swatch{ padding:0; gap:0; }
#ecodle-configurator .ecodle-swatch__media{
  display:block; width:100%; height:92px; background:#141210 center/cover no-repeat;
}
#ecodle-configurator .ecodle-swatch__media.has-photo{ position:relative; }
#ecodle-configurator .ecodle-swatch__media.has-photo:after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.75));
}
#ecodle-configurator .ecodle-swatch__label{
  display:block; font-size:13px; line-height:1.3;
  color:var(--ecodle-text); word-break:break-word;
}
#ecodle-configurator .ecodle-swatch__label{ padding:8px; }
#ecodle-configurator .ecodle-swatch .ecodle-tag{ margin:0 8px 8px; }

/* Size cards */
#ecodle-configurator .ecodle-size-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px;
}
#ecodle-configurator .ecodle-size{ padding:16px; gap:2px; }
#ecodle-configurator .ecodle-size__media{
  display:block; height:56px; border-radius:6px; background:#141210 center/cover no-repeat; margin-bottom:8px;
}
#ecodle-configurator .ecodle-size__letter{
  display:block; font-family:'Playfair Display',Georgia,serif; font-size:24px; line-height:1.2;
}
#ecodle-configurator .ecodle-size__desc{ display:block; font-size:14px; color:var(--ecodle-text-dim); }
#ecodle-configurator .ecodle-size .ecodle-tag{ margin-top:8px; }

/* Card select */
#ecodle-configurator .ecodle-card-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px;
}
#ecodle-configurator .ecodle-card{ padding:14px; }
#ecodle-configurator .ecodle-card__media{
  display:block; height:118px; border-radius:8px;
  background:#141210 center/cover no-repeat; margin-bottom:10px;
}
#ecodle-configurator .ecodle-card__icon{ display:block; font-size:26px; line-height:1; margin-bottom:6px; }
#ecodle-configurator .ecodle-card__name{
  display:block; font-family:'Playfair Display',Georgia,serif; font-size:17px; line-height:1.3;
}
#ecodle-configurator .ecodle-card__desc{
  display:block; font-size:13px; line-height:1.5; color:rgba(255,255,255,.82);
}
#ecodle-configurator .ecodle-card__foot{
  display:block; margin-top:auto; padding-top:10px;
  border-top:1px solid var(--ecodle-line-2);
}
#ecodle-configurator .ecodle-card__foot:empty{ display:none; }

/* Scent cards — 164x158 with a 73px photo strip */
#ecodle-configurator .ecodle-scent-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;
}
#ecodle-configurator .ecodle-scent{ background:var(--ecodle-card-2); border-width:1px; padding:0; gap:0; }
#ecodle-configurator .ecodle-scent__media{ display:block; width:100%; height:73px; background-size:cover; background-position:center; }
#ecodle-configurator .ecodle-scent__name{
  display:block; font-family:'Playfair Display',Georgia,serif; font-weight:600;
  font-size:14px; padding:8px 10px 0; line-height:1.3;
}
#ecodle-configurator .ecodle-scent__mood{ display:block; font-size:12px; color:var(--ecodle-text-dim); padding:2px 10px 10px; }
#ecodle-configurator .ecodle-scent .ecodle-tag{ margin:0 10px 10px; }

/* Multi select */
#ecodle-configurator .ecodle-multi-hint{ font-size:13px; color:var(--ecodle-text-dim); margin:0 0 10px; }
#ecodle-configurator .ecodle-multi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;
}
#ecodle-configurator .ecodle-multi-item{
  position:relative; display:flex; flex-direction:column; gap:4px; min-width:0;
  background:var(--ecodle-card); border:2px solid var(--ecodle-line);
  border-radius:var(--ecodle-r-card); padding:14px; cursor:pointer; overflow:hidden;
}
#ecodle-configurator .ecodle-multi-item.is-selected{ border-color:var(--ecodle-gold); }
#ecodle-configurator .ecodle-multi-item input{ position:absolute; opacity:0; pointer-events:none; }
#ecodle-configurator .ecodle-multi-item__media{
  display:block; height:80px; border-radius:6px; background:#141210 center/cover no-repeat; margin-bottom:8px;
}
#ecodle-configurator .ecodle-multi-item__label{ display:block; font-size:15px; font-weight:500; }
#ecodle-configurator .ecodle-multi-item__desc{ display:block; font-size:13px; color:var(--ecodle-gold); }

/* Text + file inputs */
#ecodle-configurator .ecodle-text-input,
#ecodle-configurator .ecodle-textarea{
  width:100%; background:#000; border:1px solid var(--ecodle-line);
  border-radius:var(--ecodle-r-btn); color:var(--ecodle-text);
  padding:12px 14px; font-size:15px; font-family:inherit;
}
#ecodle-configurator .ecodle-textarea{ min-height:110px; resize:vertical; }
#ecodle-configurator .ecodle-text-input:focus,
#ecodle-configurator .ecodle-textarea:focus{ border-color:var(--ecodle-gold); outline:none; }
#ecodle-configurator .ecodle-file-upload{
  border:1px dashed var(--ecodle-gold-dim); border-radius:var(--ecodle-r-card);
  padding:22px; text-align:center; background:rgba(210,163,47,.04);
}
#ecodle-configurator .ecodle-file-btn{
  display:inline-block; border:1px solid var(--ecodle-gold); border-radius:30px;
  color:var(--ecodle-gold); padding:9px 22px; font-size:14px; cursor:pointer;
}
#ecodle-configurator .ecodle-file-hint{ font-size:12px; color:var(--ecodle-text-dim); margin-top:8px; }
#ecodle-configurator .ecodle-file-chosen{ font-size:13px; color:var(--ecodle-gold); margin-top:10px; }
#ecodle-configurator .ecodle-file-thumb{ margin:10px auto 0 !important; border-color:var(--ecodle-gold) !important; }

/* ── Buttons ──────────────────────────────────────────────── */
#ecodle-configurator .ecodle-step-nav{ display:flex; gap:12px; align-items:center; margin-top:32px; flex-wrap:wrap; }
#ecodle-configurator .ecodle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--ecodle-r-btn); border:1px solid transparent;
  padding:13px 30px; font-size:16px; font-weight:500; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
#ecodle-configurator .ecodle-btn--primary,
#ecodle-configurator .ecodle-btn--cta{ background:var(--ecodle-gold); color:#fff; }
#ecodle-configurator .ecodle-btn--primary:hover,
#ecodle-configurator .ecodle-btn--cta:hover{ background:#e0b23c; color:#fff; }
#ecodle-configurator .ecodle-btn--cta{ margin-left:auto; }
#ecodle-configurator .ecodle-btn--ghost{ background:transparent; border-color:var(--ecodle-gold); color:var(--ecodle-gold); }
#ecodle-configurator .ecodle-btn--ghost:hover{ background:rgba(210,163,47,.12); }
#ecodle-configurator .ecodle-btn--sm{ padding:9px 18px; font-size:14px; }
#ecodle-configurator .ecodle-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* ── Step transitions ─────────────────────────────────────── */
#ecodle-configurator .ecodle-step--exit{ opacity:0; transform:translateY(8px); transition:all .15s ease; }
#ecodle-configurator .ecodle-step--enter{ animation:ecodleEnter .3s ease; }
@keyframes ecodleEnter{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

/* ── Modals ───────────────────────────────────────────────── */
#ecodle-configurator .ecodle-modal{
  position:fixed; inset:0; background:rgba(6,5,4,.86); z-index:99999;
  display:none; align-items:center; justify-content:center; padding:24px;
}
#ecodle-configurator .ecodle-modal.is-open{ display:flex; }
#ecodle-configurator .ecodle-modal__box{
  position:relative; background:var(--ecodle-panel); border:1px solid var(--ecodle-gold-dim);
  border-radius:var(--ecodle-r-card); padding:28px; max-width:520px; width:100%;
}
#ecodle-configurator .ecodle-modal__box--zoom{ max-width:760px; background:var(--ecodle-bg); padding:18px; }
#ecodle-configurator .ecodle-modal__box h3{ font-size:24px; margin-bottom:8px; }
#ecodle-configurator .ecodle-modal__box p{ color:var(--ecodle-text-dim); font-size:14px; margin:0 0 16px; }
#ecodle-configurator .ecodle-modal__close{
  position:absolute; top:10px; right:14px; background:none; border:0;
  color:var(--ecodle-gold); font-size:26px; line-height:1; cursor:pointer;
}
#ecodle-configurator .ecodle-share-link-wrap{ display:flex; gap:10px; }
#ecodle-configurator .ecodle-share-url-input{
  flex:1; min-width:0; background:#000; border:1px solid var(--ecodle-line);
  border-radius:var(--ecodle-r-btn); color:var(--ecodle-text); padding:11px 14px; font-size:13px;
}
#ecodle-configurator .ecodle-share-copied{ color:var(--ecodle-green); font-size:13px; margin-top:10px; }
#ecodle-configurator .ecodle-zoom-stage{
  position:relative; aspect-ratio:1/1; width:100%; border-radius:var(--ecodle-r-card); overflow:hidden;
}

/* ── Toast ────────────────────────────────────────────────── */
#ecodle-configurator .ecodle-toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,20px);
  background:#000; border:1px solid var(--ecodle-gold-dim); color:var(--ecodle-text);
  border-radius:var(--ecodle-r-btn); padding:13px 22px; font-size:14px;
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:100000;
}
#ecodle-configurator .ecodle-toast.is-visible{ opacity:1; transform:translate(-50%,0); }
#ecodle-configurator .ecodle-toast.is-error{ border-color:#c0392b; }
#ecodle-configurator .ecodle-toast.is-success{ border-color:var(--ecodle-green); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1100px){
  #ecodle-configurator .ecodle-layout{ grid-template-columns:minmax(0,1fr); gap:32px; }
  #ecodle-configurator .ecodle-preview-panel{ position:static; }
  #ecodle-configurator .ecodle-preview-card{ max-width:520px; margin-inline:auto; }
}
@media (max-width:782px){
  #ecodle-configurator{ padding:32px 16px 48px; }
  #ecodle-configurator .ecodle-heading,
  #ecodle-configurator .ecodle-step-title{ font-size:28px; }
  #ecodle-configurator .ecodle-step-subtitle,
  #ecodle-configurator .ecodle-subheading{ font-size:15px; }
  #ecodle-configurator .ecodle-progress-step{ width:74px; }
  #ecodle-configurator .ecodle-progress-step__dot{ width:36px; height:36px; font-size:15px; }
  #ecodle-configurator .ecodle-progress-step__label{ font-size:12px; }
  #ecodle-configurator .ecodle-progress-line{ display:none; }
  #ecodle-configurator .ecodle-total__amount{ font-size:26px; }
  #ecodle-configurator .ecodle-btn{ padding:12px 20px; font-size:15px; }
  #ecodle-configurator .ecodle-btn--cta{ margin-left:0; width:100%; }
}
@media (max-width:480px){
  #ecodle-configurator .ecodle-swatch-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #ecodle-configurator .ecodle-size-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #ecodle-configurator .ecodle-card-grid,
  #ecodle-configurator .ecodle-scent-grid,
  #ecodle-configurator .ecodle-multi-grid{ grid-template-columns:minmax(0,1fr); }
}

@media (prefers-reduced-motion:reduce){
  #ecodle-configurator *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  #ecodle-configurator .ecodle-layer{ opacity:1; }
}

/* Product page CTA (outside the configurator root) */
.ecodle-product-cta{ margin:16px 0; }
.ecodle-cta-link{
  display:inline-block; background:#0c0a08; color:#d2a32f; border:1px solid #b4792f;
  padding:14px 32px; border-radius:8px; font-weight:600; text-decoration:none;
}
.ecodle-cta-link:hover{ background:#d2a32f; color:#0c0a08; }


/* ── Modals & toast when moved to <body> (escapes clipped theme wrappers) ── */
body > .ecodle-modal{
  position:fixed; inset:0; background:rgba(6,5,4,.86); z-index:999999;
  display:none; align-items:center; justify-content:center; padding:24px;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#fff;
}
body > .ecodle-modal.is-open{ display:flex; }
body > .ecodle-modal *{ box-sizing:border-box; }
body > .ecodle-modal .ecodle-modal__box{
  position:relative; background:#450000; border:1px solid #b4792f;
  border-radius:10px; padding:28px; max-width:520px; width:100%;
}
body > .ecodle-modal .ecodle-modal__box--zoom{ max-width:760px; background:#0c0a08; padding:18px; }
body > .ecodle-modal h3{
  font-family:'Playfair Display',Georgia,serif; font-weight:400;
  font-size:24px; margin:0 0 8px; color:#fff;
}
body > .ecodle-modal p{ color:rgba(255,255,255,.72); font-size:14px; margin:0 0 16px; }
body > .ecodle-modal .ecodle-modal__close{
  position:absolute; top:10px; right:14px; background:none; border:0;
  color:#d2a32f; font-size:26px; line-height:1; cursor:pointer;
}
body > .ecodle-modal .ecodle-share-link-wrap{ display:flex; gap:10px; }
body > .ecodle-modal .ecodle-share-url-input{
  flex:1; min-width:0; background:#000; border:1px solid #333232;
  border-radius:8px; color:#fff; padding:11px 14px; font-size:13px;
}
body > .ecodle-modal .ecodle-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:#d2a32f; color:#fff; border:1px solid transparent; border-radius:8px;
  padding:9px 18px; font-size:14px; font-weight:500; cursor:pointer;
}
body > .ecodle-modal .ecodle-share-copied{ color:#06bf4d; font-size:13px; margin-top:10px; }
body > .ecodle-modal .ecodle-zoom-stage{
  position:relative; aspect-ratio:1/1; width:100%; border-radius:10px; overflow:hidden;
}
body > .ecodle-modal .ecodle-layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none;
}
