html body nav#ww-side-nav#ww-side-nav > #ww-side-back,
        html body nav#ww-side-nav#ww-side-nav > #ww-side-instructions {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 7px !important;
            width: 138px !important;
            min-width: 138px !important;
            height: 36px !important;
            min-height: 36px !important;
            margin: 4px auto 6px !important;
            padding: 6px 10px !important;
            box-sizing: border-box !important;
            border: 1px solid rgba(243, 107, 33, .86) !important;
            border-radius: 9px !important;
            background: linear-gradient(145deg, rgba(24, 35, 42, .98), rgba(8, 64, 83, .96)) !important;
            color: #fff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 4px 12px rgba(0, 0, 0, .24) !important;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            font-synthesis: none !important;
            line-height: 1 !important;
            letter-spacing: .005em !important;
            text-align: left !important;
            text-decoration: none !important;
            text-shadow: none !important;
            white-space: nowrap !important;
            overflow: visible !important;
            filter: none !important;
            transform: none !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            cursor: pointer !important;
            transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease !important;
        }

        html body nav#ww-side-nav#ww-side-nav > #ww-side-back > #ww-side-back__icon,
        html body nav#ww-side-nav#ww-side-nav > #ww-side-instructions::before {
            display: inline-grid !important;
            place-items: center !important;
            flex: 0 0 20px !important;
            width: 20px !important;
            height: 20px !important;
            margin: 0 !important;
            border: 1px solid rgba(255, 255, 255, .36) !important;
            border-radius: 6px !important;
            background: #f36b21 !important;
            color: #151515 !important;
            box-shadow: none !important;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
            font-size: 14px !important;
            font-weight: 900 !important;
            line-height: 1 !important;
            text-shadow: none !important;
            filter: none !important;
            transform: none !important;
        }

        html body nav#ww-side-nav#ww-side-nav > #ww-side-instructions::before {
            content: "i" !important;
            font-size: 13px !important;
            font-style: normal !important;
        }

        html body nav#ww-side-nav#ww-side-nav > #ww-side-back:hover,
        html body nav#ww-side-nav#ww-side-nav > #ww-side-instructions:hover,
        html body nav#ww-side-nav#ww-side-nav > #ww-side-back:focus-visible,
        html body nav#ww-side-nav#ww-side-nav > #ww-side-instructions:focus-visible {
            border-color: #6ed8ff !important;
            background: linear-gradient(145deg, #123d50, #087ca0) !important;
            color: #fff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 2px rgba(110, 216, 255, .24), 0 5px 14px rgba(0, 0, 0, .26) !important;
            outline: none !important;
            transform: none !important;
        }

        html body nav#ww-side-nav#ww-side-nav > #ww-side-back:focus-visible,
        html body nav#ww-side-nav#ww-side-nav > #ww-side-instructions:focus-visible {
            outline: 3px solid rgba(110, 216, 255, .46) !important;
            outline-offset: 2px !important;
        }

:root {
            --ww-shell-ink: #173645;
            --ww-shell-muted: #526873;
            --ww-shell-orange: #ef6c23;
            --ww-shell-paper: #fffdf8;
            --ww-shell-page: #f3f0e9;
            --ww-shell-line: #dbe2e3;
            --ww-shell-shadow: 0 18px 52px rgba(17, 44, 57, .13);
        }

        html {
            background: var(--ww-shell-page) !important;
        }

        html body.custom-background.wp-theme-Experon_Pro,
        html body.wp-theme-Experon_Pro {
            padding-right: 0 !important;
            padding-left: 0 !important;
            background-color: var(--ww-shell-page) !important;
            background-image:
                radial-gradient(circle at 15% 5%, rgba(239, 108, 35, .075), transparent 28rem),
                linear-gradient(180deg, #f8f6f1 0%, var(--ww-shell-page) 100%) !important;
            background-attachment: fixed !important;
            color: var(--ww-shell-ink);
        }

        /* Retire the old fiery rails and give content room to breathe. */
        #ww-side-nav,
        #ww-canada-conditions {
            display: none !important;
        }

        html body.wp-theme-Experon_Pro #body-core#body-core.hfeed.site {
            box-sizing: border-box !important;
            width: calc(100% - 16px) !important;
            max-width: none !important;
            margin: 8px auto 24px !important;
            overflow: clip;
            border: 0;
            border-radius: 12px;
            background: var(--ww-shell-paper) !important;
            box-shadow: none;
        }

        html body.home.wp-theme-Experon_Pro #body-core#body-core#body-core.hfeed.site {
            width: calc(100% - 16px) !important;
            max-width: none !important;
            margin: 8px auto 24px !important;
        }

        /* Keep the established two-brand masthead consistent on every page. */
        html body.home #header #logo#logo {
            display: flex !important;
            height: auto !important;
            min-height: initial !important;
            justify-content: center !important;
        }

        /* Balance the unequal artwork widths around one optical centre. */
        @media (min-width: 901px) {
            html body.home #header-core #logo#logo > a[rel="home"] {
                flex: 0 1 600px !important;
                width: 600px !important;
                max-width: 58% !important;
            }

            html body.home #header-core #logo#logo > a[rel="home"] > .site-title {
                width: 100% !important;
                height: 146px !important;
                background-size: 100% auto !important;
                background-position: center !important;
            }

            html body.home #header-core #logo#logo > a.site-description-shop-link,
            html body.home #header-core #logo#logo > a.site-description-shop-link::before,
            html body.home #header-core #logo#logo > a.site-description-shop-link::after {
                flex: 0 1 327px !important;
                width: 327px !important;
                height: 146px !important;
                background-position: center !important;
                background-size: contain !important;
            }
        }

        html body.home #header#header,
        html body.home #header #header-core#header-core {
            height: auto !important;
            min-height: 0 !important;
        }

        html body.wp-theme-Experon_Pro #header-image#header-image {
            box-sizing: border-box !important;
            width: 100% !important;
            max-width: none !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        html::before,
        html::after {
            display: none !important;
            content: none !important;
        }

        html body #site-header,
        html body #header,
        html body #header-core,
        html body #header-links,
        html body #header-links-inner,
        html body #header-nav,
        html body #content,
        html body #main,
        html body .site-content {
            background-color: var(--ww-shell-paper) !important;
            background-image: none !important;
        }

        html body #site-header {
            border-radius: 20px 20px 0 0;
        }

        html body #header {
            border-bottom: 1px solid var(--ww-shell-line);
        }

        html body #header-links {
            border-top: 1px solid rgba(23, 54, 69, .08);
            border-bottom: 1px solid rgba(23, 54, 69, .10);
            box-shadow: none !important;
        }

        html body #header-links a {
            color: var(--ww-shell-ink) !important;
        }

        html body #header-links a:hover,
        html body #header-links a:focus-visible {
            color: #b74712 !important;
        }

        html body #content {
            box-sizing: border-box;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding-right: clamp(18px, 3vw, 42px) !important;
            padding-left: clamp(18px, 3vw, 42px) !important;
        }

        html body #main-core {
            box-sizing: border-box;
            width: 100% !important;
            max-width: none !important;
            margin-right: auto !important;
            margin-left: auto !important;
        }

        html body #primary,
        html body .content-area,
        html body main.site-main {
            box-sizing: border-box;
            width: 100% !important;
            max-width: none !important;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        html body #content > .panel-grid,
        html body #content article,
        html body #content .type-page,
        html body #content .type-product {
            max-width: 100%;
        }

        /* A consistent, calm card language without overriding custom feature sections. */
        html body.woocommerce ul.products li.product,
        html body .woocommerce-cart-form,
        html body .cart_totals,
        html body .woocommerce-checkout-review-order,
        html body .woocommerce-form-coupon,
        html body .woocommerce-form-login {
            border: 1px solid var(--ww-shell-line) !important;
            border-radius: 14px !important;
            background: #fff !important;
            box-shadow: 0 8px 24px rgba(17, 44, 57, .07) !important;
        }

        html body.woocommerce ul.products li.product {
            overflow: hidden;
            transition: transform .18s ease, box-shadow .18s ease;
        }

        @media (hover: hover) {
            html body.woocommerce ul.products li.product:hover {
                transform: translateY(-2px);
                box-shadow: 0 13px 30px rgba(17, 44, 57, .12) !important;
            }
        }

        html body .button,
        html body button,
        html body input[type="submit"] {
            border-radius: 999px;
        }

        html body :focus-visible {
            outline: 3px solid rgba(239, 108, 35, .45);
            outline-offset: 3px;
        }

        @media (max-width: 860px) {
            html body.wp-theme-Experon_Pro #body-core#body-core.hfeed.site {
                width: 100% !important;
                margin: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }

            html body.home.wp-theme-Experon_Pro #body-core#body-core#body-core.hfeed.site {
                width: 100% !important;
                margin: 0 !important;
            }

            html body #site-header {
                border-radius: 0;
            }

            html body #content {
                padding-right: 14px !important;
                padding-left: 14px !important;
            }
        }

        @media print {
            html body,
            html body.custom-background,
            html body.wp-theme-Experon_Pro #body-core#body-core.hfeed.site {
                background: #fff !important;
                box-shadow: none !important;
            }
        }