/* Homepage only. Open editorial composition with natural paper photography.
   No enclosing hero or promotion frame; original product artwork is unchanged. */
#home {
  --home-muted: #6b7164;
  background: #f6f4ef;
}

#home .home-top {
  padding: 16px 18px 12px;
}

#home .home-top .name h1 {
  color: #25382f;
  letter-spacing: .06em;
}

#home .home-top .name small {
  color: var(--home-muted);
  letter-spacing: .07em;
}

#home .banner {
  --banner-icon-size: 36px;
  --banner-icon-gap: 14px;
  margin: 0;
  padding: 22px 22px 10px;
  border: 0;
  border-radius: 0;
  background-color: #f6f4ef;
  background-image:
    linear-gradient(to bottom, #f6f4ef 0%, rgba(246, 244, 239, 0) 20%, rgba(246, 244, 239, 0) 66%, #f6f4ef 94%),
    linear-gradient(90deg, #f6f4ef 0%, rgba(246, 244, 239, .97) 36%, rgba(246, 244, 239, .4) 66%, rgba(246, 244, 239, .05) 100%),
    url('/mall/art/home-ginkgo-paper-v1.webp');
  background-size: cover;
  background-position: center;
  color: #293e31;
  box-shadow: none;
}

#home .banner::before,
#home .banner::after {
  display: none;
}

#home .banner-kicker {
  gap: 8px;
  margin-bottom: 15px;
  padding: 0;
  height: auto;
  line-height: 1.6;
  font-size: 11px;
  letter-spacing: .16em;
  color: #7b684b;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#home .banner-kicker::before {
  content: "";
  width: 20px;
  height: 1px;
  background: #9d8967;
}

#home .banner b {
  color: #293e31;
  font-size: 30px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: .025em;
  text-wrap: initial;
}

#home .banner p {
  margin-top: 12px;
  color: #586352;
  font-size: 13px;
  line-height: 1.8;
}

#home .banner-meta {
  margin-top: 12px;
  color: #616c59;
  font-size: 11.5px;
  gap: 9px;
}

#home .banner-meta i {
  background: #a3a48b;
  opacity: .7;
}

#home .banner .deco {
  width: calc(100% + 44px);
  margin: 20px -22px 0;
  padding: 8px 0 2px;
  border: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
}

#home .banner-icon-row {
  opacity: .9;
}

#home .banner .deco .icon {
  background: transparent;
  border-color: rgba(74, 84, 59, .12);
  box-shadow: 0 2px 5px rgba(61, 56, 38, .09);
}

#home .home-quick {
  margin-top: 2px;
  padding: 12px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#home .home-quick button {
  gap: 7px;
  font-size: 12px;
  color: #595f52;
}

#home .home-quick button + button {
  border-left: 0;
}

#home .home-quick button .quick-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border-color: #e6dfcf;
  background: #eee9dd;
  color: #7b6745;
}

#home .home-quick button.primary .quick-icon {
  background: linear-gradient(135deg, #314f3d, #243e32);
  border-color: #314b3c;
}

#home .home-membership {
  margin: 6px 18px 0;
  color: #666c60;
  font-size: 11.5px;
}

#home .home-offers {
  margin: 22px 14px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#home .home-offers h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 4px 12px;
  color: #3e493a;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: .04em;
  font-weight: 600;
}

#home .home-offers h2::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e0dbcf;
}

#home .offer-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

#home .offer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 15px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(112deg, #eee1cd, #f2e9d9);
  box-shadow: none;
}

#home .offer-card b {
  color: #654c33;
  font-weight: 600;
}

#home .offer-card[data-go="topup"] {
  min-height: 180px;
  padding: 18px;
  gap: 7px;
  background-color: #ad3420;
  background-image: linear-gradient(90deg, rgba(141, 35, 22, .5), rgba(154, 39, 22, .25) 46%, rgba(154, 39, 22, 0) 75%), url('/mall/static/premium-20261006-v1-first-recharge-opening-gift-v1.webp');
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  box-shadow: 0 5px 14px rgba(119, 43, 23, .12);
}

#home .offer-card[data-go="topup"] > * {
  max-width: 65%;
}

#home .offer-card[data-go="topup"] b {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.4;
  color: #fff3da;
  letter-spacing: .025em;
}

#home .offer-card[data-go="topup"] small {
  color: #ffecd1;
  font-size: 11.5px;
  line-height: 1.7;
}

#home .offer-card[data-go="topup"] .offer-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 7px;
  padding: 0 15px;
  border-radius: 999px;
  background: #fff0cc;
  color: #8f2d1e;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 2px 5px rgba(106, 30, 16, .16);
}

#home .offer-card[data-go="detail"] {
  background: linear-gradient(110deg, #f1e3d2, #f5ece0);
  border-left: 2px solid #bd6a44;
}

#home .offer-card em {
  color: #ae452a;
  font-size: 28px;
  letter-spacing: -.025em;
}

#home .offer-card small {
  color: #6c6357;
}

#home .offer-card .offer-action {
  margin-top: auto;
  padding-top: 4px;
  color: #8a4b32;
}

#home .shelf-head {
  margin-top: 8px;
  padding: 20px 18px 8px;
}

#home .shelf-head h2 {
  color: #293c31;
  font-size: 21px;
  letter-spacing: .04em;
}

#home .shelf-head span {
  color: var(--home-muted);
  line-height: 1.65;
  margin-top: 4px;
}

#home .cats {
  padding: 10px 14px 14px;
  background: rgba(246, 244, 239, .98);
}

#home .cats button {
  border-color: #e2dfd4;
  background: #fcfbf7;
}

#home .cats button[aria-selected="true"] {
  border-color: #2e4939;
  background: #2e4939;
  color: #fff9ed;
  box-shadow: none;
}

#home .plist {
  gap: 12px;
}

#home .pcard {
  padding: 17px 16px;
  gap: 14px;
  border-color: #e4e0d7;
  border-radius: 17px;
  background: #fffefa;
  box-shadow: 0 2px 8px rgba(39, 44, 32, .025);
}

#home .pcard .n {
  color: #2a342c;
}

#home .pcard .d {
  color: #62685c;
  line-height: 1.7;
}

#home .pcard .offer {
  color: #68735f;
  line-height: 1.65;
}

#home .pcard .f {
  margin-top: 12px;
}

#home .pcard .f .pts {
  color: #8d5638;
  font-size: 16px;
}

#home .pcard .f .pts small {
  color: #717567;
  font-size: 11px;
  font-weight: 400;
}

#home .pcard .f .see {
  color: #7d806e;
}

#home .free-list {
  gap: 10px;
}

#home .free-card {
  padding: 15px;
  border-radius: 15px;
  border-color: #e6e2d6;
  background: #f1f0e8;
  box-shadow: none;
}

#home .free-card .n {
  color: #354034;
  line-height: 1.5;
}

#home .free-card p {
  color: #666d5f;
  line-height: 1.7;
}

#home .point-note {
  margin-top: 20px;
  padding: 16px 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid #e1ded3;
  border-radius: 0;
}

#home .point-note b {
  color: #4f5c4d;
  font-weight: 600;
}

#home .foot {
  color: var(--home-muted);
  line-height: 1.8;
}

#home button:focus-visible,
#home a:focus-visible {
  outline: 2px solid #7b6845;
  outline-offset: 3px;
}

/* Product discounts stay compact and secondary to the first-recharge artwork. */
#home .offer-card[data-go="detail"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title price" "description action";
  align-items: center;
  gap: 6px 12px;
  min-height: 0;
}

#home .offer-card[data-go="detail"] b {
  grid-area: title;
}

#home .offer-card[data-go="detail"] > span:not(.offer-action) {
  grid-area: price;
  text-align: right;
  white-space: nowrap;
}

#home .offer-card[data-go="detail"] small {
  grid-area: description;
  text-wrap: balance;
}

#home .offer-card[data-go="detail"] .offer-action {
  grid-area: action;
  justify-self: end;
  margin-top: 0;
  padding-top: 0;
}

@media (hover: hover) {
  #home .pcard:hover,
  #home .free-card:hover {
    border-color: #c7cbb9;
    box-shadow: 0 5px 14px rgba(39, 44, 32, .045);
  }
  #home .offer-card[data-go="detail"]:hover {
    background: #eaddc7;
  }
  #home .offer-card[data-go="topup"]:hover {
    filter: brightness(1.035);
  }
}

@media (max-width: 350px) {
  #home .home-top {
    padding: 16px 16px 12px;
  }
  #home .banner {
    --banner-icon-size: 34px;
    --banner-icon-gap: 11px;
    padding: 20px 22px 10px;
  }
  #home .banner b {
    font-size: 26px;
  }
  #home .banner .deco {
    width: calc(100% + 44px);
    margin-inline: -22px;
  }
  #home .pcard {
    padding: 15px 14px;
    gap: 12px;
  }
  #home .offer-card {
    padding: 13px;
  }
  #home .offer-card em {
    font-size: 22px;
  }
  #home .offer-card[data-go="topup"] b {
    font-size: 24px;
  }
  #home .offer-card[data-go="topup"] {
    padding: 16px;
  }
}