/* ============================================================================
   header-footer.css  —  去 Bootstrap 版 Header / Footer 作用域样式
   ----------------------------------------------------------------------------
   目标：Header/Footer 不再依赖 bootstrap.min.css（栅格 container/row/col-*、
   工具类 d-flex/justify/align/ms-auto/pt-5、组件 navbar / collapse / btn）。
   全部改用作用域类 .crhf-* + 原生 Flex/Grid 手写，桌面端(≥992)与移动端(≤991)
   视觉/布局与原 Bootstrap 版本像素级一致（Playwright 双视口计算样式 0 差异验证）。

   保留的主题类（非 Bootstrap，继续由 main.css / mobile.css 提供样式）：
   .header .header-middle .navbar-cart .main-menu-search .navbar-search
   .mega-category-menu .sub-category .inner-sub-category .nav-inner .nav-social
   .dd-menu .sub-menu .footer .footer-top/-middle/-bottom .single-footer
   .footer-newsletter .newsletter-form .payment-gateway* .socila .copyright .scroll-top
   ============================================================================ */

/* ---------- 栅格：container（复刻 bootstrap + main.css 覆盖） ---------- */
/* mobile.css 在 ≤991 用 .container{max-width:100%!important;padding:12} 覆盖了
   bootstrap 的 540/720 断点，故基线 max-width 直接取 100%，仅 ≥992 逐档放大。 */
.crhf-container{
  width:100%;
  padding-left:12px;
  padding-right:12px;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  box-sizing:border-box;
}
@media (min-width:992px){ .crhf-container{ max-width:1080px; } }
@media (min-width:1200px){ .crhf-container{ max-width:1180px; } }
@media (min-width:1300px){ .crhf-container{ max-width:1280px; } }
@media (min-width:1400px){ .crhf-container{ max-width:1380px; } }

/* ---------- 栅格：row + 列基线（复刻 bootstrap .row / .row>*） ---------- */
.crhf-row{
  display:flex;
  flex-wrap:wrap;
  margin-top:0;
  margin-right:-12px;
  margin-left:-12px;
}
.crhf-row--ac{ align-items:center; }
.crhf-row > *{
  box-sizing:border-box;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-right:12px;
  padding-left:12px;
  margin-top:0;
}
/* 嵌套 row（f-link 内） */
.crhf-frow{
  display:flex;
  flex-wrap:wrap;
  margin-top:0;
  margin-right:-12px;
  margin-left:-12px;
}
.crhf-frow > *{
  box-sizing:border-box;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-right:12px;
  padding-left:12px;
  margin-top:0;
}

/* ---------- 列宽（桌面 ≥992，复刻 col-lg-*） ---------- */
@media (min-width:992px){
  .crhf-col-notice{ flex:0 0 auto; width:100%; }
  .crhf-col-logo{ flex:0 0 auto; width:25%; }
  .crhf-col-search{ flex:0 0 auto; width:41.66666667%; }
  .crhf-col-cart{ flex:0 0 auto; width:33.33333333%; }
  .crhf-col-nav{ flex:0 0 auto; width:75%; }
  .crhf-col-social{ flex:0 0 auto; width:25%; }
  .crhf-fcol-logo{ flex:0 0 auto; width:25%; }
  .crhf-fcol-news{ flex:0 0 auto; width:75%; }
  .crhf-fcol-widget{ flex:0 0 auto; width:33.33333333%; }
  .crhf-fcol-link{ flex:0 0 auto; width:50%; }
  .crhf-fcol-bottom{ flex:0 0 auto; width:33.33333333%; }
}

/* ---------- 工具类替代 ---------- */
.crhf-col-notice{ display:flex; justify-content:center; }
.header .crhf-search-btn-a{ display:flex; justify-content:center; align-items:center; }
/* 复刻 bootstrap .d-flex/.align-items-center/.justify-content-between（均带 !important） */
.crhf-acct-msg{ display:flex !important; align-items:center !important; justify-content:space-between !important; }
.crhf-pt5{ padding-top:5px; }
.crhf-ptb20{ padding-top:20px; padding-bottom:20px; }

/* ============================================================================
   Header 桌面 navbar（复刻 main.css 3381-3651，重命名 Bootstrap 类）
   .navbar->.crhf-navbar  .navbar-collapse->.crhf-navbar-collapse
   .navbar-nav->.crhf-navbar-nav  .nav-item->.crhf-nav-item  .navbar-brand->.crhf-navbar-brand
   （≤991 桌面 header 整体 display:none，故只需桌面行为）
   ============================================================================ */
.header .crhf-navbar-brand{
  display:inline-block;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:0;
  padding-right:0;
  margin:0;
  font-size:20px;
  line-height:inherit;
  white-space:nowrap;
  text-decoration:none;
  border-radius:0;
}
.header .crhf-navbar-brand img{ width:120px; }

.crhf-navbar{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  transition:all 0.3s ease-out 0s;
}
.crhf-navbar-collapse{
  display:flex;
  flex-basis:auto;
  flex-grow:1;
  align-items:center;
}
.crhf-navbar-nav{
  display:flex;
  flex-direction:row;
  padding-left:0;
  margin:0;
  margin-right:auto;
  list-style:none;
}

.crhf-navbar-nav .crhf-nav-item{
  z-index:1;
  position:relative;
  margin-right:40px;
}
/* 顶层项为 flex 子项，被 blockify 为 block（仅直接子项，子菜单 li 保持 list-item） */
.crhf-navbar-nav > .crhf-nav-item{ display:block; }
.crhf-navbar-nav .crhf-nav-item:last-child{ margin-right:0 !important; }
.crhf-navbar-nav .crhf-nav-item:hover a{ color:#0167F3; }
.crhf-navbar-nav .crhf-nav-item a{
  font-size:14px;
  color:#162657;
  transition:all 0.3s ease-out 0s;
  position:relative;
  padding:20px 0;
  display:inline-flex;
  align-items:center;
  font-weight:600;
  text-transform:capitalize;
}
.crhf-navbar-nav .crhf-nav-item:hover .dd-menu::before{
  border-bottom-color:#0167F3;
  border-right-color:#0167F3;
}
.crhf-navbar-nav .crhf-nav-item a.active{ color:#0167F3; }
.crhf-navbar-nav .crhf-nav-item a.dd-menu::after{
  content:"\ea5e";
  font:normal normal normal 1em/1 "LineIcons";
  position:absolute;
  right:-20px;
  font-size:12px;
  top:50%;
  margin-left:5px;
  margin-top:-4px;
  transition:all 0.3s ease-out 0s;
  height:10px;
}
.crhf-navbar-nav .crhf-nav-item:hover > .sub-menu{
  top:100%;
  opacity:1;
  visibility:visible;
}
.crhf-navbar-nav .crhf-nav-item:hover > .sub-menu .sub-menu{ left:100%; top:0; }
.crhf-navbar-nav .crhf-nav-item .sub-menu{
  padding:10px 30px 30px;
  min-width:240px;
  background:#fff;
  border:1px solid #eee;
  position:absolute;
  top:110% !important;
  left:0;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease-out 0s;
  border-radius:0 0 4px 4px;
}
.crhf-navbar-nav .crhf-nav-item:hover .sub-menu{ top:100% !important; }
.crhf-navbar-nav .crhf-nav-item .sub-menu .crhf-nav-item{ width:100%; margin-bottom:15px; }
.crhf-navbar-nav .crhf-nav-item .sub-menu .crhf-nav-item:last-child{ margin:0; }
.crhf-navbar-nav .crhf-nav-item .sub-menu .crhf-nav-item a{
  padding:0;
  color:#888;
  display:block;
  width:100%;
  font-size:14px;
  font-weight:500;
  text-transform:capitalize;
  position:relative;
  z-index:1;
  border-radius:4px;
  overflow:hidden;
  transition:all 0.1s ease;
}
.crhf-navbar-nav .crhf-nav-item .sub-menu .crhf-nav-item a:hover{ color:#0167F3; }
.crhf-navbar-nav .crhf-nav-item .sub-menu > li{ display:block; margin-left:0; }
.crhf-navbar-nav .crhf-nav-item .sub-menu > li:last-child{ border:none; }
.crhf-navbar-nav .crhf-nav-item .sub-menu > li.active > a{ color:#0167F3 !important; }
.crhf-navbar-nav .crhf-nav-item .sub-menu > li > a{
  font-weight:400;
  display:block;
  padding:12px 15px;
  font-size:14px;
  color:#222;
}
.crhf-navbar-nav .crhf-nav-item .sub-menu > li:first-child a{ border:none; }

/* ============================================================================
   Footer 订阅按钮（.btn -> .crhf-btn，复刻 bootstrap .btn base + main.css 覆盖）
   ============================================================================ */
.footer .footer-top .footer-newsletter .newsletter-form .button .crhf-btn{
  /* bootstrap .btn 基线中未被主题覆盖、且计算值需保留的部分 */
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  cursor:pointer;
  user-select:none;
  /* main.css .button .btn（1763）主题外观 */
  display:inline-block;
  text-transform:capitalize;
  font-size:14px;
  font-weight:600;
  padding:13px 30px;
  background-color:#0167F3;
  color:#fff;
  border:none;
  border-radius:3px;
  position:relative;
  top:0;right:0;bottom:0;left:0;
  z-index:1;
  overflow:hidden;
  transition:0.2s;
  /* main.css .footer...button .btn（9122） */
  height:50px;
}
.footer .footer-top .footer-newsletter .newsletter-form .button .crhf-btn:hover{
  color:#162657;
  background-color:#fff;
}

/* ============================================================================
   Footer 移动端(≤991)：复刻 mobile.css 中原键控在 .row / .col-lg-* 的规则
   （改键控到新作用域列类）
   ============================================================================ */
@media (max-width:991px){
  /* 全局 gutter：mobile.css 把 .row 边距/.col 内边距降为 6px（对应 crhf 类） */
  .crhf-row, .crhf-frow{ margin-left:-6px; margin-right:-6px; }
  .crhf-row > *, .crhf-frow > *{ padding-left:6px; padding-right:6px; }

  /* 订阅按钮：mobile.css .footer .newsletter-form .button .btn（2011）对应 crhf-btn
     全宽 flex 居中、48 高、圆角 8、显示字体。长选择器保证覆盖桌面基线规则。 */
  .footer .footer-top .footer-newsletter .newsletter-form .button .crhf-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:48px;
    padding:0;
    background:var(--cr-mobile-accent);
    color:#ffffff;
    border:0;
    border-radius:8px;
    font-family:var(--cr-font-display);
    font-size:16px;
    font-weight:600;
    line-height:1;
    text-align:center;
    min-width:auto;
    min-height:48px;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .footer .footer-top .footer-newsletter .newsletter-form .button .crhf-btn .dir-part{ display:none; }
  .footer .footer-top .footer-newsletter .newsletter-form .button .crhf-btn:active{ background:#0052CC; transform:scale(0.98); }

  /* single-footer 直接子 row（f-link）：解除桌面折叠限制（对应 mobile.css 2085） */
  .single-footer > .crhf-frow{ max-height:none; overflow:visible; transition:none; }

  /* footer-top: logo 居中 + newsletter 全宽 */
  .footer-top .inner-content .crhf-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .footer-top .crhf-fcol-logo,
  .footer-top .crhf-fcol-news{
    width:100%;
    max-width:100%;
    flex:0 0 100%;
  }
  /* footer-middle: 三栏纵向堆叠 */
  .footer-middle .bottom-inner .crhf-row{
    flex-direction:column;
    gap:20px;
  }
  .footer-middle .crhf-fcol-widget{
    width:100%;
    max-width:100%;
    flex:0 0 100%;
  }
  /* f-link 内两列并排居中 */
  .footer .single-footer.f-link .crhf-frow{
    flex-direction:row;
    justify-content:center;
    gap:28px;
    margin:0;
  }
  .footer .single-footer.f-link .crhf-frow .crhf-fcol-link{
    width:auto;
    flex:0 1 auto;
    padding:0;
    max-width:none;
  }
  .footer .single-footer.f-link .crhf-frow .crhf-fcol-link ul li{
    justify-content:flex-start;
  }
  /* footer-bottom: 支付 + 版权 + 社交 居中堆叠 */
  .footer-bottom .inner-content .crhf-row{
    flex-direction:column;
    gap:0;
    text-align:center;
  }
  .footer-bottom .crhf-fcol-bottom{
    width:100%;
    flex:0 0 100%;
    margin-bottom:0;
  }
}

/* ============================================================================
   桌面端优化（≥992）：统一输入框 + 图标按钮（token 驱动），移动端一律不动。
   依据 DESIGN_SPEC §6.5（输入框：1px --o-line / radius --o-radius-sm /
   focus 边框 --o-accent + box-shadow:0 0 0 3px --o-accent-soft）、
   §6.2.6（图标钮：svg 22px / currentColor / 透明底 / hover 蓝 / :active scale）、
   §6.2.7（主色 hover 统一 --o-accent-hover）。
   ============================================================================ */
@media (min-width:992px){

  /* ---------- 统一圆形图标钮形态（覆盖 main.css 写死 #555 / #b1b1b1） ---------- */
  .header .navbar-cart .cart-items .main-btn,
  .header .navbar-cart .wishlist a,
  .header .navbar-cart .messages a,
  .header .navbar-cart .user .main-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--o-ink-2);
    border:1px solid var(--o-line);
  }
  .header .navbar-cart .cart-items:hover .main-btn,
  .header .navbar-cart .wishlist a:hover,
  .header .navbar-cart .messages a:hover,
  .header .navbar-cart .user:hover .main-btn{
    color:#fff;
    background-color:var(--o-accent);
    border-color:transparent;
  }
  /* 全站强制 :active scale(.97)（§6.2.7） */
  .header .navbar-cart .main-btn:active{ transform:scale(.97); }
  /* 角标统一为单一类 .crhf-badge（§6.7 Badge：蓝底白字、999px、右上、描边分离）
     顶栏 cart / messages 图标角标 + 下拉内 wishlist 角标共用同一视觉，仅定位按上下文区分 */
  .crhf-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px;
    background:var(--o-accent); color:#fff;
    font-size:11px; font-weight:600; line-height:18px; text-align:center; white-space:nowrap;
    border-radius:999px;
    box-shadow:0 0 0 2px var(--o-card);
  }
  /* 顶栏图标角标：定位在圆形按钮右上角 */
  .header .navbar-cart .cart-items .main-btn .crhf-badge,
  .header .navbar-cart .messages a .crhf-badge{
    position:absolute; right:-6px; top:-5px;
  }

  /* ---------- 头部 SVG 图标基准（line icon：22px / currentColor） ---------- */
  .crhf-ico{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  /* 与文字混排的图标（分类按钮 / 子菜单箭头）改为行内 */
  .header .mega-category-menu .cat-button .crhf-ico,
  .header .mega-category-menu .sub-category a .crhf-ico{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:20px;
  }
  .header .mega-category-menu .cat-button .crhf-ico{ margin-right:8px; }
  .header .mega-category-menu .sub-category a .crhf-ico{ margin-left:6px; }

  /* ---------- 头部搜索 input（浅色表面） ---------- */
  .header .main-menu-search .search-input input{
    height:46px;
    border:1px solid var(--o-line);
    background-color:var(--o-card);
    color:var(--o-ink-2);
    border-radius:var(--o-radius-sm) 0 0 var(--o-radius-sm);
    padding:0 16px;
    font-size:14px;
    font-family:var(--o-font-body);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .header .main-menu-search .search-input input::placeholder{ color:var(--o-ink-3); }
  .header .main-menu-search .search-input input:focus{
    outline:none;
    border-color:var(--o-accent);
    box-shadow:0 0 0 3px var(--o-accent-soft);
  }
  .header .main-menu-search .search-btn a{
    width:46px;
    height:46px;
    border-radius:0 var(--o-radius-sm) var(--o-radius-sm) 0;
    margin-left:-1px;
    background-color:var(--o-accent);
  }
  .header .main-menu-search .search-btn a:hover{ background-color:var(--o-accent-hover); }

  /* ---------- 头部社交 SVG 统一（nav-social，单色 currentColor） ---------- */
  .header .nav-social ul li a svg{
    width:20px;
    height:20px;
    fill:var(--o-ink-2);
    transition:fill .2s ease;
  }
  .header .nav-social ul li a:hover svg{ fill:var(--o-accent); }

  /* ---------- 新增 .messages 顶栏图标（形状对齐 .wishlist） ---------- */
  .header .navbar-cart .messages{ margin-left:20px; }
  .header .navbar-cart .messages a{
    height:40px;
    width:40px;
    border-radius:50%;
    position:relative;
  }

  /* ---------- 页脚订阅 input（深色表面 #162657） ---------- */
  .footer .footer-top .footer-newsletter .newsletter-form .subscribe-email-input{
    height:50px;
    width:320px;
    border:1px solid rgba(255,255,255,.22);
    background-color:rgba(255,255,255,.08);
    color:#fff;
    border-radius:var(--o-radius-sm);
    padding:0 18px;
    font-size:14px;
    font-family:var(--o-font-body);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .footer .footer-top .footer-newsletter .newsletter-form .subscribe-email-input::placeholder{
    color:rgba(255,255,255,.65);
  }
  .footer .footer-top .footer-newsletter .newsletter-form .subscribe-email-input:focus{
    outline:none;
    border-color:var(--o-accent);
    box-shadow:0 0 0 3px var(--o-accent-soft);
  }
  /* 订阅按钮圆角统一到 --o-radius-sm（原 3px） */
  .footer .footer-top .footer-newsletter .newsletter-form .button .crhf-btn{
    border-radius:var(--o-radius-sm);
  }

  /* ---------- 账户下拉（桌面：贴近按钮 + --o-* 统一；§6.12 下拉基准 / §6.7 角标） ---------- */
  .header .navbar-cart .user .account-menu{
    top:50px;                         /* 贴齐账户按钮，消除原 72px 的 hover 死区 */
    min-width:212px;
    padding:10px;
    background:var(--o-card);
    border:1px solid var(--o-line);
    border-radius:var(--o-radius-sm);
    box-shadow:var(--o-shadow-hover);
    z-index:99;
  }
  /* hover 桥：透明连接带，鼠标下移不丢 hover */
  .header .navbar-cart .user .account-menu::before{
    content:"";
    position:absolute;
    left:0; right:0; top:-12px; height:12px;
  }
  .header .navbar-cart .user .account-menu .account-menu-list > li{ margin-left:0; }
  /* 注意：main.css 用 .account-menu-list .account-menu-item(特异 0,6,0) 钉了 height:20px / margin-bottom:15px，
     必须用同级(含 .account-menu-list)选择器覆盖，否则 li 高度被钉死、内部 a(45px) 溢出卡片底边 */
  .header .navbar-cart .user .account-menu .account-menu-list .account-menu-item{
    height:auto; margin-bottom:2px;
  }
  .header .navbar-cart .user .account-menu .account-menu-list .account-menu-item:last-child{ margin-bottom:0; }
  .header .navbar-cart .user .account-menu .account-menu-item a{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    color:var(--o-ink-2);
    font-size:14px; font-weight:500; text-transform:capitalize;
    border-radius:var(--o-radius-sm);
    overflow:visible;            /* 覆盖 main.css a 的 overflow:hidden，否则角标可能被裁 */
    transition:background-color .15s ease, color .15s ease;
  }
  .header .navbar-cart .user .account-menu .account-menu-item a:hover{
    background-color:var(--o-accent-soft);
    color:var(--o-accent);
    padding-left:12px;           /* 抵消 main.css a:hover 的 padding-left:5px 位移 */
  }
  /* 下拉菜单统一 SVG 图标（18px，currentColor） */
  .crhf-acct-ico{
    width:18px; height:18px; flex:0 0 18px;
    fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .header .navbar-cart .user .account-menu .sub-menu-separator{
    margin:4px 2px; border-top:1px solid var(--o-line);
  }
  /* 下拉内 Wishlist 角标：沿用 .crhf-badge 统一视觉，仅定位在菜单行右侧 */
  .header .navbar-cart .user .account-menu .account-menu-item .crhf-badge{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
  }
}