.nayeli-mcp{display:none}

@media(max-width:767px){
  body.nayeli-mcp-open{overflow:hidden;touch-action:none}
  .nayeli-mcp{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:flex-start;justify-content:center;background:#fff;color:#173f59;font-family:inherit;overflow-y:auto;overscroll-behavior:contain}
  .nayeli-mcp[hidden]{display:none}
  .nayeli-mcp__dialog{width:100%;min-height:100%;background:#fff}
  .nayeli-mcp__head{width:100%;height:62px;padding:0 24px;border:0;background:#eef7fb;color:#173f59;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}
  .nayeli-mcp__head strong{font-size:22px;line-height:1;font-weight:700}
  .nayeli-mcp__close{color:#0b5960;font-size:30px;line-height:1;font-weight:300}
  .nayeli-mcp__body{padding:16px 24px 24px}
  .nayeli-mcp__picker{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:16px;align-items:stretch}
  .nayeli-mcp__sv{position:relative;width:100%;height:min(61vw,260px);min-height:220px;border-radius:14px;overflow:hidden;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0)),var(--nayeli-mcp-hue,#f000c8);box-shadow:inset 0 0 0 1px rgba(23,63,89,.12)}
  .nayeli-mcp__sv-point{position:absolute;left:0;top:0;width:28px;height:28px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #173f59,0 2px 7px rgba(23,63,89,.28);transform:translate(-50%,-50%);pointer-events:none}
  .nayeli-mcp__hue{position:relative;width:32px;border-radius:16px;touch-action:none;background:linear-gradient(to bottom,#f00 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,#f00 100%)}
  .nayeli-mcp__hue-point{position:absolute;left:50%;top:0;width:34px;height:34px;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 2px #173f59,0 2px 7px rgba(23,63,89,.28);transform:translate(-50%,-50%);pointer-events:none}
  .nayeli-mcp__compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
  .nayeli-mcp__compare-item{display:grid;gap:8px;text-align:center;color:#557083;font-size:13px}
  .nayeli-mcp__swatch{display:block;height:62px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(23,63,89,.14)}
  .nayeli-mcp__apply{width:100%;min-height:58px;margin-top:20px;border:0;border-radius:11px;background:#0b5960;color:#fff;font:700 17px/1 inherit;cursor:pointer}
  .nayeli-mcp__apply:focus-visible,.nayeli-mcp__head:focus-visible{outline:3px solid #078d98;outline-offset:-3px}
}

@media(max-width:370px){
  .nayeli-mcp__body{padding-inline:16px}
  .nayeli-mcp__picker{gap:12px}
  .nayeli-mcp__sv{height:220px}
}

@media(max-width:767px) and (max-height:620px){
  .nayeli-mcp__sv{height:210px;min-height:190px}
  .nayeli-mcp__compare{margin-top:14px}
  .nayeli-mcp__swatch{height:50px}
  .nayeli-mcp__apply{margin-top:14px}
}