/* TehranLight Storefront UI Shell
   Single source of truth for top/bottom shell geometry and purchase-flow actions.
   Snapshot basis: 2026-08-27 11:29:50
*/

:root {
    --tl-shell-top-h: 72px;
    --tl-shell-bottom-h: 72px;
    --tl-shell-action-h: 50px;
    --tl-shell-edge: 10px;
    --tl-shell-gap: 8px;
    --tl-shell-radius: 20px;
    --tl-shell-action-radius: 14px;
    --tl-shell-max: 1180px;
    --tl-shell-purchase-max: 1040px;
    --tl-shell-progress-max: 720px;
    --tl-shell-navy: #173f69;
    --tl-shell-navy-deep: #102b49;
    --tl-shell-success: var(--success, #16865b);
}

/* =========================================================
   MAIN HEADER — one canonical top-shell height
   ========================================================= */

.storefront-body .announcement-bar {
    display: none !important;
}

.storefront-body .site-header,
.storefront-body .header-glass {
    min-height: var(--tl-shell-top-h);
}

.storefront-body .header-row {
    min-height: var(--tl-shell-top-h) !important;
    height: var(--tl-shell-top-h);
    padding-top: 6px;
    padding-bottom: 6px;
}

.storefront-body .site-logo .logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.storefront-body .header-search,
.storefront-body .cart-link,
.storefront-body .header-action,
.storefront-body .theme-toggle {
    min-height: 42px;
}

/* =========================================================
   SECONDARY / PURCHASE HEADER — exactly same reserved height
   ========================================================= */

.storefront-body.cart-route .cart-flow-head,
.storefront-body.checkout-route .checkout-flow-head {
    position: fixed !important;
    z-index: 4100 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: var(--tl-shell-top-h) !important;
    height: var(--tl-shell-top-h) !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    transform: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(68, 142, 201, .18) !important;
    border-radius: 0 !important;
    background: rgba(248, 249, 252, .94) !important;
    box-shadow: 0 8px 26px rgba(11, 17, 29, .08) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-steps,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-steps {
    position: relative;
    isolation: isolate;
    width: min(var(--tl-shell-progress-max), calc(100% - 20px)) !important;
    height: 46px !important;
    max-width: none !important;
    padding: 3px !important;
    gap: 3px !important;
    overflow: hidden;
    border: 1px solid rgba(68, 142, 201, .14);
    border-radius: 15px;
    background: rgba(230, 240, 250, .50);
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-steps::before,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-steps::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 10%;
    left: 10%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(68, 142, 201, .24);
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0;
    min-height: 38px !important;
    padding: 4px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: #6b7d93 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step:not(:last-child)::after,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step:not(:last-child)::after {
    display: none !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step > span,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step > span {
    flex: 0 0 auto;
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center;
    border: 1px solid rgba(68, 142, 201, .24) !important;
    border-radius: 8px !important;
    color: #536d88 !important;
    background: #f6fbff !important;
    box-shadow: none !important;
    font-size: var(--tl-type-100) !important;
    line-height: 1 !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step b,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step b {
    overflow: hidden;
    color: inherit !important;
    font-size: var(--tl-type-100) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected/current is navy; completed is project success green. Never yellow. */
.storefront-body.cart-route .cart-flow-head .checkout-flow-step.is-active,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step.is-active {
    border-color: rgba(23, 63, 105, .34) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--tl-shell-navy), var(--tl-shell-navy-deep)) !important;
    box-shadow: 0 5px 14px rgba(23, 63, 105, .14) !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step.is-active > span,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step.is-active > span {
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step.is-done,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step.is-done {
    color: #147447 !important;
}

.storefront-body.cart-route .cart-flow-head .checkout-flow-step.is-done > span,
.storefront-body.checkout-route .checkout-flow-head .checkout-flow-step.is-done > span {
    border-color: color-mix(in srgb, var(--tl-shell-success) 38%, transparent) !important;
    color: #fff !important;
    background: var(--tl-shell-success) !important;
}

.storefront-body.cart-route .cart-page,
.storefront-body.checkout-route .checkout-flow-page {
    padding-top: calc(var(--tl-shell-top-h) + 10px) !important;
}

/* =========================================================
   BOTTOM SHELL — navigation and action docks share geometry
   ========================================================= */

.storefront-body .mobile-bottom-nav,
.storefront-body.cart-route .purchase-flow-dock,
.storefront-body.checkout-route .checkout-flow-actions,
html.checkout-address-editor-open .address-capture-actions,
.customer-address-capture-actions {
    right: var(--tl-shell-edge) !important;
    bottom: calc(var(--tl-shell-edge) - 2px + env(safe-area-inset-bottom)) !important;
    left: var(--tl-shell-edge) !important;
    width: auto !important;
    min-height: var(--tl-shell-bottom-h) !important;
    height: var(--tl-shell-bottom-h) !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    transform: none !important;
    border: 1px solid rgba(68, 142, 201, .20) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 16px 42px rgba(11,17,29,.17) !important;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    box-sizing: border-box;
}

.storefront-body .mobile-bottom-nav {
    align-items: center;
}

.storefront-body .mobile-bottom-nav > a {
    height: var(--tl-shell-action-h) !important;
    min-height: var(--tl-shell-action-h) !important;
    border-radius: var(--tl-shell-action-radius) !important;
}

.storefront-body .mobile-bottom-nav > a.is-active {
    color: #fff !important;
    background: var(--tl-shell-navy) !important;
    box-shadow: 0 8px 20px rgba(23,63,105,.18) !important;
}

.storefront-body.cart-route .purchase-flow-dock {
    z-index: 5000 !important;
    display: grid !important;
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) minmax(118px, .9fr) minmax(0, 1fr) !important;
    grid-template-areas: "next total back" !important;
    align-items: center !important;
    gap: var(--tl-shell-gap) !important;
}

.storefront-body.cart-route .purchase-flow-dock > * {
    direction: rtl;
}

.storefront-body.cart-route .cart-flow-products { grid-area: back; }
.storefront-body.cart-route .cart-flow-dock__total { grid-area: total; }
.storefront-body.cart-route .cart-flow-continue { grid-area: next; }

.storefront-body.cart-route .cart-flow-dock__total {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0;
    min-height: var(--tl-shell-action-h) !important;
    height: var(--tl-shell-action-h) !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(68,142,201,.18) !important;
    border-radius: var(--tl-shell-action-radius) !important;
    color: #173f69 !important;
    background: #eef6ff !important;
    box-shadow: none !important;
}

.storefront-body.cart-route .cart-flow-dock__total::before {
    display: none !important;
}

.storefront-body.cart-route .cart-flow-dock__total small {
    color: #6a7e93 !important;
    font-size: var(--tl-type-100) !important;
}

.storefront-body.cart-route .cart-flow-dock__total strong {
    color: #173f69 !important;
    font-size: var(--tl-type-300) !important;
    white-space: nowrap;
}

.storefront-body.cart-route .cart-flow-dock__total em {
    color: #6a7e93 !important;
    font-size: var(--tl-type-100) !important;
}

.storefront-body.checkout-route .checkout-flow-actions {
    z-index: 5000 !important;
    display: grid !important;
    direction: ltr;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: "next back" !important;
    align-items: center !important;
    gap: var(--tl-shell-gap) !important;
    border-top: 1px solid rgba(68, 142, 201, .20) !important;
}

.storefront-body.checkout-route .checkout-flow-actions .checkout-flow-secondary {
    grid-area: back;
}

.storefront-body.checkout-route .checkout-flow-actions .checkout-flow-primary {
    grid-area: next;
}

.storefront-body.cart-route .purchase-flow-dock .btn,
.storefront-body.checkout-route .checkout-flow-actions .btn,
.address-capture-actions .btn,
.customer-address-capture-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--tl-shell-action-h) !important;
    height: var(--tl-shell-action-h) !important;
    padding: 7px 12px !important;
    border-radius: var(--tl-shell-action-radius) !important;
    font-size: var(--tl-type-100) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-sizing: border-box;
}

.storefront-body.cart-route .purchase-flow-back,
.storefront-body.checkout-route .checkout-flow-secondary,
.address-capture-cancel {
    border: 1px solid rgba(23,63,105,.26) !important;
    color: #173f69 !important;
    background: #f4f8fc !important;
    box-shadow: none !important;
}

.storefront-body.cart-route .purchase-flow-next,
.storefront-body.checkout-route .checkout-flow-primary {
    border: 1px solid rgba(23,63,105,.36) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--tl-shell-navy), var(--tl-shell-navy-deep)) !important;
    box-shadow: 0 7px 18px rgba(23,63,105,.18) !important;
}

.address-capture-save,
.address-title-modal__confirm {
    border-color: color-mix(in srgb, var(--tl-shell-success) 72%, transparent) !important;
    color: #fff !important;
    background: var(--tl-shell-success) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--tl-shell-success) 20%, transparent) !important;
}

.storefront-body.cart-route .cart-page,
.storefront-body.checkout-route .checkout-flow-page {
    padding-bottom: calc(var(--tl-shell-bottom-h) + var(--tl-shell-edge) + 18px) !important;
}

/* =========================================================
   ADDRESS CAPTURE — same top/bottom shell law
   ========================================================= */

html.checkout-address-editor-open .storefront-body.checkout-route .checkout-flow-head {
    display: none !important;
}

html.checkout-address-editor-open .storefront-body.checkout-route .checkout-flow-page {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html.checkout-address-editor-open .address-capture-header,
.customer-address-capture-header {
    min-height: var(--tl-shell-top-h) !important;
    height: var(--tl-shell-top-h) !important;
    padding: 0 16px !important;
    border-bottom: 1px solid rgba(68,142,201,.18) !important;
    box-sizing: border-box;
}

html.checkout-address-editor-open .address-capture-actions,
.customer-address-capture-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: var(--tl-shell-gap) !important;
    min-height: var(--tl-shell-bottom-h) !important;
    height: var(--tl-shell-bottom-h) !important;
    padding: 7px 8px !important;
    box-sizing: border-box;
}

/* =========================================================
   DARK THEME
   ========================================================= */

html[data-theme="dark"] .storefront-body.cart-route .cart-flow-head,
html[data-theme="dark"] .storefront-body.checkout-route .checkout-flow-head {
    border-bottom-color: rgba(255,255,255,.08) !important;
    background: rgba(8,14,24,.95) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.30) !important;
}

html[data-theme="dark"] .storefront-body.cart-route .cart-flow-head .checkout-flow-steps,
html[data-theme="dark"] .storefront-body.checkout-route .checkout-flow-head .checkout-flow-steps {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
}

html[data-theme="dark"] .storefront-body.cart-route .cart-flow-head .checkout-flow-step,
html[data-theme="dark"] .storefront-body.checkout-route .checkout-flow-head .checkout-flow-step {
    color: #9badc1 !important;
}

html[data-theme="dark"] .storefront-body.cart-route .cart-flow-head .checkout-flow-step > span,
html[data-theme="dark"] .storefront-body.checkout-route .checkout-flow-head .checkout-flow-step > span {
    border-color: rgba(255,255,255,.10) !important;
    color: #c9d8e8 !important;
    background: #102238 !important;
}

html[data-theme="dark"] .storefront-body .mobile-bottom-nav,
html[data-theme="dark"] .storefront-body.cart-route .purchase-flow-dock,
html[data-theme="dark"] .storefront-body.checkout-route .checkout-flow-actions {
    border-color: rgba(255,255,255,.09) !important;
    background: rgba(8,14,24,.91) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .storefront-body.cart-route .cart-flow-dock__total {
    border-color: rgba(255,255,255,.10) !important;
    color: #e8f2fc !important;
    background: #10243b !important;
}

html[data-theme="dark"] .storefront-body.cart-route .cart-flow-dock__total strong {
    color: #eef7ff !important;
}

html[data-theme="dark"] .storefront-body.cart-route .purchase-flow-back,
html[data-theme="dark"] .storefront-body.checkout-route .checkout-flow-secondary,
html[data-theme="dark"] .address-capture-cancel {
    border-color: rgba(255,255,255,.12) !important;
    color: #e7f0fa !important;
    background: #12243a !important;
}

/* =========================================================
   MOBILE — main header becomes one row, same 64px shell
   ========================================================= */

@media (max-width: 840px) {
    :root {
        --tl-shell-top-h: 64px;
        --tl-shell-bottom-h: 66px;
        --tl-shell-action-h: 52px;
        --tl-shell-edge: 8px;
        --tl-shell-gap: 7px;
        --tl-shell-radius: 20px;
        --tl-shell-action-radius: 16px;
    }

    body.storefront-body {
        padding-bottom: calc(var(--tl-shell-bottom-h) + var(--tl-shell-edge) + env(safe-area-inset-bottom)) !important;
    }

    .storefront-body .mobile-bottom-nav,
    .storefront-body.checkout-route .checkout-flow-actions {
        position: fixed !important;
        z-index: 5000 !important;
        right: var(--tl-shell-edge) !important;
        bottom: calc(var(--tl-shell-edge) - 2px + env(safe-area-inset-bottom)) !important;
        left: var(--tl-shell-edge) !important;
        min-height: var(--tl-shell-bottom-h) !important;
        height: var(--tl-shell-bottom-h) !important;
        padding: 7px 8px !important;
    }

    .storefront-body.cart-route,
    .storefront-body.checkout-route,
    body:has(.customer-address-capture-page) {
        padding-bottom: 0 !important;
    }

    .storefront-body .header-glass {
        height: var(--tl-shell-top-h);
        min-height: var(--tl-shell-top-h);
    }

    .storefront-body .header-row {
        display: grid !important;
        grid-template-columns: 38px 38px minmax(0, 1fr) 38px !important;
        grid-template-rows: 1fr !important;
        gap: 6px !important;
        min-height: var(--tl-shell-top-h) !important;
        height: var(--tl-shell-top-h) !important;
        padding: 6px 0 !important;
    }

    .storefront-body .mobile-menu-button {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 12px !important;
    }

    .storefront-body .header-row > .site-logo {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        min-width: 0;
    }

    .storefront-body .header-row > .site-logo .logo-mark {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    .storefront-body .header-row > .site-logo .logo-copy {
        display: none !important;
    }

    .storefront-body .header-search {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0;
        min-height: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    .storefront-body .header-search input {
        min-width: 0;
        height: 36px !important;
        padding: 0 7px !important;
        font-size: var(--tl-type-100) !important;
    }

    .storefront-body .header-search > svg {
        width: 16px !important;
        margin-right: 9px !important;
    }

    .storefront-body .header-search button {
        display: none !important;
    }

    .storefront-body .header-actions {
        display: contents !important;
    }

    .storefront-body .cart-link {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .storefront-body.cart-route .cart-flow-head,
    .storefront-body.checkout-route .checkout-flow-head {
        padding: 7px 8px !important;
    }

    .storefront-body.cart-route .cart-flow-head .checkout-flow-steps,
    .storefront-body.checkout-route .checkout-flow-head .checkout-flow-steps {
        width: min(560px, calc(100% - 4px)) !important;
        height: 48px !important;
        border-radius: 14px;
    }

    .storefront-body.cart-route .cart-flow-head .checkout-flow-step,
    .storefront-body.checkout-route .checkout-flow-head .checkout-flow-step {
        min-height: 40px !important;
        padding: 3px 5px !important;
    }

    .storefront-body.cart-route .cart-flow-head .checkout-flow-step > span,
    .storefront-body.checkout-route .checkout-flow-head .checkout-flow-step > span {
        width: 20px !important;
        height: 20px !important;
        font-size: var(--tl-type-100) !important;
    }

    .storefront-body.cart-route .cart-flow-head .checkout-flow-step b,
    .storefront-body.checkout-route .checkout-flow-head .checkout-flow-step b {
        font-size: var(--tl-type-100) !important;
    }

    .storefront-body.cart-route .cart-page,
    .storefront-body.checkout-route .checkout-flow-page {
        padding-top: calc(var(--tl-shell-top-h) + 8px) !important;
        padding-bottom: calc(var(--tl-shell-bottom-h) + var(--tl-shell-edge) + 12px) !important;
    }

    .storefront-body.cart-route .purchase-flow-dock {
        grid-template-columns: minmax(0, 1fr) minmax(100px, .86fr) minmax(0, 1fr) !important;
    }

    .storefront-body.cart-route .cart-flow-dock__total small {
        font-size: var(--tl-type-100) !important;
    }

    .storefront-body.cart-route .cart-flow-dock__total strong {
        font-size: var(--tl-type-200) !important;
    }

    .storefront-body.cart-route .purchase-flow-dock .btn,
    .storefront-body.checkout-route .checkout-flow-actions .btn,
    .address-capture-actions .btn,
    .customer-address-capture-actions .btn {
        font-size: var(--tl-type-100) !important;
    }

    html.checkout-address-editor-open .address-capture-header,
    .customer-address-capture-header {
        min-height: var(--tl-shell-top-h) !important;
        height: var(--tl-shell-top-h) !important;
    }

    html.checkout-address-editor-open .address-capture-actions,
    .customer-address-capture-actions {
        min-height: var(--tl-shell-bottom-h) !important;
        height: var(--tl-shell-bottom-h) !important;
        padding: 7px 8px !important;
    }
}

@media (max-width: 430px) {
    :root {
        --tl-shell-edge: 6px;
        --tl-shell-gap: 6px;
    }

    .storefront-body.cart-route .purchase-flow-dock {
        grid-template-columns: minmax(0, 1fr) minmax(94px, .85fr) minmax(0, 1fr) !important;
    }

    .storefront-body.cart-route .cart-flow-dock__total {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .storefront-body.cart-route .cart-flow-dock__total small {
        display: none !important;
    }
}

/* === TL_ACCOUNT_V9_START === */
.tl-account-v9,.tl-account-v9 *{box-sizing:border-box}
.tl-account-v9{
 --v9-s:#fff;--v9-s2:#fbfcff;--v9-t:#10233f;--v9-m:#697b94;
 --v9-line:rgba(33,60,96,.12);--v9-blue:#096cff;--v9-shadow:0 8px 24px rgba(19,42,76,.055);
 width:min(414px,calc(100% - 20px))!important;max-width:414px!important;
 margin-inline:auto!important;padding:8px 0 142px!important;display:grid!important;gap:9px!important
}
.tl-account-v9 a,.tl-account-v9 a:link,.tl-account-v9 a:visited,.tl-account-v9 a:hover,.tl-account-v9 a:focus{color:inherit!important;text-decoration:none!important}

/* exact account page heading */
.tl-account-v9__heading{height:64px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;align-items:center!important;gap:12px!important;padding:3px 2px!important}
.tl-account-v9__heading-copy{text-align:right!important}
.tl-account-v9__heading-copy h1{margin:0!important;color:var(--v9-t)!important;font-size:var(--tl-type-900)!important;font-weight:950!important;line-height:1.28!important;letter-spacing:-.25px!important}
.tl-account-v9__heading-copy p{margin:4px 0 0!important;color:var(--v9-m)!important;font-size:var(--tl-type-200)!important;font-weight:720!important;line-height:1.45!important}
.tl-account-v9__notification{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;border:1px solid var(--v9-line)!important;border-radius:14px!important;color:#173c73!important;background:var(--v9-s)!important;box-shadow:0 5px 16px rgba(20,42,72,.035)!important}
.tl-account-v9__notification svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* reference profile: COPY LEFT, ART RIGHT */
.tl-account-v9__profile{
 direction:ltr!important;height:158px!important;min-height:158px!important;display:grid!important;
 grid-template-columns:minmax(0,1fr) 121px!important;align-items:center!important;gap:13px!important;
 padding:13px 15px!important;overflow:hidden!important;border:1px solid rgba(31,103,255,.17)!important;border-radius:20px!important;
 background:radial-gradient(circle at 12% 0%,rgba(35,104,255,.08),transparent 35%),linear-gradient(135deg,#fff,#f3f7ff)!important;
 box-shadow:0 10px 28px rgba(25,49,84,.05)!important
}
.tl-account-v9__profile-content{direction:rtl!important;min-width:0!important;display:grid!important;align-content:center!important;gap:2px!important;text-align:center!important}
.tl-account-v9__welcome{overflow:hidden!important;color:var(--v9-t)!important;font-size:var(--tl-type-700)!important;font-weight:950!important;line-height:1.45!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.tl-account-v9__membership{color:#536780!important;font-size:var(--tl-type-100)!important;font-weight:760!important}
.tl-account-v9__profile-art{direction:rtl!important;position:relative!important;width:120px!important;height:120px!important;display:grid!important;place-items:center!important;justify-self:end!important}
.tl-account-v9__profile-orbit{position:absolute!important;inset:4px!important;border:1px solid rgba(37,104,255,.18)!important;border-radius:50%!important;background:rgba(255,255,255,.40)!important;box-shadow:inset 0 0 0 8px rgba(37,104,255,.024)!important}
.tl-account-v9__profile-art img{position:relative!important;z-index:1!important;width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important;display:block!important;object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 9px 15px rgba(30,52,94,.15))!important}
.tl-account-v9__check{position:absolute!important;z-index:2!important;right:5px!important;bottom:8px!important;width:27px!important;height:27px!important;display:grid!important;place-items:center!important;border:3px solid #fff!important;border-radius:50%!important;color:#fff!important;background:#19c875!important}
.tl-account-v9__check svg{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.4!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* cards: ICON PHYSICALLY LEFT just like reference */
.tl-account-v9__grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.tl-account-v9__item{
 direction:ltr!important;height:92px!important;min-height:92px!important;min-width:0!important;
 display:grid!important;grid-template-columns:61px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;
 padding:10px 11px!important;overflow:hidden!important;border:1px solid var(--v9-line)!important;border-radius:15px!important;
 background:linear-gradient(180deg,var(--v9-s),var(--v9-s2))!important;box-shadow:var(--v9-shadow)!important;
 transition:transform .16s ease,border-color .16s ease!important
}
.tl-account-v9__item:hover{transform:translateY(-1px)!important;border-color:rgba(34,105,255,.21)!important}
.tl-account-v9__item-icon{width:61px!important;height:70px!important;display:grid!important;place-items:center!important}
.tl-account-v9__item-icon img{width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important;display:block!important;object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 7px 11px rgba(26,50,88,.14))!important}
.tl-account-v9__item-copy{direction:rtl!important;min-width:0!important;display:grid!important;gap:4px!important;text-align:right!important}
.tl-account-v9__item-copy strong{overflow:hidden!important;color:var(--v9-t)!important;font-size:var(--tl-type-500)!important;font-weight:950!important;line-height:1.35!important;letter-spacing:-.1px!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.tl-account-v9__item-copy small{overflow:hidden!important;color:var(--v9-m)!important;font-size:var(--tl-type-100)!important;font-weight:700!important;line-height:1.45!important;text-overflow:ellipsis!important;white-space:nowrap!important}

/* fixed logout, exactly above fixed bottom nav */
.tl-account-v9__logout{
 position:fixed!important;z-index:4990!important;
 right:50%!important;left:auto!important;bottom:calc(var(--tl-shell-bottom-h,66px) + var(--tl-shell-edge,8px) + 9px + env(safe-area-inset-bottom,0px))!important;
 width:min(404px,calc(100% - 20px))!important;transform:translateX(50%)!important;margin:0!important
}
.tl-account-v9__logout button{width:100%!important;height:46px!important;min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;border:1px solid rgba(239,68,68,.17)!important;border-radius:15px!important;color:#ef4139!important;background:rgba(255,255,255,.91)!important;box-shadow:0 7px 22px rgba(23,43,72,.06)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;font:inherit!important;font-size:var(--tl-type-500)!important;font-weight:900!important;cursor:pointer!important}
.tl-account-v9__logout svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* ACCOUNT ROUTE ONLY: hide the existing secondary/store mobile header and footer */
@media(max-width:700px){
 body.storefront-body:has(.tl-account-v9) .site-header{display:none!important}
 body.storefront-body:has(.tl-account-v9) .site-footer{display:none!important}
 body.storefront-body:has(.tl-account-v9) #main-content{margin:0!important;padding:0!important}
 body.storefront-body:has(.tl-account-v9){padding-top:0!important}

 /* Reference bottom nav: active account is blue, not navy filled */
 body.storefront-body:has(.tl-account-v9) .mobile-bottom-nav>a:last-child,
 body.storefront-body:has(.tl-account-v9) .mobile-bottom-nav>a:last-child.is-active{
   color:#0872ff!important;background:rgba(37,104,255,.075)!important;box-shadow:none!important
 }
}

/* Dark reference */
html[data-theme="dark"] .tl-account-v9{--v9-s:#102039;--v9-s2:#0b192d;--v9-t:#f2f6ff;--v9-m:#afbdd0;--v9-line:rgba(129,171,230,.23);--v9-shadow:0 7px 22px rgba(0,0,0,.19)}
html[data-theme="dark"] .tl-account-v9__notification{color:#f0f5ff!important;background:#102039!important}
html[data-theme="dark"] .tl-account-v9__profile{border-color:rgba(38,123,255,.72)!important;background:radial-gradient(circle at 12% 0%,rgba(35,104,255,.17),transparent 35%),linear-gradient(135deg,#142b4c,#0b1b31)!important;box-shadow:0 10px 28px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .tl-account-v9__membership{color:#c2cddd!important}
html[data-theme="dark"] .tl-account-v9__profile-orbit{border-color:rgba(74,143,255,.33)!important;background:rgba(255,255,255,.015)!important}
html[data-theme="dark"] .tl-account-v9__check{border-color:#142b4c!important}
html[data-theme="dark"] .tl-account-v9__item{background:linear-gradient(180deg,#10223e,#0c1b31)!important}
html[data-theme="dark"] .tl-account-v9__logout button{border-color:rgba(255,77,68,.72)!important;color:#ff5f57!important;background:rgba(12,27,49,.94)!important;box-shadow:0 7px 22px rgba(0,0,0,.20)!important}

/* Desktop keeps the same visual family but is not fixed to mobile geometry */
@media(min-width:701px){
 .tl-account-v9{width:min(940px,calc(100% - 30px))!important;max-width:940px!important;padding:16px 0 28px!important;gap:11px!important}
 .tl-account-v9__heading{height:74px!important}
 .tl-account-v9__profile{height:176px!important;grid-template-columns:minmax(0,1fr) 160px!important;padding:18px 22px!important}
 .tl-account-v9__profile-art{width:150px!important;height:150px!important}.tl-account-v9__profile-art img{width:118px!important;height:118px!important;max-width:118px!important;max-height:118px!important}
 .tl-account-v9__grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
 .tl-account-v9__item{direction:rtl!important;height:154px!important;grid-template-columns:1fr!important;grid-template-rows:76px auto!important;justify-items:center!important;text-align:center!important;padding:12px!important}
 .tl-account-v9__item-icon{width:100%!important;height:76px!important}.tl-account-v9__item-icon img{width:68px!important;height:68px!important;max-width:68px!important;max-height:68px!important}
 .tl-account-v9__item-copy{direction:rtl!important;text-align:center!important;justify-items:center!important}.tl-account-v9__item-copy strong{font-size:var(--tl-type-400)!important}.tl-account-v9__item-copy small{font-size:var(--tl-type-100)!important}
 .tl-account-v9__logout{position:static!important;width:100%!important;transform:none!important}
 .tl-account-v9__logout button{background:transparent!important}
}

@media(max-width:390px){
 .tl-account-v9{width:calc(100% - 12px)!important;gap:7px!important;padding-bottom:140px!important}
 .tl-account-v9__heading{height:58px!important}.tl-account-v9__heading-copy h1{font-size:var(--tl-type-800)!important}.tl-account-v9__heading-copy p{font-size:var(--tl-type-100)!important}
 .tl-account-v9__profile{height:145px!important;min-height:145px!important;grid-template-columns:minmax(0,1fr) 106px!important;padding:10px 11px!important}
 .tl-account-v9__profile-art{width:104px!important;height:104px!important}.tl-account-v9__profile-art img{width:82px!important;height:82px!important;max-width:82px!important;max-height:82px!important}
 .tl-account-v9__welcome{font-size:var(--tl-type-600)!important}.tl-account-v9__membership{font-size:var(--tl-type-100)!important}
 .tl-account-v9__grid{gap:6px!important}.tl-account-v9__item{height:84px!important;min-height:84px!important;grid-template-columns:53px minmax(0,1fr)!important;gap:7px!important;padding:8px!important;border-radius:14px!important}
 .tl-account-v9__item-icon{width:53px!important;height:62px!important}.tl-account-v9__item-icon img{width:49px!important;height:49px!important;max-width:49px!important;max-height:49px!important}
 .tl-account-v9__item-copy strong{font-size:var(--tl-type-300)!important}.tl-account-v9__item-copy small{font-size:var(--tl-type-100)!important}
 .tl-account-v9__logout{width:calc(100% - 12px)!important}
}
/* === TL_ACCOUNT_V9_END === */
.tl-account-v9__profile-art img.tl-account-v9__user-photo{object-fit:cover!important;border-radius:50%!important}
.tl-account-v9__profile-content{gap:8px!important}
.tl-account-v9__profile-content .tl-account-v9__welcome{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.5!important}
.tl-account-v9 a.tl-account-v9__track-link,.tl-account-v9 a.tl-account-v9__track-link:link,.tl-account-v9 a.tl-account-v9__track-link:visited{display:inline-flex!important;justify-self:center!important;align-items:center!important;justify-content:center!important;min-width:145px!important;min-height:40px!important;padding:8px 18px!important;border:1px solid #154b9e!important;border-radius:11px!important;background:#1655b5!important;color:#fff!important;font-size:14px!important;line-height:1.35!important;font-weight:850!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:0 4px 12px rgba(15,73,159,.20)!important}
.tl-account-v9 a.tl-account-v9__track-link:hover,.tl-account-v9 a.tl-account-v9__track-link:focus-visible{background:#104492!important;color:#fff!important;outline:2px solid #76a9ff!important;outline-offset:2px!important}
@media(max-width:390px){.tl-account-v9 a.tl-account-v9__track-link{min-width:132px!important;min-height:37px!important;padding:7px 12px!important;font-size:13px!important}}
.tl-account-v9__profile-content{transform:translateY(-8px)!important;gap:15px!important}
@media(max-width:700px){.tl-account-v9__profile-content .tl-account-v9__welcome{font-size:clamp(10px,2.8vw,13px)!important;letter-spacing:-.25px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;width:100%!important}.tl-account-v9__profile-content{transform:translateY(-10px)!important;gap:14px!important}}