.dropdown-menu.mt-0.rounded-0.bg-gray-100 {
    margin-top: -10px !important;
}

 /* =====================================================================
   DRUKKERIJ DIRIX — PRINDUSTRY CUSTOM CSS (COPY/PASTE COMPLETE)
   (shared voor meerdere sites)
   ===================================================================== */

/* =====================================================================
   0) VARIABELEN
   ===================================================================== */
:root{
  --dirix-gray: #C0C0C0;
  --dirix-black: #000000;
  --dirix-darkgray: #808080;
  --dirix-lightgray: #f7f7f7;

  /* Logo */
  --dirix-logo-maxheight: 110px;

  /*
    Huidige globale shift (zoals je nu hebt)
    -> laten we ongewijzigd zodat gust.eu hetzelfde blijft.
  */
  --dirix-logo-shift: 76px;

  /* Homepage grid */
  --dirix-home-gap: 36px;
  --dirix-home-padding-top: 40px;
  --dirix-home-padding-bottom: 60px;
  --dirix-home-aspect: 3 / 2;
}

/* =====================================================================
   1) HEADER / LOGO (globaal, zoals je nu hebt)
   ===================================================================== */

.logo img{
  max-height: var(--dirix-logo-maxheight) !important;
  margin-bottom: 0 !important;
  width: auto !important;
  display: block !important;
}

@media (min-width: 992px){

  header nav.header-a #sections .row.container.mx-auto.py-2.bg-white > .logo{
    justify-content: flex-start !important;
    padding-left: 0 !important;
  }

  header nav.header-a #sections .row.container.mx-auto.py-2.bg-white > .logo .logo-a{
    display: inline-block !important;
    margin-left: 0 !important;
    transform: translateX(calc(-1 * var(--dirix-logo-shift))) !important;
  }

  header nav.header-a #sections .row.container.mx-auto.py-2.bg-white > .logo .logo-a img{
    margin-left: 0 !important;
  }
}

/* =====================================================================
   ✅ STUDIO-ONLY FIX: logo extra naar links (gust blijft ongemoeid)
   - Target op studio-logo via unieke src of alt.
   - Dit is de ENIGE wijziging t.o.v. je huidige gedrag.
   ===================================================================== */
@media (min-width: 992px){

  /* Studio gebruikt typisch /files/public/site/3-logo.png */
  header nav.header-a #sections .row.container.mx-auto.py-2.bg-white > .logo .logo-a img[src*="/files/public/site/3-logo.png"],
  /* En/of alt bevat “Studio” */
  header nav.header-a #sections .row.container.mx-auto.py-2.bg-white > .logo .logo-a img[alt*="Studio"]{
    margin-left: calc(-1 * var(--dirix-logo-studio-extra-left)) !important;
  }
}

/* =====================================================================
   2) TYPOGRAFIE / KLEUREN
   ===================================================================== */

h1, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5{
  color: var(--dirix-gray);
}

h2, h6{
  color: var(--dirix-gray) !important;
}

a{
  color: var(--dirix-black);
}
a:hover{
  color: #010101;
}

/* =====================================================================
   3) NAVIGATIE / DROPDOWN
   ===================================================================== */

.nav_extra a{
  color: var(--dirix-gray);
}

.dropdown-item.active,
.dropdown-item:active{
  color: var(--dirix-black);
  text-decoration: none;
  background-color: var(--dirix-lightgray);
}

nav.navbar.navbar-expand-lg.navbar-light.bg-dark{
  background-color: #fff !important;
}

.navbar-toggler{
  margin-top: 6rem !important;
  z-index: 1000;
}

/* =====================================================================
   4) CARDS / ALGEMENE UI
   ===================================================================== */

.card{
  border: 0px solid rgba(35, 31, 32, 0.125);
  border-radius: 0rem;
}

.section-menu-mobile span{
  /*display: none !important;*/
}

.footer-powered{
  display:none;
}

.delivery-deadline-short{
  display:none;
}

/* =====================================================================
   5) BUTTONS
   ===================================================================== */

.btn-outline-primary{
  color: var(--dirix-black);
  border-color: var(--dirix-black);
}

.btn-outline-primary:hover{
  color: #FFF;
  background-color: var(--dirix-gray);
  border-color: var(--dirix-darkgray);
}

.btn-primary{
  color: #FFF;
  background-color: var(--dirix-black);
  border-color: var(--dirix-black);
}
.btn-primary:hover{
  color: #FFF;
  background-color: var(--dirix-black);
  border-color: var(--dirix-black);
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle{
  color: #fff;
  background-color: #00000099 !important;
  border-color: #00000099 !important;
}

.btn-secondary{
  color: #FFF;
  background-color: var(--dirix-black);
  border-color: var(--dirix-black);
}
.btn-secondary:hover{
  color: #FFF;
  background-color: var(--dirix-gray);
  border-color: var(--dirix-gray);
  box-shadow: 0 0 0 0.2rem rgba(224,224,224,0.5) !important;
}
.btn-secondary:focus{
  color: #FFF !important;
  background-color: #7dafd4 !important;
  border-color: #7dafd4 !important;
  box-shadow: 0 0 0 0.2rem rgba(224,224,224,0.5) !important;
}

.btn-success{
  color: #FFF;
  background-color: var(--dirix-black);
  border-color: var(--dirix-black);
}
.btn-success:hover{
  color: #FFF;
  background-color: var(--dirix-gray);
  border-color: var(--dirix-gray);
  box-shadow: 0 0 0 0.2rem rgba(224,224,224,0.5) !important;
}
.btn-success:focus{
  box-shadow: 0 0 0 0.2rem rgba(224,224,224,0.5) !important;
}
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus{
  box-shadow: 0 0 0 0.2rem rgb(128,128,128);
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle{
  color: #333;
  background-color: var(--dirix-darkgray);
  border-color: var(--dirix-darkgray);
}

.btn-info{
  color: #FFF;
  background-color: var(--dirix-gray) !important;
  border-color: var(--dirix-darkgray) !important;
}
.btn-info:hover{
  color: #FFF;
  background-color: var(--dirix-gray) !important;
  border-color: var(--dirix-darkgray) !important;
  box-shadow: 0 0 0 0.2rem rgba(224,224,224,0.5) !important;
}
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus{
  box-shadow: 0 0 0 0.2rem rgba(224,224,224,0.5) !important;
}

.btn-light{
  color: var(--dirix-darkgray) !important;
  background-color: var(--dirix-gray);
  border-color: var(--dirix-gray);
}
.btn-light:hover{
  color: #FFF !important;
  background-color: var(--dirix-darkgray);
  border-color: var(--dirix-darkgray);
}
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle{
  color: #FFF !important;
  background-color: var(--dirix-black);
  border-color: var(--dirix-black);
}

a.text-primary:hover{
  color: #FFF !important;
}

/* =====================================================================
   6) ALERTS / BADGES / FORMS
   ===================================================================== */

.alert-warning{
  color: #FFF;
  background-color: var(--dirix-darkgray);
  border-color: var(--dirix-darkgray);
}

.alert-primary{
  color: #333 !important;
  background-color: var(--dirix-lightgray) !important;
  border-color: var(--dirix-lightgray) !important;
}

.badge-info{
  color: var(--dirix-lightgray);
  background-color: #455a64;
}

.text-success{
  color: var(--dirix-black) !important;
}

.form-control:focus{
  color: #546e7a;
  background-color: #fff;
  border-color: #00000042 !important;
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.25) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.25) !important;
}

small{
  font-size: 100% !important;
}

/* =====================================================================
   7) COOKIE BAR
   ===================================================================== */

.cookie_bar{
  position: fixed;
  background: var(--dirix-lightgray) !important;
  border: 1px solid #434343 !important;
  color: #000 !important;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  left: 0;
  text-align: center;
}
.cookie_bar button{
  padding: .5rem;
  font-weight: 600;
  border: var(--dirix-black) !important;
  background: var(--dirix-black) !important;
  color: #fff !important;
  -webkit-transition: background .2s ease;
  transition: background .2s ease;
}
.cookie_bar button:hover{
  background: #a1a1a1 !important;
}

/* =====================================================================
   8) STEP SELECTOR (LAYOUT)
   ===================================================================== */

.steps_selector .option_container .icon_selector li.active,
.steps_selector .option_container .icon_selector li.has_image:hover .steps_selector .option_container .icon_selector li.has_image.active,
.steps_selector .option_container .icon_selector li.has_image:hover .steps_selector .option_container .radio_selector li.has_image.active,
.steps_selector .option_container .icon_selector li:hover,
.steps_selector .option_container .radio_selector li.active,
.steps_selector .option_container .radio_selector li.has_image:hover .steps_selector .option_container .icon_selector li.has_image.active,
.steps_selector .option_container .radio_selector li.has_image:hover .steps_selector .option_container .radio_selector li.has_image.active,
.steps_selector .option_container .radio_selector li:hover{
  border-color: var(--dirix-lightgray) !important;
}

.custom-control-input:checked ~ .custom-control-label::before{
  color: #FFF;
  border-color: var(--dirix-gray);
  background-color: var(--dirix-gray);
}

article.steps_selector li.d-flex{
  display: flex !important;
  flex-direction: column;
  padding: 5px 0px;
}
article.steps_selector li.d-flex > span.col-5{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}
article.steps_selector li.d-flex > span.col-7{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
}

/* =====================================================================
   9) PRODUCTGALERIJ – 3 beelden, altijd correct (ZONDER GRID)
   ===================================================================== */

#product_description,
#product_description #app,
#product_description #app > div,
#product_description .left-images,
#product_description .left-images > div{
  width: 100% !important;
  max-width: 100% !important;
}

#product_description .left-images .my-gallery.categorie-album{
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;
}

#product_description .left-images .my-gallery.categorie-album > a{
  flex: 0 0 calc(33.3333% - 8px) !important;
  max-width: calc(33.3333% - 8px) !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  display: block !important;
  background: #fff !important;
}

#product_description .left-images .my-gallery.categorie-album > a > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

@media (max-width: 768px){
  #product_description .left-images .my-gallery.categorie-album{
    flex-wrap: wrap !important;
  }
  #product_description .left-images .my-gallery.categorie-album > a{
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}

/* =====================================================================
  10) HOMEPAGE GRID – “DIRIX TILES”
   ===================================================================== */

:root{
  --dirix-align-nudge: 0px;
}

.dirix-homepage.dirix-homegrid-wrap{
  padding-top: var(--dirix-home-padding-top);
  padding-bottom: var(--dirix-home-padding-bottom);
  overflow-x: hidden;
}

.dirix-homepage .dirix-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--dirix-home-gap) var(--dirix-home-gap);
  width: 100%;
}

@media (min-width: 992px){
  .dirix-homepage .dirix-grid{
    margin-left: calc(-1 * var(--dirix-align-nudge));
    width: calc(100% + var(--dirix-align-nudge));
  }
}

.dirix-homepage .dirix-tile{
  flex: 0 0 calc((100% - (2 * var(--dirix-home-gap))) / 3);
}

@media (max-width: 992px){
  .dirix-homepage.dirix-homegrid-wrap{
    padding-top: 30px;
    padding-bottom: 50px;
  }
  .dirix-homepage .dirix-tile{
    flex: 0 0 calc((100% - var(--dirix-home-gap)) / 2);
  }
}

@media (max-width: 640px){
  .dirix-homepage.dirix-homegrid-wrap{
    padding-top: 24px;
    padding-bottom: 40px;
  }
  .dirix-homepage .dirix-tile{
    flex: 0 0 100%;
  }
}

.dirix-homepage .dirix-title{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.dirix-homepage .dirix-imgwrap{
  display: block;
  width: 100%;
  aspect-ratio: var(--dirix-home-aspect);
  overflow: hidden;
  background: #f2f2f2;
}
.dirix-homepage .dirix-imgwrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   HEADER – Dropdown section buttons padding fix (ALL sections)
   ========================================================= */
header nav.header-a #sections a.nav-link.dropdown-toggle.dropdownSectionToButton{
  padding: .5rem 12px .5rem 0 !important;
}
header nav.header-a #sections a.nav-link.dropdown-toggle[id^="section_"]{
  padding: .5rem 12px .5rem 0 !important;
}

/* =========================================================
   STUDIO ONLY — extra logo shift naar links
   (gust.eu blijft ongewijzigd)
   Werkt omdat studio-logo een andere src/alt heeft dan gust.
   ========================================================= */

:root{
  --dirix-logo-studio-extra-left: 138px; /* <-- stel af: 0–80px */
}

@media (min-width: 992px){
  /* Studio gebruikt /files/public/site/3-logo.png (zie jouw inspector) */
  header nav.header-a #sections .logo .logo-a img[src*="/files/public/site/3-logo.png"]{
    transform: translateX(calc(-1 * var(--dirix-logo-studio-extra-left))) !important;
  }

  /* Extra fallback als de src ooit wijzigt maar alt “Studio …” blijft */
  header nav.header-a #sections .logo .logo-a img[alt*="Studio"]{
    transform: translateX(calc(-1 * var(--dirix-logo-studio-extra-left))) !important;
  }
  
}
/* =========================================================
   STUDIO ONLY — Afbeeldingen forceren naar 3:2 ratio
   (gust.eu blijft onaangeraakt)
   Detectie: studio header heeft logo src /files/public/site/3-logo.png
   ========================================================= */

@supports selector(:has(*)){

  /* Alleen op studio (body bevat het studio-logo in de header) */
  body:has(header img[src*="/files/public/site/3-logo.png"]) .content-container img.card-img-top,
  body:has(header img[src*="/files/public/site/3-logo.png"]) .content-container img.img-thumbnail,
  body:has(header img[src*="/files/public/site/3-logo.png"]) .content-container img.img-fluid{
    width: 100% !important;
    height: auto !important;                 /* nodig zodat aspect-ratio kan sturen */
    aspect-ratio: 3 / 2 !important;          /* 3:2 */
    object-fit: cover !important;            /* crop i.p.v. vervormen */
    display: block !important;
  }

  /* Veiligheids-net: raak je productgalerij (square) niet aan */
  body:has(header img[src*="/files/public/site/3-logo.png"]) 
  #product_description .left-images .my-gallery.categorie-album > a > img{
    aspect-ratio: auto !important;
  }
}