:root {
    --amazon-primary: #ff9900;
    --amazon-dark: #232f3e;
    --amazon-light: #f2f2f2;
    --amazon-price: #b12704;
    --amazon-green: #007600;
    --amazon-link: #007185;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #0F1111;
    line-height: 1.5;
}

.container-custom {
    max-width: 1500px;
    margin: auto;
    padding: 0 18px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 18px 0;
    font-size: 13px;
}

.breadcrumb a {
    color: var(--amazon-link);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--amazon-primary);
    text-decoration: underline;
}

/* ==========================================================
   PRODUCT LAYOUT - 3 COLUMN
========================================================== */
.product-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr 340px;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 45px;
}

/* ==========================================================
   PRODUCT GALLERY - AMAZON STYLE (Thumbnails Left)
========================================================== */
.product-gallery {
    width: 100%;
    position: sticky;
    top: 20px;
}

.gallery-wrapper {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Thumbnails - Left Side */
.gallery-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 65px;
    flex-shrink: 0;
}

.gallery-thumbnails .thumbnail-image {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    padding: 3px;
    background: #fff;
    transition: all 0.25s ease;
}

.gallery-thumbnails .thumbnail-image:hover {
    border-color: var(--amazon-primary);
    transform: translateY(-2px);
}

.gallery-thumbnails .thumbnail-image.active {
    border-color: var(--amazon-primary);
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.25);
}

/* Main Image - Right Side */
.gallery-main {
    flex: 1;
    min-width: 0;
}

.main-product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 500px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    display: block;
    transition: transform 0.3s ease;
}

.main-product-image:hover {
    transform: scale(1.01);
}

/* ==========================================================
   PRODUCT INFO
========================================================== */
.product-info {
    width: 100%;
    min-width: 0;
}

.store-name {
    color: var(--amazon-link);
    font-size: 14px;
    margin-bottom: 5px;
}

.store-name:hover {
    color: var(--amazon-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* Product Title with View More/Less */
.product-title-wrapper {
    position: relative;
}

.product-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 6px;
    color: #111;
}

.title-view-btn {
    background: none;
    border: none;
    color: var(--amazon-link);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 0;
    margin-top: 2px;
}

.title-view-btn:hover {
    color: var(--amazon-primary);
    text-decoration: underline;
}

/* Rating Row - Amazon Style */
.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
    margin: 4px 0 8px 0;
    flex-wrap: wrap;
}

.rating-row .stars {
    color: #f59e0b;
    font-size: 16px;
    letter-spacing: 1px;
}

.rating-count {
    color: var(--amazon-link);
    cursor: pointer;
    font-size: 13px;
}

.rating-count:hover {
    text-decoration: underline;
}

.rating-divider {
    color: #d1d5db;
}

.sold-count {
    color: #6b7280;
    font-size: 13px;
}

/* Price */
.price-container {
    margin: 12px 0;
}

.price {
    font-size: 32px;
    font-weight: 700;
    color: #111;
}

.price .original-price {
    font-size: 20px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: line-through;
    margin-left: 12px;
}

.price .discount-badge {
    background: #dc2626;
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 10px;
}

.taxes {
    margin-top: 5px;
    color: #666;
    font-size: 14px;
}

/* ==========================================================
   PRODUCT HIGHLIGHTS
========================================================== */
.product-highlights {
    margin: 20px 0;
    padding: 16px 20px;
    border-left: 4px solid var(--amazon-primary);
    border-radius: 8px;
    background: #fafafa;
}

.product-highlights li {
    list-style: none;
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

.product-highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--amazon-green);
    font-size: 16px;
    font-weight: bold;
}

/* ==========================================================
   DESCRIPTION
========================================================== */
.description-section {
    margin-top: 16px;
}

.about-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

.product-description {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.product-description.expanded {
    max-height: 10000px;
    overflow: visible;
}

.product-description * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

.product-description img {
    max-width: 100% !important;
    height: auto !important;
}

.product-description p {
    margin-bottom: 10px;
}

.view-more-btn,
.view-less-btn {
    border: none;
    background: none;
    color: var(--amazon-link);
    cursor: pointer;
    font-size: 14px;
    margin-top: 6px;
    padding: 4px 0;
    display: inline-block;
}

.view-more-btn:hover,
.view-less-btn:hover {
    color: var(--amazon-primary);
    text-decoration: underline;
}

/* ==========================================================
   PURCHASE BOX
========================================================== */
.purchase-box {
    position: sticky;
    top: 20px;
    width: 100%;
    max-width: 340px;
    padding: 22px;
    background: #fff;
    border: 1px solid #d5d9d9;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.in-stock {
    color: var(--amazon-green);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.in-stock i {
    margin-right: 6px;
}

/* Delivery Box */
.delivery-box {
    margin: 14px 0;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.delivery-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.delivery-header i {
    font-size: 22px;
    color: #ff9900;
    flex-shrink: 0;
}

.delivery-small {
    display: block;
    font-size: 11px;
    color: #777;
}

.delivery-header strong {
    font-size: 15px;
    font-weight: 700;
}

.delivery-check {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    width: 100%;
    max-width: 100%;
}

.delivery-input {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0 12px;
    outline: none;
    font-size: 14px;
    width: auto;
}

.delivery-input:focus {
    border-color: #ff9900;
    box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
}

.delivery-btn {
    width: 90px;
    min-width: 80px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: #232f3e;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    height: 42px;
    transition: 0.3s;
}

.delivery-btn:hover {
    background: #1a2533;
}

/* Delivery Result */
.delivery-result,
.delivery-success,
.delivery-error {
    display: flex;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.delivery-result {
    background: #f8f8f8;
}

.delivery-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.delivery-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.delivery-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delivery-result .delivery-icon {
    background: #fff2dd;
}

.delivery-success .delivery-icon {
    background: #dcfce7;
}

.delivery-error .delivery-icon {
    background: #fee2e2;
}

.delivery-icon i {
    font-size: 18px;
}

.delivery-result .delivery-icon i {
    color: #ff9900;
}

.delivery-success .delivery-icon i {
    color: #22c55e;
}

.delivery-error .delivery-icon i {
    color: #ef4444;
}

.delivery-content {
    flex: 1;
    min-width: 0;
}

.delivery-content h6 {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.delivery-content p {
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

.delivery-content strong {
    color: #111;
}

.delivery-content small {
    font-size: 12px;
    color: #6b7280;
}

/* Quantity Selector */
.quantity-selector {
    display: none;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}

.quantity-label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: none;
    background: #f5f5f5;
    color: #000;
    cursor: pointer;
    font-size: 18px;
    transition: .3s;
}

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

.quantity-input {
    flex: 1 1 auto;
    min-width: 50px;
    height: 40px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    outline: none;
    font-size: 15px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.add-to-cart-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 40px;
    background: #ffd814;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.add-to-cart-btn:hover {
    background: #f7ca00;
    transform: translateY(-2px);
}

.add-to-cart-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.buy-now-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 40px;
    background: #ff9900;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.buy-now-btn:hover {
    background: #f08804;
    transform: translateY(-2px);
}

.buy-now-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Secure Transaction */
.secure-transaction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.secure-transaction i {
    color: #22c55e;
}

/* ==========================================================
   SPECIFICATIONS
========================================================== */
.product-specs {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #ddd;
}

.product-specs h3 {
    font-size: 28px;
    margin-bottom: 25px;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table tr {
    border-bottom: 1px solid #eee;
}

.specs-table td {
    padding: 14px 10px;
}

.spec-label {
    width: 30%;
    font-weight: 700;
    color: #555;
}

.spec-value {
    color: #111;
}

/* ==========================================================
   RELATED PRODUCTS
========================================================== */
.related-products {
    margin-top: 40px;
    padding: 20px 0;
}

.related-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #1a1a1a;
}

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

.related-product-item {
    width: 100%;
}

.related-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}

.related-card-image {
    position: relative;
    padding-top: 100%;
    background: #f5f5f5;
    overflow: hidden;
}

.related-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.related-card:hover .related-card-image img {
    transform: scale(1.02);
}

.discount-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #cc0c39;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    z-index: 2;
}

.related-card-body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-title-small {
    font-size: 13px;
    font-weight: 500;
    color: #111;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}

.selling-price {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.mrp {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

/* ==========================================================
   UNIVERSAL PRODUCT VARIATIONS
   TYPE / COLOR / SIZE / LENGTH / VARIATION NAME
========================================================== */

#variationContainer {
    width: 100%;
    margin: 20px 0;
}

.variation-section {
    width: 100%;
}


/* ==========================================================
   VARIATION GROUP
========================================================== */

.variation-group {
    width: 100%;
    margin-bottom: 20px;
}

.variation-group:last-child {
    margin-bottom: 10px;
}


/* ==========================================================
   GROUP LABEL
========================================================== */

.variation-main-label {
    display: block;

    margin: 0 0 10px;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    color: #111;

    text-align: left;
}


/* ==========================================================
   OPTION LIST
========================================================== */

.variation-image-list {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    align-items: flex-start;
}


/* ==========================================================
   UNIVERSAL VARIATION OPTION
========================================================== */

.variation-image-option {
    width: 110px;
    min-height: 126px;

    padding: 7px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    background: #fff;

    border: 1.5px solid #d5d9d9;
    border-radius: 8px;

    cursor: pointer;

    position: relative;

    box-sizing: border-box;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.variation-image-option:hover:not(.disabled) {
    border-color: #999;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.08);

    transform: translateY(-2px);
}


/* ==========================================================
   SELECTED OPTION
========================================================== */

.variation-image-option.selected {
    border-color: var(--amazon-primary);

    border-width: 2px;

    background: #fffaf0;

    box-shadow:
        0 0 0 1px rgba(255, 153, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);

    transform: translateY(-1px);
}


/* ==========================================================
   SELECTED CHECK MARK
========================================================== */

.variation-image-option.selected::after {
    content: "✓";

    position: absolute;

    top: 5px;
    right: 5px;

    width: 20px;
    height: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--amazon-primary);

    color: #fff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   VARIATION IMAGE
========================================================== */

.variation-image-wrapper {
    width: 82px;
    height: 82px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #fff;

    border: 1px solid #eeeeee;

    border-radius: 6px;

    overflow: hidden;

    box-sizing: border-box;
}


/* ==========================================================
   IMAGE
========================================================== */

.variation-option-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center;

    background: #fff;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ==========================================================
   IMAGE HOVER
========================================================== */

.variation-image-option:hover:not(.disabled)
.variation-option-image {
    transform: scale(1.04);
}


/* ==========================================================
   OPTION NAME
========================================================== */

.variation-option-info {
    width: 100%;

    min-height: 32px;

    margin-top: 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    box-sizing: border-box;
}


/* ==========================================================
   NAME TEXT
========================================================== */

.variation-option-name {
    width: 100%;

    color: #111;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.25;

    text-align: center;

    word-break: break-word;

    overflow-wrap: anywhere;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* ==========================================================
   SELECTED NAME
========================================================== */

.variation-image-option.selected
.variation-option-name {
    color: #111;

    font-weight: 700;
}


/* ==========================================================
   DISABLED / UNAVAILABLE OPTION
========================================================== */

.variation-image-option.disabled {
    opacity: 0.38;

    cursor: not-allowed;

    pointer-events: auto;

    background: #f8f8f8;

    border-color: #e1e1e1;

    box-shadow: none;

    transform: none;
}


/* ==========================================================
   DISABLED IMAGE
========================================================== */

.variation-image-option.disabled
.variation-option-image {
    filter: grayscale(70%);

    opacity: 0.65;
}


/* ==========================================================
   DISABLED NAME
========================================================== */

.variation-image-option.disabled
.variation-option-name {
    color: #777;
}


/* ==========================================================
   DO NOT SHOW CHECK ON DISABLED
========================================================== */

.variation-image-option.disabled.selected::after {
    display: none;
}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
========================================================== */

.variation-image-option:focus-visible {
    outline: 2px solid var(--amazon-primary);

    outline-offset: 2px;
}


/* ==========================================================
   HIDDEN VARIATION ID
========================================================== */

#variationSelect {
    display: none !important;
}


/* ==========================================================
   SELECTED VARIATION PRICE
========================================================== */

#selectedVariationPrice {
    margin: 15px 0 8px;

    font-size: 28px;

    font-weight: 700;

    line-height: 1.2;

    color: #008000;
}


/* ==========================================================
   SELECTED VARIATION STOCK
========================================================== */

#selectedVariationStock {
    margin-bottom: 18px;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.4;
}


/* ==========================================================
   PRODUCT TYPE / NAME VARIATION
========================================================== */

/*
   Used for products such as:

   Charger:
   Type
   - Tpu Type-L 5Pcs
   - Tpu Type-L 1Pcs
   - Tpu Ip Cable 5Pcs

   Jewellery:
   Variations
   - Silver 2
   - Gold 2
   - Gold
   - Silver
*/

.variation-group[data-variation-group="Type"]
.variation-image-option,

.variation-group[data-variation-group="Variations"]
.variation-image-option {
    width: 125px;
    min-height: 135px;
}


/* ==========================================================
   TYPE / VARIATION IMAGE
========================================================== */

.variation-group[data-variation-group="Type"]
.variation-image-wrapper,

.variation-group[data-variation-group="Variations"]
.variation-image-wrapper {
    width: 88px;
    height: 88px;
}


/* ==========================================================
   COLOR OPTIONS
========================================================== */

.variation-group[data-variation-group="Color"]
.variation-image-option {
    width: 105px;

    min-height: 118px;
}


/* ==========================================================
   SIZE OPTIONS
========================================================== */

.variation-group[data-variation-group="Size"]
.variation-image-option {
    width: 88px;

    min-height: 105px;
}


/* ==========================================================
   LENGTH OPTIONS
========================================================== */

.variation-group[data-variation-group="Length"]
.variation-image-option {
    width: 95px;

    min-height: 110px;
}


/* ==========================================================
   SIZE / LENGTH IMAGE
========================================================== */

.variation-group[data-variation-group="Size"]
.variation-image-wrapper,

.variation-group[data-variation-group="Length"]
.variation-image-wrapper {
    width: 62px;
    height: 62px;
}


/* ==========================================================
   SIZE / LENGTH TEXT
========================================================== */

.variation-group[data-variation-group="Size"]
.variation-option-name,

.variation-group[data-variation-group="Length"]
.variation-option-name {
    font-size: 12px;

    font-weight: 600;
}


/* ==========================================================
   TYPE / VARIATION TEXT
========================================================== */

.variation-group[data-variation-group="Type"]
.variation-option-name,

.variation-group[data-variation-group="Variations"]
.variation-option-name {
    font-size: 12px;

    font-weight: 600;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    #variationContainer {
        margin: 18px 0;
    }

    .variation-group {
        margin-bottom: 18px;
    }

    .variation-main-label {
        font-size: 15px;

        margin-bottom: 9px;
    }

    .variation-image-list {
        gap: 9px;
    }

    .variation-image-option {
        width: 105px;

        min-height: 122px;

        padding: 6px;
    }

    .variation-image-wrapper {
        width: 78px;
        height: 78px;
    }

    .variation-option-info {
        min-height: 31px;

        margin-top: 6px;
    }

    .variation-option-name {
        font-size: 11.5px;
    }


    /* Type / Variation */

    .variation-group[data-variation-group="Type"]
    .variation-image-option,

    .variation-group[data-variation-group="Variations"]
    .variation-image-option {
        width: 115px;

        min-height: 130px;
    }


    .variation-group[data-variation-group="Type"]
    .variation-image-wrapper,

    .variation-group[data-variation-group="Variations"]
    .variation-image-wrapper {
        width: 82px;
        height: 82px;
    }


    /* Size */

    .variation-group[data-variation-group="Size"]
    .variation-image-option {
        width: 82px;

        min-height: 100px;
    }


    /* Length */

    .variation-group[data-variation-group="Length"]
    .variation-image-option {
        width: 90px;

        min-height: 105px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    #variationContainer {
        margin: 16px 0;
    }

    .variation-group {
        margin-bottom: 16px;
    }

    .variation-main-label {
        font-size: 15px;

        margin-bottom: 9px;
    }

    .variation-image-list {
        gap: 8px;
    }

    .variation-image-option {
        width: 95px;

        min-height: 115px;

        padding: 6px;

        border-radius: 7px;
    }

    .variation-image-wrapper {
        width: 70px;
        height: 70px;

        border-radius: 5px;
    }

    .variation-option-info {
        min-height: 30px;

        margin-top: 5px;
    }

    .variation-option-name {
        font-size: 11px;

        line-height: 1.2;
    }


    /* Type */

    .variation-group[data-variation-group="Type"]
    .variation-image-option,

    .variation-group[data-variation-group="Variations"]
    .variation-image-option {
        width: 105px;

        min-height: 120px;
    }


    .variation-group[data-variation-group="Type"]
    .variation-image-wrapper,

    .variation-group[data-variation-group="Variations"]
    .variation-image-wrapper {
        width: 74px;
        height: 74px;
    }


    /* Size */

    .variation-group[data-variation-group="Size"]
    .variation-image-option {
        width: 76px;

        min-height: 92px;
    }


    .variation-group[data-variation-group="Size"]
    .variation-image-wrapper {
        width: 54px;
        height: 54px;
    }


    /* Length */

    .variation-group[data-variation-group="Length"]
    .variation-image-option {
        width: 82px;

        min-height: 98px;
    }


    .variation-group[data-variation-group="Length"]
    .variation-image-wrapper {
        width: 56px;
        height: 56px;
    }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 576px) {

    #variationContainer {
        margin: 14px 0;
    }

    .variation-group {
        margin-bottom: 14px;
    }

    .variation-main-label {
        font-size: 14px;

        margin-bottom: 8px;
    }

    .variation-image-list {
        gap: 7px;
    }

    .variation-image-option {
        width: 82px;

        min-height: 103px;

        padding: 5px;
    }

    .variation-image-wrapper {
        width: 62px;
        height: 62px;
    }

    .variation-option-info {
        min-height: 27px;

        margin-top: 5px;
    }

    .variation-option-name {
        font-size: 10px;

        line-height: 1.15;
    }


    /* Type */

    .variation-group[data-variation-group="Type"]
    .variation-image-option,

    .variation-group[data-variation-group="Variations"]
    .variation-image-option {
        width: 90px;

        min-height: 108px;
    }


    .variation-group[data-variation-group="Type"]
    .variation-image-wrapper,

    .variation-group[data-variation-group="Variations"]
    .variation-image-wrapper {
        width: 64px;
        height: 64px;
    }


    /* Color */

    .variation-group[data-variation-group="Color"]
    .variation-image-option {
        width: 78px;

        min-height: 98px;
    }


    /* Size */

    .variation-group[data-variation-group="Size"]
    .variation-image-option {
        width: 68px;

        min-height: 82px;
    }


    .variation-group[data-variation-group="Size"]
    .variation-image-wrapper {
        width: 48px;
        height: 48px;
    }


    /* Length */

    .variation-group[data-variation-group="Length"]
    .variation-image-option {
        width: 74px;

        min-height: 88px;
    }


    .variation-group[data-variation-group="Length"]
    .variation-image-wrapper {
        width: 50px;
        height: 50px;
    }


    /* Check */

    .variation-image-option.selected::after {
        width: 17px;
        height: 17px;

        top: 4px;
        right: 4px;

        font-size: 10px;
    }
}


/* ==========================================================
   EXTRA SMALL MOBILE
========================================================== */

@media (max-width: 400px) {

    .variation-image-list {
        gap: 6px;
    }

    .variation-image-option {
        width: 76px;

        min-height: 96px;

        padding: 4px;
    }

    .variation-image-wrapper {
        width: 56px;
        height: 56px;
    }

    .variation-option-info {
        min-height: 26px;

        margin-top: 4px;
    }

    .variation-option-name {
        font-size: 9.5px;
    }


    /* Type / Variation */

    .variation-group[data-variation-group="Type"]
    .variation-image-option,

    .variation-group[data-variation-group="Variations"]
    .variation-image-option {
        width: 82px;

        min-height: 100px;
    }


    .variation-group[data-variation-group="Type"]
    .variation-image-wrapper,

    .variation-group[data-variation-group="Variations"]
    .variation-image-wrapper {
        width: 58px;
        height: 58px;
    }


    /* Size */

    .variation-group[data-variation-group="Size"]
    .variation-image-option {
        width: 62px;

        min-height: 76px;
    }


    .variation-group[data-variation-group="Size"]
    .variation-image-wrapper {
        width: 44px;
        height: 44px;
    }


    /* Length */

    .variation-group[data-variation-group="Length"]
    .variation-image-option {
        width: 68px;

        min-height: 82px;
    }


    .variation-group[data-variation-group="Length"]
    .variation-image-wrapper {
        width: 46px;
        height: 46px;
    }
}


/* ==========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .variation-image-option,
    .variation-option-image {
        transition: none;
    }
}
/* ==========================================================
   IMAGE COLLAGE & MODAL
========================================================== */
.description-image-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 15px 0;
}

.collage-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.collage-item:hover {
    transform: scale(1.02);
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.collage-more {
    text-align: center;
    padding: 10px 16px;
    background: #f0f0f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-top: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px dashed #ccc;
}

.collage-more:hover {
    background: #e0e0e0;
    border-color: #999;
    transform: scale(1.02);
}

.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 0.3s ease;
    padding: 20px;
}

.image-modal-overlay img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
}

.image-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10000;
}

.image-modal-close:hover {
    transform: rotate(90deg);
}

.image-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: default;
}

.image-modal-grid .modal-image-item {
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 2px solid transparent;
}

.image-modal-grid .modal-image-item:hover {
    transform: scale(1.05);
    border-color: #fff;
}

.image-modal-grid .modal-image-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* Desktop Large */
@media (max-width: 1400px) {
    .product-container {
        grid-template-columns: 1fr 1.1fr 300px;
        gap: 25px;
    }
    .purchase-box {
        max-width: 300px;
    }
    .gallery-thumbnails {
        width: 60px;
    }
    .gallery-thumbnails .thumbnail-image {
        width: 60px;
        height: 60px;
    }
}

/* Desktop Medium */
@media (max-width: 1200px) {
    .product-container {
        grid-template-columns: 1fr 1.2fr;
        gap: 25px;
    }
    .purchase-box {
        max-width: 100%;
        position: relative;
        top: 0;
    }
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 992px) {
    .product-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .product-gallery {
        position: relative;
        top: 0;
    }
    .gallery-wrapper {
        flex-direction: row-reverse;
        align-items: center;
    }
    .gallery-thumbnails {
        flex-direction: column;
        width: 70px;
        flex-shrink: 0;
    }
    .gallery-thumbnails .thumbnail-image {
        width: 70px;
        height: 70px;
    }
    .gallery-main {
        flex: 1;
    }
    .main-product-image {
        max-height: 450px;
        padding: 15px;
    }
    .purchase-box {
        max-width: 100%;
        position: relative;
        top: 0;
    }
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile Large */
@media (max-width: 768px) {
    .container-custom {
        padding: 0 15px;
    }
    .breadcrumb {
        font-size: 11px;
    }
    .product-title {
        font-size: 24px;
    }
    .price {
        font-size: 28px;
    }
    .price .original-price {
        font-size: 18px;
    }
    
    /* Gallery - Mobile */
    .gallery-wrapper {
        flex-direction: column-reverse;
        align-items: center;
    }
    .gallery-thumbnails {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .gallery-thumbnails .thumbnail-image {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }
    .gallery-main {
        width: 100%;
    }
    .main-product-image {
        max-height: 350px;
        padding: 15px;
    }
    
    .purchase-box {
        padding: 18px;
        max-width: 100%;
    }
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* Delivery - Mobile */
    .delivery-check {
        flex-direction: column;
        gap: 8px;
    }
    .delivery-input {
        width: 100%;
        height: 40px;
    }
    .delivery-btn {
        width: 100%;
        height: 40px;
    }
    .delivery-result,
    .delivery-success,
    .delivery-error {
        flex-wrap: wrap;
    }
    
    .image-modal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }
    .image-modal-close {
        top: 10px;
        right: 15px;
        font-size: 30px;
    }
}

/* Mobile Small */
@media (max-width: 576px) {
    .product-title {
        font-size: 20px;
    }
    .price {
        font-size: 24px;
    }
    .price .original-price {
        font-size: 16px;
    }
    .about-title {
        font-size: 18px;
    }
    
    /* Gallery - Small Mobile */
    .gallery-thumbnails .thumbnail-image {
        width: 50px;
        height: 50px;
    }
    .main-product-image {
        max-height: 280px;
        padding: 12px;
    }
    
    .purchase-box {
        padding: 14px;
    }
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .product-title-small {
        font-size: 12px;
    }
    .selling-price {
        font-size: 14px;
    }
    
    .delivery-box {
        padding: 12px 14px;
    }
    .delivery-header i {
        font-size: 18px;
    }
    .delivery-header strong {
        font-size: 14px;
    }
    .delivery-content h6 {
        font-size: 13px;
    }
    .delivery-content p {
        font-size: 12px;
    }
    .description-image-collage {
        gap: 6px;
    }
    .image-modal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 6px;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .product-title {
        font-size: 18px;
    }
    .price {
        font-size: 22px;
    }
    
    .gallery-thumbnails .thumbnail-image {
        width: 42px;
        height: 42px;
    }
    .main-product-image {
        max-height: 220px;
        padding: 10px;
    }
    
    .related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .product-title-small {
        font-size: 11px;
    }
    .selling-price {
        font-size: 13px;
    }
    .mrp {
        font-size: 10px;
    }
    
    .quantity-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    .quantity-input {
        height: 35px;
        font-size: 13px;
    }
    .add-to-cart-btn,
    .buy-now-btn {
        padding: 12px;
        font-size: 14px;
    }
    
    .delivery-box {
        padding: 10px 12px;
    }
    .delivery-header i {
        font-size: 16px;
    }
    .delivery-header strong {
        font-size: 13px;
    }
    .delivery-small {
        font-size: 10px;
    }
    .delivery-input {
        height: 34px;
        font-size: 12px;
        padding: 0 8px;
    }
    .delivery-btn {
        height: 34px;
        font-size: 12px;
        min-width: 60px;
    }
    .delivery-content h6 {
        font-size: 12px;
    }
    .delivery-content p {
        font-size: 11px;
    }
}



.related-card-image .discount-badge {
    display: none !important;
}


.discount-badge {
    display: none !important;
}

.delivery-success .delivery-content p {
    font-size: 15px;
    font-weight: 500;
    color: #111;
}

.delivery-success .delivery-content p strong {
    font-size: 16px;
    color: #1a1a2e;
}


/* =========================================
   PRODUCT DETAILS - WISHLIST BUTTON
========================================= */

.wishlist-detail-btn {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid #d5d9d9;
    border-radius: 8px;

    background: #ffffff;
    color: #222222;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}


.wishlist-detail-btn:hover {
    background: #f7f7f7;
    border-color: #b7b7b7;
}


.wishlist-detail-btn:active {
    transform: scale(0.99);
}


.wishlist-detail-btn i {
    font-size: 18px;
}


/* Product already in wishlist */

.wishlist-detail-btn.active {
    border-color: #dc3545;
    color: #dc3545;
    background: #fff5f5;
}


.wishlist-detail-btn.active i {
    color: #dc3545;
}


/* Keyboard accessibility */

.wishlist-detail-btn:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 2px;
}

.highlights-view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: #007185;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.highlights-view-more:hover {
    color: #c45500;
    text-decoration: underline;
}

.highlights-view-more i {
    font-size: 11px;
}

.highlights-more-content {
    margin: 0;
    padding: 0;
}