/* ================= VARIABLES ================= */

:root{
--verde:#6f8f2f;
--verde-dark:#4e6b1f;
--gris:#2e2e2e;
--blanco:#ffffff;
--borde:#e5e5e5;
}

/* ================= RESET ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ================= BODY ================= */

body{
font-family:system-ui, Arial;
background:#f5f6f4;
color:#222;
overflow-x:hidden;
}

/* ================= HEADER ================= */

.header{
height:650px;
width:100%;
overflow:hidden;
background:linear-gradient(
135deg,
var(--verde),
var(--verde-dark)
);
}

.header-logo{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* ================= NAV ================= */

.nav{
display:flex;
justify-content:center;
align-items:center;
gap:22px;
padding:16px;
background:#1f1f1f;
flex-wrap:wrap;
position:sticky;
top:0;
z-index:999;
}

.nav a{
color:white;
text-decoration:none;
font-weight:600;
font-size:17px;
}

/* ================= BUSCADOR ================= */

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.search-strip{
padding:14px 18px;
background:white;
border-bottom:1px solid var(--borde);
}

.search-field{
max-width:820px;
margin:auto;
display:flex;
align-items:center;
gap:10px;
padding:8px 10px 8px 16px;
background:#f5f8ee;
border:1px solid #d3dfbb;
border-radius:999px;
box-shadow:0 2px 8px rgba(38,57,12,.06);
}

.search-field:focus-within{
border-color:var(--verde);
box-shadow:0 0 0 3px rgba(111,143,47,.16);
}

.search-icon{
font-size:25px;
line-height:1;
color:var(--verde-dark);
}

.search-field input{
flex:1;
min-width:0;
padding:8px 0;
border:0;
outline:0;
background:transparent;
font:inherit;
font-size:17px;
color:#222;
}

.search-clear{
padding:8px 14px;
border:0;
border-radius:999px;
background:var(--verde-dark);
color:white;
font-weight:700;
cursor:pointer;
}

.search-results{
max-width:820px;
margin:16px auto 0;
padding:12px 16px;
background:#fff6e3;
border-radius:10px;
color:#6b4a07;
text-align:center;
}

/* ================= CARRITO FLOTANTE ================= */

.cart-floating{
position:fixed;
right:18px;
bottom:18px;

width:68px;
height:68px;

border:none;
border-radius:50%;

background:linear-gradient(
135deg,
var(--verde),
var(--verde-dark)
);

color:white;
font-size:24px;
font-weight:bold;

cursor:pointer;

z-index:999999;

box-shadow:0 8px 25px rgba(0,0,0,.25);
}

/* ================= SECCIONES ================= */

section{
padding:35px 18px;
scroll-margin-top:78px;
}

section[hidden],
.product[hidden]{
display:none !important;
}

h2{
font-size:42px;
margin-bottom:28px;
color:var(--verde-dark);
line-height:1.1;
}

/* ================= GRID ================= */

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:26px;
align-items:start;
}

/* ================= TARJETAS ================= */

.product{
background:white;
border-radius:16px;
padding:16px;

display:flex;
flex-direction:column;
align-items:center;

min-height:560px;

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

transition:.25s;
}

.product:hover{
transform:translateY(-4px);
}

/* ================= IMAGEN ================= */

.product img{
width:100%;
height:320px;
object-fit:cover;
border-radius:12px;
background:#eee;
display:block;
}

/* ================= TITULO ================= */

.product h3{
font-size:24px;
text-align:center;
margin-top:18px;
margin-bottom:10px;
line-height:1.3;
min-height:65px;

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

/* ================= PRECIO ================= */

.product p{
font-size:28px;
font-weight:bold;
color:var(--verde-dark);
margin-bottom:14px;
}

/* ================= PROMOS ================= */

.promo{
width:100%;
background:#edf3df;
padding:12px;
border-radius:10px;
text-align:center;
font-size:18px;
line-height:1.5;
margin-bottom:14px;
}

/* ================= PRODUCTOS ADICIONALES ================= */

.availability-note{
max-width:760px;
margin:-8px auto 26px;
padding:12px 16px;

background:#f5f8ee;
border-left:4px solid var(--verde);
border-radius:8px;

color:#3f4d28;
font-size:16px;
line-height:1.5;
text-align:center;
}

.producto-adicional{
min-height:390px;
}

.linea-shaddai .product img{
object-position:center top;
}

.linea-shaddai .promo{
display:none;
}

.product-placeholder{
width:100%;
height:145px;

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

background:linear-gradient(135deg,#edf3df,#d9e7c2);
border-radius:12px;

color:var(--verde-dark);
font-size:21px;
font-weight:700;
letter-spacing:.4px;
}

/* ================= CONTROLES ================= */

.dynamic-controls{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:14px;
min-height:45px;
}

.dynamic-controls button{
border:none;
background:#eee;
padding:7px 12px;
border-radius:8px;
cursor:pointer;
font-size:18px;
}

.qty{
font-size:20px;
font-weight:bold;
}

/* ================= BOTON ================= */

.add-btn{
margin-top:auto;

width:100%;

padding:14px;

background:linear-gradient(
135deg,
var(--verde),
var(--verde-dark)
);

color:white;
border:none;
border-radius:10px;

font-size:22px;
font-weight:700;

cursor:pointer;
}

/* ================= CARRITO ================= */

.cart{
position:fixed;
right:0;
top:0;

width:390px;
max-width:100%;

height:100%;

background:white;

transform:translateX(100%);
transition:.3s;

display:flex;
flex-direction:column;

box-shadow:-10px 0 25px rgba(0,0,0,.2);

z-index:9999999;
}

.cart.open{
transform:translateX(0);
}

/* HEADER */

.cart-header{
background:var(--verde);
color:white;
padding:18px;

display:flex;
justify-content:space-between;
align-items:center;
}

.cart-header h3{
font-size:30px;
}

.cart-header button{
background:none;
border:none;
color:white;
font-size:30px;
cursor:pointer;
}

/* ITEMS */

#cart-items{
flex:1;
overflow-y:auto;
padding:15px;
list-style:none;
}

.cart-item{
display:flex;
align-items:center;
gap:10px;
padding-bottom:12px;
margin-bottom:12px;
border-bottom:1px solid #eee;
}

.cart-img{
width:65px;
height:65px;
object-fit:cover;
border-radius:8px;
}

.cart-img-placeholder{
display:flex;
align-items:center;
justify-content:center;

background:#edf3df;
color:var(--verde-dark);
font-size:17px;
font-weight:700;
}

.cart-info{
flex:1;
}

.cart-info h4{
font-size:17px;
margin-bottom:4px;
}

.cart-controls{
display:flex;
flex-direction:column;
gap:5px;
}

.cart-controls button{
border:none;
background:#eee;
padding:5px 8px;
border-radius:6px;
cursor:pointer;
}

/* ================= FOOTER ================= */

.cart-footer{
padding:16px;
border-top:1px solid #ddd;
}

.cart-footer p{
font-size:28px;
font-weight:bold;
margin-bottom:12px;
}

.cart-footer input,
.cart-footer select{
width:100%;
padding:12px;
margin-bottom:10px;

border:1px solid #ccc;
border-radius:8px;

font-size:16px;
}

.cart-footer button{
width:100%;

padding:14px;

background:linear-gradient(
135deg,
var(--verde),
var(--verde-dark)
);

color:white;
border:none;
border-radius:10px;

font-size:18px;
font-weight:bold;

cursor:pointer;
}

/* ================= RESPONSIVE ================= */

@media(max-width:768px){

.header{
height:250px;
}

.nav{
gap:12px;
padding:12px;
}

.nav a{
font-size:15px;
}

.search-strip{
padding:10px 12px;
}

.search-field{
gap:7px;
padding:6px 8px 6px 12px;
}

.search-field input{
font-size:16px;
}

.search-clear{
padding:7px 10px;
font-size:13px;
}

/* CELULAR */

.product-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.product{
min-height:430px;
padding:12px;
}

.product img{
height:210px;
}

.product h3{
font-size:18px;
min-height:55px;
}

.product p{
font-size:22px;
}

.promo{
font-size:13px;
padding:10px;
}

.availability-note{
margin:-4px 0 20px;
font-size:14px;
text-align:left;
}

.producto-adicional{
min-height:360px;
}

.product-placeholder{
height:100px;
font-size:16px;
}

.add-btn{
font-size:18px;
padding:12px;
}

h2{
font-size:28px;
margin-bottom:20px;
}

.cart{
width:100%;
}

}