:root {
            --bg-1: #07070a;
            --bg-2: #0b0c0e;
            --card: rgba(255, 255, 255, 0.02);
            --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
            --muted: rgba(246, 246, 246, 0.58);
            --text: #f6f6f6;
            --accent: #d2824b;
            --accent-2: #b06a3e;
            --radius: 14px;
            --shadow-1: 0 10px 30px rgba(2, 6, 10, 0.6);
            --shadow-2: 0 6px 18px rgba(2, 6, 10, 0.5);
            --glass-border: rgba(255, 255, 255, 0.04);
            --container: 1180px;
            --transition: 260ms cubic-bezier(.2, .9, .3, 1);
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%;
            margin: 0;
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
            color: var(--text);
            background:
                radial-gradient(1200px 400px at 10% 10%, rgba(178, 106, 62, 0.06), transparent 8%),
                radial-gradient(1000px 300px at 95% 90%, rgba(176, 106, 62, 0.04), transparent 8%),
                linear-gradient(180deg, var(--bg-1), var(--bg-2));
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        .page {
            max-width: var(--container);
            margin: 32px auto;
            padding: 20px;
            display: grid;
            gap: 26px;
        }

        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .logo {
            width: 52px;
            height: 52px;
            border-radius: 12px;
           
            box-shadow: 0 12px 34px rgba(178, 106, 62, 0.16);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #08101a;
            font-size: 20px
        }

        .breadcrumbs {
            font-size: 0.95rem;
            color: var(--muted)
        }

        .top-right {
            display: flex;
            gap: 12px;
            align-items: center;
            font-size: 0.95rem;
            color: var(--muted)
        }

        .product-grid {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 28px;
            align-items: start
        }

        .gallery {
            background: var(--glass);
            border-radius: var(--radius);
            padding: 18px;
            box-shadow: var(--shadow-1);
            border: 1px solid var(--glass-border);
            transition: transform var(--transition), box-shadow var(--transition);
            overflow: visible
        }

        .gallery:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 60px rgba(2, 6, 10, 0.65);
        }

        .preview {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(180deg, #050506, #0b0b0b);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 520px;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.02)
        }

        .preview::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%);
        }

        .preview img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            transition: transform var(--transition)
        }

        .zoom-window {
            position: fixed;
            /* do NOT set right here — JS will control left/right */
            left: 22px;
            /* initial seed */
            top: 0px;
            width: 420px;
            height: 420px;
            border-radius: 12px;
            box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border: 1px solid rgba(255, 255, 255, 0.04);
            display: none;
            z-index: 60;
            overflow: hidden;
            transform-origin: center right;
            /* default for left side */
            transition: transform .28s cubic-bezier(.2, .9, .3, 1), opacity .28s, left .18s ease, top .18s ease;
        }

        .zoom-window.visible {
            display: block;
            transform: translateY(0);
            opacity: 1;
        }





        /* lens for mobile */
        .zoom-lens {
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
            border: 2px solid rgba(255, 255, 255, 0.06);
            display: none;
            pointer-events: none;
            z-index: 50
        }


        .thumb-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 14px
        }

        .thumb {
            width: 72px;
            height: 72px;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            background: #0b0b0b;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
            flex-shrink: 0
        }

        .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .thumb.active {
            border-color: rgba(255, 255, 255, 0.12);
            transform: translateY(-8px);
            box-shadow: var(--shadow-2)
        }

        .thumb-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--muted);
            padding: 8px;
            border-radius: 10px;
            cursor: pointer
        }

        .thumbs-wrap {
            display: flex;
            gap: 8px;
            align-items: center;
            overflow: auto;
            padding-bottom: 6px
        }

        .right-col {
            display: flex;
            flex-direction: column;
            gap: 18px
        }

        .info {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
            border-radius: var(--radius);
            padding: 18px;
            border: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-shadow: var(--shadow-2)
        }

        .title {
            font-size: 1.3rem;
            margin: 0;
            font-weight: 700;
            letter-spacing: 0.2px
        }

        .sku {
            font-size: 0.9rem;
            color: var(--muted)
        }

        .price-row {
            display: flex;
            align-items: center;
            gap: 12px;
            justify-content: space-between
        }

        .price {
            font-weight: 800;
            font-size: 1.3rem
        }

        .old-price {
            color: rgba(255, 255, 255, 0.18);
            text-decoration: line-through;
            font-weight: 600;
            font-size: 0.95rem
        }

        .variants {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 6px
        }

        .select {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--text)
        }

        .chip {
            background: rgba(255, 255, 255, 0.02);
            padding: 8px 10px;
            border-radius: 10px;
            font-size: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.03)
        }

        .actions {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            align-items: center
        }

        .btn {
            background: linear-gradient(180deg, var(--accent), var(--accent-2));
            color: #08101a;
            padding: 12px 18px;
            border-radius: 12px;
            border: none;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 14px 44px rgba(178, 106, 62, 0.12);
            transition: transform var(--transition), box-shadow var(--transition)
        }

        .btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 70px rgba(178, 106, 62, 0.16)
        }

        .btn.secondary {
            background: transparent;
            color: var(--text);
            border: 1px solid rgba(255, 255, 255, 0.06)
        }
 
    .size-variants {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
  
    .size-chip {
      background: rgba(255, 255, 255, 0.02);
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 0.9rem;
      border: 1px solid rgba(255, 255, 255, 0.04);
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s ease;
    }
  
    .size-chip:hover {
      background: rgba(255, 255, 255, 0.06);
    }
  
    .size-chip.active {
      border-color: var(--accent);
      background: var(--accent);
      color: #08101a;
      font-weight: 700;
    }
  
    .color-circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: all 0.2s ease;
    }
  
    .color-circle.active {
      border: 2px solid var(--accent);
      transform: scale(1.15);
    }
        .media-card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
            border-radius: var(--radius);
            padding: 12px;
            border: 1px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 180px;
            box-shadow: var(--shadow-2)
        }

        .video-wrap {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .video-wrap video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .details {
            font-size: 0.95rem;
            color: var(--muted);
            line-height: 1.45
        }

 
        .bg-video-section {
     position: relative;
     width: 100%;
     height: 60vh;
     /* requested height */
     min-height: 360px;
     /* optional sensible min */
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #111;
     margin-top: 20px;
     margin-bottom: 20px;
     max-width: 1400px;
     margin: 0 auto;
     /* fallback color while video loads */
 }

 /* VIDEO: fill the container, keep aspect ratio, and crop with cover */
 .bg-video {
     position: absolute;
     inset: 0;
     /* top/right/bottom/left = 0 */
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* ensures cover crop behaviour */
     object-position: center;
     /* center focal point */
     will-change: transform;
     transform-origin: center;
     z-index: 0;
     /* slight zoom animation (optional & reduced-motion safe) */
     animation: vid-pan 18s ease-in-out infinite alternate;
 }

 @keyframes vid-pan {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(1.03);
     }
 }