/* ===== v2.7 adaptive two-column cards =====
   Loaded last from HTML. Mobile polish focused on keeping the original-style
   lower area: price + visible chart + 3 KPI chips, without overlap.
*/

@media (min-width: 360px) {
  #productsGrid.products-grid,
  #topDealsGrid.products-grid,
  #historyCards.products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.7vw, 18px) !important;
  }

  #relatedList.related-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(6px, 1.3vw, 12px) !important;
  }
}

@media (max-width: 359px) {
  #productsGrid.products-grid,
  #topDealsGrid.products-grid,
  #historyCards.products-grid,
  #relatedList.related-list {
    grid-template-columns: 1fr !important;
  }
}

.product-card {
  border-radius: clamp(12px, 2.8vw, 20px) !important;
}

.product-card .product-image-wrap {
  aspect-ratio: 16 / 9.2 !important;
}

.product-card .product-images-row img {
  padding: clamp(5px, 1.9vw, 14px) !important;
}

.product-card .product-info {
  padding: clamp(8px, 1.9vw, 16px) clamp(8px, 2vw, 16px) clamp(9px, 2.1vw, 16px) !important;
  gap: clamp(4px, 1.2vw, 8px) !important;
}

.product-card .product-category {
  font-size: clamp(7px, 1.6vw, 10px) !important;
  letter-spacing: clamp(0.35px, 0.16vw, 1.2px) !important;
}

.product-card .product-name {
  font-size: clamp(10.4px, 2.45vw, 14px) !important;
  line-height: 1.25 !important;
  min-height: calc(1.25em * 2) !important;
  -webkit-line-clamp: 2 !important;
}

.product-card .product-stats-row {
  gap: clamp(6px, 1.4vw, 12px) !important;
  align-items: flex-end !important;
}

.product-card .product-price {
  font-size: clamp(16px, 4.5vw, 24px) !important;
  line-height: 1.05 !important;
}

.product-card .product-price sup {
  font-size: clamp(8px, 2vw, 12px) !important;
}

.product-card .product-rating {
  font-size: clamp(9px, 2vw, 12px) !important;
}

.product-card .product-rating .star-icon {
  width: clamp(9px, 2.1vw, 13px) !important;
  height: clamp(9px, 2.1vw, 13px) !important;
}

.product-card .mini-chart {
  display: flex !important;
  min-width: 0 !important;
  max-width: clamp(60px, 18vw, 140px) !important;
}

.product-card .mini-chart-svg {
  display: block !important;
  width: 100% !important;
  height: clamp(20px, 5vw, 50px) !important;
}

.product-card .mini-chart-icon {
  font-size: clamp(7px, 1.8vw, 10px) !important;
  gap: clamp(2px, 0.8vw, 5px) !important;
}

.product-card .mini-chart-icon svg {
  width: clamp(8px, 2vw, 14px) !important;
  height: clamp(8px, 2vw, 14px) !important;
}

.product-card .product-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(3px, 1vw, 6px) !important;
  margin-top: clamp(4px, 1.1vw, 7px) !important;
}

.product-card .kpi {
  min-width: 0 !important;
  justify-content: center !important;
  padding: clamp(3px, 1vw, 6px) clamp(3px, 1.1vw, 8px) !important;
  font-size: clamp(8px, 1.9vw, 11px) !important;
  gap: clamp(2px, 0.7vw, 5px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.product-card .kpi svg {
  flex: 0 0 auto !important;
  width: clamp(9px, 2vw, 14px) !important;
  height: clamp(9px, 2vw, 14px) !important;
}

.product-card .discount-tag {
  top: clamp(5px, 1.5vw, 12px) !important;
  left: clamp(5px, 1.5vw, 12px) !important;
  padding: clamp(2px, 0.8vw, 5px) clamp(6px, 1.6vw, 12px) !important;
  font-size: clamp(8px, 1.9vw, 13px) !important;
  border-radius: clamp(8px, 2vw, 14px) !important;
}

.product-card .fav-btn {
  top: clamp(5px, 1.5vw, 12px) !important;
  right: clamp(5px, 1.5vw, 12px) !important;
  width: clamp(24px, 6vw, 34px) !important;
  height: clamp(24px, 6vw, 34px) !important;
}

.product-card .fav-btn svg {
  width: clamp(11px, 3vw, 14px) !important;
  height: clamp(11px, 3vw, 14px) !important;
}

.product-card .card-nav {
  width: clamp(22px, 5.8vw, 30px) !important;
  height: clamp(22px, 5.8vw, 30px) !important;
}

.product-card .card-dots {
  bottom: clamp(3px, 1.2vw, 8px) !important;
  gap: clamp(3px, 0.9vw, 5px) !important;
}

.product-card .card-dots .dot {
  width: clamp(4px, 1.2vw, 6px) !important;
  height: clamp(4px, 1.2vw, 6px) !important;
}

.product-card .card-dots .dot.active {
  width: clamp(11px, 3.6vw, 18px) !important;
}

/* Narrow visible zones: original-style compact lower area. */
@media (max-width: 480px) {
  #productsGrid.products-grid,
  #topDealsGrid.products-grid,
  #historyCards.products-grid,
  #relatedList.related-list {
    gap: 8px !important;
  }

  .product-card {
    min-height: 238px !important;
  }

  .product-card .product-image-wrap {
    aspect-ratio: 16 / 8.65 !important;
  }

  .product-card .product-info {
    padding: 8px 9px 9px !important;
    gap: 5px !important;
  }

  .product-card .product-category {
    font-size: 7.2px !important;
    letter-spacing: 0.45px !important;
  }

  .product-card .product-name {
    font-size: 10.4px !important;
    line-height: 1.23 !important;
    min-height: 25px !important;
  }

  .product-card .product-stats-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    grid-template-areas:
      "price chart"
      "rating chart";
    gap: 2px 7px !important;
    align-items: end !important;
    margin-top: 2px !important;
  }

  .product-card .price-block {
    display: contents !important;
  }

  .product-card .product-price {
    grid-area: price !important;
    min-width: 0 !important;
    font-size: 18px !important;
    letter-spacing: -0.45px !important;
  }

  .product-card .product-price sup {
    font-size: 8.5px !important;
  }

  .product-card .product-rating {
    grid-area: rating !important;
    margin-top: 1px !important;
    font-size: 9px !important;
  }

  .product-card .product-rating .star-icon {
    width: 9px !important;
    height: 9px !important;
  }

  .product-card .mini-chart {
    grid-area: chart !important;
    display: flex !important;
    width: 62px !important;
    max-width: 62px !important;
    justify-self: end !important;
    align-self: end !important;
    gap: 1px !important;
    opacity: 0.92 !important;
  }

  .product-card .mini-chart-svg {
    height: 22px !important;
  }

  .product-card .mini-chart-icon {
    justify-content: flex-end !important;
    min-height: 10px !important;
  }

  .product-card .mini-chart-icon svg {
    width: 9px !important;
    height: 9px !important;
  }

  .product-card .mini-chart-icon span {
    display: none !important;
  }

  .product-card .product-kpis {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin-top: 7px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  }

  .product-card .product-kpis .kpi:nth-child(3) {
    grid-column: auto !important;
    width: auto !important;
    justify-self: stretch !important;
  }

  .product-card .kpi {
    min-height: 19px !important;
    padding: 3px 2px !important;
    font-size: 7.4px !important;
    border-radius: 9px !important;
    gap: 2px !important;
  }

  .product-card .kpi svg {
    width: 8px !important;
    height: 8px !important;
  }
}

@media (max-width: 390px) {
  .product-card {
    min-height: 240px !important;
  }

  .product-card .product-info {
    padding: 7px 8px 9px !important;
  }

  .product-card .product-name {
    font-size: 10.1px !important;
  }

  .product-card .product-stats-row {
    grid-template-columns: minmax(0, 1fr) 58px !important;
    gap: 2px 6px !important;
  }

  .product-card .product-price {
    font-size: 17px !important;
  }

  .product-card .mini-chart {
    display: flex !important;
    width: 58px !important;
    max-width: 58px !important;
  }

  .product-card .mini-chart-svg {
    height: 21px !important;
  }

  .product-card .product-kpis {
    gap: 2px !important;
  }

  .product-card .kpi {
    font-size: 7px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}

/* ===== v2.8 desktop responsive product grids =====
   Mobile keeps the compact 2-card layout.
   Desktop/tablet can breathe: 3, 4, or more columns depending on width.
*/
@media (min-width: 768px) {
  #productsGrid.products-grid,
  #topDealsGrid.products-grid,
  #historyCards.products-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: clamp(14px, 1.4vw, 24px) !important;
  }
}

@media (min-width: 1180px) {
  #productsGrid.products-grid,
  #topDealsGrid.products-grid,
  #historyCards.products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1760px) {
  #productsGrid.products-grid,
  #topDealsGrid.products-grid,
  #historyCards.products-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  #relatedList.related-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
  }
}

@media (min-width: 1180px) {
  #relatedList.related-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== v2.10 final marketplace header override ===== */
.header {
  background: rgba(255,255,255,0.96) !important;
}

.header-container {
  display: grid !important;
  grid-template-columns: auto minmax(280px, 760px) auto !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: clamp(18px, 2vw, 32px) !important;
  row-gap: 10px !important;
  padding: 10px 32px 8px !important;
  max-width: 1400px !important;
}

.header-search-wrap {
  width: min(760px, 54vw) !important;
  justify-self: center !important;
  min-width: 0 !important;
}

.search-bar.search-bar-header {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 6px 6px 6px 16px !important;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

.search-bar.search-bar-header .search-submit {
  border-radius: 8px !important;
}

.header-actions .search-btn {
  display: none !important;
}

.header-nav-row {
  border-top: 1px solid rgba(229, 231, 235, 0.8) !important;
  background: rgba(255,255,255,0.72) !important;
}

.header-nav-row .nav-desktop {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 8px 32px 10px !important;
  display: flex !important;
  flex: none !important;
  justify-content: center !important;
  gap: clamp(18px, 2.4vw, 38px) !important;
}

.header-container > .nav-desktop {
  display: none !important;
}

.hero {
  padding-top: 42px !important;
}

@media (max-width: 1023px) {
  .header-container {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding: 10px 16px !important;
    column-gap: 12px !important;
  }

  .header-search-wrap {
    width: 100% !important;
  }

  .search-bar.search-bar-header {
    padding: 5px 5px 5px 12px !important;
  }

  .search-bar.search-bar-header .search-submit {
    padding: 9px 14px !important;
  }

  .header-nav-row .nav-desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .header-container {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
  }

  .logo-img {
    height: 30px !important;
    max-width: 100px !important;
  }

  .btn-ingresar {
    padding: 8px 12px !important;
  }

  .search-bar.search-bar-header {
    border-radius: 999px !important;
    gap: 8px !important;
  }

  .search-bar.search-bar-header .search-submit {
    display: none !important;
  }

  #searchInput {
    font-size: 14px !important;
  }

  .hero {
    padding-top: 32px !important;
  }
}

@media (max-width: 430px) {
  .header-container {
    grid-template-columns: auto 1fr !important;
  }

  .header-actions {
    grid-column: 2 !important;
    justify-self: end !important;
    margin-top: -2px !important;
  }

  .header-search-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .logo-img {
    max-width: 116px !important;
  }
}

/* ===== v2.11 desktop one-line marketplace header ===== */
@media (min-width: 1280px) {
  .header-container {
    grid-template-columns: auto minmax(300px, 620px) auto auto !important;
    max-width: 1480px !important;
    column-gap: clamp(14px, 1.25vw, 24px) !important;
    padding: 12px 32px !important;
  }

  .header-search-wrap {
    width: 100% !important;
    max-width: 620px !important;
  }

  .nav-desktop-inline {
    display: flex !important;
    flex: 0 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(14px, 1.25vw, 26px) !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .nav-desktop-inline .nav-link {
    font-size: clamp(13px, 0.82vw, 15px) !important;
    padding: 6px 0 !important;
  }

  .header-nav-row {
    display: none !important;
  }

  .header-actions {
    justify-self: end !important;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .header-container {
    grid-template-columns: auto minmax(280px, 520px) auto auto !important;
    column-gap: 14px !important;
  }

  .header-search-wrap {
    max-width: 520px !important;
  }

  .nav-desktop-inline {
    gap: 14px !important;
  }

  .btn-ingresar {
    padding: 9px 18px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-desktop-inline {
    display: none !important;
  }

  .header-nav-row {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  .nav-desktop-inline {
    display: none !important;
  }
}

/* ===== v2.12 fix: mostrar menú inline en desktop ancho ===== */
@media (min-width: 1280px) {
  .header-container > .nav-desktop.nav-desktop-inline {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ===== v2.13 hide home hero/title block ===== */
main.main > section.hero {
  display: none !important;
}

main.main > section.categories {
  margin-top: 0 !important;
}

/* ===== v2.16 related sidebar: 2 visible cards + internal scroll ===== */
@media (min-width: 1024px) {
  .related-col {
    position: relative !important;
    overflow: hidden !important;
  }

  .related-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
  }

  .related-header {
    flex: 0 0 auto !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(226,232,240,0.9) !important;
  }

  .related-card .card-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  #relatedList.related-list {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 14px !important;
    padding: 0 6px 2px 0 !important;
    scrollbar-width: thin !important;
  }

  #relatedList.related-list .product-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-rows: 132px auto !important;
    overflow: hidden !important;
  }

  #relatedList.related-list .product-image-wrap {
    aspect-ratio: auto !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  #relatedList.related-list .product-images-row {
    height: 100% !important;
  }

  #relatedList.related-list .product-images-row img {
    max-height: 118px !important;
    padding: 8px !important;
    object-fit: contain !important;
  }

  #relatedList.related-list .product-info {
    padding: 10px 10px 12px !important;
    gap: 6px !important;
  }

  #relatedList.related-list .product-category {
    font-size: 10px !important;
    letter-spacing: 0.7px !important;
  }

  #relatedList.related-list .product-name {
    font-size: 13.5px !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 2 !important;
    min-height: 32px !important;
  }

  #relatedList.related-list .product-stats-row {
    margin-top: 0 !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(96px, 1.1fr) !important;
    align-items: end !important;
  }

  #relatedList.related-list .product-price {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  #relatedList.related-list .product-price sup {
    font-size: 10px !important;
  }

  #relatedList.related-list .product-rating {
    font-size: 11px !important;
  }

  #relatedList.related-list .product-rating .star-icon {
    width: 11px !important;
    height: 11px !important;
  }

  #relatedList.related-list .mini-chart {
    max-width: 125px !important;
    gap: 2px !important;
  }

  #relatedList.related-list .mini-chart-svg {
    height: 28px !important;
    max-width: 112px !important;
  }

  #relatedList.related-list .mini-chart-icon {
    font-size: 9.5px !important;
  }

  #relatedList.related-list .product-kpis {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  #relatedList.related-list .kpi {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    gap: 3px !important;
  }

  #relatedList.related-list .kpi svg {
    width: 10px !important;
    height: 10px !important;
  }

  #relatedList.related-list .discount-tag {
    top: 10px !important;
    left: 10px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
  }

  #relatedList.related-list .fav-btn {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
  }

  #relatedList.related-list .fav-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  #relatedList.related-list .card-nav {
    width: 28px !important;
    height: 48px !important;
  }

  #relatedList.related-list .card-dots {
    bottom: 7px !important;
  }

  #relatedList.related-list .card-dots .dot {
    width: 5px !important;
    height: 5px !important;
  }

  #relatedList.related-list .card-dots .dot.active {
    width: 15px !important;
  }

  .related-card .link-more,
  .related-card > .link-more {
    flex: 0 0 auto !important;
    margin-top: 10px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    border: 1px solid rgba(16,185,129,0.35) !important;
    border-radius: 999px !important;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  #relatedList.related-list .product-card {
    grid-template-rows: 116px auto !important;
  }
  #relatedList.related-list .product-image-wrap {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }
  #relatedList.related-list .product-images-row img {
    max-height: 102px !important;
  }
  #relatedList.related-list .product-info {
    padding: 8px 10px 10px !important;
    gap: 4px !important;
  }
  #relatedList.related-list .product-name {
    font-size: 12.5px !important;
    min-height: 30px !important;
  }
  #relatedList.related-list .product-price {
    font-size: 18px !important;
  }
  #relatedList.related-list .product-kpis {
    display: grid !important;
  }
}

/* ===== v2.17 hard fix related sidebar: kill old 4-col grid ===== */
@media (min-width: 1024px) {
  aside.related-col #relatedList.related-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    width: 100% !important;
    gap: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 210px) !important;
    padding-right: 6px !important;
  }

  aside.related-col #relatedList.related-list > .product-card {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 286px !important;
    height: 286px !important;
    min-height: 286px !important;
    display: grid !important;
    grid-template-rows: 126px 1fr !important;
  }

  aside.related-col #relatedList.related-list > .product-card .product-image-wrap {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    aspect-ratio: auto !important;
  }

  aside.related-col #relatedList.related-list > .product-card .product-images-row img {
    max-height: 112px !important;
  }

  aside.related-col .related-card {
    max-height: calc(100vh - 120px) !important;
  }
}

/* v2.19-mobile-login-only-inside-menu */
@media (max-width: 767px) {
  .header-actions > .btn-ingresar:not(.btn-mobile) {
    display: none !important;
  }

  .nav-mobile .btn-ingresar.btn-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
  }
}

/* v2.20-mobile-breadcrumb-compact */
@media (max-width: 767px) {
  .product-page .breadcrumb {
    gap: 4px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
    max-width: 100% !important;
  }

  .product-page .breadcrumb a,
  .product-page .breadcrumb .separator,
  .product-page .breadcrumb .current {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  .product-page .breadcrumb .current {
    max-width: 44vw !important;
  }
}

/* v2.21-mobile-type-scale-global */
@media (max-width: 767px) {
  html { font-size: 14px !important; }
  body { font-size: 13px !important; line-height: 1.35 !important; }

  .nav-link,
  .btn-ingresar,
  .search-bar input,
  .search-submit,
  .btn,
  button,
  input,
  select,
  textarea {
    font-size: 12px !important;
  }

  .hero-badge,
  .card-badge,
  .deal-badge,
  .offer-badge,
  .tag,
  .chip,
  .badge {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .hero-title,
  .section-title {
    font-size: clamp(20px, 5vw, 25px) !important;
    line-height: 1.08 !important;
  }

  .hero-subtitle,
  .section-subtitle,
  .card-description,
  .product-description,
  .product-meta,
  .rating-text,
  .seller-name,
  .offer-seller {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .card-title,
  .product-card h3,
  .product-title,
  .offer-title {
    font-size: clamp(13px, 3.4vw, 16px) !important;
    line-height: 1.12 !important;
  }

  .product-page .product-title {
    font-size: clamp(16px, 4.2vw, 20px) !important;
  }

  .price,
  .product-price,
  .offer-price,
  .price-value {
    font-size: clamp(16px, 4.6vw, 22px) !important;
    line-height: 1.05 !important;
  }

  .offer-btn,
  .product-btn,
  .btn-primary,
  .btn-secondary,
  .primary-action,
  .secondary-action {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
}

/* v2.22-mobile-header-clean-icon-search
   Mobile header: compact menu + icon-only logo top row, full search below.
*/
@media (max-width: 430px) {
  .header {
    background: #fff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82) !important;
  }

  .header-container {
    grid-template-columns: 34px 1fr !important;
    grid-template-rows: 34px auto !important;
    column-gap: 9px !important;
    row-gap: 9px !important;
    align-items: center !important;
    padding: 9px 16px 12px !important;
  }

  .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 28px !important;
    height: 22px !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .menu-toggle span {
    height: 2.4px !important;
    border-radius: 999px !important;
    background: #0f172a !important;
  }

  .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo-img {
    content: url('../assets/logo-icon.svg') !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    object-fit: contain !important;
  }

  .header-actions {
    display: none !important;
  }

  .header-search-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  .search-bar.search-bar-header {
    height: 45px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    background: #fff !important;
    box-shadow: 0 9px 22px -18px rgba(15, 23, 42, 0.55) !important;
    gap: 10px !important;
  }

  .search-bar.search-bar-header .search-icon {
    width: 18px !important;
    height: 18px !important;
    color: #94a3b8 !important;
    flex: 0 0 auto !important;
  }

  .search-bar.search-bar-header input,
  #searchInput {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    min-width: 0 !important;
  }
}

/* v2.23-mobile-header-premium-one-line
   Mobile header: menu + icon logo + search in one premium compact row.
*/
@media (max-width: 430px) {
  .header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78) !important;
  }

  .header-container {
    display: grid !important;
    grid-template-columns: 34px 36px minmax(0, 1fr) !important;
    grid-template-rows: 42px !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 10px 14px !important;
    min-height: 62px !important;
  }

  .menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 28px !important;
    height: 22px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .menu-toggle span {
    height: 2.4px !important;
    border-radius: 999px !important;
    background: #111827 !important;
  }

  .logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 36px !important;
    height: 36px !important;
    justify-self: center !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo-img {
    content: url('../assets/logo-icon.svg') !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    object-fit: contain !important;
  }

  .header-actions {
    display: none !important;
  }

  .header-search-wrap {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: center !important;
  }

  .search-bar.search-bar-header {
    height: 42px !important;
    min-height: 42px !important;
    width: 100% !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.96) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    box-shadow: 0 8px 22px -18px rgba(15, 23, 42, 0.6) !important;
    gap: 8px !important;
  }

  .search-bar.search-bar-header .search-icon {
    width: 17px !important;
    height: 17px !important;
    color: #94a3b8 !important;
    flex: 0 0 auto !important;
  }

  .search-bar.search-bar-header input,
  #searchInput {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    min-width: 0 !important;
    text-overflow: ellipsis !important;
  }
}


/* v2.24-mobile-header-marketplace-line
   Reference direction: icon logo left, search center, menu right in one marketplace row.
*/
@media (max-width: 430px) {
  .header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82) !important;
  }

  .header-container {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px !important;
    grid-template-rows: 42px !important;
    column-gap: 9px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 9px 12px !important;
    min-height: 60px !important;
    background: transparent !important;
  }

  .logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 38px !important;
    height: 38px !important;
    justify-self: center !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo-img {
    content: url('../assets/logo-icon.svg') !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.10)) !important;
  }

  .header-search-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: center !important;
  }

  .search-bar.search-bar-header {
    height: 40px !important;
    min-height: 40px !important;
    width: 100% !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 18px -17px rgba(15, 23, 42, 0.62) !important;
    gap: 8px !important;
  }

  .search-bar.search-bar-header .search-icon {
    width: 16px !important;
    height: 16px !important;
    color: #94a3b8 !important;
    flex: 0 0 auto !important;
  }

  .search-bar.search-bar-header input,
  #searchInput {
    font-size: 11.5px !important;
    font-weight: 650 !important;
    color: #475569 !important;
    min-width: 0 !important;
    text-overflow: ellipsis !important;
  }

  .menu-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 28px !important;
    height: 21px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .menu-toggle span {
    height: 2px !important;
    border-radius: 999px !important;
    background: #0f172a !important;
  }

  .header-actions {
    display: none !important;
  }
}


/* v2.25-mobile-chart-polish
   Cleaner premium chart card + segmented range buttons.
*/
@media (max-width: 767px) {
  .product-page .chart-card {
    padding: 14px 14px 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(209, 250, 229, 0.95) !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.08), transparent 38%),
      linear-gradient(180deg, #ffffff 0%, #fbfffd 100%) !important;
    box-shadow: 0 14px 32px -26px rgba(15, 23, 42, 0.40) !important;
  }

  .product-page .chart-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .product-page .chart-header .card-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em !important;
  }

  .product-page .chart-header .card-title svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.20)) !important;
  }

  .product-page .range-tabs {
    width: max-content !important;
    display: inline-grid !important;
    grid-template-columns: repeat(3, 48px) !important;
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.78) !important;
    background: #f1f5f9 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82) !important;
  }

  .product-page .range-tab {
    height: 29px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
  }

  .product-page .range-tab.active {
    background: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 9px 18px -12px rgba(16, 185, 129, 0.95) !important;
  }

  .product-page .range-tab:active {
    transform: scale(0.97) !important;
  }

  .product-page .chart-wrapper {
    height: 205px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(236, 253, 245, 0.55), rgba(255,255,255,0.72)) !important;
  }

  .product-page .chart-grid line {
    stroke: rgba(203, 213, 225, 0.58) !important;
    stroke-dasharray: 2 5 !important;
  }

  .product-page .chart-axis text {
    fill: #94a3b8 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
  }

  .product-page .chart-area {
    opacity: 0.34 !important;
  }

  .product-page .chart-line {
    stroke-width: 3 !important;
    filter: drop-shadow(0 4px 5px rgba(16, 185, 129, 0.24)) !important;
  }

  .product-page .chart-point {
    stroke-width: 2.5 !important;
  }
}


/* v2.26-mobile-chart-header-one-line
   Chart title + range buttons in one compact premium row.
*/
@media (max-width: 767px) {
  .product-page .chart-card {
    padding-top: 12px !important;
  }

  .product-page .chart-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    margin-bottom: 10px !important;
  }

  .product-page .chart-header .card-title {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    margin: 0 !important;
    font-size: clamp(11px, 3.05vw, 12.5px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-page .chart-header .card-title svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }

  .product-page .range-tabs {
    width: auto !important;
    display: inline-grid !important;
    grid-template-columns: repeat(3, 34px) !important;
    gap: 2px !important;
    padding: 2px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    border: 1px solid rgba(203, 213, 225, 0.78) !important;
    justify-self: end !important;
  }

  .product-page .range-tab {
    width: 34px !important;
    height: 25px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  .product-page .range-tab.active {
    box-shadow: 0 7px 14px -11px rgba(16, 185, 129, 0.95) !important;
  }
}


/* v2.27-mobile-chart-complete-compact
   Full chart presentation pass: compact card, one-line header, summary chips, softer SVG.
*/
@media (max-width: 767px) {
  .product-page .chart-card {
    padding: 11px 12px 12px !important;
    border-radius: 16px !important;
  }

  .product-page .chart-header {
    margin-bottom: 8px !important;
  }

  .product-page .chart-header .card-title {
    font-size: clamp(11.2px, 3vw, 12.2px) !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
  }

  .product-page .range-tabs {
    grid-template-columns: repeat(3, 31px) !important;
    padding: 2px !important;
  }

  .product-page .range-tab {
    width: 31px !important;
    height: 23px !important;
    font-size: 9.4px !important;
  }

  .product-page .chart-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 0 8px !important;
  }

  .product-page .chart-summary-item {
    min-width: 0 !important;
    padding: 5px 6px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, 0.88) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .product-page .chart-summary-label {
    color: #94a3b8 !important;
    font-size: 6.6px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
  }

  .product-page .chart-summary-item strong {
    color: #0f172a !important;
    font-size: 9.2px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-page .chart-wrapper {
    height: 168px !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.36), rgba(255,255,255,0.82)) !important;
  }

  .product-page .chart-area {
    opacity: 0.22 !important;
  }

  .product-page .chart-line,
  .product-page .chart-price-line {
    stroke-width: 2.15 !important;
    filter: drop-shadow(0 3px 4px rgba(16, 185, 129, 0.16)) !important;
  }

  .product-page .chart-point,
  .product-page #chartActiveDot {
    transform-box: fill-box !important;
    transform-origin: center !important;
  }
}


/* v2.28-mobile-chart-height-minus-15
   Reduce chart card height by roughly 15% on mobile.
*/
@media (max-width: 767px) {
  .product-page .chart-card {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .product-page .chart-header {
    margin-bottom: 7px !important;
  }

  .product-page .chart-wrapper {
    height: 143px !important;
  }
}


/* v2.29-mobile-chart-title-match-offers
   Match chart title typography with mobile Ofertas title.
*/
@media (max-width: 767px) {
  .product-page .chart-header .card-title {
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    gap: 3px !important;
  }

  .product-page .chart-header .card-title svg {
    width: 11px !important;
    height: 11px !important;
    flex-basis: 11px !important;
  }
}


/* v2.30-mobile-breadcrumb-hide-product-title
   Mobile breadcrumb: keep Inicio > Categoria, hide long product title.
*/
@media (max-width: 767px) {
  .product-page .breadcrumb #bcProduct {
    display: none !important;
  }

  .product-page .breadcrumb #bcProduct::before,
  .product-page .breadcrumb #bcProduct::after {
    display: none !important;
    content: none !important;
  }
}


/* v2.31-related-cards-use-bottom-space
   Related product cards: use the empty area under KPI chips by distributing info vertically.
*/
@media (max-width: 767px) {
  .product-page #relatedList.related-list .product-card {
    grid-template-rows: 120px 1fr !important;
  }

  .product-page #relatedList.related-list .product-image-wrap {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  .product-page #relatedList.related-list .product-images-row img {
    max-height: 108px !important;
  }

  .product-page #relatedList.related-list .product-info {
    min-height: 128px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding: 8px 9px 9px !important;
  }

  .product-page #relatedList.related-list .product-category {
    font-size: 8.4px !important;
    line-height: 1 !important;
  }

  .product-page #relatedList.related-list .product-name {
    min-height: 31px !important;
    font-size: 12.4px !important;
    line-height: 1.17 !important;
  }

  .product-page #relatedList.related-list .product-stats-row {
    margin-top: 0 !important;
    align-items: center !important;
  }

  .product-page #relatedList.related-list .product-kpis {
    margin-top: 0 !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .product-page #relatedList.related-list .kpi {
    min-width: 0 !important;
    justify-content: center !important;
    padding: 4px 4px !important;
    font-size: 7.4px !important;
    line-height: 1 !important;
  }

  .product-page #relatedList.related-list .kpi svg {
    width: 8px !important;
    height: 8px !important;
  }
}


/* v2.32-related-cards-typography-compact
   Product related cards: controlled density, smaller type without losing hierarchy.
*/
@media (max-width: 767px) {
  .product-page #relatedList.related-list .product-card {
    border-radius: 15px !important;
  }

  .product-page #relatedList.related-list .product-info {
    padding: 7px 8px 8px !important;
    gap: 3px !important;
  }

  .product-page #relatedList.related-list .product-category {
    font-size: 7.4px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.42px !important;
    font-weight: 850 !important;
  }

  .product-page #relatedList.related-list .product-name {
    font-size: 11.6px !important;
    line-height: 1.15 !important;
    min-height: 27px !important;
    font-weight: 780 !important;
    letter-spacing: -0.018em !important;
  }

  .product-page #relatedList.related-list .product-stats-row {
    gap: 5px !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(86px, 1.18fr) !important;
  }

  .product-page #relatedList.related-list .product-price {
    font-size: 17.5px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
  }

  .product-page #relatedList.related-list .product-price sup {
    font-size: 8.4px !important;
  }

  .product-page #relatedList.related-list .product-rating {
    font-size: 9.4px !important;
    line-height: 1 !important;
    gap: 2px !important;
  }

  .product-page #relatedList.related-list .product-rating .star-icon {
    width: 9px !important;
    height: 9px !important;
  }

  .product-page #relatedList.related-list .mini-chart {
    max-width: 94px !important;
    gap: 1px !important;
  }

  .product-page #relatedList.related-list .mini-chart-svg {
    height: 22px !important;
    max-width: 86px !important;
  }

  .product-page #relatedList.related-list .mini-chart-icon {
    font-size: 8px !important;
  }

  .product-page #relatedList.related-list .mini-chart-icon svg {
    width: 8px !important;
    height: 8px !important;
  }

  .product-page #relatedList.related-list .product-kpis {
    gap: 3px !important;
  }

  .product-page #relatedList.related-list .kpi {
    padding: 3.5px 3px !important;
    font-size: 6.8px !important;
    font-weight: 760 !important;
    letter-spacing: -0.02em !important;
    gap: 2px !important;
  }

  .product-page #relatedList.related-list .kpi svg {
    width: 7px !important;
    height: 7px !important;
  }
}


/* v2.33-related-title-price-smaller
   Related cards: slightly smaller product titles and prices.
*/
@media (max-width: 767px) {
  .product-page #relatedList.related-list .product-name {
    font-size: 10.8px !important;
    line-height: 1.13 !important;
    min-height: 25px !important;
    letter-spacing: -0.02em !important;
  }

  .product-page #relatedList.related-list .product-price {
    font-size: 16.2px !important;
    line-height: 0.96 !important;
    letter-spacing: -0.06em !important;
  }

  .product-page #relatedList.related-list .product-price sup {
    font-size: 7.6px !important;
  }
}


/* v2.34-related-title-price-smaller-visible
   Related cards: stronger reduction for product titles and prices.
*/
@media (max-width: 767px) {
  .product-page #relatedList.related-list .product-name {
    font-size: 9.8px !important;
    line-height: 1.12 !important;
    min-height: 22px !important;
    font-weight: 760 !important;
    letter-spacing: -0.018em !important;
  }

  .product-page #relatedList.related-list .product-price {
    font-size: 14.8px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
  }

  .product-page #relatedList.related-list .product-price sup {
    font-size: 7px !important;
  }
}


/* v2.35-mobile-menu-premium-panel
   Refined mobile menu: card-like navigation, active state, polished login CTA.
*/
@media (max-width: 767px) {
  .nav-mobile {
    position: relative !important;
    display: none !important;
    padding: 12px 14px 16px !important;
    gap: 7px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(16, 185, 129, 0.08), transparent 36%),
      linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.82) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82) !important;
    box-shadow: 0 18px 38px -32px rgba(15, 23, 42, 0.45) !important;
    overflow: hidden !important;
  }

  .nav-mobile.open {
    display: flex !important;
    animation: mobileMenuDrop 180ms ease-out both !important;
  }

  @keyframes mobileMenuDrop {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-mobile .nav-link {
    min-height: 43px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(226, 232, 240, 0.82) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 780 !important;
    letter-spacing: -0.015em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease !important;
  }

  .nav-mobile .nav-link::after {
    content: "›" !important;
    color: #94a3b8 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .nav-mobile .nav-link.active {
    color: #047857 !important;
    background: #ecfdf5 !important;
    border-color: rgba(16, 185, 129, 0.30) !important;
  }

  .nav-mobile .nav-link.active::after {
    color: #10b981 !important;
  }

  .nav-mobile .nav-link:active {
    transform: scale(0.985) !important;
  }

  .nav-mobile .btn-ingresar.btn-mobile {
    width: 100% !important;
    min-height: 43px !important;
    margin: 6px 0 0 !important;
    align-self: stretch !important;
    justify-content: center !important;
    border-radius: 13px !important;
    border: 1px solid rgba(16, 185, 129, 0.36) !important;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    box-shadow: 0 14px 24px -18px rgba(16, 185, 129, 0.9) !important;
  }

  .nav-mobile .btn-ingresar.btn-mobile:active {
    transform: scale(0.985) !important;
  }
}


/* v2.36-mobile-menu-editorial-marketplace
   Distinctive mobile navigation: icon rail, copy, subtitles, refined CTA.
*/
@media (max-width: 767px) {
  .nav-mobile.nav-mobile-pro {
    display: none !important;
    padding: 13px 14px 16px !important;
    gap: 8px !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.12), transparent 34%),
      radial-gradient(circle at 100% 20%, rgba(245, 158, 11, 0.08), transparent 32%),
      linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.82) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82) !important;
    box-shadow: 0 22px 42px -34px rgba(15, 23, 42, 0.52) !important;
  }

  .nav-mobile.nav-mobile-pro.open {
    display: flex !important;
  }

  .nav-mobile-kicker {
    width: fit-content !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.24) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }

  .nav-mobile.nav-mobile-pro .nav-link {
    min-height: 56px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(226, 232, 240, 0.86) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    column-gap: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
    overflow: hidden !important;
  }

  .nav-mobile.nav-mobile-pro .nav-link::after {
    content: none !important;
  }

  .nav-mobile-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
  }

  .nav-mobile-pro .nav-link:nth-of-type(2) .nav-mobile-icon,
  .nav-mobile-pro .nav-link:nth-of-type(3) .nav-mobile-icon {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.18) !important;
  }

  .nav-mobile-pro .nav-link:nth-of-type(4) .nav-mobile-icon,
  .nav-mobile-pro .nav-link:nth-of-type(5) .nav-mobile-icon {
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%) !important;
    color: #ea580c !important;
    border-color: rgba(249, 115, 22, 0.20) !important;
  }

  .nav-mobile-icon-svg {
    width: 17px !important;
    height: 17px !important;
  }

  .nav-mobile-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .nav-mobile-copy strong {
    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
  }

  .nav-mobile-copy small {
    color: #64748b !important;
    font-size: 10.2px !important;
    line-height: 1.12 !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-mobile-arrow {
    color: #94a3b8 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    justify-self: end !important;
  }

  .nav-mobile.nav-mobile-pro .nav-link.active {
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%) !important;
    border-color: rgba(16, 185, 129, 0.32) !important;
  }

  .nav-mobile.nav-mobile-pro .nav-link.active .nav-mobile-copy strong,
  .nav-mobile.nav-mobile-pro .nav-link.active .nav-mobile-arrow {
    color: #047857 !important;
  }

  .nav-mobile.nav-mobile-pro .btn-ingresar.btn-mobile {
    min-height: 54px !important;
    width: 100% !important;
    margin-top: 5px !important;
    padding: 8px 13px !important;
    border-radius: 16px !important;
    border: 0 !important;
    background:
      linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(4, 120, 87, 0.96)) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 30px -22px rgba(15, 23, 42, 0.72) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .nav-mobile.nav-mobile-pro .btn-ingresar.btn-mobile span {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .nav-mobile.nav-mobile-pro .btn-ingresar.btn-mobile small {
    color: rgba(255,255,255,0.72) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
  }
}


/* v2.37-offer-choose-real-link
   Keep offer anchors styled as buttons and disable unavailable offers cleanly.
*/
@media (max-width: 767px) {
  .product-page .offer-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  .product-page .offer-btn--disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
}