/* couponsaid web-v2 — page-specific rules */

/* home */
.home-hero .hero__inner { min-height: 480px; }
#cupones .grid { margin-bottom: 8px; }

/* ticket page */
.tickets-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.tickets-layout .card--sticky { position: sticky; top: 84px; }
@media (max-width: 1024px) {
  .tickets-layout { grid-template-columns: 1fr; }
  .tickets-layout .card--sticky { position: static; }
}
.tickets-suspended { text-align: center; padding: 48px 0; }

/* checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
@media (max-width: 1024px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-layout .card + .card { margin-top: 24px; }

/* account */
.account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.account-nav a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; color: var(--ink-soft); }
.account-nav a.is-active, .account-nav a:hover { background: var(--green-100); color: var(--green-900); }
@media (max-width: 768px) { .account-layout { grid-template-columns: 1fr; } .account-nav { display: flex; flex-wrap: wrap; gap: 6px; } }

/* order page */
.order-head { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; margin-bottom: 18px; }
.order-head h2 { margin: 0; }

/* auth pages */
.auth-layout { max-width: 520px; margin: 0 auto; }

/* coupon detail */
.cupon-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .cupon-layout { grid-template-columns: 1fr; } }
.cupon-layout .coupon__badge { position: static; display: inline-block; margin-bottom: 12px; }

/* about */
.about-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.about-grid .card h4 { color: var(--green-800); }
@media (max-width: 1024px) { .about-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .about-grid { grid-template-columns: 1fr; } }

/* 404 */
.notfound { text-align: center; padding: 80px 16px; }
