/*
* SVG Icon System — replaces Line Awesome, Bootstrap Icons, FontAwesome
* Uses CSS mask-image so icons inherit currentColor.
* All icons are inline SVG data URIs; no external requests.
*
* IMPORTANT: No broad base selectors (.la, .las, .lab, .fa, .ec) —
* each class is fully self-contained to avoid collapsing layout elements.
*/
/* ---------- shared base for .icon-* custom classes only ---------- */
.icon-bars,.icon-search,.icon-heart,.icon-heart-o,
.icon-angle-down,.icon-angle-left,.icon-angle-right,.icon-angle-up,
.icon-close,.icon-long-arrow-right,.icon-long-arrow-left,
.icon-arrow-up,.icon-arrow-down,.icon-shopping-cart,.icon-user,
.icon-random,.icon-arrows,.icon-blender,.icon-couch,.icon-map-signs,
.icon-facebook-f,.icon-twitter,.icon-instagram,.icon-youtube,.icon-pinterest,
.icon-thumbs-up,.icon-thumbs-down {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
vertical-align: -0.125em;
font-style: normal;
line-height: 1;
overflow: hidden;
}
/* Clear any lingering font-based ::before content */
.icon-bars::before,.icon-search::before,.icon-heart::before,.icon-heart-o::before,
.icon-angle-down::before,.icon-angle-left::before,.icon-angle-right::before,
.icon-close::before,.icon-long-arrow-right::before,.icon-long-arrow-left::before,
.icon-arrow-up::before,.icon-shopping-cart::before,.icon-user::before,
.icon-random::before,.icon-arrows::before,.icon-blender::before,.icon-couch::before,
.icon-facebook-f::before,.icon-twitter::before,.icon-instagram::before,
.icon-youtube::before,.icon-pinterest::before,.icon-map-signs::before,
.icon-thumbs-up::before,.icon-thumbs-down::before,
.bi-star::before,.bi-star-fill::before,.bi-calendar-event::before,.bi-globe::before,
.la-laptop::before,.la-hand-holding-heart::before,.la-bicycle::before,
.la-playstation::before,.la-wine-glass::before,.la-car::before,
.la-ticket-alt::before,.la-lightbulb-o::before,.la-home::before,
.fa-map-marker::before,.ec-add-to-cart::before {
content: none !important;
display: none !important;
}
/* ---------- UI / navigation ---------- */
.icon-bars {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-search {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-heart {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-heart-o {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-angle-down {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-angle-left {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-angle-right {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-close {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-long-arrow-right {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-long-arrow-left {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-arrow-up {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-shopping-cart {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-user {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-random {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-arrows {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-thumbs-up {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-thumbs-down {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- social icons ---------- */
.icon-facebook-f {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-twitter {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-instagram {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-youtube {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.icon-pinterest {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- Line Awesome category menu icons (la-* compound classes only) ---------- */
.la-laptop {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-hand-holding-heart {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-bicycle {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-playstation {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-wine-glass {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-car {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-ticket-alt {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-lightbulb-o {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.la-home {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- Bootstrap Icons star rating ---------- */
.bi-star {
display: inline-block;
width: 1.1em; height: 1.1em;
background-color: #f0a500;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.bi-star-fill {
display: inline-block;
width: 1.1em; height: 1.1em;
background-color: #f0a500;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.bi-calendar-event {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.bi-globe {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- FontAwesome legacy (fa-) ---------- */
.fa-map-marker {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- icon-angle-up (upward chevron) ---------- */
.icon-angle-up {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- icon-blender (kitchen appliances) ---------- */
.icon-blender {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- icon-couch (furniture / casa si gradina) ---------- */
.icon-couch {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- ec-add-to-cart ---------- */
.ec-add-to-cart {
display: inline-block;
width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
vertical-align: -0.125em; font-style: normal; line-height: 1; overflow: hidden;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ---------- Prevent molla icon font from being downloaded ----------
* style.css declares @font-face for "molla" and sets font-family on [class^="icon-"]::before.
* Since all used icons are now SVG masks with content:none, we suppress the font-family
* here with !important so the browser never needs to fetch the woff files.
*/
[class^="icon-"]::before,
[class*=" icon-"]::before {
font-family: initial !important;
content: none !important;
display: none !important;
}
/* ======================================================
Molla ::after icon replacements — navigation
style.css uses font-family:'molla' on ::after for the
category dropdown hamburger and sf-arrows chevrons.
Since molla has an empty @font-face these are invisible;
we replace them with SVG mask-image here.
icons.css loads before style.min.css so we use !important
on content/font-family to prevent the later stylesheet
from reverting to the font-char approach.
====================================================== */
/* Shared base for ::after SVG mask icons */
.category-dropdown .dropdown-toggle::after,
.menu.sf-arrows .sf-with-ul::after,
.menu.sf-arrows ul .sf-with-ul::after,
.menu-vertical.sf-arrows .sf-with-ul::after {
display: inline-block;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
font-family: initial !important;
content: '' !important;
border: none !important;
line-height: 1;
vertical-align: middle;
}
/* Category dropdown toggle: hamburger / bars icon (left side of button) */
.category-dropdown .dropdown-toggle::after {
width: 2rem;
height: 2rem;
top: 50% !important;
margin-top: -1rem !important;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Category dropdown open / hovered: swap bars → close (X) icon */
.category-dropdown:not(.is-on):hover .dropdown-toggle::after,
.category-dropdown.show .dropdown-toggle::after {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* sf-arrows main nav: angle-down chevron for top-level items with submenus */
.menu.sf-arrows .sf-with-ul::after {
width: 1rem;
height: 1rem;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* sf-arrows: angle-right chevron for nested items and sidebar vertical menu */
.menu.sf-arrows ul .sf-with-ul::after,
.menu-vertical.sf-arrows .sf-with-ul::after {
width: 1rem;
height: 1rem;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ======================================================
Fix: force category dropdown to open downward.
Bootstrap 5 Popper.js auto-flips the dropdown upward
when it detects insufficient space below; override that.
z-index: 1010 ensures the megamenu renders above other
page elements (Bootstrap sticky-top uses 1020, so 1010
is safe for an in-flow header dropdown).
====================================================== */
.category-dropdown .dropdown-menu {
top: 100% !important;
bottom: auto !important;
transform: none !important;
will-change: auto !important;
z-index: 1010 !important;
}
/* ======================================================
Widget collapsible toggle ::after icon
Expanded (no .collapsed): angle-down \f110
Collapsed (.collapsed): angle-up \e802
position/top/margin-top already set by style.css;
we only swap content → SVG mask.
====================================================== */
.widget-collapsible .widget-title a::after {
content: '' !important;
font-family: initial !important;
width: 1.4rem;
height: 1.4rem;
display: block;
background-color: #333333;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.widget-collapsible .widget-title a.collapsed::after {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* ======================================================
Breadcrumb separator ::before (\f112 = angle-right)
Bootstrap sets content:"/" and style.css overrides to
the molla char — both loaded after icons.css, so we
need !important to keep the SVG mask.
====================================================== */
.breadcrumb-item + .breadcrumb-item::before {
content: '' !important;
font-family: initial !important;
width: 1.1rem;
height: 1.1rem;
display: inline-block;
background-color: #999999;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
vertical-align: middle;
margin-top: -0.15rem;
padding-right: .7rem;
float: none;
}
/* ======================================================
btn-cart ::before (\e812 = icon-cart-plus)
.btn-product:before sets font-family:"molla" + margin-right.
.btn-cart:before adds content:'\e812' (cart with plus).
Both load after icons.css → need !important on content.
Size matches .btn-product { font-size: 1.8rem }.
====================================================== */
.btn-cart::before {
content: '' !important;
font-family: initial !important;
width: 1.8rem;
height: 1.8rem;
display: inline-block;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
vertical-align: middle;
}
/* Prevent molla font-family from being applied on other btn-product ::before
that have content set elsewhere (wishlist, quickview, compare, etc.) */
.btn-product::before,
.btn-wishlist::before,
.btn-quickview::before,
.btn-compare::before {
font-family: initial !important;
}
/* ======================================================
Pagination disabled state
Bootstrap 5 uses --bs-secondary-bg (#e9ecef) as the
disabled background. The theme sets transparent on
normal + hover but leaves disabled untouched → gray box.
====================================================== */
.page-item.disabled .page-link {
background-color: transparent !important;
border-color: transparent !important;
opacity: .5;
}
/* ---- Icon sizing fixes ---- */
/* Mobile menu toggler: make hamburger bars icon larger and visible */
.mobile-menu-toggler .icon-bars {
width: 2.2rem;
height: 2.2rem;
}
/* Category dropdown right chevron: increase from 10px to 14px */
.header-intro-clearance .dropdown.category-dropdown .dropdown-toggle i {
width: 1.4rem !important;
height: 1.4rem !important;
}
/* ======================================================
.select-custom — down chevron arrow
The theme uses font-family "molla" \e81a for this.
Override with inline SVG mask so no font needed.
====================================================== */
.select-custom {
position: relative;
display: inline-block;
}
.select-custom::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
pointer-events: none;
background-color: #666;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
.select-custom select {
padding-right: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* ======================================================
Mobile product grid — prevent card content overflow
====================================================== */
@media (max-width: 575px) {
.product-title {
font-size: 1.2rem;
line-height: 1.3;
}
.product-price {
font-size: 1.3rem;
}
.product-label {
font-size: 1rem;
padding: 2px 5px;
}
.new-price {
font-size: 1.4rem !important;
}
.old-price {
font-size: 1.1rem !important;
}
}
/* ======================================================
Star ratings — .ratings-full > .ratings[style="width:X%"]
Overrides dark.min.css which depends on the missing
"riode" font. Uses Unicode ★ (U+2605) instead.
====================================================== */
.ratings-full {
position: relative;
display: inline-block;
line-height: 1;
letter-spacing: 0.2em;
vertical-align: middle;
}
.ratings-full::before {
content: "★★★★★";
font-family: Arial, sans-serif !important;
color: rgba(0, 0, 0, 0.16);
}
.ratings {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
line-height: 1;
letter-spacing: 0.2em;
font-family: Arial, sans-serif !important;
}
.ratings::before {
content: "★★★★★" !important;
font-family: Arial, sans-serif !important;
color: #fabf00;
white-space: nowrap;
}