/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --spacing: .25rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --radius-lg: .5rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring:where(:not(iframe)) {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }

    * {
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth
    }

    body {
        background-color: var(--color-page);
        color: var(--color-body);
        font-family: var(--font-body);
        margin: 0
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--color-heading);
        font-family: var(--font-heading)
    }

    img {
        max-width: 100%;
        display: block
    }

    button,
    input,
    select,
    textarea {
        font: inherit
    }
}

@layer components {
    .site-container {
        width: 100%;
        max-width: var(--container-width);
        margin-inline: auto;
        
    }

    .section-space {
        padding-block: var(--section-spacing)
    }

    .btn-primary {
        border-radius: var(--radius-button);
        background-color: var(--color-primary);
        min-height: 44px;
        color: var(--color-white);
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        font-weight: 600;
        transition: all .2s;
        display: inline-flex
    }

    .btn-primary:hover {
        background-color: var(--color-primary-hover)
    }

    .card {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card)
    }

    .selo-header {
        --wbn-topbar-bg: var(--color-secondary);
        --wbn-topbar-text: var(--color-white);
        --wbn-header-bg: var(--color-surface);
        --wbn-header-border: var(--color-border);
        --wbn-search-bg: var(--color-surface);
        --wbn-search-border: var(--color-border);
        --wbn-icon-bg: var(--color-primary-soft);
        --wbn-icon-border: #eadcff;
        --wbn-bottom-nav-bg: var(--color-surface);
        --wbn-bottom-nav-border: var(--color-border)
    }

    .selo-menu-list {
        justify-content: center
    }

    .selo-menu-link,
    .wbn-dropdown-panel a,
    .wbn-dropdown-panel button,
    .selo-mobile-category-button {
        cursor: pointer
    }

    .wbn-dropdown-panel {
        padding: 8px
    }

    .wbn-child-dropdown {
        border-left: 3px solid var(--color-primary)
    }

    .selo-submenu-link {
        min-height: 40px;
        color: var(--color-heading);
        border-radius: 9px;
        align-items: center;
        padding: 9px 12px;
        font-size: 14px;
        font-weight: 500;
        transition: all .2s;
        display: flex
    }

    .selo-submenu-link:hover {
        background-color: var(--color-primary-soft);
        color: var(--color-primary);
        padding-left: 16px
    }

    .wbn-quick-actions {
        gap: 8px
    }

    .wbn-quick-card {
        min-height: 76px;
        box-shadow: none;
        border-radius: 12px;
        padding: 9px 5px
    }

    .wbn-quick-icon {
        background-color: var(--color-primary-soft);
        width: 32px;
        height: 32px;
        color: var(--color-primary);
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        margin-inline: auto;
        display: flex
    }

    .selo-mobile-category-button,
    .selo-mobile-category-link {
        width: 100%;
        min-height: 52px;
        color: var(--color-heading);
        border: 1px solid #0000;
        border-radius: 12px;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 7px 10px;
        font-weight: 600;
        transition: all .2s;
        display: flex
    }

    .selo-mobile-category-button:hover,
    .selo-mobile-category-link:hover {
        border-color: var(--color-border);
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-mobile-category-content {
        align-items: center;
        gap: 11px;
        display: flex
    }

    .selo-mobile-category-icon {
        background-color: var(--color-surface-soft);
        width: 36px;
        height: 36px;
        color: var(--color-primary);
        border-radius: 10px;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .selo-mobile-tree {
        border-left: 1px dashed var(--color-border);
        margin: 4px 0 6px 27px;
        padding-left: 13px
    }

    .selo-mobile-tree-button,
    .selo-mobile-tree-link {
        width: 100%;
        min-height: 40px;
        color: var(--color-body);
        cursor: pointer;
        border-radius: 9px;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        font-size: 14px;
        font-weight: 500;
        transition: all .2s;
        display: flex
    }

    .selo-mobile-tree-button:hover,
    .selo-mobile-tree-link:hover {
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-mobile-child-tree {
        border-left: 1px solid var(--color-border);
        margin-left: 10px;
        padding-left: 11px
    }

    html[data-theme=dark] .selo-header {
        --wbn-topbar-bg: #070b14;
        --wbn-topbar-text: #fff;
        --wbn-header-bg: var(--color-surface);
        --wbn-header-border: var(--color-border);
        --wbn-search-bg: var(--color-surface);
        --wbn-search-border: var(--color-border);
        --wbn-icon-bg: var(--color-surface-soft);
        --wbn-icon-border: var(--color-border);
        --wbn-bottom-nav-bg: var(--color-surface);
        --wbn-bottom-nav-border: var(--color-border)
    }

    .wbn-topbar {
        background-color: var(--wbn-topbar-bg);
        color: var(--wbn-topbar-text)
    }

    .selo-header-main,
    .selo-menu-bar {
        background-color: var(--wbn-header-bg);
        border-color: var(--wbn-header-border)
    }

    .selo-search-input {
        border: 1px solid var(--wbn-search-border);
        background-color: var(--wbn-search-bg);
        width: 100%;
        height: 44px;
        color: var(--color-heading);
        border-radius: 999px;
        outline: none;
        padding: 0 56px 0 22px
    }

    .selo-search-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px #8224e31f
    }

    .selo-search-button {
        background-color: var(--color-primary);
        width: 36px;
        height: 36px;
        color: var(--color-white);
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        display: flex;
        position: absolute;
        top: 4px;
        right: 4px
    }

    .wbn-header-icon {
        border: 1px solid var(--wbn-icon-border);
        background-color: var(--wbn-icon-bg);
        width: 40px;
        height: 40px;
        color: var(--color-primary);
        border-radius: 14px;
        justify-content: center;
        align-items: center;
        transition: all .2s;
        display: inline-flex;
        position: relative
    }

    .wbn-header-icon:hover {
        border-color: var(--color-primary);
        transform: translateY(-1px)
    }

    .selo-menu-link {
        color: var(--color-heading);
        align-items: center;
        gap: 4px;
        font-size: 15px;
        font-weight: 600;
        transition: color .2s;
        display: inline-flex
    }

    .selo-menu-link:hover {
        color: var(--color-primary)
    }

    .wbn-dropdown-panel {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card)
    }

    .selo-drawer {
        background-color: var(--color-surface)
    }

    .wbn-bottom-navigation {
        background-color: var(--wbn-bottom-nav-bg);
        border-color: var(--wbn-bottom-nav-border)
    }

    @media (width>=1024px) {
        .selo-desktop-sticky-area {
            z-index: 50;
            width: 100%;
            position: sticky;
            top: 0
        }
    }

    .selo-hero {
        background-color: var(--color-page);
        padding-block: 18px
    }

    .wbn-hero-slider {
        border-radius: var(--radius-card);
        background-color: var(--color-surface-soft);
        position: relative;
        overflow: hidden
    }

    .selo-hero-track {
        will-change: transform;
        transition: transform .6s;
        display: flex
    }

    .selo-hero-slide {
        flex: 0 0 100%;
        width: 100%
    }

    .selo-hero-picture,
    .selo-hero-image {
        width: 100%;
        display: block
    }

    .selo-hero-image {
        object-fit: cover
    }

    .selo-hero-arrow {
        z-index: 10;
        width: 42px;
        height: 42px;
        color: var(--color-primary);
        box-shadow: var(--shadow-card);
        cursor: pointer;
        background-color: #ffffffeb;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        transition: all .2s;
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .selo-hero-arrow:hover {
        background-color: var(--color-primary);
        color: var(--color-white)
    }

    .selo-hero-arrow-prev {
        left: 16px
    }

    .selo-hero-arrow-next {
        right: 16px
    }

    .wbn-hero-dots {
        z-index: 10;
        gap: 8px;
        display: flex;
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translate(-50%)
    }

    .selo-hero-dot {
        cursor: pointer;
        background-color: #ffffff8c;
        border-radius: 999px;
        width: 9px;
        height: 9px;
        transition: all .25s
    }

    .selo-hero-dot.is-active {
        background-color: var(--color-primary);
        width: 26px
    }

    .selo-category-section {
        background-color: var(--color-page);
        padding-block: 56px
    }

    .wbn-category-heading {
        text-align: center;
        margin-bottom: 30px
    }

    .selo-category-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 700;
        line-height: 1.2
    }

    .selo-category-description {
        color: var(--color-body);
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.6
    }

    .wbn-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        display: grid
    }

    .selo-category-card {
        border: 1px solid var(--color-border);
        border-radius: calc(var(--radius-card) - 4px);
        background-color: var(--color-surface);
        min-width: 0;
        box-shadow: var(--shadow-card);
        cursor: pointer;
        padding: 8px;
        transition: transform .22s, border-color .22s, box-shadow .22s;
        display: block;
        overflow: hidden
    }

    .selo-category-card:hover {
        border-color: var(--color-primary);
        transform: translateY(-4px)
    }

    .wbn-category-image-wrap {
        aspect-ratio: 1;
        border-radius: calc(var(--radius-card) -5px);
        background-color: var(--color-surface-soft);
        overflow: hidden
    }

    .selo-category-image {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: transform .35s
    }

    .selo-category-card:hover .selo-category-image {
        transform: scale(1.05)
    }

    .selo-category-name {
        color: var(--color-heading);
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 9px;
        padding-inline: 2px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
        display: block;
        overflow: hidden
    }

    .selo-products-section {
        background-color: var(--color-page);
        padding-bottom: 40px
    }

    .wbn-products-heading {
        text-align: center;
        margin-bottom: 28px
    }

    .selo-products-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 700;
        line-height: 1.2
    }

    .selo-products-description {
        color: var(--color-body);
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.6
    }

    .wbn-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        display: grid
    }

    .selo-product-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        flex-direction: column;
        min-width: 0;
        height: 100%;
        transition: transform .26s, border-color .26s, box-shadow .26s;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .selo-product-card:hover {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-card)
    }

    .wbn-product-image-area {
        aspect-ratio: 1;
        background-color: var(--color-surface-soft);
        flex-shrink: 0;
        position: relative;
        overflow: hidden
    }

    .selo-product-image {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: transform .45s
    }

    .selo-product-card:hover .selo-product-image {
        transform: scale(1.045)
    }

    .selo-product-badge {
        z-index: 5;
        background-color: var(--color-primary);
        min-height: 24px;
        color: var(--color-white);
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        padding-inline: 8px;
        font-size: 10px;
        font-weight: 700;
        display: inline-flex;
        position: absolute;
        top: 8px;
        left: 8px
    }

    .wbn-product-quick-view {
        z-index: 5;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        width: 38px;
        height: 38px;
        color: var(--color-primary);
        box-shadow: var(--shadow-card);
        cursor: pointer;
        opacity: 0;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        transition: opacity .22s, transform .22s, background-color .22s, color .22s;
        display: none;
        position: absolute;
        top: 12px;
        right: 10px;
        transform: translate(14px)
    }

    .wbn-product-quick-view:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: var(--color-white)
    }

    .selo-product-content {
        flex-direction: column;
        flex: 1;
        padding: 10px;
        display: flex
    }

    .selo-product-name {
        height: 38px;
        min-height: 38px;
        color: var(--color-heading);
        font-family: var(--font-heading);
        text-align: center;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
        display: -webkit-box;
        overflow: hidden
    }

    .wbn-product-price {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5px;
        min-height: 24px;
        margin-top: 7px;
        display: flex
    }

    .selo-product-old-price {
        color: var(--color-muted);
        font-size: 11px;
        text-decoration: line-through
    }

    .selo-product-current-price {
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 700
    }

    .selo-product-button {
        background-color: var(--color-primary);
        width: 100%;
        min-height: 38px;
        color: var(--color-white);
        cursor: pointer;
        border-radius: 6px;
        justify-content: center;
        align-items: center;
        margin-top: 9px;
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 650;
        transition: background-color .22s, transform .22s;
        display: flex
    }

    .selo-product-button:hover {
        background-color: var(--color-primary-hover)
    }

    .selo-products-all-button {
        background-color: var(--color-secondary);
        min-height: 44px;
        color: var(--color-white);
        cursor: pointer;
        border-radius: 6px;
        justify-content: center;
        align-items: center;
        padding: 10px 22px;
        font-size: 14px;
        font-weight: 650;
        transition: transform .22s, background-color .22s;
        display: inline-flex
    }

    .selo-products-all-button:hover {
        background-color: var(--color-accent);
        transform: translateY(-2px)
    }

    .wbn-products-view-all {
        justify-content: center;
        margin-top: 28px;
        display: flex
    }

    @media (width>=640px) {
        .wbn-products-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px
        }

        .selo-product-content {
            padding: 12px
        }

        .selo-product-name {
            height: 38px;
            min-height: 38px;
            font-size: 14px
        }

        .selo-product-old-price {
            font-size: 12px
        }

        .selo-product-current-price {
            font-size: 15px
        }

        .selo-product-button {
            min-height: 40px;
            font-size: 13px
        }
    }

    @media (width<=1023px) {
        .wbn-product-quick-view {
            opacity: 1;
            display: flex;
            transform: translate(0)
        }
    }

    @media (width>=1024px) {
        .wbn-products-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            align-items: stretch;
            gap: 18px
        }

        .selo-product-card:hover {
            transform: translateY(-5px)
        }

        .wbn-product-quick-view {
            display: flex
        }

        .selo-product-card:hover .wbn-product-quick-view {
            opacity: 1;
            transform: translate(0)
        }

        .selo-product-content {
            padding: 14px
        }

        .selo-product-name {
            height: 38px;
            min-height: 38px;
            font-size: 15px
        }

        .selo-product-current-price {
            font-size: 16px
        }
    }

    @media (width<=639px) {
        .wbn-product-quick-view {
            border-radius: 8px;
            width: 32px;
            height: 32px;
            top: 8px;
            right: 8px
        }

        .wbn-product-quick-view svg {
            width: 16px;
            height: 16px
        }
    }

    .selo-reviews-section {
        background-color: var(--color-surface-soft);
        padding-block: 48px;
        overflow: hidden
    }

    .wbn-reviews-heading {
        text-align: center;
        margin-bottom: 28px
    }

    .selo-reviews-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        font-size: clamp(23px, 2.5vw, 32px);
        font-weight: 700;
        line-height: 1.2
    }

    .selo-reviews-description {
        color: var(--color-body);
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.6
    }

    .wbn-reviews-slider {
        position: relative
    }

    .selo-reviews-viewport {
        overflow: hidden
    }

    .selo-reviews-track {
        will-change: transform;
        margin-inline: -5px;
        transition: transform .6s;
        display: flex
    }

    .selo-review-slide {
        flex: 0 0 100%;
        width: 100%;
        padding-inline: 5px
    }

    .selo-review-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        height: 100%;
        min-height: 260px;
        box-shadow: var(--shadow-card);
        flex-direction: column;
        padding: 22px;
        display: flex
    }

    .wbn-review-author {
        align-items: center;
        gap: 13px;
        display: flex
    }

    .selo-review-image {
        border: 2px solid var(--color-primary-soft);
        object-fit: cover;
        border-radius: 50%;
        flex-shrink: 0;
        width: 52px;
        height: 52px
    }

    .selo-review-name {
        color: var(--color-heading);
        font-family: var(--font-heading);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3
    }

    .selo-review-position {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 13px;
        display: block
    }

    .selo-review-text {
        color: var(--color-body);
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        margin-top: 19px;
        font-size: 14px;
        line-height: 1.75;
        display: -webkit-box;
        overflow: hidden
    }

    .wbn-review-quote {
        color: var(--color-primary);
        opacity: .28;
        margin-top: auto;
        padding-top: 18px
    }

    .selo-review-arrow {
        z-index: 10;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        width: 42px;
        height: 42px;
        color: var(--color-primary);
        box-shadow: var(--shadow-card);
        cursor: pointer;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        transition: all .2s;
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .selo-review-arrow:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: var(--color-white)
    }

    .selo-review-arrow-prev {
        left: -21px
    }

    .selo-review-arrow-next {
        right: -21px
    }

    .selo-footer {
        --wbn-footer-bg: var(--color-secondary);
        --wbn-footer-surface: #ffffff0a;
        --wbn-footer-heading: #fff;
        --wbn-footer-text: #cbd5e1;
        --wbn-footer-muted: #94a3b8;
        --wbn-footer-border: #ffffff1f;
        --wbn-footer-accent: var(--color-primary);
        background-color: var(--wbn-footer-bg);
        color: var(--wbn-footer-text)
    }

    html[data-theme=dark] .selo-footer {
        --wbn-footer-bg: #020617;
        --wbn-footer-surface: #ffffff09;
        --wbn-footer-border: #ffffff1a
    }

    .wbn-footer-main {
        padding-block: 48px 38px
    }

    .selo-footer-grid {
        gap: 32px;
        display: grid
    }

    .selo-footer-logo {
        object-fit: contain;
        width: auto;
        height: 50px;
        margin-left: -3px
    }

    .selo-footer-title {
        color: var(--wbn-footer-heading);
        font-family: var(--font-heading);
        margin-bottom: 22px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        position: relative
    }

   

    .selo-footer-about-text {
        max-width: 340px;
        color: var(--wbn-footer-text);
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.8
    }

    .wbn-footer-list {
        gap: 12px;
        display: grid
    }

    .selo-footer-link {
        width: fit-content;
        color: var(--wbn-footer-text);
        align-items: center;
        font-size: 14px;
        line-height: 1.5;
        transition: color .2s, transform .2s;
        display: inline-flex
    }

    .selo-footer-link:hover {
        color: var(--wbn-footer-accent);
        transform: translate(3px)
    }

    .selo-footer-info-item {
        color: var(--wbn-footer-text);
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        line-height: 1.6;
        display: flex
    }

    .selo-footer-info-icon {
        width: 20px;
        height: 20px;
        color: var(--wbn-footer-accent);
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        margin-top: 1px;
        display: flex
    }

    .selo-footer-social-link {
        color: var(--wbn-footer-text);
        align-items: center;
        gap: 10px;
        font-size: 14px;
        transition: color .2s, transform .2s;
        display: flex
    }

    .selo-footer-social-link:hover {
        color: var(--wbn-footer-accent);
        transform: translate(3px)
    }

    .selo-footer-social-icon {
        border: 1px solid var(--wbn-footer-border);
        background-color: var(--wbn-footer-surface);
        width: 34px;
        height: 34px;
        color: var(--wbn-footer-accent);
        border-radius: 9px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .wbn-footer-bottom {
        border-top: 1px solid var(--wbn-footer-border);
        padding-block: 20px
    }

    .selo-footer-bottom-inner {
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 9px;
        display: flex
    }

    .selo-footer-copyright,
    .selo-footer-credit {
        color: var(--wbn-footer-muted);
        font-size: 13px;
        line-height: 1.6
    }

    .selo-footer-credit a {
        color: var(--wbn-footer-accent);
        font-weight: 600
    }

    .selo-footer-accordion {
        border-bottom: 1px solid var(--wbn-footer-border)
    }

    .selo-footer-accordion-button {
        width: 100%;
        min-height: 54px;
        color: var(--wbn-footer-heading);
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        font-size: 15px;
        font-weight: 700;
        display: flex
    }

    .selo-footer-accordion-icon {
        width: 18px;
        height: 18px;
        color: var(--wbn-footer-accent);
        transition: transform .25s
    }

    .selo-footer-accordion-button[aria-expanded=true] .selo-footer-accordion-icon {
        transform: rotate(180deg)
    }

    .selo-footer-accordion-content {
        opacity: 0;
        max-height: 0;
        transition: max-height .35s, opacity .25s, padding-bottom .35s;
        display: grid;
        overflow: hidden
    }

    .selo-footer-accordion-content.is-open {
        opacity: 1;
        max-height: 420px;
        padding-bottom: 20px
    }

    .selo-category-page {
        background-color: var(--color-page);
        padding-block: 22px 56px
    }

    .wbn-category-banner {
        border-radius: var(--radius-card);
        background-color: var(--color-surface-soft);
        background-image: linear-gradient(90deg, #111827d1, #11182747), var(--selo-category-banner);
        background-position: 50%;
        background-size: cover;
        min-height: 190px;
        position: relative;
        overflow: hidden
    }

    .selo-category-banner-content {
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        max-width: 620px;
        min-height: 190px;
        padding: 28px;
        display: flex;
        position: relative
    }

    .wbn-category-breadcrumb {
        color: #ffffffc7;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 500;
        display: flex
    }

    .wbn-category-breadcrumb a {
        color: #fff;
        transition: color .2s
    }

    .wbn-category-breadcrumb a:hover {
        color: var(--color-accent)
    }

    .selo-category-page-title {
        color: #fff;
        font-family: var(--font-heading);
        margin-top: 14px;
        font-size: clamp(28px, 4vw, 44px);
        font-weight: 700;
        line-height: 1.15
    }

    .selo-category-page-description {
        color: #ffffffd1;
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.65
    }

    .wbn-category-toolbar {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 18px;
        padding: 12px;
        display: flex
    }

    .selo-category-result-count {
        color: var(--color-body);
        font-size: 14px;
        font-weight: 600;
        display: none
    }

    .wbn-category-toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        display: grid
    }

    .selo-category-toolbar-button {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        background-color: var(--color-surface);
        min-height: 42px;
        color: var(--color-heading);
        cursor: pointer;
        outline: none;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 600;
        display: flex
    }

    .selo-category-toolbar-button:focus,
    .selo-category-toolbar-button:hover {
        border-color: var(--color-primary);
        color: var(--color-primary)
    }

    .wbn-category-layout {
        gap: 18px;
        margin-top: 18px;
        display: grid
    }

    .selo-category-sidebar {
        display: none
    }

    .selo-category-products-area {
        min-width: 0
    }

    .wbn-category-filter-overlay {
        z-index: 70;
        visibility: hidden;
        opacity: 0;
        background-color: #0000007a;
        transition: visibility .3s, opacity .3s;
        position: fixed;
        inset: 0
    }

    .wbn-category-filter-overlay.is-visible {
        visibility: visible;
        opacity: 1
    }

    .selo-category-filter-drawer {
        z-index: 80;
        background-color: var(--color-surface);
        width: min(88%, 340px);
        height: 100%;
        transition: transform .32s;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
        transform: translate(-100%)
    }

    .selo-category-filter-drawer.is-open {
        transform: translate(0)
    }

    .wbn-category-filter-header {
        z-index: 2;
        border-bottom: 1px solid var(--color-border);
        background-color: var(--color-surface);
        justify-content: space-between;
        align-items: center;
        min-height: 62px;
        padding-inline: 18px;
        display: flex;
        position: sticky;
        top: 0
    }

    .selo-category-filter-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 700
    }

    .selo-category-filter-close {
        background-color: var(--color-primary-soft);
        width: 38px;
        height: 38px;
        color: var(--color-primary);
        cursor: pointer;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .wbn-category-filter-panel {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        overflow: hidden
    }

    .selo-filter-group {
        border-bottom: 1px solid var(--color-border);
        padding: 20px
    }

    .selo-filter-group:last-child {
        border-bottom: 0
    }

    .selo-filter-heading {
        color: var(--color-heading);
        font-family: var(--font-heading);
        margin-bottom: 14px;
        font-size: 15px;
        font-weight: 700
    }

    .wbn-filter-list {
        gap: 8px;
        display: grid
    }

    .selo-filter-category-link {
        min-height: 42px;
        color: var(--color-body);
        border-radius: 9px;
        justify-content: space-between;
        align-items: center;
        padding: 9px 11px;
        font-size: 14px;
        font-weight: 500;
        transition: all .2s;
        display: flex
    }

    .selo-filter-category-link:hover,
    .selo-filter-category-link.is-active {
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-filter-count {
        color: var(--color-muted);
        font-size: 12px
    }

    .wbn-price-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        display: grid
    }

    .selo-price-field label {
        color: var(--color-muted);
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 500;
        display: block
    }

    .selo-price-input {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-input);
        background-color: var(--color-surface);
        width: 100%;
        height: 42px;
        color: var(--color-heading);
        outline: none;
        padding-inline: 11px
    }

    .selo-price-input:focus {
        border-color: var(--color-primary)
    }

    .selo-filter-checkbox {
        min-height: 40px;
        color: var(--color-body);
        cursor: pointer;
        border-radius: 9px;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        font-size: 14px;
        transition: all .2s;
        display: flex
    }

    .selo-filter-checkbox:hover {
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-filter-checkbox input {
        width: 17px;
        height: 17px;
        accent-color: var(--color-primary);
        cursor: pointer
    }

    .wbn-filter-actions {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 18px 20px;
        display: grid
    }

    .selo-filter-apply,
    .selo-filter-reset {
        cursor: pointer;
        border-radius: 6px;
        min-height: 42px;
        padding: 9px 14px;
        font-size: 13px;
        font-weight: 650;
        transition: all .2s
    }

    .selo-filter-apply {
        background-color: var(--color-primary);
        color: var(--color-white)
    }

    .selo-filter-apply:hover {
        background-color: var(--color-primary-hover)
    }

    .selo-filter-reset {
        border: 1px solid var(--color-border);
        background-color: var(--color-surface-soft);
        color: var(--color-heading)
    }

    .selo-filter-reset:hover {
        border-color: var(--color-primary);
        color: var(--color-primary)
    }

    .selo-product-details-page {
        background-color: var(--color-page);
        padding-block: 20px 56px
    }

    .wbn-product-details-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-card);
        gap: 24px;
        padding: 14px;
        display: grid
    }

    .selo-product-gallery {
        min-width: 0
    }

    .wbn-product-main-image {
        aspect-ratio: 1;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface-soft);
        position: relative;
        overflow: hidden
    }

    .selo-product-gallery-image {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: transform .35s, opacity .16s
    }

    .wbn-product-main-image:hover .selo-product-gallery-image {
        transform: scale(1.035)
    }

    .selo-product-details-badge {
        z-index: 2;
        color: #fff;
        background-color: #ef4444;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        min-height: 32px;
        padding: 6px 11px;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        position: absolute;
        top: 12px;
        left: 12px
    }

    .wbn-product-thumbnails {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
        display: grid
    }

    .selo-product-thumbnail {
        aspect-ratio: 1;
        background-color: var(--color-surface-soft);
        cursor: pointer;
        border: 2px solid #0000;
        border-radius: 10px;
        transition: border-color .2s, transform .2s;
        overflow: hidden
    }

    .selo-product-thumbnail:hover,
    .selo-product-thumbnail.is-active {
        border-color: var(--color-primary);
        transform: translateY(-2px)
    }

    .selo-product-thumbnail img {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .selo-product-details-info {
        min-width: 0
    }

    .wbn-product-details-breadcrumb {
        color: var(--color-muted);
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 500;
        display: flex
    }

    .wbn-product-details-breadcrumb a {
        color: var(--color-primary);
        transition: color .2s
    }

    .wbn-product-details-breadcrumb a:hover {
        color: var(--color-primary-hover)
    }

    .selo-product-details-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        margin: 0;
        font-size: clamp(25px, 4vw, 36px);
        font-weight: 700;
        line-height: 1.2
    }

    .wbn-product-meta {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
        display: flex
    }

    .selo-product-meta-item {
        border: 1px solid var(--color-border);
        background-color: var(--color-surface-soft);
        min-height: 30px;
        color: var(--color-body);
        border-radius: 999px;
        align-items: center;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex
    }

    .wbn-product-rating {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        display: flex
    }

    .selo-product-stars {
        color: #f59e0b;
        align-items: center;
        gap: 3px;
        display: flex
    }

    .selo-product-rating-text {
        color: var(--color-muted);
        font-size: 13px;
        font-weight: 500
    }

    .wbn-product-details-price {
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
        margin-top: 15px;
        display: flex
    }

    .selo-product-details-old-price {
        color: var(--color-muted);
        font-size: 16px;
        font-weight: 600;
        text-decoration: line-through
    }

    .selo-product-details-current-price {
        color: var(--color-primary);
        font-size: clamp(28px, 4vw, 38px);
        font-weight: 750;
        line-height: 1
    }

    .selo-product-stock {
        color: #15803d;
        background-color: #ecfdf5;
        border: 1px solid #86efac;
        border-radius: 999px;
        align-items: center;
        min-height: 30px;
        margin-top: 16px;
        padding: 5px 11px;
        font-size: 12px;
        font-weight: 650;
        display: inline-flex
    }

    html[data-theme=dark] .selo-product-stock {
        color: #86efac;
        background-color: #16653438;
        border-color: #22c55e66
    }

    .wbn-product-purchase-panel {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        margin-top: 20px;
        padding: 16px
    }

    .selo-product-variant-group+.selo-product-variant-group {
        margin-top: 18px
    }

    .wbn-product-variant-heading {
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
        display: flex
    }

    .selo-product-variant-title {
        color: var(--color-heading);
        font-size: 14px;
        font-weight: 700
    }

    .selo-selected-variant {
        color: var(--color-muted);
        font-size: 12px;
        font-weight: 500
    }

    .wbn-product-variant-options {
        flex-wrap: wrap;
        gap: 8px;
        display: flex
    }

    .selo-variant-option {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        background-color: var(--color-surface);
        min-width: 44px;
        min-height: 40px;
        color: var(--color-heading);
        cursor: pointer;
        justify-content: center;
        align-items: center;
        padding: 8px 13px;
        font-size: 13px;
        font-weight: 650;
        transition: border-color .2s, background-color .2s, color .2s;
        display: inline-flex;
        position: relative
    }

    .selo-variant-option:hover,
    .selo-variant-option.is-selected {
        border-color: var(--color-primary);
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-variant-option.is-disabled {
        cursor: not-allowed;
        opacity: .45;
        text-decoration: line-through
    }

    .selo-color-option {
        border-radius: 50%;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 3px
    }

    .selo-color-option:before {
        border-radius: inherit;
        background-color: var(--selo-color);
        content: "";
        width: 100%;
        height: 100%
    }

    .selo-color-option.is-selected {
        border-width: 2px
    }

    .selo-product-quantity-label {
        color: var(--color-heading);
        margin-bottom: 9px;
        font-size: 14px;
        font-weight: 700;
        display: block
    }

    .wbn-product-quantity {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        background-color: var(--color-surface);
        grid-template-columns: 42px 54px 42px;
        min-height: 42px;
        display: inline-grid;
        overflow: hidden
    }

    .selo-quantity-button,
    .selo-quantity-input {
        color: var(--color-heading);
        background-color: #0000;
        border: 0;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .selo-quantity-button {
        cursor: pointer;
        font-size: 20px;
        transition: background-color .2s, color .2s
    }

    .selo-quantity-button:hover {
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-quantity-input {
        border-inline: 1px solid var(--color-border);
        text-align: center;
        appearance: textfield;
        outline: none;
        width: 100%
    }

    .selo-quantity-input::-webkit-inner-spin-button {
        appearance: none;
        margin: 0
    }

    .selo-quantity-input::-webkit-outer-spin-button {
        appearance: none;
        margin: 0
    }

    .wbn-product-purchase-actions {
        gap: 10px;
        margin-top: 20px;
        display: grid
    }

    .selo-product-add-cart,
    .selo-product-order-now {
        border-radius: var(--radius-button);
        cursor: pointer;
        justify-content: center;
        align-items: center;
        gap: 9px;
        min-height: 50px;
        padding: 11px 18px;
        font-size: 14px;
        font-weight: 700;
        transition: transform .2s, background-color .2s;
        display: inline-flex
    }

    .selo-product-add-cart {
        background-color: var(--color-secondary);
        color: #fff
    }

    .selo-product-order-now {
        background-color: var(--color-primary);
        color: #fff
    }

    .selo-product-add-cart:hover,
    .selo-product-order-now:hover {
        transform: translateY(-1px)
    }

    .selo-product-order-now:hover {
        background-color: var(--color-primary-hover)
    }

    .wbn-product-benefits {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 16px;
        display: grid;
        overflow: hidden
    }

    .selo-product-benefit {
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 0;
        padding: 14px 8px;
        display: flex
    }

    .selo-product-benefit+.selo-product-benefit {
        border-left: 1px solid var(--color-border)
    }

    .wbn-product-benefit-icon {
        background-color: var(--color-primary-soft);
        width: 40px;
        height: 40px;
        color: var(--color-primary);
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .selo-product-benefit-title {
        color: var(--color-heading);
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700
    }

    .selo-product-benefit-text {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.4
    }

    .wbn-product-information-section {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-card);
        margin-top: 24px;
        overflow: hidden
    }

    .selo-product-information-header {
        padding: 20px 18px 14px
    }

    .selo-product-information-label {
        color: var(--color-primary);
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700
    }

    .selo-product-information-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        margin-top: 6px;
        font-size: clamp(21px, 3vw, 28px);
        font-weight: 700;
        line-height: 1.25
    }

    .wbn-product-tabs {
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        background-color: var(--color-surface);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        display: grid
    }

    .selo-product-tab-button {
        min-width: 0;
        min-height: 54px;
        color: var(--color-muted);
        cursor: pointer;
        background-color: #0000;
        border: 0;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 11px 8px;
        font-size: 13px;
        font-weight: 650;
        transition: background-color .2s, color .2s;
        display: flex;
        position: relative
    }

    .selo-product-tab-button+.selo-product-tab-button {
        border-left: 1px solid var(--color-border)
    }

    .selo-product-tab-button:hover {
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-product-tab-button.is-active {
        background-color: var(--color-primary);
        color: #fff
    }

    .selo-product-tab-button svg {
        flex-shrink: 0;
        width: 17px;
        height: 17px
    }

    .selo-product-tab-count {
        background-color: var(--color-surface-soft);
        min-width: 20px;
        height: 20px;
        color: var(--color-muted);
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        padding-inline: 5px;
        font-size: 10px;
        font-weight: 700;
        display: inline-flex
    }

    .selo-product-tab-button.is-active .selo-product-tab-count {
        color: #fff;
        background-color: #fff3
    }

    .wbn-product-tab-content {
        padding: 20px 18px 24px
    }

    .selo-product-tab-panel {
        animation: .26s seloTabFadeIn;
        display: none
    }

    .selo-product-tab-panel.is-active {
        display: block
    }

    .selo-product-content-heading {
        color: var(--color-heading);
        margin-bottom: 12px;
        font-size: 19px;
        font-weight: 700
    }

    .selo-product-description {
        color: var(--color-body);
        font-size: 14px;
        line-height: 1.8
    }

    .selo-product-description p+p {
        margin-top: 12px
    }

    .selo-product-description ul {
        gap: 9px;
        margin-top: 16px;
        padding-left: 0;
        list-style: none;
        display: grid
    }

    .selo-product-description li {
        padding-left: 24px;
        position: relative
    }

    .selo-product-description li:before {
        background-color: var(--color-primary);
        content: "";
        border-radius: 50%;
        width: 9px;
        height: 9px;
        position: absolute;
        top: 7px;
        left: 2px
    }

    .wbn-product-review-summary {
        gap: 18px;
        display: grid
    }

    .selo-product-review-score {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface-soft);
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 150px;
        padding: 18px;
        display: flex
    }

    .selo-product-review-number {
        color: var(--color-heading);
        font-size: 42px;
        font-weight: 750;
        line-height: 1
    }

    .selo-product-review-stars {
        color: #f59e0b;
        gap: 3px;
        margin-top: 10px;
        display: flex
    }

    .selo-product-review-total {
        color: var(--color-muted);
        margin-top: 7px;
        font-size: 12px;
        font-weight: 500
    }

    .wbn-product-review-list {
        gap: 12px;
        display: grid
    }

    .selo-product-review-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        padding: 16px
    }

    .wbn-product-review-card-header {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        display: flex
    }

    .selo-product-review-name {
        color: var(--color-heading);
        font-size: 14px;
        font-weight: 700
    }

    .selo-product-review-date {
        color: var(--color-muted);
        font-size: 11px
    }

    .selo-product-review-text {
        color: var(--color-body);
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.7
    }

    .selo-product-video-wrapper {
        aspect-ratio: 16/9;
        border-radius: var(--radius-card);
        background-color: #020617;
        position: relative;
        overflow: hidden
    }

    .selo-product-video-wrapper iframe,
    .selo-product-video-wrapper video {
        object-fit: cover;
        border: 0;
        width: 100%;
        height: 100%
    }

    .selo-product-video-placeholder {
        color: #fff;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 100%;
        display: flex
    }

    .wbn-product-video-icon {
        background-color: var(--color-primary);
        color: #fff;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        width: 58px;
        height: 58px;
        display: flex
    }

    .selo-product-video-placeholder p {
        color: #ffffffbf;
        font-size: 13px
    }

    @keyframes seloTabFadeIn {
        0% {
            opacity: 0;
            transform: translateY(5px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .selo-related-products-section {
        margin-top: 28px;
        padding-block: 8px 4px
    }

    .wbn-related-products-header {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: 14px;
        margin-bottom: 18px;
        display: flex
    }

    .selo-related-products-label {
        color: var(--color-primary);
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        display: block
    }

    .selo-related-products-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        margin-top: 5px;
        font-size: clamp(22px, 3vw, 30px);
        font-weight: 700;
        line-height: 1.25
    }

    .selo-related-products-view-all {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        background-color: var(--color-surface);
        min-height: 40px;
        color: var(--color-heading);
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 650;
        transition: border-color .2s, background-color .2s, color .2s;
        display: inline-flex
    }

    .selo-related-products-view-all:hover {
        border-color: var(--color-primary);
        background-color: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-related-products-view-all svg {
        width: 16px;
        height: 16px;
        transition: transform .2s
    }

    .selo-related-products-view-all:hover svg {
        transform: translate(3px)
    }

    .selo-checkout-page {
        background-color: var(--color-page);
        padding-block: 22px 64px
    }

    .wbn-checkout-layout {
        gap: 20px;
        display: grid
    }

    .selo-checkout-left,
    .selo-checkout-right {
        align-content: start;
        gap: 18px;
        min-width: 0;
        display: grid
    }

    .wbn-checkout-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-card);
        overflow: hidden
    }

    .selo-checkout-card-body {
        padding: 18px
    }

    .wbn-checkout-heading {
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
        display: flex
    }

    .selo-checkout-label {
        color: var(--color-primary);
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        display: block
    }

    .selo-checkout-title {
        color: var(--color-heading);
        font-family: var(--font-heading);
        margin-top: 5px;
        font-size: clamp(22px, 3vw, 29px);
        font-weight: 700;
        line-height: 1.25
    }

    .selo-checkout-step {
        border: 1px solid var(--color-border);
        background-color: var(--color-surface-soft);
        min-width: 62px;
        min-height: 32px;
        color: var(--color-muted);
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        font-size: 11px;
        font-weight: 600;
        display: inline-flex
    }

    .wbn-checkout-form-grid {
        gap: 15px;
        display: grid
    }

    .selo-checkout-field {
        min-width: 0
    }

    .selo-checkout-field-full {
        grid-column: 1/-1
    }

    .selo-checkout-field label {
        color: var(--color-heading);
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 600;
        display: block
    }

    .selo-checkout-required {
        color: #ef4444
    }

    .selo-checkout-optional {
        color: var(--color-muted);
        font-size: 11px;
        font-weight: 500
    }

    .selo-checkout-input,
    .selo-checkout-select,
    .selo-checkout-textarea {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-input);
        background-color: var(--color-surface);
        width: 100%;
        color: var(--color-heading);
        outline: none;
        transition: border-color .2s, box-shadow .2s, background-color .2s
    }

    .selo-checkout-input,
    .selo-checkout-select {
        min-height: 46px;
        padding: 10px 13px
    }

    .selo-checkout-textarea {
        resize: vertical;
        min-height: 105px;
        padding: 12px 13px;
        line-height: 1.6
    }

    .selo-checkout-input::placeholder,
    .selo-checkout-textarea::placeholder {
        color: var(--color-muted)
    }

    .selo-checkout-input:focus,
    .selo-checkout-select:focus,
    .selo-checkout-textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft)
    }

    .wbn-checkout-optional-toggle {
        color: var(--color-body);
        cursor: pointer;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
        font-size: 13px;
        font-weight: 600;
        display: flex
    }

    .wbn-checkout-optional-toggle input {
        width: 17px;
        height: 17px;
        accent-color: var(--color-primary)
    }

    .selo-checkout-optional-panel {
        border-top: 1px solid var(--color-border);
        margin-top: 16px;
        padding-top: 16px;
        display: none
    }

    .selo-checkout-optional-panel.is-visible {
        animation: .22s seloCheckoutFade;
        display: block
    }

    .wbn-checkout-option-grid {
        gap: 12px;
        display: grid
    }

    .selo-checkout-option {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-input);
        background-color: var(--color-surface);
        cursor: pointer;
        align-items: center;
        gap: 12px;
        min-height: 72px;
        padding: 13px;
        transition: border-color .2s, background-color .2s, transform .2s;
        display: flex;
        position: relative
    }

    .selo-checkout-option:hover {
        border-color: var(--color-primary);
        transform: translateY(-1px)
    }

    .selo-checkout-option.is-selected {
        border-color: var(--color-primary);
        background-color: var(--color-primary-soft)
    }

    .selo-checkout-option input {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        flex-shrink: 0
    }

    .wbn-checkout-option-content {
        flex: 1;
        min-width: 0
    }

    .selo-checkout-option-title {
        color: var(--color-heading);
        font-size: 13px;
        font-weight: 700;
        display: block
    }

    .selo-checkout-option-description {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.45;
        display: block
    }

    .selo-checkout-option-price {
        color: var(--color-primary);
        flex-shrink: 0;
        font-size: 13px;
        font-weight: 700
    }

    .selo-checkout-payment-fields {
        border-top: 1px solid var(--color-border);
        margin-top: 14px;
        padding-top: 16px;
        display: none
    }

    .selo-checkout-payment-fields.is-visible {
        animation: .22s seloCheckoutFade;
        display: block
    }

    .selo-cart-drawer-shell {
        z-index: 120;
        visibility: hidden;
        pointer-events: none;
        position: fixed;
        inset: 0
    }

    .selo-cart-drawer-shell.is-open {
        visibility: visible;
        pointer-events: auto
    }

    .selo-cart-drawer-overlay {
        opacity: 0;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        background: #0f172a8a;
        transition: opacity .26s;
        position: absolute;
        inset: 0
    }

    .selo-cart-drawer-shell.is-open .selo-cart-drawer-overlay {
        opacity: 1
    }

    .wbn-cart-drawer {
        border-left: 1px solid var(--color-border);
        background: var(--color-surface);
        grid-template-rows: auto minmax(0, 1fr) auto;
        width: min(100%, 430px);
        height: 100%;
        transition: transform .3s cubic-bezier(.22, .8, .22, 1);
        display: grid;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(102%);
        box-shadow: -20px 0 50px #0f172a2e
    }

    .selo-cart-drawer-shell.is-open .wbn-cart-drawer {
        transform: translate(0)
    }

    .selo-cart-drawer-header {
        border-bottom: 1px solid var(--color-border);
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        min-height: 82px;
        padding: 17px 18px;
        display: flex
    }

    .selo-cart-drawer-eyebrow {
        color: var(--color-primary);
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 3px;
        font-size: 11px;
        font-weight: 700;
        display: block
    }

    .selo-cart-drawer-header h2 {
        color: var(--color-heading);
        margin: 0;
        font-size: 20px;
        font-weight: 700
    }

    .selo-cart-drawer-close,
    .selo-cart-drawer-remove {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-muted);
        cursor: pointer;
        flex: none;
        justify-content: center;
        align-items: center;
        transition: all .18s;
        display: inline-flex
    }

    .selo-cart-drawer-close {
        border-radius: 11px;
        width: 40px;
        height: 40px
    }

    .selo-cart-drawer-close svg {
        width: 19px;
        height: 19px
    }

    .selo-cart-drawer-close:hover,
    .selo-cart-drawer-remove:hover {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-cart-drawer-body {
        overscroll-behavior: contain;
        overflow-y: auto
    }

    .selo-cart-drawer-item {
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 13px;
        padding: 15px 18px;
        display: grid
    }

    .selo-cart-drawer-image-wrap {
        border: 1px solid var(--color-border);
        background: var(--color-surface-soft);
        border-radius: 11px;
        width: 82px;
        height: 82px;
        overflow: hidden
    }

    .selo-cart-drawer-image {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .selo-cart-drawer-item-content {
        min-width: 0
    }

    .selo-cart-drawer-item-top,
    .selo-cart-drawer-item-bottom {
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        display: flex
    }

    .selo-cart-drawer-name {
        color: var(--color-heading);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
        display: -webkit-box;
        overflow: hidden
    }

    .selo-cart-drawer-name:hover {
        color: var(--color-primary)
    }

    .selo-cart-drawer-meta {
        color: var(--color-muted);
        flex-wrap: wrap;
        gap: 4px 9px;
        margin-top: 5px;
        font-size: 10px;
        display: flex
    }

    .selo-cart-drawer-remove {
        border-radius: 8px;
        width: 30px;
        height: 30px
    }

    .selo-cart-drawer-remove svg {
        width: 15px;
        height: 15px
    }

    .selo-cart-drawer-item-bottom {
        align-items: center;
        margin-top: 11px
    }

    .selo-cart-drawer-item-bottom strong {
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 750
    }

    .wbn-cart-drawer-quantity {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        border-radius: 8px;
        grid-template-columns: 30px 38px 30px;
        min-height: 32px;
        display: inline-grid;
        overflow: hidden
    }

    .wbn-cart-drawer-quantity button,
    .wbn-cart-drawer-quantity input {
        min-width: 0;
        color: var(--color-heading);
        text-align: center;
        background: 0 0;
        border: 0;
        outline: none
    }

    .wbn-cart-drawer-quantity button {
        cursor: pointer
    }

    .wbn-cart-drawer-quantity button:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .wbn-cart-drawer-quantity input {
        border-inline: 1px solid var(--color-border);
        appearance: textfield;
        width: 38px
    }

    .wbn-cart-drawer-quantity input::-webkit-inner-spin-button {
        appearance: none
    }

    .wbn-cart-drawer-quantity input::-webkit-outer-spin-button {
        appearance: none
    }

    .selo-cart-drawer-empty {
        text-align: center;
        align-self: center;
        padding: 42px 25px
    }

    .selo-cart-drawer-empty[hidden],
    .selo-cart-drawer-footer[hidden],
    .selo-cart-drawer-body[hidden] {
        display: none
    }

    .selo-cart-drawer-empty-icon {
        background: var(--color-primary-soft);
        width: 68px;
        height: 68px;
        color: var(--color-primary);
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        margin: 0 auto 17px;
        display: flex
    }

    .selo-cart-drawer-empty-icon svg {
        width: 30px;
        height: 30px
    }

    .selo-cart-drawer-empty h3 {
        color: var(--color-heading);
        margin: 0;
        font-size: 20px;
        font-weight: 700
    }

    .selo-cart-drawer-empty p {
        color: var(--color-muted);
        margin: 7px 0 18px;
        font-size: 13px
    }

    .selo-cart-drawer-footer {
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
        padding: 16px 18px 18px;
        box-shadow: 0 -8px 25px #0f172a0d
    }

    .selo-cart-drawer-total {
        color: var(--color-body);
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 13px;
        font-size: 14px;
        display: flex
    }

    .selo-cart-drawer-total strong {
        color: var(--color-primary);
        font-size: 21px;
        font-weight: 750
    }

    .wbn-cart-drawer-actions {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        display: grid
    }

    .wbn-cart-drawer-actions a {
        width: 100%
    }

    .selo-cart-drawer-open {
        overflow: hidden
    }

    .selo-cart-toast {
        z-index: 150;
        border: 1px solid var(--color-border);
        background: var(--color-heading);
        max-width: calc(100% - 32px);
        color: var(--color-white);
        box-shadow: var(--shadow-card);
        opacity: 0;
        pointer-events: none;
        border-radius: 10px;
        padding: 11px 16px;
        font-size: 13px;
        font-weight: 600;
        transition: opacity .2s, transform .2s;
        position: fixed;
        bottom: 92px;
        left: 50%;
        transform: translate(-50%, 12px)
    }

    .selo-cart-toast.is-visible {
        opacity: 1;
        transform: translate(-50%)
    }

    .selo-inner-page {
        background: var(--color-page);
        min-height: 60vh;
        padding-block: 28px 56px
    }

    .wbn-page-breadcrumb {
        color: var(--color-muted);
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        margin-bottom: 18px;
        font-size: 13px;
        display: flex
    }

    .wbn-page-breadcrumb a {
        color: var(--color-body);
        transition: color .18s
    }

    .wbn-page-breadcrumb a:hover,
    .wbn-page-breadcrumb [aria-current=page] {
        color: var(--color-primary)
    }

    .wbn-page-breadcrumb svg {
        flex: none;
        width: 14px;
        height: 14px
    }

    .selo-page-heading {
        margin-bottom: 24px
    }

    .selo-page-eyebrow {
        color: var(--color-primary);
        letter-spacing: .08em;
        text-transform: uppercase;
        align-items: center;
        gap: 7px;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex
    }

    .selo-page-title {
        color: var(--color-heading);
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 700;
        line-height: 1.2
    }

    .selo-page-description {
        max-width: 680px;
        color: var(--color-body);
        margin-top: 9px;
        font-size: 14px;
        line-height: 1.7
    }

    .wbn-surface-card {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-card);
        background: var(--color-surface);
        box-shadow: var(--shadow-card)
    }

    .selo-form-label {
        color: var(--color-heading);
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        display: inline-flex
    }

    .selo-form-input,
    .selo-form-select,
    .selo-form-textarea {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-input);
        background: var(--color-surface);
        width: 100%;
        min-height: 46px;
        color: var(--color-heading);
        outline: none;
        padding: 10px 13px;
        transition: border-color .18s, box-shadow .18s, background-color .18s
    }

    .selo-form-textarea {
        resize: vertical;
        min-height: 110px
    }

    .selo-form-input::placeholder,
    .selo-form-textarea::placeholder {
        color: var(--color-muted)
    }

    .selo-form-input:focus,
    .selo-form-select:focus,
    .selo-form-textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent)
    }

    .selo-secondary-button {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        background: var(--color-surface);
        min-height: 44px;
        color: var(--color-heading);
        cursor: pointer;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        font-size: 14px;
        font-weight: 600;
        transition: border-color .18s, color .18s, background-color .18s;
        display: inline-flex
    }

    .selo-secondary-button:hover {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-status-pill {
        white-space: nowrap;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        min-height: 26px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex
    }

    .selo-status-pill.is-success {
        color: #166534;
        background: #dcfce7
    }

    .selo-status-pill.is-warning {
        color: #92400e;
        background: #fef3c7
    }

    .selo-status-pill.is-info {
        color: #1d4ed8;
        background: #dbeafe
    }

    .selo-status-pill.is-danger {
        color: #b91c1c;
        background: #fee2e2
    }

    html[data-theme=dark] .selo-status-pill.is-success {
        color: #86efac;
        background: #22c55e26
    }

    html[data-theme=dark] .selo-status-pill.is-warning {
        color: #fcd34d;
        background: #f59e0b26
    }

    html[data-theme=dark] .selo-status-pill.is-info {
        color: #93c5fd;
        background: #3b82f626
    }

    html[data-theme=dark] .selo-status-pill.is-danger {
        color: #fca5a5;
        background: #ef444426
    }

    .wbn-cart-layout {
        gap: 20px;
        display: grid
    }

    .selo-cart-panel,
    .selo-cart-summary {
        overflow: hidden
    }

    .selo-cart-panel-header,
    .selo-cart-summary-header {
        border-bottom: 1px solid var(--color-border);
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 18px;
        display: flex
    }

    .selo-cart-panel-title,
    .selo-cart-summary-title {
        color: var(--color-heading);
        font-size: 18px;
        font-weight: 700
    }

    .selo-cart-count {
        color: var(--color-muted);
        font-size: 13px
    }

    .wbn-cart-list {
        display: grid
    }

    .selo-cart-item {
        border-bottom: 1px solid var(--color-border);
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 18px;
        display: grid
    }

    .selo-cart-item:last-child {
        border-bottom: 0
    }

    .selo-cart-image-wrap {
        border: 1px solid var(--color-border);
        background: var(--color-surface-soft);
        border-radius: 11px;
        width: 86px;
        height: 86px;
        overflow: hidden
    }

    .selo-cart-image {
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .selo-cart-item-main {
        min-width: 0
    }

    .selo-cart-item-top {
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        display: flex
    }

    .selo-cart-product-name {
        color: var(--color-heading);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.45
    }

    .selo-cart-product-name:hover {
        color: var(--color-primary)
    }

    .selo-cart-remove {
        border: 1px solid var(--color-border);
        width: 32px;
        height: 32px;
        color: var(--color-muted);
        cursor: pointer;
        border-radius: 9px;
        flex: none;
        justify-content: center;
        align-items: center;
        transition: all .18s;
        display: inline-flex
    }

    .selo-cart-remove:hover {
        color: #ef4444;
        background: #ef444414;
        border-color: #ef4444
    }

    .selo-cart-meta {
        color: var(--color-muted);
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-top: 5px;
        font-size: 12px;
        display: flex
    }

    .selo-cart-item-bottom {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 13px;
        display: flex
    }

    .wbn-cart-quantity {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        border-radius: 9px;
        grid-template-columns: 34px 42px 34px;
        min-height: 36px;
        display: inline-grid;
        overflow: hidden
    }

    .wbn-cart-quantity button {
        color: var(--color-heading);
        cursor: pointer;
        justify-content: center;
        align-items: center;
        transition: background-color .18s, color .18s;
        display: flex
    }

    .wbn-cart-quantity button:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .wbn-cart-quantity input {
        border-inline: 1px solid var(--color-border);
        width: 42px;
        color: var(--color-heading);
        text-align: center;
        appearance: textfield;
        background: 0 0;
        outline: none
    }

    .wbn-cart-quantity input::-webkit-inner-spin-button {
        appearance: none;
        margin: 0
    }

    .wbn-cart-quantity input::-webkit-outer-spin-button {
        appearance: none;
        margin: 0
    }

    .selo-cart-line-price {
        color: var(--color-primary);
        font-size: 16px;
        font-weight: 750
    }

    .wbn-cart-actions {
        border-top: 1px solid var(--color-border);
        flex-direction: column;
        gap: 12px;
        padding: 16px 18px;
        display: flex
    }

    .wbn-cart-coupon {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        display: grid
    }

    .selo-cart-coupon-message {
        min-height: 18px;
        color: var(--color-muted);
        font-size: 12px
    }

    .selo-cart-coupon-message.is-success {
        color: #16a34a
    }

    .selo-cart-coupon-message.is-error {
        color: #dc2626
    }

    .selo-cart-summary-body {
        gap: 14px;
        padding: 18px;
        display: grid
    }

    .selo-cart-summary-row {
        color: var(--color-body);
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        display: flex
    }

    .selo-cart-summary-row strong {
        color: var(--color-heading);
        font-weight: 650
    }

    .selo-cart-summary-divider {
        background: var(--color-border);
        height: 1px
    }

    .selo-cart-summary-total {
        font-size: 17px;
        font-weight: 700
    }

    .selo-cart-summary-total strong {
        color: var(--color-primary);
        font-size: 22px
    }

    .selo-cart-checkout-button {
        width: 100%;
        margin-top: 2px
    }

    .wbn-cart-trust-list {
        border-top: 1px solid var(--color-border);
        gap: 10px;
        margin-top: 4px;
        padding-top: 15px;
        display: grid
    }

    .selo-cart-trust-item {
        color: var(--color-muted);
        align-items: center;
        gap: 9px;
        font-size: 12px;
        display: flex
    }

    .selo-cart-trust-item svg {
        width: 17px;
        height: 17px;
        color: var(--color-primary);
        flex: none
    }

    .selo-cart-empty {
        text-align: center;
        padding: 54px 20px;
        display: none
    }

    .selo-cart-empty.is-visible {
        display: block
    }

    .selo-cart-empty-icon {
        background: var(--color-primary-soft);
        width: 68px;
        height: 68px;
        color: var(--color-primary);
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        margin: 0 auto 18px;
        display: flex
    }

    .selo-cart-empty h2 {
        color: var(--color-heading);
        font-size: 21px;
        font-weight: 700
    }

    .selo-cart-empty p {
        color: var(--color-muted);
        margin: 7px auto 18px;
        font-size: 14px
    }

    .selo-auth-page {
        background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 32%), radial-gradient(circle at 92% 78%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 30%), var(--color-page);
        min-height: calc(100vh - 180px);
        padding-block: 30px 60px
    }

    .wbn-auth-layout {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        max-width: 1040px;
        box-shadow: var(--shadow-card);
        border-radius: 20px;
        margin-inline: auto;
        display: grid;
        overflow: hidden
    }

    .selo-auth-showcase {
        background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 94%, #111827), var(--color-secondary));
        color: var(--color-white);
        padding: 42px;
        display: none;
        position: relative;
        overflow: hidden
    }

    .selo-auth-showcase:before,
    .selo-auth-showcase:after {
        content: "";
        background: #ffffff14;
        border-radius: 999px;
        position: absolute
    }

    .selo-auth-showcase:before {
        width: 260px;
        height: 260px;
        top: -100px;
        right: -100px
    }

    .selo-auth-showcase:after {
        width: 300px;
        height: 300px;
        bottom: -120px;
        left: -90px
    }

    .selo-auth-showcase-content {
        z-index: 2;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        display: flex;
        position: relative
    }

    .selo-auth-brand {
        object-fit: contain;
        object-position: left center;
        width: auto;
        height: 32px
    }

    .selo-auth-showcase h2 {
        max-width: 430px;
        color: var(--color-white);
        margin-top: 76px;
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 700;
        line-height: 1.18
    }

    .selo-auth-showcase p {
        color: #ffffffc7;
        max-width: 400px;
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.8
    }

    .wbn-auth-benefits {
        gap: 12px;
        margin-top: 32px;
        display: grid
    }

    .selo-auth-benefit {
        color: #ffffffe6;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        display: flex
    }

    .selo-auth-benefit svg {
        flex: none;
        width: 19px;
        height: 19px
    }

    .selo-auth-form-panel {
        padding: 24px 18px 28px
    }

    .selo-auth-back {
        color: var(--color-muted);
        align-items: center;
        gap: 7px;
        font-size: 13px;
        transition: color .18s;
        display: inline-flex
    }

    .selo-auth-back:hover {
        color: var(--color-primary)
    }

    .selo-auth-heading {
        margin-top: 28px
    }

    .selo-auth-heading h1 {
        color: var(--color-heading);
        font-size: 28px;
        font-weight: 700;
        line-height: 1.25
    }

    .selo-auth-heading p {
        color: var(--color-muted);
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.7
    }

    .wbn-auth-form {
        gap: 16px;
        margin-top: 24px;
        display: grid
    }

    .selo-auth-field {
        min-width: 0
    }

    .wbn-password-field {
        position: relative
    }

    .wbn-password-field .selo-form-input {
        padding-right: 48px
    }

    .selo-password-toggle {
        width: 34px;
        height: 34px;
        color: var(--color-muted);
        cursor: pointer;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        transition: color .18s, background-color .18s;
        display: flex;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%)
    }

    .selo-password-toggle:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-password-toggle svg {
        width: 18px;
        height: 18px
    }

    .wbn-auth-form-row {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        display: flex
    }

    .selo-auth-checkbox {
        color: var(--color-body);
        cursor: pointer;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        display: inline-flex
    }

    .selo-auth-checkbox input {
        width: 16px;
        height: 16px;
        accent-color: var(--color-primary)
    }

    .selo-auth-link {
        color: var(--color-primary);
        font-size: 13px;
        font-weight: 600
    }

    .selo-auth-submit {
        width: 100%
    }

    .wbn-auth-divider {
        color: var(--color-muted);
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 12px;
        font-size: 12px;
        display: grid
    }

    .wbn-auth-divider:before,
    .wbn-auth-divider:after {
        background: var(--color-border);
        content: "";
        height: 1px
    }

    .selo-auth-switch {
        color: var(--color-body);
        text-align: center;
        margin-top: 20px;
        font-size: 13px
    }

    .selo-auth-switch a {
        color: var(--color-primary);
        font-weight: 650
    }

    .selo-auth-note {
        border: 1px solid var(--color-border);
        background: var(--color-surface-soft);
        color: var(--color-muted);
        border-radius: 11px;
        align-items: flex-start;
        gap: 9px;
        margin-top: 18px;
        padding: 11px 12px;
        font-size: 12px;
        line-height: 1.6;
        display: flex
    }

    .selo-auth-note svg {
        width: 17px;
        height: 17px;
        color: var(--color-primary);
        flex: none
    }

    .selo-auth-success {
        color: #15803d;
        background: #22c55e1a;
        border: 1px solid #22c55e4d;
        border-radius: 10px;
        margin-bottom: 16px;
        padding: 11px 12px;
        font-size: 13px;
        display: none
    }

    .selo-auth-success.is-visible {
        display: block
    }


    .selo-form-input.is-invalid {
        border-color: #dc2626;
        box-shadow: 0 0 0 3px #dc26261a
    }

    .selo-auth-field-error {
        color: #dc2626;
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.45
    }

    html[data-theme=dark] .selo-auth-field-error {
        color: #fca5a5
    }

    .selo-auth-secondary-button {
        width: 100%;
        min-height: 46px;
        color: var(--color-primary);
        background: var(--color-primary-soft);
        border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
        border-radius: var(--radius-button);
        justify-content: center;
        align-items: center;
        padding: 10px 16px;
        font: inherit;
        font-weight: 600;
        transition: background .2s ease, border-color .2s ease, transform .2s ease;
        display: inline-flex;
        cursor: pointer
    }

    .selo-auth-secondary-button:hover {
        background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
        border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
        transform: translateY(-1px)
    }

    html[data-theme=dark] .selo-auth-success {
        color: #86efac
    }

    .wbn-account-layout {
        gap: 20px;
        display: grid
    }

    .selo-account-sidebar {
        overflow: hidden
    }

    .selo-account-profile {
        border-bottom: 1px solid var(--color-border);
        align-items: center;
        gap: 12px;
        padding: 18px;
        display: flex
    }

    .selo-account-avatar {
        background: var(--color-primary-soft);
        width: 48px;
        height: 48px;
        color: var(--color-primary);
        border-radius: 15px;
        flex: none;
        justify-content: center;
        align-items: center;
        font-size: 17px;
        font-weight: 750;
        display: flex
    }

    .selo-account-profile h2 {
        color: var(--color-heading);
        font-size: 15px;
        font-weight: 700
    }

    .selo-account-profile p {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 12px
    }

    .wbn-account-nav {
        scrollbar-width: none;
        gap: 8px;
        padding: 12px;
        display: flex;
        overflow-x: auto
    }

    .wbn-account-nav::-webkit-scrollbar {
        display: none
    }

    .selo-account-nav-button {
        min-height: 42px;
        color: var(--color-body);
        cursor: pointer;
        border-radius: 10px;
        flex: none;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 600;
        transition: background-color .18s, color .18s;
        display: inline-flex
    }

    .selo-account-nav-button svg {
        flex: none;
        width: 18px;
        height: 18px
    }

    .selo-account-nav-button:hover,
    .selo-account-nav-button.is-active {
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-account-nav-button.is-danger:hover {
        color: #ef4444;
        background: #ef44441a
    }

    .selo-account-panel {
        display: none
    }

    .selo-account-panel.is-active {
        display: block
    }

    .selo-account-panel-card {
        padding: 18px
    }

    .wbn-account-panel-heading {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        display: flex
    }

    .wbn-account-panel-heading h2 {
        color: var(--color-heading);
        font-size: 20px;
        font-weight: 700
    }

    .wbn-account-panel-heading p {
        color: var(--color-muted);
        margin-top: 4px;
        font-size: 13px
    }

    .wbn-account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        display: grid
    }

    .selo-account-stat {
        border: 1px solid var(--color-border);
        background: var(--color-surface-soft);
        border-radius: 12px;
        padding: 14px
    }

    .selo-account-stat-top {
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        display: flex
    }

    .selo-account-stat-icon {
        background: var(--color-primary-soft);
        width: 36px;
        height: 36px;
        color: var(--color-primary);
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .selo-account-stat-icon svg {
        width: 18px;
        height: 18px
    }

    .selo-account-stat strong {
        color: var(--color-heading);
        margin-top: 14px;
        font-size: 22px;
        font-weight: 750;
        display: block
    }

    .selo-account-stat span {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 12px;
        display: block
    }

    .wbn-account-section {
        margin-top: 20px
    }

    .selo-account-section-title {
        color: var(--color-heading);
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700
    }

    .wbn-order-list {
        gap: 10px;
        display: grid
    }

    .selo-order-card {
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 14px
    }

    .selo-order-card-top,
    .selo-order-card-bottom {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        display: flex
    }

    .selo-order-number {
        color: var(--color-heading);
        font-size: 14px;
        font-weight: 700
    }

    .selo-order-date {
        color: var(--color-muted);
        margin-top: 3px;
        font-size: 12px
    }

    .selo-order-card-bottom {
        border-top: 1px solid var(--color-border);
        margin-top: 13px;
        padding-top: 12px
    }

    .selo-order-total {
        color: var(--color-heading);
        font-size: 13px
    }

    .selo-order-total strong {
        color: var(--color-primary);
        font-size: 15px
    }

    .selo-order-link {
        color: var(--color-primary);
        font-size: 13px;
        font-weight: 650
    }

    .wbn-address-grid,
    .wbn-profile-grid {
        gap: 14px;
        display: grid
    }

    .selo-address-card {
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 16px;
        position: relative
    }

    .selo-address-badge {
        background: var(--color-primary-soft);
        color: var(--color-primary);
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 700;
        position: absolute;
        top: 14px;
        right: 14px
    }

    .selo-address-card h3 {
        color: var(--color-heading);
        font-size: 15px;
        font-weight: 700
    }

    .selo-address-card p {
        color: var(--color-body);
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.7
    }

    .selo-address-actions {
        gap: 14px;
        margin-top: 12px;
        display: flex
    }

    .selo-address-actions button {
        color: var(--color-primary);
        cursor: pointer;
        font-size: 12px;
        font-weight: 650
    }

    .wbn-tracking-layout {
        gap: 20px;
        display: grid
    }

    .selo-tracking-search-card,
    .selo-tracking-result-card {
        padding: 18px
    }

    .selo-tracking-search-card h2,
    .selo-tracking-result-card h2 {
        color: var(--color-heading);
        font-size: 19px;
        font-weight: 700
    }

    .selo-tracking-search-card>p {
        color: var(--color-muted);
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.7
    }

    .wbn-tracking-form {
        gap: 12px;
        margin-top: 18px;
        display: grid
    }

    .selo-tracking-help {
        background: var(--color-surface-soft);
        color: var(--color-muted);
        border-radius: 11px;
        align-items: flex-start;
        gap: 9px;
        margin-top: 16px;
        padding: 12px;
        font-size: 12px;
        line-height: 1.6;
        display: flex
    }

    .selo-tracking-help svg {
        width: 17px;
        height: 17px;
        color: var(--color-primary);
        flex: none
    }

    .selo-tracking-result-card {
        display: none
    }

    .selo-tracking-result-card.is-visible {
        display: block
    }

    .wbn-tracking-result-head {
        border-bottom: 1px solid var(--color-border);
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding-bottom: 16px;
        display: flex
    }

    .selo-tracking-order-number {
        color: var(--color-primary);
        font-size: 13px;
        font-weight: 700
    }

    .wbn-tracking-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
        display: grid
    }

    .selo-tracking-meta-item {
        border: 1px solid var(--color-border);
        background: var(--color-surface-soft);
        border-radius: 11px;
        padding: 12px
    }

    .selo-tracking-meta-item span {
        color: var(--color-muted);
        font-size: 11px;
        display: block
    }

    .selo-tracking-meta-item strong {
        color: var(--color-heading);
        margin-top: 5px;
        font-size: 13px;
        font-weight: 650;
        display: block
    }

    .wbn-tracking-timeline {
        gap: 0;
        margin-top: 24px;
        display: grid;
        position: relative
    }

    .selo-tracking-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        min-height: 84px;
        display: grid;
        position: relative
    }

    .selo-tracking-step:before {
        background: var(--color-border);
        content: "";
        width: 2px;
        position: absolute;
        top: 34px;
        bottom: 0;
        left: 16px
    }

    .selo-tracking-step:last-child:before {
        display: none
    }

    .selo-tracking-step-icon {
        z-index: 2;
        border: 2px solid var(--color-border);
        background: var(--color-surface);
        width: 34px;
        height: 34px;
        color: var(--color-muted);
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .selo-tracking-step.is-complete .selo-tracking-step-icon,
    .selo-tracking-step.is-current .selo-tracking-step-icon {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: var(--color-white)
    }

    .selo-tracking-step-content {
        padding-bottom: 20px
    }

    .selo-tracking-step-content h3 {
        color: var(--color-heading);
        font-size: 14px;
        font-weight: 700
    }

    .selo-tracking-step-content p {
        color: var(--color-muted);
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.6
    }

    .selo-tracking-step-content time {
        color: var(--color-primary);
        margin-top: 5px;
        font-size: 11px;
        font-weight: 650;
        display: inline-block
    }

    .selo-tracking-error {
        color: #dc2626;
        background: #ef444414;
        border: 1px solid #ef44444d;
        border-radius: 10px;
        margin-top: 12px;
        padding: 10px 12px;
        font-size: 12px;
        display: none
    }

    .selo-tracking-error.is-visible {
        display: block
    }

    .selo-quick-view-overlay {
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        background: #020617a8;
        justify-content: center;
        align-items: flex-end;
        padding: 0;
        transition: opacity .22s, visibility .22s;
        display: flex;
        position: fixed;
        inset: 0
    }

    .selo-quick-view-overlay.is-open {
        opacity: 1;
        visibility: visible
    }

    .selo-quick-view-modal {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        border-radius: 18px 18px 0 0;
        width: 100%;
        max-height: 92vh;
        transition: transform .24s;
        position: relative;
        overflow-y: auto;
        transform: translateY(24px);
        box-shadow: 0 24px 70px #0206174d
    }

    .selo-quick-view-overlay.is-open .selo-quick-view-modal {
        transform: translateY(0)
    }

    .selo-quick-view-close {
        z-index: 5;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        width: 38px;
        height: 38px;
        color: var(--color-heading);
        cursor: pointer;
        border-radius: 11px;
        justify-content: center;
        align-items: center;
        transition: all .18s;
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px
    }

    .selo-quick-view-close:hover {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .selo-quick-view-grid {
        display: grid
    }

    .selo-quick-view-image-area {
        background: var(--color-surface-soft);
        min-height: 280px;
        padding: 36px 24px 24px
    }

    .selo-quick-view-image {
        object-fit: contain;
        width: 100%;
        max-width: 440px;
        height: 100%;
        max-height: 420px;
        margin-inline: auto
    }

    .selo-quick-view-content {
        padding: 22px 18px 26px
    }

    .selo-quick-view-category {
        color: var(--color-primary);
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700
    }

    .selo-quick-view-title {
        color: var(--color-heading);
        margin-top: 7px;
        font-size: clamp(22px, 4vw, 30px);
        font-weight: 700;
        line-height: 1.25
    }

    .selo-quick-view-rating {
        color: #f59e0b;
        align-items: center;
        gap: 8px;
        margin-top: 11px;
        font-size: 13px;
        display: flex
    }

    .selo-quick-view-rating span:last-child {
        color: var(--color-muted)
    }

    .wbn-quick-view-price {
        flex-wrap: wrap;
        align-items: center;
        gap: 9px;
        margin-top: 14px;
        display: flex
    }

    .selo-quick-view-current-price {
        color: var(--color-primary);
        font-size: 24px;
        font-weight: 750
    }

    .selo-quick-view-old-price {
        color: var(--color-muted);
        font-size: 14px;
        text-decoration: line-through
    }

    .selo-quick-view-description {
        color: var(--color-body);
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.7
    }

    .wbn-quick-view-option {
        margin-top: 18px
    }

    .selo-quick-view-option-title {
        color: var(--color-heading);
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 650;
        display: flex
    }

    .wbn-quick-view-options {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 9px;
        display: flex
    }

    .selo-quick-view-option-button {
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        min-width: 40px;
        min-height: 36px;
        color: var(--color-heading);
        cursor: pointer;
        border-radius: 9px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 600;
        transition: all .18s
    }

    .selo-quick-view-option-button:hover,
    .selo-quick-view-option-button.is-selected {
        border-color: var(--color-primary);
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .wbn-quick-view-actions {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
        margin-top: 20px;
        display: grid
    }

    .wbn-quick-view-quantity {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-button);
        grid-template-columns: 34px 42px 34px;
        min-height: 44px;
        display: grid;
        overflow: hidden
    }

    .wbn-quick-view-quantity button {
        color: var(--color-heading);
        cursor: pointer;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .wbn-quick-view-quantity button:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary)
    }

    .wbn-quick-view-quantity input {
        border-inline: 1px solid var(--color-border);
        width: 42px;
        color: var(--color-heading);
        text-align: center;
        appearance: textfield;
        background: 0 0;
        outline: none
    }

    .selo-quick-view-details-link {
        color: var(--color-primary);
        align-items: center;
        gap: 7px;
        margin-top: 16px;
        font-size: 13px;
        font-weight: 650;
        display: inline-flex
    }
}

@layer utilities {
    .invisible {
        visibility: hidden
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .inset-0 {
        inset: 0
    }

    .inset-x-0 {
        inset-inline: 0
    }

    .-top-1 {
        top: calc(var(--spacing) * -1)
    }

    .top-0 {
        top: 0
    }

    .top-2 {
        top: calc(var(--spacing) * 2)
    }

    .top-full {
        top: 100%
    }

    .-right-1 {
        right: calc(var(--spacing) * -1)
    }

    .right-0 {
        right: 0
    }

    .right-6 {
        right: calc(var(--spacing) * 6)
    }

    .bottom-0 {
        bottom: 0
    }

    .left-0 {
        left: 0
    }

    .left-full {
        left: 100%
    }

    .z-40 {
        z-index: 40
    }

    .z-50 {
        z-index: 50
    }

    .z-\[60\] {
        z-index: 60
    }

    .mt-1\.5 {
        margin-top: calc(var(--spacing) * 1.5)
    }

    .mt-4 {
        margin-top: calc(var(--spacing) * 4)
    }

    .mt-7 {
        margin-top: calc(var(--spacing) * 7)
    }

    .mt-8 {
        margin-top: calc(var(--spacing) * 8)
    }

    .mb-3 {
        margin-bottom: calc(var(--spacing) * 3)
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .h-4 {
        height: calc(var(--spacing) * 4)
    }

    .h-5 {
        height: calc(var(--spacing) * 5)
    }

    .h-7 {
        height: calc(var(--spacing) * 7)
    }

    .h-8 {
        height: calc(var(--spacing) * 8)
    }

    .h-9 {
        height: calc(var(--spacing) * 9)
    }

    .h-10 {
        height: calc(var(--spacing) * 10)
    }

    .h-16 {
        height: calc(var(--spacing) * 16)
    }

    .h-\[18px\] {
        height: 18px
    }

    .h-full {
        height: 100%
    }

    .min-h-\[50px\] {
        min-height: 50px
    }

    .min-h-\[78px\] {
        min-height: 78px
    }

    .w-4 {
        width: calc(var(--spacing) * 4)
    }

    .w-5 {
        width: calc(var(--spacing) * 5)
    }

    .w-7 {
        width: calc(var(--spacing) * 7)
    }

    .w-8 {
        width: calc(var(--spacing) * 8)
    }

    .w-9 {
        width: calc(var(--spacing) * 9)
    }

    .w-10 {
        width: calc(var(--spacing) * 10)
    }

    .w-56 {
        width: calc(var(--spacing) * 56)
    }

    .w-60 {
        width: calc(var(--spacing) * 60)
    }

    .w-64 {
        width: calc(var(--spacing) * 64)
    }

    .w-\[18px\] {
        width: 18px
    }

    .w-\[88\%\] {
        width: 88%
    }

    .w-auto {
        width: auto
    }

    .w-full {
        width: 100%
    }

    .max-w-\[330px\] {
        max-width: 330px
    }

    .min-w-0 {
        min-width: 0
    }

    .min-w-5 {
        min-width: calc(var(--spacing) * 5)
    }

    .flex-1 {
        flex: 1
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .translate-x-3 {
        --tw-translate-x: calc(var(--spacing) * 3);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-x-full {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-3 {
        --tw-translate-y: calc(var(--spacing) * 3);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .rotate-180 {
        rotate: 180deg
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .cursor-pointer {
        cursor: pointer
    }

    .resize {
        resize: both
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .flex-col {
        flex-direction: column
    }

    .items-center {
        align-items: center
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .gap-1 {
        gap: var(--spacing)
    }

    .gap-2 {
        gap: calc(var(--spacing) * 2)
    }

    .gap-3 {
        gap: calc(var(--spacing) * 3)
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }

    .gap-8 {
        gap: calc(var(--spacing) * 8)
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
        margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-y-auto {
        overflow-y: auto
    }

    .rounded-\[var\(--radius-button\)\] {
        border-radius: var(--radius-button)
    }

    .rounded-full {
        border-radius: 2147483647px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-\[var\(--color-border\)\] {
        border-color: var(--color-border)
    }

    .bg-\[var\(--color-page\)\] {
        background-color: var(--color-page)
    }

    .bg-\[var\(--color-primary\)\] {
        background-color: var(--color-primary)
    }

    .bg-\[var\(--color-surface\)\] {
        background-color: var(--color-surface)
    }

    .bg-black\/40 {
        background-color: #0006
    }

    @supports (color:color-mix(in lab, red, red)) {
        .bg-black\/40 {
            background-color: color-mix(in oklab, var(--color-black) 40%, transparent)
        }
    }

    .bg-transparent {
        background-color: #0000
    }

    .p-3 {
        padding: calc(var(--spacing) * 3)
    }

    .p-4 {
        padding: calc(var(--spacing) * 4)
    }

    .px-1 {
        padding-inline: var(--spacing)
    }

    .px-2 {
        padding-inline: calc(var(--spacing) * 2)
    }

    .px-3 {
        padding-inline: calc(var(--spacing) * 3)
    }

    .px-5 {
        padding-inline: calc(var(--spacing) * 5)
    }

    .py-0\.5 {
        padding-block: calc(var(--spacing) * .5)
    }

    .py-2\.5 {
        padding-block: calc(var(--spacing) * 2.5)
    }

    .py-3 {
        padding-block: calc(var(--spacing) * 3)
    }

    .py-4 {
        padding-block: calc(var(--spacing) * 4)
    }

    .pt-2 {
        padding-top: calc(var(--spacing) * 2)
    }

    .pb-3 {
        padding-bottom: calc(var(--spacing) * 3)
    }

    .pb-\[76px\] {
        padding-bottom: 76px
    }

    .pl-3 {
        padding-left: calc(var(--spacing) * 3)
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

    .text-\[11px\] {
        font-size: 11px
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-\[0\.16em\] {
        --tw-tracking: .16em;
        letter-spacing: .16em
    }

    .text-\[var\(--color-body\)\] {
        color: var(--color-body)
    }

    .text-\[var\(--color-heading\)\] {
        color: var(--color-heading)
    }

    .text-\[var\(--color-muted\)\] {
        color: var(--color-muted)
    }

    .text-\[var\(--color-primary\)\] {
        color: var(--color-primary)
    }

    .text-white {
        color: var(--color-white)
    }

    .uppercase {
        text-transform: uppercase
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-40 {
        opacity: .4
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .duration-200 {
        --tw-duration: .2s;
        transition-duration: .2s
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    @media (hover:hover) {
        .group-hover\:visible:is(:where(.group):hover *) {
            visibility: visible
        }

        .group-hover\:translate-y-0:is(:where(.group):hover *) {
            --tw-translate-y: 0px;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .group-hover\:rotate-180:is(:where(.group):hover *) {
            rotate: 180deg
        }

        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 1
        }

        .group-hover\/mobile\:visible:is(:where(.group\/mobile):hover *) {
            visibility: visible
        }

        .group-hover\/mobile\:translate-x-0:is(:where(.group\/mobile):hover *) {
            --tw-translate-x: 0px;
            translate: var(--tw-translate-x) var(--tw-translate-y)
        }

        .group-hover\/mobile\:opacity-100:is(:where(.group\/mobile):hover *) {
            opacity: 1
        }

        .hover\:bg-\[var\(--color-primary-soft\)\]:hover {
            background-color: var(--color-primary-soft)
        }

        .hover\:text-\[var\(--color-primary\)\]:hover {
            color: var(--color-primary)
        }
    }

    @media (width>=64rem) {
        .lg\:block {
            display: block
        }

        .lg\:hidden {
            display: none
        }

        .lg\:pb-0 {
            padding-bottom: 0
        }
    }
}



@media (width>=768px) {
    .site-container {
        padding-inline: 24px
    }
}

@media (width<=767px) {
    .selo-hero {
        padding-block: 12px
    }

    .wbn-hero-slider {
        border-radius: 12px
    }

    .selo-hero-image {
        aspect-ratio: 5/6
    }

    .selo-hero-arrow {
        width: 34px;
        height: 34px
    }

    .selo-hero-arrow-prev {
        left: 10px
    }

    .selo-hero-arrow-next {
        right: 10px
    }

    .selo-hero-arrow {
        display: none
    }
}

@media (width>=768px) {
    .selo-hero-image {
        aspect-ratio: 1600/580
    }
}

@media (width>=640px) {
    .wbn-category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px
    }

    .selo-category-card {
        padding: 10px
    }

    .selo-category-name {
        margin-top: 11px;
        font-size: 14px
    }
}

@media (width>=1024px) {
    .selo-category-section {
        padding-block: 68px
    }

    .wbn-category-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px
    }

    .selo-category-card {
        padding: 11px
    }

    .selo-category-name {
        margin-top: 13px;
        margin-bottom: 4px;
        font-size: 15px
    }
}

@media (width>=640px) {
    .selo-reviews-track {
        margin-inline: -8px
    }

    .selo-review-slide {
        flex-basis: 50%;
        padding-inline: 8px
    }

    .selo-review-card {
        padding: 24px
    }
}

@media (width>=1024px) {
    .selo-reviews-section {
        padding-block: 52px
    }

    .selo-reviews-track {
        margin-inline: -9px
    }

    .selo-review-slide {
        flex-basis: 33.3333%;
        padding-inline: 9px
    }

    .selo-review-arrow {
        display: flex
    }
}

@media (width>=768px) {
    .wbn-footer-main {
        padding-block: 56px 42px
    }

    .selo-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px
    }

    .selo-footer-bottom-inner {
        text-align: left;
        flex-direction: row;
        justify-content: space-between
    }
}

@media (width>=1024px) {
    .wbn-footer-main {
        padding-block: 64px 50px
    }

    .selo-footer-grid {
        grid-template-columns: minmax(280px, 1.4fr) minmax(180px, .8fr) minmax(200px, .9fr) minmax(250px, 1fr);
        gap: 48px
    }

    .selo-footer-accordion {
        border-bottom: 0
    }

    .selo-footer-accordion-button {
        display: none
    }

    .selo-footer-accordion-content {
        opacity: 1;
        max-height: none;
        padding-bottom: 0;
        overflow: visible
    }
}

@media (width>=768px) {
    .selo-category-page {
        padding-block: 28px 64px
    }

    .wbn-category-banner,
    .selo-category-banner-content {
        min-height: 220px
    }

    .selo-category-banner-content {
        padding: 40px
    }

    .selo-category-result-count {
        display: block
    }

    .wbn-category-toolbar-actions {
        grid-template-columns: 170px 130px;
        width: auto
    }
}

@media (width>=1024px) {
    .wbn-category-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 22px
    }

    .selo-category-sidebar {
        display: block
    }

    .selo-category-filter-mobile {
        display: none
    }

    .selo-category-filter-drawer {
        z-index: auto;
        width: 100%;
        height: auto;
        transition: none;
        position: static;
        overflow: visible;
        transform: none
    }

    .wbn-category-filter-header,
    .wbn-category-filter-overlay {
        display: none
    }

    .wbn-category-toolbar-actions {
        grid-template-columns: 190px
    }
}

@media (width<=479px) {
    .wbn-product-details-card {
        padding: 10px
    }

    .wbn-product-thumbnails {
        gap: 6px
    }

    .wbn-product-benefits {
        grid-template-columns: 1fr
    }

    .selo-product-benefit {
        text-align: left;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px
    }

    .selo-product-benefit+.selo-product-benefit {
        border-top: 1px solid var(--color-border);
        border-left: 0
    }

    .selo-product-benefit-title,
    .selo-product-benefit-text {
        margin-top: 0
    }
}

@media (width>=640px) {
    .selo-product-details-page {
        padding-block: 28px 64px
    }

    .wbn-product-details-card {
        padding: 20px
    }

    .wbn-product-purchase-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width>=1024px) {
    .wbn-product-details-card {
        grid-template-columns: minmax(0, 1fr) minmax(400px, .95fr);
        align-items: start;
        gap: 36px;
        padding: 24px
    }

    .wbn-product-purchase-actions {
        grid-template-columns: 1fr
    }

    .selo-product-gallery {
        position: sticky;
        top: 120px
    }
}

@media (width>=1280px) {
    .wbn-product-details-card {
        grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
        gap: 44px
    }
}

@media (width<=479px) {
    .selo-product-information-header {
        padding: 17px 14px 12px
    }

    .selo-product-tab-button {
        flex-direction: column;
        gap: 3px;
        min-height: 50px;
        padding: 8px 4px;
        font-size: 11px
    }

    .selo-product-tab-button svg {
        width: 16px;
        height: 16px
    }

    .selo-product-tab-count {
        min-width: 17px;
        height: 17px;
        font-size: 9px;
        position: absolute;
        top: 5px;
        right: 5px
    }

    .wbn-product-tab-content {
        padding: 18px 14px 20px
    }
}

@media (width>=768px) {
    .selo-product-information-header {
        padding: 24px 24px 16px
    }

    .wbn-product-tab-content {
        padding: 26px 24px 30px
    }

    .wbn-product-review-summary {
        grid-template-columns: 210px minmax(0, 1fr);
        align-items: start
    }
}

@media (width<=479px) {
    .selo-related-products-section {
        margin-top: 22px
    }

    .wbn-related-products-header {
        align-items: center;
        margin-bottom: 14px
    }

    .selo-related-products-view-all {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 12px
    }
}

@media (width>=768px) {
    .selo-related-products-section {
        margin-top: 36px
    }

    .wbn-related-products-header {
        margin-bottom: 22px
    }
}

@media (width<=479px) {
    .selo-related-products-section {
        margin-top: 22px
    }

    .wbn-related-products-header {
        align-items: center;
        margin-bottom: 14px
    }

    .selo-related-products-view-all {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 12px
    }
}

@media (width>=768px) {
    .selo-related-products-section {
        margin-top: 36px
    }

    .wbn-related-products-header {
        margin-bottom: 22px
    }
}

.selo-related-products-section .selo-related-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.selo-related-products-section .selo-product-content {
    padding: 10px
}

.selo-related-products-section .selo-product-name {
    font-size: 13px;
    line-height: 1.4
}

.selo-related-products-section .selo-product-current-price {
    font-size: 15px
}

.selo-related-products-section .selo-product-old-price {
    font-size: 12px
}

.selo-related-products-section .selo-product-button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px
}

@media (width>=640px) {
    .selo-related-products-section .selo-related-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px
    }

    .selo-related-products-section .selo-product-content {
        padding: 12px
    }

    .selo-related-products-section .selo-product-name {
        font-size: 14px
    }
}

@media (width>=1024px) {
    .selo-related-products-section .selo-related-products-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px
    }
}

@keyframes seloCheckoutFade {
    0% {
        opacity: 0;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (width<=479px) {
    .selo-checkout-page {
        padding-block: 14px 90px
    }

    .selo-checkout-card-body {
        padding: 15px 13px
    }

    .wbn-checkout-heading {
        margin-bottom: 17px
    }

    .selo-checkout-step {
        min-width: 54px;
        min-height: 29px;
        font-size: 10px
    }

    .selo-checkout-option {
        min-height: 66px;
        padding: 11px
    }
}

@media (width>=640px) {

    .wbn-checkout-form-grid,
    .wbn-checkout-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .selo-checkout-card-body {
        padding: 22px
    }
}

@media (width>=1024px) {
    .wbn-checkout-layout {
        grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
        align-items: start;
        gap: 22px
    }

    .selo-checkout-right {
        position: sticky;
        top: 120px
    }
}

@media (width>=1280px) {
    .wbn-checkout-layout {
        grid-template-columns: minmax(0, 1.22fr) minmax(430px, .78fr);
        gap: 26px
    }
}

.wbn-checkout-summary-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden
}

.wbn-checkout-summary-header {
    border-bottom: 1px solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px;
    display: flex
}

.selo-checkout-summary-title {
    color: var(--color-heading);
    font-size: 19px;
    font-weight: 700
}

.selo-checkout-summary-count {
    background-color: var(--color-primary-soft);
    min-width: 30px;
    height: 30px;
    color: var(--color-primary);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding-inline: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex
}

.wbn-checkout-product-list {
    display: grid
}

.selo-checkout-product-item {
    border-bottom: 1px solid var(--color-border);
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 18px;
    display: grid
}

.wbn-checkout-product-image {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-soft);
    border-radius: 10px;
    width: 76px;
    height: 76px;
    position: relative;
    overflow: hidden
}

.wbn-checkout-product-image img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.selo-checkout-product-details {
    min-width: 0
}

.wbn-checkout-product-top {
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    display: flex
}

.selo-checkout-product-name {
    color: var(--color-heading);
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    overflow: hidden
}

.selo-checkout-product-remove {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    width: 30px;
    height: 30px;
    color: var(--color-muted);
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: border-color .2s, background-color .2s, color .2s;
    display: inline-flex
}

.selo-checkout-product-remove:hover {
    color: #ef4444;
    background-color: #ef444414;
    border-color: #ef4444
}

.wbn-checkout-product-variants {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    display: flex
}

.selo-checkout-product-variant {
    background-color: var(--color-surface-soft);
    min-height: 24px;
    color: var(--color-body);
    border-radius: 999px;
    align-items: center;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex
}

.selo-checkout-product-variant strong {
    color: var(--color-heading);
    margin-right: 3px
}

.wbn-checkout-product-bottom {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    display: flex
}

.wbn-checkout-product-price {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    display: flex
}

.selo-checkout-product-current-price {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 750
}

.selo-checkout-product-old-price {
    color: var(--color-muted);
    font-size: 11px;
    text-decoration: line-through
}

.wbn-checkout-quantity {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    border-radius: 8px;
    grid-template-columns: 32px 38px 32px;
    height: 34px;
    display: grid;
    overflow: hidden
}

.selo-checkout-quantity-button,
.selo-checkout-quantity-input {
    color: var(--color-heading);
    background-color: #0000;
    border: 0;
    justify-content: center;
    align-items: center;
    display: flex
}

.selo-checkout-quantity-button {
    cursor: pointer;
    font-size: 16px
}

.selo-checkout-quantity-button:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary)
}

.selo-checkout-quantity-input {
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    text-align: center;
    appearance: textfield;
    outline: none;
    width: 100%
}

.selo-checkout-quantity-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0
}

.selo-checkout-quantity-input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0
}

.wbn-checkout-coupon {
    border-bottom: 1px solid var(--color-border);
    padding: 16px 18px
}

.selo-checkout-coupon-label {
    color: var(--color-heading);
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 650;
    display: block
}

.wbn-checkout-coupon-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    display: grid
}

.selo-checkout-coupon-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-surface);
    width: 100%;
    min-height: 42px;
    color: var(--color-heading);
    outline: none;
    padding: 9px 12px
}

.selo-checkout-coupon-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft)
}

.selo-checkout-coupon-button {
    border-radius: var(--radius-button);
    background-color: var(--color-secondary);
    color: #fff;
    cursor: pointer;
    min-height: 42px;
    padding: 9px 15px;
    font-size: 12px;
    font-weight: 700
}

.selo-checkout-coupon-message {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    display: none
}

.selo-checkout-coupon-message.is-success {
    color: #16a34a;
    display: block
}

.selo-checkout-coupon-message.is-error {
    color: #ef4444;
    display: block
}

.wbn-checkout-totals {
    gap: 11px;
    padding: 18px;
    display: grid
}

.selo-checkout-total-row {
    color: var(--color-body);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    display: flex
}

.selo-checkout-total-row strong {
    color: var(--color-heading);
    font-weight: 700
}

.selo-checkout-discount-row {
    color: #16a34a
}

.selo-checkout-grand-total {
    border-top: 1px dashed var(--color-border);
    color: var(--color-heading);
    margin-top: 4px;
    padding-top: 15px;
    font-size: 16px;
    font-weight: 700
}

.selo-checkout-grand-total strong {
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 750
}

.wbn-checkout-confirmation {
    padding: 0 18px 18px
}

.selo-checkout-terms {
    color: var(--color-body);
    cursor: pointer;
    align-items: flex-start;
    gap: 9px;
    font-size: 11px;
    line-height: 1.55;
    display: flex
}

.selo-checkout-terms input {
    width: 17px;
    height: 17px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 1px
}

.selo-checkout-terms a {
    color: var(--color-primary);
    font-weight: 650
}

.selo-checkout-place-order {
    border-radius: var(--radius-button);
    background-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    margin-top: 15px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 750;
    transition: background-color .2s, transform .2s;
    display: inline-flex
}

.selo-checkout-place-order:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px)
}

.selo-checkout-place-order:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none
}

.wbn-checkout-security-note {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-soft);
    color: var(--color-muted);
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 12px;
    font-size: 11px;
    font-weight: 600;
    display: flex
}

.wbn-checkout-security-note svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary)
}

@media (width<=479px) {
    .wbn-checkout-summary-header {
        padding: 15px 13px
    }

    .selo-checkout-product-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
        padding: 14px 13px
    }

    .wbn-checkout-product-image {
        width: 64px;
        height: 64px
    }

    .selo-checkout-product-name {
        font-size: 13px
    }

    .wbn-checkout-product-bottom {
        align-items: flex-end
    }

    .wbn-checkout-coupon,
    .wbn-checkout-totals {
        padding: 15px 13px
    }

    .wbn-checkout-confirmation {
        padding: 0 13px 15px
    }

    .wbn-checkout-coupon-form {
        grid-template-columns: minmax(0, 1fr) 82px
    }

    .selo-checkout-coupon-button {
        padding-inline: 10px
    }
}

.selo-checkout-page,
.wbn-checkout-layout,
.selo-checkout-left,
.selo-checkout-right,
.wbn-checkout-card,
.wbn-checkout-summary-card {
    min-width: 0
}

.selo-checkout-input,
.selo-checkout-select,
.selo-checkout-textarea,
.selo-checkout-coupon-input {
    max-width: 100%
}

.selo-checkout-product-name,
.selo-checkout-option-title,
.selo-checkout-option-description,
.selo-checkout-product-variant {
    overflow-wrap: anywhere
}

.selo-checkout-quantity-button:disabled {
    cursor: not-allowed;
    opacity: .4
}

.selo-checkout-place-order:focus-visible,
.selo-checkout-coupon-button:focus-visible,
.selo-checkout-product-remove:focus-visible,
.selo-checkout-quantity-button:focus-visible {
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 2px
}

@media (width<=639px) {
    .wbn-checkout-layout {
        gap: 16px
    }

    .selo-checkout-left,
    .selo-checkout-right {
        gap: 15px
    }

    .selo-checkout-right {
        position: static;
        top: auto
    }

    .wbn-checkout-form-grid,
    .wbn-checkout-option-grid {
        grid-template-columns: 1fr
    }

    .selo-checkout-option {
        width: 100%
    }

    .selo-checkout-option-price {
        margin-left: auto
    }

    .selo-checkout-textarea {
        min-height: 92px
    }
}

@media (width<=479px) {
    .selo-checkout-title {
        font-size: 21px
    }

    .selo-checkout-product-item {
        align-items: start
    }

    .wbn-checkout-product-top {
        gap: 7px
    }

    .wbn-checkout-product-bottom {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        display: grid
    }

    .wbn-checkout-product-variants {
        gap: 5px
    }

    .selo-checkout-product-variant {
        padding: 3px 7px;
        font-size: 9px
    }

    .wbn-checkout-quantity {
        grid-template-columns: 30px 36px 30px;
        height: 32px
    }

    .selo-checkout-grand-total strong {
        font-size: 20px
    }

    .selo-checkout-place-order {
        min-height: 50px
    }
}

@media (width<=359px) {
    .selo-checkout-product-item {
        grid-template-columns: 56px minmax(0, 1fr);
        padding-inline: 10px
    }

    .wbn-checkout-product-image {
        width: 56px;
        height: 56px
    }

    .wbn-checkout-coupon-form {
        grid-template-columns: 1fr
    }

    .selo-checkout-coupon-button {
        width: 100%
    }

    .wbn-checkout-product-bottom {
        grid-template-columns: 1fr
    }

    .wbn-checkout-quantity {
        justify-self: start
    }
}

@media (width>=1024px) {
    .selo-checkout-right {
        align-self: start
    }

    .wbn-checkout-summary-card {
        width: 100%
    }
}

.selo-order-success-page {
    background-color: var(--color-page);
    padding-block: 22px 70px
}

.wbn-order-success-shell {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden
}

.selo-order-success-header {
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    padding: 28px 18px
}

.wbn-order-success-icon {
    color: #059669;
    background-color: #10b9811a;
    border: 1px solid #10b9814d;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 66px;
    margin-inline: auto;
    display: flex
}

.wbn-order-success-icon svg {
    width: 30px;
    height: 30px
}

.selo-order-success-title {
    color: var(--color-heading);
    font-family: var(--font-heading);
    margin-top: 18px;
    font-size: clamp(25px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.25
}

.selo-order-success-message {
    max-width: 700px;
    color: var(--color-body);
    margin: 10px auto 0;
    font-size: 14px;
    line-height: 1.75
}

.selo-order-success-message strong {
    color: var(--color-heading)
}

.wbn-order-meta-grid {
    gap: 10px;
    margin-top: 22px;
    display: grid
}

.selo-order-meta-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-surface-soft);
    text-align: center;
    min-width: 0;
    padding: 13px 10px
}

.selo-order-meta-label {
    color: var(--color-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    display: block
}

.selo-order-meta-value {
    overflow-wrap: anywhere;
    color: var(--color-heading);
    margin-top: 5px;
    font-size: 13px;
    font-weight: 700;
    display: block
}

.selo-order-meta-value.is-primary {
    color: var(--color-primary)
}

.wbn-order-success-content {
    gap: 18px;
    padding: 18px;
    display: grid
}

.selo-order-success-main,
.selo-order-success-sidebar {
    align-content: start;
    gap: 16px;
    min-width: 0;
    display: grid
}

.wbn-order-success-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    overflow: hidden
}

.wbn-order-success-card-header {
    border-bottom: 1px solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px;
    display: flex
}

.selo-order-success-card-title {
    color: var(--color-heading);
    font-size: 17px;
    font-weight: 700
}

.selo-order-success-card-count {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 600
}

.selo-order-success-card-body {
    padding: 16px
}

.wbn-success-product-list {
    gap: 12px;
    display: grid
}

.selo-success-product-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background-color: var(--color-surface-soft);
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    display: grid
}

.wbn-success-product-image {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    border-radius: 10px;
    width: 74px;
    height: 74px;
    overflow: hidden
}

.wbn-success-product-image img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.selo-success-product-details {
    min-width: 0
}

.wbn-success-product-top {
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    display: flex
}

.selo-success-product-name {
    color: var(--color-heading);
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45
}

.selo-success-product-total {
    color: var(--color-primary);
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 750
}

.wbn-success-product-variants {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    display: flex
}

.selo-success-product-variant {
    background-color: var(--color-surface);
    min-height: 23px;
    color: var(--color-body);
    border-radius: 999px;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex
}

.selo-success-product-variant strong {
    color: var(--color-heading);
    margin-right: 3px
}

.wbn-success-product-bottom {
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    display: flex
}

.selo-success-product-quantity,
.selo-success-product-unit-price {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600
}

.selo-success-product-unit-price strong {
    color: var(--color-heading)
}

.selo-success-digital-note {
    border-radius: var(--radius-input);
    background-color: var(--color-primary-soft);
    color: var(--color-body);
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    font-size: 11px;
    line-height: 1.55;
    display: flex
}

.selo-success-digital-note svg {
    width: 17px;
    height: 17px;
    color: var(--color-primary);
    flex-shrink: 0
}

.wbn-success-summary-list {
    gap: 12px;
    display: grid
}

.selo-success-summary-row {
    color: var(--color-body);
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    display: flex
}

.selo-success-summary-row strong {
    color: var(--color-heading);
    font-weight: 700
}

.selo-success-summary-discount,
.selo-success-summary-discount strong {
    color: #16a34a
}

.selo-success-summary-total {
    border-top: 1px dashed var(--color-border);
    color: var(--color-heading);
    margin-top: 3px;
    padding-top: 14px;
    font-size: 16px;
    font-weight: 700
}

.selo-success-summary-total strong {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 750
}

.wbn-success-information-list {
    gap: 12px;
    display: grid
}

.selo-success-information-item {
    gap: 3px;
    display: grid
}

.selo-success-information-label {
    color: var(--color-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700
}

.selo-success-information-value {
    color: var(--color-heading);
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55
}

.selo-success-information-value.is-address {
    color: var(--color-body);
    font-weight: 500
}

.selo-order-status {
    border-radius: 999px;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex
}

.selo-order-status.is-pending {
    color: #d97706;
    background-color: #f59e0b1f
}

.selo-order-status.is-confirmed,
.selo-order-status.is-paid {
    color: #059669;
    background-color: #10b9811f
}

.selo-order-status.is-processing {
    color: #2563eb;
    background-color: #3b82f61f
}

.selo-order-status.is-cancelled,
.selo-order-status.is-failed {
    color: #dc2626;
    background-color: #ef44441f
}

.wbn-order-success-actions {
    gap: 10px;
    display: grid
}

.selo-order-success-button {
    border-radius: var(--radius-button);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
    display: inline-flex
}

.selo-order-success-button:hover {
    transform: translateY(-1px)
}

.selo-order-success-button.is-primary {
    background-color: var(--color-primary);
    color: #fff
}

.selo-order-success-button.is-primary:hover {
    background-color: var(--color-primary-hover)
}

.selo-order-success-button.is-secondary {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-heading)
}

.selo-order-success-button.is-secondary:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
    color: var(--color-primary)
}

.selo-order-success-button svg {
    width: 17px;
    height: 17px
}

.wbn-order-success-security {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-soft);
    color: var(--color-muted);
    text-align: center;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    display: flex
}

.wbn-order-success-security svg {
    width: 17px;
    height: 17px;
    color: var(--color-primary);
    flex-shrink: 0
}

@media (width<=479px) {
    .selo-order-success-page {
        padding-block: 14px 92px
    }

    .selo-order-success-header {
        padding: 22px 13px
    }

    .wbn-order-success-icon {
        width: 58px;
        height: 58px
    }

    .wbn-order-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .wbn-order-success-content {
        gap: 14px;
        padding: 13px
    }

    .wbn-order-success-card-header,
    .selo-order-success-card-body {
        padding: 14px 12px
    }

    .selo-success-product-item {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
        padding: 10px
    }

    .wbn-success-product-image {
        width: 62px;
        height: 62px
    }

    .wbn-success-product-top {
        gap: 7px
    }

    .selo-success-product-name {
        font-size: 13px
    }

    .selo-success-product-total {
        font-size: 12px
    }

    .wbn-success-product-bottom {
        grid-template-columns: 1fr;
        gap: 5px;
        display: grid
    }
}

@media (width>=480px) {

    .wbn-order-meta-grid,
    .wbn-order-success-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width>=768px) {
    .selo-order-success-page {
        padding-block: 30px 80px
    }

    .selo-order-success-header {
        padding: 34px 28px
    }

    .wbn-order-meta-grid {
        margin-inline: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 800px;
        margin-top: 24px
    }

    .wbn-order-success-content {
        padding: 24px
    }

    .wbn-order-success-card-header {
        padding: 18px 20px
    }

    .selo-order-success-card-body {
        padding: 20px
    }
}

@media (width>=1024px) {
    .wbn-order-success-content {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
        align-items: start;
        gap: 22px
    }

    .selo-order-success-sidebar {
        position: sticky;
        top: 120px
    }
}

@media (width>=1280px) {
    .wbn-order-success-content {
        grid-template-columns: minmax(0, 1.45fr) minmax(350px, .55fr);
        gap: 26px
    }
}

.selo-order-success-page {
    --selo-bangla-font: "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", "Vrinda", sans-serif;
    font-synthesis: none;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.selo-order-success-title {
    font-family: var(--selo-bangla-font);
    letter-spacing: 0;
    font-size: clamp(25px, 3.5vw, 36px);
    font-weight: 600;
    line-height: 1.45
}

.selo-order-success-message {
    font-family: var(--selo-bangla-font);
    letter-spacing: 0;
    max-width: 760px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9
}

.selo-order-success-card-title {
    font-family: var(--selo-bangla-font);
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5
}

.selo-success-product-name,
.selo-success-information-value,
.selo-success-summary-row,
.selo-order-success-button,
.wbn-order-success-security {
    font-weight: 500;
    line-height: 1.65
}

.selo-order-meta-label,
.selo-success-information-label {
    font-family: var(--font-body);
    letter-spacing: .05em;
    font-weight: 600
}

.selo-order-meta-value,
.selo-success-product-total,
.selo-success-summary-row strong {
    font-weight: 650
}

.selo-success-summary-total {
    font-weight: 600
}

.selo-success-summary-total strong {
    font-weight: 700
}

@media (width<=479px) {
    .selo-order-success-title {
        font-size: 24px;
        line-height: 1.5
    }

    .selo-order-success-message {
        font-size: 14px;
        line-height: 1.85
    }

    .selo-order-success-card-title {
        font-size: 17px
    }
}

.selo-order-success-button.is-copied {
    color: #059669;
    background-color: #10b9811f;
    border-color: #10b981
}

@media print {
    body {
        background-color: #fff !important
    }

    .wbn-topbar,
    .selo-desktop-sticky-area,
    .selo-header-main,
    .wbn-bottom-navigation,
    .selo-footer,
    .wbn-order-success-actions,
    .wbn-order-success-security {
        display: none !important
    }

    .selo-order-success-page {
        background-color: #fff;
        padding: 0
    }

    .site-container {
        max-width: none;
        padding: 0
    }

    .wbn-order-success-shell,
    .wbn-order-success-card {
        box-shadow: none
    }

    .wbn-order-success-content {
        grid-template-columns: 1.4fr .6fr
    }

    .selo-order-success-sidebar {
        position: static
    }

    @page {
        size: A4;
        margin: 12mm
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@media (width>=1024px) {
    .selo-cart-toast {
        bottom: 28px;
        left: auto;
        right: 28px;
        transform: translateY(12px)
    }

    .selo-cart-toast.is-visible {
        transform: translateY(0)
    }
}

.selo-page-skeleton {
    z-index: 9999;
    background: var(--color-page, #f8fafc);
    opacity: 1;
    visibility: visible;
    transition: opacity .28s, visibility .28s;
    position: fixed;
    inset: 0;
    overflow: hidden
}

.selo-page-skeleton.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.selo-skeleton-topbar {
    background: var(--color-primary, #8224e3);
    opacity: .92;
    height: 36px
}

.selo-skeleton-header,
.selo-skeleton-menu,
.selo-skeleton-content {
    width: min(100% - 32px, var(--container-width, 1280px));
    margin-inline: auto
}

.selo-skeleton-header {
    grid-template-columns: 180px minmax(220px, 1fr) 150px;
    align-items: center;
    gap: 24px;
    height: 78px;
    display: grid
}

.selo-skeleton-menu {
    border-top: 1px solid var(--color-border, #e5e7eb);
    align-items: center;
    gap: 30px;
    height: 50px;
    display: flex
}

.selo-skeleton-content {
    padding-top: 30px
}

.selo-skeleton-hero {
    border-radius: 16px;
    height: clamp(220px, 36vw, 460px)
}

.selo-skeleton-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
    display: grid
}

.selo-skeleton-card {
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
    border-radius: 14px;
    height: 310px
}

.selo-skeleton-line,
.selo-skeleton-hero,
.selo-skeleton-card:before,
.selo-skeleton-card:after {
    background: var(--color-surface-soft, #f5f3ff);
    position: relative;
    overflow: hidden
}

.selo-skeleton-line {
    border-radius: 999px;
    height: 14px
}

.selo-skeleton-line.logo {
    width: 150px;
    height: 30px
}

.selo-skeleton-line.search {
    width: 100%;
    height: 42px
}

.selo-skeleton-line.actions {
    justify-self: end;
    width: 130px;
    height: 38px
}

.selo-skeleton-menu .selo-skeleton-line {
    width: 72px;
    height: 12px
}

.selo-skeleton-line:after,
.selo-skeleton-hero:after,
.selo-skeleton-card:after {
    content: "";
    background: linear-gradient(90deg, #0000, #ffffffa6, #0000);
    animation: 1.15s infinite seloSkeletonShimmer;
    position: absolute;
    inset: 0;
    transform: translate(-100%)
}

.selo-skeleton-card:before {
    content: "";
    border-radius: 14px 14px 0 0;
    height: 205px;
    display: block
}

@keyframes seloSkeletonShimmer {
    to {
        transform: translate(100%)
    }
}

@media (width<=1023px) {

    .selo-skeleton-topbar,
    .selo-skeleton-menu {
        display: none
    }

    .selo-skeleton-header {
        grid-template-columns: 44px 1fr 44px;
        gap: 14px;
        height: 70px
    }

    .selo-skeleton-line.logo {
        justify-self: center;
        width: 130px
    }

    .selo-skeleton-line.search,
    .selo-skeleton-line.actions {
        width: 38px;
        height: 38px
    }

    .selo-skeleton-content {
        padding-top: 14px
    }

    .selo-skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    .selo-skeleton-card {
        height: 245px
    }

    .selo-skeleton-card:before {
        height: 155px
    }
}

@media (prefers-reduced-motion:reduce) {

    .selo-skeleton-line:after,
    .selo-skeleton-hero:after,
    .selo-skeleton-card:after {
        animation: none
    }
}

.selo-cart-checkout-button.is-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed
}

.selo-checkout-empty-state {
    color: var(--color-muted);
    text-align: center;
    gap: 8px;
    padding: 26px 18px;
    display: grid
}

.selo-checkout-empty-state a {
    color: var(--color-primary);
    font-weight: 650
}

@media (width>=768px) {
    .selo-inner-page {
        padding-block: 36px 72px
    }
}

@media (width>=640px) {
    .selo-cart-item {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 18px;
        padding: 20px
    }

    .selo-cart-image-wrap {
        width: 104px;
        height: 104px
    }

    .selo-cart-product-name {
        font-size: 15px
    }

    .wbn-cart-actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 18px 20px
    }

    .wbn-cart-coupon-wrap {
        width: min(100%, 420px)
    }
}

@media (width>=1024px) {
    .wbn-cart-layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr);
        align-items: start;
        gap: 24px
    }

    .selo-cart-summary {
        position: sticky;
        top: 146px
    }
}

@media (width>=640px) {
    .selo-auth-form-panel {
        padding: 34px 38px 40px
    }

    .wbn-auth-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        display: grid
    }
}

@media (width>=900px) {
    .wbn-auth-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr)
    }

    .selo-auth-showcase {
        display: block
    }

    .selo-auth-form-panel {
        padding: 44px 48px 48px
    }
}

@media (width>=640px) {
    .selo-account-panel-card {
        padding: 22px
    }

    .wbn-account-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px
    }

    .wbn-address-grid,
    .wbn-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (width>=1024px) {
    .wbn-account-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: start;
        gap: 24px
    }

    .selo-account-sidebar {
        position: sticky;
        top: 146px
    }

    .wbn-account-nav {
        padding: 12px;
        display: grid;
        overflow: visible
    }

    .selo-account-nav-button {
        width: 100%
    }
}

@media (width>=640px) {
    .wbn-tracking-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end
    }

    .selo-tracking-search-card,
    .selo-tracking-result-card {
        padding: 24px
    }

    .wbn-tracking-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (width>=1024px) {
    .wbn-tracking-layout {
        grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
        align-items: start;
        gap: 24px
    }

    .selo-tracking-search-card {
        position: sticky;
        top: 146px
    }
}

@media (width>=640px) {
    .selo-quick-view-overlay {
        align-items: center;
        padding: 24px
    }

    .selo-quick-view-modal {
        border-radius: 18px;
        max-width: 920px
    }

    .selo-quick-view-grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr)
    }

    .selo-quick-view-image-area {
        min-height: 520px;
        padding: 52px 36px 36px
    }

    .selo-quick-view-content {
        flex-direction: column;
        justify-content: center;
        padding: 46px 40px;
        display: flex
    }
}