/**
 * RAM Records - Store-Specific Bootstrap 5 Compatibility CSS
 * 
 * This file fixes layout issues specific to this store's custom.css
 * caused by Bootstrap 3 → 5 migration.
 * 
 * IMPORTANT: This file is loaded AFTER custom.css so it can override
 * Bootstrap 3 patterns that don't work in Bootstrap 5.
 * 
 * Each store should customize this file based on their specific needs.
 */

/* ============================================
   CONTAINER MAX-WIDTH (80%)
   ============================================ */

   .container {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  
  /* Fix container positioning for header sections */
  .site-header .container {
    position: relative !important;
    display: block !important;
  }
  
  /* ============================================
     HEADER IMPROVEMENTS
     ============================================ */
  
  /* Header overall improvements */
  .site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 2rem !important;
    background-color: #fff !important;
  }
  
  .navbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
  }
  
  /* Logo sizing and positioning */
  .logo {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  
  .logo img {
    max-height: 80px !important;
    width: auto !important;
    display: block !important;
  }
  
  /* Desktop logo adjustments */
  @media (min-width: 768px) {
    .logo {
      float: left !important;
      width: 260px !important;
      position: relative !important;
      z-index: 2 !important;
      padding: 0 15px !important;
      top: 0.5rem !important;
    }
    
    .logo img {
      max-height: none !important;
      max-width: 100% !important;
    }
  }
  
  /* ============================================
     HEADER SOCIAL ICONS - Horizontal Layout
     ============================================ */
  
  /* Fix social icons that should be horizontal and compact */
  .header-social {
    margin: 0 !important;
    display: block !important;
  }
  
  .header-social ul,
  .header-social .list-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 1rem 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  
  .header-social li,
  .header-social .list-inline > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .header-social a {
    display: block !important;
    padding: 0.5rem !important;
    font-size: 1rem !important;
  }
  
  /* Social icon text - hide on desktop, show only icons */
  .header-social a {
    color: rgba(0, 0, 0, 0.7) !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    font-size: 0 !important; /* Hide any text nodes */
    line-height: 0 !important;
  }
  
   .header-social a:hover,
   .header-social a:focus {
     text-decoration: none !important;
     color: #fff !important;
   }
  
  /* Hide text labels in social icons - show only icons */
  .header-social .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
   /* Ensure icons are visible by resetting font-size */
   .header-social .fa,
   .header-social i {
     font-size: 1rem !important;
     display: inline-block !important;
     line-height: normal !important;
   }
   
   .header-social a:hover .fa,
   .header-social a:hover i,
   .header-social a:focus .fa,
   .header-social a:focus i {
     color: #fff !important;
   }
  
  /* Hide any direct text content in social links */
  .header-social a span:not(.sr-only) {
    display: none !important;
  }
  
  /* Desktop social icons positioning */
  @media (min-width: 768px) {
    .header-social {
      float: right !important;
      margin-top: 4rem !important;
    }
    
    .header-social ul {
      display: inline-block !important;
      margin: 0 1rem 0 0 !important;
    }
  }
  
  /* ============================================
     MAIN NAVIGATION - Horizontal Layout
     ============================================ */
  
  /* Ensure navbar nav is horizontal on desktop */
  @media (min-width: 992px) {
    .navbar-nav,
    .header-nav .nav,
    .nav.navbar-nav {
      display: flex !important;
      flex-direction: row !important;
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0.5rem !important;
    }
    
    .navbar-nav > li,
    .header-nav .nav > li,
    .nav.navbar-nav > li {
      display: inline-block !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .navbar-nav > li > a,
    .nav.navbar-nav > li > a {
      padding: 0.5rem 0.75rem !important;
      display: block !important;
    }
  }
  
  /* Header user navigation (login/cart) */
  .header-user {
    height: 2.9rem !important;
    background-color: #d7dbdd !important;
    margin: 0 !important;
  }
  
  .header-user .container {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
  }
  
  .nav-user {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    position: relative !important;
    width: 100% !important;
  }
  
  .nav-user > li {
    display: inline-block !important;
    margin: 0 !important;
    position: relative !important;
  }
  
  /* Account and basket list items */
  .nav-account,
  .nav-basket {
    display: inline-block !important;
  }
  
  /* Account link styling */
  .nav-account a {
    font-size: 1rem !important;
    color: #444 !important;
    font-family: "proxima-nova-condensed", sans-serif !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
  }
  
  .nav-account a:hover,
  .nav-account a:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #333 !important;
    text-decoration: none !important;
  }
  
  /* Ensure account link spans are visible */
  .nav-account a span:not(.sr-only) {
    display: inline !important;
  }
  
  /* Account dropdown menu styling */
  .nav-account.dropdown {
    position: relative !important;
  }
  
  .nav-account .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    min-width: 160px !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    list-style: none !important;
  }
  
  .nav-account .dropdown-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .nav-account .dropdown-menu a {
    display: block !important;
    padding: 0.5rem 1rem !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  
  .nav-account .dropdown-menu a:hover,
  .nav-account .dropdown-menu a:focus {
    background-color: #f8f9fa !important;
    color: #000 !important;
  }
  
  /* Show dropdown when active */
  .nav-account.dropdown.show .dropdown-menu,
  .nav-account.dropdown [aria-expanded="true"] ~ .dropdown-menu {
    display: block !important;
  }
  
  /* Cart button styling */
  .btn-cart,
  .nav-basket a {
    color: #f161b6 !important;
    font-size: 1rem !important;
    font-family: "proxima-nova-condensed", sans-serif !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    padding: 0.75rem !important;
    margin: 0 !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
  }
  
  .btn-cart:hover,
  .btn-cart:focus,
  .nav-basket a:hover,
  .nav-basket a:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
  }
  
  /* Basket sidebar item styling */
  .nav-basket #basket,
  .nav-basket .sidebar-item {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* User account and cart icons */
  .nav-account .fa,
  .nav-account i,
  .nav-basket .fa,
  .nav-basket i,
  .btn-cart .fa,
  .btn-cart i {
    margin-right: 0.25rem !important;
    font-size: 1rem !important;
  }
  
  /* Show account and cart text on desktop */
  @media (min-width: 768px) {
    .nav-account .hidden-xs,
    .nav-account a span:not(.sr-only),
    .btn-cart span,
    .btn-cart small,
    .nav-basket a span:not(.sr-only) {
      display: inline !important;
    }
    
    .btn-cart,
    .nav-basket a {
      font-size: 1rem !important;
    }
    
    .nav-basket #basket,
    .nav-basket .sidebar-item {
      font-size: 1rem !important;
    }
  }
  
  /* Cart small text styling */
  .btn-cart small {
    font-size: 0.875em !important;
  }
  
  /* ============================================
     MOBILE LAYOUT (< 768px)
     ============================================ */
  
  /* Hide social icons on mobile */
  @media (max-width: 767px) {
    .header-social {
      display: none !important;
    }
  
    .sidebar-items {
    margin-top: 15px
  }
    
    /* Force header-user to full width on mobile */
    .header-user {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    .header-user .container {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
  
  /* Mobile header structure */
  .navbar-header {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  
  /* Mobile logo sizing */
  @media (max-width: 767px) {
    .logo {
      width: 100% !important;
      text-align: center !important;
      padding: 1rem 0 !important;
      float: none !important;
      top: 0 !important;
    }
    
    .logo img {
      max-width: 200px !important;
      max-height: 60px !important;
    }
  }
  
  /* Mobile user bar layout */
  .header-user {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  .header-user .container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .nav-user {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  /* Mobile positioning: Cart left, Login/Search/Menu right */
  .nav-basket {
    order: 1 !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }
  
  li.nav-account {
    order: 2 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  
  /* Add search to mobile header bar */
  .header-user .header-search {
    order: 3 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
  }
  
  .navbar-toggle {
    order: 4 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide text on mobile - icons only */
  @media (max-width: 767px) {
    /* Hide account text */
    .nav-account a {
      font-size: 0 !important;
      line-height: 0 !important;
      padding: 0.75rem !important;
      width: 50px !important;
      text-align: center !important;
    }
    
    .nav-account a .fa,
    .nav-account a i {
      font-size: 1.5rem !important;
      line-height: 1.5rem !important;
      margin: 0 !important;
    }
    
    .nav-account a span {
      display: none !important;
    }
    
    /* Cart - icons only */
    .btn-cart,
    .nav-basket a {
      font-size: 0 !important;
      line-height: 0 !important;
      padding: 0.75rem !important;
      width: 50px !important;
      text-align: center !important;
    }
    
    .btn-cart .fa,
    .btn-cart i,
    .nav-basket .fa,
    .nav-basket i {
      font-size: 1.5rem !important;
      line-height: 1.5rem !important;
      margin: 0 !important;
    }
    
    /* Hide cart text on mobile only - keep icon */
    .btn-cart {
      font-size: 0 !important;
    }
    
    .btn-cart span,
    .btn-cart small {
      display: none !important;
    }
    
    /* Ensure basket wrapper doesn't show text on mobile */
    .nav-basket #basket,
    .nav-basket .sidebar-item {
      font-size: 0 !important;
    }
    
    .nav-basket a span:not(.fa):not(.sr-only),
    .nav-basket a small {
      display: none !important;
    }
    
    /* Search - icon only with larger size */
    .header-search,
    .header-nav .header-search {
      display: block !important;
    }
    
    .header-search a,
    .header-nav .header-search a {
      width: 50px !important;
      text-align: center !important;
      padding: 0.75rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    .header-search a .fa,
    .header-search a i,
    .header-nav .header-search a .fa,
    .header-nav .header-search a i {
      font-size: 1.5rem !important;
      line-height: 1.5rem !important;
    }
    
    /* Menu toggle - icon only with larger size */
    .navbar-toggle {
      width: 50px !important;
      text-align: center !important;
      font-size: 0 !important;
      padding: 0.75rem !important;
      border: none !important;
      background: transparent !important;
    }
    
    .navbar-toggle .fa,
    .navbar-toggle i {
      font-size: 1.5rem !important;
      line-height: 1.5rem !important;
    }
    
    .navbar-toggle .sr-only {
      display: none !important;
    }
    
    /* Add small gaps between right-side icons */
    .nav-user {
      gap: 0.25rem !important;
    }
    
    /* Ensure proper container width */
    .header-user .container {
      max-width: 100% !important;
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }
  }
  
  /* ============================================
     DESKTOP LAYOUT (≥ 768px)
     ============================================ */
  
  @media (min-width: 768px) {
    /* Desktop header structure */
    .site-header {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    
    /* Navbar header - logo and social icons */
    .navbar-header {
      float: none !important;
      height: 10.5rem !important;
      margin-bottom: -3rem !important;
      display: block !important;
    }
    
    /* Logo positioning */
    .logo {
      float: left !important;
      width: 260px !important;
      position: relative !important;
      z-index: 2 !important;
      padding: 0 15px !important;
      top: 0.5rem !important;
    }
    
    .logo img {
      max-height: none !important;
      max-width: 100% !important;
    }
    
    /* Social icons - position on right side of logo area */
    .header-social {
      float: right !important;
      margin-top: 4rem !important;
      display: block !important;
    }
    
    .header-social ul {
      display: inline-block !important;
      margin: 0 1rem 0 0 !important;
    }
    
    /* Header user bar - login and cart on right */
    .header-user {
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      top: 1rem !important;
      z-index: 10 !important;
      text-align: right !important;
      width: 100% !important;
      max-width: 80% !important;
      height: auto !important;
      background-color: transparent !important;
      display: block !important;
    }
    
    .header-user .container {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      max-width: 100% !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    .nav-user {
      display: flex !important;
      flex-direction: row !important;
      justify-content: flex-end !important;
      align-items: center !important;
      margin-left: auto !important;
      list-style: none !important;
      padding: 0 !important;
      gap: 0 !important;
    }
    
    .nav-user > li {
      display: inline-block !important;
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: auto !important;
      bottom: 0 !important;
      margin: 0 !important;
    }
    
    /* Desktop - reset absolute positioning and ensure proper order */
    li.nav-account {
      position: relative !important;
      width: auto !important;
      left: auto !important;
      right: auto !important;
      order: 1 !important;
    }
    
    .nav-basket {
      position: relative !important;
      width: auto !important;
      left: auto !important;
      right: auto !important;
      order: 2 !important;
    }
    
    /* Hide mobile toggle on desktop */
    .navbar-toggle {
      display: none !important;
    }
    
    /* Hide search on desktop (removed from legacy site) */
    .header-nav .header-search,
    .header-search {
      display: none !important;
    }
    
    /* Desktop navigation bar */
    .header-nav {
      background-color: #d7dbdd !important;
      width: 100% !important;
      clear: both !important;
      position: static !important;
      display: block !important;
    }
    
    .header-nav .container {
      display: block !important;
      width: 100% !important;
      max-width: 80% !important;
    }
    
    /* Navbar collapse - show on desktop */
    .navbar-collapse {
      display: block !important;
      height: auto !important;
      padding: 0 !important;
      position: static !important;
      background: transparent !important;
    }
    
    /* Navigation items - horizontal */
    .navbar-nav,
    .header-nav .nav,
    .nav.navbar-nav {
      display: flex !important;
      flex-direction: row !important;
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0.5rem !important;
    }
    
    .navbar-nav > li,
    .header-nav .nav > li,
    .nav.navbar-nav > li {
      display: inline-block !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .navbar-nav > li > a,
    .nav.navbar-nav > li > a,
    .header-nav .nav > li > a {
      padding: 0.75rem 1.2rem !important;
      display: block !important;
      font-size: 1.2rem !important;
      line-height: 1.25rem !important;
      font-weight: 700 !important;
      letter-spacing: -0.05rem !important;
    }
  }
  
  /* Search link styling */
  .header-search {
    margin: 0 !important;
    float: right !important;
  }
  
  /* Hide "SEARCH" text, show only icon */
  .header-search a,
  .header-search .btn-search {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0.75rem !important;
  }
  
  .header-search a .fa,
  .header-search a i,
  .header-search .btn-search .fa,
  .header-search .btn-search i {
    font-size: 1.2rem !important;
    line-height: 1.25rem !important;
    display: inline-block !important;
  }
  
  .header-search a .sr-only,
  .header-search .btn-search .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Hide any text content in search link */
  .header-search a span:not(.sr-only),
  .header-search .btn-search span:not(.sr-only) {
    display: none !important;
  }
  
  .header-search form {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 45px !important;
    z-index: 99 !important;
    display: none !important;
  }
  
  .header-search .searchbox {
    padding-left: 20px !important;
    padding-right: 20px !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 100% !important;
    width: 100% !important;
    height: 46px !important;
    font-size: 1.25em !important;
    background-color: #eee !important;
    color: #222 !important;
    border: none !important;
  }
  
  /* Navbar head wrapper */
  .navbar-head {
    margin-bottom: 0 !important;
  }
  
  /* Header nav section */
  .header-nav {
    background-color: #d7dbdd !important;
    width: 100% !important;
    clear: both !important;
  }
  
  /* Mobile - reposition search from header-nav to header-user */
  @media (max-width: 767px) {
    /* Hide main header-nav background */
    .header-nav {
      background: transparent !important;
      position: static !important;
      clear: none !important;
    }
  
    .container {
      max-width: 100% !important;
      }
    
    .header-nav .container {
      display: block !important;
    }
    
    /* Position the search link itself - align with mobile header bar */
    .header-nav .header-search {
      position: fixed !important;
      top: 0 !important;
      right: calc(0.5rem + 50px) !important; /* Account for container padding (0.5rem) + menu width (50px) */
      width: 50px !important;
      height: 2.9rem !important;
      z-index: 1040 !important;
      margin: 0 !important;
      float: none !important;
      display: block !important;
    }
    
    .header-nav .header-search a {
      position: static !important;
      background: #d7dbdd !important;
      width: 50px !important;
      height: 2.9rem !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0.75rem !important;
      text-align: center !important;
      margin: 0 !important;
    }
    
    .header-nav .header-search a .fa,
    .header-nav .header-search a i {
      font-size: 1.5rem !important;
      line-height: 1.5rem !important;
      margin: 0 !important;
    }
    
    /* Hide navbar collapse on mobile */
    .header-nav .navbar-collapse {
      display: none !important;
    }
    
    /* Mobile collapsed menu when toggled */
    .navbar-collapse {
      display: none !important;
      position: fixed !important;
      top: calc(2.9rem + 60px) !important;
      left: 0 !important;
      width: 100% !important;
      background-color: #000 !important;
      z-index: 1030 !important;
    }
    
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
      display: block !important;
      margin-top: 32px;
    }
    
    /* Navigation items in mobile menu */
    .navbar-nav {
      padding: 1rem 0 !important;
    }
    
    .navbar-nav > li > a {
      color: #fff !important;
      padding: 0.75rem 1rem !important;
    }
  }
  
  /* Header nav search positioning */
  .header-nav .header-search {
    display: none !important;
  }
  
  @media (min-width: 768px) {
    .header-nav .header-search .btn-search {
      position: static !important;
    }
    
    .header-nav {
      display: block !important;
    }
  }
  
  /* Navbar collapse on desktop - ensure visible */
  @media (min-width: 992px) {
    .navbar-collapse {
      display: block !important;
      height: auto !important;
      padding: 0 !important;
    }
  }
  
  /* ============================================
     LIST-INLINE - Bootstrap 3 to 5
     ============================================ */
  
  /* Bootstrap 3 .list-inline behavior */
  .list-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .list-inline > li,
  .list-inline-item {
    display: inline-block !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  
  .list-inline > li:first-child,
  .list-inline-item:first-child {
    padding-left: 0 !important;
  }
  
  /* ============================================
     STORE-SPECIFIC FIXES - RAM RECORDS
     ============================================ */
  
  /* RAM-specific header layout improvements */
  
  /* Compact header spacing for cleaner look */
  .navbar-head .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Navbar header height and layout */
  @media (min-width: 768px) {
    .navbar-header {
      float: none !important;
      height: 10.5rem !important;
      margin-bottom: -3rem !important;
      display: block !important;
    }
    
    /* Logo and social icons on same line */
    .logo {
      flex: 0 0 auto !important;
    }
    
    .header-social {
      flex: 1 1 auto !important;
      text-align: right !important;
    }
    
    /* User nav (login/cart) compact */
    .header-user .container {
      justify-content: flex-end !important;
    }
  }
  
  /* Desktop-specific adjustments for larger screens */
  @media (min-width: 992px) {
    .site-header .navbar-header {
      float: none !important;
    }
    
    .logo {
      padding: 0 !important;
      width: 260px !important;
      top: 0 !important;
    }
    
    .header-nav .nav {
      float: none !important;
    }
  }
  
  /* Sub-navigation (MERCHANDISE, DOWNLOADS, etc.) */
  .nav-section,
  .section-nav {
    margin: 0.5rem 0 !important;
  }
  
  .nav-section .nav,
  .section-nav .nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    list-style: none !important;
  }
  
  /* Clean up extra spacing */
  .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
  }
  
  /* Ensure header nav container is properly contained */
  .header-nav .container {
    position: relative !important;
  }
  
  /* Mobile navbar toggle */
  .navbar-toggle {
    position: absolute !important;
    top: 0 !important;
    right: 10px !important;
    width: 40px !important;
    border: none !important;
    background: transparent !important;
  }
  
  @media (min-width: 992px) {
    .navbar-toggle {
      display: none !important;
    }
  }
  
  /* ============================================
     MODAL FIX - Store-specific modal adjustments
     ============================================ */
  
  /* ============================================
     CRITICAL FIX: Override Bootstrap 5's pointer-events on modal-dialog
     ============================================ */
  
  /* Bootstrap 5 sets .modal-dialog { pointer-events: none } which blocks all interaction */
  .modal-dialog,
  #modal-login .modal-dialog,
  #test-modal-simple .modal-dialog {
    pointer-events: auto !important;
  }
  
  .modal-content,
  .modal-body,
  .modal-header,
  .modal-footer {
    pointer-events: auto !important;
  }
  
  .modal input,
  .modal textarea,
  .modal select,
  .modal button,
  .modal a,
  .modal .form-control {
    pointer-events: auto !important;
    cursor: text !important;
  }
  
  .modal button,
  .modal a {
    cursor: pointer !important;
  }
  
  /* Ensure modals appear above this store's fixed header */
  .modal {
    z-index: 1060 !important;
  }
  
  .modal-backdrop {
    z-index: 1055 !important;
    pointer-events: none !important;
  }
  
  /* Lower header z-index when modal is open */
  body.modal-open .sticky .header-user,
  body.modal-open .header-user,
  body.modal-open .navbar-collapse {
    z-index: 1000 !important;
  }
  
  /* ============================================
     Account Dropdown Styling
     ============================================ */
  
  /* Dropdown container */
  .nav-account .dropdown {
    display: inline-block;
  }
  
  .nav-account .dropdown-toggle::after {
    margin-left: 5px;
    vertical-align: middle;
  }
  
  /* Dropdown menu */
  .nav-account .dropdown-menu {
    min-width: 180px;
    padding: 8px 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    display: none;
  }
  
  .nav-account .dropdown-menu.show {
    display: block !important;
  }
  
  .nav-account .dropdown-item {
    padding: 8px 20px;
    color: #333;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
  }
  
  .nav-account .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #000;
  }
  
  .nav-account .dropdown-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
  }
  
  .nav-account .dropdown-divider {
    height: 0;
    margin: 8px 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
  }
  
  /* Mobile dropdown positioning */
  @media (max-width: 767px) {
    .nav-account .dropdown-menu {
      right: 0;
      left: auto;
    }
  }
  
  /* ============================================
     Artist Page - Fix overlay-link positioning
     ============================================ */
  
  /* Make the artist artwork container relative for absolute positioning */
  .artwork-view.artist {
    position: relative !important;
  }
  
  /* Constrain the overlay link to just the thumbnail-item */
  .artwork-view.artist .overlay-link {
    position: absolute !important;
    top: 0 !important;
    left: 15px !important;
    right: 15px !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    z-index: 10 !important;
  }
  
  /* Make the overlay link cover only the thumbnail-item height */
  .artwork-view.artist .thumbnail-item {
    position: relative !important;
  }
  
  /* Adjust overlay link to match thumbnail height */
  .artwork-view.artist .overlay-link {
    height: 100% !important;
    bottom: 0 !important;
  }
  
  /* ============================================
     Product Pages - Fix Image Overflow
     ============================================ */
  
  /* Ensure product images stay within their containers */
  .artwork-view .thumbnail-item {
    overflow: hidden !important;
  }
  
  .artwork-view .thumbnail-item-img-link {
    display: block !important;
    overflow: hidden !important;
  }
  
  .artwork-view .thumbnail-item-img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Bootstrap 5 - Ensure img-responsive class works like img-fluid */
  .img-responsive {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Fix thumbnail item sizing */
  .thumbnail-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .thumbnail-item-caption {
    flex-shrink: 0 !important;
    /* padding: 1rem !important; */
    height: 70px;
  }
  
  /* ============================================
     News Pages - Bootstrap 5 Layout Fixes
     ============================================ */
  
  /* Featured news styling */
  #featured-news {
    background-color: rgba(0,0,0,0.07);
    margin-bottom: 2rem;
    padding: 1rem;
  }
  
  #featured-news img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }
  
  /* News items */
  .news-item {
    margin-bottom: 1.5rem;
    background-color: rgba(0,0,0,0.07);
    padding: 1rem;
  }
  
  .news-item h3 {
    margin: 0.5rem 0;
    font-size: 1.25rem;
  }
  
  .news-item p {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }
  
  .news-thumb-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }
  
  /* Related news section */
  .related-news {
    margin-top: 2rem;
  }
  
  .related-news h2 {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0,0,0,0.1);
  }
  
  .related-news .row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.22);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
  
  .related-news .row:last-child {
    border-bottom: none;
  }
  
  .related-news .thumbnail-item {
    margin-bottom: 1rem;
  }
  
  .related-news .news-short,
  .related-news .feature-short {
    color: rgba(0, 0, 0, 0.65);
    padding-left: 0;
    padding-top: 0;
  }
  
  /* Latest news sidebar */
  .latest-news {
    margin-bottom: 2rem;
  }
  
  .latest-news h2 {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0,0,0,0.1);
  }
  
  /* Bootstrap 5 - Recreate removed .media component for news */
  .media-news {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 1.5rem !important;
    padding: 1rem !important;
    background-color: rgba(0,0,0,0.05) !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
  }
  
  .media-news:hover {
    background-color: rgba(0,0,0,0.08) !important;
  }
  
  .media-news a {
    display: flex !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important;
  }
  
  .media-news .media-left {
    flex-shrink: 0 !important;
    margin-right: 1rem !important;
  }
  
  .media-news .media-left img {
    max-width: 100px !important;
    height: auto !important;
    border-radius: 4px !important;
  }
  
  .media-news .media-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .media-news .media-heading {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.4 !important;
  }
  
  .media-news .media-heading small {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    margin-top: 0.25rem !important;
    color: rgba(0, 0, 0, 0.65) !important;
  }
  
  /* Make sure media-object images are responsive */
  .media-object {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Responsive adjustments */
  @media (min-width: 768px) {
    .news-item .col-md-8 {
      padding-left: 0;
      padding-top: 0;
    }
    
    .news-thumb-image {
      max-width: 153px;
      max-height: 153px;
    }
  }
  
  @media (max-width: 767px) {
    #featured-news {
      margin-right: 0;
    }
    
    .news-item {
      margin-right: 0;
    }
  }
  
  /* Ensure reCAPTCHA doesn't block modal interaction */
  .grecaptcha-badge {
    z-index: 1050 !important;
    pointer-events: none !important;
  }
  
  /* But allow pointer events on the reCAPTCHA badge itself when needed */
  .grecaptcha-badge iframe {
    pointer-events: auto !important;
  }
  
  /* Ensure old #mask overlay never blocks Bootstrap modals */
  #mask {
    z-index: 900 !important; /* Below modal backdrop (1055) and modal (1060) */
    pointer-events: none !important;
  }
  
  /* Hide old #mask overlay when Bootstrap modals are open */
  body.modal-open #mask {
    display: none !important;
  }
  
  /* Ensure old window system doesn't interfere with Bootstrap modals */
  body.modal-open .window {
    z-index: 900 !important;
  }
  
  .window {
    pointer-events: none !important;
  }