.elementor-9577 .elementor-element.elementor-element-34cda4c{--display:flex;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-9577 .elementor-element.elementor-element-34cda4c:not(.elementor-motion-effects-element-type-background), .elementor-9577 .elementor-element.elementor-element-34cda4c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1A1A2E;}.elementor-9577 .elementor-element.elementor-element-72e79be{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9577 .elementor-element.elementor-element-1f65da6{text-align:center;}.elementor-9577 .elementor-element.elementor-element-1f65da6 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;color:#FFFFFF;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-4e787b5 *//* --- MY ACCOUNT PAGE UI STYLING (THEME OVERRIDE) --- */

/* Force the main wrapper to stay side-by-side on desktop */
.woocommerce-account .woocommerce {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 30px !important;
  width: 100% !important;
}

/* LEFT SIDE: Navigation Menu */
.woocommerce-account .woocommerce-MyAccount-navigation {
  flex: 0 0 250px !important; /* Strictly lock the width to 250px */
  max-width: 250px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #1a1a2e !important; 
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #333 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 15px 20px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

/* Hover and Active states for the menu */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: #c8963e !important; 
  color: #ffffff !important;
  padding-left: 25px !important; /* Slide effect for desktop */
}

/* RIGHT SIDE: Content Area */
.woocommerce-account .woocommerce-MyAccount-content {
  flex: 1 !important; /* Take up all the remaining space */
  width: 100% !important;
  margin: 0 !important;
  background: #1a1a2e !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 30px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

/* Style the buttons */
.woocommerce-account .woocommerce-MyAccount-content .button {
  background: #c8963e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: bold !important;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover {
  background: #b38535 !important; 
}

/* Tables */
.woocommerce-account table.shop_table {
  border: 1px solid #444 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.woocommerce-account table.shop_table th, 
.woocommerce-account table.shop_table td {
  border: 1px solid #444 !important;
  padding: 12px !important;
  color: #fff !important;
}

/* =========================================
   MOBILE FIXES (Screens smaller than 768px)
   ========================================= */
@media (max-width: 768px) {
  /* Stack them vertically */
  .woocommerce-account .woocommerce {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* Make both boxes full width */
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 100% !important; 
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Adjust right side padding for small screens */
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: 15px !important;
  }

  /* Center the menu text & disable the slide effect so it looks like a native app menu */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    text-align: center !important;
    padding: 15px !important;
  }
  
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    padding-left: 15px !important; /* Overrides the 25px slide effect */
  }
}/* =========================================
   MY ACCOUNT: TEXT & OVERFLOW FIXES
   ========================================= */

/* 1. FIX THE FADING RED LINKS */
/* Forces all links (like Order Numbers) to be your readable brand gold */
.woocommerce-account .woocommerce-MyAccount-content a {
  color: #c8963e !important; 
  font-weight: 600 !important;
  text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* 2. FIX TEXT OVERFLOW (Keep everything inside the boxes) */
/* Forces every single element to respect the boundaries of your screen */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content * {
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 3. STYLE THE ADDRESS BOXES */
/* Gives the address text breathing room so it doesn't touch the edges */
.woocommerce-account .woocommerce-MyAccount-content address {
  background: #11111f !important; /* Slightly darker than the main box for a cool card effect */
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  font-style: normal !important;
  line-height: 1.8 !important;
  margin-top: 15px !important;
  width: 100% !important;
}

/* Make headers inside the content a bit more proportionate on mobile */
.woocommerce-account .woocommerce-MyAccount-content h3 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  color: #ffffff !important;
}

/* 4. FIX MOBILE TABLES (Order History) */
/* Stops the Orders table from stretching your website sideways on phones */
@media (max-width: 768px) {
  .woocommerce-account table.shop_table {
    display: block !important;
    overflow-x: auto !important; /* Allows users to swipe left/right on the table */
    width: 100% !important;
    border: none !important;
  }
}/* End custom CSS */