/*
	Theme Name: Hello Elementor
	Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
	Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
	Author: Elementor Team
	Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
	Version: 3.4.6
	Stable tag: 3.4.6
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/

/* --- 1. Reset & Basis Kleuren --- */
:root {
    --purus-green: #b3e1d2;
    --purus-dark: #050505;
    --purus-card: #0f0f0f;
    --purus-border: #222;
}

* { box-sizing: border-box; }

body, html {
    background-color: var(--purus-dark) !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- 2. Algemene Elementen & Knoppen --- */
.section-title { text-align: center; padding: 20px; text-transform: uppercase; font-weight: 900; }

.purus-btn, 
.single_add_to_cart_button, 
.wc-block-cart__submit-button, 
.wc-block-components-checkout-button {
    background-color: var(--purus-green) !important;
    color: #000 !important;
    padding: 18px 30px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0px !important;
    letter-spacing: 1px;
    transition: 0.3s ease-in-out !important;
    display: inline-block;
}

.purus-btn:hover, 
.single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover { 
    background-color: #ffffff !important; 
    transform: scale(1.02);
}

/* --- 3. Product Cards (Home/Grid) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 40px 20px;
}

.purus-card {
    background: var(--purus-card);
    border: 1px solid var(--purus-border);
    transition: 0.3s;
    height: 100%;
}

.purus-card:hover {
    border-color: var(--purus-green);
    box-shadow: 0 10px 30px rgba(0, 223, 89, 0.1);
}

.purus-card-img { width: 100%; height: 240px; background: #000; overflow: hidden; }
.purus-card-img img { width: 100%; height: 100%; object-fit: cover; }

.purus-card-content { padding: 25px; text-align: center; }
.purus-card h3 { font-size: 19px; text-transform: uppercase; min-height: 50px; display: flex; align-items: center; justify-content: center; }

/* --- 4. WooCommerce Blokken (Winkelwagen & Checkout) --- */
.wc-block-cart, .wc-block-checkout { background: transparent !important; color: #fff !important; }

/* De Rijtjes in de Cart */
.wc-block-cart-items__row, .wc-block-components-checkout-step {
    background: #111 !important;
    border: 1px solid #333 !important;
    margin-bottom: 20px !important;
    padding: 20px !important;
}

/* Titels in de Checkout */
.wc-block-components-title, .wc-block-components-checkout-step__title {
    color: var(--purus-green) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
}

/* Formulier Inputs (Responsive Fix) */
.wc-block-components-text-input input, 
.wc-blocks-components-select__select,
.quantity input {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    padding: 24px 12px 8px 12px !important; /* Ruimte voor label */
    border-radius: 0 !important;
    font-size: 16px !important; /* Voorkomt zoom op iPhone */
}

/* Labels Animatie */
.wc-block-components-text-input label, .wc-blocks-components-select__label {
    color: #888 !important;
}

.wc-block-components-text-input.is-active label {
    transform: translateY(-12px) scale(0.8) !important;
    color: var(--purus-green) !important;
}

/* --- 5. Land/Regio Select Mobile Fix --- */
.wc-blocks-components-select { margin-top: 20px !important; }
.wc-blocks-components-select__label {
    top: -10px !important;
    left: 10px !important;
    background: #111 !important;
    color: var(--purus-green) !important;
    padding: 0 5px !important;
}

/* --- 6. Product Detail (Single) Specifics --- */
/* --- 6. Product Detail (Single) Specifics --- */
.product-gallery-container { 
    position: relative !important; 
    background: #000 !important;
    height: 100%; /* Dit heb je al toegevoegd, top! */
    min-height: 400px; /* Geeft een basis mocht de foto traag laden */
}

/* De hoekjes strak op de rand */
.product-gallery-container::before,
.product-gallery-container::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 20;
    pointer-events: none;
}

/* Linkerbovenhoek: exact op de border */
.product-gallery-container::before {
    top: 0; 
    left: 0; 
    border-top: 3px solid var(--purus-green);
    border-left: 3px solid var(--purus-green);
}
.woocommerce div.product div.images {
  margin-bottom: 10px!important;
}

.woocommerce-tabs {
    clear: both !important;
    display: block !important;
    margin-top: 50px !important; /* Geeft ademruimte onder de foto/info */
    position: relative !important;
    z-index: 1 !important;
}
/* Rechteronderhoek: exact op de border */
.product-gallery-container::after {
    bottom: 0; 
    right: 0; 
    border-bottom: 3px solid var(--purus-green);
    border-right: 3px solid var(--purus-green);
}

/* De 'Target' hoekjes voor de futuristische look */
.purus-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 20px; height: 20px;
    border-top: 3px solid var(--purus-green);
    border-left: 3px solid var(--purus-green);
    z-index: 10;
}

/* --- 7. Cleanup & WP Defaults --- */
#secondary, .woocommerce-breadcrumb, .entry-meta, .screen-reader-text, 
.woocommerce-result-count, .woocommerce-ordering { 
    display: none !important; 
}

/* --- 8. Mobile Responsiveness Queries --- */
@media (max-width: 768px) {
    .display-5 { font-size: 2rem !important; } /* Bootstrap display font kleiner op mobiel */
    .wc-block-cart-items__row {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .wc-block-cart-item__image { margin-bottom: 15px; }
}

/* --- Volledige breedte navigatie (Sneek Style) --- */

/* 1. Forceer de container naar 100% breedte */
.woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
}

/* 2. De content moet er nu onder vallen ipv ernaast */
.woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
}

/* 3. De knoppen op één lijn zonder scroll */
.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Wrap mag hier wel zodat ze op mobiel netjes zakken */
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--purus-border) !important;
    padding-bottom: 20px !important;
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation ul li a {
    background-color: var(--purus-card) !important;
    color: #fff !important;
    padding: 10px 15px !important;
    border: 1px solid var(--purus-border) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    display: block !important;
    transition: 0.3s !important;
}

/* Hover & Actief: Wit (voor hoofd) of Groen (voor Sneek) */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
/* Forceer WooCommerce buttons naar Bootstrap Primary */
.single_add_to_cart_button.button.alt {
    display: block;
    width: 100%;
    background-color: #0d6efd !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

/* Fix de Quantity input zodat deze naast de knop past */
.quantity {
    display: inline-block;
    margin-right: 10px;
}

.quantity input.qty {
    width: 60px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid #ced4da;
}

/* Maak de tabs horizontaal en modern */
.wc-tabs {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #f8f9fa;
    margin-bottom: 20px !important;
}

.wc-tabs li a {
    text-decoration: none !important;
    color: #6c757d;
    padding: 10px 20px;
    display: block;
}

.wc-tabs li.active a {
    color: #0d6efd;
    border-bottom: 2px solid #0d6efd;
    font-weight: bold;
}
/* --- BOOTSTRAP 5 LAYOUT FIXES --- */
.single-product .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Forceer kolommen op desktop */
@media (min-width: 992px) {
    .single-product .col-lg-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }
}

/* --- PURUS THEME OVERRIDES --- */
.product-details-card {
    border-color: #333 !important;
}

.table-dark {
    background-color: transparent !important;
}

/* De Grote Groene Knop */
.single_add_to_cart_button.button.alt {
    background-color: #00ff00 !important; /* Of je --purus-green variabele */
    color: #000 !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    padding: 20px !important;
    width: 100% !important;
}

.purus-specs{
margin-top:30px;
border-top:1px solid #222;
padding-top:15px;
}

.purus-spec-item{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #1a1a1a;
}

.spec-label{
color:#777;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
}

.spec-value{
color:#fff;
font-weight:700;
}
/* Woo product image full width */
.woocommerce-product-gallery,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img{
    width:100% !important;
    max-width:100% !important;
}

/* verwijdert inline-block probleem */
.woocommerce-product-gallery__image{
    display:block !important;
}

/* zorgt dat image altijd container vult */
.woocommerce-product-gallery img{
    width:100%;
    height:auto;
}
/* 3. Verbeter de leesbaarheid van de tabs */
.wc-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    border-bottom: 1px solid var(--purus-border) !important;
    padding-left: 0 !important;
}

.wc-tabs li {
    background: var(--purus-card) !important;
    margin-bottom: -1px !important; /* Laat de actieve tab op de border aansluiten */
}

.wc-tabs li a {
    color: #888 !important;
    padding: 12px 20px !important;
    display: block !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
}

/* Actieve tab kleur */
.wc-tabs li.active {
    background: var(--purus-dark) !important;
    border: 1px solid var(--purus-border) !important;
    border-bottom: 1px solid var(--purus-dark) !important;
}

.wc-tabs li.active a {
    color: var(--purus-green) !important;
}

/* --- 9. Modern Tabs Styling --- */

/* Verwijder de standaard WooCommerce lijnen en achtergronden */
.woocommerce-tabs ul.tabs {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    gap: 10px !important; /* Ruimte tussen de blokjes */
    margin-bottom: 20px !important;
}

.woocommerce-tabs ul.tabs::before {
    display: none !important; /* Verwijdert de standaard lijn */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before
{
  display: none !important; /* Verwijdert de standaard lijn */  
}
/* De individuele tab-knoppen */
.woocommerce-tabs ul.tabs li {
    background-color: var(--purus-card) !important;
    border: 1px solid var(--purus-border) !important;
    border-radius: 0 !important; /* Strakke hoeken */
    padding: 0 !important;
    margin: 0 !important;
    transition: 0.3s ease;
}

.woocommerce-tabs ul.tabs li a {
    color: #ffffff !important;
    padding: 15px 25px !important;
    display: block !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1px;
    text-decoration: none !important;
}

/* Hover effect */
.woocommerce-tabs ul.tabs li:hover {
    border-color: var(--purus-green) !important;
}

/* De actieve tab (Sneek Groen) */
.woocommerce-tabs ul.tabs li.active {
    background-color: var(--purus-green) !important;
    border-color: var(--purus-green) !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #000000 !important; /* Tekst zwart op de groene achtergrond */
}

/* De content box onder de tabs */
.woocommerce-tabs .woocommerce-Tabs-panel {
    background: var(--purus-card) !important;
    border: 1px solid var(--purus-border) !important;
    padding: 30px !important;
    color: #bbbbbb !important;
}

/* --- 10. Beschrijving & Emoji Fix --- */

/* Zet vinkjes strak voor de tekst op een nieuwe regel */
/* --- 10. Beschrijving & Emoji Grid-stijl --- */

/* Maak van de beschrijving container een CSS Grid-tabel */
.woocommerce-Tabs-panel--description div.text-secondary {
    display: grid !important;
    grid-template-columns: auto 1fr; /* 2 kolommen: vinkje en tekst */
    gap: 15px !important; /* Ruimte tussen vinkje en tekst */
    align-items: center; /* Vinkje en tekst verticaal uitlijnen */
    padding: 10px 0 !important;
}

/* Stijl voor de vinkjes (checkmarks) */
.woocommerce-Tabs-panel--description img.emoji[alt="✔️"] {
    grid-column: 1; /* Forceer in de eerste kolom */
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    /* De Purus Groene Shadow/Glow */
    filter: drop-shadow(0 0 4px rgba(0, 223, 89, 0.8)) !important;
    opacity: 1 !important;
}

/* De tekst direct NA het vinkje moet een beetje opschuiven */
.woocommerce-Tabs-panel--description p > img.emoji[alt="✔️"] + * {
    margin-left: -5px; /* Fijnafstemming om het vinkje strak tegen de tekst te zetten */
}

/* Maak de tekst van elk item strakker */
.woocommerce-Tabs-panel--description .text-white-50 p {
    color: #eee !important;
    margin-bottom: 0 !important;
    display: inline; /* Zodat de tekst niet naar een nieuwe regel springt */
}

/* De sterren (stars) moeten klein en compact blijven en NAAST elkaar staan */
.woocommerce-Tabs-panel--description img.emoji[alt="⭐"] {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 1px !important;
    vertical-align: baseline !important;
    grid-column: 2; /* Sterren horen bij de tekst-kolom */
    filter: none !important; /* Geen groene glow voor de sterren */
}
/* Specifiek voor de gerelateerde sectie op de productpagina */
.related.products .shadow-hover {
    transition: 0.3s all ease-in-out !important;
}

.related.products .shadow-hover:hover {
    border-color: #b3e1d2 !important;
    transform: translateY(-10px) !important;
    background-color: #0a0a0a !important;
    z-index: 10; /* Zorgt dat de kaart over andere elementen heen 'zweeft' */
}
/* Maak de actieve tab groen */
.woocommerce-tabs ul.tabs li.active a {
    background-color: var(--purus-green) !important;
    border-color: var(--purus-green) !important;
    color: #000 !important;
}

/* Hover effect voor de overige tabs */
.woocommerce-tabs ul.tabs li a:hover {
    border-color: var(--purus-green) !important;
    color: var(--purus-green) !important;
}

/* --- 13. WooCommerce Notice naar Custom Toast (Linksonder) --- */

/* De container van de melding */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    width: auto !important;
    min-width: 300px;
    max-width: 450px;
    z-index: 9999 !important;
    background-color: #0a0a0a !important; /* Pure Black */
    color: #fff !important;
    border: 1px solid var(--purus-green) !important; /* De kenmerkende groene rand */
    border-radius: 0 !important;
    padding: 20px 25px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 223, 89, 0.2) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    animation: slideInLeft 0.5s ease-out forwards;
}

/* Verwijder het standaard icoontje/streepje aan de linkerkant */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}

/* De knop "Bekijk winkelwagen" in de melding */
.woocommerce-message .button {
    background: var(--purus-green) !important;
    color: #000 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    margin-left: 20px !important;
    padding: 8px 15px !important;
    font-size: 0.75rem !important;
    transition: 0.3s all ease !important;
    border: none !important;
}

.woocommerce-message .button:hover {
    background: #fff !important;
    transform: scale(1.05);
}

/* Animatie om hem strak binnen te laten vliegen */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobiel: zet hem onderaan in het midden */
@media (max-width: 768px) {
    .woocommerce-message {
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;
        max-width: none;
    }
}
.close-notice
{
 top: 0px;
  position: absolute;
  right: 5px;   
}
.my-account-wallet h3,
.my-account-wallet p,
.my-account-wallet span,
.my-account-wallet bdi,
.my-account-wallet .woocommerce-Price-amount,
.my-account-wallet .woocommerce-Price-currencySymbol {
    color: #000 !important;
}

.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
  float: right;
  width: 100%!important;
}
/* Forceer twee kolommen op de afrekenpagina */
@media (min-width: 992px) {
    .woocommerce-checkout {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }
    #customer_details {
        flex: 0 0 calc(60% - 15px);
    }
    #order_review_heading, 
    #order_review {
        flex: 0 0 calc(40% - 15px);
    }
}

/* Fix voor zwarte tabel styling */
#order_review {
    background: #000 !important;
    border: 1px solid #333 !important;
    padding: 20px !important;
    border-radius: 8px;
}

.shop_table.woocommerce-checkout-review-order-table {
    background: transparent !important;
    color: #fff !important;
}

.shop_table.woocommerce-checkout-review-order-table td, 
.shop_table.woocommerce-checkout-review-order-table th {
    border-color: #333 !important;
    color: #fff !important;
}
.navbar-toggler {
    filter: invert(1); /* Draait de kleur van het witte icoon om naar zwart */
    background-color: rgba(255,255,255,0.1); /* Geeft de knop zelf wat contrast */
}
/* Zorg dat de header op mobiel altijd zwart blijft */
@media (max-width: 991.98px) {
    .navbar {
        background-color: #050505 !important;
    }
    
    /* Maak het hamburgermenu-icoon zwart als de achtergrond per ongeluk wit blijft */
    .navbar-toggler-icon {
        filter: invert(1); 
    }
    
    /* Zorg dat het menu zelf ook een donkere achtergrond heeft als het uitklapt */
    .navbar-collapse {
        background-color: #050505 !important;
        padding: 1rem;
    }
}
/* WooCommerce Message - Purus Dark Toast Style */
.woocommerce-message {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: auto !important;
    max-width: 400px !important;
    background-color: #050505 !important; /* Purus zwart */
    color: #ffffff !important;
    border: 1px solid #222 !important; /* Subtiele rand */
    padding: 15px 45px 15px 20px !important;
    z-index: 9999 !important;
    border-left: 4px solid var(--purus-green) !important; /* Groene Purus accentlijn */
    display: flex !important;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* De "Bekijk winkelwagen" knop in de melding */
.woocommerce-message .button {
    background-color: var(--purus-green) !important;
    color: #000 !important;
    border-radius: 0 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    padding: 5px 10px !important;
    margin-left: auto;
    border: none !important;
}

/* Het Klikbare Kruisje (Rechtsboven in de toast) */
.woocommerce-message::after {
    content: "\2715"; /* Unicode X */
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    font-weight: bold;
    pointer-events: all; /* Maakt het klikbaar */
    transition: 0.2s;
}

.woocommerce-message::after:hover {
    color: var(--purus-green);
}
/* Purus Mobile Fixes */
@media (max-width: 767px) {
    .purus-cart-wrapper { padding-left: 10px !important; padding-right: 10px !important; }
    
    /* Maak de thumbnail passend */
    .purus-glitch-box img { width: 100% !important; height: auto !important; }
    
    /* Maak het aantal-vakje kleiner op mobiel */
    .purus-qty-stepper .quantity input.qty {
        width: 40px !important;
        height: 35px !important;
        background: transparent !important;
        color: #fff !important;
        border: none !important;
        font-size: 14px !important;
    }
    
    /* Zorg dat de terminal (rechterkolom) onderaan staat en niet 'sticky' is op mobiel */
    .purus-terminal {
        position: relative !important;
        top: 0 !important;
        margin-top: 2rem;
    }
}

/* Algemene tabel cleanup */
.purus-item-row { border-left: 3px solid var(--purus-green) !important; transition: 0.3s; }
.purus-item-row:hover { background: #111 !important; border-left: 3px solid #fff !important; }