landmark: page content is now wrapped in

(opened in header.php, closed in footer.php). The layout rules further up were written when generated-page content was a direct child of , so they are mirrored here for

children. The body> variants are kept for pages that still render content outside the landmark. ===== */ main>.panel,main>.prose,main>.link-strip,main>.related-strip,main>.faq,main>.keyword-meta,main>.form-card,main>.btns-row,main>.pd-cta,main>.container{max-width:1240px;margin-left:auto;margin-right:auto} main>h2{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:18px;padding-right:18px} main>.form-card{padding-left:18px;padding-right:18px} main>p:has(>a.btn){max-width:1240px;margin-left:auto;margin-right:auto;padding:0 18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center} main>p:has(>a.btn) a.btn{flex:0 0 auto} @media(max-width:760px){main>p:has(>a.btn){flex-direction:column;align-items:stretch}} main>.breadcrumb,main>nav.breadcrumb{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:18px;padding-right:18px} @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* ===== Colour-contrast remediation (WCAG 2.1 AA, Lighthouse "color-contrast") ===== WhatsApp CTA: white label on #25d366 measured 1.98:1 (4.5:1 is required). The WhatsApp brand green is kept EXACTLY as it was - only the label colour changed to a very dark green: #0b3d1f = 6.2:1 on #25d366 and 4.7:1 on the #1cb854 hover. Prefer "darker button + white label" instead? Change only these three values in :root above and nothing else: --wa-bg:#0d7a45; --wa-bg-h:#0a6640; --wa-fg:#fff; (5.4:1 / 4.6:1) "Exporter" chip (.tag-amber): #d98d0c on #fdeecb measured 2.35:1 -> --amber-text #8a5806 = 5.25:1 (same amber-brown family, already used by .kicker). Breadcrumb separator: #a6b3ab measured ~2.3:1 -> var(--muted) = 5.7:1. ===== end colour-contrast remediation ===== */ /* ============================================================ Footer social / marketplace links (below the WhatsApp button). Inline-SVG icons, so no icon font and no CDN request. Facebook + LinkedIn keep their official brand colours; the marketplace links use the site's own green / amber. ============================================================ */ .social-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px} .social-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;text-decoration:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);transition:background .18s,border-color .18s,transform .18s,box-shadow .18s} .social-btn svg{width:17px;height:17px;fill:currentColor;display:block} /* Brand colours — currentColor drives the inline-SVG fill */ .sm-facebook{color:#1877f2} .sm-linkedin{color:#0a66c2} .sm-indiamart{color:#7ed957} .sm-tradeindia{color:#f5a623} .sm-export{color:#7ed957} .social-btn:hover,.social-btn:focus-visible{transform:translateY(-2px);border-color:currentColor;box-shadow:0 4px 12px rgba(0,0,0,.28);background:rgba(255,255,255,.14)} .sm-facebook:hover,.sm-facebook:focus-visible{color:#4a9bff} .sm-linkedin:hover,.sm-linkedin:focus-visible{color:#4f9bea} .sm-indiamart:hover,.sm-indiamart:focus-visible{color:#a6ef86} .sm-export:hover,.sm-export:focus-visible{color:#a6ef86} .sm-tradeindia:hover,.sm-tradeindia:focus-visible{color:#ffc15c} .social-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px} @media(max-width:640px){.social-row{gap:9px}.social-btn{width:36px;height:36px}.social-btn svg{width:16px;height:16px}} /* ===== Country product pages: responsive product image containment ===== Root cause: .two-col was a 1.2fr/.8fr grid with default min-width:auto on grid items, so a large intrinsic image width forced the first column wider than the viewport on phones/tablets, causing horizontal overflow and a zoomed/clipped product photo. Collapse to one column on tablet/mobile and allow columns to shrink. Desktop (>=1025px) layout is unchanged. */ .two-col { width: 100%; max-width: 100%; box-sizing: border-box; } .two-col > * { min-width: 0; max-width: 100%; box-sizing: border-box; } .two-col img { width: 100%; height: auto; max-width: 100%; object-fit: contain; display: block; } @media (max-width: 1024px) { .two-col { grid-template-columns: 1fr; gap: 24px; align-items: start; } .two-col > * { min-width: 0; max-width: 100%; } } @media (max-width: 768px) { .two-col { gap: 20px; } .hero-mini .container { flex-direction: column; align-items: flex-start; gap: 10px; } } @media (max-width: 480px) { .container { padding-left: 12px; padding-right: 12px; } .two-col { gap: 16px; } } /* ===== responsive containment for regular product pages (.pd-wrap) ===== */ .pd-wrap { width: 100%; max-width: 100%; box-sizing: border-box; } .pd-wrap > * { min-width: 0; max-width: 100%; box-sizing: border-box; } .pd-gallery { max-width: 100%; box-sizing: border-box; } .pd-gallery .main-img { max-width: 100%; } .pd-gallery .main-img img { width: 100%; height: auto; max-width: 100%; object-fit: contain; display: block; } @media (max-width: 1024px) { .pd-wrap { grid-template-columns: 1fr; gap: 24px; align-items: start; } .pd-wrap > * { min-width: 0; max-width: 100%; } } @media (max-width: 768px) { .pd-wrap { gap: 20px; } } @media (max-width: 480px) { .pd-wrap { gap: 16px; } }