:root{
      --bg:#000;
      --card:#0f0f0f;
      --muted:#9b9b9b;
      --accent:#ff1010;
      --border: rgba(255,255,255,0.06);
      --container:1100px;
      --radius:8px;
      --glass: rgba(255,255,255,0.02);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      background:var(--bg);
      color:#efefef;
      -webkit-font-smoothing:antialiased;
    }

    /* header */
    .th-header{ position:sticky; top:0; z-index:30; background:rgba(0,0,0,0.6); border-bottom:1px solid var(--border); }
    .th-inner{ max-width:var(--container); margin:0 auto; padding:18px; display:flex; justify-content:space-between; align-items:center; }
    .brand{ font-weight:800; font-size:20px; color:#fff }
    .nav{ display:flex; gap:12px; align-items:center }
    .icon-btn{ background:transparent; border:1px solid transparent; color:var(--muted); padding:8px 10px; border-radius:8px; cursor:pointer; text-decoration:none }
    .icon-btn:hover{ color:#fff }

    /* main layout */
    .container{ max-width:var(--container); margin:40px auto; padding:0 18px; }

    .product-wrap{
      display:grid;
      grid-template-columns: 80px 1fr 420px; /* thumbnails / big image / details */
      gap:28px;
      align-items:start;
      min-height:520px;
    }

    /* thumbnails (left column) */
    .thumbs{
      display:flex; flex-direction:column; gap:16px; align-items:center;
    }
    .thumbs button{
      width:64px; height:64px; border-radius:8px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
      display:inline-flex; align-items:center; justify-content:center; padding:6px; cursor:pointer;
    }
    .thumbs img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

    /* center big image */
    .media{
      display:flex; align-items:center; justify-content:center; position:relative;
      min-height:520px;
      background:transparent;
    }
    .media .surface{
      width:560px; max-width:90%; height:auto; display:block; object-fit:contain;
      filter:brightness(1.1) contrast(1.05);
      transform: rotate(-12deg);
      transition: transform .25s ease;
    }
    .media .surface:hover{ transform: rotate(-10deg) scale(1.02); }

    /* right details */
    .details{
      padding:12px 6px 0 6px;
      display:flex; flex-direction:column; gap:12px;
      align-items:flex-start;
    }
    .kicker{ color:var(--muted); font-weight:600; }
    .product-title{ font-size:20px; font-weight:800; margin:6px 0 6px; color:#f5f5f5; }
    .rating{ color:#ff3333; font-size:12px; margin-bottom:6px; }
    .price-row{ display:flex; align-items:center; gap:12px; margin-top:8px; }
    .price-current{ color:var(--accent); font-weight:900; font-size:22px; }
    .price-old{ color:var(--muted); text-decoration:line-through; font-size:14px; }

    .stock-badge{
      margin-top:6px;
      background:#0a4f2b; color:#d6f6e0; padding:6px 8px; border-radius:6px; font-weight:700; font-size:12px;
    }

    .options{
      margin-top:14px; display:flex; gap:12px; flex-direction:column; width:100%;
    }
    .btn-add{ background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:6px; font-weight:800; cursor:pointer; width:160px; }
    .small-ghost{ background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 10px; border-radius:6px; }

    .meta-block{
      margin-top:8px; width:100%; border-top:1px solid var(--border); padding-top:12px; color:var(--muted);
      font-size:13px;
    }

    /* tabs + specs */
    .tabs-row{ display:flex; gap:16px; margin-top:28px; align-items:center; }
    .tab{ padding:8px 12px; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; border:1px solid transparent; }
    .tab.active{ background:var(--accent); color:#fff; font-weight:700; box-shadow:0 6px 18px rgba(255,16,16,0.06); }

    .specs{
      display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:24px; color:var(--muted); font-size:13px;
      align-items:start;
    }
    .specs dt{ color:var(--muted); margin-bottom:8px; }
    .specs dd{ margin:0 0 8px; color:#cfcfcf; }

    /* related row */
    .related{
      margin-top:34px;
    }
    .related h4{ text-align:center; font-weight:800; color:#e9e9e9; }

    .related-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-top: 18px;
      justify-items: center;
    }
    .r-card{
      width: 100%;
      max-width: 260px;
    }

    .r-card{
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
      border:1px solid var(--border); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
    }
    .r-thumb{ width:100%; height:120px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.01); border-radius:6px; overflow:hidden; }
    .r-thumb img{ max-height:100%; width:auto; object-fit:contain; display:block; }
    .r-title{ font-weight:800; font-size:14px; margin-top:6px; }
    .r-price{ color:var(--accent); font-weight:900; margin-top:auto; width:100%; }

    /* advantages (small) */
    .advantages{ margin-top:40px; display:flex; gap:28px; justify-content:center; align-items:center; color:var(--muted) }
    .adv{ display:flex; gap:12px; align-items:center; }
    .adv-icon{ width:44px; height:44px; background:var(--card); display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); color:var(--accent); font-size:18px; }

    /* footer */
    .site-footer{ margin-top:36px; border-top:1px solid var(--border); padding:18px 0; text-align:center; color:var(--muted) }

    /* small screens */
    @media (max-width:1100px){
      .product-wrap{ grid-template-columns: 64px 1fr; grid-template-rows: auto auto; }
      .details{ grid-column:1 / -1; order:3 }
      .thumbs{ order:1; flex-direction:row; grid-column:1 / -1; overflow:auto; gap:10px; padding-bottom:8px; }
      .thumbs button{ width:56px; height:56px; }
      .media{ order:2; min-height:420px; }
      .related-grid{ grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width:640px){
      .product-wrap{ grid-template-columns: 1fr; }
      .thumbs{ display:flex; flex-direction:row; gap:10px; justify-content:center; }
      .media .surface{ width:320px; transform: none; }
      .details{ padding:6px 0 0 0; }
      .related-grid{ grid-template-columns: 1fr; }
    }

    /* tiny accessibility nicety */
    a.icon-btn{ display:inline-flex; align-items:center; gap:6px; }