/* Fuente Montserrat */
body,
.ui.header,
.ui.menu,
.ui.button,
.ui.card,
.ui.segment,
.ui.label,
.ui.input input,
.ui.form,
.ui.table,
.ui.dropdown {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Tablas con esquinas redondeadas */
.ui.table {
    border-radius: 0.5rem !important;
    overflow: hidden;
}
.ui.table thead tr:first-child th:first-child {
    border-radius: 0.5rem 0 0 0 !important;
}
.ui.table thead tr:first-child th:last-child {
    border-radius: 0 0.5rem 0 0 !important;
}
.ui.table tfoot tr:last-child th:first-child {
    border-radius: 0 0 0 0.5rem !important;
}
.ui.table tfoot tr:last-child th:last-child {
    border-radius: 0 0 0.5rem 0 !important;
}

/* ================================================
   HEADER - Badge carrito
   ================================================ */

/* Badge carrito - sobre el ícono circular */
.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    pointer-events: none;
    border: 2px solid #fff;
}

/* Mini Mobile */
@media only screen and (max-width: 320px) {
    [class*="mobile hidden"],
    [class*="tablet only"]:not(.mobile),
    [class*="computer only"]:not(.mobile),
    [class*="large screen only"]:not(.mobile),
    [class*="widescreen only"]:not(.mobile),
    [class*="or lower hidden"] {
        display: none !important;
    }
    #main {
        padding-left: 10px;
        padding-right: 10px;
    }
    .ui.grid>.column:not(.row), .ui.grid>.row>.column {
        padding-left: 0;
        padding-right: 0;
    }
    .ui.small.table {
        font-size: .8em;
    }
    .ui.table td,
    .ui.table thead th {
        padding: .2em .4em;
    }
}

/* Mobile */
@media only screen and (min-width: 320px) and (max-width: 767px) {
    [class*="mobile hidden"],
    [class*="tablet only"]:not(.mobile),
    [class*="computer only"]:not(.mobile),
    [class*="large screen only"]:not(.mobile),
    [class*="widescreen only"]:not(.mobile),
    [class*="or lower hidden"] {
        display: none !important;
    }
    .ui.grid>.column:not(.row), .ui.grid>.row>.column {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    [class*="mobile only"]:not(.tablet),
    [class*="tablet hidden"],
    [class*="computer only"]:not(.tablet),
    [class*="large screen only"]:not(.tablet),
    [class*="widescreen only"]:not(.tablet),
    [class*="or lower hidden"]:not(.mobile) {
        display: none !important;
    }

    #main div.list_description {
        width: 70% !important;
    }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    [class*="mobile only"]:not(.computer),
    [class*="tablet only"]:not(.computer),
    [class*="computer hidden"],
    [class*="large screen only"]:not(.computer),
    [class*="widescreen only"]:not(.computer),
    [class*="or lower hidden"]:not(.tablet):not(.mobile) {
        display: none !important;
    }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    [class*="mobile only"]:not([class*="large screen"]),
    [class*="tablet only"]:not([class*="large screen"]),
    [class*="computer only"]:not([class*="large screen"]),
    [class*="large screen hidden"],
    [class*="widescreen only"]:not([class*="large screen"]),
    [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
        display: none !important;
    }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
    [class*="mobile only"]:not([class*="widescreen"]),
    [class*="tablet only"]:not([class*="widescreen"]),
    [class*="computer only"]:not([class*="widescreen"]),
    [class*="large screen only"]:not([class*="widescreen"]),
    [class*="widescreen hidden"],
    [class*="widescreen or lower hidden"] {
        display: none !important;
    }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

#menu .header_logo {
    padding: 0 !important;
}

#menu .header_logo img {
    height: 32px !important;
}

#main .header {
    height: 1.3em;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#main div.meta {
    height: 1.3em;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* En vista de lista, permitir que el badge se vea */
#main .ui.items div.meta {
    height: auto;
    min-height: 1.3em;
    overflow: visible;
}

#main span.price {
    color: black;
    font-weight: bold;
}

#main span.list_price {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 2em;
    margin-right: .5em;
}

#main div.description {
    height: 2.6em;
    width: 100%;
    overflow: hidden;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

#main div.list_description {
    width: calc(100% - 280px);
    max-width: 500px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* square images fix */
#main .ui.card {
    display: flow-root;
}

#main .ui.card div.image {
    width: 100% !important;
    padding-bottom: 100% !important;
}

#main .ui.card div.image img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    object-fit: cover !important;
    position: absolute !important;
}

#main .item .image img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    object-fit: cover !important;
    border: 1px solid rgba(34,36,38,.15);
}

#main .item > .content {
    width: 100%;
}

#main .image_selector {
    background-color: rgba(34,36,38,.02);
    left: 0 !important;
}

#main .image_selector a.item {
    padding: 4px !important;
}

#main .image_selector img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    object-fit: cover !important;
}

#main .menu_detalle .item i {
    float: left !important;
    margin: 0 0.5em 0 0 !important;
}

#main .menu_detalle .item {
    text-align: right;
}

.ui.spinner.input input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: right;
    width: 4em;
}
.ui.spinner.input .button.disabled {
    cursor: not-allowed;
}
.ui.spinner.input .buttons .button {
    background-color: #fff;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-left: none;
    padding: .2em .3em .3em;
    height: 21px;
}
.ui.spinner.input .spinner.up.button {
    border-bottom: none;
    border-top-left-radius: 0;
}
.ui.spinner.input .spinner.down.button {
    border-bottom-left-radius: 0;
}
.ui.spinner.input .button .icon {
    margin: 0;
}

.label.subtotal {
    width: 8em;
    text-align: right;
}

.ui.fixed.sticky {
    margin-top: 44px !important;
}

.ui.visibility {
    transition: margin 0.5s ease;
}

.ui.visibility.fixed {
    left: 0 !important;
    padding: 0 14px;
    width: 100%;
    margin-top: -5px;
}

.icon.button.add_to_cart,
.icon.button.product_detail {
    min-width: 80px;
}

.customer_info {
    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.price_desc {
    display: block;
    font-size: .64285714rem;
    clear: both;
    padding: 0;
    margin: 0;
    margin-top: 2px;
    line-height: .64285714rem;
    width: 100%;
    text-align: right;
    color: rgba(0,0,0,.6);
}

div.extra.content > div.right.floated {
    width: 100%;
    text-align: right;
}

/* ================================================
   PDP - Product Detail Page (MercadoLibre Style MVP)
   ================================================ */

.pdp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    background: #fff;
}

/* Breadcrumb */
.pdp__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
    padding: 8px 0 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pdp__back-link {
    color: var(--ml-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pdp__back-link:hover {
    text-decoration: underline;
}

.pdp__breadcrumb i.icon {
    line-height: 1 !important;
    height: auto !important;
    vertical-align: baseline !important;
    margin: 0 !important;
}

.pdp__breadcrumb-sep {
    color: #ccc;
}

.pdp__breadcrumb-item {
    color: var(--ml-primary);
}

.pdp__breadcrumb-link {
    color: var(--ml-primary);
    text-decoration: none;
}

.pdp__breadcrumb-link:hover {
    text-decoration: underline;
}

/* Main Layout */
.pdp__main {
    display: grid;
    grid-template-columns: 60px 1fr 380px;
    gap: 16px;
}

/* Gallery */
.pdp__gallery {
    display: contents;
}

.pdp__thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 8px;
    margin-top: 8px;
}

.pdp__thumb {
    width: 54px;
    height: 54px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.pdp__thumb:hover,
.pdp__thumb--active {
    border-color: var(--ml-primary);
}

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

.pdp__image-container {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.pdp__image-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.pdp__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* Info Column */
.pdp__info {
    padding-left: 24px;
    border-left: 1px solid #eee;
}

.pdp__condition {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdp__badge-sale {
    background: var(--ml-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.pdp__title {
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin: 0 0 8px;
    line-height: 1.3;
}

.pdp__codes {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.pdp__code {
    font-size: 12px;
    color: #999;
}

/* Price */
.pdp__price-box {
    margin-bottom: 16px;
}

.pdp__price-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.pdp__price {
    font-size: 36px;
    font-weight: 300;
    color: #333;
}

.pdp__price--quote {
    font-size: 24px;
    color: var(--ml-primary);
}

.pdp__price-off {
    font-size: 16px;
    font-weight: 600;
    color: #00a650;
}

.pdp__price-info {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

/* Stock */
.pdp__stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 12px;
}

.pdp__stock--ok {
    color: #00a650;
}

.pdp__stock--no {
    color: #f23d4f;
}

.pdp__stock i.icon,
.pdp__shipping i.icon {
    line-height: 1 !important;
    height: auto !important;
    vertical-align: baseline !important;
    margin: 0 !important;
}

/* Shipping */
.pdp__shipping {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #00a650;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

/* Attributes */
.pdp__attr {
    margin-bottom: 12px;
}

.pdp__attr-label {
    font-size: 14px;
    color: #333;
}

.pdp__attr-value {
    font-weight: 600;
}

/* Buy Box */
.pdp__buy-box {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.pdp__qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pdp__qty-label {
    font-size: 14px;
    color: #333;
}

.pdp__qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.pdp__qty-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    cursor: pointer;
    color: var(--ml-primary);
}

.pdp__qty-btn:hover {
    background: #f0f0f0;
}

.pdp__qty-input {
    width: 50px;
    height: 36px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 16px;
}

.pdp__buy-btn {
    width: 100%;
    padding: 15px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--ml-primary);
    border: none;
    border-radius: var(--ml-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pdp__buy-btn:hover {
    background: var(--ml-primary-dark);
}

.pdp__buy-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Variants */
.pdp__variants {
    margin-top: 16px;
}

.pdp__variant-block {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.pdp__color-section {
    margin-bottom: 16px;
}

.pdp__color-preview {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pdp__color-thumb {
    width: 48px;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.pdp__color-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp__size-section {
    margin-top: 12px;
}

.pdp__size-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* En modo wholesale (chip con qty selector adentro) cambiamos a grid
   responsive — cards cuadradas estilo MercadoLibre. */
.pdp__size-chips:has(.pdp__size-chip-qty) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.pdp__size-chip {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 100px;
    background: #fff;
    text-align: center;
    transition: border-color 0.2s;
}

.pdp__size-chip:hover:not(.pdp__size-chip--disabled) {
    border-color: var(--ml-primary);
}

.pdp__size-chip--disabled {
    opacity: 0.5;
    background: #f5f5f5;
}

.pdp__size-chip-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pdp__size-chip-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.pdp__chip-btn {
    width: 28px;
    height: 28px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ml-primary);
}

.pdp__chip-btn:hover {
    background: #e8e8e8;
}

.pdp__chip-input {
    width: 36px;
    height: 28px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
}

.pdp__size-chip-nostock {
    font-size: 12px;
    color: #f23d4f;
}

/* ──────────────────────────────────────────────────────────────────
   PDP Wholesale Cards — estilo MercadoLibre adaptado a multi-cantidad
   ────────────────────────────────────────────────────────────────── */
.pdp__size-chip:has(.pdp__size-chip-qty),
.pdp__size-chip--has-qty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    min-width: auto;
    cursor: default;
    transition: all 0.15s ease;
}
.pdp__size-chip:has(.pdp__size-chip-qty):hover {
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
/* Estado activo: aplicado por JS cuando qty > 0 */
.pdp__size-chip--has-qty {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 1px #16a34a inset;
}
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__size-chip-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 0.2px;
    word-break: break-word;
    line-height: 1.2;
}

/* Contenedor pill con border ovalado, fondo blanco */
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__size-chip-qty {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    background: #fff;
    padding: 3px;
    overflow: visible;
}

/* Botones circulares modernos: ocultamos el texto (−/+) y dibujamos
   las líneas con pseudo-elementos para un trazo limpio. */
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-btn {
    position: relative;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #2563eb;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-btn::before {
    content: '';
    width: 11px;
    height: 1.6px;
    background: currentColor;
    border-radius: 1px;
    display: block;
}
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-btn[data-action="increase"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6px;
    height: 11px;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-btn:hover {
    background: #2563eb;
    color: #fff;
}
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-btn:active {
    transform: scale(0.92);
}

/* Input central sin bordes — el pill exterior ya enmarca todo */
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-input {
    width: 36px;
    height: 28px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #111;
    -moz-appearance: textfield;
}
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-input::-webkit-outer-spin-button,
.pdp__size-chip:has(.pdp__size-chip-qty) .pdp__chip-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Cuando qty > 0, los botones toman el verde de "seleccionado" */
.pdp__size-chip--has-qty .pdp__size-chip-qty {
    border-color: #16a34a;
}
.pdp__size-chip--has-qty .pdp__chip-btn {
    background: #fff;
    color: #16a34a;
}
.pdp__size-chip--has-qty .pdp__chip-btn:hover {
    background: #16a34a;
    color: #fff;
}

/* Buy Box Variants */
.pdp__buy-box--variants {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pdp__selected-count {
    font-size: 14px;
    color: #666;
}

.pdp__buy-box--variants .pdp__buy-btn {
    width: auto;
    min-width: 200px;
}

/* Description */
.pdp__description {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.pdp__desc-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
}

.pdp__desc-content {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* Modal */
.pdp__modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.pdp__modal.active,
.pdp__modal.pdp__modal--visible {
    display: flex;
}

/* Button loading state */
.pdp__buy-btn.loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}

.pdp__buy-btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pdp-spin 0.8s linear infinite;
}

@keyframes pdp-spin {
    to { transform: rotate(360deg); }
}

.pdp__modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
}

.pdp__modal-body {
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
}

.pdp__modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pdp__modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.pdp__modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp__modal-nav:hover {
    background: rgba(255,255,255,0.4);
}

.pdp__modal-prev {
    left: 20px;
}

.pdp__modal-next {
    right: 20px;
}

/* ================================================
   PDP Responsive
   ================================================ */

@media (max-width: 991px) {
    .pdp__main {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pdp__thumbs {
        flex-direction: row;
        order: 2;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .pdp__image-container {
        order: 1;
    }

    .pdp__info {
        order: 3;
        padding-left: 0;
        border-left: none;
    }

    .pdp__image-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .pdp {
        padding: 12px;
    }

    .pdp__breadcrumb {
        font-size: 13px;
    }

    .pdp__title {
        font-size: 18px;
    }

    .pdp__price {
        font-size: 28px;
    }

    .pdp__thumb {
        width: 48px;
        height: 48px;
    }

    .pdp__size-chips {
        gap: 8px;
    }

    .pdp__size-chip {
        min-width: 80px;
        padding: 8px 10px;
    }

    .pdp__buy-box--variants {
        flex-direction: column;
        align-items: stretch;
    }

    .pdp__buy-box--variants .pdp__buy-btn {
        width: 100%;
    }
}

@media (max-width: 374px) {
    .pdp__title {
        font-size: 16px;
    }

    .pdp__price {
        font-size: 24px;
    }

    .pdp__size-chip {
        min-width: 70px;
    }
}

/* ================================================
   CATALOG - Estilo Minimalista Blanco
   ================================================ */

:root {
    --ml-primary: #111;
    --ml-primary-dark: #333;
    --ml-success: #00a650;
    --ml-success-light: #39b54a;
    --ml-warning: #666;
    --ml-yellow: #fff159;
    --ml-text: #111;
    --ml-text-secondary: #666;
    --ml-text-light: #888;
    --ml-text-muted: #999;
    --ml-bg: #fafafa;
    --ml-white: #fff;
    --ml-border: #e0e0e0;
    --ml-border-light: #eee;
    --ml-shadow: 0 2px 8px rgba(0,0,0,.06);
    --ml-shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.06);
    --ml-radius: 8px;
    --ml-card-bg: #fff;
    --ml-input-bg: #f5f5f5;
    --ml-input-border: #e0e0e0;
    --ml-hover-bg: #f8f8f8;
    --ml-precio: #111;
}

/* ================================================
   DARK MODE
   ================================================ */
body.dark-mode {
    --ml-primary: #e0e0e0;
    --ml-primary-dark: #ccc;
    --ml-text: #e0e0e0;
    --ml-text-secondary: #aaa;
    --ml-text-light: #888;
    --ml-text-muted: #777;
    --ml-bg: #1a1a1a;
    --ml-white: #242424;
    --ml-border: #3a3a3a;
    --ml-border-light: #333;
    --ml-shadow: 0 2px 8px rgba(0,0,0,.2);
    --ml-shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.2);
    --ml-card-bg: #242424;
    --ml-input-bg: #2a2a2a;
    --ml-input-border: #444;
    --ml-hover-bg: #2e2e2e;
    --ml-precio: #fff;
}

/* Dark mode: prevenir flash blanco antes de que body cargue */
html.dark-mode-pending {
    background: #1a1a1a;
}

/* Dark mode: transición suave al cambiar (solo después de carga inicial) */
body.dark-mode-ready, body.dark-mode-ready * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Dark mode: header */
body.dark-mode #menu {
    background: var(--ml-card-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
body.dark-mode #menu .header-nav-item,
body.dark-mode #menu .header-nav-item.item {
    color: var(--ml-text) !important;
}
body.dark-mode #menu .search-container input {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-input-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode #menu .search-container input:focus {
    background: var(--ml-card-bg) !important;
    border-color: #666 !important;
}
body.dark-mode .header-user-name { color: var(--ml-text) !important; }
body.dark-mode .header-user-role { color: var(--ml-text-muted) !important; }
body.dark-mode .header-user-dropdown { border-left-color: var(--ml-border) !important; }
body.dark-mode .autocomplete-results {
    background: var(--ml-card-bg);
    border-color: var(--ml-border);
}
body.dark-mode .autocomplete-item { border-bottom-color: var(--ml-border); }
body.dark-mode .autocomplete-item:hover { background: var(--ml-hover-bg); }
body.dark-mode .autocomplete-item-name { color: var(--ml-text); }
body.dark-mode .autocomplete-item-meta { color: var(--ml-text-light); }
body.dark-mode .autocomplete-view-all { background: var(--ml-input-bg); color: #4da6ff; }
body.dark-mode .autocomplete-view-all:hover { background: var(--ml-hover-bg); }

/* Dark mode: mobile sidebar */
body.dark-mode .mobile-sidebar {
    background: var(--ml-card-bg) !important;
}
body.dark-mode .mobile-sidebar-header {
    border-bottom-color: var(--ml-border) !important;
}
body.dark-mode .mobile-sidebar-name { color: var(--ml-text) !important; }
body.dark-mode .mobile-sidebar-item { color: var(--ml-text-secondary) !important; }
body.dark-mode .mobile-sidebar-item:hover { background: var(--ml-hover-bg) !important; }
body.dark-mode .mobile-sidebar-divider { background: var(--ml-border) !important; }
body.dark-mode .mobile-sidebar-overlay { background: rgba(0,0,0,0.6) !important; }

/* Dark mode: search menu */
body.dark-mode #search_menu {
    background: var(--ml-card-bg) !important;
}
body.dark-mode #search_menu input {
    color: var(--ml-text) !important;
}

/* Dark mode: dropdown menus */
body.dark-mode .ui.dropdown .menu {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .ui.dropdown .menu .item {
    color: var(--ml-text) !important;
    border-top-color: var(--ml-border) !important;
}
body.dark-mode .ui.dropdown .menu .item:hover {
    background: var(--ml-hover-bg) !important;
}
body.dark-mode .ui.dropdown .menu .divider {
    border-top-color: var(--ml-border) !important;
}

/* Dark mode: Semantic UI overrides */
body.dark-mode .ui.segment,
body.dark-mode .ui.basic.segment {
    background: var(--ml-bg) !important;
}
body.dark-mode .ui.menu {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .ui.menu .item {
    color: var(--ml-text) !important;
}
body.dark-mode .ui.selection.dropdown {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-input-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.selection.dropdown .menu {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .ui.selection.dropdown .menu > .item {
    color: var(--ml-text) !important;
    border-top-color: var(--ml-border) !important;
}
body.dark-mode .ui.selection.dropdown .menu > .item:hover {
    background: var(--ml-hover-bg) !important;
}
body.dark-mode .ui.selection.dropdown > .text {
    color: var(--ml-text) !important;
}
body.dark-mode .ui.search.selection.dropdown > input.search {
    color: var(--ml-text) !important;
}
body.dark-mode .ui.modal {
    background: var(--ml-card-bg) !important;
}
body.dark-mode .ui.modal > .header {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
    border-bottom-color: var(--ml-border) !important;
}
body.dark-mode .ui.modal > .content {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.modal > .actions {
    background: var(--ml-input-bg) !important;
    border-top-color: var(--ml-border) !important;
}
body.dark-mode .ui.input input {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-input-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.form textarea {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-input-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.pagination.menu .item {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.pagination.menu .active.item {
    background: var(--ml-input-bg) !important;
}

/* Dark mode: product cards */
body.dark-mode .producto-card {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .producto-card:hover {
    border-color: var(--ml-input-border) !important;
}
body.dark-mode .producto-nombre { color: var(--ml-text) !important; }
body.dark-mode .producto-categoria { color: var(--ml-text-light) !important; }
body.dark-mode .producto-marca { color: var(--ml-text-light) !important; }
body.dark-mode .precio-actual { color: var(--ml-precio) !important; }
body.dark-mode .precio-desc { color: var(--ml-text-muted) !important; }
body.dark-mode .producto-imagen { background: var(--ml-input-bg) !important; }

/* Dark mode: product list view */
body.dark-mode .productos-lista { background: var(--ml-card-bg) !important; }
body.dark-mode .producto-item {
    background: var(--ml-card-bg) !important;
    border-bottom-color: var(--ml-border) !important;
}
body.dark-mode .producto-item:hover { background: var(--ml-hover-bg) !important; }
body.dark-mode .producto-item-nombre { color: var(--ml-text) !important; }
body.dark-mode .producto-item-meta { color: var(--ml-text-light) !important; }
body.dark-mode .producto-item-imagen { background: var(--ml-input-bg) !important; }
body.dark-mode .producto-item-precio .precio-actual { color: var(--ml-precio) !important; }

/* Dark mode: qty selector */
body.dark-mode .producto-qty-selector {
    border-color: var(--ml-border) !important;
}
body.dark-mode .producto-qty-btn {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .producto-qty-btn:hover {
    background: var(--ml-hover-bg) !important;
}
body.dark-mode .producto-qty-input {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
}

/* Dark mode: filters */
body.dark-mode .menu-filtros {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .active-filters-container {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .filter-chip {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .filter-chip-label { color: var(--ml-text-secondary) !important; }
body.dark-mode .active-filters-clear {
    border-color: var(--ml-border) !important;
    color: var(--ml-text-secondary) !important;
}

/* Dark mode: cart */
body.dark-mode .cart-page-title { color: var(--ml-text) !important; }
body.dark-mode .cart-items-card,
body.dark-mode .carrito-section-card,
body.dark-mode .cart-summary-card {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .cart-item {
    border-bottom-color: var(--ml-border) !important;
}
body.dark-mode .cart-item-name { color: var(--ml-text) !important; }
body.dark-mode .cart-item-stock { color: var(--ml-text-light) !important; }
body.dark-mode .cart-item-unit { color: var(--ml-precio) !important; }
body.dark-mode .cart-item-subtotal { color: var(--ml-precio) !important; }
body.dark-mode .cart-item-delete { color: var(--ml-text-light) !important; }
body.dark-mode .cart-summary-title { color: var(--ml-text) !important; }
body.dark-mode .cart-summary-row { color: var(--ml-text) !important; }
body.dark-mode .cart-summary-row--total { border-top-color: var(--ml-border) !important; }
body.dark-mode .ui.spinner input {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.spinner .button {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
}

/* Dark mode: footer */
body.dark-mode .b2b-footer {
    background: var(--ml-card-bg) !important;
    border-top-color: var(--ml-border) !important;
}
body.dark-mode .b2b-footer-title { color: var(--ml-text) !important; }
body.dark-mode .b2b-footer-links a { color: var(--ml-text-secondary) !important; }
body.dark-mode .b2b-footer-contact-item { color: var(--ml-text-secondary) !important; }
body.dark-mode .b2b-footer-divider { background: var(--ml-border) !important; }
body.dark-mode .b2b-footer-bottom p { color: var(--ml-text-light) !important; }
body.dark-mode .b2b-payment-icon {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text-secondary) !important;
}

/* Dark mode: PDP (product detail page) */
body.dark-mode .pdp__breadcrumb { color: var(--ml-text-secondary) !important; border-bottom-color: var(--ml-border) !important; }
body.dark-mode .pdp__title { color: var(--ml-text) !important; }
body.dark-mode .pdp__codes { color: var(--ml-text-muted) !important; }
body.dark-mode .pdp__price { color: var(--ml-precio) !important; }
body.dark-mode .pdp__stock { color: var(--ml-text-secondary) !important; }
body.dark-mode .pdp__attr-label { color: var(--ml-text) !important; }
body.dark-mode .pdp__buy-box { background: var(--ml-input-bg) !important; }
body.dark-mode .pdp__qty-input { background: var(--ml-card-bg) !important; border-color: var(--ml-border) !important; color: var(--ml-text) !important; }
body.dark-mode .pdp__variant-block { background: var(--ml-input-bg) !important; border-color: var(--ml-border) !important; }
body.dark-mode .pdp__size-chip { background: var(--ml-card-bg) !important; border-color: var(--ml-border) !important; color: var(--ml-text) !important; }
body.dark-mode .pdp__min-qty-notice { color: var(--ml-text-secondary) !important; }
body.dark-mode .pdp__desc-text { color: var(--ml-text-secondary) !important; }

/* Dark mode: home carousels */
body.dark-mode .home-section-title { color: var(--ml-text) !important; }
body.dark-mode .home-section-link { color: var(--ml-text-secondary) !important; }
body.dark-mode .home-cat-card { background: var(--ml-card-bg) !important; }
body.dark-mode .home-cat-name { color: var(--ml-text) !important; }
body.dark-mode .home-cat-count { color: var(--ml-text-muted) !important; }
body.dark-mode .home-marca-card {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .home-marca-card:hover {
    background: var(--ml-hover-bg) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
body.dark-mode .home-marca-nombre { color: var(--ml-text) !important; }
body.dark-mode .home-marca-name { color: var(--ml-text) !important; }
body.dark-mode .home-marca-count { color: var(--ml-text-muted) !important; }
body.dark-mode .home-marcas-grid { color: var(--ml-text) !important; }

/* Dark mode: home carousel sections */
body.dark-mode .home-carousel-section {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .home-carousel-title { color: var(--ml-text) !important; }
body.dark-mode .home-carousel-header { border-bottom-color: var(--ml-border) !important; }
body.dark-mode .home-carousel-btn { background: var(--ml-input-bg) !important; color: var(--ml-text) !important; border-color: var(--ml-border) !important; }
body.dark-mode .home-carousel-btn:hover { background: var(--ml-hover-bg) !important; }

/* Dark mode: hero slider */
body.dark-mode .home-hero { background: var(--ml-card-bg) !important; }

/* Dark mode: stock badges */
body.dark-mode .stock-badge { color: var(--ml-text-secondary) !important; }
body.dark-mode .stock-disponible { background: rgba(46,125,50,0.2) !important; color: #66bb6a !important; }
body.dark-mode .stock-bajo { background: rgba(230,81,0,0.2) !important; color: #ffa726 !important; }
body.dark-mode .stock-sin-stock { background: rgba(198,40,40,0.15) !important; color: #ef5350 !important; }

/* Dark mode: mobile filter trigger & modal */
body.dark-mode .mobile-filter-trigger {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .filter-modal-overlay { background: rgba(0,0,0,0.6) !important; }
body.dark-mode .filter-modal {
    background: var(--ml-card-bg) !important;
}
body.dark-mode .filter-modal-header {
    border-bottom-color: var(--ml-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .filter-modal-body {
    background: var(--ml-bg) !important;
}
body.dark-mode .filter-modal-section-title { color: var(--ml-text) !important; }
body.dark-mode .filter-modal-footer {
    border-top-color: var(--ml-border) !important;
    background: var(--ml-card-bg) !important;
}
body.dark-mode .filter-modal-clear {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-border) !important;
    color: var(--ml-text-secondary) !important;
}

/* Dark mode: precio description */
body.dark-mode .precio-desc { color: var(--ml-text-muted) !important; }
body.dark-mode .precio-anterior { color: var(--ml-text-muted) !important; }

/* Dark mode: image placeholder */
body.dark-mode .producto-imagen,
body.dark-mode .producto-item-imagen {
    background: var(--ml-input-bg) !important;
}

/* Dark mode: producto content area */
body.dark-mode .producto-content { background: var(--ml-card-bg) !important; }
body.dark-mode .producto-meta { color: var(--ml-text-muted) !important; }

/* Dark mode: btn-agregar (mantener oscuro en light, aclarar en dark) */
body.dark-mode .btn-agregar.activo {
    background: #555 !important;
    color: #fff !important;
}
body.dark-mode .btn-agregar.activo:hover {
    background: #666 !important;
}
body.dark-mode .btn-agregar.deshabilitado {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text-muted) !important;
}
body.dark-mode .btn-agregar-mini.activo {
    background: #555 !important;
    color: #fff !important;
}
body.dark-mode .btn-agregar-mini.activo:hover {
    background: #666 !important;
}

/* Dark mode: header cart icon */
body.dark-mode .header-cart-icon {
    background: #555 !important;
}
body.dark-mode .header-cart-icon:hover {
    background: #666 !important;
}

/* Dark mode: user avatar */
body.dark-mode .header-user-avatar {
    background: #555 !important;
}

/* Dark mode: view type buttons */
body.dark-mode .ui.icon.buttons .button,
body.dark-mode .view_type .button {
    background: var(--ml-card-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .view_type .button.primary {
    background: #555 !important;
    color: #fff !important;
}

/* Dark mode: dimmer/loader */
body.dark-mode .ui.inverted.dimmer {
    background: rgba(0,0,0,0.7) !important;
}

/* Dark mode: minicart */
body.dark-mode .minicart-popup {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}

/* Dark mode: quick order */
body.dark-mode .quick-order__search { background: var(--ml-input-bg) !important; border-color: var(--ml-input-border) !important; color: var(--ml-text) !important; }
body.dark-mode .quick-order__results { background: var(--ml-card-bg) !important; border-color: var(--ml-border) !important; }
body.dark-mode .quick-order__result-item:hover { background: var(--ml-hover-bg) !important; }
body.dark-mode .quick-order__result-name { color: var(--ml-text) !important; }
body.dark-mode .quick-order__result-code { color: var(--ml-text-muted) !important; }
body.dark-mode .quick-order__result-price { color: var(--ml-text) !important; }
body.dark-mode .quick-order__qty { background: var(--ml-input-bg) !important; border-color: var(--ml-input-border) !important; color: var(--ml-text) !important; }

/* Dark mode: tables (pedidos, ctacte, facturas) */
body.dark-mode .ui.table { background: var(--ml-card-bg) !important; color: var(--ml-text) !important; }
body.dark-mode .ui.table thead th { background: var(--ml-input-bg) !important; color: var(--ml-text) !important; border-bottom-color: var(--ml-border) !important; }
body.dark-mode .ui.table td { border-top-color: var(--ml-border) !important; }
body.dark-mode .ui.table tr:hover td { background: var(--ml-hover-bg) !important; }
body.dark-mode .ui.celled.table tr td { border-left-color: var(--ml-border) !important; }

/* Dark mode: confirmar pedido */
body.dark-mode .confirmar-section { background: var(--ml-card-bg) !important; border-color: var(--ml-border) !important; }
body.dark-mode .confirmar-title { color: var(--ml-text) !important; }

/* Dark mode: volume pricing table */
body.dark-mode .pdp__vol-table th { background: var(--ml-input-bg) !important; color: var(--ml-text-secondary) !important; border-color: var(--ml-border) !important; }
body.dark-mode .pdp__vol-table td { border-color: var(--ml-border) !important; color: var(--ml-text) !important; }

/* Dark mode: scrollbar */
body.dark-mode ::-webkit-scrollbar { width: 8px; }
body.dark-mode ::-webkit-scrollbar-track { background: var(--ml-bg); }
body.dark-mode ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #666; }

/* Dark mode: general headings and text */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5 {
    color: var(--ml-text) !important;
}
body.dark-mode .ui.header { color: var(--ml-text) !important; }
body.dark-mode a { color: #4da6ff; }
body.dark-mode .cart-back-link { color: var(--ml-text-secondary) !important; }
body.dark-mode .cart-back-link:hover { color: var(--ml-text) !important; }

/* Dark mode: Semantic UI grid */
body.dark-mode .ui.grid { color: var(--ml-text); }
body.dark-mode .ui.grid .column { color: var(--ml-text); }

/* Dark mode: Semantic UI striped table */
body.dark-mode .ui.striped.table tbody tr:nth-child(2n) {
    background: var(--ml-input-bg) !important;
}
body.dark-mode .ui.table.negative tr, body.dark-mode .ui.table tr.negative {
    background: rgba(198,40,40,0.15) !important;
    color: #ef5350 !important;
}

/* Dark mode: Semantic UI buttons */
body.dark-mode .ui.button {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .ui.primary.button {
    background: #555 !important;
    color: #fff !important;
}
body.dark-mode .ui.basic.button {
    background: transparent !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
    box-shadow: none !important;
}

/* Dark mode: historial pedidos cards */
body.dark-mode .pedido-card,
body.dark-mode .order-card {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .pedido-status,
body.dark-mode .order-status { color: var(--ml-text-secondary) !important; }
body.dark-mode .pedido-total,
body.dark-mode .order-total { color: var(--ml-precio) !important; }

/* Dark mode: confirmar pedido */
body.dark-mode .confirmar-pedido-card {
    background: var(--ml-card-bg) !important;
    border-color: var(--ml-border) !important;
}

/* Dark mode: messages */
body.dark-mode .ui.message {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
    box-shadow: none !important;
}
body.dark-mode .ui.info.message {
    background: rgba(33,133,208,0.1) !important;
    color: #4da6ff !important;
}
body.dark-mode .ui.success.message {
    background: rgba(46,125,50,0.15) !important;
    color: #66bb6a !important;
}
body.dark-mode .ui.warning.message {
    background: rgba(230,81,0,0.15) !important;
    color: #ffa726 !important;
}
body.dark-mode .ui.error.message {
    background: rgba(198,40,40,0.15) !important;
    color: #ef5350 !important;
}

/* Dark mode: labels */
body.dark-mode .ui.label {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
}

/* Dark mode: cart items special states */
body.dark-mode .cart-item--error {
    background: rgba(198,40,40,0.1) !important;
}
body.dark-mode .cart-item--bonus {
    background: rgba(46,125,50,0.1) !important;
}
body.dark-mode .cart-item-warning {
    background: rgba(230,81,0,0.15) !important;
    color: #ffa726 !important;
}
body.dark-mode .cart-item-noimg {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text-muted) !important;
}

/* Dark mode: cart summary card internals */
body.dark-mode .cart-summary-coupon .ui.input input {
    background: var(--ml-input-bg) !important;
    border-color: var(--ml-input-border) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .cart-summary-coupon .ui.button {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
}
body.dark-mode .cart-summary-warning {
    background: rgba(230,81,0,0.15) !important;
    color: #ffa726 !important;
}
body.dark-mode .cart__min-order {
    background: rgba(230,81,0,0.1) !important;
    border-color: rgba(230,81,0,0.3) !important;
}
body.dark-mode .cart__min-order--reached {
    background: rgba(46,125,50,0.1) !important;
    border-color: rgba(46,125,50,0.3) !important;
}
body.dark-mode .cart-summary-btn--primary {
    background: #555 !important;
    color: #fff !important;
}
body.dark-mode .cart-summary-btn--primary:hover {
    background: #666 !important;
}
body.dark-mode .cart-summary-btn--secondary {
    background: transparent !important;
    color: var(--ml-text-secondary) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .cart-summary-btn--disabled {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text-muted) !important;
}

/* Dark mode: payment method buttons */
body.dark-mode .metodo-pago-btn,
body.dark-mode .carrito-metodo-pago {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
    border-color: var(--ml-border) !important;
}
body.dark-mode .metodo-pago-btn.active {
    border-color: #4da6ff !important;
}
body.dark-mode .mp-info {
    background: rgba(33,133,208,0.1) !important;
    color: #4da6ff !important;
}

/* Dark mode: guest banner in cart */
body.dark-mode .cart-guest-banner {
    background: var(--ml-input-bg) !important;
    color: var(--ml-text) !important;
}

/* Dark mode: theme toggle button */
.theme-toggle {
    cursor: pointer;
    padding: 8px 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle i.icon {
    font-size: 1.15em !important;
    margin: 0 !important;
    transition: transform 0.3s ease;
}
body.dark-mode .theme-toggle i.icon {
    transform: rotate(180deg);
}

/* ===== FONDO GENERAL ===== */
body {
    background: var(--ml-bg);
}
#main {
    background: transparent;
    padding: 16px 24px;
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== HEADER / NAVBAR ===== */
#menu .ui.label {
    background: var(--ml-primary);
}

/* ===== BARRA TOTAL PEDIDO ===== */
.ui.visibility.order_info {
    margin-bottom: 16px;
}

.ui.visibility.order_info .ui.segments {
    border: 1px solid rgba(0,0,0,.04);
    border-radius: var(--ml-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    background: var(--ml-white);
}

.ui.visibility.order_info .ui.segment {
    border: none !important;
    background: var(--ml-white) !important;
}

.ui.visibility.order_info .order_amount {
    color: var(--ml-text);
    font-size: 1.4em;
    font-weight: 600;
}

/* ===== BARRA DE FILTROS ===== */
#main > .ui.stackable.menu {
    background: var(--ml-white);
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border-radius: var(--ml-radius);
    margin-bottom: 16px;
    padding: 8px;
}

#main > .ui.stackable.menu > .item::before {
    display: none;
}

#main > .ui.stackable.menu .ui.dropdown {
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius);
}

#main > .ui.stackable.menu .ui.dropdown:hover,
#main > .ui.stackable.menu .ui.dropdown.active {
    border-color: var(--ml-text);
}

/* Botón Ofertas */
#main .filter_oferta.ui.button {
    background: var(--ml-white);
    border: 1px solid var(--ml-border);
    color: var(--ml-text);
    border-radius: var(--ml-radius);
}

#main .filter_oferta.ui.button:hover {
    background: #f5f5f5;
}

#main .filter_oferta.ui.primary.button {
    background: var(--ml-success) !important;
    border-color: var(--ml-success) !important;
    color: var(--ml-white) !important;
}

/* Botones vista grilla/lista */
#main .view_type .ui.button {
    background: var(--ml-white);
    color: var(--ml-text-light);
}

#main .view_type .ui.primary.button {
    background: var(--ml-primary) !important;
    color: var(--ml-white) !important;
}

/* ===== LISTA DE PRODUCTOS ===== */
#main .ui.divided.items {
    background: var(--ml-white);
    border-radius: var(--ml-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.04);
    margin: 0;
    padding-top: 8px;
}

#main .ui.divided.items > .item {
    padding: 16px 20px;
    margin: 0;
    border-bottom: 1px solid #eee;
}

#main .ui.divided.items > .item:first-child {
    padding-top: 24px;
}

#main .ui.divided.items > .item:last-child {
    border-bottom: none;
}

#main .ui.divided.items > .item:hover {
    background: #fafafa;
}

/* Imagen producto lista */
#main .ui.items > .item > .image {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex-shrink: 0;
}

#main .ui.items > .item > .image img {
    border-radius: var(--ml-radius);
    border: 1px solid #eee !important;
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
}

/* Título producto */
#main .ui.items > .item > .content > .header,
#main .ui.items > .item > .content > .left.floated.header {
    font-size: 16px;
    font-weight: 600;
    color: var(--ml-text);
    margin-top: 0;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
    width: fit-content;
    display: block;
    float: none !important;
    clear: both;
}

#main .ui.items > .item > .content > .header:hover {
    color: var(--ml-primary);
}

/* Contenido del item - evitar desborde */
#main .ui.items > .item > .content {
    overflow: hidden;
    position: relative;
    padding-top: 0 !important;
}

/* Meta info */
#main .ui.items > .item > .content > .meta {
    color: var(--ml-text-light);
    font-size: 14px;
}

/* Badge oferta/promocion en lista - respeta colores de Semantic UI */
#main .ui.items .ui.horizontal.label {
    border: none !important;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    display: inline-block !important;
    visibility: visible !important;
}

/* Badge de promoción en lista - base */
#main .ui.items .promo-badge-list {
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 0.5em;
}

/* Tag en lista - con punta */
#main .ui.items .ui.tag.label.promo-badge-list {
    margin-left: 1.5em !important;
}

/* Ribbon en lista - borde especial */
#main .ui.items .ui.ribbon.label.promo-badge-list {
    border-radius: 0 3px 3px 0 !important;
}

/* Circular en lista - círculo perfecto */
#main .ui.items .ui.circular.label.promo-badge-list {
    border-radius: 50% !important;
    min-width: 2em !important;
    min-height: 2em !important;
    padding: 0.5em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Precio - quitar la flecha pointing */
#main .ui.items .ui.basic.label,
#main .ui.items .ui.basic.right.pointing.label {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--ml-text) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 12px 0 0 !important;
}

#main .ui.items .ui.basic.right.pointing.label:before {
    display: none !important;
}

/* Left labeled button - alinear precio y botón */
#main .ui.items .ui.left.labeled.button {
    display: flex !important;
    align-items: center;
    flex-direction: row;
}

#main .ui.items .ui.left.labeled.button > .label {
    border-radius: 0 !important;
}

#main .ui.items .ui.left.labeled.button > .button {
    border-radius: var(--ml-radius) !important;
}

/* Precio tachado */
#main .ui.items .right.floated s,
#main .ui.items s {
    color: var(--ml-text-light);
    font-size: 14px;
}

/* Precio con descuento */
#main .ui.items .price,
#main span.price {
    color: var(--ml-text);
    font-size: 24px;
    font-weight: 400;
}

/* Botón agregar carrito */
#main .ui.items .ui.teal.button,
#main .ui.items .ui.teal.icon.button {
    background: var(--ml-primary) !important;
    border-radius: var(--ml-radius) !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

#main .ui.items .ui.teal.button:hover {
    background: var(--ml-primary-dark) !important;
    transform: translateY(-1px);
}

/* Botón cotizar */
#main .ui.items .request_price,
#main .ui.items .ui.orange.button {
    background: var(--ml-warning) !important;
    font-weight: 500;
}

/* Botón deshabilitado */
#main .ui.items .ui.disabled.button {
    opacity: 0.5 !important;
}

/* ===== GRILLA DE PRODUCTOS ===== */
#main .ui.card {
    border-radius: var(--ml-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.04);
    margin: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    background: var(--ml-white);
}

#main .ui.card:hover {
    box-shadow: var(--ml-shadow-hover);
    transform: translateY(-4px);
    border-color: transparent;
}

#main .ui.card > .image {
    background: var(--ml-white);
    border-radius: var(--ml-radius) var(--ml-radius) 0 0;
    overflow: visible !important; /* Permitir que ribbon/labels sobresalgan */
}

/* Badge de promoción - posición base */
#main .ui.card .promo-badge {
    position: absolute !important;
    z-index: 10;
}

/* Ribbon - esquina superior izquierda */
#main .ui.card .ui.ribbon.label {
    font-weight: 600;
    top: 1em !important;
    left: -14px !important;
    margin: 0 !important;
}

/* Tag label */
#main .ui.card .ui.tag.label {
    top: 1em !important;
    left: 1em !important;
}

/* Label simple */
#main .ui.card .ui.label:not(.ribbon):not(.tag):not(.circular) {
    top: 0.5em !important;
    left: 0.5em !important;
}

/* Circular */
#main .ui.card .ui.circular.label {
    top: 0.5em !important;
    left: 0.5em !important;
}

/* Asegurar que el card permita que el ribbon sobresalga */
#main .ui.card {
    overflow: visible !important;
}

#main .ui.card > .content {
    padding: 12px;
}

#main .ui.card > .content > .header {
    font-size: 14px;
    font-weight: 400;
    color: var(--ml-text);
    line-height: 1.3;
}

#main .ui.card > .extra.content {
    border-top: 1px solid #eee;
    padding: 12px;
}

#main .ui.card .price {
    font-size: 20px;
    font-weight: 400;
    color: var(--ml-text);
}

#main .ui.card > .teal.button,
#main .ui.card > .ui.teal.button {
    background: var(--ml-primary) !important;
    border-radius: 0 0 var(--ml-radius) var(--ml-radius);
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

#main .ui.card > .teal.button:hover,
#main .ui.card > .ui.teal.button:hover {
    background: var(--ml-primary-dark) !important;
}

#main .ui.card > .orange.button,
#main .ui.card > .ui.orange.button {
    background: var(--ml-warning) !important;
    font-weight: 500;
}

/* ===== PAGINACIÓN ===== */
.ui.pagination.menu {
    background: var(--ml-white);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.04);
    border-radius: var(--ml-radius);
}

.ui.pagination.menu .item {
    color: var(--ml-text);
}

.ui.pagination.menu .active.item {
    background: var(--ml-primary) !important;
    color: var(--ml-white) !important;
}

.ui.pagination.menu .disabled.item {
    color: var(--ml-text-light) !important;
}

/* ===== PRECIO INFO ===== */
.price_desc {
    color: var(--ml-text-light);
    font-size: 12px;
}

/* ===== ENVÍO GRATIS BADGE ===== */
.envio-gratis {
    color: var(--ml-success);
    font-size: 14px;
    font-weight: 600;
}

/* ===== PDP - Badge de Promoción ===== */
.pdp__image-inner {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.pdp__image-inner .pdp__image {
    display: block;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.pdp-promo-badge {
    position: absolute !important;
    z-index: 10;
}

/* Ribbon en PDP - esquina izquierda */
.pdp__image-inner .ui.ribbon.label.pdp-promo-badge {
    top: 15px !important;
    left: -14px !important;
    margin: 0 !important;
}

/* Tag label en PDP */
.pdp__image-inner .ui.tag.label.pdp-promo-badge {
    top: 15px !important;
    left: 15px !important;
}

/* Label simple en PDP */
.pdp__image-inner .ui.label.pdp-promo-badge:not(.ribbon):not(.tag):not(.circular) {
    top: 15px !important;
    left: 15px !important;
}

/* Circular en PDP */
.pdp__image-inner .ui.circular.label.pdp-promo-badge {
    top: 15px !important;
    left: 15px !important;
}

/* ================================================
   PRODUCTOS RELACIONADOS - Carrusel
   ================================================ */

.pdp__related {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--ml-border);
}

.pdp__related-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--ml-text);
    margin: 0 0 20px 0;
}

.pdp__related-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdp__related-nav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ml-border);
    background: var(--ml-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ml-text);
    transition: all 0.2s ease;
    z-index: 2;
}

.pdp__related-nav:hover {
    background: var(--ml-bg);
    border-color: var(--ml-text);
}

.pdp__related-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pdp__related-nav i.icon {
    margin: 0;
    font-size: 14px;
}

.pdp__related-track-wrapper {
    flex: 1;
    overflow: hidden;
}

.pdp__related-track {
    display: flex;
    gap: 16px;
    transition: transform 0.4s ease;
}

.pdp__related-item {
    flex: 0 0 calc(25% - 12px);
    min-width: 180px;
    max-width: 220px;
    background: var(--ml-white);
    border-radius: var(--ml-radius);
    border: 1px solid rgba(0,0,0,.04);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pdp__related-item:hover {
    box-shadow: var(--ml-shadow-hover);
    transform: translateY(-4px);
    border-color: transparent;
}

.pdp__related-item-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #fafafa;
}

.pdp__related-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pdp__related-item:hover .pdp__related-item-image img {
    transform: scale(1.05);
}

.pdp__related-item-info {
    padding: 12px;
}

.pdp__related-item-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--ml-text);
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
}

.pdp__related-item-meta {
    font-size: 11px;
    color: var(--ml-text-light);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdp__related-item-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--ml-text);
}

/* Responsive */
@media (max-width: 991px) {
    .pdp__related-item {
        flex: 0 0 calc(33.333% - 11px);
    }
}

@media (max-width: 767px) {
    .pdp__related-item {
        flex: 0 0 calc(50% - 8px);
        min-width: 140px;
    }

    .pdp__related-nav {
        width: 32px;
        height: 32px;
    }

    .pdp__related-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .pdp__related-item {
        flex: 0 0 calc(100% - 0px);
        max-width: none;
    }

    .pdp__related-nav {
        display: none;
    }

    .pdp__related-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .pdp__related-item {
        scroll-snap-align: start;
        flex: 0 0 70%;
    }
}

/* ================================================
   PROMOCIONES PAGE - Tema Minimalista (estilo Login)
   ================================================ */

.promociones-page {
    padding: 40px 0;
    min-height: 60vh;
}

/* Header */
.promociones-header {
    text-align: center;
    margin-bottom: 40px;
}

.promociones-title {
    color: #111 !important;
    font-size: 1.8em !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0.5px;
}

.promociones-subtitle {
    color: #888 !important;
    font-size: 14px !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Cards de promocion */
.promocion-card {
    background: #fff;
    border-radius: 8px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.promocion-card:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Volumen pricing cards */
.volumen-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background: linear-gradient(135deg, #065f46, #059669);
    color: #fff;
}
.volumen-card-header > i.icon {
    font-size: 1.4em;
    opacity: 0.8;
}
.volumen-card-scope {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}
.volumen-card-name {
    font-size: 1.1em;
    font-weight: 600;
}
.volumen-card-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.volumen-card-table thead th {
    text-align: left;
    padding: 10px 24px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
}
.volumen-card-table tbody td {
    padding: 12px 24px;
    border-bottom: 1px solid #f5f5f5;
}
.volumen-card-table tbody tr:last-child td {
    border-bottom: none;
}
.volumen-card-table tbody tr:hover {
    background: #f0fdf4;
}
.volumen-card-discount {
    color: #16A34A;
    font-weight: 700;
    font-size: 15px;
}

/* Badge del beneficio */
.promocion-badge {
    background: #111;
    color: #fff;
    padding: 18px 24px;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.promocion-badge i.icon {
    margin-right: 8px;
}

/* Contenido principal */
.promocion-content {
    padding: 24px;
}

.promocion-nombre {
    color: #111 !important;
    font-size: 1.2em !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

.promocion-descripcion {
    color: #666;
    font-size: 14px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.promocion-aplicacion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #333;
    font-size: 14px;
    background: #fafafa;
    padding: 12px 16px;
    border-radius: 6px;
    border-left: 3px solid #111;
}

.promocion-aplicacion i.icon {
    color: #111;
    margin-top: 2px;
}

/* Footer con etiqueta */
.promocion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.promocion-etiqueta-label {
    color: #888;
    font-size: 13px;
}

.promocion-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Colores de etiquetas - manteniendo compatibilidad con badge_color */
.promocion-etiqueta.red {
    background: #fff5f5;
    color: #c0392b;
    border: 1px solid #e74c3c;
}

.promocion-etiqueta.orange {
    background: #fff8f0;
    color: #d35400;
    border: 1px solid #e67e22;
}

.promocion-etiqueta.yellow {
    background: #fffdf0;
    color: #b7950b;
    border: 1px solid #f1c40f;
}

.promocion-etiqueta.olive {
    background: #f8faf0;
    color: #6b7a2e;
    border: 1px solid #b5cc18;
}

.promocion-etiqueta.green {
    background: #f0faf5;
    color: #1e8449;
    border: 1px solid #27ae60;
}

.promocion-etiqueta.teal {
    background: #f0fafa;
    color: #148f77;
    border: 1px solid #1abc9c;
}

.promocion-etiqueta.blue {
    background: #f0f5fa;
    color: #2874a6;
    border: 1px solid #3498db;
}

.promocion-etiqueta.violet {
    background: #f5f0fa;
    color: #6c3483;
    border: 1px solid #9b59b6;
}

.promocion-etiqueta.purple {
    background: #f8f0fa;
    color: #76448a;
    border: 1px solid #a569bd;
}

.promocion-etiqueta.pink {
    background: #faf0f5;
    color: #a64d79;
    border: 1px solid #e91e63;
}

.promocion-etiqueta.brown {
    background: #faf5f0;
    color: #6e4c3e;
    border: 1px solid #a1887f;
}

.promocion-etiqueta.grey,
.promocion-etiqueta.gray {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #999;
}

.promocion-etiqueta.black {
    background: #111;
    color: #fff;
    border: 1px solid #111;
}

/* Condicion de la promocion */
.promocion-condicion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 13px;
}

.promocion-condicion i.icon {
    color: #888;
}

/* Estado vacio */
.promociones-empty {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 60px 40px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.promociones-empty-icon {
    width: 80px;
    height: 80px;
    background: #fafafa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

.promociones-empty-icon i.icon {
    font-size: 32px;
    color: #ccc;
    margin: 0;
}

.promociones-empty-title {
    color: #111 !important;
    font-size: 1.3em !important;
    font-weight: 600 !important;
    margin: 0 0 12px 0 !important;
}

.promociones-empty-text {
    color: #888;
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 767px) {
    .promociones-page {
        padding: 24px 0;
    }

    .promociones-header {
        margin-bottom: 24px;
    }

    .promociones-title {
        font-size: 1.5em !important;
    }

    .promocion-badge {
        padding: 14px 18px;
        font-size: 1em;
    }

    .promocion-content {
        padding: 18px;
    }

    .promocion-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 18px;
    }

    .promociones-empty {
        padding: 40px 24px;
    }
}

@media (max-width: 480px) {
    .promociones-title {
        font-size: 1.3em !important;
    }

    .promocion-nombre {
        font-size: 1.1em !important;
    }

    .promocion-aplicacion {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* ================================================
   FILTROS UX MEJORADOS - Fases 1, 2 y 3
   ================================================ */

/* === FASE 1: CONTRASTE MEJORADO === */

/* Placeholders con mejor contraste (WCAG AA) */
.menu-filtros .ui.dropdown .default.text,
.menu-filtros .ui.dropdown > .text:empty + .default.text,
.menu-filtros select option[value=""] {
    color: #666666 !important;
}

/* Botones de filtro con mejor contraste cuando inactivos */
.menu-filtros .ui.button:not(.primary):not(.green) {
    background: #fff;
    border: 1px solid #ccc;
    color: #444;
}

.menu-filtros .ui.button:not(.primary):not(.green):hover {
    background: #f5f5f5;
    border-color: #999;
    color: #222;
}

/* Botones Ofertas/Promociones activos - verde consistente */
.menu-filtros .filter_oferta.ui.primary.button,
.menu-filtros .filter_promocion.ui.green.button {
    background: #22C55E !important;
    border-color: #16A34A !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.menu-filtros .filter_oferta.ui.primary.button:hover,
.menu-filtros .filter_promocion.ui.green.button:hover {
    background: #16A34A !important;
}

/* Dropdown con estado seleccionado visible */
.menu-filtros .ui.dropdown.has-value .text {
    font-weight: 500;
    color: #111;
}

/* === FASE 2: ESTRUCTURA REORGANIZADA === */

/* Contenedor principal de filtros - layout flexible */
.menu-filtros {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
}

.menu-filtros > .item {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
}

.menu-filtros > .item::before {
    display: none !important;
}

/* Separador visual entre grupos */
.menu-filtros .filter-separator {
    width: 1px;
    height: 28px;
    background: #e0e0e0;
    margin: 0 8px;
}

/* Grupo de botones toggle (Ofertas/Promociones) */
.menu-filtros .filter-toggles {
    display: flex;
    gap: 8px;
}

/* Grupo de ordenamiento y vista */
.menu-filtros .right.menu {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* === FASE 2: MODAL DE FILTROS EN MOVIL === */

/* Boton que abre el modal en movil */
.mobile-filter-trigger {
    display: none;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}

.mobile-filter-trigger:hover {
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mobile-filter-trigger i.icon {
    margin-right: 8px;
}

.mobile-filter-trigger .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: #22C55E;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    padding: 0 6px;
}

/* Modal overlay */
.filter-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-modal-overlay.visible {
    display: block;
    opacity: 1;
}

/* Modal de filtros */
.filter-modal {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.filter-modal.visible {
    display: block;
    transform: translateY(0);
}

.filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.filter-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.filter-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
}

.filter-modal-close:hover {
    background: #eee;
    color: #111;
}

.filter-modal-close i.icon {
    font-size: 16px;
    margin: 0;
}

.filter-modal-body {
    padding: 20px;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.filter-modal-group {
    margin-bottom: 20px;
}

.filter-modal-group:last-child {
    margin-bottom: 0;
}

.filter-modal-group-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.filter-modal-group .ui.dropdown,
.filter-modal-group .ui.selection.dropdown {
    width: 100% !important;
}

.filter-modal-toggles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-modal-toggles .ui.button {
    flex: 1;
    min-width: 120px;
}

.filter-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.filter-modal-footer .ui.button {
    flex: 1;
}

.filter-modal-apply {
    background: #111 !important;
    color: #fff !important;
}

.filter-modal-clear {
    background: #fff !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
}

/* Mostrar boton y modal solo en movil */
@media (max-width: 768px) {
    .mobile-filter-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ocultar menu de filtros en desktop cuando hay modal */
    .menu-filtros.mobile-hidden {
        display: none !important;
    }

    /* En movil, solo mostrar ordenamiento y vista, ocultar filtros */
    .menu-filtros > .item:not(.filter-sort):not(.filter-view) {
        display: none !important;
    }

    .menu-filtros > .right.menu {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* === FASE 3: FEEDBACK VISUAL MEJORADO === */

/* Dropdown muestra valor seleccionado */
.menu-filtros .ui.dropdown .text.filtered,
.menu-filtros .ui.dropdown.active .text {
    font-weight: 500;
}

/* Indicador visual de filtro activo en dropdown */
.menu-filtros .ui.dropdown.filter-active {
    border-color: #22C55E !important;
    background: #f0fdf4 !important;
}

.menu-filtros .ui.dropdown.filter-active .text {
    color: #16A34A !important;
    font-weight: 500;
}

/* === FASE 3: ANIMACIONES SUAVES === */

/* Transiciones suaves en botones */
.menu-filtros .ui.button {
    transition: all 0.2s ease !important;
}

/* Transicion suave en dropdowns */
.menu-filtros .ui.dropdown {
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.menu-filtros .ui.dropdown:hover {
    border-color: #999 !important;
}

.menu-filtros .ui.dropdown.active {
    border-color: #111 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Animacion suave para menu desplegable */
.menu-filtros .ui.dropdown .menu {
    transform-origin: top center;
    animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Feedback visual al hacer hover en items del dropdown */
.menu-filtros .ui.dropdown .menu > .item {
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.menu-filtros .ui.dropdown .menu > .item:hover {
    background: #f5f5f5 !important;
}

.menu-filtros .ui.dropdown .menu > .item.selected,
.menu-filtros .ui.dropdown .menu > .item.active {
    background: #e8f5e9 !important;
    color: #16A34A !important;
    font-weight: 500;
}

/* Efecto ripple suave en botones */
.menu-filtros .ui.button:active {
    transform: scale(0.98);
}

/* Vista toggle buttons animation */
.menu-filtros .view_type .ui.button {
    transition: all 0.2s ease !important;
}

.menu-filtros .view_type .ui.button.primary {
    transform: scale(1.05);
}

/* Pulsacion suave en boton activo */
@keyframes pulseActive {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
    }
}

.menu-filtros .filter_oferta.ui.primary.button,
.menu-filtros .filter_promocion.ui.green.button {
    animation: pulseActive 2s ease-in-out infinite;
}

/* Desactivar animacion cuando no hay mouse (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
    .menu-filtros .ui.button,
    .menu-filtros .ui.dropdown,
    .menu-filtros .ui.dropdown .menu,
    .active-filters-container,
    .filter-chip,
    .filter-modal,
    .filter-modal-overlay {
        animation: none !important;
        transition: none !important;
    }
}

/* ================================================
   CARRITO Y CHECKOUT - Estética moderna
   ================================================ */

/* Card de item del carrito */

/* Botón fijo "Volver a la lista" por encima del header */
.back_to_list[style*="position: fixed"],
.back_to_list[style*="position:fixed"] {
    z-index: 102 !important;
}

/* ================================================
   MINICART POPUP
   ================================================ */
.minicart-popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 1001;
    overflow: hidden;
}
.minicart-popup::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0,0,0,0.05);
}
.shopping_cart:hover .minicart-popup,
.minicart-popup.minicart-show {
    display: block;
}
.minicart-empty {
    padding: 32px 16px;
    text-align: center;
    color: #999;
}
.minicart-empty i.icon {
    font-size: 2em;
    margin-bottom: 8px;
    display: block;
}
.minicart-empty p {
    margin: 0;
    font-size: 0.9em;
}
.minicart-items {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}
.minicart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    transition: background 0.15s;
}
.minicart-item:hover {
    background: #f9f9f9;
}
.minicart-item-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.minicart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.minicart-item-img i.icon {
    color: #ccc;
    margin: 0;
}
.minicart-item-info {
    flex: 1;
    min-width: 0;
}
.minicart-item-name {
    font-size: 0.85em;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.minicart-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}
.minicart-item-qty {
    font-size: 0.8em;
    color: #888;
}
.minicart-item-price {
    font-size: 0.85em;
    font-weight: 600;
    color: #111;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}
.minicart-item-vol {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75em;
    margin-top: 2px;
    padding-left: 2px;
}
.minicart-vol-base {
    color: #999;
    text-decoration: line-through;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}
.minicart-vol-price {
    color: #16A34A;
    font-weight: 600;
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}
.minicart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    font-weight: 700;
    font-size: 0.95em;
    color: #111;
}
.minicart-total span:last-child {
    font-family: 'SF Mono', 'Roboto Mono', monospace;
}
.minicart-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}
.minicart-btn.ui.button {
    flex: 1;
    font-size: 0.85em !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    text-align: center;
}
.minicart-btn-cart.ui.button {
    background: #f5f5f5 !important;
    color: #333 !important;
}
.minicart-btn-cart.ui.button:hover {
    background: #eee !important;
}
.minicart-btn-buy.ui.button {
    background: #111 !important;
    color: #fff !important;
}
.minicart-btn-buy.ui.button:hover {
    background: #333 !important;
}

/* Mobile: ocultar minicart popup */
@media (max-width: 767px) {
    .minicart-popup {
        display: none !important;
    }
}

/* ================================================
   CARRITO CARDS
   ================================================ */
/* ===== CARRITO - ESTILO ELIT ===== */

/* Page container */
.cart-page {
    padding: 0;
}
.cart-page-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.cart-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}
.cart-back-link:hover {
    color: #111;
}
.cart-back-link i.icon {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1 !important;
    height: auto !important;
}
.cart-page-title {
    font-size: 1.6em;
    font-weight: 700;
    color: #111;
    margin: 0 0 16px;
}

/* Layout 2 columnas */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

/* Card de items */
.cart-items-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
}

/* Cada item */
.cart-item {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.cart-item:last-child {
    border-bottom: none;
}
.cart-item--error {
    background: #fff8f8;
}
.cart-item--bonus {
    background: #f0fff4;
}

/* Imagen */
.cart-item-img {
    width: 72px;
    height: 72px;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cart-item-noimg {
    color: #ccc;
    font-size: 24px;
}

/* Info */
.cart-item-info {
    min-width: 0;
}
.cart-item-name {
    font-size: 14px;
    font-weight: 500;
    color: #111;
    line-height: 1.4;
}
.cart-item-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #00a650;
    margin-top: 4px;
}
.cart-stock-dot {
    width: 8px;
    height: 8px;
    background: #00a650;
    border-radius: 50%;
    display: inline-block;
}

/* Cantidad */
.cart-item-qty {
    min-width: 80px;
    text-align: center;
}

/* Precios + eliminar */
.cart-item-prices {
    text-align: center;
    min-width: 100px;
}
.cart-item-unit {
    font-size: 13px;
    color: #666;
}
.cart-item-delete {
    font-size: 12px;
    color: #999;
    cursor: pointer;
    margin-top: 4px;
    transition: color 0.2s;
}
.cart-item-delete:hover {
    color: #e53935;
}
.cart-item-delete i.icon {
    font-size: 12px !important;
    margin: 0 2px 0 0 !important;
}

/* Subtotal */
.cart-item-subtotal {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    text-align: right;
    min-width: 110px;
}

/* Warning */
.cart-item-warning {
    grid-column: 1 / -1;
    font-size: 0.85em;
    color: #e65100;
    background: #fff3e0;
    padding: 8px 12px;
    border-radius: 6px;
}

/* Badge gratis */
.cart-badge-free {
    display: inline-block;
    background: #21ba45;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===== RESUMEN (sidebar derecho) ===== */
.cart-summary-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 80px;
}
.cart-summary-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #111;
    margin: 0 0 16px;
}
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f5f5f5;
}
.cart-summary-row:last-of-type {
    border-bottom: none;
}
.cart-summary-row--discount {
    color: #21ba45;
}
.cart-summary-row--total {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 2px solid #eee;
    border-bottom: none;
}

/* Cupón */
.cart-summary-coupon {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* Warning monto mínimo */
.cart-summary-warning {
    margin-top: 16px;
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 6px;
    padding: 10px 14px;
    color: #e65100;
    font-size: 0.85em;
    line-height: 1.4;
}

/* Método de pago en resumen */
.cart-summary-payment {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.cart-summary-payment .carrito-metodo-pago {
    padding: 10px 14px;
    font-size: 0.9em;
}

/* Botones resumen */
.cart-summary-btn {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    margin-top: 12px;
}
.cart-summary-btn--primary {
    background: #ff6900;
    color: #fff;
}
.cart-summary-btn--primary:hover {
    background: #e55d00;
}
.cart-summary-btn--secondary {
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
}
.cart-summary-btn--secondary:hover {
    background: #f9f9f9;
    border-color: #bbb;
}
.cart-summary-btn--disabled {
    background: #f0f0f0 !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Sección card genérica (observaciones, forma de pago) */
.carrito-section-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 20px;
}

/* Steps breadcrumb redondeado */
.ui.steps.mini {
    border-radius: 10px !important;
    overflow: hidden;
}

/* ===== RESPONSIVE CARRITO ===== */
@media only screen and (max-width: 991px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary-card {
        position: static;
    }
}
@media only screen and (max-width: 767px) {
    .cart-page {
        padding: 12px;
    }
    .cart-page-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    .cart-items-card {
        border-radius: 10px;
    }
    .cart-item {
        display: grid;
        grid-template-columns: 1fr 50px 90px;
        grid-template-rows: auto;
        gap: 4px 8px;
        padding: 14px 16px;
        align-items: center;
    }
    /* Ocultar imagen en mobile */
    .cart-item-img {
        display: none;
    }
    /* Info: fila 1, col 1 */
    .cart-item-info {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }
    .cart-item-name {
        font-size: 13px;
        line-height: 1.3;
    }
    /* Cantidad: fila 1, col 2 - input simple */
    .cart-item-qty {
        grid-column: 2;
        grid-row: 1 / 3;
        min-width: unset;
        text-align: center;
        align-self: center;
    }
    .cart-item-qty .ui.spinner.input .ui.vertical.buttons {
        display: none;
    }
    .cart-item-qty .ui.spinner.input input {
        width: 44px;
        text-align: center;
        border-radius: 4px !important;
        padding: 6px 4px;
        font-size: 14px;
    }
    /* Precios + eliminar: fila 1, col 3 */
    .cart-item-prices {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        min-width: unset;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    .cart-item-unit {
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .cart-item-delete {
        margin-top: 0;
        font-size: 11px;
    }
    /* Subtotal: fila 2, col 3 */
    .cart-item-subtotal {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
        font-size: 16px;
        min-width: unset;
    }
    .cart-item-warning {
        grid-column: 1 / -1;
    }
    .cart-summary-card {
        padding: 16px;
        border-radius: 10px;
    }
}

/* Método de pago */
.carrito-metodo-pago {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.95em;
    transition: all 0.2s ease;
    color: #333;
}
.carrito-metodo-pago:hover {
    border-color: #111;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.carrito-metodo-pago.active {
    border-color: #111;
    background: #111;
    color: #fff;
}
.carrito-metodo-pago--mp {
    background: linear-gradient(135deg, #009ee3, #00b1ea);
    color: #fff;
    border-color: transparent;
}
.carrito-metodo-pago--mp:hover {
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0,158,227,0.3);
}
.carrito-metodo-pago--mp.active {
    background: linear-gradient(135deg, #0081b8, #009ee3);
}

/* ================================================
   HERO BANNER SLIDER (shared between productos and home)
   ================================================ */

.hero-slider-container {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f8f8;
}

.hero-slider {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.hero-slide {
    min-width: 100%;
    position: relative;
    cursor: pointer;
}

.hero-slide picture {
    display: block;
    width: 100%;
}

.hero-slide img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.hero-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

.hero-arrow i.icon {
    font-size: 18px;
    margin: 0;
}

.hero-prev {
    left: 16px;
}

.hero-next {
    right: 16px;
}

.hero-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    box-sizing: content-box;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.hero-dot.active {
    background: #fff;
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .hero-slide img {
        aspect-ratio: 2 / 1;
    }
    .hero-arrow {
        width: 36px;
        height: 36px;
    }
    .hero-arrow i.icon {
        font-size: 14px;
    }
    .hero-prev {
        left: 8px;
    }
    .hero-next {
        right: 8px;
    }
    .hero-dots {
        bottom: 8px;
        gap: 6px;
    }
    .hero-dot {
        width: 8px;
        height: 8px;
    }
}

.hero-slider-container.single-slide .hero-arrow,
.hero-slider-container.single-slide .hero-dots {
    display: none;
}

.hero-slider-container.loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider-container.loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: hero-spin 0.8s linear infinite;
}

@keyframes hero-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider {
        transition: none;
    }
    .hero-slider-container.loading::after {
        animation: none;
    }
}

/* ================================================
   PRODUCTO CARDS (Global - usado en catálogo y home)
   ================================================ */

/* === PRODUCTOS GRID === */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.producto-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.producto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Imagen */
.producto-imagen {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect ratio */
    background: #f8f8f8;
    overflow: hidden;
}
.producto-imagen img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.producto-card:hover .producto-imagen img {
    transform: scale(1.05);
}
.producto-badge-oferta {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e53935;
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}
/* Contenido */
.producto-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.producto-categoria {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.producto-nombre {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.producto-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.producto-sku {
    font-size: 11px;
    color: #999;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Stock badges */
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.stock-badge i { font-size: 11px !important; margin: 0 !important; line-height: 1 !important; height: auto !important; vertical-align: baseline !important; }
.stock-disponible {
    background: #e8f5e9;
    color: #2e7d32;
}
.stock-bajo {
    background: #fff3e0;
    color: #e65100;
}
.stock-sinstock {
    background: #ffebee;
    color: #c62828;
}

/* Precios */
.producto-precios {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.precio-anterior {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 2px;
}
.precio-actual {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    font-family: 'SF Mono', 'Monaco', monospace;
}
.precio-promo {
    color: #2e7d32 !important;
}
.precio-desc {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* Botón */
.producto-action {
    padding: 0 16px 16px;
}
.btn-agregar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-agregar i { font-size: 16px !important; margin: 0 !important; }
.btn-agregar.activo {
    background: #111;
    color: #fff;
}
.btn-agregar.activo:hover {
    background: #333;
    transform: scale(1.02);
}
.btn-agregar.activo:active {
    transform: scale(0.98);
}
.btn-agregar.variantes {
    background: #ff9800;
    color: #fff;
}
.btn-agregar.variantes:hover {
    background: #f57c00;
}
.btn-agregar.deshabilitado {
    background: #f5f5f5;
    color: #bbb;
    cursor: not-allowed;
}

/* Selector de cantidad en cards */
.producto-qty-row {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    align-items: center;
}
.producto-qty-row .btn-agregar {
    flex: 1;
    min-height: 40px;
    padding: 10px 16px;
}
.producto-qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
    flex-shrink: 0;
}
.producto-qty-btn {
    width: 32px;
    height: 40px;
    border: none;
    background: #fafafa;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.producto-qty-btn:hover {
    background: #eee;
}
.producto-qty-input {
    width: 40px;
    height: 40px;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    -moz-appearance: textfield;
    padding: 0;
}
.producto-qty-input::-webkit-outer-spin-button,
.producto-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Qty en lista */
.producto-qty-row-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}
.producto-qty-selector.mini {
    height: 36px;
}
.producto-qty-selector.mini .producto-qty-btn {
    width: 28px;
    height: 36px;
    font-size: 14px;
}
.producto-qty-selector.mini .producto-qty-input {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

/* ================================================
   HOME PAGE - Estilo Marketplace
   ================================================ */

.home-container {
    width: 100%;
    padding: 2rem 0 3rem;
}

.home-section {
    margin-bottom: 2.5rem;
}

.home-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.2rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ml-primary, #2185d0);
    color: #333;
}

.home-section-title i.icon {
    color: var(--ml-primary, #2185d0);
}

/* Carruseles de productos por categoría (estilo MercadoLibre) */
.home-carousel-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    overflow: hidden;
}

.home-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
}

.home-carousel-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.home-carousel-vermas {
    font-size: 0.9rem;
    color: #2185d0;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}

.home-carousel-vermas:hover {
    text-decoration: underline;
}

.home-carousel-vermas i.icon {
    font-size: 0.8em;
    margin: 0 0 0 2px !important;
}

/* Wrapper con flechas */
.home-carousel-wrapper {
    position: relative;
    padding: 12px 0 16px;
}

.home-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 8px 20px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.home-carousel-track::after {
    content: '';
    flex: 0 0 8px;
}

.home-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Flechas del carrusel */
.home-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 72px;
    border: none;
    background: rgba(255,255,255,0.95);
    color: #2185d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-radius: 4px;
}

.home-carousel-arrow:hover {
    background: #fff;
    color: #1a6fb5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.home-carousel-arrow i.icon {
    font-size: 18px;
    margin: 0;
}

.home-carousel-prev {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.home-carousel-next {
    right: 0;
    border-radius: 4px 0 0 4px;
}

.home-carousel-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Cards de producto dentro del carrusel - overrides compactos */
.home-carousel-track .producto-card {
    flex: 0 0 220px;
    min-width: 220px;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    scroll-snap-align: start;
}
.home-carousel-track .producto-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 2;
}
.home-carousel-track .producto-content {
    padding: 12px;
}
.home-carousel-track .producto-categoria {
    font-size: 10px;
    margin-bottom: 4px;
}
.home-carousel-track .producto-nombre {
    font-size: 13px;
    margin-bottom: 6px;
}
.home-carousel-track .producto-meta {
    margin-bottom: 8px;
}
.home-carousel-track .stock-badge {
    padding: 3px 7px;
    font-size: 11px;
}
.home-carousel-track .producto-precios {
    padding-top: 8px;
}
.home-carousel-track .precio-actual {
    font-size: 16px;
}
.home-carousel-track .precio-anterior {
    font-size: 12px;
}
.home-carousel-track .precio-desc {
    font-size: 10px;
}
.home-carousel-track .producto-action {
    padding: 0 12px 12px;
}
.home-carousel-track .btn-agregar {
    min-height: 38px;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;
}

/* Responsive carrusel */
@media (max-width: 768px) {
    .home-carousel-track .producto-card {
        flex: 0 0 180px;
        min-width: 180px;
    }
    .home-carousel-arrow {
        display: none;
    }
    .home-carousel-header {
        padding: 12px 16px 0;
    }
    .home-carousel-track {
        padding: 8px 16px 12px;
    }
}

/* Marcas carrusel */
.home-marca-card {
    flex: 0 0 180px;
    min-width: 180px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    text-align: center;
}
.home-marca-card:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.home-marca-nombre {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.home-marca-count {
    font-size: 12px;
    color: #888;
}

/* CTA */
.home-cta {
    text-align: center;
    padding: 2rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .home-container {
        padding-top: 1rem;
    }

    .home-section-title {
        font-size: 1.2rem;
    }

    .home-ofertas-grid .card .image img {
        height: 150px;
    }

    .home-marcas-grid {
        columns: 2;
    }
}

/* ================================================
   GUEST MODE - Banner carrito
   ================================================ */

.cart-guest-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    margin-bottom: 16px;
}

.cart-guest-banner i.icon {
    font-size: 22px;
    color: #f9a825;
    flex-shrink: 0;
    margin: 0;
}

.cart-guest-banner strong {
    font-size: 14px;
    color: #333;
    display: block;
}

.cart-guest-banner p {
    font-size: 12px;
    color: #666;
    margin: 2px 0 0;
}

/* Modo guest: ocultar botones agregar y stock */
body.guest-mode .btn-agregar,
body.guest-mode .btn-agregar-mini,
body.guest-mode .producto-action,
body.guest-mode .stock-badge,
body.guest-mode .stock-text,
body.guest-mode .producto-meta,
body.guest-mode .pdp__buy-btn,
body.guest-mode .pdp__stock,
body.guest-mode .pdp__qty {
    display: none !important;
}

/* ================================================
   MOBILE SIDEBAR
   ================================================ */

.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.mobile-sidebar-overlay.active {
    display: block;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 1001;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.mobile-sidebar.active {
    left: 0;
}

.mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid #e8e8e8;
    background: #f9fafb;
}

.mobile-sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-sidebar-user .header-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2185d0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.mobile-sidebar-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.mobile-sidebar-links {
    padding: 8px 0;
}

.mobile-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #333 !important;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.mobile-sidebar-item:hover {
    background: #f5f5f5;
}

.mobile-sidebar-item i.icon {
    width: 20px;
    text-align: center;
    color: #666;
    font-size: 15px;
    margin: 0;
}

.mobile-sidebar-divider {
    height: 1px;
    background: #e8e8e8;
    margin: 4px 16px;
}

/* ================================================
   FOOTER - Estilo Marketplace
   ================================================ */

.b2b-footer {
    background: #1b1c1d;
    color: rgba(255, 255, 255, 0.8);
    padding: 48px 0 28px;
    margin-top: 48px;
}

.b2b-footer-title {
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.b2b-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.b2b-footer-links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.b2b-footer-links a:hover {
    color: #fff;
}

.b2b-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.b2b-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.b2b-footer-contact-item i.icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.b2b-footer-contact-item a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s;
}

.b2b-footer-contact-item a:hover {
    color: #fff;
}

.b2b-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.b2b-footer-social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}

.b2b-footer-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    color: #fff;
}

.b2b-footer-social-link i.icon {
    font-size: 16px;
    margin: 0;
}

.b2b-footer-payment {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.b2b-payment-icon {
    width: 48px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
}

.b2b-payment-icon i.icon {
    font-size: 20px;
    margin: 0;
}

.b2b-footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 32px 0 20px;
}

.b2b-footer-bottom {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.b2b-footer-bottom p {
    margin: 0;
}

.b2b-footer-powered {
    margin-top: 6px !important;
    font-size: 11px;
}

.b2b-footer-powered a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.b2b-footer-powered a:hover {
    color: #fff;
}

/* Footer responsive */
@media (max-width: 767px) {
    .b2b-footer {
        padding: 32px 16px 24px;
    }

    .b2b-footer .column {
        margin-bottom: 24px !important;
    }

    .b2b-footer-payment {
        justify-content: flex-start;
    }
}

/* ================================================
   RETAIL VARIANT SELECTOR (PDP)
   Modo minorista: selección individual de color/talle
   ================================================ */

/* Contenedor principal retail */
.pdp__variants--retail {
    margin-top: 20px;
}

/* Sección de colores */
.pdp__retail-colors {
    margin-bottom: 16px;
}

.pdp__retail-color-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.pdp__retail-color-chip {
    padding: 8px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s;
    outline: none;
}

.pdp__retail-color-chip:hover {
    border-color: #999;
}

.pdp__retail-color-chip.active {
    border-color: #00a650;
    background: #f0fdf4;
    color: #00a650;
}

.pdp__retail-color-chip.disabled {
    opacity: 0.4;
    text-decoration: line-through;
    cursor: not-allowed;
    border-color: #ddd;
}

.pdp__retail-color-chip.disabled:hover {
    border-color: #ddd;
}

/* Sección de talles */
.pdp__retail-sizes {
    margin-bottom: 16px;
}

.pdp__retail-size-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.pdp__retail-size-chip {
    padding: 8px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.2s;
    outline: none;
}

.pdp__retail-size-chip:hover:not(.disabled) {
    border-color: #999;
}

.pdp__retail-size-chip.active {
    border-color: #00a650;
    background: #f0fdf4;
    color: #00a650;
}

.pdp__retail-size-chip.disabled {
    opacity: 0.4;
    text-decoration: line-through;
    cursor: not-allowed;
    background: #f9f9f9;
}

/* Buy box retail */
.pdp__buy-box--retail {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.pdp__buy-box--retail .pdp__qty-row {
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 767px) {
    .pdp__retail-color-chips,
    .pdp__retail-size-chips {
        gap: 6px;
    }

    .pdp__retail-color-chip,
    .pdp__retail-size-chip {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* ================================================
   PRECIOS POR VOLUMEN - Product Detail
   ================================================ */
.pdp__volume-pricing { margin: 12px 0; }
.pdp__volume-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.pdp__volume-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pdp__volume-table th { text-align: left; padding: 6px 10px; background: #f8f9fa; border-bottom: 2px solid #e0e0e0; font-weight: 600; font-size: 12px; color: #666; }
.pdp__volume-table td { padding: 6px 10px; border-bottom: 1px solid #eee; }
.pdp__volume-table tr.active { background: #f0fdf4; }
.pdp__volume-table tr.active td { font-weight: 600; color: #16A34A; }
.pdp__volume-hint { color: #22C55E; font-size: 13px; margin-top: 8px; font-weight: 500; padding: 6px 10px; background: #f0fdf4; border-radius: 4px; }
.pdp__min-qty-notice { color: #666; font-size: 13px; margin: 8px 0; padding: 6px 0; }
.pdp__min-qty-notice .icon { color: #f59e0b; }

/* ================================================
   PRECIOS POR VOLUMEN - Cart Items
   ================================================ */
.cart-item-unit-base {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    line-height: 1.2;
}
.cart-item-unit--vol {
    color: #16A34A;
    font-weight: 600;
}

/* ================================================
   MONTO MINIMO DE PEDIDO - Cart
   ================================================ */
.cart__min-order { margin: 15px 0; padding: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; }
.cart__min-order--reached { background: #f0fdf4; border-color: #bbf7d0; }
.cart__min-order-label { font-size: 13px; margin-bottom: 8px; }
.cart__min-order-remaining { font-weight: 600; margin-top: 2px; color: #92400e; }
.cart__min-order-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 8px; }
.cart__min-order-progress { height: 100%; background: #f59e0b; border-radius: 3px; transition: width 0.3s ease; }
.cart__min-order--reached .cart__min-order-progress { background: #22C55E; }

/* ================================================
   PEDIDO RAPIDO - Quick Order
   ================================================ */
.quick-order__header { margin-bottom: 20px; }
.quick-order__header h2 { margin-bottom: 5px; }
.quick-order__header p { color: #666; margin: 0; }
.quick-order__table { font-size: 13px !important; }
.quick-order__search-cell { position: relative; }
/* Dropdown se porta al <body> via JS (clase --portal) para escapar del overflow del table */
.quick-order__results { display: none; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-height: 320px; overflow-y: auto; }
.quick-order__results--portal { position: fixed !important; z-index: 99999 !important; min-width: 280px; max-width: 560px; }
.quick-order__result-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f0f0; }
.quick-order__result-item:hover { background: #f8f9fa; }
.quick-order__result-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; }
.quick-order__result-info { flex: 1; }
.quick-order__result-name { font-weight: 600; font-size: 13px; }
.quick-order__result-code { color: #888; font-size: 12px; }
.quick-order__result-price { font-weight: 600; color: #333; white-space: nowrap; }
.quick-order__row.has-product .quick-order__search { font-weight: 600; background: #f8f9fa; }
.quick-order__row.flash { animation: quickOrderFlash 0.5s ease; }
@keyframes quickOrderFlash { 0%, 100% { background: transparent; } 50% { background: #fef3c7; } }
.quick-order__qty-cell input { text-align: center; }
.quick-order__variant select { width: 100%; padding: 4px; border: 1px solid #ddd; border-radius: 4px; }

@media (max-width: 768px) {
    .quick-order__table { font-size: 12px !important; }
    .quick-order__table th:nth-child(3), .quick-order__table td:nth-child(3),
    .quick-order__table th:nth-child(6), .quick-order__table td:nth-child(6) { display: none; }
}

/* ================================================
   REPETIR PEDIDO - Reorder Modal
   ================================================ */
.reorder-order-info { font-size: 14px; color: #666; margin-bottom: 12px; }
.reorder-table { font-size: 13px !important; }
.reorder-item--unavailable { opacity: 0.5; }
.reorder-item--unavailable td { text-decoration: line-through; }
.reorder-item--unavailable td:first-child, .reorder-item--unavailable td:last-child { text-decoration: none; }
.reorder-old-price { text-decoration: line-through; color: #999; font-size: 12px; margin-right: 4px; }
.reorder-summary { line-height: 36px; }
#reorder-modal .content { max-height: 60vh; overflow-y: auto; }