/* DealsSpy listing extras (hubs, /new, /hot, search, user, collection, static pages).
   Loads after ds.css; uses its tokens. Shared classes (.c-tile, .ss-seg, .ss-chips,
   .ss-pager, .ss-shero, .ss-stores, .ss-tg, ...) are defined in ds.css. */

/* ---------- Feed ---------- */
.ss-feed{position:relative}
.ss-feed [hidden],.ss-shero [hidden],.ss-listing [hidden]{display:none!important}
.ss-feed .ss-h2 h2 a{color:inherit}
.ss-feed+.ss-feed{margin-top:8px}

/* Four tabs must fit a 320-414px phone without truncating "Under ₹499" */
@media (max-width:419.98px){
  .ss-feed .ss-seg button{padding:0 2px;font-size:12px;letter-spacing:-.02em}
}
@media (max-width:359.98px){
  .ss-feed .ss-seg button{font-size:11px;letter-spacing:-.03em}
}

/* Tabs + sort chips share one row on desktop */
@media (min-width:992px){
  .ss-feedbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:22px}
  .ss-feedbar .ss-seg{flex:1 1 440px;margin:0}
  .ss-feedbar .ss-sortbar{flex:0 1 auto;padding:0;overflow:visible}
}

/* Sort / narrow chips (hub pages) */
.ss-sortbar .ss-chk{display:none}
.ss-sortbar [aria-pressed="true"] .ss-chk{display:block}
.ss-sortbar [data-ds-sort].is-on{background:var(--navy);color:var(--on-navy)}

/* Category chip links */
.ss-cats{margin-top:4px}
.ss-chip[aria-current="page"] .ic{animation:c-pop .45s var(--spring)}
/* Search results: matching stores, brands and categories */
.ss-search-rel{margin-top:4px}
.ss-search-rel .ss-chip small{font:500 11px/1 var(--font);color:var(--muted)}

/* Empty states */
.ss-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 18px 8px;text-align:center}
.ss-empty p,.ss-empty-msg{font:600 14px/1.5 var(--font);color:var(--muted)}
.ss-empty-msg{padding:24px 4px;text-align:center}
.ss-empty-msg a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* Load more */
.ss-more[aria-disabled="true"]{cursor:progress}
.ss-more .ss-spin{flex:none}
.c-masonry[aria-busy="true"]{cursor:progress}

/* ---------- Pager ---------- */
.ss-pager .ss-pg-step{display:inline-flex;align-items:center;gap:4px}

/* ---------- Page head (no hero) ---------- */
.ss-phead{padding:20px 0 14px}
.ss-phead h1{font:800 26px/1.1 var(--font);letter-spacing:-.045em;color:var(--text)}
.ss-phead p{margin-top:8px;font:500 14px/1.5 var(--font);color:var(--muted)}
@media (min-width:992px){
  .ss-phead{padding:30px 0 18px}
  .ss-phead h1{font-size:36px}
}

/* ---------- Store hero ---------- */
.ss-shero-bub{overflow:hidden}
.ss-shero-ltr{display:none;font:800 30px/1 var(--font);color:#11152E}
.ss-shero-bub.is-letter img{display:none}
.ss-shero-bub.is-letter .ss-shero-ltr{display:block}
.ss-shero .ss-bubbles img{object-fit:contain;mix-blend-mode:multiply}
.ss-intro{color:#3C4262}
.ss-intro p,.ss-intro h2,.ss-intro h3,.ss-intro h4{margin:0;font:inherit}
.ss-intro h2,.ss-intro h3,.ss-intro h4{font-weight:700}
.ss-intro a{text-decoration:underline;text-underline-offset:3px}
.ss-textbtn{background:none;border:0;cursor:pointer;padding:0}
@media (min-width:992px){
  .ss-textbtn-sm{display:none}
}
@media (max-width:575px){
  .ss-shero .ss-bubbles{width:34%}
}

/* ---------- Stores + Telegram card ---------- */
.ss-store{text-decoration:none}
.ss-store>span{overflow:hidden}
.ss-store-ltr{display:none;font:800 24px/1 var(--font);color:#11152E}
.ss-store>span.is-letter img{display:none}
.ss-store>span.is-letter .ss-store-ltr{display:block}
.ss-plane{fill:currentColor}
.ss-tg h2{position:relative;max-width:76%;font:800 23px/1.08 var(--font);letter-spacing:-.045em;color:#FFFFFF}
@media (min-width:992px){
  .ss-tg h2{font-size:28px}
}

/* ---------- Last-updated line ---------- */
.ss-updated{margin-top:18px;font:500 12px/1.5 var(--font);color:var(--muted)}

/* ---------- Admin SEO HTML (prose) ----------
   Typography comes from .ds-prose (ds.css); this adds what TinyMCE output needs. */
.ss-prose{margin-top:28px;overflow-wrap:break-word}
.ss-prose header:empty{display:none}
:where(.ss-prose) li::marker{color:var(--muted)}
:where(.ss-prose) img{max-width:100%}
:where(.ss-prose) blockquote{padding:12px 16px;border-left:4px solid var(--navy);border-radius:0 16px 16px 0;background:var(--surface-2)}
:where(.ss-prose) hr{margin:20px 0;border:0;border-top:1px solid var(--line)}
:where(.ss-prose) code{padding:1px 6px;border-radius:6px;background:var(--surface-2);font-size:.9em}
:where(.ss-prose) table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
:where(.ss-prose) caption{padding:0 0 8px;font-weight:700;text-align:left;caption-side:top;color:var(--text)}
:where(.ss-prose) th,:where(.ss-prose) td{padding:10px 12px;border:1px solid var(--line-strong);text-align:left;vertical-align:top}
:where(.ss-prose) th,:where(.ss-prose) thead td{background:var(--surface-2);font-weight:700}
@media (max-width:575px){
  :where(.ss-prose) table{display:block;max-width:100%;overflow-x:auto}
}
/* Store links that TextHelper renders inside SEO HTML */
.ss-prose .redirect-button:not(.ss-get){display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:0;border-radius:999px;background:var(--cta);color:#FFFFFF!important;font:700 13px/1.25 var(--font);text-align:left;text-decoration:none;cursor:pointer;transition:filter .2s,transform .25s var(--spring)}
.ss-prose .redirect-button:not(.ss-get):hover{filter:brightness(1.07)}
.ss-prose .redirect-button:not(.ss-get):active{transform:scale(.95)}
/* Dark mode: TinyMCE writes literal colours inline; let the theme win. */
:root[data-theme="dark"] .ss-prose [style*="color"],
:root[data-theme="dark"] .ss-prose font[color]{color:inherit!important}
:root[data-theme="dark"] .ss-prose [style*="background"],
:root[data-theme="dark"] .ss-prose [bgcolor]{background:transparent!important}
:root[data-theme="dark"] .ss-prose [style*="border"]{border-color:var(--line-strong)!important}
/* Admin store buttons stay one red pill whatever inline colours the editor gave them
   (the dark-mode background reset above would otherwise leave white text on nothing). */
:root[data-theme] .ss-prose .redirect-button:not(.ss-get):not(.ss-pill){background:var(--cta)!important;color:#FFFFFF!important;border-color:transparent!important}
:root[data-theme] .ss-prose .redirect-button:not(.ss-get) :is([style*="color"],[style*="background"],font[color]){color:#FFFFFF!important;background:transparent!important}
.ss-prose [style*="font-family"]{font-family:inherit!important}

/* ---------- Static pages (about / contact / privacy / tnc / disclaimer) ----------
   Legacy Bootstrap markup wrapped in .ss-wrap.ss-static by Page.php. Its utility
   classes (.p-2, .rounded, .mt-5, ...) are !important, hence the !important here. */
.ss-wrap.ss-static{padding-top:18px;padding-bottom:28px;font:400 15px/1.7 var(--font);color:var(--text)}
.ss-wrap.ss-static .ss-static-h1{margin:6px 0 16px;font:800 28px/1.1 var(--font);letter-spacing:-.045em;color:var(--text)}
.ss-wrap.ss-static .container,.ss-wrap.ss-static .row,.ss-wrap.ss-static [class*="col-"]{max-width:none;width:auto;margin-left:0;margin-right:0;padding-left:0;padding-right:0;flex:none}
.ss-wrap.ss-static .row{display:block;margin-top:0!important}
.ss-wrap.ss-static .bg-white,.ss-wrap.ss-static .about-section{display:block;margin:0 0 16px!important;padding:22px 20px!important;border-radius:28px!important;background:var(--surface)!important;color:var(--text);box-shadow:0 8px 24px rgba(17,21,46,.06)!important}
.ss-wrap.ss-static .bg-white .bg-white{margin:0!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.ss-wrap.ss-static .about-section{font-family:var(--font)}
/* <br> spacers between paragraphs (not line breaks inside them) */
.ss-wrap.ss-static :is(.bg-white,.about-section)>br{display:none}
.ss-wrap.ss-static h1,.ss-wrap.ss-static .h2{margin:0 0 14px;font:800 26px/1.15 var(--font);letter-spacing:-.04em;color:var(--text)!important;background:none!important;padding:0;display:block}
.ss-wrap.ss-static h2,.ss-wrap.ss-static h3,.ss-wrap.ss-static h4{margin:22px 0 8px;font:700 19px/1.25 var(--font);letter-spacing:-.025em;color:var(--text)!important;background:none!important;padding:0;display:block}
.ss-wrap.ss-static h3,.ss-wrap.ss-static h4{font-size:17px}
.ss-wrap.ss-static p{margin:0 0 12px}
.ss-wrap.ss-static ul,.ss-wrap.ss-static ol{margin:0 0 14px;padding-left:22px}
.ss-wrap.ss-static ul{list-style:disc}
.ss-wrap.ss-static ol{list-style:decimal}
.ss-wrap.ss-static li{margin:0 0 6px}
.ss-wrap.ss-static a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ss-wrap.ss-static b,.ss-wrap.ss-static strong{font-weight:700;color:var(--text)}
.ss-wrap.ss-static label{display:block;color:var(--muted)}
.ss-wrap.ss-static .text-primary,.ss-wrap.ss-static .text-red,.ss-wrap.ss-static .text-dark,.ss-wrap.ss-static .text-muted{color:var(--text)!important}
.ss-wrap.ss-static .bg-cream{background:var(--surface-2)!important}
.ss-wrap.ss-static .about-section .founder{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.ss-wrap.ss-static .about-section .founder img{flex:none;width:88px;max-width:88px;height:auto;border-radius:22px;margin:0}
.ss-wrap.ss-static .about-section .co-founders{margin-top:28px}
@media (min-width:992px){
  .ss-wrap.ss-static{padding-top:28px}
  .ss-wrap.ss-static .ss-static-h1{font-size:38px}
  .ss-wrap.ss-static .bg-white,.ss-wrap.ss-static .about-section{padding:30px 32px!important}
}

@media (prefers-reduced-motion:reduce){
  .ss-chip[aria-current="page"] .ic{animation:none}
  .ss-prose .redirect-button:not(.ss-get){transition:none}
}