/* Homepage v2 — only loaded when home_v2_enabled(). Does not affect the public layout. */

.hv2-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 16px;
  background: #1f1f23;
  color: #fff;
  font-size: 13px;
}
.hv2-preview-bar a {
  color: #F28C1A;
  font-weight: 600;
  text-decoration: none;
}

.hv2-hero-block {
  background: #fff;
  padding: 16px 16px 8px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.hv2-peek {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  touch-action: pan-y;
  --hv2-peek-side: 9%;
}
.hv2-peek-track {
  display: flex;
  gap: 16px;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.hv2-peek-slide {
  flex: 0 0 82%;
  aspect-ratio: 4 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: block;
}
.hv2-peek-slide picture,
.hv2-peek-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.hv2-peek-slide--flush {
  background: transparent;
  box-shadow: none;
}
.hv2-peek-dots {
  position: absolute;
  right: 11%;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.hv2-peek-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(31,31,35,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
  cursor: pointer;
}
.hv2-peek-dots button.is-on {
  width: 22px;
  background: #1f1f23;
}
.hv2-peek-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  font-size: 20px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}
.hv2-peek-nav.prev {
  left: calc(var(--hv2-peek-side) - 8px);
  transform: translate(-50%, -50%);
}
.hv2-peek-nav.next {
  right: calc(var(--hv2-peek-side) - 8px);
  transform: translate(50%, -50%);
}
.hv2-peek-nav:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.hv2-after-hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
.hv2-board {
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: 10px 10px 12px;
  margin-bottom: 16px;
}
.hv2-sc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 2px;
  position: relative;
}
.hv2-sc-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.hv2-sc-scroll::-webkit-scrollbar { display: none; }
.hv2-sc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 158px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  text-decoration: none;
  color: #1f1f23;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.hv2-sc-ico {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  box-shadow: none;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
}
.hv2-sc-ico svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.hv2-sc--violet .hv2-sc-ico { background: #ede9fe; color: #6d28d9; }
.hv2-sc--blue .hv2-sc-ico { background: #dbeafe; color: #1d4ed8; }
.hv2-sc--sky .hv2-sc-ico { background: #e0f2fe; color: #0369a1; }
.hv2-sc--cyan .hv2-sc-ico { background: #cffafe; color: #0e7490; }
.hv2-sc--pink .hv2-sc-ico { background: #fce7f3; color: #be185d; }
.hv2-sc--fuchsia .hv2-sc-ico { background: #fae8ff; color: #a21caf; }
.hv2-sc--orange .hv2-sc-ico { background: #ffedd5; color: #c2410c; }
.hv2-sc--amber .hv2-sc-ico { background: #fef3c7; color: #b45309; }
.hv2-sc-lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}
.hv2-sc-next {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  font-size: 20px;
  cursor: pointer;
  color: #333;
}

.page-home-v2 {
  background: #fff;
}
.home-v2 {
  max-width: 100%;
}

.home-v2 .usp-section {
  padding: 4px 4px 0;
  margin: 0;
  background: transparent;
  border: 0;
}
.home-v2 .usp-section .container {
  padding: 0;
  max-width: none;
}
.home-v2 .usp-list.variant-soft {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 0 8px;
  border-bottom: 1px solid #f1f3f6;
}
.home-v2 .usp-item {
  flex: 1;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
  border-radius: 0 !important;
  gap: 8px !important;
  overflow: visible;
}
.home-v2 .usp-item + .usp-item {
  border-left: 1px solid #eef0f3 !important;
}
.home-v2 .usp-item::before,
.home-v2 .usp-item:hover {
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
  border-color: transparent !important;
}
.home-v2 .usp-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 0 !important;
}
.home-v2 .usp-item:hover .usp-icon {
  transform: none !important;
  box-shadow: none !important;
}
.home-v2 .usp-icon svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  filter: none !important;
}
.home-v2 .usp-text {
  display: flex;
  align-items: center;
  line-height: 1;
}
.home-v2 .usp-text p { display: none; }
.home-v2 .usp-text h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #374151;
  white-space: nowrap;
}
.home-v2 .usp-item[aria-hidden="true"] { display: none !important; }

.home-v2 .flash-sale-section {
  max-width: 1280px;
  margin: 0 auto 20px;
  padding: 0 16px;
  box-sizing: border-box;
}
.home-v2 .fs-head {
  background: linear-gradient(90deg, #1f1f23 0%, #3d2a12 85%);
  color: #fff;
  margin: 0;
  padding: 12px 16px;
  align-items: center;
  border-radius: 16px 16px 0 0;
}
.home-v2 .fs-title {
  color: #fff;
  font-style: italic;
  font-size: 18px;
  letter-spacing: .04em;
}
.home-v2 .fs-title:after { display: none; }
.home-v2 .fs-left { flex-direction: row; align-items: center; gap: 16px; }
.home-v2 .fs-countdown {
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
}
.home-v2 .cd-time {
  background: #111;
  color: #fff;
}
.home-v2 .fs-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
}
.home-v2 .fs-btn:hover {
  background: #F28C1A;
  border-color: #F28C1A;
  color: #fff;
}
.home-v2 .hv2-flash .fs-viewport {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.home-v2 .badge-disc {
  border-radius: 0 0 8px 0;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  padding: 5px 12px 5px 8px;
}

.home-v2 .brand-showcase {
  background: transparent;
  border: 0;
  max-width: 1280px;
  margin: 0 auto 20px;
  padding: 8px 16px 16px;
  border-radius: 0;
}
.home-v2 .brand-showcase-header {
  text-align: left;
  margin-bottom: 10px;
  padding: 0;
}
.home-v2 .brand-showcase-title {
  color: #1f1f23;
  font-size: 18px;
  text-shadow: none;
}
.home-v2 .brand-showcase-subtitle { display: none; }
.home-v2 .brand-carousel-row { margin-bottom: 8px; padding: 4px 0; }
.home-v2 .brand-logo-item {
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border: 1px solid #eceff3;
}

.home-v2 .hs-section,
.home-v2 .rec-section {
  max-width: 1280px;
  margin: 0 auto 20px;
  padding: 0 16px;
}
.home-v2 .hs-title::after,
.home-v2 .hs-trending .hs-title::after { display: none; }
.home-v2 .hs-title { padding-bottom: 0; font-size: 18px; }

@media (max-width: 1100px) {
  .hv2-peek { --hv2-peek-side: 6%; }
  .hv2-peek-slide {
    flex-basis: 88%;
    aspect-ratio: 4 / 1;
  }
  .hv2-peek-dots { right: 7%; }
  .home-v2 .usp-list.variant-soft { flex-wrap: nowrap; overflow-x: auto; }
  .home-v2 .usp-item { flex: 1 0 auto; }
}

@media (max-width: 640px) {
  .hv2-hero-block {
    padding: 8px 0;
    max-width: none;
  }
  .hv2-peek-slide {
    flex: 0 0 100%;
    width: auto;
    max-width: none;
    aspect-ratio: 3 / 1;
    border-radius: 0;
  }
  .hv2-peek-slide picture,
  .hv2-peek-slide img {
    object-fit: cover;
    object-position: top center;
  }
  .hv2-peek-track { gap: 0; }
  .hv2-peek-nav { display: none; }
  .hv2-peek-dots { right: 12px; bottom: 10px; }
  .hv2-after-hero { padding: 0 12px; }
  .hv2-board { padding: 6px 4px 8px; }
  .hv2-sc-row { padding: 8px 0 2px; gap: 0; }
  .hv2-sc-scroll { display: flex; gap: 0; }
  .hv2-sc {
    flex-direction: column;
    justify-content: flex-start;
    flex: 0 0 calc(100% / 6.5);
    min-width: 52px;
    width: calc(100% / 6.5);
    padding: 4px 2px 2px;
    gap: 6px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hv2-sc-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .hv2-sc-ico svg {
    width: 22px;
    height: 22px;
  }
  .hv2-sc-lbl {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
  }
  .hv2-sc-next { display: none; }
  .home-v2 .usp-section { padding: 2px 0 0; }
  .home-v2 .usp-section .container {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .home-v2 .usp-list.variant-soft {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    overflow: visible;
    gap: 0;
    padding: 6px 0 10px;
  }
  .home-v2 .usp-list.hv2-usp-run {
    animation: hv2-usp-run 22s linear infinite;
  }
  .home-v2 .usp-list.hv2-usp-run:hover {
    animation-play-state: paused;
  }
  .home-v2 .usp-item,
  .home-v2 .usp-item[aria-hidden="true"] {
    display: flex !important;
    flex: 0 0 auto !important;
    padding: 2px 16px !important;
    gap: 6px !important;
    border-left: 0 !important;
  }
  .home-v2 .usp-item + .usp-item {
    border-left: 0 !important;
    position: relative;
  }
  .home-v2 .usp-item + .usp-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    background: #e5e7eb;
    transform: translateY(-50%);
  }
  .home-v2 .usp-icon,
  .home-v2 .usp-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .home-v2 .usp-icon { flex-basis: 18px !important; }
  .home-v2 .usp-text h3 { font-size: 12px; }
  .home-v2 .flash-sale-section,
  .home-v2 .brand-showcase,
  .home-v2 .hs-section,
  .home-v2 .rec-section { padding-left: 12px; padding-right: 12px; }
  .home-v2 .fs-head { border-radius: 12px 12px 0 0; }
  .home-v2 .fs-left { flex-wrap: wrap; gap: 8px; }
  .hv2-flash, .hv2-rail, .hv2-brands, .hv2-long-banner, .hv2-edge { padding-left: 12px; padding-right: 12px; }
  .hv2-flash-next,
  .hv2-hscroll-btn { display: none; }
}

.hv2-flash,
.hv2-rail,
.hv2-brands,
.hv2-long-banner,
.hv2-edge {
  max-width: 1280px;
  margin: 0 auto 20px;
  padding: 0 16px;
  box-sizing: border-box;
}

.hv2-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hv2-rail-head h2 {
  margin: 0;
  font-size: 18px;
}
.hv2-rail-head a,
.hv2-flash-all {
  color: #D97809;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.hv2-rail-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: stretch;
}
.hv2-teaser {
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 270px;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hv2-teaser::before,
.hv2-teaser::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hv2-teaser-logo,
.hv2-teaser-copy { position: relative; z-index: 1; }
.hv2-teaser-foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
}
.hv2-teaser-logo {
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  width: fit-content;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.hv2-teaser-logo img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 108px;
  object-fit: contain;
}
.hv2-teaser-copy { display: flex; flex-direction: column; }
.hv2-teaser small { letter-spacing: .08em; font-weight: 700; opacity: .85; font-size: 11px; }
.hv2-teaser strong { font-size: 20px; margin: 6px 0 12px; line-height: 1.15; }
.hv2-teaser a { color: #fff; font-weight: 600; text-decoration: none; }
.hv2-teaser--navy { background: linear-gradient(180deg, #1f2937, #111827); }
.hv2-teaser--orange { background: linear-gradient(180deg, #F28C1A, #D97809); }

.hv2-teaser--gaming {
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(0,245,255,.28), transparent 55%),
    radial-gradient(90% 70% at 110% 0%, rgba(255,0,128,.32), transparent 50%),
    linear-gradient(165deg, #070714 0%, #0b1224 55%, #05050c 100%);
}
.hv2-teaser--gaming::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,.1) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
}
.hv2-teaser--gaming::after {
  width: 90px; height: 90px;
  right: -18px; top: -18px;
  border: 2px solid rgba(0,245,255,.35);
  transform: rotate(18deg);
  border-radius: 8px;
}
.hv2-teaser--gaming.hv2-teaser-brand--asus {
  background:
    radial-gradient(100% 80% at 0% 110%, rgba(255,36,66,.4), transparent 55%),
    radial-gradient(90% 70% at 120% -10%, rgba(0,245,255,.28), transparent 50%),
    linear-gradient(165deg, #0a0a0f, #1a0508 70%, #050505);
}
.hv2-teaser--gaming.hv2-teaser-brand--hp {
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(50,242,124,.28), transparent 55%),
    linear-gradient(165deg, #06110a, #0a1a12 60%, #030805);
}
.hv2-teaser--gaming.hv2-teaser-brand--hp::before {
  background-image:
    linear-gradient(rgba(50,242,124,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50,242,124,.12) 1px, transparent 1px);
}
.hv2-teaser--gaming.hv2-teaser-brand--lenovo {
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(225,37,27,.4), transparent 55%),
    linear-gradient(165deg, #140404, #2a0707 60%, #080202);
}
.hv2-teaser--gaming.hv2-teaser-brand--acer {
  background:
    radial-gradient(110% 80% at 0% 100%, rgba(131,184,26,.35), transparent 55%),
    linear-gradient(165deg, #061008, #0d1a08 60%, #030503);
}

.hv2-teaser--laptop {
  background: linear-gradient(165deg, #1e3a5f, #0f172a);
}
.hv2-teaser--laptop.hv2-teaser-brand--hp {
  background: linear-gradient(165deg, #0096D6, #003087);
}
.hv2-teaser--laptop.hv2-teaser-brand--asus {
  background: linear-gradient(165deg, #1b2430, #0b1016);
}
.hv2-teaser--laptop.hv2-teaser-brand--lenovo {
  background: linear-gradient(165deg, #E2231A, #7a0d0d);
}
.hv2-teaser--laptop.hv2-teaser-brand--acer {
  background: linear-gradient(165deg, #83B81A, #1B5E20);
}

.hv2-teaser--printer {
  color: #1e293b;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%),
    linear-gradient(165deg, #eef3f8, #d5e0ea);
}
.hv2-teaser--printer a { color: #0f4c81; }
.hv2-teaser--printer.hv2-teaser-brand--hp {
  color: #fff;
  background: linear-gradient(165deg, #0096D6, #004B87);
}
.hv2-teaser--printer.hv2-teaser-brand--hp a,
.hv2-teaser--printer.hv2-teaser-brand--epson a,
.hv2-teaser--printer.hv2-teaser-brand--brother a { color: #fff; }
.hv2-teaser--printer.hv2-teaser-brand--epson {
  color: #fff;
  background: linear-gradient(165deg, #003399, #001a4d);
}
.hv2-teaser--printer.hv2-teaser-brand--brother {
  color: #fff;
  background: linear-gradient(165deg, #C8102E, #3b0a12);
}

.hv2-teaser--pc {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(148,163,184,.25), transparent 50%),
    linear-gradient(165deg, #334155, #0f172a);
}
.hv2-teaser--pc.hv2-teaser-brand--hp { background: linear-gradient(165deg, #64748b, #0f172a); }
.hv2-teaser--pc.hv2-teaser-brand--lenovo { background: linear-gradient(165deg, #334155, #7a0d0d); }
.hv2-teaser--pc.hv2-teaser-brand--asus { background: linear-gradient(165deg, #1e293b, #020617); }

.hv2-teaser--gadget {
  background:
    radial-gradient(90% 70% at 110% 10%, rgba(167,139,250,.4), transparent 50%),
    linear-gradient(165deg, #4338ca, #1e1b4b);
}
.hv2-teaser--arrival {
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(45,212,191,.4), transparent 50%),
    linear-gradient(165deg, #0f766e, #134e4a);
}
.hv2-teaser--trending {
  background:
    radial-gradient(90% 70% at 110% 0%, rgba(251,191,36,.35), transparent 50%),
    linear-gradient(165deg, #292524, #1c1917);
}

.hv2-teaser-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.hv2-teaser--custom {
  color: #fff;
  background: #16121f !important;
}
.hv2-teaser--custom a { color: #fff; }
.hv2-teaser--custom.hv2-teaser-brand--lenovo { background: #2e1064 !important; }
.hv2-teaser--custom.hv2-teaser-brand--acer { background: #143d16 !important; }
.hv2-teaser--custom.hv2-teaser-brand--hp { background: #003087 !important; }
.hv2-teaser-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(12,8,20,.96) 0%,
    rgba(12,8,20,.78) 22%,
    rgba(12,8,20,.4) 42%,
    rgba(12,8,20,.12) 62%,
    transparent 82%
  );
}
.hv2-teaser--custom.hv2-teaser-brand--lenovo .hv2-teaser-fade {
  background: linear-gradient(to top,
    #2e1064 0%,
    rgba(46,16,100,.88) 24%,
    rgba(46,16,100,.45) 48%,
    rgba(46,16,100,.12) 68%,
    transparent 86%
  );
}
.hv2-teaser--custom.hv2-teaser-brand--hp .hv2-teaser-fade {
  background: linear-gradient(to top,
    #003087 0%,
    rgba(0,48,135,.88) 24%,
    rgba(0,48,135,.42) 50%,
    transparent 84%
  );
}
.hv2-teaser-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hv2-teaser-photo {
  position: absolute;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.14) saturate(1.06);
}
.hv2-teaser--printer .hv2-teaser-photo {
  mix-blend-mode: multiply;
  filter: contrast(1.08);
}
.hv2-teaser-pose-p1 .hv2-teaser-photo--a { width: 168%; right: -52%; bottom: -6%; transform: rotate(14deg); }
.hv2-teaser-pose-p1 .hv2-teaser-photo--b { width: 92%; left: -28%; top: -8%; transform: rotate(-18deg); opacity: .45; }
.hv2-teaser-pose-p2 .hv2-teaser-photo--a { width: 158%; right: -48%; top: 4%; transform: rotate(-16deg); }
.hv2-teaser-pose-p2 .hv2-teaser-photo--b { width: 88%; right: -18%; bottom: -12%; transform: rotate(12deg); opacity: .4; }
.hv2-teaser-pose-p3 .hv2-teaser-photo--a { width: 178%; right: -62%; bottom: -10%; transform: rotate(8deg); }
.hv2-teaser-pose-p3 .hv2-teaser-photo--b { display: none; }
.hv2-teaser-pose-p4 .hv2-teaser-photo--a { width: 150%; left: -38%; bottom: -4%; transform: rotate(-22deg); }
.hv2-teaser-pose-p4 .hv2-teaser-photo--b { width: 80%; right: -22%; top: 6%; transform: rotate(18deg); opacity: .38; }
.hv2-teaser-pose-p5 .hv2-teaser-photo--a { width: 162%; right: -28%; bottom: 18%; transform: rotate(20deg); }
.hv2-teaser-pose-p5 .hv2-teaser-photo--b { display: none; }
.hv2-teaser-pose-p6 .hv2-teaser-photo--a { width: 128%; right: -36%; bottom: -8%; transform: rotate(11deg); }
.hv2-teaser-pose-p6 .hv2-teaser-photo--b { width: 110%; left: -32%; top: -6%; transform: rotate(-14deg); opacity: .55; }

.hv2-rail-view { position: relative; min-width: 0; }
.hv2-rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.hv2-rail-track::-webkit-scrollbar { display: none; }
.hv2-hscroll {
  position: relative;
  min-width: 0;
}
.hv2-hscroll-btn {
  position: absolute;
  top: 40%;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  color: #1f1f23;
}
.hv2-hscroll-btn.prev { left: 4px; }
.hv2-hscroll-btn.next { right: 4px; }
.hv2-hscroll-btn[hidden] { display: none !important; }
.hv2-see-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100%;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(255,255,255,.14), transparent 52%),
    linear-gradient(165deg, #F28C1A, #D97809 55%, #9a3412);
}
.hv2-see-all i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #D97809;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 20px;
  font-weight: 700;
}

.hv2-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eceff3;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #1f1f23;
  min-width: 0;
  height: 100%;
}
.hv2-card-img {
  aspect-ratio: 1;
  background: #f8f9fb;
  position: relative;
}
.hv2-card-img img { width: 100%; height: 100%; object-fit: contain; }
.hv2-disc {
  position: absolute;
  top: 0;
  left: 0;
  background: #e11d48;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px 5px 8px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.hv2-stock {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  z-index: 2;
  cursor: help;
}
.hv2-stock--ready { background: #10b981; }
.hv2-stock--low { background: #f59e0b; }
.hv2-stock--out { background: #ef4444; }
.hv2-card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.hv2-card-name {
  font-size: 13px;
  line-height: 1.35;
  height: 2.7em;
  overflow: hidden;
  margin-bottom: 4px;
}
.hv2-card .spec-chips {
  font-size: 11px;
  color: #64748b;
  margin: 0 0 6px;
  line-height: 1.3;
  font-weight: 500;
  min-height: 1.3em;
}
.hv2-card .spec-chips .spec-divider {
  margin: 0 4px;
  opacity: .6;
}
.hv2-card-price { color: #D97809; font-weight: 600; font-size: 14px; }
.hv2-card-was { color: #6b7280; font-size: 11px; text-decoration: line-through; }
.hv2-card .badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 2px 0 6px;
  min-height: 0;
}
.hv2-card .badge-row .voucher-badge-inline ~ .voucher-badge-inline { display: none; }
.hv2-card .paylater-compact { margin: 0; }
.hv2-card .trending-stats { margin: 6px 0 0; }
.hv2-card .trending-sold {
  font-size: 11px;
  padding: 2px 6px;
}
.hv2-card .meta-line {
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.hv2-card .meta-line .sold { font-weight: 400; color: #6b7280; }
.hv2-card .card-rating { font-size: 11px; }
.hv2-card-cd {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 4px 6px;
  display: inline-flex;
}
.hv2-card-img .flash-sale-badge,
.hv2-card-img .preorder-badge {
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  padding: 3px 6px;
}
.hv2-buy {
  display: block;
  margin-top: 8px;
  text-align: center;
  background: #F28C1A;
  color: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
}

.hv2-flash {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  padding: 0 16px;
  max-width: 1280px;
}
.hv2-flash-shell {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #fed7aa;
  background: #fff8f1;
}
.hv2-flash-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px),
    linear-gradient(90deg, #9a3412 0%, #c2410c 42%, #F28C1A 100%);
  color: #fff;
}
.hv2-flash-bolt {
  width: 16px;
  height: 24px;
  flex-shrink: 0;
  background: #fde047;
  clip-path: polygon(38% 0, 100% 0, 58% 40%, 92% 40%, 0 100%, 42% 52%, 12% 52%);
  filter: drop-shadow(0 0 8px rgba(253,224,71,.75));
  animation: hv2-flash-pulse 1.35s ease-in-out infinite;
}
@keyframes hv2-flash-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .85; }
}
.hv2-flash-title {
  font-style: italic;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.hv2-flash-all {
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
}
.hv2-flash .fs-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
}
.hv2-flash-cd-label {
  font-size: 11px;
  font-weight: 600;
  opacity: .92;
  margin-right: 2px;
}
.hv2-flash .cd-time {
  background: #111;
  color: #fff;
  min-width: 34px;
  padding: 5px 6px;
  border-radius: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.12);
}
.hv2-flash .cd-sep {
  color: #fde047;
  font-weight: 800;
}
.hv2-flash-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 12px;
  align-items: stretch;
  position: relative;
  background: #fff8f1;
}
.hv2-flash-teaser {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  min-height: 270px;
  background: #9a3412;
}
.hv2-flash-teaser-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.hv2-flash-teaser-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(69,10,10,.96) 0%,
    rgba(127,29,29,.82) 22%,
    rgba(194,65,12,.42) 48%,
    transparent 78%
  );
}
.hv2-flash-teaser .hv2-teaser-foot,
.hv2-flash-teaser .hv2-teaser-copy { position: relative; z-index: 1; }
.hv2-flash-teaser small {
  display: block;
  color: #fde047;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px;
}
.hv2-flash-teaser strong {
  display: block;
  margin: 6px 0 10px;
  font-size: 20px;
  line-height: 1.15;
}
.hv2-flash-teaser a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.hv2-flash-teaser-cd { margin: 8px 0 10px; }
.hv2-flash-teaser-cd > span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .92;
  margin-bottom: 4px;
  color: #fff;
}
.hv2-flash-teaser-cd div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hv2-flash-teaser-cd b {
  min-width: 32px;
  padding: 5px 0;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.12);
}
.hv2-flash-teaser-cd i {
  font-style: normal;
  font-weight: 800;
  color: #fde047;
}
.hv2-flash .fs-track { align-items: stretch; }
.hv2-flash .fs-item {
  flex: 0 0 168px;
  max-width: 168px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.hv2-flash .fs-card,
.hv2-flash .hv2-card,
.hv2-flash .hv2-see-all {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 100%;
}
.hv2-flash .hv2-card { border-color: #fed7aa; }
.hv2-flash .hv2-buy { background: #c2410c; }
.hv2-flash .fs-viewport { position: relative; min-width: 0; }
.hv2-flash-next { right: 4px; }

.hv2-brands-head {
  text-align: center;
  margin-bottom: 12px;
}
.hv2-brands-head span {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c2410c;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 8px;
}
.hv2-brands-head h2 {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: #1f1f23;
}
.hv2-brands-shell {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  touch-action: pan-y;
}
.hv2-brands-mask {
  overflow: hidden;
  touch-action: pan-y;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hv2-brands-mask + .hv2-brands-mask { margin-top: 8px; }
.hv2-brands-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 10px;
  padding: 2px 10px;
  animation: hv2-brand-run 55s linear infinite;
  will-change: transform;
  pointer-events: auto;
}
.hv2-brands-track--rev {
  animation-duration: 70s;
  animation-direction: reverse;
}
.hv2-brands-shell:hover .hv2-brands-track,
.hv2-brands-shell:active .hv2-brands-track,
.hv2-brands-shell.is-paused .hv2-brands-track {
  animation-play-state: paused;
}
@keyframes hv2-brand-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hv2-brand {
  flex: 0 0 104px;
  flex-shrink: 0;
  height: 58px;
  background: #fff;
  border: 1px solid #eceff3;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hv2-brand:hover {
  transform: translateY(-2px);
  border-color: #fdba74;
  box-shadow: 0 10px 18px -12px rgba(217, 120, 9, .45);
}
.hv2-brand img { max-height: 32px; max-width: 92%; width: auto; }
@keyframes hv2-usp-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-brands-track { animation-duration: 120s; }
  .home-v2 .usp-list.hv2-usp-run { animation: none; }
  .home-v2 .usp-section .container {
    overflow-x: auto;
    mask-image: none;
  }
}

.hv2-long-banner {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}
.hv2-long-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.hv2-long-banner--mob { display: none; }
@media (max-width: 768px) {
  .hv2-long-banner--desk { display: none; }
  .hv2-long-banner--mob { display: block; }
  .hv2-long-banner { border-radius: 0; }
}
.hv2-edge {
  display: block;
  border-radius: 14px;
  padding: 22px 24px;
  background: linear-gradient(100deg, #1f2937, #D97809);
  color: #fff;
  text-decoration: none;
}
.hv2-edge h2 { margin: 0 0 6px; font-size: 20px; }
.hv2-edge p { margin: 0 0 8px; opacity: .9; }
.hv2-edge span { font-weight: 600; }

.hv2-resume { padding: 0 16px; }
.hv2-resume-shell {
  border-radius: 16px;
  overflow: visible;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
}
.hv2-resume-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 10px;
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(99,102,241,.22), transparent 55%),
    linear-gradient(90deg, #312e81, #4338ca 55%, #6366f1);
  color: #fff;
}
.hv2-resume-mark {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  position: relative;
}
.hv2-resume-mark::before,
.hv2-resume-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hv2-resume-mark::before {
  width: 16px;
  height: 14px;
  border: 2px solid #fde68a;
  border-top: 0;
  border-radius: 0 0 5px 5px;
}
.hv2-resume-mark::after {
  width: 10px;
  height: 6px;
  border: 2px solid #fde68a;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-top: -10px;
}
.hv2-resume-copy { min-width: 0; flex: 1; }
.hv2-resume-copy h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.hv2-resume-copy p {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: .92;
  line-height: 1.35;
}
.hv2-resume .hv2-hscroll {
  padding: 12px 16px 16px;
  background: #eef2ff;
  border-radius: 0 0 16px 16px;
}
.hv2-resume .rec-grid {
  padding: 0;
  scrollbar-width: none;
}
.hv2-resume .rec-grid::-webkit-scrollbar { display: none; }
.hv2-resume .hs-card {
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
}
.hv2-resume .hs-card .body {
  padding: 8px 8px 10px;
  gap: 4px;
  min-height: 0;
}
.hv2-resume .hs-card .title {
  font-size: 12px;
  line-height: 1.3;
  height: 2.6em;
  margin: 0;
}
.hv2-resume .hs-card .badge-row {
  margin: 0;
  min-height: 0;
  gap: 3px;
}
.hv2-resume .hs-card .spec-chips {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv2-resume .hs-card .prices {
  margin-top: 0;
  gap: 4px;
}
.hv2-resume .hs-card .prices .final { font-size: 13px; }
.hv2-resume .hs-card .meta-line {
  margin-top: 2px;
  font-size: 11px;
  gap: 4px;
}

.home-v2 .rec-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  grid-template-columns: none !important;
  grid-template-rows: none;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;
  scrollbar-width: none;
  align-items: stretch;
}
.home-v2 .rec-grid::-webkit-scrollbar { display: none; }
.hv2-rec .hv2-hscroll { margin-top: 4px; }
@media (max-width: 1100px) {
  .hv2-rail-body { grid-template-columns: 148px 1fr; }
  .hv2-teaser { min-height: 222px; }
  .hv2-flash-body { grid-template-columns: 168px 1fr; }
}
@media (max-width: 768px) {
  .hv2-card-img { aspect-ratio: 1; }
  .hv2-card-body { padding: 8px; }
  .hv2-card-name {
    font-size: 12px;
    line-height: 1.3;
    height: 2.6em;
    margin-bottom: 2px;
  }
  .hv2-card .spec-chips {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    min-height: 0;
    max-width: 100%;
  }
  .hv2-card .spec-chips .spec-divider { margin: 0 2px; }
  .hv2-card-cd,
  .hv2-buy { display: none !important; }
  .hv2-card .badge-row {
    flex-wrap: nowrap;
    overflow: hidden;
    max-height: 20px;
    margin: 0 0 4px;
  }
  .hv2-card-price { font-size: 13px; }
  .hv2-card-was { font-size: 10px; min-height: 1.2em; }
  .hv2-card .meta-line {
    margin-top: auto;
    font-size: 10px;
    min-height: 1.2em;
  }
  .hv2-card .trending-sold { font-size: 9px; padding: 1px 5px; }
  .hv2-card-img .flash-sale-badge,
  .hv2-card-img .preorder-badge {
    font-size: 9px;
    padding: 2px 5px;
    max-width: calc(100% - 12px);
  }

  .hv2-rail,
  .hv2-flash {
    min-width: 0;
    max-width: 100%;
  }
  .hv2-rail-body {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .hv2-rail-body::-webkit-scrollbar { display: none; }
  .hv2-teaser {
    flex: 0 0 148px;
    width: 148px;
    align-self: stretch;
    min-height: 100%;
    height: auto;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0;
  }
  .hv2-teaser-bg,
  .hv2-flash-teaser-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
    display: block;
  }
  .hv2-teaser-foot,
  .hv2-flash-teaser .hv2-teaser-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .hv2-teaser--custom {
    padding: 0;
  }
  .hv2-teaser--custom .hv2-teaser-foot,
  .hv2-flash-teaser .hv2-teaser-foot {
    padding: 12px 10px;
  }
  .hv2-teaser-logo { margin-bottom: 10px; }
  .hv2-teaser-logo img { height: 22px; }
  .hv2-teaser strong { font-size: 16px; margin: 2px 0 8px; }
  .hv2-rail-view { flex: 0 0 auto; width: max-content; align-self: stretch; }
  .hv2-rail-track {
    overflow: visible;
    grid-auto-columns: 148px;
    align-items: stretch;
  }
  .hv2-see-all { min-height: 100%; height: 100%; }
  .hv2-rail-next { display: none; }
  .hv2-flash-body {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .hv2-flash-body::-webkit-scrollbar { display: none; }
  .hv2-flash-teaser {
    flex: 0 0 148px;
    width: 148px;
    align-self: stretch;
    min-height: 100%;
    height: auto;
    padding: 0;
  }
  .hv2-flash .fs-viewport {
    flex: 0 0 auto;
    width: max-content;
    overflow: visible;
    align-self: stretch;
    display: flex;
  }
  .hv2-flash .fs-track {
    overflow: visible;
    align-items: stretch;
    flex: 1;
  }
  .hv2-flash .fs-item {
    flex: 0 0 148px;
    max-width: 148px;
  }
  .hv2-flash-next,
  .hv2-hscroll-btn { display: none; }
}