:root{
  --brand:#e67e22;
  --dark:#222;
  --muted:#666;
  --bg:#f9f9f9;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height:1.5;
  color:#222;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:hover,a:focus{text-decoration:none}
img{max-width:100%;display:block}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;left:auto;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff;border-radius:4px}

/* Header */
header{background:var(--dark);color:#fff;position:sticky;top:0;z-index:60}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{font-weight:700;font-size:1.25rem}
nav ul{display:flex;gap:.5rem;align-items:center;list-style:none}
nav a{display:inline-block;padding:.45rem .75rem;border-radius:6px;color:#fff}
nav a:hover,nav a:focus{background:rgba(255,255,255,0.06);outline:none}
.cta{background:var(--brand);color:#fff;padding:.5rem .9rem;border-radius:6px}

/* Mobile nav */
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.2rem}
.mobile-nav{display:none}

/* Hero */
.hero{position:relative;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;min-height:50vh;background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.45))}
.hero-content{position:relative;z-index:2;padding:2rem;max-width:900px}
.hero h1{font-size:clamp(1.6rem,3.5vw,2.5rem);margin-bottom:.75rem}
.hero-sub{font-size:clamp(1rem,2.2vw,1.1rem);margin-bottom:1rem;color:var(--bg)}
.hero-ctas{display:flex;gap:.6rem;justify-content:center;align-items:center;margin-bottom:.6rem}
.hero-cta{padding:.75rem 1.1rem;font-size:1rem;border-radius:8px}
.btn-secondary{display:inline-block;padding:.6rem .95rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.18);border-radius:8px}
.hero-micro{font-size:.9rem;color:rgba(255,255,255,0.9);margin-top:.4rem}
.hero-phone{color:#fff;font-weight:700}

/* Sections */
section{padding:3rem 0}
.section-title{text-align:center;font-size:1.6rem;margin-bottom:1rem;color:var(--dark)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.feature-box{background:#fff;padding:1.25rem;border-radius:10px;box-shadow:0 6px 18px rgba(25,25,25,0.06);text-align:center;transition:transform 0.3s ease}
.feature-box:hover{transform:translateY(-5px)}
.icon{font-size:1.6rem;color:var(--brand);margin-bottom:.5rem}

/* Products */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.product-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(25,25,25,0.06);display:flex;flex-direction:column;transition:transform 0.3s ease, box-shadow 0.3s ease}
.product-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px rgba(25,25,25,0.12)}
.product-card img{height:180px;object-fit:cover;width:100%;display:block}
.product-info{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.price{color:var(--brand);font-weight:700}

/* Filter bar styling */
.filter-bar{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;background:linear-gradient(180deg,#fff,#fbfbfb);padding:.75rem;border-radius:10px;margin-bottom:1rem;border:1px solid #eee;box-shadow:0 6px 14px rgba(25,25,25,0.03)}
.filter-bar label{font-weight:600;color:var(--muted);margin-right:.35rem}
.filter-bar select,.filter-bar input[type="search"]{padding:.5rem .6rem;border-radius:8px;border:1px solid #ddd;background:#fff;min-height:40px}
.filter-bar select:focus,.filter-bar input[type="search"]:focus{outline:3px solid rgba(230,126,34,.12);outline-offset:2px}
.filter-bar select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 1rem) calc(1rem/2), calc(100% - .65rem) calc(1rem/2);background-size:.45rem .45rem,.45rem .45rem;background-repeat:no-repeat;padding-right:2.2rem}
.filter-bar .btn-primary{margin-left:auto}

@media (max-width:700px){
  .filter-bar{gap:.5rem}
  .filter-bar .btn-primary{width:100%;order:3}
  .filter-bar select,.filter-bar input[type="search"]{flex:1 1 100%}
}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}
.gallery-grid img{width:100%;height:120px;object-fit:cover;border-radius:8px}

/* Brands section */
.brands-grid{display:flex;align-items:center;justify-content:center;padding:1rem}
.brand-single{max-width:980px;width:100%;display:flex;align-items:center;justify-content:center}
.brand-single img.brands-full{width:100%;height:200px;object-fit:contain;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,0.06)}

@media(min-width:900px){
  .brand-single img.brands-full{height:320px}
}

@media(max-width:480px){
  .brand-single img.brands-full{height:160px}
}

/* Framed image aspect ratio support for browsers that support it */
.product-card img, .gallery-grid img{aspect-ratio:16/9}

/* Product badge */
.badge{position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;padding:.25rem .5rem;border-radius:6px;font-size:.8rem}
.product-card{position:relative}

/* Modal / Lightbox */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:120;opacity:0;pointer-events:none;transition:opacity .18s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:#fff;max-width:900px;width:96%;border-radius:8px;box-shadow:0 20px 40px rgba(10,10,10,0.3);overflow:hidden}
.modal .modal-body{padding:1rem}
.modal .modal-header{padding:1rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.modal .close-btn{background:transparent;border:0;font-size:1.1rem;cursor:pointer}

/* Prevent body scroll when menu or modal open */
.scroll-lock{overflow:hidden;height:100%}

/* Lightbox for gallery thumbnails */
.gallery-grid img{cursor:pointer;transition:transform .15s}
.gallery-grid img:hover{transform:scale(1.03)}

/* Floating WhatsApp */
.whatsapp-float{position:fixed;right:16px;bottom:16px;background:var(--brand);color:#fff;padding:.6rem .75rem;border-radius:999px;font-size:1.2rem;box-shadow:0 6px 16px rgba(0,0,0,0.2);z-index:110}

/* Testimonials */
.testimonial{background:#fff;padding:1.25rem;border-radius:10px;box-shadow:0 6px 18px rgba(25,25,25,0.06);text-align:center;font-style:italic}

/* Carousel */
.testimonials-carousel{position:relative;display:flex;align-items:center;gap:1rem;justify-content:center}
.carousel-track{flex:1;overflow:hidden}
.carousel-track .testimonial-slide{min-height:120px;padding:1.25rem;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06);transition:transform .35s ease;display:none;max-width:740px;margin:0 auto;text-align:center}
.carousel-track .testimonial-slide[aria-hidden="false"]{display:block}
.carousel-prev,.carousel-next{background:transparent;border:1px solid #eee;padding:.45rem .6rem;border-radius:6px;cursor:pointer}
.carousel-indicators{display:flex;gap:.4rem;margin-top:.6rem;justify-content:center}
.carousel-indicators button{width:10px;height:10px;border-radius:50%;background:#ddd;border:0}
.carousel-indicators button[aria-selected="true"]{background:var(--brand)}

/* FAQ */
.faq-list{max-width:900px;margin:0 auto;display:grid;gap:.6rem}
.faq-item{background:#fff;border-radius:8px;border:1px solid #f0f0f0}
.faq-q{width:100%;text-align:left;padding:.8rem 1rem;background:transparent;border:0;font-weight:700;cursor:pointer}
.faq-q{width:100%;text-align:left;padding:.8rem 1rem;background:transparent;border:0;font-weight:700;cursor:pointer;color:var(--brand)}
.faq-q:after{content:"+";float:right}
.faq-q[aria-expanded="true"]:after{content:"−"}
.faq-q:hover,.faq-q:focus{background:linear-gradient(90deg, rgba(230,126,34,0.06), rgba(230,126,34,0.03));outline:none}
/* active/expanded question background */
.faq-q[aria-expanded="true"]{background:linear-gradient(90deg, rgba(230,126,34,0.14), rgba(230,126,34,0.06));color:var(--dark)}
.faq-a{padding:0 1rem 1rem 1rem;color:var(--muted)}

/* Contact Form */
.contact-form{max-width:640px;margin:0 auto;background:#fff;padding:1.25rem;border-radius:10px;box-shadow:0 6px 18px rgba(25,25,25,0.06)}
.contact-form label{display:block;margin-bottom:.25rem;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:6px;margin-bottom:.75rem}
.contact-form button{display:inline-block;padding:.6rem 1rem;background:var(--brand);color:#fff;border:none;border-radius:6px;cursor:pointer}
.contact-form button:hover{background:#cf6a16}

/* Buttons */
.btn-primary{display:inline-block;padding:.55rem .9rem;background:var(--brand);color:#fff;border-radius:6px;text-decoration:none;transition:background 0.3s ease}
.btn-primary:hover,.btn-primary:focus{background:#cf6a16}

/* remove default browser borders for primary buttons used as actions */
.btn-primary, button.open-category, button.tmpl-enquire{border:0}
.btn-primary:focus, button.open-category:focus, button.tmpl-enquire:focus{outline:3px solid rgba(230,126,34,.18);outline-offset:2px;box-shadow:none}

/* Form messages */
.form-message{display:none;padding:.75rem;border-radius:6px;margin-top:.5rem}
.form-message.success{display:block;background:#e9f6ef;color:#064e3b}
.form-message.error{display:block;background:#fff1f2;color:#7f1d1d}

/* Footer */
footer{background:var(--dark);color:#cfcfcf;padding:1.25rem;text-align:center}
footer a{color:var(--brand)}

.designer{margin-top:.5rem;font-size:0.9rem;color:#bdbdbd}
.designer a{color:#fff;text-decoration:underline}

/* Social icons in footer */
.socials{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.6rem}
.social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:#fff;text-decoration:none}
.social svg{width:20px;height:20px}
.social:focus{outline:3px solid rgba(230,126,34,.18);outline-offset:3px}

/* Platform brand colors */
.social-fb{background:#1877F2}
.social-ig{background:linear-gradient(45deg,#405de6,#833ab4,#fd1d1d,#fcb045)}
.social-x{background:#1DA1F2}
.social-tt{background:#000000}

.social:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,0.12)}

@media(max-width:600px){
  .social{width:36px;height:36px;border-radius:6px}
}

/* Floating WhatsApp button */
.whatsapp-float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:20px;
  right:20px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  text-decoration:none;
  box-shadow:0 6px 12px rgba(0,0,0,0.2);
  transition:transform 0.3s ease;
  z-index:100;
}
.whatsapp-float:hover{transform:scale(1.1)}

/* Focus styles for accessibility */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(230,126,34,.18);outline-offset:2px}

/* Responsive */
@media (max-width:800px){
  nav ul{display:none}
  .desktop-nav{display:none}
  .nav-toggle{display:inline-block}
  .mobile-nav{display:none;background:var(--dark);position:absolute;left:0;right:0;top:100%;padding:1rem;border-top:1px solid rgba(255,255,255,0.04)}
  .mobile-nav.open{display:block}
  .mobile-nav a{display:block;padding:.5rem 0;color:#fff}
}

/* Category cards (used for the product categories view) */
.category-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(25,25,25,0.06);display:flex;flex-direction:column}
.category-card img{height:160px;object-fit:cover;width:100%}
.category-card .product-info{padding:1rem}

/* animation helpers for filtering */
.category-card.anim-transition{transition:opacity .25s ease, transform .28s ease}
.category-card.hidden{opacity:0;transform:translateY(8px);pointer-events:none}

/* Filter status */
.filter-status{margin-left:1rem;color:var(--muted);font-size:.95rem;display:flex;align-items:center}
.filter-status #filterCount{font-weight:700;color:var(--brand);margin:0 .25rem}

/* Category modal */

#categoryModal{ /* overlay */
  display:flex;align-items:center;justify-content:center;padding:1rem;z-index:130
}
#categoryModal .modal{max-width:760px;width:92%;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfbfb);box-shadow:0 30px 60px rgba(10,10,10,0.3);transform:translateY(12px);opacity:0;transition:opacity .28s ease,transform .28s ease;max-height:85vh}
#categoryModal.open .modal{transform:translateY(0);opacity:1}

.category-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:linear-gradient(90deg,var(--brand),#cf6a16);color:#fff}
.category-modal-header h3{margin:0;font-size:1.25rem}
.modal-close{background:rgba(255,255,255,0.12);border:0;color:#fff;padding:.35rem .6rem;border-radius:8px;cursor:pointer}
.modal-close:hover{background:rgba(255,255,255,0.18)}

.category-modal-body{display:grid;grid-template-columns:1fr;gap:0;max-height:72vh;overflow:hidden}
.category-modal-body .left,.category-modal-body .right{padding:1rem}
.category-prices{background:#fff;border-right:1px solid #f1f1f1;padding:1rem;border-bottom:1px solid #f6f6f6}
.category-prices .category-price{background:#fff;padding:.45rem .6rem;border-radius:6px;margin-bottom:.4rem;border:1px solid #f0f0f0}
.category-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem;padding:1rem;overflow:auto}
.category-gallery img{width:100%;height:140px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.category-gallery img:hover{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,0.12)}
.category-gallery .cat-item figcaption{font-size:.8rem;padding:.35rem 0;text-align:center;color:var(--muted)}

.lightbox-wrapper img{max-height:70vh;object-fit:contain}

@media(min-width:900px){
  .category-modal-body{grid-template-columns:320px 1fr}
  .category-prices{border-bottom:0;height:100%;overflow:auto}
  .category-gallery{padding:1.25rem}
  /* Larger modal and thumbnails on wide screens */
  #categoryModal .modal{max-width:720px;max-height:88vh}
  .category-modal-body{max-height:80vh}
  .category-gallery .cat-item img{height:220px}
}

/* Modal visual polish */
.category-price-list{display:flex;flex-direction:column;gap:.5rem}
.category-price{background:#fff;padding:.6rem;border-radius:8px;border:1px solid #f0f0f0;color:var(--dark);font-weight:600}
.category-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;padding:1rem;align-items:start}
.category-gallery .cat-item{background:#fff;padding:.45rem;border-radius:8px;text-align:center;box-shadow:0 6px 16px rgba(10,10,10,0.04)}
.category-gallery .cat-item img{height:120px;object-fit:cover;border-radius:6px}
.category-gallery .cat-item figcaption{font-size:.85rem;color:var(--muted);margin-top:.35rem}
.lightbox-wrapper{display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;padding:1rem}
.lightbox-wrapper img{max-width:100%;max-height:70vh;border-radius:6px}
.modal-close{font-size:1rem;padding:.4rem .6rem}

/* small responsive tweak */
@media(max-width:900px){
  .category-modal-body{grid-template-columns:1fr}
  .category-prices{border-right:none;border-bottom:1px solid #eee}
}

/* thin custom scrollbar for modal gallery */
.category-gallery::-webkit-scrollbar{height:8px}
.category-gallery::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:8px}

/* Image diagnostics banner */
.image-debug-banner{background:#fff3cd;border:1px solid #ffeeba;color:#856404;padding:.6rem .9rem;border-radius:8px;display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.image-debug-banner .btn{background:transparent;border:1px solid #ddd;padding:.4rem .6rem;border-radius:6px;cursor:pointer}

/* Back to top */
.back-to-top{position:fixed;right:16px;bottom:90px;width:48px;height:48px;border-radius:8px;border:0;background:var(--dark);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,0.2);cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .22s,transform .22s;z-index:120}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.contact-email{margin-top:.5rem;font-size:.95rem;color:var(--muted)}
.contact-email a{color:var(--brand)}