/*
 Theme Name: Storefront Child
 Template: storefront
 Version: 3.4
*/

/* =========================
   Variabelen
   ========================= */
:root{
  --dark:#545454;     /* header-donker */
  --light:#d7d7d7;    /* lichtgrijs */
  --accent:#ff0000;   /* rood */
  --usp-width:66.6667vw;   /* ≈ 2/3 scherm */
  --usp-slope:14px;        /* schuine kant */
}

/* =================================================================
   DESKTOP (≥769px)
   ================================================================= */
@media (min-width:769px){

  /* Header en hoofdmenu-balk */
  .site-header{
    background:var(--dark) !important;
    margin:0 !important;
    position:relative; z-index:10;
  }
  .storefront-primary-navigation{
    background:var(--light) !important;
    border-bottom:4px solid var(--accent) !important;
    position:relative; z-index:15;
  }
  .main-navigation ul.menu>li>a{ color:#000 !important; font-weight:600; }
  .main-navigation ul.menu>li>a:hover{ color:var(--accent) !important; }

  /* ===== USP-balk ===== */
  .top-uspbar{ background:var(--dark); padding:0 0 18px; }
  .top-uspbar .col-full{ position:relative; overflow:visible; }

  /* alleen statische lijst op desktop */
  .top-uspbar .usp-rotator{ display:none !important; }

  .top-uspbar .usp-list{
    list-style:none; margin:0; padding:0 24px; min-height:48px;
    display:flex; align-items:center; justify-content:flex-end;
    gap:clamp(10px,1.2vw,28px);
    font-size:clamp(13px,0.95vw,16px);
    line-height:1.25; white-space:nowrap;

    position:relative; z-index:2;       /* contentlaag */
    color:#000;
  }
  .top-uspbar .usp-list>li{ margin:0; font-weight:600; position:relative; z-index:3; }
  .top-uspbar .usp-list>li strong{ font-weight:700; }

  /* slab en rode lijn ONDER de tekst */
  .top-uspbar .usp-list::before{
    content:""; position:absolute; top:0; bottom:0;
    right:calc(50% - 50vw);
    width:var(--usp-width);
    background:var(--light);
    clip-path:polygon(var(--usp-slope) 0, 100% 0, 100% 100%, 0 100%);
    z-index:1; pointer-events:none;
  }
  .top-uspbar .usp-list::after{
    content:""; position:absolute; bottom:-3px;
    right:calc(50% - 50vw);
    width:var(--usp-width); height:3px;
    background:var(--accent);
    z-index:1; pointer-events:none;
  }

  /* ===== Desktop: account links van cart (flex, stabiel) =====
     We maken alléén de lichte navigatiebalk flex.
     Volgorde in DOM: menu → [account] → [cart]. */
  .storefront-primary-navigation .col-full{
    display:flex; align-items:center; gap:0.75rem;
  }
  .storefront-primary-navigation .main-navigation{
    order:1; flex:1 1 auto;       /* menu neemt links de ruimte */
  }
  .header-account--desktop-only{
    order:2;                       /* komt vóór de cart */
    display:flex; align-items:center;
    margin-left:auto;              /* duwt account naar rechtsblok */
    white-space:nowrap;
  }
  .site-header-cart{
    order:3;                       /* cart helemaal rechts */
    margin-left:16px;
  }
  .header-account-link .account-link{
    display:inline-flex; align-items:center; gap:6px;
    color:#000 !important; font-weight:600; text-decoration:none;
    transition:color .25s ease, transform .25s ease;
  }
  .header-account-link .account-link:hover{
    color:var(--accent) !important; transform:translateY(-1px);
  }
  .header-account-link .account-icon{ fill:currentColor; line-height:1; }

  /* ===== Zoekbalk: centreren, breder, afgerond ===== */
  /* Container centreren */
  .site-header .site-search,
  .site-header .widget_product_search{
    max-width: 760px;
    margin: 0 auto;             /* centreren in donkere header */
    float: none !important;
  }
  /* Form/veld 100% breedte + afgeronde hoeken */
  .site-header .widget_product_search form,
  .site-header .storefront-product-search{ width:100%; }

  .site-header .widget_product_search .search-field,
  .site-header .woocommerce-product-search .search-field,
  .site-header .storefront-product-search .search-field,
  .site-header .site-search input[type="search"]{
    width:100%;
    height:48px;
    border-radius:12px;          /* afgeronde hoeken */
  }

  /* Content strak tegen header */
  .site-content,.site-content .col-full,.content-area,.site-main{ padding-top:0 !important; margin-top:0 !important; }
  .entry-content>*:first-child{ margin-top:0 !important; }
}

/* =================================================================
   MOBIEL (≤768px)
   ================================================================= */
@media (max-width:768px){

  /* Header + rode lijn */
  .site-header{ background:var(--dark) !important; position:relative; z-index:10; }
  .site-header::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); }

  /* Hamburgerknop */
  .storefront-primary-navigation, .storefront-primary-navigation .col-full{ background:transparent !important; border:none !important; }
  .storefront-primary-navigation .menu-toggle{
    background:var(--light) !important; color:#000 !important; fill:#000 !important;
    border:1px solid var(--accent) !important; border-radius:8px;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:6px 32px; margin-top:15px;
    outline:none !important; box-shadow:none !important;
  }
  .storefront-primary-navigation .menu-toggle:hover,
  .storefront-primary-navigation .menu-toggle:focus,
  .storefront-primary-navigation .menu-toggle:active{
    background:var(--accent) !important; color:#fff !important; fill:#fff !important;
  }

  /* Logo compacter */
  .site-branding,.site-logo-anchor,.custom-logo-link{ display:flex !important; align-items:center; justify-content:center; padding:8px 0 !important; }
  .custom-logo,.site-branding img{ display:block !important; max-height:48px !important; width:auto !important; }

  /* USP = slideshow (full-bleed) */
  .top-uspbar{ background:transparent; padding:0; }
  .top-uspbar .usp-list{ display:none !important; }
  .top-uspbar .usp-rotator{
    background:var(--light) !important; border-bottom:3px solid var(--accent) !important;
    padding:10px 0 !important; width:100vw !important;
    margin-left:calc(-50vw + 50%) !important;
    display:flex !important; align-items:center; justify-content:center; text-align:center;
  }
  .top-uspbar .usp-rotator-text{ color:#000 !important; font-weight:600; white-space:nowrap; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
  .top-uspbar .usp-rotator-text.is-visible{ opacity:1; transform:translateY(0); }

  /* ===== Handheld (mobiel) menu – Storefront ===== */
  .storefront-primary-navigation.toggled .handheld-navigation,
  .main-navigation.toggled .handheld-navigation{
    background:#d7d7d7 !important;
  }
  .storefront-primary-navigation.toggled .handheld-navigation ul,
  .storefront-primary-navigation.toggled .handheld-navigation li,
  .main-navigation.toggled .handheld-navigation ul,
  .main-navigation.toggled .handheld-navigation li{
    background:transparent !important;
  }
  .storefront-primary-navigation.toggled .handheld-navigation a,
  .storefront-primary-navigation.toggled .handheld-navigation a:visited,
  .main-navigation.toggled .handheld-navigation a,
  .main-navigation.toggled .handheld-navigation a:visited{
    display:block; padding:14px 20px;
    color:#545454 !important; background:transparent !important;
    font-weight:600; text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,.08);
    border-left:3px solid transparent;
    outline:none !important; box-shadow:none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .storefront-primary-navigation.toggled .handheld-navigation a:hover,
  .storefront-primary-navigation.toggled .handheld-navigation a:focus,
  .storefront-primary-navigation.toggled .handheld-navigation a:active,
  .storefront-primary-navigation.toggled .handheld-navigation a:focus-visible,
  .main-navigation.toggled .handheld-navigation a:hover,
  .main-navigation.toggled .handheld-navigation a:focus,
  .main-navigation.toggled .handheld-navigation a:active,
  .main-navigation.toggled .handheld-navigation a:focus-visible{
    border-left-color:var(--accent) !important;
    background:transparent !important; color:#545454 !important;
    outline:none !important; box-shadow:none !important;
  }
  .storefront-primary-navigation.toggled .handheld-navigation ul ul li a,
  .main-navigation.toggled .handheld-navigation ul ul li a{
    padding-left:36px !important;
  }

  /* Handheld footerbar in jouw stijl (optioneel) */
  #page .storefront-handheld-footer-bar,
  #page .storefront-handheld-footer-bar ul,
  #page .storefront-handheld-footer-bar li,
  #page .storefront-handheld-footer-bar a{ background:var(--dark) !important; }
  #page .storefront-handheld-footer-bar{ border-top:2px solid var(--accent) !important; }
  #page .storefront-handheld-footer-bar a,
  #page .storefront-handheld-footer-bar a::before,
  #page .storefront-handheld-footer-bar .cart-contents,
  #page .storefront-handheld-footer-bar .cart-contents::before,
  #page .storefront-handheld-footer-bar .count{
    color:var(--light) !important; fill:var(--light) !important; stroke:var(--light) !important;
    border-color:var(--light) !important;
  }
}
/* =====================================
   VERBERG ACCOUNTKNOP IN MOBIELE HEADER
   ===================================== */
@media (max-width:768px){
  .header-account--desktop-only {
    display: none !important;
    visibility: hidden !important;
  }
}