/* =================================================================
   PRODUCT DETAIL PAGE - Essential styles only
   ================================================================= */




     /* Product section */
    .product-section {
      padding: 44px 0;
    }

    .product-container {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    @media (min-width: 1024px) {
      .product-container {
        flex-direction: row;
        gap: 60px;
      }
    }

    .product-images {
      flex: 1;
      max-width: 100%;
    }

    @media (min-width: 1024px) {
      .product-images {
        max-width: 40%;
      }
    }

    .main-image-container {
      background-color: #ffffff;
      margin-bottom: 24px;
      border: 1px solid #e6e6e6;
    }

    .main-image {
      width: 100%;
      max-width: 500px;
      height: 700px;
      margin: 0 auto;
      display: block;
    }

    .thumbnail-gallery {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      
    }

    .thumbnail {
      flex-shrink: 0;
      width: 84px;
      height: 84px;
      border: 1px solid #e6e6e6;
      padding: 14px;
      background-color: #ffffff;
      cursor: pointer;
    }

    .thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-info {
      flex: 1;
    }

    .product-title {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #191c1e;
      margin-bottom: 24px;
    }

    @media (min-width: 768px) {
      .product-title {
        font-size: 36px;
        margin-bottom: 44px;
      }
    }

    .product-details {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    @media (min-width: 1024px) {
      .product-details {
        flex-direction: row;
        gap: 40px;
      }
    }

    .main-details {
      flex: 1;
    }

    .rating-section {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 30px;
    }

    .stars {
      display: flex;
      gap: 2px;
    }

    .star {
      width: 16px;
      height: 16px;
      background-color: #ffc107;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    }

    .rating-text {
      font-size: 14px;
      font-weight: 500;
      color: #191c1e;
    }

    .rating-count {
      font-size: 14px;
      color: #666666;
    }

    .divider {
      width: 100%;
      height: 1px;
      background-color: #e6e6e6;
      margin: 32px 0;
    }

    .product-description {
      font-size: 14px;
      line-height: 1.7;
      color: #4d4d4d;
      margin-bottom: 32px;
    }

    @media (min-width: 768px) {
      .product-description {
        font-size: 16px;
      }
    }

    .price-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
    }

    .price-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .current-price {
      font-family: 'Quicksand', sans-serif;
      font-size: 20px;
      font-weight: 600;
      color: #191c1e;
    }

    @media (min-width: 768px) {
      .current-price {
        font-size: 24px;
      }
    }

    .original-price {
      font-size: 14px;
      color: #7f7f7f;
      text-decoration: line-through;
    }

    @media (min-width: 768px) {
      .original-price {
        font-size: 16px;
      }
    }

    .whatsapp-button {
      background-color: #d84818;
      color: #ffffff;
      padding: 10px 24px;
      border-radius: 22px;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      display: inline-block;
    }







    

    @media (min-width: 768px) {
      .whatsapp-button {
        font-size: 16px;
      }
    }

    .pricing-tiers {
      background-color: #faf4f2;
      border-radius: 8px;
      padding: 18px;
      margin-bottom: 32px;
    }

    .tier-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      font-size: 13px;
    }

    .tier-quantity {
      color: rgba(0, 0, 0, 0.5);
      font-weight: 500;
    }

    .tier-price {
      color: #000000;
      font-weight: 500;
    }

    .quantity-section {
      margin-bottom: 44px;
    }

    .quantity-label {
      font-size: 16px;
      color: #191919;
      transform: translateY(13px);
      
    }

    .quantity-controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
     
      
    }

    .quantity-input {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #cccccc;
      border-radius: 26px;
      padding: 14px;
      background-color: #ffffff;
       margin-left: 30px;
       
    }

    .quantity-btn {
      width: 20px;
      height: 20px;
      background: none;
      border: none;
      cursor: pointer;
    }

    .quantity-value {
      font-size: 16px;
      font-weight: 500;
      color: #4d4d4d;
      min-width: 20px;
      text-align: center;
    }

    .add-to-cart-btn {
      background-color: #d84818;
      color: #ffffff;
      padding:13px 17px;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 5px;
      margin-top: 10px;
    }

    @media (min-width: 768px) {
      .add-to-cart-btn {
        font-size: 16px;
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;
    }

    .icon-button {
      width: 52px;
      height: 52px;
      border-radius: 26px;
      background-color: #f3faf2;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .coupon-section {
      background-image: url('../assets/images/img_rectangle.svg');
      background-size: cover;
      padding: 8px;
      border-radius: 8px;
      margin-top: 32px;
    }

    .coupon-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 8px;
    }

    .coupon-text {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: #191919;
    }

    .coupon-link {
      font-size: 12px;
      color: #ff8900;
      text-decoration: underline;
    }

    /* Features sidebar */
    .features-sidebar {
      width: 100%;
      max-width: 402px;
    }

    @media (min-width: 1024px) {
      .features-sidebar {
        width: 42%;
      }
    }

    .feature-list {
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      overflow: hidden;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 24px;
      background-color: #faf3f2;
      border-bottom: 2px solid transparent;
    }

    .feature-item:not(:last-child) {
      border-bottom-color: #ffffff;
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 22px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .feature-content h3 {
      font-size: 14px;
      font-weight: 500;
      color: #121535;
      margin-bottom: 2px;
    }

    .feature-content p {
      font-size: 14px;
      color: #4d4d4d;
      line-height: 1.4;
    }

     /* Tabs section */
    .tabs-section {
       
      border-radius: 24px;
      overflow: hidden;
    }

    .tabs-header {
      position: relative;
      background-color: #ffffff;
    }

    .satisfaction-badge {
      position: absolute;
      top: 12px;
      right: 22px;
      background-color: #faf4f2;
      color: #d84818;
      padding: 8px 28px 8px 24px;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 500;
    }

    .tabs-nav {
      display: flex;
      align-items: center;
      border-bottom: 2px solid #f1f1f1;
    }

    .tab-button {
      background-color: #f3faf2;
      color: #d84818;
      padding: 26px 20px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }

    .tab-button:not(.active) {
      background-color: transparent;
      color: #7f7f7f;
    }

    .tab-content {
      padding: 40px 56px;
    }

    .reviews-section {
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
    }

    .reviews-list {
      flex: 1;
      min-width: 300px;
    }

    .reviews-title {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #000000;
      margin-bottom: 34px;
    }

    .review-item {
      display: flex;
      gap: 16px;
      padding-bottom: 42px;
      margin-bottom: 42px;
      border-bottom: 1px solid #ececec;
    }

    .review-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .review-content {
      flex: 1;
    }

    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .reviewer-name {
      font-size: 16px;
      font-weight: 500;
      color: #121535;
    }

    .review-date {
      font-size: 12px;
      color: #333333;
    }

    .review-rating {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
    }

    .review-star {
      width: 10px;
      height: 10px;
      background-color: #ffc107;
    }

    .review-title {
      font-size: 14px;
      font-weight: 500;
      color: #121535;
      margin-bottom: 12px;
    }

    .review-text {
      font-size: 14px;
      line-height: 1.4;
      color: #4d4d4d;
      margin-bottom: 34px;
    }

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

    .review-action {
      font-size: 12px;
      font-weight: 500;
      text-decoration: none;
    }

    .review-action.like {
      color: #4d4d4d;
    }

    .review-action.reply {
      color: #d84818;
    }

    .view-all-reviews {
      color: #d84818;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      display: inline-block;
      margin-top: 20px;
    }

    /* Rating summary */
    .rating-summary {
      width: 100%;
      max-width: 400px;
    }

    .rating-summary-title {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #191919;
      margin-bottom: 14px;
    }

    .rating-overview {
      display: flex;
      gap: 44px;
      margin-bottom: 32px;
    }

    .rating-score {
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 44px 24px;
      text-align: center;
    }

    .score-number {
      font-size: 48px;
      font-weight: 700;
      color: #d84818;
      margin-bottom: 6px;
    }

    @media (min-width: 768px) {
      .score-number {
        font-size: 60px;
      }
    }

    .score-stars {
      margin-bottom: 16px;
    }

    .score-label {
      font-size: 16px;
      color: #7f7f7f;
    }

    .rating-breakdown {
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 32px 18px;
      flex: 1;
    }

    .rating-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 10px;
    }

    .rating-number {
      font-size: 16px;
      color: #191919;
      width: 20px;
    }

    .rating-bar-container {
      flex: 1;
      position: relative;
    }

    .rating-bar-bg {
      width: 100%;
      height: 5px;
      background-color: #cccccc;
      border-radius: 2px;
    }

    .rating-bar-fill {
      height: 5px;
      background-color: #d84818;
      border-radius: 2px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .rating-stars-small {
      display: flex;
      gap: 6px;
      padding: 0 4px;
    }

    .rating-count {
      font-size: 16px;
      color: #191919;
      width: 30px;
      text-align: right;
    }

    /* Comment form */
    .comment-form {
      margin-top: 50px;
    }

    .form-title {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 600;
      color: #191919;
      margin-bottom: 16px;
    }

    .form-group {
      margin-bottom: 30px;
    }

    .form-label {
      font-size: 16px;
      color: #121535;
      margin-bottom: 4px;
      display: block;
    }

    .form-input {
      width: 100%;
      padding: 16px 22px;
      border: 1px solid #dddddd;
      border-radius: 8px;
      background-color: #ffffff;
      font-size: 14px;
      color: #4d4d4d;
    }

    .form-textarea {
      width: 100%;
      height: 250px;
      padding: 20px 22px 12px;
      border: 1px solid #dddddd;
      border-radius: 8px;
      background-color: #ffffff;
      font-size: 14px;
      color: #4d4d4d;
      resize: vertical;
    }

    .submit-button {
      background-color: #d84818;
      color: #ffffff;
      padding: 10px 28px;
      border-radius: 22px;
      font-size: 16px;
      font-weight: 600;
      border: 1px solid #d84818;
      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
      cursor: pointer;
    }


     .main-content {
      margin-top: 80px;
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
    
    .cart-section {
      flex: 1;
    }
    
    .cart-table {
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 40px 14px;
      margin-bottom: 14px;
      margin-left: 16px;
    }
    
    .table-header {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
      gap: 16px;
      padding: 0 8px;
      margin-bottom: 32px;
    }
    
    .table-header h3 {
      font-size: 18px;
      font-family: Exo, sans-serif;
      font-weight: 600;
      color: #121535;
    }
    
    .cart-item {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
      gap: 16px;
      align-items: center;
      padding: 20px 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .cart-item:last-child {
      border-bottom: none;
    }
    
    .item-remove {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #4d4d4d;
      text-decoration: none;
      font-size: 16px;
    }
    
    .item-remove-icon {
      width: 24px;
      height: 24px;
    }
    
    .item-details {
      display: flex;
      gap: 32px;
      align-items: center;
    }
    
    .item-image-container {
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 14px 12px;
      width: 150px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .item-image {
      max-width: 122px;
      max-height: 120px;
      object-fit: contain;
    }
    
    .item-info h4 {
      font-size: 20px;
      font-family: Quicksand, sans-serif;
      font-weight: 600;
      color: #191c1e;
      margin-bottom: 8px;
    }
    
    .item-tags {
      display: flex;
      gap: 8px;
      margin-top: 24px;
    }
    
    .chip {
      background-color: #f1f1f1;
      color: #121535;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .item-price {
      font-size: 18px;
      font-family: Exo, sans-serif;
      font-weight: 600;
      color: #333333;
    }
    
    .quantity-control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #cccccc;
      border-radius: 4px;
      padding: 8px 14px;
      width: 120px;
    }
    
    .quantity-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }
    
    .quantity-btn img {
      width: 12px;
      height: 12px;
    }
    
    .quantity-value {
      font-size: 16px;
      font-weight: 500;
      color: #191919;
      margin: 0 16px;
    }
    
    .coupon-section {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-top: 40px;
      padding: 0 8px;
    }
    
    .coupon-input {
      flex: 1;
      padding: 18px 30px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      font-size: 18px;
      color: #7f7f7f;
    }
    
    .coupon-button {
      background-color: #d84818;
      color: white;
      padding: 18px 12px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 500;
    }
    
    .cart-summary {
      width: 354px;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 34px 24px;
    }
    
    .summary-title {
      font-size: 20px;
      font-family: Exo, sans-serif;
      font-weight: 600;
      color: #191919;
      margin-bottom: 34px;
      margin-left: 16px;
    }
    
    .summary-details {
      background-color: #f1f1f1;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 24px;
    }
    
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .summary-row:last-child {
      margin-bottom: 0;
    }
    
    .summary-label {
      font-size: 16px;
      font-family: Exo, sans-serif;
      color: #191919;
    }
    
    .summary-value {
      font-size: 16px;
      font-weight: 600;
      color: #191919;
    }
    
    .summary-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f1f1f1;
      border-radius: 8px;
      padding: 16px 24px;
      margin-bottom: 24px;
    }
    
    .total-label {
      font-size: 20px;
      font-family: Exo, sans-serif;
      font-weight: 600;
      color: #191919;
    }
    
    .total-value {
      font-size: 16px;
      font-weight: 600;
      color: #191919;
    }
    
    .checkout-button {
      width: 100%;
      background-color: #d84818;
      color: white;
      padding: 14px 34px;
      border-radius: 8px;
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 4px;
    }