﻿/* ============================================
   POLICY CSS - USING THEME VARIABLES
   ALL STYLES PRESERVED - NOTHING REMOVED
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Georgia:wght@400;700&family=Playfair+Display:wght@600;700&display=swap');

/* Headings */
.page-title {
    font-size: var(--policy-page-title-font-size, 46px);
    color: var(--policy-page-title-color, var(--web-primary, var(--web-primary)));
    text-align: var(--policy-page-title-text-align, center);
    margin: var(--policy-page-title-margin, 25px 0 8px);
    letter-spacing: var(--policy-page-title-letter-spacing, 1.8px);
    font-family: var(--policy-page-title-font-family, var(--theme-font-primary););
}

.last-updated {
    text-align: var(--policy-last-updated-text-align, center);
    font-size: var(--policy-last-updated-font-size, 19px);
    color: var(--policy-last-updated-color, var(--web-primary-light, var(--web-primary)));
    font-style: var(--policy-last-updated-font-style, italic);
    margin: var(--policy-last-updated-margin, 30px 0 60px);
}

/* Section Titles */
.section-title {
    font-size: var(--policy-section-title-font-size, 30px);
    color: var(--policy-section-title-color, var(--web-primary, var(--web-primary)));
    border-bottom: var(--policy-section-title-border-bottom, 3px solid var(--web-primary-soft, var(--web-primary-soft)));
    padding-bottom: var(--policy-section-title-padding-bottom, 12px);
    margin-top: var(--policy-section-title-margin-top, 60px);
    font-family: var(--policy-section-title-font-family, var(--theme-font-primary););
}

.numbered-title {
    font-size: var(--policy-numbered-title-font-size, 24px);
    color: var(--policy-numbered-title-color, var(--store-dark-purple, #501F5D));
    margin: var(--policy-numbered-title-margin, 50px 0 20px);
    font-weight: var(--policy-numbered-title-font-weight, 600);
}

/* Paragraphs */
.paragraph {
    font-size: var(--policy-paragraph-font-size, 16.5px);
    color: var(--policy-paragraph-color, var(--web-secondary, var( --web-secondary)));
    margin: var(--policy-paragraph-margin, 20px 0);
}

/* Custom Diamond Bullet List */
.custom-list {
    list-style: none;
    padding-left: var(--policy-custom-list-padding-left, 0);
    margin: var(--policy-custom-list-margin, 25px 0);
}

    .custom-list li {
        position: relative;
        padding-left: var(--policy-custom-list-li-padding-left, 38px);
        margin: var(--policy-custom-list-li-margin, 16px 0);
        font-size: var(--policy-custom-list-li-font-size, 16.5px);
        color: var(--policy-custom-list-li-color, var(--web-secondary, var( --web-secondary)));
    }

        .custom-list li::before {
            content: var(--policy-custom-list-bullet-content, "✦");
            color: var(--policy-custom-list-bullet-color, var(--web-primary-soft, var(--web-primary-soft)));
            font-size: var(--policy-custom-list-bullet-font-size, 24px);
            position: absolute;
            left: var(--policy-custom-list-bullet-left, 0);
            top: var(--policy-custom-list-bullet-top, -4px);
        }

/* Highlight Box (used in Money Back page) */
.highlight-box {
    background: var(--policy-highlight-box-bg, var(--store-purple, #96709D));
    color: var(--policy-highlight-box-color, var(--web-text-inverse, #FFFFFF));
    padding: var(--policy-highlight-box-padding, 30px);
    border-radius: var(--policy-highlight-box-border-radius, 10px);
    text-align: var(--policy-highlight-box-text-align, center);
    font-size: var(--policy-highlight-box-font-size, 21px);
    margin: var(--policy-highlight-box-margin, 50px 0);
    font-weight: var(--policy-highlight-box-font-weight, 500);
}

/* Tables (Exchange & Buy-Back) */
.exchange-table {
    width: var(--policy-exchange-table-width, 100%);
    border-collapse: collapse;
    margin: var(--policy-exchange-table-margin, 35px 0);
    background: var(--policy-exchange-table-bg, var(--cream, #EEE2DA));
}

    .exchange-table th,
    .exchange-table td {
        padding: var(--policy-exchange-th-padding, 18px 22px);
        text-align: var(--policy-exchange-th-text-align, left);
        border-bottom: var(--policy-exchange-th-border-bottom, 1px solid var(--web-primary-soft, var(--web-primary-soft)));
    }

    .exchange-table th {
        background: var(--policy-exchange-th-bg, var(--web-primary-soft, var(--web-primary-soft)));
        color: var(--policy-exchange-th-color, var(--web-primary, var(--web-primary)));
        font-size: var(--policy-exchange-th-font-size, 18px);
        font-weight: var(--policy-exchange-th-font-weight, 600);
    }

    .exchange-table td {
        background: var(--policy-exchange-td-bg, var(--web-bg-main, #FFFFFF));
        color: var(--policy-exchange-td-color, var(--web-secondary, var( --web-secondary)));
    }

.table-title {
    font-size: var(--policy-table-title-font-size, 20px);
    color: var(--policy-table-title-color, var(--store-dark-purple, #501F5D));
    margin: var(--policy-table-title-margin, 50px 0 20px);
    font-weight: var(--policy-table-title-font-weight, 600);
}

/* Footer Notes */
.note-text {
    font-size: var(--policy-note-text-font-size, 14.5px);
    color: var(--policy-note-text-color, var(--web-text-muted, #6F6F70));
    font-style: var(--policy-note-text-font-style, italic);
    margin-top: var(--policy-note-text-margin-top, 40px);
    padding-top: var(--policy-note-text-padding-top, 20px);
    border-top: var(--policy-note-text-border-top, 1px dashed var(--accent-gray, #88A1AE));
    line-height: var(--policy-note-text-line-height, 1.6);
}

/* Contact Section */
.contact-section {
    text-align: var(--policy-contact-section-text-align, center);
    margin-top: var(--policy-contact-section-margin-top, 70px);
    font-size: var(--policy-contact-section-font-size, 18px);
}

    .contact-section a {
        color: var(--policy-contact-section-link-color, var(--web-primary-light, var(--web-primary)));
        text-decoration: var(--policy-contact-section-link-text-decoration, none);
    }

.no-border {
    border-bottom: var(--policy-no-border-border-bottom, none !important);
}

/* Brand Name Highlight */
.brand-name {
    color: var(--policy-brand-name-color, var(--web-primary-light, var(--web-primary)));
    font-weight: var(--policy-brand-name-font-weight, bold);
}

table {
    width: var(--policy-table-width, 100%);
    border-collapse: collapse;
    margin: var(--policy-table-margin, 40px 0);
}

th, td {
    padding: var(--policy-th-padding, 18px 25px);
    text-align: var(--policy-th-text-align, left);
    border-bottom: var(--policy-th-border-bottom, 1px solid var(--web-primary-soft, var(--web-primary-soft)));
}

th {
    background: var(--policy-th-bg, var(--web-primary-soft, var(--web-primary-soft)));
    color: var(--policy-th-color, var(--web-primary, var(--web-primary)));
    font-size: var(--policy-th-font-size, 18px);
    font-weight: var(--policy-th-font-weight, 600);
}

td {
    background: var(--policy-td-bg, var(--web-bg-main, #FFFFFF));
}

.table-title {
    font-size: var(--policy-table-title-font-size, 20px);
    color: var(--policy-table-title-color, var(--store-dark-purple, #501F5D));
    margin: var(--policy-table-title-margin, 50px 0 20px);
    font-weight: var(--policy-table-title-font-weight, 600);
}

.platting-intro {
    font-size: var(--policy-platting-intro-font-size, 18px);
    color: var(--policy-platting-intro-color, var(--store-dark-purple, #501F5D));
    text-align: var(--policy-platting-intro-text-align, center);
    margin: var(--policy-platting-intro-margin, 40px 0 60px);
    font-style: var(--policy-platting-intro-font-style, italic);
    line-height: var(--policy-platting-intro-line-height, 1.6);
}

.warranty-intro {
    font-size: var(--policy-warranty-intro-font-size, 18px);
    color: var(--policy-warranty-intro-color, var(--store-dark-purple, #501F5D));
    text-align: var(--policy-warranty-intro-text-align, center);
    margin: var(--policy-warranty-intro-margin, 40px 0 60px);
    font-style: var(--policy-warranty-intro-font-style, italic);
    line-height: var(--policy-warranty-intro-line-height, 1.6);
}

@media (max-width: 491px) {
    body {
        padding-top: var(--policy-responsive-body-padding-top, 95px);
    }

    .page-title {
        font-size: var(--policy-responsive-page-title-font-size, 24px);
    }
}

.mobile-category-section {
    display: var(--policy-mobile-category-display, none) !important;
}

@media (max-width: 491px) {
    .mobile-padding {
        margin-top: var(--policy-responsive-mobile-padding-margin-top, 3rem !important);
    }
}
