/* Product Detail Page Styles - Trang chi tiết sản phẩm */

/* Breadcrumb - Đường dẫn điều hướng (Trang chủ > Sản phẩm > Chi tiết) */
.breadcrumb {
    background-color: var(--background-light); /* Nền sáng nhẹ */
    padding: 1rem 0; /* Padding trên dưới 16px */
    border-bottom: 1px solid var(--border-color); /* Đường viền dưới */
}

.breadcrumb .container {
    max-width: 1200px; /* Giới hạn chiều rộng tối đa */
    margin: 0 auto; /* Căn giữa container */
    padding: 0 2rem; /* Padding trái phải 32px */
}

.breadcrumb a {
    color: var(--accent-color); /* Màu link accent */
    text-decoration: none; /* Bỏ gạch chân */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu mượt mà */
}

.breadcrumb a:hover {
    color: var(--primary-color); /* Đổi màu khi hover */
}

.breadcrumb span {
    margin: 0 0.5rem; /* Margin trái phải cho dấu "/" */
    color: var(--text-secondary); /* Màu text phụ */
}

.breadcrumb .current {
    color: var(--text-primary); /* Màu text chính cho trang hiện tại */
    font-weight: 500; /* Font weight trung bình */
}

/* Main Container - Container chính của trang */
.product-detail {
    padding: 2rem 0; /* Padding trên dưới 32px */
}

.container {
    max-width: 1200px; /* Chiều rộng tối đa 1200px */
    margin: 0 auto; /* Căn giữa theo chiều ngang */
    padding: 0 2rem; /* Padding trái phải 32px */
}

/* Product Overview - Phần tổng quan sản phẩm (ảnh + thông tin) */
.product-overview {
    display: grid; /* Sử dụng CSS Grid Layout */
    grid-template-columns: 1fr 1fr; /* 2 cột bằng nhau */
    gap: 3rem; /* Khoảng cách giữa 2 cột là 48px */
    margin-bottom: 3rem; /* Margin dưới 48px */
}

/* Product Images - Phần hiển thị hình ảnh sản phẩm */
.product-images {
    position: sticky; /* Vị trí dính khi scroll */
    top: 2rem; /* Cách top 32px khi sticky */
    height: fit-content; /* Chiều cao vừa với nội dung */
}

/* Main Image - Hình ảnh chính của sản phẩm */
.main-image {
    position: relative; /* Vị trí tương đối để chứa badge */
    margin-bottom: 1rem; /* Margin dưới 16px */
}

.main-image img {
    width: 100%; /* Chiều rộng 100% */
    height: 500px; /* Chiều cao cố định 500px */
    object-fit: contain; /* Giữ tỉ lệ ảnh, không bị cắt */
    border-radius: 12px; /* Bo tròn góc 12px */
    background-color: var(--background-light); /* Nền sáng */
    padding: 1rem; /* Padding 16px */
    border: 1px solid var(--border-color); /* Viền mỏng */
    transition: transform 0.3s ease; /* Hiệu ứng transform mượt */
}

.main-image:hover img {
    transform: scale(1.02); /* Phóng to 2% khi hover */
}

/* Image Badge - Nhãn hiệu ứng trên ảnh (NEW, SALE...) */
.image-badge {
    position: absolute; /* Vị trí tuyệt đối */
    top: 1rem; /* Cách top 16px */
    right: 1rem; /* Cách phải 16px */
    background: linear-gradient(135deg, #ff4757, #ff3838); /* Gradient đỏ */
    color: white;
    padding: 0.5rem 1rem; /* Padding 8px 16px */
    border-radius: 20px; /* Bo tròn rất nhiều tạo hình oval */
    font-size: 0.8rem; /* Font size 12.8px */
    font-weight: 600; /* Font weight đậm */
    text-transform: uppercase; /* Chữ hoa */
    letter-spacing: 0.5px; /* Giãn cách chữ 0.5px */
    box-shadow: 0 3px 10px rgba(255, 71, 87, 0.4); /* Bóng đổ với màu đỏ */
}

/* Thumbnail Images - Ảnh thu nhỏ dưới ảnh chính */
.thumbnail-images {
    display: flex; /* Sắp xếp theo hàng ngang */
    gap: 0.5rem; /* Khoảng cách giữa các ảnh 8px */
    overflow-x: auto; /* Cuộn ngang khi quá nhiều ảnh */
}

.thumbnail-images img {
    width: 80px; /* Chiều rộng cố định 80px */
    height: 80px; /* Chiều cao cố định 80px */
    object-fit: contain; /* Giữ tỉ lệ ảnh */
    border-radius: 8px; /* Bo tròn góc 8px */
    border: 2px solid transparent; /* Viền trong suốt ban đầu */
    cursor: pointer; /* Con trỏ chỉ tay khi hover */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
    background-color: var(--background-light); /* Nền sáng */
    padding: 0.5rem; /* Padding 8px */
    flex-shrink: 0; /* Không co lại khi thiếu không gian */
}

.thumbnail-images img:hover {
    border-color: var(--accent-color); /* Viền accent khi hover */
    transform: scale(1.05); /* Phóng to 5% khi hover */
}

.thumbnail-images img.active {
    border-color: var(--accent-color); /* Viền accent cho ảnh đang active */
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb, 0, 122, 255), 0.3); /* Bóng phát sáng */
}

/* Product Info - Thông tin chi tiết sản phẩm */
.product-info {
    padding: 1rem 0; /* Padding trên dưới 16px */
}

/* Product Title - Tiêu đề sản phẩm */
.product-title {
    font-size: 2.5rem; /* Font size 40px */
    font-weight: 700; /* Font weight rất đậm */
    color: var(--text-primary); /* Màu text chính */
    margin-bottom: 1rem; /* Margin dưới 16px */
    line-height: 1.2; /* Chiều cao dòng 1.2 lần font size */
}

/* Product Rating - Đánh giá sao sản phẩm */
.product-rating {
    display: flex; /* Sắp xếp ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 1rem; /* Khoảng cách giữa các phần tử 16px */
    margin-bottom: 1.5rem; /* Margin dưới 24px */
}

.stars {
    color: #ffc107; /* Màu vàng cho sao */
    font-size: 1.2rem; /* Font size 19.2px */
    letter-spacing: 2px; /* Giãn cách chữ 2px */
}

.rating-text {
    color: var(--text-secondary); /* Màu text phụ */
    font-size: 0.9rem; /* Font size 14.4px */
}

/* Product Price - Phần hiển thị giá sản phẩm */
.product-price {
    display: flex; /* Sắp xếp ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 1rem; /* Khoảng cách giữa các phần tử 16px */
    margin-bottom: 2rem; /* Margin dưới 32px */
}

.old-price {
    color: var(--text-secondary); /* Màu text phụ */
    text-decoration: line-through; /* Gạch ngang (giá cũ) */
    font-size: 1.2rem; /* Font size 19.2px */
}

.current-price {
    color: #e74c3c; /* Màu đỏ cho giá hiện tại */
    font-size: 2rem; /* Font size 32px */
    font-weight: 700; /* Font weight rất đậm */
}

/* Discount Badge - Nhãn giảm giá */
.discount-badge {
    background-color: #e74c3c; /* Nền màu đỏ */
    color: white; /* Chữ màu trắng */
    padding: 0.3rem 0.8rem; /* Padding 4.8px 12.8px */
    border-radius: 20px; /* Bo tròn góc tạo hình oval */
    font-size: 0.8rem; /* Font size 12.8px */
    font-weight: 600; /* Font weight đậm */
}

/* Product Highlights - Các điểm nổi bật của sản phẩm */
.product-highlights {
    background-color: var(--background-light); /* Nền sáng */
    padding: 1.5rem; /* Padding 24px */
    border-radius: 12px; /* Bo tròn góc 12px */
    margin-bottom: 2rem; /* Margin dưới 32px */
    border: 1px solid var(--border-color); /* Viền mỏng */
}

.product-highlights h3 {
    color: var(--text-primary); /* Màu text chính */
    margin-bottom: 1rem; /* Margin dưới 16px */
    font-size: 1.2rem; /* Font size 19.2px */
}

.product-highlights ul {
    list-style: none; /* Bỏ dấu chấm đầu dòng */
    padding: 0; /* Bỏ padding mặc định */
    margin: 0; /* Bỏ margin mặc định */
}

.product-highlights li {
    padding: 0.5rem 0; /* Padding trên dưới 8px */
    color: var(--text-primary); /* Màu text chính */
    font-size: 0.95rem; /* Font size 15.2px */
    line-height: 1.5; /* Chiều cao dòng 1.5 lần font size */
    border-bottom: 1px solid rgba(var(--border-color-rgb, 229, 229, 229), 0.3); /* Viền dưới mờ */
}

.product-highlights li:last-child {
    border-bottom: none; /* Bỏ viền dưới cho phần tử cuối */
}

/* Product Variants - Các biến thể sản phẩm (màu sắc, dung lượng...) */
.product-variants {
    margin-bottom: 2rem; /* Margin dưới 32px */
}

.variant-group {
    margin-bottom: 1.5rem; /* Margin dưới 24px cho mỗi nhóm biến thể */
}

.variant-group h4 {
    color: var(--text-primary); /* Màu text chính */
    margin-bottom: 0.8rem; /* Margin dưới 12.8px */
    font-size: 1rem; /* Font size 16px */
    font-weight: 600; /* Font weight đậm */
}

.variant-options {
    display: flex; /* Sắp xếp ngang */
    gap: 0.5rem; /* Khoảng cách 8px */
    flex-wrap: wrap; /* Xuống dòng khi hết chỗ */
}

/* Variant Button - Nút chọn biến thể (128GB, 256GB...) */
.variant-btn {
    padding: 0.7rem 1.2rem; /* Padding 11.2px 19.2px */
    border: 2px solid var(--border-color); /* Viền 2px */
    background-color: var(--secondary-color); /* Nền secondary */
    color: var(--text-primary); /* Màu text chính */
    border-radius: 8px; /* Bo tròn góc 8px */
    cursor: pointer; /* Con trỏ chỉ tay */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
    font-weight: 500; /* Font weight trung bình */
    font-size: 0.9rem; /* Font size 14.4px */
}

.variant-btn:hover {
    border-color: var(--accent-color); /* Viền accent khi hover */
    background-color: rgba(var(--accent-color-rgb, 0, 122, 255), 0.1); /* Nền mờ accent */
}

.variant-btn.active {
    border-color: var(--accent-color); /* Viền accent khi được chọn */
    background-color: var(--accent-color); /* Nền accent khi được chọn */
    color: white; /* Chữ trắng khi được chọn */
}

/* Color Options - Tùy chọn màu sắc */
.color-options {
    display: flex; /* Sắp xếp ngang */
    gap: 0.5rem; /* Khoảng cách 8px */
}

.color-btn {
    width: 40px; /* Chiều rộng 40px */
    height: 40px; /* Chiều cao 40px */
    border-radius: 50%; /* Bo tròn thành hình tròn */
    border: 3px solid transparent; /* Viền trong suốt ban đầu */
    cursor: pointer; /* Con trỏ chỉ tay */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
    position: relative; /* Vị trí tương đối */
}

.color-btn:hover {
    transform: scale(1.1); /* Phóng to 10% khi hover */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Bóng đổ khi hover */
}

.color-btn.active {
    border-color: var(--accent-color); /* Viền accent khi được chọn */
    box-shadow: 0 0 10px rgba(var(--accent-color-rgb, 0, 122, 255), 0.5); /* Bóng phát sáng */
}

/* Product Actions - Các hành động với sản phẩm (thêm vào giỏ, mua ngay...) */
.product-actions {
    margin-bottom: 2rem; /* Margin dưới 32px */
}

/* Quantity Selector - Phần chọn số lượng */
.quantity-selector {
    display: flex; /* Sắp xếp ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 1rem; /* Khoảng cách 16px */
    margin-bottom: 1.5rem; /* Margin dưới 24px */
}

.quantity-selector label {
    color: var(--text-primary); /* Màu text chính */
    font-weight: 500; /* Font weight trung bình */
}

/* Quantity Controls - Điều khiển số lượng (+/-) */
.quantity-controls {
    display: flex; /* Sắp xếp ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    border: 2px solid var(--border-color); /* Viền 2px */
    border-radius: 8px; /* Bo tròn góc 8px */
    overflow: hidden; /* Ẩn phần tràn để tạo góc vuông bên trong */
}

.quantity-controls button {
    background-color: var(--background-light); /* Nền sáng */
    border: none; /* Bỏ viền mặc định */
    padding: 0.7rem 1rem; /* Padding 11.2px 16px */
    cursor: pointer; /* Con trỏ chỉ tay */
    color: var(--text-primary); /* Màu text chính */
    font-weight: 600; /* Font weight đậm */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền */
}

.quantity-controls button:hover {
    background-color: var(--accent-color); /* Nền accent khi hover */
    color: white; /* Chữ trắng khi hover */
}

.quantity-controls input {
    border: none; /* Bỏ viền */
    padding: 0.7rem; /* Padding 11.2px */
    width: 60px; /* Chiều rộng 60px */
    text-align: center; /* Căn giữa text */
    background-color: var(--secondary-color); /* Nền secondary */
    color: var(--text-primary); /* Màu text chính */
    font-weight: 500; /* Font weight trung bình */
}

/* Action Buttons - Các nút hành động */
.action-buttons {
    display: flex; /* Sắp xếp ngang */
    gap: 1rem; /* Khoảng cách 16px */
}

.btn-add-cart,
.btn-buy-now {
    padding: 1rem 2rem; /* Padding 16px 32px */
    border: none; /* Bỏ viền mặc định */
    border-radius: 8px; /* Bo tròn góc 8px */
    font-weight: 600; /* Font weight đậm */
    cursor: pointer; /* Con trỏ chỉ tay */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
    text-transform: uppercase; /* Chữ hoa */
    letter-spacing: 0.5px; /* Giãn cách chữ 0.5px */
    font-size: 0.9rem; /* Font size 14.4px */
    flex: 1; /* Chia đều không gian */
    display: flex; /* Flexbox cho nội dung bên trong */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    gap: 0.5rem; /* Khoảng cách giữa icon và text */
}

/* Button Add to Cart - Nút thêm vào giỏ hàng */
.btn-add-cart {
    background-color: transparent; /* Nền trong suốt */
    color: var(--accent-color); /* Màu text accent */
    border: 2px solid var(--accent-color); /* Viền accent */
}

.btn-add-cart:hover {
    background-color: var(--accent-color); /* Nền accent khi hover */
    color: white; /* Chữ trắng khi hover */
    transform: translateY(-2px); /* Di chuyển lên 2px */
    box-shadow: 0 5px 15px rgba(var(--accent-color-rgb, 0, 122, 255), 0.3); /* Bóng đổ */
}

/* Button Buy Now - Nút mua ngay */
.btn-buy-now {
    background-color: #e74c3c; /* Nền màu đỏ */
    color: white; /* Chữ trắng */
    border: 2px solid #e74c3c; /* Viền màu đỏ */
}

.btn-buy-now:hover {
    background-color: #c0392b; /* Nền đỏ đậm hơn khi hover */
    border-color: #c0392b; /* Viền đỏ đậm hơn khi hover */
    transform: translateY(-2px); /* Di chuyển lên 2px */
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3); /* Bóng đổ màu đỏ */
}

/* Product Services - Các dịch vụ kèm theo (bảo hành, giao hàng...) */
.product-services {
    background-color: var(--background-light); /* Nền sáng */
    padding: 1.5rem; /* Padding 24px */
    border-radius: 12px; /* Bo tròn góc 12px */
    border: 1px solid var(--border-color); /* Viền mỏng */
}

.service-item {
    display: flex; /* Sắp xếp ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    gap: 1rem; /* Khoảng cách 16px */
    padding: 1rem 0; /* Padding trên dưới 16px */
    border-bottom: 1px solid rgba(var(--border-color-rgb, 229, 229, 229), 0.3); /* Viền dưới mờ */
}

.service-item:last-child {
    border-bottom: none; /* Bỏ viền dưới cho phần tử cuối */
}

.service-icon {
    font-size: 1.5rem; /* Font size 24px */
    width: 40px; /* Chiều rộng 40px */
    display: flex; /* Flexbox */
    justify-content: center; /* Căn giữa theo chiều ngang */
}

.service-text strong {
    display: block; /* Hiển thị dạng block */
    color: var(--text-primary); /* Màu text chính */
    margin-bottom: 0.2rem; /* Margin dưới 3.2px */
    font-size: 0.95rem; /* Font size 15.2px */
}

.service-text p {
    color: var(--text-secondary); /* Màu text phụ */
    font-size: 0.85rem; /* Font size 13.6px */
    margin: 0; /* Bỏ margin */
}

/* Product Tabs - Hệ thống tab thông tin sản phẩm (Mô tả, Thông số, Đánh giá) */
.product-tabs {
    margin-bottom: 3rem; /* Margin dưới 48px */
}

.tab-navigation {
    display: flex; /* Sắp xếp ngang */
    border-bottom: 2px solid var(--border-color); /* Viền dưới 2px */
    margin-bottom: 2rem; /* Margin dưới 32px */
    overflow-x: auto; /* Cuộn ngang khi cần */
}

.tab-btn {
    padding: 1rem 2rem; /* Padding 16px 32px */
    border: none; /* Bỏ viền */
    background-color: transparent; /* Nền trong suốt */
    color: var(--text-secondary); /* Màu text phụ */
    cursor: pointer; /* Con trỏ chỉ tay */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt */
    font-weight: 500; /* Font weight trung bình */
    font-size: 0.95rem; /* Font size 15.2px */
    border-bottom: 3px solid transparent; /* Viền dưới trong suốt */
    white-space: nowrap; /* Không xuống dòng */
}

.tab-btn:hover {
    color: var(--accent-color); /* Màu accent khi hover */
}

.tab-btn.active {
    color: var(--accent-color); /* Màu accent khi active */
    border-bottom-color: var(--accent-color); /* Viền dưới accent khi active */
}

.tab-content {
    min-height: 400px; /* Chiều cao tối thiểu 400px */
}

.tab-panel {
    display: none; /* Ẩn panel ban đầu */
}

.tab-panel.active {
    display: block; /* Hiển thị panel active */
    animation: fadeIn 0.3s ease; /* Hiệu ứng fade in */
}

/* Keyframe Animation - Hiệu ứng xuất hiện mượt mà */
@keyframes fadeIn {
    from { 
        opacity: 0; /* Từ trong suốt */
        transform: translateY(10px); /* Từ vị trí dưới 10px */
    }
    to { 
        opacity: 1; /* Đến hiển thị đầy đủ */
        transform: translateY(0); /* Đến vị trí gốc */
    }
}

/* Specifications */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.spec-category {
    background-color: var(--background-light);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.spec-category h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(var(--border-color-rgb, 229, 229, 229), 0.3);
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-item span:first-child {
    color: var(--text-secondary);
    font-weight: 500;
}

.spec-item span:last-child {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* Description */
.description-content {
    color: var(--text-primary);
    line-height: 1.8;
}

.description-content h3 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.description-content h4 {
    color: var(--text-primary);
    margin: 1.5rem 0 0.8rem 0;
    font-size: 1.2rem;
}

.description-content p {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Reviews */
.reviews-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background-color: var(--background-light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.rating-overview {
    text-align: center;
}

.rating-score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.rating-stars {
    color: #ffc107;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.rating-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rating-bar span:first-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
    width: 20px;
}

.rating-bar span:last-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
    width: 30px;
    text-align: right;
}

.bar {
    flex: 1;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background-color: #ffc107;
    transition: width 0.3s ease;
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-item {
    background-color: var(--background-light);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

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

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reviewer-name {
    color: var(--text-primary);
    font-weight: 600;
}

.review-stars {
    color: #ffc107;
    font-size: 0.9rem;
}

.review-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.review-content p {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

/* Related Products */
.related-products {
    margin-top: 3rem;
}

.related-products h2 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-size: 1.8rem;
    text-align: center;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-color);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 1rem;
    background-color: var(--background-light);
    padding: 0.5rem;
}

.product-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.product-card .price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.product-card .old-price {
    color: var(--text-secondary);
    text-decoration: line-through;
    font-size: 0.9rem;
}

.product-card .current-price {
    color: #e74c3c;
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-view {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.btn-view:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--accent-color-rgb, 0, 122, 255), 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .product-overview {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .product-images {
        position: static;
    }
    
    .main-image img {
        height: 350px;
    }
    
    .product-title {
        font-size: 2rem;
    }
    
    .current-price {
        font-size: 1.5rem;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .specs-grid {
        grid-template-columns: 1fr;
    }
    
    .reviews-summary {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .tab-navigation {
        justify-content: center;
    }
    
    .tab-btn {
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .thumbnail-images {
        justify-content: center;
    }
    
    .quantity-selector {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    
    .variant-options {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .product-title {
        font-size: 1.5rem;
    }
    
    .current-price {
        font-size: 1.3rem;
    }
    
    .product-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .main-image img {
        height: 250px;
    }
    
    .thumbnail-images img {
        width: 60px;
        height: 60px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* Pure CSS Tab System */
.tab-system {
    margin: 3rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Hide radio buttons */
.tab-input {
    display: none;
}

/* Tab Labels */
.tab-labels {
    display: flex;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    overflow-x: auto;
}

.tab-label {
    flex: 1;
    padding: 1.2rem 2rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 1rem;
    border: none;
    min-width: max-content;
}

.tab-label:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Active tab label */
.tab-input:checked + .tab-labels .tab-label,
.tab-input#tab-specs:checked ~ .tab-labels label[for="tab-specs"],
.tab-input#tab-description:checked ~ .tab-labels label[for="tab-description"],
.tab-input#tab-reviews:checked ~ .tab-labels label[for="tab-reviews"] {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 2rem;
    background: white;
    min-height: 400px;
}

/* Show active tab content */
.tab-input#tab-specs:checked ~ #tab-specs-content,
.tab-input#tab-description:checked ~ #tab-description-content,
.tab-input#tab-reviews:checked ~ #tab-reviews-content {
    display: block;
}

/* Specs Grid Styling */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.spec-category {
    background: var(--background-light);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.spec-category h3 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-size: 1.2rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border-light);
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-item span:first-child {
    font-weight: 500;
    color: var(--text-secondary);
}

.spec-item span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* Product Description Styling */
.product-description {
    line-height: 1.8;
    color: var(--text-primary);
}

.product-description h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.product-description h4 {
    color: var(--accent-color);
    margin: 1.5rem 0 0.8rem 0;
    font-size: 1.2rem;
}

.product-description ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.product-description li {
    margin-bottom: 0.5rem;
}

/* Reviews Section Styling */
.reviews-section {
    max-width: 100%;
}

.reviews-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--background-light);
    border-radius: 12px;
}

.rating-overview {
    text-align: center;
}

.rating-score {
    font-size: 3rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.rating-stars {
    font-size: 1.5rem;
    color: #ffc107;
    margin-bottom: 0.5rem;
}

.rating-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.rating-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
}

.rating-bar span:first-child {
    width: 20px;
    color: var(--text-secondary);
}

.rating-bar .bar {
    flex: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.rating-bar .fill {
    height: 100%;
    background: var(--accent-color);
    transition: width 0.3s ease;
}

.rating-bar span:last-child {
    width: 30px;
    text-align: right;
    color: var(--text-secondary);
}

/* Reviews List */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.review-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    background: white;
}

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

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.reviewer-name {
    font-weight: 600;
    color: var(--text-primary);
}

.review-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.review-rating {
    color: #ffc107;
    font-size: 1.1rem;
}

.review-content {
    line-height: 1.6;
    color: var(--text-primary);
}

/* Mobile Responsive for Tabs */
@media (max-width: 768px) {
    .tab-labels {
        flex-direction: column;
    }
    
    .tab-label {
        flex: none;
        text-align: left;
        padding: 1rem 1.5rem;
    }
    
    .tab-content {
        padding: 1.5rem;
    }
    
    .specs-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .reviews-summary {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .rating-breakdown {
        max-width: 300px;
        margin: 0 auto;
    }
}

/* Pure CSS Image Gallery */
.thumbnail-images img {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.thumbnail-images img:hover {
    opacity: 1;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.thumbnail-images img.active {
    opacity: 1;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Pure CSS Quantity Controls */
.quantity-controls button {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.quantity-controls button:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Pure CSS Variant Selection */
.variant-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.color-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Pure CSS Button Interactions */
.btn-add-cart:hover,
.btn-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-view:hover {
    background-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}