/*
Theme Name: Kalium - Child Theme
Theme URI: https://kaliumtheme.com
Author: Laborator
Author URI: https://laborator.co
Description: Start creating that amazing website that you have always wanted, only with Kalium &mdash; Connect with Laborator on: <a href="https://twitter.com/thelaborator">Twitter X</a> &bull; <a href="https://www.facebook.com/laboratorcreative">Facebook</a> &bull; <a href="https://www.instagram.com/laboratorcreative">Instagram</a>
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/kalium-child/assets/fonts/material-icons/material-icons.woff2') format('woff2'),
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.woocommerce-shop > .wrapper,
.woocommerce-page > .wrapper {
	margin-bottom: 2em !important;
}

.footer-my-account {
	margin-bottom: 1.5em !important;
}

.swiper-pagination-bullet {
	background: #fff !important;
}

.swiper-pagination-bullet-active {
	background: #2493ce !important;
}

.swiper-button-prev,
.swiper-button-next {
	color: #fff !important;
}

/* Basiskosmetik */
.wc-block-customer-account {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.wc-block-customer-account a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}

.sidebar-my-account {
	border-radius: 32px !important;
}

h5 > .wp-block-heading {
	font-size: 8px !important;
}

/* Haupt-Container für die Album-Übersicht */
.custom-modula-album-wrapper {
    /* Setzt die maximale Breite auf 1320px */
    max-width: 1320px; 
    
    /* Zentriert den Container horizontal */
    margin-left: auto;
    margin-right: auto;
    
    /* Stellt sicher, dass der Container nicht zu breit wird (für kleinere Bildschirme) */
    width: 100%; 
    
    /* Optional: Fügt etwas vertikalen Abstand hinzu */
    box-sizing: border-box; /* Stellt sicher, dass Padding in der Breite enthalten ist */
}

/* Anpassung der Modula-Elemente innerhalb des Containers (falls nötig) */
/* Dies hilft, die inneren Elemente gleichmäßig zu verteilen. 
   Modula-Elemente sind oft schon responsive, aber Sie können Flexbox nutzen: */
.custom-modula-album-wrapper > * {
    /* Stellt sicher, dass jedes eingebettete Element (z.B. die Galerie) 
       sich an den zentrierten Container anpasst */
    width: 100%; 
    margin-bottom: 20px; /* Abstand zwischen den einzelnen Vorschaubildern */
}

.page-id-3465 .modula-items {
	width: 1320px !important;
}

.page-id-3465 #jtg-album-3517.modula-album .modula-item,
.page-id-3465 .modula-item,
.page-id-3465 a.gallery-link.simple-link,
.page-id-3465 div.modula-item.tg-loaded.effect-apollo{
	width: 310px !important;
    height: 465px !important;
}