/* Páginas de la tienda en Blade (legales, carrito, checkout). Usa los tokens de base.css. */
:root { --danger: #E5735F; } /* solo mensajes de error; el naranja de la marca queda reservado a los descuentos */

.page { max-width: 1100px; margin: 0 auto; padding: 150px clamp(16px, 5vw, 80px) 96px; }
.page__title { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; margin-bottom: 32px; }
.page__sub { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 32px 0 12px; }
.muted { color: rgba(255,255,255,.6); line-height: 1.7; margin: 8px 0 20px; }
.alert { border-left: 2px solid var(--danger); padding: 12px 16px; margin-bottom: 24px; background: rgba(229,115,95,.08); line-height: 1.6; }

/* Textos legales */
.legal { max-width: 74ch; line-height: 1.75; color: rgba(255,255,255,.85); }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; margin-bottom: 28px; color: var(--white); }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 40px 0 12px; color: var(--white); }
.legal h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 28px 0 8px; }
.legal p, .legal ul, .legal ol { margin-bottom: 14px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal h2[id] { scroll-margin-top: 110px; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Botón y enlaces */
.btn { display: inline-block; background: var(--gold); color: var(--black); border: 0; padding: 18px 34px; cursor: pointer;
       font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible, .link:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.link { background: none; border: 0; color: var(--gold); font: 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* Líneas de pedido y totales */
.lines { list-style: none; border-top: 1px solid var(--line); }
.line { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line--sm { grid-template-columns: 1fr auto; padding: 12px 0; font-size: 14px; }
.line__name { font-family: var(--serif); font-size: 22px; }
.line__price { font-weight: 600; }
.sum { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
.sum--total { border-top: 1px solid var(--gold); margin-top: 6px; font-size: 18px; }
.sum b { font-weight: 600; }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.form fieldset { border: 0; margin-bottom: 36px; }
.form legend { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.form label { display: block; margin-top: 20px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.form input:not([type="checkbox"]), .form select { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--white);
       font: 16px var(--sans); padding: 12px 0; outline: none; border-radius: 0; }
.form select option { background: var(--black); color: var(--white); }
.form input:not([type="checkbox"]):focus, .form select:focus { border-bottom-color: var(--gold); }
.help { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 6px; }
.err { font-size: 13px; color: var(--danger); margin-top: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); flex: none; }
.form .check label { margin: 0; font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.85); line-height: 1.6; }
.form .check label a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.summary { border: 1px solid var(--line); padding: 28px; position: sticky; top: 120px; }
.summary h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin-bottom: 12px; }

@media (max-width: 800px) {
  .page { padding-top: 100px; }
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
  .line { grid-template-columns: 1fr auto; }
}

/* Carrito: foto, cantidad editable */
.line--cart { grid-template-columns: 96px 1fr auto; gap: 8px 24px; align-items: start; }
.line--cart .line__photo { grid-row: 1 / span 2; width: 96px; aspect-ratio: 1; background: rgba(255,255,255,.06); overflow: hidden; display: block; }
.line--cart .line__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.line--cart .line__info { min-width: 0; }
.line--cart .line__name a { color: inherit; text-decoration: none; }
.line--cart .line__name a:hover { color: var(--gold); }
.line--cart .line__unit { margin: 4px 0 12px; }
.line--cart .line__rm { grid-column: 3; justify-self: end; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 40px; height: 40px; background: none; border: 0; color: var(--white); font-size: 20px; cursor: pointer; }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty button:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.qty output { min-width: 44px; text-align: center; font-weight: 600; }
.qty__note { color: var(--gold); font-size: 13px; margin-top: 8px; min-height: 1.2em; }
.cart-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
@media (max-width: 800px) {
  .line--cart { grid-template-columns: 72px 1fr; gap: 6px 16px; }
  .line--cart .line__photo { width: 72px; }
  .line--cart .line__name { font-size: 19px; overflow-wrap: anywhere; }
  .line--cart .line__price { grid-column: 2; grid-row: 2; }
  .line--cart .line__rm { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* Mensaje de envío gratis (carrito y checkout) */
.ship-msg { color: var(--gold); font-size: 14px; line-height: 1.5; margin: 4px 0 12px; }
.ship-msg--ok { color: #8fd19e; }

/* Autocompletado de Chrome: sin fondo azul claro; se mantiene el fondo oscuro y el texto claro */
.form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus, .form input:-webkit-autofill:active,
.form select:-webkit-autofill, .form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  box-shadow: 0 0 0 1000px var(--black) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--black) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.form input:autofill, .form select:autofill { -webkit-text-fill-color: var(--white); box-shadow: 0 0 0 1000px var(--black) inset; }