/** Shopify CDN: Minification failed

Line 458:0 Expected "}" to go with "{"

**/
/* =========================================
   Hogar-Total — CUSTOM.CSS (clean build)
   ========================================= */

/* 0) Kleuren (bron van waarheid) */
:root{
  --ht-orange:#FF6600;   /* CTA / accenten */
  --ht-text:#000000;     /* hoofdtekst */
  --ht-beige:#D8CFC4;    /* header/topbar/footer achtergrond */
  --ht-grey:#999999;
  --ht-white:#FFFFFF;
  --ah-announcementbar: #f7f7e1;
}

/* 1) Basis & links */
html, body{ color:var(--ht-text); background:var(--ht-white); }
a{ color:var(--ht-orange); text-decoration:none; }
a:hover{ text-decoration:underline; }
*:focus-visible{ outline:2px solid var(--ht-orange); outline-offset:2px; }

/* 2) Knoppen */
.button, .btn, [type="submit"],
.product-form__submit, .cart__checkout-button,
.shopify-payment-button__button--unbranded{
  background:var(--ht-orange); border-color:var(--ht-orange); color:#fff;
}
.button--secondary, .btn--secondary{
  background:transparent; border-color:var(--ht-orange); color:var(--ht-orange);
}
.button:hover, .btn:hover, .product-form__submit:hover, .cart__checkout-button:hover{
  filter:brightness(.95);
}

/* 3) Badges */
.badge, .price__badge, .badge--sale{ background:var(--ht-orange); color:#fff; }
.badge--new{ background:#4CAF50; color:#fff; }
.badge--sold-out{ background:var(--ht-grey); color:#fff; }

/* 4) Inputs/velden */
input, select, textarea{ color:var(--ht-text); border-color:rgba(0,0,0,.12); }
input:focus, select:focus, textarea:focus{
  border-color:var(--ht-orange);
  box-shadow:0 0 0 2px rgba(255,102,0,.15);
}

/* 5) Header / Topbar / Footer consistent beige (Kalles/HDt selectors) */
.hdt-announcement-bar, .hdt-announcement-bar_wrapper,
.hdt-announcement-bar_slider, .hdt-announcement-bar_slider-content,
.hdt-header, .hdt-header__wrap, .hdt-header__top, .hdt-header__mid, .hdt-header__bottom,
.kalles-section-header, .header, .header-wrapper,
#shopify-section-footer, .site-footer, .footer,
.footer__content-top, .footer__content-bottom{
  background:var(--ah-announcementbar);
  color:var(--ht-text);
}
.hdt-header a, .header a, #shopify-section-footer a, .footer a{ color:var(--ht-text); }
.hdt-header, .header, .kalles-section-header{ border-bottom:1px solid rgba(0,0,0,.10); }
#shopify-section-footer{ border-top:1px solid rgba(0,0,0,.10); }

/* =====================================================
   6) Footer PRO (3 kolommen: Brand/Contacto • Categorías • Información)
   ===================================================== */
.ht-footer-pro{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:32px;
  padding:16px 0 8px;
  color:var(--ht-text);
}
@media (max-width:900px){ .ht-footer-pro{ grid-template-columns:1fr; gap:20px; } }

.htf-col{ display:flex; flex-direction:column; gap:12px; }
.htf-brand{ gap:14px; }

.htf-logo{ display:block; width:100%; max-width:220px; height:auto; object-fit:contain; }

.htf-title{
  margin:2px 0 4px;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; opacity:.9;
}

.htf-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }

.htf-link{ color:inherit; text-decoration:none; position:relative; transition:color .25s ease; }
.htf-link:hover{ color:var(--ht-orange); }
.htf-link.htf-nav::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor;
  transition:width .25s ease; opacity:.9;
}
.htf-link.htf-nav:hover::after{ width:100%; }

.htf-contact{ display:flex; flex-direction:column; gap:8px; }
.htf-row{ margin:0; display:flex; align-items:center; gap:10px; line-height:1.35; }
.htf-ico{ width:22px; height:22px; display:inline-grid; place-items:center; color:var(--ht-orange); filter:drop-shadow(0 1px 0 rgba(0,0,0,.04)); }

.htf-empty{ margin:0; opacity:.7; font-size:14px; }
@media (max-width:640px){ .htf-logo{ max-width:190px; } }

/* (optioneel) eenvoudiger contactblok als je dat gebruikt i.p.v. PRO */
.footer-contact{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-size:14px; color:#000; }
.footer-contact .footer-logo img{ max-width:180px; height:auto; margin-bottom:8px; }
.footer-contact p{ margin:0; display:flex; align-items:center; gap:8px; }
.footer-contact i{ font-size:18px; color:var(--ht-orange); min-width:20px; text-align:center; }
.footer-contact a{ color:inherit; text-decoration:none; transition:color .2s, text-decoration .2s; }
.footer-contact a:hover{ color:var(--ht-orange); text-decoration:underline; }

/* =====================================================
   7) USP-balk (witte achtergrond)
   ===================================================== */
.usp-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:25px 15px;
  background:#ffffff;
  border-radius:10px;
}
.usp-item{ text-align:center; }
.usp-icon{ font-size:30px; color:var(--ht-orange); margin-bottom:8px; }
.usp-item h3{ font-size:16px; font-weight:700; margin:0 0 5px; color:#000; }
.usp-item p{ font-size:14px; margin:0; color:#555; }
@media (max-width:768px){ .usp-bar{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .usp-bar{ grid-template-columns:1fr; } }

/* =====================================================
   8) Copyright — altijd full-width, gecentreerd, met oranje ©
   ===================================================== */

/* Snippet kan .footer-copyright of .ht-copyright heten — beide ondersteunen */
#shopify-section-footer .footer-copyright,
#shopify-section-footer .ht-copyright{
  /* volledig breedte rij (werkt in grids en flex) */
  grid-column:1 / -1 !important;
  flex:0 0 100% !important;
  width:100% !important;

  /* centreren */
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:6px;

  /* spacing + scheidingslijn */
  padding:14px 0 !important;
  margin:0 auto !important;
  border-top:1px solid rgba(0,0,0,.15);
  font-size:14px;
  color:#000;
  line-height:1.3;
}

/* neutraliseer thema-kolom die links dwingt */
#shopify-section-footer .hdt-text-left .footer-copyright,
#shopify-section-footer .hdt-col-item .footer-copyright,
#shopify-section-footer .hdt-text-left .ht-copyright,
#shopify-section-footer .hdt-col-item .ht-copyright{
  text-align:center !important; width:100% !important;
}

/* oranje © — zonder afhankelijk te zijn van Font Awesome */
#shopify-section-footer .footer-copyright .ht-cp-ico,
#shopify-section-footer .ht-copyright .ht-cp-ico{
  color:var(--ht-orange) !important;
  font-weight:700; font-size:14px; line-height:1;
}

/* als je wél FA gebruikt voor het icoon, kleur hem ook oranje */
#shopify-section-footer .footer-copyright i,
#shopify-section-footer .ht-copyright i{
  color:var(--ht-orange) !important;
  font-size:14px;
}

/* sommige Kalles wrappers zetten bottom op space-between — centreer alsnog */
#shopify-section-footer .footer__bottom,
#shopify-section-footer .kalles-copyright,
#shopify-section-footer .kalles-copyright-wrap,
#shopify-section-footer .hdt-footer__bottom,
#shopify-section-footer .site-footer__bottom{
  display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important;
}
/* === Announcement bar tekst zwart === */
.hdt-announcement-bar,
.hdt-announcement-bar *,
.hdt-announcement-bar_wrapper,
.hdt-announcement-bar_slider,
.hdt-announcement-bar_slider-content {
  color: #000 !important;      /* tekst zwart */
}

.hdt-announcement-bar a,
.hdt-announcement-bar_wrapper a,
.hdt-announcement-bar_slider-content a {
  color: #000 !important;      /* links ook zwart */
}
/* === Announcement bar & Footer zelfde beige + zwarte tekst === */
.hdt-announcement-bar,
.hdt-announcement-bar *,
.hdt-announcement-bar_wrapper,
.hdt-announcement-bar_slider,
.hdt-announcement-bar_slider-content,
#shopify-section-footer,
.site-footer,
.footer,
.footer__content-top,
.footer__content-bottom,
.kalles-footer,
.kalles-section-footer {
  background: #D8CFC4 !important;
  color: #000 !important;          /* tekst zwart */
}

/* Links in footer en bar ook zwart */
#shopify-section-footer a,
.site-footer a,
.footer a,
.hdt-announcement-bar a,
.hdt-announcement-bar_slider-content a {
  color: #000 !important;
  text-decoration: none;
}
#shopify-section-footer a:hover,
.hdt-announcement-bar a:hover {
  color: #FF6600 !important; /* hover in jouw oranje */
}

/* Subtiele scheidingslijn boven footer */
#shopify-section-footer,
.site-footer,
.footer,
.kalles-footer {
  border-top: 1px solid rgba(0,0,0,0.15) !important;
}
/* === Lijn onder announcement bar === */
.hdt-announcement-bar,
.hdt-announcement-bar_wrapper,
.hdt-announcement-bar_slider,
.hdt-announcement-bar_slider-content {
  border-bottom: 1px solid rgba(0,0,0,0.15) !important;
}
/* === FORCEER footer exact dezelfde beige kleur als announcement bar === */
footer,
#shopify-section-footer,
#shopify-section-footer *,
.site-footer,
.site-footer *,
.footer,
.footer *,
.footer__content-top,
.footer__content-bottom,
.kalles-footer,
.kalles-footer *,
.kalles-section-footer,
.kalles-section-footer * {
  background: #D8CFC4 !important;  /* beige */
  color: #000 !important;          /* zwarte tekst */
}

/* Links in footer */
#shopify-section-footer a,
.site-footer a,
.footer a,
.kalles-footer a,
.kalles-section-footer a {
  color: #000 !important;
  text-decoration: none;
}
#shopify-section-footer a:hover,
.site-footer a:hover,
.footer a:hover,
.kalles-footer a:hover,
.kalles-section-footer a:hover {
  color: #FF6600 !important; /* jouw oranje hover */
}

/* Subtiele lijn boven de footer */
footer,
#shopify-section-footer,
.site-footer,
.footer,
.kalles-footer,
.kalles-section-footer {
  border-top: 1px solid rgba(0,0,0,0.15) !important;
}
/* ==== FORCE footer to #D8CFC4 (override Kalles gradient) ==== */
#shopify-section-footer,
#shopify-section-footer > div,
#shopify-section-footer .hdt-section,
#shopify-section-footer .hdt-row,
#shopify-section-footer .hdt-col,
#shopify-section-footer .hdt-group {
  background: #D8CFC4 !important;
  color: #000 !important;
}

/* Kill gradient/backdrop layers used by Kalles */
#shopify-section-footer .hdt-section-bg,
#shopify-section-footer .hdt-section-bg *,
#shopify-section-footer .hdt--gradient,
#shopify-section-footer [class*="hdt-grad"],
#shopify-section-footer [class*="hdt-bg"] {
  background: #D8CFC4 !important;
  background-color: #D8CFC4 !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;
  filter: none !important;

  /* nuke theme vars that re-apply gradients */
  --hdt-gradient-background: none !important;
  --hdt-grad-bg: none !important;
  --bg: #D8CFC4 !important;
  --color-base-background: #D8CFC4 !important;
}

/* Pseudo-elements sometimes paint the gradient */
#shopify-section-footer .hdt-section-bg::before,
#shopify-section-footer .hdt-section-bg::after,
#shopify-section-footer .hdt--gradient::before,
#shopify-section-footer .hdt--gradient::after {
  background: #D8CFC4 !important;
  background-image: none !important;
  content: none !important;
}

/* Keep links black; hover orange */
#shopify-section-footer a { color:#000 !important; text-decoration:none; }
#shopify-section-footer a:hover { color:#FF6600 !important; }

/* Subtle top border on footer */
#shopify-section-footer { border-top:1px solid rgba(0,0,0,.15) !important; }
/* === FORCE FOOTER CENTER ON MOBILE === */
@media (max-width: 768px){

  /* Algemene footer structuur */
  #shopify-section-footer .hdt-col,
  #shopify-section-footer .hdt-col-inner,
  #shopify-section-footer .footer,
  #shopify-section-footer .footer__content-top,
  #shopify-section-footer .footer__content-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Logo */
  #shopify-section-footer img,
  #shopify-section-footer .footer-logo,
  #shopify-section-footer .htf-logo {
    margin: 0 auto 10px auto !important;
    display: block !important;
    max-width: 180px !important; /* iets kleiner */
  }

  /* Contact */
  #shopify-section-footer .footer-row,
  #shopify-section-footer .htf-row,
  #shopify-section-footer .htf-contact {
    justify-content: center !important;
    text-align: center !important;
    margin: 4px 0 !important;
  }

  #shopify-section-footer .htf-row i,
  #shopify-section-footer .footer-row i {
    font-size: 14px !important; /* iconen kleiner */
  }

  /* Social media iconen */
  #shopify-section-footer .social-icons,
  #shopify-section-footer .footer-social,
  #shopify-section-footer .htf-social {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 10px 0 !important;
  }

  #shopify-section-footer .social-icons a,
  #shopify-section-footer .footer-social a {
    font-size: 18px !important; /* nette maat */
  }

  /* Navigatielijsten */
  #shopify-section-footer ul,
  #shopify-section-footer .htf-list {
    text-align: center !important;
    padding: 0 !important;
    margin: 6px 0 !important;
  }

  /* Copyright */
  #shopify-section-footer .footer-copyright {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 12px auto 4px auto !important;
    font-size: 12px !important;
  }
  /* === FOOTER LOGO + CONTACT CENTEREN OP MOBILE === */
@media (max-width: 768px){

  /* Het hele Liquid blok */
  #shopify-section-footer .custom-liquid,
  #shopify-section-footer .footer-contact,
  #shopify-section-footer .htf-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Logo */
  #shopify-section-footer .footer-logo,
  #shopify-section-footer .htf-logo,
  #shopify-section-footer img {
    margin: 0 auto 10px auto !important;
    display: block !important;
    max-width: 180px !important;
  }

  /* Adres + Email */
  #shopify-section-footer .footer-contact p,
  #shopify-section-footer .footer-contact a,
  #shopify-section-footer .htf-row {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 2px 0 !important;
  }

  /* Icons netjes eronder */
  #shopify-section-footer .footer-contact i,
  #shopify-section-footer .htf-ico {
    color: #FF6600 !important;
    margin-right: 6px;
    font-size: 14px;
  }
}
.announcement-bar__message,
.announcement-bar__message span {
  color: #ff6600 !important;
  font-weight: 600;
}