/* =====================================================================
   assets/deals.css — deals page only (loaded via $page['styles']).
   Reuses the homepage card design (.card, .tabs/.tab) from style.css.
   ===================================================================== */

/* compact hero */
.phero.deals-hero{padding-block:clamp(26px,4vw,44px) clamp(14px,2vw,22px)}
.phero.deals-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.04}
.phero.deals-hero .lede{max-width:40em}

/* store tabs + count */
.dp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:20px}
.dp-bar .tabs{flex-wrap:wrap}

/* card grid (same .card as the homepage rail) */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:18px;align-items:stretch}
.deal-grid .card{width:auto;max-width:none;min-width:0;height:100%}
.deal-grid .card-img{overflow:hidden;background:#fff}
.deal-grid .card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box}
.deal-grid .card-img .store-tag,.deal-grid .card-img .ribbon,.deal-grid .card-img .earn-tag{z-index:1}
.deal-grid .card{overflow:hidden}
.deal-grid .card-body h3{overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.deal-grid .empty-note{grid-column:1/-1;text-align:center;padding:48px 12px}

/* loading placeholders */
.dp-skel{min-height:330px;background:linear-gradient(100deg,var(--surface) 30%,var(--orange-wash) 50%,var(--surface) 70%);background-size:200% 100%;animation:dpShimmer 1.3s linear infinite;border:1px solid var(--line);border-radius:18px}
@keyframes dpShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dp-skel{animation:none}}

/* infinite scroll status */
.dp-status{min-height:56px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;font:600 13px var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.dp-status:empty{display:none}
.dp-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--orange-deep);animation:dpSpin .7s linear infinite}
@keyframes dpSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dp-spin{animation-duration:2s}}
.dp-retry{margin-left:8px;border:0;background:none;color:var(--orange-deep);font:600 inherit var(--body);text-decoration:underline;cursor:pointer}

/* phones: two cards per row */
@media (max-width:640px){
  .deal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .deal-grid .card-body{padding:10px 12px}
  .deal-grid .card-body h3{font-size:13.5px}
  .deal-grid .card-foot button{padding:9px 6px;font-size:12.5px;gap:5px}
  .dp-bar{margin-bottom:14px}
}
.deal-grid .card-img[data-go],.deal-grid .card-body h3[data-go]{cursor:pointer}
.deal-grid .card-body h3[data-go]:hover{color:var(--orange-deep)}
.deal-grid .card-img[data-go]:focus-visible,.deal-grid .card-body h3[data-go]:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px;border-radius:6px}