:root{--bg:#f5f6f7;--panel:#ffffff;--ink:#1f2937;--muted:#6b7280;--primary:#ef4444;--accent:#2563eb;--ring:#e5e7eb;--gnf:#0a7d28}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color:var(--ink);background:var(--bg);overflow-x:hidden;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html{font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:1600px;margin:0 auto;padding:0 12px;width:100%}
.topbar{background:#111;color:#fff;position:fixed;top:0;z-index:1000;width:100%}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;position:relative;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand .logo{width:32px;height:32px;flex-shrink:0}
.brand-name{font-weight:700;font-size:1.1rem}
.contact-mini{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0}
.contact-phone{white-space:nowrap;font-size:0.9rem} 
.contact-buttons{display:flex;gap:8px;flex-shrink:0}
.mobile-menu-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px}
.mobile-menu-toggle span{width:25px;height:3px;background:#fff;transition:all 0.3s ease;border-radius:2px}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
.btn{background:#e5e7eb;border:none;padding:10px 14px;border-radius:8px;color:#111;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.btn:hover{filter:brightness(.97);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.btn:active{transform:translateY(-1px)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.small{padding:8px 12px;font-size:.9rem}
.btn.large{padding:12px 18px;font-size:1.05rem}
.btn.outline{background:transparent;border:1px solid var(--ring)}
.mobile-br{display:none}
.navbar{background:#d11f1f;position:fixed;top:60px;z-index:999;width:100%}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0;flex-wrap:nowrap;min-height:50px}
.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-shrink:0}
.menu a{color:#fff;text-decoration:none;font-weight:600;position:relative;display:inline-block;padding:8px 0}
.search{display:flex;gap:8px;flex-shrink:0}
.search input{padding:8px 10px;border-radius:8px;border:1px solid var(--ring);min-width:260px;font-size:0.9rem}
.search button[type="submit"]{font-weight:700;font-size:0.9rem}

main{flex:1;width:100%;padding-top:110px}
.hero{background:linear-gradient(90deg,#fff, #ffecec);width:100%}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:28px 0;width:100%}
.hero-text h1{margin:0 0 8px 0;font-size:36px;line-height:1.2}
.hero-text p{color:var(--muted);margin:0 0 20px 0;line-height:1.6}
.hero-actions{margin-bottom:24px}
.hero-info{display:grid;gap:10px;margin-top:24px}
.hero-info .info-line{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ring);border-radius:10px;padding:12px 14px;max-width:720px;width:100%}
.hero-info .icon{color:var(--accent);flex-shrink:0}
html.dark .hero-info .info-line{background:#0f172a;border-color:#1f2937}
.hero-media{--hero-w:auto;--hero-h:auto;width:100%}
.hero-media img{width:var(--hero-w);height:var(--hero-h);max-width:100%;object-fit:contain;background:transparent;border-radius:12px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18));transition:transform .35s ease,filter .35s ease}
.hero-media:hover img{transform:translateY(-4px) scale(1.02);filter:drop-shadow(0 14px 30px rgba(0,0,0,.22)) saturate(1.05)}
/* Social links shown under location in hero */
.hero-social{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.hero-social .social-btn{display:inline-block;margin:0;padding:8px 12px;border-radius:8px;text-decoration:none;color:#fff;text-align:center;font-weight:600}
.hero-social .facebook{background:#1877f2}
.hero-social .whatsapp{background: darkgreen}
/* Noticeable hover for hero social buttons */
.hero-social .social-btn{transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.hero-social .social-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px rgba(0,0,0,.2);filter:brightness(1.08)}

.categories{display:grid;grid-template-columns:1fr;gap:20px;margin:20px auto;position:relative;width:100%}
/* Make Produits section full-width with small side padding */
.categories.container{max-width:100%;}
.sidebar-toggle-container{display:none}
.sidebar-toggle{display:flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;margin-bottom:16px;width:100%}
.sidebar-toggle:hover{filter:brightness(0.9)}
.sidebar{width:100%}
.sidebar .panel{background:var(--panel);border:1px solid var(--ring);border-radius:12px;padding:18px;margin-bottom:18px;width:100%}
.panel h3{margin:0 0 10px 0}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#topSellers{grid-template-columns:repeat(2,1fr)}
#topSellers li{display:flex;flex-direction:column;align-items:center;gap:6px;background:#f8fafc;border:1px solid var(--ring);border-radius:10px;padding:8px;transition:transform .2s ease,background .2s ease}
#topSellers li:hover{transform:translateY(-2px);background:#eef2ff}
#topSellers img{width:56px;height:56px;object-fit:contain;background:transparent;border-radius:6px}
#topSellers span{font-size:.8rem;text-align:center}
.services-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.services-list li{display:flex;align-items:center;justify-content:center;gap:10px;background:#f8fafc;border:1px solid var(--ring);border-radius:10px;padding:12px 16px;font-weight:600;min-height:52px;text-align:center;cursor:pointer;user-select:none;flex:1 1 calc(50% - 5px);min-width:120px}
.services-list li:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.services-list li::before{content:none;display:none}
.services-list li:nth-child(3)::before,.services-list li:nth-child(6)::before{content:none;display:none}
.services-list li:hover{background:#eef2ff}
.link-more{display:inline-block;margin-top:10px;color:var(--accent);text-decoration:none;font-weight:600}
.social .social-btn{display:block;margin:8px 0;padding:10px 12px;border-radius:8px;text-decoration:none;color:#fff;text-align:center}
.social .facebook{background:#1877f2}
.social .whatsapp{background: darkgreen}

/* Hover elevate for social buttons */
.social .social-btn{transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.social .social-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.16);filter:brightness(1.03)}

.grid{background:var(--panel);border:1px solid var(--ring);border-radius:12px;padding:20px;width:100%}
.categories .grid{padding:20px 32px}
.grid-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:12px}
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;width:100%}
@media (max-width: 900px){
  .pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;scroll-behavior:smooth;scroll-snap-type:x mandatory}
  .pills::-webkit-scrollbar{height:8px}
  .pills::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;transition:background 0.2s ease}
  .pills::-webkit-scrollbar-thumb:hover{background:#94a3b8}
  .pills::-webkit-scrollbar-track{background:transparent}
}
.pill{padding:6px 10px;border-radius:999px;background:#f3f4f6;color:#111;font-size:.9rem;cursor:pointer;border:1px solid var(--ring);transition:all 0.2s ease;scroll-snap-align:start}
.pill.active,.pill:hover{background:#111;color:#fff;border-color:#111;transform:scale(1.05)}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:16px;justify-items:stretch;width:100%}
.products::-webkit-scrollbar{height:8px}
.products::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.products::-webkit-scrollbar-track{background:transparent}
.card{border:1px solid var(--ring);border-radius:12px;padding:16px;background:#fff;position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease;display:flex;flex-direction:column;height:100%}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.card:active{transform:translateY(-1px) scale(.99)}
.card .badge{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,#111,#444);color:#fff;font-size:.7rem;padding:4px 10px;border-radius:999px;letter-spacing:.02em;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.badge.best{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.badge.new{background:linear-gradient(135deg,#22c55e,#16a34a)}
.card img{width:100%;height:260px;object-fit:contain;background:transparent;border-radius:8px;transition:transform .35s ease, filter .35s ease}
/* right panel removed */
.card:hover img{transform:scale(1.05);filter:saturate(1.1)}
.card h4{margin:10px 0 6px 0;text-align:justify;line-height:1.4;font-weight:600;color:var(--ink);min-height:2.8em;display:flex;align-items:center;justify-content:flex-start}
.price{color:var(--gnf);font-weight:700}
.muted{color:var(--muted);font-size:.9rem}
.card .actions{display:flex;flex-direction:row;gap:8px;margin-top:auto;padding-top:10px;align-items:center;justify-content:space-between}
.card .actions .btn{flex:1}
/* Compact icon-first buttons for small screens */
.phone-icon-btn{display:flex;align-items:center;justify-content:center;gap:8px}
.phone-icon-btn .label{display:inline}
/* Emphasize the "Voir détails" button */
.card .actions [data-details]{font-weight:700;font-size:1.05rem}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:2000;opacity:0;transition:opacity 0.3s ease}
.modal[aria-hidden="false"]{display:block;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);transition:background 0.3s ease}
.modal-content{position:relative;max-width:880px;margin:6vh auto;background:#fff;border-radius:12px;border:1px solid var(--ring);padding:16px;max-height:90vh;overflow-y:auto;transform:translateY(-20px) scale(0.95);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.modal[aria-hidden="false"] .modal-content{transform:translateY(0) scale(1)}
.modal-close{position:absolute;right:10px;top:8px;border:none;background:#f3f4f6;border:1px solid var(--ring);border-radius:8px;cursor:pointer;padding:6px 10px;z-index:1}
.modal-body{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
.modal-body h3{margin:0 0 20px 0}
.modal-body .specs{display:grid;gap:8px}
.spec-item{display:flex;justify-content:space-between;border-bottom:1px dashed var(--ring);padding:6px 0;color:var(--muted)}
.price-range{font-weight:700;color:var(--gnf);margin-top:12px}
/* Button style harmonized with dark theme */
.card .actions .btn.primary{background:var(--accent);color:#fff;border:1px solid transparent}
html.dark .card .actions .btn.primary{background:#3b82f6;color:#fff;border-color:#1f2937}
/* Ensure primary buttons text is white in dark theme too */
html.dark .btn.primary, html.dark a.btn.primary{color:#fff}

.newsletter{background:#0b1220;color:#fff;margin:28px 0}
.newsletter-inner{display:flex;align-items:center;justify-content:space-between;padding:28px 0;gap:12px}
.inline-form{display:flex;gap:8px}
.inline-form input{padding:10px 12px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;min-width:320px;flex:1}
.inline-form .btn{font-weight:700}

.contact{margin:16px auto 40px}
.contact-header{text-align:center;margin-bottom:32px}
.contact-header h1{margin:0 0 12px 0;font-size:2rem}
.contact-header p{color:var(--muted);font-size:1.1rem;margin:0}
.contact-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:0 auto}
.contact-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease;border-radius:12px;font-weight:600}
.contact-btn span{text-decoration:underline}
.contact-btn:hover,
.contact-btn:focus-visible{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 20px rgba(0,0,0,.12)}
.contact-btn svg{flex-shrink:0}
.contact-btn span{text-align:center}
.phone-btn{cursor:pointer}
.messenger-btn{background:#1877f2 !important;color:#fff !important;text-decoration:underline;display:flex;align-items:center;justify-content:center;gap:8px}
/* WhatsApp buttons green site-wide */
.whatsapp-btn{background:darkgreen !important;color:#fff !important;text-decoration:underline}
/* Center WhatsApp label inside product card button */
.card .actions .whatsapp-btn{display:flex;align-items:center;justify-content:center;text-align:center}


.flash{margin-top:8px;color:#065f46}

.footer{background:#1f2937;color:#cbd5e1;padding:12px 0;width:100%;margin-top:auto}
.footer-inner{padding:0;width:100%}
.footer-content{display:none}
.footer-links h4, .footer-search h4{margin:0 0 16px 0;color:#fff;font-size:1.1rem;font-weight:600}
.footer .links{display:flex;flex-direction:column;gap:8px}
.footer a{color:#cbd5e1;text-decoration:none;position:relative;display:inline-block;font-weight:500;transition:color 0.2s ease}
.footer a:hover{color:#fff}
.menu a::after, .footer a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--accent);border-radius:999px;transition:width .2s ease}
.menu a:hover::after, .menu a:focus-visible::after, .footer a:hover::after, .footer a:focus-visible::after{width:100%}
.footer .search{display:flex;flex-direction:column;gap:12px}
.footer .search input{background:#374151;border:1px solid #4b5563;color:#fff;padding:10px 12px;border-radius:8px}
.footer .search input::placeholder{color:#9ca3af}
.footer .search button{width:100%;padding:10px 12px}
.legal{margin-top:4px;text-align:center;font-size:.9rem;line-height:1.4;color:#9ca3af}

/* Contact section two-column layout: left actions, right address */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1200px;margin:0 auto}
.contact-left{display:flex;flex-direction:column;gap:20px}
/* .contact-right{background:var(--panel);border:1px solid var(--ring);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:5px;align-self:center;align-items:center;text-align:center} */
/* .contact-right h3{margin:0 0 6px 0} */
.address-link{color:#fff;background:#111827;border:1px solid var(--ring);padding:10px 12px;border-radius:10px;text-decoration:none;display:inline-block}
html.dark .address-link{background:#0b1220;border-color:#1f2937}
/* Alias to cover existing markup typo */
.adress-link{color:#fff;background:#111827;border:1px solid var(--ring);padding:10px 12px;border-radius:10px;text-decoration:none;display:inline-block}
html.dark .adress-link{background:#0b1220;border-color:#1f2937}

/* Hover states for address links */
.address-link,.adress-link{transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
.address-link:hover,.adress-link:hover{filter:brightness(1.03);box-shadow:0 8px 18px rgba(0,0,0,.12)}

/* Map image hover (wrapped in anchor) */
.map-img{border-radius:12px;display:block;max-width:100%;height: 250px;transition:transform .25s ease, box-shadow .25s ease;margin:8px auto}
.contact-right a:hover .map-img{transform:scale(1.02);box-shadow:0 10px 24px rgba(0,0,0,.18)}


/* Theme system */
html,body{transition:background-color .25s ease,color .25s ease}
html.dark{--bg:#0b0f13;--panel:#0f172a;--ink:#e5e7eb;--muted:#9ca3af;--ring:#243045;--accent:#3b82f6}
html.dark .topbar{background:#0b1220}
html.dark .navbar{background:#111827}
html.dark .pill{background:#0f172a;color:#e5e7eb;border-color:#1f2937}
html.dark .pill.active,html.dark .pill:hover{background:#e5e7eb;color:#111}
html.dark .grid,html.dark .contact-form,.sidebar .panel{background:var(--panel)}
html.dark .card{background:#0b1220;border-color:#1f2937}
html.dark .newsletter{background:#0b1220}
html.dark .inline-form input{background:#111827;border-color:#1f2937}
html.dark #topSellers li{background:#0f172a;border-color:#1f2937}
html.dark .services-list li{background:#0f172a;border-color:#1f2937}
/* Dark hero section: ETC SC Corporation */
html.dark .hero{background:linear-gradient(90deg,#0f172a,#111827)}
html.dark .hero-text h1{color:#e5e7eb}
html.dark .hero-text p{color:#e5e7eb}
/* Contact form inputs in dark theme */
html.dark .contact-form{background:#0f172a;border-color:#1f2937}
html.dark .contact-form input, html.dark .contact-form textarea{background:#111827;color:#e5e7eb;border-color:#1f2937}
html.dark .contact-form label{color:#e5e7eb}
/* Modal dark theme */
html.dark .modal-content{background:#0f172a;border-color:#1f2937}
html.dark .modal-close{background:#111827;border-color:#1f2937;color:#e5e7eb}

/* Large tablets and small desktops */
@media (max-width: 1200px){
  .products{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
  .hero-text h1{font-size:32px}
  .services-list li{flex:1 1 calc(33.333% - 7px);min-width:140px}
  .categories{grid-template-columns:1fr;gap:18px}
}

/* Tablets */
@media (max-width: 1024px){
  /* Keep desktop-like two-column hero on tablets */
  .hero-inner{grid-template-columns:1.1fr .9fr;gap:24px;text-align:left}
  .hero-text h1{font-size:28px}
  .card img{height:240px}
  .products{gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .categories{grid-template-columns:1fr;gap:18px}
  .services-list li{flex:1 1 calc(50% - 5px);min-width:120px}
  /* Desktop-like filters on tablets */
  .pills{flex-wrap:wrap;overflow:visible}
  /* Ensure navbar/hero spacing is consistent on tablets */
  .navbar{top:60px}
  main{padding-top:110px}
}

/* Small tablets and large phones */
@media (max-width: 900px){
  .container{padding:0 12px}
  .hero-inner{grid-template-columns:1fr;text-align:center;padding:20px 0}
  .hero-media{--hero-w:100%;--hero-h:auto}
  .hero-text h1{font-size:24px}
  .hero-text p{font-size:1rem;line-height:1.5}
  .hero-actions{margin-bottom:20px}
  .hero-info{margin-top:20px}
  .hero-info .info-line{padding:10px 12px;font-size:0.9rem}
  .categories{grid-template-columns:1fr;margin:20px auto}
  .sidebar-toggle-container{display:block}
  .sidebar{position:fixed;top:110px;left:0;width:100%;max-width:320px;height:calc(100vh - 110px);background:var(--panel);border-right:1px solid var(--ring);transform:translateX(-100%);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);z-index:1000;overflow-y:auto;padding:20px;box-shadow:0 0 20px rgba(0,0,0,.1)}
  .sidebar.active{transform:translateX(0);box-shadow:0 0 30px rgba(0,0,0,.15)}
  .products{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:12px}
  .card{padding:12px}
  .card img{height:220px}
  .services-list{flex-direction:column;gap:8px}
  .services-list li{flex:1 1 auto;min-width:auto;width:100%}
  .contact-form .row{grid-template-columns:1fr}
  .modal-body{grid-template-columns:1fr}
  .topbar .container{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
  .topbar .brand-name{font-size:0.95rem}
  .brand .logo{width:28px;height:28px}
  .contact-mini{display:none}
  .mobile-menu-toggle{display:flex}
  .navbar{position:fixed;top:60px;left:0;right:0;transform:none;transition:none;z-index:1000;box-shadow:0 4px 20px rgba(0,0,0,.1)}
  .navbar.active{transform:none;box-shadow:0 4px 20px rgba(0,0,0,.1)}
  .nav-inner{flex-direction:row;gap:12px;padding:10px 0;align-items:center}
  .menu{flex-direction:row;gap:8px;width:auto;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .menu a{padding:6px 8px;display:inline-block;text-align:left;border-radius:6px;background:transparent;transition:all 0.3s ease;transform:none;opacity:1}
  .menu a:hover{background:rgba(255,255,255,0.15)}
  .search{width:auto;flex-direction:row;gap:8px}
  .search input{min-width:120px;width:auto}
  .search button{width:auto}
  .contact-layout{grid-template-columns:1fr;gap:12px}
  .contact-btn{padding:14px 16px;font-size:0.95rem}
}

/* Medium tablets */
@media (max-width: 768px){
  .hero-inner{padding:16px 0}
  .hero-text h1{font-size:22px}
  .hero-text p{font-size:0.95rem}
  .hero-info .info-line{padding:8px 10px;font-size:0.85rem}
  .products{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
  .card{padding:12px}
  .card img{height:200px}
  .card h4{font-size:1rem;margin:8px 0 4px 0}
  .card .actions{margin-top:8px}
  .modal-content{max-width:92%}
  .modal-body img{height:auto;max-height:55vh;object-fit:contain}
  .products{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .contact-layout{grid-template-columns:1fr;gap:12px}
  .contact-btn{width:100%;padding:14px 16px;font-size:0.95rem}
  .footer-content{grid-template-columns:1fr;gap:24px;text-align:center}
  .footer .links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px}
  .footer .search{width:100%;max-width:400px;margin:0 auto}
}

/* Mobile phones */
@media (max-width: 560px){
  .container{padding:0 12px}
  .hero-inner{padding:20px 0;gap:16px}
  .hero-text h1{font-size:24px;margin-bottom:12px;line-height:1.3}
  .hero-text p{font-size:1rem;margin-bottom:20px;line-height:1.5}
  .hero-actions{margin-bottom:20px}
  .hero-info{margin-top:20px;gap:12px}
  .hero-info .info-line{flex-direction:row;text-align:left;gap:10px;padding:12px 14px;font-size:0.9rem;border-radius:12px}
  .hero-info .info-line span{font-size:0.9rem}
  .categories{margin:20px auto}
  /* One item per row on phones */
  .products{display:grid;overflow:visible;grid-template-columns:1fr;gap:12px;margin-top:8px}
  .card{max-width:640px;margin:0 auto;width:100%}
  .card{padding:8px}
  .card img{height:180px}
  .card h4{font-size:1.1rem;margin:12px 0 8px 0;font-weight:600}
  .card .actions{margin-top:12px;gap:10px}
  .card .actions .btn{padding:12px 14px;font-size:0.95rem;border-radius:10px;font-weight:600}
  /* Icon-only for phone and Messenger on mobile */
  .card .actions .phone-icon-btn .label{display:none}
  .card .actions .messenger-btn span{display:none}
  .card .actions .messenger-btn::after{content:'Mess..'}
  .card .actions .btn svg{margin:0}
  .btn{padding:12px 16px;font-size:0.95rem;border-radius:10px}
  .grid{padding:20px;border-radius:16px}
  .categories .grid{padding:20px}
  .grid-title{flex-direction:column;align-items:flex-start;gap:16px}
  .contact-layout{grid-template-columns:1fr;gap:16px}
  .contact-btn{width:100%;padding:18px 20px;font-size:1rem;border-radius:12px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
  .contact-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 30px rgba(0,0,0,.15)}
  .contact-btn span{font-size:1rem}
  .footer-content{grid-template-columns:1fr;gap:24px;text-align:center}
  .footer .links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px}
  .footer .search{width:100%;max-width:400px;margin:0 auto}
  .modal-content{margin:4vh auto;max-width:95%;padding:20px;max-height:92vh;border-radius:16px}
  .modal-body{padding:12px;gap:16px}
  .modal-body img{width:100%;height:auto;max-height:50vh;object-fit:contain;border-radius:12px}
  .modal-body h3{font-size:1.4rem;margin-bottom:16px}
  .modal-close{right:12px;top:8px;padding:8px 12px;border-radius:8px}
  .sidebar{top:110px;width:100%;max-width:320px;border-radius:0 16px 16px 0}
  .sidebar .panel{padding:16px;border-radius:12px}
  .services-list{flex-direction:column;gap:8px}
  .services-list li{flex:1 1 auto;min-width:auto;width:100%;min-height:48px;padding:12px 16px;font-size:0.95rem;border-radius:10px;transition:all 0.2s ease}
  .services-list li:hover{transform:translateX(4px);background:#eef2ff}
  #topSellers{grid-template-columns:1fr}
  #topSellers li{flex-direction:row;text-align:left;gap:12px;border-radius:10px}
  #topSellers img{width:48px;height:48px;border-radius:8px}
  /* Show all filters (wrap, no horizontal scroll) */
  .pills{display:flex;flex-wrap:wrap;justify-content:flex-start;overflow:visible;gap:8px;padding-bottom:0}
  .pill{font-size:0.85rem;padding:8px 12px;border-radius:20px;transition:all 0.2s ease}
  .pill:hover{transform:scale(1.05)}
  .topbar .container{padding:8px 10px}
  .topbar .brand-name{font-size:0.9rem}
  .navbar{top:60px}
  /* Add breathing space between navbar and hero */
  main{padding-top:120px}
  /* Show brand line break on phones */
  .mobile-br{display:inline}
}

@media (max-width: 480px){
  .container{padding:0 8px}
  .topbar .container{padding:6px 8px}
  .topbar .brand-name{font-size:0.85rem}
  .brand .logo{width:24px;height:24px}
  .hero-text h1{font-size:22px}
  .hero-text p{font-size:0.95rem}
  /* Tighten nav spacing for very small phones */
  .menu{gap:6px}
  .menu a{padding:4px 6px}
  /* One item per row on very small phones */
  .products{display:grid;overflow:visible;grid-template-columns:1fr;gap:10px}
  .card{max-width:600px;margin:0 auto;width:100%}
  .card{padding:6px}
  .card img{height:160px}
  .grid{padding:12px}
  .categories .grid{padding:12px}
  .pills{gap:6px}
  .pill{font-size:0.85rem;padding:6px 10px}
  .contact-btn{padding:16px 18px;font-size:0.95rem}
  .hero-info .info-line{padding:10px 12px;font-size:0.85rem}
  .search input{min-width:100px}
  /* Maintain extra spacing under fixed headers */
  main{padding-top:120px}
}

/* Extra small devices */
@media (max-width: 360px){
  .products{grid-template-columns:1fr;gap:12px}
  .card{padding:10px}
  .card img{height:160px}
  .hero-text h1{font-size:20px}
  .hero-text p{font-size:0.9rem}
  .pills{overflow-x:auto;padding-bottom:8px}
  .pill{flex-shrink:0;min-width:fit-content}
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape){
  .hero-inner{padding:8px 0}
  .hero-text h1{font-size:18px;margin-bottom:4px}
  .hero-text p{font-size:0.8rem;margin-bottom:8px}
  .hero-actions{margin-bottom:8px}
  .hero-info{margin-top:8px}
  .hero-info .info-line{padding:6px 8px;font-size:0.75rem}
  .categories{margin:8px auto}
  .products{gap:8px;margin-top:4px}
  .card{padding:6px}
  .card img{height:120px}
  .grid{padding:8px}
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .brand .logo{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}
  .card img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}
}

/* Mobile-specific enhancements */
@media (max-width: 900px){
  /* Better touch targets */
  .btn, .pill, .services-list li, .menu a{min-height:44px;min-width:44px}
  
  /* Improved card interactions */
  .card{will-change:transform}
  .card:active{transform:scale(0.98)}
  
  /* Better modal handling */
  .modal-backdrop{backdrop-filter:blur(4px)}
  
  /* Enhanced sidebar animations */
  .sidebar .panel{transform:translateX(-20px);opacity:0;transition:all 0.3s ease}
  .sidebar.active .panel{transform:translateX(0);opacity:1}
  .sidebar.active .panel:nth-child(1){transition-delay:0.1s}
  .sidebar.active .panel:nth-child(2){transition-delay:0.2s}
  .sidebar.active .panel:nth-child(3){transition-delay:0.3s}
  
  /* Smooth scroll for pills */
  .pills{scroll-padding-left:12px}
  
  /* Better button feedback */
  .btn:active{transform:scale(0.95)}
  .contact-btn:active{transform:scale(0.98)}
  
  /* Dynamic grid adjustments */
  .products{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* Fluid grid for very wide screens */
@media (min-width: 1400px){
  .products{grid-template-columns:repeat(4,1fr);gap:24px}
  .categories{grid-template-columns:1fr;gap:24px}
}

/* Ultra-wide screens */
@media (min-width: 1600px){
  .products{grid-template-columns:repeat(4,1fr);gap:28px}
  .categories{grid-template-columns:1fr;gap:28px}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse){
  .card:hover{transform:none;box-shadow:0 4px 12px rgba(0,0,0,.08)}
  .card:active{transform:scale(0.98)}
  .btn:hover{filter:none}
  .btn:active{transform:scale(0.95)}
  .pill:hover{transform:none}
  .pill:active{transform:scale(0.95)}
}