: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);
/* System font stack, deliberately with no webfont. 'Inter' used to lead this
list but was never actually loaded -- nothing on the site ever requested a
font file, so every visitor already fell through to their platform default
(San Francisco on iOS/Mac, Roboto on Android, Segoe UI on Windows). Naming
a font we do not ship just made the CSS lie. Keeping system fonts is also
the right call on merit: they render instantly with no download, no FOUT
and no layout shift, which matters on the Indian mobile connections most
of our Telegram/WhatsApp traffic arrives on. */
font-family:-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}
/* ---- Skip to content -----------------------------------------------------
Without this a keyboard user tabs through the header, the whole nav, every
category pill and the join bar before reaching a single deal -- on EVERY
page. Off-screen until focused, then it drops into the top-left corner.
Positioned off-screen rather than display:none / visibility:hidden, because
those remove the element from the tab order entirely and it would never be
reachable. :focus, not :focus-visible -- this link exists only for keyboard
users, so it must appear whenever it receives focus. */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:200;
background:#0b1020;color:#fff;padding:12px 18px;
border-radius:0 0 10px 0;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}
/* The target takes tabindex="-1" so focus genuinely lands there; suppress the
ring on it, since the visible result is the page jumping to the content. */
.main:focus{outline:none}
/* ---- Keyboard focus ------------------------------------------------------
This stylesheet had ZERO :focus rules, and .header-search input additionally
set outline:none with nothing put back -- so a keyboard user tabbing through
the site had no idea where they were, and on the search box the indicator was
switched off outright. WCAG 2.4.7 (Focus Visible).
:focus-visible rather than :focus, so a mouse click never paints a ring the
pointer user does not need. Browsers still match it for text inputs, where
keyboard entry is expected -- which is what we want on the search box.
On the light page body a dark green ring is enough (4.15:1 on white, 3.83:1
on the page background).
The coloured chrome needed more care. No SINGLE colour clears 3:1 on all of
it -- measured, white fails on the nav's light end (2.73), the WhatsApp
button (1.98) and the sale banner (2.85), while near-black fails on the
near-black joinbar (1.00). So those elements get a TWO-TONE ring: white
inner outline plus a dark outer halo. Whichever the background is, one of
the two contrasts strongly (dark halo scores 6.9 on the nav, 9.6 on the WA
button, 6.7 on the sale banner; white scores 18.9 on the joinbar). */
:focus-visible{
outline:3px solid var(--brand-dark);
outline-offset:2px;
border-radius:3px;
}
.nav a:focus-visible,.nav-toggle:focus-visible,.nav-pillbar a:focus-visible,
.joinbar a:focus-visible,.float-join a:focus-visible,.guide-fab:focus-visible,
.sale-banner:focus-visible,.mega-arrow:focus-visible{
/* !important because several of these elements carry a DECORATIVE coloured
box-shadow of their own at equal or higher specificity -- .nav a.nav-sale
has an orange glow, .float-join a a drop shadow -- and being later in this
file they silently replaced the dark halo, leaving a white-on-orange ring
at 2.85:1. A focus indicator is the one thing that must never lose a
cascade fight with decoration, so it is pinned rather than left to
specificity luck. Verified in-browser after the change. */
outline:2px solid #fff !important;
outline-offset:2px !important;
box-shadow:0 0 0 5px #0b1020 !important;
}
/* The search pill sets overflow:hidden, which clips an outline drawn on the
input inside it. Ring the wrapper instead so the indicator survives. */
.header-search:focus-within{
outline:3px solid var(--brand-dark);
outline-offset:2px;
}
/* Same clipping problem for the submit button, but an INSET shadow is not
clipped. Near-black, not white: white on the button's green fill measures
only 2.73:1, near-black measures 6.93:1. */
.header-search button:focus-visible{
outline:none;
box-shadow:inset 0 0 0 3px #0b1020;
}
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}
/* 80px was the single biggest item in the desktop header (98px total) for a
mark that reads fine at half that; desidime.com runs theirs at 40. The
intrinsic width/height attributes on the tag still supply the ratio, so
nothing reflows. Mobile overrides this to 32px further down. */
.logo img{height:52px;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 ===== */
/* top MUST equal the header's rendered height (logo 52 + .header-inner's 8px
padding top and bottom + the 3px brand underline = 70). Sticky clamps as
soon as the natural position is above the offset, so an offset larger than
the header pins the nav DOWN into the content below it -- with top:99
against a 70px header the nav rendered over the join bar and hid it.
Re-check this value whenever the logo height or header padding changes.
(No backticks in this file: the whole stylesheet is one template literal.) */
.nav{background:linear-gradient(90deg,var(--brand-dark),var(--brand));position:sticky;top:70px;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 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:5px 16px 5px 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:6px 13px}
/* Active pill: you are on this page. Each pill keeps its own brand colour, so
the "selected" signal has to be colour-independent -- a white ring, a pressed
inset shadow, and a leading check. The ring sits outside the pill via a
spread shadow so it reads on the dark nav bar whatever the fill underneath.
aria-current is set alongside for screen readers. */
.nav .nav-pills a.is-active{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(255,255,255,.28),inset 0 2px 6px rgba(0,0,0,.35);transform:none}
.nav .nav-pills a.is-active:hover{transform:none}
.nav .nav-pills a.is-active::before{content:"\2713\00a0";font-weight:900}
/* The sale pill pulses; freeze it when it is the current page so the ring does
not appear to breathe. */
.nav .nav-pills a.nav-sale.is-active{animation:none}
/* 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 ===== */
/* padding-top was 28, and the sale banner adds a 12px bottom margin, so there
were 40 dead pixels between the banner and the Mega widget. 8 + 12 = 20.
Bottom padding is left at 28 (it separates content from the footer). */
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;padding:8px 0 28px}
.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 12px;font-size:21px;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:11px 14px;margin-bottom:16px}
/* 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:9px}
/* 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:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 13px;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)}
/* 92 -> 72 on desktop (56 on mobile, below). imgAt still requests w-120, which
goes from 1.3x to 1.67x coverage as the box shrinks, so this gets sharper,
not softer, and costs no extra bytes. */
.mega-row .mega-thumb{flex:0 0 72px;width:72px;height:72px;border-radius:10px;background:#f4f6f8 center/cover no-repeat;overflow:hidden}
/* The thumb holds a real ![]()
now (so off-screen carousel items can be
lazy-loaded); the background above stays as the empty-state placeholder. */
.mega-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.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)}
/* Push opt-in as a floating bell alongside the TG/WA circles. It is a button,
not an anchor, so it does not inherit the sizing from the rule above and has
to repeat it. Amber while off (an invitation), brand green with a ring once
alerts are on -- which also makes it the only place a subscriber can switch
them back off. (No backticks in this file: it is one template literal.) */
.float-join .f-push{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:none;cursor:pointer;padding:0;background:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.25);transition:.18s}
.float-join .f-push .ic{width:26px;height:26px;fill:#fff}
.float-join .f-push.is-on{background:var(--brand);box-shadow:0 0 0 3px rgba(18,179,107,.35),0 4px 16px rgba(0,0,0,.25)}
.float-join .f-push:hover{transform:scale(1.08)}
/* ===== 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}
/* Mobile keeps the label. It used to collapse to a bare circle, which left an
unlabelled "?" that nobody reads as "how to use this site" -- and the space
was never the problem: the label is ~110px on the left, the Telegram and
WhatsApp circles are on the right, so even a 320px screen has room between
them. Slightly tighter padding and type so the two sides never meet. */
@media(max-width:600px){
.guide-fab{left:12px;bottom:12px;padding:9px 13px 9px 11px;font-size:13px;gap:6px}
.guide-fab svg{width:19px;height:19px}
}
.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 ===== */
/* Bottom padding clears the fixed buttons (guide fab bottom-left, Telegram and
WhatsApp bottom-right). Without it they sit on top of the copyright line once
you scroll to the end of the page. */
/* The bottom padding keeps the FIXED floating buttons off the copyright line
(the TG/WA column rises 134px from the viewport bottom, the guide FAB ~52px).
88px plus the default margin left 104px of visible dead space at the end
of every page. Trimmed to 48 with the margin zeroed, and a RIGHT-ONLY gutter
on the legal line so no line of it can run under the button column.
The gutter must be right-only: a symmetric max-width was tried first and
squeezed the text from 4 lines to 6, giving back almost every pixel the
smaller padding saved. Right-only costs about one wrapped line. */
.site-footer{background:#16202b;color:#aeb9c4;margin-top:36px;padding:32px 0 48px}
.footer-legal{margin:0}
/* Two columns since the Explore block was dropped (its four links all live in
the nav pills / category bar already). */
.footer-grid{display:grid;grid-template-columns:2fr 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 a:hover{color:#fff;filter:brightness(1.12)}
/* Push opt-in button: same shape as the Telegram/WhatsApp buttons in the join
card, in the brand amber so it reads as a third, distinct channel. */
.btn-push{background:var(--brand-dark,#0b8457);color:#fff;border:2px solid rgba(255,255,255,.65);
width:100%;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;
padding:11px 14px;border-radius:10px;margin-top:8px}
.btn-push:hover{filter:brightness(1.08)}
.btn-push:disabled{opacity:.7;cursor:default}
.push-note{margin:8px 0 0;font-size:13px;color:#eaf7f1;line-height:1.4}
.footer-channels svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.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}
/* Logo and search share ONE row (they used to stack, costing 112px of the
first screen for a header that needs ~56). flex:1 1 auto + min-width:0
lets the search shrink beside the logo instead of demanding 100% and
wrapping. Matches how desidime.com lays its own header out. */
.header-inner{flex-wrap:nowrap;gap:10px;padding:6px 0}
.header-search{order:2;flex:1 1 auto;min-width:0;max-width:none;height:36px}
.header-search input{width:auto;flex:1;padding:0 12px;font-size:14px}
.header-search button{width:40px;height:36px}
.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:6px;padding:6px 12px;flex-wrap:wrap;justify-content:center;overflow-x:visible}
.nav .nav-pills a{font-size:12px;padding:5px 10px}
.sale-banner-text{font-size:13px}
.sale-banner{padding:8px 12px;gap:4px 8px}
/* The whole banner is already a link, so a separate "Shop all deals" call to
action only bought a third and fourth wrapped line on a phone. */
.sale-banner-cta{display:none}
.sale-banner-badge{font-size:11.5px;padding:4px 9px}
.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:32px;width:auto}
.logo-text{font-size:18px}
.logo-text small{display:none}
.post.list-card{flex-direction:column}
/* KEEP THIS AT 210px. It was briefly cut to 165 to fit more cards per
screen, and that was reverted: the image is object-fit:cover in a
full-width box, so a shorter box means a 390x165 (2.4:1) letterbox
crop through product photos that are mostly square or portrait --
heads and products got sliced. Fitting more cards is not worth
making the photo unreadable. Still a FIXED height, so cards stay
CLS-safe -- do not swap this for aspect-ratio either. */
.post.list-card .post-thumb{flex:auto;width:100%;height:210px}
.post.list-card .post-body{padding:11px 13px}
.post.list-card .post-title{font-size:16px}
/* ---- Reclaim the first screen (2026-07-31) ----------------------------
Measured before this block: a phone showed 850px of chrome before the
first deal, on an 841px fold, and the sticky bars held 237px (28%) of
EVERY screen after that. Reference for the sizing was desidime.com,
whose header is one row and whose hot-deals widget is ~148px. */
/* The nav and its pill strip stop being sticky: only the slim 56px header
follows you down, so search stays reachable but a quarter of the screen
comes back. .nav-pillbar is inside .nav, so it unsticks with it. */
.nav{position:static;top:auto}
/* The join bar duplicated the floating Telegram/WhatsApp buttons, which are
on screen at all times bottom-right. Desktop keeps it. */
.joinbar{display:none}
/* Mega Deals widget, desidime-style compaction: 233px -> ~150px. Tabs share
a line with nothing else rather than owning a 50px bar, the thumbnail
drops 92 -> 56 (w-120 from imgAt still covers it past 2x), and the row
loses its generous padding. */
.megabox{padding:10px 12px;margin-bottom:14px;border-left-width:3px}
.megabox-head{margin-bottom:8px;gap:6px 8px}
.mega-tab{padding:6px 13px;font-size:13px}
/* NB these two must be written as a DESCENDANT pair, not a bare class: the
base rules are compound selectors (0,2,0), so a single class here loses
the cascade to them no matter that this block sits later and inside a
media query. (And never put backticks in this file -- the whole stylesheet
is one template literal, so a backtick in a comment ends it early.) */
.mega-row .mega-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:8px}
.mega-row .mega-name{font-size:13.5px;-webkit-line-clamp:2}
.mega-row{flex:0 0 270px;gap:10px;padding:9px 11px;border-radius:10px}
.mega-list{gap:8px;padding:2px 2px 8px}
.mega-list::-webkit-scrollbar{height:5px}
/* Heading: 20px over two lines was 64px. 17px on one line is ~26px. */
.home-h1{font-size:17px;margin:0 0 10px}
/* Trim the dead space between the banner and the widget. */
.wrap.layout{padding-top:10px}
.layout{gap:14px}
/* Right-hand gutter so no line of the copyright runs under the fixed TG/WA
column at the very bottom of the page. Mobile only: on desktop the footer
is wide enough that the centred text never reaches the buttons, and adding
the gutter there would just push it off-centre. */
.footer-legal{padding-right:66px}
}
/* 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:5px 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)}}