/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
/* Evita el scroll horizontal que provocan las secciones a ancho completo (.auth-page)
   por el desajuste entre "100vw" y el ancho real visible cuando hay scrollbar */
body{
    overflow-x: hidden;
}
 /*HEADER*/
 .header-tirilla{
    min-height: 41px;
 }
.header-tirilla .link-contacto-header,
.header-tirilla .separtor-header,
.header-tirilla .link-tel-header,
.header-tirilla .data-header{
    font-size: 14px;
    font-weight: 300;
}
.header-tirilla .data-header{
    padding: 0 0px 0 20px;
    display: inline-block;
}
.header-top{
    height:84px;
}
#_desktop_ps_shoppingcart .header-block{
    border: 1px solid #E8E5E3;
    border-radius: 20px;
    padding: 0 5px;
}
.header-block__title{
    font-size: 14px;
}
#_desktop_ps_searchbar{
    margin-left: 15px;
}
@media(max-width:992px)
{
    #_desktop_ps_searchbar{
        width: 190px;
    }
    #ps_searchbar{
        min-width: auto;
    }
}
/* Fila del menú de categorías + buscador, debajo del logo/iconos (solo mobile) */
.header-bottom__row--menu{
    border-top: 1px solid #E8E5E3;
    margin-top: 8px;
    padding-top: 8px;
}
@media(min-width:768px)
{
    .header-bottom__row--menu{
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }
}
/* Centra el menu principal dentro del espacio que le deja el grid (col-xl) */
.ps-mainmenu.ps-mainmenu--desktop{
    justify-content: center;
}
/*FINHEADER*/
/* BREADCRUMB */
.wrapper{
    position: relative;
}
.breadcrumb__wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 0;
}
@media(min-width:768px){
    .breadcrumb__wrapper{
        margin-top: 0;
        margin-bottom: 0;
    }
}
/* Esto no va bien en la pagina de categorias */
/* .columns-container.container{
    padding-top: 4rem;
} */
@media(min-width:768px){
    .columns-container.container{
        padding-top: 2.5rem;
    }
}
@media(min-width:992px){
    .columns-container.container{
        padding-top: 3.5rem;
    }
}
/* FINBREADCRUMB */
/* NEWSLETTER */
.ps-emailsubscription{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px 20px 0  0;
}
@media (min-width: 992px) {
    .ps-emailsubscription{
        border-radius: 30px 30px 0  0;
    }
}
@media (min-width: 1200px) {
    .ps-emailsubscription{
        border-radius: 40px 40px 0  0;
    }
}
.ps-emailsubscription__data{
    max-width: 592px;
    margin: 64px auto 54px;
}
.ps-emailsubscription__data p.h3{
    font-size: 32px;
    font-weight: 600;
    color:#110F0E;    
}
.ps-emailsubscription__data p.h3 span{    
    color:#205B29;
}
.ps-emailsubscription__data p.extra_info{
    font-size: 14px;
    font-weight: 500;
    color: #1C0B0B;   
    max-width: 454px;
    margin: 0 auto 25px;
}
.ps-emailsubscription__data form{
    max-width: 420px;
    margin: 0 auto 0;
}
.ps-emailsubscription__block_inputs{
    border-top:1px solid #796C68;
    border-bottom:1px solid #796C68;
    border-left:1px solid #796C68;
    background-color: #E5E4E1;
    border-radius: 20px;
}
.ps-emailsubscription__data input[type="email"]{    
    background-color: #E5E4E1;
    color: #8C7D73;
    font-size: 14px;
    font-weight: 500;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;    
}
.ps-emailsubscription__data input[type="email"]::after{
    content: "5";
    background-color:#E5E4E1;
    width: 50px;
}
.ps-emailsubscription__data input[type="submit"]{
    border-radius: 20px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}
.ps-emailsubscription__conditions{
    font-size: 10px;
    color: #8C7D73;
}
/* FINNEWSLETTER */
/* MINIATURE CATEGORY */
.product-miniature__bottom {
    padding: 1rem;
}
.product-miniature__add{
    border-radius: 80px;
    background-color: #205B29;
}
.product-miniature__add:hover{
    background-color: #1D4E24;
}
.product-miniature__details{
    border-radius: 80px;
    line-height: 20px;
    color: #205B29;
    background-color: #ffffff;
}
.product-miniature__details:hover{
    color: #ffffff;
    background-color: #1D4E24;
}
/* FINMINIATURE CATEGORY */
/* AUTENTICACION: LOGIN / REGISTRO / RECUPERAR CONTRASENA */
#center-column:has(.auth-page){
    padding-bottom: 0;
}
.wrapper .breadcrumb__wrapper{
    z-index: 1;
}
.wrapper:has(.auth-page) .columns-container.container{
    padding-top: 0;
}
.auth-page{
    background-color: #F8F7F7;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    display: flex;
    justify-content: center;
    padding: 32px 16px 64px;
}
@media(min-width:576px){
    .auth-page{
        padding: 40px 24px 100px;
    }
}
.auth-card{
    position: relative;
    width: 100%;
    max-width: 624px;
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px -12px rgba(4,66,15,.18);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media(min-width:576px){
    .auth-card{
        padding: 68px 56px;
        gap: 40px;
    }
}
.auth-card__back{
    position: absolute;
    top: 24px;
    left: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #110F0E;
    padding: 0;
}
@media(min-width:576px){
    .auth-card__back{
        top: 36px;
        left: 56px;
    }
}
.auth-card__back .material-icons{
    font-size: 22px;
}
.auth-card__stepper{
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}
@media(min-width:576px){
    .auth-card__stepper{
        top: 36px;
        right: 56px;
    }
}
.auth-card__stepper-dot{
    width: 24px;
    height: 6px;
    border-radius: 9999px;
    background-color: #D9D3D0;
}
.auth-card__stepper-dot.is-active{
    background-color: #205B29;
}
.auth-card__stepper-label{
    font-size: 12px;
    letter-spacing: .24px;
    color: #544B45;
    white-space: nowrap;
}
.auth-card__text{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#register-card .auth-card__text{
    margin-top: 40px;
}
@media(min-width:576px){
    #register-card .auth-card__text{
        margin-top: 8px;
    }
}
.auth-card__title{
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.8px;
    line-height: 1.2;
    color: #205B29;
}
@media(min-width:576px){
    .auth-card__title{
        font-size: 40px;
    }
}
.auth-card__subtitle{
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #544B45;
}
/* Pasos (registro en 2 pasos): se ocultan/muestran via el atributo data-step del .auth-card */
.auth-card[data-step="1"] [data-step-visible="2"],
.auth-card[data-step="2"] [data-step-visible="1"]{
    display: none;
}
.auth-card[data-step="2"] .auth-card__back{
    display: flex;
}
.auth-card form{
    display: contents;
}
.auth-card .mb-3{
    margin-bottom: 0;
}
.auth-card__fields{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.auth-card__row{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
@media(min-width:576px){
    .auth-card__row{
        flex-direction: row;
        gap: 32px;
    }
}
.auth-card__row .form-text{
    display: none;
}
.auth-card__row .mb-3{
    flex: 1 0 0;
    min-width: 0;
}
.auth-card .form-label{
    font-size: 16px;
    font-weight: 500;
    color: #110F0E;
    margin-bottom: 8px;
}
.auth-card .form-label.required:after{
    color: #E61919;
    font-size: 14px;
    font-weight: 600;
}
.auth-card .form-control,
.auth-card .input-group.password-field{
    border-radius: 9999px;
}
.auth-card .form-control{
    border: 1px solid #D9D3D0;
    padding: 13px 17px;
    font-size: 16px;
    color: #110F0E;
}
.auth-card .form-control::placeholder{
    color: #544B45;
}
.auth-card .input-group.password-field{
    overflow: hidden;
    border: 1px solid #D9D3D0;
}
.auth-card .input-group.password-field .form-control{
    border: 0;
    border-radius: 0;
}
.auth-card .input-group.password-field .btn{
    background-color: transparent;
    border: 0;
    color: #544B45;
    box-shadow: none;
}
.auth-card .form-check{
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.auth-card .form-check-input{
    float: none;
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    border-radius: 2.5px;
    border: 1px solid #544B45;
}
.auth-card .form-check-input:checked{
    background-color: #205B29;
    border-color: #205B29;
}
.auth-card .form-check-label{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #544B45;
}
.auth-card__options{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.auth-card__link{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #5C9DD6;
    text-decoration: none;
}
.auth-card__link:hover{
    text-decoration: underline;
    color: #5C9DD6;
}
/* Enlace a la politica de privacidad dentro del texto del modulo psgdpr (contenido configurado desde el BO) */
label[for="field-psgdpr"] a{
    color: #5C9DD6 !important;
}
/* Mueve el asterisco de obligatorio (por defecto va antes, via .form-check-label.required:before) al final */
label[for="field-psgdpr"].required:before{
    content: none;
}
label[for="field-psgdpr"].required:after{
    color: #E61919;
    content: "*";
    margin-left: 4px;
}
/* Oculta el texto de condiciones (%conditions%) que ps_emailsubscription anade tras un <br><em> */
label[for="field-newsletter"] br,
label[for="field-newsletter"] em{
    display: none;
}
.auth-card .btn-primary,
.auth-card__submit{
    background-color: #205B29;
    border-color: #205B29;
    border-radius: 9999px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
}
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus{
    background-color: #1D4E24;
    border-color: #1D4E24;
}
.auth-card__divider{
    display: flex;
    align-items: center;
    gap: 12px;
}
.auth-card__divider-line{
    flex: 1 0 0;
    height: 1px;
    background-color: #E8E5E3;
}
.auth-card__divider-label{
    font-size: 12px;
    letter-spacing: .24px;
    color: #544B45;
    white-space: nowrap;
}
.auth-card__social,
.auth-card__secondary{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-radius: 9999px;
    padding: 11px 21px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #110F0E;
    background-color: #F8F7F7;
    border: 1px solid #E8E5E3;
    text-decoration: none;
}
.auth-card__social:hover,
.auth-card__secondary:hover{
    color: #110F0E;
    background-color: #F1EFEE;
}
.auth-card__secondary{
    border-color: #BAB1AB;
}
.auth-card__social img{
    width: 14px;
    height: 14px;
}
.auth-card__prompt{
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #544B45;
}
.auth-card__prompt-strong{
    font-weight: 600;
    letter-spacing: .07px;
}
.auth-card__prompt a{
    font-weight: 600;
    letter-spacing: .07px;
    color: #5C9DD6;
    text-decoration: none;
}
.auth-card__prompt a:hover{
    text-decoration: underline;
}
.auth-card__required-note{
    margin: 0;
    font-size: 12px;
    color: #544B45;
}
.auth-card__required-note span{
    color: #E61919;
}
.auth-card__accordion{
    width: 100%;
    background-color: #E7EFF2;
    border-radius: 22px;
    padding: 16px;
}
.auth-card__accordion summary{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    letter-spacing: .24px;
    color: #110F0E;
    cursor: pointer;
    list-style: none;
}
.auth-card__accordion summary::-webkit-details-marker{
    display: none;
}
.auth-card__accordion summary img{
    width: 12px;
    height: 12px;
    transition: transform .15s ease;
}
.auth-card__accordion[open] summary img{
    transform: rotate(90deg);
}
.auth-card__accordion-body{
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #544B45;
}
.auth-card__banner{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    background-color: rgba(219,243,219,.6);
    border: 1px solid rgba(41,134,70,.3);
    border-radius: 26px;
    padding: 21px;
}
.auth-card__banner-icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background-color: #11531A;
}
.auth-card__banner-icon img{
    width: 20px;
    height: 20px;
}
.auth-card__banner-title{
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 500;
    color: #1D4E24;
}
.auth-card__banner-body{
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #205B29;
}
.auth-card__banner-body strong{
    font-weight: 500;
}
.auth-card__help{
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #544B45;
}
.auth-card__help a{
    color: #5C9DD6;
    font-weight: 600;
    text-decoration: none;
}
.auth-card__help a:hover{
    text-decoration: underline;
}

/* Social login (modulo ets_sociallogin) - login (lgp) y registro (brp): mismo estilo que .auth-card__actions */
#authentication .ets_solo_social_wrapper.lgp,
.ets_solo_social_wrapper.brp{
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    text-align: left !important;
    padding-top: 0 !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.ets_solo_social_wrapper.lgp .ets_solo_social_item.auth-card__social,
.ets_solo_social_wrapper.brp .ets_solo_social_item.auth-card__social{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-radius: 9999px;
    padding: 11px 21px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #110F0E;
    background-color: #F8F7F7 !important;
    border: 1px solid #E8E5E3;
    text-decoration: none;
}
.ets_solo_social_wrapper.lgp .ets_solo_social_item.auth-card__social:hover,
.ets_solo_social_wrapper.brp .ets_solo_social_item.auth-card__social:hover{
    color: #110F0E;
    background-color: #F1EFEE !important;
}
.ets_solo_social_wrapper.lgp .ets_solo_social_item.auth-card__social img,
.ets_solo_social_wrapper.brp .ets_solo_social_item.auth-card__social img{
    width: 14px;
    height: 14px;
}
/* FIN AUTENTICACION */

/* Pagina "Cuentas conectadas" (modulo ets_sociallogin, /module/ets_sociallogin/social):
   el boton "Connect" ya usa .btn-primary pero el propio CSS del modulo fuerza
   background:transparent!important sobre .ets_solo_social_item, asi que hay
   que repetir el color a mano; el radio de borde tambien se fuerza a pill
   para que sea igual que el resto de botones del sitio */
.ets_solo_myaccount_wrapper .ets_solo_social_item{
    background-color: #1D4E2B !important;
    border-color: #1D4E2B;
    color: #fff;
    border-radius: 9999px;
    padding-left: 21px;
    padding-right: 21px;
}
.ets_solo_myaccount_wrapper .ets_solo_social_item:hover{
    background-color: #184525 !important;
    color: #fff;
}

.category__header{
    padding-top: 3rem;
}

/* DESCRIPCIÓN DE CATEGORÍA: máx. 3 líneas + "Leer más" (todos los breakpoints) */
.page-category .category__description,
.page-category .category__additional-description{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-category .category__description.is-expanded,
.page-category .category__additional-description.is-expanded{
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.js-readmore{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.category__description-toggle{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
    color: #205b29;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .07px;
    cursor: pointer;
}
.category__description-toggle::after{
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6L8 10L12 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6L8 10L12 6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform .2s ease;
}
.category__description-toggle[aria-expanded="true"]::after{
    transform: rotate(180deg);
}

/* LEFT-COLUMN STICKY EN CATEGORÍA: al llegar arriba se queda fija
   acompañando el scroll hasta que #center-column (más alta) la empuja */
@media (min-width: 768px) {
    body#category #left-column{
        align-self: flex-start;
        position: sticky;
        top: var(--scroll-padding-top, 100px);
        z-index: 1020;
    }
}

/* ACORDEÓN DE FILTROS: el tema pinta el borde con border-block-end dentro de
   un @layer, que gana a la regla nativa de Bootstrap que quita el borde al
   último .accordion-item (los estilos sin @layer siempre ganan a los que
   están dentro de un @layer, así que basta con repetirlo aquí sin capa) */
.accordion-item:last-child{
    border-bottom: 0;
}
.accordion-button:after {
    background-size: .8rem;
    background-position: center;
}
.accordion--small .accordion-button {
    padding-block: 0.7rem;
}

/* BOTONES FILTRAR / ORDENAR Y FILTROS ACTIVOS (mobile) */
.products__filter-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    order: -1;
    flex: 0 0 auto;
    padding: 9px 13px;
    background-color: #fff;
    border: 1px solid #e8e5e3;
    border-radius: 9999px;
    color: #110f0e;
    font-size: 14px;
    font-weight: 500;
}
.products__filter-button:hover,
.products__filter-button:focus,
.products__filter-button:active{
    background-color: #f8f7f7;
    border-color: #e8e5e3;
    color: #110f0e;
}
.products__filter-button .material-icons{
    font-size: 16px;
    color: #205b29;
}
.products__filter-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background-color: #205b29;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.active-filters__link{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background-color: #faf7f2;
    border-color: #dcd7cd;
    color: #876249;
    font-size: 11px;
    font-weight: 600;
}
.active-filters__link:hover,
.active-filters__link:focus{
    background-color: #faf7f2;
    border-color: #dcd7cd;
    color: #876249;
}
.active-filters__link .material-icons{
    font-size: 12px;
    line-height: 1;
}
.active-filters__clear-all{
    padding: 4px 8px;
    background: none;
    border: 0;
    color: #205b29;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.active-filters__clear-all:hover{
    text-decoration: underline;
}

/* PAGINACIÓN LISTADO DE PRODUCTOS */
.pagination__number{
    display: none;
}
.pagination__container{
    justify-content: center;
}
.pagination__nav .pagination{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding-block: 12px;
}
.pagination__nav .page-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #fff;
    border: 1px solid #e8e5e3;
    border-radius: 9999px;
    color: #110f0e;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2px;
}
.pagination__nav .page-item.active .page-link{
    background-color: #205b29;
    border-color: #205b29;
    color: #fff;
}
.pagination__nav .page-item.disabled > .page-link{
    width: auto;
    height: auto;
    padding: 0 4px;
    background: none;
    border: 0;
    color: #544b45;
    font-size: 12px;
    font-weight: 500;
}
.pagination__nav .page-link.disabled{
    opacity: .4;
}
.pagination__nav .page-link__icon{
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.pagination__nav .page-link__icon--prev{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='0.888889' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.667 8L4 5.333L6.667 2.666'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='0.888889' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.667 8L4 5.333L6.667 2.666'/%3E%3C/svg%3E");
}
.pagination__nav .page-link__icon--next{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='0.888889' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8L6.667 5.333L4 2.666'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='0.888889' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8L6.667 5.333L4 2.666'/%3E%3C/svg%3E");
}

@media (max-width: 767px){
    .products__sort{
        justify-content: space-between;
    }
    .products__sort-dropdown{
        flex: 0 0 auto;
    }
    .products__sort-dropdown-button{
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 9px 17px;
        background-color: #f8f7f7;
        border: 1px solid #e8e5e3;
        border-radius: 9999px;
        color: #110f0e;
        font-size: 14px;
        font-weight: 400;
    }
    .products__sort-dropdown-button:hover,
    .products__sort-dropdown-button:focus,
    .products__sort-dropdown-button:active{
        background-color: #f8f7f7;
        border-color: #e8e5e3;
        color: #110f0e;
    }
    .products__sort-dropdown-button::after{
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 0;
        margin-left: 0;
        vertical-align: middle;
        background-color: currentColor;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
}

.subcategory__slider{
    position: relative;
}
.subcategory__list,
.subcategory__list--with-images{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.subcategory__list::-webkit-scrollbar,
.subcategory__list--with-images::-webkit-scrollbar{
    display: none;
}
.subcategory__link,
.subcategory__link--with-image{
    flex-shrink: 0;
    white-space: nowrap;
}
.subcategory__arrow{
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 9999px;
    background-color: var(--bs-body-bg, #fff);
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 0 10px 8px var(--bs-body-bg, #fff);
    opacity: 1;
    transition: opacity 1s ease;
    z-index: 1;
}
.subcategory__arrow--prev{
    left: 0;
}
.subcategory__arrow--next{
    right: 0;
}
.subcategory__arrow.is-hidden{
    opacity: 0;
    pointer-events: none;
}

#js-product-list-footer,
.okisam-faqs{
    margin-top: 30px;
}
@media (min-width: 768px){
    #js-product-list-footer,
    .okisam-faqs{
        margin-top: 45px;
    }
}
@media (min-width: 1200px){
    #js-product-list-footer,
    .okisam-faqs{
        margin-top: 60px;
    }
}

/* FAQS CATEGORÍA (módulo okisamcategoryfaqs) */
.okisam-faqs__title{
    margin: 0 0 24px;
    font-family: Inter, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.36px;
    color: #110F0E;
}
.okisam-faqs__card{
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 22px;
    box-shadow: 0 1px 1px rgba(4, 66, 15, .08);
    overflow: hidden;
}
.okisam-faqs .faq-item{
    margin-bottom: 0;
    padding: 20px;
    border-bottom: 1px solid #E8E5E3;
}
.okisam-faqs .faq-item:last-child{
    border-bottom: 0;
}
.okisam-faqs .faq-question{
    justify-content: space-between;
    gap: 16px;
    color: #110F0E;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}
.okisam-faqs .faq-question:hover{
    text-decoration: none;
}
.okisam-faqs .faq-toggle-icon{
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 0;
}
.okisam-faqs .faq-toggle-icon::before,
.okisam-faqs .faq-item--open .faq-toggle-icon::before,
.okisam-faqs .faq-toggle-icon::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background-color: #205B29;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.okisam-faqs .faq-toggle-icon::after{
    width: 2px;
    height: 10px;
    transition: transform .25s ease;
}
.okisam-faqs .faq-item--open .faq-toggle-icon::after{
    transform: translate(-50%, -50%) scaleY(0);
}
.okisam-faqs .faq-answer{
    padding-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #544B45;
}

/* Product List */
.page-title-section {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}
@media (min-width: 576px) {
    .page-title-section {
        font-size: 28px;
    }
}
@media (min-width: 768px) {
    .page-title-section {
        font-size: 32px;
    }
}
@media (min-width: 992px) {
    .page-title-section {
        font-size: 36px;
    } 
}
@media (min-width: 1200px) {
    .page-title-section {
        font-size: 40px;
    }
}
.page-category .category__description {
    margin-bottom: 0;
}
.page-category .category__additional-description {
    margin-bottom: 0;
}
.category__description-wrapper {
    margin-bottom: 30px;
}
button.category__description-toggle {
    margin-bottom: 30px;
}

/* ================= ÁREA DE CLIENTE ================= */
/* El hero debe ir a ancho completo y pegado arriba, igual que .auth-page:
   se anula el padding-top reservado para el breadcrumb absoluto y se rompe
   el .container ancestro con el mismo truco 100vw ya usado en autenticación */
.wrapper:has(.account-page) .columns-container.container{
    padding-top: 0;
}
/* Las notificaciones (ej. "Dirección añadida correctamente") se insertan dentro
   de .account-page__hero, encima del título, para no quedar remontadas con el
   breadcrumb absoluto. Solo necesitan separación del título de debajo. */
.account-page__hero #notifications{
    margin-top: 0;
    margin-bottom: 20px;
}
/* El propio _partials/notifications.tpl trae su .container: al ir ya dentro
   del .container del hero, se anula para que no le añada un segundo margen */
.account-page__hero #notifications .container{
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.account-page__hero{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background-color: #F8F7F7;
    border-bottom: 1px solid #E8E5E3;
    padding: 48px 10px 36px;
    margin-bottom: 32px;
}
@media (min-width: 576px) {
    .account-page__hero{
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        background-color: #F8F7F7;
        border-bottom: 1px solid #E8E5E3;
        padding: 48px 19px 36px;
        margin-bottom: 32px;
    }
}
.account-page__hero-title{
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: #110F0E;
}
@media(min-width:768px){
    .account-page__hero{
        padding: 72px 0 48px;
    }
    .account-page__hero-title{
        font-size: 56px;
        letter-spacing: -1.96px;
        margin-bottom: 12px;
    }
}
.account-page__hero-subtitle{
    margin: 0;
    max-width: 672px;
    font-size: 16px;
    line-height: 1.4;
    color: #110F0E;
}
@media(min-width:768px){
    .account-page__hero-subtitle{
        font-size: 18px;
    }
}
.account-page__body{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 60px;
}
@media(min-width:992px){
    .account-page__body{
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }
    .account-page__aside{
        flex: 0 0 280px;
        width: 280px;
        align-self: flex-start;
        position: sticky;
        top: var(--scroll-padding-top, 100px);
    }
}
.account-page__content{
    flex: 1 1 0%;
    min-width: 0;
}

/* Sidebar "Mi cuenta" */
.account-menu{
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 24px;
    box-shadow: 0 1px 2px 0 rgba(4,66,15,.08);
    overflow: hidden;
}
.account-menu__header{
    background-color: #205B29;
    padding: 20px 24px;
}
.account-menu__eyebrow,
.account-menu__email{
    margin: 0;
    font-size: 12px;
    letter-spacing: .24px;
    color: #fff;
    opacity: .8;
}
.account-menu__greeting{
    margin: 2px 0;
    font-size: 18px;
    color: #fff;
}
.account-menu__nav{
    background-color: #F8F7F7;
    display: flex;
    flex-direction: column;
    padding: 8px;
}
.account-menu__link,
.account-menu__signout{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 22px;
    font-size: 16px;
    color: #110F0E;
    text-decoration: none;
}
.account-menu__link:hover{
    color: #110F0E;
    text-decoration: none;
}
.account-menu__icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 18px;
    background-color: #F8F7F7;
}
.account-menu__icon-svg{
    width: 16px;
    height: 16px;
}
.account-menu__icon-svg path{
    stroke: #876249;
}
.account-menu__link--active{
    background-color: #DAE4DA;
    color: #205B29;
    font-weight: 500;
}
.account-menu__link--active .account-menu__icon{
    background-color: #205B29;
}
.account-menu__link--active .account-menu__icon-svg path{
    stroke: #fff;
}
.account-menu__link--disabled{
    cursor: not-allowed;
    opacity: .5;
}
.account-menu__divider{
    height: 1px;
    background-color: #E8E5E3;
    margin: 4px 0;
}

/* Cabecera de sección de contenido (Tus datos / Mis direcciones / Mis pedidos) */
.account-section__header{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
.account-section__title{
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: #110F0E;
}
@media(min-width:768px){
    .account-section__title{
        font-size: 32px;
    }
}
.account-section__description{
    margin: 0;
    max-width: 672px;
    font-size: 14px;
    line-height: 1.4;
    color: #544B45;
}
@media(min-width:768px){
    .account-section__description{
        font-size: 16px;
    }
}
.account-section__required-note{
    margin: 0;
    font-size: 12px;
    color: #E61919;
}
.account-section__banner{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #E7EFF2;
    border: 1px solid #5C9DD6;
    border-radius: 22px;
    padding: 17px;
    margin-bottom: 24px;
}
.account-section__banner .material-icons{
    font-size: 16px;
    color: #5C9DD6;
    margin-top: 2px;
}
.account-section__banner p{
    margin: 0;
    font-size: 14px;
    color: #110F0E;
}

/* Formulario "Información de cuenta" */
.account-form__cards{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.account-card{
    background-color: #fff;
    border: 1px solid #D9D3D0;
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
    padding: 24px;
}
@media(min-width:768px){
    .account-card{
        padding: 32px;
    }
}
.account-card__title{
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.36px;
    color: #110F0E;
}
.account-card__fields{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media(min-width:576px){
    .account-card__fields{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .account-card__fields > .mb-3,
    .account-card__fields > .form-group{
        flex: 1 1 calc(50% - 10px);
        min-width: 220px;
    }
}
.account-card .form-label{
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
    margin-bottom: 6px;
}
.account-card .form-label.required:after{
    color: #E61919;
    font-size: 14px;
    font-weight: 600;
}
.account-card .form-control,
.account-card .input-group.password-field{
    border-radius: 9999px;
}
.account-card .form-control{
    background-color: #F8F7F7;
    border: 1px solid #D9D3D0;
    padding: 13px 21px;
    font-size: 14px;
    color: #110F0E;
}
.account-card .form-control::placeholder{
    color: #544B45;
}
.account-card .form-text{
    font-size: 12px;
    color: #544B45;
}
.account-card .input-group.password-field{
    overflow: hidden;
    border: 1px solid #D9D3D0;
    background-color: #F8F7F7;
}
.account-card .input-group.password-field .form-control{
    border: 0;
    border-radius: 0;
    background-color: transparent;
}
.account-card .input-group.password-field .btn{
    background-color: transparent;
    border: 0;
    color: #544B45;
    box-shadow: none;
}
.account-card .form-check{
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.account-card .form-check-input{
    float: none;
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    border-radius: 2.5px;
    border: 1px solid #544B45;
}
.account-card .form-check-input:checked{
    background-color: #205B29;
    border-color: #205B29;
}
.account-card .form-check-label{
    font-size: 14px;
    color: #544B45;
}
.account-card--footer{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.account-card__extra{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.account-card__submit{
    background-color: #205B29;
    border: 0;
    border-radius: 9999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #fff;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
}
.account-card__submit:hover{
    background-color: #1D4E24;
    color: #fff;
}

/* Direcciones */
.addresses{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.addresses__list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media(min-width:576px){
    .addresses__list{
        grid-template-columns: repeat(2, 1fr);
    }
}
.addresses__empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    background-color: #F8F7F7;
    border: 1px dashed #E8E5E3;
    border-radius: 26px;
    padding: 32px 24px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
}
.addresses__empty-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 22px;
    background-color: #FAF7F2;
    margin-bottom: 12px;
}
.addresses__empty-icon-svg{
    width: 24px;
    height: 24px;
}
.addresses__empty-icon-svg path{
    stroke: #876249;
}
.addresses__empty-title{
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 500;
    color: #110F0E;
}
.addresses__empty-text{
    margin: 0 0 16px;
    font-size: 16px;
    color: #544B45;
}
@media(min-width:768px){
    .addresses__empty-text{
        font-size: 18px;
    }
}
.addresses__empty-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #205B29;
    border: 0;
    border-radius: 9999px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #fff;
}
.addresses__empty-cta .material-icons{
    font-size: 16px;
}
.addresses__empty-cta:hover{
    background-color: #1D4E24;
    color: #fff;
}
.addresses__hints{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media(min-width:576px){
    .addresses__hints{
        grid-template-columns: repeat(2, 1fr);
    }
}
.addresses__hint{
    background-color: #F8F7F7;
    border: 1px solid #E8E5E3;
    border-radius: 26px;
    padding: 21px;
}
.addresses__hint-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 18px;
    background-color: #DAE4DA;
    margin-bottom: 8px;
}
.addresses__hint-icon-svg{
    width: 20px;
    height: 20px;
}
.addresses__hint-icon-svg path{
    stroke: #205B29;
}
.addresses__hint-title{
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 500;
    color: #110F0E;
}
.addresses__hint-text{
    margin: 0;
    font-size: 12px;
    letter-spacing: .24px;
    color: #544B45;
}

.address-card{
    position: relative;
    background-color: #F8F7F7;
    border: 1px solid #E8E5E3;
    border-radius: 26px;
    padding: 21px;
    display: block;
    text-decoration: none;
}
.address-card__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 18px;
    background-color: #DAE4DA;
    margin-bottom: 12px;
}
.address-card__icon-svg{
    width: 20px;
    height: 20px;
}
.address-card__icon-svg path{
    stroke: #205B29;
}
.address-card__header{
    margin-bottom: 4px;
}
.address-card__alias{
    font-size: 16px;
    font-weight: 500;
    color: #110F0E;
}
.address-card__content{
    display: block;
    font-style: normal;
    font-size: 14px;
    line-height: 1.4;
    color: #544B45;
    margin-bottom: 16px;
}
.address-card__actions{
    display: flex;
    gap: 8px;
}
.address-card__edit,
.address-card__delete{
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
    text-decoration: none;
}
.address-card__delete{
    color: #ae2222;
}
.address-card--add-address{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border-style: dashed;
    color: #205B29;
    min-height: 160px;
}
.address-card--add-address .address-card__add-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 18px;
    background-color: #DAE4DA;
}
.address-card--add-address .address-card__add-text{
    font-size: 14px;
    font-weight: 600;
    color: #205B29;
}

/* Pedidos */
.order-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.order-filters__pill{
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 9999px;
    font-size: 14px;
    color: #110F0E;
}
.order-filters__pill--active{
    background-color: #205B29;
    border-color: #205B29;
    color: #fff;
}
.order-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.order-card{
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
    padding: 21px;
}
.order-card__main{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
}
.order-card__lead{
    display: flex;
    gap: 16px;
    min-width: 0;
}
.order-card__icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 22px;
    background-color: #DAE4DA;
}
.order-card__icon .material-icons{
    font-size: 20px;
    color: #205B29;
}
.order-card__info{
    min-width: 0;
}
.order-card__reference-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.order-card__reference{
    font-size: 16px;
    font-weight: 500;
    color: #110F0E;
}
.order-card__status{
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24px;
    color: #110F0E;
}
.order-card__status--light{
    color: #110F0E;
}
.order-card__status--dark{
    color: #fff;
}
.order-card__meta{
    margin: 0;
    font-size: 12px;
    letter-spacing: .24px;
    color: #544B45;
}
.order-card__products{
    margin: 6px 0 0;
    font-size: 14px;
    color: #110F0E;
}
.order-card__tracking{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    letter-spacing: .24px;
    color: #205B29;
}
.order-card__tracking .material-icons{
    font-size: 14px;
}
.order-card__totals{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.order-card__total-label{
    font-size: 12px;
    letter-spacing: .24px;
    color: #544B45;
}
.order-card__total-value{
    font-size: 18px;
    font-weight: 500;
    color: #205B29;
}
.order-card__footer{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #E8E5E3;
}
.order-card__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.order-card__action{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 13px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
    text-decoration: none;
}
.order-card__action .material-icons{
    font-size: 16px;
}
.order-card__reorder{
    background-color: #205B29;
    border: 0;
    border-radius: 9999px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #fff;
}
.order-card__reorder:hover{
    background-color: #1D4E24;
    color: #fff;
}

/* Detalle de pedido: sin diseño de Figma específico, se restylean los
   elementos nativos de PrestaShop (botones, select, textarea, tablas)
   con los mismos tokens que el resto del área de cliente. */
.account-page .order-infos,
.account-page .order-status,
.account-page .order-carriers,
.account-page .order-addresses,
.account-page .order-products,
.account-page .order-messages,
.account-page .order-message-form{
    background-color: #fff;
    border: 1px solid #D9D3D0;
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
    padding: 24px;
    margin-bottom: 24px;
}
@media(min-width:768px){
    .account-page .order-infos,
    .account-page .order-status,
    .account-page .order-carriers,
    .account-page .order-addresses,
    .account-page .order-products,
    .account-page .order-messages,
    .account-page .order-message-form{
        padding: 32px;
    }
}
.account-page hr.order-separator{
    display: none;
}
.account-page .order-status .h3,
.account-page .order-carriers .h3,
.account-page .order-addresses .h3,
.account-page .order-products .h3,
.account-page .order-messages .h3,
.account-page .order-message-form .h3{
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.36px;
    color: #110F0E;
}

/* Tablas (estado, transportista, productos, totales) */
.account-page .grid-table{
    border: 1px solid #E8E5E3;
}
.account-page .grid-table + .grid-table{
    margin-top: 16px;
}
.account-page .grid-table__header{
    background-color: #F8F7F7;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24px;
    color: #544B45;
    text-transform: uppercase;
    padding-inline: 16px;
}
.account-page .grid-table__row{
    border-top: 1px solid #E8E5E3;
    font-size: 14px;
    color: #110F0E;
    padding-inline: 16px;
}
.account-page .order-status__badge{
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24px;
    color: #110F0E;
}
.account-page .order-status__badge--dark{
    color: #fff;
}

/* Direcciones del pedido: reutiliza el look de .address-card ya definido
   más arriba (icono, alias, texto), sin acciones de editar/eliminar */
.account-page .order-addresses__list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media(min-width:576px){
    .account-page .order-addresses__list{
        grid-template-columns: repeat(2, 1fr);
    }
}
.account-page .order-addresses .address-card{
    padding: 21px;
}

/* Botones */
.account-page .btn-primary,
.account-page .btn-outline-primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    border: 1px solid transparent;
}
.account-page .btn-primary{
    background-color: #205B29;
    border-color: #205B29;
    color: #fff;
}
.account-page .btn-primary:hover,
.account-page .btn-primary:focus{
    background-color: #1D4E24;
    border-color: #1D4E24;
    color: #fff;
}
.account-page .btn-outline-primary{
    background-color: #fff;
    border-color: #E8E5E3;
    color: #110F0E;
}
.account-page .btn-outline-primary:hover,
.account-page .btn-outline-primary:focus{
    background-color: #F8F7F7;
    border-color: #E8E5E3;
    color: #110F0E;
}
.account-page .btn-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #205B29;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.account-page .btn-link:hover{
    color: #1D4E24;
    text-decoration: underline;
}
.account-page .btn-sm{
    padding: 7px 13px;
    font-size: 12px;
}

/* Formulario "Añadir un mensaje" */
.account-page .order-message-form .form-label{
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
    margin-bottom: 6px;
}
.account-page .order-message-form .form-select,
.account-page .order-message-form .form-control{
    background-color: #F8F7F7;
    border: 1px solid #D9D3D0;
    font-size: 14px;
    color: #110F0E;
}
.account-page .order-message-form .form-select{
    border-radius: 9999px;
    padding: 13px 21px;
}
.account-page .order-message-form textarea.form-control{
    border-radius: 22px;
    padding: 17px 21px;
    resize: vertical;
}
.account-page .order-message-form .form-select:focus,
.account-page .order-message-form textarea.form-control:focus{
    border-color: #205B29;
    box-shadow: none;
}

/* Mensajes de atención al cliente ya enviados */
.account-page .order-message{
    padding: 16px;
    background-color: #F8F7F7;
    border: 1px solid #E8E5E3;
    border-radius: 22px;
}
.account-page .order-message + .order-message{
    margin-top: 12px;
}
.account-page .order-message__name{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
}
.account-page .order-message__date{
    margin: 0 0 8px;
    font-size: 12px;
    color: #544B45;
}
.account-page .order-message__content{
    font-size: 14px;
    color: #110F0E;
}

/* Alta/edición de dirección: mismo trato que el resto de formularios
   del área de cliente (sin diseño de Figma específico para esta pantalla) */
.account-page .address-form .form-fields{
    background-color: #fff;
    border: 1px solid #D9D3D0;
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media(min-width:768px){
    .account-page .address-form .form-fields{
        padding: 32px;
    }
}
@media(min-width:576px){
    .account-page .address-form .form-fields{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .account-page .address-form .form-fields > .mb-3,
    .account-page .address-form .form-fields > .form-group,
    .account-page .address-form .form-fields > .js-company-field,
    .account-page .address-form .form-fields > .js-dni-field{
        flex: 1 1 calc(50% - 10px);
        min-width: 220px;
    }
}
.account-page .address-form .form-fields > .address-field--full,
.account-page .address-form .form-fields > .company-toggle,
.account-page .address-form .form-fields > .js-dni-field.js-dni-field--bottom{
    flex-basis: 100%;
}

/* Toggle "Empresa" / "Autónomo y/o particular" en el formulario de dirección */
.company-toggle{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.company-toggle__label{
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
}
.company-toggle__options{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.company-toggle__option{
    cursor: pointer;
}
.company-toggle__separator{
    width: 100%;
    height: 1px;
    margin: 4px 0 0;
    border: 0;
    background-color: #E8E5E3;
}
.company-toggle__option input{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.company-toggle__option span{
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #F8F7F7;
    border: 1px solid #D9D3D0;
    border-radius: 9999px;
    font-size: 14px;
    color: #110F0E;
}
.company-toggle__option input:checked + span{
    background-color: #205B29;
    border-color: #205B29;
    color: #fff;
}
.company-toggle__option input:focus-visible + span{
    outline: 2px solid #205B29;
    outline-offset: 2px;
}
.account-page .address-form .form-text{
    display: none;
}
.account-page .address-form .form-label{
    font-size: 14px;
    font-weight: 500;
    color: #110F0E;
    margin-bottom: 6px;
}
.account-page .address-form .form-label.required:after{
    color: #E61919;
    font-size: 14px;
    font-weight: 600;
}
.account-page .address-form .form-control,
.account-page .address-form .form-select{
    background-color: #F8F7F7;
    border: 1px solid #D9D3D0;
    border-radius: 9999px;
    padding: 13px 21px;
    font-size: 14px;
    color: #110F0E;
}
.account-page .address-form .form-control::placeholder{
    color: #544B45;
}
.account-page .address-form .form-control:focus,
.account-page .address-form .form-select:focus{
    border-color: #205B29;
    box-shadow: none;
}
.account-page .address-form .form-text{
    font-size: 12px;
    color: #544B45;
}
.account-page .address-form .buttons-wrapper{
    margin-top: 20px;
}

/* Panel de control (dashboard) */
.dashboard{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.dashboard-welcome{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 24px;
    box-shadow: 0 1px 2px 0 rgba(4,66,15,.08);
    padding: 24px;
}
@media(min-width:576px){
    .dashboard-welcome{
        flex-direction: row;
        align-items: center;
    }
}
@media(min-width:768px){
    .dashboard-welcome{
        padding: 33px;
    }
}
.dashboard-welcome__icon{
    flex-shrink: 0;
    width: 68px;
    height: auto;
}
.dashboard-welcome__title{
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.48px;
    color: #110F0E;
}
@media(min-width:768px){
    .dashboard-welcome__title{
        font-size: 32px;
    }
}
.dashboard-welcome__subtitle{
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #110F0E;
}
.dashboard-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dashboard-stat{
    flex: 1 1 200px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 24px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
    padding: 24px;
}
.dashboard-stat__badge{
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24px;
    margin-bottom: 8px;
}
.dashboard-stat__badge--orders{
    background-color: #205B29;
    color: #fff;
}
.dashboard-stat__badge--club{
    background-color: #876249;
    color: #fff;
}
.dashboard-stat__badge--addresses{
    background-color: #F8F7F7;
    color: #110F0E;
}
.dashboard-stat__value{
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.8px;
    color: #110F0E;
}
@media(min-width:768px){
    .dashboard-stat__value{
        font-size: 40px;
    }
}
.dashboard-stat__label{
    margin: 0;
    font-size: 14px;
    color: #110F0E;
}
.dashboard-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media(min-width:768px){
    .dashboard-grid{
        grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
        align-items: start;
    }
}
.dashboard-card{
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 24px;
    box-shadow: 0 1px 1px rgba(4,66,15,.08);
    padding: 24px;
}
.dashboard-card__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dashboard-card__title{
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #110F0E;
}
.dashboard-card__edit{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07px;
    color: #205B29;
    text-decoration: none;
}
.dashboard-card__edit:hover{
    color: #1D4E24;
    text-decoration: underline;
}
.dashboard-info-row{
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #F8F7F7;
    border-radius: 22px;
    padding: 12px 16px;
}
.dashboard-info-row__icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: #fff;
}
.dashboard-info-row__icon-svg{
    width: 16px;
    height: 16px;
}
.dashboard-info-row__icon-svg path{
    stroke: #205B29;
}
.dashboard-info-row__label{
    margin: 0;
    font-size: 12px;
    letter-spacing: .24px;
    color: #110F0E;
}
.dashboard-info-row__value{
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #110F0E;
}
.dashboard-quicklinks{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dashboard-quicklink{
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    border: 1px solid #E8E5E3;
    border-radius: 22px;
    padding: 13px 17px;
    text-decoration: none;
    color: #110F0E;
}
.dashboard-quicklink:hover{
    background-color: #F8F7F7;
    color: #110F0E;
}
.dashboard-quicklink__icon{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: #F8F7F7;
}
.dashboard-quicklink__icon-svg{
    width: 16px;
    height: 16px;
}
.dashboard-quicklink__icon-svg path{
    stroke: #876249;
}
.dashboard-quicklink__label{
    flex: 1 1 0%;
    font-size: 16px;
}
.dashboard-quicklink__arrow{
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.dashboard-quicklink__arrow path{
    stroke: #544B45;
}
.dashboard-quicklink--disabled{
    cursor: not-allowed;
    opacity: .5;
}
.dashboard-quicklink--disabled:hover{
    background-color: #fff;
}
/* ================= FIN ÁREA DE CLIENTE ================= */