/* 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

   En destemabase los 5 ajustes de abajo leen los tokens del tema, con el valor
   del diseno original como reserva: en una tienda que no los tenga la hoja
   sigue funcionando sola. */

.des-mya,
.des-ac-page,
.customer-page,
.des-auth,
.des-checkout,
.des-contact,
body#cart .cart-summary,
#notifications {

    /* ===== AJUSTES POR TIENDA =====
       Enganchados a los tokens del tema (_dev/css/partials/_variables.scss):
       se cambia la marca ahi y la sigue tambien el area de cliente. El valor
       de reserva es el del diseno original, para una tienda sin esos tokens. */
    --des-ac-primary: var(--color-accent, #1A2B76);       /* color principal */
    --des-ac-accent: var(--color-accent, #101a4d);        /* color de acento  */
    --des-ac-font: var(--font-stack, "Lato", sans-serif); /* tipografia      */
    --des-ac-radius: var(--radius, 8px);                  /* radio           */
    --des-ac-border: 1px;                                 /* grosor de borde */
    /* =========================================================== */

    /* Derivados y valores fijos del diseno. FarmaciaCien: superficie, fondo,
       texto y lineas apuntan a los tokens del tema (desmetodo/trampas.md,
       «El area de cliente y el checkout no se parecen al resto»). */
    --des-ac-radius-sm: calc(var(--des-ac-radius) * .62);
    --des-ac-accent-soft: rgba(33, 39, 74, .08);
    --des-ac-surface: var(--color-bg, #fff);
    --des-ac-fill: var(--color-surface, #f5f5f7);
    --des-ac-text: var(--color-text, #1d1d1f);
    --des-ac-muted: var(--color-text-soft, #6e6e73);
    --des-ac-line: var(--color-border, #e2e2e6);
    --des-ac-line-strong: var(--color-border-strong, #d0d0d5);
    --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,
    .des-contact,
    body#cart .cart-summary,
    #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 *,
.des-contact *,
#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),
.des-contact :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),
.des-contact :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),
.des-contact :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),
.des-contact :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),
.des-contact :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 <span class="des-required-mark">
   con la palabra "Obligatorio" ya traducida, delante del texto de la etiqueta.
   Aqui solo se le da forma de distintivo. Antes el span traia un asterisco,
   font-size:0 lo tapaba y la palabra llegaba por ::after desde una custom
   property: con apostrofo rompia el CSS y el lector de pantalla no la leia. */
.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: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.des-ac-form .custom-checkbox .des-required-mark::after {
    content: none;
}

.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;
}

/* Sin avisos el contenedor sigue en el DOM (cart.js escribe en .js-notifications),
   pero no debe ocupar sitio: en la home, sin breadcrumb, dejaba una franja vacia */
#notifications .notifications-container:not(:has(.alert)) {
    display: none;
}

#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);
    }
}


/* ---------- Cupones de descuento (15a / 15b) ----------
   customer/discount.tpl. El estado vacio del 15b reutiliza .des-ac-empty, que
   ya comparten historial y direcciones; aqui solo cambia el icono, que lo pone
   la plantilla.

   Igual que en el historial, en movil la tabla pasa a fichas apiladas y la
   etiqueta de cada dato sale del data-label de la celda. */

/* A diferencia del historial, el 15a enmarca la tabla en una caja con borde en
   vez de una banda gris, y el scroll lateral va DENTRO de esa caja para que el
   borde no se corte al desplazar. */
.des-disc__wrap {
    border: var(--des-ac-border) solid var(--des-ac-line);
    border-radius: var(--des-ac-radius);
    overflow: hidden;
}

.des-disc__table {
    width: 100%;
    min-width: 840px;
    border-collapse: collapse;
}

.des-disc__table thead tr {
    background: var(--des-ac-fill);
}

.des-disc__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;
}

.des-disc__th-center {
    text-align: center;
}

.des-disc__table td {
    padding: 18px 16px;
    border-top: var(--des-ac-border) solid var(--des-ac-line);
    vertical-align: middle;
}

.des-disc__table tbody tr {
    transition: background var(--des-ac-transition);
}

.des-disc__table tbody tr:hover {
    background: var(--des-ac-fill);
}

/* Codigo y boton de copiar */
.des-disc__code-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.des-disc__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--des-ac-text);
    word-break: break-all;
}

.des-disc__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-fill);
    color: var(--des-ac-muted);
    cursor: pointer;
    transition: background var(--des-ac-transition), color var(--des-ac-transition);
}

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

.des-disc__copy-icon,
.des-disc__copy-done {
    width: 15px;
    height: 15px;
}

/* El check sustituye al icono de copiar durante segundo y medio. La clase la
   pone y la quita el script de la plantilla. */
.des-disc__copy-done {
    display: none;
}

.des-disc__copy.is-des-copied {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

.des-disc__copy.is-des-copied .des-disc__copy-icon {
    display: none;
}

.des-disc__copy.is-des-copied .des-disc__copy-done {
    display: block;
}

.des-disc__name {
    font-size: 15px;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

.des-disc__qty {
    text-align: center;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--des-ac-text);
}

/* El valor llega ya combinado del controlador ("10% + 5,00 €"), asi que la
   pastilla tiene que poder crecer y partir en dos lineas si hace falta. */
.des-disc__value {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--des-ac-accent);
    text-wrap: pretty;
}

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

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

.des-disc__cumul {
    text-align: center;
}

.des-disc__icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.des-disc__icon--yes {
    color: var(--des-ac-accent);
}

.des-disc__icon--no {
    color: var(--des-ac-line);
}

/* El "Si"/"No" traducido se queda para lectores de pantalla: el icono solo no
   dice nada. */
.des-disc__cumul-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.des-disc__date {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--des-ac-text);
    white-space: nowrap;
}

.des-disc__soon {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--des-ac-danger);
}

/* Movil: fichas apiladas, igual que el historial */
@media (max-width: 767px) {
    .des-disc__wrap {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

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

    .des-disc__table thead {
        display: none;
    }

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

    .des-disc__table tbody tr:hover {
        background: var(--des-ac-fill);
    }

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

    .des-disc__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);
    }

    /* En ficha, la columna acumulativo sin cabecera de tabla se queda coja:
       aqui el texto si se lee, y el icono sobra. */
    .des-disc__cumul {
        text-align: left;
    }

    .des-disc__cumul .des-disc__icon {
        display: none;
    }

    .des-disc__cumul-text {
        position: static;
        width: auto;
        height: auto;
        clip-path: none;
        font-size: 15px;
        color: var(--des-ac-text);
    }

    .des-disc__qty,
    .des-disc__date {
        text-align: left;
    }

    .des-disc__soon {
        display: inline-block;
        margin: 0 0 0 8px;
    }
}


/* ---------- Mis reseñas / lgcomments (16a, 16b, 16c) ----------
   Turno 16 del lienzo. Tres plantillas sobreescritas desde el tema, en
   themes/<tema>/modules/lgcomments/views/templates/front/:
   account_button_17.tpl (la tarjeta del 3d), account_reviews_17.tpl (16a/16b)
   y review_form_17.tpl (16c).

   La tarjeta de la rejilla NO necesita reglas propias: al emitir
   .des-mya__tile hereda el trato de los otros ocho accesos. Antes caia en el
   apaño generico .des-mya__modules a:not(.des-mya__tile).

   El 16b tampoco: reutiliza .des-ac-empty, el mismo estado vacio del 6b/15b. */

/* ---- 16a: listado de solicitudes de opinion ---- */
.des-rev__wrap {
    overflow-x: auto;
}

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

.des-rev__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;
}

.des-rev__th-action {
    text-align: right;
}

.des-rev__table td {
    padding: 18px 16px;
    background: var(--des-ac-surface);
    vertical-align: middle;
    font-size: 14.5px;
    color: var(--des-ac-text);
    white-space: nowrap;
}

.des-rev__table tbody tr td:first-child {
    border-start-start-radius: var(--des-ac-radius-sm);
    border-end-start-radius: var(--des-ac-radius-sm);
}

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

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

.des-rev__ref {
    font-weight: 600;
    letter-spacing: .03em;
}

.des-rev__total {
    font-size: 15px;
    font-weight: 600;
}

.des-rev__cell-action {
    text-align: right;
}

/* Boton «Dejar mi opinion» */
.des-rev__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-primary);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: filter var(--des-ac-transition);
}

.des-rev__cta:hover,
.des-rev__cta:focus-visible {
    filter: brightness(1.12);
    color: #fff;
}

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

/* Pastilla «Opinion enviada». El lienzo la dibuja estatica, no como enlace. */
.des-rev__sent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--des-ac-fill);
    font-size: 13px;
    font-weight: 600;
    color: var(--des-ac-muted);
}

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

/* Movil: la tabla pasa a fichas apiladas, igual que el historial (6a). La
   etiqueta de cada dato sale del data-label de la celda. */
@media (max-width: 767px) {
    .des-rev__wrap {
        overflow-x: visible;
    }

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

    .des-rev__table thead {
        display: none;
    }

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

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

    .des-rev__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-rev__cell-action {
        padding-top: 14px;
    }

    .des-rev__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ---- 16c: formulario de opinion ---- */
.des-rev__form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 640px;
}

.des-rev__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

/* El distintivo de obligatorio va a la IZQUIERDA cuando lo emite el core
   (apartado 6.2), pero aqui la plantilla es nuestra y el lienzo lo pone
   pegado al texto de la etiqueta. */
.des-rev__req {
    margin-inline-start: 4px;
    color: var(--des-ac-accent);
    font-weight: 700;
}

.des-rev__input,
.des-rev__textarea,
.des-rev__select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    font-family: var(--des-ac-font);
    font-size: 15px;
    line-height: 1.55;
    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-rev__input,
.des-rev__select {
    min-height: 46px;
}

.des-rev__textarea {
    resize: vertical;
}

.des-rev__input:focus,
.des-rev__textarea:focus,
.des-rev__select:focus {
    border-color: var(--des-ac-accent);
}

/* Bloque gris que agrupa puntuacion + titulo + comentario */
.des-rev__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

/* Dentro del bloque gris los campos van sobre blanco, para que se distingan */
.des-rev__block .des-rev__input,
.des-rev__block .des-rev__textarea,
.des-rev__block .des-rev__select {
    background: var(--des-ac-surface);
}

.des-rev__product {
    display: flex;
    align-items: center;
    gap: 14px;
}

.des-rev__product-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.des-rev__product-img {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-surface);
}

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

/* Puntuacion: 5 estrellas que pilotan el <select> de 0-10 del modulo */
.des-rev__rating {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.des-rev__rating-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.des-rev__rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--des-ac-accent-soft);
    font-size: 13px;
    font-weight: 700;
    color: var(--des-ac-accent);
}

.des-rev__rating-pill:empty {
    display: none;
}

.des-rev__stars {
    display: flex;
    gap: 2px;
}

/* El reset del tema deja los <button> sin apariencia, asi que aqui solo hace
   falta el tamaño y el color. */
.des-rev__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--des-ac-line);
    transition: transform .12s ease, color var(--des-ac-transition);
}

.des-rev__star svg {
    width: 30px;
    height: 30px;
}

.des-rev__star.is-on {
    color: var(--des-ac-accent);
}

.des-rev__star:hover,
.des-rev__star:focus-visible {
    transform: scale(1.12);
}

/* El <select> nativo es quien se envia. El script le pone hidden al
   contenedor; sin JavaScript se queda visible y el formulario funciona. */
.des-rev__native {
    max-width: 200px;
}

.des-rev__native[hidden] {
    display: none;
}

/* El PNG de estrellas del modulo se queda en el DOM porque su account.js lo
   refresca al cambiar el select, pero no se ve. */
.des-rev__legacy-stars {
    display: none;
}

.des-rev__error {
    margin: 0;
    padding: 12px 15px;
    background: var(--des-ac-danger-soft);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-danger);
}

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

.des-rev__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.des-rev__required-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--des-ac-muted);
}

.des-rev__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.des-rev__btn--ghost {
    background: var(--des-ac-fill);
    color: var(--des-ac-text);
}

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

.des-rev__btn--primary {
    padding-inline: 30px;
    background: var(--des-ac-primary);
    color: #fff;
}

.des-rev__btn--primary:hover,
.des-rev__btn--primary:focus-visible {
    filter: brightness(1.12);
    color: #fff;
}

/* Avisos: enviado con exito, pedido ya valorado, error de identidad */
.des-rev__notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--des-ac-radius);
    font-size: 15px;
    line-height: 1.5;
}

.des-rev__notice p {
    margin: 0;
}

.des-rev__notice-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.des-rev__notice--ok {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
    font-weight: 600;
}

.des-rev__notice--warn {
    background: var(--des-ac-fill);
    color: var(--des-ac-text);
}

/* verify == 2: las reseñas ya enviadas. SIN artboard en el turno 16 (el lienzo
   solo resuelve 16a, 16b y 16c), maquetado con el mismo lenguaje para que no
   salga en crudo. No es diseño aprobado. */
.des-rev__section-title {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--des-ac-text);
}

.des-rev__done + .des-rev__section-title {
    margin-top: 18px;
}

.des-rev__dl {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 8px 16px;
    margin: 0;
}

.des-rev__dl dt {
    font-size: 13px;
    font-weight: 700;
    color: var(--des-ac-muted);
}

.des-rev__dl dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

.des-rev__answer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
}

.des-rev__answer p {
    margin: 0;
    font-size: 14.5px;
    color: var(--des-ac-text);
}

@media (max-width: 767px) {
    .des-rev__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .des-rev__buttons {
        flex-direction: column;
    }

    .des-rev__btn {
        width: 100%;
    }

    .des-rev__dl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .des-rev__dl dd {
        margin-bottom: 8px;
    }
}


/* ---------- Devoluciones de mercancia (17a, 17b, 17c) ----------
   Turno 17 del lienzo. customer/order-follow.tpl (17a/17b) y
   customer/order-return.tpl (17c). Las dos estaban en la lista de «sin diseño
   todavia» del apartado 1 de la doc y ahora entran en el paquete.

   El 17b no necesita reglas: reutiliza .des-ac-empty, el mismo estado vacio del
   6b, el 15b y el 16b. */

/* ---- 17a: listado de devoluciones en curso ---- */
.des-ret__wrap {
    overflow-x: auto;
}

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

.des-ret__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;
}

.des-ret__th-action {
    text-align: right;
}

/* La ultima columna del 17a va sin cabecera visible, pero el hueco tiene que
   existir para los lectores de pantalla. Mismo recurso que .des-hist__th-hidden. */
.des-ret__th-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.des-ret__table td {
    padding: 18px 16px;
    background: var(--des-ac-surface);
    vertical-align: middle;
    font-size: 14.5px;
    color: var(--des-ac-text);
    white-space: nowrap;
}

.des-ret__table tbody tr td:first-child {
    border-start-start-radius: var(--des-ac-radius-sm);
    border-end-start-radius: var(--des-ac-radius-sm);
}

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

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

.des-ret__ref {
    font-weight: 600;
    letter-spacing: .03em;
}

.des-ret__ref-link,
.des-ret__num-link {
    color: inherit;
    text-decoration: none;
}

.des-ret__ref-link:hover,
.des-ret__ref-link:focus-visible,
.des-ret__num-link:hover,
.des-ret__num-link:focus-visible {
    color: var(--des-ac-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* Pastilla de estado del paquete. Sin color real del estado: el presenter de
   devoluciones no lo expone (a diferencia del 6a, donde el punto del pedido si
   lo lleva), y el lienzo tampoco lo usa: su punto va con currentColor. */
.des-ret__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--des-ac-fill);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

.des-ret__status--live {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

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

.des-ret__pdf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: none;
}

.des-ret__pdf:hover,
.des-ret__pdf:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.des-ret__cell-action {
    text-align: right;
}

.des-ret__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-ret__action:hover,
.des-ret__action:focus-visible {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

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

/* Movil: fichas apiladas, igual que el 6a y el 16a. Sustituye a la segunda
   lista que el original duplicaba con hidden-md-up / hidden-sm-down. */
@media (max-width: 767px) {
    .des-ret__wrap {
        overflow-x: visible;
    }

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

    .des-ret__table thead {
        display: none;
    }

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

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

    .des-ret__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);
    }

    /* La pastilla dentro de la ficha va sobre blanco, que el fondo ya es gris */
    .des-ret__table .des-ret__status {
        background: var(--des-ac-surface);
    }

    .des-ret__table .des-ret__status--live {
        background: var(--des-ac-accent-soft);
    }

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

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

/* ---- 17c: detalles de la devolucion ---- */
.des-ret__detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Aviso de plazo, en acento */
.des-ret__banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: var(--des-ac-accent-soft);
    border-radius: var(--des-ac-radius);
}

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

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

.des-ret__banner-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 220px;
}

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

.des-ret__banner-note {
    font-size: 14px;
    line-height: 1.55;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

/* Fila «Estado actual de la devolucion» */
.des-ret__statusrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

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

/* Sobre el gris de la fila la pastilla neutra se perderia: va sobre blanco. */
.des-ret__statusrow .des-ret__status {
    background: var(--des-ac-surface);
}

.des-ret__statusrow .des-ret__status--live {
    background: var(--des-ac-accent-soft);
}

/* Productos a devolver */
.des-ret__products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.des-ret__product {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-ret__product-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 220px;
}

.des-ret__product-name {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--des-ac-text);
    text-wrap: pretty;
}

.des-ret__product-ref {
    font-size: 13.5px;
    color: var(--des-ac-muted);
}

.des-ret__custom-link {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.des-ret__product-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--des-ac-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-text);
    white-space: nowrap;
}

/* Bloque «Recordatorio»: SIN artboard, solo sale con state == 2. */
.des-ret__reminder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding: 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-ret__reminder-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--des-ac-text);
}

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

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

@media (max-width: 767px) {
    .des-ret__product-qty {
        width: 100%;
        justify-content: center;
    }
}


/* ---------- 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.
   El display:flex va SOLO por debajo de 768: fuera de la media query tenia la
   misma especificidad que `.des-ord .hidden-md-up { display: none }` y, al ir
   despues, la ganaba; en escritorio salian la tabla y la lista a la vez. */
.des-ord .shipping-lines {
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 767px) {
    .des-ord .shipping-lines {
        display: flex;
    }
}

.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: 800; /* FarmaciaCien: títulos en 800 como la maqueta */
    line-height: 1.2;
    letter-spacing: -.02em;
    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;
}

/* form-fields.tpl emite ya la palabra "Obligatorio" traducida: solo se le
   da forma de distintivo (antes llegaba por ::after desde una custom property) */
.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: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.des-auth .custom-checkbox .des-required-mark::after {
    content: none;
}

/* ----- 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,
.des-auth .des-guest-form {
    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: texto real que emite
   customer/_partials/customer-form.tpl fuera del checkout (antes llegaba en
   una custom property y se pintaba con ::before, invisible para lectores de
   pantalla y fragil con traducciones que llevan apostrofo). */
.des-auth .des-auth-required-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--des-ac-muted);
}

.des-auth .forgotten-password .send-renew-password-link,
.des-auth .des-guest-form .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;
    font-weight: 600;
    color: var(--des-ac-danger);
    padding: 5px 10px;
    margin-bottom: 10px;
    background: #fca4a4;
    border-radius: var(--des-ac-radius);
}

/* ----- 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;
}

/* .fade no esta definida en las hojas de este tema, y blockwishlist
   inyecta en TODAS las paginas (hook displayFooter) varios
   <div class="modal-backdrop fade">. Sin estado oculto la web entera salia con
   un velo oscuro permanente.

   AQUI NO SE TOCA LA OPACIDAD, y es a proposito: cada tema resuelve el velo de
   una manera distinta y fijar un valor rompe la mitad de los casos.

     tema propio   .modal-backdrop{background:rgba(0,0,0,.5)}   sin .fade ni .in
     classic       .modal-backdrop{background-color:#000}
                   .modal-backdrop.fade{opacity:0} .in{opacity:.5}
     hummingbird   igual que classic pero con .show en vez de .in

   Con opacity:1 el velo sale negro opaco en classic (su fondo es #000 solido y
   este selector, (0,3,0), le gana a su .in de (0,2,0)). Con opacity:.5 sale al
   25 % en un tema con fondo rgba, porque se multiplica por el .5 que ya lleva.
   Dejando la opacidad fuera, cada tema aplica la suya: el fondo rgba se queda
   al 50 % y classic/hummingbird aplican su propio .in/.show al 50 %.
   Se ocultan con visibility, que no depende de nada del tema. */
.modal-backdrop.fade {
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
}

.modal-backdrop.fade.in,
.modal-backdrop.fade.show {
    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 svg {
    flex: none;
    width: 16px;
    height: 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);
}

/* customer-form.tpl emite <span class="text-muted form-informations-subtitle">
   y classic declara .text-muted{color:#7a7a7a!important}: mismo caso que el
   «Crear lista» del 18a en wishlist.css, el !important solo se gana con otro. */
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) !important;
}


/* ---- 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 svg {
    flex: none;
    width: 16px;
    height: 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 svg {
    flex: none;
    width: 18px;
    height: 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);
}

/* Vacio no ocupa hueco en el gap: si no, la lista salta al cambiar de transportista */
body#checkout .des-checkout .carrier-extra-content:not(:has(*)) {
    display: none;
}

/* 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 (js-gift-panel) se abre y cierra con el atributo `hidden` desde
   checkout.js; ya no es un .collapse de Bootstrap. Un display:flex con esta
   especificidad le gana al [hidden]{display:none} del navegador, asi que los
   paneles ocultos se excluyen o el mensaje de regalo se veria siempre. */
body#checkout .des-checkout .order-options > div:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body#checkout .des-checkout .order-options > div[hidden] {
    display: none;
}

/* 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);
}

/* El panel lo abre collapse.js con .collapse__panel--open (theme.css) */
body#checkout .des-checkout .cart-summary-products .collapse__panel {
    flex-basis: 100%;
    padding-bottom: 0;
}

body#checkout .des-checkout .js-show-details {
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    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 svg {
    flex: none;
    width: 16px;
    height: 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;
}

/* Totales y cupon: se comparten con el resumen del carrito (/cart,
   body#cart .cart-summary), que usa las mismas plantillas cart-summary-totals.tpl
   y cart-voucher.tpl. :is() mantiene la especificidad de antes (1,1,1). */
:is(body#checkout .des-checkout, body#cart .cart-summary) .cart-summary-subtotals-container,
:is(body#checkout .des-checkout, body#cart .cart-summary) .cart-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-name__value svg {
    flex: none;
    width: 16px;
    height: 16px;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-code-button {
    margin: 0;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .collapse-button {
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    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;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-code form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .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);
}

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

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-code .des-btn {
    min-height: 44px;
    padding: 11px 20px;
}

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


/* «¿Tienes un codigo promocional?» sobra mientras el panel esta abierto: se
   vuelve a ver al pulsar «Cerrar». Sin :has() se ven los dos, que funciona. */
:is(body#checkout .des-checkout, body#cart .cart-summary) .display-promo:has(+ .collapse__panel--open) {
    display: none;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) #promo-code {
    padding-bottom: 0;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-code form {
    align-self: stretch;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .cancel-promo {
    font-size: 13px;
    color: var(--des-ac-muted);
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-name__remove {
    padding: 4px;
    border-radius: var(--des-ac-radius-sm);
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-name__remove:focus-visible {
    outline: 2px solid var(--des-ac-accent);
    outline-offset: 1px;
}

:is(body#checkout .des-checkout, body#cart .cart-summary) .promo-highlighted {
    margin: 0;
    font-size: 13.5px;
    color: var(--des-ac-muted);
}

/* Codigo sugerido: boton que copia el codigo al campo (cart.js) */
:is(body#checkout .des-checkout, body#cart .cart-summary) .js-discount .code {
    padding: 2px 8px;
    background: var(--des-ac-accent-soft);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--des-ac-accent);
    cursor: pointer;
}

/* Error del cupon en /cart (en el checkout lo pinta el apartado 9) */
body#cart .cart-summary .des-alert-error {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--des-ac-radius-sm);
    background: var(--des-ac-danger-soft);
    color: var(--des-ac-danger);
    font-size: 14px;
    line-height: 1.5;
}

/* Boton «Anadir» del cupon en /cart: las reglas .des-btn del apartado 8 solo
   cubren el checkout */
body#cart .cart-summary .promo-code .des-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    min-height: 44px;
    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);
}

body#cart .cart-summary .promo-code .des-btn:hover {
    filter: brightness(1.08);
}

body#cart .cart-summary .block-promo {
    margin-top: 14px;
}

/* 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;
}


/* ---- 10b. Resumen final antes de pagar (PS_FINAL_SUMMARY_ENABLED) ----
   checkout/_partials/order-final-summary.tpl. La seccion lleva tambien
   .des-oconf: la tabla de articulos (c-oc-*) usa las reglas de
   order-confirmation.css, asi que en escritorio se ven las columnas y en
   movil solo la fila de precios, sin duplicar. Aqui va solo lo del checkout.

   container-type: la columna del checkout es mas estrecha que la ventana; la
   tabla pasa a la version movil por el ancho de la columna, no del viewport. */

body#checkout .des-checkout .des-final-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    container-type: inline-size;
}

body#checkout .des-checkout .des-final-summary__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .des-final-summary__block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

body#checkout .des-checkout .des-final-summary__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body#checkout .des-checkout .des-final-summary__heading {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .des-final-summary__edit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    background: var(--des-ac-surface);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--des-ac-accent);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--des-ac-transition);
}

body#checkout .des-checkout .des-final-summary__edit:hover {
    background: var(--des-ac-accent-soft);
}

body#checkout .des-checkout .des-final-summary__edit svg {
    flex: none;
    width: 16px;
    height: 16px;
}

body#checkout .des-checkout .des-final-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

body#checkout .des-checkout .des-final-summary__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout .des-final-summary__label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--des-ac-muted);
}

body#checkout .des-checkout .des-final-summary__address {
    font-size: 14px;
    line-height: 1.55;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .des-final-summary__carrier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 16px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
}

body#checkout .des-checkout .des-final-summary__carrier-logo img {
    display: block;
    max-width: 56px;
    height: auto;
}

body#checkout .des-checkout .des-final-summary__carrier-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body#checkout .des-checkout .des-final-summary__carrier .carrier-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

body#checkout .des-checkout .des-final-summary__carrier .carrier-delay {
    font-size: 13px;
    color: var(--des-ac-muted);
}

body#checkout .des-checkout .des-final-summary__carrier .carrier-price {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--des-ac-text);
    white-space: nowrap;
}

body#checkout .des-checkout .des-final-summary__note {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: var(--des-ac-muted);
}

/* Tabla c-oc: columnas algo mas estrechas que en la confirmacion */
body#checkout .des-checkout .des-final-summary .c-oc-header,
body#checkout .des-checkout .des-final-summary .c-oc-line {
    grid-template-columns: 56px 1fr 100px 60px 100px;
}

body#checkout .des-checkout .des-final-summary .c-oc-header {
    padding-top: 0;
}

@container (max-width: 560px) {
    body#checkout .des-checkout .des-final-summary .c-oc-header {
        display: none;
    }

    body#checkout .des-checkout .des-final-summary .c-oc-line {
        grid-template-columns: 56px 1fr;
    }

    body#checkout .des-checkout .des-final-summary .c-oc-line > .c-oc-unit-price,
    body#checkout .des-checkout .des-final-summary .c-oc-line > .c-oc-qty,
    body#checkout .des-checkout .des-final-summary .c-oc-line > .c-oc-total {
        display: none;
    }

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

    body#checkout .des-checkout .des-final-summary .c-oc-totals-table {
        max-width: none;
    }
}

@media (max-width: 767px) {
    body#checkout .des-checkout .des-final-summary__block {
        padding: 16px;
    }

    body#checkout .des-checkout .des-final-summary .c-oc-line {
        grid-template-columns: 56px 1fr;
    }
}


/* ---- 10c. Linea del carrito: distintivo de descuento ----
   cart-detailed-product-line.tpl, cuando hay precio especifico (-% o -importe).
   Mismo aspecto que .product-info__discount de la ficha. */
.cart-product__discount {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font: var(--font-small);
    font-weight: 600;
    color: var(--color-accent-text, #fff);
    background: var(--color-error, #c8102e);
    border-radius: var(--radius, 6px);
}


/* ---- 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;
}

/* En el checkout el distintivo es texto real: form-fields.tpl ya emite la
   palabra traducida dentro de .des-required-mark. Ya no viaja en
   --des-ac-required-text (ver checkout.tpl) y el ::after se anula, tambien
   frente a la regla generica de .des-ac-form. */
body#checkout .des-checkout .custom-checkbox .des-required-mark {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

body#checkout .des-checkout .custom-checkbox .des-required-mark::after {
    content: none;
}

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;
}


/* ---------- Contactanos (19a / 19b) ----------
   modules/contactform/views/templates/widget/contactform.tpl (override en el
   tema). El formulario reutiliza .des-ac-form, asi que campos, etiquetas,
   marca de obligatorio y leyenda salen ya del bloque de Datos personales (4a);
   aqui solo va lo propio de esta pantalla.

   Igual que en el resto del area de cliente, la tarjeta del lienzo se resuelve
   como superficie blanca dentro de la banda .des-container, sin borde ni radio:
   el marco que dibuja el artboard es chrome del lienzo, no diseno.

   El breadcrumb del lienzo no se pinta aqui: se usa la banda global del tema
   (apartado 6.1 del LEEME) para no duplicarlo. */

.des-contact {
    font-family: var(--des-ac-font);
    color: var(--des-ac-text);
    background: var(--des-ac-surface);
}

.des-contact__inner {
    padding-block: 40px 0;
}

.des-contact__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}

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

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

/* La columna del lienzo es mas estrecha que la del 4a (620 frente a 880) y con
   mas aire entre campos */
.des-contact .des-ac-form {
    gap: 18px;
    max-width: 620px;
}

/* Asunto, correo y referencia de pedido. auto-fit: con dos campos salen a dos
   columnas, con uno solo ocupa el ancho, y en movil caen apilados. */
.des-contact__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

/* El "(opcional)" de la referencia de pedido va dentro de la etiqueta, que es
   de 600 */
.des-contact .des-form-label .des-form-comment {
    font-weight: 400;
}

/* Como en las pantallas de acceso, y al contrario que en el 4a, los campos van
   en gris sobre la tarjeta blanca: en el 19a no hay bloques .des-ac-group que
   den el fondo */
.des-contact .des-ac-form .des-form-control {
    background: var(--des-ac-fill);
}

.des-contact textarea.des-contact__message {
    padding: 14px 15px;
    line-height: 1.55;
}

/* ----- Adjunto ----- */

.des-contact__upload-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.des-contact__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 20px;
    background: var(--des-ac-fill);
    border: var(--des-ac-border) dashed var(--des-ac-line-strong);
    border-radius: var(--des-ac-radius-sm);
    cursor: pointer;
    transition: border-color var(--des-ac-transition), background var(--des-ac-transition);
}

.des-contact__upload:hover,
.des-contact__upload:focus-within {
    background: var(--des-ac-accent-soft);
    border-color: var(--des-ac-accent);
}

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

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

.des-contact__upload-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 180px;
}

.des-contact__upload-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-contact__upload-optional {
    font-weight: 500;
    color: var(--des-ac-muted);
}

.des-contact__upload-status {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--des-ac-muted);
    overflow-wrap: anywhere;
}

.des-contact__upload-status--filled {
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-contact__upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    background: var(--des-ac-surface);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
    white-space: nowrap;
}

/* El input nativo se oculta sin sacarlo del formulario ni del foco por teclado:
   el <label> que lo envuelve es toda la zona de arrastre */
.des-contact__upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ----- RGPD y Turnstile -----
   No estan en el lienzo: los inyectan psgdpr y pixel_cloudflare_turnstile con
   su propio marcado. Solo se les da el hueco. */

.des-contact__gdpr:empty,
.des-contact__turnstile:empty {
    display: none;
}

.des-contact__turnstile {
    display: flex;
}

/* ----- Pie del formulario ----- */

.des-contact__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.des-contact .des-btn.des-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin: 0;
    padding: 14px 32px;
    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);
}

.des-contact .des-btn.des-contact__submit:hover,
.des-contact .des-btn.des-contact__submit:focus-visible {
    filter: brightness(1.08);
    color: #fff;
    opacity: 1;
}

/* ----- Errores -----
   Sin artboard: el lienzo solo dibuja el envio correcto. Se resuelve con el
   lenguaje de avisos del paquete. */

.des-contact__alert {
    margin-bottom: 22px;
    padding: 14px 18px;
    background: var(--des-ac-danger-soft);
    border: var(--des-ac-border) solid var(--des-ac-danger-tint);
    border-radius: var(--des-ac-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--des-ac-danger);
}

.des-contact__alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.des-contact__alert li + li {
    margin-top: 4px;
}

/* ----- 19b: mensaje enviado ----- */

.des-contact__sent {
    max-width: 620px;
}

.des-contact__sent-note {
    margin: 0;
    max-width: 420px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

/* ----- Pie "Volver a su cuenta / Inicio" -----
   Mismo marcado que en el area de cliente (my-account-links.tpl), pero la
   pagina de contacto no lleva .customer-page, asi que las reglas de aquel pie
   no la alcanzan. */

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

.des-contact__links .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);
}

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

.des-contact__links .account-link .material-icons {
    font-size: 18px;
}

@media (max-width: 767px) {
    .des-contact__inner {
        padding-block: 28px 0;
    }

    .des-contact__title {
        font-size: 27px;
    }

    .des-contact__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .des-contact .des-btn.des-contact__submit {
        width: 100%;
    }

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


/* ---------- Mis puntos de fidelidad (20a / 20b / 20c) ----------
   loyaltyeditpoints. Sobreescrituras en el tema:
       modules/loyaltyeditpoints/views/templates/front/loyalty-17.tpl
       modules/loyaltyeditpoints/views/templates/front/_pager.tpl
       modules/loyaltyeditpoints/views/templates/hook/my-account-17.tpl
   No se toca nada dentro de modules/.

   La pagina extiende customer/page.tpl, asi que la banda, el breadcrumb y el
   pie "Volver a su cuenta / Inicio" del lienzo ya vienen dados, y el marco
   (.des-ac-page__card / __inner / __header) es el mismo de Datos personales.

   Aviso: el bloque #module-loyaltyeditpoints-points de
   _dev/css/components/_loyalty.scss estilaba esta pagina con el aspecto
   anterior enganchando a las clases de Bootstrap del modulo (.card, .table,
   .btn, col-md-*...). La plantilla nueva ya no las emite, asi que ese bloque
   deja de aplicar sin necesidad de tocar el SCSS ni recompilar el tema. Queda
   como codigo muerto: conviene retirarlo en la proxima compilacion. La primera
   mitad de ese archivo (los avisos .loyalty-block de ficha, carrito, checkout
   y confirmacion) SI sigue en uso y no se toca. */

/* ----- Resumen: saldo y proximo cupon ----- */

.des-lp__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.des-lp__balance {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 260px;
    padding: 22px 24px;
    background: var(--des-ac-accent-soft);
    border-radius: var(--des-ac-radius);
}

.des-lp__balance-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    background: var(--des-ac-surface);
    border-radius: 999px;
    color: var(--des-ac-accent);
}

.des-lp__balance-icon svg {
    width: 22px;
    height: 22px;
}

.des-lp__balance-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.des-lp__balance-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--des-ac-accent);
}

.des-lp__balance-note {
    font-size: 13.5px;
    color: var(--des-ac-text);
}

.des-lp__next {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 260px;
    margin: 0;
    padding: 22px 24px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius);
}

.des-lp__next-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.des-lp__next-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-lp__next-count {
    font-size: 13.5px;
    color: var(--des-ac-muted);
}

.des-lp__bar {
    display: block;
    width: 100%;
    height: 8px;
    background: var(--des-ac-line);
    border-radius: 999px;
    overflow: hidden;
}

.des-lp__bar-fill {
    display: block;
    height: 100%;
    background: var(--des-ac-accent);
    border-radius: 999px;
}

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

/* ----- Conversor de puntos -----
   Sin artboard en el turno 20: el lienzo solo dibuja el estado "aun no llega al
   minimo". Se resuelve dentro de la misma tarjeta de "Proximo cupon". */

.des-lp__convert .des-lp__next-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--des-ac-text);
    font-weight: 600;
}

.des-lp__convert-arrow {
    color: var(--des-ac-muted);
    font-weight: 400;
}

.des-lp__convert-value {
    color: var(--des-ac-accent);
}

.des-lp__range {
    width: 100%;
    margin: 0;
    accent-color: var(--des-ac-accent);
    cursor: pointer;
}

/* El CSS del modulo pinta la pista con un degradado azul de Bootstrap y lo
   declara !important, asi que hay que responder con !important para llevarla al
   color de marca. --lep-fill lo escribe su propio JS al mover el control. */
.des-lp__convert .des-lp__range::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        var(--des-ac-accent) 0%,
        var(--des-ac-accent) var(--lep-fill, 0%),
        var(--des-ac-line) var(--lep-fill, 0%),
        var(--des-ac-line) 100%) !important;
    height: 8px;
    border-radius: 999px;
}

.des-lp__convert .des-lp__range::-moz-range-track {
    height: 8px;
    background: var(--des-ac-line);
    border-radius: 999px;
}

.des-lp__convert .des-lp__range::-moz-range-progress {
    height: 8px;
    background: var(--des-ac-accent);
    border-radius: 999px 0 0 999px;
}

.des-lp__convert-bounds {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--des-ac-muted);
}

.des-lp .des-btn.des-lp__convert-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 44px;
    margin: 2px 0 0;
    padding: 12px 22px;
    background: var(--des-ac-primary);
    border: 0;
    border-radius: var(--des-ac-radius-sm);
    font-family: var(--des-ac-font);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

.des-lp .des-btn.des-lp__convert-submit:hover,
.des-lp .des-btn.des-lp__convert-submit:focus-visible {
    filter: brightness(1.08);
    color: #fff;
    opacity: 1;
}

/* ----- Secciones ----- */

.des-lp__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.des-lp__section + .des-lp__section {
    margin-top: 24px;
}

/* Mismo rotulo que los bloques de Datos personales (4a) */
.des-lp__section-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--des-ac-text);
}

.des-lp__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--des-ac-muted);
}

/* ----- Tablas -----
   El lienzo las resuelve con filas separadas (border-spacing) y scroll lateral,
   no con una caja con borde como el 15a. El margen negativo alinea el texto de
   la primera columna con el borde del contenido pese al padding de la celda. */

.des-lp__table-wrap {
    margin-inline: -16px;
    overflow-x: auto;
}

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

.des-lp__table--points {
    min-width: 820px;
}

.des-lp__table--vouchers {
    min-width: 760px;
}

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

.des-lp__table td {
    padding: 18px 16px;
    font-size: 14.5px;
    color: var(--des-ac-muted);
    white-space: nowrap;
    vertical-align: middle;
}

.des-lp__th-end,
.des-lp__td-end {
    text-align: right;
}

.des-lp__table td.des-lp__cell-strong {
    color: var(--des-ac-text);
}

.des-lp__table td.des-lp__points {
    font-size: 15px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-lp__table td.des-lp__points--neg {
    color: var(--des-ac-danger);
}

.des-lp__table td.des-lp__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-lp__order-link {
    color: var(--des-ac-accent);
    font-weight: 600;
    text-decoration: none;
}

.des-lp__order-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Pastilla de estado. El lienzo solo define dos tratamientos: acento para los
   estados en positivo y neutro para el resto. */
.des-lp__state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--des-ac-fill);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--des-ac-muted);
    white-space: nowrap;
}

.des-lp__state--ok {
    background: var(--des-ac-accent-soft);
    color: var(--des-ac-accent);
}

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

/* ----- Codigo del cupon y boton de copiar (20b) ----- */

.des-lp__code-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px 7px 13px;
    background: var(--des-ac-accent-soft);
    border-radius: 999px;
    color: var(--des-ac-accent);
}

.des-lp__code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.des-lp__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    background: var(--des-ac-surface);
    border: 0;
    border-radius: 999px;
    color: var(--des-ac-accent);
    cursor: pointer;
    transition: filter var(--des-ac-transition);
}

.des-lp__copy:hover,
.des-lp__copy:focus-visible {
    filter: brightness(.94);
}

.des-lp__copy svg {
    width: 12px;
    height: 12px;
}

.des-lp__copy.is-copied {
    background: var(--des-ac-accent);
    color: #fff;
}

/* ----- Total de puntos ----- */

.des-lp__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--des-ac-fill);
    border-radius: var(--des-ac-radius-sm);
}

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

.des-lp__total-value {
    font-size: 17px;
    font-weight: 600;
    color: var(--des-ac-accent);
}

/* ----- Estado vacio de "Mis cupones" (20a) -----
   Es mas bajo que .des-ac-empty y su icono va en blanco sobre el gris, no en
   tinte de acento: son las medidas del propio lienzo. */

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

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

.des-lp__empty-icon svg {
    width: 24px;
    height: 24px;
}

.des-lp__empty-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--des-ac-text);
}

.des-lp__empty-note {
    max-width: 420px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--des-ac-muted);
    text-wrap: pretty;
}

/* Nota del 20c, dentro del .des-ac-empty compartido */
.des-lp .des-ac-empty .des-lp__empty-note {
    margin: 0;
    font-size: 14.5px;
}

/* ----- Paginacion -----
   Sin artboard: el lienzo cabe en una pagina y el modulo pagina de 10 en 10. */

.des-lp__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.des-lp__pager-count {
    font-size: 13px;
    color: var(--des-ac-muted);
}

.des-lp__pager-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.des-lp__pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--des-ac-fill);
    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);
}

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

.des-lp__pager-link--current {
    background: var(--des-ac-accent);
    color: #fff;
}

.des-lp__pager-link--off {
    opacity: .4;
}

.des-lp__pager-link svg {
    width: 15px;
    height: 15px;
}

/* ----- Movil -----
   El lienzo solo dibuja escritorio y ahi la tabla se desplaza en horizontal.
   Por debajo de 768px se pasa a fichas apiladas, que es lo que hacen el
   historial (6a) y los cupones (15a). */

@media (max-width: 767px) {
    .des-lp__summary {
        gap: 10px;
    }

    .des-lp__balance,
    .des-lp__next {
        padding: 18px 20px;
    }

    .des-lp__balance-value {
        font-size: 24px;
    }

    .des-lp__table-wrap {
        margin-inline: 0;
        overflow-x: visible;
    }

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

    .des-lp__table {
        border-spacing: 0;
    }

    .des-lp__table thead {
        display: none;
    }

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

    .des-lp__table td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 0;
        white-space: normal;
    }

    .des-lp__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-lp__td-end {
        text-align: left;
    }

    /* En ficha el fondo de la fila ya es gris: la pastilla neutra se perderia */
    .des-lp__table tbody tr .des-lp__state {
        background: var(--des-ac-surface);
    }

    .des-lp .des-btn.des-lp__convert-submit {
        align-self: stretch;
        width: 100%;
    }

    .des-lp__pager {
        justify-content: center;
    }
}


/* =====================================================================
   Detalle de pedido: formulario de devolucion y mensajes (1.1.2)
   Va al final a proposito: pisa reglas de igual especificidad de arriba.
   ===================================================================== */

/* ---------------------------------------------------------------------
   3) Formulario de devolución (detalle de pedido): 7 columnas.
   La línea (customer/_partials/order-detail-product-line-return.tpl) tiene
   7 hijos: casilla, imagen, detalles, precio unitario, cantidad a devolver
   (.c-oc-qty--select, único <select>), devuelto y total. La rejilla actual
   (.c-oc-line:has(.c-oc-checkbox)) solo tenía 6 columnas y el total saltaba
   de fila; la cabecera (.c-oc-header--return, 5 títulos) igual.
   Especificidad 0,3,0 para ganar a «.des-ord .c-oc-line:has(.c-oc-checkbox)».
   --------------------------------------------------------------------- */
.des-ord .c-oc-header.c-oc-header--return,
.des-ord .c-oc-line.c-oc-line--return {
    grid-template-columns: 17px 88px 1fr 110px 90px 90px 110px;
}

/* El primer título («Producto») cubre casilla + imagen + detalles */
.des-ord .c-oc-header--return .c-oc-header-title:first-child {
    grid-column: span 3;
}

/* La etiqueta del <select> solo se ve en móvil; en escritorio la columna ya
   tiene título en la cabecera (queda para lectores de pantalla). */
.des-ord .c-oc-qty-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .des-ord .c-oc-line.c-oc-line--return {
        grid-template-columns: 72px 1fr;
    }

    /* La columna con el <select> NO se oculta en móvil (el resto de columnas
       desktop sí, regla «.des-ord .c-oc-line > .c-oc-qty {display:none}»):
       ocupa una fila entera debajo del producto. */
    .des-ord .c-oc-line > .c-oc-qty.c-oc-qty--select:has(select) {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        gap: 10px;
        text-align: left;
    }

    .des-ord .c-oc-qty--select .c-oc-qty-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--des-ac-text);
    }

    .des-ord .c-oc-qty--select .c-qty-select {
        flex: 0 0 auto;
    }
}


/* ---------------------------------------------------------------------
   4) Mensajes del pedido (customer/_partials/order-messages.tpl): se quitó
   el grid Bootstrap (row / col-sm-4 / col-sm-8). Autor+fecha encima del texto.
   --------------------------------------------------------------------- */
.des-ord .message-meta {
    margin-bottom: 4px;
    font-size: 12.5px;
    color: var(--des-ac-muted);
}


/* =====================================================================
   FARMACIACIEN · CHECKOUT (ajustes de tienda)
   Maqueta private/diseño/checkout-*.html y fc.css apartado 14. Mismos
   selectores que el paquete (body#checkout .des-checkout …) para ganar por
   orden, no por !important. El fondo, la cabecera y el pie reducidos están
   en _dev/css/components/_fc-checkout.scss (des-co, des-co-head, des-co-foot).
   ===================================================================== */

/* Rejilla: pasos + lateral de 400px, 32px de hueco. El relleno vertical lo
   pone .des-co (36px / 64px), no la rejilla. Sin lateral pegajoso. */
body#checkout .des-checkout .des-checkout__grid {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
    padding-block: 0;
}

body#checkout .des-checkout .des-checkout__body {
    gap: 14px;
}

body#checkout .des-checkout .des-checkout__aside {
    position: static;
    gap: 0;
}

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

@media (max-width: 767px) {
    body#checkout .des-checkout .des-checkout__body {
        gap: 10px;
    }
}