.elementor-11 .elementor-element.elementor-element-3ecaf9f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}/* Start custom CSS for container, class: .elementor-element-3ecaf9f */@media (max-width: 767px){
  .woocommerce-account .woocommerce{
    flex-direction: column;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    width: 100%;
    flex-basis: auto;
  }
}

/* 1) Force Woo My Account into two columns */
.woocommerce-account .woocommerce{
  display:flex !important;
  gap:30px !important;
  align-items:flex-start !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation{
  width:260px !important;
  flex:0 0 260px !important;
}

.woocommerce-account .woocommerce-MyAccount-content{
  flex:1 !important;
  min-width:0 !important;
}

/* 2) STOP the text overlap/overprint inside the content area */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content *{
  position: static !important;
  float: none !important;
  clear: none !important;
  transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.6 !important;
}

/* 3) Make sure paragraph text displays normally */
.woocommerce-account .woocommerce-MyAccount-content p{
  display:block !important;
  margin: 0 0 14px 0 !important;
}

/* 4) Mobile stack */
@media (max-width: 767px){
  .woocommerce-account .woocommerce{
    flex-direction:column !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    width:100% !important;
    flex:0 0 auto !important;
  }
}
/* Fix WooCommerce Account Details help text overlap */
.woocommerce-account .woocommerce-MyAccount-content em,
.woocommerce-account .woocommerce-MyAccount-content i,
.woocommerce-account .woocommerce-MyAccount-content .description,
.woocommerce-account .woocommerce-MyAccount-content span.description{
  position: static !important;
  display: block !important;
  margin-top: 6px !important;
  margin-bottom: 14px !important;
  font-style: normal !important;
  clear: both !important;
}

/* Ensure form rows stack correctly */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row{
  position: static !important;
  display: block !important;
  margin-bottom: 18px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm{
  display: block;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last{
  width: 48% !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-first{
  float: left !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last{
  float: right !important;
}

@media (max-width: 767px){
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last{
    width: 100% !important;
    float: none !important;
  }
}

/* Fix broken / stacked labels in My Account forms */
.woocommerce-account .woocommerce-MyAccount-content label{
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}

/* Ensure form rows don't squeeze labels */
.woocommerce-account .woocommerce-MyAccount-content .form-row{
  width: 100% !important;
  clear: both !important;
}

/* Keep First/Last name side-by-side on desktop */
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last{
  width: 48% !important;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-first{
  float: left !important;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-last{
  float: right !important;
}

/* Stack on mobile */
@media (max-width: 767px){
  .woocommerce-account .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content .form-row-last{
    width: 100% !important;
    float: none !important;
  }
}

/* Make Edit Account form use a grid so First/Last name align */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 24px !important;
  row-gap: 18px !important;
}

/* Ensure each form row behaves */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .form-row{
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

/* Put full-width fields across both columns */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .form-row-wide{
  grid-column: 1 / -1 !important;
}

/* First + Last name each take one column */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .form-row-first{
  grid-column: 1 !important;
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .form-row-last{
  grid-column: 2 !important;
}

/* Stack on mobile */
@media (max-width: 767px){
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm{
    grid-template-columns: 1fr !important;
  }
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm .form-row-last{
    grid-column: 1 / -1 !important;
  }
}

/* ===== MY ACCOUNT SIDEBAR ===== */
/* ===== REMOVE GREEN BLOCK BACKGROUND ===== */
.woocommerce-account .woocommerce-MyAccount-navigation ul li{
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 14px;
}

/* remove theme highlight layer */
.woocommerce-account .woocommerce-MyAccount-navigation{
    background: transparent !important;
}

/* ===== MENU BUTTON STYLE ===== */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
    background: #3a1607 !important;  /* brown */
    color: #fff !important;
    padding: 16px 20px !important;
    display: block;
    border-radius: 12px;
    font-weight: 600;
    transition: .25s;
}

/* active item */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{
    background: #ff6a00 !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(255,106,0,.35);
}

/* hover */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
    background: #ff6a00 !important;
    color: #fff !important;
}

/* remove list bullets */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
    list-style: none;
    padding: 0;
}
/* menu buttons */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  background: #2b160a !important;     /* dark brown */
  color: #fff !important;
  padding: 16px 20px !important;
  display: block;
  margin-bottom: 14px;
  border-radius: 10px;
  font-weight: 600;
  transition: .25s;
}

/* hover */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
  background: #ff6a00 !important;
  color: #fff !important;
}

/* active tab */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{
  background: #ff6a00 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255,106,0,.35);
}

/* remove bullet points */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style: none;
  padding: 0;
}


/* ===== FORM FIELDS ===== */
.woocommerce-account input,
.woocommerce-account textarea,
.woocommerce-account select{
  border-radius: 10px !important;
  border: 1px solid #e1e1e1 !important;
  padding: 14px !important;
  background: #fafafa !important;
}

/* focus glow */
.woocommerce-account input:focus,
.woocommerce-account textarea:focus{
  border-color: #ff6a00 !important;
  box-shadow: 0 0 0 2px rgba(255,106,0,.15);
}


/* ===== SAVE BUTTON ===== */
.woocommerce-account button,
.woocommerce-account .button{
  background: #ff6a00 !important;
  border: none !important;
  color: #fff !important;
  padding: 16px 28px !important;
  border-radius: 12px !important;
  font-weight: 700;
  transition: .25s;
}

/* hover */
.woocommerce-account button:hover,
.woocommerce-account .button:hover{
  background: #e55e00 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,106,0,.3);
}


/* Hide banner only on My Account page */
.page-id-11 .banner-image{
    display:none !important;
}

/* Fix register/login layout + overlap */
.woocommerce form .form-row{
  display:block !important;
  width:100% !important;
  margin:0 0 15px !important;
  float:none !important;
  clear:both !important;
}

.woocommerce form .form-row label{
  display:block !important;
  margin:0 0 6px !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100% !important;
  box-sizing:border-box !important;
}

/* Make login + register columns align nicely */
.woocommerce-account .col2-set{
  display:flex !important;
  gap:40px !important;
  align-items:flex-start !important;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2{
  flex:1 !important;
  width:auto !important;
}

/* Clean paragraph spacing in register box */
.woocommerce form.register p,
.woocommerce form.login p{
  margin:10px 0 !important;
  line-height:1.5 !important;
}


/* ✅ Mobile: stack Login + Register (My Account) */
@media (max-width: 767px){

  .woocommerce-account .col2-set{
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  .woocommerce-account .col2-set .col-1,
  .woocommerce-account .col2-set .col-2{
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  /* optional: stop any horizontal scrolling */
  .woocommerce-account .woocommerce{
    overflow-x: hidden !important;
  }

  /* make fields full width */
  .woocommerce-account form.login,
  .woocommerce-account form.register{
    width: 100% !important;
  }

  .woocommerce-account input.input-text,
  .woocommerce-account select,
  .woocommerce-account textarea{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Fix password visibility icon inside fields */
.woocommerce-account .password-input{
    position: relative;
}

.woocommerce-account .password-input button,
.woocommerce-account .show-password-input{
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    box-shadow: none !important;
}

/* Prevent overlap with icon */
.woocommerce-account .password-input input{
    padding-right: 40px !important;
}

/* Password field wrapper */
.woocommerce-account .woocommerce-EditAccountForm .password-input{
    position: relative !important;
    display: block;
}

/* Eye icon positioning */
.woocommerce-account .woocommerce-EditAccountForm .password-input button,
.woocommerce-account .woocommerce-EditAccountForm .show-password-input{
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}

/* Add space for icon */
.woocommerce-account .woocommerce-EditAccountForm .password-input input{
    padding-right: 40px !important;
}
/* Remove orange background behind menu icon on My Account page */
.woocommerce-account .elementor-menu-toggle{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure icon stays white */
.woocommerce-account .elementor-menu-toggle i,
.woocommerce-account .elementor-menu-toggle svg{
    color: #ffffff !important
    ;
}/* End custom CSS */