/* ─── Watch Detail Page — overrides on top of detail.css ─── */

/* ── Product title: Figma shows 40px (h=70 over 2 lines) vs detail.css default 25px ── */
.watch-detail-page .product-title {
    font-size: 40px;
    letter-spacing: 4px;
    margin-bottom: 24px;
}

/* ── Product main: tighter top padding to match Figma (hero at ~y=224 after breadcrumb) ── */
.watch-detail-page .product-main {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ── Watch image is taller portrait (320x444) vs jewellery (442x342) ── */
.watch-detail-page .slider-item {
    height: 444px;
}

/* ── Product description: line-height 2 matching Figma ── */
.watch-detail-page .product-description-short {
    line-height: 2;
    letter-spacing: 0.32px;
    font-size: 16px;
}

/* ── Full-width banners: height auto so images show fully ── */
.watch-detail-page .detail-banner,
.wd-banner-auto {
    height: auto;
}

.wd-banner-auto img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

/* ── Split section labels: gold #AF6F44 matching Figma ── */
.watch-detail-page .detail-split__label {
    color: #af6f44;
    line-height: 1.4;
    height: auto;
}

/* ─── Image Strip + Specs Section ─── */
.wd-specs-section {
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ─── Specs Grid: text-only, #fafafa bg, row1=3col, row2=2col ─── */
.wd-specs-row {
    display: grid;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.wd-specs-row--3 {
    grid-template-columns: repeat(3, 1fr);
    height: 367px;
}

.wd-specs-row--2 {
    grid-template-columns: repeat(2, 1fr);
    height: 367px;
}

.wd-spec-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    gap: 10px;
}

.wd-spec-cell:first-child {
    border-left: none;
}

/* Specs grid — 5 columns matching Figma Case/Dial/Movement/Features/Strap layout */
.wd-specs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 60px 102px;
    gap: 0;
}

.wd-spec-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 24px;
}

.wd-spec-label {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.0736px;
    text-transform: uppercase;
    color: #af6f44;
    line-height: 55px;
    margin: 0;
}

.wd-spec-value {
    font-family: var(--font-primary);
    font-size: 25px;
    font-weight: 400;
    line-height: 55px;
    letter-spacing: 0.115px;
    text-transform: uppercase;
    color: #2a190e;
    margin: 0;
}

/* ─── Responsive ─── */
/* ── Tablet (≤1024px): row1 = 3col but shorter, row2 = 2col shorter ── */
@media (max-width: 1024px) {
    .watch-detail-page .product-title {
        font-size: 28px;
        letter-spacing: 2.8px;
    }

    .wd-specs-row--3 {
        height: auto;
        grid-template-columns: repeat(3, 1fr);
    }

    .wd-specs-row--2 {
        height: auto;
        grid-template-columns: repeat(2, 1fr);
    }

    .wd-spec-cell {
        padding: 32px 20px;
        min-height: 200px;
    }

    .wd-spec-value {
        font-size: 16px;
        line-height: 1.5;
    }

    .wd-spec-label {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* ── Mobile (≤768px): all rows stack to 2 columns ── */
@media (max-width: 768px) {
    .watch-detail-page .product-title {
        font-size: 24px;
        letter-spacing: 2.4px;
    }

    .wd-specs-row--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wd-specs-row--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .wd-spec-cell {
        padding: 28px 16px;
        min-height: 160px;
        border-left: 1px solid rgba(0, 0, 0, 0.06);
    }

    .wd-specs-row--3 .wd-spec-cell:nth-child(odd),
    .wd-specs-row--2 .wd-spec-cell:nth-child(odd) {
        border-left: none;
    }

    .wd-spec-value {
        font-size: 14px;
        line-height: 1.4;
    }

    .wd-spec-label {
        font-size: 12px;
    }
}

/* ── Small mobile (≤480px): single column ── */
@media (max-width: 480px) {
    .wd-specs-row--3,
    .wd-specs-row--2 {
        grid-template-columns: 1fr;
    }

    .wd-spec-cell {
        border-left: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        min-height: auto;
        padding: 24px 20px;
    }

    .wd-spec-value {
        font-size: 15px;
        line-height: 1.4;
    }

    .wd-spec-label {
        font-size: 12px;
        line-height: 1.4;
    }
}