/*
Theme Name: House of Gadgets
Author: House of Gadgets
Description: Accessoirewinkel in inkt, warm wit en signaaloranje, met eigen campagnebeelden.
Version: 0.8.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: house-of-gadets
*/

/* ---------- Fonts and tokens ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --ink:#141518;--ink-2:#2a2c31;--ink-3:#3b3e45;
  --paper:#fff;--cloud:#f4f3f0;--sand:#efeae2;--cream:#f5e8d9;
  --line:#e6e3de;--line-strong:#cfcac2;
  --muted:#5b5f66;--subtle:#7d8188;
  --accent:#ff5b1f;--accent-ink:#c2410c;--accent-soft:#ffe8dd;--accent-deep:#d2430a;--accent-deeper:#b5390a;
  --tint-peach:#fbe4d7;--tint-lilac:#ebe5f6;--tint-sky:#dfe9f6;--tint-mint:#dcefe4;
  --tint-butter:#f8eecb;--tint-sand:#eee7dc;--tint-sage:#e2ebd9;--tint-rose:#f6dfe5;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --body:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;
  --shell:1320px;--gutter:40px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-pop:0 24px 60px -18px rgba(20,21,24,.28),0 2px 8px rgba(20,21,24,.06);
  --header-h:136px;
  /* Names used by the WooCommerce stylesheet. */
  --green:var(--ink);--green-hover:var(--ink-2);--sage:var(--cloud);--surface:var(--cloud);--white:#fff;--radius:var(--r-md);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.nav-locked{overflow:hidden}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,input,select,textarea,summary{touch-action:manipulation}
h1,h2,h3,h4{margin:0 0 16px;font-family:var(--display);font-weight:750;line-height:1.1;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
h1{font-size:44px}h2{font-size:32px}h3{font-size:20px}
p{margin:0 0 1em;text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.site-shell{width:min(var(--shell),calc(100% - 2*var(--gutter)));margin-inline:auto}
.icon{display:block;width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:10000;top:-100px;left:16px;padding:12px 20px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px;color:#fff}

/* ---------- Buttons and links ---------- */
.btn,.button,.button-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1.5px solid transparent;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:700 16px/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn .icon,.button .icon,.button-link .icon{width:18px;height:18px;stroke-width:2;transition:transform .25s var(--ease)}
.btn:hover .icon,.button:hover .icon{transform:translateX(3px)}
.btn-primary:hover,.button:hover,.button-link:hover{background:var(--ink-2);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--accent-deep);color:#fff}
.link-arrow,.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font:650 15px/1.2 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.link-arrow .icon,.text-link .icon{width:18px;height:18px;stroke-width:2;transition:transform .25s var(--ease)}
.link-arrow:hover,.text-link:hover{text-decoration:underline;text-decoration-thickness:1.5px}
.link-arrow:hover .icon,.text-link:hover .icon{transform:translateX(3px)}
.eyebrow{margin:0 0 12px;color:var(--accent-ink);font:650 13px/1.4 var(--display);letter-spacing:.01em}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink);color:#e7e5e1;font-size:13px;line-height:1.3}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:38px}
.usp-list{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.usp-list li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.usp-list .icon{width:15px;height:15px;color:var(--accent);stroke-width:2.6}
.topbar-meta{display:flex;align-items:center;gap:22px;white-space:nowrap}
.demo-status{color:#a9a6a0}
.topbar a{display:inline-flex;align-items:center;min-height:38px;color:#fff;text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar :focus-visible{outline-color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease)}
.site-header.is-scrolled{box-shadow:0 10px 30px -22px rgba(20,21,24,.45)}
.header-main{display:flex;align-items:center;gap:40px;min-height:84px}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
/* Logo "Pasvorm" (29-10-2026): one SVG with the mark and the wordmark, in the site's own Bricolage. */
.brand-logo{display:block;width:auto;height:40px;aspect-ratio:309/48;overflow:visible}
.brand-accent{fill:var(--accent)}
.brand-type{fill:currentColor;font-family:var(--display);font-weight:720;font-optical-sizing:none;font-kerning:none}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.header-action{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink);font:600 15px/1 var(--display);letter-spacing:-.01em;text-decoration:none;transition:background-color .2s var(--ease)}
.header-action:hover{background:var(--cloud);color:var(--ink)}
.header-icon{position:relative;display:grid;place-items:center}
.header-icon .icon{width:24px;height:24px}
.cart-count{position:absolute;top:-7px;right:-9px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border:2px solid #fff;border-radius:var(--r-pill);background:var(--accent-deep);color:#fff;font:700 11px/1 var(--body)}
.menu-toggle{display:none;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font:650 15px/1 var(--display)}
.menu-toggle .icon{width:24px;height:24px}

/* Category navigation (desktop: bar with mega panels). */
.primary-nav{border-top:1px solid var(--line)}
.drawer-head,.drawer-links{display:none}
.nav-inner{position:relative;display:flex;align-items:center;gap:12px;min-height:52px}
.nav-categories{display:flex;align-items:stretch;gap:2px;margin:0 0 0 -14px;padding:0;list-style:none}
.nav-category{display:flex}
.nav-thumb{display:none}
.nav-direct,.nav-item>summary{position:relative;display:flex;align-items:center;gap:6px;height:52px;padding:0 14px;color:var(--ink);font:600 15px/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;list-style:none;cursor:pointer}
.nav-item>summary::-webkit-details-marker{display:none}
.nav-direct::after,.nav-item>summary::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-direct:hover::after,.nav-item>summary:hover::after,.nav-item[open]>summary::after,.nav-category.is-current .nav-direct::after,.nav-category.is-current summary::after{transform:none}
.nav-chevron{width:16px!important;height:16px!important;stroke-width:2!important;color:var(--subtle);transition:transform .2s var(--ease)}
.nav-item[open] .nav-chevron{transform:rotate(180deg);color:var(--ink)}
.nav-aside{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;color:var(--ink);font:600 14px/1 var(--display);text-decoration:none;white-space:nowrap}
.nav-aside .icon{width:18px;height:18px;color:var(--accent-ink)}
.nav-aside:hover{text-decoration:underline}

.mega{position:absolute;top:100%;left:0;right:0;z-index:150;display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,.9fr) minmax(260px,1.15fr);gap:20px;padding:28px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:#fff;box-shadow:var(--shadow-pop)}
.mega-links ul{margin:0;padding:6px 0 0;list-style:none}
.mega-overview{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 4px 12px;border-bottom:1px solid var(--line);color:var(--ink);font:750 20px/1.15 var(--display);letter-spacing:-.02em;text-decoration:none}
.mega-overview .icon{width:20px;height:20px;stroke-width:2;transition:transform .25s var(--ease)}
.mega-overview:hover .icon{transform:translateX(4px)}
.mega-links li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px;text-decoration:none}
.mega-links li a:hover,.mega-links li a[aria-current=page]{color:var(--accent-ink)}
.mega-count{min-width:26px;padding:3px 8px;border-radius:var(--r-pill);background:var(--cloud);color:var(--muted);font-size:12px;font-weight:600;text-align:center}
.mega-feature{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto auto 1fr;column-gap:16px;align-content:start;padding:18px;border-radius:var(--r-md);background:var(--cloud);color:var(--ink);text-decoration:none}
.mega-feature-photo{grid-row:1/-1;display:grid;place-items:center;height:120px}
.mega-feature-photo img{max-width:100%;max-height:112px;width:auto;height:auto;filter:drop-shadow(0 10px 12px rgba(20,21,24,.14));transition:transform .3s var(--ease)}
.mega-feature:hover img{transform:translateY(-4px)}
.mega-feature-label{color:var(--accent-ink);font:650 12px/1.4 var(--display)}
.mega-feature-name{margin-top:2px;font:700 17px/1.25 var(--display);letter-spacing:-.015em}
.mega-feature-fact{margin-top:4px;color:var(--muted);font-size:13px}
.mega-feature-price{align-self:end;margin-top:10px;font:750 18px/1 var(--display)}
.mega-feature-price del{margin-right:6px;color:var(--muted);font-weight:500;font-size:14px}
.mega-feature-price ins{text-decoration:none}
.mega-promo{position:relative;display:block;min-height:180px;overflow:hidden;border-radius:var(--r-md);color:#fff;text-decoration:none;isolation:isolate}
.mega-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s var(--ease)}
.mega-promo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,21,24,0) 35%,rgba(20,21,24,.72))}
.mega-promo:hover img{transform:scale(1.04)}
.mega-promo-copy{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:2px}
.mega-promo-copy strong{font:750 19px/1.15 var(--display);letter-spacing:-.02em}
.mega-promo-copy span{font-size:14px;color:#f1eee9}
.mega:not(:has(.mega-promo)){grid-template-columns:minmax(260px,1fr) minmax(260px,1fr)}

/* ---------- Search ---------- */
.product-search{position:relative;display:flex;align-items:center;flex:1;min-width:0;max-width:640px;min-height:50px;padding-left:20px;border:1.5px solid transparent;border-radius:var(--r-pill);background:var(--cloud);transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.product-search:hover{border-color:var(--line-strong)}
.product-search:focus-within{border-color:var(--ink);background:#fff}
.product-search input[type=search]{flex:1;min-width:0;height:47px;padding:0 8px 0 0;border:0;background:transparent;color:var(--ink);font-size:15px;appearance:none}
.product-search input[type=search]:focus{outline:none}
.product-search input::placeholder{color:#6f737a;opacity:1}
.product-search input::-webkit-search-cancel-button{display:none}
.product-search button[type=submit]{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;margin-right:1px;border:0;border-radius:50%;background:var(--ink);color:#fff;transition:background-color .2s var(--ease)}
.product-search button[type=submit]:hover{background:var(--accent-deep);color:#fff}
.product-search button[type=submit] .icon{width:19px;height:19px;stroke-width:2.2}

/* ---------- Hero ---------- */
/* Hero (since 29-10-2026): one continuous photo with the text on it (Abdel: no photo on half the hero). Two hands
   pass a phone in a green case, "Alles binnen handbereik". Ink text on the plain petrol at the top left: 5.2:1. */
.hero{position:relative;display:flex;align-items:flex-start;min-height:600px;margin-top:20px;overflow:hidden;border-radius:var(--r-lg);background:#5b9487;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-1}
/* Keeps the hands in the lower third of the hero at every width, under the text. */
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 66%}
.hero-content{padding:64px 40px 64px 64px}
.hero h1{max-width:560px;margin:0;font-size:clamp(46px,5.3vw,78px);font-weight:800;line-height:.96;letter-spacing:-.04em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:34px}
.hero-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font:650 16px/1.2 var(--display);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.hero-link:hover{color:var(--ink);text-decoration-thickness:2.5px}
/* Hero with a film (test, 29-10-2026; inc/hero.php). White text on a dark fade over the left of the film, an orange
   button into the shop and a white one to the deals right under the hero. On a computer the text sits in the middle
   of the height, on the left: most attention goes to the left half (NN/g), the film's subjects are framed in the
   middle and on the right, and on a laptop of 768 high the buttons stay in view (at the bottom they would not).
   On phones the content is centered in the hero.
   The heading always takes two lines, so it stays on the dark part (one line ran into white shots). */
.hero--film{align-items:center;background:#26282d}
.hero--film .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,16,.7) 0%,rgba(12,13,16,.5) 40%,rgba(12,13,16,0) 70%)}
.hero--film video{display:block;width:100%;height:100%;object-fit:cover}
.hero--film h1{max-width:7.2em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero--film :focus-visible{outline-color:#fff}
.hero--film .hero-actions{gap:12px;margin-top:32px}
.hero--film .btn-light:hover{background:var(--cloud);color:var(--ink)}
/* Orange buttons carry white letters on the deeper orange of the stickers: 4.6:1 (white on #FF5B1F is only 3.1:1). */
.btn-accent{background:var(--accent-deep);color:#fff}
.btn-accent:hover{background:var(--accent-deeper);color:#fff}

/* ---------- Sections ---------- */
.section{padding-top:72px}
.section-tight{padding-top:40px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.section-head h2{margin:0;font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.02}

/* Category tiles: name over the photo, real product cutouts. */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.cat-tile{position:relative;display:block;aspect-ratio:1.42;overflow:hidden;border-radius:var(--r-md);background:var(--tint,var(--cloud));color:var(--ink);text-decoration:none;isolation:isolate}
.tint-peach{--tint:var(--tint-peach)}.tint-lilac{--tint:var(--tint-lilac)}.tint-sky{--tint:var(--tint-sky)}.tint-mint{--tint:var(--tint-mint)}
.tint-butter{--tint:var(--tint-butter)}.tint-sand{--tint:var(--tint-sand)}.tint-sage{--tint:var(--tint-sage)}.tint-rose{--tint:var(--tint-rose)}
.cat-tile-name{position:absolute;left:22px;top:20px;right:22px;z-index:2;font:750 22px/1.08 var(--display);letter-spacing:-.025em}
.cat-tile-media{position:absolute;right:6%;bottom:9%;display:flex;align-items:flex-end;justify-content:flex-end;width:58%;height:74%}
/* Cutouts carry their own soft shadow (make-cutouts-v2.py), so colours stay true on the tint. */
.cat-tile-media img{width:auto;height:auto;max-width:100%;max-height:100%;transition:transform .45s var(--ease)}
.cat-tile:hover .cat-tile-media img{transform:translateY(-6px) rotate(-1.5deg)}
/* Dark products: multiply removes light packshot edges, but only on neutral surfaces.
   On the tinted tiles it would shift product colours and let overlapping cases show through. */
.mega-feature-photo img.cutout-dark{mix-blend-mode:multiply}
.cat-tile-hoesjes .cat-tile-media img{max-height:100%;max-width:56%}
.cat-tile-hoesjes .cat-tile-media img+img{margin-left:-18%;transform:translateY(8%) rotate(8deg)}
.cat-tile-hoesjes:hover .cat-tile-media img+img{transform:translateY(4%) rotate(10deg)}
.cat-tile-kabels .cat-tile-media{height:84%}
.cat-tile-screenprotectors .cat-tile-media{height:66%}
.cat-tile-gadgets .cat-tile-media,.cat-tile-audio .cat-tile-media,.cat-tile-huisdieren .cat-tile-media{width:66%;right:4%}
.cat-tile-smart-home .cat-tile-media img{max-height:84%}

/* Assurance tiles: icon, title, one line. */
.assurances{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md);list-style:none}
.assurance{display:flex;align-items:flex-start;gap:14px;padding:24px}
.assurance+.assurance{border-left:1px solid var(--line)}
.assurance .icon{width:26px;height:26px;margin-top:1px;color:var(--accent-ink)}
.assurance h3{margin:0;font:700 16px/1.3 var(--display);letter-spacing:-.01em}
.assurance p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

/* Campaign photo cards. */
.campaign-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.campaign-card{position:relative;display:flex;align-items:center;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-lg);background:var(--sand);color:var(--ink);text-decoration:none;isolation:isolate}
.campaign-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.campaign-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(247,240,231,.95) 0%,rgba(247,240,231,.82) 30%,rgba(247,240,231,0) 60%)}
.campaign-card:hover img{transform:scale(1.035)}
.campaign-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:52%;padding:40px}
.campaign-copy h2,.campaign-copy h3{margin:0;font-size:clamp(28px,2.6vw,40px);font-weight:800;line-height:1;letter-spacing:-.04em}
.campaign-text{margin-top:12px;color:#4a463f;font-size:16px;line-height:1.5}
.campaign-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin-top:22px;padding:0 20px;border-radius:var(--r-pill);background:var(--accent-deep);color:#fff;font:700 15px/1 var(--display);transition:background-color .2s var(--ease)}
.campaign-cta .icon{width:17px;height:17px;stroke-width:2;transition:transform .25s var(--ease)}
.campaign-card:hover .campaign-cta{background:var(--accent-deeper)}
.campaign-card:hover .campaign-cta .icon{transform:translateX(3px)}
.campaign-audio::before{background:linear-gradient(90deg,rgba(247,240,231,.96) 0%,rgba(247,240,231,.86) 34%,rgba(247,240,231,0) 64%)}


main#main-content{padding-bottom:96px}

/* ---------- Content pages ---------- */
.content-main{padding-top:28px;padding-bottom:72px;min-height:55vh}
.page-title,.woocommerce-products-header__title{font-size:40px;font-weight:800;letter-spacing:-.035em}
.entry-content{max-width:900px;font-size:16px}
.entry-content:has(.woocommerce),.entry-content:has(.wc-block-cart),.entry-content:has(.wc-block-checkout){max-width:none}
.entry-content h2{font-size:26px;margin-top:32px}
.entry-content p{color:var(--muted)}
.category-intro{max-width:620px;margin-bottom:30px;color:var(--muted)}
.category-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.category-group{padding:26px;border:1px solid var(--line);border-radius:var(--r-md)}
.category-group h2{margin-bottom:12px;font-size:22px}
.category-group h2 a{color:var(--ink);text-decoration:none}
.category-group h2 a:hover{text-decoration:underline}
.category-group ul{margin:0;padding:0;list-style:none}
.category-group>ul>li+li{border-top:1px solid var(--line)}
.category-group li>a{display:flex;align-items:center;min-height:44px;color:var(--muted);font-size:15px;text-decoration:none}
.category-group li>a:hover{color:var(--ink);text-decoration:underline}
.category-group ul ul{margin:0 0 12px 3px;padding-left:14px;border-left:1px solid var(--line)}
.category-group ul ul a{min-height:36px;font-size:14px}
.category-filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
.category-filters>a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line-strong);border-radius:var(--r-pill);color:var(--ink);font:600 14px/1 var(--display);text-decoration:none;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.category-filters>a:hover{border-color:var(--ink)}
.category-filters>a[aria-current=page]{border-color:var(--ink);background:var(--ink);color:#fff}
.subcategory-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:-8px 0 28px;font-size:14px}
.subcategory-links>span{color:var(--muted)}
.subcategory-links a{display:flex;align-items:center;min-height:40px}
.breadcrumb-separator{margin:0 10px;color:#b3b0aa}
.empty-state{max-width:620px;margin:45px auto 65px;padding:36px 20px;text-align:center}
.empty-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 25px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
.empty-state h2{font-size:28px}
.empty-state p{margin-bottom:24px;color:var(--muted);font-size:15px}
.page-intro{margin-bottom:40px;padding:36px 0 44px;border-bottom:1px solid var(--line)}
.page-intro h1{margin-bottom:16px;font-size:clamp(36px,4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1}
.page-intro>p:last-child{margin:0;color:var(--muted);font-size:17px}
.service-layout{display:grid;grid-template-columns:260px 1fr;gap:64px}
.service-nav{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;align-items:flex-start;align-self:start}
.service-nav a{display:flex;align-items:center;min-height:46px;color:var(--muted);font:600 15px/1.3 var(--display);text-decoration:none}
.service-nav a:hover{color:var(--ink);text-decoration:underline}
.faq-groups{max-width:800px}
.faq-groups section{margin-bottom:44px;scroll-margin-top:calc(var(--header-h) + 24px)}
.faq-groups h2{margin-bottom:18px;font-size:26px}
.faq-groups details{border-top:1px solid var(--line)}
.faq-groups details:last-child{border-bottom:1px solid var(--line)}
.faq-groups summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;font:650 16px/1.4 var(--display);list-style:none;cursor:pointer}
.faq-groups summary::-webkit-details-marker{display:none}
.faq-groups summary::after{content:"+";color:var(--accent-ink);font:400 24px/1 var(--body)}
.faq-groups details[open] summary::after{content:"−"}
.faq-groups details p{margin:0 0 24px;padding-right:35px;color:var(--muted);font-size:15px;line-height:1.75}
.about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:24px 0 56px}
.about-hero h1{margin:0 0 20px;font-size:clamp(38px,4.4vw,62px);font-weight:800;line-height:1;letter-spacing:-.04em}
.about-hero-copy p{max-width:520px;margin:0 0 28px;color:#4a463f;font-size:18px;line-height:1.6}
.about-hero-media{overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;background:var(--sand)}
.about-hero-media img{width:100%;height:100%;object-fit:cover}
.about-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:48px 0;border-top:1px solid var(--line)}
.about-blocks h2{margin:0 0 12px;font-size:24px;font-weight:800;letter-spacing:-.025em}
.about-blocks p{margin:0;color:var(--muted);font-size:16px;line-height:1.65}
.about-demo-note{margin:8px 0 0;padding:14px 16px;border-radius:var(--r-sm);background:var(--cloud);color:var(--muted);font-size:14px}
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:30px 0 45px}
.about-intro h1{font-size:clamp(38px,4.4vw,56px);font-weight:800;line-height:1;letter-spacing:-.04em}
.about-intro p:not(.eyebrow){max-width:490px;color:var(--muted);font-size:16px}
.about-intro .button{margin-top:10px}
.about-photo{display:grid;place-items:center;border-radius:var(--r-lg);background:var(--cloud)}
.about-photo img{width:90%;padding:30px;mix-blend-mode:multiply}
.about-detail{max-width:650px;margin:20px auto 30px;text-align:center}
.about-detail h2{font-size:30px}
.about-detail p{color:var(--muted);font-size:16px}

/* ---------- Footer ---------- */
.site-footer{padding-top:64px;background:var(--ink);color:#d9d6d1}
.footer-grid{display:grid;grid-template-columns:1.15fr repeat(4,minmax(0,1fr));gap:40px;padding-bottom:48px}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.site-footer .brand,.site-footer .brand:hover{color:#fff}
.footer-about{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font:650 15px/1 var(--display);text-decoration:none}
.footer-about .icon{width:17px;height:17px;stroke-width:2}
.footer-about:hover{color:#fff;text-decoration:underline}
.footer-column h2{margin:8px 0 14px;color:#fff;font:700 15px/1.3 var(--display);letter-spacing:0}
.footer-column ul{margin:0;padding:0;list-style:none}
.footer-column a{display:inline-flex;align-items:center;min-height:44px;color:#bdb9b3;font-size:15px;text-decoration:none}
.footer-column a:hover{color:#fff;text-decoration:underline}
/* Quality mark, reviews and payment methods (29-10-2026). The two trust tiles are placeholders until the real logo and
   widget exist (hog_trust_marks in functions.php); the payment logos sit on white tiles of one size. */
.footer-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:28px 0 40px;border-top:1px solid #33363c}
.trust-marks,.pay-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.trust-marks{gap:12px}
.trust-mark{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border-radius:10px;background:#fff;color:var(--ink);font:700 13px/1.15 var(--display);letter-spacing:-.005em}
.trust-mark .icon{width:22px;height:22px;stroke-width:2}
.pay{display:grid;place-items:center;width:56px;height:36px;overflow:hidden;border-radius:6px;background:#fff}
.pay img{display:block;height:auto}
.pay--amex img{width:100%;height:100%;object-fit:cover}
.pay--klarna{background:#ffa8cd}
/* Decorative wordmark (a logotype, exempt from WCAG 1.4.3, hidden from screen readers): the logo's own letters,
   as wide as the page. */
.footer-wordmark{margin:0 0 28px;color:var(--ink-3);user-select:none}
.footer-wordmark svg{display:block;width:100%;height:auto;overflow:visible}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;padding:22px 0 28px;border-top:1px solid #33363c;color:#a19e98;font-size:13px;line-height:1.6}
.hog-store .site-footer :focus-visible{outline-color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .header-main{gap:28px}
  .header-label{display:none}
  .header-action{padding:0 10px}
  .nav-direct,.nav-item>summary{padding:0 11px;font-size:14.5px}
  .nav-direct::after,.nav-item>summary::after{left:11px;right:11px}
  .nav-categories{margin-left:-11px}
  .usp-list li:nth-child(3){display:none}
  .hero-content{padding-left:52px}
  .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 32px}
}

/* Tablet and phone: menu button opens a drawer with the same category list. */
@media (max-width:1099px){
  :root{--header-h:84px}
  .menu-toggle{display:inline-flex}
  .header-main{gap:20px}
  .nav-aside{display:none}
  .js-nav-enabled .primary-nav{position:fixed;top:0;bottom:0;left:0;z-index:300;width:min(420px,88vw);overflow-y:auto;overscroll-behavior:contain;border:0;background:#fff;box-shadow:var(--shadow-pop);transform:translateX(-102%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
  .js-nav-enabled .primary-nav.is-open{transform:none;visibility:visible}
  .nav-backdrop{position:fixed;inset:0;z-index:250;background:rgba(20,21,24,.45)}
  .js-nav-enabled .drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 12px 0 20px;border-bottom:1px solid var(--line);background:#fff}
  .drawer-title{font:750 20px/1 var(--display);letter-spacing:-.02em}
  .drawer-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--cloud)}
  .drawer-close .icon{width:22px;height:22px}
  .nav-inner{display:block;width:auto;padding:8px 12px 28px;min-height:0}
  .nav-categories{display:block;margin:0}
  .nav-category{display:block;border-bottom:1px solid var(--line)}
  .nav-thumb{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:14px;background:var(--tint,var(--cloud))}
  .nav-thumb img{width:auto;height:auto;max-width:36px;max-height:38px}
  .nav-direct,.nav-item>summary{gap:14px;height:auto;min-height:64px;padding:8px;font-size:17px}
  .nav-direct::after,.nav-item>summary::after{display:none}
  .nav-label{flex:1}
  .nav-chevron{width:20px!important;height:20px!important}
  .mega{position:static;display:block;padding:0 8px 14px 70px;border:0;border-radius:0;background:none;box-shadow:none}
  .mega-feature,.mega-promo{display:none}
  .mega-overview{min-height:44px;padding:0;border:0;font:650 15px/1.2 var(--display)}
  .mega-overview .icon{width:16px;height:16px}
  .mega-links ul{padding:0}
  .mega-links li a{min-height:44px;padding:0;border:0;font-size:15px}
  .drawer-links{display:flex;flex-direction:column;margin-top:18px;padding:10px 8px 0}
  .drawer-links a{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--ink);font:600 15px/1 var(--display);text-decoration:none}
  .drawer-links .icon{width:20px;height:20px;color:var(--muted)}
  .drawer-note{margin:16px 0 0;padding:14px 16px;border-radius:var(--r-sm);background:var(--cloud);color:var(--muted);font-size:13px;line-height:1.5}
  .hero{min-height:520px}
  .hero-content{padding:48px 32px 48px 40px}
  .hero h1{font-size:clamp(42px,5.6vw,60px)}
  .cat-grid{gap:12px}
  .cat-tile-name{font-size:19px;left:18px;top:16px}
  .assurances{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assurance:nth-child(3){border-left:0}
  .assurance:nth-child(n+3){border-top:1px solid var(--line)}
  .campaign-copy{padding:28px;max-width:58%}
}
@media (max-width:1099px) and (min-width:761px){
  .product-search{max-width:none}
  .usp-list li:nth-child(2){display:none}
}

@media (max-width:760px){
  :root{--gutter:16px;--header-h:124px}
  body{font-size:15px}
  .topbar-inner{justify-content:center;min-height:32px}
  .topbar-meta,.usp-list li:not(:first-child){display:none}
  .usp-list{display:flex;font-size:12px}
  .header-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 8px;min-height:0;padding:10px 0 12px}
  .menu-toggle{grid-column:1;justify-self:start;min-width:48px;min-height:48px;margin-left:-4px}
  .menu-toggle .icon{width:30px;height:30px;stroke-width:2}
  .menu-toggle span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .js-nav-enabled .primary-nav{width:min(420px,92vw)}
  .js-nav-enabled .drawer-head{min-height:72px}
  .drawer-title{font-size:24px}
  .drawer-close{width:48px;height:48px}
  .drawer-close .icon{width:26px;height:26px}
  .nav-thumb{width:56px;height:56px}
  .nav-thumb img{max-width:42px;max-height:44px}
  .nav-direct,.nav-item>summary{min-height:80px;font-size:20px;line-height:1.25;white-space:normal}
  .nav-label{min-width:0;overflow-wrap:anywhere}
  .nav-chevron{flex-shrink:0}
  .mega{padding-left:78px}
  .mega-overview,.mega-links li a{min-height:52px;padding-block:10px;font-size:18px;line-height:1.4}
  .drawer-links a{min-height:56px;font-size:18px;line-height:1.4}
  .drawer-links .icon{width:24px;height:24px;flex-shrink:0}
  .brand{grid-column:2;justify-self:center;gap:8px}
  .brand-logo{height:clamp(29px,6.8vw,36px)}
  .header-actions{grid-column:3;justify-self:end;gap:0;margin:0 -8px 0 0}
  .header-action{min-width:44px;min-height:48px;justify-content:center;padding:0 8px}
  .header-icon .icon{width:28px;height:28px}
  .product-search{grid-column:1/-1;grid-row:2;max-width:none;min-height:clamp(48px,10.4vw,56px);padding-left:16px}
  .product-search input[type=search]{height:clamp(45px,9.6vw,53px);font-size:clamp(16px,3.4vw,18px)}
  .product-search button[type=submit]{width:clamp(44px,9.6vw,52px);height:clamp(44px,9.6vw,52px)}
  .product-search button[type=submit] .icon{width:22px;height:22px}
  /* Keep the mobile hero compact while its title and controls scale with the viewport. */
  .hero{display:flex;align-items:center;justify-content:center;height:clamp(380px,105vw,560px);min-height:0;margin:12px calc(-1*var(--gutter)) 0;border-radius:0}
  .hero-content{width:100%;padding:32px clamp(16px,4vw,24px);text-align:center}
  .hero--film .hero-photo::after{background:linear-gradient(180deg,rgba(12,13,16,.7) 0%,rgba(12,13,16,.42) 46%,rgba(12,13,16,0) 74%)}
  .hero h1{margin-inline:auto;font-size:clamp(42px,12.2vw,64px);line-height:.98}
  .hero-actions{justify-content:center;margin-top:22px;gap:6px 20px}
  .hero-actions .btn{min-height:50px;padding:0 24px;font-size:15px}
  /* Both film buttons on one row, down to 320px. */
  .hero--film .hero-actions{gap:12px;margin-top:24px}
  .hero--film .hero-actions .btn{flex:1;max-width:190px;min-height:54px;padding:0 clamp(18px,4.6vw,26px);font-size:clamp(16px,3.5vw,18px)}
  .hero-link{font-size:15px}
  .section{padding-top:48px}
  .section-tight{padding-top:28px}
  .section-head{align-items:center;margin-bottom:18px}
  .section-head h2{font-size:clamp(25px,7vw,30px)}
  .section-head .link-arrow{font-size:14px}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-tile{aspect-ratio:1.06}
  .cat-tile-name{left:14px;top:13px;max-width:80%;font-size:17px}
  .cat-tile-media{right:7%;bottom:8%;width:64%;height:66%}
  .cat-tile-gadgets .cat-tile-media,.cat-tile-audio .cat-tile-media,.cat-tile-huisdieren .cat-tile-media{width:72%;right:5%}
  .assurances{grid-template-columns:1fr 1fr;border-radius:var(--r-md)}
  .assurance{flex-direction:column;gap:10px;padding:18px 16px}
  .assurance .icon{width:24px;height:24px}
  .assurance h3{font-size:15px}
  .assurance p{font-size:13px}
  .campaign-duo{grid-template-columns:1fr;gap:14px}
  .campaign-card{display:block;aspect-ratio:auto;border-radius:var(--r-md)}
  .campaign-card img{position:relative;display:block;height:auto;aspect-ratio:3/2}
  .campaign-card::before{display:none}
  .campaign-copy{max-width:none;padding:20px 20px 22px}
  .campaign-copy h2,.campaign-copy h3{font-size:26px}
  .campaign-text{margin-top:8px;font-size:15px}
  .campaign-cta{margin-top:16px;min-height:44px}
  .about-hero{grid-template-columns:1fr;gap:28px;padding:8px 0 36px}
  .about-hero-copy p{font-size:16px}
  .about-blocks{grid-template-columns:1fr;gap:28px;padding:32px 0}
  .about-blocks h2{font-size:21px}
  main#main-content{padding-bottom:40px}
  .content-main{padding-top:20px;padding-bottom:48px}
  .page-title,.woocommerce-products-header__title{font-size:30px}
  .category-directory{grid-template-columns:1fr;gap:12px}
  .category-group{padding:20px}
  .category-filters{flex-wrap:nowrap;margin:20px calc(-1*var(--gutter)) 24px;padding:0 var(--gutter) 8px;overflow-x:auto;scrollbar-width:none}
  .category-filters>a{flex-shrink:0;min-height:44px;font-size:14px;white-space:nowrap}
  .subcategory-links{gap:4px 14px}
  .subcategory-links>span{flex-basis:100%}
  .page-intro{margin-bottom:28px;padding:16px 0 28px}
  .page-intro>p:last-child{font-size:15px}
  .page-intro br{display:none}
  .service-layout{display:block}
  .service-nav{position:static;flex-direction:row;gap:8px;margin-bottom:28px;padding-bottom:6px;overflow-x:auto}
  .service-nav a{min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:14px;white-space:nowrap}
  .faq-groups h2{font-size:22px}
  .faq-groups summary{font-size:15px}
  .faq-groups details p{padding-right:12px;font-size:14px}
  .about-intro{grid-template-columns:1fr;gap:24px;padding:12px 0 28px}
  .about-photo img{width:70%;max-height:330px;padding:24px;object-fit:contain}
  .site-footer{padding-top:44px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 16px;padding-bottom:32px}
  .footer-brand{flex-direction:column;align-items:flex-start;gap:10px}
  .footer-trust{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 0 32px}
  .footer-bottom{flex-direction:column;gap:4px;font-size:12px}
}
@media (max-width:370px){
  .account-action{display:none}
  .brand-logo{height:28px}
  .hero:not(.hero--film) .hero-actions .btn{flex-basis:100%}
  .cat-tile-name{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* The wide fatbike cutout sits below the label, like the other product cutouts. */
.cat-tile-fatbikes .cat-tile-media{right:4%;bottom:8%;width:92%;height:68%}