/* General Styles for the Product Detail Page Container */
.container-product {
    max-width: 1300px; /* Slightly wider for an editorial layout */
    margin: 50px auto;
    padding: 20px 40px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Clean body font */
    color: #222;
}

.product-detail-layout-new {
    display: flex;
    flex-wrap: wrap; 
    gap: 60px; /* Generous breathing room between image and text */
    padding-top: 20px;
}

/* Product Gallery (Left Column) */
.product-gallery-new {
    flex: 1 1 500px; 
    min-width: 320px; 
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-product-image-detail {
    width: 100%;
    max-height: 836px; /* Taller for fashion imagery */
    object-fit: cover; /* Cover gives a more editorial, full-bleed feel */
    border-radius: 0; /* Sharp corners for a modern, luxury look */
    background-color: #fcfcfc;
}

.thumbnail-gallery-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.thumbnail-image-detail {
    width: 85px; 
    height: 110px; /* Portrait ratio for fashion */
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6; /* Unselected states fade back */
    transition: opacity 0.3s ease, filter 0.3s ease;
    border: none; /* Removed heavy borders */
}

.thumbnail-image-detail:hover {
    opacity: 0.8;
}

.thumbnail-image-detail.active { 
    opacity: 1;
    border-bottom: 2px solid #111; /* Subtle active indicator */
}

/* Product Information (Right Column) */
.product-info-new {
    flex: 1.2 1 400px; 
    display: flex;
    flex-direction: column;
}

.product-brand-detail {
    font-size: 0.75em;
    letter-spacing: 2px;
    color: #777;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.product-title-detail { 
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', serif; /* Luxury serif stack */
    font-size: 2.8em; 
    font-weight: 400; /* Lighter weight is more elegant */
    margin-top: 0;
    margin-bottom: 15px;
    color: #111;
    line-height: 1.1;
}

/* Price Styling */
.product-info-new p.price { 
    font-size: 1.4em;
    font-weight: 500;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.product-price .original-price { 
    text-decoration: line-through;
    color: #999;
    font-size: 0.8em;
    margin-right: 12px;
}

.product-price .current-price {
    color: #111;
    margin-left: 19px;
}

.product-price .current-price.discounted {
    color: #b00000; /* Sophisticated deep red for sale */
}

.product-price .discount-percentage-text {
    font-size: 0.8em;
    color: #b00000;
    margin-left: 10px;
    font-weight: 500;
}

/* Description */
.description { 
    font-size: 1.05em;
    line-height: 1.8; /* High line-height for readability */
    color: #444;
    margin-bottom: 30px;
    font-weight: 300;
}

/* --- NEW: Luxury Specifications List --- */
.product-specifications {
    margin-bottom: 35px;
    padding: 25px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.specs-title {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0;
    margin-bottom: 15px;
    color: #111;
    font-weight: 600;
}

.specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: start !important;
}

.specs-list li {
    font-size: 0.95em;
    display: flex;
    color: #444;
}

.spec-label {
    width: 140px; /* Aligns all the values nicely */
    font-weight: 600;
    color: #111;
}

.spec-value {
    flex: 1;
    font-weight: 300;
}
/* -------------------------------------- */

.options-container-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 35px;
}

.form-group-detail {
    display: flex;
    flex-direction: column; 
    flex: 1 1 120px; /* Allows side-by-side layout for small inputs */
}

.custom-measurements-group {
    flex: 1 1 100%; /* Forces textarea to take full width */
}

.form-group-detail label {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
}

#size-select, 
#quantity-input-detail,
#custom-measurements-input {
    padding: 14px;
    /* border: 1px solid #ddd; */
    border-radius: 0; /* Sharp corners */
    font-size: 0.95em;
    /* background-color: transparent; */
    transition: border-color 0.3s ease;
    font-family: inherit;
    margin-top: 0px !important;
}

#size-select:focus, 
#quantity-input-detail:focus,
#custom-measurements-input:focus {
    outline: none;
    border-color: #111; /* Strong focus state */
}

#custom-measurements-input {
    resize: vertical;
    min-height: 80px;
}

/* Actions / Buttons */
.actions-container-detail {
    display: flex;
    flex-direction: column; /* Stacked buttons feel more premium */
    gap: 15px; 
}

.button-action-detail { 
    padding: 16px 20px;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none;
    border-radius: 0; /* Sharp corners */
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%; 
    text-align: center;
}

.button-action-detail:disabled {
    background-color: #f5f5f5;
    color: #aaa;
    border: 1px solid #eaeaea;
    cursor: not-allowed;
}

.primary-action { 
    background-color: #111; 
    color: #fff;
    border: 1px solid #111;
}

.primary-action:hover:not(:disabled) {
    background-color: #333; 
    border-color: #333;
}

.secondary-action-detail { 
    background-color: transparent; 
    color: #111;
    border: 1px solid #111;
}

.secondary-action-detail:hover:not(:disabled) {
    background-color: #f9f9f9;
}


/* Loading and Error Messages */
.loading-message, .error-message {
    text-align: center;
    padding: 80px 20px;
    font-size: 1.2em;
    color: #777;
    font-weight: 300;
    letter-spacing: 1px;
}

.error-message h1 {
    font-family: 'Didot', 'Bodoni MT', serif;
    color: #111;
    margin-bottom: 15px;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
    .product-detail-layout-new {
        gap: 40px;
    }
    .product-title-detail {
        font-size: 2.2em;
    }
    .spec-label {
        width: 100px;
    }
}

@media (max-width: 600px) {
    .container-product {
        padding: 15px;
        margin: 20px auto;
    }
    .product-gallery-new, .product-info-new {
        min-width: 100%;
    }
    .product-title-detail {
        font-size: 2em;
    }
    .options-container-detail {
        flex-direction: column;
    }
    .form-group-detail {
        flex: 1 1 100%;
    }
    .specs-list li {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
    }
}

.characteristics-table {
  width: 100%;
  margin-top: 5px;
  table-layout: fixed; /* Forces the 3 columns to be exactly equal width */
}

.characteristics-table td {
  padding: 8px 15px 8px 15px; /* Adds breathing room around the text */
  width: 33.33%; 
  vertical-align: top;
  line-height: 1.4; /* Makes multi-line text easier to read */
  position: relative;
}

/* Adds a clean, uniform bullet point to each item */
.characteristics-table td::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #333;
  font-weight: bold;
}

/* Hides the bullet if the cell is empty (e.g., the last row only has 1 item) */
.characteristics-table td:empty::before {
  content: "";
}