/*
Theme Name: Mobile Theme
Theme URI: https://example.com/mobile-theme
Author: Mobile Theme Team
Author URI: https://example.com
Description: A mobile prices & specs theme with country pricing, brand filters, and latest mobiles sections.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobile-theme
Domain Path: /languages
Tested up to: 6.4
Requires PHP: 7.4
Copyright: 2024 Mobile Theme Team
*/

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#0f172a;
  --muted:#475569;
  --subtle:#6b7280;
  --border:#e6eaf2;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --success:#16a34a;
  --shadow-sm: 0 6px 16px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.04);
  --shadow-md: 0 12px 30px rgba(2,6,23,.08), 0 3px 12px rgba(2,6,23,.06);
  --radius: 16px;
  --radius-lg: 22px;
  --grid-gap: 18px; /* unified gap for grids */
  --ad-card-height: 660px; /* target ad height for alignment */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:rgba(0,0,0,.04);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;max-width:100%;overflow-x:hidden}
/* Prevent common horizontal overflow on mobile (100vw/absolute elements/grids) */
body{width:100%;}
img,svg,video,canvas{max-width:100%;height:auto}
:focus-visible{outline:3px solid #bfdbfe;outline-offset:2px}

/* Header */
.header{position:sticky;top:0;z-index:40;background:#0a2540;border-bottom:1px solid #1e3a8a}
.header .container{max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.header .brand a{color:#ffffff;text-decoration:none;font-weight:800;letter-spacing:.2px}
.header .brand a:hover{color:#22d3ee}
.header .nav-links{display:flex;gap:16px;align-items:center}
.header .nav-links a{color:#ffffff;text-decoration:none;font-size:13px;font-weight:700}
.header .nav-links a:hover{color:#22d3ee}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #1e3a8a;border-radius:50%;color:#cbd5e1;text-decoration:none;background:rgba(255,255,255,.02)}
.social-btn:hover{border-color:#22d3ee;color:#22d3ee;background:rgba(34,211,238,.06)}
.header .search-form{display:block;margin:0}
.header .search-form label{display:block;margin:0}
.header .search-form .search-field{width:100%;padding:10px 36px 10px 12px;border-radius:12px;border:1px solid #1e3a8a;background:#0a2540;color:#ffffff;transition:.2s ease;box-shadow:0 1px 0 rgba(2,6,23,.02);font-size:13px}
.header .search-form .search-field:focus{border-color:#60a5fa;box-shadow:0 0 0 6px rgba(96,165,250,.35)}
/* Ensure the search icon always overlays inside the input */
.header .search{position:relative}
.header .search .search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:auto;z-index:3}

/* New header nav styles to mirror static index.html */
.nav{max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 12px}
header .brand{color:#ffffff;text-decoration:none;font-weight:800;letter-spacing:.2px;font-size:18px;padding-left:0;padding-right:0;white-space:nowrap}
header .brand:hover{color:#22d3ee}
header .social{padding-left:0;padding-right:0}
/* Make middle area flexible so desktop menu doesn't disappear due to shrink */
.nav-search{flex:1 1 auto;display:flex;gap:12px;align-items:center;min-width:0;max-width:none}
@media(min-width:901px){
  /* Desktop: allow menu + search to fit nicely */
  .nav-search{max-width:820px;flex-wrap:wrap}
  .nav-links{flex:0 0 auto;white-space:nowrap}
  .search{flex:1 1 520px;min-width:520px}
}
.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav-links{display:flex;gap:16px;align-items:center;margin-left:0;flex:0 0 auto}
/* WP menu wrapper sometimes comes with inline styles; force it visible on desktop */
@media(min-width:901px){
  .nav-links{display:flex !important}
  .nav-links .nav-menu{display:flex !important}
  /* In case the menu is inside <nav class="nav-links"> and hidden by other rules */
  .header .nav-links{display:flex !important}
}
.nav-links a{color:#ffffff;text-decoration:none;font-size:13px;font-weight:700}
.nav-links a:hover{color:#22d3ee}
.social{display:flex;gap:12px;align-items:center}
.social a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #1e3a8a;border-radius:50%;color:#cbd5e1;text-decoration:none;background:rgba(255,255,255,.02)}
.social a:hover{border-color:#22d3ee;color:#22d3ee;background:rgba(34,211,238,.06)}
/* Brand hover colors for header social icons */
header .social a[title="Facebook"]:hover{background:#1877F2;color:#fff;border-color:#1877F2}
header .social a[title="WhatsApp"]:hover{background:#25D366;color:#fff;border-color:#25D366}
header .social a[title="Instagram"]:hover{background:radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff;border-color:#d6249f}
header .social a[title="Telegram"]:hover{background:#0088cc;color:#fff;border-color:#0088cc}
/* Ensure WP menu items in header have no bullets and align inline */
.nav-links .nav-menu{list-style:none;margin:0;padding:0;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav-links .nav-menu li{margin:0;padding:0}
.social svg{width:16px;height:16px}
.menu-btn{display:none;background:#0a2540;border:1px solid #1e3a8a;border-radius:10px;padding:8px 10px;cursor:pointer;color:#ffffff}
.menu-btn:hover{box-shadow:0 2px 8px rgba(2,6,23,.08);color:#22d3ee;border-color:#22d3ee}
@media(max-width:900px){
  /* Keep brand + search + menu button on ONE row */
  .nav{gap:8px;padding:12px 12px;flex-wrap:nowrap}

  /* Brand title smaller so 3 cheezen aik row me fit ho jayein */
  header .brand{font-size:13px;max-width:50vw;overflow:hidden;text-overflow:ellipsis}

  /* Search width controlled so title hide na ho */
  .nav-search{flex:0 1 42vw;max-width:42vw;min-width:0}
  .search{flex:1;min-width:0}
  .search input[type="search"]{min-width:0;padding:8px 30px 8px 10px;font-size:11.5px}

  .nav-links{display:none}
  .social{display:none}
  .menu-btn{display:inline-flex;flex:0 0 auto}

  /* Drawer-specific mobile styles */
  .drawer{background:#0a2540;border-left:1px solid #1e3a8a}
  .drawer .brand{color:#D30D4C}
  .drawer .brand:hover{color:#FF4D6D}
  .drawer .drawer-section-title{color:#D30D4C}
  .drawer .drawer-links a{color:#D30D4C;border-color:#D30D4C;background:#ffffff}
  .drawer .drawer-links a:hover{color:#FF4D6D;border-color:#FF4D6D;background:#ffffff}
  .drawer .social{display:flex !important; gap:12px; align-items:center}
  .drawer .social a{width:34px;height:34px;border-radius:50%;border:0}
  .drawer .social a[title="Facebook"]{background:#1877F2;color:#fff}
  .drawer .social a[title="WhatsApp"]{background:#25D366;color:#fff}
  .drawer .social a[title="Instagram"]{background:radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
  .drawer .social a[title="Telegram"]{background:#0088cc;color:#fff}
}

/* Drawer base styles (exists but only visible when open) */
.drawer{position:fixed;top:0;right:-100%;width:80vw;max-width:320px;height:100vh;background:#fff;box-shadow: -8px 0 24px rgba(2,6,23,.12);border-left:1px solid var(--border);transition:right .25s ease;z-index:50;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.drawer-content{padding:12px 16px 20px;overflow:auto}
.drawer-links{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.drawer-links a{display:block;padding:10px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);font-weight:700}
.drawer-section-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:6px 0 8px}
.drawer-brands{display:flex;flex-direction:column;gap:8px}
.drawer-brands .brand-item{padding:10px 12px;border-radius:10px;border:1px solid var(--border)}

.overlay{position:fixed;inset:0;background:rgba(2,6,23,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.overlay.show{opacity:1;pointer-events:auto}

/* Sub-bar marquee */
.sub-bar{background:#091a2f;border-top:1px solid #122d52;border-bottom:1px solid #122d52}

/* Filter bar injected after sub-bar: remove the extra blue strip by forcing the header area to white */
header.header:has(.mpfm-auto){
  background:#ffffff !important;
  border-bottom:1px solid #e6eaf2 !important;
}
/* Keep the top nav still dark (only first row) */
header.header:has(.mpfm-auto) > .nav{
  background:#0a2540 !important;
}
header.header:has(.mpfm-auto) > .sub-bar{
  background:#091a2f !important;
}

/* The injected wrapper itself */
header.header .mpfm-auto{
  display:block !important;
  background:#ffffff !important;
  padding:0 !important; /* edge-to-edge */
  margin:0 !important;
}

/* Full width bar + remove outer empty space */
header.header .mpfm-auto .mpfm-bar{
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}

/* Compact + square (reduce inner padding too) */
header.header .mpfm-auto .mpfm-row{
  padding:4px 12px !important;
  margin:0 !important;
  border-radius:0 !important;
  width:100% !important;
  box-sizing:border-box;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  min-height:34px;

  /* Remove faint border/rounding artifacts */
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible;
}

/* Hard reset inside filter area to remove any rounded/focus artifacts */
header.header .mpfm-auto,
header.header .mpfm-auto *{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Mobile Safari/Chrome: make sure taps on Filter/Reset always register */
header.header .mpfm-auto{position:relative; z-index:60;}
header.header .mpfm-auto .mpfm-bar,
header.header .mpfm-auto .mpfm-row{position:relative; z-index:60;}

header.header .mpfm-auto .mpfm-actions,
header.header .mpfm-auto .mpfm-apply,
header.header .mpfm-auto .mpfm-reset{
  pointer-events:auto !important;
  position:relative;
  z-index:70;
  touch-action:manipulation;
}

/* If any overlay is present (menu overlay), never let it block header filter clicks */
.overlay{pointer-events:none !important;}
.overlay.show{pointer-events:none !important;}

header.header .mpfm-auto *:focus,
header.header .mpfm-auto *:focus-visible{
  outline:0 !important;
  box-shadow:none !important;
}

header.header .mpfm-auto .mpfm-field select,
header.header .mpfm-auto .mpfm-field input{
  height:24px !important;
  border-radius:0 !important;
  -webkit-appearance:none;
  appearance:none;
  background-clip:padding-box;
  padding:4px 8px !important;
  font-size:12px !important;
}

/* Footer separator (above footer on all pages) */
.mp-footer-sep{
  border-top:1px solid #cbd5e1; /* light grey */
  margin-top:28px;
}

/* Single mobile + home/front: keep disclaimer very close to the separator line */
body.single-mobile .mp-footer-sep,
body.home .mp-footer-sep,
body.front-page .mp-footer-sep{
  margin-top:2px;
}

/* Disclaimer: above the line */
body.single-mobile .mp-spec-disclaimer-wrap,
body.home .mp-spec-disclaimer-wrap,
body.front-page .mp-spec-disclaimer-wrap{
  max-width:100%;
  margin:0 auto;
  padding:0 12px 2px; /* tight gap above the line */
}
body.single-mobile .mp-spec-disclaimer,
body.home .mp-spec-disclaimer,
body.front-page .mp-spec-disclaimer{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.35;
  text-align:center;
}

/* Country/Brand selects: use the browser native dropdown arrow (closest to Min/Max native controls) */
header.header .mpfm-auto .mpfm-field select{
  padding-right:24px !important;
  background-color:#ffffff !important;

  /* allow native arrow */
  -webkit-appearance:menulist !important;
  appearance:menulist !important;
  background-image:none !important;
}

header.header .mpfm-auto .mpfm-apply,
header.header .mpfm-auto .mpfm-reset{
  height:24px !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:4px 10px !important;
  font-size:12px !important;

  /* Ensure button labels are visible on desktop too */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:24px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#0a2540 !important;
  background:#ffffff !important;
  border:1px solid #0a2540 !important;
  -webkit-text-fill-color:#0a2540 !important;
}
header.header .mpfm-auto .mpfm-apply{
  background:#0a2540 !important;
  color:#ffffff !important;
  border-color:#0a2540 !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Remove duplicate "Apply filters to see results" line that appears below after reset */
header.header .mpfm-auto .mpfm-results .mpfm-hint,
header.header .mpfm-auto .mpfm-results .mpfm-loading,
header.header .mpfm-auto .mpfm-results .mpfm-empty{display:none !important}

/* Remove extra space below filter bar */
header.header .mpfm-auto .mpfm-results{margin-top:0 !important}

/* Horizontal layout: label + input on same line */
header.header .mpfm-auto .mpfm-field{
  display:flex !important;
  flex-direction:row !important;
  gap:6px !important;
  align-items:center !important;
  justify-content:flex-start;
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}

header.header .mpfm-auto .mpfm-field label{
  font-size:11px !important;
  color:#475569 !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  white-space:nowrap;
  margin:0 !important;
  padding:0 !important;
  flex-shrink:0;
  display:flex;
  align-items:center;
  height:24px;
}

header.header .mpfm-auto .mpfm-field select,
header.header .mpfm-auto .mpfm-field input{
  flex:0 1 auto;
  min-width:100px;
  margin:0 !important;
  padding:4px 8px !important;
}

/* (removed old multi-line chevron experiment + fallback) */
.sub-bar .sub-inner{max-width:none;width:100%;margin:0;min-height:44px;padding:0;display:flex;align-items:center;overflow:hidden}
@media(max-width:900px){.sub-bar .sub-inner{min-height:38px;padding:0}}
.sub-links{width:100%}
.sub-track{display:inline-flex;gap:22px;align-items:center;white-space:nowrap;height:100%;animation:sub-marquee 45s linear infinite;padding:0}
.sub-bar:hover .sub-track{animation-play-state:paused}
.sub-links a{color:#22d3ee;text-decoration:none;font-weight:500;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;line-height:1;display:inline-flex;align-items:center;padding:12px 0}
.sub-links a:hover{color:#ffffff}
@keyframes sub-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Layout containers */
/* Wider canvas like static index.html */
.container{max-width:100%;margin:0 auto;padding-top:20px;padding-bottom:20px;padding-left:12px;padding-right:12px}
@media(min-width:1400px){.container{max-width:100%}}
/* Align bottoms of three columns by letting them sit in one flex row without sticky height hacks on parents */
.main-layout{display:flex;align-items:stretch;gap:18px;max-width:100% !important;margin:0 !important;padding-top:20px;padding-bottom:20px;padding-left:0 !important;padding-right:0 !important;min-width:0}
@media(min-width:1700px){.main-layout{max-width:100%}}

/* Brands Sidebar */
/* Prevent the left sidebar from stretching down with the tall center column */
.brands-sidebar{
  width:240px;
  flex-shrink:0;
  align-self:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:12px;
  box-shadow:var(--shadow-sm)
}
.brands-sticky{position:sticky;top:100px}
.sidebar-header{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:0 0 12px;font-weight:600}
.brands-list{display:flex;flex-direction:column;gap:8px}
/* Add visual separation before the last 4 special links */
.brands-list a:nth-last-child(4){
  margin-top:12px;
}
.brand-item{display:block;padding:10px 12px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#fafafa);border-radius:10px;cursor:pointer;transition:.15s ease;font-size:13px;color:var(--text);text-decoration:none;font-weight:600}
.brand-item:hover{background:linear-gradient(180deg,#f0f4ff,#e8f0ff);border-color:#bfdbfe;color:var(--primary)}

/* Desktop: align brands sidebar bottom with the 2 stacked 160x600 ads (2 cards + 14px gap) */
@media(min-width:901px){
  body.single-mobile .brands-sidebar{
    height:calc((var(--ad-card-height) * 2) + 14px);
  }

  /* Home/front: allow brands sidebar to extend further down (match card column height better) */
  body.home .brands-sidebar,
  body.front-page .brands-sidebar{
    min-height:calc((var(--ad-card-height) * 2) + 14px);
  }
}

/* Sidebar links under brands (Gaming, Camera, Budget) */
.sidebar-divider{border-top:1px solid var(--border);margin:10px 0}
.sidebar-links{display:flex;flex-direction:column;gap:8px}
.sidebar-links a{display:block;padding:10px 12px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#fafafa);border-radius:10px;text-decoration:none;color:var(--text);font-size:13px;font-weight:700}
.sidebar-links a:hover{background:linear-gradient(180deg,#f0f4ff,#e8f0ff);border-color:#bfdbfe;color:var(--primary)}

/* Ad Sidebar */
.ad-sidebar{width:220px;flex-shrink:0}
.ad-sticky{position:sticky;top:100px}
.ad-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;box-shadow:var(--shadow-sm);overflow:hidden;height:var(--ad-card-height)}
.ad-header{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.ad-body{padding:12px;display:flex;align-items:center;justify-content:center}
.ad-slot{width:160px;height:600px;background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#eef2f7 10px,#eef2f7 20px);display:flex;align-items:center;justify-content:center;color:var(--subtle);font-weight:700;font-size:14px}
@media(max-width:900px){.ad-sidebar{display:none}}

/* Main content */
.main-content{flex:1;min-width:0}

/* Grid and cards */
/* Fixed 4-up grid on desktop, responsive below */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Latest section grid - exactly 6 on desktop (>=1200px) */
.grid-6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(min-width:640px){.grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){.grid-6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}}

.card{position:relative;background:#ffffff;border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s ease, box-shadow .16s ease}
.card{box-shadow:0 2px 0 rgba(2,6,23,.02)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
/* Make thumb visually larger like screenshot */
.card .thumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#ffffff;padding:12px;overflow:hidden}
.card .thumb img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 16px rgba(2,6,23,.06));transition:transform .25s ease}
.card:hover .thumb img{transform:scale(1.06); will-change: transform}
/* Full-card clickable overlay */
.card .cover-link{position:absolute;inset:0;z-index:1}
.card .meta, .card .thumb{position:relative;z-index:2}
.card .meta{padding:10px}
.card .name{font-weight:700;font-size:14px;margin:0 0 4px}
.card .price{color:#065f46;font-weight:800;font-size:14px}
.btn{display:inline-block;width:100%;border:1px solid var(--primary);background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700;letter-spacing:.2px;font-size:13px;text-decoration:none;text-align:center}

/* Ensure "View Details" text never disappears due to theme/overlay/cascading rules */
.card .cta .btn,
.mpfm-results .card .cta .btn{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}
.btn:hover{background:var(--primary-600);border-color:var(--primary-600)}
.muted{color:var(--subtle);font-size:11px}

/* WordPress recommended utility classes (safe defaults; won't break design) */
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{color:var(--subtle);font-size:12px}
.sticky{}
.bypostauthor{}
.alignright{float:right;margin:0 0 1em 1em}
.alignleft{float:left;margin:0 1em 1em 0}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

/* Pagination (chips) */
.pagination{display:flex;justify-content:center;margin:18px 0 6px}
.pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);background:#ffffff;font-weight:700;font-size:13px}
.pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#ffffff}
.pagination .page-numbers:hover{border-color:#bfdbfe;color:var(--primary)}

/* Sections */
.section-title{margin:16px 4px 12px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.full-bleed-latest{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:transparent;margin-top:36px;overflow-x:hidden}
/* Add a little side padding to prevent right-edge clipping on some browsers */
.full-bleed-inner{max-width:100%;margin:0 auto;padding:22px 12px;box-sizing:border-box}
.full-bleed-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:6px 0 12px;padding:0 4px}

/* Single post: Recent posts thumbnails - reduce extra padding above/below image */
body.single-post .full-bleed-latest .card .thumb{
  padding:5px;
  aspect-ratio:auto;
  align-items:stretch;
  justify-content:stretch;
}
body.single-post .full-bleed-latest .card .thumb img{
  display:block;
  width:100%;
  height:180px;
  max-height:none;
  object-fit:cover;
}

/* Detail page */
.detail{display:grid;gap:12px}
.hero{grid-area:hero;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.square-ad{width:100%;max-width:336px;aspect-ratio:336/280;background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#eef2f7 10px,#eef2f7 20px);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--subtle);font-weight:800}
.right-col{grid-area:right;display:flex;flex-direction:column;gap:20px}
.ad-below{grid-area:ad;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;margin-top:0}
.info{grid-area:info;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 18px 14px;box-shadow:var(--shadow-sm)}
.title{margin:0 0 4px;font-size:26px;letter-spacing:.1px}

/* Single blog post: allow long titles to wrap instead of staying in one line */
body.single-post .post-card .title{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sub{margin:0 0 10px;color:var(--subtle);font-size:13px}
.price-lg{font-weight:900;color:#065f46;margin-right:10px}

.section-title + table{margin-top:8px}
 table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);overflow:hidden;border-radius:14px}
 th,td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
 th{width:32%;color:#0f172a;background:var(--surface-2);font-weight:600}
 tbody tr:last-child td, tbody tr:last-child th{border-bottom:0}
 tbody tr:nth-child(even) td{background:#fafafa}

/* Footer */
.footer{border-top:1px solid var(--border);color:var(--subtle);text-align:center;padding:24px 20px 10px}
.footer .footer-title{font-weight:700;color:var(--text);margin:0 0 6px}
.footer .footer-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.footer a{color:var(--primary);text-decoration:none;font-size:13px}
.footer a:hover{text-decoration:underline}

/* Responsive adjustments */
@media(max-width:900px){
  .main-layout{gap:14px;padding-top:14px;padding-bottom:14px;padding-left:0 !important;padding-right:0 !important}
  .brands-sidebar{display:none}
}

/* Home page desktop-only side padding for sidebars and ads */
@media(min-width:901px){
  body.home .main-layout{padding-left:0 !important;padding-right:0 !important}
}

/* Home page: enforce 4 cards per row on desktop */
@media(min-width:1200px){
  body.home #grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Admin helpers */
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.meta-field{display:flex;flex-direction:column;gap:6px}

/* Desktop: align top 16 cards height with ad heights (2 rows = 1 ad) */
@media(min-width:1200px){
  #grid{grid-auto-rows: calc((var(--ad-card-height) - var(--grid-gap)) / 2)}
  #grid .card{height:100%;display:flex;flex-direction:column}
  /* Thumb height tuned so meta+cta fit nicely inside row height */
  #grid .card .thumb{height:200px;aspect-ratio:auto}
  #grid .card .meta{flex:1;display:flex;flex-direction:column}
  #grid .card .cta{margin-top:auto}
}

/* Mobile-only overrides (header + single page) */
@media(max-width:900px){
  /* Reduce gap between filter bar / mobile ad / first cards */
  .pc-leaderboard-ad{margin:4px auto !important}
  .pc-leaderboard-ad iframe,
  .pc-leaderboard-ad ins,
  .pc-leaderboard-ad > div{margin:0 auto !important}

  /* Common ad wrappers used by ad providers */
  ins.adsbygoogle,
  .adsbygoogle,
  iframe[id^="google_ads"],
  iframe[src*="ads"],
  .ad-slot,
  .ad-slot-728x90{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* Pull main content closer after header-area ads */
  main.container{padding-top:4px !important}

  /* Mobile: reduce cards gap (ad -> cards + cards spacing) */
  .grid,
  .grid-6{
    gap:2px !important;
  }

  /* Header: hide Home nav in header, keep only in drawer */
  .header .nav-links{display:none !important}

  /* Single page: ensure details appear first and image smaller; hide ad below image */
  .detail{grid-template-columns:1fr;grid-template-areas:'right' 'info'}
  .info{grid-area:info; margin-left:auto; margin-right:auto;}
  .right-col{grid-area:right}

  /* Mobile: keep specs table perfectly centered in the card */
  .info table{margin-left:auto; margin-right:auto; width:100%;}
  .info table th,
  .info table td{word-break:break-word;}
  .ad-below{display:none !important}
  .hero{padding:12px}
  .hero img{max-height:260px;height:auto;object-fit:contain}

  /* Mobile filter bar layout (STRICT rows)
     Row 1: Country + Brand
     Row 2: Min Price + Max Price
     Row 3: Hint + Buttons (same row)
  */
  header.header .mpfm-auto .mpfm-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4px;
    align-items:center;
  }

  /* Fields fill the grid cells */
  header.header .mpfm-auto .mpfm-field{
    min-width:0 !important;
    width:auto !important;
    flex:initial !important; /* neutralize earlier flex rules */
  }

  header.header .mpfm-auto .mpfm-field select,
  header.header .mpfm-auto .mpfm-field input{
    width:100% !important;
    min-width:0 !important;
  }

  /* Explicit placement based on markup order */
  header.header .mpfm-auto .mpfm-field:nth-of-type(1){grid-column:1;grid-row:1} /* Country */
  header.header .mpfm-auto .mpfm-field:nth-of-type(2){grid-column:2;grid-row:1} /* Brand */
  header.header .mpfm-auto .mpfm-field:nth-of-type(3){grid-column:1;grid-row:2} /* Min */
  header.header .mpfm-auto .mpfm-field:nth-of-type(4){grid-column:2;grid-row:2} /* Max */

  /* Row 3: hint left */
  header.header .mpfm-auto .mpfm-inline-hint{
    grid-column:1;
    grid-row:3;
    margin:0 !important;
    font-size:11px;
    line-height:24px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Row 3: actions right */
  header.header .mpfm-auto .mpfm-actions{
    grid-column:2;
    grid-row:3;
    margin-left:0 !important;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
  }

  header.header .mpfm-auto .mpfm-apply,
  header.header .mpfm-auto .mpfm-reset{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:24px !important;
    line-height:24px !important;
    padding:0 10px !important;
    min-width:56px !important;
    font-size:12px !important;
    font-weight:800 !important;
    color:#0a2540 !important;
    background:#ffffff !important;
    border:1px solid #0a2540 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  header.header .mpfm-auto .mpfm-apply{background:#0a2540 !important;color:#ffffff !important;}

  /* Results area: show on mobile so filter action is visible */
  header.header .mpfm-auto .mpfm-results{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin-top:4px !important;
  }
}

/* Desktop/Tablet: make sure AJAX results are visible */
@media (min-width: 901px){
  /* Desktop/Tablet: force show results even if other header rules hide them */
  header.header .mpfm-auto .mpfm-results,
  header.header:has(.mpfm-auto) .mpfm-results,
  header.header .mpfm-results{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Home page container: remove side padding so only inner layout uses 18px */
body.home main.container{padding-left:0 !important; padding-right:0 !important}
@media(max-width:900px){ body.home main.container{padding-left:0 !important; padding-right:0 !important} }

/* Single page: ad-card height auto (not fixed 660px like home) */
body.single-mobile .ad-card{height:auto}

/* Single page: narrow ad-sidebar to match ad width (160px + padding) */
body.single-mobile .ad-sidebar{width:180px}

/* Footer pages (standard WP pages) side padding and wrapping */
body.page main.container{
  padding-left:100px;
  padding-right:100px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media(max-width:900px){
  body.page main.container{
    padding-left:16px;
    padding-right:16px;
  }
}

/* Blog listing (posts page): PC leaderboard ad below sub-bar */
.pc-leaderboard-ad{display:none;margin:0 0 16px}
@media(min-width:901px){
  /* Keep the 728x90 centered with equal left/right space */
  .pc-leaderboard-ad{
    display:block;
    max-width:728px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  /* Ad providers often inject iframes/divs; force them to center */
  .pc-leaderboard-ad iframe,
  .pc-leaderboard-ad ins,
  .pc-leaderboard-ad > div{
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}
/* Placeholder style (only used if you keep the demo box somewhere) */
.ad-slot-728x90{width:728px;height:90px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 10px,#eef2f7 10px,#eef2f7 20px);border:1px solid var(--border);border-radius:12px;color:var(--subtle);font-weight:800;margin-left:auto;margin-right:auto}

/* Home page: Latest News grid (responsive like blog page) */
.home-news-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:18px}
@media(min-width:640px){.home-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.home-news-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Blog listing (posts page): cards like mobiles (thumb on top, text below) */
.blog-list{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:18px}
/* Mobile: 1 column */
@media(max-width:639px){.blog-list{grid-template-columns:repeat(1,minmax(0,1fr))}}
@media(min-width:640px){.blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.blog-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

.blog-card{position:relative;border:1px solid #93c5fd;border-radius:0;overflow:hidden;box-shadow:none;padding:10px;background:rgba(0,0,0,.04);}

/* gap between outer blue border and inner content (NO inner blue border) */
.blog-thumb,
.blog-meta{
  background:rgba(0,0,0,.04);
}

.blog-thumb{display:block;overflow:hidden;margin:0;}
.blog-thumb img{display:block;width:100%;height:210px;object-fit:cover;}

.blog-meta{padding:8px 12px 0;margin:0;}

/* Mobile: make blog cards full width inside container */
@media(max-width:639px){
  body.blog .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .blog-card{
    width:100%;
    max-width:none;
  }
}

/* Single post: Recent posts cards - add same inner gap + blue border box */
body.single-post .full-bleed-latest .card{
  border:1px solid #93c5fd;
  padding:14px;
  box-shadow:none;
}
body.single-post .full-bleed-latest .card > *{margin:14px;}
body.single-post .full-bleed-latest .card .thumb{margin:-14px -14px 0 -14px;}

/* Single post: Recent posts grid - mobile 1 column */
@media(max-width:639px){
  body.single-post .full-bleed-latest .grid-6{
    grid-template-columns:repeat(1,minmax(0,1fr)) !important;
  }
}
.blog-thumb img{width:100%;height:210px;object-fit:cover;display:block}

.blog-meta{padding:8px 12px 0}
.blog-title{margin:0 0 6px;font-size:16px;line-height:1.25}
.blog-title a{text-decoration:none;color:var(--text)}
.blog-title a:hover{color:var(--primary)}

/* Clamp title + excerpt, and prevent long text from staying on one line */
.blog-title a,
.blog-excerpt,
.blog-excerpt-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.blog-title a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.blog-excerpt{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

/* Clamp ONLY the text; keep Read more link always visible */
.blog-excerpt-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.read-more-inline{
  margin-left:6px;
  color:var(--primary);
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  display:inline-block;
  margin-bottom:0;
  padding-bottom:0;
  line-height:1.2;
}
.read-more-inline:hover{color:var(--primary-600);text-decoration:underline}

/* Single mobile: share buttons under image */
.share-row{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 0 4px}
.share-btn{width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;font-size:12px;letter-spacing:.2px;border:1px solid var(--border);background:#fff;color:var(--text)}
.share-btn svg{width:18px;height:18px;display:block;fill:currentColor}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(2,6,23,.08)}
.share-fb{background:#1877F2;border-color:#1877F2;color:#fff}
.share-x{background:#111827;border-color:#111827;color:#fff}
.share-wa{background:#25D366;border-color:#25D366;color:#fff}
.share-tg{background:#0088cc;border-color:#0088cc;color:#fff}
.share-ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:#d6249f;color:#fff}

/* Blog + single post pages: full-page (full width) light tint background */
body.blog,
body.single-post{
  background:rgba(0,0,0,.04);
}

/* Single post: tint behind main content + related + recent sections */
/* Apply tint to the content containers (cards) as well, so inner white areas get tinted */
body.single-post .post-card,
body.single-post .aside-card,
body.single-post .rel-card,
body.single-post .full-bleed-latest .card{
  background:rgba(0,0,0,.04);
}

/* Blog page: tint inside blog cards too (like single post) */
body.blog .blog-card{
  background:rgba(0,0,0,.04);
}

/* Keep media areas white for better contrast */
body.single-post .post-hero,
body.single-post .post-hero img,
body.single-post .rel-thumb,
body.single-post .rel-thumb img{
  background:#fff;
}

/* Ensure tint also covers under header/sub-bar by keeping wrappers transparent */
body.blog main,
body.single-post main{
  background:transparent !important;
}

/* Blog + single post pages: remove rounded corners */
body.blog .blog-card,
body.blog .blog-thumb img,
body.single-post .post-card,
body.single-post .post-hero,
body.single-post .post-hero img,
body.single-post .aside-card,
body.single-post .rel-card,
body.single-post .rel-thumb,
body.single-post .rel-thumb img,
body.single-post .card{
  border-radius:0 !important;
}

/* Desktop-only: remove box/striped background around Single Page Inline Ad (336x280) */
@media(min-width:901px){
  .only-desktop .ad-below{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  .only-desktop .ad-below .square-ad{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}

/* Desktop-only: widen specs column, shrink image box and brands sidebar on single mobile page */
@media(min-width:901px){
  /* Narrow left brand sidebar */
  body.single-mobile .brands-sidebar{ width:180px !important; }
  /* Expand specs column and shrink image column */
  body.single-mobile .main-content .detail{
    grid-template-columns: 1.4fr 0.6fr !important;
    grid-template-areas: 'info right' !important;
    align-items:start !important;
  }
  /* Constrain image/right column max width for cleaner layout */
  body.single-mobile .right-col{ max-width:420px; }
}

/* Desktop-only: remove outer card look and left padding around specs so labels touch left edge */
@media(min-width:901px){
  body.single-mobile .info{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  /* Align the heading with the specs table */
  body.single-mobile .info .section-title{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
  }
  /* Remove inner white rounded box/shadow from specs container to avoid box-in-box look */
  body.single-mobile .info .mp-vip-specs{
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin-top:0 !important;
    margin-bottom:12px !important;
  }
  /* Ensure specs wrapper start flush at left */
  body.single-mobile .info .mp-vip-specs-bleed,
  body.single-mobile .info .mp-vip-specs{
    margin-left:0 !important;
  }
}