/* =====================================================================
 * SlashCouponCode — store page (loaded only on stores/brands taxonomy).
 * CouponMoto structure. Tokens sampled from the live site.
 * All rules are scoped under .scc-store-page so nothing leaks site-wide.
 * ===================================================================== */

.scc-store-page{
  --purple:#746093; --magenta:#A24592; --grad:linear-gradient(to right,#746093,#A24592);
  --gold:#FFD84D; --gold-deep:#F2C200; --gold-ink:#3a2d00;
  --green:#7AD03A; --green-d:#3f6d12; --green-bg:#eef7e4;
  --purple-bg:#f0ebf5; --coral-bg:#fbeee8; --coral-d:#9a3d1c;
  --ink:#2b2b30; --muted:#7a7a85; --line:#e9e7ef; --bg:#f4f2f8;
}

.scc-store-page,
.scc-store-page .scc-main,
.scc-store-page .scc-side{ color:var(--ink); }

/* ---- Content width + top spacing ----
 * CouponMoto constrains content to ~1150px centered; we do the same so the
 * coupons don't stretch edge-to-edge on desktop. */
.scc-store-page{ max-width:1180px; margin-left:auto; margin-right:auto; margin-top:0; padding-top:8px !important; }

/* ---- Breadcrumb ---- */
.scc-crumb{ font-size:12.5px; color:var(--muted); margin:0 0 10px; }
.scc-crumb a{ color:var(--purple); text-decoration:none; }
.scc-crumb span{ margin:0 2px; }

/* ---- Compact store summary ---- */
.scc-summary{ display:flex; gap:14px; align-items:flex-start; }
.scc-summary-logo{ width:108px; height:108px; flex:none; border:1px solid var(--line); border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; }
.scc-summary-logo img{ width:100%; height:100%; object-fit:contain; }
.scc-summary-initials{ font-size:30px; font-weight:800; color:var(--purple); }
.scc-h1{ font-size:21px; font-weight:800; color:var(--ink); line-height:1.25; margin:0; }
.scc-sub{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.scc-trust{ font-size:12.5px; color:var(--muted); margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; }
.scc-trust b{ color:var(--ink); }
.scc-trust .scc-trust-v{ color:var(--green-d); font-weight:700; white-space:nowrap; }
.scc-trust .scc-trust-upd{ color:var(--purple); font-weight:700; white-space:nowrap; }
.scc-trust .scc-updated-date{ white-space:nowrap; }
.scc-trust .scc-sep{ margin:0; color:var(--line); }

/* ---- Filter tabs (All / Coupons / Offers) ---- */
.scc-tabs{ display:flex; gap:8px; margin:16px 0 4px; background:#fdf9e8; border:1px solid #f3ecc9; padding:8px; border-radius:10px; flex-wrap:wrap; }
.scc-tab{ font-size:13px; padding:7px 18px; border-radius:8px; color:var(--ink); background:#fff; border:1px solid var(--line); cursor:pointer; font:inherit; line-height:1; }
.scc-tab .scc-tab-n{ font-size:11px; opacity:.7; margin-left:4px; }
.scc-tab.on{ background:var(--purple); color:#fff; font-weight:700; border-color:var(--purple); }
.scc-tab.on .scc-tab-n{ opacity:.85; }

/* ---- Coupon list (single column) ---- */
.scc-list{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }

/* ---- Coupon card (GrabOn-style: discount rail | body | CTA) ---- */
.scc-card{ display:grid; grid-template-columns:84px 1fr; grid-template-areas:"left body" "cta cta"; gap:12px 14px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:16px 16px; background:#fff; box-shadow:0 1px 6px rgba(60,40,90,.05); }
.scc-card:first-child{ border:1.5px solid var(--purple); box-shadow:0 3px 14px rgba(116,96,147,.12); }
.scc-card.scc-hide{ display:none; }
.scc-card.scc-expired{ opacity:.72; }
/* left discount rail */
.scc-card-left{ grid-area:left; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-right:1.5px dashed var(--line); padding-right:10px; min-height:54px; }
.scc-disc-big{ font-size:16px; font-weight:800; color:var(--magenta); line-height:1.14; }
/* body */
.scc-card-body{ grid-area:body; min-width:0; }
.scc-badges{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:5px; }
/* Badges — bordered pills (Verified, Exclusive, Recommended, Free Shipping, etc.) */
.scc-badge{ font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:20px; border:1px solid transparent; white-space:nowrap; text-transform:uppercase; letter-spacing:.02em; display:inline-flex; align-items:center; gap:3px; line-height:1.4; }
.scc-badge-verified{ text-transform:none; color:var(--green-d); background:var(--green-bg); border-color:#b8e59a; }
.scc-badge-excl{ color:var(--coral-d); background:var(--coral-bg); border-color:#e6c3ad; }
.scc-badge-rec{ color:#1e5fa8; background:#e7f0fb; border-color:#b6d3f0; }
.scc-badge-best{ color:var(--gold-ink); background:#fdf1c8; border-color:#e6d488; }
.scc-badge-generic{ color:var(--purple); background:var(--purple-bg); border-color:#cbbfe0; }
.scc-badge-ship{ text-transform:none; color:#0a7d5a; background:#e6f7f0; border-color:#a9e0cd; }
.scc-title{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.35; margin:0; }
/* coupon description shown in the card (2-line clamp preview) */
.scc-card-desc{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:5px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Show Details expander (GrabOn style) */
.scc-details-toggle{ background:none; border:0; padding:0; margin-top:6px; font:inherit; font-size:12px; font-weight:700; color:var(--purple); cursor:pointer; }
.scc-details-toggle .scc-caret{ display:inline-block; transition:transform .2s; }
.scc-details-toggle[aria-expanded="true"] .scc-caret{ transform:rotate(180deg); }
.scc-card-fulldesc{ margin-top:8px; padding-top:9px; border-top:1px dashed var(--line); font-size:12.5px; color:#4a4a55; line-height:1.6; }
.scc-card-fulldesc p{ margin:0 0 7px; } .scc-card-fulldesc p:last-child{ margin-bottom:0; }
.scc-card-fulldesc ul, .scc-card-fulldesc ol{ margin:6px 0 6px 18px; } .scc-card-fulldesc li{ margin:3px 0; }
.scc-card-fulldesc strong{ color:var(--ink); }
/* structured bullet list built from a plain-paragraph description */
.scc-detail-list{ margin:2px 0 0 18px; } .scc-detail-list li{ margin:5px 0; color:#4a4a55; }
/* "How to use" sub-block inside the details */
.scc-detail-how{ margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); }
.scc-detail-how > strong{ display:block; font-size:12.5px; color:var(--ink); margin-bottom:2px; }
.scc-cta{ grid-area:cta; }

/* Desktop: single row — rail | body | CTA */
@media (min-width:768px){
  .scc-card{ grid-template-columns:128px 1fr 205px; grid-template-areas:"left body cta"; column-gap:20px; }
  .scc-card-left{ min-height:66px; }
  .scc-disc-big{ font-size:19px; }
}

/* ---- CTA: the parent reveal/affiliate button, restyled gold ----
 * Colour is also forced in store.js because the parent inlines the store
 * colour with !important on some buttons. Layout + shape handled here. */
.scc-cta{ margin-top:0; }
.scc-cta .coupon-button,
.scc-cta .code-button-parent,
.scc-cta .app-code-button-parent{ display:block !important; width:100%; padding:0 !important; border-radius:10px; background:var(--gold) !important; background-image:none !important; }
.scc-cta .code-button,
.scc-cta .app-code-button,
.scc-cta .deal-button,
.scc-cta .print-button{ display:block !important; width:100%; border:none !important; border-radius:9px !important; background:var(--gold) !important; background-image:none !important; color:var(--gold-ink) !important; font-size:13px; font-weight:800; padding:10px 14px !important; box-shadow:0 2px 4px rgba(60,40,90,.18); text-align:center; }
.scc-cta .code-button:hover,
.scc-cta .app-code-button:hover,
.scc-cta .deal-button:hover{ background:#ffdf66 !important; }
/* Revealed code box (after click, inline reveal / already-visited state) */
.scc-cta .revealed-button{ border:1.5px dashed var(--purple) !important; border-radius:10px; background:#faf8fc; font-weight:800; letter-spacing:1px; color:var(--purple); }
.scc-cta .see-applicable{ margin-top:6px; }
.scc-cta .see-applicable a{ color:var(--purple); font-size:12px; }

/* ---- Peel effect — mockup style, built with FLEXBOX (reliable at any width) ----
 * Bright gold (#FFD84D) button (left, flexes) + dashed code-peek box (right) with
 * a folded gold corner on the button. store.js injects only the code box. Flex is
 * used instead of absolute positioning so it lays out correctly everywhere. */
.scc-cta .code-button-parent.scc-peel{ display:flex !important; align-items:stretch !important; height:44px; background:transparent !important; padding:0 !important; box-shadow:none !important; overflow:visible; border-radius:9px; filter:drop-shadow(0 2px 4px rgba(60,40,90,.18)); }
/* the bright gold button (flexes to fill the left) */
.scc-cta .scc-peel .code-button{ position:relative !important; flex:1 1 auto !important; min-width:0 !important; width:auto !important; height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--gold) !important; background-image:none !important; color:var(--gold-ink) !important; border:none !important; border-radius:9px 0 0 9px !important; font-size:13px !important; font-weight:800 !important; white-space:nowrap !important; padding:0 10px !important; margin:0 !important; box-shadow:none !important; overflow:visible !important; transition:flex .4s cubic-bezier(.5,-.3,.4,1.3), opacity .35s, background .2s; }
/* folded gold corner on the button's top-right (the junction) */
.scc-cta .scc-peel .code-button::after{ content:"" !important; position:absolute; top:0; right:0; width:0; height:0; border-top:19px solid var(--gold-deep); border-left:15px solid transparent; }
/* the code peeking in a dashed box on the right */
.scc-peel-code{ flex:0 0 38px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:1.5px dashed var(--purple); border-left:none; border-radius:0 9px 9px 0; background:#faf8fc; color:var(--purple); font-weight:800; font-size:11px; letter-spacing:.5px; overflow:hidden; white-space:nowrap; padding:0 3px; }
.scc-cta .scc-peel:hover .code-button{ background:#ffdf66 !important; }
/* revealed state: button collapses, code box expands green */
.scc-peel.on .code-button{ flex:0 0 0 !important; opacity:0; padding:0 !important; }
.scc-peel.on .code-button::after{ opacity:0; }
.scc-peel.on .scc-peel-code{ flex:1 1 auto !important; border-radius:9px; border-color:var(--green); background:#f2fbe9; color:var(--green-d); font-size:13px; letter-spacing:2px; }

/* ---- Card footer ---- */
.scc-foot{ display:flex; align-items:center; gap:10px; margin-top:7px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.scc-foot-verified{ color:var(--green-d); font-weight:700; }
.scc-desc-toggle{ background:none; border:none; padding:0; font:inherit; font-size:11.5px; color:var(--purple); font-weight:600; cursor:pointer; }
.scc-desc-toggle .scc-caret{ display:inline-block; transition:transform .2s; }
.scc-desc-toggle[aria-expanded="true"] .scc-caret{ transform:rotate(180deg); }
.scc-desc{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:12.5px; color:#4a4a55; line-height:1.6; }
.scc-valid{ margin-left:auto; }

/* ---- Content tabs (Details | How To Use) ---- */
.scc-ctabs{ display:flex; border:1px solid var(--line); border-radius:12px 12px 0 0; overflow:hidden; margin-top:24px; }
.scc-ct{ flex:1; text-align:center; padding:13px 8px; font-size:13.5px; font-weight:700; cursor:pointer; background:#fff; color:var(--ink); border:none; font:inherit; }
.scc-ct.on{ background:var(--purple); color:#fff; }
.scc-cpanel{ border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; padding:16px; background:#fff; }
.scc-cpanel.scc-hid{ display:none; }
.scc-h2{ font-size:16px; font-weight:800; color:var(--purple); margin:18px 0 8px; }
.scc-h2:first-child{ margin-top:0; }
.scc-prose{ font-size:13px; color:#4a4a55; line-height:1.65; }
.scc-how-list{ margin:0 0 0 18px; } .scc-how-list li{ font-size:13px; color:#4a4a55; line-height:1.8; }
.scc-article{ font-size:13.5px; color:#3d3d47; line-height:1.7; }
.scc-article h2,.scc-article h3{ color:var(--purple); font-weight:800; margin:16px 0 8px; }
.scc-article img{ max-width:100%; height:auto; }

/* ---- Offers table ---- */
.scc-offers{ width:100%; border-collapse:collapse; margin-top:8px; font-size:12.5px; }
.scc-offers th{ background:var(--purple); color:#fff; text-align:left; padding:9px 10px; font-size:12px; }
.scc-offers td{ border:1px solid var(--line); padding:9px 10px; }
.scc-offers td:last-child{ font-weight:700; color:var(--magenta); }

/* ---- FAQ accordions ---- */
.scc-faq-h{ margin-top:22px; }
.scc-acc{ border:1px solid var(--line); border-radius:10px; margin-top:8px; overflow:hidden; background:#fff; }
.scc-acc>summary{ list-style:none; cursor:pointer; padding:12px 14px; font-size:13px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.scc-acc>summary::-webkit-details-marker{ display:none; }
.scc-acc>summary::after{ content:"\2304"; color:var(--purple); flex:none; }
.scc-acc[open]>summary::after{ transform:rotate(180deg); }
.scc-acc-body{ padding:0 14px 12px; font-size:12.5px; color:#4a4a55; line-height:1.6; }

/* ---- Pager / expired ---- */
.scc-pager{ display:flex; justify-content:space-between; margin-top:14px; }
.scc-expired-h{ font-size:15px; font-weight:800; color:var(--muted); margin-top:24px; }

/* ---- Sidebar ---- */
.scc-side{ margin-top:8px; }
.scc-side-card{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; background:#fff; }
.scc-side-h{ font-size:13px; font-weight:800; color:var(--purple); margin:0 0 8px; }
.scc-side-card p{ font-size:12.5px; color:#4a4a55; line-height:1.6; margin:0; }
/* About store: clamp long text, expand via Read More */
.scc-about-text.scc-clamped{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.scc-about-toggle{ background:none; border:0; padding:0; margin-top:7px; font:inherit; font-size:12px; font-weight:700; color:var(--purple); cursor:pointer; }
.scc-about-toggle .scc-caret{ display:inline-block; transition:transform .2s; }
.scc-about-toggle[aria-expanded="true"] .scc-caret{ transform:rotate(180deg); }
.scc-visit{ display:block; text-align:center; margin-top:10px; font-size:13.5px; color:#fff !important; background:var(--magenta); text-decoration:none; border-radius:8px; padding:11px 0; font-weight:800; }
.scc-visit:hover{ background:#8f3b80; }
.scc-cashback{ font-size:12px; font-weight:600; margin-top:8px; text-align:center; }
.scc-rate-block{ text-align:center; }
.scc-rate-block .rate{ margin:6px 0; }
.scc-rel{ display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:9px; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.scc-rel:hover{ border-color:var(--purple); box-shadow:0 2px 8px rgba(116,96,147,.12); }
.scc-rel-logo{ width:66px; height:66px; flex:none; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:5px; }
.scc-rel-logo img{ width:100%; height:100%; object-fit:contain; }
.scc-rel-initials{ font-size:17px; font-weight:800; color:var(--purple); }
.scc-rel-body{ display:flex; flex-direction:column; min-width:0; }
.scc-rel-name{ font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.scc-rel-count{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.scc-cats{ display:flex; flex-wrap:wrap; gap:7px; }
.scc-cat{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border:1px solid var(--line); color:var(--purple); background:var(--purple-bg); border-radius:20px; padding:6px 13px; text-decoration:none; transition:background .15s, color .15s, border-color .15s; }
.scc-cat:hover{ background:var(--purple); color:#fff; border-color:var(--purple); }
.scc-cat .scc-cat-n{ font-size:10.5px; font-weight:700; color:var(--muted); background:#fff; border-radius:10px; padding:1px 6px; }
.scc-cat:hover .scc-cat-n{ color:var(--purple); }

/* =====================================================================
 * MOBILE (<=782px): single column, compact header, no banner.
 * NOTE: header selectors below are best-effort for the ClipMyDeals header
 * and must be verified against the live header markup on staging. They are
 * scoped to store pages only (this file loads only here), so any mismatch
 * cannot affect the rest of the site.
 * ===================================================================== */
@media (max-width:782px){
  .scc-store-page .store-banner{ display:none !important; } /* no banner on mobile */
  .scc-h1{ font-size:16.5px; }
  .scc-summary{ margin-top:2px; }
  .scc-summary-logo{ width:84px; height:84px; }
  .scc-side{ border-top:8px solid var(--bg); padding-top:14px; }
  .scc-valid{ margin-left:0; width:100%; }
  /* slightly shorter CTA on mobile */
  .scc-cta .code-button,
  .scc-cta .deal-button{ padding:9px 14px !important; }
}