.product-header {
text-align: center;
margin-bottom: 30px;
}

.product-header h1 {
color: #2c3e50;
font-size: 2.2rem;
margin-bottom: 10px;
}

.product-content {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 30px;
}

.product-image {
flex: 1;
min-width: 300px;
}

.product-image img {
width: 100%;
height: auto;
border-radius: 5px;
}

.product-details {
flex: 1;
min-width: 300px;
background: white;
padding: 10px;
border-radius: 5px;
margin-top: -20px;
}

.product-details h2 {
color: #2c3e50;
margin-bottom: 20px;
font-size: 1.8rem;
}

.detail-item {
margin-bottom: 20px;
}

.detail-label {
font-weight: bold;
color: #34495e;
display: inline-block;
margin-right: 10px;
}

.color-options, .style-options {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}

.option-btn {
padding: 8px 15px;
border: 2px solid #ddd;
background: white;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}

.option-btn:hover {
border-color: #3498db;
}

.option-btn.selected {
border-color: #e74c3c;
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3);
}

.price-section {
margin: 20px 0;
}

.price {
color: #e74c3c;
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 15px;
}

.qty-section {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}

.qty-label {
font-weight: bold;
color: #34495e;
}

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

.qty-btn {
width: 36px;
height: 36px;
border: 1px solid #ddd;
background: #f8f9fa;
border-radius: 5%;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.qty-btn:hover {
background: #e9ecef;
}

.qty-display {
min-width: 40px;
text-align: center;
font-weight: bold;
font-size: 1.1rem;
}

.info-text {
background: #F5F5F5;
padding: 5px;
border-radius: 8px;
margin: 5px 0;
}

.info-text ul {
padding-left: 20px;
margin: 10px 0;
}

.info-text li {
margin-bottom: 8px;
}

.action-buttons {
display: flex;
gap: 15px;
margin: 20px 0;
}

.action-btn {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.buy-now {
background: #e74c3c;
color: white;
}

.add-to-cart {
background: #3498db;
color: white;
}

.action-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}

.tabs {
margin-bottom: 30px;
}

.tab-buttons {
display: flex;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
}

.tab-button {
padding: 15px 25px;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: #7f8c8d;
transition: all 0.3s ease;
}

.tab-button.active {
color: #3498db;
border-bottom: 3px solid #3498db;
}

.tab-content {
display: none;
padding:5px;
}

.tab-content.active {
display: block;
}

.tab-content h3 {
color: #2c3e50;
margin-bottom: 15px;
}

.tab-content p {
line-height: 1.8;
color: #555;
}

.photos-section {
margin-bottom: 40px;
}

.photos-section h2 {
text-align: center;
margin-bottom: 25px;
color: #2c3e50;
}

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

.photo-item {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.3s ease;
}

.photo-item:hover {
transform: translateY(-5px);
}

.photo-item img {
width: 100%;
height: ;
object-fit: cover;
display: block;
}

.more-photos {
position: relative;
}

.more-photos::after {
content: "+";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: bold;
}

/* Mobile Action Buttons (Fixed at bottom) */
.mobile-action-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
padding: 2px;
gap: 3px;
z-index: 1000;
display: none;
transition: transform 0.3s;
transform: translateY(100%);
}

.mobile-action-bar.show {
transform: translateY(0);
}

.mobile-action-bar .action-btn {
flex: 1;
padding: 15px;
font-size: 1rem;
}

/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
z-index: 1000;
justify-content: center;
align-items: center;
z-index: 9999;
}

.modal-content {
max-width: 50%;
max-height: ;
}

.modal-content img {
max-width: 100%;
max-height: ;
border-radius: 5px;
}

.close-modal {
position: absolute;
bottom: 50px;
right: 40px;
color: #CD5C5C;
font-size: 60px;
cursor: pointer;
z-index: 9999;
}

/* Responsive Design */
@media (max-width: 768px) {
.product-content {
	flex-direction: column;
}   
.photos-grid {
	grid-template-columns: repeat(1, 1fr);
}
.mobile-action-bar {
	display: flex;
}
.action-buttons {
	display: none;
}      
.modal-content {
max-width: 90%;
max-height: 90%;
}			
}

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

.product-header h1 {
	font-size: 1.8rem;
}

.tab-buttons {
	flex-direction: row;
	overflow-x: auto;
}

.tab-button {
	white-space: nowrap;
}

.action-buttons {
	display: none;
}
}