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

*, *::before, *::after {
    box-sizing: inherit;
}

:root {
    --purple: #8A2BE2; /* Amethyst */
    --dark-purple: #4B0082; /* Indigo */
    --light-gray: #F8F8F8;
    --dark-gray: #333333;
    --white: #FFFFFF;
    --red: #E74C3C;
    --green: #2ECC71;
}

.purple {
    color: var(--purple);
}

.bg-purple {
    background-color: var(--purple);
}

.b--purple {
    border-color: var(--purple);
}

.bg-dark-purple {
    background-color: var(--dark-purple);
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.dark-gray {
    color: var(--dark-gray);
}

.light-gray {
    color: var(--light-gray);
}

.bg-red {
    background-color: var(--red);
}

.green {
    color: var(--green);
}

.link {
    text-decoration: none;
}

.link:hover {
    text-decoration: none;
}

.hero-text .animated-fade-in-up,
.hero-cta.animated-fade-in-up,
.hero-image.animated-slide-in-right {
    opacity: 0;
    transform: translateY(20px);
}

.hero-image.animated-slide-in-right {
    transform: translateX(50px);
}

.animated-section .animated-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated-section.is-visible .animated-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.animated-section.is-visible .animated-fade-in-up.delay-1 {
    transition-delay: 0.1s;
}

.animated-section.is-visible .animated-fade-in-up.delay-2 {
    transition-delay: 0.2s;
}

.product-card:hover,
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.product-card,
.article-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.cta-button:hover,
.email-link:hover,
.add-to-cart-btn:hover,
.read-more-btn:hover,
.read-article-btn:hover,
#modal-add-to-cart-btn:hover,
#checkout-btn:hover {
    transform: scale(1.03);
    opacity: 0.9;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    transform: translateY(-20px);
    transition: transform 0.3s ease-out;
}

.modal.open .modal-content {
    transform: translateY(0);
}

.slider-container {
    max-width: 800px;
    margin: 0 auto;
}

.slider-track {
    transition: transform 0.5s ease-in-out;
}

.slider-slide {
    width: 100%;
    flex-shrink: 0;
}

.slider-nav {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease-out;
    top: 50%;
}

.slider-nav:hover {
    background-color: rgba(0,0,0,0.7);
}

#cart-count {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
}

#mobile-menu {
    transform: translateX(100%);
    transition: transform .3s ease-out;
}

#mobile-menu.open {
    transform: translateX(0);
}

/* Responsive Typography */

/* Desktop */
h1 {
    font-size: 2.5rem; /* ~40px */
}
h2 {
    font-size: 2.2rem; /* ~35px */
}
h3 {
    font-size: 1.8rem; /* ~29px */
}

@media screen and (min-width: 1024px) {
    h1 {
        font-size: 3.5rem; /* ~56px */
    }
    h2 {
        font-size: 2.8rem; /* ~45px */
    }
    h3 {
        font-size: 2.2rem; /* ~35px */
    }
    .f-headline-l {
        font-size: 4rem; /* ~64px */
    }
    .f3-l {
        font-size: 2rem; /* ~32px */
    }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.8rem; /* ~45px */
    }
    h2 {
        font-size: 2.5rem; /* ~40px */
    }
    h3 {
        font-size: 2rem; /* ~32px */
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    h1 {
        font-size: 1.8rem; /* ~29px */
    }
    h2 {
        font-size: 1.6rem; /* ~26px */
    }
    h3 {
        font-size: 1.4rem; /* ~22px */
    }
    .f3.purple.dib { /* Site title in header */
        font-size: 1.25rem; /* ~20px */
    }
    .f5.fw6.purple.mt0.mb2 { /* Product/Article titles */
        font-size: 1.15rem; /* ~18px */
    }
    .f4.b.purple.mb3 { /* Product prices */
        font-size: 1.1rem; /* ~17.6px */
    }
    .f6.lh-copy.dark-gray { /* Article snippets */
        font-size: 0.875rem; /* ~14px */
    }
    .hero-text .f4 {
        font-size: 1.1rem; /* ~17.6px */
    }
    .hero-cta {
        font-size: 0.9rem; /* ~14.4px */
        padding: 0.7rem 1.5rem;
    }
}

/* Ensure buttons don't clip text */
.br-pill {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    display: inline-block;
}

/* Ensure cart quantity select is styled correctly */
.cart-item-quantity {
    padding: 0.5rem;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    background-color: var(--white);
    color: var(--dark-gray);
}

/* Ensure the menu does not break */
.header nav > div:first-of-type {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.header nav > div:first-of-type > a {
    flex-shrink: 0;
}

@media screen and (max-width: 1300px) {
    .dn.db-l {
        display: none !important;
    }
    #menu-toggle {
        display: block !important;
    }
}

@media screen and (min-width: 1301px) {
    .dn.db-l {
        display: block !important;
    }
    #menu-toggle {
        display: none !important;
    }
}

/* Adjust modal content for smaller screens if needed */
@media screen and (max-width: 480px) {
    .modal-content {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    .modal-close {
        top: 0.5rem;
        right: 0.5rem;
    }
    #product-modal .flex-column-ns,
    #article-modal .flex-column-ns {
        flex-direction: column;
    }
    #product-modal .w-50-ns,
    #article-modal .w-50-ns {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    #product-modal .pr3-ns,
    #product-modal .pl3-ns {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Ensure cookie banner is visible by default then hidden by JS */
#cookie-banner {
    display: none;
}

/* Ensure cart item image height */
.cart-item-image {
    height: 80px;
    width: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.cart-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
/*
 * Base styles for the rightsCloudWrap container.
 * Provides top margin for separation and internal padding for content.
 */
.rightsCloudWrap {
    margin-top: 40px; /* Top margin for spacing from preceding content */
    padding: 20px 25px; /* Padding on all sides for content inside the wrapper */
    /* Consider adding max-width and margin: 0 auto; here if you want to center the content
       and limit its width on large screens, e.g., max-width: 960px; */
}

/*
 * Heading styles (h1-h5) within .rightsCloudWrap.
 * Font sizes are moderate, not overly large, with appropriate margins and line heights.
 */
.rightsCloudWrap h1 {
    /* Main heading font size */
    font-size: 2rem; /* Approx 32px based on a 16px base */
    /* Standard font weight for headings */
    font-weight: 700;
    /* Line height for better readability */
    line-height: 1.2;
    /* Top margin to separate from preceding content */
    margin-top: 1.5em;
    /* Bottom margin to separate from following content */
    margin-bottom: 0.8em;
}

.rightsCloudWrap h2 {
    font-size: 1.75rem; /* Approx 28px */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
}

.rightsCloudWrap h3 {
    font-size: 1.5rem; /* Approx 24px */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.3em;
    margin-bottom: 0.6em;
}

.rightsCloudWrap h4 {
    font-size: 1.25rem; /* Approx 20px */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.rightsCloudWrap h5 {
    font-size: 1.125rem; /* Approx 18px */
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
}

/*
 * Paragraph styles within .rightsCloudWrap.
 * Defines standard font size, line height, and bottom margin for separation.
 */
.rightsCloudWrap p {
    /* Standard paragraph font size */
    font-size: 1rem; /* Approx 16px */
    /* Line height for comfortable reading */
    line-height: 1.6;
    /* Bottom margin to separate paragraphs */
    margin-bottom: 1em;
}

/*
 * Unordered list styles within .rightsCloudWrap.
 * Sets bullet type, indentation, and vertical margins for the list container.
 */
.rightsCloudWrap ul {
    /* Standard disc bullet points */
    list-style-type: disc;
    /* Indent for bullet points */
    padding-left: 25px;
    /* Top margin to separate list from preceding content */
    margin-top: 1em;
    /* Bottom margin to separate list from following content */
    margin-bottom: 1em;
}

/*
 * List item styles within .rightsCloudWrap.
 * Defines font size, line height, and bottom margin for individual list items.
 */
.rightsCloudWrap li {
    /* Standard font size for list items */
    font-size: 1rem;
    /* Line height for multi-line list items */
    line-height: 1.5;
    /* Bottom margin to separate list items */
    margin-bottom: 0.5em;
}
#cookie-banner .flex {
    gap: 30px;
}
@media screen and (width < 480px) {
    #view-cart-from-added {
        margin-bottom: 15px;
    }
}
#mobile-menu.open {
    transform: translateX(0) !important;
}
#mobile-menu {
    transform: translateX(100%);
    transition: transform .3s ease-out;
}