/* ════════════════════════════════════════════════════════════
   GUAKI EL MEXICANO — guaki-shop.css
   Estilos exclusivos de la página Tienda (shop.php).
   El componente de tarjeta de producto (.gk-product-card) vive
   en guaki-core.css y se reutiliza aquí sin cambios.
   ════════════════════════════════════════════════════════════ */

/* Carrito flotante siempre visible en la tienda */
body.page-shop #cartFab { display: flex !important; }

/* ── Banner superior (breadcrumb) ── */
.gk-page-banner {
    position: relative;
    overflow: hidden;
    padding: 64px 0 44px;
    margin-top: 0;
}
.gk-page-banner-glow {
    position: absolute; border-radius: 50%; filter: blur(100px); z-index: 0;
}
.gk-page-banner .gk-page-banner-glow:nth-child(1) { width: 360px; height: 360px; background: rgba(0,166,81,.2); top: -140px; left: -80px; }
.gk-page-banner .gk-page-banner-glow:nth-child(2) { width: 320px; height: 320px; background: rgba(228,0,43,.16); bottom: -140px; right: -60px; }
.gk-page-banner .container { position: relative; z-index: 2; }
.gk-page-banner h1 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; text-transform: uppercase; }
.gk-page-banner .gk-breadcrumb { font-size: 13px; color: var(--gk-text-faint); margin-top: 8px; }
.gk-page-banner .gk-breadcrumb a { color: var(--gk-green); }

/* ── Filtros de categoría ── */
.gk-filters {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
    margin-bottom: 42px;
}
.gk-filter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid var(--gk-border);
    background: var(--gk-card);
    color: var(--gk-text-dim);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: all .25s ease;
    white-space: nowrap;
}
.gk-filter-btn:hover { border-color: var(--gk-green); color: #fff; }
.gk-filter-btn.active { background: var(--gk-green); border-color: var(--gk-green); color: #fff; }

/* ── Badge de descripción / precio a consultar ── */
.gk-desc-badge {
    display: inline-block;
    background: var(--gk-card-2);
    color: var(--gk-text-faint);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ── Paginación ── */
.gk-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap;
    margin-top: 50px;
}
.gk-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1px solid var(--gk-border);
    background: var(--gk-card);
    color: var(--gk-text-dim);
    font-size: 14px; font-weight: 700;
    transition: all .25s ease;
}
.gk-page-btn:hover { border-color: var(--gk-green); color: #fff; }
.gk-page-btn.active { background: var(--gk-green); border-color: var(--gk-green); color: #fff; }
.gk-page-btn.disabled { opacity: .3; pointer-events: none; }
.gk-page-info { font-size: 13px; color: var(--gk-text-faint); width: 100%; text-align: center; margin-top: 6px; }

/* ── Banner mayoreo ── */
.gk-mayoreo-banner {
    background: linear-gradient(135deg, var(--gk-green) 0%, #00451f 100%);
    border-radius: var(--gk-radius);
    padding: 42px 36px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 26px; flex-wrap: wrap;
    margin-top: 64px;
}
.gk-mayoreo-banner h3 {
    color: #fff;
    font-size: clamp(22px, 3vw, 32px);
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.15;
}
.gk-mayoreo-banner p { color: rgba(255,255,255,.82); font-size: 15px; }
@media (max-width: 600px) {
    .gk-mayoreo-banner { padding: 30px 22px; text-align: center; justify-content: center; }
}