/* Deal cards, shared by /deals, /prime-day and the homepage roundup.
 *
 * Every component rule is scoped under `.gd-cards`, which the mount element
 * carries on all three pages. The scope is not decoration: this file defines
 * `.card`, `.act`, `.tile` and `.thread`, and index.html is an 887-line
 * document with its own style block, so an unscoped `.card` here would be one
 * careless class name away from silently restyling something else. Page chrome
 * (.feed-page, .feed-disclosure) stays global because only the two standalone
 * pages use it.
 *
 * Cards carry our own writing and a tagged link; never a product title, price
 * or photo. See server/dealsFeed.js for why.
 */
.feed-page { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; color: #1a1a1a; line-height: 1.7; }
.feed-page .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2563EB; margin-bottom: 10px; }
.feed-page h1 { font-size: 32px; font-weight: 800; margin: 0 0 12px; line-height: 1.2; }
.feed-page .lede { font-size: 17px; color: #4b5563; margin: 0 0 8px; }
.feed-disclosure { font-size: 13px; color: #6b7280; margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid #E5E7EB; }

.gd-cards .card { border: 1px solid #E5E7EB; border-radius: 14px; padding: 18px; margin: 0 0 16px; background: #fff; }
.gd-cards .card-head { display: flex; gap: 14px; align-items: flex-start; }
/* Our own artwork: a CSS tile with the category initial. Never a product photo. */
.gd-cards .tile { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; display: flex;
        align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
        color: #fff; background: #64748B; }
.gd-cards .tile[data-c="electronics"], .gd-cards .tile[data-c="computers"] { background: linear-gradient(135deg,#2563EB,#1E3A8A); }
.gd-cards .tile[data-c="headphones"] { background: linear-gradient(135deg,#7C3AED,#4C1D95); }
.gd-cards .tile[data-c="home"], .gd-cards .tile[data-c="garden"] { background: linear-gradient(135deg,#059669,#065F46); }
.gd-cards .tile[data-c="kitchen"], .gd-cards .tile[data-c="grocery"] { background: linear-gradient(135deg,#EA580C,#9A3412); }
.gd-cards .tile[data-c="beauty"], .gd-cards .tile[data-c="health"] { background: linear-gradient(135deg,#DB2777,#831843); }
.gd-cards .tile[data-c="clothing"], .gd-cards .tile[data-c="toys"] { background: linear-gradient(135deg,#0891B2,#164E63); }
.gd-cards .tile[data-c="sports"], .gd-cards .tile[data-c="automotive"] { background: linear-gradient(135deg,#DC2626,#7F1D1D); }
.gd-cards .tile[data-c="tools"], .gd-cards .tile[data-c="office"] { background: linear-gradient(135deg,#475569,#1E293B); }
.gd-cards .tile[data-c="pets"] { background: linear-gradient(135deg,#CA8A04,#713F12); }

.gd-cards .card-label { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.gd-cards .card-meta { font-size: 13px; color: #6b7280; margin: 0; }
.gd-cards .card-badge { display: inline-block; font-size: 13px; font-weight: 600; color: #065F46; background: #ECFDF5;
              border: 1px solid #A7F3D0; border-radius: 999px; padding: 4px 10px; margin: 12px 0 0; }
.gd-cards .card-note { font-size: 15px; color: #374151; margin: 14px 0 16px; }
.gd-cards .card-go { display: block; text-align: center; background: #F5A623; color: #1a1a1a; font-weight: 700;
           font-size: 16px; text-decoration: none; padding: 13px 18px; border-radius: 10px; min-height: 44px; }
.gd-cards .card-actions { display: flex; gap: 10px; margin-top: 12px; }
.gd-cards .act { flex: 1; min-height: 44px; border: 1px solid #D1D5DB; background: #fff; border-radius: 10px;
       font-size: 15px; font-weight: 600; color: #374151; cursor: pointer; }
.gd-cards .act:hover { background: #F9FAFB; }
.gd-cards .act[aria-pressed="true"] { border-color: #2563EB; color: #2563EB; background: #EFF6FF; }

.gd-cards .thread { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F3F4F6; }
.gd-cards .thread[hidden] { display: none; }
.gd-cards .cmt { margin: 0 0 12px; }
.gd-cards .cmt-who { font-size: 13px; font-weight: 700; color: #111827; }
.gd-cards .cmt-when { font-size: 12px; color: #9CA3AF; font-weight: 400; margin-left: 6px; }
.gd-cards .cmt-body { font-size: 15px; color: #374151; margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gd-cards .cmt-empty { font-size: 14px; color: #9CA3AF; margin: 0 0 12px; }
.gd-cards .cmt-form input, .gd-cards .cmt-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #D1D5DB;
       border-radius: 8px; padding: 10px; font: inherit; font-size: 15px; margin-bottom: 8px; }
.gd-cards .cmt-form textarea { min-height: 72px; resize: vertical; }
.gd-cards .cmt-form button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 8px; background: #2563EB;
       color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.gd-cards .cmt-form button[disabled] { opacity: .5; cursor: default; }
.gd-cards .cmt-error { font-size: 14px; color: #B91C1C; margin: 0 0 8px; }
.gd-cards .cmt-rules { font-size: 12px; color: #9CA3AF; margin: 8px 0 0; }

.gd-cards .feed-state { font-size: 15px; color: #6b7280; padding: 24px 0; }
.feed-page .fine { margin-top: 40px; padding-top: 20px; border-top: 1px solid #E5E7EB; font-size: 13px; color: #6b7280; }
.feed-page .fine a { color: #2563EB; }

.gd-cards .feed-section { margin: 0 0 8px; }
.gd-cards .feed-h2 { font-size: 20px; font-weight: 800; margin: 28px 0 12px; }
.gd-cards .feed-count { font-size: 14px; font-weight: 600; color: #6b7280; margin-left: 6px; }