/* ============================================================
custom.modern.css
Modern light redesign for Webasyst Shop-Script theme "artdeluxe"
Brand colors preserved
============================================================ */
/* --------- Variables (brand-safe) --------- */
:root {
--brand: #98404a;
--brand-soft: rgba(152,64,74,.12);
--text: #3a3a3a;
--muted: #777;
--bg: #ffffff;
--bg-soft: #f6f6f6;
--border: #e6e6e6;
--radius: 14px;
--shadow: 0 10px 28px rgba(0,0,0,.08);
--shadow-sm: 0 6px 16px rgba(0,0,0,.08);
}
/* --------- Base --------- */
body {
background: var(--bg);
color: var(--text);
}
a {
color: inherit;
transition: color .2s ease;
}
a:hover {
color: var(--brand);
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/* --------- Header cleanup --------- */
#header,
.header {
background: rgba(255,255,255,.95);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
}
/* --------- Category left menu --------- */
.menu-v.category-tree {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px;
box-shadow: var(--shadow-sm);
}
.menu-v.category-tree a {
display: block;
padding: 10px 12px;
border-radius: 10px;
font-weight: 600;
}
.menu-v.category-tree a:hover {
background: var(--brand-soft);
}
/* --------- Home categories tiles --------- */
.home-cat {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.home-cat .produt {
width: auto !important;
float: none !important;
}
.home-cat .produt a {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.home-cat .produt a:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.home-cat .produt img {
aspect-ratio: 1 / 1;
object-fit: contain;
}
.home-cat .produt span {
display: block;
margin-top: 10px;
font-weight: 700;
}
/* --------- Product cards --------- */
.product-list.thumbs,
.thumbs.product-list {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.product-list li.item_li {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.product-list li.item_li:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.item_li .image,
.item_li .image_main {
border-radius: 12px;
overflow: hidden;
background: var(--bg-soft);
}
.item_li .image img,
.item_li .image_main img {
transition: transform .2s ease;
}
.item_li:hover img {
transform: scale(1.04);
}
.item_li .item_title {
margin-top: 10px;
font-weight: 700;
min-height: 42px;
}
.compare-at-price {
color: #999 !important;
text-decoration: line-through;
}
.price {
color: var(--brand) !important;
font-weight: 800;
font-size: 16px;
}
/* --------- Add to cart button --------- */
.addtocart input[type="submit"],
.productListSubmit {
background: var(--brand);
border: none;
color: #fff;
border-radius: 999px;
padding: 10px 18px;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.addtocart input[type="submit"]:hover,
.productListSubmit:hover {
background: #7d333b;
transform: translateY(-1px);
}
/* --------- Mobile --------- */
@media (max-width: 760px) {
.home-cat {
grid-template-columns: repeat(2, 1fr);
}
.product-list.thumbs,
.thumbs.product-list {
grid-template-columns: repeat(2, 1fr);
}
.item_li .item_title {
font-size: 14px;
}
}
/* =====================
Tuning v2 (menu + cart)
===================== */
/* Left sidebar menu: make it more compact */
.sidebar.left, .sidebar.left300px, .sidebar {
font-size: 14px;
}
.menu-v.category-tree a{
padding: 8px 10px;
font-weight: 700;
line-height: 1.25;
}
.menu-v.category-tree li{
margin: 2px 0;
}
/* reduce extra spacing if theme adds it */
.categoryFoo, .categoryFoo *{
letter-spacing: normal !important;
}
/* Make sidebar block visually lighter */
.menu-v.category-tree{
box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
/* Product list cart button: less "heavy" color */
.productListSubmit,
.addtocart input[type="submit"]{
background: rgba(152,64,74,.10) !important; /* brand-soft */
border: 1px solid rgba(152,64,74,.35) !important;
color: var(--brand) !important;
}
.productListSubmit:hover,
.addtocart input[type="submit"]:hover{
background: var(--brand) !important;
border-color: var(--brand) !important;
color: #fff !important;
}
/* If inside button is an ![]()
cart icon, keep it visible */
.productListSubmit img{
filter: none;
}
.productListSubmit:hover img{
filter: brightness(0) invert(1);
}
/* =====================
Header v4: clean full-width bar (no ugly dashed pills)
Keeps brand, improves alignment, no HTML changes required
===================== */
/* Full-width header background, but keep content centered */
#header, .header{
width: 100%;
background: rgba(255,255,255,.96);
border-bottom: 1px solid var(--border);
}
.header .container,
.container.app-header{
max-width: 1180px !important;
margin: 0 auto !important;
}
/* Restore a sane 4-column layout */
.container.app-header{
display: grid;
grid-template-columns: 220px 1fr 230px 220px;
align-items: center;
gap: 18px;
padding: 14px 16px;
}
/* Logo: a bit bigger, left-aligned */
.logoTop{
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
.logoTop img{
max-width: 190px !important;
}
/* Benefits: compact chips in one row */
.infodeliveri{
justify-content: center;
gap: 10px;
margin: 0 !important;
}
.infodeliveri .dostavka{
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 10px;
box-shadow: none;
}
.infodeliveri .dostavka span{
font-size: 12px;
font-weight: 700;
white-space: nowrap; /* prevent ugly wrapping */
letter-spacing: .2px;
}
/* Phones/time: stack neatly */
.infcont{
align-items: flex-end;
gap: 4px;
}
.infcont a{
font-size: 13px;
font-weight: 800;
}
.infcont img{
width: 16px;
height: 16px;
}
.infcont .clock_x span{
font-size: 12px;
color: var(--muted);
font-weight: 700;
}
/* Cart: compact pill (icon + text), not a huge bubble */
.cartTop #cart-summary{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 12px;
box-shadow: var(--shadow-sm);
}
.cartTop #cart-summary img{
width: 34px !important;
height: auto !important;
}
.cartTop .pokupki{
font-weight: 900;
color: var(--brand);
line-height: 1.1;
}
.cartTop .cart-total{
font-weight: 800;
color: var(--text);
}
/* Make header responsive before mobile menu takes over */
@media (max-width: 1100px){
.container.app-header{
grid-template-columns: 200px 1fr 240px;
grid-template-areas:
"logo perks cart"
"logo phones cart";
row-gap: 8px;
}
.logoTop{ grid-area: logo; }
.infodeliveri{ grid-area: perks; justify-content: flex-start; flex-wrap: wrap; }
.infcont{ grid-area: phones; align-items: flex-start; }
.cartTop{ grid-area: cart; }
}
@media (max-width: 760px){
/* desktop header hidden by theme; mobile header is styled in v2 already */
.container.app-header{ display:none; }
}
/* =====================
Header alignment fix (advantages center, phones left)
===================== */
/* Center advantages block perfectly */
.infodeliveri{
justify-content: center !important;
align-items: center;
text-align: center;
}
.infodeliveri .dostavka{
justify-content: center;
text-align: center;
}
/* Phones block: force left alignment for all items including clock */
.infcont{
align-items: flex-start !important;
text-align: left !important;
}
.infcont li,
.infcont a,
.infcont span{
text-align: left !important;
}
/* Clock line aligned with phones */
.infcont .clock_x{
margin-left: 0 !important;
padding-left: 0 !important;
align-self: flex-start;
}
/* =====================
Advantages chips: less "puffy", more premium (v6)
===================== */
.infodeliveri{
gap: 8px !important;
}
.infodeliveri .dostavka{
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important; /* not a huge pill */
padding: 6px 10px !important;
box-shadow: none !important;
}
.infodeliveri .dostavka i,
.infodeliveri .dostavka img{
opacity: .85;
}
.infodeliveri .dostavka span{
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .15px !important;
}
/* =====================
Advantages v7: ultra-compact + strict, and FIX centering bug
Why first item was left: theme likely has UL padding/margins and/or
flex container not taking full width. We zero paddings and force width.
===================== */
/* Force container to really center */
.infodeliveri{
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px 10px !important;
margin: 0 !important;
padding: 0 !important; /* UL default padding caused left shift */
list-style: none !important;
}
/* Make each list item not add extra spacing */
.infodeliveri > li{
margin: 0 !important;
padding: 0 !important;
}
/* Strict look: no boxes, just icon + text */
.infodeliveri .dostavka{
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 2px 0 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
/* Tighter icon */
.infodeliveri .dostavka i,
.infodeliveri .dostavka img{
width: 16px !important;
height: 16px !important;
opacity: .85;
}
/* Compact text */
.infodeliveri .dostavka span{
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .12px !important;
white-space: nowrap !important;
color: var(--text) !important;
}
/* Optional subtle separator between items (looks strict) */
.infodeliveri > li:not(:last-child) .dostavka:after{
content: "";
display: inline-block;
width: 1px;
height: 14px;
background: var(--border);
margin-left: 10px;
}
/* On narrow widths: remove separators to avoid odd wrapping */
@media (max-width: 980px){
.infodeliveri > li .dostavka:after{ display:none; }
}
/* =====================
Sidebar menu v8: more compact height (desktop)
===================== */
@media (min-width: 761px){
.menu-v.category-tree{
padding: 8px !important;
}
.menu-v.category-tree a{
padding: 7px 10px !important;
font-size: 13px !important;
font-weight: 750 !important;
line-height: 1.15 !important;
}
/* reduce nested indent & vertical rhythm */
.menu-v.category-tree ul{
margin: 0 !important;
padding-left: 0 !important;
}
.menu-v.category-tree li{
margin: 1px 0 !important;
}
/* if theme uses extra padding for sublevels */
.menu-v.category-tree li ul li a{
padding: 6px 10px !important;
}
}
/* =====================
Banner v9: correct gutters (gap from left menu + reach right edge)
Problem: banner sits flush to content edge (no left gutter) and stops short on right
Fix: use full width but add symmetric inner gutters via calc + margins
===================== */
@media (min-width: 761px){
/* Make sure sizing doesn't overflow */
.bannerHome, .bannerHome *{
box-sizing: border-box;
}
/* Full available column width, with nice gutters */
.bannerHome{
display: block !important;
width: calc(100% - 32px) !important;
margin: 0 16px 24px 16px !important; /* left gap from sidebar + right to edge */
height: 440px; /* height ~= sidebar menu */
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow);
}
.bannerHome img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
display: block;
}
}
/* If theme uses a specific right column wrapper, ensure it can stretch */
@media (min-width: 761px){
.content, .content .content, .content .main, .main, .rcol, .rightcol, .content__inner{
min-width: 0;
}
}
/* =====================
Banner v10: remove extra right field (compensate parent padding)
+ Cart: more аккуратная (compact, premium)
===================== */
@media (min-width: 761px){
/* Banner should touch the right edge of the content column */
.bannerHome{
width: calc(100% + 16px) !important; /* extend into parent's right padding */
margin: 0 -16px 24px 16px !important; /* keep left gutter, kill right field */
}
}
/* -------- Cart (header) more аккуратная -------- */
.cartTop #cart-summary{
background: #fff !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important; /* less "pill" */
padding: 8px 10px !important;
box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
gap: 10px !important;
}
.cartTop #cart-summary img{
width: 28px !important;
height: auto !important;
opacity: .85;
}
.cartTop .pokupki{
font-size: 13px !important;
font-weight: 900 !important;
color: var(--text) !important;
}
.cartTop .pokupki b,
.cartTop .pokupki strong{
color: var(--brand) !important;
}
.cartTop #cart-summary:hover{
border-color: rgba(152,64,74,.35) !important;
box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
transform: translateY(-1px);
transition: all .2s ease;
}
/* =====================
v13: Layout aligned to your actual homepage HTML (#main2)
Goals:
- Left menu column width == one category card (1/4)
- Banner width == three category cards (3/4)
- Add a real gutter between menu and right column (banner + cards)
- Remove "right field" by keeping banner inside the 3/4 column with no extra margins
===================== */
@media (min-width: 761px){
/* Re-introduce gutters because you use padding0 on bootstrap columns */
#main2 > .col-md-3.categoryFoo.padding0{
padding-right: 16px !important; /* space between menu and right side */
}
#main2 > .col-md-9.padding0{
padding-left: 16px !important; /* same gutter from menu */
padding-right: 0 !important; /* let content reach right edge of column */
}
/* Banner: full width of the right column, no weird margins */
.bannerHome{
width: 100% !important;
margin: 0 0 24px 0 !important;
height: 440px;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow);
}
.bannerHome img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
display: block;
}
/* Category tiles: strict 4-column grid with equal gaps */
.home-cat{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.home-cat .produt{
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure the left-most card doesn't touch the menu column */
.content.col-md-12.padding0{
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Mobile: keep your existing mobile banner/menu behavior */
@media (max-width: 760px){
#main2 > .col-md-9.padding0{ padding-left: 0 !important; }
}
/* =====================
v14: spacing/flow fixes under banner + tidy H1
- prevent banner overlap feeling
- add clear separation and consistent rhythm
===================== */
@media (min-width: 761px){
.bannerHome{
margin-bottom: 40px !important;
}
}
.homeH1{
display: block;
clear: both;
margin: 0 0 32px 0 !important;
padding: 0 !important;
text-align: center;
font-size: 22px;
font-weight: 650;
color: #666;
}
/* extra safety: ensure the block that follows starts on a new row */
.content.col-md-12{
clear: both;
}
/* =====================
v15: Top menu as a clean full-width bar ("полоска")
Works with common Webasyst theme selectors. Safe: only affects menus in header/top area.
===================== */
/* top bar container candidates */
.topmenu, .top-menu, .menu-top, .menuTop, .menuH, .menu_header, .header-menu, .head-menu, #topmenu, #menuTop{
background: #f7f7f8 !important;
border-bottom: 1px solid var(--border) !important;
}
/* if menu is just a UL centered at the very top */
.topmenu ul, .top-menu ul, .menu-top ul, .menuTop ul, .menuH ul, .menu_header ul, .header-menu ul, .head-menu ul, #topmenu ul, #menuTop ul{
margin: 0 !important;
padding: 8px 12px !important;
list-style: none !important;
display: flex !important;
gap: 8px !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap;
}
/* links */
.topmenu a, .top-menu a, .menu-top a, .menuTop a, .menuH a, .menu_header a, .header-menu a, .head-menu a, #topmenu a, #menuTop a{
display: inline-flex !important;
align-items: center !important;
padding: 7px 12px !important;
border-radius: 999px !important;
color: var(--text) !important;
font-weight: 650 !important;
font-size: 14px !important;
text-decoration: none !important;
line-height: 1 !important;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
/* hover/active */
.topmenu a:hover, .top-menu a:hover, .menu-top a:hover, .menuTop a:hover, .menuH a:hover, .menu_header a:hover, .header-menu a:hover, .head-menu a:hover, #topmenu a:hover, #menuTop a:hover{
background: rgba(152,64,74,.08) !important;
color: var(--brand) !important;
}
.topmenu li.selected > a, .top-menu li.selected > a, .menu-top li.selected > a, .menuTop li.selected > a, .menuH li.selected > a, .menu_header li.selected > a, .header-menu li.selected > a, .head-menu li.selected > a,
#topmenu li.selected > a, #menuTop li.selected > a,
.topmenu li.active > a, .top-menu li.active > a, .menu-top li.active > a, .menuTop li.active > a, .menuH li.active > a, .menu_header li.active > a, .header-menu li.active > a, .head-menu li.active > a,
#topmenu li.active > a, #menuTop li.active > a{
background: rgba(152,64,74,.12) !important;
color: var(--brand) !important;
}
/* Make it truly full-width if the menu sits inside a narrow container */
.topmenu, .top-menu, .menu-top, .menuTop, .menuH, .menu_header, .header-menu, .head-menu, #topmenu, #menuTop{
width: 100% !important;
}
/* Mobile: tighten */
@media (max-width: 760px){
.topmenu ul, .top-menu ul, .menu-top ul, .menuTop ul, .menuH ul, .menu_header ul, .header-menu ul, .head-menu ul, #topmenu ul, #menuTop ul{
justify-content: flex-start !important;
padding: 8px 10px !important;
gap: 6px !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.topmenu a, .top-menu a, .menu-top a, .menuTop a, .menuH a, .menu_header a, .header-menu a, .head-menu a, #topmenu a, #menuTop a{
font-size: 13px !important;
padding: 7px 10px !important;
white-space: nowrap;
}
}
/* =====================
v16: Top menu = compact grey full-width bar (edge-to-edge)
===================== */
.topmenu,
.top-menu,
.menu-top,
.menuTop,
.menuH,
.menu_header,
.header-menu,
.head-menu,
#topmenu,
#menuTop{
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
background: #f1f1f1 !important;
border-bottom: 1px solid #e0e0e0 !important;
}
.topmenu ul,
.top-menu ul,
.menu-top ul,
.menuTop ul,
.menuH ul,
.menu_header ul,
.header-menu ul,
.head-menu ul,
#topmenu ul,
#menuTop ul{
margin: 0 auto !important;
padding: 6px 12px !important;
max-width: 1320px;
list-style: none !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: wrap;
}
.topmenu a,
.top-menu a,
.menu-top a,
.menuTop a,
.menuH a,
.menu_header a,
.header-menu a,
.head-menu a,
#topmenu a,
#menuTop a{
padding: 4px 6px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #444 !important;
border-radius: 0 !important;
text-decoration: none !important;
}
.topmenu a:hover,
.top-menu a:hover,
.menu-top a:hover,
.menuTop a:hover,
.menuH a:hover,
.menu_header a:hover,
.header-menu a:hover,
.head-menu a:hover,
#topmenu a:hover,
#menuTop a:hover{
color: #000 !important;
text-decoration: underline !important;
}
.topmenu li.active > a,
.top-menu li.active > a,
.menu-top li.active > a,
#topmenu li.active > a,
#menuTop li.active > a{
font-weight: 600 !important;
color: #000 !important;
}
@media (max-width: 760px){
.topmenu ul,
.top-menu ul,
.menu-top ul,
#topmenu ul,
#menuTop ul{
justify-content: flex-start !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 12px !important;
padding: 6px 10px !important;
flex-wrap: nowrap;
}
.topmenu a,
.top-menu a,
.menu-top a,
#topmenu a,
#menuTop a{
white-space: nowrap;
font-size: 13px !important;
}
}
/* =====================
v17: Ultra-compact full-width grey top bar (overrides v15/v16)
===================== */
/* outer bar - edge-to-edge */
.topmenu,
.top-menu,
.menu-top,
.menuTop,
.menuH,
.menu_header,
.header-menu,
.head-menu,
#topmenu,
#menuTop{
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
background: #f1f1f1 !important;
border-bottom: 1px solid #e2e2e2 !important;
}
/* inner list - compact height */
.topmenu ul,
.top-menu ul,
.menu-top ul,
.menuTop ul,
.menuH ul,
.menu_header ul,
.header-menu ul,
.head-menu ul,
#topmenu ul,
#menuTop ul{
margin: 0 auto !important;
padding: 4px 10px !important; /* smaller than v16 */
max-width: 1320px;
list-style: none !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 18px !important;
flex-wrap: wrap;
}
/* links - strict/compact */
.topmenu a,
.top-menu a,
.menu-top a,
.menuTop a,
.menuH a,
.menu_header a,
.header-menu a,
.head-menu a,
#topmenu a,
#menuTop a{
padding: 0 !important;
font-size: 12.5px !important;
line-height: 1 !important;
font-weight: 500 !important;
color: #555 !important;
border-radius: 0 !important;
text-decoration: none !important;
white-space: nowrap;
transition: color .15s ease, text-decoration-color .15s ease;
}
.topmenu a:hover,
.top-menu a:hover,
.menu-top a:hover,
.menuTop a:hover,
.menuH a:hover,
.menu_header a:hover,
.header-menu a:hover,
.head-menu a:hover,
#topmenu a:hover,
#menuTop a:hover{
color: #000 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* active */
.topmenu li.active > a,
.top-menu li.active > a,
.menu-top li.active > a,
#topmenu li.active > a,
#menuTop li.active > a{
font-weight: 600 !important;
color: #000 !important;
}
@media (max-width: 760px){
.topmenu ul,
.top-menu ul,
.menu-top ul,
#topmenu ul,
#menuTop ul{
justify-content: flex-start !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 14px !important;
padding: 3px 10px !important;
flex-wrap: nowrap;
}
.topmenu a,
.top-menu a,
.menu-top a,
#topmenu a,
#menuTop a{
font-size: 12px !important;
}
}
/* =====================
v18: Targeted top menu (your real selectors)
HTML: