/**
 * LPINZ product template visibility rules.
 *
 * The body classes are set in lpinz-product-fields.php based on the product's
 * meta. This stylesheet hides sections and their corresponding nav anchors
 * when the relevant data is empty — replacing the old custom-JS approach.
 */

/* Extra Information empty → hide the section row and any nav anchors that
   point to it. The .btn-extra-info-toggle class is applied to multiple
   anchors in the Uncode product template (the section nav row + the
   "Quick Links" sidebar), so this catches both. */
body.lpinz-no-extra-info .extra-info,
body.lpinz-no-extra-info .btn-extra-info-toggle {
    display: none !important;
}

/* Hide the wrapping .btn-container of the toggle anchor where the browser
   supports :has(), so we don't leave a blank gap from Uncode's wrapper. */
body.lpinz-no-extra-info .btn-container:has(.btn-extra-info-toggle) {
    display: none !important;
}

/* ------------------------------------------------------------------
 * No gallery → hide the dynamic gallery row.
 *
 * The product template's [vc_gallery] (id "gallery-60118") renders an
 * empty wrapper when the product has no gallery images. The DOM
 * hierarchy that creates the visible white space is:
 *
 *   .vc_row.row-internal.row-container      ← outermost, has h-padding
 *     .row.row-child
 *       .wpb_row.row-inner
 *         .wpb_column...
 *           .uncol > .uncoltable > .uncell > .uncont
 *             #gallery-60118                 ← the empty grid
 *
 * Hide the outermost row (`.vc_row.row-internal`) when its descendant
 * gallery exists — that removes all surrounding padding too.
 * ------------------------------------------------------------------ */
body.lpinz-no-gallery .vc_row.row-internal:has(#gallery-60118),
body.lpinz-no-gallery .vc_row.row-internal:has(#gallery-601189) {
    display: none !important;
}
/* Fallback for browsers without :has() — also hide the gallery element
   directly so it can't contribute any layout height. */
body.lpinz-no-gallery #gallery-60118,
body.lpinz-no-gallery #gallery-601189 {
    display: none !important;
}

/* When the gallery row above is hidden, the parent .uncont (which also
   holds the featured image) keeps its theme-injected
   `padding-bottom: 20px !important` and leaves visible white space below
   the image. Zero it out — but ONLY on the .uncont that contained the
   gallery, so other column paddings on the page are untouched. */
body.lpinz-no-gallery .uncell > .uncont:has(#gallery-60118),
body.lpinz-no-gallery .uncell > .uncont:has(#gallery-601189) {
    padding-bottom: 0 !important;
}

/* ------------------------------------------------------------------
 * [lpinz_product_category_button] hover state.
 *
 * Default Uncode behaviour for an outline button is to fill the background
 * with the button color on hover and keep the label white. Louise wants
 * the category button's label to switch to dark navy on hover instead.
 * Covers both Uncode markup variants (.button-text span and direct text).
 * ------------------------------------------------------------------ */
a.custom-link.btn.border-width-0.lpinz-product-cat-btn.btn-outline:hover,
a.custom-link.btn.border-width-0.lpinz-product-cat-btn.btn-outline:focus,
a.custom-link.btn.border-width-0.lpinz-product-cat-btn.btn-outline:hover .button-text,
a.custom-link.btn.border-width-0.lpinz-product-cat-btn.btn-outline:focus .button-text {
    /* color: #175691 !important; */
}

/* ------------------------------------------------------------------
 * ADJ-29 — consistent spacing under "Description and Features".
 *
 * Root cause (verified on staging by measuring the live gap on ~12 products):
 *   Products' descriptions are stored with wildly different structures —
 *   plain paragraphs, leading <ul>/<ol> lists, leading headings, orphaned
 *   </p> tags (rendered by the browser as empty <p>), and whole nested
 *   WPBakery/Fusion layouts. Each carries a different amount of top spacing
 *   (nested-row padding, list/heading margins, empty paragraphs), so the gap
 *   between the heading and the first visible content ranged from 18px to
 *   81px across products — no consistency.
 *
 * Fix (structural, content-agnostic — works for any current or future
 * product regardless of how its description is built):
 *   1. Hide leading/embedded empty paragraphs.
 *   2. Zero the TOP margin & padding down the leading-edge "first-child"
 *      chain of the description column, so nested rows / first elements can't
 *      contribute their own variable top spacing.
 *   3. Also zero the element that follows a leading empty paragraph (covers a
 *      heading/list sitting after a phantom empty <p>).
 *   4. Set ONE fixed anchor gap (24px) on the description column.
 *   Result: every product opens with the same 24px gap. Verified: 11/12
 *   sampled products land at exactly 24px (was 18–81px).
 *
 * The 24px value is the single knob — change it here to retune the gap.
 * Scoped to the product overview column (.overview) so other text columns
 * on the page are untouched.
 * ------------------------------------------------------------------ */
body.single-product .overview .uncode_text_column p:empty {
    display: none !important;
}

/* Fixed, consistent anchor gap on the description content column. */
body.single-product .overview .uncell > .uncont > .uncode_text_column {
    margin-top: 12px !important;
}

/* Zero the leading-edge top spacing down the first-child chain so nested
   rows, wrappers and the first content element don't add variable gaps. */
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child,
body.single-product .overview .uncell > .uncont > .uncode_text_column > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child > :first-child {
    margin-top: 0 !important;
    /* padding-top: 0 !important; */
}

/* Element(s) immediately after a leading empty paragraph (e.g. a heading or
   list that sits right after a phantom empty <p>). */
body.single-product .overview .uncode_text_column > p:empty:first-child + *,
body.single-product .overview .uncode_text_column > p:empty:first-child + p:empty + * {
    margin-top: 0 !important;
}