#offcanvasBottom.variant-picker {
  height: auto;
  max-height: 85vh;
  align-items: center;
  border: 0;
  background: transparent;
  z-index: 1055;
}
.variant-picker-panel {
  width: min(100%, 480px);
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  color: #15546d;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(21, 84, 109, .12);
}
.variant-picker-header { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 16px; }
.variant-picker-eyebrow { color: #65858b; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.variant-picker-header h2 { margin: 5px 0 6px; font-size: 20px; font-weight: 700; color: #15546d; }
.variant-picker-header p { margin: 0; color: #638293; font-size: 12px; line-height: 1.5; }
.variant-picker-close { display: grid; place-items: center; flex: 0 0 30px; height: 30px; margin-left: auto; border: 0; border-radius: 50%; background: #f0f5f4; color: #416574; font-size: 24px; line-height: 1; }
.variant-picker-options { display: grid; gap: 10px; padding: 0 22px 20px; }
.variant-picker-option { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #e0ebea; border-radius: 14px; background: #f8f9f3; }
.variant-picker-pack { display: flex; flex-direction: column; gap: 3px; }
.variant-picker-weight { min-width: 38px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.variant-picker-pack-detail { font-size: 11px; color: #638293; }
.variant-picker-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.variant-picker-price strong { font-size: 16px; }
.variant-picker-price del { font-size: 11px; color: #7b8e93; }
.variant-picker-saving { font-size: 10px; color: #386345; background: #e9f3df; border-radius: 5px; padding: 2px 5px; }
.variant-picker-action { margin-left: auto; flex: 0 0 auto; }
.variant-picker-action .pro-dec-content-right,
.variant-picker-action .product-details-qty,
.variant-picker-action .cart-plus-minus { width: auto !important; }
.variant-picker-action .cart-plus-minus { display: inline-flex; align-items: center; border: 0 !important; border-radius: 999px; background: #d9f1fb !important; }
.variant-picker-action button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 70px; min-height: 32px; padding: 6px 12px !important; border: 0 !important; border-radius: 999px; background: #d9f1fb !important; color: #17637f !important; font-size: 12px !important; font-weight: 600; box-shadow: none; }
.variant-picker-action button:hover { background: #c5e8f6 !important; }
.variant-picker-action .cart-plus-minus .qtybutton { position: static; width: 24px; min-height: 32px; padding: 0; color: #17637f !important; font-size: 16px !important; }
.variant-picker-action .cart-plus-minus input { width: 20px !important; height: 32px; padding: 0 !important; color: #17637f !important; font-size: 12px !important; }
.variant-picker-action .easy-buy-out-of-stock { background: #eeefeb !important; color: #68736c !important; opacity: 1; }
.variant-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #edf1ef; }
.variant-picker-footer > span { color: #638293; font-size: 11px; }
.variant-picker-done { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 112px; padding: 10px 20px; border: 0; border-radius: 999px; background: #17637f; color: #fff; font-size: 13px; font-weight: 600; }
.variant-picker-done:hover { background: #15546d; }
.variant-picker button:focus-visible { outline: 2px solid #17637f; outline-offset: 3px; }
.variant-picker-backdrop { z-index: 1050; }
@media (max-width: 380px) {
  .variant-picker-header { padding: 18px 16px 14px; }
  .variant-picker-options { padding: 0 16px 16px; }
  .variant-picker-option { gap: 9px; padding: 12px 10px; }
  .variant-picker-footer { padding-left: 16px; padding-right: 16px; }
}

.variant-picker-thumbnail {
  flex: 0 0 40px;
  width: 40px;
  height: 48px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff;
}
.variant-picker-limit { display: none; }
.variant-picker-action > turbo-frame {
  flex-direction: column;
  gap: 5px;
}
.variant-picker-action .variant-picker-limit {
  display: block;
  color: #866021;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}
@media (max-width: 380px) {
  .variant-picker-thumbnail { flex-basis: 30px; width: 30px; height: 40px; }
  .variant-picker-option { gap: 7px; }
  .variant-picker-price strong { font-size: 14px; }
  .variant-picker-action button { min-width: 62px; padding: 6px 9px !important; }
}

.variant-picker-option--recommended {
  position: relative;
  border-color: #b7d8ca;
  padding-top: 27px;
}
.variant-picker-recommended {
  position: absolute;
  top: 0;
  left: 14px;
  padding: 3px 8px;
  border-radius: 0 0 6px 6px;
  background: #e3f0e7;
  color: #386345;
  font-size: 9px;
  font-weight: 600;
}
.variant-picker-action .cart-plus-minus button.qtybutton {
  min-width: 24px;
  width: 24px;
  padding: 0 !important;
  background: transparent !important;
}
.variant-picker-action .cart-plus-minus button.qtybutton:disabled {
  opacity: .35;
  cursor: not-allowed;
}