/* AHDPE — design system
   rounded · clean · modern · NO shadows · NO borders · Noto Sans Thai */

:root{
  --navy:#00146d; --navy-deep:#000c42; --blue:#00146d; --blue-700:#1b3aa0;
  --cyan:#16B6E8; --cyan-soft:#7FD6F2;
  --sky:#EAF2FB; --sky-2:#F4F8FD; --sky-3:#FBFCFE;
  --ink:#0C1A33; --muted:#5C6B85; --white:#fff;
  --line:#E7EEF7; --green:#06C755;
  --radius:24px; --radius-sm:16px; --radius-xs:12px; --pill:999px;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Noto Sans Thai", system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.3; color:var(--navy); letter-spacing:-.01em}
p{margin:0}
.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:64px 0}
.section--tint{background:#F4F5F7}
.section--sky{background:var(--sky)}
.section--dark{background:linear-gradient(125deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .prose p{color:#c7d4ec}
.section--dark .about-media{background:rgba(255,255,255,.06)}
.section--dark .about-media img{filter:brightness(0) invert(1)}

.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  line-height:1; user-select:none;
}

/* ---------- buttons (pill, > 30px radius) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:0; border-radius:var(--pill); font-family:inherit; font-weight:600;
  font-size:15px; padding:13px 28px; transition:.18s ease; white-space:nowrap;
}
.btn .material-symbols-rounded{font-size:20px}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-700)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn-cyan{background:var(--cyan); color:var(--navy-deep)}
.btn-cyan:hover{background:#0fa6d6}
.btn-line{background:var(--green); color:#fff}
.btn-line:hover{filter:brightness(.94)}
.btn-ghost{background:var(--sky); color:var(--navy)}
.btn-ghost:hover{background:#dde9f8}
.btn-white{background:#fff; color:var(--navy)}
.btn-white:hover{background:var(--sky)}
.btn-outline-white{background:transparent; border:2px solid rgba(255,255,255,.65); color:#fff}
.btn-outline-white:hover{background:#fff; color:var(--navy)}
.btn-sm{padding:10px 20px; font-size:14px}
.btn-block{width:100%; justify-content:center}

/* ---------- icon on circular background ---------- */
.icon-circle{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  background:var(--sky); color:var(--navy);
  display:grid; place-items:center;
}
.icon-circle .material-symbols-rounded{font-size:28px}
.icon-circle--cyan{background:var(--cyan); color:var(--navy-deep)}
.icon-circle--navy{background:var(--navy); color:#fff}
.icon-circle--lg{width:76px; height:76px}
.icon-circle--lg .material-symbols-rounded{font-size:38px}

.chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--sky);
  color:var(--navy); border-radius:var(--pill); padding:7px 16px; font-size:14px; font-weight:500;
}

/* ---------- top utility bar ---------- */
.topbar{background:var(--navy-deep); color:#cfe0f5; font-size:13.5px}
.topbar .container{display:flex; gap:22px; align-items:center; min-height:42px; flex-wrap:wrap}
.topbar a{display:inline-flex; align-items:center; gap:6px; color:#cfe0f5}
.topbar a:hover{color:#fff}
.topbar .material-symbols-rounded{font-size:17px; color:var(--cyan)}
.topbar .spacer{margin-left:auto}

/* ---------- header (solid white, sticky) ---------- */
.header{position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 0 rgba(0,20,109,.06)}
.header .container{display:flex; align-items:center; gap:18px; height:74px}
.brand{display:flex; align-items:center}
.brand img{height:52px; width:auto; display:block}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{padding:9px 15px; border-radius:var(--pill); font-weight:500; white-space:nowrap; color:var(--ink); font-size:14px}
.nav a:hover,.nav a.active{background:var(--sky); color:var(--navy)}
.header .actions{display:flex; align-items:center; gap:10px}
.icon-btn{width:44px; height:44px; border-radius:50%; background:var(--sky); display:grid; place-items:center; color:var(--navy); flex:0 0 auto; cursor:pointer; border:0}
.icon-btn:hover{background:#dde9f8}
.icon-btn .material-symbols-rounded{font-size:22px}
.burger{display:none; background:var(--sky); border:0; border-radius:50%; width:44px; height:44px; place-items:center; cursor:pointer; color:var(--navy)}
.burger .material-symbols-rounded{font-size:26px}

.search-mini{display:flex; align-items:center; gap:8px; background:var(--sky); border-radius:var(--pill); padding:10px 16px; color:var(--muted)}
.search-mini input{border:0; background:transparent; outline:0; font-family:inherit; font-size:14.5px; width:100%; color:var(--ink)}
.search-mini .material-symbols-rounded{font-size:20px; color:var(--navy)}

/* header live search */
[x-cloak]{display:none !important}
.header-search{position:relative; width:min(260px,28vw)}
.header-search__box{display:flex; align-items:center; gap:8px; background:var(--sky); border-radius:var(--pill); padding:9px 16px}
.header-search__box .material-symbols-rounded{font-size:20px; color:var(--navy)}
.header-search__box input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:inherit; font-size:14px; color:var(--ink)}
.header-search__panel{position:absolute; top:calc(100% + 10px); right:0; width:min(380px,86vw); background:#fff; border-radius:16px; box-shadow:0 16px 44px rgba(0,20,109,.16); overflow:hidden; z-index:80; max-height:72vh; overflow-y:auto}
.hs-item{display:flex; align-items:center; gap:12px; padding:10px 14px}
.hs-item:hover{background:#F4F5F7}
.hs-thumb{width:46px; height:46px; border-radius:10px; background:#f1f4f8; display:grid; place-items:center; flex:0 0 auto; overflow:hidden}
.hs-thumb img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
.hs-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.hs-name{font-size:13.5px; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hs-price{font-size:12.5px; color:var(--blue); font-weight:600}
.hs-state{padding:18px; text-align:center; color:var(--muted); font-size:13.5px}
.hs-all{display:flex; align-items:center; justify-content:center; gap:5px; padding:12px 14px; color:var(--blue); font-weight:600; font-size:13.5px; background:#F4F5F7}
.hs-all:hover{background:var(--sky)}
.hs-all .material-symbols-rounded{font-size:16px}

.header .mobile-menu{display:none}
.header .mobile-menu.open{display:block; padding:8px 0 18px}
.mobile-menu a{display:block; padding:12px 16px; border-radius:14px; font-weight:500; color:var(--ink)}
.mobile-menu a:hover{background:var(--sky)}

/* ---------- hero (industrial photo, left text, floating search card) ---------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--navy-deep); min-height:70vh; display:flex; align-items:center}
.hero__slides{position:absolute; inset:0; z-index:0}
.hero__slide{position:absolute; inset:0; background-size:cover; background-position:center 38%; opacity:0; will-change:opacity, transform;
  animation-duration:32s; animation-timing-function:linear; animation-iteration-count:infinite; animation-name:heroFade, heroKen}
.hero__slide:nth-child(1){animation-delay:0s}
.hero__slide:nth-child(2){animation-delay:8s}
.hero__slide:nth-child(3){animation-delay:16s}
.hero__slide:nth-child(4){animation-delay:24s}
.hero__slide:nth-child(even){animation-name:heroFade, heroKen2}
@keyframes heroFade{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
@keyframes heroKen{0%{transform:scale(1.05) translate(0,0)}30%{transform:scale(1.19) translate(-2%,-1.5%)}100%{transform:scale(1.19) translate(-2%,-1.5%)}}
@keyframes heroKen2{0%{transform:scale(1.19) translate(2%,1.5%)}30%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.05) translate(0,0)}}
@media (prefers-reduced-motion:reduce){
  .hero__slide{animation:none; opacity:0}
  .hero__slide:nth-child(1){opacity:1}
}
.hero__overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(5,18,48,.94) 0%, rgba(7,26,68,.86) 34%, rgba(7,26,68,.46) 68%, rgba(7,26,68,.18) 100%)}
.hero .container{position:relative; z-index:2; width:100%}
.hero__inner{max-width:600px; padding:80px 0}
.hero .eyebrow{color:var(--cyan-soft); font-weight:600; letter-spacing:4px; font-size:13px; margin-bottom:16px}
.hero h1{color:#fff; font-size:clamp(31px,4.6vw,52px); line-height:1.15}
.hero h1 .accent{color:var(--cyan)}
.hero p.lead{color:#cdddf4; font-size:clamp(15.5px,1.8vw,18px); margin-top:18px; max-width:520px}
.hero .cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}

/* floating search card, bottom-right, overlapping next section */
.hero__searchwrap{position:absolute; left:0; right:0; bottom:-46px; z-index:5; pointer-events:none}
.hero__searchwrap .container{display:flex; justify-content:flex-end}
.hero__search{pointer-events:auto; width:min(430px,92%); background:var(--navy); border-radius:18px; padding:22px 24px}
.hero__search h3{color:#fff; font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:8px}
.hero__search h3 .material-symbols-rounded{color:var(--cyan); font-size:20px}
.hero__search form{display:flex; gap:8px; background:#fff; border-radius:var(--pill); padding:6px 6px 6px 18px}
.hero__search input{flex:1; border:0; outline:0; background:transparent; font-family:inherit; font-size:14.5px; color:var(--ink)}

/* ---------- feature strip ---------- */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feature{display:flex; gap:14px; align-items:center; background:#fff; border-radius:var(--radius); padding:20px}
.section--tint .feature{background:#fff}
.feature h4{font-size:15.5px}
.feature p{font-size:13.5px; color:var(--muted)}

/* ---------- section heading ---------- */
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap}
.head .eyebrow{color:var(--blue); font-weight:600; letter-spacing:2px; font-size:13px; margin-bottom:6px}
.head h2{font-size:30px}
.head p{color:var(--muted); margin-top:6px}
.head .link{color:var(--blue); font-weight:600; display:inline-flex; align-items:center; gap:4px}

/* ---------- category slider ---------- */
.slide-nav{display:flex; gap:8px}
.slide-btn{width:46px; height:46px; border-radius:50%; border:0; background:#fff; color:var(--navy); cursor:pointer; display:grid; place-items:center}
.slide-btn:hover{background:var(--sky); color:var(--blue)}
.slide-btn .material-symbols-rounded{font-size:24px}
.cat-track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 12px; scrollbar-width:none}
.cat-track::-webkit-scrollbar{display:none}
.cat-slide{flex:0 0 clamp(228px,27%,285px); scroll-snap-align:start; background:#fff; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease}
.cat-slide:hover{transform:translateY(-5px)}
.cat-slide__img{position:relative; aspect-ratio:4/3; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:contain; display:grid; place-items:center; padding:8px}
.cat-slide__img .ph{font-size:50px; color:#c7d6ea}
.cat-slide__badge{position:absolute; top:12px; left:12px; background:var(--navy); color:#fff; font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--pill)}
.cat-slide__body{padding:14px 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.cat-slide__body .name{font-weight:700; color:var(--navy); font-size:16px}
.cat-slide__body .go{color:var(--blue); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:3px; white-space:nowrap}
.cat-slide__body .go .material-symbols-rounded{font-size:16px}

/* ---------- product grid + card ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.product-card{background:#fff; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:.18s ease}
.product-card:hover{transform:translateY(-4px)}
.product-card .thumb{position:relative; aspect-ratio:1/1; background:#fff; display:grid; place-items:center; padding:5px}
.product-card .thumb img{max-width:100%; max-height:100%; width:auto; object-fit:contain; mix-blend-mode:multiply}
.product-card .body{padding:6px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1}
.product-card .cat-tag{color:var(--muted); font-size:12px; font-weight:500}
.product-card .title{font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px}
.product-card .price{margin-top:auto; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.price-now{color:var(--blue); font-weight:700; font-size:19px}
.price-was{color:var(--muted); text-decoration:line-through; font-size:13.5px}
.price-req{color:var(--navy); font-weight:700; font-size:15px}
.badge-sale{position:absolute; top:12px; left:12px; background:var(--cyan); color:var(--navy-deep); font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--pill)}
.product-card .ask{margin-top:10px}

/* card sitting on tinted section keeps white pop without borders/shadow */
.section--tint .product-card,.section--sky .product-card{background:#fff}

/* ---------- listing layout ---------- */
.listing{display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:start}
.sidebar{background:var(--sky-2); border-radius:var(--radius); padding:22px}
.sidebar h3{font-size:16px; margin-bottom:14px}
.sidebar a{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:var(--pill); color:var(--ink); font-size:14.5px; font-weight:500}
.sidebar a:hover{background:#fff}
.sidebar a.active{background:var(--blue); color:#fff}
.sidebar a.active .n{color:#dbe9fb}
.sidebar a .n{color:var(--muted); font-size:12.5px}
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.toolbar .count{color:var(--muted); font-size:14px}
.select{background:var(--sky); border:0; border-radius:var(--pill); padding:11px 18px; font-family:inherit; font-size:14.5px; color:var(--navy); font-weight:500; cursor:pointer; outline:0}

/* mobile category chips (shown when the sidebar is hidden) */
.mobile-cats{display:none}
@media (max-width:980px){
  .mobile-cats{display:flex; gap:8px; overflow-x:auto; padding:2px 0 20px; scrollbar-width:none}
  .mobile-cats::-webkit-scrollbar{display:none}
  .mcat{flex:0 0 auto; background:var(--sky); color:var(--navy); border-radius:var(--pill); padding:8px 16px; font-size:13.5px; font-weight:500; white-space:nowrap}
  .mcat.active{background:var(--navy); color:#fff}
}

/* breadcrumb */
.crumb{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13.5px; padding:22px 0; flex-wrap:wrap}
.crumb a:hover{color:var(--blue)}
.crumb .material-symbols-rounded{font-size:16px}

/* ---------- page hero (inner-page gradient banner, blue tones from logo) ---------- */
.page-hero{background:linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 32%, #1450c0 82%, #2f8ed0 125%); color:#fff; padding:44px 0 42px}
.page-hero--slim{padding:18px 0}
.page-hero .crumb{padding:0 0 14px; color:rgba(255,255,255,.7)}
.page-hero--slim .crumb{padding:0}
.page-hero .crumb a{color:rgba(255,255,255,.88)}
.page-hero .crumb a:hover{color:#fff}
.page-hero .crumb span{color:rgba(255,255,255,.55)}
.page-hero h1{color:#fff; font-size:clamp(25px,3.4vw,36px); line-height:1.2}
.page-hero__sub{color:#cfe0f5; margin-top:9px; font-size:16px; max-width:640px}

/* pagination */
.pager{display:flex; gap:8px; justify-content:center; margin-top:40px; flex-wrap:wrap}
.pager a,.pager span{min-width:42px; height:42px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--pill); background:var(--sky-2); color:var(--navy); font-weight:600; font-size:14px}
.pager a:hover{background:var(--sky)}
.pager .cur{background:var(--blue); color:#fff}
.pager .off{color:#b6c2d6}

/* ---------- product detail ---------- */
.pd{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.gallery .main{background:var(--sky-2); border-radius:var(--radius); aspect-ratio:1/1; display:grid; place-items:center; padding:28px}
.gallery .main img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
.gallery .thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.gallery .thumbs button{width:74px; height:74px; border:0; border-radius:14px; background:var(--sky-2); padding:8px; cursor:pointer; display:grid; place-items:center}
.gallery .thumbs button.active{background:var(--sky)}
.gallery .thumbs img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply}
.pd .cat-tag{color:var(--blue); font-weight:600; font-size:13.5px}
.pd h1{font-size:27px; margin:8px 0 16px}
.pd .pricebox{background:var(--sky-2); border-radius:var(--radius); padding:22px 24px; margin:18px 0}
.pd .pricebox .now{color:var(--blue); font-weight:700; font-size:30px}
.pd .pricebox .was{color:var(--muted); text-decoration:line-through; font-size:17px; margin-left:10px}
.pd .pricebox .save{display:inline-block; margin-left:10px; background:var(--cyan); color:var(--navy-deep); font-weight:700; font-size:13px; padding:4px 12px; border-radius:var(--pill)}
.pd .pricebox .req{color:var(--navy); font-weight:700; font-size:22px}
.pd .pricebox small{display:block; color:var(--muted); font-size:13px; margin-top:4px}
.pd .meta{display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:14px; margin:16px 0}
.pd .meta b{color:var(--ink); font-weight:600}
.pd .ask-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.desc{margin-top:50px}
.desc .panel{background:var(--sky-2); border-radius:var(--radius); padding:30px 34px; margin-top:18px; overflow-x:auto}
.desc .panel img{border-radius:12px; margin:10px 0}
.desc .panel table{border-collapse:collapse; width:100%}
.desc .panel td,.desc .panel th{padding:8px 12px; text-align:left; background:#fff; border-radius:6px}
.desc .panel h1,.desc .panel h2,.desc .panel h3{font-size:18px; margin:14px 0 8px}

/* ---------- info / cta band ---------- */
.band{background:linear-gradient(120deg,var(--navy) 0%,var(--blue-700) 100%); color:#fff; border-radius:var(--radius); padding:46px 50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.band h2{color:#fff; font-size:28px}
.band p{color:#bcd2f0; margin-top:8px}
.band .cta{display:flex; gap:12px; flex-wrap:wrap}

/* premium image CTA banner */
.cta-banner{position:relative; overflow:hidden; border-radius:24px}
.cta-banner__bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.cta-banner__overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(110deg, rgba(0,12,66,.95) 0%, rgba(0,20,109,.86) 48%, rgba(0,20,109,.48) 100%)}
.cta-banner__inner{position:relative; z-index:2; padding:58px 56px; display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap; color:#fff}
.cta-banner__text{max-width:560px}
.cta-banner h2{color:#fff; font-size:clamp(23px,3vw,32px); line-height:1.26}
.cta-banner p{color:#cdddf4; margin-top:10px; font-size:16px}
.cta-banner .cta{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width:640px){
  .cta-banner__inner{padding:40px 28px; flex-direction:column; align-items:flex-start}
}

/* about */
.prose{max-width:760px}
.prose p{margin-bottom:16px; color:#33415c}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.about-media{background:var(--sky); border-radius:var(--radius); padding:40px; display:grid; place-items:center}
.about-media img{height:120px; width:auto}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
.info-card{background:var(--sky-2); border-radius:var(--radius); padding:30px}
.info-row{display:flex; gap:14px; align-items:flex-start; padding:14px 0}
.info-row .label{color:var(--muted); font-size:13px}
.info-row .val{font-weight:600; color:var(--ink)}
.form-card{background:#fff; border-radius:var(--radius); padding:8px 0}
.field{margin-bottom:16px}
.field label{display:block; font-size:14px; font-weight:600; color:var(--navy); margin-bottom:7px}
.input{width:100%; background:var(--sky-2); border:0; border-radius:16px; padding:14px 18px; font-family:inherit; font-size:15px; color:var(--ink); outline:0}
.input:focus{background:var(--sky)}
textarea.input{min-height:130px; resize:vertical}
.alert-ok{background:#e6f7ee; color:#0a7a45; border-radius:16px; padding:14px 18px; margin-bottom:18px; font-weight:500}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep); color:#aebfd8; margin-top:70px}
.footer .container{padding-top:54px; padding-bottom:30px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px}
.footer h4{color:#fff; font-size:15px; margin-bottom:16px}
.footer .wordmark{font-size:26px; font-weight:800; color:#fff; letter-spacing:1px}
.footer .tagline{color:var(--cyan-soft); font-size:12.5px; letter-spacing:2px; margin-top:2px}
.footer a{display:block; padding:5px 0; color:#aebfd8}
.footer a:hover{color:#fff}
.footer .row{display:flex; gap:10px; align-items:flex-start; padding:6px 0; font-size:14px}
.footer .row .material-symbols-rounded{font-size:19px; color:var(--cyan)}
.footer .copyright{margin-top:34px; padding-top:22px; color:#7e90b3; font-size:13px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08)}

.empty{background:var(--sky-2); border-radius:var(--radius); padding:60px; text-align:center; color:var(--muted)}
.empty .icon-circle{margin:0 auto 16px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:grid}
  .header .actions{margin-left:auto}
}
@media (max-width:980px){
  .features,.cat-grid,.product-grid{grid-template-columns:repeat(2,1fr)}
  .pd,.about-grid,.contact-grid,.listing{grid-template-columns:1fr}
  .sidebar{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .head h2{font-size:24px}
  .section{padding:46px 0}
  .band{padding:34px 28px}
  .header-call{display:none}
  .hero{min-height:auto}
  .hero__inner{padding:70px 0 62px; max-width:none; text-align:center}
  .hero .cta{justify-content:center}
  .hero p.lead{margin-left:auto; margin-right:auto}
}
@media (max-width:460px){
  .footer-grid{grid-template-columns:1fr}
  .product-grid{gap:12px}
}

/* ---------- search popup (live search) ---------- */
.search-pop{position:fixed; inset:0; z-index:200; display:flex; justify-content:center; align-items:flex-start}
.search-pop__backdrop{position:absolute; inset:0; background:rgba(5,14,46,.55)}
.search-pop__panel{position:relative; z-index:1; width:min(640px,92vw); margin-top:13vh; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 24px 70px rgba(0,20,109,.30)}
.search-pop__box{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.search-pop__box>.material-symbols-rounded{color:var(--navy); font-size:24px}
.search-pop__box input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:inherit; font-size:16.5px; color:var(--ink)}
.search-pop__close{border:0; background:var(--sky); width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--navy); display:grid; place-items:center; flex:0 0 auto}
.search-pop__close:hover{background:#dde9f8}
.search-pop__results{max-height:62vh; overflow-y:auto; padding:6px 0}

/* ---------- floating contact button (FAB) ---------- */
.fab{position:fixed; right:20px; bottom:20px; z-index:150; display:flex; flex-direction:column; align-items:center; gap:12px}
.fab__menu{display:flex; flex-direction:column; gap:12px}
.fab__item{width:50px; height:50px; border-radius:50%; display:grid; place-items:center; color:#fff; transition:transform .15s; box-shadow:0 8px 22px rgba(0,20,109,.28)}
.fab__item .material-symbols-rounded{font-size:24px}
.fab__item--call{background:var(--navy)}
.fab__item--line{background:var(--green)}
.fab__item--mail{background:var(--cyan); color:var(--navy-deep)}
.fab__item:hover{transform:scale(1.07)}
.fab__toggle{width:58px; height:58px; border-radius:50%; border:0; background:var(--navy); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,20,109,.38); transition:transform .2s}
.fab__toggle:hover{transform:scale(1.05)}
.fab__toggle .material-symbols-rounded{font-size:28px}
@media (max-width:760px){ .fab{right:16px; bottom:16px} }