/* ==========================================================================
   PANKRA 2026 over het launchpad-thema

   Dit bestand ligt NAAST styles.css van het thema en zet dat thema helemaal
   naar de hand. Het thema zelf blijft ongemoeid, dus terugdraaien is twee
   regels weghalen in layout/theme.liquid.

   Doel: de winkel mag niet te onderscheiden zijn van pankra.com.

   Wat het thema tegenwerkt, en waarom hier veel !important staat: het zet zijn
   geel op 32 plekken hard neer, gebruikt een serif (ff-tisa) op de body, werkt
   met een vast raster van 996 px en zet in de voet alle tekst op #2d2d2d met
   !important, precies de kleur die daar de achtergrond wordt.
   ========================================================================== */

:root{
  --pk-donker:#2D2D2D;
  --pk-donker-2:#383838;
  --pk-beige:#F1ECE0;
  --pk-beige-2:#F6F1E6;
  --pk-oranje:#F73C1C;
  --pk-dim:#9A9384;
  --pk-haar:rgba(234,225,204,.14);

  --pk-kop-2:clamp(44px,9vw,88px);
  --pk-kop-3:clamp(34px,6vw,60px);
  --pk-kop-4:clamp(24px,3.4vw,40px);
  --pk-kop-5:clamp(20px,2.5vw,30px);
  --pk-tekst-1:clamp(18px,2vw,24px);
  --pk-tekst-2:clamp(17px,1.9vw,22px);
  --pk-tekst-3:13px;
  --pk-knop-tekst:clamp(15px,1.7vw,20px);
  --pk-knop-hoogte:clamp(51px,4.4vw,61px);

  --pk-maxw:1280px;
  --pk-gutter:clamp(20px,5vw,74px);
  --pk-sectie:clamp(48px,7vw,96px);
  --pk-rond:6px;

  --pk-display:"HNXBlkCn","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  --pk-body:"Helvetica Neue","Helvetica",Arial,sans-serif;

  --pk-pijl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 12'%3E%3Cpath d='M0 6h39M34.4 1.6 38.8 6l-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E");

  /* optische correcties, opgemeten op pankra.com */
  --pk-optic-pijl:0.0985em;
  --pk-optic-dash:-0.0865em;
}

/* ---------- basis ---------- */
html,body{background:var(--pk-donker)}
body{color:var(--pk-beige);font-family:var(--pk-body) !important;font-size:18px;
  line-height:1.55;-webkit-font-smoothing:antialiased}

/* De serif van het thema eruit, overal. */
/* LET OP: hier stonden ook .rte, .details en .description bij. Die klassen
   bestaan ook in Craft, en daar zit de rich-text-KOP in een element met
   class="rte". Met !important sloeg deze regel dus de condensed kapitalen
   dood op de nieuwe winkel. Ze staan nu onder .wrapper, want dat is een
   klasse die alleen launchpad heeft. */
body,body p,body li,body td,body th,body dd,body dt,body label,body address,
body blockquote,body input,body textarea,body select,body button,
.wrapper .toolbar,.wrapper .cart-summary,.wrapper .details,
.wrapper .description,.wrapper .rte,.wrapper .note,.wrapper .form-vertical{
  font-family:var(--pk-body) !important;
}
[style*="ff-tisa"],.ff-tisa-web-pro{font-family:var(--pk-body) !important}

a{color:var(--pk-beige);text-decoration:none}
@media(hover:hover){a:hover{color:var(--pk-oranje);opacity:1 !important}}
::selection{background:var(--pk-oranje);color:#fff}
:focus-visible{outline:2px solid var(--pk-oranje);outline-offset:3px}
img{max-width:100%}
hr,hr.divider{background:var(--pk-haar) !important;border:0;height:1px}

/* ---------- filmkorrel ---------- */
body::after{
  content:"";position:fixed;inset:-6%;z-index:9999;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:150px 150px;animation:pk-korrel 7s steps(6) infinite;
}
@keyframes pk-korrel{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-1.5%)}60%{transform:translate(-1.5%,1.5%)}
  80%{transform:translate(1.5%,-1%)}100%{transform:translate(0,0)}
}

/* ---------- raster ----------
   Het vaste raster van 996 px wordt een vloeiende maat met dezelfde marges
   als op de site. */
.wrapper,.toolbar,footer{
  width:100% !important;max-width:var(--pk-maxw) !important;
  margin:0 auto !important;padding-inline:var(--pk-gutter) !important;
}
.row{margin:0}
.span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
  width:100% !important;margin:0 !important;float:none !important;
}

/* ---------- koppen ---------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.title,#product h3.collection-title{
  font-family:var(--pk-display) !important;text-transform:uppercase;
  letter-spacing:.005em;line-height:.9;font-weight:400 !important;
  font-style:normal !important;color:var(--pk-beige-2) !important;border:0 !important;
}
h1,.h1{font-size:var(--pk-kop-2) !important;margin:0 0 .28em}
h2,.h2{font-size:var(--pk-kop-3) !important;margin:0 0 .3em}
h3,.h3,#product h3.collection-title{font-size:var(--pk-kop-4) !important;margin:0 0 .35em}
h4,h5,h6{font-size:var(--pk-kop-5) !important;line-height:.95 !important;margin:0 0 .4em}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit !important}
@media(hover:hover){h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover{color:var(--pk-oranje) !important}}

/* De streep uit de huisstijl voor de paginakoppen. */
#content > .row h1::before,#collection h1::before,
#product h3.collection-title::before,.article h1::before{
  content:"";display:inline-block;width:1.05em;height:.155em;
  background:var(--pk-oranje);vertical-align:middle;margin-right:.3em;
  transform:translateY(var(--pk-optic-dash));
}

/* ---------- kleine labels, één regel ---------- */
.toolbar a,.toolbar .cart,.toolbar-customer,.toolbar-cart,
nav.main a,nav.horizontal a,nav.mobile a,.nav a,
.footer-menu a,.footer-wrapper a,.pagination li a,.pagination li span,
.product .details .price,.product .price,.vendor{
  font-family:var(--pk-body) !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--pk-tekst-3) !important;line-height:1;
}

/* ---------- bovenbalk ---------- */
.toolbar-wrapper{background:var(--pk-donker) !important;height:auto !important;border:0 !important}
.toolbar{color:var(--pk-beige) !important}
.toolbar li{line-height:60px !important;padding-right:22px !important}
.toolbar a,.toolbar .cart{color:var(--pk-beige) !important;opacity:.8}
@media(hover:hover){.toolbar a:hover{color:var(--pk-oranje) !important;opacity:1}}
.toolbar .or{color:var(--pk-dim) !important;font-size:11px}
.toolbar .search_box,#search .search_box{
  background:transparent !important;border:0 !important;
  border-bottom:2px solid var(--pk-haar) !important;
  border-radius:0 !important;box-shadow:none !important;
  color:var(--pk-beige) !important;font-family:var(--pk-body) !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.14em;
  font-size:12px !important;height:34px;transition:border-color .25s;
}
.toolbar .search_box:focus{border-bottom-color:var(--pk-oranje) !important;outline:none}
.toolbar .search_box::placeholder{color:var(--pk-dim)}
.toolbar #go{filter:invert(1) brightness(1.4)}
#search .search-border{border-bottom-color:var(--pk-haar) !important}

/* ---------- logo en navigatie ---------- */
.logo{padding:clamp(34px,5vw,64px) 0 clamp(22px,3vw,34px) !important;max-width:none !important}
.logo h1{margin:0}
.logo a img{
  content:url("https://www.pankra.com/assets/img/pankra-wordmerk.webp");
  height:clamp(26px,3.4vw,42px);width:auto;margin:0 auto;
}
.logo h1 a{font-family:var(--pk-display) !important;text-transform:uppercase;
  color:var(--pk-beige-2) !important;font-size:var(--pk-kop-2) !important;line-height:.9 !important}

/* De gele lijnen boven en onder het menu weg. Plat, zoals de site. */
nav,nav.main,nav.mobile,nav.horizontal{
  border:0 !important;border-top:0 !important;border-bottom:0 !important;
}
nav>ul{display:flex;flex-wrap:wrap;justify-content:center;
  gap:4px clamp(18px,2.4vw,30px);margin:0;padding:0;list-style:none}
nav>ul>li>a{color:var(--pk-beige) !important;opacity:.8;padding:0 !important;
  height:auto !important;line-height:44px !important;background-image:none !important;
  transition:opacity .2s,color .2s}
@media(hover:hover){nav>ul>li>a:hover,nav>ul>li:hover>a{color:var(--pk-oranje) !important;opacity:1}}
nav>ul>li>a.current{color:var(--pk-oranje) !important;opacity:1}
@media(hover:hover){nav>ul>li>a:hover:after{display:none !important}}
nav>ul>li.dropdown>.dropdown{background:var(--pk-donker-2) !important;border:0 !important;
  border-radius:var(--pk-rond);padding:10px 0 !important}
nav>ul>li.dropdown>.dropdown a{color:var(--pk-beige) !important;padding:8px 18px !important;display:block}
@media(hover:hover){nav>ul>li.dropdown>.dropdown a:hover{color:var(--pk-oranje) !important}}
nav.mobile{padding:12px 0 !important}

/* ---------- knoppen ---------- */
/* Deze regel gold voor elke <button> op de bladzijde. In Craft zijn dat ook
   de plus- en minknoppen bij het aantal, de verwijderknop en de zoomknop op
   het beeld; die werden allemaal een oranje blok. Nu alleen nog binnen
   .wrapper, en die klasse bestaat alleen in launchpad. */
.wrapper .btn,.wrapper a.btn,.wrapper input.btn,.wrapper button,
.wrapper input[type="submit"],.wrapper .button,
.wrapper .searchform input.submit,#add-to-cart{
  background:var(--pk-oranje) !important;color:var(--pk-donker) !important;
  font-family:var(--pk-body) !important;font-weight:500 !important;
  font-size:var(--pk-knop-tekst) !important;letter-spacing:-.005em !important;
  text-transform:none !important;border:0 !important;
  border-radius:var(--pk-rond) !important;height:auto !important;
  min-height:var(--pk-knop-hoogte) !important;line-height:1.3 !important;
  padding:0 clamp(22px,2.4vw,31px) !important;
  display:inline-flex !important;align-items:center;justify-content:center;gap:.7em;
  text-shadow:none !important;box-shadow:none !important;opacity:1 !important;
  transition:background .25s,color .25s;
}
@media(hover:hover){.wrapper .btn:hover,.wrapper a.btn:hover,.wrapper input.btn:hover,.wrapper button:hover,.wrapper input[type="submit"]:hover,.wrapper .button:hover,#add-to-cart:hover{
  background:var(--pk-beige-2) !important;color:var(--pk-donker) !important;opacity:1 !important;
}}
.btn.disabled,#add-to-cart.disabled,#add-to-cart[disabled]{
  background:var(--pk-donker-2) !important;color:var(--pk-dim) !important;cursor:default;
}
#add-to-cart::after,.btn.newsletter::after{
  content:"";display:inline-block;width:1.5em;height:.43em;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--pk-pijl) center/contain no-repeat;
  mask:var(--pk-pijl) center/contain no-repeat;
  transform:translateY(var(--pk-optic-pijl));transition:transform .3s;
}
@media(hover:hover){#add-to-cart:hover::after,.btn.newsletter:hover::after{
  transform:translateY(var(--pk-optic-pijl)) translateX(6px);
}}

/* ---------- producten ----------
   Vierkante tegels in een raster van 2, 3 of 4 kolommen, zoals het werkraster
   op de site: het beeld zoomt en er valt oranje overheen. */
.products,.row.products,.products.masonry{
  display:grid !important;grid-template-columns:repeat(2,1fr);gap:12px;
  margin:0 0 clamp(30px,4vw,48px) !important;
}
@media(min-width:680px){.products,.row.products,.products.masonry{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.products,.row.products,.products.masonry{grid-template-columns:repeat(4,1fr)}}
.products .product,.product.span4,.product.span3,.product.span6{
  float:none !important;margin:0 !important;width:auto !important;
  display:flex;flex-direction:column;
}
.product .image{position:relative;overflow:hidden;background:var(--pk-donker-2);
  aspect-ratio:1;margin:0 !important;border:0;border-radius:0;box-shadow:none}
.product .image a{display:block;height:100%}
.product .image img{width:100%;height:100%;object-fit:cover;display:block;
  margin:0 !important;opacity:1 !important;transition:transform .6s}
@media(hover:hover){.product:hover .image img{transform:scale(1.05);opacity:1 !important}}
.product .image::after{content:"";position:absolute;inset:0;background:var(--pk-oranje);
  mix-blend-mode:multiply;opacity:0;transition:opacity .45s;pointer-events:none}
@media(hover:hover){.product:hover .image::after{opacity:.18}}
.product .details{padding:14px 0 0;text-align:left}
.product .details a{padding:0 !important;display:block}
.product .details h2,.product .details h3,.product .details h4,
.product .title,.product .details .title{
  font-family:var(--pk-display) !important;text-transform:uppercase;
  letter-spacing:.005em;font-weight:400 !important;
  font-size:clamp(18px,1.9vw,26px) !important;line-height:.95 !important;
  color:var(--pk-beige-2) !important;margin:0 0 4px !important;
  border:0 !important;padding:0 !important;
}
.product .vendor{color:var(--pk-dim) !important;opacity:1 !important;margin:0 0 2px}
.product .details .price,.product .price,.details .price{
  color:var(--pk-oranje) !important;opacity:1 !important;display:block;
}
.product .circle,#product .circle{
  border-radius:var(--pk-rond) !important;padding:6px 10px !important;
  right:8px !important;top:8px !important;
  font-family:var(--pk-body) !important;font-weight:700 !important;
  letter-spacing:.14em;font-size:11px !important;line-height:1 !important;
  background:var(--pk-oranje) !important;color:var(--pk-donker) !important;
  opacity:1 !important;width:auto !important;height:auto !important;
}

/* ---------- productpagina ---------- */
#product .featured .image{aspect-ratio:auto;background:var(--pk-donker-2)}
#product .price,.main .price,#price,.product-price{
  font-family:var(--pk-body) !important;font-weight:700 !important;
  font-size:var(--pk-tekst-1) !important;letter-spacing:.02em;
  color:var(--pk-oranje) !important;
}
.product-options{border-top:1px solid var(--pk-haar) !important;
  border-bottom:1px solid var(--pk-haar) !important}
.description,.rte{font-size:var(--pk-tekst-2);line-height:1.55;color:var(--pk-beige)}
.rte a,.description a{color:var(--pk-oranje) !important;text-decoration:none}

/* ---------- formulieren ---------- */
/* Idem voor de invulvelden: in Craft heeft het thema zijn eigen vorm en die
   hoeft niet overschreven te worden. Het oranje kader om het zoekveld kwam
   hiervandaan. */
.wrapper input[type="text"],.wrapper input[type="email"],
.wrapper input[type="password"],.wrapper input[type="number"],
.wrapper input[type="tel"],.wrapper input[type="search"],
.wrapper textarea,.wrapper select{
  background:var(--pk-donker-2) !important;border:0 !important;
  border-radius:var(--pk-rond) !important;color:var(--pk-beige) !important;
  font-family:var(--pk-body) !important;font-size:15px !important;
  height:auto !important;line-height:1.4 !important;padding:14px 16px !important;
  box-shadow:none !important;
}
.wrapper input:focus,.wrapper textarea:focus,.wrapper select:focus{outline:none !important;
  box-shadow:0 0 0 2px var(--pk-oranje) inset !important;border:0 !important}
input::placeholder,textarea::placeholder{color:var(--pk-dim)}
label{font-family:var(--pk-body) !important;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--pk-dim)}

/* ---------- tabellen en winkelwagen ---------- */
table tr td,table tr th{border-top:1px solid var(--pk-haar) !important;
  border-color:var(--pk-haar) !important;color:var(--pk-beige)}
.cart-summary,.cart-summary a{color:var(--pk-beige) !important}

/* ---------- paginering ---------- */
.pagination{margin:clamp(30px,4vw,48px) 0 !important}
.pagination li{padding:0 3px !important}
.pagination li a,.pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 8px !important;
  background:none !important;color:var(--pk-beige) !important;
  border-radius:var(--pk-rond);opacity:.62;
  transition:opacity .2s,background .2s,color .2s;
}
@media(hover:hover){.pagination li a:hover{opacity:1;background:var(--pk-haar) !important}}
.pagination li span{opacity:1;background:var(--pk-oranje) !important;color:var(--pk-donker) !important}

/* ---------- voet ----------
   Het thema zet hier alle tekst op #2d2d2d met !important, precies de kleur
   die de achtergrond wordt. Zonder deze regels leest de voet als leeg vlak. */
.footer-wrapper{background:var(--pk-donker) !important;padding:0 !important;border:0 !important}
footer{padding-block:var(--pk-sectie) clamp(26px,3vw,40px) !important}
footer>.row{display:grid;gap:clamp(24px,4vw,48px)}
@media(min-width:760px){footer>.row{grid-template-columns:repeat(3,1fr)}}
footer .span12,footer .span12.tc,footer .span12.full-border{grid-column:1 / -1}
footer .full-border{display:none !important}
footer,footer p,footer li,footer .tweet_text a{color:var(--pk-beige) !important}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6{
  color:var(--pk-oranje) !important;font-family:var(--pk-display) !important;
  text-transform:uppercase;font-size:var(--pk-kop-5) !important;letter-spacing:.005em;
  border-bottom:0 !important;padding-bottom:0 !important;margin:0 0 16px !important;
}
footer a{color:var(--pk-beige) !important;opacity:.72;transition:opacity .2s,color .2s}
@media(hover:hover){footer a:hover{color:var(--pk-oranje) !important;opacity:1 !important}}
footer ul{margin:0;padding:0;list-style:none}
footer ul li{margin-bottom:8px}
footer .p30,footer .p10{padding:0 !important}
footer #mail{width:100% !important;max-width:280px;margin-bottom:10px}
footer .btn.newsletter{margin-left:0 !important;font-size:var(--pk-knop-tekst) !important}
.icon-social{filter:invert(1) brightness(1.25);opacity:.6 !important}
@media(hover:hover){.icon-social:hover{opacity:1 !important}}
footer .copyright{margin:clamp(26px,3.4vw,44px) 0 0 !important;text-align:center}
footer .copyright p{font-family:var(--pk-body) !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.12em;font-size:10px !important;
  color:var(--pk-dim) !important;margin:0 0 14px}
footer .copyright a{color:var(--pk-dim) !important;opacity:1}
.credit-cards li img{opacity:.45;filter:grayscale(1)}

/* ---------- beweging respecteren ---------- */
@media(prefers-reduced-motion:reduce){
  .product .image img,#add-to-cart::after,.btn.newsletter::after{transition:none}
  body::after{animation:none}
}

/* De hulpklassen voor lijntjes van het thema: geel wordt haarlijn. */
.border-top,.border-right,.border-bottom,.border-left{
  border-color:var(--pk-haar) !important;
}


/* ==========================================================================
   TWEEDE RONDE. Wat er in de praktijk misging, en wat er bij mocht.
   ========================================================================== */

/* ---------- de gaten in het raster ----------
   Het thema zet na elke drie producten een leeg div-je neer om de floats te
   breken. In een raster is dat geen onzichtbare hulpregel meer maar een lege
   cel, en dus een gat. Weg ermee. */
.products > div:not(.product){display:none !important}

/* ---------- even hoge tegels ----------
   Een titel van twee regels maakte de hele rij hoger en liet onder de korte
   buren lucht staan. Titels lopen nu over maximaal twee regels en het
   tekstblok heeft een vaste hoogte, dus elke cel is even hoog. */
.product .details{
  min-height:calc(2 * .95em * (18px + (26 - 18) * ((100vw - 320px) / (1280 - 320))) / 1em + 34px);
  min-height:5.2em;
}
.product .details h2,.product .details h3,.product .details h4,
.product .title,.product .details .title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- de collectiekop ----------
   Groot, met de streep uit de huisstijl ervoor. */
h1.collection-title,#content h1{
  font-size:var(--pk-kop-2) !important;max-width:18ch;
}
h1.collection-title::before,#content h1::before{
  content:"";display:inline-block;width:1.05em;height:.155em;
  background:var(--pk-oranje);vertical-align:middle;margin-right:.3em;
  transform:translateY(var(--pk-optic-dash));
}

/* ---------- lichtkrant ----------
   Hetzelfde element als op de site: een oranje baan met condensed kapitalen
   die langsloopt. Er is hier geen HTML om aan te haken, dus de tekst zit in
   deze regel. De baan loopt van rand tot rand doordat #nav zelf zo breed is
   als het venster; de menuregel erboven houdt zijn eigen marge.

   De correctie van 0,142 em zit in de padding: dit lettertype geeft een
   stijglijn op die lager ligt dan de kapitaal zelf, dus zonder correctie
   staat de tekst te hoog in de baan. */
#nav{
  width:100vw !important;margin-inline:calc(50% - 50vw) !important;
  padding:0 !important;overflow:hidden;
}
#nav > .span12{padding-inline:var(--pk-gutter) !important}
#nav::after{
  content:"—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power ";
  display:block;width:max-content;margin-top:clamp(18px,2.4vw,30px);
  background:var(--pk-oranje);color:var(--pk-donker);
  font-family:var(--pk-display);text-transform:uppercase;letter-spacing:.02em;
  font-size:var(--pk-kop-5);line-height:1;white-space:nowrap;
  padding:calc(.62em + .142em) 0 calc(.62em - .142em);
  animation:pk-krant 60s linear infinite;
}
@keyframes pk-krant{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- meer lucht om het werk heen ---------- */
#content{display:block;padding-block:var(--pk-sectie) 0}
#collection,#content > .row:first-child{margin-bottom:clamp(26px,3.4vw,44px)}

/* ---------- productpagina naast elkaar ---------- */
@media(min-width:860px){
  #product > .row{display:grid;grid-template-columns:1.15fr 1fr;
    gap:clamp(28px,4vw,56px);align-items:start}
}

/* ---------- beweging respecteren ---------- */
@media(prefers-reduced-motion:reduce){
  #nav::after{animation:none}
}


/* ==========================================================================
   DERDE RONDE. Lijntjes eruit, raster dat zichzelf vult, uitgelicht product
   en winkelwagen.
   ========================================================================== */

/* ---------- geen lijntjes ----------
   Het thema hangt overal dunne scheidingslijnen op. Die horen niet bij de
   huisstijl: die is plat en werkt met lucht in plaats van lijnen. */
.border-top,.border-right,.border-bottom,.border-left,
.featured-product,.full-border,#product h3.collection-title{
  border:0 !important;
}

/* ---------- raster dat zichzelf vult ----------
   Met een vast aantal kolommen laat een rij van drie een gat rechts staan.
   auto-fit laat lege kolommen inklappen, dus elke rij vult de volle breedte,
   hoeveel producten er ook zijn. */
.products,.row.products,.products.masonry{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;
}
@media(min-width:680px){
  .products,.row.products,.products.masonry{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  }
}
@media(min-width:1040px){
  .products,.row.products,.products.masonry{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  }
}

/* ---------- uitgelicht product ----------
   Het thema zet dit neer als tabel uit 2013. Hier wordt het een raster: tekst
   links, beeld rechts en vierkant, met dezelfde hover als de tegels. */
.featured-product{display:block !important;padding:0 !important;margin:0 !important}
.featured-product > .p30{
  padding:0 0 var(--pk-sectie) !important;
  display:grid;gap:clamp(24px,4vw,56px);align-items:center;
}
@media(min-width:860px){.featured-product > .p30{grid-template-columns:1fr 1fr}}
.featured-product .display-table-cell{
  display:block !important;padding:0 !important;width:auto !important;
}
.featured-product h2{font-size:var(--pk-kop-3) !important;margin:0 0 .18em !important}
.featured-product .price{
  opacity:1 !important;color:var(--pk-oranje) !important;
  font-family:var(--pk-body) !important;font-weight:700 !important;
  font-size:var(--pk-tekst-1) !important;letter-spacing:.02em;
  display:block;margin:0 0 22px !important;
}
.featured-product-description{
  font-size:var(--pk-tekst-2) !important;line-height:1.5 !important;
  color:var(--pk-beige);max-width:46ch;margin:0 0 30px;
}
.featured-product-description p{margin:0 0 14px}
.featured-product-description em{font-style:italic}
.featured-product-header{
  opacity:1 !important;color:var(--pk-oranje) !important;
  font-family:var(--pk-body) !important;font-weight:700 !important;
  letter-spacing:.14em;font-size:var(--pk-tekst-3) !important;
}
.featured-product-image{
  width:auto !important;position:relative;overflow:hidden;
  background:var(--pk-donker-2);aspect-ratio:1;margin:0 !important;
}
.featured-product-image a{display:block;height:100%}
.featured-product-image img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s;
}
@media(hover:hover){.featured-product-image:hover img{transform:scale(1.05)}}
.featured-product-image::after{
  content:"";position:absolute;inset:0;background:var(--pk-oranje);
  mix-blend-mode:multiply;opacity:0;transition:opacity .45s;pointer-events:none;
}
@media(hover:hover){.featured-product-image:hover::after{opacity:.18}}

/* ---------- winkelwagen ----------
   Zelfde tafel als de rest: geen kader, alleen een haarlijn tussen de regels,
   beeld vierkant, naam in kapitalen en het bedrag oranje. */
#cart{padding-block:var(--pk-sectie)}
#cart table{width:100%;border-collapse:collapse}
#cart th{
  font-family:var(--pk-body) !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--pk-tekst-3) !important;
  color:var(--pk-dim) !important;text-align:left;padding:0 10px 14px !important;
  border:0 !important;
}
#cart td{padding:18px 10px !important;vertical-align:middle;
  border-top:1px solid var(--pk-haar) !important;border-bottom:0 !important}
#cart .image{width:96px}
#cart .image img{width:96px;height:96px;object-fit:cover;display:block;
  background:var(--pk-donker-2)}
#cart .item{max-width:none !important}
#cart .item a,#cart .item a .product_title{
  font-family:var(--pk-display) !important;text-transform:uppercase;
  letter-spacing:.005em;font-size:clamp(18px,1.9vw,26px) !important;
  line-height:.95;color:var(--pk-beige-2) !important;
}
@media(hover:hover){#cart .item a:hover{color:var(--pk-oranje) !important}}
#cart a .variant_title,#cart .item-description{
  font-family:var(--pk-body) !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.14em;font-size:12px !important;
  color:var(--pk-dim) !important;
}
#cart .price,#cart .total,#cart .subtotal{
  font-family:var(--pk-body) !important;font-weight:700 !important;
  color:var(--pk-oranje) !important;font-size:var(--pk-tekst-1) !important;
}
#cart .qty input,#cart input[type="number"],#cart input[type="text"]{
  width:76px;text-align:center;padding:12px 8px !important;
}
#cart .remove a{color:var(--pk-dim) !important;font-size:12px}
@media(hover:hover){#cart .remove a:hover{color:var(--pk-oranje) !important}}
#cart .buttons,#cart .cart-buttons,#cart .extra-checkout-buttons{
  float:none !important;margin-top:clamp(24px,3vw,40px) !important;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:flex-end;
}
#checkout{float:none !important;margin:0 !important}
#cart textarea{width:100%;max-width:520px}
.expanded-message{padding-block:var(--pk-sectie)}
.expanded-message h2{text-align:left !important;font-size:var(--pk-kop-2) !important}
.expanded-message br{display:none}

/* ---------- klantpagina's ---------- */
.customer,#customer_login,#create_customer,.form-vertical{max-width:520px}
#customer_login label,#create_customer label{display:block;margin-bottom:6px}
#customer_login input,#create_customer input{width:100%;margin-bottom:16px}


/* ==========================================================================
   VIERDE RONDE.
   ========================================================================== */

/* ---------- de lichtkrant zichtbaar maken ----------
   Het thema gebruikt ::after op .row als clearfix, en zet daarbij
   visibility:hidden en height:0. Die twee moeten hier terug, anders staat de
   baan er wel maar zie je hem niet.

   De tekst staat er vier keer in en schuift de helft op: dan is de sprong
   precies twee herhalingen en loopt hij naadloos rond, ook op een breed
   scherm. */
#nav::after{
  visibility:visible !important;
  clear:none !important;
  height:auto !important;
  content:"—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power " !important;
}


/* ==========================================================================
   DEEL TWEE: CRAFT

   Vanaf hier gaat het over het nieuwe thema. Craft is gebouwd op Dawn en dat
   is een heel ander beest dan launchpad: het werkt met CSS-variabelen die uit
   de thema-instellingen komen. Daardoor is hier bijna geen !important nodig.
   Je zet de waarden om en de rest volgt.

   Alles hierboven gaat nog over launchpad. Die regels raken niets in Craft,
   want de klassen bestaan daar niet. Zodra launchpad weg is mag de bovenste
   helft van dit bestand eruit.

   Let op de eenheden: Dawn zet de basis op 62,5 procent, dus 1rem is 10 px.
   Kleuren zijn losse getallen omdat het thema er rgba() omheen zet.
   ========================================================================== */

/* Craft zet zijn eigen kleurschema's in een <style> die NA dit bestand komt.
   Bij gelijke zwaarte wint de laatste, dus de klasse staat er hier twee keer:
   dat telt dubbel en wint zonder dat er ergens !important aan te pas komt.
   Hetzelfde voor :root, dat wordt html:root. */
html:root,
.color-scheme-1.color-scheme-1,.color-scheme-2.color-scheme-2,
.color-scheme-3.color-scheme-3,.color-scheme-4.color-scheme-4,
.color-scheme-5.color-scheme-5,
.color-background-1.color-background-1,.color-background-2.color-background-2,
.color-accent-1.color-accent-1,.color-accent-2.color-accent-2,
.color-inverse.color-inverse{
  --color-background-contrast:56,56,56;
  --payment-terms-background-color:rgb(45 45 45);
  /* ---- kleur ---- */
  --color-background:45,45,45;
  --gradient-background:#2D2D2D;
  --color-foreground:241,236,224;
  --color-base-text:241,236,224;
  --color-link:241,236,224;
  --color-button:247,60,28;
  --color-button-text:45,45,45;
  --color-secondary-button:45,45,45;
  --color-secondary-button-text:246,241,230;
  --color-badge-background:247,60,28;
  --color-badge-foreground:45,45,45;
  --color-badge-border:247,60,28;
  --color-shadow:0,0,0;

  /* ---- letter ----
     De koppen op condensed kapitalen, de rest Helvetica. De schaal staat op
     1,55 zodat h1 uitkomt op 46 px en .h0 op 62 px; dat is het formaat waarop
     dit lettertype gaat beuken in plaats van keurig te zijn. */
  --font-heading-family:"HNXBlkCn","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  --font-heading-style:normal;
  --font-heading-weight:400;
  --font-heading-scale:1.55;
  --font-body-family:"Helvetica Neue","Helvetica",Arial,sans-serif;
  --font-body-style:normal;
  --font-body-weight:400;
  --font-body-weight-bold:700;
  --font-body-scale:1;

  /* ---- vorm ----
     Plat. Geen randen, geen schaduwen, geen ronding op beeld. Alleen 6 px op
     wat je aanraakt: knoppen, velden, labels. */
  --page-width:128rem;
  --page-width-margin:0rem;
  --buttons-radius:.6rem;
  --buttons-radius-outset:.6rem;
  --buttons-border-width:0px;
  --buttons-border-opacity:0;
  --buttons-shadow-opacity:0;
  --buttons-shadow-visible:0;
  --inputs-radius:.6rem;
  --inputs-radius-outset:.6rem;
  --inputs-border-width:0px;
  --inputs-border-opacity:0;
  --inputs-shadow-opacity:0;
  --inputs-shadow-visible:0;
  --media-radius:0px;
  --media-border-width:0px;
  --media-border-opacity:0;
  --media-shadow-opacity:0;
  --media-shadow-visible:0;
  --text-boxes-radius:0px;
  --text-boxes-border-width:0px;
  --text-boxes-border-opacity:0;
  --text-boxes-shadow-opacity:0;
  --text-boxes-shadow-visible:0;
  --badge-corner-radius:.6rem;

  --product-card-corner-radius:0px;
  --product-card-border-width:0px;
  --product-card-border-opacity:0;
  --product-card-image-padding:0rem;
  --product-card-shadow-opacity:0;
  --product-card-shadow-visible:0;
  --product-card-text-alignment:left;
  --collection-card-corner-radius:0px;
  --collection-card-border-width:0px;
  --collection-card-image-padding:0rem;
  --collection-card-shadow-visible:0;
  --collection-card-text-alignment:left;
  --blog-card-corner-radius:0px;
  --blog-card-border-width:0px;
  --blog-card-shadow-visible:0;

  /* ---- ruimte ----
     Zelfde tussenruimte als het werkraster op de site: 12 px, ook op mobiel. */
  --grid-desktop-horizontal-spacing:1.2rem;
  --grid-desktop-vertical-spacing:1.2rem;
  --grid-mobile-horizontal-spacing:1.2rem;
  --grid-mobile-vertical-spacing:1.2rem;
}

/* ---------- koppen ----------
   Condensed kapitalen lopen strak, dus de regelafstand omlaag en de spatiering
   terug naar nul. Het thema zet die standaard ruimer voor een serif. */
.craft-huid h1,.craft-huid h2,.craft-huid h3,.craft-huid h4,.craft-huid h5,
h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5{
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.9;
  color:rgb(246,241,230);
}

/* ---------- kleine labels ----------
   Alles onder 20 px in Helvetica, vet en ruim gespatieerd, net als op de site.
   Condensed kapitalen worden klein onleesbaar. */
.header__menu-item,.list-menu__item,.header__icon,.footer-block__heading,
.price,.card__information .caption,.product__text.caption-with-letter-spacing,
.badge,.pagination__item,.breadcrumbs__link{
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.3rem;
}

/* ---------- knoppen ---------- */
.button,.shopify-challenge__button,.customer button{
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif;
  font-weight:500;
  text-transform:none;
  letter-spacing:-.005em;
  font-size:1.7rem;
  min-height:5.4rem;
}

/* ---------- prijs oranje ---------- */
.price,.price__regular,.price-item{color:rgb(247,60,28)}
.price--on-sale .price-item--regular{color:rgb(154,147,132)}

/* ---------- tegels ----------
   Vierkant beeld, en dezelfde hover als het werkraster op de site: het beeld
   zoomt en er valt oranje overheen. */
.card__media,.card--standard .card__inner,.media--square{background:#383838}
.card__inner .card__media img,.card .media img{transition:transform .6s}
@media(hover:hover){.card:hover .card__media img,.card-wrapper:hover .card__media img{transform:scale(1.05)}}
.card__media::after,.card .media::after{
  content:"";position:absolute;inset:0;background:#F73C1C;
  mix-blend-mode:multiply;opacity:0;transition:opacity .45s;pointer-events:none;z-index:2;
}
@media(hover:hover){.card-wrapper:hover .card__media::after,.card-wrapper:hover .media::after{opacity:.18}}
.card__heading{line-height:.95}

/* ---------- filmkorrel ----------
   Zelfde korrel als op de site. Werkt in beide thema's, want hij hangt aan
   body en niet aan een klasse van het thema. */

/* ---------- beweging respecteren ---------- */
@media(prefers-reduced-motion:reduce){
  .card__inner .card__media img,.card .media img{transition:none}
}


/* ---------- Craft: kleine dingen die groot uitvielen ----------
   Het thema hangt zijn kopstijl aan van alles wat eigenlijk een labeltje is:
   het aantal producten, het woord Filter, de sorteerkeuze. Op een serif viel
   dat niet op, in condensed kapitalen op schaal 1,55 wel. Terug naar het
   kleine model: Helvetica, vet, ruim gespatieerd. */
.product-count,.product-count__text,.facets__label,.facet-filters__label,
.facets__summary,.facets__heading,.facet-filters__sort,.facets__disclosure summary,
.collection-hero__description,.facets__price,.mobile-facets__label{
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.3rem !important;
  line-height:1;
  color:rgb(154,147,132);
}
.facets__summary,.facet-filters__label,.facets__label{color:rgb(241,236,224)}

/* ---------- de taal- en muntkeuze ----------
   Craft geeft die de knopstijl, en dan staat er een oranje pil bovenaan die
   harder roept dan de winkelwagen. Dit is geen actie maar een keuze, dus
   rustig: alleen tekst met een haarlijn eronder. */
.localization-form__select,.disclosure__button,
.localization-form .button,.localization-form button{
  background:transparent !important;
  color:rgb(241,236,224) !important;
  min-height:0 !important;
  padding:.6rem 0 !important;
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:1.2rem !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media(hover:hover){.localization-form__select:hover,.disclosure__button:hover{color:rgb(247,60,28) !important}}
.localization-form__select:after,.localization-form__select:before,
.disclosure__button:after,.disclosure__button:before{display:none !important}

/* ---------- productnaam op de tegel ----------
   Zelfde maat als het werkraster op de site. */
.card__heading,.card__heading a,.card-information .card__heading{
  font-size:clamp(18px,1.9vw,26px) !important;
  line-height:.95 !important;
}
.card-information{padding-top:1.4rem}


/* ---------- Craft: de kop van de winkel ----------
   De eerste sectie op de homepage is een rich-text blok. Dat wordt hier de
   opening: de foto van ons op de trap over de volle breedte, een sluier
   eroverheen zodat de letters leesbaar blijven, en de kop links onderin in
   oranje. Precies de opbouw van de hero op pankra.com.

   De foto staat al op pankra.com, dus er hoeft niets naar Shopify geuploaded
   te worden. */
/* Ook hier telt de klasse dubbel: het thema hangt er .gradient naast en die
   zet zijn eigen achtergrond, in een <style> die later komt. */
.rich-text.rich-text{
  position:relative;
  min-height:min(84vh,720px);
  display:flex;align-items:flex-end;
  background:#2D2D2D url("https://www.pankra.com/assets/img/hero-poster.webp") center 24% / cover no-repeat;
  padding:0 !important;
}
.rich-text::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(45,45,45,.08) 0%,rgba(45,45,45,0) 30%,rgba(45,45,45,.5) 74%,rgba(45,45,45,.92) 100%);
}
.rich-text__wrapper,.rich-text .page-width{
  position:relative;z-index:2;width:100%;max-width:128rem;margin:0 auto;
  padding:0 clamp(20px,5vw,74px) clamp(48px,10vh,140px);
}
.rich-text__blocks{max-width:none;text-align:left}
.rich-text__heading.rich-text__heading{
  color:rgb(247,60,28) !important;
  font-size:clamp(38px,7vw,104px) !important;
  line-height:.88 !important;
  max-width:13ch;
  margin:0 !important;
}
.rich-text__text{
  font-size:clamp(18px,2vw,24px) !important;line-height:1.45;
  color:rgb(246,241,230);max-width:48ch;
}

@media(prefers-reduced-motion:reduce){
  .rich-text{background-attachment:scroll}
}


/* De streep uit de huisstijl voor de kop van de winkel. Zelfde device als op
   de site: geen getypt streepje maar een getekende balk, op halve
   kapitaalhoogte. Zo staat er ook geen los teken in de tekst zelf.
   streep voor de winkelkop */
.rich-text__heading.rich-text__heading::before{
  content:"";display:block;width:1.05em;height:.135em;
  background:currentColor;margin:0 0 .3em;
}


/* ==========================================================================
   CRAFT: DE KOP, ZOALS OP DE SITE
   ========================================================================== */

/* ---------- één regel, wordmerk links ----------
   Craft zet het logo standaard groot in het midden met het menu eronder. Op de
   site is het één rustige balk van 74 px: wordmerk links, menu rechts. Het
   thema doet dat met een raster met benoemde vakken; hier wordt het gewoon
   een rij, dan vervallen die vakken vanzelf. */
.header.header{
  display:flex !important;
  align-items:center;
  gap:clamp(14px,2.2vw,30px);
  min-height:74px;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.header__heading{margin:0;order:1}
.header__inline-menu{order:2;margin-left:auto}
.header__search{order:3}
.header__icons{order:4;padding:0}
header-drawer{order:0}

/* ---------- het wordmerk ----------
   Craft heeft geen logo ingesteld en zet dan de winkelnaam als tekst neer.
   Die tekst schuiven we uit beeld en het wordmerk komt ervoor in de plaats,
   op 23 px hoog: dezelfde maat als in de kop van de site. De breedte is
   uitgerekend uit het bestand zelf, 436 bij 64. */
.header__heading-link{padding:0 !important;display:block}
.header__heading-link .h2,.header__heading-link > span{
  display:block;
  width:157px;height:23px;
  text-indent:-200vw;overflow:hidden;white-space:nowrap;
  background:url("https://www.pankra.com/assets/img/pankra-wordmerk.webp") left center / contain no-repeat;
}
@media(hover:hover){.header__heading-link:hover .h2{opacity:.75}}

/* ---------- de kop blijft plakken ----------
   Doorschijnend met blur, zodat de letters leesbaar blijven boven wat eronder
   doorschuift. Precies zoals header.scrolled op de site. */
.header-wrapper{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,#2D2D2D 90%,transparent);
  backdrop-filter:blur(8px);
  border:0 !important;
}

/* ---------- de balk erboven wordt de lichtkrant ----------
   Craft heeft daar een mededelingenbalk zitten. Die wordt hier de oranje baan
   met condensed kapitalen die langsloopt, hetzelfde element als op de site.
   De tekst van het thema zelf schuiven we weg; hij blijft wel in de HTML
   staan voor wie hem voorleest. */
.utility-bar.utility-bar{
  position:relative;overflow:hidden;
  background:rgb(247,60,28) !important;
  border:0 !important;
  padding:0 !important;
  min-height:0;
}
.utility-bar .page-width,.utility-bar__grid,.announcement-bar,
.utility-bar .announcement-bar__message,.utility-bar__item{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.utility-bar.utility-bar::after{
  content:"—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power ";
  display:block;width:max-content;
  color:#2D2D2D;
  font-family:"HNXBlkCn","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(20px,2.5vw,30px);line-height:1;white-space:nowrap;
  padding:calc(.62em + .142em) 0 calc(.62em - .142em);
  animation:pk-krant 60s linear infinite;
}

@media(prefers-reduced-motion:reduce){
  .utility-bar.utility-bar::after{animation:none}
}


/* Koppen in Craft altijd in de condensed kapitalen, wat voor klasse het thema
   er verder ook aan hangt. */
.rich-text__heading.rich-text__heading,
.card__heading.card__heading,.card__heading.card__heading a,
.h0.h0,.h1.h1,.h2.h2,.h3.h3,.h4.h4,.h5.h5,
.collection-hero__title.collection-hero__title,
.product__title.product__title,.product__title.product__title h1,
.title.title,.section-header .title{
  font-family:var(--font-heading-family) !important;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.9;
}


/* ---------- geen streepje onder een link ----------
   Craft onderstreept bij hover. Op de site doet alleen de kleur het werk:
   beige wordt oranje. Dat is genoeg en het houdt de bladzijde rustig. */
a,a:focus,.link,.link:focus,.header__menu-item,.list-menu__item,.card__heading a,.footer a,summary{
  text-decoration:none !important;
  text-underline-offset:0 !important;
}@media(hover:hover){a:hover,.link:hover,.header__menu-item:hover,.list-menu__item:hover,.card__heading a:hover,.footer a:hover,summary:hover{
  text-decoration:none !important;
  text-underline-offset:0 !important;
}}
@media(hover:hover){a:hover,.link:hover,.header__menu-item:hover,.list-menu__item:hover{
  color:rgb(247,60,28) !important;
}}
/* Craft tekent bij sommige items een lijntje met een pseudo-element in plaats
   van met text-decoration. Ook die weg. */
.header__menu-item:after,.list-menu__item:after,.link:after{display:none !important}

/* De voorbeeldcollage van Craft is uit het thema verwijderd, dus de
   tijdelijke regel die hem verborg kon hier weg. */


/* ---------- het aanmeldblok onderaan ----------
   Craft zet dit gecentreerd neer met een kop op kopmaat. Bij ons staat alles
   links en is dit geen sectiekop maar een uitnodiging: kleiner, met de tekst
   ernaast in plaats van eronder. */
.newsletter,.newsletter .page-width,.newsletter-form{text-align:left}
.newsletter__wrapper{
  max-width:128rem;margin:0 auto;
  padding-inline:clamp(20px,5vw,74px);
  display:grid;gap:clamp(18px,2.4vw,30px);
}
@media(min-width:860px){
  .newsletter__wrapper{grid-template-columns:1fr auto;align-items:end}
}
.newsletter__wrapper > h2,.newsletter__subheading{grid-column:1}
.newsletter__wrapper > h2{
  font-size:var(--pk-kop-3,clamp(34px,6vw,60px)) !important;
  margin:0 !important;text-align:left;
}
.newsletter__subheading{
  font-size:clamp(17px,1.9vw,22px);line-height:1.5;
  color:rgb(241,236,224);max-width:46ch;margin:0;text-align:left;
}
@media(min-width:860px){
  .newsletter-form{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:end}
}
.newsletter-form__field-wrapper{max-width:420px}
.newsletter-form__field-wrapper .field__input{
  background:#383838 !important;border:0 !important;border-radius:.6rem !important;
  color:rgb(241,236,224) !important;box-shadow:none !important;
}
.newsletter-form__field-wrapper .field:after,
.newsletter-form__field-wrapper .field:before{display:none !important}
.newsletter-form__button{color:rgb(247,60,28) !important}


/* ---------- wordmerk en menu op één lijn ----------
   Het merk stond 9 px te hoog en het menu 5 px te laag. De oorzaak: de h1 om
   het wordmerk heen is hoger dan het plaatje zelf, dus het plaatje bleef aan
   de bovenkant van dat vak hangen, en de menu-items brachten hun eigen
   regelruimte mee. Beide vakken zijn nu zelf een rij die centreert. */
/* De echte boosdoener: het thema hangt zijn .h2-kopstijl aan de span om het
   wordmerk, en daar zit 18 px marge onder. Het plaatje bleef daardoor aan de
   bovenkant van een vak van 41 px hangen. */
.header__heading-link .h2{margin:0 !important}
.header__heading{display:flex;align-items:center;line-height:0}
.header__inline-menu{display:flex;align-items:center}
.header__inline-menu > ul,.header__inline-menu .list-menu{
  display:flex;align-items:center;margin:0;padding:0;
}
/* En het menu had een marge van 10,5 px aan de bovenkant meegekregen; die
   duwde het net zoveel naar beneden als het merk te hoog stond. */
.header__inline-menu{align-self:center;margin:0 !important}
.header__inline-menu > ul,.header__inline-menu .list-menu{
  margin:0 !important;padding:0 !important;align-items:center !important;
}
.header__inline-menu .list-menu__item,.header__menu-item{
  padding-top:0 !important;padding-bottom:0 !important;
  margin-top:0 !important;margin-bottom:0 !important;
  display:inline-flex;align-items:center;
}

/* ---------- de kop op middelmaat schermen ----------
   Het menu heeft 586 px nodig en past pas naast het woordmerk, het zoekicoon,
   de landkeuze, het account en de winkelwagen vanaf ongeveer 1206 px.
   Daaronder viel het over twee regels en werd de balk 92 px hoog in plaats van
   74. Dan liever de hamburger, net als op de site: een balk die soms twee
   regels is, is geen balk meer. De grens ligt op 1259 zodat er ruim vijftig
   pixels speling is; groeit het menu, dan moet dit getal mee omhoog. */
@media (min-width:990px) and (max-width:1259px){
  .header .header__inline-menu{display:none !important}
  .header header-drawer{display:flex !important;order:9;margin-left:0}
  /* Zonder het menu is er niets meer dat de rechterkant naar rechts duwt. */
  .header .header__search{margin-left:auto}
}

/* ---------- de lichtkrant boven de korrel ----------
   De filmkorrel ligt met mix-blend-mode over alles heen. Op een groot vlak
   verzadigd oranje haalt dat de kleur zichtbaar naar beneden; hij wordt mat.
   Op de site valt dat niet op omdat het oranje daar in kleinere stukken zit.
   De baan gaat daarom één laag boven de korrel staan, dan blijft het oranje
   het echte oranje en houdt de rest van de bladzijde zijn textuur. */
.utility-bar.utility-bar{position:relative;z-index:10000}


/* ==========================================================================
   CRAFT: MENU EN VOET AFGEMAAKT
   ========================================================================== */

/* ---------- echt geen streepje meer in het menu ----------
   Craft zet de onderstreping niet op de link zelf maar op de span erin, en
   ook op :focus en :active. Vandaar dat de vorige ronde hem niet ving. */
.header a,.header a *,.header a:focus,.header a:focus *,.header a:active,.header a:active *,.header__menu-item,.header__menu-item *,.list-menu__item,.list-menu__item *,.footer a,.footer a *{
  text-decoration:none !important;
  text-decoration-line:none !important;
  border-bottom:0 !important;
}@media(hover:hover){.header a:hover,.header a:hover *,.header__menu-item:hover,.header__menu-item:hover *,.footer a:hover,.footer a:hover *{
  text-decoration:none !important;
  text-decoration-line:none !important;
  border-bottom:0 !important;
}}
@media(hover:hover){.header__menu-item:hover span,.header__menu-item:hover{color:rgb(247,60,28) !important}}

/* ---------- de pagina waar je bent ----------
   De streep uit de huisstijl ervoor, en oranje. Zelfde device als voor de
   koppen: een getekende balk op halve kapitaalhoogte, geen getypt teken. */
.header__menu-item[aria-current="page"],
.header__menu-item[aria-current="page"] span,
.header__active-menu-item{
  color:rgb(247,60,28) !important;
}
/* In het menu zelf geen streepje: daar is de kleurwissel genoeg. De streep
   hoort voor de grote kop van de pagina waar je terechtkomt. */

/* ==========================================================================
   DE VOET, ZOALS OP DE SITE
   Grote oranje klapper bovenaan, dan de kleine dingen, dan het colofon, en
   helemaal onderaan de P. Alles rechts uitgelijnd, want die tegenstelling met
   de linkse rest houdt het blok bij elkaar.
   ========================================================================== */

.footer.footer{
  background:#2D2D2D !important;
  border:0 !important;
  padding-top:clamp(48px,7vw,96px) !important;
  overflow:hidden;
}

/* de klapper */
.footer.footer::before{
  content:"Designing & enjoying since 2001";
  display:block;
  max-width:128rem;margin:0 auto clamp(30px,4vw,56px);
  padding-inline:clamp(20px,5vw,74px);
  font-family:"HNXBlkCn","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(44px,10vw,132px);line-height:.88;
  color:rgb(247,60,28);
}

/* de kleine dingen */
.footer__content-top{padding-bottom:0}
.footer__content-bottom{border-top:0 !important;padding-top:clamp(20px,2.6vw,32px)}
.footer__content-bottom-wrapper{align-items:flex-end}
.footer__column{align-items:flex-end}
.footer-block__heading,.footer__localization h2,.footer__column h2,
.footer .caption-large,.localization-form h2{
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.14em;
  font-size:11px !important;line-height:1;
  color:rgb(154,147,132) !important;
  margin:0 0 8px !important;
}
.footer__list-social{justify-content:flex-end}
.footer__copyright{
  text-align:right !important;
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.12em;
  font-size:10px !important;
  color:rgb(154,147,132) !important;
}
.footer__copyright a{color:rgb(154,147,132) !important}

/* en onderaan de P, klein en rechts */
/* Exact dezelfde meetkunde als .pmark op de site. Het bestand is 320 bij 320
   met 74 px lucht links en rechts en 76 px boven en onder, dus het zwart is
   172 px breed. --pmark is de maat van dat zwart; de doos is navenant groter
   en de negatieve marges halen de lucht er weer af. Zo staat het zwart op de
   rechterlijn en telt de lucht niet mee in de regelafstand. */
.footer.footer::after{
  --pmark:clamp(26px,2.6vw,34px);
  content:"";display:block;
  width:calc(var(--pmark) * 320 / 172);
  height:calc(var(--pmark) * 320 / 172);
  /* De P hangt buiten de kolom, dus de tussenruimte van de kolom geldt hier
     niet vanzelf. Die tellen we er bij op, en trekken de lucht van het bestand
     er weer af, zodat het zwart net als op de site 18 px onder het colofon
     begint. */
  margin:calc(clamp(12px,1.4vw,18px) + var(--pmark) * -76 / 172)
         calc(var(--pmark) * -74 / 172)
         calc(var(--pmark) * -76 / 172) auto;
  background:url("https://www.pankra.com/assets/img/pankra-p.webp") center / contain no-repeat;
}


/* ---------- de streep voor de paginakop ----------
   Op de site staat voor iedere grote kop de streep uit de huisstijl. Hier dus
   ook: boven de artikelen, in oranje, op halve kapitaalhoogte zodat hij
   precies op het midden van de letters ernaast ligt. */
.collection-hero__title,
#MainContent .title--primary,
.product__title h1,
.main-page-title,
.article-template__title{
  display:block;
}
.collection-hero__title::before,
#MainContent .title--primary::before,
.main-page-title::before,
.article-template__title::before{
  content:"";display:block;
  width:1.05em;height:.135em;
  background:rgb(247,60,28);
  margin:0 0 .28em;
}


/* ---------- geen mailinglijst ----------
   We mailen niet, dus dat blok hoort er niet te staan. Het zit in de
   voetgroep van het thema; deze regel zet hem uit. Wil je hem ooit terug,
   dan gaat dit weg en zet je hem aan in de editor. */
.newsletter,.footer-block--newsletter{display:none !important}
/* De bovenhelft van de voet stond helemaal uit toen daar alleen nog het
   nieuwsbriefblok in zat. Nu komt daar het menublok in, dus hij mag weer aan;
   zonder blokken valt hij vanzelf dicht. */
.footer__content-top.footer__content-top{
  padding:0 !important;border:0 !important;margin:0 !important}
.footer__content-top .footer-block__details-content{padding:0 !important}
.footer .footer-block--menu{width:100% !important;margin:0 !important;padding:0 !important}


/* ==========================================================================
   OPRUIMRONDE: SORTEERBALK, TAALKEUZE EN VOET
   Drie plekken waar het thema nog zijn eigen vorm liet zien.
   ========================================================================== */

/* ---------- de balk boven het raster ----------
   Sorteren was een grijs afgerond blok met een eigen hoogte, waardoor het
   label ernaast en het aantal producten alle drie op een andere lijn stonden.
   Alles staat nu op één regel, plat, met een haarlijn onder de keuze. */
.facets-container,.facets__form,.facets-wrapper{align-items:center}
.facet-filters,.facet-filters__field{
  display:flex;align-items:center;gap:.8em;margin:0;
}
.facet-filters__label,.facet-filters__label label{margin:0 !important;line-height:1}
.facet-filters .select,.facets__form .select{width:auto}
.facet-filters .select__select,.facets__form .select__select,
select.select__select{
  background:transparent !important;
  border:0 !important;border-bottom:2px solid rgba(234,225,204,.14) !important;
  border-radius:0 !important;box-shadow:none !important;
  height:auto !important;min-height:0 !important;
  padding:.5rem 2.6rem .5rem 0 !important;
  font-family:"Helvetica Neue","Helvetica",Arial,sans-serif !important;
  font-weight:700 !important;text-transform:uppercase;letter-spacing:.14em;
  font-size:1.3rem !important;line-height:1 !important;
  color:rgb(241,236,224) !important;
}
.facet-filters .select:after,.facets__form .select:after,
.select:before,.select:after{box-shadow:none !important;border:0 !important}
.facet-filters .icon-caret,.select .icon-caret{right:.6rem}
.product-count,.product-count__text{margin:0 !important;line-height:1}

/* ---------- taal en munt in de kop ----------
   Het euroteken liep tegen het pijltje aan. Ruimte ernaast, en dezelfde
   kleine kapitalen als de rest van de kop. */
.header .localization-form__select,
.header .disclosure__button{
  padding:.6rem 2.4rem .6rem 0 !important;
  font-size:1.2rem !important;
}
.header .localization-form .icon-caret,
.localization-form__select .icon-caret{right:.4rem}

/* ---------- de voet, alles op één lijn rechts ----------
   Het was een verzameling losse dingen op verschillende hoogtes: het label
   links, PayPal helemaal rechts, de credits eronder en de P weer los. Nu is
   het één rechts uitgelijnde stapel, net als de voetbalk op de site. */
.footer__content-bottom-wrapper{
  display:flex !important;flex-wrap:wrap;
  align-items:flex-end;justify-content:flex-end;
  gap:clamp(14px,2vw,26px);
}
.footer__column{align-items:flex-end;text-align:right;width:auto}
.footer__column--info{align-items:flex-end}
.footer__payment{margin:0}
.footer__payment .list-payment{justify-content:flex-end;margin:0}
.footer__payment .list-payment__item img{height:20px;width:auto;opacity:.45;filter:grayscale(1)}
.footer__localization{margin:0}
.footer__copyright{margin:0 !important;width:100%}


/* Het aantal producten zat in een eigen rij van het raster en stond daardoor
   4 px hoger dan het label en de keuze ernaast. Zelfde hoogte, zelf
   centreren, dan liggen alle drie de middens gelijk. */
/* Het formulier eromheen had 5 px marge aan de onderkant. In een vak dat
   centreert schuift dat de inhoud precies de helft daarvan omhoog: 2,5 px.
   Dat was het verschil. Marge eraf en alle drie de middens liggen gelijk. */
.facets__form{margin:0 !important}
.facets__form .product-count,.product-count{
  align-self:center;display:block;min-height:0;
  height:2.5rem;line-height:2.5rem !important;
}


/* ==========================================================================
   CONSEQUENTIERONDE
   Alles wat op één plek fout ging, gaat op alle plekken fout. Deze regels
   pakken het per soort element aan in plaats van per bladzijde.
   ========================================================================== */

/* ---------- koppen breken nooit middenin een woord ----------
   In de lades en meldingen werd INLOGGEGEVENS opgeknipt tot INLOGGEGE / VENS
   en ARTIKEL TOEGEVO / EGD AAN. Het thema zet daar hard afbreken aan om lange
   productnamen te temmen. Voor koppen willen we dat nooit. */
h1,h2,h3,h4,h5,h6,.h0,.h1,.h2,.h3,.h4,.h5,
.card__heading,.product__title,.cart-item__name,
.cart-notification__heading,.drawer__heading,.collection-hero__title{
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:none !important;
}

/* ---------- koppen in kleine vakken ----------
   De schaal van 1,55 is gemaakt voor een kop over de volle breedte. In een
   lade van 380 px is dat onleesbaar groot. Daar terug naar sectiemaat. */
.drawer h2,.drawer .h2,.cart-notification__heading,
.drawer__heading,.cart-drawer__heading,
.quick-add-modal h2,.modal__content h2,
.customer h1,.customer h2,#customer_login h1,.login h1{
  font-size:clamp(22px,2.6vw,30px) !important;
  line-height:.95 !important;
}
.cart-notification .cart-item__name,.drawer .cart-item__name{
  font-size:clamp(16px,1.7vw,20px) !important;
}

/* ---------- de paginakop: streep en tekst allebei oranje ---------- */
.collection-hero__title,.product__title,.product__title h1,
.main-page-title,.article-template__title,#MainContent .title--primary,
.cart__empty-text,.title.title--primary{
  color:rgb(247,60,28) !important;
  opacity:1 !important;
}
.product__title{display:block}
.product__title h1::before{
  content:"";display:block;
  width:1.05em;height:.135em;
  background:rgb(247,60,28);
  margin:0 0 .28em;
}

/* ---------- de lichtkrant echt boven de korrel ----------
   De baan stond al op z-index 10000, maar zijn sectiegroep zet zelf z-index 4
   en maakt daarmee een eigen stapel. Binnen die stapel is 10000 het hoogste,
   maar de stapel zelf blijft onder de korrel. De groep moet dus omhoog. */
.shopify-section-group-header-group.shopify-section-group-header-group{
  position:relative;z-index:10000 !important;
}

/* ---------- knoppen in een lade ----------
   Drie oranje knoppen onder elkaar is drie keer hetzelfde roepen. Alleen de
   eerste is de actie, de rest is een uitweg. */
.cart-notification__links .button:not(:first-child),
.cart-notification__links .button--secondary,
.cart-notification__links .link{
  background:transparent !important;
  color:rgb(241,236,224) !important;
  box-shadow:inset 0 0 0 2px rgba(234,225,204,.24) !important;
}
@media(hover:hover){.cart-notification__links .button:not(:first-child):hover{
  color:rgb(247,60,28) !important;
  box-shadow:inset 0 0 0 2px rgb(247,60,28) !important;
}}

/* ---------- de afsluiter ----------
   Drie regels, met de streep strak tegen de tekst aan, zoals gevraagd. */
.footer.footer::before{
  content:"—Designing\A& enjoying\ASince 2001—";
  white-space:pre;
}


/* ==========================================================================
   DE VOET VAN DE WINKEL, OPGERUIMD
   Het was een verzameling losse dingen op verschillende hoogtes. Nu vier
   lagen onder elkaar, in dezelfde volgorde als de voet van de site:
   de lichtkrant, de klapper, de kleine dingen, en dan de P.
   ========================================================================== */

/* ---------- de lichtkrant sluit de bladzijde af ----------
   Dezelfde baan als bovenaan, zodat de pagina tussen twee oranje strepen
   staat. Hij hangt aan de voetgroep en niet aan de voet zelf, want daar
   zitten de klapper en de P al op. */
.shopify-section-group-footer-group{position:relative}
.shopify-section-group-footer-group::before{
  content:"—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power—Fueled by emotion—Since 2001—Turning ideas into identity—Essence-driven design power ";
  display:block;width:max-content;
  background:rgb(247,60,28);color:#2D2D2D;
  font-family:"HNXBlkCn","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(20px,2.5vw,30px);line-height:1;white-space:nowrap;
  padding:calc(.62em + .142em) 0 calc(.62em - .142em);
  animation:pk-krant 60s linear infinite;
}
/* De baan is breder dan het venster, dus de groep moet hem afknippen. */
.shopify-section-group-footer-group{overflow:hidden}

/* De voetgroep bestaat uit twee secties: de lege nieuwsbriefsectie en de voet
   zelf. Zonder dit krijgen ze allebei een lichtkrant en staan er twee banen
   boven elkaar. De nieuwsbrief was al leeg, dus die gaat er helemaal uit.
   Twee selectors voor hetzelfde: de eerste werkt overal, de tweede vangt het
   geval waarin Shopify de sectieklasse ooit weglaat. */
.shopify-section-group-footer-group.section{display:none !important}
.shopify-section-group-footer-group:has(.newsletter){display:none !important}

/* ---------- alles onder de klapper ----------
   De voet van de site heeft een duidelijke regel en die volgen we hier ook: de
   klapper staat links over de volle breedte, en al het kleine goed staat rechts
   onder elkaar, allemaal eindigend op dezelfde rechterlijn. Geen haarlijn, geen
   kolommen naast elkaar, geen dingen op verschillende hoogtes. Op een telefoon
   schuift dezelfde stapel naar links, precies zoals op de site. */
/* De regelafstand komt niet uit de duim maar uit .footbar op de site: daar
   staat de hele stapel in een kolom met een tussenruimte van clamp(12,1.4vw,18)
   en een aanloop na de klapper van 77 px op een venster van 1280. Diezelfde
   getallen hier, zodat de twee voeten dezelfde maat hebben. */
.footer.footer::before{margin-bottom:0 !important}

.footer__content-bottom.footer__content-bottom{
  display:flex !important;flex-direction:column;align-items:flex-end;
  gap:clamp(12px,1.4vw,18px);
  border-top:0 !important;
  padding:clamp(44px,6vw,77px) 0 0 !important;
}
/* Craft geeft deze blokken een eigen breedte en 50 px binnenmarge. Daardoor
   stond alles net iets anders uitgelijnd dan de klapper erboven. */
.footer__content-bottom-wrapper.footer__content-bottom-wrapper{
  display:flex !important;width:100% !important;justify-content:flex-end;
  margin:0 !important;padding:0 !important;
}
.footer__column.footer__column{width:auto !important;flex:0 0 auto;
  align-items:flex-end;text-align:right;margin:0 !important;padding:0 !important}

/* Land/regio is een formulierlabel. De keuzelijst eronder zegt zelf al
   Nederland | EUR, dus dat kopje is enkel ruis. */
#FooterCountryLabel{display:none !important}

/* De keuzelijst krijgt dezelfde letter als de voetlinks op de site: klein,
   kapitalen, ruim gespatieerd. */
@media(hover:hover){.footer .localization-form__select.localization-form__select:hover{opacity:1}}
.footer .localization-form__select.localization-form__select{
  /* !important omdat een oudere regel hierboven alles met caption-large op
     11 px grijs zet; die is voor de kopjes, niet voor deze knop. */
  font-family:var(--pk-body);font-size:13px !important;font-weight:700;
  line-height:13px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--pk-beige) !important;opacity:.72;
  min-height:0 !important;height:auto !important;
  padding:0 !important;margin:0 !important;
}
/* Craft hangt het pijltje absoluut op 15 px van rechts. Zonder de binnenmarge
   van het thema viel het daarmee boven op het euroteken. Het loopt nu gewoon
   mee achter de tekst aan. */
.footer .localization-form__select svg{
  position:static !important;width:11px;height:11px;
  margin:0 0 0 8px;flex:0 0 auto}
/* Craft zet er 10 px rechtermarge omheen en 10 px lucht boven en onder. Die
   marge hield de keuzelijst van de rechterlijn af en die lucht maakte de regel
   33 px hoog in plaats van 13, waardoor de afstanden eromheen niet klopten. */
.footer .localization-form{margin:0 !important;padding:0 !important}

/* PayPal komt binnen als vol logo in een wit hoekje en is daarmee het enige
   vreemde element in de hele voet. Bij het afrekenen staan de betaalwijzen
   toch nog een keer, dus hier weg. De hele kolom gaat weg en niet alleen het
   logo: bleef de lege kolom staan, dan hield de tussenruimte van 26 px de
   keuzelijst van de rechterlijn af. */
.footer__column--info,.footer__payment{display:none !important}

/* Craft zet het colofon op 11 px met een regelhoogte van bijna 19; op de site
   is het 10 op 10. Zonder dit werd het vak negen pixels te hoog en klopte de
   afstand naar de regel erboven niet meer. */
.footer__copyright,
.footer__copyright .copyright__content{
  font-size:10px !important;line-height:10px !important}
.footer__copyright{width:auto !important;text-align:right !important;
  margin:0 !important}
/* Hetzelfde euvel bij de keuzelijst: het omhulsel liet er nog wat regelhoogte
   omheen staan. */
.footer .footer__localization{line-height:0}


/* ---------- het colofon ----------
   Shopify hangt er standaard zijn eigen reclame achter: POS and Ecommerce by
   Shopify. Dat is voor Shopify interessant en voor niemand anders. Weg ermee.
   Wat overblijft is dezelfde regel als op de site. */
.footer__copyright .copyright__content + .copyright__content,
.footer__copyright .policies{display:none !important}
.footer__copyright .copyright__content:first-child::after{
  content:" · Kampen & Haarlem"}

/* ---------- de voetlinks ----------
   Zelfde maat, kleur en spatiering als op de site. De opmaak komt uit het
   menublok van Craft; hier staat alleen hoe het eruitziet. Geen icoontjes: de
   sociale accounts van Craft kennen geen LinkedIn, en Instagram in zijn eentje
   leest als een vergissing. */
.footer .footer-block--menu .footer-block__heading{display:none !important}
.footer .footer-block__details-content.list-unstyled{
  display:flex !important;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:clamp(14px,2.4vw,34px);margin:0 !important}
.footer .footer-block__details-content .list-menu__item--link{
  font-family:var(--pk-body);font-size:13px !important;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--pk-beige) !important;padding:0 !important;transition:color .2s}
@media(hover:hover){.footer .footer-block__details-content .list-menu__item--link:hover{
  color:var(--pk-oranje) !important;text-decoration:none}}



@media(max-width:749px){
  /* Verdubbelde klassenamen, want Craft laadt zijn eigen voetstijl na dit
     bestand; bij gelijke sterkte wint dan zijn regel. */
  .footer__content-bottom.footer__content-bottom{align-items:flex-start}
  .footer__content-bottom-wrapper.footer__content-bottom-wrapper{justify-content:flex-start}
  .footer__column.footer__column{align-items:flex-start;text-align:left}
  .footer__copyright{text-align:left !important}
  .footer .footer-block__details-content.list-unstyled{justify-content:flex-start}
  /* Op smal scherm staat alles links, dus de optische correctie van de P ook. */
  .footer.footer::after{
    margin-left:calc(var(--pmark) * -74 / 172);margin-right:auto}
}

@media(prefers-reduced-motion:reduce){
  .shopify-section-group-footer-group::before{animation:none}
}


/* ==========================================================================
   GELIJKGETROKKEN MET PANKRA.COM (24 oktober 2026; winkel-9 = winkel-8 met het knopherstel; winkel-10 = winkel-9 met sorteren en filteren in de menuletter)
   Lucas: de winkel liep achter op de vormgeving van pankra.com. Dit bestand
   is winkel.css van 2 augustus, met alle :hover-regels in
   @media(hover:hover) (zodat een tik op de telefoon meteen een klik is), en
   met dit blok erbij. Per regel de bron op de site. Actielijst en uitleg:
   winkel/GELIJKTREKKEN-2026-10.md in de projectmap.
   ========================================================================== */

/* Een tik is genoeg (site 23 okt): geen wachttijd voor dubbeltik-zoomen. */
a,button,summary{touch-action:manipulation}

/* Maten gelijk aan de site. */
:root{
  --pk-kop-2:clamp(40px,12.5vw,88px);
  --pk-sectie:clamp(64px,9vw,120px);
}

/* 1-2. De kopbalk: antraciet, geen matglas, geen overgang, in een tik
   (header.scrolled, besluit 11 sep), en de hoogte van de site zodat de knop
   lucht heeft (--balk, 16 okt). */
.header-wrapper{background:#2D2D2D !important;-webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;transition:none !important}
.header.header{min-height:clamp(74px,6.7vw,96px)}

/* 3. De menuletter (16 okt): gewone letter, halfvet, onderkast, geen
   spatiering, op de knopmaat. Kleine kapitalen alleen nog voor echte labels. */
.header__menu-item,.header__inline-menu .list-menu__item,
.menu-drawer__menu-item,.footer .list-menu__item{
  font-family:var(--pk-body) !important;font-weight:500;text-transform:none;
  letter-spacing:-.005em;font-size:var(--pk-knop-tekst);color:var(--pk-beige-2)}

/* 12. De taal- en muntkeuze is een keuze, geen label: ook de menuletter. */
.localization-form__select,.disclosure__button,
.localization-form .button,.localization-form button{
  font-weight:500 !important;text-transform:none !important;letter-spacing:-.005em !important;
  font-size:var(--pk-knop-tekst) !important}
.footer .localization-form__select,.footer .localization-form__select *,.footer .disclosure__button *{
  text-transform:none !important;letter-spacing:-.005em !important;font-weight:500 !important}

/* 6. Knoppen: de maten van de site (--knop-hoogte, --knop-tekst, de
   zijmarge), bij aanwijzen naar beige zoals .btn-primary op de site. De
   tweede knop is beige met oranje bij aanwijzen (.btn-solid). Geen omlijnde
   knoppen meer. */
.button,.shopify-challenge__button,.customer button{
  font-size:var(--pk-knop-tekst);min-height:var(--pk-knop-hoogte);
  padding:0 clamp(22px,2.4vw,31px);border-radius:var(--pk-rond)}
.button--secondary{--color-button:246,241,230;--color-button-text:45,45,45}
.button::after,.button::before,.button--secondary::after,.cart-notification__links .button::after{
  box-shadow:none !important}
@media(hover:hover){
  .button:not(.button--secondary):not(.button--tertiary):not(.localization-form__select):hover{
    background-color:#F6F1E6 !important;color:#2D2D2D !important}
  .button--secondary:hover{background-color:#F73C1C !important;color:#2D2D2D !important}
}

/* 7. De tekst onder een producttegel (site .onder, 16 okt): de naam in de
   gewone letter op de knopmaat, de prijs halfvet in oranje, geen kapitalen. */
.card__heading.card__heading,.card__heading.card__heading a,
.card-information .card__heading.card__heading{
  font-family:var(--pk-body) !important;text-transform:none;letter-spacing:-.005em;
  font-weight:500;font-size:var(--pk-knop-tekst) !important;line-height:1.3 !important}
.card-information .price,.card-information .price-item,.card__information .price{
  font-weight:500;text-transform:none;letter-spacing:-.005em;font-size:var(--pk-knop-tekst)}

/* 8. Het telefoonmenu als op de site (16 okt): een donker paneel, de
   woorden onder elkaar op 20 px, regels van ruim 60 px met haarlijnen
   ertussen. De hamburger rechts, zoals op de site. */
.menu-drawer{background:#2D2D2D !important;border-top:1px solid var(--pk-haar)}
.menu-drawer__navigation{padding:4px var(--pk-gutter) 26px !important}
.menu-drawer__menu{display:block !important;margin:0 !important;padding:0 !important}
.menu-drawer__menu > li{display:block;width:100%;margin:0 !important}
/* Craft geeft de items een regelhoogte van 44 px en een oudere regel hierboven
   poetst alle lijnen onder menu-items weg; daarom hier zwaarder. */
.menu-drawer .menu-drawer__menu-item.menu-drawer__menu-item{
  display:flex;width:100%;font-size:20px !important;padding:20px 0 !important;
  line-height:1.2 !important;border-bottom:1px solid var(--pk-haar) !important}
.menu-drawer .menu-drawer__menu > li:last-child .menu-drawer__menu-item.menu-drawer__menu-item{border-bottom:0 !important}
@media(max-width:989px){
  .header header-drawer{order:9;margin-left:0}
  .header .header__heading{margin-right:auto}
}

/* 9. De voet: links en colofon in de gewone letter (16 okt); het colofon niet
   meer in piepkleine kapitalen maar op de knopmaat, gedimd. */
.footer__copyright,.footer__copyright .copyright__content{
  font-family:var(--pk-body) !important;font-weight:400 !important;text-transform:none;
  letter-spacing:-.005em;font-size:var(--pk-knop-tekst) !important;line-height:1.3 !important}
/* Inloggen onderin het telefoonmenu: een link, geen kop; dus de menuletter. */
.menu-drawer__account,.menu-drawer__account *{
  font-family:var(--pk-body) !important;font-weight:500 !important;text-transform:none !important;
  letter-spacing:-.005em !important;font-size:var(--pk-knop-tekst) !important}

/* Herstel 24 okt: Craft tekent de tweede knop (o.a. Aan winkelwagen
   toevoegen) als omlijning zonder vlak; zonder die lijn bleef er losse tekst
   over. Nu een echt vlak: beige-2 met antraciet, zoals .btn-solid op de site. */
.button--secondary,.button.button--secondary,.product-form__submit.button--secondary{
  background-color:#F6F1E6 !important;color:#2D2D2D !important;
  letter-spacing:-.005em !important;font-weight:500 !important}

/* ---------- sorteren en filteren in de menuletter (24 oktober 2026) ----------
   Lucas: de kapitaaltjes boven het productraster leken een kruimelpad. Het zijn
   keuzes waar je op klikt, geen labels; sinds 16 oktober zijn kleine kapitalen
   op pankra.com alleen nog voor echte labels. De keuze zelf in de menuletter,
   de aanloopwoorden (Filter:, Sorteer op:) en het aantal producten gedimd.
   (De filters zelf staan sinds vandaag uit in de collectiepagina; deze regels
   houden de opmaak goed als ze ooit terugkomen.) */
.facets__summary,.facets__summary-label,.facets__summary span,
.facet-filters__sort,.facet-filters__sort option,select.facet-filters__sort,
.facets__heading,.facet-filters__label,.facet-filters__label label,
.product-count,.product-count__text,.mobile-facets__label,.facets__label{
  font-family:var(--pk-body) !important;font-weight:500 !important;text-transform:none !important;
  letter-spacing:-.005em !important;font-size:var(--pk-knop-tekst) !important;line-height:1.3 !important}
.facets__summary,.facets__summary-label,.facet-filters__sort{color:var(--pk-beige-2) !important}
.facets__heading,.facet-filters__label,.facet-filters__label label,
.product-count,.product-count__text{color:var(--pk-dim) !important}
/* Het sorteervak zelf kreeg via .caption-large 13 px; hier zwaarder. */
.facet-filters select.facet-filters__sort.select__select.caption-large,
select.facet-filters__sort.select__select.caption-large{font-size:var(--pk-knop-tekst) !important;
  font-weight:500 !important;letter-spacing:-.005em !important;text-transform:none !important}

/* ---------- naam en prijs dichter bij elkaar, sorteervak hoger (24 oktober 2026, Lucas) ----------
   Craft zette 14 px boven het prijsblok en 7 px boven de prijs: 21 px tussen
   naam en prijs. Op pankra.com (.onder) is dat 2 px; nu hier ook.
   Het sorteervak was 32 px hoog met een letter van 20 px, waardoor de staart
   van de g wegviel. Nu groeit het mee met de letter. */
.card-information.card-information{padding-top:2px !important}
.card-information .price.price{margin-top:0 !important}
.card-information>.caption-large:empty{display:none}
.facet-filters select.facet-filters__sort.select__select.caption-large,
select.facet-filters__sort.select__select.caption-large{height:auto !important;min-height:36px;
  line-height:1.3 !important;padding-top:4px !important;padding-bottom:6px !important}

/* ======================================================================
   PRODUCTPAGINA EN LOPENDE TEKST (24 oktober 2026, Lucas: "de regelafstand
   en lettergrootte zijn enorm"). Beoordeeld door een typograaf en een
   interfaceontwerper; hun voorstellen samengevoegd.
   ====================================================================== */
:root{
  --pk-lees:clamp(16px,1.25vw,18px);      /* lopende tekst, body van de site */
  --pk-na-kopje:clamp(22px,2.2vw,30px);   /* site --na-kopje */
  --pk-haar-2:rgba(234,225,204,.26);      /* site --hair-2 */
}

/* ---------- lopende tekst ----------
   Stond op --pk-tekst-2 (22 px), op de site de maat voor een intro van een
   of twee regels. Lopende tekst krijgt de basismaat van de site, 18 px, op
   de telefoon 16, regelafstand 1,5 en geen extra spatiering (Craft zet body
   op .06rem). Geldt voor product, uitklapvakken, pagina's, blog en
   voorwaarden. Een lijst en geen kale .rte: de rich-text-kop van Craft
   draagt die klasse ook. */
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte{
  font-size:var(--pk-lees) !important;line-height:1.5 !important;
  letter-spacing:0 !important;color:var(--pk-beige);text-wrap:pretty}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte :is(p,li,dd,blockquote){
  font-size:inherit !important;line-height:inherit !important;letter-spacing:inherit !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte>:is(p,ul,ol,blockquote,table){
  margin:0 0 1em !important;max-width:34em}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte>:first-child{margin-top:0 !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte>:last-child{margin-bottom:0 !important}

/* Tussenkoppen kleiner, en veel meer lucht erboven dan eronder, zodat de
   kop bij de tekst eronder hoort. */
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte :is(h2,h3){
  line-height:1 !important;letter-spacing:.005em !important;
  margin:calc(var(--pk-lees)*2.25) 0 calc(var(--pk-lees)*.6) !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte h2{font-size:var(--pk-kop-5) !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte h3{font-size:clamp(18px,2vw,24px) !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte :is(h4,h5,h6){
  font-family:var(--pk-body) !important;font-weight:700 !important;text-transform:uppercase;
  font-size:var(--pk-tekst-3) !important;letter-spacing:.14em !important;
  line-height:1.3 !important;color:var(--pk-oranje) !important;
  margin:calc(var(--pk-lees)*2) 0 calc(var(--pk-lees)*.5) !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte :is(h2,h3,h4,h5,h6)+:is(h2,h3,h4,h5,h6){
  margin-top:calc(var(--pk-lees)*.5) !important}

/* Lijsten: een oranje streepje dat buiten de tekst hangt, en een kleine
   tussenruimte zodat punten van meer regels los van elkaar staan. */
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte :is(ul,ol){
  padding-left:1.1em !important;list-style-position:outside !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte ul{list-style-type:"-" !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte li{padding-left:.45em;margin:0 !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte li+li{margin-top:.4em !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte li>p{margin:0 !important}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte li::marker{
  color:var(--pk-oranje);font-weight:700}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte :is(strong,b){
  font-weight:700;color:var(--pk-beige-2)}
:is(.product__description,.accordion__content,.article-template__content,
  .shopify-policy__body>*,.main-page-title~*).rte.rte a{
  text-decoration:underline !important;text-decoration-thickness:1px;text-underline-offset:.18em}
@media(hover:hover){
  :is(.product__description,.accordion__content,.article-template__content,
    .shopify-policy__body>*,.main-page-title~*).rte.rte a:hover{color:var(--pk-beige-2) !important}
}

/* ---------- productpagina boven de beschrijving ----------
   Titel, prijs, keuze, knop: in die volgorde in gewicht. Kleine kapitalen
   alleen voor de echte labels (Licentie, Aantal). */
.product__info-container.product__info-container>*{margin-top:0 !important;margin-bottom:0 !important}
.product__info-container.product__info-container>*+*{margin-top:var(--pk-na-kopje) !important}
.product__info-container.product__info-container>.product__title+*{margin-top:clamp(12px,1.4vw,18px) !important}
.product__info-container.product__info-container>.product__tax{margin-top:4px !important}

/* Titel: sectiemaat op de telefoon, een trap lager in de smalle kolom. */
.product__info-container .product__title.product__title h1{
  font-size:var(--pk-kop-2) !important;line-height:.9 !important;margin:0 !important}
@media(min-width:750px){
  .product__info-container .product__title.product__title h1{font-size:var(--pk-kop-3) !important}
}

/* Prijs als op de tegel: 500, oranje, geen kapitalen, op de helft van de titel. */
.product__info-container .price.price,
.product__info-container .price.price .price-item,
.product__info-container .price.price .price__regular,
.product__info-container .price.price .price__sale{
  font-family:var(--pk-body) !important;font-weight:500 !important;text-transform:none !important;
  letter-spacing:-.005em !important;font-size:var(--pk-kop-5) !important;line-height:1.1 !important}

/* Btw-regel: een gedimde voetnoot. Draagt ook .rte, daarom zwaarder. */
.product__info-container .product__tax.product__tax,
.product__info-container .product__tax.product__tax p{
  font-family:var(--pk-body) !important;font-weight:400 !important;text-transform:none !important;
  letter-spacing:0 !important;font-size:15px !important;line-height:1.35 !important;
  color:var(--pk-dim) !important;margin:0 !important}

/* Labels: echte kleine labels, gedimd, dicht op wat ze benoemen. */
.product__info-container fieldset.product-form__input .form__label.form__label,
.product__info-container .product-form__quantity .form__label.form__label,
.product__info-container .product-form__quantity .quantity__label.quantity__label{
  font-family:var(--pk-body) !important;font-weight:700 !important;text-transform:uppercase !important;
  letter-spacing:.14em !important;font-size:var(--pk-tekst-3) !important;line-height:1 !important;
  color:var(--pk-dim) !important;margin:0 0 10px !important;padding:0 !important}

/* Varianten in de menuletter, links, met de ronding van de knoppen. Ze
   lopen naast elkaar door; een lange keuze breekt netjes links af. */
.product__info-container fieldset.product-form__input.product-form__input{
  max-width:none !important;min-width:0 !important;margin:0 !important;padding:0 !important;border:0}
.product__info-container fieldset.product-form__input+fieldset.product-form__input{margin-top:var(--pk-na-kopje) !important}
.product__info-container fieldset.product-form__input.product-form__input input[type="radio"]+label{
  display:inline-flex !important;align-items:center;justify-content:flex-start;
  min-height:44px;margin:0 6px 6px 0 !important;padding:.45em .8em !important;
  font-family:var(--pk-body) !important;font-weight:500 !important;text-transform:none !important;
  letter-spacing:-.005em !important;font-size:var(--pk-knop-tekst) !important;line-height:1.25 !important;
  text-align:left !important;text-wrap:pretty;
  border:1px solid var(--pk-haar-2) !important;border-radius:var(--pk-rond) !important;
  background-color:transparent !important;color:var(--pk-beige-2) !important}
.product__info-container fieldset.product-form__input.product-form__input input[type="radio"]:checked+label{
  background-color:var(--pk-beige-2) !important;color:var(--pk-donker) !important;border-color:var(--pk-beige-2) !important}
.product__info-container fieldset.product-form__input.product-form__input input[type="radio"]:focus-visible+label{
  outline:2px solid var(--pk-oranje);outline-offset:2px}
.product__info-container fieldset.product-form__input.product-form__input input[type="radio"]:is(.disabled,:disabled)+label{
  color:var(--pk-dim) !important}
@media(hover:hover){
  .product__info-container fieldset.product-form__input.product-form__input input[type="radio"]:not(:checked)+label:hover{
    border-color:var(--pk-beige-2) !important}
}

/* Aantal in de menuletter. */
.product__info-container .product-form__quantity .quantity__input.quantity__input{
  font-family:var(--pk-body) !important;font-weight:500 !important;font-size:var(--pk-knop-tekst) !important}