/* TehranLight unified floating glass UI
   Snapshot basis: 2026-08-27 11:52:32
   This file is intentionally loaded after ui-shell.css.
*/

:root {
    --tl-ui-control-h: 46px;
    --tl-ui-control-radius: 14px;
    --tl-ui-icon-h: 40px;
    --tl-ui-float-radius: 22px;
    --tl-ui-float-edge: 8px;
    --tl-ui-float-gap: 7px;
    --tl-ui-glass-border: rgba(75, 169, 217, .24);
    --tl-ui-glass-bg: rgba(248, 252, 255, .78);
    --tl-ui-glass-bg-strong: rgba(244, 250, 255, .90);
    --tl-ui-glass-control: rgba(255, 255, 255, .62);
    --tl-ui-glass-shadow: 0 16px 42px rgba(11, 32, 56, .16);
    --tl-ui-glass-control-shadow: 0 8px 20px rgba(11, 32, 56, .09);
    --tl-ui-glass-blur: 22px;
    --tl-ui-navy: #173f69;
    --tl-ui-navy-deep: #102a48;
    --tl-ui-success: #18865f;
}

/* Shared action language: one height, one radius, one floating/glass law. */
.storefront-body :where(
    .btn,
    .remove-btn,
    .cart-small-btn,
    .checkout-btn,
    .product-card-add,
    .catalog-panel-apply,
    .catalog-apply-filters,
    .catalog-clear-filters,
    .checkout-address-add,
    .checkout-coupon-apply,
    .purchase-flow-back,
    .purchase-flow-next,
    .checkout-flow-primary,
    .checkout-flow-secondary,
    .address-capture-save,
    .address-capture-cancel,
    .customer-address-capture-actions .btn
) {
    min-height: var(--tl-ui-control-h) !important;
    height: var(--tl-ui-control-h);
    padding: 0 16px !important;
    border-radius: var(--tl-ui-control-radius) !important;
    border: 1px solid var(--tl-ui-glass-border) !important;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        var(--tl-ui-glass-control-shadow) !important;
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background .16s ease !important;
}

.storefront-body :where(
    .btn,
    .remove-btn,
    .cart-small-btn,
    .checkout-btn,
    .catalog-panel-apply,
    .catalog-clear-filters,
    .checkout-address-add,
    .checkout-coupon-apply,
    .purchase-flow-back,
    .checkout-flow-secondary,
    .address-capture-cancel
):not(.btn-primary):not(.cart-primary) {
    color: var(--text);
    background: var(--tl-ui-glass-control);
}

.storefront-body :where(
    .btn-primary,
    .cart-primary,
    .catalog-apply-filters,
    .purchase-flow-next,
    .checkout-flow-primary
) {
    color: #fff !important;
    border-color: rgba(75,169,217,.36) !important;
    background: color-mix(in srgb, var(--tl-ui-navy) 88%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 10px 24px rgba(23,63,105,.22) !important;
}

.storefront-body .product-card-add:not(.disabled) {
    color: #fff !important;
    border-color: rgba(75,169,217,.34) !important;
    background: color-mix(in srgb, var(--tl-ui-navy) 88%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 9px 20px rgba(23,63,105,.20) !important;
}

.storefront-body .product-card-cart-form.is-added .product-card-add {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--tl-ui-success) 68%, transparent) !important;
    background: color-mix(in srgb, var(--tl-ui-success) 88%, transparent) !important;
}

.storefront-body :where(
    .address-capture-save,
    .address-title-modal__confirm
) {
    color: #fff !important;
    border-color: color-mix(in srgb, var(--tl-ui-success) 72%, transparent) !important;
    background: color-mix(in srgb, var(--tl-ui-success) 90%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 10px 24px color-mix(in srgb, var(--tl-ui-success) 22%, transparent) !important;
}

.storefront-body :where(
    .btn,
    .remove-btn,
    .cart-small-btn,
    .checkout-btn,
    .catalog-panel-apply,
    .catalog-apply-filters,
    .catalog-clear-filters,
    .checkout-address-add,
    .checkout-coupon-apply
):hover {
    transform: translateY(-1px);
}

/* Icon-only controls keep the same visual law while using a compact square footprint. */
.storefront-body :where(
    .mobile-menu-button,
    .theme-toggle,
    .checkout-address-editor__close
) {
    min-width: var(--tl-ui-icon-h) !important;
    width: var(--tl-ui-icon-h);
    min-height: var(--tl-ui-icon-h) !important;
    height: var(--tl-ui-icon-h);
    border: 1px solid var(--tl-ui-glass-border) !important;
    border-radius: 13px !important;
    background: var(--tl-ui-glass-control) !important;
    box-shadow: var(--tl-ui-glass-control-shadow);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

/* Floating glass bottom navigation: equal cells, no oversized center action. */
@media (max-width: 840px) {
    .storefront-body .mobile-bottom-nav {
        right: var(--tl-ui-float-edge) !important;
        left: var(--tl-ui-float-edge) !important;
        bottom: calc(var(--tl-ui-float-edge) + env(safe-area-inset-bottom)) !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 4px !important;
        height: 66px !important;
        padding: 6px !important;
        border: 1px solid var(--tl-ui-glass-border) !important;
        border-radius: var(--tl-ui-float-radius) !important;
        background: var(--tl-ui-glass-bg) !important;
        box-shadow: var(--tl-ui-glass-shadow) !important;
        backdrop-filter: blur(var(--tl-ui-glass-blur)) saturate(165%) !important;
        -webkit-backdrop-filter: blur(var(--tl-ui-glass-blur)) saturate(165%) !important;
    }

    .storefront-body .mobile-bottom-nav > a {
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        gap: 2px !important;
        border: 1px solid transparent;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    .storefront-body .mobile-bottom-nav > a.is-active {
        color: #fff !important;
        border-color: rgba(75,169,217,.30) !important;
        background: color-mix(in srgb, var(--tl-ui-navy) 90%, transparent) !important;
        box-shadow: 0 8px 18px rgba(23,63,105,.20) !important;
    }

    .storefront-body .mobile-bottom-nav .mobile-cart-action {
        margin-top: 0 !important;
        background: transparent !important;
    }

    .storefront-body .mobile-bottom-nav .mobile-cart-icon {
        width: 30px !important;
        height: 30px !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: inherit !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .storefront-body .mobile-bottom-nav .mobile-cart-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .storefront-body .mobile-bottom-nav .mobile-cart-icon .cart-count {
        top: -6px !important;
        left: -7px !important;
    }
}

/* =========================================================
   MOBILE PRODUCTS — unified floating search + discovery tools
   ========================================================= */

@media (max-width: 840px) {
    .storefront-body.products-route .site-header {
        display: none !important;
    }

    .storefront-body.products-route #main-content {
        padding-top: 0 !important;
    }

    .storefront-body.products-route .catalog-page {
        padding-top: 116px !important;
    }

    .storefront-body.products-route .catalog-floating-glass {
        position: fixed;
        z-index: 135;
        top: calc(var(--tl-ui-float-edge) + env(safe-area-inset-top));
        right: var(--tl-ui-float-edge);
        left: var(--tl-ui-float-edge);
        display: grid !important;
        gap: 6px;
        padding: 7px;
        border: 1px solid var(--tl-ui-glass-border);
        border-radius: var(--tl-ui-float-radius);
        background: var(--tl-ui-glass-bg);
        box-shadow: var(--tl-ui-glass-shadow);
        backdrop-filter: blur(var(--tl-ui-glass-blur)) saturate(165%);
        -webkit-backdrop-filter: blur(var(--tl-ui-glass-blur)) saturate(165%);
    }

    .storefront-body.products-route .catalog-floating-search {
        position: relative;
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 38px;
        align-items: center;
        width: 100%;
        height: var(--tl-ui-control-h);
        min-height: var(--tl-ui-control-h);
        overflow: hidden;
        border: 1px solid rgba(75,169,217,.22);
        border-radius: var(--tl-ui-control-radius);
        background: var(--tl-ui-glass-bg-strong);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
    }

    .storefront-body.products-route .catalog-floating-search > svg {
        width: 17px;
        height: 17px;
        justify-self: center;
        fill: none;
        stroke: #6e7f92;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .storefront-body.products-route .catalog-floating-search input {
        width: 100%;
        min-width: 0;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 6px !important;
        border: 0 !important;
        outline: 0 !important;
        color: var(--text);
        background: transparent !important;
        box-shadow: none !important;
        font-size: var(--tl-type-600) !important;
    }

    .storefront-body.products-route .catalog-floating-search input::placeholder {
        color: #8290a2;
        font-size: var(--tl-type-100);
    }

    .storefront-body.products-route .catalog-floating-search button {
        display: grid;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        place-items: center;
        padding: 0 !important;
        margin-left: 1px;
        border: 1px solid rgba(75,169,217,.20) !important;
        border-radius: 11px !important;
        color: #fff;
        background: color-mix(in srgb, var(--tl-ui-navy) 90%, transparent) !important;
        box-shadow: 0 6px 14px rgba(23,63,105,.16) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .storefront-body.products-route .catalog-floating-search button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button {
        min-width: 0;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 7px !important;
        border: 1px solid rgba(75,169,217,.18) !important;
        border-radius: 13px !important;
        color: var(--tl-ui-navy);
        background: rgba(255,255,255,.52) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.50) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button.is-active {
        color: #fff !important;
        border-color: rgba(75,169,217,.34) !important;
        background: color-mix(in srgb, var(--tl-ui-navy) 90%, transparent) !important;
        box-shadow: 0 7px 16px rgba(23,63,105,.18) !important;
    }

    .storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button svg {
        width: 16px;
        height: 16px;
    }

    /* Open category/brand/filter content floats below the toolbar instead of moving the cards. */
    .storefront-body.products-route .catalog-discovery-form.is-open {
        position: fixed !important;
        z-index: 132 !important;
        top: calc(115px + var(--tl-ui-float-edge) + env(safe-area-inset-top)) !important;
        right: var(--tl-ui-float-edge) !important;
        left: var(--tl-ui-float-edge) !important;
        display: grid !important;
        max-height: min(58vh, 520px);
        overflow: auto;
        margin: 0 !important;
        padding: 9px !important;
        border: 1px solid var(--tl-ui-glass-border) !important;
        border-radius: 18px !important;
        background: var(--tl-ui-glass-bg-strong) !important;
        box-shadow: var(--tl-ui-glass-shadow) !important;
        backdrop-filter: blur(var(--tl-ui-glass-blur)) saturate(165%);
        -webkit-backdrop-filter: blur(var(--tl-ui-glass-blur)) saturate(165%);
    }

    .storefront-body.products-route .catalog-direct-option span {
        min-height: 38px !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,.58) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .storefront-body.products-route .catalog-direct-option.is-selected span,
    .storefront-body.products-route .catalog-direct-option input:checked + span {
        color: #fff !important;
        border-color: rgba(75,169,217,.34) !important;
        background: color-mix(in srgb, var(--tl-ui-navy) 90%, transparent) !important;
    }
}

/* Dark theme uses the same glass law, with darker translucent surfaces. */
html[data-theme="dark"] {
    --tl-ui-glass-border: rgba(141, 184, 224, .18);
    --tl-ui-glass-bg: rgba(8, 17, 29, .76);
    --tl-ui-glass-bg-strong: rgba(12, 25, 42, .91);
    --tl-ui-glass-control: rgba(20, 39, 63, .70);
    --tl-ui-glass-shadow: 0 18px 46px rgba(0,0,0,.34);
    --tl-ui-glass-control-shadow: 0 8px 20px rgba(0,0,0,.20);
}

html[data-theme="dark"] .storefront-body :where(
    .btn,
    .remove-btn,
    .cart-small-btn,
    .checkout-btn,
    .catalog-panel-apply,
    .catalog-clear-filters,
    .checkout-address-add,
    .checkout-coupon-apply,
    .purchase-flow-back,
    .checkout-flow-secondary,
    .address-capture-cancel
):not(.btn-primary):not(.cart-primary) {
    color: #e5eef8;
    background: var(--tl-ui-glass-control);
}

@media (max-width: 840px) {
    html[data-theme="dark"] .storefront-body.products-route .catalog-floating-search {
        border-color: rgba(141,184,224,.17);
        background: rgba(17,34,55,.78);
    }

    html[data-theme="dark"] .storefront-body.products-route .catalog-floating-search > svg {
        stroke: #91a4ba;
    }

    html[data-theme="dark"] .storefront-body.products-route .catalog-floating-search input {
        color: #edf5fd;
    }

    html[data-theme="dark"] .storefront-body.products-route .catalog-floating-search input::placeholder {
        color: #8191a6;
    }

    html[data-theme="dark"] .storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button {
        color: #d8e6f5;
        border-color: rgba(141,184,224,.14) !important;
        background: rgba(255,255,255,.045) !important;
    }

    html[data-theme="dark"] .storefront-body.products-route .catalog-direct-option span {
        color: #dce8f5;
        border-color: rgba(141,184,224,.14) !important;
        background: rgba(255,255,255,.045) !important;
    }

    html[data-theme="dark"] .storefront-body .mobile-bottom-nav > a:not(.is-active) {
        color: #93a3b6 !important;
    }

    html[data-theme="dark"] .storefront-body.products-route .catalog-direct-option.is-selected span,
    html[data-theme="dark"] .storefront-body.products-route .catalog-direct-option input:checked + span {
        color: #fff !important;
        border-color: rgba(75,169,217,.34) !important;
        background: color-mix(in srgb, var(--tl-ui-navy) 92%, transparent) !important;
        box-shadow: 0 7px 16px rgba(0,0,0,.22) !important;
    }
}

/* Reduced motion: glass remains, floating movement stops. */
@media (prefers-reduced-motion: reduce) {
    .storefront-body :where(.btn, button) {
        transition: none !important;
    }

    .storefront-body :where(.btn, button):hover {
        transform: none !important;
    }
}