/**
* 2007-2026 PrestaShop
*
* @author    PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2026 PrestaShop SA
* @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*/

/* ── Delivery countdown ──────────────────────────────────────────── */
#thecheckout-address-invoice .inner-area form#invoice-address:not(.show) {
  height: 0;
  overflow: hidden;
}

.split-countdown {
  margin: 10px 0;
  border-radius: 12px;
  /* background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); */
  border: 2px solid #252525;
  overflow: hidden;
  box-shadow: 0px 3px 6px #00000029;
}

.split-countdown-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 40px;
}

.split-countdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 42px; */
  /* height: 42px; */
  border-radius: 50%;
  /* background: #2e7d32; */
  color: #fff;
  flex-shrink: 0;
  max-width: 80px;
}

.split-countdown-icon .material-icons {
  font-size: 22px;
  color: #fff;
}

.split-countdown-info {
  flex: 1;
  min-width: 0;
}

.split-countdown-timer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #333;
}

.split-countdown-timer {
  display: inline-block;
  font-family: 'Poppins-SemiBold';
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: #252525;
  padding: 6px 26px;
  border-radius: 58px;
  border: 1px solid #252525;
  letter-spacing: 1px;
  min-width: 80px;
  text-align: center;
}

.split-countdown-date {
  font-family: 'Poppins-SemiBold';
}

.split-countdown-miss {
  margin-top: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #252525;
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-countdown-miss {
  color: #fff;
  background: #252525;
  border-radius: 50px;
  padding: 5px 8px;
  font-size: 10px;
  font-family: 'Poppins-Bold';
  line-height: 1;
}

.split-unassigned-header .icon-countdown-miss {
  margin-right: 8px;
}

.split-countdown-miss strong {
  color: #252525;
  font-family: 'Poppins-SemiBold';
}

/* ── Start button ─────────────────────────────────────────────────── */
.split-start-btn {
  width: 100%;
  padding: 12px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0;
  border-radius: 20px;
  color: #fff;
  background: #252525;
  border: 1px solid #a89f91;
  transition: background 0.2s, color 0.2s;
}

.split-start-btn:hover {
  background: #a89f91;
  color: #fff;
  border-color: #9a9183;
}

.split-start-btn .material-icons {
  color: inherit;
}

#split-order-checkout .expected-date-label i {
  cursor: pointer;
}

/* ── Split Order Header ────────────────────────────────────────────── */
.split-order-header-front {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Poppins-semiBold', sans-serif;
  font-weight: 600;
  font-size: 20px;
  padding: 16px 40px;
  background: #252525;
  color: #fff;
  border-radius: 20px 20px 0 0;
  position: relative;
}

.split-order-header-front .main-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.split-cancel-btn {
  padding: 4px 10px;
  line-height: 1;
  border-radius: 20px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.split-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

/* ── Panel wrapper ────────────────────────────────────────────────── */
#splitOrderPanel {
  background: #fff;
  border-radius: 30px;
  box-shadow: 5px 5px 15px 6px #bbbbbb47;
  overflow: hidden;
  margin: 40px 0 15px;
}

/* ── Loading spinner ───────────────────────────────────────────────── */
.split-order-loading-front {
  display: none;
  text-align: center;
  padding: 20px;
}

.split-order-loading-front.active {
  display: block;
}

.spinner-front {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #e0dbd5;
  border-top-color: #B8AFA1;
  border-radius: 50%;
  animation: split-spin 0.6s linear infinite;
}

@keyframes split-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Section blocks ────────────────────────────────────────────────── */
.split-section-front {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  margin: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.split-section-header-front {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #E6E6E6;
  flex-wrap: wrap;
  gap: 6px;
}


.split-section-header-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.split-expected-date {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #fff;
    background: #7D2E2E;
    padding: 6px 20px;
    border-radius: 22px;
    box-shadow: 0px 3px 6px #00000029;
}

.split-expected-date .js-expected-date-value {
  font-family: 'Poppins-SemiBold';
}

.split-asap-label {
  font-family: 'Poppins-SemiBold';
  font-size: 16px;
  color: #252525;
  background: #A8BDB4;
  padding: 8px 22px;
  border-radius: 22px;
  box-shadow: 0px 3px 6px #00000029;
}

.split-badge-front {
  font-family: 'Poppins-SemiBold';
  font-size: 16px;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 22px;
  box-shadow: 0px 3px 6px #00000029;
  background: #252525;
  color: #fff;
}


.split-badge-remaining {
  background: #252525;
  color: #fff;
}

/* .split-badge-split {
    background: #B8AFA1;
    color: #fff;
} */

.split-remove-section-front {
  line-height: 1;
  border-radius: 20px;
  color: #7D2E2E;
  border-color: #7D2E2E;
  border-width: 2px;
  padding: 0;
}

.split-section-header-front .split-remove-section-front:hover {
  background-color: #833939;
  border-color: #833939;
}

/* ── Delivery date ─────────────────────────────────────────────────── */
.split-section-delivery-date-front {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e6e6e6;
  background: #fafafa;
}

body #wrapper .split-section-delivery-date-front label {
  font-family: 'Poppins-SemiBold';
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  color: #252525;
}

.split-delivery-date-front {
  border: 1px solid #B8AFA1;
  border-radius: 22px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 7px 15px;
  width: 150px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.split-delivery-date-front:focus {
  border-color: #B8AFA1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 175, 161, 0.25);
}

/* ── Delivery address form ─────────────────────────────────────────── */
.split-invoice-address-preview {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #333;
}

.split-invoice-addr-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.split-invoice-addr-detail {
  line-height: 1.6;
  color: #555;
}

.split-address-section-front {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #fafafa;
}

.split-address-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #252525;
  margin-bottom: 8px;
}

.split-address-label .invoice-address-info {
  margin: 10px 0 30px;
}

.split-address-summary {
  font-weight: 400;
  font-size: 0.75rem;
  padding: 8px 15px;
  background: #f5f5f5;
  color: #252525;
  ˜ box-shadow: 0px 3px 6px #00000029;
}

.split-address-section-front {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
}

.split-address-label {
  font-family: 'Poppins-SemiBold';
  font-size: 16px;
  color: #252525;
  margin-bottom: 8px;
}

.split-address-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.split-address-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  color: #252525;
  cursor: pointer;
  margin: 0;
}

.split-address-radio input[type="radio"] {
  accent-color: #CCCCCC;
  margin: 0;
  width: 20px;
  height: 20px;
}

.split-address-radio .js-address-type[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}

.split-address-radio .js-address-type[type="checkbox"]:checked {
  background: #b8b0a1;
  border-color: #b8b0a1;
}

.split-address-radio .js-address-type[type="checkbox"]:before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .15s;
  background: white;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.split-address-radio .js-address-type[type="checkbox"]:checked::before {
  transform: scale(1);
}

.split-address-radio .js-address-type[type="checkbox"]:disabled {
  background: #cccccc;
}

.split-address-radio span {
  font-size: 16px;
}

.split-existing-address-front {
  margin-top: 8px;
  padding: 0 0 4px;
}

.split-existing-address-select {
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  padding: 8px 10px;
  border: 1px solid #CDCDCD;
  border-radius: 8px;
  background: #fff;
  color: #252525;
  cursor: pointer;
  transition: border-color 0.2s;
}

.split-existing-address-select:focus {
  border-color: #B8AFA1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 175, 161, 0.25);
}

.split-new-address-form-front {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.split-address-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.split-address-field {
  flex: 1;
  min-width: 0;
}

.split-address-full {
  margin-bottom: 15px;
}

.split-address-field label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6A6A6A;
  margin-bottom: 3px;
}

.split-address-field label .required {
  color: #ff0000;
}

.split-address-field input[type="text"] {
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  padding: 10px 20px;
  border: 1px solid #CDCDCD;
  border-radius: 25px;
  background: #fff;
  color: #252525;
  transition: border-color 0.2s;
}

.split-address-field input[type="text"]:focus {
  border-color: #B8AFA1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 175, 161, 0.25);
}

.split-saved-address-info.js-saved-address-info {
  width: 20%;
  padding: 10px 15px;
  border-radius: 15px;
  border: 1px solid #b8b0a1;
  font-size: 14px;
  font-family: 'Poppins';
  background: #b8b0a1;
  color: #fff;
  position: relative;
  margin-top: 15px;
}

.split-saved-address-info.js-saved-address-info .split-saved-address-title {
  font-family: 'Poppins-Bold';
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

button#splitOrderCancelBtn {
  position: absolute;
  border-radius: 50px;
  right: -8px;
  top: -8px;
  line-height: 1;
  border-radius: 20px;
  color: #fff;
  border-color: #7D2E2E;
  border-width: 2px;
  padding: 0;
  background: #7D2E2E;
}

.split-order-header-front button#splitOrderCancelBtn {
  border-radius: 50px;
  top: 50%;
  right: 25px;
  padding: 10px 10px;
  transform: translateY(-50%);
  background: transparent;
  border-color: #fff;
}

/* ── Save address button ──────────────────────────────────────────── */
.split-address-save-row {
  margin-top: 10px;
  text-align: right;
}

.split-save-address-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 20px;
  color: #fff;
  background: #B8AFA1;
  border: 1px solid #a89f91;
  cursor: pointer;
  transition: background 0.2s;
}

.split-save-address-btn:hover {
  background: #a89f91;
  color: #fff;
}

/* ── Reference delivery address form ─────────────────────────────────────────── */

.split-reference-delivery.js-split-reference-delivery,
.split-tracking-email.js-split-tracking-email {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
}

body#checkout .split-reference-delivery.js-split-reference-delivery label,
body#checkout .split-tracking-email.js-split-tracking-email label,
#wrapper .split-address-label .label-title {
  font-size: 16px;
  font-family: Poppins-SemiBold;
}

.split-reference-delivery label,
.split-tracking-email label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.split-reference-delivery .js-ref-delivery,
.split-tracking-email .js-tracking-email {
  border: 1px solid #B8AFA1;
  border-radius: 50px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  padding: 8px 15px;
  width: 20%;
  cursor: pointer;
  transition: border-color 0.2s;
}

/* ── Cloned cart items inside split sections ──────────────────────── */
.split-section-front .split-cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.split-section-front .cart-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.split-section-front .cart-item:last-child {
  border-bottom: none;
}

.split-section-front .cart-items li.cart-item {
  padding: 15px 20px;
}

.split-section-front .split-cart-items .product-line .product-line-image {
  width: 150px;
  height: 150px;
}

.split-section-front .cart-items li.cart-item .product-line-body {
  padding-left: 20px;
}

#thecheckout-cart-summary .split-section-front .cart-items li.cart-item .product-title a.label {
  font-size: 16px;
  font-family: 'Poppins-SemiBold';
}

.split-section-front .cart-items .product-price {
  font-size: 20px;
  font-family: 'Poppins-SemiBold';
}

.split-section-front .cart-items .main-availability {
  background: #A8BDB4;
  border: none;
  padding: 8px 15px;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 22px;
}

.split-section-front .cart-items .main-availability span,
.split-section-front .cart-items .main-availability strong,
.split-section-front .cart-items .main-availability i {
  /* color: #252525; */
  text-underline-position: under;
}

.checkout-block #split-order-checkout .product-line-qty input.cart-line-product-quantity {
  height: 43px;
  width: 84px;
}

.checkout-block #split-order-checkout .product-line-qty a.cart-line-product-quantity-up,
.checkout-block #split-order-checkout .product-line-qty a.cart-line-product-quantity-down {
  height: 43px;
}

/* ── Stock status label per product ────────────────────────────────── */
.split-stock-label {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 4px;
}

.split-stock-instock {
  background: #e8f5e9;
  color: #2e7d32;
}

.split-stock-expected {
  background: #fff3e0;
  color: #e65100;
}

.split-stock-outofstock {
  display: none;
  background: #7d2e2e;
  color: #fff;
  border-radius: 50px;
  padding: 8px 15px;
  box-shadow: 0px 3px 6px #00000029;
  font-size: 14px;
  font-weight: normal;
}

.split-section-front .split-cart-items .product-line-image img,
.split-unassigned-section .cart-items .product-line-image img {
  margin: 1px 0;
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #E6E6E6;
  border-radius: 20px;
  width: 100%;
  padding: 15px;
}

#thecheckout-cart-summary .split-unassigned-section .cart-items .product-title a {
  font-size: 16px;
  font-family: 'Poppins-SemiBold';
}

/* ── Move dropdown appended to each product line ─────────────────── */
.split-move-action {
  padding: 6px 0 10px;
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
}

.split-move-select {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid #B8BABD;
  border-radius: 22px;
  background: #fff;
  color: #252525;
  cursor: pointer;
  max-width: 180px;
  transition: border-color 0.2s;
  max-height: 43px;
  appearance: none;
  /* padding-right: 35px; */
  background: url(/modules/splitorders/views/img/arrow_down.svg) no-repeat center;
  background-position: 95%;
}

/* select.split-move-select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url(/modules/splitorders/views/img/arrow_down.svg) no-repeat center;
  background-size: contain;
  pointer-events: none;
} */

.split-move-select:focus {
  border-color: #B8AFA1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 175, 161, 0.25);
}

/* ── Section totals ────────────────────────────────────────────────── */
.split-section-totals-front {
  /* background: #F5F5F5; */
  padding: 15px 20px;
  border-top: 1px solid #e6e6e6;
}

.split-total-row-front {
  display: flex;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 3px 0;
  color: #252525;
  line-height: 2;
}

.split-total-final {
  border-top: 1px solid #E6E6E6;
  margin-top: 15px;
  padding-top: 6px;
  color: #252525;
  font-size: 30px;
  font-family: 'Poppins-SemiBold';
  line-height: 1.5;
  padding-bottom: 25px;
  padding-top: 15px;
}

/* ── Grand totals ──────────────────────────────────────────────────── */
.split-grand-totals-front {
  border: 2px solid #252525;
  border-radius: 16px;
  margin: 12px 16px 16px;
  overflow: hidden;
  background: #fff;
}

.split-grand-header {
  background: #252525;
  color: #fff;
  font-family: 'Poppins-SemiBold';
  font-weight: 600;
  font-size: 16px;
  padding: 10px 20px;
}

.split-grand-rows {
  padding: 15px 20px 35px;
}

.split-grand-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 5px 0;
  color: #252525;
}

.split-grand-row-final {
  border-top: 1px solid #e6e6e6;
  margin-top: 15px;
  padding-top: 20px;
  color: #252525;
  font-size: 30px;
  line-height: 1.5;
  font-family: 'Poppins-SemiBold';
}

/* ── Assign product popup ─────────────────────────────────────────── */
.split-assign-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-assign-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  width: 380px;
  max-width: 90vw;
  overflow: hidden;
}

.split-assign-header {
  background: #B8AFA1;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 20px;
}

.split-assign-body {
  padding: 20px;
}

.split-assign-product-name {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #252525;
  margin: 0 0 16px;
}

.split-assign-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ming hide เพราะว่ากฎชุดนี้เป็นของเดิม (rem + มุม 8-10px + เทาอ่อน) ซึ่งไม่ตรง
   ดีไซน์ XD แล้ว ย้ายไปเขียนใหม่แบบ scope ด้วย #splitQtyPickerModal ท้ายไฟล์
   ปิดไว้เฉย ๆ ไม่ลบ เผื่อต้องย้อนกลับ
.split-qty-picker-remaining {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  color: #555;
  margin: 0 0 12px;
}

.split-qty-picker-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.split-qty-picker-input-row label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #252525;
  margin: 0;
}

.split-qty-picker-input-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e0dbd5;
  border-radius: 8px;
  font-size: 0.9rem;
}

.split-qty-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.split-qty-picker-actions .btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
*/

.split-assign-btn {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid #e0dbd5;
  background: #fafafa;
  color: #252525;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.split-assign-btn:hover {
  background: #B8AFA1;
  color: #fff;
  border-color: #a89f91;
}

.split-assign-btn .material-icons {
  color: inherit;
}

/* ── Header summary pills ──────────────────────────────────────────── */
.split-header-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}

.split-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  user-select: none;
  border: 1px solid;
}

.split-header-pill:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.split-header-pill-main {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.split-header-pill-now {
  /* background: #2e7d32;
    color: #fff; */
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.split-header-pill-later {
  background: rgb(254, 243, 199);
  color: #92400e;
  border-color: #fde68a;
}

/* ── Unassigned products section ──────────────────────────────────── */
.split-unassigned-section {
  padding: 20px;
  border: 2px solid #B8AFA1;
  border-radius: 20px;
  background: #fff;
}

.split-unassigned-header {
  padding: 0 0 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  /* font-weight: 600; */
  color: #252525;
  display: flex;
  padding-top:15px;
}

.split-unassigned-section .cart-items {
  padding: 0;
  list-style: none;
  margin: 0;
}


#thecheckout-cart-summary .split-unassigned-section .cart-items .product-title a {
  font-size: 16px;
  font-family: 'Poppins-SemiBold';
}

.split-assign-inline {
  padding: 6px 0 10px;
  display: flex;
  justify-content: flex-end;
  padding-top: 15px;
  align-items: center;
}

.split-assign-select {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 28px 5px 10px;
  border: 1px solid #e8a838;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s;
  max-height: 34px;
}

.split-assign-select:focus {
  outline: none;
  border-color: #b07d1a;
}

/* ── Tabbed split sections ─────────────────────────────────────────── */
.split-tabs-container {
  margin: 20px;
  border: 1px solid #252525;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  background: #f5f5f5;
}

.split-tabs-nav {
  display: flex;
  background: #F5F5F5;
  border-bottom: 1px solid #252525;
}

.split-tab-btn {
  flex: 1;
  padding: 10px 12px;
  font-family: Poppins-SemiBold;
  font-size: 16px;
  font-weight: 600;
  color: #252525;
  background: #fff;
  border: none;
  border-right: 1px solid #252525;
  cursor: pointer;
  /* transition: background 0.2s, color 0.2s; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.split-tab-btn:last-child {
  border-right: none;
}

/* .split-tab-btn:hover {
    background: #ece8e3;
    color: #252525;
} */

/* tab[0] = Main Order — default tan */
/* .split-tab-btn[data-tab="1"].active {
    background: #B8AFA1;
    color: #fff;
} */

/* tab[1] = Delivery Now — green */
/* .split-tab-btn[data-tab="0"] {
    color: #2e7d32;
} */

.split-tab-btn:hover {
  background: #252522;
  color: #fff;
}

.split-tab-btn.active {
  background: #252525;
  color: #fff;
}

/* tab[2] = Delivery Later — yellow/amber */
/* .split-tab-btn[data-tab="2"] {
    color: #b36b00;
} */

/* .split-tab-btn[data-tab="2"]:hover {
    background: #fff8e1;
    color: #7a4700;
} */

/* .split-tab-btn[data-tab="2"].active {
    background: #f59f00;
    color: #fff;
} */

.split-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #252525;
}

.split-tab-btn:not(.active) .split-tab-count {
  background: #252525;
  color: #fff;
}

.split-tab-btn:hover .split-tab-count {
  background: #fff;
  color: #252525;
}

.split-tabs-body {
  background: #fff;
}

.split-tabs-body {
  background: #f5f5f5;
  padding: 20px 20px 0;
}

/* ── Order confirmation – split delivery sections ────────────────── */
section[id^="content-split-"].page-order-confirmation {
  margin-top: 1rem;
}

section[id^="content-split-"] .card-block {
  padding: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

section[id^="content-split-"] .row {
  display: flex;
}

section[id^="content-split-"] #order-details {
  margin-top: 0;
}

section[id^="content-split-"] #order-items table tr.total-value {
  background-color: transparent;
}

/* section[id^="content-split-"] #order-items table tr td {
    padding: 0;
} */

section[id^="content-split-"] #order-items .row .card-title:not(:first-child) {
  display: none;
}

.split-confirm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 1rem;
  padding: 10px 14px;
  background: #f8f8f8;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.split-confirm-meta-item {
  font-size: 0.85rem;
  color: #555;
}

.split-confirm-meta-item strong {
  color: #252525;
}

/* section[id^="content-split-"] #order-items table tr.total-value td {
    color: #fff;
    padding: 10px 15px;
    font-family: 'Poppins-Bold';
    width: 50%;
}

section[id^="content-split-"] #order-items table tr.total-value td:first-child {
    background: #252525;
    border-bottom-left-radius: 20px;
}

section[id^="content-split-"] #order-items table tr.total-value td:last-child {
    background: #b8afa0;
    border-bottom-right-radius: 20px;
}

section[id^="content-split-"] #order-items table tr.total-value td {
    font-size: .875rem;
} */

body#cart #split-order-checkout {
  display: none;
}

label.split-address-radio.existing-address,
label.split-address-radio.same-address,
.js-existing-address-form {
  display: none;
}

#thecheckout-cart-summary .out-of-stock,
.split-stock-instock {
  display: none;
}

.product-availability-extra.out-of-stock.hide {
  display: none !important;
}

.product-availability-extra.out-of-stock.hide {
  display: none !important;
}

/* One availability message per cart line: when bestkit's expected-date
   label is present, the generic availability block is hidden
   (JS fallback: hideAvailabilityExtraWhenBestkitDate adds .hide) */
.product-availability-extra.hide,
.cart-item:has(.bestkit_available_date) .product-availability-extra,
.cart-items > li:has(.bestkit_available_date) .product-availability-extra {
  display: none !important;
}

#thecheckout-cart-summary .split-section-front .split-cart-items .product-availability-extra.out-of-stock {
  display: block;
}

body#checkout .bestkit_available_date {
  background: #7d2e2e;
  color: #fff;
  border-radius: 50px;
  padding: 8px 15px;
  box-shadow: 0px 3px 6px #00000029;
  margin-top: 10px;
}

body#checkout .main-availability.product-availability-extra {
  margin-top: 10px;
  display: block;
}

body#checkout .bestkit_available_date .preorder-label-warning {
  color: #fff;
  font-size: 12px;
}

body .cart-container .main-availability.product-availability-extra.out-of-stock,
body .split-cart-items .main-availability.product-availability-extra.out-of-stock {
  padding: 8px 15px;
  line-height: 1.4;
}

.split-cart-items .product-line-actions {
  display: flex;
  flex-basis: 235px;
  padding-top: 0;
  flex-wrap: wrap;
  align-content: center;
}

.split-cart-items .product-line-actions>div {
  flex-grow: 1;
  text-align: center;
  line-height: normal;
  align-items: center;
  align-content: center;
  display: flex;
}

.split-move-action {
  padding: 6px 0 10px;
  display: flex;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
  position: relative;
  /* display: inline-block; */
}

#thecheckout-cart-summary ul.cart-items.split-cart-items .product-line-actions {
  flex-basis: 330px;
}

.split-section-front .split-cart-items .product-line .product-line-image {
  /* width: 150px;
  height: auto; */
}

#thecheckout-cart-summary ul.cart-items.split-cart-items {
  list-style-type: none;
  padding: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

@media (max-width:1199px) {

  .split-reference-delivery .js-ref-delivery,
  .split-tracking-email .js-tracking-email {
    width: 30%;
  }

  #thecheckout-cart-summary ul.cart-items.split-cart-items .product-line-actions {
    flex-basis: unset;
  }

  .split-cart-items .product-line-actions>div {
    width: fit-content;
    flex-grow: unset;
  }

  .split-move-action,
  .split-assign-inline {
    margin-top: 15px;
    width: 100%;
  }


  .split-move-action .split-move-select,
  .split-assign-inline .split-move-select {
    max-width: 100%;
    width: 100%;
  }

  body#checkout .split-cart-items .bestkit_available_date .preorder-label-warning {
    font-size: 14px;
  }

  .split-move-select {
    background-position: 98%;
  }

  #thecheckout-cart-summary ul.cart-items.split-cart-items .bestkit_available_date {
    max-width: 80%;
  }
}

@media (max-width:991px) {
  .split-section-header-front {
    position: relative;
  }

  .split-remove-section-front {
    position: absolute;
    right: 6px;
    top: 6px;
  }

  .split-order-header-front .main-title img {
    max-width: 25px;
  }

  .split-reference-delivery .js-ref-delivery,
  .split-tracking-email .js-tracking-email {
    width: 40%;
  }

  .split-cart-items .product-line-desc {
    flex: initial;
  }

  .split-section-front .cart-items .main-availability {
    margin-bottom: 15px;
  }


  #thecheckout-cart-summary ul.cart-items.split-cart-items .product-line-actions {
    width: 100%;
  }

  .split-cart-items .product-line-actions>div {
    margin-left: 0;
  }

  .split-cart-items .product-line-actions>div.product-line-price {
    margin-left: auto;
  }

  .split-section-header-front {
    position: relative;
  }

  .split-remove-section-front {
    position: absolute;
    right: 18px;
    top: 15px;
  }

  #thecheckout-cart-summary ul.cart-items.split-cart-items .bestkit_available_date {
    max-width: 100%;
  }
}

@media(max-width:767px) {

  .split-badge-front,
  .split-expected-date {
    font-size: 14px;
  }

  .split-section-delivery-date-front,
  .split-reference-delivery.js-split-reference-delivery,
  .split-tracking-email.js-split-tracking-email {
    flex-direction: column;
    align-items: baseline;
  }

  .split-delivery-date-front,
  .split-reference-delivery .js-ref-delivery,
  .split-tracking-email .js-tracking-email {
    width: 100%;
  }

  .split-section-front .cart-items li.cart-item .product-line-body {
    padding-left: 0;
  }

  #thecheckout-cart-summary .split-section-front .product-line-image,
  #thecheckout-cart-summary .split-unassigned-section .product-line-image {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    height: auto;
  }

  #thecheckout-cart-summary .split-section-front .product-line-image img,
  #thecheckout-cart-summary .split-unassigned-section .product-line-image img {
    max-width: 150px;
  }

  body#checkout #thecheckout-cart-summary .split-section-front .bestkit_available_date {
    margin-bottom: 20px;
    width: 100%;
    padding: 5px 12px;
    justify-content: center;
  }

  .split-tabs-nav {
    flex-direction: column;
  }

  .split-tabs-nav .split-tab-btn {
    border-right: none;
  }

  #thecheckout-cart-summary ul.split-cart-items .product-line-actions>div.product-line-price,
  #thecheckout-cart-summary ul.cart-items.split-cart-items .product-line-actions .product-line-delete {
    align-items: end;
  }

  .split-total-final,
  .split-grand-row-final {
    font-size: 20px;
  }

  #thecheckout-cart-summary .js-unassigned-products .cart-item .product-line .product-line-body .product-line-info span.price,
  #thecheckout-cart-summary .js-split-products .cart-item .product-line .product-line-body .product-line-info span.price {
    font-size: 20px;
  }

  .checkout-block #split-order-checkout .product-line-qty input.cart-line-product-quantity {
    width: 40px;
  }

  .checkout-block #split-order-checkout .product-line-qty a.cart-line-product-quantity-up,
  .checkout-block #split-order-checkout .product-line-qty a.cart-line-product-quantity-down {
    width: 25px;
  }

  #thecheckout-cart-summary .js-split-products .product-line-actions .product-line-price strong {
    font-size: 16px;
  }

  .split-address-row {
    flex-direction: column;
  }

  .split-countdown-inner {
    flex-direction: column;
  }

  body .split-countdown-icon img {
    max-width: 60px;
    border-radius: 0;
  }

  .split-countdown-timer-row,
  .split-countdown-miss {
    text-align: center;
    justify-content: center;
  }

  .split-order-header-front {
    font-size: 18px;
  }

  .split-countdown-timer {
    padding: 2px 10px;
    font-size: 16px;
  }

  .split-order-header-front .main-title img {
    max-width: 18px;
    border-radius: 0;
  }

  .js-unassigned-products .product-line-body {
    padding-left: 0;
  }

  .split-section-front .cart-items .main-availability{
    width: 100%;
  }
}

@media(max-width:575px) {

  div#thecheckout-cart-summary .split-section-front .cart-item .product-line .product-line-body .product-line-info span.price {
    font-size: 16px;
  }

  .checkout-block #split-order-checkout .product-line-qty input.cart-line-product-quantity {
    height: 35px;
    width: 20px;
  }

  #thecheckout-cart-summary .split-section-front ul.cart-items .product-line-actions .product-line-qty {
    margin-right: 0;
  }

  .checkout-block #split-order-checkout .product-line-qty a.cart-line-product-quantity-up,
  .checkout-block #split-order-checkout .product-line-qty a.cart-line-product-quantity-down {
    height: 35px;
  }

  .split-move-action .split-move-select {
    padding: 8px 15px;
  }

  .split-countdown-timer-row,
  .split-countdown-timer,
  .split-delivery-date-front,
  .split-reference-delivery .js-ref-delivery,
  .split-tracking-email .js-tracking-email,
  body #wrapper .split-section-delivery-date-front label,
  body#checkout .split-reference-delivery.js-split-reference-delivery label,
  body#checkout .split-tracking-email.js-split-tracking-email label,
  .split-address-label,
  .split-address-radio span {
    font-size: 14px;
  }

  body#checkout .split-cart-items .bestkit_available_date .preorder-label-warning {
    font-size: 12px;
    padding: 2px 5px;
    text-align: center;
  }

  .split-total-row-front {
    font-size: 14px;
  }
}

@media(max-width:479px) {
  .split-unassigned-header {
    display: inline-block;
  }

  .split-unassigned-header .icon-countdown-miss {
    margin-right: 8px;
    padding: 2px 8px;
  }
}


/* Checkout new summary total block */
section#hook-catalog-exrtra-field {
  display: none;
}

.expected-date-label #ui-datepicker-div {
  width: 100%;
  border: none;
  width: 100%;
  background: #e8e8e8;
  border-radius: 20px;
}

body div#thecheckout-cart-summary {
  border-radius: 20px;
}

body div#thecheckout-cart-summary .card.cart-container {
  border-bottom: 0;
}


#thecheckout-confirm .card.cart-summary {
  border: none;
}

.expected-date-label #ui-datepicker-div table.ui-datepicker-calendar {
  border-collapse: separate;
  border-spacing: 10px;
  margin-bottom: 0;
}

.expected-date-label #ui-datepicker-div .ui-datepicker-header a.ui-corner-all {
  top: 50%;
  transform: translateY(-50%);
}

#thecheckout-confirm .cart-detailed-totals {
  width: 100%;
  left: 0;
}

#thecheckout-confirm .card.cart-summary .card-block.block-promo {
  display: none;
}

#thecheckout-confirm.checkout-block .card-block:first-child {
  padding: 0 0 10px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}

#checkout #thecheckout-confirm.checkout-block .card-block.block-order-description {
  margin: 0;
  border: none;
  padding-bottom: 15px;
}

#thecheckout-confirm.checkout-block .card-block.block-order-description a,
#thecheckout-confirm.checkout-block .card-block.block-accept-payment-term a {
  color: var(--secondary);
  text-decoration: underline;
  line-height: 1.6;
}

#thecheckout-confirm.checkout-block .card-block {
  border-bottom: 0;
  padding: 0;
  padding-bottom: 0;
}

#thecheckout-confirm .cart-summary-line {
  margin-bottom: 10px !important;
  margin-top: 0;
}

#thecheckout-confirm .card.cart-summary .cart-summary-line span.value {
  font-size: 16px;
  line-height: 1.6;
}

/* ming hide เพราะว่า XD ให้แถว "Total inkl. moms" เป็น Poppins-SemiBold 16 ไม่ใช่ 12px
   (ดูบล็อก "Samlet total" ท้ายไฟล์) — ตัวเดิมมี !important เลยต้องปิดทิ้ง ไม่งั้นทับไม่ลง */
/* #thecheckout-confirm .card.cart-summary .cart-summary-line.cart-total.cart-total-tax-included span {
  font-size: 12px !important;
  font-family: 'Poppins';
} */

#thecheckout-confirm .cart-summary-line {
  margin-bottom: 10px !important;
  margin-top: 0;
}

#thecheckout-confirm .card.cart-summary .cart-detailed-totals .cart-total-tax-excluded span {
  width: 50%;
  color: #fff;
  padding: 10px 15px;
  font-family: Poppins-Bold;
}

#thecheckout-confirm .card.cart-summary .cart-detailed-totals .cart-total-tax-excluded span.label {
  background: #252525;
  border-bottom-left-radius: 20px;
}

#thecheckout-confirm .card.cart-summary .cart-detailed-totals .cart-total-tax-excluded span.value {
  background: #b8afa0;
  border-bottom-right-radius: 20px;
  text-align: right;
}

#thecheckout-confirm.checkout-block .card-block {
  border-bottom: 0;
  padding: 0;
  padding-bottom: 0;
}

#thecheckout-confirm #order-description,
#thecheckout-confirm #accept-payment-term {
  padding: 20px;
  background: #ebebeb;
  border-radius: 20px;
  margin-top: 10px;
}

body #thecheckout-confirm {
  border-radius: 20px;
  margin-top: 30px;
  padding-top: 50px;
}

/* End */

/* Hook Delivery address block */
.split-unassigned-header .icon-countdown-miss {
  margin-right: 8px;
  padding: 2px 8px;
  line-height: 1.5;
}


/* ── Delivery-address hook + saved-address picker popup ───────────── */
.hook-display-delivery-address .so-address-delivery-inner {
    display: flex;
    gap: 30px;
}

.so-address-delivery-detail {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #252525;
  line-height: 1.5;
  border-radius: 20px;
  border: 1px solid;
  padding: 15px 30px;
  margin-right: auto;
  width: 100%;
  position: relative;
}

.so-address-delivery-detail i {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.so-address-delivery-detail .so-address-company {
  margin-bottom: 6px;
  font-size: 1rem;
}

.so-address-delivery-detail .so-address-empty {
  color: #999;
  font-style: italic;
}

.so-address-delivery-select {
  text-align: right;
}

.so-address-delivery-select .js-so-open-address-picker {
    background: #fff;
    border-radius: 20px;
    padding: 15px 30px;
    height: 100%;
    color: #252525;
    border-color: #b8b0a1;
    font-family: 'Poppins-Bold';
}

.so-address-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.so-address-picker-modal {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  width: 480px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.so-address-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #B8AFA1;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}

.so-address-picker-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.so-address-picker-body {
  overflow-y: auto;
  padding: 12px 16px 16px;
}

.so-saved-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.so-saved-items-empty {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

.saved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e0dbd5;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.saved-item:hover {
  background: #fff;
  border-color: #B8AFA1;
}

.saved-item.sel {
  background: #fff;
  border-color: #7d2e2e;
  box-shadow: 0 0 0 1px #7d2e2e inset;
}

.saved-item .si-main {
  flex: 1;
  min-width: 0;
  font-family: 'Poppins', sans-serif;
  color: #252525;
}

.saved-item .si-name {
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.saved-item .si-def {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #7d2e2e;
  color: #fff;
  text-transform: uppercase;
}

.saved-item .si-def.store {
  background: #7d2e2e;
}

.saved-item .si-line {
  margin-top: 3px;
  font-size: 0.82rem;
  color: #555;
}

.saved-item .si-edit {
  font-size: 1rem;
  color: #666;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.saved-item .si-edit:hover {
  background: #eee;
  color: #252525;
}

/* End  */

#thecheckout-shipping .extra-cart-field {
  display: flex;
  gap: 30px;
  padding-bottom: 35px;
}

body div#reference-delivery-field,
body #tracking-email-field {
  width: 50%;
  margin-top: 0;
}

#tracking-email-field {
  display: none;
}

div#tracking-email-field.active {
  display: flex;
}

body .fake-btn-adresse {
  display: none;
}

body div#thecheckout-address-invoice form#invoice-address,
body div#thecheckout-address-delivery form#delivery-address{
  height: 0;
  overflow: hidden;
}

body div#thecheckout-address-delivery form#delivery-address.active{
  height: 100%;
  overflow: visible;
}
/* ── Delivery choice cards (XD: CHECKOUT_split order block) ────────── */
/* Both cards stay visible at all times; only the selected one is dark.
   That is the combined card by default and the split card once
   #soDeliveryChoice carries .mode-split (added when the split panel opens). */
.so-delivery-choice {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin: 0 0 28px;
}

.so-delivery-choice .so-choice-card {
  --so-bg: #f5f5f5;
  --so-fg: #252525;
  --so-muted: #6a6a6a;
  --so-radio-bg: #fff;
  --so-radio-ring: inset 0 0 0 1px #cdcdcd;
  --so-radio-check: transparent;
  /* The source PNG is pure white, so it needs inverting on a light card. */
  --so-icon-filter: invert(1);

  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 126px;
  margin: 0;
  padding: 20px 40px;
  border: 0;
  border-radius: 18px;
  position: relative;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  background: var(--so-bg);
  color: var(--so-fg);
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, color 0.2s;
}

/* The selected card */
.so-delivery-choice:not(.mode-split) .so-choice-card--combined,
.so-delivery-choice.mode-split .so-choice-card--split {
  --so-bg: #252525;
  --so-fg: #fff;
  --so-muted: rgba(255, 255, 255, 0.82);
  --so-radio-bg: #b8afa1;
  --so-radio-ring: none;
  --so-radio-check: #fff;
  --so-icon-filter: none;
}

/* The other card is the one you click to switch mode */
.so-delivery-choice:not(.mode-split) .so-choice-card--split,
.so-delivery-choice.mode-split .so-choice-card--combined {
  cursor: pointer;
}

.so-delivery-choice:not(.mode-split) .so-choice-card--split:hover,
.so-delivery-choice.mode-split .so-choice-card--combined:hover {
  background: #efece7;
}

.so-delivery-choice .so-choice-radio {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  background: var(--so-radio-bg);
  box-shadow: var(--so-radio-ring);
}

/* Check mark — only visible on the selected card */
.so-delivery-choice .so-choice-radio::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 8px;
  height: 13px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: var(--so-radio-check);
  transform: rotate(45deg);
}

.so-delivery-choice .so-choice-body {
  flex: 1 1 auto;
  min-width: 0;
}

.so-delivery-choice .so-choice-title {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--so-fg);
}

.so-delivery-choice .so-choice-desc {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 2px;
  color: var(--so-muted);
}

.so-delivery-choice .so-choice-desc strong {
  color: var(--so-fg);
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
}

.so-delivery-choice .so-choice-later {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--so-muted);
}

.so-delivery-choice .so-choice-later .icon-countdown-miss {
  background: var(--so-fg);
  color: var(--so-bg);
  padding: 4px 7px;
}

.so-delivery-choice .so-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid #cdcdcd;
  border-radius: 999px;
  background: #fff;
  color: #252525;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

/* Date is optional: only pad it when it actually has a value, so the
   sentence still reads correctly when no expected date is known yet. */
.so-delivery-choice .so-choice-desc .expected-delivery_date:not(:empty) {
  margin: 0 0.25em;
}

.so-delivery-choice .so-date-chip .expected-delivery_date:empty::before {
  content: attr(data-placeholder);
  font-weight: 400;
  color: #6a6a6a;
}

.so-delivery-choice .so-date-chip-caret {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}

.so-delivery-choice .so-choice-icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--so-fg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.so-delivery-choice .so-choice-icon-glyph {
  width: 34px;
  height: auto;
  filter: var(--so-icon-filter);
}

/* Datepicker opened from the date chip lives inside the combined card */
.so-delivery-choice .so-choice-card--combined #ui-datepicker-div {
  z-index: 20;
}

@media (max-width: 991px) {
  .so-delivery-choice {
    flex-direction: column;
    gap: 16px;
  }

  /* flex: 1 1 0 ของกฎฐานตั้งใจไว้สำหรับแนวนอน (flex-basis คุมความกว้าง)
     พอสลับเป็น flex-direction: column ตัว flex-basis: 0 ไปคุม "ความสูง" แทน
     การ์ดเลยสูง 0 + padding ข้อความทั้งก้อนล้นออกไปทับหัวข้อ Indkøbskurv
     ต้องคืนเป็น auto ให้ความสูงมาจากเนื้อหาเอง */
  .so-delivery-choice .so-choice-card {
    flex: 0 0 auto;
    align-items: flex-start;
    min-height: 0;
    padding: 20px;
    gap: 14px;
  }

  .so-delivery-choice .so-choice-icon {
    width: 56px;
    height: 56px;
  }

  .so-delivery-choice .so-choice-icon-glyph {
    width: 26px;
  }
}

/* The block is prepended into .cart-grid (a bootstrap .row) by front.js —
   make it span the full row so the two choice cards get the card's width. */
.cart-grid > #split-order-checkout {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* ── Product line in the main cart list — XD "CHECKOUT_split order block – default" ──
   Artboard values: image 100x100 r20 border #E6E6E6, row pitch 140px (20px padding
   top/bottom + 1px #E6E6E6 divider), title Poppins-SemiBold 16, attribute label
   SemiBold 16 / value Regular 14, price Poppins-SemiBold 20, stock pill h27 r22
   (#7D2E2E ude / #A8BDB4 på lager), qty pill 144x43 r33 border #B8BABD, trash #B8AFA1.
   Scoped away from .split-cart-items so the split sections keep their own styling. */

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) {
  list-style: none;
  margin: 0;
  padding: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) > li.cart-item {
  padding: 20px 0;
  border-bottom: 1px solid #E6E6E6;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) > li.cart-item:last-child {
  border-bottom: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
  padding: 0;
}

/* ── Image box ───────────────────────────────────────────────────── */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image .product-image {
  display: block;
  width: 100%;
  height: 100%;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  margin: 0;
  border: 1px solid #E6E6E6;
  border-radius: 20px;
  box-shadow: 0px 3px 6px #00000029;
}

/* ── Body: description left, actions right ───────────────────────── */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding-left: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-desc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 0;
}

/* The template emits a <br> between price and attributes — it would become a
   flex item and force a wrap, so it is neutralised here instead of in the tpl. */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-desc > br {
  display: none;
}

/* XD order: title + attributes on one row, then price, then the stock pill. */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-title {
  order: 1;
  flex: 0 1 auto;
  width: auto;
  margin: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute {
  order: 2;
  flex: 0 1 auto;
  width: auto;
  margin: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price {
  order: 3;
  flex: 1 0 100%;
  width: 100%;
  margin: 6px 0 0;
}

/* The pill hugs its text like in XD (310px for the long string, 80px for "På lager").
   It still lands on its own row because .product-price above it is a 100%-wide
   flex item, which already forces the wrap — so no flex-basis:100% here. */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .bestkit_available_date,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra {
  order: 4;
  flex: 0 1 auto;
  width: auto;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.quantity-info {
  order: 5;
  flex: 1 0 100%;
  width: 100%;
}

/* ── Typography ──────────────────────────────────────────────────── */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-title a.label {
  display: inline;
  width: auto;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
  text-decoration: none;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute .label {
  display: inline;
  width: auto;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute .value {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #252525;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price .current-price .price,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price .current-price {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: #252525;
}

/* ── Stock pills ─────────────────────────────────────────────────── */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .bestkit_available_date {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 0 15px;
  min-height: 27px;
  line-height: 27px;
  border: 0;
  border-radius: 22px;
  background: #7D2E2E;
  color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .bestkit_available_date .preorder-label-warning {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #fff;
}

/* `.out-of-stock` stays excluded here: #thecheckout-cart-summary .out-of-stock is
   deliberately display:none in the main cart (the bestkit pill replaces it). */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra:not(.out-of-stock) {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 0 15px;
  min-height: 27px;
  line-height: 27px;
  border: 0;
  border-radius: 22px;
  background: #A8BDB4;
  color: #252525;
  box-shadow: 0px 3px 6px #00000029;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra span,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra strong,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra i {
  color: #252525;
  font-size: 12px;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra.out-of-stock {
  background: #B89650;
  border: 0;
  padding: 0 15px;
  line-height: 27px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  width: fit-content;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra.out-of-stock span,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra.out-of-stock strong,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra.out-of-stock i {
  color: #fff;
}

/* ── Actions: qty pill, line total, delete ───────────────────────── */
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  padding-top: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-actions > div {
  flex: 0 0 auto;
  padding: 0;
  line-height: normal;
  text-align: center;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty .qty-box {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 144px;
  height: 43px;
  padding: 0;
  border: 1px solid #B8BABD;
  border-radius: 33px;
  background: #fff;
  overflow: hidden;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty input.cart-line-product-quantity {
  order: 2;
  width: 48px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #252525;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-up,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-down {
  width: 48px;
  height: auto;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px !important;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-up {
  order: 3;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23252525" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>');
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-down {
  order: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23252525" viewBox="0 0 24 24"><path d="M24 10h-24v4h24z"/></svg>');
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price {
  min-width: 140px;
  text-align: right;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price .product-price,
body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price strong {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: #252525;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-delete {
  padding-top: 0;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-delete a.remove-from-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-delete i.material-icons.delete-from-cart {
  float: none;
  font-size: 22px;
  line-height: 1;
  color: #B8AFA1;
}

/* ── Narrow screens: stack the actions under the description ─────── */
@media (max-width: 767px) {
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line {
    align-items: flex-start;
    gap: 14px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-body {
    flex-wrap: wrap;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-actions {
    flex: 1 0 100%;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price {
    min-width: 0;
  }
}

/* ── Leveringsmetode block — XD "CHECKOUT_split order block – default" ────────
   Artboard values (card x2250 y1588, 1400x348 r20, 40px padding, content 1320 wide):
   radio 29px (selected = solid #B8AFA1, unselected = #fff + 1px #CCCCCC), 20px gap
   to the text, carrier name Poppins-SemiBold 16 #252525, delay + price
   Poppins-Regular 16 #252525, one 1px #E6E6E6 divider BETWEEN options only —
   no box around the selected row and no line under the last row. */

body#checkout #thecheckout-shipping form#js-delivery .delivery-options {
  margin-bottom: 0;
  padding: 0;
  border: none;
}

body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin: 0;
  padding: 20px 0 20px 12px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #E6E6E6;
}

/* XD draws the divider between the two options only. `:has()` is what tells the
   last row apart here — the tpl puts .carrier-extra-content and .clearfix after
   every row, so :last-child / :last-of-type never match the last option.
   The carrier-ref exclusions are the rows checkout.css:140 / :231 sets to
   display:none — a trailing hidden carrier must not count as "a row after me".
   Keep this list in sync with those two rules. */
body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option:not(:has(~ .delivery-option-row.delivery-option:not(.carrier-ref-54):not(.carrier-ref-364):not(.carrier-ref-365):not(.carrier-ref-366):not(.carrier-ref-368):not(.carrier-ref-369):not(.carrier-ref-370):not(.carrier-ref-371):not(.carrier-ref-377):not(.carrier-ref-378):not(.carrier-ref-380))) {
  border-bottom: 0;
}

/* The selected row is flat in XD — no outline, no radius. */
body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option.selected,
body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option.user-selected {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}

/* ── Radio ───────────────────────────────────────────────────────── */
body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option .shipping-radio {
  flex: 0 0 50px;
  width: 50px;
  padding: 0;
}

body#checkout #thecheckout-shipping form#js-delivery .delivery-options .shipping-radio .custom-radio {
  width: 29px;
  height: 29px;
  margin: 0;
  border: 1px solid #CCCCCC;
  background: #fff;
}

body#checkout #thecheckout-shipping form#js-delivery .delivery-options .shipping-radio .custom-radio:has(input[type="radio"]:checked) {
  border-color: #B8AFA1;
}

/* Fill the whole 29px circle instead of the theme's 12px dot, so the white
   check mark (drawn by checkout.css as ::after) sits on a solid disc. */
body#checkout #thecheckout-shipping form#js-delivery .delivery-options .shipping-radio .custom-radio input[type="radio"]:checked + span {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: #B8AFA1;
}

/* ── Label / text ────────────────────────────────────────────────── */
body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option label.delivery-option-label {
  width: calc(100% - 50px);
  margin: 0;
  padding: 0;
}

body#checkout #thecheckout-shipping .delivery-option-detail {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay {
  flex: 1 1 auto;
  min-width: 0;
}

body#checkout #thecheckout-shipping .delivery-options-list span.h6.carrier-name {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
}

body#checkout #thecheckout-shipping .delivery-option-delay span.carrier-delay,
body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay .delivery-option-price,
body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay .delivery-option-price * {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
}

/* ── Carrier logo (right) ────────────────────────────────────────── */
body#checkout #thecheckout-shipping .delivery-option-detail .delivery-option-logo {
  flex: 0 0 auto;
  width: 87px;
  max-width: 87px;
  max-height: none;
  text-align: right;
}

body#checkout #thecheckout-shipping .delivery-option-detail .delivery-option-logo img {
  max-width: 100%;
  max-height: 43px;
  width: auto;
  margin-right: 0;
}

@media (max-width: 767px) {
  body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option {
    padding-left: 0;
  }

  body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option .shipping-radio {
    flex: 0 0 40px;
    width: 40px;
  }

  body#checkout #thecheckout-shipping form#js-delivery .delivery-options .delivery-option-row.row.delivery-option label.delivery-option-label {
    width: calc(100% - 40px);
  }

  body#checkout #thecheckout-shipping .delivery-option-detail .delivery-option-logo {
    width: 60px;
    max-width: 60px;
  }
}

/* ── Betaling block — XD "CHECKOUT_split order block – default" ───────────────
   Artboard values (card x2250 y1976, 1400x345 r20, 40px padding, content 1320):
   radio 29px (selected = solid #B8AFA1, unselected = #fff + 1px #CCCCCC), 20px
   gap to the text, option title Poppins-SemiBold 16 #252525, 44px row pitch,
   NO divider between options and NO box around the selected one (unlike the
   shipping block, which does keep a divider), logo 37px wide flush right,
   bottom row = invoice-marking pill 509x53 r58 + "Betalingsbetingelser" +
   term pill 121x53 r58, both #fff with a 1px #B8AFA1 border. */

body#checkout #thecheckout-payment .payment-options {
  margin: 0;
  padding: 0;
  border: 0;
}

body#checkout #thecheckout-payment .payment-options .tc-main-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 15px 12px;
  border: 0;
  border-radius: 0;
}

/* checkout.css:43 draws a 1px #ddd rule under EVERY option via ::after (and the
   .line-remove escape hatch it pairs with is never applied — no JS sets that
   class). XD has no rules in this block at all, so the pseudo-element goes. */
body#checkout #thecheckout-payment .payment-options .tc-main-title:after {
  content: none;
  display: none;
}

/* checkout.css:35 boxes the selected option — XD keeps it flat. */
body#checkout #thecheckout-payment .payment-options .tc-main-title.selected {
  padding: 0 0 15px 12px;
  border: 0;
  border-radius: 0;
}

body#checkout #thecheckout-payment .payment-options > div > .payment-option {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* ── Radio ───────────────────────────────────────────────────────── */
body#checkout #thecheckout-payment .payment-options .payment-option > .custom-radio {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  margin: 0 20px 0 0;
  border: 1px solid #CCCCCC;
  background: #fff;
}

body#checkout #thecheckout-payment .payment-options .payment-option > .custom-radio:has(input[type="radio"]:checked) {
  border-color: #B8AFA1;
}

body#checkout #thecheckout-payment .payment-options .payment-option > .custom-radio input[type="radio"]:checked + span {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: #B8AFA1;
}

/* ── Label / title ───────────────────────────────────────────────── */
body#checkout #thecheckout-payment .payment-options .payment-option > label {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body#checkout #thecheckout-payment .payment-options .payment-option label .payment-call-to-action-and-logo span.h6 {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
}

/* ── Logo (right) ────────────────────────────────────────────────── */
body#checkout #thecheckout-payment .payment-options > div > .payment-option > .payment-logo {
  flex: 0 0 auto;
  width: auto;
  margin: 0 0 0 auto;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* XD shows the EAN artwork on its own — checkout.css:48/49 wraps it in an extra
   1px var(--secondary) box that the design does not have. */
body#checkout #thecheckout-payment .payment-options > div > .payment-option .payment-logo img,
body#checkout #thecheckout-payment .payment-options > div > .payment-option .payment-logo.eanpayment img {

  width: auto;
  margin-right: 0;
  border: 0;
  border-radius: 0;
}

/* ── Bottom row: invoice marking + payment term ──────────────────── */
/* One flex row as in XD: [Mærkning faktura] [Betalingsbetingelser] [8 dage].
   splitorders/views/js/custom2.js docks #reference-invoice-field into
   .along-payment-term to make that possible — catalogshowroom's front.js drops
   it outside .payment-options, where it shares no parent with the label and the
   dropdown. The `> #reference-invoice-field` rule below is the fallback for
   when custom2.js has not docked it. Both wear the XD pill: 53px tall, r58,
   #fff with a 1px #B8AFA1 border. */
body#checkout #thecheckout-payment .along-payment-term {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 34px;
  margin: 0;
  padding: 35px 0 0 12px;
  border-bottom: none;
}

body#checkout #thecheckout-payment .along-payment-term .h6 {
  margin: 0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
  white-space: nowrap;
}

body#checkout #thecheckout-payment .along-payment-term .payment-term-selected {
  box-sizing: border-box;
  width: 140px;
  height: 53px;
  padding: 0 44px 0 20px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  background-color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  background-position: right 20px center;
  background-size: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 51px;
  color: #252525;
}

body#checkout #thecheckout-payment .along-payment-term > #reference-invoice-field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 38.5%;
  width: 38.5%;
  height: 53px;
  margin: 0;
  padding: 0 30px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  background: #fff;
  box-shadow: 0px 3px 6px #00000029;
}

/* Fallback: still a direct child of the block (custom2.js off or not run yet) */
body#checkout #thecheckout-payment > #reference-invoice-field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 38.5%;
  height: 53px;
  margin: 20px 0 0 12px;
  padding: 0 30px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  background: #fff;
  box-shadow: 0px 3px 6px #00000029;
}

body#checkout #thecheckout-payment #reference-invoice-field h5.po_number_title {
  margin: 0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #B8AFA1;
  white-space: nowrap;
}

body#checkout #thecheckout-payment #reference-invoice-field input#reference_invoice_field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #252525;
}

body#checkout #thecheckout-payment #reference-invoice-field .check-circle {
  flex: 0 0 auto;
  margin-right: 0;
  font-size: 12px;
  min-width: 20px;
}

@media (max-width: 991px) {
  body#checkout #thecheckout-payment .along-payment-term {
    gap: 16px;
    padding: 24px 0 0;
  }

  /* ธีมมีกฎมือถือของตัวเองที่ themes/classic/assets/css/checkout.css:845+ ซึ่ง
     พลิก #reference-invoice-field เป็น flex-direction: column + align-items: start
     แล้วเปลี่ยน input เป็นเส้นขีดล่าง ทับกับทรงแคปซูลของ XD ที่ตั้ง height ไว้
     53px พอดี ผลคือ label ไปลอยกลางกล่องแล้ว input หายไปเลย (ตามภาพ)
     ตรงนี้จึงบังคับกลับเป็นแถวนอนให้เหมือนเดสก์ท็อป แค่กว้างเต็มบรรทัด */
  body#checkout #thecheckout-payment #reference-invoice-field,
  body#checkout #thecheckout-payment .along-payment-term > #reference-invoice-field {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 53px;
    margin-left: 0;
    padding: 0 20px;
    border-radius: 58px;
  }

  /* ธีมถอดกรอบ input ออกแล้วใส่เส้นขีดล่างสี primary — ในทรงแคปซูลไม่ต้องมี */
  body#checkout #thecheckout-payment #reference-invoice-field input#reference_invoice_field {
    width: auto;
    padding: 0;
    border: 0;
    border-bottom: 0;
    color: #252525;
    font-size: 14px;
  }

  body#checkout #thecheckout-payment #reference-invoice-field h5.po_number_title {
    font-size: 14px;
  }

  /* ธีมดัน check-circle ไปเป็น absolute right/bottom 18px ซึ่งอิงกล่องทรงสูง */
  body#checkout #thecheckout-payment #reference-invoice-field .check-circle {
    position: static;
    right: auto;
    bottom: auto;
  }
}

@media (max-width: 767px) {
  body#checkout #thecheckout-payment .payment-options .tc-main-title,
  body#checkout #thecheckout-payment .payment-options .tc-main-title.selected {
    padding: 0 0 15px;
  }
}

/* ── "Samlet total" / confirm block — XD "CHECKOUT_split order block – default" ─
   Artboard values (card x2250 y2361, 1400x537 r20, 40px padding, content 1320):
   subtotal rows label Poppins-Regular 16 / value Poppins-SemiBold 16 #252525,
   36px pitch; 2px #F0F0F0 rule before the totals; total bar 1320x75 split 50/50
   (#252525 left, #B8AFA1 right) rounded only on the two BOTTOM corners, text
   Poppins-SemiBold 30 #fff with 40px side padding; confirm button 399x73 r37
   #B8AFA1, Poppins-Bold 30 #fff, centred 40px under the bar. */

body#checkout #thecheckout-confirm {
  padding: 40px;
  border-radius: 20px;
}

body#checkout #thecheckout-confirm .cart-detailed-totals {
  width: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}

/* Card heading, XD Poppins-Bold 30 #252525. The <h2> itself lives in
   thecheckout/views/templates/front/blocks/cart-summary.tpl (translatable);
   splitorders' front.js docks that card inside #thecheckout-confirm. */
body#checkout #thecheckout-confirm h2.cart-summary-title {
  margin: 0 0 20px;
  padding: 0;
  font-family: 'Poppins-Bold', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.35;
  color: #252525;
}

@media (max-width: 767px) {
  body#checkout #thecheckout-confirm h2.cart-summary-title {
    font-size: 20px;
    margin-bottom: 16px;
  }
}

/* The rows keep the template's own block + .value{float:right} layout — it
   right-aligns every row correctly, including the shipping row that carries a
   trailing displayCheckoutSubtotalDetails wrapper. Turning them into flex rows
   broke that alignment and un-hid .hidden rows, so only type is set here. */

body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line span.label,
body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line .label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line span.value {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

/* Dividers are left to the block's existing rules on purpose — adding the XD
   2px #F0F0F0 rule on #cart-totals only stacked another line into a section
   that already draws its own. */

/* "Total inkl. moms" — same weight as the values above it */
body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total.cart-total-tax-included span,
body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total.cart-total-auto-tax span {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

/* ── Two-tone total bar ──────────────────────────────────────────── */
body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 30px 0 0 !important;
}

body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 0 0 50%;
  width: 50%;
  height: 75px;
  padding: 0 40px;
  color: #fff;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px !important;
  line-height: 1.2;
}

/* XD rounds the bottom corners only — the bar sits flush under the totals. */
body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span.label {
  background: #252525;
  border-radius: 0 0 0 20px;
}

body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span.value {
  background: #B8AFA1;
  border-radius: 0 0 20px 0;
  justify-content: flex-end;
  text-align: right;
}

/* ── Confirm button ──────────────────────────────────────────────── */
body#checkout #thecheckout-confirm #confirm_order {
  box-sizing: border-box;
  display: block;
  width: 399px;
  max-width: 100%;
  height: 73px;
  margin: 40px auto 0;
  padding: 0 20px;
  border: 0;
  border-radius: 37px;
  background: #B8AFA1;
  background-color: #B8AFA1;
  font-family: 'Poppins-Bold', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 73px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 991px) {
  body#checkout #thecheckout-confirm {
    padding: 24px;
  }

  body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span {
    height: 56px;
    padding: 0 20px;
    font-size: 20px !important;
  }

  body#checkout #thecheckout-confirm #confirm_order {
    width: 100%;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
  }
}

@media (max-width: 575px) {
  body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span {
    height: 48px;
    padding: 0 14px;
    font-size: 16px !important;
  }
}

/* ── Split mode: hide the stand-alone checkout blocks ─────────────────────────
   Toggled by splitorders/views/js/custom2.js, which mirrors the `mode-split`
   class that front.js puts on #soDeliveryChoice. !important because thecheckout
   sets inline display on these blocks when it reloads them over ajax. */

/* The blocks ship with a sibling placeholder that draws its own spacing —
   hide it too so split mode does not leave a gap where the block was. */
body#checkout .tc-block-placeholder.thecheckout-address-invoice.so-hidden-by-split,
body#checkout .tc-block-placeholder.thecheckout-shipping.so-hidden-by-split {
  display: none !important;
}

/* ── Split mode: drop the step number on Betaling ─────────────────────────────
   The circled digit is a pseudo element from the theme —
   .checkout-block.num-4 .block-header:before { content:'3' }
   (themes/classic/assets/css/checkout.css:339, numbering set up at :14). It is
   hard-coded per block, so once split mode hides Fakturaadresse (num-2 = "1")
   and Leveringsmetode (num-3 = "2") the only step left still calls itself 3.
   Rather than renumber, XD drops the counter in split mode.

   :has() instead of a class from custom2.js because #soDeliveryChoice is not an
   ancestor of #thecheckout-payment — the state lives in a different subtree, and
   this file already leans on :has() for the carrier rows. */
body#checkout:has(#soDeliveryChoice.mode-split) #thecheckout-payment .block-header:before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* ระยะห่างหัว "Betaling" เฉพาะตอนแยกออเดอร์ — เงื่อนไขเดียวกับกฎซ่อนเลขข้างบน
   คือแขวนไว้บน body ที่ :has(#soDeliveryChoice.mode-split) พอ front.js ถอด
   คลาส mode-split ออก กฎนี้ก็หลุดเอง โหมดปกติจึงไม่โดนกระทบ
   (คลาสจริงมาจาก modules/thecheckout/views/templates/front/blocks/payment.tpl:11
   ซึ่งเป็น .block-header.payment-method-header ตัวที่โหลดผ่าน ajax) */
body#checkout:has(#soDeliveryChoice.mode-split) div#thecheckout-payment .block-header.payment-method-header {
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 10px;
}

/* ── Split panel frame — XD "CHECKOUT_split order block – splited – Senere Levering"
   Artboard values (content column 300..1620, i.e. 1320 wide):
   heading "Opret dellevering" Poppins-SemiBold 30 #252525 sitting ON THE PAGE
   above the card — no dark bar, no wrapper; card y573 1320x1576 r20 #fff with a
   1px #F5F5F5 border; tab strip flush at the card's top edge, 44px tall, thirds
   of 440/442/440, active #252525 + #fff text, inactive #F5F5F5 + 1px #252525
   border and only the outer top corners rounded (20); body padded 40px with no
   inner box at all. The current build wraps everything in a second bordered
   card — that is what these rules undo. */

/* Panel wrapper: the white card belongs to the tab strip, not to this. */
body#checkout #splitOrderPanel {
  margin: 30px 0 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* Header: plain heading on the page background */
body#checkout #splitOrderPanel .split-order-header-front {
  padding: 0 0 18px;
  border-radius: 0;
  background: transparent;
  color: #252525;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.35;
  justify-content: flex-start;
  gap: 20px;
}

/* The fork glyph is a white PNG — invert it now that it sits on white. */
body#checkout #splitOrderPanel .split-order-header-front .main-title img {
  filter: invert(1);
  max-width: 40px;
}

/* Close button was white-on-black; keep it usable on the light header. */
body#checkout #splitOrderPanel .split-order-header-front button#splitOrderCancelBtn {
  position: static;
  transform: none;
  margin-left: auto;
  padding: 8px;
  border-color: #cdcdcd;
  background: transparent;
  color: #252525;
}

/* ── Card + tab strip ────────────────────────────────────────────── */
body#checkout #splitOrderPanel .split-tabs-container {
  margin: 0;
  border: 1px solid #F5F5F5;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

body#checkout #splitOrderPanel .split-tabs-nav {
  background: transparent;
  border-bottom: 0;
}

body#checkout #splitOrderPanel .split-tab-btn {
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #252525;
  border-right-width: 0;
  border-radius: 0;
  background: #F5F5F5;
  color: #252525;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

body#checkout #splitOrderPanel .split-tab-btn:last-child {
  border-right-width: 1px;
}

/* Only the two outer top corners are rounded in XD. */
body#checkout #splitOrderPanel .split-tab-btn:first-child {
  border-radius: 20px 0 0 0;
}

body#checkout #splitOrderPanel .split-tab-btn:last-child {
  border-radius: 0 20px 0 0;
}

/* inset shadows stand in for XD's 1px #F5F5F5 seams either side of the dark tab */
body#checkout #splitOrderPanel .split-tab-btn.active {
  background: #252525;
  border-color: #252525;
  color: #fff;
  box-shadow: inset 1px 0 0 #F5F5F5, inset -1px 0 0 #F5F5F5;
}

body#checkout #splitOrderPanel .split-tab-btn:hover:not(.active) {
  background: #ebebeb;
  color: #252525;
}

body#checkout #splitOrderPanel .split-tabs-body {
  padding: 34px 40px 0;
  background: #fff;
}

/* ── No inner card: the section flows straight into the tab body ─── */
body#checkout #splitOrderPanel .split-section-front,
body#checkout #splitOrderPanel .split-unassigned-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body#checkout #splitOrderPanel .split-section-header-front {
  padding: 0 0 0px;
  border-bottom: 0;
}

/* Leveringsdato row: label + date pill, then a 1px #E6E6E6 rule */
body#checkout #splitOrderPanel .split-section-delivery-date-front {
  gap: 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #E6E6E6;
  background: transparent;
}

body#checkout #splitOrderPanel .split-delivery-date-front {
  box-sizing: border-box;
  width: 178px;
  height: 33px;
  padding: 0 20px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #252525;
}

/* ── Delivery-address row: 816 + 384 of the 1240 content width ───── */
body#checkout #splitOrderPanel .hook-display-delivery-address .so-address-delivery-inner {
  gap: 40px;
  align-items: stretch;
}

body#checkout #splitOrderPanel .so-address-delivery-detail {
  flex: 0 0 65.8%;
  width: 65.8%;
  min-height: 88px;
  padding: 20px;
  border: 2px solid #B8AFA1;
  border-radius: 20px;
}

body#checkout #splitOrderPanel .so-address-delivery-select {
  flex: 0 0 31%;
  width: 31%;
}

body#checkout #splitOrderPanel .so-address-delivery-select .js-so-open-address-picker {
  box-sizing: border-box;
  width: 100%;
  min-height: 88px;
  padding: 20px;
  border: 2px solid #CCCCCC;
  border-radius: 20px;
  background: #fff;
  color: #A0A0A0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  text-transform: none;
}

@media (max-width: 991px) {
  body#checkout #splitOrderPanel .split-tabs-body {
    padding: 24px 16px 0;
  }

  body#checkout #splitOrderPanel .split-order-header-front {
    font-size: 22px;
  }

  body#checkout #splitOrderPanel .so-address-delivery-detail,
  body#checkout #splitOrderPanel .so-address-delivery-select {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ── Split grand totals ("Samlet total — alle leveringer") ────────────────────
   XD "splited – Senere Levering – draft 5", card x260 y2229 1400x424 r20 #fff,
   NO border:
     header bar   1400x123, radius 20 20 0 0, #252525, Poppins-Bold 30 #fff,
                  40px side padding
     rows         label Poppins-Regular 16 / value Poppins-SemiBold 16 #252525,
                  36px pitch, 40px side padding
     rule         2px #F0F0F0 above "Total inkl. moms" (that row is SemiBold)
     final bar    1400x75 flush to the card edges — two 700px halves, #252525 |
                  #B8AFA1, Poppins-SemiBold 30 #fff, rounded only bottom-left /
                  bottom-right, and it forms the card's own bottom edge
   The current build draws a 2px #252525 outline, a 16px radius and a plain
   bordered last row instead — that is what these rules replace. */

body#checkout .split-grand-totals-front {
  margin: 30px 0 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

body#checkout .split-grand-totals-front .split-grand-header {
  display: flex;
  align-items: center;
  min-height: 123px;
  padding: 20px 40px;
  border-radius: 20px 20px 0 0;
  background: #252525;
  color: #fff;
  font-family: 'Poppins-Bold', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.35;
}

body#checkout .split-grand-totals-front .split-grand-rows {
  padding: 40px 40px 0;
}

body#checkout .split-grand-totals-front .split-grand-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
  margin: 0 0 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

body#checkout .split-grand-totals-front .split-grand-row .split-grand-value {
  flex: 0 0 auto;
  text-align: right;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
}

/* "Total inkl. moms" — SemiBold both sides, 2px #F0F0F0 rule above it */
body#checkout .split-grand-totals-front .split-grand-row.split-grand-incl-total-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid #F0F0F0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
}

body#checkout .split-grand-totals-front .split-grand-row.split-grand-incl-total-row strong {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

/* ── Final two-tone bar ──────────────────────────────────────────── */
/* Negative side margins cancel .split-grand-rows' 40px padding so the bar runs
   edge to edge and becomes the card's bottom, exactly as in XD. */
body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 30px -40px 0;
  padding: 0;
  border-top: 0;
  font-size: 30px;
  line-height: 1.2;
}

body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 0 0 50%;
  width: 50%;
  min-height: 75px;
  padding: 0 40px;
  color: #fff;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
}

body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final .split-grand-label {
  background: #252525;
  border-radius: 0 0 0 20px;
}

body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final .split-grand-value {
  background: #B8AFA1;
  border-radius: 0 0 20px 0;
  justify-content: flex-end;
  text-align: right;
}

body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final strong {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
}

@media (max-width: 991px) {
  body#checkout .split-grand-totals-front .split-grand-header {
    min-height: 0;
    padding: 20px 24px;
    font-size: 22px;
  }

  body#checkout .split-grand-totals-front .split-grand-rows {
    padding: 24px 24px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final {
    margin: 24px -24px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span {
    min-height: 56px;
    padding: 0 20px;
    font-size: 20px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final strong {
    font-size: 20px;
  }
}

/* The card lands in a flex row (.flex-split-vertical.checkout-area-3's parent),
   so it has to claim the full row width or it shrinks to its content. */
body#checkout .split-grand-totals-front {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* custom2.js keeps the server-rendered #splitGrandTotals where the template put
   it — front.js writes the figures into its ids and must keep finding them — and
   paints an id-stripped copy (#splitGrandTotalsFake) at the XD position instead.
   This hides the source; !important because front.js calls .show() on it. */
body#checkout .split-grand-totals-front.so-grand-totals-source {
  display: none !important;
}

/* Split mode carries its own "Samlet total — alle leveringer" header, so the
   confirm card's heading is hidden to avoid two identical titles on one page. */
body#checkout #thecheckout-confirm h2.cart-summary-title.so-hidden-by-split {
  display: none !important;
}

/* ── Split section content — XD "splited – Senere Levering – draft 5" ─────────
   EVERY rule below is prefixed with #splitDeliveryContent on purpose: that is
   the container JS fills with the tab panels, so nothing here can reach the
   normal checkout blocks that share these class names.

   Artboard values, content column x340..1580 (1240 wide, card padding 40):
     section rules      1px #E6E6E6 across the full 1240
     Leveringsdato      label SemiBold 16 + pill 178x33 r58, 1px #B8AFA1
     Leveringsadresse   heading SemiBold 16 / "Valgt..." Regular 14, then
                        address box 816x88 r20 2px #B8AFA1 beside a
                        384x88 r20 2px #CCCCCC picker, 40px apart
     Leveringsmetode    carrier boxes 1240x108 r20, selected 2px #B8AFA1,
                        unselected 1px #CCCCCC, radio 29px, 20px inner padding
     Mærkning/E-mail    two 600px columns, label SemiBold 16 above a
                        600x36 r58 pill with a 1px #B8AFA1 border            */

/* Big frame padding — the content sat flush against the card edge. */
body#checkout #splitDeliveryContent .split-tabs-body {
  padding: 20px;
  background: #fff;
}

body#checkout #splitDeliveryContent .split-section-front,
body#checkout #splitDeliveryContent .split-unassigned-section {
  margin: 0;
  padding: 0 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ── Leveringsdato ───────────────────────────────────────────────── */
body#checkout #splitDeliveryContent .split-section-delivery-date-front {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0 0 0px;
  border-bottom: 0px solid #E6E6E6;
  background: transparent;
}

body#checkout #splitDeliveryContent .split-section-delivery-date-front label {
  margin: 0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
  white-space: nowrap;
}

body#checkout #splitDeliveryContent .split-delivery-date-front {
  box-sizing: border-box;
  width: 178px;
  height: 33px;
  padding: 0 20px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  background: #fff;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #252525;
}

/* ── Leveringsadresse ────────────────────────────────────────────── */
body#checkout #splitDeliveryContent .split-address-section-front {
  margin: 0;
  padding: 20px 0 30px;
  border-bottom: 1px solid #E6E6E6;
  background: transparent;
}

body#checkout #splitDeliveryContent .split-address-label .label-title {
  display: block;
  margin: 0 0 6px;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

body#checkout #splitDeliveryContent .split-address-label .invoice-address-info {
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #252525;
}

/* Address card + picker side by side (816 / 384 of 1240, 40px apart) */
/* Two templates exist for this hook: views/templates/hook/address-delivery.tpl
   wraps everything in .hook-display-delivery-address, while the one the split
   panel renders (views/templates/front/hook/address-delivery.tpl) does not — it
   uses .row + .col-md-6 instead. Target .so-address-delivery-inner directly so
   both shapes get the XD row, and cancel the bootstrap column sizing. */
body#checkout #splitDeliveryContent .so-address-delivery-inner {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 40px;
  margin: 0;
}

body#checkout #splitDeliveryContent .so-address-delivery-detail {
  flex: 0 0 65.8%;
  max-width: 65.8%;
  width: 65.8%;
  min-height: 88px;
  margin: 0;
  padding: 20px;
  border: 2px solid #B8AFA1;
  border-radius: 20px;
}

body#checkout #splitDeliveryContent .so-address-delivery-select {
  flex: 0 0 31%;
  max-width: 31%;
  width: 31%;
  margin: 0;
  padding: 0;
  text-align: left;
}

body#checkout #splitDeliveryContent .so-address-delivery-select .js-so-open-address-picker {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 20px;
  border: 2px solid #CCCCCC;
  border-radius: 20px;
  background: #fff;
  color: #A0A0A0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  text-transform: none;
}

/* ── Leveringsmetode (carrier block cloned into the section) ─────── */
body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-options {
  margin: 0;
  padding: 0;
  border: 0;
}

body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  min-height: 108px;
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid #CCCCCC;
  border-radius: 20px;
  background: #fff;
}

/* ming hide เพราะว่า .selected / .user-selected เป็นคลาสที่ thecheckout ใส่มา
   ตอนเรนเดอร์ฝั่งเซิร์ฟเวอร์ ไม่มีใครถอด/เติมตอนคลิก กรอบเลยค้างที่ใบเดิม
body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option.selected,
body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option.user-selected {
  border: 3px solid #B8AFA1;
}
*/

/* อ่านสถานะจาก radio ตัวจริงด้วย :has(:checked) แทน — เบราว์เซอร์อัปเดต
   :checked ให้ทันทีที่คลิก กรอบเลยสลับตามเอง ไม่ต้องพึ่ง JS
   (กฎวงกลม radio ข้างล่างก็ใช้วิธีเดียวกันอยู่แล้ว) */
body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option:has(input[type="radio"]:checked) {
  border: 3px solid #B8AFA1;
}

body#checkout #splitDeliveryContent .split-thecheckout-block .shipping-radio .custom-radio {
  width: 29px;
  height: 29px;
  margin: 0;
  border: 1px solid #CCCCCC;
  background: #fff;
}

body#checkout #splitDeliveryContent .split-thecheckout-block .shipping-radio .custom-radio:has(input[type="radio"]:checked) {
  border-color: #B8AFA1;
}

body#checkout #splitDeliveryContent .split-thecheckout-block .shipping-radio .custom-radio input[type="radio"]:checked + span {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: #B8AFA1;
}

body#checkout #splitDeliveryContent .split-thecheckout-block span.h6.carrier-name {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
}

body#checkout #splitDeliveryContent .split-thecheckout-block span.carrier-delay,
body#checkout #splitDeliveryContent .split-thecheckout-block .name-and-delay .delivery-option-price,
body#checkout #splitDeliveryContent .split-thecheckout-block .name-and-delay .delivery-option-price * {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
}

/* Section wrapper + heading.
   .split-thecheckout-block.js-split-thecheckout-shipping is filled by
   populateSplitTheCheckoutBlocks() (views/js/front.js:618) with a clone of
   #thecheckout-shipping, so the clone still carries .checkout-block.num-N and
   the theme hangs the step-number circle on
   .checkout-block[class*='num-'] .block-header:before
   (themes/classic/assets/css/checkout.css:14 + :333). XD has no number in the
   split panel — just a plain "Leveringsmetode" label, SemiBold 16 / #252525 —
   so the pseudo element is killed here and the header is retyped. */
body#checkout #splitDeliveryContent .split-thecheckout-block.js-split-thecheckout-shipping {
  margin: 0;
  padding: 20px 0 0;
  border-bottom: 1px solid #E6E6E6;
  background: transparent;
  padding-bottom: 10px;
}

/* The clone brings the card chrome of the standalone block with it. */
body#checkout #splitDeliveryContent .split-thecheckout-block .checkout-block,
body#checkout #splitDeliveryContent .split-thecheckout-block .inner-area,
body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-options-list,
body#checkout #splitDeliveryContent .split-thecheckout-block .form-fields {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body#checkout #splitDeliveryContent .split-thecheckout-block .block-header:before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

body#checkout #splitDeliveryContent .split-thecheckout-block .block-header {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  color: #252525;
}

/* "Other shipping options" is dead weight in the clone: the toggle binds to
   #expand_other_shipping_options and populateSplitTheCheckoutBlocks() renames
   every id to data-scoped-id, so the button collapses nothing — and XD does
   not show it. Every carrier is listed already. */
body#checkout #splitDeliveryContent .split-thecheckout-block [data-scoped-id^="expand_other_shipping_options"] {
  display: none !important;
}

/* ── Mærkning forsendelse / E-mail til tracking — two columns ────── */
/* inline-flex instead of turning .split-section-front into a flex row: the two
   fields are plain siblings among the products and totals, so making the parent
   a flex container would relay out everything else in the section too. */
body#checkout #splitDeliveryContent .split-reference-delivery.js-split-reference-delivery,
body#checkout #splitDeliveryContent .split-tracking-email.js-split-tracking-email {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  box-sizing: border-box;
  width: 48%;
  margin: 30px 0;
  padding: 0;
  border-bottom: 0;
  vertical-align: top;
  background: transparent;
}

body#checkout #splitDeliveryContent .split-reference-delivery.js-split-reference-delivery {
  margin-right: 3.5%;
}

body#checkout #wrapper #splitDeliveryContent .split-reference-delivery label,
body#checkout #wrapper #splitDeliveryContent .split-tracking-email label {
  margin: 0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
  white-space: normal;
}

body#checkout #splitDeliveryContent .split-reference-delivery .js-ref-delivery,
body#checkout #splitDeliveryContent .split-tracking-email .js-tracking-email {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  padding: 0 20px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #252525;
}

/* Rule closing the field row, as in XD */
body#checkout #splitDeliveryContent .split-tracking-email.js-split-tracking-email {
  border-bottom: 0;
  box-shadow: 0 1px 0 0 transparent;
}

body#checkout #splitDeliveryContent .split-section-front .split-cart-items {
  border-top: 1px solid #E6E6E6;
}

.box-for-inline.checkout-box {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 15px;
}

.split-address-label,
.split-address-options,
.split-saved-address-info.js-saved-address-info {
    display: none;
}

.split-section-front .cart-items li.cart-item {
    padding: 15px 0px;
}
.split-section-totals-front {
    padding: 15px 0px 0;
    border-top: 1px solid #e6e6e6;
}

@media (max-width: 767px) {
  body#checkout #splitDeliveryContent .split-reference-delivery.js-split-reference-delivery,
  body#checkout #splitDeliveryContent .split-tracking-email.js-split-tracking-email {
    display: flex;
    width: 100%;
    margin-right: 0;
  }

  body#checkout #splitDeliveryContent .hook-display-delivery-address .so-address-delivery-inner {
    flex-direction: column;
    gap: 16px;
  }

  body#checkout #splitDeliveryContent .so-address-delivery-detail,
  body#checkout #splitDeliveryContent .so-address-delivery-select {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ── Quantity picker popup — XD design tokens ─────────────────────────────────
   ทุกกฎ scope ด้วย #splitQtyPickerModal เพราะ .split-assign-overlay /
   .split-assign-modal / .split-assign-header / .split-assign-body /
   .split-assign-btn ถูกใช้ร่วมกับป๊อปอัป "เลือกปลายทาง" อีกตัวหนึ่งด้วย
   ถ้าเขียนทับตรง ๆ ป๊อปอัปนั้นจะเพี้ยนตาม

   โทนตาม XD: Poppins, ตัวหนังสือ #252525, accent #B8AFA1, เส้นคั่น #E6E6E6,
   พื้นรอง #F5F5F5, มุมการ์ด 20px, ปุ่มทรงแคปซูล r37                        */
#splitQtyPickerModal.split-assign-overlay {
  padding: 20px;
  background: rgba(37, 37, 37, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

#splitQtyPickerModal .split-assign-modal {
  box-sizing: border-box;
  width: 480px;
  max-width: 100%;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
  /* fadeIn ของ jQuery ทำแค่ opacity ของ overlay ตัวการ์ดเลยสไลด์ขึ้นเองอีกชั้น */
  animation: splitQtyPickerIn 0.18s ease-out;
}

@keyframes splitQtyPickerIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* หัวป๊อปอัปเป็นแถบสีของธีม อ่านจาก --primary ที่ประกาศไว้ใน
   themes/classic/assets/css/custom.css:1 (:root { --primary: #B8AFA1 }) —
   ใช้ตัวแปรแทน hex ตรง ๆ เวลาเปลี่ยนสีธีมป๊อปอัปจะเปลี่ยนตามเอง
   ค่าสำรองหลังคอมมาไว้กันกรณีไฟล์ธีมยังไม่โหลด */
#splitQtyPickerModal .split-assign-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 30px;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--primary, #B8AFA1);
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
}

/* ไอคอน call_split ใน tpl ตั้ง inline style ไว้ (font-size:18px + margin-right)
   เลยต้องทับด้วย !important ไม่งั้น gap ของ flex จะเบิ้ลกับ margin เดิม */
#splitQtyPickerModal .split-assign-header .material-icons {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 26px !important;
  color: #fff;
}

#splitQtyPickerModal .split-assign-body {
  padding: 30px;
}

#splitQtyPickerModal .split-assign-product-name {
  margin: 0 0 14px;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #252525;
}

/* "Available: 2" ทำเป็นชิปเหมือนป้ายสถานะสต๊อกใน XD */
#splitQtyPickerModal .split-qty-picker-remaining {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  padding: 5px 16px;
  border-radius: 58px;
  background: #F5F5F5;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #252525;
}

#splitQtyPickerModal .split-qty-picker-remaining strong {
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  color: #252525;
}

/* label อยู่บนช่องกรอก ระยะ 8px เท่ากับคู่ Mærkning / E-mail ใน XD */
#splitQtyPickerModal .split-qty-picker-input-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 30px;
}

#splitQtyPickerModal .split-qty-picker-input-row label {
  margin: 0;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #252525;
}

#splitQtyPickerModal .split-qty-picker-input-row input.js-qty-picker-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 20px;
  border: 1px solid #B8AFA1;
  border-radius: 58px;
  background: #fff;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #252525;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* เบราว์เซอร์วาดกรอบโฟกัสสีฟ้าของตัวเอง ทับด้วยวงแหวนสี accent แทน */
#splitQtyPickerModal .split-qty-picker-input-row input.js-qty-picker-input:focus {
  outline: 0;
  border-color: #B8AFA1;
  box-shadow: 0 0 0 3px rgba(184, 175, 161, 0.35);
}

#splitQtyPickerModal .split-qty-picker-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

#splitQtyPickerModal .split-qty-picker-actions .btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 50px;
  margin: 0;
  padding: 0 28px;
  border-radius: 37px;
  font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#splitQtyPickerModal .split-qty-picker-actions .btn.js-qty-picker-cancel {
  border: 1px solid #CCCCCC;
  background: #fff;
  color: #252525;
}

#splitQtyPickerModal .split-qty-picker-actions .btn.js-qty-picker-cancel:hover,
#splitQtyPickerModal .split-qty-picker-actions .btn.js-qty-picker-cancel:focus {
  border-color: #B8AFA1;
  background: #F5F5F5;
  color: #252525;
}

/* ปุ่มยืนยัน — .split-assign-btn เดิมเป็นบล็อกเต็มความกว้าง ชิดซ้าย พื้นเทา
   (ใช้เป็นรายการตัวเลือกในป๊อปอัปอีกตัว) ต้องเขียนทับให้เป็นปุ่มดำทรงแคปซูล */
#splitQtyPickerModal .split-qty-picker-actions .btn.split-assign-btn {
  width: auto;
  border: 1px solid #252525;
  background: #252525;
  color: #fff;
  text-align: center;
}

#splitQtyPickerModal .split-qty-picker-actions .btn.split-assign-btn:hover,
#splitQtyPickerModal .split-qty-picker-actions .btn.split-assign-btn:focus {
  border-color: #B8AFA1;
  background: #B8AFA1;
  color: #fff;
}

body#checkout #splitDeliveryContent .split-tabs-body {
    padding: 0px;
    background: #fff;
}
body#checkout #splitOrderPanel .split-tabs-container .split-section-front.split-tab-panel{
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    box-shadow: 2px 8px 6px #00000094 !important;
    border: 1px solid #F5F5F5 !important;
    border-radius: 0 0 20px 20px !important;
    padding-top: 30px !important;
}
body#checkout div#splitGrandTotals {
    border: 1px solid #f5f5f5;
}
body#checkout:has(#soDeliveryChoice.mode-split) div#thecheckout-payment .block-header.payment-method-header {
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 10px;
}

body#checkout .ui-datepicker .ui-datepicker-prev,
body#checkout .ui-datepicker .ui-datepicker-next {
    top: 16px;
}
body#checkout #thecheckout-address-invoice.so-hidden-by-split, body#checkout #thecheckout-shipping.so-hidden-by-split {
    /* display: none !important; */
    /* visibility: hidden; */
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: auto;
}


@media (max-width: 1024px) {
  
  body#checkout #splitOrderPanel .split-order-header-front {
    font-size: 25px;
    gap: 14px;
  }

  body#checkout #splitOrderPanel .split-order-header-front .main-title img {
    max-width: 32px;
  }

  body#checkout #splitOrderPanel .split-tab-btn {
    padding: 0 8px;
    font-size: 14px;
  }

  body#checkout #splitOrderPanel .split-tabs-body,
  body#checkout #splitDeliveryContent .split-tabs-body {
    padding: 20px;
  }

  body#checkout #splitDeliveryContent .split-section-front,
  body#checkout #splitDeliveryContent .split-unassigned-section {
    padding: 0 16px;
  }

  /* 816/384 ของ 1240 บีบเหลือ 60/37 ระยะห่าง 40 → 24 */
  body#checkout #splitDeliveryContent .so-address-delivery-inner {
    gap: 24px;
  }

  body#checkout #splitDeliveryContent .so-address-delivery-detail {
    flex: 0 0 60%;
    max-width: 60%;
    width: 60%;
  }

  body#checkout #splitDeliveryContent .so-address-delivery-select {
    flex: 0 0 37%;
    max-width: 37%;
    width: 37%;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option {
    min-height: 96px;
  }

  body#checkout .split-grand-totals-front .split-grand-header {
    min-height: 0;
    padding: 24px 30px;
    font-size: 25px;
  }

  body#checkout .split-grand-totals-front .split-grand-rows {
    padding: 30px 30px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final {
    margin: 24px -30px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span,
  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final strong {
    font-size: 25px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span {
    min-height: 64px;
    padding: 0 30px;
  }

  body#checkout #thecheckout-confirm {
    padding: 30px;
  }

  body#checkout #thecheckout-confirm h2.cart-summary-title {
    font-size: 25px;
  }

  /* รูปสินค้า 100 → 88 คืนที่ให้คอลัมน์ข้อความที่โดนบีบก่อน */
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price {
    min-width: 110px;
  }
}

@media (max-width: 991px) {
  body#checkout #splitOrderPanel .split-order-header-front {
    font-size: 20px;
    padding: 0 0 14px;
  }

  body#checkout #splitOrderPanel .split-tab-btn {
    height: auto;
    min-height: 44px;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.2;
  }

  body#checkout #splitOrderPanel .split-tab-count {
    width: 22px;
    height: 22px;
    font-size: 14px;
  }

  body#checkout #splitDeliveryContent .so-address-delivery-inner,
  body#checkout #splitOrderPanel .hook-display-delivery-address .so-address-delivery-inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  body#checkout #splitDeliveryContent .so-address-delivery-detail,
  body#checkout #splitDeliveryContent .so-address-delivery-select,
  body#checkout #splitOrderPanel .so-address-delivery-detail,
  body#checkout #splitOrderPanel .so-address-delivery-select {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  body#checkout #splitDeliveryContent .so-address-delivery-detail,
  body#checkout #splitOrderPanel .so-address-delivery-detail,
  body#checkout #splitDeliveryContent .so-address-delivery-select .js-so-open-address-picker,
  body#checkout #splitOrderPanel .so-address-delivery-select .js-so-open-address-picker {
    min-height: 0;
    padding: 16px;
  }

  /* inline-flex 48% + margin-right 3.5% → เต็มความกว้างทีละช่อง */
  body#checkout #splitDeliveryContent .split-reference-delivery.js-split-reference-delivery,
  body#checkout #splitDeliveryContent .split-tracking-email.js-split-tracking-email {
    display: flex;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
  }

  body#checkout #splitDeliveryContent .split-reference-delivery.js-split-reference-delivery {
    margin-bottom: 16px;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option {
    min-height: 0;
    padding: 16px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra span, 
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra strong, 
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra i ,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .bestkit_available_date .preorder-label-warning{
      font-size: 10px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra.out-of-stock,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .bestkit_available_date {
      background: #7D2E2E;
      border: 0;
      padding: 3px 15px;
      line-height: normal;
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      font-size: 9px !important;
      text-align: left;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price .product-price, body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price strong {
      font-size: 14px;
      line-height: 1.4;
      color: #252525;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-title a.label {
    font-size: 14px;
    line-height: 20px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute .label {
      font-size: 14px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute .value {
      font-size: 14px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty .qty-box {
      display: flex;
      align-items: stretch;
      box-sizing: border-box;
      width: 100px;
      height: 40px;
      padding: 0;
      border: 1px solid #B8BABD;
      border-radius: 33px;
      background: #fff;
      overflow: hidden;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty input.cart-line-product-quantity {
      order: 2;
      width: 48px;
      height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      font-size: 14px;
      color: #252525;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-up, body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-down {
      background-size: 10px 10px !important;
      font-size: 12px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-body {
      gap: 15px;
  }
  #thecheckout-address-invoice, #thecheckout-address-delivery, #thecheckout-shipping, #thecheckout-payment, section#hook-catalog-exrtra-field, div#thecheckout-cart-summary {
      background: #fff;
      padding: 20px 20px 20px;
      margin-top: 30px;
      border-radius: 30px;
      box-shadow: 5px 5px 15px 6px #bbbbbb47;
  }
  .so-delivery-choice .so-choice-title {
      font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 16px;
      line-height: 1.4;
      color: var(--so-fg);
  }
  .so-delivery-choice .so-choice-desc {
      font-size: 12px;
      line-height: 1.5;
      margin-top: 2px;
      color: var(--so-muted);
  }
  .so-delivery-choice .so-choice-icon {
        width: 36px;
        height: 36px;
  }
  .so-delivery-choice .so-choice-icon-glyph {
        width: 13px;
  }
  .so-delivery-choice .so-choice-radio::after {
      left: 12px;
      top: 8px;
  }
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price .current-price .price, body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price .current-price {
      font-size: 14px;
      line-height: 1.4;
      color: #252525;
  }
  body#checkout  .checkout-block[class*='num-'] .block-header:before {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
  }
  body#checkout .block-header {
      font-size: 20px;
  }
  body#checkout #thecheckout-confirm h2.cart-summary-title {
      font-size: 22px;
  }
  body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded {
      margin: 20px 0 0 !important;
  }
      body#checkout #splitOrderPanel .split-tabs-body, body#checkout #splitDeliveryContent .split-tabs-body {
        padding: 0;
    }
        body#checkout #splitOrderPanel .split-order-header-front .main-title img {
        max-width: 30px;
    }
        body#checkout .split-cart-items .bestkit_available_date .preorder-label-warning {
        font-size: 12px;
    }
        .split-cart-items .product-line-desc {
        flex: initial;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .split-section-front .cart-items .product-price {
      font-size: 16px;
      font-family: 'Poppins-SemiBold';
      margin: 0;
      margin-left: auto;
  }
    .split-cart-items .product-line-desc .product-line-info.product-attribute {
      font-size: 15px;
      flex-wrap: wrap;
      width: 100%;
  }
  #thecheckout-cart-summary ul.cart-items.split-cart-items .bestkit_available_date {
        max-width: 100%;
        margin: 5px 0;
        padding: 2px 12px;
  }
  body .cart-container .main-availability.product-availability-extra.out-of-stock, body .split-cart-items .main-availability.product-availability-extra.out-of-stock {
      padding: 3px 15px;
      line-height: 1.4;
      width: 100%;
  }
  .split-total-final {
      font-size: 25px;
  }

}

@media (max-width: 767px) {
  #thecheckout-address-invoice, #thecheckout-address-delivery, #thecheckout-shipping, #thecheckout-payment, section#hook-catalog-exrtra-field, div#thecheckout-cart-summary {
    background: #fff;
    padding: 20px 20px 20px;
    margin-top: 30px;
    border-radius: 30px;
    box-shadow: 5px 5px 15px 6px #bbbbbb47;
}
  /* การ์ดเลือกวิธีส่ง — ไล่ลงตามสเกลธีม 20 → 18, ไอคอน 72 → 48 */
  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-title {
    font-size: 18px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-icon {
    width: 48px;
    height: 48px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-icon-glyph {
    width: 22px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-radio {
    width: 28px;
    height: 28px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-radio::after {
    left: 9px;
    top: 7px;
  }

  body#checkout #splitOrderPanel {
    margin-top: 20px;
  }

  body#checkout #splitOrderPanel .split-order-header-front {
    font-size: 20px;
    gap: 10px;
  }

  body#checkout #splitOrderPanel .split-order-header-front .main-title img {
    max-width: 26px;
  }

  body#checkout #splitOrderPanel .split-tabs-container {
    border-radius: 20px;
  }

  body#checkout #splitOrderPanel .split-tab-btn {
    padding: 6px 4px;
    font-size: 12px;
  }

  body#checkout #splitOrderPanel .split-tab-btn:first-child {
    border-radius: 20px 0 0 0;
  }

  body#checkout #splitOrderPanel .split-tab-btn:last-child {
    border-radius: 0 20px 0 0;
  }

  body#checkout #splitOrderPanel .split-tabs-body,
  body#checkout #splitDeliveryContent .split-tabs-body {
    padding: 16px;
  }

  body#checkout #splitDeliveryContent .split-section-front,
  body#checkout #splitDeliveryContent .split-unassigned-section {
    padding: 0;
  }

  body#checkout #splitDeliveryContent .split-section-delivery-date-front {
    flex-wrap: wrap;
    gap: 10px;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .block-header {
    font-size: 14px;
    margin-bottom: 14px;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block span.h6.carrier-name,
  body#checkout #splitDeliveryContent .split-thecheckout-block span.carrier-delay,
  body#checkout #splitDeliveryContent .split-thecheckout-block .name-and-delay .delivery-option-price,
  body#checkout #splitDeliveryContent .split-thecheckout-block .name-and-delay .delivery-option-price * {
    font-size: 14px;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .shipping-radio .custom-radio {
    width: 24px;
    height: 24px;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option {
    margin-bottom: 12px;
    border-radius: 20px;
  }

  body#checkout #wrapper #splitDeliveryContent .split-reference-delivery label,
  body#checkout #wrapper #splitDeliveryContent .split-tracking-email label {
    font-size: 14px;
  }

  body#checkout .split-grand-totals-front {
    margin-top: 20px;
  }

  body#checkout .split-grand-totals-front .split-grand-header {
    padding: 18px 20px;
    font-size: 20px;
  }

  body#checkout .split-grand-totals-front .split-grand-rows {
    padding: 20px 20px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row {
    font-size: 14px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-incl-total-row strong {
    font-size: 14px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final {
    margin: 20px -20px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span,
  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final strong {
    font-size: 18px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span {
    min-height: 52px;
    padding: 0 16px;
  }








  body#checkout #thecheckout-confirm {
    padding: 20px;
    border-radius: 20px;
  }

  body#checkout .block-header {
    font-size: 20px;
  }

  /* วงกลมเลขขั้นตอน 44px กินที่มากบนจอแคบ ย่อพร้อมระยะห่างที่ธีมลดไว้แล้ว */
  body#checkout .checkout-block[class*='num-'] .block-header:before {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
  }

  body#checkout #thecheckout-payment .payment-options .payment-option label .payment-call-to-action-and-logo span.h6 {
    font-size: 14px;
  }

  body#checkout #thecheckout-payment .payment-options > div > .payment-option .payment-logo img {
    max-width: 56px;
    height: auto;
  }

  /* ── รายการสินค้า ── */
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) > li.cart-item {
    padding: 16px 0;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-desc {
    column-gap: 12px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-title a.label {
    font-size: 14px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute .label,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute .value {
    font-size: 14px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price .current-price {
    font-size: 18px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra {
    font-size: 12px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty .qty-box {
    width: 120px;
    height: 38px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty input.cart-line-product-quantity,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-down,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-up {
    width: 40px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price strong {
    font-size: 18px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price {
    min-width: 0;
  }
  div#tc-container-mobile div#thecheckout-cart-summary {
        margin: 0 0px;
        width: calc(100% + 0px);
        margin-left: 0px;
        margin-right: 0px;
        padding: 0 20px 30px;
        border-radius: 0;
        box-shadow: -6px 20px 15px 6px #bbbbbb47;
        margin-top: 30px;
        background: white;
        border-radius: 20px 20px 0 0 !important;
        padding-top: 30px;
    }
    body#checkout #splitOrderPanel .split-tabs-nav {
      background: transparent;
      border-bottom: 0;
      gap: 10px;
  }
        body#checkout #splitOrderPanel .split-tab-btn:first-child {
        border-radius: 20px;
    }
        body#checkout #splitOrderPanel .split-tab-btn {
        border-radius: 20px;
    }
        body#checkout #splitOrderPanel .split-tab-btn:last-child {
        border-radius: 20px;
    }
    body#checkout #splitOrderPanel .split-tabs-container {
      margin: 0;
      border: 2px solid #F5F5F5;
      border-radius: 20px;
      background: #fff;
      box-shadow: none;
      overflow: hidden;
      padding: 20px;
  }
  body#checkout #splitOrderPanel .split-tabs-container .split-section-front.split-tab-panel {
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      box-shadow: none !important;
      border: 0px solid #F5F5F5 !important;
      border-radius: 0px;
      padding-top: 0px !important;
  }
  .box-for-inline.checkout-box {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin: auto;
    justify-content: flex-end;
}
  body#checkout #splitDeliveryContent .split-section-delivery-date-front {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 0;
      padding: 0 0 0px;
      border-bottom: 0px solid #E6E6E6;
      background: transparent;
      flex-direction: row;
  }
  body#checkout #splitDeliveryContent .split-section-delivery-date-front label {
      margin: 0;
      font-size: 14px;
      line-height: 1.4;
      color: #252525;
      white-space: nowrap;
  }
  body#checkout #splitDeliveryContent .split-delivery-date-front {
      box-sizing: border-box;
      width: 178px;
      height: 33px;
      padding: 0 20px;
      border: 1px solid #B8AFA1;
      font-size: 14px;
  }
  #thecheckout-cart-summary .js-unassigned-products .cart-item .product-line .product-line-body .product-line-info span.price, #thecheckout-cart-summary .js-split-products .cart-item .product-line .product-line-body .product-line-info span.price {
        font-size: 16px;
  }
  .split-total-final {
        font-size: 18px;
        padding-bottom: 0;
  }
  div#tc-container-mobile div#thecheckout-cart-summary {
        padding-bottom: 0 !important;
  }
      body#checkout #thecheckout-payment #reference-invoice-field, body#checkout #thecheckout-payment .along-payment-term > #reference-invoice-field {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 40px;
        margin-left: 0;
        padding: 0 20px;
        border-radius: 58px;
    }
    body#checkout #thecheckout-payment .along-payment-term .payment-term-selected {
      box-sizing: border-box;
      width: 140px;
      height: 40px;
      padding: 0 42px 0 20px;
      border: 1px solid #B8AFA1;
      border-radius: 58px;
      background-color: #fff;
      box-shadow: 0px 3px 6px #00000029;
      background-position: right 20px center;
      background-size: 12px;
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 35px;
      color: #252525;
  }
  body#checkout #thecheckout-payment .along-payment-term .h6 {
      margin: 0;
      font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 14px;
      line-height: 1.45;
      color: #252525;
      white-space: nowrap;
  }
  body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option:has(input[type="radio"]:checked) {
      border: 2px solid #B8AFA1;
  }
      body#checkout .split-grand-totals-front .split-grand-header {
        padding: 18px 20px;
        font-size: 18px;
    }
     body#checkout    div#tc-container-mobile div#thecheckout-confirm {
        width: calc(100% + 0px);
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 30px;
    }
    body div#reference-delivery-field, body #tracking-email-field {
      width: 100%;
      margin-top: 0;
      flex-direction: row;
      padding: 10px 15px;
      border-radius: 50px;
      align-items: center;
    }
        .main-flex h5.po_number_title {
        font-size: 14px !important;
    }
    body#checkout #thecheckout-payment #reference-invoice-field input#reference_invoice_field {
        width: auto;
        padding: 0;
        border: 0;
        border-bottom: 0;
        color: #252525;
        font-size: 14px;
        border-bottom: 1px solid var(--primary);
    }
        div#thecheckout-cart-summary .product-line-image img {
        max-width: max-content !important;
    }
        body#checkout .block-header.shopping-cart-header {
        padding-bottom: 20px !important;
        margin-top: 0;
    }
    .hook-display-delivery-address .so-address-delivery-inner {
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-items: center;
}
    .so-address-delivery-select .js-so-open-address-picker {
    background: #fff;
    border-radius: 20px;
    padding: 15px 30px;
    height: 100%;
    color: #252525;
    border-color: #b8b0a1;
    font-family: 'Poppins-Bold';
    width: 100%;
}
    div#tc-container-mobile div#thecheckout-cart-summary {
        border-radius: 20px 20px !important;
        padding-top: 30px;
    }
        body#checkout .block-header {
        padding-bottom: 10px;
    }
    body#checkout #thecheckout-shipping .delivery-option-delay span.carrier-delay, body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay .delivery-option-price, body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay .delivery-option-price * {
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.45;
      color: #252525;
  }
  #thecheckout-confirm.checkout-block .card-block.block-order-description a, #thecheckout-confirm.checkout-block .card-block.block-accept-payment-term a {
    color: var(--secondary);
    text-decoration: underline;
    line-height: 1.6;
    font-size: 14px;
}
.description-content {
    margin-bottom: 10px;
    flex-direction: row;
    margin-top: 10px;
}
.split-total-row-front {
        font-size: 14px;
        gap: 10px;
    }
    body.logos-on-the-right .payment-option label .payment-call-to-action-and-logo {
        width: auto !important;
    }
}
@media (max-width: 565px) {
  #splitQtyPickerModal .split-assign-header {
    padding: 20px;
    font-size: 18px;
  }

  #splitQtyPickerModal .split-assign-body {
    padding: 20px;
  }

  #splitQtyPickerModal .split-qty-picker-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  #splitQtyPickerModal .split-qty-picker-actions .btn {
    width: 100%;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-card {
    padding: 16px;
    gap: 12px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-title {
    font-size: 16px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-desc {
    font-size: 12px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-icon {
    width: 40px;
    height: 40px;
  }

  body#checkout #soDeliveryChoice.so-delivery-choice .so-choice-icon-glyph {
    width: 18px;
  }

  body#checkout #splitOrderPanel .split-order-header-front {
    font-size: 18px;
    padding: 0 0 12px;
  }

  body#checkout #splitOrderPanel .split-order-header-front button#splitOrderCancelBtn {
    padding: 6px;
  }

  body#checkout #splitOrderPanel .split-tabs-nav {
    flex-direction: column;
  }

  /* แนวตั้งแล้ว เส้นคั่นต้องย้ายจากขอบขวามาเป็นขอบล่าง */
  body#checkout #splitOrderPanel .split-tab-btn {
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border-right-width: 1px;
    border-bottom-width: 0;
    border-radius: 0;
    font-size: 14px;
  }
    body#checkout #splitOrderPanel .split-tab-btn:first-child,
    body#checkout #splitOrderPanel .split-tab-btn:last-child {
        border-radius: 20px;
        border-bottom: 1px solid #252525;
    }


    body#checkout #splitOrderPanel .split-tab-btn.active {
        box-shadow: none;
        border-radius: 20px;
        border-bottom: 1px solid #252525;
    }

  body#checkout #splitOrderPanel .split-tabs-body,
  body#checkout #splitDeliveryContent .split-tabs-body {
    padding: 12px;
  }

  body#checkout #splitDeliveryContent .split-delivery-date-front {
    width: 100%;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-row.row.delivery-option {
    padding: 12px;
  }

  body#checkout #splitDeliveryContent .split-thecheckout-block .delivery-option-logo img {
    max-width: 40px;
  }

  body#checkout .split-grand-totals-front .split-grand-header {
    padding: 16px;
    font-size: 18px;
  }

  body#checkout .split-grand-totals-front .split-grand-rows {
    padding: 16px 16px 0;
  }

  /* สองครึ่งกลายเป็นสองแถวเต็มความกว้าง มุมมนย้ายไปอยู่แถวล่างสุดแถวเดียว */
  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final {
    flex-wrap: wrap;
    margin: 16px -16px 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span {
    flex: 0 0 100%;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 16px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final strong {
    font-size: 16px;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final .split-grand-label {
    border-radius: 0;
  }

  body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final .split-grand-value {
    border-radius: 0 0 20px 20px;
  }



  body#checkout #thecheckout-confirm {
    padding: 16px;
  }

  body#checkout #thecheckout-confirm h2.cart-summary-title {
    font-size: 18px;
  }

  body#checkout .block-header {
    font-size: 18px;
  }

  body#checkout .checkout-block[class*='num-'] .block-header:before {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line {
    gap: 12px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-image img {
    padding: 5px;
    border-radius: 10px;
  }

  /* ชื่อสินค้ากับ "Farve: ..." ซ้อนกันอยู่แถวเดียวตามดีไซน์เดสก์ท็อป
     พอกว้างเท่านี้ต้องแยกบรรทัด ไม่งั้นชื่อโดนตัดกลางคำ */
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-title,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-attribute {
    flex: 1 0 100%;
    width: 100%;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-info.product-price .current-price {
    font-size: 16px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .main-availability.product-availability-extra {
    padding: 3px 12px;
    line-height: 1.4;
    white-space: normal;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty .qty-box {
    width: 108px;
    height: 34px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty input.cart-line-product-quantity,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-down,
  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-qty a.cart-line-product-quantity-up {
    width: 36px;
    font-size: 14px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-price strong {
    font-size: 16px;
  }

  body#checkout #thecheckout-cart-summary .cart-overview ul.cart-items:not(.split-cart-items) .product-line-delete i.material-icons.delete-from-cart {
    font-size: 20px;
  }

  /* แถวล่างของ Betaling: ป้าย + dropdown เรียงลงแทนที่จะเบียดกัน */
  body#checkout #thecheckout-payment .along-payment-term {
    gap: 12px;
  }

  body#checkout #thecheckout-payment .along-payment-term .h6 {
    font-size: 14px;
  }

  body#checkout #thecheckout-payment .along-payment-term .payment-term-selected {
    height: 44px;
    line-height: 42px;
    font-size: 14px;
  }

  body#checkout #thecheckout-payment #reference-invoice-field,
  body#checkout #thecheckout-payment .along-payment-term > #reference-invoice-field {
    height: 44px;
    padding: 0 16px;
  }

  body#checkout #thecheckout-payment .payment-options .payment-option > .custom-radio {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
      body#checkout .split-cart-items .bestkit_available_date .preorder-label-warning {
        font-size: 10px;
    }
        #thecheckout-cart-summary ul.split-cart-items .product-line-actions>div.product-line-price, #thecheckout-cart-summary ul.cart-items.split-cart-items .product-line-actions .product-line-delete {
        align-items: center;
    }
        .split-total-row-front {
        font-size: 12px;
        gap: 10px;
        line-height: normal;
    }
        .main-flex h5.po_number_title {
        font-size: 10px !important;
    }
    body#checkout #thecheckout-payment .along-payment-term .h6 {
        font-size: 12px;
    }
        body#checkout #thecheckout-payment #reference-invoice-field, body#checkout #thecheckout-payment .along-payment-term > #reference-invoice-field {
        height: 35px;
        padding: 0 16px;
    }
        body#checkout #thecheckout-payment .along-payment-term .payment-term-selected {
        height: 35px;
        line-height: 34px;
        font-size: 12px;
        padding: 0 20px 0 20px;
        justify-self: flex-start;
        margin-left: auto;
    }
    body#checkout:has(#soDeliveryChoice.mode-split) div#thecheckout-payment .block-header.payment-method-header {
      padding-top: 8px;
      padding-bottom: 20px;
      padding-left: 0px;
  }
    body#checkout #thecheckout-confirm #confirm_order {
        width: 100%;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        margin-top: 0px;
    }
        body#checkout #thecheckout-payment .along-payment-term {
        gap: 12px;
        padding-top: 0;
    }
        body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final > span {
        flex: 0 50%;
        width: 50%;
        min-height: 48px;
        padding: 10px 16px;
        font-size: 16px;
    }
    body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final .split-grand-value {
        border-radius: 0;
    }
    body#checkout .split-grand-totals-front .split-grand-row.split-grand-row-final strong {
        font-size: 14px;
    }
    body#checkout .split-grand-totals-front .split-grand-header {
        padding: 16px;
        font-size: 16px;
    }
    span.total-payment-term-label-value {
      font-size: 9px;
      display: flex;
  }
  div#thecheckout-cart-summary .product-line-image img {
        max-width: 100px !important;
        padding: 10px;
    }
        div#thecheckout-cart-summary li.cart-item .product-line-info {
        font-size: 14px;
        line-height: 1.4;
        margin-left: 0;
    }
    body#cart .card.cart-summary .cart-summary-line span, 
    body#checkout .cart-detailed-totals .card-block .cart-summary-line span, 
    body#checkout .cart-detailed-totals .card-block .cart-summary-line small {
        font-size: 12px !important;
        line-height: 1.6;
    }
    #thecheckout-confirm .cart-summary-line {
      margin-bottom: 10px !important;
      margin-top: 0;
      display: flex;
  }
  body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line span.label, body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line .label {
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.4;
      color: #252525;
      width: 70% !important;
      display: flex;
  }
      body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span {
        height: 48px;
        padding: 0 14px;
        font-size: 12px !important;
    }
    #thecheckout-confirm .cart-summary-line.hidden {
      display: none;
  }
  .so-address-delivery-detail {
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      color: #252525;
      line-height: 1.5;
      border-radius: 20px;
      border: 1px solid;
      padding: 15px 15px;
      margin-right: auto;
      width: 100%;
      position: relative;
  }
  .so-address-delivery-detail .so-address-company {
      margin-bottom: 0;
      font-size: 14px;
  }
  .so-address-delivery-select .js-so-open-address-picker {
      font-size: 14px;
  }
  p.delivery-hook-desc {
      font-size: 12px;
  }
  body#checkout #thecheckout-confirm .cart-detailed-totals .cart-summary-line.cart-total-tax-excluded span {
      color: white;
  }
  #thecheckout-confirm.checkout-block .card-block.block-order-description a, #thecheckout-confirm.checkout-block .card-block.block-accept-payment-term a {
      font-size: 12px;
  }
  body#checkout #thecheckout-shipping .delivery-options-list span.h6.carrier-name {
      font-size: 14px;
  }
  body#checkout #thecheckout-shipping .delivery-option-delay span.carrier-delay, body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay .delivery-option-price, body#checkout #thecheckout-shipping .delivery-option-detail .name-and-delay .delivery-option-price * {
      font-size: 12px;
  }
  body#checkout #splitOrderPanel .split-tab-btn {
        justify-content: flex-start;
        gap: 10px;
        min-height: 44px;
        padding: 10px 16px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-radius: 0;
        font-size: 14px;
        border-radius: 20px;
    }
}

form#delivery-address .js-so-save-address {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0 auto;
    padding: 12px 40px;
    border: 0;
    border-radius: 37px;
    background: #B8AFA1;
    background-color: #B8AFA1;
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    color: #fff;
    text-align: center;
}

body#order-confirmation #order-items > .card-title.h3 {
    /* text-decoration: underline;
    text-underline-position: under; */
    font-size: 20px;
    border-bottom: 1px solid #232323;
    padding-bottom: 10px;
    margin-bottom: 1rem;
}

body#address .address-form .row_alias, body#address .address-form .row_legal_company_name, body#address .address-form .row_address2 {
    display: none;
}