/* =========================
       基础设置
    ========================== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --brand-blue: #a5bbd3;
      --brand-blue-deep: #86a3c1;
      --brand-ink: #142033;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family:
        Inter, Arial, "Microsoft YaHei", sans-serif;
      color: #111;
      background: #f5f5f2;
      line-height: 1.6;
    }

    img {
      width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
    }

    .container {
      width: min(1280px, 92%);
      margin: auto;
    }

    /* =========================
       导航栏
    ========================== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(165, 187, 211, 0.96);
      color: var(--brand-ink);
      backdrop-filter: blur(12px);
    }

    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .logo {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 4px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
      font-size: 14px;
    }

    .nav-links a {
      opacity: 0.8;
      transition: 0.2s;
    }

    .nav-links a:hover {
      opacity: 1;
    }

    .nav-button {
      padding: 11px 20px;
      border: 1px solid #fff;
      border-radius: 6px;
      background: #fff;
      color: var(--brand-ink);
      box-shadow:
        0 5px 12px rgba(20, 32, 51, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      font-size: 13px;
      font-weight: 700;
      transition:
        transform 0.2s,
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
    }

    .nav-button:hover {
      border-color: rgba(255, 255, 255, 0.82);
      background: rgba(255, 255, 255, 0.82);
      box-shadow:
        0 7px 16px rgba(20, 32, 51, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transform: translateY(-1px);
    }

    /* =========================
       Hero 首屏
    ========================== */
    .hero {
      position: relative;
      min-height: 760px;
      padding-top: 76px;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: #fff;
      background: #111;
      touch-action: pan-y;
    }

    .hero-fallback {
      background:
        linear-gradient(
          90deg,
          rgba(0,0,0,.9),
          rgba(0,0,0,.48)
        ),
        linear-gradient(
          135deg,
          #111 0%,
          #303030 50%,
          #151515 100%
        );
    }

    .hero-slides,
    .hero-slide {
      position: absolute;
      inset: 0;
    }

    .hero-slides {
      z-index: 0;
      overflow: hidden;
    }

    .hero-slide {
      opacity: 0;
      transform: scale(1.035);
      transition: opacity 0.7s ease, transform 6s ease;
      pointer-events: none;
    }

    .hero-slide.active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    .hero-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero-slider::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.1) 100%);
      pointer-events: none;
    }

    .hero > .container {
      position: relative;
      z-index: 2;
    }

    .hero-content {
      max-width: 760px;
      padding: 100px 0;
      text-shadow: 0 2px 22px rgba(0, 0, 0, 0.24);
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 22px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .hero h1 {
      max-width: 900px;
      font-size: clamp(55px, 8vw, 110px);
      line-height: 0.95;
      letter-spacing: -5px;
      text-transform: uppercase;
    }

    .hero p {
      max-width: 600px;
      margin: 30px 0;
      color: #d1d1d1;
      font-size: 18px;
    }

    .hero-controls {
      position: absolute;
      inset: 76px 0 0;
      z-index: 3;
      pointer-events: none;
    }

    .hero-arrow,
    .hero-dot {
      border: 0;
      color: #fff;
      cursor: pointer;
    }

    .hero-arrow {
      position: absolute;
      top: 50%;
      width: 52px;
      height: 92px;
      border: 1px solid transparent;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: transparent;
      font-size: 25px;
      line-height: 1;
      text-shadow: 0 2px 7px rgba(0, 0, 0, 0.78);
      transform: translateY(-50%);
      transition: background 0.24s, border-color 0.24s, box-shadow 0.24s, transform 0.24s;
      pointer-events: auto;
    }

    .hero-prev {
      left: clamp(18px, 3vw, 52px);
    }

    .hero-next {
      right: clamp(18px, 3vw, 52px);
    }

    .hero-arrow:hover,
    .hero-arrow:focus-visible {
      border-color: rgba(255, 255, 255, 0.42);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(15, 15, 15, 0.2));
      box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
      backdrop-filter: blur(12px);
      transform: translateY(-50%) scale(1.03);
      outline: none;
    }

    .hero-dots {
      position: absolute;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: auto;
    }

    .hero-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.5);
      transition: width 0.25s, background 0.25s;
    }

    .hero-dot.active {
      width: 26px;
      background: #fff;
    }

    .button {
      display: inline-block;
      padding: 15px 26px;
      border: 1px solid #111;
      background: #111;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: 0.25s;
    }

    .button:hover {
      background: #333;
    }

    .button-light {
      background: #fff;
      color: #111;
      border-color: #fff;
    }

    .button-light:hover {
      background: transparent;
      color: #fff;
    }

    /* =========================
       品牌卖点
    ========================== */
    .features {
      background: var(--brand-blue);
      color: var(--brand-ink);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: linear-gradient(
        90deg,
        var(--brand-blue) 0%,
        var(--brand-blue) 12.5%,
        var(--brand-blue-deep) 37.5%,
        var(--brand-blue) 62.5%,
        var(--brand-blue-deep) 87.5%,
        var(--brand-blue-deep) 100%
      );
    }

    .feature {
      padding: 42px 30px;
    }

    .feature-number {
      color: rgba(20, 32, 51, 0.62);
      font-size: 12px;
      font-weight: 800;
    }

    .feature h3 {
      margin: 12px 0 6px;
      font-size: 17px;
      text-transform: uppercase;
    }

    .feature p {
      color: rgba(20, 32, 51, 0.78);
      font-size: 14px;
    }

    /* =========================
       产品区域
    ========================== */
    .products {
      padding: 110px 0;
    }

    .section-heading {
      margin-bottom: 55px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
    }

    .section-heading h2 {
      font-size: clamp(42px, 6vw, 78px);
      line-height: 1;
      letter-spacing: -3px;
      text-transform: uppercase;
    }

    .section-heading p {
      max-width: 430px;
      color: #666;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 60px 24px;
    }

    .product-card {
      min-width: 0;
    }

    .product-card {
      background:#fff;
      border:1px solid #eee;
      padding:20px;
    }

    .product-gallery {
      display: block;
      background:#fff;
    }

    .color-swatches {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      min-height: 32px;
      padding: 17px 6px 2px;
    }

    .color-swatch {
      width: 20px;
      height: 20px;
      padding: 0;
      border: 1px solid rgba(17, 17, 17, 0.16);
      border-radius: 50%;
      background: var(--swatch-color, #9ba1a6);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .color-swatch:hover {
      transform: scale(1.14);
    }

    .color-swatch.active {
      box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px #111,
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .color-swatch:focus-visible {
      outline: 2px solid #111;
      outline-offset: 4px;
    }

    .product-image {
      position: relative;
      width:100%;
      height:500px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      border:1px solid #eee;
    }

    .real-product-image {
      width:100%;
      height:100%;
      object-fit:contain;
      padding:25px;
      transition:transform .3s ease;
    }

    .placeholder-bag {
      width: 54%;
      aspect-ratio: 1.4 / 1;
      position: relative;
      display: grid;
      place-items: center;
      border-radius: 22px 22px 30px 30px;
      background: var(--bag-color, #222);
      color: rgba(255,255,255,.75);
      box-shadow: 0 35px 50px rgba(0,0,0,.18);
      transition:
        background 0.25s,
        transform 0.3s;
    }

    .product-image:hover .real-product-image {
      transform:scale(1.03);
    }

    .placeholder-bag {
      transform: translateY(-8px);
    }

    .placeholder-bag::before {
      content: "";
      position: absolute;
      width: 45%;
      height: 35%;
      top: -25%;
      border: 10px solid var(--bag-color, #222);
      border-bottom: 0;
      border-radius: 40px 40px 0 0;
    }

    .placeholder-bag::after {
      content: "RHDZO";
      font-size: clamp(18px, 3vw, 32px);
      font-weight: 900;
      letter-spacing: 4px;
    }

    .product-index {
      position: absolute;
      top: 22px;
      left: 22px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
    }

    .placeholder-label {
      position: absolute;
      right: 20px;
      bottom: 16px;
      color: #777;
      font-size: 11px;
      text-transform: uppercase;
    }

    .product-info {
      padding-top: 22px;
    }

    .product-top {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    .product-info h3 {
      font-size: 25px;
      text-transform: uppercase;
    }

    .product-category {
      color: #777;
      font-size: 13px;
    }

    .product-description {
      max-width: 520px;
      margin: 10px 0 20px;
      color: #666;
      font-size: 14px;
    }

    /* 变体按钮 */
    .variants {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .variant-button {
      width: 32px;
      height: 32px;
      padding: 3px;
      border: 1px solid transparent;
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
    }

    .variant-button.active {
      border-color: #111;
    }

    .variant-color {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,.15);
    }

    /* =========================
       品牌介绍
    ========================== */
    .brand-section {
      padding: 120px 0;
      background: #181818;
      color: #fff;
    }

    .brand-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .brand-visual {
      min-height: 560px;
      display: grid;
      place-items: center;
      background:
        linear-gradient(135deg, #333, #0d0d0d);
    }

    .brand-visual span {
      font-size: clamp(45px, 8vw, 100px);
      font-weight: 900;
      letter-spacing: 8px;
      transform: rotate(-90deg);
    }

    .brand-copy h2 {
      margin-bottom: 25px;
      font-size: clamp(40px, 5vw, 68px);
      line-height: 1;
      text-transform: uppercase;
    }

    .brand-copy p {
      max-width: 520px;
      margin-bottom: 20px;
      color: #aaa;
    }

    /* =========================
       CTA
    ========================== */
    .cta {
      padding: 130px 0;
      text-align: center;
      background: #ecece7;
    }

    .cta h2 {
      margin-bottom: 20px;
      font-size: clamp(42px, 7vw, 90px);
      line-height: 1;
      letter-spacing: -3px;
      text-transform: uppercase;
    }

    .cta p {
      margin-bottom: 30px;
      color: #666;
    }

    /* =========================
       页脚
    ========================== */
    footer {
      padding: 70px 0 30px;
      background: #0a0a0a;
      color: #fff;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 50px;
      padding-bottom: 60px;
    }

    .footer-logo {
      margin-bottom: 15px;
      font-size: 36px;
      font-weight: 900;
      letter-spacing: 5px;
    }

    .footer-description {
      max-width: 380px;
      color: #777;
    }

    .footer-column h4 {
      margin-bottom: 18px;
      font-size: 13px;
      text-transform: uppercase;
    }

    .footer-column a,
    .footer-column p {
      display: block;
      margin-bottom: 10px;
      color: #777;
      font-size: 14px;
    }

    .copyright {
      padding-top: 25px;
      border-top: 1px solid #222;
      color: #666;
      font-size: 12px;
    }

    /* =========================
       全部产品目录
    ========================== */
    .catalog-main {
      padding-top: 76px;
      background: #f5f5f2;
    }

    .catalog-page .nav-links a.active {
      opacity: 1;
      font-weight: 800;
    }

    .catalog-hero {
      padding: 96px 0 54px;
      border-bottom: 1px solid #d9d9d3;
      background: #ecece7;
    }

    .catalog-hero h1 {
      margin-top: 14px;
      font-size: clamp(58px, 9vw, 118px);
      font-weight: 900;
      line-height: .9;
      letter-spacing: -5px;
      text-transform: uppercase;
    }

    .catalog-intro {
      margin-top: 42px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
    }

    .catalog-intro p {
      max-width: 560px;
      color: #5d5d59;
    }

    .catalog-intro span {
      color: #777;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.6px;
    }

    .catalog-grid-section {
      padding: 54px 0 110px;
    }

    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 54px 22px;
    }

    .catalog-card {
      padding: 0;
      border: 0;
      background: transparent;
    }

    .catalog-card .product-gallery {
      background: transparent;
    }

    .catalog-card .product-image {
      height: auto;
      aspect-ratio: 4 / 5;
      background: #fff;
    }

    .catalog-card .real-product-image {
      padding: 24px;
    }

    .catalog-card .color-swatches {
      padding: 16px 4px 1px;
    }

    .catalog-card .product-info {
      padding: 16px 4px 0;
    }

    .catalog-card .product-info h2 {
      font-size: 20px;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .catalog-card .product-description {
      margin-bottom: 0;
    }

    .catalog-new-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;
      padding: 7px 10px;
      background: var(--brand-blue);
      color: var(--brand-ink);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 1.4px;
    }

    .catalog-empty {
      grid-column: 1 / -1;
      padding: 80px 0;
      color: #666;
      text-align: center;
    }

    /* =========================
       响应式
    ========================== */
    @media (max-width: 900px) {
      .nav-links {
        display: none;
      }

      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        background: linear-gradient(
          90deg,
          var(--brand-blue) 0%,
          var(--brand-blue-deep) 100%
        );
      }

      .product-grid,
      .brand-grid {
        grid-template-columns: 1fr;
      }

      .section-heading {
        align-items: start;
        flex-direction: column;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 600px) {
      .catalog-hero {
        padding: 64px 0 38px;
      }

      .catalog-hero h1 {
        font-size: clamp(48px, 16vw, 72px);
        letter-spacing: -3px;
      }

      .catalog-intro {
        margin-top: 28px;
        align-items: start;
        flex-direction: column;
        gap: 14px;
      }

      .catalog-grid-section {
        padding: 36px 0 72px;
      }

      .catalog-grid {
        grid-template-columns: 1fr;
        gap: 42px;
      }

      .catalog-card {
        padding: 0;
      }
      .nav-button {
        display: none;
      }

      .hero {
        min-height: 680px;
      }

      .hero h1 {
        letter-spacing: -3px;
      }

      .feature-grid {
        grid-template-columns: 1fr;
        background: linear-gradient(
          180deg,
          var(--brand-blue) 0%,
          var(--brand-blue) 12.5%,
          var(--brand-blue-deep) 37.5%,
          var(--brand-blue) 62.5%,
          var(--brand-blue-deep) 87.5%,
          var(--brand-blue-deep) 100%
        );
      }

      .feature {
        border-right: 0;
      }

      .product-grid {
        gap: 50px;
      }

      .real-product-image { width:100%; height:100%; object-fit:contain; padding:40px; transition:.3s; }

    .placeholder-bag {
        width: 65%;
      }

      .brand-visual {
        min-height: 400px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }
    }
  
    /* =========================
       手机端增强适配
    ========================== */
    @media (max-width: 600px) {
      body {
        overflow-x: hidden;
      }

      .container {
        width: calc(100% - 32px);
      }

      .nav {
        min-height: 64px;
        gap: 12px;
      }

      .logo {
        font-size: 22px;
        letter-spacing: 3px;
      }

      .header {
        backdrop-filter: blur(8px);
      }

      .hero {
        min-height: auto;
        padding-top: 64px;
      }

      .hero-content {
        padding: 84px 0 64px;
      }

      .hero-slider .hero-content {
        padding-bottom: 112px;
      }

      .hero-slider::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.32));
      }

      .hero-controls {
        inset: 76px 0 0;
      }

      .hero-arrow {
        width: 42px;
        height: 72px;
        font-size: 22px;
      }

      .hero-prev {
        left: 14px;
      }

      .hero-next {
        right: 14px;
      }

      .hero-dots {
        bottom: 18px;
      }

      .eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
        letter-spacing: 2px;
      }

      .hero h1 {
        max-width: 100%;
        font-size: clamp(42px, 14vw, 62px);
        line-height: .98;
        letter-spacing: -2px;
        overflow-wrap: anywhere;
      }

      .hero p {
        margin: 22px 0;
        font-size: 15px;
        line-height: 1.75;
      }

      .button {
        width: 100%;
        padding: 14px 18px;
        text-align: center;
      }

      .feature {
        padding: 28px 20px;
      }

      .products {
        padding: 64px 0;
      }

      .section-heading {
        margin-bottom: 32px;
        gap: 16px;
      }

      .section-heading h2 {
        font-size: 38px;
        line-height: 1.05;
        letter-spacing: -1.5px;
      }

      .section-heading p {
        font-size: 14px;
      }

      .product-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .product-card {
        padding: 12px;
      }

      .product-gallery {
        display: block;
      }

      .color-swatches {
        gap: 11px;
        padding: 15px 5px 1px;
      }

      .color-swatch {
        width: 19px;
        height: 19px;
      }

      .product-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.05;
      }

      .real-product-image {
        padding: 14px;
      }

      .product-info {
        padding-top: 16px;
      }

      .product-top {
        flex-direction: column;
        gap: 4px;
      }

      .product-info h3 {
        font-size: 21px;
        line-height: 1.2;
      }

      .product-description {
        margin: 10px 0 16px;
        font-size: 13px;
      }

      .variants {
        flex-wrap: wrap;
      }

      .variant-button {
        width: 36px;
        height: 36px;
      }

      .brand-section {
        padding: 72px 0;
      }

      .brand-grid {
        gap: 36px;
      }

      .brand-visual {
        min-height: 260px;
      }

      .brand-visual span {
        font-size: 44px;
        letter-spacing: 5px;
        transform: none;
      }

      .brand-copy h2 {
        margin-bottom: 18px;
        font-size: 38px;
      }

      .brand-copy p {
        font-size: 14px;
      }

      .cta {
        padding: 72px 0;
      }

      .cta h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
      }

      .cta p {
        font-size: 14px;
      }

      footer {
        padding: 56px 0 24px;
      }

      .footer-grid {
        gap: 32px;
        padding-bottom: 40px;
      }

      .footer-logo {
        font-size: 30px;
      }

      .footer-column a,
      .footer-column p {
        font-size: 13px;
        overflow-wrap: anywhere;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-slide {
        transform: none;
        transition: opacity 0.2s linear;
      }
    }