/* =========================================================
   PRODUCTEN: page stylesheet from the static build, scoped to #main.
   Header/footer/mobile-bar rules were removed (chrome.css handles them).
   ========================================================= */

#main{--forest:#142D2D;--ink:#0E1A19;--mist:#6E7A77;--sand:#E4DFD4;--bone:#F2F1EC;--pad:160px;--gut:40px;--header-h:96px;--ease:cubic-bezier(.25,.46,.45,.94);--ease-out:cubic-bezier(.33,.66,.66,1);--forest-deep:#0B1918;--forest-mid:#0F2120;--hair-light:1px solid rgba(255,255,255,.14);}
body.tpl-producten{margin:0;background:#F2F1EC;color:#0E1A19;font-family:'Inter Tight',system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
#main h1,#main h2{font-family:'Archivo',system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.022em;line-height:.96;color:#fff;margin:0;}
#main h1{font-size:clamp(42px,7.2vw,112px);}
#main h2{font-size:clamp(30px,4.4vw,64px);}
#main h3{font-family:'Archivo',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;color:#fff;font-size:20px;margin:24px 0 16px;}
#main p{margin:0 0 1.15em;}
#main a{color:#fff;text-decoration:underline;}
#main ul,#main ol{margin:0 0 1.15em;padding-left:1.1em;}
#main li{margin-bottom:.45em;}
#main img{max-width:100%;height:auto;}
#main .container{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut);}
#main .narrow{max-width:800px;}
#main .section{padding:var(--pad) 0;}
#main .section--chalk{background:#FBFAF7;}
#main .page-hero{padding:calc(var(--header-h) + 96px) 0 var(--pad);}
#main .page-hero h1{margin-bottom:36px;}
#main .eyebrow{font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);margin:0 0 28px;}
#main .btn{font-family:'Archivo',sans-serif;font-weight:600;padding:12px 24px;border-radius:9999px;border:none;cursor:pointer;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:all .2s var(--ease);}
#main .btn--primary{background:var(--forest);color:#fff;}
#main .btn--primary:hover{background:var(--forest-mid);}
#main .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;}
#main .card{background:#fff;border:1px solid var(--sand);border-radius:20px;padding:24px;display:flex;flex-direction:column;}
#main .card h3{margin-top:0;}
#main .card p{margin-bottom:16px;}
/* Button pinned to the bottom of the card, so every "Bestel nu" in a row
   lines up regardless of title/description length. */
#main .card > .btn{margin-top:auto;}
/* Price block: pinned just above the button. */
#main .card__price{margin-top:auto;margin-bottom:18px;padding-top:14px;border-top:1px solid var(--sand);}
#main .card__price + .btn{margin-top:0;}
#main .card__price p{margin:0;}
#main .card__price-main strong{font-family:'Archivo',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--forest);}
#main .card__price-main span{font-size:14px;color:var(--mist);margin-left:4px;}
#main .card__price-sub{font-size:14px;color:var(--mist);margin-top:4px !important;}
#main .card__price-sub a{color:var(--forest);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
#main .ph{background:linear-gradient(135deg,#E8DFD3,#D8D2C8);border-radius:20px;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:var(--mist);font-size:14px;text-align:center;padding:24px;}
#main .card__img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:20px;margin-bottom:20px;background:#fff;}
#main .switch{display:flex;gap:16px;margin-bottom:48px;flex-wrap:wrap;}
#main .switch button{background:transparent;border:2px solid var(--forest);color:#fff;padding:12px 24px;border-radius:9999px;cursor:pointer;font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:all .2s;}
#main .switch button[aria-selected="true"]{background:var(--forest);color:#fff;}
/* Discipline buttons float below the header while scrolling through the products. */
#main .switch{position:sticky;top:71px;z-index:150;padding:14px 0;margin-bottom:34px;background:var(--bone);box-shadow:0 0 0 100vmax var(--bone);clip-path:inset(0 -100vmax);}
.admin-bar #main .switch{top:103px;}
/* On phones: one compact row (scrolls sideways if a screen is very narrow). */
@media (max-width:600px){
  #main .switch{flex-wrap:nowrap;overflow-x:auto;gap:5px;margin-inline:calc(-1 * var(--gut));padding:10px 12px;margin-bottom:26px;scrollbar-width:none;clip-path:none;box-shadow:none;}
  #main .switch::-webkit-scrollbar{display:none;}
  #main .switch button{flex:none;padding:9px 11px;font-size:10.5px;letter-spacing:.06em;}
}
#main .panel{display:none;}
#main .panel.is-active{display:block;}
#main .small{font-size:14px;margin:0;line-height:1.6;}
@media (max-width:768px){#main .narrow{max-width:100%;}}

/* Contrast fixes: these were white on a light background in the static
   build (invisible). Forest is the colour the homepage uses for the same
   elements. */
#main .section h2,
#main .card h3{color:#142D2D;}
#main .switch button[aria-selected="false"]{color:#142D2D;}
#main .section--chalk li strong{color:#142D2D;}

/* Offerte button + "Bestel nu" under the price. */
#main .card__actions{margin-top:auto;display:grid;gap:10px;}
#main .card__price + .card__actions{margin-top:0;}
#main .card__actions .btn{display:block;width:100%;box-sizing:border-box;text-align:center;}
#main .btn--ghost{background:transparent;color:var(--forest);border:2px solid var(--forest);padding:10px 22px;text-decoration:none;}
#main .btn--ghost:hover{background:var(--forest);color:#fff;}

/* Filter row (Dames / Heren / Accessoires / Snelpakken) under the floating tab buttons. */
#main .card[hidden]{display:none;}
#main .filters[hidden],#main .filters__set[hidden]{display:none;}
#main .filters{position:sticky;top:130px;z-index:149;padding:0 0 12px;margin:0 0 34px;background:var(--bone);box-shadow:0 0 0 100vmax var(--bone);clip-path:inset(0 -100vmax);}
.admin-bar #main .filters{margin-top:0;}
#main .switch.has-filters{margin-bottom:0;padding-bottom:10px;}
#main .filters__set{display:flex;gap:8px;flex-wrap:wrap;}
#main .filters__set button{background:transparent;border:1px solid var(--mist);color:#142D2D;padding:7px 16px;border-radius:9999px;cursor:pointer;font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:all .2s;}
#main .filters__set button span{font-weight:500;opacity:.65;letter-spacing:.04em;}
#main .filters__set button:hover{border-color:var(--forest);}
#main .filters__set button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff;}
@media (max-width:600px){
  #main .switch.has-filters{padding-bottom:8px;}
  #main .filters{margin-inline:calc(-1 * var(--gut));padding:0 12px 10px;margin-bottom:26px;clip-path:none;box-shadow:none;}
  #main .filters__set{flex-wrap:nowrap;overflow-x:auto;gap:5px;scrollbar-width:none;}
  #main .filters__set::-webkit-scrollbar{display:none;}
  #main .filters__set button{flex:none;padding:7px 12px;font-size:10px;letter-spacing:.06em;}
}
/* Turning product photo: turns to the back on hover (or tap), with fabric colour dots underneath. */
#main .spin{position:relative;width:100%;aspect-ratio:4/5;margin-bottom:12px;perspective:1000px;background:#fff;border-radius:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#main .spin__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.45,.05,.25,1);}
#main .spin__face{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;border-radius:20px;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
#main .spin__face--back{transform:rotateY(180deg);}
@media (hover:hover){#main .spin:hover .spin__inner{transform:rotateY(180deg);}}
#main .spin.is-flipped .spin__inner{transform:rotateY(180deg);}
#main .spin__colors{display:flex;align-items:center;gap:10px;margin:0 0 8px;}
#main .spin__label{font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-right:2px;}
#main .spin__dot{width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(14,26,25,.25);background:var(--dot);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
#main .spin__dot:hover,#main .spin__dot:focus-visible{transform:scale(1.18);}
#main .spin__dot[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px #142D2D;}
#main .spin__note{font-size:13px;line-height:1.45;color:var(--mist);margin:0 0 14px;}
@media (prefers-reduced-motion:reduce){#main .spin__inner{transition-duration:.01ms;}}