:root {
    --green-main:#065f46;
    --bg:#f3f4f6;
    --text:#111;
}

body {
    margin:0;
    background:var(--bg);
    font-family:'Segoe UI',sans-serif;
}

/* HEADER */
.header-top {
    background:#083c3e;
    color:white;
    display:flex;
    align-items:center;
    padding:10px 20px;
    gap:20px;
}
.logo {
    font-size:22px;
    font-weight:bold;
}
.search-box {
    flex:1;
    display:flex;
}
.search-box input {
    flex:1;
    padding:10px;
    border-radius:8px 0 0 8px;
    border:none;
}
.search-box button {
    padding:10px 15px;
    border:none;
    background:#10b981;
    color:white;
    border-radius:0 8px 8px 0;
    cursor:pointer;
}
.admin-btn {
    padding:8px 14px;
    background:white;
    color:#083c3e;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
}

/* NAV CATEGORY */
.category-nav {
    background:white;
    padding:10px;
    display:flex;
    gap:10px;
    overflow-x:auto;
}
.category-nav button {
    padding:8px 14px;
    border:none;
    background:#e5e7eb;
    border-radius:20px;
    cursor:pointer;
    white-space:nowrap;
}
.category-nav button:hover {
    background:#065f46;
    color:white;
}

/* BANNER */
.banner img {
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:0;
    margin-bottom:20px;
}

/* SECTIONS */
.section-title {
    margin:20px;
    font-size:22px;
    color:#065f46;
}

/* HIGHLIGHT ROW */
.highlight-row {
    display:flex;
    gap:20px;
    padding:0 20px;
    overflow-x:auto;
}
.highlight-card {
    min-width:200px;
    background:white;
    padding:10px;
    border-radius:14px;
    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
    cursor:pointer;
    text-align:center;
}
.highlight-card img {
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:10px;
}

/* PRODUCTS */
.product-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:20px;
    padding:20px;
}
.product-card {
    background:white;
    padding:12px;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
    cursor:pointer;
}
.product-card img {
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:8px;
}
.product-card .price {
    color:#065f46;
    font-size:20px;
    font-weight:bold;
}

/* FOOTER */
.footer {
    text-align:center;
    padding:20px;
    background:#083c3e;
    color:white;
    margin-top:40px;
}
/* Barra superior con logo + inicio + buscador */
.header-top{
    display:flex;
    align-items:center;
    gap:10px;
}

.header-top .logo{
    font-weight:700;
    color:#ffffff;
    cursor:pointer;
    white-space:nowrap;
}

.home-btn{
    background:#e5e7eb;
    color:#065f46;
    padding:6px 12px;
    border-radius:999px;
    font-size:14px;
    text-decoration:none;
    font-weight:600;
    white-space:nowrap;
}

.home-btn:hover{
    background:#10b981;
    color:#ffffff;
}

/* Hacemos el buscador más pequeño para que entre todo */
.header-top .search-box{
    flex:1;
    max-width:700px;
    margin:0 auto;
}

@media (max-width: 768px){
    .header-top{
        flex-wrap:wrap;
    }
    .header-top .search-box{
        max-width:100%;
        order:3;
    }
}
/* === Fix general para que no haya scroll lateral === */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

/* === Header responsive (logo + inicio + carrito + buscador + admin) === */
.header-top{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    background:#065f46;
    color:#ffffff;
}

/* Logo "JTK STORE" */
.header-top .logo{
    font-weight:700;
    color:#ffffff;
    cursor:pointer;
    white-space:nowrap;
    display:flex;
    align-items:center;
}

/* Botones Inicio / Carrito / Admin ya usan .home-btn y .admin-btn */
.home-btn{
    background:#E5E7EB;
    padding:8px 12px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
    color:#065f46;
    display:flex;
    align-items:center;
}
.home-btn:hover{
    background:#10b981;
    color:white;
}

/* Buscador */
.header-top .search-box{
    flex:1 1 auto;
    max-width:700px;
    display:flex;
    min-width:0;        /* clave para que no desborde */
}
.header-top .search-box input{
    flex:1 1 auto;
    min-width:0;
}
.header-top .search-box button{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

/* === Versión móvil === */
@media (max-width:768px){
    .header-top{
        flex-wrap:wrap;
    }

    /* Logo ocupa una fila completa */
    .header-top .logo{
        width:100%;
        margin-bottom:4px;
    }

    /* Botones Inicio / Carrito / Admin en la segunda fila */
    .header-top .home-btn,
    .header-top .admin-btn{
        padding:6px 10px;
        font-size:13px;
    }

    /* Buscador abajo ocupando todo el ancho */
    .header-top .search-box{
        width:100%;
        max-width:100%;
        order:3;
        margin-top:4px;
    }
}
/* ===== Solo versión móvil: hacer los productos más pequeños ===== */
/* ===== SOLO MÓVIL: 2 productos por fila ===== */
@media (max-width:768px){
    .product-grid{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr)); /* 2 columnas */
        gap:12px;
        padding:12px;
    }

    .product-card{
        margin:0;           /* que no se centre ni se haga más grande */
    }

    .product-card img{
        width:100%;
        height:130px;       /* más bajitas para que quepan mejor */
        object-fit:cover;
        border-radius:10px;
    }

    .product-card h3{
        font-size:12px;
    }

    .product-card .price{
        font-size:13px;
    }
}