html, body, div, p, span, h1, h2, h3, h4, h5, h6, img, ul, ol, dl, li, dt, dd, blockquote, pre, form, fieldset, label, input, table, th, td, a {
margin:0;
padding:0;
border:0;
vertical-align:baseline;
color:#1461BA;
}
:focus {
outline:0;
}
body {
}
ul, ol {
list-style:none;
}
h1, h2, h4, h5, h6 {
font-size:1em;
}
h3 {
font-size:11px;
}
body {
background-color: #fffed;
font-family: "Arial", "Helvetica", "FreeSans", "Liberation Sans", "Nimbus Sans L", sans-serif;
text-align:center;
padding-bottom:20px;
text-shadow:0 0 1px #a8ef9d;
}
h1, h2, h3, h4, h5, h6, .buy-now-box {
font-family:Rockwell, Georgia, Palatino Linotype, Palatino, "Times New Roman", Times, serif;
}
a {
color: #32CD32;
text-decoration:none;
}
a:hover {
}
blockquote {
font-style:italic;
background:url(../images/whitetrans.png);
padding:.4em 1em .7em 1em;
margin:.7em 0 .3em 0;
}
code {
font-size:1.1em;
font-family:"Bitstream Vera Sans Mono", Monaco, "Lucida Console", monospace;
}
kbd, tt {
font-size:1.2em;
}
hr {
border:1px solid #a8ef9d;
}
pre {
overflow:auto;
width:600px;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:1em 1.5em;
margin:1em 0;
font-size:1.2em;
white-space:pre-wrap; /* css3 */
}
dl {
}
dt {
font-weight:bold;
}
dd {
padding-left:1em;
}
table {
margin:.5em 0;
}
table th {
color:#a8ef9d;
}
table td, table th {
padding:.5em .7em;
}
table th {
background:url(../images/whitetrans.png);
text-transform:uppercase;
border-bottom:1px transparent;
}
table td {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
table tr.even td {
background:url(../images/blacktrans2.png);
}
table tr:hover td {
background:url(../images/whitetrans.png);
}
fieldset {
padding:1.2em;
border:1px dashed #a8ef9d;
}
legend {
padding:.2em .8em;
font-size:1.2em;
text-transform:capitalize;
}
input, textarea, select {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
margin:.2em 0;
color:#222;
}
input, textarea {
padding:.3em;
border: solid #b9ff9d;
}
input.radio, input.checkbox {
background:#fff;
padding:2px;
}
form label {
font-weight:bold;
display:block;
}
#wrapper {
margin: 40px auto 10px auto;
padding:0;
text-align:left;
width:980px;
}
.cleared, .clear {
clear:both;
}
#top #topmenu {
float:left;
width:640px;
}
#topmenu li {
float:left;
background:url(../images/whitetrans.png);
padding:0 .8em .2em .8em;
line-height:1.5em;
margin:0 .4em .4em 0;
}
#topmenu li:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#topmenu li a {
color:#fff;
font-size:1em;
}
#topmenu li a:hover {
color:#a8ef9d;
}
#topmenu li a.rss {
background:url(../images/rsstrans.png) left 4px no-repeat;
padding-left:17px;
}
#search {
float:right;
width:300px;
text-align:left;
margin-bottom:12px;
}
#searchform input {
padding:3px;
}
#searchform {
background:url(../images/whitetrans.png);
padding:10px;
padding-left:12px;
}
#searchbox {
width:220px;
color:#555;
font-size:1em;
border:1px solid #ddd;
background:#eee;
}
#searchbox:hover {
background:#fff;
}
.submitbutton, #search .submitbutton {
cursor:pointer;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
color:#fff;
font-size:1em;
padding:3px;
vertical-align:top;
}
.submitbutton:hover, #search .submitbutton:hover {
background:url(../images/whitetrans.png);
}
#header {
padding-bottom:0px;
height:100px;
}
#header #logo {
float:left;
width:480px;
}
#header #logo img {
float:left;
margin:0 10px 0 0;
}
#header #logo h1 a {
color:#fff;
font-size:2em;
font-weight:normal;
text-shadow:0 0 6px #555;
}
#header #logo h1 a:hover {
color:#a8ef9d;
}
#header #logo #desc {
font-size:.8em;
color:#ddd;
line-height:1.2em;
}
#header #headerbanner {
float:right;
width:468px;
margin:22px 0 0 0;
text-align:right;
background:url(../images/whitetrans.png);
font-size:.8em;
line-height:1.5em;
}
#header #headerbanner h3 {
font-size:1.1em;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
#header #headerbanner p a {
border-bottom:1px dashed #a8ef9d;
}
#header #headerbanner a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#catnav {
width:980px;
height: 77px;
background:url(../images/botoons.png);
}
#budgetnav {width:300px;
margin-bottom:10px;
font-size:1.3em;
overflow:hidden;
}
.nav li {
float:left;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
line-height:2em;
margin:5px 0 5px 4px;
}
.nav li:hover {eader
background:url(../images/blacktrans2.png);
}
.nav li a {
display:block;
margin:0;
font-size:1em;
color: #32CD32;
padding:0 12px;
}
#budgetnav ul.nav li {
margin:0 3px 0 0;
}
#budgetnav ul.nav li a {
display:block;
margin:0;
font-size:0.8em;
color: #a8ef9d;
padding:0 5px;
}
.nav li a:hover {
color:#afdaff;
text-decoration:none;
display:block;
}
.nav li ul {
position: absolute;
width:380px;
left:-999em;
padding-top:5px;
margin:0;
}
.nav li:hover ul, #nav li.sfhover ul {
left:auto;
}
.nav li li {
padding:0;
margin:0;
width:180px;
line-height:1.5em;
border:1px solid #C8D4E3;
}
.nav li li a {
color: #32CD32;
margin:0;
padding:7px 13px;
background:url(../images/blacktrans3.png); border-radius: 20px; box-shadow #C8D4E3; 0 0 0 3px; 0 0 13px #7b7b7b
}
.nav li li a:hover {
color:#afdaff;
}
.nav li:hover, #nav li.sfhover {
position: static;
}
#main {
padding:10px 0 20px 0;
}
#content {
float:left;
width:666px;
}
#contentfull {
float:left;
width:980px;
}
h2#contentdesc, h1#contentdesc {
font-weight:normal;
font-size:1.3em;
padding-bottom:15px;
}
h2#contentdesc span, h1#contentdesc span {
color:#a8ef9d;
}
.post, .item, .items-leading, .item-page{
margin:0 0 15px 0;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:10px;
font-size: 0.9em;
line-height: 1.5em;
}
.sticky {
padding:10px;
margin-bottom:35px;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#post h2 a {
color: #afdaff;
font-size: 1.4em;
}
#post h2 {
background:url(../images/bodybg1.png);
padding:7px 10px;
margin-bottom:10px;
min-height: 80px;
min-width: 138px;
}
.posttop h2.posttitle a, .posttop h1.posttitle a {
color:#afdaff;
font-size:1.4em;
}
.posttop h2.posttitle a:hover, .posttop h1.posttitle a:hover {
color:#a8ef9d;
border-bottom:0px dashed #a8ef9d;
}
.postmetatop {
text-transform:capitalize;
font-size:0.7em;
padding-top:8px;
line-height:1.5em;
}
.postmetatop .categs {
float:left;
width:450px;
background:url(../images/categ.png) left 2px no-repeat;
padding-left:20px;
line-height:16px;
}
.postmetatop .categs a:hover {
color:#afdaff;
}
.postmetatop .date {
float:right;
width:130px;
text-align:right;
}
.postmetatop .date span {
background:url(../images/date.png) left no-repeat;
padding-left:20px;
}
.postcontent {
color:#fff;
margin:.8em 0;
font-size:0.9em;
line-height:1.5em;
padding-left:13px;
padding-right:13px;
}
.postcontent h1 {
padding:.8em 0;
font-size:1.5em;
}
.postcontent h2 {
padding:.8em 0 0 0;
font-size:1.4em;
}
.postcontent h3 {
padding:.8em 0 0 0;
font-size:1.3em;
}
.postcontent h4 {
padding:.8em 0;
font-size:1.2em;
}
.postcontent h5 {
padding:.8em 0;
font-size:1.1em;
}
.postcontent h6 {
padding:.8em 0;
font-size:1em;
}
.postcontent p, .items-leading p, .items-row p {
padding: 0 .4em .4em .4em;
}
.postcontent a {
border-bottom:1px dashed #a8ef9d;
}
.postcontent a #flowplayer7 {
border-bottom:none;
}
.postcontent .wp-caption a img, {
border-bottom:0px solid #a8ef9d;
}
.attachment-thumbnail {
float:left;
margin: 0 10px 10px 0;
}
.postcontent .wp-caption a {
border-bottom:0px solid #a8ef9d;
}
.postcontent a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
.postcontent ul, .postcontent ol {
padding:.4em 0 .5em 2em;
}
.postcontent ul li {
list-style:disc;
}
.postcontent ol li {
list-style:decimal;
}
.postmetabottom {
background:url(../images/whitetrans.png);
padding:10px;
font-size:0.8em;
line-height:1.1em;
margin-top:15px;
clear:both;
}
.postmetabottom a {
color:#fff;
}
.postmetabottom a:hover {
color:#afdaff;
}
.postmetabottom .tags {
float:left;
padding-right:20px;
background:url(../images/tags.png) left 1px no-repeat;
padding-left:20px;
line-height:16px;
}
.postmetabottom .readmore {
float:right;
text-align:right;
}
.postmetabottom .readmore span {
background:url(../images/more.png) left 4px no-repeat;
padding-left:17px;
}
.postmetaauthor {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:10px;
font-size:0.8em;
line-height:1.1em;
margin-top:20px;
}
.postmetaauthor .authorpic {
float:left;
width:60px;
}
.postmetaauthor .authordesc {
float:right;
width:540px;
}
.postmetaauthor .authordesc p.theauthor {
line-height:1.4em;
font-weight:bold;
}
.postmetaauthor .authordesc p.thedesc {
line-height:1.4em;
padding:.8em 0 .2em 0;
}
.postmetaauthor .authordesc a {
color:#afdaff;
border-bottom:1px dashed #afdaff;
}
.postmetaauthor .authordesc a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
/************************************************
* Navigation *
************************************************/
#navigation {
line-height:1.7em;
margin-bottom:5px;
}
#navigation a {
border-bottom:1px dashed #a8ef9d;
}
#navigation a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#navigation .wp-pagenavi a {
padding:5px 7px;
font-size:.87em;
background:url(../images/blacktrans2.png);
color:#fff;
border:none;
margin: 2px;
}
#navigation .wp-pagenavi a:hover {
color:#a8ef9d;
}
#navigation .wp-pagenavi span.pages, #navigation .wp-pagenavi span.current, #navigation .wp-pagenavi span.extend {
padding:5px 7px;
font-size:.87em;
background:url(../images/blacktrans2.png);
color:#fff;
border:none;
margin: 2px;
}
#comments {
margin:0 0 15px 0;
}
#comments h3 {
font-size:1em;
font-weight:normal;
}
#comments ul.commentlist li {
margin:10px 0 0 0;
padding:15px;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#comments ul.commentlist li ul.children li {
margin:20px 0 0 20px;
}
#comments img.avatar, #comments img.ravatar {
float:left;
margin:0 20px 0 0;
}
#comments .commentbody .author {
font-size:.9em;
margin-bottom:10px;
color:#eee;
}
#comments .commentbody .author a {
color:#b9ff9d;
border-bottom:1px dashed #b9ff9d;
}
#comments .commentbody .author a:hover {
color:#eee;
border-bottom:1px dashed #b9ff9d;
}
#comments .commentbody .commentmetadata {
font-size:.7em;
color:#bbb;
margin-bottom:25px;
}
#comments .commentbody .commentmetadata a {
color:#bbb;
}
#comments .commentbody em {
margin-bottom:10px;
color:#eee;
display:block;
font-size:.8em;
font-style:normal;
}
#comments .commentbody p {
font-size:.8em;
padding:5px 0 8px 0;
line-height:1.4em;
}
#comments .commentbody p a {
color:#b9ff9d;
border-bottom:1px dashed #b9ff9d;
}
#comments .commentbody p a:hover {
color:#eee;
border-bottom:1px dashed #b9ff9d;
}
#comments .reply a {
margin-top:5px;
padding:5px;
line-height:1.3em;
font-size:.7em;
float:left;
background:#ddd;
color:#000;
}
#comments .reply a:hover {
background:#fff;
color:#111;
}
#comments h3#trackbacktitle {
padding-top:10px;
}
#comments ul.trackback {
margin:10px 0 0 0;
padding:15px;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#comments ul.trackback li {
margin-bottom:17px;
font-size:.9em;
}
#comments ul.trackback li .commentbody .author {
margin:0;
}
#comments a#cancel-comment-reply-link {
display:block;
padding:8px 0;
}
#comments a#cancel-comment-reply-link:hover {
color:#ccc;
}
#comments #respond {
margin-top:20px;
}
#comments #respond h3 {
margin-bottom:15px;
}
#comments #respond input {
padding:5px;
width:200px;
background:#efefef;
font-size:.8em;
}
#comments #respond p {
padding:.5em 0 0 0;
}
#comments #respond p label {
font-size:.8em;
font-weight:normal;
}
#comments #respond textarea {
width:600px;
padding:10px;
background:#efefef;
font-size:.8em;
border:none;
}
#comments #respond .submitbutton {
color:#fff;
background:url(../images/blacktrans3.png);
padding:6px;
line-height:1.4em;
font-size:.8em;
}
#comments #respond .submitbutton:hover {
cursor:pointer;
color:#a8ef9d;
}
#comments #respond p.subscribe-to-comments label {
display:inline;
margin-left:4px;
}
#sidebar {
float:right;
width:300px;
font-size:0.8em;
line-height:1.4em;
margin-bottom:0px;
}
#sidebar ul li.boxed, #sidebar .moduletable {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:10px;
margin-bottom:15px;
}
#sidebar .widgettitle, #sidebar .moduletable h3{
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:5px 10px;
line-height:1.3em;
font-weight:normal;
font-size:1.4em;
margin-bottom:10px;
}
#sidebar .moduletable li {
padding-bottom:8px;
margin-left:10px;
}
#sidebar .moduletable div.srfrContainer ul.srfrList li.srfrRow0 {
margin-left:0;
}
#sidebar ul ul li a {
}
#sidebar .moduletable li a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#sidebar p {
color:#eee;
padding:0 5px 10px 5px;
}
#sidebar p a {
border-bottom:1px dashed #a8ef9d;
}
#sidebar p a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#sidebar img {
border:none;
padding:0 5px;
}
#sidebar .side-ad img {
padding:0px;
}
.side-ad {
margin-bottom:10px;
}
#sidebar img.avatar {
float:left;
padding:0 15px 5px 5px;
}
#tag_cloud a, .widget_tag_cloud a {
display:inline;
}
#tag_cloud a:hover {
color:#fff;
}
li#tagbox a:hover {
color:#fff;
}
#sidebars ul.children li {
border-bottom:none;
}
#sidebars ul.children {
margin-bottom:0;
}
#footer {
clear:both;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
font-size:0.8em;
height:50px;
}
#Nmemu {
clear:both;
font-size:0.8em;
padding:10px;
}
.footer-icon li a{
float:left;
opacity:0.7;
filter:alpha(opacity=70);
}
.footer-icon li a:hover {
opacity:1;
filter:alpha(opacity=100);
background:none;
}
#cherta {
margin-top: -30px;
border-top: 2px solid #114989;
}
#sozdatel {
position:relative;
font-size:10px;
color:#CCCCCC;
width: 300px;
float:right;
text-align:right;
margin-top: 10px;
padding-right:15px;
}
#sozdatel a:link, #sozdatel a:visited {
color: #CCCCCC;
text-decoration: none;
}
#sozdatel a:hover {
color: #222222;
text-decoration: none;
cursor: pointer;
}
#sozdatel a img{
border: 0px;
opacity:0.85;
filter:alpha(opacity=85);
}
.sozdatel-template-design {
position: absolute;
top: 0px;
right: 25px;
}
.sozdatel-template {
position:absolute;
right:58px;
display:block;
}
#credits {
margin-top:.7em;
font-size:0.7em;
line-height:1.4em;
}
#credits a {
color:#ddd;
}
#credits a:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
color:#fff;
}
#credits #creditsleft {
float:left;
width:600px;
color:#aaa;
}
#credits #creditsright {
float:right;
width:300px;
text-align:right;
color:#aaa;
}
.alignleft {
float:left;
margin:5px 15px 7px 0;
}
.alignright {
float:right;
margin:5px 0 7px 15px;
}
.aligncenter, div.aligncenter {
margin:10px auto;
text-align:center;
display:block;
}
img.alignleft {
float:left;
margin:5px 15px 5px 0;
}
img.alignright {
float:right;
margin:5px 0 5px 15px;
}
img.aligncenter {
margin:10px auto;
text-align:center;
display:block;
}
.wp-caption {
text-align:center;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding-top:6px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.wp-caption img {
padding:0;
margin:0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
padding:0 4px 5px;
margin:0;
}
#promo-head {
margin-top:5px;
height: 115px;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:5px;
padding-right:0px;
}
#promo-head2 {
margin-top:5px;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:5px;
padding-right:0px;
}
.boxedpromo {
float:left;
margin-right:5px;
width:190px;
height:115px;
}
.boxed-link {
display:block;
background:none;
width:190px;
height:115px;
position:relative;
overflow:hidden;
}
#box1 {
background-position: 0px 0px;
}
#box2 {
background-position: 760px 0px;
}
#box3 {
background-position: 570px 0px;
}
#box4 {
background-position: 380px 0px;
}
#box5 {
background-position: 190px 0px;
}
#box2:hover {
background-position: 760px 115px;
}
#box3:hover {
background-position: 570px 115px;
}
#box4:hover {
background-position: 380px 115px;
}
#box5:hover {
background-position: 190px 115px;
}
#sb-title-inner, #sb-info-inner, #sb-loading-inner, div.sb-message {
font-family:"HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:200;
color:#fff;
}
#sb-container {
position:fixed;
margin:0;
padding:0;
top:0;
left:0;
z-index:999;
text-align:left;
visibility:hidden;
display:none;
}
#sb-overlay {
position:relative;
height:100%;
width:100%;
}
#sb-wrapper {
position:absolute;
visibility:hidden;
width:100px;
}
#sb-wrapper-inner {
position:relative;
border:1px solid #303030;
overflow:hidden;
height:100px;
}
#sb-body {
position:relative;
height:100%;
}
#sb-body-inner {
position:absolute;
height:100%;
width:100%;
}
#sb-player.html {
height:100%;
overflow:auto;
}
#sb-body img {
border:none;
}
#sb-loading {
position:relative;
height:100%;
}
#sb-loading-inner {
position:absolute;
font-size:14px;
line-height:24px;
height:24px;
top:50%;
margin-top:-12px;
width:100%;
text-align:center;
}
#sb-loading-inner span {
background:url(http://stuntpixel.com/ipadmedia/loading.gif) no-repeat;
padding-left:34px;
display:inline-block;
}
#sb-body, #sb-loading {
background-color:#060606;
}
#sb-title, #sb-info {
position:relative;
margin:0;
padding:0;
overflow:hidden;
}
#sb-title, #sb-title-inner {
height:26px;
line-height:26px;
}
#sb-title-inner {
font-size:16px;
}
#sb-info, #sb-info-inner {
height:20px;
line-height:20px;
}
#sb-info-inner {
font-size:12px;
}
#sb-nav {
float:right;
height:16px;
padding:2px 0;
width:45%;
}
#sb-nav a {
display:block;
float:right;
height:16px;
width:16px;
margin-left:3px;
cursor:pointer;
background-repeat:no-repeat;
}
#sb-nav-close {
background-image:url(http://stuntpixel.com/ipadmedia/close.png);
}
#sb-nav-next {
background-image:url(http://stuntpixel.com/ipadmedia/next.png);
}
#sb-nav-previous {
background-image:url(http://stuntpixel.com/ipadmedia/previous.png);
}
#sb-nav-play {
background-image:url(http://stuntpixel.com/ipadmedia/play.png);
}
#sb-nav-pause {
background-image:url(http://stuntpixel.com/ipadmedia/pause.png);
}
#sb-counter {
float:left;
width:45%;
}
#sb-counter a {
padding:0 4px 0 0;
text-decoration:none;
cursor:pointer;
color:#fff;
}
#sb-counter a.sb-counter-current {
text-decoration:underline;
}
div.sb-message {
font-size:12px;
padding:10px;
text-align:center;
}
div.sb-message a:link, div.sb-message a:visited {
color:#fff;
text-decoration:underline;
}
.wpp-post-title {
color: #a8ef9d;
display:block;
height:50px
}
.wpp-post-title:hover {
background-color: transparent;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
/* thumbnail styles */
img.wpp-thumbnail, .wherego_thumb {
float:left;
margin-right:7px;
}
/* excerpt styles */
.wpp-excerpt {
}
/* Stats tag styles */
.post-stats {
font-size:9px;
font-weight:bold;
}
.wpp-comments {
}
.wpp-views {
}
.wpp-author {
font-style:italic;
}
.wpp-date {
}
/* WP-PostRatings styles */
.wpp-rating {
}
.popular-posts ul li{
clear:left;
height:50px;
list-style-type:none;
}
.popular-posts ul li:hover {
}
.socials a:hover {
background:none;
}
.related-reviews {
clear:both;
}
.postcontent .related-reviews h3 {
padding-left:10px;
}
.related-reviews ul li {
float:left;
width:300px;
margin-left:10px;
margin-top:5px;
list-style-type:none;
overflow:hidden;
}
.postcontent .related-reviews ul {
padding:0;
}
.related-reviews ul li img {
float:left;
margin-right:7px;
}
.buy-now-box {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:8px;
margin:10px 0;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
font-style:italic;
}
.buy-now-box img{
padding:0 0 0 10px;
margin:0;
border: 0 none;
}
.buy-now-box-button {
float:right;
padding:0 0 0 10px;
margin:0;
border: 0 none;
}
#buynow {
float:right;
width:150px;
}
#buynow, #buynow ul {
height:33px;
list-style:none;
margin:0;
padding:0;
}
#buynow ul li {
float:right;
background:url(../images/buy-now-left_sm.png) no-repeat left top;
margin:0;
padding:0;
list-style:none;
}
#buynow a {
display:block;
background:url(../images/buy-now-right_sm.png) no-repeat right top;
padding:0 32px 0 0;
text-decoration:none;
color:#FFF;
border:none;
height:33px;
line-height:33px;
font-size:18px;
text-indent:10px;
}
#buynow a:hover {
background-position: right bottom;
}
#buynow ul li:hover{
background-position: left bottom;
}
.ratings-box {
float:left;
width:310px;
height:33px;
padding:0 0 0 100px;
background:url(../images/rate-me.png) no-repeat left center;
}
.social-media-box {
clear:both;
padding: 7px 0 0 5px;
margin: 7px 0 0 0;
border-top: solid 1px #555;
}
.ratingtext {
text-indent:5px;
line-height:28px;
}
.tweeter {
float:right;
width:95px;
border:0;
padding:7px 22px 0 0;
}
.tweeter a {
border:none;
}
.faceoff {
width:450px;
float:left;
padding: 4px 0 0 0;
}
#related_posts_thumbnails li a img {
float:left;
padding: 0 10px 0 5px; ;
margin: 0 0 10px 0;
height:50px;
width:50px;
}
#related_posts_thumbnails li {
clear:both;
}
li.pagenav-next a {
float:right;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:10px;
}
li.pagenav-prev a {
float:left;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:10px;
}
.post-content {
padding: 0 10px;
}
ul.actions li {
float:right;
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
padding:2px 5px;
margin-left:5px;
}
#menu-cat .menu_popup-css{padding-right:0;border-top:0;-webkit-border-top-left-radius: 0px;-webkit-border-top-right-radius: 0px;-moz-border-radius-topleft: 0px;-moz-border-radius-topright: 0px;border-top-left-radius: 0px;border-top-right-radius: 0px;}
#menu-cat .menu_popup-css:before{top:0;
-webkit-border-top-left-radius: 0px;-webkit-border-top-right-radius: 0px;-webkit-border-bottom-right-radius: 15px;-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 0px;-moz-border-radius-topright: 0px;-moz-border-radius-bottomright: 15px;-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 15px;border-bottom-left-radius: 15px;
}
#menu-cat{border-bottom:3px solid #329a1c;position:relative;z-index:55;margin-top:-22px;width:100%;/*clear:both*/}
#menu-cat .body-layout{text-align:center;overflow:visible;padding-top:32px;margin-bottom:-3px}
#menu-cat-wrap{padding:0 10px 0 35px}
#menu-cat table{width:100%}
#menu-cat td{width:10%;padding-bottom:3px}
#menu-cat{
float:left;
width:640px;
}
#menu-cat li {
float:left;
background:url(../images/whitetrans.png);
padding:0 .8em .2em .8em;
line-height:1.5em;
margin:0 .4em .4em 0;
}
#menu-cat li:hover {
background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;
}
#menu-cat li a {
color:#fff;
font-size:1em;
}
#menu-cat li a:hover {
color:#a8ef9d;
}
#menu-cat li a.rss {
background:url(../images/rsstrans.png) left 4px no-repeat;
padding-left:17px;
}
menuB {
padding-bottom:
}
#pred {
background-color: #00C900;
position: relative;
height: 24px;
z-index: 65;
min-width: 1200px; /* */
}
#predmenu {
float:left;
width:640px;
margin-left: 3%;
}
#predmenu li {
float:left;
/*background:url(../images/whitetrans.png);*/
padding:0 .8em .2em .8em;
line-height:1.5em;
margin:0 .4em .4em 0;
}
#predmenu li:hover {
/*background:url(../images/blacktrans.png); border-radius: 20px; box-shadow #ffffff; 0 0 0 3px; 0 0 13px #7b7b7b;*/
}
#predmenu li a {
color:#fff;
font-size:1em;
}
#predmenu li a:hover {
color:#a8ef9d;
}
.moduletable_reg {
float:right;
padding:0 4px 2px 4px;
line-height:1px;
margin:0 4px 4px 0;
font-size: 11px;
.button_reg {
width: 76px;
}
}
#login-form {
height: 22px;
}
#hd {
background: #ffffe1 url(../images/header-section-bg.png ) top center repeat-x;
position: relative;
height: 40px;
}
#mod_virtuemart_search {
border:3px solid #a8ef9d;
border-radius: 4px;
position: relative;
right: 190px;
background: #F1F9FD;
}
.moduletable_karzina {
margin-top: -50px;
}
ul.menu_VMmenu,.menu_VMmenu ul,.menu_VMmenu li{
list-style-type:none!important;
background-image:none!important;
padding-top:7px;
font-size: 13px;
color: #114989;
}
.leading-0 {
}
.row-0 .column-1 {
width: 320px;
height: 343px;
float: left;
}
.column-2 {
margin-left: 350px;
}
.blog {
font-size: 18px;
}
.moduletable_vopros {
float: left;
}
.moduletable_sotrud {
padding-left: 150px;
}
.cart-summary {
background:url(../images/blacktrans.png);
}
.moduletable_scrol {
border: solid #fff 11px;
}
.moduletable_scrol table td {
background: none;
}
.moduletable_scrol able tr.even td {
background: none;
}
.moduletable_scrol table tr:hover td {
background: none;
}
.addtocart-button {
font-size: 2px;
}
.addtocart-bar {
font-size: 8px;
}
.mod_login_reg {
color: white;
}
/* VM6_PRODUCT_IMAGE_LAYOUT_FINAL
Original migrated images are temporarily used as VM thumbnails.
These rules create a fixed visual area without modifying image files. */
/* Category, search and featured-product cards. */
.browse-view .product .vm-product-media-container,
.featured-view .product .vm-product-media-container,
.latest-view .product .vm-product-media-container,
.topten-view .product .vm-product-media-container,
.recent-view .product .vm-product-media-container,
.related-products-view .product .vm-product-media-container {
width: 100%;
height: 190px;
margin: 0 0 9px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.browse-view .product .vm-product-media-container > a,
.featured-view .product .vm-product-media-container > a,
.latest-view .product .vm-product-media-container > a,
.topten-view .product .vm-product-media-container > a,
.recent-view .product .vm-product-media-container > a,
.related-products-view .product .vm-product-media-container > a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* VM5 renders thumbnail img with class browseProductImage. */
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 180px !important;
max-height: 180px !important;
object-fit: contain !important;
}
/* A single product page: full original may be larger, but stays inside 380?380. */
.productdetails-view .main-image,
.productdetails .main-image {
width: 100%;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.productdetails-view .main-image > a,
.productdetails .main-image > a {
display: flex;
align-items: center;
justify-content: center;
}
.productdetails-view .main-image img,
.productdetails .main-image img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 380px !important;
max-height: 380px !important;
object-fit: contain !important;
}
/* Further product images below the main photo. */
.productdetails-view .additional-images,
.productdetails .additional-images {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 7px;
}
.productdetails-view .additional-images .floatleft,
.productdetails .additional-images .floatleft {
float: none !important;
width: 78px;
height: 78px;
margin: 0 !important;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.productdetails-view .additional-images img,
.productdetails .additional-images img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 74px !important;
max-height: 74px !important;
object-fit: contain !important;
}
@media (max-width: 700px) {
.browse-view .product .vm-product-media-container,
.featured-view .product .vm-product-media-container,
.latest-view .product .vm-product-media-container,
.topten-view .product .vm-product-media-container,
.recent-view .product .vm-product-media-container,
.related-products-view .product .vm-product-media-container {
height: 150px;
}
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
max-width: 145px !important;
max-height: 145px !important;
}
.productdetails-view .main-image,
.productdetails .main-image {
min-height: 300px;
}
.productdetails-view .main-image img,
.productdetails .main-image img {
max-width: 300px !important;
max-height: 300px !important;
}
}
/* VM6_SIX_EQUAL_MENU_CELLS_v231
Six category buttons must exactly fit the 980px botoons.png strip.
Long names wrap inside their own button, never below the strip. */
#catnav.legacy-vm-catnav {
width: 980px;
height: 71px;
min-height: 71px;
margin: 0;
padding: 0;
background: url(../images/botoons.png) left top no-repeat;
overflow: visible;
}
#catnav.legacy-vm-catnav > .moduletable,
#catnav.legacy-vm-catnav .legacy-vm-category-menu {
width: 100%;
height: 71px;
margin: 0;
padding: 0;
}
#catnav #vm6-catnav.nav.menu_VMmenu {
width: 100%;
height: 71px;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch;
list-style: none !important;
background: transparent !important;
}
/* Exactly six equal top-level buttons. */
#catnav #vm6-catnav.nav.menu_VMmenu > li {
float: none !important;
position: relative !important;
flex: 0 0 calc(100% / 6);
width: auto !important;
min-width: 0;
height: 71px;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
line-height: normal !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover {
position: relative !important;
background: transparent !important;
}
/* The text is centred within the corresponding painted cell. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div,
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
width: 100%;
height: 71px;
margin: 0 !important;
padding: 0 9px !important;
box-sizing: border-box;
display: flex !important;
align-items: center;
justify-content: center;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #32CD32;
font-size: 1em;
line-height: 1.18em !important;
text-align: center;
white-space: normal !important;
overflow-wrap: break-word;
text-decoration: none;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover {
color: #afdaff;
}
/* Keep dropdowns under their own top-level button. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu {
display: none;
position: absolute !important;
top: 71px !important;
left: 0 !important;
width: 240px !important;
margin: 0 !important;
padding: 5px 0 0 !important;
z-index: 1000;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > ul.menu_VMmenu {
display: block;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li {
float: none !important;
position: relative !important;
width: 100% !important;
margin: 0 !important;
}
/* On small screens there is not enough physical width for six columns. */
@media (max-width: 700px) {
#catnav.legacy-vm-catnav,
#catnav.legacy-vm-catnav > .moduletable,
#catnav.legacy-vm-catnav .legacy-vm-category-menu,
#catnav #vm6-catnav.nav.menu_VMmenu {
width: 100%;
height: auto;
min-height: 0;
background-size: 100% 100%;
}
#catnav #vm6-catnav.nav.menu_VMmenu {
flex-wrap: wrap !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li {
flex-basis: 33.3333%;
height: 58px;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div,
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
height: 58px;
padding: 0 5px !important;
font-size: 0.9em;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu {
top: 58px !important;
width: 210px !important;
}
}
/* VM6_FOOTER_ACTIVE_MANUFACTURERS_v232
Current XML catalogue brands. Each wordmark is a real VirtueMart
manufacturer filter, not a decorative dead link. */
#footer .footer-icon.footer-manufacturers {
height: 50px;
margin: 0;
padding: 0 22px;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
box-sizing: border-box;
}
#footer .footer-icon.footer-manufacturers li {
float: none;
flex: 1 1 0;
min-width: 0;
height: 50px;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footer-icon.footer-manufacturers li a {
float: none;
width: 100%;
height: 50px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-decoration: none;
opacity: 0.78;
filter: alpha(opacity=78);
}
#footer .footer-icon.footer-manufacturers li a:hover {
opacity: 1;
filter: alpha(opacity=100);
background: none;
}
#footer .brand-wordmark {
display: inline-block;
color: #eeeeee;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
line-height: 1;
letter-spacing: 1.4px;
text-align: center;
text-shadow: 0 1px 2px #000000;
white-space: nowrap;
}
#footer .brand-msi {
letter-spacing: 2.6px;
}
#footer .brand-gigabyte {
font-size: 15px;
letter-spacing: 0.8px;
}
#footer .brand-sapphire {
font-size: 14px;
letter-spacing: 0.7px;
}
#footer .brand-razer {
color: #8ce85f;
letter-spacing: 2px;
}
#footer .footer-icon.footer-manufacturers li a:hover .brand-wordmark {
color: #b9ff9d;
}
@media (max-width: 700px) {
#footer {
height: auto;
min-height: 50px;
}
#footer .footer-icon.footer-manufacturers {
height: auto;
min-height: 50px;
padding: 4px 8px;
gap: 3px;
}
#footer .footer-icon.footer-manufacturers li,
#footer .footer-icon.footer-manufacturers li a {
height: 42px;
}
#footer .brand-wordmark {
font-size: 11px;
letter-spacing: 0.3px;
}
#footer .brand-gigabyte,
#footer .brand-sapphire {
font-size: 10px;
}
}
/* VM6_FOOTER_REQUESTED_BRANDS_AND_LINKS_v233
Requested first-row brands + second-row old-site quick links. */
#footer {
height: 56px;
}
#footer .footer-icon.footer-manufacturers {
height: 56px;
margin: 0;
padding: 0 20px;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
box-sizing: border-box;
}
#footer .footer-icon.footer-manufacturers li {
float: none;
flex: 1 1 0;
min-width: 0;
height: 56px;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footer-icon.footer-manufacturers li a {
float: none;
width: 100%;
height: 56px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-decoration: none;
opacity: 0.82;
filter: alpha(opacity=82);
}
#footer .footer-icon.footer-manufacturers li a:hover {
opacity: 1;
filter: alpha(opacity=100);
background: none;
}
#footer .brand-wordmark {
display: inline-block;
color: #eeeeee;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1;
letter-spacing: 1.2px;
text-align: center;
text-shadow: 0 1px 2px #000000;
white-space: nowrap;
}
#footer .brand-samsung {
font-size: 14px;
letter-spacing: 0.8px;
}
#footer .brand-kingston {
font-size: 14px;
letter-spacing: 0.8px;
}
#footer .brand-gigabyte {
font-size: 14px;
letter-spacing: 0.5px;
}
#footer .brand-razer {
color: #8ce85f;
letter-spacing: 2px;
}
#footer .footer-icon.footer-manufacturers li a:hover .brand-wordmark {
color: #b9ff9d;
}
#Nemu.footer-second-row {
clear: both;
margin-top: 8px;
padding: 0;
font-size: 0.8em;
}
#Nemu.footer-second-row .footer-secondary-nav {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
}
#Nemu.footer-second-row .footer-secondary-nav li {
margin: 0;
padding: 0;
}
#Nemu.footer-second-row .footer-secondary-nav li a {
display: block;
text-decoration: none;
opacity: 0.86;
filter: alpha(opacity=86);
}
#Nemu.footer-second-row .footer-secondary-nav li a:hover {
opacity: 1;
filter: alpha(opacity=100);
background: none;
}
#Nemu.footer-second-row .footer-actionmark {
display: inline-block;
min-width: 120px;
padding: 7px 13px 8px;
color: #d9eefc;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 1.1;
text-align: center;
white-space: nowrap;
background: url(../images/blacktrans.png);
border: 1px solid #3a78b2;
border-radius: 14px;
box-shadow: 0 0 6px rgba(17, 73, 137, 0.6);
text-shadow: 0 1px 1px #000000;
}
#Nemu.footer-second-row .footer-action-partner {
color: #fff6b8;
}
#Nemu.footer-second-row .footer-action-question {
color: #bfeeff;
}
#Nemu.footer-second-row .footer-secondary-nav li a:hover .footer-actionmark {
color: #ffffff;
border-color: #8dc3ff;
}
@media (max-width: 700px) {
#footer {
height: auto;
min-height: 56px;
}
#footer .footer-icon.footer-manufacturers {
height: auto;
min-height: 56px;
padding: 4px 8px;
gap: 3px;
}
#footer .footer-icon.footer-manufacturers li,
#footer .footer-icon.footer-manufacturers li a {
height: 44px;
}
#footer .brand-wordmark {
font-size: 10px;
letter-spacing: 0.2px;
}
#footer .brand-samsung,
#footer .brand-kingston,
#footer .brand-gigabyte {
font-size: 9px;
}
#Nemu.footer-second-row .footer-secondary-nav {
gap: 6px;
}
#Nemu.footer-second-row .footer-actionmark {
min-width: 0;
padding: 6px 8px 7px;
font-size: 11px;
}
}
/* VM6_PRODUCTDETAILS_TWO_COLUMN_v234
Two-column product page: gallery at left, summary / price / cart at right. */
.productdetails-view.productdetails .vm-product-container,
.productdetails.productdetails-view .vm-product-container {
width: 100%;
display: flex !important;
flex-flow: row nowrap !important;
align-items: flex-start;
gap: 24px;
margin: 15px 0 22px;
padding: 0;
box-sizing: border-box;
}
.productdetails-view.productdetails .vm-product-media-container,
.productdetails.productdetails-view .vm-product-media-container {
float: none !important;
flex: 0 0 43%;
width: 43% !important;
max-width: 430px;
min-width: 0;
margin: 0 !important;
padding: 0 8px 0 0;
box-sizing: border-box;
}
.productdetails-view.productdetails .vm-product-details-container,
.productdetails.productdetails-view .vm-product-details-container {
float: none !important;
flex: 1 1 auto;
width: auto !important;
min-width: 0;
margin: 0 !important;
padding: 0 0 0 6px;
box-sizing: border-box;
}
.productdetails-view.productdetails .main-image,
.productdetails.productdetails-view .main-image {
width: 100%;
min-height: 360px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.productdetails-view.productdetails .main-image > a,
.productdetails.productdetails-view .main-image > a {
display: flex;
align-items: center;
justify-content: center;
}
.productdetails-view.productdetails .main-image img,
.productdetails.productdetails-view .main-image img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 390px !important;
max-height: 390px !important;
object-fit: contain !important;
}
.productdetails-view.productdetails .vm-product-summary,
.productdetails.productdetails-view .vm-product-summary {
margin: 0 0 14px !important;
padding: 11px 13px !important;
color: #d5e8f4;
font-size: 14px;
line-height: 1.42;
text-align: left;
background: url(../images/blacktrans.png);
border: 1px solid #356eaa;
border-radius: 10px;
box-shadow: inset 0 0 9px rgba(7, 27, 51, 0.55);
}
.productdetails-view.productdetails .spacer-buy-area,
.productdetails.productdetails-view .spacer-buy-area {
width: 100%;
min-width: 0;
}
.productdetails-view.productdetails .additional-images,
.productdetails.productdetails-view .additional-images {
width: 100%;
margin: 8px 0 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.productdetails-view.productdetails .additional-images .floatleft,
.productdetails.productdetails-view .additional-images .floatleft {
float: none !important;
width: 76px;
height: 76px;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.productdetails-view.productdetails .additional-images img,
.productdetails.productdetails-view .additional-images img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 72px !important;
max-height: 72px !important;
object-fit: contain !important;
}
.productdetails-view.productdetails .product-description,
.productdetails.productdetails-view .product-description {
clear: both;
margin-top: 18px;
}
@media (max-width: 760px) {
.productdetails-view.productdetails .vm-product-container,
.productdetails.productdetails-view .vm-product-container {
display: block !important;
margin-top: 10px;
}
.productdetails-view.productdetails .vm-product-media-container,
.productdetails.productdetails-view .vm-product-media-container,
.productdetails-view.productdetails .vm-product-details-container,
.productdetails.productdetails-view .vm-product-details-container {
width: 100% !important;
max-width: none;
padding: 0;
}
.productdetails-view.productdetails .vm-product-details-container,
.productdetails.productdetails-view .vm-product-details-container {
margin-top: 14px !important;
}
.productdetails-view.productdetails .main-image,
.productdetails.productdetails-view .main-image {
min-height: 300px;
}
.productdetails-view.productdetails .main-image img,
.productdetails.productdetails-view .main-image img {
max-width: 300px !important;
max-height: 300px !important;
}
}
/* VM6_PRODUCTDETAILS_FULLWIDTH_v235
Only the VirtueMart product-detail page uses the full 980px template width.
Other pages keep their historical 666px content + right sidebar layout. */
#contentfull.vm-productdetails-fullwidth {
float: none;
width: 980px;
}
#contentfull.vm-productdetails-fullwidth #post {
width: 100%;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view {
width: 100%;
box-sizing: border-box;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .vm-product-container,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .vm-product-container {
gap: 30px;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .vm-product-media-container,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .vm-product-media-container {
flex-basis: 44%;
width: 44% !important;
max-width: 440px;
padding-right: 10px;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .vm-product-details-container,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .vm-product-details-container {
padding-left: 10px;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .main-image,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .main-image {
min-height: 410px;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .main-image img,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .main-image img {
max-width: 420px !important;
max-height: 420px !important;
}
@media (max-width: 1000px) {
#contentfull.vm-productdetails-fullwidth {
width: 100%;
}
}
@media (max-width: 760px) {
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .vm-product-media-container,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .vm-product-media-container {
width: 100% !important;
max-width: none;
padding-right: 0;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .main-image,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .main-image {
min-height: 300px;
}
#contentfull.vm-productdetails-fullwidth .productdetails-view.productdetails .main-image img,
#contentfull.vm-productdetails-fullwidth .productdetails.productdetails-view .main-image img {
max-width: 300px !important;
max-height: 300px !important;
}
}
/* VM6_COMPACT_HEADER_CART_v236
The VirtueMart cart stays inside the 100px header. Long product names
never alter the header height and therefore cannot move the six-cell menu. */
#header {
position: relative;
}
#header #headerbanner {
position: absolute;
top: 21px;
right: 0;
float: none;
width: 468px;
height: 66px;
max-height: 66px;
margin: 0;
padding: 0;
overflow: hidden;
text-align: right;
background: url(../images/whitetrans.png);
box-sizing: border-box;
}
#header #headerbanner .moduletable,
#header #headerbanner .module,
#header #headerbanner .moduletable_karzina {
width: 100%;
height: 66px;
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
#header #headerbanner h3 {
height: 17px;
margin: 0 8px 0 0;
padding: 0;
overflow: hidden;
font-size: 1.05em;
line-height: 17px;
white-space: nowrap;
}
#header #headerbanner .vmCartModule {
position: relative;
width: 100%;
height: 42px;
max-height: 42px;
margin: 0;
padding: 0 7px;
overflow: hidden;
line-height: 18px;
box-sizing: border-box;
}
/* There may be several cart rows. The header always shows a single compact row. */
#header #headerbanner .vm_cart_products {
float: left;
width: 285px;
height: 18px;
margin: 0;
padding: 0;
overflow: hidden;
text-align: left;
}
#header #headerbanner .vm_cart_products .vmcontainer {
margin: 0;
padding: 0;
}
#header #headerbanner .vm_cart_products .product_row {
height: 18px;
margin: 0;
padding: 0;
overflow: hidden;
line-height: 18px;
white-space: nowrap;
}
#header #headerbanner .vm_cart_products .quantity {
display: inline-block;
vertical-align: top;
}
#header #headerbanner .vm_cart_products .product_name {
display: inline-block;
max-width: 240px;
overflow: hidden;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
}
#header #headerbanner .vm_cart_products .customProductData,
#header #headerbanner .vm_cart_products br {
display: none !important;
}
#header #headerbanner .total {
float: right !important;
max-width: 160px;
height: 18px;
margin: 0;
padding: 0;
overflow: hidden;
line-height: 18px;
white-space: nowrap;
}
#header #headerbanner .total_products {
float: left;
clear: left;
height: 18px;
margin: 0;
padding: 0;
overflow: hidden;
line-height: 18px;
white-space: nowrap;
}
#header #headerbanner .show_cart {
float: right;
clear: right;
height: 18px;
margin: 0;
padding: 0;
line-height: 18px;
white-space: nowrap;
}
#header #headerbanner .show_cart a.details {
float: none !important;
margin: 0;
padding: 0;
}
#header #headerbanner .payments-signin-button,
#header #headerbanner noscript {
display: none !important;
}
/* The menu strip remains physically fixed below the header in all cart states. */
#catnav.legacy-vm-catnav {
clear: both;
}
@media (max-width: 700px) {
#header {
height: auto;
min-height: 130px;
}
#header #headerbanner {
top: 73px;
width: 100%;
max-width: 468px;
}
#header #headerbanner .vm_cart_products {
width: 62%;
}
#header #headerbanner .vm_cart_products .product_name {
max-width: 78%;
}
#header #headerbanner .total {
max-width: 35%;
}
}
/* VM6_FOOTER_SEPARATOR_AFTER_SECOND_ROW_v237
The old separator used a negative top margin from the one-row footer.
The second footer row now gets its own space and the separator stays below it. */
#Nemu.footer-second-row {
clear: both;
margin-bottom: 18px;
}
#cherta {
clear: both;
margin-top: 0 !important;
margin-bottom: 0;
}
/* VM6_HORIZONTAL_BREADCRUMBS_v239
Breadcrumbs are a compact horizontal route, not a vertical module list. */
#aboveContentLine.above-content-line {
width: 100%;
margin: 0 0 10px;
padding: 0;
clear: both;
box-sizing: border-box;
}
#aboveContentLine.above-content-line .moduletable {
margin: 0;
padding: 7px 12px;
background: url(../images/blacktrans.png);
border: 1px solid #285b8c;
border-radius: 12px;
box-shadow: inset 0 0 7px rgba(7, 27, 51, 0.45);
box-sizing: border-box;
}
/* The module heading only repeats what the chain already tells the visitor. */
#aboveContentLine.above-content-line .moduletable > h3 {
display: none;
}
#aboveContentLine.above-content-line nav,
#aboveContentLine.above-content-line .breadcrumb,
#aboveContentLine.above-content-line ol.mod-breadcrumbs,
#aboveContentLine.above-content-line ul.mod-breadcrumbs {
width: auto;
min-height: 18px;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-flow: row wrap !important;
align-items: center;
gap: 0;
list-style: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#aboveContentLine.above-content-line .breadcrumb > li,
#aboveContentLine.above-content-line ol.mod-breadcrumbs > li,
#aboveContentLine.above-content-line ul.mod-breadcrumbs > li {
float: none !important;
width: auto !important;
min-width: 0;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center;
color: #b9d7ec;
font-size: 12px;
line-height: 18px;
list-style: none !important;
background: none !important;
}
#aboveContentLine.above-content-line .breadcrumb > li.divider,
#aboveContentLine.above-content-line ol.mod-breadcrumbs > li.divider,
#aboveContentLine.above-content-line ul.mod-breadcrumbs > li.divider {
display: none !important;
}
/* Joomla variants with separate separator elements use their own divider. */
#aboveContentLine.above-content-line .breadcrumb > li:not(.divider):not(:last-child)::after,
#aboveContentLine.above-content-line ol.mod-breadcrumbs > li:not(.divider):not(:last-child)::after,
#aboveContentLine.above-content-line ul.mod-breadcrumbs > li:not(.divider):not(:last-child)::after {
content: "\203A";
margin: 0 8px;
color: #6ea8d8;
font-size: 16px;
font-weight: normal;
line-height: 18px;
}
#aboveContentLine.above-content-line .breadcrumb a,
#aboveContentLine.above-content-line ol.mod-breadcrumbs a,
#aboveContentLine.above-content-line ul.mod-breadcrumbs a {
float: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
color: #93ceff;
font-size: 12px;
line-height: 18px;
text-decoration: none;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
white-space: nowrap;
}
#aboveContentLine.above-content-line .breadcrumb a:hover,
#aboveContentLine.above-content-line ol.mod-breadcrumbs a:hover,
#aboveContentLine.above-content-line ul.mod-breadcrumbs a:hover {
color: #c6f0ff;
text-decoration: underline;
}
#aboveContentLine.above-content-line .breadcrumb .active,
#aboveContentLine.above-content-line ol.mod-breadcrumbs .active,
#aboveContentLine.above-content-line ul.mod-breadcrumbs .active {
color: #d8e9f7;
white-space: nowrap;
}
@media (max-width: 700px) {
#aboveContentLine.above-content-line .moduletable {
padding: 6px 9px;
}
#aboveContentLine.above-content-line .breadcrumb > li,
#aboveContentLine.above-content-line ol.mod-breadcrumbs > li,
#aboveContentLine.above-content-line ul.mod-breadcrumbs > li,
#aboveContentLine.above-content-line .breadcrumb a,
#aboveContentLine.above-content-line ol.mod-breadcrumbs a,
#aboveContentLine.above-content-line ul.mod-breadcrumbs a {
font-size: 11px;
}
#aboveContentLine.above-content-line .breadcrumb > li:not(.divider):not(:last-child)::after,
#aboveContentLine.above-content-line ol.mod-breadcrumbs > li:not(.divider):not(:last-child)::after,
#aboveContentLine.above-content-line ul.mod-breadcrumbs > li:not(.divider):not(:last-child)::after {
margin: 0 5px;
}
}
/* VM6_FINAL_PRICE_ONLY_v2311 - only the final payable product price is shown. */
.vm-final-price-only {
margin: 10px 0 8px;
clear: both;
}
.vm-final-price-only .PricesalesPrice.vm-display {
display: inline-block;
color: #f4d875;
font-size: 19px;
font-weight: bold;
line-height: 1.25;
}
.vm-final-price-only .vm-price-desc {
display: inline-block;
margin-right: 7px;
color: #d4e5f2;
font-size: 13px;
font-weight: normal;
}
.vm-final-price-only .PricesalesPrice .PricesalesPrice,
.vm-final-price-only > .PricesalesPrice > .PricesalesPrice {
white-space: nowrap;
}
/* VM6_CATEGORY_PAGINATION_DESIGN_v2312
Fix the ugly vertical category pagination:
start/prev/1/2/next/end become a compact horizontal button row. */
.orderby-displaynumber.vm-catalog-pagination-only {
margin: 0 0 14px;
padding: 9px 12px;
background: url(../images/blacktrans.png);
border: 1px solid #2f6ea6;
border-radius: 16px;
box-shadow: inset 0 0 8px rgba(7, 27, 51, 0.45);
box-sizing: border-box;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination {
float: none !important;
width: 100%;
margin: 0;
padding: 0;
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 10px;
text-align: center;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination,
.orderby-displaynumber .vm-pagination ul.pagination,
.orderby-displaynumber .vm-pagination .pagination {
width: auto;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
list-style: none !important;
background: transparent !important;
border: 0 !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li,
.orderby-displaynumber .vm-pagination ul.pagination li,
.orderby-displaynumber .vm-pagination .pagination li {
float: none !important;
width: auto !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: none !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li a,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li span,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li a,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li span,
.orderby-displaynumber .vm-pagination a.pagenav,
.orderby-displaynumber .vm-pagination span.pagenav,
.orderby-displaynumber .vm-pagination strong {
display: block;
min-width: 18px;
margin: 0 !important;
padding: 6px 10px;
color: #d8edf8;
font-size: 13px;
line-height: 1.1;
text-align: center;
text-decoration: none;
white-space: nowrap;
background: url(../images/blacktrans2.png);
border: 1px solid #4687c2;
border-radius: 14px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.18);
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li a:hover,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li a:hover,
.orderby-displaynumber .vm-pagination a.pagenav:hover {
color: #ffffff;
background: url(../images/blacktrans.png);
border-color: #89c5ff;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li.active span,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li.active span,
.orderby-displaynumber .vm-pagination strong,
.orderby-displaynumber .vm-pagination span.pagenav.current {
color: #b9ff9d;
font-weight: bold;
border-color: #78ca61;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li.disabled span,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li.disabled span,
.orderby-displaynumber .vm-pagination span.pagenav.disabled {
color: #95abc0;
border-color: #496178;
opacity: 0.72;
filter: alpha(opacity=72);
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .vm-page-counter,
.orderby-displaynumber .vm-pagination .vm-page-counter {
flex: 0 0 100%;
margin: 3px 0 0;
color: #c7ddeb;
font-size: 12px;
line-height: 1.2;
text-align: center;
}
@media (max-width: 700px) {
.orderby-displaynumber.vm-catalog-pagination-only {
padding: 8px 8px 9px;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination {
gap: 5px 6px;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination,
.orderby-displaynumber .vm-pagination ul.pagination,
.orderby-displaynumber .vm-pagination .pagination {
gap: 5px;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li a,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination ul.pagination li span,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li a,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .pagination li span,
.orderby-displaynumber .vm-pagination a.pagenav,
.orderby-displaynumber .vm-pagination span.pagenav,
.orderby-displaynumber .vm-pagination strong {
padding: 5px 8px;
font-size: 12px;
}
}
/* VM6_MINIMAL_HORIZONTAL_PAGINATION_v2313
VirtueMart prints a plain UL without a CSS class. Force that actual list
into one minimal horizontal line and cancel the older boxed button rules. */
.orderby-displaynumber.vm-catalog-pagination-only {
clear: both;
width: auto !important;
margin: 2px 0 12px !important;
padding: 0 !important;
text-align: left;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
text-align: left !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul {
width: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
gap: 0 !important;
list-style: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li {
float: none !important;
display: inline !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 11px 0 0 !important;
padding: 0 !important;
list-style: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li > a.pagenav,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li > span.pagenav {
display: inline !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #95cbf3 !important;
font-size: 13px !important;
font-weight: normal !important;
line-height: 1.25 !important;
text-align: left !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li > a.pagenav:hover {
color: #ffffff !important;
text-decoration: underline !important;
background: none !important;
border: 0 !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li > span.pagenav {
color: #b9ff9d !important;
font-weight: bold !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li.pagination-start > span.pagenav,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li.pagination-prev > span.pagenav,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li.pagination-next > span.pagenav,
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul > li.pagination-end > span.pagenav {
color: #7f9bb0 !important;
font-weight: normal !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .vm-page-counter {
display: block !important;
width: auto !important;
margin: 4px 0 0 !important;
padding: 0 !important;
color: #c7ddeb !important;
font-size: 12px !important;
line-height: 1.2 !important;
text-align: left !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* VM6_INLINE_PAGINATION_COUNTER_v2314
Keep "Page 2 of 2" on the same horizontal line as the VM navigation. */
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-content: flex-start !important;
white-space: nowrap !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination > ul {
flex: 0 0 auto !important;
flex-wrap: nowrap !important;
}
.orderby-displaynumber.vm-catalog-pagination-only .vm-pagination .vm-page-counter {
display: inline !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 0 0 13px !important;
padding: 0 !important;
white-space: nowrap !important;
text-align: left !important;
}
/* VM6_CATEGORY_TITLE_SINGLE_BACKGROUND_v2141
Based on v2.3.14: preserve the existing bodybg1 title background, but put it
on one parent block so it covers the whole product-name text continuously. */
.browse-view .product [class*="vm-product-descr-container-"] {
float: left;
width: 100%;
min-height: 80px;
margin: 0;
padding: 7px 10px;
background: url(../images/bodybg1.png) repeat;
box-sizing: border-box;
}
/* The old H2 background is removed only because its parent above now carries
the exact same existing background across all wrapped lines of the title. */
.browse-view .product [class*="vm-product-descr-container-"] h2 {
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-sizing: border-box;
}
/* VM6_CATEGORY_TITLE_BG_STRETCH_TO_CARD_v2142
Keep the original title background, but stretch one image across the whole
title block width of each product card instead of repeating fragments. */
.browse-view .product [class*="vm-product-descr-container-"] {
width: 100% !important;
margin: 0 !important;
padding: 7px 10px !important;
background: url(../images/bodybg1.png) no-repeat !important;
background-size: 100% 100% !important;
box-sizing: border-box !important;
}
.browse-view .product [class*="vm-product-descr-container-"] h2,
.browse-view .product [class*="vm-product-descr-container-"] h2 a {
display: block;
width: 100%;
box-sizing: border-box;
}
/* VM6_RESTORE_CATEGORY_PRODUCTS_v23143
Do not remove VM product groups: some ordinary category items are delivered
through them. Hide only their English headings, never the products below. */
.browse-view > .featured-view > h4,
.browse-view > .latest-view > h4,
.browse-view > .topten-view > h4,
.browse-view > .recent-view > h4,
.browse-view > .discontinued-view > h4,
.browse-view > .products-view > h4,
.browse-view > .product-view > h4 {
display: none !important;
}
/* VM6_CATEGORY_TITLE_BG_70PCT_v23144
One fixed, non-repeating title background at 70% of the product-card width. */
.browse-view .product [class*="vm-product-descr-container-"] {
background: url(../images/bodybg1.png) no-repeat left top !important;
background-size: 70% 100% !important;
}
/* VM6_CATEGORY_TITLE_BG_NATURAL_GRADIENT_v23145
bodybg1.png is a purpose-made left-to-right fade. Keep it at its original
pixel size: one image only, no horizontal repeat and no stretching. */
.browse-view .product [class*="vm-product-descr-container-"] {
background-image: url(../images/bodybg1.png) !important;
background-repeat: no-repeat !important;
background-position: left top !important;
background-size: auto !important;
}
/* VM6_HIDE_CATEGORY_RATINGS_v23146
Hide rating stars and stock mini-icons in product lists only.
Products themselves remain fully rendered and selectable. */
.browse-view .product .vm-product-rating-container,
.featured-view .product .vm-product-rating-container,
.latest-view .product .vm-product-rating-container,
.topten-view .product .vm-product-rating-container,
.recent-view .product .vm-product-rating-container,
.related-products-view .product .vm-product-rating-container {
display: none !important;
}
/* VM6_SIDEBAR_PRODUCTS_OLD_STYLE_v23147
Styles only VM product modules placed in the old right sidebar.
The source image is never stretched; it stays within the old 90 x 90px
thumbnail area. */
#sidebar .side-ad .vmgroup,
#sidebar .side-ad .vm-products-module {
clear: both;
width: 100%;
text-align: center;
}
#sidebar .side-ad ul.vmproduct,
#sidebar .side-ad ul.vm-product-list {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar .side-ad ul.vmproduct > li.product-container,
#sidebar .side-ad ul.vm-product-list > li.product-container {
float: none !important;
clear: both;
width: 100% !important;
min-height: 0;
margin: 0 0 10px !important;
padding: 0 0 10px !important;
list-style: none;
text-align: center;
border-bottom: 1px solid rgba(168, 239, 157, 0.28);
box-sizing: border-box;
}
#sidebar .side-ad ul.vmproduct > li.product-container:last-child,
#sidebar .side-ad ul.vm-product-list > li.product-container:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0;
}
/* Both current VM module layouts: old default and vmbasic-compatible markup. */
#sidebar .side-ad img.featuredProductImage,
#sidebar .side-ad img.vm-products-module-img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 90px !important;
max-height: 90px !important;
margin: 0 auto 7px !important;
padding: 0 !important;
object-fit: contain;
border: 0;
}
#sidebar .side-ad .vmproduct .clear + a,
#sidebar .side-ad .vm-product-title a {
display: block;
color: #afdaff;
font-size: 1.04em;
line-height: 1.25em;
text-decoration: none;
border-bottom: 0;
}
#sidebar .side-ad .vmproduct .clear + a:hover,
#sidebar .side-ad .vm-product-title a:hover {
color: #a8ef9d;
background: none;
border-bottom: 0;
}
#sidebar .side-ad .product-price,
#sidebar .side-ad .vm-simple-price-display {
display: block;
margin: 5px 0 4px;
color: #ffffff;
font-size: 1.05em;
font-weight: normal;
}
#sidebar .side-ad .product-price .PricebasePrice,
#sidebar .side-ad .product-price .PricebasePriceWithTax,
#sidebar .side-ad .product-price .PricediscountAmount,
#sidebar .side-ad .product-price .PricetaxAmount {
display: none !important;
}
#sidebar .side-ad .addtocart-area {
margin: 6px auto 0;
}
#sidebar .side-ad .quantity-input {
width: 28px !important;
min-width: 28px !important;
padding: 2px !important;
text-align: center;
}
#sidebar .side-ad .addtocart-button input,
#sidebar .side-ad input.addtocart-button {
max-width: 150px;
padding: 3px 7px;
font-size: 0.95em;
}
/* VM6_SIDEBAR_MODULES_MATCH_OLD_LAYOUT_v23148
Rebuild the two right VM product modules to match the archived old page.
Applies only to sidebarMiddle/sidebarBottom wrappers made in index.php. */
#sidebar .side-ad-promotions .vm-sidebar-product-module,
#sidebar .side-ad-random .vm-sidebar-product-module {
background: url(../images/blacktrans.png) !important;
border-radius: 20px;
padding: 10px !important;
margin: 0 0 15px !important;
box-sizing: border-box;
overflow: hidden;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3,
#sidebar .side-ad-random .vm-sidebar-product-module > h3 {
display: block !important;
margin: 0 0 10px !important;
padding: 5px 10px !important;
background: url(../images/blacktrans.png) !important;
border-radius: 20px;
color: #ffffff;
font-size: 1.4em !important;
font-weight: normal;
line-height: 1.3em;
text-align: center;
}
#sidebar .side-ad-promotions .vmgroup,
#sidebar .side-ad-random .vmgroup {
clear: both;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#sidebar .side-ad-promotions ul.vmproduct,
#sidebar .side-ad-random ul.vmproduct {
width: 100%;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
#sidebar .side-ad-promotions ul.vmproduct.productdetails,
#sidebar .side-ad-random ul.vmproduct.productdetails {
display: block !important;
}
#sidebar .side-ad-promotions ul.vmproduct > li.product-container,
#sidebar .side-ad-random ul.vmproduct > li.product-container {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 10px !important;
list-style: none;
text-align: center;
box-sizing: border-box;
}
#sidebar .side-ad-promotions ul.vmproduct > li.product-container + li.product-container,
#sidebar .side-ad-random ul.vmproduct > li.product-container + li.product-container {
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(168, 239, 157, 0.28);
}
/* VM5 emits large original-image dimensions in the HTML. Create the same
fixed 90 x 90 thumbnail window used by the old VirtueMart module. */
#sidebar .side-ad-promotions ul.vmproduct > li.product-container > a:first-child,
#sidebar .side-ad-random ul.vmproduct > li.product-container > a:first-child {
display: flex !important;
width: 90px !important;
height: 90px !important;
margin: 0 auto 7px !important;
padding: 0 !important;
align-items: center;
justify-content: center;
overflow: hidden;
background: transparent;
border: 0 !important;
}
#sidebar .side-ad-promotions ul.vmproduct > li.product-container > a:first-child img,
#sidebar .side-ad-random ul.vmproduct > li.product-container > a:first-child img,
#sidebar .side-ad-promotions img.featuredProductImage,
#sidebar .side-ad-random img.featuredProductImage {
display: block !important;
width: 90px !important;
height: 90px !important;
max-width: 90px !important;
max-height: 90px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
border: 0 !important;
box-sizing: border-box;
}
/* Product title in exactly the old compact centred sidebar rhythm. */
#sidebar .side-ad-promotions ul.vmproduct > li.product-container > .clear + a,
#sidebar .side-ad-random ul.vmproduct > li.product-container > .clear + a {
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
color: #afdaff !important;
font-size: 1em !important;
line-height: 1.35em !important;
text-align: center;
text-decoration: none;
border-bottom: 0 !important;
}
#sidebar .side-ad-promotions ul.vmproduct > li.product-container > .clear + a:hover,
#sidebar .side-ad-random ul.vmproduct > li.product-container > .clear + a:hover {
color: #a8ef9d !important;
background: none !important;
border-bottom: 0 !important;
}
/* Price under the title; hide VM auxiliary prices as in the old one-price block. */
#sidebar .side-ad-promotions .productdetails,
#sidebar .side-ad-random .productdetails {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
#sidebar .side-ad-promotions .product-price,
#sidebar .side-ad-random .product-price {
display: block !important;
margin: 4px 0 5px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 1.04em !important;
line-height: 1.3em;
text-align: center;
}
#sidebar .side-ad-promotions .PricebasePrice,
#sidebar .side-ad-promotions .PricebasePriceWithTax,
#sidebar .side-ad-promotions .PricediscountAmount,
#sidebar .side-ad-promotions .PricetaxAmount,
#sidebar .side-ad-random .PricebasePrice,
#sidebar .side-ad-random .PricebasePriceWithTax,
#sidebar .side-ad-random .PricediscountAmount,
#sidebar .side-ad-random .PricetaxAmount {
display: none !important;
}
/* Current VM5 markup uses Bootstrap rows and a button. Map it to the
old VM 2 sidebar layout: quantity on the left, 152px green button right. */
#sidebar .side-ad-promotions .addtocart-area,
#sidebar .side-ad-random .addtocart-area {
display: block !important;
margin: 5px 0 0 !important;
padding: 0 !important;
}
#sidebar .side-ad-promotions .addtocart-area form.product,
#sidebar .side-ad-random .addtocart-area form.product {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
#sidebar .side-ad-promotions .addtocart-bar,
#sidebar .side-ad-random .addtocart-bar {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
#sidebar .side-ad-promotions .addtocart-bar > .row,
#sidebar .side-ad-random .addtocart-bar > .row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: center;
width: 100%;
margin: 0 !important;
}
#sidebar .side-ad-promotions .addtocart-bar > .row > .col-auto,
#sidebar .side-ad-random .addtocart-bar > .row > .col-auto {
flex: 0 0 56px !important;
width: 56px !important;
max-width: 56px !important;
padding: 0 !important;
}
#sidebar .side-ad-promotions .quantity-box,
#sidebar .side-ad-random .quantity-box {
display: flex !important;
width: 56px !important;
min-width: 56px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
#sidebar .side-ad-promotions .quantity-box .quantity-input,
#sidebar .side-ad-random .quantity-box .quantity-input {
order: 1;
width: 28px !important;
min-width: 28px !important;
height: 26px !important;
margin: 0 2px !important;
padding: 3px !important;
color: #777777 !important;
font-size: 12px !important;
line-height: 18px;
text-align: center;
background: url(/components/com_virtuemart/assets/images/vmgeneral/backgrounds.png) center top repeat-x #e8e8e8 !important;
border: 1px solid #cac9c9 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
#sidebar .side-ad-promotions .quantity-box button.quantity-controls,
#sidebar .side-ad-random .quantity-box button.quantity-controls {
display: block !important;
width: 12px !important;
min-width: 12px !important;
height: 26px !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden;
}
#sidebar .side-ad-promotions .quantity-box button.quantity-controls svg,
#sidebar .side-ad-random .quantity-box button.quantity-controls svg {
width: 12px !important;
height: 12px !important;
vertical-align: middle;
}
/* Exact dimensions, green edge, background sprite and text rhythm from the old
VM button rule: span.addtocart-button input.addtocart-button. */
#sidebar .side-ad-promotions .vm-addtocart-button-col,
#sidebar .side-ad-random .vm-addtocart-button-col {
flex: 0 0 162px !important;
width: 162px !important;
max-width: 162px !important;
padding: 0 0 0 10px !important;
}
#sidebar .side-ad-promotions .vm-addtocart-button-wrapper,
#sidebar .side-ad-random .vm-addtocart-button-wrapper {
display: block !important;
width: 152px !important;
margin: 0 !important;
}
#sidebar .side-ad-promotions button.addtocart-button,
#sidebar .side-ad-random button.addtocart-button {
display: block !important;
width: 152px !important;
min-width: 152px !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 4px 5px !important;
color: #ffffff !important;
background: url(/components/com_virtuemart/assets/images/vmgeneral/backgrounds.png) 0 -160px repeat-x #e8e8e8 !important;
border: 1px solid #00a000 !important;
border-radius: 4px !important;
box-shadow: none !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 22px !important;
letter-spacing: 1px !important;
text-align: center !important;
text-decoration: none !important;
text-shadow: none !important;
white-space: nowrap !important;
cursor: pointer;
}
#sidebar .side-ad-promotions button.addtocart-button:hover,
#sidebar .side-ad-random button.addtocart-button:hover {
color: #ffffff !important;
filter: brightness(1.08);
}
/* VM6_SINGLE_ADD_TO_CART_BUTTON_v23149
Catalogue cards and the two right VM modules sell one item per click.
Quantity remains in the HTML as value=1 for VirtueMart, but its +/-/1 UI
is removed. No product or cart logic is changed. */
/* Category listing: hide only the quantity column. */
.browse-view .product .addtocart-bar > .row > .col-auto,
.browse-view .product .addtocart-bar .quantity-box,
.browse-view .product .addtocart-bar .quantity-controls,
.browse-view .product .addtocart-bar .quantity_box {
display: none !important;
}
/* Sidebar promotion/random modules: hide the same VM5 quantity controls. */
#sidebar .side-ad-promotions .addtocart-bar > .row > .col-auto,
#sidebar .side-ad-random .addtocart-bar > .row > .col-auto,
#sidebar .side-ad-promotions .addtocart-bar .quantity-box,
#sidebar .side-ad-random .addtocart-bar .quantity-box,
#sidebar .side-ad-promotions .addtocart-bar .quantity-controls,
#sidebar .side-ad-random .addtocart-bar .quantity-controls,
#sidebar .side-ad-promotions .addtocart-bar .quantity_box,
#sidebar .side-ad-random .addtocart-bar .quantity_box {
display: none !important;
}
/* Let the remaining button occupy the complete action row. */
.browse-view .product .addtocart-bar > .row > .vm-addtocart-button-col,
#sidebar .side-ad-promotions .addtocart-bar > .row > .vm-addtocart-button-col,
#sidebar .side-ad-random .addtocart-bar > .row > .vm-addtocart-button-col {
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.browse-view .product .vm-addtocart-button-wrapper,
#sidebar .side-ad-promotions .vm-addtocart-button-wrapper,
#sidebar .side-ad-random .vm-addtocart-button-wrapper {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Keep the restored old-shop green button, but centre it as the only control. */
.browse-view .product button.addtocart-button,
#sidebar .side-ad-promotions button.addtocart-button,
#sidebar .side-ad-random button.addtocart-button {
display: block !important;
width: 152px !important;
min-width: 152px !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 auto !important;
padding: 4px 5px !important;
white-space: nowrap !important;
}
/* VM6_CATEGORY_ADD_TO_CART_OLD_STYLE_v231410
The catalogue card uses the same original VirtueMart green add-to-cart
button as the archived old store and the rebuilt right-hand modules. */
.browse-view .product button.addtocart-button {
display: block !important;
width: 152px !important;
min-width: 152px !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 auto !important;
padding: 4px 5px !important;
color: #ffffff !important;
background: url(/components/com_virtuemart/assets/images/vmgeneral/backgrounds.png) 0 -160px repeat-x #e8e8e8 !important;
border: 1px solid #00a000 !important;
border-radius: 4px !important;
box-shadow: none !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 22px !important;
letter-spacing: 1px !important;
text-align: center !important;
text-decoration: none !important;
text-shadow: none !important;
white-space: nowrap !important;
cursor: pointer !important;
}
.browse-view .product button.addtocart-button:hover,
.browse-view .product button.addtocart-button:focus {
color: #ffffff !important;
background-position: 0 -160px !important;
filter: brightness(1.08);
outline: none !important;
}
/* VM6_CATEGORY_CARDS_SAME_AS_RANDOM_BG_v231411
Catalogue product cards use the same old blacktrans.png panel as the
sidebar "Random products" module. Layout and controls stay unchanged. */
.browse-view .product .spacer.product-container {
background: url(../images/blacktrans.png) !important;
border-radius: 20px !important;
padding: 10px !important;
box-sizing: border-box !important;
overflow: hidden;
}
/* VM6_CATEGORY_TITLE_SEPARATE_LIGHT_PANEL_v231412
Keep the black product-card panel, but restore the title area as its own
original light bodybg1.png panel. The PNG fade ends on a light surface,
not on the black card background. */
.browse-view .product [class*="vm-product-descr-container-"] {
background-color: #ffffff !important;
background-image: url(../images/bodybg1.png) !important;
background-repeat: no-repeat !important;
background-position: left top !important;
background-size: auto !important;
}
/* VM6_CATEGORY_PRICE_ACTIONS_LIGHT_PANEL_v231413
The black panel is for the product image only. Price, add-to-cart and
details below the title are restored on a separate light surface. */
.browse-view .product .vm3pr-0,
.browse-view .product [class^="vm3pr-"],
.browse-view .product .addtocart-area,
.browse-view .product .vm-details-button {
background-color: #ffffff !important;
}
/* Fill the whole lower card width, including the black-card inner padding. */
.browse-view .product [class^="vm3pr-"],
.browse-view .product .addtocart-area,
.browse-view .product .vm-details-button {
width: calc(100% + 20px) !important;
margin-left: -10px !important;
margin-right: -10px !important;
box-sizing: border-box !important;
}
/* Compact, continuous white section under the title. */
.browse-view .product [class^="vm3pr-"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 4px 10px 0 !important;
}
.browse-view .product .addtocart-area {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 6px 10px 4px !important;
}
.browse-view .product .vm-details-button {
margin-top: 0 !important;
margin-bottom: -10px !important;
padding: 3px 10px 10px !important;
}
/* Keep pricing and details readable on the restored light lower panel. */
.browse-view .product .product-price,
.browse-view .product .PricesalesPrice,
.browse-view .product .vm-details-button a {
color: #1f65b5 !important;
}
/* VM6_CATEGORY_LOWER_BODYBG1_GRADIENT_v231414
Price, add-to-cart and details use the same original bodybg1.png fade as
the title: colour at the left, then a smooth transition to transparent. */
.browse-view .product [class^="vm3pr-"],
.browse-view .product .addtocart-area,
.browse-view .product .vm-details-button {
background-color: #ffffff !important;
background-image: url(../images/bodybg1.png) !important;
background-repeat: no-repeat !important;
background-position: left top !important;
background-size: auto !important;
}
/* VM6_CATEGORY_ADDTOCART_BUTTON_UP_10PX_v231415
Move only the "Add to cart" button in category cards 10px upward. */
.browse-view .product .vm-addtocart-button-wrapper {
margin-top: -10px !important;
}
/* VM6_CATEGORY_ADDTOCART_BUTTON_UP_20PX_GAP20_v231416
Category cards: raise the add-to-cart button 20px in total and keep
a clean 20px gap to the next product card. */
.browse-view .product .vm-addtocart-button-wrapper {
margin-top: -20px !important;
}
.browse-view .product {
margin-bottom: 20px !important;
}
/* VM6_CATEGORY_ADDTOCART_OVERLAY_10PX_GAP30_v231417
Category cards: the add-to-cart button overlaps the box above by 10px
without shifting the layout, and the gap between product cards is 30px. */
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -10px !important;
margin-top: 0 !important;
z-index: 2;
}
.browse-view .product {
margin-bottom: 30px !important;
}
/* VM6_CATEGORY_BUTTON_AND_DETAILS_BOX_30PX_v231418
Category cards: reduce the add-to-cart box and the details box to 30px. */
.browse-view .product .addtocart-area {
min-height: 30px !important;
height: 30px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
.browse-view .product button.addtocart-button {
height: 30px !important;
min-height: 30px !important;
line-height: 18px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
.browse-view .product .vm-details-button {
min-height: 30px !important;
height: 30px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 30px !important;
overflow: hidden !important;
}
.browse-view .product .vm-details-button a {
display: block !important;
height: 30px !important;
line-height: 30px !important;
}
/* VM6_CATEGORY_DETAILS_BOTTOM_30_ADDCART_NO_VERTICAL_PADDING_v231419
Category cards:
- Add-to-cart area has no vertical padding.
- Details has no top padding and 30px bottom padding.
Previous fixed 30px heights are released so these spacings can apply. */
.browse-view .product .addtocart-area {
min-height: 0 !important;
height: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.browse-view .product .vm-details-button {
min-height: 0 !important;
height: auto !important;
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 30px !important;
line-height: normal !important;
overflow: visible !important;
}
.browse-view .product .vm-details-button a {
height: auto !important;
line-height: normal !important;
}
/* VM6_DETAILS_LIGHT_ADDTOCART_MINUS30_v231420
Fix two category-card regressions:
1) the "Details" box must use the light bodybg1.png fade, not black;
2) the add-to-cart button must visually overlap upward into the price box
by 30px. */
.browse-view .product .vm-details-button {
background-color: #ffffff !important;
background-image: url(../images/bodybg1.png) !important;
background-repeat: no-repeat !important;
background-position: left top !important;
background-size: auto !important;
}
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -30px !important;
margin-top: 0 !important;
z-index: 3;
}
/* VM6_DETAILS_LIGHT_ADDTOCART_MINUS50_v231421
Category cards:
- move add-to-cart button further upward into the price box (-50px);
- force the "Details" strip and its bottom spacing to stay on the light
bodybg1.png fade rather than showing the black card background. */
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -50px !important;
margin-top: 0 !important;
z-index: 3;
}
.browse-view .product .vm-details-button,
.browse-view .product .vm-details-button a {
background-color: #ffffff !important;
background-image: url(../images/bodybg1.png) !important;
background-repeat: no-repeat !important;
background-position: left top !important;
background-size: auto 100% !important;
}
.browse-view .product .vm-details-button {
display: block !important;
padding-top: 0 !important;
padding-bottom: 30px !important;
overflow: visible !important;
}
.browse-view .product .vm-details-button a {
display: block !important;
}
/* VM6_REMOVE_BLACK_STRIP_ABOVE_DETAILS_ADDTOCART_MINUS80_v231422
The black strip above "Details" was the 10px bottom padding of the
blacktrans product-container. Details is outside that container, so its
own gradient could not cover this strip. Remove only that bottom padding.
The add-to-cart button visually overlaps the price box by 80px. */
.browse-view .product .spacer.product-container {
padding-bottom: 0 !important;
}
.browse-view .product .vm-details-button {
background: #ffffff url(../images/bodybg1.png) no-repeat left top !important;
background-size: auto 100% !important;
}
.browse-view .product .vm-details-button a {
background: transparent !important;
}
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -80px !important;
margin-top: 0 !important;
z-index: 3;
}
/* VM6_TEST_HIDE_DETAILS_ADDTOCART_MINUS70_v231423
Temporary diagnostic test:
hide the complete Details block to verify whether the dark strip belongs
to it or to the preceding product-card layers.
Add-to-cart overlays the price area by 70px. */
.browse-view .product .vm-details-button {
display: none !important;
}
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -70px !important;
margin-top: 0 !important;
z-index: 3;
}
/* VM6_RESTORE_DETAILS_INSIDE_CONTAINER_PHOTO_PLUS30_v231425
Verified markup order in products.php:
add-to-cart -> vm-details-button -> closing .spacer.product-container.
Details is already inside the main card container, so it is restored from
the temporary diagnostic hide rule without moving PHP markup.
The product image block itself is increased by 30px:
desktop 190px -> 220px, mobile 150px -> 180px.
*/
.browse-view .product .vm-details-button {
display: block !important;
}
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -70px !important;
margin-top: 0 !important;
z-index: 3;
}
.browse-view .product .vm-product-media-container,
.featured-view .product .vm-product-media-container,
.latest-view .product .vm-product-media-container,
.topten-view .product .vm-product-media-container,
.recent-view .product .vm-product-media-container,
.related-products-view .product .vm-product-media-container {
height: 220px !important;
}
@media (max-width: 700px) {
.browse-view .product .vm-product-media-container,
.featured-view .product .vm-product-media-container,
.latest-view .product .vm-product-media-container,
.topten-view .product .vm-product-media-container,
.recent-view .product .vm-product-media-container,
.related-products-view .product .vm-product-media-container {
height: 180px !important;
}
}
/* VM6_CATEGORY_IMAGE_FILL_ENLARGED_PHOTO_AREA_v231426
The photo box is already 220px high, but the image itself was still
limited to the former 180px maximum. Fill the enlarged photo area with
the image itself, rather than leaving a 30px empty strip. */
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
width: 100% !important;
height: 220px !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
}
@media (max-width: 700px) {
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
height: 180px !important;
}
}
/* VM6_CATEGORY_IMAGE_HEIGHT_FILL_DETAILS_MINUS30_v231427
Image must fill the enlarged photo area by HEIGHT, preserving its natural
aspect ratio. Do not force width:100%. Existing photo box clips only any
horizontal excess.
Details remains in .spacer.product-container and is lifted 30px visually
into the preceding card area. The matching negative bottom margin removes
the old empty flow space left by the visual lift. */
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
width: auto !important;
height: 220px !important;
max-width: none !important;
max-height: none !important;
object-fit: initial !important;
}
.browse-view .product .vm-details-button {
position: relative !important;
top: -30px !important;
margin-bottom: -30px !important;
z-index: 2;
}
@media (max-width: 700px) {
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
width: auto !important;
height: 180px !important;
}
}
/* VM6_CATEGORY_PHOTO_PLUS30_CART_DETAILS_MINUS60_v231428
Category cards:
- photo area: 220px -> 250px;
- image is scaled by height, preserving aspect ratio;
- add-to-cart and Details visually overlap upward by 60px. */
.browse-view .product .vm-product-media-container,
.featured-view .product .vm-product-media-container,
.latest-view .product .vm-product-media-container,
.topten-view .product .vm-product-media-container,
.recent-view .product .vm-product-media-container,
.related-products-view .product .vm-product-media-container {
height: 250px !important;
}
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
width: auto !important;
height: 250px !important;
max-width: none !important;
max-height: none !important;
object-fit: initial !important;
}
.browse-view .product .vm-addtocart-button-wrapper {
position: relative !important;
top: -60px !important;
margin-top: 0 !important;
z-index: 3;
}
.browse-view .product .vm-details-button {
position: relative !important;
top: -60px !important;
margin-bottom: -60px !important;
z-index: 2;
}
@media (max-width: 700px) {
.browse-view .product .vm-product-media-container,
.featured-view .product .vm-product-media-container,
.latest-view .product .vm-product-media-container,
.topten-view .product .vm-product-media-container,
.recent-view .product .vm-product-media-container,
.related-products-view .product .vm-product-media-container {
height: 210px !important;
}
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage,
.featured-view .product .vm-product-media-container img,
.latest-view .product .vm-product-media-container img,
.topten-view .product .vm-product-media-container img,
.recent-view .product .vm-product-media-container img,
.related-products-view .product .vm-product-media-container img {
width: auto !important;
height: 210px !important;
}
}
/* VM6_CATEGORY_DETAILS_MINUS90_v231429
Category-card Details visual top offset: -90px.
Matching bottom compensation removes the old flow space. */
.browse-view .product .vm-details-button {
top: -90px !important;
margin-bottom: -90px !important;
}
/* VM6_HIDE_DETAILS_STYLE_BOTTOM_PAGINATION_v231430
- Details link is intentionally disabled for category cards.
- Bottom pagination receives the exact same wrapper/classes as the approved
top pagination, so its existing design rules apply there too. */
.browse-view .product .vm-details-button {
display: none !important;
}
.orderby-displaynumber.vm-catalog-pagination-only.vm-catalog-pagination-bottom {
margin: 14px 0 0 !important;
}
/* VM6_RESTORE_DETAILS_NO_OWN_BACKGROUND_v231431
Restore the Details link after the temporary hide.
Remove only its own background layer: the container and link are transparent.
Existing visual position (-90px) is left unchanged. */
.browse-view .product .vm-details-button {
display: block !important;
background: transparent !important;
background-image: none !important;
}
.browse-view .product .vm-details-button a,
.browse-view .product .vm-details-button a.product-details {
background: transparent !important;
background-image: none !important;
}
/* VM6_CATEGORY_DETAILS_MINUS85_v231432
Category-card Details visual top offset: -85px.
Matching bottom compensation removes the old flow space. */
.browse-view .product .vm-details-button {
top: -85px !important;
margin-bottom: -85px !important;
}
/* VM6_CATEGORY_IMAGE_PLUS20_VERTICAL_CENTER_v231433
Only the image inside category photo cards is enlarged:
250px -> 270px. The photo box remains 250px high.
The existing flex wrapper is explicitly kept vertically centered, so the
20px excess is clipped equally: 10px at the top and 10px at the bottom. */
.browse-view .product .vm-product-media-container,
.browse-view .product .vm-product-media-container > a {
align-items: center !important;
justify-content: center !important;
}
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage {
width: auto !important;
height: 270px !important;
max-width: none !important;
max-height: none !important;
object-fit: initial !important;
}
@media (max-width: 700px) {
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage {
width: auto !important;
height: 230px !important;
}
}
/* VM6_CATEGORY_IMAGE_TOP_OFFSET_PLUS5_v231434
Keep the existing 270px image scale and vertical centering baseline,
then shift only the image itself 5px downward inside the fixed photo box. */
.browse-view .product .vm-product-media-container img,
.browse-view .product img.browseProductImage {
position: relative !important;
top: 5px !important;
}
/* VM6_CATALOG_LEGACY_STYLE_SECOND_LEVEL_v231513
The first dropdown keeps the original legacy black-translucent pill design.
Only a nested list gets a position to the right of its parent item. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > ul.menu_VMmenu {
display: none !important;
position: absolute !important;
top: -5px !important;
left: 100% !important;
width: 240px !important;
margin: 0 !important;
padding: 5px 0 0 !important;
z-index: 1001 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li:hover > ul.menu_VMmenu,
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li:focus-within > ul.menu_VMmenu {
display: block !important;
}
/* Keep the original dropdown item appearance: no new backgrounds, panels,
borders, rounded cards or font overrides are introduced here. */
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > ul.menu_VMmenu {
top: 100% !important;
left: 0 !important;
z-index: 1002 !important;
}
}
/* VM6_RECENT_SIDEBAR_COMPACT_231516
The recently viewed module is intentionally more compact than promotions.
It is never shown together with promotions; template PHP selects one module
before either VirtueMart instance executes. */
#sidebar .side-ad-recent .vm-sidebar-product-module {
background: url(../images/blacktrans.png) !important;
border-radius: 20px;
padding: 10px !important;
margin: 0 0 15px !important;
box-sizing: border-box;
overflow: hidden;
}
#sidebar .side-ad-recent .vm-sidebar-product-module > h3 {
display: block !important;
margin: 0 0 8px !important;
padding: 5px 9px !important;
background: url(../images/blacktrans.png) !important;
border-radius: 20px;
color: #ffffff;
font-size: 1.2em !important;
font-weight: normal;
line-height: 1.25em;
text-align: center;
}
#sidebar .side-ad-recent .vmgroup,
#sidebar .side-ad-recent ul.vmproduct {
width: 100%;
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
#sidebar .side-ad-recent ul.vmproduct.productdetails {
display: block !important;
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container {
display: block !important;
float: none !important;
clear: both !important;
min-height: 60px !important;
margin: 0 !important;
padding: 6px 0 !important;
overflow: hidden;
list-style: none;
text-align: left;
box-sizing: border-box;
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container + li.product-container {
border-top: 1px solid rgba(168, 239, 157, 0.28);
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container > a:first-child {
display: flex !important;
float: left !important;
width: 58px !important;
height: 58px !important;
margin: 0 8px 2px 0 !important;
padding: 0 !important;
align-items: center;
justify-content: center;
overflow: hidden;
border: 0 !important;
background: transparent;
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container > a:first-child img,
#sidebar .side-ad-recent img.featuredProductImage {
display: block !important;
width: 58px !important;
height: 58px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 58px !important;
max-height: 58px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
border: 0 !important;
box-sizing: border-box;
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container > .clear {
display: none !important;
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container > .clear + a {
display: block !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #afdaff !important;
font-size: 0.9em !important;
line-height: 1.2em !important;
text-align: left;
text-decoration: none;
border: 0 !important;
}
#sidebar .side-ad-recent ul.vmproduct > li.product-container > .clear + a:hover {
color: #a8ef9d !important;
background: none !important;
}
#sidebar .side-ad-recent .productdetails,
#sidebar .side-ad-recent .product-price {
display: block !important;
margin: 3px 0 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 0.92em !important;
line-height: 1.15em;
text-align: left;
}
#sidebar .side-ad-recent .PricebasePrice,
#sidebar .side-ad-recent .PricebasePriceWithTax,
#sidebar .side-ad-recent .PricediscountAmount,
#sidebar .side-ad-recent .PricetaxAmount,
#sidebar .side-ad-recent .addtocart-area {
display: none !important;
}
/* VM6_INLINE_PRODUCT_GALLERY_NO_POPUP_231518
Product thumbnails now swap the large image in-place. They intentionally do
not use VirtueMart's old Fancybox modal links. */
.productdetails-view .main-image.vm-inline-gallery-main,
.productdetails .main-image.vm-inline-gallery-main {
cursor: default;
}
.productdetails-view .additional-images .vm-inline-gallery-thumb-wrap,
.productdetails .additional-images .vm-inline-gallery-thumb-wrap {
overflow: visible;
}
.productdetails-view .additional-images .vm-inline-gallery-thumb,
.productdetails .additional-images .vm-inline-gallery-thumb {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 0;
padding: 2px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
}
.productdetails-view .additional-images .vm-inline-gallery-thumb:hover,
.productdetails .additional-images .vm-inline-gallery-thumb:hover,
.productdetails-view .additional-images .vm-inline-gallery-thumb:focus-visible,
.productdetails .additional-images .vm-inline-gallery-thumb:focus-visible {
border-color: #5797c9;
outline: none;
}
.productdetails-view .additional-images .vm-inline-gallery-thumb.is-active,
.productdetails .additional-images .vm-inline-gallery-thumb.is-active {
border-color: #c8e7ff;
box-shadow: 0 0 0 1px rgba(53, 110, 170, 0.85);
}
.productdetails-view .additional-images .vm-inline-gallery-thumb img,
.productdetails .additional-images .vm-inline-gallery-thumb img {
pointer-events: none;
}
/* VM6_PRODUCT_GALLERY_MAGNIFIER_231519
No modal: the product photo is enlarged inside its original gallery frame.
On mouse hover the transform origin follows the cursor; clicking locks
the zoom, and a second click returns to the normal size. */
.productdetails-view .main-image.vm-product-zoom-stage,
.productdetails .main-image.vm-product-zoom-stage {
position: relative;
cursor: zoom-in;
touch-action: pan-y;
}
.productdetails-view .main-image.vm-product-zoom-stage:focus-visible,
.productdetails .main-image.vm-product-zoom-stage:focus-visible {
outline: 2px solid #c8e7ff;
outline-offset: 3px;
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-main-image,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-main-image {
transform-origin: var(--vm-zoom-x, 50%) var(--vm-zoom-y, 50%);
transition: transform 150ms ease-out;
will-change: transform;
-webkit-user-drag: none;
user-select: none;
}
.productdetails-view .main-image.vm-product-zoom-stage.is-hover-zoomed,
.productdetails-view .main-image.vm-product-zoom-stage.is-zoom-locked,
.productdetails .main-image.vm-product-zoom-stage.is-hover-zoomed,
.productdetails .main-image.vm-product-zoom-stage.is-zoom-locked {
cursor: zoom-out;
}
.productdetails-view .main-image.vm-product-zoom-stage.is-hover-zoomed .vm-inline-gallery-main-image,
.productdetails-view .main-image.vm-product-zoom-stage.is-zoom-locked .vm-inline-gallery-main-image,
.productdetails .main-image.vm-product-zoom-stage.is-hover-zoomed .vm-inline-gallery-main-image,
.productdetails .main-image.vm-product-zoom-stage.is-zoom-locked .vm-inline-gallery-main-image {
transform: scale(var(--vm-zoom-scale, 2.15));
}
@media (prefers-reduced-motion: reduce) {
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-main-image,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-main-image {
transition: none;
}
}
/* VM6_CATEGORY_CARDS_TRANSPARENT_WITH_BOX_SHADOW_231520
Test variant for catalogue lists only: remove the old blacktrans.png panel
but keep each product visually separated from the page with a soft shadow. */
.browse-view .product .spacer.product-container {
background: transparent !important;
background-image: none !important;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.30) !important;
}
.browse-view .product .spacer.product-container:hover {
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.38) !important;
}
/* VM6_CATEGORY_BOTTOM_PAGINATION_UP10_v231524
Move only the bottom category pagination strip 10px upward.
The top pagination and product cards are intentionally unchanged. */
.orderby-displaynumber.vm-catalog-pagination-only.vm-catalog-pagination-bottom {
margin-top: 4px !important;
}
/* VM6_CATEGORY_TITLE_BEFORE_TOP_PAGER_AND_BOTTOM_UP15_v231526
The category heading is rendered before its top pager in the override.
The lower pager's actual navigation line is raised by 15px total: the
existing 10px adjustment plus the requested additional 5px. */
.orderby-displaynumber.vm-catalog-pagination-only.vm-catalog-pagination-bottom .vm-pagination.vm-pagination-bottom {
position: relative !important;
top: -15px !important;
}
/* VM6_CATEGORY_CARDS_COMPACTER_SHADOW_231527
Keep the transparent catalogue cards, but bring their shadow closer so the
cards look only lightly lifted from the page. */
.browse-view .product .spacer.product-container {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24) !important;
}
.browse-view .product .spacer.product-container:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.29) !important;
}
/* VM6_CATEGORY_CARDS_LIGHT_REST_AND_LIFT_ON_HOVER_231528
At rest the card is separated only by a very light nearby shadow.
On hover the shadow grows and the card rises slightly, giving a clear
tactile lift without making the catalogue look permanently elevated. */
.browse-view .product .spacer.product-container {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18) !important;
transition: box-shadow 160ms ease, transform 160ms ease !important;
will-change: box-shadow, transform;
}
.browse-view .product .spacer.product-container:hover {
box-shadow: 0 8px 17px rgba(0, 0, 0, 0.32) !important;
transform: translateY(-2px) !important;
}
@media (prefers-reduced-motion: reduce) {
.browse-view .product .spacer.product-container {
transition: none !important;
}
.browse-view .product .spacer.product-container:hover {
transform: none !important;
}
}
/* VM6_DROPDOWN_ITEMS_OCTAGON_ONLY_v231536
Derived directly from v2.3.15.28. Only the visible shape of dropdown
items changes: original dimensions, spacing, text, hover colour and
dropdown containers remain untouched. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li,
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > ul.menu_VMmenu > li {
position: relative;
background: transparent !important;
border-color: transparent !important;
border-radius: 0 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li::before,
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > ul.menu_VMmenu > li::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: #C8D4E3;
-webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 30%, 100% 70%, calc(100% - 7px) 100%, 7px 100%, 0 70%, 0 30%);
clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 30%, 100% 70%, calc(100% - 7px) 100%, 7px 100%, 0 70%, 0 30%);
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > div,
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > ul.menu_VMmenu > li > div {
position: relative;
z-index: 1;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li > ul.menu_VMmenu > li > ul.menu_VMmenu > li > div > a {
border-radius: 0 !important;
-webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 30%, 100% 70%, calc(100% - 7px) 100%, 7px 100%, 0 70%, 0 30%);
clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 30%, 100% 70%, calc(100% - 7px) 100%, 7px 100%, 0 70%, 0 30%);
}
/* VM6_FOOTER_ACTIONS_OCTAGON_v231540
The original footer action span keeps its exact dimensions, typography and
original box-shadow. Only its visible rounded surface is redrawn as an
eight-sided outline + inner surface so the 1px outline also runs along
every diagonal edge. */
#Nemu.footer-second-row .footer-actionmark {
position: relative;
isolation: isolate;
background: none;
border-color: transparent;
}
#Nemu.footer-second-row .footer-actionmark::before,
#Nemu.footer-second-row .footer-actionmark::after {
content: "";
position: absolute;
display: block;
pointer-events: none;
}
/* Outer layer: original 1px #3a78b2 outline, now in eight-sided geometry. */
#Nemu.footer-second-row .footer-actionmark::before {
inset: -1px;
z-index: -2;
background: #3a78b2;
-webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 17%, 100% 83%, calc(100% - 7px) 100%, 7px 100%, 0 83%, 0 17%);
clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 17%, 100% 83%, calc(100% - 7px) 100%, 7px 100%, 0 83%, 0 17%);
}
/* Inner layer: the same original blacktrans.png surface, exactly 1px inside. */
#Nemu.footer-second-row .footer-actionmark::after {
inset: 0;
z-index: -1;
background: url(../images/blacktrans.png);
-webkit-clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 17%, 100% 83%, calc(100% - 6px) 100%, 6px 100%, 0 83%, 0 17%);
clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 17%, 100% 83%, calc(100% - 6px) 100%, 6px 100%, 0 83%, 0 17%);
}
/* Keep original hover text; change only the same original outline colour. */
#Nemu.footer-second-row .footer-secondary-nav li a:hover .footer-actionmark {
border-color: transparent;
}
#Nemu.footer-second-row .footer-secondary-nav li a:hover .footer-actionmark::before {
background: #8dc3ff;
}
/* VM6_PRODUCT_CARDS_OCTAGON_SHADOW_RESTORED_v231546
The original product-card shadow is replaced by one SVG octagon only.
Its expanded filter regions leave room for the blur below the lower
diagonal facets. The old rectangular box-shadow remains disabled. */
.browse-view .product .spacer.product-container {
position: relative !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border-radius: 0 !important;
overflow: visible !important;
box-shadow: none !important;
transition: none !important;
will-change: auto !important;
}
.browse-view .product .vm-product-card-octagon-frame {
position: relative;
width: 100%;
box-sizing: border-box;
overflow: visible !important;
transition: transform 160ms ease;
will-change: transform;
}
.browse-view .product .vm-product-card-octagon-surface {
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 10px 0 !important;
overflow: hidden;
border-radius: 0 !important;
-webkit-clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%);
clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%);
}
.browse-view .product .vm-product-card-octagon-shadow {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.browse-view .product .vm-product-card-octagon-shadow .vm-card-shadow-rest,
.browse-view .product .vm-product-card-octagon-shadow .vm-card-shadow-hover {
transition: opacity 160ms ease;
}
.browse-view .product .vm-product-card-octagon-shadow .vm-card-shadow-hover {
opacity: 0;
}
/* Do not let the old rectangular hover rule return. */
.browse-view .product .spacer.product-container:hover {
box-shadow: none !important;
}
.browse-view .product .spacer.product-container:hover .vm-product-card-octagon-frame {
transform: translateY(-2px);
}
.browse-view .product .spacer.product-container:hover .vm-product-card-octagon-shadow .vm-card-shadow-rest {
opacity: 0;
}
.browse-view .product .spacer.product-container:hover .vm-product-card-octagon-shadow .vm-card-shadow-hover {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.browse-view .product .vm-product-card-octagon-frame,
.browse-view .product .vm-product-card-octagon-shadow .vm-card-shadow-rest,
.browse-view .product .vm-product-card-octagon-shadow .vm-card-shadow-hover {
transition: none;
}
.browse-view .product .spacer.product-container:hover .vm-product-card-octagon-frame {
transform: none;
}
}
/* VM6_RECENT_VIEWED_MODULE_SAME_OCTAGON_AS_CARDS_v231550
The outer background of the recently viewed sidebar module uses the exact
same eight-sided geometry as the approved catalogue cards: 3% horizontal
facets and 6% vertical facets. No title, list, size, shadow or spacing
rules are changed. */
#sidebar .side-ad-recent > .vm-sidebar-product-module,
#sidebar .side-ad-recent .vm-sidebar-product-module {
border-radius: 0 !important;
-webkit-clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%);
clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%);
}
/* VM6_RECENT_VIEWED_MODULE_OCTAGON_BG_FIX_v231551
Rebuild the Recently Viewed module background through one dedicated
pseudo-element, so the visible top and bottom facets are generated by the
same exact contour rather than by clipping the padded container itself. */
#sidebar .side-ad-recent > .vm-sidebar-product-module,
#sidebar .side-ad-recent .vm-sidebar-product-module {
position: relative !important;
isolation: isolate;
background: transparent !important;
background-image: none !important;
border-radius: 0 !important;
-webkit-clip-path: none !important;
clip-path: none !important;
overflow: visible !important;
}
#sidebar .side-ad-recent > .vm-sidebar-product-module::before,
#sidebar .side-ad-recent .vm-sidebar-product-module::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: url(../images/blacktrans.png) !important;
-webkit-clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%);
clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 94%, 97% 100%, 3% 100%, 0 94%, 0 6%);
}
/* VM6_RECENT_VIEWED_MODULE_DIAGONALS_FROM_CARD_WIDTH_v231552
Product card reference, measured from the approved current geometry:
card width = 666px; card height = 427.75px.
X = 3% of card width = 19.98px.
Y = 6% of card height = 25.665px = 3.8536% of card width.
The module therefore uses the same diagonal angle at any width:
X_module = 3% of module width; Y_module = 3.8536% of module width. */
#sidebar .side-ad-recent {
container-type: inline-size;
}
#sidebar .side-ad-recent > .vm-sidebar-product-module::before,
#sidebar .side-ad-recent .vm-sidebar-product-module::before {
--vm-recent-octagon-cut-x: 3cqw;
--vm-recent-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-recent-octagon-cut-x) 0,
calc(100% - var(--vm-recent-octagon-cut-x)) 0,
100% var(--vm-recent-octagon-cut-y),
100% calc(100% - var(--vm-recent-octagon-cut-y)),
calc(100% - var(--vm-recent-octagon-cut-x)) 100%,
var(--vm-recent-octagon-cut-x) 100%,
0 calc(100% - var(--vm-recent-octagon-cut-y)),
0 var(--vm-recent-octagon-cut-y)
);
clip-path: polygon(
var(--vm-recent-octagon-cut-x) 0,
calc(100% - var(--vm-recent-octagon-cut-x)) 0,
100% var(--vm-recent-octagon-cut-y),
100% calc(100% - var(--vm-recent-octagon-cut-y)),
calc(100% - var(--vm-recent-octagon-cut-x)) 100%,
var(--vm-recent-octagon-cut-x) 100%,
0 calc(100% - var(--vm-recent-octagon-cut-y)),
0 var(--vm-recent-octagon-cut-y)
);
}
/* VM6_RECENT_VIEWED_MODULE_WIDTH_ONLY_FACETS_v231553
Width-only geometry, derived from the approved product-card slope:
Y / X = 1.284533. No height values or height percentages are used.
1cqw is 1% of the Recently Viewed container width. */
#sidebar .side-ad-recent {
container-type: inline-size;
}
#sidebar .side-ad-recent > .vm-sidebar-product-module::before,
#sidebar .side-ad-recent .vm-sidebar-product-module::before {
--vm-recent-octagon-cut-x: 3cqw;
--vm-recent-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-recent-octagon-cut-x) 0,
calc(100% - var(--vm-recent-octagon-cut-x)) 0,
100% var(--vm-recent-octagon-cut-y),
100% calc(100% - var(--vm-recent-octagon-cut-y)),
calc(100% - var(--vm-recent-octagon-cut-x)) 100%,
var(--vm-recent-octagon-cut-x) 100%,
0 calc(100% - var(--vm-recent-octagon-cut-y)),
0 var(--vm-recent-octagon-cut-y)
);
clip-path: polygon(
var(--vm-recent-octagon-cut-x) 0,
calc(100% - var(--vm-recent-octagon-cut-x)) 0,
100% var(--vm-recent-octagon-cut-y),
100% calc(100% - var(--vm-recent-octagon-cut-y)),
calc(100% - var(--vm-recent-octagon-cut-x)) 100%,
var(--vm-recent-octagon-cut-x) 100%,
0 calc(100% - var(--vm-recent-octagon-cut-y)),
0 var(--vm-recent-octagon-cut-y)
);
}
/* VM6_HOME_PROMO_AND_TEXT_BACKGROUNDS_OCTAGON_v231554
Home-page only. The diagonal size is derived from the approved product
card and depends on the WIDTH of each individual block only:
cut-x = 3% of the block width
cut-y = 3.8536% of the block width
Existing text, dimensions, spacing and outer shadows are intentionally
untouched; only the visible blacktrans.png background surface is changed. */
/* Home text panels (Joomla blog/category cards). */
#post .blog-item,
#post .com-content-category-blog__item,
#post .com-content-article {
position: relative;
isolation: isolate;
container-type: inline-size;
background: transparent !important;
background-image: none !important;
border-radius: 0 !important;
}
#post .blog-item::before,
#post .com-content-category-blog__item::before,
#post .com-content-article::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: url(../images/blacktrans.png) !important;
--vm-home-octagon-cut-x: 3cqw;
--vm-home-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-home-octagon-cut-x) 0,
calc(100% - var(--vm-home-octagon-cut-x)) 0,
100% var(--vm-home-octagon-cut-y),
100% calc(100% - var(--vm-home-octagon-cut-y)),
calc(100% - var(--vm-home-octagon-cut-x)) 100%,
var(--vm-home-octagon-cut-x) 100%,
0 calc(100% - var(--vm-home-octagon-cut-y)),
0 var(--vm-home-octagon-cut-y)
);
clip-path: polygon(
var(--vm-home-octagon-cut-x) 0,
calc(100% - var(--vm-home-octagon-cut-x)) 0,
100% var(--vm-home-octagon-cut-y),
100% calc(100% - var(--vm-home-octagon-cut-y)),
calc(100% - var(--vm-home-octagon-cut-x)) 100%,
var(--vm-home-octagon-cut-x) 100%,
0 calc(100% - var(--vm-home-octagon-cut-y)),
0 var(--vm-home-octagon-cut-y)
);
}
/* Home advertising module: outer black panel. Its existing outer shadow
stays on the original module container. */
#sidebar .side-ad-promotions .vm-sidebar-product-module {
position: relative;
isolation: isolate;
container-type: inline-size;
background: transparent !important;
background-image: none !important;
border-radius: 0 !important;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: url(../images/blacktrans.png) !important;
--vm-home-octagon-cut-x: 3cqw;
--vm-home-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-home-octagon-cut-x) 0,
calc(100% - var(--vm-home-octagon-cut-x)) 0,
100% var(--vm-home-octagon-cut-y),
100% calc(100% - var(--vm-home-octagon-cut-y)),
calc(100% - var(--vm-home-octagon-cut-x)) 100%,
var(--vm-home-octagon-cut-x) 100%,
0 calc(100% - var(--vm-home-octagon-cut-y)),
0 var(--vm-home-octagon-cut-y)
);
clip-path: polygon(
var(--vm-home-octagon-cut-x) 0,
calc(100% - var(--vm-home-octagon-cut-x)) 0,
100% var(--vm-home-octagon-cut-y),
100% calc(100% - var(--vm-home-octagon-cut-y)),
calc(100% - var(--vm-home-octagon-cut-x)) 100%,
var(--vm-home-octagon-cut-x) 100%,
0 calc(100% - var(--vm-home-octagon-cut-y)),
0 var(--vm-home-octagon-cut-y)
);
}
/* Home advertising module: its title keeps its original text and sizing,
while only its black background receives the same width-only octagon. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
position: relative;
isolation: isolate;
container-type: inline-size;
background: transparent !important;
border-radius: 0 !important;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: url(../images/blacktrans.png) !important;
--vm-home-octagon-cut-x: 3cqw;
--vm-home-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-home-octagon-cut-x) 0,
calc(100% - var(--vm-home-octagon-cut-x)) 0,
100% var(--vm-home-octagon-cut-y),
100% calc(100% - var(--vm-home-octagon-cut-y)),
calc(100% - var(--vm-home-octagon-cut-x)) 100%,
var(--vm-home-octagon-cut-x) 100%,
0 calc(100% - var(--vm-home-octagon-cut-y)),
0 var(--vm-home-octagon-cut-y)
);
clip-path: polygon(
var(--vm-home-octagon-cut-x) 0,
calc(100% - var(--vm-home-octagon-cut-x)) 0,
100% var(--vm-home-octagon-cut-y),
100% calc(100% - var(--vm-home-octagon-cut-y)),
calc(100% - var(--vm-home-octagon-cut-x)) 100%,
var(--vm-home-octagon-cut-x) 100%,
0 calc(100% - var(--vm-home-octagon-cut-y)),
0 var(--vm-home-octagon-cut-y)
);
}
/* VM6_HOME_PROMOTIONS_OCTAGON_VISIBLE_FIX_v231555
The octagon layer must be inside the module stacking context, above the
transparent parent surface and below its real content. This changes only
the promotional-module background rendering; the width-only formula stays
the same. */
#sidebar .side-ad-promotions .vm-sidebar-product-module {
z-index: 0;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module::before {
z-index: 0;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3,
#sidebar .side-ad-promotions .vm-sidebar-product-module > .vmgroup {
position: relative;
z-index: 1;
}
/* Keep the original title surface visible, but give it the same octagon form.
cqw is resolved from the enclosing promotional module width. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
background: url(../images/blacktrans.png) !important;
-webkit-clip-path: polygon(3cqw 0, calc(100% - 3cqw) 0, 100% 3.8536cqw, 100% calc(100% - 3.8536cqw), calc(100% - 3cqw) 100%, 3cqw 100%, 0 calc(100% - 3.8536cqw), 0 3.8536cqw);
clip-path: polygon(3cqw 0, calc(100% - 3cqw) 0, 100% 3.8536cqw, 100% calc(100% - 3.8536cqw), calc(100% - 3cqw) 100%, 3cqw 100%, 0 calc(100% - 3.8536cqw), 0 3.8536cqw);
}
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3::before {
display: none;
}
/* VM6_HOME_PROMOTIONS_OCTAGON_ON_REAL_MODULE_v231556
Apply the width-only octagon directly to the actual visible promotional
module surface. The parent, not the module itself, is the query container
so both cut values are derived only from the real module width. */
#sidebar .side-ad-promotions {
container-type: inline-size;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module {
position: relative !important;
isolation: auto !important;
z-index: auto !important;
background: url(../images/blacktrans.png) !important;
border-radius: 0 !important;
--vm-promo-octagon-cut-x: 3cqw;
--vm-promo-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-promo-octagon-cut-x) 0,
calc(100% - var(--vm-promo-octagon-cut-x)) 0,
100% var(--vm-promo-octagon-cut-y),
100% calc(100% - var(--vm-promo-octagon-cut-y)),
calc(100% - var(--vm-promo-octagon-cut-x)) 100%,
var(--vm-promo-octagon-cut-x) 100%,
0 calc(100% - var(--vm-promo-octagon-cut-y)),
0 var(--vm-promo-octagon-cut-y)
) !important;
clip-path: polygon(
var(--vm-promo-octagon-cut-x) 0,
calc(100% - var(--vm-promo-octagon-cut-x)) 0,
100% var(--vm-promo-octagon-cut-y),
100% calc(100% - var(--vm-promo-octagon-cut-y)),
calc(100% - var(--vm-promo-octagon-cut-x)) 100%,
var(--vm-promo-octagon-cut-x) 100%,
0 calc(100% - var(--vm-promo-octagon-cut-y)),
0 var(--vm-promo-octagon-cut-y)
) !important;
}
/* No detached background layer remains under the real module surface. */
#sidebar .side-ad-promotions .vm-sidebar-product-module::before {
display: none !important;
}
/* The title keeps its original surface, but uses the same width-only contour. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
position: relative !important;
z-index: auto !important;
background: url(../images/blacktrans.png) !important;
border-radius: 0 !important;
--vm-promo-title-octagon-cut-x: 3cqw;
--vm-promo-title-octagon-cut-y: 3.8536cqw;
-webkit-clip-path: polygon(
var(--vm-promo-title-octagon-cut-x) 0,
calc(100% - var(--vm-promo-title-octagon-cut-x)) 0,
100% var(--vm-promo-title-octagon-cut-y),
100% calc(100% - var(--vm-promo-title-octagon-cut-y)),
calc(100% - var(--vm-promo-title-octagon-cut-x)) 100%,
var(--vm-promo-title-octagon-cut-x) 100%,
0 calc(100% - var(--vm-promo-title-octagon-cut-y)),
0 var(--vm-promo-title-octagon-cut-y)
) !important;
clip-path: polygon(
var(--vm-promo-title-octagon-cut-x) 0,
calc(100% - var(--vm-promo-title-octagon-cut-x)) 0,
100% var(--vm-promo-title-octagon-cut-y),
100% calc(100% - var(--vm-promo-title-octagon-cut-y)),
calc(100% - var(--vm-promo-title-octagon-cut-x)) 100%,
var(--vm-promo-title-octagon-cut-x) 100%,
0 calc(100% - var(--vm-promo-title-octagon-cut-y)),
0 var(--vm-promo-title-octagon-cut-y)
) !important;
}
/* VM6_PRODUCT_GALLERY_BLACK_TRANSLUCENT_EDGE_RAILS_231611
The left/right gallery controls are visually quiet black-transparent rails.
The pointer still reveals a rail only in the outer 5% of the photo, but the
rail itself fills that edge so it feels like a native gallery scroller. */
.productdetails-view .main-image.vm-product-zoom-stage,
.productdetails .main-image.vm-product-zoom-stage {
overflow: hidden;
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav {
position: absolute;
z-index: 3;
top: 0;
display: flex;
width: 5%;
min-width: 30px;
max-width: 46px;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: rgba(0, 0, 0, 0.28);
color: rgba(255, 255, 255, 0.92);
font-family: Arial, sans-serif;
font-size: clamp(24px, 2.1vw, 34px);
line-height: 1;
opacity: 0;
pointer-events: none;
transform: none;
transition: opacity 150ms ease-out, background-color 150ms ease-out;
cursor: pointer;
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav-prev,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav-prev {
left: 0;
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav-next,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav-next {
right: 0;
}
.productdetails-view .main-image.vm-product-zoom-stage.is-gallery-edge-prev .vm-inline-gallery-nav-prev,
.productdetails .main-image.vm-product-zoom-stage.is-gallery-edge-prev .vm-inline-gallery-nav-prev,
.productdetails-view .main-image.vm-product-zoom-stage.is-gallery-edge-next .vm-inline-gallery-nav-next,
.productdetails .main-image.vm-product-zoom-stage.is-gallery-edge-next .vm-inline-gallery-nav-next,
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav:focus-visible,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav:focus-visible {
opacity: 1;
pointer-events: auto;
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav:hover,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav:hover {
background: rgba(0, 0, 0, 0.48);
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav:focus-visible,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.9);
outline-offset: -4px;
}
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav span,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav span {
display: block;
position: relative;
top: -1px;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (hover: none), (pointer: coarse) {
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav {
width: 12%;
min-width: 38px;
max-width: 54px;
opacity: 0.56;
pointer-events: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.productdetails-view .main-image.vm-product-zoom-stage .vm-inline-gallery-nav,
.productdetails .main-image.vm-product-zoom-stage .vm-inline-gallery-nav {
transition: none;
}
}
/* VM6_CART_POPUP_IMAGE_LAYER_CLEANUP_231612
The cart must show one product thumbnail only. Product-gallery leftovers
(additional thumbnails and decorative backgrounds) are useful on a product
page but turn into stacked debris in a narrow iframe checkout. */
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images,
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images::before,
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images::after {
background: none !important;
background-image: none !important;
}
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images {
overflow: hidden !important;
}
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images .additional-images,
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images .vm-additional-images,
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images .vm-inline-gallery-thumb-wrap,
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images .vm-inline-gallery-thumb,
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images [class*="gallery-thumb"],
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images [class*="additional-image"] {
display: none !important;
}
/* Keep the one actual cart thumbnail; suppress any secondary gallery images
accidentally emitted by a product/media override inside the cart item. */
html.vm-cart-popup-document body.vm-cart-popup-component .vm-checkout-products .cart-images img ~ img {
display: none !important;
}
/* VM6_HOME_PROMO_TITLE_WHITE_ON_BLACK_v231613
Only the home-page promotion module title (“Акції інтернет-магазину”).
Product cards, the body of the promotion module and other sidebar titles
deliberately keep their existing styling. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
color: #ffffff !important;
background-color: #000000 !important;
background-image: none !important;
text-shadow: none !important;
}
/* VM6_HOME_PROMO_TITLE_TEXT_BLACK_OUTLINE_NO_PANEL_v231614
The promotion-module heading has no separate octagonal panel. Its white
letters remain readable directly over the module by using a tight black
outline built from text shadows. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
color: #ffffff !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.98),
1px -1px 0 rgba(0, 0, 0, 0.98),
-1px 1px 0 rgba(0, 0, 0, 0.98),
1px 1px 0 rgba(0, 0, 0, 0.98),
0 2px 2px rgba(0, 0, 0, 0.86) !important;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3::before,
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3::after {
content: none !important;
display: none !important;
background: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
}
/* VM6_HOME_PROMO_TITLE_WARM_PENCIL_231615
Keep the heading directly on the module surface: no panel, no octagon.
The tone follows the warm brown pencil/linework used by the site shell. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
color: #523622 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
text-shadow:
1px 1px 0 rgba(250, 242, 224, 0.92),
0 2px 2px rgba(66, 42, 25, 0.26) !important;
}
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3::before,
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3::after {
content: none !important;
display: none !important;
background: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
}
/* VM6_HOME_PROMO_TITLE_MAIN_MENU_COLOUR_WITH_BLACK_OUTLINE_231616
Promotion title: same bright green as the primary catalog menu text,
but with the requested tight black letter outline. No panel or octagon. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
color: #32CD32 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
text-shadow:
-1px -1px 0 rgba(0, 0, 0, 0.98),
1px -1px 0 rgba(0, 0, 0, 0.98),
-1px 1px 0 rgba(0, 0, 0, 0.98),
1px 1px 0 rgba(0, 0, 0, 0.98),
0 2px 2px rgba(0, 0, 0, 0.86) !important;
}
/* VM6_HOME_PROMO_TITLE_MENU_COLOUR_YELLOW_GLOW_231620
The title text keeps the exact 2.3.16.18 main-menu colour (#a8ef9d).
Only the former dark soft shadow becomes a warm promotional yellow glow. */
#sidebar .side-ad-promotions .vm-sidebar-product-module > h3 {
color: #a8ef9d !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
text-shadow:
0 1px 2px rgba(255, 198, 0, 0.92),
0 0 6px rgba(255, 220, 70, 0.80) !important;
}
/* VM6_RECENT_VIEWED_TITLE_AND_LIST_SCROLL_231621
Recently viewed product heading: same text colour as the promotion module,
but deliberately no yellow glow. The module stays compact on the homepage:
scrolling starts with the sixth item there; elsewhere it begins with the
eleventh item. Modern browsers support :has(), which avoids adding script
or touching the VirtueMart module output. */
#sidebar .side-ad-recent .vm-sidebar-product-module > h3 {
color: #a8ef9d !important;
text-shadow: none !important;
}
/* Other pages: scroll is activated only when an eleventh product exists. */
#sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(11)) {
max-height: 724px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(168, 239, 157, 0.78) rgba(0, 0, 0, 0.24);
padding-right: 4px !important;
}
/* Homepage: a sixth product is the threshold requested for the compact list. */
body.is-home-page #sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(6)) {
max-height: 364px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(168, 239, 157, 0.78) rgba(0, 0, 0, 0.24);
padding-right: 4px !important;
}
#sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(11))::-webkit-scrollbar,
body.is-home-page #sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(6))::-webkit-scrollbar {
width: 8px;
}
#sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(11))::-webkit-scrollbar-track,
body.is-home-page #sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(6))::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.24);
border-radius: 9px;
}
#sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(11))::-webkit-scrollbar-thumb,
body.is-home-page #sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(6))::-webkit-scrollbar-thumb {
background: rgba(168, 239, 157, 0.78);
border: 2px solid rgba(0, 0, 0, 0.18);
border-radius: 9px;
}
@media (max-width: 700px) {
#sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(11)) {
max-height: 640px;
}
body.is-home-page #sidebar .side-ad-recent ul.vmproduct.productdetails:has(> li.product-container:nth-child(6)) {
max-height: 332px;
}
}
/* VM6_RECENT_VIEWED_SCROLL_REAL_VM_MARKUP_231622
VirtueMart emits every viewed item in a separate , not as additional
- nodes in one list. The scroll container therefore must be .vmgroup.
Home page: show five viewed products; scrolling starts with the sixth.
Other pages: show ten products; scrolling starts with the eleventh. */
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11)) {
max-height: 724px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(168, 239, 157, 0.78) rgba(0, 0, 0, 0.24);
padding-right: 4px !important;
}
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6)) {
max-height: 364px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(168, 239, 157, 0.78) rgba(0, 0, 0, 0.24);
padding-right: 4px !important;
}
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11))::-webkit-scrollbar,
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6))::-webkit-scrollbar {
width: 8px;
}
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11))::-webkit-scrollbar-track,
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6))::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.24);
border-radius: 9px;
}
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11))::-webkit-scrollbar-thumb,
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6))::-webkit-scrollbar-thumb {
background: rgba(168, 239, 157, 0.78);
border: 2px solid rgba(0, 0, 0, 0.18);
border-radius: 9px;
}
@media (max-width: 700px) {
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11)) {
max-height: 640px;
}
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6)) {
max-height: 332px;
}
}
/* VM6_RECENT_VIEWED_SCROLL_CLEAN_231623
Keep the requested wheel/touch scrolling after the item threshold but hide
the browser scrollbar track, reserved right-side gutter and dark background.
The list itself remains scrollable; only the distracting native chrome goes. */
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11)),
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6)) {
padding-right: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none;
}
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11))::-webkit-scrollbar,
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6))::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11))::-webkit-scrollbar-track,
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6))::-webkit-scrollbar-track,
#sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(11))::-webkit-scrollbar-thumb,
body.is-home-page #sidebar .side-ad-recent .vmgroup:has(> ul.vmproduct.productdetails:nth-of-type(6))::-webkit-scrollbar-thumb {
background: transparent !important;
border: 0 !important;
}
/* 2.3.16.58 - real SVG octagon outlines for the primary catalogue menu.
The original six-cell bitmap strip is replaced only in the main menu.
The frame is inline SVG, so Safari/iPhone does not depend on a CSS bitmap
for the visible button geometry. */
#catnav.legacy-vm-catnav {
background-image: none !important;
background-color: transparent !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
position: absolute !important;
z-index: 0 !important;
top: 13px !important;
right: 2px !important;
bottom: 13px !important;
left: 2px !important;
display: block !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
pointer-events: none !important;
/* The old bitmap had a very shallow pale shadow under each cell. Keep
that optical depth without using the bitmap for the button geometry. */
filter: drop-shadow(0 2px 1px rgba(117, 161, 196, 0.36))
drop-shadow(0 3px 3px rgba(117, 161, 196, 0.18)) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: rgba(255, 255, 255, 0.98) !important;
stroke: #bed7eb !important;
stroke-width: 0.25 !important;
vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div {
position: relative !important;
z-index: 1 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: #ffffff !important;
stroke: #a8cef0 !important;
}
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
top: 9px !important;
right: 1px !important;
bottom: 9px !important;
left: 1px !important;
filter: drop-shadow(0 1px 1px rgba(117, 161, 196, 0.32))
drop-shadow(0 2px 2px rgba(117, 161, 196, 0.15)) !important;
}
}
/* 2.3.16.60: fix actual SVG menu frame dimensions.
An inline SVG with a 100x100 viewBox is a replaced square element when
height:auto is used. Give it a real wide/low box matching botoons.png. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
top: 10px !important;
left: 2px !important;
right: auto !important;
bottom: auto !important;
width: calc(100% - 4px) !important;
height: 51px !important;
filter: drop-shadow(0 1px 1px rgba(117, 161, 196, 0.34))
drop-shadow(0 2px 2px rgba(117, 161, 196, 0.17)) !important;
}
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
top: 7px !important;
left: 1px !important;
right: auto !important;
bottom: auto !important;
width: calc(100% - 2px) !important;
height: 44px !important;
filter: drop-shadow(0 1px 1px rgba(117, 161, 196, 0.30))
drop-shadow(0 2px 2px rgba(117, 161, 196, 0.14)) !important;
}
}
/* 2.3.16.61: main menu SVG octagon uses a wide/low viewBox with true 45-degree chamfers.
Equal horizontal and vertical facet offsets keep the diagonal edges at 45 degrees.
Also strengthen the pale-blue shadow to match the original bitmap depth. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
top: 10px !important;
left: 2px !important;
right: auto !important;
bottom: auto !important;
width: calc(100% - 4px) !important;
height: 51px !important;
filter: drop-shadow(0 2px 2px rgba(117, 161, 196, 0.50))
drop-shadow(0 5px 7px rgba(117, 161, 196, 0.32))
drop-shadow(0 8px 12px rgba(117, 161, 196, 0.16)) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: rgba(255, 255, 255, 0.98) !important;
stroke: #bed7eb !important;
stroke-width: 0.25 !important;
vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;
}
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
top: 7px !important;
left: 1px !important;
right: auto !important;
bottom: auto !important;
width: calc(100% - 2px) !important;
height: 44px !important;
filter: drop-shadow(0 1px 2px rgba(117, 161, 196, 0.42))
drop-shadow(0 4px 6px rgba(117, 161, 196, 0.26))
drop-shadow(0 6px 10px rgba(117, 161, 196, 0.12)) !important;
}
}
/* 2.3.16.66 — lighter main-menu shadow variant based on 2.3.16.61.
Keep the 45-degree SVG geometry and overall visual mood, but reduce the
compositing cost by replacing the three heavy blur layers with two lighter
ones and slightly smaller blur radii. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 2px 2px rgba(117, 161, 196, 0.42))
drop-shadow(0 4px 6px rgba(117, 161, 196, 0.22)) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 2px 2px rgba(117, 161, 196, 0.46))
drop-shadow(0 5px 7px rgba(117, 161, 196, 0.25)) !important;
}
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 1px 2px rgba(117, 161, 196, 0.36))
drop-shadow(0 3px 5px rgba(117, 161, 196, 0.18)) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 1px 2px rgba(117, 161, 196, 0.40))
drop-shadow(0 4px 6px rgba(117, 161, 196, 0.20)) !important;
}
}
/* 2.3.16.67 — add a clearly visible grey SVG contour to the lightweight
2.3.16.66 main menu buttons. The contour is static and uses no filters,
so it has negligible performance cost compared with the shadow layers. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: rgba(255, 255, 255, 0.985) !important;
stroke: #a8a8a8 !important;
stroke-width: 1.7 !important;
vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: #ffffff !important;
stroke: #9a9a9a !important;
stroke-width: 1.7 !important;
}
/* 2.3.16.68 — lighten the main menu SVG contour to an almost-white grey. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
stroke: #ececec !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
stroke: #f7f7f7 !important;
}
/* 2.3.16.69 — test the lower-footer text treatment on the main six-button menu.
Only the text styling changes: font, weight, colour and shadow now follow
the “Співпраця з нами” style, while the button geometry and menu behaviour stay the same. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #d9eefc !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
font-weight: bold !important;
line-height: 1.1 !important;
text-align: center !important;
text-shadow: 0 1px 1px #000000 !important;
letter-spacing: 0 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #ffffff !important;
text-shadow: 0 1px 1px #000000 !important;
}
/* 2.3.16.70 — keep the footer-like text styling experiment, but restore the
original poisonous green main-menu palette from the bitmap-era version. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #32CD32 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #afdaff !important;
}
/* 2.3.16.71 — change the main menu text outline/shadow from black to light blue. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
text-shadow: 0 1px 1px #8dc3ff !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
text-shadow: 0 1px 1px #8dc3ff !important;
}
/* 2.3.16.72 — restore depth to the poisonous-green menu captions with a
green-toned lower edge instead of the flat pale-blue shadow. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
text-shadow:
0 1px 0 #16871b,
0 2px 1px rgba(7, 83, 15, 0.42) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
text-shadow:
0 1px 0 #5f9fbd,
0 2px 1px rgba(39, 92, 126, 0.36) !important;
}
/* 2.3.16.73 — keep green text depth without making the captions look taller.
The previous two vertically stacked shadows added a visible 2px lower tail.
Replace them with a single 1px diagonal green edge: the letters keep their
normal height while retaining a compact embossed volume. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
text-shadow: 1px 1px 0 #16871b !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
text-shadow: 1px 1px 0 #5f9fbd !important;
}
/* 2.3.16.74 — restore the compact black text depth for the main catalogue menu. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
text-shadow: 0 1px 1px #000000 !important;
}
/* 2.3.16.75 — main menu labels: white text with a poisonous-green outline.
Keep the same button geometry and performance profile; only the text colours
are changed. The outline uses compact 1px directional shadows so the letters
stay crisp and do not look vertically stretched. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #ffffff !important;
text-shadow:
1px 0 0 #229d22,
-1px 0 0 #229d22,
0 1px 0 #229d22,
0 -1px 0 #229d22,
1px 1px 0 #1b7f1b !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #ffffff !important;
text-shadow:
1px 0 0 #2fbe2f,
-1px 0 0 #2fbe2f,
0 1px 0 #2fbe2f,
0 -1px 0 #2fbe2f,
1px 1px 0 #239123 !important;
}
/* 2.3.16.76 — test a more solid main-menu text treatment.
Remove the cartoon-like white fill + outline and switch the six main menu
labels to a single poisonous-green fill in the footer's solid bold style.
The shadow is moved upward instead of downward, as requested. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #32CD32 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
font-weight: bold !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-shadow: 0 -1px 1px #000000 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #afdaff !important;
text-shadow: 0 -1px 1px #000000 !important;
}
/* 2.3.16.77 — main menu text colour sampled from the bright green face of
the 1komissionny logo: RGB(172, 244, 2) / #ACF402. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #acf402 !important;
}
/* 2.3.16.78 — test a more business-like system font for the main menu.
Switch the six main catalogue buttons to Tahoma Bold and plain white text,
without changing the button geometry, menu behaviour or hover structure. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
font-family: Tahoma, Arial, Helvetica, sans-serif !important;
font-weight: bold !important;
color: #ffffff !important;
text-shadow: 0 -1px 1px #000000 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #ffffff !important;
text-shadow: 0 -1px 1px #000000 !important;
}
/* 2.3.16.79 — experimental engraved/cut-out text effect for the main menu.
Keep the business-like Tahoma Bold from 2.3.16.78, but replace the plain
white label with a white/grey engraved illusion: a soft white upper gleam
and a darker lower edge suggest letters cut into the button surface. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
font-family: Tahoma, Arial, Helvetica, sans-serif !important;
font-weight: bold !important;
color: #f4f4f4 !important;
text-shadow:
0 -1px 0 rgba(255, 255, 255, 0.95),
0 1px 0 rgba(0, 0, 0, 0.88),
0 2px 2px rgba(0, 0, 0, 0.22) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #ffffff !important;
text-shadow:
0 -1px 0 rgba(255, 255, 255, 0.98),
0 1px 0 rgba(0, 0, 0, 0.92),
0 2px 2px rgba(0, 0, 0, 0.24) !important;
}
/* 2.3.16.80 — engraved text corrected to look inset inside the buttons.
The previous version looked like a raised cut piece on top of the button.
This override reverses the lighting logic: darker upper inner edge, lighter
lower inner edge, and a softer near-surface text fill so the labels read as
carved into the button face rather than sitting above it. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
font-family: Tahoma, Arial, Helvetica, sans-serif !important;
font-weight: bold !important;
color: #d7d7d7 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.62),
0 1px 0 rgba(255, 255, 255, 0.88),
0 0 1px rgba(255, 255, 255, 0.18) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #e1e1e1 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.66),
0 1px 0 rgba(255, 255, 255, 0.92),
0 0 1px rgba(255, 255, 255, 0.20) !important;
}
/* 2.3.16.81 — add a subtle logo-like green glow on hover to the inset main-menu text.
Keep the carved/inset text effect from 2.3.16.80 in the normal state. On hover,
the letters remain inset but gain a soft green halo in the spirit of the logo. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #e7ece1 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.66),
0 1px 0 rgba(255, 255, 255, 0.92),
0 0 2px rgba(172, 244, 2, 0.30),
0 0 5px rgba(172, 244, 2, 0.22),
0 0 9px rgba(172, 244, 2, 0.14) !important;
}
/* 2.3.16.82 — remove text-shadow from the main menu labels completely.
The user wants the letters to feel statically cut into the buttons, without
heavy dynamic hover glow or text-shadow rendering. This override makes the
six main-menu labels plain, light inset-toned text with no shadow at rest
and no shadow on hover/focus. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #d7d7d7 !important;
text-shadow: none !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #d7d7d7 !important;
text-shadow: none !important;
}
/* 2.3.16.83 — lightweight inset/cut-in text effect for the six main menu buttons.
This restores the carved-in look, but only with two crisp 1px shadows and no blur.
The effect is intentionally light so it stays visually subtle and browser-friendly. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a {
color: #d9d9d9 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.52),
0 1px 0 rgba(255, 255, 255, 0.74) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #e3e3e3 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.56),
0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
/* 2.3.16.84 — restore a light text glow on hover, but do not animate/change
the main button surface itself. The glow colour is taken from the dropdown
menu body (#C8D4E3). Text keeps the lightweight inset effect from 2.3.16.83. */
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 2px 2px rgba(117, 161, 196, 0.42))
drop-shadow(0 4px 6px rgba(117, 161, 196, 0.22)) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: rgba(255, 255, 255, 0.985) !important;
stroke: #ececec !important;
stroke-width: 1.7 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #e3e3e3 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.56),
0 1px 0 rgba(255, 255, 255, 0.78),
0 0 2px rgba(200, 212, 227, 0.34),
0 0 5px rgba(200, 212, 227, 0.24) !important;
}
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 1px 2px rgba(117, 161, 196, 0.36))
drop-shadow(0 3px 5px rgba(117, 161, 196, 0.18)) !important;
}
}
/* 2.3.16.85 — hover glow for inset text should look like the carved letters
themselves fill with the dropdown-body colour (#C8D4E3). The button surface
must not visually change on hover. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 2px 2px rgba(117, 161, 196, 0.42))
drop-shadow(0 4px 6px rgba(117, 161, 196, 0.22)) !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame .vm-main-menu-octagon-frame__shape {
fill: rgba(255, 255, 255, 0.985) !important;
stroke: #ececec !important;
stroke-width: 1.7 !important;
}
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #C8D4E3 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.58),
0 1px 0 rgba(255, 255, 255, 0.54),
0 0 2px rgba(200, 212, 227, 0.42),
0 0 5px rgba(200, 212, 227, 0.26) !important;
}
@media (max-width: 700px) {
#catnav #vm6-catnav.nav.menu_VMmenu > li > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > .vm-main-menu-octagon-frame,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > .vm-main-menu-octagon-frame {
filter: drop-shadow(0 1px 2px rgba(117, 161, 196, 0.36))
drop-shadow(0 3px 5px rgba(117, 161, 196, 0.18)) !important;
}
}
/* 2.3.16.87 — adjust the hover fill/glow of carved main-menu text to a
greener grey close to the visible dropdown-octagon body, not the colder
blue-grey from the raw CSS token. Keep the soft blur glow, as requested. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #CCD7C6 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.58),
0 1px 0 rgba(255, 255, 255, 0.56),
0 0 2px rgba(204, 215, 198, 0.42),
0 0 5px rgba(204, 215, 198, 0.28),
0 0 9px rgba(204, 215, 198, 0.16) !important;
}
/* 2.3.16.88 — same carved hover fill/glow, but slightly greener than 2.3.16.87. */
#catnav #vm6-catnav.nav.menu_VMmenu > li > div > a:hover,
#catnav #vm6-catnav.nav.menu_VMmenu > li:hover > div > a,
#catnav #vm6-catnav.nav.menu_VMmenu > li:focus-within > div > a {
color: #D2DDC8 !important;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.58),
0 1px 0 rgba(255, 255, 255, 0.56),
0 0 2px rgba(210, 221, 200, 0.42),
0 0 5px rgba(210, 221, 200, 0.28),
0 0 9px rgba(210, 221, 200, 0.16) !important;
}
/* 2.3.16.93 — Full cart page opened from “Відокремити сторінку”.
VirtueMart can render the original 1440px product source in .cart-images;
constrain only cart thumbnails on the regular full page so they cannot widen
or break the cart layout. Popup-specific image rules remain unchanged. */
#cart-view .cart-images,
.cart-view .cart-images,
.vm-cart-view .cart-images {
width: 150px !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#cart-view .cart-images img,
.cart-view .cart-images img,
.vm-cart-view .cart-images img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 150px !important;
margin: 0 auto !important;
object-fit: contain !important;
box-sizing: border-box !important;
}
@media (max-width: 600px) {
#cart-view .cart-images,
.cart-view .cart-images,
.vm-cart-view .cart-images {
width: 112px !important;
}
#cart-view .cart-images img,
.cart-view .cart-images img,
.vm-cart-view .cart-images img {
max-height: 112px !important;
}
}