Styling without touching templates

The plugin ships one stylesheet, assets/css/frontend.css, enqueued as osfec-frontend. It loads on the offer archive,
on single offers, and wherever the shortcode or the Offers block appears.

Its design intent: inherit the theme, impose nothing. Colours, widths and typefaces come from the theme’s global
styles, so on a block theme the offer pages already look like the rest of the site. Each value carries a fallback for
classic themes that expose no global styles.

Most of what people want to change is reachable through custom properties, without overriding a single rule.

#Custom properties

They are declared on the .osfec wrapper, which every component the plugin renders carries.

Property	Falls back to	Used for
--osfec-ink	theme contrast, #111111	Body text
--osfec-muted	theme accent-4, #686868	Labels, secondary text
--osfec-soft	theme accent-5, #f7f7f5	Subtle backgrounds, badges
--osfec-surface	theme base, #ffffff	Cards and panels
--osfec-line	theme accent-6, rgba(17,17,17,.18)	Borders and separators
--osfec-accent	theme contrast, #111111	Buttons, active states
--osfec-on-accent	theme base, #ffffff	Text on the accent colour
--osfec-wide	theme wide size, 1340px	Maximum width of a component
--osfec-content	theme content size, 645px	Reading width of the description
--osfec-gutter	theme spacing preset 50, 1.5rem	Horizontal padding
--osfec-radius	16px	Corner radius of cards and panels
--osfec-radius-sm	10px	Corner radius of inputs and small elements
--osfec-columns	3	Grid columns, set by the columns attribute

#Rebranding in a few lines

Put this in Appearance → Customize → Additional CSS, or in your child theme’s stylesheet. Target .osfec, which is
where the properties are declared:

.osfec {
    --osfec-accent: #0f5132;
    --osfec-on-accent: #ffffff;
    --osfec-soft: #f2f7f4;
    --osfec-line: rgba(15, 81, 50, .2);
    --osfec-radius: 4px;
    --osfec-radius-sm: 4px;
}

Narrower offer pages, without touching the theme’s own width:

.osfec {
    --osfec-wide: 1100px;
    --osfec-content: 620px;
}

Dark cards on a dark theme:

.osfec {
    --osfec-surface: #16181c;
    --osfec-soft: #1f2228;
    --osfec-ink: #f2f2f2;
    --osfec-muted: #a8adb5;
    --osfec-line: rgba(255, 255, 255, .16);
}

#Loading order and specificity

The plugin stylesheet is enqueued as osfec-frontend. A theme stylesheet usually loads before it, which means a plain
.osfec-card { … } in the theme can lose to the plugin’s own rule.

Reliable ways round it, in order of preference:

1. Override the custom properties. They always win, because the plugin’s rules read them.
2. Add specificity: .osfec .osfec-card { … } beats the plugin’s single-class selector.
3. Enqueue your CSS after the plugin’s, declaring a dependency:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-theme-offers',
        get_stylesheet_directory_uri() . '/offers.css',
        array( 'osfec-frontend' ),
        '1.0'
    );
}, 20 );

!important is a last resort; the buttons already use .osfec .osfec-button, so a bare .osfec-button rule of yours
will not win.

#Dropping the plugin stylesheet entirely

If you are styling the offer components from scratch, dequeue it:

add_action( 'wp_enqueue_scripts', function () {
    wp_dequeue_style( 'osfec-frontend' );
}, 20 );

Two consequences: the layout is then entirely yours, including the gallery, whose slides are positioned by CSS — the
script only moves the track and updates the counter.

#Widths and alignment

.osfec caps itself at the theme’s wide size plus a gutter on each side, so an offer page lines up with a wide-aligned
block in the theme. The shortcode and block variant (.osfec.osfec-offers) drops its own side padding, on the
assumption that the section it is dropped into already brings one. If your list looks inset or flush by one gutter too
many, that pair of rules is why.

#Responsive breakpoints

Three breakpoints are built in and are worth matching in your own overrides:

• 980px — a grid of more than two columns drops to two
• 781px — the card switches to its compact layout
• 600px — the grid drops to a single column

#What styling cannot change

• Photo dimensions. Images are hotlinked from the Esti CDN in the sizes Esti serves (_max for the slider, _min
  for thumbnails). You can crop them with CSS, but you cannot generate new sizes.
• Which fields appear. Empty fields are dropped before rendering, and dictionary-backed attributes are hidden while
  unresolved. Changing what a page shows means overriding its template —
  see Overriding templates.
• The markup itself. Also a template job. The class names it produces are in
  the CSS class map.