.msl-wrap{--msl-shadow:0 10px 25px rgba(0,0,0,.12);--msl-border:#e5e7eb;--msl-bg:#ffffff;--msl-txt:var(--msl-accent)}
.msl-links-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.msl-link{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--msl-border);padding:8px 12px;border-radius:9999px;box-shadow:var(--msl-shadow);text-decoration:none}
.msl-icon{width:20px;height:20px;display:block}
.msl-variations-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.msl-var-item{border:1px solid var(--msl-border);border-radius:12px;padding:12px;background:var(--msl-bg);box-shadow:var(--msl-shadow);display:flex;flex-direction:column;gap:8px}
.msl-buy{align-self:flex-start}

/* Modal */
.msl-modal{position:fixed;inset:0;display:none; z-index: 9999999;}
.msl-modal[aria-hidden="false"]{display:block}
.msl-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.msl-modal-dialog{position:relative;background:#fff;max-width:560px;margin:8vh auto 0;border-radius:14px;overflow:hidden;box-shadow:var(--msl-shadow)}
.msl-modal-close{position:absolute;top:8px;right:8px;background:#fff;border:1px solid var(--msl-border);border-radius:8px;font-size:18px;line-height:1;padding:4px 8px;cursor:pointer}
.msl-modal-body{padding:24px}
.msl-modal-links{display:grid;grid-template-columns:1fr;gap:12px;list-style:none;margin:0;padding:0}
.msl-modal .msl-link{width:100%;justify-content:flex-start}

/* Variations chooser with single Buy button */
.msl-var-choice{display:flex;align-items:center;gap:8px}
.msl-buy-main[disabled]{opacity:.6;cursor:not-allowed}

.msl-modal-title{margin:0 0 8px 0;font-size:1.25rem;line-height:1.25}
.msl-modal-text{margin:0 0 16px 0;opacity:.9}
.msl-modal-text p{margin:.5em 0}

/* Variation choices as faux buttons */
.msl-variations-chooser {gap: 10px}
.msl-var-choice{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--msl-border);padding:10px 14px;border-radius:9999px;background:#f8fafc;cursor:pointer;box-shadow:var(--msl-shadow);user-select:none;transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease}
.msl-var-choice:hover{transform:translateY(-1px)}
.msl-var-choice input[type="radio"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.msl-var-choice.is-selected{background:var(--msl-accent);color:#fff;border-color:var(--msl-accent)}
.msl-var-choice.is-selected .msl-var-name{color:#fff}

/* Select mode */
.msl-variations-select{display:flex;flex-direction:column;gap:6px;max-width:360px}
.msl-variations-select select{border:1px solid var(--msl-border);border-radius:10px;padding:10px 12px;box-shadow:var(--msl-shadow)}
.msl-sel-label{font-weight:600}

/* -------- Premium layering & effects -------- */
@layer msl-reset, msl-components, msl-utilities;

@layer msl-components {
  /* Lock body scroll when modal is open */
  body.msl-open { overflow: hidden; }

  /* Modal enhancements (keeps existing rules; these are additive) */
  .msl-modal { isolation: isolate; }

  .msl-modal[aria-hidden="false"] .msl-modal-dialog {
    animation: msl-pop 0.2s ease-out both;
    will-change: transform, opacity;
  }

  @keyframes msl-pop {
    from { transform: translateY(6px) scale(.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
  }

  /* Backdrop blur for a premium look when supported */
  @supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
    .msl-modal-backdrop {
      backdrop-filter: blur(var(--msl-blur, 6px));
      -webkit-backdrop-filter: blur(var(--msl-blur, 6px));
    }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .msl-modal[aria-hidden="false"] .msl-modal-dialog { animation: none; }
  }
}

@layer msl-utilities {
  /* Accent utility (already injected via :root --msl-accent) */
  .msl-accent-bg { background: var(--msl-accent); }
  .msl-accent-color { color: var(--msl-accent); }
  .msl-accent-border { border-color: var(--msl-accent); }
}

.button.msl-buy,
.msl-modal-links .msl-link,
.msl-links-inline .msl-link {
  font-family: Signika;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
}
.button.msl-buy {
  background-color: var(--msl-accent);
  border-radius: 50px 50px 50px 50px;
  padding: 10px 15px 8px 15px;
  fill: #FFF;
  color: #FFF;
  transition-duration: .3s;
  transition-property: transform;
  text-transform: uppercase;
}

.msl-modal-links .msl-link,
.msl-links-inline .msl-link{
  transition-duration: .3s;
  transition-property: transform;
  color: var(--msl-accent);
  text-transform: uppercase;
  padding: 10px 15px 8px 15px;
  background-color: #FFF;
}
.button.msl-buy:hover,
.msl-modal-links .msl-link:hover,
.msl-links-inline .msl-link:hover{
  transform: scale(1.1);
}
.msl-links-inline .msl-link {
  border: none;
  background-color: var(--msl-accent);
  color: #FFF;
}
.msl-links-inline .msl-link:hover {
  color: #FFF;
}
.msl-links-inline .msl-link img{
  border-radius: 50%;
  overflow: hidden;
}
.msl-modal-text, .msl-sel-label {
  color: #000000;
}
.msl-variations-select{
  margin-bottom: 15px;
}