body {
      background-color: #f9f9fb;
    }

    .thumbnail-nav img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border: 1px solid #ddd;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 5px;
      transition: border-color 0.3s;
    }

    .thumbnail-nav img.active {
      border: 2px solid #dc3545;
    }

   
    .main-image img {
      width: 100%;
      height: 450px;
      border-radius: 5px;
      border: 1px solid #ddd;
      margin-bottom: 20px;
    }

    .color-option {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 12px;
      border: 2px solid #fff;
      box-shadow: 0 0 2px rgba(0,0,0,0.3);
      cursor: pointer;
      transition: transform 0.2s;
    }

    .color-option:hover {
      transform: scale(1.1);
    }

    .color-option.selected {
      border-color: #dc3545;
    }

    .price-old {
      text-decoration: line-through;
      color: #999;
      margin-right: 10px;
    }

    .price-new {
      color: #dc3545;
      font-size: 1.7rem;
      font-weight: bold;
      margin-right: 10px;
    }

    .save-badge {
      background: #dc3545;
      color: #fff;
      padding: 3px 8px;
      border-radius: 3px;
      font-size: 0.85rem;
    }

    .timer-box {
      border: 2px solid #dc3545;
      padding: 15px;
      border-radius: 5px;
      color: #dc3545;
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      font-weight: bold;
      background: #fff5f6;
      width: 300px;
    }

    .timer-unit {
      text-align: center;
      min-width: 60px;
    }

    .brand-logo {
      max-width: 100px;
      height: auto;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: #fff;
      padding: 5px;
    }

    @media only screen and (max-width: 600px) {
   .timer-box {
    width: 100%;
    gap: 0;
   }
}