/* generated by tools/fh2oc - do not hand-edit */
.fp[data-fv] img.fh2oc-dyn-image,
img.fh2oc-dyn-image{
position:absolute;
left:0; top:0;
width:100%; height:100%;
max-width:none;
/* cover, not contain. OpenCart pads a thumbnail out to the exact requested
box, so `contain` fits the PADDING into the frame and the product ends up
small and ringed with white. `cover` crops that padding away instead, which
is what the design's own zoomed crop was doing. */
object-fit:cover;
/* The design's own framing, measured per image at build time
(blocks.framing_style): focus, zoom and zoom origin. Defaults = plain
centred cover. The design's baked matrix is still overridden. */
object-position:var(--fh-px,50%) var(--fh-py,50%);
transform:scale(var(--fh-z,1)) !important;
transform-origin:var(--fh-ox,50%) var(--fh-oy,50%);
}
/* Bootstrap 3 (layered, for pages still on stock templates) sets
html{font-size:10px}. The design sizes text in rem against the browser's
16px, and a layer cannot shield a root rule the design never declares -
every heading shrank ~2.5x. Unlayered, this restores the default. */
html{ font-size:100%; }
/* Real s made from the design's placeholder spans (lib/blocks.py).
They keep the span's classes, so font, size and colour stay the design's;
:where() keeps these resets at zero specificity. */
:where(input.fh2oc-input){ border:0; background:transparent; outline:0;
padding:0; margin:0; min-width:0; width:100%; box-sizing:border-box;
font:inherit; color:inherit; -webkit-appearance:none; appearance:none; }
:where(input.fh2oc-input)::placeholder{ color:inherit; opacity:1; }
/* Ratings: the design only draws filled stars; unfilled ones are faded. */
.fp[data-fv] .fh2oc-star-off{ filter:grayscale(1); opacity:.3; }
/* Popovers, toast and overlay that ctheme.js appends to live OUTSIDE
.fp, so they inherit - which on the storefront carries stock
OpenCart's font-size:12px / line-height:20px (layered, for pages not yet
converted). The design's own popovers inherit the browser defaults, and its
CSS relies on that: rows came out 62px instead of 53. Restore the defaults. */
body > :where(.fse-popover, .fse-action-toast, .fse-interaction-overlay){
font-size:16px; line-height:normal;
}
/* Language popover (ctheme.js) borrows the contacts popover's look, but not
its fixed 280px: a list of language names is sized to its content. */
/* No focus ring after a mouse click or a tap: Bootstrap 3 (layered, for the
unconverted pages) has a:focus{outline:5px auto} and drew a dark frame round
every clicked link / header control (2026-10-01). The ring stays for the
KEYBOARD (:focus-visible), which is what it is for. */
.fp :focus:not(:focus-visible), body > .fse-popover :focus:not(:focus-visible){ outline:none; }
/* stock OpenCart messages (emit.PAGE_ALERTS): an error / a success line under
the header, full content width */
.fp[data-fv] .fh2oc-alert{ box-sizing:border-box; width:100%; align-self:stretch; margin:0 0 4px;
padding:12px 16px; border-radius:10px; font-size:15px; line-height:1.45; }
.fp[data-fv] .fh2oc-alert-error{ background:#fdecec; color:#a4161a; border:1px solid #f3b6b6; }
.fp[data-fv] .fh2oc-alert-ok{ background:#eaf6e2; color:#2f6b12; border:1px solid #bfe3a8; }
/* OpenCart module positions (emit.MODULES_TOP / _BOTTOM): full-width bands
in the page's flow, stock module markup inside (Bootstrap is layered) */
.fp[data-fv] .fh2oc-modules{ box-sizing:border-box; width:100%; align-self:stretch; flex:0 0 auto; }
.fp[data-fv] .fh2oc-modules:empty{ display:none; }
/* the design's sections carry CSS `order`: the bands stay first / last
(header -9999 and footer 9999 in fh2oc-chrome.css stay outside them) */
.fp[data-fv] .fh2oc-modules-top{ order:-9998 !important; }
.fp[data-fv] .fh2oc-modules-bottom{ order:9998 !important; }
/* some designs put the footer inside the same flex column as the content:
the footer must stay below the bottom module band */
.fp[data-fv] :has(> .fh2oc-modules-bottom) > footer{ order:9999 !important; }
/* a band holding only code (edrone, the pop-up's script) takes no part in the
layout: as a 0px flex item it would still add one design gap (96px) */
.fp[data-fv] .fh2oc-modules:not(:has(> :not(script, style, link, noscript, template, input[type="hidden"], aside))):not(:has(> aside > :not(script, style, link, noscript, template, input[type="hidden"]))){
display:contents; }
.fp[data-fv] .fh2oc-modules:not(:has(> :not(script, style, link, noscript, template, input[type="hidden"], aside))):not(:has(> aside > :not(script, style, link, noscript, template, input[type="hidden"]))) > aside{
display:contents !important; }
/* a payment method's own information (Inbank's offer) under its chosen row */
.fp[data-fv] .fh2oc-pay-info{ box-sizing:border-box; width:100%; padding:4px 16px 8px; font-size:14px;
line-height:1.45; }
.fp[data-fv] .fh2oc-pay-info img{ max-width:100%; height:auto; }
/* blog sidebar extras (lib/blog.py, plain style): the post's tags, the newest comments */
.fp[data-fv] :has(> .fh2oc-blog-extra){ height:auto !important; max-height:none !important; }
.fp[data-fv] .fh2oc-blog-extra{ order:9999; width:100%; box-sizing:border-box; margin-top:24px; }
/* (design mode: the design draws no tags / comments - like the module bands,
the comparison shows the design alone; the blog list at <=1200 was 459px
taller, 2026-10-03) */
html[data-fh2oc-design] .fp[data-fv] .fh2oc-blog-extra{ display:none !important; }
.fp[data-fv] .fh2oc-blog-extra h4{ margin:0 0 12px; font-size:18px; font-weight:700; line-height:1.3; }
.fp[data-fv] .fh2oc-blog-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.fp[data-fv] .fh2oc-blog-tags a{ padding:6px 12px; border-radius:999px; background:#eaf6e2; color:#2f6b12;
font-size:14px; text-decoration:none; }
.fp[data-fv] .fh2oc-blog-comments{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.fp[data-fv] .fh2oc-blog-comments a{ display:block; color:#1b1b1b; text-decoration:none; font-size:14px; line-height:1.45; }
.fp[data-fv] .fh2oc-blog-comments span{ color:#8a8a8a; font-size:13px; }
.fp[data-fv] .fh2oc-blog-comments em{ display:block; font-style:normal; color:#4f8a23; margin:2px 0; }
/* design mode shows the design alone (comparisons) */
html[data-fh2oc-design] .fp[data-fv] .fh2oc-modules{ display:none !important; }
/* ... and the header above the top band */
.fp[data-fv] :has(> .fh2oc-modules-top) > header{ order:-9999 !important; }
/* stock column_left/right wrap modules in