/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
body,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a,
.nav > li > a{
    font-family: "Figtree", sans-serif !important;
    font-optical-sizing: auto;
    color: #000000;
    font-size: 16px;
    font-weight: 600 !important;
}
.nav-dropdown-default .nav-column li>a, .nav-dropdown.nav-dropdown-default>li>a {
    border-bottom: 1px dotted #b8b8b8;
    color: #000000;
    font-family: "Figtree", sans-serif !important;
    font-optical-sizing: auto;
    font-size: 14px;
    font-weight: 500 !important;
}
p.name.product-title.woocommerce-loop-product__title {
    font-family: "Geist", sans-serif !important;
    font-weight: 600 !important;
    font-style: normal;
    font-size: 15.4px !important;
    color: #000000 !important;
}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
    color: #000000 !important;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5em;
    margin-top: 0;
    text-rendering: optimizeSpeed;
    width: 100%;
}
h1,.text.home-pageh2 h2{ font-size:44px !important; line-height:1.3 !important;color: #000000 !important; }
h1.product-title.product_title.entry-title{
  font-size:24px !important; line-height:1.3 important;
}

h2{ font-size:22px !important; line-height:1.3 !important;}
h3{ font-size:20px !important; line-height:1.3 !important;}
h4{ font-size:18px !important; line-height:1.3 !important;}
p,.yocan-footer .menu a,.policy,ul.yocan-iwt__list {
  font-family: "Geist", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal;
}
.mbx-padd {
    padding: 10px 20px !important;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
  h1{ font-size:28px !important; line-height:1.2 !important; }
  h2{ font-size:24px !important; line-height:1.25 !important; }
  h3{ font-size:20px !important; line-height:1.3 !important; }
  h4{ font-size:18px !important; line-height:1.35 !important; }

}

/* woo Nav css */
/* =========================================================
   Shopify-like My Account (Flatsome/Woo) - Unified
========================================================= */

/* ---- Layout (account page) ---- */
.woocommerce-account .woocommerce{
  display:flex;
  gap:28px;
  align-items:flex-start;
}
.woocommerce-account .woocommerce-MyAccount-content{ flex:1 1 auto; min-width:0; }

/* ---- Remove account user block if still exists somewhere ---- */
.woocommerce-account .account-user{ display:none !important; }

/* =========================================================
   Left Nav: .tw-accnav (strong override)
========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav{
  width:240px !important;
  flex:0 0 240px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  position:sticky !important;
  top:18px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item{
  margin:0 !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item:last-child{
  border-bottom:0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__link{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;

  padding:14px 12px 14px 14px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  text-decoration:none !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:rgba(17,17,17,.90) !important;

  position:relative !important;
  transition:background .15s ease,color .15s ease !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__link:hover{
  background:rgba(0,0,0,.03) !important;
  color:#111 !important;
}

/* active */
.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item.is-active > .tw-accnav__link{
  background:rgba(0,0,0,.04) !important;
  color:#111 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item.is-active > .tw-accnav__link::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:10px !important;
  bottom:10px !important;
  width:3px !important;
  border-radius:3px !important;
  background:#111 !important;
}

/* =========================================================
   Auth (login/register) - .tw-auth
========================================================= */
.tw-auth{
  --tw-radius: 12px;
  --tw-border: rgba(0,0,0,.10);
  --tw-text: #111;
  --tw-muted: rgba(17,17,17,.65);
  --tw-bg: #fff;
}

/* Titles */
.tw-auth .tw-auth__loginTitle,
.tw-auth .tw-auth__registerTitle,
.tw-auth .tw-auth__title{
  margin:0 0 14px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--tw-text) !important;
}

/* Inputs (strong override) */
.tw-auth input[type="text"],
.tw-auth input[type="email"],
.tw-auth input[type="password"]{
  width:100% !important;
  height:46px !important;
  padding:0 12px !important;
  border:1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
  background:#fff !important;
  box-shadow:none !important;
  outline:none !important;
}
.tw-auth input:focus{
  border-color: rgba(17,17,17,.45) !important;
}

/* Buttons */
.tw-auth button.button,
.tw-auth .button{
  border-radius: var(--tw-radius) !important;
  height:46px !important;
  padding:0 16px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

/* Actions row */
.tw-auth .tw-auth__actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.tw-auth .tw-auth__remember{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
}
.tw-auth .tw-auth__lost a{
  color: rgba(17,17,17,.75) !important;
  text-decoration:underline !important;
  text-underline-offset: 3px;
}

/* Register hint */
.tw-auth .tw-auth__hint{
  color: var(--tw-muted) !important;
  margin: 0 0 14px !important;
}

/* Lightbox/panels keep spacing clean */
.tw-auth .account-login-inner,
.tw-auth .account-register-inner{
  background: transparent !important;
}

/* =========================================================
   Mobile: nav tabs + auth stacking
========================================================= */
@media (max-width: 849px){
  .woocommerce-account .woocommerce{
    flex-direction:column;
    gap:12px;
  }
  body.single-product .small-12.small-12{
  padding:0 10px !important;
  box-sizing:border-box !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav{
    width:100% !important;
    flex:1 1 auto !important;
    position:relative !important;
    top:auto !important;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__list{
    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:10px 0 !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item{
    border-bottom:0 !important;
    flex:0 0 auto !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__link{
    padding:10px 12px !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.03) !important;
    white-space:nowrap !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item.is-active > .tw-accnav__link{
    background:rgba(0,0,0,.08) !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation.tw-accnav .tw-accnav__item.is-active > .tw-accnav__link::before{
    display:none !important;
  }

  .tw-auth .tw-auth__actions{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .tw-auth .tw-auth__actions button{
    width:100% !important;
  }
}

/* 确认密码样式 */
/* =========================================================
   TW Reset Password UI (Match lost-password style)
   Page: /my-account/lost-password/?show-reset-form=true&action=...
   DOM: form.woocommerce-ResetPassword.lost_reset_password
========================================================= */

:root{
  --twlp-text:#111;
  --twlp-muted:rgba(17,17,17,.65);
  --twlp-border:rgba(0,0,0,.12);
}

/* 只影响 reset 这个 form，不污染其它 my-account */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password{
  max-width:520px !important;
  margin:0 auto !important;
  padding:20px 0 !important;
}

/* 隐藏 Woo 默认 notices（跟你之前一致） */
.page-wrapper.my-account .woocommerce-notices-wrapper,
.page-wrapper.my-account .woocommerce-error,
.page-wrapper.my-account .woocommerce-message,
.page-wrapper.my-account .woocommerce-info{
  display:none !important;
}

/* 顶部说明文案：12px / 400（同你副标题风格） */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password > p:first-of-type{
  margin:8px 0 14px 0 !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  color:var(--twlp-muted) !important;
}

/* ✅ 强制 row 间距：解决“输入框之间没 gap” */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password p.form-row{
  margin:0 0 12px 0 !important;
  padding:0 !important;
}

/* label 同你之前的 label 质感 */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password label{
  display:block !important;
  margin:0 0 8px 0 !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:var(--twlp-muted) !important;
}

/* password-input 包裹：让 input + 眼睛按钮水平对齐 */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password .password-input{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
}

/* ✅ 输入框（桌面 40px）——完全按你之前输入框风格 */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password input.woocommerce-Input.woocommerce-Input--text.input-text{
  flex:1 1 auto !important;
  width:100% !important;
  height:40px !important;
  padding:0 14px !important;

  border:1px solid var(--twlp-border) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--twlp-text) !important;

  font:400 16px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial !important;

  outline:none !important;
  box-shadow:none !important;
  -webkit-appearance:none !important;

  margin:0 !important;
}

/* focus 同你之前那套 */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password input.woocommerce-Input.woocommerce-Input--text.input-text:focus{
  border-color:rgba(0,0,0,.28) !important;
  box-shadow:0 0 0 4px rgba(0,0,0,.06) !important;
}

/* 眼睛按钮：跟随输入高度（桌面 40px） */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password button.show-password-input{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;

  border-radius:10px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background:rgba(0,0,0,.03) !important;

  padding:0 !important;
  margin:0 !important;

  cursor:pointer !important;
  box-shadow:none !important;
  -webkit-appearance:none !important;
}

/* 有些主题用 :before 渲染 icon，这里让它更稳定 */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password button.show-password-input:before{
  font-size:18px !important;
}

/* 提交按钮：同你之前的黑底白字按钮（桌面 40px） */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button{
  width:100% !important;
  height:40px !important;
  padding:0 18px !important;

  border-radius:8px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  background:#111 !important;
  color:#fff !important;

  cursor:pointer !important;
  user-select:none !important;

  font:600 15px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial !important;
  letter-spacing:.2px !important;

  box-shadow:none !important;
  text-transform:none !important;
  margin:0 !important;
}

.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button[disabled]{
  opacity:.55 !important;
  cursor:not-allowed !important;
}

/* 清掉 Woo 的 clear 占位 */
.page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password .clear{
  display:none !important;
}

/* =========================================================
   Mobile: panel centered + 20px outer margin
========================================================= */
@media (max-width: 849px){
  /* ✅ 最稳的 20px 外边距：给 main container 加 padding */
  .page-wrapper.my-account .container[role="main"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    padding:18px 0 !important;
  }

  /* 移动端更好按（保持你之前的移动端风格） */
  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password input.woocommerce-Input.woocommerce-Input--text.input-text{
    height:52px !important;
    font-size:18px !important;
  }

  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password button.show-password-input{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }

  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password button.woocommerce-Button.button{
    height:52px !important;
    font-size:16px !important;
  }
}
/* ✅ PC 两个输入框中间加间距（不改 form 布局，最稳） */
@media (min-width: 850px){

  /* 先清掉主题可能的 float 干扰 */
  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password
  p.form-row-first,
  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password
  p.form-row-last{
    float:none !important;
    display:inline-block !important;
    vertical-align:top !important;

    /* 中间 gap = 12px */
    width:calc(50% - 6px) !important;

    margin:0 0 12px 0 !important; /* 与下一行 gap */
    padding:0 !important;
    box-sizing:border-box !important;
  }

  /* 给左右两列各自留出一半间距 */
  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password
  p.form-row-first{
    padding-right:12px !important;
  }

  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password
  p.form-row-last{
    padding-left:12px !important;
  }

  /* 防止 password-input 被挤压，保持 input + eye 同行 */
  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password
  .password-input{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
  }

  /* Save 那一行一定独占整行 */
  .page-wrapper.my-account .woocommerce form.woocommerce-ResetPassword.lost_reset_password
  p.form-row:not(.form-row-first):not(.form-row-last){
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }
}