/**
 * File: showroom.css
 * Purpose: Custom styling for the showroom section, including responsive iframe display and tabbed link appearance.
 * Usage: Applied to pages featuring a showroom embed or tabbed layout with `.showroom` class.
 * Dependencies: Divi (for ETmodules icons and tab classes)
 *
 * Note: This file is not currently in use on the live site, but retained for future use or reference.
 */



 /* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

/* These are not set or tested since the restructure, due to the component not being in use. Edit before implementing. */
.showroom {
  --showroom-link-hover: var(--brand-orange-medium); 
}

/* -------------------------- */

    
@media all and (min-width: 981px){
  #customiframe{ 
    aspect-ratio: 16/9!important;
  }
}

@media all and (min-width: 768px) and (max-width: 980px){
  #customiframe {
    aspect-ratio: 9/13!important;
  } 
}

@media all and (max-width: 767px){
  #customiframe {
    aspect-ratio: 9/16!important;
  }
}

.showroom a{
  padding: 0 2.3em 0 1em;
  text-decoration: none !important;
}

.showroom a:hover{
  text-decoration: none !important;
  color: var(--showroom-link-hover)!important;
}

.showroom ul li.et_pb_tab_active a:after
{
  content: "\e081";
  font-size: 1em;
  line-height: 1.6em;
  opacity: 1;
  position: absolute;
  margin-left: 10px;
  -webkit-transition: all .2s;
  transition: all .2s;
  text-transform: none;
  -webkit-font-feature-settings: "kern" off;
  font-feature-settings: "kern" off;
  font-variant: none;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  font-family: ETmodules !important;
}

.showroom ul li a:hover,
.showroom ul li a:hover:after,
.et_pb_tabs_0.et_pb_tabs .et_pb_tabs_controls li a:hover, 
.et_pb_tabs_0.et_pb_tabs .et_pb_tabs_controls li.et_pb_tab_active a:hover
{
  color: var(--showroom-link-hover)!important;   
}