/**
 * StoreButtons.css — port de `mx-cms/src/components/ImageButtons/style.ts`.
 *
 * Breakpoints: 2xl 600 · 5xl 1024
 *   media.up('2xl') -> min-width: 600px
 *   media.up('5xl') -> min-width: 1024px
 *
 * ⚠️ La alineación cambia TRES veces: `space-between` en mobile, `center` desde
 * 600px, `flex-start` desde 1024px. Está así en el legacy.
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.store-buttons {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;

  /* media.up('2xl') */
  @media (min-width: 600px) {
    justify-content: center;
  }

  /* media.up('5xl') */
  @media (min-width: 1024px) {
    justify-content: flex-start;
  }

  /* ImageButtonsWrapper: un `<a>` con borde, sin fondo. */
  .store-button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 1;
    border: 1px solid #292929; /* neutral[100] */
    border-radius: 12px;
    color: #292929; /* neutral[100] */
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    @media (min-width: 1024px) {
      padding: 12px 40px;
    }
  }

  .store-button:hover {
    background-color: #d6dcd9; /* neutral[20] */
    border-color: #d6dcd9;
  }

  /* ⚠️ EL FILTRO. El legacy sirve los SVG en BLANCO y los invierte a negro con
     `filter: invert(1)`. Se replica, así que los iconos hay que subirlos en
     blanco: si se suben negros, se van a ver blancos sobre fondo blanco.

     Los `margin-top: -1px` y `vertical-align: baseline` son del legacy — un ajuste
     óptico para alinear el icono con la línea base del texto. */
  .store-icon {
    width: 15px;
    height: 15px;
    filter: invert(1);
    margin-right: 10px;
    margin-top: -1px;
    vertical-align: baseline;
  }

  /* Del barrido sobre BR: 7 de sus componentes respetan esta preferencia. */
  @media (prefers-reduced-motion: reduce) {
    .store-button {
      transition: none;
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.store-buttons,
.store-buttons *,
.store-buttons *::before,
.store-buttons *::after {
  box-sizing: border-box;
}