/*
Theme Name: Uw Winkeltje — Maatwerk (Blocksy child)
Theme URI: https://www.uwwinkeltje.nl
Description: Van-nul gecodeerd child theme voor Uw Winkeltje. Compleet design-systeem (typografie, kleuren, secties, hero, kaarten) bovenop Blocksy. Gebouwd door IT Live.
Author: IT Live
Template: blocksy
Version: 1.0.0
Text Domain: uwwinkeltje-child
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --uw-navy:#0b2545;        /* diepzee */
  --uw-blue:#2563eb;        /* merk */
  --uw-blue-d:#1e40af;      /* merk donker */
  --uw-sand:#e0a838;        /* warm accent (strand/zon) */
  --uw-sand-d:#c8901f;
  --uw-ink:#0f172a;         /* tekst donker */
  --uw-body:#475569;        /* body tekst */
  --uw-muted:#94a3b8;
  --uw-line:#e6ebf3;
  --uw-bg:#f5f8fd;          /* zachte pagina-achtergrond */
  --uw-card:#ffffff;
  --uw-radius:18px;
  --uw-radius-sm:12px;
  --uw-shadow:0 1px 3px rgba(15,23,42,.06);
  --uw-shadow-lg:0 18px 44px rgba(15,23,42,.12);
  --uw-maxw:1180px;
  --uw-space:clamp(48px,7vw,92px);
}

/* =========================================================
   BASIS / TYPOGRAFIE
   ========================================================= */
body{background:var(--uw-bg);color:var(--uw-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,.entry-title{color:var(--uw-ink);letter-spacing:-.02em}
.uw-container{max-width:var(--uw-maxw);margin-inline:auto;padding-inline:22px}

/* Sectiekop met accent-streep */
.uw-eyebrow{display:inline-block;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--uw-blue)}
.uw-sec-head{text-align:center;max-width:640px;margin:0 auto 34px}
.uw-sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:.35em 0 .3em;line-height:1.12}
.uw-sec-head p{color:var(--uw-body);font-size:1.02rem;margin:0}
.uw-sec-head .uw-rule{width:64px;height:3px;background:var(--uw-sand);border-radius:2px;margin:16px auto 0}

/* =========================================================
   HOMEPAGE: paginatitel verbergen (weg met "Home"/kale titel)
   ========================================================= */
body.home .page-title,
body.home .entry-header .entry-title,
body.home .ct-hero-section,
body.home header.entry-header{display:none!important}
/* Shop: laat de kale WP-titel weg, wij zetten eigen koppen */
body.post-type-archive-product .woocommerce-products-header__title{display:none!important}

/* =========================================================
   HERO  (target = body.home .uww-hero uit de bestaande homepage-content)
   ========================================================= */
body.home .uww-hero{position:relative;overflow:hidden;color:#fff;border-radius:26px;margin:8px 0 42px;
  padding:clamp(34px,5vw,60px);box-shadow:var(--uw-shadow-lg);min-height:430px;
  background:radial-gradient(1200px 380px at 82% -8%,rgba(37,99,235,.22),transparent 60%),
    linear-gradient(135deg,#0b2545 0%,#13315c 46%,#1e40af 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
body.home .uww-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.55;pointer-events:none}
body.home .uww-hero>h1,body.home .uww-hero>p,body.home .uww-hero>.btn,body.home .uww-hero>a{position:relative;z-index:1;max-width:min(56%,560px)}
body.home .uww-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.05rem);line-height:1.07;margin:0 0 .4em}
body.home .uww-hero p{color:#dbe7fb;font-size:clamp(1.02rem,1.55vw,1.16rem);line-height:1.55;margin:0 0 26px}
body.home .uww-hero p strong{color:#fff}
body.home .uww-hero .btn,body.home .uww-hero>a{display:inline-flex;align-items:center;gap:9px;width:fit-content;max-width:none;
  background:var(--uw-sand)!important;color:var(--uw-navy)!important;font-weight:800;border-radius:12px;
  padding:15px 28px!important;text-decoration:none;border:2px solid var(--uw-sand);transition:.16s;font-size:1.02rem}
body.home .uww-hero .btn:hover,body.home .uww-hero>a:hover{background:var(--uw-sand-d)!important;border-color:var(--uw-sand-d);transform:translateY(-2px)}
@media(min-width:901px){
  body.home .uww-hero{padding-right:46%;text-align:left;align-items:flex-start}
  body.home .uww-hero h1{max-width:12ch}
  body.home .uww-hero p{max-width:27em;margin-left:0;margin-right:auto;text-align:left}
  body.home .uww-hero .btn,body.home .uww-hero>a{margin-left:0}
}
/* fotocollage (via functions.php in de hero geïnjecteerd) — absoluut, verticaal gecentreerd rechts */
body.home .uww-hero-art{position:absolute;z-index:1;top:50%;right:clamp(24px,3.4vw,52px);transform:translateY(-50%);
  width:min(40vw,420px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:148px 148px;gap:14px}
body.home .uww-hero-art figure{margin:0;overflow:hidden;border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.34)}
body.home .uww-hero-art figure:nth-child(1){grid-row:1 / span 2}
body.home .uww-hero-art img{width:100%;height:100%;object-fit:cover;background:#fff;display:block}
body.home .uww-hero-badge{position:absolute;left:-14px;bottom:-14px;background:#fff;color:var(--uw-ink);border-radius:14px;padding:11px 15px;box-shadow:var(--uw-shadow-lg);display:flex;align-items:center;gap:10px;font-weight:800;z-index:2}
body.home .uww-hero-badge svg{color:var(--uw-sand-d)}
body.home .uww-hero-badge b{font-size:.98rem;line-height:1.05}
body.home .uww-hero-badge small{display:block;color:var(--uw-muted);font-weight:600;font-size:.72rem}

/* =========================================================
   USP-band
   ========================================================= */
.uw-usps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 var(--uw-space)}
.uw-usps .u{background:var(--uw-card);border:1px solid var(--uw-line);border-radius:var(--uw-radius-sm);padding:20px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--uw-shadow)}
.uw-usps .u svg{color:var(--uw-blue);flex-shrink:0;margin-top:2px}
.uw-usps .u b{display:block;color:var(--uw-ink);font-size:.98rem}
.uw-usps .u span{font-size:.85rem;color:var(--uw-body)}

/* =========================================================
   SECTIE-RITME + PRODUCTGRID (Woo shortcode op home)
   ========================================================= */
.uw-section{margin:0 0 var(--uw-space)}
.home .woocommerce ul.products{margin-top:0}
.uw-viewall{text-align:center;margin-top:30px}

/* =========================================================
   BEZOEK ONZE WINKEL
   ========================================================= */
.uw-visit{display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--uw-card);border:1px solid var(--uw-line);border-radius:var(--uw-radius);overflow:hidden;box-shadow:var(--uw-shadow);margin:0 0 var(--uw-space)}
.uw-visit .txt{padding:clamp(26px,4vw,46px)}
.uw-visit .txt h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .4em}
.uw-visit .txt p{margin:0 0 16px;line-height:1.6}
.uw-visit ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.uw-visit ul li{display:flex;gap:10px;align-items:center;font-weight:600;color:var(--uw-ink)}
.uw-visit ul li svg{color:var(--uw-blue)}
.uw-visit .map{background:linear-gradient(135deg,#13315c,#1e40af);min-height:280px;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:24px}
.uw-visit .map svg{opacity:.9}

@media(max-width:900px){
  body.home .uww-hero{min-height:0;padding-right:clamp(24px,5vw,40px)}
  body.home .uww-hero>h1,body.home .uww-hero>p,body.home .uww-hero>.btn,body.home .uww-hero>a{max-width:none}
  body.home .uww-hero-art{position:static;transform:none;width:100%;margin-top:26px;grid-template-rows:168px 168px}
  .uw-usps{grid-template-columns:repeat(2,1fr)}
  .uw-visit{grid-template-columns:1fr}
}
@media(max-width:560px){
  body.home .uww-hero{border-radius:18px}
  body.home .uww-hero-art{grid-template-rows:132px 132px}
  .uw-usps{grid-template-columns:1fr}
  body.home .uww-hero-badge{left:4px;bottom:4px;padding:9px 12px}
}

/* =========================================================
   ANIMATIES & INTERACTIES
   ========================================================= */
.uw-anim .uw-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.uw-anim .uw-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  body.home .uww-hero-art figure{animation:uwfloat 6.5s ease-in-out infinite}
  body.home .uww-hero-art figure:nth-child(2){animation-delay:-2.1s}
  body.home .uww-hero-art figure:nth-child(3){animation-delay:-4.2s}
  @keyframes uwfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}
/* zachte hover-lift op alles wat klikbaar-kaartachtig is */
.itlpe-cats a,.uw-shopcats a,.wc-block-product-categories li a{transition:transform .16s ease,box-shadow .16s ease}
/* back-to-top */
.uw-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:0;background:var(--uw-blue);color:#fff;box-shadow:0 8px 22px rgba(37,99,235,.42);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:.25s;z-index:120}
.uw-top.show{opacity:1;transform:none;pointer-events:auto}
.uw-top:hover{background:var(--uw-blue-d);transform:translateY(-3px)}

/* =========================================================
   WINKEL / PRODUCT-ARCHIEF (template-gerenderd, geen content-botsing)
   ========================================================= */
.woocommerce .woocommerce-result-count{color:var(--uw-body);font-weight:600;margin:4px 0 18px}
.woocommerce .woocommerce-ordering select,.woocommerce select.orderby{border:1px solid var(--uw-line);border-radius:10px;padding:10px 16px;background:#fff;font-weight:600;color:var(--uw-ink);cursor:pointer}
.woocommerce nav.woocommerce-pagination ul{border:0!important;display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:34px}
.woocommerce nav.woocommerce-pagination ul li{border:0!important;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--uw-line)!important;border-radius:10px;min-width:44px;height:44px;line-height:44px;padding:0;background:#fff;font-weight:700;transition:.15s}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:var(--uw-blue)!important;color:var(--uw-blue)}
/* categorie-chip navigatie op de shop (via functions.php) */
.uw-shopcats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.uw-shopcats a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--uw-line);border-radius:999px;padding:9px 16px;text-decoration:none;color:var(--uw-ink);font-weight:600;box-shadow:var(--uw-shadow);font-size:.92rem}
.uw-shopcats a:hover,.uw-shopcats a.is-active{border-color:var(--uw-blue);color:var(--uw-blue);transform:translateY(-2px)}
.uw-shopcats a svg{color:var(--uw-blue)}
.uw-shopcats a .c{color:var(--uw-muted);font-weight:600;font-size:.8rem}
/* WooCommerce categorie-blok (op /winkel/) als nette kaarten */
.wc-block-product-categories{list-style:none;padding:0}
.wc-block-product-categories li a{font-weight:700;color:var(--uw-ink);text-decoration:none}
.wc-block-product-categories li a:hover{color:var(--uw-blue)}
/* archief-intro kop */
.uw-archhead{margin:2px 0 20px}
.uw-archhead h1,.woocommerce-products-header .page-title{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--uw-ink);margin:0 0 6px}
.uw-archhead p{color:var(--uw-body);margin:0;max-width:60ch}

/* =========================================================
   RESPONSIVE — tablet (601–1024) + fijnslijpen
   ========================================================= */
@media(min-width:601px) and (max-width:1024px){
  .uww-hero h1{font-size:clamp(1.7rem,4.6vw,2.4rem)}
  .uw-usps{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products{gap:14px}
}
@media(max-width:600px){
  .uw-top{right:14px;bottom:14px;width:42px;height:42px}
  .woocommerce .woocommerce-ordering{width:100%}
  .woocommerce .woocommerce-ordering select{width:100%}
  .uw-shopcats{gap:8px}
  .uw-shopcats a{padding:8px 13px;font-size:.86rem}
}

/* =========================================================
   ONTDUBBELEN: witte itlive-trustbar verbergen — de blauwe .uww-topbar
   (site-breed in de header) dekt dit al. Voorkomt dubbele trust-balk.
   ========================================================= */
.itlive-trustbar{display:none!important}

/* =========================================================
   LOGO — volledige versie met tagline, genoeg hoogte om leesbaar te zijn
   ========================================================= */
.ct-header .site-logo-container img,.ct-header [data-id=logo] .site-logo-container img,body .site-logo-container img,body .ct-logo-container img,body .site-logo img{max-height:90px!important;width:auto!important;height:auto!important;object-fit:contain!important}
.ct-header .site-logo-container,.site-logo-container{--logo-max-height:90px!important}
/* Mobiel: logo compacter + logo en menu-knop netjes verticaal op 1 lijn */
@media(max-width:782px){
  .ct-header .site-logo-container img.default-logo,.ct-header .site-logo-container img,body .ct-header img.default-logo,body .site-logo-container img{max-height:60px!important;height:auto!important;width:auto!important}
  [data-device] .site-logo-container,.ct-header .site-logo-container,.site-logo-container{--logo-max-height:60px!important}
  .ct-header [data-row],.ct-header [data-row] > .ct-container,.ct-header [data-row] [data-column]{align-items:center!important}
  .ct-header [data-id=trigger],.ct-header [data-id=trigger] button{align-self:center!important;margin-top:0!important;margin-bottom:0!important}
}

/* =========================================================
   MOBIEL OFFCANVAS-MENU opschonen: geen dubbel logo, nette sluitknop
   ========================================================= */
@media(max-width:1024px){
  /* geen dubbel logo in het paneel */
  .ct-panel.ct-header [data-id="offcanvas-logo"],
  .ct-panel.ct-header .site-logo-container{display:none!important}
  /* paneel = volledig schermdekkende, ONDOORZICHTIGE overlay (geen hero die erdoorheen schemert) */
  .ct-panel.ct-header.active{position:fixed!important;inset:0!important;height:100dvh!important;max-height:100dvh!important;background:#fff!important;overflow-y:auto!important;z-index:9999}
  .ct-panel.ct-header .ct-panel-inner,
  .ct-panel.ct-header .ct-panel-content,
  .ct-panel.ct-header .ct-panel-content-inner{background:#fff!important;min-height:100%}
  /* EEN sluitknop: verberg de dubbele blauwe trigger zodra het paneel open is */
  body:has(.ct-panel.ct-header.active) .ct-header-trigger{opacity:0!important;pointer-events:none!important}
  .ct-panel.ct-header .ct-panel-actions{justify-content:flex-end;align-items:center}
  /* nette ronde blauwe sluitknop */
  .ct-panel.ct-header .ct-toggle-close{margin-left:auto;background:var(--uw-blue)!important;border:0!important;border-radius:50%!important;width:44px!important;height:44px!important;color:#fff!important}
  .ct-panel.ct-header .ct-toggle-close svg,
  .ct-panel.ct-header .ct-toggle-close path{color:#fff!important;stroke:#fff!important}
  /* leesbare, nette nav-links */
  .ct-panel.ct-header .menu-item > a,
  .ct-panel.ct-header nav a{color:var(--uw-ink)!important;font-weight:600}
}