/* KOLOM IN RIJ OMDRAAIEN*/

@media (max-width: 600px) {
  .row-reverse {
    flex-direction: column-reverse;
  }
}

/********************************/

/* youtube filmpje schalen*/

.container-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/********************************/

.woocommerce h2 {
  padding-top: 5px;
}

.large-6.large-centered.columns {
  text-align: center;
  width: 90%;
  height: 100%;
}

.columns:last-child:not(:first-child) {
  margin-bottom: 50px;
  border-top-color: #ebebeb;
  border-top-width: 1px;
}

#products {
  margin-top: -10px;
}

.woocommerce ul.products li.product a {
  text-align: center;
  text-transform: uppercase;
}

.woocommerce ul.products li.product {
  text-align: center;
}

table {
  border-color: #ffffff;
  border-width: 0px;
  margin-bottom: -10px;
}

table tbody tr td {
  border-width: 0px;
}

table tbody tr:last-child td {
  margin-top: 0px;
  padding: 0px;
}

.shop_header {
  border-bottom-width: 2px;
  border-bottom-color: #ebebeb;
  border-bottom-style: solid;
  padding-bottom: 30px;
  padding-top: 30px;
}

.category_list .category_name {
  color: #000000;
  font-variant: normal;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
  bottom: -3em;
  text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
  display: none;
}

.product-category .woocommerce-loop-category__title .count {
  display: none;
}

.woocommerce-products-header__title.page-title.on-shop {
  height: 0px;
  display: none;
  visibility: hidden;
}

.woocommerce .page-title {
  opacity: 0;
}

/** Header menu aanpassingen voor announcement **/

.simple-banner .simple-banner-text {
  padding-bottom: 10px;
  padding-top: 10px;
}

.show-for-large.main-navigation.default-navigation.align_left {
  margin-top: 80px;
}

/********************************/

/** RECAPTCHA BADGE VERBERGEN ELEMENTOR **/

.grecaptcha-badge {
  visibility: hidden;
}

span.op-period-time {
  text-align: center;
}

/********************************/

/** UITLIJNING OPENINGSTIJDEN **/

.op-cell.op-cell-periods {
  text-align: center;
  padding-top: 16px;
  margin: 0px;
		  border-color: #000000;

}

.op-irregular-opening {
  text-align: center;
    margin: 0px;
		padding: 15px;
  position: inherit;
		  border-color: #000000;

}

.op-holiday {
  text-align: left;
  margin: 0px;
  border-color: #000000;
  padding: 15px;

/********************************/

/** UITLIJNING EXTRA INFO PRODUCT **/

.woocommerce-product-attributes-item__value {
  padding-left: 20px;
  text-indent: 2%;
}

/********************************/

.woocommerce div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
  padding-top: 25px;
  padding-left: 25px;
}

		/********************************/

/** aanpassing bij ADD-ONS **/

/* Zet alle tekst binnen het label in kleine letters */
.wc-pao-addon-62419-0-0 label {
  text-transform: lowercase;
}

/* Corrigeer de grootte van het €-symbool */
.wc-pao-addon-62419-0-0 .woocommerce-Price-currencySymbol {
  font-size: 1em; /* Zorgt dat het symbool dezelfde grootte krijgt als de rest */
  vertical-align: baseline; /* Zorgt dat het netjes op dezelfde lijn staat */
		
		
/********************************/
/* ============================================================
   DE DONJON — Showroom sale
   Dit blok is een JetWooBuilder-productlus, geen vaste HTML.
   Daarom CSS in plaats van een widget.

   PLAATSEN
   --------
   1. Selecteer in Elementor de SECTIE waar Showroom sale in staat
      (de kop en de producten samen).
   2. Geavanceerd > CSS-klassen: vul in   dj-sale
   3. Zet deze CSS in Weergave > Customizer > Extra CSS,
      of in Elementor > Site Settings > Custom CSS.

   Alles is afgebakend tot .dj-sale, dus andere productlussen
   op de site veranderen niet mee.

   KOLOMMEN
   Staat op 3. Zoek grid-template-columns om dat te wijzigen.

   BEELDVERHOUDING
   Staat op vierkant (1/1). Zie aspect-ratio bij "De foto".
   ============================================================ */

.dj-sale{
  --dj-indigo:#2E2D79;
  --dj-lavender:#A9A4D3;
  --dj-offwhite:#F2F1EC;
  --dj-slate:#333B47;
  --dj-body:#55595F;
  --dj-line:#E2E0DA;

  --dj-serif:Lora,Georgia,serif;
  --dj-sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,sans-serif;

  --dj-content:81.25rem;
  --dj-gutter:clamp(1.25rem,4vw,2.5rem);
  --dj-block-space:clamp(3rem,6vw,5.5rem);

  background:#fff;
  padding-block:var(--dj-block-space);
}

/* ---------- De kop ---------- */
/* Werkt alleen als de kop als "Showroom sale" is ingetypt.
   Staat er SHOWROOM SALE in hoofdletters, pas dat dan aan in
   Elementor — CSS kan hoofdletters niet netjes terugdraaien. */

.dj-sale h2,
.dj-sale h3{
  margin:0 0 clamp(1.75rem,3vw,2.75rem) !important;
  text-align:center;
  font-family:var(--dj-serif) !important;
  font-weight:400 !important;
  font-size:clamp(1.875rem,3.4vw,2.75rem) !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  color:var(--dj-slate) !important;
  text-transform:none !important;
}

/* ---------- Het raster ---------- */

.dj-sale .jet-woo-products{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.875rem,1.6vw,1.25rem);
  float:none !important;
}

.dj-sale .jet-woo-products__item{
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}

.dj-sale .jet-woo-products__inner-box{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--dj-offwhite);
  border:1px solid var(--dj-line);
  border-radius:.625rem;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

.dj-sale .jet-woo-products__item:hover .jet-woo-products__inner-box{
  transform:translateY(-3px);
  box-shadow:0 .75rem 1.75rem rgba(22,25,38,.14);
}

/* ---------- De foto ---------- */
/* Dit is de belangrijkste regel. Wat er ook geupload wordt —
   staand, liggend, vierkant, groot of klein — het vak is altijd
   even groot en de foto vult het volledig. Wat buiten het
   vierkant valt wordt weggesneden vanuit het midden.
   Er is dus geen enkel uploadformaat dat dit kan breken. */

.dj-sale .jet-woo-product-thumbnail{
  margin:0 !important;
  background:#fff;
}

.dj-sale .jet-woo-product-thumbnail img{
  display:block;
  width:100%;
  height:auto;
  /* Vierkant. Liever 4:3? Maak er   aspect-ratio:4 / 3;   van. */
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

/* ---------- Titel, prijs, knop ---------- */

.dj-sale .jet-woo-product-title{
  margin:0 !important;
  padding:1.125rem 1.125rem .375rem !important;
  font-family:var(--dj-serif) !important;
  font-weight:400 !important;
  font-size:1.0625rem !important;
  line-height:1.3 !important;
  text-align:left !important;
}

.dj-sale .jet-woo-product-title a{
  color:var(--dj-slate) !important;
  text-decoration:none !important;
}

.dj-sale .jet-woo-product-price{
  margin:0 !important;
  padding:0 1.125rem !important;
  text-align:left !important;
  font-family:var(--dj-sans) !important;
}

/* Oude prijs: klein en rustig, niet rood doorgestreept */
.dj-sale .jet-woo-product-price del{
  opacity:1 !important;
  color:var(--dj-body) !important;
  font-size:.875rem !important;
  margin-right:.5rem;
}

/* Nieuwe prijs: indigo in plaats van rood */
.dj-sale .jet-woo-product-price ins{
  background:none !important;
  text-decoration:none !important;
  color:var(--dj-indigo) !important;
  font-weight:700 !important;
  font-size:1.1875rem !important;
}

.dj-sale .jet-woo-product-button{
  margin-top:auto !important;
  padding:1rem 1.125rem 1.125rem !important;
}

.dj-sale .jet-woo-product-button .button{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:.75rem 1rem !important;
  border:1px solid var(--dj-indigo) !important;
  border-radius:.375rem !important;
  background:transparent !important;
  color:var(--dj-indigo) !important;
  font-family:var(--dj-sans) !important;
  font-weight:600 !important;
  font-size:.875rem !important;
  text-align:center;
  transition:background-color .2s ease, color .2s ease;
}

.dj-sale .jet-woo-product-button .button:hover,
.dj-sale .jet-woo-product-button .button:focus-visible{
  background:var(--dj-indigo) !important;
  color:var(--dj-offwhite) !important;
}

/* ---------- Responsief ---------- */

@media (max-width:60rem){
  .dj-sale .jet-woo-products{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:40rem){
  .dj-sale .jet-woo-products{grid-template-columns:1fr;}
  /* Op een smal scherm is vierkant een erg hoog blok */
  .dj-sale .jet-woo-product-thumbnail img{aspect-ratio:4 / 3;}
}

@media (prefers-reduced-motion:reduce){
  .dj-sale .jet-woo-products__inner-box{transition:none;}
  .dj-sale .jet-woo-products__item:hover .jet-woo-products__inner-box{transform:none;}
}		
		
		/********************************/