/* shomex.com.mx — ajustes generales (siempre cargados, con o sin GlassLiquid) */

/* ---- Cards de los carruseles (Today's Deal, Featured, New…) más grandes ----
   Los carruseles del home son Owl (.owl-item) y/o Slick (.slick-slide);
   las tarjetas usan .aiz-card-box con el contenedor de imagen .h-140px/.h-md-200px. */
.owl-item .aiz-card-box,
.slick-slide .aiz-card-box {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.owl-item .aiz-card-box .h-140px,
.slick-slide .aiz-card-box .h-140px {
    height: 175px !important;
}
@media (min-width: 768px) {
    .owl-item .aiz-card-box .h-md-200px,
    .slick-slide .aiz-card-box .h-md-200px {
        height: 250px !important;
    }
}
.owl-item.center .aiz-card-box,
.slick-slide.slick-current.slick-active .aiz-card-box {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}

/* ====== Efectos de texto animado (Card Editor / futura Effects library) ====== */
@keyframes shomex-shine { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.card-fx-shine {
    background: linear-gradient(90deg, #EE4D2D 0%, #ffcaba 25%, #EE4D2D 50%, #ffcaba 75%, #EE4D2D 100%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; animation: shomex-shine 3s linear infinite;
}
/* Glow: color configurable por sección (Card Editor). Blanco por defecto;
   cada elemento puede sobreescribir --card-glow-color con un style inline. */
@keyframes shomex-glow {
    0%, 100% { text-shadow: 0 0 2px var(--card-glow-color, #fff); }
    50% { text-shadow: 0 0 12px var(--card-glow-color, #fff); }
}
.card-fx-glow { --card-glow-color: #ffffff; animation: shomex-glow 1.8s ease-in-out infinite; }
@keyframes shomex-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.card-fx-gradient {
    background: linear-gradient(270deg, #EE4D2D, #F57224, #ff4d8d, #EE4D2D);
    background-size: 600% 600%; -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; animation: shomex-gradient 6s ease infinite;
}

/* ====== Estilo de tarjeta "Temu" (Card Editor → card_style = temu) ====== */
.aiz-card-box.card-style-temu {
    border-radius: 12px; overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.aiz-card-box.card-style-temu:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.aiz-card-box.card-style-temu .card-img-area { border-radius: 12px 12px 0 0; }
/* Título más compacto */
.aiz-card-box.card-style-temu h3 { font-size: 12px !important; }
/* Precio grande, naranja Temu; precio anterior pequeño */
.aiz-card-box.card-style-temu .text-primary.fw-700 {
    font-size: 19px !important; line-height: 1; color: #fb7701 !important;
}
.aiz-card-box.card-style-temu .disc-amount del { font-size: 11px; align-self: flex-end; }
/* Botón añadir al carrito redondeado tipo Temu */
.aiz-card-box.card-style-temu .cart-btn {
    background: linear-gradient(90deg, #fb7701, #ff9a3d) !important;
}

/* ====== Texto rotativo "Animated Text" (Fase 3) ====== */
.shomex-rotator {
    display: inline-flex; vertical-align: bottom; position: relative;
    height: 1.35em; overflow: hidden; line-height: 1.35;
}
.shomex-rotator__word {
    position: absolute; left: 0; top: 0; white-space: nowrap;
    opacity: 0; transform: translateY(110%);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s;
}
.shomex-rotator__word.is-active { position: relative; opacity: 1; transform: translateY(0); }
.shomex-rotator__word.is-prev { opacity: 0; transform: translateY(-110%); }

/* Barra opcional de titular animado en el home (home_rotating_words) */
.shomex-headline {
    font-size: 15px; font-weight: 700; color: #EE4D2D;
    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.shomex-headline__prefix { color: #333; font-weight: 600; }

/* ====== Tarjeta de producto: 3 botones al pasar el mouse (solo escritorio) ====== */
.card-hover-actions {
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 6;
    display: flex; gap: 8px; justify-content: center;
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.card-img-area:hover .card-hover-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.card-hover-btn {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    display: flex; align-items: center; justify-content: center;
    color: #333; border: 0; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, transform .12s;
}
.card-hover-btn:hover { background: #EE4D2D; color: #fff; transform: translateY(-2px); }
.card-hover-btn.is-fav { background: #EE4D2D; color: #fff; }
.card-hover-btn.is-fav svg { fill: currentColor; }

/* ====== Botón carrito estilo Temu (a la derecha del precio) ====== */
.temu-cart-btn {
    display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #fff;
    border: 1.5px solid #222; color: #222; cursor: pointer; padding: 0 !important;
    transition: transform .15s, background .15s, color .15s, border-color .15s;
}
.temu-cart-btn:hover { transform: scale(1.08); background: #EE4D2D; color: #fff; border-color: #EE4D2D; }
.temu-cart-btn:active { transform: scale(.96); }
/* Círculo rojo con la cantidad agregada (esquina superior derecha del botón) */
.temu-cart-btn { position: relative; }
.temu-cart-count {
    position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
    background: #e62e04; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* ====== Sección Products grid: imágenes COMPLETAS + cards a la misma altura ====== */
.shomex-products-grid .row > .col { display: flex; }
.shomex-products-grid .aiz-card-box { width: 100%; }
.shomex-products-grid .card-img-area { display: flex; align-items: center; justify-content: center; }
.shomex-products-grid .card-img-area img { object-fit: contain !important; }

/* ====== Mosaico estilo "Marcas Principales" en TODAS las tarjetas de producto ====== */
.aiz-card-box { border: 1px solid #eef0f4; border-radius: 8px; }

/* Quitar la "línea animada que encierra el producto" en las tarjetas */
.hov-animate-outline::before,
.hov-animate-outline::after { display: none !important; }

/* ====== Carrito: sugerencia de similar EN STOCK si un producto está agotado ====== */
.cart-similar {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
    padding: 4px 10px 4px 4px; border: 1px solid #ffd6cc; background: #fff6f3;
    border-radius: 999px; text-decoration: none; max-width: 100%;
}
.cart-similar:hover { border-color: #EE4D2D; background: #fff0eb; }
.cart-similar__img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cart-similar__txt { font-size: 12px; color: #555; line-height: 1.2; }
.cart-similar__oos { display: block; color: #EE4D2D; font-weight: 700; font-size: 11px; }

/* ====== Página de producto (PDP): grises #9d9da6 → texto #222 / iconos #2222f5 ====== */
.shomex-pdp .text-gray { color: #222222 !important; }
.shomex-pdp [fill="#9d9da6"] { fill: #2222f5 !important; }

/* ====== Botones del detalle de producto (estilo Temu) ====== */
.shomex-pdp-actions { gap: 8px; }
.shomex-buy-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(90deg, #fb7701, #ff9a3d); color: #fff; border: 0;
    border-radius: 999px; padding: 9px 18px; line-height: 1.12; cursor: pointer; transition: opacity .15s;
}
.shomex-buy-btn:hover { opacity: .92; }
.shomex-buy-off { font-size: 13px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.shomex-buy-main { font-size: 15px; font-weight: 800; }
.shomex-cart-compound {
    display: flex; align-items: stretch; background: #fff; border: 1.5px solid #EE4D2D;
    border-radius: 999px; overflow: hidden;
}
.shomex-cc-step {
    width: 46px; flex-shrink: 0; background: #fff; color: #EE4D2D; border: 0;
    font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1;
}
.shomex-cc-step:hover { background: #fff1ec; }
.shomex-cc-center {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: #EE4D2D; color: #fff;
    border: 0; cursor: pointer; padding: 8px 6px; line-height: 1.12;
}
.shomex-cc-center:hover { background: #d8431f; }
.shomex-cc-label { font-size: 15px; font-weight: 800; }
.shomex-cc-variation { font-size: 11px; opacity: .9; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shomex-cc-variation:empty { display: none; }

/* ====== Enlaces de compartir (share-list, estilo kartly) ====== */
.share-list { gap: 14px; }
.share-list__label { font-size: 13px; }
.share-list__item {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f4f4f6; color: #555; border: 0; cursor: pointer; text-decoration: none;
    font-size: 20px; transition: background .15s, color .15s, transform .12s;
}
.share-list__item:hover { background: #EE4D2D; color: #fff; transform: translateY(-2px); }

/* ====== Liquid Glass Button (adaptado de LiquidGlassEffect/Glass Button) ====== */
.glass-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; border-radius: 999px; padding: 12px 26px; line-height: 1;
    font-weight: 700; font-size: 14px; text-decoration: none; overflow: hidden; isolation: isolate;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: transform .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s cubic-bezier(.25, 1, .5, 1), background .3s ease;
}
.glass-btn::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    background: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45% 55%, rgba(255,255,255,0) 70%);
    background-size: 200% 200%; background-position: 0% 50%; mix-blend-mode: screen;
    transition: background-position .55s cubic-bezier(.25, 1, .5, 1);
}
.glass-btn > * { position: relative; z-index: 2; }
.glass-btn:hover { transform: scale(.972); }
.glass-btn:hover::after { background-position: 62% 50%; }
.glass-btn:active { transform: scale(.94); }
.glass-btn--primary {
    background: linear-gradient(180deg, #f4633a, #EE4D2D); color: #fff;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 1px rgba(0,0,0,.12), 0 5px 14px rgba(238,77,45,.35);
}
/* "Ver detalles": color predominante, un poco más opaco/suave, SIN volverse blanco al hover */
.glass-btn--ghost {
    background: rgba(238,77,45,.16); color: #EE4D2D;
    box-shadow: inset 0 0 0 1.5px rgba(238,77,45,.45);
}
.glass-btn--ghost:hover { background: rgba(238,77,45,.34); color: #c43d1f; }

/* ====== Botón "Ver más ⌄" ====== */
.shomex-vermas {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px;
    color: #EE4D2D; text-decoration: none; padding: 8px 22px; border: 1.5px solid #EE4D2D;
    border-radius: 999px; transition: background .15s, color .15s;
    background: transparent; cursor: pointer;
}
.shomex-vermas:hover { background: #EE4D2D; color: #fff; }
.shomex-vermas:disabled { opacity: .6; cursor: default; }

/* ---- Loader "pull to refresh": ROLLBACK temporal para verificar transparencia ----
   El usuario reportó que el fondo se veía "menos transparente". Ocultar este gif es
   independiente del vidrio, pero se deja DESACTIVADO para comparar A/B. Si el gif
   persistente vuelve a molestar, reactivar la línea de abajo. */
/* .aiz-refresh { display: none !important; } */
/* ROLLBACK (a pedido del usuario): ocultar el loader hace que los elementos del
   tema dejen de verse transparentes (el .aiz-refresh aporta la capa que el
   backdrop-filter del vidrio muestrea). Se deja VISIBLE para conservar la
   transparencia. NO reactivar el display:none de abajo. */
/* body.glassliquid-active .aiz-refresh-content { display: none !important; } */

/* ---- Insignias de tarjeta de producto (Insignia Creator) ---- */
.pbadge-stack {
    position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 4px;
    pointer-events: none; max-width: 90%;
}
.pbadge-stack--top-left { top: 6px; left: 0; align-items: flex-start; }
.pbadge-stack--top-right { top: 6px; right: 0; align-items: flex-end; }
.pbadge-stack--bottom-left { bottom: 6px; left: 0; align-items: flex-start; flex-direction: column-reverse; }
.pbadge-stack--bottom-right { bottom: 6px; right: 0; align-items: flex-end; flex-direction: column-reverse; }
.pbadge { display: inline-flex; align-items: center; line-height: 1.1; }
.pbadge--text {
    padding: 2px 8px; border-radius: 0 5px 5px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    white-space: nowrap; letter-spacing: .2px;
}
.pbadge-stack--top-right .pbadge--text,
.pbadge-stack--bottom-right .pbadge--text { border-radius: 5px 0 0 5px; }
.pbadge--img { display: block; }

/* ---- Barra inferior móvil (aiz-mobile-bottom-nav): SOLO móvil ----
   El tema la oculta por defecto; nosotros la mostramos explícitamente en
   móvil/tablet (<992px) y la ocultamos en escritorio/laptop (>=992px).
   Es un <div> block que envuelve un .row (flex), por eso display:block. */
/* SIEMPRE visible (móvil Y escritorio): tiene Home, carrito, etc. Forzamos por
   encima del .d-xl-none del tema con un selector más específico + !important. */
.aiz-mobile-bottom-nav.d-xl-none,
body .aiz-mobile-bottom-nav { display: block !important; z-index: 1045 !important; }
/* Efecto liquid glass para la barra inferior cuando el tema está activo */
body.glassliquid-active .aiz-mobile-bottom-nav {
    background-color: rgba(var(--gl-tint, 255, 255, 255), .55) !important;
    -webkit-backdrop-filter: blur(var(--gl-blur, 16px)) saturate(var(--gl-saturate, 1.6));
    backdrop-filter: blur(var(--gl-blur, 16px)) saturate(var(--gl-saturate, 1.6));
    border-top: 1px solid rgba(255, 255, 255, .5) !important;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .12);
}
body.glassliquid-active .aiz-mobile-bottom-nav a { background: transparent !important; }

/* ---- Flash Sale (home): cards más grandes, con o sin GlassLiquid ---- */
.flash-shopee-carousel .flash-img-wrap { height: 185px !important; }
.flash-shopee-carousel .flash-product-img { max-height: 100% !important; }
.flash-shopee-carousel .flash-card-name { font-size: 12px !important; height: 30px !important; }
.flash-shopee-carousel .flash-product-card .fw-700,
.flash-shopee-carousel .flash-product-card [style*="color:#EE4D2D"] { font-size: 15px !important; }
@media (max-width: 767.98px) {
    .flash-shopee-carousel .flash-img-wrap { height: 130px !important; }
    .flash-shopee-carousel .flash-product-img { height: auto !important; max-height: 100% !important; }
}

/* ---- Dropdowns abiertos demasiado bajos: dar más altura con scroll ---- */
.dropdown-menu.show {
    max-height: 75vh;
    overflow-y: auto;
}
/* bootstrap-select (selects estilizados, p. ej. "Select Products") */
.bootstrap-select .dropdown-menu.inner,
.bootstrap-select .dropdown-menu .inner {
    max-height: 320px !important;
}
.bootstrap-select > .dropdown-menu {
    max-height: 360px !important;
    overflow: hidden;
}
/* Resultados de búsqueda en vivo: que no queden cortados */
.typed-search-box {
    max-height: 80vh;
    overflow-y: auto;
}

/* ====== Espacios publicitarios (Admin -> Ads) ====== */
.shomex-ad-slot {
    margin: 14px auto;
    text-align: center;
    overflow: hidden;
    max-width: 100%;
}