:root{
  --brand:#12b36b;
  --brand-dark:#0b8f52;
  --lime:#a3e635;
  --accent:#ff6a3d;
  --tg:#229ED9;
  --wa:#25D366;
  --header-bg:#ffffff;
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#1a2430;
  --muted:#6b7785;
  --line:#e6eaef;
  --radius:14px;
  --shadow:0 2px 14px rgba(20,40,60,.07);
  --shadow-hover:0 8px 28px rgba(20,40,60,.14);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1360px;margin:0 auto;padding:0 16px}

/* ===== Header ===== */
.site-header{background:var(--header-bg);border-bottom:3px solid var(--brand);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;gap:16px;padding:8px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo:hover{text-decoration:none}
.logo img{height:80px;width:auto;object-fit:contain;display:block}
.logo-text{display:flex;flex-direction:column;font-weight:800;font-size:23px;color:#fff;line-height:1.05;letter-spacing:.3px}
.logo-text small{font-weight:600;font-size:10.5px;letter-spacing:1.2px;color:var(--lime);margin-top:4px;text-transform:uppercase}

.header-cta{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:.18s;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-tg{background:var(--tg);color:#fff}
.btn-wa{background:var(--wa);color:#fff}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn .ic{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.header-search{display:flex;align-items:center;background:var(--bg);border-radius:999px;overflow:hidden;height:40px;border:1px solid var(--line);flex:1 1 auto;max-width:420px;margin-left:auto}
.header-search input{flex:1;min-width:0;border:none;outline:none;padding:0 18px;font-size:15px;background:transparent;color:var(--text)}
.header-search button{border:none;background:var(--brand);color:#fff;width:48px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.header-search button svg{width:18px;height:18px;fill:#fff}

/* ===== Nav ===== */
.nav{background:linear-gradient(90deg,var(--brand-dark),var(--brand));position:sticky;top:99px;z-index:40}
/* Category row. The featured pills now live in their own .nav-pills strip below,
   so this row carries only the plain category links + dropdowns and fits far
   more easily. It WRAPS rather than overflowing: with nowrap the pills used to
   push Electronics..More clean off the right edge between 681px and ~1100px,
   with no way to reach them. Still NO overflow scroll here - an overflow
   container clips the hover dropdowns (overflow-x:auto forces overflow-y to
   auto, cutting them off). */
.nav-inner{display:flex;flex-wrap:wrap;gap:1px;align-items:center}
.nav a{color:#fff;padding:9px 7px;font-size:13px;font-weight:500;border-radius:8px;opacity:.92;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.15);text-decoration:none;opacity:1}
/* Coupons menu item: gold ticket pill so it pops on the green bar */
.nav a.nav-coupons{background:linear-gradient(135deg,#ffb300,#ff7a00);color:#fff;opacity:1;font-weight:800;padding:7px 12px;margin:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.4);box-shadow:0 2px 8px rgba(0,0,0,.28);text-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease}
.nav a.nav-coupons:hover{background:linear-gradient(135deg,#ffc233,#ff8f1a);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.35);text-decoration:none}
/* Hot Deals menu item: red ticket pill (matches the site's Mega/hot theme) */
.nav a.nav-hot{background:linear-gradient(135deg,#ff6a3d,#c1121f);color:#fff;opacity:1;font-weight:800;padding:7px 12px;margin:0 2px 0 0;border-radius:999px;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease}
.nav a.nav-hot:hover{background:linear-gradient(135deg,#ff8250,#d81e2c);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.35);text-decoration:none}
/* Credit Cards menu item: premium navy pill with gold text (bank-card look,
   distinct from gold Coupons + red Hot Deals) */
.nav a.nav-cards{background:linear-gradient(135deg,#0f172a,#1e293b);color:#f5c451;opacity:1;font-weight:800;padding:7px 12px;margin:0 2px 0 0;border-radius:999px;border:1px solid rgba(245,196,81,.5);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s ease,box-shadow .15s ease}
.nav a.nav-cards:hover{background:linear-gradient(135deg,#1e293b,#334155);color:#f5c451;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.4);text-decoration:none}
/* Best Picks pill: royal-blue gradient, distinct from gold Coupons + navy Cards
   + red Hot Deals + magenta Sale. Links to /p/best-picks.html buying-guides hub. */
.nav a.nav-guides{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;opacity:1;font-weight:800;padding:7px 12px;margin:0 2px 0 0;border-radius:999px;border:1px solid rgba(255,255,255,.4);box-shadow:0 2px 8px rgba(0,0,0,.28);transition:transform .15s ease,box-shadow .15s ease}
.nav a.nav-guides:hover{background:linear-gradient(135deg,#2563eb,#1e3a8a);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.35);text-decoration:none}
/* Freedom Sale pill: festive tricolour-tinged gradient, pulses gently so it
   stands out from the other pills. Visibility mirrors the coupons/hot pills
   (dual desktop-inner + mobile-bar copy) but is additionally gated on the
   .sale-live class the date-gate script puts on <html> during the sale span. */
.nav a.nav-sale{background:linear-gradient(135deg,#ff9933,#fff7ed 50%,#138808);color:#7c2d12;opacity:1;font-weight:800;padding:7px 13px;margin:0 3px 0 0;border-radius:999px;border:1px solid rgba(255,255,255,.75);box-shadow:0 2px 10px rgba(255,153,51,.5);text-shadow:none;transition:transform .15s ease,box-shadow .15s ease;animation:salePulse 2.2s ease-in-out infinite}
.nav a.nav-sale:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(255,153,51,.7);text-decoration:none;color:#7c2d12}
@keyframes salePulse{0%,100%{box-shadow:0 2px 10px rgba(255,153,51,.45)}50%{box-shadow:0 2px 16px rgba(255,153,51,.8)}}
@media(prefers-reduced-motion:reduce){.nav a.nav-sale{animation:none}}
/* Hidden by default; revealed only while the date gate says the sale is live. */
.nav a.nav-sale{display:none}
.sale-live .nav-pills a.nav-sale{display:inline-block}
/* ===== Featured-pill strip (second nav tier) =====
   The pills have no dropdowns, so unlike .nav-inner this container CAN scroll
   horizontally - which keeps it ONE tidy line on phones and tablets instead of
   wrapping into ragged rows beside the hamburger. A single copy of each pill
   now serves every width (there used to be a desktop copy inside .nav-inner
   plus a hidden mobile twin next to the toggle). */
.nav-pillbar{background:rgba(0,0,0,.16);border-top:1px solid rgba(255,255,255,.13)}
/* Left-aligned, not centred: it shares a left edge with the category row above
   so the two tiers read as one nav block instead of a floating island. The 23px
   left padding is .wrap's 16px + the 7px inline padding on a category link, so
   the first pill sits optically under "Home". (Centring would also risk
   clipping the leading pills once the strip overflows on small screens.) */
.nav-pills{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 23px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-pills::-webkit-scrollbar{display:none}
/* Uniform sizing: each pill used to carry its own ad-hoc margin, the gap owns
   spacing now. flex:0 0 auto stops them squeezing when the strip overflows. */
.nav .nav-pills a{margin:0;flex:0 0 auto;font-size:13px;padding:7px 14px}
/* Freedom Sale banner (homepage): .dl-sale hides it until .sale-live reveals it. */
.dl-sale{display:none}
/* Tricolour blend (saffron to cream to India green), the same three shades as
   the nav pill so the two read as one campaign. Dark text on the light middle
   keeps contrast high. Contained rather than edge-to-edge: capped width, a
   gutter at every size, and rounded corners, so it reads as a card. */
.sale-banner{align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;background:linear-gradient(100deg,#ff9933,#fff7ed 50%,#138808);color:#7c2d12;text-align:center;padding:12px 18px;font-weight:700;box-shadow:var(--shadow);max-width:1120px;width:calc(100% - 28px);margin:12px auto;border-radius:14px;border:1px solid rgba(255,255,255,.6)}
.sale-live .sale-banner{display:flex}
.sale-banner:hover{text-decoration:none;color:#7c2d12;filter:brightness(1.03)}
.sale-banner-badge{background:rgba(255,255,255,.85);border:1px solid rgba(124,45,18,.25);color:#7c2d12;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:800;letter-spacing:.4px;white-space:nowrap}
.sale-banner-text{font-size:15px;font-weight:700}
/* White pill with deep-green text: sits over the green end of the blend. */
.sale-banner-cta{background:#fff;color:#0f5c07;border-radius:999px;padding:6px 16px;font-size:13.5px;font-weight:800;white-space:nowrap}
.nav-toggle{display:none}
.nav-item{position:relative;display:inline-block}
.nav .nav-store{color:#fff;padding:9px 7px;font-size:13px;font-weight:500;border-radius:8px;opacity:.92;cursor:pointer;display:inline-block;user-select:none;white-space:nowrap}
.nav-item:hover .nav-store{background:rgba(255,255,255,.15);opacity:1}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:200px;box-shadow:var(--shadow-hover);border-radius:0 0 10px 10px;padding:6px;z-index:60}
@media(min-width:681px){.nav-item:hover .dropdown{display:block}}
.dropdown a{display:block;color:var(--text);padding:9px 12px;border-radius:6px;font-size:14px;opacity:1;font-weight:500}
.dropdown a:hover{background:var(--bg);color:var(--brand);text-decoration:none}

/* ===== Join bar ===== */
.joinbar{background:#0b1020;color:#fff;text-align:center;padding:10px 16px;font-weight:600;font-size:15px;border-bottom:2px solid var(--lime)}
.joinbar a{color:var(--lime);text-decoration:underline}

/* ===== Layout ===== */
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;padding:28px 0}
.main{min-width:0}

/* ===== Post cards ===== */
.post{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.post.list-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-5px)}
.post:hover{box-shadow:var(--shadow-hover)}
/* listing pages: compact horizontal card, image on the left */
.post.list-card{display:flex;align-items:stretch}
.post.list-card .post-thumb{flex:0 0 200px;display:block;position:relative;overflow:hidden;background:#eef1f4}
/* Absolutely-position the image so a tall product photo can't drive the card's
   height. The thumb stretches to the (uniform) body height and the image fills
   it via object-fit:cover, keeping every list card the same height. */
.post.list-card .post-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post.list-card .post-body{flex:1;min-width:0}
.post.list-card .post-title{font-size:17.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post.list-card .post-snippet{font-size:13.5px;color:#5a6775;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Blank image placeholder: image-less deals keep the same image space so cards
   (and single posts) don't reflow to a different, fuller-width layout. */
.post-thumb-empty{background:#eef1f4 url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2246%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4bcc8%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M21%2015l-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E) center/44px no-repeat}
.post-thumb{display:block;width:100%;overflow:hidden}
/* Store tile: when a deal has no product image, say which store it is from
   instead of showing a generic grey picture icon. Brand colour comes through
   the --sc custom property set inline per store. */
.store-tile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;text-align:center;background:var(--sc,#12b36b);color:#fff}
.store-tile .st-name{font-weight:800;font-size:17px;line-height:1.15;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.store-tile .st-sub{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;opacity:.85}
.post-thumb.has-store,.lead-img-empty.has-store{background-image:none}
.lead-img-empty.has-store{position:relative}
.lead-img-empty .store-tile .st-name{font-size:28px}
.lead-img-empty .store-tile .st-sub{font-size:12px}
.post-thumb img{width:100%;object-fit:cover}
.post-body{padding:14px 18px}
.post-title{font-size:19px;font-weight:700;margin:0 0 6px;line-height:1.3}
.post-title a{color:var(--text)}
.post-title a:hover{color:var(--brand);text-decoration:none}
.post-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:12.5px;margin-bottom:10px}
.post-meta .label{color:var(--brand);font-weight:600}
.post-price{margin:0 0 9px;line-height:1.4}
.post-price:empty{display:none}
/* Same treatment blogger.py's _format_price_html gives the price on the
   single-post page (big green current price, grey strikethrough MRP, orange
   discount badge) - this class existed with no children styled at all, so
   list cards were falling back to plain unstyled snippet text instead. */
.post-price .price-now{font-size:19px;font-weight:800;color:#0b8f52}
.post-price .price-mrp{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-left:7px;font-weight:400}
.post-price .price-disc{display:inline-block;background:#ff6a3d;color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px;margin-left:7px}
.post-content{font-size:14.5px;color:#475563;line-height:1.55}
.post-content img{border-radius:10px;margin:10px 0}
.post-content h2,.post-content h3{margin-top:22px}
.post-content a.deal-btn,.deal-btn{display:inline-block;background:var(--accent);color:#fff!important;padding:8px 18px;border-radius:999px;font-weight:700;margin:10px 0 4px;text-decoration:none;font-size:14px}
.read-more{display:inline-block;margin-top:8px;font-weight:600;color:var(--brand);font-size:14px}
.post-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.post-actions .deal-btn,.post-actions .read-more{margin:0}

/* Sidebar category counts + nested archive */
.cat-list .cat-count{color:var(--muted);font-weight:400;font-size:12px}
.cat-empty{color:var(--muted);font-size:13px;list-style:none}
.archive-list ul{margin:4px 0 6px 14px}
.archive-list ul a{font-size:13px;color:var(--muted)}

/* Numbered pagination */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 32px}
.pagination span,.pagination a{display:inline-block;min-width:40px;text-align:center;padding:9px 12px;border-radius:9px;background:var(--card);box-shadow:var(--shadow);font-weight:600;color:var(--text);font-size:14px}
.pagination a:hover{background:var(--brand);color:#fff;text-decoration:none}
.pagination .current{background:var(--brand);color:#fff}
.pagination .disabled{opacity:.45;box-shadow:none;background:transparent}

/* single post: full-width body, larger type */
.post.single-card .post-body{padding:24px 28px}
.post.single-card .post-title{font-size:26px}
.post.single-card .post-content{font-size:16.5px;color:#33414f}
/* keep the deal "pointers" (newline-separated bullet lines) on their own rows */
.post.single-card .post-content div[style*="line-height:1.7"]{white-space:pre-line}
/* single post: blank lead-image box (JS-inserted) when the deal had no image */
.lead-img-empty{background:#eef1f4 url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2246%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4bcc8%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M21%2015l-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E) center/56px no-repeat;border-radius:12px;min-height:220px;margin:0 0 16px}
/* single post: lead image floats left (capped), text wraps to its right (desktop) */
@media(min-width:681px){
  .post.single-card .post-content p:has(img){float:left;width:300px;margin:4px 28px 14px 0}
  .post.single-card .post-content p:has(img) img{width:100%!important;height:auto;border-radius:12px;margin:0;display:block}
  .post.single-card .post-content .lead-img-empty{float:left;width:300px;height:230px;min-height:0;margin:4px 28px 14px 0}
  /* footer clears below the image; the buy button stays right under the text */
  .post.single-card .post-content p[style*="border-top"]{clear:both}
  .post.single-card .post-content::after{content:"";display:block;clear:both}
}
.jump-link{margin-top:10px}

/* page title */
.page-head{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:24px}
.page-head h1{margin:0;font-size:26px}
.page-head p{margin:6px 0 0;color:var(--muted)}

/* Homepage h1 has no wrapping .page-head card, so it never picked up a size
   from anywhere and fell back to the browser default (~2em) -- oversized,
   especially on mobile for a title this long. Matched to .page-head h1/the
   single-post title (26px) rather than left at browser default. */
.home-h1{margin:0 0 18px;font-size:26px;font-weight:800;color:var(--text)}
@media(max-width:680px){.home-h1{font-size:20px}}

/* ===== Mega Deals (hot) ===== */
@keyframes ssdFire{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.22) rotate(6deg)}}
.fire{display:inline-block;animation:ssdFire 1.1s ease-in-out infinite}

/* --- MEGA DEAL tag on a deal --- */
/* Listing cards: a corner ribbon over the product image (top-left). */
.list-card .post-thumb{position:relative}
.hot-ribbon{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;padding:4px 10px;border-radius:999px;background:#ff3d00;box-shadow:0 2px 8px rgba(0,0,0,.35)}
/* Single deal page: an inline pill right under the title. */
.hot-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;letter-spacing:.5px;color:#fff;padding:4px 11px;border-radius:999px;margin:0 0 4px;background:#ff3d00;box-shadow:0 2px 6px rgba(255,61,0,.3)}
/* Tint the whole card of a MEGA deal, like the Mega Deals box up top. */
.post.list-card:has(.hot-ribbon),.post.single-card:has(.hot-badge){background:#fff6ee;border-color:#ffd2bd;border-left:4px solid #ff6a3d}
/* Super Mega cards: violet, not just a darker red - orange and crimson sit too
   close together on the wheel (and collapse to near-identical for red-green
   colorblind readers). Violet is about as far from orange as a colour gets,
   so the tier is obvious at a glance even without reading the badge text. */
.post.list-card:has(.hot-ribbon.is-super),.post.single-card:has(.hot-badge.is-super){background:#f5f0ff;border-color:#d9c8f7;border-left:4px solid #7c3aed}

/* --- Mega Deals homepage box: compact, static, scrollable list --- */
.megabox{background:#fff6ee;border:1px solid #ffd2bd;border-left:4px solid #ff6a3d;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:22px}
/* When the Super Mega tab is active the whole box (and everything in it -
   scrollbar, arrows, tab) switches to violet, not a red tint. */
.megabox.is-super{background:#f5f0ff;border-color:#d9c8f7;border-left-color:#7c3aed}
.megabox-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
/* One horizontal row of compact cards (image LEFT, title + price RIGHT) that
   scroll sideways; all 15 sit side by side with a horizontal scrollbar. */
.mega-list{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;padding:2px 2px 10px}
.mega-list::-webkit-scrollbar{height:7px}
.mega-list::-webkit-scrollbar-track{background:transparent}
.mega-list::-webkit-scrollbar-thumb{background:#ffc4ad;border-radius:4px}
.mega-row{flex:0 0 320px;display:flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;text-decoration:none;color:var(--text);transition:.15s}
.mega-row:hover{border-color:#ffb499;box-shadow:0 4px 14px rgba(255,106,61,.2);text-decoration:none}
.megabox.is-super .mega-row:hover{border-color:#c4b0f0;box-shadow:0 4px 14px rgba(124,58,237,.2)}
.mega-row .mega-thumb{flex:0 0 92px;width:92px;height:92px;border-radius:10px;background:#f4f6f8 center/cover no-repeat}
.mega-row .mega-info{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.mega-row .mega-name{font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-price{font-size:15px;font-weight:800;color:var(--brand-dark)}
.mega-price s{color:var(--muted);font-weight:400;font-size:12px;margin-left:4px}
.mega-disc{color:var(--accent);font-weight:700;font-size:12px;margin-left:5px}
/* Super Mega vs Mega tabs */
.mega-tabs{display:flex;gap:9px}
.mega-tab{cursor:pointer;border:1px solid #ffd2bd;background:#fff;color:#7a2e12;padding:9px 20px;border-radius:999px;font-weight:800;font-size:15px;line-height:1;transition:.15s}
.mega-tab:hover{border-color:#ff9e7d}
.mega-tab.is-active{background:#ff6a3d;color:#fff;border-color:#ff6a3d}
/* Both tabs used to turn the same orange when active, so switching to Super
   Mega gave no colour feedback at all. Now it matches the violet used
   everywhere else for this tier. */
.mega-tab[data-tab="super"]:hover{border-color:#c4b0f0}
.mega-tab[data-tab="super"].is-active{background:#7c3aed;border-color:#7c3aed}
/* Pane wraps the scrolling row + the prev/next arrows */
.mega-pane{position:relative}
.mega-arrow{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,106,61,.94);color:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;padding:0}
.mega-arrow:hover{background:#ff5722}
.mega-arrow[disabled]{opacity:0;pointer-events:none}
.mega-prev{left:-8px}
.mega-next{right:-8px}
/* Arrows + scrollbar pick up violet too while the Super Mega pane is showing,
   so the whole widget reads as one consistent colour, not just the tabs. */
.megabox.is-super .mega-arrow{background:rgba(124,58,237,.94)}
.megabox.is-super .mega-arrow:hover{background:#6d28d9}
.megabox.is-super .mega-list::-webkit-scrollbar-thumb{background:#c4b0f0}
.megabox.is-super .mega-list::-webkit-scrollbar-thumb:hover{background:#7c3aed}
.megabox.is-super .mega-list{scrollbar-color:#c4b0f0 transparent}
/* Chunkier, always-visible scrollbar so desktop users can drag it too */
.mega-list::-webkit-scrollbar{height:10px}
.mega-list::-webkit-scrollbar-thumb{background:#ff9e7d;border-radius:6px}
.mega-list::-webkit-scrollbar-thumb:hover{background:#ff6a3d}
.mega-list{scrollbar-color:#ff9e7d transparent;scrollbar-width:thin}
/* Super Mega tier: violet ribbon/badge, not a darker red - see the card-tint
   comment above for why. */
.hot-ribbon.is-super,.hot-badge.is-super{background:#7c3aed}
/* Sidebar Hot-Deals filter menu (Super Mega / Mega / Both) */
.hf-btns{display:flex;flex-direction:column;gap:8px}
.hf-btn{display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:700;font-size:14px;text-decoration:none;transition:.15s}
.hf-btn:hover{border-color:#ffb499;text-decoration:none}
.hf-btn.is-active{color:#fff;border-color:transparent}
.hf-btn[data-hot="super"].is-active{background:#7c3aed}
.hf-btn[data-hot="mega"].is-active{background:#ff6a3d}
.hf-btn[data-hot="both"].is-active{background:#7a2e12}
/* Filtered-results takeover on the homepage */
.hotfilter-results{margin-bottom:22px}
.hf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hf-title{margin:0;font-size:20px;display:flex;align-items:center;gap:8px}
.hf-clear{font-size:13px;font-weight:700;color:var(--brand-dark);text-decoration:none;white-space:nowrap}
.hf-clear:hover{text-decoration:underline}
/* Filtered results reuse the homepage .post.list-card markup so they render at
   full size (image + snippet + buttons + hot tint), stacked like the main list. */
.hf-grid{display:block}
.hf-empty{color:var(--muted);font-size:14px}
/* While a hot-deal filter is active, hide the normal list, top box and pager. */
body.hf-active #megabox,body.hf-active #main,body.hf-active .blog-pager{display:none !important}

/* ===== Sidebar ===== */
.sidebar .widget{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:22px}
.sidebar h3,.widget-title{font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:var(--text);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--brand)}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.sidebar li:last-child{border-bottom:none}
.PopularPosts .item-thumbnail img{border-radius:8px}

/* Sidebar: last-7-days archive + category pills.
   Placed AFTER the generic .sidebar li rule above so these win on source order
   (equal specificity) and the pills lose the stacked-row borders. */
.day-nav{display:flex;flex-wrap:wrap;gap:6px}
.day-nav a{flex:1 1 auto;min-width:56px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 6px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);text-decoration:none;line-height:1.2}
.day-nav a b{font-size:13px;font-weight:700}
.day-nav a span{font-size:11px;color:var(--muted)}
.day-nav a:hover{border-color:var(--brand);color:var(--brand-dark)}
.day-nav a:hover span{color:var(--brand-dark)}
.day-nav a.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.day-nav a.is-active span{color:rgba(255,255,255,.85)}
/* Archive day view takes the listing over, same approach as the hot filter. */
body.df-active #megabox,body.df-active #main,body.df-active .blog-pager,body.df-active .pagination{display:none !important}
.day-pager{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:10px 0 30px}
.day-pager a{display:inline-block;background:var(--card);padding:10px 20px;border-radius:999px;box-shadow:var(--shadow);font-weight:600;color:var(--text)}
.day-pager a:hover{background:var(--brand);color:#fff;text-decoration:none}
.day-pager .dp-info{color:var(--muted);font-size:13px}
.day-note{padding:28px;text-align:center;color:var(--muted);background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.day-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:#eef7f1;border:1px solid #cfe9db;border-left:4px solid var(--brand);border-radius:10px;padding:11px 15px;margin:0 0 16px;font-size:14px;color:var(--text)}
.day-filter .df-count{color:var(--muted);font-size:13px}
.day-filter a{margin-left:auto;font-weight:600;color:var(--brand-dark);white-space:nowrap}
.arc-toggle,.cat-toggle{display:inline-block;margin-top:12px;padding:0;background:none;border:0;color:var(--brand);font-weight:600;font-size:13px;cursor:pointer}
.arc-toggle:hover,.cat-toggle:hover{color:var(--brand-dark);text-decoration:underline}
.archive-list{margin-top:12px}
.cat-list{display:flex;flex-wrap:wrap;gap:7px}
.cat-list li{padding:0;border-bottom:0;font-size:13px}
.cat-list li a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);text-decoration:none}
.cat-list li a:hover{border-color:var(--brand);color:var(--brand-dark);background:rgba(18,179,107,.06)}
.cat-list .cat-count{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg,#f1f5f9);border-radius:999px;padding:1px 7px}
.cat-list li a:hover .cat-count{color:var(--brand-dark)}

/* join widget */
.join-card{background:linear-gradient(135deg,#0b8f52,#12b36b 55%,#3fbf73);color:#fff;border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);margin-bottom:22px;border:1px solid rgba(163,230,53,.35)}
.join-card h3{color:#fff;border:none;text-transform:none;letter-spacing:0;font-size:19px;margin:0 0 6px}
.join-card p{margin:0 0 16px;font-size:14px;opacity:.95}
.join-card .btn{width:100%;justify-content:center;margin-bottom:10px;font-size:15px;padding:12px}
.join-card .btn-tg{background:#fff;color:var(--tg)}
.join-card .btn-wa{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.5)}

/* Credit Cards sidebar promo (sits above the Hot-Deals filter, every page) -
   premium navy card with gold heading + gold CTA, matching the nav pill */
.cc-promo{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px;background:linear-gradient(135deg,#0f172a,#1e293b 55%,#334155);color:#fff;padding:20px;text-align:center;transition:transform .2s ease,box-shadow .2s ease;border:1px solid rgba(245,196,81,.25)}
.cc-promo:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);text-decoration:none;color:#fff}
.cc-promo .cc-ico{font-size:40px;line-height:1;margin-bottom:8px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.cc-promo h3{color:#f5c451;border:none;text-transform:none;letter-spacing:0;font-size:18px;margin:0 0 6px;padding:0}
.cc-promo p{margin:0 0 14px;font-size:13.5px;opacity:.92;line-height:1.4}
.cc-promo .cc-cta{display:inline-block;background:#f5c451;color:#0f172a;font-weight:800;font-size:14px;padding:9px 20px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* search */
.searchbox{display:flex;gap:8px}
.searchbox input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.searchbox button{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:0 16px;cursor:pointer;font-weight:600}

/* ===== Floating buttons ===== */
.float-join{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:10px}
.float-join a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:.18s}
.float-join svg{width:27px;height:27px;fill:#fff}
.float-join a:hover{transform:scale(1.08);text-decoration:none}
.float-join .f-tg{background:var(--tg)}
.float-join .f-wa{background:var(--wa)}

/* ===== Help / user-guide button + popup ===== */
.guide-fab{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;cursor:pointer;padding:10px 15px 10px 12px;border-radius:30px;font-weight:700;font-size:14px;font-family:inherit;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:.18s}
.guide-fab:hover{transform:scale(1.05);background:var(--brand-dark)}
.guide-fab svg{width:22px;height:22px;fill:#fff;flex-shrink:0}
@media(max-width:600px){.guide-fab{padding:12px;border-radius:50%}.guide-fab .guide-fab-txt{display:none}}
.guide-overlay{position:fixed;inset:0;background:rgba(16,24,32,.55);z-index:1000;display:none;align-items:center;justify-content:center;padding:18px}
.guide-overlay.open{display:flex}
.guide-modal{background:var(--card);color:var(--text);max-width:440px;width:100%;border-radius:var(--radius);box-shadow:var(--shadow-hover);max-height:88vh;overflow:auto;animation:guidePop .18s ease}
@keyframes guidePop{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.guide-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.guide-modal-head h3{margin:0;font-size:17px;color:var(--brand-dark)}
.guide-close{background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.guide-close:hover{color:var(--text)}
.guide-body{padding:6px 18px 18px}
.guide-body ul{list-style:none;margin:0;padding:0}
.guide-body li{display:flex;gap:11px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14.5px;line-height:1.5}
.guide-body li:last-child{border-bottom:none}
.guide-body .gi{font-size:20px;flex-shrink:0;line-height:1.35}
.guide-body b{color:var(--text)}
.guide-cta{display:flex;gap:10px;margin-top:14px}
.guide-cta a{flex:1;text-align:center;color:#fff;padding:11px;border-radius:10px;font-weight:700;font-size:14px}
.guide-cta a:hover{text-decoration:none;opacity:.92}
.guide-cta .gc-tg{background:var(--tg)}
.guide-cta .gc-wa{background:var(--wa)}

/* ===== Footer ===== */
.site-footer{background:#16202b;color:#aeb9c4;margin-top:36px;padding:36px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.site-footer h4{color:#fff;font-size:15px;margin:0 0 14px}
.site-footer a{color:#aeb9c4}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:5px 0;font-size:14px}
.footer-channels a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;color:#fff;margin:6px 6px 0 0;font-size:13px;font-weight:600}
.footer-channels svg{width:16px;height:16px;fill:currentColor}
.footer-channels .f-tg{background:var(--tg)}
.footer-channels .f-wa{background:var(--wa)}
.footer-channels .f-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.footer-channels .f-fb{background:#1877f2}
.footer-channels .f-yt{background:#ff0000}
.footer-bottom{border-top:1px solid #283543;margin-top:26px;padding-top:16px;text-align:center;font-size:13px;color:#7c8896}

/* hide the locked "Powered by Blogger" attribution widget (Blogger won't let us delete it, and an empty includable doesn't override a locked widget on upload, so kill it with CSS) */
#Attribution1,.Attribution,#attr,.hidden-attr,div.widget.Attribution,#PopularPosts2,.widget.PopularPosts#PopularPosts2{display:none !important;height:0 !important;overflow:hidden !important}

/* pagination */
.blog-pager{text-align:center;margin:10px 0 30px}
.blog-pager a{display:inline-block;background:var(--card);padding:10px 20px;border-radius:999px;box-shadow:var(--shadow);font-weight:600;margin:0 6px}

/* comments minimal */
#comments h3{margin-top:30px}

/* ===== Responsive ===== */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .header-cta .btn span{display:none}
  .header-cta .btn{padding:9px 12px}
  .header-inner{flex-wrap:wrap}
  .header-search{order:3;flex:1 1 100%}
  .header-search input{width:auto;flex:1}
  .nav>.wrap{display:flex;align-items:center;flex-wrap:wrap}
  .nav-inner{display:none;flex-direction:column;align-items:stretch;width:100%}
  .nav-inner.open{display:flex}
  .nav-toggle{display:block;background:none;border:none;color:#fff;font-size:22px;padding:10px 0;cursor:pointer;flex:1;text-align:left}
  /* Pills keep their own strip and never fold into the collapsed menu, so the
     featured pages stay one tap away. On phones they WRAP onto two centred rows
     rather than scrolling: a sideways-scrolling strip hides pills behind an
     affordance many people never notice, and every pill matters here. */
  .nav-pills{gap:7px;padding:8px 12px;flex-wrap:wrap;justify-content:center;overflow-x:visible}
  .nav .nav-pills a{font-size:13px;padding:7px 13px}
  .sale-banner-text{font-size:13.5px}
  .sale-banner{padding:10px 14px;gap:6px 10px}
  .nav a{padding:10px 8px}
  .nav-item{display:block;width:100%}
  .nav .nav-store{display:block;padding:10px 8px}
  .dropdown{position:static;box-shadow:none;background:rgba(255,255,255,.08);border-radius:8px;padding:2px 0 2px 14px;margin:0 0 4px;min-width:0}
  .nav-item.open .dropdown{display:block}
  .nav-item.open .nav-store{background:rgba(255,255,255,.15)}
  .dropdown a{color:#fff}
  .dropdown a:hover{background:rgba(255,255,255,.12);color:#fff}
  .logo img{height:38px;width:auto}
  .logo-text{font-size:18px}
  .logo-text small{display:none}
  .post.list-card{flex-direction:column}
  .post.list-card .post-thumb{flex:auto;width:100%;height:210px}
}
/* 360px-class phones: trim the pills just enough to hold the two-row layout
   (at the default size the five pills spill onto a third row). */
@media (max-width:395px){
  .nav-pills{gap:6px}
  .nav .nav-pills a{font-size:12px;padding:6px 10px}
}

/* hide default blogger chrome we replace */
.navbar{display:none!important;height:0!important}

/* ---- Breadcrumbs (single post) ---- */
.breadcrumbs{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.6}
.breadcrumbs a{color:var(--brand);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span{color:var(--muted)}
.breadcrumbs .sep{margin:0 6px;color:#b4bcc8}

/* ---- Related deals (single post) ---- */
.related-deals{margin:28px 0 6px}
.related-deals h3{margin:0 0 14px;font-size:18px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;color:var(--text)}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);text-decoration:none}
.rel-thumb{display:block;width:100%;height:120px;background:#eef1f4 center/cover no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23b4bcc8' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E")}
.rel-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rel-body{display:block;padding:9px 11px}
.rel-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.35}
.rel-price{display:block;margin-top:6px;font-size:14px;font-weight:800;color:#0b8f52}
.rel-mrp{color:#94a3b8;font-weight:600;font-size:12.5px;text-decoration:line-through;margin-left:5px}
.rel-disc{display:inline-block;background:#ff6a3d;color:#fff;font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px;margin-left:5px;white-space:nowrap}
@media(max-width:680px){.related-grid{grid-template-columns:repeat(2,1fr)}}