/**
 * ============================================================================
 * ROHAN2 EREBOR - NESNE MARKET (ITEM SHOP) MOBILE RESPONSIVE STYLESHEET
 * ============================================================================
 * Scope: Strictly applies ONLY to mobile phones (<= 600px or touch <= 680px).
 * Desktop and PC in-game WebView (740x550 / 800x600+) remain 100% untouched.
 * Controlled by: ENABLE_ROHAN_MARKET_MOBILE_RESPONSIVE in /config_flags.php
 * ============================================================================
 */

@media (max-width: 600px), (max-width: 680px) and (pointer: coarse) {

  /* --------------------------------------------------------------------------
     1. ROOT & VIEWPORT CONTAINER (#page, #contentContainer, .content)
     Preserves Desktop dark mahogany leather texture (../images/b1.jpg)
     -------------------------------------------------------------------------- */
  html,
  body,
  body.website,
  body.ingame,
  body.small {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #1b0d06 !important;
    -webkit-text-size-adjust: 100%;
  }

  #page,
  body.website #page,
  body.ingame #page,
  body.small #page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("../images/b1.jpg") repeat #2a1208 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  #contentContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #contentContainer > .content,
  .content#wt_refpoint,
  body.website .content,
  body.ingame .content,
  .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px 24px 10px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    position: relative !important;
  }

  #contentContainer > .content::-webkit-scrollbar,
  .content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Neutralize mCustomScrollbar fixed clipping so native touch scroll works smoothly */
  .scrollable_container,
  body.website #page #landing,
  body.ingame #page #landing,
  body.website .content .scrollable_container,
  body.ingame .content .scrollable_container,
  #landing.scrollable_container,
  .content #category .scrollable_container,
  .tab-content .scrollable_container,
  body.website #accountContent .scrollable_container,
  body.ingame #accountContent .scrollable_container,
  #accountContent .scrollable_container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .inside_scrollable_container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .mCustomScrollBox,
  .mCSB_container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mCSB_scrollTools {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     2. HEADER (#header) - AUTHENTIC 2-ROW DARK ESPRESSO BAR
     Row 1: Logo + 2-Line User/Server + Language Dropdown + [☰] Menu Button
     Row 2: Compact Currency Strip (EP / EM / KP) + Green [EP SATIN AL] Button
     -------------------------------------------------------------------------- */
  #header,
  #header.header {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    background: linear-gradient(180deg, rgba(24, 10, 4, 0.96) 0%, rgba(38, 16, 8, 0.92) 100%) !important;
    border-bottom: 1px solid rgba(164, 121, 68, 0.45) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 60 !important;
  }

  /* Row 1: Logo + User/Server + Language + Menu Toggle (all on 1 single line) */
  #header .logo-block,
  #header .headerWidth1,
  #header > .span5 {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 36px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #header h1 {
    order: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
  }

  #header h1 a {
    width: 74px !important;
    height: 30px !important;
    display: block !important;
    margin: 0 !important;
    background-position: left center !important;
    background-size: contain !important;
  }

  /* User & Server 2-line compact stack right next to Logo (like Desktop) */
  #header .welcome {
    order: 2 !important;
    float: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    line-height: 13px !important;
    color: #f2e69f !important;
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    row-gap: 1px !important;
    overflow: hidden !important;
  }

  #header .welcome i {
    float: none !important;
    margin: 0 !important;
    line-height: 13px !important;
    font-size: 10px !important;
    color: #d9b36c !important;
  }

  #header .welcome span {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Language Dropdown pushed to right before [☰] button */
  #header .language {
    order: 3 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    flex: 0 0 auto !important;
  }

  #header .btn-language.dropdown-language {
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid #a47944 !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  #header .dropdown-language span {
    margin: 0 2px !important;
    font-size: 11px !important;
  }

  #header .dropdown-language::after {
    margin-top: 0 !important;
    margin-left: 2px !important;
  }

  #header .language .dropdown-menu {
    margin-left: 0 !important;
    left: auto !important;
    right: 0 !important;
    top: 32px !important;
    min-width: 140px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    z-index: 100005 !important;
  }

  /* Right Slide Menu Toggle Button [☰] pinned at top-right of Row 1 */
  #header #showRightPush.account-push {
    position: absolute !important;
    top: 7px !important;
    right: 10px !important;
    width: 30px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    z-index: 15 !important;
  }

  /* Row 2: Currency Pill Box (EP / EM / KP) + Green [EP SATIN AL] Button */
  #header .payment-block,
  #header .headerWidth2,
  #header > .span7 {
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #header ul.currency_status {
    order: 1 !important;
    float: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: rgba(0, 0, 0, 0.42) !important;
    border: 1px solid rgba(164, 121, 68, 0.38) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #header ul.currency_status li,
  #header ul.currency_status li:nth-child(1),
  #header ul.currency_status li:nth-child(2),
  #header ul.currency_status li:nth-child(3),
  #header ul.currency_status li.selected-currency {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
  }

  #header ul.currency_status li > span.ttip {
    display: inline-flex !important;
    align-items: center !important;
  }

  #header ul.currency_status li .block-price {
    width: auto !important;
    min-width: 0 !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #header ul.currency_status li .block-price img {
    position: static !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    margin: 0 !important;
  }

  #header ul.currency_status li .end-price {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #f2e69f !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #header .payment-block > a {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  #header .btn-price.premium {
    float: none !important;
    width: auto !important;
    min-width: 118px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }

  #header .btn-price.premium img {
    position: static !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    flex: 0 0 15px !important;
  }

  #header .btn-price.premium .premium-name {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: auto !important;
    display: inline-block !important;
  }

  /* --------------------------------------------------------------------------
     3. NAVIGATION TABS & SEARCH BAR (#navigation, #searchBar)
     Classic Metin2 tabs with gold underline + Search Input & Red [Ara] Button
     -------------------------------------------------------------------------- */
  #navigation,
  #navigation.navbar {
    flex: 0 0 auto !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 2px 10px 4px 10px !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 1px solid rgba(242, 230, 159, 0.45) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 40 !important;
  }

  #navigation .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #navigation ul.nav-tabs {
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid #f2e69f !important;
  }

  #navigation ul.nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  #navigation ul.nav-tabs > li,
  #navigation ul.nav-tabs > li.special-category {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #navigation ul.nav-tabs > li > a.btn-navitem {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 27px !important;
    line-height: 25px !important;
    padding: 0 9px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Full-width Search Bar with visible Red [Ara] Button */
  #navigation #searchBar,
  #navigation .input-append {
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #navigation #searchBar i.icon-search,
  #navigation .input-append .icon-search {
    visibility: visible !important;
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    color: #4a2c18 !important;
    font-size: 13px !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  #navigation #searchBar #searchForm {
    width: 100% !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  #navigation #searchBar input.search-input,
  #navigation .input-append .search-input {
    visibility: visible !important;
    float: none !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    line-height: 26px !important;
    margin: 0 !important;
    padding: 0 8px 0 26px !important;
    font-size: 12px !important;
    background: #f7f2e4 !important;
    border: 1px solid #8c6b48 !important;
    border-right: 0 !important;
    color: #2b1508 !important;
    box-sizing: border-box !important;
  }

  #navigation #searchBar button.btn-search,
  #navigation .input-append .btn-search {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    position: static !important;
    width: auto !important;
    min-width: 54px !important;
    height: 28px !important;
    max-height: 28px !important;
    line-height: 26px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  #navigation #SearchResult {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    z-index: 10000 !important;
  }

  /* --------------------------------------------------------------------------
     4. RIGHT SLIDE DRAWER (#slideMenu & #overlayMask)
     Matches helper.js classes: #page.slide_menu_active & #contentContainer.open
     -------------------------------------------------------------------------- */
  #contentContainer,
  #contentContainer.open {
    right: 0 !important;
    left: 0 !important;
  }

  body.website #page #slideMenu,
  body.ingame #page #slideMenu,
  body.small #page #slideMenu,
  #slideMenu {
    position: absolute !important;
    top: 0 !important;
    right: -280px !important;
    width: 265px !important;
    max-width: 84vw !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 12px !important;
    background: #441d10 !important;
    border-left: 1px solid rgba(242, 230, 159, 0.35) !important;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10010 !important;
    transition: right 0.25s ease !important;
    box-sizing: border-box !important;
  }

  body.website #page.slide_menu_active #slideMenu,
  body.ingame #page.slide_menu_active #slideMenu,
  body.small #page.slide_menu_active #slideMenu,
  #page.slide_menu_active #slideMenu,
  #contentContainer.open #slideMenu,
  #slideMenu.open {
    right: 0 !important;
  }

  #slideMenu h2 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 0 0 6px 0 !important;
    margin: 0 0 8px 0 !important;
    color: #f2e69f !important;
    border-bottom: 1px solid rgba(242, 230, 159, 0.4) !important;
  }

  #slideMenu .account-infos {
    padding: 6px 8px !important;
    margin: 0 0 10px 0 !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  #slideMenu .nav-tabs.nav-stacked {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  #slideMenu .nav-tabs.nav-stacked > li {
    margin: 0 0 4px 0 !important;
  }

  #slideMenu .nav-tabs.nav-stacked > li > a.btn-sideitem {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  #slideMenu .nav-tabs.nav-stacked > li > a.btn-sideitem > i {
    float: none !important;
    margin: 0 !important;
    width: 18px !important;
    height: auto !important;
    text-align: center !important;
  }

  #overlayMask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10005 !important;
  }

  /* --------------------------------------------------------------------------
     5. MARKET HOME PAGE (#prmo-area, #prmoSlider, #zs-prmo-ad, .carousell)
     Fixes cropped slider, restores #zs-prmo-ad banner & Sevilen Ürünler cards!
     -------------------------------------------------------------------------- */
  #prmo-area {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #prmo-area #zs-prmo-slider,
  #zs-prmo-slider {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* Hide Right Promo Ad Banner (#zs-prmo-ad) on Mobile */
  #prmo-area #zs-prmo-ad,
  #zs-prmo-ad {
    display: none !important;
  }

  /* Main Promo Slider (#prmoSlider) */
  #prmo-area #prmoSlider,
  #prmoSlider {
    width: 100% !important;
    max-width: 100% !important;
    height: 168px !important;
    max-height: 168px !important;
    border: 1px solid rgba(242, 230, 159, 0.22) !important;
    box-sizing: border-box !important;
  }

  #prmoSlider .rsOverflow,
  #prmoSlider .rsContainer,
  #prmoSlider .rsSlide,
  #prmoSlider .rsContent,
  #prmoSlider .rsContent .bContainer {
    width: 100% !important;
    height: 168px !important;
  }

  #prmoSlider .rsContent .bContainer > img {
    width: 100% !important;
    height: 168px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }

  #prmoSlider .rsContent .bContainer .slider_banner {
    padding: 5px 8px !important;
    background: rgba(0, 0, 0, 0.72) !important;
  }

  #prmoSlider .rsContent .bContainer .slider_banner > h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
  }

  #prmoSlider .rsContent .bContainer .slider_banner > p {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  /* Popular Items Section (Sevilen Ürünler / .item-sample / .carousell)
     Restores collapsed .rsVisibleNearbyWrap & .rsOverflow so all items show! */
  .item-sample {
    width: 100% !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
  }

  .item-sample h2.heading-cat {
    margin: 0 0 8px 0 !important;
    padding: 0 2px 4px 2px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(242, 230, 159, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .item-sample h2.heading-cat a.text-link {
    order: 2 !important;
    float: none !important;
    font-size: 11.5px !important;
  }

  #page #landing .carousell,
  #confirmation .carousell,
  .carousell.royalSlider,
  .carousell {
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #page #landing .carousell .rsVisibleNearbyWrap,
  #confirmation .carousell .rsVisibleNearbyWrap,
  .carousell .rsVisibleNearbyWrap {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    overflow: visible !important;
  }

  #page #landing .carousell .rsOverflow,
  .carousell .rsVisibleNearbyWrap .rsOverflow,
  .carousell .rsOverflow {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #page #landing .carousell .rsContainer,
  .carousell .rsContainer {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #page #landing .carousell .rsSlide,
  .carousell .rsSlide {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  #page #landing .carousell .rsArrow,
  .carousell .rsArrow {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     6. PRODUCT CATEGORIES & ITEM CARDS (#category, ul#subnavi, ul.item-list)
     Fixes 480px clipping on #category .tabbable & broken category buttons
     -------------------------------------------------------------------------- */
  #category {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #category > h2,
  .content #category h2 {
    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 1px solid rgba(242, 230, 159, 0.35) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  #category > h2 > ul.breadcrumb,
  .content #category h2 .breadcrumb {
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #category > h2 .drop-sort-by,
  #category > h2 .drop-sort-by > form,
  #category > h2 .drop-sort-by > form #searchDropdown {
    float: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  #category > h2 .drop-sort-by > form #searchDropdown .dropdown-toggle {
    min-width: 135px !important;
    height: 28px !important;
    line-height: 26px !important;
    font-size: 12px !important;
  }

  /* Override style.min.css height:480px & overflow:hidden on #category .tabbable
     so ALL products load and scroll smoothly from top to bottom! */
  body.website #category .tabbable,
  body.ingame #category .tabbable,
  body.small #category .tabbable,
  #category .tabbable,
  #category .tabbable.tabs-left {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Clean 2-Column Mobile Category Grid (ul#subnavi) */
  ul#subnavi,
  #subnavi.nav-tabs,
  .tabs-left > ul#subnavi.nav-tabs {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    border: 0 !important;
  }

  /* Remove Bootstrap .nav-tabs:before / .clearfix:before so top-left grid cell isn't empty */
  ul#subnavi:before,
  ul#subnavi:after,
  #subnavi.nav-tabs:before,
  #subnavi.nav-tabs:after,
  .tabs-left > ul#subnavi.nav-tabs:before,
  .tabs-left > ul#subnavi.nav-tabs:after,
  ul.item-list.card:before,
  ul.item-list.card:after {
    display: none !important;
    content: none !important;
  }

  ul#subnavi > li,
  #subnavi.nav-tabs > li {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
  }

  ul#subnavi > li > a.btn-catitem,
  #subnavi.nav-tabs > li > .btn-catitem {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 1.2 !important;
    padding: 4px 18px 4px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    border: 1px solid rgba(242, 230, 159, 0.22) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  /* Hide <br> inside category buttons so icon & text sit side-by-side cleanly */
  ul#subnavi > li > a.btn-catitem br,
  #subnavi.nav-tabs > li > .btn-catitem br {
    display: none !important;
  }

  ul#subnavi > li > a.btn-catitem img,
  #subnavi.nav-tabs > li > .btn-catitem img {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    flex: 0 0 22px !important;
    object-fit: contain !important;
  }

  #subnavi.nav-tabs > li.has-subnavi:before {
    right: 7px !important;
    top: 19px !important;
    margin-top: -4px !important;
    z-index: 2 !important;
  }

  /* Subcategory Dropdown: Hide desktop right-flyout on hover, show inline pill bar when active */
  #subnavi.nav-tabs > li > ul.dropdown-menu,
  #subnavi.nav-tabs > li:hover > ul.dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  #subnavi.nav-tabs > li:has(> a.btn-catitem-active) {
    grid-column: 1 / -1 !important;
  }

  #subnavi.nav-tabs > li:has(> a.btn-catitem-active) > ul.dropdown-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 4px 0 2px 0 !important;
    padding: 6px !important;
    background: rgba(34, 12, 6, 0.92) !important;
    border: 1px solid rgba(232, 163, 20, 0.4) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  #subnavi.nav-tabs > li:has(> a.btn-catitem-active) > ul.dropdown-menu > li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #subnavi.nav-tabs > li:has(> a.btn-catitem-active) > ul.dropdown-menu > li > a.btn-subcatitem {
    display: inline-block !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    color: #f2e69f !important;
    background: rgba(104, 6, 3, 0.8) !important;
    border: 1px solid rgba(242, 230, 159, 0.28) !important;
    border-radius: 3px !important;
    text-decoration: none !important;
  }

  #category .tab-content,
  #category .tab-content.span9,
  #category .tab-content.span12 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #category .mCSB_container {
    padding: 0 !important;
  }

  /* Fix inline style="width: calc(100% - 40px) !important; margin-top: -19px !important;" on All Products notice */
  #category .scrollable_container > br:first-child {
    display: none !important;
  }

  #category .scrollable_container > #error.contrast-box {
    min-width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: 19px !important;
    margin-bottom: 27px !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  #category .scrollable_container > #error.contrast-box .dark-grey-box {
    padding: 4px !important;
  }

  #category .scrollable_container > #error.contrast-box .dark-grey-box p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .cat_header {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px 0 !important;
    padding: 4px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .cat_header h2 {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .cat_header .SortDropdown {
    float: none !important;
    margin: 0 !important;
  }

  /* Item Cards Grid & Authentic Parchment Card Styling */
  ul.item-list.card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #page #landing .carousell .list-item,
  #page .card .list-item,
  #accountContent .card .list-item,
  #confirmation .card .list-item,
  ul.item-list.card > li.list-item,
  .carousell .list-item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 162px !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .list-item .contrast-box.item-box.inner-content,
  .card .list-item .item-box,
  .item-box {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .list-item .item-box .desc {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .list-item .item-box .item-description {
    width: 100% !important;
    height: auto !important;
  }

  .list-item .item-box h4 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 6px 0 !important;
  }

  .list-item .item-box h4 a.card-heading {
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Keep exact 98x98 Metin2 crimson icon frame (picture_wrapper_2) + beige description */
  .list-item .item-box .item-shortdesc {
    width: 100% !important;
    height: auto !important;
    min-height: 98px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    background-color: rgba(0, 0, 0, 0.14) !important;
  }

  .list-item .item-box .item-thumb {
    float: none !important;
    flex: 0 0 98px !important;
    width: 98px !important;
    height: 98px !important;
    max-width: 98px !important;
    max-height: 98px !important;
    margin: 0 !important;
    position: relative !important;
  }

  .list-item .item-box .item-thumb-container,
  .list-item .item-box .picture_wrapper_2 {
    width: 98px !important;
    height: 98px !important;
  }

  .list-item .item-box .item-shortdesc > div.fancybox {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 6px 8px 6px 2px !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .list-item .item-box p.item-box-description {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: #3c1e16 !important;
    overflow: visible !important;
  }

  /* Touch-Friendly Footer: Always show BOTH Price & Buy Button side-by-side */
  .list-item .item-box .item-footer.price_desc {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .list-item .item-box .item-footer .action-box.left {
    display: none !important;
  }

  .list-item .item-box .item-footer .action-box.right {
    width: 100% !important;
    height: 30px !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .list-item .item-box .item-footer button.btn-price,
  .list-item .item-box .item-footer a.btn-price {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    position: static !important;
    box-sizing: border-box !important;
  }

  .list-item .item-box .item-footer button.btn-price .block-price {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    height: 100% !important;
  }

  .list-item .item-box .item-footer button.btn-price img {
    position: static !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
  }

  .list-item .item-box .item-footer button.btn-price .end-price {
    position: static !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .list-item .item-box .item-footer button.btn-buy,
  .list-item .item-box .item-footer a.btn-buy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    line-height: 28px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    position: static !important;
    box-sizing: border-box !important;
  }

  /* Single Column Item Cards on Phones <= 560px */
  @media (max-width: 560px) {
    ul.item-list.card,
    #page #landing .carousell .rsContainer,
    .carousell .rsContainer {
      grid-template-columns: 1fr !important;
    }
  }

  /* --------------------------------------------------------------------------
     7. PRODUCT DETAIL & PURCHASE MODAL (#item-fancybox, #itemDetails, #itemBuy)
     Fixes overlapping .meta-infos, .picture_wrapper, .tab-pane & #itemBuy
     -------------------------------------------------------------------------- */
  .fancybox-wrap,
  .fancybox-desktop,
  .fancybox-type-ajax {
    width: calc(100vw - 16px) !important;
    max-width: 460px !important;
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    margin: 0 auto !important;
    position: fixed !important;
    box-sizing: border-box !important;
    z-index: 100020 !important;
  }

  .fancybox-skin {
    padding: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .fancybox-close,
  .fancybox-overlay .fancybox-close:active {
    top: 4px !important;
    right: 4px !important;
    z-index: 100050 !important;
  }

  .fancybox-outer,
  .fancybox-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #item-fancybox,
  body.website #item-fancybox,
  body.ingame #item-fancybox,
  body.small #item-fancybox {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #itemDetails,
  #itemBuy,
  #confirmation,
  #notEnoughCash {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 8px 0 !important;
    padding: 10px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #itemDetails > .span12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 7.1 Header: Title + Breadcrumb + Price/Mileage Box (.meta-infos) */
  #itemDetails .meta-infos {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #itemDetails .meta-infos h2#name,
  #itemDetails h2 {
    order: 1 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 28px 0 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  #itemDetails .meta-infos .breadcrumb {
    order: 2 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  #itemDetails .meta-infos .meta-prop {
    order: 3 !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 2px 0 0 0 !important;
    padding: 6px 8px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(60, 30, 22, 0.16) !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
  }

  #itemDetails .meta-infos .meta-prop .price,
  #itemDetails .price {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  #itemDetails .price .price-label {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #itemDetails .price .amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    height: auto !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #itemDetails .price .amount .block-price {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #itemDetails .price .sale-amount,
  #itemDetails .price .end-price {
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #itemDetails .meta-infos .bill_mileage,
  #itemDetails .bill_mileage {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  /* 7.2 Showcase & Item Icon (#pictureShowcase, .item-showcase, .picture_wrapper) */
  #pictureShowcase,
  #pictureShowcase .item-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  #itemDetails .item-showcase,
  #confirmation .item-showcase,
  #notEnoughCash .item-showcase {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Override style.min.css position:absolute on .picture_wrapper so it never floats over text */
  #itemDetails .item-showcase .picture_wrapper,
  #itemDetails .item-showcase .picture_wrapper_2,
  #confirmation .item-showcase .picture_wrapper,
  #notEnoughCash .item-showcase .picture_wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 98px !important;
    height: 98px !important;
    min-height: 98px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: 98px 98px !important;
    background-position: center center !important;
    box-sizing: border-box !important;
  }

  #itemDetails .item-showcase .picture_wrapper img,
  #itemDetails .item-showcase .picture_wrapper_2 img,
  .fancybox-inner #image > img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: auto !important;
    max-width: 98px !important;
    max-height: 98px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }

  /* Duration badge inside .item-showcase */
  #itemDetails .item-showcase > div[style*="position:absolute"] {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 4px auto 0 auto !important;
    line-height: 24px !important;
    justify-content: center !important;
  }

  /* 7.3 Description Tabs (.tabbable.item-description, .tab-pane) */
  #itemDetails .tabbable.item-description,
  #itemDetails .item-description {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #itemDetails .tabbable .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #itemDetails .tabbable .nav-tabs > li {
    float: none !important;
    margin: 0 !important;
  }

  #itemDetails .tabbable .nav-tabs > li > a {
    padding: 5px 22px 5px 12px !important;
    font-size: 12px !important;
  }

  #itemDetails .tabbable .tab-content {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #itemDetails .tabbable .tab-pane,
  #itemDetails .tab-pane.scrollable_container_fancy,
  #itemDetails .tabbable .tab-content.no-tabs .tab-pane {
    width: 100% !important;
    height: auto !important;
    min-height: 68px !important;
    max-height: 155px !important;
    padding: 8px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #itemDetails .tabbable .tab-pane .mCustomScrollBox,
  #itemDetails .tabbable .tab-pane .mCSB_container {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #itemDetails .tabbable .tab-pane p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 6px 0 !important;
  }

  /* 7.4 Purchase & Quantity Bar (#itemBuy) */
  #itemBuy {
    margin: 0 !important;
    padding: 8px !important;
    height: auto !important;
  }

  #itemBuy > .grey-box {
    width: 100% !important;
    height: auto !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  #itemBuy .dark-grey-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #itemBuy .contrast-box {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #itemBuy .contrast-box .arrow {
    display: none !important;
  }

  #itemBuy .contrast-box .amount,
  #itemBuy.volume_discount .contrast-box .amount {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  #itemBuy .contrast-box .amount label {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.3 !important;
    margin: 0 0 6px 0 !important;
    font-size: 12px !important;
  }

  #itemBuy .contrast-box .amount ul,
  #itemBuy.volume_discount .contrast-box .amount > ul {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #itemBuy .contrast-box .amount ul:before,
  #itemBuy .contrast-box .amount ul:after {
    display: none !important;
    content: none !important;
  }

  #itemBuy .contrast-box .amount ul > li,
  #itemBuy.volume_discount .contrast-box .amount > ul > li {
    float: none !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
  }

  #itemBuy .contrast-box .amount ul > li > button.btn-discount {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    line-height: 26px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 12px !important;
  }

  #itemBuy .contrast-box .amount p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #itemBuy #buy,
  #itemBuy #distribute {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #itemBuy #buy form,
  #itemBuy.volume_discount .contrast-box form {
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  #itemBuy #buy p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }

  #itemBuy #buy p.bill_price {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  #itemBuy #buy .buy-btn-box,
  #itemBuy #distribute .buy-btn-box {
    margin: 4px 0 0 0 !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  #itemBuy #buy .buy-btn-box .btn-group {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    display: block !important;
  }

  #itemBuy #buy .buy-btn-box .btn-group a#buyItem {
    display: block !important;
    width: 100% !important;
  }

  #itemBuy #buy .btn-default,
  #itemBuy #buy .btn-price,
  #itemBuy #buy .btn-buy,
  #itemBuy #distribute .btn-default,
  #itemBuy #distribute .btn-price,
  #itemBuy #distribute .btn-buy {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    height: 34px !important;
    line-height: 32px !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: block !important;
  }

  /* 7.5 Buy Response / Insufficient Cash Modal (#notEnoughCash) */
  #notEnoughCash,
  #notEnoughCash.contrast-box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #notEnoughCash > .dark-grey-box {
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  #notEnoughCash .dark-grey-box > .clearfix,
  #notEnoughCash .dark-grey-box > .clearfix[style*="display:flex"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    width: 100% !important;
  }

  #notEnoughCash .item-showcase,
  #notEnoughCash .item-showcase.span2 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  #notEnoughCash .item-showcase .picture_wrapper {
    width: 98px !important;
    height: 98px !important;
    margin: 0 auto !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #notEnoughCash .item-showcase .picture_wrapper img {
    max-width: 98px !important;
    max-height: 98px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  #notEnoughCash .money-showcase,
  #notEnoughCash .money-showcase.span5 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  #notEnoughCash .money-showcase h2 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
  }

  #notEnoughCash .money-showcase .currency_status_box {
    float: none !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  #notEnoughCash .money-showcase .action-box {
    width: 100% !important;
    margin-top: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    text-align: center !important;
  }

  #notEnoughCash ul#js_button_container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #notEnoughCash ul#js_button_container > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    list-style: none !important;
  }

  #notEnoughCash ul#js_button_container > li > button.btn-discount {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    line-height: 26px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 12px !important;
  }

  #notEnoughCash .action-box button.btn-price,
  #notEnoughCash .action-box button.btn-buy {
    width: 100% !important;
    height: 34px !important;
    line-height: 32px !important;
    margin: 0 !important;
    float: none !important;
  }

  #notEnoughCash .alternativ_payment .btn_wrapper {
    position: static !important;
    padding: 8px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #notEnoughCash .alternativ_payment .btn_wrapper button,
  #notEnoughCash .alternativ_payment .btn_wrapper a {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }

  /* --------------------------------------------------------------------------
     8. EP SATIN AL / BUY VIEW (.center, .ep-list, .buy-box, .buy-box2)
     -------------------------------------------------------------------------- */
  .content > .scrollable_container[style*="margin-top"] {
    margin-top: 6px !important;
  }

  .center {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .center > a {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .buy-box,
  .buy-box2 {
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .buy-box img,
  .buy-box2 img {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  table.ep-list,
  .ep-list {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* --------------------------------------------------------------------------
     9. ACCOUNT PAGES (#account, #accountNav, #accountContent: Safebox, Logs, Coupon)
     -------------------------------------------------------------------------- */
  #account {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  ul#accountNav {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 0 4px 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  ul#accountNav > li {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    list-style: none !important;
  }

  ul#accountNav > li > a.btn-sideitem {
    width: auto !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }

  ul#accountNav > li > a.btn-sideitem i {
    position: static !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  ul#accountNav > li > a.btn-sideitem span {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #accountContent,
  #accountContent.span11 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #accountContent > h2 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
  }

  ul.character_list > li {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 8px 0 !important;
  }

  #accountContent.redeem-code .grey-box {
    height: auto !important;
    padding: 12px !important;
  }

  #accountContent.redeem-code img.code-avatar {
    display: none !important;
  }

  #accountContent.redeem-code input#code {
    width: 100% !important;
    height: 34px !important;
    margin: 0 0 8px 0 !important;
    box-sizing: border-box !important;
  }

  #accountContent.redeem-code button#submitCode {
    width: 100% !important;
    height: 34px !important;
    margin: 0 !important;
  }

  #accountContent table {
    width: 100% !important;
    font-size: 12px !important;
  }

  /* --------------------------------------------------------------------------
     10. LOGIN / ERROR BOXES & MINI-GAMES (Wheel, Lotto, Auction)
     -------------------------------------------------------------------------- */
  #error.contrast-box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 6px 0 !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  #error .dark-grey-box {
    width: 100% !important;
    height: auto !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* Auction (Müzayede) */
  .muzayede {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .muzayede-left,
  .muzayede-right {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }

  .teklifler {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
  }

  /* Lotto (Tombala) */
  #tmb-game .tmb-left,
  #tmb-game .tmb-right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
    height: auto !important;
  }

  /* Wheel of Destiny (Kader Çarkı) proportional mobile scaling */
  #wheel-game #stage-container {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  @media (max-width: 520px) {
    #wheel-game #wheel-container {
      transform: scale(0.62) !important;
      transform-origin: top left !important;
      margin-bottom: -170px !important;
    }

    #wheel-game #stage-teaser {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      width: 100% !important;
      margin-top: 10px !important;
    }
  }
}