CSS class map

Every class the plugin renders is prefixed osfec- and follows BEM: block__element--modifier. The outermost element
of every component also carries the bare .osfec class, which is where
the custom properties are declared — so .osfec .osfec-card is always a valid,
higher-specificity selector.

#Wrappers

Class	Where
.osfec	On every component the plugin renders. Sets the properties and the max width
.osfec-archive	The offer archive page
.osfec-offer	The single offer article (alongside WordPress’s own post_class() output)
.osfec-offers	The shortcode and block wrapper. .osfec.osfec-offers drops the side padding
.osfec-main	Only on block themes: the <main> the plugin opens around its pages

#Shared pieces

Class	Where
.osfec-kicker, .osfec-kicker__sep	Small uppercase label above a heading
.osfec-section, .osfec-section__head	A titled section on the offer page
.osfec-panel, .osfec-panel__body	The bordered card that wraps a block of content
.osfec-button, .osfec-button--ghost	Primary and secondary button. Styled as .osfec .osfec-button
.osfec-empty	“No offers match your criteria.”

#Listing

<ul class="osfec-list">                        <!-- + .osfec-list--grid for a grid -->
    <li class="osfec-card-item">
        <a class="osfec-card__link">
            <article class="osfec-card">
                <div class="osfec-card__media"><img></div>
                <div class="osfec-card__content">
                    <div class="osfec-card__topline">
                        <span class="osfec-card__type">Apartment for sale</span>
                        <span class="osfec-card__location">Białystok</span>
                    </div>
                    <h2 class="osfec-card__title">…</h2>
                    <ul class="osfec-card__details">
                        <li class="osfec-card__detail">64 m²</li>
                    </ul>
                    <div class="osfec-card__footer">
                        <div class="osfec-card__price-wrap">
                            <span class="osfec-card__price-label">Price</span>
                            <span class="osfec-card__price">540 000 PLN</span>
                        </div>
                        <span class="osfec-card__cta">View offer
              <span class="osfec-card__cta-arrow">→</span>
            </span>
                    </div>
                </div>
            </article>
        </a>
    </li>
</ul>

Notes:

• .osfec-list--grid is added by the columns attribute and reads --osfec-columns for the column count. It collapses
  to two columns at 980px and one at 600px.
• .osfec-card__price--muted replaces the price when the price is hidden (“Price on request”).
• Hover and focus states are driven from .osfec-card__link, so .osfec-card__link:hover .osfec-card { … } is the
  right shape for a custom hover.
• .osfec-offers__more is the paragraph holding the link to the archive, printed by more.

#Filter bar and toolbar

Class	Where
.osfec-filters	The <form>, submitting with GET
.osfec-filters__grid	The field grid
.osfec-filters__field	One field
.osfec-filters__field--pair	A From/To pair (price, area)
.osfec-filters__label	Field label
.osfec-filters__input	Every input and select in the bar
.osfec-filters__actions	Row holding the submit button and the reset link
.osfec-filters__reset	“Clear filters”
.osfec-toolbar	The sorting and result-count row on the archive
.osfec-toolbar__sort, .osfec-toolbar__label	The sorting form and its label
.osfec-toolbar__count	“Offers found: 128”
.osfec-pagination	Archive pagination; the links inside are WordPress’s own .page-numbers

#Single offer

Class	Where
.osfec-breadcrumb	Home / Offers / this offer
.osfec-offer__head, .osfec-offer__headline	Header block with the kicker, title and location
.osfec-offer__title	The <h1>
.osfec-offer__location	Location line, with an inline SVG pin
.osfec-offer__headline-price	The price block in the header; reuses .osfec-card__price-label and .osfec-card__price
.osfec-offer__price-previous	Struck-through previous price, only when it was higher
.osfec-facts, .osfec-fact, .osfec-fact__label, .osfec-fact__value	The four headline figures
.osfec-attributes, .osfec-attributes__item, .osfec-attributes__label, .osfec-attributes__value	The bordered attribute grid
.osfec-offer__id	“Offer ID: 12345”
.osfec-offer__body, .osfec-offer__main, .osfec-offer__sidebar	Two-column layout below the facts
.osfec-offer__subtitle	Section heading inside a panel
.osfec-description	The imported description, capped at the reading width
.osfec-tags, .osfec-tags__item	Marketing labels from Esti
.osfec-offer__back	“Back to all offers”

#Gallery

<div class="osfec-slider" data-osfec-slider tabindex="0">
    <div class="osfec-slider__track" data-osfec-track>
        <figure class="osfec-slider__slide"><img></figure>
    </div>
    <button class="osfec-slider__nav osfec-slider__nav--prev" data-osfec-prev>…</button>
    <button class="osfec-slider__nav osfec-slider__nav--next" data-osfec-next>…</button>
    <p class="osfec-slider__counter"><span data-osfec-current>1</span> / 12</p>
</div>

• The data-osfec-* attributes are the script’s hooks. Rename a class freely; do not remove those attributes unless
  you are also replacing assets/js/gallery.js.
• .osfec-slider__track--dragging is added while a pointer drag is in progress — useful for suppressing transitions.
• The track is moved with a transform rather than by scrolling, deliberately: a horizontal scroll container swallows the
  vertical wheel and the page would stop scrolling under the pointer.
• The navigation buttons and the counter are only rendered when the offer has more than one photo.

#Media tiles

Class	Where
.osfec-media	Wrapper for the video and virtual tour tiles
.osfec-media__grid	The tile grid
.osfec-media__card	One tile, an external link opening in a new tab
.osfec-media__icon, .osfec-media__label	The icon and label on a tile

The whole block is omitted when the offer has neither a video nor a tour.

#Agent card

Class	Where
.osfec-agent	The card
.osfec-agent--no-photo	Added when the directory has no portrait
.osfec-agent__portrait	Photo wrapper
.osfec-agent__info, .osfec-agent__name, .osfec-agent__position	Name, office and role
.osfec-agent__actions, .osfec-agent__action, .osfec-agent__action-text	tel: and mailto: links
.osfec-agent__icon	Inline SVG icon inside an action

The card is skipped entirely when the offer carries no agent name.

#Admin

The sync log screen prints a handful of classes of its own, styled inline: .osfec-status with the modifiers
--running, --success, --warning, --failed, --interrupted, plus .osfec-result, .osfec-message and
.osfec-event--error / .osfec-event--warning on event rows.