::before,
::after,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --primary-font: Montserrat, sans-serif;
  --secondary-font: Montserrat, sans-serif;
}

:root {
  --z-index-modal: 999999999;
  --z-index-desktop-header: 10;
  --z-index-mobile-search: 10;
  --z-index-level-1: 1;
  --z-index-level-2: 2;
  --z-index-level-3: 3;
  --z-index-level-4: 4;
  --z-index-level-5: 5;
  --z-index-level-6: 6;
  --z-index-level-7: 7;
  --z-index-level-8: 8;
  --color-primary: #f88749;
  --color-primary-light: #ff975e;
  --color-primary-lighter: #f8864971;
  --color-primary-dark: #ca4b07;
  --color-gray-50: #f7f7f7;
  --color-gray-100: #f1f1f1;
  --color-gray-200: #dddddd;
  --color-gray-300: #c4c4c4;
  --color-gray-400: #b1b1b1;
  --color-gray-500: #8e8e8e;
  --color-gray-600: #6d6d6d;
  --color-gray-700: #5f5f5f;
  --color-gray-800: #4a4a4a;
  --color-gray-900: #262626;
  --color-gray-950: #111111;
  --color-navigationbar: #353535;
  --color-white: #fff;
  --color-notify: #4267b2;
  --color-notify-dark: #3e588d;
  --color-discount: #e93e3a;
  --color-notify-dark: #3e588d;
  --color-green: #5fc069;
  --color-green-light: #d4ffd9;
  --color-error: #e24c4b;
  --color-error-background: #fdf1f0;
  --text-2xs: 0.5125rem;
  --text-xs: 0.5625rem;
  --text-sm: 0.625rem;
  --text-base: 0.75rem;
  --text-lg: 0.875rem;
  --text-xl: 1rem;
  --text-2xl: 1.125rem;
  --text-3xl: 1.25rem;
  --text-4xl: 1.375rem;
  --text-5xl: 1.5rem;
  --text-6xl: 1.625rem;
  --text-7xl: 1.75rem;
  --space-xs: 0.3125rem;
  --space-sm: 0.625rem;
  --space-base: 0.9375rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5625rem;
  --space-2xl: 1.875rem;
  --space-3xl: 2.1875rem;
  --space-4xl: 2.5rem;
  --space-5xl: 2.8125rem;
  --space-6xl: 3.125rem;
  --space-7xl: 3.75rem;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --header-bar-height: 62px;
  --desktop-nav-height: 50px;
  --field-height: calc(var(--field-padding-vert) + 1em + 4px);
  --field-padding-hor: 20px;
  --field-padding-vert: 10px;
  --field-spacing: 1.5em;
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --default-layout-width: 1140px;
  --wide-layout-width: 1440px;
  --product-image-overlay-background: rgba(0, 0, 0, 0.05);
  --product-image-overlay-dark-background: rgba(0, 0, 0, 0.1);
  --product-image-padding: 20.3% 5%;
  --android-blue: rgba(173, 225, 246, 0.6) ;
}

*, *:before, *:after {
  color: inherit;
}

body {
  color: var(--color-gray-900);
  font-family: var(--primary-font);
}

*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
}

.text-white {
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  min-width: 1200px;
}

.flex {
  display: flex;
}

.flex-content-sb {
  display: flex;
  justify-content: space-between;
}

.flex-center-v {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header {
  width: 100%;
  background-color: var(--color-gray-900);
}
.header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.header .header-content {
  background-color: var(--color-gray-900);
  margin: 0 auto;
  width: 100%;
  max-width: var(--default-layout-width);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
  height: var(--header-bar-height);
}
.header .header-content .menu-logo {
  display: block;
  font-size: 0;
}
.header .header-content .menu-logo > img {
  height: 36px;
}
.header .header-content .search-bar {
  width: 400px;
  position: relative;
}
.header .header-content .search-bar input {
  background-color: var(--color-gray-100);
  font-size: var(--text-lg);
  padding: var(--field-padding-vert);
  padding-right: calc(var(--field-padding-vert) + var(--space-lg));
  width: 100%;
  border: none;
  box-sizing: border-box;
  height: var(--search-input-height);
  transition: padding 0.2s ease-out;
}
.header .header-content .search-bar input:focus-visible {
  outline: none;
}
.header .header-content .search-bar .search-btn {
  cursor: pointer;
  stroke: var(--color-gray-900);
  padding-right: var(--space-base);
  right: 0;
  outline-offset: 2px;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  position: absolute;
  top: 0;
  bottom: 0;
  height: var(--search-input-height);
  width: var(--search-input-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
  border: none;
}
.header .header-content .user-action {
  margin-left: 24px;
  color: var(--color-white);
}
.header .header-content .user-action a {
  text-decoration: none;
  color: var(--color-white);
}
.header .header-content .user-action .cart-entry {
  display: flex;
  position: relative;
}
.header .header-content .user-action .cart-entry > img {
  margin-left: 16px;
  width: 30px;
  margin-right: 4px;
}
.header .header-content .user-action .cart-entry .cart-number {
  background-color: rgba(255, 255, 255, 0.7);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 12px;
  color: var(--color-gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .header-content .user-action .sign-in-btn {
  cursor: pointer;
}
.header .header-bottom {
  height: var(--desktop-nav-height);
  width: 100%;
  background-color: var(--color-navigationbar);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: relative;
}
.header .header-bottom .category-wrap {
  width: 100%;
  max-width: var(--default-layout-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  height: var(--desktop-nav-height);
  position: relative;
}
.header .header-bottom .category-wrap .categories {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .header-bottom .category-wrap .categories .category-item {
  list-style: none;
  margin: 0;
  position: relative;
}
.header .header-bottom .category-wrap .categories .category-item .category-name {
  cursor: default;
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  font-family: var(--primary-font);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-gray-100);
  height: var(--desktop-nav-height);
}
.header .header-bottom .category-wrap .categories .category-item .category-name:hover + .sub-item-wrap {
  display: flex;
}
.header .header-bottom .category-wrap .categories .category-item .sub-item-wrap {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  padding: 12px var(--space-lg);
  transform: translateY(-8px);
  flex-wrap: wrap;
  background-color: #fff;
  z-index: 9;
  gap: 12px;
}
.header .header-bottom .category-wrap .categories .category-item .sub-item-wrap .sub-item {
  font-weight: bold;
  text-decoration: none;
  font-family: var(--primary-font);
  font-size: var(--text-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  transition: background-color 0.1s ease-in-out;
  padding: var(--space-sm);
}
.header .header-bottom .category-wrap .categories .category-item .sub-item-wrap .sub-item:hover {
  color: var(--color-primary);
  background-color: var(--color-gray-200);
}
.header .header-bottom .category-wrap .categories .category-item .sub-item-wrap:hover {
  display: flex;
}

.main .main-banner {
  width: 100%;
  padding: 20px;
}
.main .main-banner.hidden {
  display: none;
}
.main .main-banner.caps {
  background-color: #A8B5A2;
}
.main .main-banner.specs {
  background-color: #b7a99a;
}
.main .main-banner .caps-banner {
  height: 190px;
  max-width: var(--default-layout-width);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto 24px;
}
.main .main-banner .caps-banner > img {
  width: 560px;
  max-height: 100%;
  display: none;
}
.main .main-banner .caps-banner > img:first-child {
  display: block;
}
.main .main-banner .caps-banner > h3 {
  margin-left: 40px;
  color: var(--color-white);
  font-size: 32px;
}
.main .main-banner .specs-banner {
  max-width: var(--default-layout-width);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto 24px;
}
.main .main-banner .specs-banner > p {
  font-size: 36px;
  flex: 1;
  line-height: 1.3;
  color: #fff;
  margin-right: 40px;
}
.main .main-banner .specs-banner img {
  height: 300px;
}
.main .main-banner .hot-list {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  margin: 0 auto;
  max-width: var(--default-layout-width);
  gap: 16px;
}
.main .main-banner .hot-list .hot-item {
  width: 25%;
}
.main .main-banner .hot-list .hot-item img {
  width: 100%;
}
.main .main-banner .hot-list .hot-item > a {
  text-decoration: none;
}
.main .main-banner .hot-list .hot-item .name {
  color: var(--color-white);
  font-size: 13px;
}
.main .main-banner .hot-list .hot-item .price {
  color: var(--color-white);
  font-size: 16px;
  padding-top: 6px;
}
.main .caps-tip {
  font-size: 2rem;
  font-weight: bold;
  margin: 40px auto;
  max-width: var(--default-layout-width);
  padding-left: 60px;
  background-image: url("../image/icon-caps.png");
  background-repeat: no-repeat;
  background-size: 40px 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gray-900);
}

.recommend-wrap {
  max-width: var(--default-layout-width);
  margin: 0 auto 40px;
}
.recommend-wrap .recommend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.recommend-wrap .recommend > li {
  width: calc(25% - 32px);
  overflow: hidden;
  text-align: center;
}
.recommend-wrap .recommend > li a {
  text-decoration: none;
}
.recommend-wrap .recommend > li a > img {
  height: 240px;
}
.recommend-wrap .recommend > li a .name {
  color: var(--color-gray-900);
  font-size: 14px;
}
.recommend-wrap .recommend > li a .price {
  color: var(--color-gray-900);
  font-size: 18px;
  padding-top: 8px;
}
.recommend-wrap.caps .recommend li:nth-of-type(1), .recommend-wrap.caps .recommend li:nth-of-type(2) {
  width: calc(50% - 16px);
}
.recommend-wrap.caps .recommend li:nth-of-type(1) img, .recommend-wrap.caps .recommend li:nth-of-type(2) img {
  height: 300px;
}

.specs-tip {
  background-color: #b7a99a;
}
.specs-tip .content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--default-layout-width);
  padding: 40px 0;
  margin: 80px auto 0;
  color: var(--color-white);
  font-size: 3rem;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.specs-tip .content > img {
  width: 60px;
  margin-right: 12px;
}

.main-banner-toggle {
  width: 200px;
  margin: auto;
  position: relative;
  top: -16px;
  display: flex;
  gap: 16px;
}
.main-banner-toggle .toggle-btn {
  width: 60px;
  height: 6px;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s;
}
.main-banner-toggle .toggle-btn.active {
  background-color: var(--color-gray-900);
}

.site-footer {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-lg) 0;
}
.site-footer p {
  padding: 8px 0;
  font-size: 12px;
}