/*
Theme Name:   Spot On Baits Child
Theme URI:    https://spotonbaits.nl
Description:  Spot On Baits child theme — dark, modern carp fishing webshop
Author:       Spot On Baits
Template:     astra
Version:      1.0.0
Text Domain:  spotonbaits-child
*/

/* =============================================
   GOOGLE FONTS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:wght@300;400;500&display=swap');

/* =============================================
   CSS VARIABELEN — SPOT ON BAITS HUISSTIJL
   ============================================= */
:root {
  --sob-black:   #060606;
  --sob-dark:    #0f0f0f;
  --sob-card:    #141414;
  --sob-border:  #1e1e1e;
  --sob-accent:  #C8FF00;
  --sob-red:     #FF3D00;
  --sob-text:    #EFEFEF;
  --sob-muted:   #777777;
  --sob-white:   #ffffff;
}

/* =============================================
   RESET & BASIS
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--sob-black) !important;
  color: var(--sob-text) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
}

/* =============================================
   TYPOGRAFIE
   ============================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', sans-serif !important;
  color: var(--sob-white) !important;
  letter-spacing: 2px;
  line-height: 1;
}

h1 { font-size: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(36px, 5vw, 72px); }
h3 { font-size: clamp(28px, 3vw, 48px); }

p { color: #999; line-height: 1.75; }

a { color: var(--sob-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: #d4ff20; }

strong { color: var(--sob-white); }

/* =============================================
   ASTRA HEADER OVERRIDE
   ============================================= */
#masthead,
.site-header,
.ast-masthead-custom-menu-items,
header.site-header {
  background-color: rgba(6, 6, 6, 0.95) !important;
  border-bottom: 1px solid var(--sob-border) !important;
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Logo afbeelding — max breedte */
.ast-logo-container img,
.custom-logo,
.site-logo img,
img.custom-logo {
  max-width: 160px !important;
  height: auto !important;
  width: auto !important;
}

/* Logo tekst fallback */
.site-title,
.site-title a {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 5px !important;
  color: var(--sob-white) !important;
  text-decoration: none;
}

/* Astra header layout — logo links, menu rechts */
.ast-primary-header-bar .ast-flex {
  justify-content: space-between !important;
  align-items: center !important;
}

.ast-main-header-bar-alignment {
  display: flex !important;
  align-items: center !important;
}

/* Menu horizontaal forceren */
#ast-desktop-nav-primary .menu,
.main-header-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header hoogte */
.ast-primary-header-bar {
  padding: 12px 0 !important;
  min-height: 70px !important;
}

/* Navigatie links */
.main-navigation a,
.ast-main-header-bar-alignment a,
#site-navigation a,
.main-header-menu a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sob-muted) !important;
  transition: color 0.2s !important;
}

.main-navigation a:hover,
.main-header-menu a:hover,
#site-navigation a:hover {
  color: var(--sob-accent) !important;
}

/* Actieve menu item */
.main-navigation .current-menu-item > a,
.main-header-menu .current-menu-item > a {
  color: var(--sob-accent) !important;
}

/* =============================================
   ASTRA FOOTER OVERRIDE
   ============================================= */
.site-footer,
#colophon,
.ast-small-footer {
  background-color: var(--sob-black) !important;
  border-top: 1px solid var(--sob-border) !important;
  color: #444 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px;
}

.site-footer a { color: #555 !important; }
.site-footer a:hover { color: var(--sob-accent) !important; }

/* =============================================
   HOOFDINHOUD ACHTERGROND
   ============================================= */
#content,
.site-content,
.ast-container,
main#main {
  background-color: var(--sob-black) !important;
}

/* Sidebar */
.widget-area,
.ast-sidebar {
  background-color: var(--sob-dark) !important;
}

/* =============================================
   KNOPPEN — GLOBAL
   ============================================= */
.ast-btn,
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: transform 0.2s, background 0.2s !important;
}

/* Primaire knop */
.ast-btn,
.wp-block-button__link,
.button.button-primary {
  background-color: var(--sob-accent) !important;
  color: var(--sob-black) !important;
  border: none !important;
  padding: 14px 32px !important;
}

.ast-btn:hover,
.wp-block-button__link:hover {
  background-color: #d4ff20 !important;
  transform: translateY(-2px);
}

/* =============================================
   WOOCOMMERCE — WINKEL PAGINA
   ============================================= */

/* Winkel achtergrond */
.woocommerce,
.woocommerce-page {
  background-color: var(--sob-black) !important;
}

/* Product grid */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
}

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

/* Product kaart */
ul.products li.product {
  background-color: var(--sob-card) !important;
  border: 1px solid var(--sob-border) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}

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

/* Product afbeelding */
ul.products li.product img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block;
  filter: brightness(0.85) contrast(1.1);
  transition: transform 0.4s, filter 0.3s;
}

ul.products li.product:hover img {
  transform: scale(1.04);
  filter: brightness(1) contrast(1.1);
}

/* Product naam */
ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 24px !important;
  letter-spacing: 2px !important;
  color: var(--sob-white) !important;
  padding: 16px 20px 4px !important;
  line-height: 1 !important;
}

/* Product prijs */
ul.products li.product .price {
  color: var(--sob-accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  padding: 0 20px 8px !important;
}

ul.products li.product .price del {
  color: var(--sob-muted) !important;
  font-size: 14px !important;
}

/* In winkelwagen knop op shop pagina */
ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  background-color: var(--sob-accent) !important;
  color: var(--sob-black) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  width: calc(100% - 40px) !important;
  margin: 8px 20px 20px !important;
  padding: 12px !important;
  display: block !important;
  text-align: center !important;
  transition: background 0.2s !important;
}

ul.products li.product .button:hover {
  background-color: #d4ff20 !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--sob-red) !important;
  color: white !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: 6px 10px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  top: 14px !important;
  left: 14px !important;
}

/* =============================================
   WOOCOMMERCE — PRODUCTPAGINA (SINGLE)
   ============================================= */
.single-product .product {
  background-color: var(--sob-black) !important;
}

.single-product .product_title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  color: var(--sob-white) !important;
  letter-spacing: 3px !important;
  line-height: 0.95 !important;
}

.single-product .price {
  color: var(--sob-accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.single-product .woocommerce-product-details__short-description {
  font-size: 16px !important;
  color: #999 !important;
  line-height: 1.75 !important;
  border-left: 3px solid var(--sob-accent);
  padding-left: 20px;
  margin: 20px 0;
}

/* Variaties (maten) */
.variations select,
.woocommerce-variation-add-to-cart select {
  background-color: var(--sob-card) !important;
  color: var(--sob-white) !important;
  border: 1px solid var(--sob-border) !important;
  border-radius: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px;
  padding: 10px 14px !important;
  appearance: none;
}

/* Hoeveelheid input */
.quantity input[type="number"] {
  background-color: var(--sob-card) !important;
  color: var(--sob-white) !important;
  border: 1px solid var(--sob-border) !important;
  border-radius: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  padding: 10px !important;
  width: 80px !important;
  text-align: center;
}

/* Toevoegen aan winkelwagen */
.single_add_to_cart_button {
  background-color: var(--sob-accent) !important;
  color: var(--sob-black) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 16px 40px !important;
  transition: background 0.2s, transform 0.2s !important;
}

.single_add_to_cart_button:hover {
  background-color: #d4ff20 !important;
  transform: translateY(-2px) !important;
}

/* Product tabs */
.woocommerce-tabs .tabs {
  border-bottom: 1px solid var(--sob-border) !important;
}

.woocommerce-tabs .tabs li {
  background-color: var(--sob-card) !important;
  border: 1px solid var(--sob-border) !important;
  border-radius: 0 !important;
}

.woocommerce-tabs .tabs li a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sob-muted) !important;
}

.woocommerce-tabs .tabs li.active {
  background-color: var(--sob-black) !important;
  border-bottom-color: var(--sob-black) !important;
}

.woocommerce-tabs .tabs li.active a {
  color: var(--sob-accent) !important;
}

.woocommerce-tabs .panel {
  background-color: var(--sob-dark) !important;
  border: 1px solid var(--sob-border) !important;
  padding: 32px !important;
}

/* Gerelateerde producten titel */
.related.products h2,
.upsells.products h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 48px !important;
  letter-spacing: 3px !important;
  color: var(--sob-white) !important;
}

/* =============================================
   WOOCOMMERCE — WINKELWAGEN
   ============================================= */
.woocommerce-cart table.cart {
  background-color: var(--sob-dark) !important;
  border: 1px solid var(--sob-border) !important;
}

.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  border-bottom: 1px solid var(--sob-border) !important;
  color: var(--sob-text) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px;
}

.woocommerce-cart table.cart th {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--sob-muted) !important;
  background-color: var(--sob-card) !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: var(--sob-card) !important;
  border: 1px solid var(--sob-border) !important;
  padding: 28px !important;
}

.woocommerce-cart .cart_totals h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 36px !important;
  letter-spacing: 2px !important;
  color: var(--sob-white) !important;
  margin-bottom: 20px !important;
}

.checkout-button {
  background-color: var(--sob-accent) !important;
  color: var(--sob-black) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 16px 36px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  transition: background 0.2s !important;
}

.checkout-button:hover {
  background-color: #d4ff20 !important;
}

/* =============================================
   WOOCOMMERCE — CHECKOUT
   ============================================= */
.woocommerce-checkout {
  background-color: var(--sob-black) !important;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #order_review {
  background-color: var(--sob-dark) !important;
  border: 1px solid var(--sob-border) !important;
  padding: 28px !important;
}

.woocommerce-checkout h3 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 2px !important;
  color: var(--sob-white) !important;
  border-bottom: 1px solid var(--sob-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background-color: var(--sob-card) !important;
  color: var(--sob-white) !important;
  border: 1px solid var(--sob-border) !important;
  border-radius: 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  border-color: var(--sob-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(200,255,0,0.1) !important;
}

.woocommerce-checkout label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sob-muted) !important;
}

#place_order {
  background-color: var(--sob-accent) !important;
  color: var(--sob-black) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 18px 40px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.2s !important;
}

#place_order:hover {
  background-color: #d4ff20 !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   BLOG — OVERZICHTSPAGINA
   ============================================= */
.blog .post,
.archive .post {
  background-color: var(--sob-card) !important;
  border: 1px solid var(--sob-border) !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  transition: border-color 0.2s;
}

.blog .post:hover,
.archive .post:hover {
  border-color: #333 !important;
}

.blog .post .entry-title,
.archive .post .entry-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}

.blog .post .entry-title a {
  color: var(--sob-white) !important;
  transition: color 0.2s !important;
}

.blog .post .entry-title a:hover {
  color: var(--sob-accent) !important;
}

.entry-meta,
.entry-footer {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sob-muted) !important;
}

.entry-meta a,
.entry-footer a {
  color: var(--sob-muted) !important;
}

.entry-meta a:hover,
.entry-footer a:hover {
  color: var(--sob-accent) !important;
}

/* =============================================
   BLOG — SINGLE POST
   ============================================= */
.single-post .entry-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  letter-spacing: 3px !important;
  line-height: 0.95 !important;
  color: var(--sob-white) !important;
}

.single-post .entry-content {
  color: #999 !important;
  line-height: 1.8 !important;
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
  color: var(--sob-white) !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
}

.single-post .entry-content p { color: #999 !important; }
.single-post .entry-content strong { color: var(--sob-white) !important; }

.single-post .entry-content blockquote {
  border-left: 4px solid var(--sob-accent) !important;
  background-color: var(--sob-card) !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  color: var(--sob-white) !important;
  font-style: normal !important;
}

/* =============================================
   FORMULIEREN (CONTACT ETC.)
   ============================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background-color: var(--sob-card) !important;
  color: var(--sob-white) !important;
  border: 1px solid var(--sob-border) !important;
  border-radius: 0 !important;
  font-family: 'Barlow', sans-serif !important;
  padding: 12px 16px !important;
  width: 100%;
  transition: border-color 0.2s !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--sob-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(200,255,0,0.1) !important;
}

/* =============================================
   GUTENBERG BLOKKEN
   ============================================= */

/* Cover blok (hero-achtig) */
.wp-block-cover {
  min-height: 80vh !important;
}

.wp-block-cover .wp-block-cover__inner-container {
  font-family: 'Bebas Neue', sans-serif;
}

/* Quote blok */
.wp-block-quote {
  border-left: 4px solid var(--sob-accent) !important;
  background-color: var(--sob-card) !important;
  padding: 24px 28px !important;
}

/* Tabel blok */
.wp-block-table table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.wp-block-table td,
.wp-block-table th {
  border: 1px solid var(--sob-border) !important;
  padding: 12px 16px !important;
  color: var(--sob-text) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px;
}

.wp-block-table th {
  background-color: var(--sob-card) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--sob-muted) !important;
}

/* Separatoren */
.wp-block-separator {
  border-color: var(--sob-border) !important;
  opacity: 1 !important;
}

/* =============================================
   NOTICES & MELDINGEN
   ============================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  border-radius: 0 !important;
  border-top: none !important;
}

.woocommerce-message {
  background-color: rgba(200,255,0,0.08) !important;
  border-left: 4px solid var(--sob-accent) !important;
  color: var(--sob-text) !important;
}

.woocommerce-info {
  background-color: rgba(59,130,246,0.08) !important;
  border-left: 4px solid #3B82F6 !important;
  color: var(--sob-text) !important;
}

.woocommerce-error {
  background-color: rgba(255,61,0,0.08) !important;
  border-left: 4px solid var(--sob-red) !important;
  color: var(--sob-text) !important;
}

/* =============================================
   PAGINERING
   ============================================= */
.page-numbers {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  color: var(--sob-muted) !important;
  border: 1px solid var(--sob-border) !important;
  padding: 8px 14px !important;
  display: inline-block;
  transition: all 0.2s;
}

.page-numbers:hover,
.page-numbers.current {
  background-color: var(--sob-accent) !important;
  color: var(--sob-black) !important;
  border-color: var(--sob-accent) !important;
}

/* =============================================
   SCROLLBAR STIJL
   ============================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sob-black); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--sob-accent); }

/* =============================================
   MOBIEL RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  h1 { font-size: 52px !important; }
  h2 { font-size: 40px !important; }

  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .woocommerce-checkout .col2-set {
    display: block !important;
  }

  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
  }
}

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