/* =========================================================
   SyncHost producten - Antler gerichte styling
   Bestand: css_producten_winkel.css
   ========================================================= */

/* Algemene pagina */
section#main-body {
    background: transparent !important;
}

/* Product overzicht breedte / ruimte */
.products .row,
div.products .row {
    row-gap: 24px;
}

/* =========================
   PRODUCTKAARTEN
   ========================= */
.single-product,
div.single-product,
.single-product.tt-custom-radius,
.products .single-product,
#product1,
#product2,
#product3,
#product4,
#product5,
#product6 {
    background: linear-gradient(135deg, #0b1f2a 0%, #102836 55%, #0d2230 100%) !important;
    border: 1px solid rgba(0, 224, 164, 0.14) !important;
    border-radius: 28px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
    transition: all 0.30s ease !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 380px !important;
    padding: 32px 22px !important;
    color: #ffffff !important;
}

/* Hover */
.single-product:hover,
div.single-product:hover,
.single-product.tt-custom-radius:hover {
    transform: none !important;
}

/* Glans effect */
.single-product::before,
div.single-product::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(54, 214, 255, 0.06) 0%, rgba(54, 214, 255, 0) 80%);
    pointer-events: none;
}

/* Producttitel */
.single-product h3,
.single-product h4,
.single-product .product-title,
.single-product .title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    margin-bottom: 14px !important;
}

/* Prijs */
.single-product .pricing,
.single-product .price,
.single-product .amount,
.single-product h6,
.single-product .product-price {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 40px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
}

/* Per maand / kleine tekst */
.single-product small,
.single-product .text-small,
.single-product .period,
.single-product span {
    color: #9fb6c9 !important;
}

/* Specificaties */
.single-product p {
    color: #dce8f1 !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
}

/* Sterke regels in specs */
.single-product p strong,
.single-product strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Knoppen */
.single-product .btn,
.single-product .btn-default,
.single-product .btn-primary,
.single-product a.btn,
.single-product button {
    background: linear-gradient(135deg, #f6c800 0%, #ffd84d 100%) !important;
    color: #111827 !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    padding: 13px 30px !important;
    box-shadow: 0 8px 18px rgba(246, 200, 0, 0.28) !important;
    transition: all 0.25s ease !important;
}

.single-product .btn:hover,
.single-product .btn-default:hover,
.single-product .btn-primary:hover,
.single-product a.btn:hover,
.single-product button:hover {
    background: linear-gradient(135deg, #ffd84d 0%, #ffe36a 100%) !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(246, 200, 0, 0.35) !important;
}

/* =========================
   SIDEBAR BLOKKEN
   ========================= */
.panel.card.card-sidebar,
.panel.card,
.card-sidebar,
div.panel.card.card-sidebar {
    background: linear-gradient(135deg, #0b1f2a 0%, #102836 100%) !important;
    border: 1px solid rgba(0, 224, 164, 0.12) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden !important;
}

/* Sidebar kop */
.panel-heading.card-header,
.card-header,
.panel-heading {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 18px !important;
}

/* Sidebar titel tekst */
.panel-heading.card-header h3,
.panel-heading.card-header h4,
.panel-heading.card-header span,
.panel-heading.card-header strong,
.card-header h3,
.card-header h4 {
    color: #ffffff !important;
}

/* Lijst in sidebar */
.list-group.panel-body,
.list-group,
.list-group-item {
    background: transparent !important;
    border: none !important;
}

/* Sidebar links */
a.list-group-item,
.list-group-item {
    background: transparent !important;
    color: #d8e5ef !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 14px 18px !important;
    transition: all 0.25s ease !important;
}

/* Hover sidebar */
a.list-group-item:hover,
.list-group-item:hover {
    background: rgba(31, 224, 179, 0.08) !important;
    color: #ffffff !important;
}

/* Actieve sidebar categorie */
a.list-group-item.active,
.list-group-item.active {
    background: linear-gradient(90deg, rgba(31, 224, 179, 0.16), rgba(54, 214, 255, 0.07)) !important;
    color: #ffffff !important;
    border-left: 3px solid #1fe0b3 !important;
    font-weight: 700 !important;
}

/* View cart blok */
.panel-body .list-group-item i,
.card-sidebar i {
    color: #d9e6ef !important;
}

/* =========================
   PAGINATITEL
   ========================= */
.products h2,
.products h3,
.main-content h2,
.main-content h3 {
    color: #ffffff !important;
}

/* =========================
   RUIMTE TUSSEN PRODUCTEN
   ========================= */
.products .col-lg-4,
.products .col-md-6,
.products .col-12 {
    margin-bottom: 28px !important;
}

/* =========================
   MOBIEL
   ========================= */
@media (max-width: 768px) {
    .single-product,
    div.single-product,
    .single-product.tt-custom-radius {
        border-radius: 22px !important;
        min-height: auto !important;
        padding: 24px 16px !important;
    }

    .single-product .pricing,
    .single-product .price,
    .single-product .amount,
    .single-product h6,
    .single-product .product-price {
        font-size: 30px !important;
    }

    .single-product .btn,
    .single-product a.btn,
    .single-product button {
        width: 100% !important;
        max-width: 220px !important;
    }
}

/* =========================================
   Harde override voor alle productpagina's
   ========================================= */

div.tt-single-product,
.tt-single-product,
div.single-product.tt-single-product,
div.single-product,
.products div.tt-single-product,
.products .single-product,
.products [id^="product"],
.products [id*="product"] {
    background: linear-gradient(135deg, #0b1f2a 0%, #102836 55%, #0d2230 100%) !important;
    background-color: #102836 !important;
    border: 1px solid rgba(0, 224, 164, 0.14) !important;
    border-radius: 28px !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
    color: #ffffff !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Hover */
div.tt-single-product:hover,
.tt-single-product:hover,
div.single-product:hover,
.products [id^="product"]:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38) !important;
    border-color: rgba(79, 209, 255, 0.34) !important;
}

/* Teksten */
.tt-single-product h1,
.tt-single-product h2,
.tt-single-product h3,
.tt-single-product h4,
.tt-single-product h5,
.tt-single-product h6,
.tt-single-product p,
.tt-single-product span,
.tt-single-product small,
.tt-single-product strong,
.tt-single-product li,
.single-product h1,
.single-product h2,
.single-product h3,
.single-product h4,
.single-product h5,
.single-product h6,
.single-product p,
.single-product span,
.single-product small,
.single-product strong,
.single-product li {
    color: #ffffff !important;
}

/* Subtekst en maandtekst */
.tt-single-product small,
.tt-single-product span,
.tt-single-product p:not(.price),
.single-product small,
.single-product span,
.single-product p:not(.price) {
    color: #d7e5ef !important;
}

/* Prijs */
.tt-single-product .price,
.tt-single-product .pricing,
.tt-single-product .amount,
.tt-single-product .product-price,
.tt-single-product h6,
.single-product .price,
.single-product .pricing,
.single-product .amount,
.single-product .product-price,
.single-product h6 {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 38px !important;
}

/* Knoppen */
.tt-single-product .btn,
.tt-single-product .btn-default,
.tt-single-product .btn-primary,
.tt-single-product a.btn,
.tt-single-product button,
.single-product .btn,
.single-product .btn-default,
.single-product .btn-primary,
.single-product a.btn,
.single-product button {
    background: linear-gradient(135deg, #f6c800 0%, #ffd84d 100%) !important;
    background-color: #f6c800 !important;
    color: #111827 !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(246, 200, 0, 0.28) !important;
}

/* Glans effect */
.tt-single-product::before,
.single-product::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(54, 214, 255, 0.14) 0%, rgba(54, 214, 255, 0) 72%);
    pointer-events: none;
}

/* =========================================
   Bubbelvlakken in productkaart verwijderen
   ========================================= */

.tt-single-product > div,
.tt-single-product > span,
.tt-single-product > p,
.tt-single-product .price,
.tt-single-product .pricing,
.tt-single-product .amount,
.tt-single-product .product-title,
.tt-single-product .title,
.tt-single-product .description,
.tt-single-product .specs,
.tt-single-product .features,
.tt-single-product .inner,
.tt-single-product .content,
.tt-single-product .wrapper,
.tt-single-product .product-info,
.tt-single-product .product-price,
.tt-single-product .product-desc {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ook alle directe blokken in de kaart schoonmaken */
.tt-single-product .text-center,
.tt-single-product .clearfix,
.tt-single-product .px-3,
.tt-single-product .py-5,
.tt-single-product [class*="col-"],
.tt-single-product [class*="price"],
.tt-single-product [class*="title"],
.tt-single-product [class*="desc"],
.tt-single-product [class*="feature"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Alleen de buitenste kaart rond houden */
.tt-single-product {
    border-radius: 28px !important;
}

/* Alle inner elementen geen ronde bubbel meer */
.tt-single-product *:not(.btn):not(a.btn) {
    border-radius: 0 !important;
}

/* Prijsblok en tekstblok expliciet plat maken */
.tt-single-product h3,
.tt-single-product h4,
.tt-single-product h5,
.tt-single-product h6,
.tt-single-product p,
.tt-single-product span,
.tt-single-product strong,
.tt-single-product small {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Knop wel mooi rond laten */
.tt-single-product .btn,
.tt-single-product a.btn,
.tt-single-product button {
    border-radius: 999px !important;
}

/* Titelbalk weg */
.tt-product-name,
.tt-product-name h5,
.tt-product-name h5[id^="product"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 0 14px 0 !important;
}

/* Infobox weg */
.product-desc,
.tt-product-desc,
div[id$="-description"],
div[id^="product"][id$="-description"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 18px 0 0 0 !important;
}

/* Lijst in info vak ook schoon */
.product-desc ul,
.tt-product-desc ul,
div[id$="-description"] ul,
.product-desc li,
.tt-product-desc li,
div[id$="-description"] li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mooie spacing voor productnaam */
.tt-product-name h5,
h5[id$="-name"] {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Beschrijving netjes zonder box */
div[id$="-description"],
.product-desc {
    color: #dce8f1 !important;
    line-height: 1.7 !important;
}

/* Niet omhoog bewegen bij hover */
.tt-single-product:hover,
div.tt-single-product:hover,
.products [id^="product"]:hover,
.single-product:hover,
div.single-product:hover {
    transform: none !important;
    top: auto !important;
}

/* Zorg dat alleen schaduw verandert, niet de positie */
.tt-single-product,
div.tt-single-product,
.products [id^="product"],
.single-product,
div.single-product {
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* Prijsblok niet omhoog duwen */
.product-pricing,
.tt-product-price,
.product-pricing.tt-product-price.mt-3,
div[id$="-price"] {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
}

/* Titel ook stabiel houden */
.tt-product-name,
.tt-product-name h5,
h5[id$="-name"] {
    margin-top: 0 !important;
    transform: none !important;
    position: static !important;
    top: auto !important;
}