:root {
  --vcls-orange: var(--bs-primary, #f57c00);
  --vcls-orange-dark: #d96300;
  --vcls-green: #198754;
  --vcls-charcoal: #25292c;
  --vcls-disabled: #d5d9dd;
}

/* Prevent small Creative Elements responsive overflows from moving the page sideways. */
@media (max-width: 767.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
}

/* Product-card availability strips (Creative Elements). */
.elementor-widget-product-stock .ce-product-stock__availability {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 3px;
  text-align: center;
}

.elementor-widget-product-stock .ce-product-stock--in-stock {
  color: #1f7a2e;
  background-color: #edf5ed;
}

.elementor-widget-product-stock .ce-product-stock--backorder {
  color: #5b5487;
  background-color: #efedf5;
}

.elementor-widget-product-stock .ce-product-stock--low-stock-level {
  color: #a94700;
  background-color: #fff3e6;
}

.elementor-widget-product-stock .ce-product-stock--out-of-stock {
  color: #b02a37;
  background-color: #fdecec;
}

/* Sconti: il verde e riservato al risparmio, non ai normali prezzi. */
.product-flags .product-flag.discount,
.product-flags .product-flag.discount-amount,
.product-flags .product-flag.discount-percentage,
.product-miniature .discount,
.product-miniature .discount-amount,
.product-miniature .discount-percentage,
.product-discount .discount,
.product-prices .discount,
.badge.discount,
.badge-discount,
.ce-product-badge.ce-product-badge-sale {
  color: #fff !important;
  background-color: var(--vcls-green) !important;
  border-color: var(--vcls-green) !important;
}

/* Paginazione: elimina il viola e rende evidente la pagina corrente. */
.pagination .page-link,
.pagination a,
.pagination button,
.ce-pagination a.elementor-button,
.ce-pagination button.elementor-button {
  color: var(--vcls-orange) !important;
  background-color: #fff !important;
  border-color: var(--vcls-orange) !important;
}

.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination a:hover,
.pagination a:focus,
.pagination button:hover,
.pagination button:focus,
.pagination .page-item.active .page-link,
.pagination .current .page-link,
.pagination .current a,
.pagination [aria-current="page"],
.ce-pagination a.elementor-button:hover,
.ce-pagination a.elementor-button:focus,
.ce-pagination button.elementor-button:hover,
.ce-pagination button.elementor-button:focus,
.ce-pagination .current .elementor-button,
.ce-pagination [aria-current="page"],
.ce-pagination a.elementor-button[aria-current="page"] {
  color: #fff !important;
  background-color: var(--vcls-orange) !important;
  border-color: var(--vcls-orange) !important;
}

/* Frecce CE: fondo e icona devono mantenere sempre un contrasto netto. */
.ce-pagination a.ce-pagination__arrow:not([aria-disabled="true"]) {
  color: #fff !important;
  background-color: var(--vcls-orange) !important;
  border-color: var(--vcls-orange) !important;
}

.ce-pagination a.ce-pagination__arrow:not([aria-disabled="true"]):hover,
.ce-pagination a.ce-pagination__arrow:not([aria-disabled="true"]):focus {
  color: #fff !important;
  background-color: var(--vcls-orange-dark) !important;
  border-color: var(--vcls-orange-dark) !important;
}

.ce-pagination .ce-pagination__arrow .elementor-button-icon,
.ce-pagination .ce-pagination__arrow .elementor-button-icon i,
.ce-pagination .ce-pagination__arrow .elementor-button-icon i::before {
  color: inherit !important;
}

.pagination .page-item.disabled .page-link,
.pagination .disabled a,
.pagination .disabled button,
.pagination [aria-disabled="true"] {
  color: #747a80 !important;
  background-color: #eef0f2 !important;
  border-color: var(--vcls-disabled) !important;
  opacity: 1;
}

.ce-pagination .ce-pagination__arrow[aria-disabled="true"],
.ce-pagination .ce-pagination__arrow.disabled,
.ce-pagination .ce-pagination__arrow:not([href]),
.ce-pagination .elementor-button[aria-disabled="true"] {
  color: #747a80 !important;
  background-color: #eef0f2 !important;
  border-color: var(--vcls-disabled) !important;
  opacity: 1;
}

.ce-pagination .ce-pagination__arrow[aria-disabled="true"] .elementor-button-icon,
.ce-pagination .ce-pagination__arrow[aria-disabled="true"] .elementor-button-icon i,
.ce-pagination .ce-pagination__arrow[aria-disabled="true"] .elementor-button-icon i::before {
  color: #747a80 !important;
}

/* I tre puntini sono un separatore neutro, non un'azione. */
.pagination .page-item:not(.active) .page-link:not([href]):not(button) {
  color: var(--vcls-charcoal) !important;
  background-color: #f4f5f6 !important;
  border-color: #e1e4e7 !important;
}

.ce-pagination .ce-pagination__separator,
.ce-pagination .ce-pagination__ellipsis {
  color: var(--vcls-charcoal) !important;
  background-color: #f4f5f6 !important;
  border-color: #e1e4e7 !important;
}

/* Checkout: completato arancione, corrente antracite, futuro grigio. */
body#checkout .checkout-steps__step:has(~ .checkout-steps__step .checkout-steps__btn.active) .checkout-steps__number {
  color: #fff !important;
  background-color: var(--vcls-orange) !important;
  border-color: var(--vcls-orange) !important;
}

body#checkout .checkout-steps__step:has(~ .checkout-steps__step .checkout-steps__btn.active)::before,
body#checkout .checkout-steps__step:has(~ .checkout-steps__step .checkout-steps__btn.active)::after,
body#checkout .checkout-steps__step:has(~ .checkout-steps__step .checkout-steps__btn.active) .checkout-steps__number::before,
body#checkout .checkout-steps__step:has(~ .checkout-steps__step .checkout-steps__btn.active) .checkout-steps__number::after {
  background-color: var(--vcls-orange) !important;
  border-color: var(--vcls-orange) !important;
}

body#checkout .checkout-steps__step:has(.checkout-steps__btn.active) .checkout-steps__number {
  color: #fff !important;
  background-color: var(--vcls-charcoal) !important;
  border-color: var(--vcls-charcoal) !important;
}

/* La meta di collegamento prima del passaggio corrente appartiene al percorso completato. */
body#checkout .checkout-steps__step:has(.checkout-steps__btn.active)::before,
body#checkout .checkout-steps__step:has(.checkout-steps__btn.active) .checkout-steps__number::before {
  background-color: var(--vcls-orange) !important;
  border-color: var(--vcls-orange) !important;
}

body#checkout [class*="checkout-navigation"] .bg-success,
body#checkout [class*="checkout-navigation"] .text-bg-success,
body#checkout [class*="checkout-navigation"] .btn-success,
body#checkout [class*="checkout-navigation"] [class*="complete"],
body#checkout [class*="checkout-navigation"] [class*="completed"],
body#checkout [class*="checkout-steps"] .bg-success,
body#checkout [class*="checkout-steps"] .text-bg-success,
body#checkout [class*="checkout-steps"] [class*="complete"],
body#checkout .checkout__steps .bg-success,
body#checkout .checkout__steps .text-bg-success,
body#checkout .checkout__steps [class*="complete"],
body#checkout .checkout-steps .bg-success,
body#checkout .checkout-steps .text-bg-success,
body#checkout .checkout-steps [class*="complete"],
body#checkout .checkout-navigation .bg-success,
body#checkout .checkout-navigation .text-bg-success,
body#checkout .checkout-navigation [class*="complete"] {
  color: #fff !important;
  background-color: var(--vcls-orange) !important;
  border-color: var(--vcls-orange) !important;
}

body#checkout [class*="checkout-navigation"] .text-success,
body#checkout [class*="checkout-steps"] .text-success,
body#checkout .checkout__steps .text-success,
body#checkout .checkout-steps .text-success,
body#checkout .checkout-navigation .text-success {
  color: var(--vcls-orange) !important;
}

body#checkout [class*="checkout-navigation"] .border-success,
body#checkout [class*="checkout-steps"] .border-success,
body#checkout .checkout__steps .border-success,
body#checkout .checkout-steps .border-success,
body#checkout .checkout-navigation .border-success {
  border-color: var(--vcls-orange) !important;
}

body#checkout [class*="checkout-navigation"] .active,
body#checkout [class*="checkout-navigation"] [aria-current="step"],
body#checkout [class*="checkout-steps"] .active,
body#checkout [class*="checkout-steps"] [aria-current="step"] {
  color: #fff !important;
  background-color: var(--vcls-charcoal) !important;
  border-color: var(--vcls-charcoal) !important;
}

body#checkout [class*="checkout-navigation"] .progress-bar,
body#checkout [class*="checkout-steps"] .progress-bar,
body#checkout .checkout__steps .progress-bar,
body#checkout .checkout-steps .progress-bar,
body#checkout .checkout-navigation .progress-bar {
  background-color: var(--vcls-orange) !important;
}

/* I pulsanti realmente disabilitati devono essere grigi. */
body#checkout .btn:disabled,
body#checkout .btn.disabled,
body#checkout button:disabled,
body#cart .btn:disabled,
body#cart .btn.disabled,
body#cart button:disabled {
  color: #6c7278 !important;
  background-color: var(--vcls-disabled) !important;
  border-color: var(--vcls-disabled) !important;
  opacity: 1;
}

/* L'opzione dell'indirizzo di fatturazione resta un comando secondario. */
body#checkout button[name="use_same_address"],
body#checkout .js-use-same-address,
body#checkout .js-invoice-addresses-toggle,
body#checkout a[data-link-action="different-invoice-address"] {
  color: var(--vcls-orange) !important;
  background: #fff !important;
  border: 1px solid var(--vcls-orange) !important;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 2.75rem;
  padding: 0.625rem 1rem !important;
  line-height: 1.25;
  border-radius: 0.25rem;
}

body#checkout button[name="use_same_address"]:hover,
body#checkout .js-use-same-address:hover,
body#checkout .js-invoice-addresses-toggle:hover,
body#checkout a[data-link-action="different-invoice-address"]:hover,
body#checkout a[data-link-action="different-invoice-address"]:focus {
  color: #fff !important;
  background: var(--vcls-orange-dark) !important;
  border-color: var(--vcls-orange-dark) !important;
}

/* Nel passaggio indirizzi soltanto "Continua" e l'azione primaria. */
body#checkout #checkout-addresses-step a.btn-outline-primary,
body#checkout #checkout-addresses-step button.btn-outline-primary,
body#checkout #checkout-addresses-step .js-back {
  color: var(--vcls-orange) !important;
  background-color: #fff !important;
  border: 1px solid var(--vcls-orange) !important;
}

body#checkout #checkout-addresses-step a.btn-outline-primary:hover,
body#checkout #checkout-addresses-step a.btn-outline-primary:focus,
body#checkout #checkout-addresses-step button.btn-outline-primary:hover,
body#checkout #checkout-addresses-step button.btn-outline-primary:focus,
body#checkout #checkout-addresses-step .js-back:hover,
body#checkout #checkout-addresses-step .js-back:focus {
  color: #fff !important;
  background-color: var(--vcls-orange-dark) !important;
  border-color: var(--vcls-orange-dark) !important;
}

/* Promemoria del pagamento: informativo, non un errore bloccante. */
body#checkout .js-alert-payment-conditions {
  color: var(--vcls-charcoal) !important;
  background-color: #fff4e8 !important;
  border-color: #f5b77f !important;
}

body#checkout .js-alert-payment-conditions .alert-link {
  color: var(--vcls-orange-dark) !important;
  text-decoration-color: currentColor;
}

body#checkout .js-alert-payment-conditions .alert-link:hover,
body#checkout .js-alert-payment-conditions .alert-link:focus {
  color: #a94700 !important;
}

/* La fascia dei passaggi segue la stessa larghezza massima del menu. */
@media (min-width: 992px) {
  .breadcrumb__wrapper {
    width: calc(100% - 2rem);
    max-width: 1600px;
    margin-inline: auto;
  }

  body#checkout #wrapper {
    background-color: #fff;
  }

  body#checkout .checkout-steps {
    width: calc(100% - 2rem);
    max-width: 1600px;
    margin-inline: auto;
    background-color: #f8f9fa;
  }
}
