/* =========================================================
   Global Dynamic Theme Variable Bridge & Button Styling
   ========================================================= */
:root {
    --coderiven-primary: var(--primary, var(--primary-color, var(--bs-primary, #111827)));
    --coderiven-primary-hover: color-mix(in srgb, var(--coderiven-primary) 85%, black);
    --coderiven-primary-light: color-mix(in srgb, var(--coderiven-primary) 12%, white);
    --hnb-primary: var(--coderiven-primary);
    --hnb-primary-hover: var(--coderiven-primary-hover);
    --hnb-primary-light: var(--coderiven-primary-light);
}

body,
.page-container,
.page_content,
main {
    background-color: #ffffff !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--coderiven-primary) !important;
    border-color: var(--coderiven-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    background-color: var(--coderiven-primary-hover) !important;
    border-color: var(--coderiven-primary-hover) !important;
    color: #ffffff !important;
}

/* =========================================================
   0. Navbar Toggler Customization
   ========================================================= */

.navbar-toggler {
    padding: 1rem 0rem !important;
}

.navbar-light .navbar-toggler {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.navbar-light .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Sticky Navbar */
.navbar.sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    background-color: var(--card-bg, #ffffff) !important;
    border-bottom: 1px solid var(--border-color, #e9ecef);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Hide duplicate shopping bag inside the collapsed hamburger menu on mobile/tablet */
@media (max-width: 991.98px) {
    .navbar-collapse .shopping-cart,
    .navbar-collapse .shopping-cart.cart-icon,
    .navbar-collapse .cart-icon {
        display: none !important;
    }
}

/* =========================================================
   CRERP Webshop Custom Styles & Mobile Fixes
   ========================================================= */

/* Global Compact Button & Control Styling */
.btn {
    padding: 5px 12px !important;
    font-size: 13px !important;
    border-radius: var(--border-radius-sm, 6px) !important;
    line-height: 1.4 !important;
}

.btn-sm {
    padding: 3px 8px !important;
    font-size: 11.5px !important;
    border-radius: 4px !important;
}

.btn-lg {
    padding: 8px 18px !important;
    font-size: 14px !important;
}

/* Compact Breadcrumbs & Page Titles */
.item-breadcrumbs,
.breadcrumb {
    margin-bottom: 8px !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
}

.item-group-content .title-section,
.item-group-content .mb-5,
.item-group-content .mb-6 {
    margin-bottom: 12px !important;
}

/* 1. Compact Product Grid & Cards */
.item-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.webshop-card,
.product-card,
.item-card > .card {
    border-radius: var(--border-radius-sm, 8px) !important;
    border: 1px solid var(--coderiven-gray-200, #e2e8f0) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    margin-bottom: 0 !important;
}

.webshop-card:hover,
.product-card:hover,
.item-card > .card:hover,
.item-card-group-section .card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--coderiven-gray-200, #e2e8f0) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.item-card .card-body,
.webshop-card .card-body,
.product-card .card-body,
.item-card-group-section .card .card-body {
    padding: 10px 12px !important;
}

.item-card .item-title,
.webshop-card .item-title,
.product-card .product-title,
.item-card-group-section .card .card-title,
.item-card .card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.item-card .item-price,
.webshop-card .item-price,
.product-card .product-price,
.item-card-group-section .card .item-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--coderiven-dark, #0f172a) !important;
    margin-bottom: 4px !important;
}

.item-card .item-price .strikethrough,
.product-price .strikethrough {
    font-size: 11px !important;
    margin-left: 4px !important;
    color: var(--coderiven-gray-500, #94a3b8) !important;
}

.item-card .btn-add-to-cart,
.item-card-group-section .card .btn-add-to-cart,
.product-card .btn-add-to-cart {
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* Compact Filter Sidebar */
.filters-section {
    padding: 8px 0 !important;
}

.filters-section .filters-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.filters-section .clear-filters {
    font-size: 12px !important;
    margin-bottom: 6px !important;
}

.filters-section .filter-group {
    margin-bottom: 12px !important;
}

.filters-section .filter-group-header {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 4px 0 !important;
}

.filters-section .filter-item,
.filters-section .custom-control {
    font-size: 12px !important;
    margin-bottom: 4px !important;
    min-height: auto !important;
}

/* 2. Compact Cart Table & Fix Cart Item Title Overflow */
.cart-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.cart-table td {
    vertical-align: top !important;
    padding: 10px 8px !important;
}

/* Allow flex children in cart rows to shrink without overflowing */
.cart-table td > .d-flex {
    min-width: 0 !important;
}

.cart-table td > .d-flex > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Force product titles and details in cart to show full text and wrap cleanly */
.cart-table .cart-items .item-title,
.cart-table .cart-items .cart-item-details > .font-weight-bold {
    width: 100% !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    padding-right: 6px !important;
    display: block !important;
    text-align: justify !important;
    text-justify: inter-word;
}

.cart-table .cart-items .item-subtitle {
    font-size: 11.5px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Ensure quantity spinner maintains proper spacing */
.cart-table .number-spinner {
    min-width: 96px !important;
    max-width: 104px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.cart-table .number-spinner input.cart-qty {
    padding: 0 !important;
    font-size: 12.5px !important;
    height: 100% !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
}

.cart-table .number-spinner .cart-btn {
    padding: 0 !important;
    height: 100% !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
}

/* Remove cart item button styling */
.cart-table .remove-cart-item {
    cursor: pointer;
    color: var(--text-muted, #8d99a6);
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.cart-table .remove-cart-item:hover {
    color: var(--danger, #e24c4c) !important;
    transform: scale(1.1);
}

.cart-table .remove-cart-item-logo {
    fill: currentColor;
    width: 14px;
    height: 14px;
}

/* Responsive cart adjustments */
.cart-table .cart-item-image {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    margin-right: 10px !important;
}

.cart-table .cart-item-image img,
.cart-table .cart-item-image .cart-item-img,
.cart-table .cart-item-image .website-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    object-fit: cover !important;
    display: block !important;
}

@media (max-width: 576px) {
    .cart-table .cart-item-image {
        min-width: 42px !important;
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        margin-right: 6px !important;
    }
    .cart-table textarea {
        width: 100% !important;
    }
}

/* 3. Fix Product Detail Page Mobile Layout & Tables */
.item-website-specification td {
    padding: 8px 10px !important;
    font-size: 13px !important;
}

@media (max-width: 768px) {
    /* Stack the Product Details table (Label on top, Content below) */
    .item-website-specification table,
    .item-website-specification tbody,
    .item-website-specification tr {
        display: block !important;
        width: 100% !important;
    }

    .item-website-specification td.spec-label {
        display: block !important;
        width: 100% !important;
        font-weight: 600;
        border-bottom: none !important;
        padding: 8px 0 2px 0 !important;
        color: var(--text-color, #1f272e);
    }

    .item-website-specification td.spec-content {
        display: block !important;
        width: 100% !important;
        padding: 0 0 10px 0 !important;
        white-space: pre-line !important;
        line-height: 1.5 !important;
    }
}