body {
    font-family: Arial, sans-serif;
    background:#e2e2e2; /* antes #f7f7f7, un poco más oscuro */
    margin:0;
    padding:0 10px 40px;
}

a { color:#007bff; text-decoration:none; }
a:hover { text-decoration:underline; }

.top-bar {
    max-width:1200px;
    margin:10px auto 0;
    display:flex;
    justify-content:center; /* Cambiado de space-between a center */
    align-items:center;
    /* height: 60px; opcional si quieres altura fija */
}

/* Oculta el h2 si queda en el HTML por error */
.top-bar h2 {
    display: none !important;
}

/* Centrado y estilo para el wrapper del carrito */
.cart-link-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Mejor apariencia para el enlace del carrito */
.cart-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size:16px;           /* antes 22px */
    font-weight:bold;
    background: #fff;
    color: #004a99;
    border-radius: 22px;      /* antes 30px */
    padding: 6px 16px;        /* antes 12px 28px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* menos sombra */
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    border: 2px solid #007bff;
    margin: 0 auto;
    min-height: 0;            /* asegura que no crezca de más */
}

.cart-link:hover {
    background: #e2e2e2;
    color: #007bff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    text-decoration: none;
}

.cart-icon {
    font-size: 18px;          /* antes 28px */
    margin-right: 4px;
    color: #28a745;
}

.cart-count {
    font-size:18px;           /* antes 26px */
    color: #fff;
    background: #28a745;
    border-radius: 50%;
    padding: 1px 8px;         /* antes 2px 12px */
    margin-left: 2px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(40,167,69,0.12);
    display: inline-block;
    min-width: 22px;          /* antes 32px */
    text-align: center;
}

.product-grid {
    max-width:1200px;
    margin:15px auto 0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr)); /* 2 productos por fila en móvil y tablets */
    gap:16px;
}

@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* Tarjeta más marcada para diferenciar productos */
.product-card {
    background:#fff;
    border:2px solid #c0c0c0;           /* antes 1px #ddd */
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 2px 6px rgba(0,0,0,0.15); /* un poco más notoria */
}

/* Opcional: resaltar aún más al pasar el mouse en PC */
@media (hover: hover) {
    .product-card:hover {
        border-color:#007bff;
        box-shadow:0 4px 10px rgba(0,0,0,0.2);
    }
}

.product-image {
    width:100%;
    padding-top:110%; /* antes 85%, bastante más alta en PC */
    background:#f2f2f2;
    position:relative;
    overflow:hidden;
}

.product-image img {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    object-fit:contain; /* muestra más parte de la foto (menos recorte) */
}

.product-info {
    padding:12px 12px 14px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.product-name {
    font-size:18px;   /* antes 22px, ~20% más chico en PC */
    font-weight:bold;
    margin:0 0 10px;
    min-height:40px;
    text-align:center;
    color:#000;
}

.product-meta {
    font-size:13px;
    color:#555;
    margin-bottom:4px;
}

.product-price {
    font-size:30px;
    font-weight:bold;
    color:#28a745;
    margin:10px 0;
    text-align:center;
}

.product-stock {
    font-size:13px;
    color:#777;
    margin-bottom:8px;
    text-align:center;
}

.product-actions {
    margin-top:auto;
}

.product-actions form {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
}

.qty-control {
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ccc;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
}

.qty-btn,
.qty-value {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:20px;
}

.qty-btn {
    font-size:24px;
}

.product-actions button[type="submit"] {
    padding:10px 14px;      /* antes 16px 20px, botón más bajo */
    font-size:16px;         /* antes 20px, texto más chico en PC */
    width:100%;
    background:#004a99;
    color:#fff;
    border:0;
    border-radius:4px;
    cursor:pointer;
}

.product-actions button[type="submit"]:hover {
    background:#003874;
}

.pagination {
    max-width:1200px;
    margin:15px auto 0;
    font-size:14px;
    text-align:center;
}

.pagination a {
    margin:0 5px;
}

.msg-carrito {
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    padding:10px 24px;
    border-radius:20px;
    background:#28a745 !important; /* verde fuerte */
    color:#fff;
    font-size:1.2em;               /* más chico */
    font-weight:bold;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
    display:none;
    z-index:1000;
    text-align:center;
    min-width:160px;
    max-width:90vw;
}

/* Menú principal horizontal */
.main-menu {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #c0c0c0;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
}
.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}
.main-menu li {
    margin: 0;
}
.main-menu a {
    display: block;
    padding: 14px 20px;
    color: #004a99;
    font-weight: bold;
    font-size: 17px;
    border-radius: 4px 4px 0 0;
    transition: background 0.2s, color 0.2s;
}
.main-menu a:hover,
.main-menu a.active {
    background: #e2e2e2;
    color: #007bff;
    text-decoration: none;
}

/* Responsive: menú apilado en móvil */
@media (max-width: 767px) {
    .main-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .main-menu a {
        padding: 14px 10px;
        font-size: 18px;
        border-radius: 0;
        border-bottom: 1px solid #eee;
    }
}

@media (max-width: 767px) {
    body {
        font-size:18px;
    }

    .top-bar h2 {
        font-size:28px;
    }

    .cart-link {
        font-size:22px;
    }

    .cart-count {
        font-size:30px;
    }

    .product-image {
        padding-top:95%; /* en móvil solo un poco más alta que antes (85%) */
    }

    .product-name {
        font-size:17px;  /* antes 21px, ~20% más chico en móvil */
    }

    .product-price {
        font-size:29px;
    }

    .product-meta,
    .product-stock {
        font-size:16px;
    }

    .qty-control {
        grid-template-columns:repeat(3, 44px); /* mismo concepto, pero más grande en móvil */
    }

    .qty-btn {
        width:44px;
        height:44px;
        font-size:26px;
    }

    .qty-value {
        width:44px;
        font-size:22px;
    }

    .product-actions button[type="submit"] {
        font-size:12px;      /* antes 15px, ~20% más chico en móvil */
        padding:12px 16px;   /* antes 16px 20px, menos alto en móvil */
    }
}

/* ===========================
   AJUSTES FINALES CANTIDAD - 1 +
   =========================== */
.qty-control {
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ccc;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
}

.qty-btn,
.qty-value {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:20px;
}

.qty-btn {
    font-size:24px;
}

/* móvil */
@media (max-width: 767px) {
    .qty-btn,
    .qty-value {
        width:44px;
        height:44px;
        font-size:22px;
    }

    .qty-btn {
        font-size:26px;
    }
}