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;
    }
}

/* Botón "Volver a la tienda" reutilizable */
.volver-tienda-top {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 10px;
}
.volver-tienda-btn {
    display: inline-block;
    background: #004a99;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.08em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: background 0.2s;
}
.volver-tienda-btn:hover {
    background: #003874;
    text-decoration: none;
}

/* Mensaje de éxito al enviar pedido */
.pedido-success {
    text-align: center;
    margin: 30px auto;
    font-weight: bold;
    font-size: 1.3em;
    color: #004a99;
    background: #eaf3ff;
    border: 2px solid #c0d7ff;
    border-radius: 10px;
    padding: 16px 18px;
    max-width: 680px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Responsive: móvil */
@media (max-width: 600px) {
    .volver-tienda-btn {
        width: 94%;
        font-size: 1.02em;
        padding: 12px 0;
    }
    .pedido-success {
        margin: 18px auto;
        font-size: 1.15em;
        padding: 14px 12px;
        max-width: 96%;
    }
}

/* Responsive: tablet/desktop pequeños */
@media (max-width: 900px) and (min-width: 601px) {
    .volver-tienda-btn {
        padding: 12px 22px;
        font-size: 1.05em;
    }
    .pedido-success {
        max-width: 92%;
    }
}

/* Barra superior de acciones en páginas internas */
.order-actions-top {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #c0c0c0;
    margin: 0 0 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.order-actions-top a {
    display: inline-block;
    padding: 10px 14px;
    background: #004a99;
    color: #fff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
}
.order-actions-top a:hover {
    background: #003874;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .order-actions-top {
        padding: 12px 20px;
    }
    .order-actions-top a {
        font-size: 16px;
        padding: 10px 16px;
        border-radius: 8px;
    }
}

/* Responsive: móvil */
@media (max-width: 767px) {
    .order-actions-top {
        flex-direction: column;
        align-items: center; /* centrado en móvil */
        gap: 10px;
        padding: 10px;
    }
    .order-actions-top a {
        width: auto;            /* no ocupar 100% */
        min-width: 70%;         /* tamaño táctil cómodo */
        padding: 14px 18px;
        margin: 0 auto;         /* centrar horizontal */
        background: #004a99;    /* asegurar azul */
    }
}