/* =============================================
   Tramos de cantidad — SDI
   Filas seleccionables de la caja de compra de la ficha.
   ============================================= */

/* Se declara como contenedor de consulta porque quien decide si la fila cabe
   no es la ventana sino esta caja: en escritorio la columna de compra baja de
   200px mientras la ventana sigue teniendo 1200px o más. */
.sdiqd-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  container-type: inline-size;
  container-name: sdiqd;
}

/* Cada tramo es un botón, así que hay que desandar los estilos de botón del
   tema y dejarlo como una fila de formulario. */
.sdiqd-tier {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "radio units saving price";
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
  color: #502c1e;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.sdiqd-tier:hover {
  border-color: #2ad2c9;
}

.sdiqd-tier.is-selected {
  border-color: #2ad2c9;
}

/* Radio dibujado a mano: no hay <input>, la selección la lleva el JS y se
   refleja en aria-pressed. */
.sdiqd-tier-radio {
  grid-area: radio;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.sdiqd-tier.is-selected .sdiqd-tier-radio {
  border: 5px solid #2ad2c9;
}

.sdiqd-tier-units {
  grid-area: units;
  font-weight: 600;
  white-space: nowrap;
}

.sdiqd-tier-saving {
  grid-area: saving;
  font-size: 13px;
  color: #FF425B;
  white-space: nowrap;
  font-weight: 600;
}

/* El precio y el precio unitario comparten celda, apilados a la derecha, para
   que las cifras de todos los tramos queden alineadas entre sí. */
.sdiqd-tier-price {
  grid-area: price;
  justify-self: end;
  font-weight: 700;
  white-space: nowrap;
}

.sdiqd-tier-per-unit {
  grid-area: price;
  grid-row: 2;
  justify-self: end;
  font-size: 12px;
  color: #8c8c8c;
  white-space: nowrap;
}

/* Los importes del tramo son sin impuestos, igual que el precio principal de
   la ficha, así que llevan el mismo rótulo "+ IVA". */
.sdiqd-tier-tax {
  font-weight: 400;
  font-size: 11px;
  color: #8c8c8c;
}

/* Aviso de unidades: dorado, como en el diseño. */
.sdiqd-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 12px;
  color: #B39B80;
}

/* Primer escalón: la fila de una línea ya no cabe. El ahorro baja a la columna
   izquierda, debajo de las unidades, y el precio por unidad debajo del total. */
@container sdiqd (max-width: 340px) {
  .sdiqd-tier {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "radio units  price"
      "radio saving perunit";
  }

  .sdiqd-tier-per-unit {
    grid-area: perunit;
    grid-row: auto;
  }
}

/* Segundo escalón: tampoco caben dos columnas, se apila todo. */
@container sdiqd (max-width: 260px) {
  .sdiqd-tier {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "radio units"
      ".     saving"
      ".     price"
      ".     perunit";
  }

  .sdiqd-tier-price,
  .sdiqd-tier-per-unit {
    justify-self: start;
  }
}