html.aydin-page-locked,
html.aydin-page-locked body,
body.aydin-page-locked {
overscroll-behavior: none !important;
}
/* AidinToy Smart Category Menu 2.4.0 — full-viewport portal layer */
:root {
--ay-blue: #1976d2;
--ay-blue-dark: #0c4f93;
--ay-red: #ef3d4a;
--ay-green: #37a65a;
--ay-yellow: #f4bb27;
--ay-ink: #17304a;
--ay-muted: #718396;
--ay-panel: #f7f9fc;
--ay-line: rgba(18, 45, 71, .10);
--ay-shadow: 0 24px 70px rgba(20, 46, 74, .18);
--ay-adminbar-height: 0px;
}
.aydin-smart-menu,
.aydin-smart-menu *,
.aydin-menu-panel,
.aydin-menu-panel *,
.aydin-menu-overlay {
box-sizing: border-box;
}
.aydin-smart-menu.aydin-css-pending .aydin-menu-atmosphere {
display: none !important;
}
.aydin-smart-menu.aydin-css-pending .aydin-menu-panel,
.aydin-smart-menu.aydin-css-pending .aydin-menu-overlay {
visibility: hidden !important;
pointer-events: none !important;
}
/* Server-selected model is removed from layout before the stylesheet finishes loading.
This prevents the two menu variants from briefly occupying header space and causing
the header navigation to jump/wrap during first paint. */
@media (min-width:701px){
.aydin-hide-desktop{display:none!important;}
}
@media (max-width:700px){
.aydin-hide-mobile{display:none!important;}
}
.aydin-smart-menu {
direction: rtl;
position: relative;
display: inline-block;
width: auto;
z-index: 1000000;
font-family: inherit;
}
.aydin-smart-menu button,
.aydin-smart-menu a,
.aydin-menu-panel button,
.aydin-menu-panel a {
-webkit-tap-highlight-color: transparent;
}
/* Clean header trigger: no decorative icon, just a compact color signature. */
.aydin-menu-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
min-width: 154px;
padding: 8px 14px;
border: 1px solid rgba(23, 48, 74, .10);
border-radius: 13px;
background: rgba(255,255,255,.98);
color: var(--ay-ink);
font: inherit;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 8px 22px rgba(23,48,74,.08);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
overflow: hidden;
}
.aydin-menu-trigger::after {
content: "";
width: 30px;
height: 5px;
flex: 0 0 30px;
border-radius: 999px;
background: linear-gradient(90deg, var(--ay-yellow) 0 25%, var(--ay-green) 25% 50%, var(--ay-blue) 50% 75%, var(--ay-red) 75% 100%);
}
.aydin-menu-trigger::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 2px;
background: linear-gradient(90deg, var(--ay-blue), var(--ay-red), var(--ay-green), var(--ay-yellow));
opacity: .85;
}
.aydin-menu-trigger:hover,
.aydin-menu-trigger:focus-visible,
.aydin-smart-menu.is-open .aydin-menu-trigger {
transform: translateY(-1px);
border-color: rgba(25,118,210,.24);
box-shadow: 0 12px 28px rgba(23,48,74,.12);
outline: none;
}
.aydin-trigger-label {
white-space: nowrap;
}
/* Full-screen layer. Page scrolling is locked while this is open. */
.aydin-menu-overlay {
/* 2.4.10: lighter dark veil so the site remains visibly present beneath the menu. */
position: fixed;
inset: 0;
z-index: 2147482999;
background: rgba(10, 20, 30, .16);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s ease, visibility .22s ease;
}
.aydin-smart-menu.is-open .aydin-menu-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.aydin-menu-panel {
position: fixed;
direction: rtl;
font-family: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
width: 100vw;
max-width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(23,48,74,.18) transparent;
/* 2.4.11: translucent menu glass so the darkened site remains visible underneath. */
background:
radial-gradient(circle at 8% 10%, rgba(25,118,210,.08), transparent 23%),
radial-gradient(circle at 94% 28%, rgba(239,61,74,.06), transparent 22%),
radial-gradient(circle at 12% 86%, rgba(55,166,90,.06), transparent 21%),
radial-gradient(circle at 88% 90%, rgba(244,187,39,.07), transparent 21%),
rgba(247,249,252,.38);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
box-shadow: var(--ay-shadow);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px) scale(.995);
transition: opacity .22s ease, visibility .22s ease, transform .28s cubic-bezier(.2,.75,.2,1);
z-index: 2147483000;
isolation: isolate;
}
.aydin-smart-menu.is-open .aydin-menu-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* When open, the layer is temporarily portaled to . This escapes
* Elementor/header/banner stacking contexts and keeps the menu over the full viewport. */
html.aydin-menu-portal-open .aydin-menu-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
html.aydin-menu-portal-open .aydin-menu-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.aydin-menu-panel::-webkit-scrollbar {
width: 8px;
}
.aydin-menu-panel::-webkit-scrollbar-thumb {
background: rgba(23,48,74,.18);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
/* Toy line-art atmosphere. Deliberately subtle so it stays decorative, not noisy. */
.aydin-menu-atmosphere {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.aydin-toy-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.aydin-menu-toy {
position: absolute;
display: block;
width: var(--toy-size, 68px);
height: var(--toy-size, 68px);
color: var(--toy-color, var(--ay-blue));
opacity: .26;
pointer-events: none;
transform: rotate(var(--toy-rotate, 0deg));
}
.aydin-menu-toy svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.aydin-menu-toy:nth-of-type(4n+1) { --toy-color: var(--ay-blue); }
.aydin-menu-toy:nth-of-type(4n+2) { --toy-color: var(--ay-red); }
.aydin-menu-toy:nth-of-type(4n+3) { --toy-color: var(--ay-green); }
.aydin-menu-toy:nth-of-type(4n) { --toy-color: var(--ay-yellow); }
.toy-1{top:5%;right:2%;--toy-size:86px;--toy-rotate:-11deg}.toy-2{top:11%;right:13%;--toy-size:50px;--toy-rotate:10deg}.toy-3{top:18%;right:4%;--toy-size:62px;--toy-rotate:-7deg}.toy-4{top:26%;right:18%;--toy-size:92px;--toy-rotate:12deg}.toy-5{top:34%;right:7%;--toy-size:58px;--toy-rotate:-15deg}.toy-6{top:43%;right:22%;--toy-size:76px;--toy-rotate:8deg}.toy-7{top:51%;right:4%;--toy-size:58px;--toy-rotate:13deg}.toy-8{top:61%;right:16%;--toy-size:84px;--toy-rotate:-8deg}.toy-9{top:70%;right:6%;--toy-size:70px;--toy-rotate:11deg}.toy-10{top:80%;right:20%;--toy-size:55px;--toy-rotate:-13deg}.toy-11{top:90%;right:4%;--toy-size:78px;--toy-rotate:7deg}.toy-12{top:92%;right:27%;--toy-size:48px;--toy-rotate:-9deg}
.toy-13{top:6%;left:3%;--toy-size:74px;--toy-rotate:9deg}.toy-14{top:13%;left:17%;--toy-size:58px;--toy-rotate:-7deg}.toy-15{top:22%;left:5%;--toy-size:88px;--toy-rotate:12deg}.toy-16{top:31%;left:20%;--toy-size:52px;--toy-rotate:-13deg}.toy-17{top:40%;left:3%;--toy-size:78px;--toy-rotate:10deg}.toy-18{top:50%;left:21%;--toy-size:66px;--toy-rotate:-8deg}.toy-19{top:60%;left:6%;--toy-size:92px;--toy-rotate:13deg}.toy-20{top:69%;left:24%;--toy-size:52px;--toy-rotate:-12deg}.toy-21{top:78%;left:4%;--toy-size:74px;--toy-rotate:8deg}.toy-22{top:86%;left:19%;--toy-size:84px;--toy-rotate:-9deg}.toy-23{top:92%;left:6%;--toy-size:62px;--toy-rotate:14deg}.toy-24{top:96%;left:28%;--toy-size:50px;--toy-rotate:-6deg}
.toy-25{top:8%;left:43%;--toy-size:46px;--toy-rotate:12deg}.toy-26{top:28%;left:39%;--toy-size:62px;--toy-rotate:-14deg}.toy-27{top:49%;left:44%;--toy-size:52px;--toy-rotate:9deg}.toy-28{top:69%;left:40%;--toy-size:68px;--toy-rotate:-11deg}.toy-29{top:89%;left:43%;--toy-size:48px;--toy-rotate:8deg}.toy-30{top:17%;right:41%;--toy-size:54px;--toy-rotate:-10deg}.toy-31{top:39%;right:43%;--toy-size:66px;--toy-rotate:11deg}.toy-32{top:60%;right:40%;--toy-size:48px;--toy-rotate:-7deg}
.aydin-menu-head {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 82px;
padding: 12px clamp(18px, 3vw, 46px);
background: rgba(255,255,255,.80);
border-bottom: 1px solid rgba(23,48,74,.09);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 10;
}
.aydin-menu-title-wrap {
display: flex;
align-items: center;
min-width: 0;
}
.aydin-menu-overline {
display: block;
margin-bottom: 4px;
color: var(--ay-blue);
font-size: 10px;
font-weight: 900;
letter-spacing: .18em;
line-height: 1;
}
.aydin-menu-title {
display: block;
color: var(--ay-ink);
font-size: clamp(18px, 1.45vw, 23px);
font-weight: 950;
line-height: 1.3;
}
.aydin-menu-close {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 64px;
width: 64px;
height: 64px;
padding: 0;
border: 0;
border-radius: 18px;
background: linear-gradient(145deg, #ff5665 0%, var(--ay-red) 100%);
color: #fff;
cursor: pointer;
box-shadow: 0 14px 28px rgba(239,61,74,.28), 0 0 0 5px rgba(239,61,74,.08);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.aydin-menu-close:hover,
.aydin-menu-close:focus-visible {
transform: rotate(90deg) scale(1.03);
box-shadow: 0 18px 34px rgba(239,61,74,.34), 0 0 0 6px rgba(239,61,74,.10);
filter: saturate(1.05);
outline: none;
}
.aydin-menu-close::before {
content: "";
position: absolute;
inset: 4px;
border: 1px solid rgba(255,255,255,.34);
border-radius: 13px;
pointer-events: none;
}
.aydin-menu-close span {
position: absolute;
width: 29px;
height: 4px;
border-radius: 99px;
background: currentColor;
}
.aydin-menu-close span:first-child { transform: rotate(45deg); }
.aydin-menu-close span:last-child { transform: rotate(-45deg); }
.aydin-menu-layout {
position: relative;
width: 100%;
max-width: 1720px;
margin: 0 auto;
padding: 20px clamp(16px, 2.6vw, 42px) 36px;
z-index: 3;
}
.aydin-all-products-box {
margin-bottom: 18px;
}
.aydin-all-products {
position: relative;
display: flex;
align-items: center;
gap: 13px;
min-height: 92px;
padding: 16px 22px;
border: 1px solid rgba(25,118,210,.18);
border-radius: 24px;
background:
radial-gradient(circle at 8% 30%, rgba(255,255,255,.30), transparent 28%),
linear-gradient(110deg, #0e57a7 0%, #1976d2 52%, #35b7ff 100%);
color: #fff;
text-decoration: none;
overflow: hidden;
box-shadow: 0 18px 40px rgba(25,118,210,.22);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.aydin-all-products::before,
.aydin-all-products::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.aydin-all-products::before {
width: 170px;
height: 170px;
right: -80px;
top: -90px;
border: 2px solid rgba(255,255,255,.16);
}
.aydin-all-products::after {
width: 80px;
height: 80px;
left: -24px;
bottom: -38px;
border: 2px solid rgba(244,187,39,.38);
}
.aydin-all-products:hover,
.aydin-all-products:focus-visible {
transform: translateY(-2px);
filter: saturate(1.04);
box-shadow: 0 22px 48px rgba(25,118,210,.28);
outline: none;
}
.aydin-all-products-small,
.aydin-all-products-text,
.aydin-all-products-sub,
.aydin-all-products-arrow {
position: relative;
z-index: 2;
}
.aydin-all-products-small {
padding: 5px 8px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
color: rgba(255,255,255,.86);
font-size: 9px;
font-weight: 900;
letter-spacing: .16em;
}
.aydin-all-products-text {
color: #fff;
font-size: clamp(19px, 1.55vw, 24px);
font-weight: 950;
line-height: 1.35;
}
.aydin-all-products-sub {
color: rgba(255,255,255,.78);
font-size: 12px;
font-weight: 700;
}
.aydin-all-products-arrow {
margin-inline-start: auto;
display: inline-flex;
width: 28px;
height: 28px;
color: var(--ay-yellow);
transition: transform .18s ease;
}
.aydin-all-products:hover .aydin-all-products-arrow,
.aydin-all-products:focus-visible .aydin-all-products-arrow {
transform: translateX(-4px);
}
.aydin-all-products-arrow svg {
width: 100%;
height: 100%;
}
.aydin-category-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
width: 100%;
min-width: 0;
align-items: start;
}
.aydin-category-column {
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
align-items: stretch;
}
/* Premium category block: each block has its own height and expands independently. */
.aydin-cat-group {
position: relative;
width: 100%;
min-width: 0;
align-self: flex-start;
overflow: hidden;
border: 1px solid rgba(23,48,74,.09);
border-radius: 21px;
background: rgba(255,255,255,.50);
box-shadow: 0 10px 26px rgba(23,48,74,.065);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.aydin-cat-group::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, var(--ay-card-color), color-mix(in srgb, var(--ay-card-color) 65%, white));
}
.aydin-cat-group:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(23,48,74,.095);
}
/* 2.4.19 — deterministic four-color rhythm: item 1=red, 2=green, 3=blue, 4=yellow, then repeat. */
.aydin-color-1 { --ay-card-color: var(--ay-red); --ay-card-soft: rgba(239,61,74,.075); --ay-card-line: rgba(239,61,74,.18); }
.aydin-color-2 { --ay-card-color: var(--ay-green); --ay-card-soft: rgba(55,166,90,.075); --ay-card-line: rgba(55,166,90,.18); }
.aydin-color-3 { --ay-card-color: var(--ay-blue); --ay-card-soft: rgba(25,118,210,.075); --ay-card-line: rgba(25,118,210,.18); }
.aydin-color-4 { --ay-card-color: var(--ay-yellow); --ay-card-soft: rgba(244,187,39,.10); --ay-card-line: rgba(244,187,39,.23); }
.aydin-cat-row {
display: flex;
align-items: center;
gap: 10px;
min-height: 88px;
padding: 12px 12px 12px 14px;
}
.aydin-cat-link {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 auto;
min-width: 0;
padding: 5px;
border-radius: 14px;
color: var(--ay-ink);
text-decoration: none;
transition: color .16s ease, background .16s ease;
}
.aydin-cat-link:hover,
.aydin-cat-link:focus-visible {
color: var(--ay-card-color);
background: var(--ay-card-soft);
outline: none;
}
.aydin-cat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 50px;
width: 50px;
height: 50px;
border-radius: 16px;
background: linear-gradient(145deg, #fff, var(--ay-card-soft));
color: var(--ay-card-color);
border: 1px solid var(--ay-card-line);
box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}
.aydin-cat-icon svg {
width: 28px;
height: 28px;
}
.aydin-cat-copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
}
.aydin-cat-name {
display: block;
min-width: 0;
color: inherit;
font-size: 15px;
font-weight: 950;
line-height: 1.55;
white-space: normal;
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
}
.aydin-cat-meta {
display: block;
color: #111827;
font-size: 10.5px;
font-weight: 850;
line-height: 1.3;
}
.aydin-cat-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--ay-card-line);
border-radius: 12px;
background: var(--ay-card-soft);
color: var(--ay-card-color);
cursor: pointer;
transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.aydin-cat-toggle:hover,
.aydin-cat-toggle:focus-visible {
background: var(--ay-card-color);
color: #fff;
box-shadow: 0 7px 16px rgba(23,48,74,.12);
outline: none;
}
.aydin-toggle-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
transition: transform .20s ease;
}
.aydin-toggle-symbol svg {
width: 100%;
height: 100%;
}
.aydin-cat-group.is-expanded > .aydin-cat-row {
padding-bottom: 10px;
}
.aydin-cat-group.is-expanded > .aydin-cat-row .aydin-cat-toggle,
.aydin-cat-item.is-expanded > .aydin-cat-row .aydin-cat-toggle {
background: var(--ay-card-color);
color: #fff;
}
.aydin-cat-group.is-expanded > .aydin-cat-row .aydin-toggle-symbol,
.aydin-cat-item.is-expanded > .aydin-cat-row .aydin-toggle-symbol {
transform: rotate(180deg);
}
.aydin-cat-children {
margin: 0 12px 12px;
padding: 10px;
border: 1px solid var(--ay-card-line);
border-radius: 15px;
background: linear-gradient(180deg, color-mix(in srgb, var(--ay-card-soft) 62%, transparent), rgba(255,255,255,.46));
}
.aydin-cat-children[hidden] {
display: none;
}
.aydin-cat-item {
min-width: 0;
}
.aydin-cat-item + .aydin-cat-item {
margin-top: 6px;
}
.aydin-cat-item .aydin-cat-row {
min-height: 40px;
padding: 3px 3px;
}
.aydin-cat-item .aydin-cat-link {
gap: 8px;
padding: 7px 8px;
color: #526b80;
font-size: 12.1px;
font-weight: 750;
line-height: 1.6;
}
.aydin-cat-item .aydin-cat-copy {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
justify-content: center;
gap: 1px;
}
.aydin-cat-item .aydin-cat-name {
font-size: inherit;
line-height: 1.55;
}
.aydin-cat-item .aydin-cat-meta {
font-size: 9px;
line-height: 1.25;
color: #7a8d9d;
font-weight: 700;
}
.aydin-cat-item .aydin-cat-link:hover,
.aydin-cat-item .aydin-cat-link:focus-visible {
color: var(--ay-ink);
}
.aydin-cat-bullet {
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 3px;
background: var(--ay-card-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ay-card-color) 10%, transparent);
}
.aydin-cat-item .aydin-cat-toggle {
flex-basis: 28px;
width: 28px;
height: 28px;
border-radius: 9px;
}
.aydin-cat-item .aydin-toggle-symbol {
width: 14px;
height: 14px;
}
.aydin-depth-2 .aydin-cat-link {
padding-right: 18px;
font-size: 11.6px;
}
@supports not (color: color-mix(in srgb, black 10%, white)) {
.aydin-cat-group::before { background: var(--ay-card-color); }
.aydin-cat-bullet { box-shadow: none; }
}
@media (max-width: 1180px) and (min-width: 701px) {
.aydin-menu-head {
min-height: 74px;
}
.aydin-menu-layout {
padding-inline: 16px;
}
.aydin-category-grid {
gap: 12px;
}
.aydin-category-column {
gap: 12px;
}
.aydin-cat-row {
min-height: 82px;
padding: 10px;
}
.aydin-cat-icon {
flex-basis: 44px;
width: 44px;
height: 44px;
border-radius: 14px;
}
.aydin-cat-name {
font-size: 13.5px;
}
}
@media (max-width: 940px) and (min-width: 701px) {
.aydin-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
/* Mobile 2.4.0: flatten the desktop column wrappers into one real list.
* This prevents column/chunk boundaries from leaking into mobile ordering,
* while keeping each category card an independent accordion block. */
.aydin-category-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.aydin-category-column {
display: contents;
}
.aydin-cat-group {
width: 100%;
min-width: 0;
align-self: start;
}
.aydin-menu-trigger {
min-width: 138px;
min-height: 44px;
padding: 7px 12px;
border-radius: 12px;
font-size: 12px;
}
.aydin-menu-trigger::after {
width: 24px;
flex-basis: 24px;
}
.aydin-menu-head {
min-height: 64px;
padding: 9px 12px;
}
.aydin-menu-title {
font-size: 16px;
}
.aydin-menu-close {
flex-basis: 58px;
width: 58px;
height: 58px;
border-radius: 16px;
}
.aydin-menu-layout {
padding: 12px 10px 20px;
}
.aydin-all-products {
min-height: 76px;
padding: 12px 14px;
border-radius: 18px;
flex-wrap: wrap;
gap: 8px;
}
.aydin-all-products-small {
font-size: 8px;
}
.aydin-all-products-text {
font-size: 17px;
}
.aydin-all-products-sub {
width: 100%;
margin-right: 1px;
font-size: 10.5px;
}
.aydin-category-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.aydin-category-column {
gap: 10px;
}
.aydin-cat-group {
border-radius: 17px;
}
.aydin-cat-row {
min-height: 66px;
padding: 8px;
}
.aydin-cat-icon {
flex-basis: 40px;
width: 40px;
height: 40px;
border-radius: 12px;
}
.aydin-cat-icon svg {
width: 23px;
height: 23px;
}
.aydin-cat-name {
font-size: 12.6px;
line-height: 1.6;
}
.aydin-cat-meta {
font-size: 9.5px;
}
.aydin-cat-item .aydin-cat-meta {
font-size: 8.5px;
}
.aydin-cat-toggle {
flex-basis: 32px;
width: 32px;
height: 32px;
border-radius: 10px;
}
.aydin-cat-children {
margin: 0 8px 8px;
padding: 8px;
border-radius: 12px;
}
.aydin-menu-toy {
opacity: .22;
}
}
@media (prefers-reduced-motion: reduce) {
.aydin-smart-menu *,
.aydin-smart-menu *::before,
.aydin-smart-menu *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* Mobile refinement 2.3.6: branded circular menu trigger + compact category cards. */
.aydin-mobile-trigger-mark {
display: none;
}
@media (max-width: 700px) {
.aydin-menu-trigger {
position: relative;
width: 60px;
min-width: 60px;
height: 60px;
min-height: 60px;
padding: 0;
border: 0;
border-radius: 50%;
gap: 0;
font-size: 0;
line-height: 1;
overflow: visible;
background: transparent;
color: var(--ay-ink);
box-shadow: none;
}
.aydin-menu-trigger::before,
.aydin-menu-trigger::after {
display: none !important;
}
.aydin-menu-trigger .aydin-trigger-icon,
.aydin-menu-trigger .aydin-trigger-label {
display: none !important;
}
.aydin-mobile-trigger-mark {
position: relative;
display: flex;
width: 56px;
height: 56px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: 2px solid rgba(255,255,255,.98);
border-radius: 50%;
background:
radial-gradient(circle at 32% 25%, #ffffff 0%, #ffffff 34%, #f7fafd 68%, #eef4fa 100%);
box-shadow:
0 0 0 2px rgba(25,118,210,.15),
0 0 0 5px rgba(244,187,39,.10),
0 10px 22px rgba(23,48,74,.17),
inset 0 1px 0 rgba(255,255,255,.95);
overflow: hidden;
}
/* tiny multi-colour arc gives the round control a branded signature */
.aydin-mobile-trigger-mark::before {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
border: 2px solid transparent;
background: linear-gradient(#fff,#fff) padding-box,
conic-gradient(var(--ay-green) 0 25%, var(--ay-red) 25% 50%, var(--ay-blue) 50% 75%, var(--ay-yellow) 75% 100%) border-box;
opacity: .95;
pointer-events: none;
}
.aydin-mobile-trigger-bars {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: -1px;
}
.aydin-mobile-trigger-bars i {
display: block;
width: 24px;
height: 3px;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(23,48,74,.12);
}
.aydin-mobile-trigger-bars i:nth-child(1) { background: var(--ay-green); }
.aydin-mobile-trigger-bars i:nth-child(2) { background: var(--ay-red); }
.aydin-mobile-trigger-bars i:nth-child(3) { background: var(--ay-blue); }
.aydin-mobile-trigger-word {
position: relative;
z-index: 1;
display: block;
margin-top: -1px;
color: var(--ay-ink);
font-size: 8px;
line-height: 1;
font-weight: 900;
letter-spacing: 0;
}
.aydin-menu-trigger:hover,
.aydin-menu-trigger:focus-visible,
.aydin-smart-menu.is-open .aydin-menu-trigger {
transform: translateY(-1px);
outline: none;
}
.aydin-menu-trigger:hover .aydin-mobile-trigger-mark,
.aydin-menu-trigger:focus-visible .aydin-mobile-trigger-mark,
.aydin-smart-menu.is-open .aydin-mobile-trigger-mark {
box-shadow:
0 0 0 2px rgba(25,118,210,.20),
0 0 0 5px rgba(244,187,39,.14),
0 13px 28px rgba(23,48,74,.21),
inset 0 1px 0 rgba(255,255,255,.96);
}
.aydin-menu-title {
font-size: 12px;
line-height: 1.45;
font-weight: 900;
}
.aydin-menu-overline {
margin-bottom: 3px;
font-size: 7px;
letter-spacing: .14em;
}
.aydin-cat-group {
border-radius: 14px;
overflow: hidden;
}
.aydin-cat-row {
min-height: 58px;
border-radius: 0;
}
.aydin-cat-name {
font-size: 11px;
line-height: 1.55;
font-weight: 850;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.aydin-cat-meta {
font-size: 8px;
}
.aydin-cat-toggle {
border-radius: 10px;
}
.aydin-cat-icon {
border-radius: 12px;
}
/* Expanded submenus are a normal rectangular panel, never a full-card pill/oval. */
.aydin-cat-children {
border-radius: 10px;
margin: 0 8px 8px;
padding: 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--ay-card-soft) 60%, transparent), rgba(255,255,255,.44));
}
}
/* 2.3.8: Let the decorative toy line art remain visible through the card surfaces. */
.aydin-cat-group {
background: rgba(255,255,255,.82);
backdrop-filter: blur(.6px);
-webkit-backdrop-filter: blur(.6px);
}
@media (max-width: 700px) {
.aydin-cat-group {
background: rgba(255,255,255,.42);
}
}
/* 2.4.0 — mobile list hardening. The desktop columns are presentation-only on
* phones, so every root category becomes a direct one-column grid item in the
* original PHP order. Expanded content stays inside its own card. */
@media (max-width: 700px) {
.aydin-category-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-flow: row !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
}
.aydin-category-column {
display: contents !important;
}
.aydin-cat-group {
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
align-self: start !important;
overflow: clip;
}
.aydin-cat-group .aydin-cat-row {
width: 100%;
}
.aydin-cat-link {
min-width: 0 !important;
}
.aydin-cat-copy {
min-width: 0 !important;
}
.aydin-cat-children {
width: auto;
max-width: none;
overflow: visible;
}
.aydin-cat-item {
min-width: 0;
width: 100%;
}
.aydin-cat-item .aydin-cat-row {
width: 100%;
}
}
/* 2.4.6 — lightweight fixed toy atmosphere.
* The 2.4.1 layout stays intact; only the decorative background is rebuilt as
* one static CSS image so it does not scroll, jump or create mobile jank. */
.aydin-menu-panel {
transform: none;
transition: opacity .18s ease, visibility .18s ease;
}
.aydin-menu-atmosphere {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.aydin-menu-toy-sprite,
.aydin-menu-atmosphere .aydin-menu-toy {
display: none !important;
}
.aydin-menu-toy-pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .13;
background-repeat: repeat;
background-position: 0 0;
background-size: 330px 330px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='330' viewBox='0 0 330 330'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cg stroke='%231976d2' opacity='.9'%3E%3Cpath d='M24 68h44l7 13H17zM27 68l5-10h17l5 10M28 81v8M63 81v8M21 89h15M56 89h15'/%3E%3C/g%3E%3Cg stroke='%23ef3d4a' opacity='.82'%3E%3Cpath d='M152 33l25 25-25 25-25-25zM152 40v36M134 58h36'/%3E%3C/g%3E%3Cg stroke='%2337a65a' opacity='.88'%3E%3Ccircle cx='255' cy='53' r='22'/%3E%3Cpath d='M255 31v44M237 60h36'/%3E%3C/g%3E%3Cg stroke='%23f4bb27' opacity='.88'%3E%3Cpath d='M57 167h39v39H57zM69 167v-10h15v10M57 181h39M77 181v25'/%3E%3C/g%3E%3Cg stroke='%231976d2' opacity='.84'%3E%3Crect x='150' y='153' width='34' height='45' rx='9'/%3E%3Cpath d='M158 153v-9M176 153v-9M150 174h-10M184 174h10M159 198v9M175 198v9'/%3E%3Ccircle cx='160' cy='171' r='2.2' fill='%231976d2'/%3E%3Ccircle cx='174' cy='171' r='2.2' fill='%231976d2'/%3E%3C/g%3E%3Cg stroke='%23ef3d4a' opacity='.82'%3E%3Ccircle cx='265' cy='185' r='24'/%3E%3Cpath d='M241 185h48M265 161v48M248 168l34 34M282 168l-34 34'/%3E%3C/g%3E%3Cg stroke='%2337a65a' opacity='.86'%3E%3Cpath d='M46 300v-36l27-20 27 20v36H46zM61 300v-22h24v22M54 264h19'/%3E%3C/g%3E%3Cg stroke='%23f4bb27' opacity='.9'%3E%3Cpath d='M162 274h42l-7 26h-28zM168 274l-4-12h33l4 12M173 300v10M194 300v10'/%3E%3C/g%3E%3Cg stroke='%231976d2' opacity='.82'%3E%3Cpath d='M274 276l18-24 18 24-18 26zM292 252v50M284 279h16'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.aydin-menu-head,
.aydin-menu-layout {
position: relative;
z-index: 1;
}
/* Avoid backdrop-filter on phones; the menu remains visually separated with a solid header. */
@media (max-width: 700px) {
/* Mobile: disable the decorative pattern completely.
* This avoids the top-only/jump effect and keeps the category list fast. */
.aydin-menu-toy-pattern {
display: none !important;
}
.aydin-menu-head {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255,255,255,.95);
}
.aydin-menu-toy-pattern {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.aydin-menu-panel {
transition: none !important;
}
}
/* 2.4.9 — header-anchored open panel, stronger submenu labels, lighter mobile trigger shadow. */
html.aydin-menu-portal-open,
html.aydin-menu-portal-open body {
overflow: hidden !important;
overscroll-behavior: none !important;
}
html.aydin-menu-portal-open .aydin-menu-panel {
top: var(--ay-menu-top, 0px);
bottom: 0;
height: calc(100dvh - var(--ay-menu-top, 0px));
max-height: calc(100dvh - var(--ay-menu-top, 0px));
width: 100vw;
max-width: 100vw;
margin: 0;
}
html.aydin-menu-portal-open .aydin-menu-overlay {
top: var(--ay-menu-top, 0px);
bottom: 0;
height: calc(100dvh - var(--ay-menu-top, 0px));
}
/* Submenu names and counts should read at full weight. */
.aydin-cat-item .aydin-cat-link,
.aydin-cat-item .aydin-cat-name {
color: var(--ay-ink) !important;
font-weight: 900 !important;
}
.aydin-cat-item .aydin-cat-meta {
color: #111827 !important;
font-weight: 850 !important;
}
@media (max-width: 700px) {
.aydin-menu-trigger {
width: 54px !important;
min-width: 54px !important;
height: 54px !important;
min-height: 54px !important;
}
.aydin-mobile-trigger-mark {
width: 50px !important;
height: 50px !important;
box-shadow:
0 0 0 2px rgba(25,118,210,.12),
0 0 0 4px rgba(244,187,39,.08),
0 5px 12px rgba(23,48,74,.10),
inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.aydin-menu-trigger:hover .aydin-mobile-trigger-mark,
.aydin-menu-trigger:focus-visible .aydin-mobile-trigger-mark,
.aydin-smart-menu.is-open .aydin-mobile-trigger-mark {
box-shadow:
0 0 0 2px rgba(25,118,210,.15),
0 0 0 4px rgba(244,187,39,.10),
0 6px 14px rgba(23,48,74,.12),
inset 0 1px 0 rgba(255,255,255,.96) !important;
}
}
/* 2.4.11 mobile: keep the same see-through treatment, with a slightly lighter veil. */
@media (max-width: 700px) {
.aydin-menu-panel {
background:
radial-gradient(circle at 12% 10%, rgba(25,118,210,.07), transparent 28%),
radial-gradient(circle at 88% 32%, rgba(239,61,74,.05), transparent 26%),
radial-gradient(circle at 14% 88%, rgba(55,166,90,.05), transparent 26%),
rgba(247,249,252,.34);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
}
/* 2.4.12 — slightly smaller mobile trigger; keep the same colors, bars and label. */
@media (max-width: 700px) {
.aydin-menu-trigger {
width: 50px !important;
min-width: 50px !important;
height: 50px !important;
min-height: 50px !important;
}
.aydin-mobile-trigger-mark {
width: 46px !important;
height: 46px !important;
}
}
/* 2.4.14 — true row-major desktop grid. Column wrappers are presentation-only. */
.aydin-category-column {
display: contents;
}
.aydin-category-grid {
grid-auto-flow: row;
align-items: start;
}
/* 2.4.13 — semantic category icon treatment: one lightweight inline SVG per category. */
.aydin-cat-icon .aydin-category-icon-svg {
display: block;
width: 30px;
height: 30px;
max-width: 100%;
max-height: 100%;
}
@media (max-width: 700px) {
.aydin-cat-icon .aydin-category-icon-svg {
width: 25px;
height: 25px;
}
}
/* 2.4.14 — compact mobile menu label; keep the branded circle, remove hamburger bars. */
@media (max-width: 700px) {
.aydin-mobile-trigger-bars {
display: none !important;
}
.aydin-mobile-trigger-mark {
width: 44px !important;
height: 44px !important;
gap: 0 !important;
box-shadow:
0 0 0 1.5px rgba(25,118,210,.12),
0 0 0 3px rgba(244,187,39,.07),
0 4px 10px rgba(23,48,74,.08),
inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.aydin-mobile-trigger-word {
margin-top: 0 !important;
font-size: 12px !important;
line-height: 1 !important;
letter-spacing: .1px;
}
.aydin-menu-trigger {
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
}
}
/* 2.4.14 — professional category icon finish: consistent visual weight and softer container. */
.aydin-cat-icon {
background: linear-gradient(145deg, rgba(255,255,255,.96), var(--ay-card-soft));
box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 5px 14px rgba(23,48,74,.06);
}
.aydin-cat-icon svg {
overflow: visible;
shape-rendering: geometricPrecision;
}
/* v2.4.15: canonical row-major desktop order; direct children only. */
.aydin-category-grid{grid-auto-flow:row!important;}
.aydin-category-grid>.aydin-cat-group{min-width:0;}
@media (max-width: 767px){.aydin-category-grid{grid-template-columns:1fr!important;grid-auto-flow:row!important;}.aydin-category-column{display:contents!important;}}
/* 2.4.16 — independent desktop stacks.
* Four column wrappers preserve visual row order (1–4, 5–8, ...) while each
* stack owns its height, so opening an accordion never pushes neighboring
* columns downward. */
.aydin-category-grid {
align-items: start !important;
grid-auto-rows: auto !important;
}
.aydin-category-column {
min-width: 0;
min-height: 0;
align-self: start;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.aydin-cat-group {
align-self: flex-start;
height: fit-content;
max-width: 100%;
}
@media (max-width: 1180px) and (min-width: 701px) {
.aydin-category-column { gap: 12px; }
}
@media (max-width: 700px) {
/* Flatten only at mobile and restore the original semantic sequence with
* CSS order values generated server-side (1,2,3,...). */
.aydin-category-column {
display: contents !important;
}
.aydin-cat-group {
order: var(--ay-mobile-order, 0);
width: 100%;
height: fit-content;
}
}
/* 2.4.18 — larger submenu typography for readability. */
.aydin-cat-item .aydin-cat-link,
.aydin-cat-item .aydin-cat-name {
font-size: 14px !important;
line-height: 1.6 !important;
color: #111827 !important;
font-weight: 900 !important;
}
.aydin-cat-item .aydin-cat-meta {
font-size: 10px !important;
line-height: 1.35 !important;
color: #111827 !important;
font-weight: 900 !important;
}
.aydin-depth-2 .aydin-cat-link,
.aydin-depth-2 .aydin-cat-name {
font-size: 13.5px !important;
}
@media (max-width: 700px) {
.aydin-cat-item .aydin-cat-link,
.aydin-cat-item .aydin-cat-name {
font-size: 13.2px !important;
line-height: 1.62 !important;
}
.aydin-cat-item .aydin-cat-meta {
font-size: 9.7px !important;
}
.aydin-depth-2 .aydin-cat-link,
.aydin-depth-2 .aydin-cat-name {
font-size: 12.8px !important;
}
}
/* v2.4.20: use a row-balanced color rhythm so neighboring columns do not repeat the same color. */
.aydin-smart-category-menu .aydin-cat-group.aydin-color-1 { --ay-card-color: var(--ay-red); --ay-card-soft: rgba(239,61,74,.075); --ay-card-line: rgba(239,61,74,.18); }
.aydin-smart-category-menu .aydin-cat-group.aydin-color-2 { --ay-card-color: var(--ay-green); --ay-card-soft: rgba(55,166,90,.075); --ay-card-line: rgba(55,166,90,.18); }
.aydin-smart-category-menu .aydin-cat-group.aydin-color-3 { --ay-card-color: var(--ay-blue); --ay-card-soft: rgba(25,118,210,.075); --ay-card-line: rgba(25,118,210,.18); }
.aydin-smart-category-menu .aydin-cat-group.aydin-color-4 { --ay-card-color: var(--ay-yellow); --ay-card-soft: rgba(244,187,39,.10); --ay-card-line: rgba(244,187,39,.23); }
/* =========================================================
AIDIN TOY — CUSTOM MOBILE BOTTOM BAR 2.5.1
========================================================= */
.ait-bottom-bar,.ait-shortcode-sheet{display:none}
@media (max-width:700px){
body.ait-bottom-bar-active{padding-bottom:74px!important}
body.ait-bottom-bar-active .wd-toolbar{display:none!important}
.ait-bottom-bar{position:fixed!important;display:grid!important;grid-template-columns:repeat(5,1fr);direction:rtl;right:0;left:0;bottom:0;height:68px;padding:6px 8px max(6px,env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(255,255,255,.98);border-top:1px solid rgba(20,35,50,.09);box-shadow:0 -8px 24px rgba(20,35,50,.10);z-index:999999!important;gap:3px}
.ait-bottom-bar__item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none!important;color:#26313d!important;border-radius:12px;line-height:1;transition:background .15s ease,transform .15s ease}
.ait-bottom-bar__item:active{background:#f2f5f8;transform:scale(.97)}
.ait-bottom-bar__icon{width:27px;height:27px;display:flex;align-items:center;justify-content:center}
.ait-bottom-bar__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ait-bottom-bar__icon img{width:24px;height:24px;object-fit:contain}
.ait-bottom-bar__label{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ait-shortcode-sheet[hidden],.ait-bottom-bar[hidden]{display:none!important}
.ait-shortcode-sheet{position:fixed;inset:0;z-index:1000000;display:block}
.ait-shortcode-sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.34)}
.ait-shortcode-sheet__panel{position:absolute;right:0;left:0;bottom:0;max-height:82vh;overflow:auto;background:#fff;border-radius:18px 18px 0 0;padding:42px 16px 18px;box-shadow:0 -12px 35px rgba(0,0,0,.18);direction:rtl}
.ait-shortcode-sheet__close{position:absolute;top:9px;left:12px;width:32px;height:32px;border:0;border-radius:50%;background:#f1f3f5;color:#303942;font-size:23px;line-height:1;cursor:pointer}
.ait-shortcode-sheet__content{font-size:14px;line-height:1.8}
}
/* =========================================================
AIDIN TOY — MODEL 2 / DIGIKALA-STYLE HOVER MENU
Robust two-pane desktop mega menu.
========================================================= */
.aydin-smart-menu-set{
direction:rtl;
position:relative;
display:inline-block;
max-width:100%;
}
@media (min-width:701px){
.aydin-smart-menu-set[data-desktop-model="1"] .aydin-smart-menu-model-2{display:none!important;}
.aydin-smart-menu-set[data-desktop-model="2"] .aydin-smart-menu-model-1{display:none!important;}
}
@media (max-width:700px){
.aydin-smart-menu-set[data-mobile-model="1"] .aydin-smart-menu-model-2{display:none!important;}
.aydin-smart-menu-set[data-mobile-model="2"] .aydin-smart-menu-model-1{display:none!important;}
}
/* v2.5.14 — stable first paint inside Woodmart header. */
.aydin-smart-menu-set{display:inline-flex!important;align-items:center!important;width:max-content!important;max-width:100%;flex:0 0 auto!important;white-space:nowrap!important;vertical-align:middle!important;}
.aydin-smart-menu-model-2 .aydin-m2-trigger{white-space:nowrap!important;width:max-content;flex:0 0 auto;}
/* ---------- Desktop trigger ---------- */
.aydin-smart-menu-model-2{position:relative;z-index:100001;}
.aydin-smart-menu-model-2 .aydin-m2-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-width:0;
min-height:40px;
padding:0 12px;
border:1px solid rgba(30,38,48,.10);
border-radius:9px;
background:#fff;
color:#20242a!important;
box-shadow:0 2px 8px rgba(20,25,30,.05);
cursor:pointer;
}
.aydin-smart-menu-model-2 .aydin-m2-trigger:hover{background:#fafafa;}
/* Very simple list/menu icon; intentionally no SVG. */
.aydin-smart-menu-model-2 .aydin-m2-trigger-icon{
position:relative;
display:inline-flex!important;
flex:0 0 15px;
width:15px!important;
height:13px!important;
align-items:center!important;
justify-content:center!important;
color:#4f575f!important;
}
.aydin-smart-menu-model-2 .aydin-m2-icon-mark{
position:relative;
display:block;
width:14px;
height:1.6px;
border-radius:99px;
background:currentColor;
}
.aydin-smart-menu-model-2 .aydin-m2-icon-mark::before,
.aydin-smart-menu-model-2 .aydin-m2-icon-mark::after{
content:"";
position:absolute;
right:0;
width:14px;
height:1.6px;
border-radius:99px;
background:currentColor;
}
.aydin-smart-menu-model-2 .aydin-m2-icon-mark::before{top:-4.6px;}
.aydin-smart-menu-model-2 .aydin-m2-icon-mark::after{top:4.6px;}
/* ---------- Desktop portal layer ---------- */
.aydin-m2-panel{
position:fixed!important;
top:0;
right:0;
left:auto;
bottom:auto!important;
width:auto;
min-width:0;
max-width:none!important;
height:auto;
max-height:none!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
border:0!important;
border-radius:0 0 12px 12px!important;
background:transparent!important;
box-shadow:none!important;
opacity:0;
visibility:hidden;
pointer-events:none;
transform:none!important;
transition:none!important;
isolation:isolate;
z-index:100002!important;
}
html.aydin-menu-portal-open .aydin-m2-panel,
.aydin-smart-menu-model-2.is-open .aydin-m2-panel{
opacity:1;
visibility:visible;
pointer-events:auto;
}
/* The dark veil is positioned by JS from the REAL bottom edge of the
WordPress/Woodmart header. Do not use `inset:0!important` here: that would
override the inline `top` calculated by JS and shade the header itself. */
.aydin-m2-overlay{
position:fixed!important;
top:0;
right:0;
bottom:0;
left:0;
width:auto;
height:auto;
background:rgba(0,0,0,.50)!important;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:none!important;
z-index:100000!important;
}
html.aydin-menu-portal-open .aydin-m2-overlay,
.aydin-smart-menu-model-2.is-open .aydin-m2-overlay{
opacity:1;
visibility:visible;
pointer-events:auto;
}
/* Two panes MUST stay on the same row. Flex is used deliberately so the
content pane can never fall underneath the category rail. */
.aydin-m2-shell{
display:flex!important;
flex-direction:row!important;
align-items:stretch!important;
direction:ltr!important;
width:max-content;
min-width:0;
max-width:none;
min-height:0;
max-height:none;
margin:0!important;
padding:0!important;
background:transparent;
}
/* Root category rail on the right, approximately 80% opaque. */
.aydin-m2-sidebar{
order:2;
flex:0 0 218px;
width:218px;
min-width:218px;
max-width:280px;
min-height:0;
max-height:none;
overflow-y:auto;
overflow-x:hidden;
overflow-anchor:none;
scroll-behavior:auto!important;
overscroll-behavior:contain;
padding:10px 8px;
direction:rtl;
background:rgba(255,255,255,.80);
border-left:1px solid rgba(35,43,52,.09);
box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:rgba(40,50,60,.17) transparent;
backdrop-filter:blur(9px);
-webkit-backdrop-filter:blur(9px);
}
.aydin-m2-sidebar::-webkit-scrollbar{width:5px}
.aydin-m2-sidebar::-webkit-scrollbar-thumb{background:rgba(40,50,60,.16);border-radius:99px}
.aydin-m2-all{
display:flex;
align-items:center;
gap:8px;
min-height:36px;
margin:0 0 5px;
padding:0 9px;
border-radius:7px;
background:rgba(255,255,255,.80);
color:#000!important;
text-decoration:none!important;
font-size:13px;
font-weight:850;
box-sizing:border-box;
}
.aydin-m2-all:hover{background:rgba(245,246,247,.90);}
.aydin-m2-all-icon{
position:relative;
display:inline-block;
flex:0 0 15px;
width:15px;
height:15px;
border:1.4px solid #687078;
border-radius:3px;
box-sizing:border-box;
}
.aydin-m2-all-icon:before,
.aydin-m2-all-icon:after{
content:"";
position:absolute;
background:#000;
border-radius:2px;
}
.aydin-m2-all-icon:before{width:1.4px;height:7px;right:6px;top:3px}
.aydin-m2-all-icon:after{height:1.4px;width:7px;left:3px;top:6px}
.aydin-m2-root-list{display:flex;flex-direction:column;gap:1px}
.aydin-m2-root-item{
display:grid;
grid-template-columns:25px minmax(0,1fr) 8px;
align-items:center;
gap:7px;
min-height:39px;
padding:5px 7px;
border-radius:7px;
color:#000!important;
background:rgba(255,255,255,.12);
text-decoration:none!important;
font-size:13px;
font-weight:800;
box-sizing:border-box;
transition:background-color .12s ease,color .12s ease;
}
.aydin-m2-root-item:hover,
.aydin-m2-root-item.is-active{
background:rgba(245,246,247,.80);
color:#000!important;
}
.aydin-m2-root-icon{
width:25px;
height:25px;
display:flex;
align-items:center;
justify-content:center;
color:#000!important;
}
.aydin-m2-root-icon svg{
display:block;
width:17px!important;
height:17px!important;
max-width:17px!important;
max-height:17px!important;
}
.aydin-m2-root-item.is-active .aydin-m2-root-icon{color:#000!important}
.aydin-m2-root-name{min-width:0;line-height:1.55;white-space:normal}
.aydin-m2-root-arrow{font-size:17px;line-height:1;color:#000!important;font-weight:800}
/* Content pane on the left, ~60% opaque. */
.aydin-m2-content{
order:1;
flex:0 0 auto;
direction:rtl;
width:auto;
min-width:340px;
max-width:none;
min-height:0;
max-height:none;
overflow:hidden;
padding:17px 22px 14px;
background:rgba(255,255,255,.60);
box-sizing:border-box;
backdrop-filter:blur(9px);
-webkit-backdrop-filter:blur(9px);
}
.aydin-m2-content-scroll{
width:100%;
min-height:0;
}
.aydin-m2-content::-webkit-scrollbar{width:5px}
.aydin-m2-content::-webkit-scrollbar-thumb{background:rgba(40,50,60,.15);border-radius:99px}
.aydin-m2-category-panel{
display:none!important;
width:max-content;
max-width:none;
margin:0!important;
padding:0!important;
box-sizing:border-box;
}
.aydin-m2-category-panel.is-active{display:block!important}
.aydin-m2-category-head{margin:0 0 13px;padding:0 0 8px;border-bottom:1px solid rgba(20,28,36,.08)}
.aydin-m2-category-title-wrap{display:flex;align-items:baseline;gap:8px}
.aydin-m2-title-bar{flex:0 0 3px;width:3px;height:13px;border-radius:99px;background:#e53935}
.aydin-m2-category-title{
color:#000!important;
text-decoration:none!important;
font-size:17px;
font-weight:900;
white-space:nowrap;
}
.aydin-m2-category-title:hover{color:#000!important}
.aydin-m2-category-title-wrap small{font-size:11px;color:#000!important;font-weight:800;white-space:nowrap}
/* Direct sub-categories form horizontal columns. Descendants remain below
their parent heading; they never create a new row outside their column. */
.aydin-m2-subgrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(150px,max-content));
grid-auto-flow:row;
align-items:start;
justify-content:start;
gap:20px 34px;
width:max-content;
max-width:none;
margin:0!important;
}
.aydin-m2-subgroup{
min-width:150px;
max-width:260px;
margin:0!important;
padding:0!important;
}
.aydin-m2-subtitle{
display:flex;
align-items:baseline;
gap:6px;
padding:0 0 5px;
margin:0 0 2px;
color:#000!important;
text-decoration:none!important;
font-size:14px;
font-weight:900;
white-space:normal;
}
.aydin-m2-subtitle:before{content:"";width:2px;height:11px;border-radius:2px;background:#e53935;flex:0 0 2px}
.aydin-m2-subtitle small{font-size:11px;color:#000!important;font-weight:800;white-space:nowrap}
.aydin-m2-subtitle:hover{color:#000!important}
.aydin-m2-links{display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.aydin-m2-links a,
.aydin-m2-desc-link{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:8px;
min-height:25px;
padding:2px 0;
margin:0!important;
color:#000!important;
text-decoration:none!important;
font-size:13px;
font-weight:800;
}
.aydin-m2-links a:hover,
.aydin-m2-desc-link:hover{color:#000!important}
.aydin-m2-links a small,
.aydin-m2-desc-link small{font-size:10.5px;color:#000!important;font-weight:800;white-space:nowrap}
.aydin-m2-desc-level-1{padding-right:8px!important}
.aydin-m2-desc-level-2{padding-right:16px!important;font-size:12px!important}
.aydin-m2-desc-level-3{padding-right:24px!important;font-size:11.5px!important}
.aydin-m2-empty-state{font-size:13px;color:#000!important;font-weight:800;padding:8px 0 15px}
.aydin-m2-view-all{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
width:100%;
margin:16px 0 0!important;
padding:9px 0 1px;
border-top:1px solid rgba(20,28,36,.08);
color:#000!important;
text-decoration:none!important;
font-size:13px;
font-weight:900;
box-sizing:border-box;
}
.aydin-m2-view-all:hover{color:#000!important}
.aydin-m2-view-all span:last-child{font-size:14px;line-height:1}
@media (min-width:1101px){
.aydin-m2-sidebar{flex-basis:218px;min-width:218px}
}
@media (max-width:1100px) and (min-width:701px){
.aydin-m2-sidebar{flex-basis:200px;min-width:200px;width:200px}
.aydin-m2-subgrid{grid-template-columns:repeat(2,minmax(145px,max-content));gap:18px 24px}
}
/* v2.5.14 — Model-2 typography is intentionally pure black. Only size/weight may differ. */
.aydin-smart-menu-model-2 .aydin-m2-panel a,
.aydin-smart-menu-model-2 .aydin-m2-panel span,
.aydin-smart-menu-model-2 .aydin-m2-panel small,
.aydin-smart-menu-model-2 .aydin-m2-trigger,
.aydin-smart-menu-model-2 .aydin-m2-trigger .aydin-trigger-label{
color:#000!important;
}
.aydin-smart-menu-model-2 .aydin-m2-panel a:hover,
.aydin-smart-menu-model-2 .aydin-m2-trigger:hover{color:#000!important;}
/* Mobile model 2 remains a vertical drawer. */
@media (max-width:700px){
.aydin-smart-menu-set{display:inline-block;width:auto;max-width:100%}
.aydin-smart-menu-model-2 .aydin-m2-trigger{min-height:38px}
.aydin-m2-panel{
top:0!important;
right:0!important;
left:auto!important;
bottom:0!important;
width:min(94vw,430px)!important;
min-width:0!important;
max-width:94vw!important;
height:100dvh!important;
max-height:100dvh!important;
border-radius:16px 0 0 16px!important;
background:rgba(255,255,255,.94)!important;
}
.aydin-m2-overlay{background:rgba(0,0,0,.28)!important}
.aydin-m2-shell{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:100dvh;max-height:100dvh;width:100%!important}
.aydin-m2-sidebar{order:1;flex:0 0 auto;width:auto;min-width:0;max-width:none;max-height:43vh;border-left:0;border-bottom:1px solid rgba(30,40,50,.08);padding:9px 8px}
.aydin-m2-root-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.aydin-m2-root-item{min-height:39px;font-size:10.5px;grid-template-columns:23px minmax(0,1fr) 8px;padding:5px 6px}
.aydin-m2-root-icon{width:23px;height:23px}
.aydin-m2-content{order:2;flex:1 1 auto;width:auto!important;min-width:0;max-width:none;max-height:none;padding:13px 14px 20px;overflow-y:auto;background:rgba(255,255,255,.60)}
.aydin-m2-category-panel{width:auto;max-width:none}
.aydin-m2-subgrid{width:auto;grid-template-columns:1fr;gap:14px}
.aydin-m2-subgroup{max-width:none}
}
/* Prevent any first-paint icon flash. */
.aydin-smart-menu-model-2 .aydin-m2-trigger-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-icon{overflow:hidden;}
/* =========================================================
2.5.9 — MODEL 2 HOVER/HEADER ANCHOR HARDENING
The panel is positioned by JS directly beneath the complete header.
Keep the rendered surface flush with that anchor and avoid default margins.
========================================================= */
.aydin-smart-menu-model-2 .aydin-m2-panel{
margin:0!important;
transform-origin:top right!important;
}
.aydin-smart-menu-model-2 .aydin-m2-overlay{
margin:0!important;
}
@media (min-width:701px){
.aydin-smart-menu-model-2 .aydin-m2-panel{
border-top-right-radius:0!important;
border-top-left-radius:0!important;
}
/* Header is the single exception to the backdrop. Keep the entire
Woodmart header above the backdrop while the mega panel stays above
both. This does not alter the header's visual design. */
html.aydin-menu-portal-open .whb-header{
position:relative;
z-index:1000010!important;
}
html.aydin-menu-portal-open .aydin-m2-panel{
z-index:1000020!important;
}
}
/* =========================================================
2.5.9 — DESKTOP BACKDROP
Starts at the real header bottom; the header itself is never shaded.
========================================================= */
@media (min-width:701px){
.aydin-smart-menu-model-2 .aydin-m2-overlay{
background:rgba(0,0,0,.50)!important;
}
}
/* =========================================================
2.5.10 — MODEL 2 HOVER SURFACE HARDENING
Keep the visible mega menu mounted and interactive while categories
are switched; no opacity/visibility flicker during re-measurement.
========================================================= */
@media (min-width:701px){
.aydin-smart-menu-model-2.is-open .aydin-m2-panel{
transition: opacity .18s ease, transform .18s ease!important;
}
.aydin-smart-menu-model-2.is-open .aydin-m2-panel,
html.aydin-menu-portal-open .aydin-m2-panel{
pointer-events:auto!important;
}
.aydin-smart-menu-model-2 .aydin-m2-category-panel{
}
}
/* =========================================================
2.5.10 — POINTER STABILITY
The desktop model-2 panel stays interactive for the entire hover session.
========================================================= */
@media (min-width:701px){
html.aydin-menu-portal-open .aydin-m2-panel,
body.aydin-menu-portal-open .aydin-m2-panel{
pointer-events:auto!important;
}
}
/* =========================================================
2.5.12 — BACKDROP CASCADE FIX
- The backdrop starts at the exact header bottom supplied by JS.
- Header remains completely above the backdrop.
- Mega menu remains above the backdrop regardless of page content.
========================================================= */
@media (min-width:701px){
html.aydin-menu-portal-open .aydin-m2-overlay{
z-index:1000000!important;
}
html.aydin-menu-portal-open .aydin-m2-panel{
z-index:1000020!important;
}
html.aydin-menu-portal-open .whb-header{
z-index:1000010!important;
}
}
/* =========================================================
2.5.15 — MODEL 2 TYPOGRAPHY / HOVER / RESPONSIVE GRID
========================================================= */
@media (min-width:701px){
/* Main categories: 80% surface, pure-black type, red hover accent. */
.aydin-smart-menu-model-2 .aydin-m2-sidebar{
/* Transparent container: only the visible category cards carry the 90% white surface. */
background:transparent!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item{
background:rgba(255,255,255,.90)!important;
color:#000!important;
font-size:14.5px!important;
font-weight:900!important;
transition:background-color .10s ease,color .10s ease,box-shadow .10s ease!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active{
background:rgba(255,255,255,.90)!important;
color:#e51f35!important;
box-shadow:inset -3px 0 0 #e51f35!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-arrow,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-arrow{
color:#e51f35!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-icon{
color:#000!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-icon{
color:#e51f35!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon svg,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-icon svg{
color:#e51f35!important;
}
/* Sub-category panel: 70% surface, larger readable text. */
.aydin-smart-menu-model-2 .aydin-m2-content{
background:rgba(255,255,255,.80)!important;
}
.aydin-smart-menu-model-2 .aydin-m2-category-title{
color:#17304a!important;
font-size:20px!important;
font-weight:950!important;
}
.aydin-smart-menu-model-2 .aydin-m2-category-title:hover{color:#17304a!important;}
.aydin-smart-menu-model-2 .aydin-m2-subtitle{
color:#e51f35!important;
font-size:17px!important;
font-weight:950!important;
}
.aydin-smart-menu-model-2 .aydin-m2-subtitle:hover{color:#e51f35!important;}
.aydin-smart-menu-model-2 .aydin-m2-links a,
.aydin-smart-menu-model-2 .aydin-m2-desc-link{
color:#000!important;
font-size:16px!important;
font-weight:850!important;
}
.aydin-smart-menu-model-2 .aydin-m2-desc-level-2{font-size:15px!important;}
.aydin-smart-menu-model-2 .aydin-m2-desc-level-3{font-size:14.5px!important;}
.aydin-smart-menu-model-2 .aydin-m2-category-panel small,
.aydin-smart-menu-model-2 .aydin-m2-subtitle small,
.aydin-smart-menu-model-2 .aydin-m2-links small,
.aydin-smart-menu-model-2 .aydin-m2-desc-link small,
.aydin-smart-menu-model-2 .aydin-m2-category-title-wrap small{
display:none!important;
}
/* Four columns on wide screens; fall back only when space actually requires it. */
.aydin-smart-menu-model-2 .aydin-m2-subgrid{
grid-template-columns:repeat(4,minmax(150px,1fr))!important;
gap:22px 30px!important;
}
.aydin-smart-menu-model-2 .aydin-m2-panel,
.aydin-smart-menu-model-2 .aydin-m2-shell,
.aydin-smart-menu-model-2 .aydin-m2-content{
contain:layout style;
}
/* The 60% black backdrop is intentionally below the header and below the menu. */
.aydin-smart-menu-model-2 .aydin-m2-overlay{background:rgba(0,0,0,.70)!important;}
}
@media (min-width:701px) and (max-width:1180px){
.aydin-smart-menu-model-2 .aydin-m2-subgrid{grid-template-columns:repeat(3,minmax(145px,1fr))!important;}
}
@media (min-width:701px) and (max-width:930px){
.aydin-smart-menu-model-2 .aydin-m2-subgrid{grid-template-columns:repeat(2,minmax(145px,1fr))!important;}
}
/* =========================================================
2.5.20 — LIGHTWEIGHT MODEL-2 HOVER / MOTION
Pure CSS only. No JS hooks, no layout movement of the hover target.
========================================================= */
@media (min-width:701px){
.aydin-smart-menu-model-2 .aydin-m2-root-item{
transition:
background-color .14s ease,
color .14s ease,
box-shadow .14s ease;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item .aydin-m2-root-icon svg{
transition:
color .14s ease,
transform .14s ease;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active{
color:rgb(239,64,86)!important;
background:rgba(255,255,255,.90)!important;
box-shadow:inset -3px 0 0 rgb(239,64,86)!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-arrow,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon svg,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item.is-active .aydin-m2-root-icon svg{
color:rgb(239,64,86)!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon svg{
transform:translateX(-2px);
}
.aydin-smart-menu-model-2 .aydin-m2-subtitle,
.aydin-smart-menu-model-2 .aydin-m2-links a,
.aydin-smart-menu-model-2 .aydin-m2-desc-link,
.aydin-smart-menu-model-2 .aydin-m2-category-title{
transition:color .14s ease, transform .14s ease;
}
.aydin-smart-menu-model-2 .aydin-m2-subtitle:hover,
.aydin-smart-menu-model-2 .aydin-m2-links a:hover,
.aydin-smart-menu-model-2 .aydin-m2-desc-link:hover,
.aydin-smart-menu-model-2 .aydin-m2-category-title:hover{
color:rgb(239,64,86)!important;
transform:translateX(-2px);
}
}
/* =========================================================
2.5.21 — MODEL 2 HOVER + MICRO ANIMATION
CSS-only and layout-safe: no JS, no position/size changes.
========================================================= */
@media (min-width:701px){
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover,
.aydin-smart-menu-model-2 .aydin-m2-root-item:focus-visible{
color:rgb(239,64,86)!important;
background:rgba(255,255,255,.92)!important;
box-shadow:inset -3px 0 0 rgb(239,64,86)!important;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-arrow,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon svg,
.aydin-smart-menu-model-2 .aydin-m2-root-item:focus-visible .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item:focus-visible .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item:focus-visible .aydin-m2-root-icon svg{
color:rgb(239,64,86)!important;
transition:color .14s ease,transform .14s ease;
}
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-smart-menu-model-2 .aydin-m2-root-item:hover .aydin-m2-root-icon svg{
transform:translateX(-2px);
}
.aydin-smart-menu-model-2 .aydin-m2-subtitle:hover,
.aydin-smart-menu-model-2 .aydin-m2-links a:hover,
.aydin-smart-menu-model-2 .aydin-m2-desc-link:hover{
color:rgb(239,64,86)!important;
transform:translateX(-2px);
}
.aydin-smart-menu-model-2 .aydin-m2-subtitle,
.aydin-smart-menu-model-2 .aydin-m2-links a,
.aydin-smart-menu-model-2 .aydin-m2-desc-link{
transition:color .14s ease,transform .14s ease;
}
}
/* =========================================================
2.5.22 — MODEL 2 HOVER FIX AFTER PORTAL MOVE
The desktop panel is temporarily moved to while open. Therefore
hover selectors MUST NOT depend on .aydin-smart-menu-model-2 being an
ancestor of the panel. This keeps hover and micro-animation working after
the portal move without touching JS or menu geometry.
========================================================= */
@media (min-width:701px){
.aydin-m2-panel .aydin-m2-root-item{
transition:
background-color .14s ease,
color .14s ease,
box-shadow .14s ease;
}
.aydin-m2-panel .aydin-m2-root-item .aydin-m2-root-name,
.aydin-m2-panel .aydin-m2-root-item .aydin-m2-root-arrow,
.aydin-m2-panel .aydin-m2-root-item .aydin-m2-root-icon,
.aydin-m2-panel .aydin-m2-root-item .aydin-m2-root-icon svg{
transition:color .14s ease,transform .14s ease;
}
.aydin-m2-panel .aydin-m2-root-item:hover,
.aydin-m2-panel .aydin-m2-root-item:focus-visible,
.aydin-m2-panel .aydin-m2-root-item.is-active{
color:rgb(239,64,86)!important;
background:rgba(255,255,255,.90)!important;
box-shadow:inset -3px 0 0 rgb(239,64,86)!important;
}
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-arrow,
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-icon svg,
.aydin-m2-panel .aydin-m2-root-item:focus-visible .aydin-m2-root-name,
.aydin-m2-panel .aydin-m2-root-item:focus-visible .aydin-m2-root-arrow,
.aydin-m2-panel .aydin-m2-root-item:focus-visible .aydin-m2-root-icon,
.aydin-m2-panel .aydin-m2-root-item:focus-visible .aydin-m2-root-icon svg,
.aydin-m2-panel .aydin-m2-root-item.is-active .aydin-m2-root-name,
.aydin-m2-panel .aydin-m2-root-item.is-active .aydin-m2-root-arrow,
.aydin-m2-panel .aydin-m2-root-item.is-active .aydin-m2-root-icon,
.aydin-m2-panel .aydin-m2-root-item.is-active .aydin-m2-root-icon svg{
color:rgb(239,64,86)!important;
}
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-name,
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-icon,
.aydin-m2-panel .aydin-m2-root-item:hover .aydin-m2-root-icon svg{
transform:translateX(-2px);
}
.aydin-m2-panel .aydin-m2-subtitle,
.aydin-m2-panel .aydin-m2-links a,
.aydin-m2-panel .aydin-m2-desc-link,
.aydin-m2-panel .aydin-m2-category-title{
transition:color .14s ease,transform .14s ease;
}
.aydin-m2-panel .aydin-m2-subtitle:hover,
.aydin-m2-panel .aydin-m2-links a:hover,
.aydin-m2-panel .aydin-m2-desc-link:hover,
.aydin-m2-panel .aydin-m2-category-title:hover{
color:rgb(239,64,86)!important;
transform:translateX(-2px);
}
.aydin-m2-panel .aydin-m2-subtitle:hover,
.aydin-m2-panel .aydin-m2-links a:hover,
.aydin-m2-panel .aydin-m2-desc-link:hover,
.aydin-m2-panel .aydin-m2-category-title:hover{
cursor:pointer;
}
}
/* =========================================================
v2.5.23 BASE — OPACITY ONLY
No extra visual layers, geometry, hover logic or layout changes.
========================================================= */
@media (min-width:701px){
.aydin-m2-panel .aydin-m2-sidebar{
background:transparent!important;
}
.aydin-m2-panel .aydin-m2-root-item,
.aydin-m2-panel .aydin-m2-root-item:hover,
.aydin-m2-panel .aydin-m2-root-item.is-active,
.aydin-m2-panel .aydin-m2-root-item:focus-visible{
background:rgba(255,255,255,.90)!important;
}
.aydin-m2-panel .aydin-m2-content{
background:rgba(255,255,255,.80)!important;
}
.aydin-m2-overlay{
background:rgba(0,0,0,.70)!important;
}
}
/* v2.5.30 — mobile model 1 panel remains fully opaque. */
@media (max-width:700px){
.aydin-menu-panel.aydin-model-1-panel{
background:#fff!important;
background-image:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
opacity:1!important;
}
.aydin-menu-panel.aydin-model-1-panel .aydin-menu-atmosphere{
display:none!important;
}
}
/* v2.5.30 — keep model-2 submenu links slightly separated. */
@media (min-width:701px){
.aydin-m2-subgroup .aydin-m2-links{
gap:2px!important;
}
}
/* =========================================================
v2.5.32 — MOBILE MODEL 1 CLEAN REPAIR
Portal-safe selectors: the model-1 panel is moved to while open,
so panel internals must never depend on .aydin-smart-menu-model-1 as parent.
Desktop and model-2 remain untouched.
========================================================= */
@media (max-width:700px){
/* Trigger lives inside the header/root, so this selector is intentionally
rooted at the model-1 container. Keep the original branded control size. */
.aydin-smart-menu-model-1 .aydin-menu-trigger{
position:relative!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:60px!important;
min-width:60px!important;
max-width:60px!important;
height:60px!important;
min-height:60px!important;
max-height:60px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:50%!important;
background:transparent!important;
box-shadow:none!important;
font-size:0!important;
line-height:1!important;
box-sizing:border-box!important;
overflow:visible!important;
}
.aydin-smart-menu-model-1 .aydin-menu-trigger .aydin-mobile-trigger-mark{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 56px!important;
width:56px!important;
min-width:56px!important;
max-width:56px!important;
height:56px!important;
min-height:56px!important;
max-height:56px!important;
margin:0!important;
padding:0!important;
border-radius:50%!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
/* Portal-safe mobile panel: 100% opaque, no decorative glass/blur. */
.aydin-model-1-panel{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
left:0!important;
width:100vw!important;
max-width:100vw!important;
height:100dvh!important;
max-height:100dvh!important;
margin:0!important;
background:#fff!important;
background-image:none!important;
opacity:1!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
box-shadow:none!important;
border-radius:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
box-sizing:border-box!important;
}
/* Header row inside the panel. */
.aydin-model-1-panel .aydin-menu-head{
position:sticky!important;
top:0!important;
z-index:20!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
width:100%!important;
min-height:64px!important;
padding:8px 12px!important;
margin:0!important;
box-sizing:border-box!important;
background:#fff!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
border-bottom:1px solid rgba(23,48,74,.09)!important;
}
.aydin-model-1-panel .aydin-menu-title-wrap{
min-width:0!important;
flex:1 1 auto!important;
margin:0!important;
padding:0!important;
}
.aydin-model-1-panel .aydin-menu-close{
position:relative!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 48px!important;
width:48px!important;
min-width:48px!important;
max-width:48px!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:14px!important;
box-sizing:border-box!important;
font:inherit!important;
background:linear-gradient(145deg,#ff5665 0%,var(--ay-red) 100%)!important;
color:#fff!important;
box-shadow:0 8px 20px rgba(239,61,74,.20)!important;
cursor:pointer!important;
}
.aydin-model-1-panel .aydin-menu-close::before{
inset:4px!important;
border-radius:10px!important;
}
.aydin-model-1-panel .aydin-menu-close span{
width:25px!important;
height:3px!important;
}
/* Content / category list. */
.aydin-model-1-panel .aydin-menu-layout{
position:relative!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
padding:10px 10px 24px!important;
box-sizing:border-box!important;
}
.aydin-model-1-panel .aydin-category-grid{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-auto-flow:row!important;
gap:9px!important;
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
align-items:start!important;
}
.aydin-model-1-panel .aydin-category-column{
display:contents!important;
}
.aydin-model-1-panel .aydin-cat-group{
display:block!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
align-self:start!important;
overflow:hidden!important;
border-radius:15px!important;
background:#fff!important;
}
.aydin-model-1-panel .aydin-cat-row{
display:flex!important;
align-items:center!important;
width:100%!important;
min-width:0!important;
min-height:60px!important;
margin:0!important;
padding:7px!important;
gap:8px!important;
box-sizing:border-box!important;
}
.aydin-model-1-panel .aydin-cat-link{
display:flex!important;
align-items:center!important;
flex:1 1 auto!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
padding:4px!important;
gap:9px!important;
box-sizing:border-box!important;
text-decoration:none!important;
}
.aydin-model-1-panel .aydin-cat-icon{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 40px!important;
width:40px!important;
min-width:40px!important;
max-width:40px!important;
height:40px!important;
min-height:40px!important;
max-height:40px!important;
border-radius:11px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.aydin-model-1-panel .aydin-cat-icon svg,
.aydin-model-1-panel .aydin-cat-icon .aydin-category-icon-svg{
display:block!important;
width:23px!important;
height:23px!important;
max-width:23px!important;
max-height:23px!important;
}
.aydin-model-1-panel .aydin-cat-copy{
display:flex!important;
flex:1 1 auto!important;
min-width:0!important;
max-width:100%!important;
flex-direction:column!important;
justify-content:center!important;
gap:1px!important;
}
.aydin-model-1-panel .aydin-cat-name{
display:block!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
font-size:13px!important;
line-height:1.5!important;
font-weight:850!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
}
.aydin-model-1-panel .aydin-cat-meta{
display:block!important;
margin:0!important;
font-size:9px!important;
line-height:1.3!important;
}
.aydin-model-1-panel .aydin-cat-toggle{
appearance:none!important;
-webkit-appearance:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 34px!important;
width:34px!important;
min-width:34px!important;
max-width:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
margin:0!important;
padding:0!important;
border-radius:10px!important;
box-sizing:border-box!important;
font:inherit!important;
cursor:pointer!important;
-webkit-tap-highlight-color:transparent!important;
}
.aydin-model-1-panel .aydin-toggle-symbol,
.aydin-model-1-panel .aydin-toggle-symbol svg{
width:16px!important;
height:16px!important;
max-width:16px!important;
max-height:16px!important;
}
.aydin-model-1-panel .aydin-cat-children{
width:auto!important;
max-width:none!important;
min-width:0!important;
margin:0 8px 8px!important;
padding:8px!important;
box-sizing:border-box!important;
border-radius:11px!important;
}
.aydin-model-1-panel .aydin-cat-item{
width:100%!important;
min-width:0!important;
}
.aydin-model-1-panel .aydin-cat-item .aydin-cat-row{
min-height:42px!important;
padding:4px!important;
}
.aydin-model-1-panel .aydin-cat-item .aydin-cat-link{
gap:7px!important;
padding:5px 6px!important;
}
.aydin-model-1-panel .aydin-cat-item .aydin-cat-name{
font-size:12.5px!important;
line-height:1.55!important;
}
.aydin-model-1-panel .aydin-cat-item .aydin-cat-toggle{
flex-basis:30px!important;
width:30px!important;
min-width:30px!important;
max-width:30px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
}
}
/* =========================================================
WOODMART NATIVE DRAWERS — MOBILE CUSTOM BAR COMPATIBILITY
---------------------------------------------------------
The custom mobile bar must never cover WoodMart's native
cart/account side drawers. This only affects the drawers
while they are open; it does not alter menu behavior.
========================================================= */
body .cart-widget-side.wd-side-hidden.wd-opened,
body .cart-widget-side.wd-side-hidden.wd-open,
body .cart-widget-side.wd-side-hidden.active,
body .login-form-side.wd-side-hidden.wd-opened,
body .login-form-side.wd-side-hidden.wd-open,
body .login-form-side.wd-side-hidden.active {
z-index: 2147483646 !important;
pointer-events: auto !important;
}
body .cart-widget-side.wd-side-hidden.wd-opened *,
body .login-form-side.wd-side-hidden.wd-opened * {
pointer-events: auto;
}
body .wd-close-side.wd-close-side-opened {
z-index: 2147483645 !important;
}
@media (max-width: 1024px) {
body .ait-bottom-bar {
z-index: 999999 !important;
}
}
/* =========================================================
AIDIN TOY — MOBILE ADD-TO-CART ERROR POPUP
========================================================= */
.ait-add-to-cart-error-popup{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;z-index:2147483647!important}
.ait-add-to-cart-error-popup.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.ait-add-to-cart-error-popup__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.48)}
.ait-add-to-cart-error-popup__box{position:relative;width:min(420px,100%);box-sizing:border-box;background:#fff;border-radius:18px;padding:24px 20px 20px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.22);direction:rtl;font-family:inherit}
.ait-add-to-cart-error-popup__icon{width:42px;height:42px;margin:2px auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff3f3;color:#e53935;font-size:25px;font-weight:800}
.ait-add-to-cart-error-popup__title{display:none!important}
.ait-add-to-cart-error-popup__message{font-size:13px;line-height:1.9;color:#555f6d;padding:0 8px}
@media(max-width:1024px){.ait-add-to-cart-error-popup{padding:16px}.ait-add-to-cart-error-popup__box{border-radius:16px;padding:22px 17px 18px}
/* =========================================================
AIDIN TOY — HIDE ORIGINAL WOOCOMMERCE INLINE NOTICES
---------------------------------------------------------
The plugin converts WooCommerce notices into its popup, so
the duplicate notice rendered at the top of the page must
not remain visible.
========================================================= */
body .woocommerce-error[data-ait-woo-notice-hidden="1"],
body .woocommerce-message[data-ait-woo-notice-hidden="1"],
body .woocommerce-info[data-ait-woo-notice-hidden="1"],
body .wc-block-components-notice-banner[data-ait-woo-notice-hidden="1"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Ensure the WoodMart backdrop remains a real clickable close target on mobile. */
body .wd-close-side.wd-close-side-opened {
z-index: 2147483645 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
body .cart-widget-side.wd-side-hidden.wd-opened,
body .login-form-side.wd-side-hidden.wd-opened {
pointer-events: auto !important;
}
/* AIDIN TOY — final WooCommerce notice popup states + reliable drawer backdrop close */
body .ait-add-to-cart-error-popup.is-success .ait-add-to-cart-error-popup__icon{
background:#eefbf3 !important;
color:#16a05d !important;
}
body .ait-add-to-cart-error-popup.is-success .ait-add-to-cart-error-popup__title{
color:#16804d !important;
}
body .ait-add-to-cart-error-popup.is-info .ait-add-to-cart-error-popup__icon{
background:#eef5ff !important;
color:#1976d2 !important;
}
body .ait-add-to-cart-error-popup.is-info .ait-add-to-cart-error-popup__title{
color:#155fa8 !important;
}
body .ait-add-to-cart-error-popup.is-error .ait-add-to-cart-error-popup__icon{
background:#fff3f3 !important;
color:#e53935 !important;
}
body .ait-add-to-cart-error-popup.is-error .ait-add-to-cart-error-popup__title{
color:#c62828 !important;
}
/* Keep native WooCommerce notice links/actions usable inside the popup. */
.ait-add-to-cart-error-popup__message a{color:inherit;text-decoration:underline;font-weight:700;}
.ait-add-to-cart-error-popup__message .button,.ait-add-to-cart-error-popup__message a.button{display:inline-flex;align-items:center;justify-content:center;margin:.75rem .25rem 0;padding:.55rem .9rem;border-radius:10px;text-decoration:none;}
.ait-add-to-cart-error-popup__message ul,.ait-add-to-cart-error-popup__message ol{margin:.4rem 0;padding-right:1.25rem;}
/* WooCommerce Blocks warning notices */
body .ait-add-to-cart-error-popup.is-warning .ait-add-to-cart-error-popup__icon{background:#fff8e8!important;color:#c98200!important}
body .ait-add-to-cart-error-popup.is-warning .ait-add-to-cart-error-popup__message{color:#6b5200!important}
/* Final WooCommerce popup: no close button; clicking anywhere closes it. */
.ait-add-to-cart-error-popup { cursor: pointer !important; }
.ait-add-to-cart-error-popup__box { cursor: pointer !important; }
.ait-add-to-cart-error-popup__message,
.ait-add-to-cart-error-popup__message * { cursor: pointer !important; }
.ait-add-to-cart-error-popup__close { display:none !important; }
/* =========================================================
AIDIN TOY — Universal WooCommerce notice popup hardening
========================================================= */
body .ait-add-to-cart-error-popup {
position:fixed!important;
inset:0!important;
z-index:2147483647!important;
pointer-events:auto!important;
cursor:pointer!important;
}
body .ait-add-to-cart-error-popup__backdrop,
body .ait-add-to-cart-error-popup__box,
body .ait-add-to-cart-error-popup__message,
body .ait-add-to-cart-error-popup__message * {
cursor:pointer!important;
}
body .ait-add-to-cart-error-popup__message {
word-break:break-word;
}
body .ait-add-to-cart-error-popup__message a,
body .ait-add-to-cart-error-popup__message button {
pointer-events:none!important;
}
/* Catch notice wrappers/templates added by Blocks or a theme. */
body .woocommerce-error[data-ait-woo-notice-hidden="1"],
body .woocommerce-message[data-ait-woo-notice-hidden="1"],
body .woocommerce-info[data-ait-woo-notice-hidden="1"],
body .wc-block-components-notice-banner[data-ait-woo-notice-hidden="1"],
body [data-wc-notice][data-ait-woo-notice-hidden="1"],
body [data-wc-notice-type][data-ait-woo-notice-hidden="1"] {
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}