/*
 * Baseline styling for Optimasi content blocks (the .opt-* classes emitted
 * by the backend renderer).
 *
 * Delivered as a stylesheet, not as a <style> element inside the product
 * description.  It used to be prepended to the description, which meant the
 * tag-strippers behind og:description, twitter:description and the theme's
 * Product JSON-LD kept the text *between* the <style> tags — so the CSS became
 * the description every machine read.  See version-control for the release
 * that moved it.
 *
 * Every rule is wrapped in :where() so this baseline has ZERO specificity:
 * any rule in the theme's own global CSS / custom.css — even a plain
 * ".opt-list { ... }" — overrides it, regardless of source order.  A designer
 * can therefore restyle every Optimasi block from a single theme file.
 */

/* Spacing between Optimasi opt-* sections (replaces legacy inline padding-top).
   :where() keeps specificity at zero so theme CSS always wins. */
:where(div[class^="opt-"], div[class*=" opt-"]) {
    padding-top: 1.5em;
}
:where(div[class^="opt-"]:first-child, div[class*=" opt-"]:first-child) {
    padding-top: 0;
}
/* ...but only between *sections*.
   `div[class^="opt-"]` also matches a block's own inner wrappers — the review
   stats row's cells, tab panels, review sub-sections — and there it does the
   wrong thing twice over: the first cell is zeroed by the rule above and its
   siblings are not, so the second review stat sat 1.5em lower than the first.
   A block nested inside another block is not a section and gets none of this.
   Later rules still win where a nested block sets its own padding-top (.opt-tab
   does), because everything here is zero specificity and source order decides. */
:where(div[class^="opt-"] div[class^="opt-"], div[class*=" opt-"] div[class*=" opt-"]) {
    padding-top: 0;
}

/* Renderer lists (replaces legacy inline margin/padding reset). */
:where(.opt-list) {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Specifications sub-headings (renderer <p class="opt-subheading">). */
:where(.opt-subheading) {
    margin-top: 0.75em;
    margin-bottom: 0.25em;
    font-weight: 600;
}

/* Trust block headings inherit normal body size but stay distinct. */
:where(.opt-trust h2, .opt-trust h3) {
    font-size: 1em;
    margin-bottom: 0.5em;
}
:where(.opt-trust p) {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

/* Journal 3: inline tab sections before the upgrade script converts them.
   Keeps them legible when JS is disabled or during the flash-of-content. */
:where(.opt-tab) {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
:where(.opt-tab-title) {
    margin: 0 0 0.5em;
    font-size: 1.1em;
    font-weight: 600;
}

/* Reviews summary block (opt-reviews-*). Mirrors the WordPress plugin's
   product-styles.css so both channels render identically. Optional
   content-layouts subheading is an h3 (opt-reviews-subheading) at the top;
   headline is an h4 (opt-reviews-headline); section subheadings are h4. */
:where(.opt-reviews-summary) {
    margin-top: 1.5em;
}
:where(.opt-reviews-headline) {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 1em;
}
:where(.opt-reviews-subheading) {
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 0.75em;
    color: #444;
}
:where(.opt-reviews-section) {
    margin-bottom: 1.5em;
}
:where(.opt-reviews-section h3, .opt-reviews-section h4) {
    font-size: 1em;
    margin-bottom: 0.5em;
    color: #444;
}
:where(.opt-reviews-stats) {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 0.75em;
}
:where(.opt-reviews-stat) {
    text-align: center;
    min-width: 80px;
}
:where(.opt-reviews-stat-value) {
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    color: #2a7d2a;
    line-height: 1.2;
    margin-bottom: 0.15em;
}
:where(.opt-reviews-stat-label) {
    display: block;
    font-size: 0.75em;
    color: #666;
}
:where(.opt-reviews-narrative) {
    line-height: 1.6;
    margin-bottom: 0.75em;
}
:where(.opt-reviews-trend) {
    font-size: 0.9em;
    color: #555;
    font-style: italic;
    margin-top: 0.5em;
}
:where(.opt-reviews-attribution) {
    font-size: 0.75em;
    color: #888;
    margin-top: 1em;
    padding-top: 0.75em;
    border-top: 1px solid #eee;
}
:where(.opt-reviews-sources) {
    margin-top: 0.75em;
    font-size: 0.9em;
}
:where(.opt-reviews-sources summary) {
    cursor: pointer;
    color: #666;
    font-size: 0.85em;
    user-select: none;
}

/* Tab body width — match the theme's description cap.

   Journal 3 (and themes like it) cap the primary description at 900px via
   ".product_extra-… .block-content".  The tab panes we build sit OUTSIDE
   .product_extra, so their text ran the full width of the tab and the two halves
   of the page looked mismatched — the description narrow, every tab wide.

   Every tab body now carries an .opt-tab-content hook: the inline Journal 3
   section, the .block-content the upgrade script builds inside the new pane, and
   the tab the standard OpenCart theme renders.  Capping that hook gives tabs the
   same measure as the description.

   The value is a custom property so a theme whose description is a different
   width can match it in one line, without touching this file or adding
   !important:  :root { --optimasi-content-max-width: 820px; }
   :where() keeps specificity at zero, so a theme can also just override the rule
   outright like any other .opt-* rule. */
:where(.opt-tab-content) {
    max-width: var(--optimasi-content-max-width, 900px);
}