:root {
     --primary: #000000;
     --secondary: #ffffff;
     --accent: #f5f5f5;
     --text: #333333;
     --light-text: #777777;
     --border: #e0e0e0;
     --dark-border: #444444;
     --success: #4caf50;
     --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     --section-spacing: 30px;
 }

 * {
     box-sizing: border-box;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     background-color: #fff;
     color: var(--text);
     margin: 0;
     padding: 0;
     line-height: 1.6;
 }

 .product-container {
     max-width: 1280px;
     margin: 40px auto;
     padding: 0 15px;
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
 }

 @media (min-width: 768px) {
     .product-container {
         margin: 60px auto;
         padding: 0 20px;
         gap: 40px;
     }
 }

 @media (min-width: 992px) {
     .product-container {
         grid-template-columns: 1.1fr 0.9fr;
         gap: 60px;
     }
 }

 .product-images {
     position: relative;
 }

 .main-image-container {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: var(--shadow);
     background: #fff;
     cursor: zoom-in;
 }

 .main-image {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease;
 }

 .main-image.zoomed {
     transform: scale(1.5);
     cursor: zoom-out;
 }

 .image-zoom {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(0, 0, 0, 0.7);
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: var(--transition);
 }

 .image-zoom:hover {
     transform: scale(1.1);
     background: rgba(0, 0, 0, 0.9);
 }

 .image-zoom i {
     color: white;
     font-size: 18px;
 }

 .thumbnails {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
     margin-top: 15px;
 }

 @media (min-width: 480px) {
     .thumbnails {
         grid-template-columns: repeat(5, 1fr);
     }
 }

 @media (min-width: 768px) {
     .thumbnails {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .thumbnail {
     width: 100%;
     aspect-ratio: 1/1;
     object-fit: cover;
     border-radius: 6px;
     cursor: pointer;
     opacity: 0.7;
     transition: var(--transition);
     border: 2px solid transparent;
 }

 .thumbnail:hover,
 .thumbnail.active {
     opacity: 1;
     border-color: var(--primary);
 }

 .product-details {
     padding: 0 5px;
 }

 @media (min-width: 768px) {
     .product-details {
         padding: 0 10px;
     }
 }

 .product-title {
     font-size: 28px;
     font-weight: 700;
     margin: 0 0 15px;
     color: var(--primary);
     line-height: 1.2;
 }

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

 .product-price-container {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 20px;
     gap: 12px;
 }

 .current-price {
     font-size: 24px;
     font-weight: 700;
     color: var(--primary);
 }

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

 .original-price {
     font-size: 18px;
     text-decoration: line-through;
     color: var(--light-text);
 }

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

 .discount-badge {
     background: var(--primary);
     color: white;
     padding: 6px 10px;
     border-radius: 6px;
     font-size: 13px;
     font-weight: 600;
 }

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

 .stars {
     color: #000;
     display: flex;
     gap: 2px;
 }

 .rating-count {
     color: var(--light-text);
     font-size: 14px;
 }

 .product-description {
     margin-bottom: 25px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border);
 }

 .product-description p {
     line-height: 1.6;
     color: var(--text);
     margin: 0;
 }

 .color-selection,
 .size-selection,
 .quantity-selection,
 .promo-section {
     margin-bottom: var(--section-spacing);
 }

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

 .section-title h3 {
     font-size: 16px;
     margin: 0;
     color: var(--primary);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .selected-value {
     font-weight: 500;
     color: var(--text);
     font-size: 14px;
 }

 .colors {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .color-option {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     border: 2px solid transparent;
     transition: var(--transition);
     position: relative;
 }

 .color-option.active {
     border-color: var(--primary);
     transform: scale(1.1);
 }

 .color-option.active::after {
     content: '✓';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 14px;
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
 }

 .color-option[data-color="White"] {
     border: 1px solid #eee;
 }

 .size-guide-link a {
     color: var(--light-text);
     font-size: 14px;
     text-decoration: underline;
     transition: var(--transition);
 }

 .size-guide-link a:hover {
     color: var(--primary);
 }

 .sizes {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 10px;
 }

 @media (min-width: 480px) {
     .sizes {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 @media (min-width: 768px) {
     .sizes {
         grid-template-columns: repeat(5, 1fr);
     }
 }

 .size-option {
     padding: 12px 5px;
     border: 1px solid var(--dark-border);
     background: white;
     border-radius: 6px;
     cursor: pointer;
     transition: var(--transition);
     text-align: center;
     font-weight: 500;
     font-size: 14px;
 }

 .size-option:hover {
     border-color: var(--primary);
     background: var(--accent);
 }

 .size-option.active {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }

 .size-option.disabled {
     opacity: 0.3;
     cursor: not-allowed;
     position: relative;
 }

 .size-option.disabled::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 10%;
     width: 80%;
     height: 1px;
     background: var(--primary);
     transform: rotate(-45deg);
 }

 .quantity-controls {
     display: flex;
     align-items: center;
     margin-top: 10px;
     max-width: 140px;
     border: 1px solid var(--dark-border);
     border-radius: 6px;
     overflow: hidden;
 }

 .quantity-btn {
     width: 44px;
     height: 44px;
     background: var(--accent);
     border: none;
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .quantity-btn:hover {
     background: #e8e8e8;
 }

 #productQty {
     width: 60px;
     height: 44px;
     text-align: center;
     border: none;
     border-left: 1px solid var(--dark-border);
     border-right: 1px solid var(--dark-border);
     margin: 0 -1px;
     font-weight: 500;
     font-size: 16px;
 }

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 .promo-container {
     background: var(--accent);
     border-radius: 8px;
     padding: 15px;
     margin-top: 10px;
     border: 1px solid var(--border);
 }

 @media (min-width: 768px) {
     .promo-container {
         padding: 20px;
     }
 }

 .promo-header {
     display: flex;
     align-items: center;
     margin-bottom: 0;
     cursor: pointer;
 }

 .promo-header h4 {
     margin: 0 0 0 10px;
     font-size: 16px;
     font-weight: 600;
     color: var(--primary);
 }

 .promo-icon {
     color: var(--primary);
     font-size: 18px;
 }

 .promo-content {
     display: none;
     margin-top: 15px;
 }

 .promo-content.active {
     display: block;
     animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .promo-input-group {
     display: flex;
     margin-bottom: 12px;
 }

 .promo-input {
     flex: 1;
     padding: 12px 15px;
     border: 1px solid var(--dark-border);
     border-radius: 6px 0 0 6px;
     font-size: 14px;
     border-right: none;
 }

 .apply-promo-btn {
     padding: 0 20px;
     background: var(--primary);
     color: white;
     border: 1px solid var(--primary);
     border-radius: 0 6px 6px 0;
     cursor: pointer;
     transition: var(--transition);
     font-weight: 500;
 }

 .apply-promo-btn:hover {
     background: #333;
 }

 .promo-message {
     font-size: 14px;
     margin-top: 8px;
     display: none;
     padding: 8px 12px;
     border-radius: 4px;
 }

 .promo-message.success {
     color: var(--success);
     background-color: rgba(76, 175, 80, 0.1);
     display: block;
 }

 .promo-message.error {
     color: #d32f2f;
     background-color: rgba(211, 47, 47, 0.1);
     display: block;
 }

 .product-features {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin: 25px 0;
     padding: 20px 0;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }

 @media (max-width: 480px) {
     .product-features {
         grid-template-columns: 1fr;
     }
 }

 .feature {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .feature-icon {
     width: 20px;
     height: 20px;
     color: var(--primary);
 }

 .feature-text {
     font-size: 14px;
     color: var(--text);
 }

 .product-actions {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin: 30px 0;
 }

 @media (min-width: 480px) {
     .product-actions {
         flex-direction: row;
     }

     .product-actions button,
     .product-actions a {
         flex: 1;
     }
 }

 .add-to-cart-btn,
 .buy-now-btn {
     padding: 16px 20px;
     font-size: 14px;
     font-weight: 700;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     transition: var(--transition);
     text-align: center;
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     text-transform: uppercase;
     letter-spacing: 1px;
     position: relative;
     overflow: hidden;
 }

 @media (min-width: 768px) {

     .add-to-cart-btn,
     .buy-now-btn {
         padding: 18px 25px;
     }
 }

 .add-to-cart-btn {
     background: var(--primary);
     color: #fff;
     border: 2px solid var(--primary);
 }

 .add-to-cart-btn:hover {
     background: #333;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .buy-now-btn {
     background: #fff;
     color: var(--primary);
     border: 2px solid var(--primary);
 }

 .buy-now-btn:hover {
     background: var(--primary);
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .shipping-info {
     background: var(--accent);
     border-radius: 8px;
     padding: 15px;
     margin-top: 20px;
     border: 1px solid var(--border);
 }

 .shipping-info p {
     margin: 0;
     font-size: 14px;
     color: var(--text);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .shipping-info i {
     color: var(--primary);
 }

 /* Image modal for zoom */
 .image-modal {
     display: none;
     position: fixed;
     z-index: 1000;
     padding-top: 50px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     overflow: auto;
     justify-content: center;
     align-items: flex-start;
 }

 .image-modal-content {
     display: block;
     max-width: 90%;
     max-height: 80vh;
     margin: auto;
     border-radius: 8px;
 }

 .close-modal {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
 }

 .close-modal:hover {
     color: #bbb;
 }

 /* Sticky add to cart for mobile */
 .sticky-cart {
     display: none;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: white;
     padding: 15px;
     box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
     z-index: 100;
 }

 .sticky-cart-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1280px;
     margin: 0 auto;
 }

 .sticky-price {
     font-weight: 700;
     font-size: 18px;
 }

 .sticky-add-to-cart {
     padding: 12px 20px;
     background: var(--primary);
     color: white;
     border: none;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
 }

 @media (max-width: 767px) {
     .sticky-cart {
         display: block;
     }

     .product-actions {
         margin-bottom: 80px;
     }
 }

 /* Toast notification */
 .toast {
     visibility: hidden;
     min-width: 250px;
     background-color: var(--primary);
     color: #fff;
     text-align: center;
     border-radius: 8px;
     padding: 16px;
     position: fixed;
     z-index: 1000;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     opacity: 0;
     transition: opacity 0.5s, bottom 0.5s;
 }

 .toast.show {
     visibility: visible;
     opacity: 1;
     bottom: 50px;
 }

 .error-container {
     text-align: center;
     padding: 60px 20px;
 }

 .error-container h1 {
     font-size: 24px;
     color: var(--primary);
     margin-bottom: 20px;
 }

 .error-container a {
     color: var(--primary);
     text-decoration: underline;
 }