/* chemstore.se look fixes on top of the jm-services template (2026-10-08). Linked from template style → codeInjection.
   Brand orange #f0a028 stays for bars, buttons and the logo; as text on white it was 2.2:1, so text uses #a85a00 (5.1:1). */

/* Text contrast: body/module text #898989 → #666, links #f0a028 → #a85a00, links in running text underlined */
body,.jm-module,#jm-footer,#jm-footer-mod,#jm-top-bar,.dropdown-menu>li>a,.pagination ul>li>a,.pagination ul>li>span{color:#666}
a,.btn-link,dl.tabs>dt a,.jm-module.title-ms .jm-title{color:#a85a00}
a:hover,a:focus{color:#7a4100}
.nav.menu>li>a:hover,.nav.menu>li>a:focus,.nav.menu>li.active>a,.nav.menu li ul li.active>a{color:#a85a00}
.jm-module-content p a,.item-page p a,#jm-copyrights a,#jm-poweredby a{text-decoration:underline}
/* Orange typed into articles/modules as inline colour ("hebro®" brand word, footer): darker, readable on white and the grey footer */
span[style*="#ff9900" i],span[style*="#ff6600" i],span[style*="#f0a028" i],font[color*="#ff" i]{color:#8f4b00!important}
figcaption a,figcaption{color:#8f4b00}
/* Orange buttons keep the brand colour, with dark text (was white on orange, 2.2:1) */
.btn-primary,.button.btn-primary,.btn-primary:hover,.btn-primary:focus,.newsflash .readmore,.pager li>a,.pager li>span,
.pagination ul>li>span.pagenav,.tagspopular.tagscloud .tag a{color:#1f1f1f}
.btn,a.button,input.button,button.button,input[type=submit]{color:#1f1f1f}
/* Grey footer (#e7e7e7) and the call-me-back fields (value used as placeholder, #b0b0b0) */
#jm-footer a,#jm-copyrights a,#jm-poweredby a{color:#8f4b00}
#mod_itf_form input[type=text]{color:#666}
/* Main menu text (desktop) */
.dj-megamenu-override li.dj-up a.dj-up_a,.dj-megamenu-override .dj-submenu>li>a{color:#a85a00}

/* Phone menu: DJ-MegaMenu accordion (module 114 select=3). Its button uses a Font Awesome icon, which is off; draw one. */
#jm-allpage .dj-megamenu-accordion .dj-mobile-open-btn{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;line-height:1;color:#1f1f1f}
.dj-megamenu-accordion .fa-bars,.dj-megamenu-accordion .fa-bars:before,.dj-megamenu-accordion .fa-bars:after{
  display:block;width:26px;height:3px;border-radius:2px;background:#f0a028;position:relative;content:''}
.dj-megamenu-accordion .fa-bars:before{position:absolute;top:-8px}
.dj-megamenu-accordion .fa-bars:after{position:absolute;top:8px}
.dj-accordion .dj-mobile-nav>li>a,.dj-accordion .dj-mobile-nav-child>li>a{color:#1f1f1f;font-weight:700}
.dj-accordion .dj-mobile-nav>li.active>a{color:#a85a00}

/* Produktguide hotspots (patched imagemapster plugin + /media/chemstore/produktguide.js) */
.cs-pg{margin:16px 0}
.cs-pg__map{position:relative;max-width:900px}
.cs-pg__map img{display:block;width:100%;height:auto}
.cs-pg__dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;padding:0;border:2px solid #fff;border-radius:50%;
  background:#e00;box-shadow:0 0 0 0 rgba(224,0,0,.6);cursor:pointer;animation:cs-pg-pulse 2s infinite}
.cs-pg__dot[aria-expanded=true]{background:#1f1f1f;animation:none}
.cs-pg__dot:focus-visible{outline:3px solid #1f1f1f;outline-offset:2px}
.cs-pg__dot:after{content:'';position:absolute;inset:-10px}
@keyframes cs-pg-pulse{70%{box-shadow:0 0 0 8px rgba(224,0,0,0)}100%{box-shadow:0 0 0 0 rgba(224,0,0,0)}}
@media (prefers-reduced-motion:reduce){.cs-pg__dot{animation:none}}
.cs-pg__card{max-width:900px;margin-top:12px;padding:14px 0;border-top:3px solid #f0a028;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start}
.cs-pg__card[hidden]{display:none}
.cs-pg__card img{grid-row:span 2;width:140px;height:auto}
.cs-pg__card h3{margin:0;font-size:18px;color:#1f1f1f}
.cs-pg__card ul{margin:0;padding:0 0 0 18px;color:#444}
@media (max-width:767px){.cs-pg__card{grid-template-columns:1fr}.cs-pg__card img{grid-row:auto;width:100%;max-width:300px}}

/* /filarkiv: "Säkerhetsdatablad skickas på begäran" (Phoca Download component description, 2026-10-08) */
.cs-sds{margin:0 0 20px;padding:12px 16px;border-left:3px solid #f0a028;background:#f7f7f7;color:#333}

@media (max-width:979px){
  /* Logo left, menu button right, one row; the accordion opens full width under it */
  #jm-allpage{padding-top:0}
  #jm-logo-nav>.container-fluid>.row-fluid:before,#jm-logo-nav>.container-fluid>.row-fluid:after{display:none}
  #jm-logo-nav>.container-fluid>.row-fluid{display:flex;flex-wrap:nowrap;margin:0;align-items:center;justify-content:space-between}
  #jm-logo-nav .span3{width:auto;flex:0 1 auto;margin:0}
  #jm-logo-nav #jm-top-menu-nav{width:auto;flex:0 0 auto;margin:0;padding:0}
  #jm-logo-sitedesc{margin:0;min-height:0;text-align:left}
  #jm-logo-sitedesc #jm-logo-sitedesc-in{position:static;padding:12px 0}
  #jm-top-menu-nav .jm-module-raw,#jm-top-menu-nav .dj-megamenu-wrapper,#dj-megamenu114mobile{height:auto;padding:0}
  #jm-logo img{max-height:44px;width:auto}
  #jm-allpage .dj-megamenu-accordion{padding:0;min-height:0}
  #jm-top-menu-nav,#jm-top-menu-nav .jm-module-raw,#jm-top-menu-nav .dj-megamenu-wrapper,#dj-megamenu114mobile{position:static}
  #dj-megamenu114mobile .dj-accordion{position:absolute;top:100%;left:0;right:0;z-index:500;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.12);text-align:left}
  #dj-megamenu114mobile .dj-accordion-in{margin:0;padding:0 15px}
  #dj-megamenu114mobile .dj-mobile-nav{margin:0}
  #dj-megamenu114mobile .dj-mobile-nav a{padding:14px 15px}
  #dj-megamenu114mobile .dj-mobile-nav-child a{padding-left:30px;font-weight:400;color:#333}
  #dj-megamenu114mobile .dj-mobile-nav-child .dj-mobile-nav-child a{padding-left:45px}
  #jm-logo-nav{position:relative}

  /* Slider: the 1170x316 images were 80px tall with the caption squeezed into 66px; give it height, caption as a strip */
  #djslider109,#djslider109 .djslider-in>li,#slider-container109{height:220px!important}
  #djslider-loader109{padding-bottom:0!important}
  /* the banners leave their left 22% blank for the desktop caption box: crop it away */
  #djslider109 .djslider-in>li{overflow:hidden}
  #djslider109 .dj-image{width:131%!important;position:relative;left:-31%;height:220px!important;object-fit:cover;max-width:none}
  #djslider109 .slide-desc{width:auto!important;left:0!important;right:0;top:auto!important;bottom:0!important;height:auto!important}
  #djslider109 .slide-desc-in,#djslider109 .slide-desc-bg{height:auto!important}
  #djslider109 .slide-text{display:none}
  #djslider109 .slide-title{font-size:18px;padding:8px 14px;margin:0}
  #djslider109 .slide-desc-bg{display:none}
  #djslider109 .slide-desc-text{padding:0;background:rgba(47,47,47,.8)}
  #jm-header .jm-module{padding:0;margin:0 0 20px}
}

@media (max-width:767px){

  /* Less air between blocks */
  #jm-main .jm-module,#jm-content,#jm-left,#jm-right{margin-bottom:20px}
  .jm-module{padding-top:10px;padding-bottom:10px}
  .jm-title,.page-header h2,.item-page h2{margin-bottom:12px}

  /* Product articles: images full width instead of a 200px float beside a 100px text column; wide tables scroll */
  #jm-maincontent img[style*="float"]{float:none!important;display:block;margin:0 0 12px!important;max-width:100%;height:auto}
  #jm-maincontent table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;font-size:14px}

  /* File archive: Flyers and MSDS columns overlapped; stack them */
  #phoca-dl-categories-box div.pd-categoriesbox{float:none;width:auto;margin:0 0 18px;padding:0}
  #phoca-dl-categories-box .pd-subcategory a{display:inline-block;padding:6px 0}
}