/*
Theme Name:   Hello Theme Child
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-theme-child
Description:  Child theme voor Miniso.nl — gebaseerd op Hello Elementor
*/

/* ============================================================
   GLOBALE VARIABELEN
   Afgeleid van de Elementor Kit-instellingen van miniso.nl
   ============================================================ */
:root {
  /* Merkkleur rood */
  --miniso-red:        #E62B3C;
  --miniso-red-dark:   #B91524;

  /* Neutrale kleuren */
  --miniso-black:      #474747;
  --miniso-white:      #FFFFFF;
  --miniso-bg-light:   #F5F5F5;

  /* Typografie */
  --miniso-font-primary:   'Agency FB', sans-serif;
  --miniso-font-body:      'Barlow', sans-serif;
  --miniso-font-condensed: 'Barlow Condensed', sans-serif;

  /* Elementor Kit kleuren (worden ook via Elementor zelf ingesteld) */
  --e-global-color-primary:   #E62B3C;
  --e-global-color-secondary: #B91524;
  --e-global-color-text:      #474747;
  --e-global-color-accent:    #E62B3C;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--miniso-font-body);
  color: var(--miniso-black);
  background-color: var(--miniso-white);
  margin: 0;
  padding: 0;
}

a {
  color: var(--miniso-red);
  text-decoration: none;
}

a:hover {
  color: var(--miniso-red-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */

/* Agency FB wordt als uploaded font via Elementor Pro ingeladen.
   Hieronder de @font-face fallback als je de bestanden in het
   child theme zet (map: /fonts/). */

/*
@font-face {
  font-family: 'Agency FB';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/AgencyFBLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Agency FB';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/AgencyFBRegular.ttf') format('truetype');
}
@font-face {
  font-family: 'Agency FB';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/AgencyFB-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Agency FB';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/AgencyFB_Black.ttf') format('truetype');
}
*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--miniso-font-primary);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--miniso-black);
  line-height: 1.1;
  margin: 0 0 0.5em;
}

p {
  font-family: var(--miniso-font-body);
  line-height: 1.6;
  margin: 0 0 1em;
}

/* ============================================================
   KNOPPEN
   ============================================================ */
.elementor-button,
.elementor-button-link,
button,
input[type="submit"] {
  font-family: var(--miniso-font-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--miniso-red);
  color: var(--miniso-white);
  border: none;
  border-radius: 4px;
  padding: 0.65em 1.4em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.elementor-button:hover,
.elementor-button-link:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--miniso-red-dark);
  color: var(--miniso-white);
}

/* Elementor grow-animatie (wordt al via plugin gedaan, maar voor zekerheid) */
.elementor-animation-grow {
  transition: transform 0.3s ease;
}
.elementor-animation-grow:hover {
  transform: scale(1.05);
}

/* ============================================================
   HEADER
   De header is een Elementor Pro-template (post-56).
   Hieronder basisstijlen voor de witte header-achtergrond
   en sticky gedrag.
   ============================================================ */
.elementor-location-header {
  background-color: var(--miniso-white);
  position: sticky;
  top: 0;
  z-index: 9990;
  width: 100%;
}

/* Hamburger-achtergrond (desktop) */
.uc_liquid_hamburger {
  background-color: var(--miniso-white) !important;
}

/* Hamburger-lijntjes kleur */
.hamburger__line-in::before,
.hamburger__line-in::after {
  background-color: var(--miniso-black) !important;
}

/* Liquid menu overlay kleuren (komen ook via widget-CSS inline) */
.shape-overlays__path:nth-of-type(odd)  { fill: var(--miniso-red-dark); }
.shape-overlays__path:nth-of-type(even) { fill: var(--miniso-red); }

/* Menu links in overlay */
.uc_liquid_menu .global-menu a {
  font-family: var(--miniso-font-primary);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--miniso-white);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.uc_liquid_menu .global-menu a:hover {
  opacity: 0.75;
}

/* ============================================================
   FOOTER
   ============================================================ */
.elementor-location-footer {
  background-color: var(--miniso-black);
  color: var(--miniso-white);
}

.elementor-location-footer a {
  color: var(--miniso-white);
}

.elementor-location-footer a:hover {
  color: var(--miniso-red);
}

/* Nieuwsbrief-sectie (rode achtergrond) */
.elementor-location-footer .elementor-section:first-child {
  background-color: var(--miniso-red);
}

/* Nieuwsbrief input */
.elementor-location-footer input[type="email"],
.elementor-location-footer input[type="text"] {
  background-color: var(--miniso-white);
  border: none;
  border-radius: 4px;
  padding: 0.6em 1em;
  font-family: var(--miniso-font-body);
  font-size: 1rem;
  width: 100%;
}

/* ============================================================
   PRODUCTEN / LOOP CAROUSEL
   ============================================================ */

/* Product card */
.e-loop-item .elementor-element-a72c64c {
  border-radius: 30px;
  overflow: hidden;
  background-color: var(--miniso-bg-light);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.e-loop-item .elementor-element-a72c64c:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* Product titel */
.elementor-widget-woocommerce-product-title .elementor-heading-title {
  font-family: var(--miniso-font-primary);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--miniso-black);
}

/* Product prijs */
.woocommerce .price {
  font-family: var(--miniso-font-primary);
  font-size: 23px;
  font-weight: 700;
  color: var(--miniso-black);
}

/* Swiper navigatie-pijlen */
.elementor-swiper-button {
  color: var(--miniso-red);
}

.elementor-swiper-button:hover {
  color: var(--miniso-red-dark);
}

/* ============================================================
   INSTAGRAM FEED
   ============================================================ */
#sb_instagram .sbi_item {
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   ZOEKPOPUP
   ============================================================ */
.elementor-location-popup.zoekbalk-invoer {
  background-color: rgba(255,255,255,0.97);
}

.elementor-location-popup.zoekbalk-invoer h2 {
  font-family: var(--miniso-font-primary);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--miniso-black);
  text-transform: uppercase;
}

.e-search-input {
  font-family: var(--miniso-font-body);
  font-size: 1.2rem;
  border-bottom: 2px solid var(--miniso-red);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 0.5em 0;
  width: 100%;
  outline: none;
}

/* ============================================================
   WOOCOMMERCE ALGEMEEN
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--miniso-red);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--miniso-red);
  color: var(--miniso-white);
  font-family: var(--miniso-font-primary);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--miniso-red-dark);
  color: var(--miniso-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  /* Mobiele header heeft transparante hamburger-achtergrond */
  .elementor-element-84fd02d .uc_liquid_hamburger {
    background-color: transparent !important;
  }

  /* Hero-tekst schalen */
  .uael-fancy-text-prefix,
  .uael-typed-main {
    font-size: clamp(3rem, 12vw, 6rem) !important;
  }

  /* Product carousel: 1 kolom op mobiel */
  .elementor-widget-loop-carousel .swiper-slide {
    width: 85vw !important;
  }
}

@media (max-width: 1024px) {
  /* Tablet */
  .elementor-widget-loop-carousel .swiper-slide {
    width: 45vw !important;
  }
}