/* =========================================================
   CUSTOM CSS – NAVNEBAMSERNE (PrestaShop 8)
   Indeholder:
   1) Top-bjælke (fast)
   2) Desktop: logo øverst, menu under
   3) Mobil: skjul topmenu, vis logo
   4) Kurv + produktkort styling
   5) Skjul kun breadcrumb (safe)
   ========================================================= */

/* ---------------------------
   1) TOP-BJÆLKE
   --------------------------- */

/* Plads til top-bjælken (desktop/tablet) */
body { 
  padding-top: 50px !important; 
}

/* Selve top-bjælken */
body::before {
  content: "🚚 Hurtig levering vi sender de fleste ordrer indenfor 1-2 dage | 📦 Fragt kun 39,- (Fri fragt over 499,-)";
  position: fixed;               /* VIGTIGT: fixed (ikke absolute) */
  top: 0; 
  left: 0; 
  width: 100%;
  min-height: 50px;
  background: #1a1a1a;
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  font-size: 14px;
  z-index: 9999;
  padding: 5px 15px;
  line-height: 1.3;
}

/* ---------------------------
   2) DESKTOP: LOGO & MENU STRUKTUR
   --------------------------- */
@media (min-width: 768px) {
  #header .header-top .container > .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #_desktop_logo {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    cursor: pointer;
  }

  #_desktop_logo img {
    max-width: 450px !important;
    height: auto !important;
  }

  #_desktop_top_menu {
    width: 100% !important;
    display: block !important;
    clear: both !important;
  }
}

/* ---------------------------
   3) MOBIL: SKJUL DESKTOPMENU, VIS LOGO
   --------------------------- */
@media (max-width: 767px) {
  body::before { 
    min-height: 70px; 
    font-size: 12px; 
  }

  #_desktop_top_menu { 
    display: none !important; 
  }

  #_mobile_logo {
    display: block !important;
    text-align: center !important;
    padding: 10px 0 !important;
  }

  #_mobile_logo img {
    width: auto !important;
    max-width: 250px !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ---------------------------
   4) KURV & DESIGN
   --------------------------- */
#_desktop_cart .blockcart { 
  background-color: #6a8a6a !important; 
  border-radius: 4px !important; 
}

#_desktop_cart .blockcart * { 
  color: #ffffff !important; 
}

/* Produktkort (liste/oversigt) */
.thumbnail-container { 
  border: none !important; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; 
  border-radius: 15px !important; 
}

/* ---------------------------
   5) SAFE: SKJUL KUN BRØDKRUMME
   (i stedet for at skjule .nav som kan ødelægge faner)
   --------------------------- */
#wrapper .breadcrumb { 
  display: none !important; 
}

/* Ens knapfarve – støvet grøn */
.btn-primary,
.btn-secondary,
.btn-add-to-cart,
#_desktop_cart .blockcart {
  background-color: #8FAF9A !important;
  border-color: #8FAF9A !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-add-to-cart:hover,
#_desktop_cart .blockcart:hover {
  background-color: #7E9F8A !important;
  border-color: #7E9F8A !important;
}
/* FIX: GIV HEADER-NAV MERE HØJDE + LUFT, SÅ KURV IKKE RAMMER STREGEN */
#header .header-nav {
  height: auto !important;
  min-height: 0 !important;
}

#header .header-nav .container,
#header .header-nav .container-fluid {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#header .header-nav .row {
  align-items: center !important;
}
/* BLØD BAGGRUND TIL HEADER */
#header {
  background: #f6f8f6; /* meget lys støvet grøn */
}

/* Fjern evt. luft fra dens container/row */
#header .header-top .container,
#header .header-top .row {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* SØG: tydelig ramme + plads til lup (ingen overlap) */
#search_widget input[type="search"],
#search_widget input.ui-autocomplete-input {
  border: 2px solid #8FAF9A !important;
  border-radius: 10px !important;
  background: #fff !important;

  padding: 10px 14px 10px 42px !important; /* <-- ekstra venstre plads til lup */
  height: 44px !important;
  box-sizing: border-box !important;
}

#search_widget input[type="search"]:focus,
#search_widget input.ui-autocomplete-input:focus {
  outline: none !important;
  border-color: #7E9F8A !important;
  box-shadow: 0 0 0 3px rgba(143, 175, 154, 0.25);
}

/* PRODUKTBILLEDER: thumbnails i én række med scroll */
#product .product-images,
#product .js-qv-product-images {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding-bottom: 6px !important;
}

#product .product-images li,
#product .js-qv-product-images li {
  flex: 0 0 auto !important;
}
/* MOBIL: tydeligere rammer omkring varetilpasning */
@media (max-width: 767px) {

  /* Input- og tekstfelter */
  #product .product-customization input,
  #product .product-customization textarea,
  #product .product-customization select {
    border: 2px solid #8FAF9A !important;   /* støvet grøn */
    border-radius: 10px !important;
    background-color: #ffffff !important;
    padding: 12px 14px !important;
    font-size: 16px !important; /* bedre på mobil */
  }

  /* Når man klikker i feltet */
  #product .product-customization input:focus,
  #product .product-customization textarea:focus,
  #product .product-customization select:focus {
    outline: none !important;
    border-color: #7E9F8A !important;
    box-shadow: 0 0 0 3px rgba(143, 175, 154, 0.25);
  }

  /* Giv lidt luft mellem felterne */
  #product .product-customization .form-group {
    margin-bottom: 16px !important;
  }
}
/* DESKTOP: tydeligere rammer omkring varetilpasning */
@media (min-width: 768px) {

  #product .product-customization input,
  #product .product-customization textarea,
  #product .product-customization select {
    border: 2px solid #8FAF9A !important;   /* samme støvede grøn */
    border-radius: 8px !important;
    background-color: #ffffff !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  #product .product-customization input:focus,
  #product .product-customization textarea:focus,
  #product .product-customization select:focus {
    outline: none !important;
    border-color: #7E9F8A !important;
    box-shadow: 0 0 0 2px rgba(143, 175, 154, 0.2);
  }

  #product .product-customization .form-group {
    margin-bottom: 14px !important;
  }
}
/* Fjern de ekstra pile ved produktbilleder */
body#product .scroll-box-arrows { display: none !important; }

/* PRODUKTSIDE: gør prisen sort (overskriver theme-farve) */
body#product .product-prices .current-price span,
body#product .product-prices .price {
  color: #000000 !important;
}

@media (min-width: 768px) {
    .product-additional-info {
        display: block !important;
        min-height: 800px !important; 
        background: #f9f9f9 !important;
        border: 1px solid #6a8a6a !important;
        border-radius: 12px !important;
        padding: 30px !important;
        position: relative;
    }

    /* HJÆLPETEKST TIL BESTILLING */
    .product-additional-info::before {
        content: "SÅDAN BESTILLER DU DIN PERSONLIGE GAVE \a\a 1. Vælg din ønskede skrifttype \a Se billedet med skriftper nederst på varen. Du kan også teste nogle af skrifttyperne herunder. Husk stadig at skrive det ind ovenfor  \a\a 2. Indtast navnet i tekstfeltet \a Skriv det ønskede i tekst feltet. Ønsker du fx. både navn og fødselsdato kan du skrive begge i tekstfeltet. \a\a 3. Tryk altid på 'GEM TILPASNING' \a Det er meget vigtigt, at du trykker på den GEM knappen, før du lægger varen i kurven, ellers bliver dine valg ikke gemt. \a\a 4. Læg i kurven \a Når du har gemt dine valg, kan du vælge antal og trykke på 'Læg i indkøbskurv'. \a\a Har du spørgsmål? \a Vi er klar til at hjælpe dig med at lave den perfekte gave!";
        white-space: pre-wrap;
        font-size: 15px;
        color: #333;
        line-height: 1.6;
        display: block;
    }
}
/* FJERN HVID BJÆLKE I SIDEHOVEDET + behold luft under søgefeltet */
#header .header-top,
#header .header-top .container,
#header .header-top .row,
#header .header-top [class*="col-"],
#header .header-top .clearfix,
#header .header-top #_desktop_top_menu,
#header .header-top #_desktop_top_menu > ul,
#header .header-top + * {
  background: transparent !important;
  box-shadow: none !important;
}

/* Luft under søgefeltet i stedet for bjælken */
#header #search_widget {
  margin-bottom: 15px !important;
}
/* MOBIL: lad topbjælken vokse med logoet, så søgefeltet ikke dækker det */
@media (max-width: 767px) {
  #header .header-nav {
    max-height: none !important;
  }
}