/* ===================================================
   TIENDITA YUCATECA — Tema Tropical Claro
   Archivo de overrides — se carga al final del head
   =================================================== */

:root {
  --ty-primary: #E8931E;
  --ty-primary-dark: #C97A10;
  --ty-secondary: #2D7D46;
  --ty-secondary-dark: #1E5C32;
  --ty-accent: #F5C518;
  --ty-dark: #1E3A2F;
  --ty-light: #FFF9F0;
  --ty-cream: #FAF5EB;
  --ty-white: #FFFFFF;
  --ty-text: #2C3E2D;
  --ty-text-light: #6B7C6E;
  --ty-border: #E8DFD0;
  --ty-shadow: rgba(45, 125, 70, 0.12);
  --ty-radius: 14px;
  --ty-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === TIPOGRAFÍA === */
body {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  background-color: var(--ty-light) !important;
  color: var(--ty-text) !important;
}

h1, h2, h3, h4,
.component-ttl span,
.main-ttl span,
.posts-i-ttl a,
.prodlist-i-cont h3 a {
  font-family: 'Playfair Display', 'Roboto', serif !important;
}

/* === HEADER TOP BAR === */
.header_top {
  background: var(--ty-cream) !important;
  border-bottom: 1px solid var(--ty-border) !important;
}

.contactinfo li {
  color: var(--ty-text-light) !important;
}

.contactinfo li .fa {
  color: var(--ty-primary) !important;
}

.social-icons li a i {
  color: var(--ty-text-light) !important;
  transition: var(--ty-transition) !important;
}

.social-icons li a i:hover {
  color: var(--ty-primary) !important;
  background: transparent !important;
}

/* === HEADER MIDDLE === */
.header-middle {
  background: var(--ty-white) !important;
  box-shadow: 0 2px 20px var(--ty-shadow) !important;
  border-bottom: 3px solid var(--ty-primary) !important;
}

/* Botón PUBLICAR GRATIS */
@keyframes ty-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,147,30,0.8), 0 6px 24px rgba(232,147,30,0.5); }
  50%  { box-shadow: 0 0 0 14px rgba(232,147,30,0), 0 6px 24px rgba(232,147,30,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(232,147,30,0), 0 6px 24px rgba(232,147,30,0.5); }
}

@keyframes ty-wiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  15%      { transform: rotate(-4deg) scale(1.05); }
  30%      { transform: rotate(4deg) scale(1.05); }
  45%      { transform: rotate(-3deg) scale(1.03); }
  60%      { transform: rotate(3deg) scale(1.03); }
  75%      { transform: rotate(-1deg) scale(1.01); }
}

.freeButton,
.freeButton.shake-horizontal {
  background: linear-gradient(135deg, #FF9F2E, #E8731E, #C97A10) !important;
  background-size: 200% 200% !important;
  color: white !important;
  border-radius: 30px !important;
  padding: 15px 32px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: 3px solid rgba(255,255,255,0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-family: 'Inter', sans-serif !important;
  width: auto !important;
  position: relative !important;
  animation: ty-pulse 1.6s ease-out infinite, ty-wiggle 4s ease-in-out 3s infinite !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

.freeButton::before {
  content: '' !important;
  font-size: 1rem !important;
}

.freeButton:hover {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 16px 40px rgba(232, 147, 30, 0.7) !important;
  color: white !important;
  animation: none !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* Botón Iniciar Sesión */
.shopper {
  font-weight: 500 !important;
  transition: var(--ty-transition) !important;
  font-family: 'Inter', sans-serif !important;
}

/* === HEADER BOTTOM — NAVBAR === */
.header-bottom {
  background: var(--ty-secondary) !important;
  box-shadow: 0 3px 14px rgba(45, 125, 70, 0.28) !important;
}

/* Botón CATEGORÍAS */
.topmenu .topcatalog .topcatalog-btn {
  background: var(--ty-primary) url(../images/bar.png) no-repeat 14px 15px !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

/* Dropdown de categorías */
.topcatalog .topcatalog-list {
  border: none !important;
  box-shadow: 0 10px 40px rgba(30, 58, 47, 0.22) !important;
  border-radius: 0 0 var(--ty-radius) var(--ty-radius) !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

.topcatalog-list li a {
  background: var(--ty-white) !important;
  color: var(--ty-text) !important;
  border-bottom: 1px solid var(--ty-border) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--ty-transition) !important;
  width: 230px !important;
  padding: 12px 18px !important;
}

.topcatalog-list li:hover > a {
  background: var(--ty-light) !important;
  color: var(--ty-primary) !important;
  padding-left: 24px !important;
}

.topcatalog-list li:after {
  background: var(--ty-primary) !important;
}

/* Menú principal */
.topmenu .mainmenu {
  background: transparent !important;
  padding: 0 8px !important;
}

.topmenu .mainmenu > li > a {
  color: rgba(255,255,255,0.90) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  padding: 14px 18px !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--ty-transition) !important;
}

.topmenu .mainmenu > li > a:hover,
.topmenu .mainmenu > li > a.active {
  color: var(--ty-accent) !important;
  background: rgba(255,255,255,0.10) !important;
}

.topmenu .mainmenu > li > .sub-menu {
  border: none !important;
  box-shadow: 0 8px 32px rgba(30, 58, 47, 0.22) !important;
  border-radius: 0 0 var(--ty-radius) var(--ty-radius) !important;
  overflow: hidden !important;
}

.topmenu .mainmenu > li > .sub-menu li a {
  color: var(--ty-text) !important;
  background: var(--ty-white) !important;
  border-bottom: 1px solid var(--ty-border) !important;
  transition: var(--ty-transition) !important;
  font-family: 'Inter', sans-serif !important;
}

.topmenu .mainmenu > li > .sub-menu li a:hover {
  color: var(--ty-primary) !important;
  background: var(--ty-light) !important;
}

/* Buscador */
.topsearch-form {
  border-radius: 24px !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.16) !important;
  color: white !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  transition: var(--ty-transition) !important;
  padding: 8px 16px 8px 44px !important;
}

.topsearch-form::placeholder {
  color: rgba(255,255,255,0.65) !important;
}

.topsearch-form:focus {
  background: rgba(255,255,255,0.28) !important;
  border-color: var(--ty-accent) !important;
}

/* === CARDS DE PRODUCTOS === */
.prod-i {
  background: var(--ty-white) !important;
  border-radius: var(--ty-radius) !important;
  box-shadow: 0 2px 14px var(--ty-shadow) !important;
  overflow: hidden !important;
  transition: var(--ty-transition) !important;
  border: 1px solid var(--ty-border) !important;
}

.prod-i:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 36px rgba(45, 125, 70, 0.22) !important;
}

.prod-i-add {
  background: linear-gradient(135deg, var(--ty-secondary), var(--ty-secondary-dark)) !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--ty-transition) !important;
}

.prod-i-add:hover {
  background: var(--ty-primary) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

.prod-i-price b {
  color: var(--ty-primary) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.description-card {
  background: var(--ty-light) !important;
  border-top: 1px solid var(--ty-border) !important;
}

.description-card p {
  color: var(--ty-text-light) !important;
  font-size: 12px !important;
}

/* === LISTA DE CATÁLOGO === */
.prodlist-i {
  background: var(--ty-white) !important;
  border-radius: var(--ty-radius) !important;
  box-shadow: 0 2px 14px var(--ty-shadow) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--ty-border) !important;
  transition: var(--ty-transition) !important;
}

.prodlist-i:hover {
  box-shadow: 0 8px 28px rgba(45, 125, 70, 0.2) !important;
  transform: translateY(-3px) !important;
}

.prodlist-i-cont h3 a {
  color: var(--ty-dark) !important;
  font-size: 17px !important;
  transition: var(--ty-transition) !important;
}

.prodlist-i-cont h3 a:hover {
  color: var(--ty-primary) !important;
}

.prodlist-i-price b {
  color: var(--ty-primary) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.prodlist-i-propttl span {
  color: var(--ty-text-light) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* === STICKERS DE CATEGORÍA === */
.prod-sticker-3 {
  background: var(--ty-secondary) !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  display: inline-block !important;
  box-shadow: 0 2px 6px rgba(45,125,70,0.3) !important;
}

.prod-sticker-4 {
  background: var(--ty-primary) !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

.prod-sticker-2 {
  background: #D64D2C !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* === TÍTULOS DE SECCIÓN === */
.component-ttl {
  text-align: center !important;
  margin-bottom: 32px !important;
}

.component-ttl span {
  font-size: 28px !important;
  color: var(--ty-dark) !important;
  position: relative !important;
  padding-bottom: 14px !important;
  display: inline-block !important;
}

.component-ttl span:after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 56px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ty-primary), var(--ty-secondary)) !important;
  border-radius: 2px !important;
}

.main-ttl span {
  font-size: 30px !important;
  color: var(--ty-dark) !important;
}

/* === TABS === */
.fr-pop-tabs li a {
  color: var(--ty-text-light) !important;
  padding: 10px 20px !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--ty-transition) !important;
  border-bottom: 3px solid transparent !important;
}

.fr-pop-tabs li a:hover,
.fr-pop-tabs li a.active {
  color: var(--ty-primary) !important;
  border-bottom-color: var(--ty-primary) !important;
  background: rgba(232, 147, 30, 0.07) !important;
}

/* === FILTRO LATERAL === */
.section-filter {
  background: var(--ty-white) !important;
  border-radius: var(--ty-radius) !important;
  box-shadow: 0 2px 14px var(--ty-shadow) !important;
  border: 1px solid var(--ty-border) !important;
  overflow: hidden !important;
}

.section-filter-ttl {
  color: var(--ty-dark) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
}

.btn-themes,
button.btn-themes {
  background: linear-gradient(135deg, var(--ty-secondary), var(--ty-secondary-dark)) !important;
  color: white !important;
  border-radius: 24px !important;
  padding: 10px 28px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  border: none !important;
  transition: var(--ty-transition) !important;
  box-shadow: 0 4px 14px rgba(45, 125, 70, 0.38) !important;
}

.btn-themes:hover {
  background: var(--ty-primary) !important;
  transform: translateY(-2px) !important;
}

#section-filter-toggle,
.section-filter-toggle {
  background: var(--ty-secondary) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}

/* === SLIDER HERO === */
.fr-slider-cont {
  background: linear-gradient(to right, rgba(30,58,47,0.88), rgba(45,125,70,0.55)) !important;
  border-radius: 10px !important;
}

.fr-slider-cont h3 {
  font-size: 28px !important;
  color: white !important;
}

.fr-slider-cont p {
  color: rgba(255,255,255,0.85) !important;
}

.fr-slider-more {
  background: var(--ty-primary) !important;
  color: white !important;
  border-radius: 24px !important;
  padding: 10px 26px !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--ty-transition) !important;
  display: inline-block !important;
}

.fr-slider-more:hover {
  background: white !important;
  color: var(--ty-primary) !important;
  transform: translateY(-2px) !important;
}

/* === MIGAS DE PAN === */
.b-crumbs li a {
  color: var(--ty-secondary) !important;
  transition: var(--ty-transition) !important;
}

.b-crumbs li a:hover {
  color: var(--ty-primary) !important;
}

/* === BLOG POSTS === */
.posts-i {
  border-radius: var(--ty-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 14px var(--ty-shadow) !important;
  transition: var(--ty-transition) !important;
  background: var(--ty-white) !important;
}

.posts-i:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 28px rgba(45, 125, 70, 0.22) !important;
}

.posts-i-ctg {
  color: var(--ty-primary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.posts-i-ttl a {
  color: var(--ty-dark) !important;
  transition: var(--ty-transition) !important;
}

.posts-i-ttl a:hover {
  color: var(--ty-primary) !important;
}

/* === PAGINACIÓN === */
.pagi {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 36px 0 !important;
  flex-wrap: wrap !important;
}

/* === SEARCH RESULTS DROPDOWN === */
#search-results {
  background: var(--ty-white) !important;
  border-radius: var(--ty-radius) !important;
  box-shadow: 0 10px 40px rgba(30,58,47,0.2) !important;
  border: 1px solid var(--ty-border) !important;
}

/* === FOOTER === */
.footer-wrap {
  background: var(--ty-dark) !important;
}

.footer-top {
  background: var(--ty-dark) !important;
  border-top: 4px solid var(--ty-primary) !important;
}

.footer-bottom {
  background: rgba(0,0,0,0.28) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.companyinfo a {
  color: rgba(255,255,255,0.82) !important;
  font-size: 14px !important;
}

.f-info-ttl {
  color: var(--ty-accent) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
}

.footer-wrap p,
.footer-wrap div {
  color: rgba(255,255,255,0.65) !important;
}

.footer-copyright {
  font-size: 13px !important;
}

.footer-copyright a {
  color: var(--ty-accent) !important;
  font-weight: 600 !important;
}

.footer-wrap .social-icons li a i {
  color: rgba(255,255,255,0.55) !important;
}

.footer-wrap .social-icons li a i:hover {
  color: var(--ty-primary) !important;
  background: transparent !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--ty-cream); }
::-webkit-scrollbar-thumb { background: var(--ty-secondary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ty-primary); }

/* === ALERTAS === */
.alert {
  border-radius: 12px !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

/* === MOBILE === */
@media (max-width: 768px) {
  .component-ttl span { font-size: 22px !important; }
  .main-ttl span { font-size: 22px !important; }
  .prodlist-i-price b { font-size: 16px !important; }
  .ty-tagline { display: none !important; }
  .ty-hamburger { display: flex !important; }
  .ty-header-actions { gap: 6px !important; }
  .ty-login-btn span, .ty-user-btn span { display: none; }

  /* ── Header middle: logo + botones en columna centrada ── */
  .header-middle { padding: 10px 0 !important; }
  .header-middle .header-middle-cont {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
  }
  .toplogo {
    display: block !important;
    text-align: center !important;
    margin: 0 0 4px !important;
  }
  .toplogo img { max-width: 180px !important; }
  .shop-menu { display: block !important; width: 100% !important; }
  .shop-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .shop-menu ul li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Botones de acción: tamaño compacto */
  .freeButton, .freeButton.shake-horizontal {
    font-size: .72rem !important;
    padding: 7px 13px !important;
    letter-spacing: 0 !important;
    animation: ty-pulse 1.6s ease-out infinite !important;
  }
  /* Botón ganado mobile */
  .shop-menu a[href*="ganadoyucatan"] {
    font-size: .72rem !important;
    padding: 7px 13px !important;
  }
  /* Botón iniciar sesión mobile */
  .shopper { font-size: .8rem !important; }

  /* ── Topmenu: search colapsado en mobile para no encimarse ── */
  .topsearch form { flex-wrap: nowrap !important; }
  .topsearch .topsearch-form,
  .search-show .topsearch .topsearch-form {
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    margin: 0 !important;
  }
  .search-show .topsearch .topsearch-form {
    width: 120px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-width: 2px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  /* Dropdown search en mobile */
  #search-results {
    width: calc(100vw - 16px) !important;
    right: 0 !important;
    left: auto !important;
  }
}