/* ══════════════════════════════════════════
   Product Hero + Gallery — JD-style redesign
   ══════════════════════════════════════════ */
.product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
    margin-top: var(--space-10);
    min-height: 580px;
}
.product-hero__gallery {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
}
.product-hero__info {
    /* Right column: product info */
}

/* ── Main Image Viewport ── */
.pd-gallery-main {
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    cursor: default;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pd-gallery-main__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-gallery-main__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .3s ease;
}
.pd-gallery-main__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .3s ease;
}
.pd-gallery-main__video.is-playing {
    opacity: 1;
}

/* ── Thumbnail Strip (vertical, left side) ── */
.pd-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    max-height: 100%;
    flex-shrink: 0;
}
.pd-gallery-thumbs::-webkit-scrollbar {
    width: 4px;
}
.pd-gallery-thumbs::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.pd-gallery-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--color-border);
    position: relative;
    transition: border-color .2s ease;
    background: #f5f5f5;
    flex-shrink: 0;
}
.pd-gallery-thumb:hover {
    border-color: var(--color-primary-400);
}
.pd-gallery-thumb.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0,149,218,.2);
}

/* Thumbnail image fills the entire box */
.pd-gallery-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}

/* Video thumbnail play icon */
.pd-gallery-thumb--video .pd-gallery-thumb__play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    pointer-events: none;
}
.pd-gallery-thumb--video:hover .pd-gallery-thumb__play-icon {
    background: rgba(0,0,0,.4);
}

/* ── Legacy compatibility ── */
.gallery-main-square,
.gallery-main,
.gallery-thumb,
.gallery-thumb-play-badge,
.gallery-thumb-square--video,
.gallery-thumb-play-icon,
.gallery-thumbs-scroll,
.gallery-thumbs,
.gallery-lightbox,
.gallery-lightbox--open,
.gallery-lightbox-backdrop,
.gallery-lightbox-content,
.gallery-lightbox-close,
.gallery-lightbox-img {
    /* Old classes preserved; active code uses .pd-gallery-* */
    display: none;
}

    /* Spec Selector */
    .spec-selector {
      margin-bottom: var(--space-5);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-wrap: wrap;
    }
    .spec-btn {
      padding: var(--space-2) var(--space-4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-white);
      color: var(--color-gray-700);
      font-size: var(--text-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition-fast);
    }
    .spec-btn.active,
    .spec-btn:hover {
      background: var(--color-primary);
      color: var(--color-white);
      border-color: var(--color-primary);
    }

    /* Specs Table */
    .specs-table {
      width: 100%;
      border-collapse: collapse;
    }
    .specs-table th,
    .specs-table td {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      border-bottom: 1px solid var(--color-border);
    }
    .specs-table th {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-gray-600);
      width: 35%;
      background: var(--color-gray-50);
    }
    .specs-table td {
      font-size: var(--text-sm);
      color: var(--color-gray-900);
    }

    /* Tab Panels */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; margin-top: var(--space-16); }

    /* Product Badge */
    .product-hero__badge {
      display: inline-block;
      padding: var(--space-1) var(--space-3);
      background: var(--color-primary-700);
      color: var(--color-surface);
      font-size: var(--text-xs);
      font-weight: 700;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--space-4);
    }

    /* Rating */
    .product-rating {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
    }
    .product-rating__stars {
      display: flex;
      gap: 2px;
      color: #F59E0B;
      font-size: var(--text-base);
    }
    .product-rating__text {
      font-size: var(--text-sm);
      color: var(--color-gray-500);
    }

    /* Key Specs Grid */
    .key-specs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
      margin-bottom: var(--space-6);
      padding: var(--space-5);
      background: var(--color-gray-50);
      border-radius: var(--radius-xl);
      border: 1px solid var(--color-border);
    }
    .key-spec__item {
      text-align: center;
    }
    .key-spec__icon {
      width: 32px;
      height: 32px;
      margin: 0 auto var(--space-2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary);
    }
    .key-spec__label {
      font-size: var(--text-xs);
      color: var(--color-gray-500);
      margin-bottom: 2px;
    }
    .key-spec__value {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-gray-900);
    }

    /* Price + CTA */
    .product-price-block {
      background: var(--color-accent-light);
      border: 1px solid var(--color-accent);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      margin-bottom: var(--space-5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .product-price-block__label {
      font-size: var(--text-sm);
      color: var(--color-gray-500);
    }
    .product-price-block__value {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--color-accent);
    }

    /* Quick Actions */
    .quick-actions {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      border-top: 1px solid var(--color-border);
      padding-top: var(--space-5);
    }
    .quick-action {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      color: var(--color-gray-600);
      cursor: pointer;
      transition: color var(--transition-fast);
    }
    .quick-action:hover {
      color: var(--color-primary);
    }

    /* Application Tags */
    .app-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }
    .app-tag {
      padding: var(--space-2) var(--space-4);
      background: var(--color-primary-light);
      color: var(--color-primary);
      font-size: var(--text-sm);
      font-weight: 600;
      border-radius: var(--radius-full);
      transition: all var(--transition-fast);
    }
    .app-tag:hover {
      background: var(--color-primary);
      color: var(--color-white);
    }

    /* Showcase Grid */
    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }
    .showcase-item {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      font-weight: 700;
      font-size: var(--text-sm);
      text-align: center;
      padding: var(--space-4);
    }

    /* Video Card */
    .video-demo-card {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--color-gray-800), var(--color-gray-900));
      cursor: pointer;
    }
    .video-demo-card__play {
      width: 64px;
      height: 64px;
      background: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary);
      box-shadow: var(--shadow-lg);
      transition: transform var(--transition-base);
    }
    .video-demo-card:hover .video-demo-card__play {
      transform: scale(1.1);
    }

    /* Inquiry CTA Bar */
    .inquiry-bar {
      position: sticky;
      bottom: 0;
      background: var(--color-white);
      border-top: 1px solid var(--color-border);
      padding: var(--space-4) 0;
      z-index: var(--z-sticky);
      box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    }
    .inquiry-bar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .inquiry-bar__text h4 {
      font-size: var(--text-lg);
      margin-bottom: var(--space-1);
    }
    .inquiry-bar__text p {
      font-size: var(--text-sm);
    }
    .inquiry-bar__actions {
      display: flex;
      gap: var(--space-3);
    }

    /* Related Accessories */
    .related-accessory {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-6);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      text-align: center;
      transition: all var(--transition-base);
    }
    .related-accessory:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-4px);
      border-color: var(--color-primary-light);
    }
    .related-accessory__icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-radius: var(--radius-lg);
    }

    /* ── Related Product Card Video Hover ── */
    .related-product-vid__media {
      position: relative;
      overflow: hidden;
      background: #fff;                   /* default white — blends with card */
      transition: background 0.35s ease;
    }
    .related-product-vid:hover .related-product-vid__media {
      background: #000;                   /* ★ black overlay only during video hover */
    }
    .related-product-vid__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.4s ease;
    }
    .related-product-vid__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .related-product-vid:hover .related-product-vid__img {
      opacity: 0;
    }
    .related-product-vid:hover .related-product-vid__video {
      opacity: 1;
    }
    .related-product-vid:not([data-video]) .related-product-vid__img {
      opacity: 1 !important;
    }

    /* ── Related Product Card Video Hover ── (continued) */

    /* ── WhatsApp Hero Button ── */
    .btn-whatsapp-hero {
      background: #25D366 !important;        /* WhatsApp brand green */
      color: #fff !important;
      box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
    }
    .btn-whatsapp-hero:hover {
      background: #20bd5c !important;        /* Darker on hover */
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
      transform: translateY(-2px);
    }
    .btn-whatsapp-hero:active {
      background: #1aa34e !important;        /* Pressed state */
      box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
      transform: translateY(0);
    }
    .btn-whatsapp-hero__icon {
      flex-shrink: 0;
      margin-right: 2px;
    }

    /* ── Responsive ── */
    @media (max-width: 1199px) {
      .product-hero { grid-template-columns: 1fr; }
      .product-hero__gallery { flex-direction: column; }
      .pd-gallery-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; margin-top: 12px; order: 2; }
      .pd-gallery-main { order: 1; }
      .showcase-grid { grid-template-columns: repeat(2, 1fr); }
      .pd-gallery-main { cursor: default; }
      .pd-gallery-zoom-result { display: none !important; }
      .pd-gallery-zoom-lens { display: none !important; }
    }
    @media (max-width: 767px) {
      .inquiry-bar { display: none; }
      .key-specs { grid-template-columns: repeat(2, 1fr); }
      .showcase-grid { grid-template-columns: 1fr; }
      .inquiry-bar__inner { flex-direction: column; text-align: center; }
      .inquiry-bar__actions { width: 100%; }
      .inquiry-bar__actions .btn { flex: 1; }
      .pd-gallery-thumb { flex: 0 0 56px; width: 56px; height: 56px; }
      .pd-gallery-thumbs { gap: 6px; margin-top: 12px; }
    }