/* Aanvullende utility-klassen voor de tactische productpagina/catalogus-redesign.
   De hoofdstylesheet is vooraf gegenereerd zonder build-stap, dus nieuwe Tailwind-klassen
   die niet al in de oorspronkelijke broncode voorkwamen moeten hier handmatig staan. */

/* Blogartikelen komen als kale HTML uit Shopify; Tailwind's preflight-reset haalt
   standaard list-style eraf, dus die moet hier expliciet terug. */
.blog-content ul{list-style:disc;padding-left:1.25rem}
.blog-content ol{list-style:decimal;padding-left:1.25rem}
.blog-content li{margin-top:0.375rem}
.blog-content li::marker{color:#C9A15C}
.blog-content details summary{cursor:pointer}
.blog-content details[open] summary span[aria-hidden="true"]{transform:rotate(180deg)}

.accent-\[\#C9A15C\]{accent-color:#C9A15C}
.bg-black\/30{background-color:rgb(0 0 0 / 0.3)}
.bg-black\/40{background-color:rgb(0 0 0 / 0.4)}
.bg-black\/60{background-color:rgb(0 0 0 / 0.6)}
.bg-gold\/10{background-color:rgb(212 168 75 / 0.1)}
.bg-red-600{background-color:rgb(220 38 38)}
.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}
.border-gold\/30{border-color:rgb(212 168 75 / 0.3)}
.border-gold\/40{border-color:rgb(212 168 75 / 0.4)}
.border-gold\/50{border-color:rgb(212 168 75 / 0.5)}
.border-white\/5{border-color:rgb(255 255 255 / 0.05)}
.cursor-not-allowed{cursor:not-allowed}
.font-black{font-weight:900}
.from-black\/40{--tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.to-gold\/10{--tw-gradient-to: rgb(212 168 75 / 0.1) var(--tw-gradient-to-position)}
.h-14{height:3.5rem}
.h-48{height:12rem}
.w-14{width:3.5rem}
.w-7{width:1.75rem}
.items-end{align-items:flex-end}
.max-w-7xl{max-width:80rem}
.mt-14{margin-top:3.5rem}
.pt-3{padding-top:0.75rem}
.pt-5{padding-top:1.25rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.max-w-\[1600px\]{max-width:1600px}
.top-3{top:0.75rem}
.text-forest\/70{color:rgb(31 77 46 / 0.7)}
.text-white\/90{color:rgb(255 255 255 / 0.9)}
.sticky{position:sticky}
.top-24{top:6rem}
.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
.overflow-x-auto{overflow-x:auto}
.opacity-80{opacity:0.8}
.group:hover .group-hover\:text-gold{color:rgb(212 168 75)}
.aspect-\[21\/9\]{aspect-ratio:21/9}
.object-top{object-position:top}
.object-\[center_30\%\]{object-position:center 30%}
.from-night{--tw-gradient-from: rgb(11 18 14) var(--tw-gradient-from-position);--tw-gradient-to: rgb(11 18 14 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.via-night\/70{--tw-gradient-to: rgb(11 18 14 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(11 18 14 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to)}
.to-night\/20{--tw-gradient-to: rgb(11 18 14 / 0.2) var(--tw-gradient-to-position)}
.justify-end{justify-content:flex-end}
.min-h-\[280px\]{min-height:280px}
.last\:border-b-0:last-child{border-bottom-width:0px}
.border-gold\/60{border-color:rgb(212 168 75 / 0.6)}
.text-forest\/40{color:rgb(31 77 46 / 0.4)}
.text-forest\/60{color:rgb(31 77 46 / 0.6)}
.accent-\[\#1f4d2e\]{accent-color:#1f4d2e}
.border-forest\/15{border-color:rgb(31 77 46 / 0.15)}
.placeholder\:text-forest\/40::placeholder{color:rgb(31 77 46 / 0.4)}
.hover\:border-forest\/30:hover{border-color:rgb(31 77 46 / 0.3)}
.gap-x-4{column-gap:1rem}
.gap-y-2{row-gap:0.5rem}
.gap-x-6{column-gap:1.5rem}
.gap-y-5{row-gap:1.25rem}
.col-span-2{grid-column:span 2 / span 2}
.pt-6{padding-top:1.5rem}
.gap-1\.5{gap:0.375rem}
.italic{font-style:italic}
.text-\[\#1A1F71\]{color:#1A1F71}
.bg-\[\#003087\]{background-color:#003087}
.bg-\[\#CC0066\]{background-color:#CC0066}
.border-white\/25{border-color:rgb(255 255 255 / 0.25)}
.leading-\[1\.6\]{line-height:1.6}
.leading-\[1\.65\]{line-height:1.65}
.text-white\/75{color:rgb(255 255 255 / 0.75)}
.bg-black\/20{background-color:rgb(0 0 0 / 0.2)}
.text-red-400{color:rgb(248 113 113)}
.bg-red-400{background-color:rgb(248 113 113)}
.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1)}
.hover\:border-white\/40:hover{border-color:rgb(255 255 255 / 0.4)}
.bottom-2{bottom:0.5rem}
.left-2{left:0.5rem}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.text-\[8px\]{font-size:8px}
.bg-gold\/85{background-color:rgb(212 168 75 / 0.85)}
.border-white\/15{border-color:rgb(255 255 255 / 0.15)}
.disabled\:opacity-40:disabled{opacity:0.4}
.placeholder\:text-white\/40::placeholder{color:rgb(255 255 255 / 0.4)}
.hover\:text-white:hover{color:rgb(255 255 255)}
.h-28{height:7rem}
.gap-0{gap:0px}
.mt-0{margin-top:0px}
.py-0{padding-top:0px;padding-bottom:0px}
.mb-6{margin-bottom:1.5rem}
.text-left{text-align:left}
.text-slate-300{color:rgb(203 213 225)}
.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.max-w-xs{max-width:20rem}
.via-night\/5{--tw-gradient-to: rgb(11 18 14 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(11 18 14 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to)}

.hover\:bg-mist:hover{background-color:rgb(231 237 230)}
.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05)}
.hover\:border-forest\/50:hover{border-color:rgb(31 77 46 / 0.5)}
.hover\:border-gold\/60:hover{border-color:rgb(212 168 75 / 0.6)}
.hover\:border-white\/30:hover{border-color:rgb(255 255 255 / 0.3)}
.hover\:text-deep:hover{color:rgb(16 24 18)}

@media (min-width: 640px){
  .sm\:gap-4{gap:1rem}
  .sm\:gap-6{gap:1.5rem}
  .sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .sm\:flex{display:flex}
  .sm\:flex-wrap{flex-wrap:wrap}
  .sm\:w-44{width:11rem}
  .sm\:col-span-3{grid-column:span 3 / span 3}
}

@media (min-width: 768px){
  .md\:min-h-\[380px\]{min-height:380px}
  .md\:grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}
  .md\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr 0.9fr}
  .md\:items-start{align-items:flex-start}
  .md\:p-4{padding:1rem}
  .md\:p-5{padding:1.25rem}
  .md\:p-8{padding:2rem}
  .md\:text-base{font-size:1rem;line-height:1.5rem}
  .md\:h-48{height:12rem}
  .md\:px-8{padding-left:2rem;padding-right:2rem}
  .md\:py-8{padding-top:2rem;padding-bottom:2rem}
  .md\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
  .md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:w-auto{width:auto}
}

@media (min-width: 1024px){
  .lg\:hidden{display:none}
  .lg\:grid{display:grid}
  .lg\:flex{display:flex}
  .lg\:border-t-0{border-top-width:0px}
  .lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .lg\:grid-cols-\[220px_1fr_260px\]{grid-template-columns:220px 1fr 260px}
  .lg\:grid-cols-\[220px_1fr_280px\]{grid-template-columns:220px 1fr 280px}
  .lg\:grid-cols-\[220px_1fr_300px\]{grid-template-columns:220px 1fr 300px}
  .lg\:sticky{position:sticky}
  .lg\:top-24{top:6rem}
  .lg\:order-1{order:1}
  .lg\:order-2{order:2}
  .lg\:order-3{order:3}
  .lg\:block{display:block}
  .lg\:flex-col{flex-direction:column}
  .lg\:gap-0{gap:0px}
  .lg\:overflow-visible{overflow:visible}
  .lg\:px-0{padding-left:0px;padding-right:0px}
  .lg\:py-0{padding-top:0px;padding-bottom:0px}
  .lg\:shrink{flex-shrink:1}
  .lg\:gap-3{gap:0.75rem}
  .lg\:rounded-none{border-radius:0px}
  .lg\:border-0{border-width:0px}
  .lg\:border-b{border-bottom-width:1px}
  .lg\:border-white\/5{border-color:rgb(255 255 255 / 0.05)}
  .lg\:border-forest\/10{border-color:rgb(31 77 46 / 0.1)}
  .lg\:px-4{padding-left:1rem;padding-right:1rem}
  .lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .lg\:py-3{padding-top:0.75rem;padding-bottom:0.75rem}
  .lg\:text-sm{font-size:0.875rem;line-height:1.25rem}
  .lg\:h-7{height:1.75rem}
  .lg\:h-48{height:12rem}
  .lg\:aspect-auto{aspect-ratio:auto}
  .lg\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .lg\:w-7{width:1.75rem}
  .lg\:whitespace-normal{white-space:normal}
}

@media (min-width: 1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .xl\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
}