:root{--bg:#f8f8f6;--card:#fff;--text:#101828;--muted:#667085;--line:#eaecf0;--primary:#0b1f33;--teal:#0fa3a3;--gold:#d9a441;--shadow:0 18px 42px rgba(12,26,38,.08);--shadow2:0 28px 80px rgba(12,26,38,.13);--radius:24px;--radius-lg:34px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.container{width:min(1280px,94%);margin:auto}.top-mini{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:#475467}.top-mini .container{display:flex;justify-content:space-between;gap:18px;padding:10px 0;flex-wrap:wrap}.header{background:rgba(255,255,255,.96);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.04);backdrop-filter:blur(14px)}.header .row{display:grid;grid-template-columns:240px 1fr auto;align-items:center;gap:24px;padding:15px 0}.logo img{height:52px}.searchbar{display:flex;align-items:center;background:#f3f5f7;border:1px solid #e8ebef;border-radius:999px;padding:8px 12px 8px 18px;min-height:54px}.searchbar input{border:0;background:transparent;outline:0;width:100%;font-size:15px;color:#111}.searchbar button{border:0;background:linear-gradient(135deg,var(--primary),#173d5e);color:#fff;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer}.header-icons{display:flex;align-items:center;gap:12px}.icon-btn{width:48px;height:48px;border-radius:50%;background:#f5f7fa;border:1px solid #ebedf0;display:grid;place-items:center;font-size:19px;color:#475467;position:relative}.icon-btn .dot{position:absolute;right:2px;top:0;min-width:20px;height:20px;border-radius:999px;background:#2563eb;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:800}.nav{background:#fff}.nav .container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 18px}.nav-links{display:flex;align-items:center;gap:28px;font-weight:800;color:#344054;font-size:15px}.nav-links a.active,.nav-links a:hover{color:#2563eb}.cta-links{display:flex;align-items:center;gap:12px;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:900;border:0;cursor:pointer;transition:.2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--gold),#b87f1e);color:#fff;box-shadow:0 12px 24px rgba(217,164,65,.28)}.btn-dark{background:linear-gradient(135deg,var(--primary),#173d5e);color:#fff}.btn-soft{background:#fff;border:1px solid var(--line);color:var(--primary)}.categories-strip{padding:18px 0}.categories-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.cat-chip{text-align:center}.cat-chip .circle{width:106px;height:106px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;margin:0 auto 8px;border:1px solid #eef0f3;overflow:hidden}.cat-chip .circle img{width:100%;height:100%;object-fit:cover}.cat-chip span{display:block;font-size:13px;font-weight:800;color:#475467}.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:22px;align-items:stretch}.hero-big,.promo-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow2);overflow:hidden}.hero-big img{width:100%;height:100%;object-fit:cover}.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.promo-card img{width:100%;height:100%;object-fit:cover}.toast{position:fixed;left:16px;bottom:18px;z-index:40;background:#fff;border:1px solid #edf0f2;box-shadow:var(--shadow);border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;max-width:330px}.toast .thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;background:#eef2f5}.toast .thumb img{width:100%;height:100%;object-fit:cover}.toast small{display:block;color:#98a2b3;font-size:12px}.toast strong{display:block;font-size:14px;color:#344054}.section{padding:44px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-head h2{margin:0;font-size:36px;letter-spacing:-1.1px;color:#101828}.section-head p{margin:5px 0 0;color:var(--muted)}.count-strip{display:flex;align-items:center;gap:10px}.count-pill{width:44px;height:44px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;line-height:1.1;text-align:center}.count-link{font-weight:900;color:#111}.products-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.product-card{background:#fff;border:1px solid #eef0f3;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.22s}.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow2)}.product-media{position:relative;padding:12px;background:#fcfcfb}.product-media img{width:100%;height:182px;object-fit:cover;border-radius:18px}.badge{position:absolute;left:18px;top:18px;background:#2563eb;color:#fff;border-radius:10px;padding:6px 9px;font-size:11px;font-weight:900}.badge.pink{background:#a855f7}.badge.orange{background:#f97316}.badge.green{background:#16a34a}.product-body{padding:14px 14px 16px}.product-title{font-size:15px;font-weight:900;line-height:1.35;color:#101828;margin:0 0 6px}.product-sub{font-size:13px;color:#667085;margin:0 0 10px;min-height:38px}.price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.new-price{font-size:22px;font-weight:950;color:#ef4444}.old-price{font-size:14px;color:#98a2b3;text-decoration:line-through}.card-actions{margin-top:14px;display:flex;gap:10px}.mini-btn{flex:1;border:0;border-radius:14px;padding:11px 10px;font-size:13px;font-weight:900;cursor:pointer;text-align:center}.mini-btn.dark{background:#111827;color:#fff}.mini-btn.soft{background:#f7f8fa;color:#344054;border:1px solid #eef0f3}.feature-row{background:#fff;border-radius:28px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:hidden}.feature{padding:24px;text-align:center;border-right:1px solid #f0f2f5}.feature:last-child{border-right:0}.feature .ico{font-size:28px;margin-bottom:10px}.feature h4{margin:0 0 6px;font-size:16px}.feature p{margin:0;color:#667085;font-size:13px}.triple-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.promo-panel{background:#fff;border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.promo-panel img{width:100%;height:100%;object-fit:cover}.info-band{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.about-card,.quick-card{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:30px}.about-card h3,.quick-card h3{margin:0 0 12px;font-size:28px;color:#101828}.about-card p,.quick-card p{color:#667085;line-height:1.65}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.link-box{background:#f8fafc;border:1px solid #eef2f5;border-radius:18px;padding:16px;font-weight:800;color:#344054}.footer{margin-top:12px;background:#fff;border-top:1px solid var(--line)}.footer .container{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:24px;padding:42px 0}.footer h4{margin:0 0 16px;font-size:24px}.footer p,.footer a{color:#667085;font-size:14px;line-height:1.7;display:block}.footer a{margin:5px 0}.socials{display:flex;gap:10px;margin-top:18px}.socials span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#111827;color:#fff;font-weight:900}.copy{border-top:1px solid var(--line);padding:16px 0;color:#667085;font-size:13px;text-align:center}.page-hero{background:linear-gradient(135deg,#101828,#173d5e);border-radius:34px;color:#fff;padding:46px 42px;box-shadow:var(--shadow);margin:24px 0}.page-hero h1{margin:0 0 10px;font-size:44px;letter-spacing:-1px}.page-hero p{margin:0;color:#d0d5dd;max-width:760px}.filters{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 22px}.filter,.form-control{background:#fff;border:1px solid #e8ebef;border-radius:16px;padding:14px 16px;font:inherit;color:#101828}.filter{min-width:220px}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.panel{background:#fff;border-radius:28px;box-shadow:var(--shadow);padding:24px}.detail-title{font-size:42px;line-height:1.05;letter-spacing:-1px;margin:6px 0 10px}.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.spec{background:#f8fafc;border:1px solid #eef2f5;border-radius:18px;padding:14px}.spec small{display:block;color:#667085}.spec strong{display:block;color:#111827;margin-top:4px}.bullets{display:grid;gap:10px;margin:18px 0}.bullets div{display:flex;gap:10px;align-items:flex-start;color:#475467;line-height:1.55}.bullets div:before{content:'✓';width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#16a34a;font-weight:900;flex:0 0 22px;margin-top:2px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}.admin-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh;background:#f5f7fb}.sidebar{background:#081826;color:#d6e0e7;padding:22px;position:sticky;top:0;height:100vh}.sidebar .brand img{height:50px;margin-bottom:24px}.side-links a{display:block;padding:13px 14px;border-radius:16px;font-weight:800;color:#d6e0e7;margin-bottom:8px}.side-links a.active,.side-links a:hover{background:rgba(15,163,163,.18)}.admin-main{padding:26px}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.admin-head h1{margin:0;font-size:34px;letter-spacing:-1px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow)}.stat span{color:#667085;font-size:13px;font-weight:900}.stat strong{display:block;font-size:34px;margin-top:8px;color:#101828}.admin-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}.chart,.table-wrap,.side-panel{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:22px}.bars{display:flex;align-items:flex-end;gap:12px;height:180px;margin-top:16px}.bar{flex:1;border-radius:16px 16px 0 0;background:linear-gradient(180deg,var(--gold),#b87f1e)}.bar.alt{background:linear-gradient(180deg,var(--teal),#0b7f7f)}table{width:100%;border-collapse:collapse}th,td{padding:14px 10px;text-align:left;border-bottom:1px solid #eef2f5;font-size:14px}th{color:#667085;font-size:12px;text-transform:uppercase;letter-spacing:.05em}@media (max-width:1100px){.products-grid{grid-template-columns:repeat(3,1fr)}.hero-grid,.info-band,.product-detail,.admin-grid{grid-template-columns:1fr}.footer .container{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}.header .row{grid-template-columns:220px 1fr}.header-icons{grid-column:1/-1;justify-content:flex-end}.categories-row{grid-template-columns:repeat(3,1fr)}}@media (max-width:780px){.header .row{grid-template-columns:1fr;gap:14px}.nav .container{flex-direction:column;align-items:flex-start}.nav-links,.cta-links{flex-wrap:wrap}.products-grid,.triple-promos{grid-template-columns:1fr 1fr}.feature-row{grid-template-columns:1fr 1fr}.footer .container{grid-template-columns:1fr}.product-detail,.form-grid,.hero-grid,.promo-grid,.info-band,.quick-grid,.admin-shell,.stats{grid-template-columns:1fr}.categories-row{grid-template-columns:repeat(2,1fr)}.page-hero h1,.detail-title{font-size:34px}.sidebar{height:auto;position:relative}.admin-shell{display:block}.toast{display:none}}@media (max-width:560px){.products-grid,.triple-promos,.feature-row,.categories-row{grid-template-columns:1fr}.section-head{display:block}.section-head h2{font-size:28px}.page-hero{padding:32px 24px}.page-hero h1{font-size:30px}.searchbar{min-height:48px}} /* ===== V3 COLORFUL READABILITY UPGRADE ===== */
:root{ --bg:#fff7ed; --text:#082032; --muted:#526273; --primary:#082032; --teal:#00B8A9; --gold:#F4B740; --blue:#2563EB; --pink:#EC4899; --violet:#7C3AED; --shadow:0 18px 42px rgba(8,32,50,.10); --shadow2:0 28px 80px rgba(8,32,50,.16);
} body{ background:linear-gradient(180deg,#ffffff 0%,#fff7ed 44%,#f8fafc 100%) !important; color:#082032;
} .top-mini{ background:linear-gradient(90deg,#082032,#12384f,#0f766e) !important; color:#eef7ff !important;
} .header{ box-shadow:0 8px 28px rgba(8,32,50,.06);
} .searchbar{ background:#f6f9fc !important; border:1px solid #e3ebf2 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
} .searchbar button{ background:linear-gradient(135deg,#082032,#145174) !important; color:#fff !important;
} .btn-primary{ background:linear-gradient(135deg,#F4B740,#F97316) !important; color:#082032 !important; box-shadow:0 12px 24px rgba(249,115,22,.24) !important;
} .btn-dark{ background:linear-gradient(135deg,#082032,#145174) !important; color:#fff !important;
} .cat-chip .circle{ box-shadow:0 18px 42px rgba(8,32,50,.13) !important; border:3px solid #fff !important;
} .cat-chip span{ color:#082032 !important; font-weight:950 !important;
} .promo-card,
.promo-panel{ box-shadow:0 20px 50px rgba(8,32,50,.13) !important; min-height:190px;
} .section-head h2{ color:#082032 !important; font-weight:950 !important;
} .section-head p{ color:#526273 !important; font-weight:600;
} .products-grid{ gap:20px !important;
} .product-card{ border:1px solid #eaf0f4 !important; box-shadow:0 18px 42px rgba(8,32,50,.10) !important; position:relative;
} .product-card:before{ content:""; position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,#F4B740,#00B8A9,#2563EB,#EC4899); z-index:2;
} .product-card:hover{ transform:translateY(-6px); box-shadow:0 28px 80px rgba(8,32,50,.18) !important;
} .product-media{ background:linear-gradient(135deg,#fff7ed,#eff6ff) !important; padding:14px !important;
} .product-media img{ height:195px !important; border-radius:18px !important;
} .product-body{ padding:17px 16px 18px !important;
} .product-title{ color:#082032 !important; font-size:16px !important; font-weight:950 !important; letter-spacing:-.2px;
} .product-sub{ color:#526273 !important; font-size:13px !important; font-weight:600 !important; line-height:1.45 !important;
} .new-price{ color:#E11D48 !important; font-size:23px !important; font-weight:950 !important;
} .old-price{ color:#98A2B3 !important; font-weight:700;
} .badge{ color:#fff !important; font-weight:950 !important; box-shadow:0 8px 18px rgba(8,32,50,.18);
} .badge.green{background:#16A34A !important;}
.badge.orange{background:#F97316 !important;}
.badge.pink{background:#A855F7 !important;} .mini-btn.dark{ background:#082032 !important; color:#fff !important;
} .mini-btn.soft{ background:#fff7ed !important; color:#9A3412 !important; border:1px solid #FED7AA !important;
} .feature:nth-child(1){background:#fff7ed !important;}
.feature:nth-child(2){background:#eff6ff !important;}
.feature:nth-child(3){background:#ecfdf5 !important;}
.feature:nth-child(4){background:#fdf2f8 !important;} .feature h4{ color:#082032 !important; font-weight:950 !important;
} .feature p{ color:#526273 !important; font-weight:600;
} .about-card,
.quick-card,
.panel,
.table-wrap,
.chart,
.side-panel,
.stat{ border:1px solid #eaf0f4 !important;
} .about-card,
.quick-card{ background:#fff !important;
} .about-card h3,
.quick-card h3{ color:#082032 !important; font-weight:950 !important;
} .about-card p,
.quick-card p{ color:#526273 !important; font-weight:600;
} .link-box{ background:linear-gradient(135deg,#fff7ed,#eff6ff) !important; border:1px solid #eaf0f4 !important; color:#344054 !important; font-weight:900 !important;
} .footer{ background:#fff !important;
} .footer h4{ color:#082032 !important; font-weight:950 !important;
} .footer p,
.footer a{ color:#526273 !important; font-weight:600;
} .count-pill{ background:#082032 !important; color:#fff !important;
} .count-link{ color:#082032 !important; font-weight:950 !important;
} /* Make SVG promo text easier to read by adding visual spacing around promo images */
.promo-grid .promo-card,
.triple-promos .promo-panel{ border:1px solid rgba(8,32,50,.05);
} .stats .stat:nth-child(1){background:linear-gradient(135deg,#fff7ed,#fff) !important;}
.stats .stat:nth-child(2){background:linear-gradient(135deg,#eff6ff,#fff) !important;}
.stats .stat:nth-child(3){background:linear-gradient(135deg,#ecfdf5,#fff) !important;}
.stats .stat:nth-child(4){background:linear-gradient(135deg,#fdf2f8,#fff) !important;} .bar{ background:linear-gradient(180deg,#F4B740,#F97316) !important;
} .bar.alt{ background:linear-gradient(180deg,#00B8A9,#2563EB) !important;
} /* ===== V4 MOBILE RESPONSIVE + READABILITY + DASHBOARD UPGRADE ===== */
.hamburger{ display:none; width:48px; height:48px; border:0; border-radius:16px; background:linear-gradient(135deg,#082032,#145174); padding:12px; cursor:pointer; box-shadow:0 12px 24px rgba(8,32,50,.18);
}
.hamburger span{ display:block; height:3px; background:#fff; border-radius:999px; margin:5px 0;
} /* Make the marked promo cards readable */
.promo-card,
.promo-panel{ overflow:hidden !important; min-height:220px !important;
}
.promo-grid{ gap:20px !important;
}
.promo-card img,
.promo-panel img{ width:100% !important; height:100% !important; min-height:220px !important; object-fit:cover !important;
} /* Stronger card effects */
.product-card{ transform:translateZ(0); isolation:isolate;
}
.product-card:after{ content:""; position:absolute; left:14px; right:14px; bottom:-18px; height:26px; background:linear-gradient(90deg,#f4b740,#00b8a9,#2563eb,#ec4899); filter:blur(24px); opacity:.22; z-index:-1; transition:.22s ease;
}
.product-card:hover:after{ opacity:.42; bottom:-14px;
}
.product-media img{ transition:.28s ease;
}
.product-card:hover .product-media img{ transform:scale(1.035);
}
.product-title{ letter-spacing:-.25px !important;
}
.product-sub{ min-height:44px !important;
} /* Better mobile layout */
@media (max-width: 900px){ .header .row{ grid-template-columns:1fr auto !important; gap:12px !important; } .logo{ grid-column:1/2; } .header-icons{ grid-column:2/3 !important; justify-content:flex-end !important; } .searchbar{ grid-column:1/-1; order:3; } .hamburger{ display:grid; place-items:center; } .nav{ position:sticky; top:82px; z-index:45; } .nav .container{ display:block !important; padding:0 !important; } .nav-links, .cta-links{ display:none !important; } .nav.menu-open .nav-links, .nav.menu-open .cta-links{ display:flex !important; flex-direction:column; align-items:stretch; gap:6px; padding:14px 4%; background:#fff; border-bottom:1px solid #eaf0f4; box-shadow:0 22px 50px rgba(8,32,50,.12); } .nav.menu-open .nav-links a, .nav.menu-open .cta-links a{ padding:13px 15px; border-radius:14px; background:#f8fafc; } .hero-grid{ grid-template-columns:1fr !important; } .promo-grid{ grid-template-columns:1fr 1fr !important; } .categories-row{ grid-template-columns:repeat(3,1fr) !important; } .products-grid{ grid-template-columns:repeat(2,1fr) !important; }
} @media (max-width: 560px){ .top-mini .container{ font-size:11px; line-height:1.4; } .header .row{ padding:12px 0 !important; } .logo img{ height:46px !important; } .icon-btn{ width:42px !important; height:42px !important; } .hamburger{ width:42px; height:42px; border-radius:14px; padding:10px; } .searchbar{ min-height:48px !important; padding:7px 8px 7px 14px !important; } .searchbar button{ padding:10px 13px !important; } .categories-row{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; } .cat-chip .circle{ width:78px !important; height:78px !important; } .cat-chip span{ font-size:11px !important; } .promo-grid{ grid-template-columns:1fr !important; } .products-grid{ grid-template-columns:1fr !important; } .product-media img{ height:230px !important; } .section{ padding:34px 0 !important; } .section-head{ display:block !important; } .section-head h2{ font-size:29px !important; } .count-strip{ margin-top:14px; flex-wrap:wrap; } .feature-row, .triple-promos, .info-band, .footer .container, .product-detail, .form-grid{ grid-template-columns:1fr !important; } .toast{ display:none !important; }
} /* Powerful dashboard */
.admin-eyebrow{ font-size:13px; font-weight:950; color:#0f766e; text-transform:uppercase; letter-spacing:.08em;
}
.admin-sub{ margin:8px 0 0; color:#667085; font-weight:600; max-width:720px;
}
.admin-actions{ display:flex; gap:12px; flex-wrap:wrap;
}
.powerful-stats .stat{ position:relative; overflow:hidden;
}
.powerful-stats .stat:before{ content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.55);
}
.stat small{ display:block; margin-top:6px; color:#667085; font-weight:800;
}
.metric-orange{background:linear-gradient(135deg,#fff7ed,#ffedd5) !important;}
.metric-blue{background:linear-gradient(135deg,#eff6ff,#dbeafe) !important;}
.metric-green{background:linear-gradient(135deg,#ecfdf5,#d1fae5) !important;}
.metric-pink{background:linear-gradient(135deg,#fdf2f8,#fce7f3) !important;} .dashboard-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:18px; margin-top:18px;
}
.dashboard-grid.three-col{ grid-template-columns:1fr 1fr 1fr;
}
.dash-card{ background:#fff; border:1px solid #eaf0f4; border-radius:28px; padding:24px; box-shadow:0 18px 42px rgba(8,32,50,.09);
}
.dash-title-row{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
}
.dash-card h3{ margin:0; font-size:24px; letter-spacing:-.45px; color:#082032;
}
.dash-card p{ margin:6px 0 0; color:#667085; font-weight:600;
}
.dash-chip{ background:#ecfdf5; color:#047857; border:1px solid #bbf7d0; padding:8px 10px; border-radius:999px; font-size:12px; font-weight:950;
}
.bar-chart{ height:260px; display:flex; gap:18px; align-items:end; padding-top:24px;
}
.bar-col{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px;
}
.bar-col span{ width:100%; min-height:34px; border-radius:18px 18px 8px 8px; background:linear-gradient(180deg,#f4b740,#f97316); box-shadow:0 14px 26px rgba(249,115,22,.20);
}
.bar-col span.alt{ background:linear-gradient(180deg,#00b8a9,#2563eb); box-shadow:0 14px 26px rgba(37,99,235,.20);
}
.bar-col b{ font-size:12px; color:#667085;
}
.donut-wrap{ display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; margin-top:22px;
}
.donut{ width:150px; height:150px; border-radius:50%; background:conic-gradient(#00b8a9 0 42%, #f4b740 42% 70%, #2563eb 70% 90%, #ec4899 90% 100%); position:relative;
}
.donut:after{ content:""; position:absolute; inset:28px; background:#fff; border-radius:50%; box-shadow:inset 0 0 0 1px #eaf0f4;
}
.legend{ display:grid; gap:10px;
}
.legend span{ font-weight:800; color:#344054; font-size:13px;
}
.legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px;
}
.l1{background:#00b8a9}.l2{background:#f4b740}.l3{background:#2563eb}.l4{background:#ec4899} .progress-list{ display:grid; gap:16px; margin-top:18px;
}
.progress-list div{ position:relative; background:#f8fafc; border-radius:16px; padding:13px 14px 17px; overflow:hidden;
}
.progress-list span{ font-weight:900; color:#082032;
}
.progress-list b{ float:right; color:#0f766e;
}
.progress-list em{ position:absolute; left:0; bottom:0; height:5px; background:linear-gradient(90deg,#f4b740,#00b8a9,#2563eb); border-radius:999px;
}
.pipeline{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;
}
.pipeline div{ border-radius:22px; padding:22px; background:linear-gradient(135deg,#fff7ed,#eff6ff); border:1px solid #eaf0f4;
}
.pipeline strong{ display:block; font-size:34px; color:#082032;
}
.pipeline span{ color:#667085; font-weight:900;
}
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;
}
.quick-actions a{ padding:15px; border-radius:18px; background:#f8fafc; border:1px solid #eaf0f4; color:#082032; font-weight:950;
}
.quick-actions a:hover{ background:#fff7ed;
}
.super-table{ margin-top:18px;
}
.table-head{ display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:14px;
}
.table-head h3{ margin:0; font-size:24px; color:#082032;
}
.table-head p{ margin:5px 0 0; color:#667085; font-weight:600;
}
.status{ display:inline-flex; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:950;
}
.status.hot{background:#fee2e2;color:#b91c1c}
.status.warm{background:#ffedd5;color:#c2410c}
.status.cool{background:#e0f2fe;color:#0369a1}
.status.new{background:#dcfce7;color:#15803d}
.status.follow{background:#fef3c7;color:#a16207}
.status.dealer{background:#ede9fe;color:#6d28d9}
.status.contacted{background:#dbeafe;color:#1d4ed8} @media (max-width: 1100px){ .dashboard-grid, .dashboard-grid.three-col{ grid-template-columns:1fr !important; }
}
@media (max-width: 700px){ .admin-main{ padding:18px !important; } .admin-head{ display:block !important; } .admin-head h1{ font-size:28px !important; } .admin-actions{ margin-top:14px; } .donut-wrap{ grid-template-columns:1fr !important; justify-items:center; } .bar-chart{ height:220px; gap:10px; } .pipeline, .quick-actions{ grid-template-columns:1fr !important; } .table-head{ display:block !important; } .table-wrap{ overflow-x:auto; }
} /* ===== FINAL RESPONSIVE + HERO READABILITY FIX ===== */ /* Desktop hero: prevent overlap and make right offer area readable */
.hero-grid{ grid-template-columns:minmax(0,1.18fr) minmax(430px,.82fr) !important; gap:24px !important; align-items:stretch !important;
}
.hero-big,
.promo-grid,
.promo-card{ min-width:0 !important;
}
.hero-big{ position:relative; z-index:1;
}
.promo-grid{ position:relative; z-index:2; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important;
}
.promo-card{ min-height:210px !important; border-radius:30px !important; box-shadow:0 22px 60px rgba(8,32,50,.14) !important; background:#fff !important; border:1px solid rgba(8,32,50,.06) !important;
}
.promo-card img{ width:100% !important; height:100% !important; min-height:210px !important; object-fit:cover !important; display:block !important;
} /* More breathing room above product cards */
.section{ padding:52px 0 !important;
}
.hero-grid + *{ margin-top:22px;
} /* Better product card typography on mobile and desktop */
.product-title{ font-size:16px !important; line-height:1.28 !important; min-height:40px;
}
.product-sub{ font-size:13.5px !important; line-height:1.48 !important; color:#435466 !important;
}
.product-media img{ object-fit:cover !important;
} /* Stronger hover effects without breaking mobile */
.product-card{ will-change:transform;
}
.product-card:hover{ transform:translateY(-7px) scale(1.01) !important;
} /* Mobile hamburger visibility and layout */
.hamburger{ display:none; width:46px; height:46px; border:0; border-radius:15px; background:linear-gradient(135deg,#082032,#145174); padding:10px 11px; cursor:pointer; box-shadow:0 12px 24px rgba(8,32,50,.18);
}
.hamburger span{ display:block; height:3px; background:#fff; border-radius:999px; margin:5px 0; transition:.2s ease;
}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .mobile-bottom-nav{ display:none;
} /* Admin dashboard refinements */
.admin-main{ background:linear-gradient(180deg,#f8fafc,#fff7ed) !important;
}
.dashboard-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:18px; margin-top:18px;
}
.dashboard-grid.three-col{ grid-template-columns:1fr 1fr 1fr;
}
.dash-card{ background:#fff; border:1px solid #eaf0f4; border-radius:28px; padding:24px; box-shadow:0 18px 42px rgba(8,32,50,.09);
}
.dash-title-row{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
}
.dash-card h3{ margin:0; font-size:24px; letter-spacing:-.45px; color:#082032;
}
.dash-card p{ margin:6px 0 0; color:#667085; font-weight:600;
}
.dash-chip{ background:#ecfdf5; color:#047857; border:1px solid #bbf7d0; padding:8px 10px; border-radius:999px; font-size:12px; font-weight:950;
}
.bar-chart{ height:260px; display:flex; gap:18px; align-items:end; padding-top:24px;
}
.bar-col{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px;
}
.bar-col span{ width:100%; min-height:34px; border-radius:18px 18px 8px 8px; background:linear-gradient(180deg,#f4b740,#f97316); box-shadow:0 14px 26px rgba(249,115,22,.20);
}
.bar-col span.alt{ background:linear-gradient(180deg,#00b8a9,#2563eb); box-shadow:0 14px 26px rgba(37,99,235,.20);
}
.bar-col b{ font-size:12px; color:#667085;
}
.donut-wrap{ display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; margin-top:22px;
}
.donut{ width:150px; height:150px; border-radius:50%; background:conic-gradient(#00b8a9 0 42%, #f4b740 42% 70%, #2563eb 70% 90%, #ec4899 90% 100%); position:relative;
}
.donut:after{ content:""; position:absolute; inset:28px; background:#fff; border-radius:50%; box-shadow:inset 0 0 0 1px #eaf0f4;
}
.legend{ display:grid; gap:10px;
}
.legend span{ font-weight:800; color:#344054; font-size:13px;
}
.legend i{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px;
}
.l1{background:#00b8a9}.l2{background:#f4b740}.l3{background:#2563eb}.l4{background:#ec4899}
.progress-list{ display:grid; gap:16px; margin-top:18px;
}
.progress-list div{ position:relative; background:#f8fafc; border-radius:16px; padding:13px 14px 17px; overflow:hidden;
}
.progress-list span{font-weight:900;color:#082032}
.progress-list b{float:right;color:#0f766e}
.progress-list em{ position:absolute; left:0; bottom:0; height:5px; background:linear-gradient(90deg,#f4b740,#00b8a9,#2563eb); border-radius:999px;
}
.pipeline{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;
}
.pipeline div{ border-radius:22px; padding:22px; background:linear-gradient(135deg,#fff7ed,#eff6ff); border:1px solid #eaf0f4;
}
.pipeline strong{ display:block; font-size:34px; color:#082032;
}
.pipeline span{ color:#667085; font-weight:900;
}
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px;
}
.quick-actions a{ padding:15px; border-radius:18px; background:#f8fafc; border:1px solid #eaf0f4; color:#082032; font-weight:950;
}
.table-head{ display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:14px;
}
.table-head h3{ margin:0; font-size:24px; color:#082032;
}
.table-head p{ margin:5px 0 0; color:#667085; font-weight:600;
}
.status{ display:inline-flex; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:950;
}
.status.hot{background:#fee2e2;color:#b91c1c}
.status.warm{background:#ffedd5;color:#c2410c}
.status.cool{background:#e0f2fe;color:#0369a1}
.status.new{background:#dcfce7;color:#15803d}
.status.follow{background:#fef3c7;color:#a16207}
.status.dealer{background:#ede9fe;color:#6d28d9}
.status.contacted{background:#dbeafe;color:#1d4ed8}
.admin-eyebrow{ font-size:13px; font-weight:950; color:#0f766e; text-transform:uppercase; letter-spacing:.08em;
}
.admin-sub{ margin:8px 0 0; color:#667085; font-weight:600; max-width:720px;
}
.admin-actions{ display:flex; gap:12px; flex-wrap:wrap;
} /* Tablet */
@media (max-width: 1180px){ .hero-grid{ grid-template-columns:1fr !important; } .promo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
} /* Mobile */
@media (max-width: 900px){ body{ padding-bottom:78px; } .header .row{ grid-template-columns:1fr auto !important; gap:12px !important; padding:12px 0 !important; } .logo{ grid-column:1/2 !important; } .logo img{ height:46px !important; } .header-icons{ grid-column:2/3 !important; justify-content:flex-end !important; gap:8px !important; } .icon-btn{ display:none !important; } .hamburger{ display:block !important; } .searchbar{ grid-column:1/-1 !important; order:3; min-height:48px !important; } .nav{ position:sticky; top:112px; z-index:44; } .nav .container{ display:block !important; padding:0 !important; width:100% !important; } .nav-links, .cta-links{ display:none !important; } .nav.menu-open .nav-links, .nav.menu-open .cta-links{ display:flex !important; flex-direction:column; align-items:stretch; gap:8px; padding:14px 4%; background:#fff; border-bottom:1px solid #eaf0f4; box-shadow:0 24px 55px rgba(8,32,50,.13); } .nav.menu-open .nav-links a, .nav.menu-open .cta-links a{ padding:13px 15px; border-radius:14px; background:#f8fafc; } .categories-row{ grid-template-columns:repeat(3,1fr) !important; gap:12px !important; } .cat-chip .circle{ width:82px !important; height:82px !important; } .cat-chip span{ font-size:11px !important; line-height:1.25; } .hero-grid{ grid-template-columns:1fr !important; gap:16px !important; } .promo-grid{ grid-template-columns:1fr !important; gap:14px !important; } .promo-card, .promo-card img{ min-height:190px !important; } .products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; } .product-media img{ height:180px !important; } .product-title{ min-height:auto; } .section{ padding:38px 0 !important; } .section-head{ display:block !important; } .section-head h2{ font-size:30px !important; } .count-strip{ margin-top:14px; flex-wrap:wrap; } .mobile-bottom-nav{ position:fixed; left:10px; right:10px; bottom:10px; z-index:80; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:#082032; border-radius:22px; padding:8px; box-shadow:0 16px 45px rgba(8,32,50,.30); } .mobile-bottom-nav a{ color:#fff; text-align:center; font-size:17px; font-weight:900; padding:8px 4px; border-radius:16px; } .mobile-bottom-nav a span{ display:block; font-size:10px; margin-top:2px; }
} /* Small mobile */
@media (max-width: 560px){ .top-mini .container{ font-size:10px !important; line-height:1.35; gap:4px !important; } .container{ width:92% !important; } .searchbar input{ font-size:12px !important; } .searchbar button{ padding:9px 12px !important; font-size:12px !important; } .hero-big img{ min-height:285px !important; object-fit:cover !important; } .categories-row{ grid-template-columns:repeat(3,1fr) !important; } .products-grid{ grid-template-columns:1fr !important; } .product-card{ border-radius:22px !important; } .product-media img{ height:225px !important; } .feature-row, .triple-promos, .info-band, .footer .container, .product-detail, .form-grid{ grid-template-columns:1fr !important; } .feature{ border-right:0 !important; border-bottom:1px solid #eef2f5; } .toast{ display:none !important; } .about-card, .quick-card{ padding:22px !important; } .quick-grid{ grid-template-columns:1fr !important; }
} /* Admin responsive */
@media (max-width: 1100px){ .dashboard-grid, .dashboard-grid.three-col{ grid-template-columns:1fr !important; }
}
@media (max-width: 700px){ .admin-main{ padding:18px !important; } .admin-head{ display:block !important; } .admin-head h1{ font-size:28px !important; } .admin-actions{ margin-top:14px; } .donut-wrap{ grid-template-columns:1fr !important; justify-items:center; } .bar-chart{ height:220px; gap:10px; } .pipeline, .quick-actions{ grid-template-columns:1fr !important; } .table-head{ display:block !important; } .table-wrap{ overflow-x:auto; }
} /* ===== HERO TEXT + MOBILE HAMBURGER FINAL FIX ===== */ /* Stop the old image-promo behavior in hero; use real text cards */
.hero-grid{ grid-template-columns:minmax(0, 1.18fr) minmax(430px, .82fr) !important; gap:26px !important; align-items:stretch !important; overflow:visible !important;
}
.hero-big{ min-width:0 !important; overflow:hidden !important;
}
.offer-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; min-width:0;
}
.offer-card{ position:relative; min-height:220px; border-radius:32px; padding:30px 30px 26px; overflow:hidden; box-shadow:0 24px 70px rgba(8,32,50,.16); border:1px solid rgba(255,255,255,.55); isolation:isolate;
}
.offer-card:before{ content:""; position:absolute; inset:16px; border-radius:26px; background:rgba(255,255,255,.10); z-index:-1;
}
.offer-card.green{background:linear-gradient(135deg,#BFF7D5,#13B981);}
.offer-card.purple{background:linear-gradient(135deg,#DDD6FE,#8B5CF6);}
.offer-card.blue{background:linear-gradient(135deg,#BFDBFE,#2563EB);}
.offer-card.pink{background:linear-gradient(135deg,#FECDD3,#F43F5E);}
.offer-badge{ display:inline-flex; align-items:center; background:#082032; color:#fff; border-radius:999px; padding:8px 12px; font-size:11px; line-height:1; font-weight:950; text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px; box-shadow:0 10px 22px rgba(8,32,50,.16);
}
.offer-card h3{ margin:0; color:#082032; font-size:30px; line-height:1.04; letter-spacing:-.8px; font-weight:950; max-width:270px;
}
.offer-card p{ margin:8px 0 18px; color:#1f2937; font-size:15px; line-height:1.35; font-weight:850; max-width:260px;
}
.offer-card strong{ display:block; color:#082032; font-size:44px; line-height:1; letter-spacing:-1px; font-weight:950; max-width:270px;
}
.offer-art{ position:absolute; right:22px; bottom:22px; width:94px; height:94px; opacity:.88;
}
.offer-art:before{ content:""; position:absolute; inset:0; border-radius:28px; background:rgba(255,255,255,.30);
}
.offer-art.sheets i:nth-child(1){ position:absolute;right:4px;top:4px;width:70px;height:58px;border-radius:16px;background:#fff;opacity:.88;
}
.offer-art.sheets i:nth-child(2){ position:absolute;right:28px;top:28px;width:70px;height:58px;border-radius:16px;background:#fff;opacity:.45;
}
.offer-art.flutes{ right:26px;top:42px;height:118px;width:88px;
}
.offer-art.flutes i{ display:inline-block;width:9px;height:105px;border-radius:999px;background:#fff;margin-right:8px;opacity:.72;
}
.offer-art.roll{ right:18px;bottom:20px;
}
.offer-art.roll i{ position:absolute;inset:12px;border-radius:50%;border:24px solid #fff;opacity:.70;
}
.offer-art.bag i{ position:absolute;right:8px;top:0;width:66px;height:96px;border-radius:18px;background:#fff;opacity:.86;
}
.offer-art.bag i:before{ content:""; position:absolute;left:16px;top:-12px;width:34px;height:26px;border-radius:999px;border:7px solid #fff;border-bottom:0;
} /* Ensure SVG promos lower on page don't crop text */
.promo-card img,
.promo-panel img{ object-fit:contain !important; background:#fff !important;
} /* Force mobile menu icon to show clearly */
.hamburger{ display:none; width:46px; height:46px; min-width:46px; border:0; border-radius:15px; background:linear-gradient(135deg,#082032,#0f766e); padding:10px 11px; cursor:pointer; box-shadow:0 12px 24px rgba(8,32,50,.20);
}
.hamburger span{ display:block !important; width:100%; height:3px; background:#ffffff; border-radius:999px; margin:5px 0; transition:.2s ease;
}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} @media (max-width:1180px){ .hero-grid{ grid-template-columns:1fr !important; } .offer-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
} @media (max-width:900px){ .header .row{ grid-template-columns:1fr auto !important; gap:12px !important; padding:12px 0 !important; } .logo{grid-column:1/2 !important;} .logo img{height:46px !important;} .header-icons{ grid-column:2/3 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; } .header-icons .icon-btn{ display:none !important; } .hamburger{ display:block !important; } .searchbar{ grid-column:1/-1 !important; order:3 !important; min-height:48px !important; } .nav .container{ display:block !important; padding:0 !important; width:100% !important; } .nav-links, .cta-links{ display:none !important; } .nav.menu-open .nav-links, .nav.menu-open .cta-links{ display:flex !important; flex-direction:column; align-items:stretch; gap:8px; padding:14px 4%; background:#fff; border-bottom:1px solid #eaf0f4; box-shadow:0 24px 55px rgba(8,32,50,.13); } .nav.menu-open .nav-links a, .nav.menu-open .cta-links a{ padding:13px 15px; border-radius:14px; background:#f8fafc; } .offer-grid{ grid-template-columns:1fr !important; gap:16px !important; } .offer-card{ min-height:190px; padding:24px; } .offer-card h3{ font-size:28px; max-width:260px; } .offer-card strong{ font-size:40px; }
} @media (max-width:560px){ .hero-big img{ min-height:285px !important; object-fit:cover !important; } .offer-card{ min-height:180px; border-radius:26px; padding:22px; } .offer-card h3{ font-size:25px; max-width:235px; } .offer-card p{ font-size:14px; max-width:220px; } .offer-card strong{ font-size:34px; max-width:220px; } .offer-art{ width:76px; height:76px; right:16px; bottom:16px; } .offer-art.flutes{ right:18px; top:42px; width:72px; } .offer-art.flutes i{ width:7px; height:90px; margin-right:6px; }
} /* ===== LIVE FINAL FIX: hero offer readability + mobile menu ===== */
.hero-grid{ display:grid !important; grid-template-columns:minmax(0, 1.12fr) minmax(460px, .88fr) !important; gap:30px !important; align-items:stretch !important; overflow:visible !important;
} .hero-big{ min-width:0 !important; overflow:hidden !important; position:relative !important; z-index:1 !important;
} .offer-grid{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:22px !important; min-width:0 !important; width:100% !important; overflow:visible !important; position:relative !important; z-index:2 !important;
} .offer-card{ min-width:0 !important; min-height:220px !important; border-radius:32px !important; padding:26px 24px !important; overflow:hidden !important; position:relative !important; box-shadow:0 24px 70px rgba(8,32,50,.16) !important;
} .offer-card h3{ font-size:26px !important; line-height:1.04 !important; max-width:250px !important; color:#082032 !important; font-weight:950 !important; margin:0 !important; letter-spacing:-.6px !important; position:relative !important; z-index:3 !important;
} .offer-card p{ font-size:14px !important; line-height:1.35 !important; max-width:230px !important; color:#1f2937 !important; font-weight:850 !important; margin:8px 0 16px !important; position:relative !important; z-index:3 !important;
} .offer-card strong{ display:block !important; font-size:34px !important; line-height:1.05 !important; max-width:240px !important; color:#082032 !important; font-weight:950 !important; letter-spacing:-.8px !important; position:relative !important; z-index:3 !important;
} .offer-badge{ position:relative !important; z-index:3 !important; font-size:10px !important; padding:7px 10px !important; margin-bottom:14px !important;
} .offer-art{ z-index:1 !important; opacity:.54 !important; transform:scale(.86) !important; right:8px !important; bottom:8px !important;
} .offer-art.flutes{ right:10px !important; top:42px !important;
} .promo-grid{ display:none !important;
} /* Force sandwich menu icon to appear on mobile */
.hamburger{ display:none; width:46px !important; height:46px !important; min-width:46px !important; border:0 !important; border-radius:15px !important; background:linear-gradient(135deg,#082032,#0f766e) !important; padding:10px 11px !important; cursor:pointer !important; box-shadow:0 12px 24px rgba(8,32,50,.20) !important;
} .hamburger span{ display:block !important; width:100% !important; height:3px !important; background:#ffffff !important; border-radius:999px !important; margin:5px 0 !important; transition:.2s ease !important;
} .hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg) !important;}
.hamburger.active span:nth-child(2){opacity:0 !important;}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg) !important;} @media (max-width:1180px){ .hero-grid{ grid-template-columns:1fr !important; } .offer-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
} @media (max-width:900px){ .header .row{ grid-template-columns:1fr auto !important; gap:12px !important; padding:12px 0 !important; } .logo{ grid-column:1/2 !important; } .logo img{ height:46px !important; } .header-icons{ grid-column:2/3 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; } .header-icons .icon-btn{ display:none !important; } .hamburger{ display:block !important; } .searchbar{ grid-column:1/-1 !important; order:3 !important; } .nav .container{ display:block !important; padding:0 !important; width:100% !important; } .nav-links, .cta-links{ display:none !important; } .nav.menu-open .nav-links, .nav.menu-open .cta-links{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important; padding:14px 4% !important; background:#fff !important; border-bottom:1px solid #eaf0f4 !important; box-shadow:0 24px 55px rgba(8,32,50,.13) !important; } .nav.menu-open .nav-links a, .nav.menu-open .cta-links a{ padding:13px 15px !important; border-radius:14px !important; background:#f8fafc !important; } .offer-grid{ grid-template-columns:1fr !important; gap:16px !important; } .offer-card{ min-height:178px !important; padding:22px !important; } .offer-card h3{ font-size:25px !important; max-width:245px !important; } .offer-card strong{ font-size:32px !important; } .offer-art{ transform:scale(.75) !important; opacity:.42 !important; }
} @media (max-width:560px){ .offer-card h3{ font-size:23px !important; max-width:225px !important; } .offer-card p{ max-width:210px !important; } .offer-card strong{ font-size:30px !important; }
}