/* =============================================================
   JKV Cocon – WooCommerce Styling
   Donker thema passend bij het Cocon Block thema
   ============================================================= */

/* --- Algemeen WooCommerce canvas --------------------------- */
.woocommerce,
.woocommerce-page {
  background: var(--black, #0D0F0E);
  color: var(--white, #F0EDE8);
}

/* --- Winkel pagina header ---------------------------------- */
.woocommerce-products-header,
.woocommerce-products-header__title.page-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(3rem, 6vw, 6rem) !important;
  color: var(--white, #F0EDE8) !important;
  letter-spacing: 0.02em !important;
  line-height: 0.95 !important;
  margin-bottom: 2rem !important;
}

/* --- Productgrid ------------------------------------------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* --- Productkaart ------------------------------------------ */
.woocommerce ul.products li.product {
  background: #161918 !important;
  border: 1px solid #2A2D2B !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: border-color 0.3s, transform 0.3s !important;
  position: relative !important;
}

.woocommerce ul.products li.product:hover {
  border-color: #FF6B1A !important;
  transform: translateY(-4px) !important;
}

/* Product afbeelding */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04) !important;
}

/* Product content */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.4rem !important;
  color: #F0EDE8 !important;
  letter-spacing: 0.02em !important;
  padding: 1.25rem 1.25rem 0.25rem !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Prijs */
.woocommerce ul.products li.product .price,
.woocommerce .price {
  color: #FF6B1A !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  padding: 0 1.25rem 1rem !important;
  display: block !important;
}

.woocommerce ul.products li.product .price del {
  color: rgba(240,237,232,0.3) !important;
  font-size: 0.85rem !important;
}

/* Toevoegen aan winkelwagen knop (productgrid) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  background: #FF6B1A !important;
  color: white !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 1.25rem !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .button:hover {
  background: #D94F00 !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale {
  background: #FF6B1A !important;
  color: white !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  padding: 0.25rem 0.6rem !important;
  top: 1rem !important;
  left: 1rem !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
}

/* --- Enkele productpagina ---------------------------------- */
.single-product .product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: start !important;
}

@media (max-width: 768px) {
  .single-product .product {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Product afbeelding gallery */
.woocommerce-product-gallery {
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid #2A2D2B !important;
}

.woocommerce-product-gallery__image img {
  width: 100% !important;
}

/* Product thumbnail gallery */
.woocommerce-product-gallery__wrapper .flex-viewport {
  border-radius: 6px !important;
}

/* Product naam */
.single-product .product_title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  color: #F0EDE8 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  margin-bottom: 1rem !important;
}

/* Product prijs */
.single-product .price {
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #FF6B1A !important;
  margin-bottom: 1.5rem !important;
}

/* Product beschrijving */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
  color: rgba(240,237,232,0.7) !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
}

/* Aantal */
.woocommerce .quantity input {
  background: #161918 !important;
  border: 1.5px solid #2A2D2B !important;
  border-radius: 4px !important;
  color: #F0EDE8 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  padding: 0.6rem 0.8rem !important;
  width: 70px !important;
  text-align: center !important;
}

.woocommerce .quantity input:focus {
  outline: none !important;
  border-color: #FF6B1A !important;
}

/* Toevoegen aan winkelwagen knop (productpagina) */
.single-product .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: #FF6B1A !important;
  color: white !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 0 30px rgba(255,107,26,0.25) !important;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #D94F00 !important;
  transform: translateY(-2px) !important;
}

/* Alternatieve (outline) knop */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: transparent !important;
  border: 1.5px solid #FF6B1A !important;
  color: #FF6B1A !important;
  box-shadow: none !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #FF6B1A !important;
  color: white !important;
}

/* Tabs (beschrijving, reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid #2A2D2B !important;
  padding: 0 !important;
  margin: 0 0 2rem !important;
  display: flex !important;
  gap: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(240,237,232,0.5) !important;
  padding: 0.875rem 1.25rem !important;
  display: block !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: #FF6B1A !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #F0EDE8 !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: rgba(240,237,232,0.7) !important;
  background: #161918 !important;
  border: 1px solid #2A2D2B !important;
  border-radius: 0 0 6px 6px !important;
  padding: 2rem !important;
}

/* Gerelateerde producten */
.related.products h2,
.upsells.products h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.5rem !important;
  color: #F0EDE8 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 2rem !important;
}

/* --- Winkelwagen pagina ------------------------------------ */
.woocommerce-cart table.cart {
  border-collapse: collapse !important;
  width: 100% !important;
}

.woocommerce-cart table.cart thead th {
  background: #FF6B1A !important;
  color: white !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.875rem 1rem !important;
  border: none !important;
}

.woocommerce-cart table.cart tbody tr {
  background: #161918 !important;
  border-bottom: 1px solid #2A2D2B !important;
}

.woocommerce-cart table.cart tbody td {
  padding: 1.25rem 1rem !important;
  border: none !important;
  color: rgba(240,237,232,0.8) !important;
  vertical-align: middle !important;
}

.woocommerce-cart table.cart .product-name a {
  color: #F0EDE8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.woocommerce-cart table.cart .product-name a:hover {
  color: #FF6B1A !important;
}

.woocommerce-cart .cart_totals {
  background: #161918 !important;
  border: 1px solid #2A2D2B !important;
  border-radius: 6px !important;
  padding: 2rem !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.8rem !important;
  color: #F0EDE8 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-cart .cart_totals table {
  width: 100% !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 0.75rem 0 !important;
  border-top: 1px solid #2A2D2B !important;
  color: rgba(240,237,232,0.7) !important;
  font-size: 0.9rem !important;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  color: #F0EDE8 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

.woocommerce-cart .cart_totals .order-total .amount {
  color: #FF6B1A !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 1.3rem !important;
}

/* Coupon veld */
.woocommerce-cart .coupon input {
  background: #0D0F0E !important;
  border: 1.5px solid #2A2D2B !important;
  border-radius: 4px !important;
  color: #F0EDE8 !important;
  padding: 0.7rem 1rem !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* --- Checkout pagina -------------------------------------- */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.8rem !important;
  color: #F0EDE8 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-checkout .form-row label {
  color: rgba(240,237,232,0.6) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  background: #161918 !important;
  border: 1.5px solid #2A2D2B !important;
  border-radius: 4px !important;
  color: #F0EDE8 !important;
  padding: 0.75rem 1rem !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  outline: none !important;
  border-color: #FF6B1A !important;
  box-shadow: 0 0 0 3px rgba(255,107,26,0.15) !important;
}

/* Bestellingssamenvatting */
.woocommerce-checkout #order_review {
  background: #161918 !important;
  border: 1px solid #2A2D2B !important;
  border-radius: 6px !important;
  padding: 2rem !important;
}

.woocommerce-checkout table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid #2A2D2B !important;
  color: rgba(240,237,232,0.7) !important;
  font-size: 0.9rem !important;
}

.woocommerce-checkout table.shop_table .order-total th,
.woocommerce-checkout table.shop_table .order-total td,
.woocommerce-checkout table.shop_table .order-total .amount {
  color: #FF6B1A !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}

/* Betalingsopties */
.woocommerce-checkout .payment_methods {
  border: 1px solid #2A2D2B !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin: 1.5rem 0 !important;
  background: #161918 !important;
  list-style: none !important;
  padding: 0 !important;
}

.woocommerce-checkout .payment_methods li {
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid #2A2D2B !important;
}

.woocommerce-checkout .payment_methods li:last-child {
  border-bottom: none !important;
}

.woocommerce-checkout .payment_methods label {
  color: #F0EDE8 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

/* --- Mijn account pagina ---------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #161918 !important;
  border: 1px solid #2A2D2B !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid #2A2D2B !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block !important;
  padding: 0.875rem 1.25rem !important;
  color: rgba(240,237,232,0.6) !important;
  text-decoration: none !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: all 0.2s !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: #FF6B1A !important;
  background: rgba(255,107,26,0.08) !important;
}

/* --- Notificaties / Meldingen ----------------------------- */
.woocommerce-message,
.woocommerce-info {
  background: #161918 !important;
  border-top: 3px solid #FF6B1A !important;
  color: rgba(240,237,232,0.8) !important;
  padding: 1rem 1.5rem !important;
  border-radius: 0 0 6px 6px !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-error {
  background: #161918 !important;
  border-top: 3px solid #e53e3e !important;
  color: #fc8181 !important;
  padding: 1rem 1.5rem !important;
  border-radius: 0 0 6px 6px !important;
}

/* Sterren (reviews) */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: #FF6B1A !important;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  color: rgba(240,237,232,0.4) !important;
  font-size: 0.78rem !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 2rem !important;
}

.woocommerce .woocommerce-breadcrumb a {
  color: rgba(240,237,232,0.4) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.woocommerce .woocommerce-breadcrumb a:hover {
  color: #FF6B1A !important;
}

/* Paginering */
.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: flex !important;
  gap: 0.5rem !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: #161918 !important;
  border: 1px solid #2A2D2B !important;
  color: rgba(240,237,232,0.6) !important;
  border-radius: 4px !important;
  padding: 0.5rem 0.875rem !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #FF6B1A !important;
  border-color: #FF6B1A !important;
  color: white !important;
}