/* ==========================================================================
   PUROX child theme - WooCommerce brand overrides
   Makes shop / product / cart / checkout match the homepage.
   ========================================================================== */

/* --- Base typography (Saira, from shared css) --- */
body,
.wp-site-blocks,
.woocommerce,
.wc-block-components-title,
p, li, td, th, label, input, select, textarea, button {
	font-family: var(--body, 'Saira', sans-serif);
	color: var(--ink, #141414);
}
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
.wc-block-components-product-name,
.wp-block-post-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: var(--display, 'Saira Condensed', sans-serif) !important;
	letter-spacing: 1px;
	color: var(--ink, #141414);
}

/* --- Header: always the white PUROX pill, in normal flow on these pages --- */
.header-wrap { position: static !important; padding-top: 18px; }
.header { background: var(--white, #fff) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.10) !important; }
.header .logo-img { filter: brightness(0); height: 30px; }
.header .hamburger span { background: var(--ink, #141414) !important; }
.header .cart-icon::before,
.header .cart-icon::after { border-color: var(--ink, #141414) !important; }

/* Hide the Hostinger theme's own header/footer if any leak through */
body .wp-block-template-part > .hostinger-header,
body .site-header--hostinger { display: none; }

/* --- Buttons -> PUROX green, square, Saira Condensed --- */
.button,
a.button,
button.button,
[type="submit"],
.wp-block-button__link,
.wc-block-components-button,
.single_add_to_cart_button,
.checkout-button,
.wc-block-cart__submit-button,
.added_to_cart,
.woocommerce #respond input#submit {
	background: var(--green, #33D42A) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: var(--display, 'Saira Condensed', sans-serif) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	padding: 14px 28px !important;
	box-shadow: none !important;
	transition: background .2s ease;
}
.button:hover,
a.button:hover,
button.button:hover,
[type="submit"]:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
	background: var(--green-dark, #3B9615) !important;
	color: #fff !important;
}

/* --- Prices --- */
.price,
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
	color: var(--ink, #141414) !important;
	font-weight: 700;
}
del, .wc-block-components-product-price del { opacity: .5; }

/* --- Product grid cards --- */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template li.product,
ul.wc-block-product-template li {
	background: #fff;
	border: 1px solid var(--border, #e5e5e5);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover,
.wp-block-woocommerce-product-template li.product:hover {
	box-shadow: 0 14px 34px rgba(0,0,0,0.10);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product a img,
.wp-block-woocommerce-product-template li img { border-radius: 8px; }
.woocommerce-loop-product__title,
.wc-block-components-product-name { font-size: 18px; letter-spacing: 1px; }

/* --- Links + accents --- */
.woocommerce a:not(.button):not(.wp-block-button__link),
.wp-site-blocks a:not(.button):not(.wp-block-button__link):not(.social):not(.pm-item) { color: var(--ink, #141414); }
.woocommerce a:not(.button):hover { color: var(--green-dark, #3B9615); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--green, #33D42A); }
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--green, #33D42A) !important;
	color: #fff !important;
	border-radius: 4px;
	font-family: var(--display, 'Saira Condensed', sans-serif);
}

/* --- Forms (cart / checkout) --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input,
select {
	border-radius: 6px !important;
	border: 1px solid var(--border, #e5e5e5) !important;
	font-family: var(--body, 'Saira', sans-serif);
}

/* Page title (Shop heading etc) */
.wp-block-post-title, .woocommerce-products-header__title, .page-title {
	font-family: var(--display, 'Saira Condensed', sans-serif) !important;
	letter-spacing: 1.5px;
}

/* Breadcrumb */
.woocommerce-breadcrumb { font-family: var(--body, 'Saira'); color: #777; }

/* --- Verberg het Hostinger-thema's eigen header/footer (wij injecteren die van PUROX) --- */
.wp-site-blocks header.wp-block-template-part,
.wp-site-blocks footer.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks > footer { display: none !important; }

/* Onze geinjecteerde header/footer staan buiten .wp-site-blocks en blijven zichtbaar */
body > .header-wrap { position: static; }
body > .footer { margin-top: 40px; }

/* ===== Blog: strak & compact ===== */
.wp-block-query .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wp-block-query .wp-block-post { border: 1px solid var(--border,#e5e5e5); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.wp-block-query .wp-block-post:hover { box-shadow: 0 14px 34px rgba(0,0,0,.10); transform: translateY(-3px); }
.wp-block-query .wp-block-post-featured-image { margin: 0 !important; max-width: none; }
.wp-block-query .wp-block-post-featured-image img { width: 100%; height: 170px; object-fit: cover; border-radius: 0; display: block; }
.wp-block-query .wp-block-post-title { font-size: 18px !important; line-height: 1.25; margin: 16px 18px 6px !important; }
.wp-block-query .wp-block-post-title a { color: var(--ink,#141414); text-decoration: none; }
.wp-block-query .wp-block-post-title a:hover { color: var(--green-dark,#3B9615); }
.wp-block-query .wp-block-post-date { margin: 0 18px !important; font-size: 12px; color: #999; }
.wp-block-query .wp-block-post-excerpt { margin: 8px 18px 18px !important; font-size: 13.5px; color: #666; line-height: 1.5; }
.wp-block-query .wp-block-post-excerpt__more-link, .wp-block-query .wp-block-post-excerpt a { color: var(--green-dark,#3B9615); font-weight: 700; text-decoration: none; }
/* Single post featured image: kleiner & netjes */
.wp-block-post-featured-image { max-width: 720px; margin: 0 auto 26px !important; }
.wp-block-post-featured-image img { max-height: 280px; width: 100%; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 900px) { .wp-block-query .wp-block-post-template { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .wp-block-query .wp-block-post-template { grid-template-columns: 1fr; } }

/* ===== Blog v2: afbeelding EERST, dan titel, dan samenvatting; gelijke kaarten ===== */
.wp-block-query .wp-block-post-template { grid-auto-rows: 1fr; }
.wp-block-query .wp-block-post { justify-content: flex-start; }
.wp-block-query .wp-block-post-featured-image { order: 1; margin: 0 !important; }
.wp-block-query .wp-block-post-featured-image img { height: 160px; border-radius: 0; }
.wp-block-query .wp-block-post-title { order: 2; margin: 16px 18px 6px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.wp-block-query .wp-block-post-date { order: 3; margin: 0 18px !important; }
.wp-block-query .wp-block-post-excerpt { order: 4; margin: 8px 18px 18px !important; }
.wp-block-query .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Single post featured image nog kleiner */
.wp-block-post-featured-image { max-width: 560px !important; }
.wp-block-post-featured-image img { max-height: 220px !important; }

/* ===== Blog v3: kaarten op EEN lijn (margin weg) + datum onder titel ===== */
.wp-block-query .wp-block-post { margin-top: 0 !important; align-self: stretch; }
.wp-block-query .wp-block-post > .wp-block-group { order: 3; margin: 0 !important; }
.wp-block-query .wp-block-post > .wp-block-group .wp-block-post-date { margin: 0 18px !important; }
.wp-block-query .wp-block-post > .wp-block-spacer { display: none !important; }

/* ===== Footer merk-blok gecentreerd ===== */
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-brand h3 { display: flex; justify-content: center; }
.footer-brand h3 a { margin: 0 auto; }
.footer-brand p { margin-left: auto; margin-right: auto; }
.socials { justify-content: center; }

/* ===== Shop-kaarten gelijke hoogte + knop onderaan ===== */
.wc-block-product-template { align-items: stretch; }
.wc-block-product { display: flex !important; flex-direction: column; }
.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; }
.wc-block-product .wp-block-post-title, .wc-block-product .wc-block-components-product-name { min-height: 2.6em; }

/* ===== Lege cart PUROX-stijl: zwarte smiley -> groene falcon ===== */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  -webkit-mask-image: url(/assets/purox-falcon-green.png) !important;
  mask-image: url(/assets/purox-falcon-green.png) !important;
  -webkit-mask-size: contain !important; mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  background-color: var(--green,#33D42A) !important;
  width: 110px !important; height: 74px !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-family: var(--display,'Saira Condensed',sans-serif) !important;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink,#141414);
}

/* ===== Cart = alleen cart: extra's weg + meer ruimte ===== */
.woocommerce-cart .blog { display: none !important; }
.wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none !important; }
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.with-empty-cart-icon) { display: none !important; }
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block .wc-block-grid { display: none !important; }
.wp-block-woocommerce-empty-cart-block { padding: 70px 20px 100px !important; text-align: center; }
.wc-block-cart__empty-cart__title.with-empty-cart-icon { margin-bottom: 6px !important; font-size: 22px !important; }
.purox-cart-shop-btn { display: inline-block; margin: 28px auto 0; background: var(--green,#33D42A); color:#fff !important; font-family: var(--display,'Saira Condensed',sans-serif); font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:15px 36px; border-radius:8px; text-decoration:none; transition: background .2s; }
.purox-cart-shop-btn:hover { background: var(--green-dark,#3B9615); color:#fff !important; }

/* ===== Paginatitels groen (Shop, Cart, Checkout, product, blog-artikel) ===== */
.hostinger-ai-page-title,
.woocommerce-products-header__title,
.product_title,
.wp-block-query-title,
h1.wp-block-post-title { color: var(--green,#33D42A) !important; }
/* blog-kaart titels blijven donker (leesbaarheid) */
.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a { color: var(--ink,#141414) !important; }

/* ===== Checkout clean: blogsectie weg, klassieke checkout PUROX-stijl ===== */
.woocommerce-checkout .blog { display: none !important; }
.woocommerce-checkout #payment { background: #f5f5f5; border-radius: 12px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border,#e5e5e5); }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .cart-subtotal, .woocommerce-checkout .order-total { font-family: var(--display,'Saira Condensed',sans-serif); }

/* ===== Checkout 'Your order' tabel: kleiner & netter ===== */
.woocommerce-checkout-review-order-table { font-size: 14px !important; }
.woocommerce-checkout-review-order-table thead th {
  font-family: var(--display,'Saira Condensed',sans-serif) !important;
  font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1px !important;
  text-transform: uppercase !important; padding: 12px 16px !important; color: #777 !important;
}
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table tbody th.product-name,
.woocommerce-checkout-review-order-table .cart_item .product-name {
  font-family: var(--body,'Saira',sans-serif) !important;
  font-weight: 700 !important; font-size: 14px !important;
  text-transform: none !important; letter-spacing: 0 !important;
  text-align: left !important; padding: 14px 16px !important; color: var(--ink,#141414) !important;
}
.woocommerce-checkout-review-order-table td { font-size: 14px !important; padding: 12px 16px !important; }
.woocommerce-checkout-review-order-table .product-quantity { color: #888; font-weight: 600; }
.woocommerce-checkout-review-order-table tfoot th {
  font-family: var(--display,'Saira Condensed',sans-serif) !important;
  font-size: 13px !important; letter-spacing: .5px !important; text-transform: uppercase !important;
  font-weight: 800 !important; padding: 12px 16px !important;
}
.woocommerce-checkout-review-order-table tfoot td { font-size: 15px !important; font-weight: 700 !important; padding: 12px 16px !important; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout h3#order_review_heading { font-size: 22px !important; }

/* ===== Header bovenaan: verwijder gereserveerde thema-header-ruimte ===== */
body { padding-top: 0 !important; }
body.admin-bar { padding-top: 0 !important; }
.header-wrap { padding-top: 16px !important; }


/* ===== Header FIXED bovenaan (zoals homepage) zodat het menu eraan vastzit ===== */
.header-wrap { position: fixed !important; top: 16px !important; left: 0 !important; right: 0 !important; z-index: 200 !important; padding-top: 0 !important; }
body { padding-top: 90px !important; }
body.admin-bar .header-wrap { top: 48px !important; }
body.admin-bar { padding-top: 122px !important; }