@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-family: "poppins", serif;
}

body{
    background-color: rgb(36, 39, 39);
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem auto;
    max-width: 1200px;
    padding: 0 20px;
    position: relative;
    z-index: 3000; /* stay above content so header dropdowns are visible */
    overflow: visible; /* allow children dropdowns to overflow */
    }
    
    .login-btn{
        background-color: #ffffff;
        color: #000000;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
    }

    .login-btn:hover{
        opacity: 0.75;
    }
    
        .services-btn{
        background-color: #FF8C00;
        color: #ffffff;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: small;
        cursor: pointer;
    }

    .services-btn:hover{
        opacity: 0.75;
    }
    
.logo {
    height: 40px;
    width: auto;
}    

.navigation ul{
    display: flex;
    list-style-type: none;
    gap: 0.3rem; /* reduced gap so Services and profile are closer */
    align-items: center;
}

.navigation a {
            text-decoration: none;
            color: chocolate;
}

/* Ensure the Services control (anchor or button) keeps the same button appearance */
.navigation .services-btn{
    color: #ffffff;
    background-color: #FF8C00;
    border: none;
    padding: 0 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: small;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    height: 40px;
    line-height: 1;
}

.navigation a.login-btn{
        background-color: #ffffff;
        color: #000000;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: small;
    text-decoration: none;
    display: inline-block;
    height:40px;
    display:flex;
    align-items:center;
}

/* Login link visible by default so it behaves like Services button */
.navigation .login-btn{ visibility: visible; }

/* Show placeholder profile immediately when early JS detected a logged-in user */
.vm-js-logged .navigation .login-btn{ display: none !important; }
.vm-js-logged #vm-profile-placeholder{ display: flex !important; align-items:center; }
#vm-profile-placeholder{ display: none; }

/* Ensure the user icon (inserted by auth.js) aligns with the Services button */
.navigation li { display:flex; align-items:center; position:relative; }
.navigation img { display:block; }

/* Top menu bar */
.menu-bar{
    width: 100%;
    background: rgb(36, 39, 39); /* match site background */
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    position: relative;
    z-index: 2500; /* above main content but below header (header is 3000) */
    overflow: visible;
}
.menu-inner{ max-width: 1200px; margin: 0 auto; padding: 0 20px; display:flex; justify-content:center; align-items:center; overflow-x: visible; }

/* ensure the menu-inner doesn't clip absolutely positioned dropdowns */
.menu-inner{ overflow: visible !important; }
.menu-list{ display:flex; gap:28px; list-style:none; align-items:center; height:56px; white-space:nowrap; }
.menu-item{ position:relative; }
.menu-item > a{ color:#fff; text-decoration:none; padding:10px 6px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-weight:600; }

/* caret symbol after each main menu link (stays inline) */
.menu-item > a::after{
    /* use arrow icon instead of text caret */
    content: "";
    display:inline-block;
    width:12px;
    height:12px;
    margin-left:6px;
    vertical-align:middle;
    opacity:0.9;
    background-image: url('assets/svg/arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Dropdown panel */
.dropdown-menu{
    /* position relative to the menu-item so newly rendered menus align correctly */
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    background:#fff;
    box-shadow:0 16px 36px rgba(0,0,0,0.12);
    border-radius:10px;
    min-width:360px;
    display:none;
    z-index:4000; /* ensure it floats above cards and other content */
    overflow:hidden;
    max-width: min(1200px, calc(100vw - 40px));
}
.menu-item:hover .dropdown-menu{ display:block; }
/* keep the dropdown visible when hovering it so it doesn't disappear
    while moving the mouse from the trigger into the panel */
.menu-item .dropdown-menu:hover{ display:block; }
.dropdown-header{ padding:12px 16px; font-weight:800; font-size:15px; border-bottom:1px solid #eee; color:#111 !important; }
.dropdown-body{ padding:12px 16px; display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 20px; }
.dropdown-link{ display:flex; align-items:center; gap:10px; padding:8px; color:#222; text-decoration:none; border-radius:6px; }
.dropdown-link:hover{ background:#fbfdfc; }

/* platform icons before each dropdown link */
.dropdown-link{ position:relative; padding-left:40px; }
.dropdown-link::before{
    content: '';
    position: absolute;
    left: 10px;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
}
.menu-item.twitter .dropdown-link::before{ background-image: url('assets/svg/twitter.png'); }
.menu-item.instagram .dropdown-link::before{ background-image: url('assets/svg/Instagram.png'); }
.menu-item.tiktok .dropdown-link::before{ background-image: url('assets/svg/tiktok.png'); }
.menu-item.youtube .dropdown-link::before{ background-image: url('assets/svg/youtube.png'); }
.menu-item.facebook .dropdown-link::before{ background-image: url('assets/svg/Facebook.png'); }
.menu-item.telegram .dropdown-link::before{ background-image: url('assets/svg/Telegram.png'); }
.menu-item.twitch .dropdown-link::before{ background-image: url('assets/svg/twitch.png'); }
.menu-item.kick .dropdown-link::before{ background-image: url('assets/svg/kick.webp'); opacity:0.9 }

/* Keep dropdown within viewport and allow scroll */
.dropdown-menu{ max-height: calc(100vh - 140px); overflow-y:auto; }

/* Account dropdown injected by `auth.js` — pin to viewport so it's never clipped
   and align to page right edge instead of being confined to the header container. */
#vm-user-drop{
    position: fixed !important;
    right: 20px !important;
    top: calc( (56px) + 12px ) !important; /* place under top menu area; tweak if needed */
    z-index: 5000 !important;
    max-width: 360px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.16) !important;
}

/* When viewport is narrow keep the user dropdown inside the viewport */
@media (max-width: 420px){
    #vm-user-drop{ right: 12px !important; left: 12px !important; max-width: calc(100% - 24px) !important; }
}

@media (max-width: 900px){ .dropdown-body{ grid-template-columns: 1fr; } .menu-list{ gap:18px; } }

/* menu-inner scrollbar cosmetic */
.menu-inner::-webkit-scrollbar{ height: 8px; }
.menu-inner::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius: 6px; }
.menu-inner::-webkit-scrollbar-track{ background: transparent; }


/* Tighter footer policy links on mobile and ensure they remain inside the footer area */
@media (max-width: 900px) {
    .site-footer .footer-bar{
        overflow: hidden; /* keep children inside the dark bar */
        padding-left: 12px;
        padding-right: 12px;
    }
    .site-footer .footer-bar .links{
        display:flex;
        justify-content:center;
        gap:4px;
        flex-wrap:nowrap !important; /* keep single line */
        white-space:nowrap;
        box-sizing:border-box;
        max-width:100%;
    }
    .site-footer .footer-bar .links a{
        font-size:10px; /* smaller on very small screens */
        margin-right:4px;
        padding:2px 4px;
        line-height:1;
        display:inline-block;
    }
}
/* Hero styles (responsive; slightly smaller than reference photo; larger icon) */
.hero{ background: rgb(36, 39, 39); padding: 56px 20px 48px; }
.hero-inner{ max-width:1200px; margin: 0 auto; text-align:center; }
.hero-title{ font-family: 'Poppins', sans-serif; font-weight:800; font-size:44px; line-height:1.02; color:#fff; margin:0 0 12px; }
.hero-title .emoji{ margin:0 8px; }
.hero-title .hero-grow{ color:#FF8C00; display:inline-flex; align-items:center; gap:10px; }
.hero-title .hero-icon svg{ display:inline-block; vertical-align:middle; width:36px; height:36px; }
.hero-sub{ color:#fff; margin-top:12px; font-size:16px; opacity:0.95; }

@media (min-width: 900px){
    .hero{ padding:72px 20px 56px; }
    .hero-title{ font-size:64px; }
    .hero-title .hero-icon svg{ width:48px; height:48px; }
    .hero-sub{ font-size:18px; }
}
@media (min-width: 1200px){
    .hero{ padding:88px 20px 64px; }
    /* a little bit smaller than the photo reference */
    .hero-title{ font-size:80px; }
    .hero-title .hero-icon svg{ width:64px; height:64px; }
    .hero-sub{ font-size:20px; }
}

/* Mobile-specific hero sizing: reduce title and subtitle for narrow viewports */
@media (max-width: 900px) {
    .hero{ padding:36px 20px 32px; }
    .hero-title{ font-size:38px !important; line-height:1.06; }
    .hero-title .hero-icon svg{ width:36px; height:36px; }
    .hero-sub{ font-size:14px; }

}

/* Orders page: mobile behavior
   - Prevent the whole page from scrolling (body) on small screens when viewing orders
   - Fit the white orders box inside the viewport and allow internal scrolling
   - Allow horizontal scrolling only inside the orders table container to view details
*/
@media (max-width: 900px) {
     /* Prevent page/body scroll so only the orders box can scroll internally
         NOTE: kept minimal — on orders page we override to allow normal document flow */
     html, body { height: 100%; }

    /* Make the orders box fill available viewport space but reserve room for the fixed footer. */
    main.orders-wrap {
        box-sizing: border-box;
        margin: 12px auto;
        padding: 16px;
        max-width: calc(100% - 24px);
        width: calc(100% - 24px);
        height: calc(100vh - 140px); /* leave room for header + fixed footer */
        overflow: hidden; /* hide page-level scrollbars */
        border-radius: 8px;
    }

    /* Keep footer in document flow on mobile so it does not overlap content */
    .site-footer{
        position: static !important;
        margin: 0;
        border-radius: 8px;
        padding: 12px 10px;
    }
    .site-footer .footer-inner{ max-width: 100%; margin: 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px }

    /* Container that receives the table: allow internal vertical scrolling if rows exceed box
       and horizontal scrolling to view wide table columns. Scrolling is limited to this box. */
    #orders-container {
        height: calc(100% - 72px); /* leave space for .orders-head (approx) */
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    /* Make the table use its intrinsic width so horizontal scroll appears inside the white box */
    .orders-table{ width: max-content; min-width: 100%; table-layout: auto }

    /* Ensure table cells don't wrap; allow horizontal pan to reveal content */
    .orders-table td, .orders-table th{ white-space: nowrap; }

    /* Mobile-only: truncate the Link anchor text inside the Link column without changing table layout.
       This limits the anchor's visible width using viewport units so very long URLs show ellipsis. */
    body.orders-page .orders-table td.link-col{ overflow: hidden; }
    body.orders-page .orders-table td.link-col a{
        display: inline-block !important;
        max-width: 90vw !important; /* visible width on mobile; adjust if you prefer */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

     /* Force the orders page header to a single line (truncate if needed);
         allow the descriptive paragraph to wrap to multiple lines on mobile. */
     .orders-head h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
}

/* Orders page specific: keep footer in document flow when it directly follows the main.orders-wrap
   so the footer does not cover the orders content on mobile. This targets the orders page
   where the footer is adjacent to the main content. */
@media (max-width:900px){
    main.orders-wrap + .site-footer{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; margin-top:12px; border-radius:8px; padding:12px 10px }
}

/* Payment-success page: keep each dt/dd pair on one line on small screens
   and truncate long link values with ellipsis to avoid wrapping. */
@media (max-width:520px) {
    .wrap .details {
        grid-template-columns: auto 1fr !important;
        gap:8px 12px !important;
        align-items: center !important;
    }
    .wrap .details dt {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding-right:6px !important;
    }
    .wrap .details dd {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: right !important;
    }
    .wrap .details dd a.trunc-link{
        display: inline-block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
    }
    /* Force the small-header title onto a single line on narrow viewports */
    header h2{
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
}

/* Payment-success: add horizontal breathing room on small screens */
@media (max-width:520px) {
    .wrap{
        margin: 18px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        max-width: calc(100% - 36px) !important;
        box-sizing: border-box !important;
    }
}

/* Extra bottom spacing for mobile so the white card doesn't butt against the viewport edge */
@media (max-width:520px) {
    .wrap{ padding-bottom: 28px !important; margin-bottom: 28px !important; }
}

/* Services grid styles */
.services-section{ background: rgb(36, 39, 39); padding: 36px 16px 64px; }
.services-inner{ max-width:1200px; margin: 0 auto; }
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; align-items:start; }
.service-card{ background:#fff; border-radius:10px; padding:0; box-shadow:0 2px 6px rgba(0,0,0,0.06); overflow:hidden; position:relative; z-index:1; }
.service-header{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:14px 16px; }
.service-icon{ width:40px; height:40px; border-radius:8px; object-fit:cover; }
.service-title{ font-size:18px; font-weight:700; color:#111; margin:0; flex:1; }
.service-toggle{ background:transparent; border:none; font-size:18px; cursor:pointer; color:#333; padding:6px; border-radius:6px; }
.service-toggle img{ width:14px; height:14px; display:block; }
.service-body{ margin-top:12px; padding:12px 16px; display:none; }
.service-body:not([hidden]){ display:block; }
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.svc-item{ background:#fbfbfb; border-radius:8px; padding:12px; color:#111; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); border:1px solid rgba(0,0,0,0.08); }

/* remove default underline for link-like service items and dropdown links */
.svc-item, .dropdown-link { text-decoration: none; }
.svc-item:hover, .dropdown-link:hover { text-decoration: none; }

/* Kick-specific: make sure icon treatment matches menu's PNG look */
.service-card img[alt="Kick"]{ border-radius:6px; width:44px; height:44px; }

@media (max-width: 1000px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } .svc-grid{ grid-template-columns:1fr; } }

/* Footer (design match) */
.site-footer{ background:#0f0f0f; color:#dcdcdc; padding:44px 20px 20px; border-top:1px solid rgba(255,255,255,0.03); margin-top:40px }
.site-footer .footer-inner{ max-width:1180px; margin:0 auto; display:flex; gap:36px; align-items:flex-start; }
.site-footer .footer-left{ flex:0 0 66%; padding-right:20px }
.site-footer .footer-right{ flex:0 0 34%; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center }
.site-footer .footer-logo{ height:40px; display:block }
.site-footer .footer-desc{ color:#a9a9a9; margin-top:12px; line-height:1.6; font-size:14px; max-width:680px }
.site-footer .status-box{ display:inline-flex; align-items:center; gap:12px; background:#07120a; color:#b6e9b8; padding:10px 16px; border-radius:999px; margin-top:18px; font-weight:700 }
.site-footer .live-dot{ width:12px; height:12px; border-radius:50%; background:linear-gradient(#3df07a,#00b64f); box-shadow:0 0 8px rgba(45,200,120,0.45) }
.site-footer h4{ color:#fff; margin-bottom:12px }
.site-footer .socials{ display:flex; gap:10px; justify-content:flex-end }
.site-footer .socials a{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:8px }
.site-footer .socials img{ width:22px; height:auto }
.site-footer .telegram-link{ color:#ff7a00; font-weight:800 }
.site-footer .footer-bar{ margin-top:22px; background:#0b0b0b; padding:18px 20px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; gap:20px }
.site-footer .footer-bar .left{ color:#9a9a9a; font-size:13px; line-height:1.5 }
.site-footer .footer-bar .right{ display:flex; align-items:center; gap:22px }
.site-footer .footer-bar .links a{ color:#dcdcdc; text-decoration:none; margin-right:18px; font-weight:700 }
.site-footer .payment-icons img{ height:28px; margin-left:8px; background:#fff; padding:6px; border-radius:8px; border:1px solid rgba(0,0,0,0.06) }
.site-footer .footer-inner::before{ content:''; position:absolute; left:66%; top:20px; bottom:20px; width:1px; background:rgba(255,255,255,0.04); transform:translateX(-50%); border-radius:1px }
@media (max-width:900px){
    .site-footer .footer-inner{ flex-direction:column; align-items:center; text-align:center }
    .site-footer .footer-left,
    .site-footer .footer-right{ flex: none; width:100%; padding:0; }
    .site-footer .footer-right{ align-items:center; text-align:center }
    .site-footer .footer-inner::before{ display:none }
    .site-footer .footer-bar{ flex-direction:column; align-items:center; text-align:center }
    .site-footer .footer-bar .right{ align-items:center }
    .site-footer .footer-bar .links{ display:block; margin:8px 0; text-align:center }
    .site-footer .footer-logo{ margin:0 auto; display:block }
}

/* Hide the under-header menu on small screens (mobile) while keeping it on desktop */
@media (max-width: 900px) {
    .menu-bar { display: none !important; }
}

/* Anchor only Telegram and Kick dropdowns to the page right edge so they
     start from the viewport edge (not the category) and display fully. The
     top is fixed to the menu row height so panels appear under the label. */
.menu-list .menu-item.telegram .dropdown-menu,
.menu-list .menu-item.kick .dropdown-menu{
        position: fixed !important;
        right: 12px !important;
        left: auto !important;
        top:auto !important; /* aligned below menu row */
        transform: none !important;
        min-width: 260px !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
        z-index: 6000 !important;
}

@media (max-width: 900px){
    .menu-list .menu-item.telegram .dropdown-menu,
    .menu-list .menu-item.kick .dropdown-menu{
        right: 10px !important; left: auto !important; top: 56px !important; min-width:200px !important; max-width: calc(100vw - 20px) !important;
    }
}

/* Force footer policy links to a single centered line on mobile; avoid wrapping/scrolling */
@media (max-width: 900px) {
    .site-footer .footer-bar{
        overflow: hidden; /* ensure links stay inside dark bar */
        padding-left: 8px;
        padding-right: 8px;
    }
    .site-footer .footer-bar .links{
        display:flex;
        justify-content:center;
        gap:4px;
        flex-wrap:nowrap !important;
        white-space:nowrap;
        box-sizing:border-box;
        max-width:100%;
        min-width:0;
    }
    .site-footer .footer-bar .links a{
        font-size:10px;
        margin:0 2px;
        padding:2px 4px;
        line-height:1;
        display:inline-block;
        flex: 0 1 auto; /* allow shrinking */
        min-width:0;
    }
}

/* Desktop: keep "Grow", icon and "Exponentially" on the same line */
@media (min-width: 900px) {
    .hero-title .hero-grow{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
    .hero-title .hero-after{ display:inline-block; margin-left:8px }
    .hero-title .hero-icon{ margin-left:6px }
}

/* Narrow screens: allow wrapping where necessary (fallback behavior) */
@media (max-width: 699px) {
    .hero-title .hero-grow{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center }
    .hero-title .hero-after{ flex-basis:100%; display:block; text-align:center; margin-top:0 }
}

/* Orders page specific overrides when body has .orders-page */
@media (max-width:900px){
    /* Make the orders page layout a column so the white box contains the table
       and the table scrolls inside the box instead of overflowing the page. */
    /* Show all orders by letting the white box expand and the page scroll vertically. */
    body.orders-page { height: auto; }
    body.orders-page main.orders-wrap{ box-sizing: border-box; display:block; height: auto; margin:12px auto; padding:16px; overflow: visible }
    /* Let the header and container flow naturally; allow container to expand so all rows are visible */
    body.orders-page .orders-head{ flex: none }
     /* Show all orders vertically and allow horizontal panning inside the white box only.
         Disable vertical scrolling inside the box so rows remain visible; horizontal
         overflow is enabled so wide columns can be panned without touching edges. */
     body.orders-page #orders-container{ flex: none; height: auto; overflow-y: visible; overflow-x: auto; padding-left:8px; padding-right:12px }
     body.orders-page .site-footer{ position: static !important; margin-top:12px; border-radius:8px }

     /* Ensure the table uses its intrinsic width so horizontal scroll appears inside the box,
         and add a small right margin so the last column is not flush against the container edge. */
     body.orders-page .orders-table{ width: max-content; min-width: 100%; table-layout: auto; margin-right:12px }
     body.orders-page .orders-table td, body.orders-page .orders-table th{ white-space: nowrap; }
}

/* Orders header tweaks (mobile only): allow description to wrap and move search under text */
@media (max-width:900px){
    .orders-head{ display:flex; flex-direction:column; align-items:stretch; gap:8px }
    .orders-head h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .orders-head p{ white-space: normal; overflow: visible; text-overflow: initial }
    .orders-head #orderSearch{ width:100% !important; max-width:100% !important; box-sizing:border-box; display:block }
    /* Ensure the two child columns stack and take full width */
    .orders-head > div { display:block; width:100% }
    .orders-head > div:last-child { margin-top:0 }
}

/* Checkout: place category box on its own first row and move the other two boxes
   (quantity/price) to a second row on mobile. */
@media (max-width:900px){
     /* Use explicit grid areas so qty occupies the full first row and category/price are side-by-side on the second row. */
     .checkout-main .qty-price-wrap{ display: grid !important; grid-template-columns: repeat(2, minmax(120px, 1fr)) !important; grid-template-areas: "qty qty" "category price" !important; gap:12px !important; align-items:center !important }
     .checkout-main .qty-price-wrap .category-box{ grid-area: category; width:100%; }
     .checkout-main .qty-price-wrap .order-qty{ grid-area: qty; justify-self:center }
     .checkout-main .qty-price-wrap .price-box{ grid-area: price; justify-self:center }
    /* ensure boxes size correctly inside their grid cells */
    .qty-price-wrap .order-qty, .qty-price-wrap .price-box{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .qty-price-wrap .order-qty, .qty-price-wrap .price-box{ text-align:center }
}

    /* Checkout page: force box text to a single line on mobile so labels don't wrap */
    @media (max-width:900px){
        .checkout-main .category-box,
        .checkout-main .subcat-box,
        .checkout-main .order-qty,
        .checkout-main .price-box,
        .checkout-main .payment-box .box-content .payment-left strong {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Ensure payment-left keeps items on a single row and the right-side icons stay visible */
        .checkout-main .payment-box .box-content{ gap:12px; }
        .checkout-main .payment-box .box-content .payment-left{ min-width:0 }
    }

/* Mobile: if there is no .price-box present next to the category, make the
   category box span the full available width so it doesn't leave an empty gap.
   Uses the relational :has() selector to detect absence of .price-box. This
   applies only to mobile viewports (same breakpoint as checkout rules). */
@media (max-width:900px){
    .checkout-main .qty-price-wrap:not(:has(.price-box)){
        grid-template-columns: 1fr !important;
        grid-template-areas: "qty" "category" !important;
        gap:12px !important;
    }
    .checkout-main .qty-price-wrap:not(:has(.price-box)) .category-box{
        grid-area: category;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }
}

/* Also handle the common case where .price-box exists in the DOM but is
   hidden via inline style (e.g. style="display:none;"). The selector below
   covers several variants so the category box expands when the price is hidden. */
@media (max-width:900px){
    .checkout-main .qty-price-wrap:has(.price-box[style*="display:none"]),
    .checkout-main .qty-price-wrap:has(.price-box[style*="display: none"]),
    .checkout-main .qty-price-wrap:has(.price-box[hidden]),
    .checkout-main .qty-price-wrap:has(.price-box.hidden) {
        grid-template-columns: 1fr !important;
        grid-template-areas: "qty" "category" !important;
        gap:12px !important;
    }
    .checkout-main .qty-price-wrap:has(.price-box[style*="display:none"]) .category-box,
    .checkout-main .qty-price-wrap:has(.price-box[style*="display: none"]) .category-box,
    .checkout-main .qty-price-wrap:has(.price-box[hidden]) .category-box,
    .checkout-main .qty-price-wrap:has(.price-box.hidden) .category-box{
        grid-area: category;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }
}