<style>
.sdfsdf{
	margin:0;
}
header{
    display: block;
    max-width: 960px;
    margin: auto;
    width: 100%;
	background-color: #333; 
	color: white; 
}
header img {
    max-width: 100%;
    height: auto;
    display: block;
}
.topdiv, .topdiv02 {
	color: white;
    font-size: 2em; /* ajusta según convenga */
    text-align: center;
    padding: 0px;
    margin: 0px;       /* <--- quita cualquier margen por defecto */
	max-width: 960px;
    margin: auto;
    width: 100%;	
}

.topdiv02 {
    font-size: 1em; /* ajusta según convenga */
}
.container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    padding:5px;	
	max-width: 960px;
	margin:auto;
}
.imgtop{
    display: block; /* importante si es img */
    max-width: 960px;
    margin: auto;
    width: 100%;
}
.producto{
    background:white;
    border-radius:8px;
    padding:10px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.marca{
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;		
	font-size: 16px;
	color:darkred;
    padding-bottom: 8px; /* solo inferior */	
}

/* .producto img{ */
/*    width:100%; */
/*    max-width:180px; */
/* } */

/* PEDIDO CARRITO */
.carrito {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin-bottom: 10px;
}
.carrito th {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.carrito th {
  background-color: #f8f8f8;
  font-weight: bold;
}
.carrito tbody tr:hover {
  background-color: #f1f1f1;
}
.cantidad_pedido{
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;	
	font-size: 18px;
}
.txt_pro{
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;	
	font-size: 14px;
}
.tr_down{
	border-bottom: 1px solid #ddd;	
}
.td_down{
    padding-top: 20px;    /* espacio arriba */
    padding-bottom: 20px; /* espacio abajo */
	border-bottom: 1px solid #ddd;	
}
.titulo_normal{
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;	
	font-size: 20px;
}
.total_pedido{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;
    max-width: 960px;
    margin: 0 auto;

    padding:20px;
    color:white;
    background-color:#25d366;
    box-sizing:border-box;
	text-shadow:0px 0px 4px black; 
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; 
	font-size:22px;	
	font-weight:bold;
}
.boton-pedido{
  background:#ff4c00;
  color:white;
  text-shadow:2px 2px 4px #712200;
  padding:12px 50px;
  border:none;
  border-radius:15px;
  font-weight:bold;
  cursor:pointer;
  text-decoration:none;  
}
.boton-pedido:hover{
  background:#e65c00;
}
.boton-atras{
  display:inline-block;
  text-decoration:none;
  color:black;
  font-size:24px;
  font-weight:bold;
  width:40px;
  height:40px;
  line-height:40px;
  text-align:center;
  
  border:1px solid #555;
  border-radius:5px;
  box-sizing:border-box;
  padding-bottom: 7px
}
.boton-atras:hover{
  background:gray;
}

.producto img{
    width:100%;
    height:auto;
}

.contenedor_carrito{
  width:70px;
  position: -webkit-sticky;
  position: sticky;
  top: 5;
  z-index: 1000;
  /* position:relative; */
  text-align:left;
  text-decoration: none;
  display: inline-block;
}
.numero_carrito{
  width:24px;
  height:24px;
  background:white;
  color:black;
  border-radius:50%;
  position:absolute;
  top:5px;
  right:5px;
  text-align:center;
  line-height:25px;
  font-weight:bold;
  font-size:12px;
  text-decoration: none;
}


/* FORMULARIO PEDIDO*/
.contenedor_form{
  max-width:400px;
  margin:auto;
  background:#fff9ed;
  padding:20px;
  border-radius:8px;
}
label{
  display:block;
  margin-top:12px;
  font-weight:bold;
  font-family: 'Roboto', Arial, sans-serif;
}
input, textarea{
  width:100%;
  padding:12px;
  margin-top:5px;
  border:1px solid #ccc;
  border-radius:5px;
  font-size:16px;
  box-sizing:border-box;
}
textarea{
  height:80px;
}


.precio{
    color:#e63946;
    font-weight:bold;
    font-size:18px;
}

.boton{
    display:inline-block;
    margin-top:10px;
    padding:10px 15px;
    background:#25D366;
    color:white;
    text-decoration:none;
    border-radius:5px;
}

footer{
    text-align:center;  
    font-size:14px;
	background:#25d366;
	position: fixed;
	bottom: 0;
	padding:5px;
    left: 50%;
    transform: translateX(-50%);	
    width: 98%; /* tamaño en PC */
	max-width: 500px;
    height: auto;	
	border-radius: 15px 15px 0 0;
}

.modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
}

.modal-contenido{
	position: relative;
  background:white;
  width:300px;
  padding:10px;
  margin:25px auto;  
  text-align:center;
}
.cerrar_modal{
	position: absolute;
	padding: 0px 5px 5px 5px;
	color:white;
	background-color:red;
	font-size: 18px;
	top: 8px;
	right: 8px;
}
.fragancia{
	font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;	
    padding-top: 10px;	
	font-size: 20px;
}

.img__pro_modal{
	width:60%;
}

.opciones{
  display:flex;
  gap:20px;
}

.precios{
  font-size:24px;
  color:red;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  width: 240px;
  border:0px;
  text-align: center;
}

.total{
  border:none;
  background:transparent;
  font-weight:bold;
}

.precio_activo{
	display:block;
}

.opciones img{
  border:1px solid #ddd;
  border-radius:0;
  cursor:pointer;
}

.opciones img.activa{
  border:1px solid #007bff;
  border-radius:8px;
}

#imgactive {
  border:1px solid #007bff;
  border-radius:8px;
}

.boton-comprar{
  background:#28a745;
  color:#fff;
  padding:12px 25px;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

.cantidad{
  display:inline-flex;
}

.cantidad button{
  background:#1f6ea4;
  color:white;
  border:none;
  width:40px;
  font-size:20px;
  cursor:pointer;
}

.cantidad input{
  width:40px;
  text-align:center;
  border:1px solid #ddd;
}

/* tablet */
@media (max-width:960px){
    .container{
        grid-template-columns:repeat(3,1fr);
    }
}

/* movil */
@media (max-width:600px){
    .container{
        grid-template-columns:repeat(2,1fr);
    }

}
</style>