/* THE DYNASTY — Product Details Mobile Styles */

@media screen and (max-width: 768px) {
    html.product-details-document {
        font-size: 12px;
    }

    body.product-details-page {
        font-size: 12px;
        overflow-x: hidden;
    }

    .product-details-page,
    .product-details-page * {
        box-sizing: border-box;
    }

    .product-details-shell {
        width: 100%;
        max-width: 100%;
        padding-inline: 12px;
        margin-inline: auto;
    }

    .product-details-hero {
        padding: 32px 12px 24px;
    }

    .product-details-hero__eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: 0.12em;
    }

    .product-details-hero h1 {
        font-size: 2rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .product-details-main {
        padding: 16px 0 64px;
    }

    .product-details-back {
        max-width: 100%;
        min-height: 44px;
        margin-bottom: 14px;
        font-size: 1rem;
    }

    .product-details-article {
        width: 100%;
        min-width: 0;
        padding: 16px 12px;
        border-radius: 8px;
    }

    .product-details-rich-content {
        width: 100%;
        min-width: 0;
        font-size: 12px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .product-details-rich-content h1 {
        margin: 1.25rem 0 0.65rem;
        font-size: 1.6rem;
        line-height: 1.3;
    }

    .product-details-rich-content h2 {
        margin: 1.4rem 0 0.65rem;
        font-size: 1.4rem;
        line-height: 1.35;
    }

    .product-details-rich-content h3 {
        margin: 1.1rem 0 0.5rem;
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .product-details-rich-content p,
    .product-details-rich-content li {
        font-size: 12px;
        line-height: 1.65;
    }

    .product-details-rich-content :is(p, ul, ol, blockquote) {
        margin-bottom: 0.75rem;
    }

    .product-details-rich-content .product-details-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-details-rich-content table {
        width: 100%;
        font-size: 12px;
        line-height: 1.5;
    }

    .product-details-rich-content :is(th, td) {
        padding: 6px;
        font-size: 12px;
        overflow-wrap: anywhere;
    }

    .product-details-cta {
        width: 100%;
        min-width: 0;
        margin-top: 16px;
        padding: 16px 12px;
    }

    .product-details-cta p {
        font-size: 12px;
        line-height: 1.6;
    }

    .product-details-cta__link {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 10px 12px;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 12px;
        letter-spacing: 0.04em;
    }
}

/* THE DYNASTY — Product specifications table: desktop + mobile */

/* Remove horizontal scrolling */
.product-details-rich-content .product-details-table-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Remove table borders and outlines */
.product-details-rich-content table {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-collapse: collapse !important;
    table-layout: fixed;
}

/* Remove cell borders and prevent content overflow */
.product-details-rich-content table th,
.product-details-rich-content table td {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Remove header background color */
.product-details-rich-content table th {
    background: transparent !important;
}

/* THE DYNASTY — Remove specification table golden border */
.product-details-rich-content .product-details-table-scroll,
.product-details-rich-content table,
.product-details-rich-content table th,
.product-details-rich-content table td {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove rounded wrapper border if applied */
.product-details-rich-content .product-details-table-scroll {
    border-color: transparent !important;
    border-radius: 0 !important;
}

/* THE DYNASTY — Remove extra spacing above product details */
.product-details-main {
    padding-top: 0 !important;
}

.product-details-back {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove spacing from the product details content container */
.product-details-shell {
    margin-top: 0 !important;
}

/* Remove any top spacing on the details section itself */
.product-details-article {
    margin-top: 0 !important;
}

/* Desktop only — add spacing above Back to Product Page */
@media screen and (min-width: 769px) {
    .product-details-back {
        margin-top: 16px !important;
        margin-bottom: 14px !important;
    }
}


/* ==========================================
   THE DYNASTY — Product Details Table
   Visible borders on desktop and mobile
========================================== */

/* Table wrapper */
.product-details-rich-content .product-details-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #dedede !important;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Specifications table */
.product-details-rich-content table {
    width: 100% !important;
    max-width: 100%;
    border: 1px solid #dedede !important;
    border-collapse: collapse !important;
    border-spacing: 0;
    table-layout: auto;
    outline: none !important;
    box-shadow: none !important;
}

/* Table headings and cells */
.product-details-rich-content table th,
.product-details-rich-content table td {
    border: 1px solid #dedede !important;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: normal;
    box-shadow: none !important;
}

/* Table header */
.product-details-rich-content table th {
    background-color: #fdf5f5 !important;
    color: #832422;
    font-weight: 600;
}

/* Table body */
.product-details-rich-content table td {
    background-color: #ffffff;
    color: #302a29;
}

/* Product details page spacing */
.product-details-main {
    padding-top: 0 !important;
}

.product-details-back {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.product-details-shell {
    margin-top: 0 !important;
}

.product-details-article {
    margin-top: 0 !important;
}

/* Desktop spacing */
@media screen and (min-width: 769px) {
    .product-details-back {
        margin-top: 16px !important;
        margin-bottom: 14px !important;
    }
}

/* THE DYNASTY — Fix Product Specifications Table on Mobile */

@media screen and (max-width: 768px) {

    /* Table wrapper */
    .product-details-rich-content .product-details-table-scroll {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }

    /* Fit complete table inside mobile screen */
    .product-details-rich-content table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        font-size: 11px !important;
    }

    /* Table cells */
    .product-details-rich-content table th,
    .product-details-rich-content table td {
        width: auto;
        padding: 7px 5px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        vertical-align: middle !important;
    }

    /* Specification column */
    .product-details-rich-content table th:first-child,
    .product-details-rich-content table td:first-child {
        width: 42% !important;
    }

    /* Details column */
    .product-details-rich-content table th:last-child,
    .product-details-rich-content table td:last-child {
        width: 58% !important;
    }
}
