/********** Fonts **********/
/**The standard font-face is Inter and we offer 9 different weight **/

/* Inter Thin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('/media/fonts/Inter-Thin.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter ExtraLight */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('/media/fonts/Inter-ExtraLight.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter Light */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('/media/fonts/Inter-Light.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter Regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/media/fonts/Inter-Regular.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter Medium */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/media/fonts/Inter-Medium.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter SemiBold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/media/fonts/Inter-SemiBold.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/media/fonts/Inter-Bold.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter ExtraBold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('/media/fonts/Inter-ExtraBold.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Inter Black */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('/media/fonts/Inter-Black.woff') format('woff'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --cassiopeia-color-primary: transparent;
  --cassiopeia-color-hover: transparent;
  --color-primary: #f16d23;
  --color-primary-hover: #d75e1f;
  --color-secondary: #6ebd43;
  --color-secondary-hover: #5ca93a;
  --color-tertiary: #777;
  --color-tertiary-hover: #555;
  --color-text: #3e3e3e;
  --color-bg: #fffaf0; /* FloralWhite */
  --color-btn: #fff;
  --color-ft-bg: #333;
  --color-ft-text: #ddd;
  --color-ft-legal: #aaa;
}
body {
   font-family: 'Inter', sans-serif;
   font-size:clamp(16px, 2.25vw, 20px);
   font-weight:500;
   line-height: 1.6;
	background-color: var(--color-bg);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
   font-family: 'Inter', sans-serif;
   font-weight: 600;
}
.container-header{
	z-index:25;
}
.site-grid {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
/* ================================
   HEADER SECTION
================================ */
.stick-to-top {
	top:0;
	position:sticky;
}
.header-bar {
	display: flex;
	flex-direction:row;
	justify-content: space-between; 
	background-color: var(--color-bg);
	color: var(--color-text);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 3em;
	padding-right: 3em;
	z-index: 100;
}
.position-1 {
	display:flex;
	flex-direction: column;
	align-items: start;
}
.subtitle{
	color: var(--color-secondary);
	font-size: clamp(18px, 2.75vw, 24px);
}
.position-2 {
	display: flex;
	flex-direction:column;
/*	justify-content: space-between;
	align-items: center;*/
}
/*header gedeelte*/
.contact-item {
	padding: 0.5em 1em;
	font-size: clamp(12px, 2vw, 18px);
}
.contact-item a, .contact-item a:hover {
	text-decoration: none;
	color: var(--color-text) !important;
}
.cta-header {
	padding: 0.8em .5em;
}
.p2-bottom {
	display: flex;
	flex-direction: row;
}
#showcase-cart {
	margin-top: 6px;
	margin-left: 20px;
	z-index: 2000;
}
#showcase-cart .cart-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-secondary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}
#showcase-cart .cart-link:hover {
  background-color: var(--color-tertiary);
}
#showcase-cart .fa-shopping-bag {
  font-size: 20px;
}
#showcase-cart .cart-badge {
  background-color: #e63946;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
.sc-modal {
  position: fixed;
  bottom: 90px;
  right: 15px;
  width: 200px;
  z-index: 100;
}
/* De afbeelding zelf */
.sc-modal .floating-image img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.sc-modal .floating-image img:hover {
  transform: scale(1.05);
}
/* De ballon */
.speech-bubble {
  position: absolute;
  bottom: 110%; /* iets boven de afbeelding */
  right: 0;
  background: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.3em;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  max-width: 220px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}
/* Het pijltje onderaan de ballon */
.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
/* Laat de ballon subtiel verschijnen bij hover */
.sc-modal:hover .speech-bubble {
  opacity: 1;
  transform: translateY(0);
}


 .flex-btns {
	display:flex;
	flex-direction: row;
	justify-content: center;
	gap: 1em;
}
/* CONTACT PAGINA */

.contact-intro {
  text-align: center;
  margin-bottom: 2rem;
}
.contact {
	display: flex;
	flex-direction: row;
}
.contact-info h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.contact-map {
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
}
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
/* form gedeelte */
.contact-form {
  flex: 1 1 55%;
  background: var(--color-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.contact-info {
  flex: 1 1 40%;
  background: var(--color-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}
.contact-info p {
	font-size: 16px;
}
.contact-info-text-block {
	display: flex;
	flex-direction: row;
	gap: 1em;
	justify-content: space-between; 
}
.conmpany {
	font-size: 22px;
}
.contact-thankyou-container h1 {
  color: var(--color-text);
  font-size: clamp(14px, 2vw, 18px);
  margin-bottom: 0.5rem;
}
.contact-thankyou-container p {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.contact-thankyou-actions {
  margin: 2rem 0;
}

.contact-thankyou-image img {
  border-radius: 8px;
  margin-top: 1rem;
  width: 100%;
  height: auto;
}
/* NAVIGATIE */
.container-header .container-nav,
.container-header .mod-menu{
	color: var(--color-text);
	background-color: var(--color-bg);
	font-size: 18px;
}
.container-header .mod-list li.active>a,
.container-header .mod-list li a:hover  {
	text-decoration: underline !important;
	text-decoration-thickness: 3px !important;
	text-decoration-color: var(--color-primary) !important;
}

.container-header .navbar-toggler {
	color: var(--color-primary);
}
/*************************
      CONTROL BEHAVIOUR
*************************/
.cta-primary {
  background: var(--color-primary);
  cursor: pointer;
  transition: background 0.3s;
  color: var(--color-btn)!important;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 1rem;
  }
.cta-primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-btn);
}
.cta-secondary, .btn-secondary {
  background: var(--color-secondary) !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
  color: var(--color-btn) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 1rem !important;
}
.cta-secondary:hover, .btn-secondary:hover {
  background: var(--color-secondary-hover);
  color: var(--color-btn);
}
.cta-tertiary {
  background: var(--color-tertiary);
  cursor: pointer;
  transition: background 0.3s;
  color: var(--color-btn);
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 1rem;
}
.cta-tertiary:hover {
  background: var(--color-tertiary-hover);
  color: var(--color-btn);
}
.form-group {
  margin-bottom: 1rem;
}
#contactForm label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: #333;
}
#contactForm input, #contactForm textarea, #contactForm select {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

#contactForm textarea { min-height: 120px; }

input[type="checkbox"], input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none;
  display: inline flex;
  align-content: center;
  justify-content: center;
  padding: 0.1rem;
  border: 2px solid var(--color-secondary);
  border-radius: 3px;
  margin: 1px 4px;
}
input[type="checkbox"]::before, input[type="radio"]::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  transform: scale(0) !important;
  background-color: var(--color-secondary);
}

input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
  transform: scale(1) !important;
}
.buttons {
	display: flex;
	flex-direction: row;	
	gap: 1em;
	justify-content: space-evenly;
}
.showcase-back{
	background-color: var(--color-bg);
}
/* ===============================
  INFORMATIE BLOKKEN SECTION
================================ */
#info-blok {
	display:flex;
	flex-direction: row;
	flex: 1;
	align-items: center;
/*	margin-bottom: 2em;*/
}
.hero-section {
	display: flex;
	justify-content: center;
}
.hero-section img {
	max-width:800px;
}
.hero img{
	max-width:1200px
}
.over img {
	max-width: 420px;
}
.blok-tekst, .product-tekst {
	font-family: 'Inter', sans-serif;
	background-color: var(--color-bg);
	padding: 20px 20px;
	text-align: left;
}
.blok-tekst h1,  .product-tekst h1 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  margin-bottom: 16px;
}
.blok-tekst h2 {
  font-size: clamp(24px, 3.5vw, 30px);
  font-weight: 700;
  margin-bottom: 16px;
}
.blok-tekst h3 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  margin-bottom: 16px;
}
.blok-tekst p, .blok-tekst li, .product-tekst p {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-text);
/* max-width: 640px;
   margin: 0 auto 24px; */
}
.blok-image img {
	border-radius: 25px;
}
.blok-tekst .blok-btn {
  background: var(--color-primary);
  color: var(--color-btn);
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 1rem;
}
.blok-tekst .blok-btn:hover {
  background: var(--color-primary-hover);
  color: var(--color-btn);
}

/**************************
    COLLECTIE SECTION   
**************************/
.collecties {
  padding: 1rem 0rem;
  text-align: left;
}
#intro {
  color: var(--color-text);
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.6;
  margin:0;
}

.collectie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.collectie {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.collectie img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.collectie h3, .hikashop_category_name a {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  color: var(--color-text) !important;
  margin: 1rem 0;
  text-align: center;
  font-weight:600 !important;
}
/* Blog artikelen */
.com-content-category-blog__children h3 {
	color:var(--color-secondary);
}
h3.page-header.item-title a,
.items-more a {
	text-decoration: none;
	color: var(--color-text);
 	font-size: clamp(18px, 2.5vw , 22px);
}
h3.page-header.item-title a:hover,
.items-more a:hover {
	text-decoration: none;
	color: var(--color-primary) !important;
}
.category-name {
	background-color: rgba(110,189,67,0.18);
	
}
.item-content {
	border: solid 1px rgba(110,189,67,0.18);
	padding: 16px 8px;
	margin-bottom:1em;
}
/******************************
     CHECK-OUT CONFIRM
******************************/
.showcase-confirm-wrapper {
  background: var(--color-bg);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.confirm-header h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.confirm-header p {
  color: #666;
  margin-bottom: 1.5rem;
}

.confirm-summary {
  background: var(--color-btn);
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.confirm-info-box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-btn);
  border: 1px solid var(--color-ft-text);
  border-radius: 0.75rem;
  padding: 1rem;
}

.confirm-info-box .team-photo {
  width: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.confirm-info-box .confirm-text ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.confirm-action {
  text-align: right;
  margin-top: 2rem;
}

.confirm-action .hikabtn-primary {
  background-color: #007b83;
  color: var(--color-btn);
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
}
.showcase-thankyou-wrapper {
  max-width: 700px;
  margin: 3rem auto;
  background: #f8f8f8;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.thankyou-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.showcase-thankyou-wrapper h2 {
  font-size: clamp(14px, 2vw, 18px);
  margin-bottom: 0.5rem;
}

.showcase-thankyou-wrapper p {
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.thankyou-next {
  text-align: left;
  background: var(--color-btn);
  border: 1px solid var(--color-ft-text);
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.thankyou-next ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0;
}

.hikabtn-primary {
  background-color: #007b83 !important;
  color: var(--color-btn) !important;
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

/******************************
    HIKASHOP STYLING
******************************/
.hikashop_category_name a:hover,
.hikashop_product_name a:hover,
#hikashop_cart_product_listing a:hover {
	color: var(--color-text) !important;
}
.hikashop_category_name,
.hikashop_product_name {
	color: var(--color-text) !important;
}
.hikashop_filter_title,
.hikashop_product_name a {
	color: var(--color-text) !important;
}
.collectie:hover, .hikashop_subcontainer:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.hikashop_product_listing_image {
	border-radius: 6px;
}
span.hikashop_product_price,
.hika_show_cart_total_price,
#hikashop_product_custom_info_main h4 {
	font-family: 'Inter', sans-serif !important;
 	font-size: clamp(20px, 2.75vw , 24px) !important;
	color: var(--color-primary) !important;
}
.hikashop_product_price_per_unit {
	font-weight: 500 !important;
}
.hikashop_product_name_main{
	font-size: clamp(22px, 3vw, 28px) !important;
 	max-width: 640px;
}
.far, .fas, .fa-solid, .fa-regular, .fa {
  color: var(--color-primary);
}
.hikashop_filter_collapsable_title {
	background-color: rgba(110,189,67,0.18) !important;
	border: 1px solid var(--color-primary) !important;
	border-radius: 3px;
}
.hikashop_filter_fieldset {
	border: 1px solid var(--color-ft-text);
	border-radius: 3px 3px 3px 3px;
	padding: 10px;
}
.hikashop_filter_title, 
.hikashop_product_custom_name {
	font-size: clamp(16px, 2.25vw, 20px) !important;
	margin-bottom:-24px !important;
}
.hikashop_filter_checkbox label,
.hikashop_product_name,
.hikashop_product_custom_value,
#hikashop_cart_product_listing a, 
.hikashop_cart_product_name a {
	font-size: clamp(12px, 1.75vw, 16px) !important;
	color: var(--color-text) !important;
}
#hikashop_cart_product_listing a:hover, 
.hikashop_cart_product_name a:hover {
	color: var(--color-text) !important;
}
.hikashop_filter_main {
	margin-bottom: 10px;
	padding: 0.3em;
}
.hikashop_filter_Prijspermsup2sup_7 {
	display: grid;
	font-size: clamp(12px, 1.75vw, 16px);
}
#hikashop_product_characteristics {
	border: none !important;
	font-size: clamp(16px, 2.25vw, 20px)!important;
	font-weight: 700 !important;	
	color: var(--color-text) !important;
}
.hikashop_product_characteristics_table select {
	font-size: clamp(12px, 1.75vw, 16px) !important;
	width: 195px;
}
#hikashop_product_custom_info_main td {
	border: none !important;
}
.slider_input {
	width: 80px !important;
	text-align: right !important;
}
.noUi-connect {
	background: var(--color-secondary) !important;
}
.hikashop_product_quantity_field {
	font-size: clamp(12px, 1.75vw, 16px) !important;
	background-color: transparent !important; 
	border: none !important;
}
.hikashop_no_print {
/*	display: none !important; */
}
#hikashop_checkout_shopping_button {
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}
/**************************
       SERVICE BADGE
**************************/
.fullservice-badge {
  display: inline-block;
  background-color: var(--color-secondary); 
  color: var(--color-btn);
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 1.5rem;
  padding: 0.4rem 0.9rem;
  margin-top: 0.5rem;
  transition: background-color 0.3s ease;
}
.fullservice-badge a {
  color: var(--color-btn);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fullservice-badge:hover {
  background-color: var(--color-secondary-hover);
}
.badge-icon {
  font-size: 1rem;
}
.badge-text {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .fullservice-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
  }
}

/* Inspiratie */
.inspiration {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom:1rem;
}

.inspiration-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}



.showcase-hero {
  display: flex;
  flex-direction: row;
  color: var(--color-text);
  padding: 2rem 2rem;
  text-align: center;
  border-radius: 12px;
}
.showcase-hero-image {
	border-radius: 25px;	
}
.showcase-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: 2.5rem;
  color: var(--color-text);
}
.showcase-hero h1 span {
  color: var(--color-primary);
}
.showcase-hero p {
  font-size: clamp(12px, 1.75vw, 16px);
  max-width: 700px;
  margin: 1rem auto;
}
.cta-button {
  background: var(--color-secondary);
  color: var(--color-btn);
  padding: 0.8rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 1rem;
  display: inline-block;
}
.cta-button:hover {
  background:var(--color-secondary-hover);
  color:var(--color-btn);
}

.showcase-steps {
  text-align: center;
  padding: 3rem 1rem;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.step .number {
  background: var(--color-primary);
  color: var(--color-btn);
  font-size: 1.5rem;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto 1rem;
}

.showcase-collecties {
  color: var(--color-text);
  text-align: center;
  border-radius: 12px;
  margin-bottom: 3rem;
  justify-items:center;
}
.showcase-collecties h2 {
  text-align: center;
  color: var(--color-text);
}
.showcase-collecties p {
  text-align: center;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.showcase-info {
  background: var(--color-bg);
  padding: 2rem;
  border-radius: 10px;
  margin-top: 3rem;
}

/***********************
   SHOWCASE SELECTOR
***********************/     
#showcase-selector {
  border: 1px solid var(--color-btn);
  background: var(--color-bg);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  text-align: center;
}

#showcase-selector h3 {
  color: var(--color-primary);
}

#showcase-order {
  background-color: var(--color-secondary);
  border: none;
  color: var(--color-btn);
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

#showcase-order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/***************************
     SHOWCASE! CHECKOUT
***************************/
.checkout-hero {
  background-color: var(--color-bg);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 2rem;
}
.checkout-hero h1 {
  color: var(--color-primary);
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  margin-bottom: 1rem;
}
.checkout-hero p {
  font-size: clamp(12px, 1.75vw, 16px);
  color: var(--color-text);
}
.checkout-hero .note {
  color: var(--color-secondary);
  font-weight: 600;
}

/**************************
		    FOOTER
**************************/
#footer {
  background-color: var(--color-ft-bg);
  color: var(--color-btn);
  padding: 3rem 1rem 1rem;
  font-family: 'Inter', sans-serif;
  width:100%
}
.footer-over {grid-area:footer-over;}
.footer-menu {grid-area:footer-menu;}
.footer-contact {grid-area:footer-contact;}
.footer-showcase {grid-area:footer-showcase;}

.footer-col h5 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.footer-col p, .footer-col ul, .footer-col a {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ft-text);
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-link,
.footer-col a {
  color: var(--color-primary);
  text-decoration: none;
}

.footer-link:hover,
.footer-col a:hover {
  text-decoration: underline;
}

.footer-btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-btn);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  text-decoration: none;
  transition: background 0.3s ease;
}

.footer-btn:hover {
  background-color: var(--color-primary-hover);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 0.85rem;
  padding-top: 1rem;
  color: var(--color-ft-legal);
}

.footer-legal a {
  color: var(--color-ft-legal);
  text-decoration: none;
  margin: 0 0.5rem;
}

.footer-legal a:hover {
  color: var(--color-btn);
}

/* Mobiel aanpassingen */
@media (max-width: 768px) {
  #footer {
    padding: 2rem 1rem;
  }
  .footer-col h5 {
    font-size: 1rem;
  }
  #collecties {
    padding: 2rem 1rem;
  }
  #collecties h2 {
    font-size: 1.6rem;
  }
  .collectie img {
    height: 180px;
  }
}

.showcase-back {
    margin-top: 1.5rem;
    text-align: left;
}
.showcase-back .btn {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
}
.showcase-back .btn:hover {
    background-color: var(--color-primary);
    color: var(--color-btn);
}

/***************************
      BLOG STYLING
***************************/
.article-body h2, .article-body h3 {
  font-family: 'Inter', sans-serif;
  color: var(--color-primary);
  margin-top: 1.5rem;
}
.article-body p, .article-body li {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--color-ft-bg);
}
.article-body a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.article-body a:hover {
  text-decoration: underline;
}
.advies-footer {
  margin-top: 2rem;
  padding: 1rem;
  background-color: var(--color-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: 8px;
}
.tile-group{
	display:flex;
	flex-direction: row;
	align-items: flex-start;
}
.tile {
	display: flex;
	flex-direction: column;
	gap: 1em;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: .5em;
}
.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tile img {
	max-width: 380px;
	border-radius: 25px;
}
.tile a {
	text-decoration: none;
	color: var(--color-text);
}
/***************************
    RESPONSIVE STYLING
***************************/

@media (width>=992px) {
	.site-grid {
    	grid-template-areas: 
      	".banner banner banner banner."
      	".top-a top-a top-a top-a."
      	".top-b top-b top-b top-b."
      	".side-l comp comp side-r."
      	".bot-a bot-a bot-a bot-a."
      	".bot-b bot-b bot-b bot-b.";
		grid-gap: 0 1em;
		grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,19.875rem))[main-end]minmax(0,1fr)[full-end];
    	display: grid;
	}
	.hoofd-image img {
		max-width: 540px;
	}

	.footer-container {
		display: grid;
		grid-template-areas: 'footer-over footer-menu footer-contact footer-showcase';
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 2rem;
		max-width: 1920px;
	}
}

@media (width<992px) {
	.site-grid {
		grid-template-areas: 
      	".banner banner banner banner."
      	".top-a top-a top-a top-a."
      	".top-b top-b top-b top-b."
      	".side-l side-l side-l side-l."
      	".comp comp comp comp."
      	".side-r side-r side-r side-r."
      	".bot-a bot-a bot-a bot-a."
      	".bot-b bot-b bot-b bot-b.";
  	}
	.header-bar {
		flex-direction: column;	
		padding-left:10px;
		padding-right:10px;
	}
	.cta-primary {
		padding: 8px 8px;	
	}
	#info-blok {
		flex-direction: column;	
	}
	.hero-section img {
		max-width:99vw;
	}
	.blok-tekst {
	/*	text-align:center; */
		margin-top: 30px;
	}
	.contact-info-text-block {
		flex-direction: column;	
	}
	.footer-over {grid-area: 1 / span 4;}
	.footer-menu {grid-area: 2 / span 4;}
	.footer-contact {grid-area: 3 / span 4;}
	.footer-showcase {grid-area: 4 / span 4;}
	.contact-item {
		padding: 0.1em 0.5em;
	}
	.showcase-filter-heading {
		display: none;	
	}
	#contact-btns {
		flex-direction: column;
		gap: 0.1em;
	}
	.contact-form input:focus,
	.contact-form textarea:focus,
	.contact-form select:focus,
	.contact-btn:focus {
  		outline: 3px solid rgba(110,189,67,0.18);
  		outline-offset: 2px;
	}
	.buttons, .tile-group {
		flex-direction: column;	
	}
	.over img, .hoofd-image img .hero img{
		max-width: 340px;
	}
	#showcase-cart {
		margin-top: 2px;
		margin-left: 0px;
		z-index: 2000;
	}
	.sc-modal {
		right: 10px;
		bottom: 40px;
		width: 150px;
	}
	.speech-bubble {
		font-size: 12px;
		right: -10px;
		max-width: 180px;
	}
	.tile img {
		max-width: 320px;
	}
}

/*******************************
   PAGINATION STYLING
*******************************/
.hikashop_products_pagination ul.hikashop_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.hikashop_products_pagination ul.hikashop_pagination li.page-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hikashop_products_pagination ul.hikashop_pagination .page-link,
.hikashop_products_pagination ul.hikashop_pagination span.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  color: var(--color-ft-bg);
  background: var(--color-btn);
  border: 1px solid var(--color-ft-text);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Hover en actieve toestand */
.hikashop_products_pagination ul.hikashop_pagination .page-link:hover {
  background: var(--color-bg);
  border-color: var(--color-ft-bg);
}

.hikashop_products_pagination ul.hikashop_pagination li.active .page-link {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-btn);
}

/* Font Awesome iconen — netjes gecentreerd */
.hikashop_products_pagination ul.hikashop_pagination .fas {
  font-size: clamp(14px, 2vw, 18px);
  color: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagenav_previous_chevron, 
.pagenav_next_chevron,
.pagenav_start_chevron,
.pagenav_end_chevron {
	text-indent: inherit !important;
}
/* Verberg dubbele borders op kleine schermen */
@media (max-width: 480px) {
	.hikashop_products_pagination ul.pagination li {
  		display: none !important;
  	}
  	.hikashop_products_pagination ul.pagination li:first-child,
  	.hikashop_products_pagination ul.pagination li:last-child,
  	.hikashop_products_pagination ul.pagination li.active,
  	.hikashop_products_pagination ul.pagination li.active + li,
  	.hikashop_products_pagination ul.pagination li:nth-child(2),
  	.hikashop_products_pagination ul.pagination li:nth-last-child(2) {
   	display: inline-flex !important;
  	}
	.hikashop_products_listing form {
		margin-left:-40px;
		margin-right:-40px;
	}
	.hikashop_product_characteristics_table select {
		width: 155px;
	}
	#hikashop_print_cart {
/*		display: none !important; */
	}
}
.limit {
	display: flex;
	flex-direction: column;
}	
#limit {
	border-radius: 8px !important;
	width: 82px !important;
	margin-top: 4px;
	padding: .4em .4em .4em .4em !important;
}