/*
 * BFH Specificity Guard (reset-guard.css)
 *
 * Loaded last, after every other plugin stylesheet.
 *
 * Themes and page builders style generic descendants of their content
 * wrappers -- `.entry-content a`, `.site-main ul`, `body button` -- and those
 * selectors are frequently more specific than the plugin's single-class rules
 * (`.bfh-breadcrumbs a` loses to `.entry-content .widget a`). The result is
 * widgets that render with the theme's link colours, list bullets, button
 * chrome and heading margins instead of their own.
 *
 * This file re-asserts only the properties that bleed in practice, and only
 * inside plugin markup. Two rules of thumb keep it from fighting the plugin's
 * own CSS:
 *
 *   1. Container-level properties use a doubled class (0-2-0) so they beat a
 *      theme's single-class rule but stay below the plugin's own compound
 *      selectors.
 *   2. `!important` appears only on universal normalisations that no plugin
 *      stylesheet sets to a different value -- never on colour, spacing or
 *      typography, where it would override deliberate design decisions.
 *
 * A theme that uses `!important` itself will still win; that needs the
 * offending selector fixed rather than more weight piled on here.
 */

/* ─── Widget roots ────────────────────────────────────────────
   `.bfh-element` is emitted by AbstractWidget::render(); the widgets that
   extend Widget_Base directly emit their own root, and Elementor adds
   `.elementor-widget-bfh_*` around all of them. */
.bfh-element.bfh-element,
.bfh-widget-wrapper.bfh-widget-wrapper,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget,
.bfh-hero-perfume.bfh-hero-perfume,
.bfh-archive.bfh-archive,
.bfh-single.bfh-single {
    font-family: var(--bfh-font-sans, 'Inter', system-ui, sans-serif);
    line-height: 1.5;
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
}

/* ─── Box model ───────────────────────────────────────────────
   Universal and non-negotiable: a theme's `content-box` default silently
   breaks every fixed-width and grid calculation in the plugin. */
.bfh-element,
.bfh-element *,
.bfh-element *::before,
.bfh-element *::after,
.bfh-perfume-detail-widget,
.bfh-perfume-detail-widget *,
.bfh-hero-perfume,
.bfh-hero-perfume *,
.bfh-archive,
.bfh-archive * {
    box-sizing: border-box !important;
}

/* ─── Media ───────────────────────────────────────────────────
   Themes that set explicit image dimensions overflow the bottle shots and
   brand logos out of their columns.

   Restricted to images the plugin does not size itself. Card thumbnails,
   compare cells and note icons are given an explicit `height` by their own
   stylesheets (`height: 100%` for cover-cropped media, `56px` for note
   avatars); a blanket `height: auto` here would collapse all of them. */
.bfh-element img:not([class*="bfh-"]),
.bfh-perfume-detail-widget img:not([class*="bfh-"]),
.bfh-hero-perfume img:not([class*="bfh-"]),
.bfh-archive img:not([class*="bfh-"]) {
    max-width: 100% !important;
}

.bfh-element img,
.bfh-perfume-detail-widget img,
.bfh-hero-perfume img,
.bfh-archive img {
    border-radius: inherit;
}

.bfh-element svg,
.bfh-perfume-detail-widget svg,
.bfh-archive svg {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* ─── Lists ───────────────────────────────────────────────────
   Every list in the plugin is a layout construct -- note pyramids, accord
   bars, filter groups -- so theme bullets and indentation are always wrong. */
.bfh-element.bfh-element ul,
.bfh-element.bfh-element ol,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget ul,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget ol,
.bfh-hero-perfume.bfh-hero-perfume ul,
.bfh-archive.bfh-archive ul[class*="bfh-"],
.bfh-archive.bfh-archive ol[class*="bfh-"] {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.bfh-element.bfh-element li,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget li,
.bfh-hero-perfume.bfh-hero-perfume li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.bfh-element.bfh-element li::before,
.bfh-element.bfh-element li::marker,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget li::marker {
    content: none;
}

/* ─── Headings ────────────────────────────────────────────────
   Spacing is owned by the surrounding flex/grid gap, so inherited heading
   margins double it up. Colour and size are deliberately left alone. */
.bfh-element.bfh-element h1,
.bfh-element.bfh-element h2,
.bfh-element.bfh-element h3,
.bfh-element.bfh-element h4,
.bfh-element.bfh-element h5,
.bfh-element.bfh-element h6,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget h1,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget h2,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget h3,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget h4,
.bfh-hero-perfume.bfh-hero-perfume h1,
.bfh-hero-perfume.bfh-hero-perfume h2,
.bfh-hero-perfume.bfh-hero-perfume h3 {
    /* margin-top only, not `margin`. The shorthand at this weight would also
       clear deliberate bottom spacing such as `.bfh-accords-section h3`
       (0-1-1), which this file's doubled classes outrank. Theme bleed is
       almost always the top margin pushing content down. */
    margin-top: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: normal;
    border: 0;
}

/* Themes love decorative pseudo-element underlines on headings. */
.bfh-element.bfh-element h1::after,
.bfh-element.bfh-element h2::after,
.bfh-element.bfh-element h3::after,
.bfh-element.bfh-element h4::after,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget h2::after,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget h3::after {
    content: none;
    display: none;
}

/* ─── Paragraphs ──────────────────────────────────────────────
   Trailing margin on the last paragraph is the single most common cause of
   uneven card heights in a grid. */
.bfh-element.bfh-element p:last-child,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget p:last-child,
.bfh-hero-perfume.bfh-hero-perfume p:last-child {
    margin-bottom: 0;
}

/* ─── Links ───────────────────────────────────────────────────
   Only the properties themes force. `text-decoration` is scoped to the
   plugin's own link classes rather than every `a`, because three plugin
   stylesheets deliberately underline links and a blanket reset here would
   outrank them. */
.bfh-element.bfh-element a,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget a,
.bfh-hero-perfume.bfh-hero-perfume a {
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

.bfh-element.bfh-element a[class*="bfh-"],
.bfh-perfume-detail-widget.bfh-perfume-detail-widget a[class*="bfh-"],
.bfh-archive.bfh-archive a[class*="bfh-"] {
    text-decoration: none;
    border-bottom: 0;
}

/* ─── Buttons and inputs ──────────────────────────────────────
   Scoped to bare elements and the plugin's own classes. Themes apply gradient
   backgrounds, uppercase transforms and pill radii to every button on the
   page, which turns plugin controls into theme buttons. */
.bfh-element.bfh-element button,
.bfh-element.bfh-element input[type="submit"],
.bfh-element.bfh-element input[type="button"],
.bfh-perfume-detail-widget.bfh-perfume-detail-widget button,
.bfh-archive.bfh-archive button[class*="bfh-"] {
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    line-height: normal;
    text-shadow: none;
    box-shadow: none;
    min-height: 0;
    width: auto;
}

/* Icon-only and unstyled triggers must not inherit theme button chrome. */
.bfh-element.bfh-element button:not([class*="bfh-btn"]):not([class*="bfh-button"]),
.bfh-perfume-detail-widget.bfh-perfume-detail-widget button:not([class*="bfh-btn"]):not([class*="bfh-button"]) {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.bfh-element.bfh-element input,
.bfh-element.bfh-element select,
.bfh-element.bfh-element textarea,
.bfh-archive.bfh-archive input[class*="bfh-"],
.bfh-archive.bfh-archive select[class*="bfh-"] {
    font-family: inherit;
    font-size: inherit;
    text-transform: none;
    max-width: 100%;
    box-shadow: none;
}

/* Native checkbox and radio controls keep their platform rendering when a
   theme strips it.

   Deliberately limited to `appearance`. An earlier version also reset
   position, size and opacity to undo themes that hide native inputs -- but
   the plugin hides inputs on purpose too (`.bfh-poll-option__input` is
   clipped so the label acts as the control, `.bfh-checkbox-label input` is
   sized to 16px), and this file's doubled-class selectors outrank both. */
.bfh-element.bfh-element input[type="checkbox"]:not([class*="bfh-"]),
.bfh-element.bfh-element input[type="radio"]:not([class*="bfh-"]),
.bfh-archive.bfh-archive input[type="checkbox"]:not([class*="bfh-"]),
.bfh-archive.bfh-archive input[type="radio"]:not([class*="bfh-"]) {
    -webkit-appearance: auto;
    appearance: auto;
}

/* ─── Tables ──────────────────────────────────────────────────
   The compare table is a grid, not a content table; theme zebra striping and
   cell borders fight the design. */
.bfh-element.bfh-element table,
.bfh-perfume-detail-widget.bfh-perfume-detail-widget table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0;
    table-layout: auto;
}

.bfh-element.bfh-element th,
.bfh-element.bfh-element td {
    text-transform: none;
    letter-spacing: normal;
}

/* ─── Elementor container chrome ──────────────────────────────
   Elementor's own wrapper adds padding and a stacking context that clips
   sticky filter rails and dropdowns. */
.elementor-widget-container > .bfh-element,
.elementor-widget-container > .bfh-perfume-detail-widget,
.elementor-widget-container > .bfh-hero-perfume {
    padding: 0;
    margin: 0;
}

[class*="elementor-widget-bfh"] .bfh-element {
    overflow: visible;
}

/* ─── Overlay layers ──────────────────────────────────────────
   Modals, dropdowns and toasts must clear theme headers, which routinely
   claim z-index values in the thousands. */
.bfh-modal,
.bfh-modal-overlay,
.bfh-toast,
.bfh-toast-container {
    z-index: var(--bfh-z-modal, 1000);
}

.bfh-toast,
.bfh-toast-container {
    z-index: var(--bfh-z-toast, 2000);
}

/* ─── Animation opt-out ───────────────────────────────────────
   Honoured here rather than per-stylesheet so it cannot be missed. */
@media (prefers-reduced-motion: reduce) {
    .bfh-element *,
    .bfh-perfume-detail-widget *,
    .bfh-archive * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}