/* Mesquitão catalogue styles. Plain CSS, no framework.
   Values match the original store layout: 1300px container with 16px gutters,
   Jost 16px/1.6 body text, breakpoints at 1200, 992 and 768px. */
@font-face{font-family:Jost;font-weight:300;font-style:normal;font-display:swap;src:url(/css/fonts/jost-300-light-webfont.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:400;font-style:normal;font-display:swap;src:url(/css/fonts/jost-400-book-webfont.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:400;font-style:italic;font-display:swap;src:url(/css/fonts/jost-400-bookitalic-webfont.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:700;font-style:normal;font-display:swap;src:url(/css/fonts/jost-700-bold-webfont.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:500;font-style:normal;font-display:swap;src:url(/css/fonts/jost-500-medium-webfont.woff2) format("woff2")}
@font-face{font-family:Jost;font-weight:600;font-style:normal;font-display:swap;src:url(/css/fonts/jost-600-semi-webfont.woff2) format("woff2")}

:root{
  --green:#316734; --green-dark:#284e2b; --link:#408806; --black:#231f20; --yellow:#ffc421;
  --text:#363636; --head:#111; --muted:#959595; --line:#d7d7d7; --line-soft:#ebebeb; --bg-soft:#f5f5f5; --wa:#25d366;
  --font:Jost,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --sweep:1s cubic-bezier(.77,0,.175,1) 0s 1 normal forwards;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;position:relative;font:400 16px/1.6 var(--font);color:var(--text);background:#fff}
img{max-width:100%;height:auto;border:0}
a{color:var(--link);text-decoration:none;outline:0;transition:color .2s}
a:hover{color:var(--link)}
h1,h2,h3,h4,h5,h6{margin:0 0 1rem;color:var(--head);font-weight:500;line-height:1.2}
h1,h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
p{margin:16px 0}
ul,ol{margin:0;padding-left:1.2rem}
strong,b{font-weight:500}
button,input{font:inherit}
.wrap{max-width:1300px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 16px;z-index:100000}
.skip:focus{left:0}

/* Underline that sweeps in from the left and out to the right (link hover). */
@keyframes sweep{0%{transform:scaleX(0);transform-origin:0 100%}50%{transform:scaleX(1);transform-origin:0 100%}51%{transform:scaleX(1);transform-origin:100% 0}100%{transform:scaleX(0);transform-origin:100% 0}}
.sweep{position:relative}
.sweep::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:100%;transform:scaleX(0);transform-origin:100% 0;background:currentColor;will-change:transform}
a:hover>.sweep::after,a:hover .sweep::after{animation:sweep var(--sweep)}

/* Page dim behind open menus */
.page-dim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.05);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility 0s .6s}
.menu-open .page-dim{opacity:1;visibility:visible;transition:opacity .4s}

/* ===== Top bar ===== */
.topbar{position:relative;z-index:1;background:var(--green-dark);color:#fff;font-size:15.2px;line-height:24.32px}
.topbar .wrap{display:flex;justify-content:space-between}
.topbar-text{padding:4px 0}
.topbar ul{list-style:none;margin:0;padding:0;display:flex}
.topbar li{margin-left:16px}
@media (max-width:600px){.topbar-city{display:none}.mob-logo{margin-right:16px!important}}
.topbar a{display:flex;align-items:center;padding:4px 0;color:#fff}
.topbar a:hover{color:#fff}
.topbar .sweep{display:block}
.topbar .sweep::after{bottom:3px;background:#fff}

/* ===== Desktop header ===== */
.site-header{position:relative;z-index:1;background:var(--green)}
.header-main{padding-top:8px;padding-bottom:8px}
.header-row{display:flex;align-items:center;height:84px;margin:0 -16px}
.header-row>*{padding:0 16px}
.logo{flex:none;display:block;line-height:0}
.logo img{display:inline;width:243px;height:52px}
.header-search{flex:1;min-width:0;display:flex;justify-content:center;align-items:center}
.header-search .search-box{margin:0 32px}
.header-end{flex:none;width:32px}

/* Search box */
.search-box{position:relative;width:100%}
.search-form{display:flex;align-items:stretch;height:44px}
.search-form input[type=search]{flex:1;min-width:0;height:44px;margin:0;padding:8px 16px;border:1px solid #d8d8d8;border-radius:24px 0 0 24px;background:#fff;color:#313131;font:400 16px/30px var(--font);outline:0;box-shadow:none;transition:.2s;-webkit-appearance:none;appearance:none;position:relative;z-index:2}
.search-form input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.search-form input::placeholder{color:#757575;opacity:.5}
.site-header .search-form input[type=search]{border-color:rgba(255,255,255,0)}
.search-form button{flex:none;width:53px;margin:0 0 0 -1px;padding:0;border:0;border-radius:0 24px 24px 0;background:var(--yellow);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .1s ease-in-out}
.search-form button svg{width:24px;height:24px;display:block}
.search-form button svg path{fill:#111;transition:fill .1s ease-in-out}
.search-form button:hover,.search-form button:focus{background:#111}
.search-form button:hover svg path,.search-form button:focus svg path{fill:#fff}

/* Search suggestions */
.search-suggest{position:absolute;left:0;right:0;top:100%;z-index:999;margin-top:8px;background:#fff;border:1px solid #ccc;font-size:12px;line-height:16px;text-align:left}
.search-suggest[hidden]{display:none}
.ss-scroll{max-height:500px;overflow-y:auto;overflow-x:hidden}
.ss-scroll::-webkit-scrollbar{width:7px;background:#ededed}
.ss-scroll::-webkit-scrollbar-thumb{background:#d8d8d8}
.ss-item{display:block;overflow:hidden;padding:15px;border-bottom:1px solid #ccc;color:var(--text);cursor:pointer}
.ss-item:hover,.ss-item.is-active{background:#f5f5f5;color:var(--text)}
.ss-head{display:flex;justify-content:space-between;flex-wrap:nowrap;margin-bottom:8px;font-weight:700;color:#000}
.ss-term .ss-head{margin-bottom:2px;justify-content:flex-start}
.ss-name{display:block;padding:0 20px 0 0;color:#111;font-size:.9rem}
.ss-term .ss-name{padding:0;font-size:12px;color:#000}
.ss-price{display:block;flex-shrink:0;text-align:right}
.ss-img{display:block;float:left;height:100%;padding:0 15px 0 0}
.ss-img img{display:block;width:60px;height:auto}
.ss-all{display:block;padding:15px;border-bottom:1px solid #ccc;line-height:24px;text-align:center;color:#21759b}
.ss-all:hover,.ss-all.is-active{background:#f5f5f5;color:#21759b}
.ss-empty{padding:10px 15px;line-height:1.5}

/* ===== Main menu ===== */
.mainnav{position:relative;z-index:2;background:var(--black);transition:border .2s}
.mainnav .wrap{position:relative}
.menu{list-style:none;margin:0;padding:0;display:flex}
.menu>li{position:relative;list-style:none}
.menu>li.is-mega{position:static}
.menu>li>a{position:relative;z-index:1;display:flex;align-items:center;padding:16px 24px;color:#fff;font-size:16px;font-weight:600;line-height:25.6px;transition:.2s}
.menu>li:first-child>a{padding-left:0}
.menu>li>a:hover{color:#fff}
.menu>li>a>span{display:block;position:relative;pointer-events:none}
.menu>li.has-sub>a>span{padding-right:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9.338' fill='%23ffffff' viewBox='0 0 16 9.338'%3E%3Cpath d='M8 9.338a.67.67 0 0 1-.491-.216L.19 1.125A.667.667 0 1 1 1.171.224L8 7.686 14.829.225a.667.667 0 1 1 .981.901L8.491 9.122A.67.67 0 0 1 8 9.338z'/%3E%3C/svg%3E") right center/12px no-repeat}
.menu>li>a>span::after{background:#fff}
.menu .sub{display:none;position:absolute;top:100%;left:0;z-index:1000;margin:0;padding:12px 0;width:15rem;list-style:none;background:#fff;border:1px solid var(--line)}
.menu .sub li{list-style:none;text-align:left}
.menu .sub a{position:relative;display:flex;align-items:center;padding:4px 16px;font-size:15.2px;line-height:24.32px;color:var(--head);transition:.2s}
.menu .sub a:hover{color:var(--link)}
.menu .sub a>span{display:block;position:relative;pointer-events:none}
.menu .sub a>span::after{background:var(--link)}
.menu .sub.mega{left:1rem;width:calc(75% - 2rem);padding:1.5rem 1rem 0;flex-wrap:wrap}
.menu .sub.mega.cols-3{width:calc(66% - 2rem)}
.menu .sub.mega.to-right{left:auto;right:1rem}
.menu .mega>li{padding:0 1rem;flex-basis:25%;max-width:25%}
.menu .mega.cols-3>li{flex-basis:33.3%;max-width:33.3%}
.menu .mega ul{list-style:none;margin:0;padding:0}
.menu .mega a{padding:0 0 .5rem}
.menu .mega .col-title>a>span{font-weight:500}
.menu .mega .col-title>ul{margin-bottom:1rem}
.menu .sub.is-open>li{opacity:0;animation:mega-in .4s ease forwards}
.menu .sub.is-open>li:nth-child(1){animation-delay:.1s}
.menu .sub.is-open>li:nth-child(2){animation-delay:.2s}
.menu .sub.is-open>li:nth-child(3){animation-delay:.3s}
.menu .sub.is-open>li:nth-child(4){animation-delay:.4s}
.menu .sub.is-open>li:nth-child(5){animation-delay:.5s}
.menu .sub:not(.mega).is-open>li{opacity:1;animation:none}
@keyframes mega-in{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}

/* ===== Sticky header (slides down after scrolling past the header) ===== */
.sticky-bar{display:block;visibility:hidden;opacity:0;position:fixed;top:0;left:0;right:0;z-index:-1;width:100%;background:var(--green)}
.sticky-bar.is-on{visibility:visible;opacity:1;z-index:1000;transform:translate3d(0,-100%,0)}
.sticky-bar.is-armed{transition:transform .2s}
.sticky-bar.is-down{transform:translate3d(0,0,0)}
.sticky-row{display:flex;align-items:center;margin:0 -16px}
.sticky-logo{flex:none;display:flex;align-items:center;justify-content:center;padding:16px}
.sticky-logo .burger{display:none;margin-right:1rem}
.sticky-logo a{font-size:0;line-height:0}
.sticky-logo img{display:inline;width:150px;height:32px}
.sticky-search{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:0 16px}
.sticky-search .search-box{margin:0 32px}
.sticky-end{flex:none;width:32px}

/* ===== Mobile header ===== */
.mobile-header{display:none;position:sticky;top:0;z-index:10;background:var(--green);transform:translate3d(0,0,0);transition:transform .2s}
.mobile-header.is-hidden{transform:translate3d(0,-100%,0)}
.mobile-header .mob-inner{padding:20px 16px;border-bottom:1px solid var(--line-soft)}
.mob-row{display:flex;align-items:center;flex-wrap:wrap;margin:0 -16px}
.mob-burger{flex:none;padding-left:16px}
.mob-logo{flex:none;padding:0 16px;line-height:0}
.mob-logo img{display:inline;width:150px;height:32px}
.mob-search{flex:1;min-width:0;display:flex;justify-content:center;margin-right:32px;padding:0 16px}
.mob-search .search-box{margin-top:16px}
.burger{display:block;padding:2px 12px;border:0;border-radius:20px;background:none;cursor:pointer;transition:.2s}
.burger .bar{display:block;width:25px;height:2px;margin:6px auto;background:#fff;transition:.2s}
.burger:hover .bar{background:#111}

/* ===== Mobile menu drawer (sliding panels) ===== */
.drawer{display:none;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:1002;width:100%;background:#fff;color:#111;line-height:16px;transform:translate3d(-100%,0,0);transition:transform .4s;-webkit-font-smoothing:antialiased}
.drawer.is-shown{display:flex}
.drawer.is-open{transform:translate3d(0,0,0)}
.drawer-blocker{display:none;position:fixed;inset:0;z-index:1001;background:#000;opacity:0;transition:opacity .4s}
.drawer-blocker.is-shown{display:block}
.drawer-blocker.is-open{opacity:.3}
html.drawer-lock,html.drawer-lock body{overflow:hidden}
.drawer-bar{flex-shrink:0;display:flex;min-height:64px;margin-bottom:32px;background:#111;color:#fff}
.drawer-btn{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:50px;height:63px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.drawer-prev[hidden]{display:none}
.drawer-prev::before{content:"";position:absolute;top:0;bottom:0;left:23px;margin:auto;width:8px;height:8px;border-top:1px solid #fff;border-left:1px solid #fff;transform:rotate(-45deg)}
.drawer-close{width:64px;margin-left:auto;border:20px solid transparent}
.drawer-close::before,.drawer-close::after{content:"";position:absolute;top:50%;left:0;width:24px;height:1px;margin-top:-1px;background:#fff;transition:transform .2s}
.drawer-close::before{transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.drawer-panels{position:relative;flex-grow:1;overflow:hidden;background:#fff}
.drawer-panel{position:absolute;inset:0;z-index:0;overflow:hidden auto;background:#fff;transform:translate3d(100%,0,0);transition:transform .4s}
.drawer-panel[hidden]{display:none}
.drawer-panel::after{content:"";display:block;height:44px}
.drawer-panel.is-current{z-index:1;transform:translate3d(0,0,0)}
.drawer-panel.is-parent{transform:translate3d(-30%,0,0)}
.drawer-title{display:flex;align-items:center;padding:14px;font-size:16px}
.drawer-title span{display:block;font-weight:500}
.drawer-list{list-style:none;margin:0 0 32px;padding:0}
.drawer-panel>.drawer-list:only-child,.drawer-sub{margin-bottom:0}
.drawer-list li{position:relative;display:flex;flex-wrap:wrap;font-size:15.2px}
.drawer-list li::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid rgba(0,0,0,.1)}
.drawer-list a.drawer-link{display:flex;align-items:center;flex:1 1 10%;overflow:hidden;padding:14px 10px 14px 20px;color:#111;white-space:nowrap;text-overflow:ellipsis;line-height:16px}
.drawer-list a.drawer-link:hover{color:#111}
.drawer-link>span{display:block;position:relative;pointer-events:none}
.drawer-link>span::after{bottom:0;top:15px;background:#111}
.drawer-next{position:relative;flex:none;width:51px;padding:0;border:0;border-left:1px solid rgba(0,0,0,.1);background:none;cursor:pointer}
.drawer-next::after{content:"";position:absolute;top:0;bottom:0;right:23px;margin:auto;width:8px;height:8px;border-top:1px solid #111;border-left:1px solid #111;transform:rotate(135deg)}
@media (min-width:600px){.drawer{width:80%;min-width:240px;max-width:440px}}

/* ===== Layout ===== */
main{display:block}
.content{padding-top:80px;padding-bottom:80px}
.content-product{padding-top:40px}
.home-content{padding-top:0;padding-bottom:0}

/* ===== Home ===== */
.home-banner{margin:48px 0 0}
.home-banner img{display:block;width:100%;height:auto}
.home-banner+.home-section{margin-top:80px}
.home-banner.is-last{margin:48px 0}
.home-section{margin-bottom:48px}
.home-section>h2{margin:0 0 35px;font-size:30px;line-height:36px}

/* ===== Product grid and card ===== */
ul.products{list-style:none;display:flex;flex-wrap:wrap;margin:0 -2px;padding:0}
ul.products>li{display:flex;flex-direction:column;position:relative;width:20%;margin:0 0 8px;padding:0}
ul.products.cols-4>li{width:25%}
.pi-wrap{position:relative;display:flex;width:100%;height:100%}
.pi-inner{position:relative;width:100%;margin:0 2px;border:1px solid transparent;border-radius:10px;background:#fff}
.pi-thumb{position:relative;display:block;margin:0 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.pi-thumb img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.pi-thumb .pi-alt{position:absolute;top:16px;left:0;opacity:0}
.has-alt .pi-thumb img{transition:opacity .5s}
.has-alt:hover .pi-thumb .pi-main{opacity:0}
.has-alt:hover .pi-thumb .pi-alt{opacity:1}
.pi-wrap:hover .pi-thumb{margin:0;padding:16px}
.pi-wrap:hover .pi-thumb .pi-alt{left:16px;width:calc(100% - 32px)}
.pi-body{margin:0 16px}
.pi-status{margin:10px 0;font-size:14.4px;line-height:23.04px;text-transform:capitalize}
.pi-status .in{color:var(--link)}
.pi-status .out{color:var(--head)}
.pi-title-link{display:block;position:relative;margin:8px 0}
.pi-title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;min-height:3.125rem;margin:0;font-size:16px;font-weight:400;line-height:25.6px;color:var(--head);white-space:normal;transition:color .2s}
.pi-title-link:hover .pi-title{color:var(--head);opacity:.8}
.pi-price{position:relative;display:flex;justify-content:center;margin:16px 0 0;padding:14px 0;border-top:1px solid var(--line);font-size:17.12px;line-height:27.392px;color:var(--head)}
.pi-price>span{display:block;margin:0 4px}
@media (min-width:993px){.pi-wrap:hover .pi-inner{z-index:1;border-color:var(--line)}}

/* ===== Listing ===== */
.list-header{position:relative}
.list-header h1{margin:0 0 16px;font-size:24px;line-height:28.8px}
.list-crumbs{position:absolute;top:0;right:0;padding:8px 0;font-size:0;line-height:0;color:var(--head)}
.list-crumbs>*{font-size:14.72px;line-height:23.552px;color:var(--text)}
.list-crumbs a:hover{color:var(--link)}
.list-rule{margin:8px 0 0;border-top:1px solid var(--line)}
.list-bar{display:flex;align-items:center;margin:0 0 32px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.result-count{margin:0;padding:8px 0}
.list-foot{display:flex;align-items:center;margin:24px 0 0;padding:8px 0 0;border-top:1px solid var(--line)}
.list-foot .result-count{flex:none}
.term-desc{margin-top:24px}
.pagination{flex:1;display:flex;justify-content:flex-end}
.pagination ul{list-style:none;display:block;margin:1px;padding:0;white-space:nowrap}
.pagination li{display:inline-block;list-style:none}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:4px;padding:0;border:1px solid var(--line-soft);border-radius:100%;font-size:17.12px;line-height:1;text-align:center;transition:.2s}
.pagination a{color:var(--link)}
.pagination a:hover{color:var(--head);border-color:var(--line)}
.pagination span.cur,.pagination span.gap{color:var(--muted)}
@media (max-width:991px){.list-header{display:flex;flex-direction:column-reverse}.list-crumbs{position:relative}}
@media (max-width:768px){
  .list-crumbs{padding:0 0 1rem}
  .result-count{display:none}
  .list-bar{display:none}
  .list-foot{justify-content:center;margin-bottom:32px}
  .pagination{flex:none}
}

/* ===== Product page ===== */
.sp-crumbs{display:flex;align-items:center;margin:0 0 40px;padding:8px 12px;border:1px solid var(--line-soft)}
.sp-crumbs nav{flex-grow:1;margin:0;font-size:0;line-height:0;color:var(--head)}
.sp-crumbs nav>*{font-size:14.72px;line-height:23.552px;color:var(--text)}
.sp-crumbs a:hover{color:var(--link)}
.sp{display:flex;align-items:flex-start}
.sp-main{flex:0 0 66.6%;max-width:66.6%;min-width:0}
.sp-top{display:flex;align-items:flex-start}
.sp-gallery{position:relative;isolation:isolate;flex:0 0 50%;max-width:50%;margin:0 0 32px}
.sp-summary{flex:0 0 50%;max-width:50%;margin:0 0 32px;padding:0 0 0 32px}
.sp-aside{flex:0 0 33.3%;max-width:33.3%;margin:0 0 32px;padding:0 0 0 48px}
.sp-gallery .sp-image{position:relative;display:block;overflow:hidden;cursor:zoom-in}
.sp-track{display:flex;transition:transform .5s cubic-bezier(.795,-.035,0,1)}
.sp-gallery .sp-track img{display:block;flex:0 0 100%;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.sp-zoom{position:absolute;top:0;left:0;width:1000px;max-width:none;height:1000px;background:#fff;opacity:0;pointer-events:none;transition:opacity .12s}
.sp-image.is-zooming .sp-zoom{opacity:1}
.sp-trigger{position:absolute;top:.5em;right:.5em;z-index:1;width:36px;height:36px;padding:0;border:0;border-radius:100%;background:#fff;font-size:32px;cursor:pointer;text-indent:-9999px;overflow:hidden}
.sp-trigger::before{content:"";position:absolute;left:9px;top:9px;width:10px;height:10px;border:2px solid #000;border-radius:100%;box-sizing:content-box}
.sp-trigger::after{content:"";position:absolute;left:22px;top:19px;width:2px;height:8px;border-radius:6px;background:#000;transform:rotate(-45deg);box-sizing:content-box}
.sp-thumbs{list-style:none;display:flex;flex-wrap:wrap;margin:1rem 3.5rem 0;padding:0}
.sp-thumbs li{width:25%;margin:0 .5rem 1rem;list-style:none}
.sp-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border:1px solid var(--line);cursor:pointer;transition:all .2s}
.sp-thumbs img:hover{border-color:var(--muted)}
.sp-thumbs img.is-active{border-color:var(--head)}
.sp-summary h1{margin:0 0 8px;font-size:30px;line-height:36px}
.sp-sku{display:flex;align-items:center;position:relative;margin:0 0 .5rem;padding-top:8px;border-top:1px solid var(--line)}
.sp-sku span{font-size:15.2px;line-height:24.32px;color:var(--muted)}
.sp-short{margin:0 0 16px;border-top:1px solid var(--line)}
.sp-summary .sp-price-inline,.sp-summary .sp-buy-inline{display:none}
.sp-box-wrap{position:sticky;top:2rem;transition:.2s}
.sticky-down .sp-box-wrap{top:8rem}
.sp-box{position:relative;display:flex;flex-direction:column;align-items:center;margin:0 0 2rem;padding:2rem;border:1px solid var(--line);border-radius:10px}
.sp-price{display:inline-flex;margin:0 0 1rem;font-size:24px;line-height:1.2;color:var(--head)}
.sp-buy{width:100%;margin:.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line-soft)}
.stock{margin:0 0 1rem;font-size:120%;font-weight:400;line-height:1.6;text-align:center}
.stock.in{color:var(--link)}
.stock.out{color:var(--head)}
.btn{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;padding:9px 32px;border:0;border-radius:20px;background:var(--green);color:#fff;font:500 16px/1.4 var(--font);text-align:center;cursor:pointer;transition:.2s;-webkit-appearance:none;appearance:none}
.btn:hover{background:var(--green-dark);color:#fff}
.sp-buy .btn{width:100%}
.sp-section{display:flow-root;margin:0 0 48px}
.sp-section>h2{display:inline-flex;margin:16px 0;font-size:24px;line-height:28.8px}
.sp-section .prose>:first-child{margin-top:16px}
.sp-attrs{width:100%;margin:16px 0 0;border-collapse:collapse;border-spacing:0}
.sp-attrs th,.sp-attrs td{padding:16px 32px;border:1px solid var(--line-soft);vertical-align:middle}
.sp-attrs th{width:150px;font-size:15.2px;font-weight:500;line-height:22.8px;text-align:left;color:var(--text)}
.sp-attrs td{font-style:italic;line-height:24px}
.sp-attrs td p{margin:0}
.related{clear:both}
.related>h2{margin:0 0 1.5rem;font-size:24px;line-height:28.8px;text-transform:capitalize;border-bottom:1px solid var(--line-soft)}
.related>h2 span{display:inline-flex;padding-bottom:1rem}
@media (max-width:1200px){
  .sp-main{flex-basis:100%;max-width:100%}
  .sp-aside{display:none}
  .sp-sku{margin-bottom:16px}
  .sp-summary .sp-price-inline{display:inline-flex;margin:0 0 16px}
  .sp-short{border-bottom:1px solid var(--line)}
  .sp-summary .sp-buy-inline{display:block;margin:2rem 0 1rem}
  .sp-buy-inline .stock{text-align:left}
}
@media (min-width:769px) and (max-width:992px){.related ul.products>li{width:33.3%}}
@media (max-width:768px){
  .sp-top{display:block}
  .sp-gallery,.sp-summary{max-width:none}
  .sp-summary{padding:0}
  .sp-attrs th,.sp-attrs td{display:block;width:100%}
  .sp-attrs th{padding:7.6px 7.6px 3.8px;border-bottom:0}
  .sp-attrs td{padding:4px 8px 8px;border-top:0}
}
@media (max-width:600px){.sp-sku{flex-direction:column;align-items:flex-start}}

/* ===== Lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:1500;display:none;opacity:0;transition:opacity .333s cubic-bezier(.4,0,.22,1);-webkit-tap-highlight-color:transparent}
.lightbox.is-shown{display:block}
.lightbox.is-open{opacity:1}
.lb-bg{position:absolute;inset:0;background:#000}
.lb-stage{position:absolute;inset:44px 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-stage img{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.lightbox.is-zoomed .lb-stage{overflow:auto;display:block;inset:0}
.lightbox.is-zoomed .lb-stage img{width:auto;height:auto;max-width:none;margin:auto;cursor:zoom-out}
.lb-bar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;justify-content:flex-end}
.lb-count{position:absolute;top:0;left:0;height:44px;padding:0 10px;font-size:13px;line-height:44px;color:#fff;opacity:.75}
.lb-btn{position:relative;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;opacity:.75;transition:opacity .2s}
.lb-btn:hover{opacity:1}
.lb-btn svg{display:block;width:24px;height:24px;margin:auto;fill:none;stroke:#fff;stroke-width:1.6}
.lb-arrow{position:absolute;top:50%;width:70px;height:100px;margin-top:-50px}
.lb-prev{left:0}.lb-next{right:0}
.lb-arrow[hidden],.lb-count[hidden]{display:none}

/* ===== Content pages ===== */
.page-title{margin:0 0 16px;font-size:30px;line-height:36px}
.prose h2{font-size:30px;line-height:36px;margin:16px 0}
.prose h3{font-size:24px;line-height:28.8px;margin:16px 0}
.prose h4{font-size:20px;margin:16px 0}
.prose h5{font-size:18px;line-height:21.6px;margin:16px 0}
.prose ul,.prose ol{margin:16px 0}
.prose blockquote{margin:16px 0;padding:0 0 0 16px;border-left:3px solid var(--yellow);font-style:italic}
.prose blockquote p{margin:0}
.prose img{height:auto}
.prose table{border-collapse:collapse;max-width:100%}
.prose td,.prose th{border:1px solid var(--line-soft);padding:8px 12px}

/* Contact page */
.contact-hero{margin:0 0 32px;padding:80px 0;background:var(--bg-soft)}
.contact-hero h1{margin:0 0 16px;font-size:60px;line-height:60px}
.contact-hero .lead{margin:0;font-size:36px;font-weight:300;line-height:36px;color:var(--head)}
.anim-text,.anim-text>span{opacity:0;transition:.4s}
.anim-text.is-in,.anim-text.is-in>span{opacity:1}
.ct{padding-bottom:16px}
.ct svg{display:block;fill:currentColor}
.ct-top{display:flex;align-items:stretch;margin:0 0 56px}
.ct-channels{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;padding-right:32px}
.ct-big{display:flex;align-items:center;gap:24px;padding:28px 32px;border-radius:10px;color:#fff;transition:background .2s,transform .2s,box-shadow .2s}
.ct-big:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.ct-big-wa{background:var(--green)}
.ct-big-wa:hover{background:var(--green-dark)}
.ct-big-tel{background:var(--black)}
.ct-big-tel:hover{background:#000}
.ct-big-icon{flex:none;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14)}
.ct-big-wa .ct-big-icon{background:var(--wa)}
.ct-big-icon svg{width:32px;height:32px}
.ct-big-body{display:flex;flex-direction:column;min-width:0}
.ct-big-label{font-size:15.2px;line-height:24px;opacity:.8}
.ct-big-value{font-size:36px;font-weight:500;line-height:1.1;white-space:nowrap}
.ct-big-hint{margin-top:4px;font-size:15.2px;line-height:24px;color:var(--yellow)}
.ct-label{display:block;font-size:15.2px;line-height:24px;color:var(--muted)}
.ct-mail{display:flex;align-items:center;gap:16px;padding:20px 32px;border:1px solid var(--line);border-radius:10px;color:var(--head);transition:border-color .2s}
.ct-mail:hover{color:var(--head);border-color:var(--green)}
.ct-mail svg{flex:none;width:28px;height:28px;color:var(--green)}
.ct-mail-addr{display:block;font-size:20px;line-height:1.3;overflow-wrap:anywhere}
.ct-social{padding:4px 0 0}
.ct-social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ct-social-links a{display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 14px;border:1px solid var(--line);border-radius:20px;color:var(--head)}
.ct-social-links a:hover{color:var(--head);border-color:var(--green)}
.ct-social-links svg{width:22px;height:22px;fill:var(--green)}
.ct-photo{flex:0 0 42%;max-width:42%;margin:0}
.ct-photo img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:50% 40%;border:1px solid var(--line-soft);border-radius:10px}
.ct h2{margin:0 0 24px;font-size:30px;line-height:36px}
.ct-visit{margin:0 0 56px}
.ct-visit-grid{display:flex;align-items:stretch;gap:32px}
.ct-map{flex:1 1 0;min-width:0;min-height:420px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.ct-map iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
.ct-cards{flex:0 0 33%;max-width:33%;display:flex;flex-direction:column;gap:16px}
.ct-card{padding:24px 32px;border:1px solid var(--line);border-radius:10px}
.ct-card h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:20px;line-height:24px}
.ct-card h3 svg{width:24px;height:24px;color:var(--green)}
.ct-card p{margin:0 0 20px}
.ct-hours{list-style:none;margin:0;padding:0}
.ct-hours li{padding:8px 0;border-top:1px solid var(--line-soft)}
.ct-hours li:first-child{border-top:0;padding-top:0}
.ct-maplink{padding:9px 24px}
.ct-gallery{margin:0 0 32px}
.ct-gallery ul{list-style:none;display:flex;gap:16px;margin:0;padding:0}
.ct-gallery li{flex:1 1 0;min-width:0}
.ct-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.ct-gallery li:nth-child(1) img{object-position:50% 60%}
.ct-gallery li:nth-child(2) img{object-position:50% 55%}
.ct-gallery li:nth-child(3) img{object-position:50% 45%}
@media (max-width:1100px){
  .ct-big-value{font-size:30px}
  .ct-big{padding:24px}
  .ct-visit-grid{flex-direction:column}
  .ct-cards{flex:none;max-width:none;flex-direction:row}
  .ct-card{flex:1 1 0}
}
@media (max-width:900px){
  .ct-top{flex-direction:column;margin-bottom:40px}
  .ct-channels{padding-right:0;margin-bottom:24px}
  .ct-photo{flex:none;max-width:none}
  .ct-photo img{min-height:0;aspect-ratio:3/2;object-position:50% 0}
}
@media (max-width:767px){
  .contact-hero{padding:48px 0}
  .contact-hero h1{font-size:40px;line-height:44px}
  .contact-hero .lead{font-size:26px;line-height:30px}
  .ct-cards{flex-direction:column}
  .ct-map,.ct-map iframe{min-height:320px}
  .ct-gallery ul{flex-direction:column}
  .ct-gallery img{aspect-ratio:3/2}
  .ct-big{gap:16px;padding:20px}
  .ct-big-icon{width:52px;height:52px}
  .ct-big-icon svg{width:26px;height:26px}
  .ct-big-value{font-size:28px}
  .ct-mail{padding:16px 20px}
  .ct-mail-addr{font-size:17px}
  .ct-card{padding:20px}
}

/* 404 */
.nf{text-align:center}
.nf-icon{display:flex;justify-content:center;align-items:flex-start;height:192px}
.nf-icon svg{width:160px;height:160px}
.nf-icon svg path{fill:var(--line)}
.nf h1{margin:0 0 16px;font-size:30px;line-height:36px}
.nf .search-box{margin:16px 0}

/* Blog */
.blog-grid{display:flex;margin:0 -16px}
.blog-main{flex:0 0 75%;max-width:75%;padding:0 16px}
.blog-main article{margin-right:16px}
.blog-side{flex:0 0 25%;max-width:25%;padding:0 16px}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 16px;color:var(--muted)}
.post-meta a{color:var(--muted)}
.post-meta .dash{display:block;width:10px;margin:0 10px;border-top:1px solid var(--muted)}
.post-title{margin:0 0 16px;padding:16px 0 0;border-top:1px solid var(--line-soft);font-size:30px;line-height:36px}
.post-hero{margin:0 0 32px;padding:5px;border:1px solid var(--line-soft);border-radius:10px}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:915/458;object-fit:cover;border-radius:5px}
.post-author{display:flex;margin:48px 0 0;padding:48px;border:1px solid var(--line)}
.post-author-avatar{flex:none;margin:0 48px 0 0}
.post-author-avatar svg{display:block;width:130px;height:130px}
.post-author h3{margin:0 0 16px;font-size:18px;line-height:21.6px}
.post-author p{margin:0}
.widget{margin:0 0 32px}
.widget-box{padding:16px;border:1px solid var(--line)}
.widget-box h4{margin:0 0 16px;font-size:18px;line-height:21.6px;border-bottom:1px solid var(--line-soft)}
.widget-box h4 span{display:flex;padding:0 0 10px}
.widget-box ul{list-style:none;margin:0;padding:0}
.widget-box li{padding:5px 0 0}
.widget-box li a{position:relative;color:var(--head)}
.widget-box li a:hover{color:var(--head)}
.widget-box li a span::after{bottom:0;background:var(--head)}
.widget-image img{display:block;width:100%;height:auto}
.recent-post img{display:block;width:100%;height:auto;aspect-ratio:2;object-fit:cover;margin:0 0 8px;border-radius:5px}
.recent-post time{display:block;font-size:15.2px;color:var(--muted)}
.posts{display:flex;flex-wrap:wrap;margin:0 -16px}
.post-card{flex:0 0 33.333%;max-width:33.333%;padding:0 16px;margin:0 0 32px;color:var(--text)}
.post-card img{display:block;width:100%;height:auto;margin:0 0 16px;border-radius:5px}
.post-card h2{margin:0 0 8px;font-size:24px;line-height:28.8px}
.post-card time{font-size:15.2px;color:var(--muted)}
@media (max-width:991px){.blog-grid{display:block}.blog-main,.blog-side{max-width:none}.blog-main article{margin-right:0}}
@media (max-width:768px){.post-card{flex-basis:100%;max-width:100%}.post-author{display:block;padding:24px}.post-author-avatar{margin:0 0 16px}}

/* ===== Footer ===== */
.footer-main{background:var(--bg-soft)}
.footer-inner{padding-top:48px;padding-bottom:16px}
.footer-row{display:flex;flex-wrap:wrap;margin:0 -16px}
.footer-col{flex:0 0 auto;width:100%;padding:0 16px}
.footer-widget{margin:0 0 32px}
.footer-widget h4{display:flex;margin:0 0 16px;font-size:18px;line-height:21.6px}
.footer-widget.is-text h4{margin-bottom:21px}
.footer-widget p{margin:16px 0}
.footer-widget h4+p,.footer-widget h4+.fw-body>p:first-child{margin-top:16px}
.footer-widget.is-text h4+p{margin-top:0}
.footer-widget.is-text a{color:var(--text)}
.footer-widget.is-text a:hover{color:var(--head)}
.socials{display:flex}
.socials a{display:flex;margin-right:12px;transition:.2s}
.socials svg{display:block;width:20px;height:24px}
.socials svg path{fill:var(--green)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{padding:5px 0;list-style:none}
.footer-links a{position:relative;margin-left:1rem;color:var(--head)}
.footer-links a:hover{color:var(--head)}
.footer-links a::before{content:"";position:absolute;top:50%;left:0;z-index:1;display:block;width:6px;height:6px;border:1px solid rgba(0,0,0,.2);border-radius:50%;transform:translateX(-16px) translateY(-55%)}
.footer-links a span::after{bottom:0;background:var(--head)}
.footer-bottom{padding:32px 0;border-top:1px solid rgba(0,0,0,.1)}
.footer-bottom .footer-row{align-items:center}
.footer-bottom .footer-col{min-height:51px;display:flex;align-items:center}
.company-info{font-size:12px;line-height:19.2px;opacity:.8}
@media (min-width:992px){
  .footer-col{width:50%}
  .footer-bottom .footer-col:last-child{justify-content:flex-end;text-align:right}
}
@media (min-width:1200px){
  .footer-col{width:22.2222%}
  .footer-col.is-wide{width:33.3333%}
  .footer-bottom .footer-col{width:50%}
}

/* Floating WhatsApp and back-to-top */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);text-decoration:none;transition:transform .2s,box-shadow .2s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3);color:#fff}
.wa-float:active{transform:scale(.96)}
.wa-float svg{display:block;width:28px;height:28px}
.to-top{display:none;position:fixed;right:4rem;bottom:2rem;width:36px;height:36px;border-radius:50%;background:var(--yellow);cursor:pointer;justify-content:center;align-items:center;opacity:0;transition:.2s}
.to-top svg{width:18px;height:auto}
.to-top svg path{fill:#fff}
@media (max-width:767px){
  .wa-float{right:16px;bottom:16px;width:50px;height:50px}
  .wa-float svg{width:24px;height:24px}
}

/* Images fade in as they load */
.js img.lazy{opacity:0}
.js img.lazy.is-loaded{opacity:1;transition:opacity .4s}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .site-header,.mainnav{display:none}
  .mobile-header{display:block}
  .sticky-logo .burger{display:block}
}
@media (max-width:992px){
  .topbar .wrap{justify-content:center;text-align:center}
  .topbar ul{display:none}
  .sticky-bar .wrap{display:none}
}
@media (max-width:768px){
  .mob-logo{flex:1;margin-right:32px;text-align:center}
  .mob-search{flex:0 0 100%;margin-right:0;padding:0 16px}
  ul.products>li,ul.products.cols-4>li,.related ul.products>li{width:50%}
  .content{padding-top:48px;padding-bottom:48px}
  .content-product{padding-top:40px}
}

/* ===== New elements: blog article extras, monthly home link (new elements only) ===== */
.home-section>h2 .home-more{margin-left:16px;font-size:15.2px;font-weight:400}
.post-products,.post-see-also{margin-top:48px}
.post-see-also ul{margin:0;padding:0 0 0 20px;list-style:disc}
.post-see-also li{padding:2px 0}
.post-author .post-reviewed{margin:16px 0 0;color:var(--muted)}
.draft-label{display:inline-block;padding:0 8px;border:1px solid var(--muted);border-radius:3px;font-size:13px;line-height:20px;color:var(--muted);text-transform:uppercase}
.recent-post .draft-label{margin:0 0 4px}
.post-card .draft-label{margin-left:8px}

/* ===== Category videos (round 2) ===== */
.prose video{display:block;width:100%;max-width:100%;height:auto;margin:16px 0;background:#000}
/* ===== end category videos ===== */

/* ===== Category filters (round 3) ===== */
.list-side,.filter-open{display:none}
.filter-js .list-side{display:block}
.fd-bar{display:none}
.list-layout [hidden]{display:none!important}
.filter-pending ul.products,.filter-pending .list-foot,.filter-pending .list-bar .result-count{visibility:hidden}
.fw{margin:0 0 32px;padding:16px;border:1px solid var(--line)}
.fw h4{margin:0 0 16px;font-size:18px;line-height:21.6px;border-bottom:1px solid var(--line-soft)}
.fw h4 span{display:flex;padding:0 0 10px}
.fw ul{list-style:none;margin:0;padding:0}
.fw li{display:flex;padding:0 0 1px;font-size:16px;line-height:25.6px;color:var(--text)}
.fw li a{display:flex;flex:1;align-items:center;padding:1px 0;color:var(--head)}
.fw li a:hover{color:var(--head)}
.fw .count{font-size:15.2px}
.fw li.is-chosen a::before{content:"";flex:none;width:14px;height:14px;margin-right:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23316734'/%3E%3Cpath d='M4.5 4.5l5 5m0-5l-5 5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat}
.filter-open{align-items:center;flex:none;margin:0 16px 0 0;padding:4px 8px;border:1px solid var(--line-soft);background:none;color:var(--link);font:400 16px/25.6px var(--font);cursor:pointer}
.filter-open svg{display:block;width:20px;height:20px;margin-right:10px}
.list-empty{margin:16px 0}
html.fd-lock,html.fd-lock body{overflow:hidden}
@media (min-width:1201px){
  .filter-js .has-filters{display:flex;align-items:flex-start;margin:0 -16px}
  .filter-js .has-filters>.list-side{flex:0 0 25%;max-width:25%;padding:0 16px}
  .filter-js .has-filters>.list-main{flex:0 0 75%;max-width:75%;min-width:0;padding:0 16px}
}
@media (min-width:769px){
  .filter-js .has-filters ul.products>li{width:25%}
}
@media (max-width:1200px){
  .filter-js .filter-open{display:flex}
  .filter-js .list-side{position:fixed;inset:0;z-index:1002;overflow:hidden auto;background:#fff;color:#111;visibility:hidden;transform:translate3d(-100%,0,0);transition:transform .4s,visibility 0s .4s}
  .filter-js .list-side.is-open{visibility:visible;transform:none;transition:transform .4s}
  .filter-js .fd-bar{display:flex;min-height:64px;margin-bottom:32px;background:#111}
  .fd-close{position:relative;width:64px;height:63px;margin-left:auto;padding:0;border:20px solid transparent;background:none;cursor:pointer}
  .fd-close::before,.fd-close::after{content:"";position:absolute;top:50%;left:0;width:24px;height:1px;margin-top:-1px;background:#fff}
  .fd-close::before{transform:rotate(45deg)}
  .fd-close::after{transform:rotate(-45deg)}
  .fd-body{padding:0 16px}
}
@media (max-width:768px){
  .filter-js .has-filters .list-bar{display:flex;min-height:74px}
}
/* ===== end category filters ===== */

/* ===== Listing sort and items-per-page menus (round 4) ===== */
.list-sort{display:none}
.sort-js .list-sort{display:block}
.list-bar .result-count{flex:1 1 auto}
.sort-ppp{flex:0 1 auto;margin:0 8px 0 0}
.sort-order{flex:0 1 auto;width:280px}
.list-sort select{display:inline-block;width:100%;margin:0;padding:8px 16px;border:0;border-radius:20px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9.338' viewBox='0 0 16 9.338'%3E%3Cpath d='M8 9.338c-.187 0-.365-.078-.491-.216L.19 1.125C-.058.853-.04.432.231.183s.692-.23.94.041L8 7.686 14.829.225c.247-.271.669-.29.94-.041.271.249.289.67.041.942L8.491 9.122C8.365 9.26 8.187 9.338 8 9.338z'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) 50%/12px;box-shadow:inset 0 0 0 1px var(--line);color:#000;font:400 15.2px/24.32px var(--font);cursor:default;vertical-align:top;-webkit-appearance:none;appearance:none}
.sort-ppp select{width:auto;padding-right:32px}
@media (max-width:991px){
  .list-bar{justify-content:space-between}
  .sort-js .sort-ppp{display:none}
  .sort-order{margin-left:auto}
}
@media (max-width:768px){
  .sort-js .list-bar{display:flex;min-height:74px}
}
@media (max-width:600px){
  .sort-order{flex-basis:50%;width:50%}
}
/* ===== end listing sort menus ===== */