/* =========================================
   ENLACES DE PRODUCTO
========================================= */

.catalog-product-title h2 a {
  color: inherit;
  text-decoration: none;
}

.catalog-product-title h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.catalog-product-image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}


/* =========================================
   ACCIONES DEL PRODUCTO
========================================= */

.catalog-product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 8px;

  width: 100%;

  margin-top: 16px;
}


/* =========================================
   VER PRODUCTO
========================================= */

.catalog-detail-link {
  width: 100%;

  min-width: 0;
  min-height: 46px;

  display: flex;

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

  padding: 10px 12px;

  border:
    1px solid
    rgba(53, 22, 34, 0.20);

  border-radius: 999px;

  background: #ffffff;

  color: #351622;

  text-decoration: none;

  font-size: 0.86rem;
  font-weight: 700;

  white-space: nowrap;

  box-sizing: border-box;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.catalog-detail-link:hover {
  background: #f4dcc7;

  border-color:
    rgba(53, 22, 34, 0.35);

  transform:
    translateY(-1px);
}


/* =========================================
   BOTÓN AGREGAR
========================================= */

.catalog-add-button {
  width: 100%;

  min-width: 0;
  min-height: 46px;

  display: flex;

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

  gap: 7px;

  padding: 10px 12px;

  white-space: nowrap;

  box-sizing: border-box;
}


/* =========================================
   SELECTOR DE CANTIDAD
   −   1   +
========================================= */

.catalog-quantity-stepper {
  width: 100%;
  height: 46px;

  display: grid;

  grid-template-columns:
    1fr
    44px
    1fr;

  align-items: center;

  overflow: hidden;

  border-radius: 999px;

  background: #351622;

  color: #ffffff;

  box-sizing: border-box;
}


/* =========================================
   BOTONES − Y +
========================================= */

.quantity-stepper-button {
  height: 100%;

  display: flex;

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

  padding: 0;

  border: 0;

  background: transparent;

  color: #ffffff;

  cursor: pointer;

  font-size: 0.84rem;

  transition:
    background-color 0.18s ease;
}

.quantity-stepper-button:hover {
  background:
    rgba(255, 255, 255, 0.10);
}

.quantity-stepper-button:focus-visible {
  outline: 2px solid #f4dcc7;

  outline-offset: -3px;
}


/* =========================================
   NÚMERO CENTRAL
========================================= */

.quantity-stepper-value {
  height: 24px;

  display: flex;

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

  border-left:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-right:
    1px solid
    rgba(255, 255, 255, 0.20);

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

  line-height: 1;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 520px) {

  .catalog-product-actions {
    gap: 6px;
  }


  .catalog-detail-link,
  .catalog-add-button,
  .catalog-quantity-stepper {
    min-height: 42px;
    height: 42px;
  }


  .catalog-detail-link,
  .catalog-add-button {
    padding: 8px 7px;

    font-size: 0.78rem;
  }


  .catalog-quantity-stepper {
    grid-template-columns:
      1fr
      38px
      1fr;
  }


  .quantity-stepper-value {
    font-size: 0.84rem;
  }


  .quantity-stepper-button {
    font-size: 0.76rem;
  }

}


/* =========================================
   PANTALLAS MUY PEQUEÑAS
========================================= */

@media (max-width: 360px) {

  .catalog-product-actions {
    gap: 5px;
  }


  .catalog-detail-link,
  .catalog-add-button {
    padding: 7px 5px;

    font-size: 0.72rem;
  }

}