/*
 * Himikali.com — site-wide look, 5 Nov 2026 (Stefan: whole site in the new homepage style).
 * Loaded LAST in both layouts (app.twig, app-b2b.twig), so it wins over style.css / homepage-b2b.css.
 * Fonts: Manrope (headings) + Inter (text). Colours: ink #0B1F33, navy #0F3D56 / #1A5575, red #D32F2F for actions,
 * light #F4F6F9 backgrounds, lines #E3E8EF. Rounded containers (16px cards, 12px buttons, 10px inputs).
 * Rollback = remove the theme-2026.css <link> from the two layouts.
 */
:root{--hx-ink:#0B1F33;--hx-navy:#0F3D56;--hx-navy2:#1A5575;--hx-red:#D32F2F;--hx-red-d:#B71C1C;--hx-sky:#E8F6FD;--hx-bg:#F4F6F9;--hx-line:#E3E8EF;--hx-muted:#5B6B7C;--hx-r:16px;--hx-wrap:1550px}

/* ---------- typography (icons keep Font Awesome) ---------- */
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--hx-ink);-webkit-font-smoothing:antialiased}
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*=" fa-"]){font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body h1:not(.fas):not(.far):not(.fab):not([class*=" fa-"]),body h2:not(.fas):not(.far):not(.fab):not([class*=" fa-"]),
body h3:not(.fas):not(.far):not(.fab):not([class*=" fa-"]),body h4:not(.fas):not(.far):not(.fab):not([class*=" fa-"]),
body .title:not(.fas):not(.far):not(.fab):not([class*=" fa-"]),body .all-title:not(.fas):not(.far):not(.fab):not([class*=" fa-"]){font-family:Manrope,Inter,sans-serif;letter-spacing:-.01em}
h1,h2,h3,h4,h5{color:var(--hx-ink)}
a{color:var(--hx-navy2)}a:hover{color:var(--hx-red)}

/* ---------- buttons & forms ---------- */
.btn,button.btn,a.btn,input[type=submit],.add-to-cart,.add-cart,.btn-primary,.btn-default,.submit-btn,.send-btn,.checkout-btn,.mini-cart-btns a{border-radius:12px !important}
.btn-primary,input[type=submit]{background:var(--hx-red);border-color:var(--hx-red)}
.btn-primary:hover,input[type=submit]:hover{background:var(--hx-red-d);border-color:var(--hx-red-d)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],select,textarea,.form-control{border-radius:10px !important;border-color:var(--hx-line)}
input:focus,select:focus,textarea:focus,.form-control:focus{border-color:var(--hx-navy2) !important;box-shadow:0 0 0 3px rgba(26,85,117,.12) !important;outline:0}

/* ---------- containers / cards ---------- */
.product,.product-holder,.products .product,.sidebar,.sidebar-holder,.categories-holder,.panel,.well,.thumbnail,.modal-content,
.cart-table,.your-order-table-holder,.way-of-order,.checkout .col-md-4>div,.contacts-holder,.contact-form,.blog-post,.post-holder,
.availability-table-holder,.product-info,.mini-cart,.mini-profile{border-radius:var(--hx-r) !important}
.product,.products .product{border:1px solid var(--hx-line);background:#fff;overflow:hidden;transition:box-shadow .18s,transform .18s}
.product:hover{box-shadow:0 18px 34px -20px rgba(11,31,51,.4);transform:translateY(-2px)}
.product img{border-radius:0}
.mini-profile{border:1px solid var(--hx-line);box-shadow:0 24px 40px -18px rgba(11,31,51,.35) !important}
.mini-cart{border:0 !important;box-shadow:none !important}
.mini-cart.h-646{border:1px solid var(--hx-line) !important;box-shadow:0 24px 40px -18px rgba(11,31,51,.35) !important}
.mini-cart-separator{display:none}
.mini-cart-btns a{background:var(--hx-red) !important;color:#fff !important}
/* colour swatches on product cards stay exactly as they are (small squares) */
.color-swatch,.color-swatch-more{border-radius:3px !important}

/* old cyan accents -> calm navy / sky */
.b2b-section-alt,.b2b-promo{background:var(--hx-bg) !important}
.breadcrumb a,.breadcrumbs a{color:var(--hx-navy2)}

/* ---------- header (partials/menu-b2b.twig) ---------- */
.hx{display:contents}   /* the wrapper holds only the header — let .hx-main stick to the page */
.hx .hx-wrap{max-width:var(--hx-wrap);margin:0 auto;padding:0 20px}
.hx-top{background:var(--hx-ink);color:#C9D6E2;font-size:13.5px}
.hx-top .hx-wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.hx-usp{display:flex;gap:22px;overflow:hidden;white-space:nowrap}
.hx-usp span:before{content:"✓ ";color:#7BD389}
.hx-ann{color:#fff;font-weight:600}.hx-ann i{color:#F5A623;margin-right:6px}
.hx-top-c{display:flex;gap:18px;white-space:nowrap}
.hx-top a{color:#C9D6E2;text-decoration:none}.hx-top a:hover{color:#fff}
.hx-top i{margin-right:4px;opacity:.8}
.hx-main{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--hx-line)}
.hx-row{display:flex;align-items:center;gap:22px;height:78px}
.hx-burger{display:none;color:var(--hx-ink);font-size:22px}
.hx-logo img{height:40px;width:auto;display:block}
.hx-partner{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-left:16px;border-left:1px solid var(--hx-line)}
.hx-partner span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hx-muted)}
.hx-partner img{height:30px;width:auto;display:block}
.hx-search{flex:1;display:flex;max-width:600px;height:50px;border:2px solid var(--hx-ink);border-radius:12px;overflow:hidden;margin:0}
.hx-search input{flex:1;border:0 !important;border-radius:0 !important;padding:0 16px;font-size:15.5px;outline:0;min-width:0;box-shadow:none !important;height:auto}
.hx-search button{border:0;background:var(--hx-ink);color:#fff;padding:0 20px;cursor:pointer}
.hx-searchwrap{flex:1;max-width:600px;position:relative}
.hx-searchwrap .hx-search{max-width:none;width:100%}
.hx-sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:950;background:#fff;border:1px solid var(--hx-line);border-radius:14px;box-shadow:0 24px 50px -18px rgba(11,31,51,.4);max-height:min(70vh,560px);overflow-y:auto;padding:8px}
.hx-sg-h{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hx-muted);padding:10px 10px 6px}
.hx-sg-cats{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px 4px}
.hx-sg-cat{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hx-line);border-radius:999px;padding:4px 12px 4px 4px;font-size:13.5px;font-weight:600;color:var(--hx-ink) !important;text-decoration:none !important}
.hx-sg-cat i{width:28px;height:28px;border-radius:50%;background:var(--hx-bg) center/cover no-repeat}
.hx-sg-cat:hover,.hx-sg-cat.on{border-color:var(--hx-navy2);background:var(--hx-bg)}
.hx-sg-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;color:var(--hx-ink) !important;text-decoration:none !important}
.hx-sg-item:hover,.hx-sg-item.on{background:var(--hx-bg)}
.hx-sg-img{flex:0 0 52px;height:52px;border-radius:10px;background:#fff;border:1px solid var(--hx-line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hx-sg-img img{max-width:44px;max-height:44px;object-fit:contain}
.hx-sg-t{flex:1;min-width:0;display:flex;flex-direction:column}
.hx-sg-t b{font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-sg-t small{font-size:12px;color:var(--hx-muted)}
.hx-sg-p{font-weight:800;font-size:14px;color:var(--hx-red);white-space:nowrap;font-family:Manrope,Inter,sans-serif}
.hx-sugg mark{background:#FFF1B8;color:inherit;padding:0 1px;border-radius:3px}
.hx-sg-all{display:flex;justify-content:space-between;align-items:center;margin:6px 4px 2px;padding:12px 12px;border-radius:10px;background:var(--hx-ink);color:#fff !important;font-weight:700;font-size:14px;text-decoration:none !important}
.hx-sg-all:hover,.hx-sg-all.on{background:var(--hx-navy)}
.hx-sg-empty{padding:16px;color:var(--hx-muted);font-size:14px}
.hx-quote{background:var(--hx-red);color:#fff !important;font-weight:700;font-size:15px;border-radius:12px;padding:12px 18px;white-space:nowrap;text-decoration:none !important}
.hx-quote:hover{background:var(--hx-red-d)}
.hx .hx-icons{display:flex;align-items:center;gap:6px;margin:0 0 0 auto;padding:0;list-style:none}
.hx .hx-icons .menu-icon-item{width:auto !important;height:auto;background:none !important;padding:0;margin:0;position:relative;display:block}
.hx .hx-icons .menu-icon-item>a.hx-ic{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px !important;color:var(--hx-muted) !important;font-size:12px;font-weight:600;text-decoration:none;border-radius:10px}
.hx .hx-icons .menu-icon-item>a.hx-ic i{font-size:19px;color:var(--hx-ink)}
.hx .hx-icons .menu-icon-item>a.hx-ic:hover,.hx .hx-icons .menu-icon-item.hovered>a.hx-ic{background:var(--hx-bg);color:var(--hx-ink) !important}
.hx .hx-icons .profile-click span{font-size:12px !important}
.hx #cart-count{top:-2px;right:2px;transform:none;width:auto;min-width:18px;height:18px;padding:0 5px;border:0;font-size:11px;line-height:18px;text-align:center;pointer-events:none}
.hx .cart-full{background:var(--hx-red);border:0;border-radius:999px}
.hx .mini-cart{top:62px;right:0;transform:none}
.hx .mini-profile{top:62px;right:0;left:auto}
.hx-nav{position:relative;background:#fff;border-bottom:1px solid var(--hx-line)}
.hx-navrow{display:flex;align-items:center;gap:4px;height:50px;overflow-x:auto;scrollbar-width:none}
.hx-navrow::-webkit-scrollbar{display:none}
.hx-navrow a{padding:8px 12px;border-radius:8px;font-weight:600;font-size:14.5px;white-space:nowrap;color:#2C3E50;text-decoration:none}
.hx-navrow a:hover{background:var(--hx-bg);color:var(--hx-ink)}
.hx-navrow a.hx-hot{color:var(--hx-red)}
.hx-allcats{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--hx-ink);color:#fff;font-weight:700;font-size:14.5px;border-radius:8px;padding:9px 14px;cursor:pointer;white-space:nowrap;margin-right:6px}
.hx-allcats .hx-chev{font-size:11px;transition:.2s}.hx-allcats[aria-expanded=true] .hx-chev{transform:rotate(180deg)}
.hx-mega{position:absolute;left:0;right:0;top:100%;z-index:899;background:#fff;border-bottom:1px solid var(--hx-line);box-shadow:0 24px 40px -20px rgba(11,31,51,.35);display:none}
.hx-mega.on{display:block}
.hx-megagrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 18px;padding-top:20px !important;padding-bottom:22px !important}
.hx-megagrid a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--hx-ink);text-decoration:none;line-height:1.25;min-width:0}
.hx-megagrid a:hover{background:var(--hx-bg);color:var(--hx-red)}
.hx-megagrid a i{flex:0 0 46px;height:34px;border-radius:8px;background:var(--hx-bg) center/cover no-repeat}
.hx-megagrid .hx-all{grid-column:1/-1;border-top:1px solid var(--hx-line);margin-top:8px;padding-top:14px;justify-content:space-between;color:var(--hx-navy2);font-weight:700}
.hx-morph-hidden{display:none}
.hx .hx-burger i{border:0 !important;padding:6px 4px !important;color:var(--hx-ink) !important;font-size:22px !important}
.hx .mobile-nav-holder{background:var(--hx-ink)}
@media (max-width:767px){.hx .mobile-nav-holder.w-60{width:86%}}
/* off-canvas mobile menu in the new look */
.hx .mobile-menu{width:auto;text-align:left}
.hx .mobile-nav-holder{overflow-y:auto;overflow-x:hidden;text-align:left;box-shadow:-20px 0 40px rgba(11,31,51,.35)}
.hx .mobile-nav-holder #menu-close{display:flex;justify-content:flex-end;padding:14px 16px 6px}
.hx .mobile-nav-holder #menu-close i{margin:0 !important;border:0 !important;padding:6px !important;font-size:22px !important;color:#fff !important}
.hx .mobile-nav{margin:0;padding:0 0 70px !important;min-width:0}
.hx .mobile-nav .mobile-nav-item{text-align:left;padding:0;border-bottom:1px solid rgba(255,255,255,.1)}
.hx .mobile-nav .mobile-nav-item>a,.hx .mobile-nav .mobile-nav-link-row>a{display:block;padding:14px 22px;color:#fff !important;text-transform:none !important;font-size:17px !important;font-weight:600 !important;white-space:normal;text-decoration:none}
.hx .mobile-nav .mobile-nav-link-row{display:flex;align-items:center;justify-content:space-between}
.hx .mobile-nav .mobile-dropdown-toggle{padding:14px 22px;color:#fff;cursor:pointer}
.hx .mobile-nav .mobile-sub-nav{padding:0 0 8px;margin:0;background:rgba(255,255,255,.04)}
.hx .mobile-nav .mobile-sub-nav li a{display:block;padding:10px 22px 10px 34px;color:#C9D6E2 !important;font-size:15px;text-transform:none;text-decoration:none}
.hx .mobile-nav .header-partner-mobile{padding:20px 22px;text-align:left}

/* sidebar price filter buttons */
.filter-price-btn-holder a{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px !important;font-weight:700;text-transform:none !important}
.filter-price-btn-holder .clear-filters{background:#fff !important;color:var(--hx-ink) !important;border:1.5px solid var(--hx-line) !important}
#filter-price{background:var(--hx-red) !important;color:#fff !important;border:0 !important}

/* header: the old .menu list had its own bottom line */
.hx .hx-icons,.hx .hx-icons:after{border:0 !important;box-shadow:none !important}

/* prices & filters */
.product .price{color:var(--hx-red) !important;font-family:Manrope,Inter,sans-serif !important;font-weight:800}
.filter-price-btn-holder a,#filter-price,.clear-filters,.sidebar input[type=submit],.sidebar button[type=submit],.filter button,.filters button,.filter-btns a,.filter-btns button,.price-filter button,.sidebar button,.sidebar .btn{border-radius:10px !important}

/* product page: Inter is wider than the old condensed font — keep the availability table readable */
.availability-table-holder table{font-size:13.5px}
.availability-table-holder th{font-size:12.5px !important;line-height:1.25 !important;padding:9px 6px !important;vertical-align:middle !important;letter-spacing:0 !important;background:var(--hx-navy) !important}
.availability-table-holder td{padding:8px 6px !important}
.availability-table-holder{overflow:hidden}

/* 5 Nov 2026 (Stefan): ~25% wider on desktop */
@media (min-width:1300px){
  .container{width:auto;max-width:1460px}
  .container-menu{max-width:1460px}
}

/* ---------- footer ---------- */
/* the homepage footer (partials/footer-b2b.twig) is now on every page: its rules from homepage-b2b.css without the #home-b2b scope */
.b2b-footer{width: 100% !important;
    float: none !important;
    clear: both !important;}
.b2b-footer .fa-phone{transform: none !important;}
footer.b2b-footer{background: #0F3D56 !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 60px 0 0 !important;}
footer.b2b-footer .footer-grid{display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;}
footer.b2b-footer .footer-brand h3{font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 15px;
    text-transform: none;
    border: none;
    padding: 0;}
footer.b2b-footer .footer-brand p{font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8) !important;}
footer.b2b-footer .footer-socials{display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;}
footer.b2b-footer .footer-socials li{display: inline-block;
    padding: 0;}
footer.b2b-footer .footer-socials li a{width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: var(--b2b-transition);
    text-decoration: none !important;
    padding: 0;
    border: none !important;}
footer.b2b-footer .footer-socials li a i{color: #ffffff !important;
    border: none !important;
    width: auto;
    height: auto;
    padding: 0;
    font-size: 16px;
    transform: none !important;
    background: none !important;}
footer.b2b-footer .footer-socials li a:hover{background: var(--b2b-accent) !important;
    transform: translateY(-3px);}
footer.b2b-footer .footer-socials li a:hover i{transform: none !important;
    background: none !important;
    color: #ffffff !important;}
footer.b2b-footer h5{font-family: 'Montserrat', sans-serif;
    font-size: 16px !important;
    font-weight: 600;
    color: #ffffff !important;
    margin-bottom: 20px;
    text-transform: none;
    border: none !important;
    padding: 0;}
footer.b2b-footer ul{list-style: none;
    padding: 0;
    margin: 0;}
footer.b2b-footer ul li{margin-bottom: 10px;}
footer.b2b-footer ul li a{color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: var(--b2b-transition);}
footer.b2b-footer ul li a:hover{color: #ffffff !important;
    padding-left: 5px;
    text-decoration: none !important;}
footer.b2b-footer .footer-contact-item{display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.8) !important;}
footer.b2b-footer .footer-contact-item i{color: var(--b2b-gold) !important;
    font-size: 16px;
    width: 20px;
    text-align: center;
    transform: none !important;}
footer.b2b-footer .footer-contact-item a{color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    transition: var(--b2b-transition);
    font-size: 14px;}
footer.b2b-footer .footer-contact-item a:hover{color: #ffffff !important;}
footer.b2b-footer .footer-bottom{border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.5) !important;
    margin-bottom: 0;}
footer.b2b-footer .footer-bottom a{color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;}
footer.b2b-footer .footer-bottom a:hover{color: #ffffff !important;}
@media (max-width: 991px){
footer.b2b-footer .footer-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 767px){
footer.b2b-footer .footer-grid{grid-template-columns: 1fr; gap: 30px;}
}

.b2b-footer,.footer,footer.footer-b2b,.footer-holder{background:var(--hx-ink) !important}
.b2b-footer .footer-grid{max-width:var(--hx-wrap);margin-left:auto;margin-right:auto}
.b2b-footer h4,.b2b-footer h5{color:#fff}
.b2b-footer,.b2b-footer p,.b2b-footer li,.b2b-footer span{color:#C9D6E2}
.b2b-footer a{color:#C9D6E2}.b2b-footer a:hover{color:#fff}
.b2b-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.12)}

@media (max-width:991px){
  .hx-usp span:nth-child(n+2){display:none}.hx-top-c a:nth-child(2){display:none}
  .hx .hx-row{padding-top:16px;padding-bottom:12px}
  .hx .mini-cart.h-646{height:auto;max-height:75vh;overflow-y:auto}
  .hx-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"burger logo icons" "search search search";align-items:center;height:auto;padding-top:14px;padding-bottom:12px;gap:12px 10px}
  .hx-burger{display:block;grid-area:burger}
  .hx-logo{grid-area:logo;justify-self:start}.hx-logo img{height:34px}
  .hx .hx-icons{grid-area:icons;margin:0}
  .hx-searchwrap{grid-area:search;max-width:none}
  .hx-sugg{max-height:62vh}
  .hx .hx-icons .menu-icon-item>a.hx-ic{padding:6px !important}
  .hx .hx-icons .menu-icon-item>a.hx-ic span{display:none}
  .hx .hx-icons .menu-icon-item>a.hx-ic i{font-size:21px}
  .hx-partner,.hx-quote{display:none}
  .hx-search{height:46px}
  .hx .hx-icons{gap:2px}
  .hx-megagrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;max-height:70vh;overflow-y:auto}
  .hx-megagrid a{font-size:13.5px;padding:7px 6px}.hx-megagrid a i{flex-basis:38px;height:28px}
  .hx .mini-cart{position:fixed;top:120px;right:8px;left:8px;width:auto}
}