:root {
        --armala-page: #fffaf2;
        --armala-surface: #ffffff;
        --armala-surface-soft: #f6efe5;
        --armala-ink: #082338;
        --armala-copy: #465e70;
        --armala-border: rgba(8, 35, 56, 0.14);
        --armala-copper: #c8783c;
        --armala-green: #164a3a;
        --armala-navy: #0a2a3e;
    }

    html.armala-night {
        --armala-page: #071b28;
        --armala-surface: #123447;
        --armala-surface-soft: #183f53;
        --armala-ink: #fffaf2;
        --armala-copy: #c8d7df;
        --armala-border: rgba(220, 235, 242, 0.20);
        --armala-copper: #e69a55;
        --armala-green: #1d5a47;
        --armala-navy: #082338;
    }

    html body {
        background: var(--armala-page) !important;
        color: var(--armala-copy) !important;
    }

    html body .site,
    html body main,
    html body .site-main,
    html body .content-area {
        background: transparent !important;
    }

    html body .armala-topbar,
    html body .armala-header,
    html body .armala-header-main {
        background: #123447 !important;
    }

    html body .armala-topbar {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    html body .armala-topbar > .armala-container,
    html body .armala-topbar .armala-topbar-inner,
    html body .armala-topbar .armala-container {
        background: #123447 !important;
        background-image: none !important;
        margin: 0 auto !important;
        max-width: none !important;
        padding: 11px clamp(22px, 4vw, 82px) !important;
        width: 100% !important;
    }

    html body .armala-topbar p,
    html body .armala-topbar a,
    html body .armala-topbar span {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    html body .armala-topbar,
    html body .armala-topbar a,
    html body .armala-topbar span,
    html body .armala-header-main .armala-nav > li > a,
    html body .armala-header-main .armala-nav > ul > li > a,
    html body .armala-header-main .armala-nav a {
        color: #fffaf2 !important;
        -webkit-text-fill-color: #fffaf2 !important;
    }

    html body .armala-header-main .custom-logo,
    html body .armala-header-main .armala-logo img,
    html body .armala-header-main .site-logo img {
        filter: brightness(0) invert(1) opacity(0.98) !important;
    }

    html body .armala-header-main .armala-nav-cta a,
    html body .armala-header-main a.armala-nav-cta,
    html body .armala-header-main .armala-quote-button {
        background: var(--armala-green) !important;
        border-color: var(--armala-green) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    html.armala-night body .armala-shop-hero,
    html.armala-night body .armala-product-card,
    html.armala-night body .armala-material-card,
    html.armala-night body .armala-category-card,
    html.armala-night body .armala-blog-card,
    html.armala-night body .armala-about-panel,
    html.armala-night body .armala-about-step,
    html.armala-night body .armala-pdpux-panel,
    html.armala-night body .armala-product-helper,
    html.armala-night body .armala-shop-helper,
    html.armala-night body .armala-source-product-details,
    html.armala-night body .woocommerce-tabs .panel,
    html.armala-night body .woocommerce-tabs ul.tabs li,
    html.armala-night body .armala-launch-contact-hero,
    html.armala-night body .armala-launch-contact-card,
    html.armala-night body .armala-launch-contact-help,
    html.armala-night body .armala-launch-contact-help article,
    html.armala-night body .armala-cqa-filter,
    html.armala-night body .ac2-type-card,
    html.armala-night body .ac2-prod-card {
        background: var(--armala-surface) !important;
        border-color: var(--armala-border) !important;
        color: var(--armala-copy) !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
    }

    html.armala-night body .armala-shop-hero h1,
    html.armala-night body .armala-shop-hero h2,
    html.armala-night body .armala-product-card h2,
    html.armala-night body .armala-product-card h3,
    html.armala-night body .armala-material-card h2,
    html.armala-night body .armala-material-card h3,
    html.armala-night body .armala-category-card h2,
    html.armala-night body .armala-category-card h3,
    html.armala-night body .armala-about-shell h1,
    html.armala-night body .armala-about-shell h2,
    html.armala-night body .armala-about-shell h3,
    html.armala-night body .armala-blog-card h2,
    html.armala-night body .armala-blog-card h3,
    html.armala-night body .armala-pdpux-panel h1,
    html.armala-night body .armala-pdpux-panel h2,
    html.armala-night body .armala-pdpux-panel h3,
    html.armala-night body .woocommerce-tabs h2,
    html.armala-night body .woocommerce-tabs h3,
    html.armala-night body .woocommerce-tabs strong,
    html.armala-night body .armala-launch-contact h1,
    html.armala-night body .armala-launch-contact h2,
    html.armala-night body .armala-launch-contact h3,
    html.armala-night body .armala-launch-contact strong {
        color: var(--armala-ink) !important;
        -webkit-text-fill-color: var(--armala-ink) !important;
    }

    html.armala-night body .armala-product-card p,
    html.armala-night body .armala-product-card li,
    html.armala-night body .armala-material-card p,
    html.armala-night body .armala-category-card p,
    html.armala-night body .armala-about-shell p,
    html.armala-night body .armala-about-shell li,
    html.armala-night body .armala-blog-card p,
    html.armala-night body .armala-pdpux-panel p,
    html.armala-night body .armala-pdpux-panel li,
    html.armala-night body .woocommerce-tabs p,
    html.armala-night body .woocommerce-tabs li,
    html.armala-night body .woocommerce-tabs td,
    html.armala-night body .woocommerce-tabs th,
    html.armala-night body .armala-launch-contact p,
    html.armala-night body .armala-launch-contact li,
    html.armala-night body .armala-launch-contact span {
        color: var(--armala-copy) !important;
        -webkit-text-fill-color: var(--armala-copy) !important;
    }

    html.armala-night body input,
    html.armala-night body select,
    html.armala-night body textarea,
    html.armala-night body .armala-cqa-filter input,
    html.armala-night body .armala-cqa-filter select {
        background: #fffaf2 !important;
        border-color: rgba(8, 35, 56, 0.18) !important;
        color: #082338 !important;
        -webkit-text-fill-color: #082338 !important;
    }

    html body .single-product form.variations_form.cart.armala-promoted-variations {
        background: var(--armala-surface-soft) !important;
        border: 1px solid var(--armala-border) !important;
        border-radius: 18px !important;
        margin: 16px 0 14px !important;
        padding: 14px !important;
    }

    html body .single-product form.variations_form.cart.armala-promoted-variations .variations th,
    html body .single-product form.variations_form.cart.armala-promoted-variations .variations td {
        padding-bottom: 0 !important;
    }

    html body .single-product form.variations_form.cart.armala-promoted-variations .variations label {
        color: var(--armala-ink) !important;
        -webkit-text-fill-color: var(--armala-ink) !important;
    }

    html body .armala-catalog-pagination button,
    html body .armala-catalog-pagination a,
    html body .armala-pagination button,
    html body .armala-pagination a {
        background: var(--armala-surface) !important;
        border: 1px solid var(--armala-border) !important;
        color: var(--armala-ink) !important;
        -webkit-text-fill-color: var(--armala-ink) !important;
        box-shadow: none !important;
    }

    html body .armala-catalog-pagination [aria-current="page"],
    html body .armala-pagination [aria-current="page"],
    html body .armala-catalog-pagination .is-current,
    html body .armala-pagination .current {
        background: var(--armala-copper) !important;
        border-color: var(--armala-copper) !important;
        color: #082338 !important;
        -webkit-text-fill-color: #082338 !important;
    }

    html body .armala-catalog-pagination button:hover:not(:disabled),
    html body .armala-catalog-pagination a:hover,
    html body .armala-pagination button:hover:not(:disabled),
    html body .armala-pagination a:hover {
        background: var(--armala-copper) !important;
        border-color: var(--armala-copper) !important;
        color: #082338 !important;
        -webkit-text-fill-color: #082338 !important;
    }

    html body .armala-catalog-pagination button:disabled,
    html body .armala-pagination button:disabled {
        background: color-mix(in srgb, var(--armala-surface) 72%, transparent) !important;
        color: var(--armala-copy) !important;
        -webkit-text-fill-color: var(--armala-copy) !important;
        opacity: 0.52 !important;
    }

    html body footer.armala-footer {
        padding: 22px 0 10px !important;
        padding-bottom: 10px !important;
    }

    html body footer.armala-footer > .armala-container {
        max-width: 1500px !important;
        padding-inline: clamp(22px, 4vw, 72px) !important;
        width: 100% !important;
    }

    html body footer.armala-footer .armala-footer-grid {
        align-items: start !important;
        display: grid !important;
        gap: clamp(22px, 3vw, 48px) !important;
        grid-template-columns: minmax(220px, 0.85fr) minmax(480px, 1.7fr) minmax(220px, 0.8fr) !important;
    }

    html body footer.armala-footer .armala-footer-brand img,
    html body footer.armala-footer img.custom-logo {
        margin-bottom: 8px !important;
        max-height: 38px !important;
        max-width: 132px !important;
    }

    html body footer.armala-footer .armala-footer-tagline {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 8px 0 0 !important;
        max-width: 320px !important;
    }

    html body footer.armala-footer h3 {
        margin: 0 0 8px !important;
    }

    html body footer.armala-footer .armala-footer-links,
    html body footer.armala-footer .armala-footer-links ul,
    html body footer.armala-footer .armala-footer-links .sub-menu,
    html body footer.armala-footer .armala-footer-links .children {
        align-items: center !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 7px 9px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body footer.armala-footer .armala-footer-links li {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    html body footer.armala-footer .armala-footer-links a,
    html body footer.armala-footer .armala-footer-stack a {
        font-size: 12px !important;
        line-height: 1.15 !important;
        min-height: 30px !important;
        padding: 6px 10px !important;
        width: auto !important;
    }

    html body footer.armala-footer .armala-footer-stack {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    html body footer.armala-footer .armala-footer-bottom {
        margin-top: 14px !important;
        padding: 10px 0 0 !important;
    }

    html body footer.armala-footer .armala-footer-bottom p,
    html body footer.armala-footer .armala-footer-legal a {
        font-size: 11px !important;
    }

    @media (max-width: 900px) {
        html body footer.armala-footer .armala-footer-grid {
            grid-template-columns: 1fr 1fr !important;
        }
        html body footer.armala-footer .armala-footer-grid > :nth-child(2) {
            grid-column: 1 / -1 !important;
            grid-row: 2 !important;
        }
    }

    @media (max-width: 620px) {
        html body .armala-topbar > .armala-container,
        html body .armala-topbar .armala-topbar-inner,
        html body .armala-topbar .armala-container {
            padding: 8px 14px !important;
        }
        html body footer.armala-footer {
            padding: 18px 0 8px !important;
        }
        html body footer.armala-footer .armala-footer-grid {
            gap: 16px !important;
            grid-template-columns: 1fr !important;
        }
        html body footer.armala-footer .armala-footer-grid > :nth-child(2) {
            grid-column: auto !important;
            grid-row: auto !important;
        }
        html body footer.armala-footer .armala-footer-tagline {
            max-width: none !important;
        }
    }