/* Nav móvil */
.nav { 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid; 
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; 
    padding: 12px 16px; 
    background-color: var(--vista-white); 
    color: var(--color-secundario);
}

/* Ajuste para el contenido cuando el nav es fijo */
body {
    padding-top: 75px;
}

.nav__menu { display: inline-flex; flex-direction: column; gap: 6px; background: transparent; border: 0; padding: 8px; cursor: pointer; }
.nav__menu:focus { outline: none; }
.nav__menu:focus-visible { outline: 2px solid var(--jazzberry-jam); outline-offset: 2px; }
.nav__menu-bar { width: 22px; height: 2px; background: var(--jazzberry-jam); display: block; border-radius: 2px; }

.nav__logo { display: inline-flex; align-items: center; justify-content: center; height: 52px; }
.nav__logo img { height: 100%; width: auto; display: block; border-radius: 4px; }

.nav__actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

.nav__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 0; color: var(--jazzberry-jam); cursor: pointer; border-radius: 6px; transition: all 0.2s ease; }
.nav__search-toggle:hover { background-color: rgba(198, 112, 155, 0.1); }
.nav__search-toggle:focus { outline: none; }
.nav__search-toggle:focus-visible { outline: 2px solid var(--jazzberry-jam); outline-offset: 2px; }
.nav__search-icon { width: 22px; height: 22px; }

.nav__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--jazzberry-jam); text-decoration: none; }
.nav__cart-icon { width: 26px; height: 26px; }
.nav__cart-count { position: absolute; top: -4px; right: -8px; background: var(--cardinal-pink); color: #fff; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 999px; min-width: 18px; text-align: center; font-weight: 600; }

/* Buscador */
.search-bar { 
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0 16px; 
    background-color: var(--vista-white);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
    overflow: visible;
    visibility: hidden;
}
.search-bar.is-visible { 
    opacity: 1;
    transform: translateY(0);
    max-height: 80px;
    padding: 12px 16px;
    visibility: visible;
}
.search-bar:focus { outline: none !important; }
.search-bar__form { display: flex; align-items: center; gap: 8px; position: relative; }
.search-bar__form:focus { outline: none !important; }
.search-bar__input { flex: 1; padding: 10px 12px; border: 1px solid var(--indian-khaki); font-size: 16px; background-color: #fff; color: var(--color-secundario); }
.search-bar__input:focus { outline: none !important; border: 1px solid var(--indian-khaki) !important; }
.search-bar__input:focus-visible { outline: 2px solid var(--jazzberry-jam); outline-offset: 2px; border: 1px solid var(--jazzberry-jam); }

/* Estilo para la "x" de limpiar búsqueda */
.search-bar__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ba0b5f'/%3E%3Cline x1='15' y1='9' x2='9' y2='15' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='9' y1='9' x2='15' y2='15' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.search-bar__input::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2398074f'/%3E%3Cline x1='15' y1='9' x2='9' y2='15' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='9' y1='9' x2='15' y2='15' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.search-bar__button { display: flex; align-items: center; justify-content: center; padding: 10px; background-color: var(--jazzberry-jam); border: 0; color: #fff; cursor: pointer; }
.search-bar__button:hover { background-color: var(--cardinal-pink); }
.search-bar__button:focus { outline: none !important; }
.search-bar__button:focus-visible { outline: 2px solid var(--jazzberry-jam); outline-offset: 2px; }
.search-bar__icon { width: 18px; height: 18px; }

/* Botón limpiar (siempre visible) */
.search-bar__clear { display: inline-flex; align-items: center; justify-content: center; padding: 10px; background: rgba(248, 197, 228, 0.3); border: 0; cursor: pointer; min-width: 38px; min-height: 38px; box-sizing: border-box; }
.search-bar__clear:hover { background-color: rgba(198, 112, 155, 0.2); }
.search-bar__clear:focus { outline: none !important; }
.search-bar__clear:focus-visible { outline: 2px solid var(--jazzberry-jam); outline-offset: 2px; }

/* Menú hamburguesa desplegable */
.mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s ease; }
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }

.mobile-menu__content { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background-color: var(--vista-white); box-shadow: 2px 0 10px rgba(0,0,0,0.1); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; }

.mobile-menu.is-open .mobile-menu__content { transform: translateX(0); }

.mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px; border-bottom: 1px solid rgba(0,0,0,0.1); }

.mobile-menu__title { font-size: 18px; font-weight: 600; color: var(--color-secundario); margin: 0; }

.mobile-menu__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 0; color: var(--jazzberry-jam); cursor: pointer; border-radius: 4px; }
.mobile-menu__close:hover { background-color: rgba(198, 112, 155, 0.1); }
.mobile-menu__close svg { width: 20px; height: 20px; }

.mobile-menu__nav { padding: 20px 0; }

.mobile-menu__link { display: block; padding: 16px 20px; color: var(--color-secundario); text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background-color 0.2s ease; }
.mobile-menu__link:hover { background-color: var(--chantilly); color: var(--jazzberry-jam); }
.mobile-menu__link--active { background-color: var(--jazzberry-jam); color: white; font-weight: 600; }
.mobile-menu__link--active:hover { background-color: var(--cardinal-pink); color: white; }

/* Sección de contacto y redes sociales */
.mobile-menu__contact { margin-top: auto; padding: 20px 16px; border-top: 1px solid rgba(0,0,0,0.1); background-color: var(--vista-white); }

.mobile-menu__contact-title { font-size: 16px; font-weight: 600; color: var(--jazzberry-jam); margin: 0 0 16px 0; }

.mobile-menu__social { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.mobile-menu__social-link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.mobile-menu__social-link:hover { transform: translateY(-2px) scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.mobile-menu__social-link svg { width: 24px; height: 24px; }

/* Información de contacto */
.mobile-menu__contact-info { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.1); }

.mobile-menu__contact-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--color-secundario); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease; }
.mobile-menu__contact-item:hover { color: var(--jazzberry-jam); }

.mobile-menu__contact-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Colores específicos de cada red social */
.mobile-menu__social-link--facebook { background-color: #1877f2; color: white; }
.mobile-menu__social-link--facebook:hover { background-color: #166fe5; }

.mobile-menu__social-link--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; }
.mobile-menu__social-link--instagram:hover { background: linear-gradient(45deg, #e0852a 0%, #d55a2f 25%, #d01e36 50%, #c01a59 75%, #ad1379 100%); }

.mobile-menu__social-link--tiktok { background-color: #000000; color: white; }
.mobile-menu__social-link--tiktok:hover { background-color: #333333; }

.mobile-menu__social-link--youtube { background-color: #ff0000; color: white; }
.mobile-menu__social-link--youtube:hover { background-color: #e60000; }

.mobile-menu__social-link--pinterest { background-color: #bd081c; color: white; }
.mobile-menu__social-link--pinterest:hover { background-color: #a00716; }

/* Menú con subcategorías siempre visibles */
.mobile-menu__dropdown {
    position: relative;
}

.mobile-menu__link--dropdown {
    position: relative;
    background-color: var(--white);
    color: var(--black);
    font-weight: 600;
}

.mobile-menu__link--dropdown:hover {
    background-color: var(--chantilly);
    color: var(--jazzberry-jam);
}

.mobile-menu__link--dropdown.mobile-menu__link--active {
    background-color: var(--jazzberry-jam);
    color: white;
    font-weight: 600;
}

.mobile-menu__link--dropdown.mobile-menu__link--active:hover {
    background-color: var(--jazzberry-jam);
    color: white;
}

.mobile-menu__submenu {
    background-color: var(--white);
    border-top: 1px solid rgba(198, 112, 155, 0.2);
}

.mobile-menu__sublink {
    display: block;
    padding: 12px 20px 12px 40px;
    color: var(--black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(198, 112, 155, 0.1);
    transition: all 0.2s ease;
}

.mobile-menu__sublink:hover {
    background-color: rgba(198, 112, 155, 0.1);
    color: var(--jazzberry-jam);
    padding-left: 45px;
}

.mobile-menu__sublink--active {
    background-color: var(--chantilly);
    color: var(--jazzberry-jam);
    font-weight: 600;
}

.mobile-menu__sublink--active:hover {
    background-color: var(--chantilly);
    color: var(--jazzberry-jam);
    padding-left: 40px;
}

/* Base responsive pensada para móvil primero */
@media (min-width: 768px) {
  .nav { padding: 14px 20px; }
  .nav__menu-bar { width: 24px; }
  .nav__cart-icon { width: 28px; height: 28px; }
  .search-bar { padding: 14px 20px; }
  .search-bar__input { font-size: 16px; }
}