/*
 * TT SHOP - DESKTOP FIXED CANVAS
 * Desktop/landscape is selected from the physical screen in header.php.
 * Browser zoom may reduce the CSS viewport, but it must never reflow this canvas.
 */

html[data-layout="horizontal"] {
    width: auto !important;
    min-width: 1366px !important;
    overflow-x: auto !important;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ========================================================================== 
   FINAL DESKTOP WIDTH SYSTEM (local review)
   Fixed centred retail container; no scaling/zoom and no business changes.
   ========================================================================== */
@media (min-width: 769px) and (orientation: landscape) {
    :root {
        --tt-desktop-container-width: min(1440px, calc(100vw - 32px));
        --tt-desktop-container-edge: calc((100vw - var(--tt-desktop-container-width)) / 2);
        --tt-desktop-left: 205px;
        --tt-desktop-right: 217px;
        --tt-desktop-gap: 12px;
    }

    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body,
    html[data-layout="horizontal"] #ttSpaContent,
    html[data-layout="horizontal"] .main-header,
    html[data-layout="horizontal"] .tt-launcher-header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Header background remains full width; only its contents are capped. */
    html[data-layout="horizontal"] .main-header .container,
    html[data-layout="horizontal"] .main-header .container.tt-launcher-header-inner {
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        box-sizing: border-box !important;
    }

    /* Home: exact three-column centred container. */
    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4 {
        inset: 0 !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        column-gap: var(--tt-desktop-gap) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left {
        grid-column: 1 !important;
        width: var(--tt-desktop-left) !important;
        min-width: var(--tt-desktop-left) !important;
        max-width: var(--tt-desktop-left) !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-main {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        grid-column: 3 !important;
        width: var(--tt-desktop-right) !important;
        min-width: var(--tt-desktop-right) !important;
        max-width: var(--tt-desktop-right) !important;
    }

    /* Product detail: the same container and column coordinates as home. */
    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-main {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-left {
        left: var(--tt-desktop-container-edge) !important;
        width: var(--tt-desktop-left) !important;
        min-width: var(--tt-desktop-left) !important;
        max-width: var(--tt-desktop-left) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        right: var(--tt-desktop-container-edge) !important;
        width: var(--tt-desktop-right) !important;
        min-width: var(--tt-desktop-right) !important;
        max-width: var(--tt-desktop-right) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        width: var(--tt-desktop-container-width) !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: calc(var(--tt-desktop-right) + var(--tt-desktop-gap)) !important;
        padding-left: calc(var(--tt-desktop-left) + var(--tt-desktop-gap)) !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] img,
    html[data-layout="horizontal"] video,
    html[data-layout="horizontal"] iframe {
        max-width: 100% !important;
        height: auto;
    }
}

@media (min-width: 1280px) and (max-width: 1499px) and (orientation: landscape) {
    :root {
        --tt-desktop-container-width: calc(100vw - 20px);
        --tt-desktop-left: 195px;
        --tt-desktop-right: 205px;
        --tt-desktop-gap: 10px;
    }
}

/* iPad landscape: reuse the existing PC productGrid, but let the complete
   content area reflow inside the visual viewport. Sidebars are removed from
   layout at this size so no hidden track can keep consuming horizontal room. */
@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > #productGrid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        margin-inline: auto !important;
        padding-inline: clamp(8px, 1.25vw, 16px) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main {
        display: block !important;
        grid-column: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > #productGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(8px, 1vw, 16px) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid > .feed-item-scroll,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-card {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-card {
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-card *,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-thumb-box {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-thumb-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-thumb {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    /* Top-view artwork must use its intrinsic ratio. The legacy 96/165/180px
       heights and object-fit:fill make wide cards look unnaturally short. */
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-top-grid .tt-top-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-top-grid .tt-top-img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}

@media (min-width: 1500px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page header.main-header .container.tt-launcher-header-inner {
        grid-template-columns: 205px 160px 300px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page header.main-header .tt-launcher-header-quicklinks,
    html[data-layout="horizontal"] body.tt-detail-page header.main-header .tt-launcher-context-nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    :root {
        --tt-desktop-container-width: calc(100vw - 20px);
        --tt-desktop-left: 190px;
        --tt-desktop-right: 0px;
        --tt-desktop-gap: 10px;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4,
    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) !important;
    }

    html[data-layout="horizontal"] .tt-launcher-sidebar-right,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        display: none !important;
    }
}

/* Absolute final alignment guards. */
@media (min-width: 769px) and (orientation: landscape) {
    html[data-layout="horizontal"] body .main-header .container,
    html[data-layout="horizontal"] body .main-header .container.tt-launcher-header-inner {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-shell {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-shell {
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) !important;
    }
}

/* Alignment guards with enough specificity to override the legacy iPad/detail
   selectors. Compensate only for the scrollbar gutter; no visual scaling. */
@media (min-width: 769px) and (orientation: landscape) {
    html[data-layout="horizontal"] body .main-header .container,
    html[data-layout="horizontal"] body .main-header .container.tt-launcher-header-inner {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-shell {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-detail-landscape-shell {
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) !important;
    }
}

html[data-layout="horizontal"] body {
    width: 1366px !important;
    min-width: 1366px !important;
    max-width: 1366px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow-x: visible !important;
}

html[data-layout="horizontal"] body,
html[data-layout="horizontal"] .tt-launcher-shell,
html[data-layout="horizontal"] .main-header {
    --launcher-sidebar-width: 220px !important;
    --launcher-layout-gap: 14px !important;
    --tt-text-xs: 11px !important;
    --tt-text-sm: 12px !important;
    --tt-text-md: 14px !important;
    --tt-text-lg: 16px !important;
    --tt-text-xl: 20px !important;
    --tt-text-2xl: 26px !important;
}

html[data-layout="horizontal"] .main-header,
html[data-layout="horizontal"] .tt-launcher-header {
    width: 1366px !important;
    min-width: 1366px !important;
    max-width: 1366px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

html[data-layout="horizontal"] .main-header .container,
html[data-layout="horizontal"] .main-header .container.tt-launcher-header-inner {
    display: grid !important;
    grid-template-columns: 220px 260px 220px 366px 240px !important;
    column-gap: 8px !important;
    width: 1338px !important;
    min-width: 1338px !important;
    max-width: 1338px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html[data-layout="horizontal"] .main-header .container > a:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
}

html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats .inp-search-unified {
    flex: 0 0 170px !important;
    width: 170px !important;
    min-width: 0 !important;
    max-width: 170px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats .btn-search-unified {
    flex: 0 0 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    font-size: 10px !important;
}

html[data-layout="horizontal"] .tt-launcher-header-quicklinks {
    display: flex !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 220px !important;
    min-width: 220px !important;
}

html[data-layout="horizontal"] .tt-launcher-header-quicklinks a {
    flex: 0 0 48px !important;
    width: 48px !important;
}

html[data-layout="horizontal"] .tt-launcher-header-quicklinks span {
    display: block !important;
}

html[data-layout="horizontal"] .tt-launcher-context-nav {
    display: flex !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 366px !important;
    min-width: 366px !important;
    overflow: visible !important;
}

html[data-layout="horizontal"] .tt-launcher-context-nav:has(> #ttFloatFilter) > .tt-launcher-current-section,
html[data-layout="horizontal"] .tt-launcher-context-nav:has(> #ttFloatFilter) > .tt-launcher-current-price,
html[data-layout="horizontal"] .tt-launcher-context-nav > .tt-launcher-current-price[hidden] {
    display: none !important;
}

html[data-layout="horizontal"] .tt-launcher-context-nav > #ttFloatFilter.tt-float-filter {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-layout="horizontal"] .tt-launcher-context-nav > #ttFloatFilter .tt-filter-split.grid-category {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-layout="horizontal"] .tt-launcher-context-nav > .tt-launcher-home-button {
    flex: 0 0 100px !important;
    width: 100px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 10px !important;
}

html[data-layout="horizontal"] .main-header .container > a:last-child {
    display: inline-flex !important;
    grid-column: 5 !important;
    grid-row: 1 !important;
    position: static !important;
    inset: auto !important;
    justify-self: stretch !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    gap: 3px !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
    overflow: visible !important;
    font-size: 9px !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

html[data-layout="horizontal"] #ttSpaContent {
    width: 1366px !important;
    min-width: 1366px !important;
    max-width: 1366px !important;
}

html[data-layout="horizontal"] .tt-launcher-shell-phase1,
html[data-layout="horizontal"] #ttSpaContent > .container.py-4,
html[data-layout="horizontal"] body.tt-detail-page .detail-container {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 250px !important;
    column-gap: 14px !important;
    width: 1338px !important;
    min-width: 1338px !important;
    max-width: 1338px !important;
    margin: 12px auto 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left,
html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right,
html[data-layout="horizontal"] .tt-detail-landscape-sidebar {
    display: block !important;
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left {
    grid-column: 1 !important;
    width: 220px !important;
}

html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-main {
    grid-column: 2 !important;
    width: 840px !important;
    min-width: 840px !important;
    max-width: 840px !important;
}

html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
    grid-column: 3 !important;
    width: 250px !important;
}

html[data-layout="horizontal"] #productGrid {
    display: flex !important;
    flex-wrap: wrap !important;
}

html[data-layout="horizontal"] #productGrid > .feed-item-scroll {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
}

html[data-layout="horizontal"] .tt-launcher-main > .profile-tactical {
    width: 840px !important;
    min-width: 840px !important;
    max-width: 840px !important;
}

html[data-layout="horizontal"] body.tt-detail-page .detail-container {
    display: block !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-shell {
    display: grid !important;
    grid-template-columns: 220px 840px 250px !important;
    gap: 14px !important;
    width: 1338px !important;
    min-width: 1338px !important;
    max-width: 1338px !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-main {
    width: 840px !important;
    min-width: 840px !important;
    max-width: 840px !important;
}

html[data-layout="horizontal"] body.tt-detail-page .tt-landscape-product-top {
    grid-template-columns: 500px 326px !important;
    gap: 14px !important;
    width: 840px !important;
    min-width: 840px !important;
    max-width: 840px !important;
}

html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
    width: 1366px !important;
    min-width: 1366px !important;
    max-width: 1366px !important;
    padding-right: 278px !important;
    padding-left: 248px !important;
}

html[data-layout="horizontal"] body.tt-detail-page .detail-related-container .tt-related-slider {
    gap: 10px !important;
    scrollbar-width: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page .detail-related-container .tt-related-slider::-webkit-scrollbar {
    display: none !important;
}

html[data-layout="horizontal"] body.tt-detail-page .detail-related-container .tt-related-card {
    flex: 0 0 calc((100% - 30px) / 4) !important;
    min-width: calc((100% - 30px) / 4) !important;
}

html[data-layout="horizontal"] .tt-main-footer,
html[data-layout="horizontal"] .site-footer {
    width: 1366px !important;
    min-width: 1366px !important;
    max-width: 1366px !important;
}

html[data-layout="horizontal"] .tt-main-footer .container {
    width: 840px !important;
    min-width: 840px !important;
    max-width: 840px !important;
    margin-left: 248px !important;
    margin-right: 0 !important;
}

html[data-layout="horizontal"] .tt-main-footer {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding: 0 0 26px !important;
    background: transparent !important;
    border-top: 0 !important;
}

html[data-layout="horizontal"] .tt-main-footer .tt-footer-seo {
    margin-top: 0 !important;
    padding: 22px 24px 24px !important;
    border: 1px solid rgba(34, 211, 238, .16) !important;
    border-radius: 14px !important;
    background: #071625 !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}

html[data-layout="horizontal"] .tt-main-footer .tt-footer-seo > div:first-child {
    font-size: 14px !important;
}

html[data-layout="horizontal"] .tt-main-footer .tt-footer-seo > div:last-child {
    font-size: 13px !important;
}

html[data-layout="horizontal"] body.tt-detail-page footer.tt-main-footer {
    margin: 18px 0 0 !important;
    padding: 0 0 26px !important;
    background: transparent !important;
    border-top: 0 !important;
}

/* Desktop-only visibility must not be changed by a zoom-created narrow CSS viewport. */
html[data-layout="horizontal"] .tt-mobile-only,
html[data-layout="horizontal"] .tt-detail-appbar,
html[data-layout="horizontal"] .d-md-none {
    display: none !important;
}

html[data-layout="horizontal"] .tt-launcher-only,
html[data-layout="horizontal"] .tt-desktop-only {
    display: block !important;
}

/* Physical tablets in landscape use the full launcher without retaining the
   1366px fixed canvas. This keeps both sidebars inside the visible viewport. */
@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) {
    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body,
    html[data-layout="horizontal"] #ttSpaContent,
    html[data-layout="horizontal"] .main-header,
    html[data-layout="horizontal"] .tt-launcher-header,
    html[data-layout="horizontal"] .tt-main-footer,
    html[data-layout="horizontal"] .site-footer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] .main-header .container,
    html[data-layout="horizontal"] .main-header .container.tt-launcher-header-inner {
        grid-template-columns: minmax(140px, .72fr) minmax(210px, 1.18fr) minmax(170px, .82fr) minmax(260px, 1.2fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        column-gap: 6px !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] .main-header .container > a:last-child {
        display: none !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats,
    html[data-layout="horizontal"] .tt-launcher-header-quicklinks,
    html[data-layout="horizontal"] .tt-launcher-context-nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] .tt-launcher-shell-phase1,
    html[data-layout="horizontal"] #ttSpaContent > .container.py-4 {
        grid-template-columns: minmax(140px, 15vw) minmax(0, 1fr) minmax(158px, 17vw) !important;
        width: calc(100% - 16px) !important;
        min-width: 0 !important;
        max-width: calc(100% - 16px) !important;
        margin: 12px 8px 0 !important;
        column-gap: 8px !important;
    }

    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left,
    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-main,
    html[data-layout="horizontal"] .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right,
    html[data-layout="horizontal"] .tt-launcher-main > .profile-tactical {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] .tt-main-footer .container {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: calc(min(158px, 17vw) + 16px) !important;
        margin-left: calc(min(140px, 15vw) + 16px) !important;
    }
}

/* Final landscape viewport layout. Uses the existing header/shell/sidebar/main
   elements; portrait mobile keeps its original document scroll. */
@media (min-width: 769px) and (orientation: landscape) {
    :root {
        --tt-landscape-header-height: 58px;
        --tt-landscape-left-width: clamp(170px, 15vw, 220px);
        --tt-landscape-right-width: clamp(170px, 16vw, 235px);
        --tt-landscape-gap: clamp(6px, .7vw, 12px);
    }

    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .main-header,
    html[data-layout="horizontal"] .tt-launcher-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 9999 !important;
        /* The category/price picker is positioned below the fixed header.
           Keep it outside the 58px header box so iPad taps reveal the panel. */
        overflow: visible !important;
        width: 100% !important;
        height: var(--tt-landscape-header-height) !important;
        min-width: 0 !important;
        min-height: var(--tt-landscape-header-height) !important;
        max-width: 100% !important;
        max-height: var(--tt-landscape-header-height) !important;
        margin: 0 !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
        box-sizing: border-box !important;
    }

    /* Actual support/hotline control shown at the end of the current header. */
    html[data-layout="horizontal"] .main-header .tt-launcher-header-inner > a:last-child {
        display: none !important;
    }

    html[data-layout="horizontal"] .main-header .container,
    html[data-layout="horizontal"] .main-header .container.tt-launcher-header-inner {
        display: grid !important;
        grid-template-columns:
            clamp(140px, 14vw, 210px)
            300px
            clamp(190px, 18vw, 340px)
            clamp(370px, 34vw, 600px) !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 clamp(6px, .7vw, 14px) !important;
        column-gap: clamp(5px, .55vw, 10px) !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] .main-header .container > *,
    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats,
    html[data-layout="horizontal"] .tt-launcher-header-quicklinks,
    html[data-layout="horizontal"] .tt-launcher-context-nav {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats {
        grid-column: 2 !important;
        display: flex !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats .inp-search-unified {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats .btn-search-unified {
        flex: 0 0 100px !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks {
        grid-column: 3 !important;
        width: 100% !important;
        gap: clamp(3px, .4vw, 7px) !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks > a {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-inline: clamp(2px, .35vw, 7px) !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav > #ttFloatFilter,
    html[data-layout="horizontal"] .tt-launcher-context-nav > #ttFloatFilter .tt-float-filter-panel {
        overflow: visible !important;
        z-index: 10002 !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks > a > span {
        display: block !important;
        overflow: visible !important;
        font-size: clamp(6px, .5vw, 9px) !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav {
        grid-column: 4 !important;
        width: 100% !important;
        gap: clamp(4px, .45vw, 8px) !important;
        overflow: visible !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav > .tt-launcher-home-button,
    html[data-layout="horizontal"] .tt-launcher-context-nav > .tt-launcher-current-section,
    html[data-layout="horizontal"] .tt-launcher-context-nav > .tt-launcher-current-price,
    html[data-layout="horizontal"] .tt-launcher-context-nav > #ttFloatFilter {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav > .tt-launcher-home-button {
        flex: 0 0 clamp(80px, 8.2vw, 118px) !important;
        width: clamp(80px, 8.2vw, 118px) !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav a,
    html[data-layout="horizontal"] .tt-launcher-context-nav button,
    html[data-layout="horizontal"] .tt-launcher-context-nav span,
    html[data-layout="horizontal"] .tt-launcher-header-quicklinks a {
        min-width: 0 !important;
        padding-inline: clamp(5px, .65vw, 12px) !important;
        gap: clamp(3px, .35vw, 6px) !important;
        font-size: clamp(8px, .7vw, 12px) !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav a,
    html[data-layout="horizontal"] .tt-launcher-context-nav button {
        overflow: visible !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav a > span,
    html[data-layout="horizontal"] .tt-launcher-context-nav button span,
    html[data-layout="horizontal"] .tt-launcher-context-nav .tt-current-section-label,
    html[data-layout="horizontal"] .tt-launcher-context-nav .tt-current-price-label {
        font-size: clamp(7px, .62vw, 11px) !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent {
        position: fixed !important;
        inset: var(--tt-landscape-header-height) 0 0 0 !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
        box-sizing: border-box !important;
    }

    /* The footer is a sibling of #ttSpaContent. Once the landscape workspace
       is fixed, leaving it in normal flow places it over the banner. */
    html[data-layout="horizontal"] body:not(.tt-detail-page) > .tt-main-footer,
    html[data-layout="horizontal"] body:not(.tt-detail-page) > .site-footer,
    html[data-layout="horizontal"] body:not(.tt-detail-page) > footer {
        display: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4 {
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        grid-template-columns: var(--tt-landscape-left-width) minmax(0, 1fr) var(--tt-landscape-right-width) !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 var(--tt-landscape-gap) !important;
        column-gap: var(--tt-landscape-gap) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        position: relative !important;
        inset: auto !important;
        align-self: stretch !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 20px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-main {
        position: relative !important;
        inset: auto !important;
        align-self: stretch !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding-top: var(--tt-landscape-gap) !important;
        padding-bottom: 24px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > .profile-tactical,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > .tt-home-live-panel,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > .tt-desktop-persistent-stats,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > .tt-price-filter-panel,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main > #productGrid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] img,
    html[data-layout="horizontal"] video,
    html[data-layout="horizontal"] iframe {
        max-width: 100% !important;
    }

    /* Detail has related products outside its three-column shell, so it keeps
       document scrolling while reusing the same fixed header. */
    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body.tt-detail-page {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - var(--tt-landscape-header-height)) !important;
        padding-top: var(--tt-landscape-header-height) !important;
        overflow: visible !important;
    }

    /* Detail's own stylesheet used a sticky header, so the 58px header height
       stayed in document flow while #ttSpaContent also added 58px padding.
       Match the home page: one fixed header and content beginning at y=58. */
    html[data-layout="horizontal"] body.tt-detail-page .main-header,
    html[data-layout="horizontal"] body.tt-detail-page .tt-launcher-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent {
        margin-top: 0 !important;
        padding-top: var(--tt-landscape-header-height) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar {
        top: var(--tt-landscape-header-height) !important;
    }
}

/* Large-monitor presentation inspired by major retail sites: cap the useful
   content width and centre it instead of stretching cards across the screen.
   Tablets and smaller desktop windows continue to use the full viewport. */
@media (min-width: 1367px) and (orientation: landscape) {
    :root {
        --tt-retail-canvas: 1366px;
        --tt-retail-side-space: max(0px, calc((100vw - var(--tt-retail-canvas)) / 2));
    }

    html[data-layout="horizontal"] .main-header .container,
    html[data-layout="horizontal"] .main-header .container.tt-launcher-header-inner {
        width: var(--tt-retail-canvas) !important;
        min-width: 0 !important;
        max-width: var(--tt-retail-canvas) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4 {
        inset: 0 auto 0 50% !important;
        width: var(--tt-retail-canvas) !important;
        min-width: 0 !important;
        max-width: var(--tt-retail-canvas) !important;
        transform: translateX(-50%) !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        width: var(--tt-retail-canvas) !important;
        min-width: 0 !important;
        max-width: var(--tt-retail-canvas) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-left {
        left: calc(var(--tt-retail-side-space) + var(--tt-landscape-gap)) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        right: calc(var(--tt-retail-side-space) + var(--tt-landscape-gap)) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        width: var(--tt-retail-canvas) !important;
        max-width: var(--tt-retail-canvas) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    html[data-layout="horizontal"] .main-header .container,
    html[data-layout="horizontal"] .main-header .container.tt-launcher-header-inner {
        grid-template-columns: 130px 300px 140px minmax(420px, 1fr) !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks > a > span {
        display: none !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks > a {
        justify-content: center !important;
        padding-inline: 2px !important;
    }

    html[data-layout="horizontal"] .tt-launcher-context-nav a > span,
    html[data-layout="horizontal"] .tt-launcher-context-nav button span,
    html[data-layout="horizontal"] .tt-launcher-context-nav .tt-current-section-label,
    html[data-layout="horizontal"] .tt-launcher-context-nav .tt-current-price-label {
        font-size: clamp(7px, .68vw, 9px) !important;
    }
}

/* Product detail must use the same full-width three-column landscape canvas as
   the home page. Older detail rules pin the page to 1280/1366px, leaving a
   large empty strip on wide monitors. Keep both sidebars visible and let only
   the centre column consume the remaining viewport width. */
@media (min-width: 1367px) and (orientation: landscape) {
    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body.tt-detail-page,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: var(--tt-landscape-gap) var(--tt-landscape-gap) 24px !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        display: grid !important;
        grid-template-columns: var(--tt-landscape-left-width) minmax(0, 1fr) var(--tt-landscape-right-width) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: var(--tt-landscape-gap) !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-main,
    html[data-layout="horizontal"] #ttSpaContent .tt-launcher-sidebar-left,
    html[data-layout="horizontal"] #ttSpaContent .tt-launcher-sidebar-right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-landscape-product-top {
        grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: var(--tt-landscape-gap) !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-landscape-product-top > *,
    html[data-layout="horizontal"] #ttSpaContent .tt-detail-info-card,
    html[data-layout="horizontal"] #ttSpaContent .tt-landscape-media-column {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: calc(var(--tt-landscape-right-width) + (2 * var(--tt-landscape-gap))) !important;
        padding-left: calc(var(--tt-landscape-left-width) + (2 * var(--tt-landscape-gap))) !important;
        box-sizing: border-box !important;
    }
}

/* Final detail workspace alignment: identical header boundary and sidebar
   behaviour to the home launcher. The product document scrolls inside the
   viewport while both sidebars stay pinned and retain their own scroll. */
@media (min-width: 769px) and (orientation: landscape) {
    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body.tt-detail-page {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent {
        position: fixed !important;
        inset: var(--tt-landscape-header-height) 0 0 0 !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        grid-template-columns: var(--tt-landscape-left-width) minmax(0, 1fr) var(--tt-landscape-right-width) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 var(--tt-landscape-gap) !important;
        gap: var(--tt-landscape-gap) !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .tt-detail-landscape-sidebar {
        position: fixed !important;
        top: var(--tt-landscape-header-height) !important;
        bottom: 0 !important;
        align-self: start !important;
        width: var(--tt-landscape-left-width) !important;
        height: calc(100vh - var(--tt-landscape-header-height)) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: calc(100vh - var(--tt-landscape-header-height)) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        z-index: 20 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-left {
        left: var(--tt-landscape-gap) !important;
        right: auto !important;
        width: var(--tt-landscape-left-width) !important;
        min-width: var(--tt-landscape-left-width) !important;
        max-width: var(--tt-landscape-left-width) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        right: var(--tt-landscape-gap) !important;
        left: auto !important;
        width: var(--tt-landscape-right-width) !important;
        min-width: var(--tt-landscape-right-width) !important;
        max-width: var(--tt-landscape-right-width) !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-main {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: var(--tt-landscape-gap) !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        margin-top: var(--tt-landscape-gap) !important;
    }

    /* Footer is a sibling of the fixed detail workspace. Leaving it in normal
       flow makes it appear directly below the header and cover the product. */
    html[data-layout="horizontal"] body.tt-detail-page > .tt-main-footer,
    html[data-layout="horizontal"] body.tt-detail-page > .site-footer,
    html[data-layout="horizontal"] body.tt-detail-page > footer {
        display: none !important;
    }
}

/* Keep the retail-width cap last so the detail workspace rules above cannot
   expand the product page back to the full ultrawide viewport. */
@media (min-width: 1367px) and (orientation: landscape) {
    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        position: relative !important;
        left: 50vw !important;
        width: var(--tt-retail-canvas) !important;
        max-width: var(--tt-retail-canvas) !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-left {
        left: calc(var(--tt-retail-side-space) + var(--tt-landscape-gap)) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        right: calc(var(--tt-retail-side-space) + var(--tt-landscape-gap)) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        position: relative !important;
        left: 50vw !important;
        width: var(--tt-retail-canvas) !important;
        max-width: var(--tt-retail-canvas) !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
    }
}

/* FINAL OVERRIDE — approved centred desktop dimensions. */
@media (min-width: 769px) and (orientation: landscape) {
    :root {
        --tt-desktop-container-width: min(1440px, calc(100vw - 32px));
        --tt-desktop-container-edge: calc((100vw - var(--tt-desktop-container-width)) / 2);
        --tt-desktop-left: 205px;
        --tt-desktop-right: 217px;
        --tt-desktop-gap: 12px;
    }

    html[data-layout="horizontal"],
    html[data-layout="horizontal"] body,
    html[data-layout="horizontal"] #ttSpaContent,
    html[data-layout="horizontal"] .main-header,
    html[data-layout="horizontal"] .tt-launcher-header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body .main-header .container,
    html[data-layout="horizontal"] body .main-header .container.tt-launcher-header-inner {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) header.main-header,
    html[data-layout="horizontal"] body:not(.tt-detail-page) header.tt-launcher-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 9999 !important;
        overflow: visible !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) header.main-header .tt-launcher-header-inner,
    html[data-layout="horizontal"] body:not(.tt-detail-page) header.main-header .tt-launcher-context-nav {
        overflow: visible !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) header.main-header .tt-launcher-context-nav {
        position: relative !important;
        z-index: 10001 !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) header.main-header #ttFloatFilter,
    html[data-layout="horizontal"] body:not(.tt-detail-page) header.main-header #ttFloatFilterPanel {
        overflow: visible !important;
        z-index: 10002 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .container,
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .container.tt-launcher-header-inner {
        left: calc((100vw - 100%) / 2) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header,
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.tt-launcher-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 9999 !important;
        overflow: visible !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-header-inner,
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav {
        overflow: visible !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header .tt-launcher-context-nav {
        position: relative !important;
        z-index: 10001 !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header #ttFloatFilter,
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header #ttFloatFilterPanel {
        overflow: visible !important;
        z-index: 10002 !important;
    }

    /* Product header: replace search with the existing SPA back action. */
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header form.tt-detail-landscape-search,
    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header #ttSearchForm.tt-detail-landscape-search {
        display: none !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page header.main-header a.tt-spa-desktop-back {
        display: inline-flex !important;
        position: static !important;
        inset: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: start !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        min-height: 38px !important;
        margin: 0 !important;
        gap: 7px !important;
        white-space: nowrap !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page #ttSpaContent > .detail-container.container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4 {
        inset: 0 !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        column-gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left {
        width: var(--tt-desktop-left) !important;
        min-width: var(--tt-desktop-left) !important;
        max-width: var(--tt-desktop-left) !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        width: var(--tt-desktop-right) !important;
        min-width: var(--tt-desktop-right) !important;
        max-width: var(--tt-desktop-right) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page.tt-detail-page #ttSpaContent > .detail-container .tt-detail-landscape-shell {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
        width: var(--tt-desktop-container-width) !important;
        min-width: 0 !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        gap: var(--tt-desktop-gap) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-main {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-left {
        left: var(--tt-desktop-container-edge) !important;
        width: var(--tt-desktop-left) !important;
        min-width: var(--tt-desktop-left) !important;
        max-width: var(--tt-desktop-left) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        right: var(--tt-desktop-container-edge) !important;
        width: var(--tt-desktop-right) !important;
        min-width: var(--tt-desktop-right) !important;
        max-width: var(--tt-desktop-right) !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page .detail-related-container {
        position: relative !important;
        left: calc((100vw - 100%) / 2) !important;
        width: var(--tt-desktop-container-width) !important;
        max-width: 1440px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: calc(var(--tt-desktop-right) + var(--tt-desktop-gap)) !important;
        padding-left: calc(var(--tt-desktop-left) + var(--tt-desktop-gap)) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] img,
    html[data-layout="horizontal"] video,
    html[data-layout="horizontal"] iframe {
        max-width: 100% !important;
        height: auto;
    }
}

@media (min-width: 1280px) and (max-width: 1499px) and (orientation: landscape) {
    :root {
        --tt-desktop-container-width: calc(100vw - 20px);
        --tt-desktop-left: 195px;
        --tt-desktop-right: 205px;
        --tt-desktop-gap: 10px;
    }
}

@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    :root {
        --tt-desktop-container-width: calc(100vw - 20px);
        --tt-desktop-left: clamp(168px, 18vw, 190px);
        --tt-desktop-right: clamp(172px, 19vw, 200px);
        --tt-desktop-gap: 8px;
    }

    html[data-layout="horizontal"] body .main-header .container,
    html[data-layout="horizontal"] body .main-header .container.tt-launcher-header-inner {
        grid-template-columns: 130px minmax(180px, 240px) 140px minmax(0, 1fr) !important;
        column-gap: 6px !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 240px !important;
    }

    html[data-layout="horizontal"] .search-bar-unified.tt-search-after-stats .btn-search-unified {
        flex-basis: 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
    }

    html[data-layout="horizontal"] .tt-launcher-header-quicklinks > a > span {
        display: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4,
    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-shell {
        grid-template-columns: var(--tt-desktop-left) minmax(0, 1fr) var(--tt-desktop-right) !important;
    }

    /* Older detail rules keep an 840px two-column product card. On an iPad
       that fixed width overflows the centre track, pushing the media and the
       information card underneath the right sidebar. */
    html[data-layout="horizontal"] #ttSpaContent .tt-detail-landscape-main,
    html[data-layout="horizontal"] #ttSpaContent .tt-landscape-product-top {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-landscape-product-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(250px, .9fr) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-landscape-media-column {
        display: block !important;
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-info-card {
        display: block !important;
        grid-column: 2 !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    html[data-layout="horizontal"] #ttSpaContent .tt-detail-gallery-section,
    html[data-layout="horizontal"] #ttSpaContent .tt-vertical-gallery {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right,
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent .tt-launcher-sidebar-right {
        display: block !important;
        width: var(--tt-desktop-right) !important;
        min-width: var(--tt-desktop-right) !important;
        max-width: var(--tt-desktop-right) !important;
    }

    /* The detail shell is the only child of a three-column compatibility
       grid. Make it span that grid; otherwise its centring calculation uses
       the 190px left column and shifts the whole product view to the right. */
    html[data-layout="horizontal"] body.tt-detail-page #ttSpaContent > .detail-container > .tt-detail-landscape-shell {
        grid-column: 1 / -1 !important;
    }

    /* Detail header has no search field. Reclaim that column for the back
       button and constrain the remaining groups so their combined intrinsic
       widths cannot exceed the centred header container after an SPA open. */
    html[data-layout="horizontal"] body.tt-detail-page header.main-header .container.tt-launcher-header-inner {
        grid-template-columns: 205px 160px 300px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    html[data-layout="horizontal"] body.tt-detail-page header.main-header .tt-launcher-header-quicklinks,
    html[data-layout="horizontal"] body.tt-detail-page header.main-header .tt-launcher-context-nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1280px) and (max-width: 1499px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page header.main-header .container.tt-launcher-header-inner {
        grid-template-columns: 195px 155px 220px minmax(0, 1fr) !important;
        column-gap: 7px !important;
    }
}

@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    html[data-layout="horizontal"] body.tt-detail-page header.main-header .container.tt-launcher-header-inner {
        grid-template-columns: 130px 150px 140px minmax(0, 1fr) !important;
        column-gap: 6px !important;
    }
}

/* Final iPad-home reflow. Kept last so legacy fixed-canvas rules cannot
   restore sidebar tracks or Bootstrap column widths after this point. */
@media (min-width: 769px) and (max-width: 1279px) and (orientation: landscape) {
    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #ttSpaContent > .tt-launcher-shell-phase1.container.py-4 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        margin-inline: auto !important;
        padding-inline: clamp(8px, 1.25vw, 16px) !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-left,
    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-shell-phase1 > .tt-launcher-sidebar-right {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-main {
        display: block !important;
        grid-column: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(8px, 1vw, 16px) !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid > .feed-item-scroll,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-card {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-card {
        overflow: hidden !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-card *,
    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-thumb-box {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-thumb-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) #productGrid .product-thumb {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-top-grid .tt-top-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html[data-layout="horizontal"] body:not(.tt-detail-page) .tt-launcher-top-grid .tt-top-img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}

/* Keep guide articles out of the product three-column desktop grid. */
html[data-layout="horizontal"] #ttSpaContent > .container.py-4:has(> .tt-article-detail) {
    display: block !important;
    width: min(860px, calc(100% - 32px)) !important;
    min-width: 0 !important;
    max-width: 860px !important;
    margin: 32px auto !important;
    padding: 0 !important;
}