.elementor-323 .elementor-element.elementor-element-2591a6d{--display:flex;--min-height:648px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:1;}.elementor-323 .elementor-element.elementor-element-2591a6d:not(.elementor-motion-effects-element-type-background), .elementor-323 .elementor-element.elementor-element-2591a6d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://roosgaragedoors.co.za/wp-content/uploads/2026/09/682dd11d-6d51-451c-bdb2-bb1d6a4e2579.png");background-position:center left;background-size:cover;}.elementor-323 .elementor-element.elementor-element-2591a6d::before, .elementor-323 .elementor-element.elementor-element-2591a6d > .elementor-background-video-container::before, .elementor-323 .elementor-element.elementor-element-2591a6d > .e-con-inner > .elementor-background-video-container::before, .elementor-323 .elementor-element.elementor-element-2591a6d > .elementor-background-slideshow::before, .elementor-323 .elementor-element.elementor-element-2591a6d > .e-con-inner > .elementor-background-slideshow::before, .elementor-323 .elementor-element.elementor-element-2591a6d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #121212 26%, #00000000 100%);}.elementor-323 .elementor-element.elementor-element-0e4d735{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-323 .elementor-element.elementor-element-dd0146a .elementor-heading-title{font-family:"Barlow", Sans-serif;font-size:60px;font-weight:700;color:#FFFFFF;}.elementor-323 .elementor-element.elementor-element-5ebf294{text-align:start;}.elementor-323 .elementor-element.elementor-element-5ebf294 .elementor-heading-title{font-family:var( --e-global-typography-branchname-font-family ), Sans-serif;font-size:var( --e-global-typography-branchname-font-size );font-weight:var( --e-global-typography-branchname-font-weight );text-transform:var( --e-global-typography-branchname-text-transform );line-height:var( --e-global-typography-branchname-line-height );letter-spacing:var( --e-global-typography-branchname-letter-spacing );color:var( --e-global-color-bd611f5 );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-323 .elementor-element.elementor-element-b0728ac{color:var( --e-global-color-6e12c58 );}.elementor-323 .elementor-element.elementor-element-4e68a77{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-323 .elementor-element.elementor-element-1a4f4ff9:not(.elementor-motion-effects-element-type-background), .elementor-323 .elementor-element.elementor-element-1a4f4ff9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-323 .elementor-element.elementor-element-1a4f4ff9 > .elementor-container{max-width:1180px;}.elementor-323 .elementor-element.elementor-element-1a4f4ff9{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:64px 0px 64px 0px;}.elementor-323 .elementor-element.elementor-element-1a4f4ff9 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-323 .elementor-element.elementor-element-4a4d7814:not(.elementor-motion-effects-element-type-background), .elementor-323 .elementor-element.elementor-element-4a4d7814 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6F4F0;}.elementor-323 .elementor-element.elementor-element-4a4d7814 > .elementor-container{max-width:1180px;}.elementor-323 .elementor-element.elementor-element-4a4d7814{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:56px 0px 56px 0px;}.elementor-323 .elementor-element.elementor-element-4a4d7814 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-323 .elementor-element.elementor-element-57a01211 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:30px;font-weight:800;letter-spacing:-0.7px;color:#17161A;}.elementor-323 .elementor-element.elementor-element-212e9e55{margin:12px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Barlow", Sans-serif;font-size:16px;line-height:1.6em;color:#4E4C53;}.elementor-323 .elementor-element.elementor-element-dc939ac{--display:flex;--min-height:648px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:1;}.elementor-323 .elementor-element.elementor-element-dc939ac:not(.elementor-motion-effects-element-type-background), .elementor-323 .elementor-element.elementor-element-dc939ac > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://roosgaragedoors.co.za/wp-content/uploads/2026/09/garage-door-operating-safely.jpg");background-position:center center;background-size:cover;}.elementor-323 .elementor-element.elementor-element-dc939ac::before, .elementor-323 .elementor-element.elementor-element-dc939ac > .elementor-background-video-container::before, .elementor-323 .elementor-element.elementor-element-dc939ac > .e-con-inner > .elementor-background-video-container::before, .elementor-323 .elementor-element.elementor-element-dc939ac > .elementor-background-slideshow::before, .elementor-323 .elementor-element.elementor-element-dc939ac > .e-con-inner > .elementor-background-slideshow::before, .elementor-323 .elementor-element.elementor-element-dc939ac > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #121212 26%, #00000000 100%);}.elementor-323 .elementor-element.elementor-element-7cb847f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-323 .elementor-element.elementor-element-335eb82 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:40px;font-weight:700;line-height:1.2em;letter-spacing:0px;color:#FFFFFF;}.elementor-323 .elementor-element.elementor-element-b53b05a{color:var( --e-global-color-6e12c58 );}.elementor-323 .elementor-element.elementor-element-4ec2e8b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-323 .elementor-element.elementor-element-e29f653 .elementor-button{background-color:#F7B500;font-family:"Archivo", Sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;fill:var( --e-global-color-d8248d2 );color:var( --e-global-color-d8248d2 );}.elementor-323 .elementor-element.elementor-element-e29f653 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-323 .elementor-element.elementor-element-2c8a543{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-323 .elementor-element.elementor-element-0e4d735{--width:50%;}.elementor-323 .elementor-element.elementor-element-4e68a77{--width:50%;}.elementor-323 .elementor-element.elementor-element-7cb847f{--width:50%;}.elementor-323 .elementor-element.elementor-element-2c8a543{--width:50%;}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-323 .elementor-element.elementor-element-5ebf294 .elementor-heading-title{font-size:var( --e-global-typography-branchname-font-size );line-height:var( --e-global-typography-branchname-line-height );letter-spacing:var( --e-global-typography-branchname-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-323 .elementor-element.elementor-element-335eb82 .elementor-heading-title{font-size:19px;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-323 .elementor-element.elementor-element-dd0146a{padding:57px 0px 0px 0px;}.elementor-323 .elementor-element.elementor-element-dd0146a .elementor-heading-title{font-size:35px;}.elementor-323 .elementor-element.elementor-element-5ebf294 .elementor-heading-title{font-size:var( --e-global-typography-branchname-font-size );line-height:var( --e-global-typography-branchname-line-height );letter-spacing:var( --e-global-typography-branchname-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-323 .elementor-element.elementor-element-1a4f4ff9{padding:44px 0px 44px 0px;}.elementor-323 .elementor-element.elementor-element-4a4d7814{padding:40px 0px 40px 0px;}.elementor-323 .elementor-element.elementor-element-335eb82{text-align:center;}.elementor-323 .elementor-element.elementor-element-335eb82 .elementor-heading-title{font-size:30px;}.elementor-323 .elementor-element.elementor-element-b53b05a{text-align:center;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-323 .elementor-element.elementor-element-e29f653{width:100%;max-width:100%;}.elementor-323 .elementor-element.elementor-element-e29f653.elementor-element{--align-self:center;}}/* Start custom CSS */.roos-parts-grid .roos-part-card, .roos-part-related .roos-part-card {
   
    border-radius: 0px !important;
}

/* =========================================================
   Roos spare parts
   1. Grid cards, rebuilt to match the reference
   2. Single part page, same language
   Selectors are doubled up so they beat the plugin defaults.
   ========================================================= */


/* =========================================================
   1. GRID CARDS
   Light image well filling the card, black caption bar at the
   bottom with a white title and a yellow arrow. No blurb.
   ========================================================= */

/* Category heading above each row */
.roos-parts-group{
  font-family:Archivo, sans-serif;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.5px;
  text-transform:uppercase;
  color:#17161A;
  margin:56px 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid #DBD6CC;
}
.roos-parts-group:first-child{ margin-top:0 }

/* The card */
.roos-parts-grid .roos-part-card,
.roos-part-related .roos-part-card{
  background:#0A0A0C;
  border:0;
  border-radius:6px;
  padding:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
}

/* Image well. Fills whatever height is left above the bar. */
.roos-parts-grid .roos-part-card-img,
.roos-part-related .roos-part-card-img{
  background:#F1EFEC;
  aspect-ratio:auto;
  flex:1 1 auto;
  min-height:190px;
  margin:0;
  display:block;
  position:relative;
  overflow:hidden;
}

.roos-parts-grid .roos-part-card-img img,
.roos-part-related .roos-part-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  padding:0;
  display:block;
  margin:0;
}

.roos-parts-grid .roos-part-card-noimg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Barlow, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#9A968F;
}

/* Caption bar. This is the black strip in the reference. */
.roos-parts-grid .roos-part-card-title,
.roos-part-related .roos-part-card-title{
  display:flex;
  align-items:center;
  min-height:56px;
  position:relative;
  padding:14px 48px 14px 18px;
  margin:0;
  background:#0A0A0C;
  font-family:Archivo, sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:#FFFFFF;
}

.roos-parts-grid .roos-part-card-title::after,
.roos-part-related .roos-part-card-title::after{
  content:"\2192";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  font-family:Archivo, sans-serif;
  font-size:19px;
  font-weight:400;
  line-height:1;
  color:#FFC72C;
  transition:transform .18s ease;
}

/* The reference has no blurb and no View part link. */
.roos-parts-grid .roos-part-card-blurb,
.roos-part-related .roos-part-card-blurb,
.roos-parts-grid .roos-part-card-more,
.roos-part-related .roos-part-card-more{
  display:none;
}

/* Hover: the arrow moves, the image lifts slightly. */
.roos-parts-grid .roos-part-card:hover .roos-part-card-title::after,
.roos-part-related .roos-part-card:hover .roos-part-card-title::after{
  transform:translate(4px,-50%);
}
.roos-parts-grid .roos-part-card:hover .roos-part-card-img img,
.roos-part-related .roos-part-card:hover .roos-part-card-img img{
  transform:scale(1.03);
}
.roos-parts-grid .roos-part-card-img img,
.roos-part-related .roos-part-card-img img{
  transition:transform .35s ease;
}
.roos-parts-grid .roos-part-card:focus-visible,
.roos-part-related .roos-part-card:focus-visible{
  outline:2px solid #FFC72C;
  outline-offset:3px;
}

/* Five across on the widest breakpoint, matching the reference. */
.roos-parts-grid{ grid-template-columns:repeat(4,1fr); gap:16px }
@media (max-width:1200px){ .roos-parts-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:1000px){ .roos-parts-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:760px){ .roos-parts-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:460px){ .roos-parts-grid{ grid-template-columns:1fr } }

@media (max-width:760px){
  .roos-parts-group{ font-size:24px; margin:44px 0 18px }
  .roos-parts-grid .roos-part-card-img{ min-height:150px }
  .roos-parts-grid .roos-part-card-title{ min-height:50px; font-size:13px; padding:12px 44px 12px 16px }
}


/* =========================================================
   2. SINGLE PART PAGE
   Same three colours. Black panels, white image well,
   yellow only on the keys and the arrow.
   ========================================================= */

/* Section headings */
.roos-part-h2,
h2.roos-part-h2{
  font-family:Archivo, sans-serif;
  font-size:21px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.3px;
  color:#17161A;
  margin:38px 0 14px;
}
.roos-part-h2:first-child{ margin-top:0 }

/* Fits panel. Black, so it reads as the answer box. */
.roos-part-fits,
div.roos-part-fits{
  background:#0A0A0C;
  border-radius:6px;
  padding:22px 24px;
}
.roos-part-fits .roos-part-fits-k,
div.roos-part-fits .roos-part-fits-k{
  display:block;
  font-family:Barlow, sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#FFC72C;
  margin-bottom:7px;
}
.roos-part-fits .roos-part-fits-v,
div.roos-part-fits .roos-part-fits-v{
  display:block;
  font-family:Archivo, sans-serif;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#FFFFFF;
}
.roos-part-fits .roos-part-coastal,
div.roos-part-fits .roos-part-coastal{
  display:block;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #2A2A31;
  font-family:Barlow, sans-serif;
  font-size:13.5px;
  line-height:1.55;
  color:#A9A7AE;
}

/* Signs it needs replacing */
.roos-part-signs,
ul.roos-part-signs{
  margin:0;
  padding:0;
  list-style:none;
}
.roos-part-signs li,
ul.roos-part-signs li{
  position:relative;
  padding-left:26px;
  margin-bottom:11px;
  font-family:Barlow, sans-serif;
  font-size:15px;
  line-height:1.55;
  color:#4E4C53;
}
.roos-part-signs li::before,
ul.roos-part-signs li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#FFC72C;
}

/* Sizes and variants table */
.roos-part-variants,
div.roos-part-variants{
  overflow-x:auto;
  border:0;
  border-radius:6px;
  background:#0A0A0C;
}
.roos-part-variants table{
  border-collapse:collapse;
  width:100%;
  min-width:420px;
}
.roos-part-variants th,
.roos-part-variants td{
  padding:14px 18px;
  text-align:left;
  border-bottom:1px solid #2A2A31;
  font-family:Barlow, sans-serif;
  font-size:14px;
  line-height:1.55;
  color:#A9A7AE;
}
.roos-part-variants thead th{
  font-family:Archivo, sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#0A0A0C;
  background:#FFC72C;
  border-bottom:0;
  white-space:nowrap;
}
.roos-part-variants tbody th{
  font-family:Archivo, sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.4px;
  color:#FFFFFF;
  white-space:nowrap;
}
.roos-part-variants tbody tr:nth-child(even){ background:#131318 }
.roos-part-variants tbody tr:last-child th,
.roos-part-variants tbody tr:last-child td{ border-bottom:0 }

/* Related parts row under the single */
.roos-part-related{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media (max-width:900px){ .roos-part-related{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .roos-part-related{ grid-template-columns:1fr } }/* End custom CSS */