:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #1f2937;
  --text-muted: #687386;
  --blue: #2f80ff;
  --blue-dark: #1466e5;
  --orange: #fb7701;
  --pink: #f25f73;
  --green: #16c34a;
  --border: #d8e6ff;
  --soft-blue: #eef5ff;
  --shadow: 0 12px 28px rgba(37, 99, 235, .10);
  --shell: 1460px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

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

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

.shell {
  width: min(calc(100% - 3rem), var(--shell));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: .5rem;
  transform: translateY(-200%);
  z-index: 100;
  background: #111827;
  color: white;
  padding: .75rem 1rem;
  border-radius: .6rem;
}

.skip-link:focus {
  transform: none;
}

.muted {
  color: var(--text-muted);
}

/* =========================================================
   CABECERA
   ========================================================= */

.site-header {
  background: #fff;
  border-bottom: 1px solid #e7eef9;
  position: static;
  box-shadow: 0 5px 18px rgba(30, 64, 175, .05);
}

.header-top {
  display: grid;
  grid-template-columns:
    minmax(330px, 1fr)
    minmax(290px, auto)
    minmax(420px, 1fr);
  align-items: center;
  gap: 1.6rem;
  padding-block: .75rem .55rem;
}

/* =========================================================
   MARCA
   ========================================================= */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  text-decoration: none;
}

.brand-bear {
  width: 112px;
  height: 112px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-copy {
  display: grid;
  line-height: .92;
}

.brand-title {
  display: grid;
  font-weight: 1000;
  letter-spacing: -.06em;
  font-size: clamp(2rem, 3.3vw, 3.15rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .04);
}

.brand-blue {
  color: #237cf3;
}

.brand-orange {
  color: var(--orange);
}

.brand-tagline {
  margin-top: .38rem;
  color: #777;
  font-weight: 650;
  font-size: .95rem;
  line-height: 1.2;
}

/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-link {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 76px;
  padding: .65rem 1.25rem;
  border: 1px solid #d5d9df;
  border-radius: 26px;
  background: #f5f5f5;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
}

.whatsapp-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.whatsapp-link small {
  display: block;
  color: #555;
  font-size: .96rem;
}

.whatsapp-link strong {
  display: block;
  color: #161616;
  font-size: 1.35rem;
  line-height: 1.15;
}

/* =========================================================
   ENVÍOS
   ========================================================= */

.shipping-header {
  justify-self: end;
  display: grid;
  gap: .55rem;
  justify-items: center;
}

.shipping-header > strong {
  font-size: 1.18rem;
  color: #161616;
}

.shipping-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.shipping-logo {
  width: 180px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.shipping-logo img {
  width: 150px;
  height: 45px;
  object-fit: fill;
  display: block;
}


/* =========================================================
   BUSCADOR + FILTROS
   ========================================================= */

.header-tools {
  display: grid;
  grid-template-columns:
    minmax(380px, 1fr)
    285px
    305px;
  gap: 1rem;
  align-items: end;
  padding-block: .5rem 1rem;
}

.search-control {
  position: relative;
  display: flex;
  align-items: center;
}

.search-control input {
  width: 100%;
  min-height: 70px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  outline: none;

  background: #fff;
  color: var(--text);

  padding: .85rem 5.3rem .85rem 1.35rem;
  font-size: 1.05rem;

  box-shadow:
    inset 0 0 0 1px rgba(47, 128, 255, .04);
}

.search-control input:focus,
.select-control select:focus {
  box-shadow:
    0 0 0 4px rgba(47, 128, 255, .13);
}

.search-button {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);

  width: 57px;
  height: 57px;

  border: 1px solid #dbe6f7;
  border-radius: 16px;

  background: #fff;

  display: grid;
  place-items: center;

  padding: 0;
}

.search-button:hover {
  background: #f7fbff;
}

/* lupa hecha con CSS */
.search-icon {
  position: relative;

  width: 21px;
  height: 21px;

  border: 3px solid #1e2b39;
  border-radius: 50%;

  display: block;
}

.search-icon::after {
  content: "";

  position: absolute;

  width: 10px;
  height: 3px;

  right: -8px;
  bottom: -5px;

  border-radius: 999px;

  background: #1e2b39;

  transform: rotate(45deg);
  transform-origin: left center;
}

/* =========================================================
   SELECTS
   ========================================================= */

.select-control {
  display: grid;
  gap: .32rem;
}

.control-label {
  font-size: .83rem;
  font-weight: 800;
  color: #555;
  padding-left: .1rem;
}

.select-control select {
  width: 100%;
  min-height: 70px;

  border: 2px solid var(--blue);
  border-radius: 999px;

  background-color: #fff;
  color: #181818;

  padding: .75rem 3rem .75rem 1.25rem;

  outline: none;
  appearance: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #111 50%
    ),
    linear-gradient(
      135deg,
      #111 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 17px) 50%;

  background-size:
    7px 7px,
    7px 7px;

  background-repeat: no-repeat;

  font-size: 1rem;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.page-main {
  padding-block: 2.3rem 3rem;
}

.catalog-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 1rem;
}

.catalog-heading h1 {
  margin: 0;

  color: #111827;

  font-size: clamp(1.85rem, 3vw, 2.5rem);
  line-height: 1;

  letter-spacing: -.035em;
}

.catalog-heading p {
  margin: 0;
  font-size: .95rem;
}

/* =========================================================
   CATEGORÍAS Y SUBCATEGORÍAS
   ========================================================= */

.taxonomy-filters {
  display: grid;
  gap: .7rem;
  margin-bottom: 1.35rem;
}

.taxonomy-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem .8rem;
}

.taxonomy-filter-row[hidden] {
  display: none;
}

.taxonomy-label {
  min-width: 96px;
  color: #374151;
  font-size: .95rem;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip {
  min-height: 38px;
  padding: .5rem .9rem;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  background: #fff;
  color: var(--blue-dark);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.chip:hover {
  transform: translateY(-1px);
  background: var(--soft-blue);
}

.chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.chip:focus-visible {
  outline: 3px solid rgba(47, 128, 255, .22);
  outline-offset: 2px;
}

/* =========================================================
   GRID PRODUCTOS
   ========================================================= */

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

  gap: 1.55rem;
}

/* =========================================================
   CARD PRODUCTO
   ========================================================= */

.product-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border: 2px solid var(--blue);
  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 8px 20px rgba(47, 128, 255, .08);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.product-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 16px 28px rgba(47, 128, 255, .15);
}

.product-card-media {
  aspect-ratio: 1 / 1;

  background: #fff;

  display: grid;
  place-items: center;

  padding: .8rem .8rem 0;

  overflow: hidden;
}

.product-card-media img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    transform .22s ease;
}

.product-card:hover .product-card-media img {
  transform: scale(1.02);
}

.product-card-body {
  padding: .85rem 1rem 1rem;

  display: flex;
  flex-direction: column;

  flex: 1;
}

.product-card-title-link {
  text-decoration: none;
}

.product-card h2 {
  margin: 0;

  color: var(--orange);

  font-size: 1.3rem;

  line-height: 1.15;

  letter-spacing: -.02em;
}

.product-code {
  margin: .45rem 0 .25rem;

  color: var(--text-muted);

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

  letter-spacing: .03em;
}

.product-description {
  margin: .15rem 0 .9rem;

  color: #606b7c;

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

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;

  min-height: 2.75em;
}

/* =========================================================
   PRECIO + WHATSAPP CARD
   ========================================================= */

.card-bottom {
  margin-top: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    58px;

  gap: .8rem;

  align-items: center;
}

.product-price {
  margin: 0;

  min-height: 56px;

  border-radius: 18px;

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

  padding: .55rem 1rem;

  background: var(--pink);
  color: white;

  font-size: 1.35rem;
  font-weight: 900;

  white-space: nowrap;
}

.card-whatsapp {
  width: 58px;
  height: 58px;

  border-radius: 12px;

  display: grid;
  place-items: center;

  background: #10b842;

  text-decoration: none;

  transition:
    transform .16s ease,
    filter .16s ease;
}

.card-whatsapp:hover {
  transform: translateY(-2px);

  filter: brightness(1.03);
}

.card-whatsapp img {
  width: 40px;
  height: 40px;

  object-fit: contain;
}

/* =========================================================
   DISPONIBILIDAD
   ========================================================= */

.status {
  display: inline-flex;

  width: fit-content;

  gap: .38rem;

  align-items: center;

  border-radius: 999px;

  padding: .28rem .55rem;

  font-size: .72rem;
  font-weight: 850;

  white-space: nowrap;
}

.status::before {
  content: "";

  width: .45rem;
  height: .45rem;

  border-radius: 50%;

  background: currentColor;
}

.status-available {
  color: #16723b;
  background: #e8f8ee;
}

.status-low {
  color: #9a5b00;
  background: #fff2d5;
}

.status-out {
  color: #a53237;
  background: #fde8e9;
}

/* =========================================================
   CARGAR MÁS
   ========================================================= */

.load-more-wrap {
  text-align: center;

  padding: 2rem 0 0;
}

.button {
  border: 0;

  min-height: 48px;

  padding: .75rem 1.1rem;

  border-radius: 14px;

  font-weight: 850;

  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: .65rem;
}

.button-load-more {
  min-width: 315px;

  border: 1px solid #cfe1fb;

  border-radius: 999px;

  background: #eef6ff;
  color: #146de4;
}

.button-primary {
  background: var(--blue);
  color: white;
}

.button-whatsapp {
  background: #19c34b;
  color: white;
}

.button-icon {
  width: 25px;
  height: 25px;

  object-fit: contain;
}

.button[hidden] {
  display: none;
}

.loading-spinner {
  width: 24px;
  height: 24px;

  border: 3px solid #bdd7fb;
  border-top-color: #1675ef;

  border-radius: 50%;
}

.button-load-more:hover .loading-spinner {
  animation:
    spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.load-status {
  margin: .6rem 0 0;

  font-size: .84rem;
}

.empty-state,
.not-found {
  text-align: center;

  padding: 4rem 1rem;
}

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */

.floating-whatsapp {
  position: fixed;

  right: 1.25rem;
  bottom: 5.4rem;

  z-index: 24;

  width: 58px;
  height: 58px;

  border-radius: 50%;

  background: #fff;

  display: grid;
  place-items: center;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, .14);
}

.floating-whatsapp img {
  width: 40px;
  height: 40px;

  object-fit: contain;
}

/* =========================================================
   BOTÓN SUBIR
   ========================================================= */

.scroll-top {
  position: fixed;

  right: 1.25rem;
  bottom: 1.15rem;

  z-index: 24;

  width: 58px;
  height: 58px;

  border: 0;

  border-radius: 50%;

  background: #2184f4;
  color: white;

  font-size: 2rem;

  line-height: 1;

  box-shadow:
    0 10px 22px rgba(33, 132, 244, .28);
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  background: #0c0f13;
  color: #fff;
}

.footer-inner {
  min-height: 74px;

  display: grid;
  place-items: center;

  text-align: center;
}

.footer-inner p {
  margin: 0;

  color: #fff;
}

/* =========================================================
   DETALLE PRODUCTO
   ========================================================= */

.product-detail-page {
  max-width: 1180px;
}

.breadcrumbs {
  display: flex;

  gap: .5rem;

  align-items: center;

  color: var(--text-muted);

  font-size: .9rem;

  margin-bottom: 1.4rem;
}

.product-detail {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, .92fr);

  gap:
    clamp(1.5rem, 4vw, 3.5rem);

  align-items: start;
}

.main-image-frame {
  position: relative;

  background: white;

  border: 2px solid var(--blue);

  border-radius: 20px;

  overflow: hidden;

  aspect-ratio: 1 / 1;

  display: grid;
  place-items: center;

  padding: 1rem;
}

.main-image-frame img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.detail-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(47, 128, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--blue-dark);
  font: inherit;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}

.detail-carousel-prev {
  left: .8rem;
}

.detail-carousel-next {
  right: .8rem;
}

.detail-carousel-arrow:disabled {
  opacity: .3;
  cursor: default;
}

.detail-carousel-arrow:focus-visible {
  outline: 3px solid rgba(47, 128, 255, .24);
  outline-offset: 2px;
}

.detail-carousel-arrow[hidden] {
  display: none;
}

.thumbnail-row {
  display: flex;

  gap: .65rem;

  margin-top: .8rem;

  overflow-x: auto;
}

.thumbnail {
  width: 78px;
  height: 64px;

  flex: 0 0 auto;

  padding: 0;

  border: 2px solid #d7e6fb;

  border-radius: .7rem;

  background: white;

  overflow: hidden;
}

.thumbnail[aria-current="true"] {
  border-color: var(--blue);
}

.thumbnail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.product-info {
  padding-top: .25rem;
}

.product-info h1 {
  margin: .2rem 0 .65rem;

  color: var(--orange);

  font-size:
    clamp(2rem, 4vw, 3.25rem);

  line-height: 1.05;
}

.detail-price {
  width: fit-content;

  margin: .6rem 0 .8rem;

  background: var(--pink);
  color: white;

  font-weight: 900;

  border-radius: 18px;

  padding: .6rem 1.2rem;

  font-size: 1.8rem;
}

.detail-description {
  font-size: 1rem;

  color: #565f6d;

  margin: 1.3rem 0;
}

.product-specs {
  margin: 0;

  border-top: 1px solid #e4ebf4;
}

.product-specs div {
  display: grid;

  grid-template-columns:
    110px
    1fr;

  gap: 1rem;

  padding: .8rem 0;

  border-bottom:
    1px solid #e4ebf4;
}

.product-specs dt {
  font-weight: 800;
}

.product-specs dd {
  margin: 0;

  color: var(--text-muted);
}

.detail-whatsapp {
  width: 100%;

  margin-top: 1.2rem;
}

/* =========================================================
   RESPONSIVE - 1180 PX
   ========================================================= */

@media (max-width: 1180px) {

  .header-top {
    grid-template-columns:
      1fr
      auto;
  }

  .shipping-header {
    grid-column: 1 / -1;

    justify-self: center;
  }

  .header-tools {
    grid-template-columns:
      1fr
      250px
      270px;
  }

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

/* =========================================================
   RESPONSIVE - 900 PX
   ========================================================= */

@media (max-width: 900px) {

  .shell {
    width:
      min(calc(100% - 1.5rem), var(--shell));
  }

  .site-header {
    position: static;
  }

  .header-top {
    grid-template-columns: 1fr;

    justify-items: center;
  }

  .brand {
    justify-self: center;
  }

  .whatsapp-link {
    justify-self: center;
  }

  .shipping-header {
    grid-column: 1;

    justify-self: center;
  }

  .header-tools {
    grid-template-columns:
      1fr
      1fr;
  }

  .search-control {
    grid-column:
      1 / -1;
  }

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

  .product-detail {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   RESPONSIVE - 620 PX
   ========================================================= */

@media (max-width: 620px) {

  .shell {
    width:
      min(calc(100% - 1rem), var(--shell));
  }

  .brand-bear {
    width: 88px;
    height: 88px;
  }

  .brand-title {
    font-size: 2.15rem;
  }

  .whatsapp-link {
    width: 100%;

    max-width: 360px;
  }

  .shipping-logos {
    gap: .55rem;
  }

  .shipping-logo,
  .shipping-logos > img {
    width: 125px;
    height: 42px;
  }

  .header-tools {
    grid-template-columns:
      1fr;
  }

  .search-control,
  .select-control {
    grid-column: 1;
  }

  .control-label {
    display: block;
  }

  .search-control input,
  .select-control select {
    min-height: 58px;
  }

  .search-button {
    width: 47px;
    height: 47px;

    border-radius: 14px;
  }

  .catalog-heading {
    align-items: flex-start;

    flex-direction: column;
  }

  .product-grid {
    grid-template-columns:
      1fr;
  }

  .product-card-media {
    aspect-ratio:
      4 / 3;
  }

  .button-load-more {
    width:
      min(100%, 315px);

    min-width: 0;
  }
}

@media (max-width: 620px) {
  .taxonomy-filter-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .taxonomy-label {
    min-width: 0;
  }

  .category-chips {
    width: 100%;
  }
}

/* =========================================================
   ACCESIBILIDAD - REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   V2 - CARRUSEL DE IMÁGENES EN CARDS
   Solo aparece cuando un producto tiene más de una imagen.
   ========================================================= */
.product-card-media-wrap {
  position: relative;
}

.card-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(47, 128, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--blue-dark);
  font: inherit;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}

.card-carousel-prev {
  left: .55rem;
}

.card-carousel-next {
  right: .55rem;
}

.card-carousel-arrow:disabled {
  opacity: .3;
  cursor: default;
}

.card-carousel-arrow:focus-visible {
  outline: 3px solid rgba(47, 128, 255, .22);
  outline-offset: 2px;
}