:root {
  --background: #ffffff;
  --soft: #f5f6f7;
  --soft-2: #eef0f2;
  --text: #111214;
  --muted: #73777f;
  --border: #e2e4e7;
  --accent: #08794e;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}

.header-inner {
  max-width: 1400px;
  margin: auto;
  min-height: 74px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  color: var(--text);
  text-decoration: none;
  min-width: max-content;
}

.brand strong {
  display: block;
  font-size: 1.4rem;
  letter-spacing: .03em;
}

.brand small {
  display: block;
  margin-top: 3px;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted);
}

.desktop-search {
  flex: 1;
  display: flex;
  justify-content: center;
}

.desktop-search input,
.mobile-search input {
  width: min(600px, 100%);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 13px 19px;
  background: var(--soft);
  outline: none;
}

.desktop-search input:focus,
.mobile-search input:focus {
  border-color: #999fa5;
  background: white;
}

.desktop-nav {
  display: flex;
  gap: 24px;
}

.desktop-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}

.menu-button,
.mobile-search {
  display: none;
}

.categories-section {
  max-width: 1400px;
  margin: auto;
  padding: 18px 22px 8px;
}

.category-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.category-card {
  height: 185px;
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  text-align: left;
  background: #222;
}

.category-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .35s ease;
}

.category-card:hover .category-bg {
  transform: scale(1.04);
}

.category-football {
  background:
    linear-gradient(140deg,#31493a,#738174);
}

.category-national {
  background:
    linear-gradient(140deg,#47758d,#c8d8df);
}

.category-nfl {
  background:
    linear-gradient(140deg,#392d26,#795845);
}

.category-nba {
  background:
    linear-gradient(140deg,#39241b,#b46f37);
}

.category-f1 {
  background:
    linear-gradient(140deg,#1c1d21,#791c1c);
}

.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.7),
    rgba(0,0,0,.05)
  );
}

.category-content {
  position: absolute;
  left: 18px;
  bottom: 17px;
  color: white;
}

.category-content h2 {
  margin: 0;
  font-size: 1.4rem;
}

.category-content span {
  display: block;
  margin-top: 5px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
}

.content-section {
  max-width: 1400px;
  margin: auto;
  padding: 32px 22px;
}

.section-title-row,
.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 20px;
}

.section-title-row h2,
.catalog-header h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -.035em;
}

.section-title-row p,
.catalog-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

.text-button {
  border: 0;
  background: transparent;
  font-weight: 700;
}

.recent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.product-card {
  min-width: 0;
}

.product-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background:
    linear-gradient(145deg,#f5f5f5,#e7e8e9);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.jersey-placeholder {
  width: 60%;
  aspect-ratio: .85;
  border-radius: 15px 15px 8px 8px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.88);
  font-weight: 800;
  font-size: .8rem;
  text-align: center;
  padding: 10px;
  box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.product-name {
  margin: 12px 0 2px;
  font-size: .95rem;
  font-weight: 750;
}

.product-meta {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.catalog-section {
  padding-top: 30px;
}

.catalog-header select {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  padding: 10px 16px;
}

.filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter {
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--soft);
  border-radius: 999px;
  padding: 9px 16px;
}

.filter.active {
  background: var(--text);
  color: white;
  border-color: var(--text);
}

.catalog-info {
  margin: 18px 0 12px;
  color: var(--muted);
  font-size: .85rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 12px;
}

.empty-state {
  padding: 50px;
  background: var(--soft);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}

.hidden {
  display: none;
}

footer {
  margin-top: 40px;
  padding: 40px 22px;
  background: #111214;
  color: white;
  text-align: center;
}

footer p {
  color: #aaaeb3;
  font-size: .85rem;
}


/* TABLET */

@media (max-width: 950px) {
  .desktop-nav {
    display: none;
  }

  .category-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .recent-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* CELULAR */

@media (max-width: 650px) {

  .header-inner {
    min-height: 66px;
    padding: 0 14px;
  }

  .brand strong {
    font-size: 1.12rem;
  }

  .brand small {
    display: none;
  }

  .desktop-search {
    display: none;
  }

  .menu-button {
    display: block;
    margin-left: auto;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
  }

  .mobile-search {
    display: block;
    padding: 0 14px 12px;
  }

  .categories-section {
    padding: 14px 0 6px;
  }

  .category-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 14px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .category-strip::-webkit-scrollbar {
    display: none;
  }

  .category-card {
    min-width: 72vw;
    height: 150px;
    scroll-snap-align: start;
  }

  .category-content h2 {
    font-size: 1.45rem;
  }

  .content-section {
    padding: 28px 14px;
  }

  .section-title-row h2,
  .catalog-header h2 {
    font-size: 1.65rem;
  }

  .section-title-row p,
  .catalog-header p {
    font-size: .86rem;
  }

  .recent-grid {
    display: flex;
    overflow-x: auto;
    gap: 11px;
    margin: 0 -14px;
    padding: 0 14px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .recent-grid::-webkit-scrollbar {
    display: none;
  }

  .recent-grid .product-card {
    min-width: 70vw;
    scroll-snap-align: start;
  }

  .catalog-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
  }

  .product-photo {
    aspect-ratio: 4 / 5;
  }

  .product-name {
    font-size: .88rem;
  }

  .product-meta {
    font-size: .75rem;
  }
}

/* DETALLE DE PRODUCTO */

.product-card {
  cursor: pointer;
}

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.product-modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.product-detail {
  position: relative;
  z-index: 1;

  width: min(1050px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;

  display: grid;
  grid-template-columns: 1.15fr .85fr;

  background: white;
  border-radius: 22px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.24);
}

.close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;

  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 50%;

  background: rgba(255,255,255,.94);

  font-size: 1.8rem;
  line-height: 1;
}

.detail-media {
  padding: 24px;
  background: #f4f5f6;
}

.main-photo {
  aspect-ratio: 1 / 1.08;
  border-radius: 18px;

  display: grid;
  place-items: center;

  font-size: 1rem;
  font-weight: 800;

  background: #eee;
}

.thumbnail-strip {
  display: flex;
  gap: 10px;

  overflow-x: auto;

  margin-top: 12px;
  padding-bottom: 4px;
}

.thumbnail {
  min-width: 72px;
  height: 72px;

  border: 2px solid transparent;
  border-radius: 10px;

  background: #eee;
}

.thumbnail.active {
  border-color: #111;
}

.detail-info {
  padding: 40px 34px;
}

.detail-eyebrow {
  margin: 0 0 8px;

  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .14em;

  color: var(--muted);
}

.detail-info h1 {
  margin: 0;

  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -.045em;
}

.detail-meta {
  margin-top: 8px;
  color: var(--muted);
}

.detail-block {
  margin-top: 32px;
}

.detail-block h2 {
  margin-bottom: 12px;
  font-size: 1rem;
}

.variant-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-button {
  padding: 10px 14px;

  border: 1px solid var(--border);
  border-radius: 999px;

  background: white;
}

.variant-button.active {
  background: #111;
  color: white;
  border-color: #111;
}

.variant-info {
  margin-top: 20px;

  padding: 16px;
  border-radius: 14px;

  background: var(--soft);

  line-height: 1.6;
}

.availability-note {
  margin-top: 28px;

  padding-top: 20px;
  border-top: 1px solid var(--border);

  color: var(--muted);
}


/* DETALLE MÓVIL */

@media (max-width: 700px) {

  .product-modal {
    padding: 0;
    place-items: stretch;
  }

  .product-detail {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;

    display: block;

    border-radius: 0;
  }

  .detail-media {
    padding: 14px;
  }

  .main-photo {
    aspect-ratio: 1 / 1.06;
  }

  .detail-info {
    padding: 24px 18px 40px;
  }

  .thumbnail {
    min-width: 64px;
    height: 64px;
  }

  .variant-selector {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .variant-button {
    white-space: nowrap;
  }

}

.match-reason {
  margin: 8px 0 0;
  padding: 8px 10px;

  border-radius: 10px;

  background: #f1f6f3;
  color: #365b47;

  font-size: .76rem;
  line-height: 1.35;
  font-weight: 600;
}

/* =========================
   PROMOCIONES
========================= */

.promotion-banner {
  position: relative;

  max-width: 1356px;
  margin: 18px auto 0;

  border-radius: 20px;
  overflow: hidden;

  background:
    linear-gradient(
      120deg,
      #14251d,
      #08794e
    );

  color: white;
}

.promotion-banner.hidden {
  display: none;
}

.promotion-content {
  min-height: 170px;

  padding: 32px 70px 32px 34px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 30px;
}

.promotion-text {
  max-width: 760px;
}

.promotion-label {
  margin: 0 0 8px;

  font-size: .7rem;
  font-weight: 800;

  letter-spacing: .18em;
  text-transform: uppercase;

  opacity: .75;
}

.promotion-banner h2 {
  margin: 0;

  font-size: clamp(
    1.8rem,
    4vw,
    3.2rem
  );

  line-height: 1;

  letter-spacing: -.035em;
}

.promotion-message {
  margin: 12px 0 0;

  max-width: 650px;

  font-size: 1rem;
  line-height: 1.5;

  opacity: .9;
}

.promotion-button {
  flex-shrink: 0;

  border: 0;
  border-radius: 999px;

  padding: 13px 20px;

  background: white;
  color: #111;

  font-weight: 750;
}

.promotion-button.hidden {
  display: none;
}

.promotion-close {
  position: absolute;

  top: 13px;
  right: 13px;

  width: 36px;
  height: 36px;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255,255,255,.14);

  color: white;

  font-size: 1.35rem;
}


/* NAVIDAD */

.promotion-banner.theme-navidad {
  background:
    linear-gradient(
      120deg,
      #173d2a,
      #8e2027
    );
}


/* AMOR Y AMISTAD */

.promotion-banner.theme-amor {
  background:
    linear-gradient(
      120deg,
      #801d43,
      #d34d73
    );
}


/* DÍA DEL PADRE */

.promotion-banner.theme-padre {
  background:
    linear-gradient(
      120deg,
      #17263b,
      #315d84
    );
}


/* MUNDIAL */

.promotion-banner.theme-mundial {
  background:
    linear-gradient(
      120deg,
      #164d38,
      #8b6d21
    );
}


/* CELULAR */

@media (max-width: 650px) {

  .promotion-banner {
    margin: 12px 14px 0;

    border-radius: 16px;
  }

  .promotion-content {
    min-height: auto;

    padding:
      26px
      22px
      24px;

    display: block;
  }

  .promotion-banner h2 {
    padding-right: 24px;

    font-size: 1.85rem;
  }

  .promotion-message {
    font-size: .88rem;
  }

  .promotion-button {
    margin-top: 18px;
  }

}

.product-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.product-photo {
  overflow: hidden;
}

/* =========================
   VISOR AMPLIADO DE FOTOGRAFÍAS
========================= */

.main-photo[role="button"] {
  cursor: zoom-in;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, .94);
  touch-action: pan-y;
}

.photo-lightbox.hidden {
  display: none;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
}

.photo-lightbox-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  height: auto;
  margin: 0;
  padding:
    max(58px, env(safe-area-inset-top))
    max(76px, env(safe-area-inset-right))
    max(62px, env(safe-area-inset-bottom))
    max(76px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.photo-lightbox-stage img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

.photo-lightbox-close,
.photo-lightbox-nav {
  position: absolute;
  z-index: 4;
  border: 0;
  color: white;
  background: rgba(20, 20, 20, .58);
  backdrop-filter: blur(8px);
}

.photo-lightbox-close {
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
}

.photo-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 66px;
  border-radius: 14px;
  font-size: 2.5rem;
  line-height: 1;
}

.photo-lightbox-prev {
  left: 14px;
}

.photo-lightbox-next {
  right: 14px;
}

.photo-lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  min-width: 64px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20, 20, 20, .62);
  color: white;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 700px) {
  .photo-lightbox-stage {
    padding:
      max(58px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(58px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .photo-lightbox-nav {
    width: 44px;
    height: 56px;
    border-radius: 12px;
    background: rgba(20, 20, 20, .48);
  }

  .photo-lightbox-prev {
    left: 6px;
  }

  .photo-lightbox-next {
    right: 6px;
  }
}


/* =========================================================
   MOBILE V2 · elegante + detalles marketplace
========================================================= */

.mobile-brand-subtitle,
.mobile-section-kicker,
.style-section,
.load-more-wrap {
  display: none;
}

.category-icon,
.category-arrow {
  display: none;
}

.load-more-button.hidden {
  display: none;
}

/* Fondos estacionales: imagen sutil + gradiente de seguridad */
.promotion-banner.theme-navidad {
  background:
    linear-gradient(90deg, rgba(4,48,30,.96) 0%, rgba(4,48,30,.84) 48%, rgba(4,48,30,.25) 100%),
    url("./assets/promotions/navidad.webp") center right / cover no-repeat;
}

.promotion-banner.theme-amor {
  background:
    linear-gradient(90deg, rgba(104,8,28,.94) 0%, rgba(128,13,39,.82) 48%, rgba(128,13,39,.20) 100%),
    url("./assets/promotions/amor.webp") center right / cover no-repeat;
}

.promotion-banner.theme-padre {
  background:
    linear-gradient(90deg, rgba(10,35,65,.96) 0%, rgba(18,54,92,.82) 48%, rgba(18,54,92,.20) 100%),
    url("./assets/promotions/padre.webp") center right / cover no-repeat;
}

.promotion-banner.theme-madre {
  background:
    linear-gradient(90deg, rgba(128,49,72,.92) 0%, rgba(179,92,117,.70) 50%, rgba(179,92,117,.12) 100%),
    url("./assets/promotions/madre.webp") center right / cover no-repeat;
}

.promotion-banner.theme-blackfriday,
.promotion-banner.theme-black-friday {
  background:
    linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(25,13,13,.88) 52%, rgba(80,0,0,.24) 100%),
    url("./assets/promotions/blackfriday.webp") center right / cover no-repeat;
}

@media (max-width: 650px) {
  .header-inner {
    min-height: 58px;
    padding: 8px 14px 4px;
    align-items: flex-start;
  }

  .brand strong {
    font-size: 1.08rem;
  }

  .mobile-brand-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.2;
  }

  .menu-button {
    margin-top: 2px;
  }

  .mobile-search {
    padding: 4px 14px 11px;
  }

  .mobile-search input {
    padding: 11px 16px;
    font-size: .92rem;
  }

  .categories-section {
    padding: 12px 0 4px;
  }

  .mobile-section-kicker {
    display: block;
    margin: 0 14px 9px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4f545c;
  }

  .category-strip {
    gap: 10px;
    padding: 0 14px 5px;
    scroll-padding-left: 14px;
  }

  .category-card {
    min-width: 44vw;
    height: 108px;
    border-radius: 17px;
    box-shadow: 0 7px 22px rgba(15,20,25,.08);
  }

  .category-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.04) 72%);
  }

  .category-content {
    inset: 0;
    left: 0;
    bottom: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    align-items: end;
  }

  .category-icon {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    font-size: .9rem;
    font-weight: 900;
  }

  .category-content h2 {
    grid-column: 1 / 3;
    grid-row: 2;
    align-self: end;
    margin-top: 9px;
    font-size: 1.08rem;
    line-height: 1;
  }

  .category-content span:not(.category-icon) {
    grid-column: 1 / 3;
    grid-row: 3;
    margin-top: 5px;
    max-width: 130px;
    font-size: .56rem;
    line-height: 1.2;
    letter-spacing: .07em;
  }

  .category-arrow {
    display: block;
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: end;
    font-size: 1rem;
    opacity: .9;
  }

  .content-section {
    padding: 23px 14px;
  }

  .section-title-row {
    margin-bottom: 13px;
    align-items: end;
  }

  .section-title-row h2,
  .catalog-header h2 {
    font-size: 1.48rem;
  }

  .section-title-row p,
  .catalog-header p {
    font-size: .78rem;
  }

  .text-button {
    white-space: nowrap;
    padding: 4px 0 3px 8px;
    color: #0b84df;
    font-size: .83rem;
  }

  .recent-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .recent-grid .product-card {
    min-width: 0;
  }

  .recent-grid .product-photo,
  .product-grid .product-photo {
    aspect-ratio: 4 / 5;
    border-radius: 13px;
  }

  .product-name {
    margin-top: 7px;
    font-size: .82rem;
    line-height: 1.16;
  }

  .product-meta {
    margin-top: 3px;
    font-size: .68rem;
    line-height: 1.25;
  }

  .style-section {
    display: block;
    padding-top: 18px;
    padding-bottom: 18px;
    background: linear-gradient(180deg, #fff, #f8f9fa);
    border-top: 1px solid #f0f1f2;
    border-bottom: 1px solid #f0f1f2;
  }

  .style-title-row {
    margin-bottom: 12px;
  }

  .style-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px 5px;
    scroll-snap-type: x proximity;
  }

  .style-strip::-webkit-scrollbar { display: none; }

  .style-card {
    min-width: 176px;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid #e6e8ea;
    border-radius: 15px;
    background: #fff;
    display: flex;
    gap: 10px;
    align-items: center;
    text-align: left;
    box-shadow: 0 6px 20px rgba(18,22,26,.045);
    scroll-snap-align: start;
  }

  .style-card.active {
    border-color: #111214;
    box-shadow: inset 0 0 0 1px #111214;
  }

  .style-card-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #111214;
    color: white;
    font-weight: 850;
  }

  .style-card strong,
  .style-card small {
    display: block;
  }

  .style-card strong {
    font-size: .86rem;
  }

  .style-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: .66rem;
    line-height: 1.22;
  }

  .catalog-section {
    padding-top: 24px;
  }

  .catalog-header {
    gap: 10px;
    margin-bottom: 13px;
  }

  .catalog-header select {
    width: auto;
    min-width: 168px;
    padding: 9px 36px 9px 13px;
    font-size: .82rem;
  }

  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px 6px;
  }

  .filter-row::-webkit-scrollbar { display: none; }

  .filter {
    flex: 0 0 auto;
    padding: 9px 15px;
    font-size: .8rem;
  }

  .catalog-info {
    margin: 7px 0 12px;
    font-size: .78rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 10px;
  }

  .load-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 22px;
  }

  .load-more-button {
    min-width: min(260px, 82vw);
    padding: 12px 20px;
    border: 1px solid #dfe2e5;
    border-radius: 999px;
    background: #111214;
    color: white;
    font-weight: 800;
    font-size: .85rem;
    box-shadow: 0 8px 20px rgba(17,18,20,.12);
  }

  .promotion-banner {
    min-height: 112px;
    margin: 10px 14px 2px;
    border-radius: 17px;
    background-position: center right;
  }

  .promotion-content {
    min-height: 112px;
    padding: 16px 54px 16px 16px;
    display: flex;
    align-items: center;
  }

  .promotion-text {
    max-width: 72%;
  }

  .promotion-label {
    margin-bottom: 4px;
    font-size: .56rem;
    letter-spacing: .14em;
  }

  .promotion-banner h2 {
    padding-right: 0;
    font-size: 1.08rem;
    line-height: 1.05;
  }

  .promotion-message {
    margin-top: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.3;
  }

  .promotion-button {
    margin-top: 8px;
    padding: 7px 11px;
    font-size: .67rem;
  }

  .promotion-close {
    top: 9px;
    right: 9px;
    width: 29px;
    height: 29px;
    font-size: 1rem;
  }
}


/* =========================================================
   MOBILE V3 · refinamientos visuales
   - logo móvil
   - etiqueta de promoción con mayor contraste
   - categorías compactas
   - iconografía deportiva visible
========================================================= */

.mobile-brand-logo {
  display: none;
}

.brand-copy {
  display: block;
}

/* Acento de la etiqueta promocional por temporada */
.promotion-banner {
  --promotion-accent: #f2d27a;
}

.promotion-banner.theme-navidad {
  --promotion-accent: #f4d06f;
}

.promotion-banner.theme-amor {
  --promotion-accent: #ffd6df;
}

.promotion-banner.theme-padre {
  --promotion-accent: #f4c95d;
}

.promotion-banner.theme-madre {
  --promotion-accent: #fff0d6;
}

.promotion-banner.theme-blackfriday,
.promotion-banner.theme-black-friday {
  --promotion-accent: #f4c95d;
}

.promotion-label {
  color: var(--promotion-accent);
  opacity: 1;
}

.category-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-icon-car svg {
  width: 22px;
  height: 16px;
}

@media (max-width: 650px) {

  .brand {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .mobile-brand-logo {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand strong {
    line-height: 1;
  }

  /* Categorías más compactas: aproximadamente la mitad
     de la altura original de V1 y con mayor densidad visual. */
  .category-strip {
    gap: 9px;
    padding-bottom: 4px;
  }

  .category-card {
    min-width: 132px;
    height: 68px;
    border-radius: 14px;
  }

  .category-content {
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 28px 1fr 14px;
    grid-template-rows: 1fr;
    gap: 8px;
    align-items: center;
  }

  .category-icon {
    grid-column: 1;
    grid-row: 1;
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 9px;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
  }

  .category-content h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    font-size: .92rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  /* En móvil priorizamos icono + categoría;
     el subtítulo permanece disponible en desktop. */
  .category-content span:not(.category-icon) {
    display: none;
  }

  .category-arrow {
    display: block;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    font-size: .95rem;
  }

  .mobile-section-kicker {
    margin-bottom: 8px;
  }

  .promotion-label {
    font-size: .59rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-shadow: 0 1px 8px rgba(0,0,0,.20);
  }
}


/* =========================================================
   MOBILE V3.1 · Explora alineado con la propuesta visual aprobada
========================================================= */

.explore-mobile-heading,
.explore-all-link {
  display: none;
}

@media (max-width: 650px) {

  .explore-mobile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    margin-bottom: 9px;
  }

  .explore-mobile-heading .mobile-section-kicker {
    margin: 0;
  }

  .explore-all-link {
    display: inline-flex;
    color: #0b84df;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .category-strip {
    gap: 9px;
    padding: 0 14px 7px;
    scroll-padding-left: 14px;
  }

  /* Tamaño objetivo: compacto, pero no miniatura.
     Permite ver aprox. 2.5–3 categorías en un teléfono normal. */
  .category-card {
    min-width: 148px;
    width: 148px;
    height: 82px;
    border-radius: 15px;
    box-shadow: 0 7px 18px rgba(15,20,25,.10);
  }

  /* Colores más cercanos al mockup aprobado */
  .category-football {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,.14), transparent 34%),
      linear-gradient(135deg,#2e6048 0%,#214434 100%);
  }

  .category-national {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,.18), transparent 34%),
      linear-gradient(135deg,#4b99bd 0%,#28708f 100%);
  }

  .category-nfl {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,.12), transparent 34%),
      linear-gradient(135deg,#563b2c 0%,#2d211c 100%);
  }

  .category-nba {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,.12), transparent 34%),
      linear-gradient(135deg,#b56720 0%,#6a3716 100%);
  }

  .category-f1 {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,.10), transparent 34%),
      linear-gradient(135deg,#a3262d 0%,#651317 100%);
  }

  .category-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
  }

  .category-content {
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 34px 1fr 14px;
    grid-template-rows: 1fr;
    gap: 9px;
    align-items: center;
  }

  .category-icon {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 11px;
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  }

  .category-icon svg {
    stroke-width: 1.8;
  }

  .category-icon-car svg {
    width: 25px;
    height: 17px;
  }

  .category-content h2 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.015em;
  }

  .category-arrow {
    font-size: 1.1rem;
    font-weight: 700;
  }
}


/* =========================================================
   MOBILE V3.2 · Categorías compactas visibles completas
========================================================= */
@media (max-width: 650px) {
  .explore-mobile-heading {
    padding: 0 10px;
    margin-bottom: 8px;
  }

  .explore-all-link {
    font-size: .72rem;
  }

  .category-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 6px;
    overflow: visible;
  }

  .category-card {
    min-width: 0;
    width: auto;
    height: 38px;
    border-radius: 9px;
    box-shadow: 0 5px 12px rgba(16, 22, 32, .10);
  }

  .category-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.16));
  }

  .category-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 7px 7px;
  }

  .category-icon {
    width: 15px;
    height: 15px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    flex: 0 0 15px;
  }

  .category-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2.1;
  }

  .category-icon-car {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .category-icon-car svg {
    width: 17px;
    height: 11px;
  }

  .category-content h2 {
    margin: 0;
    font-size: .56rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.015em;
    white-space: nowrap;
  }

  .category-content span:not(.category-icon) {
    display: none;
  }

  .category-arrow {
    display: none;
  }
}


/* =========================================================
   MOBILE V3.3 · ajuste fino de altura e iconografía
========================================================= */
@media (max-width: 650px) {
  .category-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 8px;
  }

  .category-card {
    height: 50px;
    border-radius: 11px;
  }

  .category-content {
    gap: 5px;
    padding: 8px 7px;
  }

  .category-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: #fff;
  }

  .category-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
  }

  .category-icon-car {
    width: 22px;
    height: 21px;
    flex-basis: 22px;
  }

  .category-icon-car svg {
    width: 22px;
    height: 14px;
  }

  .category-content h2 {
    font-size: .64rem;
    line-height: 1;
  }
}

/* En teléfonos muy angostos mantenemos las 5 categorías visibles
   sin que 'Selecciones' rompa la fila. */
@media (max-width: 390px) {
  .category-strip {
    gap: 4px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .category-card {
    height: 48px;
  }

  .category-content {
    gap: 3px;
    padding: 7px 5px;
  }

  .category-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .category-icon svg {
    width: 18px;
    height: 18px;
  }

  .category-icon-car,
  .category-icon-car svg {
    width: 19px;
  }

  .category-content h2 {
    font-size: .53rem;
  }
}


/* =========================================================
   MOBILE V3.5 · siluetas fijas + 5 categorías visibles
========================================================= */
@media (max-width: 650px) {
  .category-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
    overflow: visible;
  }

  .category-card {
    min-width: 0;
    width: auto;
    height: 56px;
    border-radius: 12px;
  }

  .category-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 5px;
    padding: 8px 6px;
  }

  .category-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .category-icon img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    object-position: center;
  }

  .category-content h2 {
    min-width: 0;
    margin: 0;
    font-size: .63rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.025em;
    white-space: nowrap;
    overflow: visible;
  }

  .category-card[data-category="selecciones"] .category-content h2 {
    font-size: .52rem;
    letter-spacing: -.04em;
  }

  .category-content span:not(.category-icon) {
    display: none;
  }

  .category-arrow {
    display: none;
  }
}

@media (max-width: 390px) {
  .category-strip {
    gap: 4px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .category-card {
    height: 54px;
  }

  .category-content {
    gap: 3px;
    padding: 7px 4px;
  }

  .category-icon,
  .category-icon img {
    width: 19px;
    height: 19px;
    min-width: 19px;
  }

  .category-icon {
    flex-basis: 19px;
  }

  .category-content h2 {
    font-size: .55rem;
  }

  .category-card[data-category="selecciones"] .category-content h2 {
    font-size: .46rem;
  }
}


/* =========================================================
   MOBILE V3.6 · categorías solo texto
========================================================= */
@media (max-width: 650px) {
  .category-strip {
    display: grid;
    grid-template-columns: 1.15fr 1.55fr .85fr .85fr .7fr;
    gap: 6px;
    padding: 0 10px 9px;
    overflow: visible;
  }

  .category-card {
    min-width: 0;
    width: auto;
    height: 42px;
    border-radius: 10px;
  }

  .category-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
  }

  .category-icon,
  .category-arrow,
  .category-content span:not(.category-icon) {
    display: none !important;
  }

  .category-content h2 {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: .66rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: visible;
  }

  .category-card[data-category="selecciones"] .category-content h2 {
    font-size: .58rem;
    letter-spacing: -.025em;
  }
}

@media (max-width: 390px) {
  .category-strip {
    grid-template-columns: 1.1fr 1.5fr .8fr .8fr .7fr;
    gap: 4px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .category-card {
    height: 40px;
  }

  .category-content {
    padding: 0 4px;
  }

  .category-content h2 {
    font-size: .58rem;
  }

  .category-card[data-category="selecciones"] .category-content h2 {
    font-size: .51rem;
  }
}


/* =========================================================
   MOBILE V3.7 · categorías uniformes con título + subtítulo
========================================================= */
@media (max-width: 650px) {
  .category-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
    overflow: visible;
  }

  .category-card {
    min-width: 0;
    width: auto;
    height: 64px;
    border-radius: 11px;
  }

  .category-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 8px 8px;
    text-align: left;
  }

  .category-icon,
  .category-arrow {
    display: none !important;
  }

  .category-content h2 {
    margin: 0;
    width: 100%;
    font-size: .67rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .category-content .category-subtitle {
    display: block !important;
    margin: 0;
    width: 100%;
    color: rgba(255,255,255,.82);
    font-size: .42rem;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: normal;
    overflow: hidden;
    max-height: 2.25em;
  }
}

@media (max-width: 390px) {
  .category-strip {
    gap: 4px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .category-card {
    height: 62px;
  }

  .category-content {
    padding: 7px 5px;
    gap: 2px;
  }

  .category-content h2 {
    font-size: .60rem;
  }

  .category-content .category-subtitle {
    font-size: .36rem;
  }
}


/* =========================================================
   MOBILE V3.8 · menú hamburguesa funcional
========================================================= */

.mobile-menu {
  display: none;
}

@media (max-width: 650px) {
  .menu-button {
    position: relative;
    z-index: 82;
    color: #0b84df;
    cursor: pointer;
  }

  .mobile-menu {
    margin: 0 14px 12px;
    padding: 7px;
    border: 1px solid #e6e8eb;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 14px 35px rgba(17,18,20,.12);
  }

  .mobile-menu:not(.hidden) {
    display: grid;
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border-radius: 11px;
    color: #111214;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 750;
  }

  .mobile-menu a + a {
    border-top: 1px solid #f0f1f2;
  }

  .mobile-menu a:active {
    background: #f4f6f7;
  }

  #explora,
  #recientes,
  #estilos,
  #catalogo {
    scroll-margin-top: 12px;
  }
}


/* =========================================================
   MOBILE V3.9 · evitar salto automático durante la carga
========================================================= */
@media (max-width: 650px) {
  html,
  body,
  .site-header,
  .promotion-banner,
  .categories-section,
  .content-section {
    overflow-anchor: none;
  }
}


/* =========================================================
   MOBILE V4.0 · flujo validado + carrusel + scroll infinito
========================================================= */

.catalog-sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

@media (max-width: 650px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Explora: una sola acción, sin CTA duplicado */
  .explore-mobile-heading {
    display: block;
  }

  .explore-all-link {
    display: none !important;
  }

  /* Lo más reciente: carrusel horizontal de una sola fila */
  #recientes .recent-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px;
    overflow-x: auto !important;
    overflow-y: hidden;
    margin: 0 -14px;
    padding: 0 14px 9px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #recientes .recent-grid::-webkit-scrollbar {
    display: none;
  }

  #recientes .recent-grid .product-card {
    flex: 0 0 46vw;
    width: 46vw;
    min-width: 46vw;
    scroll-snap-align: start;
  }

  #recientes .recent-grid .product-photo {
    aspect-ratio: 4 / 5;
  }

  /* Modal público: nunca exceder el viewport tras una búsqueda */
  .product-modal {
    width: 100dvw;
    max-width: 100dvw;
    overflow: hidden;
    contain: layout paint;
  }

  .product-detail {
    width: 100dvw !important;
    max-width: 100dvw !important;
    min-width: 0;
    overflow-x: hidden !important;
    overflow-y: auto;
    overscroll-behavior-x: none;
  }

  .detail-media,
  .detail-info,
  .main-photo,
  .thumbnail-strip,
  .variant-selector,
  .variant-info {
    min-width: 0;
    max-width: 100%;
  }

  .detail-media,
  .detail-info {
    width: 100%;
  }

  .thumbnail-strip,
  .variant-selector {
    overscroll-behavior-x: contain;
  }

  .close-button {
    right: max(12px, env(safe-area-inset-right));
  }

  .photo-lightbox {
    width: 100dvw;
    max-width: 100dvw;
    overflow: hidden;
  }

  .photo-lightbox-prev {
    left: max(6px, env(safe-area-inset-left));
  }

  .photo-lightbox-next {
    right: max(6px, env(safe-area-inset-right));
  }

  /* Colecciones queda claramente separada de Explora */
  #estilos {
    margin-top: 2px;
  }

  /* El catálogo ya no requiere botón manual */
  .load-more-wrap,
  .load-more-button {
    display: none !important;
  }
}


/* =========================================================
   MOBILE V4.1 · búsqueda estable + modal contenido
========================================================= */

@media (max-width: 650px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    overscroll-behavior-x: none;
  }

  .header,
  .header-inner,
  main,
  footer,
  .content-section,
  .categories-section,
  .catalog-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Al buscar, la página se convierte en una vista de resultados limpia.
     No hay saltos automáticos ni se obliga al usuario a recorrer la portada. */
  body.search-active #promotionBanner,
  body.search-active #explora,
  body.search-active #recientes,
  body.search-active #estilos {
    display: none !important;
  }

  body.search-active #catalogo {
    padding-top: 18px;
  }

  body.search-active .catalog-header {
    margin-top: 0;
  }

  /* Los carruseles pueden desplazarse, pero nunca arrastran el viewport. */
  .category-strip,
  .style-strip,
  .filter-row,
  .thumbnail-strip,
  .variant-selector,
  #recientes .recent-grid {
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  /* Modal de ficha: usar el ancho real del contenedor, no 100dvw. */
  .product-modal {
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    contain: none !important;
  }

  .product-detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100svh;
    max-height: 100svh;
    border-radius: 0;
    overflow-x: clip !important;
    overflow-y: auto !important;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }

  .detail-media {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .main-photo {
    width: 100%;
    max-width: 100%;
    height: min(54svh, 520px);
    aspect-ratio: auto !important;
    border-radius: 16px;
  }

  .thumbnail-strip {
    width: 100%;
    box-sizing: border-box;
    padding-right: 6px;
  }

  .detail-info {
    width: 100%;
    max-width: 100%;
    padding: 22px 18px 42px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .detail-info h1 {
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 1.02;
  }

  .product-modal .close-button {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 120;
  }
}


/* =========================================================
   MOBILE V4.2 · normalización responsive definitiva
   Un solo modelo de ancho para evitar desplazamiento lateral.
========================================================= */
@media (max-width: 650px) {
  :root {
    --mobile-page-pad: 14px;
  }

  * {
    box-sizing: border-box;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    position: relative;
  }

  body > * {
    max-width: 100%;
  }

  .site-header,
  .header,
  .header-inner,
  .mobile-search,
  main,
  .promotion-banner,
  .categories-section,
  .content-section,
  .catalog-section,
  footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Ningún bloque horizontal debe ensanchar el documento.
     El scroll queda encapsulado dentro del propio carrusel. */
  .category-strip,
  .style-strip,
  .filter-row,
  .thumbnail-strip,
  .variant-selector,
  #recientes .recent-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .category-strip,
  .filter-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* La portada puede usar padding interno sin generar ancho extra. */
  .content-section,
  .catalog-section {
    padding-left: var(--mobile-page-pad);
    padding-right: var(--mobile-page-pad);
  }

  /* Búsqueda: vista dedicada, limpia y estable */
  body.search-active #promotionBanner,
  body.search-active #explora,
  body.search-active #recientes,
  body.search-active #estilos {
    display: none !important;
  }

  body.search-active #catalogo {
    padding-top: 18px;
  }

  body.search-active .catalog-header {
    margin-top: 0;
  }

  body.search-active .product-grid {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Ficha móvil completamente contenida en viewport */
  .product-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff;
  }

  .product-modal.hidden {
    display: none !important;
  }

  .product-modal .modal-backdrop {
    display: none !important;
  }

  .product-detail {
    display: block !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #fff;
  }

  .detail-media,
  .detail-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .detail-media {
    padding: 12px 12px 8px !important;
  }

  .main-photo {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: min(50svh, 440px) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    background: #f4f4f4;
  }

  .thumbnail-strip {
    gap: 8px;
    margin: 8px 0 0 !important;
    padding: 0 0 6px !important;
  }

  .thumbnail {
    flex: 0 0 62px;
    min-width: 62px !important;
    width: 62px;
    height: 62px;
  }

  .detail-info {
    padding: 18px 18px 40px !important;
    overflow-wrap: anywhere;
  }

  .detail-info h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(2rem, 9.2vw, 2.65rem) !important;
    line-height: 1.02;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }

  .detail-meta {
    max-width: 100%;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .variant-selector {
    width: 100%;
    padding-bottom: 6px;
  }

  .variant-button {
    flex: 0 0 auto;
    max-width: calc(100vw - 48px);
    white-space: nowrap;
  }

  .variant-info {
    width: 100%;
    max-width: 100%;
  }

  .product-modal .close-button {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 1010 !important;
  }

  /* Resultados: tarjetas siempre dentro de dos columnas */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .product-card {
    min-width: 0;
    max-width: 100%;
  }

  .product-photo {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

/* =========================================================
   ADMIN V4.2 · teclado móvil + alta asistida estable
========================================================= */
@media (max-width: 760px) {
  #productFormModal .modal-panel,
  #variantFormModal .modal-panel {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }

  #productFormModal .form-actions,
  #variantFormModal .form-actions {
    position: sticky !important;
    bottom: 0 !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-bottom: 0 !important;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.98);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0,0,0,.06);
  }

  #teamAssistPanel {
    scroll-margin-top: calc(78px + env(safe-area-inset-top, 0px));
  }
}


/* =========================================================
   MOBILE V4.3 · Safari iPhone: evitar zoom al enfocar inputs
========================================================= */
@media (max-width: 650px) {
  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  .mobile-search input,
  #mobileSearch,
  #desktopSearch {
    font-size: 16px !important;
    line-height: 1.35;
  }

  /* Safari puede conservar un zoom visual aunque el layout mida 100%.
     Con inputs >=16px evitamos que ese zoom se dispare. */
  html,
  body {
    min-width: 100%;
    touch-action: pan-y pinch-zoom;
  }

  .promotion-banner {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    box-sizing: border-box;
  }
}


/* =========================================================
   PUBLIC V4.4 · novedades por variante
========================================================= */
.recent-variant-name {
  margin: 3px 0 0;
  color: #111;
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 750;
}

@media (max-width: 650px) {
  .recent-variant-name {
    font-size: .69rem;
  }
}


/* =========================================================
   DESKTOP V5.0 · misma identidad visual que móvil
   Solo aplica en escritorio amplio para no alterar lo ya validado.
========================================================= */
@media (min-width: 951px) {

  .header-inner {
    min-height: 78px;
    max-width: 1400px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-brand-logo {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand strong {
    font-size: 1.18rem;
  }

  .brand small {
    margin-top: 2px;
    font-size: .56rem;
  }

  .mobile-brand-subtitle {
    display: none;
  }

  .promotion-banner {
    max-width: 1356px;
    margin-top: 20px;
  }

  .promotion-content {
    min-height: 190px;
    padding: 30px 80px 30px 34px;
  }

  .promotion-banner h2 {
    max-width: 760px;
    font-size: clamp(2rem, 3.4vw, 3.35rem);
  }

  .categories-section {
    padding-top: 22px;
    padding-bottom: 12px;
  }

  .explore-mobile-heading {
    display: block;
    padding: 0;
    margin: 0 0 10px;
  }

  .explore-mobile-heading .mobile-section-kicker {
    display: block;
    margin: 0;
    color: #4f545c;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .category-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .category-card {
    height: 118px;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15,20,25,.06);
  }

  .category-content {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }

  .category-content h2 {
    font-size: 1.15rem;
    line-height: 1;
  }

  .category-content .category-subtitle {
    display: block;
    margin-top: 6px;
    max-width: 100%;
    font-size: .58rem;
    line-height: 1.15;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .82;
  }

  .content-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .section-title-row,
  .catalog-header {
    margin-bottom: 16px;
  }

  .section-title-row h2,
  .catalog-header h2 {
    font-size: 1.8rem;
  }

  .section-title-row p,
  .catalog-header p {
    font-size: .9rem;
  }

  #recientes .recent-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 16px;
  }

  #recientes .product-photo {
    aspect-ratio: 4 / 5;
  }

  .recent-grid .product-name {
    margin-top: 9px;
  }

  /* Colecciones ahora también se muestran en escritorio */
  .style-section {
    display: block;
    padding-top: 26px;
    padding-bottom: 26px;
    background: linear-gradient(180deg, #fff, #f8f9fa);
    border-top: 1px solid #f0f1f2;
    border-bottom: 1px solid #f0f1f2;
  }

  .style-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .style-card {
    min-width: 0;
    min-height: 78px;
    padding: 13px 15px;
    border: 1px solid #e6e8ea;
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(18,22,26,.045);
  }

  .style-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(18,22,26,.07);
  }

  .style-card-icon {
    flex: 0 0 auto;
  }

  .style-card strong {
    display: block;
    font-size: .95rem;
  }

  .style-card small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .72rem;
  }

  .catalog-section {
    padding-top: 30px;
  }

  .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px 14px;
  }

  .product-name {
    margin-top: 9px;
    font-size: .94rem;
  }

  .product-meta {
    font-size: .79rem;
  }

  .product-detail {
    width: min(1120px, calc(100% - 48px));
    max-height: calc(100vh - 48px);
  }

  .detail-media {
    padding: 22px;
  }

  .main-photo {
    max-height: 68vh;
  }

  .detail-info {
    padding: 38px 34px;
  }
}


/* =========================================================
   V5.1 · Paleta unificada marca + colecciones más visibles
========================================================= */

.category-card {
  border: 1px solid rgba(8, 14, 24, 0.10);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

.category-card:hover {
  transform: translateY(-1px);
}

.category-football {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.12), transparent 30%),
    linear-gradient(135deg, #134f42 0%, #1f7d67 100%) !important;
}

.category-national {
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.13), transparent 32%),
    linear-gradient(135deg, #2b6f8f 0%, #6bb6d7 100%) !important;
}

.category-nfl {
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(135deg, #2e251f 0%, #6e4a37 100%) !important;
}

.category-nba {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(135deg, #8a4b12 0%, #d18426 100%) !important;
}

.category-f1 {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.11), transparent 30%),
    linear-gradient(135deg, #87142c 0%, #c02b46 100%) !important;
}

.category-overlay {
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.22)) !important;
}

.style-card {
  position: relative;
  border: 2px solid #d7dce2;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.style-card:hover,
.style-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(16, 24, 40, 0.10);
}

.style-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 16px 0 0 16px;
  background: #111827;
  opacity: .95;
}

.style-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #0b1118;
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.style-card strong {
  font-size: 1rem;
  letter-spacing: -.01em;
}

.style-card small {
  color: #667085;
  font-size: .78rem;
}

.style-card[data-style="retro"] {
  border-color: #274c92;
}
.style-card[data-style="retro"]::before,
.style-card[data-style="retro"] .style-card-icon {
  background: linear-gradient(180deg, #0f2f6c 0%, #295bb0 100%);
}
.style-card[data-style="retro"] strong {
  color: #1d4aa2;
}

.style-card[data-style="especial"] {
  border-color: #7d3fd8;
}
.style-card[data-style="especial"]::before,
.style-card[data-style="especial"] .style-card-icon {
  background: linear-gradient(180deg, #5927aa 0%, #8b4ff0 100%);
}
.style-card[data-style="especial"] strong {
  color: #4e2aa6;
}

.style-card[data-style="entrenamiento"] {
  border-color: #0f7a6b;
}
.style-card[data-style="entrenamiento"]::before,
.style-card[data-style="entrenamiento"] .style-card-icon {
  background: linear-gradient(180deg, #0d675b 0%, #119c87 100%);
}
.style-card[data-style="entrenamiento"] strong {
  color: #0d7769;
}

.style-card[data-style="portero"] {
  border-color: #a06412;
}
.style-card[data-style="portero"]::before,
.style-card[data-style="portero"] .style-card-icon {
  background: linear-gradient(180deg, #87510c 0%, #bf7a16 100%);
}
.style-card[data-style="portero"] strong {
  color: #8f5a10;
}

.detail-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 6px 10px;
  border: 1px solid #e6e8eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #4b5563;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.detail-brand-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.promotion-banner.theme-custom-image {
  background-size: cover !important;
  background-position: center !important;
}

.promotion-banner.theme-custom-image .promotion-content {
  background: linear-gradient(90deg, rgba(8, 19, 34, .62), rgba(8, 19, 34, .20));
}

@media (max-width: 950px) {
  .style-card {
    min-width: 220px;
  }

  .style-card::before {
    width: 5px;
  }

  .detail-brand {
    margin-bottom: 12px;
    font-size: .72rem;
  }
}

@media (min-width: 951px) {
  .category-card {
    border-radius: 20px;
  }

  .style-strip {
    gap: 14px;
  }

  .style-card {
    min-height: 88px;
  }
}

/* =========================================================
   V5.2 · banner con aire + Explora homologado con Colecciones
========================================================= */
@media (min-width: 951px) {
  .promotion-banner {
    width: calc(100% - 44px) !important;
    max-width: 1356px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.category-card {
  background: #fff !important;
  border: 2px solid #d8dde3 !important;
  box-shadow: 0 8px 18px rgba(16,24,40,.05) !important;
}
.category-bg,
.category-overlay {
  display: none !important;
}
.category-content,
.category-content h2 {
  color: #111827 !important;
}
.category-content span:not(.category-icon) {
  color: #667085 !important;
  opacity: 1 !important;
}
.category-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #111827;
}
.category-card[data-category="futbol"] {
  border-color: #24725e !important;
}
.category-card[data-category="futbol"]::before {
  background: #24725e;
}
.category-card[data-category="selecciones"] {
  border-color: #3f8dad !important;
}
.category-card[data-category="selecciones"]::before {
  background: #3f8dad;
}
.category-card[data-category="nfl"] {
  border-color: #6a4a38 !important;
}
.category-card[data-category="nfl"]::before {
  background: #6a4a38;
}
.category-card[data-category="nba"] {
  border-color: #ad691d !important;
}
.category-card[data-category="nba"]::before {
  background: #ad691d;
}
.category-card[data-category="f1"] {
  border-color: #a61f39 !important;
}
.category-card[data-category="f1"]::before {
  background: #a61f39;
}
.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(16,24,40,.10) !important;
}
@media (max-width: 650px) {
  .category-card {
    background: #fff !important;
    border-width: 2px !important;
  }
  .category-content h2 {
    color: #111827 !important;
  }
  .category-card::before {
    width: 5px;
  }
}


/* =========================================================
   V5.3 · Explora premium
   Recupera contraste sin volver al aspecto saturado.
   Misma paleta en escritorio y móvil.
========================================================= */

.category-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 10px 24px rgba(17,24,39,.09),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.category-card::before {
  display: none !important;
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255,255,255,.13),
      transparent 34%
    );
}

.category-football {
  background:
    linear-gradient(
      135deg,
      #163d35 0%,
      #245d4e 100%
    ) !important;
}

.category-national {
  background:
    linear-gradient(
      135deg,
      #315466 0%,
      #557f91 100%
    ) !important;
}

.category-nfl {
  background:
    linear-gradient(
      135deg,
      #342922 0%,
      #5a4033 100%
    ) !important;
}

.category-nba {
  background:
    linear-gradient(
      135deg,
      #69411f 0%,
      #9a612b 100%
    ) !important;
}

.category-f1 {
  background:
    linear-gradient(
      135deg,
      #4f171e 0%,
      #7d2630 100%
    ) !important;
}

.category-content,
.category-content h2 {
  color: #fff !important;
}

.category-content .category-subtitle,
.category-content span:not(.category-icon) {
  color: rgba(255,255,255,.78) !important;
  opacity: 1 !important;
}

.category-card:hover,
.category-card:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(17,24,39,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

@media (max-width: 650px) {
  .category-card {
    border-width: 1px !important;
    box-shadow:
      0 8px 18px rgba(17,24,39,.10),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .category-content h2 {
    color: #fff !important;
  }
}


/* =========================================================
   V5.3.1 · FIX Explora
   Los colores ahora se aplican al botón real [data-category].
========================================================= */

.category-card[data-category="futbol"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(135deg, #163d35 0%, #245d4e 100%) !important;
}

.category-card[data-category="selecciones"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(135deg, #315466 0%, #557f91 100%) !important;
}

.category-card[data-category="nfl"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.11), transparent 34%),
    linear-gradient(135deg, #342922 0%, #5a4033 100%) !important;
}

.category-card[data-category="nba"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.11), transparent 34%),
    linear-gradient(135deg, #69411f 0%, #9a612b 100%) !important;
}

.category-card[data-category="f1"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.11), transparent 34%),
    linear-gradient(135deg, #4f171e 0%, #7d2630 100%) !important;
}

/* El texto siempre queda sobre el fondo. */
.category-card .category-content {
  position: absolute;
  z-index: 2;
  color: #fff !important;
}

.category-card .category-content h2,
.category-card .category-content .category-subtitle {
  color: #fff !important;
}

.category-card .category-content .category-subtitle {
  opacity: .78 !important;
}

.category-card::after {
  z-index: 1;
}

/* Las antiguas capas visuales siguen ocultas: el color ya vive en el botón. */
.category-card .category-bg,
.category-card .category-overlay {
  display: none !important;
}


/* =========================================================
   V5.4 · Ajustes finos finales de Colecciones
========================================================= */

/* Escritorio: más aire alrededor del bloque para separarlo de Recientes y Catálogo */
@media (min-width: 951px) {
  .style-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .style-section .section-title-row {
    margin-bottom: 18px;
  }
}

/* Móvil: tarjetas de Colecciones un poco más compactas */
@media (max-width: 650px) {
  .style-section {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .style-strip {
    gap: 10px;
  }

  .style-card {
    min-width: 196px !important;
    min-height: 68px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  .style-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: .9rem !important;
  }

  .style-card strong {
    font-size: .92rem !important;
    line-height: 1.05 !important;
  }

  .style-card small {
    margin-top: 3px !important;
    font-size: .70rem !important;
    line-height: 1.15 !important;
  }
}


/* =========================================================
   V5.4.1 · Móvil: asomar el 3er botón de Colecciones
========================================================= */
@media (max-width: 650px) {
  .style-strip {
    gap: 10px !important;
    padding-right: 18px !important;
  }

  .style-card {
    flex: 0 0 44% !important;
    min-width: 44% !important;
    max-width: 44% !important;
  }
}