/* =========================================================
   PMUK layout/grid/form fix - 2026-06-07
   Final overrides for catalogue grids and enquiry forms.
   ========================================================= */

:root{
  --pmuk-fix-orange:#ff8216;
  --pmuk-fix-black:#050505;
  --pmuk-fix-panel:#101010;
  --pmuk-fix-line:rgba(255,130,22,.48);
  --pmuk-fix-text:#f8fafc;
}

*,*::before,*::after{box-sizing:border-box;}

/* Bootstrap 3 clearfix pseudo elements become visible grid/flex cells when rows are converted.
   Force them off anywhere we use modern layout. */
html body #product-grid.row::before,
html body #product-grid.row::after,
html body form#contactForm .row::before,
html body form#contactForm .row::after,
html body .video-grid::before,
html body .video-grid::after,
html body .video-grid1::before,
html body .video-grid1::after{
  content:none!important;
  display:none!important;
}

/* Catalogue/product grids: left aligned, full-width container, no blank grid cells. */
html body #range{
  background:#050505!important;
  overflow:hidden!important;
}
html body #range > .container,
html body.pmuk-catalog-page #range > .container{
  width:calc(100% - 48px)!important;
  max-width:1500px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
html body #product-grid,
html body #product-grid.row,
html body.pmuk-catalog-page #product-grid,
html body.pmuk-catalog-page #product-grid.row{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:30px 28px!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
html body #product-grid > br,
html body #product-grid > strong:empty,
html body #product-grid > script,
html body #product-grid > style{
  display:none!important;
}
html body #product-grid > .pmuk-grid-cell,
html body #product-grid > [class*="col-"],
html body.pmuk-catalog-page #product-grid > .pmuk-grid-cell,
html body.pmuk-catalog-page #product-grid > [class*="col-"]{
  display:flex!important;
  flex:0 0 calc((100% - 84px) / 4)!important;
  width:calc((100% - 84px) / 4)!important;
  max-width:calc((100% - 84px) / 4)!important;
  min-width:0!important;
  float:none!important;
  clear:none!important;
  padding:0!important;
  margin:0!important;
}
html body #product-grid > [hidden],
html body #product-grid > .hidden,
html body #product-grid > .d-none,
html body #product-grid > [style*="display: none"],
html body #product-grid > [style*="display:none"]{
  display:none!important;
}
html body #product-grid .product-card,
html body.pmuk-catalog-page #product-grid .product-card{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
}
html body #product-grid .product-image,
html body #product-grid .ratio{
  width:100%!important;
}
html body #product-grid .product-image img,
html body #product-grid .ratio img{
  object-fit:contain!important;
  object-position:center center!important;
}

/* Browse buttons stay readable after the final overrides. */
html body #filters-bar,
html body #filters-bar .container5{
  background:#050505!important;
  color:#fff!important;
}
html body #product-filters,
html body #product-filters .btn-group{
  justify-content:flex-start!important;
  text-align:left!important;
}
html body #product-filters .btn,
html body #product-filters button,
html body #filters-bar .btn{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:rgba(255,255,255,.38)!important;
  background:#111!important;
  opacity:1!important;
  text-shadow:none!important;
}
html body #product-filters .btn.active,
html body #product-filters button.active,
html body #product-filters .btn[aria-pressed="true"],
html body #product-filters button[aria-pressed="true"],
html body #filters-bar .btn.active{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  background:#ff8216!important;
  border-color:#ff8216!important;
}

/* Industry image grids: left aligned with real cells only. */
html body.pmuk-industry-page .video-grid,
html body.pmuk-industry-page .video-grid1,
html body .video-grid,
html body .video-grid1{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  gap:28px!important;
  width:calc(100% - 48px)!important;
  max-width:1500px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
html body .video-grid > *,
html body .video-grid1 > *{
  flex:0 0 calc((100% - 84px) / 4)!important;
  width:calc((100% - 84px) / 4)!important;
  max-width:calc((100% - 84px) / 4)!important;
  min-width:0!important;
  float:none!important;
  margin:0!important;
}

/* Enquiry / submission forms: centered panel, centered fields, no Bootstrap clearfix cells. */
html body form#contactForm,
html body .comments_form_section form#contactForm,
html body.pmuk-product-page form#contactForm{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:56px 24px!important;
  clear:both!important;
  float:none!important;
  background:#050505!important;
  color:#111!important;
  text-align:left!important;
}
html body form#contactForm .blog_section,
html body .comments_form_section form#contactForm .blog_section,
html body.pmuk-product-page form#contactForm .blog_section{
  display:block!important;
  width:100%!important;
  max-width:1220px!important;
  margin:0 auto!important;
  padding:34px!important;
  float:none!important;
  clear:both!important;
  background:#fff!important;
  border:1px solid rgba(255,130,22,.45)!important;
  border-radius:24px!important;
  box-shadow:0 24px 64px rgba(0,0,0,.46)!important;
  color:#111!important;
  text-align:left!important;
}
html body form#contactForm .blog_section > .container,
html body form#contactForm .blog_section .container,
html body.pmuk-product-page form#contactForm .blog_section > .container,
html body.pmuk-product-page form#contactForm .blog_section .container{
  width:100%!important;
  max-width:1140px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
html body form#contactForm .blog_section > .container > .row,
html body form#contactForm .comments_form > .row{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
html body form#contactForm .blog_section > .container > .row > [class*="col-"],
html body form#contactForm .comments_form{
  width:100%!important;
  max-width:100%!important;
  flex:0 0 100%!important;
  float:none!important;
  clear:none!important;
  margin:0!important;
  padding:0!important;
}
html body form#contactForm .comments_form{
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html body form#contactForm .comments_form h4{
  display:block!important;
  margin:0 0 28px!important;
  text-align:center!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  font-size:28px!important;
  line-height:1.15!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
}
html body form#contactForm .comments_form h4::after{
  content:""!important;
  display:block!important;
  width:58px!important;
  height:4px!important;
  margin:14px auto 0!important;
  border-radius:99px!important;
  background:#ff8216!important;
  border:0!important;
}
html body form#contactForm .comments_form > .row{
  gap:0!important;
  margin-left:-10px!important;
  margin-right:-10px!important;
}
html body form#contactForm .comments_form > .row > [class*="col-"],
html body form#contactForm .comments_form > .row > .col-md-6,
html body form#contactForm .comments_form > .row > .col-md-12{
  float:none!important;
  clear:none!important;
  min-height:1px!important;
  padding-left:10px!important;
  padding-right:10px!important;
  margin:0 0 20px!important;
}
html body form#contactForm .comments_form > .row > .col-md-6{
  flex:0 0 50%!important;
  width:50%!important;
  max-width:50%!important;
}
html body form#contactForm .comments_form > .row > .col-md-12{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
}
html body form#contactForm .formsix-pos,
html body form#contactForm .formsix-c,
html body form#contactForm .formsix-p,
html body form#contactForm .formsix-e,
html body form#contactForm .formsix-m,
html body form#contactForm .form-group{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  clear:none!important;
  position:relative!important;
}
html body form#contactForm input.form-control,
html body form#contactForm textarea.form-control,
html body form#contactForm select.form-control,
html body form#contactForm input,
html body form#contactForm textarea,
html body form#contactForm select{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  padding:14px 52px 14px 16px!important;
  border:2px solid #ff8216!important;
  border-radius:13px!important;
  background:#050505!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:700!important;
  opacity:1!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html body form#contactForm textarea.form-control,
html body form#contactForm textarea{
  min-height:180px!important;
  resize:vertical!important;
}
html body form#contactForm input::placeholder,
html body form#contactForm textarea::placeholder{
  color:#e6edf7!important;
  -webkit-text-fill-color:#e6edf7!important;
  opacity:1!important;
}
html body form#contactForm button[type="submit"],
html body form#contactForm .btn[type="submit"],
html body form#contactForm .btn.btn-primary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:54px!important;
  margin:2px auto 0!important;
  padding:14px 22px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#ff982f,#ff7212)!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  text-align:center!important;
  box-shadow:0 14px 32px rgba(255,130,22,.28)!important;
}

@media(max-width:1250px){
  html body #product-grid > .pmuk-grid-cell,
  html body #product-grid > [class*="col-"]{
    flex-basis:calc((100% - 56px) / 3)!important;
    width:calc((100% - 56px) / 3)!important;
    max-width:calc((100% - 56px) / 3)!important;
  }
  html body .video-grid > *,
  html body .video-grid1 > *{
    flex-basis:calc((100% - 56px) / 3)!important;
    width:calc((100% - 56px) / 3)!important;
    max-width:calc((100% - 56px) / 3)!important;
  }
}
@media(max-width:880px){
  html body #range > .container,
  html body.pmuk-catalog-page #range > .container,
  html body.pmuk-industry-page .video-grid,
  html body.pmuk-industry-page .video-grid1,
  html body .video-grid,
  html body .video-grid1{
    width:calc(100% - 32px)!important;
  }
  html body #product-grid > .pmuk-grid-cell,
  html body #product-grid > [class*="col-"],
  html body .video-grid > *,
  html body .video-grid1 > *{
    flex-basis:calc((100% - 28px) / 2)!important;
    width:calc((100% - 28px) / 2)!important;
    max-width:calc((100% - 28px) / 2)!important;
  }
  html body form#contactForm .comments_form > .row > .col-md-6{
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media(max-width:560px){
  html body #product-grid,
  html body #product-grid.row,
  html body .video-grid,
  html body .video-grid1{
    gap:20px!important;
  }
  html body #product-grid > .pmuk-grid-cell,
  html body #product-grid > [class*="col-"],
  html body .video-grid > *,
  html body .video-grid1 > *{
    flex-basis:100%!important;
    width:100%!important;
    max-width:100%!important;
  }
  html body form#contactForm{
    padding:42px 14px!important;
  }
  html body form#contactForm .blog_section{
    padding:24px 14px!important;
    border-radius:18px!important;
  }
}