/* =========================================================
   WIRTZ MAYORISTA · ARMÁ TU KIT

   UBICACIÓN:
   Mayorista/pages/arma-tu-kit/arma-tu-kit.css

   PARTE 1 DE 2

   DISEÑO:
   - Integrado con style.css
   - Fondo blanco
   - Negro WIRTZ
   - Rojo WIRTZ
   - Bordes finos
   - Sin glow
   - Responsive
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

#-wirtz-arma-tu-kit,
#wirtz-arma-tu-kit {
  --kit-bg:
    var(
      --bg,
      #ffffff
    );

  --kit-bg-soft:
    var(
      --bg-soft,
      #f7f7f7
    );

  --kit-bg-muted:
    var(
      --bg-muted,
      #f1f1f1
    );

  --kit-bg-elevated:
    #ffffff;

  --kit-bg-hover:
    #fafafa;

  --kit-border:
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );

  --kit-border-strong:
    var(
      --line-strong,
      rgba(
        17,
        17,
        17,
        0.22
      )
    );

  --kit-text:
    var(
      --text,
      #111111
    );

  --kit-text-soft:
    var(
      --text-soft,
      #4f4f4f
    );

  --kit-text-muted:
    var(
      --text-muted,
      #7a7a7a
    );

  --kit-accent:
    var(
      --accent,
      #d71920
    );

  --kit-accent-dark:
    var(
      --accent-dark,
      #ad1117
    );

  --kit-accent-soft:
    var(
      --accent-soft,
      rgba(
        215,
        25,
        32,
        0.08
      )
    );

  --kit-success:
    var(
      --success,
      #14804a
    );

  --kit-success-soft:
    var(
      --success-soft,
      rgba(
        20,
        128,
        74,
        0.09
      )
    );

  --kit-warning:
    var(
      --warning,
      #a15c00
    );

  --kit-danger:
    var(
      --danger,
      #b42318
    );

  --kit-danger-soft:
    var(
      --danger-soft,
      rgba(
        180,
        35,
        24,
        0.08
      )
    );

  --kit-radius-xs:
    var(
      --radius-xs,
      4px
    );

  --kit-radius-sm:
    var(
      --radius-sm,
      7px
    );

  --kit-radius:
    var(
      --radius-md,
      10px
    );

  --kit-radius-lg:
    var(
      --radius-lg,
      14px
    );

  --kit-shadow:
    var(
      --shadow-sm,
      0 1px 2px rgba(
        17,
        17,
        17,
        0.04
      ),
      0 6px 18px rgba(
        17,
        17,
        17,
        0.04
      )
    );

  width:
    100%;

  min-height:
    100%;

  background:
    var(
      --kit-bg
    );

  color:
    var(
      --kit-text
    );

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  box-sizing:
    border-box;
}

#wirtz-arma-tu-kit *,
#wirtz-arma-tu-kit *::before,
#wirtz-arma-tu-kit *::after {
  box-sizing:
    border-box;
}


/* =========================================================
   MOUNT
   ========================================================= */

.arma-tu-kit-mount {
  width:
    100%;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.kit-builder__container {
  width:
    100%;

  margin:
    0 auto;

  padding:
    34px 0 56px;
}


/* =========================================================
   HEADER
   ========================================================= */

.kit-builder__header {
  margin-bottom:
    22px;

  padding-bottom:
    22px;

  border-bottom:
    1px solid
    var(
      --kit-border
    );
}

.kit-builder__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}

.kit-builder__eyebrow {
  display:
    block;

  width:
    fit-content;

  color:
    var(
      --kit-accent
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.kit-builder__title-row {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    28px;
}

.kit-builder__title-row > div {
  min-width:
    0;
}

.kit-builder__title-row h1 {
  margin:
    6px 0 0;

  color:
    var(
      --kit-text
    );

  font-size:
    clamp(
      30px,
      4vw,
      48px
    );

  font-weight:
    800;

  letter-spacing:
    -0.045em;

  line-height:
    1;
}

.kit-builder__title-row p {
  max-width:
    720px;

  margin:
    9px 0 0;

  color:
    var(
      --kit-text-soft
    );

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.55;
}


/* =========================================================
   BADGE HEADER
   ========================================================= */

.kit-builder__header-badge {
  min-width:
    210px;

  min-height:
    48px;

  padding:
    0 14px;

  display:
    inline-flex;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    var(
      --kit-bg-soft
    );

  color:
    var(
      --kit-text
    );

  font-size:
    12px;

  font-weight:
    800;

  white-space:
    nowrap;
}

.kit-builder__header-badge svg {
  width:
    17px;

  height:
    17px;

  color:
    var(
      --kit-accent
    );
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.kit-builder__toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(
      240px,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    14px;

  margin-bottom:
    14px;

  padding:
    14px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    var(
      --kit-bg-soft
    );
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.kit-builder__search {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  min-height:
    42px;

  padding:
    0 10px
    0 12px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

  transition:
    border-color
    0.18s ease;
}

.kit-builder__search:focus-within {
  border-color:
    var(
      --kit-border-strong
    );
}

.kit-builder__search > svg {
  width:
    17px;

  height:
    17px;

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

.kit-builder__search input {
  width:
    100%;

  min-width:
    0;

  height:
    40px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --kit-text
    );

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    500;
}

.kit-builder__search input::placeholder {
  color:
    var(
      --kit-text-muted
    );
}

.kit-builder__search-clear {
  width:
    28px;

  height:
    28px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

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

  cursor:
    pointer;
}

.kit-builder__search-clear:hover {
  background:
    var(
      --kit-bg-muted
    );

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

.kit-builder__search-clear svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   ACCIONES TOOLBAR
   ========================================================= */

.kit-builder__toolbar-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


/* =========================================================
   BOTÓN FILTROS MÓVIL
   ========================================================= */

.kit-builder__filter-button {
  min-height:
    42px;

  padding:
    0 13px;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --kit-border-strong
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}

.kit-builder__filter-button:hover {
  border-color:
    #111111;

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__filter-button svg {
  width:
    16px;

  height:
    16px;
}

.kit-builder__filter-button strong {
  min-width:
    19px;

  height:
    19px;

  padding:
    0 5px;

  display:
    inline-grid;

  place-items:
    center;

  border-radius:
    20px;

  background:
    #111111;

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    800;
}

.kit-builder__filter-button.has-active-filters {
  border-color:
    var(
      --kit-accent
    );
}


/* =========================================================
   ORDENAMIENTO
   ========================================================= */

.kit-builder__sort {
  position:
    relative;

  min-width:
    190px;

  min-height:
    42px;

  padding:
    0 12px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

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

.kit-builder__sort > span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    11px;
}

.kit-builder__sort select {
  width:
    100%;

  min-width:
    0;

  height:
    40px;

  border:
    0;

  outline:
    0;

  appearance:
    none;

  background:
    transparent;

  color:
    var(
      --kit-text
    );

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    700;

  cursor:
    pointer;
}


/* =========================================================
   RESUMEN SUPERIOR
   ========================================================= */

.kit-builder__summary-line {
  min-height:
    36px;

  margin-bottom:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  color:
    var(
      --kit-text-soft
    );
}

.kit-builder__summary-line > div {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;
}

.kit-builder__summary-line strong {
  color:
    var(
      --kit-text
    );

  font-size:
    12px;

  font-weight:
    800;
}

.kit-builder__summary-line span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    11px;
}


/* =========================================================
   BOTÓN KIT EN MÓVIL
   ========================================================= */

.kit-builder__mobile-kit-button {
  min-height:
    38px;

  padding:
    0 11px;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --kit-border-strong
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}

.kit-builder__mobile-kit-button:hover {
  border-color:
    #111111;

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__mobile-kit-button svg {
  width:
    15px;

  height:
    15px;
}

.kit-builder__mobile-kit-button strong {
  min-width:
    20px;

  height:
    20px;

  padding:
    0 5px;

  display:
    inline-grid;

  place-items:
    center;

  border-radius:
    20px;

  background:
    var(
      --kit-accent
    );

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    800;
}


/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.kit-builder__layout {
  display:
    grid;

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

  align-items:
    start;

  gap:
    22px;
}


/* =========================================================
   PANEL DE FILTROS
   ========================================================= */

.kit-builder__filters {
  position:
    sticky;

  top:
    calc(
      var(
        --topbar-height,
        74px
      ) +
      var(
        --nav-height,
        52px
      ) +
      18px
    );

  min-width:
    0;

  max-height:
    calc(
      100vh -
      var(
        --topbar-height,
        74px
      ) -
      var(
        --nav-height,
        52px
      ) -
      36px
    );

  display:
    grid;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )
    auto;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    #ffffff;
}


/* =========================================================
   HEADER FILTROS
   ========================================================= */

.kit-builder__filters-header {
  min-height:
    68px;

  padding:
    13px 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  border-bottom:
    1px solid
    var(
      --kit-border
    );

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__filters-header > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.kit-builder__filters-header span {
  color:
    var(
      --kit-accent
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.kit-builder__filters-header strong {
  color:
    var(
      --kit-text
    );

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    -0.025em;
}

.kit-builder__filters-close {
  width:
    34px;

  height:
    34px;

  padding:
    0;

  display:
    none;

  flex:
    0 0 auto;

  place-items:
    center;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    50%;

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  cursor:
    pointer;
}

.kit-builder__filters-close:hover {
  border-color:
    var(
      --kit-border-strong
    );

  background:
    var(
      --kit-bg-muted
    );
}

.kit-builder__filters-close svg {
  width:
    16px;

  height:
    16px;
}


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

.kit-builder__filters-content {
  min-height:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;
}


/* =========================================================
   SECCIÓN FILTRO
   ========================================================= */

.kit-builder__filter-section {
  padding:
    15px;

  border-bottom:
    1px solid
    var(
      --kit-border
    );
}

.kit-builder__filter-section:last-child {
  border-bottom:
    0;
}

.kit-builder__filter-section-header {
  margin-bottom:
    10px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}

.kit-builder__filter-section-header > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.kit-builder__filter-section-header span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.kit-builder__filter-section-header strong {
  color:
    var(
      --kit-text
    );

  font-size:
    12px;

  font-weight:
    800;
}

.kit-builder__filter-section-header > small {
  color:
    var(
      --kit-accent
    );

  font-size:
    9px;

  font-weight:
    800;
}


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

.kit-builder__availability-option {
  min-height:
    48px;

  padding:
    8px 9px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

  cursor:
    pointer;
}

.kit-builder__availability-option:hover {
  border-color:
    var(
      --kit-border-strong
    );

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__availability-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    1px;
}

.kit-builder__availability-copy strong {
  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.kit-builder__availability-copy small {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.kit-builder__checkbox {
  position:
    relative;

  width:
    16px;

  height:
    16px;

  display:
    inline-flex;

  flex:
    0 0 auto;
}

.kit-builder__checkbox input {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  margin:
    0;

  opacity:
    0;

  cursor:
    pointer;
}

.kit-builder__checkbox > span {
  position:
    relative;

  width:
    16px;

  height:
    16px;

  display:
    block;

  border:
    1px solid
    var(
      --kit-border-strong
    );

  border-radius:
    3px;

  background:
    #ffffff;

  transition:
    border-color
    0.16s ease,
    background
    0.16s ease;
}

.kit-builder__checkbox input:checked + span {
  border-color:
    #111111;

  background:
    #111111;
}

.kit-builder__checkbox input:checked + span::after {
  content:
    "";

  position:
    absolute;

  top:
    2px;

  left:
    5px;

  width:
    4px;

  height:
    8px;

  transform:
    rotate(
      45deg
    );

  border-right:
    2px solid
    #ffffff;

  border-bottom:
    2px solid
    #ffffff;
}

.kit-builder__checkbox input:focus-visible + span {
  outline:
    2px solid
    rgba(
      215,
      25,
      32,
      0.2
    );

  outline-offset:
    2px;
}


/* =========================================================
   OPCIONES DE FILTRO
   ========================================================= */

.kit-builder__filter-options {
  max-height:
    230px;

  padding-right:
    2px;

  display:
    grid;

  gap:
    2px;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}

.kit-builder__filter-option {
  min-height:
    34px;

  padding:
    4px 0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  border-radius:
    var(
      --kit-radius-xs
    );

  color:
    var(
      --kit-text-soft
    );

  cursor:
    pointer;

  user-select:
    none;
}

.kit-builder__filter-option:hover {
  color:
    var(
      --kit-text
    );
}

.kit-builder__filter-option-copy {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}

.kit-builder__filter-option-copy > span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    inherit;

  font-size:
    11px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.kit-builder__filter-option-copy small {
  flex:
    0 0 auto;

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

  font-size:
    9px;

  font-weight:
    700;
}

.kit-builder__filter-empty {
  margin:
    0;

  padding:
    4px 0;

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

  font-size:
    10px;

  line-height:
    1.45;
}


/* =========================================================
   FILTRO PRECIO
   ========================================================= */

.kit-builder__price-filter {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;
}

.kit-builder__price-filter label {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.kit-builder__price-filter label > span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  text-transform:
    uppercase;
}

.kit-builder__price-input {
  min-width:
    0;

  height:
    38px;

  display:
    grid;

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

  overflow:
    hidden;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;
}

.kit-builder__price-input:focus-within {
  border-color:
    var(
      --kit-border-strong
    );
}

.kit-builder__price-input > span {
  display:
    grid;

  place-items:
    center;

  border-right:
    1px solid
    var(
      --kit-border
    );

  background:
    var(
      --kit-bg-soft
    );

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

  font-size:
    10px;

  font-weight:
    800;
}

.kit-builder__price-input input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 8px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --kit-text
    );

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    700;
}

.kit-builder__price-input input::placeholder {
  color:
    var(
      --kit-text-muted
    );
}

.kit-builder__price-range-info {
  margin-top:
    8px;

  display:
    grid;

  gap:
    2px;
}

.kit-builder__price-range-info span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;
}

.kit-builder__price-range-info strong {
  color:
    var(
      --kit-text-soft
    );

  font-size:
    10px;

  font-weight:
    700;
}


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

.kit-builder__filters-footer {
  padding:
    12px;

  border-top:
    1px solid
    var(
      --kit-border
    );

  background:
    #ffffff;
}

.kit-builder__clear-filters {
  width:
    100%;

  min-height:
    38px;

  padding:
    0 10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --kit-border-strong
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}

.kit-builder__clear-filters:hover {
  border-color:
    #111111;

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__clear-filters svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   BACKDROP FILTROS
   ========================================================= */

.kit-builder__filters-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    1490;

  display:
    none;

  background:
    rgba(
      0,
      0,
      0,
      0.48
    );
}


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

.kit-builder__products {
  min-width:
    0;
}

.kit-builder__products-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    15px;
}


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

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

  display:
    grid;

  grid-template-rows:
    195px
    minmax(
      0,
      1fr
    );

  overflow:
    hidden;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    #ffffff;

  transition:
    border-color
    0.18s ease,
    transform
    0.18s ease;
}

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

  border-color:
    var(
      --kit-border-strong
    );
}

.kit-product-card.is-selected {
  border-color:
    rgba(
      215,
      25,
      32,
      0.6
    );
}

.kit-product-card.is-unavailable {
  opacity:
    0.68;
}


/* =========================================================
   MEDIA PRODUCTO
   ========================================================= */

.kit-product-card__media {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  width:
    100%;

  height:
    195px;

  overflow:
    hidden;

  border-bottom:
    1px solid
    var(
      --kit-border
    );

  background:
    #f5f5f5;
}

.kit-product-card__media img {
  width:
    100%;

  height:
    100%;

  padding:
    8px;

  object-fit:
    contain;

  transition:
    transform
    0.25s ease;
}

.kit-product-card:hover
.kit-product-card__media img {
  transform:
    scale(
      1.035
    );
}

.kit-product-card__placeholder {
  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    7px;

  width:
    100%;

  height:
    100%;

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

.kit-product-card__placeholder svg {
  width:
    34px;

  height:
    34px;
}

.kit-product-card__placeholder span {
  font-size:
    10px;
}


/* =========================================================
   BADGES PRODUCTO
   ========================================================= */

.kit-product-card__badges {
  position:
    absolute;

  top:
    10px;

  left:
    10px;

  right:
    10px;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  pointer-events:
    none;
}

.kit-product-card__badge {
  min-height:
    23px;

  padding:
    0 7px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-xs
    );

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  color:
    var(
      --kit-text-soft
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.kit-product-card__badge svg {
  width:
    11px;

  height:
    11px;
}

.kit-product-card__badge.is-selected {
  border-color:
    var(
      --kit-accent
    );

  background:
    var(
      --kit-accent
    );

  color:
    #ffffff;
}

.kit-product-card__badge.is-imported {
  color:
    #1f5f99;
}

.kit-product-card__badge.is-national {
  color:
    var(
      --kit-success
    );
}

.kit-product-card__badge.is-out-of-stock {
  margin-left:
    auto;

  border-color:
    var(
      --kit-danger
    );

  background:
    var(
      --kit-danger
    );

  color:
    #ffffff;
}


/* =========================================================
   BODY PRODUCTO
   ========================================================= */

.kit-product-card__body {
  min-width:
    0;

  padding:
    13px;

  display:
    flex;

  flex-direction:
    column;
}

.kit-product-card__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}

.kit-product-card__category {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.kit-product-card__sku {
  flex:
    0 0 auto;

  color:
    var(
      --kit-accent
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.kit-product-card h3 {
  min-height:
    38px;

  margin:
    7px 0 5px;

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    var(
      --kit-text
    );

  font-size:
    15px;

  font-weight:
    800;

  letter-spacing:
    -0.025em;

  line-height:
    1.25;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.kit-product-card__description {
  min-height:
    34px;

  margin:
    0;

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    var(
      --kit-text-soft
    );

  font-size:
    10px;

  line-height:
    1.45;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}


/* =========================================================
   META PRODUCTO
   ========================================================= */

.kit-product-card__meta {
  min-height:
    24px;

  margin-top:
    9px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}

.kit-product-card__meta span {
  min-height:
    22px;

  padding:
    0 6px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    20px;

  background:
    #ffffff;

  color:
    var(
      --kit-text-soft
    );

  font-size:
    8px;
}

.kit-product-card__meta span svg {
  width:
    11px;

  height:
    11px;

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


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

.kit-product-card__availability {
  min-height:
    34px;

  margin-top:
    9px;

  padding-top:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  border-top:
    1px solid
    var(
      --kit-border
    );
}

.kit-product-card__availability > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  font-size:
    9px;

  font-weight:
    700;
}

.kit-product-card__availability > span svg {
  width:
    12px;

  height:
    12px;
}

.kit-product-card__availability .is-available {
  color:
    var(
      --kit-success
    );
}

.kit-product-card__availability .is-unavailable {
  color:
    var(
      --kit-danger
    );
}

.kit-product-card__availability small {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;
}


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

.kit-product-card__footer {
  margin-top:
    auto;

  padding-top:
    10px;

  display:
    grid;

  gap:
    10px;
}


/* =========================================================
   PRECIO
   ========================================================= */

.kit-product-card__price {
  min-height:
    44px;

  display:
    grid;

  align-content:
    end;

  gap:
    2px;
}

.kit-product-card__price > span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.kit-product-card__price strong {
  color:
    var(
      --kit-text
    );

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    -0.03em;
}

.kit-product-card__price strong.is-protected {
  color:
    var(
      --kit-text-soft
    );

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0;
}

.kit-product-card__price small {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;
}


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

.kit-product-card__actions,
.kit-product-card__actions.is-selected {
  display:
    grid;

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

  gap:
    8px;
}


/* =========================================================
   CANTIDAD
   ========================================================= */

.kit-product-card__quantity {
  height:
    40px;

  display:
    grid;

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

  overflow:
    hidden;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;
}

.kit-product-card__quantity button {
  width:
    30px;

  min-height:
    38px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  background:
    transparent;

  color:
    var(
      --kit-text
    );

  cursor:
    pointer;
}

.kit-product-card__quantity button:hover:not(:disabled) {
  background:
    var(
      --kit-bg-soft
    );
}

.kit-product-card__quantity button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}

.kit-product-card__quantity button svg {
  width:
    13px;

  height:
    13px;
}

.kit-product-card__quantity input {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  border-right:
    1px solid
    var(
      --kit-border
    );

  border-left:
    1px solid
    var(
      --kit-border
    );

  outline:
    0;

  appearance:
    textfield;

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    800;

  text-align:
    center;
}

.kit-product-card__quantity input::-webkit-inner-spin-button,
.kit-product-card__quantity input::-webkit-outer-spin-button {
  margin:
    0;

  appearance:
    none;
}


/* =========================================================
   AGREGAR / QUITAR PRODUCTO
   ========================================================= */

.kit-product-card__add,
.kit-product-card__remove {
  min-width:
    0;

  min-height:
    40px;

  padding:
    0 11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border-radius:
    var(
      --kit-radius-sm
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background
    0.18s ease,
    border-color
    0.18s ease,
    color
    0.18s ease;
}

.kit-product-card__add {
  border:
    1px solid
    #111111;

  background:
    #111111;

  color:
    #ffffff;
}

.kit-product-card__add:hover:not(:disabled) {
  background:
    #2a2a2a;
}

.kit-product-card__add:disabled {
  border-color:
    var(
      --kit-border
    );

  background:
    var(
      --kit-bg-muted
    );

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

.kit-product-card__remove {
  border:
    1px solid
    rgba(
      180,
      35,
      24,
      0.22
    );

  background:
    var(
      --kit-danger-soft
    );

  color:
    var(
      --kit-danger
    );
}

.kit-product-card__remove:hover {
  border-color:
    var(
      --kit-danger
    );

  background:
    rgba(
      180,
      35,
      24,
      0.12
    );
}

.kit-product-card__add svg,
.kit-product-card__remove svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 auto;
}


/* =========================================================
   ESTADO VACÍO DE PRODUCTOS
   ========================================================= */

.kit-builder__empty {
  min-height:
    340px;

  padding:
    30px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    8px;

  border:
    1px dashed
    var(
      --kit-border-strong
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    var(
      --kit-bg-soft
    );

  text-align:
    center;
}

.kit-builder__empty-icon {
  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    50%;

  background:
    #ffffff;

  color:
    var(
      --kit-text-soft
    );
}

.kit-builder__empty-icon svg {
  width:
    24px;

  height:
    24px;
}

.kit-builder__empty h2 {
  margin:
    5px 0 0;

  color:
    var(
      --kit-text
    );

  font-size:
    19px;

  font-weight:
    800;
}

.kit-builder__empty p {
  max-width:
    440px;

  margin:
    0;

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

  font-size:
    12px;

  line-height:
    1.5;
}

.kit-builder__empty button {
  min-height:
    40px;

  margin-top:
    8px;

  padding:
    0 13px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --kit-border-strong
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}

.kit-builder__empty button:hover {
  border-color:
    #111111;

  background:
    var(
      --kit-bg-muted
    );
}

.kit-builder__empty button svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   CONTINÚA EN PARTE 2
   ========================================================= *//* =========================================================
   WIRTZ MAYORISTA · ARMÁ TU KIT

   UBICACIÓN:
   Mayorista/pages/arma-tu-kit/arma-tu-kit.css

   PARTE 2 DE 2
   ========================================================= */


/* =========================================================
   PANEL DEL KIT
   ========================================================= */

.kit-builder__kit {
  position:
    sticky;

  top:
    calc(
      var(
        --topbar-height,
        74px
      ) +
      var(
        --nav-height,
        52px
      ) +
      18px
    );

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    #ffffff;
}


/* =========================================================
   HEADER DEL KIT
   ========================================================= */

.kit-builder__kit-header {
  min-height:
    68px;

  padding:
    13px 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  border-bottom:
    1px solid
    var(
      --kit-border
    );

  background:
    #111111;

  color:
    #ffffff;
}

.kit-builder__kit-header > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.kit-builder__kit-eyebrow {
  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.kit-builder__kit-header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    -0.025em;
}

.kit-builder__kit-clear {
  min-height:
    32px;

  padding:
    0 10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    transparent;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;
}

.kit-builder__kit-clear:hover:not(:disabled) {
  border-color:
    rgba(
      255,
      255,
      255,
      0.34
    );

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    #ffffff;
}

.kit-builder__kit-clear:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


/* =========================================================
   ITEMS DEL KIT
   ========================================================= */

.kit-builder__kit-items {
  max-height:
    460px;

  display:
    flex;

  flex-direction:
    column;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  background:
    #ffffff;
}


/* =========================================================
   ITEM DEL KIT
   ========================================================= */

.kit-builder__kit-item {
  display:
    grid;

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

  gap:
    10px;

  padding:
    12px 13px;

  border-bottom:
    1px solid
    var(
      --kit-border
    );

  background:
    #ffffff;
}

.kit-builder__kit-item:last-child {
  border-bottom:
    0;
}

.kit-builder__kit-item:hover {
  background:
    var(
      --kit-bg-soft
    );
}


/* =========================================================
   MEDIA ITEM
   ========================================================= */

.kit-builder__kit-item-media {
  width:
    62px;

  height:
    62px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #f5f5f5;
}

.kit-builder__kit-item-media img {
  width:
    100%;

  height:
    100%;

  padding:
    4px;

  object-fit:
    contain;
}

.kit-builder__kit-item-placeholder {
  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;

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

.kit-builder__kit-item-placeholder svg {
  width:
    21px;

  height:
    21px;
}


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

.kit-builder__kit-item-content {
  min-width:
    0;

  display:
    grid;

  gap:
    8px;
}

.kit-builder__kit-item-main {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}

.kit-builder__kit-item-heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;
}

.kit-builder__kit-item-heading > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.kit-builder__kit-item-heading strong {
  min-width:
    0;

  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.35;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.kit-builder__kit-item-heading span {
  overflow:
    hidden;

  color:
    var(
      --kit-accent
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   ELIMINAR ITEM
   ========================================================= */

.kit-builder__kit-item-remove {
  width:
    28px;

  height:
    28px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  border:
    1px solid
    transparent;

  border-radius:
    50%;

  background:
    transparent;

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

  cursor:
    pointer;
}

.kit-builder__kit-item-remove:hover {
  border-color:
    rgba(
      180,
      35,
      24,
      0.18
    );

  background:
    var(
      --kit-danger-soft
    );

  color:
    var(
      --kit-danger
    );
}

.kit-builder__kit-item-remove svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   META ITEM
   ========================================================= */

.kit-builder__kit-item-meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}

.kit-builder__kit-item-meta span {
  min-height:
    19px;

  padding:
    0 6px;

  display:
    inline-flex;

  align-items:
    center;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    20px;

  background:
    var(
      --kit-bg-soft
    );

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

  font-size:
    8px;

  font-weight:
    700;
}


/* =========================================================
   BOTTOM ITEM
   ========================================================= */

.kit-builder__kit-item-bottom {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    8px;
}


/* =========================================================
   CANTIDAD ITEM
   ========================================================= */

.kit-builder__kit-item-quantity {
  width:
    96px;

  height:
    30px;

  display:
    grid;

  grid-template-columns:
    28px
    40px
    28px;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #ffffff;
}

.kit-builder__kit-item-quantity button {
  width:
    28px;

  height:
    28px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  background:
    transparent;

  color:
    var(
      --kit-text
    );

  cursor:
    pointer;
}

.kit-builder__kit-item-quantity button:hover {
  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__kit-item-quantity button svg {
  width:
    11px;

  height:
    11px;
}

.kit-builder__kit-item-quantity input {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  border-right:
    1px solid
    var(
      --kit-border
    );

  border-left:
    1px solid
    var(
      --kit-border
    );

  outline:
    0;

  appearance:
    textfield;

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    800;

  text-align:
    center;
}

.kit-builder__kit-item-quantity input::-webkit-inner-spin-button,
.kit-builder__kit-item-quantity input::-webkit-outer-spin-button {
  margin:
    0;

  appearance:
    none;
}


/* =========================================================
   PRECIO ITEM
   ========================================================= */

.kit-builder__kit-item-price {
  min-width:
    0;

  display:
    grid;

  justify-items:
    end;

  gap:
    1px;

  text-align:
    right;
}

.kit-builder__kit-item-price small {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    8px;
}

.kit-builder__kit-item-price strong {
  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   KIT VACÍO
   ========================================================= */

.kit-builder__kit-empty {
  min-height:
    220px;

  padding:
    26px 20px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    7px;

  background:
    #ffffff;

  text-align:
    center;
}

.kit-builder__kit-empty > div {
  width:
    52px;

  height:
    52px;

  margin-bottom:
    3px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    50%;

  background:
    var(
      --kit-bg-soft
    );

  color:
    var(
      --kit-text-soft
    );
}

.kit-builder__kit-empty > div svg {
  width:
    23px;

  height:
    23px;
}

.kit-builder__kit-empty strong {
  color:
    var(
      --kit-text
    );

  font-size:
    13px;

  font-weight:
    800;
}

.kit-builder__kit-empty p {
  max-width:
    220px;

  margin:
    0;

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

  font-size:
    10px;

  line-height:
    1.5;
}


/* =========================================================
   TOTALES DEL KIT
   ========================================================= */

.kit-builder__kit-totals {
  border-top:
    1px solid
    var(
      --kit-border
    );

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__kit-totals > div {
  min-height:
    38px;

  padding:
    0 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  border-bottom:
    1px solid
    var(
      --kit-border
    );
}

.kit-builder__kit-totals > div:last-child {
  border-bottom:
    0;
}

.kit-builder__kit-totals span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    10px;

  font-weight:
    600;
}

.kit-builder__kit-totals strong {
  color:
    var(
      --kit-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.kit-builder__kit-total-main {
  min-height:
    58px !important;

  background:
    #ffffff;
}

.kit-builder__kit-total-main span {
  color:
    var(
      --kit-text-soft
    );

  font-size:
    11px;

  font-weight:
    700;
}

.kit-builder__kit-total-main strong {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  color:
    var(
      --kit-text
    );

  font-size:
    19px;

  font-weight:
    800;

  letter-spacing:
    -0.035em;
}


/* =========================================================
   BOTÓN AGREGAR KIT AL CARRITO
   ========================================================= */

.kit-builder__add-cart {
  width:
    calc(
      100% - 28px
    );

  min-height:
    44px;

  margin:
    14px 14px 0;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    #111111;

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    #111111;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background
    0.18s ease,
    border-color
    0.18s ease,
    color
    0.18s ease;
}

.kit-builder__add-cart:hover:not(:disabled) {
  background:
    #2a2a2a;
}

.kit-builder__add-cart:disabled {
  border-color:
    var(
      --kit-border
    );

  background:
    var(
      --kit-bg-muted
    );

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

  opacity:
    1;

  cursor:
    not-allowed;
}

.kit-builder__add-cart.is-loading {
  cursor:
    wait;
}

.kit-builder__add-cart svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   NOTA CARRITO
   ========================================================= */

.kit-builder__cart-note {
  margin:
    9px 14px 14px;

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

  font-size:
    9px;

  line-height:
    1.45;

  text-align:
    center;
}


/* =========================================================
   TOASTS
   ========================================================= */

.kit-builder__toasts {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    4000;

  width:
    min(
      calc(
        100% - 36px
      ),
      390px
    );

  display:
    grid;

  gap:
    8px;

  pointer-events:
    none;
}

.kit-builder__toast {
  min-height:
    58px;

  padding:
    10px 11px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius
    );

  background:
    #ffffff;

  box-shadow:
    var(
      --kit-shadow
    );

  color:
    var(
      --kit-text
    );

  opacity:
    0;

  transform:
    translateY(
      10px
    );

  transition:
    opacity
    0.18s ease,
    transform
    0.18s ease;
}

.kit-builder__toast.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}

.kit-builder__toast svg {
  width:
    34px;

  height:
    34px;

  padding:
    8px;

  border-radius:
    50%;

  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__toast span {
  color:
    var(
      --kit-text
    );

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.4;
}

.kit-builder__toast.is-success {
  border-color:
    rgba(
      20,
      128,
      74,
      0.18
    );
}

.kit-builder__toast.is-success svg {
  background:
    var(
      --kit-success-soft
    );

  color:
    var(
      --kit-success
    );
}

.kit-builder__toast.is-error {
  border-color:
    rgba(
      180,
      35,
      24,
      0.18
    );
}

.kit-builder__toast.is-error svg {
  background:
    var(
      --kit-danger-soft
    );

  color:
    var(
      --kit-danger
    );
}

.kit-builder__toast.is-warning {
  border-color:
    rgba(
      161,
      92,
      0,
      0.18
    );
}

.kit-builder__toast.is-warning svg {
  background:
    rgba(
      161,
      92,
      0,
      0.08
    );

  color:
    var(
      --kit-warning
    );
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.kit-builder__kit-items,
.kit-builder__filters-content,
.kit-builder__filter-options {
  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      17,
      17,
      17,
      0.22
    )
    transparent;
}

.kit-builder__kit-items::-webkit-scrollbar,
.kit-builder__filters-content::-webkit-scrollbar,
.kit-builder__filter-options::-webkit-scrollbar {
  width:
    7px;
}

.kit-builder__kit-items::-webkit-scrollbar-track,
.kit-builder__filters-content::-webkit-scrollbar-track,
.kit-builder__filter-options::-webkit-scrollbar-track {
  background:
    transparent;
}

.kit-builder__kit-items::-webkit-scrollbar-thumb,
.kit-builder__filters-content::-webkit-scrollbar-thumb,
.kit-builder__filter-options::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    20px;

  background:
    rgba(
      17,
      17,
      17,
      0.22
    );

  background-clip:
    padding-box;
}


/* =========================================================
   FOCUS
   ========================================================= */

#wirtz-arma-tu-kit button:focus-visible,
#wirtz-arma-tu-kit input:focus-visible,
#wirtz-arma-tu-kit select:focus-visible {
  outline:
    2px solid
    rgba(
      215,
      25,
      32,
      0.22
    );

  outline-offset:
    2px;
}


/* =========================================================
   DESHABILITADOS
   ========================================================= */

#wirtz-arma-tu-kit button:disabled {
  cursor:
    not-allowed;
}


/* =========================================================
   ESCRITORIO GRANDE
   ========================================================= */

@media (
  min-width:
    1500px
) {
  .kit-builder__layout {
    grid-template-columns:
      250px
      minmax(
        0,
        1fr
      )
      350px;

    gap:
      26px;
  }

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


/* =========================================================
   RESPONSIVE 1280
   ========================================================= */

@media (
  max-width:
    1280px
) {
  .kit-builder__layout {
    grid-template-columns:
      220px
      minmax(
        0,
        1fr
      )
      300px;

    gap:
      16px;
  }

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

  .kit-product-card__actions,
  .kit-product-card__actions.is-selected {
    grid-template-columns:
      98px
      minmax(
        0,
        1fr
      );
  }
}


/* =========================================================
   RESPONSIVE 1100
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .kit-builder__layout {
    grid-template-columns:
      220px
      minmax(
        0,
        1fr
      );
  }

  .kit-builder__kit {
    position:
      static;

    grid-column:
      1 /
      -1;

    margin-top:
      4px;
  }

  .kit-builder__kit-items {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    max-height:
      420px;
  }

  .kit-builder__kit-item:nth-child(odd) {
    border-right:
      1px solid
      var(
        --kit-border
      );
  }

  .kit-builder__mobile-kit-button {
    display:
      inline-flex;
  }
}


/* =========================================================
   RESPONSIVE 980
   ========================================================= */

@media (
  max-width:
    980px
) {
  .kit-builder__container {
    padding-top:
      28px;
  }

  .kit-builder__title-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .kit-builder__header-badge {
    min-width:
      0;
  }

  .kit-builder__toolbar {
    grid-template-columns:
      1fr;
  }

  .kit-builder__toolbar-actions {
    justify-content:
      space-between;
  }

  .kit-builder__filter-button {
    display:
      inline-flex;
  }

  .kit-builder__layout {
    display:
      block;
  }

  .kit-builder__filters {
    position:
      fixed;

    top:
      0;

    bottom:
      0;

    left:
      0;

    z-index:
      2100;

    width:
      min(
        88vw,
        340px
      );

    height:
      100vh;

    max-height:
      none;

    transform:
      translateX(
        -102%
      );

    border-top:
      0;

    border-bottom:
      0;

    border-left:
      0;

    border-radius:
      0;

    transition:
      transform
      0.22s ease;
  }

  .kit-builder__filters.is-open {
    transform:
      translateX(
        0
      );
  }

  .kit-builder__filters-close {
    display:
      grid;
  }

  .kit-builder__filters-content {
    max-height:
      none;
  }

  .kit-builder__filters-backdrop {
    display:
      block;
  }

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

  .kit-builder__kit {
    margin-top:
      18px;
  }

  body.kit-filters-open {
    overflow:
      hidden;
  }
}


/* =========================================================
   RESPONSIVE 760
   ========================================================= */

@media (
  max-width:
    760px
) {
  .kit-builder__container {
    padding-top:
      24px;

    padding-bottom:
      44px;
  }

  .kit-builder__toolbar-actions {
    width:
      100%;
  }

  .kit-builder__filter-button {
    flex:
      1;
  }

  .kit-builder__sort {
    flex:
      1;

    min-width:
      0;
  }

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

  .kit-builder__kit-items {
    grid-template-columns:
      1fr;
  }

  .kit-builder__kit-item:nth-child(odd) {
    border-right:
      0;
  }
}


/* =========================================================
   RESPONSIVE 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .kit-builder__container {
    padding:
      22px 0 36px;
  }

  .kit-builder__header {
    margin-bottom:
      16px;

    padding-bottom:
      17px;
  }

  .kit-builder__title-row {
    gap:
      12px;
  }

  .kit-builder__title-row h1 {
    font-size:
      30px;
  }

  .kit-builder__title-row p {
    font-size:
      12px;
  }

  .kit-builder__header-badge {
    width:
      100%;

    justify-content:
      flex-start;
  }

  .kit-builder__toolbar {
    padding:
      10px;
  }

  .kit-builder__toolbar-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      8px;
  }

  .kit-builder__filter-button,
  .kit-builder__sort {
    width:
      100%;
  }

  .kit-builder__sort {
    min-width:
      0;
  }

  .kit-builder__sort > span {
    display:
      none;
  }

  .kit-builder__summary-line {
    align-items:
      flex-start;
  }

  .kit-builder__summary-line > div {
    display:
      grid;

    gap:
      1px;
  }

  .kit-builder__summary-line > div span {
    display:
      none;
  }

  .kit-builder__mobile-kit-button > span {
    display:
      none;
  }

  .kit-builder__products-grid {
    grid-template-columns:
      1fr;
  }

  .kit-product-card {
    grid-template-rows:
      235px
      minmax(
        0,
        1fr
      );
  }

  .kit-product-card__media {
    height:
      235px;
  }

  .kit-product-card__body {
    padding:
      13px;
  }

  .kit-product-card h3 {
    min-height:
      auto;
  }

  .kit-product-card__description {
    min-height:
      auto;
  }

  .kit-product-card__actions,
  .kit-product-card__actions.is-selected {
    grid-template-columns:
      106px
      minmax(
        0,
        1fr
      );
  }

  .kit-builder__filters {
    width:
      100%;
  }

  .kit-builder__filters-footer {
    padding-bottom:
      calc(
        12px +
        env(
          safe-area-inset-bottom
        )
      );
  }

  .kit-builder__price-filter {
    grid-template-columns:
      1fr;
  }

  .kit-builder__kit-item {
    grid-template-columns:
      56px
      minmax(
        0,
        1fr
      );

    padding:
      11px;
  }

  .kit-builder__kit-item-media {
    width:
      56px;

    height:
      56px;
  }

  .kit-builder__kit-item-bottom {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .kit-builder__kit-item-price {
    justify-items:
      start;

    text-align:
      left;
  }

  .kit-builder__add-cart {
    width:
      calc(
        100% - 20px
      );

    margin:
      12px 10px 0;
  }

  .kit-builder__cart-note {
    margin:
      8px 10px 12px;
  }

  .kit-builder__toasts {
    right:
      12px;

    bottom:
      12px;

    width:
      calc(
        100% - 24px
      );
  }
}


/* =========================================================
   RESPONSIVE 390
   ========================================================= */

@media (
  max-width:
    390px
) {
  .kit-builder__title-row h1 {
    font-size:
      27px;
  }

  .kit-product-card {
    grid-template-rows:
      215px
      minmax(
        0,
        1fr
      );
  }

  .kit-product-card__media {
    height:
      215px;
  }

  .kit-product-card__actions,
  .kit-product-card__actions.is-selected {
    grid-template-columns:
      1fr;
  }

  .kit-product-card__quantity,
  .kit-product-card__add,
  .kit-product-card__remove {
    width:
      100%;
  }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .kit-product-card,
  .kit-builder__toast,
  .kit-builder__filters,
  .kit-builder__search {
    transition:
      none;
  }

  .kit-product-card:hover {
    transform:
      none;
  }
}/* =========================================================
   ARMÁ TU KIT · CORRECCIÓN FILTROS NUEVO JS

   UBICACIÓN:
   Mayorista/pages/arma-tu-kit/arma-tu-kit.css

   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   GRUPO DE FILTROS
   ========================================================= */

.kit-builder__filter-group {
  width:
    100%;

  min-width:
    0;

  border-bottom:
    1px solid
    var(
      --kit-border
    );

  background:
    #ffffff;
}

.kit-builder__filter-group:last-child {
  border-bottom:
    0;
}


/* =========================================================
   HEADER DEL GRUPO
   ========================================================= */

.kit-builder__filter-group-header {
  width:
    100%;

  min-height:
    46px;

  padding:
    0 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  border:
    0;

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    800;

  text-align:
    left;

  cursor:
    pointer;
}

.kit-builder__filter-group-header:hover {
  background:
    var(
      --kit-bg-soft
    );
}

.kit-builder__filter-group-header > span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.kit-builder__filter-group-header > svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 auto;

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

  transition:
    transform
    0.18s ease;
}


/* =========================================================
   ROTACIÓN DEL CHEVRON
   ========================================================= */

.kit-builder__filter-group.is-open
.kit-builder__filter-group-header > svg {
  transform:
    rotate(
      180deg
    );
}


/* =========================================================
   BODY DEL GRUPO
   ========================================================= */

.kit-builder__filter-group-body {
  display:
    none;

  width:
    100%;

  min-width:
    0;

  padding:
    4px 15px 14px;

  overflow:
    hidden;
}

.kit-builder__filter-group.is-open
.kit-builder__filter-group-body {
  display:
    block;
}


/* =========================================================
   OPCIÓN DE FILTRO
   ========================================================= */

.kit-builder__filter-option {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  min-height:
    34px;

  padding:
    5px 0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  color:
    var(
      --kit-text-soft
    );

  cursor:
    pointer;

  user-select:
    none;
}


/* =========================================================
   INPUT REAL
   ========================================================= */

.kit-builder__filter-option > input[type="checkbox"] {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  margin:
    0;

  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   CHECK VISUAL
   ========================================================= */

.kit-builder__filter-check {
  width:
    16px;

  height:
    16px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --kit-border-strong
    );

  border-radius:
    3px;

  background:
    #ffffff;

  color:
    transparent;

  transition:
    background
    0.16s ease,
    border-color
    0.16s ease,
    color
    0.16s ease;
}

.kit-builder__filter-check svg {
  width:
    11px;

  height:
    11px;

  stroke-width:
    3;
}


/* =========================================================
   CHECK ACTIVO
   ========================================================= */

.kit-builder__filter-option
> input[type="checkbox"]:checked
+ .kit-builder__filter-check {
  border-color:
    #111111;

  background:
    #111111;

  color:
    #ffffff;
}


/* =========================================================
   FOCUS
   ========================================================= */

.kit-builder__filter-option
> input[type="checkbox"]:focus-visible
+ .kit-builder__filter-check {
  outline:
    2px solid
    rgba(
      215,
      25,
      32,
      0.22
    );

  outline-offset:
    2px;
}


/* =========================================================
   LABEL DE OPCIÓN
   ========================================================= */

.kit-builder__filter-option-label {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --kit-text-soft
    );

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.kit-builder__filter-option:hover
.kit-builder__filter-option-label {
  color:
    var(
      --kit-text
    );
}


/* =========================================================
   CONTADOR DE OPCIÓN
   ========================================================= */

.kit-builder__filter-option > small {
  min-width:
    22px;

  flex:
    0 0 auto;

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

  font-size:
    9px;

  font-weight:
    700;

  text-align:
    right;

  white-space:
    nowrap;
}


/* =========================================================
   PRECIO · NUEVO HTML
   ========================================================= */

.kit-builder__price-filter {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}

.kit-builder__price-filter label {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.kit-builder__price-filter label > span {
  color:
    var(
      --kit-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.kit-builder__price-filter input {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0 9px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  outline:
    0;

  background:
    #ffffff;

  color:
    var(
      --kit-text
    );

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    700;
}

.kit-builder__price-filter input:focus {
  border-color:
    var(
      --kit-border-strong
    );
}


/* =========================================================
   PRECIO PROTEGIDO
   ========================================================= */

.kit-builder__price-filter-disabled {
  min-height:
    44px;

  padding:
    9px 10px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid
    var(
      --kit-border
    );

  border-radius:
    var(
      --kit-radius-sm
    );

  background:
    var(
      --kit-bg-soft
    );

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

  font-size:
    10px;

  line-height:
    1.4;
}

.kit-builder__price-filter-disabled svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 auto;
}


/* =========================================================
   ESTADO VACÍO DE FILTROS
   ========================================================= */

.kit-builder__filters-empty {
  margin:
    0;

  padding:
    7px 0;

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

  font-size:
    10px;

  line-height:
    1.45;
}


/* =========================================================
   PANEL FILTROS · ANCHO / OVERFLOW
   ========================================================= */

.kit-builder__filters {
  min-width:
    238px;

  width:
    238px;
}

.kit-builder__filters-content {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


/* =========================================================
   EVITAR DESBORDES DE TEXTOS
   ========================================================= */

.kit-builder__filters *,
.kit-builder__filters *::before,
.kit-builder__filters *::after {
  box-sizing:
    border-box;
}

.kit-builder__filters button,
.kit-builder__filters label,
.kit-builder__filters span,
.kit-builder__filters strong,
.kit-builder__filters small {
  max-width:
    100%;
}


/* =========================================================
   ESCRITORIO GRANDE
   ========================================================= */

@media (min-width: 1500px) {
  .kit-builder__filters {
    min-width:
      250px;

    width:
      250px;
  }
}


/* =========================================================
   HASTA 1280
   ========================================================= */

@media (max-width: 1280px) and (min-width: 981px) {
  .kit-builder__filters {
    min-width:
      220px;

    width:
      220px;
  }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 980px) {
  .kit-builder__filters {
    width:
      min(
        88vw,
        340px
      );

    min-width:
      0;
  }

  .kit-builder__filter-group-body {
    padding-left:
      16px;

    padding-right:
      16px;
  }
}


/* =========================================================
   MOBILE CHICO
   ========================================================= */

@media (max-width: 520px) {
  .kit-builder__filters {
    width:
      100%;
  }

  .kit-builder__price-filter {
    grid-template-columns:
      1fr;
  }

  .kit-builder__filter-option-label {
    white-space:
      normal;
  }
}/* =========================================================
   ARMÁ TU KIT · AJUSTE FINAL DE CARDS

   UBICACIÓN:
   Mayorista/pages/arma-tu-kit/arma-tu-kit.css

   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   GRILLA
   ========================================================= */

.kit-builder__products {
  min-width: 0;
}

.kit-builder__products-grid {
  width: 100%;
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
  gap: 16px;
}


/* =========================================================
   CARD
   MISMO ESTILO BASE QUE .product-card
   ========================================================= */

.kit-product-card {
  min-width: 0;
  display: grid;
  grid-template-rows:
    215px
    minmax(
      0,
      1fr
    );
  overflow: hidden;
  border:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  border-radius:
    var(
      --radius-md,
      10px
    );
  background: #ffffff;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}

.kit-product-card:hover {
  transform:
    translateY(
      -2px
    );
  border-color:
    var(
      --line-strong,
      rgba(
        17,
        17,
        17,
        0.22
      )
    );
}

.kit-product-card.is-selected {
  border-color:
    rgba(
      215,
      25,
      32,
      0.72
    );
}


/* =========================================================
   MEDIA
   ========================================================= */

.kit-product-card__media {
  position: relative;
  width: 100%;
  height: 215px;
  min-height: 215px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  background: #f5f5f5;
}

.kit-product-card__media img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  object-position: center;
  transition:
    transform 0.25s ease;
}

.kit-product-card:hover
.kit-product-card__media img {
  transform:
    scale(
      1.035
    );
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.kit-product-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color:
    var(
      --text-muted,
      #7a7a7a
    );
}

.kit-product-card__placeholder svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.5;
}

.kit-product-card__placeholder::after {
  content: "Sin imagen";
  color:
    var(
      --text-muted,
      #7a7a7a
    );
  font-size: 10px;
  font-weight: 600;
}


/* =========================================================
   BADGE SELECCIONADO
   ========================================================= */

.kit-product-card__selected-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  min-height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius:
    var(
      --radius-xs,
      4px
    );
  background: #111111;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.kit-product-card__selected-badge svg {
  width: 13px;
  height: 13px;
}


/* =========================================================
   BADGE SIN STOCK
   ========================================================= */

.kit-product-card__stock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  min-height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius:
    var(
      --radius-xs,
      4px
    );
  background:
    var(
      --danger,
      #b42318
    );
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


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

.kit-product-card__content {
  min-width: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
}


/* =========================================================
   CATEGORÍA + SKU
   ========================================================= */

.kit-product-card__metadata {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kit-product-card__metadata span,
.kit-product-card__metadata strong {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.kit-product-card__metadata span {
  color:
    var(
      --text-muted,
      #7a7a7a
    );
}

.kit-product-card__metadata strong {
  flex: 0 0 auto;
  max-width: 48%;
  color:
    var(
      --accent,
      #d71920
    );
}


/* =========================================================
   NOMBRE
   ========================================================= */

.kit-product-card__content h3 {
  min-height: 44px;
  margin: 8px 0 5px;
  display: -webkit-box;
  overflow: hidden;
  color:
    var(
      --text,
      #111111
    );
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


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

.kit-product-card__tags {
  min-height: 24px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.kit-product-card__tags span {
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  border:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  border-radius: 20px;
  color:
    var(
      --text-soft,
      #4f4f4f
    );
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   STOCK
   ========================================================= */

.kit-product-card__stock {
  min-height: 34px;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
}

.kit-product-card__stock > span {
  color:
    var(
      --text-muted,
      #7a7a7a
    );
  font-size: 10px;
  font-weight: 600;
}

.kit-product-card__stock strong {
  font-size: 10px;
  font-weight: 800;
}

.kit-product-card__stock
.is-available {
  color:
    var(
      --success,
      #14804a
    );
}

.kit-product-card__stock
.is-unavailable {
  color:
    var(
      --danger,
      #b42318
    );
}


/* =========================================================
   PRECIO
   ========================================================= */

.kit-product-card__price {
  min-height: 66px;
  margin-top: 10px;
  padding-top: 11px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  border-top:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
}

.kit-product-card__price > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.kit-product-card__price
> div
> span {
  color:
    var(
      --text-muted,
      #7a7a7a
    );
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.kit-product-card__price
> div
> strong {
  color:
    var(
      --text,
      #111111
    );
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.kit-product-card__price
> small {
  color:
    var(
      --text-muted,
      #7a7a7a
    );
  font-size: 9px;
  white-space: nowrap;
}


/* =========================================================
   PRECIO PROTEGIDO
   ========================================================= */

.kit-product-card__price--protected {
  min-height: 66px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

.kit-product-card__price--protected
> svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color:
    var(
      --text-muted,
      #7a7a7a
    );
}

.kit-product-card__price--protected
> div {
  display: grid;
  gap: 2px;
}

.kit-product-card__price--protected
strong {
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

.kit-product-card__price--protected
span {
  color:
    var(
      --text-muted,
      #7a7a7a
    );
  font-size: 9px;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.kit-product-card__actions {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  grid-template-columns:
    108px
    minmax(
      0,
      1fr
    );
  gap: 8px;
}


/* =========================================================
   CANTIDAD
   ========================================================= */

.kit-product-card__quantity {
  height: 40px;
  display: grid;
  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    )
    32px;
  overflow: hidden;
  border:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  border-radius:
    var(
      --radius-sm,
      7px
    );
  background: #ffffff;
}

.kit-product-card__quantity button {
  width: 32px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color:
    var(
      --text,
      #111111
    );
}

.kit-product-card__quantity button:hover:not(:disabled) {
  background:
    var(
      --bg-soft,
      #f7f7f7
    );
}

.kit-product-card__quantity button svg {
  width: 14px;
  height: 14px;
}

.kit-product-card__quantity input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-left:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  border-right:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  outline: 0;
  appearance: textfield;
  background: #ffffff;
  color:
    var(
      --text,
      #111111
    );
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}


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

.kit-product-card__add {
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #111111;
  border-radius:
    var(
      --radius-sm,
      7px
    );
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.kit-product-card__add:hover:not(:disabled) {
  background: #2a2a2a;
}

.kit-product-card__add svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   PANEL DERECHO · KIT
   ========================================================= */

.kit-builder__kit {
  min-width: 330px;
}


/* =========================================================
   ITEM DEL KIT · HTML ACTUAL
   ========================================================= */

.kit-builder__kit-item {
  min-width: 0;
  display: grid;
  grid-template-columns:
    62px
    minmax(
      0,
      1fr
    )
    auto;
  align-items: start;
  gap: 11px;
  padding: 12px 13px;
  border-bottom:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  background: #ffffff;
}

.kit-builder__kit-item:hover {
  background:
    var(
      --bg-soft,
      #f7f7f7
    );
}


/* =========================================================
   FOTO ITEM DEL KIT
   ========================================================= */

.kit-builder__kit-item-media {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border:
    1px solid
    var(
      --line,
      rgba(
        17,
        17,
        17,
        0.12
      )
    );
  border-radius:
    var(
      --radius-sm,
      7px
    );
  background: #f5f5f5;
  color:
    var(
      --text-muted,
      #7a7a7a
    );
}

.kit-builder__kit-item-media img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

.kit-builder__kit-item-media
> svg {
  width: 22px;
  height: 22px;
}


/* =========================================================
   INFORMACIÓN ITEM
   ========================================================= */

.kit-builder__kit-item-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kit-builder__kit-item-content
> span {
  min-width: 0;
  overflow: hidden;
  color:
    var(
      --accent,
      #d71920
    );
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.kit-builder__kit-item-content
> strong {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color:
    var(
      --text,
      #111111
    );
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* =========================================================
   CANTIDAD ITEM
   ========================================================= */

.kit-builder__kit-item-content
.kit-builder__kit-item-quantity {
  margin-top: 7px;
}


/* =========================================================
   PRECIO / BORRAR ITEM
   ========================================================= */

.kit-builder__kit-item-price {
  min-width: 72px;
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 4px;
  text-align: right;
}

.kit-builder__kit-item-price
small {
  color:
    var(
      --text-muted,
      #7a7a7a
    );
  font-size: 8px;
}

.kit-builder__kit-item-price
strong {
  color:
    var(
      --text,
      #111111
    );
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}


/* =========================================================
   BOTÓN BASURA DEL HTML ACTUAL
   ========================================================= */

.kit-builder__kit-item-price
> button[data-kit-item-remove] {
  width: 28px;
  height: 28px;
  margin-top: 3px;
  padding: 0;
  display: grid;
  place-items: center;
  border:
    1px solid
    transparent;
  border-radius: 50%;
  background: transparent;
  color:
    var(
      --text-muted,
      #7a7a7a
    );
}

.kit-builder__kit-item-price
> button[data-kit-item-remove]:hover {
  border-color:
    rgba(
      180,
      35,
      24,
      0.18
    );
  background:
    var(
      --danger-soft,
      rgba(
        180,
        35,
        24,
        0.08
      )
    );
  color:
    var(
      --danger,
      #b42318
    );
}

.kit-builder__kit-item-price
> button[data-kit-item-remove]
svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   PANEL KIT · ITEMS
   ========================================================= */

.kit-builder__kit-items {
  width: 100%;
  max-height: 460px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}


/* =========================================================
   ESCRITORIO GRANDE
   ========================================================= */

@media (min-width: 1500px) {
  .kit-builder__layout {
    grid-template-columns:
      250px
      minmax(
        0,
        1fr
      )
      350px;
    gap: 22px;
  }

  .kit-builder__kit {
    min-width: 350px;
  }

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


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1350px) and (min-width: 1101px) {
  .kit-builder__layout {
    grid-template-columns:
      220px
      minmax(
        0,
        1fr
      )
      300px;
    gap: 14px;
  }

  .kit-builder__kit {
    min-width: 300px;
  }

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


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .kit-builder__products-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .kit-builder__kit {
    min-width: 0;
  }

  .kit-builder__kit-item {
    grid-template-columns:
      62px
      minmax(
        0,
        1fr
      )
      auto;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .kit-builder__products-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   MOBILE CHICO
   ========================================================= */

@media (max-width: 520px) {
  .kit-builder__products-grid {
    grid-template-columns:
      1fr;
  }

  .kit-product-card {
    grid-template-rows:
      235px
      minmax(
        0,
        1fr
      );
  }

  .kit-product-card__media {
    height: 235px;
    min-height: 235px;
  }

  .kit-product-card__actions {
    grid-template-columns:
      106px
      minmax(
        0,
        1fr
      );
  }

  .kit-builder__kit-item {
    grid-template-columns:
      56px
      minmax(
        0,
        1fr
      );
  }

  .kit-builder__kit-item-media {
    width: 56px;
    height: 56px;
  }

  .kit-builder__kit-item-price {
    grid-column:
      2;
    width: 100%;
    min-width: 0;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}