/* Fox Art AI — redesign, globale stijl.
   Laadt alleen wanneer het redesign aanstaat (zie functions.php). */

:root{
  --fox-cream:#FAF6EF; --fox-ink:#141414; --fox-orange:#E08E00;
  --fox-yellow:#FFB703; --fox-border:#E4DCCB; --fox-muted:#6B6459; --fox-soft:#F5F1E8;
}

/* 'html body' (0-0-2) verslaat Blocksy's 'body' (0-0-1) zonder !important */
html { background: var(--fox-cream); }
html body { background-color: var(--fox-cream); }
html body { color: var(--fox-ink); font-family: 'Schibsted Grotesk', system-ui, sans-serif; }

/* ---- Marquee ---- */
.fox-marquee{ background:var(--fox-ink); color:var(--fox-cream); overflow:hidden; padding:16px 0;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:.02em; text-transform:uppercase; }
.fox-marquee__track{ display:flex; width:max-content; gap:48px; padding-left:48px;
  animation:fox-marquee 28s linear infinite; }
@keyframes fox-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .fox-marquee__track{animation:none} }

/* ---- Productkaarten in WooCommerce-grids ---- */
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-widget-woocommerce-archive-products ul.products li.product{
  background:#fff; border:1px solid var(--fox-border); border-radius:20px; padding:12px;
  transition:transform .2s ease, box-shadow .2s ease; }
.elementor-widget-woocommerce-products ul.products li.product:hover,
.elementor-widget-woocommerce-archive-products ul.products li.product:hover{
  transform:translateY(-4px); box-shadow:0 20px 40px rgba(20,20,20,.10); }
.elementor-widget-woocommerce-products ul.products li.product img,
.elementor-widget-woocommerce-archive-products ul.products li.product img{
  border-radius:12px; background:var(--fox-soft); }

/* ---- Knoppen ---- */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  border-radius:999px; background:var(--fox-ink); color:var(--fox-cream);
  font-weight:700; }
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover{ background:var(--fox-orange); color:var(--fox-cream); }

/* ---- Sticky header ---- */
#fox-navbar{ backdrop-filter:blur(14px); background:rgba(250,246,239,.92) !important; }

/* ---- Hero-collage: kaarten mogen buiten het gele vlak steken ---- */
#fox-hero-collage{ position:relative; overflow:visible; }

/* ---- Mobiel: de hero-collage werkt met absoluut geplaatste kaarten van
   260-300px. Die passen niet op een smal scherm, dus daar tonen we hem niet. ---- */
@media (max-width: 767px){
  #fox-hero-collage{ display:none !important; }
}
/* Tablet: iets compacter zodat de kaarten binnen het gele vlak blijven */
@media (min-width: 768px) and (max-width: 1024px){
  #fox-hero-collage{ min-height:520px; }
}

/* ---- Stapnummers (01/02/03) mogen niet inklappen in de flex-rij ---- */
.fox-step-num{ flex:0 0 auto; }
.fox-step-num .elementor-heading-title{ white-space:nowrap; min-width:38px; display:inline-block; }

/* ---- Mobiele header --------------------------------------------------
   Zonder deze regels brak de header op telefoons af naar vier regels
   (logo, hamburger, zoekbalk, winkelwagen) en vulde hij ~350px, bijna de
   halve schermhoogte. Nu: één rij, en zoeken zit achter een knop.

   Elementor zet flex-wrap en breedte via eigen custom properties
   (--flex-wrap-mobile, --width). Die overschrijven we hier, in plaats van
   met specificiteit tegen Elementors eigen regels te vechten. */

.fox-search-toggle{ display:none; }

@media (max-width:767px){

  /* Drie klassen: Elementor zet --width en --flex-grow via '.e-con.e-flex'. */
  .e-con.e-flex.fox-head-row{ position:relative; --flex-wrap-mobile:nowrap; }
  .e-con.e-flex.fox-head-row > .e-con-inner{ align-items:center; gap:8px; }

  /* Logo krijgt de resterende ruimte, de rest houdt zijn eigen breedte. */
  .e-con.e-flex.fox-head-brand{   order:1; --width:auto; --flex-grow:1; --flex-shrink:1; min-width:0; }
  .e-con.e-flex.fox-head-actions{ order:2; --width:auto; --flex-grow:0; --flex-shrink:0; }
  .e-con.e-flex.fox-head-nav{     order:3; --width:auto; --flex-grow:0; --flex-shrink:0; }

  .fox-head-actions > .e-con-inner,
  .fox-head-actions{ gap:6px; }

  /* Het logobeeld bevat de merknaam al; de losse tekst ernaast brak af tot
     'FOX ...' en kostte alleen maar breedte. */
  .e-con.e-flex.fox-head-brand{ --flex-wrap-mobile:nowrap; }
  .fox-head-wordmark{ display:none; }
  .fox-head-brand img{ max-height:36px; width:auto; }

  /* Zoekbalk uit de rij halen: hij klapt onder de header uit.
     'position:static' op de actiecontainer maakt de headerrij het ankerpunt,
     anders klapt het paneel uit binnen de breedte van de knoppen. */
  .e-con.e-flex.fox-head-actions{ position:static; }
  .fox-head-search .elementor-widget-container,
  .fox-head-search .elementor-search-form,
  .fox-head-search .elementor-search-form__container{ width:100%; }
  .fox-head-search{
    position:absolute; top:100%; left:0; right:0;
    width:auto; margin:0; padding:12px 20px 16px;
    background:var(--fox-cream);
    border-bottom:1px solid var(--fox-border);
    box-shadow:0 14px 28px rgba(20,20,20,.10);
    z-index:99;
    display:none;
  }
  body.fox-search-open .fox-head-search{ display:block; }

  /* De knop die de zoekbalk open- en dichtklapt. */
  .fox-search-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0;
    border:0; border-radius:999px;
    background:var(--fox-ink); color:var(--fox-cream);
    cursor:pointer; flex:0 0 auto;
  }
  .fox-search-toggle svg{ width:19px; height:19px; display:block; }
  .fox-search-toggle:focus-visible{ outline:2px solid var(--fox-orange); outline-offset:2px; }
  body.fox-search-open .fox-search-toggle{ background:var(--fox-orange); color:var(--fox-ink); }

  /* Winkelwagen en hamburger even compact als de zoekknop.
     Elementor geeft widgets in een container --container-widget-width:100%;
     daardoor claimde de hamburger 125px en de winkelwagen 91px. */
  /* De headerrij zet --container-widget-flex-grow:1; die erft door naar de
     kindcontainers, waardoor de hamburger 125px opeiste in plaats van 38. */
  .e-con.e-flex.fox-head-nav,
  .e-con.e-flex.fox-head-actions{ --container-widget-width:auto; --container-widget-flex-grow:0; }

  .e-con.e-flex.fox-head-nav > .elementor-widget,
  .e-con.e-flex.fox-head-actions > .elementor-widget{ width:auto; flex-grow:0; }

  .fox-head-nav .elementor-menu-toggle{ padding:8px; }

  /* Het uitklapmenu stond 'position:static' en telde daardoor 125px mee in de
     breedte van de header, ook als het dicht was. Absoluut positioneren haalt
     het uit de flow; 'position:static' op de container maakt de headerrij het
     ankerpunt, zodat het menu over de volle breedte uitklapt. */
  .e-con.e-flex.fox-head-nav,
  .fox-head-nav > .elementor-widget,
  .fox-head-nav .elementor-widget-container{ position:static; }
  .fox-head-nav .elementor-nav-menu--dropdown{
    position:absolute; top:100%; left:0; right:0; width:auto; z-index:98;
    /* Het menu duwde de pagina eerst omlaag; nu valt het eroverheen en heeft
       het dus een eigen ondergrond nodig. */
    background:var(--fox-cream);
    border-bottom:1px solid var(--fox-border);
    box-shadow:0 14px 28px rgba(20,20,20,.10);
  }

  /* Het bedrag naast het winkelwagen-icoon kost te veel breedte; het aantal
     in de badge blijft zichtbaar. */
  .fox-head-cart .elementor-menu-cart__toggle_button{ padding:8px 12px; }
  .fox-head-cart .elementor-menu-cart__toggle_button .elementor-button-text{ display:none; }

  /* Aankondigingsbalk: de badge mag niet afbreken tot 'SA / LE'. */
  .e-con.e-flex.fox-head-bar{ --flex-wrap-mobile:nowrap; --padding-top:10px; --padding-bottom:10px; }
  .fox-head-badge{ flex:0 0 auto; }
  .fox-head-badge .elementor-heading-title{ white-space:nowrap; }
  .fox-head-bar .elementor-heading-title{ font-size:13px; line-height:1.3; }
}