/* Area de cliente - Mi cuenta (3d) y Datos personales (4a)
   Diseno: "Mi Cuenta PrestaShop.dc.html". CSS anterior en
   assets/css/myaccount.css.bkp_20260826_121423

   Este archivo es autonomo: no lee ninguna variable de global-vars.css ni de
   theme.css. Para adaptarlo a otra tienda se copia tal cual y se cambian solo
   los 5 ajustes del bloque de abajo. */

.des-mya,
.des-ac-page,
.customer-page,
.des-auth,
.des-checkout,
#notifications {

    /* ===== AJUSTES POR TIENDA - lo unico que hay que tocar ===== */
    --des-ac-primary: #21274A;                            /* color principal */
    --des-ac-accent: #21274A;                             /* color de acento  */
    --des-ac-font: Outfit, "Outfit Fallback", sans-serif; /* tipografia      */
    --des-ac-radius: 15px;                                /* radio           */
    --des-ac-border: 1px;                                 /* grosor de borde */
    /* =========================================================== */

    /* Derivados y valores fijos del diseno: no hace falta tocarlos */
    --des-ac-radius-sm: calc(var(--des-ac-radius) * .62);
    --des-ac-accent-soft: rgba(33, 39, 74, .08);
    --des-ac-surface: #fff;
    --des-ac-fill: #f5f5f7;
    --des-ac-text: #1d1d1f;
    --des-ac-muted: #6e6e73;
    --des-ac-line: #e2e2e6;
    --des-ac-danger: #c8102e;
    --des-ac-danger-soft: rgba(200, 16, 46, .08);
    --des-ac-danger-tint: rgba(200, 16, 46, .16);
    --des-ac-warning: #b26a00;
    --des-ac-success: #1a7f4b;
    --des-ac-transition: .18s ease;
}

/* El tinte del hover se saca del acento, asi funciona con cualquier marca */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .des-mya,
    .des-ac-page,
    .customer-page,
    .des-auth,
    .des-checkout,
    #notifications {
        --des-ac-accent-soft: color-mix(in srgb, var(--des-ac-accent) 8%, transparent);
        --des-ac-danger-soft: color-mix(in srgb, var(--des-ac-danger) 8%, transparent);
        --des-ac-danger-tint: color-mix(in srgb, var(--des-ac-danger) 16%, transparent);
    }
}


/* .des-container la define el theme.css del tema de origen, y su max-width sale
   de global-vars.css, que no viaja en el paquete. En cualquier otro tema la
   clase no existe y las pantallas salen pegadas al borde de la ventana.
   Va con :where() -> especificidad 0: si el tema de destino trae la suya, gana
   la suya sin necesidad de tocar nada aqui. */
/* ---------- Base que el diseno da por hecho ----------
   Estas hojas se escribieron sobre un tema con reset global:
       *{margin:0;padding:0;box-sizing:border-box}
       button,input,select,textarea{font:inherit;color:inherit;margin:0;...}
       a{text-decoration:none}
   Un tema que no lo tenga -classic, y todo lo que hereda de el- ademas estila
   elementos desnudos. Por ejemplo:
       .label, label { font-size:.875rem; color:#232323; text-align:right }
       p            { color; font-size; font-weight }
       dl,ol,p,ul   { margin-top; margin-bottom }
   Esas reglas no pierden por especificidad contra el diseno: rellenan las
   propiedades que el diseno NO declara, que es justo por donde se cuelan.
   Aqui se repone el punto de partida, acotado a los contenedores del diseno
   para no alterar el resto de la web. */
.des-mya *,
.des-ac-page *,
.customer-page *,
.des-auth *,
.des-checkout *,
#notifications * {
    box-sizing: border-box;
}

.des-mya :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,fieldset,legend,address,hr,table,blockquote),
.des-ac-page :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,fieldset,legend,address,hr,table,blockquote),
.customer-page :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,fieldset,legend,address,hr,table,blockquote),
.des-auth :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,fieldset,legend,address,hr,table,blockquote),
.des-checkout :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,fieldset,legend,address,hr,table,blockquote),
#notifications :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,fieldset,legend,address,hr,table,blockquote) {
    margin: 0;
    padding: 0;
}

.des-mya :where(label,.label),
.des-ac-page :where(label,.label),
.customer-page :where(label,.label),
.des-auth :where(label,.label),
.des-checkout :where(label,.label),
#notifications :where(label,.label) {
    color: inherit;
    font-size: inherit;
    text-align: start;
}

.des-mya :where(p,dt,dd),
.des-ac-page :where(p,dt,dd),
.customer-page :where(p,dt,dd),
.des-auth :where(p,dt,dd),
.des-checkout :where(p,dt,dd),
#notifications :where(p,dt,dd) {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.des-mya :where(button,input,select,textarea),
.des-ac-page :where(button,input,select,textarea),
.customer-page :where(button,input,select,textarea),
.des-auth :where(button,input,select,textarea),
.des-checkout :where(button,input,select,textarea),
#notifications :where(button,input,select,textarea) {
    font: inherit;
    color: inherit;
    margin: 0;
}

.des-mya :where(a),
.des-ac-page :where(a),
.customer-page :where(a),
.des-auth :where(a),
.des-checkout :where(a),
#notifications :where(a) {
    text-decoration: none;
}


:where(.des-container) {
    width: 100%;
    max-width: var(--des-container-max-width, 1440px);
    margin-inline: auto;
    padding-inline: var(--des-container-padding-x, 30px);
}

@media (max-width: 992px) {
    :where(.des-container) {
        padding-inline: var(--des-mob-container-padding-x, 15px);
    }
}

/* ---------- Mi cuenta (3d) ---------- */

.des-mya {
    font-family: var(--des-ac-font);
    color: var(--des-ac-text);
}

.des-mya__card {
    background: var(--des-ac-surface);
}

/* Sin padding lateral: lo aporta ya #main.des-container del tema (30px / 15px) */
.des-mya__card-inner {
    padding-block: 40px;
}

.des-mya__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
}

.des-mya__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.des-mya__title {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--des-ac-text);
}

.des-mya__subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--des-ac-muted);
}

/* Pastilla en rojo de peligro: en hover no cambia de color, solo se oscurece.
   Es lo que pide el diseno tras el cambio del 3d.
   El tinte va del 8 % al 16 % del rojo. Antes esto era filter: brightness(.94),
   que sobre un fondo con alfa .08 no se ve: al multiplicar los canales de un
   color casi transparente el cambio queda por debajo del umbral visible. */
.des-mya__logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-danger-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--des-ac-danger);
    text-decoration: none;
    transition: background-color var(--des-ac-transition);
}

.des-mya__logout:hover,
.des-mya__logout:focus-visible {
    background: var(--des-ac-danger-tint);
    color: var(--des-ac-danger);
}

.des-mya__logout-icon {
    flex: none;
    width: 17px;
    height: 17px;
}

.des-mya__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

/* Los modulos de displayCustomerAccount no devuelven todos lo mismo:
   ps_emailalerts y blockwishlist envuelven en <li>, psgdpr suelta un <a> pelado.
   Con display:contents en la lista y en los <li>, el <a> acaba siendo celda
   directa de la rejilla en los dos casos. */
.des-mya__modules,
.des-mya__modules > li {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Forma del 3b ("centrada"): contenido centrado y elevacion de 2px en hover.
   Los colores se quedan como estaban en el 3d: relleno gris sobre contenedor
   blanco, y el tinte de acento al pasar por encima. Del 3b NO se traen el
   fondo blanco, el borde ni la sombra, que son cambio de color. */
.des-mya__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    box-sizing: border-box;
    padding: 26px 16px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    color: var(--des-ac-muted);
    text-align: center;
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition), transform var(--des-ac-transition);
}

.des-mya__tile:hover,
.des-mya__tile:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    transform: translateY(-2px);
}

.des-mya__tile-icon {
    flex: none;
    width: 28px;
    height: 28px;
}

.des-mya__tile-label {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
}

/* Accesos de modulos sin override del tema: mismo aspecto, pero sin icono.
   Los que si tienen override emiten .des-mya__tile y usan las reglas de arriba. */
.des-mya__modules a:not(.des-mya__tile) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    box-sizing: border-box;
    padding: 26px 16px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
    text-align: center;
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition), transform var(--des-ac-transition);
}

.des-mya__modules a:not(.des-mya__tile):hover,
.des-mya__modules a:not(.des-mya__tile):focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    transform: translateY(-2px);
}

/* :has(*) y no :not(:empty): el div lleva siempre los saltos de linea del .tpl */
.des-mya__top:has(*) {
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .des-mya__card-inner {
        padding-block: 32px;
    }

    .des-mya__grid {
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    }

    .des-mya__title {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .des-mya__card-inner {
        padding-block: 24px;
    }

    .des-mya__header {
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .des-mya__title {
        font-size: 26px;
    }

    .des-mya__subtitle {
        font-size: 14px;
    }

    .des-mya__grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 10px;
    }

    .des-mya__tile,
    .des-mya__modules a:not(.des-mya__tile) {
        gap: 12px;
        padding: 20px 12px;
    }
}

/* Dos columnas hasta el final: la tarjeta centrada aguanta bien en estrecho y
   volcarla a fila rompeteria el centrado del 3b */
@media (max-width: 400px) {
    .des-mya__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}


/* ---------- Datos personales (4a) ---------- */

.des-ac-page {
    font-family: var(--des-ac-font);
    color: var(--des-ac-text);
}

.des-ac-page__card {
    background: var(--des-ac-surface);
}

.des-ac-page__inner {
    padding-block: 40px;
}

.des-ac-page__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 30px;
}

.des-ac-page__title {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--des-ac-text);
}

.des-ac-page__subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--des-ac-muted);
}

.des-ac-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 880px;
}

/* Los bloques son <div role="group"> y no <fieldset>: el navegador saca al
   <legend> del flujo y lo dibuja sobre el borde superior, ignorando el padding
   del fieldset, asi que el titulo aparecia fuera de la caja. */
.des-ac-group {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-ac-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--des-ac-accent);
}

.des-ac-group-title > span {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--des-ac-text);
}

.des-ac-group-icon {
    flex: none;
    width: 19px;
    height: 19px;
}

.des-ac-group-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.des-ac-group--checks .des-ac-group-fields {
    gap: 10px;
}

/* Que campo ocupa las dos columnas. Se resuelve con :has() mirando lo que lleva
   dentro, asi no hay que tocar el compartido _partials/form-fields.tpl.
   Cada pantalla tiene su lista porque los criterios no coinciden: en identity
   los <select> van anchos, en direcciones provincia y pais van a la mitad. */
.des-identity .des-ac-group-fields > *:has(.des-form-valign),
.des-identity .des-ac-group-fields > *:has(.custom-checkbox),
.des-identity .des-ac-group-fields > *:has(select),
.des-identity .des-ac-group-fields > *:has(textarea),
.des-identity .des-ac-group-fields > *:has(input[type="email"]) {
    grid-column: 1 / -1;
}

/* Direcciones: por nombre de campo, usando el id que pone form-fields.tpl */
.des-addr-form .des-ac-group-fields > *:has(#field-alias),
.des-addr-form .des-ac-group-fields > *:has(#field-address1),
.des-addr-form .des-ac-group-fields > *:has(#field-address2),
.des-addr-form .des-ac-group-fields > *:has(#field-company),
.des-addr-form .des-ac-group-fields > *:has(#field-vat_number),
.des-addr-form .des-ac-group-fields > *:has(#field-other),
.des-addr-form .des-ac-group-fields > *:has(textarea) {
    grid-column: 1 / -1;
}

/* position:relative para poder anclar el "Opcional" arriba a la derecha */
.des-ac-form .des-form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.des-ac-form .des-form-label {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
}

/* La clase .required la pone _partials/form-fields.tpl en la etiqueta */
.des-ac-form .des-form-label.required::after {
    content: "*";
    margin-left: 4px;
    font-weight: 700;
    color: var(--des-ac-accent);
}

.des-ac-form .des-form-input {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.des-ac-form .des-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    min-height: 46px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--des-ac-text);
    background: var(--des-ac-surface);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    outline: none;
    transition: border-color var(--des-ac-transition);
}

.des-ac-form .des-form-control:focus {
    border-color: var(--des-ac-accent);
}

.des-ac-form textarea.des-form-control {
    min-height: auto;
    line-height: 1.5;
    resize: vertical;
}

/* La flecha va en background porque el reset del tema pone appearance:none */
.des-ac-form .des-form-select {
    padding-right: 42px;
    
    /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e6e73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;*/
    cursor: pointer;
}

.des-ac-form .des-form-comment {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-muted);
}

/* _partials/form-fields.tpl emite el "Opcional" como ultimo hijo de
   .des-form-input, o sea debajo del control. Ese partial es compartido con el
   checkout, direcciones y contacto, asi que no se toca: se ancla en absoluto a
   la altura de la etiqueta. El hueco en la etiqueta se reserva solo cuando el
   campo lleva de verdad el "Opcional". */
.des-ac-form .des-form-optional {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--des-ac-muted);
}

.des-ac-form .des-form-field:has(> .des-form-input > .des-form-optional) .des-form-label {
    padding-right: 6.5em;
}

/* Contrasenas: el boton "Mostrar" comparte caja con el input */
.des-ac-form .des-input-group {
    display: flex;
    align-items: center;
    background: var(--des-ac-surface);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    overflow: hidden;
    transition: border-color var(--des-ac-transition);
}

.des-ac-form .des-input-group:focus-within {
    border-color: var(--des-ac-accent);
}

.des-ac-form .des-input-group .des-form-control {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.des-ac-form .des-input-addon {
    flex: none;
    display: flex;
}

.des-ac-form .des-show-password-btn {
    padding: 0 14px;
    height: 46px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
    cursor: pointer;
    transition: color var(--des-ac-transition);
}

.des-ac-form .des-show-password-btn:hover,
.des-ac-form .des-show-password-btn:focus-visible {
    color: var(--des-ac-accent);
}

/* Radios y checkbox nativos: el reset del tema los deja en appearance:none,
   asi que se restauran y se pintan con accent-color, y se oculta el <span>
   decorativo que trae _partials/form-fields.tpl */
.des-ac-form .custom-radio > span,
.des-ac-form .custom-checkbox input[type="checkbox"] + span {
    display: none;
}

.des-ac-form .custom-radio input[type="radio"],
.des-ac-form .custom-checkbox input[type="checkbox"] {
    position: static;
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    opacity: 1;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--des-ac-accent);
    cursor: pointer;
}

.des-ac-form .des-form-valign {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.des-ac-form .des-radio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 18px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    color: var(--des-ac-text);
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-ac-form .des-radio:has(input:checked) {
    background: var(--des-ac-accent-soft);
    font-weight: 600;
    color: var(--des-ac-accent);
}

.des-ac-form .custom-radio {
    display: inline-flex;
    align-items: center;
}

.des-ac-form .custom-checkbox {
    display: block;
}

.des-ac-form .custom-checkbox > label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 9px 12px;
    margin: 0;
    padding: 14px 15px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--des-ac-text);
    text-wrap: pretty;
    cursor: pointer;
}

.des-ac-form .custom-checkbox input[type="checkbox"] {
    margin-top: 2px;
}

/* ps_dataprivacy y ps_emailsubscription componen la etiqueta como
   "Titulo<br><em>descripcion</em>". El <em> pasa a bloque para quedar debajo
   como en el diseno, sin cursiva, y el <br> se oculta porque ya sobra. */
.des-ac-form .custom-checkbox em {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

.des-ac-form .custom-checkbox br {
    display: none;
}

/* En los checkbox, form-fields.tpl emite un <span class="des-required-mark">*</span>
   justo delante del texto de la etiqueta. Se convierte en el distintivo del
   diseno: font-size:0 tapa el asterisco y el ::after pone la palabra, que llega
   traducida desde identity.tpl en --des-ac-required-text. */
.des-ac-form .custom-checkbox .des-required-mark {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 0;
}

.des-ac-form .custom-checkbox .des-required-mark::after {
    content: var(--des-ac-required-text, "*");
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.des-ac-form .des-form-field.has-error .des-form-control,
.des-ac-form .des-form-field.has-error .des-input-group {
    border-color: var(--des-ac-danger);
}

.des-ac-form .help-block {
    margin: 0;
}

.des-ac-form .help-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.des-ac-form .help-block li {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-danger);
}

/* Leyenda "* Campos obligatorios" al final del formulario */
.des-ac-required-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 2px;
    font-size: 12.5px;
    color: var(--des-ac-muted);
}

.des-ac-required-note-mark {
    font-weight: 700;
    color: var(--des-ac-accent);
}

.des-ac-actions {
    display: flex;
    justify-content: flex-end;
    padding-block: 4px;
}

.des-ac-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 40px;
    background: var(--des-ac-primary);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

.des-ac-submit:hover,
.des-ac-submit:focus-visible {
    filter: brightness(1.08);
}

/* Medidor de fuerza de contrasena.
   El marcado lo inyecta _partials/password-policy-template.tpl y lo maneja el
   JS del tema, que solo pone el ancho del .progress-bar y le cambia la clase
   entre bg-danger / bg-warning / bg-success, y marca con .text-success los
   requisitos cumplidos. Aqui solo se le da el aspecto del diseno.
   Los cuatro tramos salen de una mascara sobre el contenedor, porque el core
   pinta una sola barra continua. */
.des-ac-form .password-strength-feedback {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
}

.des-ac-form .progress-container {
    margin-bottom: 6px;
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%);
    mask-image: repeating-linear-gradient(to right, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%);
}

.des-ac-form .progress {
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: var(--des-ac-line);
    overflow: hidden;
}

.des-ac-form .progress-bar {
    height: 100%;
    background: var(--des-ac-accent);
    transition: width var(--des-ac-transition);
}

.des-ac-form .progress-bar.bg-danger {
    background: var(--des-ac-danger);
}

.des-ac-form .progress-bar.bg-warning {
    background: var(--des-ac-warning);
}

.des-ac-form .progress-bar.bg-success {
    background: var(--des-ac-accent);
}

.des-ac-form .password-strength-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
}

.des-ac-form .password-requirements {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.des-ac-form .password-requirements p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--des-ac-muted);
}

.des-ac-form .password-requirements .material-icons {
    flex: none;
    font-size: 15px;
}

/* .text-success lo pone el JS del tema en los requisitos que ya se cumplen */
.des-ac-form .password-requirements .text-success,
.des-ac-form .password-requirements p:has(.text-success) {
    color: var(--des-ac-accent);
}

/* El JS anade estas clases al propio input al validar */
.des-ac-form .des-form-control.border-success,
.des-ac-form .des-input-group:has(.border-success) {
    border-color: var(--des-ac-accent);
}

.des-ac-form .des-form-control.border-danger,
.des-ac-form .des-input-group:has(.border-danger) {
    border-color: var(--des-ac-danger);
}

@media (max-width: 767px) {
    .des-ac-page__inner {
        padding-block: 24px;
    }

    .des-ac-page__title {
        font-size: 26px;
    }

    .des-ac-group {
        padding: 18px;
    }

    .des-ac-group-fields {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .des-ac-actions {
        justify-content: stretch;
    }

    .des-ac-submit {
        width: 100%;
    }
}


/* ---------- Pie del area de cliente ----------
   "Volver a su cuenta" / "Inicio". Lo pinta customer/page.tpl con
   _partials/my-account-links.tpl y es el mismo en todas las paginas de cliente.
   :has(*) y no :empty porque el <footer> lleva siempre los saltos de linea. */

.customer-page .page-footer:has(*) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block: 14px;
    padding-top: 20px;
    border-top: var(--des-ac-border) solid var(--des-ac-line);
}

.customer-page .account-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--des-ac-radius-sm);
    font-family: var(--des-ac-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--des-ac-muted);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.customer-page .account-link:hover,
.customer-page .account-link:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.customer-page .account-link .material-icons {
    font-size: 18px;
}


/* ---------- Notificaciones ----------
   _partials/notifications.tpl, incluido por los layouts y por page-auth, asi
   que es chrome global aunque viva en esta hoja (que se carga en "all").
   Estructura: <aside id="notifications"><div class="notifications-container">
   <article class="alert alert-*"><ul><li>mensaje</li></ul></article>.
   Los mensajes salen con nofilter, asi que pueden traer enlaces y HTML.
   Todo va limitado a #notifications para no pisar los .alert que usan por su
   cuenta history.tpl, discount.tpl, order-slip.tpl y order-follow.tpl, ni los
   <li class="alert alert-danger"> de _partials/form-errors.tpl. */

#notifications {
    display: block;
    font-family: var(--des-ac-font);
}

#notifications .notifications-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block: 16px;
}

#notifications .alert {
    margin: 0;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--des-ac-radius);
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
    background: var(--des-ac-alert-soft);
    color: var(--des-ac-alert);
}

#notifications .alert-danger {
    --des-ac-alert: var(--des-ac-danger);
    --des-ac-alert-soft: rgba(200, 16, 46, .1);
}

#notifications .alert-warning {
    --des-ac-alert: var(--des-ac-warning);
    --des-ac-alert-soft: rgba(178, 106, 0, .1);
}

#notifications .alert-success {
    --des-ac-alert: var(--des-ac-success);
    --des-ac-alert-soft: rgba(26, 127, 75, .1);
}

#notifications .alert-info {
    --des-ac-alert: var(--des-ac-accent);
    --des-ac-alert-soft: var(--des-ac-accent-soft);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
    #notifications .alert {
        --des-ac-alert-soft: color-mix(in srgb, var(--des-ac-alert) 10%, transparent);
    }
}

#notifications .alert ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#notifications .alert li {
    margin: 0;
}

/* Un solo mensaje no necesita vinetas; varios si, para poder distinguirlos */
#notifications .alert li:not(:only-child) {
    padding-left: 16px;
    position: relative;
}

#notifications .alert li:not(:only-child)::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}

#notifications .alert p {
    margin: 0;
}

#notifications .alert p + p {
    margin-top: 6px;
}

#notifications .alert strong,
#notifications .alert b {
    font-weight: 600;
}

#notifications .alert em,
#notifications .alert i {
    font-style: normal;
    opacity: .85;
}

#notifications .alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--des-ac-transition);
}

#notifications .alert a:hover,
#notifications .alert a:focus-visible {
    opacity: .75;
}

#notifications .alert ol {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 0;
    padding-left: 20px;
}

@media (max-width: 767px) {
    #notifications .alert {
        padding: 12px 14px;
        font-size: 14px;
    }
}


/* ---------- Sus direcciones (5a) ---------- */

.des-addr__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.des-addr__item {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-addr__alias {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin: 0;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.des-addr__alias-icon {
    flex: none;
    width: 15px;
    height: 15px;
}

.des-addr__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.des-addr__lines {
    font-style: normal;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-ac-muted);
}

.des-addr__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.des-addr__action {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 14px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-addr__action--delete {
    color: var(--des-ac-muted);
}

.des-addr__action:hover,
.des-addr__action:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-addr__action-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.des-addr__new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 280px;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    color: var(--des-ac-muted);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-addr__new:hover,
.des-addr__new:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-addr__new-icon {
    flex: none;
    width: 30px;
    height: 30px;
}

.des-addr__new-label {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

/* Los campos extra que inyectan los modulos por
   displayAdditionalCustomerAddressFields */
.des-addr__extra:has(*) {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-ac-muted);
}

@media (max-width: 767px) {
    .des-addr__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .des-addr__item,
    .des-addr__new {
        padding: 18px;
    }

    .des-addr__new {
        min-height: 160px;
    }
}


/* ---------- Estado vacio compartido (6b) ---------- */

.des-ac-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 56px 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    text-align: center;
}

.des-ac-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-ac-empty__icon svg {
    width: 26px;
    height: 26px;
}

.des-ac-empty__text {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--des-ac-text);
}


/* ---------- Historial de pedidos (6a) ---------- */

.des-hist__wrap {
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    overflow-x: auto;
}

.des-hist__table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.des-hist__table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
    white-space: nowrap;
}

/* La cabecera de la columna de acciones va en blanco en el diseno, pero el
   texto se queda para los lectores de pantalla */
.des-hist__th-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.des-hist__table td {
    padding: 18px 16px;
    background: var(--des-ac-surface);
    vertical-align: middle;
}

/* Esquinas redondeadas por fila: border-spacing separa las filas, asi que hay
   que redondear la primera y la ultima celda de cada una */
.des-hist__table tbody td:first-child {
    border-start-start-radius: var(--des-ac-radius-sm);
    border-end-start-radius: var(--des-ac-radius-sm);
}

.des-hist__table tbody td:last-child {
    border-start-end-radius: var(--des-ac-radius-sm);
    border-end-end-radius: var(--des-ac-radius-sm);
}

.des-hist__ref {
    white-space: nowrap;
}

.des-hist__ref-link {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--des-ac-text);
    text-decoration: none;
    transition: color var(--des-ac-transition);
}

.des-hist__ref-link:hover,
.des-hist__ref-link:focus-visible {
    color: var(--des-ac-accent);
}

.des-hist__muted {
    font-size: 14.5px;
    color: var(--des-ac-muted);
}

.des-hist__total {
    font-size: 15px;
    font-weight: 600;
    color: var(--des-ac-text);
    white-space: nowrap;
}

.des-hist__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.des-hist__status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.des-hist__pdf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-muted);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-hist__pdf:hover,
.des-hist__pdf:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-hist__pdf-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.des-hist__dash {
    font-size: 15px;
    color: var(--des-ac-line);
}

.des-hist__cell-action {
    text-align: right;
    white-space: nowrap;
}

.des-hist__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-fill);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-hist__action:hover,
.des-hist__action:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-hist__action-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Movil: la tabla pasa a fichas apiladas. El lienzo solo resuelve escritorio y
   una tabla de 7 columnas con scroll lateral se lee mal en un telefono.
   La etiqueta de cada dato sale del data-label de la celda. */
@media (max-width: 767px) {
    .des-hist__wrap {
        padding: 0;
        background: none;
        overflow-x: visible;
    }

    .des-hist__table,
    .des-hist__table tbody,
    .des-hist__table tr,
    .des-hist__table td {
        display: block;
        min-width: 0;
        width: auto;
    }

    .des-hist__table thead {
        display: none;
    }

    .des-hist__table tr {
        padding: 18px;
        margin-bottom: 10px;
        background: var(--des-ac-fill);
        border-radius: var(--des-ac-radius);
    }

    .des-hist__table td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        background: none;
        border-radius: 0;
    }

    .des-hist__table td[data-label]::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--des-ac-muted);
    }

    .des-hist__cell-action {
        padding-top: 14px;
    }

    .des-hist__action {
        width: 100%;
        justify-content: center;
        background: var(--des-ac-surface);
    }
}


/* ---------- Detalle de pedido ----------
   Sin artboard en el lienzo: es una extension del lenguaje del 3d/4a/5x/6a.
   Los partials incluidos (productos, devolucion, transportista, mensajes) no se
   reescriben: cada uno emite un <div class="box"> y aqui se le da el aspecto de
   bloque, asi que heredan el lenguaje sin tocarlos. */

.des-ord__stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Bloque: vale tanto para los que pinta order-detail.tpl como para los .box
   de los partials incluidos */
.des-ord .box {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-ord .box > h3,
.des-ord .box > h4 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--des-ac-text);
}

/* Utilidades de visibilidad de Bootstrap que usan los partials del core. Sin
   Bootstrap cargado no existen, asi que la tabla y su version movil se pintaban
   las dos a la vez. Breakpoints de Bootstrap 4: sm 576, md 768. */
.des-ord .hidden-sm-up,
.des-ord .hidden-md-up {
    display: none;
}

@media (max-width: 575px) {
    .des-ord .hidden-xs-down {
        display: none;
    }

    .des-ord .hidden-sm-up {
        display: block;
    }
}

@media (max-width: 767px) {
    .des-ord .hidden-sm-down {
        display: none;
    }

    .des-ord .hidden-md-up {
        display: block;
    }
}

/* Resumen */
.des-ord__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.des-ord__info li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.des-ord__info-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
}

.des-ord__info-value {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

.des-ord__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.des-ord__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 16px;
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-surface);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition), filter var(--des-ac-transition);
}

.des-ord__btn:hover,
.des-ord__btn:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-ord__btn--primary {
    background: var(--des-ac-primary);
    color: #fff;
}

.des-ord__btn--primary:hover,
.des-ord__btn--primary:focus-visible {
    background: var(--des-ac-primary);
    color: #fff;
    filter: brightness(1.08);
}

.des-ord__btn-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

/* Tablas: la del historial de estados y las que traen los partials
   (transportista y totales) */
.des-ord__table-wrap {
    overflow-x: auto;
}

.des-ord__table,
.des-ord .box table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.des-ord__table th,
.des-ord .box table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
    white-space: nowrap;
}

.des-ord__table td,
.des-ord .box table td {
    padding: 16px;
    background: var(--des-ac-surface);
    font-size: 14.5px;
    color: var(--des-ac-text);
    vertical-align: middle;
}

.des-ord__table tbody td:first-child,
.des-ord .box table tbody td:first-child {
    border-start-start-radius: var(--des-ac-radius-sm);
    border-end-start-radius: var(--des-ac-radius-sm);
}

.des-ord__table tbody td:last-child,
.des-ord .box table tbody td:last-child {
    border-start-end-radius: var(--des-ac-radius-sm);
    border-end-end-radius: var(--des-ac-radius-sm);
}

.des-ord__muted {
    color: var(--des-ac-muted);
}

/* El punto lleva el color real del estado; la pastilla usa el acento para que
   el texto siempre se lea */
.des-ord__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.des-ord__status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

/* Las pastillas de estado que pintan los partials del core con estilo en linea */
.des-ord .label-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.des-ord__followup {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--des-ac-muted);
}

.des-ord__followup a {
    color: var(--des-ac-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

/* Direcciones del pedido */
.des-ord__addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.des-ord__addr-alias {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-ord__addr-lines {
    margin: 0;
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-ac-muted);
}

/* ---------- Lineas de producto del pedido (clases c-oc-* del tema) ---------- */

.des-ord .c-oc-header {
    display: grid;
    grid-template-columns: 88px 1fr 110px 90px 110px;
    align-items: center;
    gap: 16px;
}

.des-ord .c-oc-header-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
}

.des-ord .c-oc-header-title:first-child {
    grid-column: span 2;
}

.des-ord .c-oc-header-title--center {
    text-align: center;
}

.des-ord .c-oc-header-title--right {
    text-align: right;
}

.des-ord .c-oc-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.des-ord .c-oc-line {
    display: grid;
    grid-template-columns: 88px 1fr 110px 90px 110px;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
}

/* En el formulario de devolucion cada linea lleva delante una casilla */
.des-ord .c-oc-line:has(.c-oc-checkbox) {
    grid-template-columns: auto 88px 1fr 110px 90px 110px;
}

.des-ord .c-oc-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--des-ac-accent);
    cursor: pointer;
}

.des-ord .c-oc-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--des-ac-radius-sm);
}

.des-ord .c-oc-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.des-ord .c-oc-product-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

.des-ord .c-oc-product-ref,
.des-ord .c-oc-virtual-notice {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-muted);
}

.des-ord .c-oc-line > .c-oc-unit-price,
.des-ord .c-oc-line > .c-oc-qty,
.des-ord .c-oc-line > .c-oc-total {
    font-size: 14.5px;
    color: var(--des-ac-text);
    white-space: nowrap;
}

.des-ord .c-oc-line > .c-oc-unit-price,
.des-ord .c-oc-line > .c-oc-qty {
    text-align: center;
}

.des-ord .c-oc-line > .c-oc-total {
    text-align: right;
    font-weight: 600;
}

/* La fila de precios de dentro de los detalles es la version movil */
.des-ord .c-oc-price-row {
    display: none;
}

.des-ord .c-oc-customization {
    font-size: 12.5px;
    color: var(--des-ac-muted);
}

.des-ord .c-oc-hr {
    height: 0;
    margin: 6px 0 0;
    border: 0;
    border-top: var(--des-ac-border) solid var(--des-ac-line);
}

.des-ord .c-oc-totals-table {
    border-spacing: 0;
}

.des-ord .c-oc-totals-table td {
    padding: 8px 0;
    background: none;
    font-size: 14.5px;
    color: var(--des-ac-muted);
}

.des-ord .c-oc-totals-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--des-ac-text);
    white-space: nowrap;
}

.des-ord .c-oc-total-row td {
    padding-top: 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--des-ac-text);
}

/* Sin Bootstrap los .modal se pintarian abiertos dentro de la pagina */
.des-ord .modal {
    display: none;
}

.des-ord .modal.show {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 24px;
    background: rgba(0, 0, 0, .45);
    overflow-y: auto;
}

.des-ord .modal-content {
    max-width: 520px;
    margin-inline: auto;
    padding: 24px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius);
}

/* ---------- Formularios del detalle: devolucion y mensajes ---------- */

.des-ord .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.des-ord .form-control-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-ord .form-control,
.des-ord textarea,
.des-ord select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    min-height: 46px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--des-ac-text);
    background: var(--des-ac-surface);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    outline: none;
    transition: border-color var(--des-ac-transition);
}

.des-ord .form-control:focus,
.des-ord textarea:focus,
.des-ord select:focus {
    border-color: var(--des-ac-accent);
}

.des-ord textarea {
    min-height: auto;
    line-height: 1.5;
    resize: vertical;
}

.des-ord select {
    padding-right: 42px;
    /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e6e73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;*/
    cursor: pointer;
}

.des-ord .c-qty-select,
.des-ord .c-mobile-selector-qty select {
    min-height: 40px;
    padding: 8px 32px 8px 12px;
    background-position: right 10px center;
    font-size: 14px;
}

.des-ord .form-footer,
.des-ord .form-control-submit {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.des-ord .btn,
.des-ord .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 32px;
    background: var(--des-ac-primary);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

.des-ord .btn:hover,
.des-ord .btn:focus-visible {
    filter: brightness(1.08);
}

/* Mensajes ya enviados */
.des-ord .messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.des-ord .message {
    padding: 14px 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

/* Lineas de envio en movil */
.des-ord .shipping-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.des-ord .shipping-line,
.des-ord .history-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    color: var(--des-ac-text);
}

@media (max-width: 767px) {
    .des-ord .box {
        padding: 18px;
    }

    /* Las lineas pasan a dos columnas y los precios salen de la fila interna */
    .des-ord .c-oc-header {
        display: none;
    }

    .des-ord .c-oc-line,
    .des-ord .c-oc-line:has(.c-oc-checkbox) {
        grid-template-columns: 72px 1fr;
    }

    .des-ord .c-oc-line > .c-oc-unit-price,
    .des-ord .c-oc-line > .c-oc-qty,
    .des-ord .c-oc-line > .c-oc-total {
        display: none;
    }

    .des-ord .c-oc-price-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-top: 6px;
        font-size: 13.5px;
        color: var(--des-ac-muted);
    }

    .des-ord .c-oc-price-row .c-oc-total {
        font-weight: 600;
        color: var(--des-ac-text);
    }

    .des-ord .c-oc-checkbox {
        grid-column: 1 / -1;
    }

    .des-ord__table,
    .des-ord .box table {
        min-width: 0;
    }

    .des-ord .form-footer,
    .des-ord .form-control-submit {
        justify-content: stretch;
    }

    .des-ord .btn {
        width: 100%;
    }
}


/* ---------- Panel con icono y titulo grande (8a) ----------
   Variante de bloque distinta a .des-ac-group: en vez de la leyenda pequena en
   versalitas, un cuadrado con el icono y un titulo de 18px. La usa la pagina de
   RGPD del modulo psgdpr. */

.des-ac-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 880px;
}

.des-ac-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-ac-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.des-ac-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-ac-panel-icon svg {
    width: 19px;
    height: 19px;
}

.des-ac-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

.des-ac-panel-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

.des-ac-panel-text a {
    color: var(--des-ac-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.des-ac-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.des-ac-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 18px;
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-surface);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-ac-panel-btn:hover,
.des-ac-panel-btn:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-ac-panel-btn-icon {
    flex: none;
    width: 17px;
    height: 17px;
}

@media (max-width: 767px) {
    .des-ac-panel {
        padding: 18px;
    }

    .des-ac-panel-title {
        font-size: 16.5px;
    }

    .des-ac-panel-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ---------- Mis alertas de correo (9a / 9b) ----------
   Override del tema sobre ps_emailalerts. Las filas van dentro de <li> porque
   mailalerts.js las borra con closest('li'). */

.des-alerts__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    list-style: none;
}

.des-alerts__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
    list-style: none;
}

.des-alerts__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    overflow: hidden;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

.des-alerts__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.des-alerts__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 180px;
    text-decoration: none;
}

.des-alerts__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--des-ac-text);
    text-wrap: pretty;
    transition: color var(--des-ac-transition);
}

.des-alerts__body:hover .des-alerts__name,
.des-alerts__body:focus-visible .des-alerts__name {
    color: var(--des-ac-accent);
}

.des-alerts__meta {
    font-size: 13px;
    line-height: 1.45;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

.des-alerts__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.des-alerts__status-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.des-alerts__remove {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 15px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-fill);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-muted);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-alerts__remove:hover,
.des-alerts__remove:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-alerts__remove-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

@media (max-width: 767px) {
    .des-alerts__list {
        padding: 0;
        background: none;
    }

    .des-alerts__item {
        background: var(--des-ac-fill);
        border-radius: var(--des-ac-radius);
    }

    .des-alerts__remove {
        flex: 1;
        justify-content: center;
        background: var(--des-ac-surface);
    }
}



/* ---------- Acceso: login, registro y contrasena (11a / 11b / 11c) ----------
   Solo CSS: el marcado de customer/page-auth.tpl, authentication.tpl,
   registration.tpl, password-email.tpl y password-new.tpl ya trae clases des-,
   asi que no hace falta tocar plantillas. En particular NO se toca
   _partials/customer-form.tpl, que lo comparte el checkout.

   theme.css ya estilaba estas paginas con el aspecto anterior. Estas reglas van
   por encima: myaccount.css carga con priority 101 y theme.css con 50, asi que
   a igual especificidad ganan estas. Donde theme.css usa !important se indica.

   Al contrario que en el 4a, aqui los campos van en gris sobre tarjeta blanca:
   es lo que pide el diseno. */

/* Sin banda exterior: la tarjeta va centrada sobre el fondo de la pagina y se
   delimita con su propio borde */
.des-auth {
    padding-block: 40px;
    font-family: var(--des-ac-font);
    color: var(--des-ac-text);
}

.des-auth .des-auth-card,
.des-auth .des-auth-card:has(#customer-form) {
    border: var(--des-ac-border) solid var(--des-ac-line);
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 740px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 34px 32px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* theme.css centra el titulo con text-align y fija el margen con !important.
   El margen se deja como esta (28px encaja con el gap del diseno) y solo se
   corrige la alineacion y la tipografia. */
.des-auth .des-auth-card .page-header {
    text-align: left;
}

.des-auth .des-auth-card .page-header h1 {
    margin: 0;
    font-family: var(--des-ac-font);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--des-ac-text);
}

/* ----- Campos ----- */

.des-auth .des-form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.des-auth .des-form-label {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
}

.des-auth .des-form-label.required::after {
    content: "*";
    margin-left: 4px;
    font-weight: 700;
    color: var(--des-ac-accent);
}

.des-auth .des-form-input {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.des-auth .des-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    min-height: 46px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--des-ac-text);
    background: var(--des-ac-fill);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    outline: none;
    transition: border-color var(--des-ac-transition);
}

.des-auth .des-form-control:focus {
    border-color: var(--des-ac-accent);
}

.des-auth .des-form-comment {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-muted);
}

.des-auth .des-form-optional {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--des-ac-muted);
}

.des-auth .des-form-field:has(> .des-form-input > .des-form-optional) .des-form-label {
    padding-right: 6.5em;
}

.des-auth .des-form-select {
    padding-right: 42px;
    /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e6e73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>"); */
    /* background-repeat: no-repeat; */
    /* background-position: right 15px center; */
    cursor: pointer;
}

/* Contrasena: el boton "Mostrar" comparte caja con el input */
.des-auth .des-input-group {
    display: flex;
    align-items: center;
    background: var(--des-ac-fill);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    overflow: hidden;
    transition: border-color var(--des-ac-transition);
}

.des-auth .des-input-group:focus-within {
    border-color: var(--des-ac-accent);
}

.des-auth .des-input-group .des-form-control {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.des-auth .des-input-addon {
    flex: none;
    display: flex;
}

.des-auth .des-show-password-btn {
    padding: 0 14px;
    height: 46px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
    cursor: pointer;
    transition: color var(--des-ac-transition);
}

.des-auth .des-show-password-btn:hover,
.des-auth .des-show-password-btn:focus-visible {
    color: var(--des-ac-accent);
}

/* Radios y checkbox nativos: el reset del tema los deja invisibles */
.des-auth .custom-radio > span,
.des-auth .custom-checkbox input[type="checkbox"] + span {
    display: none;
}

.des-auth .custom-radio input[type="radio"],
.des-auth .custom-checkbox input[type="checkbox"] {
    position: static;
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    opacity: 1;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--des-ac-accent);
    cursor: pointer;
}

.des-auth .des-form-valign {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.des-auth .des-radio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 18px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    color: var(--des-ac-text);
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-auth .des-radio:has(input:checked) {
    background: var(--des-ac-accent-soft);
    font-weight: 600;
    color: var(--des-ac-accent);
}

.des-auth .custom-radio {
    display: inline-flex;
    align-items: center;
}

.des-auth .custom-checkbox {
    display: block;
}

.des-auth .custom-checkbox > label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 9px 12px;
    margin: 0;
    padding: 14px 15px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--des-ac-text);
    text-wrap: pretty;
    cursor: pointer;
}

.des-auth .custom-checkbox input[type="checkbox"] {
    margin-top: 2px;
}

/* ps_dataprivacy y ps_emailsubscription componen "Titulo<br><em>texto</em>" */
.des-auth .custom-checkbox em {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

.des-auth .custom-checkbox br {
    display: none;
}

/* El core solo emite un asterisco; la palabra llega en la custom property que
   pone customer/page-auth.tpl */
.des-auth .custom-checkbox .des-required-mark {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 0;
}

.des-auth .custom-checkbox .des-required-mark::after {
    content: var(--des-auth-required-text, "*");
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ----- Botones y enlaces ----- */

.des-auth .des-auth-submit,
.des-auth .btn.des-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    margin: 0;
    padding: 14px 24px;
    background: var(--des-ac-primary);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: var(--des-ac-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

.des-auth .des-auth-submit:hover,
.des-auth .des-auth-submit:focus-visible {
    filter: brightness(1.08);
    opacity: 1;
}

.des-auth .login-form .forgot-password {
    margin: 0;
    text-align: right;
}

.des-auth .login-form .forgot-password a,
.des-auth .no-account a,
.des-auth .des-auth-login-link a {
    display: inline-flex;
    align-items: center;
    font-family: var(--des-ac-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: none;
}

.des-auth .login-form .forgot-password a:hover,
.des-auth .no-account a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* El separador del tema hace de borde superior del pie de la tarjeta */
.des-auth .des-auth-sep {
    height: var(--des-ac-border);
    margin: 0;
    background: var(--des-ac-line);
}

.des-auth .no-account {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    color: var(--des-ac-muted);
    text-align: center;
}

/* Registro: "Ya tiene una cuenta? Inicie sesion" bajo el titulo */
.des-auth .des-auth-login-link {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: -14px 0 0;
    font-size: 14px;
    color: var(--des-ac-muted);
}

/* ----- Formularios de cada pantalla ----- */

.des-auth #login-form,
.des-auth #customer-form,
.des-auth .forgotten-password,
.des-auth .renew-password {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.des-auth #login-form > div:first-child,
.des-auth #customer-form > div:first-child,
.des-auth .field-password-policy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.des-auth .form-footer,
.des-auth .des-auth-card #customer-form .form-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Nota de campos obligatorios: el texto llega en la custom property que pone
   customer/page-auth.tpl, porque el partial del formulario es compartido */
.des-auth #customer-form .form-footer::before {
    content: var(--des-auth-required-note, "");
    font-size: 12.5px;
    color: var(--des-ac-muted);
}

.des-auth .forgotten-password .send-renew-password-link {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

.des-auth .renew-password .email {
    margin: 0;
    padding: 14px 16px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    color: var(--des-ac-text);
}

/* ----- Avisos de error ----- */

.des-auth .ps-alert-error {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 12px;
}

.des-auth .ps-alert-error .item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--des-ac-danger-soft);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    color: var(--des-ac-danger);
}

.des-auth .ps-alert-error .item i svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.des-auth .ps-alert-error .item i svg path {
    fill: currentColor;
}

.des-auth .ps-alert-error .item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
    text-wrap: pretty;
}

.des-auth .help-block {
    margin: 0;
}

.des-auth .help-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.des-auth .help-block li {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-danger);
}

/* ----- Pie: volver a inicio de sesion ----- */

.des-auth .des-auth-page-footer {
    max-width: 740px;
    margin: 14px auto 0;
    text-align: center;
}

.des-auth .des-auth-page-footer a,
.des-auth #back-to-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--des-ac-radius-sm);
    font-family: var(--des-ac-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--des-ac-muted);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

.des-auth .des-auth-page-footer a:hover,
.des-auth #back-to-login:hover {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-auth .des-auth-page-footer .material-icons,
.des-auth #back-to-login .material-icons {
    font-size: 18px;
}

@media (max-width: 767px) {
    .des-auth {
        padding-block: 24px;
    }

    .des-auth .des-auth-card,
    .des-auth .des-auth-card:has(#customer-form) {
        padding: 24px 18px;
        gap: 18px;
    }

    .des-auth .des-auth-card .page-header h1 {
        font-size: 21px;
    }
}


/* ---------- 11d: enlace enviado ----------
   customer/password-infos.tpl emite <ul class="ps-alert-success"> con un <li
   class="item"> por mensaje. Nadie lo estilaba: ni theme.css ni el core. */

.des-auth .ps-alert-success {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.des-auth .ps-alert-success .item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--des-ac-accent-soft);
    border-radius: var(--des-ac-radius-sm);
}

.des-auth .ps-alert-success .item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--des-ac-surface);
    color: var(--des-ac-accent);
}

.des-auth .ps-alert-success .item i svg {
    width: 18px;
    height: 18px;
}

/* El marcado trae fill="#fff" como atributo; el CSS gana al atributo, asi que
   el check toma el color de acento en vez de quedar blanco sobre blanco */
.des-auth .ps-alert-success .item i svg path {
    fill: currentColor;
}

.des-auth .ps-alert-success .item p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--des-ac-text);
    text-wrap: pretty;
    background-color: unset;
    padding: unset;
}


/* ---------- 11e: restablecer la contrasena ----------
   customer/password-new.tpl. El correo va como dato de solo lectura y los
   requisitos los inyecta el JS de la politica de contrasenas. */

.des-auth .renew-password .email {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 18px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

.des-auth-readonly__label {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--des-ac-muted);
}

.des-auth-readonly__value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--des-ac-text);
    word-break: break-all;
}

/* Requisitos y medidor: el marcado lo inyecta
   _partials/password-policy-template.tpl y lo maneja el JS del tema, que pone
   el ancho del .progress-bar, le cambia la clase entre bg-danger / bg-warning /
   bg-success y marca con .text-success los requisitos cumplidos. */
.des-auth .password-strength-feedback,
.des-checkout .password-strength-feedback {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 15px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

/* Los cuatro tramos salen de una mascara: el core pinta una sola barra */
.des-auth .progress-container,
.des-checkout .progress-container {
    margin-bottom: 6px;
    -webkit-mask-image: repeating-linear-gradient(to right, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%);
    mask-image: repeating-linear-gradient(to right, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%);
}

.des-auth .progress,
.des-checkout .progress {
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: var(--des-ac-line);
    overflow: hidden;
}

.des-auth .progress-bar,
.des-checkout .progress-bar {
    height: 100%;
    background: var(--des-ac-accent);
    transition: width var(--des-ac-transition);
}

.des-auth .progress-bar.bg-danger,
.des-checkout .progress-bar.bg-danger {
    background: var(--des-ac-danger);
}

.des-auth .progress-bar.bg-warning,
.des-checkout .progress-bar.bg-warning {
    background: var(--des-ac-warning);
}

.des-auth .progress-bar.bg-success,
.des-checkout .progress-bar.bg-success {
    background: var(--des-ac-accent);
}

.des-ac-form .password-strength-text:empty,
.des-auth .password-strength-text:empty,
.des-checkout .password-strength-text:empty {
    display: none;
}

.des-auth .password-strength-text,
.des-checkout .password-strength-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
}

.des-auth .password-requirements,
.des-checkout .password-requirements {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.des-auth .password-requirements p,
.des-checkout .password-requirements p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--des-ac-muted);
}

.des-auth .password-requirements .material-icons,
.des-checkout .password-requirements .material-icons {
    flex: none;
    font-size: 15px;
}

/* .text-success lo pone el JS en los requisitos que ya se cumplen */
.des-auth .password-requirements .text-success,
.des-auth .password-requirements p:has(.text-success),
.des-checkout .password-requirements .text-success,
.des-checkout .password-requirements p:has(.text-success) {
    color: var(--des-ac-accent);
}

/* El JS anade estas clases al propio input al validar */
.des-auth .des-form-control.border-success,
.des-auth .des-input-group:has(.border-success),
.des-checkout .des-form-control.border-success,
.des-checkout .des-input-group:has(.border-success) {
    border-color: var(--des-ac-accent);
}

.des-auth .des-form-control.border-danger,
.des-auth .des-input-group:has(.border-danger),
.des-checkout .des-form-control.border-danger,
.des-checkout .des-input-group:has(.border-danger) {
    border-color: var(--des-ac-danger);
}



/* ---------- Arreglos de chrome global del tema ----------
   Van aqui, y no en global-vars.css, para que el paquete no tenga que tocar un
   archivo lleno de valores propios de cada tienda. myaccount.css se carga en
   todas las paginas, asi que el efecto es el mismo. */

/* El reset del tema hace ul{list-style:none} pero nunca toca ol, y el
   breadcrumb (_partials/breadcrumb.tpl) es un <ol>, asi que heredaba el
   list-style:decimal del navegador y salia numerado. */
.des-breadcrumb ol {
    list-style: none;
}

/* theme.css define .modal-backdrop con position:fixed, z-index:1040 y
   background-color:#000 OPACO; la transparencia la saca de .modal-backdrop.in
   {opacity:.5}. Pero .fade no esta definida en ninguna hoja del tema, asi que
   sin estado oculto los <div class="modal-backdrop fade"> que blockwishlist
   inyecta en TODAS las paginas (hook displayFooter) dejaban la web con un velo
   oscuro permanente.
   Se cubren .in (Bootstrap 3, la que usa el modulo) y .show (BS4).
   OJO con la opacidad del estado visible: tiene que ser .5, no 1. El fondo de
   theme.css es #000 solido, y ademas .modal-backdrop.fade.in es (0,3,0) y le
   gana a .modal-backdrop.in (0,2,0) de theme.css, asi que un 1 aqui deja el
   overlay negro opaco al abrir cualquier modal del modulo. */
.modal-backdrop.fade {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

.modal-backdrop.fade.in,
.modal-backdrop.fade.show {
    opacity: .5;
    visibility: visible;
    pointer-events: auto;
}


/* ---------- Checkout: pasos 1 a 4 (12a-12c, 13a-13c, 14a-14b) ----------
   Checkout NATIVO de PrestaShop: onepagecheckoutps esta instalado pero inactivo.

   Escrito contra el DOM real de templates/checkout/, no contra una lista de
   clases. Los tres puntos donde la estructura no es la evidente:

     - shipping.tpl: .carrier-delay es HERMANO de .carrier, no hijo. Para que el
       plazo quede bajo el nombre, .carrier pasa a display:contents y las celdas
       se colocan a mano en el grid de .delivery-option-2.
     - payment.tpl: cada opcion va en un <div> sin clase, y .additional-information
       es hermano de ESE div, no de .payment-option.
     - payment.tpl: en las condiciones el checkbox esta en .des-condition-check,
       FUERA de .condition-label; la fila es el <li>.

   theme.css tenia 111 reglas .des-checkout que se han retirado. Entre ellas
   habia varias FUNCIONALES, no solo estéticas, que se reponen en el apartado 1:
   sin ellas las dos pestanas del paso 1 se pintan a la vez y se muestran todos
   los formularios de pago. */


/* ---- 1. Reglas funcionales que hay que reponer ---- */

/* Pestanas del paso 1: sin esto se ven las dos a la vez */
body#checkout .des-checkout .tab-pane {
    display: none;
}

body#checkout .des-checkout .tab-pane.active {
    display: block;
}

/* Lo oculta el JS del core al elegir metodo de pago; sin esto se muestran
   todos los formularios y descripciones a la vez */
body#checkout .des-checkout .ps-hidden,
body#checkout .des-checkout .des-hidden {
    display: none;
}

/* Alternativas sin JavaScript del core (botones "Elegir", "Pedir con
   obligacion de pago"). El tema nunca marco el <html> con una clase js, asi que
   se ocultan sin condicion, como hace el tema classic. */
body#checkout .des-checkout .ps-hidden-by-js {
    display: none;
}


/* ---- 2. Cascara ---- */

body#checkout .des-checkout .des-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    padding-block: 36px;
}

body#checkout .des-checkout .des-checkout__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin-bottom: 0;
}

body#checkout .des-checkout .des-checkout__aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
    min-width: 0;
}


/* ---- 3. Pasos ----
   <section class="checkout-step [-current][-reachable][-complete]">
     <h1 class="step-title"><i class="done"><span class="step-number">titulo
        <span class="step-edit">
     <div class="content"> */

body#checkout .des-checkout .checkout-step {
    margin: 0;
    padding: 0;
    background: var(--des-ac-surface);
    border: var(--des-ac-border) solid var(--des-ac-line) !important;
    border-radius: var(--des-ac-radius);
}

body#checkout .des-checkout .checkout-step .step-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 20px 24px !important;
    font-family: var(--des-ac-font);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--des-ac-muted);
    border-bottom: unset;
    text-transform: initial;
}

body#checkout .des-checkout .checkout-step.-current .step-title,
body#checkout .des-checkout .checkout-step.-complete .step-title {
    color: var(--des-ac-text);
}

body#checkout .des-checkout .checkout-step.-reachable:not(.-current) .step-title {
    cursor: pointer;
}

body#checkout .des-checkout .checkout-step .step-number {
    display: inline-flex;
    align-items: center!important;
    justify-content: center!important;
    flex: none!important;
    width: 32px!important;
    height: 32px!important;
    border-radius: 999px!important;
    background: var(--des-ac-fill)!important;
    font-size: 14px;
    font-weight: 700;
    color: var(--des-ac-muted)!important;
}

body#checkout .des-checkout .checkout-step.-current .step-number {
    background: var(--des-ac-primary) !important;
    color: #fff !important;
}

/* En el paso completado el numero se sustituye por el check */
body#checkout .des-checkout .checkout-step.-complete .step-number {
    display: none;
}

body#checkout .des-checkout .checkout-step .step-title .done {
    display: none;
    align-items: center!important;
    justify-content: center!important;
    flex: none!important;
    width: 32px!important;
    height: 32px!important;
    border-radius: 999px!important;
    background: var(--des-ac-primary)!important;
    font-size: 18px!important;
    color: #fff!important;
}

body#checkout .des-checkout .checkout-step.-complete .step-title .done {
    display: inline-flex;
}

body#checkout .des-checkout .checkout-step .step-edit {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-left: auto;
    padding: 0 12px;
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-muted) !important;
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
    text-transform: initial;
}

body#checkout .des-checkout .checkout-step.-complete.-reachable .step-edit {
    display: inline-flex;
    float: unset;
    margin-top: unset;
    margin-left: unset;
    margin-right: 0px;
}

body#checkout .des-checkout .checkout-step .step-edit:hover {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .checkout-step .step-edit .material-icons {
    font-size: 16px;
}
body#checkout .des-checkout section.checkout-step.-current .content,
body#checkout .des-checkout section.checkout-step.-current.-reachable.-complete .content,
body#checkout .des-checkout .checkout-step .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 26px 26px;
}

body#checkout .des-checkout .checkout-step:not(.-current) .content {
    display: none;
}

/* Los pasos plegados quedan como una fila sola: sin el hueco de abajo */
body#checkout .des-checkout .checkout-step:not(.-current) .step-title {
    padding-block: 20px;
}

body#checkout .des-checkout .des-step-subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--des-ac-text);
}

/* Los parrafos sueltos que sueltan los pasos. Sin :not([class]) y sin bajar a
   los formularios internos se quedaban fuera: muchos no son hijos directos de
   .content, sino que van dentro de .js-address-form > form. */
body#checkout .des-checkout .checkout-step p:not([class]) {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

body#checkout .des-checkout .checkout-step p:not([class]) > a {
    color: var(--des-ac-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* "La direccion de facturacion difiere de la de entrega".
   El diseno 13a lo dibuja como una fila con casilla, pero el core lo emite como
   un enlace que cambia el estado por URL (?use_same_address=0), no como un
   checkbox. Se le da el mismo aspecto de fila pulsable sin fingir la casilla. */
body#checkout .des-checkout .checkout-step p:has(> [data-link-action="different-invoice-address"]) {
    margin: 0;
}

body#checkout .des-checkout [data-link-action="different-invoice-address"] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--des-ac-text);
    text-decoration: none;
    text-wrap: pretty;
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

body#checkout .des-checkout [data-link-action="different-invoice-address"]:hover,
body#checkout .des-checkout [data-link-action="different-invoice-address"]:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}


/* ---- 4. Paso 1: pestanas y sesion (12a, 12b, 12c) ---- */

body#checkout .des-checkout .des-checkout-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-self: flex-start;
    margin: 0;
    padding: 4px;
    background: var(--des-ac-fill);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    list-style: none;
}

body#checkout .des-checkout .des-checkout-tabs .nav-item {
    margin: 0;
}

body#checkout .des-checkout .des-checkout-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 0;
    border-radius: calc(var(--des-ac-radius-sm) - 2px);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

body#checkout .des-checkout .des-checkout-tabs .nav-link:hover {
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .des-checkout-tabs .nav-link.active {
    background: var(--des-ac-surface);
    color: var(--des-ac-accent);
}

/* Con el fondo de pastilla el separador " | " sobra */
body#checkout .des-checkout .des-checkout-tabs .nav-separator {
    display: none;
}

/* Panel "Conectado como ..." (envoltorio anadido en personal-information.tpl) */
body#checkout .des-checkout .des-checkout__connected {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout .des-checkout__connected p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .des-checkout__connected .identity a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* El segundo parrafo es el de cerrar sesion: separado y en rojo */
body#checkout .des-checkout .des-checkout__connected .identity + p {
    padding-top: 12px;
    border-top: var(--des-ac-border) solid var(--des-ac-line);
}

body#checkout .des-checkout .des-checkout__connected .identity + p a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-danger-soft);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-danger);
    text-decoration: none;
    transition: background-color var(--des-ac-transition);
    margin: 0;
}

body#checkout .des-checkout .des-checkout__connected .identity + p a:hover,
body#checkout .des-checkout .des-checkout__connected .identity + p a:focus-visible {
    background: var(--des-ac-danger-tint);
    color: var(--des-ac-danger);
}

/* El tercero es el aviso de que se vacia el carrito */
body#checkout .des-checkout .des-checkout__connected small {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--des-ac-muted);
}

/* Bloque "Crear una cuenta (opcional)" del customer-form del checkout */
body#checkout .des-checkout .form-informations {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

body#checkout .des-checkout .form-informations-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .form-informations-option,
body#checkout .des-checkout .form-informations-subtitle {
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.45;
    color: var(--des-ac-muted);
}


/* ---- 5. Paso 2: direcciones (13a, 13b, 13c) ----
   <div class="address-selector">
     <article class="address-item [selected]"><header><label class="radio-block">
        <span class="custom-radio"> <span class="address-alias">
        <div class="address">  ...  <hr> <footer class="address-footer"> */

/* El contenido de los pasos 2 y 3 va dentro de envoltorios sin estilo
   (.js-address-form > form, .delivery-options-list > form), asi que el gap del
   .content no llega a las piezas de dentro y salian todas pegadas. */
body#checkout .des-checkout .js-address-form, body#checkout .des-checkout .js-address-form > form, body#checkout .des-checkout .delivery-options-list, body#checkout .des-checkout .delivery-options-list > form, body#checkout .des-checkout #delivery-address, body#checkout .des-checkout section.checkout-step #invoice-address {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

body#checkout .des-checkout #checkout-addresses-step .address-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin: unset;
}

/* address-selector-block.tpl cierra con un <p> que solo contiene el boton de
   guardar sin JavaScript. Como celda de la rejilla dejaba un hueco vacio. */
body#checkout .des-checkout .address-selector > p:has(> .ps-hidden-by-js) {
    display: none;
}

body#checkout .des-checkout  section.checkout-step .address-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 20px;
    background: var(--des-ac-fill);
    border: 0;
    border-radius: var(--des-ac-radius);
    transition: background var(--des-ac-transition);
    border-style: unset;
    border-width: unset;
}

body#checkout .des-checkout section.checkout-step .address-item.selected {
    background: var(--des-ac-accent-soft);
    border-style: unset;
    border-width: unset;
}

body#checkout .des-checkout section.checkout-step  .address-item header {
    padding: 0;
    background: none;
    border: 0;
    min-height: unset;
}

/* El label envuelve radio, alias y direccion: en columna, con la direccion
   sangrada a la altura del alias */
body#checkout .des-checkout .address-item .radio-block {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 11px;
    row-gap: 14px;
    margin: 0;
    cursor: pointer;
    padding: unset;
    text-align: start;
}

body#checkout .des-checkout .address-item .address-alias {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--des-ac-text);
    display: unset;
    margin-bottom: unset;
}

body#checkout .des-checkout .address-item.selected .address-alias {
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .address-item .address {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--des-ac-muted);
}

/* Los bloques ya se distinguen por el fondo */
body#checkout .des-checkout .address-item hr {
    display: none;
}

body#checkout .des-checkout .address-item .address-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    padding-left: 29px;
    font: inherit;
    border: 0;
    text-align: unset;
}

body#checkout .des-checkout .address-item .address-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--des-ac-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-muted);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
    margin: 0;
}

body#checkout .des-checkout .address-item .address-footer .edit-address:hover {
    background: var(--des-ac-surface);
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .address-item .address-footer .delete-address {
    color: var(--des-ac-danger);
}

body#checkout .des-checkout .address-item .address-footer .delete-address:hover {
    background: var(--des-ac-danger-soft);
    color: var(--des-ac-danger);
}

body#checkout .des-checkout .address-item .address-footer .material-icons {
    font-size: 16px;
}

body#checkout .des-checkout section.checkout-step .add-address {
    margin: 0;
}

body#checkout .des-checkout .add-address a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-fill);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

body#checkout .des-checkout .add-address a:hover {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .add-address .material-icons {
    font-size: 18px;
}


/* ---- 6. Paso 3: envio (14a) ----
   <div class="delivery-option">
     <span class="custom-radio">
     <label class="delivery-option-2">
       <span class="carrier"><span class="carrier-logo"><span class="carriere-name-container">
       <span class="carrier-delay">     <- hermano de .carrier
       <span class="carrier-price">
   <div class="carrier-extra-content">  <- hermano de .delivery-option */

body#checkout .des-checkout .delivery-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#checkout .des-checkout section.checkout-step .delivery-option {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 18px 20px !important;
    background: var(--des-ac-fill);
    border: 0;
    border-radius: var(--des-ac-radius);
    cursor: pointer;
    transition: background var(--des-ac-transition);
    margin: 0 !important;
}

body#checkout .des-checkout section.checkout-step .delivery-option:has(input:checked) {
    background: var(--des-ac-accent-soft);
}

/* El label es la rejilla: logo | nombre+plazo | precio.
   .carrier pasa a display:contents para que el logo y el nombre sean celdas y
   el plazo pueda quedar debajo del nombre, no debajo del logo. */
body#checkout .des-checkout section.checkout-step  .delivery-option-2 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 3px;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier {
    display: contents;
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-surface);
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier-logo img {
    max-width: 30px;
    max-height: 30px;
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carriere-name-container {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier-name {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
}

body#checkout .des-checkout section.checkout-step .delivery-option:has(input:checked) .carrier-name {
    color: var(--des-ac-accent);
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier-delay {
    grid-column: 2;
    grid-row: 2;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--des-ac-muted);
}

body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier-price {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--des-ac-text);
    white-space: nowrap;
}

body#checkout .des-checkout section.checkout-step .delivery-option:has(input:checked) .carrier-price {
    color: var(--des-ac-accent);
}

/* Contenido extra del transportista. El core lo oculta con style inline en los
   no seleccionados, pero en el seleccionado lo deja visible aunque venga vacio:
   solo trae saltos de linea, asi que :empty no sirve. Con :has(*) el bloque solo
   se pinta cuando algun modulo ha metido algo de verdad, y si el navegador no
   soporta :has() se descarta la regla y como mucho queda sin estilo, nunca
   escondiendo contenido real. */
body#checkout .des-checkout .carrier-extra-content:has(*) {
    margin: -4px 0 0;
    padding: 14px 20px;
    background: var(--des-ac-fill);
    border-radius: 0 0 var(--des-ac-radius) var(--des-ac-radius);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--des-ac-muted);
}

/* Comentario del pedido, embalaje reciclado y regalo */
body#checkout .des-checkout .order-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* #gift lleva la clase .collapse, que theme.css oculta con .collapse{display:none}.
   Un selector con id gana a esa regla, asi que hay que excluirlo o el mensaje de
   regalo se veria siempre abierto. Solo se despliega con .in / .show, que es lo
   que alterna el JS. */
body#checkout .des-checkout .order-options > div:not(.collapse) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body#checkout .des-checkout .order-options > div.collapse.in,
body#checkout .des-checkout .order-options > div.collapse.show {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Solo la etiqueta de los textarea, no la de las casillas */
body#checkout .des-checkout .order-options > div > label {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

body#checkout .des-checkout .order-options textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--des-ac-text);
    background: var(--des-ac-fill);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    outline: none;
    resize: vertical;
    transition: border-color var(--des-ac-transition);
}

body#checkout .des-checkout .order-options textarea:focus {
    border-color: var(--des-ac-accent);
}

/* Aqui el <label> es HERMANO del input, no lo envuelve: la fila es el propio
   .custom-checkbox */
body#checkout .des-checkout .order-options .custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout .order-options .custom-checkbox label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--des-ac-text);
    text-wrap: pretty;
    cursor: pointer;
}


/* ---- 7. Paso 4: pago (14b) ----
   <div class="payment-options">
     <div>                                  <- envoltorio sin clase, por opcion
       <div class="payment-option">
     <div class="additional-information">    <- hermano del envoltorio
     <div class="js-payment-option-form"> */

body#checkout .des-checkout .payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body#checkout .des-checkout .payment-options > div:has(> .payment-option) {
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
    transition: background var(--des-ac-transition);
}

body#checkout .des-checkout .payment-options > div:has(.payment-option input:checked) {
    background: var(--des-ac-accent-soft);
}

body#checkout .des-checkout .payment-option {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 18px 20px;
    background: none;
    border: 0;
}

body#checkout .des-checkout .payment-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--des-ac-text);
    cursor: pointer;
}

body#checkout .des-checkout .payment-options > div:has(.payment-option input:checked) label {
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .payment-option img {
    max-height: 28px;
}

/* La descripcion del metodo, hermana del envoltorio de la opcion */
body#checkout .des-checkout .additional-information {
    margin: 0;
    padding: 16px 20px;
    background: var(--des-ac-accent-soft);
    border-radius: var(--des-ac-radius);
    font-size: 14px;
    line-height: 1.6;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

body#checkout .des-checkout .additional-information p {
    margin: 0;
}

body#checkout .des-checkout .additional-information p + p {
    margin-top: 8px;
}

body#checkout .des-checkout .additional-information a {
    color: var(--des-ac-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Condiciones: la fila es el <li>, con el checkbox en .des-condition-check y el
   texto en .condition-label, que son hermanos */
body#checkout .des-checkout #conditions-to-approve ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body#checkout .des-checkout #conditions-to-approve li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 15px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout .des-condition-check {
    display: flex;
    align-items: flex-start;
    flex: none;
    padding-top: 2px;
}

body#checkout .des-checkout .condition-label {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

body#checkout .des-checkout .condition-label label {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--des-ac-text);
    text-wrap: pretty;
    cursor: pointer;
}

body#checkout .des-checkout .condition-label a {
    color: var(--des-ac-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body#checkout .des-checkout .js-payment-confirmation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body#checkout .des-checkout .cart-payment-step-refreshed-info,
body#checkout .des-checkout .cart-payment-step-not-needed-info {
    margin: 0;
    padding: 14px 16px;
    background: var(--des-ac-accent-soft);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    color: var(--des-ac-accent);
}


/* ---- 8. Radios, checkbox y botones ----
   El reset del tema deja los input en appearance:none y el widget del core
   trae un <span> decorativo que sobra */

body#checkout .des-checkout .custom-radio > span,
body#checkout .des-checkout .custom-checkbox input[type="checkbox"] + span {
    display: none;
}

body#checkout .des-checkout .custom-radio {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-box-flex: unset;
    -ms-flex: unset;
    flex: unset;
}

body#checkout .des-checkout section.checkout-step .custom-radio input[type="radio"], body#checkout .des-checkout .custom-checkbox input[type="checkbox"] {
    position: static;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 1;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--des-ac-accent);
    cursor: pointer;
}

body#checkout .des-checkout .des-checkout-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

body#checkout .des-checkout .des-btn,
body#checkout .des-checkout button.des-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    align-self: flex-end;
    min-height: 48px;
    margin: 0;
    padding: 13px 30px;
    background: var(--des-ac-primary);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: var(--des-ac-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

body#checkout .des-checkout .des-btn:hover {
    filter: brightness(1.08);
    color: #fff;
    opacity: 1;
}

body#checkout .des-checkout .des-btn--place-order {
    width: 100%;
    align-self: stretch;
    min-height: 52px;
}

body#checkout .des-checkout .des-btn[disabled],
body#checkout .des-checkout .des-btn.disabled {
    background: var(--des-ac-fill);
    color: var(--des-ac-line);
    cursor: not-allowed;
    filter: none;
}

/* Si algun tema no sobreescribe form_buttons, el boton llega con las clases
   del core (btn btn-primary des-auth-submit) */
body#checkout .des-checkout .des-auth-submit,
body#checkout .des-checkout .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: auto;
    min-height: 48px;
    margin: 0;
    padding: 13px 30px;
    background: var(--des-ac-primary);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: var(--des-ac-font);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

body#checkout .des-checkout .des-auth-submit:hover,
body#checkout .des-checkout .btn-primary:hover {
    filter: brightness(1.08);
    opacity: 1;
    color: #fff;
}

body#checkout .des-checkout .des-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-fill);
    font-size: 15px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-decoration: none;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
    margin: 0;
}

body#checkout .des-checkout .des-btn-cancel:hover {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}


/* ---- 9. Avisos ---- */

body#checkout .des-checkout .des-alert,
body#checkout .des-checkout .des-alert-error {
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

body#checkout .des-checkout .des-alert {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .des-alert-error {
    background: var(--des-ac-danger-soft);
    color: var(--des-ac-danger);
}


/* ---- 10. Resumen lateral ---- */

body#checkout .des-checkout .des-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--des-ac-surface);
    border: var(--des-ac-border) solid var(--des-ac-line);
    border-radius: var(--des-ac-radius);
}

body#checkout .des-checkout .des-cart-summary__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body#checkout .des-checkout .cart-summary-top:empty {
    display: none;
}

/* Son DOS <p> hermanos: el recuento y el enlace de detalles. En fila para que
   queden en la misma linea, y la lista plegable ocupa el ancho completo. */
body#checkout .des-checkout .cart-summary-products {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

body#checkout .des-checkout .cart-summary-products > p {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .cart-summary-products .collapse {
    flex-basis: 100%;
}

body#checkout .des-checkout .js-show-details {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: none;
    cursor: pointer;
}

body#checkout .des-checkout .js-show-details .material-icons {
    font-size: 16px;
}

body#checkout .des-checkout .des-cart-products {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

body#checkout .des-checkout .des-cart-product {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout #cart-summary-product-list .des-cart-product__img img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: calc(var(--des-ac-radius-sm) - 2px);
}

body#checkout .des-checkout .des-cart-product__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--des-ac-muted);
}
body#checkout .des-checkout .des-cart-product__info .product-price{
    color:inherit;
}

body#checkout .des-checkout .des-cart-product__info .product-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

body#checkout .des-checkout .cart-summary-subtotals-container,
body#checkout .des-checkout .cart-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body#checkout .des-checkout .cart-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 0;
}

body#checkout .des-checkout .cart-summary-line .label {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--des-ac-muted);
    padding-left: unset;
}

body#checkout .des-checkout .cart-summary-line .value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}
.cart-summary-line::after {
    content: none !important;
}
body#checkout .des-checkout .cart-summary-line .label.sub,
body#checkout .des-checkout .cart-summary-line .value.sub {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--des-ac-muted);
}

/* Total en pastilla de acento */
body#checkout .des-checkout .cart-summary-line.cart-total {
    padding: 16px;
    background: var(--des-ac-accent-soft);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout .cart-summary-line.cart-total .label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .cart-summary-line.cart-total .value {
    font-size: 19px;
    font-weight: 600;
    color: var(--des-ac-accent);
    white-space: nowrap;
}

/* Vale de descuento */
body#checkout .des-checkout .block-promo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

body#checkout .des-checkout .block-promo .promo-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body#checkout .des-checkout .promo-name__value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .promo-name__value a {
    display: inline-flex;
    color: var(--des-ac-muted);
}

body#checkout .des-checkout .promo-name__value a:hover {
    color: var(--des-ac-danger);
}

body#checkout .des-checkout .promo-name__value .material-icons {
    font-size: 16px;
}

body#checkout .des-checkout .promo-code-button {
    margin: 0;
}

body#checkout .des-checkout .collapse-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: none;
    cursor: pointer;
}

body#checkout .des-checkout .promo-code form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

body#checkout .des-checkout .promo-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 11px 14px;
    min-height: 44px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--des-ac-text);
    background: var(--des-ac-fill);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    outline: none;
    transition: border-color var(--des-ac-transition);
}

body#checkout .des-checkout .promo-input:focus {
    border-color: var(--des-ac-accent);
}

body#checkout .des-checkout .promo-code .des-btn {
    min-height: 44px;
    padding: 11px 20px;
}

body#checkout .des-checkout .promo-discounts {
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    color: var(--des-ac-muted);
    list-style: none;
}

/* Bloque de tranquilidad del hook displayReassurance */
body#checkout .des-checkout .des-checkout__aside .block-reassurance {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 20px;
    background: var(--des-ac-fill);
    border: 0;
    border-radius: var(--des-ac-radius);
    list-style: none;
}

body#checkout .des-checkout .des-checkout__aside .block-reassurance li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .des-checkout__aside .block-reassurance img,
body#checkout .des-checkout .des-checkout__aside .block-reassurance svg {
    flex: none;
    width: 18px;
    height: 18px;
}


/* ---- 11. Campos de formulario dentro del checkout ---- */

body#checkout .des-checkout .form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* customer/_partials/customer-form.tpl y login-form.tpl envuelven los campos en
   un <div> SIN CLASE. Sin esto los campos salen pegados unos a otros.
   Se le pone display:contents para que los .des-form-field pasen a ser celdas
   de la rejilla del formulario y se puedan colocar como en el diseno. */
body#checkout .des-checkout #customer-form,
body#checkout .des-checkout #login-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    margin: 0 !important;
}

body#checkout .des-checkout #customer-form > div,
body#checkout .des-checkout #login-form > div {
    display: contents;
}

/* Por defecto cada campo ocupa las dos columnas; abajo se marcan los que van a
   la mitad */
body#checkout .des-checkout #customer-form > div > *,
body#checkout .des-checkout #customer-form > .form-informations,
body#checkout .des-checkout #login-form > div > * {
    grid-column: 1 / -1;
}

/* Nombre y apellidos a la mitad, como en el 12a; en el login, correo y
   contrasena, como en el 12b */
body#checkout .des-checkout #customer-form .des-form-field:has(#field-firstname),
body#checkout .des-checkout #customer-form .des-form-field:has(#field-lastname),
body#checkout .des-checkout #login-form .des-form-field:has(#field-email),
body#checkout .des-checkout #login-form .des-form-field:has(.des-input-group) {
    grid-column: span 1;
}

/* El pie del formulario y el enlace de contrasena olvidada comparten fila:
   el enlace a la izquierda y el boton a la derecha, como en el 12b */
body#checkout .des-checkout #login-form .forgot-password {
    grid-column: 1;
    align-self: center;
    margin: 0;
    text-align: left;
}

body#checkout .des-checkout #login-form .form-footer {
    grid-column: 2;
}

body#checkout .des-checkout .forgot-password a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--des-ac-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: none;
}

body#checkout .des-checkout .forgot-password a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Bloque "Crear una cuenta (opcional)" del 12a.
   El envoltorio lo pone checkout/_partials/customer-form.tpl: en el DOM el
   titulillo, el campo de contrasena y la fecha son hermanos sueltos, y sin
   agrupar no hay forma de pintar el panel gris del diseno. La fecha queda
   fuera del panel porque llega en otra iteracion del bucle de campos. */
body#checkout .des-checkout__account {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-column: 1 / -1;
    padding: 20px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout #customer-form .form-informations {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

/* El <br> del core sobra al apilar en columna */
body#checkout .des-checkout .form-informations br {
    display: none;
}

/* Dentro del panel gris los campos van en blanco, como en el 12a.
   Llevan .des-checkout delante a proposito: sin el empatan en especificidad con
   .des-checkout .des-form-control del apartado 11, que va despues en la hoja y
   ganaba por orden dejando los inputs en gris sobre gris. */
body#checkout .des-checkout .des-checkout__account .des-form-control,
body#checkout .des-checkout .des-checkout__account .des-input-group {
    background: var(--des-ac-surface);
}

body#checkout .des-checkout .des-checkout__account .des-input-group .des-form-control {
    background: transparent;
}

body#checkout .des-checkout .des-checkout__account .password-strength-feedback {
    background: var(--des-ac-surface);
}

body#checkout .des-checkout .des-checkout__account .progress {
    background: var(--des-ac-fill);
}

/* Los campos del alta con contrasena van agrupados en el 12a; aqui al menos
   se separan del resto */
body#checkout .des-checkout #customer-form .field-password-policy {
    grid-column: 1 / -1;
}

body#checkout .des-checkout .des-form-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

body#checkout .des-checkout .des-form-label {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-text);
    margin-bottom: 0;
}

body#checkout .des-checkout .des-form-label.required::after {
    content: "*";
    margin-left: 4px;
    font-weight: 700;
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .des-form-input {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

body#checkout .des-checkout .des-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    min-height: 46px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--des-ac-text);
    background: var(--des-ac-fill);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    outline: none;
    transition: border-color var(--des-ac-transition);
}

body#checkout .des-checkout .des-form-control:focus {
    border-color: var(--des-ac-accent);
}

body#checkout .des-checkout textarea.des-form-control {
    min-height: auto;
    line-height: 1.5;
    resize: vertical;
}

body#checkout .des-checkout .des-form-select {
    padding-right: 42px;
    cursor: pointer;
}

body#checkout .des-checkout .des-form-comment {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-muted);
}

body#checkout .des-checkout .des-form-optional {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--des-ac-muted);
}

body#checkout .des-checkout .des-form-field:has(> .des-form-input > .des-form-optional) .des-form-label {
    padding-right: 6.5em;
}

body#checkout .des-checkout .des-input-group {
    display: flex;
    align-items: center;
    background: var(--des-ac-fill);
    border: var(--des-ac-border) solid transparent;
    border-radius: var(--des-ac-radius-sm);
    overflow: hidden;
    transition: border-color var(--des-ac-transition);
}

body#checkout .des-checkout .des-input-group:focus-within {
    border-color: var(--des-ac-accent);
}

body#checkout .des-checkout .des-input-group .des-form-control {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body#checkout .des-checkout .des-input-addon {
    flex: none;
    display: flex;
}

body#checkout .des-checkout .des-show-password-btn {
    padding: 0 14px;
    height: 46px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
    cursor: pointer;
    transition: color var(--des-ac-transition);
}

body#checkout .des-checkout .des-show-password-btn:hover {
    color: var(--des-ac-accent);
}

body#checkout .des-checkout .des-form-valign {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

body#checkout .des-checkout .des-radio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 18px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14.5px;
    color: var(--des-ac-text);
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

body#checkout .des-checkout .des-radio:has(input:checked) {
    background: var(--des-ac-accent-soft);
    font-weight: 600;
    color: var(--des-ac-accent);
}

/* Los checkbox del formulario de cliente SI llevan el <label> envolviendo */
body#checkout .des-checkout .des-form-input > .custom-checkbox {
    display: block;
}

body#checkout .des-checkout .des-form-input > .custom-checkbox > label {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 9px 12px;
    margin: 0;
    padding: 14px 15px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--des-ac-text);
    text-wrap: pretty;
    cursor: pointer;
}

body#checkout .des-checkout .des-form-input > .custom-checkbox input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

body#checkout .des-checkout .custom-checkbox em {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

body#checkout .des-checkout .custom-checkbox br {
    display: none;
}

body#checkout .des-checkout .custom-checkbox .des-required-mark {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-size: 0;
    position: unset;
    top: unset;
    left: unset;
    -webkit-box-flex: unset;
    -ms-flex: unset;
    flex: unset;
    margin-top: unset;
}

body#checkout .des-checkout .custom-checkbox .des-required-mark::after {
    content: var(--des-ac-required-text, "*");
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

body#checkout .des-checkout .help-block {
    margin: 0;
}

body#checkout .des-checkout .help-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body#checkout .des-checkout .help-block li {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-danger);
}

body#checkout .des-checkout .form-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Casilla en linea del checkout: "usar esta direccion para la factura" */
body#checkout .des-checkout .des-inline-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: var(--des-ac-text);
    cursor: pointer;
}

body#checkout .des-checkout .des-inline-check input[type="checkbox"] {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--des-ac-accent);
    cursor: pointer;
}


/* ---- 12. Responsive ---- */

@media (max-width: 991px) {
    body#checkout .des-checkout .des-checkout__grid {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 24px;
    }

    body#checkout .des-checkout .des-checkout__aside {
        position: static;
        top: auto;
    }
}

@media (max-width: 767px) {
    body#checkout .des-checkout .checkout-step .step-title {
        padding: 16px 18px !important;
        font-size: 17px !important;
    }

    body#checkout .des-checkout section.checkout-step.-current .content, body#checkout .des-checkout section.checkout-step.-current.-reachable.-complete .content, body#checkout .des-checkout .checkout-step .content {
        padding: 0 18px 18px;
    }

    body#checkout .des-checkout #checkout-addresses-step .address-selector {
        grid-template-columns: 1fr;
    }

    body#checkout .des-checkout #customer-form,
    body#checkout .des-checkout #login-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body#checkout .des-checkout #login-form .forgot-password,
    body#checkout .des-checkout #login-form .form-footer {
        grid-column: 1;
    }

    /* El precio pasa debajo del nombre para no estrujar la fila */
    body#checkout .des-checkout section.checkout-step .delivery-option-2 {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body#checkout .des-checkout section.checkout-step .delivery-option-2 .carrier-price {
        grid-column: 2;
        grid-row: 3;
    }

    body#checkout .des-checkout .des-checkout-actions,
    body#checkout .des-checkout .form-footer {
        justify-content: stretch;
    }

    body#checkout .des-checkout .des-checkout-actions .des-btn,
    body#checkout .des-checkout .form-footer .des-btn {
        width: 100%;
        align-self: stretch;
    }
}

.des-radio .custom-radio{
    position: unset;
    /* display: unset; */
    width: unset;
    height: unset;
    margin-right: unset;
    vertical-align: unset;
    cursor: unset;
    background: unset;
    border: unset;
    border-radius: unset;
}
.des-radio .custom-radio input[type=radio]:checked+span {
    position: unset;
    top: unset;
    left: unset;
    display: unset;
    width: unset;
    height: unset;
    background-color: unset;
    border-radius: unset;
}