/* ==========================================================================
   Sitto brand layer — loaded only on pages whose title starts with "Sitto".
   One source of truth for colours, typography scale and section backgrounds.
   Scoped to #pxl-main so header/footer templates keep their own styling.
   ========================================================================== */

body.sitto-page {
    /* Brand colours (logo yellow + logo dark) */
    --sitto-yellow: #FFC20F;
    --sitto-yellow-dark: #E6AC00;
    --sitto-yellow-tint: #FFF4D4;
    --sitto-blue: #0085FF;
    --sitto-blue-dark: #0070D6;
    --sitto-blue-tint: #EAF3FF;

    /* Neutrals */
    --sitto-dark: #181D27;
    --sitto-text: #535862;
    --sitto-muted: #717680;
    --sitto-border: #E9EAEB;
    --sitto-white: #FFFFFF;
    --sitto-grey: #F5F6F8;
    --sitto-section-warm: var(--e-global-color-sittowarm, #F8F7F4); /* Elementor Site Settings > Global Colors > Sitto Warm Grey */

    /* Text on dark sections */
    --sitto-on-dark: #FFFFFF;
    --sitto-on-dark-text: rgba(255, 255, 255, 0.75);
    --sitto-on-dark-border: rgba(255, 255, 255, 0.2);

    /* Typography scale */
    --sitto-font: "Inter", sans-serif;
    --sitto-h1: 52px;
    --sitto-h2: 40px;
    --sitto-h3: 28px;
    --sitto-h4: 22px;
    --sitto-h5: 18px;
    --sitto-h6: 16px;
    --sitto-desc: 18px;
    --sitto-body: 16px;
    --sitto-sub: 14px;

    /* Theme variables used by BrightHub components */
    --primary-color: var(--sitto-dark);
    --secondary-color: var(--sitto-blue);
    --link-color-hover: var(--sitto-yellow);
    --link-color-active: var(--sitto-yellow);
}

@media (max-width: 1024px) {
    body.sitto-page {
        --sitto-h1: 48px;
        --sitto-h2: 34px;
        --sitto-h3: 26px;
    }
}

@media (max-width: 767px) {
    body.sitto-page {
        --sitto-h1: 36px;
        --sitto-h2: 28px;
        --sitto-h3: 22px;
        --sitto-h4: 20px;
        --sitto-desc: 17px;
    }
}

/* --------------------------------------------------------------------------
   Font family: Inter everywhere inside the page content
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main,
body.sitto-page #pxl-main h1,
body.sitto-page #pxl-main h2,
body.sitto-page #pxl-main h3,
body.sitto-page #pxl-main h4,
body.sitto-page #pxl-main h5,
body.sitto-page #pxl-main h6,
body.sitto-page #pxl-main p,
body.sitto-page #pxl-main li,
body.sitto-page #pxl-main a,
body.sitto-page #pxl-main span,
body.sitto-page #pxl-main button,
body.sitto-page #pxl-main input,
body.sitto-page #pxl-main textarea,
body.sitto-page #pxl-main select,
body.sitto-page #pxl-main .btn,
body.sitto-page #pxl-main div,
body.sitto-page #pxl-main label,
body.sitto-page #pxl-main strong,
body.sitto-page #pxl-main em,
body.sitto-page #pxl-main blockquote,
body.sitto-page #pxl-main cite,
body.sitto-page #pxl-main td,
body.sitto-page #pxl-main th,
body.sitto-page #pxl-main .pxl-heading__sub {
    font-family: var(--sitto-font) !important;
}

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
body.sitto-page :where(#pxl-main) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--sitto-dark);
}

body.sitto-page #pxl-main h1,
body.sitto-page #pxl-main h1.pxl-heading__title {
    font-size: var(--sitto-h1) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -1.5px !important;
}

body.sitto-page #pxl-main h2,
body.sitto-page #pxl-main h2.pxl-heading__title,
body.sitto-page #pxl-main h2.sitto-caps__title {
    font-size: var(--sitto-h2) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.8px !important;
}

body.sitto-page #pxl-main h3,
body.sitto-page #pxl-main h3.pxl-heading__title {
    font-size: var(--sitto-h3) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

body.sitto-page #pxl-main h4,
body.sitto-page #pxl-main h4.pxl-heading__title,
body.sitto-page #pxl-main h3.sitto-caps__card-title,
body.sitto-page #pxl-main h3.sitto-link-card__title,
body.sitto-page #pxl-main h3.sitto-cmp__title,
body.sitto-page #pxl-main h3.pxl-posts__item-title {
    font-size: var(--sitto-h4) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
}

body.sitto-page #pxl-main h5,
body.sitto-page #pxl-main h5.pxl-heading__title,
body.sitto-page #pxl-main h5.pxl-accordion__item-title {
    font-size: var(--sitto-h5) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
}

body.sitto-page #pxl-main h6 {
    font-size: var(--sitto-h6) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Highlighted words inside headings: yellow box, dark text */
body.sitto-page #pxl-main .pxl-heading .pxl-heading__highlight {
    background-color: var(--sitto-yellow) !important;
    color: var(--sitto-dark) !important;
}
body.sitto-page #pxl-main .pxl-heading .pxl-heading__highlight-text {
    color: var(--sitto-dark) !important;
}
/* Text highlight variant: same yellow box as the others (yellow text on white fails contrast) */
body.sitto-page #pxl-main .sitto-hl-text .pxl-heading .pxl-heading__highlight {
    background-color: var(--sitto-yellow) !important;
    color: var(--sitto-dark) !important;
    padding: 2px 10px !important;
    border-radius: 6px !important;
}
body.sitto-page #pxl-main .sitto-hl-text .pxl-heading .pxl-heading__highlight-text {
    color: var(--sitto-dark) !important;
}

/* --------------------------------------------------------------------------
   Sub title / eyebrow pill above headings
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-border,
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-box {
    font-size: var(--sitto-sub) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: var(--sitto-dark) !important;
    background-color: var(--sitto-white) !important;
    border: 1px solid var(--sitto-border) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.04),
                0 3px 3px -1.5px rgba(0, 0, 0, 0.04),
                0 24px 24px -12px rgba(0, 0, 0, 0.04);
}
body.sitto-page #pxl-main .pxl-heading__sub svg path,
body.sitto-page #pxl-main .pxl-heading__sub svg {
    fill: var(--sitto-yellow);
    color: var(--sitto-yellow);
}
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-slogan {
    font-size: var(--sitto-body) !important;
    font-weight: 500 !important;
    color: var(--sitto-text) !important;
}

/* Hero badge ("● Sitto · …") */
body.sitto-page #pxl-main .sitto-hero-badge .pxl-heading__title {
    font-size: var(--sitto-sub) !important;
    font-weight: 500 !important;
    color: var(--sitto-dark) !important;
}
body.sitto-page #pxl-main .sitto-badge-dot {
    color: var(--sitto-yellow) !important;
}

/* --------------------------------------------------------------------------
   Body copy and section descriptions
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main {
    font-size: var(--sitto-body);
    line-height: 1.65;
    color: var(--sitto-text);
}

/* The text block that directly follows a section heading is its description */
body.sitto-page #pxl-main .elementor-widget-pxl_heading + .elementor-widget-pxl_text_editor p,
body.sitto-page #pxl-main .elementor-widget-pxl_heading + .elementor-widget-pxl_text_editor .pxl-text-editor,
body.sitto-page #pxl-main .sitto-hero-description,
body.sitto-page #pxl-main p.lead,
body.sitto-page #pxl-main .sitto-section-desc p {
    font-size: var(--sitto-desc) !important;
    line-height: 1.6 !important;
}

/* Small print */
body.sitto-page #pxl-main p small,
body.sitto-page #pxl-main .sitto-note,
body.sitto-page #pxl-main .sitto-payment-card__eyebrow {
    color: var(--sitto-muted);
}

/* --------------------------------------------------------------------------
   Section backgrounds: white (default), light grey, dark
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main .sitto-section--grey {
    background-color: var(--sitto-section-warm, #F8F7F4) !important;
    background-image: none !important;
    /* Grey component surfaces inside a grey section turn white so they stay visible */
    --sitto-grey: #FFFFFF;
}

/* Cool-grey panels inside a warm grey section: switch to white so they don't blur into the backdrop */
body.sitto-page #pxl-main .sitto-section--grey :is(.pxl-sticky-inner-container:not(:has(h2)), .elementor-element-29bf3b4, .elementor-element-cdd7fb8, .sitto-caps--panel .sitto-caps__grid, .sitto-cmp__box-inner) {
    background-color: #FFFFFF !important;
}
/* Sticky title/description blocks sit on the section backdrop itself */
body.sitto-page #pxl-main .sitto-section--grey .pxl-sticky-inner-container:has(h2) {
    background-color: transparent !important;
}

body.sitto-page #pxl-main .sitto-section--dark {
    background-color: var(--sitto-dark) !important;
    background-image: none !important;
}
body.sitto-page #pxl-main .sitto-section--dark h1,
body.sitto-page #pxl-main .sitto-section--dark h2,
body.sitto-page #pxl-main .sitto-section--dark h3,
body.sitto-page #pxl-main .sitto-section--dark h4,
body.sitto-page #pxl-main .sitto-section--dark h5,
body.sitto-page #pxl-main .sitto-section--dark h6 {
    color: var(--sitto-on-dark) !important;
}
body.sitto-page #pxl-main .sitto-section--dark p,
body.sitto-page #pxl-main .sitto-section--dark li,
body.sitto-page #pxl-main .sitto-section--dark .pxl-text-editor,
body.sitto-page #pxl-main .sitto-section--dark .elementor-widget-pxl_heading + .elementor-widget-pxl_text_editor p {
    color: var(--sitto-on-dark-text) !important;
}
body.sitto-page #pxl-main .sitto-section--dark .pxl-heading__sub.pxl-heading__sub-border,
body.sitto-page #pxl-main .sitto-section--dark .pxl-heading__sub.pxl-heading__sub-box {
    color: var(--sitto-on-dark) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--sitto-on-dark-border) !important;
    box-shadow: none;
}
/* Cards nested inside a dark section keep their own (light) colours */
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] h1,
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] h2,
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] h3,
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] h4,
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] h5,
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] .pxl-heading__title {
    color: var(--sitto-dark) !important;
}
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] p {
    color: var(--sitto-text) !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main .pxl-button .btn,
body.sitto-page #pxl-main .btn,
body.sitto-page #pxl-main .elementor-button {
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* --------------------------------------------------------------------------
   Accents that must read as brand yellow
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main .sitto-check-icon {
    color: var(--sitto-dark);
}
body.sitto-page #pxl-main .pxl-accordion__item.active,
body.sitto-page #pxl-main .pxl-accordion__item.active .pxl-accordion__item-title {
    border-color: var(--sitto-yellow);
}

/* ==========================================================================
   Theme widget defaults -> brand tokens
   Page data is normalised to the brand palette, so these use the #pxl-main id
   level to beat BrightHub's own (more specific) default selectors.
   ========================================================================== */
body.sitto-page #pxl-main .pxl-pricing__fea-item,
body.sitto-page #pxl-main .pxl-pricing__option-text,
body.sitto-page #pxl-main .pxl-pricing__popular,
body.sitto-page #pxl-main .pxl-marquee__item-content,
body.sitto-page #pxl-main .pxl-marquee__item-author-name,
body.sitto-page #pxl-main .textbox-item__title,
body.sitto-page #pxl-main .pxl-step__feature-title,
body.sitto-page #pxl-main .pxl-list-feature__item-title,
body.sitto-page #pxl-main .pxl-icon-box__item-title,
body.sitto-page #pxl-main .pxl-icon-box__item-title .sm-roll__a,
body.sitto-page #pxl-main .pxl-icon-box__item-title .sm-roll__b,
body.sitto-page #pxl-main .pxl-icon-box-carousel .sm-roll__a,
body.sitto-page #pxl-main .pxl-icon-box-carousel .sm-roll__b,
body.sitto-page #pxl-main .pxl-select-change-counter__select .current {
    color: var(--sitto-dark);
}
body.sitto-page #pxl-main .pxl-pricing__desc,
body.sitto-page #pxl-main .pxl-pricing__price-period,
body.sitto-page #pxl-main .pxl-marquee__item-author-pos,
body.sitto-page #pxl-main .textbox-item__desc,
body.sitto-page #pxl-main .pxl-step__feature-desc,
body.sitto-page #pxl-main .pxl-step__content-desc,
body.sitto-page #pxl-main .pxl-list-feature__item-description,
body.sitto-page #pxl-main .pxl-icon-box__item-desc,
body.sitto-page #pxl-main .pxl-select-higthlight {
    color: var(--sitto-text);
}
body.sitto-page #pxl-main .pxl-pricing,
body.sitto-page #pxl-main .pxl-pricing__button,
body.sitto-page #pxl-main .pxl-pricing__popular,
body.sitto-page #pxl-main .pxl-marquee__item-author-star,
body.sitto-page #pxl-main .textbox-item__inner,
body.sitto-page #pxl-main .pxl-step__feature-item,
body.sitto-page #pxl-main .pxl-list-feature__item-icon,
body.sitto-page #pxl-main .pxl-tabs__list,
body.sitto-page #pxl-main .pxl-select-change-counter__select {
    border-color: var(--sitto-border);
}
/* Flat surfaces instead of template gradients */
body.sitto-page #pxl-main .pxl-pricing__top {
    background: var(--sitto-grey);
}
body.sitto-page #pxl-main .pxl-marquee__item {
    background-image: none;
}
body.sitto-page #pxl-main .pxl-list-feature__item-dot,
body.sitto-page #pxl-main .pxl-cf7,
body.sitto-page #pxl-main .pxl-posts__item {
    background-color: var(--sitto-grey);
}
body.sitto-page #pxl-main .pxl-step__number,
body.sitto-page #pxl-main .toggleTab,
body.sitto-page #pxl-main .pxl-swiper__nav {
    background-color: var(--sitto-dark);
}
body.sitto-page #pxl-main .pxl-swiper-dots__progressbar,
body.sitto-page #pxl-main .swiper-pagination-bullet {
    background-color: var(--sitto-border);
}
body.sitto-page #pxl-main .swiper-pagination-bullet-active,
body.sitto-page #pxl-main .pxl-swiper-pagination-progressbar-fill {
    background-color: var(--sitto-yellow);
}
/* Inactive tabs need readable text */
body.sitto-page #pxl-main .pxl-tabs__list-item:not(.active) {
    color: var(--sitto-muted);
}
body.sitto-page #pxl-main .iti__arrow {
    border-top-color: var(--sitto-text);
}

/* Inline SVG fills from the template palette */
body.sitto-page #pxl-main :is([fill="#3659F3" i], [fill="#2F80ED" i], [fill="#007AFF" i]) { fill: var(--sitto-blue-dark); }
body.sitto-page #pxl-main :is([fill="#4BD3E5" i], [fill="#45DFF4" i]) { fill: var(--sitto-blue); }
body.sitto-page #pxl-main :is([stroke="#3659F3" i], [stroke="#4BD3E5" i], [stroke="#45DFF4" i]) { stroke: var(--sitto-blue); }
body.sitto-page #pxl-main :is([fill="#FB6514" i], [fill="#FFA31A" i], [fill="#FF9500" i]) { fill: var(--sitto-dark); }
body.sitto-page #pxl-main :is([stroke="#FB6514" i], [stroke="#FFA31A" i]) { stroke: var(--sitto-dark); }
body.sitto-page #pxl-main :is([fill="#FFBA08" i], [fill="#F5C519" i], [fill="#FBE414" i]) { fill: var(--sitto-yellow); }
body.sitto-page #pxl-main :is([fill="#000" i], [fill="#000000" i], [fill="black" i], [fill="rgb(0,0,0)"], [fill="rgb(0, 0, 0)"]) { fill: var(--sitto-dark); }
body.sitto-page #pxl-main :is([stroke="#000" i], [stroke="#000000" i], [stroke="black" i]) { stroke: var(--sitto-dark); }
body.sitto-page #pxl-main .pxl-list-feature__item-icon svg,
body.sitto-page #pxl-main .pxl-list svg circle[fill]:not([fill="none"]) {
    color: var(--sitto-dark);
}

/* ==========================================================================
   Buttons on a yellow background always carry dark text.
   Elementor's pxl_button colour control does not output CSS, so the yellow
   buttons are marked with the class sitto-btn--on-yellow.
   ========================================================================== */
body.sitto-page #pxl-main .sitto-btn--on-yellow .btn,
body.sitto-page #pxl-main .sitto-btn--on-yellow .btn .btn-text,
body.sitto-page #pxl-main .sitto-btn--on-yellow .btn .sm-roll__a,
body.sitto-page #pxl-main .sitto-btn--on-yellow .btn .sm-roll__b,
body.sitto-page #pxl-main .sitto-btn--on-yellow .btn svg {
    color: var(--sitto-dark) !important;
}

/* Default (unset) icon colours in monochrome SVGs */
body.sitto-page #pxl-main .sitto-form-builder svg:not([fill]),
body.sitto-page #pxl-main .pxl-list svg:not([fill]) {
    fill: var(--sitto-dark);
}

/* Carousel icon fallback colour (theme default is pink); per-item colours still win */
body.sitto-page :where(#pxl-main) .pxl-icon-box-carousel--layout-1 .pxl-icon-box__item-icon {
    background-color: var(--sitto-yellow);
}

/* Restaurant tab templates: icon chip + card borders */
body.sitto-page #pxl-main .sitto-tab-icon {
    background-color: var(--sitto-yellow-tint);
}
body.sitto-page #pxl-main .pxl-tabs .e-con {
    border-color: var(--sitto-border);
}

/* SVG icons with no fill attribute render the browser default black */
body.sitto-page #pxl-main :is(.sitto-cmp, .pxl-list, .sitto-form-builder) svg:not([fill]) path:not([fill]),
body.sitto-page #pxl-main :is(.sitto-cmp, .pxl-list, .sitto-form-builder) svg:not([fill]) :is(circle, rect, polygon):not([fill]) {
    fill: var(--sitto-dark);
}

/* Testimonial cards: brand grey surface (theme default is #F5F5F5) */
body.sitto-page #pxl-main .pxl-marquee__item {
    background-color: var(--sitto-grey);
}

/* Dark sections: theme widget text switches to light (keeps contrast with the dark background) */
body.sitto-page #pxl-main .sitto-section--dark :is(
    .pxl-icon-box__item-title, .pxl-icon-box__item-title .sm-roll__a, .pxl-icon-box__item-title .sm-roll__b,
    .pxl-icon-box-carousel .sm-roll__a, .pxl-icon-box-carousel .sm-roll__b,
    .textbox-item__title, .pxl-step__feature-title, .pxl-list-feature__item-title,
    .pxl-marquee__item-author-name, .pxl-pricing__option-text, .pxl-heading__title) {
    color: var(--sitto-on-dark) !important;
}
body.sitto-page #pxl-main .sitto-section--dark :is(
    .pxl-icon-box__item-desc, .textbox-item__desc, .pxl-step__feature-desc, .pxl-step__content-desc,
    .pxl-list-feature__item-description, .pxl-marquee__item-author-pos, .pxl-pricing__desc) {
    color: var(--sitto-on-dark-text) !important;
}
body.sitto-page #pxl-main .sitto-section--dark :is(.textbox-item__inner, .pxl-step__feature-item, .pxl-list-feature__item-icon) {
    border-color: var(--sitto-on-dark-border);
}
/* ...unless the item sits on its own light card */
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] :is(.pxl-icon-box__item-title, .textbox-item__title, .pxl-heading__title) {
    color: var(--sitto-dark) !important;
}
body.sitto-page #pxl-main .sitto-section--dark .e-con[class*="sitto-card--light"] :is(.pxl-icon-box__item-desc, .textbox-item__desc) {
    color: var(--sitto-text) !important;
}

/* Active tab pill: brand dark instead of pure black (text stays white) */
body.sitto-page #pxl-main .pxl-tabs__list-item.active {
    background-color: var(--sitto-dark);
}

/* ==========================================================================
   Visual size independent of the HTML tag
   pxl_heading → Style → "Sitto - Visual size" adds .sitto-size-hN to the widget.
   ========================================================================== */
body.sitto-page #pxl-main .sitto-size-h1 .pxl-heading__title { font-size: var(--sitto-h1) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -1.5px !important; }
body.sitto-page #pxl-main .sitto-size-h2 .pxl-heading__title { font-size: var(--sitto-h2) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.8px !important; }
body.sitto-page #pxl-main .sitto-size-h3 .pxl-heading__title { font-size: var(--sitto-h3) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.4px !important; }
body.sitto-page #pxl-main .sitto-size-h4 .pxl-heading__title { font-size: var(--sitto-h4) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.2px !important; }
body.sitto-page #pxl-main .sitto-size-h5 .pxl-heading__title { font-size: var(--sitto-h5) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
body.sitto-page #pxl-main .sitto-size-h6 .pxl-heading__title { font-size: var(--sitto-h6) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; }

/* Item titles inside theme widgets keep a component size, whatever tag they use */
body.sitto-page #pxl-main .pxl-accordion .pxl-accordion__item-title,
body.sitto-page #pxl-main .textbox-item__title {
    font-size: var(--sitto-h5) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
}
body.sitto-page #pxl-main .pxl-pricing__title,
body.sitto-page #pxl-main .pxl-step__content-title,
body.sitto-page #pxl-main .pxl-list-feature__item-title,
body.sitto-page #pxl-main .pxl-icon-box-carousel .pxl-icon-box__item-title {
    font-size: var(--sitto-h4) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
}

/* ==========================================================================
   One chip style for every section heading (pxl_heading sub-title) on every page:
   white pill, hairline border, 14px label, yellow dot like the hero badge.
   ========================================================================== */
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-border,
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-box {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 16px !important;
    min-height: 36px;
    box-sizing: border-box;
}
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-border::before,
body.sitto-page #pxl-main .pxl-heading__sub.pxl-heading__sub-box::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sitto-yellow);
}
body.sitto-page #pxl-main .pxl-heading__sub :is(svg, img, i) { display: none !important; }

/* Hero badge: same pill metrics as the section chips */
body.sitto-page #pxl-main .sitto-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--sitto-yellow);
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    vertical-align: middle;
}

/* CTA banner title is an H3 inside a section */
body.sitto-page #pxl-main .sitto-cta .sitto-cta__title {
    font-size: var(--sitto-h3) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Precise line breaks: balanced heading lines, no single short word left on its own line */
body.sitto-page #pxl-main :is(h1, h2, h3, .pxl-heading__title, .sitto-caps__title, .sitto-cta__title) {
    text-wrap: balance;
}
body.sitto-page #pxl-main :is(p, li) {
    text-wrap: pretty;
}

/* Hero badge pill: identical metrics to the section chips */
body.sitto-page #pxl-main .e-con.sitto-hero-badge {
    --padding-top: 7px; --padding-bottom: 7px; --padding-left: 16px; --padding-right: 16px;
    padding: 7px 16px !important;
    min-height: 36px;
    border-radius: 999px !important;
    border: 1px solid var(--sitto-border) !important;
    background-color: var(--sitto-white) !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.04), 0 3px 3px -1.5px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04);
}
body.sitto-page #pxl-main .e-con.sitto-hero-badge .pxl-heading__title {
    font-size: var(--sitto-sub) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}
body.sitto-page #pxl-main .e-con.sitto-hero-badge > .elementor-widget,
body.sitto-page #pxl-main .e-con.sitto-hero-badge .pxl-heading,
body.sitto-page #pxl-main .e-con.sitto-hero-badge .pxl-heading__inner {
    font-size: var(--sitto-sub);
    line-height: 1.4;
}

/* Capability cards, plain style: open grid like a feature list */
body.sitto-page #pxl-main .sitto-caps--plain .sitto-caps__grid { --sitto-caps-gap: 48px; row-gap: 64px; column-gap: 48px; }
body.sitto-page #pxl-main .sitto-caps--plain .sitto-caps__card-desc { font-size: 17px; line-height: 1.6; }
@media (max-width: 767px) {
    body.sitto-page #pxl-main .sitto-caps--plain .sitto-caps__grid { row-gap: 40px; }
    body.sitto-page #pxl-main .sitto-caps--plain .sitto-caps__card-desc { font-size: 16px; }
}

/* ==========================================================================
   Pricing cards (Restaurant pricing section)
   ========================================================================== */
body.sitto-page #pxl-main .sitto-price-cards > .e-con { flex: 1 1 0; min-width: 0; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__sub p { color: var(--sitto-text) !important; font-size: 15px; margin: 0 0 20px; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__price .pxl-heading__title { font-size: 40px !important; font-weight: 700 !important; letter-spacing: -1px !important; line-height: 1.15 !important; color: var(--sitto-dark) !important; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__period { font-size: 18px; font-weight: 500; color: var(--sitto-muted); letter-spacing: 0; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__note p { color: var(--sitto-text) !important; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__note strong { color: var(--sitto-dark); font-weight: 600; }
body.sitto-page #pxl-main .sitto-price-card .sitto-check-list { margin-bottom: 28px; }
body.sitto-page #pxl-main .sitto-price-card > .elementor-widget-pxl_button { margin-top: auto; }
body.sitto-page #pxl-main .sitto-btn-block .pxl-button,
body.sitto-page #pxl-main .sitto-btn-block .btn { width: 100%; justify-content: center; }
body.sitto-page #pxl-main .sitto-price-card .elementor-widget-pxl_button:not(.sitto-btn--on-yellow) .btn[style*="0070D6"],
body.sitto-page #pxl-main .sitto-price-card .elementor-widget-pxl_button:first-of-type .btn { color: #fff; }
@media (max-width: 767px) {
    body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__price .pxl-heading__title { font-size: 32px !important; }
}

/* Check lists: compact icon + text */
body.sitto-page #pxl-main .sitto-check-list .sitto-list__icon { background: transparent; width: 20px; height: 20px; }
body.sitto-page #pxl-main .sitto-check-list .sitto-list__item-title { font-size: 15px; font-weight: 400; color: var(--sitto-dark); }

/* "What's Included?" accordion: one light card, no number */
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item { border-radius: 24px; overflow: hidden; border: 0; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-number { display: none; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-title { padding: 24px 32px; margin: 0; color: var(--sitto-dark) !important; border-bottom: 1px solid var(--sitto-border); }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action svg path { fill: var(--sitto-dark); }
body.sitto-page #pxl-main .sitto-included-grid > .e-con { flex: 1 1 0; min-width: 0; }

/* Light cards / widgets inside a dark section keep dark text (any element with sitto-card--light) */
body.sitto-page #pxl-main .sitto-section--dark [class*="sitto-card--light"] :is(h1, h2, h3, h4, h5, h6, .pxl-heading__title, .pxl-accordion__item-title, .pxl-accordion__item-text, .sitto-list__item-title, li, strong) {
    color: var(--sitto-dark) !important;
}
body.sitto-page #pxl-main .sitto-section--dark [class*="sitto-card--light"] :is(p, .pxl-text-editor) {
    color: var(--sitto-text) !important;
}
body.sitto-page #pxl-main .sitto-section--dark [class*="sitto-card--light"] .sitto-price-card__period { color: var(--sitto-muted) !important; }

/* Blue button: white label */
body.sitto-page #pxl-main .sitto-btn--blue .btn,
body.sitto-page #pxl-main .sitto-btn--blue .btn :is(.btn-text, .sm-roll__a, .sm-roll__b, svg) { color: #fff !important; }
/* layout-4 hides the title of the open item: keep it visible for the What's Included accordion */
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-title { display: flex !important; align-items: center; justify-content: space-between; cursor: pointer; font-size: var(--sitto-h4) !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item { width: 100%; flex: 1 1 100%; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-title { padding: 20px 32px !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action svg { display: none; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action::after {
    content: ""; display: block; width: 9px; height: 9px; margin: 4px 4px 0;
    border-left: 2px solid var(--sitto-dark); border-top: 2px solid var(--sitto-dark);
    transform: rotate(45deg); transition: transform .25s ease;
}
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item.is-collapsed .pxl-accordion__item-action::after { transform: rotate(225deg); margin-top: -4px; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item.is-collapsed .pxl-accordion__item-content { display: none !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item.is-collapsed .pxl-accordion__item-title { border-bottom-color: transparent; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-title { position: relative; gap: 16px; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-text { flex: 1 1 auto; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action {
    position: static !important; inset: auto !important; transform: none !important;
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-left: auto; background: none !important; border: 0 !important;
}
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item.active .pxl-accordion__item-title,
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-title { border-bottom: 1px solid var(--sitto-border) !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item.is-collapsed .pxl-accordion__item-title { border-bottom-color: transparent !important; }

/* What's Included accordion: dark style on the dark section */
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item-title,
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item.active .pxl-accordion__item-title {
    color: var(--sitto-on-dark) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item.is-collapsed .pxl-accordion__item-title { border-bottom-color: transparent !important; }
body.sitto-page #pxl-main .sitto-included-acc--dark :is(h1, h2, h3, h4, .pxl-heading__title, .pxl-accordion__item-text) { color: var(--sitto-on-dark) !important; }
body.sitto-page #pxl-main .sitto-included-acc--dark .sitto-list__item-title { color: var(--sitto-on-dark-text) !important; }
body.sitto-page #pxl-main .sitto-included-acc--dark .sitto-list__icon,
body.sitto-page #pxl-main .sitto-included-acc--dark .sitto-list__icon i { color: var(--sitto-yellow) !important; }
/* chevron: replace the theme's absolute plus bars */
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action { position: relative !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action::before { display: none !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action::after {
    position: static !important; left: auto !important; top: auto !important;
    background: transparent !important; width: 9px !important; height: 9px !important;
}
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item-action::after { border-color: var(--sitto-on-dark) !important; }

/* Pricing cards: tidier rhythm */
body.sitto-page #pxl-main .e-con.sitto-price-card { --padding-top: 40px; --padding-right: 40px; --padding-bottom: 40px; --padding-left: 40px; padding: 40px !important; border: 1px solid var(--sitto-border); background-color: var(--sitto-white) !important; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__sub { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--sitto-border); }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__sub p { margin: 0; }
body.sitto-page #pxl-main .sitto-price-card .sitto-price-card__note p { margin: 0 0 28px; }
body.sitto-page #pxl-main .sitto-price-card .sitto-check-list { margin: -8px 0 28px; }
body.sitto-page #pxl-main .sitto-price-card .elementor-widget-pxl_button .btn { min-height: 52px; font-weight: 600; }
body.sitto-page #pxl-main .sitto-price-card .elementor-widget-pxl_button:not(.sitto-btn--on-yellow) .btn { background: transparent !important; border: 1px solid var(--sitto-dark) !important; color: var(--sitto-dark) !important; }
@media (max-width: 767px) { body.sitto-page #pxl-main .e-con.sitto-price-card { padding: 24px !important; } }

/* What's Included: no box, just a divider under the title */
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
}
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item-title { padding: 24px 0 !important; }
body.sitto-page #pxl-main .sitto-included-acc--dark .sitto-included-grid { --padding-left: 0px; --padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action::after { opacity: 1 !important; visibility: visible !important; }

/* What's Included: no borders, clear toggle icon on the right */
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item { border: 0 !important; }
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item-title,
body.sitto-page #pxl-main .sitto-included-acc--dark .pxl-accordion__item.active .pxl-accordion__item-title { border: 0 !important; padding: 24px 0 8px !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-action::after {
    width: 8px !important; height: 8px !important; margin: 3px 0 0 0 !important;
}
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item.is-collapsed .pxl-accordion__item-action::after { margin: -3px 0 0 0 !important; }
body.sitto-page #pxl-main .sitto-included-acc .pxl-accordion__item-title:hover .pxl-accordion__item-action { background: rgba(255, 255, 255, 0.12) !important; }

/* ==========================================================================
   Dark surfaces: #0B0D12 with a soft, elegant gradient
   (sections with sitto-section--dark and the navbar)
   ========================================================================== */
body.sitto-page {
    --sitto-surface-dark: #0B0D12;
    --sitto-surface-dark-gradient:
        radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(60% 50% at 85% 0%, rgba(255, 194, 15, 0.06) 0%, rgba(255, 194, 15, 0) 60%),
        linear-gradient(180deg, #12151D 0%, #0B0D12 55%, #08090D 100%);
}
body.sitto-page #pxl-main .sitto-section--dark,
body.sitto-page #pxl-main .e-con.sitto-section--dark {
    background-color: var(--sitto-surface-dark) !important;
    background-image: var(--sitto-surface-dark-gradient) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}
/* Navbar (normal and sticky) */
body.sitto-page #pxl-header-elementor .elementor-element-2cccb73.e-con,
body.sitto-page .pxl-header-elementor-sticky .elementor-element-2cccb73.e-con {
    background-color: var(--sitto-surface-dark) !important;
    background-image:
        radial-gradient(80% 140% at 50% -40%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, #161A23 0%, #0B0D12 60%, #090A0E 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px -12px rgba(11, 13, 18, 0.45);
}

/* List feature timeline: yellow dots (theme default is orange), blue line icons on white */
body.sitto-page #pxl-main .pxl-list-feature__item-dot::after { background-color: var(--sitto-yellow) !important; }
body.sitto-page #pxl-main .pxl-list-feature__item-dot { background-color: var(--sitto-yellow-tint) !important; }
body.sitto-page #pxl-main .pxl-list-feature__item-icon { background: var(--sitto-white) !important; }
body.sitto-page #pxl-main .pxl-list-feature__item-icon i { font-size: 22px; }
body.sitto-page #pxl-main .pxl-list-feature__item-title { margin-bottom: 6px !important; }
body.sitto-page #pxl-main .pxl-list-feature__item-description { margin-top: 0 !important; }

/* Images in sections marked sitto-img-16x9: 16:9, cropped to fill */
body.sitto-page #pxl-main .sitto-img-16x9 .elementor-widget-pxl_image,
body.sitto-page #pxl-main .sitto-img-16x9 .pxl-image-single,
body.sitto-page #pxl-main .sitto-img-16x9 .pxl-image-single .pxl-item--image { width: 100%; }
body.sitto-page #pxl-main .sitto-img-16x9 .elementor-widget-pxl_image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Contact block labels: line icon before the label */
body.sitto-page #pxl-main .pxl-heading__title .pxl-heading__text:has(> .sitto-contact-icon) { position: relative; display: block; padding-left: 28px; }
body.sitto-page #pxl-main .pxl-heading__title .sitto-contact-icon { position: absolute; left: 0; top: 0.2em; display: block; margin: 0; color: var(--sitto-dark); }

/* --------------------------------------------------------------------------
   Feature icons: no background chip, larger line icon (Verity-style, ~48px).
   Buttons (video play, slider/carousel arrows), rating stars and small list
   check bullets keep their own styling.
   -------------------------------------------------------------------------- */
body.sitto-page {
    --sitto-icon-size: 44px;
}
@media (max-width: 767px) {
    body.sitto-page { --sitto-icon-size: 36px; }
}
body.sitto-page #pxl-main :is(.sitto-caps__icon, .pxl-icon-box__item-icon, .pxl-list-feature__item-icon, .sitto-list--stacked .sitto-list__icon, .sitto-link-card__icon) {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    transform: none;
    transform-origin: 50% 60%;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
    color: var(--sitto-dark);
    line-height: 1;
    flex-shrink: 0;
}
body.sitto-page #pxl-main :is(.sitto-caps__icon, .pxl-icon-box__item-icon, .pxl-list-feature__item-icon, .sitto-list--stacked .sitto-list__icon, .sitto-link-card__icon) :is(svg, .e-font-icon-svg, img) {
    width: var(--sitto-icon-size);
    height: var(--sitto-icon-size);
    flex-shrink: 0;
    max-width: none;
}
body.sitto-page #pxl-main :is(.sitto-caps__icon, .pxl-icon-box__item-icon, .pxl-list-feature__item-icon, .sitto-list--stacked .sitto-list__icon, .sitto-link-card__icon) i {
    font-size: var(--sitto-icon-size);
    color: inherit;
}
/* Thin the line icons back down after scaling up */
body.sitto-page #pxl-main .sitto-caps__icon svg [stroke] {
    stroke-width: 1.2;
}
/* Icon box carousel ships white-filled glyphs meant for a coloured chip */
body.sitto-page #pxl-main .pxl-icon-box__item-icon svg :is([fill="white"], [fill="#fff"], [fill="#FFF"], [fill="#ffffff"], [fill="#FFFFFF"]) {
    fill: currentColor;
}
/* Icons on dark sections stay light */
body.sitto-page #pxl-main .sitto-section--dark :is(.sitto-caps__icon, .pxl-icon-box__item-icon, .pxl-list-feature__item-icon, .sitto-list--stacked .sitto-list__icon, .sitto-link-card__icon) {
    color: var(--sitto-on-dark);
}

/* --------------------------------------------------------------------------
   Content container: every top-level section holds a 1280px content box with
   40 / 24 / 20px side gutters (desktop / tablet / mobile). Classic containers
   get this from their Elementor settings (boxed 1280 + padding); atomic
   flexbox sections have no boxed mode, so it is applied here.
   -------------------------------------------------------------------------- */
body.sitto-page {
    --sitto-container: 1280px;
    --sitto-gutter: 40px;
}
@media (max-width: 1024px) { body.sitto-page { --sitto-gutter: 24px; } }
@media (max-width: 767px)  { body.sitto-page { --sitto-gutter: 20px; } }
body.sitto-page #pxl-main [data-elementor-type="wp-page"] > .e-atomic-element {
    padding-left: max(var(--sitto-gutter), calc((100% - var(--sitto-container)) / 2)) !important;
    padding-right: max(var(--sitto-gutter), calc((100% - var(--sitto-container)) / 2)) !important;
}

/* Icon hover: springy pop when the card/item is hovered */
@keyframes sitto-icon-pop {
    0%   { transform: scale(1) rotate(0deg) translateY(0); }
    35%  { transform: scale(1.32) rotate(-12deg) translateY(-6px); }
    60%  { transform: scale(1.14) rotate(7deg) translateY(-3px); }
    80%  { transform: scale(1.24) rotate(-4deg) translateY(-5px); }
    100% { transform: scale(1.2) rotate(-6deg) translateY(-4px); }
}
body.sitto-page #pxl-main :is(.sitto-caps__card, .pxl-icon-box__item, .pxl-list-feature__item, .sitto-list--stacked .sitto-list__item, .sitto-link-card):is(:hover, :focus-visible) :is(.sitto-caps__icon, .pxl-icon-box__item-icon, .pxl-list-feature__item-icon, .sitto-list__icon, .sitto-link-card__icon) {
    transform: scale(1.2) rotate(-6deg) translateY(-4px);
    animation: sitto-icon-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    body.sitto-page #pxl-main :is(.sitto-caps__icon, .pxl-icon-box__item-icon, .pxl-list-feature__item-icon, .sitto-list__icon, .sitto-link-card__icon) {
        transition: none;
        animation: none !important;
        transform: none !important;
    }
}

/* Capability cards on a warm grey section: hover turns the card dark (the warm hover tint would vanish into the backdrop) */
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps:not(.sitto-caps--vertical):not(.sitto-caps--plain):not(.sitto-caps--numbered) .sitto-caps__card {
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, background-color 0.35s ease, flex-grow 0.45s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps:not(.sitto-caps--vertical):not(.sitto-caps--plain):not(.sitto-caps--numbered) .sitto-caps__card :is(.sitto-caps__card-title, .sitto-caps__card-desc, .sitto-caps__icon, .sitto-caps__tag) {
    transition: color 0.35s ease, background-color 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps:not(.sitto-caps--vertical):not(.sitto-caps--plain):not(.sitto-caps--numbered) .sitto-caps__card:is(:hover, :focus-visible) {
    background-color: var(--sitto-surface-dark, #0B0D12) !important;
    border-color: var(--sitto-surface-dark, #0B0D12) !important;
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps:not(.sitto-caps--vertical):not(.sitto-caps--plain):not(.sitto-caps--numbered) .sitto-caps__card:is(:hover, :focus-visible) :is(.sitto-caps__card-title, .sitto-caps__card-title *, .sitto-caps__icon) {
    color: #FFFFFF !important;
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps:not(.sitto-caps--vertical):not(.sitto-caps--plain):not(.sitto-caps--numbered) .sitto-caps__card:is(:hover, :focus-visible) .sitto-caps__card-desc {
    color: rgba(255, 255, 255, 0.72) !important;
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps:not(.sitto-caps--vertical):not(.sitto-caps--plain):not(.sitto-caps--numbered) .sitto-caps__card:is(:hover, :focus-visible) .sitto-caps__tag {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

/* Flattened illustrations (single transparent image replacing composed widgets) */
body.sitto-page #pxl-main .elementor-widget-image.sitto-illustration {
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    align-self: center;
}
body.sitto-page #pxl-main .sitto-illustration img {
    display: block;
    margin-inline: auto;
    height: auto;
}

/* CTA banner (Sitto - CTA Section): dark card with the same soft gradient as dark sections */
body.sitto-page #pxl-main .sitto-cta__inner {
    background-image: var(--sitto-surface-dark-gradient);
}

/* Feature icons sit at the start of their card (they used to be fixed-size chips) */
body.sitto-page #pxl-main :is(.sitto-caps__icon, .pxl-list-feature__item-icon, .sitto-list--stacked .sitto-list__icon, .sitto-link-card__icon) {
    align-self: flex-start;
}
/* Text-centred cards keep the icon centred */
body.sitto-page #pxl-main .sitto-caps__card[style*="text-align: center"] .sitto-caps__icon {
    align-self: center;
}

/* "Suitable for" chips in the industry steps: tinted so they read as chips on the white card */
body.sitto-page #pxl-main .pxl-step__chips li {
    background: var(--sitto-section-warm, #F8F7F4) !important;
    color: var(--sitto-dark);
}

/* Light cards inside dark sections keep dark text (the dark-section rule whitens p/li/headings) */
body.sitto-page #pxl-main .sitto-section--dark :is(.sitto-caps__card, .pxl-step__item, [class*="sitto-card--light"]) :is(h1, h2, h3, h4, h5, h6, p, li, span, a, div) {
    color: var(--sitto-dark) !important;
}
body.sitto-page #pxl-main .sitto-section--dark :is(.sitto-caps__card) :is(p, .sitto-caps__card-desc) {
    color: var(--sitto-text) !important;
}
/* Textbox carousel items on dark sections: dark glass cards, the active one gets a yellow accent */
body.sitto-page #pxl-main .sitto-section--dark .textbox-item__inner {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--sitto-on-dark-border) !important;
}
body.sitto-page #pxl-main .sitto-section--dark .swiper-slide-active > .textbox-item__inner {
    background-color: rgba(255, 194, 15, 0.12) !important;
    border-color: rgba(255, 194, 15, 0.55) !important;
}

/* --------------------------------------------------------------------------
   Buttons: same hover as the header "Get In Touch" (sitto-btnfx.js tags them).
   Lift, fill rising from the bottom, label nudges left while an arrow slides
   in (buttons with their own icon nudge the icon instead), press on click.
   -------------------------------------------------------------------------- */
body.sitto-page #pxl-main .sitto-btnfx {
    --fx-fill: #FFC20F;
    --fx-text: #181D27;
    --fx-shadow: 0 4px 10px -6px rgba(255, 186, 8, 0.8);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}
body.sitto-page #pxl-main .sitto-btnfx--primary {
    --fx-fill: #0B0D12;
    --fx-text: #FFFFFF;
    --fx-shadow: 0 6px 14px -8px rgba(11, 13, 18, 0.6);
}
body.sitto-page #pxl-main .sitto-btnfx--primary.sitto-btnfx--on-dark {
    --fx-fill: #FFFFFF;
    --fx-text: #181D27;
    --fx-shadow: 0 6px 14px -8px rgba(255, 255, 255, 0.45);
}
body.sitto-page #pxl-main .sitto-btnfx::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit;
    background: var(--fx-fill) !important;
    opacity: 1 !important;
    transform: translateY(102%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
    pointer-events: none;
}
body.sitto-page #pxl-main .sitto-btnfx > :not(.sitto-btnfx__arrow) {
    position: relative;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
body.sitto-page #pxl-main .sitto-btnfx__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    line-height: 1;
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
body.sitto-page #pxl-main .sitto-btnfx:is(:hover, :focus-visible) {
    transform: translateY(-2px) !important;
    box-shadow: var(--fx-shadow) !important;
    border-color: var(--fx-fill) !important;
}
body.sitto-page #pxl-main .elementor-widget .sitto-btnfx.sitto-btnfx.sitto-btnfx:is(:hover, :focus-visible),
body.sitto-page #pxl-main .elementor-widget .sitto-btnfx.sitto-btnfx.sitto-btnfx:is(:hover, :focus-visible) :not(svg):not(svg *) {
    color: var(--fx-text) !important;
}
body.sitto-page #pxl-main .sitto-btnfx:is(:hover, :focus-visible)::after {
    transform: translateY(0);
}
body.sitto-page #pxl-main .sitto-btnfx:not(.sitto-btnfx--has-icon):is(:hover, :focus-visible) > :not(.sitto-btnfx__arrow) {
    transform: translateX(-10px);
}
body.sitto-page #pxl-main .sitto-btnfx:is(:hover, :focus-visible) .sitto-btnfx__arrow {
    opacity: 1;
    transform: translate(0, -50%);
}
/* Buttons with their own icon: the icon slides forward instead of adding an arrow */
body.sitto-page #pxl-main .sitto-btnfx--has-icon :is(svg, i, .btn-icon, .sitto-cta__btn-icon) {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.sitto-page #pxl-main .sitto-btnfx--has-icon:is(:hover, :focus-visible) :is(.btn-icon, .sitto-cta__btn-icon, .sitto-btnfx-icon) ,
body.sitto-page #pxl-main .sitto-btnfx--has-icon:is(:hover, :focus-visible) > :is(svg, i) {
    transform: translateX(4px);
}
body.sitto-page #pxl-main .sitto-btnfx--has-icon:is(:hover, :focus-visible) svg :is(path, line, polyline, circle, rect)[stroke]:not([stroke="none"]) {
    stroke: currentColor;
}
body.sitto-page #pxl-main .sitto-btnfx:active {
    transform: translateY(0) scale(0.97) !important;
    transition-duration: 0.12s !important;
}
@media (prefers-reduced-motion: reduce) {
    body.sitto-page #pxl-main .sitto-btnfx,
    body.sitto-page #pxl-main .sitto-btnfx::after,
    body.sitto-page #pxl-main .sitto-btnfx > * {
        transition-duration: 0.01s !important;
    }
}

/* Capability cards, vertical list: same hover as the grid version (warm tint, grey border,
   no yellow glow / lift); on a warm section the hover turns dark like the grid cards. */
body.sitto-page #pxl-main .sitto-caps--vertical .sitto-caps__glow { display: none; }
body.sitto-page #pxl-main .sitto-caps--vertical .sitto-caps__card {
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, background-color 0.35s ease;
}
body.sitto-page #pxl-main .sitto-caps--vertical .sitto-caps__card.is-featured {
    border-color: var(--sitto-cap-line, #E9EAEB);
    box-shadow: none;
}
body.sitto-page #pxl-main .sitto-caps--vertical.is-ready .sitto-caps__card.is-in:is(:hover, :focus-visible) {
    transform: none;
    background-color: var(--sitto-section-warm, #F8F7F4);
    border-color: #D5D7DA;
    box-shadow: none;
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps--vertical.is-ready .sitto-caps__card.is-in:is(:hover, :focus-visible) {
    background-color: var(--sitto-surface-dark, #0B0D12) !important;
    border-color: var(--sitto-surface-dark, #0B0D12) !important;
}
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps--vertical .sitto-caps__card:is(:hover, :focus-visible) :is(.sitto-caps__card-title, .sitto-caps__icon) { color: #FFFFFF !important; }
body.sitto-page #pxl-main .sitto-section--grey .sitto-caps--vertical .sitto-caps__card:is(:hover, :focus-visible) .sitto-caps__card-desc { color: rgba(255, 255, 255, 0.72) !important; }

/* Textbox carousel cards on dark sections: tighter title/desc rhythm, glass cards,
   active card highlighted with a yellow accent bar */
body.sitto-page #pxl-main .sitto-section--dark .textbox-item__inner {
    position: relative;
    gap: 8px !important;
    padding: 24px 28px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
    transition: background 0.4s ease, border-color 0.4s ease;
}
body.sitto-page #pxl-main .sitto-section--dark .textbox-item__title {
    margin: 0 !important;
    color: #FFFFFF !important;
}
body.sitto-page #pxl-main .sitto-section--dark .textbox-item__desc {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.4s ease;
}
body.sitto-page #pxl-main .sitto-section--dark .textbox-item__inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #FFC20F;
    transform: scaleY(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.sitto-page #pxl-main .sitto-section--dark .swiper-slide-active > .textbox-item__inner {
    background: linear-gradient(180deg, rgba(255, 194, 15, 0.10) 0%, rgba(255, 194, 15, 0.04) 100%) !important;
    border-color: rgba(255, 194, 15, 0.35) !important;
}
body.sitto-page #pxl-main .sitto-section--dark .swiper-slide-active > .textbox-item__inner::before {
    transform: scaleY(1);
}
body.sitto-page #pxl-main .sitto-section--dark .swiper-slide-active > .textbox-item__inner .textbox-item__desc {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Hero with a side image (custom-hero-h7): square image with the standard radius */
body.sitto-page #pxl-main .sitto-hero-media {
    align-self: center;
}
body.sitto-page #pxl-main .sitto-hero-media img {
    display: block;
    width: 100% !important;
    max-width: 600px;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 24px !important;
    margin-inline: auto;
}
body.sitto-page #pxl-main .sitto-hero-media,
body.sitto-page #pxl-main .sitto-hero-media * {
    min-width: 0;
    max-width: 100%;
}
body.sitto-page #pxl-main .sitto-hero-media img { scale: none !important; }

/* Dark section scroll effect (sitto-darkfx.js): the section's own background moves to a
   layer behind the content so only the background narrows / widens. */
body.sitto-page #pxl-main .sitto-darkfx.sitto-darkfx--on {
    position: relative;
    isolation: isolate;
    background-color: transparent !important;
    background-image: none !important;
}
body.sitto-page #pxl-main .sitto-darkfx__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--sitto-surface-dark, #0B0D12);
    background-image: var(--sitto-surface-dark-gradient);
    pointer-events: none;
    will-change: clip-path;
}

/* Side-image heroes: the theme's bottom fade overlay must not wash out the photo */
body.sitto-page #pxl-main .e-parent:has(.sitto-hero-media) .pxl-container-overlay__item-bottom {
    display: none !important;
}

/* Link cards on dark sections: dark glass cards instead of white blocks */
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: none !important;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card :is(.sitto-link-card__title, .sitto-link-card__icon, .sitto-link-card__icon i) {
    color: #FFFFFF !important;
}
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card .sitto-link-card__arrow {
    color: rgba(255, 255, 255, 0.55) !important;
    transition: color 0.35s ease;
}
body.sitto-page #pxl-main .sitto-section--dark a:hover > .sitto-link-card,
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-color: rgba(255, 194, 15, 0.45) !important;
}
body.sitto-page #pxl-main .sitto-section--dark :is(a:hover > .sitto-link-card, .sitto-link-card:hover) .sitto-link-card__arrow {
    color: #FFC20F !important;
}
/* "And many more" (no arrow): yellow-accent variant */
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card:not(:has(.sitto-link-card__arrow)) {
    background: rgba(255, 194, 15, 0.08) !important;
    border: 1px dashed rgba(255, 194, 15, 0.55) !important;
}
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card:not(:has(.sitto-link-card__arrow)) :is(.sitto-link-card__icon, .sitto-link-card__icon i) {
    color: #FFC20F !important;
}

/* Link card grids: every card the same width and height (tallest card sets the row) */
body.sitto-page #pxl-main .e-grid:has(> .elementor-widget-sitto_link_card),
body.sitto-page #pxl-main .e-con:has(> .elementor-widget-sitto_link_card) {
    grid-auto-rows: 1fr;
}
body.sitto-page #pxl-main .elementor-widget-sitto_link_card,
body.sitto-page #pxl-main .elementor-widget-sitto_link_card > .elementor-widget-container,
body.sitto-page #pxl-main .elementor-widget-sitto_link_card :is(a, .sitto-link-card) {
    height: 100%;
}
body.sitto-page #pxl-main .elementor-widget-sitto_link_card .sitto-link-card {
    box-sizing: border-box;
}
/* Dark sections: borderless glass cards; "And many more" is just yellow icon + text */
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card {
    border-color: transparent !important;
}
body.sitto-page #pxl-main .sitto-section--dark a:hover > .sitto-link-card,
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card:hover {
    border-color: transparent !important;
}
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card:not(:has(.sitto-link-card__arrow)) {
    background: transparent !important;
    border: 0 !important;
}
body.sitto-page #pxl-main .sitto-section--dark .sitto-link-card:not(:has(.sitto-link-card__arrow)) :is(.sitto-link-card__title, .sitto-link-card__icon, .sitto-link-card__icon i) {
    color: #FFC20F !important;
}
/* Link cards are a single row: icon centred with the title */
body.sitto-page #pxl-main .sitto-link-card .sitto-link-card__icon { align-self: center; }

/* ==========================================================================
   Mobile navigation (template-parts/header/elementor.php, Sitto pages):
   same look as the desktop navbar — dark floating pill, Sitto logo, DE|EN
   toggle, burger; full-screen dark drawer with the Sitto menu + CTA.
   ========================================================================== */
@media (max-width: 1199px) {
    body.sitto-page #pxl-main { padding-top: 92px !important; }
}
#pxl-header-elementor #pxl-header-mobile.sitto-mnav {
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 999;
    background: transparent;
    padding: 0;
}
#pxl-header-mobile.sitto-mnav .pxl-header-main { position: static; padding: 0; background: none; box-shadow: none; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 58px;
    padding: 0 10px 0 18px;
    border-radius: 18px;
    background-color: var(--sitto-surface-dark, #0B0D12);
    background-image: var(--sitto-surface-dark-gradient);
    box-shadow: 0 10px 30px -12px rgba(11, 13, 18, 0.55);
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__logo { display: inline-flex; align-items: center; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__logo img { height: 24px; width: auto; display: block; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__actions { display: flex; align-items: center; gap: 10px; }
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile { margin: 0; padding: 0; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__burger {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__burger .pxl-icon-line {
    position: static !important;
    display: block;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px;
    background: #FFFFFF !important;
    transform: none !important;
    opacity: 1 !important;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__burger .pxl-icon-line2 { width: 12px !important; align-self: center; }

/* DE | EN toggle: same pill as the desktop header */
#pxl-header-mobile.sitto-mnav .sitto-lang-toggle { position: relative; display: inline-flex; }
#pxl-header-mobile.sitto-mnav .sitto-lang-toggle__track {
    position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
    box-sizing: border-box; min-width: 84px; padding: 3px; border: 1px solid #E9EAEB; border-radius: 999px; background: #FFFFFF;
}
#pxl-header-mobile.sitto-mnav .sitto-lang-toggle__thumb {
    position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px);
    border-radius: 999px; background: #FFC20F; transition: transform 0.22s ease; pointer-events: none; z-index: 0;
}
#pxl-header-mobile.sitto-mnav .sitto-lang-toggle.is-en .sitto-lang-toggle__thumb { transform: translateX(100%); }
#pxl-header-mobile.sitto-mnav .sitto-lang-toggle__option {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 38px;
    padding: 5px 8px; color: #181D27; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em;
    text-decoration: none; text-transform: uppercase;
}

/* Drawer */
#pxl-header-mobile.sitto-mnav .sitto-mnav__drawer {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    z-index: 1000;
    padding: 0 !important;
    background-color: var(--sitto-surface-dark, #0B0D12) !important;
    background-image: var(--sitto-surface-dark-gradient) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) !important;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s !important;
    box-shadow: none !important;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__drawer.active {
    opacity: 1;
    visibility: visible;
    transform: none !important;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s !important;
}
#pxl-header-mobile.sitto-mnav .pxl-header-menu-scroll {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 22px 28px !important;
    overflow-y: auto;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; margin: 0 0 18px;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__close {
    position: static !important;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; cursor: pointer;
}
#pxl-header-mobile.sitto-mnav .pxl-header-menu-backdrop { display: none !important; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav { flex: 1 1 auto; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu__primary { margin: 0; padding: 0; list-style: none; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu__primary > li {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu__primary > li > a {
    display: block;
    padding: 18px 48px 18px 0 !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em;
    text-decoration: none;
    background: none !important;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .sub-menu {
    display: none;
    margin: 0 0 14px !important;
    padding: 0 !important;
    list-style: none;
    background: none !important;
    box-shadow: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .sub-menu li a {
    display: block;
    padding: 9px 0 !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none;
    background: none !important;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .sub-menu li a:hover,
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .current-menu-item > a { color: #FFC20F !important; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu-toggle {
    position: absolute !important;
    top: 12px !important;
    right: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06) !important;
    cursor: pointer;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu-toggle::before,
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu-toggle::after { display: none !important; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu-toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    transition: transform 0.3s ease;
}
#pxl-header-mobile.sitto-mnav .sitto-mnav__nav .pxl-menu-toggle.active { transform: rotate(180deg); }
#pxl-header-mobile.sitto-mnav .sitto-mnav__cta { padding-top: 24px; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 54px; border-radius: 999px;
    background: #FFC20F; color: #181D27 !important;
    font-size: 16px; font-weight: 600; text-decoration: none;
}
@media (min-width: 1200px) {
    #pxl-header-elementor #pxl-header-mobile.sitto-mnav { display: none; }
}
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile,
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile.active {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    background: none !important;
}
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile::before,
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile::after,
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile *::before,
#pxl-header-mobile.sitto-mnav #pxl-nav-mobile *::after { display: none !important; }
#pxl-header-mobile.sitto-mnav .sitto-mnav__close::before,
#pxl-header-mobile.sitto-mnav .sitto-mnav__close::after { display: none !important; }
/* Theme adds a square dark backdrop when the mobile header sticks on scroll-up: keep only the rounded pill */
#pxl-header-elementor #pxl-header-mobile.sitto-mnav,
#pxl-header-elementor #pxl-header-mobile.sitto-mnav.pxl-header-mobile-fixed {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Content never wider than the section's content box: nested containers may shrink
   (Elementor's 50% + gap columns otherwise overflow), theme scale-up on images off */
body.sitto-page #pxl-main [data-elementor-type="wp-page"] .e-con .e-con {
    --flex-shrink: 1;
}
/* Buttons keep their label on one line and never get squeezed */
body.sitto-page #pxl-main :is(.sitto-btnfx, a.btn, .sitto-cta__btn) {
    white-space: nowrap;
}
body.sitto-page #pxl-main :is(.elementor-widget-pxl_button, .elementor-widget-sitto_cta_button) {
    flex-shrink: 0;
    max-width: 100%;
}
body.sitto-page #pxl-main .sitto-illustration img { scale: none !important; }
/* About > Our Partners: the three partner cards stack on phones */
@media (max-width: 767px) {
    body.sitto-page #pxl-main [data-id="ec65aab"] { flex-direction: column !important; gap: 40px !important; }
    body.sitto-page #pxl-main [data-id="ec65aab"] > .elementor-element { width: 100% !important; max-width: none !important; }
}

/* Hero: inner wrapper columns add no side padding, so the hero lines up with every section (80 / 24 / 20px) */
body.sitto-page #pxl-main .e-parent:has(h1) :is([data-id="13292a2"], [data-id="b1988d5"], [data-id="f612ee1"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   Mobile hero: compact and centred (chip → title → description → buttons)
   ========================================================================== */
@media (max-width: 767px) {
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)),
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) > .e-con-inner {
        padding-top: 16px !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .e-con {
        row-gap: 16px !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .elementor-widget:not(.elementor-absolute) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) h1 { margin: 0 !important; }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .pxl-text-editor p:last-child { margin-bottom: 0 !important; }
    /* buttons row */
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .e-con:has(> .elementor-widget-pxl_button) {
        margin-top: 8px !important;
        row-gap: 8px !important;
        column-gap: 8px !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .sitto-hero-media,
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .elementor-widget-sitto_video {
        margin-top: 16px !important;
    }

    /* centre everything except on the form pages (contact / demo) */
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)):not(:has(.sitto-form-builder)) :is(.pxl-heading, .pxl-heading__inner, .pxl-heading__title, h1, .pxl-text-editor, .pxl-text-editor p, .sitto-hero-description) {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)):not(:has(.sitto-form-builder)) .e-con:not(.sitto-hero-media) {
        align-items: center !important;
        justify-content: center !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)):not(:has(.sitto-form-builder)) .e-con:has(> .elementor-widget-pxl_button) {
        flex-direction: column !important;
        align-items: center !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)):not(:has(.sitto-form-builder)) .pxl-heading__sub {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 767px) {
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .e-con:not(.elementor-element-a8f3623):not(:has(> .elementor-widget-sitto_form_builder)) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)):not(:has(.sitto-form-builder)) .elementor-element-a8f3623 {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 767px) {
    body.sitto-page #pxl-main .e-parent:has(h1):not(:has(.sitto-tc-toc, .sitto-tc-content)) .e-con:not(:has(> .elementor-widget-pxl_button)):not(.sitto-hero-media) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* Step image (Tap On Mobile "how it works"): the list was a fixed 300px box while the
   phone photos are portrait, so they spilled over the steps on phones/tablets */
@media (max-width: 1024px) {
    body.sitto-page #pxl-main .pxl-step-image__list,
    body.sitto-page #pxl-main .elementor-widget-pxl_step_image,
    body.sitto-page #pxl-main .elementor-widget-pxl_step_image .elementor-widget-container,
    body.sitto-page #pxl-main .elementor-widget-pxl_step_image .pxl-step-image {
        height: auto !important;
    }
    body.sitto-page #pxl-main .pxl-step-image__item img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
}
/* Buttons are at least as wide as their label */
body.sitto-page #pxl-main :is(.sitto-btnfx, a.btn, .sitto-cta__btn) { min-width: max-content; max-width: 100%; }
body.sitto-page #pxl-main :is(.elementor-widget-pxl_button, .elementor-widget-sitto_cta_button) { min-width: max-content; }
body.sitto-page #pxl-main .elementor-widget-pxl_button .pxl-button { min-width: max-content; }
/* Vertical textbox carousels: on phones the fixed slide heights cut the text, so show the items as a plain stacked list */
@media (max-width: 767px) {
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider__inner,
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider,
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-container {
        height: auto !important;
        overflow: visible !important;
    }
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider__wrapper {
        flex-direction: column !important;
        height: auto !important;
        transform: none !important;
        gap: 12px;
    }
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider__item {
        height: auto !important;
        margin: 0 !important;
        width: 100% !important;
    }
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .swiper-slide-duplicate,
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider__cursor {
        display: none !important;
    }
}
@media (max-width: 767px) {
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .textbox-item__inner { padding: 18px 20px !important; }
}

/* Title + description column next to a vertical capability card list: sticky on desktop */
@media (min-width: 1025px) {
    body.sitto-page #pxl-main .e-con:has(> .elementor-widget-sitto_capability_cards .sitto-caps--vertical) {
        align-items: flex-start !important;
    }
    body.sitto-page #pxl-main .e-con:has(> .elementor-widget-sitto_capability_cards .sitto-caps--vertical) > .e-con:has(h2) {
        position: sticky !important;
        top: 120px;
        align-self: flex-start !important;
    }
}

/* Popup player for uploaded videos (hero "watch video" buttons) */
.sitto-vpop-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(11,13,18,.88);opacity:0;transition:opacity .2s ease}
.sitto-vpop-overlay.is-open{opacity:1}
.sitto-vpop{width:min(1100px,100%);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.sitto-vpop video{display:block;width:100%;height:auto;max-height:84vh}
.sitto-vpop-close{position:absolute;top:12px;right:12px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:32px;line-height:48px;cursor:pointer;padding:0}
.sitto-vpop-close:hover{background:#FFC20F;color:#0B0D12}
html.sitto-vpop-lock,html.sitto-vpop-lock body{overflow:hidden}

/* Homepage "Warum Sitto" photo (replaces the old illustration) */
.sitto-why-photo img{display:block;width:min(100%,560px);margin-inline:auto;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:24px;scale:none}

/* Payment-logo marquee: plain logos, no grey chip behind them */
.sitto-anim-js .pxl-marquee .pxl-marquee__item{background:transparent !important;box-shadow:none !important;border:0 !important}

/* One pill radius for every button on Sitto pages (theme buttons, pricing table, forms, custom widgets) */
#pxl-main a.btn,
#pxl-main .pxl-pricing__button,
#pxl-main .sitto-form-builder__submit,
#pxl-main .sitto-cta__btn,
#pxl-main .sitto-ps__cta,
#pxl-main .sitto-vt__btn,
#pxl-main .sitto-cmp__btn,
#pxl-main .wpcf7-submit,
#pxl-main .pxl-icon-box__item-button a,
#pxl-main .sitto-btnfx,
#pxl-main .sitto-btnfx::before,
#pxl-main .sitto-btnfx::after { border-radius: 999px !important; }

/* ------------------------------------------------------------------
   Mobile: every section's content uses the same width as the hero
   (section padding only). Inner containers without a visible box lose
   their side padding, width caps from desktop are lifted, and the
   stacked "Why Sitto" cards drop the indent left for the progress line.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    body.sitto-page #pxl-main :is(
        .elementor-element-b0a0cc9, .elementor-element-09ef1b8, .elementor-element-7c09fe6, .elementor-element-f7e01ed,
        .elementor-element-6dbeee4, .elementor-element-74bce50, .elementor-element-21de9db, .elementor-element-38cc624,
        .elementor-element-177e6d3, .elementor-element-ec65aab, .elementor-element-a04ce93, .elementor-element-06cd191,
        .elementor-element-2e39b19, .elementor-element-hfcta_rde, .elementor-element-hfcta_ren,
        .elementor-element-fcta_rde, .elementor-element-fcta_ren
    ) { padding-left: 0 !important; padding-right: 0 !important; --padding-left: 0px; --padding-right: 0px; }

    body.sitto-page #pxl-main .e-con > .elementor-widget:not(.elementor-widget-pxl_button):not(.elementor-widget-sitto_cta_button) { max-width: 100%; }
    body.sitto-page #pxl-main .elementor-widget-pxl_text_editor .pxl-text-editor__inner { max-width: 100% !important; }

    /* Buttons keep their natural one-line width (never squeezed by a flex row); only a label longer
       than the screen wraps, capped at 100% of the container. Button rows wrap instead of overflowing. */
    body.sitto-page #pxl-main :is(.elementor-widget-pxl_button, .elementor-widget-sitto_cta_button) { flex-shrink: 0 !important; min-width: 0 !important; max-width: 100% !important; }
    body.sitto-page #pxl-main :is(.elementor-widget-pxl_button, .elementor-widget-sitto_cta_button):not(.sitto-btn-block) { width: max-content !important; }
    body.sitto-page #pxl-main .elementor-widget-pxl_button .pxl-button { min-width: 0 !important; max-width: 100%; }
    body.sitto-page #pxl-main a.btn { min-width: 0 !important; max-width: 100%; white-space: normal !important; text-align: center; }
    body.sitto-page #pxl-main .e-con:has(> .elementor-widget-pxl_button + .elementor-widget-pxl_button),
    body.sitto-page #pxl-main .e-con-inner:has(> .elementor-widget-pxl_button + .elementor-widget-pxl_button) { flex-wrap: wrap !important; }

    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider { gap: 0 !important; }
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-dots { display: none !important; }
    body.sitto-page #pxl-main .elementor-widget-pxl_textbox_carousel.sitto-tb-static .pxl-swiper-slider__inner { flex: 1 1 100% !important; width: 100% !important; }
}

/* Mobile: content inside cards keeps a proper inner padding, and long words wrap inside their box */
@media (max-width: 767px) {
    body.sitto-page #pxl-main :is(
        .elementor-element-b3e257c, .elementor-element-0e7bf5a, .elementor-element-3c2a392,
        .elementor-element-3233957, .elementor-element-fdf68eb, .elementor-element-f7d3c92,
        .elementor-element-1d60eef, .elementor-element-0c67a21, .elementor-element-bfa8225
    ) { padding: 24px 20px !important; --padding-top: 24px; --padding-right: 20px; --padding-bottom: 24px; --padding-left: 20px; }

    body.sitto-page #pxl-main :is(h1, h2, h3, h4, h5, h6, p, li, label, dd, dt, td, .pxl-heading__title, .pxl-text-editor__inner) {
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    body.sitto-page #pxl-main :is(.sm-w, .sa-word, .sa-w) { max-width: 100%; }
}

/* Payment-logo marquee: the Boncard mark is tall (bird + wordmark + tagline), so it needs more height to read like the others */
body.sitto-page #pxl-main .pxl-marquee .pxl-marquee__item-image img[src*="boncard"] { height: 66px !important; }
@media (max-width: 767px) {
    body.sitto-page #pxl-main .pxl-marquee .pxl-marquee__item-image img[src*="boncard"] { height: 46px !important; }
}

/* ==================================================================
   Shop archive (theme sidebar + page-title slot, Sitto styling)
   ================================================================== */
body.sitto-page.woocommerce #pxl-ptit__elementor { padding-top: 132px; }
body.sitto-page .sitto-shop-hero { --sitto-shop-line: #E9EAEB; }
body.sitto-page .sitto-shop-hero__title .pxl-heading__title { font-size: 44px !important; line-height: 1.12; margin: 0 0 12px; text-align: left; }
body.sitto-page .sitto-shop-hero__desc { max-width: 720px; color: #535862; font-size: 17px; }
body.sitto-page .e-con.sitto-shop-trust-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--sitto-shop-line); }
body.sitto-page .e-con.sitto-shop-cat-row { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--sitto-shop-line); }
body.sitto-page .sitto-shop-trust .elementor-icon-box-wrapper { display: flex; align-items: center; gap: 14px; text-align: left; }
body.sitto-page .sitto-shop-trust .elementor-icon-box-icon { margin: 0 !important; flex: 0 0 48px; }
body.sitto-page .sitto-shop-trust .elementor-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #F8F7F4; color: #181D27; font-size: 22px; padding: 0; }
body.sitto-page .sitto-shop-trust .elementor-icon i, body.sitto-page .sitto-shop-trust .elementor-icon svg { color: #181D27; fill: #181D27; font-size: 22px; width: 22px; height: 22px; }
body.sitto-page .sitto-shop-trust .elementor-icon-box-title { letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600; line-height: 1.3; margin: 0 0 2px !important; color: #181D27; }
body.sitto-page .sitto-shop-trust .elementor-icon-box-title a, body.sitto-page .sitto-shop-trust .elementor-icon-box-title span { color: inherit; }
body.sitto-page .sitto-shop-trust .elementor-icon-box-description { font-size: 13px; line-height: 1.45; color: #717680; margin: 0; }
body.sitto-page .sitto-shop-cat .elementor-image-box-wrapper { text-align: center; }
body.sitto-page .sitto-shop-cat .elementor-image-box-img { width: 100% !important; margin: 0 0 12px !important; display: flex; justify-content: center; }
body.sitto-page .sitto-shop-cat .elementor-image-box-img img { height: 76px; width: auto; max-width: 100%; object-fit: contain; transition: transform .3s ease; }
body.sitto-page .sitto-shop-cat:hover .elementor-image-box-img img { transform: translateY(-3px); }
body.sitto-page .sitto-shop-cat .elementor-image-box-title { letter-spacing: 0 !important; line-height: 1.35 !important; font-size: 14px !important; font-weight: 600; margin: 0 !important; color: #181D27; }
body.sitto-page .sitto-shop-cat .elementor-image-box-title a { color: inherit; }

/* layout: sidebar on the left, sticky (theme wrapper .pxl-sidebar-sticky) */
body.sitto-page.woocommerce #pxl-main > .container { max-width: 1280px; padding-left: 0; padding-right: 0; margin-top: 40px; margin-bottom: 96px; }
body.sitto-page.woocommerce #pxl-main { padding-top: 0 !important; }
body.sitto-page.woocommerce .pxl-content-wrap.pxl-sidebar__left { flex-direction: row-reverse; flex-wrap: nowrap; gap: 32px; margin: 0; }
body.sitto-page.woocommerce .pxl-content-wrap.pxl-sidebar__left > .pxl-sidebar-area { flex: 0 0 264px; max-width: 264px; padding: 0; }
body.sitto-page.woocommerce .pxl-content-wrap.pxl-sidebar__left > .pxl-content-area { flex: 1 1 0; min-width: 0; max-width: none; padding: 0; }
body.sitto-page.woocommerce .pxl-sidebar-shop .pxl-sidebar-sticky { top: 110px; display: flex; flex-direction: column; gap: 16px; }
body.sitto-page.woocommerce .pxl-sidebar-shop .widget { margin: 0; padding: 22px 20px; border: 1px solid #E9EAEB; border-radius: 20px; background: #fff; }
body.sitto-page.woocommerce .pxl-sidebar-shop .widget-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #181D27; }
body.sitto-page.woocommerce .pxl-sidebar-shop .widget-title::before, body.sitto-page.woocommerce .pxl-sidebar-shop .widget-title::after { display: none; }
body.sitto-page.woocommerce .widget_product_search form { position: relative; }
body.sitto-page.woocommerce .widget_product_search .search-field { width: 100%; height: 44px; padding: 0 44px 0 16px; border: 1px solid #E9EAEB; border-radius: 999px; background: #F8F7F4; font-size: 14px; }
body.sitto-page.woocommerce .widget_product_search button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 0; cursor: pointer; }
body.sitto-page.woocommerce .widget_product_search button::before { content: "\e30c"; font-family: "Phosphor"; font-size: 18px; color: #535862; }
body.sitto-page.woocommerce .widget_product_categories ul { list-style: none; margin: 0; padding: 0; }
body.sitto-page.woocommerce .widget_product_categories li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.sitto-page.woocommerce .widget_product_categories li::before, body.sitto-page.woocommerce .widget_product_categories li::after { display: none !important; }
body.sitto-page.woocommerce .widget_product_categories .pxl-cat__item-image, body.sitto-page.woocommerce .widget_product_categories .pxl-menu__toggle { display: none !important; }
body.sitto-page.woocommerce .widget_product_categories li > a { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0 !important; border-bottom: 1px solid #F0F0F0; color: #414651 !important; font-size: 14px; font-weight: 400; background: none !important; }
body.sitto-page.woocommerce .widget_product_categories li > a:hover, body.sitto-page.woocommerce .widget_product_categories li.current-cat > a, body.sitto-page.woocommerce .widget_product_categories li.pxl-cat__item-all > a { color: #181D27 !important; font-weight: 600; }
body.sitto-page.woocommerce .widget_product_categories .pxl-cat__item-count { min-width: 24px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: #F5F5F5; color: #535862; font-size: 12px; font-weight: 500; }
body.sitto-page.woocommerce .widget_product_categories .pxl-cat__item-count span { position: static; padding: 0; background: none; color: inherit; }
body.sitto-page.woocommerce .widget_product_categories li.current-cat > a .pxl-cat__item-count { background: #181D27; color: #fff; }
body.sitto-page.woocommerce .widget_product_categories li.pxl-cat__parents > a { margin-top: 14px; padding-top: 16px !important; border-top: 1px solid #E9EAEB; border-bottom: 0; color: #181D27 !important; font-weight: 600; font-size: 15px; }
body.sitto-page.woocommerce .widget_product_categories li.pxl-cat__parents > a .pxl-cat__item-count { display: none; }
body.sitto-page.woocommerce .widget_product_categories .children { display: block !important; padding-left: 0 !important; margin: 0 !important; }
body.sitto-page.woocommerce .widget_custom_html { padding: 0 !important; border: 0 !important; background: transparent !important; }
body.sitto-page .sitto-shop-cta { padding: 24px 22px; border-radius: 20px; background: #181D27; color: #fff; }
body.sitto-page .sitto-shop-cta__title { margin: 0 0 8px; color: #fff; font-size: 18px !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
body.sitto-page .sitto-shop-cta__text { margin: 0 0 18px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; }
body.sitto-page .sitto-shop-cta__btn.btn { display: inline-flex; padding: 11px 22px; border-radius: 999px; background: #FFC20F; color: #181D27; font-size: 14px; font-weight: 600; }

/* toolbar + product grid */
body.sitto-page.woocommerce .sitto-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
body.sitto-page.woocommerce .sitto-shop-toolbar .woocommerce-result-count { margin: 0; color: #535862; font-size: 14px; }
body.sitto-page.woocommerce .sitto-shop-toolbar .woocommerce-ordering { margin: 0; }
body.sitto-page.woocommerce .sitto-shop-toolbar select, body.sitto-page.woocommerce .sitto-shop-toolbar .nice-select { height: 40px; line-height: 38px; padding: 0 36px 0 16px; border: 1px solid #E9EAEB; border-radius: 999px; font-size: 14px; background-color: #fff; }
body.sitto-page.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px 24px; margin: 0; }
body.sitto-page.woocommerce ul.products::before, body.sitto-page.woocommerce ul.products::after { display: none; }
body.sitto-page.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; padding: 0; float: none; text-align: center; }
body.sitto-page.woocommerce ul.products li.product .product-top { position: relative; border-radius: 20px; background: #F5F5F5; overflow: hidden; aspect-ratio: 1 / 1; }
body.sitto-page.woocommerce ul.products li.product .product-image { display: grid !important; place-items: center; width: 100%; height: 100%; padding: 8% !important; box-sizing: border-box; }
body.sitto-page.woocommerce ul.products li.product .product-image img { width: 100% !important; height: 100% !important; max-height: 100%; object-fit: contain; object-position: center; mix-blend-mode: multiply; transition: transform .4s cubic-bezier(.22,1,.36,1); margin: 0; }
body.sitto-page.woocommerce ul.products li.product:hover .product-image img { transform: scale(1.04); }
body.sitto-page.woocommerce ul.products li.product .product-actions { display: none; }
body.sitto-page.woocommerce ul.products li.product .onsale { position: absolute; top: 14px; left: 14px; right: auto; min-height: 0; min-width: 0; margin: 0; padding: 4px 12px; border-radius: 999px; background: #FFC20F; color: #181D27; font-size: 12px; font-weight: 600; line-height: 1.4; z-index: 2; }
body.sitto-page.woocommerce #pxl-main ul.products li.product :is(.product-title, .woocommerce-loop-product__title) { margin: 16px 0 4px !important; padding: 0; font-size: 16px !important; line-height: 1.35 !important; letter-spacing: 0 !important; font-weight: 500 !important; color: #181D27; }
body.sitto-page.woocommerce ul.products li.product :is(.price, .product-price) { display: block; color: #414651; font-size: 15px; font-weight: 400; }
body.sitto-page.woocommerce ul.products li.product :is(.price, .product-price) del { color: #A4A7AE; margin-right: 6px; }
body.sitto-page.woocommerce ul.products li.product :is(.price, .product-price) ins { text-decoration: none; color: #181D27; }

@media (max-width: 1024px) {
    body.sitto-page.woocommerce #pxl-ptit__elementor { padding-top: 112px; }
    body.sitto-page .e-con.sitto-shop-trust-row { grid-template-columns: repeat(2, 1fr); }
    body.sitto-page.woocommerce #pxl-main > .container { padding-left: 24px; padding-right: 24px; }
    body.sitto-page.woocommerce .pxl-content-wrap.pxl-sidebar__left { flex-direction: column; }
    body.sitto-page.woocommerce .pxl-content-wrap.pxl-sidebar__left > .pxl-sidebar-area { flex: 1 1 auto; max-width: none; order: 2; }
    body.sitto-page.woocommerce .pxl-sidebar-shop .pxl-sidebar-sticky { position: static; }
    body.sitto-page.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
    body.sitto-page.woocommerce #pxl-ptit__elementor { padding-top: 96px; }
    body.sitto-page .sitto-shop-hero__title .pxl-heading__title { font-size: 32px !important; }
    body.sitto-page .e-con.sitto-shop-trust-row { grid-template-columns: 1fr 1fr; gap: 18px; }
    body.sitto-page .e-con.sitto-shop-cat-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 34%; overflow-x: auto; scrollbar-width: none; }
    body.sitto-page.woocommerce #pxl-main > .container { padding-left: 20px; padding-right: 20px; }
    body.sitto-page.woocommerce ul.products { gap: 24px 14px; }
    body.sitto-page.woocommerce #pxl-main ul.products li.product :is(.product-title, .woocommerce-loop-product__title) { font-size: 14px; }
    body.sitto-page.woocommerce .sitto-shop-toolbar { flex-wrap: wrap; }
}

/* Cart popup: both buttons full width, stacked, pill-shaped, labels on one line */
.pxl-popup--cart .pxl-popup__content .pxl-popup__footer-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
.pxl-popup--cart .pxl-popup__content .pxl-popup__footer-buttons .btn { width: 100%; min-height: 50px; justify-content: center; white-space: nowrap; border-radius: 999px; font-size: 15px; font-weight: 600; }
.pxl-popup--cart .pxl-popup__content .pxl-popup__footer-buttons .btn.checkout { background: #FFC20F; color: #181D27; }
body.sitto-page.woocommerce .widget_product_categories li > a::before, body.sitto-page.woocommerce .widget_product_categories li > a::after { display: none !important; content: none !important; }
body.sitto-page .e-con.sitto-shop-hero { --padding-left: 0px; --padding-right: 0px; padding-left: 0 !important; padding-right: 0 !important; }
body.sitto-page .e-con.sitto-shop-hero > .e-con-inner { max-width: 1280px; padding-left: 0; padding-right: 0; }
@media (max-width: 1024px) { body.sitto-page .e-con.sitto-shop-hero > .e-con-inner { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 767px) { body.sitto-page .e-con.sitto-shop-hero > .e-con-inner { padding-left: 20px; padding-right: 20px; } }

/* ==================================================================
   Single product (theme template, Sitto layout)
   ================================================================== */
body.sitto-page.woocommerce.single-product #pxl-main { padding-top: 128px !important; }
body.sitto-page.single-product div.product { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 64px; position: relative; }
body.sitto-page.single-product div.product > .onsale { position: absolute; top: 18px; left: 18px; z-index: 3; margin: 0; min-height: 0; padding: 4px 12px; border-radius: 999px; background: #FFC20F; color: #181D27; font-size: 12px; font-weight: 600; line-height: 1.4; }
body.sitto-page.single-product div.product > .woocommerce-product-gallery { flex: 0 0 calc(50% - 32px) !important; max-width: calc(50% - 32px) !important; width: calc(50% - 32px) !important; margin: 0 !important; padding: 24px; border-radius: 24px; background: transparent; opacity: 1 !important; position: sticky; top: 110px; }
body.sitto-page.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
body.sitto-page.single-product .woocommerce-product-gallery__trigger { position: absolute; top: 18px; right: 18px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
body.sitto-page.single-product .flex-control-thumbs { display: flex; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
body.sitto-page.single-product .flex-control-thumbs li { width: 72px !important; margin: 0 !important; }
body.sitto-page.single-product .flex-control-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 2px solid transparent; background: #fff; opacity: 1 !important; cursor: pointer; }
body.sitto-page.single-product .flex-control-thumbs img.flex-active { border-color: #181D27; }
body.sitto-page.single-product div.product > .summary { flex: 1 1 0 !important; min-width: 0; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none; }
body.sitto-page.single-product .summary .breadcrumb { margin: 0 0 18px; font-size: 13px; color: #717680; }
body.sitto-page.single-product .summary .breadcrumb a { color: #535862; }
body.sitto-page.single-product #pxl-main .summary .product_title { margin: 0 0 14px !important; font-size: 40px !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; font-weight: 600 !important; color: #181D27; }
body.sitto-page.single-product .summary .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 18px !important; font-size: 26px !important; font-weight: 600; color: #181D27 !important; }
body.sitto-page.single-product .summary .price del { font-size: 18px; font-weight: 400; color: #A4A7AE; }
body.sitto-page.single-product .summary .price ins { text-decoration: none; }
body.sitto-page.single-product .summary .sitto-price-suffix { font-size: 13px; font-weight: 400; color: #717680; }
body.sitto-page.single-product .summary .woocommerce-product-details__short-description { margin: 0 0 24px; color: #535862; font-size: 15px; line-height: 1.6; }
body.sitto-page.single-product .summary form.cart { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px !important; }
body.sitto-page.single-product .summary .quantity-form { flex: 0 0 100%; display: flex; flex-direction: column; gap: 8px; }
body.sitto-page.single-product .summary .quantity-label { font-size: 14px; color: #414651; }
body.sitto-page.single-product .summary .quantity-wrap { display: inline-flex; align-items: center; gap: 4px; width: max-content; height: 48px; padding: 0 6px; border: 1px solid #E9EAEB; border-radius: 999px; }
body.sitto-page.single-product .summary .quantity-action { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
body.sitto-page.single-product .summary .quantity-action:hover { background: transparent; }
body.sitto-page.single-product .summary .quantity .qty { width: 40px; border: 0; text-align: center; font-size: 15px; background: transparent; }
body.sitto-page.single-product .sitto-pdp-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 13px; color: #535862; }
body.sitto-page.single-product .sitto-pdp-trust li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
body.sitto-page.single-product .sitto-pdp-trust li::before { display: none; }
body.sitto-page.single-product .sitto-pdp-trust i { color: #12B76A; font-size: 15px; }
body.sitto-page.single-product .sitto-pdp-acc { border-top: 1px solid #E9EAEB; }
body.sitto-page.single-product .sitto-pdp-acc details { border-bottom: 1px solid #E9EAEB; }
body.sitto-page.single-product .sitto-pdp-acc summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 16px; font-weight: 600; color: #181D27; cursor: pointer; list-style: none; }
body.sitto-page.single-product .sitto-pdp-acc summary::-webkit-details-marker { display: none; }
body.sitto-page.single-product .sitto-pdp-acc summary::after { content: "\e136"; font-family: "Phosphor"; font-size: 16px; transition: transform .25s ease; }
body.sitto-page.single-product .sitto-pdp-acc details[open] summary::after { transform: rotate(180deg); }
body.sitto-page.single-product .sitto-pdp-acc__body { padding: 0 0 20px; color: #535862; font-size: 15px; line-height: 1.65; }
body.sitto-page.single-product .sitto-pdp-acc__body h1, body.sitto-page.single-product .sitto-pdp-acc__body h2, body.sitto-page.single-product .sitto-pdp-acc__body h3, body.sitto-page.single-product .sitto-pdp-acc__body h4, body.sitto-page.single-product .sitto-pdp-acc__body strong { font-size: 14px !important; font-weight: 600; letter-spacing: .02em !important; color: #181D27; margin: 16px 0 8px !important; line-height: 1.4 !important; }
body.sitto-page.single-product .sitto-pdp-acc__body ul { list-style: none; margin: 8px 0 0; padding: 0; }
body.sitto-page.single-product .sitto-pdp-acc__body ul li { position: relative; padding-left: 26px; margin: 0 0 8px; }
body.sitto-page.single-product .sitto-pdp-acc__body ul li::before { content: "\e182"; font-family: "Phosphor"; position: absolute; left: 0; top: 1px; color: #12B76A; font-size: 15px; }
body.sitto-page.single-product .sitto-pdp-acc__body a { color: #181D27; text-decoration: underline; }
body.sitto-page.single-product .sitto-pdp-cat { margin: 18px 0 0; font-size: 13px; color: #717680; }
body.sitto-page.single-product .sitto-pdp-cat a { color: #181D27; font-weight: 500; }
body.sitto-page.single-product .product_meta, body.sitto-page.single-product .woocommerce-tabs:empty { display: none; }

/* related products */
body.sitto-page.single-product .sitto-related-head { flex: 0 0 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 56px 0 0; padding-top: 56px; border-top: 1px solid #E9EAEB; }
body.sitto-page.single-product #pxl-main .sitto-related-head h2 { margin: 0 !important; font-size: 34px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
body.sitto-page.single-product .sitto-related-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #181D27; }
body.sitto-page.single-product div.product > section.related { flex: 0 0 100%; margin: 0 0 96px; padding: 0; }
body.sitto-page.single-product section.related ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body.sitto-page.single-product section.related .related__title:empty { display: none; }

@media (max-width: 1024px) {
    body.sitto-page.woocommerce.single-product #pxl-main { padding-top: 108px !important; }
    body.sitto-page.single-product #pxl-main > .container { padding-left: 24px; padding-right: 24px; }
    body.sitto-page.single-product div.product { gap: 36px; }
    body.sitto-page.single-product div.product > .woocommerce-product-gallery { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; position: relative; top: 0; }
    body.sitto-page.single-product div.product > .summary { flex: 0 0 100% !important; }
    body.sitto-page.single-product section.related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
    body.sitto-page.woocommerce.single-product #pxl-main { padding-top: 92px !important; }
    body.sitto-page.single-product #pxl-main > .container { padding-left: 20px; padding-right: 20px; }
    body.sitto-page.single-product div.product > .woocommerce-product-gallery { padding: 16px; }
    body.sitto-page.single-product #pxl-main .summary .product_title { font-size: 30px !important; }
    body.sitto-page.single-product #pxl-main .sitto-related-head h2 { font-size: 26px !important; }
    body.sitto-page.single-product .sitto-related-head { flex-wrap: wrap; margin-top: 32px; padding-top: 32px; }
}
/* single product: beat theme spacing that uses higher specificity */
body.sitto-page.single-product #pxl-main div.product > .woocommerce-product-gallery { padding: 24px !important; background: transparent !important; border-radius: 24px !important; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap { height: 48px !important; padding: 0 6px !important; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity { height: auto !important; margin: 0 !important; }
body.sitto-page.single-product #pxl-main div.product > section.related { margin: 28px 0 96px !important; }
@media (max-width: 767px) { body.sitto-page.single-product #pxl-main div.product > .woocommerce-product-gallery { padding: 16px !important; } }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity { display: flex !important; align-items: center; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .qty { height: 36px !important; line-height: 36px !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .qty::-webkit-inner-spin-button, body.sitto-page.single-product #pxl-main .summary .quantity-wrap .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* the theme hard-codes "Quantity:" in its template; German label on DE pages */
html[lang^="de"] body.sitto-page.single-product .quantity-label { font-size: 0 !important; }
html[lang^="de"] body.sitto-page.single-product .quantity-label::after { content: "Menge:"; font-size: 14px; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity { position: static !important; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .qty { position: static !important; transform: none !important; width: 36px !important; text-align: center; }
body.sitto-lang-de.single-product .quantity-label { font-size: 0 !important; }
body.sitto-lang-de.single-product .quantity-label::after { content: "Menge:"; font-size: 14px; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity-action { position: static !important; transform: none !important; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity-action--down { order: 0; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity { order: 1; }
body.sitto-page.single-product #pxl-main .summary .quantity-wrap .quantity-action--up { order: 2; }

/* single product: no grey backgrounds (gallery, related cards) */
body.sitto-page.single-product .woocommerce-product-gallery { background: transparent !important; }

/* single product: Add to cart = brand primary yellow button (same as homepage primary) */
body.sitto-page.single-product #pxl-main .summary .single_add_to_cart_button {
    background: #FFC20F !important;
    border: 0 !important;
    color: #181D27 !important;
    border-radius: 999px !important;
    font-weight: 600;
}
body.sitto-page.single-product #pxl-main .summary .single_add_to_cart_button svg path { fill: #181D27; }
body.sitto-page.single-product #pxl-main .summary .single_add_to_cart_button { position: relative; overflow: hidden; }
body.sitto-page.single-product #pxl-main .summary .single_add_to_cart_button:is(:hover, :focus-visible) { color: #fff !important; }
body.sitto-page.single-product #pxl-main .summary .single_add_to_cart_button:is(:hover, :focus-visible) svg path { fill: #fff; }

/* Mini cart popup buttons: same style as global buttons (Checkout = primary yellow, View Cart = outline;
   fill rises from the bottom on hover). The popup sits outside #pxl-main so the global rules do not reach it. */
body.sitto-page .pxl-popup__footer-buttons { display: flex; flex-direction: column; gap: 12px; margin: 0; }
body.sitto-page .pxl-popup__footer-buttons a.btn {
    --fx-fill: #0B0D12; --fx-text: #fff;
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 52px; padding: 0 28px; margin: 0;
    border: 1px solid #FFC20F !important; border-radius: 999px !important;
    background: #FFC20F !important; color: #181D27 !important;
    font-size: 16px; font-weight: 600;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, color .35s ease, border-color .35s ease;
}
body.sitto-page .pxl-popup__footer-buttons a.btn:not(.checkout) {
    --fx-fill: #FFC20F; --fx-text: #181D27;
    background: transparent !important; border-color: #181D27 !important;
}
body.sitto-page .pxl-popup__footer-buttons a.btn::before { display: none !important; }
body.sitto-page .pxl-popup__footer-buttons a.btn::after {
    content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
    display: block !important; width: auto !important; height: auto !important; border-radius: inherit;
    background: var(--fx-fill) !important; opacity: 1 !important;
    transform: translateY(102%); transition: transform .45s cubic-bezier(.22,1,.36,1) !important; pointer-events: none;
}
body.sitto-page .pxl-popup__footer-buttons a.btn:is(:hover, :focus-visible) { transform: translateY(-2px); color: var(--fx-text) !important; border-color: var(--fx-fill) !important; }
body.sitto-page .pxl-popup__footer-buttons a.btn:is(:hover, :focus-visible)::after { transform: translateY(0); }
body.sitto-page .pxl-popup__footer-buttons a.btn:active { transform: translateY(0); }

/* Section intro text centred under a centred heading (e.g. Cash Register "Features & Benefits") */
.elementor-widget.sitto-intro-center {
	width: 100%;
	text-align: center;
}

.elementor-widget.sitto-intro-center .pxl-text-editor__inner {
	margin-left: auto;
	margin-right: auto;
}

/* Self-Service Terminal: product photo under the intro (soft card like the design) */
body.sitto-page #pxl-main .sitto-sst-photo img {
	width: 100%;
	border-radius: 24px;
	border: 1px solid var(--sitto-border, #E9EAEB);
	box-shadow: 0 30px 60px -30px rgba(24, 29, 39, 0.18);
	background: #FFFFFF;
}

.sitto-nowrap { white-space: nowrap; }

/* centred text block: centre the max-width inner too */
.sitto-text-center-block .pxl-text-editor__inner { margin-left: auto; margin-right: auto; }

/* step card title as a link (industry cards) */
.pxl-step__title-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.pxl-step__title-link svg { width: 20px; height: 20px; flex: none; transition: transform 0.3s ease; }
.pxl-step__title-link:hover svg { transform: translateX(4px); }

/* Self-Service Terminal "Why" heading: keep the highlighted product name on one line */
.elementor-element-sswd02 .pxl-heading__highlight-text,
.elementor-element-sswe02 .pxl-heading__highlight-text { white-space: nowrap; }