/* FIFA ARAB — Forest UI | Salla / Twilight
   Complete replacement. Responsive rules live with their component. */

/* ==========================================================
   01 — VARIABLES / COLORS / RESPONSIVE RADII
   ========================================================== */

:root {
    --fa-bg: #203027;
    --fa-bg-deep: #1a281f;
    --fa-surface: #283b30;
    --fa-surface-2: #304739;
    --fa-surface-3: #385340;
    --fa-surface-4: #3f5d47;
    --fa-primary: #5f8665;
    --fa-primary-2: #6f9673;
    --fa-primary-hover: #7ca27e;
    --fa-accent: #9eaf89;
    --fa-accent-soft: #bec8aa;
    --fa-text: #f5f7f4;
    --fa-text-soft: #dce4dd;
    --fa-muted: #c0cdc2;
    --fa-muted-2: #b3c2b7;
    --fa-border: rgba(219, 235, 221, .10);
    --fa-border-2: rgba(190, 210, 193, .18);
    --fa-border-3: rgba(178, 205, 181, .30);
    --fa-r-sm: 10px;
    --fa-r: 14px;
    --fa-r-lg: 19px;
    --fa-r-xl: 25px;
    --fa-shadow-sm: 0 8px 24px rgba(5, 13, 8, .12);
    --fa-shadow: 0 18px 48px rgba(5, 13, 8, .20);
    --fa-shadow-lg: 0 28px 80px rgba(4, 10, 6, .30);
    --fa-ease: cubic-bezier(.22, 1, .36, 1);
    --fa-fast: .22s var(--fa-ease);
    --fa-transition: .38s var(--fa-ease);
    --footer-bg: var(--fa-bg-deep) !important;
}

@media (max-width: 1024px) {
    :root {
        --fa-r-lg: 17px;
        --fa-r-xl: 22px;
    }
}

@media (max-width: 768px) {
    :root {
        --fa-r-sm: 8px;
        --fa-r: 11px;
        --fa-r-lg: 15px;
        --fa-r-xl: 18px;
    }
}

/* ==========================================================
   02 — GLOBAL / TYPOGRAPHY / SECTION SPACING
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body,
body[style] {
    background: radial-gradient( circle at 50% -10%, rgba(111, 150, 115, .13), transparent 620px ), linear-gradient( 180deg, var(--fa-bg) 0%, var(--fa-bg-deep) 100% ) !important;
    color: var(--fa-text) !important;
    overflow-x: hidden;
}

body,
button,
input,
textarea,
select {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--fa-primary-2);
    color: #fff;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--fa-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--fa-surface-4);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fa-primary-2);
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--fa-text) !important;
}

p {
    color: var(--fa-text-soft);
}

.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--fa-muted) !important;
}

@media (min-width: 1200px) {
    .s-block {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .s-block {
        margin-top: 28px;
    }
}

/* ==========================================================
   03 — HEADER
   ========================================================== */

.header-inner a,
.header-inner button,
.header-inner span {
    color: var(--fa-text-soft);
}

.header-inner i,
.header-inner svg,
#s-cart-icon,
#s-cart-icon *,
.s-cart-summary-count,
.s-cart-summary-total {
    color: var(--fa-text) !important;
    fill: currentColor !important;
}

.header-inner a,
.header-inner button {
    transition: color var(--fa-fast), opacity var(--fa-fast), transform var(--fa-fast);
}

.header-inner a:hover,
.header-inner button:hover {
    color: var(--fa-accent-soft) !important;
}

@media (hover: hover) {
    .header-inner a:hover i,
    .header-inner button:hover i {
        transform: translateY(-1px);
    }
}

/* ==========================================================
   04 — NAVIGATION / MOBILE MENU
   ========================================================== */

#mobile-menu,
nav#mobile-menu.mobile-menu,
nav#mobile-menu.mobile-menu.has-custom-bg {
    --menu-bg: #263b30;
    --menu-bg-deep: #203229;
    --menu-border: rgba(213, 229, 215, .085);
    --menu-accent: #8faa91;
    --menu-text: #eef3ee;
    --menu-muted: #aab9ad;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 390px) !important;
    max-width: 390px !important;
    background: radial-gradient( circle at 90% -5%, rgba(133, 168, 137, .13), transparent 240px ), linear-gradient( 180deg, var(--menu-bg) 0%, var(--menu-bg-deep) 100% ) !important;
    color: var(--menu-text) !important;
    border: 0 !important;
    border-inline-end: 1px solid rgba(218, 233, 220, .08) !important;
    box-shadow: -20px 0 60px rgba(3, 9, 5, .28) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 170, 146, .38) transparent;
    overscroll-behavior: contain;
    isolation: isolate;
}

/* soft ambient light */

#mobile-menu::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    inset-inline: 0;
    height: 210px;
    background: radial-gradient( ellipse at top, rgba(154, 181, 157, .065), transparent 70% );
    pointer-events: none;
}

/* remove old box feeling */

#mobile-menu ul,
#mobile-menu ol {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------
   HEADER AREA
   ------------------------------------------ */

#mobile-menu .fa-menu-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 12px 17px;
    background: linear-gradient( 180deg, rgba(38, 59, 48, .97), rgba(38, 59, 48, .91) );
    border-bottom: 1px solid var(--menu-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#mobile-menu .fa-menu-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#mobile-menu .fa-menu-title strong {
    color: var(--menu-text) !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

#mobile-menu .fa-menu-title span {
    color: var(--menu-muted) !important;
    font-size: 10px;
    line-height: 1.5;
}

/* close */

#mobile-menu .fa-menu-close {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--menu-text) !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(213, 229, 215, .10) !important;
    border-radius: 50% !important;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1) !important;
}

#mobile-menu .fa-menu-close:hover {
    background: rgba(143, 170, 146, .13) !important;
    border-color: rgba(193, 216, 196, .22) !important;
    transform: rotate(8deg);
}

#mobile-menu .fa-menu-close:active {
    transform: rotate(8deg) scale(.92);
}

/* custom X */

#mobile-menu .fa-menu-close::before,
#mobile-menu .fa-menu-close::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 1.5px;
    border-radius: 99px;
    background: currentColor;
}

#mobile-menu .fa-menu-close::before {
    transform: rotate(45deg);
}

#mobile-menu .fa-menu-close::after {
    transform: rotate(-45deg);
}

/* ------------------------------------------
   MENU BODY
   ------------------------------------------ */

#mobile-menu .fa-menu-body {
    padding: 13px 12px 25px;
}

/* hide unnecessary old decorative lines */

#mobile-menu .vertical-lines {
    display: none !important;
}

/* ------------------------------------------
   NAV ITEMS
   ------------------------------------------ */

#mobile-menu .fa-menu-item {
    position: relative;
    margin: 2px 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px;
    overflow: visible;
}

#mobile-menu .fa-menu-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 48px;
    padding: 9px 12px !important;
    margin: 0 !important;
    color: var(--menu-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    overflow: hidden;
    transition: color .24s ease, background .24s ease, border-color .24s ease, transform .3s cubic-bezier(.22,1,.36,1) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

/* accent marker */

#mobile-menu .fa-menu-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient( 180deg, #b0c2a1, #719276 );
    opacity: 0;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}

@media (hover: hover) {
    #mobile-menu .fa-menu-link:hover {
        color: #fff !important;
        background: linear-gradient( 90deg, rgba(139, 171, 143, .105), rgba(139, 171, 143, .025) ) !important;
        border-color: var(--menu-border) !important;
        transform: translateX(-3px);
    }

    #mobile-menu .fa-menu-link:hover::before {
        height: 21px;
        opacity: .9;
    }
}

/* active */

#mobile-menu .fa-menu-item.is-current > .fa-menu-link,
#mobile-menu .fa-menu-link[aria-current="page"] {
    color: #fff !important;
    background: linear-gradient( 90deg, rgba(127, 163, 132, .16), rgba(127, 163, 132, .035) ) !important;
    border-color: rgba(190, 213, 193, .11) !important;
}

#mobile-menu .fa-menu-item.is-current > .fa-menu-link::before,
#mobile-menu .fa-menu-link[aria-current="page"]::before {
    height: 23px;
    opacity: 1;
}

/* ------------------------------------------
   ITEM TEXT
   ------------------------------------------ */

#mobile-menu .fa-menu-link,
#mobile-menu .fa-menu-link span,
#mobile-menu .fa-menu-link strong {
    color: inherit !important;
}

/* ------------------------------------------
   ICONS
   ------------------------------------------ */

#mobile-menu .fa-menu-link i,
#mobile-menu .fa-menu-link svg {
    flex: 0 0 19px;
    width: 19px;
    color: var(--menu-muted) !important;
    fill: currentColor;
    opacity: .85;
    transition: color .25s ease, opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

#mobile-menu .fa-menu-link:hover i,
#mobile-menu .fa-menu-link:hover svg {
    color: var(--menu-accent) !important;
    opacity: 1;
}

/* ------------------------------------------
   SUBMENU ARROW
   ------------------------------------------ */

#mobile-menu .fa-menu-arrow {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-inline-start: auto;
    border-radius: 8px;
    color: var(--menu-muted);
    transition: color .25s ease, background .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}

#mobile-menu .fa-menu-arrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

#mobile-menu .fa-menu-item.is-open > .fa-menu-link .fa-menu-arrow {
    color: var(--menu-accent);
    background: rgba(143, 170, 146, .08);
    transform: rotate(180deg);
}

/* ------------------------------------------
   SUBMENUS
   ------------------------------------------ */

#mobile-menu .fa-submenu {
    display: grid !important;
    grid-template-rows: 0fr;
    margin: 0 8px;
    opacity: 0;
    transition: grid-template-rows .38s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}

#mobile-menu .fa-submenu > .fa-submenu-inner {
    min-height: 0;
    overflow: hidden;
}

#mobile-menu .fa-menu-item.is-open > .fa-submenu {
    grid-template-rows: 1fr;
    opacity: 1;
}

#mobile-menu .fa-submenu ul {
    position: relative;
    margin: 3px 0 7px;
    padding: 3px 10px 3px 0 !important;
    border-inline-start: 1px solid rgba(185, 208, 188, .09) !important;
}

#mobile-menu .fa-submenu a {
    min-height: 40px !important;
    padding: 7px 11px !important;
    color: var(--menu-muted) !important;
    font-size: 12.5px !important;
    border-radius: 9px !important;
}

#mobile-menu .fa-submenu a:hover {
    color: var(--menu-text) !important;
    background: rgba(139, 171, 143, .065) !important;
}

/* ------------------------------------------
   SEPARATORS
   ------------------------------------------ */

#mobile-menu .fa-menu-item + .fa-menu-item {
    border-top: 1px solid rgba(213, 229, 215, .045) !important;
}

/* ------------------------------------------
   MENU OPEN ANIMATION
   ------------------------------------------ */

#mobile-menu.fa-menu-v4 .fa-menu-item {
    opacity: 0;
    transform: translateX(10px);
}

#mobile-menu.fa-menu-v4.fa-menu-ready .fa-menu-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------
   REMOVE OLD SALLA BOX STYLES INSIDE MENU
   ------------------------------------------ */

#mobile-menu .bg-white,
#mobile-menu .bg-gray-50,
#mobile-menu .bg-gray-100,
#mobile-menu .bg-gray-200,
#mobile-menu .da-bgg,
#mobile-menu [class*="bg-"] {
    background-color: transparent !important;
}

#mobile-menu li,
#mobile-menu li:hover,
#mobile-menu li:focus {
    box-shadow: none !important;
}

/* ------------------------------------------
   TABLET
   ------------------------------------------ */

@media (min-width: 769px) and (max-width: 1100px) {
    #mobile-menu,
    nav#mobile-menu.mobile-menu {
        width: min(420px, 48vw) !important;
        max-width: 420px !important;
    }
}

/* ------------------------------------------
   MOBILE
   ------------------------------------------ */

@media (max-width: 768px) {
    #mobile-menu,
    nav#mobile-menu.mobile-menu,
    nav#mobile-menu.mobile-menu.has-custom-bg {
        width: min(88vw, 370px) !important;
        max-width: 370px !important;
    }

    #mobile-menu .fa-menu-header {
        min-height: 63px;
        padding: 10px 14px;
    }

    #mobile-menu .fa-menu-body {
        padding: 10px 9px 22px;
    }

    #mobile-menu .fa-menu-link {
        min-height: 46px;
        padding: 8px 11px !important;
        font-size: 13.5px;
    }

    #mobile-menu .fa-menu-close {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

/* ------------------------------------------
   VERY SMALL MOBILE
   ------------------------------------------ */

@media (max-width: 390px) {
    #mobile-menu,
    nav#mobile-menu.mobile-menu {
        width: 91vw !important;
    }

    #mobile-menu .fa-menu-title span {
        display: none;
    }
}

/* ------------------------------------------
   REDUCED MOTION
   ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    #mobile-menu .fa-menu-item {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    #mobile-menu a {
        min-height: 47px;
    }
}

/* ==========================================================
   05 — ACCOUNT DROPDOWN
   ========================================================== */

.s-user-menu-dropdown {
    background: linear-gradient( 160deg, #344d3e, #263a2f ) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border-2) !important;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
    box-shadow: var(--fa-shadow-lg);
}

.s-user-menu-dropdown-header {
    background: rgba(255,255,255,.025) !important;
    border-bottom: 1px solid var(--fa-border) !important;
}

.s-user-menu-dropdown-header,
.s-user-menu-dropdown-header * {
    color: var(--fa-text) !important;
}

.s-user-menu-dropdown-list-item,
.s-user-menu-dropdown-list-item a {
    color: var(--fa-text-soft) !important;
}

.s-user-menu-dropdown-list-item a {
    position: relative;
    border-radius: 10px;
    transition: color var(--fa-fast), background var(--fa-fast), transform var(--fa-fast);
}

.s-user-menu-dropdown-list-item a:hover {
    color: #fff !important;
    background: rgba(126, 162, 128, .14) !important;
    transform: translateX(-2px);
}

.s-user-menu-dropdown svg,
.s-user-menu-dropdown i {
    color: var(--fa-accent-soft) !important;
}

/* ==========================================================
   06 — SECTION TITLES
   ========================================================== */

.s-block__title,
.section-title {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 26px !important;
    padding-inline: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

.s-block__title::before,
.s-block__title::after,
.section-title::before,
.section-title::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    max-width: 38% !important;
    opacity: 1 !important;
    border: 0 !important;
    pointer-events: none;
}

/* Right line */

.s-block__title::before,
.section-title::before {
    margin-inline-end: 42px !important;
    background: linear-gradient( 90deg, rgba(159, 181, 159, .10) 0%, rgba(159, 181, 159, .30) 45%, rgba(180, 199, 179, .72) 100% ) !important;
}

/* Left line */

.s-block__title::after,
.section-title::after {
    margin-inline-start: 42px !important;
    background: linear-gradient( 90deg, rgba(180, 199, 179, .72) 0%, rgba(159, 181, 159, .30) 55%, rgba(159, 181, 159, .10) 100% ) !important;
}

.s-block__title > div,
.section-title > div {
    position: relative !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* مهم:
   إلغاء الـaccent اللي عملناه تحت العنوان في النسخة السابقة */

.s-block__title > div::before,
.s-block__title > div::after,
.section-title > div::before,
.section-title > div::after {
    content: none !important;
    display: none !important;
}

.s-block__title .vertical-lines,
.section-title .vertical-lines,
.fa-services-section .vertical-lines {
    display: none !important;
}

.s-block__title h2,
.s-block__title h3,
.section-title h2,
.section-title h3 {
    margin-inline: auto !important;
    text-align: center !important;
}

.s-block__title p,
.section-title p {
    margin-inline: auto !important;
    text-align: center !important;
}

@media (max-width: 1024px) {
    .s-block__title::before,
    .s-block__title::after,
    .section-title::before,
    .section-title::after {
        max-width: 30% !important;
    }

    .s-block__title::before,
    .section-title::before {
        margin-inline-end: 25px !important;
    }

    .s-block__title::after,
    .section-title::after {
        margin-inline-start: 25px !important;
    }
}

@media (max-width: 768px) {
    .s-block__title,
    .section-title {
        margin-bottom: 20px !important;
    }

    .s-block__title::before,
    .s-block__title::after,
    .section-title::before,
    .section-title::after {
        max-width: none !important;
        min-width: 20px !important;
        height: 1px !important;
    }

    .s-block__title::before,
    .section-title::before {
        margin-inline-end: 14px !important;
    }

    .s-block__title::after,
    .section-title::after {
        margin-inline-start: 14px !important;
    }
}

/* Very small screens */

@media (max-width: 390px) {
    .s-block__title::before,
    .s-block__title::after,
    .section-title::before,
    .section-title::after {
        min-width: 12px !important;
    }

    .s-block__title::before,
    .section-title::before {
        margin-inline-end: 9px !important;
    }

    .s-block__title::after,
    .section-title::after {
        margin-inline-start: 9px !important;
    }
}

@media (min-width: 1200px) {
    .s-block__title {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 1024px) {
    .s-block__title h2 {
        font-size: clamp(23px, 3vw, 30px) !important;
    }
}

@media (max-width: 768px) {
    .s-block__title {
        margin-bottom: 16px !important;
    }

    .s-block__title h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }

    .s-block__title p {
        font-size: 13px !important;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .s-block__title h2 {
        font-size: 20px !important;
    }
}

/* ==========================================================
   07 — HERO SLIDER
   ========================================================== */

section.s-block--hero-slider {
    /* * Hero always fills the real viewport width,
     * even when Salla adds .container to the section. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
}

/* Slider fills the section */

section.s-block--hero-slider > salla-slider,
section.s-block--hero-slider .s-slider-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}

/* Remove "round" effect from outer slider only */

section.s-block--hero-slider salla-slider.round,
section.s-block--hero-slider salla-slider.round .s-slider-container {
    border-radius: 0 !important;
}

section.s-block--hero-slider .swiper-slide > a,
section.s-block--hero-slider .swiper-slide > picture {
    width: 100% !important;
}

section.s-block--hero-slider .swiper-slide img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ==========================================================
   08 — BANNERS
   ========================================================== */

.s-block--photos-slider a:has(img),
.s-block--banners a:has(img),
.fa-banner-frame {
    position: relative;
    display: block;
    padding: 5px;
    background: linear-gradient( 135deg, rgba(149, 177, 152, .16), rgba(255,255,255,.018) 48%, rgba(112, 150, 116, .10) );
    border: 1px solid rgba(185, 207, 188, .18);
    border-radius: var(--fa-r-xl);
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(4, 11, 7, .14);
    transition: border-color var(--fa-transition), box-shadow var(--fa-transition), background var(--fa-transition);
}

.s-block--photos-slider a:has(img)::after,
.s-block--banners a:has(img)::after,
.fa-banner-frame::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 12%;
    width: 25%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(207, 224, 209, .70), transparent );
    opacity: .55;
    pointer-events: none;
}

.s-block--photos-slider a:has(img) img,
.s-block--banners a:has(img) img,
.fa-banner-frame img {
    display: block;
    width: 100%;
    border-radius: calc(var(--fa-r-xl) - 5px);
    transform: none !important;
    transition: filter var(--fa-transition) !important;
}

@media (hover: hover) {
    .s-block--photos-slider a:has(img):hover,
    .s-block--banners a:has(img):hover,
    .fa-banner-frame:hover {
        transform: none !important;
        border-color: rgba(192, 215, 195, .30);
        box-shadow: 0 19px 44px rgba(4, 11, 7, .19);
    }

    .s-block--photos-slider a:has(img):hover img,
    .s-block--banners a:has(img):hover img,
    .fa-banner-frame:hover img {
        transform: none !important;
        filter: brightness(1.015);
    }
}

@media (max-width: 768px) {
    .s-block--photos-slider a:has(img),
    .s-block--banners a:has(img),
    .fa-banner-frame {
        padding: 4px;
        border-radius: var(--fa-r-lg);
    }
}

/* ==========================================================
   09 — SPECIAL PRODUCT
   ========================================================== */

.s-block--special-product .da-bgg {
    background: linear-gradient( 140deg, var(--fa-surface-2), var(--fa-surface) ) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--fa-shadow);
}

.s-block--special-product h2 {
    color: var(--fa-text) !important;
}

.s-block--special-product p {
    color: var(--fa-muted) !important;
}

/* ==========================================================
   10 — SERVICES
   ========================================================== */

.fa-services-section {
    position: relative;
    isolation: isolate;
}

.fa-services-section span.vertical-lines {
    display: none !important;
}

.fa-services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
    align-items: stretch;
}

.fa-services-card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px;
    background: linear-gradient( 145deg, rgba(127, 164, 130, .14), rgba(255,255,255,.015) );
    border: 1px solid rgba(183, 207, 186, .18);
    border-radius: var(--fa-r-lg);
    overflow: hidden;
    box-shadow: 0 13px 32px rgba(4, 11, 7, .13);
    transition: transform var(--fa-transition), border-color var(--fa-transition), box-shadow var(--fa-transition), background var(--fa-transition);
}

.fa-services-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline-start: 16px;
    bottom: 0;
    width: 38px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient( 90deg, var(--fa-primary-2), transparent );
    opacity: .55;
    transition: width var(--fa-transition), opacity var(--fa-transition);
}

.fa-services-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
    border-radius: calc(var(--fa-r-lg) - 5px);
    transform: none !important;
    transition: filter var(--fa-transition) !important;
}

@media (hover: hover) {
    .fa-services-card:hover {
        transform: translateY(-4px);
        border-color: rgba(190, 214, 193, .30);
        box-shadow: 0 20px 44px rgba(4, 11, 7, .20);
        background: linear-gradient( 145deg, rgba(127, 164, 130, .20), rgba(255,255,255,.025) );
    }

    .fa-services-card:hover::before {
        width: 72px;
        opacity: .9;
    }

    .fa-services-card:hover img {
        transform: none !important;
        filter: brightness(1.025);
    }
}

@media (min-width: 1200px) {
    .fa-services-grid {
        gap: 20px !important;
    }
}

@media (max-width: 1024px) {
    .fa-services-grid {
        gap: 14px !important;
    }

    .fa-services-card img {
        min-height: 170px;
    }
}

@media (max-width: 768px) {
    .fa-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }

    .fa-services-card img {
        min-height: 0;
        aspect-ratio: auto;
    }
}

/* ==========================================================
   11 — STORE FEATURES / PRODUCT FEATURE TILES
   ========================================================== */

.angel-feature {
    padding: 22px !important;
}

/* الدائرة الهادية القديمة في الركن */

.angel-feature::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    inset-inline-end: -45px;
    top: -45px;
    border-radius: 50%;
    background: rgba(163, 177, 138, .08);
    pointer-events: none;
    transition: transform .5s var(--fa-ease), opacity .5s ease;
}

/* إلغاء الخط الرأسي الموجود في التصميم الحالي */

.angel-feature::before {
    display: none !important;
    content: none !important;
}

/* الأيقونة */

.angel-feature i,
.angel-feature svg {
    position: relative;
    z-index: 2;
    color: var(--fa-text) !important;
    fill: currentColor;
    transition: color .35s ease, transform .4s var(--fa-ease);
}

/* الرقم / العنوان */

.angel-feature h3,
.angel-feature h4,
.angel-feature strong {
    position: relative;
    z-index: 2;
    color: var(--fa-text) !important;
}

/* الوصف */

.angel-feature p,
.angel-feature span {
    position: relative;
    z-index: 2;
    color: var(--fa-muted) !important;
}

/* Hover القديم ولكن أنعم */

@media (hover: hover) {
    .angel-feature:hover::after {
        transform: scale(1.5);
        opacity: 1;
    }

    .angel-feature:hover i,
    .angel-feature:hover svg {
        color: var(--fa-accent-2) !important;
        transform: translateY(-2px);
    }
}

/* Tablet */

/* Mobile */

/* Small Mobile */

.p--features__item,
.angel-feature {
    position: relative;
    background: linear-gradient( 145deg, var(--fa-surface-2), var(--fa-surface) ) !important;
    color: var(--fa-text);
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
    box-shadow: var(--fa-shadow-sm);
    transition: transform var(--fa-transition), border-color var(--fa-transition), box-shadow var(--fa-transition), background var(--fa-transition);
}

.p--features__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 25%;
    width: 2px;
    height: 50%;
    border-radius: 999px;
    background: linear-gradient( 180deg, var(--fa-accent), var(--fa-primary-2) );
    opacity: .65;
    transition: height var(--fa-fast), top var(--fa-fast);
}

@media (hover: hover) {
    .p--features__item:hover,
    .angel-feature:hover {
        transform: translateY(-4px);
        background: linear-gradient( 145deg, var(--fa-surface-3), var(--fa-surface-2) ) !important;
        border-color: var(--fa-border-2) !important;
        box-shadow: var(--fa-shadow);
    }

    .p--features__item:hover::before {
        top: 18%;
        height: 64%;
    }
}

.p--features__item h3,
.p--features__item h4,
.angel-feature h3,
.angel-feature h4 {
    color: var(--fa-text) !important;
}

.p--features__item p,
.angel-feature p {
    color: var(--fa-muted) !important;
}

@media (max-width: 1024px) {
    .angel-feature,
    .p--features__item {
        padding: 18px !important;
    }
}

@media (max-width: 768px) {
    .angel-feature,
    .p--features__item {
        padding: 15px !important;
    }
}

@media (max-width: 480px) {
    .angel-feature,
    .p--features__item {
        padding: 13px !important;
    }
}

/* ==========================================================
   12 — CUSTOMER REVIEWS
   ========================================================== */

/* ----------------------------------------------------------
   CARD
   نحافظ على تصميم الثيم الأصلي ومقاساته
   ---------------------------------------------------------- */

.s-block--testimonials .bg-white,
.s-block--testimonials .da-bgg {
    position: relative !important;
    background: linear-gradient( 145deg, #304a3a 0%, #293f33 100% ) !important;
    color: #f2f5f1 !important;
    border: 1px solid rgba(172, 197, 175, .14) !important;
    /* * Touch بسيط:
     * inner highlight خفيف جدًا بدل أي decorations. */
    box-shadow: 0 8px 20px rgba(4, 11, 7, .09), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), background .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}

/* ----------------------------------------------------------
   مهم:
   إلغاء كل الـdecorations اللي جربناها قبل كده
   ---------------------------------------------------------- */

.s-block--testimonials .bg-white::before,
.s-block--testimonials .bg-white::after,
.s-block--testimonials .da-bgg::before,
.s-block--testimonials .da-bgg::after {
    content: none !important;
    display: none !important;
}

/* ----------------------------------------------------------
   AVATAR
   لا نغير الحجم ولا المكان ولا الشكل الأصلي
   ---------------------------------------------------------- */

.s-block--testimonials .bg-white img,
.s-block--testimonials .da-bgg img {
    box-shadow: 0 5px 14px rgba(3, 9, 5, .13) !important;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s ease !important;
}

/* ----------------------------------------------------------
   NAME
   ---------------------------------------------------------- */

.s-block--testimonials h3,
.s-block--testimonials h4,
.s-block--testimonials strong {
    color: #eef3ee !important;
}

/* ----------------------------------------------------------
   REVIEW TEXT
   ---------------------------------------------------------- */

.s-block--testimonials p,
.s-block--testimonials .da-tm {
    color: #c5d0c7 !important;
}

/* النصوص الثانوية فقط */

.s-block--testimonials small {
    color: #aebdaf !important;
}

/* ----------------------------------------------------------
   STARS
   نفس شكل الثيم — تغيير لون فقط
   ---------------------------------------------------------- */

.s-block--testimonials .sicon-star,
.s-block--testimonials .sicon-star2,
.s-block--testimonials [class*="star"] {
    color: #f4b928 !important;
    fill: #f4b928 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* * مهم جدًا:
 * لو بقايا CSS قديم كانت عاملة صندوق حوالين النجوم
 * نرجعهم لطبيعة الثيم. */

.s-block--testimonials .stars,
.s-block--testimonials [class*="rating"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------
   QUOTE ICON
   لو الثيم عنده quote أصلي نخليه هادي فقط
   ---------------------------------------------------------- */

.s-block--testimonials .sicon-quote {
    color: rgba(190, 207, 191, .10) !important;
}

/* ----------------------------------------------------------
   HOVER
   Touch صغير جدًا
   ---------------------------------------------------------- */

@media (hover: hover) {
    .s-block--testimonials .bg-white:hover,
    .s-block--testimonials .da-bgg:hover {
        transform: translateY(-3px);
        background: linear-gradient( 145deg, #334f3e 0%, #2c4436 100% ) !important;
        border-color: rgba(180, 205, 183, .22) !important;
        box-shadow: 0 12px 25px rgba(4, 11, 7, .13), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    }

    .s-block--testimonials .bg-white:hover img,
    .s-block--testimonials .da-bgg:hover img {
        transform: translateY(-2px);
        box-shadow: 0 7px 17px rgba(3, 9, 5, .17) !important;
    }
}

/* ----------------------------------------------------------
   PAGINATION
   نحافظ على الشكل الأصلي ونغير اللون فقط
   ---------------------------------------------------------- */

.s-block--testimonials .swiper-pagination-bullet {
    background: rgba(168, 190, 170, .22) !important;
    opacity: 1 !important;
}

.s-block--testimonials .swiper-pagination-bullet-active {
    background: #a4b69f !important;
}

/* لو الثيم بيستخدم progressbar بدل bullets */

.s-block--testimonials .swiper-pagination-progressbar {
    background: rgba(8, 18, 12, .20) !important;
}

.s-block--testimonials .swiper-pagination-progressbar-fill {
    background: #a4b69f !important;
}

/* ----------------------------------------------------------
   MOBILE
   لا نغير أي dimensions
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    .s-block--testimonials .bg-white,
    .s-block--testimonials .da-bgg {
        box-shadow: 0 6px 16px rgba(4, 11, 7, .08), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
    }
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .s-block--testimonials .bg-white,
    .s-block--testimonials .da-bgg,
    .s-block--testimonials img {
        transition: none !important;
    }
}

/* ==========================================================
   13 — FAQ
   ========================================================== */

.faqs-list__item,
.faqs-list__item.bg-gray-100 {
    position: relative;
    margin-bottom: 11px;
    background: linear-gradient( 145deg, var(--fa-surface-2), var(--fa-surface) ) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
    box-shadow: 0 7px 22px rgba(4, 11, 7, .09);
    transition: background var(--fa-transition), border-color var(--fa-transition), transform var(--fa-transition), box-shadow var(--fa-transition);
}

@media (hover: hover) {
    .faqs-list__item:hover {
        background: linear-gradient( 145deg, var(--fa-surface-3), var(--fa-surface-2) ) !important;
        border-color: var(--fa-border-2) !important;
        transform: translateY(-2px);
        box-shadow: var(--fa-shadow-sm);
    }
}

.faqs-list__item label,
.faqs-list__item label * {
    color: var(--fa-text) !important;
}

.faqs-list__item .answer-container,
.faqs-list__item .answer-container *,
.s-block--faqs .answer-container,
.s-block--faqs .answer-container * {
    color: var(--fa-text-soft) !important;
}

.s-block--faqs i,
.s-block--faqs i::before {
    color: var(--fa-accent) !important;
}

/* ==========================================================
   14 — FORMS / NATIVE CONTROLS
   ========================================================== */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.s-form-control,
.form-select,
.s-product-options-option-content select,
.s-product-options-text input,
textarea[name="notes"] {
    background: linear-gradient( 180deg, rgba(42, 62, 50, .95), rgba(36, 54, 43, .95) ) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border-2) !important;
    border-radius: var(--fa-r) !important;
    min-height: 50px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color var(--fa-fast), box-shadow var(--fa-fast), background var(--fa-fast), transform var(--fa-fast);
}

textarea {
    min-height: 116px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--fa-muted-2) !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus,
.s-form-control:focus {
    outline: none !important;
    background: var(--fa-surface-2) !important;
    border-color: rgba(126, 162, 128, .75) !important;
    box-shadow: 0 0 0 4px rgba(126, 162, 128, .10), 0 10px 28px rgba(4, 11, 7, .10) !important;
}

.s-product-options-option-label,
.s-product-options-option-label b,
.product-form label,
.product-form label * {
    color: var(--fa-text) !important;
}

.s-product-options-option-label small {
    color: var(--fa-muted) !important;
}

@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    .s-form-control {
        min-height: 46px;
    }
}

/* ==========================================================
   15 — DROPDOWNS / CUSTOM SELECTS
   ========================================================== */

.fa-select {
    position: relative;
    width: 100%;
    z-index: 10;
}

.fa-select.is-open {
    z-index: 80;
}

.fa-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

.fa-select__trigger {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 15px;
    background: linear-gradient( 180deg, var(--fa-surface-2), #2a4033 );
    color: var(--fa-text);
    border: 1px solid var(--fa-border-2);
    border-radius: var(--fa-r);
    cursor: pointer;
    text-align: start;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color var(--fa-fast), box-shadow var(--fa-fast), background var(--fa-fast);
}

.fa-select__trigger:hover {
    border-color: var(--fa-border-3);
    background: var(--fa-surface-3);
}

.fa-select.is-open .fa-select__trigger {
    border-color: var(--fa-primary-hover);
    box-shadow: 0 0 0 4px rgba(126, 162, 128, .10);
}

.fa-select__value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fa-select__chevron {
    position: relative;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-inline-end: 2px solid var(--fa-accent-soft);
    border-bottom: 2px solid var(--fa-accent-soft);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--fa-transition);
}

.fa-select.is-open .fa-select__chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

.fa-select__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: linear-gradient( 180deg, #344d3e, #293e32 );
    border: 1px solid var(--fa-border-2);
    border-radius: 15px;
    box-shadow: 0 22px 55px rgba(4, 10, 6, .32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    transform-origin: top center;
    transition: opacity var(--fa-fast), visibility var(--fa-fast), transform var(--fa-fast);
    scrollbar-width: thin;
    scrollbar-color: var(--fa-primary) transparent;
}

.fa-select.is-open .fa-select__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.fa-select__option {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 8px 11px;
    color: var(--fa-text-soft);
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: start;
    transition: color var(--fa-fast), background var(--fa-fast), padding var(--fa-fast);
}

.fa-select__option:hover,
.fa-select__option.is-focused {
    color: #fff;
    background: rgba(126, 162, 128, .15);
    padding-inline-start: 14px;
}

.fa-select__option.is-selected {
    color: #fff;
    background: linear-gradient( 90deg, rgba(111, 150, 115, .34), rgba(111, 150, 115, .12) );
}

.fa-select__option:disabled {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .fa-select__trigger {
        min-height: 46px;
    }

    .fa-select__menu {
        max-height: 220px;
    }
}

/* Native dropdowns retain platform behavior and existing dimensions. */

select:not(.fa-select__native) {
    color-scheme: dark;
}

select:not(.fa-select__native) option,
select:not(.fa-select__native) optgroup {
    background-color: var(--fa-surface-2);
    color: var(--fa-text);
}

select:not(.fa-select__native):enabled:hover {
    border-color: var(--fa-border-3) !important;
}

.fa-select__trigger:focus-visible {
    outline: 2px solid var(--fa-primary-hover);
    outline-offset: 2px;
}

.fa-select__trigger:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ==========================================================
   16 — SHARED BUTTONS
   ========================================================== */

.s-button-primary,
button.s-button-primary,
.s-button-element:not(:disabled):not([loading]) {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #52775a, #668e6b ) !important;
    color: #fff !important;
    border: 1px solid rgba(215, 234, 217, .14) !important;
    border-radius: var(--fa-r) !important;
    box-shadow: 0 9px 24px rgba(8, 23, 13, .15);
    transition: transform var(--fa-fast), box-shadow var(--fa-fast), background var(--fa-fast), border-color var(--fa-fast) !important;
}

.s-button-primary *,
.s-button-element:not(:disabled):not([loading]) * {
    color: inherit !important;
}

.s-button-primary::before,
.s-button-element:not(:disabled):not([loading])::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -35%;
    width: 28%;
    height: 340%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.14), transparent );
    transform: rotate(20deg);
    pointer-events: none;
    transition: left .65s var(--fa-ease);
}

@media (hover: hover) {
    .s-button-primary:not(:disabled):hover,
    .s-button-element:not(:disabled):not([loading]):hover {
        background: linear-gradient( 135deg, #628a67, #789e7a ) !important;
        border-color: rgba(219, 238, 221, .28) !important;
        transform: translateY(-2px);
        box-shadow: 0 14px 32px rgba(9, 29, 16, .22);
    }

    .s-button-primary:hover::before,
    .s-button-element:not(:disabled):not([loading]):hover::before {
        left: 120%;
    }
}

.s-button-primary:active,
.s-button-element:not(:disabled):not([loading]):active {
    transform: scale(.975) !important;
}

/* ==========================================================
   17 — PRODUCT CARDS
   ========================================================== */

.s-product-card-entry {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: linear-gradient( 160deg, var(--fa-surface-2) 0%, var(--fa-surface) 100% ) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden !important;
    isolation: isolate;
    box-shadow: var(--fa-shadow-sm);
    transition: transform .42s var(--fa-ease), border-color .42s var(--fa-ease), box-shadow .42s var(--fa-ease);
}

.s-product-card-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient( circle at 100% 0, rgba(158, 175, 137, .11), transparent 38% );
    opacity: 0;
    transition: opacity .42s ease;
}

.s-product-card-entry::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 18%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(190, 211, 192, .45), transparent );
    opacity: .45;
    pointer-events: none;
}

@media (hover: hover) {
    .s-product-card-entry:hover {
        transform: translateY(-6px);
        border-color: rgba(183, 207, 186, .24) !important;
        box-shadow: 0 23px 52px rgba(5, 13, 8, .23);
    }

    .s-product-card-entry:hover::before {
        opacity: 1;
    }
}

.s-product-card-image {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.018);
}

.s-product-card-image img {
    transition: transform .65s var(--fa-ease), filter .65s ease;
}

@media (hover: hover) {
    .s-product-card-entry:hover .s-product-card-image img {
        transform: scale(1.025);
        filter: brightness(1.025);
    }
}

.s-product-card-content {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: transparent !important;
    color: var(--fa-text) !important;
}

.s-product-card-content-main {
    flex: 1;
}

.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-entry h3,
.s-product-card-entry h3 a {
    color: var(--fa-text) !important;
    line-height: 1.55 !important;
}

.s-product-card-category {
    display: inline-flex;
    width: fit-content;
    color: var(--fa-accent-soft) !important;
    background: rgba(158, 175, 137, .09);
    border: 1px solid rgba(181, 202, 183, .13);
    border-radius: 999px;
    padding: 4px 9px;
}

.s-product-card-price,
.s-product-card-sale-price {
    color: var(--fa-text) !important;
}

.s-product-card-wishlist-btn,
.s-product-card-wishlist-btn .sicon-heart {
    color: var(--fa-text-soft) !important;
    transition: color var(--fa-fast), transform var(--fa-fast), background var(--fa-fast);
}

@media (hover: hover) {
    .s-product-card-wishlist-btn:hover {
        color: #fff !important;
        transform: translateY(-2px);
    }
}

/* Product card CTA */

.s-product-card-content-footer salla-add-product-button {
    display: block;
    width: 100%;
    border-radius: var(--fa-r);
    overflow: hidden;
}

.s-product-card-content-footer salla-add-product-button button {
    width: 100%;
    min-height: 44px;
    color: var(--fa-text) !important;
    background: linear-gradient( 180deg, rgba(105, 143, 109, .10), rgba(105, 143, 109, .04) ) !important;
    border: 1px solid rgba(166, 196, 169, .22) !important;
    border-radius: var(--fa-r) !important;
    transition: transform var(--fa-fast), color var(--fa-fast), background var(--fa-fast), border-color var(--fa-fast), box-shadow var(--fa-fast) !important;
}

.s-product-card-content-footer salla-add-product-button button * {
    color: inherit !important;
}

@media (hover: hover) {
    .s-product-card-content-footer salla-add-product-button:hover button {
        color: #fff !important;
        background: linear-gradient( 135deg, #54795b, #6d946f ) !important;
        border-color: rgba(190, 216, 192, .36) !important;
        transform: translateY(-2px);
        box-shadow: 0 11px 26px rgba(7, 24, 13, .20);
    }
}

.s-product-card-content-footer salla-add-product-button:active button {
    transform: scale(.975);
}

@media (max-width: 768px) {
    .s-product-card-entry:hover {
        transform: none;
    }

    .s-product-card-entry:hover .s-product-card-image img {
        transform: none;
    }

    .s-product-card-entry:active {
        transform: scale(.992);
    }
}

@media (max-width: 480px) {
    .s-product-card-category {
        font-size: 11px;
    }
}

/* ==========================================================
   18 — PRODUCT FORM / TABS / ACTION BAR
   ========================================================== */

.product-form {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    color: var(--fa-text);
}

.tabs-wrapper,
.tabs-wrapper__product,
#product-tabs-options,
.details,
.details.total,
.details.is-sold {
    background: linear-gradient( 160deg, var(--fa-surface-2), var(--fa-surface) ) !important;
    color: var(--fa-text) !important;
    border-color: var(--fa-border) !important;
}

.tabs-wrapper__product,
#product-tabs-options {
    border: 1px solid var(--fa-border) !important;
    border-radius: 0 0 var(--fa-r-lg) var(--fa-r-lg);
    overflow: hidden;
}

.tabs__product {
    gap: 6px;
}

.tabs__product .tab-trigger,
.btn-tab.btn--collapse {
    background: var(--fa-surface-2) !important;
    color: var(--fa-text-soft) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-sm) var(--fa-r-sm) 0 0 !important;
    transition: color var(--fa-fast), background var(--fa-fast), transform var(--fa-fast), border-color var(--fa-fast);
}

.tabs__product .tab-trigger:hover,
.tabs__product .tab-trigger.is-active,
.tabs__product .tab-trigger.active {
    background: var(--fa-surface-3) !important;
    color: #fff !important;
    border-color: var(--fa-border-2) !important;
}

.details.is-sold,
.details.total {
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.details__title,
.total-price,
.details__container span,
.sold-count {
    color: var(--fa-text) !important;
}

@media (max-width: 768px) {
    .tabs__product {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .tabs__product::-webkit-scrollbar {
        display: none;
    }

    .tabs__product .tab-trigger {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* The full description remains available in the Details tab. */

.product-single .main-content > .short__description {
    display: none !important;
}

/* Existing purchase bar stays in the product form, never at the viewport edge. */

.product-form > .sticky-product-bar {
    order: 99 !important;
}

.sticky-product-bar,
.sticky-product-bar.fa-inline-product-bar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100%;
    z-index: auto !important;
    transform: none !important;
    opacity: 1 !important;
    background: linear-gradient(160deg, var(--fa-surface-2), var(--fa-surface)) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    padding: 20px !important;
    margin: 16px 0 0 !important;
}

.fa-inline-product-bar > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
}

.fa-inline-product-bar > .container > div:first-child:not(.sticky-product-bar__quantity):not(:has(salla-quantity-input)) {
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0;
}

.fa-inline-product-bar :is(.sticky-product-bar__quantity, salla-quantity-input) {
    flex: 0 0 auto;
    width: 144px;
    max-width: 100%;
}

.fa-inline-product-bar .sticky-product-bar__quantity salla-quantity-input {
    width: 100%;
}

.fa-inline-product-bar salla-add-product-button {
    display: flex !important;
    flex: 1 1 260px !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 10px !important;
    align-items: stretch;
}

.fa-inline-product-bar salla-add-product-button > * {
    min-width: 0;
}

.fa-inline-product-bar salla-add-product-button > :is(salla-button, salla-quick-buy, button) {
    flex: 1 1 0;
    width: auto !important;
}

.fa-inline-product-bar salla-add-product-button button {
    min-height: 46px;
    width: 100%;
    white-space: normal;
    padding-inline: 12px !important;
}

.fa-inline-product-bar .s-quantity-input-input {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    min-height: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.fa-inline-product-bar .s-quantity-input-container {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    width: 100%;
    border: 1px solid var(--fa-border-3);
    border-radius: var(--fa-r-sm);
    overflow: hidden;
}

.fa-inline-product-bar .s-quantity-input-button {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    color: var(--fa-text) !important;
    background: transparent !important;
}

@media (max-width: 480px) {
    .fa-inline-product-bar salla-add-product-button {
        flex-basis: 100% !important;
    }
}

.fa-inline-product-bar salla-add-product-button,
.fa-inline-product-bar .sticky-product-bar__quantity {
    transform: none !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .sticky-product-bar,
    .sticky-product-bar.fa-inline-product-bar {
        min-height: auto;
        margin: 13px 0 4px !important;
        padding: 11px !important;
    }
}

/* ==========================================================
   19 — PRODUCT GALLERY
   ========================================================== */

.fa-product-gallery {
    position: relative;
    padding: 7px;
    background: linear-gradient( 145deg, rgba(114, 153, 118, .17), rgba(158, 175, 137, .045) 45%, rgba(255,255,255,.015) );
    border: 1px solid rgba(184, 207, 187, .20);
    border-radius: var(--fa-r-xl);
    box-shadow: 0 20px 50px rgba(4, 11, 7, .16);
    isolation: isolate;
    overflow: hidden;
}

.fa-product-gallery::before {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline-start: 9%;
    width: 28%;
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(204, 220, 191, .72), transparent );
    opacity: .65;
    pointer-events: none;
    z-index: 3;
}

.fa-product-gallery::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    inset-inline-end: -55px;
    bottom: -55px;
    border: 1px solid rgba(172, 198, 175, .13);
    border-radius: 50%;
    pointer-events: none;
}

.fa-product-gallery img {
    border-radius: calc(var(--fa-r-xl) - 6px);
    transform: none !important;
    transition: filter var(--fa-transition) !important;
}

@media (hover: hover) {
    .fa-product-gallery:hover {
        border-color: rgba(190, 215, 193, .30);
        box-shadow: 0 24px 58px rgba(4, 11, 7, .21);
    }

    .fa-product-gallery:hover img {
        transform: none !important;
        filter: brightness(1.015);
    }
}

/* ==========================================================
   20 — NATIVE PAYMENT DISPLAY
   ========================================================== */

.s-block--payment {
    background: linear-gradient( 145deg, var(--fa-surface-2), var(--fa-surface) ) !important;
    color: var(--fa-text);
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    box-shadow: var(--fa-shadow-sm);
}

.s-block--payment ul {
    gap: 7px !important;
}

.s-block--payment li {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
}

/* ==========================================================
   21 — MODALS / LOGIN
   ========================================================== */

.s-modal-body,
.s-modal-body.s-modal-align-middle {
    background: radial-gradient( circle at 100% 0, rgba(126, 162, 128, .11), transparent 260px ), linear-gradient( 155deg, #344d3e, #26392e ) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border-2) !important;
    border-radius: var(--fa-r-xl) !important;
    box-shadow: var(--fa-shadow-lg);
}

.s-modal-title,
.s-modal-title * {
    color: var(--fa-text) !important;
}

.s-modal-body label,
.s-modal-body label * {
    color: var(--fa-text-soft) !important;
}

.s-modal-body p,
.s-modal-body small {
    color: var(--fa-muted) !important;
}

.s-modal-body input {
    background: #293f32 !important;
    color: var(--fa-text) !important;
}

.s-modal-body button:not(.s-button-primary) {
    border-color: var(--fa-border-2);
}

.s-modal-close,
.s-modal-close * {
    color: var(--fa-text) !important;
}

@media (max-width: 768px) {
    .s-modal-body,
    .s-modal-body.s-modal-align-middle {
        border-radius: var(--fa-r-xl) !important;
    }
}

/* ==========================================================
   22 — ACCOUNT / ORDERS
   ========================================================== */

.account-layout,
.profile,
.profile-content,
.profile-page,
.orders-page {
    color: var(--fa-text) !important;
}

.account-layout .bg-white,
.profile .bg-white,
.profile-page .bg-white,
.orders-page .bg-white {
    background: var(--fa-surface) !important;
    color: var(--fa-text) !important;
    border-color: var(--fa-border) !important;
}

.s-table {
    background: var(--fa-surface) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
}

.s-table thead,
.s-table thead tr,
.s-table thead th {
    background: var(--fa-surface-3) !important;
    color: var(--fa-text) !important;
    border-color: var(--fa-border) !important;
}

.s-table tbody tr,
.s-table tbody tr.s-table__tr {
    background: var(--fa-surface) !important;
    color: var(--fa-text-soft) !important;
    border-color: var(--fa-border) !important;
    transition: background var(--fa-fast);
}

.s-table tbody tr:hover,
.s-table tbody tr.s-table__tr:hover {
    background: var(--fa-surface-2) !important;
}

.s-table td,
.s-table th {
    color: inherit !important;
    border-color: var(--fa-border) !important;
}

.s-table td *,
.s-table th * {
    color: inherit;
}

/* ==========================================================
   23 — CART
   ========================================================== */

.cart-item {
    background: linear-gradient( 145deg, var(--fa-surface-2), var(--fa-surface) ) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: var(--fa-r-lg) !important;
    box-shadow: var(--fa-shadow-sm);
}

.cart-item h1,
.cart-item h2,
.cart-item h3,
.cart-item .cart-item-title {
    color: var(--fa-text) !important;
}

.cart-item span,
.cart-item p {
    color: var(--fa-text-soft);
}

/* ==========================================================
   24 — LOCALIZATION
   ========================================================== */

.s-localization-modal-select {
    background: var(--fa-surface-2) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border-2) !important;
    border-radius: var(--fa-r) !important;
}

.s-localization-modal-title {
    color: var(--fa-text) !important;
}

/* ==========================================================
   25 — FOOTER
   ========================================================== */

.store-footer__inner,
.store-footer__inner.da-bgm,
.store-footer__inner.da-bgm.has-custom-bg {
    background: linear-gradient( 180deg, #213128, #18251d ) !important;
    color: var(--fa-text-soft) !important;
    border-top: 1px solid var(--fa-border) !important;
}

.store-footer__inner h3,
.store-footer__inner h4 {
    color: var(--fa-text) !important;
}

.store-footer__inner p,
.store-footer__inner a {
    color: var(--fa-muted) !important;
}

.store-footer__inner a:hover {
    color: var(--fa-accent-soft) !important;
}

.s-social-link a {
    transition: transform var(--fa-fast), opacity var(--fa-fast);
}

.s-social-link a:hover {
    transform: translateY(-3px);
}

/* ==========================================================
   26 — THEME COMPATIBILITY
   ========================================================== */

.flex.flex-col.bg-gray-100.da-bgg.relative {
    background: transparent !important;
}

/* Don't globally recolor all .da-bgg anymore */

/* ==========================================================
   27 — SCROLL REVEAL
   ========================================================== */

.fa-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .65s var(--fa-ease), transform .65s var(--fa-ease);
}

.fa-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .fa-reveal {
        transform: translateY(9px);
    }
}

/* ==========================================================
   28 — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .fa-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   29 — HEADER / HERO CASCADE OVERRIDES
   ========================================================== */

/* Kept last: these existing ancestor selectors intentionally override shared theme/component styles. Moving them earlier changes the cascade. */

header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.header-inner,
.header-inner.inner,
.header-inner.inner.bg-white,
header .header-inner {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Remove possible Salla background classes */

header .bg-white,
header .da-bgg,
header [class*="has-custom-bg"] {
    background: transparent !important;
}

main,
.app-inner,
main:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* First hero starts at very top */

main > section.s-block--hero-slider:first-child,
main section.s-block--hero-slider:first-of-type {
    margin-top: 0 !important;
}

header .header-inner a,
header .header-inner button,
header .header-inner span,
header .header-inner i,
header .header-inner svg {
    color: #fff !important;
}

@media (max-width: 767px) {
    /* * Don't add any mobile side padding.
     * Image touches both screen edges. */

    section.s-block--hero-slider {
        width: 100vw !important;
        max-width: 100vw !important;
        padding-inline: 0 !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }

    /* Keep header above banner */

    header {
        top: 0 !important;
    }

    /* Optional compact mobile header */

    header .header-inner {
        min-height: 64px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Internal pages need a header in document flow, unlike the home hero. */

body:not(.index):not(.product-single) header {
    position: relative !important;
    inset: auto !important;
}

.page-single .content--single-page.opt-text {
    background: var(--fa-surface) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-r-lg);
}

.page-single .content-entry {
    color: var(--fa-text) !important;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.page-single .content-entry :is(p, li, strong, h2, h3, span) {
    color: inherit !important;
}

.page-single .content-entry a {
    color: var(--fa-accent-soft) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s-orders-table,
.s-orders-table-tbody-tr,
.s-orders-table-tbody-tr-td,
.s-order-totals-card-panel,
.s-user-settings-wrapper,
.s-cart-summary-content,
.s-cart-summary-card,
.s-cart-coupons-card {
    background: var(--fa-surface) !important;
    color: var(--fa-text) !important;
    border-color: var(--fa-border) !important;
}

.s-orders-table-head,
.s-orders-table-head-tr-th {
    background: var(--fa-surface-2) !important;
    color: var(--fa-text) !important;
}

.s-orders-table-tbody-tr-td-content,
.s-orders-reference-id,
.s-orders-mobile-title,
.s-order-totals-card-label,
.s-order-totals-card-value,
.s-user-settings-section-title,
.s-user-settings-section-subtitle {
    color: var(--fa-text) !important;
}

.faq-container > input:checked + .faqs-list__item {
    border-color: var(--fa-primary-hover) !important;
    background: var(--fa-surface-2) !important;
    box-shadow: inset 0 0 0 1px var(--fa-border-2);
}

.faq-container > input:checked + .faqs-list__item label {
    color: var(--fa-accent-soft) !important;
}

.faqs-list__item .faq-answer {
    color: var(--fa-text) !important;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.tabs__product .tab-trigger:is(.active, .is-active, [aria-selected="true"]) {
    background: var(--fa-surface-3) !important;
    color: var(--fa-text) !important;
    box-shadow: inset 0 -3px 0 var(--fa-primary-hover);
}

.s-product-card-content-footer salla-add-product-button button:not(:disabled) {
    background: var(--fa-primary) !important;
    color: #fff !important;
    border-color: var(--fa-primary-hover) !important;
}

.s-product-card-content-main {
    min-height: 0;
}

.s-product-card-content:not(:has(.s-product-card-price, .s-product-card-sale-price)) .s-product-card-content-main {
    flex: 0 1 auto;
}

.s-block--faqs .s-block__title h2 {
    color: var(--fa-text) !important;
}

.s-product-card-content-footer {
    margin-top: 12px;
}

.page-single .content-entry :is(h2, h3, h4) {
    margin-block: 1em .4em;
    line-height: 1.5;
}

.page-single .content-entry :is(p, ul, ol) {
    margin-block: 0 .25em;
}

.page-single .content-entry :is(ul, ol) {
    padding-inline-start: 1.4em;
}

.faqs-list__item:focus-within,
.tabs__product .tab-trigger:focus-visible {
    outline: 2px solid var(--fa-primary-hover);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .faq-container > input:checked + .faqs-list__item {
        border-radius: var(--fa-r-lg);
    }
}

.fa-mobile-nav {
    display: none;
}

#mobile-menu .fa-menu-item.has-submenu::before,
#mobile-menu .fa-menu-item.has-submenu > .fa-menu-link::after {
    content: none !important;
    display: none !important;
}

.page-single .content-entry p:has(> br:only-child) {
    margin: 0;
    line-height: .45;
}

#mobile-menu .fa-menu-link[role="button"] {
    display: flex;
    cursor: pointer;
    align-items: center;
}

#mobile-menu .fa-submenu :is(.links-menu, .social-menu) {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-height: none !important;
    background: transparent !important;
}

#mobile-menu .fa-submenu ul::after {
    content: none !important;
    display: none !important;
}

#mobile-menu .fa-submenu :is(.links-menu, .social-menu) {
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px !important;
}

#mobile-menu .social-menu .s-contacts-item {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: var(--fa-surface-2) !important;
    color: var(--fa-text) !important;
}

#mobile-menu .social-menu .s-contacts-item .unicode {
    font-size: 14px !important;
    color: inherit !important;
}

@media (max-width: 768px) {
    body.fa-has-mobile-nav {
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }

    .fa-mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        bottom: calc(10px + env(safe-area-inset-bottom));
        inset-inline: 12px;
        z-index: 90;
        padding: 8px 6px;
        background: linear-gradient(145deg, rgba(48,72,57,.78), rgba(26,43,33,.82));
        border: 1px solid var(--fa-border-3);
        border-radius: 22px;
        backdrop-filter: blur(18px);
        box-shadow: 0 12px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
    }

    .fa-mobile-nav :is(a, button) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 48px;
        padding: 4px 0;
        color: var(--fa-text-soft) !important;
        background: transparent !important;
        border: 0;
        border-radius: 15px;
        font: inherit;
        font-size: 12px;
        text-decoration: none;
    }

    .fa-mobile-nav i {
        font-size: 23px;
    }

    .fa-mobile-nav svg {
        width: 25px;
        height: 25px;
        opacity: .82;
    }

    .fa-mobile-nav :is([aria-current="page"], :hover, :focus-visible) svg {
        opacity: 1;
    }

    .fa-mobile-nav [aria-current="page"] {
        background: var(--fa-surface-3) !important;
        color: var(--fa-text) !important;
    }

    .fa-mobile-nav :focus-visible {
        outline: 2px solid var(--fa-primary-hover);
        outline-offset: -2px;
    }

    body.fa-has-mobile-nav a.wa-s-n {
        bottom: calc(112px + env(safe-area-inset-bottom)) !important;
        width: 52px !important;
        height: 52px !important;
        line-height: 52px !important;
    }

    body.fa-has-mobile-nav a.wa-s-n svg {
        width: 30px !important;
        height: 30px !important;
    }

    body.fa-has-mobile-nav header :is( a[href="#mobile-menu"], .search-btn, salla-cart-summary, salla-user-menu, .s-user-menu-trigger, .s-user-menu-toggler, button[aria-label="تسجيل الدخول"] ) {
        display: none !important;
    }
}

@media (min-width: 768px) {
    section.s-block--hero-slider .swiper-slide img,
    section.s-block--hero-slider .swiper-lazy-wrap:not(.video-swiper) img {
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* Override the theme's opaque inline preloader color, not its exit animation. */

#preloader {
    background: rgba(12, 22, 17, .58) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#preloader .preloader-skip {
    background: rgba(0, 0, 0, .42) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .14);
}

#preloader .preloader-skip:focus-visible {
    outline: 2px solid var(--fa-text);
    outline-offset: 3px;
}

.s-block--bundle-info-panel > [component-name="info-panel"] {
    --fifa-bg: var(--fa-surface);
    --fifa-text: var(--fa-text);
    --fifa-primary: var(--fa-surface-3);
    --fifa-accent: var(--fa-accent-soft);
    --fifa-neon: var(--fa-primary-hover);
    --fifa-radius: var(--fa-r-lg);
    --fifa-shadow: var(--fa-shadow-sm);
}

/* The product breadcrumb strip leaves an empty band above the mobile gallery. */

@media (max-width: 767px) {
    body.product-single .breadcrumbs {
        display: none !important;
    }
}

body > #root:has(.sicon-check):has(.bg-white) {
    --store-color: var(--fa-primary);
    --text-color: var(--fa-text);
    color: var(--fa-text);
    color-scheme: dark;
    line-height: 1.7;
}

body > #root:has(.sicon-check):has(.bg-white) .bg-white {
    background: var(--fa-surface) !important;
    color: var(--fa-text) !important;
    border: 1px solid var(--fa-border);
}

body > #root:has(.sicon-check):has(.bg-white) :is(.text-text-color, .text-primary, .text-gray-900, .text-gray-800, h2, dt, dd) {
    color: var(--fa-text) !important;
}

body > #root:has(.sicon-check):has(.bg-white) :is(.text-gray-500, [class~="text-[#999999]"], [class~="text-[#666666]"], [class~="text-[#444444]"]) {
    color: var(--fa-muted) !important;
}

body > #root:has(.sicon-check):has(.bg-white) :is(.bg-gray-50, .bg-gray-100) {
    background: var(--fa-surface-2) !important;
    color: var(--fa-text) !important;
}

body > #root:has(.sicon-check):has(.bg-white) .bg-store-color {
    background: var(--fa-primary) !important;
    color: #fff !important;
    flex-shrink: 0;
}

body > #root:has(.sicon-check):has(.bg-white) .text-store-color {
    color: var(--fa-accent-soft) !important;
}

body > #root:has(.sicon-check):has(.bg-white) :is(.border-gray-200, [class~="border-[#cecece]"]),
body > #root:has(.sicon-check):has(.bg-white) .divide-gray-100 > * + * {
    border-color: var(--fa-border-2) !important;
}

body > #root:has(.sicon-check):has(.bg-white) .hover\:bg-gray-50:hover {
    background: var(--fa-surface-2) !important;
}

body > #root:has(.sicon-check):has(.bg-white) input[type="email"] {
    color: var(--fa-text) !important;
    background: var(--fa-surface-2) !important;
    border: 1px solid var(--fa-border-2) !important;
    min-width: 0;
    direction: ltr;
}

body > #root:has(.sicon-check):has(.bg-white) input::placeholder {
    color: var(--fa-muted) !important;
    opacity: 1;
}

body > #root:has(.sicon-check):has(.bg-white) :is(a, button, input):focus-visible {
    outline: 2px solid var(--fa-primary-hover);
    outline-offset: 3px;
}

body > #root:has(.sicon-check):has(.bg-white) .item-options-section :is(dt, dd) {
    overflow-wrap: anywhere;
    min-width: 0;
}

@media (max-width: 767px) {
    body > #root:has(.sicon-check):has(.bg-white) > div {
        width: 100%;
    }

    body > #root:has(.sicon-check):has(.bg-white) .bg-white.p-6 {
        padding: 18px !important;
    }

    body > #root:has(.sicon-check):has(.bg-white) .item-options-section dl > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    body > #root:has(.sicon-check):has(.bg-white) form > .flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    body > #root:has(.sicon-check):has(.bg-white) form button[type="submit"] {
        margin-inline-start: 0;
        min-height: 44px;
    }
}

/* Keep Salla's native checkout, validation and collapsible totals intact. */

body salla-cart-summary-card.s-cart-summary-card,
body salla-cart-summary-card .s-cart-summary-card-sheet-wrap,
body salla-cart-summary-card .s-cart-summary-card-bar {
    background: var(--fa-surface) !important;
    color: var(--fa-text) !important;
}

body salla-cart-summary-card :is(.s-cart-summary-card-sheet-title, .s-cart-summary-card-bar-label-text, .s-cart-summary-card-bar-total, .s-cart-summary-card-line b, .s-cart-summary-card-chevron) {
    color: var(--fa-text) !important;
}

body salla-cart-summary-card :is(.s-cart-summary-card-line span, .s-cart-summary-card-bar-count, .s-cart-summary-card-bar-label-sub) {
    color: var(--fa-text-muted, #c0cdc2) !important;
}

body salla-cart-summary-card .s-cart-summary-card-line--discount :is(b, span) {
    color: #9ed6ae !important;
}

body salla-cart-summary-card header.s-cart-summary-card-sheet-header {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
}

body salla-cart-summary-card #s-cart-summary-card-submit {
    display: block;
    width: 100%;
}

body salla-cart-summary-card #s-cart-summary-card-submit button {
    width: 100%;
    min-height: 48px;
    background: var(--fa-primary) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

@media (max-width: 1023px) {
    body:has(salla-cart-summary-card) {
        padding-bottom: 180px !important;
    }

    body salla-cart-summary-card.s-cart-summary-card {
        z-index: 95;
        border: 1px solid rgba(192,205,194,.24);
        border-radius: 18px 18px 0 0;
    }

    body salla-cart-summary-card .s-cart-summary-card-sheet-wrap {
        border-radius: 18px 18px 0 0;
        border: 1px solid rgba(192,205,194,.24);
        border-bottom: 0;
    }

    body salla-cart-summary-card .s-cart-summary-card-sheet-wrap--open .s-cart-summary-card-sheet {
        max-height: calc(100dvh - 310px);
        overflow-y: auto;
    }
}

@media (max-width: 768px) {
    body.fa-has-mobile-nav:has(salla-cart-summary-card) {
        padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.fa-has-mobile-nav salla-cart-summary-card.s-cart-summary-card {
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        inset-inline: 12px !important;
        padding-bottom: 0;
        border-radius: 18px;
        box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    }

    body.fa-has-mobile-nav:has(salla-cart-summary-card) a.wa-s-n {
        bottom: calc(266px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.fa-has-mobile-nav:has(salla-cart-summary-card.s-cart-summary-card--open) a.wa-s-n {
        visibility: hidden;
    }
}

@media (max-width: 1023px) {
    html body.fa-cart-in-flow {
        padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body .fa-cart-portal-source {
        display: none !important;
    }

    html body .fa-cart-inline.s-cart-summary-card {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        z-index: auto !important;
        width: 100%;
        box-sizing: border-box;
        margin: 20px 0 !important;
        padding: 16px !important;
        background: #283b30 !important;
        color: #f5f7f4 !important;
        border: 1px solid rgba(192,205,194,.24);
        border-radius: 18px !important;
        box-shadow: none !important;
    }

    html body .fa-cart-inline .s-cart-summary-card-sheet-wrap {
        position: static !important;
        inset: auto !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html body .fa-cart-inline .s-cart-summary-card-sheet {
        max-height: none !important;
        padding: 0 !important;
    }

    html body .fa-cart-inline header.s-cart-summary-card-sheet-header {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        z-index: auto !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
    }

    html body .fa-cart-inline .s-cart-summary-card-bar {
        background: transparent !important;
        padding: 12px 0 !important;
        flex-wrap: wrap;
    }

    html body .fa-cart-inline .s-cart-summary-card-action {
        padding: 0 !important;
    }

    html body .fa-cart-inline :is(.s-cart-summary-card-sheet-title, .s-cart-summary-card-bar-label-text, .s-cart-summary-card-bar-total, .s-cart-summary-card-line b, .s-cart-summary-card-chevron) {
        color: #f5f7f4 !important;
    }

    html body .fa-cart-inline :is(.s-cart-summary-card-line span, .s-cart-summary-card-bar-count, .s-cart-summary-card-bar-label-sub) {
        color: #c0cdc2 !important;
    }

    html body .fa-cart-inline #s-cart-summary-card-submit {
        display: block;
        width: 100%;
    }

    html body .fa-cart-inline #s-cart-summary-card-submit button {
        min-height: 48px;
        width: 100%;
        border-radius: 12px !important;
        background: #5f8665 !important;
        color: #fff !important;
    }

    html body.fa-cart-in-flow a.wa-s-n {
        bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        visibility: visible !important;
    }
}

footer .fa-freelance-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 22px auto 0;
    padding: 10px 14px;
    width: fit-content;
    max-width: 100%;
    color: var(--fa-text, #f5f7f4);
    direction: rtl;
}

footer .fa-freelance-badge img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

footer .footer-vat .fa-freelance-badge {
    margin: 0 auto;
    padding: 0;
    background: transparent !important;
}

@media (max-width: 767px) {
    footer .footer-vat:has(.fa-freelance-badge) {
        margin-top: 18px;
    }
}

footer .fa-freelance-badge > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: start;
}

footer .fa-freelance-badge span {
    font-size: 14px;
    color: var(--fa-text, #f5f7f4) !important;
}

footer .fa-freelance-badge b {
    font-size: 14px;
    font-weight: 500;
    color: var(--fa-muted, #c0cdc2) !important;
    white-space: nowrap;
}
/* Forest motion: V3 layout and interactions, original paint retained. */
:root {
    --fa-y: 44px;
    --fa-blur: 7px;
    --fa-dur: .9s;
    --fa-dir: 1;
}

html[dir="ltr"] { --fa-dir: -1; }

@media (max-width: 768px) {
    :root { --fa-y: 40px; --fa-blur: 4px; --fa-dur: .85s; }
}

html.fa-forest-motion .fa-pre:not([data-fa-anim="info"]) { opacity: 0 !important; }

html.fa-forest-motion .fa-in[data-fa-anim]:not([data-fa-anim="info"]) {
    animation-duration: var(--fa-dur);
    animation-timing-function: var(--fa-ease-out);
    animation-delay: var(--fa-d, 0ms);
    animation-fill-mode: backwards;
}
html.fa-forest-motion .fa-in[data-fa-anim="product"] { animation-name: fa-prod-in; animation-duration: 1s; }
html.fa-forest-motion .fa-in[data-fa-anim="product"] .s-product-card-image img { animation: fa-prod-img 1.15s var(--fa-ease-out) var(--fa-d, 0ms) backwards; }

html.fa-forest-motion .fa-in[data-fa-anim="title"] { animation-name: fa-title-in; }
html.fa-forest-motion .fa-in[data-fa-anim="feature"] { animation-name: fa-feature-in; animation-duration: 1s; }
html.fa-forest-motion .fa-in[data-fa-anim="feature"] :is(i, svg) { animation: fa-icon-pop .75s var(--fa-ease-spring) calc(var(--fa-d, 0ms) + 220ms) backwards; }
html.fa-forest-motion .fa-in[data-fa-anim="review"] { animation-name: fa-review-in; animation-duration: 1.05s; }
html.fa-forest-motion .fa-in[data-fa-anim="faq"] { animation-name: fa-slide-in; }
html.fa-forest-motion .fa-in[data-fa-anim="field"] { animation-name: fa-slide-in; animation-duration: .75s; }
html.fa-forest-motion .fa-in[data-fa-anim="banner"] { animation-name: fa-clip-in; animation-duration: 1.1s; }
html.fa-forest-motion .fa-in[data-fa-anim="flip"] { animation-name: fa-flip-in; animation-duration: 1s; }
html.fa-forest-motion .fa-in[data-fa-anim="rise"] { animation-name: fa-rise-in; }
html.fa-forest-motion .fa-in[data-fa-anim="fade"] { animation-name: fa-fade-in; }

@keyframes fa-prod-in {
    0%   { opacity: 0; transform: translate3d(0, var(--fa-y), 0) scale(.86) rotate(1.2deg); }
    55%  { opacity: 1; }
    78%  { transform: translate3d(0, -7px, 0) scale(1.02) rotate(0deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes fa-prod-img { from { transform: scale(1.22); } to { transform: scale(1); } }

@keyframes fa-title-in {
    from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes fa-feature-in {
    0%   { opacity: 0; transform: translate3d(0, 34px, 0) scale(.82) rotate(-3deg); }
    60%  { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.04) rotate(.4deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes fa-icon-pop {
    from { opacity: 0; transform: scale(.2) rotate(-90deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes fa-review-in {
    from { opacity: 0; transform: translate3d(calc(36px * var(--fa-side, 1)), 22px, 0) scale(.94) rotate(calc(1.8deg * var(--fa-side, 1))); }
    to   { opacity: 1; transform: none; }
}

@keyframes fa-slide-in {
    from { opacity: 0; transform: translate3d(calc(var(--fa-dir) * -34px), 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fa-clip-in {
    from { opacity: 0; clip-path: inset(0 0 100% 0 round 24px); transform: scale(1.05); }
    to   { opacity: 1; clip-path: inset(0 0 0 0 round 24px); transform: none; }
}

@keyframes fa-flip-in {
    from { opacity: 0; transform: perspective(700px) rotateX(-18deg) translate3d(0, 30px, 0) scale(.94); transform-origin: 50% 100%; }
    to   { opacity: 1; transform: none; transform-origin: 50% 100%; }
}

@keyframes fa-rise-in {
    from { opacity: 0; transform: translate3d(0, 50px, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes fa-fade-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.fa-v2-enter { animation: fa-enter .6s var(--fa-ease-out) both; }

@keyframes fa-enter { from { opacity: .25; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes fa-drift { to { transform: translate3d(18%, 14%, 0) scale(1.18); } }
@keyframes fa-float { from { transform: translateY(0) scale(1); } to { transform: translateY(-10px) scale(1.015); } }
@keyframes fa-orbit-ring { from { transform: rotate(-22deg) scaleY(.55); } to { transform: rotate(338deg) scaleY(.55); } }
@keyframes fa-spin-border { }
@keyframes fa-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 45% { translate: 5px 0; } 70% { translate: -3px 0; } }
@keyframes fa-opt-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes fa-ripple { from { transform: translate(-50%, -50%) scale(.2); opacity: .9; } to { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
@keyframes fa-node-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

.fa-v2-shake { animation: fa-shake .38s var(--fa-ease) both; }

.fa-v2-press { position: relative; overflow: hidden; isolation: isolate; }

.fa-v2-ripple {
    position: absolute;
    pointer-events: none;
    width: 100px;
    height: 100px;
    left: var(--fa-rx);
    top: var(--fa-ry);
    border-radius: 50%;
    z-index: 2;
    animation: fa-ripple .55s ease-out forwards;
}

.fa-motion-paused *,
.fa-motion-paused *::before,
.fa-motion-paused *::after { animation-play-state: paused !important; }

#mobile-menu,
nav#mobile-menu.mobile-menu,
nav#mobile-menu.mobile-menu.has-custom-bg {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 390px) !important;
    max-width: 390px !important;
    border: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    isolation: isolate;
}

#mobile-menu ul, #mobile-menu ol {
    border: 0 !important;
}

#mobile-menu .vertical-lines { display: none !important; }

#mobile-menu .fa-menu-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 12px 17px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

#mobile-menu .fa-menu-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#mobile-menu .fa-menu-title strong { font-size: 15px; font-weight: 800; line-height: 1.4; }
#mobile-menu .fa-menu-title span { font-size: 10px; line-height: 1.5; }

#mobile-menu .fa-menu-close {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .35s var(--fa-ease) !important;
}

#mobile-menu .fa-menu-close:hover { transform: rotate(90deg); }
#mobile-menu .fa-menu-close:active { transform: rotate(90deg) scale(.9); }

#mobile-menu .fa-menu-close::before,
#mobile-menu .fa-menu-close::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 1.5px;
    border-radius: 99px;
}

#mobile-menu .fa-menu-close::before { transform: rotate(45deg); }
#mobile-menu .fa-menu-close::after { transform: rotate(-45deg); }

#mobile-menu .fa-menu-body { padding: 13px 12px 25px; }

#mobile-menu .fa-menu-item {
    position: relative;
    margin: 2px 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px;
    overflow: visible;
}

#mobile-menu .fa-menu-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 48px;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    transition: color .24s ease, background .24s ease, border-color .24s ease, transform .3s var(--fa-ease) !important;
}

#mobile-menu .fa-menu-link[role="button"] { cursor: pointer; }

#mobile-menu .fa-menu-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(-50%);
    transition: height .3s var(--fa-ease), opacity .2s ease;
}

#mobile-menu .fa-menu-link :is(i, svg) {
    flex: 0 0 19px;
    width: 19px;
    opacity: .85;
    transition: color .25s ease, opacity .25s ease, transform .3s var(--fa-ease);
}

@media (hover: hover) {
    #mobile-menu .fa-menu-link:hover {
        transform: translateX(-3px);
    }
    [dir="ltr"] #mobile-menu .fa-menu-link:hover { transform: translateX(3px); }
    #mobile-menu .fa-menu-link:hover::before { height: 21px; opacity: .9; }
    #mobile-menu .fa-menu-link:hover :is(i, svg) { opacity: 1; transform: scale(1.1); }
}

#mobile-menu .fa-menu-item.is-current > .fa-menu-link::before,
#mobile-menu .fa-menu-link[aria-current="page"]::before { height: 23px; opacity: 1; }

#mobile-menu .fa-menu-arrow {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-inline-start: auto;
    border-radius: 8px;
    transition: color .25s ease, background .25s ease, transform .35s var(--fa-ease);
}

#mobile-menu .fa-menu-arrow::before {
    content: "";
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
}

#mobile-menu .fa-menu-item.is-open > .fa-menu-link .fa-menu-arrow {
    transform: rotate(180deg);
}

#mobile-menu .fa-menu-item.has-submenu::before,
#mobile-menu .fa-menu-item.has-submenu > .fa-menu-link::after { content: none !important; display: none !important; }

#mobile-menu .fa-submenu {
    display: grid !important;
    grid-template-rows: 0fr;
    margin: 0 8px;
    opacity: 0;
    transition: grid-template-rows .4s var(--fa-ease), opacity .25s ease;
}

#mobile-menu .fa-submenu > .fa-submenu-inner { min-height: 0; overflow: hidden; }
#mobile-menu .fa-menu-item.is-open > .fa-submenu { grid-template-rows: 1fr; opacity: 1; }

#mobile-menu .fa-submenu ul {
    position: relative;
    margin: 3px 0 7px;
    padding: 3px 10px 3px 0 !important;
}

#mobile-menu .fa-submenu ul::after { content: none !important; display: none !important; }

#mobile-menu .fa-submenu a {
    min-height: 40px !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    border-radius: 9px !important;
    transition: color .2s ease, background .2s ease;
}

#mobile-menu .fa-submenu :is(.links-menu, .social-menu) {
    display: block !important;
    position: static !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 6px !important;
}

#mobile-menu .social-menu .s-contacts-item {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#mobile-menu .social-menu .s-contacts-item .unicode { font-size: 14px !important; }
#mobile-menu.fa-menu-v4 .fa-menu-item { opacity: 0; }

#mobile-menu.fa-menu-v4.fa-menu-open .fa-menu-item {
    opacity: 1;
    animation: fa-menu-item-in .55s var(--fa-ease-out) calc(var(--i, 0) * 45ms + 90ms) backwards;
}

#mobile-menu.fa-menu-open .fa-menu-header { animation: fa-menu-head-in .5s var(--fa-ease-out) backwards; }

@keyframes fa-menu-item-in {
    from { opacity: 0; transform: translate3d(calc(var(--fa-dir) * 30px), 0, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes fa-menu-head-in { from { opacity: 0; transform: translate3d(0, -14px, 0); } to { opacity: 1; transform: none; } }

@media (min-width: 769px) and (max-width: 1100px) {
    #mobile-menu, nav#mobile-menu.mobile-menu { width: min(420px, 48vw) !important; max-width: 420px !important; }
}

@media (max-width: 768px) {
    #mobile-menu, nav#mobile-menu.mobile-menu, nav#mobile-menu.mobile-menu.has-custom-bg { width: min(88vw, 370px) !important; max-width: 370px !important; }
    #mobile-menu .fa-menu-header { min-height: 63px; padding: 10px 14px; }
    #mobile-menu .fa-menu-body { padding: 10px 9px 22px; }
    #mobile-menu .fa-menu-link { min-height: 46px; padding: 8px 11px !important; font-size: 13.5px; }
    #mobile-menu .fa-menu-close { width: 36px; height: 36px; flex-basis: 36px; }
}

@media (max-width: 480px) { #mobile-menu a { min-height: 47px; } }
@media (max-width: 390px) {
    #mobile-menu, nav#mobile-menu.mobile-menu { width: 91vw !important; }
    #mobile-menu .fa-menu-title span { display: none; }
}

.fa-mobile-nav { display: none; }

@media (max-width: 768px) {
    body.fa-has-mobile-nav { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }

    .fa-mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        bottom: calc(10px + env(safe-area-inset-bottom));
        inset-inline: 12px;
        z-index: 90;
        padding: 6px;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-radius: 22px;
    }

    .fa-mobile-nav :is(a, button) {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 48px;
        padding: 4px 0;
        border: 0;
        border-radius: 15px;
        font: inherit;
        font-size: 12px;
        text-decoration: none;
        transition: background .25s ease, color .25s ease;
    }

    .fa-mobile-nav svg { width: 24px; height: 24px; opacity: .82; transition: transform .3s var(--fa-ease-spring), opacity .2s ease; }
    .fa-mobile-nav :is(a, button):active svg { transform: scale(.82); }
    .fa-mobile-nav :is([aria-current="page"], :hover, :focus-visible) svg { opacity: 1; }
    .fa-mobile-nav [aria-current="page"]::after {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline: 25%;
        height: 3px;
        border-radius: 3px;
    }

    .fa-mobile-nav :focus-visible { outline-offset: -2px; }

    body.fa-has-mobile-nav a.wa-s-n { bottom: calc(112px + env(safe-area-inset-bottom)) !important; width: 52px !important; height: 52px !important; line-height: 52px !important; }
    body.fa-has-mobile-nav a.wa-s-n svg { width: 30px !important; height: 30px !important; }

    body.fa-has-mobile-nav header :is(a[href="#mobile-menu"], .search-btn, salla-cart-summary, salla-user-menu, .s-user-menu-trigger, .s-user-menu-toggler, button[aria-label="تسجيل الدخول"]) { display: none !important; }
}

.s-block__title,
.section-title {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 26px !important;
    padding-inline: 0 !important;
    overflow: visible !important;
}

.s-block__title::before, .s-block__title::after,
.section-title::before, .section-title::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    height: 1px !important;
    max-width: 38% !important;
    border: 0 !important;
    pointer-events: none;
    transform-origin: center;
}

.s-block__title::before, .section-title::before {
    margin-inline-end: 42px !important;
}

.s-block__title::after, .section-title::after {
    margin-inline-start: 42px !important;
}

.s-block__title > div, .section-title > div {
    position: relative !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.s-block__title > div::before, .s-block__title > div::after,
.section-title > div::before, .section-title > div::after { content: none !important; display: none !important; }

.s-block__title :is(h2, h3), .section-title :is(h2, h3) { margin-inline: auto !important; text-align: center !important; }
.s-block__title p, .section-title p { margin-inline: auto !important; text-align: center !important; }

@media (min-width: 1200px) { .s-block__title { margin-bottom: 24px !important; } }

@media (max-width: 1024px) {
    .s-block__title::before, .s-block__title::after, .section-title::before, .section-title::after { max-width: 30% !important; }
    .s-block__title::before, .section-title::before { margin-inline-end: 25px !important; }
    .s-block__title::after, .section-title::after { margin-inline-start: 25px !important; }
    .s-block__title h2 { font-size: clamp(23px, 3vw, 30px) !important; }
}

@media (max-width: 768px) {
    .s-block__title, .section-title { margin-bottom: 16px !important; }
    .s-block__title::before, .s-block__title::after, .section-title::before, .section-title::after { max-width: none !important; min-width: 20px !important; }
    .s-block__title::before, .section-title::before { margin-inline-end: 14px !important; }
    .s-block__title::after, .section-title::after { margin-inline-start: 14px !important; }
    .s-block__title h2 { font-size: 22px !important; line-height: 1.4 !important; }
    .s-block__title p { font-size: 13px !important; line-height: 1.7; }
}

@media (max-width: 480px) { .s-block__title h2 { font-size: 20px !important; } }

@media (max-width: 390px) {
    .s-block__title::before, .s-block__title::after, .section-title::before, .section-title::after { min-width: 12px !important; }
    .s-block__title::before, .section-title::before { margin-inline-end: 9px !important; }
    .s-block__title::after, .section-title::after { margin-inline-start: 9px !important; }
}
.s-block__title.fa-in::before,
.s-block__title.fa-in::after { animation: fa-line-grow 1s var(--fa-ease-out) calc(var(--fa-d, 0ms) + 250ms) backwards; }
@keyframes fa-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.p--features__item,
.angel-feature {
    position: relative;
    padding: 22px !important;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
    transition: transform var(--fa-transition), border-color var(--fa-transition), box-shadow var(--fa-transition), background var(--fa-transition);
}

.angel-feature::before { display: none !important; content: none !important; }

.angel-feature::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    inset-inline-end: -45px;
    top: -45px;
    border-radius: 50%;
    pointer-events: none;
    transition: transform .6s var(--fa-ease), opacity .5s ease;
}

.p--features__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 25%;
    width: 2px;
    height: 50%;
    border-radius: 999px;
    opacity: .65;
    transition: height var(--fa-fast), top var(--fa-fast), opacity var(--fa-fast);
}

.angel-feature :is(i, svg) {
    position: relative;
    z-index: 2;
    transition: color .35s ease, transform .45s var(--fa-ease-spring);
}

.angel-feature :is(h3, h4, strong) { position: relative; z-index: 2; }
.angel-feature :is(p, span) { position: relative; z-index: 2; }

@media (hover: hover) {
    .p--features__item:hover,
    .angel-feature:hover {
        transform: translateY(-5px);
    }
    .p--features__item:hover::before { top: 18%; height: 64%; opacity: 1; }
    .angel-feature:hover::after { transform: scale(1.7); }
    .angel-feature:hover :is(i, svg) { transform: translateY(-3px) scale(1.1); }
}

@media (max-width: 1024px) { .angel-feature, .p--features__item { padding: 18px !important; } }
@media (max-width: 768px) { .angel-feature, .p--features__item { padding: 15px !important; } }
@media (max-width: 480px) { .angel-feature, .p--features__item { padding: 13px !important; } }

.s-block--testimonials .bg-white,
.s-block--testimonials .da-bgg {
    position: relative !important;
    transition: transform .35s var(--fa-ease), border-color .35s ease, box-shadow .35s ease !important;
}

.s-block--testimonials .bg-white::before,
.s-block--testimonials .da-bgg::before { content: none !important; display: none !important; }

.s-block--testimonials .bg-white img,
.s-block--testimonials .da-bgg img { transition: transform .35s var(--fa-ease), box-shadow .35s ease !important; }

.s-block--testimonials :is(.sicon-star, .sicon-star2, [class*="star"]) {
    border: 0 !important;
}

.s-block--testimonials :is(.stars, [class*="rating"]) { border: 0 !important; }

@media (hover: hover) {
    .s-block--testimonials .bg-white:hover,
    .s-block--testimonials .da-bgg:hover {
        transform: translateY(-4px);
    }
    .s-block--testimonials .bg-white:hover img,
    .s-block--testimonials .da-bgg:hover img { transform: translateY(-2px) scale(1.04); }
}

.s-block--testimonials .swiper-pagination-bullet { opacity: 1 !important; transition: width .3s var(--fa-ease), background .3s ease; }

.faqs-list__item,
.faqs-list__item.bg-gray-100 {
    position: relative;
    margin-bottom: 11px;
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
    transition: background var(--fa-transition), border-color var(--fa-transition), transform var(--fa-transition), box-shadow var(--fa-transition);
}

@media (hover: hover) {
    .faqs-list__item:hover {
        transform: translateX(-3px);
    }
    [dir="ltr"] .faqs-list__item:hover { transform: translateX(3px); }
}
.faqs-list__item .faq-answer { line-height: 1.85; overflow-wrap: anywhere; }
.faq-container > input:checked + .faqs-list__item .faq-answer { animation: fa-enter .45s var(--fa-ease-out) both; }
.faqs-list__item:focus-within { outline-offset: 3px; }

.s-product-card-entry,
[id^="angel-product-"] {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: transform .42s var(--fa-ease), border-color .42s var(--fa-ease), box-shadow .42s var(--fa-ease);
}

.s-product-card-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .42s ease;
}

.s-product-card-entry::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 18%;
    height: 1px;
    opacity: .45;
    pointer-events: none;
    transition: inset-inline .6s var(--fa-ease), opacity .4s ease;
}

.s-product-card-entry h3, [id^="angel-product-"] h3 { font-weight: 700; }

@media (hover: hover) {
    .s-product-card-entry:hover,
    [id^="angel-product-"]:hover {
        transform: translateY(-7px);
    }
    .s-product-card-entry:hover::before { opacity: 1; }
    .s-product-card-entry:hover::after { inset-inline: 6%; opacity: .9; }
}

.s-product-card-image { position: relative; overflow: hidden; }
.s-product-card-image img { transition: transform .7s var(--fa-ease), filter .7s ease; }

@media (hover: hover) {
    .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.04); }
}

.s-product-card-content {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.s-product-card-content-main { flex: 1; min-height: 0; }
.s-product-card-content:not(:has(.s-product-card-price, .s-product-card-sale-price)) .s-product-card-content-main { flex: 0 1 auto; }

.s-product-card-content-title, .s-product-card-content-title a,
.s-product-card-entry h3, .s-product-card-entry h3 a { line-height: 1.55 !important; }

.s-product-card-category {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 9px;
}

.s-product-card-wishlist-btn,
.s-product-card-wishlist-btn .sicon-heart { transition: color var(--fa-fast), transform .3s var(--fa-ease-spring); }

@media (hover: hover) {
    .s-product-card-wishlist-btn:hover { transform: translateY(-2px) scale(1.12); }
}

.s-product-card-content-footer { margin-top: 12px; }

.s-product-card-content-footer salla-add-product-button { display: block; width: 100%; border-radius: var(--fa-r); overflow: hidden; }

.s-product-card-content-footer salla-add-product-button button {
    width: 100%;
    min-height: 44px;
    border-radius: var(--fa-r) !important;
    transition: transform var(--fa-fast), color var(--fa-fast), background var(--fa-fast), border-color var(--fa-fast), box-shadow var(--fa-fast) !important;
}

@media (hover: hover) {
    .s-product-card-content-footer salla-add-product-button:hover button {
        transform: translateY(-2px);
    }
}

.s-product-card-content-footer salla-add-product-button:active button { transform: scale(.97); }

@media (max-width: 768px) {
    .s-product-card-entry:active { transform: scale(.992); }
}

@media (max-width: 480px) { .s-product-card-category { font-size: 11px; } }

.product-single .main-content > .short__description { display: none !important; }

.product-form { position: relative !important; display: flex !important; flex-direction: column !important; gap: 10px; }
.product-form > .sticky-product-bar { order: 99 !important; }

.details.is-sold, .details.total { border-radius: var(--fa-r) !important; }

.tabs__product { gap: 6px; }

.tabs__product .tab-trigger,
#product-tabs .tab-trigger,
.btn-tab.btn--collapse {
    border-radius: 12px !important;
    margin-inline: 3px;
    min-height: 46px;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease, transform .25s var(--fa-ease);
}

@media (hover: hover) {
}

.tabs__product .tab-trigger:focus-visible { outline-offset: 3px; }

@media (max-width: 768px) {
    .tabs__product { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .tabs__product::-webkit-scrollbar { display: none; }
    .tabs__product .tab-trigger { flex: 0 0 auto; white-space: nowrap; }
}

.sticky-product-bar,
.sticky-product-bar.fa-inline-product-bar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100%;
    z-index: auto !important;
    transform: none !important;
    opacity: 1 !important;
    border-radius: var(--fa-r-lg) !important;
    padding: 18px !important;
    margin: 16px 0 0 !important;
}

.fa-inline-product-bar > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
}

.fa-inline-product-bar > .container > div:first-child:not(.sticky-product-bar__quantity):not(:has(salla-quantity-input)) { flex: 0 0 100%; width: 100% !important; min-width: 0; }
.fa-inline-product-bar :is(.sticky-product-bar__quantity, salla-quantity-input) { flex: 0 0 auto; width: 144px; max-width: 100%; }
.fa-inline-product-bar .sticky-product-bar__quantity salla-quantity-input { width: 100%; }
.fa-inline-product-bar .sticky-product-bar__quantity,
.fa-inline-product-bar salla-add-product-button { transform: none !important; opacity: 1 !important; }

.fa-inline-product-bar salla-add-product-button { display: flex !important; flex: 1 1 260px !important; min-width: 0 !important; width: auto !important; gap: 10px !important; align-items: stretch; }
.fa-inline-product-bar salla-add-product-button > * { min-width: 0; }
.fa-inline-product-bar salla-add-product-button > :is(salla-button, salla-quick-buy, button) { flex: 1 1 0; width: auto !important; }
.fa-inline-product-bar salla-add-product-button button { min-height: 48px; width: 100%; white-space: normal; padding-inline: 12px !important; }

.fa-inline-product-bar .s-quantity-input-input {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
    min-height: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.fa-inline-product-bar .s-quantity-input-container {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    width: 100%;
    border-radius: var(--fa-r-sm);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.fa-inline-product-bar .s-quantity-input-button {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    transition: background .2s ease, transform .2s var(--fa-ease-spring) !important;
}
.fa-inline-product-bar .s-quantity-input-button:active { transform: scale(.88); }

@media (max-width: 480px) { .fa-inline-product-bar salla-add-product-button { flex-basis: 100% !important; } }
@media (max-width: 768px) { .sticky-product-bar, .sticky-product-bar.fa-inline-product-bar { min-height: auto; margin: 13px 0 4px !important; padding: 12px !important; } }

html.fa-forest-motion .product-form #product-tabs-options,
html.fa-forest-motion .product-form .tabs-wrapper__product {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
    padding: 30px 26px 10px !important;
    border-radius: 24px !important;
    counter-reset: fa-step;
}
html.fa-forest-motion .product-form #product-tabs-options .tabs-wrapper__product,
html.fa-forest-motion .product-form #product-tabs-options .s-product-options-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

html.fa-forest-motion .product-form #product-tabs-options::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: .5;
    transition: opacity .5s ease;
}

html.fa-forest-motion .product-form:focus-within #product-tabs-options::before {
    opacity: 1;
    animation: fa-spin-border 6s linear infinite;
}
html.fa-forest-motion .product-form .fa-v2-field,
html.fa-forest-motion .product-form .s-product-options-option.fa-v2-field {
    position: relative;
    display: block !important;
    counter-increment: fa-step;
    margin: 0 0 26px !important;
    padding: 0 !important;
    padding-inline-start: 50px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

html.fa-forest-motion .product-form .fa-v2-field:has(.fa-select.is-open) { z-index: 85; }
html.fa-forest-motion .product-form .fa-v2-field::before {
    content: counter(fa-step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: -3px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    border-radius: 50%;
    transition: background .35s var(--fa-ease), color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
html.fa-forest-motion .product-form .fa-v2-field::after {
    content: "";
    position: absolute;
    inset-inline-start: 17.5px;
    top: 38px;
    bottom: -24px;
    width: 1px;
    transition: background .4s ease;
    pointer-events: none;
}

html.fa-forest-motion .product-form .fa-v2-field.fa-v2-filled:not(.fa-v2-invalid)::before {
    content: "✓";
    font-size: 15px;
    animation: fa-node-pop .45s var(--fa-ease-spring);
}

html.fa-forest-motion .product-form .fa-v2-field.fa-v2-invalid::before {
    content: "!";
    font-size: 16px;
}
html.fa-forest-motion .product-form .fa-v2-field :is(.s-product-options-option-label, .s-product-options-option-content) {
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
}

html.fa-forest-motion .product-form .fa-v2-field .s-product-options-option-label {
    display: block !important;
    margin: 0 0 10px !important;
    padding-top: 4px;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    transition: color .3s ease;
}

html.fa-forest-motion .product-form .fa-v2-field .s-product-options-option-label small {
    display: block;
    margin-top: 3px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}
html.fa-forest-motion .product-form .fa-v2-field label { transition: color .3s ease; }
html.fa-forest-motion .product-form .fa-v2-field .s-product-options-option-content { position: relative; }

html.fa-forest-motion .product-form .fa-v2-field .s-product-options-option-content::after {
    content: "";
    position: absolute;
    inset-inline: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .5s var(--fa-ease);
    pointer-events: none;
    z-index: 3;
}

html.fa-forest-motion .product-form .fa-v2-field:focus-within .s-product-options-option-content::after { transform: scaleX(1); }
html.fa-forest-motion .product-form :is(.s-form-control, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .fa-select__trigger) {
    min-height: 52px;
    padding-inline: 16px;
    font-size: 15px !important;
    border-radius: 14px !important;
    outline: none !important;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease, transform .3s var(--fa-ease) !important;
}

@media (hover: hover) {
}

html.fa-forest-motion .product-form :is(.s-form-control, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])):focus,
html.fa-forest-motion .product-form .fa-select.is-open .fa-select__trigger,
html.fa-forest-motion .product-form .fa-select__trigger:focus-visible {
    outline: none !important;
}

html.fa-forest-motion .product-form :is(input, textarea)::placeholder { opacity: 1; }
html.fa-forest-motion .product-form textarea { min-height: 104px !important; padding: 14px 16px !important; resize: vertical; line-height: 1.7; }

html.fa-forest-motion .product-form input:is([type="checkbox"], [type="radio"]) { transition: scale .2s var(--fa-ease-spring), box-shadow .2s ease; }
html.fa-forest-motion .product-form input:is([type="checkbox"], [type="radio"]):checked { scale: 1.08; }
html.fa-forest-motion .product-form .fa-v2-invalid .s-product-options-option-content::after { transform: scaleX(1); }
.fa-required-marker { display: none !important; }
.fa-forest-motion :is(form label.required, .s-product-options-option-label.required)::after { content: none !important; }

@media (max-width: 768px) {
    html.fa-forest-motion .product-form #product-tabs-options,
    html.fa-forest-motion .product-form .tabs-wrapper__product { padding: 22px 15px 4px !important; border-radius: 18px !important; }
    html.fa-forest-motion .product-form .fa-v2-field,
    html.fa-forest-motion .product-form .s-product-options-option.fa-v2-field { padding-inline-start: 40px !important; margin-bottom: 22px !important; }
    html.fa-forest-motion .product-form .fa-v2-field::before { width: 30px; height: 30px; font-size: 11px; }
    html.fa-forest-motion .product-form .fa-v2-field::after { inset-inline-start: 14.5px; top: 32px; }
    html.fa-forest-motion .product-form:focus-within #product-tabs-options::before { animation-duration: 9s; }
}

.fa-select { position: relative; width: 100%; z-index: 10; }
.fa-select.is-open { z-index: 80; }

.fa-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

.fa-select__trigger {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 15px;
    border-radius: 14px !important;
    cursor: pointer;
    text-align: start;
    transition: border-color var(--fa-fast), box-shadow var(--fa-fast), background var(--fa-fast);
}
.fa-select__trigger:disabled { opacity: .4; cursor: not-allowed; }
.fa-select__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.fa-select__chevron {
    position: relative;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--fa-transition);
}

.fa-select.is-open .fa-select__chevron { transform: rotate(225deg) translate(-2px, -2px); }

.fa-select__menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 15px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    transition: opacity var(--fa-fast), visibility var(--fa-fast), transform .3s var(--fa-ease);
    scrollbar-width: thin;
}

.fa-select.is-open .fa-select__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.fa-select__option {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 43px;
    padding: 8px 11px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: start;
    transition: color var(--fa-fast), background var(--fa-fast), padding var(--fa-fast);
}

.fa-select.is-open .fa-select__option { animation: fa-opt-in .35s var(--fa-ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.fa-select__option:hover, .fa-select__option.is-focused { padding-inline-start: 14px; }
.fa-select__option:disabled { opacity: .4; cursor: not-allowed; }

.fa-select__trigger:focus-visible { outline-offset: 2px; }

select:not(.fa-select__native) { color-scheme: dark; }

@media (max-width: 768px) {
    .fa-select__trigger { min-height: 50px; }
    .fa-select__menu { max-height: 220px; }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select:not(.fa-select__native),
.s-form-control,
.form-select {
    border-radius: 13px !important;
    min-height: 50px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

textarea { min-height: 116px; resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1 !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus,
.s-form-control:focus {
    outline: none !important;
}
.s-product-options-option-label small { line-height: 1.65; }

@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, .s-form-control { min-height: 46px; }
}
.s-button-primary::before,
.s-button-element:not(:disabled):not([loading]):not(.s-button-link):not(.s-button-outline):not(.fa-btn-cart)::before {
    content: "";
    position: absolute;
    top: -120%;
    left: 0;
    width: 28%;
    height: 340%;
    transform: translateX(-160%) rotate(20deg);
    pointer-events: none;
    transition: transform .8s var(--fa-ease);
}

@media (hover: hover) {

    .s-button-primary:hover::before,
    .s-button-element:not(:disabled):not([loading]):not(.s-button-link):not(.s-button-outline):not(.fa-btn-cart):hover::before { transform: translateX(520%) rotate(20deg); }
}

.s-button-primary-outline { transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }

.s-block--payment {
    border-radius: var(--fa-r-lg) !important;
}

.s-block--payment ul { gap: 7px !important; }

.s-block--payment li {
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
    transition: transform .3s var(--fa-ease);
}

@media (hover: hover) { .s-block--payment li:hover { transform: translateY(-2px); } }

.s-modal-body,
.s-modal-body.s-modal-align-middle {
    border-radius: var(--fa-r-xl) !important;
}

.s-modal-body.s-modal-entering { animation: fa-enter .4s var(--fa-ease-out) both; }

.s-localization-modal-select { border-radius: var(--fa-r) !important; }

.s-table {
    border-radius: var(--fa-r-lg) !important;
    overflow: hidden;
}
.s-table tbody tr, .s-table tbody tr.s-table__tr { transition: background var(--fa-fast); }

.cart-item {
    border-radius: var(--fa-r-lg) !important;
    transition: border-color var(--fa-fast), box-shadow var(--fa-fast);
}

body salla-cart-summary-card header.s-cart-summary-card-sheet-header { position: static !important; inset: auto !important; z-index: auto !important; width: auto !important; margin: 0 !important; padding: 0 0 10px !important; }
body salla-cart-summary-card #s-cart-summary-card-submit { display: block; width: 100%; }
body salla-cart-summary-card #s-cart-summary-card-submit button { width: 100%; min-height: 48px; border-radius: 12px !important; }

@media (max-width: 1023px) {
    body:has(salla-cart-summary-card) { padding-bottom: 180px !important; }
    body salla-cart-summary-card.s-cart-summary-card { z-index: 95; border-radius: 18px 18px 0 0; }
    body salla-cart-summary-card .s-cart-summary-card-sheet-wrap { border-radius: 18px 18px 0 0; border-bottom: 0; }
    body salla-cart-summary-card .s-cart-summary-card-sheet-wrap--open .s-cart-summary-card-sheet { max-height: calc(100dvh - 310px); overflow-y: auto; }
}

@media (max-width: 768px) {
    body.fa-has-mobile-nav:has(salla-cart-summary-card) { padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)) !important; }
    body.fa-has-mobile-nav salla-cart-summary-card.s-cart-summary-card { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; inset-inline: 12px !important; padding-bottom: 0; border-radius: 18px; }
    body.fa-has-mobile-nav:has(salla-cart-summary-card) a.wa-s-n { bottom: calc(266px + env(safe-area-inset-bottom, 0px)) !important; }
    body.fa-has-mobile-nav:has(salla-cart-summary-card.s-cart-summary-card--open) a.wa-s-n { visibility: hidden; }
}

@media (max-width: 1023px) {
    html body.fa-cart-in-flow { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
    html body .fa-cart-portal-source { display: none !important; }

    html body .fa-cart-inline.s-cart-summary-card {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        z-index: auto !important;
        width: 100%;
        box-sizing: border-box;
        margin: 20px 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    html body .fa-cart-inline .s-cart-summary-card-sheet-wrap { position: static !important; inset: auto !important; border: 0 !important; }
    html body .fa-cart-inline .s-cart-summary-card-sheet { max-height: none !important; padding: 0 !important; }
    html body .fa-cart-inline header.s-cart-summary-card-sheet-header { position: static !important; inset: auto !important; width: auto !important; z-index: auto !important; margin: 0 !important; padding: 0 0 10px !important; }
    html body .fa-cart-inline .s-cart-summary-card-bar { padding: 12px 0 !important; flex-wrap: wrap; }
    html body .fa-cart-inline .s-cart-summary-card-action { padding: 0 !important; }
    html body .fa-cart-inline #s-cart-summary-card-submit { display: block; width: 100%; }
    html body .fa-cart-inline #s-cart-summary-card-submit button { min-height: 48px; width: 100%; border-radius: 12px !important; }
    html body.fa-cart-in-flow a.wa-s-n { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; visibility: visible !important; }
}

.page-single .content--single-page.opt-text {
    border-radius: var(--fa-r-lg);
}

.page-single .content-entry { line-height: 1.85; overflow-wrap: anywhere; }
.page-single .content-entry a { text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.page-single .content-entry :is(h2, h3, h4) { margin-block: 1em .4em; line-height: 1.5; }
.page-single .content-entry :is(p, ul, ol) { margin-block: 0 .25em; }
.page-single .content-entry :is(ul, ol) { padding-inline-start: 1.4em; }
.page-single .content-entry p:has(> br:only-child) { margin: 0; line-height: .45; }
.store-footer__inner :is(p, a) { transition: color var(--fa-fast); }

.store-footer__inner :is(.s-contacts-icon, .s-social-link a) {
    transition: transform .35s var(--fa-ease-spring), box-shadow .3s ease !important;
}

.store-footer__inner :is(.s-contacts-icon, .s-social-link a):hover { transform: translateY(-4px) scale(1.06); }

footer .fa-freelance-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 22px auto 0;
    padding: 10px 14px;
    width: fit-content;
    max-width: 100%;
    direction: rtl;
}

footer .fa-freelance-badge img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    flex-shrink: 0;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

footer .footer-vat .fa-freelance-badge { margin: 0 auto; padding: 0; }
footer .fa-freelance-badge > div { display: flex; flex-direction: column; gap: 5px; text-align: start; }
footer .fa-freelance-badge span { font-size: 14px; }
footer .fa-freelance-badge b { font-size: 14px; font-weight: 500; white-space: nowrap; }

@media (max-width: 767px) { footer .footer-vat:has(.fa-freelance-badge) { margin-top: 18px; } }

html.fa-forest-motion .fa-inline-product-bar salla-add-product-button { gap: 12px !important; flex-wrap: wrap; }
html.fa-forest-motion .fa-inline-product-bar salla-add-product-button > * { flex: 1 1 140px; min-width: 0; }

html.fa-forest-motion :is(.fa-inline-product-bar, .s-product-card-content-footer) :is(.fa-btn-cart, .fa-btn-buy) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    padding: 0 18px !important;
    font-family: inherit;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    border-radius: 15px !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .22s var(--fa-ease), box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .25s ease, color .2s ease !important;
}

html.fa-forest-motion :is(.fa-inline-product-bar, .s-product-card-content-footer) :is(.fa-btn-cart, .fa-btn-buy) :is(i, svg) { font-size: 1.2em; line-height: 1; flex: 0 0 auto; }

html.fa-forest-motion .fa-inline-product-bar .fa-btn-buy {
    font-size: 16px !important;
}

html.fa-forest-motion .s-product-card-content-footer :is(.fa-btn-cart, .fa-btn-buy) { min-height: 46px; font-size: 14.5px !important; border-radius: 14px !important; }

@media (hover: hover) {
    html.fa-forest-motion .fa-inline-product-bar .fa-btn-buy:not(:disabled):hover {
        transform: translateY(-2px);
    }

    html.fa-forest-motion .fa-inline-product-bar .fa-btn-cart:not(:disabled):hover {
        transform: translateY(-2px);
    }
}

html.fa-forest-motion :is(.fa-inline-product-bar, .s-product-card-content-footer) :is(.fa-btn-cart, .fa-btn-buy):not(:disabled):active {
    transform: scale(.96) !important;
}

@media (hover: none) {
}

html.fa-forest-motion :is(.fa-btn-cart, .fa-btn-buy):focus-visible { outline-offset: 3px; }
html.fa-forest-motion :is(.fa-btn-cart, .fa-btn-buy):disabled { opacity: .55; }

@media (max-width: 480px) {
    html.fa-forest-motion :is(.fa-inline-product-bar) :is(.fa-btn-cart, .fa-btn-buy) { min-height: 50px; font-size: 15px !important; padding: 0 12px !important; }
}

#mobile-menu .fa-menu-header::after {
    content: "";
    position: absolute;
    inset-inline: 17px;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
}

#mobile-menu .fa-menu-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
#mobile-menu .fa-menu-arrow { flex-basis: 36px; width: 36px; height: 36px; }
#mobile-menu .fa-menu-link { touch-action: manipulation; }

#mobile-menu .fa-menu-link:active {
    transform: scale(.98);
}

@media (max-width: 768px) {
    #mobile-menu .fa-menu-link { min-height: 52px; padding-inline: 13px !important; font-size: 14.5px; }
    #mobile-menu .fa-submenu a { min-height: 46px !important; }
}
@media (min-width: 1025px) {
    header .main-menu > li > a,
    header nav .main-menu > li > a {
        transition: background-size .4s var(--fa-ease), color .2s ease !important;
    }
}

.s-block--testimonials { position: relative; isolation: isolate; }

.s-block--testimonials::before {
    content: "";
    position: absolute;
    inset: 6% -10% 2%;
    z-index: -1;
    pointer-events: none;
}

.s-block--testimonials .bg-white,
.s-block--testimonials .da-bgg {
    border-radius: 22px !important;
    touch-action: manipulation;
}
.s-block--testimonials :is(.bg-white, .da-bgg):not(:has(:is(.bg-white, .da-bgg))):not(:has(.sicon-quote))::after {
    content: "\201D";
    position: absolute;
    inset-inline-end: 16px;
    top: 2px;
    font-family: Georgia, serif;
    font-size: 78px;
    line-height: 1;
    pointer-events: none;
}

.s-block--testimonials :is(h3, h4, strong) { font-weight: 700; letter-spacing: .1px; }
.s-block--testimonials :is(p, .da-tm) { line-height: 1.85; font-size: 14.5px; }

.s-block--testimonials :is(.bg-white, .da-bgg):active {
    transform: scale(.985);
}

@media (max-width: 480px) {
    .s-block--testimonials :is(p, .da-tm) { font-size: 14px; line-height: 1.8; }
    .s-block--testimonials :is(.bg-white, .da-bgg) { border-radius: 18px !important; }
    .s-block--testimonials :is(.bg-white, .da-bgg):not(:has(:is(.bg-white, .da-bgg))):not(:has(.sicon-quote))::after { font-size: 60px; inset-inline-end: 12px; }
}

.p--features__item,
.angel-feature {
    touch-action: manipulation;
}

.p--features__item i,
.angel-feature i {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    font-size: 22px;
    border-radius: 16px;
}

.angel-feature :is(h3, h4, strong) {
    font-weight: 800;
    font-size: clamp(18px, 4.6vw, 24px);
}

.p--features__item:active,
.angel-feature:active {
    transform: scale(.97);
}

.p--features__item:active i,
.angel-feature:active i { transform: scale(1.1) rotate(-6deg); }

@media (max-width: 768px) {
    .p--features__item i, .angel-feature i { width: 44px; height: 44px; font-size: 19px; border-radius: 14px; margin-bottom: 8px; }
}

.s-block--bundle-info-panel > [component-name="info-panel"] {
    display: block;
    position: relative;
    padding: clamp(12px, 3vw, 32px);
    border-radius: var(--fa-r-xl);
    overflow: hidden;
}

.s-block--payment {
    padding: 18px 16px;
    border-radius: 20px !important;
}

.s-block--payment li,
salla-payments li {
    border-radius: 10px !important;
    min-width: 58px;
    padding: 5px 9px !important;
}

.s-block--payment li img,
salla-payments li img { object-fit: contain; max-width: 100%; max-height: 100%; }

@media (hover: hover) { }
.s-block--payment li:active { transform: translateY(-2px) scale(.97); }

@media (max-width: 480px) {
    .s-block--payment { padding: 14px 10px; border-radius: 16px !important; }
    .s-block--payment li, salla-payments li { min-width: 52px; padding: 4px 7px !important; border-radius: 9px !important; }
}

html { overflow-x: clip; }
h1, h2, h3, p, a, li { overflow-wrap: break-word; }

@media (max-width: 430px) {
    .s-block { margin-top: 24px; }
    .s-product-card-content { padding: 10px !important; }
    .s-product-card-content-title, .s-product-card-entry h3 { font-size: 13.5px !important; line-height: 1.5 !important; }
    .s-product-card-price, .s-product-card-sale-price { font-size: 15px !important; }
    .s-product-card-entry { border-radius: 16px !important; }
    .tabs__product .tab-trigger, #product-tabs .tab-trigger { min-height: 44px; padding-inline: 12px; font-size: 13.5px; }
    .faqs-list__item { border-radius: 15px !important; }
    .fa-v2-atmosphere::before, .fa-v2-atmosphere::after { opacity: .8; }
}

@media (max-width: 390px) {
    .fa-mobile-nav { inset-inline: 8px; padding: 5px 4px; }
    .fa-mobile-nav :is(a, button) { font-size: 11px; gap: 4px; }
    .fa-mobile-nav svg { width: 22px; height: 22px; }
    .sticky-product-bar, .sticky-product-bar.fa-inline-product-bar { padding: 11px !important; }
}

@media (max-width: 360px) {
    .s-block__title h2 { font-size: 18.5px !important; }
    .s-product-card-content { padding: 8px !important; }
    .s-product-card-category { font-size: 10.5px; padding: 3px 7px; }
    .fa-mobile-nav :is(a, button) { font-size: 10.5px; }
    html.fa-forest-motion .product-form #product-tabs-options,
    html.fa-forest-motion .product-form .tabs-wrapper__product { padding: 18px 12px 2px !important; }
    html.fa-forest-motion .product-form .fa-v2-field,
    html.fa-forest-motion .product-form .s-product-options-option.fa-v2-field { padding-inline-start: 36px !important; }
    html.fa-forest-motion .product-form .fa-v2-field::before { width: 27px; height: 27px; font-size: 10px; }
    html.fa-forest-motion .product-form .fa-v2-field::after { inset-inline-start: 13px; top: 30px; }
    .s-block--bundle-info-panel > [component-name="info-panel"] { padding: 10px; }
    footer .fa-freelance-badge { flex-wrap: wrap; text-align: center; }
    #mobile-menu .fa-menu-link { font-size: 14px; }
}

@media (max-width: 768px) {
}

.tabs__product, #product-tabs { padding-top: 3px; }

.swiper:has(:is(.s-product-card-entry, [id^="angel-product-"])),
.s-block--testimonials .swiper {
    padding-top: 14px;
    margin-top: -14px;
}

.swiper .s-product-card-entry:hover,
.swiper [id^="angel-product-"]:hover { transform: translateY(-4px); }
.swiper .s-block--testimonials .bg-white:hover { transform: translateY(-3px); }

.p--features__item::before { display: none !important; content: none !important; }

html.fa-forest-motion .sticky-product-bar.fa-inline-product-bar { min-height: 0 !important; height: auto !important; }

html.fa-forest-motion .fa-inline-product-bar > .container {
    min-height: 0 !important;
    height: auto !important;
    align-content: flex-start;
}

html.fa-forest-motion .fa-inline-product-bar > .container > div:empty,
html.fa-forest-motion .fa-inline-product-bar salla-add-product-button > :empty { display: none; }
html.fa-forest-motion .product-form > .sticky-product-bar,
html.fa-forest-motion .sticky-product-bar.fa-inline-product-bar {
    flex: 0 0 auto !important;
    align-self: stretch;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 14px !important;
    margin: 10px 0 0 !important;
    border-radius: 16px !important;
}

html.fa-forest-motion .fa-inline-product-bar > .container {
    flex: 0 0 auto !important;
    gap: 10px !important;
    row-gap: 10px !important;
    align-content: flex-start !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
}

html.fa-forest-motion .fa-inline-product-bar > .container::before,
html.fa-forest-motion .fa-inline-product-bar > .container::after { display: none !important; content: none !important; }

html.fa-forest-motion .fa-inline-product-bar > .container > * { margin: 0 !important; min-height: 0 !important; height: auto; }
html.fa-forest-motion .fa-inline-product-bar > .container > div:first-child:not(.sticky-product-bar__quantity):not(:has(salla-quantity-input)) { gap: 10px; align-items: center; }
html.fa-forest-motion .fa-inline-product-bar :is(h1, h2, h3, h4, .sticky-product-bar__title) { margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; }
html.fa-forest-motion .fa-inline-product-bar :is(p, .price, [class*="price"]) { margin: 0 !important; line-height: 1.4; }
html.fa-forest-motion .fa-inline-product-bar .sticky-product-bar__quantity:not(:has(input:not([type="hidden"]))) { display: none !important; }

html.fa-forest-motion .fa-inline-product-bar salla-add-product-button { align-self: flex-start; height: auto !important; min-height: 0 !important; gap: 10px !important; }
html.fa-forest-motion .fa-inline-product-bar :is(.fa-btn-cart, .fa-btn-buy, salla-quick-buy :is(button, a, .s-button-element)) {
    min-height: 46px !important;
    height: auto;
    padding-block: 0 !important;
    border-radius: 13px !important;
    font-size: 15px !important;
}
html.fa-forest-motion .fa-inline-product-bar salla-quick-buy :is(button, a, .s-button-element) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-weight: 700 !important;
    touch-action: manipulation;
}

html.fa-forest-motion .fa-inline-product-bar salla-quick-buy :is(button, a, .s-button-element):not(:disabled):active { transform: scale(.96); }
.p--features__item,
.angel-feature {
    padding: 12px 14px !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 10px;
    border-radius: 16px !important;
}

.p--features__item i,
.angel-feature i { width: 42px; height: 42px; margin: 0 !important; font-size: 19px; border-radius: 13px; }

.angel-feature :is(h3, h4, strong) { font-size: clamp(15px, 3.8vw, 18px); margin: 0 !important; line-height: 1.4; }
.angel-feature :is(p, span) { margin: 0; line-height: 1.45; }
.s-block:has(.angel-feature),
.s-block:has(.p--features__item) { margin-top: 18px !important; margin-bottom: 0 !important; }

.s-block:has(.angel-feature) + .s-block,
.s-block:has(.p--features__item) + .s-block,
.s-block--payment { margin-top: 14px !important; }

@media (max-width: 768px) {
    html.fa-forest-motion .product-form > .sticky-product-bar,
    html.fa-forest-motion .sticky-product-bar.fa-inline-product-bar { padding: 10px 12px !important; margin: 8px 0 0 !important; border-radius: 15px !important; }
    html.fa-forest-motion .fa-inline-product-bar :is(h1, h2, h3, h4, .sticky-product-bar__title) { font-size: 14px !important; }
    .p--features__item, .angel-feature { padding: 10px 12px !important; gap: 8px; border-radius: 14px !important; }
    .p--features__item i, .angel-feature i { width: 38px; height: 38px; font-size: 17px; border-radius: 12px; }
    .s-block:has(.angel-feature), .s-block:has(.p--features__item) { margin-top: 14px !important; }
    .s-block:has(.angel-feature) + .s-block, .s-block:has(.p--features__item) + .s-block, .s-block--payment { margin-top: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    html.fa-forest-motion .fa-pre { opacity: 1 !important; }
    html.fa-forest-motion .fa-in, html.fa-forest-motion .fa-in * { animation: none !important; }
    #mobile-menu .fa-menu-item { opacity: 1 !important; transform: none !important; }
    .fa-v2-enter { opacity: 1 !important; translate: none !important; }
}
.fa-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.fa-ambient > * {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.fa-ambient .is-g { }
.fa-ambient .is-b { }
.fa-ambient .is-w { }

/* particles: slow upward drift, each with its own size / speed / delay / angle */

.fa-amb-p {
    left: var(--x);
    width: var(--s);
    height: var(--s);
    animation: fa-amb-rise var(--t) linear infinite;
    animation-delay: calc(var(--dl) * -1s);
}

.fa-amb-p.is-dot {
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0, currentColor 38%, transparent 72%);
}

.fa-amb-p.is-dia { border: 1px solid currentColor; }

.fa-amb-p.is-plus::before,
.fa-amb-p.is-plus::after {
    content: "";
    position: absolute;
    background: currentColor;
}

.fa-amb-p.is-plus::before { left: 0; right: 0; top: 50%; height: 1px; }
.fa-amb-p.is-plus::after { top: 0; bottom: 0; left: 50%; width: 1px; }

@keyframes fa-amb-rise {
    0%   { transform: translate3d(0, 108vh, 0) rotate(var(--rot, 0deg)); opacity: 0; }
    12%  { opacity: var(--o, .5); }
    88%  { opacity: var(--o, .5); }
    100% { transform: translate3d(var(--dx, 0), -10vh, 0) rotate(calc(var(--rot, 0deg) + var(--spin, 0deg))); opacity: 0; }
}

/* thin lines: travel across for ~half of their cycle, then rest (never all at once) */

.fa-amb-l {
    top: var(--y);
    width: var(--w);
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
    animation: fa-amb-slide var(--t) cubic-bezier(.4, 0, .2, 1) infinite;
    animation-delay: calc(var(--dl) * -1s);
    will-change: transform, opacity;
}

.fa-amb-l.is-rev { animation-name: fa-amb-slide-rev; }

.fa-amb-l.is-v {
    top: 0;
    left: var(--x);
    width: 1px;
    height: var(--w);
    background: linear-gradient(180deg, transparent, currentColor 50%, transparent);
    animation-name: fa-amb-drop;
}

@keyframes fa-amb-slide {
    0%   { transform: translate3d(-45vw, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
    8%   { opacity: var(--o, .4); }
    46%  { opacity: var(--o, .4); }
    56%  { transform: translate3d(115vw, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
    100% { transform: translate3d(115vw, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
}

@keyframes fa-amb-slide-rev {
    0%   { transform: translate3d(115vw, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
    8%   { opacity: var(--o, .4); }
    46%  { opacity: var(--o, .4); }
    56%  { transform: translate3d(-45vw, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
    100% { transform: translate3d(-45vw, 0, 0) rotate(var(--r, 0deg)); opacity: 0; }
}

@keyframes fa-amb-drop {
    0%   { transform: translate3d(0, -45vh, 0); opacity: 0; }
    8%   { opacity: var(--o, .4); }
    46%  { opacity: var(--o, .4); }
    56%  { transform: translate3d(0, 115vh, 0); opacity: 0; }
    100% { transform: translate3d(0, 115vh, 0); opacity: 0; }
}

/* light streaks: a short, soft comet that crosses the screen only occasionally */

.fa-amb-s {
    top: var(--y);
    width: var(--w);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, currentColor 55%, var(--fa-text));
    box-shadow: 0 0 12px currentColor;
    animation: fa-amb-streak var(--t) cubic-bezier(.3, .1, .2, 1) infinite;
    animation-delay: calc(var(--dl) * -1s);
    will-change: transform, opacity;
}

@keyframes fa-amb-streak {
    0%, 80% { transform: translate3d(-30vw, 0, 0) rotate(var(--r, 10deg)); opacity: 0; }
    83%     { opacity: var(--o, .7); }
    94%     { opacity: var(--o, .7); }
    100%    { transform: translate3d(125vw, 16vh, 0) rotate(var(--r, 10deg)); opacity: 0; }
}

@media (max-width: 768px) {
    .fa-amb-s { box-shadow: none; }
}

/* reduced motion: a quiet static version (positions set by JS), no movement */
@media (prefers-reduced-motion: reduce) {
    .fa-ambient > * { animation: none !important; }
    .fa-amb-p { opacity: calc(var(--o, .4) * .8); transform: translate3d(0, var(--ys, 50vh), 0) rotate(var(--rot, 0deg)); }
    .fa-amb-l { opacity: calc(var(--o, .4) * .6); transform: translate3d(var(--xs, 20vw), 0, 0) rotate(var(--r, 0deg)); }
    .fa-amb-l.is-v { transform: translate3d(0, var(--ys, 20vh), 0); }
    .fa-amb-s { display: none; }
}


:root{--fa-ease-out:cubic-bezier(.16,1,.3,1);--fa-ease-spring:cubic-bezier(.34,1.56,.64,1);}
@property --fa-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
body{isolation:isolate;}
.fa-ambient{color:var(--fa-accent);opacity:.32;}
.fa-ambient .is-g{color:var(--fa-primary-hover);}.fa-ambient .is-b{color:var(--fa-accent);}.fa-ambient .is-w{color:var(--fa-text);}
.fa-motion-paused .fa-ambient *{animation-play-state:paused!important;}
html.fa-forest-motion .product-form .tabs-wrapper__product{padding:0!important;}
html.fa-forest-motion .product-form #product-tabs-options{padding:24px 22px 8px!important;}
html.fa-forest-motion .product-form .fa-v2-field::before{color:var(--fa-muted);background:var(--fa-surface);border:1px solid var(--fa-border-2);}
html.fa-forest-motion .product-form .fa-v2-field::after{background:var(--fa-border-2);}
html.fa-forest-motion .product-form .fa-v2-field:focus-within::before{color:var(--fa-text);background:var(--fa-primary);border-color:var(--fa-primary-hover);}
html.fa-forest-motion .product-form .fa-v2-field.fa-v2-filled::before{color:var(--fa-text);background:var(--fa-surface-3);}
html.fa-forest-motion .product-form #product-tabs-options::before{background:conic-gradient(from var(--fa-angle),transparent,var(--fa-primary-hover),transparent 35%);}
.fa-v2-ripple{background:var(--fa-text);opacity:.14;}
@media(max-width:768px){html.fa-forest-motion .product-form #product-tabs-options{padding:18px 14px 4px!important;}}