html,body{margin:0;padding:0}
#categories{padding-top:var(--space-global-to-h1)}
#categories .section-header{margin:0 0 32px 0}
#categories .section-title{
font-family:var(--font-main);
font-weight:700;
font-size:clamp(28px,3vw,30px);
line-height:1.25;
letter-spacing:-0.01em;
color:var(--color-black);
margin:18px 0 0;
}
#categories .section-description{color:var(--color-light-black);margin:8px 0 0}
#categories .categories-grid{display:flex;flex-wrap:wrap;align-items:stretch;margin:var(--space-title-to-coupons) 0 0 0;gap:24px;--gap:24px;--cols:5}
#categories .categories-grid>a{display:block;min-width:0;text-decoration:none;flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols));max-width:calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols))}
#categories .category-block{position:relative;height:clamp(220px,21vw,286px);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:var(--radius-md);overflow:hidden;transition:transform .2s}
#categories .categories-grid a:hover .category-block{transform:translateY(-2px)}
#categories .category-overlay{position:absolute;left:0;right:0;bottom:0;min-height:64px;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.70) 100%);border-radius:0 0 var(--radius-md) var(--radius-md);display:flex;align-items:flex-end}
#categories .category-title{margin:0;padding:0 16px 14px;font-weight:700;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45);overflow-wrap:anywhere;max-width:100%}
#categories .category-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:992px){#categories .categories-grid{--cols:3}}
@media (max-width:768px){#categories .categories-grid{--cols:2;gap:24px;--gap:24px}#categories .category-title{font-size:17px}}
@media (max-width:575.98px){#categories .categories-grid{--cols:2;gap:16px;--gap:16px}}
/* your existing CSS kept intact */
.hidden-card {
display: none;
}
.show-more-container {
text-align: center;
margin-top: 20px;
}
.show-more-btn, .show-less-btn {
background: #007bff;
color: #fff;
padding: 10px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
}
.show-more-btn:hover, .show-less-btn:hover {
background: #0056b3;
}
/* keep all your popup styles (cp-*, dp-*) — omitted here for brevity in this message,
but in your file keep the full CSS that you had earlier */
.coupon-pop.final-600{font:400 16px/26px "Apercu Pro","Apercu",system-ui,-apple-system,sans-serif;color:#202124}
.coupon-pop.final-600 *{box-sizing:border-box}
:root{
--blue:#286CAC; /* Copy button fill */
--navy:#19446C; /* code/link navy */
--line-logo:#F0F0F0; /* logo + thumbs border */
--line-code:#EDEDED; /* coupon field border */
--muted:#6B7280; /* secondary text */
--card:#F9F9F9; /* modal background */
--overlay:rgba(12,20,38,.45);
--radius:36px; /* card corners */
--w:600px; /* width tuned for 1-line titles */
--red:#D92C3A; /* icon accents */
--green:#1F8F55;
}
/* Toggle (no framework, no extra JS) */
.cp-toggle{display:none}
/* Backdrop (blur only) */
.cp-ov{
position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(10px);
opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:1000;
}
.cp-toggle:checked ~ .cp-ov{opacity:1; pointer-events:auto}
/* Dialog shell */
.cp-wrap{
position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:9vh;
opacity:0; transform:translateY(-10px); transition:opacity .18s ease, transform .18s ease; z-index:1001;
}
.cp-toggle:checked ~ .cp-wrap{opacity:1; transform:none}
/* Card (no shadows) + silhouette height */
.cp-card{
width:100%;
background:var(--card); border:1px solid var(--line-logo); border-radius:var(--radius-lg);
overflow:hidden; position:relative; min-height:540px;
max-height:calc(100vh - 12vh); /* prevent overflow on short screens */
box-shadow:0 24px 60px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.05);
}
.cp-in{padding:40px 36px 26px}
/* Close (bigger icon and hit area) */
.cp-x{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:999px;
display:inline-flex; align-items:center; justify-content:center; border: none; color:#334155;background: transparent; cursor:pointer}
.cp-x:hover{background:#F1F5F9}
.cp-x svg{width:22px;height:22px}
/* Logo */
.cp-logoWrap{display:flex; justify-content:center}
.cp-logo{box-shadow:0 0 0 1px rgba(0,0,0,.05); width:104px;height:104px;border-radius:50%;border:1px solid var(--line-logo);
background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cp-logo img{width:72%;height:72%;object-fit:contain}
@media (max-width:600px){ .cp-logo{width:96px;height:96px} }
/* Title (21px for 1-line) */
.cp-title{margin:24px 0 14px;text-align:center;font:700 21px/1.5 "Apercu Pro","Apercu";color:#1a1a1a}
/* Code row: 40px from title; cap width 450px */
.cp-row{
margin:40px auto 20px; max-width:450px;
display:flex; align-items:center; gap:12px; padding:12px 14px;
background:#fff; border:1px solid var(--line-code); border-radius:999px;
box-shadow:0 0 0 1px rgba(0,0,0,.05);
}
.cp-code{
display:inline-flex; align-items:center; gap:6px; /* copy icon gap */
padding:10px 18px; border-radius:999px; background:#fff;
font:700 19px/1 "Apercu Pro","Apercu"; color:var(--navy);
}
/* Copy icon (navy) before code — same visual height as code */
.ico{width:19px;height:19px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ico-copy{stroke:var(--navy)}
/* Copy button — text only, blue fill, WHITE text, 25px padding, 2px ring */
.cp-copy{
margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
height:44px; padding:0 25px; border:2px solid var(--line-logo); border-radius:999px;
background:var(--blue); color:#fff !important; font:700 14px/1 "Apercu Pro","Apercu";
text-decoration:none; cursor:pointer;
}
.cp-copy:hover{background:#214E86}
.cp-copy:visited,.cp-copy:focus,.cp-copy:active{color:#fff !important}
/* Note with store link */
.cp-note{margin:12px 0 0;text-align:center;font:400 15px/1.6 "Apercu Pro","Apercu";color:var(--muted)}
.cp-note a{color:var(--navy);font-weight:700;text-decoration:none}
.cp-note a:hover{text-decoration:underline}
/* Feedback — more gap from note; larger thumbs; Yes/No labels; borders #F0F0F0 */
.cp-foot{margin:40px auto 12px;max-width:560px;text-align:center}
.cp-q{font:700 16px/1 "Apercu Pro","Apercu";color:#1a1a1a; margin-bottom:16px}
.cp-vote{display:flex;gap:14px;justify-content:center}
.cp-pill{display:inline-flex;align-items:center;gap:8px;min-height:43px;padding:0 18px;border-radius:999px;
border:1px solid var(--line-logo);background:#fff;color:#1a1a1a;font:700 14px/1 "Apercu Pro","Apercu";cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.05);}
.cp-pill:hover{background:#F1F5F9}
/*.cp-pill svg{width:18px;height:18px;stroke-width:2;fill:none}*/
.thumb-down{stroke:var(--red)}
.thumb-up {stroke:var(--green)}
.cp-thumbup,.cp-thumbdown{width:19px;height:19px;color:#1a1a1a;}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.cp-ov, .cp-wrap{transition:none !important}
}
.deal-pop.final-600{font:400 16px/26px "Apercu Pro","Apercu",system-ui,-apple-system,sans-serif;color:#202124}
.deal-pop.final-600 *{box-sizing:border-box}
:root{
--blue:#286CAC; /* CTA fill */
--navy:#19446C; /* link/navy text */
--line-logo:#F0F0F0; /* logo + thumbs border */
--card:#F9F9F9; /* card bg */
--overlay:rgba(12,20,38,.45);
--radius:36px; /* corners */
--w:600px; /* SAME width as coupon popup */
--muted:#202124;
--red:#D92C3A; --green:#1F8F55;
}
/* toggle (no JS) */
.dp-toggle{display:none}
/* overlay (blur only) */
.dp-ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(10px);
opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:1000}
.dp-toggle:checked~.dp-ov{opacity:1;pointer-events:auto}
/* shell */
.dp-wrap{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:9vh;
opacity:0;transform:translateY(-10px);transition:opacity .18s ease,transform .18s ease;z-index:1001}
.dp-toggle:checked~.dp-wrap{opacity:1;transform:none}
/* card (no shadow) + silhouette height */
.dp-card{width:min(var(--w),92vw);background:var(--card);border:1px solid var(--line-logo);
border-radius:var(--radius);overflow:hidden;position:relative;min-height:540px;max-height:calc(100vh - 12vh)}
.dp-in{padding:40px 36px 26px}
/* close (bigger X + hit area) */
.dp-x{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;color:#334155;cursor:pointer}
.dp-x:hover{background:#F1F5F9}
.dp-x svg{width:22px;height:22px}
/* logo (border-only; inset image) */
.dp-logoWrap{display:flex;justify-content:center}
.dp-logo{width:104px;height:104px;border-radius:50%;border:1px solid var(--line-logo);
background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dp-logo img{width:72%;height:72%;object-fit:contain}
@media (max-width:600px){ .dp-logo{width:96px;height:96px} }
/* title (1-line) */
.dp-title{margin:24px 0 14px;text-align:center;font:700 21px/1.5 "Apercu Pro","Apercu";color:#0f172a}
/* ===== DEAL CTA (replaces code row) ===== */
.dp-ctaWrap{display:flex;justify-content:center;margin:40px 0 12px} /* 40px from title to CTA */
.dp-cta{
display:inline-flex;align-items:center;justify-content:center;
min-width:260px;height:56px;padding:0 32px;border-radius:999px;
background:var(--blue);color:#fff !important;font:700 16px/1 "Apercu Pro","Apercu";
text-decoration:none;cursor:pointer;border:2px solid var(--line-logo);
}
.dp-cta:hover{background:#214E86}
/* note with store link (navy) — sits 12px below CTA */
.dp-note{margin:12px 0 0;text-align:center;font:600 15px/1.6 "Apercu Pro","Apercu";color:var(--muted)}
.dp-note a{color:var(--navy);font-weight:700;text-decoration:none}
.dp-note a:hover{text-decoration:underline}
/* feedback — same look as coupon popup; labels included */
.dp-foot{margin:40px auto 12px;max-width:560px;text-align:center}
.dp-q{font:700 16px/1 "Apercu Pro","Apercu";color:#0f172a;margin-bottom:16px}
.dp-vote{display:flex;gap:14px;justify-content:center}
.dp-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;
border:1px solid var(--line-logo);background:#fff;color:#0f172a;font:700 14px/1 "Apercu Pro","Apercu";cursor:pointer}
.dp-pill:hover{background:#F1F5F9}
.dp-pill svg{width:18px;height:18px;stroke-width:2;fill:none}
.thumb-down{stroke:#D92C3A}
.thumb-up {stroke:#1F8F55}