@import url("detail.css");

    .vetraglove-page .product-detail-hero .hero-visual-source {
      min-height: 0;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 0;
    }

    .vetraglove-page .product-detail-hero .hero-visual-source img {
      position: static;
      inset: auto;
      width: 72%;
      height: 72%;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center;
      transform: none !important;
    }

    .glove-hero-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      width: min(100%, 560px);
    }

    .glove-hero-actions .button {
      width: 100%;
      min-height: 64px;
      justify-content: center;
      padding-inline: 24px;
    }

    .glove-section-head {
      display: block;
      margin-bottom: clamp(42px, 5vw, 70px);
    }

    .glove-section-head > div { max-width: none; }

    .glove-section-head h2 {
      max-width: none;
      margin-bottom: 16px;
      white-space: nowrap;
    }

    .glove-section-head .glove-section-subtitle {
      max-width: none;
      margin: 0;
      color: var(--text-muted);
      font-size: clamp(17px, 1.45vw, 22px);
      white-space: nowrap;
    }

    .glove-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid rgba(17, 45, 95, .16);
      border-radius: 16px;
      background: linear-gradient(135deg, #fff, #f6f8fb);
      box-shadow: 0 20px 52px rgba(17, 45, 95, .1);
    }

    .glove-summary article {
      position: relative;
      min-height: 210px;
      overflow: hidden;
      padding: 38px 34px;
      border-right: 1px solid rgba(17, 45, 95, .12);
      background: rgba(255, 255, 255, .62);
    }

    .glove-summary article:last-child { border-right: 0; }
    .glove-summary article::before { content: ""; position: absolute; top: -42px; right: -42px; width: 126px; height: 126px; border: 1px solid rgba(0, 183, 190, .18); border-radius: 50%; box-shadow: 0 0 0 18px rgba(0, 183, 190, .035), 0 0 0 36px rgba(17, 45, 95, .025); }
    .glove-summary article::after { content: ""; position: absolute; left: 34px; bottom: 30px; width: 44px; height: 2px; background: linear-gradient(90deg, var(--brand-aurora), transparent); }
    .glove-summary b { position: relative; z-index: 1; display: block; margin-bottom: 18px; color: var(--text-heading); font-size: clamp(25px, 2vw, 34px); line-height: 1.25; }
    .glove-summary span { position: relative; z-index: 1; display: block; color: var(--text-muted); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.7; }
    .vetraglove-page .context-cta h2 { white-space: nowrap; }
    .vetraglove-page .context-cta .cta-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
    .vetraglove-page .context-cta .actions { width: 470px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .vetraglove-page .context-cta .actions .button { width: 100%; min-height: 60px; justify-content: center; }

    .glove-capability-card {
      min-height: 650px;
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr) 74px;
      overflow: hidden;
      border: 1px solid rgba(17, 45, 95, .16);
      border-radius: 16px;
      background: linear-gradient(115deg, #e7edf4 0%, #eef2f7 52%, #f8fafc 100%);
      box-shadow: 0 24px 64px rgba(17, 45, 95, .13);
    }

    .glove-capability-thumbs {
      position: relative;
      z-index: 4;
      display: grid;
      align-content: center;
      gap: 14px;
      padding: 22px 14px;
      border-right: 1px solid rgba(17, 45, 95, .12);
      background: rgba(255, 255, 255, .48);
      backdrop-filter: blur(14px);
    }

    .glove-capability-thumb {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: rgba(255, 255, 255, .54);
      cursor: pointer;
      opacity: .58;
      transition: opacity 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms ease;
    }

    .glove-capability-thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: saturate(.78);
    }

    .glove-capability-thumb:hover,
    .glove-capability-thumb:focus-visible { opacity: .86; transform: translateX(3px); }

    .glove-capability-thumb.is-active {
      border-color: rgba(0, 160, 170, .58);
      background: rgba(255, 255, 255, .9);
      box-shadow: inset 3px 0 var(--brand-aurora), 0 8px 22px rgba(17, 45, 95, .08);
      opacity: 1;
    }

    .glove-capability-stage { position: relative; min-width: 0; }

    .glove-capability-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: minmax(0, 1.38fr) minmax(320px, .72fr);
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      transition: opacity 380ms ease, transform 480ms ease, visibility 0s linear 480ms;
    }

    .glove-capability-slide.is-active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s;
    }

    .glove-capability-visual {
      position: relative;
      min-width: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: clamp(28px, 4vw, 62px);
    }

    .glove-capability-visual::after {
      content: "";
      position: absolute;
      inset: 0 -1px 0 auto;
      z-index: 2;
      width: 26%;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(238, 242, 247, 0), rgba(238, 242, 247, .94) 76%, #eef2f7 100%);
    }

    .glove-capability-image-box {
      position: relative;
      width: min(100%, 670px);
      height: min(520px, 52vw);
      min-height: 390px;
      display: grid;
      place-items: center;
    }

    .glove-capability-image-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 24px 30px rgba(17, 45, 95, .12));
    }

    .glove-capability-image-box.is-glove {
      width: min(72%, 390px);
      height: 560px;
      min-height: 0;
    }

    .glove-highlight {
      position: absolute;
      left: var(--x);
      top: var(--y);
      z-index: 3;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(0, 177, 186, .94);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 212, 212, .22) 0 20%, rgba(0, 212, 212, .08) 21% 54%, transparent 55%);
      box-shadow: 0 0 0 8px rgba(0, 212, 212, .08), 0 0 28px rgba(0, 177, 186, .22);
      transform: translate(-50%, -50%);
    }

    .glove-highlight::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #00aeb8;
      transform: translate(-50%, -50%);
    }

    .glove-capability-copy {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 56px 38px 56px 20px;
    }

    .glove-capability-copy .index {
      color: rgba(17, 45, 95, .34);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .12em;
    }

    .glove-capability-copy h3 {
      margin: 24px 0 18px;
      color: var(--text-heading);
      font-size: clamp(34px, 3.2vw, 54px);
    }

    .glove-capability-copy p {
      max-width: 440px;
      margin: 0;
      color: var(--text-muted);
      font-size: clamp(17px, 1.35vw, 21px);
      line-height: 1.85;
    }

    .glove-capability-copy dl {
      margin: 34px 0 0;
      border-top: 1px solid rgba(17, 45, 95, .14);
    }

    .glove-capability-copy dl > div {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 16px;
      padding: 15px 0;
      border-bottom: 1px solid rgba(17, 45, 95, .1);
    }

    .glove-capability-copy dt {
      color: rgba(17, 45, 95, .5);
      font-size: 13px;
    }

    .glove-capability-copy dd {
      margin: 0;
      color: var(--text-heading);
      font-size: 14px;
      font-weight: 700;
    }

    .glove-capability-arrows {
      position: relative;
      z-index: 4;
      display: grid;
      align-content: center;
      gap: 14px;
      padding: 18px;
      border-left: 1px solid rgba(17, 45, 95, .1);
    }

    .glove-capability-arrow {
      width: 46px;
      height: 68px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(17, 45, 95, .18);
      border-radius: 23px;
      background: rgba(255, 255, 255, .38);
      color: rgba(17, 45, 95, .55);
      cursor: pointer;
      backdrop-filter: blur(12px);
      transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
    }

    .glove-capability-arrow:hover,
    .glove-capability-arrow:focus-visible {
      background: rgba(255, 255, 255, .78);
      color: var(--brand-ink);
      transform: translateY(-2px);
    }

    .glove-capability-arrow.next:hover { transform: translateY(2px); }

    .glove-capability-arrow span {
      width: 13px;
      height: 13px;
      border-top: 2px solid currentColor;
      border-left: 2px solid currentColor;
      transform: rotate(45deg) translate(2px, 2px);
    }

    .glove-capability-arrow.next span { transform: rotate(225deg) translate(2px, 2px); }

    .glove-spec-card {
      min-height: 600px;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
      overflow: hidden;
      border: 1px solid #26354a;
      border-radius: 16px;
      background: radial-gradient(circle at 20% 40%, rgba(0, 212, 212, .11), transparent 33%), linear-gradient(145deg, #081321, #13243a 72%, #0c1727);
      box-shadow: 0 28px 72px rgba(5, 16, 36, .24);
    }

    .glove-spec-visual {
      position: relative;
      min-width: 0;
      display: grid;
      place-items: center;
      padding: clamp(36px, 5vw, 74px);
      border-right: 1px solid rgba(255, 255, 255, .12);
    }

    .glove-spec-visual::after {
      content: "";
      position: absolute;
      inset: 0 -1px 0 auto;
      width: 22%;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(12, 25, 42, .96));
    }

    .glove-spec-visual img {
      width: min(100%, 640px);
      max-height: 470px;
      object-fit: contain;
      border-radius: 12px;
      filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .28));
    }

    .glove-spec-console {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 190px;
      min-width: 0;
    }

    .glove-spec-data {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      padding: 50px 34px 50px 44px;
    }

    .glove-spec-data > span {
      margin-bottom: 24px;
      color: var(--brand-aurora);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
    }

    .glove-spec-panel { margin: 0; }

    .glove-spec-panel > div {
      display: grid;
      grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
      gap: 20px;
      padding: 20px 0;
      border-top: 1px solid rgba(255, 255, 255, .14);
      animation: glove-spec-in 360ms ease both;
    }

    .glove-spec-panel > div:nth-child(2) { animation-delay: 45ms; }
    .glove-spec-panel > div:nth-child(3) { animation-delay: 90ms; }
    .glove-spec-panel > div:nth-child(4) { animation-delay: 135ms; }

    @keyframes glove-spec-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .glove-spec-panel dt {
      color: rgba(255, 255, 255, .54);
      font-size: 14px;
    }

    .glove-spec-panel dd {
      margin: 0;
      color: rgba(255, 255, 255, .92);
      font-size: 16px;
      font-weight: 650;
      line-height: 1.65;
    }

    .glove-spec-tabs {
      display: grid;
      align-content: center;
      gap: 12px;
      padding: 26px 22px;
      border-left: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .025);
    }

    .glove-spec-tabs button {
      min-height: 62px;
      padding: 12px 16px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 10px;
      background: rgba(255, 255, 255, .055);
      color: rgba(255, 255, 255, .62);
      font-size: 14px;
      font-weight: 750;
      cursor: pointer;
      backdrop-filter: blur(12px);
      transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
    }

    .glove-spec-tabs button:hover,
    .glove-spec-tabs button:focus-visible {
      border-color: rgba(0, 212, 212, .42);
      color: #fff;
      transform: translateX(-3px);
    }

    .glove-spec-tabs button.active {
      border-color: rgba(0, 212, 212, .7);
      background: linear-gradient(135deg, rgba(0, 212, 212, .22), rgba(17, 45, 95, .62));
      color: #fff;
      box-shadow: inset 3px 0 var(--brand-aurora), 0 10px 28px rgba(0, 0, 0, .18);
    }

    @media (max-width: 1180px) {
      .glove-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .glove-summary article:nth-child(2) { border-right: 0; }
      .glove-summary article:nth-child(-n+2) { border-bottom: 1px solid rgba(17, 45, 95, .12); }
      .vetraglove-page .context-cta h2 { white-space: normal; }
      .vetraglove-page .context-cta .cta-inner { grid-template-columns: 1fr; }
      .vetraglove-page .context-cta .actions { width: min(100%, 470px); }
      .glove-section-head h2,
      .glove-section-head .glove-section-subtitle { white-space: normal; }
      .glove-capability-card { grid-template-columns: 98px minmax(0, 1fr) 68px; }
      .glove-capability-slide { grid-template-columns: 1fr; }
      .glove-capability-visual { min-height: 430px; padding-bottom: 0; }
      .glove-capability-visual::after { display: none; }
      .glove-capability-image-box { height: 390px; min-height: 0; }
      .glove-capability-image-box.is-glove { height: 400px; }
      .glove-capability-copy { justify-content: flex-start; padding: 22px 38px 42px; }
      .glove-capability-copy h3 { margin-top: 12px; }
      .glove-spec-card { grid-template-columns: 1fr; }
      .glove-spec-visual { min-height: 420px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
      .glove-spec-visual::after { display: none; }
    }

    @media (max-width: 760px) {
      .vetraglove-page .context-cta .actions { grid-template-columns: 1fr; }
      .glove-summary { grid-template-columns: 1fr; }
      .glove-summary article { min-height: 180px; border-right: 0; border-bottom: 1px solid rgba(17, 45, 95, .12); }
      .glove-summary article:last-child { border-bottom: 0; }
      .glove-hero-actions { grid-template-columns: 1fr; width: 100%; }
      .vetraglove-page .product-detail-hero .hero-visual-source img { width: 76%; height: 76%; }
      .glove-capability-card { min-height: 830px; grid-template-columns: 1fr; grid-template-rows: 94px 1fr 80px; }
      .glove-capability-thumbs { grid-template-columns: repeat(4, 72px); justify-content: center; padding: 11px; border-right: 0; border-bottom: 1px solid rgba(17,45,95,.12); }
      .glove-capability-thumb { width: 72px; }
      .glove-capability-stage { min-height: 650px; }
      .glove-capability-visual { min-height: 370px; padding: 22px; }
      .glove-capability-image-box { height: 330px; }
      .glove-capability-image-box.is-glove { height: 350px; }
      .glove-capability-copy { padding: 20px 28px 34px; }
      .glove-capability-copy h3 { font-size: 34px; }
      .glove-capability-arrows { grid-template-columns: repeat(2, 64px); justify-content: center; border-left: 0; border-top: 1px solid rgba(17,45,95,.1); }
      .glove-capability-arrow { width: 64px; height: 46px; }
      .glove-spec-console { grid-template-columns: 1fr; }
      .glove-spec-data { padding: 34px 26px; }
      .glove-spec-tabs { grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
      .glove-spec-tabs button:hover { transform: none; }
      .glove-spec-panel > div { grid-template-columns: 1fr; gap: 8px; }
    }