body {
    background-color: #f2f0ed !important;
    font-family: var(--font-family-primary) !important;
    font-weight: var(--font-weight-normal);
}

.usp-carousel {
    position: relative;
    height: 20px;
    min-width: 380px;
}
.usp-slide {
    white-space: nowrap;
}

.payment-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.payment-icons .payments-icon {
    display: block !important;
    flex-shrink: 0 !important;
}

.payment-icons .payments-icon.is-inline-block {
    display: block !important;
}

.payment-icons .placeholder-wrapper {
    display: block !important;
}

.payment-icons img {
    display: block !important;
    max-width: none !important;
}

.container-1800 {
    width: 1800px !important;
    max-width: 90% !important;
}

.angular-productlist {
    @media (min-width: 769px) {
        min-height: 400px !important;
    }
    @media (max-width: 768px) {
        min-height: 0 !important;
    }
}

/* Roboto Flex Variable Font */
@font-face {
    font-family: 'Roboto Flex';
    src: url('../fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: normal;
    font-display: swap;
    font-variation-settings: 
        'GRAD' 0,
        'XOPQ' 96,
        'XTRA' 468,
        'YOPQ' 79,
        'YTAS' 750,
        'YTDE' -203,
        'YTFI' 738,
        'YTLC' 514,
        'YTUC' 712,
        'opsz' 14,
        'slnt' 0,
        'wdth' 100,
        'wght' 400;
}

/* CSS Custom Properties for Font Usage */
:root {
    --font-family-primary: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Ensure block-level content within CKEditor descriptions is centered */
.ck-content p,
.ck-content ul,
.ck-content ol,
.ck-content table,
.ck-content img,
.ck-content figure {
  margin-left: auto;
  margin-right: auto;
}