:root{

    /* Alto aproximado del navbar en celular — usado para que el
       catálogo en pantalla completa (modo feed) ocupe justo lo que
       queda debajo. Un solo lugar para ajustarlo si hace falta. */
    --odana-navbar-h: 56px;

    --odana-bg: #F8F6F3;
    --odana-surface: #fff;
    --odana-border: #eee;
    --odana-text: #222;
    --odana-text-muted: #777;

}

[data-theme="dark"]{

    --odana-bg: #16181d;
    --odana-surface: #21242b;
    --odana-border: #33363e;
    --odana-text: #e8e6e2;
    --odana-text-muted: #9a9ea6;

}

body{

    font-family:Poppins,sans-serif;

    background:var(--odana-bg);

    color:var(--odana-text);

    transition:background .2s,color .2s;

}

.hero{

    padding:80px 0;

    text-align:center;

}

.hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:52px;

}

.search-box{

    max-width:650px;

    margin:auto;

    margin-top:40px;

}

.product-card{

    background:var(--odana-surface);

    color:var(--odana-text);

    border-radius:16px;

    padding:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    text-align:center;

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-5px);

}

.photo{

    background:#ececec;

    height:220px;

    border-radius:10px;

    margin-bottom:15px;

}

/* Foto grande de la ficha de producto (ver front/product/show.php) —
   .photo está pensada para las tarjetas chicas de la cuadrícula (alto
   fijo de 220px); acá reusarla con una imagen "img-fluid" (que crece
   según su proporción real) hacía que la foto se saliera del cuadro.
   Con overflow:hidden + object-fit:contain la imagen siempre encaja
   completa, sin desbordar ni recortarse. */
.odana-product-hero-photo{
    background:#ececec;
    height:420px;
    border-radius:10px;
    margin-bottom:15px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.odana-product-hero-photo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

[data-theme="dark"] .odana-product-hero-photo{
    background:#2a2d34;
}

@media (max-width:767.98px){
    .odana-product-hero-photo{
        height:320px;
    }
}

.catalog-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.catalog-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.85);

    color:#222;

    font-size:24px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

    transition:.2s;

    z-index:5;

}

.catalog-nav:hover{

    background:#fff;

}

.catalog-nav:disabled{

    opacity:.3;

    cursor:default;

}

.catalog-nav--prev{

    left:12px;

}

.catalog-nav--next{

    right:12px;

}

.catalog-page-indicator{

    position:absolute;

    bottom:14px;

    left:50%;

    transform:translateX(-50%);

    background:rgba(0,0,0,.6);

    color:#fff;

    padding:4px 14px;

    border-radius:999px;

    font-size:13px;

    z-index:5;

}

#catalog-viewer{

    /* Se adapta al ancho de la pantalla en vez de quedar topado a
       900px — así en monitores grandes el catálogo se ve más grande
       en automático, sin tocar nada en celular (esa regla está
       pisada aparte en el media query de abajo). */
    width:min(92vw,1500px);

    height:min(85vh,900px);

    margin:0 auto;

    border:1px solid #ddd;

    border-radius:18px;

    overflow:hidden;

    background:#fafafa;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

    cursor:zoom-in;

}

#catalog-viewer.odana-zoomed{

    cursor:zoom-out;

}

/* En celular el catálogo ocupa toda la pantalla, sin el marco/tarjeta
   que sí se ve en escritorio (sin bordes, sin esquinas redondeadas,
   sin padding alrededor). El offset de la altura es lo que mide
   aproximadamente el navbar — si queda un poco de espacio de más o de
   menos abajo, se ajusta ese número. */
@media (max-width: 767.98px){

    .catalog-page{
        padding-left:0;
        padding-right:0;
        padding-top:0;
        padding-bottom:0;
    }

    .catalog-wrapper{
        padding:0;
    }

    #catalog-viewer{
        width:100%;
        height:calc(100dvh - var(--odana-navbar-h));
        border:none;
        border-radius:0;
        box-shadow:none;
    }

    /* La navegación en celular es puro scroll nativo (Odana.MobileFeed,
       ver mobile-feed.js) — las flechas de escritorio no hacen falta ahí. */
    .catalog-nav{
        display:none;
    }

    /* El footer va justo después de .catalog-page en el layout (front.php);
       se oculta para que no aparezca colgando debajo del catálogo. */
    .catalog-page + footer{
        display:none;
    }

    /* Bloqueo duro del scroll de la página completa cuando el contenido
       es el catálogo: sin esto, aunque el footer esté oculto, cualquier
       diferencia de un par de píxeles entre el 100dvh calculado y el alto
       real de pantalla deja a la página entera "scrolleable" — y como el
       navbar no tiene position:fixed, ese scroll se lo lleva puesto. Con
       el body bloqueado, el único scroll posible es el de adentro de
       #catalog-viewer (que tiene su propio overflow-y:auto). :has() lo
       escopea solo a esta página — el resto (carrito, producto) siguen
       scrolleando la página normal en celular. */
    body:has(.catalog-page){
        height:100dvh;
        overflow:hidden;
    }

}

/* Feed de celular (Odana.MobileFeed): scroll vertical nativo con
   snap. Cada página mide el ancho completo de pantalla y su altura
   real (proporcional a la imagen, sin recortar ni forzar pantalla
   completa) — así quedan pegadas una debajo de otra sin espacio en
   blanco entre ellas. #catalog-viewer se convierte en el contenedor
   con scroll. Se usa "#catalog-viewer.odana-feed" (no solo
   ".odana-feed") a propósito: un selector de ID le gana en
   especificidad a uno de clase sin importar el orden en el archivo,
   así que hace falta igualar la especificidad para pisar el
   overflow:hidden del visor de escritorio de arriba. */
#catalog-viewer.odana-feed{

    overflow-y:auto;

    scroll-snap-type:y mandatory;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    cursor:auto;

}

.odana-feed::-webkit-scrollbar{

    display:none;

}

.odana-feed-page{

    scroll-snap-align:start;

    scroll-snap-stop:always;

    display:block;

}

.odana-feed-page__frame{

    position:relative;

    display:block;

    width:100%;

}

.odana-feed-page__img{

    display:block;

    width:100%;

    height:auto;

}

/* Nota de marcas registradas, agregada por catalog.js como último
   elemento DENTRO del feed de celular (ver comentario ahí) — por eso
   no lleva scroll-snap-align: no es una "página", es más bien un pie
   de página al que se llega siguiendo el scroll normal. */
.odana-feed-notice{

    padding:28px 24px 40px;

    text-align:center;

    font-size:13px;

    line-height:1.6;

    color:#7a5c1e;

    background:#fff8e6;

}

/* Selector compuesto (dos clases) a propósito: el botón tiene tanto
   .odana-hotspot (que trae position:relative, para anclar el anillo
   de "ping") como .odana-feed-page__hotspot — con la misma
   especificidad ganaba la última regla del archivo sin importar
   cuál era. Esto le gana a las dos por especificidad, así el
   position:absolute (necesario para que el botón quede anclado al
   punto x/y de la imagen) nunca se pisa. */
.odana-hotspot.odana-feed-page__hotspot{

    position:absolute;

    transform:translate(-50%, -50%);

}

.odana-hotspot{

    position:relative;

    z-index:1;

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 14px;

    border:none;

    border-radius:999px;

    background:rgba(0,0,0,.65);

    color:#fff;

    font-family:Poppins,sans-serif;

    font-size:13px;

    font-weight:500;

    white-space:nowrap;

    cursor:pointer;

    transition:.2s;

}

.odana-hotspot:hover{

    background:rgba(0,0,0,.85);

}

/* Anillo que "hace ping" alrededor del botón, para que el cliente
   entienda que es interactivo sin tener que tocarlo primero. Va en
   un ::after (no en el botón mismo) para no pisar el transform que
   ya usan otros lugares para centrar el botón (position:absolute +
   translate(-50%,-50%) en el feed de celular, por ejemplo) — así
   funciona igual en escritorio y en celular. */
.odana-hotspot::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:999px;

    background:rgba(0,0,0,.55);

    z-index:-1;

    pointer-events:none;

    animation:odana-hotspot-ping 1.8s ease-out infinite;

}

@keyframes odana-hotspot-ping{

    0%{
        transform:scale(1);
        opacity:.55;
    }

    100%{
        transform:scale(1.6);
        opacity:0;
    }

}

.odana-hotspot__icon{

    font-size:14px;

    line-height:1;

    display:inline-block;

    animation:odana-hotspot-bounce 1.8s ease-in-out infinite;

}

@keyframes odana-hotspot-bounce{

    0%, 100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

}

.odana-panel{

    background:var(--odana-surface);

    color:var(--odana-text);

    border:1px solid var(--odana-border);

    border-radius:12px;

    padding:20px;

}

.odana-panel--summary{

    background:var(--odana-bg);

    padding:16px;

}

.odana-back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    flex-shrink:0;

    border-radius:50%;

    color:var(--odana-text);

    text-decoration:none;

    font-size:18px;

    transition:.2s;

}

.odana-back-btn:hover{

    background:#f5f5f5;

}

.odana-cart-item{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px 16px;

    padding:16px 0;

    border-bottom:1px solid var(--odana-border);

}

.odana-cart-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.odana-cart-item__thumb{

    width:56px;

    height:56px;

    border-radius:8px;

    object-fit:cover;

    flex-shrink:0;

    background:var(--odana-bg);

}

.odana-cart-item__thumb--empty{

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--odana-text-muted);

    font-size:20px;

    border:1px solid var(--odana-border);

}

.odana-cart-item__info{

    flex:1 1 140px;

    min-width:140px;

}

.odana-cart-item__name{

    font-weight:500;

}

.odana-cart-item__brand{

    color:var(--odana-text-muted);

    font-size:13px;

}

.odana-cart-item__qty{

    display:flex;

    align-items:center;

    gap:8px;

}

.odana-qty-btn{

    width:28px;

    height:28px;

    border:1px solid var(--odana-border);

    border-radius:6px;

    background:var(--odana-surface);

    color:var(--odana-text);

    cursor:pointer;

    line-height:1;

}

.odana-qty-btn:hover{

    background:var(--odana-bg);

}

.odana-cart-item__remove{

    border:none;

    background:none;

    color:#c0392b;

    cursor:pointer;

    font-size:16px;

}

.odana-cart-item__subtotal{

    min-width:70px;

    text-align:right;

    font-weight:600;

}

/* Botón flotante de "Preguntar" (WhatsApp) — a propósito visualmente
   distinto de los botones "Pedir" de los hotspots (verde de WhatsApp,
   fijo en una esquina, siempre visible sin importar el scroll) para
   que quede claro que es una acción general del sitio, no ligada a
   un producto puntual del catálogo. */
.odana-ask-fab{

    position:fixed;

    right:16px;
    bottom:16px;

    z-index:1030;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:52px;
    height:52px;

    background:#25d366;
    color:#fff;

    border-radius:50%;

    text-decoration:none;

    box-shadow:0 6px 18px rgba(0,0,0,.25);

    transition:.2s;

}

.odana-ask-fab:hover{

    background:#1ebe5b;
    color:#fff;

}

.odana-ask-fab i{

    font-size:24px;

}

/* El navbar sigue las variables de tema (igual que el resto del
   sitio) — el logo tiene una variante en blanco (logo-white.svg) que
   se muestra en su lugar en modo noche, ver .odana-logo abajo. */
.odana-navbar{
    background:var(--odana-surface);
    border-color:var(--odana-border) !important;
    transition:background .2s,border-color .2s;
}

.odana-logo--dark{
    display:none;
}

[data-theme="dark"] .odana-logo--light{
    display:none;
}

[data-theme="dark"] .odana-logo--dark{
    display:inline-block;
}

#themeToggle{

    width:38px;

    height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:0;

}

/* En celulares angostos, el hamburguesa de filtro + logo + Ofertas +
   buscar + compartir + noche + carrito no entran en una sola línea
   con su tamaño normal y se van a una segunda/tercera fila. Acá se
   angostan el logo y los botones, y se fuerza que no salten de línea
   — así el navbar siempre queda parejo, en una sola fila. */
@media (max-width:575.98px){

    .odana-navbar .container{
        flex-wrap:nowrap;
        padding-left:10px;
        padding-right:10px;
        gap:2px;
    }

    .odana-navbar .odana-logo{
        height:44px !important;
    }

    .odana-navbar .navbar-brand{
        padding:0;
        margin-right:0;
    }

    .odana-navbar .btn{
        padding:.3rem .5rem;
        font-size:.85rem;
    }

    /* El espaciado entre botones ya lo da el gap del container — sin
       esto, los me-1 del HTML se suman al gap y separa de más. */
    .odana-navbar .btn.me-1,
    .odana-navbar .dropdown.me-1{
        margin-right:0 !important;
    }

    #themeToggle{
        width:32px;
        height:32px;
    }

}

/* Elementos de Bootstrap y del sitio que sí deben oscurecerse en modo
   noche (el navbar queda fuera a propósito, ver :root). */
[data-theme="dark"] footer{
    color:var(--odana-text-muted);
}

[data-theme="dark"] .photo{
    background:#2a2d34;
}

[data-theme="dark"] #catalog-viewer{
    background:#0e0f12;
    border-color:var(--odana-border);
}

[data-theme="dark"] .text-muted{
    color:var(--odana-text-muted) !important;
}

[data-theme="dark"] .dropdown-menu{
    background-color:var(--odana-surface);
    border-color:var(--odana-border);
}

[data-theme="dark"] .dropdown-item{
    color:var(--odana-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus{
    background-color:var(--odana-bg);
    color:var(--odana-text);
}

[data-theme="dark"] .dropdown-item.active{
    background-color:#3a3d45;
    color:#fff;
}

[data-theme="dark"] .btn-outline-dark{
    color:var(--odana-text);
    border-color:var(--odana-border);
}

[data-theme="dark"] .btn-outline-dark:hover{
    background-color:var(--odana-surface);
    color:#fff;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
    background-color:var(--odana-surface);
    color:var(--odana-text);
    border-color:var(--odana-border);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{
    background-color:var(--odana-surface);
    color:var(--odana-text);
}

[data-theme="dark"] .form-control::placeholder{
    color:var(--odana-text-muted);
}

[data-theme="dark"] .alert-warning{
    background-color:#3a3320;
    border-color:#544a2c;
    color:#e9d9a8;
}

[data-theme="dark"] .odana-feed-notice{
    background:#3a3320;
    color:#e9d9a8;
}

[data-theme="dark"] .alert-info{
    background-color:#1e2f38;
    border-color:#2c4653;
    color:#a8d4e9;
}

[data-theme="dark"] .card{
    background-color:var(--odana-surface);
    color:var(--odana-text);
    border-color:var(--odana-border);
}

[data-theme="dark"] .modal-content{
    background-color:var(--odana-surface);
    color:var(--odana-text);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer{
    border-color:var(--odana-border);
}

[data-theme="dark"] .btn-close{
    filter:invert(1) grayscale(1) brightness(1.5);
}

[data-theme="dark"] .list-group-item{
    background-color:var(--odana-surface);
    color:var(--odana-text);
    border-color:var(--odana-border);
}

[data-theme="dark"] .list-group-item-action:hover{
    background-color:var(--odana-bg);
    color:var(--odana-text);
}

/* .btn-dark (agregar al pedido, agregar al carrito) queda casi negro
   sobre negro con el modal/panel ya oscuro — se pasa al dorado de la
   marca para que se note que es un botón. */
[data-theme="dark"] .btn-dark{
    background-color:#a07132;
    border-color:#a07132;
    color:#fff;
}

[data-theme="dark"] .btn-dark:hover,
[data-theme="dark"] .btn-dark:focus{
    background-color:#8a5f29;
    border-color:#8a5f29;
    color:#fff;
}

[data-theme="dark"] .btn-dark:disabled{
    background-color:#3a3d45;
    border-color:#3a3d45;
    color:var(--odana-text-muted);
}

/* Toast de "agregado al pedido" — por defecto Bootstrap le da un fondo
   blanco translúcido; sin tocarlo, el texto (heredado en blanco desde
   body) quedaba casi invisible ahí encima. */
[data-theme="dark"] .toast{
    background-color:var(--odana-surface);
    color:var(--odana-text);
    border-color:var(--odana-border);
}

[data-theme="dark"] .toast .text-muted{
    color:var(--odana-text-muted) !important;
}

/* ---- Home (tienda, ver front/home/index.php) --------------------- */

.odana-trust-badges{
    background:var(--odana-surface);
    border-top:1px solid var(--odana-border);
    border-bottom:1px solid var(--odana-border);
    padding:24px 0;
    color:var(--odana-text);
}

.odana-brand-statement{
    max-width:640px;
}

.odana-banner-carousel .carousel-item img{
    width:100%;
    height:clamp(220px, 40vw, 480px);
    object-fit:cover;
}

.odana-banner-carousel .carousel-caption{
    background:rgba(0,0,0,.35);
    border-radius:12px;
    padding:12px 20px;
    bottom:12%;
}

.odana-occasion-tile{
    display:block;
    background:var(--odana-surface);
    color:var(--odana-text);
    border:1px solid var(--odana-border);
    border-radius:16px;
    padding:14px 10px 18px;
    text-align:center;
    transition:.2s;
}

.odana-occasion-tile:hover{
    transform:translateY(-3px);
    border-color:var(--odana-text);
}

.odana-occasion-tile-img{
    width:100%;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:10px;
}

/* Tarjetas seleccionables de familia olfativa en /encuentra-tu-perfume
   (ver FragranceFinderController + front/fragrance-finder/index.php) —
   un <label> que envuelve un checkbox oculto, mismo look que
   .odana-occasion-tile pero con estado "activo" cuando está marcado. */
.odana-family-card{
    position:relative;
    background:var(--odana-surface);
    color:var(--odana-text);
    border:1px solid var(--odana-border);
    border-radius:16px;
    padding:16px 14px;
    cursor:pointer;
    transition:.2s;
}

.odana-family-card:hover{
    border-color:var(--odana-text);
}

.odana-family-card--active{
    border-color:var(--odana-text);
    border-width:2px;
    box-shadow:0 0 0 1px var(--odana-text);
}

.odana-family-card-input{
    position:absolute;
    top:12px;
    right:12px;
    width:18px;
    height:18px;
}

/* Píldoras de "¿para quién es el perfume?" en /encuentra-tu-perfume —
   mismo look que los botones rounded-pill que ya usa el filtro de
   categoría (ver front/home/index.php), pero como <label> envolviendo
   un radio oculto, porque acá viven dentro del mismo <form> que las
   tarjetas de familia y deben viajar juntos en un solo GET. */
.odana-gender-pill{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:.375rem 1rem;
    border-radius:50rem;
    border:1px solid var(--odana-text);
    color:var(--odana-text);
    background:transparent;
    font-size:.875rem;
    cursor:pointer;
    transition:.15s;
}

/* El radio cubre TODA la píldora (en vez de quedar oculto en una
   esquina) — así el clic se registra directo sobre el input sin
   depender de que el navegador reenvíe el clic del <label> al control
   que envuelve, que es donde fallaba: con el input reducido a 0x0 el
   área "clickeable" real terminaba siendo prácticamente inexistente. */
.odana-gender-pill input{
    position:absolute;
    inset:0;
    margin:0;
    opacity:0;
    cursor:pointer;
}

/* Sin clase ".activo" puesta por PHP a propósito: son radios (una
   sola opción a la vez), así que el estado real de "cuál está
   marcado" lo maneja el navegador solo — si se pintara con una clase
   fija al cargar la página, se quedaría pegada en la opción vieja
   cuando el cliente elige otra sin recargar (justo el bug que hubo). */
.odana-gender-pill:has(input:checked){
    background:var(--odana-text);
    color:var(--odana-bg);
}

/* Tira de productos filtrados con scroll horizontal en vez de
   cuadrícula que crece hacia abajo (ver front/home/index.php, sección
   #tienda) — cada tarjeta usa .odana-scroll-card (ancho fijo) en vez
   de las columnas normales de Bootstrap que usa product-card.php por
   default, para que no se encojan y quepan todas en una fila. */
.odana-product-scroll{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:16px;
    padding-bottom:12px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
}

.odana-scroll-card{
    flex:0 0 auto;
    width:200px;
    scroll-snap-align:start;
}

@media (min-width:768px){
    .odana-scroll-card{
        width:230px;
    }
}

/* Flechas para mover la tira de productos a los lados sin depender
   solo del touch/trackpad (ver front.js, listener de
   [data-scroll-dir]). El wrap necesita position:relative para poder
   anclar los botones sobre los bordes de la tira. */
.odana-product-scroll-wrap{
    position:relative;
}

.odana-scroll-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--odana-surface);
    color:var(--odana-text);
    border:1px solid var(--odana-border);
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.odana-scroll-btn:hover{
    background:var(--odana-bg);
}

.odana-scroll-btn--prev{
    left:-6px;
}

.odana-scroll-btn--next{
    right:-6px;
}

.odana-card-share-btn{
    position:absolute;
    bottom:10px;
    right:10px;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--odana-surface);
    color:var(--odana-text);
    border:1px solid var(--odana-border);
    border-radius:50%;
    font-size:.85rem;
    opacity:.9;
}

.odana-card-share-btn:hover{
    opacity:1;
}

[data-theme="dark"] .odana-trust-badges{
    background:var(--odana-surface);
    border-color:var(--odana-border);
}