/* PC art direction. Existing application components retain their own actions. */
.n8-pc-hero { display: none; }
@media (min-width: 1024px) {
  :root {
    --n8-desktop-bg: #f7f7f1;
    --n8-desktop-line: #e9eae3;
    --pc-ink: #23352e;
    --pc-green: #31624f;
  }
  body {
    background: #faf9f5 url('/assets/pc-ui-20261018/page-background.png') center top / 100% auto fixed no-repeat;
  }
  #app > .container { background: transparent !important; }
  #app .van-tabbar--fixed {
    background: rgba(255, 255, 252, .97);
    border-bottom-color: #e9eae3;
    box-shadow: 0 1px 14px #25372e05;
  }
  .van-tabbar--fixed::before {
    position: absolute;
    left: max(32px, calc((100vw - 1240px) / 2));
    top: 18px;
    width: 210px;
    height: 28px;
    content: '';
    background: url('/assets/titok-wholesale-CySzbheg.png') left center / contain no-repeat;
  }
  #app .van-tabbar-item { color: #707b74; min-width: 92px; }
  #app .van-tabbar-item--active { color: var(--pc-green); background: #f1f6f1; }
  .van-tabbar-item__icon { position: relative; width: 22px; height: 22px; }
  .van-tabbar-item__icon > * { visibility: hidden; }
  .van-tabbar-item__icon::after,
  .n8-pc-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    content: '';
    background-color: currentColor;
    -webkit-mask: var(--pc-icon) center / contain no-repeat;
    mask: var(--pc-icon) center / contain no-repeat;
  }
  .van-tabbar-item__icon::after { position: absolute; inset: 1px; }
  .van-tabbar-item:nth-child(1) { --pc-icon: url('/assets/pc-ui-20261018/icons/store.svg'); }
  .van-tabbar-item:nth-child(2) { --pc-icon: url('/assets/pc-ui-20261018/icons/compass.svg'); }
  .van-tabbar-item:nth-child(3) { --pc-icon: url('/assets/pc-ui-20261018/icons/cart.svg'); }
  .van-tabbar-item:nth-child(4) { --pc-icon: url('/assets/pc-ui-20261018/icons/user.svg'); }
  #app .home-header {
    position: relative;
    z-index: 25;
    height: 0 !important;
    min-height: 0;
    padding: 0 !important;
    margin-top: 64px;
  }
  .home-header .tiktok-img { display: none !important; }
  #app .home-header .header-imgs { position: absolute; right: 0; top: 29px; z-index: 25; }
  #app .home-content > .input-container {
    width: min(680px, 62%);
    margin: 20px auto 24px !important;
    border: 1px solid #e5e9e2;
    border-radius: 999px;
    background: #ffffffd9;
    box-shadow: 0 3px 14px #36544504;
  }
  #app .input-field { background: transparent; }
  .home-content:has(.n8-pc-hero) > .swipe-board { display: none !important; }
  .n8-pc-hero {
    position: relative;
    display: block;
    isolation: isolate;
    width: 100%;
    height: clamp(340px, 29vw, 420px);
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid #ffffffba;
    background: #f2eee4;
    box-shadow: 0 12px 34px #66513d0a;
  }
  .n8-pc-hero__slide { position: absolute; inset: 0; }
  .n8-pc-hero__slide[hidden] { display: none; }
  .n8-pc-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }
  .n8-pc-hero__copy {
    position: absolute;
    top: 50%;
    left: 4.5%;
    width: 40%;
    transform: translateY(-54%);
    color: var(--pc-ink);
  }
  .n8-pc-hero__eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 650; letter-spacing: .17em; color: #53685d; }
  .n8-pc-hero__title { margin: 0 0 18px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.2; font-weight: 650; letter-spacing: -.035em; text-wrap: balance; }
  .n8-pc-hero__description { max-width: 360px; margin: 0 0 26px; font-size: 14px; line-height: 1.7; color: #657367; }
  .n8-pc-hero__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--pc-ink);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .18s, transform .18s;
  }
  .n8-pc-hero__action:hover { background: #426753; transform: translateY(-1px); }
  .n8-pc-hero__action .n8-pc-icon { width: 17px; height: 17px; }
  .n8-pc-hero__controls { position: absolute; bottom: 20px; left: 4.5%; display: flex; align-items: center; gap: 10px; color: #43574a; }
  .n8-pc-hero__count { font-size: 10px; letter-spacing: .12em; font-variant-numeric: tabular-nums; margin-right: 6px; }
  .n8-pc-hero__pagination { display: flex; gap: 6px; margin-right: 16px; }
  .n8-pc-hero__dot { box-sizing: border-box; position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
  .n8-pc-hero__dot::after { position: absolute; content: ''; width: 6px; height: 6px; left: 10px; top: 10px; border-radius: 50%; background: #7e8e8073; }
  .n8-pc-hero__dot[aria-current='true']::after { width: 16px; left: 5px; border-radius: 9px; background: #3a5848; }
  .n8-pc-hero__control { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #5e70542b; border-radius: 50%; background: #ffffff4d; color: #485e50; cursor: pointer; }
  .n8-pc-hero__control .n8-pc-icon { width: 14px; height: 14px; }
  .n8-pc-hero button:focus-visible,
  #app .class-item:focus-visible { outline: 2px solid #257f68; outline-offset: 4px; }
  #app .classes-container { box-sizing: border-box; margin: 18px 0 8px; padding: 14px 6px 16px; overflow: visible; }
  #app .classes-container > .van-space { display: grid !important; width: 100%; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px !important; }
  #app .classes-container .van-space-item { min-width: 0; width: 100%; margin: 0 !important; }
  #app .classes-container .class-item { box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: flex-start; flex-direction: column; gap: 10px; min-width: 0; min-height: 100px; padding: 8px 0; border: 0; border-radius: 16px; color: #57615a; white-space: normal; text-align: center; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; cursor: pointer; transition: color .18s, background .18s; }
  #app .classes-container .class-item::before { display: block; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border-radius: 15px; background: #e9eee6; color: #456252; content: ''; -webkit-mask: none; mask: none; }
  #app [data-n8-category]::before { background-image: var(--category-image) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 24px !important; }
  #app .class-item.item-selected { background: #ffffffc9; color: #245b44; box-shadow: 0 2px 12px #39584106; }
  #app .class-item.item-selected::before { background-color: #dbe8dc; }
  #app .classes-container .class-item:hover { background: #ffffff9e; color: #255c45; }
  [data-n8-category='laptop'] { --category-image: url('/assets/pc-ui-20261018/icons/laptop.svg'); }
  [data-n8-category='appliance'] { --category-image: url('/assets/pc-ui-20261018/icons/appliance.svg'); }
  [data-n8-category='outdoors'] { --category-image: url('/assets/pc-ui-20261018/icons/outdoors.svg'); }
  [data-n8-category='home'] { --category-image: url('/assets/pc-ui-20261018/icons/home.svg'); }
  [data-n8-category='health'] { --category-image: url('/assets/pc-ui-20261018/icons/health.svg'); }
  [data-n8-category='menswear'] { --category-image: url('/assets/pc-ui-20261018/icons/menswear.svg'); }
  [data-n8-category='womenswear'] { --category-image: url('/assets/pc-ui-20261018/icons/womenswear.svg'); }
  [data-n8-category='food'] { --category-image: url('/assets/pc-ui-20261018/icons/food.svg'); }
  [data-n8-category='phone'] { --category-image: url('/assets/pc-ui-20261018/icons/phone.svg'); }
  [data-n8-category='toys'] { --category-image: url('/assets/pc-ui-20261018/icons/toys.svg'); }
  #app .tag-row .tag[data-n8-category] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #59685c; background: #ffffffcf; border: 1px solid #e9eae3; font-size: 12px; }
  #app .tag-row .tag[data-n8-category]::before { display: inline-block; width: 20px; height: 20px; background-size: 18px !important; content: ''; }
  #app .hot-product { scroll-margin-top: 82px; margin-top: 16px; }
  #app .home-content > .hot-product:not(.hot-shop) .hot-product-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #app .home-content > .hot-shop > .van-space { display: grid !important; width: 100%; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px !important; align-items: stretch; }
  #app .home-content > .hot-shop > .van-space > .van-space-item { width: 100%; min-width: 0; margin: 0 !important; }
  #app .hot-product-title { padding: 8px 0 12px; gap: 10px; }
  #app .hot-product-title .title-words { font-size: 21px; font-weight: 650; color: #293c31; }
  #app .hot-product-title .title-icon { color: #537460; background: #e5eee2; font-size: 9px; letter-spacing: .1em; border-radius: 5px; padding: 4px 7px; line-height: 1.3; }
  #app .hot-product-container,
  #app .horiz-product-container { border-color: #e7ebe3; box-shadow: 0 3px 12px #304a3610; border-radius: 16px; transition: transform .2s, box-shadow .2s; }
  #app .hot-product-container:hover,
  #app .horiz-product-container:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #304a3614; }
  #app .hot-product-container .product-info,
  #app .horiz-product-container .product-info { padding: 14px 14px 16px; }
  #app .product-info .product-name { color: #2f3e33; font-size: 13px !important; font-weight: 550; }
  #app .old-price,
  #app .product-popular { color: #8c958d; font-size: 11px; }
  #app .custom-nav-container { border-radius: 0 0 14px 14px; border-color: #e8ede5; background: #ffffffeb; }
  #app .custom-nav-title { color: #344d3d; }
  #app .login-container { border-color: #e5eae0; box-shadow: 0 18px 60px #304a3510; border-radius: 22px; }
  #app .van-button--round { transition: box-shadow .18s, opacity .18s; }
  #app .van-button--round:hover { box-shadow: 0 4px 15px #2e4b301a; }
  .fs-btn { background: #2e4e3c !important; box-shadow: 0 5px 20px #38594226 !important; }
  @media (prefers-reduced-motion: reduce) {
    .n8-pc-hero *, #app .hot-product-container, #app .horiz-product-container { transition: none !important; }
  }
}