/* Cart and delivery form: each step lives on its own page. */
#product-detail .checkout-page {
  --checkout-blue: #168fea;
  --checkout-muted: #6c727b;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 38px;
}
#product-detail .checkout-page [hidden] { display: none !important; }
.checkout-page .checkout-sr-only,
.cart-summary .checkout-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#product-detail .checkout-page .detail-breadcrumb { padding-bottom: 12px; }
#product-detail .checkout-page .back-to-catalog {
  min-height: 44px;
  margin-bottom: 20px;
  font-size: 15px;
}
#product-detail .checkout-page > h1 {
  margin: 24px 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.8px;
}
.checkout-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 0 0 24px;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #eceef1;
  color: #91959b;
}
.checkout-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 9px;
  min-height: 48px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}
.checkout-steps li + li::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  right: calc(100% + 5px);
  background: #e2e5e9;
}
.checkout-steps .step-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  color: #fff;
  background: #b9bdc4;
  font-size: 14px;
  font-weight: 700;
}
.checkout-steps li.current { background: #eef7ff; color: #17212c; }
.checkout-steps li.current .step-number { background: var(--checkout-blue); }
.checkout-form {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  align-items: start;
  gap: 42px;
}
.checkout-main { min-width: 0; }
.checkout-section { padding: 0 0 30px; }
.checkout-section + .checkout-section { padding-top: 28px; border-top: 1px solid #eceef1; }
#product-detail .checkout-section h2,
#product-detail .checkout-summary h2 {
  margin: 0 0 23px;
  color: #111;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.45px;
}
.checkout-fieldset { min-width: 0; padding: 0; margin: 0 0 22px; border: 0; }
.checkout-fieldset legend,
.checkout-field > span:first-child {
  display: block;
  padding: 0;
  margin: 0 0 10px;
  color: #1b1d21;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
}
.checkout-field { display: block; min-width: 0; margin-bottom: 22px; }
.checkout-field input,
.checkout-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 49px;
  border: 1px solid #dfe2e6;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 4px #10182805;
  padding: 13px 14px;
  color: #20242a;
  font: 400 15px/1.45 Inter, Arial, sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.checkout-field textarea { resize: vertical; min-height: 80px; }
.checkout-field input::placeholder,
.checkout-field textarea::placeholder { color: #8b9098; opacity: 1; }
.checkout-field input:focus,
.checkout-field textarea:focus {
  outline: none;
  border-color: #278fe3;
  box-shadow: 0 0 0 3px #168fea19;
}
.checkout-field input:user-invalid { border-color: #c83434; }
.checkout-field small {
  display: block;
  margin-top: 8px;
  color: #747a83;
  font-size: 12px;
  line-height: 1.5;
}
.checkout-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#product-detail .checkout-page .pickup-location {
  margin: 0 0 22px;
  padding: 14px;
  border-radius: 9px;
  background: #f0f9ff;
  color: #35546b;
  font-size: 14px;
  line-height: 1.6;
}
.delivery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice-card,
.payment-choice {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid #e1e4e8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 5px #10182806;
  color: #25282d;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.choice-card input[type="radio"],
.payment-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  margin: 0;
  border: 2px solid #c7cbd1;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.choice-card input[type="radio"]:checked,
.payment-choice input[type="radio"]:checked {
  border-color: var(--checkout-blue);
  background: var(--checkout-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3 3 7-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.choice-card:has(input:checked),
.payment-choice:has(input:checked) { border-color: var(--checkout-blue); background: #f0f9ff; box-shadow: 0 0 0 1px #168fea55; }
.choice-card:focus-within,
.payment-choice:focus-within { outline: 2px solid #1674cc; outline-offset: 3px; }
.choice-card input:focus-visible,
.payment-choice input:focus-visible { outline: none; }
.choice-icon { display: grid; place-items: center; flex: 0 0 23px; }
.choice-icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.choice-card small { display: block; color: #747a83; font-size: 11px; margin-top: 3px; }
.payment-options { display: grid; gap: 12px; }
.payment-choice { min-height: 54px; }
.payment-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-radius: 5px;
}
.payment-mark.nequi { background: #261329; color: #fff; }
.payment-mark.pse { background: #075487; color: #fff; border-radius: 50%; font-size: 9px; }
.payment-mark.card,.payment-mark.cash,.payment-mark.bank { color: #3e434b; }
.payment-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.invoice-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 18px;
  min-height: 48px;
  cursor: pointer;
  color: #181b20;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}
.invoice-toggle > input[type="checkbox"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  opacity: 0;
  margin: 0;
  z-index: 1;
  cursor: pointer;
}
.switch-track {
  position: relative;
  display: block;
  width: 46px;
  height: 27px;
  flex: 0 0 46px;
  border-radius: 20px;
  background: #b5b9bc;
  transition: background .18s;
}
.switch-track::after {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0002;
  transition: transform .18s;
}
.invoice-toggle input:checked + .switch-track { background: var(--checkout-blue); }
.invoice-toggle input:checked + .switch-track::after { transform: translateX(19px); }
.invoice-toggle input:focus-visible + .switch-track { outline: 3px solid #1674cc; outline-offset: 4px; }
#invoice-fields { padding: 19px 0 0; }
#invoice-fields .checkout-field { margin-bottom: 0; }
.checkout-summary,
.cart-summary {
  min-width: 0;
  padding: 25px;
  border: 1px solid #eceef1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 22px #10182807;
  align-self: start;
}
.checkout-summary { position: sticky; top: 24px; }
#product-detail .cart-summary h2 { font-size: 22px; margin-bottom: 20px; }
.checkout-summary-items { margin: 0 0 23px; }
.checkout-summary-items article {
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #f0f1f3;
  font-size: 12px;
  line-height: 1.4;
}
.checkout-summary-items article img { display: block; width: 49px; height: 60px; object-fit: contain; }
.checkout-summary-items article > div:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
#product-detail .checkout-summary-items article > .bottle,
#product-detail .checkout-summary-items article > .product-photo-pending {
  width: 49px;
  height: 60px;
  margin: 0;
  padding: 0;
  transform: none;
}
.checkout-summary-items .product-photo-pending { gap: 3px; font-size: 7px; text-align: center; }
.checkout-summary-items .product-photo-pending svg { width: 26px; height: 26px; }
.checkout-summary-items article > :last-child { white-space: nowrap; font-size: 13px; font-weight: 650; }
.checkout-summary-items article small { display: block; margin-top: 5px; color: #737983; }
#product-detail .checkout-summary-items h3 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
#product-detail .checkout-summary-items p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; }
.checkout-summary .order-total,
.cart-summary .order-total { align-items: baseline; margin: 17px 0; color: #505761; font-size: 14px; line-height: 1.4; }
.checkout-summary .order-total > :last-child,
.cart-summary .order-total > :last-child { text-align: right; }
.checkout-summary .order-total.grand-total,
.cart-summary .order-total.grand-total {
  padding-top: 18px;
  margin-top: 22px;
  border-top: 1px solid #e4e7eb;
  color: #111;
  font-size: 21px;
  font-weight: 800;
}
#product-detail .checkout-page .order-submit,
.checkout-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 55px;
  margin-top: 24px;
  padding: 14px 17px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(110deg, #ffd12b, #ffca16);
  color: #0a0a0a;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
#product-detail .checkout-page .order-submit:hover,
.checkout-continue:hover { background: #ffc20c; box-shadow: 0 4px 10px #dca40020; }
#product-detail .checkout-page .order-submit svg,
.checkout-continue svg { width: 20px; height: 20px; flex-shrink: 0; }
#product-detail .checkout-page .order-note,
#product-detail .cart-flow-note { margin: 14px 0 0; color: #747a83; font-size: 12px; line-height: 1.6; }
#product-dialog:has(.cart-page-heading) { max-width: 760px; }
.cart-page-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cart-page-layout > .cart-summary { width: 100%; min-width: 0; position: static; }
.cart-page-items { min-width: 0; }
.cart-page-item {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) 60px;
  gap: 20px;
  align-items: center;
  min-width: 0;
}
#product-detail .cart-page-item > .bottle,
#product-detail .cart-page-item > .product-photo-pending {
  display: grid;
  place-items: center;
  width: 105px;
  height: 130px;
  margin: 0 !important;
  padding: 0;
  transform: none;
}
.cart-page-item > .product-photo-pending { gap: 5px; text-align: center; }
.cart-page-item > div:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
#product-detail .cart-page-item h3 { line-height: 1.4; }
.cart-page-item .quantity { gap: 0; width: 124px; max-width: 100%; }
.cart-page-item .quantity button { flex: 0 0 44px; width: 44px; height: 44px; font-size: 20px; }
.cart-page-item .quantity span { width: 36px; text-align: center; font-size: 14px; overflow-wrap: normal; }
.cart-page-item .remove-item { width: 60px; min-height: 44px; margin: 0; padding: 5px 0; justify-self: end; font-size: 12px; }
@media (max-width: 900px) {
  .checkout-form { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 25px; }
  .checkout-contact-grid { grid-template-columns: 1fr; gap: 0; }
  .choice-card { gap: 8px; padding: 11px; font-size: 12px; }
  .choice-card .choice-icon { display: none; }
  .checkout-summary { padding: 20px; }
}
@media (max-width: 760px) {
  .checkout-form { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .checkout-summary { position: static; padding: 28px 0 0; border: 0; border-top: 1px solid #eceef1; border-radius: 0; box-shadow: none; }
  #product-detail .checkout-page > h1 { font-size: 27px; margin: 24px 0; }
  .checkout-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .checkout-section:last-child { padding-bottom: 22px; }
  .checkout-summary-items article { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .checkout-steps { gap: 20px; }
  .checkout-steps li { gap: 7px; padding: 9px 6px; font-size: 12px; }
  .checkout-steps li + li::before { width: 14px; right: calc(100% + 3px); }
}
@media (max-width: 480px) {
  #product-dialog:has(.checkout-page) { width: calc(100% - 32px); padding-inline: 0; }
  #product-detail .checkout-page .detail-breadcrumb { gap: 7px; font-size: 11px; }
  #product-detail .checkout-page .back-to-catalog { margin-bottom: 14px; font-size: 13px; }
  .checkout-steps { gap: 11px; padding-bottom: 22px; }
  .checkout-steps li { justify-content: center; gap: 5px; min-height: 44px; padding: 8px 4px; border-radius: 9px; font-size: 10px; }
  .checkout-steps .step-number { width: 22px; height: 22px; flex-basis: 22px; font-size: 12px; }
  .checkout-steps li + li::before { width: 7px; right: calc(100% + 2px); }
  #product-detail .checkout-page > h1 { margin: 22px 0 24px; font-size: 25px; }
  #product-detail .checkout-section h2,
  #product-detail .checkout-summary h2 { font-size: 20px; margin-bottom: 23px; }
  .checkout-fieldset legend,
  .checkout-field > span:first-child { font-size: 13px; }
  .checkout-contact-grid { grid-template-columns: 1fr; gap: 0; }
  .delivery-options { gap: 10px; }
  .choice-card { gap: 8px; min-height: 54px; padding: 11px 9px; font-size: 12px; }
  .choice-card input[type="radio"],
  .payment-choice input[type="radio"] { width: 20px; height: 20px; flex-basis: 20px; }
  .payment-choice { padding: 12px; gap: 10px; font-size: 13px; }
  .checkout-field input,
  .checkout-field textarea { min-height: 48px; padding: 12px; font-size: 16px; }
  .invoice-toggle { font-size: 13px; }
  .cart-summary { padding: 20px 16px; }
  .cart-page-item { grid-template-columns: 70px minmax(0, 1fr) 52px; gap: 10px; padding: 12px 10px; }
  #product-detail .cart-page-item > .bottle,
  #product-detail .cart-page-item > .product-photo-pending { width: 70px; height: 105px; }
  .cart-page-item > .product-photo-pending { font-size: 9px; }
  .cart-page-item > .product-photo-pending svg { width: 40px; height: 40px; }
  .cart-page-item .remove-item { width: 52px; font-size: 10px; }
  #product-detail .cart-page-item h3 { font-size: 14px; }
  .cart-page-item strong { font-size: 18px; }
  #product-detail .checkout-page .order-submit,
  .checkout-continue { min-height: 55px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-field input,.checkout-field textarea,.choice-card,.payment-choice,
  .switch-track,.switch-track::after,.checkout-continue,#product-detail .checkout-page .order-submit { transition: none; }
}

/* Delivery choices and order totals continue below the cart products. */
.cart-page-layout > .cart-summary {
  --checkout-blue: #168fea;
  --checkout-muted: #6c727b;
  padding: 25px 0 0;
  border: 0;
  border-top: 1px solid #eceef1;
  border-radius: 0;
  box-shadow: none;
}
.cart-summary [hidden] { display: none !important; }
.cart-summary .cart-delivery-options { margin: 0 0 25px; }
#product-detail .cart-summary .cart-delivery-options h2,
#product-detail .cart-summary .cart-totals h2 {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -.3px;
}
.cart-summary .delivery-options { gap: 12px; }
.cart-summary .choice-card {
  position: relative;
  min-height: 68px;
  gap: 13px;
  padding: 13px 17px;
}
.cart-summary .choice-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cart-summary .choice-card .choice-icon { display: grid; flex-basis: 28px; }
.cart-summary .choice-card .choice-icon svg { width: 28px; height: 28px; }
.cart-summary .choice-card > span:last-child { min-width: 0; }
.cart-summary .choice-card strong { display: block; font-size: 14px; font-weight: 650; }
.cart-summary .choice-card small { margin-top: 4px; font-size: 11px; line-height: 1.4; }
.cart-summary .choice-card:has(input:checked) small { color: #238fd3; }
.cart-summary #cart-address-field { margin: 24px 0; }
.cart-summary #cart-address-field > span { font-size: 15px; font-weight: 700; }
.cart-summary .cart-address-row {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 0 9px 0 13px;
  gap: 7px;
  border: 1px solid #e1e4e8;
  border-radius: 9px;
  box-shadow: 0 1px 4px #10182805;
  background: #fff;
}
.cart-summary .cart-address-row::before {
  content: "";
  width: 20px;
  height: 23px;
  flex: 0 0 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23373d43' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M19 10c0 5-7 11-7 11S5 15 5 10a7 7 0 1 1 14 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cart-summary .cart-address-row input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 13px 3px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  text-overflow: ellipsis;
}
.cart-summary .cart-address-row:focus-within { border-color: #278fe3; box-shadow: 0 0 0 3px #168fea19; }
.cart-summary .cart-address-row input:focus { box-shadow: none; }
.cart-summary .cart-address-row button {
  min-width: 61px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #208ad3;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.cart-summary .cart-address-row button:hover { background: #eff8ff; }
#product-detail .cart-summary #cart-pickup-location {
  margin: 0 0 24px;
  padding: 14px 15px;
  background: #f0f9ff;
  border-radius: 9px;
  color: #35546b;
  font-size: 14px;
  line-height: 1.6;
}
.cart-summary .cart-promo-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
  margin: 0 0 19px;
}
.cart-summary .cart-promo-code input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 12px 12px 39px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757d86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4v10l-8 4-8-4V7l8-4Zm-8 4 8 4 8-4m-8 4v10'/%3E%3Cpath d='m8 5 8 4'/%3E%3C/svg%3E") 12px center/19px no-repeat;
  color: #242b32;
  font: 400 14px/1.4 Inter, Arial, sans-serif;
}
.cart-summary .cart-promo-code input:focus { outline: 2px solid #168fea; outline-offset: 2px; }
.cart-summary .cart-promo-code input::placeholder { color: #8a9098; }
.cart-summary .cart-promo-code button {
  min-height: 48px;
  padding: 12px 17px;
  border: 0;
  border-radius: 8px;
  background: #ffcd24;
  color: #171710;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}
.cart-summary .cart-promo-code button:hover { background: #ffc20c; }
#product-detail .cart-summary #cart-promo-status { margin: -6px 0 21px; font-size: 12px; line-height: 1.55; color: #65717c; }
.cart-summary .cart-totals { padding-top: 21px; border-top: 1px solid #eceef1; }
.cart-summary .cart-totals .order-total { margin: 14px 0; }
.cart-summary .cart-totals .grand-total { margin-top: 21px; }
@media (max-width: 480px) {
  .cart-summary .delivery-options { gap: 9px; }
  .cart-summary .choice-card { min-height: 66px; gap: 8px; padding: 11px 9px; }
  .cart-summary .choice-card .choice-icon { flex-basis: 25px; }
  .cart-summary .choice-card .choice-icon svg { width: 25px; height: 25px; }
  .cart-summary .choice-card strong { font-size: 12px; }
  .cart-summary .choice-card small { font-size: 10px; }
  .cart-summary .cart-address-row { padding-left: 9px; gap: 5px; }
  .cart-summary .cart-address-row input { font-size: 16px; }
  .cart-summary .cart-address-row button { font-size: 12px; min-width: 55px; }
  .cart-summary .cart-promo-code { grid-template-columns: minmax(0, 1fr) 91px; gap: 9px; }
  .cart-summary .cart-promo-code input { font-size: 16px; }
  .cart-summary .cart-promo-code button { padding: 12px 11px; font-size: 13px; }
}