/* Consistent container width across all pages.
   El tema padre fija .container{width:1140px} en @media(min-width:1200px);
   por eso hay que pisar tambien width (no solo max-width) dentro del mismo breakpoint. */
@media (min-width: 1200px) {
    .container {
        width: 100%;
        max-width: var(--container-max-width);
    }
}

/* Wrapper + body background — warm cream from design tokens */
#wrapper {
    padding: 0;
    background: var(--page);
}

body {
    background-color: var(--page);
}

/* Paddign en la pagina de productos indibviduales */
body.page-product #wrapper{
    padding-top: 1.5rem;
}

/* Breadcrumb: oculto en home (no aporta), visible en el resto */
body.page-index #wrapper .breadcrumb,
body.page-index #wrapper .breadcrumb[data-depth] {
    display: none !important;
}

/* Breadcrumb visible en categorías/marcas/CMS — sobrescribe la regla del
   classic theme que oculta breadcrumb con data-depth="1" */
#wrapper .breadcrumb,
#wrapper .breadcrumb[data-depth] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    background: transparent;
    padding: 0;
    margin: 0 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    list-style: none;
}

#wrapper .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

#wrapper .breadcrumb li {
    display: inline-flex;
    align-items: center;
    list-style: none;
}

#wrapper .breadcrumb li + li::before {
    color: var(--color-text-soft);
    margin: 0 var(--space-sm);
    font-weight: var(--fw-regular);
}

#wrapper .breadcrumb a {
    color: var(--color-text-muted);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: color var(--t-base);
}

#wrapper .breadcrumb a:hover {
    color: var(--color-primary);
}

#wrapper .breadcrumb li:last-child,
#wrapper .breadcrumb li:last-child a,
#wrapper .breadcrumb li.active,
#wrapper .breadcrumb li.active a {
    color: var(--color-text);
    font-weight: var(--fw-bold);
    pointer-events: none;
}

/* Contenido de la pagina de contacto */
body.page-contact #wrapper .container #content-wrapper{
    width: 100%;
}

/* Sin breadcrumb en carrito ni en el área de cliente (user) */
body.page-cart .breadcrumb,
body.page-my-account .breadcrumb,
body.page-identity .breadcrumb,
body.page-addresses .breadcrumb,
body.page-address .breadcrumb,
body.page-history .breadcrumb,
body.page-order-detail .breadcrumb,
body.page-order-slip .breadcrumb,
body.page-discount .breadcrumb,
body.page-authentication .breadcrumb {
    display: none !important;
}

.modal .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base);
}

.modal .close > span {
    display: block;
    font-size: 26px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.modal .close:hover,
.modal .close:focus {
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-primary);
    opacity: 1;
    outline: none;
}


.page-footer .text-sm-center a[href*="mylogout"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-xl);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-full);
    color: var(--color-danger);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

.page-footer .text-sm-center a[href*="mylogout"]:hover {
    background: var(--color-danger);
    color: #fff;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}

/* ==========================================================================
   Lista de deseos (blockwishlist): corazón rojo, modal de listas y toast
   ========================================================================== */

.wishlist-button-add .material-icons {
    color: var(--color-danger);
    transition: color var(--t-base), transform var(--t-base);
    border-color: var(--color-danger);
}

.wishlist-button-add:hover .material-icons {
    color: #b91c1c;
    transform: scale(1.1);
}

.wishlist-button-add.wishlist-button-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    margin-left: var(--space-md);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-full);
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 30px;
    cursor: pointer;
    transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

.wishlist-button-add.wishlist-button-product:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
    transform: translateY(-2px);
}

.wishlist-button-add.wishlist-button-product .material-icons {
    font-size: 22px;
    line-height: 1;
}

.wishlist-modal .modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.wishlist-modal .modal-header {
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.wishlist-modal .modal-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    color: var(--color-text);
}

.wishlist-modal .modal-body {
    padding: var(--space-sm) var(--space-md);
}

.wishlist-modal .wishlist-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base);
}

.wishlist-modal .wishlist-list-item:hover {
    background: rgba(220, 38, 38, 0.08);
    color: var(--color-danger);
}

.wishlist-modal .wishlist-list-create,
.wishlist-modal [class*="create"] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-xs);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    cursor: pointer;
}

.wishlist-modal .wishlist-list-create:hover {
    color: var(--color-cta-dark);
}

.wishlist-toast {
    position: fixed !important;
    top: auto !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: #fff;
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-lg);
    border: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.wishlist-toast.isActive {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.wishlist-toast.success {
    background: #16a34a;
}

/* Al eliminar de favoritos (texto "eliminado"), JS añade esta clase → rojo */
.wishlist-toast--removed {
    background: var(--color-danger) !important;
}

.wishlist-toast.error {
    background: var(--color-danger);
}

.wishlist-toast .wishlist-toast-text {
    margin: 0;
}

/* Override PrestaShop default teal (#2fb5d2) — brand orange for all unstyled PS components */
.btn-primary,
.modal .btn-primary,
.product-add-to-cart .add-to-cart {
    background-color: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-text-on-primary);
}

.btn-primary:hover,
.modal .btn-primary:hover,
.product-add-to-cart .add-to-cart:hover {
    background-color: var(--color-cta-dark);
    border-color: var(--color-cta-dark);
    color: var(--color-text-on-primary);
}

/* ==========================================================================
   Checkout — neutral header + step polish + trust badges
   ========================================================================== */
.ucheckout-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--s4) 0;
}

.ucheckout-header__label {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.ucheckout-header__lock {
    font-size: 18px;
    color: var(--color-success, #2f9e44);
}

body#checkout .checkout-step .step-title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}

body#checkout .checkout-step.-current .step-title {
    color: var(--brand);
}

body#checkout .checkout-step .step-number {
    background: var(--brand);
    color: #fff;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

body#checkout .checkout-step.-complete .step-number {
    background: var(--brand-strong);
}

body#checkout .btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

body#checkout .btn-primary:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}

/* ----- Checkout trust badges ----- */
.checkout-trust {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.checkout-trust__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--color-text-muted);
}

.checkout-trust__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-full);
    background: var(--brand-tint);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-trust__icon .material-icons {
    font-size: 20px;
}

.checkout-trust__item b {
    display: block;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 14px;
}

/* ==========================================================================
   Cart page
   ========================================================================== */
.cart-grid {
    margin: var(--space-xl) 0 var(--space-2xl);
}

.cart-grid .cart-container {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cart-grid .cart-container .card-block:first-child {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-lg);
}

.cart-grid .cart-container .card-block:first-child h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-extra);
    font-size: var(--fs-xl);
    color: var(--color-text);
    margin: 0;
}

body.page-cart .product-line-grid-left img {
    border-radius: var(--radius-md);
}

body.page-cart .product-line-info a {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    text-decoration: none;
}

body.page-cart .product-line-info a:hover {
    color: var(--color-primary);
}

body.page-cart .remove-from-cart .material-icons {
    color: var(--color-text-muted);
    transition: color var(--t-base);
}

body.page-cart .remove-from-cart:hover .material-icons {
    color: var(--color-danger);
}

.cart-grid .cart-summary {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.cart-grid .cart-summary .cart-detailed-totals {
    padding: var(--space-md);
}

.cart-grid .cart-summary .card-block.checkout {
    padding: var(--space-md);
}

.cart-grid .cart-summary .card-block.checkout .btn-primary {
    width: 100%;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    padding: var(--space-md);
}

.cart-grid .page-not-found {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.cart-grid .page-not-found h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
}

/* ==========================================================================
   My account page
   ========================================================================== */
body.page-my-account #content .links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

body.page-my-account #content .links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    text-decoration: none;
    text-align: center;
    text-transform: none;
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
    margin-bottom: 0;
    min-height: 140px;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

body.page-my-account #content .links a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.page-my-account #content .links a i.material-icons,
body.page-my-account #content .links a .link-item i {
    font-size: 32px;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-sm);
    padding-bottom: 0;
}

body.page-my-account #content .links a span.link-item {
    background: none;
    padding: 0;
    height: auto;
}

/* ==========================================================================
   Account sub-pages (identity, addresses, history, order detail, etc.)
   ========================================================================== */
body.page-identity #content,
body.page-addresses #content,
body.page-address #content,
body.page-order-slip #content,
body.page-discount #content {
    max-width: 720px;
    margin: 0 auto;
}

body.page-identity .page-content,
body.page-addresses .page-content,
body.page-address .page-content,
body.page-history .page-content,
body.page-order-detail .page-content,
body.page-order-slip .page-content,
body.page-discount .page-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

body.page-identity .form-group label,
body.page-addresses .form-group label,
body.page-address .form-group label {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--color-text);
}

body.page-identity .form-control,
body.page-addresses .form-control,
body.page-address .form-control {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    padding: var(--space-sm) var(--space-md);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

body.page-identity .form-control:focus,
body.page-addresses .form-control:focus,
body.page-address .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(204, 122, 23, 0.15);
}

body.page-history .page-content table,
body.page-order-detail .page-content table {
    font-family: var(--font-body);
}

body.page-history .page-content table thead th {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
}

body.page-history .page-content table td {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) var(--space-md);
}

body.page-history .page-content table td a {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

body.page-cms #left-column {
    display: none;
}

body.page-cms #content-wrapper {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* --- CMS "Sobre nosotros" --- */
.cms-about__hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto var(--space-2xl);
}
.cms-about__hero h2 {
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}
.cms-about__hero p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
}
.cms-about__values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}
@media (max-width: 768px) {
    .cms-about__values { grid-template-columns: 1fr; }
}
.cms-about__card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    transition: box-shadow var(--t-base);
}
.cms-about__card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.cms-about__card .card-icon {
    font-family: 'Material Icons';
    font-size: 2.4rem;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    display: block;
}
.cms-about__card h3 {
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}
.cms-about__card p {
    font-size: .92rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}
.cms-about__facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}
@media (max-width: 768px) {
    .cms-about__facts { grid-template-columns: repeat(2, 1fr); }
}
.cms-about__fact {
    text-align: center;
    padding: var(--space-lg) var(--space-sm);
}
.cms-about__fact .fact-number {
    font-size: 2rem;
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    display: block;
    line-height: 1.2;
}
.cms-about__fact .fact-label {
    font-size: .85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
}
#content.page-cms div.cms-about__cta {
    background: var(--color-primary);
    color: #fff;
    border-radius: 12px;
    padding: var(--space-xl) var(--space-2xl);
    text-align: center;
}
#content.page-cms .cms-about__cta h3,
#content.page-cms .cms-about__cta p {
    color: #fff;
}
.cms-about__cta h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-xs);
}
.cms-about__cta p {
    opacity: .85;
    margin-bottom: var(--space-md);
}
.cms-about__cta a {
    display: inline-block;
    background: #fff;
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    padding: var(--space-sm) var(--space-xl);
    border-radius: 8px;
    text-decoration: none;
    transition: opacity var(--t-base);
}
.cms-about__cta a:hover { opacity: .9; }

/* ==========================================================================
   Login / Registration pages
   ========================================================================== */

/* Vertical spacing: match CMS/category pages */
body.page-registration #wrapper,
body.page-authentication #wrapper,
body.page-password #wrapper {
    padding-top: var(--space-2xl);
}

/* Centered title on narrow-content pages */
.page-authentication h1,
.page-password h1 {
    text-align: center;
}

.page-password .ps-alert-success {
    padding-bottom: var(--space-md);
}

.page-authentication #content {
    max-width: 540px;
    margin: 0 auto;
}

.page-password #content {
    max-width: 540px;
    margin: 0 auto;
}

.page-password .center-email-fields {
    flex-wrap: wrap;
}

.page-password .center-email-fields .form-control-label {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
    margin-bottom: var(--space-xs);
}

.page-password .center-email-fields .email {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: var(--space-md);
}

.page-password .center-email-fields .form-control-submit {
    width: 100%;
}

/* Reset password form: stack labels above inputs */
.page-password .row.form-group .form-control-label {
    float: none;
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin-left: 0;
    margin-bottom: var(--space-xs);
    padding-left: 0;
}

.page-password .row.form-group .js-input-column,
.page-password .row.form-group > div[class*="col-md"] {
    float: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    margin-left: 0;
}

.page-password .row.form-group > div[class*="offset-md"] {
    margin-left: 0;
}

/* Registration form: full-width card (overrides parent theme.css 640px) */
.page-registration #content {
    max-width: none;
}

.page-authentication .page-content,
.page-registration .page-content,
.page-password .page-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

.page-authentication .form-group label,
.page-registration .form-group label,
.page-password .form-group label {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    color: var(--color-text);
}

/* Checkbox labels: normal weight */
.page-authentication .custom-checkbox label,
.page-registration .custom-checkbox label {
    font-weight: var(--fw-regular);
}

.page-authentication .form-control,
.page-registration .form-control,
.page-password .form-control {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    padding: var(--space-sm) var(--space-md);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}

.page-authentication .form-control:focus,
.page-registration .form-control:focus,
.page-password .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(204, 122, 23, 0.15);
}

/* Password input-group: match height with standalone inputs (38px) */
.page-authentication .input-group,
.page-registration .field-password-policy .input-group {
    height: 38px;
}

.page-authentication .input-group .form-control,
.page-registration .field-password-policy .input-group .form-control {
    height: 38px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.page-authentication .input-group .input-group-btn .btn,
.page-registration .field-password-policy .input-group .btn {
    height: 38px;
    min-height: auto;
    padding: 0 var(--space-md);
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--fs-sm);
    line-height: 1;
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.page-authentication .forgot-password a {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
}

.page-authentication .forgot-password a:hover {
    color: var(--color-primary);
}

.page-authentication .no-account a {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

/* Registration: "Already have an account?" link */
.page-registration .register-link {
    margin-top: var(--space-lg);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.page-registration .register-link a {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}

/* ==========================================================================
   Stores page — force full container width (hide sidebar)
   ========================================================================== */
body.page-stores #left-column {
    display: none;
}

body.page-stores #content-wrapper {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.page-stores {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.page-stores .store-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.page-stores .store-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.page-stores .store-item-container {
    display: flex;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-lg);
}

.page-stores .store-picture {
    flex: 0 0 120px;
    width: 120px;
    display: flex;
    align-items: center;
}

.page-stores .store-picture img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.page-stores .store-description {
    flex: 1;
}

.page-stores .store-description .card-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-extra);
    font-size: var(--fs-lg);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.page-stores .store-description address {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    font-style: normal;
    line-height: 1.6;
}

.page-stores .store-description a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    text-decoration: none;
}

.page-stores .store-description a:hover {
    color: var(--color-primary-dark);
}

.page-stores .store-description a .material-icons {
    font-size: 18px;
}

.page-stores .divide-left {
    flex: 0 0 auto;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
}

.page-stores .divide-left table {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    border-collapse: collapse;
}

.page-stores .divide-left th {
    color: var(--color-text);
    font-weight: var(--fw-bold);
    padding: 3px var(--space-md) 3px 0;
    text-align: left;
    white-space: nowrap;
}

.page-stores .divide-left td {
    color: var(--color-text-muted);
    padding: 3px 0;
}

.page-stores .divide-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-stores .store-item-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg, var(--page));
}

.page-stores .store-item-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-lg);
}

.page-stores .store-item-footer li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.page-stores .store-item-footer .material-icons {
    font-size: 18px;
    color: var(--color-primary);
}

@media (max-width: 767px) {
    .page-stores .store-item-container {
        flex-direction: column;
    }
    .page-stores .store-picture {
        flex: none;
        width: 100%;
    }
    .page-stores .divide-left {
        border-left: 0;
        border-top: 1px solid var(--color-border);
        padding-left: 0;
        padding-top: var(--space-md);
    }
}/* ==========================================================================
   Carrito (pagina cart): presentacion de precios/descuentos alineada con la
   ficha de producto, y mejora del boton "Continuar comprando".
   Acotado a #cart para no afectar a ficha/listados.
   ========================================================================== */

/* Cabecera del panel del carrito: barra con color de marca, texto en contraste y
   sin borde inferior (ni el hr separador). El card padre tiene overflow:hidden y
   radius, asi que la barra respeta las esquinas redondeadas superiores. */
#cart .cart-grid-body .card-block:has(> h1.h1) {
    background: var(--brand);
    border-bottom: 0;
}
#cart .cart-grid-body .card-block:has(> h1.h1) h1 {
    color: var(--brand-contrast);
    margin: 0;
}
#cart .cart-container .card-block:has(> h1.h1) + hr.separator {
    display: none;
}

/* Precio regular tachado: gris atenuado y tamano secundario (como en la ficha). */
#cart .cart-item .regular-price {
    color: var(--muted);
    font-size: 18px;
    font-weight: 400;
}

/* Badge de descuento: pill azul info (igual que en la ficha), no naranja/relleno. */
#cart .cart-item .discount {
    color: var(--color-info);
    background: color-mix(in srgb, var(--color-info) 12%, transparent);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
}

/* Precio unitario (izquierda) como dato secundario: evita duplicar el total en
   grande cuando la cantidad es 1. */
#cart .cart-item .current-price .price {
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
}

/* Tachado + precio final + badge en una sola linea y en ese orden (igual que la
   ficha de producto). .product-discount agrupa regular+badge; con display:contents
   sus hijos pasan a ser items del flex padre para poder ordenarlos. */
#cart .cart-item .product-line-info.product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}
#cart .cart-item .product-discount {
    display: contents;
}
#cart .cart-item .product-line-info.product-price .regular-price { order: 1; }
#cart .cart-item .product-line-info.product-price .current-price { order: 2; }
#cart .cart-item .product-line-info.product-price .discount { order: 3; }

/* Total de linea (derecha): precio prominente en color de marca, como el precio
   de venta de la ficha. */
#cart .cart-item .col-md-6.price .product-price {
    color: var(--brand);
    font-size: 32px;
    font-weight: 800;
}

/* Un poco mas de separacion entre el control de cantidad y el precio de linea. */
@media (min-width: 768px) {
    #cart .cart-item .col-md-6.price {
        margin-left: 28px;
    }
}

/* Boton "Continuar comprando": estilo boton fantasma con color de marca. */
#cart .cart-grid-body > a.label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1rem;
    padding: 10px 18px;
    border: 2px solid var(--brand);
    border-radius: var(--r-pill);
    color: var(--brand);
    font-weight: 700;
    transition: background .2s ease, color .2s ease;
}
#cart .cart-grid-body > a.label:hover {
    background: var(--brand);
    color: var(--brand-contrast);
}
/* ==========================================================================
   Confirmacion de pedido (#order-confirmation): paneles como tarjetas del
   sistema de diseno (redondeadas + sombra) y separacion del breadcrumb
   respecto a la cabecera. Acotado a #order-confirmation.
   ========================================================================== */
#order-confirmation .breadcrumb,
#order-confirmation .breadcrumb[data-depth] {
    margin-top: var(--space-lg) !important;
}

#order-confirmation #content-hook_order_confirmation,
#order-confirmation #content,
#order-confirmation #content-hook_payment_return {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}
/* Confirmacion de pedido (continuacion): acabado acorde a carrito/ficha. */

/* Titulos con la fuente display del sistema (no la de cuerpo). */
#order-confirmation .card-title,
#order-confirmation h1, #order-confirmation h2, #order-confirmation h3,
#order-confirmation .h1, #order-confirmation .h3 {
    font-family: var(--font-heading);
}

/* Bloque de confirmacion como banner de exito: fondo solido de marca y texto en
   contraste (blanco), para que destaque sobre el fondo crema de la pagina.
   Se usa un tono de marca suavizado (mezcla con blanco) para que no quede demasiado
   oscuro pero siga diferenciandose del fondo. */
#order-confirmation #content-hook_order_confirmation {
    background: color-mix(in srgb, var(--brand) 86%, white);
}
#order-confirmation #content-hook_order_confirmation .h1.card-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--brand-contrast);
}
#order-confirmation #content-hook_order_confirmation .h1.card-title .material-icons {
    color: var(--brand-contrast);
}
#order-confirmation #content-hook_order_confirmation p {
    color: var(--brand-contrast);
    opacity: .9;
}

/* Cabecera de la tabla de articulos: fondo suave y etiquetas en mayusculas. */
#order-confirmation #order-items > .row:first-child {
    background: var(--section-alt);
    border-radius: var(--r-md);
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) 0;
}
#order-confirmation #order-items > .row:first-child .card-title {
    margin: 0;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Total del pedido en color de marca y destacado. */
#order-confirmation .total-value td,
#order-confirmation .total-value td span {
    color: var(--brand);
    font-size: var(--fs-lg);
}

/* Datos de transferencia: lista definida como filas con separacion (tint). */
#order-confirmation #content-hook_payment_return dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-top: var(--space-md);
}
#order-confirmation #content-hook_payment_return dt,
#order-confirmation #content-hook_payment_return dd {
    background: var(--surface);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
}
#order-confirmation #content-hook_payment_return dt {
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

/* Enlaces (p.ej. atencion al cliente) con color de marca en hover. */
#order-confirmation a:hover {
    color: var(--brand-strong);
}