/* 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