/* FRODIX: bright trade-counter clarity, blue cold / copper heat. */
:root{--porcelain:oklch(.986 .002 250);--surface:#fff;--surface-2:#f1f5fa;--surface-3:#e7edf5;--ink:#142b49;--ink-2:#3d526c;--sz-muted:#596b80;--on-dark:#fff;--sz-line:#dae3ec;--sz-line-soft:#eaf0f5;--sz-gold:#1454a0;--sz-gold-2:#0b3b77;--sz-gold-deep:#124b91;--pitch:#187a53;--pitch-soft:#dff3e8;--ember:#db551e;--aurora-1:#edf5fc;--aurora-2:#e9f0f8;--glass:#fff;--glass-2:#fff;--glass-edge:#e0e7ee;--blur:0px;--r-1:6px;--r-2:8px;--r-3:10px;--r-4:12px;--r-5:14px;--r-6:16px;--font:'Manrope','Segoe UI',sans-serif;--font-display:var(--font);--font-mono:var(--font);--wrap:1320px;--gut:clamp(18px,4vw,64px);--nav-h:90px;--sh-2:none;--sh-3:none;--sh-gold:none;--orange:#e7672c;--blue:#123d7b}
body{background:#fff}h1,h2,h3,.display{text-transform:none!important;letter-spacing:-.035em!important;font-family:var(--font)!important;text-wrap:balance}h2{font-size:clamp(25px,2.6vw,36px);line-height:1.2}p{text-wrap:pretty}.wrap-wide{width:min(calc(100% - var(--gut)*2),var(--wrap));max-width:var(--wrap);padding-inline:0;margin-inline:auto}.shell{padding:0;margin:0;overflow:clip}.i{fill:none;stroke:currentColor;stroke-width:1.65;flex-shrink:0}.btn{background:var(--blue);color:#fff;border:1px solid transparent;border-radius:6px;box-shadow:none;font-family:var(--font);font-weight:700;letter-spacing:0;text-transform:none;min-height:48px;padding:13px 22px}.btn:hover{background:#0b2e61;box-shadow:none;transform:translateY(-2px)}.btn-ghost{background:transparent;color:var(--blue);border:1px solid #c6d7e7}.btn-ghost:hover{background:#eaf1f9}.btn-light{background:#fff;color:var(--blue)}.btn-light:hover{background:#eaf1f9}.textlink{color:var(--blue);font-size:13px;font-weight:800}.input,.select{border-radius:6px;background:#fff;box-shadow:none}.input::placeholder{color:#65758a}.price{font-family:var(--font);letter-spacing:-.02em}.mono{text-transform:none;letter-spacing:0}.reveal,.reveal-scale,.js .reveal,.js .reveal-scale{opacity:1;transform:none;filter:none}.loader{display:none!important}.glass,.glass-dark{backdrop-filter:none;box-shadow:none}.fx-news{height:34px;display:flex;align-items:center;background:var(--blue);color:#fff;font-size:11px;overflow:hidden;padding:0 var(--gut);gap:28px}.fx-news-label{font-weight:800;white-space:nowrap}.fx-news-window{overflow:hidden;flex:1}.fx-news-track{display:flex;width:max-content;animation:news-scroll 38s linear infinite}.fx-news-track>span{display:flex;align-items:center;gap:32px;padding-right:32px;white-space:nowrap;letter-spacing:.02em}.fx-news-track b{color:#91c9f4}.fx-news button{border:0;background:transparent;color:#fff;font-size:16px;padding:4px 9px;cursor:pointer}.fx-news:hover .fx-news-track,.fx-news:focus-within .fx-news-track,.fx-news.is-paused .fx-news-track{animation-play-state:paused}@keyframes news-scroll{to{transform:translateX(-50%)}}
.hdr{position:sticky;top:0;inset-inline:auto;width:100%;padding:0;margin:0;border-radius:0;border:0;border-bottom:1px solid var(--sz-line);background:#fff!important;backdrop-filter:none;box-shadow:none;transform:none;color:var(--ink)}.fx-header{height:90px;display:flex;align-items:center;gap:38px}.fx-brand{display:block;flex-shrink:0;width:172px}.fx-brand img{display:block;width:100%;height:70px;object-fit:contain}.fx-search{flex:1;display:flex;align-items:center;gap:14px;height:46px;border:1px solid #dce4ed;border-radius:6px;background:#f7f9fc;color:#617086;padding:0 16px;text-align:left;cursor:pointer;font-size:12px}.fx-search kbd{margin-left:auto;border:1px solid #dce4ed;border-radius:3px;padding:0 6px;font:inherit}.fx-header-actions{display:flex;gap:23px;align-items:center}.fx-account{display:flex;gap:10px;align-items:center;font-size:10px;line-height:1.6}.fx-account b{font-size:12px}.fx-cart{display:flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;font:700 12px var(--font);color:var(--ink)}.fx-count{display:grid;place-items:center;background:var(--blue);color:#fff;width:22px;height:22px;border-radius:50%;font-size:10px}.fx-nav{height:50px;display:flex;align-items:center;gap:29px;font-size:12px;font-weight:700}.fx-nav>a{height:100%;display:flex;align-items:center;gap:10px;white-space:nowrap;transition:color .2s}.fx-nav>a:hover{color:var(--orange)}.fx-nav .fx-all{padding-right:24px;border-right:1px solid var(--sz-line);gap:12px}.fx-nav .fx-promo{color:#c34c1b}.fx-nav-help{margin-left:auto;font-size:11px}.menu-btn{display:none}.menu{background:#fff;backdrop-filter:none}.menu-top .fx-brand{width:150px}.menu-foot{display:flex;gap:20px;flex-wrap:wrap}.search-ov{background:#fff;backdrop-filter:none}.search-ov .wrap-wide{padding-block:24px}.cart-drawer{background:#fff;backdrop-filter:none;border-radius:0}.cart-ship,.cart-service{background:#f1f6fb}.tabbar{background:#fff;backdrop-filter:none;border-radius:0;border-top:1px solid var(--sz-line)}.tabbar [aria-current=page]{color:var(--blue)}.wa-float{background:var(--blue);color:#fff;box-shadow:none;width:46px;height:46px;border-radius:50%}
.fx-hero{margin-top:26px;min-height:470px;display:grid;grid-template-columns:1fr 1.06fr;background:#edf4fa;border-radius:10px;position:relative;overflow:hidden}.fx-hero-copy{padding:52px 0 48px 46px;position:relative;z-index:2}.fx-kicker{display:inline-flex;gap:9px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.08em;color:#41638b;text-transform:uppercase}.fx-kicker:before{content:'';width:6px;height:6px;background:var(--orange);border-radius:50%}.fx-hero h1{font-size:clamp(38px,4.15vw,60px);font-weight:800;line-height:1.09;max-width:540px;margin:21px 0}.fx-hero h1 span{color:#266cb1}.fx-hero-copy>p{font-size:13px;line-height:1.9;color:#566b84;max-width:385px}.fx-hero-actions{display:flex;gap:12px;align-items:center;margin-top:25px}.fx-hero-actions .btn{font-size:11px}.fx-hero-foot{display:flex;gap:18px;margin-top:27px;color:#486580;font-size:10px}.fx-hero-foot span{display:flex;align-items:center;gap:6px}.fx-hero-foot .i{width:15px;height:15px}.fx-hero-art{position:relative;min-width:0;display:flex;align-items:center;background:#e8f2fa}.fx-hero-art>img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}.fx-art-caption{position:absolute;bottom:30px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#3a628a}.fx-art-caption b{background:#fff;border-radius:4px;padding:9px 14px;font-size:10px}.fx-hero-index{position:absolute;top:24px;right:24px;font-size:10px;color:#4c6d90}.fx-hero-index span{color:var(--orange)}
.fx-benefits{display:grid;grid-template-columns:repeat(4,1fr);padding-block:25px;border-bottom:1px solid var(--sz-line);gap:20px}.fx-benefits>div{display:flex;align-items:center;gap:13px}.fx-benefits .i{width:26px;height:26px;color:#325f92}.fx-benefits b{display:block;font-size:11px;margin-bottom:3px}.fx-benefits small{font-size:10px;color:var(--sz-muted)}.fx-section{padding-block:47px}.fx-section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:26px}.fx-section-head h2{font-size:28px;font-weight:800}.fx-section-head p{font-size:12px;color:var(--sz-muted);margin-top:7px}.fx-categories{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.fx-category{min-width:0;text-align:center}.fx-category-visual{height:135px;position:relative;display:grid;place-items:center;background:#f4f7fa;border-radius:8px;overflow:hidden;transition:background .25s}.fx-category img{width:100%;height:100%;max-height:135px;object-fit:contain;mix-blend-mode:multiply;padding:12px;transition:transform .5s var(--e-out)}.fx-category:hover img{transform:scale(1.08)}.fx-category:hover .fx-category-visual{background:#eaf2fa}.fx-category strong{display:block;margin-top:14px;font-size:11px}.fx-category small{display:block;margin-top:3px;font-size:10px;color:var(--sz-muted)}.fx-category-visual>.i{width:64px;height:64px;color:var(--blue)}
.fx-products-section{background:#f6f8fb;padding-block:43px}.fx-product-tabs{display:flex;gap:5px;background:#eaf0f6;padding:4px;border-radius:6px}.fx-product-tabs button{border:0;background:none;padding:9px 15px;font:700 10px var(--font);cursor:pointer;color:#4a617b;border-radius:4px}.fx-product-tabs button[aria-selected=true]{background:#fff;color:var(--blue)}.fx-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px}.card{background:#fff;border:1px solid #e0e7ee;border-radius:8px;box-shadow:none;overflow:hidden;transition:transform .3s,border-color .3s}.card:hover{box-shadow:none;border-color:#7eacd4;transform:translateY(-4px)}.card .card-media{aspect-ratio:1.18;background:#fff;border-radius:0;margin:0;overflow:hidden}.card-media img{object-fit:contain;width:100%;height:100%;padding:22px;transition:transform .6s var(--e-out)}.card:hover .card-media img{transform:scale(1.04)}.card .card-body{padding:17px 19px 19px;border-top:1px solid #eff3f7}.card-meta{font-size:9px!important;text-transform:uppercase;letter-spacing:.03em;color:#5a7088}.card-body h3{font-size:13px!important;line-height:1.55;min-height:40px;margin:8px 0 12px;font-weight:800}.card-foot{display:flex;align-items:end;gap:8px;justify-content:space-between;flex-wrap:wrap}.card-price{display:flex;flex-direction:column;gap:1px}.card-price strong{font-size:17px;color:var(--blue)}.card-price s{font-size:10px;color:#7b8999}.card-cta{background:#edf3fb;border:0;border-radius:5px;padding:10px;color:var(--blue);font-size:10px;min-height:38px;box-shadow:none;position:relative;z-index:2}.card-cta:hover{background:var(--blue);color:#fff}.card-cta .i{width:16px;height:16px}.cta-long{display:none}.card-tags{top:12px;left:12px}.badge{border-radius:4px;padding:4px 8px;font:700 9px var(--font);letter-spacing:0}.badge-sale{color:#b34416;background:#fff0e8}.badge-new{color:#245b95;background:#edf4fc}.card-peek{display:none}.fx-stock{font-size:9px;color:#227147;display:flex;align-items:center;gap:5px;margin-bottom:12px}.fx-stock:before{content:'';width:5px;height:5px;border-radius:50%;background:#2c9663}.fx-more{display:flex;justify-content:center;margin-top:25px}.fx-more .btn{font-size:11px}.fx-assistance{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;padding:38px 42px;background:var(--blue);color:#fff;border-radius:10px;position:relative;overflow:hidden}.fx-assistance h2{max-width:540px;font-size:31px;line-height:1.25}.fx-assistance p{font-size:12px;color:#c4d5eb;margin-top:12px;max-width:440px;line-height:1.9}.fx-assistance-action{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:14px}.fx-assistance-action .btn{font-size:12px}.fx-assistance-action small{font-size:10px;color:#c4d5eb}.fx-assistance .fx-orange{color:#ffb081}.fx-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.fx-guide{border-top:2px solid var(--blue);padding-top:18px}.fx-guide>span{font-size:10px;color:#677c94}.fx-guide h3{font-size:17px;line-height:1.4;margin:11px 0}.fx-guide p{font-size:12px;color:var(--sz-muted);line-height:1.9;margin-bottom:16px}.fx-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding-block:48px;border-top:1px solid var(--sz-line)}.fx-faq h2{max-width:350px}.fx-faq-intro>p{font-size:12px;color:var(--sz-muted);margin:15px 0 20px}.fx-faq details{border-bottom:1px solid var(--sz-line);padding:17px 0}.fx-faq summary{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;cursor:pointer;list-style:none;gap:15px}.fx-faq summary:after{content:'+';font-size:21px;color:#52708f}.fx-faq details[open] summary:after{content:'−'}.fx-faq details p{font-size:12px;color:var(--sz-muted);padding-top:12px;line-height:1.9}
.foot{background:#0e2c52!important;color:#fff;border-radius:0;margin:30px 0 0;padding:45px 0 0}.fx-footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:32px;border-bottom:1px solid #2b4668}.fx-footer-top .fx-brand{background:white;padding:7px 16px;border-radius:5px;width:174px}.fx-footer-top .fx-brand img{height:54px}.fx-footer-top p{font-size:12px;color:#bfccdd;margin-top:17px}.fx-footer-top>.btn{font-size:11px}.fx-footer-links{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:35px;padding-block:35px}.fx-footer-links h4{font-size:12px;color:#fff;margin-bottom:15px}.fx-footer-links a{display:block;font-size:11px;color:#c0cde0;margin-bottom:9px}.fx-footer-links a:hover{color:#fff}.fx-footer-note p{font-size:11px;color:#c0cde0;line-height:1.9}.foot-base{border-color:#2b4668;color:#afc2da;font-size:9px;padding-block:22px;display:flex;justify-content:space-between;gap:20px}.foot-base>div{display:flex;gap:20px}
.page-head{padding:38px 0;background:#f1f6fb;margin:0;border-radius:0}.page-head .display{font-size:clamp(29px,3.5vw,46px);line-height:1.2}.page-head .lede{font-size:13px;max-width:65ch;line-height:1.9;margin-top:14px}.crumbs{font-size:10px;margin-bottom:22px}.page-head-row{gap:25px}.page-head .search-inline .input{min-width:0!important}.catalog{padding-block:32px}.tabs{padding-block:24px;gap:8px}.tabs .chip{font-size:10px;border-radius:5px;background:#fff}.tabs .chip[aria-current=page]{background:var(--blue);color:#fff}.filters{background:#fff;border-radius:8px;box-shadow:none}.filters legend{font-size:12px}.filters .radio{font-size:11px}.toolbar-count{font-size:12px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail{gap:55px;padding-block:30px}.detail-title{font-size:clamp(26px,3vw,40px);line-height:1.25}.detail-stage{background:#f5f8fb;border-radius:10px;border:1px solid #e6edf4}.detail-stage img{padding:28px;mix-blend-mode:multiply}.detail-price>b{font-size:30px;color:var(--blue)}.detail-house{color:#5e7793;font-size:11px}.fx-compat{display:flex;gap:12px;padding:16px;background:#eef4fa;border-radius:6px;margin-bottom:22px;color:#42607c}.fx-compat p{font-size:11px;line-height:1.8}.fx-compat a{text-decoration:underline;color:var(--blue)}.detail-assurances b{font-size:11px}.detail-assurances span span{font-size:10px}.detail-panel-body{font-size:13px}.detail-panels summary{font-size:12px}.detail-info .stock-line{font-size:12px}.auth{margin:30px auto;max-width:1200px;border-radius:12px;overflow:hidden}.auth-aside{background:var(--blue)!important;color:#fff!important}.auth-aside h1{font-size:42px}.auth-aside .lede{color:#cedbed;font-size:14px}.auth-aside .mark{font-size:20px;color:#fff}.auth-aside ul{color:#cedbed}.auth-form h2{font-size:27px}.auth .field label{font-size:12px}.auth-form{max-width:430px}.notice,.summary,.order-card{box-shadow:none;backdrop-filter:none}.notice{background:#edf4fa;border-radius:6px}.fx-info-layout{display:grid;grid-template-columns:.6fr 1.4fr;gap:60px;padding-block:45px}.fx-info-aside{align-self:start;background:#f2f6fb;border-radius:8px;padding:25px}.fx-info-aside h3{font-size:17px;margin-bottom:15px}.fx-info-aside a{display:block;font-size:12px;padding:10px 0;border-bottom:1px solid #dce5ee}.fx-info-content h2{font-size:25px;margin-bottom:18px}.fx-info-content h3{font-size:18px;margin:25px 0 10px}.fx-info-content p,.fx-info-content li{font-size:13px;line-height:1.9;color:var(--sz-muted);margin-bottom:14px}.fx-info-content ul{padding-left:20px}.fx-info-content .field{margin-bottom:17px}.fx-info-content label{font-size:12px}.fx-info-content .fx-faq{display:block;border-top:0;padding-top:0}.fx-info-content details p{margin-bottom:0}.fx-contact-success{padding:26px;background:#e9f5ef;border-radius:8px;color:#246344}.fx-category-page{padding-block:40px}.fx-category-page .fx-categories{grid-template-columns:repeat(3,1fr);gap:28px}.fx-category-page .fx-category-visual{height:230px}.fx-category-page .fx-category img{max-height:230px}.fx-category-page .fx-category strong{font-size:16px}.fx-category-page .fx-category small{font-size:12px}
@media(min-width:1500px){.fx-hero{min-height:515px}.fx-hero-copy{padding-top:66px}.fx-category-visual{height:155px}.fx-category img{max-height:155px}}
@media(max-width:1100px){.fx-header{gap:22px}.fx-header-actions{gap:16px}.fx-account span,.fx-favorite{display:none}.fx-nav{gap:20px}.fx-nav-help{display:none!important}.fx-hero h1{font-size:44px}.fx-hero-copy{padding:37px 0 37px 30px}.fx-hero{min-height:430px}.fx-hero-actions{flex-wrap:wrap}.fx-hero-foot{gap:10px;flex-wrap:wrap}.fx-categories{gap:12px}.fx-product-grid{gap:12px}.card .card-body{padding:13px}.card-cta-label{display:none}.fx-benefits{gap:12px}.fx-benefits>div{gap:9px}.fx-benefits small{font-size:9px}.fx-assistance h2{font-size:27px}}
@media(max-width:760px){:root{--gut:20px;--nav-h:72px}.fx-news{height:29px;padding-inline:16px;gap:14px;font-size:9px}.fx-news-label{font-size:9px}.fx-news-track>span{gap:22px}.fx-header{height:73px;gap:14px}.fx-brand{width:132px}.fx-brand img{height:58px}.menu-btn{display:grid}.fx-search{margin-left:auto;flex:0 0 37px;padding:0;border:0;background:none;justify-content:center}.fx-search span,.fx-search kbd{display:none}.fx-header-actions{gap:10px}.fx-account,.fx-cart>span{display:none}.fx-cart{gap:6px}.fx-cart>.i{width:22px}.fx-count{width:17px;height:17px;font-size:9px}.fx-nav{display:none}.fx-hero{grid-template-columns:1fr;margin-top:16px;min-height:0}.fx-hero-copy{padding:28px 25px 12px}.fx-kicker{font-size:8px}.fx-hero h1{font-size:clamp(34px,8.7vw,51px);max-width:490px;margin:17px 0}.fx-hero-copy>p{font-size:12px;line-height:1.8;max-width:400px}.fx-hero-actions{margin-top:20px;gap:9px;flex-wrap:nowrap}.fx-hero-actions .btn{font-size:10px;min-height:43px;padding:11px 13px;gap:8px}.fx-hero-foot{margin-top:19px;font-size:9px}.fx-hero-art{height:280px}.fx-hero-art>img{object-fit:cover;object-position:center 47%}.fx-hero-index{top:18px;right:18px;font-size:9px}.fx-art-caption{bottom:17px;left:23px;right:23px}.fx-art-caption b{font-size:9px}.fx-benefits{grid-template-columns:1fr 1fr;padding:22px 0;row-gap:22px}.fx-benefits b{font-size:10px}.fx-benefits .i{width:24px;height:24px}.fx-section{padding-block:32px}.fx-section-head{margin-bottom:21px;align-items:center;gap:12px}.fx-section-head h2{font-size:23px}.fx-section-head p{font-size:11px;max-width:230px}.fx-section-head .textlink{font-size:10px;white-space:nowrap;gap:6px}.fx-categories{grid-template-columns:repeat(3,1fr);gap:21px 12px}.fx-category-visual{height:105px}.fx-category img{max-height:105px;padding:9px}.fx-category strong{font-size:10px;margin-top:10px}.fx-category small{font-size:9px}.fx-products-section{padding-block:31px}.fx-products-section .fx-section-head{align-items:start;flex-direction:column;gap:15px}.fx-product-tabs button{padding:8px 13px}.fx-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.card .card-media{aspect-ratio:1.03}.card-media img{padding:13px}.card .card-body{padding:12px}.card-meta{font-size:8px!important}.card-body h3{font-size:11px!important;min-height:34px;margin:6px 0 9px}.card-price strong{font-size:14px}.card-price s{font-size:9px}.card-cta{padding:8px;min-height:33px}.card-cta .i{width:14px;height:14px}.fx-stock{font-size:8px;margin-bottom:9px}.card-tags{top:8px;left:8px}.badge{font-size:8px;padding:3px 6px}.fx-assistance{grid-template-columns:1fr;padding:28px 24px;gap:23px}.fx-assistance h2{font-size:27px}.fx-assistance p{font-size:11px}.fx-assistance-action{align-items:flex-start;gap:10px}.fx-guide-grid{grid-template-columns:1fr;gap:24px}.fx-guide h3{font-size:18px}.fx-faq{grid-template-columns:1fr;gap:15px;padding-block:32px}.fx-faq h2{font-size:27px}.fx-faq-intro>p{margin:12px 0}.fx-footer-top{align-items:start;gap:22px;flex-direction:column}.fx-footer-links{grid-template-columns:1fr 1fr;gap:30px 20px}.foot-base{flex-direction:column;gap:12px}.foot{margin-top:10px;padding-top:30px;padding-bottom:78px}.fx-footer-top .fx-brand{width:150px}.fx-footer-links h4{font-size:11px}.fx-footer-links a{font-size:10px}.fx-footer-note p{font-size:10px}.tabbar{min-height:63px;padding-bottom:env(safe-area-inset-bottom)}.tabbar span{font-size:9px}.wa-float{bottom:85px;right:15px;width:40px;height:40px}.page-head{padding:27px 0}.page-head-row{flex-direction:column;align-items:stretch}.page-head .search-inline{margin-top:15px}.page-head .lede{font-size:12px}.catalog .grid,.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail{gap:25px;padding-top:15px}.detail-title{font-size:27px}.detail-stage img{padding:15px}.detail-assurances{gap:10px}.detail{grid-template-columns:1fr}.auth{margin:16px 20px;display:block}.auth-aside{padding:27px;display:block}.auth-aside h1{font-size:29px}.auth-aside ul{display:none}.auth-aside .lede{font-size:12px}.auth-aside .mark{font-size:13px}.auth-main{padding:27px 22px}.auth-form h2{font-size:23px}.fx-info-layout{grid-template-columns:1fr;gap:28px;padding-block:28px}.fx-info-aside{order:2}.fx-category-page .fx-categories{grid-template-columns:repeat(2,1fr);gap:23px 15px}.fx-category-page .fx-category-visual{height:155px}.fx-category-page .fx-category img{max-height:155px}.fx-category-page .fx-category strong{font-size:12px}.fx-category-page .fx-category small{font-size:10px}.fx-contact-success{padding:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fx-news-track{animation:none;transform:none}.fx-news-window{overflow:auto}.fx-news-track>span[aria-hidden]{display:none}}

[hidden]{display:none!important}:root{--primary-dark:#fff;--secondary-dark:#f4f7fb;--text-cream:#142b49;--text-gray:#596b80;--border-dark:#dae3ec;--accent-blue:#1454a0;--accent-red:#db551e;--transition:all .2s ease}.page-title::after{display:none}.orders-section .container,.order-detail-section .container{width:min(1100px,calc(100% - 40px));margin:auto}.order-card:hover{box-shadow:none!important}.fx-hero-art>img{object-fit:contain}.fx-hero h1{font-size:clamp(38px,4.1vw,58px)}.fx-stock{display:flex}
/* Final interaction and compact product layout refinements. */
.card .card-body{display:block;flex:1}.card .card-foot{margin:0;display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:8px}.card .card-price{flex:1;min-width:0;gap:2px}.card .card-price strong{font-size:17px}.card .card-price s{font-size:11px}.card .card-cta{width:auto;flex:0 0 auto;min-width:39px;padding:10px}.card .card-body h3{min-height:40px;margin-bottom:9px}.card .fx-stock{margin-bottom:13px}.fx-save{position:absolute;right:10px;top:10px;z-index:3;width:32px;height:32px;border:0;border-radius:50%;background:#fff;display:grid;place-items:center;color:#5a718a;cursor:pointer}.fx-save[aria-pressed=true]{color:#d7512c;background:#fff0e8}.fx-save[aria-pressed=true] svg{fill:#d7512c}.fx-save:hover{background:#edf3fa;color:#123d7b}.fx-order-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid #dce5ee}.fx-order-line b,.fx-order-line strong{font-size:14px}.fx-order-line p{margin:5px 0 0}.auth-form input:not([type=checkbox]):not([type=hidden]),.auth-form select,.fx-info-content .form-control{width:100%;min-height:46px;border:1px solid #d3deea;border-radius:6px;padding:10px 13px;color:#142b49;background:#fff;font:inherit}.fx-info-content input[type=file]{max-width:100%}.errorlist{color:#af351c;font-size:12px;list-style:none;padding:0}.auth-form .errorlist{margin:8px 0 18px}.buybar .btn{border-radius:6px}.filters .radio{min-height:36px}.fx-hero-art{background:#eaf3fa}.fx-hero-art>img{height:auto;object-fit:contain}.card h3 a::before{z-index:1}.fx-save,.card-cta{z-index:3}.fx-faq details{scroll-margin-top:160px}.fx-info-content article{scroll-margin-top:170px}
@media(max-width:760px){.card .card-price strong{font-size:14px}.card .card-price s{font-size:9px}.card .card-cta{width:32px;min-width:32px;padding:7px}.card .card-body h3{font-size:11px!important;min-height:36px}.fx-save{width:28px;height:28px;right:6px;top:6px}.fx-save svg{width:14px;height:14px}.card .fx-stock{font-size:8px;margin-bottom:9px}.fx-hero h1{font-size:clamp(34px,8.7vw,51px)}.fx-hero-art>img{height:100%;object-fit:cover}.fx-section-head .textlink{white-space:normal}.fx-faq details{scroll-margin-top:90px}}

/* ==========================================================================
   FRODIX — cart page, phone hero, category rail.
   The mobile tab bar is gone, the cart is a page rather than a drawer, and
   the phone hero is sized to land inside one screen instead of scrolling
   past it.
   ========================================================================== */

/* ------------------------------------------------------------ header cart */
.fx-cart{text-decoration:none}
.fx-cart[data-bump] .fx-count{animation:fx-count-pop .6s var(--e-out)}
@keyframes fx-count-pop{0%{transform:scale(1)}35%{transform:scale(1.42)}100%{transform:scale(1)}}

/* ------------------------------------------------------------- cart page */
.fx-cart-head{background:#eef4fa;border-bottom:1px solid #dce6f1;padding:26px 0 28px}
.fx-cart-head .crumbs{display:flex;align-items:center;gap:7px;margin-bottom:16px;font-size:10px;color:#5b7591}
.fx-cart-head .crumbs a{color:#335f92}
.fx-cart-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fx-cart-head .display{font-size:clamp(27px,3.2vw,40px);line-height:1.15;margin-top:11px}
.fx-steps{display:flex;align-items:center;gap:12px;padding-bottom:5px}
.fx-steps li{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#7b8ea4}
.fx-steps li+li:before{content:'';width:22px;height:1px;background:#c8d7e6;margin-right:4px}
.fx-steps b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #cddbe9;font-size:10px;color:#6b8098}
.fx-steps [aria-current=step]{color:var(--blue)}
.fx-steps [aria-current=step] b{background:var(--blue);border-color:var(--blue);color:#fff}

.fx-cart-body{padding-block:34px 46px}
.fx-cart-page .order{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:26px;align-items:start}

/* The slip: one sheet, ruled lines between articles. */
.fx-slip{background:#fff;border:1px solid #e0e8f0;border-radius:10px;padding:4px 22px 22px}
.fx-slip-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px 0 6px;border-bottom:2px solid var(--blue)}
.fx-slip-head h2{font-size:16px;font-weight:800}
.fx-slip-count{font-size:10px;font-weight:700;color:#6b8098;letter-spacing:.04em;text-transform:uppercase}

.fx-cart-page .order-line{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:18px;align-items:center;margin:0;padding:18px 0;border:0;border-bottom:1px solid #edf1f6;border-radius:0;background:none;box-shadow:none;transition:opacity .2s}
.fx-cart-page .order-line:last-of-type{border-bottom:0}
.fx-cart-page .order-line:hover{box-shadow:none}
.fx-cart-page .order-line[data-busy=true]{opacity:.45;pointer-events:none}
.fx-cart-page .line-frame{width:92px;aspect-ratio:1;border-radius:8px;background:#f3f7fb;border:1px solid #e8eef5;display:block;overflow:hidden}
.fx-cart-page .line-frame img{width:100%;height:100%;object-fit:contain;padding:9px;mix-blend-mode:multiply}
.fx-cart-page .line-name{font-size:14px;font-weight:800;line-height:1.35}
.fx-cart-page .line-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fx-cart-page .line-meta span{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5c748f;background:#f1f5fa;border-radius:4px;padding:4px 8px}
.fx-cart-page .line-sku{color:#335f92;background:#e9f1fa}
.fx-cart-page .line-unit{display:flex;align-items:baseline;gap:6px;margin-top:9px;font-size:11px;color:#6b8098}
.fx-cart-page .line-unit .price{font-size:12px;font-weight:800;color:var(--ink)}
.fx-cart-page .line-side{display:grid;justify-items:end;gap:10px}
.fx-cart-page .qty{display:flex;align-items:center;border:1px solid #d6e0ea;border-radius:6px;overflow:hidden;background:#fff}
.fx-cart-page .qty button{width:36px;height:38px;display:grid;place-items:center;border:0;background:none;color:#4b6480;cursor:pointer}
.fx-cart-page .qty button:hover:not([disabled]){background:#eef4fa;color:var(--blue)}
.fx-cart-page .qty button[disabled]{opacity:.33;cursor:not-allowed}
.fx-cart-page .qty input{width:38px;height:38px;border:0;border-inline:1px solid #e6edf4;text-align:center;font:800 13px var(--font);color:var(--ink);background:#fff}
.fx-cart-page .line-total{font-size:18px;font-weight:800;color:var(--blue)}
.fx-cart-page .line-remove{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 0;font:700 10px var(--font);color:#8091a4;cursor:pointer}
.fx-cart-page .line-remove:hover{color:#c1441c}

.fx-slip-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px}
.fx-slip-foot .textlink{display:inline-flex;align-items:center;gap:6px}
.fx-slip-note{display:flex;align-items:center;gap:9px;font-size:11px;color:#6b8098}
.fx-slip-note .i{color:var(--blue);flex:none}
.fx-slip-note a{color:var(--blue);text-decoration:underline}

/* Summary: the counter's own copy of the slip. */
.fx-cart-page .summary{position:sticky;top:150px;display:grid;gap:14px;background:none;border:0;padding:0;box-shadow:none}
.summary-card{background:#fff;border:1px solid #e0e8f0;border-top:3px solid var(--blue);border-radius:10px;padding:22px;display:grid;gap:13px}
.summary-card h2{font-size:16px;font-weight:800;margin-bottom:2px}
.fx-cart-page .summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;color:#6b8098}
.fx-cart-page .summary-row strong{font-size:13px;font-weight:800;color:var(--ink)}
.fx-cart-page .summary-pending{color:#6b8098;font-weight:700;font-size:11px}
.fx-cart-page .summary-credit strong{color:#1d7a52}
.fx-cart-page .summary-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:13px;margin-top:2px;border-top:1px solid #e6edf4;font-size:12px;font-weight:800}
.fx-cart-page .summary-total .price{font-size:25px;color:var(--blue)}
.summary-ship{display:flex;gap:9px;align-items:flex-start;background:#f1f6fb;border-radius:6px;padding:12px;font-size:10.5px;line-height:1.65;color:#4e6a86}
.summary-ship .i{color:var(--blue);flex:none;margin-top:1px}
.fx-cart-page .summary .btn{width:100%;justify-content:center;font-size:12px}
.fx-cart-page .summary-reassure{display:grid;gap:10px;padding:18px 22px;background:#f6f9fc;border:1px solid #e6edf4;border-radius:10px;border-block-start:1px solid #e6edf4}
.fx-cart-page .summary-reassure li{display:flex;align-items:flex-start;gap:9px;font-size:11px;color:#5e7590}
.fx-cart-page .summary-reassure .i{color:var(--blue);flex:none;margin-top:1px}

/* Empty state: an exit, not a dead end. */
.fx-cart-empty{text-align:center;max-width:520px;margin:34px auto 20px}
.fx-cart-empty-mark{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 20px;border-radius:50%;background:#eef4fa;color:var(--blue)}
.fx-cart-empty-mark .i{width:28px;height:28px}
.fx-cart-empty h2{font-size:24px;font-weight:800}
.fx-cart-empty>p{font-size:12.5px;line-height:1.85;color:var(--sz-muted);margin-top:12px}
.fx-cart-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.fx-cart-empty-actions .btn{font-size:11px}
.fx-cart-empty-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px;padding-top:26px;border-top:1px solid var(--sz-line)}
.fx-cart-empty-cats a{display:grid;gap:8px;justify-items:center}
.fx-cart-empty-cats img{width:100%;max-width:78px;height:66px;object-fit:contain;background:#f4f7fa;border-radius:8px;padding:8px;mix-blend-mode:multiply}
.fx-cart-empty-cats span{font-size:10px;font-weight:700;color:#4e6a86}

/* Phone-only running total; desktop keeps it out of the way. */
.fx-cart-bar{display:none}

/* ------------------------------------------------------------ phone rules */
@media(max-width:760px){
  /* Benefits: a quieter strip under the fold. */
  .fx-benefits{padding:18px 0;row-gap:16px;gap:14px}
  .fx-benefits .i{width:20px;height:20px}
  .fx-benefits b{font-size:9.5px;margin-bottom:2px}
  .fx-benefits small{font-size:8.5px;line-height:1.4}

  /* Categories: a rail you swipe, not a grid you scroll past. The card is
     cut at 39% so a third one always peeks in and the swipe is discoverable
     without a caption saying so. */
  .fx-section>.fx-categories{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding:2px var(--gut) 4px}
  .fx-section>.fx-categories::-webkit-scrollbar{display:none}
  .fx-section>.fx-categories>.fx-category{flex:0 0 39%;scroll-snap-align:center;background:#fff;border:1px solid #e5ecf3;border-radius:8px;padding:8px 8px 11px}
  .fx-section>.fx-categories .fx-category-visual{height:84px;border-radius:6px}
  .fx-section>.fx-categories .fx-category img{max-height:84px;padding:6px}
  .fx-section>.fx-categories .fx-category strong{font-size:9.5px;margin-top:9px}
  .fx-section>.fx-categories .fx-category small{font-size:8.5px;margin-top:2px}

  /* Product cards: less card, more product. */
  .fx-products-section{padding-block:26px}
  .fx-product-grid{gap:10px}
  .card{border-radius:7px}
  .card .card-media{aspect-ratio:1.22}
  .card-media img{padding:9px}
  .card .card-body{padding:9px 10px 11px}
  .card-meta{font-size:7.5px!important}
  .card .card-body h3{font-size:10.5px!important;line-height:1.4;min-height:30px;margin:5px 0 6px}
  .card .fx-stock{font-size:7.5px;margin-bottom:7px}
  .card .fx-stock:before{width:4px;height:4px}
  .card .card-foot{gap:6px}
  .card .card-price strong{font-size:13px}
  .card .card-price s{font-size:8.5px}
  .card .card-cta{width:30px;min-width:30px;min-height:30px;padding:0;display:grid;place-items:center;border-radius:5px}
  .card .card-cta .i{width:13px;height:13px}
  .fx-save{width:25px;height:25px;right:5px;top:5px}
  .fx-save svg{width:12px;height:12px}
  .card-tags{top:5px;left:5px}
  .badge{font-size:7.5px;padding:2px 5px}

  /* No mobile tab bar any more: reclaim the space it used to reserve. */
  .foot{padding-bottom:30px}

  /* Cart page on a phone. */
  .fx-cart-head{padding:18px 0 20px}
  .fx-cart-head .crumbs{margin-bottom:11px;font-size:9px}
  .fx-cart-head .display{font-size:26px;margin-top:8px}
  .fx-cart-head-row{gap:16px}
  .fx-steps{gap:8px;padding-bottom:0}
  .fx-steps li{font-size:9.5px;gap:6px}
  .fx-steps li+li:before{width:14px;margin-right:2px}
  .fx-steps b{width:19px;height:19px;font-size:9px}
  .fx-steps li:not([aria-current=step]) span{display:none}

  .fx-cart-body{padding-block:20px 24px}
  .fx-cart-page .order{grid-template-columns:1fr;gap:18px}
  .fx-slip{padding:2px 14px 16px;border-radius:9px}
  .fx-slip-head{padding:14px 0 5px}
  .fx-slip-head h2{font-size:14px}
  .fx-slip-count{font-size:9px}

  /* Two columns, then the controls on a line of their own so the stepper and
     the line total never crowd the product name. */
  .fx-cart-page .order-line{grid-template-columns:66px minmax(0,1fr);gap:12px;padding:14px 0}
  .fx-cart-page .line-frame{width:66px;border-radius:7px}
  .fx-cart-page .line-frame img{padding:6px}
  .fx-cart-page .line-name{font-size:12.5px}
  .fx-cart-page .line-meta{gap:5px;margin-top:6px}
  .fx-cart-page .line-meta span{font-size:8px;padding:3px 6px}
  .fx-cart-page .line-unit{margin-top:7px;font-size:9.5px}
  .fx-cart-page .line-unit .price{font-size:11px}
  .fx-cart-page .line-side{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;justify-items:stretch;gap:12px}
  .fx-cart-page .qty button{width:33px;height:34px}
  .fx-cart-page .qty input{width:34px;height:34px;font-size:12px}
  .fx-cart-page .line-total{font-size:16px;justify-self:end}
  .fx-cart-page .line-remove{justify-self:end;font-size:9px}
  .fx-cart-page .line-remove span{display:none}

  .fx-slip-foot{padding-top:15px;gap:11px}
  .fx-slip-note{font-size:10px;align-items:flex-start}

  .fx-cart-page .summary{position:static}
  .summary-card{padding:17px;gap:11px}
  .summary-card h2{font-size:14px}
  .fx-cart-page .summary-total .price{font-size:21px}
  .fx-cart-page .summary-reassure{padding:15px 17px;gap:9px}
  .fx-cart-page .summary-reassure li{font-size:10px}

  .fx-cart-empty{margin-top:14px}
  .fx-cart-empty h2{font-size:20px}
  .fx-cart-empty-cats{gap:8px;margin-top:26px;padding-top:20px}
  .fx-cart-empty-cats img{height:52px}
  .fx-cart-empty-cats span{font-size:8.5px}

  /* Running total, pinned. The page keeps room for it so the last article is
     never trapped underneath. */
  .fx-cart-bar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--sz-line);box-shadow:0 -6px 18px rgba(18,61,123,.07)}
  .fx-cart-bar small{display:block;font-size:9px;color:#7b8ea4;margin-bottom:2px}
  .fx-cart-bar .price{font-size:17px;font-weight:800;color:var(--blue)}
  .fx-cart-bar .btn{font-size:10px;min-height:42px;padding:11px 15px;gap:7px}
  .fx-cart-page{padding-bottom:74px}
}

@media(max-width:400px){
  .fx-section>.fx-categories>.fx-category{flex:0 0 44%}
  .fx-cart-bar .btn{font-size:9.5px;padding:11px 12px}
}

/* ==========================================================================
   FRODIX — the menu unfurls from the header.
   It is anchored to the header's own bottom edge (set in JS, because the
   header is sticky and that edge moves when the news bar scrolls away) and
   revealed with clip-path, so it reads as the header opening downward rather
   than a panel arriving from off-screen. The burger stays put and becomes
   the close control.
   ========================================================================== */

.scrim{background:rgba(14,36,66,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* The burger is the close control, so it has to sit above the scrim. */
body[data-menu=open] .menu-btn{background:#eaf1f9;color:var(--blue)}

.menu{
  position:fixed;
  inset-block-start:var(--panel-top,102px);
  inset-block-end:auto;
  inset-inline:0;
  width:auto;
  max-height:calc(100dvh - var(--panel-top,102px));
  overflow-y:auto;
  overscroll-behavior:contain;
  z-index:var(--z-panel);
  background:#fff;
  border:0;
  border-block-end:1px solid var(--sz-line);
  border-radius:0;
  box-shadow:0 20px 44px rgba(14,44,82,.16);
  transform:none;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .42s var(--e-out),visibility .42s
}
.menu[data-open=true]{transform:none;clip-path:inset(0 0 0 0);visibility:visible}

.menu-inner{
  padding:20px var(--gut) 22px;
  display:grid;gap:22px;
  opacity:0;transform:translateY(-12px);
  transition:opacity .26s linear,transform .38s var(--e-out)
}
.menu[data-open=true] .menu-inner{opacity:1;transform:none;transition-delay:.07s}

.menu-h{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7b8ea4;margin-bottom:12px
}

/* Six categories, three across: the catalogue's front door. */
.menu-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.menu-cats>a{
  display:grid;justify-items:center;gap:7px;
  padding:10px 6px 11px;
  background:#f6f9fc;border:1px solid #e7eef5;border-radius:8px;
  opacity:0;transform:translateY(-7px)
}
.menu[data-open=true] .menu-cats>a{
  opacity:1;transform:none;
  transition:opacity .34s var(--e-out) calc(var(--i,0) * 32ms + 120ms),
             transform .34s var(--e-out) calc(var(--i,0) * 32ms + 120ms),
             background-color .18s linear,border-color .18s linear
}
.menu-cats>a:hover,.menu-cats>a:focus-visible{background:#eaf2fa;border-color:#c9dcee}
.menu-cat-visual{display:grid;place-items:center;width:100%;height:52px}
.menu-cat-visual img{max-width:100%;max-height:52px;object-fit:contain;mix-blend-mode:multiply}
.menu-cats b{font-size:9.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.3}

/* The quick links keep the sentence-case of the rest of the site: the old
   uppercase display type belonged to a full-height panel, not to this. */
.menu-list{display:grid;gap:0}
.menu-list>a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 2px;
  border-block-end:1px solid var(--sz-line-soft);
  border-radius:0;
  font-family:var(--font);font-size:13px;font-weight:800;
  text-transform:none;letter-spacing:-.01em;
  opacity:0;transform:translateY(-6px)
}
.menu[data-open=true] .menu-list>a{
  opacity:1;transform:none;
  transition:opacity .3s var(--e-out) calc(var(--i,0) * 34ms + 180ms),
             transform .3s var(--e-out) calc(var(--i,0) * 34ms + 180ms),
             color .18s linear
}
.menu-list>a:last-child{border-block-end:0}
.menu-list>a .i{color:#9db0c4;transition:transform .2s var(--e-out),color .18s linear}
.menu-list>a:hover{background:none;color:var(--blue)}
.menu-list>a:hover .i{color:var(--blue);transform:translateX(3px)}
.menu-promo{color:#c34c1b}

.menu-help{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;
  background:var(--blue);color:#fff;border-radius:9px
}
.menu-help>.i:first-child{width:22px;height:22px;flex:none}
.menu-help span{flex:1;min-width:0}
.menu-help b{display:block;font-size:12px}
.menu-help small{display:block;font-size:10px;color:#c4d8ef;margin-top:3px;line-height:1.5}
.menu-help>.i:last-child{flex:none;transition:transform .2s var(--e-out)}
.menu-help:hover>.i:last-child{transform:translateX(3px)}

.menu-foot{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding:16px 0 0;margin:0;
  border-block-start:1px solid var(--sz-line);
  border-block-end:0
}
.menu-foot a{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:#5e7590}
.menu-foot a:hover{color:var(--blue)}
.menu-foot .i{color:#9db0c4}

@media(max-width:400px){
  .menu-cats{gap:7px}
  .menu-cats>a{padding:9px 4px 10px}
  .menu-cat-visual{height:46px}
  .menu-cat-visual img{max-height:46px}
  .menu-cats b{font-size:9px}
  .menu-foot{gap:8px 14px}
}

/* The menu is a phone affordance; on a wide screen the category row in the
   header already does this job, so keep it narrow and anchored left. */
@media(min-width:761px){
  .menu{inset-inline:auto 0;width:min(560px,92vw);border-inline-start:1px solid var(--sz-line);border-end-start-radius:12px}
  .menu-inner{padding:24px 28px 26px}
}

/* ==========================================================================
   FRODIX — checkout: the delivery docket.
   Numbered steps on a sheet, the same slip vocabulary as the cart, and the
   delivery fee surfaced on the mode cards the moment a wilaya is picked.
   ========================================================================== */

.fx-checkout .order{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.8fr);gap:26px;align-items:start}
.fx-checkout .fx-cart-head .display{max-width:none}

/* ------------------------------------------------------------ the steps */
.fx-checkout .form-block{
  display:block;
  background:#fff;border:1px solid #e0e8f0;border-radius:10px;
  padding:22px;margin:0 0 16px;box-shadow:none
}
.fx-step-head{display:flex;align-items:flex-start;gap:13px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #edf1f6}
.fx-step-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--blue);color:#fff;font:800 11px var(--font)
}
.fx-step-head h2{font-size:16px;font-weight:800;line-height:1.25}
.fx-step-head p{font-size:11px;color:#6b8098;margin-top:5px;line-height:1.6}

/* ------------------------------------------------------------ the fields */
.fx-checkout .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fx-checkout .field-full{grid-column:1/-1}
.fx-checkout .field{display:grid;gap:7px;min-width:0}
.fx-checkout label{font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink)}
.fx-checkout .req{color:#c1441c}
.fx-checkout .input,.fx-checkout .select,.fx-checkout .textarea{
  width:100%;min-height:46px;
  border:1px solid #d6e0ea;border-radius:6px;
  padding:11px 13px;
  font:500 12.5px var(--font);color:var(--ink);background:#fff;
  transition:border-color .16s linear,box-shadow .16s linear
}
.fx-checkout .textarea{min-height:84px;resize:vertical;line-height:1.6}
.fx-checkout .select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b6480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.fx-checkout .input:focus,.fx-checkout .select:focus,.fx-checkout .textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,61,123,.12)}
.fx-checkout .input::placeholder,.fx-checkout .textarea::placeholder{color:#93a4b7}
.fx-checkout [aria-invalid=true]{border-color:#d0674a;box-shadow:0 0 0 3px rgba(208,103,74,.13)}
.fx-checkout .err{font-size:10.5px;font-weight:700;color:#b5401d}
.fx-checkout .help{font-size:10.5px;color:#7b8ea4;line-height:1.55}

/* ------------------------------------------------- delivery mode choice */
.fx-checkout .choice-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.fx-checkout .choice{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;
  border:1px solid #d6e0ea;border-radius:8px;background:#fff;
  cursor:pointer;
  transition:border-color .16s linear,background-color .16s linear
}
.fx-checkout .choice:hover{border-color:#a9c4de;background:#fbfdff}
.fx-checkout .choice[data-on=true]{border-color:var(--blue);background:#f4f8fd;box-shadow:0 0 0 1px var(--blue) inset}
.choice-mark{
  flex:none;width:17px;height:17px;border-radius:50%;
  border:1.5px solid #c2d1e0;background:#fff;
  transition:border-color .16s linear
}
.fx-checkout .choice[data-on=true] .choice-mark{border:5px solid var(--blue)}
.choice-body{flex:1;min-width:0}
.choice-body strong{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800}
.choice-body strong .i{color:var(--blue)}
.choice-note{display:block;font-size:10px;color:#7b8ea4;margin-top:3px}
.choice-fee{flex:none;font:800 12px var(--font);color:var(--blue)}
.fx-checkout .choice[data-on=false] .choice-fee{color:#8fa3b8}

/* --------------------------------------------------- bureau + payment */
.fx-bureau-plate{
  display:flex;gap:10px;align-items:flex-start;
  padding:13px 14px;
  background:#f1f6fb;border:1px solid #dce7f2;border-radius:7px;
  font-size:11.5px;line-height:1.7;color:#42607c
}
.fx-bureau-plate .i{color:var(--blue);flex:none;margin-top:2px}

.fx-pay-plate{
  display:flex;gap:13px;align-items:center;
  padding:15px 16px;margin-bottom:18px;
  background:#eef6f1;border:1px solid #cfe6da;border-radius:8px
}
.fx-pay-mark{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:#fff;color:#1d7a52
}
.fx-pay-mark .i{width:19px;height:19px}
.fx-pay-plate b{display:block;font-size:12.5px;color:#17593d}
.fx-pay-plate small{display:block;font-size:10.5px;color:#3f7a5f;margin-top:3px;line-height:1.6}

/* ------------------------------------------------------- alert + submit */
.fx-form-alert{
  display:flex;gap:10px;align-items:flex-start;
  padding:13px 15px;margin-bottom:16px;
  background:#fdf0ec;border:1px solid #f0cdc1;border-radius:8px;
  font-size:11.5px;font-weight:700;line-height:1.6;color:#a83c19
}
.fx-form-alert .i{flex:none;margin-top:1px}

.fx-submit{display:grid;gap:11px;justify-items:center}
.fx-checkout .fx-submit .btn{width:100%;justify-content:center;font-size:13px;min-height:54px}
.fx-submit-note{font-size:10.5px;color:#7b8ea4;text-align:center;line-height:1.6;max-width:44ch}
.fx-submit-note a{color:var(--blue);text-decoration:underline}

/* --------------------------------------------------------- the summary */
.fx-checkout .summary{position:sticky;top:150px;display:grid;gap:14px;background:none;border:0;padding:0;box-shadow:none}
.summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.summary-edit{font-size:10px;font-weight:800;color:var(--blue);text-decoration:underline}
.fx-checkout .summary-lines{display:grid;gap:13px;max-height:264px;overflow-y:auto;padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid #e6edf4}
.fx-checkout .summary-line{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center}
.fx-checkout .summary-line .frame{position:relative;width:46px;aspect-ratio:1;border-radius:6px;background:#f3f7fb;border:1px solid #e8eef5;overflow:visible}
.fx-checkout .summary-line .frame img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:multiply;border-radius:6px}
.summary-qty{
  position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;
  background:var(--blue);color:#fff;font-size:9.5px;font-weight:800
}
.fx-checkout .summary-line b{display:block;font-size:11.5px;font-weight:800;line-height:1.35}
.fx-checkout .summary-line small{display:block;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#7b8ea4;margin-top:4px}
.fx-checkout .summary-line .price{font-size:12px;font-weight:800}
.fx-checkout .summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;color:#6b8098}
.fx-checkout .summary-row strong{font-size:13px;font-weight:800;color:var(--ink)}
.fx-checkout .summary-pending{color:#7b8ea4;font-weight:700;font-size:10.5px}
.fx-checkout .summary-credit strong{color:#1d7a52}
.fx-checkout .summary-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:13px;margin-top:2px;border-top:1px solid #e6edf4;font-size:12px;font-weight:800}
.fx-checkout .summary-total .price{font-size:25px;color:var(--blue)}
.fx-checkout .summary-reassure{display:grid;gap:10px;padding:18px 22px;background:#f6f9fc;border:1px solid #e6edf4;border-radius:10px}
.fx-checkout .summary-reassure li{display:flex;align-items:flex-start;gap:9px;font-size:11px;color:#5e7590}
.fx-checkout .summary-reassure .i{color:var(--blue);flex:none;margin-top:1px}

/* Step 1 of the flow is behind us on this page. */
.fx-steps .is-done b{background:#1d7a52;border-color:#1d7a52;color:#fff}
.fx-steps .is-done{color:#1d7a52}
.fx-steps .is-done b .i{width:12px;height:12px}

/* --------------------------------------------------------- phone rules */
@media(max-width:760px){
  .fx-checkout .order{grid-template-columns:1fr;gap:16px}
  .fx-checkout .form-block{padding:16px;margin-bottom:12px;border-radius:9px}
  .fx-step-head{gap:11px;padding-bottom:13px;margin-bottom:15px}
  .fx-step-n{width:23px;height:23px;font-size:10px}
  .fx-step-head h2{font-size:14px}
  .fx-step-head p{font-size:10px;margin-top:4px}

  .fx-checkout .form-grid{grid-template-columns:1fr;gap:12px}
  .fx-checkout .input,.fx-checkout .select,.fx-checkout .textarea{min-height:44px;font-size:12px;padding:10px 12px}
  .fx-checkout .textarea{min-height:76px}
  .fx-checkout label{font-size:10.5px;letter-spacing:0;text-transform:none}

  /* Stacked, so the fee has room to read next to the name. */
  .fx-checkout .choice-row{grid-template-columns:1fr;gap:9px;margin-bottom:15px}
  .fx-checkout .choice{padding:12px}
  .choice-body strong{font-size:11.5px}
  .choice-note{font-size:9.5px}
  .choice-fee{font-size:11.5px}

  .fx-pay-plate{padding:13px;gap:11px;margin-bottom:15px}
  .fx-pay-mark{width:34px;height:34px}
  .fx-pay-plate b{font-size:11.5px}
  .fx-pay-plate small{font-size:10px}
  .fx-bureau-plate{font-size:11px;padding:12px}

  /* The bar carries the confirm on a phone; this one would be a second,
     competing copy of it right above the bar. */
  .fx-submit{display:none}

  .fx-checkout .summary{position:static}
  .fx-checkout .summary-lines{max-height:none}
  .fx-checkout .summary-total .price{font-size:21px}
  .fx-checkout .summary-reassure{padding:15px 17px;gap:9px}
  .fx-checkout .summary-reassure li{font-size:10px}

  .fx-checkout{padding-bottom:74px}
  .fx-checkout .fx-cart-bar .btn{font-size:11px;padding:11px 18px}
  .fx-checkout .fx-cart-bar .btn[disabled]{opacity:.55}
}

@media(max-width:400px){
  .fx-checkout .fx-cart-bar .btn{font-size:10.5px;padding:11px 14px}
}

/* ==========================================================================
   FRODIX — WhatsApp button, fixed bottom-right on every page.
   ========================================================================== */
.wa-float{
  position:fixed;
  inset-block-end:calc(18px + env(safe-area-inset-bottom));
  inset-inline-end:16px;
  z-index:45;
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 8px 20px rgba(20,90,50,.28);
  transition:transform .2s var(--e-out),box-shadow .2s var(--e-out)
}
.wa-float .i{width:27px;height:27px;fill:currentColor;stroke:none}
.wa-float:hover{transform:scale(1.07);box-shadow:0 10px 26px rgba(20,90,50,.36)}
.wa-float:active{transform:scale(.97)}

/* A single soft ring, so it is noticed once without nagging. */
.wa-float::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid #25d366;
  animation:wa-ring 2.6s var(--e-out) infinite
}
@keyframes wa-ring{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

@media(max-width:760px){
  .wa-float{width:48px;height:48px;inset-block-end:calc(14px + env(safe-area-inset-bottom));inset-inline-end:14px}
  .wa-float .i{width:24px;height:24px}
  /* Clear the running-total bar on the cart and checkout rather than
     disappearing: this is the way to ask a question mid-order. */
  body:has(.fx-cart-bar) .wa-float{display:grid;inset-block-end:calc(76px + env(safe-area-inset-bottom))}
  /* The product page's own sticky bar (.buybar) already ends in a
     product-aware WhatsApp button — a second, generic one stacked on top of
     it is redundant and, at this width, visually collides with it. */
  body:has(.buybar) .wa-float{display:none}
}



/* ==========================================================================
   FRODIX — the language switch, and Arabic right to left.
   ========================================================================== */

.fx-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #dbe4ee;border-radius:6px;background:#f7f9fc;flex:none}
.fx-lang button{
  border:0;background:none;cursor:pointer;
  padding:5px 9px;border-radius:4px;
  font:800 10px var(--font);color:#5e7590;
  letter-spacing:.02em;line-height:1;white-space:nowrap;
  transition:background-color .16s linear,color .16s linear
}
.fx-lang button:hover{color:var(--blue)}
.fx-lang button[aria-pressed=true]{background:var(--blue);color:#fff}
.fx-lang button[lang=ar]{font-size:11px}
.fx-lang-wide{display:flex;width:100%}
.fx-lang-wide button{flex:1;padding:9px;font-size:11px}

@media(max-width:760px){
  /* The header is tight on a phone; the switch lives in the menu instead. */
  .fx-header-actions .fx-lang{display:none}
}

/* -------------------------------------------------------------- Arabic */
/* Follows SiteTheme's font_arabic (Cairo by default — a professional,
   editorial-weight Arabic grotesque that pairs with the Latin headings
   without competing with them), not a hardcoded family. */
[dir=rtl] body,[dir=rtl] .fx-news,[dir=rtl] .menu,[dir=rtl] .foot{
  font-family:var(--font-arabic,'Cairo','Segoe UI',Tahoma,var(--font))
}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .display{letter-spacing:0!important}

/* Marks and arrows that point along the reading direction. */
[dir=rtl] .fx-nav .fx-all{padding-right:0;padding-left:24px;border-right:0;border-left:1px solid var(--sz-line)}
[dir=rtl] .fx-nav-help{margin-left:0;margin-right:auto}
[dir=rtl] .fx-search{text-align:right}
[dir=rtl] .fx-search kbd{margin-left:0;margin-right:auto}
[dir=rtl] .card-tags{left:auto;right:8px}
[dir=rtl] .fx-save{right:auto;left:5px}
[dir=rtl] .fx-hero-index{right:auto;left:12px}
[dir=rtl] .wa-float{inset-inline-end:14px}
[dir=rtl] .summary-qty{right:auto;left:-6px}
[dir=rtl] .fx-steps li+li:before{margin-right:0;margin-left:4px}
[dir=rtl] .fx-slip-head{direction:rtl}
[dir=rtl] .fx-checkout .select{background-position:left 12px center;padding-right:13px;padding-left:36px}
[dir=rtl] .fx-cart-page .qty input{border-inline:1px solid #e6edf4}
[dir=rtl] .fx-info-content ul{padding-left:0;padding-right:20px}

/* Arrow glyphs are drawn pointing right; flip the ones that mean "forward". */
[dir=rtl] .btn .i,[dir=rtl] .textlink .i,[dir=rtl] .menu-list>a .i,
[dir=rtl] .menu-help>.i:last-child,[dir=rtl] .fx-nav-help .i,
[dir=rtl] .crumbs .i,[dir=rtl] .fx-slip-foot .textlink .i{transform:scaleX(-1)}
[dir=rtl] .menu-list>a:hover .i{transform:scaleX(-1) translateX(3px)}
[dir=rtl] .card-cta:hover .i{transform:scaleX(-1) translateX(3px)}
[dir=rtl] .fx-promo span{display:inline-block;transform:scaleX(-1)}

/* The category rail is a horizontal scroller: it has to start on the right. */
[dir=rtl] .fx-section>.fx-categories{direction:rtl}

/* Prices and phone numbers stay left-to-right inside Arabic text. */
[dir=rtl] .price,[dir=rtl] .fx-count,[dir=rtl] .line-sku,[dir=rtl] input[type=tel]{
  direction:ltr;unicode-bidi:isolate
}
[dir=rtl] .line-sku{text-align:right}
[dir=rtl] .fx-cart-page .line-total,[dir=rtl] .fx-cart-bar .price{text-align:left}

/* The news ticker scrolls toward the reading edge. */
[dir=rtl] .fx-news-track{animation-name:news-scroll-rtl}
@keyframes news-scroll-rtl{to{transform:translateX(50%)}}

/* Physical offsets that predate the Arabic build and do not mirror on their
   own. Logical properties would be better, but these are the few that were
   written as left/right and are load-bearing. */
[dir=rtl] .fx-hero-copy{padding:52px 46px 48px 0}
[dir=rtl] .fx-hero-index{top:24px;right:auto;left:24px}
[dir=rtl] .fx-save{right:auto;left:10px}
[dir=rtl] .card-tags{left:auto;right:12px}
[dir=rtl] .fx-art-caption{direction:rtl}
[dir=rtl] .fx-assistance-action{align-items:flex-start}
[dir=rtl] .fx-guide{border-top:2px solid var(--blue)}
[dir=rtl] .fx-footer-links a{text-align:right}

@media(max-width:1100px){
  [dir=rtl] .fx-hero-copy{padding:37px 30px 37px 0}
}
@media(max-width:760px){
  [dir=rtl] .fx-hero-copy{padding:0}
  [dir=rtl] .fx-save{left:5px;right:auto}
  [dir=rtl] .card-tags{right:5px;left:auto}
  [dir=rtl] .fx-cart-page .line-side{justify-items:stretch}
  [dir=rtl] .fx-cart-page .line-total,[dir=rtl] .fx-cart-page .line-remove{justify-self:start}
}

/* The catalogue banner still carried a "MATCHDAY" watermark from the theme
   this codebase was forked from. Retired rather than restyled — a giant word
   behind the heading is not part of this shop. */
.catalog-page .page-head::after{content:none}

/* ==========================================================================
   FRODIX — the hero is the photograph, on every screen.
   The phone already dropped the copy; the desktop split followed. The band
   keeps the same light ground as the picture's own backdrop, so the image
   sits in it without a visible seam.
   ========================================================================== */
.fx-hero{
  display:block;grid-template-columns:none;min-height:0;
  margin-top:22px;border-radius:0;overflow:visible;background:none
}
/* The copy wrapper stays displayed: display:none on it would take the h1
   out of the document for search engines too. Its children go instead,
   and the heading is clipped rather than removed. */
.fx-hero-copy{padding:0;pointer-events:none}
.fx-hero .fx-kicker,.fx-hero-copy>p,.fx-hero-actions,.fx-hero-foot{display:none}
.fx-hero h1{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0
}
.fx-hero-art{
  display:block;position:relative;height:auto;min-height:0;
  background:none
}
.fx-hero-art::after{display:none}
/* No band behind it and no multiply: the photograph carries its own light
   backdrop, so anything painted behind it only shows up as a seam down the
   sides. It sits on the page as a card of its own. */
/* Full content width. The height is an aspect ratio rather than a fixed
   value so the crop stays the same fraction of the photograph at every
   width — the arrangement is 3:2 and tall, and a fixed height cut the
   compressor's feet off on wide screens and not on narrow ones. */
.fx-hero-art>img{
  display:block;width:100%;height:auto;
  aspect-ratio:1.82;max-height:700px;
  border-radius:10px;
  object-fit:cover;object-position:center 52%;
  mix-blend-mode:normal
}
.fx-hero-index,.fx-art-caption{display:none}

/* ==========================================================================
   FRODIX — catalogue head.
   The old banner was a floating glass card with two aurora gradients and a
   watermark; the search inside it was three separate pieces that wrapped
   onto two lines. Same flat band as the cart and checkout heads now, and the
   search is one control.
   ========================================================================== */
.fx-shop-head{
  position:static;margin:0;border:0;border-radius:0;
  border-bottom:1px solid #dce6f1;
  padding:30px 0 32px;
  background:#eef4fa
}
.fx-shop-head::after{content:none}
.fx-shop-head .crumbs{display:flex;align-items:center;gap:7px;margin-bottom:16px;font-size:10px;color:#5b7591}
.fx-shop-head .crumbs a{color:#335f92}
.fx-shop-head .page-head-row{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap
}
.fx-shop-title{min-width:0;flex:1 1 380px}
.fx-shop-head .display{font-size:clamp(27px,3.2vw,40px);line-height:1.15;max-width:none;margin-top:11px}
.fx-shop-head .lede{font-size:12.5px;line-height:1.75;color:#5e7590;max-width:52ch;margin-top:10px}

.fx-shop-search{
  flex:0 1 400px;
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:5px 5px 5px 15px;
  background:#fff;border:1px solid #d6e0ea;border-radius:8px;
  box-shadow:none;backdrop-filter:none;
  transition:border-color .16s linear,box-shadow .16s linear
}
.fx-shop-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,61,123,.12)}
.fx-shop-search>.i{color:#7b8ea4;flex:none}
.fx-shop-search input{
  flex:1;min-width:0;width:auto;
  border:0;background:none;box-shadow:none;outline:0;padding:0;
  font:500 12.5px var(--font);color:var(--ink);min-height:0
}
.fx-shop-search input::placeholder{color:#93a4b7}
.fx-shop-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.fx-shop-search button{
  flex:none;border:0;cursor:pointer;
  min-height:42px;padding:0 20px;border-radius:6px;
  background:var(--blue);color:#fff;
  font:800 11px var(--font);letter-spacing:0;
  transition:background-color .16s linear
}
.fx-shop-search button:hover{background:#0b2e61}

/* The category chips lose the glass too. */
.catalog-page .tabs{padding-block:22px 0;gap:8px;flex-wrap:wrap}
.catalog-page .tabs .chip{
  min-height:38px;padding-inline:15px;
  border-radius:6px;
  background:#fff;border:1px solid #e0e8f0;
  box-shadow:none;backdrop-filter:none;
  font-size:11px;font-weight:700;color:#4e6a86
}
.catalog-page .tabs .chip:hover{border-color:#a9c4de;color:var(--blue)}
.catalog-page .tabs .chip[aria-current=page]{background:var(--blue);border-color:var(--blue);color:#fff}
.catalog-page .tabs .chip span:last-child{opacity:.6;font-size:10px;margin-inline-start:5px}
.catalog-page .tabs .chip[aria-current=page] span:last-child{opacity:.75}

@media(max-width:900px){
  .fx-shop-head .page-head-row{flex-direction:column;align-items:stretch;gap:18px}
  /* Once the row stacks, flex-basis governs height, not width — so the
     380px basis on the title became 380px of empty space. */
  .fx-shop-title{flex:0 0 auto}
  .fx-shop-search{flex:0 0 auto;width:100%}
}

@media(max-width:760px){
  .fx-hero{margin-top:10px}
  /* The phone keeps the whole photograph at its own ratio — the wide crop is
     a desktop measure, where there is width to spend. */
  .fx-hero-art>img{
    width:100%;height:auto;
    aspect-ratio:auto;max-height:none;
    object-fit:contain;border-radius:8px
  }

  .fx-shop-head{padding:18px 0 20px}
  .fx-shop-head .crumbs{margin-bottom:11px;font-size:9px}
  .fx-shop-head .display{font-size:26px;margin-top:8px}
  .fx-shop-head .lede{font-size:11.5px;margin-top:8px}
  .fx-shop-search{min-height:46px;padding:4px 4px 4px 12px;gap:8px}
  .fx-shop-search input{font-size:12px}
  .fx-shop-search button{min-height:38px;padding:0 15px;font-size:10.5px}
  .catalog-page .tabs{padding-block:16px 0;gap:7px}
  .catalog-page .tabs .chip{min-height:34px;padding-inline:12px;font-size:10px}
}

[dir=rtl] .fx-shop-search{padding:5px 15px 5px 5px}
[dir=rtl] .fx-shop-search input{text-align:right}
@media(max-width:760px){
  [dir=rtl] .fx-shop-search{padding:4px 12px 4px 4px}
}

/* The forked theme's catalogue rules are two classes deep (.catalog-page
   .page-head), so these carry the page class too rather than relying on
   source order alone. */
.catalog-page .page-head.fx-shop-head{
  position:static;margin:0;border:0;border-radius:0;
  border-bottom:1px solid #dce6f1;
  padding:30px 0 32px;
  background:#eef4fa;
  overflow:visible
}
.catalog-page .page-head.fx-shop-head::after{content:none}
.catalog-page .fx-shop-head .display{max-width:none}

/* Same treatment for the toolbar: flat row, not a floating glass slab. */
.catalog-page .toolbar{
  position:static;
  padding:0 0 16px;margin-block-end:20px;
  border:0;border-bottom:1px solid var(--sz-line);border-radius:0;
  background:none;box-shadow:none;backdrop-filter:none
}
.catalog-page .toolbar-count{font-size:12px;color:#5e7590}
.catalog-page .toolbar-count strong{color:var(--ink);font-weight:800}
.catalog-page .sort{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;color:#5e7590}
.catalog-page .sort .select{
  min-height:40px;padding:0 34px 0 13px;
  border:1px solid #d6e0ea;border-radius:6px;background-color:#fff;
  font:700 11.5px var(--font);color:var(--ink);box-shadow:none;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b6480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px
}
.catalog-page .sort .select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,61,123,.12)}
.catalog-page .filter-toggle{
  min-height:40px;border-radius:6px;background:#fff;border:1px solid #d6e0ea;
  font-size:11px;font-weight:700;color:#4e6a86;box-shadow:none;backdrop-filter:none
}
.catalog-page .filter-toggle:hover{border-color:#a9c4de;color:var(--blue)}

[dir=rtl] .catalog-page .sort .select{
  padding:0 13px 0 34px;background-position:left 11px center
}

/* Catalogue cards inherited 30px radii, glass fill and a lift-and-scale hover
   from the forked theme. They are the same product card as the home page and
   should read that way. */
.catalog-page .card{
  border-radius:8px;
  background:#fff;border-color:#e0e7ee;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none
}
.catalog-page .card-media{margin:0;border-radius:0;aspect-ratio:1.18}
.catalog-page .card-body{padding:17px 19px 19px}
.catalog-page .card-cta{
  min-height:38px;border-radius:5px;
  background:#edf3fb;backdrop-filter:none;-webkit-backdrop-filter:none
}
.catalog-page .card-cta:hover{background:var(--blue);color:#fff}
.catalog-page .card:hover{
  transform:translateY(-4px);box-shadow:none;border-color:#7eacd4
}
@media(max-width:760px){
  .catalog-page .card{border-radius:7px}
  .catalog-page .card-media{margin:0;border-radius:0;aspect-ratio:1.22}
  .catalog-page .card-body{padding:9px 10px 11px}
  .catalog-page .card-cta{min-height:30px;border-radius:5px}
}

/* ==========================================================================
   FRODIX — the search panel.
   Restored markup with no styles of its own was falling back to the forked
   theme's glass sheet at top:0, with the icon, field, button and close all
   laid out as loose inline boxes. It now unfurls from under the header the
   same way the menu does, and the field is one control.
   ========================================================================== */
body[data-panel=open] .hdr{z-index:75}

.search-ov{
  inset-block-start:var(--panel-top,102px);
  inset-inline:0;
  z-index:var(--z-panel);
  padding:0;
  background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;border-block-end:1px solid var(--sz-line);
  border-radius:0;
  box-shadow:0 20px 44px rgba(14,44,82,.16);
  transform:none;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  max-height:calc(100dvh - var(--panel-top,102px));
  overflow-y:auto;overscroll-behavior:contain;
  transition:clip-path .38s var(--e-out),visibility .38s
}
.search-ov[data-open=true]{transform:none;clip-path:inset(0 0 0 0);visibility:visible}
.search-ov .wrap-wide{padding-block:22px 24px}

.fx-search-form{
  display:flex;align-items:center;gap:11px;
  min-height:56px;padding:6px 6px 6px 17px;
  background:#fff;border:1px solid #d6e0ea;border-radius:9px;
  transition:border-color .16s linear,box-shadow .16s linear
}
.fx-search-form:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,61,123,.12)}
.fx-search-form>.i{color:#7b8ea4;flex:none;width:20px;height:20px}
.fx-search-form input{
  flex:1;min-width:0;
  border:0;background:none;box-shadow:none;outline:0;padding:0;
  font:500 14px var(--font);color:var(--ink);min-height:0
}
.fx-search-form input::placeholder{color:#93a4b7}
.fx-search-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.fx-search-form .btn{
  flex:none;min-height:44px;padding:0 22px;border-radius:6px;
  font-size:11.5px;box-shadow:none
}
/* The close sits outside the field: it dismisses the panel, not the query. */
.fx-search-form .iconbtn{
  flex:none;width:40px;height:40px;margin-inline-start:2px;
  display:grid;place-items:center;border:0;border-radius:6px;
  background:none;color:#7b8ea4;cursor:pointer;
  transition:background-color .16s linear,color .16s linear
}
.fx-search-form .iconbtn:hover{background:#eef4fa;color:var(--blue)}

.fx-search-hint{
  margin-block-start:11px;
  font-size:11px;color:#7b8ea4;padding-inline-start:2px
}

.search-ov .suggest{
  margin-block-start:18px;display:grid;gap:2px;
  padding-block-start:16px;border-block-start:1px solid var(--sz-line-soft)
}
.search-ov .suggest:empty{display:none}
.search-ov .suggest a{
  display:flex;align-items:center;gap:13px;
  padding:9px 10px;border-radius:7px;
  transition:background-color .14s linear
}
.search-ov .suggest a:hover,.search-ov .suggest a:focus-visible{background:#f1f6fb}
.search-ov .suggest img,.search-ov .suggest .suggest-thumb{
  width:44px;height:44px;flex:none;border-radius:6px;
  background:#f3f7fb;border:1px solid #e8eef5;
  object-fit:contain;padding:4px;mix-blend-mode:multiply
}
.search-ov .suggest b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.35}
.search-ov .suggest small{display:block;margin-top:3px;font-size:11px;font-weight:800;color:var(--blue)}
.search-ov .suggest .quiet{padding:10px 12px;font-size:11.5px;color:#7b8ea4}

@media(max-width:760px){
  .search-ov .wrap-wide{padding-block:16px 18px}
  .fx-search-form{min-height:48px;padding:5px 5px 5px 13px;gap:8px;flex-wrap:nowrap}
  .fx-search-form>.i{width:17px;height:17px}
  .fx-search-form input{font-size:13px}
  /* On a phone the icon-only submit keeps the field usable; the keyboard's
     own "go" key submits too. */
  .fx-search-form .btn{min-height:38px;padding:0 14px;font-size:10.5px}
  .fx-search-form .iconbtn{width:34px;height:34px}
  .fx-search-hint{font-size:10px;margin-block-start:9px}
  .search-ov .suggest{margin-block-start:14px;padding-block-start:13px}
  .search-ov .suggest img,.search-ov .suggest .suggest-thumb{width:38px;height:38px}
  .search-ov .suggest b{font-size:11.5px}
  .search-ov .suggest small{font-size:10.5px}
}

[dir=rtl] .fx-search-form{padding:6px 17px 6px 6px}
[dir=rtl] .fx-search-form input{text-align:right}
[dir=rtl] .fx-search-hint{padding-inline-start:0;padding-inline-end:2px}
@media(max-width:760px){
  [dir=rtl] .fx-search-form{padding:5px 13px 5px 5px}
}

/* ==========================================================================
   MMB Vêtements — luxury monochrome reskin.
   Every FRODIX-era rule above still runs the layout; this section repaints
   it. Most of the file already reaches for var(--blue)/var(--orange) for its
   "brand" moments, so redeclaring those two tokens below repaints buttons,
   prices, active states, focus rings and the news ticker in one move. What
   is left is the literal hex the original author reached for instead of a
   token (section backgrounds, badges, hovers) — those are repainted here one
   by one, in the same source order as the sections above so this block reads
   as a companion to them rather than a pile of unrelated overrides.
   ========================================================================== */

:root{
  --ink:#141414;--ink-2:#3d3a35;--sz-muted:#6b6862;
  --sz-line:#dedad2;--sz-line-soft:#ece8e0;
  --sz-gold:#141414;--sz-gold-2:#000;--sz-gold-deep:#1a1a1a;
  --aurora-1:#f7f6f3;--aurora-2:#efece6;
  --glass:#fff;--glass-2:#fff;--glass-edge:#dedad2;
  --porcelain:#f7f6f3;
  --orange:#6d1d35;--blue:#111111;
  --wa-green:#25d366;--wa-green-deep:#128c4a;
  /* Headings follow the Govix Admin font choice (Bodoni Moda by default for
     MMB); body copy keeps the grotesque. The old rule below hard-locked
     h1/h2/h3 to the body font with !important, which is why picking a
     display face in Site Settings never used to show up. */
  --font-display:var(--font-heading,'Bodoni Moda',Georgia,serif);
}
body{background:var(--porcelain)}
h1,h2,h3,.display{font-family:var(--font-display)!important}
.fx-shop-head,.page-head{background:var(--porcelain)}

/* Every focus ring in the file above is a literal navy rgba(); this repeats
   those selectors with an ink-based one instead of hunting each hex down. */
.fx-shop-search:focus-within,.fx-search-form:focus-within,
.fx-checkout .input:focus,.fx-checkout .select:focus,.fx-checkout .textarea:focus,
.input:focus,.select:focus{box-shadow:0 0 0 3px rgba(17,17,17,.12)!important}

/* ---------------------------------------------------------------- header */
.fx-brand img{mix-blend-mode:normal}
.fx-search{background:var(--porcelain);border-color:var(--sz-line);color:var(--sz-muted)}
.fx-nav>a{position:relative}
.fx-nav>a:hover{color:var(--orange)}
.fx-nav>a:not(.fx-all):not(.fx-promo):not(.fx-nav-help)::after{
  content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;
  transition:right .25s var(--e-out)
}
.fx-nav>a:not(.fx-all):not(.fx-promo):not(.fx-nav-help):hover::after{right:0}
.fx-news-track b{color:#cfc7bd}

/* The cart icon now opens WhatsApp — same slot, new intent. Green, so it
   reads as "chat" rather than "buy", and stays legible on the white header
   whichever theme colour is active. */
.fx-cart-wa{color:var(--wa-green-deep)}
.fx-cart-wa .i{color:var(--wa-green-deep)}
.fx-cart-wa:hover{color:var(--wa-green)}

/* ------------------------------------------------------------------ menu */
body[data-menu=open] .menu-btn{background:var(--sz-line-soft);color:var(--ink)}
.menu-cats>a:hover,.menu-cats>a:focus-visible{background:var(--sz-line-soft);border-color:var(--sz-line)}
.menu-cat-visual{color:var(--ink-2)}
.menu-cat-visual svg{width:34px;height:34px}
.menu-promo{color:var(--orange)}
.menu-help{background:var(--wa-green-deep)}

/* ----------------------------------------------------------------- hero
   A fresh set of classes (mmb-hero-*) rather than the legacy .fx-hero
   chain: a later FRODIX-era override turns .fx-hero into a bare photograph
   (h1 clipped off-screen, kicker/actions/foot hidden by default) which is
   right for a product photo hero but would silently hide the WhatsApp CTA
   here. Starting clean avoids fighting three generations of !important. */
.mmb-hero{margin-top:22px}
.mmb-hero-inner{
  position:relative;overflow:hidden;
  display:grid;justify-items:center;text-align:center;gap:18px;
  padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px);
  border-radius:var(--r-4);
  background:
    radial-gradient(120% 140% at 15% -10%,rgba(255,255,255,.08),transparent 55%),
    radial-gradient(120% 140% at 100% 110%,rgba(255,255,255,.06),transparent 55%),
    linear-gradient(160deg,#0c0c0c,#1c1c1c 55%,#0c0c0c);
  color:#f4f2ec
}
/* A slow diagonal sheen drifting through the band — the one piece of ambient
   motion on the page that never demands attention, only rewards noticing. */
.mmb-hero-inner::before{
  content:'';position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%);
  animation:mmb-sheen 9s linear infinite
}
@keyframes mmb-sheen{to{transform:translateX(28%)}}
.mmb-hero-logo{width:min(220px,46vw);height:auto;position:relative;z-index:1}
.mmb-hero-kicker{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#cfc7bd
}
.mmb-hero-kicker::before,.mmb-hero-kicker::after{content:'';width:22px;height:1px;background:currentColor;opacity:.6}
.mmb-hero-title{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,4.4vw,54px);line-height:1.15;letter-spacing:-.01em;
  max-width:18ch;color:#fff
}
.mmb-hero-lede{
  position:relative;z-index:1;
  font-size:13.5px;line-height:1.9;color:#d8d3c9;max-width:52ch
}
.mmb-hero-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.mmb-hero-foot{
  position:relative;z-index:1;
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
  margin-top:8px;font-size:11px;color:#bcb4a8
}
.mmb-hero-foot span{display:flex;align-items:center;gap:7px}
.mmb-hero-foot .i{width:15px;height:15px}
@media(max-width:760px){
  .mmb-hero{margin-top:12px}
  .mmb-hero-inner{padding:40px 22px;gap:14px;border-radius:var(--r-3)}
  .mmb-hero-title{font-size:clamp(26px,7.5vw,36px)}
  .mmb-hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .mmb-hero-actions .btn{width:100%}
  .mmb-hero-foot{gap:12px 20px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.mmb-hero-inner::before{animation:none}}

/* -------------------------------------------------------------- buttons */
.btn-on-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.btn-on-dark:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-wa,a.btn-wa{background:var(--wa-green);color:#fff;border-color:transparent}
.btn-wa:hover,a.btn-wa:hover{background:var(--wa-green-deep);color:#fff}

/* ------------------------------------------------------------- benefits */
.fx-benefits .i{color:var(--ink-2)}

/* ------------------------------------------------------------ categories */
.fx-category-visual{background:var(--porcelain)}
.fx-category:hover .fx-category-visual{background:var(--sz-line-soft)}
.fx-category-visual>.i{color:var(--ink);width:46px;height:46px}
.fx-category:hover .fx-category-visual>.i{transform:scale(1.08)}
.fx-category-visual>.i{transition:transform .5s var(--e-out)}

/* ------------------------------------------------------------------ cards */
.card{transition:transform .35s var(--e-out),border-color .35s var(--e-out),box-shadow .35s var(--e-out)}
.card:hover,.catalog-page .card:hover{border-color:var(--ink);box-shadow:var(--shadow-card,0 10px 30px rgba(0,0,0,.08))}
.card-price strong{color:var(--ink)}
.card-cta,.catalog-page .card-cta{background:var(--wa-green);color:#fff}
.card-cta:hover,.catalog-page .card-cta:hover{background:var(--wa-green-deep);color:#fff}
.card-cta .i{color:#fff}
.badge-sale{color:var(--orange);background:#f3e6ea}
.badge-new{color:var(--ink);background:var(--sz-line-soft)}
.fx-save[aria-pressed=true]{color:var(--orange);background:#f3e6ea}
.fx-save[aria-pressed=true] svg{fill:var(--orange)}
.fx-save:hover{background:var(--sz-line-soft);color:var(--ink)}

/* --------------------------------------------------------- assistance/faq */
.fx-assistance .fx-orange{color:#e7c9a8}

/* ---------------------------------------------------------------- footer */
.foot{background:#0d0d0d!important}
.fx-footer-top{border-color:#2a2a2a}
.fx-footer-top .fx-brand{background:#fff}
.fx-footer-top p{color:#b8b3a8}
.fx-footer-links a{color:#b8b3a8}
.fx-footer-links a:hover{color:#fff}
.fx-footer-note p{color:#b8b3a8}
.foot-base{border-color:#2a2a2a;color:#8a8578}

/* ---------------------------------------------------------------- detail */
.detail-price>b{color:var(--ink)}
.detail-house{color:var(--sz-muted)}
.fx-compat{background:var(--porcelain);color:var(--ink-2)}
.fx-compat a{color:var(--ink)}
#whatsappCta,#buybarWa{background:var(--wa-green);border-color:transparent}
#whatsappCta:hover,#buybarWa:hover{background:var(--wa-green-deep)}

/* ------------------------------------------------------------------ info */
.fx-info-aside{background:var(--porcelain)}

/* Header gains a hairline shadow once the page has scrolled past the news
   bar — the same "settled" cue a lot of editorial sites use so the sticky
   bar reads as present without being loud about it from the first pixel. */
.hdr{transition:box-shadow .25s linear}
.hdr[data-scrolled=true]{box-shadow:0 1px 0 var(--sz-line),0 12px 24px -18px rgba(0,0,0,.18)}

/* The floating WhatsApp button gained a text label to read as the site's
   main call to action rather than a generic chat bubble. On a phone it stays
   the plain circle — screen width is too tight for a label to earn its
   keep there, and the sticky detail buybar already carries a labelled
   WhatsApp button at that size. */
.wa-float{width:auto;height:54px;padding:0 22px 0 17px;border-radius:999px;gap:10px}
.wa-float-label{font:800 12px var(--font);white-space:nowrap}
@media(max-width:760px){
  .wa-float{width:48px;height:48px;padding:0;border-radius:50%}
  .wa-float-label{display:none}
}