.custom-select{position:relative;width:100%}
.custom-select *{box-sizing:border-box}
.custom-select-btn{display:block;width:100%;height:2.75em;padding:0 2.5em 0 .5em;border:1px solid #ddd;border-radius:3px;background:#fff;text-align:left;color:#111;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative}
.custom-select-btn::after{content:"";position:absolute;right:10px;top:50%;width:7px;height:7px;margin-top:-.462em;border-right:2px solid #111;border-bottom:2px solid #111;transform:rotate(45deg);transition:transform .15s}
.custom-select.is-open .custom-select-btn::after{margin-top:-.154em;transform:rotate(-135deg)}
.custom-select-btn:focus-visible{outline:2px solid #0a7ac2;outline-offset:1px}

.custom-select-dim{display:none}
.custom-select-list{display:none;position:absolute;left:0;right:0;top:100%;z-index:100;margin:.125em 0 0;padding:0;list-style:none;border:1px solid #555;background:#fff;max-height:280px;overflow-y:auto;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.custom-select.is-open .custom-select-list{display:block}

.custom-select-list li{display:flex;align-items:center;flex-wrap:wrap;gap:.25em 1em;padding:.5em 1em;line-height:1.5;color:#111;cursor:pointer}
.custom-select-list li.is-placeholder{background:#777;color:#fff}
.custom-select-list li:not(.is-placeholder):hover,
.custom-select-list li.is-active:not(.is-placeholder){background:#f1f6fb}
.custom-select-list li.is-selected:not(.is-placeholder) .custom-select-name{font-weight:700}
.custom-select-list li.is-soldout{color:#aaa;cursor:not-allowed}
.custom-select-list li.is-soldout:hover{background:#fff}

.custom-select-name{white-space:nowrap; margin-right: auto}
.custom-select-price{display:flex;align-items:center;flex-wrap:wrap;gap:0 .615em}
.custom-select-price del{color:#999;text-decoration:line-through;text-decoration-color:#e02020;text-decoration-thickness:1px}
.custom-select-price strong{font-weight:400;color:#111}
.custom-select-price em{font-style:normal;color:#555}

.custom-select-btn .custom-select-name,
.custom-select-btn .custom-select-price{display:inline;white-space:nowrap}
.custom-select-btn .custom-select-price del,
.custom-select-btn .custom-select-price strong,
.custom-select-btn .custom-select-price em{margin-left:.615em}
.custom-select-btn .custom-select-name{font-weight:400}
.custom-select-list li.is-soldout .custom-select-price strong,
.custom-select-list li.is-soldout .custom-select-price em{color:#aaa}

@media (max-width:768px){
  .custom-select-btn{height:3em; font-size: 1.125em}

  .custom-select.is-open .custom-select-dim{display:block;position:fixed;left:0;top:0;right:0;bottom:0;z-index:998;background:rgba(0,0,0,.55)}
  .custom-select-list{position:fixed;left:16px;right:16px;top:50%;z-index:999;margin:0;max-height:70vh;transform:translateY(-50%);border:0;border-radius:2px;box-shadow:none; font-size: 1.25em}
  .custom-select-list li{position:relative;display:block;padding:.875em 3.5em .875em 1.125em;font-size:1em;border-top:1px solid #ddd}
  .custom-select-list li:first-child{border-top:0}
  .custom-select-list li.is-placeholder{background:#fff;color:#111;padding-top:1.111em;padding-bottom:1.111em;font-size:1.125em}
  .custom-select-list li:not(.is-placeholder):hover{background:#fff}
  .custom-select-list li.is-active:not(.is-placeholder){background:#fff}
  .custom-select-name{display:block;white-space:normal}
  .custom-select-price{margin-top:.125em;gap:0 .375em}

  .custom-select-list li::after{content:"";position:absolute;right:18px;top:50%;width:20px;height:20px;transform:translateY(-50%);border:2px solid #888;border-radius:50%}
  .custom-select-list li.is-selected::after{border-color:#0a8f7a;background:radial-gradient(circle,#0a8f7a 0 5px,#fff 6px)}
  .custom-select-list li.is-soldout::after{border-color:#ccc}
}