/* ===== Cart Page – Design Override (v2) ===== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --cp-bg: oklch(0.97 0 0);
  --cp-surface:     #ffffff;
  --cp-surface-2:   oklch(0.985 0.004 150);
  --cp-ink:         oklch(0.27 0.012 155);
  --cp-ink-soft:    oklch(0.46 0.012 155);
  --cp-ink-faint:   oklch(0.60 0.010 155);
  --cp-line:        oklch(0.925 0.006 155);
  --cp-line-soft:   oklch(0.955 0.005 155);
  --cp-brand: oklch(0.69 0.19 13.41);
  --cp-brand-deep: oklch(0.67 0.19 13.95);
  --cp-brand-tint: oklch(0.68 0.19 13.77 / 0.06);
  --cp-brand-line: oklch(0.67 0.19 13.89);
  --cp-danger:      oklch(0.58 0.16 25);
  --cp-danger-bg:   oklch(0.965 0.02 25);
  --cp-radius:      16px;
  --cp-shadow:      0 1px 2px oklch(0.4 0.02 155 / .05), 0 8px 24px -12px oklch(0.4 0.02 155 / .12);
  --cp-shadow-sm:   0 1px 2px oklch(0.4 0.02 155 / .06);
}

/* ─── Page ─── */
.cart-page {
  font-family: "Manrope", system-ui, sans-serif !important;
  background:
    radial-gradient(1200px 600px at 100% -10%, oklch(0.96 0.02 158 / .55), transparent 60%),
    var(--cp-bg) !important;
  color: var(--cp-ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 70px;
}


/* ─── Payment failure alert ─── */
.cart-page .alert-danger {
  border-radius: 13px;
  border: 1px solid oklch(0.88 0.06 25);
  background: var(--cp-danger-bg);
  color: var(--cp-danger);
  font-size: 14px;
  font-weight: 500;
}

/* ─── Section step headers (.title-type-2) ─── */
.title-type-2 {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 13px !important;
  padding: 14px 18px !important;
  box-shadow: var(--cp-shadow-sm) !important;
  margin-bottom: 16px !important;
}
.title-type-2 > span:not(.step) {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--cp-ink) !important;
  letter-spacing: -.02em;
  line-height: 1.3 !important;
}

/* Step number badge */
.title-type-2 .step,
.step-badge {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  border-radius: 9px !important;
  background: linear-gradient(150deg, var(--cp-brand), oklch(0.59 0.19 15.82)) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  box-shadow: 0 5px 12px -6px var(--cp-brand);
}

/* Add address button inside title-type-2 */
.title-type-2 .add-new-address {
  margin-left: auto;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cp-brand-deep) !important;
  background: var(--cp-brand-tint) !important;
  border: 1px solid var(--cp-brand-line) !important;
  border-radius: 10px !important;
  padding: 7px 14px !important;
  cursor: pointer;
  text-decoration: none;
  transition: .16s ease;
}
.title-type-2 .add-new-address:hover {
  background: var(--cp-surface) !important;
  border-color: var(--cp-brand) !important;
}

/* ─── Cart items ─── */
.cart-item {
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-radius) !important;
  box-shadow: var(--cp-shadow-sm) !important;
  margin-bottom: 14px !important;
  padding: 20px 22px !important;
  transition: box-shadow .15s ease;
}
.cart-item:hover {
  box-shadow: var(--cp-shadow) !important;
}
.cart-item .row {
  align-items: center;
}

.cart-product-image {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  background: var(--cp-surface-2);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 13px;
}

.cart-product-name {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--cp-ink) !important;
  line-height: 1.4;
  margin-bottom: 6px;
}
.cart-product-price {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--cp-ink) !important;
  letter-spacing: -.02em;
}
.cart-product-price .currency {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cp-ink-faint) !important;
  margin-left: 3px;
}

/* Quantity controls */
.quantity-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px;
}
.delete-item {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  color: var(--cp-ink-faint) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: .15s ease;
  flex: none;
}
.delete-item:hover {
  border-color: oklch(0.85 0.06 25) !important;
  color: var(--cp-danger) !important;
  background: var(--cp-danger-bg) !important;
}
.delete-item i {
  font-size: 16px;
  pointer-events: none;
}

.cart-product-quantity {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
}
.cart-product-quantity button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: var(--cp-surface-2) !important;
  border: 1px solid var(--cp-line) !important;
  color: var(--cp-ink-soft) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
  transition: .15s ease;
  font-size: 12px !important;
}
.cart-product-quantity button:hover {
  background: linear-gradient(150deg, var(--cp-brand), var(--cp-brand-deep)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.cart-product-quantity #count {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--cp-ink) !important;
  width: 40px !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Vertical separator between delete and qty */
.quantity-container .vsep {
  width: 1px;
  height: 60px;
  background: var(--cp-line);
  margin: 0 4px;
}

/* ─── Cart summary card ─── */
#cart-summary > div.cart-summary {
  position: sticky;
  top: 90px;
}
.cart-summary {
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-radius) !important;
  box-shadow: var(--cp-shadow) !important;
  padding: 20px !important;
  margin-bottom: 30px;
}

/* Voucher */
.voucher-section {
  border-bottom: 1px solid var(--cp-line) !important;
  padding-bottom: 18px !important;
  margin-bottom: 16px !important;
}
.voucher-section .form-control,
.voucher-section #voucher-code-input {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13.5px;
  background: var(--cp-surface-2) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 11px !important;
  color: var(--cp-ink);
  padding: 10px 13px;
  box-shadow: none !important;
  transition: .15s ease;
}
.voucher-section #voucher-code-input:focus {
  border-color: var(--cp-brand) !important;
  background: var(--cp-surface) !important;
  box-shadow: 0 0 0 3px var(--cp-brand-tint) !important;
}
.voucher-section .input-group {
  border-radius: 11px;
  overflow: visible;
}
#apply-voucher-btn {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--cp-brand-deep) !important;
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-brand-line) !important;
  border-radius: 11px !important;
  padding: 10px !important;
  transition: .15s ease;
}
#apply-voucher-btn:hover {
  background: var(--cp-brand-tint) !important;
  border-color: var(--cp-brand) !important;
}
#voucher-clear-btn {
  border-radius: 0 9px 9px 0 !important;
  border-color: var(--cp-line) !important;
  color: var(--cp-ink-faint) !important;
}
#voucher-message {
  font-size: 12px;
  color: var(--cp-ink-faint);
  margin-top: 4px;
}

/* Summary rows */
.cart-summary ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cart-summary ul li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  padding: 8px 0;
  color: var(--cp-ink-soft);
}
.cart-summary ul li .title {
  font-weight: 600 !important;
  color: var(--cp-ink-soft) !important;
  width: auto !important;
}
.cart-summary ul li .item-price,
.item-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--cp-ink-soft) !important;
}
.item-price.text-danger {
  color: var(--cp-danger) !important;
}

/* Raw total row */
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}
.summary-label {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--cp-ink-faint) !important;
}
#totalAmount {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px !important;
  color: var(--cp-ink-faint) !important;
  text-decoration: line-through !important;
  border: 0 !important;
}

/* Discount lines */
.discount-lines {
  padding: 0 !important;
  margin: 0 !important;
}

/* Dividers */
.cart-summary hr {
  border-color: var(--cp-line) !important;
  opacity: 1;
  margin: 10px 0 !important;
}

/* Final total */
.order-total-final {
  margin-top: 6px;
}
.order-total-final strong {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--cp-ink) !important;
}
#total-amount {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--cp-brand-deep) !important;
  letter-spacing: -.02em;
}

/* Next button */
.next-button {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  background: linear-gradient(150deg, var(--cp-brand), oklch(0.6 0.19 15.38)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 14px 22px !important;
  width: 100% !important;
  display: block !important;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px var(--cp-brand);
  transition: .18s ease;
  letter-spacing: -.01em;
}
.next-button:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px var(--cp-brand);
}

/* Empty cart */
.empty-cart {
  text-align: center;
  padding: 64px 24px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow-sm);
}
.empty-cart .empty-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
}
.empty-cart .empty-icon svg {
  color: var(--cp-brand);
  opacity: .35;
  filter: drop-shadow(0 6px 16px oklch(0.52 0.10 158 / .18));
}
.empty-cart h5 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cp-ink-faint);
  margin: 0;
}

/* ─── Address section ─── */
.address-section {margin-bottom: 40px;margin-top: 30px;}

/* Address cards */
.address-box {
  position: relative !important;
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-radius) !important;
  box-shadow: var(--cp-shadow-sm) !important;
  padding: 20px !important;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
  margin-top: 10px;
}
.address-box:hover {
  border-color: var(--cp-brand-line) !important;
  background: var(--cp-brand-tint) !important;
  box-shadow: var(--cp-shadow) !important;
}
.address-box.selected {
  border-color: var(--cp-brand) !important;
  background: var(--cp-brand-tint) !important;
  box-shadow: 0 0 0 2px oklch(0.92 0.05 158 / .5), var(--cp-shadow) !important;
}
/* Checkmark badge on selected address */
.address-box.selected::after {
  content: “\2713”;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cp-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.address-box h3 {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--cp-ink) !important;
  padding-right: 38px;
  line-height: 1.35;
  margin-bottom: 8px !important;
}
.address-box p {
  font-size: 13.5px !important;
  color: var(--cp-ink-soft) !important;
  line-height: 1.6 !important;
  margin-bottom: 3px !important;
}
.address-box p:last-of-type {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cp-ink-faint) !important;
  margin-top: 4px !important;
}
/* Empty address placeholder */
.address-empty {
  border: 1.5px dashed var(--cp-line);
  border-radius: var(--cp-radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cp-ink-faint);
  font-size: 13.5px;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  background: var(--cp-surface);
}
.address-empty i {
  font-size: 20px;
  color: var(--cp-brand-line);
  flex-shrink: 0;
}

.edit-address,
.remove-address {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  transition: .15s ease;
  padding: 0 !important;
  margin-top: 14px !important;
  margin-right: 6px;
}
.edit-address {
  background: var(--cp-brand-tint) !important;
  color: var(--cp-brand-deep) !important;
  border-color: var(--cp-brand-line) !important;
}
.edit-address:hover {
  background: var(--cp-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.remove-address {
  background: var(--cp-danger-bg) !important;
  color: var(--cp-danger) !important;
  border-color: oklch(0.88 0.05 25) !important;
}
.remove-address:hover {
  background: var(--cp-danger) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* col wrapper for address cards */
#billing-address-container .col-lg-6,
#shipping-address-container .col-lg-6 {
  margin-bottom: 14px;
}
#billing-address-container,
#shipping-address-container {
  margin-top: 4px;
}

/* ─── Shipping methods ─── */
.shipping-section {
  padding-bottom: 40px;
}
.order-shipping-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-shipping-methods li {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: 13px;
  padding: 0 !important;
  transition: .15s ease;
  overflow: hidden;
}
.order-shipping-methods li:hover {
  border-color: var(--cp-brand-line);
  background: var(--cp-brand-tint);
}
.order-shipping-methods .form-check.shipping-name {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  cursor: pointer;
}
.order-shipping-methods .form-check-input {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid var(--cp-line) !important;
  accent-color: var(--cp-brand);
  flex: none;
  margin: 0 !important;
  cursor: pointer;
}
.order-shipping-methods .form-check-input:checked {
  background-color: var(--cp-brand) !important;
  border-color: var(--cp-brand) !important;
}
.order-shipping-methods .form-check-label {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--cp-ink) !important;
  cursor: pointer;
  flex: 1;
}
.order-shipping-methods .shipping-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cp-brand-deep);
  margin-left: auto !important;
  float: right;
}

/* ─── Payment section ─── */
.payment-section {
  padding-top: 10px;
}
.payment-section .h-style-1 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-ink);
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#totalAmount2 {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  color: var(--cp-brand-deep);
  font-size: 17px;
}

/* Payment type blocks */
.credit-card-button.form-check {
  border: 1px solid var(--cp-line) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  padding: 0 !important;
  transition: .15s ease;
}
.credit-card-button.form-check:has(.form-check-input:checked) {
  border-color: var(--cp-brand) !important;
  box-shadow: 0 0 0 3px var(--cp-brand-tint);
}
.credit-card-button.form-check > .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.credit-card-button.form-check > .form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--cp-ink) !important;
  cursor: pointer;
  transition: .15s ease;
  margin: 0 !important;
  width: 100%;
  background: white;
}
.credit-card-button.form-check:has(.form-check-input:checked) > .form-check-label {
  background: var(--cp-brand-tint);
  color: var(--cp-brand-deep) !important;
}
.credit-card-button.form-check > .form-check-label i {
  font-size: 18px;
  color: var(--cp-ink-faint);
}
.credit-card-button.form-check:has(.form-check-input:checked) > .form-check-label i {
  color: var(--cp-brand-deep);
}
/* Radio indicator (simulated) */
.credit-card-button.form-check > .form-check-label::before {
  content: "";
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 2px solid var(--cp-line);
  display: inline-block;
  transition: .15s ease;
}
.credit-card-button.form-check:has(.form-check-input:checked) > .form-check-label::before {
  border-color: var(--cp-brand);
  background: radial-gradient(circle at center, var(--cp-brand) 40%, transparent 41%);
  box-shadow: inset 0 0 0 5px #fff;
}

.payment-container {
  padding: 0px 20px;
  border-top: 1px solid var(--cp-line);
  background: var(--cp-surface-2);
}
.payment-container .form-control,
.credit-card-container .form-control {
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 11px !important;
  color: var(--cp-ink);
  font-size: 13.5px;
  padding: 10px 13px;
  box-shadow: none !important;
  transition: .15s ease;
}
.payment-container .form-control:focus,
.credit-card-container .form-control:focus {
  border-color: var(--cp-brand) !important;
  background: var(--cp-surface) !important;
  box-shadow: 0 0 0 3px var(--cp-brand-tint) !important;
}
.payment-container label,
.credit-card-container label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--cp-ink-faint) !important;
  margin-bottom: 5px;
  letter-spacing: .02em;
}

/* ─── Note ─── */
.note label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--cp-ink-faint) !important;
  letter-spacing: .02em;
  display: block;
  margin-bottom: 5px;
}
#order-note {
  font-family: "Manrope", system-ui, sans-serif !important;
  background: var(--cp-surface-2) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 12px !important;
  color: var(--cp-ink);
  font-size: 14px;
  padding: 12px 14px;
  box-shadow: none !important;
  resize: vertical;
  transition: .15s ease;
}
#order-note:focus {
  border-color: var(--cp-brand) !important;
  background: var(--cp-surface) !important;
  box-shadow: 0 0 0 3px var(--cp-brand-tint) !important;
}

/* ─── Contract checkboxes ─── */
.form-check.underline {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--cp-ink-soft);
  padding: 7px 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--cp-line-soft);
}
.form-check.underline .form-check-input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: none;
  accent-color: var(--cp-brand);
  border-radius: 5px !important;
}
.form-check.underline .form-check-label {
  font-size: 14px !important;
  color: var(--cp-ink-soft) !important;
  margin: 0 !important;
  cursor: pointer;
}
.form-check.underline a {
  color: var(--cp-brand-deep) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-check-input:checked {
  background-color: var(--cp-brand) !important;
  border-color: var(--cp-brand) !important;
}

/* ─── Proceed/place order button ─── */
#proceed-order {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: linear-gradient(150deg, var(--cp-brand), var(--cp-brand-deep)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 13px !important;
  padding: 15px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px var(--cp-brand);
  transition: .18s ease;
  letter-spacing: -.01em;
  margin-top: 18px !important;
}
#proceed-order:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px var(--cp-brand);
  opacity: .92;
}
#proceed-order i {
  font-size: 17px;
}

/* ─── Address offcanvas (addressSidebar) ─── */
#addressSidebar {
  font-family: "Manrope", system-ui, sans-serif !important;
}
#addressSidebar .offcanvas-header {
  background: var(--cp-surface-2);
  border-bottom: 1px solid var(--cp-line) !important;
  padding: 22px 26px;
}
#addressSidebar .offcanvas-title {
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--cp-ink) !important;
}
#addressSidebar .offcanvas-body {
  padding: 24px 26px;
}
#addressSidebar label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--cp-ink) !important;
  margin-bottom: 6px;
  display: block;
}
#addressSidebar .form-control,
#addressSidebar select.form-control {
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--cp-surface-2) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 11px !important;
  color: var(--cp-ink);
  font-size: 14px;
  padding: 11px 14px;
  box-shadow: none !important;
  transition: .15s ease;
}
#addressSidebar .form-control:focus,
#addressSidebar select.form-control:focus {
  border-color: var(--cp-brand) !important;
  background: var(--cp-surface) !important;
  box-shadow: 0 0 0 3px var(--cp-brand-tint) !important;
}
#addressSidebar .form-check-label {
  font-size: 13.5px !important;
  color: var(--cp-ink-soft) !important;
  font-weight: 600 !important;
}
#addressSidebar .btn-primary {
  background: linear-gradient(150deg, var(--cp-brand), var(--cp-brand-deep)) !important;
  border: none !important;
  border-radius: 11px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 20px !important;
  box-shadow: 0 6px 16px -6px var(--cp-brand);
  transition: .16s ease;
}
#addressSidebar .btn-primary:hover {
  transform: translateY(-1px);
}
#addressSidebar .btn-outline-secondary {
  border-color: var(--cp-line) !important;
  color: var(--cp-ink-soft) !important;
  border-radius: 11px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 18px !important;
}
#addressSidebar .btn-outline-secondary:hover {
  background: var(--cp-surface-2) !important;
  border-color: var(--cp-ink-faint) !important;
}

/* ─── Login sidebar (guest flow) ─── */
/* ─── Login offcanvas (guest flow) ─── */
#CartLoginSidebar { font-family: "Manrope", system-ui, sans-serif; }
#CartLoginSidebar .form-control {
  background: var(--cp-surface-2) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  color: var(--cp-ink);
  font-size: 14px;
  padding: 11px 14px;
}
#CartLoginSidebar .form-control:focus {
  border-color: var(--cp-brand) !important;
  box-shadow: 0 0 0 3px var(--cp-brand-tint) !important;
}
#CartLoginSidebar .add-button {
  background: linear-gradient(150deg, var(--cp-brand), var(--cp-brand-deep)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-family: "Manrope", system-ui, sans-serif !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  box-shadow: 0 4px 14px -4px var(--cp-brand);
  transition: .18s ease;
}
#CartLoginSidebar .add-button:hover { opacity: .9; }
#CartLoginSidebar .or {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--cp-ink-faint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 18px 0;
}
#CartLoginSidebar .or::before,
#CartLoginSidebar .or::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--cp-line);
  margin: 0 12px;
}

/* ─── Skeleton loader (minimal override) ─── */
/* ─── Skeleton loader ─── */
@keyframes cpSkPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

.csk-b {
  background: oklch(0.925 0.005 155);
  animation: cpSkPulse 1.9s ease-in-out infinite;
}
.csk-delay-1 .csk-b { animation-delay: .25s; }
.csk-delay-2 .csk-b { animation-delay: .5s; }

.csk-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.csk-img {
  width: 90px;
  height: 90px;
  min-width: 90px;
  border-radius: 14px;
}
.csk-body {
  flex: 1;
  min-width: 0;
}
.csk-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.csk-vbar {
  width: 1px;
  height: 60px;
  margin: 0 4px;
}
.csk-qty-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.csk-summary {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  padding: 20px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .cart-item { padding: 16px !important; }
  .title-type-2 { padding: 12px 14px !important; }
  .title-type-2 > span:not(.step) { font-size: 15px !important; }
  .cart-summary { margin-top: 18px; }
  #proceed-order { width: 100% !important; justify-content: center !important; }
}