/* Carrito con el lenguaje visual de la landing. */

.af-shop{min-height:100vh;display:flex;flex-direction:column}
.af-shop .af-cart{flex:1}

.af-cart h1{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,3.6rem);line-height:.95;margin:.4rem 0 2rem;
  text-shadow:0 0 24px rgba(139,92,246,.35)}

.af-lines{list-style:none;border-top:1px solid var(--line)}
.af-line{display:grid;grid-template-columns:88px 1fr auto auto;gap:1.4rem;align-items:center;
  padding:1.4rem 0;border-bottom:1px solid var(--line)}
.af-line-media img{width:88px;height:88px;object-fit:cover;object-position:top;
  border-radius:10px;border:1px solid var(--line)}
.af-line-title{font-weight:700;font-size:.98rem;display:block}
.af-line-title:hover{color:var(--aura-soft)}
.af-line-variant,.af-line-unit{color:var(--muted);font-size:.82rem;margin-top:.25rem}
.af-line-qty{display:grid;gap:.5rem;justify-items:center}
.af-line-qty .qty{height:46px}
.af-line-qty .qty button,
.af-line-qty .qty .af-step{width:38px}

/* Los pasos - / + son enlaces, pero deben verse igual que los botones
   del selector de cantidad de la ficha de producto. */
.qty .af-step{
  display:grid;
  place-items:center;
  height:100%;
  width:46px;
  color:var(--text);
  font-size:1.2rem;
  font-family:inherit;
  user-select:none;
}
.qty .af-step:hover{color:var(--aura-soft)}
.af-remove{display:inline-block;background:none;color:var(--muted);font-size:.75rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0}
.af-remove:hover{color:var(--debt)}
.af-line-total{font-family:var(--display);font-size:1.5rem;min-width:5.5rem;text-align:right}

.af-cart-foot{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:start;
  margin-top:2rem}
.af-total-row{display:flex;align-items:baseline;gap:1rem;justify-content:space-between;
  max-width:26rem}
.af-total-row span:first-child{font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.af-total-num{font-family:var(--display);font-size:2.2rem;color:var(--victoria);
  text-shadow:0 0 20px rgba(255,209,102,.45)}
.af-total-note{color:var(--muted);font-size:.82rem;margin-top:.6rem;max-width:34ch}

.af-cart-actions{display:grid;gap:.7rem;justify-items:stretch;min-width:16rem}
.af-checkout{height:54px;font-size:1.25rem;width:100%}
.af-keep{text-align:center;color:var(--muted);font-size:.82rem;font-weight:700;
  letter-spacing:.06em;text-decoration:underline}
.af-keep:hover{color:var(--text)}
.af-cart-back{margin-top:1.6rem}

.af-cart .trust{margin-top:2.4rem}

@media(max-width:760px){
  .af-line{grid-template-columns:64px 1fr;grid-template-areas:"media info" "qty total";
    row-gap:1rem}
  .af-line-media{grid-area:media}
  .af-line-media img{width:64px;height:64px}
  .af-line-info{grid-area:info}
  .af-line-qty{grid-area:qty;justify-items:start}
  .af-line-total{grid-area:total;text-align:right;align-self:center}
  .af-cart-foot{grid-template-columns:1fr}
  .af-cart-actions{min-width:0}
}

/* Línea sin imagen (el producto aún no tiene ninguna en Shopify): se quita la
   columna del medio para que el título no quede indentado contra un hueco. */
.af-line--sin-imagen{grid-template-columns:1fr auto auto}
@media(max-width:760px){
  .af-line--sin-imagen{grid-template-columns:1fr auto;grid-template-areas:"info info" "qty total"}
}