/* CHECKOUT BREADCRUMB */
    .checkout-breadcrumb {
      background: var(--cream2);
      padding: 16px 0;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .checkout-breadcrumb .breadcrumb-item {
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
    }
    .checkout-breadcrumb .breadcrumb-item a {
      color: var(--dark);
      text-decoration: none;
      transition: color .2s;
    }
    .checkout-breadcrumb .breadcrumb-item a:hover { color: var(--gold); }
    .checkout-breadcrumb .breadcrumb-item.active {
      color: var(--gold);
      font-weight: 600;
    }
    .breadcrumb-item+.breadcrumb-item::before { color: var(--gold); }

    /* CHECKOUT STEPS */
    .checkout-steps {
      background: #fff;
      padding: 24px 0;
      border-bottom: 1px solid var(--cream2);
    }
    .step-item {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }
    .step-number {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--cream2);
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      transition: all .3s ease;
      border: 2px solid transparent;
    }
    .step-item.active .step-number {
      background: var(--gold);
      color: #fff;
      box-shadow: 0 4px 14px rgba(218, 81, 4, 0.4);
    }
    .step-item.completed .step-number {
      background: #1d4a2f;
      color: #fff;
    }
    .step-info h6 {
      font-size: 12px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 600;
      margin: 0;
      color: var(--muted);
      transition: color .2s;
    }
    .step-item.active .step-info h6 { color: var(--dark); }
    .step-info span { font-size: 11px; color: #999; }
    .step-divider {
      flex: 1;
      height: 2px;
      background: var(--cream2);
      margin: 0 16px;
      position: relative;
      overflow: hidden;
    }
    .step-divider::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: var(--gold);
      transition: width .4s ease;
    }
    .step-divider.completed::after { width: 100%; }
    @media (max-width: 767.98px) {
      .step-divider { display: none; }
      .step-info span { display: none; }
    }

    /* CHECKOUT MAIN */
    .checkout-main {
      padding: 48px 0 80px;
      background: var(--cream);
    }
    .checkout-title {
      font-family: var(--font-display);
      font-size: clamp(24px, 3vw, 32px);
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 32px;
    }

    /* FORM STYLING */
    .checkout-card {
      background: #fff;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,0.06);
      overflow: hidden;
      margin-bottom: 24px;
    }
    .checkout-card-header {
      padding: 20px 24px;
      background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .checkout-card-header h5 {
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 600;
      margin: 0;
      color: var(--dark);
    }
    .checkout-card-header i { color: var(--gold); font-size: 16px; }
    .checkout-card-body { padding: 24px; }
    .form-floating>.form-control,
    .form-floating>.form-select {
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
    }
    .form-floating>.form-control:focus,
    .form-floating>.form-select:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(218, 81, 4, 0.1);
    }
    .form-floating>label { font-size: 13px; color: #888; }
    .form-floating>.form-control:focus~label,
    .form-floating>.form-control:not(:placeholder-shown)~label,
    .form-floating>.form-select~label { color: var(--gold); }

    /* Address Card Selection */
    .address-card {
      border: 2px solid #eee;
      border-radius: 8px;
      padding: 20px;
      cursor: pointer;
      transition: all .25s ease;
      position: relative;
      background: #fff;
    }
    .address-card:hover {
      border-color: var(--gold-light);
      box-shadow: 0 4px 16px rgba(218, 81, 4, 0.1);
    }
    .address-card.selected {
      border-color: var(--gold);
      background: linear-gradient(135deg, #fff 0%, #fdfbf7 100%);
      box-shadow: 0 4px 20px rgba(218, 81, 4, 0.15);
    }
    .address-card .check-icon {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--gold);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      opacity: 0;
      transform: scale(0.8);
      transition: all .25s ease;
    }
    .address-card.selected .check-icon { opacity: 1; transform: scale(1); }

    /* Location Radio */
    .location-radio-group { display: flex; gap: 16px; margin-bottom: 20px; }
    .location-radio {
      flex: 1;
      border: 2px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      cursor: pointer;
      transition: all .25s ease;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }
    .location-radio:hover { border-color: var(--gold-light); }
    .location-radio.selected {
      border-color: var(--gold);
      background: linear-gradient(135deg, #fff 0%, #fdfbf7 100%);
    }
    .location-radio input[type="radio"] { position: absolute; opacity: 0; }
    .location-radio .radio-circle {
      width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s ease; flex-shrink: 0;
    }
    .location-radio.selected .radio-circle {
      background: var(--gold); border-color: var(--gold); color: #fff;
    }
    .location-radio .radio-label { font-weight: 600; font-size: 14px; color: var(--dark); }

    /* Phone Input */
    .phone-input-group {
      display: flex; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; transition: border-color .2s;
    }
    .phone-input-group:focus-within { border-color: var(--gold); }
    .phone-country-code {
      background: #f5f5f5; border: none; padding: 14px 16px; font-size: 14px;
      font-weight: 600; color: var(--dark); border-right: 1px solid #ddd; cursor: pointer;
    }
    .phone-input-group input {
      flex: 1; border: none; padding: 14px 16px; font-size: 14px; outline: none; background: #fff;
    }

    /* Note Textarea */
    .note-textarea {
      width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 14px 16px;
      font-size: 14px; resize: vertical; min-height: 80px; outline: none;
      transition: border-color .2s, box-shadow .2s; font-family: var(--font-body);
    }
    .note-textarea:focus {
      border-color: var(--gold); box-shadow: 0 0 0 3px rgba(218, 81, 4, 0.1);
    }
    .note-textarea::placeholder { color: #999; }

    .form-label { font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 8px; display: block; }
    .form-label .required { color: #c0392b; }
    .address-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--dark); }
    .address-details { font-size: 13px; color: var(--muted); line-height: 1.6; }
    .address-phone { font-size: 13px; color: var(--dark); margin-top: 8px; font-weight: 500; }

    /* Payment Methods */
    .payment-method {
      border: 2px solid #eee; border-radius: 8px; padding: 18px 20px;
      cursor: pointer; transition: all .25s ease; display: flex;
      align-items: center; gap: 16px; margin-bottom: 12px;
    }
    .payment-method:hover { border-color: var(--gold-light); }
    .payment-method.selected {
      border-color: var(--gold); background: linear-gradient(135deg, #fff 0%, #fdfbf7 100%);
    }
    .payment-icon {
      width: 48px; height: 32px; background: #fff; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid #eee; font-size: 20px;
    }
    .payment-icon.gold { background: var(--gold); color: #fff; border-color: var(--gold); }
    .payment-info { flex: 1; }
    .payment-info h6 { font-size: 14px; font-weight: 600; margin: 0 0 2px 0; color: var(--dark); }
    .payment-info span { font-size: 12px; color: var(--muted); }
    .payment-check {
      width: 22px; height: 22px; border: 2px solid #ddd; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; transition: all .2s ease;
    }
    .payment-method.selected .payment-check { background: var(--gold); border-color: var(--gold); color: #fff; }

    /* Card Input Fields */
    .card-input-group {
      background: #fafafa; border-radius: 8px; padding: 20px; margin-top: 16px;
    }

    /* Order Summary */
    .order-summary {
      background: #fff; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); position: sticky; top: 90px;
    }
    .order-summary-header { padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .order-summary-header h5 {
      font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin: 0; color: var(--dark);
    }
    .order-items { padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .order-item { display: flex; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5; }
    .order-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    .order-item-img { width: 70px; height: 85px; border-radius: 6px; object-fit: cover; border: 1px solid #f0f0f0; }
    .order-item-info { flex: 1; }
    .order-item-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--dark); }
    .order-item-variant { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
    .order-item-price { font-weight: 700; font-size: 14px; color: var(--dark); }
    .order-item-qty { font-size: 12px; color: var(--muted); margin-left: 4px; }
    .order-calculations { padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .calc-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
    .calc-row:last-child { margin-bottom: 0; }
    .calc-row .label { color: var(--muted); }
    .calc-row .value { font-weight: 500; color: var(--dark); }
    .calc-row.discount .value { color: #c0392b; }
    .calc-row.total {
      border-top: 1px solid #eee; padding-top: 16px; margin-top: 16px; font-size: 18px; font-weight: 700;
    }
    .calc-row.total .value { color: var(--dark); font-size: 20px; }

    /* Promo Code */
    .promo-code-section { padding: 20px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .promo-input-group { display: flex; gap: 0; }
    .promo-input-group input {
      flex: 1; border: 1px solid #ddd; border-right: none; border-radius: 6px 0 0 6px;
      padding: 12px 16px; font-size: 13px; outline: none;
    }
    .promo-input-group input:focus { border-color: var(--gold); }
    .promo-input-group button {
      background: var(--dark); color: #fff; border: 1px solid var(--dark);
      border-radius: 0 6px 6px 0; padding: 12px 20px;
      font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
      font-weight: 600; cursor: pointer; transition: all .2s;
    }
    .promo-input-group button:hover { background: var(--gold); border-color: var(--gold); }

    /* Order Summary Footer */
    .order-summary-footer { padding: 24px; }
    .btn-place-order {
      width: 100%; background: var(--gold); color: #fff; border: none;
      padding: 16px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
      font-weight: 700; border-radius: 6px; cursor: pointer;
      transition: all .25s ease; display: flex; align-items: center;
      justify-content: center; gap: 10px;
    }
    .btn-place-order:hover {
      background: var(--gold-light); transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(218, 81, 4, 0.35);
    }
    .secure-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .secure-note i { color: #1d4a2f; }
    .trust-badges { display: flex; justify-content: center; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.06); }
    .trust-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
    .trust-badge i { color: var(--gold); font-size: 14px; }

    /* Buttons */
    .btn-gold {
      background: var(--gold); color: #fff; padding: 13px 30px;
      font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
      font-weight: 600; border: none; cursor: pointer; font-family: var(--font-body);
      text-decoration: none; border-radius: 0; transition: background .2s, transform .15s; display: inline-block;
    }
    .btn-gold:hover { background: var(--gold-light); color: #fff; transform: translateY(-1px); }
    .btn-outline-dark {
      background: transparent; color: var(--dark); padding: 12px 24px;
      font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
      font-weight: 600; border: 1px solid var(--dark); cursor: pointer;
      font-family: var(--font-body); text-decoration: none; border-radius: 6px;
      display: inline-flex; align-items: center; gap: 8px; transition: all .2s;
    }
    .btn-outline-dark:hover { background: var(--dark); color: #fff; }
    .btn-add-address {
      width: 100%; padding: 24px; border: 2px dashed #ddd; border-radius: 8px;
      background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
      transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .btn-add-address:hover { border-color: var(--gold); color: var(--gold); }
    .btn-add-address i { font-size: 24px; }

    @media (max-width: 991.98px) {
      .checkout-main { padding: 32px 0 60px; }
      .order-summary { position: static; margin-top: 32px; }
      .checkout-card-body { padding: 16px; }
    }

    /* Validation Error Modal */
    .ve-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10001;
      display: none; opacity: 0; transition: opacity .25s;
    }
    .ve-overlay.show { display: block; opacity: 1; }
    .ve-modal {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.92);
      background: #fff; border-radius: 16px; width: 380px; max-width: 90vw;
      z-index: 10002; display: none; opacity: 0; transition: all .25s;
      box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden;
    }
    .ve-modal.show { display: block; opacity: 1; transform: translate(-50%,-50%) scale(1); }
    .ve-close {
      position: absolute; top: 12px; right: 16px; border: none; background: none;
      font-size: 22px; color: #999; cursor: pointer; line-height: 1; z-index: 1;
    }
    .ve-close:hover { color: #333; }
    .ve-top { text-align: center; padding: 40px 28px 20px; }
    .ve-icon {
      width: 64px; height: 64px; border-radius: 50%; background: #fef0ef;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px; font-size: 28px; color: #c0392b;
    }
    .ve-title { font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
    .ve-msg { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }
    .ve-footer { padding: 0 28px 28px; }
    .ve-btn {
      width: 100%; background: var(--dark); color: #fff; border: none;
      padding: 13px; border-radius: 8px; font-size: 13px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
      transition: background .2s, transform .15s;
    }
    .ve-btn:hover { background: #333; transform: translateY(-1px); }