.elyra-size-chart-root{
  --elyra-size-chart-bg:#ed1c24;
  --elyra-size-chart-text:#fff;
  --elyra-size-chart-border:#ed1c24;
  display:none;
  width:100%;
  margin:12px 0;
  position:relative;
  z-index:4;
}
.elyra-size-chart-root.is-mounted{display:block}
.elementor-sticky__spacer .elyra-size-chart-root{display:none!important}
.elyra-size-chart-width-auto{width:auto}
.elyra-size-chart-width-full{width:100%}

/* Recommended placement: directly beneath the size choices, aligned neatly. */
.elyra-size-chart-root--inside-size{
  width:100%!important;
  margin:10px 0 2px;
  display:flex!important;
  justify-content:flex-end;
  align-items:center;
}
.elyra-size-chart-root--inside-size .elyra-size-chart-button{
  width:auto!important;
}

.elyra-size-chart-button{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:10px 17px;
  border:1px solid var(--elyra-size-chart-border);
  border-radius:12px;
  background:linear-gradient(180deg,var(--elyra-size-chart-bg) 0%,var(--elyra-size-chart-bg) 100%);
  color:var(--elyra-size-chart-text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.015em;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(237,28,36,.20);
  box-shadow:0 8px 20px color-mix(in srgb,var(--elyra-size-chart-bg) 26%,transparent);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease;
}
.elyra-size-chart-width-full .elyra-size-chart-button{width:100%}
.elyra-size-chart-button:hover,
.elyra-size-chart-button:focus-visible{
  color:var(--elyra-size-chart-text);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(237,28,36,.28);
  box-shadow:0 12px 26px color-mix(in srgb,var(--elyra-size-chart-bg) 34%,transparent);
  filter:brightness(.94);
  outline:none;
}
.elyra-size-chart-button:active{
  transform:translateY(0);
  box-shadow:0 5px 14px rgba(237,28,36,.20);
  box-shadow:0 5px 14px color-mix(in srgb,var(--elyra-size-chart-bg) 26%,transparent);
}
.elyra-size-chart-icon{
  width:25px;
  height:25px;
  flex:0 0 25px;
  padding:4px;
  box-sizing:border-box;
  border-radius:8px;
  background:rgba(255,255,255,.16);
}

.elyra-size-chart-modal[hidden]{display:none!important}
.elyra-size-chart-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
.elyra-size-chart-modal.is-open{opacity:1;visibility:visible}
.elyra-size-chart-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.elyra-size-chart-dialog{
  position:relative;
  width:min(760px,94vw);
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.30);
  transform:translateY(12px) scale(.985);
  transition:transform .2s ease;
}
.elyra-size-chart-modal.is-open .elyra-size-chart-dialog{transform:translateY(0) scale(1)}
.elyra-size-chart-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.elyra-size-chart-dialog-head span{
  display:block;
  margin-bottom:3px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--wd-primary-color,#111);
}
.elyra-size-chart-dialog-head h2{
  margin:0;
  color:var(--wd-title-color,#111);
  font:inherit;
  font-size:24px;
  font-weight:700;
  line-height:1.15;
}
.elyra-size-chart-dialog-head p{margin:4px 0 0;color:#6a6a6a;font-size:13px}
.elyra-size-chart-close{
  appearance:none;
  -webkit-appearance:none;
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(0,0,0,.11);
  border-radius:50%;
  background:#f7f7f7;
  color:#111;
  font-size:28px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
}
.elyra-size-chart-image-wrap{overflow:auto;padding:16px;background:#f7f7f7;text-align:center}
.elyra-size-chart-image{display:block;width:auto;max-width:100%;height:auto;max-height:calc(90vh - 125px);margin:0 auto;border-radius:12px;background:#fff}
html.elyra-size-chart-open,body.elyra-size-chart-open{overflow:hidden!important}

@media(max-width:767px){
  .elyra-size-chart-root{margin:10px 0}
  .elyra-size-chart-root--inside-size{
    justify-content:stretch;
    margin-top:10px;
  }
  .elyra-size-chart-root--inside-size .elyra-size-chart-button{
    width:100%!important;
  }
  .elyra-size-chart-button{min-height:44px;padding:10px 16px;font-size:13px;border-radius:11px}
  .elyra-size-chart-modal{padding:10px}
  .elyra-size-chart-dialog{width:100%;max-height:94vh;border-radius:16px}
  .elyra-size-chart-dialog-head{padding:14px 15px}
  .elyra-size-chart-dialog-head h2{font-size:20px}
  .elyra-size-chart-close{width:36px;height:36px;flex-basis:36px}
  .elyra-size-chart-image-wrap{padding:8px}
  .elyra-size-chart-image{max-height:calc(94vh - 105px);border-radius:9px}
}
@media(prefers-reduced-motion:reduce){
  .elyra-size-chart-button,.elyra-size-chart-modal,.elyra-size-chart-dialog{transition:none}
}