body{background:#ffffff;font-family:Tahoma;}

/* Estilo para bloques de texto en la home */
.home-text-block {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.slide-image{width:100%;font-family:Tahoma;}
.carousel-holder{margin-bottom:30px;font-family:Tahoma;}
.carousel-control,
.item{border-radius:4px;font-family:Tahoma;}
.caption{height:130px;overflow:hidden;font-family:Tahoma;}
.thumbnail img{width:100%;font-family:Tahoma;}
.ratings{padding-right:10px;padding-left:10px;color:#d17581;font-family:Tahoma;}
.thumbnail{padding:0;font-family:Tahoma;}
.thumbnail .caption-full{padding:9px;color:#333;font-family:Tahoma;}
#menu .glyphicon{margin-right:10px;}
#menu .panel-body{padding:0px;}
#menu .panel-body table tr td{padding-left:15px}
#menu .panel-body .table{margin-bottom:0px;}
#login-nav input{margin-bottom:15px;}
#header{background:url(../images/bg5.png) no-repeat left bottom;background-repeat:no-repeat;width:100%;z-index:1000;top:0;position:absolute;font-family:Tahoma;}
#header.affix{top:-106px;position:fixed!important;font-family:Tahoma;}
#header.affix-bottom{top:-106px!important;position:fixed!important;font-family:Tahoma;}
#header-top{min-height:100px;font-family:Tahoma;}
#header .navbar{margin-bottom:0;border-radius:0px;font-family:Tahoma;}
#content{margin-top:1px;font-family:Tahoma;}
#header-top .title{padding:20px;padding-left:5px;font-family:Tahoma;}
#header-top .logo-img{margin-top:2px;width:116px;float:left;font-family:Tahoma;}
#header-top .logo-text{margin-left:10px;padding-top:10px;font-family:Tahoma;}
.header-button{margin:10px;margin-right:0;box-shadow:0px 0px 2px #000;border-radius:4px;font-family:Tahoma;}
.flags > button, .flags.open > button{background:none!important;border:0!important;font-family:Tahoma;}
.feature{margin-bottom:20px;font-family:Tahoma;}
.nav-pills{margin-top:20px;font-family:Tahoma;}
.calendar-item, .shop-item{text-align:center;padding:10px;font-family:Tahoma;}
.calendar-item h2{font-size:18px;margin-top:10px;font-family:Tahoma;}
.calendar-item span{font-size:18px;margin-bottom:10px;margin-top:10px;font-family:Tahoma;}
.calendar-item a{text-decoration: none;}
.navbar-default{background:#ff9123;background:-moz-linear-gradient(top, #ff9123 0%, #cf3700 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9123), color-stop(100%,#cf3700));background:-webkit-linear-gradient(top, #ff9123 0%,#cf3700 100%);background:-o-linear-gradient(top, #ff9123 0%,#cf3700 100%);background:-ms-linear-gradient(top, #ff9123 0%,#cf3700 100%);background:linear-gradient(to bottom, #ff9123 0%,#cf3700 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9123', endColorstr='#cf3700',GradientType=0);font-family:Tahoma;}
.breadcrumb{background-color:#f5f5f5;font-family:Tahoma;font-size: 11px;}
.add-cart:focus, .add-cart:hover{text-decoration: none;}
.precio-producto{font-size: 32px;}
hr, .page-header{border-color:#fdead8;font-family:Tahoma;}
.side-collapse{display: none;}

/* Eliminamos las reglas antiguas de .grid-productos que estaban aquí */
/* .grid-productos{display: flex;} */
/* .row.grid-productos{flex-wrap: wrap;} */
/* .grid-productos.producto-individual{flex-direction: column;} */

/* Nuevos estilos para productos con Flexbox */
.col-sm-4.grid-productos.producto-individual {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px; /* Aumentamos un poco el margen para mejor separación */
}

.col-sm-4.grid-productos.producto-individual .thumbnail {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    width: 100%;
    padding: 15px; /* Añadimos un padding interno al thumbnail */
    border: 1px solid #ddd; /* Aseguramos un borde visible */
    border-radius: 4px; /* Bordes redondeados consistentes */
}

.col-sm-4.grid-productos.producto-individual .thumbnail img {
    margin-bottom: 10px; /* Espacio debajo de la imagen */
}

.col-sm-4.grid-productos.producto-individual .thumbnail .calendar-item {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.col-sm-4.grid-productos.producto-individual .thumbnail .calendar-item h5 {
    min-height: 2.4em; /* Para asegurar espacio para dos líneas, ajustable */
    line-height: 1.2em;
    margin-top: 0; /* Quitar margen superior del h5 si es necesario */
    flex-grow: 1; /* Permite que el título ocupe espacio si otros contenidos son cortos */
}

.col-sm-4.grid-productos.producto-individual .thumbnail .calendar-item p[itemprop="offers"] {
    margin-bottom: 10px; /* Espacio antes del botón */
}

.col-sm-4.grid-productos.producto-individual .thumbnail .btn {
    margin-top: auto; /* Empuja el botón hacia abajo dentro del flex container .calendar-item */
}
/* Fin nuevos estilos para productos */

h5.dos-lineas{height: 2.2em; line-height: 1.1em;}
.datepicker table tr td.day:not(.disabled){color: #00a500;}
.breaking-word{word-break: break-all;}
@media screen and (max-width:768px){
    .header-button{margin-right:0px!important;font-family:Tahoma;}
    #content{margin-top:52px;font-family:Tahoma;}
    .side-collapse-container{width:100%;position:relative;left:0;transition:left .4s;font-family:Tahoma;}
    .side-collapse-container.out{left:200px;font-family:Tahoma;}
    .side-collapse{display:block;top:50px;bottom:0;left:0;width:200px;position:fixed;overflow:hidden;transition:width .4s;font-family:Tahoma;}
    .side-collapse.in{width:0;font-family:Tahoma;}
    .navbar-toggle.pull-left{margin-left:5px;font-family:Tahoma;}
    /* .grid-productos{display: block;} -> Reemplazado por la regla más específica abajo */
    header .btn.pull-right{position:relative;margin-right:15px;padding:5px 11px;margin-top:9px;margin-bottom:8px;border-radius:4px;box-shadow:0px 0px 2px black;font-family:Tahoma;}

    .row[style*="display: flex"] { /* Para el row que modificamos en index.php */
        display: block; 
    }
    .col-sm-4.grid-productos.producto-individual {
        display: block; 
        margin-bottom: 20px; /* Mantenemos un margen inferior en móvil */
    }
    .col-sm-4.grid-productos.producto-individual .thumbnail {
        /* Aquí no necesitamos flex-grow si el padre es block */
        /* Otros estilos del thumbnail como padding, border se mantienen */
    }
}
.hamburger{display: none;}
@media (min-width: 768px) and (max-width:990px){
    .hamburger{display: block;}
    #menu{display: none;}
    .product-header4{display: none !important;}
    .nav.navbar-nav.side-collapse{top: auto;position: inherit;}
    .side-collapse{display:block;top: 50px; position: absolute;}
    .side-collapse.in{display: none !important;}
}
.nav.navbar-nav.side-collapse{display: block;}
.logo-mobile{height:26px;margin-top:-2px;margin-left:-14px;font-family:Tahoma;}
.gallery .thumbnail{height:135px;overflow:hidden;border-radius:0;border:0;background:transparent;font-family:Tahoma;}
footer{background-color: antiquewhite;font-weight:bolder;}
footer hr{border-width:2px;font-family:Tahoma;}
footer .container{padding-left:0px;padding-right:0px;font-family:Tahoma;}
footer .column ul{font-size:12px;line-height:22px;list-style:none outside none;padding:0;font-family:Tahoma;}
footer h4{font-size:14px;padding-top:2px;font-family:Tahoma;}
footer .social ul{list-style:none outside none;font-family:Tahoma;}
footer #link{padding-left:4px;font-family:Tahoma;}
.detailBox{width:100%;border:1px solid #bbb;margin-top:20px;font-family:Tahoma;}
.titleBox{background-color:#fdfdfd;padding:10px;font-family:Tahoma;}
.titleBox label{color:#444;margin:0;display:inline-block;font-family:Tahoma;}
.commentBox{padding:10px;border-top:1px dotted #bbb;font-family:Tahoma;}
.commentBox .form-group:first-child, .actionBox .form-group:first-child{width:80%;font-family:Tahoma;}
/*.commentBox .form-group:nth-child(2), .actionBox .form-group:nth-child(2){width:18%;font-family:Tahoma;}*/
.actionBox .form-group {width:100%;padding-bottom:10px;}
.actionBox .form-group *{width:100%;font-family:Tahoma;}
.seccion-comentarios {padding-left:40px;background-color:rgba(176, 102, 19, 0.15) }
.seccion-comentarios .form-group:first-child{padding-top:10px}
.seccion-comentarios .form-group *{width:90%}
.taskDescription{margin-top:10px 0;font-family:Tahoma;}
.commentList{padding:0;list-style:none;max-height:200px;overflow:auto;font-family:Tahoma;}
.commentList li{margin:0;margin-top:10px;font-family:Tahoma;background-color:#fdead8;padding-bottom: 2px;padding-top: 2px;padding-left: 8px;padding-right: 8px;border:1px solid #bbb;border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;}
.commentList li > div{font-family:Tahoma;}
.commentHeader{border-bottom: thick #4e5458;}
.commentHeader p{margin: 0;}
.commentHeader p em{color: #6b7175;}
.commenterImage{width:30px;margin-right:5px;height:100%;float:left;font-family:Tahoma;}
.commenterImage img{width:100%;border-radius:50%;font-family:Tahoma;}
.commentText p{margin:0;font-family:Tahoma;border-top:1px dotted #bbb;padding-top: 6px;}
/* Codigo estrellas commentbox */
	.clasificacion {
		direction: rtl;
		unicode-bidi: bidi-override;
	}
	
	.clasificacion input {
		display: none;
	}

	.clasificacion label {
		color: grey;
		float: right;
		font-size: 45px;
	}	

	.clasificacion label:hover,
	.clasificacion label:hover ~ label {
		color: orange;
	}

	.clasificacion input:checked ~ label {
		color: orange;
	}

    .lradio1 {
        padding-right: 25%;
    }

.star-ratings {
    width: 7.5em;
    height: 1.5em;
    display: inline-block;
    position: relative;
    font-size: 10px;
    float:right;
}

.star-ratings:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    left: 0;
    color: orange;
    content: "\f006\f006\f006\f006\f006";
}

.star-ratings:after {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 1.5em;
    position: absolute;
    top: 0;
    left: 0;
    color: orange;
    content: "\f005\f005\f005\f005\f005";
    overflow: hidden;
}

.star-ratings.one:after {
    content: "\f005";
}

.star-ratings.onehalf:after {
    content: "\f005\f089";
}

.star-ratings.two:after {
    content: "\f005\f005";
}

.star-ratings.twohalf:after {
    content: "\f005\f005\f089";
}

.star-ratings.three:after {
    content: "\f005\f005\f005";
}

.star-ratings.threehalf:after {
    content: "\f005\f005\f005\f089";
}

.star-ratings.four:after {
    content: "\f005\f005\f005\f005";
}

.star-ratings.fourhalf:after {
    content: "\f005\f005\f005\f005\f089";
}
/*Fin codigo estrellas commentbox */
.sub-text{color:#aaa;font-family:Tahoma;font-size:11px;}
.actionBox{border-top:1px dotted #bbb;padding:10px;font-family:Tahoma;}
.star-ratings-css{unicode-bidi:bidi-override;color:#c5c5c5;font-size:24px;height:25px;width:100px;margin:10px auto 15px;position:relative;padding:0;text-shadow:0px 1px 0 #a2a2a2;font-family:Tahoma;}
.star-ratings-css span:hover,
.star-ratings-css span:hover ~ span,
.star-ratings-css span:focus,
.star-ratings-css span:focus ~ span {color: orange;cursor: pointer;}
.star-ratings-css .star-ratings-css-top{color:#e7711b;padding:0;text-shadow:0px 1px 0 #ab5414;position:absolute;z-index:1;display:block;left:0px;overflow:hidden;font-family:Tahoma;}
.star-ratings-css .star-ratings-css-bottom{z-index:0;font-family:Tahoma;}
    /*- Codigo para la política de cookies-*/
     
     
    /* <style type="text/css"> */ /* Esta etiqueta style es redundante dentro de un CSS */
     
    /* CSS para la animación y localización de los DIV de cookies */
     
    @keyframes desaparecer
    {
    0%		{bottom: 0px;}
    80%		{bottom: 0px;}
    100%		{bottom: -50px;}
    }
     
    @-webkit-keyframes desaparecer /* Safari and Chrome */
    {
    0%		{bottom: 0px;}
    80%		{bottom: 0px;}
    100%		{bottom: -50px;}
    }
     
    @keyframes aparecer
    {
    0%		{bottom: -38px;}
    10%		{bottom: 0px;}
    90%		{bottom: 0px;}
    100%		{bottom: -38px;}
    }
     
    @-webkit-keyframes aparecer /* Safari and Chrome */
    {
    0%		{bottom: -38px;}
    10%		{bottom: 0px;}
    90%		{bottom: 0px;}
    100%		{bottom: -38px;}
    }
    #cookiesms1:target {
        display: none;
    }
    .cookiesms{	
    	width:100%;
    	height:43px;
    	margin:0 auto;
    	padding-left:1%;
            padding-top:5px;
            font-size: 1.2em;
    	clear:both;
            font-weight: strong;
    color: #333;
    bottom:0px;
    position:fixed;
    left: 0px;
    background-color: #FFF;
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
    transition: bottom 1s;
    -webkit-transition:bottom 1s; /* Safari */
    -webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
    -moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
    box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
    z-index:999999999;
    }
     
    .cookiesms:hover{
    bottom:0px;
    }
    .cookies2{
    background-color: #FFF;
    display:inline;
    opacity:0.95;
    filter:alpha(opacity=95);
    position:absolute; 
    left:1%; 
    top:-30px;
    font-size:15px;
    height:30px;
    padding-left:25px;
    padding-right:25px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-topleft: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    -webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
    -moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
    box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
    }
     
    /* Fin del CSS para cookies */
    .menor-padding{
        padding-left: 5%;
        padding-right: 5%
    } 
    .precio-carro{
        padding-left: 0px;
        min-width: 32px;
    }
    .unidades-carro{
        padding-left: 2%;
        padding-right: 5%;
    }

    /* Estilos para la tarjeta de producto - NUEVO DISEÑO */
    .thumbnail {
        border: 1px solid #ccc; /* Borde más oscuro y definido */
        box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Sombra más pronunciada */
        border-radius: 8px; /* Esquinas más redondeadas */
        background-color: #fff; /* Fondo blanco para el área de texto */
        padding: 15px; /* Añadir un poco de padding general si no lo tiene */
    }

    /* Si el padding anterior afecta a la imagen, podemos anularlo para el div de la imagen si es necesario */
    .thumbnail img {
        border-radius: 8px 8px 0 0; /* Redondear esquinas superiores si la imagen está pegada al borde */
    }

    /* Contenedor del texto dentro del thumbnail */
    .thumbnail .calendar-item { /* O .caption si Bootstrap lo usa por defecto y lo quieres reutilizar */
        padding: 10px; /* Padding para el contenido textual */
        background-color: #fff; /* Asegurar fondo blanco */
    }

    /* Título del producto */
    .thumbnail .calendar-item h5 a {
        color: #EA7525; /* Cambiado a naranja corporativo */
        font-weight: normal; /* Ajustar si se ve muy grueso */
    }
    .thumbnail .calendar-item h5 a:hover {
        color: #d6681e; /* Naranja más oscuro para el hover */
        text-decoration: none;
    }


    /* Precio del producto */
    .thumbnail .calendar-item p[itemprop="offers"] {
        color: #555; /* Gris oscuro */
        font-size: 1em; /* Ajustar tamaño si es necesario */
        margin-bottom: 15px; /* Más espacio antes del botón */
    }

    /* Botón "Añadir al carro" */
    .thumbnail .btn-success.btn-block { /* Especificidad para el botón de la tarjeta */
        background-color: #5cb85c; /* Un verde estándar Bootstrap, ajustar al tono de la imagen 2 */
        border-color: #4cae4c;    /* Ajustar al tono de la imagen 2 */
        color: #fff;
        padding: 10px 15px; /* Padding vertical y horizontal aumentado */
        border-radius: 6px; /* Esquinas más redondeadas */
        font-size: 1em; /* Ajustar tamaño de fuente si es necesario */
    }

    .thumbnail .btn-success.btn-block:hover,
    .thumbnail .btn-success.btn-block:focus {
        background-color: #4cae4c; /* Verde más oscuro para hover/focus */
        border-color: #398439;
    }

/* Sobrescribir colores primarios de Bootstrap */
.text-primary,
.panel-primary .panel-title,
.panel-primary > .panel-heading {
    color: #EA7525 !important; /* Naranja corporativo */
}

.panel-primary,
.panel-primary > .panel-heading {
    border-color: #EA7525 !important; /* Naranja corporativo para bordes */
}

.panel-primary > .panel-heading {
    background-color: #fdf0e6 !important; /* Un naranja muy claro para el fondo del heading, o #EA7525 si se prefiere sólido */
}

/* Ajuste para que los enlaces dentro de .panel-primary .panel-title también sean naranjas */
.panel-primary .panel-title a {
    color: #EA7525 !important;
}

/* Si se quieren los botones .btn-primary naranjas */
.btn-primary {
    background-color: #EA7525 !important;
    border-color: #d6681e !important; /* Un tono ligeramente más oscuro para el borde del botón */
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #d6681e !important;
    border-color: #c05c1a !important;
    color: #ffffff !important;
}

/* Estilos para el nuevo Footer */
footer {
    background-color: #ffffff !important; 
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #eeeeee;
}

footer hr {
    display: none;
}

.footer-logo-container img {
    max-height: 60px; /* Ajusta la altura máxima del logo según necesites */
    margin-bottom: 15px; /* Espacio si las columnas de enlaces pasan abajo en responsive */
}

footer h4 {
    color: #333333;
    margin-bottom: 15px; /* Más espacio entre título y lista */
    font-size: 16px; /* Un poco más grande el título de sección */
}

footer ul {
    list-style: none;
    padding-left: 0;
}

footer ul li a {
    color: #EA7525; /* Naranja corporativo */
    font-size: 13px;
    line-height: 1.9; /* Un poco más de espacio entre líneas */
}

footer ul li a:hover {
    color: #d6681e; /* Naranja más oscuro */
    text-decoration: underline;
}

.social-icons-footer .btn-social-icon {
    color: #EA7525;
    margin-right: 5px; /* Espacio entre iconos */
}

.social-icons-footer .btn-social-icon:hover {
    color: #d6681e;
}

footer .container .row .col-lg-12.text-center span {
    color: #777777;
    font-size: 13px;
    display: inline-block; /* Para asegurar que el padding/margin funcione bien */
    margin-top: 15px; /* Espacio sobre el copyright */
}

/* Ajustes para responsive si las columnas se apilan */
@media (max-width: 991px) { /* md breakpoint */
    .footer-logo-container {
        text-align: center; /* Centrar logo en pantallas medianas si se apila */
    }
    footer .col-sm-4 {
        margin-bottom: 20px; /* Espacio entre secciones de enlaces apiladas */
    }
}

@media (max-width: 767px) { /* sm breakpoint */
    .footer-logo-container {
        text-align: center; /* Centrar logo en pantallas pequeñas */
        margin-bottom: 20px;
    }
     footer .col-sm-4 {
        text-align: center; /* Centrar texto de las columnas de enlaces */
    }
    .social-icons-footer {
        text-align: center; /* Centrar iconos sociales */
    }
}

/* Estilos para la página de detalles del pedido y otras de Mi Cuenta */
.mi-cuenta-seccion .panel {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.075);
    border: 1px solid #e0e0e0;
    margin-bottom: 25px; /* Espacio entre paneles */
}

.mi-cuenta-seccion .panel-heading {
    background-color: #f9f9f9 !important; 
    color: #333 !important;
    border-bottom: 1px solid #e0e0e0;
    border-top-left-radius: 7px; /* Ajuste para que encaje con el borde del panel */
    border-top-right-radius: 7px; /* Ajuste para que encaje con el borde del panel */
    padding: 12px 20px; /* Ajustar padding */
}

.mi-cuenta-seccion .panel-title {
    font-size: 18px;
    font-weight: 600;
    color: #EA7525 !important; 
}

.mi-cuenta-seccion .panel-body {
    padding: 20px; /* Buen padding para el cuerpo del panel */
}

.mi-cuenta-seccion .panel-body h4 { 
    font-size: 16px;
    font-weight: 600;
    color: #444; /* Un poco más oscuro para los subtítulos */
    margin-top: 0;
    margin-bottom: 15px;
}

.mi-cuenta-seccion address {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 0;
    color: #555; /* Color de texto más suave para direcciones */
}
.mi-cuenta-seccion address strong {
    font-weight: 600;
    color: #333;
}


/* Tabla de resumen de compra */
.mi-cuenta-seccion .table-resumen-compra th {
    background-color: #fcfcfc;
    font-weight: 600; /* Cabeceras de tabla en negrita */
    color: #444;
}
.mi-cuenta-seccion .table-resumen-compra img {
    border-radius: 4px;
}

/* Sección de totales del pedido */
.pedido-totales-tabla th,
.pedido-totales-tabla td {
    font-size: 15px;
    padding: 6px 0 !important; /* Más compacto */
    border-top: none !important; 
}
.pedido-totales-tabla tr:first-child th,
.pedido-totales-tabla tr:first-child td {
    padding-top: 10px !important; 
}
.pedido-totales-tabla tr:last-child th,
.pedido-totales-tabla tr:last-child td {
    font-size: 18px;
    font-weight: bold;
    color: #EA7525; 
    padding-top: 10px !important;    /* Espacio antes del total grande */
    padding-bottom: 10px !important; 
}

/* Botones de acción en detalle-pedido */
.detalle-pedido-acciones {
    margin-top: 20px; /* Reducido un poco */
    margin-bottom: 15px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}
.detalle-pedido-acciones .btn {
    margin-left: 10px;
    padding: 10px 18px; /* Ajuste ligero */
    font-size: 14px; /* Un poco más pequeño */
}
.detalle-pedido-acciones .btn i {
    margin-right: 7px;
}

/* Fin de estilos Mi Cuenta */

/* === Cookie Consent Banner === */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50; /* Un color oscuro pero no negro puro */
    color: #ecf0f1; /* Texto claro */
    padding: 15px 20px;
    z-index: 1050; /* Encima de otros elementos, Bootstrap usa hasta 1040 para modales */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    display: none; /* Se mostrará con JS */
    font-size: 14px;
    line-height: 1.5;
}

.cookie-consent-banner .cookie-consent-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cookie-consent-banner p {
    margin: 0 0 10px 0;
}

.cookie-consent-banner a {
    color: #3498db; /* Azul para enlaces, o #dd4814 si prefieres naranja corporativo */
    text-decoration: underline;
}

.cookie-consent-banner a:hover {
    color: #2980b9; /* Azul más oscuro, o #c34012 para naranja */
}

.cookie-consent-banner .cookie-consent-buttons {
    margin-top: 10px;
}

.cookie-consent-banner .cookie-consent-buttons button {
    background-color: #dd4814; /* Naranja corporativo */
    color: #fff;
    border: none;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
}

.cookie-consent-banner .cookie-consent-buttons button:hover {
    background-color: #c34012; /* Naranja más oscuro */
}

.cookie-consent-banner .cookie-consent-buttons button#acceptEssentialCookiesBtn {
    background-color: #95a5a6; /* Gris para "Solo esenciales" */
}

.cookie-consent-banner .cookie-consent-buttons button#acceptEssentialCookiesBtn:hover {
    background-color: #7f8c8d; /* Gris más oscuro */
}

.cookie-consent-banner .cookie-consent-buttons button#moreInfoCookiesBtn {
    background-color: transparent;
    color: #ecf0f1;
    border: 1px solid #ecf0f1;
}

.cookie-consent-banner .cookie-consent-buttons button#moreInfoCookiesBtn:hover {
    background-color: #ecf0f1;
    color: #2c3e50;
}

/* Responsive adjustments if needed */
@media (min-width: 768px) {
    .cookie-consent-banner .cookie-consent-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
    .cookie-consent-banner p {
        margin-bottom: 0;
        margin-right: 20px;
    }
    .cookie-consent-banner .cookie-consent-buttons {
        margin-top: 0;
        white-space: nowrap; /* Evitar que los botones se rompan en dos líneas si hay espacio */
    }
}

/* Estilos para las tarjetas de pedidos en pedidos.php */
.order-cards-container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px; /* Contrarrestar padding de las columnas */
    margin-right: -15px; /* Contrarrestar padding de las columnas */
}

.order-cards-container > [class*='col-'] {
    display: flex; /* Permite que .order-card use flex-grow y height: 100% */
    padding-left: 15px;
    padding-right: 15px;
}

.order-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 30px; /* Espacio entre filas de tarjetas */
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    width: 100%; /* Asegura que la tarjeta ocupe el ancho de la columna */
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
}

.order-card h4 {
    margin-top: 0;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #333;
}

.order-card p {
    font-size: 13px;
    margin-bottom: 8px;
    color: #555;
    line-height: 1.5;
}

.order-card p strong {
    color: #333;
}

.order-card .btn {
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
    background-color: #f07c3c;
    border-color: #e36a28;
    color: #fff;
}

.order-card .btn:hover, .order-card .btn:focus {
    background-color: #dd6925;
    border-color: #c55a1f;
    color: #fff;
}

/* Estilos para los estados de los pedidos */
.order-card span[class*="status-"] {
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: #fff;
}

.order-card .status-pagado, /* Asumiendo que el estado es 'Pagado' */
.order-card .status-completed, /* Otro posible estado para completado */
.order-card .status-entregado {
    background-color: #5cb85c; /* Verde */
}

.order-card .status-pendiente, /* Asumiendo 'Pendiente' */
.order-card .status-pendiente-de-pago, /* Para 'Pendiente de Pago' */
.order-card .status-pending {
    background-color: #f0ad4e; /* Naranja */
}

.order-card .status-cancelado, 
.order-card .status-cancelled {
    background-color: #d9534f; /* Rojo */
}

.order-card .status-enviado,
.order-card .status-shipped {
    background-color: #337ab7; /* Azul */
}

.order-card .status-procesando, 
.order-card .status-processing {
    background-color: #777; /* Gris */
}
/* Añadir más clases de estado según los valores reales en la BD */

/* Ajuste para que el contenedor principal ocupe el 80% del ancho y esté centrado */
.container {
    width: 80% !important; /* Establece el ancho al 80% del viewport */
    max-width: none !important; /* Elimina el max-width fijo de Bootstrap si lo hubiera para .container */
    margin-left: auto !important; /* Centra el contenedor */
    margin-right: auto !important; /* Centra el contenedor */
}

/* Si se quiere aplicar solo a un contenedor específico, se usaría un ID o clase más específica.
   Ejemplo: 
   #content.container {
       width: 80% !important;
       max-width: none !important;
       margin-left: auto !important;
       margin-right: auto !important;
   }
*/

/* Estilos para las tarjetas de pedidos en pedidos.php */
.order-cards-container {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px; /* Contrarrestar padding de las columnas */
    margin-right: -15px; /* Contrarrestar padding de las columnas */
}

.order-cards-container > [class*='col-'] {
    display: flex; /* Permite que .order-card use flex-grow y height: 100% */
    padding-left: 15px;
    padding-right: 15px;
}

.order-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 30px; /* Espacio entre filas de tarjetas */
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    width: 100%; /* Asegura que la tarjeta ocupe el ancho de la columna */
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
}

.order-card h4 {
    margin-top: 0;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #333;
}

.order-card p {
    font-size: 13px;
    margin-bottom: 8px;
    color: #555;
    line-height: 1.5;
}

.order-card p strong {
    color: #333;
}

.order-card .btn {
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
    background-color: #f07c3c;
    border-color: #e36a28;
    color: #fff;
}

.order-card .btn:hover, .order-card .btn:focus {
    background-color: #dd6925;
    border-color: #c55a1f;
    color: #fff;
}

/* Estilos para los estados de los pedidos */
.order-card span[class*="status-"] {
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
    color: #fff;
}

.order-card .status-pagado, /* Asumiendo que el estado es 'Pagado' */
.order-card .status-completed, /* Otro posible estado para completado */
.order-card .status-entregado {
    background-color: #5cb85c; /* Verde */
}

.order-card .status-pendiente, /* Asumiendo 'Pendiente' */
.order-card .status-pendiente-de-pago, /* Para 'Pendiente de Pago' */
.order-card .status-pending {
    background-color: #f0ad4e; /* Naranja */
}

.order-card .status-cancelado, 
.order-card .status-cancelled {
    background-color: #d9534f; /* Rojo */
}

.order-card .status-enviado,
.order-card .status-shipped {
    background-color: #337ab7; /* Azul */
}

.order-card .status-procesando, 
.order-card .status-processing {
    background-color: #777; /* Gris */
}
/* Añadir más clases de estado según los valores reales en la BD */

/* Estilos para la Página de Producto (producto.php) */
.product-page-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px #eee;
}
.product-main {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
.product-image-column {
    width: 35%;
    min-width: 340px;
    max-width: 500px;
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-image-column .main-product-image {
    border-radius: 10px;
    box-shadow: 0 2px 8px #eee;
    max-width: 350px;
    margin-bottom: 18px;
}
.product-opinion-form {
    width: 100%;
    background: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 1px 4px #eee;
    padding: 18px 16px 10px 16px;
    margin-bottom: 18px;
    transition: box-shadow 0.2s;
}
.product-opinion-form:focus-within {
    box-shadow: 0 2px 12px #e0e0e0;
}
.product-reviews-summary {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.product-reviews-summary .btn-primary {
    background: #ea7525;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 18px;
    transition: background 0.2s;
}
.product-reviews-summary .btn-primary:hover {
    background: #c95e1a;
}
.product-details-column {
    flex: 0 0 65%;
    width: 65%;
    padding-left: 40px;
}
.product-details-column .product-title {
    font-size: 2.2em;
    color: #222;
    margin-bottom: 10px;
    font-weight: 700;
}
.product-description {
    font-size: 1.1em;
    color: #444;
    margin-bottom: 25px;
    line-height: 1.7;
    text-align: justify;
}
.product-separator {
    margin-top: 20px;
    margin-bottom: 25px;
}
.purchase-options {
    margin-bottom: 20px;
    display: flex;
    gap: 18px;
}
.purchase-option-box {
    flex: 1 1 220px;
    padding: 18px 14px 14px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.purchase-option-box h4 {
    margin-top: 0;
    font-size: 1.2em;
    color: #EA7525;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: 600;
}
.purchase-option-box .main-price {
    font-size: 1.7em;
    font-weight: bold;
    color: #333;
}
.purchase-option-box .btn-add-to-cart {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
    font-size: 1.1em;
    border-radius: 6px;
    padding: 10px 18px;
    margin-top: 10px;
    font-weight: 600;
}
.purchase-option-box .btn-add-to-cart:hover {
    background-color: #4cae4c;
}
.purchase-option-box .btn-configure-recurrent {
    background-color: #ea7525;
    border-color: #ea7525;
    color: #fff;
    font-size: 1.1em;
    border-radius: 6px;
    padding: 10px 18px;
    margin-top: 10px;
    font-weight: 600;
}
.purchase-option-box .btn-configure-recurrent:hover {
    background-color: #c95e1a;
}
.product-comments-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.product-comments-section h2 {
    font-size: 1.4em;
    color: #ea7525;
    margin-bottom: 18px;
    font-weight: 700;
}
#comentarios .detailBox {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px #eee;
    padding: 16px 14px 10px 14px;
    margin-bottom: 18px;
}
#comentarios .commentList li {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0 8px 0;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
#comentarios .commentList li:last-child {
    border-bottom: none;
}
#comentarios .commentHeader strong {
    color: #ea7525;
    font-size: 1.1em;
}
#comentarios .commentHeader em {
    color: #888;
    font-size: 0.95em;
    margin-left: 8px;
}
#comentarios .star-ratings {
    color: #ea7525;
    font-size: 1.1em;
    margin-left: 8px;
}
#comentarios .commentText {
    color: #333;
    font-size: 1.08em;
    margin-top: 2px;
}
/* Formulario de opinión campos */
#comentar .form-group input,
#comentar .form-group textarea {
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 1.08em;
    padding: 8px 10px;
    margin-bottom: 10px;
}
#comentar .form-group input:focus,
#comentar .form-group textarea:focus {
    border-color: #ea7525;
    outline: none;
}
#comentar .btn-success {
    background: #5cb85c;
    border: none;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 1.08em;
}
#comentar .btn-success:hover {
    background: #449d44;
}
/* Responsive */
@media (max-width: 900px) {
    .product-main {
        flex-direction: column;
        gap: 0;
    }
    .product-image-column, .product-details-column {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }
}
@media (max-width: 600px) {
    .product-page-container {
        padding: 10px 2px;
    }
    .product-details-column .product-title {
        font-size: 1.3em;
    }
    .purchase-option-box {
        padding: 10px 6px 8px 6px;
    }
}
/* --- FIN MEJORA DE DISEÑO PRODUCTO --- */

/* --- Encabezado de Categoría Mejorado --- */
.categoria-header-container {
    margin-top: 5px;
    margin-bottom: 5px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px #eee;
    padding: 30px 15px 18px 15px; /* Ajustado el padding horizontal */
}
.categoria-header-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.categoria-header-text {
    flex: 1 1 60%;
    padding-right: 30px;
}
.categoria-title {
    font-size: 2.3em;
    font-weight: 700;
    color: #222;
    margin-bottom: 18px;
    letter-spacing: -1px;
}
.categoria-description {
    font-size: 1.18em;
    color: #333;
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 0;
}
.categoria-header-image {
    flex: 0 0 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.categoria-img-rounded {
    max-width: 220px;
    border-radius: 18px;
    box-shadow: 0 2px 12px #e0e0e0;
}
.categoria-header-separator {
    margin-top: 30px;
    margin-bottom: 0;
    border: none;
    border-top: 2px solid #fdead8;
}
@media (max-width: 900px) {
    .categoria-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .categoria-header-text {
        padding-right: 0;
        margin-bottom: 18px;
    }
    .categoria-header-image {
        justify-content: flex-start;
        margin-bottom: 10px;
    }
    .categoria-img-rounded {
        max-width: 100%;
    }
}
@media (min-width: 768px) {
    .categoria-header-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}
/* --- FIN Encabezado de Categoría Mejorado --- */