:root{
--btnn-accent:#39a7ff;
--btnn-accent-2:#ff6a00;
--btnn-center-1:#ff9a3a;
--btnn-center-2:#ff6a00;
--btnn-text:#f1f7ff;
--btnn-muted:rgba(241,247,255,0.70);
--btnn-border:rgba(255,255,255,0.07);
--btnn-shadow:0 10px 28px rgba(2,6,23,0.45);
--btnn-ease:cubic-bezier(.2,.9,.2,1);
} #bottom-tech-nav{
position:fixed;
left:50%;
bottom:6px;
transform:translateX(-50%);
width:min(500px, calc(100% - 18px));
z-index:120000;
overflow:visible;
} @media(min-width:565px){
#bottom-tech-nav{width:min(720px, calc(100% - 30px))}
}
#bottom-tech-nav .btnn-row{
position:relative;
display:grid;
grid-auto-flow:column;
grid-auto-columns:1fr;
align-items:stretch;
padding:0 6px;
border-radius:16px;
overflow:visible;
box-shadow:var(--btnn-shadow);
} #bottom-tech-nav .btnn-bg{
position:absolute;
inset:0;
border-radius:16px; border:0;
background:rgba(9,12,18,0.58);
-webkit-backdrop-filter: blur(18px) saturate(165%);
backdrop-filter: blur(18px) saturate(165%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 -1px 0 rgba(0,0,0,0.20);
z-index:0;
} #bottom-tech-nav .btnn-bg::before{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 26%, rgba(0,0,0,0) 60%),
radial-gradient(120% 140% at 18% 0%, rgba(57,167,255,0.10) 0%, rgba(57,167,255,0.03) 40%, rgba(0,0,0,0) 72%),
radial-gradient(120% 140% at 82% 10%, rgba(255,106,0,0.09) 0%, rgba(255,106,0,0.03) 40%, rgba(0,0,0,0) 72%);
opacity:0.75;
} #bottom-tech-nav .btnn-bg::after{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, rgba(0,0,0,0) 1px 3px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, rgba(0,0,0,0) 1px 6px);
opacity:0.10;
mix-blend-mode:overlay;
} @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
#bottom-tech-nav .btnn-bg{background:rgba(9,12,18,0.78)}
} #bottom-tech-nav .btnn-notch{
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
display:none;
} #bottom-tech-nav{
--btnn-count:4;
--btnn-center:0;
}
#bottom-tech-nav .btnn-indicator{
display:none;
} #bottom-tech-nav .btn-link{
position:relative;
z-index:3;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:8px 6px;
min-width:0;
text-decoration:none;
border-radius:11px;
color:var(--btnn-muted);
transition:transform .18s var(--btnn-ease), color .18s ease;
-webkit-tap-highlight-color:transparent;
}
#bottom-tech-nav .btn-link:focus-visible{
outline:2px solid rgba(57,167,255,0.22);
outline-offset:3px;
}
#bottom-tech-nav .btn-hit{position:absolute;inset:0;pointer-events:none} #bottom-tech-nav .btn-icon svg{
width:22px;
height:22px;
display:block;
fill:currentColor;
}
#bottom-tech-nav .btn-icon svg [stroke-width]{stroke:currentColor;fill:none}
#bottom-tech-nav .btn-label{
font-size:9px;
line-height:1;
letter-spacing:0.02em;
color:inherit;
max-width:84px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:0.96;
}
#bottom-tech-nav .btn-link:hover{transform:translateY(-2px);color:rgba(241,247,255,0.92)} #bottom-tech-nav.btnn-cta .btnn-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
}
#bottom-tech-nav.btnn-cta .btnn-bg{border-radius:16px}
#bottom-tech-nav.btnn-cta .btnn-cta-left{
position:relative;
z-index:3;
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
#bottom-tech-nav.btnn-cta .btnn-cta-thumb{
width:42px;
height:42px;
flex:0 0 42px;
border-radius:12px;
overflow:hidden;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
#bottom-tech-nav.btnn-cta .btnn-cta-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
#bottom-tech-nav.btnn-cta .btnn-cta-meta{min-width:0}
#bottom-tech-nav.btnn-cta .btnn-cta-title{
color:rgba(241,247,255,0.94);
font-weight:780;
font-size:12px;
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:260px;
}
@media(min-width:565px){
#bottom-tech-nav.btnn-cta .btnn-row{padding:10px 12px}
#bottom-tech-nav.btnn-cta .btnn-cta-thumb{width:46px;height:46px;flex-basis:46px}
#bottom-tech-nav.btnn-cta .btnn-cta-title{font-size:13px;max-width:420px}
#bottom-tech-nav.btnn-cta .btnn-cta-price{font-size:13px}
#bottom-tech-nav.btnn-cta .btnn-cta-btn{padding:11px 16px;font-size:13px}
}
#bottom-tech-nav.btnn-cta .btnn-cta-price{
margin-top:-3px;
font-size:12px;
color:rgba(241,247,255,0.82);
}
#bottom-tech-nav.btnn-cta .btnn-cta-price del{opacity:0.65}
#bottom-tech-nav.btnn-cta .btnn-cta-price ins{text-decoration:none}
#bottom-tech-nav.btnn-cta .btnn-cta-right{
position:relative;
z-index:3;
flex:0 0 auto;
}
#bottom-tech-nav.btnn-cta .btnn-cta-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
text-decoration:none;
border-radius:999px;
padding:10px 12px;
font-weight:850;
letter-spacing:0.01em;
font-size:12px;
color:#ffffff; background:#ff6a00;
border:0;
box-shadow:
0 10px 22px rgba(2,6,23,0.50),
0 12px 26px rgba(255,106,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.18);
cursor:pointer;
white-space:nowrap;
}
#bottom-tech-nav.btnn-cta .btnn-cta-btn:hover{filter:brightness(1.03)}
#bottom-tech-nav.btnn-cta .btnn-cta-btn:focus-visible{
outline:2px solid rgba(57,167,255,0.22);
outline-offset:3px;
}
@media(max-width:410px){
#bottom-tech-nav.btnn-cta .btnn-row{padding:7px 9px;gap:8px}
#bottom-tech-nav.btnn-cta .btnn-cta-thumb{width:38px;height:38px;flex-basis:38px;border-radius:11px}
#bottom-tech-nav.btnn-cta .btnn-cta-title{font-size:11px;max-width:190px}
#bottom-tech-nav.btnn-cta .btnn-cta-price{font-size:11px}
#bottom-tech-nav.btnn-cta .btnn-cta-btn{padding:9px 12px;border-radius:999px;font-size:11px}
} #bottom-tech-nav.has-center{
--btnn-notch-x: calc(8px + ((100% - 16px) / var(--btnn-count)) * (var(--btnn-center) + 0.5));
} #bottom-tech-nav.has-center .btnn-bg{  -webkit-mask-image: radial-gradient(circle var(--btnn-notch-r) at var(--btnn-notch-x) -1px,
transparent 0 calc(var(--btnn-notch-r) - 1px),
#000 var(--btnn-notch-r));
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-image: radial-gradient(circle var(--btnn-notch-r) at var(--btnn-notch-x) -1px,
transparent 0 calc(var(--btnn-notch-r) - 1px),
#000 var(--btnn-notch-r));
mask-size: 100% 100%;
mask-repeat: no-repeat;
} #bottom-tech-nav.has-center .btnn-indicator{ top:10px;
bottom:10px;
} #bottom-tech-nav.has-center .btn-link.is-center{
align-self:start;
justify-self:center;
width:66px;
height:66px;
padding:0;
border-radius:999px;
transform:translateY(-20px);
color:#fff;
background:linear-gradient(180deg, var(--btnn-center-1), var(--btnn-center-2));
border:1px solid rgba(255,255,255,0.18);
box-shadow:0 12px 28px rgba(2,6,23,0.56), 0 10px 18px rgba(255,106,0,0.16);
overflow:hidden;
} #bottom-tech-nav.has-center .btn-link.is-center{gap:0}
#bottom-tech-nav.has-center .btn-link.is-center .btn-icon{position:absolute;top:13px}
#bottom-tech-nav.has-center .btn-link.is-center .btn-icon svg{width:24px;height:24px}
#bottom-tech-nav.has-center .btn-link.is-center .btn-label{
position:absolute;
bottom:9px;
display:block;
font-weight:800;
letter-spacing:0.02em;
opacity:0.98;
max-width:64px;
} #bottom-tech-nav.has-center .btn-link:not(.is-center){
opacity:0.92;
} #bottom-tech-nav a .ripple{
position:absolute;
width:170px;
height:170px;
margin-left:-85px;
margin-top:-85px;
border-radius:50%;
background:radial-gradient(circle, rgba(57,167,255,0.22) 0%, rgba(57,167,255,0.08) 40%, transparent 62%);
pointer-events:none;
transform:scale(0);
animation:btnn-ripple .6s linear;
}
@keyframes btnn-ripple{to{transform:scale(1);opacity:0}} @media (prefers-reduced-motion: reduce){
#bottom-tech-nav .btnn-indicator,
#bottom-tech-nav .btn-link,
#bottom-tech-nav a .ripple{
transition:none !important;
animation:none !important;
}
} @media(min-width:900px){
#bottom-tech-nav{display:none}
#bottom-tech-nav.btnn-cta.btnn-show-all{display:block}
} @media(min-width:900px){
#bottom-tech-nav.btnn-cta.btnn-show-all{
left:auto;
right:18px;
bottom:18px;
transform:none;
width:min(460px, calc(100% - 36px));
}
#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-row{
padding:12px 14px;
border-radius:18px;
}
#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-bg{border-radius:18px}
#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-thumb{
width:52px;
height:52px;
flex-basis:52px;
border-radius:14px;
}
#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-title{
font-size:14px;
font-weight:820;
white-space:normal;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-width:320px;
}
#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-price{font-size:13px;margin-top:2px}
#bottom-tech-nav.btnn-cta.btnn-show-all .btnn-cta-btn{padding:12px 18px;font-size:13px}
} @media(max-width:420px){
#bottom-tech-nav .btn-label{display:none}
#bottom-tech-nav.has-center .btn-link.is-center .btn-label{display:block}
}.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}.mfo-offcanvas{position:fixed;inset:0;z-index:999999999999999999999;display:none;opacity:0;transition:opacity .36s ease}
.mfo-offcanvas .mfo-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);opacity:0}
.mfo-offcanvas .mfo-panel{position:fixed;left:0;top:0;bottom:0;width:320px;max-width:85%;background:#fff;box-shadow:2px 0 18px rgba(0,0,0,.2);transform:translateX(-110%);overflow:auto;padding:2.5rem 1rem;z-index:999999999999999999999}
.mfo-offcanvas.mfo-open{display:block;opacity:1}
.mfo-offcanvas.mfo-open .mfo-overlay{opacity:1} .mfo-offcanvas.mfo-open:not(.mfo-opening):not(.mfo-closing) .mfo-panel{transform:translateX(0) !important}
@keyframes mfo-slide-in {
0% { transform: translateX(-110%); }
60% { transform: translateX(8%); }
100% { transform: translateX(0); }
}
@keyframes mfo-slide-out {
0% { transform: translateX(0); }
100% { transform: translateX(-110%); }
}
@keyframes mfo-fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes mfo-fade-out { 0% { opacity: 1 } 100% { opacity: 0 } }
.mfo-offcanvas.mfo-open.mfo-opening .mfo-panel{animation: mfo-slide-in .44s cubic-bezier(.2,.8,.2,1) both}
.mfo-offcanvas.mfo-closing .mfo-panel{animation: mfo-slide-out .28s cubic-bezier(.4,0,.2,1) both}
.mfo-offcanvas.mfo-open.mfo-opening .mfo-overlay{animation: mfo-fade-in .36s ease both}
.mfo-offcanvas.mfo-closing .mfo-overlay{animation: mfo-fade-out .28s ease both}
.mfo-close{position:absolute;right:8px;top:8px;background:transparent;border:0;font-size:24px;line-height:1;color:#333}
.mfo-open-btn{display:inline-block;margin-left:8px;padding:.38rem .6rem;background:#222;color:#fff;border:0;border-radius:4px;font-size:14px}
.mfo-no-scroll{overflow:hidden} .mfo-desktop-open-btn{
display:none;
position:fixed;
left:18px;
top:110px; padding:10px 14px;
border-radius:999px;
background:linear-gradient(135deg,#ff7a18,#ff4e50);
color:#fff;
border:0;
z-index:130000;
box-shadow:0 6px 20px rgba(0,0,0,.20);
opacity:0;
transform:translateY(6px);
transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease;
font-weight:600;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
}
.mfo-desktop-open-btn::before{
content:'';
display:inline-block;
width:16px;
height:16px;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M3 5h18l-7 8v6l-4-2v-4L3 5z'/></svg>");
background-size:contain;
background-repeat:no-repeat;
transform:translateY(1px);
}
.mfo-desktop-open-btn.mfo-desktop-visible{opacity:1;transform:translateY(0);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.mfo-desktop-open-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.32)}
.mfo-desktop-open-btn:focus{outline:none;box-shadow:0 0 0 6px rgba(255,122,24,0.12)}
@media (max-width:1200px){
.mfo-desktop-open-btn{display:none !important}
} @media (min-width:1201px){
.mfo-desktop-open-btn{display:block !important}
} .mfo-hidden-original{display:none !important} .mfo-panel .sidebar-area,
.mfo-panel .shop-sidebar,
.mfo-panel .sidebar-area * {
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
backface-visibility: hidden !important;
will-change: auto !important;
} .mfo-panel .sidebar-area {padding: 0 0 1rem 0; position:relative; z-index:1000000000} .mfo-panel{overflow:auto; overflow-x:visible} .mfo-panel .widget,
.mfo-panel .woocommerce-widget-price-filter,
.mfo-panel .widget_layered_nav,
.mfo-panel .woocommerce-widget-layered-nav {
transform: none !important;
-webkit-transform: none !important;
} .mfo-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mfo-badge{background:#f1f1f1;color:#333;padding:6px 8px;border-radius:14px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.mfo-badge .mfo-badge-remove{background:transparent;border:0;color:#666;cursor:pointer;font-weight:700}
.mfo-badge .mfo-badge-remove:focus{outline:2px solid #ddd}
.col-xl-4{
transition: all .36s;
}
.mfo-sidebar-hidden .col-xl-4{
width: 25%!important;
} @media (max-width:480px){
.mfo-badges{gap:4px}
.mfo-badge{padding:5px 7px;font-size:11px}
} @media (max-width:1200px){
.th-product-wrapper > .container > .row > .col-xl-3,
.th-product-wrapper > .container > .row > .col-lg-4 {
width: 0 !important;
max-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
display: none !important;
}
.th-product-wrapper > .container > .row > .col-xl-9,
.th-product-wrapper > .container > .row > .col-lg-8,
.th-product-wrapper > .container > .row > .col-lg-12,
.th-product-wrapper > .container > .row > .col-lg-9 {
width: 100% !important;
max-width: 100% !important;
} }
@media(min-width:1201px){
.mfo-offcanvas{display:none !important}
.mfo-open-btn{display:none !important}
} @media (min-width: 1201px) {  .th-product-wrapper > .container > .row > .col-xl-3,
.th-product-wrapper > .container > .row > .col-lg-4 {
width: var(--mfo-sidebar-width, 280px) !important;
max-width: var(--mfo-sidebar-width, 280px) !important;
transition: width .36s ease-in-out, max-width .36s ease-in-out, padding .36s ease-in-out, margin .36s ease-in-out, opacity .24s ease-in-out;
} .th-product-wrapper > .container > .row > .col-xl-9,
.th-product-wrapper > .container > .row > .col-lg-8,
.th-product-wrapper > .container > .row > .col-lg-12,
.th-product-wrapper > .container > .row > .col-lg-9 {
width: calc(100% - var(--mfo-sidebar-width, 280px)) !important;
max-width: calc(100% - var(--mfo-sidebar-width, 280px)) !important;
transition: width .36s ease-in-out, max-width .36s ease-in-out;
}
.th-product-wrapper.mfo-sidebar-hidden > .container > .row > .col-xl-9,
.th-product-wrapper.mfo-sidebar-hidden > .container > .row > .col-lg-8,
.th-product-wrapper.mfo-sidebar-hidden > .container > .row > .col-lg-12,
.th-product-wrapper.mfo-sidebar-hidden > .container > .row > .col-lg-9 {
max-width: 100% !important;
width: 100% !important;
transition: width .36s ease-in-out, max-width .36s ease-in-out;
} .th-product-wrapper.mfo-sidebar-hidden > .container > .row > .col-xl-3,
.th-product-wrapper.mfo-sidebar-hidden > .container > .row > .col-lg-4 {
width: 0 !important;
max-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
transition: width .36s ease-in-out, max-width .36s ease-in-out, padding .36s ease-in-out, margin .36s ease-in-out, opacity .24s ease-in-out;
opacity: 0;
} .th-product-wrapper.mfo-sidebar-hidden .shop-sidebar,
.th-product-wrapper.mfo-sidebar-hidden .sidebar-area {
width: 0 !important;
max-width: 0 !important;
overflow: hidden !important;
opacity: 0;
transition: opacity .24s ease-in-out, width .36s ease-in-out;
} .th-product-wrapper.mfo-sidebar-hidden .shop-grid-area {
width: 100% !important;
transition: width .36s ease-in-out;
}
} @media (min-width: 1201px) {
.th-product-wrapper > .container > .row > .col-xl-3,
.th-product-wrapper > .container > .row > .col-lg-4 {
width: 360px !important;
max-width: 360px !important;
}
.th-product-wrapper > .container > .row > .col-xl-9,
.th-product-wrapper > .container > .row > .col-lg-8,
.th-product-wrapper > .container > .row > .col-lg-12,
.th-product-wrapper > .container > .row > .col-lg-9 {
width: calc(100% - 360px) !important;
max-width: calc(100% - 360px) !important;
}
}