/* ════════════════════════════════════════════════════════════
   GUAKI EL MEXICANO — RECONSTRUCCIÓN COMPLETA DEL FRONTEND
   guaki-core.css — Sistema base (se usa en TODAS las páginas)
   ────────────────────────────────────────────────────────────
   Esta hoja de estilos NO reutiliza ninguna clase visual de la
   plantilla original (main.css). Todo el marcado nuevo usa
   clases propias con prefijo "gk-". main.css sigue cargado
   solo por seguridad (resets base, bootstrap grid, swiper),
   pero ninguno de sus componentes visuales (.theme-btn,
   .catagory-product-card-2, .hero-section, etc.) se usa ya.

   Índice:
     1. Variables y reset
     2. Tipografía
     3. Botones
     4. Top bar
     5. Header principal + navegación
     6. Buscador
     7. Menú móvil
     8. Preloader
     9. Panel de carrito + overlay + flotantes
    10. Título de sección
    11. Tarjeta de producto (compartida home/tienda)
    12. Slider (flechas Swiper)
    13. Footer
    14. Utilidades
   ════════════════════════════════════════════════════════════ */

/* ─────────────── 1. VARIABLES Y RESET ─────────────── */
:root {
    --gk-black:        #050505;
    --gk-black-2:      #0a0a0a;
    --gk-card:         #111111;
    --gk-card-2:       #161616;
    --gk-border:       #1c1c1c;
    --gk-green:        #00A651;
    --gk-green-dark:   #00793b;
    --gk-red:          #E4002B;
    --gk-red-dark:     #ad0020;
    --gk-yellow:       #FFC72C;
    --gk-white:        #ffffff;
    --gk-text:         #EDEDED;
    --gk-text-dim:     rgba(237,237,237,.62);
    --gk-text-faint:   rgba(237,237,237,.4);
    --gk-radius:       16px;
    --gk-radius-sm:    10px;
    --gk-shadow:       0 24px 50px rgba(0,0,0,.6);
    --gk-shadow-sm:    0 10px 24px rgba(0,0,0,.45);
    --gk-font-body:    'Poppins', sans-serif;
    --gk-font-head:    'Montserrat', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--gk-black); }

body {
    background: var(--gk-black);
    color: var(--gk-text);
    font-family: var(--gk-font-body);
}

section { background: var(--gk-black); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gk-font-head);
    color: #fff;
    margin: 0;
    line-height: 1.15;
}

p { color: var(--gk-text-dim); margin: 0; }

a { text-decoration: none; color: inherit; transition: color .25s ease; }

img { max-width: 100%; display: block; }

ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--gk-green); color: #fff; }

/* ─────────────── 2. TIPOGRAFÍA ─────────────── */
.gk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    color: var(--gk-yellow);
}

/* ─────────────── 3. BOTONES ─────────────── */
.gk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    white-space: nowrap;
}
.gk-btn:hover { transform: translateY(-3px); }
.gk-btn-whatsapp { background: #25d366; color: #fff; }
.gk-btn-whatsapp:hover { color: #fff; box-shadow: 0 14px 28px rgba(37,211,102,.35); }
.gk-btn-red { background: var(--gk-red); color: #fff; }
.gk-btn-red:hover { color: #fff; box-shadow: 0 14px 28px rgba(228,0,43,.35); }
.gk-btn-yellow { background: var(--gk-yellow); color: #1a1100; }
.gk-btn-yellow:hover { color: #1a1100; box-shadow: 0 14px 28px rgba(255,199,44,.3); }
.gk-btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.25);
}
.gk-btn-outline:hover { color: #fff; border-color: var(--gk-green); background: rgba(0,166,81,.1); }
.gk-btn-sm { padding: 10px 18px; font-size: 12px; border-radius: 8px; }

/* ─────────────── 4. TOP BAR ─────────────── */
.gk-topbar {
    background: var(--gk-green);
    font-size: 13px;
}
.gk-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    flex-wrap: wrap;
}
.gk-topbar-info { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.gk-topbar-info a, .gk-topbar-info span { color: #fff; font-weight: 500; }
.gk-topbar-info i { color: var(--gk-yellow); margin-right: 6px; }
.gk-topbar-social { display: flex; align-items: center; gap: 10px; }
.gk-topbar-social span { color: rgba(255,255,255,.85); font-weight: 600; margin-right: 4px; }
.gk-topbar-social a {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    transition: background .25s ease, transform .25s ease;
}
.gk-topbar-social a:hover { background: #fff; color: var(--gk-green); transform: translateY(-2px); }

@media (max-width: 767px) {
    .gk-topbar-row { justify-content: center; text-align: center; }
    .gk-topbar-info { justify-content: center; gap: 12px; font-size: 12px; }
}

/* ─────────────── 5. HEADER PRINCIPAL + NAV ─────────────── */
.gk-header { position: relative; z-index: 999; }

.gk-main-header {
    background: var(--gk-black);
    border-bottom: 1px solid var(--gk-border);
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.gk-main-header.sticky {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: rgba(5,5,5,.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    z-index: 1000;
}

.gk-main-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
}

.gk-logo { display: flex; align-items: center; gap: 10px; }
.gk-logo img { height: 52px; width: auto; }
.gk-logo-text strong {
    display: block;
    font-family: var(--gk-font-head);
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    color: var(--gk-green);
    letter-spacing: .5px;
}
.gk-logo-text em {
    display: block;
    font-style: normal;
    font-family: var(--gk-font-head);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: var(--gk-red);
}
.gk-logo-text small {
    display: block;
    font-size: 8.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gk-text-faint);
    margin-top: 2px;
}

.gk-nav ul { display: flex; align-items: center; gap: 26px; }
.gk-nav a {
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: rgba(255,255,255,.82);
    position: relative;
    padding: 6px 0;
}
.gk-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--gk-green);
    transition: width .25s ease;
}
.gk-nav a:hover, .gk-nav a.active { color: #fff; }
.gk-nav a:hover::after, .gk-nav a.active::after { width: 100%; }

@media (max-width: 1399px) {
    .gk-nav ul { gap: 18px; }
    .gk-nav a { font-size: 12.5px; }
}

.gk-header-actions { display: flex; align-items: center; gap: 18px; }

.gk-cart-icon {
    position: relative;
    font-size: 19px;
    color: #fff;
    display: inline-flex;
}
.gk-cart-icon:hover { color: var(--gk-green); }
.gk-cart-badge {
    position: absolute;
    top: -9px; right: -11px;
    background: var(--gk-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.gk-hamburger {
    width: 30px; height: 22px;
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between;
}
.gk-hamburger span {
    display: block; height: 2px; width: 100%;
    background: #fff; border-radius: 2px;
    transition: all .3s ease;
}

/* ─────────────── 6. BUSCADOR ─────────────── */
.gk-search { position: relative; display: flex; align-items: center; }
.gk-search button {
    background: none; border: none; color: #fff;
    font-size: 17px; cursor: pointer; padding: 4px;
}
.gk-search button:hover { color: var(--gk-green); }
.gk-search input {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    background: var(--gk-card);
    border: 1px solid var(--gk-border);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    transition: width .3s ease, opacity .3s ease, padding .3s ease;
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
}
.gk-search input:focus,
.gk-search input:not(:placeholder-shown) {
    width: 200px;
    opacity: 1;
    padding: 9px 14px;
}
.gk-search input::placeholder { color: var(--gk-text-faint); }

/* ─────────────── 7. MENÚ MÓVIL ─────────────── */
.gk-mobile-nav {
    max-height: 0;
    overflow: hidden;
    background: var(--gk-black-2);
    transition: max-height .35s ease;
}
.gk-mobile-nav.open { max-height: 600px; border-top: 1px solid var(--gk-border); }
.gk-mobile-nav ul { padding: 10px 20px 18px; }
.gk-mobile-nav li { border-bottom: 1px solid var(--gk-border); }
.gk-mobile-nav a {
    display: block;
    padding: 13px 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: rgba(255,255,255,.82);
}
.gk-mobile-nav a:hover, .gk-mobile-nav a.active { color: var(--gk-green); }

/* ─────────────── 8. PRELOADER ─────────────── */
.gk-preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--gk-black);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease;
}
.gk-preloader.loaded { opacity: 0; pointer-events: none; }
.gk-preloader-mark span {
    display: inline-block;
    font-family: var(--gk-font-head);
    font-weight: 900;
    font-size: 38px;
    color: var(--gk-green);
    letter-spacing: 4px;
    animation: gkPulse 1.1s ease-in-out infinite;
}
.gk-preloader-mark span:nth-child(odd) { color: var(--gk-red); }
.gk-preloader-mark span:nth-child(1) { animation-delay: 0s; }
.gk-preloader-mark span:nth-child(2) { animation-delay: .1s; }
.gk-preloader-mark span:nth-child(3) { animation-delay: .2s; }
.gk-preloader-mark span:nth-child(4) { animation-delay: .3s; }
.gk-preloader-mark span:nth-child(5) { animation-delay: .4s; }
@keyframes gkPulse {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(-10px); opacity: 1; }
}

/* ─────────────── 9. CARRITO (panel + overlay + flotantes) ─────────────── */
.cart-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1100;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }

.cart-panel {
    position: fixed; top: 0; right: -420px;
    width: 100%; max-width: 400px; height: 100%;
    background: var(--gk-black-2);
    border-left: 1px solid var(--gk-border);
    z-index: 1200;
    display: flex; flex-direction: column;
    transition: right .35s ease;
}
.cart-panel.open { right: 0; }

.cart-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid var(--gk-border);
}
.cart-panel-head h5 { font-size: 17px; font-weight: 700; text-transform: uppercase; color: #fff; }
.cart-panel-head button {
    background: none; border: none; color: var(--gk-text-dim);
    font-size: 26px; line-height: 1; cursor: pointer;
}
.cart-panel-head button:hover { color: var(--gk-red); }

.cart-panel-body { flex: 1; overflow-y: auto; padding: 18px 24px; }
.cart-panel-body:empty::after {
    content: 'Tu carrito está vacío';
    display: block;
    text-align: center;
    color: var(--gk-text-faint);
    margin-top: 40px;
    font-size: 14px;
}
.cart-item {
    display: flex; gap: 12px; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--gk-border);
}
.cart-item img {
    width: 56px; height: 56px; object-fit: contain;
    background: var(--gk-card);
    border-radius: 8px; padding: 6px;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h6 {
    font-size: 13.5px; font-weight: 600; color: #fff;
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-item-info span { font-size: 13px; color: var(--gk-green); font-weight: 700; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.cart-item-qty button {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--gk-card); border: 1px solid var(--gk-border);
    color: #fff; cursor: pointer; font-size: 13px;
}
.cart-item-qty button:hover { background: var(--gk-green); border-color: var(--gk-green); }
.cart-remove { color: var(--gk-text-faint); cursor: pointer; font-size: 15px; background: none; border: none; }
.cart-remove:hover { color: var(--gk-red); }

.cart-panel-foot { padding: 20px 24px 26px; border-top: 1px solid var(--gk-border); }
.cart-total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
    font-weight: 700; color: #fff; font-size: 16px;
}
.cart-total-row #cartTotal { color: var(--gk-green); font-size: 20px; }
.btn-wa-order {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #25d366; color: #fff;
    padding: 15px; border-radius: 10px;
    font-weight: 700; text-transform: uppercase; font-size: 13.5px;
    transition: transform .25s ease;
}
.btn-wa-order:hover { color: #fff; transform: translateY(-2px); }

.wa-float {
    position: fixed; right: 24px; bottom: 24px; z-index: 900;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 12px 28px rgba(37,211,102,.45);
    animation: gkFloatPulse 2.4s ease-in-out infinite;
}
.wa-float:hover { color: #fff; transform: scale(1.08); }
@keyframes gkFloatPulse {
    0%, 100% { box-shadow: 0 12px 28px rgba(37,211,102,.45); }
    50% { box-shadow: 0 12px 28px rgba(37,211,102,.75); }
}

.cart-fab {
    position: fixed; right: 24px; bottom: 96px; z-index: 900;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--gk-red); color: #fff; border: none;
    display: none; align-items: center; justify-content: center;
    font-size: 21px; cursor: pointer;
    box-shadow: 0 12px 28px rgba(228,0,43,.4);
    transition: transform .25s ease;
}
.cart-fab.visible { display: flex; }
.cart-fab:hover { transform: scale(1.08); }
.cart-count {
    position: absolute; top: -4px; right: -4px;
    background: var(--gk-yellow); color: #1a1100;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 575px) {
    .wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 24px; }
    .cart-fab { right: 14px; bottom: 76px; width: 46px; height: 46px; font-size: 18px; }
}

/* ─────────────── 10. TÍTULO DE SECCIÓN ─────────────── */
.gk-section-title { text-align: center; margin-bottom: 46px; }
.gk-section-title h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.gk-section-title h2 .gk-accent { color: var(--gk-green); }
.gk-section-title-dots {
    display: flex; justify-content: center; gap: 6px; margin-top: 14px;
}
.gk-section-title-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gk-green);
}
.gk-section-title-dots span:nth-child(2) { background: var(--gk-yellow); }
.gk-section-title-dots span:nth-child(3) { background: var(--gk-red); }

/* ─────────────── 11. TARJETA DE PRODUCTO ─────────────── */
.gk-product-card {
    background: var(--gk-card);
    border: 1px solid var(--gk-border);
    border-radius: var(--gk-radius);
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.gk-product-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--gk-shadow);
    border-color: rgba(0,166,81,.35);
}
.gk-product-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--gk-green);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 5px 11px;
    border-radius: 20px;
    z-index: 2;
}
.gk-product-image {
    height: 180px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.gk-product-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}
.gk-product-card:hover .gk-product-image img { transform: scale(1.06); }
.gk-product-info { flex: 1; display: flex; flex-direction: column; }
.gk-product-cat {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gk-text-faint);
    margin-bottom: 6px;
}
.gk-product-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
    min-height: 39px;
}
.gk-product-price {
    font-family: var(--gk-font-head);
    font-weight: 800;
    font-size: 20px;
    color: var(--gk-green);
    margin-bottom: 14px;
    margin-top: auto;
}
.gk-product-price.consultar {
    font-size: 13px;
    font-weight: 600;
    color: var(--gk-text-faint);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.gk-product-actions { display: flex; gap: 8px; }
.btn-add-cart {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--gk-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    font-family: inherit;
    transition: background .25s ease;
}
.btn-add-cart:hover { background: var(--gk-red-dark); }
.gk-product-wa {
    width: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #25d366;
    color: #fff;
    border-radius: 8px;
    font-size: 17px;
    transition: transform .25s ease;
}
.gk-product-wa:hover { color: #fff; transform: scale(1.07); }

/* ─────────────── 12. FLECHAS DE SLIDER (Swiper) ─────────────── */
.gk-slider-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--gk-border);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s ease;
}
.gk-slider-arrow:hover { background: var(--gk-green); border-color: var(--gk-green); }
.gk-slider-arrow.swiper-button-disabled { opacity: .3; cursor: default; }
.gk-slider-arrow.swiper-button-disabled:hover { background: rgba(255,255,255,.06); border-color: var(--gk-border); }
.gk-slider-arrow::after { display: none; }

/* ─────────────── 13. FOOTER ─────────────── */
.gk-footer { background: var(--gk-black-2); border-top: 1px solid var(--gk-border); padding: 70px 0 0; }
.gk-footer h4 {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #fff; margin-bottom: 22px;
}
.gk-footer-desc { font-size: 14px; line-height: 1.7; margin: 16px 0 18px; }
.gk-footer ul li { margin-bottom: 11px; }
.gk-footer ul a { font-size: 13.5px; color: var(--gk-text-dim); }
.gk-footer ul a:hover { color: var(--gk-green); }
.gk-footer-social { display: flex; gap: 10px; }
.gk-footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--gk-border);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
    transition: all .25s ease;
}
.gk-footer-social a:hover { background: var(--gk-green); border-color: var(--gk-green); transform: translateY(-3px); }
.gk-footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gk-text-dim); margin-bottom: 14px; }
.gk-footer-contact i { color: var(--gk-yellow); margin-top: 3px; width: 14px; }
.gk-footer-contact a { color: var(--gk-text-dim); }
.gk-footer-contact a:hover { color: var(--gk-green); }
.gk-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.gk-newsletter-form input {
    flex: 1; min-width: 160px;
    padding: 13px 14px;
    border-radius: 8px;
    border: 1px solid var(--gk-border);
    background: var(--gk-card);
    color: #fff;
    font-size: 13px;
}
.gk-newsletter-form input::placeholder { color: var(--gk-text-faint); }
.gk-newsletter-form button { width: 100%; margin-top: 10px; }
.gk-newsletter-msg { color: var(--gk-green); font-size: 13px; margin-top: 10px; display: none; }

.gk-footer-bottom {
    margin-top: 56px;
    padding: 22px 0;
    border-top: 1px solid var(--gk-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.gk-footer-bottom p { font-size: 13px; color: var(--gk-text-faint); }
.gk-payment-icons { display: flex; gap: 10px; align-items: center; }
.gk-payment-icons i { font-size: 26px; color: var(--gk-text-faint); }

/* ─────────────── 14. MENÚ DESPLEGABLE (submenu) ─────────────── */
.gk-has-submenu { position: relative; }
.gk-submenu {
    position: absolute; top: 100%; left: 0;
    min-width: 200px;
    background: var(--gk-card-2);
    border: 1px solid var(--gk-border);
    border-radius: 12px;
    padding: 8px;
    margin-top: 10px;
    box-shadow: var(--gk-shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .25s ease;
    z-index: 100;
    display: flex; flex-direction: column; gap: 2px;
}
.gk-has-submenu:hover .gk-submenu,
.gk-has-submenu.open .gk-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.gk-submenu li { border: none; }
.gk-submenu a {
    display: block; padding: 10px 14px;
    font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--gk-text-dim); border-radius: 8px;
}
.gk-submenu a:hover { background: rgba(0,166,81,.12); color: #fff; }
.gk-submenu a::after { display: none; }
/* triángulo indicador arriba del dropdown */
.gk-submenu::before {
    content:''; position:absolute; top:-6px; left:24px;
    width:12px; height:12px; background: var(--gk-card-2);
    border-left:1px solid var(--gk-border); border-top:1px solid var(--gk-border);
    transform: rotate(45deg);
}
/* Móvil submenú acordeón */
.gk-mobile-submenu { display: none; padding-left: 16px; background: rgba(255,255,255,.02); }
.gk-mobile-has-children.open .gk-mobile-submenu { display: block; }
.gk-mobile-has-children.open > a i { transform: rotate(180deg); }

/* ─────────────── 15. UTILIDADES ─────────────── */
.gk-fade-up { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.gk-fade-up.in-view { opacity: 1; transform: translateY(0); }

/* ─────────────── 16. RESPONSIVE 100% — cualquier dispositivo ─────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; min-width: 320px; }
img, video, iframe { max-width: 100%; height: auto; }
.container { max-width: 100%; }
@media (min-width: 1400px){ .container{max-width:1320px} }

/* Header responsive */
@media (max-width: 1200px){
  .gk-main-header-row{ gap:12px; }
  .gk-header-actions{ gap:10px; flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 991px){
  .gk-main-header-row{ flex-wrap: wrap; }
  .gk-logo img{ height:44px; }
  .gk-header-actions{ width:100%; justify-content: space-between; }
  .gk-modo-wrap{ order: 3; width:100%; justify-content:center; margin-top:8px; }
}
@media (max-width: 575px){
  .gk-main-header-row{ padding:10px 0; gap:8px; }
  .gk-logo img{ height:38px; }
  .gk-topbar{ font-size:11px; }
  .gk-search input:focus, .gk-search input:not(:placeholder-shown){ width:150px; }
  .cart-panel{ max-width:100%; right:-100%; }
  .gk-product-card{ padding:14px; }
  .gk-product-image{ height:140px; }
  .gk-section-title h2{ font-size:22px; }
}

/* Grids ya fluidos vía Bootstrap, asegurar 1 col en 360px */
@media (max-width: 360px){
  .row.g-4{ --bs-gutter-x:12px; }
  .gk-btn{ padding:11px 16px; font-size:12px; }
  .gk-hero-text h1{ font-size:36px; }
}

/* Tablas admin responsive */
@media (max-width: 768px){
  .card{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table{ min-width: 600px; }
}

/* Evitar scroll horizontal por sombras/animaciones */
.swiper, .gk-hero, .gk-benefits-box { max-width: 100vw; overflow: hidden; }

/* ─────────────── 17. VARIANTES ─────────────── */
.gk-var-select, .gk-var-group { max-width: 100%; }
.gk-var-select{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gk-var-btn{ flex-shrink:0; }
.gk-product-card{ overflow: hidden; }
.gk-product-card .gk-var-group{ overflow-x: auto; scrollbar-width: thin; }