/* 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. */ #fse-language-popover.fse-contact-popover{ width:max-content; min-width:160px; } /* Partner logos (lib/blocks.py): fit whole, never crop a logo. */ .fp[data-fv] img.fh2oc-dyn-image.fh2oc-contain{ object-fit:contain; } /* Menu links (lib/menus.py) turn the design's styled
s into . :where() keeps these at zero specificity, so every display/colour the design declares on its own classes still wins; they only replace the browser's (and Bootstrap's) link look. */ :where(a.fh2oc-link, a.fh2oc-link:hover, a.fh2oc-link:focus){ display:block; color:inherit; text-decoration:none; } /* Figma fixes each footer column's height to its design content; an admin-edited menu can hold more links than that. */ .fp[data-fv] .fh2oc-menu-col{ height:auto !important; } /* ctheme.js builds the mega-menu from real links where the export's prototype used