/* =============================================================
   cjs-mobile.css — MOBILE-ONLY layout (2026-09-19)

   Every layout rule below is wrapped in a max-width media query, so
   nothing in this file can restyle desktop. The only un-wrapped rules are
   the two display:none defaults for elements that cjsMobile.js creates
   (.cjs-m-buybar, .cjs-m-trust), so they stay hidden if a phone-width
   window is later widened. Companion script: /javascript/cjsMobile.js

   1. Compact header  — one dark 52px bar (logo + cart + menu) and a slim
                        search row, replacing the ~250px strip/logo/search stack.
   2. Product page    — 1-line breadcrumb, title above the image, image beside
                        price + stock, full-width Add To Cart.
   3. Sticky buy bar  — appears once the main Add To Cart has scrolled away.

   Rollback: remove the <link>/<script> pair from HTMLHead.html (originals in
   templates/Infinity/Backup/2026-09-19_pre-mobile-redesign/).
   ============================================================= */

/* ---------- 1. Compact header (all pages) ---------- */
@media (max-width: 768px) {
    .top-strip {
        background: #0c0d10;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 0;
        transition: transform 0.22s ease;
    }
    /* The drawer is in-flow and taller than the screen, so the strip must
       scroll normally while it is open (cjsMobile.js jumps to top first). */
    .top-strip.is-open {
        position: static;
        transform: none !important;
    }
    .top-strip.cjs-m-tucked {
        transform: translateY(-100%);
    }

    .top-strip__mobile-bar {
        height: 52px;
        padding: 0 8px 0 12px;
        gap: 4px;
    }
    .top-strip__logo-mobile {
        display: flex;
        align-items: center;
        height: 52px;
        margin-right: auto;
        min-width: 0;
    }
    .top-strip__logo-mobile img {
        display: block;
        width: 210px;
        max-width: 54vw;
        height: auto;
    }

    .top-strip__cart-mobile,
    .top-strip__cart-mobile:link,
    .top-strip__cart-mobile:visited {
        color: #ffffff;
        padding: 10px 8px;
    }
    .top-strip__cart-mobile:hover,
    .top-strip__cart-mobile:focus {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.10);
    }
    .top-strip__toggle {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.28);
        padding: 9px 11px;
    }
    .top-strip__toggle:hover,
    .top-strip__toggle:focus,
    .top-strip.is-open .top-strip__toggle {
        background: rgba(255, 255, 255, 0.10);
        border-color: #ffffff;
        color: #ffffff;
    }

    /* Logo now lives in the bar; the block below it is just the search row. */
    header .logo-wrap {
        padding: 0 12px 8px;
        background: #0c0d10;
        text-align: left;
    }
    header .logo-wrap .cjs-logo {
        display: none;
    }
    header .logo-wrap .search-area {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
    }
    header .logo-wrap #SearchForm {
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
    }
    header .logo-wrap #SearchForm form {
        display: flex;
        align-items: center;
        height: 38px;
        margin: 0;
        padding: 0 6px 0 14px;
        background: #ffffff;
        border-radius: 19px;
        overflow: hidden;
    }
    header .logo-wrap #SearchForm input.Textbox {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 38px;
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        box-shadow: none;
        background: transparent;
        font-size: 16px; /* 16px stops iOS zooming the page on focus */
        float: none;
    }
    header .logo-wrap #SearchForm input.Button {
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        margin: 0;
        padding: 0;
        float: none;
        position: static;
    }
}

/* Narrow phones: icon-only menu button so the logo keeps its width. */
@media (max-width: 480px) {
    .top-strip__toggle-label {
        display: none;
    }
    .top-strip__toggle {
        padding: 12px 11px;
    }
}

/* ---------- 2. Product page ---------- */
@media (max-width: 767px) {
    /* Breadcrumb: parent category only, one line. The full title is the
       very next thing on the page, so repeating it here cost three lines. */
    .product-detail-page .breadcumb_wrap {
        margin: 0;
        padding: 0;
    }
    .product-detail-page .breadcumb_wrap ~ .breadcumb_wrap {
        display: none;
    }
    .product-detail-page .breadcumb_wrap .breadcrumb {
        margin: 0;
        padding: 7px 14px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #eef0f3;
        border-radius: 0;
        box-shadow: none;
        font-size: 13px;
        line-height: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-detail-page .breadcumb_wrap .breadcrumb > li {
        display: none;
    }
    .product-detail-page .breadcumb_wrap .breadcrumb > li:nth-last-child(2) {
        display: inline;
    }
    .product-detail-page .breadcumb_wrap .breadcrumb > li:nth-last-child(2):before {
        content: "\2039";
        padding: 0 5px 0 0;
        color: #1f6fb5;
        font-size: 15px;
    }
    .product-detail-page .breadcumb_wrap .breadcrumb > li:only-child {
        display: inline;
    }

    .product-detail-page .prd_out {
        padding-left: 0;
        padding-right: 0;
    }

    /* Hero grid. The two Bootstrap columns (and the wrappers inside the
       right-hand one) are flattened with display:contents so the title,
       image, price and stock card can be re-ordered without touching the
       desktop DOM order. */
    .product_image_detail_wrap {
        display: grid;
        grid-template-columns: 40% minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: 0 14px;
    }
    .product_image_detail_wrap:before,
    .product_image_detail_wrap:after {
        display: none;
    }
    .product_image_detail_wrap > .col-sm-8,
    .product_image_detail_wrap .p_fd_col,
    .product_image_detail_wrap .cjs-pd-rest {
        display: contents;
    }
    /* Everything is full-width unless placed in the hero row below. */
    .product_image_detail_wrap > *,
    .product_image_detail_wrap .p_fd_col > *,
    .product_image_detail_wrap .cjs-pd-rest > * {
        grid-column: 1 / -1;
        order: 10;
        min-width: 0;
        float: none;
    }
    .product_image_detail_wrap > .ErrorMessage {
        order: 0;
    }
    .product_image_detail_wrap .pdt_dis {
        order: 1;
        margin: 10px 0 8px;
        padding: 0;
        font-size: 17px;
        line-height: 1.3;
        font-weight: 700;
    }
    /* Star row: hidden unless the product really has reviews
       (cjsMobile.js adds .cjs-m-hasrating). */
    .product_image_detail_wrap .p_fd_col > .rating {
        display: none;
        order: 2;
        margin: -2px 0 8px;
    }
    .product_image_detail_wrap.cjs-m-hasrating .p_fd_col > .rating {
        display: block;
    }

    /* Hero modes (class set by cjsMobile.js once the artwork has loaded):
         default       square-ish art: image beside the price, stock card
                       full-width beneath (no dead space under a short image)
         .cjs-m-tall   portrait box art: image spans price + stock card
         .cjs-m-wide   Steam-style header: image on its own full-width row */
    .product_image_detail_wrap > .col-sm-4 {
        order: 3;
        grid-column: 1;
        width: auto;
        padding: 0;
        text-align: center;
    }
    .product_image_detail_wrap > .col-sm-4 img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }
    /* The image itself is the tap target for the lightbox. */
    .product_image_detail_wrap > .col-sm-4 > p {
        display: none !important;
    }

    .product_image_detail_wrap .pdt_price {
        position: relative;
        order: 4;
        grid-column: 2;
        margin: 0 0 8px;
        padding: 0;
        border: 0;
    }
    .product_image_detail_wrap .pdt_price > .pd_col-l {
        display: none;
    }
    .product_image_detail_wrap .pdt_price > .pd_col-r {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
    }
    .product_image_detail_wrap .pdt_price .ProductPrice {
        display: block;
        font-size: 28px;
        line-height: 1.1;
        font-weight: 800;
        font-style: normal;
    }
    .product_image_detail_wrap .pdt_price .ProductPrice strike,
    .product_image_detail_wrap .pdt_price .ProductPrice s,
    .product_image_detail_wrap .pdt_price .ProductPrice del {
        display: block;
        font-size: 13px;
        font-weight: 400;
        color: #6b7280;
        margin-bottom: 2px;
    }
    .product_image_detail_wrap .pdt_price .you-save {
        font-size: 13px;
        margin-top: 3px;
    }
    /* Key-type icon: pinned top-right of the price block. Its desktop
       margin-right:-20px pushed the page 5px wider than the screen. */
    .product_image_detail_wrap .pdt_price > div[style*="float"] {
        position: absolute;
        top: 0;
        right: 0;
        float: none !important;
        margin: 0 !important;
    }
    /* "NO Hidden Fees!" / "Paypal Accepted!" become a one-line strip under
       the button (added by cjsMobile.js). */
    .product_image_detail_wrap .pdt_price > .pd_col-r > p {
        display: none;
    }

    .product_image_detail_wrap .cjs-pd-stock {
        order: 5;
        grid-column: 1 / -1;
        margin: 10px 0 0;
        padding: 0;
        border: 0;
    }
    .product_image_detail_wrap .cjs-pd-stock > .pd_col-l {
        display: none;
    }
    .product_image_detail_wrap .cjs-pd-stock > .pd_col-r {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        font-size: 12.5px;
    }
    .product_image_detail_wrap.cjs-m-tall > .col-sm-4 {
        grid-row: span 2;
    }
    .product_image_detail_wrap.cjs-m-tall .cjs-pd-stock {
        grid-column: 2;
        margin-top: 0;
    }
    .product_image_detail_wrap .cjs-pd-stock .cjs-stock-widget {
        max-width: none;
    }
    .product_image_detail_wrap .cjs-pd-stock .cjs-stock-card {
        padding: 8px 10px;
        gap: 6px;
    }
    .product_image_detail_wrap .cjs-pd-stock .cjs-stock-row,
    .product_image_detail_wrap .cjs-pd-stock .cjs-stock-row-status {
        font-size: 12.5px;
    }

    /* Wide artwork (Steam-style headers): full-width image, then price and
       stock full-width beneath it. Class set by cjsMobile.js. */
    .product_image_detail_wrap.cjs-m-wide > .col-sm-4,
    .product_image_detail_wrap.cjs-m-wide .pdt_price,
    .product_image_detail_wrap.cjs-m-wide .cjs-pd-stock {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .product_image_detail_wrap.cjs-m-wide > .col-sm-4 {
        margin-bottom: 10px;
    }
    .product_image_detail_wrap.cjs-m-wide > .col-sm-4 img {
        max-height: 190px;
        width: auto;
        margin: 0 auto;
    }
    .product_image_detail_wrap.cjs-m-wide .cjs-pd-stock {
        margin-top: 2px;
    }

    /* Add-to-cart block comes straight after the hero row; SKU / platform /
       gift-wrap rows drop beneath it. */
    .product_image_detail_wrap .cjs-pd-rest > .cjs-pd-atc {
        order: 6;
        margin-top: 14px;
    }
    .product_image_detail_wrap .cjs-pd-rest > .sku_box:not(.cjs-pd-stock):not(.cjs-pd-atc) {
        order: 8;
    }
    .product_image_detail_wrap .p_fd_col > .sku_box {
        order: 8;
    }

    /* SKU / platform / gift-wrap: small inline meta lines. Rows whose
       contents are hidden inline collapse to nothing. */
    .product_image_detail_wrap .p_fd_col > .sku_box,
    .product_image_detail_wrap .cjs-pd-rest > .sku_box:not(.cjs-pd-stock):not(.cjs-pd-atc) {
        margin: 0;
        padding: 0;
        min-height: 0;
        border: 0;
        font-size: 12px;
        line-height: 1.6;
        color: #6b7280;
    }
    /* The raw SKU string means nothing to a shopper and wrapped over two
       lines; hidden on phones only. It stays in the DOM, so schema.org
       itemprop="sku" and the variation SKU swap are unaffected. */
    .product_image_detail_wrap .p_fd_col > .cjs-pd-sku {
        display: none;
    }
    .product_image_detail_wrap .p_fd_col > .cjs-pd-brand {
        margin-top: 12px;
    }
    .product_image_detail_wrap .p_fd_col > .sku_box > .pd_col-l,
    .product_image_detail_wrap .cjs-pd-rest > .sku_box:not(.cjs-pd-stock):not(.cjs-pd-atc) > .pd_col-l {
        display: inline;
        float: none;
        width: auto;
        margin: 0 4px 0 0;
        padding: 0;
        font-size: inherit;
        font-weight: 600;
        color: #4b5563;
    }
    .product_image_detail_wrap .p_fd_col > .sku_box > .pd_col-r,
    .product_image_detail_wrap .cjs-pd-rest > .sku_box:not(.cjs-pd-stock):not(.cjs-pd-atc) > .pd_col-r {
        display: inline;
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        font-size: inherit;
        word-break: break-all;
    }

    /* Region / edition picker: no nested scroll-box on a phone. Slim rows,
       first four shown, the rest behind "Show all" (cjsMobile.js adds the
       button + .cjs-m-collapsed). Selected, recommended and cheapest rows
       always stay visible. Browsers without :has() simply show every row. */
    .product_image_detail_wrap .ProductAddToCart > dt {
        margin: 0 0 6px;
        font-size: 13px;
    }
    .product_image_detail_wrap .cjs-variation-scroll {
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .product_image_detail_wrap .cjs-variation-scroll-hint {
        display: none;
    }
    .product_image_detail_wrap .cjs-variation-list {
        margin-bottom: 10px;
    }
    .product_image_detail_wrap .cjs-variation-item {
        margin-bottom: 6px;
    }
    .product_image_detail_wrap .cjs-variation-card {
        min-height: 42px;
        padding: 7px 10px;
        gap: 8px;
        border-radius: 8px;
    }
    .product_image_detail_wrap .cjs-variation-card:has(input:checked) {
        padding: 6px 9px;
    }
    /* The rows sit inside ul > div.cjs-variation-scroll, each preceded by a
       <script>, hence li:nth-of-type at any depth rather than > li:nth-child. */
    .product_image_detail_wrap .cjs-variation-list.cjs-m-collapsed li.cjs-variation-item:nth-of-type(n+5):not(:has(input:checked)):not(:has(.cjs-region-badge)):not(:has(.cjs-cheapest-badge)) {
        display: none;
    }
    .cjs-m-more {
        display: block;
        width: 100%;
        margin: -2px 0 10px;
        padding: 9px 10px;
        border: 1px dashed #cbd0d8;
        border-radius: 8px;
        background: #fafafa;
        color: #1f6fb5;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    /* Pro tip inside a region row: one compact line instead of a tall box. */
    .product_image_detail_wrap .cjs-variation-card .cjs-tip {
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 6px;
        margin-top: 0;
        padding: 6px 9px;
        font-size: 12px;
        line-height: 1.35;
    }
    .product_image_detail_wrap .cjs-variation-card .cjs-tip .cjs-tip-badge {
        display: none;
    }
    .product_image_detail_wrap .cjs-variation-card .cjs-tip .cjs-tip-ico {
        font-size: 13px;
    }
    .product_image_detail_wrap .cjs-variation-card .cjs-tip .cjs-tip-text {
        flex: 1 1 0;
        min-width: 0;
        font-size: 12px;
    }
    .product_image_detail_wrap .cjs-variation-card .cjs-tip .cjs-tip-sep {
        display: inline;
    }
    .product_image_detail_wrap .cjs-variation-card .cjs-tip .cjs-tip-link {
        display: inline;
        font-size: 12px;
    }

    .ProductAddToCart > .pd_col-l {
        display: none !important; /* "Quantity:" label */
    }
    .ProductAddToCart > .pd_col-r {
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #cjsAddToCartForm table,
    #cjsAddToCartForm tbody {
        display: block;
        width: 100%;
    }
    #cjsAddToCartForm tr {
        display: block;
    }
    #cjsAddToCartForm tr > td {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    #cjsAddToCartForm tr:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }
    #cjsAddToCartForm tr:first-child > td:first-child {
        flex: 0 0 66px;
    }
    #cjsAddToCartForm tr:first-child > td:first-child:empty {
        display: none;
    }
    #cjsAddToCartForm tr:first-child > td:nth-child(2) {
        flex: 1 1 0;
        min-width: 0;
    }
    #cjsAddToCartForm tr:first-child > td:nth-child(3) {
        flex: 1 0 100%;
        order: 5;
    }
    #cjsAddToCartForm tr:first-child > td:nth-child(3):empty {
        display: none;
    }
    #cjsAddToCartForm tr:first-child select.form-control {
        width: 100%;
        height: 50px;
        font-size: 16px;
    }
    #cjsAddToCartForm .cjs-cart-row {
        display: flex;
        align-items: stretch;
        gap: 8px;
        margin: 0;
    }
    #cjsAddToCartForm .cjs-cart-row > button[type="submit"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 50px;
        margin: 0;
        padding: 0 46px 0 12px;
        background-position: right 16px center;
        font-size: 17px;
        font-weight: 700;
    }
    #cjsAddToCartForm .cjs-cart-row > .cjs-wishlist-heart {
        flex: 0 0 auto;
        height: 50px;
        margin: 0;
    }

    #cjsAddToCartForm tr:first-child > td.cjs-m-trust {
        display: flex;
        flex: 1 0 100%;
        order: 4;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 14px;
        margin: -2px 0 2px;
        font-size: 12px;
        line-height: 1.3;
        color: #4b5563;
    }
    .cjs-m-trust span:before {
        content: "\2713\00a0";
        color: #16a34a;
        font-weight: 700;
    }
}

/* ---------- 3. Sticky buy bar ---------- */
.cjs-m-buybar,
.cjs-m-trust,
.cjs-m-more {
    display: none;
}
@media (max-width: 767px) {
    .cjs-m-buybar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        box-sizing: border-box;
        min-height: 58px;
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid #dde0e5;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }
    .cjs-m-buybar.is-on {
        transform: none;
        visibility: visible;
        transition: transform 0.22s ease, visibility 0s;
    }
    .cjs-m-buybar__img {
        flex: 0 0 auto;
        width: auto;
        max-width: 56px;
        height: 40px;
        border-radius: 3px;
        object-fit: cover;
    }
    .cjs-m-buybar__info {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.15;
    }
    .cjs-m-buybar__price {
        display: block;
        font-size: 18px;
        font-weight: 800;
        color: #008000;
    }
    .cjs-m-buybar__name {
        display: block;
        font-size: 11px;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cjs-m-buybar__btn {
        flex: 0 0 auto;
        height: 42px;
        padding: 0 18px;
        border: 0;
        border-radius: 4px;
        background: #f25b19;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }
    .cjs-m-buybar__btn:active {
        background: #d94c10;
    }

    /* Keep the floating currency button clear of the bar. */
    #mobile-currency-toggle {
        transition: bottom 0.22s ease;
    }
    body.cjs-m-buybar-on #mobile-currency-toggle {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Brief highlight when the bar sends the customer back up to pick
       a region / edition. */
    .cjs-m-flash {
        animation: cjsMFlash 1.2s ease 1;
    }
    @keyframes cjsMFlash {
        0%, 100% { box-shadow: 0 0 0 0 rgba(242, 91, 25, 0); }
        30%      { box-shadow: 0 0 0 4px rgba(242, 91, 25, 0.45); }
    }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .top-strip,
    .cjs-m-buybar,
    #mobile-currency-toggle {
        transition: none;
    }
    .cjs-m-flash {
        animation: none;
    }
}

/* ---------- 4. Description content never widens the page ---------- */
/* Descriptions are pasted HTML (TinyMCE tables with fixed widths, big images,
   embeds, long unbroken strings). On a phone anything wider than the screen
   made the WHOLE page scroll sideways. Tables shrink if their content allows
   and otherwise scroll inside their own box; the container is the safety net
   for everything else. */
@media (max-width: 767px) {
    .ProductDescriptionContainer,
    .product_dtail_box {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .ProductDescriptionContainer table {
        display: block;
        width: auto !important;
        max-width: 100%;
        height: auto !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ProductDescriptionContainer td,
    .ProductDescriptionContainer th {
        width: auto !important;
        min-width: 0;
        word-break: break-word;
    }
    .ProductDescriptionContainer img,
    .ProductDescriptionContainer video,
    .ProductDescriptionContainer iframe,
    .ProductDescriptionContainer embed,
    .ProductDescriptionContainer object {
        max-width: 100% !important;
    }
    .ProductDescriptionContainer img,
    .ProductDescriptionContainer video {
        height: auto !important;
    }
    .ProductDescriptionContainer pre {
        white-space: pre-wrap;
    }
}