/*
 * FYI Rollee Industrial Products Template
 * Version: 1.0.7
 * Build date: 2026-07-11
 */

:root {
  --rollee-orange: #d66a00;
  --rollee-orange-dark: #a84f00;
  --rollee-charcoal: #202020;
  --rollee-muted: #6b6b6b;
  --rollee-line: #d9d9d9;
  --rollee-band: #f1f1f1;
  --rollee-yellow: #d4b524;
  --rollee-page-width: 1024px;
  --cassiopeia-color-primary: var(--rollee-orange);
  --cassiopeia-color-link: var(--rollee-orange);
  --cassiopeia-color-hover: var(--rollee-orange-dark);
  --cassiopeia-font-family-body: Arial, Helvetica, sans-serif;
  --cassiopeia-font-family-headings: "Arial Narrow", Arial, Helvetica, sans-serif;
}

html { background: #fff; }
body.site {
  color: var(--rollee-charcoal);
  background: #fff;
  font-size: 14px;
  line-height: 1.55;
}

a, a:visited { color: var(--rollee-orange); }
a:hover, a:focus { color: var(--rollee-orange-dark); }

/* Header */
.container-header {
  position: relative;
  z-index: 20;
  padding: 0;
  background: #fff;
  background-image: none;
  border: 0;
  box-shadow: none;
}
.container-header > .grid-child:first-of-type {
  width: min(100% - 32px, var(--rollee-page-width));
  margin: 0 auto;
  padding: 14px 0 6px;
}
.container-header .navbar-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container-header .brand-logo {
  color: #111 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: -2px;
  text-decoration: none;
}
.container-header .brand-logo img {
  display: block;
  width: auto;
  max-width: 360px;
  max-height: 64px;
}
.container-header .site-description {
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.container-header .container-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100% - 32px, var(--rollee-page-width));
  margin: 0 auto;
  padding: 8px 0 12px;
}
.container-header .mod-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
}
.container-header .mod-menu > li { margin: 0; }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: block;
  padding: 10px 12px 8px;
  color: #222 !important;
  border-bottom: 3px solid transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  color: var(--rollee-orange) !important;
  border-bottom-color: var(--rollee-orange);
}
.container-header .navbar-toggler {
  color: var(--rollee-charcoal);
  border-color: var(--rollee-line);
}

/* Breadcrumb band */
.container-component > .mod-breadcrumbs,
.container-component > nav[aria-label="Breadcrumbs"] { margin-bottom: 0; }
.container-component .breadcrumb {
  margin: 0;
  padding: 17px 0;
  background: transparent;
  font-size: 12px;
}
.site-grid::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: 53px;
  background: var(--rollee-band);
  content: "";
}
.site-grid { position: relative; }

/* Layout */
.wrapper-static .site-grid,
.wrapper-fluid .site-grid {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
  width: min(100% - 32px, var(--rollee-page-width));
  max-width: var(--rollee-page-width);
  margin: 0 auto;
  gap: 30px;
}
.container-component { min-width: 0; }
.container-component main { padding-top: 14px; }
.container-sidebar-right { padding-top: 66px; }

/* Banner / slideshow */
.container-banner {
  width: min(100% - 32px, var(--rollee-page-width));
  margin: 15px auto 18px;
  overflow: hidden;
}
.container-banner > div,
.container-banner .moduletable,
.container-banner .mod-custom { margin: 0; padding: 0; }
.rollee-hero,
.fyi-fpss {
  position: relative;
  min-height: 225px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(211,181,35,.95), rgba(228,203,76,.86));
}
.rollee-hero img,
.fyi-fpss img {
  width: 100%;
  height: 225px;
  object-fit: cover;
  opacity: .38;
}
.rollee-hero::after,
.fyi-fpss::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(204,171,25,.72), rgba(228,204,76,.48));
  content: "";
}
.rollee-hero-content,
.fyi-fpss .slide-content {
  position: absolute;
  top: 20px;
  left: 38px;
  z-index: 2;
  max-width: 55%;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.45);
}
.rollee-hero h2,
.fyi-fpss h2 { margin: 0 0 8px; font-size: 33px; color: #fff; }

/* Content */
h1, h2, h3, h4, h5, h6 {
  color: #323232;
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 700;
}
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
.com-content-article h1,
.com-content-article h2,
.com-content-article h3 { letter-spacing: .02em; }
.btn-primary,
.btn-primary:visited {
  color: #fff;
  background: var(--rollee-orange);
  border-color: var(--rollee-orange);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--rollee-orange-dark);
  border-color: var(--rollee-orange-dark);
}

/* Sidebar product menu */
.container-sidebar-right .card,
.container-sidebar-left .card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.container-sidebar-right .card-header,
.container-sidebar-left .card-header,
.container-sidebar-right .card h3,
.container-sidebar-left .card h3 {
  margin: 0;
  padding: 0 0 7px;
  color: var(--rollee-orange);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--rollee-orange);
  font-size: 14px;
  font-weight: 400;
}
.container-sidebar-right .card-body,
.container-sidebar-left .card-body { padding: 10px 0 0; }
.container-sidebar-right .mod-menu,
.container-sidebar-left .mod-menu { margin: 0; padding: 0; }
.container-sidebar-right .mod-menu li,
.container-sidebar-left .mod-menu li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rollee-line);
}
.container-sidebar-right .mod-menu a,
.container-sidebar-left .mod-menu a {
  display: block;
  padding: 8px 2px;
  color: #222;
  font-size: 12px;
  text-decoration: none;
}
.container-sidebar-right .mod-menu a:hover,
.container-sidebar-left .mod-menu a:hover { color: var(--rollee-orange); }

/* VirtueMart catalogue */
.vm-category,
.category-view .row,
.browse-view .row { margin-bottom: 20px; }
.category-view .category,
.browse-view .product {
  padding: 14px;
  border: 1px solid #e2e2e2;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.category-view .category:hover,
.browse-view .product:hover { border-color: #c9c9c9; }
.category-view h2,
.browse-view h2,
.productdetails-view h1 { color: var(--rollee-charcoal); }
.category-view a,
.browse-view a,
.productdetails-view a { color: var(--rollee-orange); }
.vm-product-media-container img,
.productdetails-view img,
.browse-view img,
.category-view img { max-width: 100%; height: auto; }
.product-price,
.PricesalesPrice { color: var(--rollee-orange-dark); font-weight: 700; }
.addtocart-bar,
.vm-price-desc { display: none; }

/* Footer */
.container-footer {
  margin-top: 50px;
  padding: 26px 0;
  color: #ddd;
  background: #222;
  background-image: none;
  font-size: 12px;
}
.container-footer .grid-child { width: min(100% - 32px, var(--rollee-page-width)); }
.container-footer a { color: #fff; }

@media (max-width: 900px) {
  .wrapper-static .site-grid,
  .wrapper-fluid .site-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .container-sidebar-right,
  .container-sidebar-left { padding-top: 0; }
  .container-header .navbar-brand { flex-direction: column; align-items: center; gap: 5px; }
}

@media (max-width: 767px) {
  .container-header > .grid-child:first-of-type,
  .container-header .container-nav,
  .container-banner,
  .wrapper-static .site-grid,
  .wrapper-fluid .site-grid { width: min(100% - 24px, var(--rollee-page-width)); }
  .container-header .container-nav { justify-content: flex-end; }
  .container-header .mod-menu { display: block; width: 100%; }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span { padding: 10px 4px; }
  .rollee-hero,
  .fyi-fpss,
  .rollee-hero img,
  .fyi-fpss img { min-height: 190px; height: 190px; }
  .rollee-hero-content,
  .fyi-fpss .slide-content { top: 18px; left: 20px; max-width: 80%; }
  .rollee-hero h2,
  .fyi-fpss h2 { font-size: 27px; }
}


/*
 * FYI Rollee Template v1.0.5
 * Stable content/sidebar grid and FYI Layer Slider v1.3+ integration.
 *
 * The template owns page placement only. Slider canvas and layer presentation
 * are controlled by mod_fyi_layer_slider.
 */

/* Re-establish a deterministic Cassiopeia grid after a real article loads. */
body.site .site-grid {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px) !important;
  grid-template-areas:
    "banner banner"
    "top-a top-a"
    "top-b top-b"
    "component sidebar-right"
    "bottom-a bottom-a"
    "bottom-b bottom-b" !important;
  align-items: start;
  width: min(100% - 32px, var(--rollee-page-width));
  max-width: var(--rollee-page-width);
  margin-inline: auto;
  gap: 30px;
}

body.site .site-grid > .container-banner {
  grid-area: banner !important;
  grid-column: 1 / -1 !important;
  width: min(100vw - 32px, 1200px) !important;
  max-width: 1200px !important;
  min-width: 0;
  margin: 30px 50%;
  transform: translateX(-50%);
  overflow: visible;
}

body.site .site-grid > .container-top-a {
  grid-area: top-a !important;
}

body.site .site-grid > .container-top-b {
  grid-area: top-b !important;
}

body.site .site-grid > .container-component {
  grid-area: component !important;
  grid-column: 1 !important;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

body.site .site-grid > .container-sidebar-right {
  grid-area: sidebar-right !important;
  grid-column: 2 !important;
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  padding-top: 66px;
}

body.site .site-grid > .container-sidebar-left {
  display: none;
}

body.site .site-grid > .container-bottom-a {
  grid-area: bottom-a !important;
}

body.site .site-grid > .container-bottom-b {
  grid-area: bottom-b !important;
}

/* The slideshow module fills the banner region; it owns its internal ratio. */
.container-banner .fyi-layer-slider,
.container-banner .fyi-layer-slider__viewport {
  width: 100%;
  max-width: none;
  margin: 0;
}

.container-banner .fyi-layer-slider {
  overflow: hidden;
}

/* Keep imported article markup inside the content column. */
.container-component main,
.container-component .com-content-article,
.container-component .item-page {
  min-width: 0;
  max-width: 100%;
}

.container-component img,
.container-component table {
  max-width: 100%;
}

.container-component table {
  width: 100%;
}

/* Match the original homepage's compact article presentation. */
.view-article .com-content-article {
  font-size: 13px;
  line-height: 1.55;
}

.view-article .com-content-article h3 {
  margin-top: 0;
  font-size: 18px;
}

@media (max-width: 900px) {
  body.site .site-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "banner"
      "top-a"
      "top-b"
      "component"
      "sidebar-right"
      "bottom-a"
      "bottom-b" !important;
    gap: 22px;
  }

  body.site .site-grid > .container-component,
  body.site .site-grid > .container-sidebar-right {
    grid-column: 1 !important;
  }

  body.site .site-grid > .container-sidebar-right {
    padding-top: 0;
  }

  body.site .site-grid > .container-banner {
    width: min(100vw - 24px, 1200px) !important;
    margin-top: 18px;
    margin-bottom: 10px;
  }
}


/*
 * FYI Rollee Template v1.0.7
 * FYI Template Framework spacing controls and navigation refinements.
 */

/* Use separate row/column spacing so the banner cannot create a large void. */
body.site .site-grid {
  column-gap: 30px !important;
  row-gap: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, var(--fyi-sidebar-width, 240px)) !important;
}

body.site .site-grid > .container-banner {
  margin-top: 20px !important;
  margin-bottom: var(--fyi-space-below-hero, 18px) !important;
}

body.site .site-grid > .container-component {
  padding-top: var(--fyi-content-top-padding, 8px);
}

body.site .site-grid > .container-sidebar-right {
  margin-top: var(--fyi-sidebar-top-margin, 0px);
  padding-top: calc(var(--fyi-content-top-padding, 8px) + 50px);
}

.container-component > .mod-breadcrumbs,
.container-component > nav[aria-label="Breadcrumbs"] {
  margin-bottom: var(--fyi-breadcrumb-margin, 12px) !important;
}

.container-component .breadcrumb {
  padding-top: 0;
  padding-bottom: 8px;
}

/* Header menu: compact horizontal navigation matching the J3 site. */
.container-header .container-nav {
  min-height: 44px;
  padding: 4px 0 9px;
}

.container-header nav,
.container-header .navbar-collapse {
  width: 100%;
}

.container-header .mod-menu {
  align-items: center;
  justify-content: center;
  width: 100%;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  padding: 9px 10px 7px;
  color: #4a4a4a !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  color: var(--rollee-orange) !important;
}

/* Sidebar modules: compact, aligned and visually consistent with J3. */
.container-sidebar-right .card,
.container-sidebar-right .moduletable,
.container-sidebar-right .module {
  margin: 0 0 var(--fyi-module-vertical-spacing, 18px) !important;
  padding: 0 !important;
  background: transparent;
}

.container-sidebar-right .card-body {
  padding: 8px 0 0 !important;
}

.container-sidebar-right .card-header,
.container-sidebar-right .card h3,
.container-sidebar-right .moduletable > h3,
.container-sidebar-right .module-title {
  margin: 0 !important;
  padding: 0 0 6px !important;
  color: var(--rollee-orange) !important;
  border-bottom: 3px solid var(--rollee-orange) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25;
}

.container-sidebar-right .mod-menu {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.container-sidebar-right .mod-menu li {
  display: block;
  width: 100%;
  margin: 0 !important;
  border-bottom: 1px solid var(--rollee-line);
}

.container-sidebar-right .mod-menu li::marker {
  content: "";
}

.container-sidebar-right .mod-menu a,
.container-sidebar-right .mod-menu span {
  display: block;
  padding: 8px 2px !important;
  color: #222 !important;
  font-size: 12px !important;
  line-height: 1.35;
  text-decoration: none !important;
}

.container-sidebar-right .mod-menu a:hover,
.container-sidebar-right .mod-menu a:focus,
.container-sidebar-right .mod-menu .active > a {
  color: var(--rollee-orange) !important;
}

/* Keep search and VirtueMart modules compact instead of oversized cards. */
.container-sidebar-right input[type="search"],
.container-sidebar-right input[type="text"] {
  width: 100%;
  max-width: 100%;
  min-height: 36px;
  font-size: 13px;
}

.container-sidebar-right .vmgroup,
.container-sidebar-right .vmgroup ul,
.container-sidebar-right .vmgroup li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-sidebar-right .vmproduct {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-bottom: 12px;
}

.container-sidebar-right .vmproduct img {
  width: 70px;
  height: auto;
}

.container-sidebar-right .vmproduct a {
  font-size: 12px;
}

/* Suppress the floating back-to-top control while matching the source design. */
body.site .back-to-top-link {
  display: none !important;
}

@media (max-width: 900px) {
  body.site .site-grid > .container-sidebar-right {
    margin-top: 0;
    padding-top: 0;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    white-space: normal;
  }
}


/*
 * FYI Rollee Template v1.0.7
 * Legacy Joomla/site button compatibility.
 *
 * Many migrated J3 articles use:
 *   <a class="button" href="...">...</a>
 * This restores that common template convention without requiring article edits.
 */
a.button,
.button,
.btn-fyi,
input.button,
button.button {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 7px 12px;
  border: 0;
  border-radius: 2px;
  background: var(--rollee-orange, #d96a00);
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  text-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: none;
  transition: filter .15s ease, transform .15s ease;
}

a.button:hover,
a.button:focus,
.button:hover,
.button:focus,
.btn-fyi:hover,
.btn-fyi:focus,
input.button:hover,
input.button:focus,
button.button:hover,
button.button:focus {
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(.92);
}

a.button:active,
.button:active,
.btn-fyi:active,
input.button:active,
button.button:active {
  transform: translateY(1px);
}

/* Prevent surrounding article link styles from underlining migrated buttons. */
.com-content-article a.button,
.item-page a.button {
  color: #fff !important;
  text-decoration: none !important;
}

/* Keep buttons usable on narrow screens. */
@media (max-width: 575px) {
  a.button,
  .button,
  .btn-fyi,
  input.button,
  button.button {
    white-space: normal;
  }
}