.hx-catalog:not(#hx_),
.hx-quickadd:not(#hx_) {
--k-accent: var( --hx-accent, var( --helix-plum, #764452 ) );
--k-tint:   var( --hx-tint, var( --helix-cream, #F6F1EA ) );
--k-ink:    var( --helix-ink, #1C1C1C );
--k-muted:  #6B6762;
--k-line:   #ECE5DA;
--k-radius: 20px;
--k-ease:   cubic-bezier( .2, .8, .2, 1 );
--k-top:    110px;
}
.hx-catalog:not(#hx_) {
position: relative; width: calc( 100vw - var( --hx-sbw, 0px ) );
margin-left: calc( 50% - ( 100vw - var( --hx-sbw, 0px ) ) / 2 );
padding: 0 clamp( 14px, 2.6vw, 56px );
color: var( --k-ink );
font-family: inherit;
}
.hx-catalog:not(#hx_) *,
.hx-quickadd:not(#hx_) * { box-sizing: border-box; }
.hx-catalog:not(#hx_) button,
.hx-quickadd:not(#hx_) button {
margin: 0;
min-width: 0;
min-height: 0;
box-shadow: none;
text-transform: none;
letter-spacing: normal;
font-family: inherit;
line-height: 1.2;
-webkit-tap-highlight-color: transparent;
}
.hx-catalog:not(#hx_) a,
.hx-quickadd:not(#hx_) a { text-decoration: none; }
.hx-ci:not(#hx_) { width: 18px; height: 18px; flex: 0 0 auto; }
.hx-catalog:not(#hx_) .hx-cat__btn,
.hx-quickadd:not(#hx_) .hx-cat__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px;
padding: 0 24px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.hx-catalog:not(#hx_) .hx-cat__btn--accent,
.hx-quickadd:not(#hx_) .hx-cat__btn--accent { background: var( --k-accent ); color: #fff; }
.hx-catalog:not(#hx_) .hx-cat__btn--accent:hover,
.hx-quickadd:not(#hx_) .hx-cat__btn--accent:hover { transform: translateY( -1px ); box-shadow: 0 8px 20px rgba( 0, 0, 0, .15 ); }
.hx-catalog:not(#hx_) .hx-cat__btn--ghost,
.hx-quickadd:not(#hx_) .hx-cat__btn--ghost { background: #fff; border-color: var( --k-line ); color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-cat__btn--ghost:hover,
.hx-quickadd:not(#hx_) .hx-cat__btn--ghost:hover { border-color: var( --k-ink ); } .hx-tiles-row:not(#hx_) {
display: flex;
gap: 12px;
margin: 0 0 28px;
padding: 4px 2px 8px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.hx-tiles-row:not(#hx_)::-webkit-scrollbar { display: none; }
.hx-catalog:not(#hx_) .hx-ctile {
position: relative;
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 10px;
width: 172px;
padding: 8px 8px 12px;
border: 1.5px solid var( --k-line );
border-radius: 22px;
background: #fff;
color: var( --k-ink );
text-align: left;
scroll-snap-align: start;
cursor: pointer;
transition: border-color .25s, transform .25s var( --k-ease ), box-shadow .25s;
}
.hx-catalog:not(#hx_) .hx-ctile:hover { transform: translateY( -3px ); box-shadow: 0 12px 28px rgba( 0, 0, 0, .08 ); }
.hx-catalog:not(#hx_) .hx-ctile.is-on {
border-color: var( --k-accent );
box-shadow: 0 0 0 3px rgba( 118, 68, 82, 0.18 ); box-shadow: 0 0 0 3px color-mix( in srgb, var( --k-accent ) 18%, transparent );
}
.hx-ctile__img:not(#hx_) {
display: flex;
align-items: center;
justify-content: center;
height: 104px;
padding: 8px;
overflow: hidden;
border-radius: 16px;
background: var( --k-tint );
color: var( --k-accent );
}
.hx-catalog:not(#hx_) .hx-ctile__img img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.hx-ctile__img:not(#hx_) .hx-ci { width: 30px; height: 30px; }
.hx-ctile__name:not(#hx_) {
display: -webkit-box;
min-height: 2.5em;
padding: 0 34px 0 4px;
overflow: hidden;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hx-ctile__count:not(#hx_) {
position: absolute;
right: 12px;
bottom: 14px;
min-width: 26px;
padding: 4px 7px;
border-radius: 999px;
background: var( --k-tint );
font-size: 12px;
font-weight: 700;
text-align: center;
}
.hx-ctile.is-on:not(#hx_) .hx-ctile__count { background: var( --k-accent ); color: #fff; } .hx-cat__layout:not(#hx_) {
display: grid;
grid-template-columns: 290px minmax( 0, 1fr );
gap: 36px;
align-items: start;
}
@media ( min-width: 1500px ) {
.hx-cat__layout:not(#hx_) { grid-template-columns: 330px minmax( 0, 1fr ); gap: 44px; }
.hx-cf__dot:not(#hx_) { width: 30px !important; height: 30px !important; }
.hx-catalog:not(#hx_) .hx-cf__body--swatch .hx-cf__opt { padding: 8px 10px; }
}
.hx-cat__side:not(#hx_) {
position: relative;
align-self: start;
will-change: transform;
}
.hx-cat__side-head:not(#hx_),
.hx-cat__side-foot:not(#hx_),
.hx-cat__filters-btn:not(#hx_),
.hx-cat__scrim:not(#hx_) { display: none; } .hx-cf:not(#hx_) {
padding: 4px 0 16px;
border-bottom: 1px solid var( --k-line );
}
.hx-cf:not(#hx_) + .hx-cf { margin-top: 12px; }
.hx-cf__head:not(#hx_) {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
font-size: 15px;
font-weight: 700;
list-style: none;
cursor: pointer;
}
.hx-cf__head:not(#hx_)::-webkit-details-marker { display: none; }
.hx-cf__head:not(#hx_)::after {
content: "";
width: 8px;
height: 8px;
margin-left: auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate( 45deg ) translateY( -3px );
transition: transform .25s;
}
.hx-cf[open]:not(#hx_) .hx-cf__head::after { transform: rotate( -135deg ) translateY( -1px ); }
.hx-cf__badge:not(#hx_) {
padding: 3px 8px;
border-radius: 999px;
background: var( --k-accent );
color: #fff;
font-size: 11px;
}
.hx-cf__body:not(#hx_) { padding-top: 4px; }
.hx-cf__body--chips:not(#hx_) { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-cf__body--swatch:not(#hx_) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hx-cf__body--list:not(#hx_) { display: grid; gap: 2px; }
.hx-catalog:not(#hx_) .hx-cf__opt {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid var( --k-line );
border-radius: 12px;
background: #fff;
color: var( --k-ink );
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: border-color .2s, background-color .2s, color .2s;
}
.hx-catalog:not(#hx_) .hx-cf__opt:hover:not( :disabled ) { border-color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-cf__opt:disabled { opacity: .35; cursor: default; }
.hx-catalog:not(#hx_) .hx-cf__body--chips .hx-cf__opt { border-radius: 999px; }
.hx-catalog:not(#hx_) .hx-cf__body--list .hx-cf__opt {
border-color: transparent;
padding: 8px 6px;
}
.hx-catalog:not(#hx_) .hx-cf__opt.is-on {
border-color: var( --k-accent );
background: #F4F0F1; background: color-mix( in srgb, var( --k-accent ) 8%, #fff );
color: var( --k-ink );
font-weight: 700;
}
.hx-catalog:not(#hx_) .hx-cf__body--chips .hx-cf__opt.is-on { background: var( --k-accent ); color: #fff; }
.hx-cf__name:not(#hx_) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-cf__body--swatch:not(#hx_) .hx-cf__name {
display: -webkit-box;
white-space: normal;
font-size: 12px;
line-height: 1.2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hx-catalog:not(#hx_) .hx-cf__body--swatch .hx-cf__opt { padding: 7px 8px; gap: 7px; }
.hx-cf__count:not(#hx_) { font-size: 11px; color: var( --k-muted ); }
.hx-cf__body--chips:not(#hx_) .hx-cf__opt.is-on .hx-cf__count { color: rgba( 255, 255, 255, .8 ); }
.hx-cf__dot:not(#hx_) {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: #ddd center / cover;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
}
.hx-cf__check:not(#hx_) {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
border: 1.5px solid #C9C0B3;
border-radius: 6px;
color: transparent;
transition: background-color .2s, border-color .2s, color .2s;
}
.hx-cf__check:not(#hx_) .hx-ci { width: 14px; height: 14px; }
.hx-cf__opt.is-on:not(#hx_) .hx-cf__check { border-color: var( --k-accent ); background: var( --k-accent ); color: #fff; } .hx-range:not(#hx_) { position: relative; height: 28px; margin: 6px 10px 0; }
.hx-range__track:not(#hx_) {
position: absolute;
top: 12px;
left: 0;
right: 0;
height: 4px;
border-radius: 999px;
background: var( --k-line );
}
.hx-range__fill:not(#hx_) { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var( --k-accent ); }
.hx-range:not(#hx_) input[type="range"] {
position: absolute;
inset: 0;
width: 100%;
height: 28px;
margin: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.hx-range:not(#hx_) input[type="range"]::-webkit-slider-thumb {
width: 22px;
height: 22px;
border: 3px solid #fff;
border-radius: 50%;
background: var( --k-accent );
box-shadow: 0 2px 6px rgba( 0, 0, 0, .25 );
pointer-events: auto;
cursor: grab;
-webkit-appearance: none;
}
.hx-range:not(#hx_) input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border: 3px solid #fff;
border-radius: 50%;
background: var( --k-accent );
pointer-events: auto;
cursor: grab;
}
.hx-range:not(#hx_) input[type="range"]::-webkit-slider-runnable-track { background: none; }
.hx-range:not(#hx_) input[type="range"]::-moz-range-track { background: none; }
.hx-range__values:not(#hx_) {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
} .hx-cat__bar:not(#hx_) {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.hx-catalog:not(#hx_) .hx-cat__count { margin: 0; font-size: 14px; color: var( --k-muted ); }
.hx-cat__count:not(#hx_) b, .hx-cat__count:not(#hx_) .hx-b { color: var( --k-ink ); }
.hx-cat__tools:not(#hx_) { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hx-catalog:not(#hx_) .hx-cat__sort select {
height: 44px;
padding: 0 38px 0 16px;
border: 1px solid var( --k-line );
border-radius: 999px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
color: var( --k-ink );
font: inherit;
font-size: 14px;
font-weight: 600;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.hx-cat__look:not(#hx_) {
display: inline-flex;
padding: 4px;
border-radius: 999px;
background: var( --k-tint );
}
.hx-catalog:not(#hx_) .hx-cat__look button {
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: transparent;
color: var( --k-ink );
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color .25s, color .25s;
}
.hx-catalog:not(#hx_) .hx-cat__look button[aria-pressed="true"] { background: var( --k-accent ); color: #fff; } .hx-active:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.hx-catalog:not(#hx_) .hx-active__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px 8px 14px;
border: 0;
border-radius: 999px;
background: var( --k-ink );
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.hx-active__chip:not(#hx_) .hx-ci { width: 14px; height: 14px; }
.hx-catalog:not(#hx_) .hx-active__clear {
padding: 6px;
border: 0;
background: none;
color: var( --k-ink );
font-size: 13px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
} .hx-cat__grid:not(#hx_) {
--cols: 3;
display: grid;
grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
gap: 24px;
transition: opacity .25s;
}
.hx-catalog.is-loading:not(#hx_) .hx-cat__grid { opacity: .45; pointer-events: none; }
.hx-catalog:not(#hx_) .hx-cat__empty {
padding: 40px;
border-radius: var( --k-radius );
background: var( --k-tint );
text-align: center;
}
.hx-cat__empty[hidden]:not(#hx_) { display: none; }
.hx-catalog:not(#hx_) .hx-cat__empty button {
padding: 0;
border: 0;
background: none;
color: var( --k-accent );
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.hx-cat__more:not(#hx_) { margin-top: 28px; text-align: center; }
.hx-cat__more:not(#hx_) [hidden] { display: none; }
.hx-pc:not(#hx_) {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var( --k-line );
border-radius: 22px;
background: #fff;
animation: hx-pc-in .5s var( --k-ease ) both;
animation-delay: calc( mod( var( --n, 0 ), 24 ) * .03s );
transition: box-shadow .35s, transform .35s var( --k-ease ), border-color .35s;
}
@keyframes hx-pc-in {
from { opacity: 0; transform: translateY( 14px ); }
to   { opacity: 1; transform: none; }
}
@media ( hover: hover ) {
.hx-pc:hover:not(#hx_) {
border-color: transparent;
box-shadow: 0 20px 44px rgba( 0, 0, 0, .1 );
transform: translateY( -4px );
}
}
.hx-pc__data:not(#hx_) { display: none; } .hx-pc:not(#hx_) .hx-pc__media {
position: relative;
display: block;
aspect-ratio: 1;
margin: 10px 10px 0;
overflow: hidden;
border-radius: 16px;
background: #F6F4F1;
isolation: isolate;
}
.hx-pc:not(#hx_) .hx-pc__img,
.hx-pc:not(#hx_) .hx-pc__wall {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none;
transition: opacity .45s, transform .9s var( --k-ease );
}
.hx-pc:not(#hx_) .hx-pc__img {
padding: 14px;
object-fit: contain;
mix-blend-mode: multiply; }
.hx-pc:not(#hx_) .hx-pc__wall { object-fit: cover; opacity: 0; }
@media ( hover: hover ) {
.hx-pc.has-wall:hover:not(#hx_) .hx-pc__wall { opacity: 1; transform: scale( 1.04 ); }
.hx-pc:not( .has-wall ):hover:not(#hx_) .hx-pc__img { transform: scale( 1.05 ); }
} .hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall .hx-pc__wall { opacity: 1; }
@media ( hover: hover ) {
.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall:hover .hx-pc__wall { opacity: 0; }
}
.hx-pc__badges:not(#hx_) {
position: absolute;
top: 12px;
left: 12px;
display: flex;
gap: 6px;
}
.hx-pc__badge:not(#hx_) {
padding: 6px 10px;
border-radius: 999px;
background: var( --k-ink );
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
}
.hx-pc__badge--sale:not(#hx_) { background: #C2410C; }
.hx-pc__size:not(#hx_) {
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba( 255, 255, 255, .9 );
backdrop-filter: blur( 6px );
color: var( --k-ink );
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 8px rgba( 0, 0, 0, .06 );
} .hx-pc__body:not(#hx_) {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 10px;
padding: 16px 18px 18px;
}
.hx-pc:not(#hx_) .hx-pc__eyebrow {
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var( --k-muted );
}
.hx-pc:not(#hx_) .hx-pc__title {
display: -webkit-box;
margin: -4px 0 0;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.015em;
color: var( --k-ink );
}
.hx-pc:not(#hx_) .hx-pc__title a { color: inherit; }
.hx-pc:not(#hx_) .hx-pc__title a:hover { color: var( --k-accent ); }
.hx-pc:not(#hx_) .hx-pc__sub { margin: -8px 0 0; font-size: 14px; color: var( --k-muted ); }
.hx-pc:not(#hx_) .hx-pc__sub:empty { display: none; } .hx-pc__swatches:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hx-pc:not(#hx_) .hx-pc__dot,
.hx-pc:not(#hx_) .hx-pc__dot:hover,
.hx-pc:not(#hx_) .hx-pc__dot:focus {
display: inline-flex;
width: 32px;
height: 32px;
padding: 3px;
border: 0;
border-radius: 50%;
background: transparent !important;
box-shadow: inset 0 0 0 1.5px var( --k-line );
cursor: pointer;
transition: box-shadow .2s;
} .hx-pc__dot:not(#hx_) span {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ddd center / cover no-repeat;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
pointer-events: none;
}
.hx-pc:not(#hx_) .hx-pc__dot:hover { box-shadow: inset 0 0 0 2px #B498A0; box-shadow: inset 0 0 0 2px color-mix( in srgb, var( --k-accent ) 55%, #fff ); }
.hx-pc:not(#hx_) .hx-pc__dot.is-active { box-shadow: inset 0 0 0 2px var( --k-accent ); }
.hx-pc__dot.is-extra:not(#hx_) { display: none; }
.hx-pc__swatches.is-expanded:not(#hx_) .hx-pc__dot.is-extra { display: block; }
.hx-pc__swatches.is-expanded:not(#hx_) .hx-pc__more { display: none; }
.hx-pc:not(#hx_) .hx-pc__more {
height: 32px;
padding: 0 9px;
border: 0;
border-radius: 999px;
background: var( --k-tint );
color: var( --k-ink );
font-size: 12px;
font-weight: 700;
cursor: pointer;
} .hx-pc__opts:not(#hx_) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hx-pc__opts-label:not(#hx_) { width: 100%; font-size: 12px; color: var( --k-muted ); }
.hx-pc:not(#hx_) .hx-pc__opt {
padding: 6px 10px;
border: 1px solid var( --k-line );
border-radius: 8px;
background: #fff;
color: var( --k-ink );
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.hx-pc:not(#hx_) .hx-pc__opt:hover { border-color: var( --k-ink ); }
.hx-pc:not(#hx_) .hx-pc__opt.is-active { border-color: var( --k-ink ); background: var( --k-ink ); color: #fff; }
.hx-pc:not(#hx_) .hx-pc__opt--dot { padding: 3px; border-radius: 50%; }
.hx-pc:not(#hx_) .hx-pc__opt--dot.is-active { background: #fff; border-color: var( --k-accent ); box-shadow: 0 0 0 1px var( --k-accent ); }
.hx-pc__opt--dot:not(#hx_) span {
display: block;
width: 26px;
height: 26px;
border-radius: 50%;
background-size: cover;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
} .hx-pc__price:not(#hx_) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
margin-top: auto;
padding-top: 4px;
}
.hx-pc__price:not(#hx_) strong, .hx-pc__price:not(#hx_) .hx-t { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.hx-pc__price:not(#hx_) del { margin-left: 6px; font-size: 14px; color: var( --k-muted ); }
.hx-pc__unit:not(#hx_) { margin-left: 4px; font-size: 13px; color: var( --k-muted ); }
.hx-pc__m2:not(#hx_) {
padding: 5px 10px;
border-radius: 999px;
background: #F1ECEE; background: color-mix( in srgb, var( --k-accent ) 10%, #fff );
color: var( --k-accent );
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.hx-pc__m2:empty:not(#hx_) { display: none; } .hx-pc__foot:not(#hx_) {
display: grid;
grid-template-columns: minmax( 0, 1fr ) auto;
align-items: center;
gap: 8px;
padding-top: 12px;
border-top: 1px dashed var( --k-line );
}
.hx-pc:not(#hx_) .hx-pc__view {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 42px;
padding: 0 14px;
border: 1px solid var( --k-line );
border-radius: 999px;
color: var( --k-ink );
font-size: 14px;
font-weight: 600;
white-space: nowrap;
transition: border-color .2s, background-color .2s;
}
.hx-pc:not(#hx_) .hx-pc__view:hover { border-color: var( --k-ink ); color: var( --k-ink ); }
.hx-pc__view:not(#hx_) .hx-ci { width: 16px; height: 16px; transition: transform .3s var( --k-ease ); }
.hx-pc__view:hover:not(#hx_) .hx-ci { transform: translateX( 3px ); }
.hx-pc__delivery:not(#hx_) {
display: flex;
flex: 0 0 auto;
margin-top: -4px;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
font-size: 12px;
white-space: nowrap;
color: var( --k-muted );
}
.hx-pc__delivery:not(#hx_) .hx-ci { width: 16px; height: 16px; }
.hx-pc:not(#hx_) .hx-pc__add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 42px;
padding: 0 20px 0 14px;
border: 0;
border-radius: 999px;
background: var( --k-accent );
color: #fff;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: transform .25s cubic-bezier( .3, 1.6, .5, 1 ), box-shadow .25s;
}
.hx-pc:not(#hx_) .hx-pc__add:hover { transform: scale( 1.05 ); box-shadow: 0 8px 18px rgba( 0, 0, 0, .15 ); }
.hx-pc:not(#hx_) .hx-pc__add .hx-ci { transition: transform .35s var( --k-ease ); }
.hx-pc:not(#hx_) .hx-pc__add:hover .hx-ci { transform: rotate( 90deg ); } .hx-quickadd:not(#hx_) {
position: fixed;
inset: 0;
z-index: 10020;
font-family: inherit;
color: var( --k-ink );
}
.hx-quickadd[hidden]:not(#hx_) { display: none; }
.hx-quickadd__overlay:not(#hx_) {
position: absolute;
inset: 0;
background: rgba( 20, 16, 14, .28 );
opacity: 0;
transition: opacity .3s;
}
.hx-quickadd.is-open:not(#hx_) .hx-quickadd__overlay { opacity: 1; }
.hx-quickadd__panel:not(#hx_) {
position: absolute;
display: flex;
flex-direction: column;
max-height: 85vh;
overflow: hidden;
border-radius: 24px;
background: #fff;
box-shadow: 0 30px 80px rgba( 0, 0, 0, .25 );
opacity: 0;
transform: scale( .96 ) translateY( 10px );
transform-origin: top center;
transition: opacity .25s, transform .35s var( --k-ease );
}
.hx-quickadd.is-open:not(#hx_) .hx-quickadd__panel { opacity: 1; transform: none; }
.hx-quickadd__head:not(#hx_) {
display: grid;
grid-template-columns: 56px minmax( 0, 1fr ) auto;
gap: 12px;
align-items: center;
padding: 16px 16px 14px;
border-bottom: 1px solid var( --k-line );
}
.hx-quickadd__thumb:not(#hx_) {
width: 56px;
height: 56px;
padding: 4px;
overflow: hidden;
border-radius: 14px;
background: var( --k-tint );
}
.hx-quickadd:not(#hx_) .hx-quickadd__thumb img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.hx-quickadd:not(#hx_) .hx-quickadd__title { margin: 0; letter-spacing: -.015em; font-size: 16px; font-weight: 700; line-height: 1.25; color: var( --k-ink ); }
.hx-quickadd:not(#hx_) .hx-quickadd__sub { margin: 2px 0 0; font-size: 13px; color: var( --k-muted ); }
.hx-quickadd:not(#hx_) .hx-quickadd__close {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
background: var( --k-tint );
color: var( --k-ink );
cursor: pointer;
}
.hx-quickadd__body:not(#hx_) {
flex: 1 1 auto;
min-height: 0;
padding: 14px 16px;
overflow-y: auto;
overscroll-behavior: contain;
}
.hx-qa-group:not(#hx_) + .hx-qa-group { margin-top: 14px; }
.hx-quickadd:not(#hx_) .hx-qa-group__label { margin: 0 0 8px; font-size: 13px; color: var( --k-muted ); }
.hx-qa-group__label:not(#hx_) b, .hx-qa-group__label:not(#hx_) .hx-b { color: var( --k-ink ); }
.hx-qa-group__opts:not(#hx_) { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-qa-group__opts.is-swatch:not(#hx_) {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) );
gap: 8px;
max-height: 230px;
overflow-y: auto;
}
.hx-quickadd:not(#hx_) .hx-qa-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px 12px;
border: 1.5px solid var( --k-line );
border-radius: 12px;
background: #fff;
color: var( --k-ink );
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.hx-quickadd:not(#hx_) .hx-qa-opt.is-active { border-color: var( --k-accent ); background: #F5F2F3; background: color-mix( in srgb, var( --k-accent ) 7%, #fff ); }
.is-swatch:not(#hx_) .hx-qa-opt { padding: 4px 4px 6px; }
.hx-qa-opt__img:not(#hx_) {
display: block;
width: 100%;
aspect-ratio: 1;
border-radius: 9px;
background: var( --k-tint ) center / contain no-repeat;
}
.is-swatch:not(#hx_) .hx-qa-opt__name {
width: 100%;
overflow: hidden;
font-size: 11px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
} .hx-calc:not(#hx_) {
margin-top: 16px;
border-radius: 16px;
background: var( --k-tint );
}
.hx-quickadd:not(#hx_) .hx-calc__toggle {
display: grid;
grid-template-columns: auto minmax( 0, 1fr ) auto;
gap: 12px;
align-items: center;
width: 100%;
padding: 14px;
border: 0;
background: none;
color: var( --k-ink );
text-align: left;
cursor: pointer;
}
.hx-calc__toggle:not(#hx_) > .hx-ci:first-child { width: 22px; height: 22px; color: var( --k-accent ); }
.hx-calc__toggle:not(#hx_) strong, .hx-calc__toggle:not(#hx_) .hx-t { display: block; font-size: 14px; }
.hx-calc__toggle:not(#hx_) small { display: block; margin-top: 2px; font-size: 12px; color: var( --k-muted ); }
.hx-calc__toggle:not(#hx_) > .hx-ci:last-child { transition: transform .3s var( --k-ease ); }
.hx-calc__toggle[aria-expanded="true"]:not(#hx_) > .hx-ci:last-child { transform: rotate( 45deg ); }
.hx-calc__body:not(#hx_) { padding: 0 14px 14px; }
.hx-calc__body[hidden]:not(#hx_) { display: none; }
.hx-calc__inputs:not(#hx_) { display: flex; align-items: flex-end; gap: 8px; }
.hx-calc__inputs:not(#hx_) label { position: relative; flex: 1 1 0; }
.hx-calc__inputs:not(#hx_) label span { display: block; margin-bottom: 4px; font-size: 12px; color: var( --k-muted ); }
.hx-quickadd:not(#hx_) .hx-calc__inputs input {
width: 100%;
height: 46px;
margin: 0;
padding: 0 34px 0 14px;
border: 1px solid var( --k-line );
border-radius: 12px;
background: #fff;
color: var( --k-ink );
font: inherit;
font-size: 16px;
font-weight: 600;
box-shadow: none;
}
.hx-quickadd:not(#hx_) .hx-calc__inputs input:focus { outline: none; border-color: var( --k-accent ); }
.hx-calc__inputs:not(#hx_) em {
position: absolute;
right: 12px;
bottom: 13px;
font-size: 13px;
font-style: normal;
color: var( --k-muted );
}
.hx-calc__x:not(#hx_) { padding-bottom: 12px; font-weight: 700; color: var( --k-muted ); }
.hx-quickadd:not(#hx_) .hx-calc__result { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.hx-quickadd:not(#hx_) .hx-calc__result:empty { display: none; }
.hx-calc__result:not(#hx_) b, .hx-calc__result:not(#hx_) .hx-b { color: var( --k-accent ); }
.hx-calc__result:not(#hx_) small { display: block; font-size: 12px; color: var( --k-muted ); }
.hx-quickadd:not(#hx_) .hx-calc__use { width: 100%; height: 42px; margin-top: 10px; font-size: 14px; }
.hx-calc__use[hidden]:not(#hx_) { display: none; } .hx-quickadd__foot:not(#hx_) {
display: grid;
grid-template-columns: auto minmax( 0, 1fr );
grid-template-areas: "qty total" "add add";
gap: 12px;
align-items: center;
padding: 14px 16px 16px;
padding-bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
border-top: 1px solid var( --k-line );
}
.hx-quickadd__qty:not(#hx_) {
grid-area: qty;
display: inline-flex;
align-items: center;
height: 46px;
padding: 3px;
border-radius: 999px;
background: var( --k-tint );
}
.hx-quickadd:not(#hx_) .hx-quickadd__qty button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var( --k-ink );
cursor: pointer;
}
.hx-quickadd:not(#hx_) .hx-quickadd__qty button:hover { background: #fff; }
.hx-quickadd:not(#hx_) .hx-quickadd__qty input {
width: 48px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var( --k-ink );
font: inherit;
font-size: 17px;
font-weight: 700;
text-align: center;
box-shadow: none;
-moz-appearance: textfield;
}
.hx-quickadd__qty:not(#hx_) input::-webkit-outer-spin-button,
.hx-quickadd__qty:not(#hx_) input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hx-quickadd__qty:not(#hx_) input.is-flash { animation: hx-flash .8s ease; }
@keyframes hx-flash {
0%, 100% { color: var( --k-ink ); }
30% { color: var( --k-accent ); transform: scale( 1.25 ); }
}
.hx-quickadd__total:not(#hx_) { grid-area: total; text-align: right; }
.hx-quickadd__total:not(#hx_) strong, .hx-quickadd__total:not(#hx_) .hx-t { display: block; font-size: 22px; font-weight: 700; }
.hx-quickadd__total:not(#hx_) small { display: block; font-size: 12px; color: var( --k-muted ); }
.hx-quickadd:not(#hx_) .hx-quickadd__add { grid-area: add; width: 100%; height: 54px; }
.hx-quickadd__add.is-busy:not(#hx_) { opacity: .6; pointer-events: none; }
.hx-quickadd__add.is-done:not(#hx_) { background: #2F7D4F; }
.hx-quickadd:not(#hx_) .hx-quickadd__error {
margin: 0;
padding: 10px 16px;
background: #FBECEC;
color: #B3261E;
font-size: 13px;
} @media ( max-width: 1024px ) {
.hx-cat__layout:not(#hx_) { grid-template-columns: minmax( 0, 1fr ); }
.hx-catalog:not(#hx_) .hx-cat__filters-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: var( --k-ink );
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.hx-cat__filters-btn:not(#hx_) b:not( :empty ), .hx-cat__filters-btn:not(#hx_) .hx-b:not( :empty ) {
padding: 2px 7px;
border-radius: 999px;
background: #fff;
color: var( --k-ink );
font-size: 11px;
}
.hx-cat__side:not(#hx_) {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
z-index: 10015;
display: flex;
flex-direction: column;
max-height: 88vh;
max-height: 88dvh;
overflow: hidden;
border-radius: 26px 26px 0 0;
background: #fff;
box-shadow: 0 -20px 60px rgba( 0, 0, 0, .18 );
transform: translateY( 105% );
transition: transform .5s cubic-bezier( .2, .9, .2, 1 );
}
html.hx-cat-filters-open:not(#hx_) .hx-cat__side { transform: none; }
.hx-cat__side-head:not(#hx_) {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 10px;
}
.hx-catalog:not(#hx_) .hx-cat__side-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-cat__side-close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: var( --k-tint );
color: var( --k-ink );
cursor: pointer;
}
.hx-cat__side-body:not(#hx_) { flex: 1 1 auto; min-height: 0; padding: 0 20px 12px; overflow-y: auto; overscroll-behavior: contain; }
.hx-cat__side-foot:not(#hx_) {
display: grid;
grid-template-columns: auto minmax( 0, 1fr );
gap: 10px;
padding: 12px 20px;
padding-bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
border-top: 1px solid var( --k-line );
}
.hx-cat__scrim:not(#hx_) {
position: fixed;
inset: 0;
z-index: 10014;
display: block;
background: rgba( 20, 16, 14, .4 );
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility 0s .3s;
}
html.hx-cat-filters-open:not(#hx_) .hx-cat__scrim { opacity: 1; visibility: visible; transition: opacity .3s; }
html.hx-cat-filters-open:not(#hx_),
html.hx-cat-filters-open:not(#hx_) body,
html.hx-qa-open:not(#hx_),
html.hx-qa-open:not(#hx_) body { overflow: hidden; }
} @media ( max-width: 767px ) {
.hx-tiles-row:not(#hx_) { gap: 8px; margin-bottom: 18px; }
.hx-catalog:not(#hx_) .hx-ctile { width: 128px; gap: 6px; padding: 6px 6px 10px; border-radius: 18px; }
.hx-ctile__img:not(#hx_) { height: 76px; border-radius: 13px; }
.hx-ctile__name:not(#hx_) { font-size: 12px; padding-right: 30px; }
.hx-ctile__count:not(#hx_) { right: 8px; bottom: 10px; min-width: 22px; padding: 3px 6px; font-size: 11px; }
.hx-cat__bar:not(#hx_) { flex-wrap: wrap; gap: 8px; }
.hx-cat__count:not(#hx_) { order: 3; width: 100%; }
.hx-cat__tools:not(#hx_) { gap: 6px; }
.hx-catalog:not(#hx_) .hx-cat__sort select { height: 44px; max-width: 150px; padding: 0 32px 0 12px; font-size: 13px; }
.hx-catalog:not(#hx_) .hx-cat__look button { height: 36px; padding: 0 11px; font-size: 12px; } .hx-cat__grid:not(#hx_) { grid-template-columns: minmax( 0, 1fr ); gap: 14px; }
.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc { border-radius: 18px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__media { margin: 6px 6px 0; border-radius: 13px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__img { padding: 8px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__badges { top: 8px; left: 8px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__badge { padding: 4px 8px; font-size: 10px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__size { left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; overflow: hidden; font-size: 10px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__body { gap: 8px; padding: 10px 10px 12px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__eyebrow,
.hx-catalog.is-dense:not(#hx_) .hx-pc__opts,
.hx-catalog.is-dense:not(#hx_) .hx-pc__delivery { display: none; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__title { margin: 0; font-size: 14px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__sub { margin-top: -6px; font-size: 12px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__dot { width: 24px; height: 24px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__swatches .hx-pc__dot:nth-child( n+5 ) { display: none; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__swatches.is-expanded .hx-pc__dot { display: block; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__price { flex-direction: column; align-items: flex-start; gap: 4px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__price strong, .hx-catalog.is-dense:not(#hx_) .hx-pc__price .hx-t { font-size: 17px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__m2 { padding: 3px 8px; font-size: 11px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add { width: 100%; justify-content: center; height: 38px; font-size: 13px; }
.hx-pc__price:not(#hx_) strong, .hx-pc__price:not(#hx_) .hx-t { font-size: 21px; } .hx-quickadd__panel:not(#hx_) {
left: 0 !important;
right: 0;
bottom: 0;
top: auto !important;
width: auto !important;
max-height: 90vh;
max-height: 90dvh;
border-radius: 26px 26px 0 0;
transform: translateY( 100% );
transition: transform .5s cubic-bezier( .2, .9, .2, 1 );
}
.hx-quickadd.is-open:not(#hx_) .hx-quickadd__panel { transform: none; opacity: 1; }
.hx-quickadd__panel:not(#hx_)::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 42px;
height: 5px;
margin-left: -21px;
border-radius: 999px;
background: #DDD5CA;
}
.hx-quickadd__head:not(#hx_) { padding-top: 22px; }
}
@media ( max-width: 380px ) {
.hx-pc:not(#hx_) .hx-pc__add span { display: none; }
}
@media ( prefers-reduced-motion: reduce ) {
.hx-catalog:not(#hx_) *,
.hx-quickadd:not(#hx_) * { animation: none !important; transition-duration: .01ms !important; }
}  .hx-pc:not(#hx_) .hx-pc__dot.is-photo span,
.hx-cf__dot.is-photo:not(#hx_) {
background-size: 320% !important;
background-position: 55% 50% !important;
}
.hx-cat__hero:not(#hx_) {
margin: 8px 0 28px;
padding: 36px 40px;
border-radius: 28px;
background: var( --k-tint );
transition: background-color .4s;
}
.hx-catalog:not(#hx_) .hx-cat__crumbs {
display: flex;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
color: var( --k-muted );
}
.hx-catalog:not(#hx_) .hx-cat__crumbs a { color: var( --k-ink ); text-decoration: underline; text-underline-offset: 3px; }
.hx-cat__hero-row:not(#hx_) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.hx-catalog:not(#hx_) .hx-cat__title {
margin: 0 0 8px;
font-size: clamp( 30px, 3.6vw, 48px );
font-weight: 700;
line-height: 1.08;
letter-spacing: -.02em;
color: var( --k-ink );
}
.hx-catalog:not(#hx_) .hx-cat__lead { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.55; color: var( --k-muted ); } .hx-catalog:not(#hx_) .hx-cat__lead--cat { max-width: 760px; font-size: 15px; }
.hx-cat__hero-text:not(#hx_) [data-hd-view] { animation: hx-pc-in .4s var( --k-ease ) both; }
@media ( max-width: 767px ) {
.hx-cat__hero:not(#hx_) { margin-bottom: 18px; padding: 22px 18px; border-radius: 22px; }
.hx-cat__hero-row:not(#hx_) { gap: 16px; }
.hx-cat__hero-row:not(#hx_) .hx-switch { width: 100%; display: grid; }
.hx-catalog:not(#hx_) .hx-cat__lead { font-size: 14px; }
}  .hx-catalog.is-dense:not(#hx_) .hx-cat__grid { --cols: 4; gap: 20px; }
@media ( max-width: 1500px ) {
.hx-cat__grid:not(#hx_) { --cols: 2; }
.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { --cols: 3; }
}
@media ( max-width: 1180px ) {
.hx-cat__grid:not(#hx_),
.hx-catalog.is-dense:not(#hx_) .hx-cat__grid { --cols: 2; }
} .hx-pc.is-peek:not(#hx_) .hx-pc__wall { opacity: 0 !important; } .hx-pc.has-wall:not(#hx_) .hx-pc__media::after {
content: "Seinal";
position: absolute;
top: 12px;
right: 12px;
padding: 6px 10px 6px 26px;
border-radius: 999px;
background: rgba( 255, 255, 255, .9 ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M7 4v12M11 4v12M15 4v12M5 20h14'/%3E%3C/svg%3E") 9px center / 13px no-repeat;
color: var( --k-ink );
font-size: 11px;
font-weight: 700;
opacity: 0;
transform: translateY( -4px );
transition: opacity .3s, transform .3s;
pointer-events: none;
}
.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall:not( .is-peek ) .hx-pc__media::after { opacity: 1; transform: none; }
@media ( hover: hover ) {
.hx-catalog:not( .is-wall ):not(#hx_) .hx-pc.has-wall:not( .is-peek ):hover .hx-pc__media::after { opacity: 1; transform: none; }
.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall:hover .hx-pc__media::after { opacity: 0; }
} .hx-seg:not(#hx_) {
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
padding: 4px;
border-radius: 999px;
background: var( --k-tint );
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .05 );
isolation: isolate;
}
.hx-seg__pill:not(#hx_) {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
z-index: -1;
width: calc( 50% - 4px );
border-radius: 999px;
background: var( --k-accent );
box-shadow: 0 3px 10px rgba( 0, 0, 0, .15 );
transition: transform .45s cubic-bezier( .3, 1.3, .5, 1 ), background-color .3s;
}
.hx-catalog.is-wall:not(#hx_) .hx-look .hx-seg__pill,
.hx-catalog.is-dense:not(#hx_) .hx-density .hx-seg__pill { transform: translateX( 100% ); }
.hx-catalog:not(#hx_) .hx-seg button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 36px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: transparent;
color: var( --k-ink );
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: color .3s;
}
.hx-catalog:not(#hx_) .hx-seg button[aria-pressed="true"] { color: #fff; }
.hx-seg:not(#hx_) .hx-ci { width: 17px; height: 17px; }
.hx-catalog:not(#hx_) .hx-seg--icons button { width: 40px; padding: 0; } .hx-cf__opt.is-extra:not(#hx_) { display: none !important; }
.hx-cf.is-all:not(#hx_) .hx-cf__opt.is-extra { display: flex !important; }
.hx-catalog:not(#hx_) .hx-cf__more {
display: inline-flex;
margin-top: 10px;
padding: 6px 0;
border: 0;
background: none;
color: var( --k-accent );
font-size: 13px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.hx-cf__more:not(#hx_) [hidden] { display: none; } .hx-cf__shape:not(#hx_) {
flex: 0 0 auto;
border: 1.5px solid currentColor;
border-radius: 2px;
background: repeating-linear-gradient( 90deg, transparent 0 2px, rgba( 0, 0, 0, .18 ) 2px 3px );
opacity: .55;
}
.hx-cf__opt.is-on:not(#hx_) .hx-cf__shape { opacity: 1; background: repeating-linear-gradient( 90deg, transparent 0 2px, rgba( 255, 255, 255, .5 ) 2px 3px ); } .hx-cat__sentinel:not(#hx_) { display: block; height: 1px; }
.hx-hd:not(#hx_) { transition: transform .45s var( --k-ease ); }
html.hx-hd-hidden:not(#hx_) .hx-hd { transform: translateY( calc( -100% - 30px ) ); }
.hx-catnav:not(#hx_) {
position: fixed;
top: var( --wp-admin--admin-bar--height, 0px );
left: 0;
right: 0;
z-index: 9991;
padding: 10px 16px 0;
transform: translateY( calc( -100% - 20px ) );
transition: transform .45s var( --k-ease );
pointer-events: none;
}
html.hx-catnav-on:not(#hx_) .hx-catnav { transform: none; }
.hx-catnav__inner:not(#hx_) {
display: flex;
align-items: center;
gap: 14px;
max-width: 2200px;
height: 64px;
margin: 0 auto;
padding: 0 10px 0 18px;
border-radius: 20px;
background: rgba( 255, 255, 255, .9 );
backdrop-filter: blur( 16px ) saturate( 1.5 );
-webkit-backdrop-filter: blur( 16px ) saturate( 1.5 );
box-shadow: 0 12px 36px rgba( 0, 0, 0, .1 ), inset 0 0 0 1px rgba( 255, 255, 255, .7 );
pointer-events: auto;
}
.hx-catalog:not(#hx_) .hx-catnav__logo { display: flex; flex: 0 0 auto; color: var( --k-ink ); font-weight: 700; }
.hx-catnav__logo:not(#hx_) img { display: block; width: auto; max-width: none; height: 34px; }
.hx-catalog:not(#hx_) .hx-catnav__filters {
display: none;
flex: 0 0 auto;
align-items: center;
gap: 6px;
height: 42px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: var( --k-ink );
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.hx-catnav__filters:not(#hx_) b:not( :empty ), .hx-catnav__filters:not(#hx_) .hx-b:not( :empty ) { padding: 2px 7px; border-radius: 999px; background: #fff; color: var( --k-ink ); font-size: 11px; }
.hx-catnav__pills:not(#hx_) {
display: flex;
flex: 1 1 auto;
gap: 6px;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
mask-image: linear-gradient( 90deg, #000 calc( 100% - 30px ), transparent );
-webkit-mask-image: linear-gradient( 90deg, #000 calc( 100% - 30px ), transparent );
}
.hx-catnav__pills:not(#hx_)::-webkit-scrollbar { display: none; }
.hx-catalog:not(#hx_) .hx-pill {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border: 1px solid var( --k-line );
border-radius: 999px;
background: #fff;
color: var( --k-ink );
font-size: 13px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.hx-catalog:not(#hx_) .hx-pill img { width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; background: var( --k-tint ); object-fit: contain; }
.hx-catalog:not(#hx_) .hx-pill:hover { border-color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-pill.is-on { border-color: var( --k-accent ); background: var( --k-accent ); color: #fff; }
.hx-catnav__tools:not(#hx_) { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.hx-catnav__tools:not(#hx_) .hx-cat__sort select { height: 42px; }
.hx-catnav__tools:not(#hx_) .hx-cart-btn { height: 42px; }
@media ( max-width: 1400px ) {
.hx-catnav__tools:not(#hx_) .hx-density,
.hx-catnav__tools:not(#hx_) .hx-cat__sort { display: none; }
}
@media ( max-width: 1024px ) {
.hx-catalog:not(#hx_) .hx-catnav__filters { display: inline-flex; }
.hx-catnav__logo:not(#hx_),
.hx-catnav__tools:not(#hx_) .hx-switch,
.hx-catnav__tools:not(#hx_) .hx-cart-btn { display: none !important; }
}
@media ( max-width: 767px ) {
.hx-catnav:not(#hx_) { padding: 10px 8px 0; }
.hx-catnav__inner:not(#hx_) { gap: 8px; height: 58px; padding: 0 6px 0 8px; border-radius: 18px; }
.hx-catalog:not(#hx_) .hx-catnav__filters span:not(.hx-b) { display: none; }
.hx-catalog:not(#hx_) .hx-catnav__filters { width: 42px; padding: 0; justify-content: center; position: relative; }
.hx-catnav__filters:not(#hx_) b:not( :empty ), .hx-catnav__filters:not(#hx_) .hx-b:not( :empty ) { position: absolute; top: -4px; right: -4px; }
.hx-catnav__tools:not(#hx_) .hx-look button span { display: none; }
.hx-catalog:not(#hx_) .hx-catnav__tools .hx-look button { width: 40px; padding: 0; }
.hx-catalog:not(#hx_) .hx-pill { height: 38px; padding: 0 12px; }
.hx-cat__tools:not(#hx_) .hx-look button span { display: none; }
.hx-catalog:not(#hx_) .hx-cat__tools .hx-look button { width: 40px; padding: 0; }
}
@media ( prefers-reduced-motion: reduce ) {
.hx-catnav:not(#hx_), .hx-hd:not(#hx_), .hx-seg__pill:not(#hx_) { transition: none; }
}  .hx-catalog:not(#hx_) .hx-ctile.hx-pill {
flex-direction: row;
width: auto;
height: 40px;
padding: 0 14px;
gap: 8px;
border: 1px solid var( --k-line );
border-width: 1px;
border-radius: 999px;
box-shadow: none;
transform: none;
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.hx-catalog:not(#hx_) .hx-ctile.hx-pill:hover { transform: none; box-shadow: none; border-color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-ctile.hx-pill.is-on { border-color: var( --k-accent ); background: var( --k-accent ); color: #fff; box-shadow: none; } .hx-cf__body--sizes:not(#hx_) {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
gap: 8px;
}
.hx-catalog:not(#hx_) .hx-cf__body--sizes .hx-cf__opt {
display: grid;
grid-template-rows: 64px auto auto;
justify-items: center;
gap: 4px;
padding: 10px 6px 8px;
border-radius: 14px;
text-align: center;
}
.hx-cf__panel:not(#hx_) {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 64px;
border-bottom: 1.5px solid var( --k-line );
}
.hx-cf__panel:not(#hx_) i {
display: block;
border-radius: 2px;
background: repeating-linear-gradient( 90deg, #C9A57E 0 2px, #2B211E 2px 3px );
box-shadow: 0 2px 4px rgba( 0, 0, 0, .12 );
transition: transform .35s cubic-bezier( .3, 1.6, .5, 1 );
transform-origin: bottom center;
}
.hx-cf__opt:hover:not( :disabled ):not(#hx_) .hx-cf__panel i { transform: scale( 1.08 ); }
.hx-catalog:not(#hx_) .hx-cf__opt.is-on .hx-cf__panel i {
background: repeating-linear-gradient( 90deg, #B498A0 0 2px, var( --k-accent ) 2px 3px ); background: repeating-linear-gradient( 90deg, color-mix( in srgb, var( --k-accent ) 55%, #fff ) 0 2px, var( --k-accent ) 2px 3px );
}
.hx-cf__body--sizes:not(#hx_) .hx-cf__name { font-size: 12px; font-weight: 700; white-space: nowrap; }
.hx-cf__body--sizes:not(#hx_) .hx-cf__count { font-size: 11px; }
.hx-catalog:not(#hx_) .hx-cf__body--sizes .hx-cf__opt.is-on {
border-color: var( --k-accent );
background: #F5F2F3; background: color-mix( in srgb, var( --k-accent ) 7%, #fff );
color: var( --k-ink );
} .hx-quickadd:not(#hx_) .hx-qa-opt.has-color { padding: 8px 4px 6px; }
.hx-qa-opt__dot:not(#hx_) {
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .1 );
} @media ( max-width: 767px ) {
.hx-catalog.is-dense:not(#hx_) .hx-pc__foot { grid-template-columns: auto minmax( 0, 1fr ); }
.hx-catalog.is-dense:not(#hx_) .hx-pc__view span { display: none; }
.hx-catalog.is-dense:not(#hx_) .hx-pc__view { width: 38px; height: 38px; padding: 0; }
}
@media ( max-width: 380px ) {
.hx-pc__view:not(#hx_) span { display: none; }
.hx-pc:not(#hx_) .hx-pc__view { width: 42px; padding: 0; }
}  .hx-ctile__img:not(#hx_) { height: 124px; padding: 2px; }
.hx-catalog:not(#hx_) .hx-ctile__img img { mix-blend-mode: multiply; transform: scale( 1.12 ); transition: transform .5s var( --k-ease ); }
.hx-catalog:not(#hx_) .hx-ctile:hover .hx-ctile__img img { transform: scale( 1.2 ); }
.hx-catalog:not(#hx_) .hx-ctile.hx-pill img { mix-blend-mode: multiply; }
@media ( max-width: 767px ) {
.hx-ctile__img:not(#hx_) { height: 88px; }
} .hx-catalog:not(#hx_) .hx-cf__body--sizes .hx-cf__opt { grid-template-rows: 74px auto auto; }
.hx-cf__panel:not(#hx_) { height: 74px; }
.hx-cf__panel:not(#hx_) i { border-radius: 3px; } .hx-pc__opts:not(#hx_) { flex-wrap: nowrap; }
.hx-pc__opts-label:not(#hx_) { display: none; }
.hx-catalog:not(#hx_) .hx-pc .hx-pc__opt:not( .hx-pc__opt--dot ) {
flex: 1 1 0;
min-width: 0;
padding: 7px 4px;
overflow: hidden;
font-size: 12px;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
} .hx-pc:not(#hx_) .hx-pc__media { transition: margin .35s var( --k-ease ), border-radius .35s var( --k-ease ); }
.hx-catalog.is-wall:not(#hx_) .hx-pc.has-wall .hx-pc__media {
margin: 0;
border-radius: 22px 22px 0 0;
} body.hx-wide-page:not(#hx_) .hx-hd { padding-left: clamp( 14px, 2.6vw, 56px ); padding-right: clamp( 14px, 2.6vw, 56px ); }
body.hx-wide-page:not(#hx_) .hx-hd__bar { max-width: none; }
body.hx-wide-page:not(#hx_) .hx-mega { left: clamp( 14px, 2.6vw, 56px ); right: clamp( 14px, 2.6vw, 56px ); max-width: none; }
body.hx-wide-page:not(#hx_) .hx-mega--small { right: auto; }
.hx-catnav:not(#hx_) { padding-left: clamp( 8px, 2.6vw, 56px ); padding-right: clamp( 8px, 2.6vw, 56px ); }
.hx-catnav__inner:not(#hx_) { max-width: none; }  .hx-ctabs:not(#hx_) {
display: grid;
grid-auto-columns: minmax( 210px, 1fr );
grid-auto-flow: column;
gap: 10px;
margin: 0 0 26px;
padding: 2px 2px 6px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.hx-ctabs:not(#hx_)::-webkit-scrollbar { display: none; }
.hx-catalog:not(#hx_) .hx-ctab {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
height: 92px;
padding: 8px 14px 8px 8px;
border: 1px solid var( --k-line );
border-radius: 20px;
background: #fff;
color: var( --k-ink );
text-align: left;
scroll-snap-align: start;
cursor: pointer;
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.hx-catalog:not(#hx_) .hx-ctab:hover { border-color: var( --k-ink ); background: #fff; color: var( --k-ink ); }
.hx-catalog:not(#hx_) .hx-ctab.is-on {
border-color: var( --k-accent );
background: #F7F4F5; background: color-mix( in srgb, var( --k-accent ) 6%, #fff );
box-shadow: inset 0 0 0 1px var( --k-accent );
}
.hx-catalog:not(#hx_) .hx-ctab:focus-visible { outline: 2px solid var( --k-accent ); outline-offset: 2px; }
.hx-ctab__img:not(#hx_) {
display: flex;
flex: 0 0 74px;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
overflow: hidden;
border-radius: 14px;
background: var( --k-tint );
}
.hx-catalog:not(#hx_) .hx-ctab__img img {
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
mix-blend-mode: multiply;
transform: scale( 1.15 );
transition: transform .5s var( --k-ease );
}
.hx-catalog:not(#hx_) .hx-ctab:hover .hx-ctab__img img { transform: scale( 1.28 ); } .hx-ctab__img--mosaic:not(#hx_) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
padding: 5px;
}
.hx-ctab__img--mosaic:not(#hx_) i {
display: block;
min-width: 0;
min-height: 0;
overflow: hidden;
border-radius: 7px;
background: #FAF7F2; background: color-mix( in srgb, var( --k-tint ) 60%, #fff );
}
.hx-catalog:not(#hx_) .hx-ctab__img--mosaic img { transform: scale( 1.35 ); }
.hx-catalog:not(#hx_) .hx-ctab:hover .hx-ctab__img--mosaic img { transform: scale( 1.5 ); }
.hx-ctab__text:not(#hx_) { display: grid; gap: 4px; min-width: 0; }
.hx-ctab__name:not(#hx_) {
display: -webkit-box;
overflow: hidden;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hx-ctab__meta:not(#hx_) {
overflow: hidden;
color: var( --k-muted );
font-size: 12.5px;
white-space: nowrap;
text-overflow: ellipsis;
}
.hx-ctab.is-on:not(#hx_) .hx-ctab__meta { color: var( --k-accent ); font-weight: 600; }
@media ( max-width: 767px ) {
.hx-ctabs:not(#hx_) { grid-auto-columns: 196px; gap: 8px; margin-bottom: 18px; }
.hx-catalog:not(#hx_) .hx-ctab { height: 76px; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 18px; }
.hx-ctab__img:not(#hx_) { flex-basis: 62px; width: 62px; height: 62px; border-radius: 12px; }
.hx-ctab__name:not(#hx_) { font-size: 14px; }
.hx-ctab__meta:not(#hx_) { font-size: 12px; }
} .hx-cat__side-sp:not(#hx_) { display: none; }
@media ( min-width: 1025px ) {
.hx-cat__side:not(#hx_) {
align-self: stretch;
will-change: auto;
transform: none !important;
}
.hx-cat__side-sp:not(#hx_) { display: block; height: 0; }
.hx-cat__side-body:not(#hx_) {
position: -webkit-sticky;
position: sticky;
top: 112px;
}
.hx-cat__side-body.is-fit:not(#hx_) { transition: top .45s var( --k-ease ); } .hx-cat__side.is-legacy:not(#hx_) { align-self: start; }
.hx-cat__side.is-legacy:not(#hx_) .hx-cat__side-body { position: static; }
} .hx-pc__price--inq:not(#hx_) { align-items: center; min-height: 32px; }
.hx-pc__price--inq:not(#hx_) span {
color: var( --k-accent );
font-size: 16px;
font-weight: 700;
}
.hx-pc:not(#hx_) .hx-pc__add--inq:hover .hx-ci { transform: none; } .hx-catnav__inner:not(#hx_) { padding-left: 10px; }  .hx-cat__hero:not(#hx_) {
background: #E7E2DC; background: color-mix( in srgb, var( --k-tint ) 93%, var( --k-ink ) 7% );
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .05 );
}
html.hx-view-ari:not(#hx_) .hx-cat__hero { background: #E3E2E2; background: color-mix( in srgb, var( --k-tint ) 82%, #8DA0C0 18% ); }
html.hx-view-kodu:not(#hx_) .hx-cat__hero { background: #EFE6DB; background: color-mix( in srgb, var( --k-tint ) 84%, #C9AE8C 16% ); } .hx-catnav__inner:not(#hx_) {
background: #fff;
box-shadow: 0 18px 44px rgba( 28, 22, 18, .16 ), 0 2px 6px rgba( 28, 22, 18, .06 ), inset 0 0 0 1px rgba( 0, 0, 0, .06 );
}
.hx-catalog:not(#hx_) .hx-catnav .hx-pill { border-color: rgba( 202, 196, 187, 0.82 ); border-color: color-mix( in srgb, var( --k-line ) 70%, var( --k-ink ) 12% ); }
@media ( min-width: 1025px ) {
html.hx-catnav-fit:not(#hx_) .hx-catnav {
left: var( --cn-left, 0px );
right: auto;
width: var( --cn-width, 100% );
padding-left: 0;
padding-right: 0;
}
html.hx-catnav-fit:not(#hx_) .hx-catnav__inner { max-width: none; }
} @media ( max-width: 380px ) { .hx-catalog:not( .is-dense ):not(#hx_) .hx-pc__view span,
.hx-catalog:not( .is-dense ):not(#hx_) .hx-pc .hx-pc__add span { display: inline; }
.hx-catalog:not( .is-dense ):not(#hx_) .hx-pc .hx-pc__view { width: auto; padding: 0 14px; } .hx-catalog.is-dense:not(#hx_) .hx-pc__foot { grid-template-columns: 34px minmax( 0, 1fr ); gap: 6px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__view { width: 34px; height: 34px; padding: 0; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add { width: 100%; height: 34px; padding: 0 8px; gap: 4px; font-size: 12.5px; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add span { display: inline; overflow: hidden; text-overflow: ellipsis; }
.hx-catalog.is-dense:not(#hx_) .hx-pc .hx-pc__add .hx-ci { flex: 0 0 auto; width: 14px; height: 14px; }
}  .hx-cat__catbtn:not(#hx_),
.hx-cat__catsheet-head:not(#hx_),
.hx-cat__catscrim:not(#hx_) { display: none; }
.hx-cat__catsheet:not(#hx_) { display: contents; }
@media ( max-width: 767px ) {  html:not(#hx_) body .hx-catalog .hx-cat__hero { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hx-catalog:not(#hx_) .hx-cat__crumbs { margin-bottom: 6px; font-size: 12.5px; }
.hx-catalog:not(#hx_) .hx-cat__lead { display: none; }
.hx-catalog:not(#hx_) .hx-cat__title {
margin: 0 0 12px;
overflow: hidden;
font-size: clamp( 21px, 6.2vw, 27px );
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.hx-cat__hero-row:not(#hx_) { flex-direction: column; align-items: stretch; gap: 0; }
.hx-cat__hero-row:not(#hx_) .hx-switch { width: 100%; } .hx-catalog:not(#hx_) .hx-cat__catbtn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 74px;
margin: 0 0 12px;
padding: 8px 12px 8px 8px;
border: 0;
border-radius: 22px;
background-color: #764452;
background-color: var( --k-accent );
background-image: linear-gradient( 135deg, rgba( 255, 255, 255, .14 ), rgba( 255, 255, 255, 0 ) 55% );
color: #fff;
font: inherit;
text-align: left;
box-shadow: 0 12px 26px rgba( 118, 68, 82, .3 );
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .15s;
}
.hx-catalog:not(#hx_) .hx-cat__catbtn[hidden] { display: none; }
.hx-catalog:not(#hx_) .hx-cat__catbtn:active { transform: scale( .985 ); }
.hx-cat__catbtn-img:not(#hx_) {
display: flex;
flex: 0 0 58px;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
overflow: hidden;
border-radius: 15px;
background: #fff;
}
.hx-cat__catbtn-img:not(#hx_) img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hx-cat__catbtn-img.is-mosaic:not(#hx_) { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; }
.hx-cat__catbtn-img.is-mosaic:not(#hx_) i { display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: 5px; background: #F9F6F1; }
.hx-cat__catbtn-img.is-mosaic:not(#hx_) img { object-fit: cover; transform: scale( 1.35 ); }
.hx-cat__catbtn-txt:not(#hx_) { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; line-height: 1.2; }
.hx-cat__catbtn-txt:not(#hx_) small { color: rgba( 255, 255, 255, .72 ); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hx-cat__catbtn-txt:not(#hx_) b, .hx-cat__catbtn-txt:not(#hx_) .hx-b { overflow: hidden; font-size: 17px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.hx-cat__catbtn-meta:not(#hx_) { text-transform: none; letter-spacing: 0; }
.hx-cat__catbtn-meta:not( :empty ):not(#hx_)::before { content: " · "; }
.hx-cat__catbtn-ico:not(#hx_) {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fff;
color: #764452;
color: var( --k-accent );
}
.hx-cat__catbtn-ico:not(#hx_) svg { width: 18px; height: 18px; } .hx-catalog:not(#hx_) .hx-cat__catsheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10001;
display: block;
max-height: 86vh;
padding: 0 14px calc( 18px + env( safe-area-inset-bottom, 0px ) );
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 24px 24px 0 0;
background: #fff;
box-shadow: 0 -18px 50px rgba( 20, 14, 10, .22 );
transform: translateY( 105% );
visibility: hidden;
transition: transform .38s cubic-bezier( .2, .8, .2, 1 ), visibility 0s linear .38s;
}
html.hx-cat-sheet-open:not(#hx_) .hx-catalog .hx-cat__catsheet {
transform: none;
visibility: visible;
transition: transform .38s cubic-bezier( .2, .8, .2, 1 ), visibility 0s;
}
html.hx-cat-sheet-open:not(#hx_),
html.hx-cat-sheet-open:not(#hx_) body { overflow: hidden; }
.hx-catalog:not(#hx_) .hx-cat__catsheet-head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -14px 6px;
padding: 20px 14px 12px;
background: #fff;
}
.hx-cat__catsheet-grip:not(#hx_) { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var( --k-line ); }
.hx-cat__catsheet-head:not(#hx_) strong, .hx-cat__catsheet-head:not(#hx_) .hx-t { color: var( --k-ink ); font-size: 19px; font-weight: 800; }
.hx-catalog:not(#hx_) .hx-cat__catsheet-x {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: var( --k-tint );
color: var( --k-ink );
cursor: pointer;
}
.hx-cat__catsheet-x:not(#hx_) .hx-ci { width: 18px; height: 18px; }
.hx-catalog:not(#hx_) .hx-cat__catscrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; display: block; background: rgba( 20, 14, 10, .45 ); opacity: 0; transition: opacity .3s; }
.hx-catalog:not(#hx_) .hx-cat__catscrim[hidden] { display: none; }
html.hx-cat-sheet-open:not(#hx_) .hx-catalog .hx-cat__catscrim { opacity: 1; } .hx-cat__catsheet:not(#hx_) .hx-cat__tiles { margin: 0; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctabs {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
gap: 10px;
margin: 0;
padding: 0;
overflow: visible;
}
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab {
flex-direction: column;
align-items: stretch;
gap: 8px;
height: auto;
padding: 7px 7px 11px;
border-radius: 18px;
opacity: 1;
animation: none;
}
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img {
flex: 0 0 auto;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
border-radius: 13px;
}
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img img { width: 100%; height: 100%; object-fit: contain; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img--mosaic { gap: 3px; padding: 5px; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__img--mosaic img { object-fit: cover; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__text { gap: 2px; padding: 0 4px; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__name { overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab__meta { font-size: 12px; }
.hx-catalog:not(#hx_) .hx-cat__catsheet .hx-ctab.is-on { border-color: var( --k-accent ); box-shadow: 0 0 0 2px var( --k-accent ) inset; } .hx-catalog:not(#hx_) .hx-cat__bar { flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.hx-catalog:not(#hx_) .hx-cat__count { display: none; }
.hx-catalog:not(#hx_) .hx-cat__filters-btn { flex: 1 1 auto; justify-content: center; min-width: 0; height: 44px; }
.hx-catalog:not(#hx_) .hx-cat__tools { flex: 0 0 auto; gap: 6px; margin-left: 0; }
.hx-catalog:not(#hx_) .hx-cat__tools .hx-cat__sort {
position: relative;
display: block;
flex: 0 0 44px;
width: 44px;
height: 44px;
overflow: hidden;
border: 1px solid var( --k-line );
border-radius: 999px;
background: #fff;
}
.hx-catalog:not(#hx_) .hx-cat__tools .hx-cat__sort::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
background: var( --k-ink );
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
} .hx-catalog:not(#hx_) .hx-cat__tools .hx-cat__sort select {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
font-size: 16px;
cursor: pointer;
}
.hx-catalog:not(#hx_) .hx-cat__tools .hx-seg button { width: 36px; min-width: 0; padding: 0; } body.hx-catalog-page:not(#hx_) .hx-tabbar,
body.hx-catalog-page:not(#hx_) .hx-sheet { display: none !important; }
body.hx-catalog-page.hx-has-tabbar:not(#hx_) { padding-bottom: calc( 88px + env( safe-area-inset-bottom, 0px ) ) !important; }
body.hx-catalog-page:not(#hx_) .hx-catnav {
top: auto;
bottom: 0;
padding: 0 8px calc( 8px + env( safe-area-inset-bottom, 0px ) );
transform: translateY( calc( 100% + 20px ) );
}
html.hx-catnav-on:not(#hx_) body.hx-catalog-page .hx-catnav { transform: none; }
html.hx-cat-sheet-open:not(#hx_) body.hx-catalog-page .hx-catnav { transform: translateY( calc( 100% + 20px ) ); }
body.hx-catalog-page:not(#hx_) .hx-catnav__inner { box-shadow: 0 -4px 18px rgba( 0, 0, 0, .06 ), 0 14px 36px rgba( 0, 0, 0, .16 ), inset 0 0 0 1px rgba( 255, 255, 255, .7 ); } body.hx-catalog-page:not(#hx_) .hx-catnav__tools .hx-cart-btn { display: inline-flex !important; flex: 0 0 auto; height: 42px; padding: 0 10px; }
body.hx-catalog-page:not(#hx_) .hx-catnav__tools .hx-cart-btn__total { display: none; } body.hx-catalog-page:not(#hx_) .hx-catnav__tools .hx-look { display: none; }
}
@media ( max-width: 767px ) {
.hx-catalog:not(#hx_) .hx-pc { animation: none; }
} .hx-catdock:not(#hx_) { display: none; }
@media ( max-width: 767px ) {
body.hx-catalog-page:not(#hx_) .hx-hd-root,
body.hx-catalog-page:not(#hx_) .hx-catnav { display: none !important; } body.hx-catalog-page:not(#hx_) .hx-catalog { padding-top: 14px; }
.hx-catalog:not(#hx_) .hx-catdock {
position: fixed;
left: 8px;
right: 8px;
bottom: calc( 8px + env( safe-area-inset-bottom, 0px ) );
z-index: 9996; display: grid;
grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
align-items: center;
height: 64px;
padding: 0 4px;
border-radius: 22px;
background: rgba( 255, 255, 255, .94 );
-webkit-backdrop-filter: blur( 14px ) saturate( 1.4 );
backdrop-filter: blur( 14px ) saturate( 1.4 );
box-shadow: 0 0 0 1px rgba( 40, 28, 22, .06 ), 0 14px 36px rgba( 40, 28, 22, .2 );
transform: translateY( calc( 100% + 30px ) );
transition: transform .38s cubic-bezier( .2, .8, .2, 1 );
}
html.hx-catdock-on:not(#hx_) .hx-catalog .hx-catdock { transform: none; }
html.hx-cat-sheet-open:not(#hx_) .hx-catalog .hx-catdock,
html.hx-cat-filters-open:not(#hx_) .hx-catalog .hx-catdock { transform: translateY( calc( 100% + 30px ) ); }
.hx-catalog:not(#hx_) .hx-catdock__btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
height: 56px;
margin: 0;
padding: 0;
border: 0;
border-radius: 16px;
background: transparent;
color: var( --k-ink );
font: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hx-catalog:not(#hx_) .hx-catdock__btn:active { background: var( --k-tint ); }
.hx-catdock__ico:not(#hx_) { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.hx-catdock__ico:not(#hx_) .hx-ci,
.hx-catdock__ico:not(#hx_) svg { width: 22px; height: 22px; }
.hx-catalog:not(#hx_) .hx-catdock__btn small { overflow: hidden; max-width: 100%; color: var( --k-muted ); font-size: 10.5px; font-weight: 600; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .hx-catdock__ico:not(#hx_) b:not( :empty ), .hx-catdock__ico:not(#hx_) .hx-b:not( :empty ) {
position: absolute;
top: -6px;
right: -10px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var( --k-accent );
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 17px;
text-align: center;
} .hx-catalog:not(#hx_) .hx-catdock__sort select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
font-size: 16px;
cursor: pointer;
} .hx-catalog:not( .is-wall ):not(#hx_) .hx-catdock__look-wall,
.hx-catalog.is-wall:not(#hx_) .hx-catdock__look-panel { display: none; }
.hx-catdock__look:not(#hx_) .hx-catdock__ico > span { display: flex; } .hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: var( --k-ink );
}
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__total { display: none; }
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__icon { width: 22px; height: 22px; }
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__count {
position: absolute;
top: 2px;
left: calc( 50% + 4px );
min-width: 17px;
height: 17px;
padding: 0 4px;
font-size: 10px;
line-height: 17px;
}
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn:not( .has-items ) .hx-cart-btn__count { display: none; }
body.hx-catalog-page:not(#hx_) { padding-bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ) !important; }
} @media ( max-width: 767px ) {
.hx-catalog:not(#hx_) .hx-catdock {
background: rgba( 28, 24, 23, .96 );
box-shadow: 0 0 0 1px rgba( 255, 255, 255, .06 ) inset, 0 14px 36px rgba( 20, 14, 10, .35 );
}
.hx-catalog:not(#hx_) .hx-catdock__btn { color: #fff; } .hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn,
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn .hx-cico { color: #fff !important; }
.hx-catalog:not(#hx_) .hx-catdock__btn small { color: rgba( 255, 255, 255, .62 ); }
.hx-catalog:not(#hx_) .hx-catdock__btn:active { background: rgba( 255, 255, 255, .1 ); }
.hx-catdock__ico:not(#hx_) b:not( :empty ),
.hx-catdock__ico:not(#hx_) .hx-b:not( :empty ),
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__count { box-shadow: 0 0 0 2px #1C1817; }
.hx-catalog:not(#hx_) .hx-catdock__cart .hx-cart-btn__count { background: var( --k-accent ); color: #fff; }
} @media ( min-width: 1181px ) {
.hx-catalog.is-dense:not(#hx_) .hx-cat__grid {
grid-template-columns: repeat( auto-fill, minmax( max( 270px, calc( ( 100% - 3 * 20px ) / 4 ) ), 1fr ) );
}
}
@media ( min-width: 1181px ) and ( max-width: 1800px ) {
.hx-catalog.is-dense:not(#hx_) .hx-cat__grid {
grid-template-columns: repeat( auto-fill, minmax( max( 270px, calc( ( 100% - 2 * 20px ) / 3 ) ), 1fr ) );
}
} .hx-cat__mtiles:not(#hx_),
.hx-cat__mphoto:not(#hx_),
.hx-cat__mhead:not(#hx_),
.hx-ctab__photo:not(#hx_) { display: none; }
@media ( max-width: 767px ) {
.hx-catalog.has-mtiles:not(#hx_) { --mk-dark: #17110E; }
html.hx-view-ari:not(#hx_) .hx-catalog.has-mtiles { --mk-dark: #111822; } html:not(#hx_) body .hx-catalog.has-mtiles .hx-cat__hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 430px;
margin: -14px -14px 0;
padding: 70px 18px 46px;
overflow: hidden;
border-radius: 0 0 28px 28px;
background: var( --mk-dark );
color: #fff;
isolation: isolate;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto {
position: absolute;
inset: 0;
z-index: -2;
display: block;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
transition: opacity .35s ease;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto img.is-swap { opacity: .25; }
html:not(#hx_) body .hx-catalog.has-mtiles .hx-cat__hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient( 180deg,
rgba( 14, 10, 8, .62 ) 0%,
rgba( 14, 10, 8, .12 ) 24%,
rgba( 14, 10, 8, .42 ) 48%,
rgba( 14, 10, 8, .9 ) 78%,
var( --mk-dark ) 100% );
} .hx-catalog.has-mtiles:not(#hx_) .hx-cat__crumbs {
position: absolute;
top: 22px;
left: 18px;
margin: 0;
color: rgba( 255, 255, 255, .75 );
font-size: 12.5px;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__crumbs a { color: rgba( 255, 255, 255, .9 ); }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row { position: static; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch {
--sw-h: 32px;
position: absolute;
top: 14px;
right: 14px;
width: auto;
display: inline-grid;
background: rgba( 255, 255, 255, .16 );
box-shadow: inset 0 0 0 1px rgba( 242, 235, 228, .32 );
-webkit-backdrop-filter: blur( 12px );
backdrop-filter: blur( 12px );
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch .hx-switch__btn { padding: 0 12px; color: #fff !important; font-size: 12.5px; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch .hx-switch__btn svg { display: none; } .hx-catalog.has-mtiles:not(#hx_) .hx-cat__title {
margin: 0;
color: #fff;
font-size: clamp( 28px, 8.4vw, 33px );
line-height: 1.04;
letter-spacing: -.02em;
white-space: normal;
text-shadow: 0 2px 20px rgba( 0, 0, 0, .25 );
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero.is-cat .hx-cat__title {
margin-bottom: 6px;
color: rgba( 255, 255, 255, .75 );
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: none;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mhead { display: block; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mname {
color: #fff;
font-size: clamp( 28px, 8.4vw, 33px );
font-weight: 800;
line-height: 1.04;
letter-spacing: -.02em;
text-shadow: 0 2px 20px rgba( 0, 0, 0, .25 );
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero:not( .is-cat ) .hx-cat__mname { display: none; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mmeta { margin-top: 6px; color: rgba( 255, 255, 255, .82 ); font-size: 14px; } .hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles { display: block; margin: 18px -18px 0; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-cat__tiles { margin: 0; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctabs {
display: flex;
gap: 12px;
margin: 0;
padding: 4px 18px 2px;
scroll-padding: 0 18px;
scroll-snap-type: x proximity;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab {
flex: 0 0 74px;
flex-direction: column;
align-items: center;
gap: 6px;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #fff;
text-align: center;
scroll-snap-align: start;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab:hover { background: transparent; color: #fff; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img {
position: relative;
flex: none;
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba( 255, 255, 255, .1 );
box-shadow: 0 0 0 1px rgba( 242, 235, 228, .32 );
transition: box-shadow .25s;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab.is-on .hx-ctab__img { box-shadow: 0 0 0 2px var( --mk-dark ), 0 0 0 4px #F2EBE4; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img .hx-ctab__photo {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: normal;
transform: none;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__text { display: block; width: 100%; padding: 0; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__name {
display: -webkit-box;
overflow: hidden;
color: rgba( 255, 255, 255, .72 );
font-size: 11.5px;
font-weight: 500;
line-height: 1.25;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab.is-on .hx-ctab__name { color: #fff; font-weight: 700; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__meta { display: none; } .hx-catalog.has-mtiles:not(#hx_) .hx-cat__catbtn,
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__catsheet,
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__catscrim { display: none !important; } .hx-catalog:not(#hx_) .hx-cat__tools .hx-density { display: none; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__bar {
position: relative;
z-index: 3;
margin: -27px 0 16px;
padding: 6px;
border-radius: 999px;
background: #fff;
box-shadow: 0 14px 30px rgba( 20, 14, 10, .18 );
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__filters-btn {
height: 42px;
border: 0;
background: var( --k-ink );
color: #fff;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__tools .hx-cat__sort { flex-basis: 42px; width: 42px; height: 42px; }
}
@media ( max-width: 767px ) and ( prefers-reduced-motion: reduce ) {
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mphoto img { transition: none; }
} @media ( max-width: 767px ) { html:not(#hx_) body.hx-catalog-page .hx-hd-root { display: block !important; }
body.hx-catalog-page:not(#hx_) .hx-hd-spacer { display: none; }
body.hx-catalog-page:not(#hx_) .hx-hd { position: absolute !important; top: 0; transform: none !important; }
body.hx-catalog-page:not(#hx_) .hx-hd__bar { animation: none; } body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar { grid-template-columns: auto minmax( 0, 1fr ); justify-items: stretch; }
body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__logo { justify-self: start; }
body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar .hx-hd__actions { display: flex; align-items: center; justify-self: end; gap: 2px; }
body.hx-catalog-page:not(#hx_) .hx-hd__actions > .hx-lang,
body.hx-catalog-page:not(#hx_) .hx-hd__actions > [class*="hx-lang"],
body.hx-catalog-page:not(#hx_) .hx-hd__actions > .hx-hd__theme { display: none !important; }
body.hx-catalog-page:not(#hx_) .hx-hd .hx-hd__search,
body.hx-catalog-page:not(#hx_) .hx-hd .hx-hd__burger { display: inline-flex; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar .hx-hd__actions > .hx-hd__cart,
body.hx-catalog-page:not(#hx_) .hx-hd-root .hx-hd__bar .hx-hd__actions > .hx-hd__burger { display: inline-flex !important; }
body.hx-catalog-page:not(#hx_) .hx-hd__cart .hx-cart-btn { height: 42px; padding: 0 8px; gap: 4px; border: 0; background: transparent; box-shadow: none; }
body.hx-catalog-page:not(#hx_) .hx-hd__cart .hx-cart-btn__total { display: none; }
body.hx-catalog-page:not(#hx_) .hx-hd__cart .hx-cart-btn__count { min-width: 20px; height: 20px; font-size: 11px; } html:not(#hx_) body .hx-catalog.has-mtiles .hx-cat__hero { min-height: 470px; padding-top: 136px; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__crumbs { top: 96px; left: 18px; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__hero-row .hx-switch { top: 86px; right: 14px; } .hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img img,
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img i,
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab:hover .hx-ctab__img img {
border-radius: 50%;
transform: none !important;
transition: none;
}
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img .hx-ctab__photo {
-webkit-clip-path: circle( 50% at 50% 50% );
clip-path: circle( 50% at 50% 50% );
} .hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img--mosaic { padding: 6px; gap: 2px; }
.hx-catalog.has-mtiles:not(#hx_) .hx-cat__mtiles .hx-ctab__img > img:not( .hx-ctab__photo ) {
-webkit-clip-path: circle( 50% at 50% 50% );
clip-path: circle( 50% at 50% 50% );
}
}