/* ===== Header del checkout ===== */
body#checkout #header .header-nav {
    max-height: 50px;
    border-bottom: #f6f6f6 2px solid;
    padding: 0;
    margin-bottom: 0;
}

body#checkout #header .header-nav #_desktop_contact_link #contact-link {
    margin-top: .9375rem;
}

#checkout #search_widget {
    display: initial;
}

/* Titulos de secciones */
body#checkout .checkout-step .step-title {
    color: var(--color-pink);
    text-transform: uppercase;
    font-family: var(--font-brand);
    font-size: 25px;
    font-weight: normal;
    text-align: left;
}

/* Numeros de paso: circulo azul, font sans-serif para centrado optico perfecto */
body#checkout section.checkout-step .step-number {
    background-color: var(--color-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

/* Pasos no alcanzados: circulo gris claro sin borde, numero negro */
body#checkout section.checkout-step.-unreachable .step-number {
    background-color: #d9d9d9;
    border: none;
    color: var(--color-text-dark);
}

body#checkout section.checkout-step.-unreachable .step-title {
    color: var(--color-gray-text);
    opacity: 1;
}

/* Pasos completados: titulo gris oscuro */
body#checkout section.checkout-step.-complete .step-title {
    color: var(--color-text-dark);
}

/* ===== Panel central del checkout ===== */
body#checkout .cart-grid-body {
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    padding: 0.25rem;
}

/* ===== Informacion personal ===== */

/* Logged-in user info */
body#checkout .checkout-step .identity {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

body#checkout .checkout-step .identity a {
    color: var(--color-pink) !important;
    font-weight: 600;
}

body#checkout .checkout-step .content > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

body#checkout .checkout-step .content > p > small {
    font-size: 0.8rem;
    color: var(--color-gray-text);
}

.nav-item .nav-link {
    text-transform: uppercase;
    font-family: var(--font-brand);
    font-size: 18px;
    font-weight: normal;
}

/* Tab activa del paso Datos Personales: se resalta con color de marca, negrita y
   subrayado. Necesita el prefijo body#checkout para ganar en especificidad a la
   regla generica `body#checkout a { color: gris }`, que si no dejaba las 3 tabs
   iguales (sin indicar en cual estas). */
body#checkout .nav-item .nav-link.active {
    color: var(--color-blue);
    font-weight: bold;
}

body#checkout a {
    color: var(--color-gray-text);
}

body#checkout a:hover {
    color: #515151;
}

/* Focus y estilos de inputs (base en global.css) */
.form-control:not(select):focus {
    background-color: var(--color-gray-light-bg);
    color: var(--color-gray-input);
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
}

.form-control.select:focus,
select.form-control:focus {
    outline: none;
    border-color: var(--color-pink);
}

.form-control-comment {
    display: none;
}

/* Campos requeridos */
.information-container p {
    color: var(--color-primary);
    margin: 10px 0;
    font-weight: normal;
    font-size: 14px;
    font-family: var(--font-brand);
}

/* Checkbox: la casilla visual (span) es absolute, asi que el contenedor necesita
   un minimo de 18x18 para reservarle sitio. Pero NO debe llevar width/height fijos:
   en los consentimientos (condiciones, boletin, privacidad del paso "Pedir como
   invitado") el .custom-checkbox envuelve tambien el <label> con el texto, y un
   ancho fijo de 18px lo aplastaba a una letra por linea (incidencia #14). Con
   inline-flex y width/height:auto el contenedor crece con el label; el min-width/
   min-height mantiene la casilla cuando no hay texto. */
body#checkout .custom-checkbox {
    position: relative;
    display: inline-flex !important;
    align-items: flex-start;
    width: auto !important;
    height: auto !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
}

body#checkout .custom-checkbox span {
    top: 0;
    left: 0;
    z-index: 1;
    width: 18px;
    content: '';
    height: 18px;
    display: block;
    position: absolute;
    background: var(--color-white);
    border: 1px solid var(--color-blue);
}

.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
    display: block;
    font-size: 20px;
    color: var(--color-blue);
    text-align: center;
    font-weight: bold;
    line-height: 19px;
}

body#checkout .custom-checkbox > label {
    padding-left: 1.5rem;
    color: var(--color-gray-dark);
}

/* Botones (estilos base en global.css, solo hover aqui) */
.form-footer button:hover,
.button-continue-checkout:hover,
body#checkout .checkout-step .continue.btn-primary:hover {
    color: var(--color-pink);
    background-color: var(--color-white);
    border: 1px solid var(--color-pink);
}

/* Footer de formulario: flex para alinear botones */
body#checkout .form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

body#checkout .form-footer .cancel-address,
body#checkout .form-footer button {
    float: none;
}

body#checkout .form-footer .cancel-address {
    order: -1;
}

/* Boton Cancelar: secundario outline, misma altura y forma que Continuar */
body#checkout .cancel-address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-gray-dark);
    background: var(--color-white);
    border: 1px solid var(--color-gray-dark);
    border-radius: var(--btn-radius);
    padding: 0 20px;
    height: var(--btn-height);
    text-decoration: none;
    transition: all var(--transition-fast);
}

body#checkout .cancel-address:hover {
    color: var(--color-pink);
    border-color: var(--color-pink);
}

/* ===== Sign In ===== */

.input-group.focus {
    outline: none;
}

.input-group .input-group-btn {
    display: none;
}

.input-group {
    position: relative;
}

body#checkout .checkout-step #checkout-login-form i {
    position: absolute;
    right: 15px;
    top: 5px;
    z-index: 10;
}

body#checkout .checkout-step #checkout-login-form i:hover {
    cursor: pointer;
    color: var(--color-blue);
}

.form-informations {
    display: none;
}

/* Labels de formulario */
form .form-control-label {
    text-transform: uppercase;
    font-family: var(--font-body-condensed);
    padding-left: 20px;
    color: var(--color-text-dark);
    font-weight: bold;
}

/* ===== Direccion ===== */

.js-address-form form p {
    font-weight: normal;
    font-size: 14px;
    font-family: var(--font-brand);
}

.js-address-form .billing-address {
    margin-top: 1.2rem;
}

.js-address-form .billing-address a:hover {
    color: var(--color-pink) !important;
}

/* Select de formulario de direccion */
.form-control-select {
    appearance: none;
    width: 100%;
    padding: 12px 10px 12px 14px;
    font-size: 16px;
    font-weight: 500;
    color: #2c2c2c;
    background-color: var(--color-white);
    border: 1px solid rgb(220, 220, 220);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Label de direccion de facturacion */
body#checkout .checkout-step #delivery-address .form-fields .form-group label[for="use_same_address"] {
    font-weight: normal;
    font-family: var(--font-brand);
    font-size: 14px;
    color: var(--color-gray-text);
}

/* Direccion seleccionada */
body#checkout .checkout-step .address-item.selected {
    background: var(--color-white);
    border: #3b82f6 1px solid;
}

body#checkout .checkout-step .address-item:hover {
    transform: translateY(-3px);
}

/* Lista de direcciones: tipografia uniforme */
body#checkout .checkout-step .radio-block .address ul {
    list-style: none;
    padding: 0.5rem 0.75rem;
    margin: 0;
    background: var(--color-white);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body#checkout .checkout-step .radio-block .address ul li {
    padding: 0.2rem 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-dark);
}

body#checkout .checkout-step .radio-block .address ul li:first-child {
    font-weight: 600;
}

body#checkout .checkout-step .radio-block .address ul li:nth-child(3),
body#checkout .checkout-step .radio-block .address ul li:nth-child(4) {
    display: inline-block;
}

body#checkout .checkout-step .radio-block .address ul li:nth-child(4)::before {
    content: " · ";
    margin: 0 0.25rem;
}

body#checkout .checkout-step .radio-block .address ul li:last-child {
    color: var(--color-gray-dark);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--color-gray-border);
}

body#checkout .checkout-step .radio-block {
    padding: 0;
    text-align: left;
    cursor: pointer;
}

body#checkout .checkout-step .address {
    margin: 0;
    font-weight: 500;
}

/* Hover edicion/borrado: global.css .btn-brand:hover aplica (blue bg) */

/* Titulos de facturacion y envio */
body#checkout .checkout-step .title-invoice-address,
body#checkout .checkout-step .title-shipping-address {
    margin-top: 1.2rem;
    font-family: var(--font-brand);
    color: var(--color-gray-text);
}

body#checkout .checkout-step .address-footer {
    padding: 0.5rem 0;
    display: flex;
    gap: 0.5rem;
}

/* ===== Transportistas ===== */

#hook-display-before-carrier p {
    font-weight: normal;
    font-size: 14px;
    font-family: var(--font-brand);
}

.selected-transport {
    margin-right: auto;
}

/* Contenedor de direccion: compacto con margen para botones */
body#checkout section.checkout-step .address-item {
    align-items: center;
    gap: 0;
    min-height: auto;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.5rem;
    background: var(--color-white);
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    cursor: pointer;
}

body#checkout section.checkout-step .address-item .radio-block {
    padding: 0;
    margin: 0;
}

body#checkout section.checkout-step .radio-block .address {
    margin-left: 0 !important;
}

body#checkout section.checkout-step .radio-block .address ul {
    padding: 0.2rem 0;
}

body#checkout section.checkout-step .radio-block .address ul li {
    padding: 0.15rem 0;
}

body#checkout section.checkout-step .address-footer {
    padding: 0.5rem 0 0;
}

/* Reducir padding del contenido del paso */
body#checkout section.checkout-step .content {
    padding: 0.5rem 1rem;
}

/* Contenedor de transportistas */
body#checkout .checkout-step .delivery-options {
    min-height: auto;
    padding: 0;
    margin-bottom: 1rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body#checkout section.checkout-step .delivery-options .delivery-option {
    border: 1px solid var(--color-gray-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background: var(--color-white);
    transition: border-color 0.2s ease;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    min-height: auto;
}

body#checkout section.checkout-step .delivery-options .delivery-option:hover {
    border-color: var(--color-blue);
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo) > .col-xs-12 {
    padding: 0;
}

body#checkout .checkout-step .delivery-options > .row {
    border: none;
}

/* Radio buttons de envio */
.delivery-option .custom-radio {
    width: 18px;
    height: 18px;
    display: inline-block;
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-blue);
}

.custom-radio {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: .5rem;
    vertical-align: middle;
    cursor: pointer;
    background: var(--color-white);
    border-radius: 50%;
    border: 1px solid var(--color-blue);
}

.custom-radio input[type="radio"]:checked + span {
    position: absolute;
    top: .125rem;
    left: .125rem;
    display: block;
    width: 12px;
    height: 12px;
    background: var(--color-blue);
    border: 1px solid var(--color-blue);
    border-radius: 50%;
}

@media (min-width: 576px) {
    .col-sm-5 {
        width: 45%;
    }
}

/* ===== Sumario lateral ===== */

/* En desktop el panel de pasos (izquierda) es mucho más alto que el resumen, así
   que este se queda fijo (sticky) mientras se hace scroll por los pasos. El top lo
   marca el header fijo (128px de margin-top del wrapper) más un pequeño hueco. */
@media (min-width: 992px) {
    body#checkout .cart-grid-right {
        position: sticky;
        top: 140px;
        align-self: flex-start;
    }
}

body#checkout .cart-grid-right .card {
    width: 100%;
    max-width: 450px;
    margin: auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-border);
    border-radius: 20px;
    overflow: hidden;
}

/* El tema padre quita el padding de los card-block en móvil, así que el contenido
   del resumen (subtotal, transporte, total) toca los bordes. Se restaura el mismo
   padding que en desktop. */
body#checkout .cart-grid-right .card .card-block {
    padding: 20px 20px 8px;
}

/* En responsive las columnas se apilan: la tarjeta del resumen debe ocupar todo el
   ancho y quedar alineada con el panel de pasos de arriba. El panel de pasos tiene
   4px de padding lateral mientras el resumen traía 15px (quedaba más estrecho y
   desplazado). Se iguala el padding, se quita el max-width/centrado y se añade algo
   más de separación superior. */
@media (max-width: 991.98px) {
    body#checkout .cart-grid-right {
        padding-left: 4px;
        padding-right: 4px;
    }

    body#checkout .cart-grid-right .card {
        max-width: none;
        margin: 1rem 0 0;
    }
}

/* El lápiz de editar de cada paso es display:block y caía a una línea aparte. Se
   coloca el título en flex y se empuja el lápiz a la derecha, en la misma línea. */
body#checkout .checkout-step .step-title {
    display: flex;
    align-items: center;
}

body#checkout .checkout-step .step-title .step-edit {
    display: inline-flex;
    align-items: center;
    /* !important para ganar a la regla del tema padre en pasos completados
       (body#checkout section.checkout-step.-reachable.-complete h1 .step-edit),
       más específica, que ponía margin-left:1.25rem y desalineaba el lápiz. */
    margin-left: auto !important;
}

/* El core añade el texto "Editar" tras el lápiz en unos pasos (Direcciones) y en
   otros no (Datos Personales lo pinta con otra plantilla), quedando inconsistente.
   Se deja solo el lápiz en todos: se oculta el texto con font-size 0 y se restaura
   el tamaño del icono. */
body#checkout .checkout-step .step-title .step-edit {
    font-size: 0;
}

body#checkout .checkout-step .step-title .step-edit .material-icons {
    font-size: 1.25rem;
}

/* Sub total y precio de envio comparten estilo */
body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line span {
    font-family: var(--font-brand);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color-pink);
}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container {
    padding: 1rem 0;
    border: none;
}

.card-block.cart-summary-totals .cart-summary-line:last-child {
    margin-bottom: 1rem;
}

#js-checkout-summary .cart-summary-totals {
    background-color: var(--color-dark-pink);
    font-size: x-large;
    border-radius: 0 0 20px 20px;
}

#js-checkout-summary .cart-summary-totals .cart-total-products-checkout span {
    color: var(--color-white);
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-size: 100%;
}

#js-checkout-summary .cart-summary-totals .tax-included {
    display: none;
}

/* Ultimo paso cerrado: sin border inferior en titulo */
body#checkout section.checkout-step:last-of-type:not(.-current) .step-title {
    border-bottom: none;
}

/* ===== Botón REALIZAR PEDIDO ===== */

/* Disabled: estilo base en global.css (.btn-brand group), solo override visual */
#payment-confirmation .btn-primary.disabled,
#payment-confirmation .btn-primary:disabled {
    background: var(--color-gray-dark);
    color: var(--color-white);
    cursor: not-allowed;
    opacity: 0.6;
}

#payment-confirmation .btn-primary {
    width: 100%;
}

/* ===== Radio buttons de pago ===== */

.payment-options .custom-radio {
    border: 1px solid var(--color-blue);
    border-radius: 50%;
}

.payment-options .custom-radio input[type="radio"]:checked + span {
    background: var(--color-blue);
    border: 1px solid var(--color-blue);
    border-radius: 50%;
}

/* ===== Select de formulario: evitar recorte ===== */
body#checkout .form-control-select,
body#checkout select.form-control {
    height: auto !important;
    min-height: var(--btn-height);
    line-height: 1.4;
    overflow: visible;
    text-overflow: ellipsis;
    padding-right: 30px;
}

/* ===== Payment option: layout ===== */
body#checkout .payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

body#checkout .payment-option label {
    margin-bottom: 0;
    cursor: pointer;
    font-family: var(--font-body);
}

/* Terms checkbox (layout en seccion Payment mas abajo) */
body#checkout #conditions-to-approve ul {
    list-style: none;
    padding: 0;
}

body#checkout .condition-label label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-dark);
}

body#checkout .condition-label a {
    color: var(--color-pink) !important;
    text-decoration: underline;
}

/* ===== Link añadir direccion como boton azul ===== */
body#checkout .add-address a {
    display: inline-block;
    color: var(--color-white) !important;
    background: var(--color-blue);
    border: none;
    border-radius: var(--btn-radius);
    padding: 0 20px;
    height: var(--btn-height);
    line-height: var(--btn-height);
    font-family: var(--font-brand);
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--transition-fast);
}

body#checkout .add-address a:hover {
    background: var(--color-pink) !important;
    color: var(--color-white) !important;
}

/* Link facturacion: estilo texto normal con icono */
body#checkout .billing-address a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-dark) !important;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

body#checkout .billing-address a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-blue);
    border-radius: 3px;
    flex-shrink: 0;
    vertical-align: middle;
}

body#checkout .billing-address a:hover {
    color: var(--color-pink) !important;
}

body#checkout .billing-address a:hover::before {
    border-color: var(--color-pink);
}

/* Checkbox marcado cuando el formulario de facturacion esta visible */
body#checkout .billing-address--active a::before {
    background: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== Delivery radio: reducir separacion ===== */
body#checkout .delivery-option-2 .selected-transport {
    order: -1;
    margin-right: 0.75rem;
    width: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

body#checkout .delivery-option-2 > .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

body#checkout .delivery-option-2 > .row > .col-sm-5,
body#checkout .delivery-option-2 > .row > .col-xs-12 {
    width: auto;
    flex: 1;
    padding-left: 0;
}

body#checkout .delivery-option-2 .carrier {
    margin: 0;
}

body#checkout .delivery-option-2 .carriere-name-container {
    padding: 0;
    width: auto;
}

body#checkout .delivery-option-2 .carrier-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

/* ===== Payment: checkbox y texto alineados ===== */
body#checkout #conditions-to-approve li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

body#checkout #conditions-to-approve .float-xs-left {
    float: none !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
}

body#checkout #conditions-to-approve .condition-label {
    flex: 1;
    padding: 0;
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
}

body#checkout #conditions-to-approve .condition-label label {
    margin-bottom: 0;
}

/* ===== Boton Realizar Pedido ===== */
#payment-confirmation {
    margin-top: 2rem;
}

#payment-confirmation .btn-primary {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

/* ===== Modal de terminos: estilo brand (solo #checkout-terms-modal-div) ===== */
body#checkout .modal[id*="terms"] .modal-dialog,
body#checkout .js-checkout-modal .modal-dialog {
    max-width: 900px;
    width: 90vw;
    margin: 2rem auto;
}

body#checkout .js-checkout-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

/* Titulo del modal */
body#checkout .js-checkout-modal .modal-content::before {
    content: 'Condiciones Generales';
    display: block;
    padding: 1rem 1.5rem 0.5rem;
    font-family: var(--font-brand);
    font-size: 1.1rem;
    color: var(--color-dark-pink);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-pink);
    margin-bottom: 0;
}

body#checkout .js-checkout-modal .modal-content .close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 1.5rem;
    color: var(--color-gray-dark);
    opacity: 0.7;
    z-index: 1;
    background: none;
    border: none;
    cursor: pointer;
}

body#checkout .js-checkout-modal .modal-content .close:hover {
    opacity: 1;
    color: var(--color-pink);
}

body#checkout .js-checkout-modal .js-modal-content {
    padding: 1.5rem 2rem;
    font-family: var(--font-body);
    color: var(--color-text-dark);
    font-size: 0.85rem;
    line-height: 1.5;
    max-height: 70vh;
    overflow-y: auto;
}

body#checkout .js-checkout-modal .js-modal-content h1,
body#checkout .js-checkout-modal .js-modal-content h2,
body#checkout .js-checkout-modal .js-modal-content h3 {
    font-family: var(--font-brand);
    color: var(--color-dark-pink);
    text-transform: uppercase;
    font-weight: normal;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

body#checkout .js-checkout-modal .js-modal-content h1 {
    font-size: 1.1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-pink);
}

body#checkout .js-checkout-modal .js-modal-content h2 { font-size: 1rem; }
body#checkout .js-checkout-modal .js-modal-content h3 { font-size: 0.9rem; }

body#checkout .js-checkout-modal .js-modal-content p {
    margin-bottom: 0.5rem;
}

body#checkout .js-checkout-modal .js-modal-content ul,
body#checkout .js-checkout-modal .js-modal-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

body#checkout .js-checkout-modal .js-modal-content a {
    color: var(--color-pink);
    text-decoration: underline;
}

body#checkout .js-checkout-modal .js-modal-content strong,
body#checkout .js-checkout-modal .js-modal-content b {
    color: var(--color-text-heading);
}

/* Aviso de condiciones obligatorias en el paso de pago (incidencia #28).
   Siempre visible bajo la casilla, para que el cliente sepa que debe
   marcarla antes de poder realizar el pedido. */
body#checkout .js-conditions-required-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-blue);
    border-radius: 4px;
    background: rgba(59, 140, 201, 0.08);
    color: var(--color-blue);
    font-size: 0.9rem;
    line-height: 1.3;
}

body#checkout .js-conditions-required-notice .material-icons {
    color: var(--color-blue);
    font-size: 1.2rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* ==========================================================
   Confirmación de pedido (body#order-confirmation)
   Se alinea con el estilo de la página de carrito: cards blancas
   redondeadas con sombra, cabeceras de marca y total destacado.
   ========================================================== */

/* Cards blancas redondeadas. El tema padre las deja transparentes en móvil
   (`.card { background: inherit }`), así que se fuerza el blanco y se les da
   forma, sombra y separación. */
body#order-confirmation .card {
    background: var(--color-white);
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

body#order-confirmation .card .card-block {
    padding: 1.5rem 1.75rem;
}

/* Un poco más de aire entre la primera tarjeta y el breadcrumb. */
body#order-confirmation #content-hook_order_confirmation {
    margin-top: 1.5rem;
}

/* Cabecera "Su pedido está confirmado" con tipografía de marca y check verde. */
body#order-confirmation #content-hook_order_confirmation .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-brand);
    text-transform: uppercase;
    color: var(--color-dark-pink);
    font-size: 1.5rem;
    line-height: 1.1;
    margin: 0 0 0.5rem;
}

body#order-confirmation #content-hook_order_confirmation .card-title .done {
    color: #01b887;
    font-size: 1.9rem;
}

body#order-confirmation #content-hook_order_confirmation p {
    color: var(--color-gray-dark);
    margin: 0;
}

/* El email (en negrita) en negro para que resalte sobre el texto gris. */
body#order-confirmation #content-hook_order_confirmation p strong {
    color: var(--color-text-dark);
}

/* Cabeceras de las columnas de artículos (Artículos, Precio unitario, Cantidad,
   Total): estilo de cabecera de tabla de marca, como en el carrito/historial. */
body#order-confirmation #order-items .card-title {
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-weight: normal;
    font-size: 13px;
    color: var(--color-text-dark);
    margin: 0 0 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-gray-border);
}

/* Líneas de producto al estilo del carrito: separadores suaves, contenido centrado
   vertical, imagen contenida y nombre destacado. */
body#order-confirmation .order-line {
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body#order-confirmation .order-line .image img {
    max-width: 72px;
    height: auto;
}

body#order-confirmation .order-line .details span {
    font-weight: 600;
    color: var(--color-text-dark);
}

/* La última línea no lleva separador (evita una línea sobre el borde de la card). */
body#order-confirmation .order-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* El tema padre pinta un borde derecho en #order-items (col-md-12) que sobra. */
body#order-confirmation #order-items {
    border-right: none;
}

/* Etiquetas de los valores (precio/cantidad/total). Solo se muestran cuando las
   cabeceras de columna del tema padre (._desktop-title) están ocultas (<=991px),
   para que en tablet/móvil se distinga qué es cada número (p.ej. las unidades). */
body#order-confirmation .order-line .qty-label {
    display: none;
}

/* ---- Tarjeta de totales (subtotal, envío, total) ---- */
body#order-confirmation .confirmation-totals {
    width: 100%;
}

body#order-confirmation .confirmation-totals td {
    padding: 8px 0;
    color: var(--color-text-dark);
}

/* Etiquetas (Subtotal, Envío y manipulación) en negrita. */
body#order-confirmation .confirmation-totals tr td:first-child {
    font-weight: bold;
}

body#order-confirmation .confirmation-totals tr td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Total destacado en rosa de marca, separado con una línea superior. */
body#order-confirmation .confirmation-totals .total-value td {
    font-family: var(--font-brand);
    font-weight: normal;
    text-transform: uppercase;
    color: var(--color-pink);
    font-size: 1.05rem;
    border-top: 2px solid var(--color-gray-border);
    padding-top: 14px;
}

/* Impuestos: nota secundaria. */
body#order-confirmation .confirmation-totals .taxes td {
    color: var(--color-gray-dark);
    font-weight: normal;
    font-size: 13px;
    padding-top: 2px;
}

/* ---- Títulos de las tarjetas de totales y detalles (diferenciados y coherentes
   con el resto de cabeceras de tarjeta) ---- */
body#order-confirmation .confirmation-totals-card .card-title,
body#order-confirmation .confirmation-details-card .card-title {
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-weight: normal;
    color: var(--color-dark-pink);
    font-size: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-gray-border);
}

body#order-confirmation dl.confirmation-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
    font-size: 14px;
    color: var(--color-text-dark);
}

body#order-confirmation dl.confirmation-details dt {
    font-family: var(--font-body-condensed);
    font-weight: bold;
    color: var(--color-gray-dark);
    white-space: nowrap;
}

body#order-confirmation dl.confirmation-details dd {
    margin: 0;
    font-weight: 600;
}

body#order-confirmation dl.confirmation-details dd em {
    color: var(--color-gray-dark);
    font-size: 13px;
    font-weight: normal;
}

/* Código del pedido en rosa primario y negrita. */
body#order-confirmation dl.confirmation-details dd.order-reference {
    color: var(--color-pink);
    font-weight: bold;
}

/* En móvil se recorta el padding lateral de las cards de confirmación (coherente
   con el resto de tarjetas de cliente). */
/* Etiquetas de columna en tablet/móvil (<=991), cuando el tema padre oculta las
   cabeceras ._desktop-title. */
@media (max-width: 991.98px) {
    body#order-confirmation .order-line .qty-label {
        display: block;
        font-family: var(--font-body-condensed);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 1.15;
        letter-spacing: 0.3px;
        color: var(--color-gray-dark);
        margin-bottom: 2px;
    }
}

@media (max-width: 767.98px) {
    body#order-confirmation .card .card-block {
        padding: 1.25rem 1rem;
    }

    /* Línea de artículo como en el carrito: la imagen ocupa la parte izquierda
       (flotada) y el nombre y el precio/cantidad/total se apilan a su derecha, en
       vez de caer el bloque de precios debajo de la imagen. */
    body#order-confirmation .order-line {
        display: block;
    }

    body#order-confirmation .order-line .col-xs-3 {
        float: left;
        width: 84px;
        padding: 0;
    }

    body#order-confirmation .order-line .details,
    body#order-confirmation .order-line .qty {
        float: none;
        width: auto;
        max-width: none;
        margin-left: 100px;
        padding-left: 0;
    }

    body#order-confirmation .order-line .details {
        margin-bottom: 6px;
    }
}