/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

/* Responsive Typography for Headings */
@media (min-width: 1024px) {
    h1 {
        font-size: 4.5rem; /* ~72px */
    }
    h2 {
        font-size: 3.5rem; /* ~56px */
    }
    h3 {
        font-size: 2.5rem; /* ~40px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 3.5rem; /* ~56px */
    }
    h2 {
        font-size: 2.8rem; /* ~45px */
    }
    h3 {
        font-size: 2.2rem; /* ~35px */
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 2.5rem; /* ~40px */
    }
    h2 {
        font-size: 2rem; /* ~32px */
    }
    h3 {
        font-size: 1.5rem; /* ~24px */
    }
    .text-2xl.font-bold {
        font-size: 1.25rem; /* ~20px for logo text */
    }
}




/* Product Card Specifics */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card img {
    height: 256px; /* Fixed height for product images */
    object-fit: contain;
}

/* Utility for scrollable modals */
.max-h-\[90vh\] {
    max-height: 90vh;
}

/* Hide scrollbar for mobile menu when closed */
#mobileMenu.hidden .fixed.right-0 {
    transform: translateX(100%);
}

#mobileMenu.hidden {
    opacity: 0;
    pointer-events: none;
}

#mobileMenu:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

#mobileMenu:not(.hidden) .fixed.right-0 {
    transform: translateX(0%);
}

/* Override default button text decoration */
button {
    text-decoration: none !important;
}

/* Fix for button text wrapping */
.add-to-cart-btn, #checkoutBtn, #acceptAllCookiesBtn, #customizeCookiesBtn, #saveCookieSettingsBtn, #viewCartBtn, #continueShoppingBtn, #continueShoppingAfterOrderBtn {
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}
/* Base container for compliance vault nodes */
.complianceVaultNode {
    padding: 1.5em; /* Padding around the content inside the node */
    margin-bottom: 1.5em; /* Space below the node if followed by another element */
}

/* Heading 1 styles */
.complianceVaultNode h1 {
    font-size: 1.8em; /* Moderately sized heading 1 */
    line-height: 1.2; /* Improved readability for headings */
    margin-top: 1.8em; /* Space above the heading */
    margin-bottom: 0.8em; /* Space below the heading */
    font-weight: bold; /* Ensure bold styling */
}

/* Heading 2 styles */
.complianceVaultNode h2 {
    font-size: 1.5em; /* Moderately sized heading 2 */
    line-height: 1.2;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
    font-weight: bold;
}

/* Heading 3 styles */
.complianceVaultNode h3 {
    font-size: 1.2em; /* Moderately sized heading 3 */
    line-height: 1.3;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: bold;
}

/* Heading 4 styles */
.complianceVaultNode h4 {
    font-size: 1.1em; /* Moderately sized heading 4 */
    line-height: 1.4;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: bold;
}

/* Heading 5 styles */
.complianceVaultNode h5 {
    font-size: 1em; /* Heading 5, typically same size as body text but bold */
    line-height: 1.5;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: bold;
}

/* Paragraph styles */
.complianceVaultNode p {
    font-size: 1em; /* Standard paragraph font size */
    line-height: 1.6; /* Optimal line height for readability */
    margin-top: 0; /* No top margin if preceded by another block element */
    margin-bottom: 1em; /* Space below paragraphs */
}

/* Unordered list styles */
.complianceVaultNode ul {
    list-style-type: disc; /* Default bullet style */
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 2.5em; /* Indentation for bullet points */
}

/* List item styles */
.complianceVaultNode li {
    font-size: 1em; /* Standard list item font size */
    line-height: 1.5; /* Optimal line height for list items */
    margin-bottom: 0.5em; /* Space between list items */
}


#cartItemCount{
    font-size: 7px !important;
}

body, html{
    overflow-x: hidden;
}

@media (max-width: 575px){
    #viewCartBtn{
        margin-left: 0;
        margin-bottom: 10px;
    }

    #cartItemsContainer{
        .flex.items-center.space-x-4.border-b.pb-4{
            flex-direction: column;
        }
    }
}