/* ===========================================
   ZOHO COMMERCE - AANGEPASTE CSS
   ===========================================

   Plak deze CSS in Zoho Commerce:
   Instellingen > Code > Aangepaste CSS

   Bevat:
   - Mobile header (logo + titel naast elkaar)
   - Slider hoogte aanpassing

   =========================================== */


/* -----------------------------------------
   MOBILE HEADER - Compacte layout
   ----------------------------------------- */

@media screen and (max-width: 768px) {
  /* Branding container: logo en titel naast elkaar */
  .theme-branding-info {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  /* Logo container */
  .theme-logo-parent {
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Logo kleiner maken */
  .theme-logo-parent img {
    max-width: 40px !important;
    width: 40px !important;
    height: auto !important;
  }

  /* Site titel container */
  .theme-site-name-caption {
    flex: 1 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Site titel styling */
  .theme-site-name-caption,
  .theme-site-title-caption-space {
    font-size: 0.95em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}


/* -----------------------------------------
   HERO/SLIDER HOOGTE - Inicio pagina
   ----------------------------------------- */

/* Hero banner hoogte beperken */
.theme-banner,
.zphero,
.zphero-slide,
.zphero-slides {
  max-height: 340px !important;
  height: 340px !important;
  overflow: hidden !important;
}

/* Achtergrond afbeelding mooi bijsnijden */
.zphero-slide .zpslider-img {
  height: 340px !important;
}

/* Content container centreren */
.zphero-slider-container {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Pijltjes verticaal centreren */
.zsslider-arrows-container {
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
}

/* Tablet */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .theme-banner,
  .zphero,
  .zphero-slide,
  .zphero-slides,
  .zphero-slide .zpslider-img {
    max-height: 280px !important;
    height: 280px !important;
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  .theme-banner,
  .zphero,
  .zphero-slide,
  .zphero-slides,
  .zphero-slide .zpslider-img {
    max-height: 220px !important;
    height: 220px !important;
  }
}


/* -----------------------------------------
   FEATURES SECTIE (Lichtblauw - 4 kolommen)
   Calidad Garantizada, Recogida en Cuba, etc.
   Selector: .zpsection.zpdark-section-bg (NIET zpdefault)
   ----------------------------------------- */

/* Desktop: Sectie padding */
.theme-footer-area .zpsection.zpdark-section-bg {
  padding: 25px 0 !important;
}

/* Desktop: Row als flex container */
.theme-footer-area .zpsection.zpdark-section-bg .zprow {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Desktop: Alle 4 kolommen even breed + verticale lijnen */
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col.zpcol-md-3 {
  flex: 1 1 0 !important;
  max-width: 25% !important;
  padding: 10px 25px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Laatste kolom geen border */
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col.zpcol-md-3:last-child {
  border-right: none !important;
}

/* Icoon en titel centreren */
.theme-footer-area .zpsection.zpdark-section-bg .zpicon-container {
  justify-content: center !important;
}

/* Tekst uitgevuld (justified) - alle kolommen */
.theme-footer-area .zpsection.zpdark-section-bg .zptext,
.theme-footer-area .zpsection.zpdark-section-bg .zptext p,
.theme-footer-area .zpsection.zpdark-section-bg .zptext span,
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col .zptext {
  text-align: justify !important;
}

/* Override voor elke kolom specifiek */
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col:first-child .zptext,
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col:nth-child(2) .zptext,
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col:nth-child(3) .zptext,
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-col:last-child .zptext {
  text-align: justify !important;
}

/* Tekst compacter */
.theme-footer-area .zpsection.zpdark-section-bg .zpelem-text {
  margin-top: 10px !important;
}


/* -----------------------------------------
   FOOTER (Donkerblauw - adresgegevens)
   ----------------------------------------- */

/* Footer container met adres/KvK/links */
.theme-footer-area > .zpcontent-container.footer-container {
  padding: 25px 0 !important;
}

/* Footer row: flex */
.theme-footer-area .footer-container .zprow {
  display: flex !important;
  align-items: flex-start !important;
}

/* Footer kolommen GEEN verticale lijnen */
.theme-footer-area .footer-container .zpelem-col,
.theme-footer-area .footer-container .zpelem-col.zpcol-md-3,
.theme-footer-area .footer-container .zpelem-col.zpcol-md-6 {
  border-right: none !important;
  border-left: none !important;
}

/* Kolom 1 (Avanza Nova): links uitgelijnd */
.theme-footer-area .footer-container .zprow > .zpelem-col:first-child {
  text-align: left !important;
}

.theme-footer-area .footer-container .zprow > .zpelem-col:first-child .zptext {
  text-align: left !important;
}

/* Kolom 2 (Cámara de Comercio): gecentreerd + naar beneden */
.theme-footer-area .footer-container .zprow > .zpelem-col:nth-child(2) {
  text-align: center !important;
  padding-top: 10px !important;
}

.theme-footer-area .footer-container .zprow > .zpelem-col:nth-child(2) .zptext {
  text-align: center !important;
}

/* Kolom 3 (Términos): rechts uitgelijnd */
.theme-footer-area .footer-container .zprow > .zpelem-col:last-child {
  text-align: right !important;
}

.theme-footer-area .footer-container .zprow > .zpelem-col:last-child .zptext,
.theme-footer-area .footer-container .zprow > .zpelem-col:last-child .zptext a {
  text-align: right !important;
}

/* Logo naast bedrijfsnaam in footer */
.theme-footer-area .footer-container .zprow > .zpelem-col:first-child .zptext p:first-child::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('http://webshop.avanzanova.com/avanza_logo.png') no-repeat center;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}


/* -----------------------------------------
   MOBILE STYLES - Features + Footer
   ----------------------------------------- */

@media screen and (max-width: 768px) {

  /* === Features sectie: 2x2 grid === */
  .theme-footer-area .zpsection .zprow {
    flex-wrap: wrap !important;
  }

  .theme-footer-area .zpsection .zpelem-col.zpcol-md-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 15px 12px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* Verticale lijn tussen linker en rechter kolom */
  .theme-footer-area .zpsection .zpelem-col.zpcol-md-3:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* Onderste rij geen border-bottom */
  .theme-footer-area .zpsection .zpelem-col.zpcol-md-3:nth-child(n+3) {
    border-bottom: none !important;
  }

  /* Kleinere tekst op mobiel */
  .theme-footer-area .zpsection .zpicon-heading {
    font-size: 1em !important;
  }

  .theme-footer-area .zpsection .zptext {
    font-size: 0.85em !important;
    line-height: 1.4 !important;
  }


  /* === Footer: tekst centreren === */
  .theme-footer-area .footer-container {
    text-align: center !important;
  }

  .theme-footer-area .footer-container .zprow {
    justify-content: center !important;
  }

  .theme-footer-area .footer-container .zpelem-col {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 15px !important;
  }

  .theme-footer-area .footer-container .zptext,
  .theme-footer-area .footer-container p,
  .theme-footer-area .footer-container a {
    text-align: center !important;
  }
}