/* Coggles-inspired layout overlay. Original images/logo are kept. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --coggles-green: #396353;
  --coggles-green-dark: #2d4f42;
  --coggles-mint: #edf5f3;
  --coggles-bg: #f5f6f7;
  --coggles-text: #111111;
  --color-main: #396353 !important;
  --color-price: #111111 !important;
  --color-submain: #396353 !important;
  --color-act: #396353 !important;
  --color-footer-bg: #f5fbf8 !important;
  --color-footer: #111111 !important;
  --hover-color: #2d4f42 !important;
  --active-button: #2d4f42 !important;
  --background: #f5f6f7 !important;
}

html, body, #app, .home, .view {
  background: var(--coggles-bg) !important;
  color: var(--coggles-text);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- top utility bar ---- */
.coggles-topbar {
  position: relative;
  z-index: 1035;
  background: var(--coggles-green);
  color: #fff;
  height: 66px;
  display: flex;
  align-items: center;
  overflow: visible !important;
}
.coggles-topbar-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
}
.coggles-topbar .lang-select,
.coggles-topbar .lang-select i,
.coggles-topbar .header-user,
.coggles-topbar .header-user .text,
.coggles-topbar .no-login .text {
  color: #fff !important;
  font-size: 16px !important;
}
.coggles-topbar .lang-content,
.coggles-topbar .lang-select {
  cursor: pointer;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center;
}
.el-dropdown-menu,
.el-dropdown-menu.el-popper {
  z-index: 5000 !important;
  background: #fff !important;
  color: #111 !important;
}
.el-dropdown-menu .el-dropdown-menu__item,
.el-dropdown-menu .lang-item,
.el-dropdown-menu .lang-item span {
  color: #111 !important;
  background: #fff !important;
}
.coggles-topbar .el-icon-user {
  display: none !important;
}
.coggles-topbar .header-user {
  min-width: auto !important;
  height: 66px;
  align-items: center;
}
.coggles-topbar .no-login {
  display: flex !important;
  align-items: center;
  gap: 24px;
}
.coggles-topbar .no-login span:not(.text) {
  display: none !important;
}
.coggles-topbar .no-login .user-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coggles-topbar .lang-content {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.coggles-topbar .lang-content img,
.coggles-topbar .lang-select > img,
.el-dropdown-menu .lang-item img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  filter: none !important;
  margin-right: 8px;
  flex: 0 0 36px;
}
.coggles-topbar .cg-lang-name {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 400;
}
.coggles-topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ---- header: logo | search | tools ---- */
.header {
  height: auto !important;
  padding-top: 0 !important;
  background: #fff !important;
}
.header-fiexd {
  background: #fff !important;
  padding: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}
.header-top,
.header-top.flex-between.app-container,
.header-top.flex-between {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center !important;
  gap: 16px;
  box-sizing: border-box;
  flex-wrap: nowrap !important;
  justify-content: stretch !important;
}
.header-logo,
.header-logo.flex-start {
  width: auto !important;
  max-width: none !important;
  justify-self: start;
  margin: 0 !important;
  overflow: visible;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  flex-shrink: 0;
}
.header-logo img,
.header-logo .cg-brand-note {
  height: 24px !important;
  width: 22px !important;
  max-width: 22px !important;
  margin-right: 0 !important;
  object-fit: contain;
  flex-shrink: 0;
}
.header-logo .cg-brand-name {
  font-family: Arial Black, Helvetica Neue, Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #111;
  white-space: nowrap;
  line-height: 1;
}
.header-search {
  justify-self: center;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 500px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  visibility: visible !important;
  flex: none !important;
  height: 50px !important;
  border: 1px solid #d0d0d0;
  background: #fff;
  box-sizing: border-box;
  overflow: visible !important;
  position: relative !important;
}
.header-search .el-autocomplete,
.header-search .el-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 48px !important;
  display: block !important;
  overflow: visible !important;
}
.cg-search-mode {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: stretch !important;
  height: 48px !important;
  border-right: 1px solid #d0d0d0;
  background: #f5fbf8;
}
.cg-search-mode-btn {
  border: 0;
  background: transparent;
  padding: 0 10px;
  font-size: 12px;
  line-height: 48px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.cg-search-mode-btn.is-on {
  color: #111;
  font-weight: 700;
  background: #fff;
}
.search-popper,
.el-autocomplete-suggestion.search-popper,
.el-popper.search-popper {
  z-index: 5000 !important;
  overflow: visible !important;
}
.search-popper .search-content-item .el-icon-s-shop {
  display: inline-block !important;
  margin-right: 6px;
  color: var(--coggles-green);
  font-size: 16px;
}
.search-popper .search-content-item {
  color: #111 !important;
  background: #fff !important;
}
.header-search .el-input__inner {
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding-left: 16px !important;
  padding-right: 8px !important;
  font-size: 16px !important;
  color: #396353 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.header-search .el-icon-search {
  display: none !important;
}
.header-search .el-button,
.header-search .el-button--primary {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  background: var(--coggles-green) !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 50px !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  padding: 0 !important;
  margin: -1px -1px -1px 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  flex: 0 0 50px !important;
  align-self: stretch !important;
}
.header-search .el-button--primary span {
  font-size: 0 !important;
}
.header-search .el-button--primary::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 6px 6px 0 -4px #fff;
}

.cg-header-tools {
  display: none !important;
}
.cg-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #222 !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1.1;
}
.cg-tool svg {
  width: 28px;
  height: 28px;
  opacity: 0.8;
  flex: 0 0 28px;
}
.cg-tool-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cg-tool-count {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--coggles-green);
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  margin-bottom: 2px;
}
.cg-tool-label {
  font-size: 12px;
  color: #555;
  opacity: 0.8;
}

/* category nav */
.coggles-nav {
  background: var(--coggles-mint);
  border-bottom: 0;
  position: relative;
  z-index: 30;
}
.coggles-nav-inner {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 20px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  overflow: visible;
  min-height: 60px;
  height: 60px;
  box-sizing: border-box;
}
.coggles-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  flex: 1 1 auto;
}
.coggles-nav-link {
  color: #111 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 0 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  text-align: center;
}
.coggles-nav-link:hover,
.coggles-nav-item:hover > .coggles-nav-link {
  color: var(--coggles-green) !important;
}
.coggles-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 520px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  padding: 24px;
  z-index: 40;
  gap: 28px;
}
.coggles-nav-item:hover > .coggles-submenu,
.coggles-nav-item:focus-within > .coggles-submenu {
  display: flex;
}
.coggles-nav-item.is-right > .coggles-submenu {
  left: auto;
  right: 0;
}
.coggles-submenu-col {
  min-width: 180px;
}
.coggles-submenu-col strong {
  display: block;
  font-size: 13px;
  margin: 0 0 12px;
  color: #111;
}
.coggles-submenu-col a {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
}
.coggles-submenu-col a:hover {
  color: var(--coggles-green);
}
.coggles-submenu-btn {
  display: inline-block !important;
  margin-top: 14px;
  background: var(--coggles-green);
  color: #fff !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600;
}
.coggles-submenu-img {
  width: 180px;
  flex: 0 0 180px;
}
.coggles-submenu-img img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  display: block;
}

.header-nav {
  display: none !important;
}

.el-button--primary {
  background: var(--coggles-green) !important;
  border-color: var(--coggles-green) !important;
  color: #fff !important;
}
.el-button--primary span,
.el-button--primary i {
  color: #fff !important;
}
.header-search .el-button--primary span {
  color: transparent !important;
}
.el-button--primary.is-plain {
  background: #fff !important;
  color: var(--coggles-green) !important;
  border-color: var(--coggles-green) !important;
}
.el-button--primary.is-plain span,
.el-button--primary.is-plain i {
  color: var(--coggles-green) !important;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  background: var(--coggles-green) !important;
  color: #fff !important;
}
.el-button--primary.is-plain:hover span,
.el-button--primary.is-plain:focus span {
  color: #fff !important;
}

.app-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* hero: full-width original banner */
.main-banner.app-container {
  max-width: none;
  padding: 0;
  margin: 0 0 28px;
}
.main-banner .el-row {
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
}
.main-banner .el-col-md-14,
.main-banner .el-col-lg-14,
.main-banner .el-col-xl-14,
.main-banner .el-col-md-10,
.main-banner .el-col-lg-10,
.main-banner .el-col-xl-10 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}
.main-banner-left,
.main-banner-left .swiper-container,
.main-banner-left .swiper-slide {
  height: 460px !important;
}
.main-banner-left img,
.main-banner-left .swiper-slide img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.main-banner-right.flex-start {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 1280px;
  margin: 16px auto 0;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}
.main-banner-right-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100% !important;
}
.main-banner-right .swiper-container,
.main-banner-right .swiper-slide {
  height: 280px !important;
  width: 100% !important;
}
.main-banner-right img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* category circles */
.main-classification {
  padding-top: 24px !important;
  padding-bottom: 8px !important;
}
.main-classification-title h1,
.main-daily-title h1,
.main-recommend h1,
.main-stroe-title h1 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  color: #111 !important;
  letter-spacing: 0.02em;
}
.main-classification .swiper-slide {
  width: auto !important;
  margin-right: 28px !important;
}
.main-classification-item {
  flex-direction: column !important;
  gap: 10px;
  min-width: 140px;
}
.main-classification-item .img-content {
  width: 128px !important;
  height: 128px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #fff !important;
}
.main-classification-item .img-content img,
.main-classification-item img {
  width: 128px !important;
  height: 128px !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
}
.main-classification-item span {
  font-size: 13px;
  color: #222;
  text-align: center;
  max-width: 140px;
}

/* product cards */
.main-recommend,
.main-stroe,
.main-daily {
  background: transparent !important;
}
.main-recommend-content,
.product-list,
.main-stroe-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
.pro-container,
.product {
  background: #fff !important;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: none;
  width: auto !important;
}
.product img {
  width: 100%;
  object-fit: cover;
  background: #fff;
}

.th_back {
  max-width: 1280px;
  margin: 0 auto 24px;
  padding: 0 24px;
}
.th_back img {
  width: 100%;
  object-fit: cover;
}

.banner-content {
  max-width: 1280px;
  margin: 0 auto 32px;
  background: var(--coggles-mint) !important;
}

.icon-tips {
  max-width: 1280px;
  margin: 24px auto;
  background: #fff;
  padding: 20px;
}

.footer {
  background: #f5fbf8 !important;
  color: #111 !important;
  padding: 0 !important;
}
.footer.cg-footer-host > *:not(.cg-site-footer) {
  display: none !important;
}

.cg-site-footer {
  background: #f5fbf8;
  color: #111;
  padding: 0;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.cg-ft-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 40px 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 80px;
}
.cg-ft-brand {
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 280px;
}
.cg-ft-logo {
  display: inline-block;
  text-decoration: none;
  color: #111;
}
.cg-ft-logo img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.cg-ft-logo span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cg-ft-socials {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.cg-ft-soc {
  display: flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #396353;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.cg-ft-soc:hover {
  background: #2d4f42;
}
.cg-ft-soc svg {
  width: 15px;
  height: 15px;
  fill: #fff;
}
.cg-ft-cols {
  flex: 1 1 auto;
  display: flex;
  gap: 96px;
  justify-content: flex-end;
  padding-top: 6px;
}
.cg-ft-col {
  min-width: 160px;
}
.cg-ft-col h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
  letter-spacing: 0.02em;
}
.cg-ft-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cg-ft-col li {
  margin: 0 0 10px;
  line-height: 1.4;
}
.cg-ft-col a {
  color: #222;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
}
.cg-ft-col a:hover {
  color: #396353;
}
.cg-ft-bottom,
.cg-ft-locale,
.cg-ft-a11y {
  display: none !important;
}
.cg-ft-legal {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 40px 32px;
  border-top: 1px solid #d7e4dc;
}
.cg-ft-copy {
  margin: 0;
  padding: 0;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  text-align: left;
  font-family: Inter, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif;
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
.footer .footer-bottom,
.footer .argos {
  display: none !important;
}

/* ---- logged-in user panel ---- */
.user-info .nav-bar .person {
  background: var(--coggles-green) !important;
  color: #fff !important;
  padding: 28px 16px 24px !important;
  text-align: center;
  margin: 0 !important;
}
.user-info .nav-bar .person .name,
.user-info .nav-bar .person .person-id {
  color: #fff !important;
}
.user-info .nav-bar .user-avatar img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: #fff;
  object-fit: cover;
}
.user-info .nav-bar ul li a,
.user-info .nav-bar li {
  color: #222 !important;
}
.user-info .nav-bar .act {
  color: var(--coggles-green) !important;
  background: #fff5f2;
}

@media (max-width: 992px) {
  .main-banner-left,
  .main-banner-left .swiper-container,
  .main-banner-left .swiper-slide,
  .main-banner-left img {
    height: 280px !important;
  }
  .main-banner-right.flex-start,
  .main-banner-right-group {
    grid-template-columns: 1fr 1fr;
  }
  .main-banner-right .swiper-container,
  .main-banner-right .swiper-slide,
  .main-banner-right img {
    height: 180px !important;
  }
  .main-recommend-content,
  .product-list,
  .main-stroe-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .header-logo img,
  .header-logo .cg-brand-note {
    height: 22px !important;
    width: 20px !important;
    max-width: 20px !important;
  }
  .header-logo .cg-brand-name {
    font-size: 13px;
  }
}

/* original homepage posters / category jumpers — replaced by Coggles 1:1 home */
.cg-on-home .main-banner,
.cg-on-home .main-classification,
.cg-on-home .main-daily,
.cg-on-home .th_back,
.cg-on-home .banner-content {
  display: none !important;
}

.coggles-home {
  background: #fff;
  margin: 0;
  padding: 0;
}
.cg-hero {
  position: relative;
  width: 100%;
  height: 617px;
  overflow: hidden;
  background: #111;
}
.cg-hero-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.cg-hero-video,
.cg-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-hero-img {
  z-index: 1;
}
.cg-hero-video {
  z-index: 2;
  opacity: 0;
}
.coggles-home.cg-hero-playing .cg-hero-video {
  opacity: 1;
}
.coggles-home.cg-hero-playing .cg-hero-img {
  opacity: 0;
}
.cg-hero h3 {
  position: absolute;
  z-index: 3;
  left: 50px;
  bottom: 120px;
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.cg-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7.5px;
  padding: 50px 50px 5px;
  background: #fff;
}
.cg-tiles-2 {
  padding: 0 50px 10px;
}
.cg-tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
.cg-tile-imgwrap {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 125%;
  overflow: hidden;
}
.cg-tile-imgwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.6) 100%);
}
.cg-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-tile h3 {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 23px;
  margin: 0;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.cg-cats {
  padding: 70px 50px 90px;
  background: #fff;
}
.cg-cats h1 {
  font-family: Inter, Arial, sans-serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 28px;
  color: #111;
  text-transform: none;
}
.cg-cats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  justify-items: center;
  align-items: start;
  gap: 24px 18px;
}
.cg-cat {
  width: 100%;
  max-width: 160px;
  text-align: center;
  text-decoration: none;
  color: #222;
}
.cg-cat-img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #f4f4f4;
}
.cg-cat-img img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}
.cg-cat h3 {
  margin: 13px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #222;
  text-align: center;
}

.cg-on-home .main-recommend h1,
.cg-on-home .main-stroe-title h1,
.cg-on-home .main-daily-title h1 {
  font-size: 21px !important;
  letter-spacing: 2px;
  text-transform: none;
}

@media (max-width: 1100px) {
  .header-top,
  .header-top.flex-between.app-container,
  .header-top.flex-between {
    grid-template-columns: auto 1fr;
    padding: 16px 12px !important;
  }
  .header-search {
    width: auto !important;
    min-width: 240px !important;
    max-width: 420px !important;
  }
  .cg-tool-label {
    display: none;
  }
  .coggles-nav-inner {
    gap: 20px;
    overflow-x: auto;
  }
}

@media (max-width: 1024px) {
  .cg-hero {
    height: 420px;
  }
  .cg-hero h3 {
    left: 20px;
    bottom: 80px;
    font-size: 40px;
  }
  .cg-tiles,
  .cg-tiles-2,
  .cg-cats {
    padding-left: 16px;
    padding-right: 16px;
  }
  .cg-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-top: 16px;
  }
  .cg-cats-row {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 16px 10px;
  }
  .cg-cat {
    max-width: 120px;
  }
  .cg-cat-img,
  .cg-cat-img img {
    width: 110px;
    height: 110px;
  }
  .cg-ft-main {
    flex-direction: column;
    gap: 28px;
    padding: 36px 16px 24px;
  }
  .cg-ft-brand {
    max-width: none;
  }
  .cg-ft-cols {
    gap: 32px;
    width: 100%;
    justify-content: flex-start;
  }
  .cg-ft-col {
    flex: 1 1 50%;
    min-width: 0;
  }
  .cg-ft-col h3 {
    font-size: 15px;
  }
  .cg-ft-col a {
    font-size: 14px;
  }
  .cg-ft-legal {
    padding: 16px 16px 28px;
  }
}

/* ---- template legal pages ---- */
body.cg-legal-open {
  overflow: hidden !important;
}
.cg-legal-page {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #f5fbf8;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color: #111;
}
.cg-legal-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid #e6eeea;
}
.cg-legal-back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  color: #111;
  text-decoration: none;
  font-weight: 300;
}
.cg-legal-bar h1 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.cg-legal-bar-sp { width: 44px; flex: 0 0 44px; }
.cg-legal-wrap {
  max-width: 860px;
  margin: 20px auto 48px;
  padding: 0 16px 40px;
}
.cg-legal-article {
  background: #fff;
  border-radius: 8px;
  padding: 28px 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cg-legal-article h2 {
  margin: 28px 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.cg-legal-article h2:first-child { margin-top: 0; }
.cg-legal-article h3 {
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.cg-legal-article p,
.cg-legal-article li {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: #222;
}
.cg-legal-article ul {
  margin: 0 0 14px;
  padding: 0 0 0 18px;
}
.cg-legal-article li { margin-bottom: 6px; }

/* Buyer: hide withdraw portal, keep default address in the same column */
.withdraw > .box-btn {
  display: none !important;
}
.fl_row > .el-button.button.is-plain {
  display: none !important;
}

/* hide scan-to-download APP QR (user center sidebar + home download block) */
.user-info div[style*="margin-top: 60px"],
.download-content {
  display: none !important;
}

/* ---- buyer center / product display ---- */
.user-info {
  background: #fff !important;
}
.user-info .nav-bar {
  background: #fff !important;
  border-right: 1px solid #eee !important;
}
.user-info .nav-bar ul li a:hover,
.user-info .nav-bar li:hover {
  color: var(--coggles-green) !important;
}
.user-info .el-button--primary,
.user-info .el-pagination.is-background .el-pager li.active,
.money-package .el-button--primary,
.setup-index .el-button--primary,
.fl_row .el-button--primary {
  background: var(--coggles-green) !important;
  border-color: var(--coggles-green) !important;
  color: #fff !important;
}
.user-info .el-table th,
.user-info .el-table thead th {
  background: #f5fbf8 !important;
  color: #111 !important;
}
.setup-index .item {
  color: #111 !important;
  border-color: #eee !important;
}
.setup-index .item:hover {
  color: var(--coggles-green) !important;
}
.money-package,
.order-index,
.setup-index,
.user-info .content,
.user-info .right-content {
  background: #fff;
}
.product .name,
.product p,
.pro-container .name,
.pro-container p {
  color: #111 !important;
  font-size: 14px;
  line-height: 1.45;
}
.product-details,
.product-description,
.product-details-content {
  background: #fff !important;
  border-color: #eee !important;
}
.product-details .title1,
.product-description .title1 {
  color: #111 !important;
  font-family: "Cormorant Garamond", Georgia, serif;
}

@media (min-width: 900px) {
  .cg-legal-bar { height: 64px; }
  .cg-legal-bar h1 { font-size: 22px; }
  .cg-legal-article { padding: 40px 44px; }
  .cg-legal-article h2 { font-size: 27px; }
  .cg-legal-article p,
  .cg-legal-article li { font-size: 18px; }
}

/* PC buyer: unified balance card, shop header frame, recommended more */
@media (min-width: 992px) {
  .balance,
  .set-container .balance,
  .user-info .balance,
  .user-info .set-container .balance,
  .cg-pc-balance,
  .cg-pc-balance[style],
  .user-info .cg-pc-balance,
  .user-info .cg-pc-balance[style],
  .user-info .content .cg-pc-balance {
    background: #fff !important;
    background-image: none !important;
    color: #111 !important;
    border: 1px solid #e4ebe8 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }
  .balance *,
  .balance i,
  .balance span,
  .balance div,
  .cg-pc-balance *,
  .cg-pc-balance span,
  .cg-pc-balance p,
  .cg-pc-balance div,
  .user-info .balance i,
  .user-info .balance span,
  .user-info .cg-pc-balance *,
  .user-info .cg-pc-balance span,
  .user-info .cg-pc-balance p,
  .user-info .cg-pc-balance div {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .balance p,
  .balance p[style],
  .cg-pc-balance p,
  .user-info .balance p,
  .user-info .cg-pc-balance p {
    color: #396353 !important;
    -webkit-text-fill-color: #396353 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .balance .el-icon-view,
  .balance i,
  .cg-pc-balance .el-icon-view,
  .cg-pc-balance i,
  .user-info .balance .el-icon-view,
  .user-info .balance i,
  .user-info .cg-pc-balance .el-icon-view,
  .user-info .cg-pc-balance i {
    color: #396353 !important;
    -webkit-text-fill-color: #396353 !important;
  }

  .store .wrap .head-wrap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #f6f7f5 !important;
    padding: 28px 16px 12px !important;
  }
  .store .wrap .head-wrap > .banner,
  .store .wrap .head-wrap > .swiper-container {
    display: none !important;
  }
  .store .wrap .head-wrap .box,
  .store .cg-pc-shop-head,
  .cg-pc-shop-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    max-width: 1100px;
    width: calc(100% - 32px);
    height: auto !important;
    min-height: 108px;
    margin: 0 auto 12px !important;
    padding: 18px 22px !important;
    background: #fff !important;
    border: 1px solid #dbe7e1 !important;
    border-radius: 14px !important;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(57, 99, 83, 0.04);
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
  .store .wrap .head-wrap .box .container-left p,
  .cg-pc-shop-head .shop-name,
  .cg-pc-shop-head h1,
  .cg-pc-shop-head h2,
  .cg-pc-shop-head .name,
  .cg-pc-shop-head p {
    color: #111 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    filter: none !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }
  .store .wrap .head-wrap .box .container-left span,
  .cg-pc-shop-head .shop-desc,
  .cg-pc-shop-head .desc,
  .cg-pc-shop-head span {
    color: #444 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    opacity: 1 !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 640px;
  }

  .main-stroe-title.flex-between,
  .cg-stores-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  .cg-stores-more,
  .main-stroe-title .cg-stores-more,
  .main-stroe-title .all,
  .cg-stores-head .all,
  .cg-stores-head a.cg-stores-more {
    margin-left: auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 32px;
    padding: 0 16px !important;
    background: var(--coggles-green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid var(--coggles-green) !important;
    border-radius: 27px !important;
    font-size: 13px !important;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
  }
  .cg-stores-more i,
  .main-stroe-title .all i {
    color: #fff !important;
  }
  .cg-stores-more:hover,
  .main-stroe-title .all:hover {
    background: var(--coggles-green-dark) !important;
    border-color: var(--coggles-green-dark) !important;
    color: #fff !important;
    opacity: 1;
  }

  .cg-rec-page { max-width: 1100px; margin: 24px auto 48px; padding: 0 16px; }
  .cg-rec-page h1 { font-size: 22px; color: #111; margin: 0 0 18px; }
  .cg-rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cg-rec-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid #e4ebe8; border-radius: 14px;
    padding: 16px; text-decoration: none; color: inherit;
  }
  .cg-rec-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #f3f6f4; }
  .cg-rec-card strong { display: block; font-size: 16px; color: #111; }
  .cg-rec-card span { display: block; font-size: 12px; color: #667; margin-top: 4px; }
  .cg-rec-card em { margin-left: auto; color: #396353; font-style: normal; font-size: 13px; white-space: nowrap; }
}

/* Always-on: buyer balance digits + 推荐店铺「更多」use UI green */
.balance,
.set-container .balance,
.user-info .balance,
.cg-pc-balance {
  background: #fff !important;
  background-image: none !important;
  color: #111 !important;
  border: 1px solid #e4ebe8 !important;
  border-radius: 12px !important;
}
.balance span,
.balance i,
.balance div,
.cg-pc-balance span,
.cg-pc-balance div {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  opacity: 1 !important;
}
.balance p,
.cg-pc-balance p {
  color: #396353 !important;
  -webkit-text-fill-color: #396353 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.main-stroe-title.flex-between,
.cg-stores-head {
  padding-right: 96px;
}
.cg-stores-more,
.main-stroe-title .cg-stores-more,
.main-stroe-title .all,
.cg-stores-head .cg-stores-more,
.cg-stores-head .all,
.cg-stores-head a,
.main-stroe-title a.cg-stores-more {
  margin-left: auto;
  margin-right: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px;
  height: 32px;
  padding: 0 16px !important;
  background: #396353 !important;
  background-color: #396353 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid #396353 !important;
  border-radius: 27px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-sizing: border-box;
}
.cg-stores-more span,
.cg-stores-more i,
.main-stroe-title .all i {
  color: #fff !important;
}