/* =====================================================================
 *  YourSafePhone — WooCommerce in de huisstijl (dark navy / blauw-cyan)
 * ===================================================================== */

.woo-section { padding-top: clamp(40px, 6vw, 70px); }
.woo-wrap { width: min(100% - 40px, 1180px); }

/* Algemene tekst & links */
.woocommerce, .woocommerce-page { color: var(--ink); }
.woocommerce a:not(.btn):not(.button) { color: var(--cyan); }
.woocommerce a:hover { color: #7fe0ff; }
.woocommerce .quantity, .woocommerce table { color: var(--ink); }

/* Knoppen: alle WC-buttons → merkknop */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .wc-block-components-button {
	background: var(--grad-blue) !important; color: #04101f !important;
	border: 0 !important; border-radius: 999px !important; font-family: var(--font) !important;
	font-weight: 600 !important; padding: 13px 26px !important; cursor: pointer;
	box-shadow: 0 10px 30px -12px rgba(31,107,255,.7); transition: transform .25s var(--ease), box-shadow .25s;
	text-transform: none; font-size: 15px; line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:hover {
	transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(31,107,255,.85); color: #04101f !important;
}
.woocommerce a.button.wc-backward, .woocommerce .button.disabled, .woocommerce button.disabled {
	background: rgba(255,255,255,.06) !important; color: var(--muted) !important; box-shadow: none; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews,
.wc-block-components-notice-banner {
	background: var(--card) !important; border: 1px solid var(--line) !important;
	border-left: 3px solid var(--cyan) !important; border-radius: 10px !important;
	color: var(--ink) !important; padding: 16px 20px !important;
}
.woocommerce-error { border-left-color: #ff6b6b !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--cyan); }

/* Result count / ordering */
.woocommerce .woocommerce-result-count { color: var(--muted); }
.woocommerce .woocommerce-ordering select,
.woocommerce select, .woocommerce .select2-container .select2-selection {
	background: var(--bg); border: 1px solid var(--line); color: var(--ink);
	border-radius: 10px; padding: 10px 14px; font-family: var(--font);
}
.select2-dropdown { background: var(--card-2); border-color: var(--line); color: var(--ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--blue); }

/* =====================================================================
 *  Shop-archief — productkaarten
 * ===================================================================== */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 0; }
.woocommerce ul.products li.product {
	background: linear-gradient(180deg, var(--card), var(--bg-2));
	border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
	margin: 0 !important; width: auto !important; float: none !important;
	transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); border-color: rgba(51,209,251,.4); box-shadow: 0 24px 50px -28px rgba(31,107,255,.6); }
.woocommerce ul.products li.product img { border-radius: 10px; margin-bottom: 16px; background: #fff1; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 18px; padding: 0; color: var(--ink); }
.woocommerce ul.products li.product .price { color: var(--ink); font-weight: 600; }
.woocommerce ul.products li.product .price del { color: var(--muted-2); }
.woocommerce .star-rating span::before { color: var(--cyan); }
@media (max-width: 900px){ .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .woocommerce ul.products { grid-template-columns: 1fr; } }

/* =====================================================================
 *  Enkel product
 * ===================================================================== */
.single-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .woocommerce-product-gallery__wrapper img { border-radius: 16px; background:#0d1424; }
.single-product div.product .summary { margin: 0; }
.single-product .product_title { font-size: clamp(28px,4vw,42px); }
.single-product .price, .single-product .price .amount { color: var(--ink) !important; font-size: 30px; font-weight: 700; }
.single-product .woocommerce-product-details__short-description { color: var(--muted); }
.single-product .product_meta { color: var(--muted-2); font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.single-product .product_meta a { color: var(--cyan); }

/* Variaties */
.woocommerce .variations { border: 0; margin-bottom: 18px; }
.woocommerce .variations th { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform: uppercase; text-align:left; padding: 10px 14px 10px 0; }
.woocommerce .variations td { padding: 6px 0; }
.woocommerce .variations select { min-width: 220px; }
.woocommerce .reset_variations { color: var(--muted); font-size: 13px; }
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
	background: var(--bg); border: 1px solid var(--line); color: var(--ink);
	border-radius: 10px; padding: 12px; width: 72px; text-align: center; font-family: var(--font);
}
.woocommerce div.product form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.woocommerce div.product .woocommerce-variation-price .price { font-size: 26px; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 20px; }
.woocommerce-tabs ul.tabs { border: 0; padding: 0; }
.woocommerce-tabs ul.tabs::before { border-color: var(--line); }
.woocommerce-tabs ul.tabs li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; margin-right: 8px; }
.woocommerce-tabs ul.tabs li.active { background: var(--card-2); border-color: rgba(51,209,251,.4); }
.woocommerce-tabs ul.tabs li a { color: var(--ink); }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs .panel { color: var(--muted); }
@media (max-width: 800px){ .single-product div.product { grid-template-columns: 1fr; gap: 28px; } }

/* =====================================================================
 *  Tabellen (cart, order review)
 * ===================================================================== */
.woocommerce table.shop_table {
	border: 1px solid var(--line); border-radius: 14px; border-collapse: separate; overflow: hidden;
	background: var(--card);
}
.woocommerce table.shop_table th { background: var(--bg-2); color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing:.08em; text-transform: uppercase; border-top: 0; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--line); padding: 16px; }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { background: var(--bg-2); }
.woocommerce table.cart img { width: 64px; border-radius: 8px; }
.woocommerce .product-remove a.remove { color: #ff6b6b !important; border:1px solid var(--line); }
.woocommerce .cart_totals h2 { font-size: 22px; }

/* Coupon / cart actions */
.woocommerce .cart .actions .coupon .input-text { background: var(--bg); border:1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 12px 14px; }

/* =====================================================================
 *  Checkout
 * ===================================================================== */
.woocommerce form .form-row label, .woocommerce-checkout label { color: var(--muted); font-size: 13px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"], .woocommerce-checkout textarea, .woocommerce-checkout select {
	background: var(--bg); border: 1px solid var(--line); color: var(--ink);
	border-radius: 10px; padding: 13px 15px; font-family: var(--font); font-size: 15px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input:focus, .woocommerce-checkout textarea:focus {
	outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,107,255,.18);
}
.woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { }
#order_review, .woocommerce-checkout #payment {
	background: var(--card) !important; border: 1px solid var(--line); border-radius: 16px; padding: 8px 22px 22px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods li { color: var(--ink); }
.woocommerce-checkout #payment div.payment_box { background: var(--bg-2); color: var(--muted); border-radius: 10px; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg-2); }
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: 20px; }
.woocommerce .woocommerce-checkout-review-order-table .amount { color: var(--ink); }

/* Blocks-checkout/cart (nieuwere WC) */
.wc-block-components-text-input input, .wc-block-components-text-input,
.wc-block-checkout__form input, .wc-block-components-form input {
	background: var(--bg) !important; color: var(--ink) !important; border-color: var(--line) !important; border-radius: 10px !important;
}
.wc-block-components-totals-item, .wc-block-cart, .wc-block-checkout { color: var(--ink); }
.wc-block-grid__product, .wc-block-cart-items { color: var(--ink); }

/* =====================================================================
 *  Mijn account
 * ===================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-color: rgba(51,209,251,.4); background: var(--card-2); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display:block; padding: 10px 18px; color: var(--ink); }

/* =====================================================================
 *  Header winkelmand-link
 * ===================================================================== */
.nav-cart { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.nav-cart:hover { color: var(--cyan); }
.nav-cart .ysp-ico { width: 22px; height: 22px; }
.nav-cart .cart-count {
	min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--grad-blue);
	color: #04101f; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
}
.breadcrumb-wrap { color: var(--muted-2); font-size: 13px; margin-bottom: 18px; }
.woocommerce .woocommerce-breadcrumb { color: var(--muted-2); font-size: 13px; margin-bottom: 20px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }