/* ============================================================================
   WYSIWYG EDITOR STYLES
   ============================================================================ */

/* Container max-width for text content */
#main-page-content > *:not(:has(img)) {
    max-width: 1050px !important;
    margin-inline: auto !important;
}

/* PRODUCT CARD */
.product-card {
    font-family: 'Inter', sans-serif;
}

/* ============================================================================
   HEADINGS
   ============================================================================ */

#main-page-content h1:not(.product-card *),
#main-page-content h2:not(.product-card *),
#main-page-content h3:not(.product-card *),
#main-page-content h4:not(.product-card *),
#main-page-content h5:not(.product-card *),
#main-page-content h6:not(.product-card *) {
    margin-top: var(--v-space-m);
    margin-bottom: var(--v-space-m);
    margin-left: var(--v-space-xs);
    font-weight: bold;
    color: var(--font-primary);
    line-height: 1.3;
}

#main-page-content h1:not(.product-card *) {
    font-size: var(--size-2xl);
}

#main-page-content h2:not(.product-card *) {
    font-size: var(--size-xl);
}

#main-page-content h3:not(.product-card *) {
    font-size: var(--size-l);
}

#main-page-content h4:not(.product-card *) {
    font-size: var(--size-m);
}

#main-page-content h5:not(.product-card *) {
    font-size: var(--size-s);
}

#main-page-content h6:not(.product-card *) {
    font-size: var(--size-xs);
}

/* ============================================================================
   TEXT BLOCKS
   ============================================================================ */

#main-page-content p:not(.product-card *) {
    margin-bottom: var(--v-space-s);
    line-height: 1.6;
    color: var(--font-primary);
}

#main-page-content div:not(.product-card *) {
    margin-bottom: var(--v-space-2xs);
}

#main-page-content span:not(.product-card *) {
    color: inherit;
}

/* ============================================================================
   TEXT FORMATTING
   ============================================================================ */

#main-page-content strong:not(.product-card *),
#main-page-content b:not(.product-card *) {
    font-weight: bold;
}

#main-page-content em:not(.product-card *),
#main-page-content i:not(.product-card *) {
    font-style: italic;
}

#main-page-content u:not(.product-card *) {
    text-decoration: underline;
}

#main-page-content s:not(.product-card *),
#main-page-content strike:not(.product-card *),
#main-page-content del:not(.product-card *) {
    text-decoration: line-through;
}

#main-page-content mark:not(.product-card *) {
    background-color: #ffeb3b;
    padding: 2px 4px;
}

#main-page-content small:not(.product-card *) {
    font-size: 0.875em;
}

#main-page-content sub:not(.product-card *),
#main-page-content sup:not(.product-card *) {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
}

#main-page-content sub:not(.product-card *) {
    vertical-align: sub;
}

#main-page-content sup:not(.product-card *) {
    vertical-align: super;
}

#main-page-content abbr:not(.product-card *),
#main-page-content acronym:not(.product-card *) {
    text-decoration: underline dotted;
    cursor: help;
}

#main-page-content kbd:not(.product-card *) {
    background-color: var(--secondary-bg);
    border: 1px solid var(--font-secondary);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}

/* ============================================================================
   LINKS
   ============================================================================ */

#main-page-content a:not(.product-card *) {
    color: var(--primary-accent);
    text-decoration: underline;
    transition: color 0.2s ease;
}

#main-page-content a:not(.product-card *):hover {
    color: var(--primary-accent-2);
}

#main-page-content a:not(.product-card *):visited {
    color: var(--primary-accent);
}

#main-page-content a:not(.product-card *):active {
    color: var(--primary-accent-2);
}

/* ============================================================================
   LISTS
   ============================================================================ */

#main-page-content ul:not(.product-card *),
#main-page-content ol:not(.product-card *) {
    margin-left: var(--v-space-m);
    margin-bottom: var(--v-space-s);
    padding-left: var(--v-space-s);
}

#main-page-content ul:not(.product-card *) {
    list-style-type: disc;
    padding-left: var(--v-space-xl);
}

#main-page-content ol:not(.product-card *) {
    list-style-type: decimal;
}

#main-page-content li:not(.product-card *) {
    margin-bottom: var(--v-space-2xs);
    line-height: 1.6;
}

#main-page-content ul:not(.product-card *) ul:not(.product-card *),
#main-page-content ol:not(.product-card *) ul:not(.product-card *) {
    list-style-type: circle;
}

#main-page-content ul:not(.product-card *) ul:not(.product-card *) ul:not(.product-card *),
#main-page-content ol:not(.product-card *) ul:not(.product-card *) ul:not(.product-card *) {
    list-style-type: square;
}

#main-page-content ol:not(.product-card *) ol:not(.product-card *) {
    list-style-type: lower-alpha;
}

#main-page-content ol:not(.product-card *) ol:not(.product-card *) ol:not(.product-card *) {
    list-style-type: lower-roman;
}

#main-page-content dl:not(.product-card *) {
    margin-bottom: var(--v-space-s);
}

#main-page-content dt:not(.product-card *) {
    font-weight: bold;
    margin-top: var(--v-space-2xs);
}

#main-page-content dd:not(.product-card *) {
    margin-left: var(--v-space-m);
    margin-bottom: var(--v-space-2xs);
}

/* ============================================================================
   QUOTES
   ============================================================================ */

#main-page-content blockquote:not(.product-card *) {
    border-left: 4px solid var(--primary-accent);
    padding-left: var(--v-space-s);
    margin: var(--v-space-m) 0;
    font-style: italic;
    color: var(--font-secondary);
}

#main-page-content q:not(.product-card *) {
    quotes: "«" "»" "‹" "›";
    font-style: italic;
}

#main-page-content q:not(.product-card *)::before {
    content: open-quote;
}

#main-page-content q:not(.product-card *)::after {
    content: close-quote;
}

#main-page-content cite:not(.product-card *) {
    font-style: italic;
}

/* ============================================================================
   IMAGES & MEDIA
   ============================================================================ */

#main-page-content img:not(.product-card *) {
    border-radius: var(--v-space-s);
    margin: var(--v-space-m) 0;
    display: block;
}

#main-page-content strong:not(.product-card *) > img:not(.product-card *),
#main-page-content p:not(.product-card *) > img:not(.product-card *) {
    border-radius: var(--v-space-s);
    margin: var(--v-space-m) 0;
}

#main-page-content figure:not(.product-card *) {
    margin: var(--v-space-m) 0;
}

#main-page-content figure:not(.product-card *) img:not(.product-card *) {
    margin: 0;
}

#main-page-content figcaption:not(.product-card *) {
    text-align: center;
    font-size: 0.9em;
    color: var(--font-secondary);
    margin-top: var(--v-space-xs);
    font-style: italic;
}

#main-page-content iframe:not(.product-card *),
#main-page-content video:not(.product-card *),
#main-page-content audio:not(.product-card *) {
    width: 100%;
    border-radius: var(--v-space-s);
    margin: var(--v-space-m) 0;
}

/* ============================================================================
   TABLES
   ============================================================================ */

#main-page-content table:not(.product-card *) {
    width: 100%;
    border-collapse: collapse;
    margin: var(--v-space-m) 0;
    background-color: white;
}

#main-page-content thead:not(.product-card *) {
    background-color: var(--secondary-bg);
}

#main-page-content th:not(.product-card *),
#main-page-content td:not(.product-card *) {
    border: 1px solid var(--secondary-bg);
    padding: var(--v-space-xs);
    text-align: left;
}

#main-page-content th:not(.product-card *) {
    background-color: var(--secondary-bg);
    font-weight: bold;
    color: var(--font-primary);
}

#main-page-content tbody:not(.product-card *) tr:not(.product-card *):nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

#main-page-content tbody:not(.product-card *) tr:not(.product-card *):hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#main-page-content caption:not(.product-card *) {
    caption-side: top;
    text-align: left;
    font-weight: bold;
    padding: var(--v-space-xs);
    color: var(--font-primary);
}

/* ============================================================================
   CODE
   ============================================================================ */

#main-page-content code:not(.product-card *) {
    background-color: var(--secondary-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--font-primary);
}

#main-page-content pre:not(.product-card *) {
    background-color: var(--secondary-bg);
    padding: var(--v-space-s);
    border-radius: var(--v-space-2xs);
    overflow-x: auto;
    margin: var(--v-space-m) 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#main-page-content pre:not(.product-card *) code:not(.product-card *) {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

#main-page-content samp:not(.product-card *) {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

#main-page-content var:not(.product-card *) {
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
}

/* ============================================================================
   HORIZONTAL RULES
   ============================================================================ */

#main-page-content hr:not(.product-card *) {
    border: none;
    border-top: 1px solid var(--secondary-bg);
    margin: var(--v-space-xl) 0;
}

/* ============================================================================
   FORMS (if included in WYSIWYG)
   ============================================================================ */

#main-page-content form:not(.product-card *) {
    margin: var(--v-space-m) 0;
}

#main-page-content fieldset:not(.product-card *) {
    border: 1px solid var(--secondary-bg);
    padding: var(--v-space-s);
    margin: var(--v-space-s) 0;
    border-radius: var(--v-space-2xs);
}

#main-page-content legend:not(.product-card *) {
    font-weight: bold;
    padding: 0 var(--v-space-2xs);
}

#main-page-content label:not(.product-card *) {
    display: block;
    margin-bottom: var(--v-space-2xs);
    font-weight: 500;
}

#main-page-content input:not(.product-card *),
#main-page-content textarea:not(.product-card *),
#main-page-content select:not(.product-card *) {
    width: 100%;
    padding: var(--v-space-2xs);
    border: 1px solid var(--secondary-bg);
    border-radius: 4px;
    font-family: inherit;
}

#main-page-content button:not(.product-card *) {
    background-color: var(--primary-accent);
    color: white;
    padding: var(--v-space-xs) var(--v-space-s);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

#main-page-content button:hover:not(.product-card *) {
    background-color: var(--primary-accent-2);
}

/* ============================================================================
   SPECIAL ELEMENTS
   ============================================================================ */

#main-page-content address:not(.product-card *) {
    font-style: italic;
    margin: var(--v-space-s) 0;
    line-height: 1.6;
}

#main-page-content details:not(.product-card *) {
    margin: var(--v-space-s) 0;
    border: 1px solid var(--secondary-bg);
    border-radius: var(--v-space-2xs);
    padding: var(--v-space-s);
}

#main-page-content summary:not(.product-card *) {
    cursor: pointer;
    font-weight: bold;
    user-select: none;
}

#main-page-content summary:not(.product-card *):hover {
    color: var(--primary-accent);
}

#main-page-content time:not(.product-card *) {
    font-style: italic;
    color: var(--font-secondary);
}

/* ============================================================================
   TEXT ALIGNMENT
   ============================================================================ */

#main-page-content .text-left:not(.product-card *),
#main-page-content [style*="text-align: left"]:not(.product-card *),
#main-page-content [align="left"]:not(.product-card *) {
    text-align: left;
}

#main-page-content .text-center:not(.product-card *),
#main-page-content [style*="text-align: center"]:not(.product-card *),
#main-page-content [align="center"]:not(.product-card *) {
    text-align: center;
}

#main-page-content .text-right:not(.product-card *),
#main-page-content [style*="text-align: right"]:not(.product-card *),
#main-page-content [align="right"]:not(.product-card *) {
    text-align: right;
}

#main-page-content .text-justify:not(.product-card *),
#main-page-content [style*="text-align: justify"]:not(.product-card *),
#main-page-content [align="justify"]:not(.product-card *) {
    text-align: justify;
}

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

@media (max-width: 768px) {
    #main-page-content > *:not(:has(img)) {
        max-width: 100%;
    }

    #main-page-content table:not(.product-card *) {
        font-size: 0.9em;
    }

    #main-page-content pre:not(.product-card *) {
        font-size: 0.85em;
    }
}