/*
 * SPACELAND UI SYSTEM V2 — 2026-09-03
 * Shared storefront visual layer.
 * Purpose: unify brand, spacing, responsive widths, focus states and conversion UI
 * without altering PHP logic, endpoints, form names, data attributes or JavaScript contracts.
 */

:root {
    --sl-ui-ink: #1d1d1f;
    --sl-ui-navy: #183b70;
    --sl-ui-navy-strong: #102d57;
    --sl-ui-coral: #e86752;
    --sl-ui-coral-strong: #d95743;
    --sl-ui-cream: #fff7e8;
    --sl-ui-bg: #f8f8f6;
    --sl-ui-surface: #ffffff;
    --sl-ui-soft: #f4f4f2;
    --sl-ui-muted: #6e6e73;
    --sl-ui-line: #e6e6e3;
    --sl-ui-line-strong: #d8d8d4;
    --sl-ui-success: #18794e;
    --sl-ui-danger: #c9342f;
    --sl-ui-warning: #9a6700;
    --sl-ui-radius-xs: 8px;
    --sl-ui-radius-sm: 12px;
    --sl-ui-radius-md: 16px;
    --sl-ui-radius-lg: 20px;
    --sl-ui-radius-xl: 24px;
    --sl-ui-shadow-xs: 0 1px 2px rgba(29, 29, 31, .03);
    --sl-ui-shadow-sm: 0 8px 24px rgba(29, 29, 31, .055);
    --sl-ui-shadow-md: 0 16px 44px rgba(29, 29, 31, .08);
    --sl-ui-focus: 0 0 0 4px rgba(24, 59, 112, .14);
    --sl-ui-content: 1480px;
    --sl-ui-reading: 760px;
    --sl-ui-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body.sp-ios-storefront {
    --primary: var(--sl-ui-ink);
    --primary-hover: #000000;
    --accent: var(--sl-ui-coral);
    --accent-soft: #fff0ed;
    --bg: var(--sl-ui-bg);
    --bg-color: var(--sl-ui-bg);
    --surface: var(--sl-ui-surface);
    --card-bg: var(--sl-ui-surface);
    --soft: var(--sl-ui-soft);
    --soft2: #efefec;
    --text: var(--sl-ui-ink);
    --text-main: var(--sl-ui-ink);
    --muted: var(--sl-ui-muted);
    --text-muted: var(--sl-ui-muted);
    --line: var(--sl-ui-line);
    --border-color: var(--sl-ui-line);
    --success: var(--sl-ui-success);
    --danger: var(--sl-ui-danger);
    --shadow: var(--sl-ui-shadow-sm);
    --shadow-soft: var(--sl-ui-shadow-xs);
    margin: 0;
    background: var(--sl-ui-bg) !important;
    color: var(--sl-ui-ink) !important;
    font-family: 'Cairo', 'Noto Sans Arabic', 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.sp-ios-storefront *,
body.sp-ios-storefront *::before,
body.sp-ios-storefront *::after {
    box-sizing: border-box;
}

body.sp-ios-storefront :where(button, a, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
}

body.sp-ios-storefront :where(button, input, select, textarea) {
    font: inherit;
}

body.sp-ios-storefront :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sl-ui-navy) !important;
    outline-offset: 2px;
    box-shadow: var(--sl-ui-focus);
}

body.sp-ios-storefront :where(button, .btn, [class*="btn-"]):disabled,
body.sp-ios-storefront :where(button, .btn, [class*="btn-"])[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .52;
    box-shadow: none !important;
    transform: none !important;
}

/* ---------- Shared storefront header ---------- */
body.sp-ios-storefront .sl-online-header {
    position: sticky;
    top: 0;
    z-index: 180;
    width: 100%;
    background: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(29, 29, 31, .08) !important;
    box-shadow: 0 6px 22px rgba(29, 29, 31, .035) !important;
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
}

body.sp-ios-storefront .sl-online-header-inner {
    width: min(100%, var(--sl-ui-content)) !important;
    max-width: var(--sl-ui-content) !important;
    min-height: 76px;
    margin-inline: auto !important;
    padding: 8px clamp(16px, 2.3vw, 36px) !important;
    display: grid !important;
    grid-template-columns: auto minmax(320px, 760px) auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(14px, 2vw, 28px) !important;
}

body.sp-ios-storefront .sl-header-logo-link {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

body.sp-ios-storefront .sl-header-logo {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    transform: none !important;
}

body.sp-ios-storefront .sl-header-search {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 6px 5px 8px !important;
    border: 1px solid var(--sl-ui-line) !important;
    border-radius: 16px !important;
    background: #f7f7f5 !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.sp-ios-storefront .sl-header-search:focus-within {
    background: #fff !important;
    border-color: rgba(24, 59, 112, .46) !important;
    box-shadow: var(--sl-ui-focus) !important;
}

body.sp-ios-storefront .sl-header-search-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sl-ui-ink) !important;
    padding-inline: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.sp-ios-storefront .sl-header-search-input::placeholder {
    color: #8a8a90 !important;
    opacity: 1;
}

body.sp-ios-storefront :where(.sl-header-scan, .sl-header-search-submit, .sl-header-cart) {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

body.sp-ios-storefront :where(.sl-header-scan, .sl-header-search-submit) {
    background: var(--sl-ui-ink) !important;
    color: #fff !important;
}

body.sp-ios-storefront .sl-header-cart {
    position: relative;
    width: 48px !important;
    height: 48px !important;
    background: #fff !important;
    color: var(--sl-ui-ink) !important;
    border-color: var(--sl-ui-line) !important;
    box-shadow: var(--sl-ui-shadow-xs) !important;
}

body.sp-ios-storefront :where(.sl-header-scan, .sl-header-search-submit, .sl-header-cart):hover {
    transform: translateY(-1px);
}

body.sp-ios-storefront .sl-header-cart-count {
    position: absolute !important;
    top: -7px !important;
    inset-inline-start: -7px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding-inline: 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--sl-ui-coral) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

body.sp-ios-storefront .sl-header-suggestions,
body.sp-ios-storefront .search-suggestions {
    border: 1px solid var(--sl-ui-line) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--sl-ui-shadow-md) !important;
}

/* ---------- Full-width but controlled desktop layout ---------- */
body.sp-ios-storefront .app {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.sp-ios-storefront :where(.shell, .container, .page, .cart-page-heading, .checkout-page-heading) {
    width: min(100%, var(--sl-ui-content)) !important;
    max-width: var(--sl-ui-content) !important;
    margin-inline: auto !important;
}

body.sp-ios-storefront :where(.shell, .container, .page) {
    padding-inline: clamp(16px, 2.3vw, 36px) !important;
}

body.sp-ios-storefront :where(.cart-page-heading, .checkout-page-heading) {
    padding-inline: clamp(16px, 2.3vw, 36px) !important;
}

/* ---------- Surface language ---------- */
body.sp-ios-storefront :where(.card, .product-card, .gallery-wrap, .price-section, .delivery-mini, .accordion, .slider-section, .parent-category-panel, .checkout-card, .summary-card, .order-summary, .receipt-sheet, .payment-card, .shipping-card) {
    background: var(--sl-ui-surface) !important;
    border-color: var(--sl-ui-line) !important;
    box-shadow: var(--sl-ui-shadow-xs) !important;
}

body.sp-ios-storefront :where(.card, .gallery-wrap, .price-section, .accordion, .slider-section, .parent-category-panel, .receipt-sheet) {
    border-radius: var(--sl-ui-radius-lg) !important;
}

body.sp-ios-storefront :where(.title, .product-title, .item-name, h1, h2, h3, h4, strong) {
    color: var(--sl-ui-ink);
}

body.sp-ios-storefront :where(.muted, .cart-subtitle, .checkout-page-heading p, .receipt-sub) {
    color: var(--sl-ui-muted) !important;
}

/* ---------- Home ---------- */
body.sp-ios-home .shell {
    padding-top: 22px !important;
}

body.sp-ios-home .home-mobile-search-card {
    width: min(100%, 860px) !important;
    border-radius: var(--sl-ui-radius-lg) !important;
    border-color: var(--sl-ui-line) !important;
    box-shadow: var(--sl-ui-shadow-xs) !important;
}

body.sp-ios-home .home-mobile-search-field {
    border-radius: 14px !important;
    background: #f7f7f5 !important;
    border-color: var(--sl-ui-line) !important;
}

body.sp-ios-home .home-mobile-search-field:focus-within {
    background: #fff !important;
    border-color: rgba(24, 59, 112, .46) !important;
    box-shadow: var(--sl-ui-focus) !important;
}

body.sp-ios-home .section-head {
    margin-top: 10px !important;
    margin-bottom: 14px !important;
}

body.sp-ios-home .section-head h3,
body.sp-ios-home .sp-ios-block-head h2 {
    font-size: clamp(19px, 1.8vw, 25px) !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

body.sp-ios-home .chip {
    min-height: 108px !important;
    gap: 8px !important;
}

body.sp-ios-home .chip .chip-icon,
body.sp-ios-home .chip > span:first-child {
    width: 72px !important;
    height: 72px !important;
    background: #fff !important;
    color: var(--sl-ui-navy) !important;
    border: 1px solid var(--sl-ui-line) !important;
    outline: 0 !important;
    box-shadow: var(--sl-ui-shadow-xs) !important;
}

body.sp-ios-home .chip.active .chip-icon,
body.sp-ios-home .chip.active > span:first-child {
    background: var(--sl-ui-navy) !important;
    color: #fff !important;
    border-color: var(--sl-ui-navy) !important;
}

body.sp-ios-home .banner-card {
    border-radius: var(--sl-ui-radius-xl) !important;
    box-shadow: var(--sl-ui-shadow-sm) !important;
}

body.sp-ios-home .banner-overlay {
    background: linear-gradient(90deg, rgba(16, 45, 87, .84), rgba(16, 45, 87, .12)) !important;
}

body.sp-ios-home .banner-copy strong {
    background: #fff !important;
    color: var(--sl-ui-navy) !important;
}

body.sp-ios-home .products {
    align-items: stretch;
}

body.sp-ios-home .product-card {
    border-radius: var(--sl-ui-radius-md) !important;
    border: 1px solid var(--sl-ui-line) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

body.sp-ios-home .product-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--sl-ui-line-strong) !important;
    box-shadow: var(--sl-ui-shadow-sm) !important;
}

body.sp-ios-home .product-card .card-media {
    background: #fff !important;
    padding: clamp(10px, 1.2vw, 16px) !important;
}

body.sp-ios-home .product-card .card-media img {
    object-fit: contain !important;
    filter: drop-shadow(0 10px 14px rgba(29, 29, 31, .07)) !important;
}

body.sp-ios-home .product-card .card-body {
    border-top-color: #f0f0ed !important;
    padding: 12px !important;
}

body.sp-ios-home .product-card .title {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--sl-ui-ink) !important;
}

/* ---------- Product ---------- */
body.sp-ios-product .container {
    padding-top: 24px !important;
}

body.sp-ios-product .product-main-card {
    grid-template-columns: minmax(420px, .9fr) minmax(0, 1.1fr) !important;
    gap: clamp(24px, 3vw, 44px) !important;
}

body.sp-ios-product .gallery-wrap {
    top: 94px !important;
    padding: 16px !important;
}

body.sp-ios-product .main-img-box {
    aspect-ratio: 1 / 1.08 !important;
    border-radius: var(--sl-ui-radius-md) !important;
    border-color: #eeeeeb !important;
    background: #fff !important;
}

body.sp-ios-product .main-img-box img {
    padding: clamp(18px, 3vw, 34px) !important;
    mix-blend-mode: normal !important;
}

body.sp-ios-product .title {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: clamp(27px, 2.6vw, 39px) !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

body.sp-ios-product .price-section {
    padding: 18px !important;
}

body.sp-ios-product .current-price {
    color: var(--sl-ui-navy) !important;
    font-size: clamp(30px, 3.4vw, 42px) !important;
}

body.sp-ios-product .variant-chip.selected {
    border-color: var(--sl-ui-navy) !important;
    background: #eef3f9 !important;
    color: var(--sl-ui-navy) !important;
}

body.sp-ios-product .thumb.active {
    border-color: var(--sl-ui-navy) !important;
    box-shadow: 0 0 0 3px rgba(24, 59, 112, .10) !important;
}

body.sp-ios-product :where(.add-to-cart-btn, .buy-now-btn, .buybar-primary) {
    background: var(--sl-ui-ink) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(29, 29, 31, .14) !important;
}

body.sp-ios-product .buy-now-btn {
    background: var(--sl-ui-navy) !important;
}

body.sp-ios-product .sticky-bottom-bar {
    background: rgba(255, 255, 255, .97) !important;
    border-color: var(--sl-ui-line) !important;
    box-shadow: var(--sl-ui-shadow-md) !important;
}

body.sp-ios-product .trust-item {
    box-shadow: none !important;
    border-color: var(--sl-ui-line) !important;
}

/* ---------- Cart ---------- */
body.sp-ios-cart .cart-page-heading,
body.sp-ios-checkout .checkout-page-heading {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
}

body.sp-ios-cart .cart-title,
body.sp-ios-checkout .checkout-page-heading h1 {
    margin: 0 !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

body.sp-ios-cart .container,
body.sp-ios-checkout .page {
    padding-top: 4px !important;
}

body.sp-ios-cart .grid-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    gap: 24px !important;
}

body.sp-ios-cart .card {
    border-radius: var(--sl-ui-radius-lg) !important;
}

body.sp-ios-cart .item-row {
    grid-template-columns: 92px minmax(0, 1fr) auto !important;
    gap: 18px !important;
    padding: 18px !important;
    background: #fff !important;
}

body.sp-ios-cart .item-img {
    width: 92px !important;
    height: 118px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    background: #fafaf8 !important;
    mix-blend-mode: normal !important;
}

body.sp-ios-cart .item-price,
body.sp-ios-cart .summary-total strong {
    color: var(--sl-ui-navy) !important;
}

body.sp-ios-cart .summary-note,
body.sp-ios-cart .meta-pill.isbn {
    background: #eef3f9 !important;
    border-color: #d7e1ee !important;
    color: var(--sl-ui-navy) !important;
}

body.sp-ios-cart :where(.btn-checkout, .btn-main) {
    background: var(--sl-ui-ink) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(29, 29, 31, .14) !important;
}

/* ---------- Checkout ---------- */
body.sp-ios-checkout .page {
    padding-bottom: 48px !important;
}

body.sp-ios-checkout .grid-layout,
body.sp-ios-checkout .checkout-grid,
body.sp-ios-checkout .checkout-layout {
    gap: 24px !important;
}

body.sp-ios-checkout :where(input, select, textarea) {
    min-height: 46px;
    border: 1px solid var(--sl-ui-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--sl-ui-ink) !important;
    box-shadow: none !important;
}

body.sp-ios-checkout :where(input, select, textarea):focus {
    border-color: rgba(24, 59, 112, .48) !important;
    box-shadow: var(--sl-ui-focus) !important;
    outline: 0 !important;
}

body.sp-ios-checkout :where(.radio-card, .payment-option, .delivery-option, .delivery-speed-card) {
    border-color: var(--sl-ui-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

body.sp-ios-checkout :where(.btn-primary, .receipt-print-btn:not(.secondary)) {
    background: var(--sl-ui-ink) !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(29, 29, 31, .14) !important;
}

body.sp-ios-checkout .btn-secondary {
    background: #fff !important;
    color: var(--sl-ui-ink) !important;
    border-color: var(--sl-ui-line-strong) !important;
    border-radius: 14px !important;
}

body.sp-ios-checkout :where(.summary-total strong, .receipt-total-row.grand strong, .success-order-number) {
    color: var(--sl-ui-navy) !important;
}

body.sp-ios-checkout :where(.receipt-info-box, .receipt-footer, .receipt-note-box) {
    background: #fafaf8 !important;
    border-color: var(--sl-ui-line) !important;
}

/* ---------- Store/vendor public page ---------- */
body.sp-ios-store .top-nav,
body.sp-ios-store .store-header,
body.sp-ios-store .store-banner,
body.sp-ios-store .products-grid,
body.sp-ios-store .footer-note {
    width: min(100%, var(--sl-ui-content)) !important;
    max-width: var(--sl-ui-content) !important;
    margin-inline: auto !important;
}

body.sp-ios-store .product-card {
    border-color: var(--sl-ui-line) !important;
    box-shadow: none !important;
}

body.sp-ios-store .product-price {
    color: var(--sl-ui-navy) !important;
}

/* ---------- Responsive ---------- */
@media (min-width: 1180px) {
    body.sp-ios-home .products {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    body.sp-ios-home .banner-card {
        flex-basis: min(620px, 46vw) !important;
    }
}

@media (min-width: 1480px) {
    body.sp-ios-home .products {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    body.sp-ios-storefront .sl-online-header-inner {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        min-height: 68px;
        padding-inline: 12px !important;
        gap: 10px !important;
    }

    body.sp-ios-storefront .sl-header-logo-link {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    body.sp-ios-storefront .sl-header-logo {
        width: 50px !important;
        height: 50px !important;
    }

    body.sp-ios-storefront :where(.shell, .container, .page) {
        padding-inline: 14px !important;
    }

    body.sp-ios-product .product-main-card,
    body.sp-ios-cart .grid-layout,
    body.sp-ios-checkout .grid-layout,
    body.sp-ios-checkout .checkout-grid,
    body.sp-ios-checkout .checkout-layout {
        grid-template-columns: 1fr !important;
    }

    body.sp-ios-product .gallery-wrap {
        position: static !important;
    }
}

@media (max-width: 760px) {
    body.sp-ios-storefront .sl-online-header-inner {
        grid-template-columns: 48px minmax(0, 1fr) 44px !important;
        min-height: 62px;
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    body.sp-ios-storefront .sl-header-logo-link {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    body.sp-ios-storefront .sl-header-logo {
        width: 44px !important;
        height: 44px !important;
    }

    body.sp-ios-storefront .sl-header-search {
        min-height: 44px !important;
        border-radius: 13px !important;
        padding: 3px 4px !important;
    }

    body.sp-ios-storefront .sl-header-search-input {
        font-size: 16px !important;
        padding-inline: 8px !important;
    }

    body.sp-ios-storefront :where(.sl-header-scan, .sl-header-search-submit) {
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
    }

    body.sp-ios-storefront .sl-header-search-submit span {
        display: none !important;
    }

    body.sp-ios-storefront .sl-header-cart {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    body.sp-ios-storefront :where(.shell, .container, .page, .cart-page-heading, .checkout-page-heading) {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 10px !important;
    }

    body.sp-ios-home .shell {
        padding-top: 12px !important;
    }

    body.sp-ios-home .home-mobile-search-card {
        margin-bottom: 16px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    body.sp-ios-home .home-mobile-search-copy {
        margin-bottom: 9px !important;
    }

    body.sp-ios-home .home-mobile-search-copy strong {
        font-size: 16px !important;
    }

    body.sp-ios-home .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.sp-ios-home .product-card {
        border-radius: 14px !important;
    }

    body.sp-ios-home .product-card .card-body {
        padding: 10px !important;
    }

    body.sp-ios-product .container {
        padding-top: 10px !important;
    }

    body.sp-ios-product .product-main-card {
        gap: 12px !important;
    }

    body.sp-ios-product .gallery-wrap {
        padding: 9px !important;
        border-radius: 18px !important;
    }

    body.sp-ios-product .main-img-box {
        border-radius: 14px !important;
    }

    body.sp-ios-product .title {
        text-align: start !important;
        font-size: clamp(20px, 5.8vw, 25px) !important;
        line-height: 1.5 !important;
    }

    body.sp-ios-product .price-section {
        border-radius: 16px !important;
        padding: 14px !important;
    }

    body.sp-ios-product .product-price-row {
        justify-content: flex-start !important;
        text-align: start !important;
    }

    body.sp-ios-product .sticky-bottom-bar,
    body.sp-ios-cart .mobile-sticky,
    body.sp-ios-checkout .mobile-sticky {
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .98) !important;
        border: 1px solid var(--sl-ui-line) !important;
        box-shadow: var(--sl-ui-shadow-md) !important;
    }

    body.sp-ios-cart .cart-page-heading,
    body.sp-ios-checkout .checkout-page-heading {
        align-items: flex-start !important;
        padding-top: 18px !important;
        padding-bottom: 12px !important;
    }

    body.sp-ios-cart .item-row {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    body.sp-ios-cart .item-img {
        width: 78px !important;
        height: 100px !important;
    }

    body.sp-ios-cart .item-actions {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    body.sp-ios-checkout :where(.card, .receipt-sheet, .checkout-card, .summary-card, .order-summary, .payment-card, .shipping-card) {
        border-radius: 16px !important;
    }
}

@media (max-width: 390px) {
    body.sp-ios-storefront .sl-online-header-inner {
        grid-template-columns: 42px minmax(0, 1fr) 40px !important;
        padding-inline: 7px !important;
        gap: 6px !important;
    }

    body.sp-ios-storefront .sl-header-logo-link,
    body.sp-ios-storefront .sl-header-logo {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    body.sp-ios-storefront .sl-header-cart {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body.sp-ios-home .products {
        gap: 8px !important;
    }
}

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

@media print {
    body.sp-ios-storefront {
        background: #fff !important;
    }

    body.sp-ios-storefront .sl-online-header {
        display: none !important;
    }
}